:root {
    --first-bg: #063D42;
    --second-bg: #32727e;
    /* System colors */
    --main-custom-color: rgb(6, 61, 66);
    --main-custom-color-rgb: 5, 61, 66;

    --first-color: rgb(6, 61, 66);
    --first-color-rgb: 6, 61, 66;

    --second-color: rgb(50, 114, 126);
    --second-color-rgb: 50, 114, 126;

    --third-color: rgb(146, 180, 187);
    --third-color-rgb: 146, 180, 187;

    --forth-color: rgb(0, 83, 66);
    --forth-color-rgb: 0, 83, 66;

    --fifth-color: rgb(50, 83, 56);
    --fifth-color-rgb: 50, 83, 56;

    --sixth-color: rgb(67, 111, 74);
    --sixth-color-rgb: 67, 111, 74;

    --button-color: rgb(6, 61, 66);
    --button-color-rgb: 6, 61, 66;

    --second-button-color: rgb(6, 61, 66);
    --second-button-color-rgb: 6, 61, 66;
}

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

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

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

#dropdown-user>#LabName {
    color: #AB8746;
}

.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(--button-color) !important;
}

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

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

.btn.purple:hover,
input[type="submit"].purple:hover {
    color: var(--button-color) !important;
    border: 1px solid var(--button-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(--main-custom-color);
}

.dropdown-menu .dropdown-title {
    color: var(--main-custom-color);
    border-color: var(--main-custom-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(--main-custom-color);
}

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

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

.blue,
.purple {
    background-color: var(--main-custom-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;
}

button.btn.navy {
    border-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:not([id*="LnkDelete"]) {
    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(--secondary-normal);
}

.breadcrumb.breadcrumb-custom .breadcrumb-item {
    --breadcrumb-color: var(--main-custom-color);
}

html:dir(rtl) .breadcrumb.breadcrumb-custom .breadcrumb-item a::before {
    --breadcrumb-color: var(--main-custom-color);
}

/*-------*/
.manage-card .icon-wrapper {
    background-color: rgba(var(--third-color-rgb), 0.1);
}

.manage-card .projects-num,
.manage-card .projects-num .disc {
    color: var(--third-color) !important;
}

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

.manage-card a.btn.btn-outline {
    border-color: var(--sixth-color) !important;
    color: var(--sixth-color) !important;
}

.manage .manage-card .icon-wrapper .svg-inline--fa {
    font-size: 24px;
}
/*----*/
.manage .manage-card.color-blue:hover {
    background-color: rgba(var(--first-color-rgb), 0.1);
}

.manage-card.color-blue .icon-wrapper {
    background-color: rgba(var(--first-color-rgb), 0.1) !important;
}

.manage-card.color-blue .projects-num,
.manage-card.color-blue .projects-num .disc {
    color: var(--first-color) !important;
}

.manage-card.color-blue a.btn.btn-outlin:hover {
    border-color: var(--first-color) !important;
}

.manage-card.color-blue .icon-wrapper .svg-inline--fa {
    color: var(--first-color-rgb);
}
/*-------*/
.manage .manage-card.color-primary:hover {
    background-color: rgba(var(--first-color-rgb), 0.1);
}

.manage-card.color-primary .icon-wrapper {
    background-color: var(--first-color);
}

.manage-card.color-primary .projects-num,
.manage-card.color-primary .projects-num .disc {
    color: var(--first-color) !important;
}

.manage-card.color-primary a.btn.btn-outline {
    border-color: var(--first-color) !important;
    color: var(--first-color) !important;
}
.manage-card.color-green .icon-wrapper .svg-inline--fa {
    color: var(--first-color-rgb);
}
/*-------*/
.manage .manage-card.color-green:hover {
    background-color: rgba(var(--second-color-rgb), 0.1);
}

.manage-card.color-green .icon-wrapper {
    background-color: rgba(var(--second-color-rgb), 0.1);
}

.manage-card.color-green .projects-num,
.manage-card.color-green .projects-num .disc {
    color: var(--second-color) !important;
}

.manage-card.color-green a.btn.btn-outlin:hover {
    border-color: var(--second-color) !important;
}

.manage-card.color-green .icon-wrapper .svg-inline--fa {
    color: var(--second-color-rgb);
}

/*----*/
.manage .manage-card.color-red:hover {
    background-color: rgba(var(--third-color-rgb), 0.1);
}

.manage-card.color-red .icon-wrapper {
    background-color: rgba(var(--third-color-rgb), 0.1);
}

.manage-card.color-red .projects-num,
.manage-card.color-red .projects-num .disc {
    color: var(--third-color) !important;
}

.manage-card.color-red a.btn.btn-outlin:hover {
    border-color: var(--third-color) !important;
}

.manage-card.color-red .icon-wrapper .svg-inline--fa {
    color: var(--third-color-rgb);
}
/*----*/
.manage .manage-card.color-yellow:hover {
    background-color: rgba(var(--forth-color-rgb), 0.1);
}

.manage-card.color-yellow .icon-wrapper {
    background-color: rgba(var(--forth-color-rgb), 0.1) !important;
}

.manage-card.color-yellow .projects-num,
.manage-card.color-yellow .projects-num .disc {
    color: var(--forth-color) !important;
}

.manage-card.color-yellow a.btn.btn-outlin:hover {
    border-color: var(--forth-color) !important;
}

.manage-card.color-yellow .icon-wrapper .svg-inline--fa {
    color: var(--forth-color-rgb);
}
/*----*/
input[type="file"]::-webkit-file-upload-button {
    background-color: var(--main-custom-color);
    border-color: var(--main-custom-color);
}

input[type="file"]::-webkit-file-upload-button:hover {
    color: var(--main-custom-color);
    border-color: var(--main-custom-color);
}

/*------------*/
.btn.purple:is([id*="_btnPrint"], [id*="_btnprint"], [id*="_btnPrintTPL"]),
.btn.purple:is([id*="_btnPrint"], [id*="_btnprint"], [id*="_btnPrintTPL"])+button:is([data-toggle], [data-bs-toggle]).btn.purple {
    background-color: var(--second-button-color) !important;
}

.btn.purple:is([id*="_btnPrint"], [id*="_btnprint"], [id*="_btnPrintTPL"]):hover,
.btn.purple:is([id*="_btnPrint"], [id*="_btnprint"], [id*="_btnPrintTPL"])+button:is([data-toggle], [data-bs-toggle]).btn.purple:hover {
    background-color: #fff !important;
    border-color: var(--second-button-color) !important;
    color: var(--second-button-color) !important;
}

/*------------*/
.btn.purple:is([id*="_BtnExel"], [id*="_btnExel"]),
.btn.purple:is([id*="_BtnExel"], [id*="_btnExel"])+button:is([data-toggle], [data-bs-toggle]).btn.purple {
    background-color: rgba(var(--second-button-color-rgb), 0.1) !important;
    color: var(--second-button-color) !important;
}

.btn.purple:is([id*="_BtnExel"], [id*="_btnExel"]):hover,
.btn.purple:is([id*="_BtnExel"], [id*="_btnExel"])+button:is([data-toggle], [data-bs-toggle]).btn.purple:hover {
    background-color: #fff !important;
    border-color: var(--second-button-color) !important;
    color: var(--second-button-color) !important;
}

/*----------*/
.advance .widget-box .tasks .task .complete .circle {
    border-color: var(--main-custom-color);
}

.advance .widget-box .tasks .task .complete .svg-inline--fa {
    color: var(--main-custom-color);
}

.advance .widget-box .tasks .task .complete .line {
    background-color: var(--main-custom-color);
}

/*---------*/
.widget-header .btn {
    background-color: var(--button-color);
}

/*--------*/
.self-service .reviews .percent svg circle:nth-child(2) {
    stroke: var(--main-custom-color);
}

/*-----------*/
.self-service table.table-bordered thead tr,
.light-blue-button {
    background-color: rgba(var(--main-custom-color-rgb), 0.2);
}

/*----------*/
.employee-file {
    background-color: var(--main-custom-color);
}

.employee-file .tab-container .tab-buttons svg {
    color: var(--main-custom-color);
}

.employee-file .tab-container .tab-buttons .tablinks:hover {
    background-color: var(--third-color) !important;
}

.tab button.active {
    color: var(--main-custom-color);
}

input[type="submit"] {
    background-color: var(--button-color) !important;
}

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

.items .item.light-yellow .icon-wrapper.yellow {
    background-color: rgba(var(--first-color-rgb), 1) !important;
}

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

.items .item.light-orange .icon-wrapper.orange {
    background-color: rgba(var(--second-color-rgb), 1) !important;
}

/*--------*/
.items .item.light-blue {
    background-color: rgba(var(--third-color-rgb), 0.2) !important;
}

.items .item.light-blue .icon-wrapper.blue {
    background-color: rgba(var(--third-color-rgb), 1) !important;
}

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

.items .item.light-navy .icon-wrapper.navy {
    background-color: rgba(var(--forth-color-rgb), 1) !important;
}

/*-------*/
.models-multi-forms .heading,
.models-multi-forms .heading .form-title {
    background-color: var(--main-custom-color);
}

.models-multi-forms .heading .form-title.active,
.models-multi-forms .heading .form-title:hover {
    color: var(--main-custom-color);
    border-color: var(--main-custom-color);
}

/*-----------------*/
.pagination table td:hover,
.pagination span,
.currency .table-bordered tr:last-child span {
    background-color: var(--main-custom-color);
}

.pagination table td a:hover {
    background-color: var(--main-custom-color) !important;
}

/*----------------*/
.advance .steps .step .step-body,
.advance .steps .step .step-line {
    background-color: var(--main-custom-color);
}

/*----*/
.advance .widget-box .tasks .task .task-body .message .svg-inline--fa {
    color: var(--main-custom-color);
}