.w-70{
   width: 70% !important;
}
.w-75{
   width: 75% !important;
}
.w-80{
   width: 80% !important;
}
.w-85{
   width: 85% !important;
}
.w-90{
   width: 90% !important;
}
.w-92{
   width: 92% !important;
}
.w-95{
   width: 95% !important;
}
#User a.rotareimage.min, #User a.rotareimage{
   width: 43px;height: 43px;line-height: 23px;
}

#nav-shadow.no-mobile span.alertpic{top: 6px;left: 6px;}

#Users .msg-notreed{
   display: inline-block;
   /* vertical-align: bottom; */
   width: 20px;
   padding: 0;
   margin: 0;
   height: 20px;
   background-size: 19px;
   color:#fff;
   background: url(send.svg) no-repeat center center;
}
#Users .msg-reed{
   display: inline-block;
   /* vertical-align: bottom; */
   width: 20px;
   padding: 0;
   margin: 0;
   height: 20px;
   background-size: 19px;
   color:#fff;
   background: url(read.svg) no-repeat center center;
}

@media (max-width: 850px) {

   .w-75{
      width: 100% !important;
   }
}
#User a.rotareimage.min, #User a.rotareimage {
   color: #333;
   display: inline-block;
   transition: all 0.2s;
   padding: 10px;
   text-align: center;
   margin: 0;
   width: 43px;
   height: 43px;
   line-height: 30px;
   /* border-radius: 50%; */
   margin: 0px 0 0 10px;
   border: none;
   background: #e9e9e9;
   text-shadow: none;
   box-shadow: rgba(0, 0, 0, 0.16) 0px 8px 20px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

#Chat .list-box a img{max-width: 73px;}

.list-box .last-message{
   overflow-wrap: break-word;
   word-wrap: break-word;

   -ms-word-break: break-all;
   /* This is the dangerous one in WebKit, as it breaks things wherever */
   word-break: break-all;
   /* Instead use this non-standard one: */
   word-break: break-word;

   /* Adds a hyphen where the word breaks, if supported (No Blink) */
   -ms-hyphens: auto;
   -moz-hyphens: auto;
   -webkit-hyphens: auto;
   hyphens: auto;
}



#area{height: 100% !important;}
.mess-area{position: relative;overflow: visible;border-radius: 10px;height: calc(100vh - 283px);display: flex;flex-direction: column;box-sizing: border-box;}

#MessagesScroll {
   height: calc(100vh - 290px);
   overflow: hidden;
}
#MessagesScroll.mmain{
   height: calc(100% - 10px);
   overflow: hidden;
}
#Items {

   padding: 10px 0px!important;
}
.mess-area .us{
   z-index: 2000;
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 15px;
   min-height: 70px;
}
#Messages{
   display: flex;
   flex-grow: 1;
   flex-direction: column;
   min-height: 0px;
}
#Messages .ch{
   /* display: flex;
   flex-direction: column;*/
   flex-grow: 1;
   margin: 0px;
   overflow-y: scroll;
   margin-bottom: 15px;
}
.mCSB_inside > .mCSB_container {
   margin-right: 10px !important;
}
#Messages .txt{
   position: relative;
   width: 100%;
   opacity: 1;
   transition: opacity 300ms ease 0s;
}
#Messages #WrArea{
   flex-shrink: 0;
   width: 100%;
   box-sizing: border-box;
   padding: 10px 0px 0 0;
   position: relative !important;
   z-index: 3;
}


#container_text{

   width: calc(100% - 110px);
   margin: 0px 40px 0px 60px;
   display: flex;
   box-sizing: border-box;
   padding: 10px;
   min-height: 18px;
   border-radius: 5px;
   flex-grow: 1;
   position: relative;
   cursor: text;
}
.emojionearea {

   padding: 8px;
   flex-grow: 1;
}    
.emojionearea-editor {
   box-sizing: border-box!important;
   outline: none!important;
   border: none!important;
   padding: 0px 0px 0px 0px!important;
   width: 100%!important;
   height: 100%!important;
   background-color: transparent!important;
   font-size: 15px!important;
   font-family: Arial, sans-serif!important;
   min-height: 18px!important;
   max-height: 200px !important;

}


#block_mess{
   padding: 5px 15px;
}
#WrArea form{

   position: absolute;
   bottom: 10px;
   width: 100%;
   left: 0;

}


#first-addblock:hover .wrapbg{
   opacity: 1;
   visibility: visible;

}
#first-addblock:hover .wrapbg{
   z-index: 1000;
}
#PageTopMenu.mobile li {
   min-width: 0;
   padding: 12px 10px 7px 7px;
}
#PageTopMenu.mobile .alertpic {
   top: 10px;
   left: 15%;
   /* padding: 15px 10px 10px 10px; */
}
a.primaryimage{width: auto !important;font-size: 12px;height: 43px !important;line-height: 23px !important;margin: 0;vertical-align: top;}
#maintext h1{
   font-weight: 500 !important;
   font-size: 2rem !important;
}


#maintext h2, #maintext h1{
   padding: 0 0 15px 0;
}
.mess-area .us{z-index: 1!important;}
#Services {

   z-index: 0!important;
}
#Users-top {
   z-index: 15!important;
}
#User .over.bottom{
   position: absolute;
   bottom: 0;
   top: auto;
   right: 0px;
   left: 0px;
}
#User .over {
   position: absolute;
   visibility: visible;
   opacity: 1;
   top: 5px;
   right: 0px;
   left: 0px;

   width: 100%;
   transition: all 0.3s;
   text-align: center;
}
#User a.delimage.min, #User a.primaryimage.min, #User a.rotareimage.min {
   width: auto;
   height: 43px !important;
   line-height: 22px !important;
   padding: 10px 10px;
   background: rgb(255 255 255 / 80%);
   margin: 0px 0 0 0px;
}
#User a.rotareimage.min {
   display: inline-block;
   position: absolute;
   /* text-align: center; */
   bottom: 25px;
   /* left: 0; */
   /* right: auto; */
   margin: 0;
   margin-left: auto;
   margin-right: auto;
   left: 0;
   right: 0;
   width: 43px !important;
}
#ImgBlock .images{
   margin-top: 40px;
}
#ImgBlock{
   text-align: right;
   float: right;
   width: 45%;
   top: 0;
}
@media (max-width: 400px) {

   .links .button{white-space: pre-wrap;font-size: 13px;padding: 1px 3px;}

}
.real{color: #019a01 !important;padding: 0px 5px 0 0;}
@media (max-width: 600px) {
   #ImgBlock .images{
      margin-top: 40px;
   }
}
@media (max-width: 550px) {

   #ImgBlock{width: 37%;}
   #ImgBlock .images{margin-top: 30px;}
}
@media (max-width: 990px) {
   #nav-shadow a, #nav-shadow a:visited, #nav-shadow a, #nav-shadow a:hover {
      margin: 0px auto !important;
      padding: 0 !important;
      height: auto !important;
   }
}
@media (max-width: 600px) {

   #maintext h1{
      font-weight: 500 !important;
      font-size: 25px !important;
   }
   #maintext h2, #maintext h1{
      padding: 10px 0 15px 0;
   }
}

@media (min-width: 630px) {

   .links .button{white-space: nowrap !important;padding: 1px 3px;}
}
#Pages h1{
   font-weight: 500!important;
   padding: 0;
}
#Pages h2, #Pages h3, #Pages h4 {
   font-weight: 500!important;
   padding: 0;
   margin: 0;
}
#Content table, #Content tbody, #Content td {
   border: none!important;
   margin: 0px auto;
}
#Content td {
   padding: 0px 10px !important;
}
.confirm{cursor: default !important;color: #212529;background-color: #ffc107;border-color: #ffc107;}
.confirm:hover, .confirm:active{color: #212529;background-color: #ffc107 !important;border-color: #ffc107 !important;}

#Content td, #Content p, #Content em, #Content b, #Content i{font-size: 15px;font-weight: 400;line-height: 1.5;padding: 0;}
.links .button{
   white-space: pre-wrap;
}

#nav-shadow {
   /* display: flex !important; */
   text-align: center;
   /* display: block; */
}
#PageTopMenu.no-mobile #nav-shadow li{/* min-width: 67px; */padding: 0 4px;margin: 0;/* float: left; */display: flex;flex-direction: column;/* fle;flex: 1 1  10% !important;;lign: center !important;/* float: none; */flex-wrap: nowrap;flex: auto;width: auto;text-align: center;/* justify-content: center; */align-items: center;}
#nav-shadow a, #nav-shadow a:visited, #nav-shadow a, #nav-shadow a:hover {
   /* position: relative; */
   left: auto;
   top: 0;
   text-align: center;
   font-size: 13px;
   margin: 0;
   padding: 12px 0px 12px;
   /* min-width: 10px; */
   height: 45px;
   display: block;
}
#nav-shadow li {
   margin: 0;
   /* padding: 12px 23px 3px 16px; */
   /* min-width: 30px; */
}
.imgmain img.img_1{padding: 0 80px 0 0;float: left;max-height: 295px;width: auto !important;}
.imgmain img.img_2{float: right;padding: 0 0 0 80px;max-height: 295px;width: auto !important;}
#Msgs  #block_mess {
    padding: 5px 5px;
}
#Msgs .mess-area {
    position: relative;
    overflow: visible;
    border-radius: 10px;
    height: calc(100vh - 290px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
#Msgs  .container-min {
    padding: 0px 0 0 0!important;
}
#Msgs  .box_mess img, #Msgs  .box_mess.my img {
   max-width: 80%;
}
#Msgs  .box_mess, #Msgs  .box_mess.my{
   max-width: 50%;
}
#Msgs #Messages .text_mess{

    padding: 0px 10px 0px 0px;
}

@media (max-width: 800px) {
      .imgmain{
      text-align: center;
   }
.imgmain img.img_1, .imgmain img.img_2{padding: 0 0px 0 0; float: none}
   #Msgs  .box_mess, #Msgs  .box_mess.my{
      width: 85%;
      max-width: 85%;
   }
   #Msgs  .box_mess img{
   max-width: 100%;
   width: 100%;
   }
   
}
@media (max-width: 1200px) {
.max-s-w input{
max-width: 135px;
}
}

@media (max-width: 600px) {
.imgmain img.img_1, .imgmain img.img_2{padding: 0 0 0 0;float: none;margin: 0 auto !important;/* width: 90% !important; *//* height: auto !important; */}
}
@media (max-width: 450px) {
.imgmain img.img_1, .imgmain img.img_2{ width: auto !important; max-height: 200px;  height: auto !important; }

.max-s-w input{
max-width: 87px;
}
}

#WrArea button.loading{
content: '';
background: url(../images/qw/loading.gif) no-repeat center center;
background-size: 25px;
}
#WrArea button.loading svg{
opacity: 0;
visibility: hidden;
}