/*
* 
* ==========================================================
* DARK.SCSS
* ==========================================================
*
* Back-end dark mode CSS.
*
*/

$background-dark: #252525;
$background-dark-light: #2d2d2d;
$background-dark-ultra-light: #3a3a3a;
$color-blue: #6fb4e1;
$color-light-blue: #b0bbc6;
$color-white: #dde4ea;
$color-gray: #87929d;
$color-gray-dark: #585e63;
$border-color: #4c4c4c;

.sb-admin, .sb-admin input, .sb-admin textarea, .sb-admin select, .sb-title, .daterangepicker, .ct__content, .sb-select, .sb-profile-list > ul > li:hover > span, .sb-panel-details .sb-split > div:hover > .sb-title,
#sb-close-filters-btn i, .sb-profile, .sb-board > .sb-admin-list > .sb-scroll-area li p, .sb-filter-star:not(:hover):not(.sb-active), .sb-board .sb-conversation > .sb-top > a, .sb-user-conversations > li > div,
.sb-list .sb-message, .sb-list .sb-message a, .sb-list .sb-message-attachments a, .sb-setting input:focus, .sb-setting select:focus, .sb-setting textarea:focus, .sb-tags-cnt > span:not(.sb-active):not(:hover), #sb-audio-clip .sb-icon,
.sb-btn.sb-loading:before, .sb-btn.sb-loading:hover:before, a.sb-btn.sb-loading:before, a.sb-btn.sb-loading:hover:before, .sb-menu-wide ul li, .sb-tab > .sb-nav > ul li, .sb-table td a, .sb-input > span, .sb-setting label,
.sb-setting h2, .sb-setting .sb-select-checkbox label, .sb-apps > div h2, .ce-popover-item, .sb-report-block-header > div > span, .sb-report-block-header > div > span, .sb-admin > .sb-header > .sb-admin-nav-right .sb-account .sb-menu a {
    color: $color-white;
}

.sb-editor textarea, .ce-header {
    color: $color-white !important;
}

.sb-admin > .sb-header > .sb-admin-nav > div > a, .sb-profile-list > ul > li .sb-icon, .sb-select.sb-select-colors > p:not(:hover):after, .sb-board .sb-conversation > .sb-top i, .sb-admin > .sb-header > .sb-admin-nav-right > div a,
.sb-list > div.sb-right .sb-message, .sb-list > div.sb-right .sb-message a, .sb-list > div.sb-right .sb-rich-message .sb-text, .sb-list > div.sb-right .sb-rich-message .sb-title, .sb-editor .sb-bar-icons > div:before, .sb-btn-icon,
.sb-rich-message .sb-card .sb-card-header, .sb-rich-message .sb-slider .sb-card-header, .sb-btn-text, .sb-menu-articles .sb-docs, .sb-menu-chatbot .sb-docs, .sb-no-results, .sb-area-users .sb-table-users thead th {
    color: $color-light-blue;
}

.sb-board > .sb-admin-list > .sb-scroll-area li.sb-active .sb-name, .sb-table-users th.sb-active, .sb-table-users th:hover {
    color: $color-blue;
}

.sb-list .sb-time, .sb-board .sb-conversation .sb-list > div .sb-menu-btn, .sb-popup.sb-replies .sb-replies-list ul li div:last-child, .sb-editor .sb-attachments > div, .sb-profile-box .sb-agent-area .sb-rating-area .sb-rating-count,
.sb-conversation-attachments > a, .sb-board .sb-conversation .sb-list .sb-info-message .sb-cnt .sb-message, .sb-articles > div > span, .sb-panel-details .sb-list-links > a, .sb-setting p, .sb-text-gray, .sb-apps > div p, .ce-toolbar__settings-btn,
.codex-editor path, .sb-admin .sb-menu-mobile > i {
    color: $color-gray;
}

.sb-inner-tab .sb-nav > ul > .sb-no-results {
    color: $color-gray !important;
}

.sb-main, .sb-admin > main, .sb-tooltip:after, .sb-flow-block-cnt, .sb-admin > .sb-header > .sb-admin-nav > div > a > span:after, .sb-board .sb-no-conversation-message {
    background-color: $background-dark;
}

div ul.sb-menu, .sb-select ul, .sb-popup, .sb-menu-mobile > ul, .sb-menu-mobile .sb-mobile, .sb-area-users .sb-filter-btn > div, .sb-menu li ul, .sb-setting input[type="checkbox"], .sb-list .sb-btn, .sb-search-dropdown .sb-search-dropdown-items,
.sb-board > .sb-admin-list > .sb-scroll-area li.sb-active, .sb-filter-btn > div, .sb-board .sb-conversation .sb-editor, .sb-popup:after, .sb-admin > .sb-header > .sb-admin-nav-right .sb-account > div:after, .sb-setting.sb-type-color .input:after,
.sb-inner-tab .sb-nav > ul li i, .ce-popover__container, .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date, .sb-menu [data-value="switch"] > div,
.sb-area-reports #sb-date-picker {
    background-color: $background-dark-light;
}

.sb-search-btn > input {
    background-color: $background-dark-light !important;
}

.sb-board .sb-conversation .sb-editor .sb-suggestions span, .sb-list > div, .sb-board .sb-user-details .sb-user-conversations li.sb-active, .sb-board .sb-user-details .sb-user-conversations li:hover,
.sb-board .sb-user-details .sb-user-conversations li.sb-active, .sb-popup.sb-emoji .sb-emoji-bar > div, .sb-user-conversations > li:hover, .sb-user-conversations > li.sb-active,
.sb-board .sb-conversation .sb-list .sb-info-message .sb-cnt, .sb-table tr:hover td, .sb-custom-select span:hover, .ce-toolbar__settings-btn:hover, .ce-toolbar__plus:hover,
.ce-popover-item:hover:not(.ce-popover-item--no-hover), .cdx-button:hover {
    background-color: $background-dark-ultra-light;
}

.sb-board > .sb-admin-list > .sb-scroll-area li.sb-active, .sb-board > .sb-admin-list > .sb-scroll-area li:hover {
    background-color: $background-dark-ultra-light !important;
}

.sb-board > div > .sb-top, .sb-profile-list > .sb-title, .sb-filter-btn.sb-active > div, .sb-board .sb-user-details .sb-inline, .sb-dialog-box pre, .sb-tab > .sb-nav, .sb-setting .repeater-item + .repeater-item,
.sb-board .sb-user-details .sb-user-conversations li, .sb-panel-details, .sb-editor, .sb-board .sb-user-details > div > h3, .sb-board .sb-user-details .sb-user-conversations li:first-child, .sb-flow-block > div + div,
.sb-lightbox .sb-top-bar, .sb-user-conversations > li, .sb-profile-box .sb-user-conversations, #sb-audio-clip .sb-audio-clip-cnt, .sb-dialog-box .sb-title, .sb-articles > div + div, .sb-admin > main > div > .sb-top-bar,
.sb-flow-connectors > div > span, .sb-flow-block-cnt-name, .sb-flow-connectors > div + div, .sb-playground-info, #sb-playground-embeddings-panel p span + span, .sb-timetable > div > div > div, .sb-area-users .sb-table-users tbody tr,
.sb-area-settings > .sb-tab > .sb-content > div > .sb-setting + .sb-setting, .sb-setting.sb-type-upload-image .image, .sb-setting [data-type="upload-image"] .image, .sb-apps > div, .ce-popover--opened > .ce-popover__container,
.image-tool--caption .image-tool__caption, .sb-report-block, .daterangepicker.show-ranges.ltr .drp-calendar.left, .sb-admin > .sb-header, .sb-board .sb-conversation .sb-editor, .sb-popup.sb-replies, .sb-popup.sb-woocommerce-products,
.sb-area-chatbot [data-id="open-ai-faq-function-calling-properties"] .repeater-item + .repeater-item, .sb-area-chatbot [data-id="open-ai-faq-set-data"] .repeater-item + .repeater-item, [data-id="flows"] > .sb-content,
.sb-area-articles > .sb-tab > .sb-content {
    border-color: $border-color;
}

.sb-table-users th:first-child {
    border-color: $border-color !important;
}

.sb-board > .sb-admin-list > .sb-scroll-area li:after, hr, .ce-popover-item-separator__line, .ce-divider {
    background-color: $border-color;
}

.sb-setting input, .sb-setting select, .sb-setting textarea, .sb-replies-add-area, .sb-admin > .sb-header > .sb-admin-nav-right .sb-account .sb-profile, .sb-board > .sb-admin-list, .sb-board .sb-conversation, .sb-board .sb-user-details
.sb-board > .sb-admin-list, .sb-board .sb-conversation, .sb-board .sb-user-details, .sb-admin > main > div:not(.sb-area-conversations), .sb-table input[type="checkbox"], .sb-input > input, .sb-input > select, .sb-input > textarea, .sb-input-image .image,
.sb-custom-select, .sb-select-checkbox, .cdx-button, .daterangepicker, .sb-admin .sb-menu-wide > ul, .sb-admin .sb-nav > ul, .sb-admin .sb-top .sb-select ul, .sb-admin .sb-area-users .sb-top-bar .sb-filter-btn ul, .sb-admin .sb-select-reports ul {
    background-color: $background-dark-light;
    border-color: $border-color;
}

.sb-flow-block, .sb-flow-block-cnt-name {
    background-color: $background-dark-ultra-light;
    border-color: $border-color;
}

.daterangepicker .calendar-table {
    background-color: $background-dark-light;
    border-color: $background-dark-light;
}

.sb-btn-icon:hover, .sb-board .sb-conversation > .sb-top a:hover i {
    color: $color-blue;
    border-color: $color-blue;
}

.sb-table td, .sb-table th {
    color: $color-white;
    border-color: $border-color;
}

#sb-audio-clip, .sb-btn.sb-loading, a.sb-btn.sb-loading, .repeater-item .repeater-item .sb-sub-repeater-close, .sb-repeater-inputs-v .repeater-item i {
    background-color: $background-dark-light;
    color: $color-light-blue;
}

.sb-list > div.sb-label-date span, .sb-label-date-top span, .daterangepicker td.in-range, .daterangepicker .ranges li:hover {
    background-color: $background-dark-ultra-light;
    color: $color-light-blue;
}

div ul.sb-menu li:hover, .sb-select ul li:hover, .daterangepicker td.available:hover, .daterangepicker th.available:hover {
    background-color: $background-dark-ultra-light;
    color: $color-blue;
}

.sb-input > input:focus, .sb-input > input.sb-focus, .sb-input > select:focus, .sb-input > select.sb-focus, .sb-input > textarea:focus, .sb-input > textarea.sb-focus, .sb-rich-cnt[data-type="chips"] .sb-text {
    background-color: $background-dark-ultra-light;
    color: $color-white;
}

div ul.sb-menu, .sb-select ul, .sb-popup, .sb-menu-mobile > ul, .sb-menu-mobile .sb-mobile, .sb-area-users .sb-filter-btn > div, .sb-menu li ul, .sb-admin > .sb-header > .sb-admin-nav-right .sb-account > div {
    border: 1px solid $border-color;
}

.sb-tooltip > div, .sb-admin > .sb-header > .sb-admin-nav > div > a > span, .sb-admin > .sb-header > .sb-admin-nav-right .sb-account > div, .sb-lightbox, .sb-color-palette ul, .sb-flows-blocks-nav-box .sb-close,
.sb-rich-message .sb-slider-arrow {
    background-color: $background-dark;
    color: $color-white;
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.sb-btn, a.sb-btn {
    background-color: $background-dark-ultra-light;
    color: $color-white;
    box-shadow: rgba(147, 147, 147, .3) 0 1px 1px 0, #373737 0 0 0 1px, transparent 0 0 0 0, transparent 0 0 0 0;
}

.sb-btn:not(.sb-loading):hover, .sb-btn:not(.sb-loading):active, a.sb-btn:not(.sb-loading):hover, a.sb-btn:not(.sb-loading):active {
    box-shadow: rgba(147, 147, 147, .5) 0 1px 1px 0, #373737 0 0 0 1px, transparent 0 0 0 0, transparent 0 0 0 0;
}

.sb-list > div.sb-right, .sb-list > div.sb-right.sb-rich-cnt .sb-text, .sb-board .sb-conversation .sb-list .sb-rich-message:not(.sb-rich-list) input, .sb-board .sb-conversation .sb-list .sb-rich-message:not(.sb-rich-list) textarea,
.sb-board .sb-conversation .sb-list .sb-rich-message:not(.sb-rich-list) select {
    color: $color-white;
    background-color: #2e353b !important;
    border-color: $border-color;
}

.sb-btn.sb-btn-red {
    box-shadow: rgba(238, 202, 202, .3) 0 1px 1px 0, #e05151 0 0 0 1px, transparent 0 0 0 0, transparent 0 0 0 0;
}

.sb-btn.sb-btn-red:not(.sb-loading):hover {
    background-color: #e05151;
    box-shadow: rgba(238, 202, 202, .3) 0 1px 1px 0, #e05151 0 0 0 1px, transparent 0 0 0 0, transparent 0 0 0 0;
}

.sb-scroll-area, .sb-conversation .sb-list, .sb-list .sb-message pre, .sb-rich-table .sb-content, .sb-admin .sb-top-bar > div:first-child > ul,
.sb-dialog-box pre, .sb-horizontal-scroll, .sb-custom-select, .sb-select-checkbox, .sb-setting textarea, .ce-popover__items {

    &::-webkit-scrollbar-track {
        background-color: $background-dark-ultra-light;
    }

    &::-webkit-scrollbar-thumb {
        background-color: $color-gray-dark;
    }
}

.sb-admin > .sb-header > .sb-admin-nav > div > a:before {
    opacity: 1;
}

.sb-tooltip:before, .sb-admin > .sb-header > .sb-admin-nav > div > a > span:before {
    background-image: url(../media/triangle-dark.svg);
}

.sb-popup:before, .sb-admin > .sb-header > .sb-admin-nav-right .sb-account > div:before {
    background-image: url(../media/triangle-dark-2.svg);
}

.sb-lightbox-overlay {
    background-color: rgba(28, 28, 28, .9) !important;
}

.sb-flow-block-cnt.sb-active {
    background: #323232;
}

.sb-list > div.sb-right.sb-rich-cnt[data-type="chips"] {
    background: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0;
}

.sb-board .sb-conversation .sb-list .sb-rich-message input {
    &::placeholder {
        color: #566063 !important;
    }

    &::-webkit-input-placeholder {
        color: #566063 !important;
    }

    &::-moz-placeholder {
        color: #566063 !important;
    }

    &:-ms-input-placeholder {
        color: #566063 !important;
    }
}

textarea::-webkit-scrollbar-button {
    background-color: $background-dark-ultra-light;
}

.sb-admin > .sb-header > .sb-admin-nav-right .sb-account .sb-menu {
    border: none;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

.sb-admin > .sb-header > .sb-admin-nav-right .sb-account > div {
    border-radius: 6px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 1;
}

.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
    border-color: $color-light-blue;
}

@media (min-width: 465px) {
    .sb-menu-mobile > ul {
        border: none !important;
    }
}