/************************************
*
*   TEMPLATE OVERRIDE
*
*************************************/

html.dark header,
html.dark aside,
html.dark .sidebar-nav .nav-link {
    background-color: #171717;
}

html.dark header,
html.dark aside {
    box-shadow: 0 5px 30px 0 rgb(76 75 95 / 20%);
}

html.dark .sidebar-nav .nav-link,
html.dark .sidebar-nav .nav-link i {
    color: #6ca0ff;
}

html.dark body {
    background-color: #2b2f33;
}

html.dark .dropdown-menu {
    box-shadow: 0 5px 30px 0 rgb(76 75 95 / 20%);
}


html.dark .dropdown-menu .dropdown-item:hover,
html.dark .accordion-button:not(.collapsed),
html.dark .header-nav .notifications .notification-item:hover,
html.dark .header-nav .messages .message-item:hover,
html.dark .header-nav .profile .dropdown-item:hover {
    background-color: #1b1f23;
}

html.dark .dropdown-menu::before {
    background-color: #212529;
    border-color: #212529;
}

html.dark body,
html.dark .dropdown-menu a,
html.dark .dropdown-menu a:hover,
html.dark .header-nav .messages .message-item h4,
html.dark .header-nav .profile .dropdown-header h6,
html.dark .sidebar-nav .nav-content a.active,
html.dark .sidebar-nav .nav-content a.active i {
    color: #c0c4cc;
}

html.dark .accordion-button:not(.collapsed),
html.dark .nav-tabs-bordered .nav-link:hover,
html.dark .nav-tabs-bordered .nav-link:focus,
html.dark .nav-tabs-bordered .nav-link.active,
html.dark .sidebar-nav .nav-link:hover,
html.dark .sidebar-nav .nav-link:not(.collapsed),
html.dark .sidebar-nav .nav-content a:hover,
html.dark .dashboard .filter .icon:hover,
html.dark .dashboard .filter .icon:focus,
html.dark .dashboard .sales-card .card-icon,
html.dark .dashboard .news h4 a:hover,
html.dark .faq .basic h6,
html.dark .contact .info-box i,
html.dark .contact .php-email-form input:focus,
html.dark .contact .php-email-form textarea:focus,
html.dark .contact .php-email-form button[type=submit],
html.dark .error-404 h1 {
    color: #6ca0ff;
    background-color: #282f3b;
    border-color: #6ca0ff;
}

html.dark .pagetitle h1,
html.dark .card-title,
html.dark .logo span,
html.dark .header .toggle-sidebar-btn,
html.dark .header .search-form input,
html.dark .header .search-form button i,
html.dark .header-nav .nav-icon,
html.dark .header-nav .nav-profile,
html.dark .sidebar-nav .nav-link.collapsed,
html.dark .sidebar-nav .nav-content a,
html.dark .dashboard .info-card h6,
html.dark .dashboard .news h4 a,
html.dark .iconslist .icon,
html.dark .profile .profile-card .social-links a:hover,
html.dark .profile .profile-overview .card-title,
html.dark .contact .info-box h3,
html.dark .error-404 h2,
html.dark .footer .copyright,
html.dark .footer .credits {
    color: #aab2c0;
}

html.dark .back-to-top:hover {
    background-color: #4458f4;
}

html.dark .dropdown-menu .dropdown-divider {
    color: #455a73;
}

html.dark /* Light Backgrounds for Dark Mode */
html.dark .bg-primary-light {
    background-color: #334756;
    border-color: #334756;
}

html.dark .bg-secondary-light {
    background-color: #3a3d42;
    border-color: #3a3d42;
}

html.dark .bg-success-light {
    background-color: #324f3e;
    border-color: #324f3e;
}

html.dark .bg-danger-light {
    background-color: #552a31;
    border-color: #552a31;
}

html.dark .bg-warning-light {
    background-color: #574f33;
    border-color: #574f33;
}

html.dark .bg-info-light {
    background-color: #315153;
    border-color: #315153;
}

html.dark .bg-dark-light {
    background-color: #2b2d31;
    border-color: #2b2d31;
}

html.dark .card-header,
html.dark .card-footer {
    border-color: #3b3f45;
    color: #a1a7b3;
}

html.dark .sidebar-nav .nav-heading,
html.dark .sidebar-nav .nav-link.collapsed i {
    color: #7a869a;
}

html.dark .accordion-flush .accordion-body,
html.dark .error-404 .btn:hover {
    color: #bbc2d0;
    background-color: #3d4759;
}


html.dark .breadcrumb,
html.dark .breadcrumb a,
html.dark .breadcrumb .breadcrumb-item::before {
    color: #557dc7;
}


html.dark .breadcrumb a:hover,
html.dark .breadcrumb .active {
    color: #85a0d3;
}

html.dark .error-404 .btn {
    color: #506680;
    background-color: #506680;
}

html.dark .nav-tabs-bordered .nav-link,
html.dark .profile .profile-card h2 {
    color: #9fa9b8;
}

html.dark .header-nav .notifications .notification-item p,
html.dark .header-nav .messages .message-item p {
    color: #7a7f88;
}

html.dark .sidebar::-webkit-scrollbar-thumb,
html.dark .dashboard .filter .icon,
html.dark .dashboard .filter .dropdown-header h6 {
    background-color: #4a5262;
    color: #4a5262;
}

html.dark .dashboard .recent-sales .table thead,
html.dark .dashboard .top-selling .table thead {
    background-color: #2c2f35;
}

html.dark .dashboard .revenue-card .card-icon {
    color: #3cba75;
    background-color: #24372d;
}

html.dark .dashboard .customers-card .card-icon {
    color: #e87c36;
    background-color: #3d2b22;
}

html.dark .dashboard .activity .activity-item .activite-label {
    color: #bbbbbb;
}

html.dark .dashboard .activity .activity-item .activite-label::before,
html.dark .dashboard .activity .activity-item .activity-badge {
    background-color: #2b3142;
    border-color: #2b3142;
}

html.dark .dashboard .news p {
    color: #8a8f96;
}

html.dark .iconslist .label {
    color: #676d76;
}

html.dark .faq .basic p {
    color: #8ea3c5;
}

html.dark .contact .php-email-form .error-message {
    background-color: #c33d2c;
}

html.dark .contact .php-email-form .sent-message {
    background-color: #24b96f;
}

html.dark .contact .php-email-form .loading:before {
    border-top-color: #2c2f35;
}

html.dark .contact .php-email-form button[type=submit]:hover {
    background-color: #4f5bf4;
}

/************************************
*
*   SELECT 2 OVERRIDE
*
*************************************/

body .select2-container--bootstrap-5 .select2-selection {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
}

body
.select2-container--bootstrap-5.select2-container--focus
.select2-selection,
body
.select2-container--bootstrap-5.select2-container--open
.select2-selection {
    border-color: var(--bs-link-hover-color);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

body
.select2-container--bootstrap-5
.select2-selection--multiple
.select2-selection__clear,
body
.select2-container--bootstrap-5
.select2-selection--single
.select2-selection__clear {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23676a6d'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") 50%/0.75rem auto no-repeat;
}

    body
    .select2-container--bootstrap-5
    .select2-selection--multiple
    .select2-selection__clear:hover,
    body
    .select2-container--bootstrap-5
    .select2-selection--single
    .select2-selection__clear:hover {
        background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") 50%/0.75rem auto no-repeat;
    }

body .select2-container--bootstrap-5 .select2-dropdown {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-link-hover-color);
}

    body
    .select2-container--bootstrap-5
    .select2-dropdown
    .select2-search
    .select2-search__field {
        color: var(--bs-body-color);
        background-color: var(--bs-body-bg);
        background-clip: padding-box;
        border: var(--bs-border-width) solid var(--bs-border-color);
    }

        body
        .select2-container--bootstrap-5
        .select2-dropdown
        .select2-search
        .select2-search__field:focus {
            border-color: var(--bs-link-hover-color);
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        }

    body
    .select2-container--bootstrap-5
    .select2-dropdown
    .select2-results__options
    .select2-results__option.select2-results__message {
        color: #6c757d;
    }

    body
    .select2-container--bootstrap-5
    .select2-dropdown
    .select2-results__options
    .select2-results__option.select2-results__option--highlighted {
        color: var(--bs-body-color);
        background-color: var(--bs-light-bg-subtle) !important;
    }

    body
    .select2-container--bootstrap-5
    .select2-dropdown
    .select2-results__options
    .select2-results__option.select2-results__option--selected,
    body
    .select2-container--bootstrap-5
    .select2-dropdown
    .select2-results__options
    .select2-results__option[aria-selected="true"]:not( .select2-results__option--highlighted ) {
        color: var(--bs-body-color);
        background-color: var(--bs-dark-bg-subtle);
    }

    body
    .select2-container--bootstrap-5
    .select2-dropdown
    .select2-results__options
    .select2-results__option.select2-results__option--disabled,
    body
    .select2-container--bootstrap-5
    .select2-dropdown
    .select2-results__options
    .select2-results__option[aria-disabled="true"] {
        color: #6c757d;
    }

    body
    .select2-container--bootstrap-5
    .select2-dropdown
    .select2-results__options
    .select2-results__option[role="group"]
    .select2-results__group {
        color: #6c757d;
    }

body
.select2-container--bootstrap-5
.select2-selection--single
.select2-selection__rendered {
    color: var(--bs-body-color);
}

    body
    .select2-container--bootstrap-5
    .select2-selection--single
    .select2-selection__rendered
    .select2-selection__placeholder {
        color: #6c757d;
    }

body
.select2-container--bootstrap-5
.select2-selection--multiple
.select2-selection__rendered
.select2-selection__choice {
    color: var(--bs-body-color);
    border: var(--bs-border-width) solid var(--bs-border-color);
}

body
.select2-container--bootstrap-5.select2-container--disabled
.select2-selection,
body
.select2-container--bootstrap-5.select2-container--disabled.select2-container--focus
.select2-selection {
    color: #6c757d;
    background-color: var(--bs-light-bg-subtle);
    border-color: var(--bs-dark-bg-subtle);
}

.is-valid + body .select2-container--bootstrap-5 .select2-selection,
.was-validated
select:valid + body
.select2-container--bootstrap-5
.select2-selection {
    border-color: #198754;
}

.is-valid + body
.select2-container--bootstrap-5.select2-container--focus
.select2-selection,
.is-valid + body
.select2-container--bootstrap-5.select2-container--open
.select2-selection,
.was-validated
select:valid + body
.select2-container--bootstrap-5.select2-container--focus
.select2-selection,
.was-validated
select:valid + body
.select2-container--bootstrap-5.select2-container--open
.select2-selection {
    border-color: #198754;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

.is-invalid + body .select2-container--bootstrap-5 .select2-selection,
.was-validated
select:invalid + body
.select2-container--bootstrap-5
.select2-selection {
    border-color: #dc3545;
}

.is-invalid + body
.select2-container--bootstrap-5.select2-container--focus
.select2-selection,
.is-invalid + body
.select2-container--bootstrap-5.select2-container--open
.select2-selection,
.was-validated
select:invalid + body
.select2-container--bootstrap-5.select2-container--focus
.select2-selection,
.was-validated
select:invalid + body
.select2-container--bootstrap-5.select2-container--open
.select2-selection {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Inverted colors for bootstrap carousel controls */
html:not(.dark) .carousel button *[class*='-icon'] {
    filter: invert(1) grayscale(100);
}
html:not(.dark) .carousel .carousel-indicators button {
    background-color: #000 !important;
}

html.dark .carousel button *[class*='-icon'] {
    filter: none !important;
}
html.dark .carousel .carousel-indicators button {
    background-color: #fff !important;
}



/************************************
*
*   APEXCHART STYLE OVERRIDE
*
*************************************/
.apexcharts-canvas.apexcharts-theme-dark svg {
    background: none !important;
}



/************************************
*
*   CUSTOM STYLE OVERRIDE
*
*************************************/
/* Globals */
html.dark #pageLoader {
    background-color: #171717;
}

/* Home */
html.dark .sales-card .fa-check-to-slot,
html.dark .sales-card .fa-pen-ruler {
    color: #9aa4ad;
}

html.dark .sales-card.estimate-status:hover,
html .dark a.info-card:hover {
    background-color: #5f6d7b;
}

/* Technician/wallet */
html.dark .custom-carousel-control {
    background-color: rgba(255, 255, 255, 0.5);
}

/* Estimate/Details */
html.dark #calculationTable #vehicleTotals,
html.dark #calculationTable #vehicleTotals th,
html.dark #calculationTable #vehicleTotals td,
html.dark #calculationTable .vehicleTotals,
html.dark #calculationTable .vehicleTotals th,
html.dark #calculationTable .vehicleTotals td {
    background-color: #e0efff24 !important;
}

/* Estimate/Create-Edit */
html.dark select.readonly {
    background-color: #44474b;
}

html.dark #explodedCar,
html.dark .vehiclePartExploded,
html.dark .legendTable {
    --default-color: #636363;
    --default-stroke-color: #222;
    --active-color: #b5924f;
    --active-stroke-color: #ffffff;
    --substitution-color: #b56d6d;
    --needs-evaluation-color: #c10000;
}

html.dark #explodedCar .element.active.compiled {
    fill: url(#compiledFillSelectedDark);
}

html.dark #explodedCar .element.active.paint {
    fill: url(#paintFillSelectedDark);
}

html.dark #explodedCar .element.compiled {
    fill: url(#compiledFillDark);
}

html.dark #explodedCar .element.paint {
    fill: url(#paintFillDark);
}

html.dark .legendTable .legend-dented {
    background-image: url("/images/misc/Dots-Seamless-Pattern-Colored-Bg-Dark.png");
}

html.dark .legendTable .legend-paint {
    background-image: url("/images/misc/Diagonal-Lines-Seamless-Pattern-Colored-Bg-Dark.png");
}

html.dark .legendTable .legend-validation {
    background-color: #2b2f33;
}

/* Agenda */
html.dark .fc .fc-col-header-cell {
    background-color: #2c3e50;
}

html.dark .fc td {
    background-color: #494957;
}

html.dark .fc td.fc-day-other {
    background-color: #2b2f33;
}

html.dark .fc .fc-day-today {
    background-color: #51769b !important;
}

html.dark .fc td:not(.fc-day-other) .fc-daygrid-day-number {
    background-color: #c9c9c9;
}

html.dark .fc td:hover {
    background-color: #2c3e50 !important;
}

html.dark .fc .fc-daygrid-week-number {
    color: white;
}

html.dark .fc .fc-event.isCreatedByCustomer {
    --color: rgba(0, 0, 0, 0.5);
}
html.dark .fc .fc-event.isCreatedByCustomer.needsConfirmation,
html.dark .fc .fc-event.isCreatedByCustomer.isDeclined {
    --color: rgba(0, 0, 0, 0.3);
}

/* DriveIn welcome customer */
html.dark main,
html.dark footer {
    background-color: inherit;
}

html.dark .carousel-item {
    background: #2b2f33;
    box-shadow: 9px 9px 18px #24272b, -9px -9px 18px #32373b;
}

/* Show all notifications page */
html.dark #notificationsContainer .card:hover,
html.dark #notificationsContainer .card.read {
    background-color: #343a40;
}