html{font-size: 16px;}
body {
    background-color: #fff;
    font-family: "Open Sans", sans-serif;
    color: #000;
    overflow-x: hidden;
}
body.main-page, body.cat-item-page, .lk_other{background-color: #f3f3f6;}
header *{color: #fff;}


body *{letter-spacing: -.02em !important;}

h1, h2, h3, h4, h5, h6{font-weight: 700;}
.btn{border-radius: 0!important; }
.btn:focus{outline:none;}

a{cursor: pointer;}

/* Errors  */
.xdebug-error{width: 5rem;} 
.xdebug-error *{font-size: 2rem;} 
/*.xdebug-error{display: none;} */
.error_site{font-size:2rem; color:#444;background-color:rgb(245, 121, 0);margin-bottom:2rem;}
/*.error_site{display: none;}*/
/* Errors  */

/*FORM*/
.modal-content{z-index: 1050;}
.modal .form-control{line-height: 2.5em; height: 2.8em;}
.modal textarea.form-control{line-height: 1.3; height: 6em;}
form span {  width: 100%; min-height: 1em; line-height: 1.3; margin: 0 0 5px; color: #da3547; display: block; font-size: 14px; }
form input.error { box-shadow: inset 0 0 10px 1px rgba(218, 53, 71, 0.5);}
.form-group{margin-bottom: 0;}

#modal_block .container-fluid{padding: 0;}
form h3{ font-size: 1.6rem;font-family: Geometria; font-weight: 400; margin-bottom: 2em;}
.form-control, .custom-select{ padding: 0 .5em; border-radius: 0;}
.form-control, form .btn-primary, .custom-select{font-size: 16px; width: 100%; height: 3.2em; line-height: 3.2em;}
label{font-size: 16px;}
a.addon{font-size: 16px; color: #3f2aff; display: block;text-align: left;}
.custom-select{margin-bottom: 2rem;}
form .btn-primary{background-color: #000; border:0;}
form .btn-primary:hover{background-color: #3f2aff;}
form *:placeholder{color: #bfbfbf;}
.modal-title{font-size: 20px;}
.modal-header .close{font-size: 30px; }

/*FORM*/

/* perfect-scrollbar v1.5.0 */
.ps{overflow:hidden !important;overflow-anchor:none;-ms-overflow-style:none;touch-action:auto;-ms-touch-action:auto}.ps__rail-x{display:none;opacity:0;transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear;height:15px;bottom:0px;position:absolute}.ps__rail-y{display:none;opacity:0;transition:background-color .2s linear,opacity .2s linear;-webkit-transition:background-color .2s linear,opacity .2s linear;width:15px;right:0;position:absolute}.ps--active-x > .ps__rail-x,.ps--active-y > .ps__rail-y{display:block;background-color:transparent}.ps:hover > .ps__rail-x,.ps:hover > .ps__rail-y,.ps--focus > .ps__rail-x,.ps--focus > .ps__rail-y,.ps--scrolling-x > .ps__rail-x,.ps--scrolling-y > .ps__rail-y{opacity:0.6}.ps .ps__rail-x:hover,.ps .ps__rail-y:hover,.ps .ps__rail-x:focus,.ps .ps__rail-y:focus,.ps .ps__rail-x.ps--clicking,.ps .ps__rail-y.ps--clicking{background-color:#eee;opacity:0.9}.ps__thumb-x{background-color:#aaa;border-radius:6px;transition:background-color .2s linear,height .2s ease-in-out;-webkit-transition:background-color .2s linear,height .2s ease-in-out;height:6px;bottom:2px;position:absolute}.ps__thumb-y{background-color:#3f2bff;border-radius:6px;transition:background-color .2s linear,width .2s ease-in-out;-webkit-transition:background-color .2s linear,width .2s ease-in-out;width:6px;right:2px;position:absolute}.ps__rail-x:hover > .ps__thumb-x,.ps__rail-x:focus > .ps__thumb-x,.ps__rail-x.ps--clicking .ps__thumb-x{background-color:#999;height:11px}.ps__rail-y:hover > .ps__thumb-y,.ps__rail-y:focus > .ps__thumb-y,.ps__rail-y.ps--clicking .ps__thumb-y{background-color:#999;width:11px}@supports (-ms-overflow-style:none){.ps{overflow:auto !important}}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.ps{overflow:auto !important}}



.btn:focus, .btn:active { /*box-shadow: 0 0 0 0.2rem inset #fde0d6;*/ box-shadow: unset; outline: none;}
#chat_names, #chat{padding-right: 0; padding-left: 0;}
#chat{border-left:1px solid #e6e6e6; height: 100vh;}

#chat_names .btn{width: 100%; color: #222d38; border:0; position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#chat_names>.btn{background-color: #dc3545; color: #fff; }
#chat_names .chat_type>.btn{background-color: #fff5f1; color: #222d38; font-size: 14px; white-space: break-spaces;}
#chat_names .chat_code>.btn{background-color: #fff; text-align: left; padding-left: 10px; padding-right: 60px; font-size: 14px;}
#chat_names .chat_code.task_code>.btn{color: #dc3545;}
#chat_names .btn.no_read:before{content:""; position: absolute;right: 5px; top: 5px; width: 8px; height: 8px; background-color: #ec531d; border-radius: 50%;}
#chat_names hr{width: 100%; height: 1px; background-color: #e6e6e6; border:0; margin: 0;}
#chat_names .btn span{position: absolute; right: 5px; font-size: 10px; opacity: .6;  bottom: .4rem;}
#chat_names{height: 100%; }
#chat_names .btn.open_chat.active{ color: #3f2bff;}
.chat_type{height: calc(100vh - 110px); overflow-y: scroll;}
/*#chat_names .chat_code{max-height: 180px;}*/
.chat_list_scroll{position: relative;height: 100%; width: 100%; padding-right: 20px;}



#chat_box, #chat_box *{box-sizing: border-box;}
#chat_box{width: 100%; position: relative; display: flex; flex-direction: column; background-color: #fff; height: 100%; overflow: hidden; }
#chat_header{width: 100%; height: auto; min-height: 50px; background-color: #ffeee8; padding: 10px 30px;}
#chat_header h3, #chat_header h4{font-size: 22px; color: #4b4b4b; line-height: 50px;  text-align: left; line-height: 1.3;}
#chat_header h4{font-size: 18px; }
#chat_header h4 span{font-size: inherit; font-weight: 400;}
#chat_list_box{position: relative; padding: 30px 30px 60px 30px;min-height: 150px; flex:2; border-bottom: 1px solid silver; overflow-y: scroll;}
#chat_list_scroll{position: relative;height: 100%; width: 100%; padding-right: 30px;}
#chat_list{width: 100%; /*height: 100%;*/}


#btn_off_on{font-size: 14px; display: flex; align-items: center; justify-content: center; padding: 5px;}
#btn_off_on i{cursor: pointer; display: inline-block; margin-left: 5px; width: 46px; height: 22px; background-size: 100%; background-repeat: no-repeat; background-position: center;}
#btn_off_on.off i{background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 13.06'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23989796;%7D.cls-2%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Ei_off%3C/title%3E%3Crect class='cls-1' width='30' height='13.06' rx='6.53'/%3E%3Ccircle class='cls-2' cx='6.59' cy='6.53' r='5'/%3E%3C/svg%3E");}
#btn_off_on.on i{background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.0.5, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 30 18' style='enable-background:new 0 0 30 18;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%2300AD5D;%7D .st1%7Bfill:%23FFFFFF;%7D%0A%3C/style%3E%3Cg%3E%3Cpath class='st0' d='M6.5,2.5h16.9C27.1,2.5,30,5.4,30,9v0c0,3.6-2.9,6.5-6.5,6.5H6.5C2.9,15.5,0,12.6,0,9v0C0,5.4,2.9,2.5,6.5,2.5 z'/%3E%3Ccircle class='st1' cx='23.4' cy='9' r='5'/%3E%3C/g%3E%3C/svg%3E%0A");}


#chat_form{width: 100%; position: relative; height: 100px;}
#chat_mess{width: 100%; height: 100%; max-height: 100%; font-size: 16px; line-height: 1.2; padding: 10px 50px 10px 10px; border:0;  resize: none; }
input, textarea, select{font-size: 16px;}
#chat_btn_send{position: absolute; z-index: 10; width: 34px; height: 34px; bottom: 54px; right: 13px; background-repeat: no-repeat; background-size: contain; cursor: pointer;
	border:0; background-color: transparent;
	background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2234%22%20height%3D%2234%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Ccircle%20fill%3D%22%233f2bff%22%20cx%3D%2217%22%20cy%3D%2217%22%20r%3D%2217%22%2F%3E%3Cg%20transform%3D%22translate(10%209)%22%20fill%3D%22%23FFF%22%3E%3Crect%20x%3D%226%22%20y%3D%222%22%20width%3D%222%22%20height%3D%2214%22%20rx%3D%221%22%2F%3E%3Crect%20transform%3D%22rotate(-45%209.879%204.879)%22%20x%3D%228.879%22%20y%3D%22-.121%22%20width%3D%222%22%20height%3D%2210%22%20rx%3D%221%22%2F%3E%3Crect%20transform%3D%22scale(-1%201)%20rotate(-45%200%2015.243)%22%20x%3D%223.293%22%20y%3D%22-.121%22%20width%3D%222%22%20height%3D%2210%22%20rx%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E%0A');}
#chat_btn_send:focus{box-shadow: none;}

#record_btn{ position: absolute;
    z-index: 10;
    width: 134px;
    height: 34px;
    bottom: 110px;
    right: 10px;
    line-height: 32px;
    text-align: center;
    background-repeat: no-repeat;
    background-size: 20px;
    cursor: pointer;
    border: 1px solid silver;
    background-color: transparent;
    border-radius: 5px;
    background-position: 10px center;
    background-color: #ffffff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='3f2bff' d='M11.999 14.942c2.001 0 3.531-1.53 3.531-3.531V4.35c0-2.001-1.53-3.531-3.531-3.531S8.469 2.35 8.469 4.35v7.061c0 2.001 1.53 3.531 3.53 3.531zm6.238-3.53c0 3.531-2.942 6.002-6.237 6.002s-6.237-2.471-6.237-6.002H3.761c0 4.001 3.178 7.297 7.061 7.885v3.884h2.354v-3.884c3.884-.588 7.061-3.884 7.061-7.885h-2z'%3E%3C/path%3E%3C/svg%3E");
}
/*#record_btn.active{background-image: }*/

@keyframes showmessage_3g{0%{opacity:0}to{opacity:1}}

#chat_list .chat_mess:last-child {
    opacity: 0;
    -webkit-animation: showmessage_3g .2s forwards;
    animation: showmessage_3g .2s forwards;
}
.chat_mess{display: flex; position: relative; width: 100%; padding: 20px 0 0 0; margin: 0;}
.chat_mess_content{max-width: 100%; border-radius: 12px!important;clear: both;display: inline-block;min-width: 40px; vertical-align: middle; padding: 10px;
	text-indent: 0; line-height: 1.3; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text;  user-select: text; overflow: hidden; word-wrap: break-word;
	text-align: left; font-size: 15px!important; color: #222d38!important;}
.chat_mess p{padding: 0; margin: 0;}
.chat_mess.adm1{justify-content: flex-end;}
.chat_mess.adm1 .chat_mess_content{  background-color: #ffeee8;}
.chat_mess.adm1 .chat_mess_content.audio{background-color: transparent;}
.chat_mess.adm0{justify-content: flex-start;}
.chat_mess.adm0 .chat_mess_content{ background-color: #f1f0f0;  } 
    
.chat_mess:after, .chat_mess:before {
    content: ""!important;
    display: table;
}
.chat_mess a{font-size: inherit; color: #3f2bff;}
.adm_name{top: 3px; font-size: 11px; position: absolute;}
#chat_alert{position: absolute; right: 15px; top: 15px;}
#chat_names_open{display: none;}
.del_mess{position: relative; width: 30px; cursor: pointer; font-size: 30px; text-align: center; display: flex;
    align-items: center; justify-content: center; line-height: 30px; margin-right: 10px; opacity: 0;}
.chat_mess:hover .del_mess{color: #ec531d; opacity: 1;}

#alert_set{margin-left: 30px; cursor: pointer;}
#del_btn{    position: absolute; right: 30px; cursor: pointer;}
.public_edit{cursor: pointer;}
#chat_public_list .public_edit{font-size: 18px; text-align: center; display: block;margin: 10px auto; width: 140px;}

#task_text{background: #fff;
    padding: 0 10px;
    font-size: 14px;
    line-height: 1.15;
    height: 120px;
    overflow-y: overlay;
    overflow-x: hidden;
}



@media only screen and (max-width: 768px) {
    #chat_names_open{ font-size: 40px;font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .5; position: absolute; right: 15px;  top: 0;
        display: block; cursor: pointer;}
    #chat_names{position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 50; background-color: #fff;}
    #chat_names.go{z-index: -1;}
    .del_mess{opacity: 1;}
    #del_btn{ right: 100px;}
    #chat_box{position: fixed;}

}

@media only screen and (max-width: 1000px) {
    #chat_header h3, #chat_header h4{font-size: 13px;}
}