/* CHAT BOX */
section#wch-box {padding-left:0;padding-right:0;}
section#wch-box[data-theme="bender"] {padding:0;}
.wch-chat-box {width:100%;display:inline-flex;clear:both;position:relative;border-radius:4px;margin:10px 0 24px 0;flex-direction: column; align-items: stretch;border:1px solid #ccc;background:#fff;padding:3px;}
.wch-chat-box[data-theme="bender"], .wch-chat-box[data-theme="bender"] * {box-sizing:border-box;}
.wch-chat-box .wch-toolbars > div, .wch-chat-box .wch-messages > div, .wch-chat-box .wch-forms > div {display:none;width:100%;}
.wch-chat-box .wch-toolbars > div.wch-active, .wch-chat-box .wch-messages > div.wch-active, .wch-chat-box .wch-forms > div.wch-active {display:flex;}
.wch-chat-box.wch-is-fullscreen {position:fixed;z-index:9950;top:0;left:0;right:0;bottom:0;border:none;border-radius:0;margin:0;}
.wch-chat-box.wch-is-fullscreen .wch-messages .wch-message {height:calc(100vh - 144px)!important;}
body.osc-has-admin-header .wch-chat-box.wch-is-fullscreen {top:34px;}
body.osc-has-admin-header .wch-chat-box.wch-is-fullscreen .wch-messages .wch-message {height:calc(100vh - 178px)!important;}
body.wch-body-is-fullscreen {overflow:hidden;}


/* WINDOW ACTIONS */
.wch-window {display:flex;flex-direction: row; flex-wrap: nowrap;align-items: center;width:70px;position:absolute;right:3px;top:3px;z-index:4;height:34px;justify-content: flex-end;box-shadow: -3px 0 4px #fff;}
.wch-window a {width:34px;height:34px;border-radius:5px;display:flex;justify-content: center; align-items: center;transition:0.2s;}
.wch-window a svg {height:18px;fill:#9d9d9d;transition:0.2s;}
.wch-window a svg.wch-close-fullscreen {height:20px;}
.wch-window a:hover svg {fill:#3d3d3d;}
.wch-chat-box:not(.wch-is-fullscreen) a svg.wch-close-fullscreen {display:none;}
.wch-chat-box.wch-is-fullscreen .wch-window a svg.wch-open-fullscreen {display:none;}


/* CHANNELS */
.wch-channels {margin:0!important;display:flex;flex-direction: row; flex-wrap: nowrap;align-items: stretch;width:calc(100% - 70px);scrollbar-width:thin;overflow-y:hidden;overflow-x:auto;position:relative;scrollbar-width: none;}
.wch-channels::-webkit-scrollbar {display:none;}
.wch-channels .wch-channel {position:relative;z-index:3;display:flex;align-items: center; flex-direction: row; flex-wrap: nowrap;white-space:nowrap;font-size:14px;line-height:18px;font-weight:600;cursor:pointer;color:#2d2d2d;padding:10px 12px;border-bottom:2px solid transparent;margin:0 1px 0 0;background:#fff;transition:0.2s;}
.wch-channels .wch-channel:first-child {border-radius:4px 0 0 0;}
.wch-channels .wch-channel:last-child {border-radius:0 4px 0 0;}
.wch-channels .wch-channel.wch-active {font-weight:bold;background:#e4e4e4;color:#000;}
.wch-channels .wch-channel:hover {background:#e4e4e4;}
.wch-channels .wch-channel .wch-count {background: #e30000; color: #fff; padding: 2px 4px; font-size: 11px; line-height: 13px; min-width: 17px; border-radius: 100px; margin-left: 4px;display: inline-block; text-align: center; font-style: normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}


/* TOOLBAR */
.wch-toolbars .wch-toolbar {display:flex;flex-direction: row; align-items: stretch;width:100%;color:#3d3d3d;padding:10px 12px 10px 12px;border-top:2px solid #e0e0e0;margin-top:-2px;border-bottom:1px solid #ccc;font-size:13px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wch-toolbars .wch-toolbar > div {display:inline-block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wch-toolbars .wch-toolbar .wch-ban-info {color:red;}


/* MESSAGES */
.wch-messages .wch-message {display:flex;flex-direction: column;position:relative; align-items: stretch;width:100%;font-size:14px;line-height:16px;height:400px;overflow-y:scroll;scrollbar-width:thin;}
.wch-messages .wch-message:empty:before {content:attr(data-empty);position:absolute;top:calc(50% - 10px);left:0;width:100%;text-align:center;font-size:18px;line-height:20px;color:#999;font-style:italic;}
.wch-message .wch-row {display:flex;flex-direction: row; align-items: stretch;position:relative;width:100%;color:#2d2d2d;padding:10px 12px;border-bottom:1px solid #eee;}
.wch-message .wch-row:last-child {border-bottom:none;}
.wch-message .wch-row.wch-highlight {background:#eff6e6;}
.wch-message .wch-row:hover {background:#f8f8f8;}
.wch-message .wch-row .wch-user {width:200px;min-width:200px;position:relative;padding:2px 5px 2px 42px;min-height:32px;display: flex ; flex-direction: column; align-items: flex-start;}
.wch-message .wch-row .wch-user-img {position:absolute;top:0;left:0;width:34px;height:34px;}
.wch-message .wch-row .wch-user-img > img {position:absolute;top:0;left:0;width:34px;height:34px;object-fit:cover;border-radius:6px;border:0.6px solid #ccc;}
.wch-message .wch-row.wch-banned .wch-user-img:before {position:absolute;content:"!";font-size:11px;font-weight:bold;line-height:14px;text-align:center;color:#750000;box-shadow:0 1px 3px rgba(0,0,0,0.25);width:14px;height:14px;background:#d80000;border-radius:100px;z-index:2;top:-2px;left:-2px;}
.wch-message .wch-row a.wch-user-name {font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1d1d1d;text-decoration:none;}
.wch-message .wch-row a.wch-user-name:hover {color:#000;text-decoration:underline;}
.wch-message .wch-row .wch-date {font-size:11px;color:#999;line-height:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wch-message .wch-row .wch-text {width:calc(100% - 200px);font-size:15px;display: flex ; align-items: center;white-space:pre-wrap;}
.wch-message .wch-row.wch-banned .wch-user-img > img, .wch-message .wch-row.wch-banned .wch-user-name, .wch-message .wch-row.wch-banned .wch-date {opacity:0.5;}
.wch-message .wch-row .wch-opts {position:absolute;border-radius: 6px 0 0 6px;padding:0 6px;right:0;width:auto;top:0;height:100%;display:none;flex-direction: row;align-items: center;background:#fff;box-shadow:-2px 0 4px rgba(0,0,0,0.2);}
.wch-message .wch-row:hover .wch-opts {display:flex;}
.wch-message .wch-row .wch-opts a {display:flex;flex-direction: column;text-decoration:none;margin:0 4px;padding:4px;font-size:11px;line-height:13px;font-weight:normal;color:#4d4d4d;transition:0.2s;}
.wch-message .wch-row .wch-opts a svg {height:14px;fill:#8d8d8d;margin:2px 0;}
.wch-message .wch-row .wch-opts a:hover {color:var(--mb-color-primary, #174eef);text-decoration:none;}
.wch-message .wch-row .wch-opts a:hover svg {fill:var(--mb-color-primary, #174eef);}


/* FORM */
.wch-forms .wch-form {display:block;width:100%;padding:12px;border-top:1px solid #ccc;background:#f6f6f6;border-radius:0 0 4px 4px;}
.wch-forms .wch-form > .wch-wrap {display:flex;flex-direction: row; align-items: stretch;width:100%;position:relative;padding:0 0 0 32px;min-height:36px;}
.wch-forms .wch-form button {display:flex;flex-direction: row; flex-wrap: nowrap;align-items: center; justify-content: center;white-space:nowrap;min-width:120px;width:120px;height:32px;background:var(--mb-color-primary, #174eef);color:#fff;font-size:14px;line-height:16px;border-radius:6px;padding:8px 8px;text-align:center;border:none;font-weight:600;transition:0.2s;margin:2px 0;}
.wch-chat-box[data-theme="bender"] .wch-forms .wch-form button {color:#fff!important;}
.wch-forms .wch-form button:hover {background:var(--mb-color-primary-hover, #1446d9);color:#fff;}
.wch-forms .wch-form button.wch-loading {background:var(--mb-color-primary, #174eef);color:#fff;opacity:0.5;cursor:loading;}
.wch-forms .wch-form button.wch-loading svg {display:none;}
.wch-forms .wch-form button svg {fill:#fff;height:13px;margin-left:6px;}
.wch-forms .wch-form .wch-input-box {width:100%;padding:0 10px;position:relative;}
.wch-forms .wch-form .wch-input-box .wch-input-error {font-size: 14px; font-weight: 600; display: none; float: left; clear: both; color: #e60000; position: absolute; bottom: 100%; margin: 6px 10px; width: auto; max-width: calc(100% - 20px); left: 0; padding: 10px 12px; background: #fff; border: 1px solid #ccc; border-left: 3px solid #e60000; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); border-radius: 6px; line-height: 16px;}
.wch-forms .wch-form .wch-input-box .wch-non-public {display:inline-flex;min-height:32px;margin-top:2px;padding:8px 10px;line-height:16px;background:#e2e2e2;border-radius:6px;font-size:14px;}
.wch-forms .wch-form textarea {height:36px;min-height:36px;max-height:98px;width:100%;font-size:15px;border:1px solid #ccc;background:#fff;padding:9px 10px;border-radius:6px;margin:0;line-height:16px;min-width:100%;max-width:100%;resize: none;scrollbar-width:thin;}
.wch-forms .wch-form .wch-inp:hover {border-color:#aaa;}
.wch-forms .wch-form .wch-inp:focus {border-color:var(--mb-color-primary, #174eef);}
.wch-forms .wch-form .wch-inp.wch-loading {opacity:0.7;cursor:default;border-color:#ccc!important;}
.wch-form .wch-user-img {position:absolute;top:2px;left:0;width:32px;height:32px;}
.wch-form .wch-user-img > img {position:absolute;top:0;left:0;width:32px;height:32px;object-fit:cover;border-radius:6px;border:0.6px solid #ccc;}


/* RESPONSIVE */
@media screen and (max-width: 767px) {
  .wch-message .wch-row .wch-user {width:160px;min-width:160px;}
  .wch-message .wch-row .wch-text {width:calc(100% - 160px);}
  .wch-forms .wch-form button {width:auto;min-width:auto;padding:8px 10px;}
  
  body.osc-has-admin-header .wch-chat-box.wch-is-fullscreen {top:46px;}
  body.osc-has-admin-header .wch-chat-box.wch-is-fullscreen .wch-messages .wch-message {height:calc(100vh - 190px);}
}

@media screen and (max-width: 420px) {
  .wch-message .wch-row {flex-direction: column;}
  .wch-message .wch-row .wch-user {width:100%;margin-bottom:10px;padding-top:0;padding-bottom:0;min-height:28px;padding-left:38px;}
  .wch-message .wch-row .wch-user-img, .wch-message .wch-row .wch-user-img > img {width:30px;height:30px;}
  .wch-message .wch-row .wch-text {width:100%;}
}

@media screen and (max-width: 390px) {
  .wch-form .wch-user-img {display:none;}
  .wch-forms .wch-form > .wch-wrap {padding:0;}
  .wch-forms .wch-form .wch-input-box {padding-left:0;}
}


/* RTL */
html[dir="rtl"] .wch-window  {left:3px;right:auto;box-shadow: 3px 0 4px #fff;}
html[dir="rtl"] .wch-message .wch-row .wch-opts {left:0;right:auto;border-radius:0 6px 6px 0;box-shadow:2px 0 4px rgba(0,0,0,0.2);}
html[dir="rtl"] .wch-message .wch-row .wch-user {padding-left:5px;padding-right:42px;}
html[dir="rtl"] .wch-message .wch-row .wch-user-img {right:0;left:auto;}
html[dir="rtl"] .wch-forms .wch-form > .wch-wrap {padding-left:0;padding-right:32px;}
html[dir="rtl"] .wch-form .wch-user-img {right:0;left:auto;}
html[dir="rtl"] .wch-forms .wch-form button svg {margin-left:0;margin-right:6px;}
html[dir="rtl"] .wch-channels .wch-channel .wch-count {margin-left:0;margin-right:4px;}



@media screen and (max-width: 420px) {
  html[dir="rtl"] .wch-message .wch-row .wch-user {padding-left:0;padding-right:38px;}

}

@media screen and (max-width: 390px) {
  html[dir="rtl"] .wch-forms .wch-form .wch-input-box {padding-right:0;padding-left:10px;}
}