html {
    font-size: 14px;
}

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

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

.filter-group {
    flex-wrap: nowrap;
    align-items: baseline;
}

    .filter-group select {
        max-width: 40px;
        padding: 0px;
    }

.tabrow td input {
    width: fit-content;
}

/*body {
  margin-bottom: 60px;
}*/

.error {
    color: red; /* Change this to your preferred color */
}

/*Page loading Spinner start*/
.processing {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.text-spinner-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner-text {
    font-size: 2rem;
    color: #018fd4; /* Primary color */
    font-weight: bold;
    text-transform: uppercase;
    z-index: 1; /* Ensure the text is above the spinner */
}

.spinner-image {
    max-width: 9rem;
    z-index: 1;
    opacity: 0.9;
}

.spinner-border {
    width: 12rem;
    height: 12rem;
    border: 0.75rem solid rgba(0, 136, 206, 0.3); /* Light blue */
    border-top-color: #018fd4; /* Primary color for top border */
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin-circle 2s linear infinite;
}

@keyframes spin-circle {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
/*Page loading Spinner end*/

/*Dashboar Card effect start*/
.dashboard-card {
    border-radius: 1rem;
    background: linear-gradient(to bottom right, #f0f0f0, #e0e0e0);
    box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
    transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
    cursor: pointer;
    /*box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);*/
}

    .dashboard-card:hover {
        transform: scale(1.05);
        box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
        border-block-color: #018fd4;
    }

i.Dashboard-material-icon {
    color: #007bff !important;
    font-size: 2.5rem !important;
}
/*Dashboar Card effect end*/

.minimized {
    display: none;
}

.header-text {
    display: inline;
}

.header-button {
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
}

.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.center-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050; /* Ensure the alert is above other content */
    max-width: 90%;
    text-align: center;
}

.header-user {
    font-size: 2.7rem !important;
}
/* Background color set for Draft, InApproval & Reject */
.bg-Draft td {
    background: linear-gradient(180deg, #ffffff, #81D4FA) !important; /* Draft = Mamata Logo Blue Color = #018fd4 */
}

.bg-InApproval td {
    background: linear-gradient(180deg, #ffffff, #84ffb7) !important; /* InApproval = Color = #00d258 */
}

.bg-Reject td {
    background: linear-gradient(180deg, #ffffff, #ff9582) !important; /* Reject = Color = #FF6347 */
}

.select-bg-ProductModelSet {
    background-color: #c7d7dd !important;
}

i.customIconSize {
    font-size: 14px !important;
}

.center-text {
    text-align: center;
    vertical-align: middle;
}

.radio-readonly {
    pointer-events: none;
    color: gray;
}

.toast-top-right {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1050;
}

.calendar td {
    width: 50px;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #ccc;
}

.calendar .tour {
    background-color: green;
}

    .calendar .tour.office {
        background-color: grey;
    }

.calendar .office {
    background-color: maroon;
}


.calendar .leave {
    background-color: red;
}

.calendar .current-date {
    background-color: yellow;
    font-weight: bold;
}

.box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.prev-month, .next-month {
    color: #999 !important;
}

    .prev-month.tour, .next-month.tour {
        background-color: rgba(0, 128, 0, 0.5);
    }

    .prev-month.leave, .next-month.leave {
        background-color: rgba(255, 0, 0, 0.5);
    }

    .prev-month.office, .next-month.office {
        background-color: rgba(128, 0, 0, 0.5);
    }

    .prev-month.tour.office, .next-month.tour.office {
        background-color: rgba(128, 128, 128, 0.5);
    }

.bottom-left-text {
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 10px; /* Adjust font size as needed */
    padding: 1px; /* Adjust padding as needed */
    color: white; /* Adjust text color as needed */
}


.sidebar ul li.active-link a {
    background: #018fd4 /*linear-gradient(90deg, rgba(146,196,219,1) 40%, rgba(1,143,212,1) 100%)*/; /* Your highlight color */
    color: #ffffff !important;
    display: inline-block;
    border-radius: 2px;
}

/* Rich Text Editor Styles */
.jodit-container {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}

.jodit-toolbar {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.jodit-wysiwyg {
    padding: 10px;
    min-height: 200px;
}

.richtext-display {
    max-height: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.jodit-wysiwyg table {
    border-collapse: collapse !important;
    border: 1px solid #000 !important;
    width: 100% !important;
}

.jodit-wysiwyg table td, .jodit-wysiwyg table th {
    border: 1px solid #000 !important;
    padding: 4px !important;
}