
        body {
            padding-top: 56px;
            background: linear-gradient(to bottom, #ffffff, #d4e0f5);
            background-attachment: fixed;
            font-family: Arial, sans-serif;}
.logo-title {
            display: flex;
            align-items: center;
            margin-bottom: 20px;}
.logo-title img {
            width: 50px;
            height: 50px;
            margin-right: 15px;}
.icon-container {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            margin-top: 20px;
            padding-bottom: 30px;
            margin-bottom: 40px;}
.icon-card {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            text-align: center;
            border-radius: 8px;
            background: linear-gradient(135deg, #6a11cb, #2575fc);
            color: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            margin: 10px;
            text-decoration: none;
            transition: transform 0.2s;}
.icon-card:hover {
            transform: scale(1.05);}
.icon-card img {
            width: 50px;
            height: 50px;}
.icon-card span {
            margin-top: 10px;
            font-size: 1rem;
            font-weight: bold;}
.icon-card:nth-child(1) {
            background: linear-gradient(135deg, #ff7c92, #f6a6bd);}
.icon-card:nth-child(2) {
            background: linear-gradient(135deg, #8c7bff, #c3a8f0);}
.icon-card:nth-child(3) {
            background: linear-gradient(135deg, #ff9e57, #f98a8a);}
.icon-card:nth-child(4) {
            background: linear-gradient(135deg, #ef5350, #f48fb1);}
.icon-card:nth-child(5) {
            background: linear-gradient(135deg, #42a5f5, #90caf9);}
.icon-card:nth-child(6) {
            background: linear-gradient(135deg, #ba68c8, #ce93d8);}
.icon-card:nth-child(7) {
            background: linear-gradient(135deg, #ffca28, #ff8a65);}
.icon-card:nth-child(8) {
            background: linear-gradient(135deg, #66bb6a, #81c784);}
.icon-card:nth-child(9) {
            background: linear-gradient(135deg, #ec407a, #f06292);}
.icon-card:nth-child(10) {
            background: linear-gradient(135deg, #8e24aa, #ab47bc);}
.icon-card:nth-child(11) {
            background: linear-gradient(135deg, #5c6bc0, #7986cb);}
.icon-card:nth-child(12) {
            background: linear-gradient(135deg, #26a69a, #4db6ac);}
.details-screen {
            display: none;
            padding: 20px;
            border-radius: 15px;
            background: linear-gradient(135deg, #fbc2eb, #a6c1ee);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            margin: 20px 0;
            padding: 15px;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;}
.details-screen.active {
            display: block;
            opacity: 1;
            transform: translateY(0);}
.icon-container {
            opacity: 1;
            transition: opacity 0.3s ease-in-out;}
.icon-container.hidden {
            opacity: 0;
            pointer-events: none;}
.card {
            border-radius: 10px;
            padding: 15px;
            background: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
#back-button {
            display: none;
            margin-bottom: 20px;
            font-size: 1.2rem;
            background: none;
            border: none;
            color: #007bff;
            cursor: pointer;}
#back-button:hover {
            text-decoration: underline;}
.student-profile-box {
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #6a11cb, #fc25258c);
            color: white;
            padding: 10px;
            margin: 5px;
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            text-align: center;
            margin-bottom: 10px;
            margin-top: 55px;}
.student-profile-box {
            opacity: 1;
            transition: opacity 0.3s ease-in-out;}
.student-profile-box.hidden {
            opacity: 0;
            pointer-events: none;}
.student-img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid white;
            margin-right: 15px;}
.student-details h3 {
            margin: 0;
            font-size: 1.5rem;}
.student-details p {
            margin: 5px 0;
            font-size: 1rem;}
.fees-box {
            background: linear-gradient(135deg, #ff9a9e, #fad0c4);
            color: black;
            padding: 15px;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            margin-bottom: 20px;
            transition: all 0.3s ease;}
.fees-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            padding: 10px;}
.fees-header h4 {
            margin: 0;}
.toggle-btn {
            background: white;
            color: #007bff;
            border: none;
            font-size: 1.5rem;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            cursor: pointer;
            transition: transform 0.3s ease;}
.fees-table-container {
            display: none;
            overflow: hidden;
            transition: max-height 0.3s ease-out;}
.table {
            background: white;
            border-radius: 8px;
            overflow: hidden;}
.marks-box {
            background: linear-gradient(135deg, #84fab0, #8fd3f4);
            color: black;
            padding: 15px;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            margin-bottom: 20px;
            transition: all 0.3s ease;}
.marks-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            padding: 10px;}
.marks-header h4 {
            margin: 0;}
.marks-table-container {
            display: none;
            overflow: hidden;
            transition: max-height 0.3s ease-out;}
.marks-graph-container {
            display: none;
            padding: 20px;}
.bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(135deg, #6fde78, #00a0ff);
            display: flex;
            justify-content: space-around;
            box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);}
.nav-btn {
            background: none;
            border: none;
            cursor: pointer;
            padding: 8px;
            text-align: center;
            color: white;
            font-size: 12px;
            transition: transform 0.2s ease-in-out;
            display: flex;
            flex-direction: column;
            align-items: center;}
.nav-btn i {
            font-size: 1.8rem;
            margin-bottom: 3px;}
.nav-btn:hover {
            transform: scale(1.1);}
.student-image-container {
            perspective: 1000px; /* Creates 3D depth */
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px 0;}
.student-image {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            transform-style: preserve-3d;}
.student-image:hover {
            transform: rotateY(15deg) rotateX(10deg) scale(1.1);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);}
.student-image:active {
            transform: rotateY(-10deg) rotateX(-5deg) scale(1);}
.calendar-container {
            border-radius: 15px;
            background: linear-gradient(135deg, #a18cd1, #fbc2eb);
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            margin-top: 20px;
            text-align: center;
            max-width: 400px; /* Restricts width */
            margin-left: auto;
            margin-right: auto;
            overflow: hidden; /* Prevents overflow */
            position: relative; /* Ensures child elements stay inside */}
.calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            font-size: 1.2rem;
            font-weight: bold;
            background: linear-gradient(135deg, #ff9a9e, #fad0c4);
            border-radius: 10px;
            color: white;}
.calendar-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
            overflow: hidden; /* Ensures table stays inside */
            display: table;}
.calendar-table th, .calendar-table td {
            padding: 5px;
            text-align: center;
            border: 1px solid #ddd;}
.calendar-table th {
            background: #ff758c;
            color: white;
            font-weight: bold;}
.calendar-day {
            height: 30px;
            width: 60px;
            font-size: 1rem;
            cursor: pointer;
            transition: background 0.3s;}
.calendar-day:hover {
            background: #ff7eb3;
            color: white;
            border-radius: 50%;}
.calendar-button {
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            padding: 5px;}
.calendar-button:hover {
            opacity: 0.7;}
.school-container {
            border-radius: 15px;
            background: linear-gradient(135deg, #84fab0, #8fd3f4);
            padding: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            margin-top: 20px;
            text-align: center;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            overflow: hidden;}
.school-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;}
.school-table th, .school-table td {
            padding: 12px;
            text-align: left;
            border: 1px solid #ddd;}
.school-table th {
            background: #ff758c;
            color: white;
            font-weight: bold;}
.hidden-row {
            display: none;}
#toggle-school-data {
            background: #ff758c;
            color: white;
            padding: 10px 15px;
            margin-top: 10px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;}
#toggle-school-data:hover {
            background: #ff5e6c;}
.profile-container {
            border-radius: 15px;
            background: linear-gradient(135deg, #fbc2eb, #a6c1ee);
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            margin-top: 20px;
            text-align: center;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            overflow: hidden;}
.profile-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;}
.profile-table th, .profile-table td {
            padding: 12px;
            text-align: left;
            border: 1px solid #ddd;}
.profile-table th {
            background: #6a11cb;
            color: white;
            font-weight: bold;}
#toggle-profile-data {
            background: #6a11cb;
            color: white;
            padding: 10px 15px;
            margin-top: 10px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;}
#toggle-profile-data:hover {
            background: #5a0da7;}
.homework-container {
            border-radius: 15px;
            background: linear-gradient(135deg, #84fab0, #8fd3f4);
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            margin-top: 20px;
            text-align: center;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            overflow: hidden;}
.homework-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;}
.homework-table th, .homework-table td {
            padding: 12px;
            text-align: left;
            border: 1px solid #ddd;}
.homework-table th {
            background: #2575fc;
            color: white;
            font-weight: bold;}
#toggle-homework-data {
            background: #2575fc;
            color: white;
            padding: 10px 15px;
            margin-top: 10px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;}
#toggle-homework-data:hover {
            background: #1a5bd3;}
* Container for fees section */
        .fees-container {
            text-align: center;
            margin-top: 20px;}
/* Toggle switch styles */
        .toggle-container {
            display: flex;
            justify-content: center;
            gap: 15px;
            align-items: center;
            margin-bottom: 20px;}
/* Custom toggle switch */
        .switch {
            position: relative;
            display: inline-block;
            width: 50px;
            height: 25px;}
.switch input {
            opacity: 0;
            width: 0;
            height: 0;}
.slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: 0.4s;
            border-radius: 25px;}
.slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 4px;
            bottom: 3px;
            background-color: white;
            transition: 0.4s;
            border-radius: 50%;}
input:checked + .slider {
            background-color: #007bff;}
input:checked + .slider:before {
            transform: translateX(24px);}
/* Fees section layout */
        .fees-section {
            display: flex;
            justify-content: center;}
/* Fees box styles */
        .fees-box {
            padding: 20px;
            border-radius: 12px;
            background: linear-gradient(135deg, #6a11cb, #2575fc);
            color: white;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease-in-out;}
/* Fees table */
        .fees-table, .fees-details-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
            white-space: nowrap;}
.fees-table th, .fees-table td, .fees-details-table th, .fees-details-table td {
            padding: 10px;
            border: 1px solid #fff;
            text-align: center;}
.fees-table th, .fees-details-table th {
            background: rgba(255, 255, 255, 0.2);}
/* Hide fees box when toggled off */
        .hidden {
            display: none;}
/* Hide tables by default */
        .content {
            display: none;}
/* Style for collapsible headers */
        .collapsible {
            background-color: #007bff;
            color: white;
            padding: 10px;
            text-align: left;
            cursor: pointer;
            border-radius: 5px;
            margin-top: 10px;}
.collapsible:hover {
            background-color: #0056b3;}
/* Show content when active */
        .active + .content {
            display: block;}

        /* Calendar Container */
        .calendar-container {
            width: 100%;
            max-width: 600px;
            margin: 20px auto;
            padding: 10px;
            background: linear-gradient(to right, #e3f2fd, #ffebee);
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            text-align: center;}
.calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            font-size: 18px;
            font-weight: bold;
            background-color: #42a5f5;
            color: white;
            border-radius: 6px;}
.calendar-header button {
            background: none;
            border: none;
            font-size: 18px;
            color: white;
            cursor: pointer;}
.calendar-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;}
.calendar-table th,
        .calendar-table td {
            width: 14%;
            padding: 10px;
            text-align: center;
            border: 1px solid #ddd;}
.calendar-table th {
            background-color: #42a5f5;
            color: white;}
.calendar-table td {
            background-color: #f9f9f9;}
.calendar-table td.holiday {
            background-color: #ffcccb;
            font-weight: bold;}
/* Holiday Table */
        .holiday-table {
            width: 100%;
            max-width: 600px;
            margin: 20px auto;
            border-collapse: collapse;
            text-align: center;
            background: linear-gradient(to right, #fff3e0, #ffebee);
            border-radius: 6px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}
.holiday-table th,
        .holiday-table td {
            padding: 10px;
            border: 1px solid #ddd;}
.holiday-table th {
            background-color: #ff7043;
            color: white;
            font-size: 16px;}
.holiday-table td {
            background-color: #fff;}
.holiday-table tr:nth-child(even) td {
            background-color: #fce4ec;}
/* Formatting for date */
        .holiday-table td:nth-child(2) {
            font-weight: bold;
            color: #d84315;}
/* Mobile responsiveness */
        @media (max-width: 768px) {
            .calendar-container,
            .holiday-table {
                max-width: 100%;
                overflow-x: auto;}
.calendar-header {
                font-size: 16px;}
.year-toggle-button{
            width: 100%;
            background: #418ac5f2;
            color: white;
            font-family: system-ui;}

        .homework-container {
            border-radius: 15px;
            background: linear-gradient(135deg, #84fab0, #8fd3f4);
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            margin-top: 20px;
            text-align: center;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            overflow: hidden;}
.profile-container {
            border-radius: 15px;
            background: linear-gradient(135deg, #fbc2eb, #a6c1ee);
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            margin-top: 20px;
            text-align: center;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            overflow: hidden;}
.profile-table th {
            background: #2575fc;
            color: white;
            font-weight: bold;}
#toggle-profile-data {
            background: #2575fc;
            color: white;
            padding: 10px 15px;
            margin-top: 10px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;}
#toggle-profile-data:hover {
            background: #1a5bd3;}
.school-container {
            border-radius: 15px;
            background: linear-gradient(135deg, #ff9a9e, #fad0c4);
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            margin-top: 20px;
            text-align: center;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            overflow: hidden;}
.school-table th {
            background: #ff6b6b;
            color: white;
            font-weight: bold;}
#toggle-school-data {
            background: #ff6b6b;
            color: white;
            padding: 10px 15px;
            margin-top: 10px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;}
#toggle-school-data:hover {
            background: #e05656;}
.fees-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            margin-top: 20px;
            width: 100%;}
.fees-section {
            display: none;
            width: 100%;
            max-width: 600px;
            padding: 5px;
            background: linear-gradient(to right, #f7f7f7, #e6e6e6);
            border-radius: 12px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);}
.summary-section {
            width: 100%;
            max-width: 600px;
            padding: 10px;
            background: linear-gradient(to right, #f7f7f7, #e6e6e6);
            border-radius: 12px;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);}
.fees-section.active, .summary-section.active, h2.active {
            display: block;}
h2 {
            display: none;
            text-align: center;

            color: #333;}
h2.active {
            display: block;}
h3 {
            font-size: medium;}
.fee-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
            color:black;
            font-size: xx-small;}
.fee-table th, .fee-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;}
.fee-table th {
            background-color: #007bff;
            color: white;}
.toggle-container {
            text-align: center;
            margin: 20px 0;}
#toggleFees {
            padding: 10px 20px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            transition: background 0.3s ease;}
#toggleFees:hover {
            background: #0056b3;}
.fees-container {
            width: 100%;
            max-width: 800px;
            margin: auto;}
.fees-year {
            cursor: pointer;
            background: #007bff;
            color: white;
            padding: 5px;
            border-radius: 5px;
            text-align: center;
            margin-bottom: 5px;
            font-weight: bold;
            transition: background 0.3s ease-in-out;}
.fees-year:hover {
            background: #0056b3;}
.fees-details {
            display: none;
            overflow: hidden;
            transition: max-height 0.4s ease-in-out, padding 0.3s ease-in-out;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
            margin-top: 5px;
            padding: 0;}
.fees-details table {
            width: 100%;
            border-collapse: collapse;}
.fees-details table th,
        .fees-details table td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: center;}
.fees-details table th {
            background: #007bff;
            color: white;}
.fees-details table tr:nth-child(even) {
            background: #f9f9f9;}
.fees-details table tr:hover {
            background: #e2e2e2;}
.fees-details.collapsed {
            display: none;
            padding: 0;}
.fees-details:not(.collapsed) {
            display:block;
            padding: 5px;}

        .switch {
            position: relative;
            display: block;
            vertical-align: top;
            width: 250px;
            height: 25px;
            padding: 3px;
            margin: 0 10px 10px 0;
            background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
            background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
            border-radius: 18px;
            box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
            cursor: pointer;
            box-sizing:content-box;}
.switch-input {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            box-sizing:content-box;}
.switch-label {
            position: relative;
            display: block;
            height: inherit;
            font-size: 15px;
            text-transform: uppercase;
            background: #2196f3;
            border-radius: inherit;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
            box-sizing:content-box;}
.switch-label:before, .switch-label:after {
            position: absolute;
            top: 50%;
            margin-top: -.5em;
            line-height: 1;
            -webkit-transition: inherit;
            -moz-transition: inherit;
            -o-transition: inherit;
            transition: inherit;
            box-sizing:content-box;}
.switch-label:before {
            content: attr(data-off);
            right: 20px;
            color: #ffffff;
            text-shadow: 0 1px rgba(255, 255, 255, 0.5);}
.switch-label:after {
            content: attr(data-on);
            left: 20px;
            color: #FFFFFF;
            text-shadow: 0 1px rgba(0, 0, 0, 0.2);
            opacity: 0;}
.switch-input:checked ~ .switch-label {
            background: #e3212199;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);}
.switch-input:checked ~ .switch-label:before {
            opacity: 0;}
.switch-input:checked ~ .switch-label:after {
            opacity: 1;}
.switch-handle {
            position: absolute;
            top: 3px;
            left: 4px;
            width: 25px;
            height: 25px;
            background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
            background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
            border-radius: 100%;
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);}
.switch-handle:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -6px 0 0 -6px;
            width: 12px;
            height: 12px;
            background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
            background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
            border-radius: 6px;
            box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);}
.switch-input:checked ~ .switch-handle {
            left: 227px;
            box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);}
/* Transition
        ========================== */
        .switch-label, .switch-handle {
            transition: All 0.3s ease;
            -webkit-transition: All 0.3s ease;
            -moz-transition: All 0.3s ease;
            -o-transition: All 0.3s ease;}


        .marks-container {
            margin: auto;
            font-family: Arial, sans-serif;}
.exam-section {
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.3s ease-in-out;}
.exam-section h3 {
            background: #007bff;
            color: #fff;
            padding: 10px;
            margin: 0;
            cursor: pointer;
            text-align: center;
            font-size: 16px;
            border-radius: 8px 8px 0 0;
            transition: background 0.3s;}
.exam-section h3:hover {
            background: #0056b3;}
.exam-details {
            background: #f9f9f9;
            padding: 10px;}
.exam-details table {
            width: 100%;
            border-collapse: collapse;}
.marks-table th, .marks-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;}
.marks-table th {
            background: #e3212199;
            color: white;}
.collapsed {
            display: none;}
/* Container Styling */
        .attendance-summary {
            text-align: center;
            margin-bottom: 20px;}
.summary-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
            background: #f5f5f5;
            border-radius: 10px;
            overflow: hidden;}
.summary-table th, .summary-table td {
            border: 1px solid #ddd;
            text-align: center;}
.summary-table td {
            padding: 8px;
            border: 1px solid #ddd;
            text-align: center;}
.summary-table th {
            padding: 12px;
            background: #4a90e2;
            color: white;}
.summary-table tbody tr:hover {
            background: #e3f2fd;}
/* Toggle Button */
        .toggle-btn {
            padding: 8px 12px;
            background: #4caf50;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            transition: 0.3s ease;}
/* Summary Table */
        .summary-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
            background: #f5f5f5;
            border-radius: 10px;
            overflow: hidden;}
.summary-table th, .summary-table td {
            padding: 12px;
            border: 1px solid #ddd;
            text-align: center;}
.summary-table th {
            background: #4a90e2;
            color: white;}
/* Toggle View Icon */
        .toggle-btn {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 18px;
            color: #4caf50;
            transition: 0.3s ease;}
.toggle-btn:hover {
            color: #388e3c;}
/* Attendance Details Section */
        .attendance-section {
            display: none; /* Initially Hidden */
            background: linear-gradient(to right, #dbe1eb, #f9e1e1);
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 15px;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);}
.attendance-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;}
.attendance-table th, .attendance-table td {
            padding: 10px;
            border: 2px solid #cdc7c7;
            text-align: center;}
.attendance-table th {
            background: #ff6f61;
            color: white;}
.attendance-table tbody tr:hover {
            background: #ffe0e0;}
/* Assessment Screen Styles */
        #assessmentContainer {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 20px;
            background: linear-gradient(to right, #eef2f3, #dbe2e6);
            border-radius: 10px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);}
.assessment-button {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 12px 20px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            width: 80%;
            max-width: 300px;
            text-align: center;
            transition: all 0.3s ease;}
.assessment-button:hover {
            background: #45a049;
            transform: scale(1.05);}
.assessment-button:active {
            background: #3e8e41;}
/* Responsive Design */
        @media (max-width: 768px) {
            #assessmentContainer {
                padding: 15px;}
.assessment-button {
                width: 100%;
                max-width: none;}
/* Container for the bill section */
        #billContainer {
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}
/* Year toggle dropdown */
        #yearToggle {
            margin-bottom: 15px;
            padding: 8px 12px;
            border-radius: 4px;
            border: 1px solid #ccc;
            font-size: 16px;}
/* Bill tables */
        .bill-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            font-size: smaller;}
/* Table headers */
        .bill-table th {
            background-color: #678aaf;
            color: white;
            padding: 10px;
            text-align: left;
            border: 1px solid white;}
/* Table rows */
        .bill-table td {
            border: 1px solid #ddd;
            padding: 2px;
            text-align: left;}
/* Alternate row background */
        .bill-table tr:nth-child(even) {
            background-color: #f2f2f2;}
/* Hover effect */
        .bill-table tr:hover {
            background-color: #e6f7ff;}
/* Section headers */
        #billContainer h3 {
            margin-top: 20px;
            color: #333;
            font-size: 1.2rem;
            border-bottom: 2px solid #4CAF50;
            padding-bottom: 5px;}
#imageContainer {
            display: flex;
            flex-wrap: wrap;
            gap: 16px;
            justify-content: flex-start;}
.image-card {
            width: 150px;
            height: 200px;
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden;
            text-align: center;
            background-color: #f9f9f9;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}
.image-card img {
            width: 100%;
            height: 150px;
            object-fit: cover;}
.image-card h4 {
            margin: 4px 0 0;
            font-size: 14px;
            color: #333;}
.image-card p {
            margin: 2px 0 8px;
            font-size: 12px;
            color: #777;}
/* Lightbox navigation and close button */
        .lb-data .lb-caption {
            font-size: 14px;
            color: #fff;}
.lb-nav a.lb-prev,
        .lb-nav a.lb-next {
            width: 50px;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;}
.lb-close {
            top: 20px;
            right: 20px;
            color: white;
            font-size: 30px;
            opacity: 0.8;}
.lb-close:hover {
            opacity: 1;}
#load-more-btn {
            padding: 10px 20px;
            font-size: 15px;
            color: #fff;
            background-color: #007BFF;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;}
#load-more-btn:hover {
            background-color: #0056b3;}
#load-more-btn:active {
            background-color: #004494;}
#load-more-btn:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);}
#load-more-btn-container {
            text-align: center;
            margin-top: 15px;}
.year-section {
		margin-top: 20px;}

        .loader {
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1slinear infinite;
            margin: 20px auto;

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
