.holiday-card {
            width: 100px; /* Adjust as needed */
            height: 100px; /* Adjust as needed */
            background: linear-gradient(to bottom, #6a95ff, #3775d6);
            /* Gradient Blue */
            border: 4px solid #FFD700;
            /* Yellow Border */
            border-radius: 15px;
            /* Rounded Corners */
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
            margin: 10px;
            transition: box-shadow 0.2s, transform 0.2s;
            cursor: pointer;
        }
        .holiday-card:active {
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
            transform: translateY(10px);
        }
        .calendar-icon {
            width: 50px;
            height: 50px;
            object-fit: contain;
            margin: 0px auto;
        }
        .holiday-button {
            background: none;
            border: none;
            padding: 0;
            margin: 0;
            outline: none;
        }
        .card-text {
            position: absolute;
            bottom: 10px;
            font-size: 12px;
            color: white;
            font-weight: bold;
            text-align: center;
        }

        @media (max-width: 768px) {
          .holiday-card {
            width: 50px;
            height: 50px; /* Reduced height */
            margin: 10px;
            background: none; /* Remove background */
            border: none; /* Remove border */
            box-shadow: none; /* Remove shadow */
          }
          .calendar-icon {
            width: 30px; /* Adjusted icon size */
            height: 30px;
          }
          .card-text {
            font-size: 8px; /* Reduced font size */
            color:black;
            font-size:10px;
          }
          .holiday-button {
    padding: 5px;
}
          .sticky-icons {
            position: sticky;
            bottom: 0;
            background: #fff;
            z-index: 1000;
            height: 20vh; /* Fixed height to 20% of screen height */
            overflow-y: auto; /* Added scrollbar if content exceeds height */
          }
          .sticky-icons .row {
            flex-wrap: wrap;
            justify-content: center;
          }
          .sticky-icons .col-2 {
            flex-basis: 25%;
          }
        }

        .Date-Pickers {
            font-size: 12px;
        }
        .work-hours-header {
            background-color: #357EC7;
            /* Blue color for the header */
            color: white;
            text-align: center;
            padding: 5px;
        }
        .leave-summary-header {
            color: #4CAF50;
            /* Green color for the Leave Summary title */
            font-size: 1.25rem;
            padding: 5px;
        }
        .chart-section {
            display: flex;
            justify-content: space-around;
            padding: 20px;
        }
        .chart-bar {
            width: 30px;
            height: 100px;
            background-color: #D3D3D3;
            /* Light Gray color for empty bar */
            margin-bottom: 10px;
            position: relative;
        }
        .chart-bar-value {
            position: absolute;
            bottom: 0;
            width: 100%;
            text-align: center;
            color: #000;
            font-size: 0.9rem;
        }

        .dropdown {
            margin-top: 10px;
            text-align: right;
        }

        .leave-summary-table {
            width: 100%;
            margin-top: 20px;
            border-collapse: collapse;
        }

        .leave-summary-table th,
        .leave-summary-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }

        .leave-summary-table th {
            background-color: #f2f2f2;
        }

        /* Legend colors */
        .legend-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }

        .legend-item {
            display: flex;
            align-items: center;
            margin-right: 15px;
        }

        .legend-color {
            width: 20px;
            height: 20px;
            margin-right: 5px;
            border: 1px solid #ccc;
        }

        .remaining {
            background-color: #D3D3D3;
        }

        .used {
            background-color: #9FE2BF;
        }

        .exceeded {
            background-color: #FF6347;
        }
        .calendar-header {
            background-color: #357EC7;
            /* Blue color for the header */
            color: white;
            text-align: center;
            padding: 5px;
        }

        .table-header {
            text-align: center;
            font-weight: bold;
        }

        .table-cell {
            height: 100px;
            vertical-align: top;
            padding: 5px;
            text-align: center;
        }

        /* Color definitions */
        .absent {
            background-color: #FF6347 !important;
            /* Red for absent */
            color: white;
        }

        .present {
            background-color: #A0F68C !important;
            /* Light Green for present */
            color: black !important;
        }

        .wo-holiday {
            background-color: #3BB9FF !important;
            /* Blue for WO/Holiday */
            color: white;
        }

        .approved-leave {
            background-color: #9AFEFF !important;
            /* Cyan for approved leave */
            color: black;
        }

        .not-updated {
            background-color: white !important;
            color: black;
        }

        .legend {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 20px;
        }

        .legend-item {
            display: flex;
            align-items: center;
            margin-right: 15px;
            margin-bottom: 10px;
        }

        .legend-color {
            width: 20px;
            height: 20px;
            margin-right: 5px;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .table-cell {
                height: auto;
                padding: 10px;
                font-size: 0.8rem;
                /* Smaller font size on mobile */
            }

            .calendar-header {
                font-size: 1.2rem;
                /* Smaller header font size on mobile */
            }

            .legend {
                flex-direction: column;
                align-items: center;
            }
        }
        .sticky-icons {
            position: sticky;
            bottom: 0;
            background: #fff;
            z-index: 1000;
        }
        .cardeffect {
            transition: transform 0.3s;
        }
        .cardeffect:hover {
            transform: scale(1.01);
<!--            transform: scale(1.05);-->
        }
        .cardeffect2 {
            transition: transform 0.1s;
        }
        .cardeffect2:hover {
            transform: scale(1.06);
<!--            transform: scale(1.0);-->
        }

        /* Gradient Colors for Card Headers */
        .card-header-blue {
            background: linear-gradient(90deg, #4b79a1, #283e51); /* Blue gradient */
            color: #fff;
        }

        .card-header-green {
            background: linear-gradient(90deg, #11998e, #38ef7d); /* Green gradient */
            color: #fff;
        }

        .card-header-purple {
            background: linear-gradient(90deg, #6a11cb, #2575fc); /* Purple gradient */
            color: #fff;
        }

        .card-header-orange {
            background: linear-gradient(90deg, #ff8008, #ffc837); /* Orange gradient */
            color: #fff;
        }
         /* Custom styles for the table */
        .attendance-table th {
            background-color: #2F5597; /* Blue background */
            color: white; /* White text */
            text-align: center;
            vertical-align: middle;
        }

        .attendance-table td {
            text-align: center;
            vertical-align: middle;
        }


        /* Graph area */
        .graph {
        position: relative;
        height: 300px;
        border-left: 2px solid #000;
        border-bottom: 2px solid #000;
        margin-left: 30px;
        overflow-x: auto; /* Adds horizontal scroll for X-axis overflow */
        overflow-y: auto; /* Adds vertical scroll for Y-axis overflow */
        }

        /* Horizontal scroll styling (optional) */
        .graph::-webkit-scrollbar {
            height: 8px;
            background-color: #f1f1f1;
        }

        .graph::-webkit-scrollbar-thumb {
            background-color: #888;
            border-radius: 10px;
        }

        .graph::-webkit-scrollbar-thumb:hover {
            background-color: #555;
        }

        /* Horizontal grid lines */
        .grid-line-horizontal {
            position: absolute;
            left: 0;
            right: 0;
            height: 1px;
            background-color: #ddd;
        }

        /* Bar styling */
        .bar {
            position: absolute;
            bottom: 0;
            left: 16.6%;
            width: 40px;
            height: 150px;
            background-color: #4caf50;
            text-align: center;
            color: #fff;
            font-weight: bold;
            line-height: 150px;
            border-radius: 4px;
        }

        /* X-axis labels */
        .x-axis {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            font-size: 0.85rem;
            color: black;
        }

        /* Y-axis labels */
        .y-axis {
            position: absolute;
            left: -30px;
            top: 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
            font-size: 0.85rem;
            color: black;
        }

        /* Y-axis numbers inside graph */
        .y-axis span {
            position: relative;
            left: 10px; /* Moves the numbers inside the graph */
        }

        /* Arrow styling
        .arrow {
            position: absolute;
            font-size: 0.85rem;
            font-weight: bold;
            color: red;
        }

        .arrow.wo {
            bottom: 40px;
            left: 10%;
        }

        .arrow.o {
            bottom: 20px;
            left: 30%;
        } */

        /* Axis labels */
        .y-axis-label {
            position: absolute;
            left: -50px; /* Aligns Y-axis label inside the graph */
            top: 130px;
            font-size: 0.9rem;
            font-weight: bold;
            color: purple;
            writing-mode: vertical-lr;
            text-orientation: mixed;
        }

        .x-axis-label {
            text-align: center;
            margin-top: 15px;
            font-size: 0.9rem;
            font-weight: bold;
            color: purple;
        }