:root[custom-theme="false"] {
    /* System colors */
    --main-custom-color: rgb(35, 46, 140);
    --main-custom-color-rgb: 35, 46, 140;

    --first-color: rgb(35, 46, 140);
    --first-color-rgb: 35, 46, 140;

    --second-color: rgb(228, 31, 40);
    --second-color-rgb: 228, 31, 40;

    --third-color: rgb(63, 63, 63);
    --third-color-rgb: 63, 63, 63;

    --forth-color: rgb(12, 16, 49);
    --forth-color-rgb: 12, 16, 49;

    --fifth-color: rgb(153, 122, 64);
    --fifth-color-rgb: 153, 122, 64;

    --sixth-color: rgb(21, 28, 84);
    --sixth-color-rgb: 21, 28, 84;

    --button-color: rgb(35, 46, 140);
    --button-color-rgb: 35, 46, 140;

    --second-button-color: rgb(228, 31, 40);
    --second-button-color-rgb: 228, 31, 40;
}

:root[custom-theme="true"] {
    /* System colors */
    --main-custom-color: rgb(171, 135, 70);
    --main-custom-color-rgb: 171, 135, 70;

    --first-color: rgb(171, 135, 70);
    --first-color-rgb: 171, 135, 70;

    --second-color: rgb(34, 30, 31);
    --second-color-rgb: 34, 30, 31;

    --third-color: rgb(212, 184, 95);
    --third-color-rgb: 212, 184, 95;

    --forth-color: rgb(77, 61, 31);
    --forth-color-rgb: 77, 61, 31;

    --fifth-color: rgb(153, 122, 64);
    --fifth-color-rgb: 153, 122, 64;

    --sixth-color: rgb(59, 47, 25);
    --sixth-color-rgb: 59, 47, 25;

    --button-color: rgb(171, 135, 70);
    --button-color-rgb: 171, 135, 70;

    --second-button-color: rgb(34, 30, 31);
    --second-button-color-rgb: 34, 30, 31;
}

:root[custom-theme="true"] .login .form-side {
    background-color: #AB8746;
}

:root[custom-theme="true"] .login .form-side .input-container input[type="submit"] {
    background-color: #221E1F !important;
}

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

.login .form-side .input-container input[type="submit"] {
    background-color: #E41F28 !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(--main-custom-color);
}

.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: var(--third-color);
}

.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.color-primary:hover {
    background-color: rgba(var(--forth-color-rgb), 0.1);
}

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

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

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

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

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

.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-outline {
    border-color: var(--second-color) !important;
    color: var(--second-color) !important;
}

/*----*/
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);
}