@font-face {
    font-family: 'icon';
    src: url('/operator/fonts/iconfont.eot?v=4.7.0');
    src: url('/operator/fonts/iconfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('/operator/fonts/iconfont.woff2?v=4.7.0') format('woff2'), url('/operator/fonts/iconfont.woff?v=4.7.0') format('woff'), url('/operator/fonts/iconfont.ttf?v=4.7.0') format('truetype'), url('/operator/fonts/iconfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.op-widget, .op-widget * { box-sizing: border-box; }

.op-widget { position: fixed; right: -1000px; top: 50%; transform: translateY(-50%); display: flex; transition: 0.1s; z-index: 10000; }
.op-widget.open { right: 0; }
.op-widget-header { cursor: pointer; }
.op-widget-header:before { content: ""; height: 158px; width: 26px; display: block;  background: linear-gradient(90deg, #d8504e, #c83e3c); border-left: 1px solid #c83e3c; border-radius: 4px 0 0 4px; }
.op-widget-header.online:before { background: linear-gradient(90deg, #207920, #0a640a); border-left-color: #0a640a; }

.op-widget-header:after { content: "Онлайн Консультант"; text-shadow: 0 -1px 0 rgba(0,0,0,0.6); position: absolute; font-family: PTSans, TrebuchetMS; transform: rotate(-90deg); left: -66px; top: 71px; width: 158px; text-align: center; font-size: 13px; letter-spacing: 0.5px; /*font-weight: 300;*/ color: #fff; }
.op-widget-header.open:after { content: "Закрыть"; }

.op-widget-body { display: flex; width: 235px; background: #DDD; padding: 10px; font-size: 16px; text-align: center; }
.op-widget-body.mail {  cursor: pointer; }
.op-widget-body-placer { margin: auto 0; text-align: center; width: 100%; }


.operator-chat { z-index: 10000; box-sizing: border-box; display: flex; min-height: 452px; position: fixed; top: 50%; right: -500px; transform: translateY(-50%); transition: 0.1s; font-family: tahoma, arial; font-size: 11px;  }
.operator-chat * { box-sizing: border-box; }
.operator-chat .operator-chat-label { width: 26px; }
.operator-chat .op-label-btn { position: relative; top: 50%; transform: translateY(-50%); height: 258px; width: 26px; display: block;  background: linear-gradient(90deg, #207920, #0a640a); border-left: 1px solid #0a640a; border-radius: 4px 0 0 4px; cursor: pointer; }
.operator-chat .op-label-text { text-shadow: 0 -1px 0 rgba(0,0,0,0.6); position: absolute; font-family: PTSans, TrebuchetMS; transform: rotate(-90deg); left: -118px; top: 121px; width: 258px; text-align: center; font-size: 13px; letter-spacing: 0.5px; /*font-weight: 300;*/ color: #fff; }
.operator-chat.opened .op-label-text { left: -116px; }
.operator-chat.opened .operator-chat-from { box-shadow: 2px 0 5px rgba(0,0,0,0.6); }

.operator-chat-from { border-left: 5px solid #0a640a; width: 290px; background: #052546; padding: 15px 15px 20px;  }
.operator-chat-from a img { border: none;  }
.operator-chat-from .op-header > div { display: flex; margin-bottom: 9px; font-size: 14px; color: #fff; height: 50px; }
.operator-chat-from .op-header img { width: 50px; height: 50px; object-fit: cover; }
.operator-chat-from .op-header-text { font-size: 11px; padding-bottom: 14px; color: #82a4e2; margin-right: -5px; }
.operator-chat-from .op-img { flex-shrink: 0; margin-right: 14px; width: 50px; border: 3px solid #82a4e2; overflow: hidden; }
.operator-chat-from .op-name { display: flex; }
.operator-chat-from .op-name > span { margin: auto 0; }
.operator-chat-from .logo { text-align: right; }
.operator-chat-from #chat_list { height: 200px; /*border: 1px solid #82a4e2;*/ margin-bottom: 10px; overflow: auto; font-size: 12px; padding: 6px 10px 6px 10px; background: #c7d9fa; position: relative; border-radius: 2px; }
.operator-chat-from .unread { border-top: 1px solid #999; font-size: 11px; line-height: 15px; margin: 10px 0 10px; color: #999; text-align: right; }
.operator-chat-from div.nm { font-size: 11px; padding: 6px 0 4px 0; color: #82a4e2; }
.operator-chat-from .edit { border: none; width: 100%; padding: 4px 4px 4px 4px; font-family: tahoma, arial; font-size: 13px; background: #c7d9fa; box-shadow: inset 1px 1px 3px rgba(0,0,0,0.5); border-radius: 2px; }
.operator-chat-from textarea.edit { height: 70px; resize: none; }
.operator-chat-from div.sm { position: relative; height: 50px; }
.operator-chat-from .op-close-session { display: inline-block; vertical-align: top; margin: 10px 0 0 10px; width: 60px; color: #fff; cursor: pointer; }
.operator-chat-from .op-close-session:hover { text-shadow: 0 0 5px rgba(255,255,255,0.4);  }
.operator-chat-from .op-sound-control { float: right; display: inline-block; vertical-align: top; margin: 15px 0 0 0; }
.operator-chat-from .op-sound-control input { display: none; }
.operator-chat-from .op-sound-control span { display: none; width: 17px; height: 17px; font-family: 'icon'; font-size: 18px; color: #82a4e2; text-align: center; }
.operator-chat-from .op-sound-control span:hover { text-shadow: 0 0 5px rgba(255,255,255,0.4);  }
.operator-chat-from .op-sound-control input ~ .off { display: inline-block; }
.operator-chat-from .op-sound-control input:checked ~ .on { display: inline-block; }
.operator-chat-from .op-sound-control input:checked ~ .off { display: none; }
.operator-chat-from #sendbtn1 { width: 150px; display: inline-block; padding: 6px 10px 7px; font-size: 12px; border-radius: 3px 3px 4px 4px; border-bottom: 2px solid #010d19; text-align: center; margin: 10px 0; background: #82a4e2; cursor: pointer; }
.operator-chat-from #sendbtn1.busy { opacity: 0.5; }
.operator-chat-from #sendbtn1:hover { background: #a1bae2; }
.operator-chat-from #preloader { position: absolute; right: 0; top: 10px; display: none; }
.operator-chat-from div.ps { position: absolute; left: 180px; top: 15px; padding-top: 4px; color: #fff; }

.operator-chat-from .ps input { margin:0; vertical-align: bottom; }
.operator-chat-from #chat_list, .edit { border-color: #fff; background-color: #dfeaff; }

.operator-chat-from .admin { padding-bottom: 6px; }
.operator-chat-from .admin span { padding-right: 7px; color: #37b434; display: block; font-weight: bold; }
.operator-chat-from .user { padding-bottom: 6px; }
.operator-chat-from .user span { padding-right: 7px; color: #579bdf; display: block; font-weight: bold; }

.operator-chat-from #place_sound { position: absolute; left: -100px; top: -100px; }
.operator-chat-from #copyright { position: absolute; bottom: 10px; right: 10px; color: #82a4e2; left: 10px; text-align: right; opacity: 0.6; letter-spacing: 0.5px; }
.operator-chat-from #copyright a { color: #82a4e2;  text-decoration: none; }
.operator-chat-from #copyright a:hover {  text-decoration: underline; }


.op-widget-popup { z-index: 10000; }


.op-messengers { margin-top: 10px}
.op-messengers > div { margin-top: 10px}
.op-messengers a { display: inline-block; width: 24px; height: 24px; background-repeat: no-repeat; background-position: 50% 0; margin-right: 10px; }
.op-messengers a:hover { opacity: 0.8 }
.op-messengers .whatsapp { background-image: url(/templates/pictures/Contacts_WhatsApp_dark.svg ); }
.op-messengers .viber { background-image: url(/templates/pictures/Contacts_Viber_dark.svg ); }
.op-messengers .telegram { background-image: url(/templates/pictures/Contacts_Telegram_dark.svg ); }
.op-messengers .skype { background-image: url(/templates/pictures/Contacts_Skype_dark.svg ); }
.op-messengers .max { background-image: url(/templates/pictures/Contacts_MAX_dark.svg ); }