:root,
body.light {
    --primary: #006493;
    --on-primary: #ffffff;
    --primary-container: #cae6ff;
    --on-primary-container: #001e30;
    --secondary: #50606e;
    --on-secondary: #ffffff;
    --secondary-container: #d3e5f5;
    --on-secondary-container: #0c1d29;
    --tertiary: #65587b;
    --on-tertiary: #ffffff;
    --tertiary-container: #ebddff;
    --on-tertiary-container: #201634;
    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #410002;
    --background: #fcfcff;
    --on-background: #1a1c1e;
    --surface: #f9f9fc;
    --on-surface: #1a1c1e;
    --surface-variant: #dde3ea;
    --on-surface-variant: #41474d;
    --outline: #72787e;
    --outline-variant: #c1c7ce;
    --shadow: #000000;
    --scrim: #000000;
    --inverse-surface: #2e3133;
    --inverse-on-surface: #f0f0f3;
    --inverse-primary: #8dcdff;
    --surface-dim: #d9dadd;
    --surface-bright: #f9f9fc;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f3f3f6;
    --surface-container: #edeef1;
    --surface-container-high: #e8e8eb;
    --surface-container-highest: #e2e2e5;
}

body.dark {
    --primary: #8dcdff;
    --on-primary: #00344f;
    --primary-container: #004b70;
    --on-primary-container: #cae6ff;
    --secondary: #b7c9d9;
    --on-secondary: #22323f;
    --secondary-container: #384956;
    --on-secondary-container: #d3e5f5;
    --tertiary: #cfc0e8;
    --on-tertiary: #362b4b;
    --tertiary-container: #4d4162;
    --on-tertiary-container: #ebddff;
    --error: #ffb4ab;
    --on-error: #690005;
    --error-container: #93000a;
    --on-error-container: #ffb4ab;
    --background: #1a1c1e;
    --on-background: #e2e2e5;
    --surface: #111416;
    --on-surface: #e2e2e5;
    --surface-variant: #41474d;
    --on-surface-variant: #c1c7ce;
    --outline: #8b9198;
    --outline-variant: #41474d;
    --shadow: #000000;
    --scrim: #000000;
    --inverse-surface: #e2e2e5;
    --inverse-on-surface: #2e3133;
    --inverse-primary: #006493;
    --surface-dim: #111416;
    --surface-bright: #37393c;
    --surface-container-lowest: #0c0e11;
    --surface-container-low: #1a1c1e;
    --surface-container: #1e2022;
    --surface-container-high: #282a2d;
    --surface-container-highest: #333537;
}
body:not(.loaded) {
    display: none;
}

/* html, body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
}

main {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
} */

.highlight {
    background-color: var(--primary);
    color: var(--on-primary);
    font-weight: bold;
}

.hidden {
    display: none !important;
}

.pointer {
    cursor: pointer;
}

#recordings{
    overflow: hidden !important;
}

.handle {
    cursor: move;
}

.clickable {
    transition: box-shadow 0.3s ease !important;
    cursor: pointer !important;
    box-shadow: var(--elevate1) !important;
}

.clickable:hover {
    box-shadow: var(--elevate3) !important;
}

.question-item>nav>button.toggle-question-button {
    background-color: var(--surface-variant);
    color: var(--on-surface-variant);
}

.question-item.open>nav>button.toggle-question-button {
    background-color: var(--primary);
    color: var(--on-primary);
}

.question-item>nav>button.toggle-question-button>nav>i {
    transition: transform 0.3s ease;
    transform: rotate(0deg);
}

.question-item.open>nav>button.toggle-question-button>nav>i {
    transition: transform 0.3s ease;
    transform: rotate(180deg);
}

.question-content-wrapper {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.question-item.open .question-content-wrapper {
    max-height: 1000px;
    /* set high enough */
    opacity: 1;
}

/* .question-slot[data-swapy-highlighted] {
    background: var(--surface-container-highest);
}

.question-item[data-swapy-dragging] {
    opacity: 0.6;
} */

#latex-preview .text {
    display: inline;
}

#latex-preview .math.inline {
    display: inline;
    vertical-align: text-bottom;
}

#latex-preview .math.inline {
    font-size: 0.95rem;
}

#internet-status-badge {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.page-break-inside {
    page-break-inside: avoid !important;
}

.field.min>textarea {
    max-block-size: 100rem !important;
}

.fade-in {
    opacity: 0;
    transition: opacity 0.4s ease-in;
}

.fade-in.show {
    opacity: 1;
}

.aspect-ratio-16-9 {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
    border-radius: 1rem;
}

.aspect-ratio-16-9 iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

::view-transition-new(root) {
    animation: 0.4s ease-out both fade-in;
}