/*-------------------------------*/
/*-----------Новый Чат---------------*/
/*-------------------------------*/

#ourchat input:focus, #ourchat textarea:focus{outline:none;}
#ourchat a img {border:none; outline:none;}
#ourchat textarea#chat_msg_area {outline:none;  }
#ourchat #chat_msg_area::-webkit-input-placeholder { font-family: 'Roboto', sans-serif; font-size: 16px; font-weight:300; line-height:140%;}

.ourchat {display:none; position:fixed; top:0; left:0; bottom:0; right:0; z-index:1000000000000000000000000000000000000000000000000;}
#ourchatfon {position:absolute;top:0;left:0;bottom:0;right:0;background: rgb(2 9 19 / 65%);}

#ourchatwrapper {position:relative;background: white;/* background: linear-gradient(-45deg, rgba(0, 149, 139, 1), rgba(0, 204, 255, 1)); */margin: 4vh auto;padding:0;max-width: 820px;width: 90%;box-shadow:0 0 15px rgba(0,0,0,0.35);border-radius: 10px;overflow: hidden;}

#ourchatwrappertop {position:relative;background: #2e4dfb;color:rgba(0,0,0,0.75);padding: 26px 16px 18px 24px;font-size: 22px;line-height:100%;font-weight:400;color: #fff;}
#ourchatwrappertop span {display:block;font-size:12px;line-height: 14px;color: rgb(255 255 255 / 55%);font-weight:500;margin-top: 4px;padding-right: 40px;}
.chatmenu {position:absolute;right: 8px;top: 22px;padding:9px 18px;cursor:pointer;font-size:25px;transition: all .3s ease-in-out;}
.chatmenu:hover {transform: scale(1.1);}

#ourchatwrappermiddle {min-height:350px; max-height:450px; overflow:auto; padding: 16px 8px;}
#ourchatwrappermiddle h3 {width: 84px;color: #ababab;margin: 16px auto 4px;border-radius: 4px;font-size: 14px;text-align:center;padding: 4px;font-weight:400;}
.mymeschat, .youmeschat {margin:5px 10px 5px 50px;text-align:right;max-width: calc(100% - 55px);}
.youmeschat {margin:5px 50px 5px 10px; text-align:left;  }
.meschatin {display:inline-block;border-radius: 8px 2px 8px 8px;padding: 10px 16px;position:relative;font-size: 16px;max-width: 460px;padding-bottom: 20px;}
.youmeschat .meschatin {background: #9dfbee;color: #000000;padding-right: 20px;padding-bottom: 20px;font-size: 15px;line-height:20px;border-radius: 2px 8px 8px 8px;}
.mymeschat .meschatin {background: #f5f6fa;}
.youmeschat .meschatin span.chattimesend, .mymeschat .meschatin span.chattimesend {position:absolute;right: 18px;bottom: 9px;color:rgba(0,0,0,0.25);font-size:10px;font-weight:600;line-height:100%;}
.mymeschat .meschatin span {}
.meschattext {text-align:left;}
.meschattext p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}
.repchattext {text-align:left; border-left:2px solid rgba(70,180,130,1); padding: 0 0 0 5px; font-size:80%; margin-left:-15px;}

#ourchatwrapperbot {position:relative; background:rgba(255,255,255,0.9); padding:1px;}
#ourchatwrapperbot textarea {background: rgb(245 246 250) !important;border:none !important;min-height: 52px !important;height: 52px;display:block !important;min-width:100%;max-width:100%;font-family: 'Roboto', sans-serif;font-weight: 400;line-height: 140%;padding: 16px 114px 12px 24px !important;font-size: 16px !important;box-sizing:border-box;}
#ourchatwrapperbot .chataddfile {position:absolute;right: 16px;bottom:5px;width:50px;height:38px;transition: all 0.2s ease;cursor:pointer;font-size:20px;color: #2e4dfb;border-radius:3px; background-image: url(/lnd/images/plane.svg);  background-position: center;  background-repeat: no-repeat;  background-size: contain; opacity:0.8; color:transparent; font-size:0;}
#ourchatwrapperbot .chataddfile:hover {-webkit-transition: All 0.2s ease;  opacity:1; background-color:rgba(0,0,0,0.06);}
#ourchatwrapperbot .chataddfile i {position:absolute; top:50%; margin-top:-10px; right:15px;}

#ourchatwrapperbot .filelabel {position:absolute;right: 84px;bottom:9px;background:rgba(0,0,0,0);-webkit-transition: All 0.2s ease;cursor:pointer;padding:0 0px;}
#ourchatwrapperbot .filelabel input {display:none;}
#ourchatwrapperbot .filelabel i {cursor:pointer; font-size:22px; color:rgba(0,0,0,0.3); transform: scale(1, -1);}
#ourchatwrapperbot .filelabel:hover i{color:rgba(0,0,0,0.6);}

@media screen and (max-width: 600px) {
#ourchatwrapper {margin:0 auto;position:absolute;top: 8px;left: 8px;bottom: 2px;width: auto;right: 8px;}
#ourchatwrappertop {box-sizing: border-box;font-size: 18px;padding: 20px 12px 14px 18px;}
#ourchatwrappermiddle {height: calc(100vh - 144px);min-height: auto;max-height:none;}
#ourchatwrapperbot {position:absolute; right:0; left:0; bottom:0;}

#ourchatwrapperbot .chataddfile {height:35px;}

.mymeschat,.youmeschat {margin: 8px 6px 8px 46px;}
.youmeschat {margin:5px 45px 5px 5px;}
}

#ourchatwrapper .userOutput {
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  margin: 0;
  padding: 0;
}

#ourchatwrapperbot textarea::placeholder {
  font-size: 16px !important;
  line-height: 140%;
}

.youmeschat .meschatin span.chattimesend {
  right: auto;
  right: 20px;
  bottom: 8px;
  color: rgb(0 0 0 / 60%);
  font-size: 10px;
  font-weight: 400;
}

@media screen and (max-width: 400px) {
  .youmeschat .meschatin,
  #ourchatwrapper .userOutput {
    font-size: 15px;
    line-height: 20px;
  }
}

#ourchatwrappermiddle::-webkit-scrollbar {
  width: 10px;
  background-color: #f9f9fd;
}

#ourchatwrappermiddle::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #b7b7b7;
}

#ourchatwrappermiddle::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
  border-radius: 10px;
  background-color: #f9f9fd;
}