:root {
    --bg-color1: #202c33;
    --bg-color2: #111b21;
    --bg-color-chat-no-local: #0a201e;
    --bg-color-chat-no-local-hover: #0c4944;
    --bg-color-chat: #031110;
    --bg-color-chat-local: #0b141a;
    --chat-background-blend-mode: overlay;

    --bg-color-over: #2a3942;

    --bg-color-bubble-me: #005c4b;
    --bg-color-selected: #005c4b66;

    --text-color: #d1d7db;
    --subtext-color: #8696a0;
    --icon-color: #aaaaaa;

}

/* ------ GENERAl LAYOUT ------ */
html {
    height: 100%;
}

.wrap * {
    font-family: 'Roboto', sans-serif;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    background: var(--bg-color2);
    min-height: -webkit-fill-available;
}

body.noCaptchaRequired #reCaptchaDivContainer {
    display: none !important;
}

body.user-idle #DivLeft>.profile>i {
    filter: grayscale(1);
}

body.initing>.wrap {
    display: none !important;
}

div#ModalAlert {
    z-index: 998;
}

div#divMessage {
    z-index: 999999;
    background: #ffffff21;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    backdrop-filter: blur(2px);
}

div#divMessage>div {
    margin: auto;
    font-size: 30px;
    text-align: center;
    color: #000;
    padding: 10px 20px;
    background: #fffffff0;
    border-radius: 10px;
    box-shadow: 1px 1px 10px #9f9f9f;
    min-width: 200px;
    min-height: 100px;
    vertical-align: middle;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}

div#divMessage>div>a {
    text-decoration: none !important;
    color: #2196f3
}

body.showMessage>div#divMessage {
    display: flex;
}

body.needLogin {
    overflow: hidden;
}

body.needLogin>div.wrap {
    display: none;
}

div#loginModal {
    display: none;
}

body.needLogin>div#loginModal {
    width: 100%;
    height: 100vh;
    display: inline-block;
    display: flex;
    align-items: center;
    background: var(--bg-color2) !important;
}

#ModalSelectConn sel {
    font-size: 80%;
    cursor: pointer;
    color: blue;
    user-select: none;
}

/* ------ FONTS ------ */
.font-name {
    color: var(--text-color);
    font-size: 1em;
    font-weight: inherit;
    padding-bottom: 3px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0;
    padding-top: 5px;
    text-transform: capitalize;
    cursor: pointer;
}

#divContactList .font-name {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

#divContactList .font-name span {
    max-width: 80%;
}

#divContactList .font-name span .fa-star {
    color: #ffc107
}

#divContactList .font-name tags {
    margin-left: 5px !important;
    overflow: hidden;
}

#divContactList .font-name tags tag {
    font-weight: normal;
    font-size: 10px;
    background: #000000;
    padding: 3px 5px !important;
    border-radius: 4px;
    text-transform: none;
    line-height: 14px;
    text-overflow: ellipsis;
}

.font-preview {
    color: var(--subtext-color);
    font-size: 0.9em;
    font-weight: inherit;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0;
    max-height: 23px;
}

.font-preview.ocupacion {
    font-size: 0.7em;
    font-weight: normal;
    margin-bottom: 1px;
}

.font-online {
    color: var(--icon-color);
    font-size: 0.8em;
    font-weight: inherit;
    margin: 0;
}

.green-background {
    background: #009688;
    height: 130px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: -100;
}

.wrap {
    display: flex;
    height: 100vh;
    margin: auto;
    box-shadow: 0 2px 2px var(--icon-color);
    overflow: hidden;
}

/* ------ LEFT SIDE ------ */
.left {
    width: 20%;
    border-right: 1px solid #4a4a4a;
}

.profile {
    width: 100%;
    height: 60px;
    background: var(--bg-color1);
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #4a4a4a;
}

.profile #MeUserName {
    color: #e9edef;
    margin: auto;
    width: 100%;
    margin-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.icons {
    color: #aebac1;
    display: flex;
}

.profile.userConnected #UserOnline {
    display: block;
}

.profile #UserOnline {
    font-size: 25px;
    line-height: 38px;
    margin-left: 10px;
    color: #fff;
    background: #4caf50;
    opacity: 1;
    cursor: pointer;
    display: none;
}

.profile.userConnected #UserOffline {
    display: none;
}

.profile #UserOffline {
    line-height: 39px;
    margin-left: 10px;
    color: #fff;
    background: #ff5722;
    opacity: 1;
    cursor: pointer;
}

body.needUpdate #DivLeft>.wrap-update {
    display: flex;
}

body.needUpdate>.wrap>.left>.contact-list {
    height: calc(100% - 175px);
}

#DivLeft>.wrap-update {
    display: none;
    flex-direction: row;
    align-content: center;
    align-items: center;
    justify-content: flex-start;
    background: #ffeb3b;
    padding: 10px 20px;
    cursor: pointer;
    height: 65px;
}

#DivLeft>.wrap-update>i {
    font-size: 35px;
    margin-right: 15px;
}

#DivLeft>.wrap-update>div>p {
    font-size: 12px;
}

#DivLeft.buscando #divContactList,
#DivLeft.history #divContactList,
#DivLeft #divContactSearch,
#DivLeft.history #divContactSearch,
#DivLeft.history .wrap-search,
#DivLeft.history .wrap-filter,
#DivLeft.buscando #divContactHistory,
#DivLeft #divContactHistory {
    display: none;
}

#DivLeft.buscando #divContactSearch {
    display: flex;
}

#DivLeft.history #divContactHistory {
    display: flex;
    height: calc(100% - 60px);
}

#divContactHistory .hhead {
    color: #fbfbfb;
    margin: 0;
    padding: 10px 20px;
    font-size: 20px;
    border-bottom: 1px solid #4a4a4a;
}

#divContactHistory .hhead p {
    float: left;
}

#divContactHistory .hhead i {
    float: right;
    margin-top: 7px;
    cursor: pointer;
    opacity: 0.7;
}

#divContactHistory .hhead i:hover {
    opacity: 1;
}

#divContactHistory .hsearch {
    margin: 5px 10px;
    background: var(--bg-color1);
    padding: 5px 10px;
    border-radius: 5px;
    color: #939393;
}

#divContactHistory .hsearch input {
    border: 0;
    outline: 0;
    background: transparent;
    margin-left: 5px;
    width: 90%;
    color: #939393;
    font-size: 15px;
}

#divContactHistory #divHistoryResults {
    border-top: 1px solid #4a4a4a;
    display: flex;
    flex-direction: column-reverse;
}

#divContactHistory #divHistoryResults>div.chatR {
    border-bottom: 1px solid #4a4a4a;
    color: #e9edef;
    padding: 10px 20px;
    cursor: pointer;
}

#divContactHistory #divHistoryResults>div.chatR:hover {
    background-color: var(--bg-color1)
}

#divContactHistory #divHistoryResults>div.chatR>h1 {
    font-size: 17px;
    line-height: 25px;
    float: left;
}

#divContactHistory #divHistoryResults>div.chatR>time {
    float: right;
    padding-right: 10px;
    font-size: 12px;
    line-height: 25px;
}

#divContactHistory #divHistoryResults>div.chatR>h2 {
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    color: #8e9192;
    clear: both;
}

.wrap-filter {
    width: 100%;
    height: 50px;
    background: var(--bg-color2);
    display: flex;
    align-items: center;
    border-bottom: 1px solid #4a4a4a;
}

.wrap-filter>div {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    background: var(--bg-color1);
    margin: 2px;
    padding: 6px;
    border-radius: 5px;
    height: 35px;
    text-align: center;
    color: #fff;
    font-size: 13px;
    user-select: none;
}

.wrap-filter.filter_all>div#fTodos,
.wrap-filter.filter_local>div#fInternos,
.wrap-filter.filter_flota>div#fFlota,
.wrap-filter.filter_servers>div#fServers,
.wrap-filter>div.hasFilter {
    background-color: #607D8B;
}

.wrap-filter>div>i {
    display: none;
}
.wrap-filter>div.unreads>i {
    background-color: #00ff0a;
    color: #000;
    display: inline-block;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    line-height: 16px;
    font-size: 9px;
    font-style: normal;
    text-align: center;
    margin-left: 3px;
    margin-right: 0;
    overflow: hidden;
}

.wrap-filter>div>select {
    border: none;
    background: transparent;
    color: #c3c5cb;
    font-size: 15px;
    width: 100%;
    outline: none;
}

.wrap-filter>div>select>option {
    color: #000;
}

.wrap-search {
    width: 100%;
    height: 50px;
    background: var(--bg-color2);
    display: flex;
    align-items: center;
    border-bottom: 1px solid #4a4a4a;
}

.wrap-search>div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: var(--bg-color1);
    margin: 5px;
    padding: 10px;
    border-radius: 5px;
    height: 35px;
}

.wrap-search>div>input {
    width: 100%;
    background: transparent;
    border: 0;
    color: #c3c5cb;
    font-size: 15px;
    margin-left: 10px;
    outline: none;
}

.wrap-search>div>i {
    color: #939393;
}

.wrap-search>div>i.fa-times:hover {
    cursor: pointer;
    color: #fff;
}

.wrap-message i {
    color: var(--icon-color);
    text-align: center;
}

.wrap-message #sendBtn {
    width: 45px;
    max-width: 45px;
    min-width: 45px;
    height: 45px;
    line-height: 45px;
    cursor: pointer;
    background: #008b71;
    border-radius: 50%;
    margin: 10px;
    opacity: 0.7;
}

.wrap-message #recordAudio {
    margin: 10px;
    height: 45px;
    width: 45px;
    max-width: 45px;
    min-width: 45px;
    line-height: 45px;
    border-radius: 50%;
    margin-right: 0;
    background: #3f51b5;
    cursor: pointer;
    opacity: 0.7;
}

.wrap-message #recordAudio:hover,
.wrap-message #sendBtn:hover {
    opacity: 1;
}

.wrap-message #sendSTT {
    width: 50px;
    line-height: 64px;
    cursor: pointer;
    margin-right: 5px;
    opacity: 0.7;
}

.wrap-message #sendSTT:hover {
    opacity: 1;
}

.wrap-message #sendAttach {
    width: 50px;
    line-height: 64px;
    cursor: pointer;
}

.wrap-message #addTag {
    width: 50px;
    line-height: 64px;
    cursor: pointer;
}

.input-search {
    width: 100%;
    border: none;
}

.input-search:focus {
    outline: none;
}

.contact-list {
    background-color: var(--bg-color2);
    width: 100%;
    height: calc(100% - 160px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.contact-list .contact.contact-blocked .font-preview.ocupacion {
    padding-left: 5px;
    padding-right: 10px;
    background: #009688;
    border-radius: 3px;
    font-size: 11px;
    line-height: 18px;
    color: #000;
}

.contact,
.active-contact,
.new-message-contact {
    height: 70px;
    background-color: var(--bg-color2);
    display: flex;
    cursor: pointer;
}

.active-contact.server_local,
.active-contact.server_local:hover {
    background-color: var(--bg-color-over) !important;
}

.active-contact.no_local_server,
.active-contact.no_local_server:hover {
    background-color: #00564d !important;
}

#divContactList>.contact.no_local_server {
    background-color: var(--bg-color-chat-no-local);
}

#divContactList>.contact.no_local_server:hover {
    background-color: var(--bg-color-chat-no-local-hover);
}

#divContactList.filtered>div {
    display: none;
}

#divContactList.filtered.filter_local>div.server_local,
#divContactList.filtered.filter_servers>div.servers_server,
#divContactList.filtered.filter_no_local>div.no_local_server,
#divContactList.filtered.filter_flota>div.flota_server,
#divContactList.filtered.filter_unreads>div.new-message-contact,
#divContactList.filtered.filter_propios>div.cliente_propio {
    display: flex;
}

.contact:hover,
.new-message-contact:hover {
    background-color: var(--bg-color1);
}

.new-message-contact {
    font-weight: bold;
}

.new-message-contact .new-message {
    display: flex;
}

.new-message-contact .contact-assing {
    opacity: 1 !important;
}

.contact-assing {
    height: 70px;
    border-left: 5px solid var(--bg-color1);
    display: flex;
    overflow: hidden;
    width: 65px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fbfbfb;
    font-size: 22px;
    border-bottom: 1px solid rgba(134, 150, 160, 0.15);
}

.contact-preview {
    width: 100%;
    height: 70px;
    border-bottom: 1px solid rgba(134, 150, 160, 0.15);
    display: flex;
    overflow: hidden;
}

.contact-text {
    height: 70px;
    margin: auto 0;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-time {
    color: var(--subtext-color);
    font-size: 0.7em;
    display: flex;
    flex-direction: column;
    padding: 5px 10px 5px 3px;
    TEXT-ALIGN: CENTER;
    border-bottom: 1px solid rgba(134, 150, 160, 0.15);
}

.contact-time>p {
    margin: 0;
    white-space: nowrap;
}

.new-message {
    background: #09d261;
    border-radius: 10px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    display: none;
    margin: auto;
    flex-direction: column;
    margin-right: 0px;
    margin-bottom: 0px;
    color: #000;
    text-align: center;
}

.new-message p {
    margin: auto;
    font-size: 9px;
}

/* ------ RIGHT SIDE ------ */
.rightInfo {
    width: 20%;
    background: #0c1317;
    color: #e9edef;
    border-left: 1px solid #4a4a4a;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

body.chat-selected #DivRightInfo.sticky,
body.chat-selected #DivRightInfo.show {
    display: flex;
}

#DivRightInfo.sticky #close-contactInfo {
    display: none;
}

#DivRightInfo.sticky #stick-contactInfo {
    background-color: #465054;
    color: #fff;
    transform: rotate(45deg);
}

.chatInfo-body {
    height: calc(100% - 60px);
    overflow-y: auto;
    overflow-x: hidden;
}

.chatInfo-body>div {
    background: var(--bg-color2);
    padding: 10px 5px 10px 25px;
    margin-bottom: 10px;
}

.chatInfo-body>div>label {
    display: block;
    font-size: 15px;
    color: #009e7f;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-left: -10px;
}

.chatInfo-body>div small {
    font-size: 13px;
    color: #e9ededa1;
    display: block;
}

.chatInfo-body>div a {
    text-decoration: none !important;
    color: #e9edef !important;
}

.right {
    flex: 1 0 0px;
    display: flex;
    flex-flow: column nowrap;
    overflow: hidden;
    background-color: var(--bg-color1);
}

.right>.chat-head>.faIconChat {
    margin: 10px 15px;
    color: #fff;
    opacity: 1;
    cursor: default;
}

.right>.chat-head>.faIconChat.fa-lock {
    background: #f44336;
}

.right>.chat-head>.faIconChat.fa-inbox-in {
    background: #4caf50;
}

.right>.chat-head>.faIconChat.fa-inbox-out {
    background: #3f51b5;
}

.right>.chat-head>.chat-name>.font-online {
    overflow: hidden;
    font-size: 11px;
    height: 15px;
    margin-top: 2px;
}

.chat-selected-server-local .right>.chat-head>.chat-name>.font-online>div {
    text-transform: capitalize;
}

.right>.chat-head>.chat-name>.font-online {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
}

.right>.chat-head>.chat-name>.font-online>div {
    display: inline-block;
    padding: 0px 0px 0px 0px;
    cursor: help;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 117px;
    white-space: nowrap;
}

.right>.chat-head>.chat-name>.font-online>div>span {
    margin-right: 10px;
}

.right>.chat-head>.chat-name>.font-online>div:hover {
    color: #fff;
}

.right>.chat-head>.chat-name>.font-online>div>i {
    margin-right: 2px;
}

body.chat-selected .right.chat_stopSpam>.wrap-chat-spam {
    display: block;
}

.right>.wrap-chat-spam {
    background: #c90000;
    line-height: 30px;
    color: #fff;
    z-index: 1;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    padding: 0px 10px;
    text-overflow: ellipsis;
    display: none;
    cursor: pointer;
    user-select: none;
}

.right>#wrap-chat-oferta {
    background: #673AB7;
    line-height: 30px;
    color: #fff;
    z-index: 1;
    width: 100%;
    overflow: hidden;
    text-align: center;
    padding: 0px 10px;
    text-overflow: ellipsis;
    display: none;
    user-select: none;
}

.right>.chat-head,
.right>.wrap-chat,
.right>.wrap-attach,
.right>.wrap-message {
    display: none;
}

body.chat-selected #DivRight>.chat-head,
body.chat-selected #DivRight>.wrap-chat,
body.chat-selected #DivRight>.wrap-message {
    display: flex;
}

body.chat-selected #DivRight>.wrap-message {
    flex-direction: row;
    justify-content: flex-end;
}

#DivRight>.wrap-message>.recorder {
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: var(--text-color);
}

#DivRight>.wrap-message>.recorder>* {
    margin-right: 20px;
}

#DivRight>.wrap-message>.recorder>i {
    cursor: pointer;
    font-size: 30px;
}

#DivRight>.wrap-message>.recorder>i#recordPause,
#DivRight>.wrap-message>.recorder>i#recordBtn {
    color: #f44336;
}

#DivRight>.wrap-message>.recorder>i#recordBtn,
#DivRight>.wrap-message>.recorder>audio,
#DivRight>.wrap-message>.recorder.playback>i#recordPause,
#DivRight>.wrap-message>.recorder.playback>canvas {
    display: none;
}

#DivRight>.wrap-message>.recorder.playback>i#recordBtn,
#DivRight>.wrap-message>.recorder.playback>audio {
    display: block;
}

#DivRight>.wrap-message>.recorder>audio {
    filter: invert(1);
}

#DivRight>.wrap-message.recording>.recorder {
    display: flex;
}

#DivRight>.wrap-message.recording>.recorder audio::-webkit-media-controls-enclosure {
    background: transparent;
}

#DivRight>.wrap-message.recording>.recorder audio::-webkit-media-controls-time-remaining-display,
#DivRight>.wrap-message.recording>.recorder audio::-webkit-internal-media-controls-overflow-button,
#DivRight>.wrap-message.recording>.recorder audio::-webkit-media-controls-current-time-display {
    display: none;
}

#DivRight>.wrap-message.recording>#sendAttach,
#DivRight>.wrap-message.recording>#addTag,
#DivRight>.wrap-message.recording>#sendEmo,
#DivRight>.wrap-message.recording>#sendSTT,
#DivRight>.wrap-message.recording>#recordAudio,
#DivRight>.wrap-message.recording>.message {
    display: none;
}

#DivRight>.wrap-message.stting>#sendAttach,
#DivRight>.wrap-message.stting>#addTag,
#DivRight>.wrap-message.stting>#sendEmo,
#DivRight>.wrap-message.stting>#sendSTT,
#DivRight>.wrap-message.stting>#recordAudio,
#DivRight>.wrap-message.stting>#sendBtn,
#DivRight>.wrap-message.stting>.message {
    display: none;
}

#DivRight>.wrap-message.stting .stt {
    display: flex;
    width: 100%;
    align-items: center;
}

#DivRight>.wrap-message.stting .stt>i {
    font-size: 25px;
    margin: 10px;
    color: #f44336;
    cursor: pointer;
}

#DivRight>.wrap-message.stting .stt>div {
    display: flex;
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
    margin: 5px;
    color: var(--text-color);
}

#DivRight>.wrap-message.stting .stt>div #stt-help {
    font-size: 12px;
    opacity: 0.6;
    animation: fadeIn ease 1s infinite;
}

#DivRight>.wrap-message.stting .stt>div #stt-preview {
    line-height: 25px;
    min-height: 36px;
    max-height: 120px;
    overflow: auto;
}

#DivRight>.wrap-message .stt {
    display: none;
}

.chat-head,
.chatInfo-head {
    background-color: #00463f;
    width: 100%;
    height: 60px;
    display: flex;
    box-shadow: 0px 0px 10px 5px var(--bg-color-chat-local);
    z-index: 1;
}

body.chat-selected-server-local .chat-head,
body.chat-selected-server-local .chatInfo-head {
    background-color: var(--bg-color1);
}

.chatInfo-head {
    box-shadow: none;
}

.chat-head img {
    width: 40px;
    height: 40px;
    margin: 10px;
    border-radius: 50%;
}

.chat-head>i,
.chat-head>div.dropdown>i,
.chatInfo-head>i,
.profile i {
    color: var(--icon-color);
    min-width: 40px;
    margin: auto;
    text-align: center;
    opacity: 0.8;
    cursor: pointer;
    height: 40px;
    line-height: 43px;
    border-radius: 50%;
}

.chat-head>div.dropdown {
    display: none;
    margin: auto;
}


.chat-head>div.dropdown>i {
    font-size: 36px;
    line-height: 40px;
}

.chat-head>div.dropdown>i:after {
    display: none;
}

.profile .icons div.dropdown>i {
    line-height: 60px;
    font-size: 36px;
    height: 60px;
}

.profile .icons div.dropdown>i:hover {
    background: none !important;
}

.profile .icons div.dropdown>i::after {
    display: none !important;
}

.profile .icons div.dropdown ul i {
    color: #000;
}

.profile .icons #bellOn,
.profile .icons #bellOff {
    display: none;
}

.chat-head>i:hover,
.chatInfo-head>i:hover,
.profile>.icons>i:hover {
    opacity: 1;
    color: #fff;
    background: #2f3d44;
}

.profile>.icons>i:last-child {
    margin-right: 10px;
}

#close-contact-information {
    display: none;
}

.chat-name,
.chatInfo-name {
    width: 100%;
    margin: auto;
}

.chatInfo-name {
    margin-left: 20px;
}

.wrap-chat,
.wrap-attach {
    height: auto;
    display: flex;
    flex: 1 1 0;
    overflow: hidden;
    background-color: var(--bg-color-chat);
    background-image: url(../images/background.png);
    background-blend-mode: var(--chat-background-blend-mode);
}

body.chat-selected-server-local .wrap-chat,
body.chat-selected-server-local .wrap-attach {
    background-color: var(--bg-color-chat-local);
}

.wrap-attach {
    background: var(--bg-color2);
    border-bottom: 1px solid;
}

.wrap-attach>div {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
}

.wrap-attach>div>span {
    display: flex;
    align-content: center;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: nowrap;
}

.wrap-attach>div>span>i {
    font-size: 35px;
    margin: 20px;
    color: var(--text-color);
    opacity: 0.7;
    cursor: pointer;
    width: 25px;
}

.wrap-attach>div>span>div {
    width: 100%;
    text-align: center;
    margin-right: 60px;
    user-select: none;
}

.wrap-attach>div>span>div>i {
    font-size: 25px;
    margin: 20px 5px;
    cursor: pointer;
    opacity: 0.3;
    border: 2px solid #fff;
    border-radius: 50%;
    display: none;
}

.wrap-attach>div>span>div>button {
    padding: 0px 10px;
    font-size: 13px;
    margin: 15px;
    display: none;
}

.wrap-attach.cropping>div>span>div>i {
    display: none !important;
}

.wrap-attach.cropping>div>span>div>button,
.wrap-attach.cropping .cropper {
    display: initial;
}

.attach_type_image .wrap-attach>div>span>div>i {
    display: inline-block;
}

.wrap-attach>div>span>div>i:hover {
    opacity: 0.8;
}

.wrap-attach>div>span>div>i.selected {
    opacity: 1;
}

.wrap-attach>div>span>i:hover {
    opacity: 1;
    cursor: pointer;
}

.wrap-attach>div>p {
    line-height: 50px;
    text-align: center;
    color: var(--text-color);
}

.wrap-attach>div>div {
    height: calc(100% - 110px);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrap-attach>div>div>i {
    font-size: 50vh;
    color: var(--text-color);
}

.wrap-attach>div>div>video,
.wrap-attach>div>div>img,
.wrap-attach>div>div>div,
.wrap-attach>div>div>div>canvas {
    max-width: 60vw;
    max-height: calc(100vh - 220px);
}

.wrap-attach>div>div>div {
    border: 1px solid;
    box-sizing: content-box;
    position: absolute;
    overflow: hidden;
    line-height: 0px;

}

.wrap-attach>div>div>div>span {
    position: absolute;
    width: 50%;
    height: 50%;
    left: 25%;
    top: 25%;
    background: rgb(33 150 243 / 30%);
    cursor: move;
    display: none;
}

.wrap-attach>div>div>div>span>span.point {
    width: 10px;
    height: 10px;
    background: #0000005e;
    position: absolute;
    border: 2px solid #000;
}

.wrap-attach>div>div>div>span>span.point.tl {
    top: -2px;
    left: -2px;
    cursor: nw-resize;
}

.wrap-attach>div>div>div>span>span.point.tr {
    top: -2px;
    right: -2px;
    cursor: ne-resize;
}

.wrap-attach>div>div>div>span>span.point.bl {
    bottom: -2px;
    left: -2px;
    cursor: ne-resize;
}

.wrap-attach>div>div>div>span>span.point.br {
    bottom: -2px;
    right: -2px;
    cursor: nw-resize;
}

.wrap-attach>div>div>div>span>span.line {
    position: absolute;
    border-width: 0px;
    border-style: dashed;
    border-color: rgb(255 255 255 / 70%);
    background: transparent;
}

.wrap-attach>div>div>div>span>span.line.top {
    left: 8px;
    right: 8px;
    top: 0px;
    border-top-width: 3px;
    cursor: n-resize;
    height: 2px;
}

.wrap-attach>div>div>div>span>span.line.bottom {
    left: 8px;
    right: 8px;
    bottom: 0px;
    border-bottom-width: 3px;
    cursor: n-resize;
    height: 2px;
}

.wrap-attach>div>div>div>span>span.line.left {
    left: 0px;
    top: 8px;
    bottom: 8px;
    border-left-width: 3px;
    cursor: e-resize;
    width: 2px;
}

.wrap-attach>div>div>div>span>span.line.right {
    right: 0px;
    top: 8px;
    bottom: 8px;
    border-right-width: 3px;
    cursor: e-resize;
    width: 2px;
}

#DivRight.attach>.wrap-attach {
    display: flex;
}

body.chat-selected-server-no-local #DivRight.attach_type_document .wrap-message .message,
body.chat-selected-server-no-local #DivRight.attach_type_document #sendAttach,
body.chat-selected-server-no-local #DivRight.attach_type_document #addTag,
body.chat-selected-server-no-local #DivRight.attach_type_document #sendEmo,
body.chat-selected-server-no-local #DivRight.attach_type_document #sendSTT,
body.chat-selected-server-no-local #DivRight.attach_type_document #recordAudio,
body.chat-selected-server-no-local #DivRight.attach_type_audio .wrap-message .message,
body.chat-selected-server-no-local #DivRight.attach_type_audio #sendAttach,
body.chat-selected-server-no-local #DivRight.attach_type_audio #addTag,
body.chat-selected-server-no-local #DivRight.attach_type_audio #sendEmo,
body.chat-selected-server-no-local #DivRight.attach_type_audio #sendSTT,
body.chat-selected-server-no-local #DivRight.attach_type_audio #recordAudio,
body.chat-selected-server-no-local #DivRight.attach_type_video .wrap-message .message,
body.chat-selected-server-no-local #DivRight.attach_type_video #sendAttach,
body.chat-selected-server-no-local #DivRight.attach_type_video #addTag,
body.chat-selected-server-no-local #DivRight.attach_type_video #sendEmo,
body.chat-selected-server-no-local #DivRight.attach_type_video #sendSTT,
body.chat-selected-server-no-local #DivRight.attach_type_video #recordAudio {
    display: none;
}

#DivRight.attach>.wrap-chat,
#DivRight.attach #recordAudio {
    display: none !important;
}

#nroTooltip {
    display: none;
    position: fixed;
    overflow: auto;
    min-width: 150px;
    max-width: 95%;
    min-height: 20px;
    max-height: 80%;
    background-color: #fff;
    z-index: 2;
    padding: 10px;
    box-shadow: 0 0 20px 3px #000;
    border-radius: 10px;
}

#nroTooltip a {
    color: #000 !important;
    white-space: nowrap;
}

#nroTooltip a.cred {
    margin-left: 20px;
    display: block;
    font-size: 13px;
}

#nroTooltip k {
    padding-right: 10px;
    text-transform: capitalize;
}

#nroTooltip i {
    padding-left: 10px;
    color: #919191;
}

.chat {
    width: 100%;
    padding: 0px 5%;
    padding-top: 7px;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
    flex: 0 0 auto;
}

.chat>div {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    padding-bottom: 15px;
}

.chat>div>.diaTxt,
#LoadMore>div {
    order: 0;
    position: relative;
    margin: 10px auto;
    text-align: center;
    color: #e3edef;
    padding: 2px 20px;
    background: #182229;
    border-radius: 6px;
    font-size: 16px;
    z-index: 1;
    text-transform: capitalize;
}

#LoadMore>div {
    background: var(--bg-color-over);
    cursor: pointer;
    user-select: none;
}



.information {
    width: 100%;
    position: relative;
    background: #f7f7f7;
    display: none;
    flex-direction: column;
    overflow: auto;
}

.information div {
    background: #ffffff;
    padding: 10px;
    margin-bottom: 20px;
}

.information img {
    width: 200px;
    height: 200px;
    margin: 20px auto;
    border-radius: 50%;
    float: left;
}

.information h1 {
    color: #009688;
    font-size: 14px;
    margin-bottom: 5px;
}

.listGroups {
    display: flex;
    margin: 0px !important;
}

.listGroups img {
    width: 40px;
    height: 40px;
    margin: 0px 10px 0px 0px;
}

.listGroups p {
    margin: auto 0px;
}

/* ------ CHAT ------ */
.chat-bubble {
    display: flex;
    padding-top: 5px;
    padding-bottom: 5px;
}

.chat-bubble>div.selmsg {
    display: none;
    margin: auto 0;
    line-height: 1px;
    margin-right: 20px;
    padding-left: 10px;
}

.chat-bubble>div.selmsg>input {
    width: 25px;
    height: 25px;
}

.MsgSelect .chat-bubble {
    padding-right: 10px;
}

.MsgSelect .chat-bubble.type_transfer>div.selmsg {
    display: none !important;
}

.MsgSelect .chat-bubble>div.selmsg {
    display: block;
}

.MsgSelect .chat-bubble.MsgSelected {
    background-color: var(--bg-color-selected);
}

.chat-bubble.status_delayed.me>div.msg {
    filter: hue-rotate(45deg);
}

.chat-bubble>div.msg {
    border-radius: 7px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
    padding: 5px 7px;
    max-width: 60%;
    position: relative;
    min-width: 60px;
}

.you>div.msg {
    background: var(--bg-color1);
    color: #e9edef;
    margin: 0px auto 0px 0px;
}
div.chat-bubble.type_template[template^="sms_"]>div.msg {
    background: #544641;
}
.me>div.msg {
    background: var(--bg-color-bubble-me);
    color: #e9edef;
    margin: 0px 0px 0px auto;
}

.chat-bubble.type_sticker>.msg {
    background: transparent !important;
}

.chat-bubble.type_location a {
    line-height: 30px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    margin-left: 5px;
}

.content {
    margin: 3px 50px 0px 0px;
    line-height: 150%;
    font-size: 15px;
    min-height: 15px;
    font-weight: 100;
}

.chat-bubble>.msg>.content {
    white-space: break-spaces;
}

.chat-bubble .content nro, .chat-bubble .content lnke {
    border-bottom: 1px dashed;
    cursor: pointer;
}

.chat-bubble.type_image>.msg>.content {
    margin: 0px 0px 0px 0px;
}

.chat-bubble.type_audio>.msg>.content {
    margin: 0px 0px 13px 0px;
}

.chat-bubble.type_image>.msg>.time {
    margin-right: 3px;
}

.chat-bubble .content a {
    color: #b5b5b5;
    text-decoration: none;
}

.chat-bubble .content a:hover {
    text-decoration: underline;
    color: #e9edef;
}


.chat-bubble .content a.lnkImage {
    width: 300px;
    height: 203.5px;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.chat-bubble>div.msg>.reply {
    border-left: 5px solid #00b190;
    background: #ffffff26;
    border-radius: 4px;
    padding: 2px 0px 2px 10px;
    margin: 0px 0px 5px -3px;
    max-width: 100%;
    overflow: hidden;
}

.chat-bubble>div.msg>.reply img {
    max-width: 200px !important;
}

.chat-bubble>div.msg>.content>small {
    display: block;
    color: #838383;
}


.chat-bubble>div.msg>.content>i.typeIcon {
    position: absolute;
    left: -12px;
    height: 0px;
    top: 8px;
    display: none;
}

.chat-bubble:hover>div.msg>.content>i.typeIcon {
    display: block;
}

.chat-bubble>div.msg>.reply i.typeIcon {
    display: none !important;
}


.chat-bubble>div.msg>.tags {
    position: relative;
    height: 4px;
    width: 0px;
    top: -1px;
    font-size: 9px;
    right: 0px;
}

.chat-bubble>div.msg>.tags>tag {
    background: #673ab7;
    padding: 1px 3px;
    border-radius: 2px;
    margin-right: 5px;
}

.chat-bubble>div.msg>.respond {
    position: absolute;
    right: 0px;
    width: 25px;
    top: -1px;
    cursor: pointer;
    display: none;
    text-align: right;
}

.chat-bubble>div.msg>.respond>i {
    width: 23px;
    font-size: 13px;
    background: #00000070;
    height: 23px;
    margin: 0;
    line-height: 23px;
    text-align: center;
    border-radius: 12px;
    box-shadow: 0px 0px 0px #000;
    transition-duration: 0.5s;
    transition-property: transform;
}

.chat-bubble>div.msg>.respond:hover>i {
    transform: rotate(-80deg);
}

.chat-bubble:hover>div.msg>.respond {
    display: block;
}

.chat-bubble>div.msg>.content error {
    display: block;
    color: #f44336;
    border-radius: 3px;
}

.chat-bubble.me>div.msg>.content error {
    background: #fff;
    padding: 3px 5px;
    font-size: 13px;
    line-height: 17px;
    margin: 5px 0px 20px 0px;
}

.chat-bubble>div.msg>.content>wait {
    margin-right: 40px;
    margin-left: 10px;
}

.chat-bubble>div.msg>.content>wait>i {
    display: inline-block;
    width: auto;
    font-size: 30px;
    margin-top: 6px;
    margin-bottom: 6px;
}

.chat-bubble>div.msg>.content>wait>p {
    margin: 0;
    display: inline-block;
    margin-left: 15px;
    line-height: 29px;
    vertical-align: text-bottom;
}

.content img {
    width: 100%;
}

.time {
    color: hsla(0, 0%, 100%, 0.6);
    font-size: 11px;
    text-align: right;
    position: absolute;
    right: 6px;
    bottom: 6px;
    white-space: nowrap;
}

.chat-bubble.type_video .time,
.chat-bubble.type_image .time {
    text-shadow: 1px 1px 0px #000;
}

.chat-bubble>div.msg>.content>p {
    margin: 0;
}

.chat-bubble>div.msg>.content>preview {
    opacity: 0.6;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
}

.chat-bubble>div.msg>.content>preview>i,
.chat-bubble>div.msg>.content>preview>label {
    cursor: pointer;
}

.chat-bubble>div.msg>.content>preview:hover {
    opacity: 1;
}

.chat-bubble>div.msg>.content>preview.audio {
    height: 40px;
    width: 250px;
    display: block;
    padding-top: 3px;
    padding-left: 5px;
}

.chat-bubble>div.msg>.content>preview.audio>i {
    font-size: 20px;
    border: 1px solid #fff;
    width: 37px;
    height: 37px;
    border-radius: 25px;
    float: left;
    text-align: center;
    padding-left: 5px;
}

.chat-bubble>div.msg>.content>preview.audio>i:before {
    content: "\f04b";
    vertical-align: -webkit-baseline-middle;
}

.chat-bubble>div.msg>.content>preview.audio>label {
    display: block;
    float: left;
    line-height: 37px;
    margin-left: 10px;
}

.chat-bubble>div.msg>.content>preview.audio>label:before {
    content: "Mensaje de Audio";
}

.chat-bubble audio {
    height: 40px;
}

.chat-bubble .audioRate {
    float: right;
    margin-top: 5px;
    margin-right: 10px;
    background: var(--bg-color2);
    border-radius: 10px;
    padding: 3px 8px;
    font-size: 11px;
    cursor: pointer;
    user-select: none;
}

.chat-bubble>div.msg>.content>preview.document {
    height: 50px;
    width: 250px;
    display: block;
    padding-top: 3px;
    padding-left: 5px;
}

.chat-bubble>div.msg>.content>preview.document>i {
    font-size: 21px;
    border: 1px solid #fff;
    width: 40px;
    height: 40px;
    border-radius: 25px;
    float: right;
    text-align: center;
}

.chat-bubble>div.msg>.content>preview.document>i:before {
    content: "\f019";
    vertical-align: -webkit-baseline-middle;
}

.chat-bubble>div.msg>.content>preview.document>label {
    display: block;
    float: left;
    line-height: 40px;
    margin-left: 10px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 190px;
}

.chat-bubble>div.msg>.content>preview.document>label>i {
    font-size: 25px;
    margin-right: 10px;
    vertical-align: sub;
}


.chat-bubble>div.msg>.content>preview.image {
    height: 203.5px;
    width: 300px;
    background: url(/images/bgimage.jpg) no-repeat;
    background-size: cover;
    border-radius: 5px;
}

.chat-bubble>div.msg>.content>preview.image>i {
    font-size: 26px;
    width: 45px;
    height: 45px;
    border-radius: 25px;
    background: #0000008a;
    text-align: center;
}

.chat-bubble>div.msg>.content>preview.image>i:before {
    content: "\f019";
    vertical-align: -webkit-baseline-middle;
}

.chat-bubble>div.msg>.content>preview.image>label {
    color: #000;
    text-align: center;
    display: block;
    margin: 10px;
}

.chat-bubble>div.msg>.content>preview.image>label:before {
    content: "Imágen";
}



.chat-bubble>div.msg>.content>preview.sticker {
    height: 100px;
    width: 100px;
    background: url(/images/bgimage.jpg) no-repeat;
    background-size: cover;
    border-radius: 5px;
}

.chat-bubble>div.msg>.content>preview.sticker>i {
    font-size: 26px;
    width: 45px;
    height: 45px;
    border-radius: 25px;
    background: #0000008a;
    text-align: center;
}

.chat-bubble>div.msg>.content>preview.sticker>i:before {
    content: "\f019";
    vertical-align: -webkit-baseline-middle;
}

.chat-bubble>div.msg>.content>preview.sticker>label {
    color: #000;
    text-align: center;
    display: block;
    margin: 10px;
}

.chat-bubble>div.msg>.content>preview.sticker>label:before {
    content: "Sticker";
}

.chat-bubble.type_image>div.msg,
.chat-bubble.type_sticker>div.msg {
    padding: 5px;
}

.chat-bubble.type_audio>div.msg {
    min-width: 365px;
    min-height: 70px;
}

.chat-bubble.type_document>div.msg {
    min-width: 270px;
    min-height: 55px;
}

.chat-bubble.type_sticker>.content,
.chat-bubble.type_image>.content,
.chat-bubble.type_audio>.content {
    margin: 0px;
}

.chat-bubble>div.msg>.username {
    line-height: 18px;
    color: #ff9800;
    text-transform: capitalize;
    margin-right: 25px;
}

.chat-bubble.me>div.msg>.username {
    text-shadow: 1px 1px 2px #000;
}

.chat-bubble.shared>div.msg>.username:after {
    content: "Reenviado";
    font-size: 10px;
    color: #ccc;
    padding-left: 5px;
}

.chat-bubble.type_sticker>.username,
.chat-bubble.type_image>.username,
.chat-bubble.type_video>.username,
.chat-bubble.type_document>.username,
.chat-bubble.type_contact>.username,
.chat-bubble.type_audio>.username {
    margin-bottom: 2px;
}

.chat-bubble>div.msg>.content>preview.video {
    height: 200px;
    width: 200px;
    background: url(/images/bgimage.jpg) no-repeat;
    background-size: cover;
    border-radius: 5px;
}

.chat-bubble>div.msg>.content>preview.video>i {
    font-size: 26px;
    width: 45px;
    height: 45px;
    border-radius: 25px;
    background: #0000008a;
    text-align: center;
    padding-left: 4px;
}

.chat-bubble>div.msg>.content>preview.video>i:before {
    content: "\f04b";
    vertical-align: -webkit-baseline-middle;
}

.chat-bubble>div.msg>.content>preview.video>label {
    color: #000;
    text-align: center;
    display: block;
    margin: 10px;
}

.chat-bubble>div.msg>.content>preview.video>label:before {
    content: "Video";
}

.chat-bubble.type_video>div.msg {
    padding: 5px;
    width: 210px;
}

.chat-bubble.type_video>div.msg>.content {
    margin: 0px;
}

.chat-bubble>div.msg>.content>preview.loading>i {
    animation: fa-spin 2s infinite linear;
}

.chat-bubble.type_video video {
    width: 200px;
    height: 200px;
}

.chat-bubble.type_image>div.msg>.content {
    min-width: 50px;
    min-height: 30px;
    max-width: 300px;
}

.chat-bubble.type_image img {
    max-width: 300px;
    max-height: 200px;
    cursor: pointer;
}

.chat-bubble.type_transfer .respond,
.chat-bubble.type_opened .respond {
    display: none !important;
}

.chat-bubble.type_transfer>.msg, .chat-bubble.type_opened>.msg {
    position: relative;
    margin: 5px auto;
    background: #000;
    padding: 5px 20px;
    text-align: center;
    float: none;
    display: inline-block;
}

.chat-bubble.type_call>.msg {
    position: relative;
    margin: 5px auto;
    background: #795548;
    padding: 5px 20px;
    text-align: center;
    float: none;
    display: inline-block;
}

.chat-bubble.type_call>div.selmsg, .chat-bubble.type_call>.msg>.respond {
    display: none !important;
}

.chat-bubble.type_opened>.msg {
    background-color: #101010;
}

.chat-bubble.type_transfer>.msg .content,
.chat-bubble.type_opened>.msg .content {
    margin: 0 20px 0 5px !important;
}

.chat-bubble.type_transfer>.msg .time,
.chat-bubble.type_opened>.msg .time {
    top: 8px !important;
}

.chat-bubble.type_transfer>.msg .msg-tick,
.chat-bubble.type_opened>.msg .msg-tick {
    display: none !important;
}

.chat-bubble.type_sticker>div.msg>.content {
    min-width: 50px;
    min-height: 30px;
}

.chat-bubble.type_sticker img {
    max-width: 100px;
    max-height: 100px;
    cursor: pointer;
}

.chat-bubble audio::-webkit-media-controls-panel {
    background: transparent;
    filter: invert(1);
}

.chat-bubble audio::-webkit-media-controls-enclosure {
    background-color: transparent;
}

.chat-bubble>div.msg>.time>.msg-tick {
    width: 15px;
    height: 9px;
    display: inline-block;
    margin-left: 3px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.chat-bubble.you>div.msg>.time>.msg-tick {
    display: none;
}

.chat-bubble.status_failed>.div.msg {
    background: #f44336 !important;
}

.chat-bubble.status_temp>div.msg>.time>.msg-tick,
.chat-bubble.status_pending>div.msg>.time>.msg-tick {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTYgMTUiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNSI+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTkuNzUgNy43MTNIOC4yNDRWNS4zNTlhLjUuNSAwIDAgMC0uNS0uNUg3LjY1YS41LjUgMCAwIDAtLjUuNXYyLjk0N2EuNS41IDAgMCAwIC41LjVoLjA5NGwuMDAzLS4wMDEuMDAzLjAwMmgyYS41LjUgMCAwIDAgLjUtLjV2LS4wOTRhLjUuNSAwIDAgMC0uNS0uNXptMC01LjI2M2gtMy41Yy0xLjgyIDAtMy4zIDEuNDgtMy4zIDMuM3YzLjVjMCAxLjgyIDEuNDggMy4zIDMuMyAzLjNoMy41YzEuODIgMCAzLjMtMS40OCAzLjMtMy4zdi0zLjVjMC0xLjgyLTEuNDgtMy4zLTMuMy0zLjN6bTIgNi44YTIgMiAwIDAgMS0yIDJoLTMuNWEyIDIgMCAwIDEtMi0ydi0zLjVhMiAyIDAgMCAxIDItMmgzLjVhMiAyIDAgMCAxIDIgMnYzLjV6Ij48L3BhdGg+PC9zdmc+);
}

.chat-bubble.status_temp_blue>div.msg>.time>.msg-tick {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTYgMTUiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNSI+PHBhdGggZmlsbD0iIzRGQzNGNyIgZD0iTTkuNzUgNy43MTNIOC4yNDRWNS4zNTlhLjUuNSAwIDAgMC0uNS0uNUg3LjY1YS41LjUgMCAwIDAtLjUuNXYyLjk0N2EuNS41IDAgMCAwIC41LjVoLjA5NGwuMDAzLS4wMDEuMDAzLjAwMmgyYS41LjUgMCAwIDAgLjUtLjV2LS4wOTRhLjUuNSAwIDAgMC0uNS0uNXptMC01LjI2M2gtMy41Yy0xLjgyIDAtMy4zIDEuNDgtMy4zIDMuM3YzLjVjMCAxLjgyIDEuNDggMy4zIDMuMyAzLjNoMy41YzEuODIgMCAzLjMtMS40OCAzLjMtMy4zdi0zLjVjMC0xLjgyLTEuNDgtMy4zLTMuMy0zLjN6bTIgNi44YTIgMiAwIDAgMS0yIDJoLTMuNWEyIDIgMCAwIDEtMi0ydi0zLjVhMiAyIDAgMCAxIDItMmgzLjVhMiAyIDAgMCAxIDIgMnYzLjV6Ij48L3BhdGg+PC9zdmc+);
}

.chat-bubble.status_failed>div.msg>.time>.msg-tick {
    display: none;
}

.chat-bubble.status_sent>div.msg>.time>.msg-tick {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTYgMTUiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNSI+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTEwLjkxIDMuMzE2bC0uNDc4LS4zNzJhLjM2NS4zNjUgMCAwIDAtLjUxLjA2M0w0LjU2NiA5Ljg3OWEuMzIuMzIgMCAwIDEtLjQ4NC4wMzNMMS44OTEgNy43NjlhLjM2Ni4zNjYgMCAwIDAtLjUxNS4wMDZsLS40MjMuNDMzYS4zNjQuMzY0IDAgMCAwIC4wMDYuNTE0bDMuMjU4IDMuMTg1Yy4xNDMuMTQuMzYxLjEyNS40ODQtLjAzM2w2LjI3Mi04LjA0OGEuMzY1LjM2NSAwIDAgMC0uMDYzLS41MXoiPjwvcGF0aD48L3N2Zz4=);
}

.chat-bubble.status_delivered>div.msg>.time>.msg-tick {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTYgMTUiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNSI+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTE1LjAxIDMuMzE2bC0uNDc4LS4zNzJhLjM2NS4zNjUgMCAwIDAtLjUxLjA2M0w4LjY2NiA5Ljg3OWEuMzIuMzIgMCAwIDEtLjQ4NC4wMzNsLS4zNTgtLjMyNWEuMzE5LjMxOSAwIDAgMC0uNDg0LjAzMmwtLjM3OC40ODNhLjQxOC40MTggMCAwIDAgLjAzNi41NDFsMS4zMiAxLjI2NmMuMTQzLjE0LjM2MS4xMjUuNDg0LS4wMzNsNi4yNzItOC4wNDhhLjM2Ni4zNjYgMCAwIDAtLjA2NC0uNTEyem0tNC4xIDBsLS40NzgtLjM3MmEuMzY1LjM2NSAwIDAgMC0uNTEuMDYzTDQuNTY2IDkuODc5YS4zMi4zMiAwIDAgMS0uNDg0LjAzM0wxLjg5MSA3Ljc2OWEuMzY2LjM2NiAwIDAgMC0uNTE1LjAwNmwtLjQyMy40MzNhLjM2NC4zNjQgMCAwIDAgLjAwNi41MTRsMy4yNTggMy4xODVjLjE0My4xNC4zNjEuMTI1LjQ4NC0uMDMzbDYuMjcyLTguMDQ4YS4zNjUuMzY1IDAgMCAwLS4wNjMtLjUxeiI+PC9wYXRoPjwvc3ZnPg==);
}

.chat-bubble.status_read>div.msg>.time>.msg-tick {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTYgMTUiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNSI+PHBhdGggZmlsbD0iIzRGQzNGNyIgZD0iTTE1LjAxIDMuMzE2bC0uNDc4LS4zNzJhLjM2NS4zNjUgMCAwIDAtLjUxLjA2M0w4LjY2NiA5Ljg3OWEuMzIuMzIgMCAwIDEtLjQ4NC4wMzNsLS4zNTgtLjMyNWEuMzE5LjMxOSAwIDAgMC0uNDg0LjAzMmwtLjM3OC40ODNhLjQxOC40MTggMCAwIDAgLjAzNi41NDFsMS4zMiAxLjI2NmMuMTQzLjE0LjM2MS4xMjUuNDg0LS4wMzNsNi4yNzItOC4wNDhhLjM2Ni4zNjYgMCAwIDAtLjA2NC0uNTEyem0tNC4xIDBsLS40NzgtLjM3MmEuMzY1LjM2NSAwIDAgMC0uNTEuMDYzTDQuNTY2IDkuODc5YS4zMi4zMiAwIDAgMS0uNDg0LjAzM0wxLjg5MSA3Ljc2OWEuMzY2LjM2NiAwIDAgMC0uNTE1LjAwNmwtLjQyMy40MzNhLjM2NC4zNjQgMCAwIDAgLjAwNi41MTRsMy4yNTggMy4xODVjLjE0My4xNC4zNjEuMTI1LjQ4NC0uMDMzbDYuMjcyLTguMDQ4YS4zNjUuMzY1IDAgMCAwLS4wNjMtLjUxeiI+PC9wYXRoPjwvc3ZnPg==);
}

.chat-bubble.status_delayed>div.msg>.time>.msg-tick {
    background-size: contain;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDEyIDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Im0xMS41IDEuNWgwLjEyNWMwLjIwNjI1IDAgMC4zNzUtMC4xNjg3NSAwLjM3NS0wLjM3NXYtMC43NWMwLTAuMjA2MjUtMC4xNjg3NS0wLjM3NS0wLjM3NS0wLjM3NWgtMTEuMjVjLTAuMjA2MjUgMC0wLjM3NSAwLjE2ODc1LTAuMzc1IDAuMzc1djAuNzVjMCAwLjIwNjI1IDAuMTY4NzUgMC4zNzUgMC4zNzUgMC4zNzVoMC4xMjVjMCAyLjUxODggMS4wMDYyIDUuMTgxMiAzLjAzNzUgNi41LTIuMDQwNiAxLjMyNS0zLjAzNzUgMy45OTY5LTMuMDM3NSA2LjVoLTAuMTI1Yy0wLjIwNjI1IDAtMC4zNzUgMC4xNjg3NS0wLjM3NSAwLjM3NXYwLjc1YzAgMC4yMDYyNSAwLjE2ODc1IDAuMzc1IDAuMzc1IDAuMzc1aDExLjI1YzAuMjA2MjUgMCAwLjM3NS0wLjE2ODc1IDAuMzc1LTAuMzc1di0wLjc1YzAtMC4yMDYyNS0wLjE2ODc1LTAuMzc1LTAuMzc1LTAuMzc1aC0wLjEyNWMwLTIuNTE4OC0xLjAwNjItNS4xODEyLTMuMDM3NS02LjUgMi4wNDA2LTEuMzI1IDMuMDM3NS0zLjk5NjkgMy4wMzc1LTYuNXptLTkuNSAwaDhjMCAzLjE3NS0xLjc5MDYgNS43NS00IDUuNzUtMi4yMDk0IDAtNC0yLjU3NS00LTUuNzV6bTggMTNoLThjMC0zLjE3NSAxLjc5MDYtNS43NSA0LTUuNzUgMi4yMDk0IDAgNCAyLjU3NSA0IDUuNzV6IiBmaWxsPSIjZmZmIiBzdHJva2Utd2lkdGg9Ii4wMzEyNSIvPjwvc3ZnPgo=);
}

.pink {
    color: #EE33AA;
}

.green {
    color: #44FF66;
}

.orange {
    color: #FF8811;
}

.wrap-message {
    width: 100%;
    height: auto;
    background: var(--bg-color1);
    display: flex;
    max-height: 150px;
}

.chat_closed .wrap-message #sendAttach,
.chat_closed .wrap-chat-spam,
.chat_closed .wrap-message #addTag,
.chat_closed .wrap-message #sendEmo,
.chat_closed .wrap-message #sendSTT,
.chat_closed .wrap-message .message,
.chat_closed .wrap-message .recorder,
.chat_closed .wrap-message #recordAudio,
.chat_closed .wrap-message #sendBtn {
    display: none !important;
}

.chat_closed #cantwrite {
    display: block;
}

#DivSendCRM,
.MsgSelect #cantwrite,
.MsgSelect .wrap-message .message,
.MsgSelect .wrap-message #sendAttach,
.MsgSelect .wrap-message #addTag,
.MsgSelect .wrap-message #sendEmo,
.MsgSelect .wrap-message #sendSTT,
.MsgSelect .wrap-message #recordAudio {
    display: none;
}

.MsgSelect #DivSendCRM {
    display: block;
    line-height: 65px;
    color: var(--text-color);
    text-align: center;
    width: 100%;
}

.MsgSelect .wrap-message #sendBtn {
    display: block !important;
}

#cantwrite {
    line-height: 20px;
    padding: 10px;
    color: #fbfbfb;
    font-size: 14px;
    text-align: center;
    width: 100%;
    display: none;
    cursor: pointer;
}

.showEmos>#emos {
    display: block;
}


.showTagsList>#tagsList {
    display: flex;
}

#tagsList {
    width: 0px;
    margin: 0;
    height: 0px;
    padding: 0;
    display: none;
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-content: center;
    align-items: flex-start;
}

#tagsList>div {
    padding-left: 35px;
    width: 300px;
    padding-top: 30px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    height: calc(100vh - 125px);
    justify-content: flex-end;
}

#tagsList>div>tags {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: hidden;
    overflow-y: auto;
    width: 250px;
    background: #111b21;
    border-radius: 5px;
    padding-top: 5px;
}

#tagsList>div>div, #tagsList>div>tags>tag {
    padding: 5px 10px;
    background: #2a3942;
    color: #fff;
    line-height: 25px;
    opacity: 0.7;
    cursor: pointer;
    margin: 5px 10px;
    border-radius: 10px;
}

#tagsList>div>div:hover, #tagsList>div>tags>tag:hover {
    opacity: 1;
}

.showAttachList>#attachs {
    display: flex;
}

#attached {
    position: absolute;
    width: 0px;
    margin: 0;
    height: 0px;
    padding: 0;
    display: none;
}

#attachs {
    width: 0px;
    margin: 0;
    height: 0px;
    padding: 0;
    display: none;
    flex-direction: column-reverse;
    justify-content: flex-start;
    align-content: center;
    align-items: flex-start;
}

#attachs>div {
    padding-left: 35px;
    width: 200px;
    padding-top: 30px;
    z-index: 1;
}


#attachs>div>div {
    opacity: 0.7;
    cursor: pointer;
    margin-bottom: 15px;
    height: 50px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
}

#attachs>div>div:hover {
    opacity: 1;
}

#attachs>div>div:hover>span {
    visibility: visible;
}

#attachs>div>div>span {
    font-size: 15px;
    background: #000;
    border-radius: 5px;
    padding: 4px 10px;
    color: #fff;
    margin-left: 10px;
    visibility: hidden;
}

#attachs i {
    font-size: 30px;
    padding: 10px;
    border-radius: 50%;
    background: black;
    width: 50px;
    height: 50px;
    line-height: 30px;
}

#attachs>div>div:hover i {
    box-shadow: 0px 0px 5px 2px black;
}

#attachs i.fa-id-badge {
    background: #00bcd4;
    color: #000;
}

#attachs i.fa-books {
    background: #673ab7;
}

#attachs i.fa-file {
    background: #4caf50;
    color: #000;
}

#attachs i.fa-file-image {
    background: #ff9800;
    color: #000;
}

#attachs i.fa-file-video {
    background: #009688;
    color: #000;
}

.message {
    width: 100%;
    background: var(--bg-color-over);
    border-radius: 5px;
    display: flex;
    align-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
    overflow: hidden;
    min-height: 40px;
    margin: 10px 0;
    flex-direction: column;
}


#DivRight.repling .message #ReplingMsg {
    display: flex;
}

#DivRight.repling .message #inputTxt {
    max-height: 25px !important;
}

.message #ReplingMsg {
    width: 100%;
    background: var(--bg-color1);
    display: none;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 0 10px 0px;
    align-items: center;
}

.message #ReplingMsg>div {
    width: 100%;
    background: var(--bg-color-over);
    padding: 5px;
    margin: 0px 15px 0px 0px;
    border-radius: 5px;
    border-left: 10px solid #009688;
    color: #e9edef;
    max-height: 100px;
    min-height: 40px;
    overflow: auto;
    zoom: 0.8;
}

.message #ReplingMsg>div i,
.message #ReplingMsg>div .respond,
.message #ReplingMsg>div .time,
.message #ReplingMsg>div div.reply,
.message #ReplingMsg>div div.tags,
.message #ReplingMsg>div .audioRate {
    display: none;
}

.message #ReplingMsg>div img {
    max-width: 200px !important;
}

.message #ReplingMsg>i {
    font-size: 30px;
    margin-right: 15px;
    cursor: pointer;
    opacity: 0.7;
}

.message #ReplingMsg>i.fa-reply {
    font-size: 20px;
    transform: rotate(-180deg);
    margin-right: 10px;
}

.message #ReplingMsg>i:hover {
    opacity: 1;
}

.input-message {
    width: 100%;
    border: none;
    max-height: 120px;
    overflow: auto;
    color: #e9edef;
    margin: 10px;
    padding: 0px 7px;
    white-space: break-spaces;
}

.input-message:focus {
    outline: none;
}

/* ------ SCROLLBAR ------ */

body>.wrap ::-webkit-scrollbar {
    width: 0.6em;
    height: 0.6em;
}

body>.wrap ::-webkit-scrollbar-thumb {
    background-color: rgb(255 255 255 / 20%);
}

#modalAlert {
    backdrop-filter: blur(2px) !important;
    background: #00000036 !important;
}

#modalAlert .modal-content {
    box-shadow: 0px 0px 20px -5px #000;
    margin-top: 50px;
}


#divServerConf {
    position: fixed;
    z-index: 2;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #000;
    padding: 20px;
}

#divServerConf>div {
    background: #fff;
    position: absolute;
    bottom: 20px;
    top: 20px;
    left: 20px;
    right: 20px;
    border-radius: 5px;
    padding: 10px;
}

#divServerConf #closeServerConfig {
    position: absolute;
    right: 20px;
    top: 18px;
    color: #ccc;
    cursor: pointer;
}

#divServerConf #closeServerConfig:hover {
    color: #000;
}

#divServerConf .tab-content {
    height: calc(100% - 110px);
    margin: 5px;
    padding: 5px;
    overflow: auto;
}

#divServerConf .userList i,
#divServerConf #tabGrps i,
#divServerConf #tabTemplate i {
    cursor: pointer;
}

#divServerConf .userList i:hover,
#divServerConf #tabGrps i:hover,
#divServerConf #tabTemplate i:hover {
    color: red;
}

#divServerConf #divUsersPanel {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    justify-content: flex-start;
    align-items: stretch;
    max-height: calc(100vh - 230px);
}

#divServerConf #divUsersPanel #divUsersPanelList {
    width: 25%;
    max-width: 300px;
    min-width: 300px;
    margin-right: 10px;
    border: 1px solid #e9e9e9;
    padding: 00px;
    white-space: nowrap;
    overflow-x: hidden;
}

#divServerConf #divUsersPanel #divUsersPanelList>div {
    padding: 5px 0 5px 10px;
    border-bottom: 1px solid #e9e9e9;
    cursor: pointer;
}

#divServerConf #divUsersPanel #divUsersPanelList>div:hover {
    background: #e9e9e9;
}

#divServerConf #divUsersPanel #divUsersPanelList>div>p {
    margin: 0;
    line-height: 20px;
}

#divServerConf #divUsersPanel #divUsersPanelList>div>small {
    padding-left: 10px;
    font-size: 11px;
}

#divServerConf #divUsersPanel #divUsersPanelData {
    width: 100%;
    border: 1px solid #e9e9e9;
    padding: 10px;
    overflow: auto;
}

#divUsersPanelServersAccess {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    align-content: flex-start;
    white-space: nowrap;
    user-select: none;
}

#divUsersPanelServersAccess>div {
    margin-right: 10px;
    padding: 10px;
    border: 1px solid #e9e9e9;
}

#divUsersPanelServersAccess>div>div:first-child {
    font-weight: bold;
    font-size: 16px;
    margin-left: 0px;
    line-height: 25px;
}

#divUsersPanelServersAccess>div>div {
    margin-left: 15px;
}

#divUsersPanelServersAccess select.esrv {
    width: 200px;
}



#divSearchLoading {
    padding: 20px;
    text-align: center;
    color: #e2e0d5;
}

#divSearchLoading i {
    font-size: 40px;
    margin: 20px;
}

#divSearchResults #noresults {
    text-align: center;
    margin: 20px;
    color: #c3c5cb;
}

#divSearchResults #noresults i {
    font-size: 40px;
    margin: 20px 10px 5px 10px;
}

#divSearchResults>div {
    margin: 5px 0px 20px 0px;
}

#divSearchResults>div>h5 {
    color: #00a884;
    font-weight: normal;
    font-size: 15px;
    padding: 10px;
    margin: 0px 0px 10px 0px;
    border-bottom: 1px solid #00a884;
}

#divSearchResults>div>div {
    color: #c3c5cb;
    border-bottom: 1px solid rgba(134, 150, 160, 0.15);
    cursor: pointer;
    padding: 5px 0px 5px 15px;
    min-height: 72px;
}

#divSearchResults>div>div>label {
    cursor: pointer;
}

#divSearchResults>div>div>p {
    font-size: 11px;
    padding-left: 10px;
    cursor: pointer;
}

#divSearchResults>div>div:hover {
    background: var(--bg-color1);
}

#ModalGalery table tbody i {
    cursor: pointer;
}

.wrap-message #sendEmo {
    width: 50px;
    line-height: 64px;
    color: #636e75;
    cursor: pointer;
}

#emos {
    position: relative;
    width: 0px;
    height: 0px;
    display: none;
}

#emos>div {
    position: relative;
    top: -370px;
    left: 0px;
    right: 0px;
    white-space: nowrap;
    height: 370px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    justify-content: flex-start;
}

#emos>div>div {
    height: 220px;
    background: var(--bg-color1);
    width: 80vw;
    overflow: hidden;
}

#emos .emosCategory {
    height: 40px;
    display: flex;
    align-content: center;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: nowrap;
    font-size: 20px;
    border-bottom: 1px solid var(--bg-color-over);
    color: var(--text-color);
}

#emos .emosCategory>span {
    cursor: pointer;
    display: block;
    width: 100%;
    text-align: center;
    height: 40px;
    line-height: 40px;
}


#emos .emosCategory>span:hover {
    background-color: var(--bg-color-over);
}

#emos .emosCategory>span.sel {
    background-color: #384750;
}

#emos .emosList {
    height: 180px;
    overflow: auto;
    background: #1f3039;
    padding-left: 5px;
}

#emos .emosList>div {
    display: none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

#emos .emosList>div.selected {
    display: flex;
}

#emos .emosList .emoji:hover {
    background: var(--bg-color-over);
    border-radius: 5px;
}

#emos #emosSearch {
    margin: 5px 10px 10px 5px;
    width: 100%;
    background: var(--bg-color2);
    border: 1px solid var(--bg-color-over);
    padding: 3px 10px;
    border-radius: 5px;
    outline: none;
    color: #9fa3a5;
    font-size: 13px;
    line-height: 25px;
}

#emos #emosSearchResults,
#emos #emosLast {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    overflow-x: hidden;
    max-height: 120px;
}

#emos .emosList .emoji {
    font-size: 25px;
    line-height: 40px;
    height: 40px;
    overflow: visible;
    width: 40px;
    color: var(--text-color);
    background: transparent;
    cursor: pointer;
    position: relative;
    outline: none;
    border: none;
    text-align: center;
    font-family: apple color emoji, segoe ui emoji, notocoloremoji, segoe ui symbol, android emoji, emojisymbols, emojione mozilla;
    user-select: none;
}

#predefmsg {
    position: relative;
    width: 0px;
    height: 0px;
    z-index: 1;
}

#predefmsg>div {
    position: relative;
    top: -370px;
    left: 50px;
    white-space: nowrap;
    height: 370px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    justify-content: flex-start;
}

#predefmsg>div>div {
    background-color: var(--bg-color2);
    padding: 0 5px;
    margin: 0;
}

#predefmsg>div>div>div {
    padding: 5px 10px;
    border-radius: 5px;
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
}

#predefmsg>div>div:first-child {
    padding-bottom: 5px;
}

#predefmsg>div>div:last-child {
    padding-top: 5px;
}

#predefmsg>div>div.sel>div {
    background: var(--bg-color-over);
}

#predefmsg>div>div>div>i {
    margin-right: 10px;
}

#predefmsg>div>div>div>b {
    margin-right: 10px;
    text-transform: capitalize;
}

#predefmsg>div>div>div>span {
    font-size: 12px;
    color: #898989;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 500px;
    display: inline-block;
    overflow: hidden;
    height: 17px;
}

#volMut,
#volMax,
#volMin {
    display: none;
}

body.sound-vol-0 #volMut,
body.sound-vol-50 #volMin,
body.sound-vol-100 #volMax {
    display: block;
}

body.chat-selected-server-local #DivRight .chat-head #template-contact,
body.chat-selected-server-local #DivRight .chat-head #open-contact,
body.chat-selected-server-local #DivRight .chat-head #transfer-contact,
body.chat-selected-server-local #DivRight .chat-head #unmute-contact,
body.chat-selected-server-local #DivRight .chat-head #menu_unmute-contact,
body.chat-selected #DivRight .chat-head #unsticky-contact,
body.chat-selected #DivRight .chat-head #menu_unsticky-contact,
body.chat-selected #DivRight .chat-head #mute-contact,
body.chat-selected #DivRight .chat-head #menu_mute-contact,
body.chat-selected #DivRight.muted .chat-head #mute-contact,
body.chat-selected #DivRight.muted .chat-head #menu_mute-contact,
body.chat-selected #DivRight.sticked .chat-head #sticky-contact,
body.chat-selected #DivRight.sticked .chat-head #menu_sticky-contact,
body.chat-selected #DivRight .chat-head #unmute-contact,
body.chat-selected #DivRight .chat-head #menu_unmute-contact,
body.chat-selected #DivRight .chat-head[data-assing="apiWebHook"] #transfer-contact,
body.chat-selected #DivRight .chat-head[data-assing="apiWebHook"] #archive-contact,
body.chat-selected-server-local #DivRightInfo {
    display: none !important;
}

body.chat-selected #DivRight.sticked .chat-head #unsticky-contact,
body.chat-selected #DivRight.sticked .chat-head #menu_unsticky-contact,
body.chat-selected-server-local #DivRight .chat-head #mute-contact,
body.chat-selected-server-local #DivRight.muted .chat-head #unmute-contact,
body.chat-selected-server-local #DivRight .chat-head #menu_mute-contact,
body.chat-selected-server-local #DivRight.muted .chat-head #menu_unmute-contact {
    display: block !important;
}

#divDisconnected {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 99999999;
    display: none;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
}

#divDisconnected>div {
    min-width: 250px;
    margin: auto;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 1px 1px 11px #000;
    text-align: center;
    background-color: #fff;
}

body.desconectadoI {
    filter: grayscale(1);
}

body.desconectadoI>#divDisconnected {
    display: flex;
}




@media only screen and (max-width: 1680px) {
    .wrap>#DivLeft {
        width: 25%;
    }

    #emos>div>div {
        width: 75vw;
    }
}

@media only screen and (max-width: 1280px) {
    .wrap>#DivLeft {
        width: 30%;
    }

    #emos>div>div {
        width: 70vw;
    }
}

@media only screen and (max-width: 800px) {
    .wrap>#DivLeft {
        width: 35%;
    }

    #emos>div>div {
        width: 65vw;
    }
}

@media only screen and (max-width: 1000px) {

    body.chat-selected #DivRight .chat-head #sticky-contact,
    body.chat-selected #DivRight .chat-head #unsticky-contact,
    body.chat-selected #DivRight .chat-head #mute-contact,
    body.chat-selected #DivRight.muted .chat-head #unmute-contact,
    body.chat-selected #DivRight.sticked .chat-head #unsticky-contact,
    body.chat-selected #DivRight .chat-head #unmute-contact,
    body.chat-selected #DivRight .chat-head #share-msgs,
    body.chat-selected #DivRight .chat-head #crm-contact {
        display: none !important;
    }

    #DivRight .chat-head>.dropdown {
        display: flex !important;
    }

    #DivRight>.chat-head>.chat-name {
        max-width: calc(100% - 350px) !important;
    }

    body.chat-selected-server-local #DivRight>.chat-head>.chat-name {
        max-width: calc(100% - 200px) !important;
    }
}

@media only screen and (max-width: 650px) {
    .wrap {
        min-width: 250px;
    }

    .wrap>#DivLeft {
        width: 100vw;
    }

    #emos>div>div {
        width: 100vw;
    }

    .wrap>#DivRight,
    .wrap>#DivRightInfo {
        display: none;
    }

    body.chat-selected .wrap>#DivLeft {
        display: none;
    }

    body.chat-selected .wrap>#DivRight {
        display: flex;
    }

    i#close-contact {
        font-size: 40px;
        order: -1110;
        width: 100px;
    }

    .chat-bubble>div.msg {
        max-width: 90% !important;
    }

    .wrap-message>i {
        width: 70px !important;
        opacity: 1 !important;
    }
}

@media only screen and (max-width: 500px) {

    .wrap>#DivRight,
    .wrap>#DivRightInfo {
        zoom: 0.9;
    }

    #emos>div>div {
        width: 100vw;
        zoom: 1.1;
    }

    .wrap>#DivRight>.chat-head>.faIconChat {
        display: none;
    }

    #DivRight>.chat-head>.chat-name {
        max-width: calc(100% - 280px) !important;
    }

    body.chat-selected-server-local #DivRight>.chat-head>.chat-name {
        max-width: calc(100% - 240px) !important;
    }
}

@media only screen and (max-width: 350px) {

    .wrap>#DivRight,
    .wrap>#DivRightInfo {
        zoom: 0.5;
    }

    #emos>div>div {
        width: 100vw;
        zoom: 1.98;
    }
}

#DivRight>.chat-head>.chat-name {
    max-width: calc(100% - 435px);
}

body.chat-selected-server-local #DivRight>.chat-head>.chat-name {
    max-width: calc(100% - 350px);
}

.color-1 {
    color: #06cf9c !important
}

.color-2 {
    color: #ffd279 !important
}

.color-3 {
    color: #e26ab6 !important
}

.color-4 {
    color: #a5b337 !important
}

.color-5 {
    color: #fc9775 !important
}

.color-6 {
    color: #53a6fd !important
}

.color-7 {
    color: #ffbc38 !important
}

.color-8 {
    color: #25d366 !important
}

.color-9 {
    color: #a791ff !important
}

.color-10 {
    color: #f15c6d !important
}

.color-11 {
    color: #7f66ff !important
}

.color-12 {
    color: #42c7b8 !important
}

.color-13 {
    color: #02a698 !important
}

.color-14 {
    color: #d88deb !important
}

.color-15 {
    color: #fa6533 !important
}

.color-16 {
    color: #ff72a1 !important
}

.color-17 {
    color: #53bdeb !important
}


body.noStt #modalCRM .crm-div-stt,
body.noStt #modalCRM #sendSTT {
    display: none !important;
}

#modalCRM .crm-div-stt.grabando i.fa-stop-circle,
#modalCRM .crm-div-stt.grabando #crm-stt-preview,
#modalCRM .crm-div-stt.grabando span {
    display: initial;
}

#modalCRM .crm-div-stt.grabando i.fa-user-headset,
#modalCRM .crm-div-stt #crm-stt-preview {
    display: none;
}

#modalCRM .crm-div-stt i {
    cursor: pointer;
    font-size: 25px;
}

#modalCRM .crm-div-stt i.fa-stop-circle {
    color: #f44336;
    display: none;
}

#modalCRM .crm-div-stt span {
    font-size: 13px;
    vertical-align: text-bottom;
    display: inline-block;
    margin-left: 5px;
    animation: fadeIn ease 1s infinite;
    display: none;
}

#modalCRM .crm-div-stt div {
    font-size: 14px;
    opacity: 0.9;
}

@keyframes fadeIn {
    50% {
        opacity: 0.4;
    }
}

#divBotConf {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    z-index: 1;
    overflow: hidden;
}

#divBotConf>div {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    align-content: stretch;
    flex-wrap: nowrap;
}

#dbcLeft {
    width: 80%;
    border: 1px solid red;
    height: 100vh;
}

#dbcCfg {
    height: 70vh;
}

#dbcSession {
    height: 30vh;
}

#dbcRight {
    height: 100vh;
    width: 20%;
    border: 1px solid blue;
}

#dbcHistory {
    height: calc(100vh - 160px);
    overflow-y: auto;
    overflow-x: hidden;
}

#dbc_Input {
    width: 100%;
    height: 30px;
}

#dbcRight input {
    min-width: 70%;
}

#tableNotList {
    width: 100%;
    white-space: nowrap;
}

#tableNotList>thead>tr>th:first-child {
    width: 10%;
}

#tableNotList td {
    vertical-align: top;
}

#tableNotList tr:hover {
    background-color: #ededed;
}

#myTeam {
    width: 100%;
    height: 100%;
    background: #000;
    color: #fff;
    user-select: none;
}

#myTeam h4 {
    padding: 10px;
    font-size: 20px;
    border-bottom: 1px solid #fff;
}

#myTeam h4 i {
    cursor: pointer;
    font-size: 24px;
    float: right;
    line-height: 25px;
    opacity: 0.7;
}

#myTeam h4 i:hover {
    opacity: 1;
}

#myTeam h4 i:last-child {
    font-size: 20px;
    margin-right: 15px;
}

#myTeam>div {
    overflow: auto;
    height: calc(100% - 105px);
}

#myTeam .myTeamUser {
    padding: 10px;
    border-bottom: 1px solid #ffffff70;
}

#myTeam .myTeamUserDetails {
    cursor: pointer;
}

#myTeam .myTeamUnread {
    float: right;
}

#myTeam .myTeamUnread small {
    color: #9d9d9d;
    margin-right: 5px;
    font-size: 12px;
    vertical-align: middle;
}

#myTeam .myTeamUser>.myTeamChats {
    display: none;
    font-size: small;
    margin-left: 15px;
    margin-right: 20px;
}

#myTeam .myTeamUser>.myTeamChats>a {
    display: block;
}

#myTeam .myTeamUser>.myTeamChats>a>small {
    float: right;
}

#myTeam .myTeamUser.myTeamOpen>.myTeamChats {
    display: block;
}

#myTeam .myTeamState {
    color: #4caf50;
    font-size: 11px;
}

#myTeam .myTeamInactive .myTeamUserName,
#myTeam .myTeamOffline .myTeamState {
    color: #f44336;
}



#DivLeft.selecting>.wrap-search,
#DivLeft.selecting>.wrap-filter {
    display: none !important;
}

#DivLeft>.wrap-mselect {
    width: 100%;
    height: 100px;
    background: var(--bg-color2);
    align-items: center;
    border-bottom: 1px solid #4a4a4a;
    display: none;
    padding: 10px;
    color: #fff;
}

#DivLeft.selecting>.wrap-mselect {
    display: block;
}

#DivLeft #divContactList>.selected {
    background-color: #465a64 !important;
}

#DivLeft>.wrap-mselect>div {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: nowrap;
    text-align: center;
    height: 35px;
}

#DivLeft>.wrap-mselect>div>i {
    cursor: pointer;
}

#DivLeft>.wrap-mselect>div>i.disabled {
    cursor: not-allowed;
    opacity: 0.3;
}