:root {
    --text-color: #16404D;
    --background-color: #1d4262;
    --semi-background-color: #27667B;
    --border-bottom-color-header: #43859b;
    --navbar-brandlogo-width: 50%;
    --navbar-brandlogo-width-sm: 40px;
    --navbar-nav-logo-height: 48px;
    --navbar-brand-width: 210px;
    --navbar-brand-logo-bg: #d4e7f8;
    --navbar-brand-logo-margin-left: -12px;
    --tooltip-background-color: #16404D;
}

.textColor {
    color: var(--text-color) !important;
}

.login-header {
    background-color: var(--background-color) !important;
}

.nav-bg {
    background-color: var(--background-color);
}

.bg-icon {
    background-color: var(--background-color);
}

.bg-title-bar {
    background-color: var(--background-color);
}

.forget_password_header {
    border-bottom-color: var(--border-bottom-color-header) !important;
    background-color: var(--background-color) !important;
}

.left-menu {
    background-color: var(--semi-background-color);
}

.select-card.selected {
    border-color: var(--semi-background-color) !important;
}

.select-card.selected .select-center-logo {
    color: var(--semi-background-color);
}

.bg-custom {
    background-color: var(--background-color);
}

.tooltip-inner {
    background-color: var(--tooltip-background-color) !important;
}

.tooltip {
    --bs-tooltip-bg: var(--tooltip-background-color) !important;
}

.progressService:hover:after {
    background: var(--background-color);
}

table thead th {
    color: var(--text-color) !important;
}

.profile-img {
    border: 1px solid var(--background-color);
}

.center-profile:hover {
    color: var(--background-color);
}

.profile-table tr td:first-child {
    color: var(--background-color) !important;
}

.brandLogo {
    width: var(--navbar-brandlogo-width) !important;
}

.nav-logo {
    height: var(--navbar-nav-logo-height) !important;
    width: var(--navbar-nav-logo-width);
    border-radius: var(--navbar-nav-logo-border-radius);
}

.navbar {
    border-bottom: 1px solid var(--border-bottom-color-header);
}

.navbar-brand:not(.home-nav) {
    width: var(--navbar-brand-width);
    background-color: var(--navbar-brand-logo-bg);
    margin-left: var(--navbar-brand-logo-margin-left);
}

@media (max-width: 480px),
(min-width: 481px) and (max-width: 768px) {
    .left-menu {
        background-color: #00000069;
    }

    .menu-container {
        background-color: var(--semi-background-color);
    }

    .nav-logo {
        width: var(--navbar-brandlogo-width-sm);
    }
}