@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

::after,
::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
.navbar {
            top: 0;
            background-color: #004aad !important;
            z-index: 1000;
            width: 100%;
        }
.navbar .navbar-brand img {
           height:60px;
           width:250px;
        }
.navbar-nav .nav-link:hover {
            background-color: #83AEE1 !important;
            color: #04205B;
            border-radius: 5px;
            transition: background-color 0.3s;
        }
        .navbar-nav .nav-link.active {
            background-color: #83AEE1 !important;
            color: #FFFFFF !important;
        }
.navbar .user-info img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

.navbar .user-info span {
            color: white;
            margin-right: 15px;
        }

.sidebar-scroll {
    max-height: calc(95vh - 60px); /* Adjust as needed for header or padding */
    overflow-y: auto; /* Enables scroll within the sidebar */
    }
.sidebar-scroll2 {
    max-height: calc(80vh - 60px); /* Adjust as needed for header or padding */
    overflow-y: auto; /* Enables scroll within the sidebar */
    }
.sidebar-scroll3 {
    overflow-y: auto; /* Enables scroll within the sidebar */
    overflow-x: auto;
    }
/* Enables scroll within the sidebar */
html {
        overflow-y: auto;
        overflow-x: auto;
        /* scrollbar-width: thin;
        scrollbar-color: transparent transparent; */
        }
main {
        padding: 0px 5px!important;
        overflow-y: auto;
        overflow-x: auto;

        height: calc(100vh - 1px);
        }


.g-btn-5 {
    background:linear-gradient(to bottom, #1727ae, #616fe3)!important;
    color:white!important;
    height:30px!important;
    width:100px!important;
    border:none!important;
    padding:10px 20px!important;
    font-size:12px!important;
    border-radius:5px!important;
    transition:background 0.3s ease!important;
}

.g-btn-5:hover {
    background: linear-gradient(to top, #0056b3, #218838)!important;
    color: white!important;
}



.g-btn {
    background: radial-gradient(circle, #1727ae, #007bff)!important;
    color: white!important;
    height: 25px!important;
    width:  60px!important; /* Set width to auto */ /*width: auto!important;  */
    border: none!important;
    padding: 5px 10px!important; /*width: 10px;  */
    font-size: 10px!important;
    white-space: nowrap; /* Prevent text wrapping */
    border-radius: 5px!important;
    box-shadow: inset -3px -3px 5px rgba(255, 255, 255, 0.3),
                inset 3px 3px 5px rgba(0, 0, 0, 0.2),
                0px 0px 5px rgba(0, 0, 0, 0.3)!important;
    transition: background 0.3s ease, transform 0.1s ease, box-shadow 0.1s ease!important;
    cursor: pointer;
}

.g-btn:hover {
    background: radial-gradient(circle, #616fe3, #1727ae)!important;
    color: white!important;
    box-shadow: inset 3px 3px 5px rgba(255, 255, 255, 0.3),
                inset -3px -3px 5px rgba(0, 0, 0, 0.2),
                3px 3px 5px rgba(0, 0, 0, 0.3)!important;
}

.g-btn:active {
    transform: translateY(2px)!important;  /* Slightly move button down */
    box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.4),
                inset -3px -3px 5px rgba(255, 255, 255, 0.2)!important; /* Reverse shadows */
    background: radial-gradient(circle, #0056b3, #218838)!important; /* Darker gradient */
}
/* g-btn big */
.g-btn-big {
    background: radial-gradient(circle, #1727ae, #007bff)!important;
    color: white!important;
    height: 30px!important;
    width:  100px!important; /* Set width to auto */ /*width: auto!important;  */
    border: none!important;
    padding: 5px 10px!important; /*width: 10px;  */
    font-size: 12px!important;
    white-space: nowrap; /* Prevent text wrapping */
    border-radius: 5px!important;
    box-shadow: inset -3px -3px 5px rgba(255, 255, 255, 0.3),
                inset 3px 3px 5px rgba(0, 0, 0, 0.2),
                0px 0px 5px rgba(0, 0, 0, 0.3)!important;
    transition: background 0.3s ease, transform 0.1s ease, box-shadow 0.1s ease!important;
    cursor: pointer;
}

.g-btn:hover {
    background: radial-gradient(circle, #616fe3, #1727ae)!important;
    color: white!important;
    box-shadow: inset 3px 3px 5px rgba(255, 255, 255, 0.3),
                inset -3px -3px 5px rgba(0, 0, 0, 0.2),
                3px 3px 5px rgba(0, 0, 0, 0.3)!important;
}

.g-btn:active {
    transform: translateY(2px)!important;  /* Slightly move button down */
    box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.4),
                inset -3px -3px 5px rgba(255, 255, 255, 0.2)!important; /* Reverse shadows */
    background: radial-gradient(circle, #0056b3, #218838)!important; /* Darker gradient */
}
/* g-btn small */
.g-btnsm {
    background: radial-gradient(circle, #1727ae, #007bff)!important;
    color: white!important;
    height: 25px!important;
    width: 50px!important; /* Set width to auto */ /*width: auto!important;  */
    border: none!important;
    padding: 5px 10px!important; /*width: 10px;  */
    font-size: 10px!important;
    white-space: nowrap; /* Prevent text wrapping */
    border-radius: 5px!important;
    box-shadow: inset -3px -3px 5px rgba(255, 255, 255, 0.3),
                inset 3px 3px 5px rgba(0, 0, 0, 0.2),
                0px 0px 5px rgba(0, 0, 0, 0.3)!important;
    transition: background 0.3s ease, transform 0.1s ease, box-shadow 0.1s ease!important;
    cursor: pointer;
}
.g-btnsm:hover {
    background: radial-gradient(circle, #616fe3, #1727ae)!important;
    color: white!important;
    box-shadow: inset 3px 3px 5px rgba(255, 255, 255, 0.3),
                inset -3px -3px 5px rgba(0, 0, 0, 0.2),
                3px 3px 5px rgba(0, 0, 0, 0.3)!important;
}
.g-btnsm:active {
    transform: translateY(2px)!important;  /* Slightly move button down */
    box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.4),
                inset -3px -3px 5px rgba(255, 255, 255, 0.2)!important; /* Reverse shadows */
    background: radial-gradient(circle, #0056b3, #218838)!important; /* Darker gradient */
}
/* g-btn small end */
.g-btnre {
    background: radial-gradient(circle, #1727ae, #007bff)!important;
    color: white!important;
    height: 25px!important;
    width:  60px!important;
    border: none!important;
    padding: 5px 10px!important; /*width: 10px;  */
    font-size: 10px!important;
    white-space: nowrap; /* Prevent text wrapping */
    border-radius: 5px!important;
    box-shadow: inset -3px -3px 5px rgba(255, 255, 255, 0.3),
                inset 3px 3px 5px rgba(0, 0, 0, 0.2),
                0px 0px 5px rgba(0, 0, 0, 0.3)!important;
    transition: background 0.3s ease, transform 0.1s ease, box-shadow 0.1s ease!important;
    cursor: pointer;
}
/* Ensure full width on mobile view */
@media (max-width: 767px) {
    .g-btnre {
        width: 100%!important; /* Full width on mobile */
    }
}
@media (max-width: 767px) {
    .fullwith {
        width: 100%!important; /* Full width on mobile */
    }
}
.g-btnre:hover {
    background: radial-gradient(circle, #616fe3, #1727ae)!important;
    color: white!important;
    box-shadow: inset 3px 3px 5px rgba(255, 255, 255, 0.3),
                inset -3px -3px 5px rgba(0, 0, 0, 0.2),
                3px 3px 5px rgba(0, 0, 0, 0.3)!important;
}
.g-btnre:active {
    transform: translateY(2px)!important;  /* Slightly move button down */
    box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.4),
                inset -3px -3px 5px rgba(255, 255, 255, 0.2)!important; /* Reverse shadows */
    background: radial-gradient(circle, #0056b3, #218838)!important; /* Darker gradient */
}
.g-btn2{
    background: radial-gradient(circle, #a9a9a9, #d3d3d3)!important; /* Gray gradient */
    color: white!important;
    height: 25px!important;
    width: 60px!important;
    border: none!important;
    padding: 3px 8px!important;
    font-size: 10px!important;
    border-radius: 5px!important;
    box-shadow: inset -3px -3px 5px rgba(255, 255, 255, 0.3),
                inset 3px 3px 5px rgba(0, 0, 0, 0.2),
                3px 3px 5px rgba(0, 0, 0, 0.3)!important;
    transition: background 0.3s ease, transform 0.1s ease, box-shadow 0.1s ease!important;
    cursor: pointer;
}
.g-btn2:hover {
    background: radial-gradient(circle, #d3d3d3, #a9a9a9)!important; /* Reverse gray gradient */
    color: white!important;
    box-shadow: inset 3px 3px 5px rgba(255, 255, 255, 0.3),
                inset -3px -3px 5px rgba(0, 0, 0, 0.2),
                3px 3px 5px rgba(0, 0, 0, 0.3)!important;
}
.g-btn2:active {
    transform: translateY(2px)!important;  /* Slightly move button down */
    box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.4),
                inset -3px -3px 5px rgba(255, 255, 255, 0.2)!important; /* Reverse shadows */
    background: radial-gradient(circle, #696969, #808080)!important; /* Darker gray gradient */
}
.g-btn3 {
    background: radial-gradient(circle, #28a745, #80d29c)!important; /* Green gradient */
    color: white!important;
    height: 25px!important;
    width: 60px!important;
    border: none!important;
    padding: 5px 10px!important;
    font-size: 10px!important;
    border-radius: 5px!important;
    box-shadow: inset -3px -3px 5px rgba(255, 255, 255, 0.3),
                inset 3px 3px 5px rgba(0, 0, 0, 0.2),
                0px 0px 5px rgba(0, 0, 0, 0.3)!important;
    transition: background 0.3s ease, transform 0.1s ease, box-shadow 0.1s ease!important;
    cursor: pointer;
}
.g-btn3:hover {
    background: radial-gradient(circle, #80d29c, #28a745)!important; /* Reverse green gradient */
    color: white!important;
    box-shadow: inset 3px 3px 5px rgba(255, 255, 255, 0.3),
                inset -3px -3px 5px rgba(0, 0, 0, 0.2),
                3px 3px 5px rgba(0, 0, 0, 0.3)!important;
    }
.g-btn3:active {
    transform: translateY(2px)!important;  /* Slightly move button down */
    box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.4),
                inset -3px -3px 5px rgba(255, 255, 255, 0.2)!important; /* Reverse shadows */
    background: radial-gradient(circle, #218838, #5a9c6d)!important; /* Darker green gradient */
}
.g-btn4 {
    background: radial-gradient(circle, #dc3545, #ff6f7f)!important; /* Red gradient */
    color: white!important;
    height: 30px!important;
    width: 100px!important;
    border: none!important;
    padding: 10px 20px!important;
    font-size: 12px!important;
    border-radius: 5px!important;
    box-shadow: inset -3px -3px 5px rgba(255, 255, 255, 0.3),
                inset 3px 3px 5px rgba(0, 0, 0, 0.2),
                3px 3px 5px rgba(0, 0, 0, 0.3)!important;
    transition: background 0.3s ease, transform 0.1s ease, box-shadow 0.1s ease!important;
    cursor: pointer;
}
.g-btn4:hover {
    background: radial-gradient(circle, #ff6f7f, #dc3545)!important; /* Reverse red gradient */
    color: white!important;
    box-shadow: inset 3px 3px 5px rgba(255, 255, 255, 0.3),
                inset -3px -3px 5px rgba(0, 0, 0, 0.2),
                3px 3px 5px rgba(0, 0, 0, 0.3)!important;
}
.g-btn4:active {
    transform: translateY(2px)!important;  /* Slightly move button down */
    box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.4),
                inset -3px -3px 5px rgba(255, 255, 255, 0.2)!important; /* Reverse shadows */
    background: radial-gradient(circle, #a71d2a, #c7434d)!important; /* Darker red gradient */
}
.image1 {
            width: 50%;
        }

.arrow {
            transition: transform 0.3s;
            float: right;
        }

.arrow.down {
            transform: rotate(90deg);
        }

.submenu {
            display: none;
        }
.body-bg {
            position: fixed;
            top: 20%;
            left: 30%;
            width: 50%;
            height: 50%;
            background-image: url('image/isha logo2.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            z-index: -1;
        }
hr { border-color:white; }

/* Gradient Colors for Card Headers  background-color:#757687 !important;*/
        .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;
        }
        .card-header-skyblue {
            background: linear-gradient(90deg, #00c6ff, #0072ff); /* Sky blue gradient */
            color: #fff;
        }
        .card-header-orange2 {
            background: linear-gradient(90deg, #ff7e5f, #feb47b); /* Light orange gradient */
            color: #fff;
        }
        .background-gradient1 {
            background: linear-gradient(to bottom, #ff7e00, #ffb347);
        }
        .background-gradient2 {
            background: linear-gradient(to bottom, #add8e6, #87cefa);
        }
        .background-gradient3 {
        background: linear-gradient(to bottom, #f0f0f0, #d9d9d9);
    }

@media (max-width: 992px) {
            .navbar .navbar-brand img {
               height: 100%;
               width:100px;
            }
            .sidebar {
                position: relative;
                width: 100%;
                height: auto;
                padding: 0;
            }

            .form-container {
                margin: 0 10px;
            }

            .navbar .user-info {
                position: absolute;
                top: 10px;
                right: 10px;
            }

            .navbar-toggler {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }

        @media (max-width: 768px) {
             .navbar .navbar-brand img {
                   height: 100%;
                   width:100px;
                }
            .sidebar {
                position: relative;
                width: 100%;
                height: auto;
                padding: 0;
                display: none;
            }
            }
           .sidebar.show {
                display: block;
            }
           .sidebar .nav-link {
                padding: 10px 15px;
           }
            .sidebar .nav-item {
                border-bottom: 1px solid #444;
            }
            .sidebar .submenu .nav-link {
                padding-left: 30px;
            }
            .navbar-expand-lg  .dropdown {
                position: absolute;
                top: 0%;
                left: 100%;
            }
            .navbar .user-info {
                position: absolute;
                top: 8px;
                right: 8px;
            }
            .navbar-toggler {
                position: absolute;
                top: 50%;
                left: 56%;
                transform: translate(-50%, -50%);
            }
        }
@media (max-width: 395px) {
    .navbar .navbar-brand img {
        height: 100%;
        width: 80px;
    }
}
.sidebar_select li a.active {
            background-color: #27ae60;
            color: #ffffff;
            border-radius: 5px;
}
<!-- table detail --->
body {
            font-family: 'Georgia', serif;
            font-size: 14px;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 0 10px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        #container_login {
         background-color: #2E3192;
         box-shadow: 0 0 0 rgba(0,0,0,0.1);
        }
        .controls {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
            flex-wrap: wrap;
        }
        .controls button, .controls select, .controls input {
            margin-right: 5px;
        }
        .controls button {
            font-size: 14px;
        }
        .controls button.add-btn {
            background-color: #28a745;
            color: #fff;
        }
        .controls button.edit-btn {
            background-color: #007bff;
            color: #fff;
        }
        .controls button.delete-btn {
            background-color: #dc3545;
            color: #fff;
        }
        .controls button.select-all-btn {
            background-color: #ffc107;
            color: #000;
        }
        .controls button.prev-btn, .controls button.next-btn {
            background-color: #17a2b8;
            color: #fff;
            border: none;
            border-radius: 4px;
            margin: 0 5px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
            font-size: 12px;
        }
        th {
            font-size: 14px;
            background-color: #0d216c !important;
            color: #ffffff !important;
        }

        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        input[type="text"], select {
            padding: 8px;
        }
        button {
            padding: 8px 12px;
            cursor: pointer;
            border: none;
            border-radius: 4px;
        }
        .checkbox-cell {
            text-align: center;
            color:green;
        }
        .disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        .page-controls {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 10px;
        }
        .page-controls span {
            font-size: 14px;
        }
        .select-all-checkbox {
            cursor: pointer;
        }

.notification-icon {
            position: fixed! important;
            bottom: 20px! important;
            right: 20px! important;
            width: 50px! important;
            height: 50px! important;
            background-color: #007bff! important;
            border-radius: 50%! important;
            color: white! important;
            text-align: center! important;
            line-height: 50px! important;
            font-size: 24px! important;
            cursor: pointer! important;
            z-index: 1000! important;
        }

        .notification-number {
            position: absolute! important;
            top: -5px! important;
            right: -5px! important;
            background-color: red! important;
            color: white! important;
            border-radius: 50%! important;
            width: 20px! important;
            height: 20px! important;
            font-size: 12px! important;
            text-align: center! important;
            line-height: 20px! important;
        }

        @media (max-width: 768px) {
            .notification-icon {
                bottom: 10px! important;
                right: 10px! important;
                width: 40px! important;
                height: 40px! important;
                line-height: 40px! important;
                font-size: 20px! important;
            }

            .notification-number {
                width: 18px! important;
                height: 18px! important;
                line-height: 18px! important;
                font-size: 10px! important;
            }
        }


/* Shift Calendar Highlighting - Maximum Specificity */
#calendar-shift-column td.highlighted,
table#calendar-shift-column td.highlighted,
.table#calendar-shift-column td.highlighted,
.table.table-hover#calendar-shift-column td.highlighted {
    background-color: #0099ff !important;
    color: #ffffff !important;
    font-weight: bold !important;
    text-shadow: none !important;
    border-color: #0066cc !important;
}

#employee-leave-column td.highlighted,
table#employee-leave-column td.highlighted,
.table#employee-leave-column td.highlighted {
    background-color: #0099ff !important;
    color: #ffffff !important;
    font-weight: bold !important;
    text-shadow: none !important;
    border-color: #0066cc !important;
}

/* Override any Bootstrap table row background colors */
#calendar-shift-column tbody tr td.highlighted {
    background-color: #0099ff !important;
    color: #ffffff !important;
}

#employee-leave-column tbody tr td.highlighted {
    background-color: #0099ff !important;
    color: #ffffff !important;
}

/* Standardize the width and height of input fields */
.fixed-input {
    width: 80% !important;
    max-width: 300px !important; /* Adjust this width as needed */
    height: 25px !important; /* Adjust this height as needed */
    box-sizing: border-box; /* Ensures padding doesn’t affect width */
    font-size: 14px! important;
}

.fixed-input2 {
    width: 100% !important;
    max-width: 200px !important; /* Adjust this width as needed */
    height: 25px !important; /* Adjust this height as needed */
    box-sizing: border-box; /* Ensures padding doesn’t affect width */
    font-size: 14px! important;
}
.forchekbox {
    width: 100% !important;
    max-width: 20px !important; /* Adjust this width as needed */
    height: 20px !important; /* Adjust this height as needed */
    box-sizing: border-box; /* Ensures padding doesn’t affect width */
}
.fixed-input4 {
    width: 100% !important;
    max-width: 150px !important; /* Adjust this width as needed */
    height: 25px !important; /* Adjust this height as needed */
    box-sizing: border-box; /* Ensures padding doesn’t affect width */
    font-size: 14px! important;
}
.fixed-input44 {
    width: 100% !important;
    max-width: 150px !important; /* Adjust this width as needed */
    height: 90px !important; /* Adjust this height as needed */
    box-sizing: border-box; /* Ensures padding doesn’t affect width */
}
.fixed-input3 {
    width: 80% !important;
    max-width: 300px !important; /* Adjust this width as needed */
    height: 100px !important; /* Adjust this height as needed */
    box-sizing: border-box; /* Ensures padding doesn’t affect width */
}
@media (max-width: 430px) {
    .fixed-input {
        width: 60% !important;
        max-width: 100% !important; /* Full width on mobile */
        height: 40px !important; /* Adjust height if needed */
        box-sizing: border-box;
    }
}
.cardsm:hover { transition: transform 0.3s;
            transform: scale(1.05);
        }

.logo-container {
    width: 100%; /* Makes the logo container responsive */
    max-width: 200px; /* Adjusts maximum size */
    height: auto; /* Allows height to adjust automatically for responsiveness */
    aspect-ratio: 1 / 1; /* Maintains square aspect ratio */
}

#company-image {
    transition: transform 0.3s ease; /* Adds a smooth zoom effect on hover */
}

#company-image:hover {
    transform: scale(1.05); /* Slightly enlarges image on hover */
}

.card-header33 {
            background: linear-gradient(90deg, #1a73e8, #3b83f6); /* Light blue gradient */
            color: #fff;
            font-weight: bold;
        }
        .card-body33 {
            /*padding: 20px;*/
            background-color: #f5f7fa;
        }
        .card-footer33 {
            background-color: #f0f0f0;
            color: #666;
        }
        .card-footer33g {
            background: linear-gradient(to bottom, #f0f0f0, #d0d0d0);
        }
/* In your custom CSS file */

.modal-dialog {
    width:400px !important;
    height:240px !important;
    }
@media (max-width: 480px) {
    .modal-dialog {
        width: 95% !important; /* Ensures modal takes up most of the screen on smaller devices */
        margin: 0 px; /* Centers the modal horizontally */
        }
    }

@media (max-width: 320px) {
    .navbar .navbar-brand img {
       height:60px;
       width:160px;
        }
    .navbar .user-info {
        position: absolute;
        top: 5px;
        right:7px;
        }
        .navbar .user-info img {
            width:  30px;
            height: 30px;
            border-radius: 50%;
        }
    .Showperpage{
        font-size: 13px;
        }
    .perpage {
        width: 60px!important;
        height: 30px!important;
        font-size: 8px;
        }
    }

@media (max-width: 375px) {
    .navbar .navbar-brand img {
       height:50px;
       width:160px;
        }
    .navbar .user-info {
        position: absolute;
        top: 5px;
        right:7px;
        }
        .navbar .user-info img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }
    .Showperpage{
        font-size: 13px;
        }
    .perpage {
        width: 60px!important;
        height: 30px!important;
        font-size: 10px;
        }
    }
@media (max-width: 425px) {
    .navbar .navbar-brand img {
       height:50px;
       width:160px;
        }
    .navbar .user-info {
        position: absolute;
        top: 5px;
        right:7px;
        }
        .navbar .user-info img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }
    .Showperpage{
        font-size: 13px;
        }
    .perpage {
        width: 60px!important;
        height: 30px!important;
        font-size: 8px;
        }
    }
@media (max-width: 430px) {
    .navbar .navbar-brand img {
       height:50px;
       width:160px;
        }
    .navbar .user-info {
        position: absolute;
        top: 5px;
        right:7px;
        }
        .navbar .user-info img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }
    .Showperpage{
        font-size: 13px;
        }
    .perpage {
        width: 60px!important;
        height: 30px!important;
        font-size: 8px;
        }
    }
@media (max-width: 768px) {
    .navbar .navbar-brand img {
       height:50px;
       width:160px;
        }
    .navbar .user-info {
        position: absolute;
        top: 5px;
        right:7px;
        }
        .navbar .user-info img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }
    .Showperpage{
        font-size: 13px;
        }
    .perpage {
        width: 60px!important;
        height: 30px!important;
        font-size: 8px;
        }
    }
@media (max-width: 768px) {
    .navbar .navbar-brand img {
       height:50px;
       width:160px;
        }
    .navbar .user-info {
        position: absolute;
        top: 5px;
        right:7px;
        }
        .navbar .user-info img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }
    .togglebutton{
         display:block;
        }
    .Showperpage{
        font-size: 13px;
        }
    .perpage {
        width: 60px!important;
        height: 30px!important;
        font-size: 8px;
        }
    }

.hover-effect:hover {
    background-color: #f8f9fa !important; /* Light grey hover background */
    color: #0d6efd !important; /* Bootstrap primary blue */
    border-radius: 5px !important;
    transition: all 0.3s ease;
}

.dropdown-item i {
    font-size: 1.2rem !important; /* Adjust icon size */
}
/* Hover effect for dropdown items */
.hover-item:hover {
  background-color: #007bff; /* Bootstrap primary color */
  color: #ffffff !important; /* White text */
  transition: background-color 0.3s ease, color 0.3s ease;
}

.fsize10 {
    font-size:10px !important;
    }
.fsize12 {
    font-size:12px !important;
    }
.fsize14 {
    font-size:14px !important;
    }
.sidebarmainhover {
  border-bottom-width: 0px!important;
}
.sidebarmainhover :hover {
  background-color: #949ba7; /* Add a hover color */
  font-size:16px;
  color: #ffffff; /* Change text color */
  text-shadow: 0px 0px 5px rgba(50, 50, 50, 0.7); /* Gray glowing effect */
  transition: background-color 0.3s ease, color 0.3s ease, text-shadow 0.3s ease, font-size 0.3s ease;
}
.sidebarhover :hover {
  background-color: #949ba7; /* Add a hover color */
  }

    .card-header-blue {
            background: linear-gradient(to bottom, #004aad, #3c8ffd) !important;
            }

/*canteen_dashboard */

     .food-card {
            border: 2px solid #ddd;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s ease-in-out;
            height: 180px; /* Default height for larger screens */
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .food-card:hover {
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            transform: translateY(-5px);
        }
        .canteen-image {
            width: 90px;
            height:90px;
        }

        .food-card .canteen-image img {
            width: 85px;
            height:85px;
            margin-bottom:0px;
        }

        .food-card h5 {
            font-size: 1rem;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .food-card .count {
            font-size: 1.2rem;
            font-weight: bold;
            color: #333;
        }

        .date-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            font-weight: bold;
        }

        .date-container span {
            border: 1px solid #ccc;
            padding: 5px 10px;
            border-radius: 5px;
            background-color: #f9f9f9;
        }

        .main-card {
            display: flex;
            flex-direction: column;
        }

        /* Card body scrollable only on desktop screens */
        @media (min-width: 992px) {
            .main-card {
                height: 60vh; /* Limit height to 50% of the viewport on desktops */
            }
            .card-body-canteen {
                flex: 1; /* Allows the body to grow and take up remaining space */
                overflow-y: auto; /* Enables vertical scrolling for overflowing content */
            }
        }

        /* Media Queries for Responsive Design */
        @media (max-width: 992px) { /* For tablets and smaller screens */
            .food-card {

            }
            .food-card h5 {
                font-size: 1rem;
            }
            .food-card .count {
                font-size: 1.8rem;
            }
        }

        @media (max-width: 768px) { /* For small devices like mobile phones */
            .food-card {


            }
            .food-card h5 {
                font-size: 0.9rem;
            }
            .food-card .count {
                font-size: 1.0rem;
            }
        }

        @media (max-width: 576px) { /* For extra small screens */
            .food-card {

            }
            .food-card h5 {
                font-size: 1.0rem;
            }
            .food-card .count {
                font-size: 1.2rem;
            }
        }

<!-- /* this is for tables */-->
th {
    width: 100px; /* Fixed width */
    white-space: nowrap; /* Prevents text wrapping */
    position: relative; /* Required for absolute positioning of child elements */
    vertical-align: top; /* Keeps text centered */
    }
.th_checkbox {
    width: 10px; /* Fixed width */
    white-space: nowrap; /* Prevents text wrapping */
    position: relative; /* Required for absolute positioning of child elements */
    vertical-align: top; /* Keeps text centered */
    }


.search-container {
<!--   position: absolute;-->
<!--   top: 45%; /* Places it just below the header */-->
<!--   left: 0%;-->
        border: 1px solid #ccc;
        padding: 0px;
        display: none; /* Hidden by default */
        z-index: 1000; /* Ensures it stays on top */
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Adds slight shadow for better visibility */
    }

<!-- /* this is for dashboard */-->
.card_dashboard {
        text-align: center;
        padding: 20px;
        border-radius: 10px;
    }
.dashboard-header {
    font-weight: bold;
    font-size: 1.2rem;
    }
.chart-container {
    height: 300px;
    }
.gray-line {
    border-top: 1px solid gray;
    width: 100%;  /* Adjust as needed */
    display: block;
    margin: 5px auto;  /* Centers horizontally */
    }
<!-- /* this is for error page */-->
.h1-error {
      font-size: 35px;
      color: #393667;
      margin-bottom: 10px;
    }
.p-error {
      font-size: 16px;
      color: #393667;
      margin-bottom: 30px;
    }
.error-img {
      width: 100%;
      max-height: 300px;
      object-fit: contain;
      margin-bottom: 20px;
    }
.back-button {
      display: inline-block;
      padding: 12px 30px;
      background: linear-gradient(to right, #4A90E2, #357ABD);
      color: white;
      font-weight: bold;
      text-decoration: none;
      border-radius: 6px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      transition: background 0.3s ease;
    }

.back-button:hover {
      background: linear-gradient(to right, #357ABD, #2B6BBF);
    }