/* _content/TemisV2_Auth/Components/Account/Pages/ForgotPassword.razor.rz.scp.css */
/* Login/Register Container (matches existing) */
.login-container[b-dyyn5ja6z8] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 450px;
    margin: 40px auto;
    padding: 40px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

/* Header Styles (matches login) */
.login-header[b-dyyn5ja6z8] {
    color: #2c3e50;
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 5px;
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 2px solid #f1f3f5;
    margin-top: 0;
}

.login-subheader[b-dyyn5ja6z8] {
    color: #576574;
    text-align: center;
    margin-bottom: 25px;
    font-size: 1.1rem;
}

/* Form Elements (identical to login) */
.login-form .form-floating[b-dyyn5ja6z8] {
    margin-bottom: 1.8rem;
    position: relative;
}

.login-form .form-control[b-dyyn5ja6z8] {
    height: 52px;
    padding: 1rem 1.2rem;
    border: 1px solid #dfe6e9;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
}

    .login-form .form-control:focus[b-dyyn5ja6z8] {
        border-color: #3498db;
        box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.15);
        background-color: white;
    }

.login-form label[b-dyyn5ja6z8] {
    color: #576574;
    font-weight: 500;
    padding: 0.5rem 1.2rem;
    transition: all 0.3s ease;
}

/* Validation (matches login) */
.validation-message[b-dyyn5ja6z8] {
    color: #e74c3c;
    font-size: 0.9rem;
    margin-top: 5px;
}

.validation-summary[b-dyyn5ja6z8] {
    background-color: #f8d7da;
    border-left: 4px solid #e74c3c;
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 0 4px 4px 0;
}

    .validation-summary:empty[b-dyyn5ja6z8] {
        display: none;
    }

/* Button (identical to login) */
.login-form .btn-primary[b-dyyn5ja6z8] {
    width: 100%;
    padding: 14px;
    font-size: 1.1rem;
    font-weight: 500;
    background-color: #3498db;
    border: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
    color: white;
    cursor: pointer;
}

    .login-form .btn-primary:hover[b-dyyn5ja6z8] {
        background-color: #2980b9;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    }

    .login-form .btn-primary:active[b-dyyn5ja6z8] {
        transform: translateY(0);
    }

/* Password Strength Meter (new for register) */
.password-strength[b-dyyn5ja6z8] {
    height: 4px;
    background: #e9ecef;
    margin: 8px 0 20px;
    border-radius: 2px;
    overflow: hidden;
}

.password-strength-bar[b-dyyn5ja6z8] {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease, background 0.3s ease;
}

.password-strength.weak .password-strength-bar[b-dyyn5ja6z8] {
    width: 30%;
    background: #e74c3c;
}

.password-strength.medium .password-strength-bar[b-dyyn5ja6z8] {
    width: 60%;
    background: #f39c12;
}

.password-strength.strong .password-strength-bar[b-dyyn5ja6z8] {
    width: 100%;
    background: #2ecc71;
}

/* Responsive (matches login) */
@media (max-width: 768px) {
    .login-container[b-dyyn5ja6z8] {
        padding: 20px;
        margin: 20px auto;
    }

    .login-header[b-dyyn5ja6z8] {
        font-size: 1.5rem;
    }

    .login-form .form-control[b-dyyn5ja6z8] {
        height: 45px;
    }
}
/* _content/TemisV2_Auth/Components/Account/Pages/Login.razor.rz.scp.css */
/* ==========================================
   LOGIN CONTAINER - CENTERED LAYOUT
   ========================================== */

.login-container[b-h1d0lo7de0] {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    background: #f8f9fa;
    padding: 4rem 1rem 2rem 1rem;
}

/* ==========================================
   LOGIN PANEL - CENTERED CARD
   ========================================== */

.login-panel[b-h1d0lo7de0] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    width: 100%;
    max-width: 480px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 2.5rem;
    animation: fadeInUp-b-h1d0lo7de0 0.4s ease-out;
}

@keyframes fadeInUp-b-h1d0lo7de0 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   LOGO SECTION
   ========================================== */

.login-logo[b-h1d0lo7de0] {
    text-align: center;
    margin-bottom: 1rem;
}

    .login-logo img[b-h1d0lo7de0] {
        max-width: 80px;
        height: auto;
        opacity: 0.6;
    }

/* ==========================================
   HEADER SECTION
   ========================================== */

.login-header[b-h1d0lo7de0] {
    text-align: center;
    margin-bottom: 2rem;
}

    .login-header h2[b-h1d0lo7de0] {
        color: #2a5885;
        font-size: 1.75rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        margin-top: 0;
    }

    .login-header p[b-h1d0lo7de0] {
        color: #6c757d;
        font-size: 0.95rem;
        margin: 0;
    }

/* ==========================================
   STATUS MESSAGES
   ========================================== */

.status-message[b-h1d0lo7de0] {
    padding: 12px 16px;
    margin-bottom: 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.95rem;
}

    .status-message:empty[b-h1d0lo7de0] {
        display: none;
    }

    .status-message.success[b-h1d0lo7de0] {
        background-color: #d4edda;
        color: #155724;
        border-left: 4px solid #28a745;
    }

    .status-message.error[b-h1d0lo7de0] {
        background-color: #f8d7da;
        color: #721c24;
        border-left: 4px solid #e74c3c;
    }

    .status-message.info[b-h1d0lo7de0] {
        background-color: #d1ecf1;
        color: #0c5460;
        border-left: 4px solid #17a2b8;
    }

/* ==========================================
   FORM STYLES
   ========================================== */

.login-form .form-group[b-h1d0lo7de0] {
    margin-bottom: 1.5rem;
}

.login-form label[b-h1d0lo7de0] {
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.95rem;
}

.login-form .form-control[b-h1d0lo7de0] {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1.5px solid #ced4da;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.2s ease-in-out;
    background-color: #f8f9fa;
}

    .login-form .form-control:focus[b-h1d0lo7de0] {
        border-color: #3498db;
        box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
        background-color: #fff;
        outline: none;
    }

    .login-form .form-control[b-h1d0lo7de0]::placeholder {
        color: #adb5bd;
    }

/* ==========================================
   REMEMBER ME CHECKBOX
   ========================================== */

.login-remember[b-h1d0lo7de0] {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 0.5rem 0;
}

    .login-remember input[type="checkbox"][b-h1d0lo7de0] {
        width: 18px;
        height: 18px;
        margin-right: 0.75rem;
        cursor: pointer;
        border: 2px solid #adb5bd;
        border-radius: 4px;
    }

        .login-remember input[type="checkbox"]:checked[b-h1d0lo7de0] {
            background-color: #3498db;
            border-color: #3498db;
        }

    .login-remember label[b-h1d0lo7de0] {
        margin: 0;
        cursor: pointer;
        font-weight: normal;
        padding-left: 5px;
        font-size: 0.95rem;
    }

/* ==========================================
   SUBMIT BUTTON
   ========================================== */

.login-actions[b-h1d0lo7de0] {
    margin-bottom: 1rem;
}

.login-form .btn-primary[b-h1d0lo7de0] {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 1.05rem;
    font-weight: 500;
    background-color: #3498db;
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    position: relative;
}

    .login-form .btn-primary:hover:not(:disabled)[b-h1d0lo7de0] {
        background-color: #2980b9;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    }

    .login-form .btn-primary:active:not(:disabled)[b-h1d0lo7de0] {
        transform: translateY(0);
    }

    .login-form .btn-primary:disabled[b-h1d0lo7de0] {
        opacity: 0.7;
        cursor: not-allowed;
    }

    .login-form .btn-primary .invisible[b-h1d0lo7de0] {
        visibility: hidden;
    }

/* ==========================================
   BUTTON LOADING STATE
   ========================================== */

.button-spinner[b-h1d0lo7de0] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.spinner-icon[b-h1d0lo7de0] {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-h1d0lo7de0 0.8s linear infinite;
}

@keyframes spin-b-h1d0lo7de0 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ==========================================
   VALIDATION MESSAGES
   ========================================== */

.validation-message[b-h1d0lo7de0] {
    color: #e74c3c;
    font-size: 0.875rem;
    margin-top: 0.375rem;
    display: block;
}

.validation-summary[b-h1d0lo7de0] {
    background-color: #f8d7da;
    border-left: 4px solid #e74c3c;
    padding: 12px 16px;
    margin-bottom: 1.5rem;
    border-radius: 0 6px 6px 0;
    font-size: 0.9rem;
}

    .validation-summary:empty[b-h1d0lo7de0] {
        display: none;
    }

/* ==========================================
   ERROR/SUCCESS TEXT
   ========================================== */

.text-error[b-h1d0lo7de0] {
    color: #e74c3c;
    font-size: 0.9rem;
    margin-top: 0.75rem;
}

.text-success[b-h1d0lo7de0] {
    color: #28a745;
    font-size: 0.9rem;
    margin-top: 0.75rem;
}

/* ==========================================
   LINKS SECTION
   ========================================== */

.login-links[b-h1d0lo7de0] {
    text-align: center;
    margin-top: 1.5rem;
}

    .login-links a[b-h1d0lo7de0] {
        color: #3498db;
        text-decoration: none;
        font-size: 0.9rem;
        transition: color 0.2s ease;
    }

        .login-links a:hover[b-h1d0lo7de0] {
            color: #2980b9;
            text-decoration: underline;
        }

/* ==========================================
   FOOTER SECTION
   ========================================== */

.login-footer[b-h1d0lo7de0] {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e9ecef;
    color: #6c757d;
    font-size: 0.875rem;
}

    .login-footer p[b-h1d0lo7de0] {
        margin: 0.25rem 0;
    }

.release-notes-toggle[b-h1d0lo7de0] {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid #3498db;
    color: #3498db;
    border-radius: 6px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .release-notes-toggle:hover[b-h1d0lo7de0] {
        background-color: #3498db;
        color: white;
    }

/* ==========================================
   HIDDEN RELEASE NOTES
   ========================================== */

.release-notes-hidden[b-h1d0lo7de0] {
    display: none;
    margin-top: 2rem;
    padding-top: 2rem;
    animation: fadeIn-b-h1d0lo7de0 0.3s ease-in;
}

@keyframes fadeIn-b-h1d0lo7de0 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Preserve release notes styles for potential future use */
.release-notes[b-h1d0lo7de0] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 750px;
    margin: 20px auto;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 30px;
    position: relative;
}

.release-notes-close[b-h1d0lo7de0] {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: 1px solid #e0e0e0;
    color: #6c757d;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .release-notes-close:hover[b-h1d0lo7de0] {
        background-color: #f8f9fa;
        border-color: #adb5bd;
        color: #495057;
    }

.release-notes .version-header[b-h1d0lo7de0] {
    color: #2c3e50;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 5px;
    border-bottom: 2px solid #f1f3f5;
    padding-bottom: 10px;
}

.release-notes .version-date[b-h1d0lo7de0] {
    color: #7f8c8d;
    font-size: 0.9rem;
    margin-bottom: 15px;
    display: block;
    font-weight: 500;
}

.release-notes .feature-list[b-h1d0lo7de0] {
    margin-left: 0;
    padding-left: 24px;
}

.release-notes .feature-item[b-h1d0lo7de0] {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    line-height: 1.6;
}

    .release-notes .feature-item[b-h1d0lo7de0]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 2px;
        width: 20px;
        height: 20px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

.feature-item.bug[b-h1d0lo7de0]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e74c3c'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
}

.feature-item.task[b-h1d0lo7de0]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233498db'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E");
}

.feature-item.improvement[b-h1d0lo7de0]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232ecc71'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}

.feature-item.update[b-h1d0lo7de0]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f39c12'%3E%3Cpath d='M21 10.12h-6.78l2.74-2.82c-2.73-2.7-7.15-2.8-9.88-.1-2.73 2.71-2.73 7.08 0 9.79 2.73 2.71 7.15 2.71 9.88 0C18.32 15.65 19 14.08 19 12.1h2c0 1.98-.88 4.55-2.64 6.29-3.51 3.48-9.21 3.48-12.72 0-3.5-3.47-3.53-9.11-.02-12.58 3.51-3.47 9.14-3.47 12.65 0L21 3v7.12z'/%3E%3C/svg%3E");
}

.release-notes .version-divider[b-h1d0lo7de0] {
    border: none;
    height: 1px;
    background-color: #ecf0f1;
    margin: 25px 0;
}

.release-notes .note[b-h1d0lo7de0] {
    background-color: #f8f9fa;
    border-left: 3px solid #3498db;
    padding: 12px 15px;
    margin: 15px 0;
    border-radius: 0 4px 4px 0;
    font-size: 0.95rem;
    color: #576574;
}

.release-notes .version-container:first-child[b-h1d0lo7de0] {
    animation: highlight-version-b-h1d0lo7de0 2s ease-out;
}

@keyframes highlight-version-b-h1d0lo7de0 {
    0% {
        background-color: rgba(52, 152, 219, 0.1);
    }

    100% {
        background-color: transparent;
    }
}

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */

@media (max-width: 768px) {
    .login-container[b-h1d0lo7de0] {
        padding: 2rem 0.5rem 1rem 0.5rem;
    }

    .login-panel[b-h1d0lo7de0] {
        padding: 2rem 1.5rem;
        max-width: 100%;
    }

    .login-header h2[b-h1d0lo7de0] {
        font-size: 1.5rem;
    }

    .login-logo img[b-h1d0lo7de0] {
        max-width: 70px;
    }

    .release-notes[b-h1d0lo7de0] {
        padding: 20px;
        border-radius: 0;
        margin: 0;
    }

        .release-notes .version-header[b-h1d0lo7de0] {
            font-size: 1.3rem;
        }

    .release-notes-close[b-h1d0lo7de0] {
        top: 10px;
        right: 10px;
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
}

@media (max-width: 400px) {
    .login-panel[b-h1d0lo7de0] {
        padding: 1.5rem 1rem;
    }

    .login-form .form-control[b-h1d0lo7de0] {
        font-size: 0.95rem;
        padding: 0.75rem 0.875rem;
    }

    .login-header h2[b-h1d0lo7de0] {
        font-size: 1.35rem;
    }

    .login-logo img[b-h1d0lo7de0] {
        max-width: 60px;
    }
}
/* _content/TemisV2_Auth/Components/Account/Pages/Register.razor.rz.scp.css */
/* Login/Register Container (matches existing) */
.login-container[b-duifp1fo5w] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 450px;
    margin: 40px auto;
    padding: 40px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

/* Header Styles (matches login) */
.login-header[b-duifp1fo5w] {
    color: #2c3e50;
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 5px;
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 2px solid #f1f3f5;
    margin-top: 0;
}

.login-subheader[b-duifp1fo5w] {
    color: #576574;
    text-align: center;
    margin-bottom: 25px;
    font-size: 1.1rem;
}

/* Form Elements (identical to login) */
.login-form .form-floating[b-duifp1fo5w] {
    margin-bottom: 1.8rem;
    position: relative;
}

.login-form .form-control[b-duifp1fo5w] {
    height: 52px;
    padding: 1rem 1.2rem;
    border: 1px solid #dfe6e9;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
}

    .login-form .form-control:focus[b-duifp1fo5w] {
        border-color: #3498db;
        box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.15);
        background-color: white;
    }

.login-form label[b-duifp1fo5w] {
    color: #576574;
    font-weight: 500;
    padding: 0.5rem 1.2rem;
    transition: all 0.3s ease;
}

/* Validation (matches login) */
.validation-message[b-duifp1fo5w] {
    color: #e74c3c;
    font-size: 0.9rem;
    margin-top: 5px;
}

.validation-summary[b-duifp1fo5w] {
    background-color: #f8d7da;
    border-left: 4px solid #e74c3c;
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 0 4px 4px 0;
}

    .validation-summary:empty[b-duifp1fo5w] {
        display: none;
    }

/* Button (identical to login) */
.login-form .btn-primary[b-duifp1fo5w] {
    width: 100%;
    padding: 14px;
    font-size: 1.1rem;
    font-weight: 500;
    background-color: #3498db;
    border: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
    color: white;
    cursor: pointer;
}

    .login-form .btn-primary:hover[b-duifp1fo5w] {
        background-color: #2980b9;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    }

    .login-form .btn-primary:active[b-duifp1fo5w] {
        transform: translateY(0);
    }

/* Password Strength Meter (new for register) */
.password-strength[b-duifp1fo5w] {
    height: 4px;
    background: #e9ecef;
    margin: 8px 0 20px;
    border-radius: 2px;
    overflow: hidden;
}

.password-strength-bar[b-duifp1fo5w] {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease, background 0.3s ease;
}

.password-strength.weak .password-strength-bar[b-duifp1fo5w] {
    width: 30%;
    background: #e74c3c;
}

.password-strength.medium .password-strength-bar[b-duifp1fo5w] {
    width: 60%;
    background: #f39c12;
}

.password-strength.strong .password-strength-bar[b-duifp1fo5w] {
    width: 100%;
    background: #2ecc71;
}

/* Responsive (matches login) */
@media (max-width: 768px) {
    .login-container[b-duifp1fo5w] {
        padding: 20px;
        margin: 20px auto;
    }

    .login-header[b-duifp1fo5w] {
        font-size: 1.5rem;
    }

    .login-form .form-control[b-duifp1fo5w] {
        height: 45px;
    }
}
/* _content/TemisV2_Auth/Components/Account/Pages/RegisterConfirmation.razor.rz.scp.css */
/* Login/Register Container (matches existing) */
.login-container[b-07re9s5yor] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 450px;
    margin: 40px auto;
    padding: 40px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

/* Header Styles (matches login) */
.login-header[b-07re9s5yor] {
    color: #2c3e50;
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 5px;
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 2px solid #f1f3f5;
    margin-top: 0;
}

.login-subheader[b-07re9s5yor] {
    color: #576574;
    text-align: center;
    margin-bottom: 25px;
    font-size: 1.1rem;
}

/* Form Elements (identical to login) */
.login-form .form-floating[b-07re9s5yor] {
    margin-bottom: 1.8rem;
    position: relative;
}

.login-form .form-control[b-07re9s5yor] {
    height: 52px;
    padding: 1rem 1.2rem;
    border: 1px solid #dfe6e9;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
}

    .login-form .form-control:focus[b-07re9s5yor] {
        border-color: #3498db;
        box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.15);
        background-color: white;
    }

.login-form label[b-07re9s5yor] {
    color: #576574;
    font-weight: 500;
    padding: 0.5rem 1.2rem;
    transition: all 0.3s ease;
}

/* Validation (matches login) */
.validation-message[b-07re9s5yor] {
    color: #e74c3c;
    font-size: 0.9rem;
    margin-top: 5px;
}

.validation-summary[b-07re9s5yor] {
    background-color: #f8d7da;
    border-left: 4px solid #e74c3c;
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 0 4px 4px 0;
}

    .validation-summary:empty[b-07re9s5yor] {
        display: none;
    }

/* Button (identical to login) */
.login-form .btn-primary[b-07re9s5yor] {
    width: 100%;
    padding: 14px;
    font-size: 1.1rem;
    font-weight: 500;
    background-color: #3498db;
    border: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
    color: white;
    cursor: pointer;
}

    .login-form .btn-primary:hover[b-07re9s5yor] {
        background-color: #2980b9;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    }

    .login-form .btn-primary:active[b-07re9s5yor] {
        transform: translateY(0);
    }

/* Password Strength Meter (new for register) */
.password-strength[b-07re9s5yor] {
    height: 4px;
    background: #e9ecef;
    margin: 8px 0 20px;
    border-radius: 2px;
    overflow: hidden;
}

.password-strength-bar[b-07re9s5yor] {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease, background 0.3s ease;
}

.password-strength.weak .password-strength-bar[b-07re9s5yor] {
    width: 30%;
    background: #e74c3c;
}

.password-strength.medium .password-strength-bar[b-07re9s5yor] {
    width: 60%;
    background: #f39c12;
}

.password-strength.strong .password-strength-bar[b-07re9s5yor] {
    width: 100%;
    background: #2ecc71;
}

/* Responsive (matches login) */
@media (max-width: 768px) {
    .login-container[b-07re9s5yor] {
        padding: 20px;
        margin: 20px auto;
    }

    .login-header[b-07re9s5yor] {
        font-size: 1.5rem;
    }

    .login-form .form-control[b-07re9s5yor] {
        height: 45px;
    }
}
/* _content/TemisV2_Auth/Components/Account/Pages/ResetPassword.razor.rz.scp.css */
/* Login/Register Container (matches existing) */
.login-container[b-igtw68m2r3] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 450px;
    margin: 40px auto;
    padding: 40px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

/* Header Styles (matches login) */
.login-header[b-igtw68m2r3] {
    color: #2c3e50;
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 5px;
    text-align: center;
    padding-bottom: 15px;
    border-bottom: 2px solid #f1f3f5;
    margin-top: 0;
}

.login-subheader[b-igtw68m2r3] {
    color: #576574;
    text-align: center;
    margin-bottom: 25px;
    font-size: 1.1rem;
}

/* Form Elements (identical to login) */
.login-form .form-floating[b-igtw68m2r3] {
    margin-bottom: 1.8rem;
    position: relative;
}

.login-form .form-control[b-igtw68m2r3] {
    height: 52px;
    padding: 1rem 1.2rem;
    border: 1px solid #dfe6e9;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background-color: #f8f9fa;
}

    .login-form .form-control:focus[b-igtw68m2r3] {
        border-color: #3498db;
        box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.15);
        background-color: white;
    }

.login-form label[b-igtw68m2r3] {
    color: #576574;
    font-weight: 500;
    padding: 0.5rem 1.2rem;
    transition: all 0.3s ease;
}

/* Validation (matches login) */
.validation-message[b-igtw68m2r3] {
    color: #e74c3c;
    font-size: 0.9rem;
    margin-top: 5px;
}

.validation-summary[b-igtw68m2r3] {
    background-color: #f8d7da;
    border-left: 4px solid #e74c3c;
    padding: 10px 15px;
    margin-bottom: 20px;
    border-radius: 0 4px 4px 0;
}

    .validation-summary:empty[b-igtw68m2r3] {
        display: none;
    }

/* Button (identical to login) */
.login-form .btn-primary[b-igtw68m2r3] {
    width: 100%;
    padding: 14px;
    font-size: 1.1rem;
    font-weight: 500;
    background-color: #3498db;
    border: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
    color: white;
    cursor: pointer;
}

    .login-form .btn-primary:hover[b-igtw68m2r3] {
        background-color: #2980b9;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    }

    .login-form .btn-primary:active[b-igtw68m2r3] {
        transform: translateY(0);
    }

/* Password Strength Meter (new for register) */
.password-strength[b-igtw68m2r3] {
    height: 4px;
    background: #e9ecef;
    margin: 8px 0 20px;
    border-radius: 2px;
    overflow: hidden;
}

.password-strength-bar[b-igtw68m2r3] {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease, background 0.3s ease;
}

.password-strength.weak .password-strength-bar[b-igtw68m2r3] {
    width: 30%;
    background: #e74c3c;
}

.password-strength.medium .password-strength-bar[b-igtw68m2r3] {
    width: 60%;
    background: #f39c12;
}

.password-strength.strong .password-strength-bar[b-igtw68m2r3] {
    width: 100%;
    background: #2ecc71;
}

/* Responsive (matches login) */
@media (max-width: 768px) {
    .login-container[b-igtw68m2r3] {
        padding: 20px;
        margin: 20px auto;
    }

    .login-header[b-igtw68m2r3] {
        font-size: 1.5rem;
    }

    .login-form .form-control[b-igtw68m2r3] {
        height: 45px;
    }
}
/* _content/TemisV2_Auth/Components/Layout/HeaderMenu.razor.rz.scp.css */
#header[b-vvu4pwlps1] {
    width: 100%;
    /*box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.16);*/
    transition: transform 0.1s ease-out;
    height: 100%;
    max-height: 100%;
    padding: 2rem 1rem;
    box-shadow:none;
}

[b-vvu4pwlps1] .header-header {
    padding: 2rem 1rem;
    width: 100%;
}

.logo[b-vvu4pwlps1] {
    text-align: center;
    width:208px;
    height:48px;
}

[b-vvu4pwlps1] .menu-button-container {
    display: none;
    align-self: center;
}

.menu-button[b-vvu4pwlps1] {
    padding: 0.375rem;
    width: 1.875rem;
    height: 1.875rem;
    background-image: url("images/menu.svg");
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

[b-vvu4pwlps1] .menu {
    background-color: inherit;
}

    [b-vvu4pwlps1] .menu .dxbl-menu-item-list {
        gap: 0.5rem;
    }

[b-vvu4pwlps1] .menu-item {
    color: var(--bs-white);
}

[b-vvu4pwlps1] .icon {
    width: 1rem;
    height: 1rem;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 0.5rem;
}

[b-vvu4pwlps1] .home-icon {
    background-image: url("images/home.svg");
}

[b-vvu4pwlps1] .weather-icon {
    background-image: url("images/weather.svg");
}

[b-vvu4pwlps1] .counter-icon {
    background-image: url("images/counter.svg");
}

[b-vvu4pwlps1] .school-icon {
    background-image: url("images/doc.svg");
}

[b-vvu4pwlps1] .docs-icon {
    mask-image: url("images/doc.svg");
    -webkit-mask-image: url("images/doc.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    /*background-color: var(--dxbl-btn-color);*/
}

[b-vvu4pwlps1] .demos-icon {
    mask-image: url("images/demos.svg");
    -webkit-mask-image: url("images/demos.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    /*background-color: var(--dxbl-btn-color);
    */
}

[b-vvu4pwlps1] .footer-button:hover .demos-icon {
    background-color: var(--dxbl-btn-hover-color);
}

[b-vvu4pwlps1] .footer-button:hover .docs-icon {
    background-color: var(--dxbl-btn-hover-color);
}

[b-vvu4pwlps1] .footer {
    text-align: center;
    gap: 0.5rem;
    padding-bottom: 1.5rem;
}

#header.expanded[b-vvu4pwlps1]  .layout-item {
    display: block;
}

#header.expanded[b-vvu4pwlps1]  .footer {
    display: block;
}

@media (max-width: 768px) {
    #header[b-vvu4pwlps1] {
        min-width: inherit;
        max-width: inherit;
    }

        #header.expanded[b-vvu4pwlps1] {
            position: fixed;
            width: 100%;
            z-index: 3;
        }

            #header.expanded[b-vvu4pwlps1]  .header-header {
                border-bottom: 1px solid var(--bs-white);
            }

            #header.expanded .menu-button[b-vvu4pwlps1] {
                background-image: url("images/close.svg");
            }

        #header:not(.expanded)[b-vvu4pwlps1]  .dxbl-gridlayout-root {
            gap: unset !important;
        }

    .logo[b-vvu4pwlps1] {
        text-align: inherit;
    }

    [b-vvu4pwlps1] .menu-button-container {
        display: block;
    }

    [b-vvu4pwlps1] .layout-item {
        display: none;
    }

    [b-vvu4pwlps1] .footer {
        display: none;
    }
}
/* _content/TemisV2_Auth/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-iem09lmttg] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-iem09lmttg] {
    flex: 1;
}

.sidebar[b-iem09lmttg] {
    background-image: linear-gradient(180deg, rgba(0,121,187,1) 0%, rgba(64,131,168,1) 35%, rgba(0,121,187,1) 100%);
}

.top-row[b-iem09lmttg] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;

    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-iem09lmttg]  a, .top-row[b-iem09lmttg]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-iem09lmttg]  a:hover, .top-row[b-iem09lmttg]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-iem09lmttg]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.99px) {
    
}

@media (min-width: 641px) {
    .page[b-iem09lmttg] {
        flex-direction: row;
        /* Add these properties */
        position: relative; /* Required for sticky to work */
        min-height: 100vh; /* Ensure container is tall enough */
        overflow: visible; /* Allow sticky element to escape */
    }

    .sidebar[b-iem09lmttg] {
        width: 250px;
        height: 100vh; /* Changed from 180vh to viewport height */
        position: sticky;
        top: 0;
        align-self: flex-start; /* Align to top of flex container */
        overflow-y: auto; /*Add scroll if content is taller than viewport */

        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
    }

        /* Hide scrollbar for Chrome/Safari/Opera */
        .sidebar[b-iem09lmttg]::-webkit-scrollbar {
            display: none;
        }

    /* Keep your existing top-row styles */
    .top-row[b-iem09lmttg] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

        .top-row.auth[b-iem09lmttg]  a:first-child {
            flex: 1;
            text-align: right;
            width: 0;
        }

    .top-row[b-iem09lmttg], article[b-iem09lmttg] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}


#blazor-error-ui[b-iem09lmttg] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-iem09lmttg] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


.bi[b-iem09lmttg] {
    display: inline-block;
    /*position: relative;*/
    width: 1.65rem;
    height: 1.65rem;
    margin-right: 0.75rem;
    top: 0px;
    background-size: cover;
}

.bi-houses-nav-menu[b-iem09lmttg] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-houses' viewBox='0 0 16 16'%3E%3Cpath d='M5.793 1a1 1 0 0 1 1.414 0l.647.646a.5.5 0 1 1-.708.708L6.5 1.707 2 6.207V12.5a.5.5 0 0 0 .5.5.5.5 0 0 1 0 1A1.5 1.5 0 0 1 1 12.5V7.207l-.146.147a.5.5 0 0 1-.708-.708zm3 1a1 1 0 0 1 1.414 0L12 3.793V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v3.293l1.854 1.853a.5.5 0 0 1-.708.708L15 8.207V13.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 4 13.5V8.207l-.146.147a.5.5 0 1 1-.708-.708zm.707.707L5 7.207V13.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V7.207z'/%3E%3C/svg%3E");
}

/* _content/TemisV2_Auth/Components/Layout/NavMenu.razor.rz.scp.css */
.dxbl-treeview-item-selection-bg[b-zn6mxljoqx] {
    background-color: orange;
}

.navbar-toggler:checked[b-zn6mxljoqx] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-zn6mxljoqx] {
    padding-top: 10px;
    height: 3.5rem;
    /*background-color: rgba(0,0,0,0.4);*/
}

.top-row logo[b-zn6mxljoqx] {
    padding-top:10px;
    height: 3.5rem;
    /*background-color: rgba(0,0,0,0.4);*/
}

.navbar-brand[b-zn6mxljoqx] {
    font-size: 1.1rem;
}

.bi[b-zn6mxljoqx] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.flex-column[b-zn6mxljoqx]{
    margin-top:20px;
}

.top-row[b-zn6mxljoqx] {
    height: 4.5em;
}

.bi-house-door-fill-nav-menu[b-zn6mxljoqx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-zn6mxljoqx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-zn6mxljoqx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-zn6mxljoqx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-zn6mxljoqx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-zn6mxljoqx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-zn6mxljoqx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-zn6mxljoqx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.bi-backpack3-nav-menu[b-zn6mxljoqx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-houses-nav-menu[b-zn6mxljoqx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-houses' viewBox='0 0 16 16'%3E%3Cpath d='M5.793 1a1 1 0 0 1 1.414 0l.647.646a.5.5 0 1 1-.708.708L6.5 1.707 2 6.207V12.5a.5.5 0 0 0 .5.5.5.5 0 0 1 0 1A1.5 1.5 0 0 1 1 12.5V7.207l-.146.147a.5.5 0 0 1-.708-.708zm3 1a1 1 0 0 1 1.414 0L12 3.793V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v3.293l1.854 1.853a.5.5 0 0 1-.708.708L15 8.207V13.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 4 13.5V8.207l-.146.147a.5.5 0 1 1-.708-.708zm.707.707L5 7.207V13.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V7.207z'/%3E%3C/svg%3E");
}

.bi-exam-nav-menu[b-zn6mxljoqx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-file-text' viewBox='0 0 16 16'%3E%3Cpath d='M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1'/%3E%3C/svg%3E");
}

.bi-staff-nav-menu[b-zn6mxljoqx] {
    background-image: url("data:image/svg+xml,%3Csvg fill='white' height='16' width='16' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 511.999 511.999' xml:space='preserve'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E %3Cg%3E %3Cg%3E %3Cpath d='M302.195,11.833H13.049C5.842,11.833,0,17.675,0,24.882v214.289c0,7.207,5.842,13.049,13.049,13.049h283.839 l-34.352-21.329c-2.247-1.396-4.282-3.002-6.109-4.768H26.097V37.93h263.049v126.703c4.01,0.847,7.943,2.39,11.625,4.677 l14.473,8.986V24.882C315.244,17.675,309.402,11.833,302.195,11.833z'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3Cg%3E %3Cg%3E %3Cpath d='M216.857,134.337c-4.352-3.43-10.665-2.685-14.097,1.668c-3.432,4.353-2.686,10.665,1.668,14.097l44.279,34.914 c0.63-1.371,1.34-2.719,2.156-4.034c2.883-4.643,6.649-8.401,10.94-11.206L216.857,134.337z'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3Cg%3E %3Cg%3E %3Ccircle cx='419.71' cy='81.405' r='37.557'%3E%3C/circle%3E %3C/g%3E %3C/g%3E %3Cg%3E %3Cg%3E %3Cpath d='M511.33,173.609c-0.118-23.528-19.355-42.67-42.884-42.67H450.26c-17.831,46.242-11.329,29.381-22.507,58.37l4.709-23.724 c0.346-1.744,0.067-3.555-0.79-5.113l-7.381-13.424l6.551-11.914c0.454-0.826,0.438-1.829-0.041-2.64 c-0.479-0.811-1.352-1.308-2.293-1.308h-17.96c-0.942,0-1.813,0.497-2.293,1.308s-0.495,1.815-0.041,2.64l6.537,11.889 l-7.367,13.4c-0.873,1.589-1.147,3.438-0.77,5.211l5.438,23.675c-3.119-8.087-21.08-52.728-23.255-58.37h-17.83 c-23.529,0-42.766,19.141-42.884,42.67c-0.098,19.565-0.016,3.179-0.17,33.884l-36.702-22.787 c-8.501-5.28-19.674-2.667-24.953,5.836c-5.279,8.503-2.666,19.675,5.836,24.954l64.219,39.873 c12.028,7.47,27.609-1.167,27.68-15.304c0.036-7.091,0.292-57.809,0.334-66.275c0.013-2.092,1.714-3.776,3.805-3.769 c2.089,0.007,3.779,1.703,3.779,3.794c-0.018,87.323-0.394,111.735-0.394,304.606c0,12.01,9.736,21.746,21.746,21.746 s21.746-9.736,21.746-21.746V304.604h9.388v173.817c0,12.01,9.736,21.746,21.746,21.746s21.746-9.736,21.746-21.746l0.008-304.612 c0-1.981,1.604-3.589,3.586-3.595c1.981-0.006,3.595,1.594,3.605,3.577l0.669,133.132c0.05,9.977,8.154,18.03,18.119,18.03 c0.031,0,0.062,0,0.094,0c10.007-0.05,18.081-8.205,18.03-18.212L511.33,173.609z'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E%3C/svg%3E");
}


.bi-temis-icon-nav-menu[b-zn6mxljoqx] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.menu-badge-new[b-zn6mxljoqx] {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 999px;
    background-color: #ff4081; /* pink-ish, tweak to taste */
    color: #ffffff;
    line-height: 1.2;
}

.nav-item[b-zn6mxljoqx] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-zn6mxljoqx] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-zn6mxljoqx] {
        padding-bottom: 1rem;
    }

    .nav-item[b-zn6mxljoqx]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
        padding-left:1em;
    }

.nav-item[b-zn6mxljoqx]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-zn6mxljoqx]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-zn6mxljoqx] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-zn6mxljoqx] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-zn6mxljoqx] {
        display: none;
    }

    .nav-scrollable[b-zn6mxljoqx] {
        /* Never collapse the sidebar for wide screens */
        display: contents;
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        /*height: 2000px;*/
        overflow-y: auto;
    }

    .menu-close-btn[b-zn6mxljoqx] {
        position: absolute;
        top: 30px;
        right: 26px;
        cursor: pointer;
        font-size: 1.5rem;
        display: none; /* Hidden by default */
        color: white;
        z-index: 1000;
    }
}

@media (max-width: 640px) {

    .top-row[b-zn6mxljoqx] {
        float: left;
        width: 85%;
        margin-bottom:5px;
    }

    .top-row logo[b-zn6mxljoqx] {
        padding-top: 10px;

        height: 3.5rem;

        /*background-color: rgba(0,0,0,0.4);*/
    }

    /* Container for the navbar */
    .navbar-container[b-zn6mxljoqx] {
        float: right;
        width: 15%;
        display: flex;
        justify-content: flex-end; /* Align to the right */
        align-items: center;
        position: relative;
        vertical-align:middle;
        margin-top:21px;
    }

    /* Hide the checkbox */
    .navbar-toggler[b-zn6mxljoqx] {
        display: none;
    }

    /* Ensure the hamburger is visible and clickable */
    .hamburger[b-zn6mxljoqx] {
        display: block;
        position: relative;
        z-index: 1000; /* Very high to ensure it's on top */
        width: 30px;
        height: 21px;
        cursor: pointer;
        margin-left: auto; /* Push to right side */
        margin-right:21px;
    }

        /* Style the bars */
        .hamburger .bar[b-zn6mxljoqx] {
            display: block;
            position: absolute;
            width: 100%;
            height: 3px;
            background: white; /* Black bars - change color if needed */
            border-radius: 3px;
            transition: all 0.3s ease;
        }

            /* Position each bar */
            .hamburger .bar:nth-child(1)[b-zn6mxljoqx] {
                top: 0;
            }

            .hamburger .bar:nth-child(2)[b-zn6mxljoqx] {
                top: 50%;
                transform: translateY(-50%);
            }

            .hamburger .bar:nth-child(3)[b-zn6mxljoqx] {
                bottom: 0;
            }

    /* Menu styling */
    .nav-scrollable[b-zn6mxljoqx] {
        position: fixed;
        top: 0;
        right: -100%; /* Start off-screen to the right */
        width: 250px;
        height: 100vh;
        background: #307cb9;
        box-shadow: -2px 0 5px rgba(0,0,0,0.1);
        transition: right 0.3s ease;
        z-index: 99;
        padding-top: 60px;
    }

    .navbar-toggler:checked ~ .nav-scrollable[b-zn6mxljoqx] {
        right: 0; /* Slide in from right when checked */
    }

    /* Add some spacing for the menu items */
    .flex-column[b-zn6mxljoqx] {
        padding: 20px;
    }

    .menu-close-btn[b-zn6mxljoqx] {
        position: absolute;
        top: 30px;
        right: 26px;
        cursor: pointer;
        font-size: 1.5rem;
        display: none; /* Hidden by default */
        color:white;
        z-index:1000;
    }

    .navbar-toggler:checked ~ .menu-close-btn[b-zn6mxljoqx] {
        display: block !important;
        ; /* Show when menu is open */
    }



}

/* _content/TemisV2_Auth/Components/Pages/Attendance.razor.rz.scp.css */
body[b-t5qlpbbzc6] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #F1FAEE;
    margin: 0;
    padding: 20px;
    color: #1A1A2E;
}

/*#region Dashboard Styles */

/* Dashboard Container */
.dashboard-container[b-t5qlpbbzc6] {
    display: grid;
    grid-template-columns: 1fr 1fr 300px;
    gap: 20px;
    padding: 20px;
}

/* Dashboard Cards - Unified Styling */
.dashboard-card[b-t5qlpbbzc6] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    padding: 20px;
    position: relative;
    overflow: hidden;
    border-top: 6px solid #3A86FF;
}

    .dashboard-card:nth-child(2)[b-t5qlpbbzc6] {
        border-top-color: #06D6A0;
    }

/* Double Width Panel */
.dashboard-double-width[b-t5qlpbbzc6] {
    grid-column: span 2;
    padding: 20px; /* Remove padding for table to fill space */
}

/* School Info Styles */
.school-name[b-t5qlpbbzc6] {
    color: #212529;
    font-size: 24px;
    font-weight: 200;
    margin: 0 0 15px 0;
}

.stat-row[b-t5qlpbbzc6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.stat-label[b-t5qlpbbzc6] {
    font-weight: 600;
    color: #1A1A2E;
    font-size: 15px;
}

.stat-value[b-t5qlpbbzc6] {
    font-weight: 700;
    padding: 0 15px;
}

.highlight-value[b-t5qlpbbzc6] {
    color: #3A86FF;
    font-weight: 500;
    font-size: 18px;
}

.gender-stats[b-t5qlpbbzc6] {
    font-size: 13px;
    color: #6C757D;
    margin-top: 4px;
    font-weight: 500;
}

/* Table Styles */
.table-container[b-t5qlpbbzc6] {
    padding: 0;
    overflow-x: auto;
}

.section-header[b-t5qlpbbzc6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 1.25rem; /* similar to DxFormLayoutGroup font size */
    color: #666;
    margin-bottom: 12px;
    margin-left: 10px;
    margin-top: 10px;
}

    .section-header .header-icon[b-t5qlpbbzc6] {
        margin-bottom: 9px;
    }

.education-table[b-t5qlpbbzc6] {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.4rem;
}

    .education-table th[b-t5qlpbbzc6] {
        background-color: #f8f9fa;
        color: #2c3e50;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 1.0rem;
        letter-spacing: 0.5px;
        padding: 12px 15px;
        text-align: left;
        border-bottom: 2px solid #e9ecef;
    }

    .education-table td[b-t5qlpbbzc6] {
        padding: 12px 15px;
        border-bottom: 1px solid #f1f3f5;
        vertical-align: middle;
    }

    .education-table tr:last-child td[b-t5qlpbbzc6] {
        border-bottom: none;
    }

    .education-table tr:hover[b-t5qlpbbzc6] {
        background-color: #f8fafc;
    }

/* Column Specific Styles */
.island-col[b-t5qlpbbzc6] {
    width: 150px;
}

.gender-col[b-t5qlpbbzc6] {
    width: 180px;
}

.numeric-col[b-t5qlpbbzc6] {
    text-align: center !important;
}

.numeric[b-t5qlpbbzc6] {
    text-align: center;
    font-weight: 500;
    color: #3A86FF;
}

.gender[b-t5qlpbbzc6] {
    text-align: center;
    font-size: 0.9rem;
}

.ratio[b-t5qlpbbzc6] {
    color: #06D6A0;
}

.internet[b-t5qlpbbzc6] {
    color: #8338EC;
}

/* Actions Panel */
.dashboard-actions[b-t5qlpbbzc6] {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.actions-header[b-t5qlpbbzc6] {
    color: #2c3e50;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f1f3f5;
}

.action-button[b-t5qlpbbzc6] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

    .action-button i[b-t5qlpbbzc6] {
        font-size: 1.2rem;
    }

    .action-button:hover[b-t5qlpbbzc6] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

/* Button Colors */
.student-button[b-t5qlpbbzc6] {
    background-color: #3498db;
}

.staff-button[b-t5qlpbbzc6] {
    background-color: #2ecc71;
}

.sgca-button[b-t5qlpbbzc6] {
    background-color: #9b59b6;
}

.tgca-button[b-t5qlpbbzc6] {
    background-color: #f39c12;
}

.export-excel-button[b-t5qlpbbzc6] {
    background-color: #1d6f42;
    color: white;
    border: none;
    padding: 13px 13px;
    margin-bottom: 10px;
    width: 100%;
    text-align: left;
}

    .export-excel-button i[b-t5qlpbbzc6] {
        margin-right: 5px;
        margin-left: 11px;
    }


.latest-feature-box[b-t5qlpbbzc6] {
    margin-top: 2rem;
    padding: 1rem 1.5rem;
    background: #e0f7fa; /* light cyan background */
    border-left: 5px solid #00acc1; /* bright cyan accent */
    display: flex;
    align-items: center;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.actions-divider[b-t5qlpbbzc6] {
    border: none;
    border-top: 1px solid #ccc;
    margin: 0.5rem 0;
}

.latest-feature-box .feature-icon[b-t5qlpbbzc6] {
    font-size: 1.8rem;
    color: #00796b; /* changed to a nice teal for the arrow */
    margin-right: 1rem;
}


.latest-feature-box .feature-content h4[b-t5qlpbbzc6] {
    margin: 0 0 0.3rem 0;
    font-weight: 600;
    color: #007c91;
}

.latest-feature-box .feature-content p[b-t5qlpbbzc6] {
    margin: 0;
    color: #004d57;
    font-size: 0.9rem;
    line-height: 1.3;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .dashboard-container[b-t5qlpbbzc6] {
        grid-template-columns: 1fr;
    }

    .dashboard-double-width[b-t5qlpbbzc6] {
        grid-column: span 1;
    }

    .dashboard-actions[b-t5qlpbbzc6] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .action-button[b-t5qlpbbzc6] {
        flex: 1 1 200px;
    }
}

@media (max-width: 768px) {
    .gender-col[b-t5qlpbbzc6] {
        display: none;
    }

    .education-table th[b-t5qlpbbzc6],
    .education-table td[b-t5qlpbbzc6] {
        padding: 10px 8px;
    }

    .action-button[b-t5qlpbbzc6] {
        flex: 1 1 100%;
    }
}

@media (max-width: 1068px) {
    .hide-mobile[b-t5qlpbbzc6] {
        display: none;
    }
}

/* Table Header with Export Button */
.table-header[b-t5qlpbbzc6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px 15px 15px;
}

.export-btn[b-t5qlpbbzc6] {
    background-color: #1d6f42;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

    .export-btn:hover[b-t5qlpbbzc6] {
        background-color: #165a36;
        transform: translateY(-1px);
    }

    .export-btn i[b-t5qlpbbzc6] {
        font-size: 1rem;
    }

/* Uniform Table Columns */
.education-table[b-t5qlpbbzc6] {
    table-layout: fixed;
}

    .education-table th[b-t5qlpbbzc6],
    .education-table td[b-t5qlpbbzc6] {
        width: calc(100% / 7); /* 7 columns */
        text-align: center;
        padding: 12px 8px;
    }

        .education-table th:first-child[b-t5qlpbbzc6],
        .education-table td:first-child[b-t5qlpbbzc6] {
            text-align: left;
            padding-left: 15px;
        }

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .education-table th[b-t5qlpbbzc6],
    .education-table td[b-t5qlpbbzc6] {
        width: auto;
        table-layout: auto;
        font-size: 0.85rem;
    }
}

/*#region Welcome Message Styles */

.welcome-container[b-t5qlpbbzc6] {
    background-color: #f8f9fa;
    border-left: 3px solid #2c7be5;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 0.5rem;
}

.welcome-grid[b-t5qlpbbzc6] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: flex-start;
}

.welcome-content[b-t5qlpbbzc6] {
    grid-column: 1;
}

.dropdown-column[b-t5qlpbbzc6] {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.welcome-title[b-t5qlpbbzc6] {
    color: #2c7be5;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 600;
}

.welcome-text[b-t5qlpbbzc6] {
    color: #4a4a4a;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.dropdown-header[b-t5qlpbbzc6] {
    font-weight: 600;
    color: #495057;
    font-size: 0.95rem;
}

.dropdown-footer[b-t5qlpbbzc6] {
    font-size: 0.85rem;
    color: #6c757d;
    font-style: italic;
    text-align: center;
}

.dropdown-container[b-t5qlpbbzc6] {
    width: 100%;
}

.dxbs-combo-box[b-t5qlpbbzc6] {
    width: 100% !important;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px 12px;
    background-color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

@media (max-width: 1068px) {
    .welcome-grid[b-t5qlpbbzc6] {
        display: block;
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {

    .dropdown-column[b-t5qlpbbzc6] {
        grid-column: 1;
    }

    .dropdown-header[b-t5qlpbbzc6] {
        text-align: center;
    }
}

/*#endregion */


/*#region Attendance Table CSS */

.attendance-note[b-t5qlpbbzc6] {
    margin-top: 20px;
    font-size: 14px;
    color: #7f8c8d;
    text-align: center;
    font-style: italic;
}

.attendance-table-container[b-t5qlpbbzc6] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 600px;
    margin: 20px auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 0px;
    overflow: hidden;
    height: 600px;
}

.attendance-table[b-t5qlpbbzc6] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

    .attendance-table th[b-t5qlpbbzc6] {
        background-color: #f2f2f2;
        color: black;
        padding: 12px 15px;
        font-weight: 600;
    }

    .attendance-table td[b-t5qlpbbzc6] {
        padding: 12px 15px;
        border-bottom: 1px solid #e0e0e0;
    }

    .attendance-table tr:last-child td[b-t5qlpbbzc6] {
        border-bottom: none;
    }

/* Status coloring */
.present[b-t5qlpbbzc6] {
    background-color: #ffffff; /* Pale green */
}

.absent[b-t5qlpbbzc6] {
    background-color: #ffebee; /* Pale red */
}

.halfday[b-t5qlpbbzc6] {
    background-color: #ffffff; /* Pale amber */
}

.status-badge[b-t5qlpbbzc6] {
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 12px;
    display: inline-block;
}

.present .status-badge[b-t5qlpbbzc6] {
    background-color: #2ecc71;
    color: white;
}

.absent .status-badge[b-t5qlpbbzc6] {
    background-color: #e74c3c;
    color: white;
}

.halfday .status-badge[b-t5qlpbbzc6] {
    background-color: #f39c12;
    color: white;
}

.count-footer[b-t5qlpbbzc6] {
    text-align: right;
    font-weight: bold;
    background-color: #f8f9fa;
    padding: 10px 15px;
}

/* Hover effects */

.pagination-controls[b-t5qlpbbzc6] {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    gap: 5px;
}

    .pagination-controls button[b-t5qlpbbzc6] {
        padding: 8px 12px;
        border: 1px solid #ddd;
        background: white;
        cursor: pointer;
        border-radius: 4px;
        min-width: 40px;
    }

        .pagination-controls button:hover:not(:disabled)[b-t5qlpbbzc6] {
            background: #f0f0f0;
        }

        .pagination-controls button:disabled[b-t5qlpbbzc6] {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .pagination-controls button.active[b-t5qlpbbzc6] {
            background: #2c3e50;
            color: white;
            border-color: #2c3e50;
        }

.count-footer[b-t5qlpbbzc6] {
    text-align: center;
    padding: 10px;
    color: #666;
}

/*#endregion */


/*#region Attendance Infographic CSS */

.metrics-container[b-t5qlpbbzc6] {
    display: flex;
    margin-left: 10px;
    justify-content: left;
    gap: 10px;
    max-width: 600px;
    width: 356px;
}

.metric-box[b-t5qlpbbzc6] {
    background: white;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    padding: 10px 15px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    max-width: 250px;
    width: 250px;
}

.percentage[b-t5qlpbbzc6] {
    font-size: 48px;
    font-weight: normal;
    color: darkgreen;
    line-height: 1.2;
    margin-bottom: 8px;
}

.label[b-t5qlpbbzc6] {
    font-size: 22px;
    color: #555;
    text-transform: capitalize;
    letter-spacing: 0px;
}

.attendance-infographic[b-t5qlpbbzc6] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 16px;
    padding: 25px;
    max-width: 500px;
    margin: 20px auto;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-left: 0px solid darkgreen;
}

.attendance-header[b-t5qlpbbzc6] {
    color: #2c3e50;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

/*    .attendance-header:before {
        content: "📈";
        margin-right: 10px;
        font-size: 28px;
    }*/

.metric-grid[b-t5qlpbbzc6] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

.rate-grid[b-t5qlpbbzc6] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.metric-item[b-t5qlpbbzc6] {
    background: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.rate-item[b-t5qlpbbzc6] {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-top: 4px solid;
    text-align: center;
}

.metric-label[b-t5qlpbbzc6] {
    font-size: 14px;
    color: #7f8c8d;
    margin-bottom: 5px;
}

.metric-value[b-t5qlpbbzc6] {
    font-size: 28px;
    font-weight: 700;
}

.rate-label[b-t5qlpbbzc6] {
    font-size: 16px;
    color: #2c3e50;
    margin-bottom: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rate-value[b-t5qlpbbzc6] {
    font-size: 36px;
    font-weight: 800;
}

.total-days .metric-value[b-t5qlpbbzc6] {
    color: #3498db;
}

.present-days .metric-value[b-t5qlpbbzc6] {
    color: #2ecc71;
}

.absent-days .metric-value[b-t5qlpbbzc6] {
    color: #e74c3c;
}

.late-days .metric-value[b-t5qlpbbzc6] {
    color: #f39c12;
}

.attendance-rate[b-t5qlpbbzc6] {
    border-top-color: #3498db;
}

    .attendance-rate .rate-value[b-t5qlpbbzc6] {
        color: #3498db;
    }

.punctuality-rate[b-t5qlpbbzc6] {
    border-top-color: #9b59b6;
}

    .punctuality-rate .rate-value[b-t5qlpbbzc6] {
        color: #9b59b6;
    }


.export-container[b-t5qlpbbzc6] {
    position: absolute;
    bottom: 20px;
    right: 20px;
    text-align: right;
}

.export-excel-btn[b-t5qlpbbzc6] {
    background-color: #217346; /* Excel green */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .export-excel-btn:hover[b-t5qlpbbzc6] {
        background-color: #1a5f38; /* Darker green on hover */
    }

    .export-excel-btn:active[b-t5qlpbbzc6] {
        transform: translateY(1px);
    }

/*#endregion */

/*#region Mark Attendance CSS */

/* Attendance Marking Container */
.attendance-marking[b-t5qlpbbzc6] {
    width:100%;
    gap: 1.5rem;
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Student Info Section */
.student-info[b-t5qlpbbzc6] {
    text-align: center;
}

.student-name[b-t5qlpbbzc6] {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.instruction[b-t5qlpbbzc6] {
    font-size: 1rem;
    color: #666;
}

/* Compact Attendance Buttons */
.compact-attendance-buttons[b-t5qlpbbzc6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.compact-button[b-t5qlpbbzc6] {
    display: flex;
    align-items: center;
    text-align: left;
    padding: 0.6rem 1rem;
    width: 100%;
    border-radius: 6px;
    border: 1px solid transparent;
    background-color: rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
    min-height: auto;
}

    .compact-button i[b-t5qlpbbzc6] {
        font-size: 1.25rem;
        margin-right: 0.8rem;
        width: 24px;
        text-align: center;
    }

.button-text[b-t5qlpbbzc6] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.button-title[b-t5qlpbbzc6] {
    font-weight: 600;
    font-size: 0.95rem;
    color: inherit;
}

.button-subtitle[b-t5qlpbbzc6] {
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.7);
    font-weight: normal;
}

/* Button Colors */
.present-button[b-t5qlpbbzc6] {
    color: #70ad47;
    border-color: #70ad47;
}

.late-button[b-t5qlpbbzc6] {
    color: #ffc000;
    border-color: #ffc000;
}

.absent-button[b-t5qlpbbzc6] {
    color: #ff0000;
    border-color: #ff0000;
}

/* Hover States */
.compact-button:hover[b-t5qlpbbzc6] {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.present-button:hover[b-t5qlpbbzc6] {
    background-color: rgba(112, 173, 71, 0.1);
}

.late-button:hover[b-t5qlpbbzc6] {
    background-color: rgba(255, 192, 0, 0.1);
}

.absent-button:hover[b-t5qlpbbzc6] {
    background-color: rgba(255, 0, 0, 0.1);
}

/* Active State */
.compact-button.active[b-t5qlpbbzc6] {
    color: white;
}

    .compact-button.active .button-subtitle[b-t5qlpbbzc6] {
        color: rgba(255, 255, 255, 0.9);
    }

.present-button.active[b-t5qlpbbzc6] {
    background-color: #70ad47;
}

.late-button.active[b-t5qlpbbzc6] {
    background-color: #ffc000;
}

.absent-button.active[b-t5qlpbbzc6] {
    background-color: #ff0000;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .attendance-buttons[b-t5qlpbbzc6] {
        flex-direction: column;
    }

    .action-button[b-t5qlpbbzc6] {
        padding: 1rem 0.5rem;
        flex-direction: row;
        gap: 0.75rem;
        justify-content: flex-start;
        padding-left: 1.5rem;
    }

        .action-button i[b-t5qlpbbzc6] {
            margin-bottom: 0;
            font-size: 1.5rem;
        }
}

/* Vertical Attendance Buttons */
.attendance-buttons-vertical[b-t5qlpbbzc6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

    .attendance-buttons-vertical .action-button[b-t5qlpbbzc6] {
        display: flex;
        align-items: center;
        text-align: left;
        padding: 1rem 1.5rem;
        width: 100%;
        border-radius: 6px;
        transition: all 0.2s ease;
    }

        .attendance-buttons-vertical .action-button i[b-t5qlpbbzc6] {
            font-size: 1.5rem;
            margin-right: 1rem;
            min-width: 30px;
        }

        .attendance-buttons-vertical .action-button span[b-t5qlpbbzc6] {
            font-weight: 600;
            font-size: 1.1rem;
            margin-right: auto;
        }

.button-description[b-t5qlpbbzc6] {
    font-size: 0.85rem;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.7);
    margin-top: 0.25rem;
    display: block;
}

/* Active State for Vertical Buttons */
.attendance-buttons-vertical .action-button.active[b-t5qlpbbzc6] {
    color: white;
}

    .attendance-buttons-vertical .action-button.active .button-description[b-t5qlpbbzc6] {
        color: rgba(255, 255, 255, 0.9);
    }

/* Hover States */
.attendance-buttons-vertical .present-button:hover[b-t5qlpbbzc6] {
    background-color: rgba(112, 173, 71, 0.15);
}

.attendance-buttons-vertical .late-button:hover[b-t5qlpbbzc6] {
    background-color: rgba(255, 192, 0, 0.15);
}

.attendance-buttons-vertical .absent-button:hover[b-t5qlpbbzc6] {
    background-color: rgba(255, 0, 0, 0.15);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .attendance-buttons-vertical .action-button[b-t5qlpbbzc6] {
        padding: 0.8rem 1rem;
    }

        .attendance-buttons-vertical .action-button i[b-t5qlpbbzc6] {
            font-size: 1.25rem;
            margin-right: 0.75rem;
        }
}

/*#endregion */

/* Term Status Widget */
.term-status-widget[b-t5qlpbbzc6] {
    position: relative;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.current-term-badge[b-t5qlpbbzc6] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: default;
    transition: all 0.2s ease;
    position: relative;
    border: 1px solid rgba(0,0,0,0.1);
}

    .current-term-badge:hover[b-t5qlpbbzc6] {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transform: translateY(-1px);
    }

    .current-term-badge i[b-t5qlpbbzc6] {
        font-size: 1.4em;
        width: 24px;
        text-align: center;
    }

.term-info[b-t5qlpbbzc6] {
    line-height: 1.3;
}

.term-title[b-t5qlpbbzc6] {
    font-weight: 600;
    font-size: 0.95em;
}

.term-dates[b-t5qlpbbzc6] {
    font-size: 0.85em;
    color: #555;
}

/* Tooltip Styling */
.academic-calendar-tooltip[b-t5qlpbbzc6] {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 300px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 15px;
    z-index: 9999;
    margin-bottom: 10px;
    opacity: 0;
    animation: tooltipFadeIn 0.2s ease-out forwards;
    border: 1px solid #eee;
}

.high-z-index-combo .dxbl-dropdown[b-t5qlpbbzc6] {
    z-index: 9999 !important; /* Override default */
}

.tooltip-header[b-t5qlpbbzc6] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

    .tooltip-header i[b-t5qlpbbzc6] {
        color: #666;
    }

    .tooltip-header h4[b-t5qlpbbzc6] {
        margin: 0;
        font-size: 1em;
        color: #333;
    }

.term-list[b-t5qlpbbzc6] {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 5px;
}

.term-item[b-t5qlpbbzc6] {
    padding: 8px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
}

    .term-item:last-child[b-t5qlpbbzc6] {
        border-bottom: none;
    }

.term-name[b-t5qlpbbzc6] {
    font-weight: 500;
    width: 110px;
    flex-shrink: 0;
}

.term-date-range[b-t5qlpbbzc6] {
    flex-grow: 1;
    font-size: 0.9em;
    color: #666;
}

.term-duration[b-t5qlpbbzc6] {
    font-size: 0.8em;
    color: #999;
    font-style: italic;
    width: 100%;
    margin-top: 3px;
    padding-left: 110px;
}

.is-break[b-t5qlpbbzc6] {
    background-color: #FFF9E6;
    border-radius: 4px;
    margin: 2px -5px;
    padding: 8px 5px;
}

/* Status Colors */
.term-status[b-t5qlpbbzc6] {
    background-color: rgba(112, 173, 71, 0.1);
    border-left: 3px solid #70ad47;
}

.holiday-status[b-t5qlpbbzc6] {
    background-color: rgba(255, 192, 0, 0.1);
    border-left: 3px solid #ffc000;
}

.no-term-status[b-t5qlpbbzc6] {
    background-color: rgba(200, 200, 200, 0.1);
    border-left: 3px solid #ccc;
}

/* Position the tooltip underneath */
.academic-calendar-tooltip.bottom-tooltip[b-t5qlpbbzc6] {
    top: 100%;
    bottom: auto;
    left: 0;
    margin-top: 8px;
    margin-bottom: 0;
    animation: tooltipFadeInUp-b-t5qlpbbzc6 0.2s ease-out forwards;
}

/* Animations */
/* Adjust the animation to come from below */
@keyframes tooltipFadeInUp-b-t5qlpbbzc6 {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Add some space below the widget */
.term-status-widget[b-t5qlpbbzc6] {
    margin-bottom: 20px; /* Space for tooltip */
}

/* Arrow styling (optional) */
.academic-calendar-tooltip.bottom-tooltip[b-t5qlpbbzc6]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 20px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent white transparent;
    filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.1));
}

/* Scrollbar Styling */
.term-list[b-t5qlpbbzc6]::-webkit-scrollbar {
    width: 6px;
}

.term-list[b-t5qlpbbzc6]::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 3px;
}

/* Tooltip styling */
.academic-calendar-tooltip[b-t5qlpbbzc6] {
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

    .academic-calendar-tooltip.visible[b-t5qlpbbzc6] {
        opacity: 1;
        pointer-events: auto;
    }

/* Add gap between elements */
.bottom-tooltip[b-t5qlpbbzc6] {
    top: calc(100% + 5px);
}

.absence-reason-modal[b-t5qlpbbzc6] {
    padding: 20px;
}

.modal-buttons[b-t5qlpbbzc6] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}
/* _content/TemisV2_Auth/Components/Pages/DuplicateStudents.razor.rz.scp.css */
/* Welcome Container */
.welcome-container[b-42k9h6ti2i] {
    background-color: #f8f9fa;
    border-left: 3px solid #e74c3c;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 0.5rem;
}

.welcome-content[b-42k9h6ti2i] {
    flex: 1;
}

.welcome-title[b-42k9h6ti2i] {
    color: #e74c3c;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 600;
}

.welcome-text[b-42k9h6ti2i] {
    color: #4a4a4a;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.welcome-text.warning-text[b-42k9h6ti2i] {
    background-color: #fff3cd;
    border-left: 3px solid #ffc107;
    padding: 0.75rem;
    border-radius: 4px;
    color: #856404;
}

.welcome-text.warning-text i[b-42k9h6ti2i] {
    margin-right: 0.5rem;
    color: #ffc107;
}

/* Dashboard Container */
.dashboard-container[b-42k9h6ti2i] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px;
}

/* Student Selection Panels */
.student-selection-panel[b-42k9h6ti2i] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.student-selection-panel.duplicate-panel[b-42k9h6ti2i] {
    border-top: 6px solid #e74c3c;
}

.student-selection-panel.primary-panel[b-42k9h6ti2i] {
    border-top: 6px solid #28a745;
}

.panel-header[b-42k9h6ti2i] {
    color: #2c3e50;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f1f3f5;
    display: flex;
    align-items: center;
    gap: 10px;
}

.panel-header i[b-42k9h6ti2i] {
    font-size: 1.2rem;
}

.duplicate-panel .panel-header[b-42k9h6ti2i] {
    color: #e74c3c;
}

.primary-panel .panel-header[b-42k9h6ti2i] {
    color: #28a745;
}

/* Search Section */
.search-section[b-42k9h6ti2i] {
    margin-bottom: 20px;
}

.search-label[b-42k9h6ti2i] {
    display: block;
    font-weight: 500;
    color: #495057;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.student-search-box[b-42k9h6ti2i] {
    width: 100%;
}

/* Student Details */
.student-details[b-42k9h6ti2i] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #f1f3f5;
}

.details-header[b-42k9h6ti2i] {
    color: #2c3e50;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.detail-row[b-42k9h6ti2i] {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    margin-bottom: 6px;
    background-color: #f8f9fa;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.detail-row:hover[b-42k9h6ti2i] {
    background-color: #e9ecef;
}

.detail-label[b-42k9h6ti2i] {
    font-weight: 500;
    color: #6c757d;
    font-size: 0.9rem;
}

.detail-value[b-42k9h6ti2i] {
    color: #2c3e50;
    font-weight: 400;
    text-align: right;
}

.status-badge[b-42k9h6ti2i] {
    padding: 4px 12px;
    border-radius: 12px;
    background-color: #28a745;
    color: white;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Action Panel */
.dashboard-actions[b-42k9h6ti2i] {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 6px solid #3498db;
}

.full-width-actions[b-42k9h6ti2i] {
    grid-column: 1 / -1;
}

.actions-header[b-42k9h6ti2i] {
    color: #2c3e50;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f1f3f5;
}

.action-button[b-42k9h6ti2i] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 8px;
    font-weight: 500;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.action-button i[b-42k9h6ti2i] {
    font-size: 1.2rem;
    width: 20px;
    text-align: center;
}

.action-button:hover[b-42k9h6ti2i] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mark-duplicate-button[b-42k9h6ti2i] {
    background-color: #e74c3c;
}

.mark-duplicate-button:hover[b-42k9h6ti2i] {
    background-color: #c0392b;
}

.clear-button[b-42k9h6ti2i] {
    background-color: #6c757d;
}

.clear-button:hover[b-42k9h6ti2i] {
    background-color: #5a6268;
}

/* Confirmation Box */
.confirmation-box[b-42k9h6ti2i] {
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 15px;
}

.confirmation-box i[b-42k9h6ti2i] {
    color: #ffc107;
    margin-right: 10px;
    font-size: 1.2rem;
}

.confirmation-box p[b-42k9h6ti2i] {
    margin: 8px 0;
    color: #856404;
    line-height: 1.6;
}

.confirmation-box .warning-text[b-42k9h6ti2i] {
    font-weight: 600;
    color: #e74c3c;
    margin-top: 10px;
}

/* Info Box */
.info-box[b-42k9h6ti2i] {
    background-color: #d1ecf1;
    border-left: 4px solid #17a2b8;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 15px;
}

.info-box i[b-42k9h6ti2i] {
    color: #17a2b8;
    margin-right: 10px;
    font-size: 1.2rem;
}

.info-box p[b-42k9h6ti2i] {
    margin: 0;
    color: #0c5460;
}

/* Popup Styles */
.popup-content[b-42k9h6ti2i] {
    padding: 20px;
}

.popup-warning[b-42k9h6ti2i] {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    border-radius: 6px;
}

.popup-warning i[b-42k9h6ti2i] {
    font-size: 2rem;
    color: #ffc107;
}

.popup-warning h4[b-42k9h6ti2i] {
    margin: 0;
    color: #856404;
    font-size: 1.2rem;
}

.popup-student-info[b-42k9h6ti2i] {
    background-color: #f8d7da;
    border-left: 4px solid #e74c3c;
    padding: 12px 15px;
    border-radius: 6px;
    margin: 15px 0;
    color: #721c24;
    line-height: 1.6;
}

.popup-student-info.primary[b-42k9h6ti2i] {
    background-color: #d4edda;
    border-left: 4px solid #28a745;
    color: #155724;
}

.popup-note[b-42k9h6ti2i] {
    background-color: #d1ecf1;
    border-left: 4px solid #17a2b8;
    padding: 12px 15px;
    border-radius: 6px;
    margin-top: 15px;
    color: #0c5460;
}

.popup-note i[b-42k9h6ti2i] {
    margin-right: 8px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .dashboard-container[b-42k9h6ti2i] {
        grid-template-columns: 1fr;
    }

    .full-width-actions[b-42k9h6ti2i] {
        grid-column: 1;
    }
}

@media (max-width: 768px) {
    .dashboard-container[b-42k9h6ti2i] {
        padding: 10px;
        gap: 15px;
    }

    .student-selection-panel[b-42k9h6ti2i],
    .dashboard-actions[b-42k9h6ti2i] {
        padding: 15px;
    }

    .panel-header[b-42k9h6ti2i],
    .actions-header[b-42k9h6ti2i] {
        font-size: 1.2rem;
    }

    .action-button[b-42k9h6ti2i] {
        padding: 12px 15px;
    }

    .detail-row[b-42k9h6ti2i] {
        flex-direction: column;
        gap: 4px;
    }

    .detail-value[b-42k9h6ti2i] {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .welcome-container[b-42k9h6ti2i] {
        padding: 1rem;
    }

    .welcome-title[b-42k9h6ti2i] {
        font-size: 1.3rem;
    }

    .welcome-text[b-42k9h6ti2i] {
        font-size: 0.95rem;
    }

    .panel-header[b-42k9h6ti2i] {
        font-size: 1.1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
}

/* Add/Update these styles in DuplicateStudents.razor.css */

/* Student Selection Panels - REMOVE overflow: hidden */
.student-selection-panel[b-42k9h6ti2i] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    padding: 20px;
    position: relative;
    /* REMOVE: overflow: hidden; */
    /* This was clipping the dropdown */
}

/* Search Section - needs to have higher z-index and proper positioning */
.search-section[b-42k9h6ti2i] {
    position: relative;
    margin-bottom: 20px;
    z-index: 100; /* Higher than other content */
}

/* Search Input */
.student-search-input[b-42k9h6ti2i] {
    width: 100%;
    padding: 0.75rem;
    border: 1.5px solid #ced4da;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

    .student-search-input:focus[b-42k9h6ti2i] {
        border-color: #3498db;
        outline: none;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
    }

/* Search Results Dropdown - CRITICAL FIXES */
.search-results-dropdown[b-42k9h6ti2i] {

    z-index: 1000; /* Very high to appear above everything */
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); /* Stronger shadow */
    margin-top: 4px;
    left: 0;
    top: 100%; /* Position below the input */
}

.search-result-item[b-42k9h6ti2i] {
    padding: 12px 15px;
    cursor: pointer;
    border-bottom: 1px solid #f1f3f5;
    transition: background-color 0.15s ease;
    display: flex;
    gap: 10px;
    align-items: center;
}

    .search-result-item:last-child[b-42k9h6ti2i] {
        border-bottom: none;
    }

    .search-result-item:hover[b-42k9h6ti2i] {
        background-color: #f8f9fa;
    }

    .search-result-item:active[b-42k9h6ti2i] {
        background-color: #e9ecef;
    }

.result-id[b-42k9h6ti2i] {
    font-weight: 600;
    color: #6c757d;
    font-size: 0.85rem;
    min-width: 60px;
}

.result-name[b-42k9h6ti2i] {
    font-weight: 500;
    color: #2c3e50;
    flex: 1;
}

.result-school[b-42k9h6ti2i] {
    color: #6c757d;
    font-size: 0.9rem;
}

/* Dashboard Container - ensure it doesn't clip */
.dashboard-container[b-42k9h6ti2i] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 20px;
    overflow: visible; /* Don't clip children */
}

/* Search info message */
.search-info[b-42k9h6ti2i] {
    background-color: #d1ecf1;
    border-left: 4px solid #17a2b8;
    padding: 10px 12px;
    border-radius: 6px;
    margin-top: 10px;
    color: #0c5460;
    font-size: 0.9rem;
}

    .search-info i[b-42k9h6ti2i] {
        margin-right: 8px;
        color: #17a2b8;
    }
/* _content/TemisV2_Auth/Components/Pages/Home.razor.rz.scp.css */
.welcome[b-i6fyc9vpeh] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

}

ul.a[b-i6fyc9vpeh] {
    list-style-type: circle;
}

ul.b[b-i6fyc9vpeh] {
    list-style-type: square;
}

ol.c[b-i6fyc9vpeh] {
    list-style-type: upper-roman;
}

ol.d[b-i6fyc9vpeh] {
    list-style-type: lower-alpha;
}

[b-i6fyc9vpeh] .welcome-gridlayout {
    margin: auto;
    width: auto;
    height: auto;
}

[b-i6fyc9vpeh] .welcome-gridlayout .dxbl-gridlayout-root {
    align-content: center;
    justify-content: center;
}

[b-i6fyc9vpeh] .welcome-title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.welcome-title .welcome-title-header[b-i6fyc9vpeh] {
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: 0em;
    text-align: center;
}

.welcome-title .welcome-title-content[b-i6fyc9vpeh] {
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0em;
    text-align: center;
}

[b-i6fyc9vpeh] .welcome-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

[b-i6fyc9vpeh] .welcome-card {
    width: 23.25rem;
    height: 15rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s;
    border-radius: 1rem;
    color: var(--bs-link-color-rgb);
    gap: 1.5rem;
    text-decoration: none;
    position: relative;
}

    [b-i6fyc9vpeh] .welcome-card:hover {
        box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);
    }

    [b-i6fyc9vpeh] .welcome-card .welcome-card-img {
        width: 6.5rem;
        height: 6.5rem;
    }

    [b-i6fyc9vpeh] .welcome-card .welcome-card-text {
        font-size: 1.75rem;
        font-weight: 600;
        letter-spacing: 0em;
        text-align: center;
        text-decoration: unset;
    }

    [b-i6fyc9vpeh] .icon-fill {
        fill: var(--bs-primary);
    }

    [b-i6fyc9vpeh] .welcome-card .welcome-card-back {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bs-body-color);
        opacity: 0.05;
        border-radius: 1rem;
        z-index: -2;
    }
/* _content/TemisV2_Auth/Components/Pages/Schools.razor.rz.scp.css */

.w-100 ch-480[b-i6k1otfyij] {
    overflow:scroll;
}

.headercontainer[b-i6k1otfyij] {
    background-color: #f5f5f5;
    border-top: 1px solid #c2c2c2;
    border-left: 1px solid #c2c2c2;
    border-right: 1px solid #c2c2c2;
    height: 65px;
    padding: 1rem;
}

.headerTitle[b-i6k1otfyij] {
    font-size:25px;
}

.header[b-i6k1otfyij] {
    float: left;
    width: 85%;
}

.headersub[b-i6k1otfyij] {
    float: right;
    width: 15%;
    text-align: right;
}

.details[b-i6k1otfyij] {
    width:100%;
    font-size:17px;
}

.tabdetails[b-i6k1otfyij] {
    text-align: left;
    padding: 1rem;
}

.validation[b-i6k1otfyij] {
    text-align: left;
    padding: 1rem;
    background-color: #ffffff;
}

/* Create three equal columns that floats next to each other */
.tabdetailscolumn[b-i6k1otfyij] {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.tabdetailsrow[b-i6k1otfyij]:after {
    content: "";
    display: table;
    clear: both;
}

.gridlayout-item[b-i6k1otfyij] {
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
    height: 100%;
    text-align: center;
    position: relative;
    z-index: 0;
    display: flex;
    padding: 3rem;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    /*    justify-content: center; */
}

    .gridlayout-item[b-i6k1otfyij]:before {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0.4;
    }

.gridlayout-header[b-i6k1otfyij]:before {
    background-color: var(--bs-white);
}

.gridlayout-content[b-i6k1otfyij]:before {
    /* background-color: var(--bs-yellow);*/
    padding: 3rem;
}

.gridlayout-left-side-bar[b-i6k1otfyij]:before {
    background-color: var(--bs-white);
}

.gridlayout-right-side-bar[b-i6k1otfyij]:before {
    background-color: var(--bs-info);
}

.gridlayout-footer[b-i6k1otfyij]:before {
    background-color: var(--bs-blue);
    opacity: 0.5;
}

@media (max-width: 600.98px) {
    .gridlayout-item[b-i6k1otfyij] {
        font-size: 0.9em;
    }
}

.grid-wrapper[b-i6k1otfyij] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fab-container[b-i6k1otfyij] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    user-select: none;
    position: absolute;
    bottom: 16px;
    right: 16px;
}

.fab[b-i6k1otfyij] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.35) !important;
}

.flexGrid[b-i6k1otfyij] {
    flex: 1 1 auto;
    overflow-y: auto;
}

.bi[b-i6k1otfyij] {
    display: inline-block;
    /*position: relative;*/
    width: 1.65rem;
    height: 1.65rem;
    margin-right: 0.75rem;
    top: 0px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-i6k1otfyij] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-i6k1otfyij] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-i6k1otfyij] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-i6k1otfyij] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-i6k1otfyij] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-i6k1otfyij] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-i6k1otfyij] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-i6k1otfyij] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.bi-backpack3-nav-menu[b-i6k1otfyij] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-houses-nav-menu[b-i6k1otfyij] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-houses' viewBox='0 0 16 16'%3E%3Cpath d='M5.793 1a1 1 0 0 1 1.414 0l.647.646a.5.5 0 1 1-.708.708L6.5 1.707 2 6.207V12.5a.5.5 0 0 0 .5.5.5.5 0 0 1 0 1A1.5 1.5 0 0 1 1 12.5V7.207l-.146.147a.5.5 0 0 1-.708-.708zm3 1a1 1 0 0 1 1.414 0L12 3.793V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v3.293l1.854 1.853a.5.5 0 0 1-.708.708L15 8.207V13.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 4 13.5V8.207l-.146.147a.5.5 0 1 1-.708-.708zm.707.707L5 7.207V13.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V7.207z'/%3E%3C/svg%3E");
}

.bi-exam-nav-menu[b-i6k1otfyij] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-file-text' viewBox='0 0 16 16'%3E%3Cpath d='M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1'/%3E%3C/svg%3E");
}

.bi-temis-icon-nav-menu[b-i6k1otfyij] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.grid-toolbar-column-chooser[b-i6k1otfyij] {
    -webkit-mask-image: url("images/icons/column-chooser.svg");
    mask-image: url("images/icons/column-chooser.svg");
}

.grid-toolbar-export[b-i6k1otfyij] {
    -webkit-mask-image: url("images/icons/export.svg");
    mask-image: url("images/icons/export.svg");
}
/* _content/TemisV2_Auth/Components/Pages/SchoolsEdit.razor.rz.scp.css */
.headercontainer[b-hgokxr6pur] {
    background-color: #f5f5f5;
    border-top: 1px solid #c2c2c2;
    border-left: 1px solid #c2c2c2;
    border-right: 1px solid #c2c2c2;
    height: 65px;
    padding: 1rem;
}

.headerTitle[b-hgokxr6pur] {
    font-size:25px;
}

.header[b-hgokxr6pur] {
    float: left;
    width: 85%;
}

.headersub[b-hgokxr6pur] {
    float: right;
    width: 15%;
    text-align: right;
}

.tooltip[b-hgokxr6pur] {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext[b-hgokxr6pur] {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltip .tooltiptext[b-hgokxr6pur]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext[b-hgokxr6pur] {
    visibility: visible;
}

.details[b-hgokxr6pur] {
    width:100%;
    font-size:17px;
}

.tabdetails[b-hgokxr6pur] {
    text-align: left;
    padding: 1rem;
}

.validation[b-hgokxr6pur] {
    text-align: left;
    padding: 1rem;
    background-color: #ffffff;
}

/* Create three equal columns that floats next to each other */
.tabdetailscolumn[b-hgokxr6pur] {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.tabdetailsrow[b-hgokxr6pur]:after {
    content: "";
    display: table;
    clear: both;
}

.gridlayout-item[b-hgokxr6pur] {
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
    height: 100%;
    text-align: center;
    position: relative;
    z-index: 0;
    display: flex;
    padding: 3rem;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    /*    justify-content: center; */
}

    .gridlayout-item[b-hgokxr6pur]:before {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0.4;
    }

.gridlayout-header[b-hgokxr6pur]:before {
    background-color: var(--bs-white);
}

.gridlayout-content[b-hgokxr6pur]:before {
    /* background-color: var(--bs-yellow);*/
    padding: 3rem;
}

.gridlayout-left-side-bar[b-hgokxr6pur]:before {
    background-color: var(--bs-white);
}

.gridlayout-right-side-bar[b-hgokxr6pur]:before {
    background-color: var(--bs-info);
}

.gridlayout-footer[b-hgokxr6pur]:before {
    background-color: var(--bs-blue);
    opacity: 0.5;
}

@media (max-width: 600.98px) {
    .gridlayout-item[b-hgokxr6pur] {
        font-size: 0.9em;
    }
}

.grid-wrapper[b-hgokxr6pur] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fab-container[b-hgokxr6pur] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    user-select: none;
    position: absolute;
    bottom: 16px;
    right: 16px;
}

.fab[b-hgokxr6pur] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.35) !important;
}

.flexGrid[b-hgokxr6pur] {
    flex: 1 1 auto;
    overflow-y: auto;
}

.bi[b-hgokxr6pur] {
    display: inline-block;
    /*position: relative;*/
    width: 1.65rem;
    height: 1.65rem;
    margin-right: 0.75rem;
    top: 0px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-hgokxr6pur] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-hgokxr6pur] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-hgokxr6pur] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-hgokxr6pur] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-hgokxr6pur] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-hgokxr6pur] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-hgokxr6pur] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-hgokxr6pur] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.bi-backpack3-nav-menu[b-hgokxr6pur] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-houses-nav-menu[b-hgokxr6pur] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-houses' viewBox='0 0 16 16'%3E%3Cpath d='M5.793 1a1 1 0 0 1 1.414 0l.647.646a.5.5 0 1 1-.708.708L6.5 1.707 2 6.207V12.5a.5.5 0 0 0 .5.5.5.5 0 0 1 0 1A1.5 1.5 0 0 1 1 12.5V7.207l-.146.147a.5.5 0 0 1-.708-.708zm3 1a1 1 0 0 1 1.414 0L12 3.793V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v3.293l1.854 1.853a.5.5 0 0 1-.708.708L15 8.207V13.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 4 13.5V8.207l-.146.147a.5.5 0 1 1-.708-.708zm.707.707L5 7.207V13.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V7.207z'/%3E%3C/svg%3E");
}

.bi-exam-nav-menu[b-hgokxr6pur] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-file-text' viewBox='0 0 16 16'%3E%3Cpath d='M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1'/%3E%3C/svg%3E");
}

.bi-temis-icon-nav-menu[b-hgokxr6pur] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.grid-toolbar-column-chooser[b-hgokxr6pur] {
    -webkit-mask-image: url("images/icons/column-chooser.svg");
    mask-image: url("images/icons/column-chooser.svg");
}

.grid-toolbar-export[b-hgokxr6pur] {
    -webkit-mask-image: url("images/icons/export.svg");
    mask-image: url("images/icons/export.svg");
}
/* _content/TemisV2_Auth/Components/Pages/SchoolsLandingPage.razor.rz.scp.css */
body[b-wp4enxe7td] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #F1FAEE;
    margin: 0;
    padding: 20px;
    color: #1A1A2E;
}

/*#region Dashboard Styles */

/* Dashboard Container */
.dashboard-container[b-wp4enxe7td] {
    display: grid;
    grid-template-columns: 1fr 1fr 300px;
    gap: 20px;
    padding: 20px;
}

/* Dashboard Cards - Unified Styling */
.dashboard-card[b-wp4enxe7td] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    padding: 20px;
    position: relative;
    overflow: hidden;
    border-top: 6px solid #3A86FF;
}

    .dashboard-card:nth-child(2)[b-wp4enxe7td] {
        border-top-color: #06D6A0;
    }

/* Double Width Panel */
.dashboard-double-width[b-wp4enxe7td] {
    grid-column: span 2;
    padding: 0; /* Remove padding for table to fill space */
}

/* School Info Styles */
.school-name[b-wp4enxe7td] {
    color: #212529;
    font-size: 24px;
    font-weight: 200;
    margin: 0 0 15px 0;
}

.stat-row[b-wp4enxe7td] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.stat-label[b-wp4enxe7td] {
    font-weight: 600;
    color: #1A1A2E;
    font-size: 15px;
}

.stat-value[b-wp4enxe7td] {
    font-weight: 700;
    padding: 0 15px;
}

.highlight-value[b-wp4enxe7td] {
    color: #3A86FF;
    font-weight: 500;
    font-size: 18px;
}

.gender-stats[b-wp4enxe7td] {
    font-size: 13px;
    color: #6C757D;
    margin-top: 4px;
    font-weight: 500;
}

/* Table Styles */
.table-container[b-wp4enxe7td] {
    padding: 0;
    overflow-x: auto;
}

.section-header[b-wp4enxe7td] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 1.25rem; /* similar to DxFormLayoutGroup font size */
    color: #666;
    margin-bottom: 12px;
    margin-left: 10px;
    margin-top: 10px;
}

.section-header .header-icon[b-wp4enxe7td] {
    margin-bottom: 9px;
}
.education-table[b-wp4enxe7td] {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.4rem;
}

    .education-table th[b-wp4enxe7td] {
        background-color: #f8f9fa;
        color: #2c3e50;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 1.0rem;
        letter-spacing: 0.5px;
        padding: 12px 15px;
        text-align: left;
        border-bottom: 2px solid #e9ecef;
    }

    .education-table td[b-wp4enxe7td] {
        padding: 12px 15px;
        border-bottom: 1px solid #f1f3f5;
        vertical-align: middle;
    }

    .education-table tr:last-child td[b-wp4enxe7td] {
        border-bottom: none;
    }

    .education-table tr:hover[b-wp4enxe7td] {
        background-color: #f8fafc;
    }

/* Column Specific Styles */
.island-col[b-wp4enxe7td] {
    width: 150px;
}

.gender-col[b-wp4enxe7td] {
    width: 180px;
}

.numeric-col[b-wp4enxe7td] {
    text-align: center !important;
}

.numeric[b-wp4enxe7td] {
    text-align: center;
    font-weight: 500;
    color: #3A86FF;
}

.gender[b-wp4enxe7td] {
    text-align: center;
    font-size: 0.9rem;
}

.ratio[b-wp4enxe7td] {
    color: #06D6A0;
}

.internet[b-wp4enxe7td] {
    color: #8338EC;
}

/* Actions Panel */
.dashboard-actions[b-wp4enxe7td] {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.actions-header[b-wp4enxe7td] {
    color: #2c3e50;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f1f3f5;
}

.action-button[b-wp4enxe7td] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

    .action-button i[b-wp4enxe7td] {
        font-size: 1.2rem;
    }

    .action-button:hover[b-wp4enxe7td] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

/* Button Colors */
.student-button[b-wp4enxe7td] {
    background-color: #3498db;
}

.staff-button[b-wp4enxe7td] {
    background-color: #2ecc71;
}

.sgca-button[b-wp4enxe7td] {
    background-color: #9b59b6;
}

.tgca-button[b-wp4enxe7td] {
    background-color: #f39c12;
}

.export-excel-button[b-wp4enxe7td] {
    background-color: #1d6f42;
    color: white;
    border: none;
    padding: 13px 13px;
    margin-bottom: 10px;
    width: 100%;
    text-align: left;
}

    .export-excel-button i[b-wp4enxe7td] {
        margin-right: 5px;
        margin-left: 11px;
    }


.latest-feature-box[b-wp4enxe7td] {
    margin-top: 2rem;
    padding: 1rem 1.5rem;
    background: #e0f7fa; /* light cyan background */
    border-left: 5px solid #00acc1; /* bright cyan accent */
    display: flex;
    align-items: center;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.actions-divider[b-wp4enxe7td] {
    border: none;
    border-top: 1px solid #ccc;
    margin: 0.5rem 0;
}

.latest-feature-box .feature-icon[b-wp4enxe7td] {
    font-size: 1.8rem;
    color: #00796b; /* changed to a nice teal for the arrow */
    margin-right: 1rem;
}


    .latest-feature-box .feature-content h4[b-wp4enxe7td] {
        margin: 0 0 0.3rem 0;
        font-weight: 600;
        color: #007c91;
    }

    .latest-feature-box .feature-content p[b-wp4enxe7td] {
        margin: 0;
        color: #004d57;
        font-size: 0.9rem;
        line-height: 1.3;
    }

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .dashboard-container[b-wp4enxe7td] {
        grid-template-columns: 1fr;
    }

    .dashboard-double-width[b-wp4enxe7td] {
        grid-column: span 1;
    }

    .dashboard-actions[b-wp4enxe7td] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .action-button[b-wp4enxe7td] {
        flex: 1 1 200px;
    }
}

@media (max-width: 768px) {
    .gender-col[b-wp4enxe7td] {
        display: none;
    }

    .education-table th[b-wp4enxe7td],
    .education-table td[b-wp4enxe7td] {
        padding: 10px 8px;
    }

    .action-button[b-wp4enxe7td] {
        flex: 1 1 100%;
    }
}

@media (max-width: 1068px) {
    .hide-mobile[b-wp4enxe7td] {
        display: none;
    }
}

/* Table Header with Export Button */
.table-header[b-wp4enxe7td] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px 15px 15px;
}

.export-btn[b-wp4enxe7td] {
    background-color: #1d6f42;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

    .export-btn:hover[b-wp4enxe7td] {
        background-color: #165a36;
        transform: translateY(-1px);
    }

    .export-btn i[b-wp4enxe7td] {
        font-size: 1rem;
    }

/* Uniform Table Columns */
.education-table[b-wp4enxe7td] {
    table-layout: fixed;
}

    .education-table th[b-wp4enxe7td],
    .education-table td[b-wp4enxe7td] {
        width: calc(100% / 7); /* 7 columns */
        text-align: center;
        padding: 12px 8px;
    }

        .education-table th:first-child[b-wp4enxe7td],
        .education-table td:first-child[b-wp4enxe7td] {
            text-align: left;
            padding-left: 15px;
        }

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .education-table th[b-wp4enxe7td],
    .education-table td[b-wp4enxe7td] {
        width: auto;
        table-layout: auto;
        font-size: 0.85rem;
    }
}

/*#region Welcome Message Styles */

.welcome-container[b-wp4enxe7td] {
    background-color: #f8f9fa;
    border-left: 3px solid #2c7be5;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 0.5rem;

}

.welcome-grid[b-wp4enxe7td] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: flex-start;
}

.welcome-content[b-wp4enxe7td] {
    grid-column: 1;
}

.dropdown-column[b-wp4enxe7td] {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.welcome-title[b-wp4enxe7td] {
    color: #2c7be5;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 600;
}

.welcome-text[b-wp4enxe7td] {
    color: #4a4a4a;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.dropdown-header[b-wp4enxe7td] {
    font-weight: 600;
    color: #495057;
    font-size: 0.95rem;
}

.dropdown-footer[b-wp4enxe7td] {
    font-size: 0.85rem;
    color: #6c757d;
    font-style: italic;
    text-align: center;
}

.dropdown-container[b-wp4enxe7td] {
    width: 100%;
}

.dxbs-combo-box[b-wp4enxe7td] {
    width: 100% !important;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px 12px;
    background-color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

@media (max-width: 1068px) {
    .welcome-grid[b-wp4enxe7td] {
        display:block;
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

    /* Responsive adjustments */
    @media (max-width: 768px) {

        .dropdown-column[b-wp4enxe7td] {
            grid-column: 1;
        }

        .dropdown-header[b-wp4enxe7td] {
            text-align: center;
        }
    }




    /*#endregion */
/* _content/TemisV2_Auth/Components/Pages/SchoolsReportCard.razor.rz.scp.css */
.headercontainer[b-0rre8oyo57] {
    background-color: #f5f5f5;
    border-top: 1px solid #c2c2c2;
    border-left: 1px solid #c2c2c2;
    border-right: 1px solid #c2c2c2;
    height: 65px;
    padding: 1rem;
}

.headerTitle[b-0rre8oyo57] {
    float: left;
    font-size: 25px;
    width: 80%;
}

.header[b-0rre8oyo57] {
    float: left;
    width:100%
}

.headersub[b-0rre8oyo57] {
    float: right;
    width: 20%;
    text-align: right;
    
}

/* container */
.two-columns-grid[b-0rre8oyo57] {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);

}

    /* columns */
    .two-columns-grid > *[b-0rre8oyo57] {
        padding: 1rem;
    }

@media (max-width: 600.98px) {
    .two-columns-grid[b-0rre8oyo57] {
        font-size: 0.9em;
    }
}


.grid-container2[b-0rre8oyo57] {
    font-size:14px;
    width:95%;
    margin-right: 50px;
    text-align: left;
    background-color: #ffffff;
    height: 200px;
}

.gie[b-0rre8oyo57] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #ffffff;
}

.gie2[b-0rre8oyo57] {
    float: left;
    width: 50%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #ffffff;
}

.gie3[b-0rre8oyo57] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #ffffff;
}

.gio[b-0rre8oyo57] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #eeeeee;
}

.gio2[b-0rre8oyo57] {
    float: left;
    width: 50%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #eeeeee;
}

.gio3[b-0rre8oyo57] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #eeeeee;
}

.details[b-0rre8oyo57] {
    width:100%;
    font-size:17px;
}

.tabdetails[b-0rre8oyo57] {
    text-align: left;
    padding: 1rem;
}

.validation[b-0rre8oyo57] {
    text-align: left;
    padding: 1rem;
    background-color: #ffffff;
}

/* Create three equal columns that floats next to each other */
.tabdetailscolumn[b-0rre8oyo57] {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.tabdetailsrow[b-0rre8oyo57]:after {
    content: "";
    display: table;
    clear: both;
}

.gridlayout[b-0rre8oyo57] {
    /*overflow-y: auto;*/
    /*overflow:scroll;*/
}

.gridlayout-item[b-0rre8oyo57] {
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
    text-align: center;
    position: relative;
    height:400px;
    z-index: 0;
    display: flex;
    padding: 3rem;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    /*    justify-content: center; */
}

.gridlayout-item-charts[b-0rre8oyo57] {
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
    text-align: center;
    position: relative;
    z-index: 0;
    display: flex;
    padding: 3rem;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    /*    justify-content: center; */
}

.gridlayout-header[b-0rre8oyo57]:before {
    background-color: var(--bs-white);
}

.gridlayout-content[b-0rre8oyo57]:before {
    /* background-color: var(--bs-yellow);*/
    padding: 3rem;
}

.gridlayout-left-side-bar[b-0rre8oyo57]:before {
    background-color: var(--bs-white);
}

.gridlayout-right-side-bar[b-0rre8oyo57]:before {
    background-color: var(--bs-info);
}

.gridlayout-footer[b-0rre8oyo57]:before {
    background-color: var(--bs-blue);
    opacity: 0.5;
}



.grid-wrapper[b-0rre8oyo57] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fab-container[b-0rre8oyo57] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    user-select: none;
    position: absolute;
    bottom: 16px;
    right: 16px;
}

.fab[b-0rre8oyo57] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.35) !important;
}

.flexGrid[b-0rre8oyo57] {
    flex: 1 1 auto;
    overflow-y: auto;
}

.bi[b-0rre8oyo57] {
    display: inline-block;
    /*position: relative;*/
    width: 1.65rem;
    height: 1.65rem;
    margin-right: 0.75rem;
    top: 0px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-0rre8oyo57] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-0rre8oyo57] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-0rre8oyo57] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-0rre8oyo57] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-0rre8oyo57] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-0rre8oyo57] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-0rre8oyo57] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-0rre8oyo57] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.bi-backpack3-nav-menu[b-0rre8oyo57] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-houses-nav-menu[b-0rre8oyo57] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-houses' viewBox='0 0 16 16'%3E%3Cpath d='M5.793 1a1 1 0 0 1 1.414 0l.647.646a.5.5 0 1 1-.708.708L6.5 1.707 2 6.207V12.5a.5.5 0 0 0 .5.5.5.5 0 0 1 0 1A1.5 1.5 0 0 1 1 12.5V7.207l-.146.147a.5.5 0 0 1-.708-.708zm3 1a1 1 0 0 1 1.414 0L12 3.793V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v3.293l1.854 1.853a.5.5 0 0 1-.708.708L15 8.207V13.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 4 13.5V8.207l-.146.147a.5.5 0 1 1-.708-.708zm.707.707L5 7.207V13.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V7.207z'/%3E%3C/svg%3E");
}

.bi-exam-nav-menu[b-0rre8oyo57] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-file-text' viewBox='0 0 16 16'%3E%3Cpath d='M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1'/%3E%3C/svg%3E");
}

.bi-temis-icon-nav-menu[b-0rre8oyo57] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.grid-toolbar-column-chooser[b-0rre8oyo57] {
    -webkit-mask-image: url("images/icons/column-chooser.svg");
    mask-image: url("images/icons/column-chooser.svg");
}

.grid-toolbar-export[b-0rre8oyo57] {
    -webkit-mask-image: url("images/icons/export.svg");
    mask-image: url("images/icons/export.svg");
}
/* _content/TemisV2_Auth/Components/Pages/StaffCpd.razor.rz.scp.css */
/*#region Main Styles */

.headercontainer[b-zu147mt4wy] {
    background-color: #f5f5f5;
    border-top: 1px solid #c2c2c2;
    border-left: 1px solid #c2c2c2;
    border-right: 1px solid #c2c2c2;
    height: 65px;
    padding: 1rem;
}

.header[b-zu147mt4wy] {
    float: left;
    width:100%
}

.headersub[b-zu147mt4wy] {
    float: right;
    width: 20%;
    text-align: right;
}

.email-caption[b-zu147mt4wy] {
    display: flex;
    align-items: center;
}

.info-icon-btn[b-zu147mt4wy] {
    color:black;
    padding-left: .25rem;
    padding-right: .25rem;
}

.info-icon[b-zu147mt4wy] {
    display: inline-block;
    background-color: currentColor;
    width: 16px;
    height: 16px;
    -webkit-mask-image: url('images/icons/info-circle.svg');
    mask-image: url('images/icons/info-circle.svg');
}

.form-layout[b-zu147mt4wy] {
    padding-left: 2rem;
}

.dxbl-group-header .dxbl-text[b-zu147mt4wy] {
    font-size: 20px;
}

.FormLayout .row > div:last-of-type[b-zu147mt4wy] {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
}

.FormLayout .col-form-label[b-zu147mt4wy] {
    height: 18px;
    color: crimson;
    font-family: "Open Sans";
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 18px;
}

/* container */
.two-columns-grid[b-zu147mt4wy] {
    width: 100%;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    padding:0.25rem;
}

    /* columns */
    .two-columns-grid > *[b-zu147mt4wy] {
        padding: 1rem;
    }

@media (max-width: 600.98px) {
    .two-columns-grid[b-zu147mt4wy] {
        font-size: 0.9em;
        overflow:scroll;
    }
}


.grid-container2[b-zu147mt4wy] {
    font-size:14px;
    width:95%;
    margin-right: 50px;
    text-align: left;
    background-color: #ffffff;
    height: 200px;
}

.gie[b-zu147mt4wy] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #ffffff;
}

.gie2[b-zu147mt4wy] {
    float: left;
    width: 50%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #ffffff;
}

.gie3[b-zu147mt4wy] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #ffffff;
}

.gio[b-zu147mt4wy] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #eeeeee;
}

.gio2[b-zu147mt4wy] {
    float: left;
    width: 50%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #eeeeee;
}

.gio3[b-zu147mt4wy] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #eeeeee;
}

.details[b-zu147mt4wy] {
    width:100%;
    font-size:17px;
}

.tabdetails[b-zu147mt4wy] {
    text-align: left;
    padding: 1rem;
}

.validation[b-zu147mt4wy] {
    text-align: left;
    padding: 1rem;
    background-color: #ffffff;
}

/* Create three equal columns that floats next to each other */
.tabdetailscolumn[b-zu147mt4wy] {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.tabdetailsrow[b-zu147mt4wy]:after {
    content: "";
    display: table;
    clear: both;
}

.gridlayout[b-zu147mt4wy] {
    /*overflow-y: auto;*/
    /*overflow:scroll;*/
}

.gridlayout-item[b-zu147mt4wy] {
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
    text-align: center;
    position: relative;
    height:400px;
    z-index: 0;
    display: flex;
    padding: 3rem;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    /*    justify-content: center; */
}

.gridlayout-item-charts[b-zu147mt4wy] {
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
    text-align: center;
    position: relative;
    z-index: 0;
    display: flex;
    padding: 3rem;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    /*    justify-content: center; */
}

.gridlayout-header[b-zu147mt4wy]:before {
    background-color: var(--bs-white);
}

.gridlayout-content[b-zu147mt4wy]:before {
    /* background-color: var(--bs-yellow);*/
    padding: 3rem;
}

.gridlayout-left-side-bar[b-zu147mt4wy]:before {
    background-color: var(--bs-white);
}

.gridlayout-right-side-bar[b-zu147mt4wy]:before {
    background-color: var(--bs-info);
}

.gridlayout-footer[b-zu147mt4wy]:before {
    background-color: var(--bs-blue);
    opacity: 0.5;
}



.grid-wrapper[b-zu147mt4wy] {
    display: flex;
    flex-direction: column;
}

.fab-container[b-zu147mt4wy] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    user-select: none;
    position: absolute;
    bottom: 16px;
    right: 16px;
}

.fab[b-zu147mt4wy] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.35) !important;
}

.flexGrid[b-zu147mt4wy] {
    flex: auto auto auto;
}

.bi[b-zu147mt4wy] {
    display: inline-block;
    /*position: relative;*/
    width: 1.65rem;
    height: 1.65rem;
    margin-right: 0.75rem;
    top: 0px;
    background-size: cover;
}

.survey-wrapper[b-zu147mt4wy] {
    width: 100%;
    max-width: 180px;
}

.dx-demo-radio-group-label[b-zu147mt4wy] {
    font-size: inherit;
    font-weight: 600;
}

    .dx-demo-radio-group-label.dx-demo-small[b-zu147mt4wy] {
        font-size: 0.75rem;
    }

    .dx-demo-radio-group-label.dx-demo-large[b-zu147mt4wy] {
        font-size: 2rem;
    }

.dx-demo-radio-group[b-zu147mt4wy] {
    padding-bottom: 1rem;
}

    .dx-demo-radio-group > .dx-demo-radio ~ .dx-demo-radio[b-zu147mt4wy] {
        padding-top: 0.5rem;
    }

    .dx-demo-radio.dx-demo-radio-selected[b-zu147mt4wy] {
        font-weight: bold;
    }

    .dx-demo-radio.priority-Present[b-zu147mt4wy] {
        color: green
    }

    .dx-demo-radio.priority-Absent[b-zu147mt4wy] {
        color: red
    }

    .dx-demo-radio.priority-Late[b-zu147mt4wy] {
        color: darkorange
    }

.dx-demo-radio-selected-value[b-zu147mt4wy] {
    max-width: 180px;
    width: 100%;
}

.grid-toolbar-column-chooser[b-zu147mt4wy] {
    -webkit-mask-image: url("images/icons/column-chooser.svg");
    mask-image: url("images/icons/column-chooser.svg");
}

.grid-toolbar-export[b-zu147mt4wy] {
    -webkit-mask-image: url("images/icons/export.svg");
    mask-image: url("images/icons/export.svg");
}

/*#endregion */

/*#region Bootstrap Styles */

.bi-house-door-fill-nav-menu[b-zu147mt4wy] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-zu147mt4wy] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-zu147mt4wy] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-zu147mt4wy] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-zu147mt4wy] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-zu147mt4wy] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-zu147mt4wy] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-zu147mt4wy] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.bi-backpack3-nav-menu[b-zu147mt4wy] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-houses-nav-menu[b-zu147mt4wy] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-houses' viewBox='0 0 16 16'%3E%3Cpath d='M5.793 1a1 1 0 0 1 1.414 0l.647.646a.5.5 0 1 1-.708.708L6.5 1.707 2 6.207V12.5a.5.5 0 0 0 .5.5.5.5 0 0 1 0 1A1.5 1.5 0 0 1 1 12.5V7.207l-.146.147a.5.5 0 0 1-.708-.708zm3 1a1 1 0 0 1 1.414 0L12 3.793V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v3.293l1.854 1.853a.5.5 0 0 1-.708.708L15 8.207V13.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 4 13.5V8.207l-.146.147a.5.5 0 1 1-.708-.708zm.707.707L5 7.207V13.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V7.207z'/%3E%3C/svg%3E");
}

.bi-exam-nav-menu[b-zu147mt4wy] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-file-text' viewBox='0 0 16 16'%3E%3Cpath d='M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1'/%3E%3C/svg%3E");
}

.bi-temis-icon-nav-menu[b-zu147mt4wy] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-attendance-icon-green[b-zu147mt4wy] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='green' class='bi bi-person-check' viewBox='0 0 16 16'%3E %3Cpath d='M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7m1.679-4.493-1.335 2.226a.75.75 0 0 1-1.174.144l-.774-.773a.5.5 0 0 1 .708-.708l.547.548 1.17-1.951a.5.5 0 1 1 .858.514M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4'/%3E %3Cpath d='M8.256 14a4.5 4.5 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10q.39 0 .74.025c.226-.341.496-.65.804-.918Q8.844 9.002 8 9c-5 0-6 3-6 4s1 1 1 1z'/%3E %3C/svg%3E");
}

.bi-attendance-icon-black[b-zu147mt4wy] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-person-check' viewBox='0 0 16 16'%3E %3Cpath d='M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7m1.679-4.493-1.335 2.226a.75.75 0 0 1-1.174.144l-.774-.773a.5.5 0 0 1 .708-.708l.547.548 1.17-1.951a.5.5 0 1 1 .858.514M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4'/%3E %3Cpath d='M8.256 14a4.5 4.5 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10q.39 0 .74.025c.226-.341.496-.65.804-.918Q8.844 9.002 8 9c-5 0-6 3-6 4s1 1 1 1z'/%3E %3C/svg%3E");
}

.bi-stage-1[b-zu147mt4wy] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='Green' class='bi bi-1-circle-fill' viewBox='0 0 16 16'%3E %3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M9.283 4.002H7.971L6.072 5.385v1.271l1.834-1.318h.065V12h1.312z'/%3E %3C/svg%3E");
}

/*#endregion */

/*#region Mark Attendance CSS */

.mark-attendance[b-zu147mt4wy] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 400px;
    margin: 20px auto;
    padding: 25px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.student-info[b-zu147mt4wy] {
    margin-bottom: 20px;
}

.student-name[b-zu147mt4wy] {
    font-size: 18px;
    font-weight: bold;
    color: #212529;
    margin-bottom: 5px;
}

.instruction[b-zu147mt4wy] {
    font-size: 14px;
    color: #6c757d;
}

.attendance-buttons[b-zu147mt4wy] {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.attendance-btn[b-zu147mt4wy] {
    flex: 1;
    padding: 12px 0;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .attendance-btn:hover[b-zu147mt4wy] {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .attendance-btn:active[b-zu147mt4wy] {
        transform: translateY(0);
    }

    /* Specific button colors */
    .attendance-btn.present[b-zu147mt4wy] {
        background-color: #28a745; /* Green */
        color: white;
    }

    .attendance-btn.absent[b-zu147mt4wy] {
        background-color: #dc3545; /* Red */
        color: white;
    }

    .attendance-btn.late[b-zu147mt4wy] {
        background-color: #ffc107; /* Yellow */
        color: #212529;
    }

/*#endregion */

/*#region Attendance Infographic CSS */

.metrics-container[b-zu147mt4wy] {
    display: flex;
    margin-left:10px;
    justify-content: left;
    gap: 10px;
    max-width: 600px;
    width: 356px;
}

.metric-box[b-zu147mt4wy] {
    background: white;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    padding: 10px 15px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    max-width: 250px;
    width: 250px;
}

.percentage[b-zu147mt4wy] {
    font-size: 48px;
    font-weight: normal;
    color: darkgreen;
    line-height: 1.2;
    margin-bottom: 8px;
}

.label[b-zu147mt4wy] {
    font-size: 22px;
    color: #555;
    text-transform: capitalize;
    letter-spacing: 0px;
}

.attendance-infographic[b-zu147mt4wy] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 16px;
    padding: 25px;
    max-width: 500px;
    margin: 20px auto;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-left: 0px solid darkgreen;
}

.attendance-header[b-zu147mt4wy] {
    color: #2c3e50;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

/*    .attendance-header:before {
        content: "📈";
        margin-right: 10px;
        font-size: 28px;
    }*/

.metric-grid[b-zu147mt4wy] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

.rate-grid[b-zu147mt4wy] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.metric-item[b-zu147mt4wy] {
    background: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.rate-item[b-zu147mt4wy] {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-top: 4px solid;
    text-align: center;
}

.metric-label[b-zu147mt4wy] {
    font-size: 14px;
    color: #7f8c8d;
    margin-bottom: 5px;
}

.metric-value[b-zu147mt4wy] {
    font-size: 28px;
    font-weight: 700;
}

.rate-label[b-zu147mt4wy] {
    font-size: 16px;
    color: #2c3e50;
    margin-bottom: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rate-value[b-zu147mt4wy] {
    font-size: 36px;
    font-weight: 800;
}

.total-days .metric-value[b-zu147mt4wy] {
    color: #3498db;
}

.present-days .metric-value[b-zu147mt4wy] {
    color: #2ecc71;
}

.absent-days .metric-value[b-zu147mt4wy] {
    color: #e74c3c;
}

.late-days .metric-value[b-zu147mt4wy] {
    color: #f39c12;
}

.attendance-rate[b-zu147mt4wy] {
    border-top-color: #3498db;
}

    .attendance-rate .rate-value[b-zu147mt4wy] {
        color: #3498db;
    }

.punctuality-rate[b-zu147mt4wy] {
    border-top-color: #9b59b6;
}

    .punctuality-rate .rate-value[b-zu147mt4wy] {
        color: #9b59b6;
    }


.export-container[b-zu147mt4wy] {
    position: absolute;
    bottom: 20px;
    right: 20px;
    text-align: right;
}

.export-excel-btn[b-zu147mt4wy] {
    background-color: #217346; /* Excel green */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .export-excel-btn:hover[b-zu147mt4wy] {
        background-color: #1a5f38; /* Darker green on hover */
    }

    .export-excel-btn:active[b-zu147mt4wy] {
        transform: translateY(1px);
    }

/*#endregion */

/*#region Attendance Table CSS */

.attendance-note[b-zu147mt4wy] {
    margin-top: 20px;
    font-size: 14px;
    color: #7f8c8d;
    text-align: center;
    font-style: italic;
}

.attendance-table-container[b-zu147mt4wy] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 600px;
    margin: 20px auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 0px;
    overflow: hidden;
    height: 600px;
}

.attendance-table[b-zu147mt4wy] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;

}

    .attendance-table th[b-zu147mt4wy] {
        background-color: #f2f2f2;
        color: black;
        padding: 12px 15px;
        font-weight: 600;
    }

    .attendance-table td[b-zu147mt4wy] {
        padding: 12px 15px;
        border-bottom: 1px solid #e0e0e0;
    }

    .attendance-table tr:last-child td[b-zu147mt4wy] {
        border-bottom: none;
    }

/* Status coloring */
.present[b-zu147mt4wy] {
    background-color: #ffffff; /* Pale green */
}

.absent[b-zu147mt4wy] {
    background-color: #ffebee; /* Pale red */
}

.halfday[b-zu147mt4wy] {
    background-color: #ffffff; /* Pale amber */
}

.status-badge[b-zu147mt4wy] {
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 12px;
    display: inline-block;
}

.present .status-badge[b-zu147mt4wy] {
    background-color: #2ecc71;
    color: white;
}

.absent .status-badge[b-zu147mt4wy] {
    background-color: #e74c3c;
    color: white;
}

.halfday .status-badge[b-zu147mt4wy] {
    background-color: #f39c12;
    color: white;
}

.count-footer[b-zu147mt4wy] {
    text-align: right;
    font-weight: bold;
    background-color: #f8f9fa;
    padding: 10px 15px;
}

/* Hover effects */

.pagination-controls[b-zu147mt4wy] {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    gap: 5px;
}

    .pagination-controls button[b-zu147mt4wy] {
        padding: 8px 12px;
        border: 1px solid #ddd;
        background: white;
        cursor: pointer;
        border-radius: 4px;
        min-width: 40px;
    }

        .pagination-controls button:hover:not(:disabled)[b-zu147mt4wy] {
            background: #f0f0f0;
        }

        .pagination-controls button:disabled[b-zu147mt4wy] {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .pagination-controls button.active[b-zu147mt4wy] {
            background: #2c3e50;
            color: white;
            border-color: #2c3e50;
        }

.count-footer[b-zu147mt4wy] {
    text-align: center;
    padding: 10px;
    color: #666;
}

/*#endregion */

/*#region Welcome Message Styles */
.welcome-container[b-zu147mt4wy] {
    background-color: #f8f9fa;
    border-left: 3px solid #2c7be5;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 0.5rem;
}

.welcome-grid[b-zu147mt4wy] {
    display: grid;
    grid-template-columns: 1fr 356px;
    gap: 2rem;
    align-items: flex-start;
}

    .welcome-grid.two-column-layout[b-zu147mt4wy] {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
    }

.welcome-content[b-zu147mt4wy] {
    flex: 1 1 60%;
}

.dropdown-column[b-zu147mt4wy] {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.welcome-title[b-zu147mt4wy] {
    color: #2c7be5;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 600;
}

.welcome-text[b-zu147mt4wy] {
    color: #4a4a4a;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.welcome-features[b-zu147mt4wy] {
    padding-left: 1.2rem;
    margin: 0;
}

.dropdown-header[b-zu147mt4wy] {
    font-weight: 600;
    color: #495057;
    font-size: 0.95rem;
    text-align: left;
}

.dropdown-footer[b-zu147mt4wy] {
    font-size: 0.85rem;
    color: #6c757d;
    font-style: italic;
    text-align: center;
}

.dropdown-container[b-zu147mt4wy],
.dxbs-combo-box[b-zu147mt4wy] {
    width: 100%;
}

.dxbs-combo-box[b-zu147mt4wy] {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px 12px;
    background-color: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.proof-panel[b-zu147mt4wy] {
    flex: 1 1 35%;
    background-color: #f0f2f5;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px #d6d8db;
}

.proof-header[b-zu147mt4wy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.proof-title[b-zu147mt4wy] {
    margin: 0;
    color: #343a40;
    font-weight: 600;
    font-size: 1.25rem;
}

.mail-icon[b-zu147mt4wy] {
    flex-shrink: 0;
}

.proof-text[b-zu147mt4wy] {
    font-size: 0.95rem;
    color: #495057;
    margin-bottom: 1rem;
}

.proof-email[b-zu147mt4wy] {
    color: #007bff;
    font-weight: 500;
    text-decoration: none;
}

    .proof-email:hover[b-zu147mt4wy] {
        text-decoration: underline;
    }
/* Responsive adjustments */
@media (max-width: 1068px) {
    .welcome-grid[b-zu147mt4wy],
    .welcome-grid.two-column-layout[b-zu147mt4wy] {
        display: block;
    }

    .dropdown-column[b-zu147mt4wy],
    .proof-panel[b-zu147mt4wy] {
        grid-column: 1;
        margin-top: 1rem;
    }

    .dropdown-header[b-zu147mt4wy] {
        text-align: center;
    }
}

/*#endregion */

/*#region Event Styles */

/* Container Styles */
.event-details-container[b-zu147mt4wy] {
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.event-details-group[b-zu147mt4wy] {
    padding: 1.5rem;
}

/* Typography */
.event-title[b-zu147mt4wy] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #212529;
    padding: 0.5rem 0;
}

.event-meta-item .dx-field-item-label-text[b-zu147mt4wy] {
    font-weight: 500;
    color: #495057;
}

.event-content-item .dx-field-item-label-text[b-zu147mt4wy] {
    font-weight: 500;
    color: #495057;
    margin-top: 1rem;
}

/* Content Styles */
.event-dates[b-zu147mt4wy],
.event-location[b-zu147mt4wy],
.event-organizer[b-zu147mt4wy] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.icon[b-zu147mt4wy] {
    display: inline-flex;
    align-items: center;
}

/* Empty State */
.no-event-selected[b-zu147mt4wy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    color: #6c757d;
    text-align: center;
}

/* Notes Input */
.notes-input[b-zu147mt4wy] {
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0.75rem;
    min-height: 100px;
    width: 100%;
}

/* Improved Content Item Alignment */
.description-item .dx-field-item-label[b-zu147mt4wy],
.objectives-item .dx-field-item-label[b-zu147mt4wy] {
    align-self: flex-start; /* Aligns label with first line of content */
    padding-top: 0.5rem; /* Matches content padding */
    width: 120px; /* Fixed width for consistent alignment */
}

.event-content-item[b-zu147mt4wy] {
    display: flex;
    align-items: flex-start; /* Changed from baseline to start */
    margin-bottom: 1rem;
}

.event-description[b-zu147mt4wy],
.event-objectives[b-zu147mt4wy] {
    flex: 1; /* Takes remaining space */
    line-height: 1.6;
    padding: 0.5rem 0 0.5rem 1rem; /* Left padding for content */
    margin-left: 0.5rem; /* Space between label and content */
    border-left: 2px solid #e9ecef; /* Subtle visual separation */
    color: #343a40;
}

/*#endregion */


/* CPD Action Buttons */

/* New Actions Panel */
.dashboard-actions[b-zu147mt4wy] {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 480px;
}

.actions-header[b-zu147mt4wy] {
    color: #2c3e50;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f1f3f5;
}

/* Action Buttons - Aligned with Landing Page Colors */
.action-button[b-zu147mt4wy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-left: 4px solid;
}

    .action-button i[b-zu147mt4wy] {
        font-size: 1.2rem;
        width: 20px;
        text-align: center;
    }

    .action-button:hover[b-zu147mt4wy] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .action-button:active[b-zu147mt4wy] {
        transform: translateY(0);
    }

/* Add Button - Staff Green (#2ecc71) */
.add-button[b-zu147mt4wy] {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    border-left-color: #219653;
}

/* Edit Button - Student Blue (#3498db) */
.edit-button[b-zu147mt4wy] {
    background: linear-gradient(135deg, #2980b9 0%, #3498db 100%);
    border-left-color: #1f6fb3;
}

/* Delete Button - Complementary Red */
.delete-button[b-zu147mt4wy] {
    background: linear-gradient(135deg, #e74c3c 0%, #ff6b6b 100%);
    border-left-color: #c0392b;
    border-right: none;
    border-top: none;
    border-bottom: none;
}

/* Participants Button - TGCA Orange (#f39c12) */
.participants-button[b-zu147mt4wy] {
    background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
    border-left-color: #d35400;
}

/* External Participants Button - SGCA Purple (#9b59b6) */
.external-participants-button[b-zu147mt4wy] {
    background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%);
    border-left-color: #7d3c98;
}

/* Export Button - Excel Green (Darker Staff Green) */
.export-button[b-zu147mt4wy] {
    background: linear-gradient(135deg, #219653 0%, #27ae60 100%);
    border-left-color: #1a7a48;
    border-right: none;
    border-top: none;
    border-bottom: none;
}

/* Hover Effects */
.add-button:hover[b-zu147mt4wy] {
    background: linear-gradient(135deg, #219653 0%, #27ae60 100%);
}

.edit-button:hover[b-zu147mt4wy] {
    background: linear-gradient(135deg, #1f6fb3 0%, #2980b9 100%);
}

.delete-button:hover[b-zu147mt4wy] {
    background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
}

.participants-button:hover[b-zu147mt4wy] {
    background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
}

.external-participants-button:hover[b-zu147mt4wy] {
    background: linear-gradient(135deg, #7d3c98 0%, #8e44ad 100%);
}

.export-button:hover[b-zu147mt4wy] {
    background: linear-gradient(135deg, #1a7a48 0%, #219653 100%);
}

/* Icon Colors */
.fa-calendar-plus[b-zu147mt4wy] {
    color: #d5f5e3;
}

.fa-edit[b-zu147mt4wy] {
    color: #d6eaf8;
}

.fa-trash-alt[b-zu147mt4wy] {
    color: #fadbd8;
}

.fa-user-friends[b-zu147mt4wy] {
    color: #fdebd0;
}

.fa-users[b-zu147mt4wy] {
    color: #e8daef;
}

.fa-file-excel[b-zu147mt4wy] {
    color: #d5f5e3;
}


/* Grid action buttons */
.grid-actions[b-zu147mt4wy] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.btn-grid-action[b-zu147mt4wy] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.btn-edit[b-zu147mt4wy] {
    color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

    .btn-edit:hover[b-zu147mt4wy] {
        background-color: rgba(var(--bs-primary-rgb), 0.2);
    }

.btn-delete[b-zu147mt4wy] {
    color: var(--bs-danger);
    background-color: rgba(var(--bs-danger-rgb), 0.1);
}

    .btn-delete:hover[b-zu147mt4wy] {
        background-color: rgba(var(--bs-danger-rgb), 0.2);
    }

/* Remove header new button */
.dxbl-grid-command-column .dxbl-grid-cmd-col-new-btn[b-zu147mt4wy] {
    display: none !important;
}


.delete-confirm-popup[b-zu147mt4wy] {
    --dxbl-popup-content-padding: 1.5rem;
}

.popup-header[b-zu147mt4wy] {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--dxbl-popup-border-color);
}

.popup-body[b-zu147mt4wy] {
    padding: 1.5rem;
}

.confirmation-message[b-zu147mt4wy] {
    margin-bottom: 0;
    line-height: 1.6;
}

.button-group[b-zu147mt4wy] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.cancel-btn[b-zu147mt4wy] {
    min-width: 80px;
}

.delete-btn[b-zu147mt4wy] {
    min-width: 80px;
}
/* _content/TemisV2_Auth/Components/Pages/StaffCpd_AddEvent.razor.rz.scp.css */
/* Add Event Form Styles */
.event-form-container[b-rj0l7fjjgt] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.form-section-title[b-rj0l7fjjgt] {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.form-actions[b-rj0l7fjjgt] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
}

.validation-message[b-rj0l7fjjgt] {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.date-range-container[b-rj0l7fjjgt] {
    display: flex;
    gap: 1rem;
}
/* Ensure buttons match DevExpress styling */
.btn[b-rj0l7fjjgt] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    width:150px;
}

.btn-primary[b-rj0l7fjjgt] {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-secondary[b-rj0l7fjjgt] {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

/* Hover states */
.btn-primary:hover[b-rj0l7fjjgt] {
    background-color: #0069d9;
    border-color: #0062cc;
}

.btn-secondary:hover[b-rj0l7fjjgt] {
    background-color: #5a6268;
    border-color: #545b62;
}

@media (max-width: 768px) {
    .date-range-container[b-rj0l7fjjgt] {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/*#region Welcome Message Styles */

.welcome-container[b-rj0l7fjjgt] {
    background-color: #f8f9fa;
    border-left: 3px solid #2c7be5;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 0.5rem;
}

.welcome-grid[b-rj0l7fjjgt] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: flex-start;
}

.welcome-content[b-rj0l7fjjgt] {
    grid-column: 1;
}

.dropdown-column[b-rj0l7fjjgt] {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.welcome-title[b-rj0l7fjjgt] {
    color: #2c7be5;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 600;
}

.welcome-text[b-rj0l7fjjgt] {
    color: #4a4a4a;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.dropdown-header[b-rj0l7fjjgt] {
    font-weight: 600;
    color: #495057;
    font-size: 0.95rem;
}

.dropdown-footer[b-rj0l7fjjgt] {
    font-size: 0.85rem;
    color: #6c757d;
    font-style: italic;
    text-align: center;
}

.dropdown-container[b-rj0l7fjjgt] {
    width: 100%;
}

.dxbs-combo-box[b-rj0l7fjjgt] {
    width: 100% !important;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px 12px;
    background-color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .welcome-grid[b-rj0l7fjjgt] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .dropdown-column[b-rj0l7fjjgt] {
        grid-column: 1;
    }

    .dropdown-header[b-rj0l7fjjgt] {
        text-align: center;
    }
}

/*#endregion */
/* _content/TemisV2_Auth/Components/Pages/StaffCpd_EditEvent.razor.rz.scp.css */
/* Add Event Form Styles */
.event-form-container[b-zl2nq050i0] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.form-section-title[b-zl2nq050i0] {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.form-actions[b-zl2nq050i0] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
}

.validation-message[b-zl2nq050i0] {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.date-range-container[b-zl2nq050i0] {
    display: flex;
    gap: 1rem;
}
/* Ensure buttons match DevExpress styling */
.btn[b-zl2nq050i0] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    width:150px;
}

.btn-primary[b-zl2nq050i0] {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-secondary[b-zl2nq050i0] {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

/* Hover states */
.btn-primary:hover[b-zl2nq050i0] {
    background-color: #0069d9;
    border-color: #0062cc;
}

.btn-secondary:hover[b-zl2nq050i0] {
    background-color: #5a6268;
    border-color: #545b62;
}

@media (max-width: 768px) {
    .date-range-container[b-zl2nq050i0] {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/*#region Welcome Message Styles */

.welcome-container[b-zl2nq050i0] {
    background-color: #f8f9fa;
    border-left: 3px solid #2c7be5;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 0.5rem;
}

.welcome-grid[b-zl2nq050i0] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: flex-start;
}

.welcome-content[b-zl2nq050i0] {
    grid-column: 1;
}

.dropdown-column[b-zl2nq050i0] {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.welcome-title[b-zl2nq050i0] {
    color: #2c7be5;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 600;
}

.welcome-text[b-zl2nq050i0] {
    color: #4a4a4a;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.dropdown-header[b-zl2nq050i0] {
    font-weight: 600;
    color: #495057;
    font-size: 0.95rem;
}

.dropdown-footer[b-zl2nq050i0] {
    font-size: 0.85rem;
    color: #6c757d;
    font-style: italic;
    text-align: center;
}

.dropdown-container[b-zl2nq050i0] {
    width: 100%;
}

.dxbs-combo-box[b-zl2nq050i0] {
    width: 100% !important;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px 12px;
    background-color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .welcome-grid[b-zl2nq050i0] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .dropdown-column[b-zl2nq050i0] {
        grid-column: 1;
    }

    .dropdown-header[b-zl2nq050i0] {
        text-align: center;
    }
}

/*#endregion */
/* _content/TemisV2_Auth/Components/Pages/StaffCpd_ManageExternalParticipants.razor.rz.scp.css */
/* Add Event Form Styles */
.event-form-container[b-ccxf13nc7a] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.form-section-title[b-ccxf13nc7a] {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.form-actions[b-ccxf13nc7a] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
}

.validation-message[b-ccxf13nc7a] {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.date-range-container[b-ccxf13nc7a] {
    display: flex;
    gap: 1rem;
}
/* Ensure buttons match DevExpress styling */
.btn[b-ccxf13nc7a] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    width:150px;
}

.btn-primary[b-ccxf13nc7a] {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-secondary[b-ccxf13nc7a] {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

/* Hover states */
.btn-primary:hover[b-ccxf13nc7a] {
    background-color: #0069d9;
    border-color: #0062cc;
}

.btn-secondary:hover[b-ccxf13nc7a] {
    background-color: #5a6268;
    border-color: #545b62;
}

@media (max-width: 768px) {
    .date-range-container[b-ccxf13nc7a] {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Action buttons container */
.grid-actions[b-ccxf13nc7a] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
    min-height: 40px; /* Match row height */
}

/* Base button style */
.grid-action-btn[b-ccxf13nc7a] {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease-out;
    border: none;
    background: transparent;
    color: inherit;
}

    /* Edit button specific */
    .grid-action-btn.edit-btn[b-ccxf13nc7a] {
        color: #2a7fba; /* Primary blue */
    }

        .grid-action-btn.edit-btn:hover[b-ccxf13nc7a] {
            background-color: rgba(42, 127, 186, 0.1);
            color: #1a6ba3;
        }

    /* Delete button specific */
    .grid-action-btn.delete-btn[b-ccxf13nc7a] {
        color: #dc3545; /* Bootstrap danger red */
    }

        .grid-action-btn.delete-btn:hover[b-ccxf13nc7a] {
            background-color: rgba(220, 53, 69, 0.1);
            color: #c82333;
        }

    /* Icon sizing */
    .grid-action-btn .bi[b-ccxf13nc7a] {
        font-size: 1.1rem;
    }

    /* Disabled state */
    .grid-action-btn:disabled[b-ccxf13nc7a] {
        opacity: 0.5;
        cursor: not-allowed;
        background: transparent !important;
    }
/* _content/TemisV2_Auth/Components/Pages/StaffCpd_ManageStaffParticipants.razor.rz.scp.css */
/* Add Event Form Styles */
.event-form-container[b-6oxxp6o3nj] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.form-section-title[b-6oxxp6o3nj] {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.form-actions[b-6oxxp6o3nj] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
}

.validation-message[b-6oxxp6o3nj] {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.date-range-container[b-6oxxp6o3nj] {
    display: flex;
    gap: 1rem;
}
/* Ensure buttons match DevExpress styling */
.btn[b-6oxxp6o3nj] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    width:150px;
}

.btn-primary[b-6oxxp6o3nj] {
    background-color: #007bff;
    border-color: #007bff;
}

.btn-secondary[b-6oxxp6o3nj] {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

/* Hover states */
.btn-primary:hover[b-6oxxp6o3nj] {
    background-color: #0069d9;
    border-color: #0062cc;
}

.btn-secondary:hover[b-6oxxp6o3nj] {
    background-color: #5a6268;
    border-color: #545b62;
}

@media (max-width: 768px) {
    .date-range-container[b-6oxxp6o3nj] {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Action buttons container */
.grid-actions[b-6oxxp6o3nj] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    align-items: center;
    min-height: 40px; /* Match row height */
}

/* Base button style */
.grid-action-btn[b-6oxxp6o3nj] {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease-out;
    border: none;
    background: transparent;
    color: inherit;
}

    /* Edit button specific */
    .grid-action-btn.edit-btn[b-6oxxp6o3nj] {
        color: #2a7fba; /* Primary blue */
    }

        .grid-action-btn.edit-btn:hover[b-6oxxp6o3nj] {
            background-color: rgba(42, 127, 186, 0.1);
            color: #1a6ba3;
        }

    /* Delete button specific */
    .grid-action-btn.delete-btn[b-6oxxp6o3nj] {
        color: #dc3545; /* Bootstrap danger red */
    }

        .grid-action-btn.delete-btn:hover[b-6oxxp6o3nj] {
            background-color: rgba(220, 53, 69, 0.1);
            color: #c82333;
        }

    /* Icon sizing */
    .grid-action-btn .bi[b-6oxxp6o3nj] {
        font-size: 1.1rem;
    }

    /* Disabled state */
    .grid-action-btn:disabled[b-6oxxp6o3nj] {
        opacity: 0.5;
        cursor: not-allowed;
        background: transparent !important;
    }
/* _content/TemisV2_Auth/Components/Pages/StaffEdit.razor.rz.scp.css */
.headercontainer[b-lcpr4t73wv] {
    background-color: #f5f5f5;
    border-top: 1px solid #c2c2c2;
    border-left: 1px solid #c2c2c2;
    border-right: 1px solid #c2c2c2;
    height: 65px;
    padding: 1rem;
}

.header[b-lcpr4t73wv] {
    float: left;
    width:100%
}


.headersub[b-lcpr4t73wv] {
    float: right;
    width: 20%;
    text-align: right;
}

.email-caption[b-lcpr4t73wv] {
    display: flex;
    align-items: center;
}

.info-icon-btn[b-lcpr4t73wv] {
    color:black;
    padding-left: .25rem;
    padding-right: .25rem;
}

.info-icon[b-lcpr4t73wv] {
    display: inline-block;
    background-color: currentColor;
    width: 16px;
    height: 16px;
    -webkit-mask-image: url('images/icons/info-circle.svg');
    mask-image: url('images/icons/info-circle.svg');
}

.form-layout[b-lcpr4t73wv] {
    padding-left: 2rem;
}

/* container */
.two-columns-grid[b-lcpr4t73wv] {
    width: 100%;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    padding:0.25rem;
}

    /* columns */
    .two-columns-grid > *[b-lcpr4t73wv] {
        padding: 1rem;
    }

@media (max-width: 600.98px) {
    .two-columns-grid[b-lcpr4t73wv] {
        font-size: 0.9em;
        overflow:scroll;
    }
}


.grid-container2[b-lcpr4t73wv] {
    font-size:14px;
    width:95%;
    margin-right: 50px;
    text-align: left;
    background-color: #ffffff;
    height: 200px;
}

.gie[b-lcpr4t73wv] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #ffffff;
}

.gie2[b-lcpr4t73wv] {
    float: left;
    width: 50%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #ffffff;
}

.gie3[b-lcpr4t73wv] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #ffffff;
}

.gio[b-lcpr4t73wv] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #eeeeee;
}

.gio2[b-lcpr4t73wv] {
    float: left;
    width: 50%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #eeeeee;
}

.gio3[b-lcpr4t73wv] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #eeeeee;
}

.details[b-lcpr4t73wv] {
    width:100%;
    font-size:17px;
}

.tabdetails[b-lcpr4t73wv] {
    text-align: left;
    padding: 1rem;
}

.validation[b-lcpr4t73wv] {
    text-align: left;
    padding: 1rem;
    background-color: #ffffff;
}

/* Create three equal columns that floats next to each other */
.tabdetailscolumn[b-lcpr4t73wv] {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.tabdetailsrow[b-lcpr4t73wv]:after {
    content: "";
    display: table;
    clear: both;
}

.gridlayout[b-lcpr4t73wv] {
    /*overflow-y: auto;*/
    /*overflow:scroll;*/
}

.gridlayout-item[b-lcpr4t73wv] {
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
    text-align: center;
    position: relative;
    height:400px;
    z-index: 0;
    display: flex;
    padding: 3rem;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    /*    justify-content: center; */
}

.gridlayout-item-charts[b-lcpr4t73wv] {
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
    text-align: center;
    position: relative;
    z-index: 0;
    display: flex;
    padding: 3rem;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    /*    justify-content: center; */
}

.gridlayout-header[b-lcpr4t73wv]:before {
    background-color: var(--bs-white);
}

.gridlayout-content[b-lcpr4t73wv]:before {
    /* background-color: var(--bs-yellow);*/
    padding: 3rem;
}

.gridlayout-left-side-bar[b-lcpr4t73wv]:before {
    background-color: var(--bs-white);
}

.gridlayout-right-side-bar[b-lcpr4t73wv]:before {
    background-color: var(--bs-info);
}

.gridlayout-footer[b-lcpr4t73wv]:before {
    background-color: var(--bs-blue);
    opacity: 0.5;
}



.grid-wrapper[b-lcpr4t73wv] {
    display: flex;
    flex-direction: column;
}

.fab-container[b-lcpr4t73wv] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    user-select: none;
    position: absolute;
    bottom: 16px;
    right: 16px;
}

.fab[b-lcpr4t73wv] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.35) !important;
}

.flexGrid[b-lcpr4t73wv] {
    flex: auto auto auto;
}

.bi[b-lcpr4t73wv] {
    display: inline-block;
    /*position: relative;*/
    width: 1.65rem;
    height: 1.65rem;
    margin-right: 0.75rem;
    top: 0px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-lcpr4t73wv] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-lcpr4t73wv] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-lcpr4t73wv] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-lcpr4t73wv] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-lcpr4t73wv] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-lcpr4t73wv] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-lcpr4t73wv] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-lcpr4t73wv] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.bi-backpack3-nav-menu[b-lcpr4t73wv] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-houses-nav-menu[b-lcpr4t73wv] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-houses' viewBox='0 0 16 16'%3E%3Cpath d='M5.793 1a1 1 0 0 1 1.414 0l.647.646a.5.5 0 1 1-.708.708L6.5 1.707 2 6.207V12.5a.5.5 0 0 0 .5.5.5.5 0 0 1 0 1A1.5 1.5 0 0 1 1 12.5V7.207l-.146.147a.5.5 0 0 1-.708-.708zm3 1a1 1 0 0 1 1.414 0L12 3.793V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v3.293l1.854 1.853a.5.5 0 0 1-.708.708L15 8.207V13.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 4 13.5V8.207l-.146.147a.5.5 0 1 1-.708-.708zm.707.707L5 7.207V13.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V7.207z'/%3E%3C/svg%3E");
}

.bi-exam-nav-menu[b-lcpr4t73wv] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-file-text' viewBox='0 0 16 16'%3E%3Cpath d='M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1'/%3E%3C/svg%3E");
}

.bi-staff-nav-menu[b-lcpr4t73wv] {
    background-image: url("data:image/svg+xml,%3Csvg fill='white' height='16' width='16' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 511.999 511.999' xml:space='preserve'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E %3Cg%3E %3Cg%3E %3Cpath d='M302.195,11.833H13.049C5.842,11.833,0,17.675,0,24.882v214.289c0,7.207,5.842,13.049,13.049,13.049h283.839 l-34.352-21.329c-2.247-1.396-4.282-3.002-6.109-4.768H26.097V37.93h263.049v126.703c4.01,0.847,7.943,2.39,11.625,4.677 l14.473,8.986V24.882C315.244,17.675,309.402,11.833,302.195,11.833z'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3Cg%3E %3Cg%3E %3Cpath d='M216.857,134.337c-4.352-3.43-10.665-2.685-14.097,1.668c-3.432,4.353-2.686,10.665,1.668,14.097l44.279,34.914 c0.63-1.371,1.34-2.719,2.156-4.034c2.883-4.643,6.649-8.401,10.94-11.206L216.857,134.337z'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3Cg%3E %3Cg%3E %3Ccircle cx='419.71' cy='81.405' r='37.557'%3E%3C/circle%3E %3C/g%3E %3C/g%3E %3Cg%3E %3Cg%3E %3Cpath d='M511.33,173.609c-0.118-23.528-19.355-42.67-42.884-42.67H450.26c-17.831,46.242-11.329,29.381-22.507,58.37l4.709-23.724 c0.346-1.744,0.067-3.555-0.79-5.113l-7.381-13.424l6.551-11.914c0.454-0.826,0.438-1.829-0.041-2.64 c-0.479-0.811-1.352-1.308-2.293-1.308h-17.96c-0.942,0-1.813,0.497-2.293,1.308s-0.495,1.815-0.041,2.64l6.537,11.889 l-7.367,13.4c-0.873,1.589-1.147,3.438-0.77,5.211l5.438,23.675c-3.119-8.087-21.08-52.728-23.255-58.37h-17.83 c-23.529,0-42.766,19.141-42.884,42.67c-0.098,19.565-0.016,3.179-0.17,33.884l-36.702-22.787 c-8.501-5.28-19.674-2.667-24.953,5.836c-5.279,8.503-2.666,19.675,5.836,24.954l64.219,39.873 c12.028,7.47,27.609-1.167,27.68-15.304c0.036-7.091,0.292-57.809,0.334-66.275c0.013-2.092,1.714-3.776,3.805-3.769 c2.089,0.007,3.779,1.703,3.779,3.794c-0.018,87.323-0.394,111.735-0.394,304.606c0,12.01,9.736,21.746,21.746,21.746 s21.746-9.736,21.746-21.746V304.604h9.388v173.817c0,12.01,9.736,21.746,21.746,21.746s21.746-9.736,21.746-21.746l0.008-304.612 c0-1.981,1.604-3.589,3.586-3.595c1.981-0.006,3.595,1.594,3.605,3.577l0.669,133.132c0.05,9.977,8.154,18.03,18.119,18.03 c0.031,0,0.062,0,0.094,0c10.007-0.05,18.081-8.205,18.03-18.212L511.33,173.609z'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E%3C/svg%3E");
}

.bi-temis-icon-nav-menu[b-lcpr4t73wv] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.grid-toolbar-column-chooser[b-lcpr4t73wv] {
    -webkit-mask-image: url("images/icons/column-chooser.svg");
    mask-image: url("images/icons/column-chooser.svg");
}

.grid-toolbar-export[b-lcpr4t73wv] {
    -webkit-mask-image: url("images/icons/export.svg");
    mask-image: url("images/icons/export.svg");
}
/* _content/TemisV2_Auth/Components/Pages/StaffReportingList.razor.rz.scp.css */
.headercontainer[b-8fqtui439i] {
    background-color: #f5f5f5;
    border-top: 1px solid #c2c2c2;
    border-left: 1px solid #c2c2c2;
    border-right: 1px solid #c2c2c2;
    height: 65px;
    padding: 1rem;
}

.headerTitle[b-8fqtui439i] {
    font-size:25px;
}

.header[b-8fqtui439i] {
    float: left;
    width: 75%;
}


.headersub[b-8fqtui439i] {
    display:flex;
    float: right;
    width: 20%;
}

.sub1[b-8fqtui439i], .sub2[b-8fqtui439i] {
    flex: 1; /* This makes both divs take up equal space */

}

.details[b-8fqtui439i] {
    width:100%;
    font-size:17px;
}

.tabdetails[b-8fqtui439i] {
    text-align: left;
    padding: 1rem;
}

.validation[b-8fqtui439i] {
    text-align: left;
    padding: 1rem;
    background-color: #ffffff;
}

/* Create three equal columns that floats next to each other */
.tabdetailscolumn[b-8fqtui439i] {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.tabdetailsrow[b-8fqtui439i]:after {
    content: "";
    display: table;
    clear: both;
}

.gridlayout-item[b-8fqtui439i] {
    font-size: 2em;
    font-weight: 500;
    text-align: center;
    height: 100%;
    text-align: center;
    position: relative;
    z-index: 0;
    display: flex;
    padding: 3rem;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    /*    justify-content: center; */
}

    .gridlayout-item[b-8fqtui439i]:before {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0.4;
    }

.dxbl-grid[b-8fqtui439i]  {
    font-size: 25px;
}


.gridlayout-header[b-8fqtui439i]:before {
    background-color: var(--bs-white);
}

.gridlayout-content[b-8fqtui439i]:before {
    /* background-color: var(--bs-yellow);*/
    padding: 3rem;
}

.gridlayout-left-side-bar[b-8fqtui439i]:before {
    background-color: var(--bs-white);
}

.gridlayout-right-side-bar[b-8fqtui439i]:before {
    background-color: var(--bs-info);
}

.gridlayout-footer[b-8fqtui439i]:before {
    background-color: var(--bs-blue);
    opacity: 0.5;
}

@media (max-width: 600.98px) {
    .gridlayout-item[b-8fqtui439i] {
        font-size: 0.9em;
    }

    .headerTitle[b-8fqtui439i] {
        font-size: 15px;
    }

}

.grid-wrapper[b-8fqtui439i] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fab-container[b-8fqtui439i] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    user-select: none;
    position: absolute;
    bottom: 16px;
    right: 16px;
}

.fab[b-8fqtui439i] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.35) !important;
}

.flexGrid[b-8fqtui439i] {
    flex: 1 1 auto;
    overflow-y: auto;
}

.bi[b-8fqtui439i] {
    display: inline-block;
    /*position: relative;*/
    width: 1.65rem;
    height: 1.65rem;
    margin-right: 0.75rem;
    top: 0px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-8fqtui439i] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-8fqtui439i] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-8fqtui439i] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-8fqtui439i] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-8fqtui439i] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-8fqtui439i] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-8fqtui439i] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-8fqtui439i] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.bi-backpack3-nav-menu[b-8fqtui439i] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-houses-nav-menu[b-8fqtui439i] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-houses' viewBox='0 0 16 16'%3E%3Cpath d='M5.793 1a1 1 0 0 1 1.414 0l.647.646a.5.5 0 1 1-.708.708L6.5 1.707 2 6.207V12.5a.5.5 0 0 0 .5.5.5.5 0 0 1 0 1A1.5 1.5 0 0 1 1 12.5V7.207l-.146.147a.5.5 0 0 1-.708-.708zm3 1a1 1 0 0 1 1.414 0L12 3.793V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v3.293l1.854 1.853a.5.5 0 0 1-.708.708L15 8.207V13.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 4 13.5V8.207l-.146.147a.5.5 0 1 1-.708-.708zm.707.707L5 7.207V13.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V7.207z'/%3E%3C/svg%3E");
}

.bi-exam-nav-menu[b-8fqtui439i] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-file-text' viewBox='0 0 16 16'%3E%3Cpath d='M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1'/%3E%3C/svg%3E");
}

.bi-temis-icon-nav-menu[b-8fqtui439i] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.grid-toolbar-column-chooser[b-8fqtui439i] {
    -webkit-mask-image: url("images/icons/column-chooser.svg");
    mask-image: url("images/icons/column-chooser.svg");
}

.grid-toolbar-export[b-8fqtui439i] {
    -webkit-mask-image: url("images/icons/export.svg");
    mask-image: url("images/icons/export.svg");
}

.tb-icon[b-8fqtui439i] {
    width: 1rem;
    height: 1rem;
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    opacity: 0.7;
}

.tb-icon-settings[b-8fqtui439i] {
    mask-image: url("../images/icons/settings.svg");
    -webkit-mask-image: url("../images/icons/settings.svg");
}

.tb-icon-refresh[b-8fqtui439i] {
    mask-image: url("../images/icons/refresh.svg");
    -webkit-mask-image: url("../images/icons/refresh.svg");
}

.icon-logo[b-8fqtui439i] {
    display: flex;
    height: 20px;
    width: 120px;
    opacity: 0.7;
    background-color: currentColor;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("../images/icons/logo-monochrome.svg");
    -webkit-mask-image: url("../images/icons/logo-monochrome.svg");
}

/* Add this to your CSS file */
@media (max-width: 768px) {
    .desktop-toolbar-items[b-8fqtui439i] {
        display: none !important;
    }

    .mobile-menu-button[b-8fqtui439i] {
        display: block !important;
    }

    dxbl-btn dxbl-btn-primary mobile-menu-button dxbl-btn-standalone[b-8fqtui439i] {
        display: block !important;
        padding: 0 !important;
        min-width: auto !important;
    }

    .mobile-menu-icon svg[b-8fqtui439i] {
        width: 1.5rem;
        height: 1.5rem;
        vertical-align: middle;
    }

}

@media (min-width: 769px) {

    .mobile-menu-container[b-8fqtui439i] {
        position: relative;
        display: none;
    }
    .desktop-toolbar-items[b-8fqtui439i] {
        display: flex !important;
    }

    .mobile-menu-button[b-8fqtui439i] {
        display: none !important;
    }
}



.mobile-menu-dropdown[b-8fqtui439i] {
    position: absolute;
    right: 0;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
    padding: 10px;
    border-radius: 4px;
}

/*#region Welcome Message Styles */

.welcome-container[b-8fqtui439i] {
    background-color: #f8f9fa;
    border-left: 3px solid #2c7be5;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 0.5rem;
}



.welcome-grid[b-8fqtui439i] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: flex-start;
}

.welcome-content[b-8fqtui439i] {
    grid-column: 1;
}

.dropdown-column[b-8fqtui439i] {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.welcome-title[b-8fqtui439i] {
    color: #2c7be5;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 600;
}

.welcome-text[b-8fqtui439i] {
    color: #4a4a4a;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.dropdown-header[b-8fqtui439i] {
    font-weight: 600;
    color: #495057;
    font-size: 0.95rem;
}

.dropdown-footer[b-8fqtui439i] {
    font-size: 0.85rem;
    color: #6c757d;
    font-style: italic;
    text-align: center;
}

.dropdown-container[b-8fqtui439i] {
    width: 100%;
}

.dxbs-combo-box[b-8fqtui439i] {
    width: 100% !important;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px 12px;
    background-color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Responsive adjustments */
@media (min-width: 769px) {

    .dropdowns-container[b-8fqtui439i] {
        background-color: #f8f9fa;
        border-left: 3px solid #fbc800;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 1rem;
        min-height: 225px;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .welcome-grid[b-8fqtui439i] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .dropdown-column[b-8fqtui439i] {
        grid-column: 1;
    }

    .dropdown-header[b-8fqtui439i] {
        text-align: center;
    }

    .dropdowns-container[b-8fqtui439i] {
        background-color: #f8f9fa;
        border-left: 3px solid #fbc800;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
}

/*#endregion */

/* Responsive adjustments for grid*/
@media (max-width: 768px) {
    .mobile-hidden[b-8fqtui439i] {
        display: none !important;
    }
}
/* _content/TemisV2_Auth/Components/Pages/Staffs.razor.rz.scp.css */
.headercontainer[b-0nvwzks3q9] {
    background-color: #f5f5f5;
    border-top: 1px solid #c2c2c2;
    border-left: 1px solid #c2c2c2;
    border-right: 1px solid #c2c2c2;
    height: 65px;
    padding: 1rem;
}

.headerTitle[b-0nvwzks3q9] {
    font-size:25px;
}

.header[b-0nvwzks3q9] {
    float: left;
    width: 85%;
}

.headersub[b-0nvwzks3q9] {
    float: right;
    width: 15%;
    text-align: right;
}

.details[b-0nvwzks3q9] {
    width:100%;
    font-size:17px;
}

.tabdetails[b-0nvwzks3q9] {
    text-align: left;
    padding: 1rem;
}

.validation[b-0nvwzks3q9] {
    text-align: left;
    padding: 1rem;
    background-color: #ffffff;
}

/* Create three equal columns that floats next to each other */
.tabdetailscolumn[b-0nvwzks3q9] {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.tabdetailsrow[b-0nvwzks3q9]:after {
    content: "";
    display: table;
    clear: both;
}

.gridlayout-item[b-0nvwzks3q9] {
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
    height: 100%;
    text-align: center;
    position: relative;
    z-index: 0;
    display: flex;
    padding: 3rem;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    /*    justify-content: center; */
}

    .gridlayout-item[b-0nvwzks3q9]:before {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0.4;
    }

.gridlayout-header[b-0nvwzks3q9]:before {
    background-color: var(--bs-white);
}

.gridlayout-content[b-0nvwzks3q9]:before {
    /* background-color: var(--bs-yellow);*/
    padding: 3rem;
}

.gridlayout-left-side-bar[b-0nvwzks3q9]:before {
    background-color: var(--bs-white);
}

.gridlayout-right-side-bar[b-0nvwzks3q9]:before {
    background-color: var(--bs-info);
}

.gridlayout-footer[b-0nvwzks3q9]:before {
    background-color: var(--bs-blue);
    opacity: 0.5;
}

@media (max-width: 600.98px) {
    .gridlayout-item[b-0nvwzks3q9] {
        font-size: 0.9em;
    }
}

.grid-wrapper[b-0nvwzks3q9] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fab-container[b-0nvwzks3q9] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    user-select: none;
    position: absolute;
    bottom: 16px;
    right: 16px;
}

.fab[b-0nvwzks3q9] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.35) !important;
}

.flexGrid[b-0nvwzks3q9] {
    flex: 1 1 auto;
    overflow-y: auto;
}

.bi[b-0nvwzks3q9] {
    display: inline-block;
    /*position: relative;*/
    width: 1.65rem;
    height: 1.65rem;
    margin-right: 0.75rem;
    top: 0px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-0nvwzks3q9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-0nvwzks3q9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-0nvwzks3q9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-0nvwzks3q9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-0nvwzks3q9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-0nvwzks3q9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-0nvwzks3q9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-0nvwzks3q9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.bi-backpack3-nav-menu[b-0nvwzks3q9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-houses-nav-menu[b-0nvwzks3q9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-houses' viewBox='0 0 16 16'%3E%3Cpath d='M5.793 1a1 1 0 0 1 1.414 0l.647.646a.5.5 0 1 1-.708.708L6.5 1.707 2 6.207V12.5a.5.5 0 0 0 .5.5.5.5 0 0 1 0 1A1.5 1.5 0 0 1 1 12.5V7.207l-.146.147a.5.5 0 0 1-.708-.708zm3 1a1 1 0 0 1 1.414 0L12 3.793V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v3.293l1.854 1.853a.5.5 0 0 1-.708.708L15 8.207V13.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 4 13.5V8.207l-.146.147a.5.5 0 1 1-.708-.708zm.707.707L5 7.207V13.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V7.207z'/%3E%3C/svg%3E");
}

.bi-exam-nav-menu[b-0nvwzks3q9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-file-text' viewBox='0 0 16 16'%3E%3Cpath d='M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1'/%3E%3C/svg%3E");
}

.bi-staff-nav-menu[b-0nvwzks3q9] {
    background-image: url("data:image/svg+xml,%3Csvg fill='black' height='22' width='22' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 511.999 511.999' xml:space='preserve'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E %3Cg%3E %3Cg%3E %3Cpath d='M302.195,11.833H13.049C5.842,11.833,0,17.675,0,24.882v214.289c0,7.207,5.842,13.049,13.049,13.049h283.839 l-34.352-21.329c-2.247-1.396-4.282-3.002-6.109-4.768H26.097V37.93h263.049v126.703c4.01,0.847,7.943,2.39,11.625,4.677 l14.473,8.986V24.882C315.244,17.675,309.402,11.833,302.195,11.833z'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3Cg%3E %3Cg%3E %3Cpath d='M216.857,134.337c-4.352-3.43-10.665-2.685-14.097,1.668c-3.432,4.353-2.686,10.665,1.668,14.097l44.279,34.914 c0.63-1.371,1.34-2.719,2.156-4.034c2.883-4.643,6.649-8.401,10.94-11.206L216.857,134.337z'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3Cg%3E %3Cg%3E %3Ccircle cx='419.71' cy='81.405' r='37.557'%3E%3C/circle%3E %3C/g%3E %3C/g%3E %3Cg%3E %3Cg%3E %3Cpath d='M511.33,173.609c-0.118-23.528-19.355-42.67-42.884-42.67H450.26c-17.831,46.242-11.329,29.381-22.507,58.37l4.709-23.724 c0.346-1.744,0.067-3.555-0.79-5.113l-7.381-13.424l6.551-11.914c0.454-0.826,0.438-1.829-0.041-2.64 c-0.479-0.811-1.352-1.308-2.293-1.308h-17.96c-0.942,0-1.813,0.497-2.293,1.308s-0.495,1.815-0.041,2.64l6.537,11.889 l-7.367,13.4c-0.873,1.589-1.147,3.438-0.77,5.211l5.438,23.675c-3.119-8.087-21.08-52.728-23.255-58.37h-17.83 c-23.529,0-42.766,19.141-42.884,42.67c-0.098,19.565-0.016,3.179-0.17,33.884l-36.702-22.787 c-8.501-5.28-19.674-2.667-24.953,5.836c-5.279,8.503-2.666,19.675,5.836,24.954l64.219,39.873 c12.028,7.47,27.609-1.167,27.68-15.304c0.036-7.091,0.292-57.809,0.334-66.275c0.013-2.092,1.714-3.776,3.805-3.769 c2.089,0.007,3.779,1.703,3.779,3.794c-0.018,87.323-0.394,111.735-0.394,304.606c0,12.01,9.736,21.746,21.746,21.746 s21.746-9.736,21.746-21.746V304.604h9.388v173.817c0,12.01,9.736,21.746,21.746,21.746s21.746-9.736,21.746-21.746l0.008-304.612 c0-1.981,1.604-3.589,3.586-3.595c1.981-0.006,3.595,1.594,3.605,3.577l0.669,133.132c0.05,9.977,8.154,18.03,18.119,18.03 c0.031,0,0.062,0,0.094,0c10.007-0.05,18.081-8.205,18.03-18.212L511.33,173.609z'%3E%3C/path%3E %3C/g%3E %3C/g%3E %3C/g%3E%3C/svg%3E");
}


.bi-temis-icon-nav-menu[b-0nvwzks3q9] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.grid-toolbar-column-chooser[b-0nvwzks3q9] {
    -webkit-mask-image: url("images/icons/column-chooser.svg");
    mask-image: url("images/icons/column-chooser.svg");
}

.grid-toolbar-export[b-0nvwzks3q9] {
    -webkit-mask-image: url("images/icons/export.svg");
    mask-image: url("images/icons/export.svg");
    width: 20px;
}
/* _content/TemisV2_Auth/Components/Pages/StudentAssessments.razor.rz.scp.css */
.headercontainer[b-2qxjoz0gzh] {
    background-color: #f5f5f5;
    border-top: 1px solid #c2c2c2;
    border-left: 1px solid #c2c2c2;
    border-right: 1px solid #c2c2c2;
    height: 65px;
    padding: 1rem;
}

.headerTitle[b-2qxjoz0gzh] {
    font-size:25px;
}

.header[b-2qxjoz0gzh] {
    float: left;
    width: 75%;
}

.headersub[b-2qxjoz0gzh] {
    float: right;
    width: 25%;
    text-align: right;
}

.details[b-2qxjoz0gzh] {
    width:100%;
    font-size:17px;
}

.tabdetails[b-2qxjoz0gzh] {
    text-align: left;
    padding: 1rem;
}

.validation[b-2qxjoz0gzh] {
    text-align: left;
    padding: 1rem;
    background-color: #ffffff;
}

/* Create three equal columns that floats next to each other */
.tabdetailscolumn[b-2qxjoz0gzh] {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.tabdetailsrow[b-2qxjoz0gzh]:after {
    content: "";
    display: table;
    clear: both;
}

.gridlayout-item[b-2qxjoz0gzh] {
    font-size: 2em;
    font-weight: 500;
    text-align: center;
    height: 100%;
    text-align: center;
    position: relative;
    z-index: 0;
    display: flex;
    padding: 3rem;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    /*    justify-content: center; */
}

    .gridlayout-item[b-2qxjoz0gzh]:before {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0.4;
    }

.dxbl-grid[b-2qxjoz0gzh]  {
    font-size: 25px;
}


.gridlayout-header[b-2qxjoz0gzh]:before {
    background-color: var(--bs-white);
}

.gridlayout-content[b-2qxjoz0gzh]:before {
    /* background-color: var(--bs-yellow);*/
    padding: 3rem;
}

.gridlayout-left-side-bar[b-2qxjoz0gzh]:before {
    background-color: var(--bs-white);
}

.gridlayout-right-side-bar[b-2qxjoz0gzh]:before {
    background-color: var(--bs-info);
}

.gridlayout-footer[b-2qxjoz0gzh]:before {
    background-color: var(--bs-blue);
    opacity: 0.5;
}

@media (max-width: 600.98px) {
    .gridlayout-item[b-2qxjoz0gzh] {
        font-size: 0.9em;
    }
}

.grid-wrapper[b-2qxjoz0gzh] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fab-container[b-2qxjoz0gzh] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    user-select: none;
    position: absolute;
    bottom: 16px;
    right: 16px;
}

.fab[b-2qxjoz0gzh] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.35) !important;
}

.flexGrid[b-2qxjoz0gzh] {
    flex: 1 1 auto;
    overflow-y: auto;
}

.bi[b-2qxjoz0gzh] {
    display: inline-block;
    /*position: relative;*/
    width: 1.65rem;
    height: 1.65rem;
    margin-right: 0.75rem;
    top: 0px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-2qxjoz0gzh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-2qxjoz0gzh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-2qxjoz0gzh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-2qxjoz0gzh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-2qxjoz0gzh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-2qxjoz0gzh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-2qxjoz0gzh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-2qxjoz0gzh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.bi-backpack3-nav-menu[b-2qxjoz0gzh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-houses-nav-menu[b-2qxjoz0gzh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-houses' viewBox='0 0 16 16'%3E%3Cpath d='M5.793 1a1 1 0 0 1 1.414 0l.647.646a.5.5 0 1 1-.708.708L6.5 1.707 2 6.207V12.5a.5.5 0 0 0 .5.5.5.5 0 0 1 0 1A1.5 1.5 0 0 1 1 12.5V7.207l-.146.147a.5.5 0 0 1-.708-.708zm3 1a1 1 0 0 1 1.414 0L12 3.793V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v3.293l1.854 1.853a.5.5 0 0 1-.708.708L15 8.207V13.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 4 13.5V8.207l-.146.147a.5.5 0 1 1-.708-.708zm.707.707L5 7.207V13.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V7.207z'/%3E%3C/svg%3E");
}

.bi-exam-nav-menu[b-2qxjoz0gzh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-file-text' viewBox='0 0 16 16'%3E%3Cpath d='M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1'/%3E%3C/svg%3E");
}

.bi-temis-icon-nav-menu[b-2qxjoz0gzh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.grid-toolbar-column-chooser[b-2qxjoz0gzh] {
    -webkit-mask-image: url("images/icons/column-chooser.svg");
    mask-image: url("images/icons/column-chooser.svg");
}

.grid-toolbar-export[b-2qxjoz0gzh] {
    -webkit-mask-image: url("images/icons/export.svg");
    mask-image: url("images/icons/export.svg");
}
/* _content/TemisV2_Auth/Components/Pages/StudentReporting_PDF.razor.rz.scp.css */
.headercontainer[b-g71cnbrkws] {
    background-color: #f5f5f5;
    border-top: 1px solid #c2c2c2;
    border-left: 1px solid #c2c2c2;
    border-right: 1px solid #c2c2c2;
    height: 65px;
    padding: 1rem;
}

.headerTitle[b-g71cnbrkws] {
    font-size:25px;
}

.header[b-g71cnbrkws] {
    float: left;
    width: 75%;
}


.headersub[b-g71cnbrkws] {
    display:flex;
    float: right;
    width: 20%;
}

.sub1[b-g71cnbrkws], .sub2[b-g71cnbrkws] {
    flex: 1; /* This makes both divs take up equal space */

}

.details[b-g71cnbrkws] {
    width:100%;
    font-size:17px;
}

.tabdetails[b-g71cnbrkws] {
    text-align: left;
    padding: 1rem;
}

.validation[b-g71cnbrkws] {
    text-align: left;
    padding: 1rem;
    background-color: #ffffff;
}

/* Create three equal columns that floats next to each other */
.tabdetailscolumn[b-g71cnbrkws] {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.tabdetailsrow[b-g71cnbrkws]:after {
    content: "";
    display: table;
    clear: both;
}

.gridlayout-item[b-g71cnbrkws] {
    font-size: 2em;
    font-weight: 500;
    text-align: center;
    height: 100%;
    text-align: center;
    position: relative;
    z-index: 0;
    display: flex;
    padding: 3rem;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    /*    justify-content: center; */
}

    .gridlayout-item[b-g71cnbrkws]:before {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0.4;
    }

.dxbl-grid[b-g71cnbrkws]  {
    font-size: 25px;
}


.gridlayout-header[b-g71cnbrkws]:before {
    background-color: var(--bs-white);
}

.gridlayout-content[b-g71cnbrkws]:before {
    /* background-color: var(--bs-yellow);*/
    padding: 3rem;
}

.gridlayout-left-side-bar[b-g71cnbrkws]:before {
    background-color: var(--bs-white);
}

.gridlayout-right-side-bar[b-g71cnbrkws]:before {
    background-color: var(--bs-info);
}

.gridlayout-footer[b-g71cnbrkws]:before {
    background-color: var(--bs-blue);
    opacity: 0.5;
}

@media (max-width: 600.98px) {
    .gridlayout-item[b-g71cnbrkws] {
        font-size: 0.9em;
    }

    .headerTitle[b-g71cnbrkws] {
        font-size: 15px;
    }

}

.grid-wrapper[b-g71cnbrkws] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fab-container[b-g71cnbrkws] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    user-select: none;
    position: absolute;
    bottom: 16px;
    right: 16px;
}

.fab[b-g71cnbrkws] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.35) !important;
}

.flexGrid[b-g71cnbrkws] {
    flex: 1 1 auto;
    overflow-y: auto;
}

.bi[b-g71cnbrkws] {
    display: inline-block;
    /*position: relative;*/
    width: 1.65rem;
    height: 1.65rem;
    margin-right: 0.75rem;
    top: 0px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-g71cnbrkws] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-g71cnbrkws] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-g71cnbrkws] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-g71cnbrkws] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-g71cnbrkws] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-g71cnbrkws] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-g71cnbrkws] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-g71cnbrkws] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.bi-backpack3-nav-menu[b-g71cnbrkws] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-houses-nav-menu[b-g71cnbrkws] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-houses' viewBox='0 0 16 16'%3E%3Cpath d='M5.793 1a1 1 0 0 1 1.414 0l.647.646a.5.5 0 1 1-.708.708L6.5 1.707 2 6.207V12.5a.5.5 0 0 0 .5.5.5.5 0 0 1 0 1A1.5 1.5 0 0 1 1 12.5V7.207l-.146.147a.5.5 0 0 1-.708-.708zm3 1a1 1 0 0 1 1.414 0L12 3.793V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v3.293l1.854 1.853a.5.5 0 0 1-.708.708L15 8.207V13.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 4 13.5V8.207l-.146.147a.5.5 0 1 1-.708-.708zm.707.707L5 7.207V13.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V7.207z'/%3E%3C/svg%3E");
}

.bi-exam-nav-menu[b-g71cnbrkws] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-file-text' viewBox='0 0 16 16'%3E%3Cpath d='M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1'/%3E%3C/svg%3E");
}

.bi-temis-icon-nav-menu[b-g71cnbrkws] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.grid-toolbar-column-chooser[b-g71cnbrkws] {
    -webkit-mask-image: url("images/icons/column-chooser.svg");
    mask-image: url("images/icons/column-chooser.svg");
}

.grid-toolbar-export[b-g71cnbrkws] {
    -webkit-mask-image: url("images/icons/export.svg");
    mask-image: url("images/icons/export.svg");
}

.tb-icon[b-g71cnbrkws] {
    width: 1rem;
    height: 1rem;
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    opacity: 0.7;
}

.tb-icon-settings[b-g71cnbrkws] {
    mask-image: url("../images/icons/settings.svg");
    -webkit-mask-image: url("../images/icons/settings.svg");
}

.tb-icon-refresh[b-g71cnbrkws] {
    mask-image: url("../images/icons/refresh.svg");
    -webkit-mask-image: url("../images/icons/refresh.svg");
}

.icon-logo[b-g71cnbrkws] {
    display: flex;
    height: 20px;
    width: 120px;
    opacity: 0.7;
    background-color: currentColor;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("../images/icons/logo-monochrome.svg");
    -webkit-mask-image: url("../images/icons/logo-monochrome.svg");
}

/* Add this to your CSS file */
@media (max-width: 768px) {
    .desktop-toolbar-items[b-g71cnbrkws] {
        display: none !important;
    }

    .mobile-menu-button[b-g71cnbrkws] {
        display: block !important;
    }

    dxbl-btn dxbl-btn-primary mobile-menu-button dxbl-btn-standalone[b-g71cnbrkws] {
        display: block !important;
        padding: 0 !important;
        min-width: auto !important;
    }

    .mobile-menu-icon svg[b-g71cnbrkws] {
        width: 1.5rem;
        height: 1.5rem;
        vertical-align: middle;
    }

}

@media (min-width: 769px) {

    .mobile-menu-container[b-g71cnbrkws] {
        position: relative;
        display: none;
    }
    .desktop-toolbar-items[b-g71cnbrkws] {
        display: flex !important;
    }

    .mobile-menu-button[b-g71cnbrkws] {
        display: none !important;
    }
}



.mobile-menu-dropdown[b-g71cnbrkws] {
    position: absolute;
    right: 0;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
    padding: 10px;
    border-radius: 4px;
}

/*#region Welcome Message Styles */

.welcome-container[b-g71cnbrkws] {
    display: flex;
    align-items: center;
    background-color: #f8f9fa;
    border-left: 3px solid #2c7be5;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 20px;
}



.welcome-grid[b-g71cnbrkws] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: flex-start;
}

.welcome-content[b-g71cnbrkws] {
    grid-column: 1;
}

.dropdown-column[b-g71cnbrkws] {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.welcome-title[b-g71cnbrkws] {
    color: #2c7be5;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 600;
}

.pdf-icon[b-g71cnbrkws] {
    font-size: 2.5rem;
    color: #ED1C24;
    margin-top: 0.25rem; /* Minor vertical adjustment */
    flex-shrink: 0; /* Prevent icon from shrinking */
}

.welcome-header[b-g71cnbrkws] {
    display: flex;
    align-items: flex-start; /* Top-align items */
    gap: 1rem; /* Consistent spacing between icon and text */
}

.welcome-text[b-g71cnbrkws] {
    margin: 0;
    color: #4a4a4a;
    font-size: 1rem;
    line-height: 1.6;
    align-self: center; /* Vertically center text */
}

.dropdown-header[b-g71cnbrkws] {
    display: flex;
    align-items: flex-start; /* Align icon to top of text */
    font-weight: 600;
    color: #495057;
    font-size: 0.95rem;
    gap: 1rem; /* Space between text and icon */
}

.dropdown-footer[b-g71cnbrkws] {
    font-size: 0.85rem;
    color: #6c757d;
    font-style: italic;
    text-align: center;
}

.dropdown-container[b-g71cnbrkws] {
    width: 100%;
}

.dxbs-combo-box[b-g71cnbrkws] {
    width: 100% !important;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px 12px;
    background-color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Responsive adjustments */
@media (min-width: 769px) {

    .dropdowns-container[b-g71cnbrkws] {
        background-color: #f8f9fa;
        border-left: 3px solid #fbc800;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 1rem;
        min-height: 290px;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .welcome-grid[b-g71cnbrkws] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .dropdown-column[b-g71cnbrkws] {
        grid-column: 1;
    }

    .dropdown-header[b-g71cnbrkws] {
        text-align: center;
    }

    .dropdowns-container[b-g71cnbrkws] {
        background-color: #f8f9fa;
        border-left: 3px solid #fbc800;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
}

/*#endregion */

/* Responsive adjustments for grid*/
@media (max-width: 768px) {
    .mobile-hidden[b-g71cnbrkws] {
        display: none !important;
    }
}

/* PDF Button - Red Gradient */
.pdf-button[b-g71cnbrkws] {
    background: linear-gradient(135deg, #e74c3c 0%, #ff6b6b 100%);
    border-left-color: #c0392b;
    border-right: none;
    border-top: none;
    border-bottom: none;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

    .pdf-button:hover[b-g71cnbrkws] {
        background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    .pdf-button i[b-g71cnbrkws] {
        margin-right: 8px;
        font-size: 16px;
    }

/* Download Button - Complementary Style */
.download-button[b-g71cnbrkws] {
    background: linear-gradient(135deg, #2ecc71 0%, #1abc9c 100%);
    border-left-color: #27ae60;
    border-right: none;
    border-top: none;
    border-bottom: none;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    transition: all 0.3s ease;
}

    .download-button:hover[b-g71cnbrkws] {
        background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    .download-button i[b-g71cnbrkws] {
        margin-right: 8px;
        font-size: 16px;
    }

.report-selection-panel[b-g71cnbrkws] {
    padding: 1rem;
    background-color: #f8f9fa;
    border-radius: 4px;
    height: 100%;
}

    .report-selection-panel h3[b-g71cnbrkws] {
        margin-bottom: 1.5rem;
        text-align: center;
        color: #3f51b5;
    }

.report-buttons[b-g71cnbrkws] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.report-btn[b-g71cnbrkws] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    width: 100%;
    text-align: left;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .report-btn:hover[b-g71cnbrkws] {
        background-color: #f0f0f0;
        border-color: #ccc;
    }

    .report-btn i[b-g71cnbrkws] {
        color: #3f51b5;
        width: 1.25rem;
        text-align: center;
    }

    .report-btn span[b-g71cnbrkws] {
        flex-grow: 1;
    }
/* _content/TemisV2_Auth/Components/Pages/Students.razor.rz.scp.css */
.headercontainer[b-kgy13w1knh] {
    background-color: #f5f5f5;
    border-top: 1px solid #c2c2c2;
    border-left: 1px solid #c2c2c2;
    border-right: 1px solid #c2c2c2;
    height: 65px;
    padding: 1rem;
}

.headerTitle[b-kgy13w1knh] {
    font-size:25px;
}

.header[b-kgy13w1knh] {
    float: left;
    width: 85%;
}

.headersub[b-kgy13w1knh] {
    float: right;
    width: 15%;
    text-align: right;
}

.details[b-kgy13w1knh] {
    width:100%;
    font-size:17px;
}

.tabdetails[b-kgy13w1knh] {
    text-align: left;
    padding: 1rem;
}

.validation[b-kgy13w1knh] {
    text-align: left;
    padding: 1rem;
    background-color: #ffffff;
}

/* Create three equal columns that floats next to each other */
.tabdetailscolumn[b-kgy13w1knh] {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.tabdetailsrow[b-kgy13w1knh]:after {
    content: "";
    display: table;
    clear: both;
}

.gridlayout-item[b-kgy13w1knh] {
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
    height: 100%;
    text-align: center;
    position: relative;
    z-index: 0;
    display: flex;
    padding: 3rem;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    /*    justify-content: center; */
}

    .gridlayout-item[b-kgy13w1knh]:before {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0.4;
    }

.gridlayout-header[b-kgy13w1knh]:before {
    background-color: var(--bs-white);
}

.gridlayout-content[b-kgy13w1knh]:before {
    /* background-color: var(--bs-yellow);*/
    padding: 3rem;
}

.gridlayout-left-side-bar[b-kgy13w1knh]:before {
    background-color: var(--bs-white);
}

.gridlayout-right-side-bar[b-kgy13w1knh]:before {
    background-color: var(--bs-info);
}

.gridlayout-footer[b-kgy13w1knh]:before {
    background-color: var(--bs-blue);
    opacity: 0.5;
}

@media (max-width: 600.98px) {
    .gridlayout-item[b-kgy13w1knh] {
        font-size: 0.9em;
    }
}

.grid-wrapper[b-kgy13w1knh] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fab-container[b-kgy13w1knh] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    user-select: none;
    position: absolute;
    bottom: 16px;
    right: 16px;
}

.fab[b-kgy13w1knh] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.35) !important;
}

.flexGrid[b-kgy13w1knh] {
    flex: 1 1 auto;
    overflow-y: auto;
}

.bi[b-kgy13w1knh] {
    display: inline-block;
    /*position: relative;*/
    width: 1.65rem;
    height: 1.65rem;
    margin-right: 0.75rem;
    top: 0px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-kgy13w1knh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-kgy13w1knh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-kgy13w1knh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-kgy13w1knh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-kgy13w1knh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-kgy13w1knh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-kgy13w1knh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-kgy13w1knh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.bi-backpack3-nav-menu[b-kgy13w1knh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-houses-nav-menu[b-kgy13w1knh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-houses' viewBox='0 0 16 16'%3E%3Cpath d='M5.793 1a1 1 0 0 1 1.414 0l.647.646a.5.5 0 1 1-.708.708L6.5 1.707 2 6.207V12.5a.5.5 0 0 0 .5.5.5.5 0 0 1 0 1A1.5 1.5 0 0 1 1 12.5V7.207l-.146.147a.5.5 0 0 1-.708-.708zm3 1a1 1 0 0 1 1.414 0L12 3.793V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v3.293l1.854 1.853a.5.5 0 0 1-.708.708L15 8.207V13.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 4 13.5V8.207l-.146.147a.5.5 0 1 1-.708-.708zm.707.707L5 7.207V13.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V7.207z'/%3E%3C/svg%3E");
}

.bi-exam-nav-menu[b-kgy13w1knh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-file-text' viewBox='0 0 16 16'%3E%3Cpath d='M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1'/%3E%3C/svg%3E");
}

.bi-temis-icon-nav-menu[b-kgy13w1knh] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.grid-toolbar-column-chooser[b-kgy13w1knh] {
    -webkit-mask-image: url("images/icons/column-chooser.svg");
    mask-image: url("images/icons/column-chooser.svg");
}

.grid-toolbar-export[b-kgy13w1knh] {
    -webkit-mask-image: url("images/icons/export.svg");
    mask-image: url("images/icons/export.svg");
}
/* _content/TemisV2_Auth/Components/Pages/StudentsEdit.razor.rz.scp.css */
.headercontainer[b-hd4pswg23o] {
    background-color: #f5f5f5;
    border-top: 1px solid #c2c2c2;
    border-left: 1px solid #c2c2c2;
    border-right: 1px solid #c2c2c2;
    height: 65px;
    padding: 1rem;
}

.header[b-hd4pswg23o] {
    float: left;
    width:100%
}


.headersub[b-hd4pswg23o] {
    float: right;
    width: 20%;
    text-align: right;
}

.email-caption[b-hd4pswg23o] {
    display: flex;
    align-items: center;
}

.info-icon-btn[b-hd4pswg23o] {
    color:black;
    padding-left: .25rem;
    padding-right: .25rem;
}

.info-icon[b-hd4pswg23o] {
    display: inline-block;
    background-color: currentColor;
    width: 16px;
    height: 16px;
    -webkit-mask-image: url('images/icons/info-circle.svg');
    mask-image: url('images/icons/info-circle.svg');
}

.form-layout[b-hd4pswg23o] {
    padding-left: 2rem;
}

/* container */
.two-columns-grid[b-hd4pswg23o] {
    width: 100%;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    padding:0.25rem;
}

    /* columns */
    .two-columns-grid > *[b-hd4pswg23o] {
        padding: 1rem;
    }

@media (max-width: 600.98px) {
    .two-columns-grid[b-hd4pswg23o] {
        font-size: 0.9em;
        overflow:scroll;
    }
}


.grid-container2[b-hd4pswg23o] {
    font-size:14px;
    width:95%;
    margin-right: 50px;
    text-align: left;
    background-color: #ffffff;
    height: 200px;
}

.gie[b-hd4pswg23o] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #ffffff;
}

.gie2[b-hd4pswg23o] {
    float: left;
    width: 50%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #ffffff;
}

.gie3[b-hd4pswg23o] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #ffffff;
}

.gio[b-hd4pswg23o] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #eeeeee;
}

.gio2[b-hd4pswg23o] {
    float: left;
    width: 50%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #eeeeee;
}

.gio3[b-hd4pswg23o] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #eeeeee;
}

.details[b-hd4pswg23o] {
    width:100%;
    font-size:17px;
}

.tabdetails[b-hd4pswg23o] {
    text-align: left;
    padding: 1rem;
}

.validation[b-hd4pswg23o] {
    text-align: left;
    padding: 1rem;
    background-color: #ffffff;
}

/* Create three equal columns that floats next to each other */
.tabdetailscolumn[b-hd4pswg23o] {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.tabdetailsrow[b-hd4pswg23o]:after {
    content: "";
    display: table;
    clear: both;
}

.gridlayout[b-hd4pswg23o] {
    /*overflow-y: auto;*/
    /*overflow:scroll;*/
}

.gridlayout-item[b-hd4pswg23o] {
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
    text-align: center;
    position: relative;
    height:400px;
    z-index: 0;
    display: flex;
    padding: 3rem;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    /*    justify-content: center; */
}

.gridlayout-item-charts[b-hd4pswg23o] {
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
    text-align: center;
    position: relative;
    z-index: 0;
    display: flex;
    padding: 3rem;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    /*    justify-content: center; */
}

.gridlayout-header[b-hd4pswg23o]:before {
    background-color: var(--bs-white);
}

.gridlayout-content[b-hd4pswg23o]:before {
    /* background-color: var(--bs-yellow);*/
    padding: 3rem;
}

.gridlayout-left-side-bar[b-hd4pswg23o]:before {
    background-color: var(--bs-white);
}

.gridlayout-right-side-bar[b-hd4pswg23o]:before {
    background-color: var(--bs-info);
}

.gridlayout-footer[b-hd4pswg23o]:before {
    background-color: var(--bs-blue);
    opacity: 0.5;
}



.grid-wrapper[b-hd4pswg23o] {
    display: flex;
    flex-direction: column;
}

.fab-container[b-hd4pswg23o] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    user-select: none;
    position: absolute;
    bottom: 16px;
    right: 16px;
}

.fab[b-hd4pswg23o] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.35) !important;
}

.flexGrid[b-hd4pswg23o] {
    flex: auto auto auto;
}

.bi[b-hd4pswg23o] {
    display: inline-block;
    /*position: relative;*/
    width: 1.65rem;
    height: 1.65rem;
    margin-right: 0.75rem;
    top: 0px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-hd4pswg23o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-hd4pswg23o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-hd4pswg23o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-hd4pswg23o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-hd4pswg23o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-hd4pswg23o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-hd4pswg23o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-hd4pswg23o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.bi-backpack3-nav-menu[b-hd4pswg23o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-houses-nav-menu[b-hd4pswg23o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-houses' viewBox='0 0 16 16'%3E%3Cpath d='M5.793 1a1 1 0 0 1 1.414 0l.647.646a.5.5 0 1 1-.708.708L6.5 1.707 2 6.207V12.5a.5.5 0 0 0 .5.5.5.5 0 0 1 0 1A1.5 1.5 0 0 1 1 12.5V7.207l-.146.147a.5.5 0 0 1-.708-.708zm3 1a1 1 0 0 1 1.414 0L12 3.793V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v3.293l1.854 1.853a.5.5 0 0 1-.708.708L15 8.207V13.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 4 13.5V8.207l-.146.147a.5.5 0 1 1-.708-.708zm.707.707L5 7.207V13.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V7.207z'/%3E%3C/svg%3E");
}

.bi-exam-nav-menu[b-hd4pswg23o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-file-text' viewBox='0 0 16 16'%3E%3Cpath d='M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1'/%3E%3C/svg%3E");
}

.bi-temis-icon-nav-menu[b-hd4pswg23o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.grid-toolbar-column-chooser[b-hd4pswg23o] {
    -webkit-mask-image: url("images/icons/column-chooser.svg");
    mask-image: url("images/icons/column-chooser.svg");
}

.grid-toolbar-export[b-hd4pswg23o] {
    -webkit-mask-image: url("images/icons/export.svg");
    mask-image: url("images/icons/export.svg");
}
/* _content/TemisV2_Auth/Components/Pages/StudentsEditDisability.razor.rz.scp.css */
.headercontainer[b-7kw3zpw8uq] {
    background-color: #f5f5f5;
    border-top: 1px solid #c2c2c2;
    border-left: 1px solid #c2c2c2;
    border-right: 1px solid #c2c2c2;
    height: 65px;
    padding: 1rem;
}

.header[b-7kw3zpw8uq] {
    float: left;
    width:100%
}


.headersub[b-7kw3zpw8uq] {
    float: right;
    width: 20%;
    text-align: right;
}

.email-caption[b-7kw3zpw8uq] {
    display: flex;
    align-items: center;
}

.info-icon-btn[b-7kw3zpw8uq] {
    color:black;
    padding-left: .25rem;
    padding-right: .25rem;
}

.info-icon[b-7kw3zpw8uq] {
    display: inline-block;
    background-color: currentColor;
    width: 16px;
    height: 16px;
    -webkit-mask-image: url('images/icons/info-circle.svg');
    mask-image: url('images/icons/info-circle.svg');
}

.form-layout[b-7kw3zpw8uq] {
    padding-left: 2rem;
}

/* container */
.two-columns-grid[b-7kw3zpw8uq] {
    width: 100%;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    padding:0.25rem;
}

.info-button[b-7kw3zpw8uq] {   
    padding: 0.25rem;
}

    /* columns */
    .two-columns-grid > *[b-7kw3zpw8uq] {
        padding: 1rem;
    }

@media (max-width: 600.98px) {
    .two-columns-grid[b-7kw3zpw8uq] {
        font-size: 0.9em;
        overflow:scroll;
    }
}


.grid-container2[b-7kw3zpw8uq] {
    font-size:14px;
    width:95%;
    margin-right: 50px;
    text-align: left;
    background-color: #ffffff;
    height: 200px;
}

.gie[b-7kw3zpw8uq] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #ffffff;
}

.gie2[b-7kw3zpw8uq] {
    float: left;
    width: 50%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #ffffff;
}

.gie3[b-7kw3zpw8uq] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #ffffff;
}

.gio[b-7kw3zpw8uq] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #eeeeee;
}

.gio2[b-7kw3zpw8uq] {
    float: left;
    width: 50%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #eeeeee;
}

.gio3[b-7kw3zpw8uq] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #eeeeee;
}

.details[b-7kw3zpw8uq] {
    width:100%;
    font-size:17px;
}

.tabdetails[b-7kw3zpw8uq] {
    text-align: left;
    padding: 1rem;
}

.validation[b-7kw3zpw8uq] {
    text-align: left;
    padding: 1rem;
    background-color: #ffffff;
}

/* Create three equal columns that floats next to each other */
.tabdetailscolumn[b-7kw3zpw8uq] {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.tabdetailsrow[b-7kw3zpw8uq]:after {
    content: "";
    display: table;
    clear: both;
}

.gridlayout[b-7kw3zpw8uq] {
    /*overflow-y: auto;*/
    /*overflow:scroll;*/
}

.gridlayout-item[b-7kw3zpw8uq] {
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
    text-align: center;
    position: relative;
    height:400px;
    z-index: 0;
    display: flex;
    padding: 3rem;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    /*    justify-content: center; */
}

.gridlayout-item-charts[b-7kw3zpw8uq] {
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
    text-align: center;
    position: relative;
    z-index: 0;
    display: flex;
    padding: 3rem;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    /*    justify-content: center; */
}

.gridlayout-header[b-7kw3zpw8uq]:before {
    background-color: var(--bs-white);
}

.gridlayout-content[b-7kw3zpw8uq]:before {
    /* background-color: var(--bs-yellow);*/
    padding: 3rem;
}

.gridlayout-left-side-bar[b-7kw3zpw8uq]:before {
    background-color: var(--bs-white);
}

.gridlayout-right-side-bar[b-7kw3zpw8uq]:before {
    background-color: var(--bs-info);
}

.gridlayout-footer[b-7kw3zpw8uq]:before {
    background-color: var(--bs-blue);
    opacity: 0.5;
}



.grid-wrapper[b-7kw3zpw8uq] {
    display: flex;
    flex-direction: column;
}

.fab-container[b-7kw3zpw8uq] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    user-select: none;
    position: absolute;
    bottom: 16px;
    right: 16px;
}

.fab[b-7kw3zpw8uq] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.35) !important;
}

.flexGrid[b-7kw3zpw8uq] {
    flex: auto auto auto;
}

.bi[b-7kw3zpw8uq] {
    display: inline-block;
    /*position: relative;*/
    width: 1.65rem;
    height: 1.65rem;
    margin-right: 0.75rem;
    top: 0px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-7kw3zpw8uq] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-7kw3zpw8uq] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-7kw3zpw8uq] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-7kw3zpw8uq] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-7kw3zpw8uq] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-7kw3zpw8uq] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-7kw3zpw8uq] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-7kw3zpw8uq] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.bi-backpack3-nav-menu[b-7kw3zpw8uq] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-houses-nav-menu[b-7kw3zpw8uq] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-houses' viewBox='0 0 16 16'%3E%3Cpath d='M5.793 1a1 1 0 0 1 1.414 0l.647.646a.5.5 0 1 1-.708.708L6.5 1.707 2 6.207V12.5a.5.5 0 0 0 .5.5.5.5 0 0 1 0 1A1.5 1.5 0 0 1 1 12.5V7.207l-.146.147a.5.5 0 0 1-.708-.708zm3 1a1 1 0 0 1 1.414 0L12 3.793V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v3.293l1.854 1.853a.5.5 0 0 1-.708.708L15 8.207V13.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 4 13.5V8.207l-.146.147a.5.5 0 1 1-.708-.708zm.707.707L5 7.207V13.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V7.207z'/%3E%3C/svg%3E");
}

.bi-exam-nav-menu[b-7kw3zpw8uq] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-file-text' viewBox='0 0 16 16'%3E%3Cpath d='M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1'/%3E%3C/svg%3E");
}

.bi-temis-icon-nav-menu[b-7kw3zpw8uq] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.grid-toolbar-column-chooser[b-7kw3zpw8uq] {
    -webkit-mask-image: url("images/icons/column-chooser.svg");
    mask-image: url("images/icons/column-chooser.svg");
}

.grid-toolbar-export[b-7kw3zpw8uq] {
    -webkit-mask-image: url("images/icons/export.svg");
    mask-image: url("images/icons/export.svg");
}
/* _content/TemisV2_Auth/Components/Pages/StudentsIndicators.razor.rz.scp.css */
.headercontainer[b-b6fj50b221] {
    background-color: #f5f5f5;
    border-top: 1px solid #c2c2c2;
    border-left: 1px solid #c2c2c2;
    border-right: 1px solid #c2c2c2;
    height: 65px;
    padding: 1rem;
}

.header[b-b6fj50b221] {
    float: left;
    width: 75%
}

.headersub[b-b6fj50b221] {
    float: right;
    width: 20%;
    text-align: right;
}

/* container */
.two-columns-grid[b-b6fj50b221] {
    width: 100%;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    padding: 0.25rem;
}

.details[b-b6fj50b221] {
    width:100%;
    font-size:17px;
}

.tabdetails[b-b6fj50b221] {
    text-align: left;
    padding: 1rem;
}

.validation[b-b6fj50b221] {
    text-align: left;
    padding: 1rem;
    background-color: #ffffff;
}

/* Create three equal columns that floats next to each other */
.tabdetailscolumn[b-b6fj50b221] {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.tabdetailsrow[b-b6fj50b221]:after {
    content: "";
    display: table;
    clear: both;
}

.gridlayout-item[b-b6fj50b221] {
    font-size: 2em;
    font-weight: 500;
    text-align: center;
    height: 100%;
    text-align: center;
    position: relative;
    z-index: 0;
    display: flex;
    padding: 3rem;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    /*    justify-content: center; */
}

    .gridlayout-item[b-b6fj50b221]:before {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0.4;
    }

.dxbl-grid[b-b6fj50b221]  {
    font-size: 25px;
}


.gridlayout-header[b-b6fj50b221]:before {
    background-color: var(--bs-white);
}

.gridlayout-content[b-b6fj50b221]:before {
    /* background-color: var(--bs-yellow);*/
    padding: 3rem;
}

.gridlayout-left-side-bar[b-b6fj50b221]:before {
    background-color: var(--bs-white);
}

.gridlayout-right-side-bar[b-b6fj50b221]:before {
    background-color: var(--bs-info);
}

.gridlayout-footer[b-b6fj50b221]:before {
    background-color: var(--bs-blue);
    opacity: 0.5;
}

@media (max-width: 600.98px) {
    .gridlayout-item[b-b6fj50b221] {
        font-size: 0.9em;
    }
}


.grid-wrapper[b-b6fj50b221] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fab-container[b-b6fj50b221] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    user-select: none;
    position: absolute;
    bottom: 16px;
    right: 16px;
}

.fab[b-b6fj50b221] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.35) !important;
}

.flexGrid[b-b6fj50b221] {
    flex: 1 1 auto;
    overflow-y: auto;
}

.bi[b-b6fj50b221] {
    display: inline-block;
    /*position: relative;*/
    width: 1.65rem;
    height: 1.65rem;
    margin-right: 0.75rem;
    top: 0px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-b6fj50b221] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-b6fj50b221] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-b6fj50b221] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-b6fj50b221] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-b6fj50b221] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-b6fj50b221] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-b6fj50b221] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-b6fj50b221] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.bi-backpack3-nav-menu[b-b6fj50b221] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-houses-nav-menu[b-b6fj50b221] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-houses' viewBox='0 0 16 16'%3E%3Cpath d='M5.793 1a1 1 0 0 1 1.414 0l.647.646a.5.5 0 1 1-.708.708L6.5 1.707 2 6.207V12.5a.5.5 0 0 0 .5.5.5.5 0 0 1 0 1A1.5 1.5 0 0 1 1 12.5V7.207l-.146.147a.5.5 0 0 1-.708-.708zm3 1a1 1 0 0 1 1.414 0L12 3.793V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v3.293l1.854 1.853a.5.5 0 0 1-.708.708L15 8.207V13.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 4 13.5V8.207l-.146.147a.5.5 0 1 1-.708-.708zm.707.707L5 7.207V13.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V7.207z'/%3E%3C/svg%3E");
}

.bi-exam-nav-menu[b-b6fj50b221] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-file-text' viewBox='0 0 16 16'%3E%3Cpath d='M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1'/%3E%3C/svg%3E");
}

.bi-temis-icon-nav-menu[b-b6fj50b221] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.grid-toolbar-column-chooser[b-b6fj50b221] {
    -webkit-mask-image: url("images/icons/column-chooser.svg");
    mask-image: url("images/icons/column-chooser.svg");
}

.grid-toolbar-export[b-b6fj50b221] {
    -webkit-mask-image: url("images/icons/export.svg");
    mask-image: url("images/icons/export.svg");
}
/* _content/TemisV2_Auth/Components/Pages/StudentsReportingList.razor.rz.scp.css */
.headercontainer[b-ojm7hfea23] {
    background-color: #f5f5f5;
    border-top: 1px solid #c2c2c2;
    border-left: 1px solid #c2c2c2;
    border-right: 1px solid #c2c2c2;
    height: 65px;
    padding: 1rem;
}

.headerTitle[b-ojm7hfea23] {
    font-size:25px;
}

.header[b-ojm7hfea23] {
    float: left;
    width: 75%;
}


.headersub[b-ojm7hfea23] {
    display:flex;
    float: right;
    width: 20%;
}

.sub1[b-ojm7hfea23], .sub2[b-ojm7hfea23] {
    flex: 1; /* This makes both divs take up equal space */

}

.details[b-ojm7hfea23] {
    width:100%;
    font-size:17px;
}

.tabdetails[b-ojm7hfea23] {
    text-align: left;
    padding: 1rem;
}

.validation[b-ojm7hfea23] {
    text-align: left;
    padding: 1rem;
    background-color: #ffffff;
}

/* Create three equal columns that floats next to each other */
.tabdetailscolumn[b-ojm7hfea23] {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.tabdetailsrow[b-ojm7hfea23]:after {
    content: "";
    display: table;
    clear: both;
}

.gridlayout-item[b-ojm7hfea23] {
    font-size: 2em;
    font-weight: 500;
    text-align: center;
    height: 100%;
    text-align: center;
    position: relative;
    z-index: 0;
    display: flex;
    padding: 3rem;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    /*    justify-content: center; */
}

    .gridlayout-item[b-ojm7hfea23]:before {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        opacity: 0.4;
    }

.dxbl-grid[b-ojm7hfea23]  {
    font-size: 25px;
}


.gridlayout-header[b-ojm7hfea23]:before {
    background-color: var(--bs-white);
}

.gridlayout-content[b-ojm7hfea23]:before {
    /* background-color: var(--bs-yellow);*/
    padding: 3rem;
}

.gridlayout-left-side-bar[b-ojm7hfea23]:before {
    background-color: var(--bs-white);
}

.gridlayout-right-side-bar[b-ojm7hfea23]:before {
    background-color: var(--bs-info);
}

.gridlayout-footer[b-ojm7hfea23]:before {
    background-color: var(--bs-blue);
    opacity: 0.5;
}

@media (max-width: 600.98px) {
    .gridlayout-item[b-ojm7hfea23] {
        font-size: 0.9em;
    }

    .headerTitle[b-ojm7hfea23] {
        font-size: 15px;
    }

}

.grid-wrapper[b-ojm7hfea23] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fab-container[b-ojm7hfea23] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    user-select: none;
    position: absolute;
    bottom: 16px;
    right: 16px;
}

.fab[b-ojm7hfea23] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.35) !important;
}

.flexGrid[b-ojm7hfea23] {
    flex: 1 1 auto;
    overflow-y: auto;
}

.bi[b-ojm7hfea23] {
    display: inline-block;
    /*position: relative;*/
    width: 1.65rem;
    height: 1.65rem;
    margin-right: 0.75rem;
    top: 0px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-ojm7hfea23] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-ojm7hfea23] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-ojm7hfea23] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-ojm7hfea23] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-ojm7hfea23] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-ojm7hfea23] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-ojm7hfea23] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-ojm7hfea23] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.bi-backpack3-nav-menu[b-ojm7hfea23] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-houses-nav-menu[b-ojm7hfea23] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-houses' viewBox='0 0 16 16'%3E%3Cpath d='M5.793 1a1 1 0 0 1 1.414 0l.647.646a.5.5 0 1 1-.708.708L6.5 1.707 2 6.207V12.5a.5.5 0 0 0 .5.5.5.5 0 0 1 0 1A1.5 1.5 0 0 1 1 12.5V7.207l-.146.147a.5.5 0 0 1-.708-.708zm3 1a1 1 0 0 1 1.414 0L12 3.793V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v3.293l1.854 1.853a.5.5 0 0 1-.708.708L15 8.207V13.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 4 13.5V8.207l-.146.147a.5.5 0 1 1-.708-.708zm.707.707L5 7.207V13.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V7.207z'/%3E%3C/svg%3E");
}

.bi-exam-nav-menu[b-ojm7hfea23] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-file-text' viewBox='0 0 16 16'%3E%3Cpath d='M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1'/%3E%3C/svg%3E");
}

.bi-temis-icon-nav-menu[b-ojm7hfea23] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.grid-toolbar-column-chooser[b-ojm7hfea23] {
    -webkit-mask-image: url("images/icons/column-chooser.svg");
    mask-image: url("images/icons/column-chooser.svg");
}

.grid-toolbar-export[b-ojm7hfea23] {
    -webkit-mask-image: url("images/icons/export.svg");
    mask-image: url("images/icons/export.svg");
}

.tb-icon[b-ojm7hfea23] {
    width: 1rem;
    height: 1rem;
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    opacity: 0.7;
}

.tb-icon-settings[b-ojm7hfea23] {
    mask-image: url("../images/icons/settings.svg");
    -webkit-mask-image: url("../images/icons/settings.svg");
}

.tb-icon-refresh[b-ojm7hfea23] {
    mask-image: url("../images/icons/refresh.svg");
    -webkit-mask-image: url("../images/icons/refresh.svg");
}

.icon-logo[b-ojm7hfea23] {
    display: flex;
    height: 20px;
    width: 120px;
    opacity: 0.7;
    background-color: currentColor;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-image: url("../images/icons/logo-monochrome.svg");
    -webkit-mask-image: url("../images/icons/logo-monochrome.svg");
}

/* Add this to your CSS file */
@media (max-width: 768px) {
    .desktop-toolbar-items[b-ojm7hfea23] {
        display: none !important;
    }

    .mobile-menu-button[b-ojm7hfea23] {
        display: block !important;
    }

    dxbl-btn dxbl-btn-primary mobile-menu-button dxbl-btn-standalone[b-ojm7hfea23] {
        display: block !important;
        padding: 0 !important;
        min-width: auto !important;
    }

    .mobile-menu-icon svg[b-ojm7hfea23] {
        width: 1.5rem;
        height: 1.5rem;
        vertical-align: middle;
    }

}

@media (min-width: 769px) {

    .mobile-menu-container[b-ojm7hfea23] {
        position: relative;
        display: none;
    }
    .desktop-toolbar-items[b-ojm7hfea23] {
        display: flex !important;
    }

    .mobile-menu-button[b-ojm7hfea23] {
        display: none !important;
    }
}



.mobile-menu-dropdown[b-ojm7hfea23] {
    position: absolute;
    right: 0;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1000;
    padding: 10px;
    border-radius: 4px;
}

/*#region Welcome Message Styles */

.welcome-container[b-ojm7hfea23] {
    background-color: #f8f9fa;
    border-left: 3px solid #2c7be5;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 0.5rem;
}



.welcome-grid[b-ojm7hfea23] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: flex-start;
}

.welcome-content[b-ojm7hfea23] {
    grid-column: 1;
}

.dropdown-column[b-ojm7hfea23] {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.welcome-title[b-ojm7hfea23] {
    color: #2c7be5;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 600;
}

.welcome-text[b-ojm7hfea23] {
    color: #4a4a4a;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.dropdown-header[b-ojm7hfea23] {
    font-weight: 600;
    color: #495057;
    font-size: 0.95rem;
}

.dropdown-footer[b-ojm7hfea23] {
    font-size: 0.85rem;
    color: #6c757d;
    font-style: italic;
    text-align: center;
}

.dropdown-container[b-ojm7hfea23] {
    width: 100%;
}

.dxbs-combo-box[b-ojm7hfea23] {
    width: 100% !important;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px 12px;
    background-color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Responsive adjustments */
@media (min-width: 769px) {

    .dropdowns-container[b-ojm7hfea23] {
        background-color: #f8f9fa;
        border-left: 3px solid #fbc800;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 1rem;
        min-height: 225px;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .welcome-grid[b-ojm7hfea23] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .dropdown-column[b-ojm7hfea23] {
        grid-column: 1;
    }

    .dropdown-header[b-ojm7hfea23] {
        text-align: center;
    }

    .dropdowns-container[b-ojm7hfea23] {
        background-color: #f8f9fa;
        border-left: 3px solid #fbc800;
        border-radius: 8px;
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
}

/*#endregion */

/* Responsive adjustments for grid*/
@media (max-width: 768px) {
    .mobile-hidden[b-ojm7hfea23] {
        display: none !important;
    }
}
/* _content/TemisV2_Auth/Components/Pages/StudentsSgcaEdit.razor.rz.scp.css */
.headercontainer[b-prfdy7hq1y] {
    background-color: #f5f5f5;
    border-top: 1px solid #c2c2c2;
    border-left: 1px solid #c2c2c2;
    border-right: 1px solid #c2c2c2;
    height: 65px;
    padding: 1rem;
}

.header[b-prfdy7hq1y] {
    float: left;
    width:100%
}


.headersub[b-prfdy7hq1y] {
    float: right;
    width: 20%;
    text-align: right;
}

.email-caption[b-prfdy7hq1y] {
    display: flex;
    align-items: center;
}

.info-icon-btn[b-prfdy7hq1y] {
    color:black;
    padding-left: .25rem;
    padding-right: .25rem;
}

.info-icon[b-prfdy7hq1y] {
    display: inline-block;
    background-color: currentColor;
    width: 16px;
    height: 16px;
    -webkit-mask-image: url('images/icons/info-circle.svg');
    mask-image: url('images/icons/info-circle.svg');
}

.form-layout[b-prfdy7hq1y] {
    padding-left: 2rem;
}

/* container */
.two-columns-grid[b-prfdy7hq1y] {
    width: 100%;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    padding:0.25rem;
}

    /* columns */
    .two-columns-grid > *[b-prfdy7hq1y] {
        padding: 1rem;
    }

@media (max-width: 600.98px) {
    .two-columns-grid[b-prfdy7hq1y] {
        font-size: 0.9em;
        overflow:scroll;
    }
}


.grid-container2[b-prfdy7hq1y] {
    font-size:14px;
    width:95%;
    margin-right: 50px;
    text-align: left;
    background-color: #ffffff;
    height: 200px;
}

.gie[b-prfdy7hq1y] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #ffffff;
}

.gie2[b-prfdy7hq1y] {
    float: left;
    width: 50%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #ffffff;
}

.gie3[b-prfdy7hq1y] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #ffffff;
}

.gio[b-prfdy7hq1y] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #eeeeee;
}

.gio2[b-prfdy7hq1y] {
    float: left;
    width: 50%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #eeeeee;
}

.gio3[b-prfdy7hq1y] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #eeeeee;
}

.details[b-prfdy7hq1y] {
    width:100%;
    font-size:17px;
}

.tabdetails[b-prfdy7hq1y] {
    text-align: left;
    padding: 1rem;
}

.validation[b-prfdy7hq1y] {
    text-align: left;
    padding: 1rem;
    background-color: #ffffff;
}

/* Create three equal columns that floats next to each other */
.tabdetailscolumn[b-prfdy7hq1y] {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.tabdetailsrow[b-prfdy7hq1y]:after {
    content: "";
    display: table;
    clear: both;
}

.gridlayout[b-prfdy7hq1y] {
    /*overflow-y: auto;*/
    /*overflow:scroll;*/
}

.gridlayout-item[b-prfdy7hq1y] {
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
    text-align: center;
    position: relative;
    height:400px;
    z-index: 0;
    display: flex;
    padding: 3rem;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    /*    justify-content: center; */
}

.gridlayout-item-charts[b-prfdy7hq1y] {
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
    text-align: center;
    position: relative;
    z-index: 0;
    display: flex;
    padding: 3rem;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    /*    justify-content: center; */
}

.gridlayout-header[b-prfdy7hq1y]:before {
    background-color: var(--bs-white);
}

.gridlayout-content[b-prfdy7hq1y]:before {
    /* background-color: var(--bs-yellow);*/
    padding: 3rem;
}

.gridlayout-left-side-bar[b-prfdy7hq1y]:before {
    background-color: var(--bs-white);
}

.gridlayout-right-side-bar[b-prfdy7hq1y]:before {
    background-color: var(--bs-info);
}

.gridlayout-footer[b-prfdy7hq1y]:before {
    background-color: var(--bs-blue);
    opacity: 0.5;
}



.grid-wrapper[b-prfdy7hq1y] {
    display: flex;
    flex-direction: column;
}

.fab-container[b-prfdy7hq1y] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    user-select: none;
    position: absolute;
    bottom: 16px;
    right: 16px;
}

.fab[b-prfdy7hq1y] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.35) !important;
}

.flexGrid[b-prfdy7hq1y] {
    flex: auto auto auto;
}

.bi[b-prfdy7hq1y] {
    display: inline-block;
    /*position: relative;*/
    width: 1.65rem;
    height: 1.65rem;
    margin-right: 0.75rem;
    top: 0px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-prfdy7hq1y] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-prfdy7hq1y] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-prfdy7hq1y] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-prfdy7hq1y] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-prfdy7hq1y] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-prfdy7hq1y] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-prfdy7hq1y] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-prfdy7hq1y] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.bi-backpack3-nav-menu[b-prfdy7hq1y] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-houses-nav-menu[b-prfdy7hq1y] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-houses' viewBox='0 0 16 16'%3E%3Cpath d='M5.793 1a1 1 0 0 1 1.414 0l.647.646a.5.5 0 1 1-.708.708L6.5 1.707 2 6.207V12.5a.5.5 0 0 0 .5.5.5.5 0 0 1 0 1A1.5 1.5 0 0 1 1 12.5V7.207l-.146.147a.5.5 0 0 1-.708-.708zm3 1a1 1 0 0 1 1.414 0L12 3.793V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v3.293l1.854 1.853a.5.5 0 0 1-.708.708L15 8.207V13.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 4 13.5V8.207l-.146.147a.5.5 0 1 1-.708-.708zm.707.707L5 7.207V13.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V7.207z'/%3E%3C/svg%3E");
}

.bi-exam-nav-menu[b-prfdy7hq1y] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-file-text' viewBox='0 0 16 16'%3E%3Cpath d='M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1'/%3E%3C/svg%3E");
}

.bi-temis-icon-nav-menu[b-prfdy7hq1y] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.grid-toolbar-column-chooser[b-prfdy7hq1y] {
    -webkit-mask-image: url("images/icons/column-chooser.svg");
    mask-image: url("images/icons/column-chooser.svg");
}

.grid-toolbar-export[b-prfdy7hq1y] {
    -webkit-mask-image: url("images/icons/export.svg");
    mask-image: url("images/icons/export.svg");
}
/* _content/TemisV2_Auth/Components/Pages/StudentsTgcaEdit.razor.rz.scp.css */
.headercontainer[b-omuuj8mt4q] {
    background-color: #f5f5f5;
    border-top: 1px solid #c2c2c2;
    border-left: 1px solid #c2c2c2;
    border-right: 1px solid #c2c2c2;
    height: 65px;
    padding: 1rem;
}

.header[b-omuuj8mt4q] {
    float: left;
    width:100%
}


.headersub[b-omuuj8mt4q] {
    float: right;
    width: 20%;
    text-align: right;
}

.email-caption[b-omuuj8mt4q] {
    display: flex;
    align-items: center;
}

.info-icon-btn[b-omuuj8mt4q] {
    color:black;
    padding-left: .25rem;
    padding-right: .25rem;
}

.info-icon[b-omuuj8mt4q] {
    display: inline-block;
    background-color: currentColor;
    width: 16px;
    height: 16px;
    -webkit-mask-image: url('images/icons/info-circle.svg');
    mask-image: url('images/icons/info-circle.svg');
}

.form-layout[b-omuuj8mt4q] {
    padding-left: 2rem;
}

/* container */
.two-columns-grid[b-omuuj8mt4q] {
    width: 100%;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    padding:0.25rem;
}

    /* columns */
    .two-columns-grid > *[b-omuuj8mt4q] {
        padding: 1rem;
    }

@media (max-width: 600.98px) {
    .two-columns-grid[b-omuuj8mt4q] {
        font-size: 0.9em;
        overflow:scroll;
    }
}


.grid-container2[b-omuuj8mt4q] {
    font-size:14px;
    width:95%;
    margin-right: 50px;
    text-align: left;
    background-color: #ffffff;
    height: 200px;
}

.gie[b-omuuj8mt4q] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #ffffff;
}

.gie2[b-omuuj8mt4q] {
    float: left;
    width: 50%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #ffffff;
}

.gie3[b-omuuj8mt4q] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #ffffff;
}

.gio[b-omuuj8mt4q] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #eeeeee;
}

.gio2[b-omuuj8mt4q] {
    float: left;
    width: 50%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #eeeeee;
}

.gio3[b-omuuj8mt4q] {
    float: left;
    width: 25%;
    height: 30px;
    padding: 10px;
    padding-bottom: 30px;
    background-color: #eeeeee;
}

.details[b-omuuj8mt4q] {
    width:100%;
    font-size:17px;
}

.tabdetails[b-omuuj8mt4q] {
    text-align: left;
    padding: 1rem;
}

.validation[b-omuuj8mt4q] {
    text-align: left;
    padding: 1rem;
    background-color: #ffffff;
}

/* Create three equal columns that floats next to each other */
.tabdetailscolumn[b-omuuj8mt4q] {
    float: left;
    width: 33.33%;
    padding: 10px;
    height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.tabdetailsrow[b-omuuj8mt4q]:after {
    content: "";
    display: table;
    clear: both;
}

.gridlayout[b-omuuj8mt4q] {
    /*overflow-y: auto;*/
    /*overflow:scroll;*/
}

.gridlayout-item[b-omuuj8mt4q] {
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
    text-align: center;
    position: relative;
    height:400px;
    z-index: 0;
    display: flex;
    padding: 3rem;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    /*    justify-content: center; */
}

.gridlayout-item-charts[b-omuuj8mt4q] {
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
    text-align: center;
    position: relative;
    z-index: 0;
    display: flex;
    padding: 3rem;
    border: 1px solid #c2c2c2;
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 99%);
    /*    justify-content: center; */
}

.gridlayout-header[b-omuuj8mt4q]:before {
    background-color: var(--bs-white);
}

.gridlayout-content[b-omuuj8mt4q]:before {
    /* background-color: var(--bs-yellow);*/
    padding: 3rem;
}

.gridlayout-left-side-bar[b-omuuj8mt4q]:before {
    background-color: var(--bs-white);
}

.gridlayout-right-side-bar[b-omuuj8mt4q]:before {
    background-color: var(--bs-info);
}

.gridlayout-footer[b-omuuj8mt4q]:before {
    background-color: var(--bs-blue);
    opacity: 0.5;
}



.grid-wrapper[b-omuuj8mt4q] {
    display: flex;
    flex-direction: column;
}

.fab-container[b-omuuj8mt4q] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    user-select: none;
    position: absolute;
    bottom: 16px;
    right: 16px;
}

.fab[b-omuuj8mt4q] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.35) !important;
}

.flexGrid[b-omuuj8mt4q] {
    flex: auto auto auto;
}

.bi[b-omuuj8mt4q] {
    display: inline-block;
    /*position: relative;*/
    width: 1.65rem;
    height: 1.65rem;
    margin-right: 0.75rem;
    top: 0px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-omuuj8mt4q] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-omuuj8mt4q] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-omuuj8mt4q] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-omuuj8mt4q] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-omuuj8mt4q] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-omuuj8mt4q] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-omuuj8mt4q] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-omuuj8mt4q] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.bi-backpack3-nav-menu[b-omuuj8mt4q] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.bi-houses-nav-menu[b-omuuj8mt4q] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-houses' viewBox='0 0 16 16'%3E%3Cpath d='M5.793 1a1 1 0 0 1 1.414 0l.647.646a.5.5 0 1 1-.708.708L6.5 1.707 2 6.207V12.5a.5.5 0 0 0 .5.5.5.5 0 0 1 0 1A1.5 1.5 0 0 1 1 12.5V7.207l-.146.147a.5.5 0 0 1-.708-.708zm3 1a1 1 0 0 1 1.414 0L12 3.793V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v3.293l1.854 1.853a.5.5 0 0 1-.708.708L15 8.207V13.5a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 4 13.5V8.207l-.146.147a.5.5 0 1 1-.708-.708zm.707.707L5 7.207V13.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5V7.207z'/%3E%3C/svg%3E");
}

.bi-exam-nav-menu[b-omuuj8mt4q] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-file-text' viewBox='0 0 16 16'%3E%3Cpath d='M5 4a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm-.5 2.5A.5.5 0 0 1 5 6h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5M5 8a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z'/%3E%3Cpath d='M2 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2zm10-1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1'/%3E%3C/svg%3E");
}

.bi-temis-icon-nav-menu[b-omuuj8mt4q] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='black' class='bi bi-bag' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1m3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}

.grid-toolbar-column-chooser[b-omuuj8mt4q] {
    -webkit-mask-image: url("images/icons/column-chooser.svg");
    mask-image: url("images/icons/column-chooser.svg");
}

.grid-toolbar-export[b-omuuj8mt4q] {
    -webkit-mask-image: url("images/icons/export.svg");
    mask-image: url("images/icons/export.svg");
}
/* _content/TemisV2_Auth/Components/Pages/UserAdmin.razor.rz.scp.css */

.welcome-container[b-xqthl627b1] {
    background-color: #f8f9fa;
    border-left: 3px solid #2c7be5;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Default: Side-by-side layout (flexbox) */
.welcome-grid[b-xqthl627b1] {
    display: flex;
    gap: 20px;
    align-items: flex-start; /* Aligns content to the top */
}

.welcome-content[b-xqthl627b1] {
    flex: 1; /* Takes remaining space */
}

.dropdown-column[b-xqthl627b1] {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.welcome-title[b-xqthl627b1] {
    color: #2c7be5;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 600;
}

.welcome-text[b-xqthl627b1] {
    color: #4a4a4a;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

/* Stack vertically on screens ≤ 1024px */
@media (max-width: 1024px) {
    .welcome-grid[b-xqthl627b1] {
        flex-direction: column; /* Stacks children vertically */
    }

    .video-player-section[b-xqthl627b1] {
        max-width: 100%; /* Full width on small screens */
        margin-top: 20px; /* Adds space between text and video */
    }
}

/* User Admin Dashboard Container */
.dashboard-container[b-xqthl627b1] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    padding: 20px;
}

/* Grid Panel Styling */
.dashboard-card[b-xqthl627b1] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    padding: 20px;
    position: relative;
    overflow: hidden;
    border-top: 6px solid #3A86FF;
}

.dashboard-double-width[b-xqthl627b1] {
    grid-column: 1;
}

/* Grid Customization */
.dxbl-gridview[b-xqthl627b1] {
    border: none !important;
    border-radius: 8px;
}

    .dxbl-gridview .dxbl-grid-header[b-xqthl627b1] {
        background-color: #f8f9fa;
        border-bottom: 2px solid #e9ecef;
    }

    .dxbl-gridview .dxbl-grid-data-row:hover[b-xqthl627b1] {
        background-color: #f8fafc !important;
    }

/* Actions Panel */
.dashboard-actions[b-xqthl627b1] {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 6px solid #06D6A0;
}

.actions-header[b-xqthl627b1] {
    color: #2c3e50;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f1f3f5;
}

.action-button[b-xqthl627b1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 8px;
    font-weight: 500;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: none;
    width: 100%;
    text-align: left;
}

    .action-button i[b-xqthl627b1] {
        font-size: 1.2rem;
        width: 20px;
        text-align: center;
    }

    .action-button:hover[b-xqthl627b1] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

/* Button Colors */
.activate-button[b-xqthl627b1] {
    background-color: #28a745;
}

.deactivate-button[b-xqthl627b1] {
    background-color: #ffc107;
    color: #212529;
}

.reassign-button[b-xqthl627b1] {
    background-color: #007bff;
}

.export-excel-button[b-xqthl627b1] {
    background-color: #1d6f42;
}

.actions-divider[b-xqthl627b1] {
    border: none;
    border-top: 1px solid #e9ecef;
    margin: 12px 0;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .dashboard-container[b-xqthl627b1] {
        grid-template-columns: 1fr;
    }

    .dashboard-double-width[b-xqthl627b1] {
        grid-column: 1;
    }
}

@media (max-width: 768px) {
    .dashboard-card[b-xqthl627b1],
    .dashboard-actions[b-xqthl627b1] {
        padding: 15px;
    }

    .action-button[b-xqthl627b1] {
        padding: 12px 15px;
    }
}

.video-info-box h4[b-xqthl627b1] {
    margin-top: 0;
    color: #2a5885;
}

.video-container[b-xqthl627b1] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
}

.video-player[b-xqthl627b1] {
    width: 100%;
    height: auto;
    max-height: 400px;
    background-color: #000;
}

.video-meta[b-xqthl627b1] {
    padding: 0.75rem 1rem;
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    font-size: 0.9rem;
    color: #666;
}

.video-page-content[b-xqthl627b1] {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    flex-grow: 1;
    padding-top: 15px;
}

.video-player-section[b-xqthl627b1] {
    flex: 1; /* Equal width to welcome-content */
    max-width: 455px; /* Limits video width */
}

@media (max-width: 992px) {
    .vertical-tabs-container[b-xqthl627b1] {
        flex-direction: column;
    }

    .dx-tab-panel[b-xqthl627b1] {
        flex-direction: row;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e9ecef;
        overflow-x: auto;
    }

    .dx-tab[b-xqthl627b1] {
        font-size: 0.9rem; /* Slightly smaller on mobile */
        padding: 0.6rem 1rem;
        white-space: nowrap; /* Prevent wrapping */
        border-left: none !important;
        border-bottom: 3px solid transparent;
    }

        .dx-tab.dx-tab-selected[b-xqthl627b1] {
            border-bottom: 3px solid #2a5885; /* Horizontal indicator on mobile */
            border-left: none !important;
        }

    .video-page-content[b-xqthl627b1] {
        flex-direction: column;
    }

    .video-info-section[b-xqthl627b1] {
        flex: 0 0 auto;
    }
}

/* _content/TemisV2_Auth/Components/Pages/UserReassignPopup.razor.rz.scp.css */
/* Popup Container */
.reassign-popup[b-9ejk1mdnse] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Header */
.popup-header[b-9ejk1mdnse] {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    border-radius: 8px 8px 0 0;
}

    .popup-header h5[b-9ejk1mdnse] {
        margin: 0;
        font-weight: 600;
        color: #2c3e50;
    }

    .popup-header .icon[b-9ejk1mdnse] {
        color: #4a6baf;
        font-size: 1.2rem;
        margin-right: 10px;
    }

/* Content */
.popup-content[b-9ejk1mdnse] {
    padding: 20px;
}

.form-layout[b-9ejk1mdnse] {
    margin: 20px 0;
    width: 100%;
}

/* Form Fields - Updated for wider fields */
.wide-field[b-9ejk1mdnse] {
    width: 100%;
    min-width: 400px; /* Double the standard width */
}

.readonly-field[b-9ejk1mdnse] {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
}

.school-combobox[b-9ejk1mdnse] {
    width: 100%;
}

.ministry-checkbox[b-9ejk1mdnse] {
    margin: 8px 0;
}

/* Buttons */
.action-buttons[b-9ejk1mdnse] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

.save-button[b-9ejk1mdnse] {
    background-color: #28a745;
    color: white;
    padding: 8px 20px;
    border-radius: 4px;
    border: none;
    transition: background-color 0.2s;
    min-width: 100px;
}

    .save-button:hover[b-9ejk1mdnse] {
        background-color: #218838;
    }

.cancel-button[b-9ejk1mdnse] {
    background-color: #6c757d;
    color: white;
    padding: 8px 20px;
    border-radius: 4px;
    border: none;
    transition: background-color 0.2s;
    min-width: 100px;
}

    .cancel-button:hover[b-9ejk1mdnse] {
        background-color: #5a6268;
    }

/* Form Layout Items */
[b-9ejk1mdnse] .dxfl-item {
    margin-bottom: 16px;
}

[b-9ejk1mdnse] .dxfl-caption {
    font-weight: 500;
    color: #495057;
    width: 120px; /* Fixed width for captions */
}

[b-9ejk1mdnse] .dxfl-value {
    width: calc(100% - 120px); /* Adjust value width based on caption */
}
/* _content/TemisV2_Auth/Components/Pages/Video_Reporting.razor.rz.scp.css */
body[b-9hh6rgiurr] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #F1FAEE;
    margin: 0;
    padding: 20px;
    color: #1A1A2E;
}

/*#region Dashboard Styles */
/* CPD Action Buttons */

/* New Actions Panel */
.dashboard-actions[b-9hh6rgiurr] {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 480px;
}

.actions-header[b-9hh6rgiurr] {
    color: #2c3e50;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f1f3f5;
}

/* Action Buttons - Aligned with Landing Page Colors */
.action-button[b-9hh6rgiurr] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-left: 4px solid;
}

    .action-button i[b-9hh6rgiurr] {
        font-size: 1.2rem;
        width: 20px;
        text-align: center;
    }

    .action-button:hover[b-9hh6rgiurr] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .action-button:active[b-9hh6rgiurr] {
        transform: translateY(0);
    }

/* Add Button - Staff Green (#2ecc71) */
.add-button[b-9hh6rgiurr] {
    background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
    border-left-color: #219653;
}

/* Edit Button - Student Blue (#3498db) */
.edit-button[b-9hh6rgiurr] {
    background: linear-gradient(135deg, #2980b9 0%, #3498db 100%);
    border-left-color: #1f6fb3;
}

/* Delete Button - Complementary Red */
.delete-button[b-9hh6rgiurr] {
    background: linear-gradient(135deg, #e74c3c 0%, #ff6b6b 100%);
    border-left-color: #c0392b;
    border-right: none;
    border-top: none;
    border-bottom: none;
}

/* Participants Button - TGCA Orange (#f39c12) */
.participants-button[b-9hh6rgiurr] {
    background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
    border-left-color: #d35400;
}

/* External Participants Button - SGCA Purple (#9b59b6) */
.external-participants-button[b-9hh6rgiurr] {
    background: linear-gradient(135deg, #8e44ad 0%, #9b59b6 100%);
    border-left-color: #7d3c98;
}

/* Export Button - Excel Green (Darker Staff Green) */
.export-button[b-9hh6rgiurr] {
    background: linear-gradient(135deg, #219653 0%, #27ae60 100%);
    border-left-color: #1a7a48;
    border-right: none;
    border-top: none;
    border-bottom: none;
}

/* Hover Effects */
.add-button:hover[b-9hh6rgiurr] {
    background: linear-gradient(135deg, #219653 0%, #27ae60 100%);
}

.edit-button:hover[b-9hh6rgiurr] {
    background: linear-gradient(135deg, #1f6fb3 0%, #2980b9 100%);
}

.delete-button:hover[b-9hh6rgiurr] {
    background: linear-gradient(135deg, #c0392b 0%, #e74c3c 100%);
}

.participants-button:hover[b-9hh6rgiurr] {
    background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
}

.external-participants-button:hover[b-9hh6rgiurr] {
    background: linear-gradient(135deg, #7d3c98 0%, #8e44ad 100%);
}

.export-button:hover[b-9hh6rgiurr] {
    background: linear-gradient(135deg, #1a7a48 0%, #219653 100%);
}

.activate-button[b-9hh6rgiurr] {
    background-color: #28a745;
}

.deactivate-button[b-9hh6rgiurr] {
    background-color: #ffc107;
    color: #212529;
}

.reassign-button[b-9hh6rgiurr] {
    background-color: #007bff;
}

/* Icon Colors */
.fa-calendar-plus[b-9hh6rgiurr] {
    color: #d5f5e3;
}

.fa-edit[b-9hh6rgiurr] {
    color: #d6eaf8;
}

.fa-trash-alt[b-9hh6rgiurr] {
    color: #fadbd8;
}

.fa-user-friends[b-9hh6rgiurr] {
    color: #fdebd0;
}

.fa-users[b-9hh6rgiurr] {
    color: #e8daef;
}

.fa-file-excel[b-9hh6rgiurr] {
    color: #d5f5e3;
}

/*#endregion */

/*#region Welcome Message Styles */

.welcome-container[b-9hh6rgiurr] {
    background-color: #f8f9fa;
    border-left: 3px solid #2c7be5;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 0.5rem;

}

.welcome-grid[b-9hh6rgiurr] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: flex-start;
}

.welcome-content[b-9hh6rgiurr] {
    grid-column: 1;
}

.dropdown-column[b-9hh6rgiurr] {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.welcome-title[b-9hh6rgiurr] {
    color: #2c7be5;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 600;
}

.welcome-text[b-9hh6rgiurr] {
    color: #4a4a4a;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.dropdown-header[b-9hh6rgiurr] {
    font-weight: 600;
    color: #495057;
    font-size: 0.95rem;
}

.dropdown-footer[b-9hh6rgiurr] {
    font-size: 0.85rem;
    color: #6c757d;
    font-style: italic;
    text-align: center;
}

.dropdown-container[b-9hh6rgiurr] {
    width: 100%;
}

.dxbs-combo-box[b-9hh6rgiurr] {
    width: 100% !important;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px 12px;
    background-color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .welcome-grid[b-9hh6rgiurr] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .dropdown-column[b-9hh6rgiurr] {
        grid-column: 1;
    }

    .dropdown-header[b-9hh6rgiurr] {
        text-align: center;
    }
}

.video-container[b-9hh6rgiurr] {
    background-color: #000;
    margin-bottom: 1rem;
}

.dx-toolbar[b-9hh6rgiurr] {
    padding: 0.5rem 0;
    background: #f8f9fa;
}

/*#endregion */

/*#region Video Styles */

.vertical-tabs-container[b-9hh6rgiurr] {
    width: 100%;
    flex-direction: row;
    gap: 1.5rem;
}

.dx-tab-panel[b-9hh6rgiurr] {
    flex-direction: column;
    width: 200px;
    border-right: 1px solid #e9ecef;
}

.dx-tab-page[b-9hh6rgiurr] {
    padding: 1rem;
}

.video-page-content[b-9hh6rgiurr] {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    flex-grow: 1;
    padding-top: 15px;
}

.video-player-section[b-9hh6rgiurr] {
    flex: 0 0 50%;
}

.video-info-section[b-9hh6rgiurr] {
    flex: 1;
    min-width: 0;
}

.video-info-box[b-9hh6rgiurr] {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #2a5885;
}

.summary-block[b-9hh6rgiurr] {
    margin-bottom: 1.5rem;
}

    .summary-block h5[b-9hh6rgiurr] {
        color: #2a5885;
        margin: 0 0 0.5rem 0;
        font-size: 1rem;
    }

    .summary-block p[b-9hh6rgiurr] {
        margin: 0;
        font-size: 0.9rem;
        line-height: 1.5;
    }

/* Responsive adjustments */
@media (max-width: 992px) {
    .summary-block[b-9hh6rgiurr] {
        margin-bottom: 1rem;
    }
}

    .video-info-box h4[b-9hh6rgiurr] {
        margin-top: 0;
        color: #2a5885;
    }

.video-container[b-9hh6rgiurr] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
}

.video-player[b-9hh6rgiurr] {
    width: 100%;
    height: auto;
    max-height: 400px;
    background-color: #000;
}

.video-meta[b-9hh6rgiurr] {
    padding: 0.75rem 1rem;
    background-color: #f8f9fa;
    border-top: 1px solid #e9ecef;
    font-size: 0.9rem;
    color: #666;
}

.dx-tab[b-9hh6rgiurr] {
    font-size: 1rem; /* Match h5 base size */
    font-weight: 600; /* Semi-bold like h5 */
    color: #495057; /* Slightly darker than h5 for better contrast */
    padding: 0.75rem 1.25rem;
    text-transform: none; /* Remove any default capitalization */
    letter-spacing: normal;
}

    .dx-tab.dx-tab-selected[b-9hh6rgiurr] {
        color: #2a5885; /* Your accent color */
        border-left: 3px solid #2a5885; /* Vertical indicator */
        background-color: #f8f9fa; /* Light background */
    }

@media (max-width: 992px) {
    .vertical-tabs-container[b-9hh6rgiurr] {
        flex-direction: column;
    }

    .dx-tab-panel[b-9hh6rgiurr] {
        flex-direction: row;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e9ecef;
        overflow-x: auto;
    }

    .dx-tab[b-9hh6rgiurr] {
        font-size: 0.9rem; /* Slightly smaller on mobile */
        padding: 0.6rem 1rem;
        white-space: nowrap; /* Prevent wrapping */
        border-left: none !important;
        border-bottom: 3px solid transparent;
    }

        .dx-tab.dx-tab-selected[b-9hh6rgiurr] {
            border-bottom: 3px solid #2a5885; /* Horizontal indicator on mobile */
            border-left: none !important;
        }

    .video-page-content[b-9hh6rgiurr] {
        flex-direction: column;
    }

    .video-info-section[b-9hh6rgiurr] {
        flex: 0 0 auto;
    }
}

/*#endregion */
/* _content/TemisV2_Auth/Components/Pages/WaddingtonLiteracy.razor.rz.scp.css */
body[b-ldsgcfel4e] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #F1FAEE;
    margin: 0;
    padding: 20px;
    color: #1A1A2E;
}

/*#region Dashboard Styles */

/* Dashboard Container */
.dashboard-container[b-ldsgcfel4e] {
    display: grid;
    grid-template-columns: 1fr 1fr 300px;
    gap: 20px;
    padding: 20px;
}

/* Dashboard Cards - Unified Styling */
.dashboard-card[b-ldsgcfel4e] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    padding: 20px;
    position: relative;
    overflow: hidden;
    border-top: 6px solid #3A86FF;
}

    .dashboard-card:nth-child(2)[b-ldsgcfel4e] {
        border-top-color: #ffbe07;
    }

/* Double Width Panel */
.dashboard-double-width[b-ldsgcfel4e] {
    grid-column: span 2;
    padding: 20px; /* Remove padding for table to fill space */
}

/* School Info Styles */
.school-name[b-ldsgcfel4e] {
    color: #212529;
    font-size: 24px;
    font-weight: 200;
    margin: 0 0 15px 0;
}

.stat-row[b-ldsgcfel4e] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.stat-label[b-ldsgcfel4e] {
    font-weight: 600;
    color: #1A1A2E;
    font-size: 15px;
}

.stat-value[b-ldsgcfel4e] {
    font-weight: 700;
    padding: 0 15px;
}

.highlight-value[b-ldsgcfel4e] {
    color: #3A86FF;
    font-weight: 500;
    font-size: 18px;
}

.gender-stats[b-ldsgcfel4e] {
    font-size: 13px;
    color: #6C757D;
    margin-top: 4px;
    font-weight: 500;
}

/* Table Styles */
.table-container[b-ldsgcfel4e] {
    padding: 0;
    overflow-x: auto;
}

.section-header[b-ldsgcfel4e] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 1.25rem; /* similar to DxFormLayoutGroup font size */
    color: #666;
    margin-bottom: 12px;
    margin-left: 10px;
    margin-top: 10px;
}

    .section-header .header-icon[b-ldsgcfel4e] {
        margin-bottom: 9px;
    }

.education-table[b-ldsgcfel4e] {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.4rem;
}

    .education-table th[b-ldsgcfel4e] {
        background-color: #f8f9fa;
        color: #2c3e50;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 1.0rem;
        letter-spacing: 0.5px;
        padding: 12px 15px;
        text-align: left;
        border-bottom: 2px solid #e9ecef;
    }

    .education-table td[b-ldsgcfel4e] {
        padding: 12px 15px;
        border-bottom: 1px solid #f1f3f5;
        vertical-align: middle;
    }

    .education-table tr:last-child td[b-ldsgcfel4e] {
        border-bottom: none;
    }

    .education-table tr:hover[b-ldsgcfel4e] {
        background-color: #f8fafc;
    }

/* Column Specific Styles */
.island-col[b-ldsgcfel4e] {
    width: 150px;
}

.gender-col[b-ldsgcfel4e] {
    width: 180px;
}

.numeric-col[b-ldsgcfel4e] {
    text-align: center !important;
}

.numeric[b-ldsgcfel4e] {
    text-align: center;
    font-weight: 500;
    color: #3A86FF;
}

.gender[b-ldsgcfel4e] {
    text-align: center;
    font-size: 0.9rem;
}

.ratio[b-ldsgcfel4e] {
    color: #06D6A0;
}

.internet[b-ldsgcfel4e] {
    color: #8338EC;
}

/* Actions Panel */
.dashboard-actions[b-ldsgcfel4e] {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.actions-header[b-ldsgcfel4e] {
    color: #2c3e50;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f1f3f5;
}

.action-button[b-ldsgcfel4e] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

    .action-button i[b-ldsgcfel4e] {
        font-size: 1.2rem;
    }

    .action-button:hover[b-ldsgcfel4e] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

/* Button Colors */
.student-button[b-ldsgcfel4e] {
    background-color: #3498db;
}

.staff-button[b-ldsgcfel4e] {
    background-color: #2ecc71;
}

.sgca-button[b-ldsgcfel4e] {
    background-color: #9b59b6;
}

.tgca-button[b-ldsgcfel4e] {
    background-color: #f39c12;
}

.export-excel-button[b-ldsgcfel4e] {
    background-color: #1d6f42;
    color: white;
    border: none;
    padding: 13px 13px;
    margin-bottom: 10px;
    width: 100%;
    text-align: left;
}

    .export-excel-button i[b-ldsgcfel4e] {
        margin-right: 5px;
        margin-left: 11px;
    }


.edit-button[b-ldsgcfel4e] {
    background: linear-gradient(135deg, #2980b9 0%, #3498db 100%);
    border-left-color: #1f6fb3;
    border-right: none;
    border-top: none;
    border-bottom: none;
    width: 100%;
}


.latest-feature-box[b-ldsgcfel4e] {
    margin-top: 2rem;
    padding: 1rem 1.5rem;
    background: #e0f7fa; /* light cyan background */
    border-left: 5px solid #00acc1; /* bright cyan accent */
    display: flex;
    align-items: center;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.actions-divider[b-ldsgcfel4e] {
    border: none;
    border-top: 1px solid #ccc;
    margin: 0.5rem 0;
}

.latest-feature-box .feature-icon[b-ldsgcfel4e] {
    font-size: 1.8rem;
    color: #00796b; /* changed to a nice teal for the arrow */
    margin-right: 1rem;
}


.latest-feature-box .feature-content h4[b-ldsgcfel4e] {
    margin: 0 0 0.3rem 0;
    font-weight: 600;
    color: #007c91;
}

.latest-feature-box .feature-content p[b-ldsgcfel4e] {
    margin: 0;
    color: #004d57;
    font-size: 0.9rem;
    line-height: 1.3;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .dashboard-container[b-ldsgcfel4e] {
        grid-template-columns: 1fr;
    }

    .dashboard-double-width[b-ldsgcfel4e] {
        grid-column: span 1;
    }

    .dashboard-actions[b-ldsgcfel4e] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .action-button[b-ldsgcfel4e] {
        flex: 1 1 200px;
    }
}

@media (max-width: 768px) {
    .gender-col[b-ldsgcfel4e] {
        display: none;
    }

    .education-table th[b-ldsgcfel4e],
    .education-table td[b-ldsgcfel4e] {
        padding: 10px 8px;
    }

    .action-button[b-ldsgcfel4e] {
        flex: 1 1 100%;
    }
}

@media (max-width: 1068px) {
    .hide-mobile[b-ldsgcfel4e] {
        display: none;
    }
}

/* Table Header with Export Button */
.table-header[b-ldsgcfel4e] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px 15px 15px;
}

.export-btn[b-ldsgcfel4e] {
    background-color: #1d6f42;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

    .export-btn:hover[b-ldsgcfel4e] {
        background-color: #165a36;
        transform: translateY(-1px);
    }

    .export-btn i[b-ldsgcfel4e] {
        font-size: 1rem;
    }

/* Uniform Table Columns */
.education-table[b-ldsgcfel4e] {
    table-layout: fixed;
}

    .education-table th[b-ldsgcfel4e],
    .education-table td[b-ldsgcfel4e] {
        width: calc(100% / 7); /* 7 columns */
        text-align: center;
        padding: 12px 8px;
    }

        .education-table th:first-child[b-ldsgcfel4e],
        .education-table td:first-child[b-ldsgcfel4e] {
            text-align: left;
            padding-left: 15px;
        }

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .education-table th[b-ldsgcfel4e],
    .education-table td[b-ldsgcfel4e] {
        width: auto;
        table-layout: auto;
        font-size: 0.85rem;
    }
}

/*#region Welcome Message Styles */

.welcome-container[b-ldsgcfel4e] {
    background-color: #f8f9fa;
    border-left: 3px solid #2c7be5;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 0.5rem;
}

.welcome-grid[b-ldsgcfel4e] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: flex-start;
}

.welcome-content[b-ldsgcfel4e] {
    grid-column: 1;
}

.dropdown-column[b-ldsgcfel4e] {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.welcome-title[b-ldsgcfel4e] {
    color: #2c7be5;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 600;
}

.welcome-text[b-ldsgcfel4e] {
    color: #4a4a4a;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.dropdown-header[b-ldsgcfel4e] {
    font-weight: 600;
    color: #495057;
    font-size: 0.95rem;
}

.dropdown-footer[b-ldsgcfel4e] {
    font-size: 0.85rem;
    color: #6c757d;
    font-style: italic;
    text-align: center;
}

.dropdown-container[b-ldsgcfel4e] {
    width: 100%;
}

.dxbs-combo-box[b-ldsgcfel4e] {
    width: 100% !important;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px 12px;
    background-color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

@media (max-width: 1068px) {
    .welcome-grid[b-ldsgcfel4e] {
        display: block;
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {

    .dropdown-column[b-ldsgcfel4e] {
        grid-column: 1;
    }

    .dropdown-header[b-ldsgcfel4e] {
        text-align: center;
    }
}

/*#endregion */


/*#region Attendance Table CSS */

.attendance-note[b-ldsgcfel4e] {
    margin-top: 20px;
    font-size: 14px;
    color: #7f8c8d;
    text-align: center;
    font-style: italic;
}

.attendance-table-container[b-ldsgcfel4e] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 600px;
    margin: 20px auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 0px;
    overflow: hidden;
    height: 600px;
}

.attendance-table[b-ldsgcfel4e] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

    .attendance-table th[b-ldsgcfel4e] {
        background-color: #f2f2f2;
        color: black;
        padding: 12px 15px;
        font-weight: 600;
    }

    .attendance-table td[b-ldsgcfel4e] {
        padding: 12px 15px;
        border-bottom: 1px solid #e0e0e0;
    }

    .attendance-table tr:last-child td[b-ldsgcfel4e] {
        border-bottom: none;
    }

/* Status coloring */
.present[b-ldsgcfel4e] {
    background-color: #ffffff; /* Pale green */
}

.absent[b-ldsgcfel4e] {
    background-color: #ffebee; /* Pale red */
}

.halfday[b-ldsgcfel4e] {
    background-color: #ffffff; /* Pale amber */
}

.status-badge[b-ldsgcfel4e] {
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 12px;
    display: inline-block;
}

.present .status-badge[b-ldsgcfel4e] {
    background-color: #2ecc71;
    color: white;
}

.absent .status-badge[b-ldsgcfel4e] {
    background-color: #e74c3c;
    color: white;
}

.halfday .status-badge[b-ldsgcfel4e] {
    background-color: #f39c12;
    color: white;
}

.count-footer[b-ldsgcfel4e] {
    text-align: right;
    font-weight: bold;
    background-color: #f8f9fa;
    padding: 10px 15px;
}

/* Hover effects */

.pagination-controls[b-ldsgcfel4e] {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    gap: 5px;
}

    .pagination-controls button[b-ldsgcfel4e] {
        padding: 8px 12px;
        border: 1px solid #ddd;
        background: white;
        cursor: pointer;
        border-radius: 4px;
        min-width: 40px;
    }

        .pagination-controls button:hover:not(:disabled)[b-ldsgcfel4e] {
            background: #f0f0f0;
        }

        .pagination-controls button:disabled[b-ldsgcfel4e] {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .pagination-controls button.active[b-ldsgcfel4e] {
            background: #2c3e50;
            color: white;
            border-color: #2c3e50;
        }

.count-footer[b-ldsgcfel4e] {
    text-align: center;
    padding: 10px;
    color: #666;
}

/*#endregion */


/*#region Attendance Infographic CSS */

.metrics-container[b-ldsgcfel4e] {
    display: flex;
    margin-left: 10px;
    justify-content: left;
    gap: 10px;
    max-width: 600px;
    width: 356px;
}

.metric-box[b-ldsgcfel4e] {
    background: white;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    padding: 10px 15px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    max-width: 250px;
    width: 250px;
}

.percentage[b-ldsgcfel4e] {
    font-size: 48px;
    font-weight: normal;
    color: darkgreen;
    line-height: 1.2;
    margin-bottom: 8px;
}

.label[b-ldsgcfel4e] {
    font-size: 22px;
    color: #555;
    text-transform: capitalize;
    letter-spacing: 0px;
}

.attendance-infographic[b-ldsgcfel4e] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 16px;
    padding: 25px;
    max-width: 500px;
    margin: 20px auto;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-left: 0px solid darkgreen;
}

.attendance-header[b-ldsgcfel4e] {
    color: #2c3e50;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

/*    .attendance-header:before {
        content: "📈";
        margin-right: 10px;
        font-size: 28px;
    }*/

.metric-grid[b-ldsgcfel4e] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

.rate-grid[b-ldsgcfel4e] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.metric-item[b-ldsgcfel4e] {
    background: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.rate-item[b-ldsgcfel4e] {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-top: 4px solid;
    text-align: center;
}

.metric-label[b-ldsgcfel4e] {
    font-size: 14px;
    color: #7f8c8d;
    margin-bottom: 5px;
}

.metric-value[b-ldsgcfel4e] {
    font-size: 28px;
    font-weight: 700;
}

.rate-label[b-ldsgcfel4e] {
    font-size: 16px;
    color: #2c3e50;
    margin-bottom: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rate-value[b-ldsgcfel4e] {
    font-size: 36px;
    font-weight: 800;
}

.total-days .metric-value[b-ldsgcfel4e] {
    color: #3498db;
}

.present-days .metric-value[b-ldsgcfel4e] {
    color: #2ecc71;
}

.absent-days .metric-value[b-ldsgcfel4e] {
    color: #e74c3c;
}

.late-days .metric-value[b-ldsgcfel4e] {
    color: #f39c12;
}

.attendance-rate[b-ldsgcfel4e] {
    border-top-color: #3498db;
}

    .attendance-rate .rate-value[b-ldsgcfel4e] {
        color: #3498db;
    }

.punctuality-rate[b-ldsgcfel4e] {
    border-top-color: #9b59b6;
}

    .punctuality-rate .rate-value[b-ldsgcfel4e] {
        color: #9b59b6;
    }


.export-container[b-ldsgcfel4e] {
    position: absolute;
    bottom: 20px;
    right: 20px;
    text-align: right;
}

.export-excel-btn[b-ldsgcfel4e] {
    background-color: #217346; /* Excel green */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .export-excel-btn:hover[b-ldsgcfel4e] {
        background-color: #1a5f38; /* Darker green on hover */
    }

    .export-excel-btn:active[b-ldsgcfel4e] {
        transform: translateY(1px);
    }

/*#endregion */

/*#region Mark Attendance CSS */

/* Attendance Marking Container */
.attendance-marking[b-ldsgcfel4e] {
    width:100%;
    gap: 1.5rem;
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Student Info Section */
.student-info[b-ldsgcfel4e] {
    text-align: center;
}

.student-name[b-ldsgcfel4e] {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.instruction[b-ldsgcfel4e] {
    font-size: 1rem;
    color: #666;
}

/* Compact Attendance Buttons */
.compact-attendance-buttons[b-ldsgcfel4e] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.compact-button[b-ldsgcfel4e] {
    display: flex;
    align-items: center;
    text-align: left;
    padding: 0.6rem 1rem;
    width: 100%;
    border-radius: 6px;
    border: 1px solid transparent;
    background-color: rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
    min-height: auto;
}

    .compact-button i[b-ldsgcfel4e] {
        font-size: 1.25rem;
        margin-right: 0.8rem;
        width: 24px;
        text-align: center;
    }

.button-text[b-ldsgcfel4e] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.button-title[b-ldsgcfel4e] {
    font-weight: 600;
    font-size: 0.95rem;
    color: inherit;
}

.button-subtitle[b-ldsgcfel4e] {
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.7);
    font-weight: normal;
}

/* Button Colors */
.present-button[b-ldsgcfel4e] {
    color: #70ad47;
    border-color: #70ad47;
}

.late-button[b-ldsgcfel4e] {
    color: #ffc000;
    border-color: #ffc000;
}

.absent-button[b-ldsgcfel4e] {
    color: #ff0000;
    border-color: #ff0000;
}

/* Hover States */
.compact-button:hover[b-ldsgcfel4e] {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.present-button:hover[b-ldsgcfel4e] {
    background-color: rgba(112, 173, 71, 0.1);
}

.late-button:hover[b-ldsgcfel4e] {
    background-color: rgba(255, 192, 0, 0.1);
}

.absent-button:hover[b-ldsgcfel4e] {
    background-color: rgba(255, 0, 0, 0.1);
}

/* Active State */
.compact-button.active[b-ldsgcfel4e] {
    color: white;
}

    .compact-button.active .button-subtitle[b-ldsgcfel4e] {
        color: rgba(255, 255, 255, 0.9);
    }

.present-button.active[b-ldsgcfel4e] {
    background-color: #70ad47;
}

.late-button.active[b-ldsgcfel4e] {
    background-color: #ffc000;
}

.absent-button.active[b-ldsgcfel4e] {
    background-color: #ff0000;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .attendance-buttons[b-ldsgcfel4e] {
        flex-direction: column;
    }

    .action-button[b-ldsgcfel4e] {
        padding: 1rem 0.5rem;
        flex-direction: row;
        gap: 0.75rem;
        justify-content: flex-start;
        padding-left: 1.5rem;
    }

        .action-button i[b-ldsgcfel4e] {
            margin-bottom: 0;
            font-size: 1.5rem;
        }
}


/* Vertical Attendance Buttons */
.attendance-buttons-vertical[b-ldsgcfel4e] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

    .attendance-buttons-vertical .action-button[b-ldsgcfel4e] {
        display: flex;
        align-items: center;
        text-align: left;
        padding: 1rem 1.5rem;
        width: 100%;
        border-radius: 6px;
        transition: all 0.2s ease;
    }

        .attendance-buttons-vertical .action-button i[b-ldsgcfel4e] {
            font-size: 1.5rem;
            margin-right: 1rem;
            min-width: 30px;
        }

        .attendance-buttons-vertical .action-button span[b-ldsgcfel4e] {
            font-weight: 600;
            font-size: 1.1rem;
            margin-right: auto;
        }

.button-description[b-ldsgcfel4e] {
    font-size: 0.85rem;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.7);
    margin-top: 0.25rem;
    display: block;
}

/* Active State for Vertical Buttons */
.attendance-buttons-vertical .action-button.active[b-ldsgcfel4e] {
    color: white;
}

    .attendance-buttons-vertical .action-button.active .button-description[b-ldsgcfel4e] {
        color: rgba(255, 255, 255, 0.9);
    }

/* Hover States */
.attendance-buttons-vertical .present-button:hover[b-ldsgcfel4e] {
    background-color: rgba(112, 173, 71, 0.15);
}

.attendance-buttons-vertical .late-button:hover[b-ldsgcfel4e] {
    background-color: rgba(255, 192, 0, 0.15);
}

.attendance-buttons-vertical .absent-button:hover[b-ldsgcfel4e] {
    background-color: rgba(255, 0, 0, 0.15);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .attendance-buttons-vertical .action-button[b-ldsgcfel4e] {
        padding: 0.8rem 1rem;
    }

        .attendance-buttons-vertical .action-button i[b-ldsgcfel4e] {
            font-size: 1.25rem;
            margin-right: 0.75rem;
        }
}

/*#endregion */

/* Term Status Widget */
.term-status-widget[b-ldsgcfel4e] {
    position: relative;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.current-term-badge[b-ldsgcfel4e] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: default;
    transition: all 0.2s ease;
    position: relative;
    border: 1px solid rgba(0,0,0,0.1);
}

    .current-term-badge:hover[b-ldsgcfel4e] {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transform: translateY(-1px);
    }

    .current-term-badge i[b-ldsgcfel4e] {
        font-size: 1.4em;
        width: 24px;
        text-align: center;
    }

.term-info[b-ldsgcfel4e] {
    line-height: 1.3;
}

.term-title[b-ldsgcfel4e] {
    font-weight: 600;
    font-size: 0.95em;
}

.term-dates[b-ldsgcfel4e] {
    font-size: 0.85em;
    color: #555;
}

/* Tooltip Styling */
.academic-calendar-tooltip[b-ldsgcfel4e] {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 300px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 15px;
    z-index: 9999;
    margin-bottom: 10px;
    opacity: 0;
    animation: tooltipFadeIn 0.2s ease-out forwards;
    border: 1px solid #eee;
}

.high-z-index-combo .dxbl-dropdown[b-ldsgcfel4e] {
    z-index: 9999 !important; /* Override default */
}

.tooltip-header[b-ldsgcfel4e] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

    .tooltip-header i[b-ldsgcfel4e] {
        color: #666;
    }

    .tooltip-header h4[b-ldsgcfel4e] {
        margin: 0;
        font-size: 1em;
        color: #333;
    }

.term-list[b-ldsgcfel4e] {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 5px;
}

.term-item[b-ldsgcfel4e] {
    padding: 8px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
}

    .term-item:last-child[b-ldsgcfel4e] {
        border-bottom: none;
    }

.term-name[b-ldsgcfel4e] {
    font-weight: 500;
    width: 110px;
    flex-shrink: 0;
}

.term-date-range[b-ldsgcfel4e] {
    flex-grow: 1;
    font-size: 0.9em;
    color: #666;
}

.term-duration[b-ldsgcfel4e] {
    font-size: 0.8em;
    color: #999;
    font-style: italic;
    width: 100%;
    margin-top: 3px;
    padding-left: 110px;
}

.is-break[b-ldsgcfel4e] {
    background-color: #FFF9E6;
    border-radius: 4px;
    margin: 2px -5px;
    padding: 8px 5px;
}

/* Status Colors */
.term-status[b-ldsgcfel4e] {
    background-color: rgba(112, 173, 71, 0.1);
    border-left: 3px solid #70ad47;
}

.holiday-status[b-ldsgcfel4e] {
    background-color: rgba(255, 192, 0, 0.1);
    border-left: 3px solid #ffc000;
}

.no-term-status[b-ldsgcfel4e] {
    background-color: rgba(200, 200, 200, 0.1);
    border-left: 3px solid #ccc;
}

/* Position the tooltip underneath */
.academic-calendar-tooltip.bottom-tooltip[b-ldsgcfel4e] {
    top: 100%;
    bottom: auto;
    left: 0;
    margin-top: 8px;
    margin-bottom: 0;
    animation: tooltipFadeInUp-b-ldsgcfel4e 0.2s ease-out forwards;
}

/* Bold labels and improved spacing */
.form-label-bold[b-ldsgcfel4e] {
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #444;
    margin-bottom: 0.5rem;
    display: block;
}

/* Highlighted instruction */
.highlight-instruction[b-ldsgcfel4e] {
    font-weight: 500;
    color: #333;
    font-size: 1.05rem;
    margin: 0.75rem 0;
    padding: 0.5rem;
    background-color: #f8f9fa;
    border-left: 3px solid #4a90e2;
}

/* Emphasized form groups */
.emphasized-group[b-ldsgcfel4e] {
    margin: 1.25rem 0;
    padding: 1rem;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Highlighted reading age display */
.highlighted-result[b-ldsgcfel4e] {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2c7be5;
    padding: 0.75rem;
    background-color: #f8fafd;
    border-radius: 4px;
    border: 1px solid #e1e5eb;
    text-align: center;
}

.student-info-container[b-ldsgcfel4e] {
    text-align: left;
    margin-bottom: 1.5rem;
}

.student-info-card[b-ldsgcfel4e] {
    background-color: #fff;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border-left: 4px solid #4a90e2;
}

.student-name-highlight[b-ldsgcfel4e] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eaeef2;
}

.highlight-instruction[b-ldsgcfel4e] {
    font-weight: 500;
    color: #4a5568;
    font-size: 1rem;
    margin: 0.5rem 0 0;
    padding-top: 0.5rem;
}

/* Improved input styling */
.emphasized-input .dx-texteditor-input[b-ldsgcfel4e] {
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0.75rem;
}

/* Reading Age Styling */
.reading-age-highlight[b-ldsgcfel4e] {
    font-weight: bold;
    background-color: #E3F7FF;
    padding: 4px 8px;
    color: #0D47A1;
    display: inline-block;
}

/* Reading Phase Color Coding */
.phase-pre-reader[b-ldsgcfel4e] {
    background: #FFEBEE;
    color: #C62828;
    border-color: #EF5350;
}

.phase-emergent[b-ldsgcfel4e] {
    background: #FFF3E0;
    color: #E65100;
    border-color: #FF9800;
}

.phase-early[b-ldsgcfel4e] {
    background: #FFF8E1;
    color: #F57F17;
    border-color: #FFC107;
}

.phase-developing[b-ldsgcfel4e] {
    background: #E8F5E9;
    color: #2E7D32;
    border-color: #4CAF50;
}

.phase-fluent[b-ldsgcfel4e] {
    background: #E3F2FD;
    color: #1565C0;
    border-color: #2196F3;
}

.phase-independent[b-ldsgcfel4e] {
    background: #EDE7F6;
    color: #4527A0;
    border-color: #673AB7;
}

/* Shared phase styling */
.reading-age-highlight[b-ldsgcfel4e],
[class^="phase-"][b-ldsgcfel4e] {
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    border-left: 4px solid;
    display: inline-block;
}

/* More prominent action button */
.primary-action[b-ldsgcfel4e] {
    background-color: #4a90e2;
    color: white;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
}

    .primary-action:hover[b-ldsgcfel4e] {
        background-color: #3a7bc8;
    }

/* Animations */
/* Adjust the animation to come from below */
@keyframes tooltipFadeInUp-b-ldsgcfel4e {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Add some space below the widget */
.term-status-widget[b-ldsgcfel4e] {
    margin-bottom: 20px; /* Space for tooltip */
}

/* Arrow styling (optional) */
.academic-calendar-tooltip.bottom-tooltip[b-ldsgcfel4e]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 20px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent white transparent;
    filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.1));
}

/* Scrollbar Styling */
.term-list[b-ldsgcfel4e]::-webkit-scrollbar {
    width: 6px;
}

.term-list[b-ldsgcfel4e]::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 3px;
}

/* Tooltip styling */
.academic-calendar-tooltip[b-ldsgcfel4e] {
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

    .academic-calendar-tooltip.visible[b-ldsgcfel4e] {
        opacity: 1;
        pointer-events: auto;
    }

/* Add gap between elements */
.bottom-tooltip[b-ldsgcfel4e] {
    top: calc(100% + 5px);
}

.absence-reason-modal[b-ldsgcfel4e] {
    padding: 20px;
}

.modal-buttons[b-ldsgcfel4e] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.loading-overlay[b-ldsgcfel4e] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.spinner-border[b-ldsgcfel4e] {
    width: 3rem;
    height: 3rem;
}
/* _content/TemisV2_Auth/Components/Pages/WaddingtonNumeracy.razor.rz.scp.css */
body[b-bvo77xj60s] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #F1FAEE;
    margin: 0;
    padding: 20px;
    color: #1A1A2E;
}

/*#region Dashboard Styles */

/* Dashboard Container */
.dashboard-container[b-bvo77xj60s] {
    display: grid;
    grid-template-columns: 1fr 1fr 300px;
    gap: 20px;
    padding: 20px;
}

/* Dashboard Cards - Unified Styling */
.dashboard-card[b-bvo77xj60s] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    padding: 20px;
    position: relative;
    overflow: hidden;
    border-top: 6px solid #3A86FF;
}

    .dashboard-card:nth-child(2)[b-bvo77xj60s] {
        border-top-color: #ffbe07;
    }

/* Double Width Panel */
.dashboard-double-width[b-bvo77xj60s] {
    grid-column: span 2;
    padding: 20px; /* Remove padding for table to fill space */
}

/* Double Width Panel */
.dashboard-triple-width[b-bvo77xj60s] {
    grid-column: span 3;
    padding: 20px; /* Remove padding for table to fill space */
}

/* School Info Styles */
.school-name[b-bvo77xj60s] {
    color: #212529;
    font-size: 24px;
    font-weight: 200;
    margin: 0 0 15px 0;
}

.stat-row[b-bvo77xj60s] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.stat-label[b-bvo77xj60s] {
    font-weight: 600;
    color: #1A1A2E;
    font-size: 15px;
}

.stat-value[b-bvo77xj60s] {
    font-weight: 700;
    padding: 0 15px;
}

.highlight-value[b-bvo77xj60s] {
    color: #3A86FF;
    font-weight: 500;
    font-size: 18px;
}

.gender-stats[b-bvo77xj60s] {
    font-size: 13px;
    color: #6C757D;
    margin-top: 4px;
    font-weight: 500;
}

/* Table Styles */
.table-container[b-bvo77xj60s] {
    padding: 0;
    overflow-x: auto;
}

.section-header[b-bvo77xj60s] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 1.25rem; /* similar to DxFormLayoutGroup font size */
    color: #666;
    margin-bottom: 12px;
    margin-left: 10px;
    margin-top: 10px;
}

    .section-header .header-icon[b-bvo77xj60s] {
        margin-bottom: 9px;
    }

.education-table[b-bvo77xj60s] {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.4rem;
}

    .education-table th[b-bvo77xj60s] {
        background-color: #f8f9fa;
        color: #2c3e50;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 1.0rem;
        letter-spacing: 0.5px;
        padding: 12px 15px;
        text-align: left;
        border-bottom: 2px solid #e9ecef;
    }

    .education-table td[b-bvo77xj60s] {
        padding: 12px 15px;
        border-bottom: 1px solid #f1f3f5;
        vertical-align: middle;
    }

    .education-table tr:last-child td[b-bvo77xj60s] {
        border-bottom: none;
    }

    .education-table tr:hover[b-bvo77xj60s] {
        background-color: #f8fafc;
    }

/* Column Specific Styles */
.island-col[b-bvo77xj60s] {
    width: 150px;
}

.gender-col[b-bvo77xj60s] {
    width: 180px;
}

.numeric-col[b-bvo77xj60s] {
    text-align: center !important;
}

.numeric[b-bvo77xj60s] {
    text-align: center;
    font-weight: 500;
    color: #3A86FF;
}

.gender[b-bvo77xj60s] {
    text-align: center;
    font-size: 0.9rem;
}

.ratio[b-bvo77xj60s] {
    color: #06D6A0;
}

.internet[b-bvo77xj60s] {
    color: #8338EC;
}

/* Actions Panel */
.dashboard-actions[b-bvo77xj60s] {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.actions-header[b-bvo77xj60s] {
    color: #2c3e50;
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f1f3f5;
}

.action-button[b-bvo77xj60s] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

    .action-button i[b-bvo77xj60s] {
        font-size: 1.2rem;
    }

    .action-button:hover[b-bvo77xj60s] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

/* Button Colors */
.student-button[b-bvo77xj60s] {
    background-color: #3498db;
}

.staff-button[b-bvo77xj60s] {
    background-color: #2ecc71;
}

.sgca-button[b-bvo77xj60s] {
    background-color: #9b59b6;
}

.tgca-button[b-bvo77xj60s] {
    background-color: #f39c12;
}

.export-excel-button[b-bvo77xj60s] {
    background-color: #1d6f42;
    color: white;
    border: none;
    padding: 13px 13px;
    margin-bottom: 10px;
    width: 100%;
    text-align: left;
}

    .export-excel-button i[b-bvo77xj60s] {
        margin-right: 5px;
        margin-left: 11px;
    }


.edit-button[b-bvo77xj60s] {
    background: linear-gradient(135deg, #2980b9 0%, #3498db 100%);
    border-left-color: #1f6fb3;
    border-right: none;
    border-top: none;
    border-bottom: none;
    width: 100%;
}


.latest-feature-box[b-bvo77xj60s] {
    margin-top: 2rem;
    padding: 1rem 1.5rem;
    background: #e0f7fa; /* light cyan background */
    border-left: 5px solid #00acc1; /* bright cyan accent */
    display: flex;
    align-items: center;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.actions-divider[b-bvo77xj60s] {
    border: none;
    border-top: 1px solid #ccc;
    margin: 0.5rem 0;
}

.latest-feature-box .feature-icon[b-bvo77xj60s] {
    font-size: 1.8rem;
    color: #00796b; /* changed to a nice teal for the arrow */
    margin-right: 1rem;
}


.latest-feature-box .feature-content h4[b-bvo77xj60s] {
    margin: 0 0 0.3rem 0;
    font-weight: 600;
    color: #007c91;
}

.latest-feature-box .feature-content p[b-bvo77xj60s] {
    margin: 0;
    color: #004d57;
    font-size: 0.9rem;
    line-height: 1.3;
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .dashboard-container[b-bvo77xj60s] {
        grid-template-columns: 1fr;
    }

    .dashboard-double-width[b-bvo77xj60s] {
        grid-column: span 1;
    }

    .dashboard-triple-width[b-bvo77xj60s] {
        grid-column: span 1;
    }

    .dashboard-actions[b-bvo77xj60s] {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .action-button[b-bvo77xj60s] {
        flex: 1 1 200px;
    }
}

@media (max-width: 768px) {
    .gender-col[b-bvo77xj60s] {
        display: none;
    }

    .education-table th[b-bvo77xj60s],
    .education-table td[b-bvo77xj60s] {
        padding: 10px 8px;
    }

    .action-button[b-bvo77xj60s] {
        flex: 1 1 100%;
    }
}

@media (max-width: 1068px) {
    .hide-mobile[b-bvo77xj60s] {
        display: none;
    }
}

/* Table Header with Export Button */
.table-header[b-bvo77xj60s] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px 15px 15px;
}

.export-btn[b-bvo77xj60s] {
    background-color: #1d6f42;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

    .export-btn:hover[b-bvo77xj60s] {
        background-color: #165a36;
        transform: translateY(-1px);
    }

    .export-btn i[b-bvo77xj60s] {
        font-size: 1rem;
    }

/* Uniform Table Columns */
.education-table[b-bvo77xj60s] {
    table-layout: fixed;
}

    .education-table th[b-bvo77xj60s],
    .education-table td[b-bvo77xj60s] {
        width: calc(100% / 7); /* 7 columns */
        text-align: center;
        padding: 12px 8px;
    }

        .education-table th:first-child[b-bvo77xj60s],
        .education-table td:first-child[b-bvo77xj60s] {
            text-align: left;
            padding-left: 15px;
        }

/* Responsive Adjustments */
@media (max-width: 1200px) {
    .education-table th[b-bvo77xj60s],
    .education-table td[b-bvo77xj60s] {
        width: auto;
        table-layout: auto;
        font-size: 0.85rem;
    }
}

/*#region Welcome Message Styles */

.welcome-container[b-bvo77xj60s] {
    background-color: #f8f9fa;
    border-left: 3px solid #2c7be5;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 0.5rem;
}

.welcome-grid[b-bvo77xj60s] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 2rem;
    align-items: flex-start;
}

.welcome-content[b-bvo77xj60s] {
    grid-column: 1;
}

.dropdown-column[b-bvo77xj60s] {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.welcome-title[b-bvo77xj60s] {
    color: #2c7be5;
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 600;
}

.welcome-text[b-bvo77xj60s] {
    color: #4a4a4a;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.dropdown-header[b-bvo77xj60s] {
    font-weight: 600;
    color: #495057;
    font-size: 0.95rem;
}

.dropdown-footer[b-bvo77xj60s] {
    font-size: 0.85rem;
    color: #6c757d;
    font-style: italic;
    text-align: center;
}

.dropdown-container[b-bvo77xj60s] {
    width: 100%;
}

.dxbs-combo-box[b-bvo77xj60s] {
    width: 100% !important;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 8px 12px;
    background-color: white;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

@media (max-width: 1068px) {
    .welcome-grid[b-bvo77xj60s] {
        display: block;
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {

    .dropdown-column[b-bvo77xj60s] {
        grid-column: 1;
    }

    .dropdown-header[b-bvo77xj60s] {
        text-align: center;
    }
}

/*#endregion */


/*#region Attendance Table CSS */

.attendance-note[b-bvo77xj60s] {
    margin-top: 20px;
    font-size: 14px;
    color: #7f8c8d;
    text-align: center;
    font-style: italic;
}

.attendance-table-container[b-bvo77xj60s] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 600px;
    margin: 20px auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-radius: 0px;
    overflow: hidden;
    height: 600px;
}

.attendance-table[b-bvo77xj60s] {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

    .attendance-table th[b-bvo77xj60s] {
        background-color: #f2f2f2;
        color: black;
        padding: 12px 15px;
        font-weight: 600;
    }

    .attendance-table td[b-bvo77xj60s] {
        padding: 12px 15px;
        border-bottom: 1px solid #e0e0e0;
    }

    .attendance-table tr:last-child td[b-bvo77xj60s] {
        border-bottom: none;
    }

/* Status coloring */
.present[b-bvo77xj60s] {
    background-color: #ffffff; /* Pale green */
}

.absent[b-bvo77xj60s] {
    background-color: #ffebee; /* Pale red */
}

.halfday[b-bvo77xj60s] {
    background-color: #ffffff; /* Pale amber */
}

.status-badge[b-bvo77xj60s] {
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 12px;
    display: inline-block;
}

.present .status-badge[b-bvo77xj60s] {
    background-color: #2ecc71;
    color: white;
}

.absent .status-badge[b-bvo77xj60s] {
    background-color: #e74c3c;
    color: white;
}

.halfday .status-badge[b-bvo77xj60s] {
    background-color: #f39c12;
    color: white;
}

.count-footer[b-bvo77xj60s] {
    text-align: right;
    font-weight: bold;
    background-color: #f8f9fa;
    padding: 10px 15px;
}

/* Hover effects */

.pagination-controls[b-bvo77xj60s] {
    display: flex;
    justify-content: center;
    margin: 20px 0;
    gap: 5px;
}

    .pagination-controls button[b-bvo77xj60s] {
        padding: 8px 12px;
        border: 1px solid #ddd;
        background: white;
        cursor: pointer;
        border-radius: 4px;
        min-width: 40px;
    }

        .pagination-controls button:hover:not(:disabled)[b-bvo77xj60s] {
            background: #f0f0f0;
        }

        .pagination-controls button:disabled[b-bvo77xj60s] {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .pagination-controls button.active[b-bvo77xj60s] {
            background: #2c3e50;
            color: white;
            border-color: #2c3e50;
        }

.count-footer[b-bvo77xj60s] {
    text-align: center;
    padding: 10px;
    color: #666;
}

/*#endregion */


/*#region Attendance Infographic CSS */

.metrics-container[b-bvo77xj60s] {
    display: flex;
    margin-left: 10px;
    justify-content: left;
    gap: 10px;
    max-width: 600px;
    width: 356px;
}

.metric-box[b-bvo77xj60s] {
    background: white;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    padding: 10px 15px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    max-width: 250px;
    width: 250px;
}

.percentage[b-bvo77xj60s] {
    font-size: 48px;
    font-weight: normal;
    color: darkgreen;
    line-height: 1.2;
    margin-bottom: 8px;
}

.label[b-bvo77xj60s] {
    font-size: 22px;
    color: #555;
    text-transform: capitalize;
    letter-spacing: 0px;
}

.attendance-infographic[b-bvo77xj60s] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    border-radius: 16px;
    padding: 25px;
    max-width: 500px;
    margin: 20px auto;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-left: 0px solid darkgreen;
}

.attendance-header[b-bvo77xj60s] {
    color: #2c3e50;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

/*    .attendance-header:before {
        content: "📈";
        margin-right: 10px;
        font-size: 28px;
    }*/

.metric-grid[b-bvo77xj60s] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

.rate-grid[b-bvo77xj60s] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 15px;
}

.metric-item[b-bvo77xj60s] {
    background: white;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.rate-item[b-bvo77xj60s] {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-top: 4px solid;
    text-align: center;
}

.metric-label[b-bvo77xj60s] {
    font-size: 14px;
    color: #7f8c8d;
    margin-bottom: 5px;
}

.metric-value[b-bvo77xj60s] {
    font-size: 28px;
    font-weight: 700;
}

.rate-label[b-bvo77xj60s] {
    font-size: 16px;
    color: #2c3e50;
    margin-bottom: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rate-value[b-bvo77xj60s] {
    font-size: 36px;
    font-weight: 800;
}

.total-days .metric-value[b-bvo77xj60s] {
    color: #3498db;
}

.present-days .metric-value[b-bvo77xj60s] {
    color: #2ecc71;
}

.absent-days .metric-value[b-bvo77xj60s] {
    color: #e74c3c;
}

.late-days .metric-value[b-bvo77xj60s] {
    color: #f39c12;
}

.attendance-rate[b-bvo77xj60s] {
    border-top-color: #3498db;
}

    .attendance-rate .rate-value[b-bvo77xj60s] {
        color: #3498db;
    }

.punctuality-rate[b-bvo77xj60s] {
    border-top-color: #9b59b6;
}

    .punctuality-rate .rate-value[b-bvo77xj60s] {
        color: #9b59b6;
    }


.export-container[b-bvo77xj60s] {
    position: absolute;
    bottom: 20px;
    right: 20px;
    text-align: right;
}

.export-excel-btn[b-bvo77xj60s] {
    background-color: #217346; /* Excel green */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    .export-excel-btn:hover[b-bvo77xj60s] {
        background-color: #1a5f38; /* Darker green on hover */
    }

    .export-excel-btn:active[b-bvo77xj60s] {
        transform: translateY(1px);
    }

/*#endregion */

/*#region Mark Attendance CSS */

/* Attendance Marking Container */
.attendance-marking[b-bvo77xj60s] {
    width:100%;
    gap: 1.5rem;
    padding: 1.5rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Student Info Section */
.student-info[b-bvo77xj60s] {
    text-align: center;
}

.student-name[b-bvo77xj60s] {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
}

.instruction[b-bvo77xj60s] {
    font-size: 1rem;
    color: #666;
}

/* Compact Attendance Buttons */
.compact-attendance-buttons[b-bvo77xj60s] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.compact-button[b-bvo77xj60s] {
    display: flex;
    align-items: center;
    text-align: left;
    padding: 0.6rem 1rem;
    width: 100%;
    border-radius: 6px;
    border: 1px solid transparent;
    background-color: rgba(255, 255, 255, 0.8);
    transition: all 0.2s ease;
    min-height: auto;
}

    .compact-button i[b-bvo77xj60s] {
        font-size: 1.25rem;
        margin-right: 0.8rem;
        width: 24px;
        text-align: center;
    }

.button-text[b-bvo77xj60s] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.button-title[b-bvo77xj60s] {
    font-weight: 600;
    font-size: 0.95rem;
    color: inherit;
}

.button-subtitle[b-bvo77xj60s] {
    font-size: 0.8rem;
    color: rgba(0, 0, 0, 0.7);
    font-weight: normal;
}

/* Button Colors */
.present-button[b-bvo77xj60s] {
    color: #70ad47;
    border-color: #70ad47;
}

.late-button[b-bvo77xj60s] {
    color: #ffc000;
    border-color: #ffc000;
}

.absent-button[b-bvo77xj60s] {
    color: #ff0000;
    border-color: #ff0000;
}

/* Hover States */
.compact-button:hover[b-bvo77xj60s] {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.present-button:hover[b-bvo77xj60s] {
    background-color: rgba(112, 173, 71, 0.1);
}

.late-button:hover[b-bvo77xj60s] {
    background-color: rgba(255, 192, 0, 0.1);
}

.absent-button:hover[b-bvo77xj60s] {
    background-color: rgba(255, 0, 0, 0.1);
}

/* Active State */
.compact-button.active[b-bvo77xj60s] {
    color: white;
}

    .compact-button.active .button-subtitle[b-bvo77xj60s] {
        color: rgba(255, 255, 255, 0.9);
    }

.present-button.active[b-bvo77xj60s] {
    background-color: #70ad47;
}

.late-button.active[b-bvo77xj60s] {
    background-color: #ffc000;
}

.absent-button.active[b-bvo77xj60s] {
    background-color: #ff0000;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .attendance-buttons[b-bvo77xj60s] {
        flex-direction: column;
    }

    .action-button[b-bvo77xj60s] {
        padding: 1rem 0.5rem;
        flex-direction: row;
        gap: 0.75rem;
        justify-content: flex-start;
        padding-left: 1.5rem;
    }

        .action-button i[b-bvo77xj60s] {
            margin-bottom: 0;
            font-size: 1.5rem;
        }
}


/* Vertical Attendance Buttons */
.attendance-buttons-vertical[b-bvo77xj60s] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

    .attendance-buttons-vertical .action-button[b-bvo77xj60s] {
        display: flex;
        align-items: center;
        text-align: left;
        padding: 1rem 1.5rem;
        width: 100%;
        border-radius: 6px;
        transition: all 0.2s ease;
    }

        .attendance-buttons-vertical .action-button i[b-bvo77xj60s] {
            font-size: 1.5rem;
            margin-right: 1rem;
            min-width: 30px;
        }

        .attendance-buttons-vertical .action-button span[b-bvo77xj60s] {
            font-weight: 600;
            font-size: 1.1rem;
            margin-right: auto;
        }

.button-description[b-bvo77xj60s] {
    font-size: 0.85rem;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.7);
    margin-top: 0.25rem;
    display: block;
}

/* Active State for Vertical Buttons */
.attendance-buttons-vertical .action-button.active[b-bvo77xj60s] {
    color: white;
}

    .attendance-buttons-vertical .action-button.active .button-description[b-bvo77xj60s] {
        color: rgba(255, 255, 255, 0.9);
    }

/* Hover States */
.attendance-buttons-vertical .present-button:hover[b-bvo77xj60s] {
    background-color: rgba(112, 173, 71, 0.15);
}

.attendance-buttons-vertical .late-button:hover[b-bvo77xj60s] {
    background-color: rgba(255, 192, 0, 0.15);
}

.attendance-buttons-vertical .absent-button:hover[b-bvo77xj60s] {
    background-color: rgba(255, 0, 0, 0.15);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .attendance-buttons-vertical .action-button[b-bvo77xj60s] {
        padding: 0.8rem 1rem;
    }

        .attendance-buttons-vertical .action-button i[b-bvo77xj60s] {
            font-size: 1.25rem;
            margin-right: 0.75rem;
        }
}

/*#endregion */

/* Term Status Widget */
.term-status-widget[b-bvo77xj60s] {
    position: relative;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

.current-term-badge[b-bvo77xj60s] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-radius: 8px;
    cursor: default;
    transition: all 0.2s ease;
    position: relative;
    border: 1px solid rgba(0,0,0,0.1);
}

    .current-term-badge:hover[b-bvo77xj60s] {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        transform: translateY(-1px);
    }

    .current-term-badge i[b-bvo77xj60s] {
        font-size: 1.4em;
        width: 24px;
        text-align: center;
    }

.term-info[b-bvo77xj60s] {
    line-height: 1.3;
}

.term-title[b-bvo77xj60s] {
    font-weight: 600;
    font-size: 0.95em;
}

.term-dates[b-bvo77xj60s] {
    font-size: 0.85em;
    color: #555;
}

/* Tooltip Styling */
.academic-calendar-tooltip[b-bvo77xj60s] {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 300px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 15px;
    z-index: 9999;
    margin-bottom: 10px;
    opacity: 0;
    animation: tooltipFadeIn 0.2s ease-out forwards;
    border: 1px solid #eee;
}

.high-z-index-combo .dxbl-dropdown[b-bvo77xj60s] {
    z-index: 9999 !important; /* Override default */
}

.tooltip-header[b-bvo77xj60s] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

    .tooltip-header i[b-bvo77xj60s] {
        color: #666;
    }

    .tooltip-header h4[b-bvo77xj60s] {
        margin: 0;
        font-size: 1em;
        color: #333;
    }

.term-list[b-bvo77xj60s] {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 5px;
}

.term-item[b-bvo77xj60s] {
    padding: 8px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
}

    .term-item:last-child[b-bvo77xj60s] {
        border-bottom: none;
    }

.term-name[b-bvo77xj60s] {
    font-weight: 500;
    width: 110px;
    flex-shrink: 0;
}

.term-date-range[b-bvo77xj60s] {
    flex-grow: 1;
    font-size: 0.9em;
    color: #666;
}

.term-duration[b-bvo77xj60s] {
    font-size: 0.8em;
    color: #999;
    font-style: italic;
    width: 100%;
    margin-top: 3px;
    padding-left: 110px;
}

.is-break[b-bvo77xj60s] {
    background-color: #FFF9E6;
    border-radius: 4px;
    margin: 2px -5px;
    padding: 8px 5px;
}

/* Status Colors */
.term-status[b-bvo77xj60s] {
    background-color: rgba(112, 173, 71, 0.1);
    border-left: 3px solid #70ad47;
}

.holiday-status[b-bvo77xj60s] {
    background-color: rgba(255, 192, 0, 0.1);
    border-left: 3px solid #ffc000;
}

.no-term-status[b-bvo77xj60s] {
    background-color: rgba(200, 200, 200, 0.1);
    border-left: 3px solid #ccc;
}

/* Position the tooltip underneath */
.academic-calendar-tooltip.bottom-tooltip[b-bvo77xj60s] {
    top: 100%;
    bottom: auto;
    left: 0;
    margin-top: 8px;
    margin-bottom: 0;
    animation: tooltipFadeInUp-b-bvo77xj60s 0.2s ease-out forwards;
}

/* Bold labels and improved spacing */
.form-label-bold[b-bvo77xj60s] {
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #444;
    margin-bottom: 0.5rem;
    display: block;
}

/* Highlighted instruction */
.highlight-instruction[b-bvo77xj60s] {
    font-weight: 500;
    color: #333;
    font-size: 1.05rem;
    margin: 0.75rem 0;
    padding: 0.5rem;
    background-color: #f8f9fa;
    border-left: 3px solid #4a90e2;
}

/* Emphasized form groups */
.emphasized-group[b-bvo77xj60s] {
    margin: 1.25rem 0;
    padding: 1rem;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Highlighted reading age display */
.highlighted-result[b-bvo77xj60s] {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2c7be5;
    padding: 0.75rem;
    background-color: #f8fafd;
    border-radius: 4px;
    border: 1px solid #e1e5eb;
    text-align: center;
}

.student-info-container[b-bvo77xj60s] {
    text-align: left;
    margin-bottom: 1.5rem;
}

.student-info-card[b-bvo77xj60s] {
    background-color: #fff;
    border-radius: 6px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    border-left: 4px solid #4a90e2;
}

.student-name-highlight[b-bvo77xj60s] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eaeef2;
}

.highlight-instruction[b-bvo77xj60s] {
    font-weight: 500;
    color: #4a5568;
    font-size: 1rem;
    margin: 0.5rem 0 0;
    padding-top: 0.5rem;
}

/* Improved input styling */
.emphasized-input .dx-texteditor-input[b-bvo77xj60s] {
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0.75rem;
}

/* Reading Age Styling */
.reading-age-highlight[b-bvo77xj60s] {
    font-weight: bold;
    background-color: #E3F7FF;
    padding: 4px 8px;
    border-radius: 4px;
    border-left: 4px solid #1976D2;
    color: #0D47A1;
    display: inline-block;
}

/* Reading Phase Color Coding */
.phase-pre-reader[b-bvo77xj60s] {
    background: #FFEBEE;
    color: #C62828;
    border-color: #EF5350;
}

.phase-emergent[b-bvo77xj60s] {
    background: #FFF3E0;
    color: #E65100;
    border-color: #FF9800;
}

.phase-early[b-bvo77xj60s] {
    background: #FFF8E1;
    color: #F57F17;
    border-color: #FFC107;
}

.phase-developing[b-bvo77xj60s] {
    background: #E8F5E9;
    color: #2E7D32;
    border-color: #4CAF50;
}

.phase-fluent[b-bvo77xj60s] {
    background: #E3F2FD;
    color: #1565C0;
    border-color: #2196F3;
}

.phase-independent[b-bvo77xj60s] {
    background: #EDE7F6;
    color: #4527A0;
    border-color: #673AB7;
}

/* Shared phase styling */
.reading-age-highlight[b-bvo77xj60s],
[class^="phase-"][b-bvo77xj60s] {
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
    border-left: 4px solid;
    display: inline-block;
}

/* More prominent action button */
.primary-action[b-bvo77xj60s] {
    background-color: #4a90e2;
    color: white;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
}

    .primary-action:hover[b-bvo77xj60s] {
        background-color: #3a7bc8;
    }

/* Animations */
/* Adjust the animation to come from below */
@keyframes tooltipFadeInUp-b-bvo77xj60s {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Add some space below the widget */
.term-status-widget[b-bvo77xj60s] {
    margin-bottom: 20px; /* Space for tooltip */
}

/* Arrow styling (optional) */
.academic-calendar-tooltip.bottom-tooltip[b-bvo77xj60s]::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 20px;
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent white transparent;
    filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.1));
}

/* Scrollbar Styling */
.term-list[b-bvo77xj60s]::-webkit-scrollbar {
    width: 6px;
}

.term-list[b-bvo77xj60s]::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 3px;
}

/* Tooltip styling */
.academic-calendar-tooltip[b-bvo77xj60s] {
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

    .academic-calendar-tooltip.visible[b-bvo77xj60s] {
        opacity: 1;
        pointer-events: auto;
    }

/* Add gap between elements */
.bottom-tooltip[b-bvo77xj60s] {
    top: calc(100% + 5px);
}

.absence-reason-modal[b-bvo77xj60s] {
    padding: 20px;
}

.modal-buttons[b-bvo77xj60s] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}

.loading-overlay[b-bvo77xj60s] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.spinner-border[b-bvo77xj60s] {
    width: 3rem;
    height: 3rem;
}

.numeracy-score[b-bvo77xj60s] {
    text-align: center;
    padding: 4px;
    border-radius: 4px;
    font-weight: bold;
}

.score-low[b-bvo77xj60s] {
    background-color: #ffebee;
    color: #c62828;
}

.score-medium[b-bvo77xj60s] {
    background-color: #fff8e1;
    color: #ff8f00;
}

.score-high[b-bvo77xj60s] {
    background-color: #e8f5e9;
    color: #2e7d32;
}

.numeracy-total-score[b-bvo77xj60s] {
    text-align: center;
    padding: 4px;
    border-radius: 4px;
    font-weight: bold;
    background-color: #e3f2fd;
    color: #1565c0;
}

.question-grid[b-bvo77xj60s] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.question-item[b-bvo77xj60s] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.category-section[b-bvo77xj60s] {
    margin-bottom: 25px;
    padding: 15px;
    border: 1px solid #eee;
    border-radius: 5px;
}


/* Assessment Form Styles */
.assessment-detail-form[b-bvo77xj60s] {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.assessment-header[b-bvo77xj60s] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
}

    .assessment-header svg[b-bvo77xj60s] {
        color: #4a6baf;
    }

.compact-categories[b-bvo77xj60s] {
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 8px;
}

.category-section[b-bvo77xj60s] {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 6px;
}

    .category-section h5[b-bvo77xj60s] {
        margin: 0 0 0.5rem 0;
        font-size: 0.95rem;
        color: #495057;
    }

.max-score[b-bvo77xj60s] {
    color: #6c757d;
    font-weight: normal;
    font-size: 0.85rem;
}

.question-grid[b-bvo77xj60s] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
}

.question-item[b-bvo77xj60s] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .question-item label[b-bvo77xj60s] {
        font-size: 0.8rem;
        margin-bottom: 4px;
        color: #495057;
    }

.form-actions[b-bvo77xj60s] {
    display: flex;
    gap: 10px;
    margin-top: 1rem;
    justify-content: flex-end;
}

/* Button Styles */
.action-button[b-bvo77xj60s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    gap: 8px;
}

    .action-button i[b-bvo77xj60s] {
        font-size: 0.9rem;
    }

.primary-action[b-bvo77xj60s] {
    background-color: #4a6baf;
    color: white;
}

    .primary-action:hover[b-bvo77xj60s] {
        background-color: #3a5a9f;
    }

    .primary-action:disabled[b-bvo77xj60s] {
        background-color: #cccccc;
        cursor: not-allowed;
    }

.cancel-button[b-bvo77xj60s] {
    background-color: #f8f9fa;
    color: #495057;
    border: 1px solid #dee2e6;
}

    .cancel-button:hover[b-bvo77xj60s] {
        background-color: #e9ecef;
    }