/*
* 
* ==========================================================
* 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-menu li ul li,
.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-note-text a,
.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,
.sb-playground .sb-scroll-area>div>div:last-child,
.sb-playground .sb-scroll-area>div>div a:not(.sb-btn),
.sb-list .sb-message code 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,
#sb-audio-clip .sb-btn-mic: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,
.sb-select-colors>[data-value="gray"],
.sb-list .sb-right .sb-reply-message {
    color: $color-gray;
}

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

[data-color="gray"],
[data-value="gray"],
[data-value="gray"]>span {
    background-color: $color-gray;
}

.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,
.sb-board .sb-labels .sb-status-typing,
.sb-editor .sb-loader,
.sb-flows-blocks-nav-box .sb-top-bar .sb-close {
    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,
.sb-input-image .image: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,
.sb-editor.sb-drag {
    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,
.sb-onboarding-box .sb-setting+div {
    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-list .sb-message code,
.sb-list .sb-message pre {
    background-color: $background-dark-ultra-light;
    border-color: $border-color;
    color: $color-white;
}

.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,
.sb-editor [data-reply],
.sb-editor #sb-call-bar {
    color: $color-white;
    background-color: #2e353b !important;
    border-color: $border-color;
}

.sb-right .sb-player>div {
    background-color: #2e353b;
    color: $color-white;
}

.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;
}

.sb-panel-notes {

    &>div>div,
    &>div>div>span:first-child i.sb-edit-note {
        background: #4f3a00;
    }
}

.sb-collapse>div:not([style=""]):after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #2d2d2d 100%);
}

.sb-board>.sb-admin-list>.sb-scroll-area li {
    opacity: 0.6;
}

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