/*
 * CHAT.devad.io direct white theme layer.
 * Session: cx759. Scope: WhatsApp-style white/green colors and selected
 * Microsoft Fluent side-menu SVG masks only.
 *
 * Scope:
 * - Keep the native Support Board layout, sizing, menu behavior, and dark-mode
 *   account-menu toggle.
 * - Apply the accepted WhatsApp-style white/green palette directly from code.
 * - Normalize only the main left navigation icons; no new buttons or layout.
 */

:root {
  --devad-wa-header: #075e54;
  --devad-wa-header-alt: #09856f;
  --devad-wa-send: #09856f;
  --devad-wa-send-hover: #0b6f62;
  --devad-wa-accent: #09856f;
  --devad-wa-accent-soft: #35b666;
  --devad-wa-outgoing: #dcf8c6;
  --devad-wa-incoming: #ffffff;
  --devad-wa-bg: #f0e9e3;
  --devad-wa-grey-bg: #f0f2f5;
  --devad-wa-white: #ffffff;
  --devad-wa-text: #111111;
  --devad-wa-muted: #667781;
  --devad-wa-divider: #e6e6e6;
  --devad-wa-focus: rgba(9, 133, 111, .18);
  --devad-rail-bg: #08271f;
  --devad-rail-bg-deep: #061b16;
  --devad-rail-hover: rgba(53, 182, 102, .12);
  --devad-rail-active: rgba(9, 133, 111, .28);
  --devad-rail-icon: #d7fff4;
  --devad-rail-icon-muted: #a9cfc5;
}

/* White mode surfaces: color only, no layout rebuild. */
.sb-main.sb-admin,
.sb-main.sb-admin > main {
  background-color: var(--devad-wa-bg) !important;
}

.sb-main:not(.sb-admin),
.sb-account-box.sb-admin,
.sb-account-box.sb-admin .sb-tab,
.sb-account-box.sb-admin .sb-content {
  background-color: var(--devad-wa-white) !important;
}

.sb-main.sb-admin .sb-board > .sb-admin-list,
.sb-main.sb-admin .sb-board .sb-user-details,
.sb-main.sb-admin .sb-area-conversations > div > .sb-admin-list,
.sb-main.sb-admin .sb-area-conversations > div > .sb-user-details,
.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area,
.sb-main.sb-admin .sb-board .sb-user-details .sb-scroll-area,
.sb-main.sb-admin .sb-area-conversations > div > .sb-admin-list .sb-scroll-area,
.sb-main.sb-admin .sb-area-conversations > div > .sb-user-details .sb-scroll-area {
  background-color: var(--devad-wa-white) !important;
}

.sb-main.sb-admin .sb-board .sb-conversation,
.sb-main.sb-admin .sb-area-conversations > div > .sb-conversation,
.sb-main.sb-admin .sb-board .sb-conversation .sb-list {
  background-color: var(--devad-wa-bg) !important;
}

.sb-main.sb-admin .sb-board > div > .sb-top,
.sb-main.sb-admin .sb-area-conversations > div > .sb-admin-list > .sb-top,
.sb-main.sb-admin .sb-area-conversations > div > .sb-conversation > .sb-top,
.sb-main.sb-admin .sb-area-conversations > div > .sb-user-details > .sb-top,
.sb-main.sb-admin > .sb-header,
.sb-account-box.sb-admin .sb-top-bar {
  background-color: var(--devad-wa-grey-bg) !important;
  border-color: var(--devad-wa-divider) !important;
}

.sb-main.sb-admin .sb-user-conversations > li,
.sb-main.sb-admin .sb-profile-list > ul > li,
.sb-main.sb-admin .sb-panel-details,
.sb-account-box.sb-admin .sb-tab,
.sb-account-box.sb-admin .sb-nav {
  border-color: var(--devad-wa-divider) !important;
}

.sb-main.sb-admin .sb-user-conversations > li:hover,
.sb-main.sb-admin .sb-user-conversations > li.sb-active,
.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li:hover,
.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li.sb-active {
  background-color: var(--devad-wa-grey-bg) !important;
  border-left-color: var(--devad-wa-accent) !important;
}

/* Text contrast. */
.sb-main.sb-admin,
.sb-main.sb-admin .sb-title,
.sb-main.sb-admin .sb-profile,
.sb-main.sb-admin .sb-profile .sb-name,
.sb-main.sb-admin .sb-profile span,
.sb-main.sb-admin .sb-top .sb-title,
.sb-main.sb-admin .sb-user-conversations > li .sb-name,
.sb-main.sb-admin .sb-user-conversations > li .sb-name span,
.sb-main.sb-admin .sb-profile-list > ul > li b,
.sb-main.sb-admin .sb-panel-details h3,
.sb-main.sb-admin .sb-board .sb-user-details h3,
.sb-main.sb-admin .sb-board .sb-user-details .sb-title,
.sb-account-box.sb-admin,
.sb-account-box.sb-admin h1,
.sb-account-box.sb-admin h2,
.sb-account-box.sb-admin h3 {
  color: var(--devad-wa-text) !important;
}

.sb-main.sb-admin .sb-user-conversations > li > div,
.sb-main.sb-admin .sb-user-conversations > li .sb-message,
.sb-main.sb-admin .sb-user-conversations > li small,
.sb-main.sb-admin .sb-list .sb-time,
.sb-main.sb-admin .sb-profile-list > ul > li > span,
.sb-main.sb-admin .sb-board .sb-user-details .sb-profile-list > ul > li > span,
.sb-main.sb-admin .sb-board .sb-user-details p,
.sb-main.sb-admin .sb-text-gray,
.sb-account-box.sb-admin p,
.sb-account-box.sb-admin .sb-text-gray {
  color: var(--devad-wa-muted) !important;
}

/* WhatsApp-style message colors without changing bubble geometry. */
.sb-main.sb-admin .sb-list > div:not(.sb-right):not(.sb-label-date) {
  background-color: var(--devad-wa-incoming) !important;
  color: var(--devad-wa-text) !important;
}

.sb-main.sb-admin .sb-list > div.sb-right,
.sb-main.sb-admin .sb-list > div.sb-right.sb-rich-cnt .sb-text,
.sb-main.sb-admin .sb-list > div.sb-right .sb-rich-message:not(.sb-rich-list) input,
.sb-main.sb-admin .sb-list > div.sb-right .sb-rich-message:not(.sb-rich-list) textarea,
.sb-main.sb-admin .sb-list > div.sb-right .sb-rich-message:not(.sb-rich-list) select {
  background-color: var(--devad-wa-outgoing) !important;
  border-color: rgba(9, 133, 111, .30) !important;
}

.sb-main.sb-admin .sb-list > div .sb-message,
.sb-main.sb-admin .sb-list > div .sb-message a,
.sb-main.sb-admin .sb-list .sb-message-attachments a,
.sb-main.sb-admin .sb-list > div.sb-right .sb-message,
.sb-main.sb-admin .sb-list > div.sb-right .sb-message a,
.sb-main.sb-admin .sb-list > div.sb-right .sb-rich-message .sb-text,
.sb-main.sb-admin .sb-list > div.sb-right .sb-rich-message .sb-title {
  color: var(--devad-wa-text) !important;
}

.sb-main.sb-admin .sb-list > div.sb-label-date span,
.sb-main.sb-admin .sb-label-date-top span {
  background-color: #d9f1e4 !important;
  color: #1a1a1a !important;
}

.sb-main.sb-admin .sb-list > div.sb-label-date,
.sb-main.sb-admin .sb-label-date-top {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.sb-main.sb-admin .sb-editor,
.sb-main.sb-admin .sb-board .sb-conversation .sb-editor {
  background-color: var(--devad-wa-white) !important;
  border-color: var(--devad-wa-divider) !important;
}

.sb-main.sb-admin .sb-editor textarea,
.sb-main.sb-admin .sb-input > input,
.sb-main.sb-admin .sb-input > select,
.sb-main.sb-admin .sb-input > textarea,
.sb-account-box.sb-admin .sb-input > input,
.sb-account-box.sb-admin .sb-input > select,
.sb-account-box.sb-admin .sb-input > textarea {
  background-color: var(--devad-wa-white) !important;
  border-color: #dadce0 !important;
  color: var(--devad-wa-text) !important;
}

.sb-main.sb-admin .sb-input > input:focus,
.sb-main.sb-admin .sb-input > input.sb-focus,
.sb-main.sb-admin .sb-input > select:focus,
.sb-main.sb-admin .sb-input > select.sb-focus,
.sb-main.sb-admin .sb-input > textarea:focus,
.sb-main.sb-admin .sb-input > textarea.sb-focus,
.sb-main.sb-admin .sb-setting input:focus,
.sb-main.sb-admin .sb-setting select:focus,
.sb-main.sb-admin .sb-setting textarea:focus,
.sb-account-box.sb-admin .sb-input > input:focus,
.sb-account-box.sb-admin .sb-input > textarea:focus {
  border-color: var(--devad-wa-header-alt) !important;
  box-shadow: 0 0 0 2px var(--devad-wa-focus) !important;
}

/* Green actions and old blue cleanup. */
.sb-main.sb-admin .sb-btn,
.sb-main.sb-admin a.sb-btn,
.sb-account-box.sb-admin .sb-btn,
.sb-account-box.sb-admin a.sb-btn {
  background-color: var(--devad-wa-send) !important;
  border-color: var(--devad-wa-send) !important;
  color: #ffffff !important;
}

.sb-main.sb-admin .sb-btn:not(.sb-loading):hover,
.sb-main.sb-admin a.sb-btn:not(.sb-loading):hover,
.sb-account-box.sb-admin .sb-btn:not(.sb-loading):hover,
.sb-account-box.sb-admin a.sb-btn:not(.sb-loading):hover {
  background-color: var(--devad-wa-header-alt) !important;
  border-color: var(--devad-wa-header-alt) !important;
  color: #ffffff !important;
}

.sb-main.sb-admin .sb-btn-text,
.sb-main.sb-admin a.sb-btn-text,
.sb-account-box.sb-admin .sb-btn-text,
.sb-account-box.sb-admin a.sb-btn-text,
.sb-main.sb-admin .sb-search-btn i:hover,
.sb-main.sb-admin .sb-filter-btn i:hover,
.sb-main.sb-admin .sb-filter-btn.sb-active i,
.sb-main.sb-admin .sb-board .sb-conversation > .sb-top a:hover i,
.sb-main.sb-admin .sb-btn-icon:hover {
  color: var(--devad-wa-accent) !important;
  border-color: var(--devad-wa-accent) !important;
}

.sb-main.sb-admin .sb-switch input:checked + span,
.sb-main.sb-admin .sb-setting input[type="checkbox"]:checked:before,
.sb-main.sb-admin .sb-table input[type="checkbox"]:checked:before {
  background-color: var(--devad-wa-send) !important;
  border-color: var(--devad-wa-send) !important;
}

/* Account menu keeps the native Dark mode / Light mode item. */
.sb-main.sb-admin div ul.sb-menu,
.sb-main.sb-admin .sb-select ul,
.sb-main.sb-admin .sb-popup,
.sb-main.sb-admin .sb-menu-mobile > ul,
.sb-main.sb-admin .sb-menu-mobile .sb-mobile,
.sb-main.sb-admin > .sb-header .sb-account > div,
.sb-account-box.sb-admin div ul.sb-menu,
.sb-account-box.sb-admin .sb-select ul,
.sb-account-box.sb-admin .sb-popup {
  background-color: var(--devad-wa-white) !important;
  border-color: var(--devad-wa-divider) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
}

.sb-main.sb-admin div ul.sb-menu li,
.sb-main.sb-admin .sb-select ul li,
.sb-main.sb-admin .sb-menu-mobile .sb-mobile a,
.sb-account-box.sb-admin div ul.sb-menu li,
.sb-main.sb-admin div ul.sb-menu li a,
.sb-account-box.sb-admin div ul.sb-menu li a {
  color: var(--devad-wa-text) !important;
  border-color: transparent !important;
}

.sb-main.sb-admin div ul.sb-menu li:hover,
.sb-main.sb-admin .sb-select ul li:hover,
.sb-main.sb-admin .sb-menu-mobile .sb-mobile a:hover,
.sb-account-box.sb-admin div ul.sb-menu li:hover {
  background-color: #f5f5f5 !important;
  color: var(--devad-wa-accent) !important;
}

.sb-main.sb-admin .sb-header .sb-mobile .sb-version {
  display: none !important;
}

/* Conversation top action icons: remove base white fill behind mobile buttons. */
.sb-main.sb-admin .sb-menu-mobile > ul > li,
.sb-main.sb-admin .sb-menu-mobile > ul > li > a.sb-btn-icon,
.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-menu-mobile > ul > li,
.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-menu-mobile > ul > li > a.sb-btn-icon {
  background-color: transparent !important;
  box-shadow: none !important;
}

.sb-main.sb-admin .sb-menu-mobile > ul > li > a.sb-btn-icon:before,
.sb-main.sb-admin .sb-menu-mobile > ul > li > a.sb-btn-icon:after,
.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-menu-mobile > ul > li > a.sb-btn-icon:before,
.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-menu-mobile > ul > li > a.sb-btn-icon:after {
  background-color: transparent !important;
}

.sb-main.sb-admin .sb-menu-mobile > ul > li > a.sb-btn-icon:hover,
.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-menu-mobile > ul > li > a.sb-btn-icon:hover {
  background-color: rgba(9, 133, 111, .08) !important;
}

/* cx9f3a: conversation toolbar icons only. Keep Support Board geometry and handlers intact. */
.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-menu-mobile > ul > li > a.sb-btn-icon,
.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-menu-mobile > ul > li > a.sb-btn-icon:hover,
.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-menu-mobile > ul > li > a.sb-btn-icon.sb-active,
.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-menu-mobile > ul > li > a.sb-btn-icon.sb-btn-red {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #788087 !important;
}

.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-menu-mobile > ul > li > a.sb-btn-icon i:before {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  vertical-align: -3px !important;
  background-color: currentColor !important;
  font-family: initial !important;
  font-size: 0 !important;
  line-height: 1 !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-menu-mobile > ul > li > a.sb-btn-icon i,
.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-menu-mobile > ul > li > a.sb-btn-icon:hover i,
.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-menu-mobile > ul > li > a.sb-btn-icon.sb-active i,
.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-menu-mobile > ul > li > a.sb-btn-icon.sb-btn-red i {
  color: #788087 !important;
}

.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-menu-mobile > ul > li > a[data-value="archive"] i:before {
  -webkit-mask-image: url("../media/devad-icons/toolbar-archive.svg") !important;
  mask-image: url("../media/devad-icons/toolbar-archive.svg") !important;
}

.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-menu-mobile > ul > li > a[data-value="read"] i:before,
.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-menu-mobile > ul > li > a[data-value="unread"] i:before {
  -webkit-mask-image: url("../media/devad-icons/toolbar-read.svg") !important;
  mask-image: url("../media/devad-icons/toolbar-read.svg") !important;
}

.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-menu-mobile > ul > li > a[data-value="transcript"] i:before {
  -webkit-mask-image: url("../media/devad-icons/toolbar-transcript.svg") !important;
  mask-image: url("../media/devad-icons/toolbar-transcript.svg") !important;
}

.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-menu-mobile > ul > li > a[data-value="inbox"] i:before {
  -webkit-mask-image: url("../media/devad-icons/toolbar-inbox.svg") !important;
  mask-image: url("../media/devad-icons/toolbar-inbox.svg") !important;
}

.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-menu-mobile > ul > li > a[data-value="delete"] i:before,
.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-menu-mobile > ul > li > a[data-value="empty-trash"] i:before {
  -webkit-mask-image: url("../media/devad-icons/toolbar-delete.svg") !important;
  mask-image: url("../media/devad-icons/toolbar-delete.svg") !important;
}

.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-menu-mobile > ul > li > a[data-value="panel"] i:before {
  -webkit-mask-image: url("../media/devad-icons/toolbar-panel.svg") !important;
  mask-image: url("../media/devad-icons/toolbar-panel.svg") !important;
}

.sb-apps-login .sb-btn[data-app="google"] {
  background-color: #ffffff !important;
  border-color: #dadce0 !important;
  color: #3c4043 !important;
}

/* Light-mode lightboxes and popups stay WhatsApp-white, even when rendered outside .sb-main. */
.sb-lightbox,
.sb-lightbox .sb-main,
.sb-lightbox .sb-content,
.sb-lightbox .sb-scroll-area,
.sb-profile-box,
.sb-profile-box .sb-main,
.sb-profile-edit-box,
.sb-profile-edit-box .sb-main,
.sb-dialog-box,
.sb-popup {
  background-color: var(--devad-wa-white) !important;
  color: var(--devad-wa-text) !important;
}

.sb-lightbox .sb-top-bar,
.sb-profile-box .sb-top-bar,
.sb-profile-edit-box .sb-top-bar,
.sb-dialog-box .sb-title,
.sb-popup .sb-header {
  background-color: var(--devad-wa-grey-bg) !important;
  border-color: var(--devad-wa-divider) !important;
  color: var(--devad-wa-text) !important;
}

.sb-lightbox .sb-profile-list > ul > li,
.sb-lightbox .sb-user-conversations > li,
.sb-lightbox .sb-panel-details,
.sb-profile-box .sb-profile-list > ul > li,
.sb-profile-box .sb-user-conversations > li,
.sb-popup li {
  background-color: var(--devad-wa-white) !important;
  border-color: var(--devad-wa-divider) !important;
  color: var(--devad-wa-text) !important;
}

.sb-lightbox .sb-profile-list > ul > li:hover,
.sb-lightbox .sb-user-conversations > li:hover,
.sb-lightbox .sb-user-conversations > li.sb-active,
.sb-popup li:hover {
  background-color: var(--devad-wa-grey-bg) !important;
  border-color: var(--devad-wa-accent) !important;
}

.sb-lightbox input,
.sb-lightbox select,
.sb-lightbox textarea,
.sb-profile-box input,
.sb-profile-box select,
.sb-profile-box textarea,
.sb-profile-edit-box input,
.sb-profile-edit-box select,
.sb-profile-edit-box textarea,
.sb-dialog-box input,
.sb-dialog-box select,
.sb-dialog-box textarea {
  background-color: var(--devad-wa-white) !important;
  border-color: #dadce0 !important;
  color: var(--devad-wa-text) !important;
}

.sb-lightbox .sb-btn,
.sb-lightbox a.sb-btn,
.sb-profile-box .sb-btn,
.sb-profile-edit-box .sb-btn,
.sb-dialog-box .sb-btn,
.sb-popup .sb-btn {
  background-color: var(--devad-wa-send) !important;
  border-color: var(--devad-wa-send) !important;
  color: #ffffff !important;
}

/* Unified green cleanup for generated admin colors and old Support Board blues. */
.sb-main.sb-admin a,
.sb-main.sb-admin .sb-link,
.sb-main.sb-admin .sb-btn-text,
.sb-main.sb-admin .sb-menu-wide ul li.sb-active,
.sb-main.sb-admin .sb-menu-wide ul li:hover,
.sb-main.sb-admin .sb-tab > .sb-nav > ul li.sb-active,
.sb-main.sb-admin .sb-tab > .sb-nav > ul li:hover,
.sb-main.sb-admin .sb-search-btn i:hover,
.sb-main.sb-admin .sb-search-btn.sb-active i,
.sb-main.sb-admin .sb-filter-btn i:hover,
.sb-main.sb-admin .sb-filter-btn.sb-active i,
.sb-main.sb-admin .sb-language-switcher > i:hover,
.sb-main.sb-admin .sb-panel-details > i:hover,
.sb-main.sb-admin .sb-board .sb-conversation > .sb-top a:hover i,
.sb-main.sb-admin .sb-board .sb-conversation > .sb-top > a:hover,
.sb-main.sb-admin .sb-btn-icon:hover,
.sb-main.sb-admin .sb-custom-select span:hover,
.sb-main.sb-admin .sb-rich-login .sb-forgot:hover,
.sb-main.sb-admin .sb-rich-login .sb-register:hover,
.sb-account-box.sb-admin a,
.sb-account-box.sb-admin .sb-btn-text {
  color: var(--devad-wa-accent) !important;
  border-color: var(--devad-wa-accent) !important;
}

.sb-main.sb-admin .sb-menu-wide ul li.sb-active,
.sb-main.sb-admin .sb-tab > .sb-nav > ul li.sb-active,
.sb-main.sb-admin .sb-table input[type="checkbox"]:checked,
.sb-main.sb-admin .sb-table input[type="checkbox"]:hover,
.sb-main.sb-admin .sb-tags-cnt > span:hover,
.sb-main.sb-admin .sb-btn-icon:hover {
  border-color: var(--devad-wa-accent) !important;
}

.sb-main.sb-admin .sb-btn:hover,
.sb-main.sb-admin .sb-btn:active,
.sb-main.sb-admin a.sb-btn:hover,
.sb-main.sb-admin a.sb-btn:active,
.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li > .sb-notification-counter,
.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li.sb-active:before,
.sb-main.sb-admin .sb-area-settings .sb-tab .daterangepicker td.active,
.sb-main.sb-admin .sb-area-settings .sb-tab .daterangepicker td.active:hover,
.sb-main.sb-admin .daterangepicker td.active,
.sb-main.sb-admin .daterangepicker td.active:hover,
.sb-main.sb-admin .daterangepicker .ranges li.active,
.sb-main.sb-admin .sb-zendesk-sync:before {
  background-color: var(--devad-wa-accent) !important;
  border-color: var(--devad-wa-accent) !important;
  color: #ffffff !important;
}

.sb-main.sb-admin .sb-apps > div:hover,
.sb-main.sb-admin .sb-setting input:focus,
.sb-main.sb-admin .sb-setting select:focus,
.sb-main.sb-admin .sb-setting textarea:focus,
.sb-main.sb-admin .sb-search-btn > input,
.sb-main.sb-admin .sb-search-btn > input:focus {
  border-color: var(--devad-wa-accent) !important;
  box-shadow: 0 0 0 2px var(--devad-wa-focus) !important;
}

.sb-main.sb-admin .sb-scroll-area::-webkit-scrollbar-thumb:hover,
.sb-main.sb-admin .sb-conversation .sb-list::-webkit-scrollbar-thumb:hover,
.sb-main.sb-admin .sb-admin .sb-top-bar > div:first-child > ul::-webkit-scrollbar-thumb:hover,
.sb-main.sb-admin .sb-dialog-box pre::-webkit-scrollbar-thumb:hover,
.sb-main.sb-admin .sb-horizontal-scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--devad-wa-accent) !important;
}

/* Mobile top-bar action icons override responsive-admin blue. */
.sb-main.sb-admin .sb-top-bar .sb-btn.sb-icon:before,
.sb-main.sb-admin .sb-top-bar .sb-btn.sb-icon i,
.sb-main.sb-admin .sb-top-bar .sb-btn.sb-icon i:before,
.sb-main.sb-admin .sb-top-bar .sb-btn-icon i,
.sb-main.sb-admin .sb-top-bar .sb-btn-icon i:before,
.sb-main.sb-admin .sb-top-bar .sb-search-btn i,
.sb-main.sb-admin .sb-top-bar .sb-search-btn i:before,
.sb-main.sb-admin .sb-menu-mobile > i,
.sb-main.sb-admin .sb-menu-mobile > i.sb-active {
  color: var(--devad-wa-accent) !important;
}

.sb-main.sb-admin .sb-top-bar .sb-btn.sb-save-changes,
.sb-main.sb-admin .sb-top-bar .sb-btn.sb-save-changes:hover,
.sb-main.sb-admin .sb-top-bar .sb-btn.sb-icon.sb-save-changes,
.sb-main.sb-admin .sb-top-bar .sb-btn.sb-icon.sb-save-changes:hover {
  background-color: rgba(9, 133, 111, .10) !important;
  border-color: rgba(9, 133, 111, .45) !important;
  color: var(--devad-wa-accent) !important;
  box-shadow: none !important;
}

/* Menu links must read like menu text, not global green links. */
.sb-main.sb-admin div ul.sb-menu li a,
.sb-main.sb-admin .sb-menu-mobile .sb-mobile a,
.sb-account-box.sb-admin div ul.sb-menu li a {
  color: var(--devad-wa-text) !important;
  border-color: transparent !important;
  text-decoration: none !important;
}

.sb-main.sb-admin div ul.sb-menu li:hover a,
.sb-main.sb-admin .sb-menu-mobile .sb-mobile a:hover,
.sb-account-box.sb-admin div ul.sb-menu li:hover a {
  color: var(--devad-wa-accent) !important;
}

/* v91-compatible checkbox/radio styling, with CHAT.devad.io green. */
.sb-main.sb-admin input[type="checkbox"],
.sb-account-box.sb-admin input[type="checkbox"],
.sb-lightbox input[type="checkbox"],
.sb-popup input[type="checkbox"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  max-height: 20px !important;
  border: 2px solid #8696a0 !important;
  border-radius: 4px !important;
  outline: none !important;
  background: #ffffff !important;
  cursor: pointer !important;
  position: relative !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
}

.sb-main.sb-admin input[type="checkbox"]::before,
.sb-account-box.sb-admin input[type="checkbox"]::before,
.sb-lightbox input[type="checkbox"]::before,
.sb-popup input[type="checkbox"]::before {
  content: none !important;
  display: none !important;
}

.sb-main.sb-admin input[type="checkbox"]:checked,
.sb-account-box.sb-admin input[type="checkbox"]:checked,
.sb-lightbox input[type="checkbox"]:checked,
.sb-popup input[type="checkbox"]:checked {
  background: var(--devad-wa-send) !important;
  border-color: var(--devad-wa-send) !important;
}

.sb-main.sb-admin input[type="checkbox"]:checked::after,
.sb-account-box.sb-admin input[type="checkbox"]:checked::after,
.sb-lightbox input[type="checkbox"]:checked::after,
.sb-popup input[type="checkbox"]:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 6px !important;
  top: 2px !important;
  width: 5px !important;
  height: 10px !important;
  border: solid #ffffff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
  display: block !important;
}

/* Main left navigation: native layout, dark-green rail, consistent glyph scale. */
.sb-main.sb-admin > .sb-header {
  background-color: var(--devad-rail-bg) !important;
  background-image: linear-gradient(180deg, var(--devad-rail-bg), var(--devad-rail-bg-deep)) !important;
  border-right: 1px solid rgba(180, 255, 235, .10) !important;
}

.sb-main.sb-admin > .sb-header > .sb-admin-nav,
.sb-main.sb-admin > .sb-header > .sb-admin-nav-right,
.sb-main.sb-admin > .sb-header > .sb-admin-nav > div,
.sb-main.sb-admin > .sb-header > .sb-admin-nav-right > div {
  background: transparent !important;
}

.sb-main.sb-admin > .sb-header > .sb-admin-nav > div > a,
.sb-main.sb-admin > .sb-header > .sb-admin-nav-right > div > a,
.sb-main.sb-admin > .sb-header > .sb-admin-nav-right .sb-account {
  color: var(--devad-rail-icon-muted) !important;
}

.sb-main.sb-admin > .sb-header > .sb-admin-nav > div > a:before {
  content: "" !important;
  display: block !important;
  top: 13px !important;
  color: var(--devad-rail-icon-muted) !important;
  line-height: 1 !important;
  left: 20px !important;
  opacity: 1 !important;
  width: 24px !important;
  height: 24px !important;
  text-align: center !important;
  background-color: currentColor !important;
  background-image: none !important;
  -webkit-mask: var(--devad-nav-icon) center / contain no-repeat !important;
  mask: var(--devad-nav-icon) center / contain no-repeat !important;
}

.sb-main.sb-admin > .sb-header > .sb-admin-nav > div > a:hover:before,
.sb-main.sb-admin > .sb-header > .sb-admin-nav > div > a.sb-active:before {
  color: var(--devad-rail-icon) !important;
}

.sb-main.sb-admin > .sb-header > .sb-admin-nav > div > a:hover,
.sb-main.sb-admin > .sb-header > .sb-admin-nav > div > a.sb-active {
  background-color: var(--devad-rail-hover) !important;
  color: var(--devad-rail-icon) !important;
}

.sb-main.sb-admin > .sb-header > .sb-admin-nav-right > div > a:hover,
#sb-settings.sb-active {
  color: var(--devad-rail-icon) !important;
}

.sb-main.sb-admin > .sb-header > .sb-admin-nav-right i,
.sb-main.sb-admin > .sb-header > .sb-admin-nav-right .sb-account img {
  color: var(--devad-rail-icon-muted) !important;
}

.sb-main.sb-admin > .sb-header > .sb-admin-nav-right > div > a:hover i,
.sb-main.sb-admin > .sb-header > .sb-admin-nav-right .sb-account:hover i {
  color: var(--devad-rail-icon) !important;
}

.sb-main.sb-admin > .sb-header > .sb-admin-nav-right #sb-settings i {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 auto !important;
  color: inherit !important;
}

.sb-main.sb-admin > .sb-header > .sb-admin-nav-right #sb-settings i:before {
  content: "" !important;
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  background-color: currentColor !important;
  -webkit-mask: url("../media/devad-icons/nav-settings.svg") center / contain no-repeat !important;
  mask: url("../media/devad-icons/nav-settings.svg") center / contain no-repeat !important;
}

.sb-main.sb-admin #sb-conversations:before {
  --devad-nav-icon: url("../media/devad-icons/nav-conversations.svg");
}

.sb-main.sb-admin #sb-users:before {
  --devad-nav-icon: url("../media/devad-icons/nav-users.svg");
}

.sb-main.sb-admin #sb-chatbot:before {
  --devad-nav-icon: url("../media/devad-icons/nav-ai.svg");
}

.sb-main.sb-admin #sb-articles:before {
  --devad-nav-icon: url("../media/devad-icons/nav-articles.svg");
}

.sb-main.sb-admin #sb-reports:before {
  --devad-nav-icon: url("../media/devad-icons/nav-reports.svg");
}

.sb-main.sb-admin .sb-admin-nav-right i,
.sb-main.sb-admin .sb-editor .sb-bar-icons > div:before,
.sb-main.sb-admin .sb-board .sb-user-details i,
.sb-main.sb-admin .sb-profile-list > ul > li .sb-icon {
  color: #7c8a91 !important;
}

.sb-main.sb-admin .sb-admin-nav-right a:hover i,
.sb-main.sb-admin .sb-editor .sb-bar-icons > div:hover:before,
.sb-main.sb-admin .sb-board .sb-user-details a:hover i {
  color: var(--devad-wa-accent) !important;
}

/* cx9f3a: Lucide Minimal editor bar icons without layout changes. */
.sb-main.sb-admin .sb-editor .sb-bar-icons > .sb-btn-attachment:before,
.sb-main.sb-admin .sb-editor .sb-bar-icons > .sb-btn-saved-replies:before,
.sb-main.sb-admin .sb-editor .sb-bar-icons > .sb-btn-audio-clip:before,
.sb-main.sb-admin .sb-editor .sb-bar-icons > .sb-btn-emoji:before,
.sb-main.sb-admin .sb-editor .sb-icon-send.sb-submit:before {
  content: "" !important;
  display: inline-block !important;
  width: 21px !important;
  height: 21px !important;
  background-color: currentColor !important;
  font-family: initial !important;
  font-size: 0 !important;
  line-height: 1 !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

.sb-main.sb-admin .sb-editor .sb-bar-icons > .sb-btn-attachment:before {
  -webkit-mask-image: url("../media/devad-icons/editor-attachment.svg") !important;
  mask-image: url("../media/devad-icons/editor-attachment.svg") !important;
}

.sb-main.sb-admin .sb-editor .sb-bar-icons > .sb-btn-saved-replies:before {
  -webkit-mask-image: url("../media/devad-icons/editor-saved-replies.svg") !important;
  mask-image: url("../media/devad-icons/editor-saved-replies.svg") !important;
}

.sb-main.sb-admin .sb-editor .sb-bar-icons > .sb-btn-audio-clip:before {
  -webkit-mask-image: url("../media/devad-icons/editor-mic.svg") !important;
  mask-image: url("../media/devad-icons/editor-mic.svg") !important;
}

.sb-main.sb-admin .sb-editor .sb-bar-icons > .sb-btn-emoji:before {
  -webkit-mask-image: url("../media/devad-icons/editor-smile.svg") !important;
  mask-image: url("../media/devad-icons/editor-smile.svg") !important;
}

.sb-main.sb-admin .sb-editor .sb-icon-send.sb-submit:before {
  -webkit-mask-image: url("../media/devad-icons/editor-send.svg") !important;
  mask-image: url("../media/devad-icons/editor-send.svg") !important;
}

/* Conversation source badges: icon is anchored to the avatar corner, matching the reference. */
.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li .sb-profile {
  min-height: 40px !important;
  padding-left: 54px !important;
  position: relative !important;
}

.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li .sb-profile > .sb-profile-avatar {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  line-height: 0 !important;
  padding-top: 0 !important;
}

.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li .sb-profile > .sb-profile-avatar > img {
  position: static !important;
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  transform: none !important;
  border-radius: 50% !important;
}

.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li p {
  padding-left: 54px !important;
}

.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li > .sb-notification-counter {
  top: 50% !important;
  right: 18px !important;
  bottom: auto !important;
  width: 10px !important;
  min-width: 10px !important;
  max-width: 10px !important;
  height: 10px !important;
  line-height: 10px !important;
  transform: translateY(-50%) !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #25D366 !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  overflow: hidden !important;
}

.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li .sb-profile:after {
  content: none !important;
  display: none !important;
}

.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li .sb-profile > .sb-profile-avatar > .sb-source-icon {
  position: absolute !important;
  right: -2px !important;
  bottom: -2px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background-color: var(--devad-wa-white) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 14px !important;
  border: 2px solid var(--devad-wa-white) !important;
  box-shadow: 0 1px 2px rgba(17, 17, 17, .12) !important;
  z-index: 3 !important;
  color: var(--devad-wa-text) !important;
}

.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li .sb-source-icon[data-source="chat"],
.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li .sb-source-icon[data-source="web"] {
  background-image: url("../media/apps/web.svg") !important;
}

.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li .sb-source-icon[data-source="wa"] {
  background-image: url("../media/apps/whatsapp.svg") !important;
}

.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li .sb-source-icon[data-source="ig"] {
  background-image: url("../media/apps/instagram.svg") !important;
}

.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li .sb-source-icon[data-source="fb"] {
  background-image: url("../media/apps/messenger.svg") !important;
}

.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li .sb-source-icon[data-source="tg"] {
  background-image: url("../media/apps/telegram.svg") !important;
}

.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li .sb-source-icon[data-source="em"] {
  background-image: url("../media/apps/email.svg") !important;
}

.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li .sb-source-icon[data-source="tk"] {
  background-image: url("../media/apps/tickets.svg") !important;
}

.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li .sb-source-icon[data-source="tw"] {
  background-image: url("../media/apps/twitter.svg") !important;
}

.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li .sb-source-icon[data-source="vb"] {
  background-image: url("../media/apps/viber.svg") !important;
}

.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li .sb-source-icon[data-source="ln"] {
  background-image: url("../media/apps/line.svg") !important;
}

.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li .sb-source-icon[data-source="wc"] {
  background-image: url("../media/apps/wechat.svg") !important;
}

.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li .sb-source-icon[data-source="za"] {
  background-image: url("../media/apps/zalo.svg") !important;
}

.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li .sb-source-icon[data-source="tm"] {
  background-color: #e9fbf5 !important;
  background-image: none !important;
}

.sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li .sb-source-icon[data-source="tm"]:before {
  content: "SMS" !important;
  font-size: 6px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

@media (max-width: 464px) {
  .sb-main.sb-admin > .sb-header > .sb-admin-nav > div > a,
  .sb-main.sb-admin > .sb-header > .sb-admin-nav-right > div > a {
    position: relative !important;
  }

  .sb-main.sb-admin > .sb-header > .sb-admin-nav > div > a:before {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 23px !important;
    height: 23px !important;
    margin: 0 !important;
  }

  .sb-main.sb-admin > .sb-header > .sb-admin-nav-right #sb-settings i {
    height: 60px !important;
    line-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .sb-main.sb-admin > .sb-header > .sb-admin-nav-right #sb-settings i:before {
    margin: 0 !important;
  }

  .sb-main.sb-admin .sb-menu-mobile .sb-mobile,
  .sb-main.sb-admin .sb-menu-mobile > ul {
    background-color: var(--devad-wa-white) !important;
    border-color: var(--devad-wa-divider) !important;
    opacity: 1 !important;
  }

  .sb-main.sb-admin .sb-board > .sb-admin-list > .sb-scroll-area li .sb-profile > .sb-profile-avatar > .sb-source-icon {
    right: -2px !important;
    bottom: -2px !important;
  }

  .sb-main.sb-admin .sb-board .sb-conversation > .sb-top > a {
    font-size: 13.5px !important;
  }
}

/* cx759: harden mobile menu and action colors against responsive-admin blue/transparency. */
.sb-main.sb-admin > .sb-header .sb-admin-nav-right.sb-menu-mobile .sb-mobile,
.sb-main.sb-admin .sb-header .sb-menu-mobile .sb-mobile,
.sb-main.sb-admin .sb-menu-mobile > i.sb-active + div + .sb-mobile {
  background: var(--devad-wa-white) !important;
  background-color: var(--devad-wa-white) !important;
  background-image: none !important;
  border: 1px solid var(--devad-wa-divider) !important;
  box-shadow: 0 12px 28px rgba(17, 17, 17, .18), 0 0 0 1px rgba(9, 133, 111, .08) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.sb-main.sb-admin > .sb-header .sb-admin-nav-right.sb-menu-mobile .sb-mobile a {
  display: block !important;
  background: var(--devad-wa-white) !important;
  color: var(--devad-wa-text) !important;
  border-color: transparent !important;
  text-shadow: none !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

.sb-main.sb-admin > .sb-header .sb-admin-nav-right.sb-menu-mobile .sb-mobile a:hover,
.sb-main.sb-admin > .sb-header .sb-admin-nav-right.sb-menu-mobile .sb-mobile a.sb-active,
.sb-main.sb-admin > .sb-header .sb-admin-nav-right.sb-menu-mobile .sb-mobile a[data-value="dark-mode"]:hover,
.sb-main.sb-admin > .sb-header .sb-admin-nav-right.sb-menu-mobile .sb-mobile a[data-value="light-mode"]:hover {
  background: rgba(9, 133, 111, .08) !important;
  color: var(--devad-wa-accent) !important;
}

.sb-main.sb-admin .sb-top-bar #sb-train-chatbot,
.sb-main.sb-admin .sb-top-bar .sb-new-user,
.sb-main.sb-admin .sb-area-articles .sb-top-bar .sb-btn.sb-icon:not(.sb-save-changes):not(.sb-btn-red),
.sb-main.sb-admin .sb-top-bar .sb-btn.sb-icon:not(.sb-save-changes):not(.sb-btn-red):not(.sb-btn-black) {
  background: transparent !important;
  border-color: rgba(9, 133, 111, .42) !important;
  color: var(--devad-wa-accent) !important;
  box-shadow: none !important;
}

.sb-main.sb-admin .sb-top-bar #sb-train-chatbot:hover,
.sb-main.sb-admin .sb-top-bar .sb-new-user:hover,
.sb-main.sb-admin .sb-area-articles .sb-top-bar .sb-btn.sb-icon:not(.sb-save-changes):not(.sb-btn-red):hover,
.sb-main.sb-admin .sb-top-bar .sb-btn.sb-icon:not(.sb-save-changes):not(.sb-btn-red):not(.sb-btn-black):hover {
  background: rgba(9, 133, 111, .10) !important;
  border-color: var(--devad-wa-accent) !important;
  color: var(--devad-wa-accent) !important;
}

.sb-main.sb-admin .sb-top-bar #sb-train-chatbot i,
.sb-main.sb-admin .sb-top-bar #sb-train-chatbot i:before,
.sb-main.sb-admin .sb-top-bar .sb-new-user i,
.sb-main.sb-admin .sb-top-bar .sb-new-user i:before,
.sb-main.sb-admin .sb-area-articles .sb-top-bar .sb-btn.sb-icon i,
.sb-main.sb-admin .sb-area-articles .sb-top-bar .sb-btn.sb-icon i:before {
  color: currentColor !important;
}

.sb-main.sb-admin .sb-editor .sb-submit,
.sb-main.sb-admin .sb-editor .sb-submit:before,
.sb-main.sb-admin .sb-icon-send.sb-submit,
.sb-main.sb-admin .sb-icon-send.sb-submit:before {
  color: var(--devad-wa-accent) !important;
}

.sb-main.sb-admin .sb-editor .sb-submit:hover,
.sb-main.sb-admin .sb-editor .sb-submit:hover:before,
.sb-main.sb-admin .sb-icon-send.sb-submit:hover,
.sb-main.sb-admin .sb-icon-send.sb-submit:hover:before {
  color: var(--devad-wa-send-hover) !important;
}

.sb-main.sb-admin .sb-editor.sb-focus {
  border-color: var(--devad-wa-accent) !important;
  box-shadow: 0 0 0 2px var(--devad-wa-focus) !important;
}

.sb-main.sb-admin .sb-account .sb-menu [data-value="switch"] > div,
.sb-account-box.sb-admin .sb-menu [data-value="switch"] > div {
  background: var(--devad-wa-white) !important;
  border: 1px solid var(--devad-wa-divider) !important;
  box-shadow: 0 8px 26px rgba(11, 16, 20, .14) !important;
}

.sb-main.sb-admin > .sb-header > .sb-admin-nav-right .sb-account > div {
  transition: none !important;
  background: var(--devad-wa-white) !important;
}

.sb-main.sb-admin .sb-account .sb-menu [data-value="switch"] > div a,
.sb-account-box.sb-admin .sb-menu [data-value="switch"] > div a {
  color: var(--devad-wa-text) !important;
  background: var(--devad-wa-white) !important;
}

/* cx9f3a: make the conversation filter behave visually like native selects. */
.sb-main.sb-admin .sb-area-conversations .sb-admin-list .sb-filter-btn #sb-close-filters-btn {
  display: none !important;
}

.sb-main.sb-admin .sb-area-conversations .sb-admin-list .sb-filter-btn > i.sb-icon-filter {
  cursor: pointer !important;
}

.sb-main.sb-admin .sb-area-conversations .sb-admin-list .sb-filter-btn.sb-active > div {
  padding-bottom: 15px !important;
}

.sb-main.sb-admin .sb-area-conversations .sb-admin-list .sb-filter-btn.sb-channel-select-mode > div > .sb-select:not(:nth-of-type(2)) {
  display: none !important;
}

.sb-main.sb-admin .sb-area-conversations .sb-admin-list .sb-filter-btn.sb-channel-select-mode > div > .sb-select:nth-of-type(2) {
  display: block !important;
}

.sb-main.sb-admin .sb-area-conversations .sb-admin-list .sb-filter-btn > div > .sb-select:nth-of-type(2) ul li {
  position: relative !important;
  padding-left: 38px !important;
}

.sb-main.sb-admin .sb-area-conversations .sb-admin-list .sb-filter-btn > div > .sb-select:nth-of-type(2) ul li:before {
  content: "" !important;
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  width: 15px !important;
  height: 15px !important;
  transform: translateY(-50%) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

.sb-main.sb-admin .sb-area-conversations .sb-admin-list .sb-filter-btn > div > .sb-select:nth-of-type(2) ul li[data-value="false"]:before,
.sb-main.sb-admin .sb-area-conversations .sb-admin-list .sb-filter-btn > div > .sb-select:nth-of-type(2) ul li[data-value="chat"]:before {
  background-image: url("../media/apps/web.svg") !important;
}

.sb-main.sb-admin .sb-area-conversations .sb-admin-list .sb-filter-btn > div > .sb-select:nth-of-type(2) ul li[data-value="em"]:before {
  background-image: url("../media/apps/email.svg") !important;
}

.sb-main.sb-admin .sb-area-conversations .sb-admin-list .sb-filter-btn > div > .sb-select:nth-of-type(2) ul li[data-value="tk"]:before {
  background-image: url("../media/apps/tickets.svg") !important;
}

.sb-main.sb-admin .sb-area-conversations .sb-admin-list .sb-filter-btn > div > .sb-select:nth-of-type(2) ul li[data-value="wa"]:before {
  background-image: url("../media/apps/whatsapp.svg") !important;
}

.sb-main.sb-admin .sb-area-conversations .sb-admin-list .sb-filter-btn > div > .sb-select:nth-of-type(2) ul li[data-value="fb"]:before {
  background-image: url("../media/apps/messenger.svg") !important;
}

.sb-main.sb-admin .sb-area-conversations .sb-admin-list .sb-filter-btn > div > .sb-select:nth-of-type(2) ul li[data-value="ig"]:before {
  background-image: url("../media/apps/instagram.svg") !important;
}

.sb-main.sb-admin .sb-area-conversations .sb-admin-list .sb-filter-btn > div > .sb-select:nth-of-type(2) ul li[data-value="tg"]:before {
  background-image: url("../media/apps/telegram.svg") !important;
}

.sb-main.sb-admin .sb-area-conversations .sb-admin-list .sb-filter-btn > div > .sb-select:nth-of-type(2) ul li[data-value="tw"]:before {
  background-image: url("../media/apps/twitter.svg") !important;
}

.sb-main.sb-admin .sb-area-conversations .sb-admin-list .sb-filter-btn > div > .sb-select:nth-of-type(2) ul li[data-value="vb"]:before {
  background-image: url("../media/apps/viber.svg") !important;
}

.sb-main.sb-admin .sb-area-conversations .sb-admin-list .sb-filter-btn > div > .sb-select:nth-of-type(2) ul li[data-value="ln"]:before {
  background-image: url("../media/apps/line.svg") !important;
}

.sb-main.sb-admin .sb-area-conversations .sb-admin-list .sb-filter-btn > div > .sb-select:nth-of-type(2) ul li[data-value="wc"]:before {
  background-image: url("../media/apps/wechat.svg") !important;
}

.sb-main.sb-admin .sb-area-conversations .sb-admin-list .sb-filter-btn > div > .sb-select:nth-of-type(2) ul li[data-value="za"]:before {
  background-image: url("../media/apps/zalo.svg") !important;
}

.sb-main.sb-admin .sb-area-conversations .sb-admin-list .sb-filter-btn > div > .sb-select:nth-of-type(2) ul li[data-value="tm"]:before {
  background-image: url("../media/apps/text%20message.svg") !important;
}

/* Devad: conversation name actions. Scoped to the conversation top bar only. */
.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-devad-top-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  flex: 0 0 auto;
  height: 32px;
}

.sb-main.sb-admin .sb-board .sb-conversation > .sb-top > a {
  flex: 0 1 auto;
  min-width: 0;
}

.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-devad-top-actions a {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid rgba(9, 133, 111, .18) !important;
  background: rgba(235, 250, 245, .78) !important;
  color: #09856f !important;
  line-height: 1 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-devad-top-actions a:not(.sb-active) {
  display: none !important;
}

.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-devad-top-actions a:hover {
  border-color: rgba(9, 133, 111, .32) !important;
  background: rgba(222, 247, 239, .96) !important;
}

.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-devad-top-actions i {
  width: 16px;
  height: 16px;
  display: block;
  color: currentColor !important;
}

.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-devad-top-actions i:before {
  content: "" !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  background: currentColor !important;
  font-family: initial !important;
}

.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-devad-action-info i:before {
  -webkit-mask: url("../media/devad-icons/top-info.svg") center / 16px 16px no-repeat;
  mask: url("../media/devad-icons/top-info.svg") center / 16px 16px no-repeat;
}

.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-devad-action-edit i:before {
  -webkit-mask: url("../media/devad-icons/top-edit.svg") center / 16px 16px no-repeat;
  mask: url("../media/devad-icons/top-edit.svg") center / 16px 16px no-repeat;
}

.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-devad-action-template i:before {
  -webkit-mask: url("../media/devad-icons/top-template.svg") center / 16px 16px no-repeat;
  mask: url("../media/devad-icons/top-template.svg") center / 16px 16px no-repeat;
}

.sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-devad-action-call i:before {
  -webkit-mask: url("../media/devad-icons/top-call.svg") center / 16px 16px no-repeat;
  mask: url("../media/devad-icons/top-call.svg") center / 16px 16px no-repeat;
}

@media (max-width: 464px) {
  .sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-devad-top-actions {
    gap: 4px;
    margin-left: 6px;
  }

  .sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-devad-top-actions a {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    border-radius: 8px;
  }

  .sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-devad-top-actions i,
  .sb-main.sb-admin .sb-board .sb-conversation > .sb-top .sb-devad-top-actions i:before {
    width: 15px !important;
    height: 15px !important;
  }
}