:root {
    /* System colors */

    --first-color: rgb(152, 133, 117);
    --first-color-rgb: 152, 133, 117;

    --second-color: rgb(58, 82, 96);
    --second-color-rgb: 58, 82, 96;

    --third-color: rgb(120, 105, 92);
    --third-color-rgb: 120, 105, 92;

    --forth-color: rgb(40, 57, 67);
    --forth-color-rgb: 40, 57, 67;

    --fifth-color: rgb(49, 6, 4);
    --fifth-color-rgb: 40, 6, 4;

    --sixth-color: rgb(110, 70, 72);
    --sixth-color-rgb: 110, 70, 72;
}

.login .form-side {
    background-color: #988575;
}

.login .form-side .input-container input[type="submit"] {
    background-color: #3A5260 !important;
}

.dropdown-item:active {
    background-color: var(--second-color);
}

#dropdown-user>#LabName {
    color: #008C4D;
}

.owl-theme .owl-dots .owl-dot span {
    background-color: transparent;
    border: 1px solid #D6D6D6;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background-color: var(--first-color) !important;
}

.btn.purple,
.btn.blue,
input[type="submit"].purple {
    background-color: var(--second-color) !important;
}

.modal .modal-header button {
    background-color: rgba(var(--second-color-rgb), 0.5);
}

.modal-body .multi-forms .heading .form-title.active {
    border-top: 4px solid var(--first-color);
    color: var(--first-color);
}

.side-bar .nav-pills .nav-item .nav-link.show::before,
.side-bar .nav-pills .nav-item .nav-link:hover::before {
    background-color: var(--second-color);
}

.side-bar .nav-pills .nav-item .nav-link.show .svg-inline--fa,
.side-bar .nav-pills .nav-item .nav-link:hover .svg-inline--fa {
    color: var(--second-color);
}

table.table-bordered .thead {
    background-color: rgba(var(--first-color-rgb), 0.06) !important;
}

.manage .manage-card.color-red:hover {
    background-color: rgba(247, 79, 79, 0.1)
}

.manage .manage-card.color-yellow:hover {
    background-color: rgba(var(--first-color-rgb), 0.1)
}

.modal .modal-header .blue {
    color: var(--first-color) !important;
}

.side-bar .badge,
.main-content .modal .heading .badge {
    background-color: var(--second-color);
}

.modal .modal-header {
    border-color: var(--first-color);
}

.btn.purple:hover,
input[type="submit"].purple:hover {
    color: var(--forth-color) !important;
    border: 1px solid var(--forth-color) !important;
}

.widget-header:has(.widget-title.color-yellow)::before {
    background-color: var(--first-color);
}

.color-yellow {
    color: var(--first-color) !important;
    border-color: var(--first-color);
    stop-color: var(--first-color);
}

.widget-header::before {
    background-color: var(--second-color);
}

.dropdown-menu .dropdown-title {
    color: var(--second-color);
    border-color: var(--second-color);
}

.shown-items .light-orange {
    background-color: rgba(var(--second-color-rgb), 0.06) !important;
}

.light-orange {
    background-color: rgba(var(--second-color-rgb), 0.2) !important;
}

.widget-header:has(.widget-title.color-orange)::before {
    background-color: var(--second-color);
}

.color-orange {
    color: var(--second-color) !important;
    border-color: var(--second-color);
    stop-color: var(--second-color);
}

.orange,
.btn.orange,
input[type='submit'].orange {
    background-color: var(--second-color) !important;
}

.shown-items .light-yellow {
    background-color: rgba(var(--first-color-rgb), 0.06) !important;
}

.light-yellow {
    background-color: rgba(var(--first-color-rgb), 0.2) !important;
}

.yellow {
    background-color: var(--first-color) !important;
}

.shown-items .light-blue,
.shown-items .light-purple {
    background-color: rgba(var(--third-color-rgb), 0.06) !important;
}

.light-blue,
.light-purple,
.manage .manage-card.color-blue:hover {
    background-color: rgba(var(--third-color-rgb), 0.2) !important;
}

.widget-header:has(.widget-title.color-blue)::before {
    background-color: var(--third-color);
}

.color-blue,
.color-purple {
    color: var(--third-color) !important;
    border-color: var(--third-color);
    stop-color: var(--third-color);
}

.seeMore,
.seeMore:hover {
    color: var(--forth-color);
}

.blue,
.purple {
    background-color: var(--third-color) !important;
}

.shown-items .light-navy {
    background-color: rgba(var(--forth-color-rgb), 0.06) !important;
}

.light-navy {
    background-color: rgba(var(--forth-color-rgb), 0.2) !important;
}

.color-navy {
    color: var(--forth-color) !important;
    border-color: var(--forth-color);
    stop-color: var(--forth-color);
}

.widget-header:has(.widget-title.color-navy)::before {
    background-color: var(--forth-color);
}

.navy {
    background-color: var(--forth-color) !important;
}

table.table-bordered :is(a, th) {
    color: var(--first-color);
}


button.btn.purple-outline,
input[type="submit"].purple-outline {
    color: var(--first-color) !important;
    border: 1px solid var(--first-color) !important;
}

.green {
    background-color: var(--sixth-color);
}

.color-green {
    color: var(--sixth-color) !important;
    border-color: var(--sixth-color);
    stop-color: var(--sixth-color);
}

.widget-header:has(.widget-title.color-green)::before {
    background-color: var(--sixth-color);
}

.light-green {
    background-color: rgba(var(--sixth-color-rgb), .06);
}

.manage .manage-card.color-green:hover {
    background-color: rgba(var(--sixth-color-rgb), .06);
}

.color-bright-blue {
    color: var(--fifth-color) !important;
    border-color: var(--fifth-color);
    stop-color: var(--fifth-color);
}

.bright-blue {
    background-color: var(--fifth-color);
}

.widget-header:has(.widget-title.color-bright-blue)::before {
    background-color: var(--fifth-color);
}


.light-bright-blue {
    background-color: rgba(var(--fifth-color-rgb), .06);
}

.red {
    background-color: var(--second-color);
}

.color-red {
    color: var(--second-color) !important;
    border-color: var(--second-color);
    stop-color: var(--second-color);
}

.manage .manage-card.color-red:hover {
    background-color: rgba(var(--second-color-rgb), .06);
}

.bright-yellow {
    background-color: var(--forth-color);
}

.benefit .num {
    background-color: rgba(var(--sixth-color-rgb), 0.1);
    color: #242424;
}

.self-service .prepare .content>.btn,
span.notification,
.main-content span.badge {
    background-color: var(--sixth-color);
}

.item h5,
.item p {
    font-size: 18px;
}

.login .carousel-side {
    background-image: url('/CustomReport/Css/bg_img.png');
    background-repeat: no-repeat;
    min-height: 100vh;
    height: unset;
    background-size: cover;
    position: relative;
    z-index: 2;
}

.login .carousel-side::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.24);
    z-index: 1;
}

.owl-carousel {
    z-index: 2;
}

.login .carousel-container {
    position: relative;
    z-index: 3;

}

.login .carousel-container::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #ffffff00;
    backdrop-filter: blur(11px) brightness(115%);
    width: 115%;
    height: 115%;
    z-index: 2;
    border-radius: 8px;
    border: 1px solid#707070;
}

.login .prev,
.login .next {
    z-index: 4;
}

.owl-theme .owl-dots .owl-dot span {
    border-color: #888;
}

.login .logo {
    padding: 4px;
    border-radius: 4px;
    background-color: #676767;
    background-image: url('/CustomReport//Css/logo.png');
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center;
    aspect-ratio: 90 / 80;
    left: 30px;
    top: 15px;
}

.login .logo img {
    opacity: 0;
    visibility: hidden;
}