*,
                h1,
                h2,
                h3,
                h4,
                h5,
                h6,
                p,
                body,
                html {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
                }

                main {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                height: 100vh;
                width:100vw;
                font-family: s;
                }

                .sidebar {
                width: 20vw;
                height: 100%;
                position: relative;
                top: 0;
                background-color: #444;
                color: white;
                display: flex;
                flex-direction: column;
                border-radius: 0 10px 10px 0;
                transition: all 0.3s ease;
                }

                .sidebar::-webkit-scrollbar {
                width: 8px;
                }

                .sidebar::-webkit-scrollbar-track {
                background: #444;
                }

                .sidebar::-webkit-scrollbar-thumb {
                background-color: #888;
                border-radius: 10px;
                border: 2px solid #444;
                }

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

                .sidebar h4 {
                position: sticky;
                display: flex;
                justify-content: center;
                align-items: center;
                top: 0;
                background-color: #444;
                width: 100%;
                border-bottom: 2px solid gray;
                }

                .sidebar #home-link {
                margin-top: 30px;
                }

                .sidebar a:nth-of-type(1) {
                }

                .sidebar a {
                display: flex;
                align-items: center;
                padding: 10px 0px 10px 35px;
                text-decoration: none;
                color: white;
                }

                .sidebar a:hover {
                background-color: #555;
                transition: all 0.3s ease;
                }

                .sidebar .icon {
                font-size: 20px;
                }

                .sidebar .text {
                margin-left: 10px;
                }

                .content {
                width:80vw;
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                padding: 1% 1.5%;
                background-color: #fff;
                }

                .navbar {
                box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
                background-color: #eee;
                color: #444;
                padding: 1% 2%;
                border-radius: 5px;
                }

                .navbar-brand h3 {
                font-weight: bold;
                color: #444;
                }

                .profile-image {
                width: 50px;
                height: 50px;
                object-fit: cover;
                border-radius: 50%;
                }

                #fullscreen-toggle {
                background: none;
                border: none;
                cursor: pointer;
                color: #444;
                }

                #fullscreen-toggle i {
                font-size: 1.5em;
                }

                .sidebar a.active {
                background-color: #fff;
                color: #343a40;
                }

                .submenu {
                display: none;
                flex-direction: column;
                padding-left: 4%;
                }

                .submenu.active {
                display: flex;
                }

                .content-section {
                height: 85%;
                margin-top: 1.5%;
                border-radius: 5px;
                padding: 1.5%;
                box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
                background-color: #eee;
                display: none;
                overflow: auto;
                }

                .content-section::-webkit-scrollbar {
                width: 8px;
                }

                .content-section::-webkit-scrollbar-track {
                background: #eee;
                }

                .content-section::-webkit-scrollbar-thumb {
                background-color: #888;
                border-radius: 10px;
                border: 2px solid #eee;
                }

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

                .content-section.active {
                display: block;
                }

                .dashboard-header {
                text-align: center;
                }

                .dashboard-header h2 {
                font-size: 2em;
                margin-bottom: 10px;
                }

                .dashboard-header p {
                font-size: 1.2em;
                color: #666;
                }

                .dashboard-cards {
                display: flex;
                flex-wrap: wrap;
                gap: 1%;
                justify-content: flex-start;
                }

                .dashboard-cards a{
                text-decoration:none;
                background: #fff;
                border-radius: 10px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                overflow: hidden;
                width: 48%;
                margin-top: 1%;
                text-align: center;
                transition: transform 0.3s;

                }

                .card {
                background: #fff;
                border-radius: 10px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                overflow: hidden;
                width: 48%;
                margin-top: 1%;
                text-align: center;
                transition: transform 0.3s;
                }

                .dashboard-cards a .card{
                width: 100%;
                }

                .dashboard-cards a:hover {
                cursor:pointer;
                }

                .card:hover {
                transform: translateY(-10px);
                }

                .card-icon {
                font-size: 3em;
                padding: 5px;
                background: #f5f5f5;
                }

                .card-icon h3{
                font-size: .5em;
                }

                .card-content {
                padding: 10px;
                }

                .card-content h3 {
                font-size: 1.2em;
                font-weight: bold;
                }

                .card-content p {
                font-size: .8em;
                color: #666;
                }

                .profile-header {
                text-align: center;
                margin-bottom: 20px;
                }

                .profile-header h2 {
                font-size: 2em;
                margin-bottom: 10px;
                }

                .profile-header p {
                font-size: 1.2em;
                color: #666;
                }

                .profile-form {
                max-width: 95%;
                margin: 0 auto;
                padding: 20px;
                background: #fff;
                border-radius: 10px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                }

                .form-group {
                margin-bottom: 15px;
                }

                .form-group label {
                display: block;
                margin-bottom: 5px;
                font-weight: bold;
                }

                .form-group input {
                width: 100%;
                padding: 10px;
                border: 1px solid #ccc;
                border-radius: 5px;
                font-size: 1em;
                }

                .btn {
                display: inline-block;
                padding: 10px 20px;
                background: #007bff;
                color: #fff;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                font-size: 1em;
                transition: background 0.3s;
                }

                .btn:hover {
                background: #0056b3;
                }

                .section-header {
                text-align: center;
                margin-bottom: 20px;
                }

                .section-header h2 {
                font-size: 2em;
                margin-bottom: 10px;
                }

                .table {
                width: 100%;
                border-collapse: collapse;
                }

                .table th,
                .table td {
                border: 1px solid #888;
                padding: 4px;
                text-align: left;
                }

                .table th {
                background-color: #444;
                font-weight: bold;
                color: #eee;
                }

                .form {
                max-width: 600px;
                margin: 0 auto;
                padding: 20px;
                background: #fff;
                border-radius: 10px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                }

                .notifications-list {
                list-style-type: none;
                padding: 0;
                }

                .notifications-list li {
                background: #f9f9f9;
                padding: 10px;
                margin-bottom: 5px;
                border-radius: 5px;
                }

                #backButton {
                background: #007bff;
                color: #fff;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                font-size: 1em;
                transition: background 0.3s;
                }

                #backButton:hover {
                background: #0056b3;
                }

                #backButton i {
                margin-right: 5px;
                }

                #attendanceBackButton {
                margin-bottom: 20px;
                background: #007bff;
                color: #fff;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                font-size: 1em;
                transition: background 0.3s;
                }

                #attendanceBackButton:hover {
                background: #0056b3;
                }

                #attendanceBackButton i {
                margin-right: 5px;
                }

                #calendar {
                max-width: 100%;
                height: 100%;
                background-color: white;
                text-align: center;
                padding: 5px 10px;
                border-radius: 5px;
                }

                #calendar table {
                font-size: 15px;
                color: #444;
                }

                #assessmentTableContainer strong,
                #gradesTableContainer strong {
                font-size: 1em;
                color: #444;
                }

                #attendance_content input,
                #assessmentTableContainer input,
                #assessmentTabsContainer input,
                #gradesTableContainer input {
                width: 100%;
                background-color: #eee;
                border: none;
                padding: 5px 10px;
                outline: 1px solid #aaa;
                border-radius: 5px;
                }

                .card .dropdown {
                position: absolute;
                right: 3%;
                top: 5%;
                }

                .card button {
                padding: 5px 10px;
                }

                .card .dropdown-menu {
                padding: 10px;
                }
                #assessments_content .card-content,
                #performance_content .card-content,
                #milestone_content .card-content,
                #attendance_content p {
                text-align: left;
                }

                #assessments_content .card-icon,
                #performance_content .card-icon,
                #milestone_content .card-icon,
                #attendance_content .card-icon {
                font-size: 2em;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                gap: 10px;
                }


                @media (max-width: 1000px) {
                .sidebar {
                width: 100px;
                }
                .sidebar h4 .icon img {
                height: 50px;
                }

                .sidebar a {
                justify-content: center;
                padding: 10px;
                }

                .sidebar a .text,
                .sidebar h4 .text {
                display: none;
                }

                #fullscreen-toggle{
                display: none;
                }

                .card {
                width: 48%;
                }
                }

                @media (max-width: 600px) {
                .form {
                padding: 10px;
                }

                .form-group input {
                padding: 8px;
                }

                .btn {
                padding: 8px 16px;
                }
                }

                @media (max-width: 600px) {
                .profile-form {
                padding: 10px;
                }

                .form-group input {
                padding: 8px;
                }

                .btn {
                padding: 8px 16px;
                }

                .sidebar h4 .icon img {
                height: 35px;
                }
                .card {
                width: 100%;
                }
                .dashboard-cards a{width:100%;}
                .is-invalid {
                border-color: red;
                outline: none;
                }
                }






.milestone-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.milestone-modal-content {
    background: white;
    width: 90%;
    margin: 5% auto;
    padding: 20px;
    border-radius: 10px;
    position: relative;
}

.close-popup {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
}

.close-popup:hover {
    color: red;
}