body {
    font-family: var(--font-family);
    color: var(--font-color);
    font-size: var(--FontSize);
    font-weight: var(--FontWeight);
    line-height: inherit
}
.card-body {
    padding: 4px 8px;
}
.card {
    background-color: var(--Body-color);
}
/* ===== Highlight عام ===== */
.highlight.form-control,
.highlight.form-select,
.readonly-select {
    background-color: #e6f4f2;
    border-color: var(--primary-color);
    color: #333;
}
/* ===== عند التركيز ===== */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--primary-color) 25%, transparent) !important;
    outline: none !important;
}
/* ===== Hover ===== */
.highlight.form-control:hover,
.highlight.form-select:hover {
    border-color: var(--primary-color);
}
/* ===== readonly input ===== */
input[readonly].form-control {
    background-color: #f6f6f6;
    border-color: #ccc;
    cursor: not-allowed;
}

/* ===== readonly select (custom class) ===== */
.readonly-select {
    pointer-events: none;
    background-color: #f6f6f6;
    border-color: #ccc;
    cursor: not-allowed;
}

/* -- read only */
.wj-inputnumber .wj-form-control:read-only {
    background-color: var(--backgroundlight-color);
    cursor: not-allowed;
}

.wj-inputdate .wj-form-control:read-only {
    background-color: var(--backgroundlight-color);
    cursor: not-allowed;
}

.wj-autocomplete .wj-form-control:read-only,
.wj-autocomplete .wj-form-control:read-only ~ span.wj-input-group-btn {
    background-color: var(--backgroundlight-color);
    cursor: not-allowed;
}

select[aria-readonly="true"] {
    pointer-events: none;
    /*opacity: 0.80;*/
    background: var(--backgroundlight-color);
    font-size: 0.8rem;
    cursor: not-allowed;
}

[class*="sidebar-light-"] .nav-treeview > .nav-item > .nav-link {
    color: var(--sidebar-color);
}

.calculated {
    background-color: var(--backgroundlight-color);
}

.wj-alt.calculated {
    background-color: var(--backgroundlight-color);
}
.our-service {
    padding: 100px 0;
    background: var(--secondary-color);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: auto;
}

.service-content {
    position: sticky;
    top: 100px;
    margin-right: 30px;
}
.service-content .section-title h3,
.service-content .section-title h2,
.service-content .section-title p {
    color: var(--primary-color);
}
.service-item-list {
    margin-bottom: 0px;
    padding-bottom: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 60px 30px;
}

.service-item {
    width: calc(50% - 15px);
}

.service-item .icon-box {
    background-image: linear-gradient(to right, var(--dark-color) 0%, var(--accent-color) 50%, var(--dark-color) 100%);
    background-size: 200% auto;
    border-radius: 50%;
    height: 70px;
    width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    transition: all 0.4s ease-in-out;
}

.service-item:hover .icon-box {
    background-position: right center;
}

.service-item .icon-box img {
    max-width: 35px;
}

.service-item-content h3 {
    font-size: 22px;
    text-transform: capitalize;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.service-item-content p {
    color: var(--text-color);
    margin-bottom: 0;
}

input[type="number"] {
    width: 100%; /* Set a fixed width */
    min-width: 100px;
    max-width: 140px;
}

input[type="date"] {
    width: 100%; /* Set a fixed width */
    min-width: 120px;
    max-width: 140px;
}

#Notic {
    width: 100%;
    min-width: 200px;
    max-width: 600px;
}

.wj-control .wj-input-group .wj-form-control:focus {
    outline: none; /* Removes default outline */
    border: 1px solid var(--primary-color);    
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--primary-color) 25%, transparent) !important;
}

.wj-inputdate .wj-input-group .wj-form-control {
    width: 100%; /* Set a fixed width c1-input-number */
    min-width: 120px;
    max-width: 140px;
}

/* Center align headers */
/*   .wj-header {
            text-align: center !important;
        } */

/* Align footer text like column cells (left or right based on column) */
.wj-footer .wj-cell {
    text-align: right !important; /* Adjust as needed */
}

.wj-cells .wj-cell.wj-state-selected {
    background: var(--primary-color);
    color: var(--white-color);
}

/* when put mouse  */
[class*="sidebar-light-"] .nav-treeview > .nav-item > .nav-link:hover, [class*="sidebar-light-"] .nav-treeview > .nav-item > .nav-link:focus {
    background-color: var(--sidebar-color);
    color: var(--white-color);
}

[class*="sidebar-light-"] .nav-treeview > .nav-item > .nav-link.active, [class*="sidebar-light-"] .nav-treeview > .nav-item > .nav-link.active:hover {
    background-color: color-mix(in srgb, var(--primary-color) 70%, white);
    color: var(--white-color);
}
/* --- When Select  */
[class*="sidebar-light-"] .nav-treeview > .nav-item > .nav-link:hover {
    background-color: color-mix(in srgb, var(--sidebar-color) 70%, white);
}

[class*="sidebar-light-"] .sidebar a {
    color: var(--sidebar-color);
}

.sidebar-dark-white .nav-sidebar > .nav-item > .nav-link.active, .sidebar-light-white .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--sidebar-color);
    color: var(--white-color);
}

[class*="sidebar-light"] .brand-link, [class*="sidebar-light"] .brand-link .pushmenu {
    color: var(--sidebar-color);
}

/*.nav-item, a:link {
    color: var(--sidebar-color);
}
*/
/* visited link */
/*.nav-item, a:visited {
    color: #ffbf00;
}*/
/* mouse over link */
.nav-item:hover {
    color: var(--white-color);
}

a:hover {
    color: white;
    background-color: color-mix(in srgb, var(--primary-color) 50%, white);
    border-radius: 5px;
}
a {
    color: var(--primary-color);
    transition: 0.2s ease-in-out;
    padding: 3px 6px;
    border-radius: 4px;
    text-decoration: none;
}
.btn-outline-light {
    color: var(--dark-color);
}
.navbar {
    color: var(--navbar-color);
    background-color: var(--navbarback-color);
}

/* .navbar-light {
    color: var(--navbar-color);
    background-color: var(--backgroundlight) !important;
}
*/

.nav-item {
    color: var(--navbar-color);
    background-color: var(--navbarback-color);
}

.bg-white {
    background-color: var(--primary-color) !important;
}


.layout-navbar-fixed .wrapper .sidebar-light-white .brand-link:not([class*="navbar"]) {
    background-color: var(--navbarback-color);
}

.footer {
    background: var(--footer-color);
}

.content-wrapper {
    background-color: var(--ContentWrapper);
}

.nav-item > .nav-link.active {
    color: var(--white-color);
    background-color: var(--primary-color);
}



.main-footer {
    color: var(--white-color);
    background-color: var(--primary-color);
}