html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 15px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
    margin-bottom: 10px; /*Changed on 21-Dec-2025*/
}
.card-header {
    background-color: #D4EBFE;
    background-image: linear-gradient(62deg, #D4EBFE 0%, #F4E7FE 100%);
}
nav {
    background-color: #D4EBFE;
    background-image: linear-gradient(62deg, #D4EBFE 0%, #F4E7FE 100%);
}
.myBg {
    background-color: #D4EBFE;
    background-image: linear-gradient(62deg, #D4EBFE 0%, #F4E7FE 100%);
}

/* Add some styling for the employee list */
.employee-list {
    list-style-type: none; /* Remove default bullet points */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    border: 1px solid #ddd; /* Add a border for better visibility */
    border-radius: 4px; /* Add rounded corners to the border */
    max-height: 200px; /* Limit the height of the dropdown */
    overflow-y: auto; /* Add scrollbar if content exceeds max height */
    position: absolute; /* Position the list below the input */
    width: auto; /* Ensure the list is as wide as the input */
    background: #fff; /* Set background to white */
    z-index: 1000; /* Ensure it appears above other content */
}

    /* Style each list item */
    .employee-list li {
        padding: 8px 12px; /* Add some padding */
        cursor: pointer; /* Change cursor to pointer on hover */
        font-weight: normal;
        font-size: 12px;
    }

        /* Highlight list item on hover */
.employee-list li:hover {
    background-color: #f0f0f0;
}

header {
    position: sticky;
    top: 0;
    z-index: 1000; /* Ensure it stays on top */
    background-color: white;
}

.readonly-normal[readonly] {
    background-color: #fff; /* Set to the normal input background color */
    pointer-events: none; /* Ensures the input cannot be clicked */
    border-color: #ced4da; /* Keep the normal border */
}

@media (max-width: 767px) { /* max-width for md and below */
    #main-content, #DashboardIndexMain {
        margin-left: 0px !important;
        width: calc(100vw - 10px) !important;
    }
}
#main-content {
    margin-left: 215px;
}

.link-style {
    color: #007bff; /* Nice blue color */
    font-weight: bold;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
    transition: all 0.3s ease;
    display: inline-block;
}

    /* Hover effect */
    .link-style:hover {
        color: #fff;
        background-color: #007bff;
        text-decoration: none;
        box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
    }
/*---------Loader Start----------*/
/* Full-screen overlay for the loader */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure it appears on top */
    color: #fff; /* White text for visibility */
    font-size: 16px; /* Adjust as needed */
}

/* CSS Spinner Animation */
.loader-spinner {
    border: 8px solid #f3f3f3; /* Light gray */
    border-top: 8px solid #3498db; /* Blue color */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
    margin-bottom: 10px; /* Space between spinner and percentage text */
}

#PercentageTxt {
    font-size: 18px; /* Adjust for better visibility */
    font-weight: bold;
    text-align: center;
    margin-top: 10px; /* Space above the text */
}

/* Keyframes for the spin animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/*---------Loader End----------*/


/*----- Scroll Bar Custom Start------*/

/* For modern browsers */
::-webkit-scrollbar {
    width: 12px; /* Width of the scrollbar */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Scrollbar track color */
}

::-webkit-scrollbar-thumb {
    background: #888; /* Scrollbar thumb color */
    border-radius: 6px; /* Round edges of scrollbar */
}

    ::-webkit-scrollbar-thumb:hover {
        background: #555; /* Color on hover */
    }

/* For Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

/*----- Scroll Bar Custom End------*/


.main-btn {
    padding: 7px 12px; /* Adjusted padding for a more comfortable click area */
    margin-bottom: 2px; /* Increased margin for clearer separation */
    background: linear-gradient(135deg, #4c6ef5, #15aabf); /* Gradient background */
    border: none; /* Remove border for a clean look */
    color: white; /* White text color for contrast */
    border-radius: 8px; /* More rounded corners for a modern look */
    font-weight: 600; /* Slightly bolder text */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
    transition: background 0.3s ease, transform 0.2s ease; /* Smooth transitions */
}

    .main-btn:hover {
        background: linear-gradient(135deg, #3b5bdb, #1098ad); /* Darker gradient on hover */
        transform: translateY(-2px); /* Lift effect on hover */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
    }

    .main-btn:active {
        transform: translateY(0); /* Subtle press effect */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Reduced shadow on click */
    }

    /*------ Table tr hover Start ----*/

    /*
tr:hover {
    background-color: #4682B4;
    color: white;
}

    tr:hover td {
        color: white;
    }
        */
td {
    transition: background-color 0.3s ease, color 0.3s ease;
}
/*------ Table tr hover End ----*/
@media (min-width: 1024px) {
    #SalaryCompDataRows {
        display: block;
        height: calc(100vh - 480px);
        overflow-y: auto;
    }
}

@media (min-width: 1024px) {
    #PayHeadExcelDataRows, #PayHeadManualDataRows {
        display: block;
        height: calc(100vh - 560px);
        overflow-y: auto;
    }
}
.company-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #34495e;
    text-align: center;
    padding: 10px 25px;
    margin: 20px auto;
    width: fit-content;
    text-transform: uppercase;
}

.mandatory {
    color: #FF0000;
    font-weight: bolder;
    font-size: 16px;
}