.chart-container {
    position: relative;
    width: 100%;
    height: 350px; 
}

@media (max-width: 768px) {
    .chart-container {
        height: 300px; 
    }
}

@media (max-width: 480px) {
    .chart-container {
        height: 250px; 
    }
}

/*.loadingPanel {
    background-image: url(../Images/Loading.gif);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.85);
    cursor: wait;
    text-align: center;
    z-index: 10000;
    position: fixed;
    width: 100%;
    height: 100%;
}

.theme-dark .loadingPanel {
    background-image: url(../Images/Loading.gif);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: rgba(20, 25, 30, 0.85);
    cursor: wait;
    text-align: center;
    z-index: 10000;
    position: fixed;
    width: 100%;
    height: 100%;
}

*/
.required {
    color: #ff0000;
    padding-left: 2px;
}

.userprofileicon {
    height: 45px;
    width: 45px;
    border-radius: 50%;
    border: 1px solid #dddddd;
}

.row-border .form-group.efirst {
    border-top: medium none;
    padding-top: 5px;
}

.InfoLabel {
    margin-left: 10px;
    color: red;
}

.theme-dark .InfoLabel {
    margin-left: 10px;
    color: white !important;
}

.checkboxlist {
    width: 100%;
}

    .checkboxlist label {
        margin-left: 5px;
    }

.viewImage {
    width: 100px;
}

.displayNone {
    display: none !important;
}

.displayBlock {
    display: block !important;
}

.redFont {
    color: red;
}

.theme-dark .blueFont {
    color: #9d9dff;
}

.greenFont {
    color: green;
}

.theme-dark .greenFont {
    color: #62ff62;
}

.textLeft {
    text-align: left !important;
}

.Timer table td {
    padding: 0px !important;
    background-color: transparent !important;
    border: medium none !important;
    vertical-align: top !important;
    line-height: 8px !important;
}

    .Timer table td input {
        height: 20px !important;
        background-color: transparent !important;
        color: #000000 !important;
        cursor: default !important;
    }

.theme-dark .Timer table td input {
    height: 20px !important;
    background-color: transparent !important;
    color: white !important;
    cursor: default !important;
}

.Timer table td img {
    vertical-align: top !important;
    height: 10px;
    width: 16px;
}

.cyanFont {
    color: cyan;
}

.blueFont {
    color: blue;
}

.margin5 {
    float: left;
    margin-left: 10px;
}

.redFilled {
    background-color: red;
}

.cyanFilled {
    background-color: cyan;
}

.greenFilled {
    background-color: green;
}

.blueFilled {
    background-color: blue;
}

.sizeFilled {
    width: 15px;
    height: 15px;
}

.pinkFilled {
    background-color: pink;
}
.presentDays {
    background-color: #28a745;
}
.totalDays {
    background-color: #4e73df;
}
.weekOff {
    background-color: #17a2b8;
}
.holidayDays {
    background-color: #ffc107;
}
.uLeavedyDays {
    background-color: #dc3545;
}

.silverFilled {
    background-color: silver;
}

/* Employee side Date picker*/
.theme-dark .widget-content {
    background-color: #1e1e1e;
    color: #f0f0f0;
    border-color: #333;
}

    .theme-dark .widget-content a {
        color: #f0f0f0;
    }

        .theme-dark .widget-content a:hover {
            color: #ffffff;
        }

.theme-dark .chart table {
    background-color: #2b2b2b;
    border-color: #444;
}

.theme-dark .chart th,
.theme-dark .chart td {
    background-color: #2b2b2b;
    color: #ddd;
    border-color: #444;
}

.theme-dark .chart th {
    background-color: #333;
}

.theme-dark .chart td a {
    color: White !important;
}

.theme-dark .chart td[style*="color:Red"] a {
    color: #ff6b6b !important;
}

.theme-dark .chart td[style*="color:Blue"] a {
    color: #6bbaff !important;
}

/* Colored Legend Boxes */
.theme-dark .redFilled {
    background-color: #ff6b6b;
}

.theme-dark .cyanFilled {
    background-color: #4dd0e1;
}

.theme-dark .blueFilled {
    background-color: #64b5f6;
}

/* Miscellaneous spacing / layout */
.theme-dark .margin5 {
    margin: 5px;
}

.theme-dark .sizeFilled {
    width: 15px;
    height: 15px;
    display: inline-block;
}

.theme-dark td[style*="background-color:#F9F9F9;"] {
    background-color: #2a2a2a !important;
}

.theme-dark table[style*="border-color:White"] {
    border-color: #444 !important;
}



.notify-blink {
    background-color: red !important;
    animation: notifyBlink 1s infinite;
}

@keyframes notifyBlink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.msggreen {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background-color: green; 
}


/* New progress bar loader */
#topLoader {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background-color: #0078ff;
    z-index: 9999999;
    transition: width 0.4s ease;
}


.bell-bg {
    position: relative;
    display: inline-block;
}

.notify-badge {
    position: absolute;
    top: -4px;
    right: 4px;
    min-width: 14px;
    height: 14px;
    padding: 1px 5px;
    background: #e74c3c;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    line-height: 14px;
    border-radius: 50%;
    text-align: center;
    display: none;
}



@keyframes notifyBlink {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.15);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}


/* new Application loader */

#loadingPanel {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(8px); 
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}
.theme-dark #loadingPanel {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6); 
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.loadingPanel {
    position: relative;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .loadingPanel img {
        width: 90px;
        height: 90px;
        z-index: 2;
    }

    .loadingPanel::before,
    .loadingPanel::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
    }

    .loadingPanel::before {
        box-shadow: 0 0 10px rgba(0,0,0,0.15) inset;
    }

    .loadingPanel::after {
        border-top: 4px solid #0099ff;
        animation: rotate 1.2s linear infinite;
    }

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}