.ug-conversation-panel__minifilter {display:flex; height:2.3rem; width:100%; gap:10px; padding:5px; span {width:49%; height:100%; align-content:center; text-align:center; border-radius:5px; border:0.5px solid #f7d6ff; user-select:none; cursor:pointer; font-size:0.8rem; font-weight:600; color:blueviolet; transition:background-color 0.6s linear}
}
.ug-conversation-panel__minifilter span[ug-state="selected"] {background-color: rgb(118 0 245); color:white; box-shadow: inset -10px -10px 15px rgba(255, 255, 255, 0.5), inset 10px 10px 15px rgba(70, 70, 70, 0.12);}
.ug-load-effect {background:#eee; background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#e6cbf9 33%); animation:1.5s shine linear infinite; background-size:200% 100%}
.ug-chats-more-button[ug-state="disabled"] {background:#eee; background:linear-gradient(110deg,#ececec 8%,#f5f5f5 18%,#e6cbf9 33%); animation:1.5s shine linear infinite; background-size:200% 100%}
.ug-conversation-panel__chats::-webkit-scrollbar {width:5px}
.ug-conversation-panel__chats::-webkit-scrollbar-track {background:#a5a5a5}
.ug-conversation-panel__chats::-webkit-scrollbar-thumb {background-color:#002effb3; border-radius:10px; border:1px solid #a5a5a5}
.ug-small-headbutton {height:2rem; width:2rem; background-position:center; background-repeat:no-repeat; background-size:80%; cursor:pointer; transition:background-color 0.6s linear; border-radius:5px}
.ug-small-headbutton:hover {background-color:#6e85ff3d}
.ug-small-headbutton:active {background-color:#6e85ff85}
.ug-chats-userselector_container {width:100%; height:100%; display:flex; flex-direction:column; gap:10px; align-items:center}
.ug-chats-userselector_input {height:2rem; padding-left:15px; outline:none; border:1px solid #df66ff; border-radius:5px; width:100%}
.ug-chats-userselector_input:active {outline:none}
.ug-chats-userselector_input:focus {outline:none}
.ug-chats-userselector_wrapper {height:calc(100% - 3rem); width:100%; overflow-y:scroll}
.ug-chats-userselector_apply {font-weight:600; background-color:rgba(202,0,255,0.6); border-radius:5px; border:none; height:2rem; color:white; padding:0 15px; width:95%; align-content:center; cursor:pointer}
.ug-userselector-item {width:100%; height:3rem; display:flex; padding:5px; user-select:none; cursor:pointer; transition:background-color 0.6s linear; img {height:40px; border-radius:50%; width:40px; object-fit:cover}
}
.ug-userselector-item:hover {background-color:#e2c4ff}
.ug-userselector-item[ug-user-state="current"] {background-color:antiquewhite}
.ug-userselector-item_nm {display:flex; flex-direction:column; justify-content:center; align-items:flex-end; height:100%; width:calc(100% - 3rem); overflow:hidden}
.ug-userselector-item_nm_full {font-weight:600; font-size:0.9rem}
.ug-userselector-item_nm_office {font-size:0.7rem}
.ug-chats-socket-operation {display:none; position:absolute; bottom:45%; left:40%; z-index: 5; background:linear-gradient(88deg,rgba(75,106,255,0.8) 0,rgba(202,0,255,0.6) 100%); width:300px; padding:20px; justify-content:center; align-items:center; gap:10px; border-radius:20px; color:white; img {height:2rem}
}
.ug-chats-container {width: 100%; margin:auto; height: calc(100vh - 150px); padding:5px 30px 5px 30px; position:relative; overflow:hidden; display:flex; padding-right:0}
.ug-chats-source-filter {position:absolute; left:0; top:0; width:30px; height:100%; display:flex; flex-direction:column; padding:1px; gap:1px; background-color:#f9f9f9}
.ug-source-filter__item {width:100%; height:50px; background-color:white; border-radius:5px; display:flex; justify-content:center; align-items:center; padding:5px; border:1px solid #b3b3b3; cursor:pointer; transition:background-color 0.7s linear; flex-direction:column; gap:1px; position:relative; box-shadow:inset -10px -10px 15px rgba(255,255,255,0.5),inset 10px 10px 15px rgba(70,70,70,0.12); img {width:100%}
 span {color:#ffffff; font-size:11px; border-radius:50%; background-color:#ff0000a1; width:1rem; height:1rem; text-align:center; font-weight:600; position:absolute; bottom:3px; right:-7px}
}
.ug-chats-conversation-panel {max-width:400px; height:100%; min-width:390px; display:flex; flex-direction:column; padding:5px}
.ug-conversation-panel__head {width:100%; position:relative}
.ug-source-filter__item:active {background-color:#c378ffab}
.filter_item__active {border-color:#3a94ff; background-color:#78b5ffab}
#ug-conversation-panel_input {height:2.3rem; width:100%; border-radius:5px;border: 2px solid rgb(184 118 255); padding-left:15px; font-family:inherit}
#ug-conversation-panel_input:active { -webkit-box-shadow:0 3px 8px -4px rgba(202,0,255,0.7); -moz-box-shadow:0 3px 8px -4px rgba(202,0,255,0.7); box-shadow:0 3px 8px -4px rgba(202,0,255,0.7)}
#ug-conversation-panel_input:focus { outline:none; -webkit-box-shadow:0 3px 8px -4px rgba(202,0,255,0.7); -moz-box-shadow:0 3px 8px -4px rgba(202,0,255,0.7); box-shadow:0 3px 8px -4px rgba(202,0,255,0.7)}
.ug-conversation-panel_multibutton {position:absolute; height:60%; top:0.5rem; right:5px; cursor:pointer; border:0 solid transparent; border-radius:50%; transition:all 0.5s linear; display:none; box-shadow:inset -10px -10px 15px rgba(255,255,255,0.5),inset 10px 10px 15px rgba(70,70,70,0.12); img {height:100%; transition:all 0.5s linear}
}
.ug-conversation-panel__chats {width:100%; padding:5px; display:flex; flex-direction:column; gap:10px; -webkit-box-shadow:4px 0 4px -4px rgba(202,0,255,0.52); -moz-box-shadow:4px 0 4px -4px rgba(202,0,255,0.52); box-shadow:4px 0 4px -4px rgba(202,0,255,0.52); height:calc(98% - 2.7rem); border-radius:0 5px 5px 0; overflow-x:hidden; overflow-y:auto}
.ug-chats-item {width:100%; min-height:8rem; max-height:8rem; border-radius:5px; border:1px solid #ca00ff1a; transition:background-color 0.5s linear; display:flex; position:relative}
.ug-chats-item__statusSide {display:flex; flex-direction:column; height:98%; width:1.5rem; transform:rotate(180deg); margin-left:5px}
.ug-chats-item__statusSide-counter {width:100%; height:1.5rem; text-align:center; transform:rotate(-180deg); background-color:#002effb3; color:white; align-content:center; border-radius:50%; user-select:none}
.ug-chats-item__statusSide-date {font-family:inherit; writing-mode:vertical-rl; height:calc(100% - 1.5rem); text-align:center; font-size:0.6rem; font-weight:400; color:#007bff; user-select:none}
.ug-chats-item__statusSide-counter {width:100%; height:1.5rem; transition:opacity 1s linear}
.ug-chats-item__infoside {width:calc(98% - 1.5rem); display:flex; flex-direction:column; padding:5px; gap:5px}
.ug-upload-wrapper {display:flex; flex-direction:column; justify-content:space-around; align-items:center; height:100%; width:100%; gap:10px}
.ug-attach-upload_label-main {width:100%; height:100%; display:flex; flex-direction:column; cursor:pointer; gap:10px; overflow:hidden; span {text-align:center; color:#7e4c93}
 img {height:69%; opacity:0.7; object-fit:contain; transition:opacity 0.7s linear}
}
.ug-attach-upload_label-main img:hover {opacity:1}
.ug-attach-upload_send {font-weight:600; background-color:rgba(202,0,255,0.6); border-radius:5px; border:none; height:2rem; color:white; padding:0 15px; width:75%; align-content:center; bottom:10px; position:absolute; cursor:pointer; transition:background-color 0.6s linear}
.ug-attach-upload_send[ug-state="disabled"] {cursor:not-allowed; background-color:rgb(179 179 179 / 60%)}
.ug-chats-more-button {display:flex; justify-content:center; padding:5px 0; background:linear-gradient(88deg,rgba(75,106,255,0.8) 0,rgba(202,0,255,0.6) 100%); color:white; border-radius:5px; cursor:pointer; user-select:none}
.ug-no-more-items {text-align:center; background-color:#cfcfcf; padding:5px; border-radius:5px; color:white; user-select:none}
.ug-chats-item:hover {border:1px solid #ca00ff1a}
.ug-chats-item[ug-state="active"] {-webkit-box-shadow:-9px 0 8px -4px rgb(75,106,255) inset; -moz-box-shadow:-9px 0 8px -4px rgb(75,106,255) inset; box-shadow:-9px 0 8px -4px rgb(75,106,255) inset; background-color:#7a90ff1a}
.ug-chats-item[ug-state-read="unread"] {-webkit-box-shadow:-9px 0 8px -4px rgba(202,0,255,0.52) inset; -moz-box-shadow:-9px 0 8px -4px rgba(202,0,255,0.52) inset; box-shadow:-9px 0 8px -4px rgba(202,0,255,0.52) inset; background-color:#eeaeff1a}
.ug-chats-infoside_toparea,.ug-chats-infoside_bottomarea {width:100%; height:49%}
.ug-chats-infoside_bottomarea {width:100%; height:49%; overflow:hidden; font-size:0.7rem; color:#797879; padding:5px; user-select:none; align-content:end}
.ug-chats-infoside_toparea {display:flex; gap:5px}
.ug-infoside-avatars-wrapper,.ug-infoside-name-wrapper {width:49%; height:100%}
.ug-infoside-avatars-wrapper {display:flex; gap:5px; overflow:hidden; align-items:center; img {max-width:2.5rem; min-height:2.5rem; border-radius:50%; object-fit:cover; min-width:2.5rem; max-height:2.5rem; border:1px solid #e47fff}
}
.ug-systemmess-big {max-width:5rem !important; min-height:5rem !important; min-width:5rem !important; max-height:5rem !important; border:none !important; border-radius:unset !important; position:absolute; z-index:1; top:5px; opacity:0.5; right:10px}
.ug-infoside-name-wrapper {font-size:0.8rem; display:flex; flex-direction:column; color:#30025b; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; h5 {margin:5px 0; user-select:none}
 span {user-select:none}
}
.ug-chats-writearea {height:100%; width:100%; border-radius:10px; display:flex; flex-direction:column; gap:10px; padding:6px; position:relative; background-color:#000bff0a; transition:transform 0.2s linear}
.ug-chats-writearea_head {width:100%; height:2.3rem; background-color:white; border-radius:5px; display:flex; gap:20px; align-items:center; justify-content:flex-end; padding:0 15px}
.ug-chats-writearea_head_bringback {font-weight:600; background-color:rgba(202,0,255,0.6); border-radius:5px; border:none; height:90%; color:white; padding:0 15px}
.ug-chats-writearea_body {width:100%; height:calc(100% - 7rem); display:flex; flex-direction:column; gap:10px; overflow-x:hidden; transition:opacity 0.5s linear}
.ug-chats-writearea_body::-webkit-scrollbar {width:5px}
.ug-chats-writearea_body::-webkit-scrollbar-track {background:#a5a5a5}
.ug-chats-writearea_body::-webkit-scrollbar-thumb {background-color:#002effb3; border-radius:10px; border:1px solid #a5a5a5}
.ug-chats-body__line {display:flex; width:100%}
.line-in-right {justify-content:end; padding-right:5px}
.line-in-left {justify-content:start}
.line-in-center {justify-content:center}
.avatar-line {img {width:2rem; height:2rem; border-radius:50%}
}
.ug-chat-button {cursor:pointer; background-color:#d5d5d5; text-align:center; padding:5px 15px; border-radius:15px; color:white; transition:background-color 0.5s linear}
.ug-chat-button:hover {background-color:#002effb3}
.with-image {img {height:10rem; cursor:pointer}
}
.ug-chats-systemmessage {display:flex; flex-direction:column; gap:10px; max-width:60%; padding:10px; background:linear-gradient(88deg,rgba(75,106,255,0.8) 0,rgba(202,0,255,0.6) 100%); color:white; border-radius:15px; img {width:100%; max-height:20vh; object-fit:cover}
 span {width:100%}
}
.ug-chats-message-container {display:flex; min-width:150px; max-width:60%; min-height:3rem; padding:12px 12px 15px 12px; border-radius:15px; background-color:white; flex-direction:column; gap:5px; position:relative}
.ug-message-time {position:absolute; bottom:1px; font-size:0.7rem; right:10px}
.message-right-style {span {overflow:hidden}
}
.message-left-style {span {overflow:hidden}
}
.ug-chat-date {padding:5px 15px; background-color:#ebe4ed; font-size:0.7rem; opacity:0.8; border-radius:10px; font-weight:600; user-select:none}
.ug-chat-warnings {padding:20px 20px; background-color:white; font-size:0.8rem; opacity:0.9; border-radius:10px; user-select:none; -webkit-box-shadow:0 0 15px 0 rgba(255,75,75,0.59); -moz-box-shadow:0 0 15px 0 rgba(255,75,75,0.59); box-shadow:0 0 15px 0 rgba(255,75,75,0.59); text-align:center; background:#4B6AFF; background:linear-gradient(88deg,rgba(75,106,255,0.8) 0,rgba(202,0,255,0.6) 100%); color:white}
.ug-chats-writearea_footer {width:calc(100% - 12px); height:2.5rem; background-color:white; border-radius:5px; box-shadow:3px 6px 15px 0 rgba(75,106,255,0.59); position:absolute; bottom:20px; left:6px; display:flex; align-items:end; transition:height 0.1s linear}
.ug-chats-sender {height:100%; width:calc(100% - 5rem); border-radius:5px; outline:none; border:none; padding:5px 0px 5px 15px; resize:none; transition:height 0.1s linear}
.ug-chats-button-attach,.ug-chats-button-send {width:2.5rem; height:2.5rem; background-position:center; background-repeat:no-repeat; background-size:cover; opacity:0.5; transition:opacity 0.5s linear; cursor:pointer}
.ug-chats-button-attach {background-image:url(/resources/img/chats/ug-chats-attach.svg); background-size:60%}
.ug-chats-button-send {background-image:url(/resources/img/chats/ug-chats-send.svg)}
.ug-chats-button-send:hover,.ug-chats-button-attach:hover {opacity:0.8}
.ug-chats-button-send:active. .ug-chats-button-attach:hover {opacity:1}
.ug-conversation-panel__chats_default {display:flex; flex-direction:column; width:100%; height:100%; justify-content:center; align-items:center; h2 {text-align:center; color:#4b6affa3}
}
.ug-chats-modal-background {width:100%; height:100%; top:0; left:0; display:none; justify-content:center; align-items:center; position:absolute; z-index:1}
.ug-chats-modal-container {display:flex; flex-direction:column; width:400px; height:500px; background-color:white; border-radius:15px; padding:3rem 10px 10px 10px; position:relative}
.ug-chats-modal-container_closer {font-weight:600; background-color:rgba(202,0,255,0.6); border-radius:5px; border:none; height:2rem; color:white; padding:0 15px; width:min-content; align-content:center; top:10px; position:absolute; right:10px; cursor:pointer}
@media (min-width:300px) and (max-width:400px) {.ug-chats-writearea_head {justify-content:space-between; gap:10px}
 .ug-chats-writearea {display:none; height:calc(100% - 1rem)}
 .ug-chats-socket-operation {bottom:2rem; left:unset; width:94%; z-index:3}
 .ug-chats-modal-container {width:90%}
 .ug-chats-systemmessage,.ug-chats-message-container {max-width:75%; font-size:1.1rem}
 .ug-chats-systemmessage,.ug-chat-warnings {max-width:98%}
 .ug-conversation-panel__chats {-webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none}
 .ug-chats-writearea_footer {bottom:0; left:0; width:100%}
 .ug-chats-conversation-panel {margin-top:5px; padding:0 3px}
 .ug-chats-conversation-panel {width:100%; max-width:unset; border:none; height:100%; overflow:hidden; min-width:300px}
 .ug-chats-container {padding:0; padding-top:2.5rem; justify-content:center}
 .ug-chats-source-filter {flex-direction:row; width:100%; height:2.5rem}
 .ug-source-filter__item {width:65px; height:100%; flex-direction:row; box-shadow:inset -10px -10px 15px rgba(255,255,255,0.5),inset 10px 10px 15px rgba(70,70,70,0.12); img {height:100%; width:auto}
 span {bottom:unset; right:1px; top:1px}
 }
}
@media (min-width:400px) and (max-width:500px) {.ug-chats-writearea {display:none; height:calc(100% - 1rem)}
 .ug-chats-writearea_head {justify-content:space-between; gap:10px}
 .ug-chats-modal-container {width:90%}
 .ug-chats-socket-operation {bottom:2rem; left:unset; width:94%; z-index:3}
 .ug-chats-systemmessage,.ug-chats-message-container {max-width:75%; font-size:1.1rem}
 .ug-chats-systemmessage,.ug-chat-warnings {max-width:98%}
 .ug-conversation-panel__chats {-webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none}
 .ug-chats-writearea_footer {bottom:0; left:0; width:100%}
 .ug-chats-conversation-panel {margin-top:5px; padding:0 3px; max-width:unset}
 .ug-chats-conversation-panel {width:100%; border:none; height:100%; overflow:hidden; min-width:300px}
 .ug-chats-container {padding:0; padding-top:2.5rem; justify-content:center}
 .ug-chats-source-filter {flex-direction:row; width:100%; height:2.5rem}
 .ug-source-filter__item {width:65px; height:100%; flex-direction:row; box-shadow:inset -10px -10px 15px rgba(255,255,255,0.5),inset 10px 10px 15px rgba(70,70,70,0.12); img {height:100%; width:auto}
 span {bottom:unset; right:1px; top:1px}
 }
}