/*:root {
    --primary-blue: #44BDED;  اللون الجديد 
    --text-color: #333;
    --background-light: #EAF9FF;  خلفية فاتحة متناسقة مع الأزرق الجديد 
    --background-dark: #F5F5F5;  لون الخلفية الداكن 
    --bs-info: #123666!important;
    --bs-info-rgb: 18, 54, 102!important;
    --bs-info-color: #FBFDFE!important;
    --bs-primary: #007bff;  Original primary color 
    --bs-primary-rgb: 0, 123, 255;  Original RGB values 

     Change to your desired primary color 
    --bs-primary: #5B7FCB!important;  Example: Orange 
    --bs-primary-rgb: 91, 127, 103!important;  Corresponding RGB values 
    --esam-card-variant-bg : #C9E7FF!important;
    --esam-card-variant-color :#182947!important;
}*/
 
.card[class*="card-"]:not(.card-outline) > .card-header, .card[class*="text-bg-"]:not(.card-outline) > .card-header {
  color: var(--esam-card-variant-color)!important;
  background-color: var(--esam-card-variant-bg)!important;
}



body {
    font-family: Tahoma, Verdana;
    font-size: 14px;
    color: #292B2A;
}
.bigger-icon {
    transform: scale(1.5); /* Adjust the scale factor as needed */
}

/* Method 2: Using font-size (for icon fonts only) */
.bigger-icon-fs {
    font-size: 1.5rem; /* Adjust the font size as needed (e.g., 2rem, 24px) */
}
/* Method 3: Using font-size with specific units */
.bigger-icon-px {
    font-size: 18px!important; /* Adjust the font size as needed */
}


.borderless td, .borderless th {
    border: none;
}
.FailBG {
    background-color: #FF0000!important;
    color: #FFFFFF!important;
}
.SuccessBG {
    background-color: #12AD16!important;
    color: #FFFFFF!important;
}
.GRepTDHL {
    border-bottom: 1px solid #000000!important;
}
.RepTH3 {
    border: 1px solid #C1C2C4!important;
}
.RepTD2 {
    border: 1px solid #C1C2C4!important;
}
.Ass8TD0{
    background-color: #FFFFFF;
    border-bottom: 1px solid #333333;
}
.Ass8TD1{
    background-color: #C00000!important;
    border-bottom: 1px solid #333333;
    color: #FFFFFF!important;
}
.Ass8TD2{
    background-color: #FFC000!important;
    border-bottom: 1px solid #333333;
    color: #000000!important;
}
.Ass8TD3{
    background-color: #00B050!important;
    border-bottom: 1px solid #333333;
    color: #000000!important;
}
.Ass8TD4{
    background-color: #0070C0!important;
    border-bottom: 1px solid #333333;
    color: #FFFFFF!important;
}
.stacked-icons {
    position: relative; /* Establish positioning context */
    display: inline-block; /* Prevent icons from taking full width */
    width: 1.5em; /* Adjust width as needed */
    height: 1.5em; /* Adjust height as needed */
}

.stacked-icons i {
    position: absolute; /* Position icons absolutely */
    left: 0;
    width: 100%;
    text-align: center; /* Center icons horizontally */
}

.stacked-icons .top-icon {
    top: 0;
    left:-10px;
    font-size: 12px!important;
}
.stacked-icons .top-icon2 {
    top: -5px;
    left:+10px;
    font-size: 10px!important;
}
.stacked-icons .bottom-icon {
    bottom: 0;
}

.nav-link p {
    display: inline; /* allows the text to stay on the same line*/
    margin-left: 1.7em; /* space between icons and text */
}

.form-check-input[type=checkbox] {
    border-radius: .25em;
    border-color: var(--bs-primary);
}



.btn-tool {
    border-radius: 30px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    color: var(--bs-primary-text-emphasis);
    font-size: 18px;
    text-align: center;
    font-weight: 100;
}
.btn-toolIn {
    border-radius: 10px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    color: var(--bs-primary-text-emphasis);
    font-size: 13px;
    text-align: center;
    font-weight: 100;
}
.btn-toolIn:hover {
    color: var(--bs-btn-hover-color);
     background-color: #c9c9c9; 
    border-color: var(--bs-btn-hover-border-color);
}
.btn-app {
    border-radius: 30px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    color: var(--bs-primary-text-emphasis);
    font-size: 18px;
    height: 100px;
    margin: 10px;
    min-width: 100px;
    padding: 15px;
    position: relative;
    text-align: center;
}
.btn-app-250 {
    height: 120px;

    min-width: 240px;
}
.btn-app-200 {
    height: 120px;

    min-width: 200px;
}
.btn-app > .bi
{
    display: block;
    font-size: 30px;
}



.btn-app:hover {
    background-color: #f8f9fa;
    border-color: var(--bs-link-color);
    color: var(--bs-link-color);
}

.btn-app:active, .btn-app:focus {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}



.my-header-class {
    border: 1px solid #ff0000;
}

label:not(.form-check-label):not(.custom-file-label) {
    font-weight: 700;
/*    margin-top: 10px;*/
}

.highlight-row {
    --bs-bg-opacity: 1;
    background-color: #FF0000!important;
}


.bgDone td {
    color: #000000!important;
    background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
    --bs-bg-opacity: .1!important;
}
.bgNotAllowed td {
    color: #000000!important;
    background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
    --bs-bg-opacity: .1!important;
}
.bgStart td {
    color: #000000!important;
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
    --bs-bg-opacity: .1!important;
}
.Just-icon-button
{
    padding: 0;
    font-size: 1rem; /* Adjust icon size as needed */
    line-height: 0.8; /* Adjust line-height to remove extra space */

}
.Just-icon-button-3
{
    padding: 0;
    font-size: 3rem; /* Adjust icon size as needed */
    line-height: 0.8; /* Adjust line-height to remove extra space */

}

.card-primary, .bg-primary, .text-bg-primary {
    --lte-card-variant-bg: #5B7FCB;
    --lte-card-variant-bg-rgb: 91, 127, 103;
    --lte-card-variant-color: #fff;
    --lte-card-variant-color-rgb: 255, 255, 255;
}
 
.bg-light-gray {
    border-radius: 20px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
}
#jsGrid, #jsGrid * {
    font-size: 15px; /* Adjust the size as needed */
}

.sidebar-wrapper .nav-icon {
    display: flex
        ;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    max-width: 1.5rem;
    font-size: 1.1rem;
}
.user-panel .image {
    display: inline-block;
 }
.user-panel {
    transition: margin-left .3s linear, opacity .3s ease, visibility .3s ease;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-bottom: 1px solid var(--bs-border-color);
}

.d-block {
    display: block !important;
    text-decoration: none;
    background-color: transparent;
}
.user-panel .info {
    display: inline-block;
    padding: 5px 5px 5px 20px;
    overflow: hidden;
    white-space: nowrap;
}
.bg-success-subtle {
    background-color: #005493!important;
    color:#fff;

}
.flag-icon {
    background-size:cover ; /* Adjust as needed (cover, contain, etc.) */
    background-repeat: no-repeat;
    color: white; /* Adjust text color for visibility */
    border: none; /* Remove default button border if needed */
    padding: 10px 10px; /* Adjust padding as needed */
    width:2em;
    height: 1.33333333em;
    border: 1px solid var(--bs-gray-600);

}
.flag-icon-en {
    background-image: url(us.svg);
}
.flag-icon-sa {
    background-image: url(sa.svg);
}
.form-check-input[type="checkbox"]:checked {
    box-shadow: 0 0 0 0.25rem rgba(0, 0, 255, 0.25) !important;

}
.form-red-input[type="checkbox"]:checked {
    background-color: red !important;
    border-color: red !important;

}
.form-red-input[type="checkbox"] {
    border-color: red !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 0, 0, 0.25) !important;

}
.form-red-input[type="checkbox"]:focus {
    border-color: red !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 0, 0, 0.25) !important;
}

.form-success-input[type="checkbox"]:checked {
    background-color: darkgreen !important;
    border-color: rgba(0, 100, 0, 0.25) !important;

}
.form-success-input[type="checkbox"] {
    border-color: darkgreen !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 100, 0, 0.25) !important;

}
.form-success-input[type="checkbox"]:focus {
    border-color: darkgreen !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 100, 0, 0.25) !important;
}


/* Or if the carousel has a specific class */
.my-custom-carousel .carousel-indicators { /* Replace my-custom-carousel with your carousel's class */
    display: block; /* Or any other display value */
}


.dropdown-menu-lg .dropdown-item {
    padding: 0.5rem 1rem;
}
.dropdown-item {
    display: block;
    width: 100%;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    clear: both;
    font-weight: 400;
    color: var(--bs-dropdown-link-color);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    border-radius: var(--bs-dropdown-item-border-radius, 0);
}
.float-right {
    float: right !important;
}
.float-left {
    float: left !important;
}
 .dropdown-footer, .dropdown-header {
    text-align: center!important;
}

.dropdown-menu {
    padding: 0 0;
}
 
.unread {
    font-weight: bold;
    background-color: #f8f9fa;
}    
.dropdown-menu-lg {
    min-width: 300px;
    max-width: 400px;
    padding: 0;
}

.brand-text {
    white-space: normal !important;
    word-wrap: break-word;
    overflow: hidden;
    display: block;
    text-align: center; /* Optional */
    font-size: 15px;
}
.profile-user-img {
  border: 3px solid #adb5bd;
  margin: 0 auto;
  padding: 3px;
  width: 150px;
}
.profile-username {
  font-size: 21px;
  margin-top: 5px;
}
.profile-user-block {
    transition: background-color 0.3s ease;
}
.list-group-item-action:hover, .profile-user-block:hover {
  background-color: #CFE2FF;
}
.list-group-item-action {
  border: 0px!important;
}
 .bigger-icon-js {
    font-size: 20px!important; /* Adjust the font size as needed */
 }
.clsBody02,.clsBody05 {
    vertical-align: middle;
}
.form-checkV {
        display: table-cell; /* Treat the div as a table cell */
    vertical-align: middle; /* Vertically aligns the content within the cell */
    /* You might also need to ensure its parent is display: table */
    height: 100%; /* Again, the element needs a defined height */

}
.hoverable-list-item {
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transition for hover */
    cursor: pointer; /* Indicates it's interactive */
}

.hoverable-list-item:hover {
    background-color: #CFE2FF!important; /* Light grey background on hover (Bootstrap's `light` color) */
    /* You could also use a different shade or a custom color */
    /* background-color: rgba(0, 123, 255, 0.1); /* A subtle blue tint */

    /* Optional: Add a subtle lift effect */
/*     transform: translateY(-2px); */
     box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}

.btn-app-index {
    border-radius: 3px;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    color: #6c757d;
    font-size: 12px;
    height: 120px;
    margin: 0 0 10px 10px;
    min-width: 120px;
    max-width: 120px;
     position: relative;
    text-align: center;
    display: flex; /* Enables flex container */
    flex-direction: column; /* Stacks children vertically (icon above text) */
    justify-content: center; /* Centers content vertically */
    align-items: center; /* Centers content horizontally (if flex-direction is column) */
}
.btn-app-index>.fa, .btn-app-index>.fab, .btn-app-index>.fad, .btn-app-index>.fal, .btn-app-index>.far, .btn-app-index>.fas, .btn-app-index>.ion, 
.btn-app-index>.svg-inline--fa {
    display: block;
    font-size: 20px;
}



.cardItems {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: #333;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: block;
  position: relative;
}

element {
}
.text-center {
  text-align: center !important;

}
.grid_index {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

  gap: 20px;

  display: grid;

}
.cardItems i {
  font-size: 4em;
/*  color: #4080C0;*/
  margin-bottom: 10px;
  transition: transform 0.3s ease;
}
.cardItems h4 {
  margin: 10px 0;
  font-size: 1.2em;
}
.cardItems:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}


.card-icon-2 { color: #007bff; } /* Blue */
.card-icon-3 { color: #28a745; } /* Green */
.card-icon-5 { color: #ffc107; } /* Yellow/Orange */
.card-icon-6 { color: #dc3545; } /* Red */
.card-icon-7 { color: #6f42c1; } /* Purple */
.card-icon-8 { color: #17a2b8; } /* Cyan */
.card-icon-9 { color: #fd7e14; } /* Orange */
.card-icon-11 { color: #e83e8c; } /* Pink */
.card-icon-12 { color: #20c997; } /* Teal */
.card-icon-15 { color: #6610f2; } /* Indigo */
.card-icon-16 { color: #6c757d; } /* Gray */
.card-icon-18 { color: #00bcd4; } /* Light Blue */
.card-icon-19 { color: #795548; } /* Brown */
.card-icon-20 { color: #3f51b5; } /* Dark Blue */
.card-icon-21 { color: #cddc39; } /* Lime Green */
.card-icon-22 { color: #9c27b0; } /* Deep Purple */
.card-icon-23 { color: #ff9800; } /* Amber */
.card-icon-24 { color: #4caf50; } /* Light Green */
.card-icon-25 { color: #03a9f4; } /* Lighter Blue */

.nav-link-header {
    color: #FBFDFE!important;
}

.password-strength-meter {
            height: 10px; /* Height of the bar */
            background-color: #e0e0e0; /* Default background */
            border-radius: 5px;
            margin-top: 5px;
            overflow: hidden; /* Ensure the bar stays within bounds */
        }
        .password-strength-bar {
            height: 100%;
            width: 0%; /* Initial width */
            transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Smooth transitions */
            border-radius: 5px;
        }

        /* Strength Levels Colors */
        .strength-weak { background-color: #dc3545; /* Red */ }
        .strength-medium { background-color: #ffc107; /* Orange */ }
        .strength-strong { background-color: #28a745; /* Green */ }
        .strength-very-strong { background-color: #1a7e32; /* Darker Green */ }

        .password-strength-text {
            font-size: 0.85em;
            margin-top: 5px;
            color: #6c757d;
        }
        .text-weak { color: #dc3545; }
        .text-medium { color: #ffc107; }
        .text-strong { color: #28a745; }
        .text-very-strong { color: #1a7e32; }
        .user-profile-panel {
            position: fixed;

        }
        .highlight {
    background-color: yellow;
    font-weight: bold;
}
.card-title {
   
    margin-bottom: 0px!important;
    
}
#loadingOverlay {
    position: fixed; /* Fixes it to the viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background for dimming */
    display: flex; /* Use flexbox for easy centering */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    flex-direction: column; /* Stack spinner and text vertically */
    z-index: 9999; /* Ensure it's on top of other elements */
    color: white; /* Color for the "Generating PDF..." text */
    /* Optional: Add a transition for a smoother fade-in/out */
    transition: opacity 0.3s ease-in-out;  
}

/* Make sure the Bootstrap spinner has visible color */
#loadingOverlay .spinner-border {
    color: var(--bs-primary) !important; /* Ensures the spinner is primary color, adjust if needed */
}