:root {
    /* Login screen colors */
    --first-bg: #0A757C;
    --second-bg: #46B2B6;

    /* System colors */
    --first-color: #1d2d36;
    --first-color-rgb: 29, 45, 54;

    --second-color: #83cfcd;
    --second-color-rgb: 131, 207, 205;

    --third-color: #013145;
    --third-color-rgb: 1, 49, 69;

    --forth-color: #017782;
    --forth-color-rgb: 1, 119, 130;
}

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

.login .form-side .input-container input[type="submit"] {
    background-color: #1D2D36 !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,
input[type="submit"].purple {
    background-color: var(--forth-color) !important;
}

.modal .modal-header button {
    background-color: rgba(var(--forth-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(--forth-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 {
    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;
}

.light-green {
    background-color: rgba(53, 199, 36, 0.06);
}

.light-bright-blue {
    background-color: rgba(0, 196, 255, .06);
}