:root {
    --eld-dark: #000000;
    --eld-light: #f3f3f3;
    --eld-primary: #bb955b;
    --eld-primary2: #bb955b;
    --eld-primary3: #ad8740;

    /* custom variables, used only in this file */
    --eld-custom-dark: #414141;
    --eld-custom-dark2: #262626;
    --eld-custom-nav-bg: var(--eld-custom-dark);
}

html,
.main-content,
.content {
    background-color: var(--eld-custom-dark2);
}
.header-area {
    color: white;
}

.work-area {
    background-color: var(--eld-custom-dark2);
    border-color: var(--eld-custom-dark2);
}

/* customers custom styling */
.customers-wrapper {
    padding: 0;
    padding-right: 15px;

    /* legend */
    .support-service-types-legend {
        margin: 0;
        background-color: var(--eld-custom-dark);
        border-radius: 10px;
        padding: 15px 0;
        a:hover {
            color: var(--eld-light);
        }
    }

    /* left panel */
    .col-sm-5 .col-sm-12 {
        form {
            margin-top: 15px;
            padding: 15px;
            background-color: var(--eld-custom-dark);
            border-radius: 10px 10px 0 0;
        }

        .row:has(.organizations-list-grid) {
            margin: 0;
            padding-bottom: 15px;
            background-color: var(--eld-custom-dark);
            border-radius: 0 0 10px 10px;
            .organizations-list-grid {
                background-color: white;
            }
        }
    }

    /* right panel */
    .col-sm-7 {
        padding: 0;
        .tab-content {
            padding: 15px;
            background-color: var(--eld-custom-dark);
            border-radius: 0 0 10px 10px;
            --eld-custom-nav-bg: var(--eld-custom-dark2);

            /* white loaders */
            driver-list .col-sm-12.text-center,
            admin-truck-list .col-sm-12.text-center,
            p {
                color: white;
            }

            /* all grids white bg */
            .ui-grid {
                background-color: white;
            }
        }
    }
}

/* main screen app tile */
.admin-main-screen-menu {
    border-radius: 10px;
    background-color: var(--eld-custom-dark);
    border-color: var(--eld-custom-dark);
    color: white;

    &:hover {
        background-color: #535353;
    }
}

/* dark nav dabs */
.nav-tabs {
    border-color: var(--eld-custom-nav-bg);
    li {
        a {
            color: white;
        }
        &.active a,
        &.active a:hover,
        &.active a:focus,
        a:hover {
            color: white;
            background-color: var(--eld-custom-nav-bg);
            border-color: var(--eld-custom-nav-bg);
        }
    }
}