:root {
    --body-font-family: "Inter", "Roboto", sans-serif;
    --timer-font-family: 'Bebas Neue', "Inter", "Roboto", sans-serif;

    --grey-color: #969697;
    --grey-color-10: #F3F7F9;
    --grey-color-100: #9D9D9E;
    --grey-color-200: #D1D5DB;
    --grey-color-300: #787879;
    --black-color: #3C3C3D;
    --black-color-0: #B4B4B5;
    --black-color-10: #464647;
    --orange-color: #ED5A05;
    --orange-second-color: #F7BD94;
    --green-color: #39B952;
    --green-dark-color: #039A74;
    --green-second-color: #C6EFCE;
    --yellow-color: #FFCA29;
    --yellow-second-color: #FFF8BC;
    --red-color: #FF4433;
    --red-second-color: #FACFCF;
    --blue-color: #7387D4;
    --blue-second-color: #B9C7FF;
    --main-color: var(--blue-color);
    --primary: var(--blue-color);
    --primary-active: var(--blue-second-color);
    --primary-hover: var(--blue-second-color);
    --danger: var(--orange-second-color);
    --main-text-dark-color:  var(--blue-second-color);
    --main-text-color: var(--blue-second-color);
    --secondary-text-color: #FFFFFF;
    --secondary-nav-text-color: var(--grey-color);
    --main-card-bg: var(--black-color);
    --main-dark-color: #202122;
    --main-bg-dark-color: var(--main-dark-color);
    --main-link-color: var(--main-text-color);
    --main-link-active-color: #FFFFFF;
    --link-color: var(--main-link-color);
    --link-hover-color: var(--main-link-active-color);
    --secondary-hover: var(--grey-300);
    --main-link-icon-active-color: var(--orange-color);
    /*figma gradient*/
    --figma-gradient-bg: linear-gradient(135.96deg, #3C3C3D 24.58%, rgba(60, 60, 61, 0) 73.6%);
    /*my gradient*/
    --main-gradient-bg: linear-gradient(135.96deg, #3C3C3D 4.58%, rgba(60, 60, 61, 0) 53.6%);
    --secondary-gradient-bg: linear-gradient(135.96deg, var(--main-card-bg) 24.58%, rgba(60, 60, 61, 0) 73.6%), var(--main-dark-color);
    --third-gradient-bg: linear-gradient(90deg, rgba(48,48,48,1) 28%, rgba(21,21,22,1) 73%);
    --dark-icon-color: #5A5A5B;
    --light-icon-color: var(--black-color-0);

    --sidebar-width-full: 17.5rem;

    --space-xxxs: .625rem;
    --space-xxs: .75rem;
    --space-xs: .875rem;
    --space-s: 1rem;
    --space-n: 1.25rem;
    --space-m: 1.5rem;
    --space-xxl: 2.5rem;

    --font-size-s: 13px;
    --font-size-m: 16px;
    --font-size-l: 20px;

    --line-height-s: 20px;
    --line-height-m: 22px;
    --line-height-l: 24px;

    --header-top-padding: .9375rem;
    --sidebar-menu-padding-top: 2.5rem;
    --border-radius: 8px;

    --popup-bg: rgba(60, 60, 61, 0.7);
    --backdrop-filter: blur(3px);

    --padding-x-sm: .625rem;
    --padding-y-sm: .625rem;
    --padding-y-catalog-card: .8125rem;
    --box-shadow: 0 5px 10px 10px rgba(0, 0, 0, .1);
}

.swal2-container {
    --swal-success-color: var( --main-text-dark-color);
    --swal-bg: var(--main-card-bg);
}

.swal2-html-container {
    color: var(--swal-success-color);
}

.offcanvas-xxxl {
    --offcanvas-zindex: 1045;
    --offcanvas-width: 482px;
    --offcanvas-height: auto;
    --offcanvas-padding-x: var(--spacer);
    --offcanvas-padding-y: var(--spacer);
    --offcanvas-bg: var(--main-card-bg);
    --offcanvas-box-shadow: var(--box-shadow);
}

.detail-menu {
    background: var(--main-card-bg)!important;
}

.nav-tabs {
    --nav-tabs-link-active-bg: var(--main-card-bg);
}

.dropdown-menu {
    --dropdown-link-hover-bg: var(--main-card-bg);
    --dropdown-link-active-color: #fff;
    --dropdown-link-color: var(--primary-hover);
    --dropdown-link-active-bg: var(--primary-hover);
    --dropdown-link-hover-color: #fff;
}

.pagination {
    --pagination-color: var(--primary-hover);
    --pagination-hover-color: #fff;
    --pagination-padding-x: .5rem;
    --pagination-padding-y: .5rem;
    --pagination-border-width: 0;
    --pagination-hover-bg: var(--primary-hover);
    --pagination-focus-color: var(--primary);
    --pagination-focus-bg: var(--primary-hover);
}

.sidebar {
    --sidebar-width: var(--sidebar-width-full);
    --sidebar-section-padding-x: var(--space-n);
    --sidebar-border-width: 0;
    --sidebar-shadow: 1px 10px 10px 0px #333;
    --sidebar-shadow: 0px 10px 15px rgba(51, 51, 51, 0.1);
    --sidebar-dark-color: var(--grey-color);
    --sidebar-light-color: var(--light-icon-color);
    --sidebar-padding-top: 2.5rem;
    --sidebar-padding-bottom: 1.875rem;
    --sidebar-resize-padding-top: 3.875rem;
    --sidebar-resize-padding-bottom: 2.125rem;
}

.navbar {
    --navbar-padding-left: var(--space-n);
    --navbar-padding-rigth: var(--space-xxl);
    --navbar-shadow: 1px 10px 10px 0px #333;
    --navbar-bg: none;
    --navbar-hover-bg: var(--main-card-bg);
}

.navbar .navbar-custom {
    --navbar-custom-border-radius: var(--border-radius);
    --navbar-custom-background: var(--main-card-bg);
    --navbar-custom-color-hover: var(--main-card-bg);
    --navbar-custom-hover-bg-color: none;
    --navbar-custom-text-active-color: #fff;
    --navbar-custom-text-color: var(--blue-second-color);
    --navbar-custom-hover-bg: none;
    --navbar-custom-bg: var(--blue-color);
}

@media (max-width: 1199px) {
    .navbar .navbar-custom {
        --navbar-custom-border-radius: var(--border-radius);
        --navbar-custom-background: var(--main-card-bg);
        --navbar-custom-color-hover: var(--main-card-bg);
        --navbar-custom-hover-bg-color: var(--blue-color);
        --navbar-custom-text-active-color: #fff;
        --navbar-custom-text-color: var(--blue-second-color);
        --navbar-custom-hover-bg: var(--blue-color);
        --navbar-custom-bg: var(--blue-color);
    }
}

.navbar .navbar-custom.navbar-custom__warning {
    --navbar-custom-text-color: var(--grey-color);
    --navbar-custom-hover-bg: var(--orange-second-color);
    --navbar-custom-bg: var(--orange-color);
}

.nav-sidebar {
    --nav-sidebar-padding-y: 1rem;
    --nav-link-padding-y: .75rem;
    --nav-link-padding-x: 1rem;
    --nav-link-hover-color: var(--primary);
    --nav-link-active-color: var(--main-link-active-color);
    --nav-link-hover-bg: inherit;
    --nav-icon-width: 26px;
    --nav-icon-height: 26px;
}

.nav-group-sub .nav-group-sub .nav-group-sub .nav-link {
    padding-left: var(--space-n);
}

.sotbit-cabinet-gadget {
    --text-color: var(--grey-color);
}

.btn {
    --btn-border-radius: var(--border-radius);
    --btn-padding-x: 1.25rem;
    --btn-padding-y: 0.5625rem;
    --btn-bg: none;
    --btn-hover-bg: var(--primary-hover);
    --btn-border-color: var(--primary-hover);
    --btn-hover-color: var(--white-100);
    --btn-color: var(--primary-hover);
}

.btn-primary, .trumbowyg-modal-button.trumbowyg-modal-submit {
    --btn-color: var(--white-100)!important;
    --btn-bg: var(--primary);
    --btn-border-color: var(--primary);
    --btn-hover-color: var(--white-100);
    --btn-hover-bg: var(--primary-hover);
    --btn-hover-border-color: var(--primary-hover);
    --btn-focus-shadow-rgb: 48, 150, 255;
    --btn-active-color: var(--white-100);
    --btn-active-bg: var(--primary-active);
    --btn-active-border-color: var(--primary-active);
    --btn-active-shadow: 0 0 0 0.125rem rgba(115, 135, 212, 0.25);
    --btn-disabled-color: var(--grey-text);
    --btn-disabled-bg: var(--grey-500);
    --btn-disabled-border-color: var(--grey-500);
}

.form-control {
    --input-padding-y: .8125rem;
    --input-padding-x: 1rem;
    --input-bg: var(--grey-color-200);
    --input-color: var(--grey-color-300);
    --input-border-color: var(--grey-color-200);
    --input-placeholder-color: var(--grey-color);
    --input-focus-bg: var(--grey-300);
    --input-focus-border-color: var(--grey-300);
    --input-disabled-bg: var(--grey-color-300);
    --input-disabled-border-color: var(--grey-color-300);
    --input-line-height: 1.4rem;
    transition: background ease-in-out var(--transition-base-timer);
}

.form-check-input {
    --form-check-input-width: 1.25rem;
    --form-check-input-height: 1.25rem;
    --form-check-input-bg: none;
    --form-check-input-border: calc(var(--border-width)* 2) solid var(--grey-color);
    --form-check-input-border-radius: 0.25em;
    --form-check-input-focus-border: var(--component-active-bg);
    --form-check-input-focus-box-shadow: var(--focus-ring-box-shadow);
    --form-check-input-checked-bg-color: var(--component-active-bg);
    --form-check-input-checked-border-color: transparent;
    --form-check-input-disabled-opacity: 0.5;
    --form-check-input-indeterminate-bg-color: var(--component-active-bg);
    --form-check-input-indeterminate-border-color: transparent;
    --form-check-checked-bg-color-rgb: var(--component-active-bg-rgb);
    --form-check-checked-border-color: transparent;
    --form-check-radio-border-radius: 100rem;
    width: var(--form-check-input-width);
    height: var(--form-check-input-height);
    margin-top: calc((var(--body-line-height) - var(--form-check-input-height))* .5);
    vertical-align: top;
    background-color: var(--form-check-input-bg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: var(--form-check-input-border);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    print-color-adjust: exact;
    transition: box-shadow var(--transition-base-timer) ease-in-out, border-color var(--transition-base-timer) ease-in-out, background-color var(--transition-base-timer) ease-in-out;
}

.b2b-shans .form-check-input[type="radio"] {
    --form-check-input-checked-bg-color: var(--white);
    --form-check-input-checked-border-color: var(--orange-color);
    --form-check-input-width: 1.25rem;
    --form-check-input-height: 1.25rem;
    --form-check-input-bg: initial;
    --form-check-input-border: calc(var(--border-width) * 2) solid var(--grey-color);
    --form-check-input-border-radius: 0.1875em;
    --form-check-input-focus-border: var(--orange-color);
    --form-check-input-focus-box-shadow: var(--focus-ring-box-shadow);
}

.b2b-shans .form-check-input:checked[type="radio"] {
    background-image: url('data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12Z" fill="%23E85B21"/></svg>');
    background-size: 12px;
}

.b2b-shans .form-check-input[type="radio"]:hover {
    border-color: var(--orange-color);
}

.modal {
    --modal-bg: var(--main-dark-color);
}

.noUi-target {
    --noui-bg: var(--black-color)!important;
    --noui-box-shadow: inset 0 1px 1px rgba(var(--black-rgb), 0.1);
    --noui-connect-bg: var(--primary);
    --noui-height: 0.375rem;
    --noui-vertical-height: 10rem;
    --noui-handle-size: calc(0.375rem* 3.5);
    --noui-handle-bg: var(--white);
    --noui-handle-inner-bg: var(--orange-color);
    --noui-handle-inner-hover-bg: var(--primary);
    --noui-handle-border-width: var(--border-width);
    --noui-handle-border-color: rgba(var(--black-rgb), 0.25);
    --noui-pips-spacer-y: 1rem;
    --noui-pips-spacer-x: 1rem;
    --noui-pips-color: var(--gray-700);
    --noui-pips-font-size: var(--body-font-size-sm);
    --noui-pips-marker-width: 0.0625rem;
    --noui-pips-marker-height: 0.1875rem;
    position: relative;
    background-color: var(--noui-bg);
    border-radius: var(--border-radius-pill);
}

.btn-close {
    --btn-close-width: 1em;
    --btn-close-height: 1em;
    --btn-close-padding-y: 0.25em;
    --btn-close-padding-x: 0.25em;
    --btn-close-color: red;
    --btn-close-bg: url("../../images/close.svg");
    --btn-close-opacity: 0.65;
    --btn-close-hover-opacity: 1;
    --btn-close-focus-opacity: 1;
    --btn-close-disabled-opacity: 0.25;
    box-sizing: content-box;
    width: var(--btn-close-width);
    height: var(--btn-close-height);
    padding: var(--btn-close-padding-y) var(--btn-close-padding-x);
    color: var(--btn-close-color);
    background: transparent var(--btn-close-bg) center / var(--btn-close-width) auto no-repeat;
    border: 0;
    border-radius: .375rem;
    opacity: var(--btn-close-opacity);
}

.btn.btn-warning {
    --btn-color: #fff;
    --btn-bg: var(--orange-color);
    --btn-border-color: var(--orange-color);
    --btn-hover-color: #fff;
    --btn-hover-bg: var(--orange-second-color);
    --btn-hover-border-color: var(--orange-second-color);
    --btn-focus-shadow-rgb: none;
    --btn-active-color: #fff;
    --btn-active-bg: var(--orange-second-color);
    --btn-active-border-color: var(--orange-second-color);
    --btn-active-shadow: inset 0 0 0 0 transparent;
    --btn-disabled-color: var(--black-color);
    --btn-disabled-bg: var(--orange-second-color);
    --btn-disabled-border-color: var(--orange-second-color);
    --btn-disabled-opacity: 1;
}

.navbar-nav-link:focus, .navbar-nav-link:hover {
    background-color: var(--main-card-bg);
    box-shadow: var(--box-shadow);
    opacity: .9;
}

.breadcrumb {
    --breadcrumb-divider-color: var(--grey-color-300);
    --breadcrumb-item-active-color: var(--grey-color-300);
    --breadcrumb-item-padding-x: .75rem;
}

.breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    content: ""!important;
    width: 8px;
    height: 12px;
    background-image: url('data:image/svg+xml,<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.17904 6.34896L2.17904 11.349C2.03814 11.4899 1.84704 11.569 1.64779 11.569C1.44853 11.569 1.25743 11.4899 1.11654 11.349C0.975639 11.2081 0.896484 11.017 0.896484 10.8177C0.896484 10.6185 0.975639 10.4274 1.11654 10.2865L5.58591 5.81833L1.11779 1.34896C1.04802 1.27919 0.99268 1.19637 0.954924 1.10522C0.917167 1.01407 0.897734 0.91637 0.897734 0.817707C0.897734 0.719045 0.917167 0.621349 0.954924 0.530197C0.99268 0.439045 1.04802 0.356222 1.11779 0.286457C1.18755 0.216693 1.27037 0.161352 1.36153 0.123596C1.45268 0.0858393 1.55037 0.0664062 1.64904 0.0664063C1.7477 0.0664063 1.84539 0.0858393 1.93655 0.123596C2.0277 0.161352 2.11052 0.216693 2.18029 0.286457L7.18029 5.28646C7.25012 5.35622 7.3055 5.43908 7.34325 5.53029C7.381 5.62149 7.40037 5.71926 7.40025 5.81797C7.40014 5.91668 7.38054 6.01439 7.34257 6.10551C7.30461 6.19663 7.24904 6.27936 7.17904 6.34896Z" fill="%235A5A5B"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    margin-right: var(--breadcrumb-item-padding-x);
}

.mt-2-1 {
    margin-top: .625rem;
}

.select2-container {
    --s2-padding-y: calc(1rem - 2px);
    --s2-bg: var(--grey-color-200);
    --s2-menu-item-padding-y: 1rem;
    --s2-menu-item-padding-x: 1rem;
    --s2-menu-item-spacer-y: 0;
    --s2-menu-link-hover-bg: var(--secondary);
    --s2-menu-link-active-bg: var(--primary);
    --s2-menu-link-active-color: var(--white-100);
    --s2-search-padding-y: 0.75rem;
    --s2-menu-bg: var(--grey-200);
    /* --s2-disabled-color: var(--grey-400); */
    --s2-disabled-bg: var(--grey-400);
    --s2-disabled-border-color: var(--grey-400);
    --s2-disabled-opacity: 1;
    --s2-focus-border-color: none;
    --s2-focus-box-shadow: none;
    --s2-menu-border-color: none;
}

.select2-search--hide+.select2-results>.select2-results__options {
    padding-top: 0;
}

.select2-container--open.select2-container--below .select2-selection--single {
    outline: none;
    border: none;
}

.select2-results>.select2-results__options {
    padding-bottom: 0;
    max-height: var(--s2-menu-max-height);
    overflow-y: auto;
    border-radius: var(--border-radius);
}

.select2-results__option[aria-selected="false"]:hover {
    background: var(--blue-second-color);
    color: var(--white);
}