:root {
    /* Text & neutrals */
    --text-primary:     #ffffff;
    --text-light:       #d3d3d3;
    --bg-page: #494949;
    --bg-surface:       #484848;
    --bg-surface-alt:   rgba(0, 0, 0, 0.3);
    --bg-surface-alt-2: #383838;
    --border-color:     #575757;

    /* Accent palette */
    --primary: #53a6ea;
    --primary-darker: #2a628f;
    --primary-light: #57a0f3;
    --info: #354f6e;
    --info-darker: #2b4056;
    --info-constrasted: #86b5ea;
    --info-constrasted-hover: #bfd8f5;
    --success:          #7eda93;
    --warning:          #f1b98a;
    --warning-dark: #ad7340;
    --danger:           #e78991;
    --secondary:        #6c757d;
    --secondary-lighter: #9ca7b0;
}

/* Body */
body {
    color: var(--text-primary);
    background-color: var(--bg-page) !important;
    background-image: none;
}

/* Wrappers */
.contentWrapper,
.login-wrapper,
.jumbotron {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Modal & Select2 */
body.modal-open .modal,
.select2-container {
    color: #282828;
}

/* Utilities */
.bg-info      { background-color: var(--info)      !important; }
.bg-primary   { background-color: var(--primary-darker)   !important; }
.bg-secondary { background-color: var(--secondary) !important; }
.bg-warning { background-color: var(--warning-dark) !important; }

/* Buttons */
.btn-secondary {
    background-color: rgba(90, 90, 90, 0.5);
    color: var(--text-primary);
    border-color: transparent;
}
.btn-secondary:hover {
    background-color: rgba(90, 90, 90, 0.7);
}

.btn-outline-info {
    background-color: transparent;
    color: var(--info-constrasted);
    border-color: var(--info-constrasted);
}
.btn-outline-info:hover {
    background-color: var(--bg-surface-alt-2);
    color: var(--info-constrasted-hover);
    border-color: var(--info-constrasted);
}

/* Badges */
.badge-outline {
    border-color: var(--border-color);
    background-color: transparent;
}
.badge-outline.badge-info {
    border-color: var(--info-constrasted);
    color: var(--info-constrasted);
}

/* Links */
a,
.nav-link {
    color: var(--primary);
}
a:hover,
a:focus,
.nav-link:hover,
.nav-link:focus {
    color: var(--primary-light);
}

/* Status colors */
.fc-ok      { color: var(--success); }
.fc-warning { color: var(--warning); }
.fc-danger  { color: var(--danger); }
.fc-link    { color: var(--info-constrasted); }

/* Table */
table {
    color: var(--text-primary) !important;
}

/* Cards */
.card {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color);
}

/* Widget Detail */
.widgetDetail.widgetList, .widgetDetail.widgetVehicleDetail {
    /* background-color: var(--bg-surface-alt);*/
    background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-color);
    border-color: var(--border-color);
}

.widgetListFirstRow {
    border-image: linear-gradient(to right, rgba(255, 255, 255, .5) 0%, rgba(0, 0, 0, .0) 70%);
}

/* Form Select */
.form-select.colorByTheme {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Record Wrapper */
.recordWrapper {
    background-color: rgba(0, 0, 0, 0.5);
    border-top-color: var(--border-color);
}

/* Car Detail Navigation */
.scrolled.carDetailNavigation {
    background: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.75));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-color);
}
.carDetailNavBox {
    background-color: rgba(90, 90, 90, 0.2);
    border-bottom-color: var(--border-color);
}
.carDetailNavBox a {
    color: var(--secondary-lighter);
}
.carDetailNavBox.active {
    background-color: rgba(90, 90, 90, 0.4);
    border-bottom-color: var(--primary);
}
.carDetailNavBox.active a {
    color: var(--text-primary);
}

/* Vehicle Sort */
.vehicleSortWrapper .btn-check,
.vehicleSortWrapper label.btn {
    color: var(--text-light) !important;
}
.vehicleSortWrapper .btn-check:checked + .btn-radio,
.vehicleSortWrapper .btn-radio.active {
    background-color: rgba(57, 126, 183, 0.5);
}

/* Vehicle List & Sidebar */
.vehicle-wrapper {
    border-bottom-color: var(--border-color);
}
#vehicleListSidebar {
    border-left-color: var(--border-color);
}

/* Car Parameters Gradient */
.carParametersWrapper .carInfoText {
    border-image: linear-gradient(
            to right,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(0, 0, 0, 0) 70%
    ) 1;
}

/* Nav Tabs */
.nav-tabs {
    border-bottom-color: var(--border-color);
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--text-primary);
    background-color: var(--primary);
    border-color: var(--primary);
}
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-color: var(--primary);
}

/* Jumbotron & Login */
.jumbotron {
    background-color: rgba(0, 0, 0, 0.34);
}

/* Car List Header */
.carListSideItem .header {
    border-bottom-color: var(--border-color);
}

/* Navbar */
.navbarMain {
    background: linear-gradient(180deg, rgba(0,0,0,.85), rgba(0,0,0,.75));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-color);
}
.navbarMain .dropdown-menu {
    background-color: rgb(45, 45, 45);
    border-color: var(--border-color);
}
.navbarMain .dropdown-menu a {
    color: var(--text-primary);
}
.navbarMain .dropdown-divider {
    border-color: var(--text-primary);
    opacity: 0.7;
}
.navbarMain .dropdownUser .name {
    color: var(--text-primary);
}

/* Modal Content */
.modal-content {
    color: #282828;
}

/* Sidebar Buttons Gradient */
.carDetailSidebarRight .btnZone {
    border-image: linear-gradient(
            to right,
            rgba(255, 255, 255, 0.3) 0%,
            rgba(0, 0, 0, 0) 70%
    ) 1;
}
@media (min-width: 768px) {
    .navbarMain .dropdown-toggle {
        background: var(--info-darker);
        border-color: var(--info);
    }
}
.navbar .dropdown-item:focus, .navbar .dropdown-item:hover {
    background-color: var(--bg-page);
}
.carDetailLeftBarWrapper {
    border-color: var(--border-color);
}
.carDetailLeftBar .active {
    background: var(--bg-surface-alt-2);
}
.carDetailNavigation {
    border-color: var(--border-color);
}
.pagination {
    --bs-pagination-bg: #2f2f2f !important;
    --bs-pagination-disabled-bg: #2f2f2f !important;
    --bs-pagination-disabled-color: #babfc4 !important;
    --bs-pagination-color: var(--primary-light) !important;
    --bs-pagination-active-bg: var(--primary-darker) !important;
    --bs-pagination-active-border-color: var(--primary) !important;
}
.serviceBookSidebar .select2-container--default .select2-selection--multiple {
    background-color: transparent;
    border-color: var(--info-constrasted);
}
.serviceBookSidebar .select2-container--default .select2-selection--multiple .select2-selection__clear {
    color: var(--info-constrasted-hover);
}
.serviceBookSidebar .select2-container .select2-search--inline .select2-search__field {
    color: var(--info-constrasted-hover);
}
.serviceBookSidebar .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--primary-light);
    color: var(--text-primary);
    border-color: var(--info-constrasted);
}
.serviceBookSidebar .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--text-primary);
}
.serviceBookSidebar .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--info-constrasted);
}
.container.order {
    background-color: rgba(0, 0, 0, 0.7);
    margin-top: 20px;
    border-radius: 5px;
    padding: 25px;
}