p {
            color: #666;
            line-height: 1.6;
            direction: rtl;
        }

        center {
            width: 100%;
            position: relative;
            margin-top: 10em;
        }

        select {
            width: 80%;
            direction: rtl;
            color: white;
            border: 6px solid transparent;
            font-size: 14px;
            border-radius: 999px;
            background-color: #0664aa;
        }

        button {
            border-radius: 9999px;
            border-color: transparent;
            width: 200px;
            height: 40px;
            font-size: 18px;
            color: white;
            margin: 10 20 10 20;
            border-bottom: 2px solid #0664aa;
            background-color: #043d67;
        }

        button:hover {
            border: 2px solid white;
        }

        #deleteButton {
            position: absolute;
            background-color: red;
            color: white;
            border: none;
            cursor: pointer;
            z-index: 999;
            height: auto;
            margin: 0;
            width: 10%;
            margin-right: 10em;
        }

        table {
            color: black;
            width: 50%;
            padding-top: 50px;
            font-size: 25px;
        }

        body.dark table {
            color: white;
        }

        table#grade-edit {
            width: 60%;
        }

        tr {
            margin-top: 0.5em;
        }

        tr > td {
            padding-bottom: 1em;
        }

        td {
            text-align: center;
            vertical-align: middle;
            direction: rtl;
            width: 4%;
        }

        td.grades {
            width: 10%;
        }

        .canvas-container, .hist-container, #img {
            display: none;
        }

        .canvas-container {
            position: relative;
            text-wrap: wrap;
        }

        canvas {
            margin-top: -1em;
        }

        form#form {
            background: inherit;
        }

        .dept-link {
            cursor: pointer;
            text-decoration: none;
            color: inherit;
            transition: all 0.3s ease;
            padding: 0 8px;
            border-radius: 5px;
            display: inline-block;
            border-bottom: 2px solid rgba(255, 255, 255, 0.3);
            position: relative;
        }

        .dept-link:not(.active) {
            border-bottom: 2px solid rgba(255, 255, 255, 0.4);
        }

        .dept-link:hover:not(.active) {
            color: #fff;
            border-bottom: 2px solid rgba(255, 255, 255, 0.8);
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
            transform: translateY(-2px);
        }

        .dept-link.active {
            font-weight: 600;
            color: #fff;
            background: rgba(255, 255, 255, 0.15);
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
            border-bottom: 2px solid rgba(255, 255, 255, 0.6);
        }
        
#header > div > div:first-child {
    position: relative;
}


#ai-mode-box {
    display: flex;
    align-items: center;
    justify-content: center; /* Change to center since your form is centered */
    gap: 15px;               /* This creates the space between the switch and text */
    width: 100%;             /* Ensures it takes up the full TD width */
    flex-direction: row-reverse; /* This matches your screenshot where text is LEFT and switch is RIGHT */
}
#ai-mode-box span {
    margin-right: 15px; /* Adjust this value to set the gap */
    white-space: nowrap; /* Prevents the text from wrapping */
}

.ai-switch{
    position:relative;
    display:inline-block;
    width:46px;
    height:24px;
}

.ai-switch input{
    display:none;
}

.slider{
    position:absolute;
    cursor:pointer;
    background:#ccc;
    border-radius:24px;
    width:100%;
    height:100%;
    transition:.25s;
}

.slider:before{
    content:"";
    position:absolute;
    height:20px;
    width:20px;
    left:2px;
    top:2px;
    background:white;
    border-radius:50%;
    transition:.25s;
}

input:checked + .slider{
    background:#2ecc71;
}

input:checked + .slider:before{
    transform:translateX(22px);
}
#loadingOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15,23,42,0.85);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

#loadingOverlay .spinner {
  border: 8px solid rgba(243,243,243,0.15);
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 1.2s linear infinite;
}

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