body {
    background-color: #f6f6f6;
    font-family: Verdana, Geneva, Arial, sans-serif;
}


/* ------ menu bar buttons ------------- */
.button-menu {
    font-size: clamp(12px, 1vw, 16px) !important;
    /*font-size: clamp(.5rem, 1vw, 3rem) !important;*/
    padding: 4px 10px !important;
    white-space: nowrap !important;
    /* Optional: Add these for better responsive behavior */
    min-width: fit-content !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* For very small screens, allow text to wrap if absolutely necessary */
/*@media (max-width: 576px) {
    .button-menu {
        font-size: 11px !important;
        padding: 4px 8px !important;
        white-space: normal !important;*/ /* Allow wrapping on very small screens */
/*}
}*/


.practisefilter-mainoverlay {
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem; /* breathing room on small screens */
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    overflow: auto; /* allow the overlay to scroll if content is taller than viewport */
}

    /*Content card inside overlay*/
    .practisefilter-mainoverlay .content {
        background: #fff;
        width: min(2080px, 100%); /*never wider than 980px, but shrink to viewport */
        max-width: 100%;
        max-height: calc(100vh - 2rem); /*keep inside viewport with small margin */
        overflow: auto; /* internal scrolling for long content */
        border-radius: 0.5rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
        padding: 1rem;
        -webkit-overflow-scrolling: touch; /*smoother scrolling on mobile*/
        box-sizing: border-box;
    }

/* border for popup screens */
.popup-border {
    border: 2px solid #bbbbbb;
    border-radius: 8px;
    margin: 32px 0;
    padding: 24px 24px;
    background-color: #fafbfc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* ------ prompt labels ------------- */
.prompt-label {
    font-size: clamp(12px, 1vw, 16px) !important;
    /*font-size: clamp(.5rem, 1vw, 3rem) !important;*/
    padding: 4px 10px !important;
    white-space: nowrap !important;
    /* Optional: Add these for better responsive behavior */
    min-width: fit-content !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: right !important;
}


/* text box formatting */
.recessed-textbox {
    /* Base styling */
    padding: 8px 12px;
    border: 1px solid #ccc; /* A subtle border */
    background-color: #f0f0f0; /* A light, neutral background */
    border-radius: 4px; /* Slightly rounded corners can enhance the look */
    outline: none; /* Remove default focus outline if present */
    /* Recessed effect using inset box-shadows */
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2), /* Darker shadow from top/left */
    inset -1px -1px 3px rgba(255, 255, 255, 0.7); /* Lighter shadow from bottom/right */
    /* Optional: Transition for a smoother hover/focus effect */
    transition: all 0.2s ease-in-out;
    font-size: clamp(12px, 1vw, 16px) !important;
}

/* Optional: Adjust appearance on focus/hover for better UX */ .exam-close-btn {
    position: fixed;
    top: clamp(0.5rem, 2vh, 1rem);
    left: clamp(0.5rem, 2vw, 1rem);
    z-index: 1100;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    width: clamp(32px, 5vw, 40px);
    height: clamp(32px, 5vw, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
    cursor: pointer;
}

    /* Render an X inside the circle */
    .exam-close-btn::before {
        content: "✕"; /* or "×" */
        font-size: clamp(14px, 2vw, 18px);
        line-height: 1;
        color: #222; /* ensure contrast on light background */
    }

.recessed-textbox:focus {
    border-color: #999; /* Darker border on focus */
    box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.3), /* Slightly more pronounced shadows on focus */
    inset -1px -1px 4px rgba(255, 255, 255, 0.8);
}


.large-checkbox {
    width: 20px;
    height: 20px;
    /* Optional: vertical align fix if it looks off-center */
    vertical-align: middle;
    cursor: pointer;
}

.filter-dropdowns {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 2vw, 1.5rem); /* Responsive gap */
    width: 100%;
    padding: clamp(0.5rem, 2vw, 1rem); /* Responsive padding */
}

.filter-row {
    display: grid;
    /* Label column: 10% of viewport width, between 70px and 120px */
    grid-template-columns: clamp(70px, calc(10vw + 20px), 120px) 1fr;
    align-items: center;
    gap: clamp(0.5rem, calc(1vw + 0.25rem), 1rem); /* Fluid gap */
    width: 100%;
}

.filter-label {
    text-align: right;
    white-space: nowrap;
    /* Font size: 87.5% to 100% of base font, based on viewport */
    font-size: clamp(0.875rem, calc(0.8rem + 0.25vw), 1rem);
    padding-right: clamp(0.25rem, 1vw, 0.5rem);
}

.filter-dropdown {
    width: 100%;
    /* Dropdown: 50% of viewport width, between 200px and 400px */
    max-width: clamp(200px, calc(50vw - 80px), 400px);
}

.filter-sub-header {
    text-align: left;
    white-space: nowrap;
    /* Font size: 87.5% to 100% of base font, based on viewport */
    font-size: clamp(0.875rem, calc(0.8rem + 0.25vw), 1rem);
    margin-left: clamp(1rem, 1.5vw, 1.5rem);
}


/* ============================================
   MESSAGE BOX RESPONSIVE STYLES
   ============================================ */

.message-overlay {
    position: fixed;
    top: 0; /* Changed from 50% for better mobile support */
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: clamp(0.5rem, 2vw, 1rem); /* Add breathing room */
}

.message-overlay-content {
    /* Responsive width: 300px min, scales with viewport, 500px max */
    width: clamp(300px, 90vw, 500px);
    /* Responsive height: auto-fits content, but constrains to viewport */
    height: auto;
    min-height: clamp(150px, 20vh, 300px);
    max-height: calc(90vh - 2rem); /* Prevent overflow on small screens */

    overflow-y: auto;
    background: white;
    /* Responsive padding */
    padding: clamp(1rem, 3vw, 1.5rem);
    border-radius: clamp(0.5rem, 1vw, 0.75rem);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 2vh, 1rem); /* Spacing between children */
    /* Smooth transitions */
    transition: all 0.3s ease;
}

    /* Optional: Adjust text size responsively */
    .message-overlay-content h5 {
        font-size: clamp(1rem, 2.5vw, 1.25rem);
        margin: 0;
    }

    .message-overlay-content p {
        font-size: clamp(0.875rem, 2vw, 1rem);
        margin: 0;
    }

    /* Optional: Stack buttons vertically on very small screens */
    .message-overlay-content .button-menu {
        min-width: clamp(80px, 20vw, 120px);
    }

/* For very small screens: full width content */
@media (max-width: 400px) {
    .message-overlay-content {
        width: calc(100vw - 2rem);
        padding: 1rem;
    }
}

/* ============ message box section ends here =======================*/

/* ============================================
   FREE PRACTICE RESPONSIVE STYLES - MODERNIZED
   ============================================ */

.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: #495057;
}

/* Main container - FIXED: No scrolling on container itself */
.practice-container {
    position: fixed; /* ✓ Fix container to viewport */
    inset: 0; /* ✓ Cover entire viewport */
    display: flex;
    flex-direction: column;
    align-items: center; /* ✓ Center the wrapper horizontally */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: clamp(1rem, 2vw, 2rem);
    overflow: hidden; /* ✓ Prevent container scrolling */
}

.practice-fullpage {
    width: 100%; /* ✓ Full width of parent */
    max-width: 1600px; /* ✓ CONSTRAIN: Maximum width for ultra-wide screens */
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* ✓ Prevent fullpage scrolling */
}

/* Modern header with gradient and shadow */
.practice-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: clamp(1.25rem, 3vh, 2rem);
    border-radius: clamp(0.75rem, 1vw, 1rem);
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
    text-align: center;
    margin-bottom: clamp(1rem, 2vh, 1.5rem);
    border: 2px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0; /* ✓ PREVENT HEADER FROM SHRINKING */
    z-index: 100; /* ✓ Keep header above content */
    width: 100%; /* ✓ Full width within constrained parent */
}

    .practice-header h3 {
        font-size: clamp(1.5rem, 4vw, 2.25rem);
        margin: 0;
        color: #ffffff;
        font-weight: 700;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        letter-spacing: 0.5px;
    }

/* Content wrapper - FIXED: This is the ONLY scrollable area */
.practice-content-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1rem, 2.5vw, 2rem);
    flex: 1 1 auto; /* ✓ Takes remaining space between header and footer */
    overflow-y: auto; /* ✓ ONLY THIS SCROLLS */
    overflow-x: hidden;
    min-height: 0; /* ✓ Allow grid to shrink */
    padding-bottom: clamp(1rem, 2vh, 1.5rem); /* ✓ Add bottom padding for scroll space */
    width: 100%; /* ✓ Full width within constrained parent */
}

/* Desktop: sidebar appears */
@media (min-width: 992px) {
    .practice-content-wrapper {
        grid-template-columns: 1fr minmax(180px, 220px);
    }
}

.practice-main-content {
    display: flex;
    flex-direction: column;
    gap: clamp(1.5rem, 3vh, 2.5rem);
    min-height: min-content; /* ✓ Allow natural height */
    width: 100%; /* ✓ Full width of grid column */
}

/* Modern question card with enhanced styling */
.question-card {
    background: #ffffff;
    border: none;
    border-radius: clamp(0.75rem, 1.5vw, 1.25rem);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: visible;
}

    /* Subtle accent bar on left */
    .question-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 5px;
        height: 100%;
        background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
    }

    .question-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
    }

/* Question section with modern typography */
.question-section {
    margin-bottom: clamp(1.5rem, 3vh, 2rem);
    padding: clamp(1rem, 2vw, 1.5rem);
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: clamp(0.5rem, 1vw, 0.75rem);
    border-left: 4px solid #667eea;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.math-container {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    gap: clamp(0.75rem, 1.5vh, 1rem);
    flex-wrap: wrap;
    width: 100%;
    overflow-wrap: break-word;
}

.question-number {
    font-weight: 700;
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: clamp(35px, 6vw, 50px);
    height: clamp(35px, 6vw, 50px);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #ffffff;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.math-field {
    flex: 1;
    min-width: 0;
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.6;
    color: #212529;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Modern answers section with better visual hierarchy */
.answers-section {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.5vh, 1rem);
    margin-bottom: clamp(1.5rem, 3vh, 2rem);
    padding: clamp(1rem, 2vw, 1.5rem);
    background: #f8f9fa;
    border-radius: clamp(0.5rem, 1vw, 0.75rem);
}

.answer-option {
    padding: clamp(0.75rem, 1.5vw, 1rem);
    border-radius: clamp(0.5rem, 1vw, 0.75rem);
    transition: all 0.25s ease;
    background: #ffffff;
    border: 2px solid #e9ecef;
    cursor: pointer;
}

    .answer-option:hover {
        background: linear-gradient(135deg, #f0f4ff 0%, #e6eeff 100%);
        border-color: #667eea;
        transform: translateX(4px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
    }

.answer-label {
    display: flex;
    align-items: flex-start;
    gap: clamp(0.75rem, 1.5vw, 1rem);
    cursor: pointer;
    font-size: clamp(0.95rem, 1.8vw, 1.125rem);
    line-height: 1.6;
    color: #495057;
    width: 100%;
    overflow-wrap: break-word;
}

    .answer-label input[type="radio"],
    .answer-label input[type="checkbox"] {
        margin-top: 0.3em;
        flex-shrink: 0;
        width: clamp(18px, 2.5vw, 22px);
        height: clamp(18px, 2.5vw, 22px);
        cursor: pointer;
        accent-color: #667eea;
    }

.answer-letter {
    font-weight: 700;
    flex-shrink: 0;
    color: #667eea;
    font-size: clamp(1rem, 2vw, 1.25rem);
}

.answer-text {
    flex: 1;
    word-break: break-word;
    min-width: 0;
    overflow-wrap: break-word;
}

/* Modern correct answer display with vibrant success colors */
.correct-answer-display {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    border: 2px solid #28a745;
    border-radius: clamp(0.5rem, 1vw, 0.75rem);
    padding: clamp(0.75rem, 1.5vw, 1.25rem);
    margin: clamp(1rem, 2vh, 1.5rem) 0;
    font-size: clamp(1rem, 2vw, 1.25rem);
    box-shadow: 0 4px 16px rgba(40, 167, 69, 0.2);
}

.correct-answer-value {
    color: #155724;
    font-weight: 700;
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    margin-left: 0.5rem;
}

/* Modern solution display with warm accent colors */
.solution-display {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border: 2px solid #ffc107;
    border-radius: clamp(0.5rem, 1vw, 0.75rem);
    padding: clamp(1rem, 2vw, 1.75rem);
    margin: clamp(1rem, 2vh, 1.5rem) 0;
    box-shadow: 0 4px 16px rgba(255, 193, 7, 0.2);
    overflow-wrap: break-word;
}

.solution-label {
    font-weight: 700;
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    margin-bottom: clamp(0.75rem, 1.5vh, 1rem);
    color: #856404;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .solution-label::before {
        content: '💡';
        font-size: clamp(1.25rem, 3vw, 1.75rem);
    }

.solution-content {
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.7;
    color: #212529;
    padding-left: clamp(1rem, 2vw, 1.5rem);
    overflow-wrap: break-word;
}

/* Modern action buttons with gradient backgrounds */
.action-buttons {
    display: flex;
    justify-content: flex-start;
    margin-top: clamp(1.5rem, 3vh, 2rem);
    padding-top: clamp(1rem, 2vh, 1.5rem);
    border-top: 2px solid #e9ecef;
    gap: clamp(0.75rem, 1.5vw, 1rem);
    flex-wrap: wrap;
}

    .action-buttons .button-menu {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        border: none !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        padding: clamp(0.5rem, 1vw, 0.75rem) clamp(1rem, 2vw, 1.5rem) !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
    }

        .action-buttons .button-menu:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
        }

/* Modern sidebar with glassmorphism effect */
.practice-sidebar {
    display: flex;
    flex-direction: column;
    gap: clamp(0.75rem, 1.5vh, 1rem);
    padding: clamp(1rem, 2vw, 1.5rem);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: clamp(0.75rem, 1.5vw, 1.25rem);
    height: fit-content;
    position: sticky;
    top: clamp(1rem, 2vh, 1.5rem);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    align-self: flex-start;
}

.sidebar-button {
    width: 100%;
    font-size: clamp(0.95rem, 1.8vw, 1.125rem) !important;
}

/* Mobile: sidebar as floating action button */
@media (max-width: 991.98px) {
    .practice-sidebar {
        position: fixed;
        bottom: clamp(6rem, 12vh, 7rem);
        right: clamp(1rem, 3vw, 1.5rem);
        width: auto;
        z-index: 100;
        box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
    }

    .sidebar-button {
        width: auto;
        white-space: nowrap;
    }
}

/* Modern navigation - FIXED: Always visible at bottom */
.practice-navigation {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: clamp(1rem, 2vw, 1.5rem);
    border-radius: clamp(0.75rem, 1.5vw, 1.25rem);
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
    margin-top: clamp(1rem, 2vh, 1.5rem);
    flex-shrink: 0; /* ✓ PREVENT NAVIGATION FROM SHRINKING */
    z-index: 100; /* ✓ Keep navigation above content */
    width: 100%; /* ✓ Full width within constrained parent */
}

    .practice-navigation .button-menu {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
        border: none !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        padding: clamp(0.5rem, 1vw, 0.75rem) clamp(1.25rem, 2.5vw, 2rem) !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
    }

        .practice-navigation .button-menu:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
        }

.signup-message {
    text-align: center;
    padding: clamp(1.5rem, 3vw, 2rem);
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border-radius: clamp(0.5rem, 1vw, 0.75rem);
    border: 2px solid #ffc107;
}

    .signup-message h4 {
        font-size: clamp(1.125rem, 3vw, 1.5rem);
        color: #856404;
        margin: 0;
        font-weight: 700;
    }

/* Mobile optimizations */
@media (max-width: 767.98px) {
    .question-card {
        padding: clamp(1rem, 4vw, 1.5rem);
    }

    .math-container {
        flex-direction: column;
    }

    .answer-label {
        gap: 0.75rem;
    }

    .action-buttons {
        flex-direction: column;
    }

        .action-buttons .button-menu {
            width: 100%;
        }
}

/* Tablet optimizations */
@media (min-width: 768px) and (max-width: 991.98px) {
    .practice-container {
        padding: clamp(1.5rem, 3vw, 2rem);
    }

    .question-card {
        padding: clamp(1.5rem, 3vw, 2rem);
    }
}

/* ✓ REMOVED: Individual max-width constraints - now handled by .practice-fullpage wrapper */



/* ============ Free Practise section ends here =======================*/

/* ============================================
   EXAM ROOM FULLPAGE CONTAINER - WITH SCROLL
   ============================================ */

.exam-room-fullpage {
    position: fixed;
    inset: 0; /* Full viewport coverage */
    width: 100vw;
    height: 100vh;
    background: #ffffff;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Container doesn't scroll, content area does */
}

/* Scrollable content wrapper */
.exam-room-content {
    flex: 1;
    overflow-y: auto; /* ✓ VERTICAL SCROLLING ENABLED */
    overflow-x: hidden; /* Prevent horizontal scroll */
    width: 100%;
    height: 100%;
    /* Smooth scrolling on supported browsers */
    scroll-behavior: smooth;
    /* Better scroll performance on mobile */
    -webkit-overflow-scrolling: touch;
}

.exam-close-btn {
    position: fixed;
    top: clamp(0.5rem, 2vh, 1rem);
    left: clamp(0.5rem, 2vw, 1rem);
    z-index: 1100;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    width: clamp(32px, 5vw, 40px);
    height: clamp(32px, 5vw, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
    cursor: pointer;
}

    /* Render an X inside the circle */
    .exam-close-btn::before {
        content: "✕"; /* or "×" */
        font-size: clamp(14px, 2vw, 18px);
        line-height: 1;
        color: #222; /* ensure contrast on light background */
    }

    .exam-close-btn:hover {
        background: rgba(220, 53, 69, 0.1);
        transform: scale(1.1);
    }


/* Ensure child components fill available space */
.exam-room-content > * {
    min-height: 100%;
    width: 100%;
}


/* ============================================
   TABLE FORMATTING for Questions and Answers
   ============================================ */

table {
    border-collapse: collapse;
    margin: 1em 0;
    width: auto;
    min-width: 400px;
}

th, td {
    border: 1px solid #888;
    padding: 8px 12px;
}

th {
    background: #f0f0f0;
    font-weight: bold;
}

/* Keep center for normal tables, but not for Radzen grids */
table:not(.rz-data-table) th,
table:not(.rz-data-table) td {
    text-align: center;
}

/* Radzen DataGrid cells left-aligned */
.rz-data-table th,
.rz-data-table td {
    text-align: left;
}


/* ============================================
   FONT FORMATTING 
   ============================================ */

/* Verdana:IBM clones, Geneva:Macs, Arial:both, sans-serif: default */
.default-fonts {
    font-family: Verdana, Verdana, Geneva, Tahoma, sans-serif, Arial, sans-serif;
}

h3 {
    font-weight: bold;
    font-size: clamp(1rem, 2.5vw, 1.75rem); /* min, fluid, max */
}


/* ============================================
   RADZEN GRID FORMATTING 
   ============================================ */

/* Left-align headers and cells for Radzen grids inside question-block */
.question-block .rz-data-table th,
.question-block .rz-data-table td {
    text-align: left;
}

/* If your Radzen uses .rz-datatable wrapper, include this as well */
.question-block .rz-datatable th,
.question-block .rz-datatable td {
    text-align: left;
}

/* Responsive grid column for custom exam filter */
.responsive-grid-col {
    flex: 1 1 45%; /* Grow to fill, shrink if needed, stick to roughly 45% width initially */
    min-width: 250px; /* Force wrap if screen is narrower than (300px * 2) + gap */
    max-height: 300px;
    overflow-y: auto;
    overflow-x: auto; /* Or auto if you prefer */
    padding: 10px;
    /* Reset text align if effected by other styles */
    text-align: left;
}

    /* Optional: Ensure table headers inside don't break layout */
    .responsive-grid-col .rz-datatable-thead th {
        white-space: nowrap;
    }








/* =========================================================================================================== */

.app-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: black; /* or your header's color */
    padding: 1rem 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex; /* Example for layout */
    justify-content: space-between;
    align-items: center;
}

.content-area {
    padding-top: 200px; /* Adjust based on your header's actual height */
}


/*h3 {
    font-weight: bold;
}*/

.fixed-width {
    display: inline-block;
    width: 5ch;
    text-align: right; /* or left/center as needed */
    font-family: monospace; /* ensures each character is the same width */
}

.col-headings {
    font-weight: bold;
    font-size: 16px;
    color: blueviolet;
}

/* ---------- combo or dropdown box --------*/
.lwu-combo-box {
    color: red;
    font-size: large;
}

/* ---------- radio button lists ----------*/
.radio-list {
    color: green;
}

/* ------ check box lists ---------------- */
.checkbox-list {
    color: orange;
}

/* ----  navigation buttons like Next and Back ------- */

.button-nav {
    background: #60D394;
    border: 1px solid black;
    font-weight: bold;
}

/* ------ action buttons like Submit, Review, ShowAnswers and Show Soultion ------- */
.button-action {
    background: #7FFFD4;
    border: 1px solid black;
    font-weight: bold;
}

.btn-primary {
    color: white;
    font-weight: bold;
}

.button-bar {
    background-color: beige;
    border: 1px solid black;
    font-weight: bold;
}

/* ------ menu bar buttons ------------- */
/*.button-menu {
    font-size: clamp(14px, 1.2vw, 18px);
}*/







/* -------- remove space on left of control --------------- */
.close-gap {
    margin-left: -4px;
}

/*.btn-close {
    color: red;
}*/

/* --------- footer ----------- */
footer {
    background: darkgray;
    color: lightgray;
}

/* --------- input box ----------- */
.input-box {
    border: 2px solid black;
    padding: 4px 8px;
    border-radius: 5px;
    width: 100%;
    /*background-color: white;*/
}

    .input-box input {
        border: none;
        outline: none; /* Removes the default input focus border */
        width: 100%;
        background-color: white;
    }

/* ---------  mandatory selections ------------- */
.mandatory {
    /*    background-color: burlywood; */
    border: 1px solid black;
    padding: 10px;
}

/* ---------  optional selections ------------- */
.optional {
    /*background-color: cornsilk;*/
    border: 1px solid black;
    padding: 10px 60px 22px 5px;
}

.notice-board {
    background-image: url('images/MessageBoard.png');
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /*    border-style: solid;
    border-color: brown;*/
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: -20px;
    padding: 0px;
}

.radio-btns-horizontal {
    display: flex;
    align-items: center;
    padding: 10px 10px 10px 30px;
    border-style: solid;
    margin-top: 15px;
}


/* ------- this controls a page displaying over another page ----------- */
.overlay {
    position: fixed;
    top: 40%;
    left: 0;
    width: 100%;
    height: 100vh; /* Adjust percentage or use px like 600px */
    overflow: hidden; /* Ensures content stays within bounds */
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transform: translateY(-50%);
}

.overlay-content {
    top: 15%;
    width: 60%; /* Adjust for 9-10 columns */
    height: 60vh;
    max-height: 90vh; /* Customize height */
    overflow-y: auto; /* Enables scrolling if needed */
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
    /*    border: solid;
    border-width: 4px;
    border-color: red;*/
    align-items: center;
}

.subscribe-overlay {
    position: fixed;
    top: 0; /* Changed from 40% */
    left: 0;
    width: 100%;
    height: 100%; /* Changed from 100vh */
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transform: none; /* Removed translateY */
}

.subscribe-content {
    /*top: 15%;*/
    position: relative;
    width: 90%; /* Adjust for 9-10 columns */
    height: 90vh;
    max-height: 90vh; /* Customize height */
    overflow-y: auto; /* Enables scrolling if needed */
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
    /*    border: solid;
    border-width: 4px;
    border-color: red;*/
    align-items: center;
}

/*.exam-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    min-height: 100vh;  use min-height instead of fixed height 
    height: auto;  enable vertical scroll when needed 
    overflow: hidden;  Ensures content stays within bounds 
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 999;
}


.exam-content {
    top: 5%;
    width: 100vw;
    height: 100vh;
    max-height: none;  don't clamp to viewport 
    overflow-y: visible;  let outer overlay handle scrolling 
    background: white;
    padding: 0px;
    border-radius: 8px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
    align-items: center;
}*/

.exam-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    min-height: 100vh;
    height: auto;
    overflow-y: auto; /* allow vertical scroll */
    overflow-x: hidden;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: flex-start; /* content starts at top */
    z-index: 999;
}

.exam-content {
    /* no fixed viewport height */
    width: 100vw;
    min-height: 100vh;
    height: auto;
    max-height: none;
    overflow-y: visible; /* overlay handles scrolling */
    background: white;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
    align-items: center;
}


    /* Responsive overlay & content for exam filter / modal-style panels */

    /* Overlay: center content and allow page-level scrolling when needed */
    /*.exam-overlay {
    position: fixed;
    inset: 0;  top:0; right:0; bottom:0; left:0; 
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;  breathing room on small screens 
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    overflow: auto;  allow the overlay to scroll if content is taller than viewport 
}*/

    /*Content card inside overlay*/
    /*.exam-content {
    background: #fff;
    width: min(2080px, 100%);  never wider than 980px, but shrink to viewport 
    max-width: 100%;
    max-height: calc(100vh - 2rem);  keep inside viewport with small margin 
    overflow: auto;  internal scrolling for long content 
    border-radius: 0.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    padding: 1rem;
    -webkit-overflow-scrolling: touch;  smoother scrolling on mobile 
    box-sizing: border-box;
}*/

    /* When using question-block inside modal, give some internal spacing and prevent overflow bleed */
    /*.exam-content .question-block {
        margin: 0;
        padding: 0.5rem 0;
    }*/

    /* Make the close button sit above content on small screens without pushing layout */
    /*.exam-overlay .btn-close {
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
    z-index: 1100;
}*/


    /* Data grid / tables inside modal should scroll horizontally if too wide */
    .exam-content table,
    .exam-content .radzen-datagrid,
    .exam-content .rz-datatable {
        max-width: 100%;
        overflow-x: auto;
        display: block;
    }

/* Compact layout for narrow screens */
@media (max-width: 767.98px) {
    .exam-content {
        width: calc(100% - 1rem);
        max-height: calc(100vh - 1.5rem);
        padding: 0.75rem;
        border-radius: 0.4rem;
    }

        /* Make action buttons wrap and stack nicely */
        .exam-content .action-buttons,
        .exam-content .radio-btns-horizontal,
        .exam-content .filter-radio {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        /* Reduce spacing inside form groups on small screens */
        .exam-content .form-group {
            margin-bottom: 0.6rem;
        }
}

/* Medium screens: tighter max-width */
@media (min-width: 768px) and (max-width: 991.98px) {
    .exam-content {
        width: min(760px, 100%);
        padding: 0.9rem;
    }
}

/* Utility: ensure full-width inputs inside modal */
.exam-content .form-control,
.exam-content input[type="datetime-local"],
.exam-content input[type="time"],
.exam-content .recessed-textbox,
.exam-content .radzen-dropdown {
    width: 100%;
    box-sizing: border-box;
}




.exam-details-scroll {
    /* take all available height in its parent */
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/*.exam-details-body-scroll {
    max-height: calc(100vh - 200px);*/ /* adjust 200px for header/nav height */
/*overflow-y: auto;
    overflow-x: hidden;
}*/

.exam-details-body-scroll {
    height: auto;
    max-height: none; /* let it grow with content */
    overflow-y: visible; /* let the parent overlay/column handle scroll */
}

.full-height-border {
    height: 100vh;
    min-height: 100vh;
    overflow-y: auto; /* enable column scroll */
    border-left: 2px solid #212529;
}

.dashboard-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Ensure full viewport width */
    height: 100vh; /* Ensure full viewport height */
    overflow: hidden; /* Ensures content stays within bounds */
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    display: flex;
    justify-content: center;
    align-items: center; /* Center contents vertically */
    z-index: 999;
}


.dashboard-content {
    top: 0;
    width: 100vw;
    height: 100vh;
    max-height: 100vh; /* Customize height */
    overflow-y: auto; /* Enables scrolling if needed */
    background: white;
    padding: 0px;
    border-radius: 8px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.2);
    /*    border: solid;
    border-width: 4px;
    border-color: red;*/
    align-items: center;
}

/*.message-overlay {
    position: fixed;
    top: 50%;
    left: 0;
    width: 100%;
    height: 100%;*/ /* Adjust percentage or use px like 600px */
/*overflow: hidden;*/ /* Ensures content stays within bounds */
/*background: rgba(0, 0, 0, 0.5);*/ /* Semi-transparent background */
/*display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    transform: translateY(-50%);
}

.message-overlay-content {
    width: 40%;*/ /* Adjust for 9-10 columns */
/*height: 20vh;
    max-height: 20vh;*/ /* Customize height */
/*overflow-y: auto;*/ /* Enables scrolling if needed */
/*background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;*/ /* Stack items vertically */
/*}*/


/* Styles for the modal overlay */
.modal-overlay {
    /* Fixed position to cover the entire viewport */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Semi-transparent black background */
    background-color: rgba(0, 0, 0, 0.6);
    /* Flexbox for centering content */
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
    /* Ensure it's on top of other content */
    z-index: 1000;
    /* Optional: Add a fade-in animation for the overlay */
    opacity: 0;
    animation: fadeIn 0.3s forwards;
}

/* Styles for the modal content box */
.modal-content {
    background-color: #fff; /* White background for the modal */
    padding: 2.5rem; /* Ample padding inside the modal */
    border-radius: 0.75rem; /* Rounded corners */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); /* Soft shadow for depth */
    max-width: 60%; /* Max width to ensure responsiveness */
    max-height: 90%; /* Max height to ensure responsiveness */
    overflow-y: auto; /* Enable scrolling if content is too long */
    position: relative; /* Needed for potential close button positioning */
    /* Optional: Add a subtle scale-in animation for the content */
    transform: scale(0.9);
    animation: scaleIn 0.3s forwards;
    /* --- New styles for centering content within the modal-content --- */
    display: flex; /* Use flexbox for internal centering */
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center items vertically */
    align-items: center; /* Center items horizontally */
    text-align: center; /* Fallback for inline text centering */
}

/* Keyframe animations for smooth transitions - 
   works with animation in modal & modal-content */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}


.brand-initial {
    font-size: 1.5em;
    line-height: 1;
}

/* formatting for Hero text */
.vertical-center-content {
    display: flex;
    margin-top: 50px;
    flex-direction: column;
    justify-content: center;
    /* Important: Define a height for vertical centering to be visible */
    /* Adjust this value as needed for your layout */
    min-height: 500px; /* Example height */
    /*background-color:azure;*/
}





/* this controls navigation bars 
    -- bootstrap .blablabla; 
    -- css blablabla;
*/
/**/

/*.container-fluid {
    padding: 0 !important;
}*/

/*.bg-dark {
    height: 40px;
    align-items: center;
}*/


.navbar-nav {
    display: flex;
    justify-content: flex-start;
    gap: 30px /* affects space between elements */
}

/*.navbar-nav li {
    display: inline-block;
    margin-right: 10px;
}

.navbar-nav li:not(:last-child)::after {
    content: " | ";
}*/


.nav-bar {
    font-size: 16px /* All nav items will inherit this size */
}


.nav-item {
    display: inline-block;
    /*    border-left: solid;
    border-right: solid;*/
}


/*using only css - no bootstrap*/
nav {
    /*border: 1px solid #333;*/
    width: 100%;
    margin: 1rem auto;
    background-color: #eee;
    /*align-items: center;*/ /*doesn't do anything */
    /*justify-content: center;*/ /*doesn't do anything for css; center justifies for bootstrap */
    /*justify-content: space-between;*/
}


    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        /*margin-right: auto;*/ /* doesn't do anything */
        font-size: .9rem;
        display: flex; /* this makes navbar horizontal in css */
        align-items: center;
        /*justify-content: center;*/ /* this aligns all LI items to center of bar */
    }


    /*nav li:last-child {
        margin-left: auto;*/ /*all elements move to far right of bar; 1st element stays far left*/
    /*font-size: 1rem;
        padding: .2rem 1rem .2rem 1rem;
        color: #0966C2;
        
    }*/

    /*nav li {*/
    /*display: inline-block;*/
    /*padding: 0rem .5rem 0 1rem;*/
    /*margin-right: auto;  this equally spaces all LI elements in bar*/

    /*}*/

    /*nav li:hover {

}*/

    nav a {
        color: #00bff3;
        text-decoration: none;
        font-weight: 600;
        display: block;
        padding: 0.2rem .5rem; /* controls padding around elements in bar */
    }

.logo-overflow {
    position: absolute;
    top: 1px; /* Move image up */
    left: 0;
    width: 90px; /* Larger than original */
    height: 100px; /* Larger than original */
    z-index: 10; /* Ensure it appears above other elements */
    margin-left: 5px;
    /* Optionally, allow the image to overflow its parent */
    /* No need to set overflow on parent if parent is not overflow:hidden */
}

.full-height-border {
    height: 100vh; /* Full viewport height */
    min-height: 100vh;
    /* Optional: If your parent is already 100vh, you can use height: 100% */
    border-left: 2px solid #212529; /* Bootstrap's .border-dark color */
    /* Remove Bootstrap's border-start if you want to control thickness/color here */
}


/*nav a.focus {
    background-color: #f0c808;
    color: black;
}*/

/* this puts an icon on top of the label */
/*nav span::before {
    content: "\a";
    white-space: pre;
}*/

/*nav a:hover {
    color: #ff583d;
    background-color: #f0c808;
}

.logo {
    flex-basis: 500px;
    text-align: left;
}*/

/* for displaying data grids with fixed height and scrollable */
/* Make RadzenDataGrid body scrollable and fill the parent height */
.rz-datatable .rz-datatable-table-wrapper {
    max-height: 100% !important;
    overflow-y: auto !important;
}

.rz-datatable {
    height: 100% !important;
    display: flex;
    flex-direction: column;
}

.rz-datatable-table-wrapper {
    flex: 1 1 auto;
}


.dash-labels {
    font-size: 18px;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

/* sizing for modal popups */

.wide-modal {
    max-width: 1000px; /* or any width you prefer */
    width: 90vw; /* optional: responsive width */
}

/* styles for questions and answers */
.question-block {
    border: 2px solid #bbbbbb;
    border-radius: 8px;
    margin: 32px 0;
    padding: 24px 24px;
    background-color: #fafbfc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.question-header {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 12px;
    display: block;
}

.answer-block {
    border: 1px solid #dddddd;
    border-radius: 6px;
    margin: 16px 0;
    padding: 12px 16px;
    background-color: #ffffff;
}

.answer-container {
    margin-top: 18px;
}

.answer-label {
    font-weight: bold;
    margin-right: 12px;
    display: inline-block;
}

.answer-display {
    margin: 8px 0 16px 0;
}

.answer-controls {
    margin-top: 10px;
    display: flex;
    gap: 16px;
}

/* notes formating */

.notes-center {
    /* Existing styles for .notes would go here */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Important for vertical centering */
    /* Add any other desired styling for notes */
    /* For example, if you wanted a border or padding: */
    /* border: 1px solid #ccc; */
    /* padding: 20px; */
}

.dialog-box-header {
    font-size: 110%;
    font-weight: bold;
    color: blueviolet;
}

/* Verdana:IBM clones, Geneva:Macs, Arial:both, sans-serif: default */
/*.default-fonts {
    font-family: Verdana, Verdana, Geneva, Tahoma, sans-serif, Arial, sans-serif;
}*/

/* formatting for tables in questions and answers */
/*table {
    border-collapse: collapse;
    margin: 1em 0;
    width: auto;
    min-width: 400px;
}

th, td {
    border: 1px solid #888;
    padding: 8px 12px;
    text-align: center;
}

th {
    background: #f0f0f0;
    font-weight: bold;
}*/

/* formatting for timer */

/* formatting for dropdown menu */
.dropdown-container {
    position: relative;
    /* Ensure this container is as wide as the content it needs to span,
           or that it's the element that defines the "far right" of your row.
           If it's an inline element, it will only be as wide as its content.
           You might need to adjust the display property of .dropdown-container
           or its parent if you want it to occupy the full right side of a row.
        */
    display: inline-block; /* Or block, depending on your layout context */
}

.dropdown-menu {
    position: absolute;
    top: 100%; /* Still position it below the toggle */
    right: 0; /* <--- THIS IS THE KEY CHANGE */
    /* If you also had left: 0; remove it */

    min-width: 160px; /* Adjust as needed */
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1000;
    display: none;
}

    .dropdown-menu.show {
        display: block;
    }

/* Basic styling for the toggle button */
.dropdown-toggle {
    padding: 8px 12px;
    border: 1px solid #ddd;
    background-color: #f0f0f0;
    cursor: pointer;
}