:root {
    /* CSS DARK THEME PRIMARY COLORS */
    --color-primary-100: #6941c6;
    --color-primary-200: #7c55cd;
    --color-primary-300: #8e6ad4;
    --color-primary-400: #9f7eda;
    --color-primary-500: #b093e1;
    --color-primary-600: #c0a8e7;
    /* CSS DARK THEME SURFACE COLORS */
    --main-background: #21212a;
    --color-surface-200: #36363e;
    --color-surface-300: #4c4c54;
    --color-surface-400: #63636a;
    --color-surface-500: #7b7b81;
    --color-surface-600: #949499;
    /* CSS DARK THEME MIXED SURFACE COLORS */
    --container-background: #292538;
    --nav-background: #36304d;
    --color-surface-mixed-200: #3e394b;
    --color-surface-mixed-300: #534f60;
    --color-surface-mixed-400: #696675;
    --color-surface-mixed-500: #817e8a;
    --color-surface-mixed-600: #9996a1;
    /* Text */
    --text-general: #f5f6f7;
    --text-title: #7c55cd;
    --text-subtitle: #7c7c7c;
    --text-header: #d0d0d0;
    /* Other */
    --border-color: #3A3942;
}

/** ----------------------------------------------------------- Mode icons ----------------------------------------------------------- */
.navbar-top .navbar-top-right .profile-info.mode {
    margin: 0px !important;
}
.light-icon {
    background-image: url("../images/moon.png");
    background-repeat: no-repeat;
    display: inline-block;
    width: 32px;
    height: 32px;
}
.dark-icon {
    background-image: url("../images/sun.svg");
    background-repeat: no-repeat;
    display: inline-block;
    width: 32px;
    height: 32px;
}

/** ----------------------------------------------------------- End Mode icons ----------------------------------------------------------- */
/* Text */
.dark-mode h1,
.dark-mode h2,
.dark-mode h4,
.dark-mode h4,
.dark-mode h6,
.dark-mode h3,
.dark-mode .plan-name {
    color: var(--text-header) !important;
}

.dark-mode p,
.dark-mode .info,
.dark-mode button.close,
.dark-mode #title-new,
.dark-mode .profile-info .visit-txt,
.dark-mode .breadcrumbs span,
.dark-mode .breadcrumbs a,
.dark-mode .profile-info .dropdown-list a,
.dark-mode .navbar-top .navbar-top-right .profile-info .role.locales-new,
.dark-mode .navbar-left ul.menubar li.menu-item span,
.dark-mode .content-container .content .page-header .page-action *,
.dark-mode #datagrid-filters label,
.dark-mode .sub-item,
.dark-mode .order-date,
.dark-mode .order-id,
.dark-mode .order-content .card .card-info ul li .description .info,
.dark-mode .table table tbody td,
.dark-mode .linked-product-filter-tag,
.dark-mode .payment-radio span,
.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered,
.dark-mode .do-not-cross-linked-product-arrow,
.dark-mode .card-body a,
.dark-mode .edit-navigation .nav-title,
.dark-mode .iti__selected-dial-code,
.dark-mode li.nav-item.active,
.dark-mode .select2-container .select2-selection--multiple .select2-selection__clear,
.dark-mode .role-background .tree-item span,
.dark-mode .notifications .material-icons,
.dark-mode .switch-group h4,
.dark-mode .btn-success,
.dark-mode table .view-cst-info,
.dark-mode .sale-container .sale-section .secton-title,
.dark-mode .btn.btn-primary,
.dark-mode .radio-inline,
.dark-mode .switch-group label,
.dark-mode .header-btn a {
    color: var(--text-general) !important;
}
p.click-upload,
.dark-mode .navbar-top .navbar-top-right .profile-info .name,
.dark-mode .forms-new .page-header .page-action .btn-outline-primary {
    color: var(--text-title) !important;
}
.dark-mode a,
.dark-mode .addNewCategoryBtn label,
.dark-mode .content-container .order-content .page-header .page-action .profile-info .dropdown-toggle-action .actions-btn span,
.dark-mode .page-loader .txt,
.dark-mode .billing .top-right .priceAndCurrency,
.dark-mode .billing .top-right .price-egp {
    color: var(--color-primary-400) !important;
}

.dark-mode label,
.dark-mode .dashboard .dashboard-stats .dashboard-card .data,
.dark-mode .dashboard .card .card-info ul li .description .name,
.dark-mode .order-det,
.dark-mode .order-content .card-body .head,
.dark-mode .order-content .actions-btn,
.dark-mode .navbar-top .navbar-top-right .profile-info .role,
.dark-mode .flatpickr-weekwrapper span.flatpickr-day,
.dark-mode .flatpickr-weekwrapper span.flatpickr-day:hover,
.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice__display,
.dark-mode .flatpickr-day,
.dark-mode .flatpickr-weekday,
.dark-mode .flatpickr-current-month,
.dark-mode .flatpickr-day.prevMonthDay,
.dark-mode .select2-search__field,
.dark-mode .product-configuration .form-block p,
.dark-mode .settings-row p,
.dark-mode .switch-group p,
.dark-mode .form-block i,
.dark-mode p.upload-ext,
.dark-mode .MsoNormal span,
.dark-mode .order-view .card h3,
.dark-mode .create-invoice .section-content,
.dark-mode .sale-container .sale-section .section-content,
.dark-mode .sale-container .sale-section .section-content .row .title,
.dark-mode .sale-container .sale-section .section-content .row .value,
.dark-mode #newOrderModal .control-group,
.dark-mode .alert-wrapper .alert p,
.dark-mode .content-container .content .page-header .page-action .btn-customer-delete,
.dark-mode .information .general-settings p,
.dark-mode .information .col-md-4 .col-md-10 p,
.dark-mode .notifications .date,
.dark-mode #plan-feature-error-message,
.dark-mode .checkbox {
    color: var(--text-subtitle) !important;
}
.dark-mode .flatpickr-months .flatpickr-prev-month,
.dark-mode .flatpickr-months .flatpickr-next-month {
    color: var(--text-subtitle) !important;
    fill: var(--text-subtitle) !important;
}
.dark-mode .content-container .content .page-header .page-action .dashboard-print .btn {
    color: #000 !important;
}
.dark-mode .content-container .content .page-header .page-action .actions-btn,
.dark-mode .card-body .checkbox,
.dark-mode .order-content ul.timeline > li::before,
.dark-mode .order-content .card .card-info ul li .description .name,
.dark-mode .dashboard .dashboard-stats .dashboard-card .data,
.dark-mode .btn.btn-secondary {
    color: var(--color-primary-500) !important;
}
.dark-mode .slider-timer-input,
.dark-mode #shipping_cost {
    color: #344054;
}
.switch-label {
    color: var(--color-surface-500);
}
.dark-mode .slider-add-new img.plus-circle-icon {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(216deg) brightness(105%) contrast(101%);
    -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(216deg) brightness(105%) contrast(101%);
}

/** ----------------------------------------------------------- BACKGROUNDS ----------------------------------------------------------- */
/* Main Background */
body.dark-mode,
.dark-mode .content-container .content.full-page,
.dark-mode .content-container .content .page-header,
.dark-mode .content-container .content.full-page,
.dark-mode .ticket-details .form-control,
.dark-mode #editModal .modal-content,
.dark-mode .dashboard .card .card-info img,
.dark-mode .content-container .content-wrapper,
.dark-mode .page-loader {
    background-color: var(--main-background) !important;
    color: var(--text-general) !important;
}

/* Cards */
.dark-mode .dashboard .dashboard-stats .dashboard-card,
.dark-mode .dashboard .card,
.dark-mode .order-content .card-body,
.dark-mode .settings-row .card,
.dark-mode .dropdown-list,
.dark-mode .form-block,
.dark-mode table,
.dark-mode #datagrid-filters.datagrid-filters,
.dark-mode .accordion,
.dark-mode #modalFormSearch,
.dark-mode .modal-header,
.dark-mode .modal-content,
.dark-mode .modal-body,
.dark-mode .modal-footer,
.dark-mode .orders-modal-container,
.dark-mode #filter-btn,
.dark-mode #modalFormSearch .categories-tree,
.dark-mode select#perPage,
.dark-mode .select2-dropdown,
.dark-mode .pagination,
.dark-mode .pagination .page-item,
.dark-mode .flatpickr-calendar,
.dark-mode .bootbox .modal-content,
.dark-mode a.nav-link,
.dark-mode li.nav-item.active,
.dark-mode .card,
.dark-mode .slider-timer-txt,
.dark-mode .role-background,
.dark-mode .panel-body,
.dark-mode .settings .checkout,
.dark-mode .accordian .accordian-header,
.dark-mode .accordian .accordian-content,
.dark-mode .image-wrapper .image-item {
    background-color: var(--container-background) !important;
    color: var(--text-general) !important;
}

/* Secondary */
.dark-mode .table table thead th,
.dark-mode .table tr:nth-child(2n),
.dark-mode #modalFormSearch .row.searchResults:not(.variation-row),
.dark-mode .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.dark-mode #identifier:disabled,
.dark-mode input:disabled,
.dark-mode select:disabled,
.dark-mode textarea:disabled {
    background-color: var(--color-surface-200) !important;
    color: var(--text-general) !important;
}
.dark-mode .notifications .dropdown-item.unread {
    background-color: var(--color-surface-mixed-300) !important;
}

/* Hamburger */
.dark-mode .menu-icon-mobile .bar1,
.dark-mode .menu-icon-mobile .bar2,
.dark-mode .menu-icon-mobile .bar3 {
    background-color: var(--text-general) !important;
}

/* Nav */
.dark-mode .navbar-left,
.dark-mode .navbar-top,
.dark-mode .navbar-top .navbar-top-left,
.dark-mode .bottom-nav,
.dark-mode .toggled .dropdownActive .aside-nav ul {
    background-color: var(--nav-background) !important;
}

.dark-mode .complaints tr:has(.row-bolder),
.dark-mode .footer-block {
    background-color: var(--color-primary-400) !important;
}

.dark-mode #theme-modal .theme-card {
    background: #3d3754 !important;
}

/** ----------------------------------------------------------- INPUTS / BUTTONS ----------------------------------------------------------- */
.dark-mode .btn-condition,
.dark-mode .header-btn,
.dark-mode .search-filter,
.dark-mode #search-field,
.dark-mode #cd-textarea,
.dark-mode .support-search,
.dark-mode .search-filter .icon-wrapper,
.dark-mode .control-group .control,
.dark-mode .filter-right .grid-dropdown-header,
.dark-mode .forms-new .control-group .select2-selection,
.dark-mode .forms-new .control-group select.control,
.dark-mode .mystore-header a,
.dark-mode .forms-new .control-group input.control[type="text"],
.dark-mode .slider-add-new,
.dark-mode .mce-container,
.dark-mode .mce-container *,
.dark-mode .mce-widget,
.dark-mode .mce-widget *,
.dark-mode .mce-reset,
.dark-mode body#tinymce,
.dark-mode .size-option select.control,
.dark-mode .addNewCategory .custom-input,
.dark-mode .row .addNewBranch .custom-input,
.dark-mode #skiponboarding,
.dark-mode .select2-container--default .select2-selection--single {
    background-color: var(--nav-background) !important;
    color: var(--text-general) !important;
}

.dark-mode label#showAddCustomerGroup,
.dark-mode .flatpickr-day.today.selected,
.dark-mode div.js-back-btn a,
.dark-mode .order-content .dropdown-content2,
.dark-mode .domain-name,
.dark-mode #theme-modal .theme-footer .btn {
    background-color: var(--color-primary-400) !important;
    color: var(--text-general) !important;
}

.dark-mode .dashboard-print .btn {
    background-color: var(--color-primary-600) !important;
}

.dark-mode .select2-container--default .select2-results__option--selected {
    background-color: var(--color-surface-400) !important;
    color: var(--text-general) !important;
}

.dark-mode .image-block,
.dark-mode .btn-completed,
.dark-mode .panel,
.dark-mode .cst-default-address {
    background: var(--color-primary-600);
    color: var(--text-general) !important;
    mix-blend-mode: unset;
}

/** ----------------------------------------------------------- SHADOW ----------------------------------------------------------- */
.dark-mode .order-content .card-body,
.dark-mode .dashboard .card,
.dark-mode .new-form .form-block,
.dark-mode .form-block,
.dark-mode .dashboard .dashboard-stats .dashboard-card {
    border: 1px solid hsla(0, 0%, 28.2%, 0.2);
    box-shadow: 2px 3px 3px 2px rgba(108, 108, 108, 0.1);
    -webkit-box-shadow: 2px 3px 3px 2px rgba(108, 108, 108, 0.1);
    -moz-box-shadow: 2px 3px 3px 2px rgba(108, 108, 108, 0.1);
}

/** ----------------------------------------------------------- HOVER ----------------------------------------------------------- */
.dark-mode .flatpickr-months .flatpickr-prev-month:hover,
.dark-mode .flatpickr-months .flatpickr-next-month:hover,
.dark-mode .order-content .card .card-info ul li:hover,
.dark-mode #modalFormSearch .categories-tree,
.dark-mode li.nav-item:hover,
.dark-mode .notifications .dropdown-item:hover,
.dark-mode .dark-mode .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable:hover,
.dark-mode .dashboard .card .card-info ul li:hover,
.dark-mode .notifications .dropdown-header span:hover {
    background: #262430 !important;
}
.dark-mode .flatpickr-day:hover {
    background-color: var(--color-primary-400) !important;
}

/** ----------------------------------------------------------- BORDER ----------------------------------------------------------- */
.dark-mode hr,
.dark-mode select#locale-switcher,
.dark-mode .pagination .page-item,
.dark-mode select#perPage,
.dark-mode .form-block,
.dark-mode .slider-timer-input,
.dark-mode, .slider-timer-second-input, .slider-timer-second-input:disabled,
.dark-mode .filter-right .grid-dropdown-header,
.dark-mode .search-filter .icon-wrapper,
.dark-mode .search-filter,
.dark-mode #search-field,
.dark-mode #cd-textarea,
.dark-mode .support-search,
.dark-mode .control-group .control,
.dark-mode .forms-new .control-group .select2-selection,
.dark-mode .forms-new .control-group select.control,
.dark-mode .forms-new .control-group input.control[type="text"],
.dark-mode .pagination .page-item:first-child,
.dark-mode .billing,
.dark-mode .billing .billing-overview,
.dark-mode .new-form hr,
.dark-mode div.js-back-btn ,
.dark-mode .size-option select.control,
.dark-mode .addNewCategory .custom-input,
.dark-mode .row .addNewBranch .custom-input,
.dark-mode .select2-container--default .select2-selection--single {
    border: 1px solid var(--border-color) !important;
}

.dark-mode .accordian .accordian-header,
.dark-mode .Basic-Features,
.dark-mode .modal-footer {
    border-top: 1px solid var(--border-color) !important;
}

.dark-mode .create-refund .sale-section,
.dark-mode .create-invoice .sale-section,
.dark-mode .accordian .accordian-header,
.dark-mode .table table tbody td,
.dark-mode .notifications .dropdown-item,
.dark-mode .switch-group,
.dark-mode .notifications .dropdown-header,
.dark-mode .Rich-snippets .control-group,
.dark-mode .block-header.row,
.dark-mode .panel,
.dark-mode .linked-product-new,
.dark-mode #modalFormSearch .row.searchResults,
.dark-mode .general-settings .row.control-group {
    border-bottom: 1px solid var(--border-color) !important;
}

.dark-mode .pagination {
    border: none;
}

/* general themes */
.control-group.switch-group:last-child,
.create-refund .sale-section:last-child,
.create-invoice .sale-section:last-child {
    border-bottom: none !important;
}

.dark-mode .forms-new .page-header .page-action .btn-outline-primary {
    border: 1px solid var(--color-primary-300) !important;
}

/** ----------------------------------------------------------- Calender ----------------------------------------------------------- */
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange,
.flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover, .flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
    border-color: var(--text-general) !important;
}

/** ----------------------------------------------------------- Tags ----------------------------------------------------------- */
.dark-mode .product-categories,
.dark-mode .table span.badge {
    opacity: 0.9;
}

/** ----------------------------------------------------------- Plans ----------------------------------------------------------- */
.dark-mode .price-toggler-height {
    background-image: url(../images/Payment-EN_dark.png) !important;
    height: 90px !important;
    background-repeat: no-repeat;
    background-position-x: center;
    text-align: center;
}
.dark-mode .package-img.basic {
    background-image: url(../images/ic_begginer_dark.png);
}
.dark-mode .package-img.plus {
    background-image: url(../images/ic_plus_dark.png);
}
.dark-mode .package-img.premium {
    background-image: url(../images/ic_premium_dark.png);
}

/** ----------------------------------------------------------- SCROLLBAR ----------------------------------------------------------- */
.dark-mode ::-webkit-scrollbar-button {
    background-color: #3e4346 !important;
}
.dark-mode ::-webkit-scrollbar-track {
    background-color: #646464 !important;
}
.dark-mode ::-webkit-scrollbar-track-piece {
    background-color: #3e4346 !important;
}
.dark-mode ::-webkit-scrollbar-thumb {
    height: 50px;
    background-color: #242424 !important;
    border: 2px solid #3e4346 !important;
}
.dark-mode ::-webkit-scrollbar-button:vertical:start:decrement {
    background: linear-gradient(130deg, #696969 40%, rgba(255, 0, 0, 0) 41%),
        linear-gradient(230deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(0deg, #696969 40%, rgba(0, 0, 0, 0) 31%);
    background-color: #b6b6b6;
}
.dark-mode ::-webkit-scrollbar-button:vertical:end:increment {
    background: linear-gradient(310deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(50deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(180deg, #696969 40%, rgba(0, 0, 0, 0) 31%);
    background-color: #b6b6b6;
}
.dark-mode ::-webkit-scrollbar-button:horizontal:end:increment {
    background: linear-gradient(210deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(330deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(90deg, #696969 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #b6b6b6;
}
.dark-mode ::-webkit-scrollbar-button:horizontal:start:decrement {
    background: linear-gradient(30deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(150deg, #696969 40%, rgba(0, 0, 0, 0) 41%),
        linear-gradient(270deg, #696969 30%, rgba(0, 0, 0, 0) 31%);
    background-color: #b6b6b6;
}
.dark-mode .content-container .content .page-header .page-action .export-import.stopFeature span {
    color: #8d8d8d !important;
}

.dark-mode .content-container .content .page-header .page-action .export-import.stopFeature .featureFlag span {
    color: #ffffff !important;
}

.dark-mode .content-container .content .page-header .page-action .export-import span {
    color: #202020 !important;
}