/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap');
@import url("https://use.typekit.net/jgr8vvt.css");
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-neutral-100: oklch(97% 0 0);
    --color-neutral-900: oklch(20.5% 0 0);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-xs: 20rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tight: -0.025em;
    --tracking-wide: 0.025em;
    --tracking-widest: 0.1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-relaxed: 1.625;
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --blur-sm: 8px;
    --aspect-video: 16 / 9;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --spacing-vh1: min(1vh, 10px);
    --spacing-vh2: min(2vh, 20px);
    --spacing-vh3: min(3vh, 30px);
    --spacing-vh4: min(4vh, 40px);
    --spacing-vh5: min(5vh, 50px);
    --spacing-vh6: min(6vh, 60px);
    --spacing-vh8: min(8vh, 80px);
    --spacing-vh10: min(10vh, 100px);
    --spacing-vw1: min(1vw, 10px);
    --spacing-vw2: min(2vw, 20px);
    --spacing-vw3: min(3vw, 30px);
    --spacing-vw4: min(4vw, 40px);
    --spacing-vw5: min(5vw, 50px);
    --spacing-vw6: min(6vw, 60px);
    --spacing-vw7: min(7vw, 70px);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }
  .pointer-events-none {
    pointer-events: none;
  }
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
  }
  .absolute {
    position: absolute;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }
  .start {
    inset-inline-start: var(--spacing);
  }
  .end {
    inset-inline-end: var(--spacing);
  }
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
  .top-1 {
    top: calc(var(--spacing) * 1);
  }
  .top-1\/2 {
    top: calc(1 / 2 * 100%);
  }
  .top-2 {
    top: calc(var(--spacing) * 2);
  }
  .top-12 {
    top: calc(var(--spacing) * 12);
  }
  .top-\[calc\(100\%\+0\.5rem\)\] {
    top: calc(100% + 0.5rem);
  }
  .top-\[calc\(var\(--layout-header-height\)\+1\.5rem\)\] {
    top: calc(var(--layout-header-height) + 1.5rem);
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .right-3 {
    right: calc(var(--spacing) * 3);
  }
  .right-4 {
    right: calc(var(--spacing) * 4);
  }
  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }
  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
  .left-2 {
    left: calc(var(--spacing) * 2);
  }
  .left-4 {
    left: calc(var(--spacing) * 4);
  }
  .left-5 {
    left: calc(var(--spacing) * 5);
  }
  .-z-10 {
    z-index: calc(10 * -1);
  }
  .z-0 {
    z-index: 0;
  }
  .z-10 {
    z-index: 10;
  }
  .z-20 {
    z-index: 20;
  }
  .z-30 {
    z-index: 30;
  }
  .z-40 {
    z-index: 40;
  }
  .z-70 {
    z-index: 70;
  }
  .z-\[60\] {
    z-index: 60;
  }
  .z-\[61\] {
    z-index: 61;
  }
  .z-\[70\] {
    z-index: 70;
  }
  .z-\[80\] {
    z-index: 80;
  }
  .z-auto {
    z-index: auto;
  }
  .col-1 {
    grid-column: 1;
  }
  .col-2 {
    grid-column: 2;
  }
  .col-3 {
    grid-column: 3;
  }
  .col-4 {
    grid-column: 4;
  }
  .col-6 {
    grid-column: 6;
  }
  .col-8 {
    grid-column: 8;
  }
  .col-10 {
    grid-column: 10;
  }
  .col-11 {
    grid-column: 11;
  }
  .col-12 {
    grid-column: 12;
  }
  .col-auto {
    grid-column: auto;
  }
  .float-left {
    float: left;
  }
  .float-right {
    float: right;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .m-0 {
    margin: calc(var(--spacing) * 0);
  }
  .m-1 {
    margin: calc(var(--spacing) * 1);
  }
  .m-3 {
    margin: calc(var(--spacing) * 3);
  }
  .m-5 {
    margin: calc(var(--spacing) * 5);
  }
  .m-auto {
    margin: auto;
  }
  .m-vw1 {
    margin: var(--spacing-vw1);
  }
  .m-vw2 {
    margin: var(--spacing-vw2);
  }
  .m-vw3 {
    margin: var(--spacing-vw3);
  }
  .m-vw4 {
    margin: var(--spacing-vw4);
  }
  .m-vw5 {
    margin: var(--spacing-vw5);
  }
  .m-vw6 {
    margin: var(--spacing-vw6);
  }
  .mx-1 {
    margin-inline: calc(var(--spacing) * 1);
  }
  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }
  .mx-3 {
    margin-inline: calc(var(--spacing) * 3);
  }
  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }
  .mx-5 {
    margin-inline: calc(var(--spacing) * 5);
  }
  .mx-12 {
    margin-inline: calc(var(--spacing) * 12);
  }
  .mx-auto {
    margin-inline: auto;
  }
  .my-0 {
    margin-block: calc(var(--spacing) * 0);
  }
  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }
  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }
  .my-6 {
    margin-block: calc(var(--spacing) * 6);
  }
  .-mt-1 {
    margin-top: calc(var(--spacing) * -1);
  }
  .-mt-2 {
    margin-top: calc(var(--spacing) * -2);
  }
  .-mt-vh1 {
    margin-top: calc(var(--spacing-vh1) * -1);
  }
  .-mt-vh2 {
    margin-top: calc(var(--spacing-vh2) * -1);
  }
  .-mt-vh6 {
    margin-top: calc(var(--spacing-vh6) * -1);
  }
  .-mt-vh10 {
    margin-top: calc(var(--spacing-vh10) * -1);
  }
  .mt-0 {
    margin-top: calc(var(--spacing) * 0);
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }
  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }
  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }
  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }
  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }
  .mt-auto {
    margin-top: auto;
  }
  .mt-vh1 {
    margin-top: var(--spacing-vh1);
  }
  .mt-vh2 {
    margin-top: var(--spacing-vh2);
  }
  .mt-vh3 {
    margin-top: var(--spacing-vh3);
  }
  .mt-vh4 {
    margin-top: var(--spacing-vh4);
  }
  .mt-vh5 {
    margin-top: var(--spacing-vh5);
  }
  .mt-vh6 {
    margin-top: var(--spacing-vh6);
  }
  .mt-vh8 {
    margin-top: var(--spacing-vh8);
  }
  .mt-vh10 {
    margin-top: var(--spacing-vh10);
  }
  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }
  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }
  .mr-3 {
    margin-right: calc(var(--spacing) * 3);
  }
  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }
  .mr-5 {
    margin-right: calc(var(--spacing) * 5);
  }
  .mr-vw1 {
    margin-right: var(--spacing-vw1);
  }
  .mr-vw2 {
    margin-right: var(--spacing-vw2);
  }
  .mr-vw4 {
    margin-right: var(--spacing-vw4);
  }
  .mr-vw5 {
    margin-right: var(--spacing-vw5);
  }
  .mb-0 {
    margin-bottom: calc(var(--spacing) * 0);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }
  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }
  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }
  .mb-vh1 {
    margin-bottom: var(--spacing-vh1);
  }
  .mb-vh2 {
    margin-bottom: var(--spacing-vh2);
  }
  .mb-vh3 {
    margin-bottom: var(--spacing-vh3);
  }
  .mb-vh4 {
    margin-bottom: var(--spacing-vh4);
  }
  .mb-vh5 {
    margin-bottom: var(--spacing-vh5);
  }
  .mb-vh10 {
    margin-bottom: var(--spacing-vh10);
  }
  .ml-0 {
    margin-left: calc(var(--spacing) * 0);
  }
  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }
  .ml-5 {
    margin-left: calc(var(--spacing) * 5);
  }
  .ml-auto {
    margin-left: auto;
  }
  .ml-vw1 {
    margin-left: var(--spacing-vw1);
  }
  .ml-vw2 {
    margin-left: var(--spacing-vw2);
  }
  .ml-vw3 {
    margin-left: var(--spacing-vw3);
  }
  .ml-vw4 {
    margin-left: var(--spacing-vw4);
  }
  .ml-vw5 {
    margin-left: var(--spacing-vw5);
  }
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .inline-block {
    display: inline-block;
  }
  .inline-flex {
    display: inline-flex;
  }
  .table {
    display: table;
  }
  .table-cell {
    display: table-cell;
  }
  .table-row {
    display: table-row;
  }
  .aspect-square {
    aspect-ratio: 1 / 1;
  }
  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }
  .\!h-12 {
    height: calc(var(--spacing) * 12) !important;
  }
  .\!h-14 {
    height: calc(var(--spacing) * 14) !important;
  }
  .h-0 {
    height: calc(var(--spacing) * 0);
  }
  .h-0\.5 {
    height: calc(var(--spacing) * 0.5);
  }
  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }
  .h-2 {
    height: calc(var(--spacing) * 2);
  }
  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }
  .h-3\/4 {
    height: calc(3 / 4 * 100%);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-9 {
    height: calc(var(--spacing) * 9);
  }
  .h-10 {
    height: calc(var(--spacing) * 10);
  }
  .h-11 {
    height: calc(var(--spacing) * 11);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-13 {
    height: calc(var(--spacing) * 13);
  }
  .h-14 {
    height: calc(var(--spacing) * 14);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-20 {
    height: calc(var(--spacing) * 20);
  }
  .h-24 {
    height: calc(var(--spacing) * 24);
  }
  .h-\[4\.5rem\] {
    height: 4.5rem;
  }
  .h-auto {
    height: auto;
  }
  .h-full {
    height: 100%;
  }
  .h-px {
    height: 1px;
  }
  .max-h-56 {
    max-height: calc(var(--spacing) * 56);
  }
  .max-h-64 {
    max-height: calc(var(--spacing) * 64);
  }
  .max-h-\[45vh\] {
    max-height: 45vh;
  }
  .max-h-\[92vh\] {
    max-height: 92vh;
  }
  .max-h-none {
    max-height: none;
  }
  .\!min-h-36 {
    min-height: calc(var(--spacing) * 36) !important;
  }
  .min-h-14 {
    min-height: calc(var(--spacing) * 14);
  }
  .min-h-16 {
    min-height: calc(var(--spacing) * 16);
  }
  .min-h-52 {
    min-height: calc(var(--spacing) * 52);
  }
  .min-h-\[6rem\] {
    min-height: 6rem;
  }
  .min-h-\[7rem\] {
    min-height: 7rem;
  }
  .min-h-\[8rem\] {
    min-height: 8rem;
  }
  .min-h-\[12rem\] {
    min-height: 12rem;
  }
  .min-h-\[14rem\] {
    min-height: 14rem;
  }
  .min-h-\[16rem\] {
    min-height: 16rem;
  }
  .min-h-\[24rem\] {
    min-height: 24rem;
  }
  .min-h-full {
    min-height: 100%;
  }
  .min-h-screen {
    min-height: 100vh;
  }
  .\!w-12 {
    width: calc(var(--spacing) * 12) !important;
  }
  .w-0 {
    width: calc(var(--spacing) * 0);
  }
  .w-2 {
    width: calc(var(--spacing) * 2);
  }
  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }
  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-5 {
    width: calc(var(--spacing) * 5);
  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-9 {
    width: calc(var(--spacing) * 9);
  }
  .w-10 {
    width: calc(var(--spacing) * 10);
  }
  .w-11 {
    width: calc(var(--spacing) * 11);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-13 {
    width: calc(var(--spacing) * 13);
  }
  .w-14 {
    width: calc(var(--spacing) * 14);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-18 {
    width: calc(var(--spacing) * 18);
  }
  .w-24 {
    width: calc(var(--spacing) * 24);
  }
  .w-25 {
    width: calc(var(--spacing) * 25);
  }
  .w-28 {
    width: calc(var(--spacing) * 28);
  }
  .w-40 {
    width: calc(var(--spacing) * 40);
  }
  .w-50 {
    width: calc(var(--spacing) * 50);
  }
  .w-56 {
    width: calc(var(--spacing) * 56);
  }
  .w-60 {
    width: calc(var(--spacing) * 60);
  }
  .w-65 {
    width: calc(var(--spacing) * 65);
  }
  .w-75 {
    width: calc(var(--spacing) * 75);
  }
  .w-100 {
    width: calc(var(--spacing) * 100);
  }
  .w-\[4\.5rem\] {
    width: 4.5rem;
  }
  .w-\[9rem\] {
    width: 9rem;
  }
  .w-auto {
    width: auto;
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .w-max {
    width: max-content;
  }
  .w-px {
    width: 1px;
  }
  .max-w-3xl {
    max-width: var(--container-3xl);
  }
  .max-w-\[12rem\] {
    max-width: 12rem;
  }
  .max-w-\[15rem\] {
    max-width: 15rem;
  }
  .max-w-\[16rem\] {
    max-width: 16rem;
  }
  .max-w-\[24rem\] {
    max-width: 24rem;
  }
  .max-w-\[calc\(100vw-2rem\)\] {
    max-width: calc(100vw - 2rem);
  }
  .max-w-full {
    max-width: 100%;
  }
  .max-w-lg {
    max-width: var(--container-lg);
  }
  .max-w-md {
    max-width: var(--container-md);
  }
  .max-w-xl {
    max-width: var(--container-xl);
  }
  .max-w-xs {
    max-width: var(--container-xs);
  }
  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }
  .min-w-14 {
    min-width: calc(var(--spacing) * 14);
  }
  .min-w-36 {
    min-width: calc(var(--spacing) * 36);
  }
  .min-w-\[5\.5rem\] {
    min-width: 5.5rem;
  }
  .min-w-\[5rem\] {
    min-width: 5rem;
  }
  .min-w-\[6rem\] {
    min-width: 6rem;
  }
  .min-w-\[7\.5rem\] {
    min-width: 7.5rem;
  }
  .min-w-\[7rem\] {
    min-width: 7rem;
  }
  .min-w-\[9rem\] {
    min-width: 9rem;
  }
  .min-w-\[11rem\] {
    min-width: 11rem;
  }
  .min-w-\[13rem\] {
    min-width: 13rem;
  }
  .min-w-\[16rem\] {
    min-width: 16rem;
  }
  .min-w-\[46rem\] {
    min-width: 46rem;
  }
  .min-w-max {
    min-width: max-content;
  }
  .flex-1 {
    flex: 1;
  }
  .flex-auto {
    flex: auto;
  }
  .shrink {
    flex-shrink: 1;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grow {
    flex-grow: 1;
  }
  .border-separate {
    border-collapse: separate;
  }
  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
  .scale-\[1\.03\] {
    scale: 1.03;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .animate-spin {
    animation: var(--animate-spin);
  }
  .cursor-default {
    cursor: default;
  }
  .cursor-pointer {
    cursor: pointer;
  }
  .resize {
    resize: both;
  }
  .resize-y {
    resize: vertical;
  }
  .list-disc {
    list-style-type: disc;
  }
  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .grid-cols-\[auto_minmax\(0\,1fr\)\] {
    grid-template-columns: auto minmax(0,1fr);
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-col-reverse {
    flex-direction: column-reverse;
  }
  .flex-row {
    flex-direction: row;
  }
  .flex-row-reverse {
    flex-direction: row-reverse;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .content-center {
    align-content: center;
  }
  .items-baseline {
    align-items: baseline;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .items-stretch {
    align-items: stretch;
  }
  .justify-around {
    justify-content: space-around;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-start {
    justify-content: flex-start;
  }
  .justify-stretch {
    justify-content: stretch;
  }
  .justify-items-end {
    justify-items: end;
  }
  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .space-y-0\.5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-1 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-2 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-3 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-4 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-5 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-6 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-7 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 7) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 7) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .space-y-8 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }
  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }
  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }
  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }
  .gap-y-1 {
    row-gap: calc(var(--spacing) * 1);
  }
  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }
  .gap-y-4 {
    row-gap: calc(var(--spacing) * 4);
  }
  .divide-y {
    :where(& > :not(:last-child)) {
      --tw-divide-y-reverse: 0;
      border-bottom-style: var(--tw-border-style);
      border-top-style: var(--tw-border-style);
      border-top-width: calc(1px * var(--tw-divide-y-reverse));
      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    }
  }
  .self-center {
    align-self: center;
  }
  .self-end {
    align-self: flex-end;
  }
  .self-start {
    align-self: flex-start;
  }
  .self-stretch {
    align-self: stretch;
  }
  .justify-self-end {
    justify-self: flex-end;
  }
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .overflow-auto {
    overflow: auto;
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-visible {
    overflow: visible;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-y-auto {
    overflow-y: auto;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }
  .rounded-\[0\.28rem\] {
    border-radius: 0.28rem;
  }
  .rounded-\[0\.35rem\] {
    border-radius: 0.35rem;
  }
  .rounded-\[1\.1rem\] {
    border-radius: 1.1rem;
  }
  .rounded-\[1\.2rem\] {
    border-radius: 1.2rem;
  }
  .rounded-\[1\.5rem\] {
    border-radius: 1.5rem;
  }
  .rounded-\[1\.25rem\] {
    border-radius: 1.25rem;
  }
  .rounded-\[1\.35rem\] {
    border-radius: 1.35rem;
  }
  .rounded-\[1\.75rem\] {
    border-radius: 1.75rem;
  }
  .rounded-\[50\%\] {
    border-radius: 50%;
  }
  .rounded-\[50rem\] {
    border-radius: 50rem;
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .rounded-xl {
    border-radius: var(--radius-xl);
  }
  .\!rounded-l-none {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
  .rounded-l-xl {
    border-top-left-radius: var(--radius-xl);
    border-bottom-left-radius: var(--radius-xl);
  }
  .rounded-r-xl {
    border-top-right-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
  }
  .rounded-b-\[1\.75rem\] {
    border-bottom-right-radius: 1.75rem;
    border-bottom-left-radius: 1.75rem;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }
  .border-x-\[0\.35rem\] {
    border-inline-style: var(--tw-border-style);
    border-inline-width: 0.35rem;
  }
  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-t-\[0\.4rem\] {
    border-top-style: var(--tw-border-style);
    border-top-width: 0.4rem;
  }
  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }
  .border-r-0 {
    border-right-style: var(--tw-border-style);
    border-right-width: 0px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-b-\[0\.4rem\] {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0.4rem;
  }
  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }
  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }
  .border-x-transparent {
    border-inline-color: transparent;
  }
  .border-t-current {
    border-top-color: currentcolor;
  }
  .border-b-current {
    border-bottom-color: currentcolor;
  }
  .bg-\[var\(--white-color\)\] {
    background-color: var(--white-color);
  }
  .bg-current {
    background-color: currentcolor;
  }
  .bg-neutral-900 {
    background-color: var(--color-neutral-900);
  }
  .bg-transparent {
    background-color: transparent;
  }
  .hover-tint {
    &:hover {
      background-color: var(--app-nav-item-hover);
    }
  }
  .scrim {
    background-color: var(--app-overlay-bg);
  }
  .object-contain {
    object-fit: contain;
  }
  .object-cover {
    object-fit: cover;
  }
  .object-\[center_35\%\] {
    object-position: center 35%;
  }
  .object-\[center_73\%\] {
    object-position: center 73%;
  }
  .p-0 {
    padding: calc(var(--spacing) * 0);
  }
  .p-1 {
    padding: calc(var(--spacing) * 1);
  }
  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .\!px-0 {
    padding-inline: calc(var(--spacing) * 0) !important;
  }
  .px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }
  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }
  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }
  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }
  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }
  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }
  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }
  .px-14 {
    padding-inline: calc(var(--spacing) * 14);
  }
  .px-vw1 {
    padding-inline: var(--spacing-vw1);
  }
  .px-vw2 {
    padding-inline: var(--spacing-vw2);
  }
  .px-vw3 {
    padding-inline: var(--spacing-vw3);
  }
  .px-vw4 {
    padding-inline: var(--spacing-vw4);
  }
  .px-vw5 {
    padding-inline: var(--spacing-vw5);
  }
  .py-0\.5 {
    padding-block: calc(var(--spacing) * 0.5);
  }
  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }
  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }
  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }
  .py-7 {
    padding-block: calc(var(--spacing) * 7);
  }
  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }
  .py-vh1 {
    padding-block: var(--spacing-vh1);
  }
  .py-vh2 {
    padding-block: var(--spacing-vh2);
  }
  .py-vh3 {
    padding-block: var(--spacing-vh3);
  }
  .py-vh4 {
    padding-block: var(--spacing-vh4);
  }
  .py-vh5 {
    padding-block: var(--spacing-vh5);
  }
  .pt-0 {
    padding-top: calc(var(--spacing) * 0);
  }
  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }
  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }
  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }
  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }
  .pt-vh1 {
    padding-top: var(--spacing-vh1);
  }
  .pt-vh2 {
    padding-top: var(--spacing-vh2);
  }
  .pt-vh3 {
    padding-top: var(--spacing-vh3);
  }
  .pr-0 {
    padding-right: calc(var(--spacing) * 0);
  }
  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }
  .pr-12 {
    padding-right: calc(var(--spacing) * 12);
  }
  .pr-vw1 {
    padding-right: var(--spacing-vw1);
  }
  .pr-vw2 {
    padding-right: var(--spacing-vw2);
  }
  .pr-vw3 {
    padding-right: var(--spacing-vw3);
  }
  .pr-vw4 {
    padding-right: var(--spacing-vw4);
  }
  .pr-vw5 {
    padding-right: var(--spacing-vw5);
  }
  .pr-vw7 {
    padding-right: var(--spacing-vw7);
  }
  .pb-0 {
    padding-bottom: calc(var(--spacing) * 0);
  }
  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }
  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }
  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }
  .pb-vh1 {
    padding-bottom: var(--spacing-vh1);
  }
  .pb-vh2 {
    padding-bottom: var(--spacing-vh2);
  }
  .pb-vh3 {
    padding-bottom: var(--spacing-vh3);
  }
  .pb-vh4 {
    padding-bottom: var(--spacing-vh4);
  }
  .pb-vh5 {
    padding-bottom: var(--spacing-vh5);
  }
  .pl-0 {
    padding-left: calc(var(--spacing) * 0);
  }
  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }
  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }
  .pl-vw1 {
    padding-left: var(--spacing-vw1);
  }
  .pl-vw2 {
    padding-left: var(--spacing-vw2);
  }
  .pl-vw3 {
    padding-left: var(--spacing-vw3);
  }
  .pl-vw4 {
    padding-left: var(--spacing-vw4);
  }
  .pl-vw5 {
    padding-left: var(--spacing-vw5);
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .align-middle {
    vertical-align: middle;
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .\!text-lg {
    font-size: var(--text-lg) !important;
    line-height: var(--tw-leading, var(--text-lg--line-height)) !important;
  }
  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }
  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .text-6xl {
    font-size: var(--text-6xl);
    line-height: var(--tw-leading, var(--text-6xl--line-height));
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .text-\[0\.65rem\] {
    font-size: 0.65rem;
  }
  .text-\[0\.68rem\] {
    font-size: 0.68rem;
  }
  .text-\[0\.95rem\] {
    font-size: 0.95rem;
  }
  .text-\[1\.1rem\] {
    font-size: 1.1rem;
  }
  .text-\[1\.2rem\] {
    font-size: 1.2rem;
  }
  .text-\[1\.4rem\] {
    font-size: 1.4rem;
  }
  .text-\[1\.05rem\] {
    font-size: 1.05rem;
  }
  .text-\[1\.5rem\] {
    font-size: 1.5rem;
  }
  .text-\[1\.8rem\] {
    font-size: 1.8rem;
  }
  .text-\[1\.9rem\] {
    font-size: 1.9rem;
  }
  .text-\[1\.15rem\] {
    font-size: 1.15rem;
  }
  .text-\[1\.25rem\] {
    font-size: 1.25rem;
  }
  .text-\[1\.35rem\] {
    font-size: 1.35rem;
  }
  .text-\[1\.45rem\] {
    font-size: 1.45rem;
  }
  .text-\[1\.55rem\] {
    font-size: 1.55rem;
  }
  .text-\[1\.65rem\] {
    font-size: 1.65rem;
  }
  .text-\[1\.75rem\] {
    font-size: 1.75rem;
  }
  .text-\[1\.85rem\] {
    font-size: 1.85rem;
  }
  .text-\[1rem\] {
    font-size: 1rem;
  }
  .text-\[2\.5rem\] {
    font-size: 2.5rem;
  }
  .text-\[2rem\] {
    font-size: 2rem;
  }
  .leading-7 {
    --tw-leading: calc(var(--spacing) * 7);
    line-height: calc(var(--spacing) * 7);
  }
  .leading-\[1\.15\] {
    --tw-leading: 1.15;
    line-height: 1.15;
  }
  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }
  .font-light {
    --tw-font-weight: var(--font-weight-light);
    font-weight: var(--font-weight-light);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-\[0\.1em\] {
    --tw-tracking: 0.1em;
    letter-spacing: 0.1em;
  }
  .tracking-\[0\.3em\] {
    --tw-tracking: 0.3em;
    letter-spacing: 0.3em;
  }
  .tracking-\[0\.12em\] {
    --tw-tracking: 0.12em;
    letter-spacing: 0.12em;
  }
  .tracking-\[0\.22em\] {
    --tw-tracking: 0.22em;
    letter-spacing: 0.22em;
  }
  .tracking-\[0\.35em\] {
    --tw-tracking: 0.35em;
    letter-spacing: 0.35em;
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .text-wrap {
    text-wrap: wrap;
  }
  .break-words {
    overflow-wrap: break-word;
  }
  .whitespace-nowrap {
    white-space: nowrap;
  }
  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }
  .text-neutral-100 {
    color: var(--color-neutral-100);
  }
  .text-white {
    color: var(--color-white);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .no-underline {
    text-decoration-line: none;
  }
  .underline {
    text-decoration-line: underline;
  }
  .opacity-0 {
    opacity: 0%;
  }
  .opacity-45 {
    opacity: 45%;
  }
  .opacity-60 {
    opacity: 60%;
  }
  .opacity-65 {
    opacity: 65%;
  }
  .opacity-75 {
    opacity: 75%;
  }
  .opacity-80 {
    opacity: 80%;
  }
  .opacity-100 {
    opacity: 100%;
  }
  .shadow-\[\.\.\.\] {
    --tw-shadow: ...;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .elevate-above {
    box-shadow: var(--app-shadow-above);
  }
  .elevate-hover-lg {
    &:hover {
      box-shadow: var(--app-shadow-lg);
    }
  }
  .elevate-inset {
    box-shadow: var(--app-shadow-inset);
  }
  .elevate-lg {
    box-shadow: var(--app-shadow-lg);
  }
  .elevate-md {
    box-shadow: var(--app-shadow-md);
  }
  .elevate-sm {
    box-shadow: var(--app-shadow-sm);
  }
  .elevate-xl {
    box-shadow: var(--app-shadow-xl);
  }
  .ring-transparent {
    --tw-ring-color: transparent;
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-blur {
    --tw-backdrop-blur: blur(8px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-\[3px\] {
    --tw-backdrop-blur: blur(3px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .backdrop-blur-\[6px\] {
    --tw-backdrop-blur: blur(6px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-\[width\] {
    transition-property: width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .duration-200 {
    --tw-duration: 200ms;
    transition-duration: 200ms;
  }
  .duration-300 {
    --tw-duration: 300ms;
    transition-duration: 300ms;
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }
  .hairline {
    border: 1px solid var(--app-hairline);
  }
  .group-hover\:ring-black\/5 {
    &:is(:where(.group):hover *) {
      @media (hover: hover) {
        --tw-ring-color: color-mix(in srgb, #000 5%, transparent);
        @supports (color: color-mix(in lab, red, red)) {
          --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
        }
      }
    }
  }
  .last\:border-0 {
    &:last-child {
      border-style: var(--tw-border-style);
      border-width: 0px;
    }
  }
  .hover\:-translate-y-0\.5 {
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * -0.5);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:-translate-y-1 {
    &:hover {
      @media (hover: hover) {
        --tw-translate-y: calc(var(--spacing) * -1);
        translate: var(--tw-translate-x) var(--tw-translate-y);
      }
    }
  }
  .hover\:opacity-80 {
    &:hover {
      @media (hover: hover) {
        opacity: 80%;
      }
    }
  }
  .hover\:brightness-95 {
    &:hover {
      @media (hover: hover) {
        --tw-brightness: brightness(95%);
        filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
      }
    }
  }
  .focus\:ring-2 {
    &:focus {
      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .disabled\:cursor-not-allowed {
    &:disabled {
      cursor: not-allowed;
    }
  }
  .disabled\:opacity-35 {
    &:disabled {
      opacity: 35%;
    }
  }
  .disabled\:opacity-45 {
    &:disabled {
      opacity: 45%;
    }
  }
  .disabled\:opacity-50 {
    &:disabled {
      opacity: 50%;
    }
  }
  .disabled\:opacity-60 {
    &:disabled {
      opacity: 60%;
    }
  }
  .has-\[\.activity-preview\]\:z-40 {
    &:has(*:is(.activity-preview)) {
      z-index: 40;
    }
  }
  .motion-safe\:animate-pulse {
    @media (prefers-reduced-motion: no-preference) {
      animation: var(--animate-pulse);
    }
  }
  .min-\[992px\]\:justify-end {
    @media (width >= 992px) {
      justify-content: flex-end;
    }
  }
  .min-\[1200px\]\:flex {
    @media (width >= 1200px) {
      display: flex;
    }
  }
  .sm\:block {
    @media (width >= 40rem) {
      display: block;
    }
  }
  .sm\:flex {
    @media (width >= 40rem) {
      display: flex;
    }
  }
  .sm\:hidden {
    @media (width >= 40rem) {
      display: none;
    }
  }
  .sm\:inline {
    @media (width >= 40rem) {
      display: inline;
    }
  }
  .sm\:h-auto {
    @media (width >= 40rem) {
      height: auto;
    }
  }
  .sm\:max-h-\[92vh\] {
    @media (width >= 40rem) {
      max-height: 92vh;
    }
  }
  .sm\:w-56 {
    @media (width >= 40rem) {
      width: calc(var(--spacing) * 56);
    }
  }
  .sm\:grid-cols-2 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-3 {
    @media (width >= 40rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .sm\:grid-cols-\[2fr_1fr\] {
    @media (width >= 40rem) {
      grid-template-columns: 2fr 1fr;
    }
  }
  .sm\:grid-cols-\[auto_auto_minmax\(0\,1fr\)\] {
    @media (width >= 40rem) {
      grid-template-columns: auto auto minmax(0,1fr);
    }
  }
  .sm\:grid-cols-\[minmax\(0\,1fr\)_auto\] {
    @media (width >= 40rem) {
      grid-template-columns: minmax(0,1fr) auto;
    }
  }
  .sm\:flex-row {
    @media (width >= 40rem) {
      flex-direction: row;
    }
  }
  .sm\:items-center {
    @media (width >= 40rem) {
      align-items: center;
    }
  }
  .sm\:justify-between {
    @media (width >= 40rem) {
      justify-content: space-between;
    }
  }
  .sm\:justify-center {
    @media (width >= 40rem) {
      justify-content: center;
    }
  }
  .sm\:justify-end {
    @media (width >= 40rem) {
      justify-content: flex-end;
    }
  }
  .sm\:gap-3 {
    @media (width >= 40rem) {
      gap: calc(var(--spacing) * 3);
    }
  }
  .sm\:rounded-\[1\.35rem\] {
    @media (width >= 40rem) {
      border-radius: 1.35rem;
    }
  }
  .sm\:border {
    @media (width >= 40rem) {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }
  }
  .sm\:border-l {
    @media (width >= 40rem) {
      border-left-style: var(--tw-border-style);
      border-left-width: 1px;
    }
  }
  .sm\:px-4 {
    @media (width >= 40rem) {
      padding-inline: calc(var(--spacing) * 4);
    }
  }
  .sm\:py-6 {
    @media (width >= 40rem) {
      padding-block: calc(var(--spacing) * 6);
    }
  }
  .sm\:pl-4 {
    @media (width >= 40rem) {
      padding-left: calc(var(--spacing) * 4);
    }
  }
  .sm\:elevate-xl {
    @media (width >= 40rem) {
      box-shadow: var(--app-shadow-xl);
    }
  }
  .md\:block {
    @media (width >= 48rem) {
      display: block;
    }
  }
  .md\:flex {
    @media (width >= 48rem) {
      display: flex;
    }
  }
  .md\:hidden {
    @media (width >= 48rem) {
      display: none;
    }
  }
  .md\:min-h-\[30rem\] {
    @media (width >= 48rem) {
      min-height: 30rem;
    }
  }
  .md\:grid-cols-2 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-3 {
    @media (width >= 48rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .md\:grid-cols-\[minmax\(0\,1fr\)_10rem\] {
    @media (width >= 48rem) {
      grid-template-columns: minmax(0,1fr) 10rem;
    }
  }
  .md\:flex-col {
    @media (width >= 48rem) {
      flex-direction: column;
    }
  }
  .md\:flex-row {
    @media (width >= 48rem) {
      flex-direction: row;
    }
  }
  .md\:items-center {
    @media (width >= 48rem) {
      align-items: center;
    }
  }
  .md\:items-end {
    @media (width >= 48rem) {
      align-items: flex-end;
    }
  }
  .md\:justify-between {
    @media (width >= 48rem) {
      justify-content: space-between;
    }
  }
  .md\:justify-center {
    @media (width >= 48rem) {
      justify-content: center;
    }
  }
  .md\:gap-5 {
    @media (width >= 48rem) {
      gap: calc(var(--spacing) * 5);
    }
  }
  .md\:self-auto {
    @media (width >= 48rem) {
      align-self: auto;
    }
  }
  .md\:p-6 {
    @media (width >= 48rem) {
      padding: calc(var(--spacing) * 6);
    }
  }
  .md\:px-6 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 6);
    }
  }
  .md\:px-8 {
    @media (width >= 48rem) {
      padding-inline: calc(var(--spacing) * 8);
    }
  }
  .md\:py-6 {
    @media (width >= 48rem) {
      padding-block: calc(var(--spacing) * 6);
    }
  }
  .md\:text-center {
    @media (width >= 48rem) {
      text-align: center;
    }
  }
  .md\:text-4xl {
    @media (width >= 48rem) {
      font-size: var(--text-4xl);
      line-height: var(--tw-leading, var(--text-4xl--line-height));
    }
  }
  .lg\:max-w-xs {
    @media (width >= 64rem) {
      max-width: var(--container-xs);
    }
  }
  .lg\:flex-1 {
    @media (width >= 64rem) {
      flex: 1;
    }
  }
  .lg\:grid-cols-2 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-3 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-4 {
    @media (width >= 64rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .lg\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)_auto\] {
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto;
    }
  }
  .lg\:grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,1fr\)\] {
    @media (width >= 64rem) {
      grid-template-columns: minmax(0,2fr) minmax(0,1fr);
    }
  }
  .lg\:flex-row {
    @media (width >= 64rem) {
      flex-direction: row;
    }
  }
  .lg\:items-center {
    @media (width >= 64rem) {
      align-items: center;
    }
  }
  .lg\:items-end {
    @media (width >= 64rem) {
      align-items: flex-end;
    }
  }
  .lg\:justify-between {
    @media (width >= 64rem) {
      justify-content: space-between;
    }
  }
  .xl\:col-span-4 {
    @media (width >= 80rem) {
      grid-column: span 4 / span 4;
    }
  }
  .xl\:col-span-8 {
    @media (width >= 80rem) {
      grid-column: span 8 / span 8;
    }
  }
  .xl\:block {
    @media (width >= 80rem) {
      display: block;
    }
  }
  .xl\:flex {
    @media (width >= 80rem) {
      display: flex;
    }
  }
  .xl\:hidden {
    @media (width >= 80rem) {
      display: none;
    }
  }
  .xl\:w-\[38rem\] {
    @media (width >= 80rem) {
      width: 38rem;
    }
  }
  .xl\:shrink-0 {
    @media (width >= 80rem) {
      flex-shrink: 0;
    }
  }
  .xl\:grid-cols-2 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-3 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-4 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-6 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-12 {
    @media (width >= 80rem) {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }
  }
  .xl\:grid-cols-\[minmax\(0\,1fr\)_24rem\] {
    @media (width >= 80rem) {
      grid-template-columns: minmax(0,1fr) 24rem;
    }
  }
  .xl\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1\.4fr\)\] {
    @media (width >= 80rem) {
      grid-template-columns: minmax(0,1fr) minmax(0,1.4fr);
    }
  }
  .xl\:grid-cols-\[minmax\(0\,22rem\)_minmax\(0\,1fr\)\] {
    @media (width >= 80rem) {
      grid-template-columns: minmax(0,22rem) minmax(0,1fr);
    }
  }
  .xl\:flex-row {
    @media (width >= 80rem) {
      flex-direction: row;
    }
  }
  .xl\:items-center {
    @media (width >= 80rem) {
      align-items: center;
    }
  }
  .xl\:justify-between {
    @media (width >= 80rem) {
      justify-content: space-between;
    }
  }
  .xl\:gap-8 {
    @media (width >= 80rem) {
      gap: calc(var(--spacing) * 8);
    }
  }
  .\32 xl\:grid-cols-4 {
    @media (width >= 96rem) {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  .\32 xl\:grid-cols-5 {
    @media (width >= 96rem) {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
  .\32 xl\:grid-cols-6 {
    @media (width >= 96rem) {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }
  .\[\&_button\]\:max-w-full {
    & button {
      max-width: 100%;
    }
  }
  .\[\&_button\]\:min-w-0 {
    & button {
      min-width: calc(var(--spacing) * 0);
    }
  }
  .\[\&\>\*\]\:max-w-full {
    &>* {
      max-width: 100%;
    }
  }
  .\[\&\>\*\]\:min-w-0 {
    &>* {
      min-width: calc(var(--spacing) * 0);
    }
  }
}
@layer legacy-utilities, responsive;
#blazor-error-ui {
  display: none;
}
body {
  background-color: #505b33;
}
[data-theme] {
  font-family: var(--app-font-family, system-ui, sans-serif), system-ui, sans-serif;
}
.email-preview {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 4);
  background-color: #ffffff;
  color: #000000;
  border-color: var(--app-border);
}
.rich-text-host {
  overflow: hidden;
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--app-border);
}
:root {
  --layout-header-height: 126px;
}
@media (max-width: 767px) {
  :root {
    --layout-header-height: 126px;
  }
}
:root, [data-theme="light"] {
  --app-font-family: "Merriweather", Georgia, serif;
  --app-page-bg: #fbf6f0;
  --app-header-bg: #49503f;
  --app-footer-bg: #fbf7f2;
  --app-border: #e4d6c2;
  --app-surface: #fdf9f5;
  --app-strong-surface: #f8f3ea;
  --app-text: #2b2d19;
  --app-text-invert: #fbf7f2;
  --app-nav-item-hover: #e2e8de;
  --app-nav-item-active-bg: #e2e8de;
  --app-nav-item-active-text: #283f29;
  --app-nav-item-active-border: #364831;
  --app-platform-button-bg: #263b14;
  --app-platform-button-text: #fbf7f2;
  --app-button-danger: #b45047;
  --app-button-warning: #b45047;
  --app-button-go: #45553e;
  --app-button-standard: #51729e;
  --app-header-banner-opacity: 1;
  --app-accent-image-opacity: 1;
  --app-header-banner-blur: 0px;
  --app-shadow-sm: 0 2px 8px rgb(0 0 0 / 0.1);
  --app-shadow-md: 0 6px 24px rgb(0 0 0 / 0.06);
  --app-shadow-lg: 0 12px 32px rgb(0 0 0 / 0.16);
  --app-shadow-xl: 0 24px 80px rgb(0 0 0 / 0.24);
  --app-shadow-above: 0 -6px 18px rgb(0 0 0 / 0.08);
  --app-shadow-inset: inset 0 2px 8px rgb(0 0 0 / 0.08);
  --app-overlay-bg: rgb(0 0 0 / 0.4);
  --app-hairline: rgb(0 0 0 / 0.08);
}
[data-theme="dark"] {
  --app-font-family: system-ui, sans-serif;
  --app-page-bg: #1c1917;
  --app-header-bg: #1c1917;
  --app-footer-bg: #1c1917;
  --app-border: #23201f;
  --app-strong-surface: #181714;
  --app-surface: #292524;
  --app-text: #fafaf9;
  --app-text-invert: #292524;
  --app-nav-item-hover: #5c5c5c;
  --app-nav-item-active-bg: #5c5c5c;
  --app-nav-item-active-text: #fafaf9;
  --app-nav-item-active-border: #94b281;
  --app-platform-button-bg: #78716c;
  --app-platform-button-text: #fafaf9;
  --app-button-danger: #b36560;
  --app-button-warning: #c58a51;
  --app-button-go: #94b281;
  --app-button-standard: #456a96;
  --app-header-banner-opacity: 0.1;
  --app-accent-image-opacity: 0.1;
  --app-header-banner-blur: 2px;
  --app-shadow-sm: 0 2px 8px rgb(0 0 0 / 0.4);
  --app-shadow-md: 0 6px 24px rgb(0 0 0 / 0.35);
  --app-shadow-lg: 0 12px 32px rgb(0 0 0 / 0.5);
  --app-shadow-xl: 0 24px 80px rgb(0 0 0 / 0.6);
  --app-shadow-above: 0 -6px 18px rgb(0 0 0 / 0.35);
  --app-shadow-inset: inset 0 2px 8px rgb(0 0 0 / 0.35);
  --app-overlay-bg: rgb(0 0 0 / 0.6);
  --app-hairline: rgb(255 255 255 / 0.08);
}
.ui-dashboard-button {
  display: inline-flex;
  height: calc(var(--spacing) * 11);
  flex-shrink: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 2);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 6);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  --tw-ease: var(--ease-out);
  transition-timing-function: var(--ease-out);
  &:disabled {
    cursor: not-allowed;
  }
  &:disabled {
    opacity: 50%;
  }
}
.ui-dashboard-button-pill {
  border-radius: calc(infinity * 1px);
}
.ui-dashboard-button-rectangle {
  border-radius: var(--radius-xl);
}
.ui-dashboard-button-neutral {
  background-color: var(--app-page-bg);
  color: var(--app-text);
  border-color: var(--app-border);
  box-shadow: 0 0 0 0 rgb(0 0 0 / 0);
}
.ui-dashboard-button-neutral:hover:not(:disabled) {
  box-shadow: 0 0 0 2px rgb(0 0 0 / 0.06);
}
.ui-dashboard-button-go {
  background-color: var(--app-button-go);
  color: var(--app-text-invert);
  border-color: var(--app-button-go);
  box-shadow: 0 0 0 0 var(--app-button-go);
}
.ui-dashboard-button-go:hover:not(:disabled) {
  box-shadow: 0 0 0 2px var(--app-button-go);
}
.ui-dashboard-button-danger {
  background-color: var(--app-button-danger);
  color: var(--app-text-invert);
  border-color: var(--app-button-danger);
  box-shadow: 0 0 0 0 var(--app-button-danger);
}
.ui-dashboard-button-danger:hover:not(:disabled) {
  box-shadow: 0 0 0 2px var(--app-button-danger);
}
.ui-dashboard-button-standard {
  background-color: var(--app-button-standard);
  color: var(--app-text-invert);
  border-color: var(--app-button-standard);
  box-shadow: 0 0 0 0 var(--app-button-standard);
}
.ui-dashboard-button-standard:hover:not(:disabled) {
  box-shadow: 0 0 0 2px var(--app-button-standard);
}
.ui-dashboard-button-warning {
  background-color: var(--app-button-warning);
  color: var(--app-text-invert);
  border-color: var(--app-button-warning);
  box-shadow: 0 0 0 0 var(--app-button-warning);
}
.ui-dashboard-button-warning:hover:not(:disabled) {
  box-shadow: 0 0 0 2px var(--app-button-warning);
}
.ui-nav-item {
  display: inline-flex;
  height: calc(var(--spacing) * 16);
  min-width: calc(var(--spacing) * 0);
  cursor: pointer;
  align-items: center;
  justify-content: flex-start;
  gap: calc(var(--spacing) * 3);
  border-top-left-radius: var(--radius-2xl);
  border-top-right-radius: var(--radius-2xl);
  padding-inline: calc(var(--spacing) * 6);
  text-align: left;
  font-size: 1.1rem;
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  text-decoration-line: none;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  color: var(--app-text);
  background-color: transparent;
}
.ui-nav-item:hover {
  background-color: var(--app-nav-item-hover);
}
.ui-nav-item.active {
  background-color: var(--app-nav-item-active-bg);
  color: var(--app-nav-item-active-text);
  box-shadow: inset 0 -6px 0 0 var(--app-nav-item-active-border);
}
@media (max-width: 767px) {
  .ui-nav-item {
    height: calc(var(--spacing) * 12);
    width: 100%;
    border-radius: var(--radius-xl);
    padding-inline: calc(var(--spacing) * 4);
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
    background-color: var(--app-surface);
  }
  .ui-nav-item:hover {
    background-color: var(--app-nav-item-hover);
  }
  .ui-nav-item.active {
    background-color: var(--app-nav-item-active-bg);
    color: var(--app-nav-item-active-text);
    box-shadow: inset 4px 0 0 0 var(--app-nav-item-active-border);
  }
}
.ui-select {
  height: calc(var(--spacing) * 11);
  cursor: pointer;
  border-radius: var(--radius-md);
  padding-inline: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-outline-style: none;
  outline-style: none;
  background-color: var(--app-surface);
  color: var(--app-text);
  min-width: 300px;
}
.ui-input {
  height: calc(var(--spacing) * 11);
  border-radius: var(--radius-md);
  padding-inline: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-outline-style: none;
  outline-style: none;
  background-color: var(--app-surface);
  color: var(--app-text);
}
@media (max-width: 640px) {
  .ui-select {
    min-width: 0;
    width: 100%;
  }
}
.dashboard-range {
  margin-top: calc(var(--spacing) * 3);
  height: calc(var(--spacing) * 2);
  width: 100%;
  cursor: pointer;
  appearance: none;
  border-radius: calc(infinity * 1px);
  background-color: var(--app-page-bg);
  box-shadow: var(--app-shadow-inset);
}
.dashboard-range::-webkit-slider-thumb {
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 5);
  cursor: pointer;
  appearance: none;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 2px;
  background-color: var(--app-button-go);
  border-color: var(--app-surface);
  box-shadow: var(--app-shadow-sm);
}
.dashboard-range::-moz-range-thumb {
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 5);
  cursor: pointer;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 2px;
  background-color: var(--app-button-go);
  border-color: var(--app-surface);
  box-shadow: var(--app-shadow-sm);
}
.dashboard-range:focus-visible {
  outline: 2px solid var(--app-button-go);
  outline-offset: 2px;
}
.ui-list {
  width: 100%;
  padding-inline: calc(var(--spacing) * 1);
  padding-block: calc(var(--spacing) * 2);
}
.ui-list__shadow {
  border-radius: 1rem;
  --tw-shadow: 0 8px 24px var(--tw-shadow-color, rgba(0,0,0,0.05));
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ui-list__surface {
  min-width: 100%;
  overflow: hidden;
  border-radius: 1rem;
  border-style: var(--tw-border-style);
  border-width: 1px;
  background-color: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
}
.ui-list__scroll {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--app-text) transparent;
  @supports (color: color-mix(in lab, red, red)) {
    scrollbar-color: color-mix(in srgb, var(--app-text) 28%, transparent) transparent;
  }
}
.ui-list__header {
  display: grid;
  min-height: calc(var(--spacing) * 16);
  background-color: var(--app-strong-surface);
  color: var(--app-text);
}
.ui-list__row {
  display: grid;
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  background-color: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
}
.ui-list__row--interactive {
  cursor: pointer;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.ui-list__row--interactive:hover {
  background-color: var(--app-nav-item-hover);
}
.ui-list__row--interactive:focus-visible {
  position: relative;
  z-index: 10;
  --tw-outline-style: none;
  outline-style: none;
  background-color: var(--app-nav-item-hover);
  box-shadow: inset 0 0 0 2px var(--app-button-standard);
}
.ui-list__header-cell {
  display: flex;
  min-width: calc(var(--spacing) * 0);
  align-items: center;
  border-right-style: var(--tw-border-style);
  border-right-width: 1px;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 4);
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  &:last-child {
    border-right-style: var(--tw-border-style);
    border-right-width: 0px;
  }
  @media (width >= 40rem) {
    padding-inline: calc(var(--spacing) * 6);
  }
  border-color: var(--app-border);
}
.ui-list__cell {
  display: flex;
  min-width: calc(var(--spacing) * 0);
  align-items: center;
  border-right-style: var(--tw-border-style);
  border-right-width: 1px;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 4);
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  &:last-child {
    border-right-style: var(--tw-border-style);
    border-right-width: 0px;
  }
  @media (width >= 40rem) {
    padding-inline: calc(var(--spacing) * 6);
  }
  border-color: var(--app-border);
}
.ui-list__actions {
  display: flex;
  min-width: calc(var(--spacing) * 0);
  align-items: center;
  justify-content: center;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 4);
}
.ui-list__select {
  display: flex;
  min-width: calc(var(--spacing) * 0);
  align-items: center;
  justify-content: center;
  border-right-style: var(--tw-border-style);
  border-right-width: 1px;
  padding-inline: calc(var(--spacing) * 2);
  padding-block: calc(var(--spacing) * 4);
  border-color: var(--app-border);
}
.ui-list__empty {
  display: flex;
  min-height: calc(var(--spacing) * 24);
  align-items: center;
  justify-content: center;
  padding-inline: calc(var(--spacing) * 4);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  background-color: var(--app-surface);
  color: var(--app-text);
}
.ui-list__header-text {
  min-width: calc(var(--spacing) * 0);
  white-space: nowrap;
}
.ui-list__text {
  min-width: calc(var(--spacing) * 0);
  --tw-leading: var(--leading-snug);
  line-height: var(--leading-snug);
  overflow-wrap: break-word;
  white-space: normal;
}
.ui-list__pin {
  min-width: calc(var(--spacing) * 0);
  font-family: var(--font-mono);
  font-size: 1.05rem;
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  --tw-tracking: 0.18em;
  letter-spacing: 0.18em;
  white-space: nowrap;
}
.dashboard-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 5);
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}
.dashboard-card--interactive {
  cursor: pointer;
  text-decoration-line: none;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.dashboard-card--interactive:hover {
  background-color: var(--app-strong-surface);
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 40%, var(--app-border));
  }
}
.dashboard-card__icon {
  display: inline-flex;
  height: calc(var(--spacing) * 12);
  width: calc(var(--spacing) * 12);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-go) 14%, var(--app-surface));
  }
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 28%, var(--app-border));
  }
  color: var(--app-button-go);
}
.dashboard-card__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: calc(var(--spacing) * 4);
  @media (width >= 48rem) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (width >= 80rem) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.status-badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 1);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.rich-text-block {
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 5);
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
  background-color: var(--app-page-bg);
  border-color: var(--app-border);
  color: var(--app-text);
}
.flashcard-preview {
  --flashcard-width: 15rem;
  --flashcard-surface: var(--app-surface);
  --flashcard-border: var(--app-nav-item-active-border);
  --flashcard-button: var(--app-nav-item-active-border);
  --flashcard-button-hover: var(--app-nav-item-active-border);
  @supports (color: color-mix(in lab, red, red)) {
    --flashcard-button-hover: color-mix(in srgb, var(--app-nav-item-active-border) 80%, white);
  }
  display: flex;
  justify-content: center;
  padding: 1rem;
}
.flashcard-preview .flashcard {
  width: var(--flashcard-width);
  height: calc(var(--flashcard-width) * 1.25);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  isolation: isolate;
  margin: 0.75rem;
  border-radius: 1rem;
  background-color: var(--flashcard-surface);
  color: var(--app-text);
  box-shadow: 0 0 0 0.6rem var(--flashcard-border);
}
.flashcard-preview .card-click-area {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.flashcard-preview .flashcard-top {
  display: flex;
  justify-content: space-between;
  z-index: 1;
}
.flashcard-preview .flashcard-type {
  display: flex;
  align-content: center;
  overflow: hidden;
  padding-right: 1rem;
  background-image: url(/images/pages/flashcards/flashcards-ribbon.svg);
  background-repeat: no-repeat;
  background-position: 100%;
  transform: translate(-1px, 8px);
}
.flashcard-preview .flashcard-icon img, .flashcard-preview .flashcard-icon svg {
  height: 2.25rem;
  width: 2.25rem;
  padding: 2px;
}
.flashcard-preview .flashcard-icon img.flashcard-neutral {
  padding-inline: 0.5rem;
}
.flashcard-preview .flashcard-body {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  min-width: 0;
  padding: 0.5rem;
}
.flashcard-preview .flashcard-img {
  height: 100%;
  width: auto;
  max-width: 100%;
  min-height: 0;
  min-width: 0;
  align-self: center;
  object-fit: contain;
}
.flashcard-preview .flashcard-text {
  text-align: center;
  word-break: break-word;
  padding-inline: 0.5rem;
}
.flashcard-preview .flashcard-text h4, .flashcard-preview .flashcard-text h5, .flashcard-preview .flashcard-text h6 {
  margin-bottom: 0;
}
.flashcard-preview .flashcard-text h4:empty, .flashcard-preview .flashcard-text h5:empty, .flashcard-preview .flashcard-text h6:empty {
  display: none;
}
.flashcard-preview .flashcard-text h4 {
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.2;
}
.flashcard-preview .flashcard-text h4.smaller {
  font-size: 1rem;
}
.flashcard-preview .flashcard-text h5 {
  font-size: 1rem;
  padding-top: 0.4em;
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 80%, transparent);
  }
}
.flashcard-preview .flashcard-text h5.smaller {
  font-size: 0.85rem;
}
.flashcard-preview .flashcard-text h6 {
  font-size: 0.85rem;
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 62%, transparent);
  }
}
.flashcard-preview .flashcard-text h6.smaller {
  font-size: 0.75rem;
}
.flashcard-preview .flashcard-bottom {
  display: flex;
  justify-content: flex-end;
  min-height: 2rem;
  z-index: 1;
}
.flashcard-preview .audio-btn, .flashcard-preview .video-btn {
  align-self: flex-end;
  padding: 0;
  border: none;
  background-color: var(--flashcard-button);
  transition: background-color 0.1s ease-in-out;
}
.flashcard-preview .audio-btn:empty, .flashcard-preview .video-btn:empty {
  display: none;
}
.flashcard-preview .audio-btn {
  border-top-left-radius: 1.2rem;
  border-bottom-right-radius: 0.8rem;
}
.flashcard-preview .video-btn {
  border-bottom-left-radius: 1.2rem;
  border-top-right-radius: 0.8rem;
}
.flashcard-preview .audio-btn:hover, .flashcard-preview .video-btn:hover {
  background-color: var(--flashcard-button-hover);
}
.flashcard-preview .audio-btn .btn, .flashcard-preview .video-btn .btn, .flashcard-preview .audio-btn button, .flashcard-preview .video-btn button {
  padding: 0.5rem;
  border: none;
  background-color: transparent;
  box-shadow: none;
}
.flashcard-preview .audio-btn img, .flashcard-preview .video-btn img {
  height: 1.25rem;
  width: 1.25rem;
}
.rte {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}
.rte__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  background-color: var(--app-page-bg);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-page-bg) 60%, var(--app-surface));
  }
  border-color: var(--app-border);
}
@media (max-width: 767px) {
  .rte__toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .rte__toolbar::-webkit-scrollbar {
    display: none;
  }
}
.rte__group {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 0.5);
}
.rte__group--contextual[hidden] {
  display: none;
}
.rte__separator {
  margin-inline: calc(var(--spacing) * 1);
  height: calc(var(--spacing) * 6);
  width: 1px;
  flex-shrink: 0;
  background-color: var(--app-hairline, var(--app-border));
}
.rte__button {
  display: inline-flex;
  height: calc(var(--spacing) * 9);
  min-width: calc(var(--spacing) * 9);
  flex-shrink: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 1);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: transparent;
  padding-inline: calc(var(--spacing) * 2);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 78%, transparent);
  }
}
.rte__button:hover:not(:disabled) {
  background-color: var(--app-nav-item-hover);
  color: var(--app-text);
}
.rte__button:disabled {
  cursor: not-allowed;
  opacity: 40%;
}
.rte__button:focus-visible, .rte__menu-item:focus-visible {
  outline: 2px solid var(--app-button-standard);
  outline-offset: 1px;
}
.rte__button.is-active {
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-go) 18%, transparent);
  }
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 38%, transparent);
  }
  color: var(--app-text);
}
.rte__button--menu {
  gap: calc(var(--spacing) * 1);
  padding-inline: calc(var(--spacing) * 2.5);
}
.rte__menu-label {
  max-width: calc(var(--spacing) * 28);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.rte__caret {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-leading: 1;
  line-height: 1;
  opacity: 60%;
}
.rte__menu {
  position: relative;
}
.rte__menu-panel {
  position: absolute;
  top: 100%;
  left: calc(var(--spacing) * 0);
  z-index: 50;
  margin-top: calc(var(--spacing) * 1);
  display: flex;
  max-height: calc(var(--spacing) * 80);
  min-width: calc(var(--spacing) * 44);
  flex-direction: column;
  overflow-y: auto;
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 1);
  background-color: var(--app-surface);
  border-color: var(--app-border);
  box-shadow: var(--app-shadow-lg, 0 12px 32px rgb(0 0 0 / 0.14));
}
.rte__menu-panel[hidden] {
  display: none;
}
.rte__menu-item {
  cursor: pointer;
  border-radius: var(--radius-lg);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  text-align: left;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  color: var(--app-text);
}
.rte__menu-item:hover {
  background-color: var(--app-nav-item-hover);
}
.rte__menu-item.is-active {
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-go) 16%, transparent);
  }
  font-weight: 600;
}
.rte__menu-panel:has(.rte__swatch) {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: calc(var(--spacing) * 1);
  padding: calc(var(--spacing) * 2);
}
.rte__swatch {
  height: calc(var(--spacing) * 7);
  width: calc(var(--spacing) * 7);
  cursor: pointer;
  border-radius: var(--radius-md);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 0);
  border-color: var(--app-hairline, var(--app-border));
}
.rte__swatch.is-active {
  outline: 2px solid var(--app-button-go);
  outline-offset: 1px;
}
.rte__swatch--none {
  background-color: var(--app-surface);
  background-image: linear-gradient( to top left, transparent calc(50% - 1px), var(--app-button-danger) calc(50% - 1px), var(--app-button-danger) calc(50% + 1px), transparent calc(50% + 1px) );
}
.rte__content {
  position: relative;
  flex: 1;
  overflow-y: auto;
  background-color: var(--app-page-bg);
}
.rte__surface {
  min-height: calc(var(--spacing) * 40);
  padding-inline: calc(var(--spacing) * 5);
  padding-block: calc(var(--spacing) * 4);
  --tw-outline-style: none;
  outline-style: none;
  color: var(--app-text);
  line-height: 1.6;
}
.rte__placeholder {
  pointer-events: none;
  position: absolute;
  -webkit-user-select: none;
  user-select: none;
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 42%, transparent);
  }
}
.rte__surface p {
  margin-block: calc(var(--spacing) * 2);
}
.rte__surface h1 {
  margin-top: calc(var(--spacing) * 5);
  margin-bottom: calc(var(--spacing) * 3);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.rte__surface h2 {
  margin-top: calc(var(--spacing) * 5);
  margin-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.rte__surface h3 {
  margin-top: calc(var(--spacing) * 4);
  margin-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.rte__surface ul {
  margin-block: calc(var(--spacing) * 2);
  list-style-type: disc;
  padding-left: calc(var(--spacing) * 6);
}
.rte__surface ol {
  margin-block: calc(var(--spacing) * 2);
  list-style-type: decimal;
  padding-left: calc(var(--spacing) * 6);
}
.rte__surface li {
  margin-block: calc(var(--spacing) * 1);
}
.rte__surface blockquote {
  margin-block: calc(var(--spacing) * 3);
  border-left-style: var(--tw-border-style);
  border-left-width: 4px;
  padding-left: calc(var(--spacing) * 4);
  font-style: italic;
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 45%, transparent);
  }
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 82%, transparent);
  }
}
.rte__surface a {
  text-decoration-line: underline;
  color: var(--app-button-standard);
}
.rte__surface img {
  margin-block: calc(var(--spacing) * 2);
  display: inline-block;
  height: auto;
  max-width: 100%;
  border-radius: var(--radius-lg);
}
.rte__surface hr {
  margin-block: calc(var(--spacing) * 4);
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  border-color: var(--app-border);
}
.rte__surface table {
  margin-block: calc(var(--spacing) * 3);
  width: 100%;
  border-collapse: collapse;
}
.rte__surface th, .rte__surface td {
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  vertical-align: top;
  border-color: var(--app-border);
}
.rte__surface th {
  background-color: var(--app-strong-surface);
  text-align: left;
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.rte__surface .selectedCell::after {
  pointer-events: none;
  position: absolute;
  inset: calc(var(--spacing) * 0);
  content: "";
  background-color: var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-standard) 20%, transparent);
  }
}
.rte__surface th, .rte__surface td {
  position: relative;
}
.rte-image {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
}
.rte-image img {
  display: block;
}
.rte-image.is-selected img, .rte-image.is-resizing img {
  outline: 2px solid var(--app-button-standard);
  outline-offset: 2px;
}
.rte-image__handle {
  position: absolute;
  top: calc(1 / 2 * 100%);
  display: none;
  height: calc(var(--spacing) * 6);
  width: calc(var(--spacing) * 2);
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  cursor: ew-resize;
  border-radius: calc(infinity * 1px);
  background-color: var(--app-button-standard);
  border: 1px solid var(--app-surface);
}
.rte-image.is-selected .rte-image__handle, .rte-image.is-resizing .rte-image__handle {
  display: block;
}
.rte-image__handle--left {
  left: calc(var(--spacing) * -1);
}
.rte-image__handle--right {
  right: calc(var(--spacing) * -1);
}
.rte-video {
  margin-block: calc(var(--spacing) * 4);
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--app-border);
  background-color: #000;
}
.rt-video {
  margin-block: calc(var(--spacing) * 4);
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background-color: #000;
}
.rte-video__frame {
  position: relative;
  width: 100%;
}
.rte-video__frame iframe, .rt-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
.rte-video__shield {
  position: absolute;
  inset: calc(var(--spacing) * 0);
}
.rte-video.is-selected {
  outline: 2px solid var(--app-button-standard);
  outline-offset: 2px;
}
.rte-video__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  background-color: var(--app-strong-surface);
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 72%, transparent);
  }
}
.rte-video__caption a {
  text-decoration-line: underline;
  color: var(--app-button-standard);
}
.rte-indigenous {
  background-color: var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-standard) 12%, transparent);
  }
  border-bottom: 2px dotted var(--app-button-standard);
  border-radius: 2px;
  padding: 0 1px;
}
.rte__dropcursor {
  background-color: var(--app-button-go);
}
.rte__surface .ProseMirror-gapcursor::after {
  border-top-color: var(--app-text);
}
.rte__upload {
  margin-block: calc(var(--spacing) * 2);
  display: inline-flex;
  height: calc(var(--spacing) * 2);
  width: calc(var(--spacing) * 40);
  overflow: hidden;
  border-radius: calc(infinity * 1px);
  vertical-align: middle;
  background-color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-text) 12%, transparent);
  }
}
.rte__upload-bar {
  height: 100%;
  width: 100%;
}
.rte__upload-fill {
  height: 100%;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  background-color: var(--app-button-go);
}
.rte.is-disabled .rte__toolbar {
  opacity: 60%;
}
.rte-capacity {
  margin-top: calc(var(--spacing) * 2);
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 64%, transparent);
  }
}
.rte-capacity__track {
  height: calc(var(--spacing) * 1.5);
  flex: 1;
  overflow: hidden;
  border-radius: calc(infinity * 1px);
  background-color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-text) 10%, transparent);
  }
}
.rte-capacity__fill {
  height: 100%;
  border-radius: calc(infinity * 1px);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.rt {
  display: contents;
}
.rt-l--slide {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.rt-l--row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.rt-l--column, .rt-span-1, .rt-span-2, .rt-span-3, .rt-span-4, .rt-span-5, .rt-span-6, .rt-span-7, .rt-span-8, .rt-span-9, .rt-span-10, .rt-span-11, .rt-span-12, .rt-span-lg-1, .rt-span-lg-2, .rt-span-lg-3, .rt-span-lg-4, .rt-span-lg-5, .rt-span-lg-6, .rt-span-lg-7, .rt-span-lg-8, .rt-span-lg-9, .rt-span-lg-10, .rt-span-lg-11, .rt-span-lg-12 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}
.rt-stretch {
  height: 100%;
}
.rt-raised {
  position: relative;
  z-index: 3;
}
.rt-headband h1 {
  padding: 1rem 2rem;
  background-color: var(--white-color, #fff);
  color: var(--black-text-color, #000);
  text-align: left !important;
}
@media screen and (max-height: 768px) {
  .rt-headband h1 {
    font-size: 220% !important;
  }
}
.rt-media-vimeo iframe {
  position: relative !important;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.rt-media-vimeo .rt-video {
  height: 100%;
  margin: 0;
  border-radius: 0;
  background-color: transparent;
  overflow: visible;
}
.rt-media-vimeo .rt-video iframe {
  height: 100%;
  aspect-ratio: auto;
}
@media (min-width: 768px) {
  .rt-span-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .rt-span-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .rt-span-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .rt-span-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .rt-span-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .rt-span-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .rt-span-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .rt-span-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .rt-span-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .rt-span-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .rt-span-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .rt-span-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (min-width: 992px) {
  .rt-span-lg-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .rt-span-lg-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .rt-span-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .rt-span-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .rt-span-lg-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .rt-span-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .rt-span-lg-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .rt-span-lg-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .rt-span-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .rt-span-lg-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .rt-span-lg-11 {
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .rt-span-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
.rt-dir-row, .rt-dir-column {
  display: flex;
}
.rt-dir-row {
  flex-direction: row;
}
.rt-dir-column {
  flex-direction: column;
}
.rt-just-start {
  justify-content: flex-start;
}
.rt-just-center {
  justify-content: center;
}
.rt-just-end {
  justify-content: flex-end;
}
.rt-just-between {
  justify-content: space-between;
}
.rt-cross-center {
  align-items: center;
}
.rt-text-center {
  text-align: center !important;
}
.rt-grow {
  flex-grow: 1 !important;
}
.rt-self-end {
  align-self: flex-end !important;
}
.rt-float-right {
  float: right !important;
}
@media (max-width: 62rem) {
  .rt-dir-row:has(> .rt-l--column) {
    flex-direction: column;
  }
}
.rt-bg-white {
  background-color: var(--white-color, #fff) !important;
}
.rt-bg-danger {
  background-color: var(--danger-color, #d81f27) !important;
}
.rt-bg-mildDanger {
  background-color: var(--mild-danger-color, #f05123) !important;
}
.rt-bg-dark {
  background-color: var(--dark-color, #302f2d) !important;
}
.rt-bg-blue {
  background-color: var(--accent-color-9, #466eb4);
}
.rt-fg-white {
  color: var(--light-text-color, #fff) !important;
}
.rt-fg-danger {
  color: var(--danger-color, #d81f27) !important;
}
.rt-fg-mildDanger {
  color: var(--mild-danger-color, #f05123) !important;
}
.rt-fg-blue {
  color: var(--accent-color-9, #466eb4) !important;
}
.rt-fg-dark {
  color: var(--dark-color, #302f2d) !important;
}
.sunset-theme .rt-bg-gradient, body:has(.sunset-theme) .rt-bg-gradient {
  background: linear-gradient( 180deg, rgb(241, 181, 33) 0%, rgb(233, 101, 52) 50%, rgb(232, 57, 64) 100%);
}
.rt-has-image {
  background-repeat: no-repeat;
  background-size: cover;
}
.rt-bg-1 {
  height: 100%;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: cover;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  z-index: 0;
}
.rt-bg-2 {
  height: 100%;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: contain;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  z-index: 0;
  background-color: var(--black-color, #000);
}
.rt-bg-3 {
  height: 100%;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: cover;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  z-index: 0;
}
.rt-bg-4 {
  height: 100%;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: cover;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  z-index: 0;
  background-color: rgb(241, 181, 33);
  background-position: 30% 0%;
}
.rt-bg-5 {
  height: 100%;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: cover;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  z-index: 0;
  background-position: bottom;
}
.rt-bg-6 {
  height: 100%;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: cover;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  z-index: 0;
  background-position: center;
}
.rt-bg-7 {
  height: 100%;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: cover;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  z-index: 0;
}
.rt-bg-8 {
  height: 100%;
  border-radius: 0;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: cover;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  z-index: 0;
  background-position: 100%;
}
.rt-bg-9 {
  height: 100%;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: contain;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  z-index: 0;
  background-color: var(--black-color, #000);
}
.rt-bg-10 {
  height: 100%;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: cover;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  z-index: 0;
  background-position: 100% 50%;
}
.rt-bg-11 {
  height: 100%;
  border-radius: 0;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: cover;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  z-index: 0;
  background-position: left;
}
.rt-bg-12 {
  height: 100%;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: cover;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  z-index: 0;
  background-position: 100% 50%;
}
.rt-bg-13 {
  height: 100%;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: cover;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  z-index: 0;
  background-position: 100% 50%;
}
.rt-bg-14 {
  height: 100%;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: contain;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  z-index: 0;
  background-color: var(--black-color, #000);
}
.rt-bg-15 {
  height: 100%;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: cover;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  z-index: 0;
}
.rt-bg-16 {
  height: 100%;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: cover;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  z-index: 0;
  background-position: 100% 50%;
}
.rt-bg-17 {
  height: 100%;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: cover;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  z-index: 0;
  background-position: 100% 50%;
  border-left: 10px solid white;
  margin-left: -15px;
}
.rt-bg-18 {
  height: 100%;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: cover;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  z-index: 0;
  background-position: 100% 50%;
  border-left: 10px solid white;
  margin-left: -15px;
}
.rt-bg-19 {
  height: 100%;
  border-radius: 0;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: cover;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  z-index: 0;
  background-position: 100% 50%;
  border-left: 10px solid white;
}
.rt-bg-20 {
  height: 100%;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: contain;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  z-index: 0;
  margin: 2rem;
}
.rt-bg-21 {
  height: 100%;
  border-radius: 0;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: cover;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  z-index: 0;
  background-position: 100% 50%;
  border-left: 10px solid white;
  margin-left: -15px;
}
.rt-bg-22 {
  height: 100%;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: contain;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  z-index: 0;
  margin: 2rem;
}
.rt-bg-23 {
  height: 100%;
  border-radius: 0.5rem;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-size: cover;
  overflow: hidden;
  isolation: isolate;
  background-repeat: no-repeat;
  z-index: 0;
  margin: 2rem;
  background-position: top;
}
.rt-bg-24 {
  background-size: cover;
  margin: 2rem;
  background-position: top;
  height: 100%;
}
.rt-bg-25 {
  background-size: cover;
  margin: 2rem;
  background-position: top;
  height: 100%;
}
.rt-bg-26 {
  background-size: cover;
  background-position: 100% 50%;
  height: 100%;
  border-left: 10px solid white;
  border-radius: 0;
  margin-left: -15px;
}
.rt-bg-27 {
  background-size: cover;
  background-position: 100% 50%;
  height: 100%;
  border-left: 10px solid white;
  border-radius: 0;
  margin-left: -15px;
}
.rt-bg-28 {
  background-size: cover;
  background-position: 100% 50%;
  height: 100%;
  border-left: 10px solid white;
  border-radius: 0;
  margin-left: -15px;
}
.rt-bg-29 {
  background-size: cover;
  background-position: 100% 50%;
  height: 100%;
  border-left: 10px solid white;
  border-radius: 0;
  margin-left: -15px;
}
.rt-bg-30 {
  background-size: cover;
  background-position: 100% 50%;
  height: 100%;
  border-left: 10px solid white;
  border-radius: 0;
  margin-left: -15px;
}
.rt-bg-31 {
  background-size: cover;
  margin: 2rem;
  background-position: top;
  height: 100%;
}
.rt-bg-32 {
  background-size: contain;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  margin: 1vh 14vh;
}
.rt-bg-33 {
  background-size: contain;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.rt-bg-34 {
  background-size: contain;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.rt-bg-35 {
  height: 50vh;
  max-height: 500px;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  width: 100%;
  margin: auto;
}
.rt-bg-36 {
  background-size: contain;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.rt-bg-37 {
  background-size: contain;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.rt-bg-38 {
  background-size: contain;
  height: 50%;
  background-repeat: no-repeat;
  background-position: top;
}
.rt-bg-39 {
  background-size: cover;
  background-position: 50% 50%;
  height: 100%;
  border-left: 10px solid white;
  border-radius: 0;
  margin-left: -15px;
}
.rt-bg-40 {
  background-size: cover;
  background-position: 50% 50%;
  height: 100%;
  border-radius: 0;
}
.rt-bg-41 {
  background-size: cover;
  height: 100%;
  background-position: 100%;
  border-radius: 0;
}
.rt-bg-42 {
  background-size: cover;
  background-position: left;
  height: 100%;
  border-right: 10px solid white;
  border-radius: 0;
  margin-right: -15px;
}
.rt-bg-43 {
  background-size: contain;
  border-radius: 0;
  height: 54vh;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.rt-bg-44 {
  background-size: contain;
  border-radius: 0;
  height: 54vh;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.rt-bg-45 {
  background-size: contain;
  border-radius: 0;
  height: 83vh;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.rt-bg-46 {
  background-size: contain;
  height: 90vh;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.rt-bg-47 {
  background-size: cover;
  background-position: 100% 50%;
  height: 100%;
  border-left: 10px solid white;
  border-radius: 0;
  margin-left: -15px;
}
.rt-bg-48 {
  background-size: cover;
  background-position: 100% 50%;
  height: 100%;
  border-left: 10px solid white;
  border-radius: 0;
  margin-left: -15px;
}
.rt-bg-49 {
  background-size: cover;
  background-position: 100% 50%;
  height: 100%;
  border-left: 10px solid white;
  border-radius: 0;
  margin-left: -15px;
}
.rt-bg-50 {
  background-size: cover;
  background-position: 100% 50%;
  height: 100%;
  border-left: 10px solid white;
  border-radius: 0;
  margin-left: -15px;
}
.rt-bg-51 {
  background-size: cover;
  background-position: top left;
  height: 100%;
  border-radius: 0;
}
:is(.rte__surface, .rt-boxed) .rt-bg-32 {
  margin: 1cqh 14cqh;
}
:is(.rte__surface, .rt-boxed) .rt-bg-35 {
  height: 50cqh;
}
:is(.rte__surface, .rt-boxed) .rt-bg-43 {
  height: 54cqh;
}
:is(.rte__surface, .rt-boxed) .rt-bg-44 {
  height: 54cqh;
}
:is(.rte__surface, .rt-boxed) .rt-bg-45 {
  height: 83cqh;
}
:is(.rte__surface, .rt-boxed) .rt-bg-46 {
  height: 90cqh;
}
.rt-size-xs {
  font-size: 80% !important;
}
.rt-size-sm {
  font-size: 90% !important;
}
.rt-size-md {
  font-size: 120% !important;
}
.rt-size-lg {
  font-size: 150% !important;
}
.rt-size-xl {
  font-size: 200% !important;
}
@media (max-width: 1499.98px) {
  .rt-size-xs {
    font-size: 53.3333333333% !important;
  }
  .rt-size-sm {
    font-size: 60% !important;
  }
  .rt-size-md {
    font-size: 80% !important;
  }
  .rt-size-lg {
    font-size: 100% !important;
  }
  .rt-size-xl {
    font-size: 133.3333333333% !important;
  }
}
@media screen and (max-height: 768px) {
  .rt-size-xs {
    font-size: 53.3333333333% !important;
  }
  .rt-size-sm {
    font-size: 60% !important;
  }
  .rt-size-md {
    font-size: 80% !important;
  }
  .rt-size-lg {
    font-size: 100% !important;
  }
  .rt-size-xl {
    font-size: 133.3333333333% !important;
  }
}
.rt-display-2, .rt-display-3, .rt-display-4 {
  font-family: henderson-slab-basic, serif;
  color: var(--dark-color, #302f2d);
}
.rt-font-body {
  font-family: "tgn-soft-round-comp", sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
}
.rt-as-h1 {
  font-size: 3.6rem !important;
}
.rt-as-h2 {
  font-size: 3.2rem !important;
}
.rt-as-h3 {
  font-size: 2.8rem !important;
}
.rt-as-h4 {
  font-size: 2.4rem !important;
}
.rt-as-h5 {
  font-size: 2rem !important;
}
.rt-as-h6 {
  font-size: 1.6rem !important;
}
@media (max-width: 1499.98px) {
  .rt-as-h1 {
    font-size: 3.2rem !important;
  }
  .rt-as-h2 {
    font-size: 2.8rem !important;
  }
  .rt-as-h3 {
    font-size: 2.4rem !important;
  }
  .rt-as-h4 {
    font-size: 2rem !important;
  }
  .rt-as-h5 {
    font-size: 1.6rem !important;
  }
  .rt-as-h6 {
    font-size: 1.2rem !important;
  }
}
@media screen and (max-height: 768px) {
  .rt-as-h1 {
    font-size: 3.2rem !important;
  }
  .rt-as-h2 {
    font-size: 2.8rem !important;
  }
  .rt-as-h3 {
    font-size: 2.4rem !important;
  }
  .rt-as-h4 {
    font-size: 2rem !important;
  }
  .rt-as-h5 {
    font-size: 1.6rem !important;
  }
  .rt-as-h6 {
    font-size: 1.2rem !important;
  }
}
.rt-dec-header {
  position: absolute;
  z-index: 5;
  padding: 1rem 2rem;
  background-color: var(--white-color, #fff);
  text-align: left;
}
.rt-at-top {
  top: 6%;
}
.rt-at-right {
  right: 0;
}
.rt-at-top-right, .rt-at-right-top {
  top: 6%;
  right: 0;
}
.rt-dec-arrowHeader {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
}
.rt-dec-arrowHeaderInner {
  display: flex;
  align-items: center;
  padding: 0 1.8rem;
  background-color: var(--white-color, #fff);
}
.rt-dec-arrowTriangle {
  position: relative;
  border-top: 47px solid transparent;
  border-right: 50px solid var(--white-color, #fff);
  border-bottom: 47px solid transparent;
}
.sunset-theme .rt-dec-logo, body:has(.sunset-theme) .rt-dec-logo {
  position: relative;
  width: 40vh;
  height: 40vh;
  background-image: url("/images/themes/WaketheGiant-Logo-01.svg");
  background-repeat: no-repeat;
}
.rt-dec-speechBubble {
  display: inline-block;
  margin-right: 0.5rem;
  background-image: url("/images/themes/WTG-speech-bubble.svg");
  background-repeat: no-repeat;
}
.rt-dec-check {
  display: block;
  margin-right: 0.5rem;
  background-image: url("/images/themes/WTG-checkmark.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.rt-dec-heart {
  display: block;
  width: 24vh;
  height: 24vh;
  background-image: url("/images/themes/WTG-heart.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.rt-dec-quotations {
  display: block;
  width: 14vh;
  height: 10vh;
  background-image: url("/images/themes/WTG-quotations.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.rt-dec-pointer {
  position: absolute;
  left: 20vw;
  top: 4rem;
  width: 15vh;
  height: 18vh;
  background-image: url("/images/themes/WTG-arrow.png");
  background-repeat: no-repeat;
  background-size: contain;
  transform: rotate(238deg);
}
.rt-dec-question {
  width: 100%;
  height: 100%;
  background-image: url("/images/themes/wtg-bg-8-b.svg");
  background-position: 110%;
  background-repeat: no-repeat;
}
.rt-slot-top {
  height: 60%;
}
.rt-slot-bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 40%;
}
.rt-media-vimeo {
  position: relative;
  display: flex;
  justify-content: flex-start;
  flex-grow: 1;
  margin: 5vh;
}
.rt-scroll {
  max-height: 400px;
  margin: 2rem;
  margin-top: 7rem;
  overflow: unset;
  mix-blend-mode: hard-light;
}
.rt-scroll::after {
  content: "";
  position: absolute;
  left: -100px;
  top: 60px;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent, transparent, gray);
  pointer-events: none;
}
@media screen and (max-height: 768px) {
  .rt-scroll {
    max-height: 200px;
    margin-top: 5rem;
  }
}
.rt-balance {
  text-wrap: balance;
}
.rt-shadow {
  box-shadow: 0 0 8px rgb(0 0 0 / 25%);
}
.rt-rounded {
  border-radius: 1.2rem;
}
.rt-fluid {
  max-width: 100%;
  height: auto;
}
.rt-w-25 {
  width: 25% !important;
}
.rt-w-30 {
  width: 30% !important;
}
.rt-w-40 {
  width: 40% !important;
}
.rt-w-50 {
  width: 50% !important;
}
.rt-w-60 {
  width: 60% !important;
}
.rt-w-70 {
  width: 70% !important;
}
.rt-w-75 {
  width: 75% !important;
}
.rt-w-80 {
  width: 80% !important;
}
.rt-w-100 {
  width: 100% !important;
}
.rt-h-75 {
  height: 75% !important;
}
.rt-h-100 {
  height: 100% !important;
}
@media (max-width: 1199.98px) {
  .rt-w-30 {
    width: 60% !important;
  }
  .rt-w-40 {
    width: 60% !important;
  }
  .rt-w-60 {
    width: 80% !important;
  }
  .rt-w-70 {
    width: 90% !important;
  }
}
@media screen and (max-height: 768px) {
  .rt-w-30 {
    width: 60% !important;
  }
}
@media screen and (max-height: 800px) {
  .rt-w-60 {
    width: 80% !important;
  }
  .rt-w-70 {
    width: 90% !important;
  }
  .rt-w-75 {
    width: 100% !important;
  }
}
.rt-m-auto {
  margin: auto !important;
}
.rt-pt-0 {
  padding-top: min(0vh, 0px) !important;
}
.rt-pt-1 {
  padding-top: min(1vh, 10px) !important;
}
.rt-pt-2 {
  padding-top: min(2vh, 20px) !important;
}
.rt-pt-3 {
  padding-top: min(3vh, 30px) !important;
}
.rt-pt-4 {
  padding-top: min(4vh, 40px) !important;
}
.rt-pt-5 {
  padding-top: min(5vh, 50px) !important;
}
.rt-pt-6 {
  padding-top: min(6vh, 60px) !important;
}
.rt-pt-7 {
  padding-top: min(7vh, 70px) !important;
}
.rt-pt-8 {
  padding-top: min(8vh, 80px) !important;
}
.rt-pt-9 {
  padding-top: min(9vh, 90px) !important;
}
.rt-pt-10 {
  padding-top: min(10vh, 100px) !important;
}
.rt-pr-0 {
  padding-right: min(0vw, 0px) !important;
}
.rt-pr-1 {
  padding-right: min(1vw, 10px) !important;
}
.rt-pr-2 {
  padding-right: min(2vw, 20px) !important;
}
.rt-pr-3 {
  padding-right: min(3vw, 30px) !important;
}
.rt-pr-4 {
  padding-right: min(4vw, 40px) !important;
}
.rt-pr-5 {
  padding-right: min(5vw, 50px) !important;
}
.rt-pr-6 {
  padding-right: min(6vw, 60px) !important;
}
.rt-pr-7 {
  padding-right: min(7vw, 70px) !important;
}
.rt-pr-8 {
  padding-right: min(8vw, 80px) !important;
}
.rt-pr-9 {
  padding-right: min(9vw, 90px) !important;
}
.rt-pr-10 {
  padding-right: min(10vw, 100px) !important;
}
.rt-pb-0 {
  padding-bottom: min(0vh, 0px) !important;
}
.rt-pb-1 {
  padding-bottom: min(1vh, 10px) !important;
}
.rt-pb-2 {
  padding-bottom: min(2vh, 20px) !important;
}
.rt-pb-3 {
  padding-bottom: min(3vh, 30px) !important;
}
.rt-pb-4 {
  padding-bottom: min(4vh, 40px) !important;
}
.rt-pb-5 {
  padding-bottom: min(5vh, 50px) !important;
}
.rt-pb-6 {
  padding-bottom: min(6vh, 60px) !important;
}
.rt-pb-7 {
  padding-bottom: min(7vh, 70px) !important;
}
.rt-pb-8 {
  padding-bottom: min(8vh, 80px) !important;
}
.rt-pb-9 {
  padding-bottom: min(9vh, 90px) !important;
}
.rt-pb-10 {
  padding-bottom: min(10vh, 100px) !important;
}
.rt-pl-0 {
  padding-left: min(0vw, 0px) !important;
}
.rt-pl-1 {
  padding-left: min(1vw, 10px) !important;
}
.rt-pl-2 {
  padding-left: min(2vw, 20px) !important;
}
.rt-pl-3 {
  padding-left: min(3vw, 30px) !important;
}
.rt-pl-4 {
  padding-left: min(4vw, 40px) !important;
}
.rt-pl-5 {
  padding-left: min(5vw, 50px) !important;
}
.rt-pl-6 {
  padding-left: min(6vw, 60px) !important;
}
.rt-pl-7 {
  padding-left: min(7vw, 70px) !important;
}
.rt-pl-8 {
  padding-left: min(8vw, 80px) !important;
}
.rt-pl-9 {
  padding-left: min(9vw, 90px) !important;
}
.rt-pl-10 {
  padding-left: min(10vw, 100px) !important;
}
.rt-mt-0 {
  margin-top: min(0vh, 0px) !important;
}
.rt-mt-1 {
  margin-top: min(1vh, 10px) !important;
}
.rt-mt-2 {
  margin-top: min(2vh, 20px) !important;
}
.rt-mt-3 {
  margin-top: min(3vh, 30px) !important;
}
.rt-mt-4 {
  margin-top: min(4vh, 40px) !important;
}
.rt-mt-5 {
  margin-top: min(5vh, 50px) !important;
}
.rt-mt-6 {
  margin-top: min(6vh, 60px) !important;
}
.rt-mt-7 {
  margin-top: min(7vh, 70px) !important;
}
.rt-mt-8 {
  margin-top: min(8vh, 80px) !important;
}
.rt-mt-9 {
  margin-top: min(9vh, 90px) !important;
}
.rt-mt-10 {
  margin-top: min(10vh, 100px) !important;
}
.rt-mr-0 {
  margin-right: min(0vw, 0px) !important;
}
.rt-mr-1 {
  margin-right: min(1vw, 10px) !important;
}
.rt-mr-2 {
  margin-right: min(2vw, 20px) !important;
}
.rt-mr-3 {
  margin-right: min(3vw, 30px) !important;
}
.rt-mr-4 {
  margin-right: min(4vw, 40px) !important;
}
.rt-mr-5 {
  margin-right: min(5vw, 50px) !important;
}
.rt-mr-6 {
  margin-right: min(6vw, 60px) !important;
}
.rt-mr-7 {
  margin-right: min(7vw, 70px) !important;
}
.rt-mr-8 {
  margin-right: min(8vw, 80px) !important;
}
.rt-mr-9 {
  margin-right: min(9vw, 90px) !important;
}
.rt-mr-10 {
  margin-right: min(10vw, 100px) !important;
}
.rt-mb-0 {
  margin-bottom: min(0vh, 0px) !important;
}
.rt-mb-1 {
  margin-bottom: min(1vh, 10px) !important;
}
.rt-mb-2 {
  margin-bottom: min(2vh, 20px) !important;
}
.rt-mb-3 {
  margin-bottom: min(3vh, 30px) !important;
}
.rt-mb-4 {
  margin-bottom: min(4vh, 40px) !important;
}
.rt-mb-5 {
  margin-bottom: min(5vh, 50px) !important;
}
.rt-mb-6 {
  margin-bottom: min(6vh, 60px) !important;
}
.rt-mb-7 {
  margin-bottom: min(7vh, 70px) !important;
}
.rt-mb-8 {
  margin-bottom: min(8vh, 80px) !important;
}
.rt-mb-9 {
  margin-bottom: min(9vh, 90px) !important;
}
.rt-mb-10 {
  margin-bottom: min(10vh, 100px) !important;
}
.rt-ml-0 {
  margin-left: min(0vw, 0px) !important;
}
.rt-ml-1 {
  margin-left: min(1vw, 10px) !important;
}
.rt-ml-2 {
  margin-left: min(2vw, 20px) !important;
}
.rt-ml-3 {
  margin-left: min(3vw, 30px) !important;
}
.rt-ml-4 {
  margin-left: min(4vw, 40px) !important;
}
.rt-ml-5 {
  margin-left: min(5vw, 50px) !important;
}
.rt-ml-6 {
  margin-left: min(6vw, 60px) !important;
}
.rt-ml-7 {
  margin-left: min(7vw, 70px) !important;
}
.rt-ml-8 {
  margin-left: min(8vw, 80px) !important;
}
.rt-ml-9 {
  margin-left: min(9vw, 90px) !important;
}
.rt-ml-10 {
  margin-left: min(10vw, 100px) !important;
}
.rt-nmt-1 {
  margin-top: calc(-1 * min(1vh, 10px)) !important;
}
.rt-nmt-2 {
  margin-top: calc(-1 * min(2vh, 20px)) !important;
}
.rt-nmt-3 {
  margin-top: calc(-1 * min(3vh, 30px)) !important;
}
.rt-nmt-4 {
  margin-top: calc(-1 * min(4vh, 40px)) !important;
}
.rt-nmt-5 {
  margin-top: calc(-1 * min(5vh, 50px)) !important;
}
.rt-nmt-6 {
  margin-top: calc(-1 * min(6vh, 60px)) !important;
}
.rt-nmt-7 {
  margin-top: calc(-1 * min(7vh, 70px)) !important;
}
.rt-nmt-8 {
  margin-top: calc(-1 * min(8vh, 80px)) !important;
}
.rt-nmt-9 {
  margin-top: calc(-1 * min(9vh, 90px)) !important;
}
.rt-nmt-10 {
  margin-top: calc(-1 * min(10vh, 100px)) !important;
}
.rt-nmr-1 {
  margin-right: calc(-1 * min(1vw, 10px)) !important;
}
.rt-nmr-2 {
  margin-right: calc(-1 * min(2vw, 20px)) !important;
}
.rt-nmr-3 {
  margin-right: calc(-1 * min(3vw, 30px)) !important;
}
.rt-nmr-4 {
  margin-right: calc(-1 * min(4vw, 40px)) !important;
}
.rt-nmr-5 {
  margin-right: calc(-1 * min(5vw, 50px)) !important;
}
.rt-nmr-6 {
  margin-right: calc(-1 * min(6vw, 60px)) !important;
}
.rt-nmr-7 {
  margin-right: calc(-1 * min(7vw, 70px)) !important;
}
.rt-nmr-8 {
  margin-right: calc(-1 * min(8vw, 80px)) !important;
}
.rt-nmr-9 {
  margin-right: calc(-1 * min(9vw, 90px)) !important;
}
.rt-nmr-10 {
  margin-right: calc(-1 * min(10vw, 100px)) !important;
}
.rt-nmb-1 {
  margin-bottom: calc(-1 * min(1vh, 10px)) !important;
}
.rt-nmb-2 {
  margin-bottom: calc(-1 * min(2vh, 20px)) !important;
}
.rt-nmb-3 {
  margin-bottom: calc(-1 * min(3vh, 30px)) !important;
}
.rt-nmb-4 {
  margin-bottom: calc(-1 * min(4vh, 40px)) !important;
}
.rt-nmb-5 {
  margin-bottom: calc(-1 * min(5vh, 50px)) !important;
}
.rt-nmb-6 {
  margin-bottom: calc(-1 * min(6vh, 60px)) !important;
}
.rt-nmb-7 {
  margin-bottom: calc(-1 * min(7vh, 70px)) !important;
}
.rt-nmb-8 {
  margin-bottom: calc(-1 * min(8vh, 80px)) !important;
}
.rt-nmb-9 {
  margin-bottom: calc(-1 * min(9vh, 90px)) !important;
}
.rt-nmb-10 {
  margin-bottom: calc(-1 * min(10vh, 100px)) !important;
}
.rt-nml-1 {
  margin-left: calc(-1 * min(1vw, 10px)) !important;
}
.rt-nml-2 {
  margin-left: calc(-1 * min(2vw, 20px)) !important;
}
.rt-nml-3 {
  margin-left: calc(-1 * min(3vw, 30px)) !important;
}
.rt-nml-4 {
  margin-left: calc(-1 * min(4vw, 40px)) !important;
}
.rt-nml-5 {
  margin-left: calc(-1 * min(5vw, 50px)) !important;
}
.rt-nml-6 {
  margin-left: calc(-1 * min(6vw, 60px)) !important;
}
.rt-nml-7 {
  margin-left: calc(-1 * min(7vw, 70px)) !important;
}
.rt-nml-8 {
  margin-left: calc(-1 * min(8vw, 80px)) !important;
}
.rt-nml-9 {
  margin-left: calc(-1 * min(9vw, 90px)) !important;
}
.rt-nml-10 {
  margin-left: calc(-1 * min(10vw, 100px)) !important;
}
.rt-zoom {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 20px;
}
.rt-zoom__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  cursor: zoom-in;
}
.rt-zoom__caption {
  padding: 15px 20px;
  background: var(--light-background-color, #FFFFD6);
  color: var(--dark-text-color, #302f2d);
  text-align: center;
  font-size: 16px;
  border-radius: 0 0 8px 8px;
}
.rt-zoom::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 85%;
  width: 50px;
  height: 50px;
  background: url("/images/global/gui/icon-magnify.png") no-repeat center center;
  background-size: contain;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.rt-audio {
  display: block;
  width: 100%;
  max-width: 32rem;
  margin: 0.5rem 0;
}
.rt-word {
  text-decoration: underline dotted currentColor;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.rt-word:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 0.15em;
}
.rt-word:hover {
  text-decoration-style: solid;
}
.rt-word.is-busy {
  cursor: progress;
  opacity: 0.65;
}
.rt-word.is-failed {
  text-decoration-style: wavy;
  cursor: default;
}
@media print {
  .rt-word {
    text-decoration: none;
    cursor: auto;
  }
}
:is(.rte__surface, .rt-boxed) .rt-l--slide {
  height: auto;
  width: 100%;
  max-width: calc(66vh * 16 / 9);
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  container-type: size;
  container-name: rt-slide;
}
:is(.rte__surface, .rt-boxed) .rt-pt-0 {
  padding-top: min(0cqh, 0px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pt-1 {
  padding-top: min(1cqh, 10px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pt-2 {
  padding-top: min(2cqh, 20px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pt-3 {
  padding-top: min(3cqh, 30px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pt-4 {
  padding-top: min(4cqh, 40px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pt-5 {
  padding-top: min(5cqh, 50px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pt-6 {
  padding-top: min(6cqh, 60px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pt-7 {
  padding-top: min(7cqh, 70px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pt-8 {
  padding-top: min(8cqh, 80px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pt-9 {
  padding-top: min(9cqh, 90px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pt-10 {
  padding-top: min(10cqh, 100px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pr-0 {
  padding-right: min(0cqw, 0px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pr-1 {
  padding-right: min(1cqw, 10px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pr-2 {
  padding-right: min(2cqw, 20px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pr-3 {
  padding-right: min(3cqw, 30px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pr-4 {
  padding-right: min(4cqw, 40px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pr-5 {
  padding-right: min(5cqw, 50px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pr-6 {
  padding-right: min(6cqw, 60px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pr-7 {
  padding-right: min(7cqw, 70px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pr-8 {
  padding-right: min(8cqw, 80px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pr-9 {
  padding-right: min(9cqw, 90px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pr-10 {
  padding-right: min(10cqw, 100px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pb-0 {
  padding-bottom: min(0cqh, 0px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pb-1 {
  padding-bottom: min(1cqh, 10px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pb-2 {
  padding-bottom: min(2cqh, 20px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pb-3 {
  padding-bottom: min(3cqh, 30px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pb-4 {
  padding-bottom: min(4cqh, 40px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pb-5 {
  padding-bottom: min(5cqh, 50px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pb-6 {
  padding-bottom: min(6cqh, 60px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pb-7 {
  padding-bottom: min(7cqh, 70px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pb-8 {
  padding-bottom: min(8cqh, 80px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pb-9 {
  padding-bottom: min(9cqh, 90px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pb-10 {
  padding-bottom: min(10cqh, 100px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pl-0 {
  padding-left: min(0cqw, 0px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pl-1 {
  padding-left: min(1cqw, 10px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pl-2 {
  padding-left: min(2cqw, 20px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pl-3 {
  padding-left: min(3cqw, 30px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pl-4 {
  padding-left: min(4cqw, 40px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pl-5 {
  padding-left: min(5cqw, 50px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pl-6 {
  padding-left: min(6cqw, 60px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pl-7 {
  padding-left: min(7cqw, 70px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pl-8 {
  padding-left: min(8cqw, 80px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pl-9 {
  padding-left: min(9cqw, 90px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-pl-10 {
  padding-left: min(10cqw, 100px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mt-0 {
  margin-top: min(0cqh, 0px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mt-1 {
  margin-top: min(1cqh, 10px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mt-2 {
  margin-top: min(2cqh, 20px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mt-3 {
  margin-top: min(3cqh, 30px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mt-4 {
  margin-top: min(4cqh, 40px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mt-5 {
  margin-top: min(5cqh, 50px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mt-6 {
  margin-top: min(6cqh, 60px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mt-7 {
  margin-top: min(7cqh, 70px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mt-8 {
  margin-top: min(8cqh, 80px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mt-9 {
  margin-top: min(9cqh, 90px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mt-10 {
  margin-top: min(10cqh, 100px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mr-0 {
  margin-right: min(0cqw, 0px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mr-1 {
  margin-right: min(1cqw, 10px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mr-2 {
  margin-right: min(2cqw, 20px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mr-3 {
  margin-right: min(3cqw, 30px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mr-4 {
  margin-right: min(4cqw, 40px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mr-5 {
  margin-right: min(5cqw, 50px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mr-6 {
  margin-right: min(6cqw, 60px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mr-7 {
  margin-right: min(7cqw, 70px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mr-8 {
  margin-right: min(8cqw, 80px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mr-9 {
  margin-right: min(9cqw, 90px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mr-10 {
  margin-right: min(10cqw, 100px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mb-0 {
  margin-bottom: min(0cqh, 0px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mb-1 {
  margin-bottom: min(1cqh, 10px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mb-2 {
  margin-bottom: min(2cqh, 20px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mb-3 {
  margin-bottom: min(3cqh, 30px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mb-4 {
  margin-bottom: min(4cqh, 40px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mb-5 {
  margin-bottom: min(5cqh, 50px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mb-6 {
  margin-bottom: min(6cqh, 60px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mb-7 {
  margin-bottom: min(7cqh, 70px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mb-8 {
  margin-bottom: min(8cqh, 80px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mb-9 {
  margin-bottom: min(9cqh, 90px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-mb-10 {
  margin-bottom: min(10cqh, 100px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-ml-0 {
  margin-left: min(0cqw, 0px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-ml-1 {
  margin-left: min(1cqw, 10px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-ml-2 {
  margin-left: min(2cqw, 20px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-ml-3 {
  margin-left: min(3cqw, 30px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-ml-4 {
  margin-left: min(4cqw, 40px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-ml-5 {
  margin-left: min(5cqw, 50px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-ml-6 {
  margin-left: min(6cqw, 60px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-ml-7 {
  margin-left: min(7cqw, 70px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-ml-8 {
  margin-left: min(8cqw, 80px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-ml-9 {
  margin-left: min(9cqw, 90px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-ml-10 {
  margin-left: min(10cqw, 100px) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmt-1 {
  margin-top: calc(-1 * min(1cqh, 10px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmt-2 {
  margin-top: calc(-1 * min(2cqh, 20px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmt-3 {
  margin-top: calc(-1 * min(3cqh, 30px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmt-4 {
  margin-top: calc(-1 * min(4cqh, 40px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmt-5 {
  margin-top: calc(-1 * min(5cqh, 50px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmt-6 {
  margin-top: calc(-1 * min(6cqh, 60px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmt-7 {
  margin-top: calc(-1 * min(7cqh, 70px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmt-8 {
  margin-top: calc(-1 * min(8cqh, 80px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmt-9 {
  margin-top: calc(-1 * min(9cqh, 90px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmt-10 {
  margin-top: calc(-1 * min(10cqh, 100px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmr-1 {
  margin-right: calc(-1 * min(1cqw, 10px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmr-2 {
  margin-right: calc(-1 * min(2cqw, 20px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmr-3 {
  margin-right: calc(-1 * min(3cqw, 30px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmr-4 {
  margin-right: calc(-1 * min(4cqw, 40px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmr-5 {
  margin-right: calc(-1 * min(5cqw, 50px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmr-6 {
  margin-right: calc(-1 * min(6cqw, 60px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmr-7 {
  margin-right: calc(-1 * min(7cqw, 70px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmr-8 {
  margin-right: calc(-1 * min(8cqw, 80px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmr-9 {
  margin-right: calc(-1 * min(9cqw, 90px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmr-10 {
  margin-right: calc(-1 * min(10cqw, 100px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmb-1 {
  margin-bottom: calc(-1 * min(1cqh, 10px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmb-2 {
  margin-bottom: calc(-1 * min(2cqh, 20px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmb-3 {
  margin-bottom: calc(-1 * min(3cqh, 30px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmb-4 {
  margin-bottom: calc(-1 * min(4cqh, 40px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmb-5 {
  margin-bottom: calc(-1 * min(5cqh, 50px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmb-6 {
  margin-bottom: calc(-1 * min(6cqh, 60px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmb-7 {
  margin-bottom: calc(-1 * min(7cqh, 70px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmb-8 {
  margin-bottom: calc(-1 * min(8cqh, 80px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmb-9 {
  margin-bottom: calc(-1 * min(9cqh, 90px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nmb-10 {
  margin-bottom: calc(-1 * min(10cqh, 100px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nml-1 {
  margin-left: calc(-1 * min(1cqw, 10px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nml-2 {
  margin-left: calc(-1 * min(2cqw, 20px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nml-3 {
  margin-left: calc(-1 * min(3cqw, 30px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nml-4 {
  margin-left: calc(-1 * min(4cqw, 40px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nml-5 {
  margin-left: calc(-1 * min(5cqw, 50px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nml-6 {
  margin-left: calc(-1 * min(6cqw, 60px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nml-7 {
  margin-left: calc(-1 * min(7cqw, 70px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nml-8 {
  margin-left: calc(-1 * min(8cqw, 80px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nml-9 {
  margin-left: calc(-1 * min(9cqw, 90px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-nml-10 {
  margin-left: calc(-1 * min(10cqw, 100px)) !important;
}
:is(.rte__surface, .rt-boxed) .rt-dec-logo, .sunset-theme :is(.rte__surface, .rt-boxed) .rt-dec-logo, body:has(.sunset-theme) :is(.rte__surface, .rt-boxed) .rt-dec-logo {
  width: 40cqh;
  height: 40cqh;
}
:is(.rte__surface, .rt-boxed) .rt-dec-heart {
  width: 24cqh;
  height: 24cqh;
}
:is(.rte__surface, .rt-boxed) .rt-dec-quotations {
  width: 14cqh;
  height: 10cqh;
}
:is(.rte__surface, .rt-boxed) .rt-dec-pointer {
  left: 20cqw;
  width: 15cqh;
  height: 18cqh;
}
:is(.rte__surface, .rt-boxed) .rt-media-vimeo {
  margin: 5cqh;
}
:is(.rte__surface, .rt-boxed) .rt-scroll {
  max-height: 46cqh;
  margin: 2cqh;
  margin-top: 8cqh;
}
.constellation-bg__track {
  position: absolute;
  inset: -16%;
  width: 132%;
  height: 132%;
  will-change: transform;
  animation: constellation-drift-loop 220s linear infinite alternate;
}
.constellation {
  position: absolute;
  opacity: 0.85;
}
.constellation--bird {
  width: 28rem;
  top: 24%;
  left: 55%;
}
.constellation--small-a {
  width: 8rem;
  top: 18%;
  left: 24%;
  opacity: 0.32;
  transform: rotate(-8deg);
}
.constellation--small-b {
  width: 7rem;
  top: 70%;
  left: 74%;
  opacity: 0.26;
  transform: rotate(10deg);
}
.constellation__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.constellation__line {
  stroke: color-mix(in srgb, #f6f2d8 30%, transparent);
  stroke-width: 1.2;
  stroke-linecap: round;
  fill: none;
}
.constellation__star {
  fill: #edf3cf;
  filter: drop-shadow(0 0 4px rgba(237, 243, 207, 0.35)) drop-shadow(0 0 10px rgba(237, 243, 207, 0.18));
  animation: star-pulse 4.8s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.constellation__star:nth-of-type(2n) {
  animation-duration: 5.9s;
}
.constellation__star:nth-of-type(3n) {
  animation-duration: 6.8s;
}
.constellation__star--lg {
  filter: drop-shadow(0 0 6px rgba(237, 243, 207, 0.42)) drop-shadow(0 0 16px rgba(237, 243, 207, 0.24));
  transform-origin: center;
  transform-box: fill-box;
}
.sky-star {
  position: absolute;
  border-radius: 9999px;
  background: radial-gradient(circle, rgba(237,243,207,0.95) 0%, rgba(237,243,207,0.55) 40%, rgba(237,243,207,0) 100%);
  animation: star-pulse 6s ease-in-out infinite;
  opacity: 0.55;
  transform-origin: center;
}
.sky-star--1 {
  top: 18%;
  left: 12%;
  width: 0.22rem;
  height: 0.22rem;
  animation-delay: -1.2s;
}
.sky-star--2 {
  top: 30%;
  left: 40%;
  width: 0.18rem;
  height: 0.18rem;
  animation-delay: -3.6s;
}
.sky-star--3 {
  top: 46%;
  left: 84%;
  width: 0.20rem;
  height: 0.20rem;
  animation-delay: -2.3s;
}
.sky-star--4 {
  top: 72%;
  left: 64%;
  width: 0.16rem;
  height: 0.16rem;
  animation-delay: -5.1s;
}
.sky-star--5 {
  top: 80%;
  left: 18%;
  width: 0.22rem;
  height: 0.22rem;
  animation-delay: -0.7s;
}
.sky-star--6 {
  top: 56%;
  left: 52%;
  width: 0.14rem;
  height: 0.14rem;
  animation-delay: -4.4s;
}
.sky-star--7 {
  top: 24%;
  left: 88%;
  width: 0.18rem;
  height: 0.18rem;
  animation-delay: -2.8s;
}
.sky-star--8 {
  top: 64%;
  left: 30%;
  width: 0.16rem;
  height: 0.16rem;
  animation-delay: -1.9s;
}
@keyframes constellation-drift-loop {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(320px, -240px, 0);
  }
}
@keyframes star-pulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.12);
  }
}
@media (prefers-reduced-motion: reduce) {
  .constellation-bg__track, .constellation__star, .sky-star {
    animation: none;
  }
}
.light-mode-bird-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.light-mode-bird-background__environment {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(22rem, 38vw, 68rem);
  aspect-ratio: 2000 / 512;
  background-image: url('/dashboard/images/background-environment.png');
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
  opacity: var(--app-accent-image-opacity, 1);
  z-index: 0;
  pointer-events: none;
}
.light-mode-bird-background__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  z-index: 1;
}
.bird-cluster {
  fill: none;
  stroke: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    stroke: color-mix(in srgb, var(--app-text) 20%, transparent);
  }
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.72;
}
.bird-cluster--one {
  animation: bird-cluster-drift-one 95s linear infinite;
}
.bird-cluster--two {
  animation: bird-cluster-drift-two 115s linear infinite;
  animation-delay: -42s;
}
.bird {
  transform-box: fill-box;
  transform-origin: center;
}
.bird-wing {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.9;
}
.bird-wing--left {
  opacity: 0.7;
}
.bird-wing--right {
  opacity: 1;
}
.bird--sm .bird-wing {
  stroke-width: 1.7;
}
.bird--xs .bird-wing {
  stroke-width: 1.5;
}
@keyframes bird-cluster-drift-one {
  0% {
    transform: translate(-360px, 430px);
    opacity: 0;
  }
  8% {
    opacity: 0.72;
  }
  92% {
    opacity: 0.72;
  }
  100% {
    transform: translate(1760px, 350px);
    opacity: 0;
  }
}
@keyframes bird-cluster-drift-two {
  0% {
    transform: translate(-980px, 610px);
    opacity: 0;
  }
  8% {
    opacity: 0.64;
  }
  92% {
    opacity: 0.64;
  }
  100% {
    transform: translate(1700px, 500px);
    opacity: 0;
  }
}
@media (max-width: 1024px) {
  .light-mode-bird-background__environment {
    width: clamp(28rem, 82vw, 90rem);
  }
}
@media (max-width: 640px) {
  .light-mode-bird-background__environment {
    width: 120vw;
    right: -10vw;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bird-cluster {
    animation: none !important;
  }
  .bird-wing animate {
    display: none;
  }
}
.asset-card__preview {
  display: flex;
  min-height: 9rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 2);
  background-color: var(--app-page-bg);
  border-color: var(--app-border);
}
.asset-card__preview img {
  max-height: calc(var(--spacing) * 40);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.asset-card__preview audio {
  width: 100%;
}
.asset-card__preview iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
.class-card {
  position: relative;
  display: flex;
  min-height: calc(var(--spacing) * 64);
  width: 100%;
  flex-direction: column;
  border-radius: 1.75rem;
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 6);
  &:hover {
    box-shadow: var(--app-shadow-lg);
  }
  box-shadow: var(--app-shadow-md);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  --tw-ease: var(--ease-out);
  transition-timing-function: var(--ease-out);
  &:hover {
    @media (hover: hover) {
      --tw-translate-y: calc(var(--spacing) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  @media (width >= 48rem) {
    min-height: 30rem;
  }
}
.class-card--open {
  z-index: 50;
}
.learner-card {
  position: relative;
  display: flex;
  min-height: calc(var(--spacing) * 64);
  width: 100%;
  flex-direction: column;
  border-radius: 1.75rem;
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 6);
  text-align: center;
  &:hover {
    box-shadow: var(--app-shadow-lg);
  }
  box-shadow: var(--app-shadow-md);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  --tw-ease: var(--ease-out);
  transition-timing-function: var(--ease-out);
  &:hover {
    @media (hover: hover) {
      --tw-translate-y: calc(var(--spacing) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  @media (width >= 48rem) {
    min-height: 24rem;
  }
}
.learner-card--open {
  z-index: 50;
}
.learner-card-pin {
  margin-top: calc(var(--spacing) * 5);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  border-radius: var(--radius-2xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 5);
  padding-block: calc(var(--spacing) * 3);
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-go) 10%, var(--app-surface));
  }
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 26%, var(--app-border));
  }
}
.learner-card-pin-label {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-leading: 1;
  line-height: 1;
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  --tw-tracking: 0.18em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 60%, transparent);
  }
}
.learner-card-pin-value {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 0.22em;
  font-family: var(--font-mono);
  font-size: 1.75rem;
  --tw-leading: 1;
  line-height: 1;
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  --tw-tracking: 0.22em;
  letter-spacing: 0.22em;
  color: var(--app-button-go);
}
.nav-card {
  display: block;
  min-height: calc(var(--spacing) * 28);
  width: 100%;
  border-radius: 1rem;
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 6);
  text-decoration-line: none;
  &:hover {
    box-shadow: var(--app-shadow-lg);
  }
  box-shadow: var(--app-shadow-md);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  --tw-ease: var(--ease-out);
  transition-timing-function: var(--ease-out);
  &:hover {
    @media (hover: hover) {
      --tw-translate-y: calc(var(--spacing) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  @media (width >= 48rem) {
    min-height: calc(var(--spacing) * 72);
  }
}
.nav-card__mobile-icon {
  font-size: 1.65rem;
}
.nav-card__desktop-icon {
  font-size: 3rem;
}
.cohort-card {
  position: relative;
  display: flex;
  min-height: 14rem;
  width: 100%;
  flex-direction: column;
  border-radius: 1.35rem;
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 6);
  &:hover {
    box-shadow: var(--app-shadow-lg);
  }
  box-shadow: var(--app-shadow-md);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  --tw-ease: var(--ease-out);
  transition-timing-function: var(--ease-out);
  &:hover {
    @media (hover: hover) {
      --tw-translate-y: calc(var(--spacing) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
}
.cohort-card--open {
  z-index: 50;
}
.cohort-card__icon {
  font-size: 1.9rem;
  --tw-leading: 1;
  line-height: 1;
}
.organization-member-card {
  position: relative;
  display: flex;
  min-height: calc(var(--spacing) * 64);
  width: 100%;
  flex-direction: column;
  border-radius: 1.75rem;
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 6);
  text-align: center;
  &:hover {
    box-shadow: var(--app-shadow-lg);
  }
  box-shadow: var(--app-shadow-md);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  --tw-ease: var(--ease-out);
  transition-timing-function: var(--ease-out);
  &:hover {
    @media (hover: hover) {
      --tw-translate-y: calc(var(--spacing) * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  @media (width >= 48rem) {
    min-height: 24rem;
  }
}
.organization-member-card--open {
  z-index: 50;
}
.stat-card {
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 5);
  box-shadow: var(--app-shadow-md);
  background-color: var(--app-surface);
  border-color: var(--app-border);
}
.stat-card-icon {
  font-size: 1.55rem;
  --tw-leading: 1;
  line-height: 1;
}
.activity-preview {
  position: fixed;
  inset: calc(var(--spacing) * 0);
  z-index: 70;
  display: flex;
  flex-direction: column;
  background-color: var(--app-page-bg);
}
.activity-preview__bar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  padding-inline: calc(var(--spacing) * 5);
  padding-block: calc(var(--spacing) * 3);
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}
.activity-preview__eyebrow {
  margin-right: calc(var(--spacing) * 3);
  display: inline-flex;
  align-items: center;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 1);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  --tw-tracking: 0.12em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background-color: var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-standard) 14%, var(--app-surface));
  }
  border-color: var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-standard) 30%, var(--app-border));
  }
  color: var(--app-button-standard);
}
.activity-preview__title {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.activity-preview__close {
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  border-radius: var(--radius-xl);
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2.5);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  background-color: var(--app-button-danger);
  color: var(--app-text-invert);
}
.activity-preview__close:hover {
  opacity: 0.9;
}
.activity-preview__stage {
  min-height: calc(var(--spacing) * 0);
  flex: 1;
  overflow: auto;
  contain: layout;
}
.type-card {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: flex-start;
  gap: calc(var(--spacing) * 4);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 4);
  text-align: left;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}
.type-card:hover {
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 45%, var(--app-border));
  }
}
.type-card--selected {
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-go) 10%, var(--app-surface));
  }
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 60%, var(--app-border));
  }
}
.type-card__icon {
  display: inline-flex;
  height: calc(var(--spacing) * 11);
  width: calc(var(--spacing) * 11);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-go) 14%, var(--app-surface));
  }
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 28%, var(--app-border));
  }
  color: var(--app-button-go);
}
.activity-wizard {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 5);
}
.activity-wizard__body {
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 5);
  background-color: var(--app-surface);
  border-color: var(--app-border);
}
.activity-wizard__heading {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
  @media (width >= 64rem) {
    flex-direction: row;
  }
  @media (width >= 64rem) {
    align-items: flex-start;
  }
  @media (width >= 64rem) {
    justify-content: space-between;
  }
}
.activity-wizard__eyebrow {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  --tw-tracking: 0.12em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 58%, transparent);
  }
}
.activity-wizard__title {
  margin-top: calc(var(--spacing) * 1);
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  --tw-leading: var(--leading-tight);
  line-height: var(--leading-tight);
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.activity-wizard__instruction {
  margin-top: calc(var(--spacing) * 2);
  max-width: var(--container-2xl);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 72%, transparent);
  }
}
.activity-wizard__status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}
.activity-wizard__footer {
  position: sticky;
  bottom: calc(var(--spacing) * 0);
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 4);
  background-color: var(--app-surface);
  border-color: var(--app-border);
  box-shadow: var(--app-shadow-above);
}
.activity-wizard__footer-spacer {
  flex: 1;
}
.wizard-rail {
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 4);
  background-color: var(--app-surface);
  border-color: var(--app-border);
}
.wizard-rail__list {
  display: none;
  @media (width >= 48rem) {
    display: flex;
  }
  @media (width >= 48rem) {
    align-items: center;
  }
  @media (width >= 48rem) {
    gap: calc(var(--spacing) * 1);
  }
}
.wizard-rail__item {
  display: flex;
  min-width: calc(var(--spacing) * 0);
  flex: 1;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  &:last-child {
    flex: none;
  }
}
.wizard-rail__step {
  display: flex;
  min-width: calc(var(--spacing) * 0);
  align-items: center;
  gap: calc(var(--spacing) * 2);
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  background-color: transparent;
  border-color: transparent;
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 62%, transparent);
  }
}
.wizard-rail__step:not(:disabled):hover {
  background-color: var(--app-nav-item-hover);
}
.wizard-rail__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wizard-rail__pip {
  display: inline-flex;
  height: calc(var(--spacing) * 7);
  width: calc(var(--spacing) * 7);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  border-color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-text) 22%, transparent);
  }
}
.wizard-rail__connector {
  height: 1px;
  min-width: calc(var(--spacing) * 4);
  flex: 1;
  background-color: var(--app-border);
}
.wizard-rail__step--reachable {
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 70%, transparent);
  }
}
.wizard-rail__step--done {
  color: var(--app-button-go);
}
.wizard-rail__step--done .wizard-rail__pip {
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-go) 14%, var(--app-surface));
  }
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 40%, var(--app-border));
  }
  color: var(--app-button-go);
}
.wizard-rail__step--current {
  background-color: var(--app-nav-item-active-bg);
  border-color: var(--app-nav-item-active-border);
  color: var(--app-nav-item-active-text);
}
.wizard-rail__step--current .wizard-rail__pip {
  background-color: var(--app-button-standard);
  border-color: var(--app-button-standard);
  color: var(--app-text-invert);
}
.wizard-rail__step--problem {
  color: var(--app-button-danger);
}
.wizard-rail__step--problem .wizard-rail__pip {
  background-color: var(--app-button-danger);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-danger) 14%, var(--app-surface));
  }
  border-color: var(--app-button-danger);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-danger) 40%, var(--app-border));
  }
  color: var(--app-button-danger);
}
.wizard-rail__step--locked {
  cursor: not-allowed;
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 34%, transparent);
  }
}
.wizard-rail__step--locked .wizard-rail__pip {
  border-color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-text) 14%, transparent);
  }
}
.wizard-rail__compact {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  @media (width >= 48rem) {
    display: none;
  }
}
.wizard-rail__compact-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.wizard-rail__compact-label {
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 68%, transparent);
  }
}
.wizard-rail__progress {
  height: calc(var(--spacing) * 1.5);
  width: 100%;
  overflow: hidden;
  border-radius: calc(infinity * 1px);
  background-color: var(--app-border);
}
.wizard-rail__progress-fill {
  height: 100%;
  border-radius: calc(infinity * 1px);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  background-color: var(--app-button-go);
}
.activity-issues {
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 4);
}
.activity-issues--blocking {
  background-color: var(--app-button-danger);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-danger) 8%, var(--app-surface));
  }
  border-color: var(--app-button-danger);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-danger) 28%, var(--app-border));
  }
}
.activity-issues--advisory {
  background-color: var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-standard) 8%, var(--app-surface));
  }
  border-color: var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-standard) 24%, var(--app-border));
  }
}
.activity-issues__heading {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.activity-issues--blocking .activity-issues__heading {
  color: var(--app-button-danger);
}
.activity-issues--advisory .activity-issues__heading {
  color: var(--app-button-standard);
}
.activity-issues__list {
  margin-top: calc(var(--spacing) * 3);
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
}
.activity-issues__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
}
.activity-issues__dot {
  height: calc(var(--spacing) * 2);
  width: calc(var(--spacing) * 2);
  flex-shrink: 0;
  border-radius: calc(infinity * 1px);
}
.activity-issues__dot--blocking {
  background-color: var(--app-button-danger);
}
.activity-issues__dot--advisory {
  background-color: var(--app-button-standard);
}
.activity-review {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 5);
}
.activity-review__ready {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 4);
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-go) 8%, var(--app-surface));
  }
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 26%, var(--app-border));
  }
}
.activity-review__ready-text {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 72%, transparent);
  }
}
.activity-review__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: calc(var(--spacing) * 5);
  @media (width >= 80rem) {
    grid-template-columns: minmax(0,2fr) minmax(0,1fr);
  }
}
.activity-review__sections {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
}
.activity-review__preview {
  @media (width >= 80rem) {
    position: sticky;
  }
  @media (width >= 80rem) {
    top: calc(var(--spacing) * 6);
  }
  @media (width >= 80rem) {
    align-self: flex-start;
  }
}
.activity-review__preview-card {
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 5);
  background-color: var(--app-page-bg);
  border-color: var(--app-border);
}
.activity-review__preview-title {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-leading: var(--leading-tight);
  line-height: var(--leading-tight);
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.activity-review__preview-hint {
  margin-top: calc(var(--spacing) * 1);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 68%, transparent);
  }
}
.activity-review__section {
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 5);
  background-color: var(--app-page-bg);
  border-color: var(--app-border);
}
.activity-review__section--problem {
  border-color: var(--app-button-danger);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-danger) 34%, var(--app-border));
  }
}
.activity-review__section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 3);
}
.activity-review__section-title {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-leading: var(--leading-tight);
  line-height: var(--leading-tight);
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.activity-review__number {
  display: inline-flex;
  height: calc(var(--spacing) * 7);
  width: calc(var(--spacing) * 7);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  background-color: var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-standard) 12%, var(--app-surface));
  }
  border-color: var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-standard) 30%, var(--app-border));
  }
  color: var(--app-button-standard);
}
.activity-review__section-body {
  margin-top: calc(var(--spacing) * 4);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
}
.activity-review__chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
}
.activity-review__rich-text {
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 4);
  background-color: var(--app-surface);
  border-color: var(--app-border);
}
.activity-still {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 3);
}
.activity-still__empty, .activity-still__note {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 62%, transparent);
  }
}
.activity-still__content {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 3);
}
.quiz-summary {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
}
.quiz-summary__item {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3);
}
.quiz-summary__number {
  display: inline-flex;
  height: calc(var(--spacing) * 6);
  width: calc(var(--spacing) * 6);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  border-color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-text) 18%, transparent);
  }
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 62%, transparent);
  }
}
.quiz-summary__explanation {
  margin-top: calc(var(--spacing) * 0.5);
  display: block;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 60%, transparent);
  }
}
.quiz-preview {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 3);
}
.quiz-preview__question {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.quiz-preview__options {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
}
.quiz-preview__option {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  background-color: var(--app-surface);
  border-color: var(--app-border);
}
.quiz-preview__marker {
  height: calc(var(--spacing) * 3.5);
  width: calc(var(--spacing) * 3.5);
  flex-shrink: 0;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-text) 30%, transparent);
  }
}
.quiz-preview__marker--correct {
  background-color: var(--app-button-go);
  border-color: var(--app-button-go);
}
.quiz-preview__tick {
  flex-shrink: 0;
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-leading: 1;
  line-height: 1;
  color: var(--app-button-go);
}
.word-chip {
  display: inline-flex;
  align-items: center;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 1);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}
.anagram-preview {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
}
.anagram-preview__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.anagram-preview__scrambled {
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 2);
  padding-block: calc(var(--spacing) * 1);
  font-family: var(--font-mono);
  --tw-tracking: var(--tracking-widest);
  letter-spacing: var(--tracking-widest);
  background-color: var(--app-surface);
  border-color: var(--app-border);
}
.anagram-preview__arrow {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 45%, transparent);
  }
}
.anagram-preview__answer {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--app-button-go);
}
.word-search-preview {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
}
.word-search-preview__grid {
  display: block;
  max-width: 100%;
  border-collapse: collapse;
  overflow-x: auto;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}
.word-search-preview__cell {
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 1.5);
  padding-block: calc(var(--spacing) * 1);
  text-transform: uppercase;
  border-color: var(--app-border);
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 78%, transparent);
  }
}
.blank-summary {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
}
.blank-summary__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.blank-summary__source {
  min-width: calc(var(--spacing) * 0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.blank-summary__arrow {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 45%, transparent);
  }
}
.drop-summary__area {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 1);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}
.drop-summary__count {
  flex-shrink: 0;
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing) * 1.5);
  font-size: 0.65rem;
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  background-color: var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-standard) 16%, transparent);
  }
  color: var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-button-standard) 90%, var(--app-text));
  }
}
.activity-maker__section {
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 5);
  background-color: var(--app-page-bg);
  border-color: var(--app-border);
}
.activity-maker__section + .activity-maker__section {
  margin-top: calc(var(--spacing) * 5);
}
.activity-maker__section-title {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-leading: var(--leading-tight);
  line-height: var(--leading-tight);
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.activity-maker__section-hint {
  margin-top: calc(var(--spacing) * 1);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 68%, transparent);
  }
}
.quiz-settings__threshold {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: calc(var(--spacing) * 2);
}
.quiz-settings__threshold-value {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--app-button-go);
}
.blanks-composer {
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 4);
  background-color: var(--app-surface);
  border-color: var(--app-border);
}
.blanks-composer__preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 4);
}
.blanks-composer__label {
  display: block;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  --tw-tracking: 0.1em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 55%, transparent);
  }
}
.blanks-composer__text {
  margin-top: calc(var(--spacing) * 1);
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.blanks-composer__text--blanks {
  letter-spacing: 0.18em;
  color: var(--app-button-go);
}
.blanks-composer__arrow {
  font-size: 1.5rem;
  --tw-leading: 1;
  line-height: 1;
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 45%, transparent);
  }
}
.blanks-composer__input {
  letter-spacing: 0.18em;
}
.blanks-composer__problem {
  margin-top: calc(var(--spacing) * 3);
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--app-button-danger);
}
.blanks-composer__ok {
  margin-top: calc(var(--spacing) * 3);
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  color: var(--app-button-go);
}
.drop-target__list {
  margin-top: calc(var(--spacing) * 4);
  display: flex;
  list-style-type: none;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 0);
}
.drop-target__item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  background-color: var(--app-surface);
  border-color: var(--app-border);
}
.drop-target__label {
  min-width: calc(var(--spacing) * 0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.drop-target__form {
  margin-top: calc(var(--spacing) * 4);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 4);
  background-color: var(--app-surface);
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 35%, var(--app-border));
  }
}
.droppable__column {
  display: flex;
  min-width: calc(var(--spacing) * 0);
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 4);
  background-color: var(--app-surface);
  border-color: var(--app-border);
}
.droppable__list {
  display: flex;
  max-height: 20rem;
  list-style-type: none;
  flex-direction: column;
  gap: calc(var(--spacing) * 1);
  overflow-y: auto;
  padding: calc(var(--spacing) * 0);
}
.droppable__item {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  text-align: left;
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  background-color: var(--app-page-bg);
  border-color: var(--app-border);
  color: var(--app-text);
}
.droppable__item:hover {
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 45%, var(--app-border));
  }
}
.droppable__item--selected {
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-go) 16%, var(--app-surface));
  }
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 55%, var(--app-border));
  }
  font-weight: 600;
}
.droppable__answer {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2.5);
  text-align: left;
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  background-color: var(--app-page-bg);
  border-color: var(--app-border);
  color: var(--app-text);
}
.droppable__answer:hover {
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 45%, var(--app-border));
  }
}
.droppable__answer--on {
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-go) 16%, var(--app-surface));
  }
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 55%, var(--app-border));
  }
  font-weight: 600;
}
.droppable__assigned {
  margin-top: calc(var(--spacing) * 3);
  display: flex;
  list-style-type: none;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 0);
}
.droppable__assigned-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  background-color: var(--app-surface);
  border-color: var(--app-border);
}
.fill-blanks__column {
  display: flex;
  min-width: calc(var(--spacing) * 0);
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
}
.fill-blanks__list {
  display: flex;
  max-height: 20rem;
  list-style-type: none;
  flex-direction: column;
  gap: calc(var(--spacing) * 1);
  overflow-y: auto;
  padding: calc(var(--spacing) * 0);
}
.fill-blanks__item {
  width: 100%;
  cursor: pointer;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  text-align: left;
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}
.fill-blanks__item:hover {
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 45%, var(--app-border));
  }
}
.fill-blanks__item--selected {
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-go) 16%, var(--app-surface));
  }
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 55%, var(--app-border));
  }
  font-weight: 600;
}
.fill-blanks__assigned {
  margin-top: calc(var(--spacing) * 3);
  display: flex;
  list-style-type: none;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 0);
}
.fill-blanks__assigned-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  background-color: var(--app-surface);
  border-color: var(--app-border);
}
.fill-blanks__blanked {
  min-width: calc(var(--spacing) * 0);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.18em;
  color: var(--app-button-go);
}
.word-bank__column {
  display: flex;
  min-width: calc(var(--spacing) * 0);
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 4);
  background-color: var(--app-page-bg);
  border-color: var(--app-border);
}
.word-bank__list {
  display: flex;
  max-height: 24rem;
  list-style-type: none;
  flex-direction: column;
  gap: calc(var(--spacing) * 1);
  overflow-y: auto;
  padding: calc(var(--spacing) * 0);
}
.word-bank__item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  text-align: left;
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}
button.word-bank__item {
  cursor: pointer;
}
button.word-bank__item:hover:not(:disabled) {
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 45%, var(--app-border));
  }
}
button.word-bank__item:disabled {
  cursor: not-allowed;
  opacity: 50%;
}
.word-bank__item--selected {
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-go) 12%, var(--app-surface));
  }
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 40%, var(--app-border));
  }
}
.content-outline {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
}
.content-outline__toolbar {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 3);
  @media (width >= 40rem) {
    flex-direction: row;
  }
  @media (width >= 40rem) {
    align-items: flex-start;
  }
  @media (width >= 40rem) {
    justify-content: space-between;
  }
}
.outline-branch {
  display: flex;
  flex-direction: column;
}
.outline-branch:not(.outline-branch--root) {
  margin-left: calc(var(--spacing) * 5);
  border-left-style: var(--tw-border-style);
  border-left-width: 1px;
  padding-left: calc(var(--spacing) * 3);
  border-color: var(--app-border);
}
.outline-node {
  display: flex;
  flex-direction: column;
}
.outline-node__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  border-radius: var(--radius-lg);
  padding-inline: calc(var(--spacing) * 2);
  padding-block: calc(var(--spacing) * 2);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.outline-node__row:hover {
  background-color: var(--app-nav-item-hover);
}
.outline-node__row--module {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.outline-node__row--lesson {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.outline-node__row--activity {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.outline-branch.is-sorting > .outline-node > .outline-branch, .outline-branch.is-sorting > .outline-insert {
  display: none;
}
.outline-branch.is-sorting {
  -webkit-user-select: none;
  user-select: none;
}
.outline-branch.is-sorting > .outline-node {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 150ms;
  transition-duration: 150ms;
  --tw-ease: var(--ease-out);
  transition-timing-function: var(--ease-out);
  will-change: transform;
}
.outline-branch.is-sorting > .outline-node.is-dragging {
  position: relative;
  z-index: 10;
  transition-property: none;
}
.outline-branch.is-sorting > .outline-node.is-dragging > .outline-node__row {
  background-color: var(--app-strong-surface);
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.16);
}
.outline-node__grip {
  display: inline-flex;
  height: calc(var(--spacing) * 6);
  width: calc(var(--spacing) * 6);
  flex-shrink: 0;
  cursor: grab;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  touch-action: none;
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 55%, transparent);
  }
}
.outline-node__row:hover .outline-node__grip, .outline-node__row:focus-within .outline-node__grip {
  color: var(--app-text);
}
.outline-node__grip:focus-visible {
  opacity: 100%;
  --tw-outline-style: none;
  outline-style: none;
  color: var(--app-text);
  box-shadow: 0 0 0 2px var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--app-button-standard) 45%, transparent);
  }
}
.outline-node__grip:disabled {
  cursor: not-allowed;
  opacity: 40%;
}
.outline-branch.is-sorting .outline-node__grip {
  cursor: grabbing;
}
.outline-node__grip--empty {
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .outline-branch.is-sorting > .outline-node {
    transition-property: none;
  }
}
.outline-node__toggle {
  display: inline-flex;
  height: calc(var(--spacing) * 6);
  width: calc(var(--spacing) * 6);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 55%, transparent);
  }
}
.outline-node__toggle:hover {
  color: var(--app-text);
}
.outline-node__toggle--empty {
  pointer-events: none;
}
.outline-node__icon {
  flex-shrink: 0;
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-leading: 1;
  line-height: 1;
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 58%, transparent);
  }
}
.outline-node__number {
  flex-shrink: 0;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 50%, transparent);
  }
}
.outline-node__title {
  max-width: 100%;
  min-width: calc(var(--spacing) * 0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration-line: none;
  color: var(--app-text);
}
.outline-node__title:hover {
  color: var(--app-button-standard);
  text-decoration: underline;
}
.outline-node__rename {
  min-width: calc(var(--spacing) * 0);
  flex: 1;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 1.5);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  background-color: var(--app-page-bg);
  border-color: var(--app-button-standard);
  color: var(--app-text);
}
.outline-node__rename:focus {
  outline: none;
}
.outline-node__badge {
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing) * 2);
  padding-block: calc(var(--spacing) * 0.5);
  font-size: 0.65rem;
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  max-width: 9rem;
  background-color: var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-standard) 12%, transparent);
  }
  color: var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-button-standard) 90%, var(--app-text));
  }
}
.outline-node__requirement {
  flex-shrink: 0;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  color: var(--app-button-warning);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-button-warning) 90%, var(--app-text));
  }
}
.outline-node__spacer {
  flex: 1;
}
.outline-node__count {
  flex-shrink: 0;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 55%, transparent);
  }
}
.outline-node__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  opacity: 0%;
  transition-property: opacity;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.outline-node__row:hover .outline-node__actions, .outline-node__row:focus-within .outline-node__actions {
  opacity: 100%;
}
@media (hover: none) {
  .outline-node__actions {
    opacity: 100%;
  }
}
.outline-node__action {
  display: inline-flex;
  height: calc(var(--spacing) * 7);
  width: calc(var(--spacing) * 7);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 62%, transparent);
  }
}
.outline-node__action:not(:disabled):hover {
  background-color: var(--app-strong-surface);
  color: var(--app-text);
}
.outline-node__action--danger:not(:disabled):hover {
  color: var(--app-button-danger);
}
.outline-node__action:disabled {
  cursor: not-allowed;
  opacity: 40%;
}
.outline-insert {
  padding-left: calc(var(--spacing) * 7);
}
.content-outline__pending {
  margin-top: calc(var(--spacing) * 4);
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-go) 10%, var(--app-surface));
  }
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 30%, var(--app-border));
  }
  color: var(--app-text);
}
.content-workspace {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: calc(var(--spacing) * 5);
  @media (width >= 80rem) {
    grid-template-columns: minmax(0,20rem) minmax(0,1fr);
  }
}
.content-workspace__rail {
  min-width: calc(var(--spacing) * 0);
}
.content-workspace__detail {
  min-width: calc(var(--spacing) * 0);
}
.content-crumbs {
  margin-bottom: calc(var(--spacing) * 4);
}
.content-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: calc(var(--spacing) * 2);
  row-gap: calc(var(--spacing) * 1);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.content-crumbs__item {
  display: flex;
  min-width: calc(var(--spacing) * 0);
  align-items: center;
  gap: calc(var(--spacing) * 2);
}
.content-crumbs__link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration-line: none;
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 66%, transparent);
  }
}
.content-crumbs__link:hover {
  color: var(--app-button-standard);
  text-decoration: underline;
}
.content-crumbs__current {
  min-width: calc(var(--spacing) * 0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--app-text);
}
.content-crumbs__separator {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 40%, transparent);
  }
}
.course-rail {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  background-color: var(--app-surface);
  border-color: var(--app-border);
}
@media (min-width: 80rem) {
  .course-rail {
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
  }
}
.course-rail__header {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 3);
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  padding: calc(var(--spacing) * 4);
  border-color: var(--app-border);
}
.course-rail__course {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  text-decoration-line: none;
  color: var(--app-text);
}
.course-rail__course:hover {
  color: var(--app-button-standard);
}
.course-rail__tools {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}
.course-rail__search {
  min-width: calc(var(--spacing) * 0);
  flex: 1;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  background-color: var(--app-page-bg);
  border-color: var(--app-border);
  color: var(--app-text);
}
.course-rail__search:focus {
  outline: none;
  border-color: var(--app-button-standard);
}
.course-rail__tool {
  display: inline-flex;
  height: calc(var(--spacing) * 9);
  width: calc(var(--spacing) * 9);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  background-color: var(--app-page-bg);
  border-color: var(--app-border);
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 70%, transparent);
  }
}
.course-rail__tool:hover {
  background-color: var(--app-nav-item-hover);
  color: var(--app-text);
}
.course-rail__body {
  min-height: calc(var(--spacing) * 0);
  flex: 1;
  overflow-y: auto;
  padding: calc(var(--spacing) * 2);
}
.course-rail__footer {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  padding: calc(var(--spacing) * 3);
  border-color: var(--app-border);
}
.content-tree {
  display: flex;
  flex-direction: column;
}
.content-tree--nested {
  margin-left: calc(var(--spacing) * 4);
  border-left-style: var(--tw-border-style);
  border-left-width: 1px;
  padding-left: calc(var(--spacing) * 2);
  border-color: var(--app-border);
}
.content-tree__item {
  display: flex;
  flex-direction: column;
}
.content-tree__item--creator {
  padding-block: calc(var(--spacing) * 1);
  padding-left: calc(var(--spacing) * 7);
}
.content-tree__row {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 1);
  border-radius: var(--radius-lg);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.content-tree__row:hover {
  background-color: var(--app-nav-item-hover);
}
.content-tree__row--active {
  background-color: var(--app-nav-item-active-bg);
}
.content-tree__row--active .content-tree__link {
  color: var(--app-nav-item-active-text);
  font-weight: 600;
}
.content-tree__toggle {
  display: inline-flex;
  height: calc(var(--spacing) * 6);
  width: calc(var(--spacing) * 6);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 55%, transparent);
  }
}
.content-tree__toggle:hover {
  color: var(--app-text);
}
.content-tree__toggle--empty {
  pointer-events: none;
}
.content-tree__link {
  display: flex;
  min-width: calc(var(--spacing) * 0);
  flex: 1;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding-block: calc(var(--spacing) * 1.5);
  padding-right: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  text-decoration-line: none;
  color: var(--app-text);
}
.content-tree__link--module {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.content-tree__icon {
  flex-shrink: 0;
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-leading: 1;
  line-height: 1;
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 60%, transparent);
  }
}
.content-tree__row--active .content-tree__icon {
  color: var(--app-nav-item-active-text);
}
.content-tree__number {
  flex-shrink: 0;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 50%, transparent);
  }
}
.content-tree__title {
  min-width: calc(var(--spacing) * 0);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content-tree__badge {
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: calc(infinity * 1px);
  padding-inline: calc(var(--spacing) * 2);
  padding-block: calc(var(--spacing) * 0.5);
  font-size: 0.65rem;
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  max-width: 8rem;
  background-color: var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-standard) 12%, transparent);
  }
  color: var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-button-standard) 90%, var(--app-text));
  }
}
.inline-creator {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 1);
}
.inline-creator__trigger {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * 1.5);
  border-radius: var(--radius-lg);
  padding-inline: calc(var(--spacing) * 2);
  padding-block: calc(var(--spacing) * 1.5);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 72%, transparent);
  }
}
.inline-creator__trigger:not(:disabled):hover {
  background-color: var(--app-nav-item-hover);
  color: var(--app-button-go);
}
.inline-creator__trigger:disabled {
  cursor: not-allowed;
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 32%, transparent);
  }
}
.inline-creator__form {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
}
.inline-creator__input {
  min-width: calc(var(--spacing) * 0);
  flex: 1;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  background-color: var(--app-page-bg);
  border-color: var(--app-button-go);
  color: var(--app-text);
}
.inline-creator__input:focus {
  outline: none;
}
.inline-creator__hint {
  padding-inline: calc(var(--spacing) * 1);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 55%, transparent);
  }
}
.deck-column {
  display: flex;
  min-width: calc(var(--spacing) * 0);
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 4);
  background-color: var(--app-page-bg);
  border-color: var(--app-border);
}
.deck-list {
  display: flex;
  max-height: 22rem;
  list-style-type: none;
  flex-direction: column;
  gap: calc(var(--spacing) * 1);
  overflow-y: auto;
  padding: calc(var(--spacing) * 0);
}
.deck-item {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  text-align: left;
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}
.deck-item:hover {
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 45%, var(--app-border));
  }
}
.deck-item--selected {
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-go) 16%, var(--app-surface));
  }
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 55%, var(--app-border));
  }
}
.deck-preview {
  display: flex;
  justify-content: center;
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 5);
  background-color: var(--app-surface);
  border-color: var(--app-border);
}
.module-words__adder {
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 5);
  background-color: var(--app-page-bg);
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 30%, var(--app-border));
  }
}
.module-words__suggestions {
  margin-top: calc(var(--spacing) * 4);
  display: flex;
  max-height: 16rem;
  list-style-type: none;
  flex-direction: column;
  gap: calc(var(--spacing) * 1);
  overflow-y: auto;
  padding: calc(var(--spacing) * 0);
}
.module-words__suggestion {
  width: 100%;
  cursor: pointer;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  text-align: left;
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}
.module-words__suggestion:hover {
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 45%, var(--app-border));
  }
}
.module-words__suggestion--selected {
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-go) 16%, var(--app-surface));
  }
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 55%, var(--app-border));
  }
  font-weight: 600;
}
.word-column {
  display: flex;
  min-width: calc(var(--spacing) * 0);
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 4);
  background-color: var(--app-page-bg);
  border-color: var(--app-border);
}
.word-column__list {
  display: flex;
  max-height: 24rem;
  list-style-type: none;
  flex-direction: column;
  gap: calc(var(--spacing) * 1);
  overflow-y: auto;
  padding: calc(var(--spacing) * 0);
}
.word-column__item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  background-color: var(--app-surface);
  border-color: var(--app-border);
}
.word-column__count {
  flex-shrink: 0;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 2.5);
  padding-block: calc(var(--spacing) * 0.5);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  background-color: var(--app-surface);
  border-color: var(--app-border);
}
.word-column__total {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 72%, transparent);
  }
}
.view-mode-button {
  display: inline-flex;
  height: calc(var(--spacing) * 14);
  width: calc(var(--spacing) * 14);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 0.9rem;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.view-mode-button--active {
  background-color: var(--app-surface);
  color: var(--app-button-go);
}
.view-mode-button--inactive {
  background-color: transparent;
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix( in srgb, var(--app-text) 45%, transparent );
  }
}
.dashboard-checkbox {
  display: flex;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 4);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  background-color: var(--app-page-bg);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-page-bg) 74%, var(--app-surface) );
  }
  border-color: var(--app-border);
  color: var(--app-text);
}
.dashboard-checkbox--enabled {
  cursor: pointer;
}
.dashboard-checkbox--disabled {
  cursor: not-allowed;
  opacity: 60%;
}
.dashboard-checkbox__input {
  margin-top: calc(var(--spacing) * 1);
  height: calc(var(--spacing) * 5);
  width: calc(var(--spacing) * 5);
  flex-shrink: 0;
  border-radius: 0.25rem;
  border-style: var(--tw-border-style);
  border-width: 1px;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-outline-style: none;
  outline-style: none;
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:disabled {
    cursor: not-allowed;
  }
  &:disabled {
    opacity: 50%;
  }
  accent-color: var(--app-button-go);
  border-color: var(--app-border);
  --tw-ring-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-ring-color: color-mix(
            in srgb,
            var(--app-button-go) 28%,
            transparent
    );
  }
}
.dashboard-file-input {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2.5);
  background-color: var(--app-page-bg);
  border-color: var(--app-border);
  color: var(--app-text);
}
.dashboard-file-input:hover {
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 45%, var(--app-border));
  }
}
.dashboard-file-input__button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  border-radius: var(--radius-lg);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  background-color: var(--app-button-go);
  color: var(--app-text-invert);
}
.dashboard-file-input__name {
  min-width: calc(var(--spacing) * 0);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 70%, transparent);
  }
}
.dashboard-number-input {
  height: calc(var(--spacing) * 13);
  width: 100%;
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 5);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-outline-style: none;
  outline-style: none;
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  background-color: var(--app-page-bg);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-page-bg) 74%, var(--app-surface) );
  }
  color: var(--app-text);
  border-color: var(--app-border);
  --tw-ring-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-ring-color: color-mix(
            in srgb,
            var(--app-button-go) 28%,
            transparent
    );
  }
}
.dashboard-search-bar {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: calc(var(--spacing) * 3);
  @media (width >= 40rem) {
    flex-direction: row;
  }
  @media (width >= 40rem) {
    align-items: center;
  }
}
.dashboard-search-bar__field {
  position: relative;
  display: flex;
  min-width: calc(var(--spacing) * 0);
  flex: 1;
  align-items: center;
}
.dashboard-search-bar__icon {
  pointer-events: none;
  position: absolute;
  left: calc(var(--spacing) * 4);
  font-size: 1.25rem;
  --tw-leading: 1;
  line-height: 1;
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 52%, transparent);
  }
}
.dashboard-search-bar__input {
  height: calc(var(--spacing) * 13);
  width: 100%;
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-right: calc(var(--spacing) * 11);
  padding-left: calc(var(--spacing) * 12);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-outline-style: none;
  outline-style: none;
  background-color: var(--app-page-bg);
  border-color: var(--app-border);
  color: var(--app-text);
}
.dashboard-search-bar__input::placeholder {
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 48%, transparent);
  }
}
.dashboard-search-bar__input:focus {
  border-color: var(--app-button-go);
  box-shadow: 0 0 0 3px var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-button-go) 22%, transparent);
  }
}
.dashboard-search-bar__input:disabled {
  cursor: not-allowed;
  opacity: 60%;
}
.dashboard-search-bar__input::-webkit-search-cancel-button {
  display: none;
}
.dashboard-search-bar__input:placeholder-shown ~ .dashboard-search-bar__clear {
  display: none;
}
.dashboard-search-bar__clear {
  position: absolute;
  right: calc(var(--spacing) * 3);
  display: inline-flex;
  height: calc(var(--spacing) * 8);
  width: calc(var(--spacing) * 8);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  font-size: 1.1rem;
  --tw-leading: 1;
  line-height: 1;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 62%, transparent);
  }
}
.dashboard-search-bar__clear:hover {
  background-color: var(--app-nav-item-hover);
  color: var(--app-text);
}
.dashboard-select {
  height: calc(var(--spacing) * 13);
  width: 100%;
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 5);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-outline-style: none;
  outline-style: none;
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  background-color: var(--app-page-bg);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-page-bg) 74%, var(--app-surface) );
  }
  color: var(--app-text);
  border-color: var(--app-border);
  --tw-ring-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-ring-color: color-mix(
            in srgb,
            var(--app-button-go) 28%,
            transparent
    );
  }
}
.tag-toggle {
  display: inline-flex;
  cursor: pointer;
  align-items: center;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 1.5);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  background-color: var(--tag-color);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--tag-color) 10%, var(--app-surface));
  }
  border-color: var(--tag-color);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--tag-color) 24%, var(--app-border));
  }
  color: var(--app-text);
}
.tag-toggle:hover:not(:disabled) {
  border-color: var(--tag-color);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--tag-color) 55%, var(--app-border));
  }
}
.tag-toggle:disabled {
  cursor: not-allowed;
  opacity: 50%;
}
.tag-toggle--on {
  background-color: var(--tag-color);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--tag-color) 26%, var(--app-surface));
  }
  border-color: var(--tag-color);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--tag-color) 65%, var(--app-border));
  }
  font-weight: 600;
}
.dashboard-text-area {
  min-height: calc(var(--spacing) * 32);
  width: 100%;
  resize: vertical;
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 5);
  padding-block: calc(var(--spacing) * 4);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-outline-style: none;
  outline-style: none;
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  &:disabled {
    cursor: not-allowed;
  }
  &:disabled {
    opacity: 50%;
  }
  background-color: var(--app-page-bg);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-page-bg) 74%, var(--app-surface) );
  }
  color: var(--app-text);
  border-color: var(--app-border);
  --tw-ring-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-ring-color: color-mix(
            in srgb,
            var(--app-button-go) 28%,
            transparent
    );
  }
}
.dashboard-text-input {
  height: calc(var(--spacing) * 13);
  width: 100%;
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 5);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-outline-style: none;
  outline-style: none;
  &:focus {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  background-color: var(--app-page-bg);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-page-bg) 74%, var(--app-surface) );
  }
  color: var(--app-text);
  border-color: var(--app-border);
  --tw-ring-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    --tw-ring-color: color-mix(
            in srgb,
            var(--app-button-go) 28%,
            transparent
    );
  }
}
.mobile-drawer {
  position: fixed;
  inset-block: calc(var(--spacing) * 0);
  left: calc(var(--spacing) * 0);
  z-index: 50;
  width: 85vw;
  max-width: 22rem;
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 300ms;
  transition-duration: 300ms;
  --tw-ease: var(--ease-out);
  transition-timing-function: var(--ease-out);
}
.mobile-drawer--open {
  --tw-translate-x: calc(var(--spacing) * 0);
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.mobile-drawer--closed {
  --tw-translate-x: -100%;
  translate: var(--tw-translate-x) var(--tw-translate-y);
}
.sortable-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
}
.sortable-list__toolbar {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
  @media (width >= 64rem) {
    flex-direction: row;
  }
  @media (width >= 64rem) {
    align-items: center;
  }
  @media (width >= 64rem) {
    justify-content: space-between;
  }
}
.sortable-list__subtitle {
  margin-top: calc(var(--spacing) * 1);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 68%, transparent);
  }
}
.sortable-list__pending {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-go) 10%, var(--app-surface));
  }
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 30%, var(--app-border));
  }
  color: var(--app-text);
}
.sortable-list__items {
  display: flex;
  list-style-type: none;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 0);
}
.sortable-list__item {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  background-color: var(--app-surface);
  border-color: var(--app-border);
}
.sortable-list__item--interactive {
  cursor: pointer;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.sortable-list__item--interactive:hover {
  background-color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-text) 5%, var(--app-surface));
  }
  border-color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-text) 22%, var(--app-border));
  }
}
.sortable-list__item--interactive:focus-visible {
  --tw-outline-style: none;
  outline-style: none;
  border-color: var(--app-button-go);
  box-shadow: 0 0 0 3px var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-button-go) 35%, transparent);
  }
}
.sortable-list__items.is-sorting .sortable-list__item {
  transition-property: transform, translate, scale, rotate;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 150ms;
  transition-duration: 150ms;
  --tw-ease: var(--ease-out);
  transition-timing-function: var(--ease-out);
  will-change: transform;
}
.sortable-list__items.is-sorting .sortable-list__item.is-dragging {
  position: relative;
  z-index: 10;
  transition-property: none;
  border-color: var(--app-button-go);
  box-shadow: 0 12px 28px rgb(0 0 0 / 0.18);
}
.sortable-list__items.is-sorting {
  -webkit-user-select: none;
  user-select: none;
}
.sortable-list__grip {
  margin-left: calc(var(--spacing) * -1);
  display: inline-flex;
  height: calc(var(--spacing) * 9);
  width: calc(var(--spacing) * 6);
  flex-shrink: 0;
  cursor: grab;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  touch-action: none;
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 55%, transparent);
  }
}
.sortable-list__grip:hover:not(:disabled) {
  background-color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-text) 8%, transparent);
  }
  color: var(--app-text);
}
.sortable-list__grip:focus-visible {
  --tw-outline-style: none;
  outline-style: none;
  background-color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-text) 8%, transparent);
  }
  color: var(--app-text);
  box-shadow: 0 0 0 3px var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-button-go) 35%, transparent);
  }
}
.sortable-list__grip:disabled {
  cursor: not-allowed;
  opacity: 40%;
}
.sortable-list__items.is-sorting .sortable-list__grip {
  cursor: grabbing;
}
.sortable-list__number {
  display: inline-flex;
  height: calc(var(--spacing) * 9);
  width: calc(var(--spacing) * 9);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-go) 14%, var(--app-surface));
  }
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 28%, var(--app-border));
  }
  color: var(--app-button-go);
}
.sortable-list__actions {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: calc(var(--spacing) * 2);
}
@media (prefers-reduced-motion: reduce) {
  .sortable-list__items.is-sorting .sortable-list__item {
    transition-property: none;
  }
}
.access-code-display {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 5);
  padding-block: calc(var(--spacing) * 3);
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  --tw-tracking: 0.12em;
  letter-spacing: 0.12em;
  background-color: var(--app-page-bg);
  border-color: var(--app-border);
  color: var(--app-button-go);
}
.animation-preview {
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  background-color: var(--app-page-bg);
  border-color: var(--app-border);
}
.animation-preview iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
.mc-option {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
}
.mc-option__mark {
  display: inline-flex;
  height: calc(var(--spacing) * 11);
  width: calc(var(--spacing) * 11);
  flex-shrink: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  background-color: var(--app-page-bg);
  border-color: var(--app-border);
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 55%, transparent);
  }
}
.mc-option__mark:hover {
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 45%, var(--app-border));
  }
}
.mc-option__mark--on {
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-go) 16%, var(--app-surface));
  }
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 55%, var(--app-border));
  }
  color: var(--app-button-go);
}
.mc-option__letter {
  width: calc(var(--spacing) * 4);
  flex-shrink: 0;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 55%, transparent);
  }
}
.rich-text-preview {
  max-height: 26rem;
  overflow-y: auto;
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 5);
  background-color: var(--app-page-bg);
  border-color: var(--app-border);
  color: var(--app-text);
}
.cohort-option {
  display: flex;
  gap: calc(var(--spacing) * 4);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 4);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.cohort-option--selected {
  cursor: pointer;
  border-color: var(--app-button-go);
  &:hover {
    @media (hover: hover) {
      --tw-brightness: brightness(95%);
      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
    }
  }
}
.cohort-option--unselected {
  cursor: pointer;
  border-color: var(--app-border);
  &:hover {
    @media (hover: hover) {
      --tw-brightness: brightness(95%);
      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
    }
  }
}
.cohort-option--disabled {
  cursor: not-allowed;
  border-color: var(--app-border);
  opacity: 50%;
}
.cohort-option-icon {
  display: inline-flex;
  height: calc(var(--spacing) * 10);
  width: calc(var(--spacing) * 10);
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
}
.cohort-option-icon--selected {
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-button-go) 14%, var(--app-surface) );
  }
  color: var(--app-button-go);
}
.cohort-option-icon--unselected {
  background-color: var(--app-page-bg);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-page-bg) 70%, var(--app-surface) );
  }
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix( in srgb, var(--app-text) 62%, transparent );
  }
}
.cohort-button {
  width: 100%;
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 4);
  text-align: left;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:hover {
    @media (hover: hover) {
      --tw-brightness: brightness(95%);
      filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
    }
  }
  color: var(--app-text);
}
.cohort-button--selected {
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-button-go) 8%, var(--app-surface) );
  }
  border-color: var(--app-button-go);
}
.cohort-button--unselected {
  background-color: var(--app-surface);
  border-color: var(--app-border);
}
.cohort-icon {
  display: inline-flex;
  height: calc(var(--spacing) * 12);
  width: calc(var(--spacing) * 12);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  color: var(--app-button-go);
}
.cohort-icon--selected {
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-button-go) 18%, var(--app-surface) );
  }
}
.cohort-icon--unselected {
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-button-go) 10%, var(--app-surface) );
  }
}
.cohort-icon__glyph {
  font-size: 1.35rem;
  --tw-leading: 1;
  line-height: 1;
}
.tutorial-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.75rem;
  background-color: #000;
}
.tutorial-video ::deep iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.dashboard-nav {
  display: flex;
  width: 100%;
}
.dashboard-nav--mobile {
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--spacing) * 3);
}
.dashboard-nav--desktop {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: calc(var(--spacing) * 4);
}
.dashboard-nav__group {
  display: flex;
  min-width: calc(var(--spacing) * 0);
  align-items: flex-end;
  gap: calc(var(--spacing) * 4);
}
.dashboard-nav--mobile .dashboard-nav__group {
  flex-direction: column;
  align-items: stretch;
  gap: calc(var(--spacing) * 3);
}
.dashboard-nav__seam {
  margin-inline: calc(var(--spacing) * 1);
  align-self: stretch;
  width: 1px;
  background-color: var(--app-border);
}
.dashboard-nav--mobile .dashboard-nav__seam {
  margin-inline: calc(var(--spacing) * 0);
  margin-block: calc(var(--spacing) * 1);
  height: 1px;
  width: 100%;
  align-self: auto;
}
.notification-preview {
  overflow: hidden;
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  background-color: var(--app-page-bg);
  border-color: var(--app-border);
  color: var(--app-text);
}
.notification-preview__header {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 5);
  border-color: var(--app-border);
  background-color: var(--app-surface);
}
.notification-preview__icon {
  display: inline-flex;
  height: calc(var(--spacing) * 11);
  width: calc(var(--spacing) * 11);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-go) 14%, var(--app-surface));
  }
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 28%, var(--app-border));
  }
  color: var(--app-button-go);
}
.notification-preview__body {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 6);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
}
.notification-preview__emphasis {
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  color: var(--app-button-go);
}
.notification-preview__rich-text {
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 4);
  background-color: var(--app-surface);
  border-color: var(--app-border);
}
.notification-preview__pin {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
}
.notification-preview__pin-box {
  display: inline-flex;
  height: calc(var(--spacing) * 12);
  width: calc(var(--spacing) * 10);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  background-color: var(--app-surface);
  border-color: var(--app-border);
}
.notification-preview__footer {
  display: flex;
  justify-content: center;
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 5);
  border-color: var(--app-border);
  background-color: var(--app-surface);
}
.invitation-state-badge {
  display: inline-flex;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 1);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.invitation-state-badge--issued {
  background-color: var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-button-standard) 12%, var(--app-surface) );
  }
  color: var(--app-button-standard);
  border-color: var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix( in srgb, var(--app-button-standard) 28%, var(--app-border) );
  }
}
.invitation-state-badge--read {
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-button-go) 10%, var(--app-surface) );
  }
  color: var(--app-button-go);
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix( in srgb, var(--app-button-go) 24%, var(--app-border) );
  }
}
.invitation-state-badge--accepted {
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-button-go) 14%, var(--app-surface) );
  }
  color: var(--app-button-go);
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix( in srgb, var(--app-button-go) 30%, var(--app-border) );
  }
}
.invitation-state-badge--declined {
  background-color: var(--app-button-danger);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-button-danger) 12%, var(--app-surface) );
  }
  color: var(--app-button-danger);
  border-color: var(--app-button-danger);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix( in srgb, var(--app-button-danger) 28%, var(--app-border) );
  }
}
.invitation-state-badge--expired {
  background-color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-text) 8%, var(--app-surface) );
  }
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix( in srgb, var(--app-text) 58%, transparent );
  }
  border-color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix( in srgb, var(--app-text) 18%, var(--app-border) );
  }
}
.invitation-state-badge--default {
  background-color: var(--app-page-bg);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-page-bg) 70%, var(--app-surface) );
  }
  color: var(--app-text);
  border-color: var(--app-border);
}
.enrollment-code {
  margin-top: calc(var(--spacing) * 1);
  display: inline-flex;
  border-radius: var(--radius-xl);
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  --tw-leading: 1;
  line-height: 1;
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  --tw-tracking: 0.04em;
  letter-spacing: 0.04em;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  @media (width >= 48rem) {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  background-color: transparent;
  color: var(--app-text);
  box-shadow: 0 0 0 0 transparent;
}
.enrollment-code--copied {
  background-color: var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-button-standard) 12%, var(--app-surface) );
  }
  box-shadow: 0 0 0 2px var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 2px color-mix( in srgb, var(--app-button-standard) 18%, transparent );
  }
}
.filter-panel-scroll-viewport {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.filter-panel-scroll {
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  padding: 0.125rem;
}
.filter-panel-scroll > * {
  flex: 0 0 auto;
}
.filter-panel-scroll::-webkit-scrollbar {
  display: none;
}
.filter-panel-scroll.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}
.pass-code {
  margin-top: calc(var(--spacing) * 5);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  text-align: center;
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  --tw-tracking: 0.06em;
  letter-spacing: 0.06em;
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 200ms;
  transition-duration: 200ms;
  background-color: var(--app-surface);
  color: var(--app-text);
  border-color: var(--app-border);
}
.pass-code--copied {
  background-color: var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-button-standard) 12%, var(--app-surface) );
  }
  border-color: var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix( in srgb, var(--app-button-standard) 32%, var(--app-border) );
  }
  box-shadow: 0 0 0 2px var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 2px color-mix( in srgb, var(--app-button-standard) 18%, transparent );
  }
}
.construction-notice-wrapper {
  pointer-events: none;
  position: absolute;
  top: calc(var(--spacing) * 6);
  right: calc(var(--spacing) * 4);
  z-index: 20;
  display: none;
  justify-content: flex-end;
  @media (width >= 48rem) {
    display: flex;
  }
}
.construction-notice {
  pointer-events: auto;
  display: inline-flex;
  max-width: 28rem;
  align-items: flex-start;
  gap: calc(var(--spacing) * 3);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  box-shadow: var(--app-shadow-sm);
  --tw-backdrop-blur: blur(var(--blur-sm));
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
}
.construction-notice__icon {
  margin-top: calc(var(--spacing) * 0.5);
  font-size: 1.15rem;
  --tw-leading: 1;
  line-height: 1;
}
.dashboard-toast-container {
  pointer-events: none;
  position: fixed;
  right: calc(var(--spacing) * 4);
  bottom: calc(var(--spacing) * 4);
  z-index: 9999;
  display: flex;
  width: min(24rem, calc(100vw - 2rem));
  flex-direction: column-reverse;
  gap: calc(var(--spacing) * 3);
}
.dashboard-toast-icon {
  font-size: 1.2rem;
  --tw-leading: 1;
  line-height: 1;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 1.25rem;
  border-style: var(--tw-border-style);
  border-width: 1px;
  --tw-border-style: dashed;
  border-style: dashed;
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 10);
  text-align: center;
  color: var(--app-text);
}
.empty-state--neutral {
  background-color: var(--app-page-bg);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-page-bg) 62%, var(--app-surface) );
  }
  border-color: var(--app-border);
}
.empty-state--warning {
  background-color: var(--app-button-warning);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-button-warning) 7%, var(--app-surface) );
  }
  border-color: var(--app-button-warning);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix( in srgb, var(--app-button-warning) 25%, var(--app-border) );
  }
}
.empty-state-icon {
  font-size: 2rem;
  --tw-leading: 1;
  line-height: 1;
}
.empty-state-icon--neutral {
  background-color: var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-button-standard) 14%, var(--app-surface) );
  }
  color: var(--app-button-standard);
}
.empty-state-icon--warning {
  background-color: var(--app-button-warning);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-button-warning) 14%, var(--app-surface) );
  }
  color: var(--app-button-warning);
}
.ui-loading-shell {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-width: 20rem;
  max-width: 32rem;
  padding: 1rem 1.15rem;
  border-radius: 1.25rem;
  border: 1px solid var(--app-border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--app-border) 80%, transparent);
  }
  background-color: var(--app-surface);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-surface) 88%, transparent);
  }
  backdrop-filter: blur(10px);
  box-shadow: var(--app-shadow-lg);
}
.ui-loading-icon {
  display: inline-flex;
  height: 2.75rem;
  width: 2.75rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: var(--app-page-bg);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-page-bg) 70%, transparent);
  }
  border: 1px solid var(--app-border);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--app-border) 70%, transparent);
  }
}
.ui-loading-title {
  color: var(--app-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.ui-loading-subtitle {
  margin-top: 0.2rem;
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 62%, transparent);
  }
  font-size: 0.92rem;
  line-height: 1.25rem;
}
.ui-loading-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: 0.25rem;
}
.ui-loading-dots span {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 9999px;
  background-color: var(--app-button-go);
  opacity: 0.28;
  animation: ui-loading-dot 1.1s infinite ease-in-out;
}
.ui-loading-dots span:nth-child(2) {
  animation-delay: 0.14s;
}
.ui-loading-dots span:nth-child(3) {
  animation-delay: 0.28s;
}
.ui-loading-constellation, .ui-loading-birds {
  width: 1.5rem;
  height: 1.5rem;
}
.ui-loading-constellation line, .ui-loading-constellation circle {
  stroke: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    stroke: color-mix(in srgb, var(--app-button-go) 75%, white 25%);
  }
  fill: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    fill: color-mix(in srgb, var(--app-button-go) 75%, white 25%);
  }
  stroke-width: 1.4;
  opacity: 0.8;
  animation: ui-loading-flicker 3.6s ease-in-out infinite;
}
.ui-loading-birds path {
  fill: none;
  stroke: var(--app-button-go);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
  animation: ui-loading-drift 2.8s ease-in-out infinite;
}
.ui-loading-birds path:nth-child(2) {
  animation-delay: 0.15s;
}
.ui-loading-birds path:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes ui-loading-dot {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.28;
  }
  40% {
    transform: translateY(-0.18rem);
    opacity: 1;
  }
}
@keyframes ui-loading-flicker {
  0%, 100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
@keyframes ui-loading-drift {
  0%, 100% {
    transform: translateX(0) translateY(0);
    opacity: 0.7;
  }
  50% {
    transform: translateX(0.12rem) translateY(-0.08rem);
    opacity: 1;
  }
}
.organization-switcher {
  position: relative;
}
.organization-switcher--mobile {
  width: 100%;
  min-width: calc(var(--spacing) * 0);
}
.organization-switcher--desktop {
  min-width: 21rem;
}
.organization-switcher-select {
  height: calc(var(--spacing) * 16);
  width: 100%;
  appearance: none;
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-top: calc(var(--spacing) * 6);
  padding-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-outline-style: none;
  outline-style: none;
}
.organization-switcher-select--mobile {
  min-width: calc(var(--spacing) * 0);
  padding-left: calc(var(--spacing) * 4);
}
.organization-switcher-select--desktop {
  min-width: 21rem;
  padding-left: calc(var(--spacing) * 5);
}
.organization-switcher-select--switchable {
  cursor: pointer;
  padding-right: calc(var(--spacing) * 16);
  &:disabled {
    cursor: not-allowed;
  }
  &:disabled {
    opacity: 60%;
  }
}
.organization-switcher-select--mobile.organization-switcher-select--locked {
  cursor: default;
  padding-right: calc(var(--spacing) * 4);
  &:disabled {
    opacity: 100%;
  }
}
.organization-switcher-select--desktop.organization-switcher-select--locked {
  cursor: default;
  padding-right: calc(var(--spacing) * 5);
  &:disabled {
    opacity: 100%;
  }
}
.dashboard-pagination {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: calc(var(--spacing) * 3);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 3);
  @media (width >= 40rem) {
    flex-direction: row;
  }
  @media (width >= 40rem) {
    align-items: center;
  }
  @media (width >= 40rem) {
    justify-content: space-between;
  }
  background-color: var(--app-surface);
  border-color: var(--app-border);
}
.dashboard-pagination__summary {
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  @media (width >= 40rem) {
    text-align: left;
  }
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix( in srgb, var(--app-text) 68%, transparent );
  }
}
.dashboard-pagination__summary-value {
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--app-text);
}
.dashboard-pagination__controls {
  display: flex;
  min-width: calc(var(--spacing) * 0);
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 2);
}
.dashboard-pagination__button {
  display: inline-flex;
  height: calc(var(--spacing) * 10);
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 2);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  --tw-duration: 150ms;
  transition-duration: 150ms;
  &:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  &:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }
  &:focus-visible {
    outline-offset: 2px;
  }
  &:disabled {
    cursor: not-allowed;
  }
  &:disabled {
    opacity: 50%;
  }
  background-color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-text) 2%, var(--app-surface) );
  }
  border-color: var(--app-border);
  color: var(--app-text);
}
.dashboard-pagination__button--navigation {
  min-width: calc(var(--spacing) * 10);
  padding-inline: calc(var(--spacing) * 3);
  @media (width >= 40rem) {
    min-width: calc(var(--spacing) * 28);
  }
}
.dashboard-pagination__button--page {
  width: calc(var(--spacing) * 10);
  height: calc(var(--spacing) * 10);
  flex-shrink: 0;
  padding: calc(var(--spacing) * 0);
}
.dashboard-pagination__button:hover:not(:disabled):not(.dashboard-pagination__button--active) {
  --tw-translate-y: -1px;
  translate: var(--tw-translate-x) var(--tw-translate-y);
  background-color: var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-button-standard) 8%, var(--app-surface) );
  }
  border-color: var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix( in srgb, var(--app-button-standard) 35%, var(--app-border) );
  }
  color: var(--app-button-standard);
}
.dashboard-pagination__button--active {
  background-color: var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-button-standard) 16%, var(--app-surface) );
  }
  border-color: var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix( in srgb, var(--app-button-standard) 55%, var(--app-border) );
  }
  color: var(--app-button-standard);
  box-shadow: 0 0 0 1px var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    box-shadow: 0 0 0 1px color-mix( in srgb, var(--app-button-standard) 18%, transparent );
  }
}
.dashboard-pagination__button:focus-visible {
  outline-color: var(--app-button-standard);
  @supports (color: color-mix(in lab, red, red)) {
    outline-color: color-mix( in srgb, var(--app-button-standard) 70%, transparent );
  }
}
.dashboard-pagination__button:disabled {
  transform: none;
}
.dashboard-pagination__mobile-page {
  min-width: calc(var(--spacing) * 16);
  text-align: center;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix( in srgb, var(--app-text) 70%, transparent );
  }
}
.dashboard-theme-button {
  display: inline-flex;
  height: 100%;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  gap: calc(var(--spacing) * 3);
  border-right-style: var(--tw-border-style);
  border-right-width: 1px;
  padding-inline: calc(var(--spacing) * 6);
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  &:last-child {
    border-right-style: var(--tw-border-style);
    border-right-width: 0px;
  }
  background-color: var(--app-surface);
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix( in srgb, var(--app-text) 78%, transparent );
  }
  border-right-color: var(--app-border);
}
.dashboard-theme-button[aria-pressed="true"] {
  background-color: var(--app-page-bg);
  color: var(--app-text);
}
.dashboard-theme-icon {
  width: 1.55rem;
  height: 1.55rem;
  flex-shrink: 0;
  overflow: visible;
}
.dashboard-theme-sun-rays, .dashboard-theme-sun-core, .dashboard-theme-moon-shape {
  transform-origin: 12px 12px;
}
.dashboard-theme-icon-active .dashboard-theme-sun-rays {
  animation: dashboard-theme-sun-rays-sway 3.8s ease-in-out infinite;
}
.dashboard-theme-icon-active .dashboard-theme-sun-core {
  animation: dashboard-theme-sun-core-breathe 3.8s ease-in-out infinite;
}
.dashboard-theme-icon-active .dashboard-theme-moon-shape {
  animation: dashboard-theme-moon-pulse 2.8s ease-in-out infinite;
}
@keyframes dashboard-theme-sun-rays-sway {
  0%, 100% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
}
@keyframes dashboard-theme-sun-core-breathe {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.92;
  }
}
@keyframes dashboard-theme-moon-pulse {
  0%, 100% {
    opacity: 0.72;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-theme-icon-active .dashboard-theme-sun-rays, .dashboard-theme-icon-active .dashboard-theme-sun-core, .dashboard-theme-icon-active .dashboard-theme-moon-shape {
    animation: none;
  }
}
.notice-strip {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
}
.notice-strip__icon {
  font-size: 1.15rem;
  --tw-leading: 1;
  line-height: 1;
}
.content-block-badge {
  display: inline-flex;
  height: calc(var(--spacing) * 10);
  width: calc(var(--spacing) * 10);
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}
.content-block-badge--module {
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-button-go) 14%, var(--app-surface) );
  }
  color: var(--app-button-go);
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix( in srgb, var(--app-button-go) 28%, var(--app-border) );
  }
}
.content-block-badge--evaluation {
  background-color: var(--app-button-danger);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-button-danger) 12%, var(--app-surface) );
  }
  color: var(--app-button-danger);
  border-color: var(--app-button-danger);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix( in srgb, var(--app-button-danger) 28%, var(--app-border) );
  }
}
.content-block-badge--default {
  background-color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix( in srgb, var(--app-text) 8%, var(--app-surface) );
  }
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix( in srgb, var(--app-text) 68%, transparent );
  }
  border-color: var(--app-border);
}
.vocabulary-column {
  display: flex;
  min-width: calc(var(--spacing) * 0);
  flex-direction: column;
  gap: calc(var(--spacing) * 3);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 4);
  background-color: var(--app-page-bg);
  border-color: var(--app-border);
}
.vocabulary-column__heading {
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  --tw-tracking: 0.1em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 58%, transparent);
  }
}
.vocabulary-list {
  display: flex;
  max-height: 26rem;
  list-style-type: none;
  flex-direction: column;
  gap: calc(var(--spacing) * 1);
  overflow-y: auto;
  padding: calc(var(--spacing) * 0);
}
.vocabulary-item {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  gap: calc(var(--spacing) * 3);
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 3);
  padding-block: calc(var(--spacing) * 2);
  text-align: left;
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  text-decoration-line: none;
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
  transition-duration: var(--tw-duration, var(--default-transition-duration));
  background-color: var(--app-surface);
  border-color: var(--app-border);
  color: var(--app-text);
}
.vocabulary-item:hover {
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 45%, var(--app-border));
  }
}
.vocabulary-item--selected {
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-go) 16%, var(--app-surface));
  }
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 55%, var(--app-border));
  }
  font-weight: 600;
}
.vocabulary-item__number {
  display: inline-flex;
  height: calc(var(--spacing) * 7);
  width: calc(var(--spacing) * 7);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-go) 14%, var(--app-surface));
  }
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 28%, var(--app-border));
  }
  color: var(--app-button-go);
}
.activity-type-icon {
  display: inline-flex;
  height: calc(var(--spacing) * 9);
  width: calc(var(--spacing) * 9);
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  font-size: 1.15rem;
  --tw-leading: 1;
  line-height: 1;
  background-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in srgb, var(--app-button-go) 12%, var(--app-surface));
  }
  border-color: var(--app-button-go);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in srgb, var(--app-button-go) 26%, var(--app-border));
  }
  color: var(--app-button-go);
}
.word-list {
  display: flex;
  list-style-type: none;
  flex-direction: column;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 0);
}
.word-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 3);
  background-color: var(--app-page-bg);
  border-color: var(--app-border);
}
.dev-output {
  max-height: 34rem;
  overflow: auto;
  border-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
  background-color: var(--app-strong-surface);
  border-color: var(--app-border);
  color: var(--app-text);
  white-space: pre;
  tab-size: 2;
}
.dev-output__label {
  margin-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  --tw-tracking: 0.12em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--app-text);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in srgb, var(--app-text) 62%, transparent);
  }
}
@layer base {
  :where(.learner-app) {
    ul, ol, menu {
      list-style: revert;
      padding: revert;
    }
    img, svg, video, canvas, audio, iframe, embed, object {
      display: revert;
    }
    img, video {
      max-width: revert;
      height: revert;
    }
    button, input, select, optgroup, textarea, ::file-selector-button {
      padding: revert;
      border: revert;
      border-radius: revert;
      background-color: revert;
      color: revert;
      font-weight: revert;
      font-style: revert;
      font-variant: revert;
      font-stretch: revert;
      font-feature-settings: revert;
      font-variation-settings: revert;
      letter-spacing: revert;
    }
    ::placeholder {
      color: revert;
    }
    td, th {
      padding: revert;
    }
    table {
      text-indent: revert;
      border-color: revert;
    }
    hr {
      height: revert;
    }
  }
}
:root {
  --core-color: #505b33;
  --core-color-light: #48522e;
  --core-color-medium: #434c2b;
  --core-color-dark: #3a4225;
  --primary-color: #535d65;
  --primary-color-light: #6a7681;
  --primary-color-medium: #434a51;
  --primary-color-dark: #3e454b;
  --secondary-color-lighter: #baa04f;
  --secondary-color: #b59a46;
  --secondary-color-medium: #dec583;
  --secondary-color-dark: #a38a3f;
  --black-color: #282725;
  --white-color: #FFFFE2;
  --radial-nav-color: #5a7d59;
  --radial-nav-color-hover: #719770;
  --radial-nav-color-dark: #567755;
  --accent-color-1: #E6754B;
  --accent-color-1-medium: #E6754B;
  --accent-color-1-dark: #e36435;
  --accent-color-2: #C9581F;
  --accent-color-2-light: #cf5b20;
  --accent-color-2-medium: #c0541e;
  --accent-color-2-dark: #b34e1c;
  --accent-color-3: #6C682F;
  --accent-color-4: #FCD773;
  --accent-color-4-light: #fddf8c;
  --accent-color-6-muted: hsl(107, 26%, 71%);
  --accent-color-6: #70a262;
  --accent-color-6-light: #75a668;
  --accent-color-6-medium: #649357;
  --accent-color-6-dark: #50794A;
  --accent-color-7: #D99D7B;
  --accent-color-7-light: #EDD4B6;
  --accent-color-8: #bc6d00;
  --accent-color-9: #cb904a;
  --accent-color-10: #8C862B;
  --accent-color-11: #768327;
  --accent-color-12: #6C682F;
  --accent-color-12-light: #aaa346;
  --accent-color-12-medium: #99933F;
  --accent-color-12-dark: #595527;
  --accent-color-13: #caceb1;
  --neutral-000: #fff;
  --neutral-100: #FFFFF3;
  --neutral-150: #fafadf;
  --neutral-200: #FFFFD6;
  --neutral-300: #F5F1C7;
  --neutral-350: #f4efbe;
  --neutral-400: #E3CE97;
  --neutral-500: #e8e5c3;
  --neutral-600: rgba(227, 206, 151, 0.66);
  --default-drop-shadow-color: #ffffff4d;
  --box-shadow-color-1: var(--accent-color-9);
  --box-shadow-color-2: #bb995938;
  --box-shadow-color-3: #5a7d5954;
  --box-shadow-color-4: #be000040;
  --border-color-3: #515c3417;
  --table-box-shadow-color: var(--box-shadow-color-2);
  --table-header-background-color: var(--core-color);
  --table-header-border-color: var(--core-color);
  --table-data-text-color: var(--white-color);
  --table-data-top-border-color: #5c68102b;
  --table-hover-color: #515c344a;
  --table-hover-text-color: var(--core-color);
  --table-striped-border-color: var(--neutral-100);
  --table-striped-alternate-background-color: var(--neutral-300);
  --warning-color: var(--secondary-color);
  --warning-color-medium: var(--secondary-color-medium);
  --warning-color-dark: var(--secondary-color-dark);
  --mild-danger-color: var(--accent-color-1);
  --mild-danger-color-medium: var(--accent-color-1-medium);
  --mild-danger-color-dark: var(--accent-color-1-dark);
  --danger-color: var(--accent-color-2);
  --danger-color-light: var(--accent-color-2-light);
  --danger-color-medium: var(--accent-color-2-medium);
  --danger-color-dark: var(--accent-color-2-dark);
  --success-color: var(--accent-color-6);
  --success-color-light: var(--accent-color-6-light);
  --success-color-medium: var(--accent-color-6-medium);
  --success-color-dark: var(--accent-color-6-dark);
  --super-success-color: var(--core-color);
  --super-success-color-medium: var(--core-color-medium);
  --super-success-color-dark: var(--core-color-dark);
  --info-color: var(--primary-color);
  --light-color: var(--accent-color-1);
  --dark-color: var(--core-color);
  --dark-color-dark: var(--core-color-medium);
  --disabled-color: lightgrey;
  --disabled-color-dark: darkgrey;
  --color-primary-h: 207;
  --color-primary-s: 10%;
  --color-primary-l: 36%;
  --color-primary: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
  --color-dark-h: 77;
  --color-dark-s: 28%;
  --color-dark-l: 28%;
  --color-dark-hsl: hsl(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l));
  --light-background-color-lighter: var(--neutral-100);
  --light-background-color: var(--neutral-200);
  --light-background-color-darker: var(--neutral-300);
  --light-background-color-darkest: var(--neutral-600);
  --dark-background-color: var(--core-color);
  --black-background-color: var(--black-color);
  --olive-background-color: var(--accent-color-10);
  --light-pink-background-color: var(--accent-color-7-light);
  --pink-background-color: var(--accent-color-7);
  --olive-1-background-color: var(--accent-color-11);
  --olive-2-background-color: var(--accent-color-6-dark);
  --yellow-background-color: var(--accent-color-4);
  --white-text-color: var(--neutral-000);
  --light-text-color: var(--neutral-200);
  --light-alternate-text-color: var(--accent-color-7-light);
  --dark-text-color: var(--core-color);
  --black-text-color: var(--black-color);
  --muted-text-color: var(--accent-color-10);
  --muted-text-color-darker: var(--accent-color-10-dark);
  --light-pink-text-color: var(--accent-color-7-light);
  --link-color: var(--accent-color-10);
  --heading-font-color: var(--primary-color);
  --body-font-color: var(--primary-color-dark);
  --body-font-color-light: var(--primary-color-medium);
  --visual-link-color: var(--accent-color-11);
  --input-text-color: var(--dark-color);
  --input-box-shadow-color: var(--box-shadow-color-3);
  --input-neutral-background-color: var(--neutral-500);
  --input-active-background-color: var(--neutral-300);
  --input-autofill-text-color: var(--core-color);
  --checkbox-color: var(--warning-color);
  --checkbox-text-color: var(--light-text-color);
  --radio-checked-color: var(--warning-color);
  --multiselect-background-color: var(--info-color);
  --multiselect-option-checked-color: var(--warning-color);
  --text-area-resizer-color: var(--core-color);
  --radial-menu-background-color: var(--radial-nav-color);
  --radial-menu-background-color-hover: var(--radial-nav-color);
  --radial-menu-notification-background-color: #ff5600;
  --radial-menu-text-color: var(--light-text-color);
  --radial-menu-shadow-color-hover: var(--default-drop-shadow-color);
  --radial-menu-notification-text-color: var(--white-text-color);
  --start-menu-link-color: #ffdece;
  --start-menu-hover-underline-color: var(--accent-color-7-light);
  --compact-profile-background-color: var(--accent-color-12-medium);
  --global-background-color: var(--core-color);
  --scroll-bar-container-color: var(--light-background-color-darker);
  --scroll-bar-color: var(--accent-color-1);
  --header-row-color: var(--neutral-400);
  --notification-hub-background-color: var(--core-color);
  --notification-hub-header-text-color: var(--white-color);
  --notification-hub-background-image-path: url(/images/global/shapes/paper-olive.svg);
  --notification-hub-close-button-color: var(--accent-color-2);
  --notification-hub-close-button-icon-color: var(--white-text-color);
  --notification-hub-unread-message-text-color: var(--white-color);
  --notification-hub-read-message-text-color: var(--black-color);
  --notification-hub-unread-message-color: var(--accent-color-10);
  --notification-hub-unread-message-date-color: var(--accent-color-10);
  --notification-hub-read-message-color: var(--neutral-300);
  --notification-hub-read-message-date-color: var(--neutral-300);
  --notification-hub-unread-invitation-text-color: var(--white-color);
  --notification-hub-read-invitation-text-color: var(--black-color);
  --notification-hub-unread-invitation-color: var(--accent-color-10);
  --notification-hub-unread-invitation-date-color: var(--accent-color-10);
  --notification-hub-read-invitation-color: var(--neutral-300);
  --notification-hub-read-invitation-date-color: var(--neutral-300);
  --notification-hub-empty-background-color: var(--neutral-300);
  --selected-avatar-color: var(--accent-color-4);
  --avatar-card-background-color: var(--dark-background-color);
  --avatar-card-border-color: var(--warning-color);
  --loading-screen-text-color: var(--light-text-color);
  --loading-screen-text-shadow-color: var(--core-color);
  --tile-shadow-color: #58582a;
  --tile-accent-box-shadow-color: var(--secondary-color);
  --blazor-modal-background-color: var(--light-background-color);
  --blazor-modal-box-shadow-color: var(--accent-color-9);
  --blazor-close-btn-color: var(--light-color);
  --blazor-modal-header-image-path: url("/images/global/headers/header-retro-forest.svg");
  --blazor-modal-header-color: var(--light-alternate-text-color);
  --modal-close-btn-color: var(--light-color);
  --modal-close-btn-color-hover: var(--accent-color-1-dark);
  --modal-open-btn-color: var(--radial-nav-color);
  --modal-open-btn-color-hover: var(--radial-nav-color-dark);
  --success-modal-shadow-color: var(--accent-color-9);
  --success-modal-text-shadow-color: #2c3840;
  --feedback-modal-btn-background-color: var(--neutral-300);
  --feedback-modal-btn-text-color: #212529;
  --feedback-modal-btn-border-color: var(--neutral-400);
  --feedback-modal-btn-box-shadow-color: var(--neutral-400);
  --feedback-modal-btn-info-background-color: var(--accent-color-4);
  --feedback-modal-btn-info-active-background-color: var(--accent-color-4-light) --feedback-modal-btn-info-border-color: var(--neutral-300);
  --feedback-modal-btn-info-active-box-shadow-color: var(--accent-color-4);
  --timer-background-color: var(--light-background-color-darker);
  --card-counter-background-image-path: url(/images/pages/flashcards/flashcards-ribbon-lrg.svg);
  --card-counter-text-color: var(--dark-color);
  --progress-bar-container-background-color: var(--light-background-color);
  --progress-bar-inner-background-color: var(--neutral-300);
  --progress-bar-text-color: var(--accent-color-1);
  --progress-bar-shadow-color: var(--box-shadow-color-4);
  --progress-bar-filled-area-color: #beca59;
  --progress-bar-filled-area-text-color: var(--dark-text-color);
  --progress-bar-icon-color: var(--accent-color-1);
  --progress-bar-icon-border-color: var(--accent-color-1);
  --toast-default-text-color: var(--white-text-color);
  --toast-info-background-color: var(--info-color);
  --toast-info-text-color: var(--white-text-color);
  --toast-success-background-color: var(--success-color);
  --toast-success-text-color: var(--white-text-color);
  --toast-warning-background-color: var(--accent-color-4);
  --toast-warning-text-color: var(--dark-color);
  --toast-danger-background-color: var(--danger-color);
  --toast-danger-text-color: var(--white-text-color);
  --alert-default-text-color: var(--white-text-color);
  --alert-primary-text-color: var(--accent-color-7-light);
  --alert-primary-image-path: url("/images/global/headers/header-retro-forest.svg");
  --alert-info-text-color: var(--white-text-color);
  --alert-info-image-path: url("/images/global/headers/header-retro-blue.svg");
  --alert-success-text-color: var(--white-text-color);
  --alert-success-image-path: url("/images/global/headers/header-retro-green.svg");
  --alert-warning-text-color: var(--dark-color);
  --alert-warning-image-path: url("/images/global/headers/header-retro-mustard.svg");
  --alert-danger-text-color: var(--black-text-color);
  --alert-danger-image-path: url("/images/global/headers/header-retro-red.svg");
  --alert-secondary-text-color: var(--black-text-color);
  --alert-secondary-image-path: url("/images/global/headers/header-retro-olive.svg");
  --alert-light-text-color: var(--dark-text-color);
  --alert-light-image-path: url("/images/global/headers/header-retro-light.svg");
  --badge-primary-background-color: var(--core-color);
  --badge-primary-text-color: var(--light-text-color);
  --badge-secondary-background-color: var(--accent-color-1);
  --badge-secondary-text-color: var(--light-text-color);
  --badge-success-background-color: var(--success-color);
  --badge-success-text-color: var(--light-text-color);
  --badge-warning-background-color: var(--warning-color);
  --badge-warning-text-color: var(--light-text-color);
  --badge-danger-background-color: var(--danger-color);
  --badge-danger-text-color: var(--light-text-color);
  --badge-info-background-color: var(--info-color);
  --badge-info-text-color: var(--light-text-color);
  --badge-light-background-color: var(--light-color);
  --badge-light-text-color: var(--dark-color);
  --badge-dark-background-color: var(--black-color);
  --badge-dark-text-color: var(--light-text-color);
  --blazor-error-background-color: var(--light-background-color);
  --tabs-default-link-color: var(--accent-color-12);
  --tabs-default-link-color-hover: var(--accent-color-12-dark);
  --tabs-default-active-color: var(--accent-color-12-medium);
  --tabs-default-active-hover-color: var(--accent-color-12-light);
  --tabs-default-text-color: var(--black-text-color);
  --animated-tabs-background-color: var(--neutral-100);
  --animated-tabs-active-color: var(--secondary-color);
  --cms-navbar-brand-text-color: var(--white-color);
  --cms-navbar-brand-logo-container-image-path: url("/images/global/headers/header-retro-olive.svg");
  --account-toggle-cms-text-color: var(--black-text-color);
  --account-toggle-cms-background-color: var(--secondary-color);
  --account-toggle-cms-background-color-hover: var(--secondary-color-lighter);
  --account-toggle-cms-border-color: var(--black-color);
  --account-toggle-cms-avatar-background-color: var(--core-color-dark);
  --account-toggle-cms-dropdown-background-color: var(--core-color-dark);
  --account-toggle-cms-dropdown-background-color-hover: var(--core-color);
  --account-toggle-cms-dropdown-link-color: var(--secondary-color);
  --account-toggle-cms-dropdown-link-color-hover: var(--white-color);
  --account-toggle-cms-dropdown-logout-color: var(--accent-color-7-light);
  --cms-nav-background-color: var(--core-color-light);
  --cms-nav-background-color-hover: var(--neutral-300);
  --cms-nav-background-color-active: var(--neutral-200);
  --cms-nav-text-color-active: var(--dark-color);
  --cms-nav-shadow-color-hover: var(--default-drop-shadow-color);
  --cms-nav-text-color: var(--light-text-color);
  --cms-nav-text-color-hover: var(--dark-text-color);
  --cms-nav-text-color-active: var(--primary-color);
  --cms-nav-submenu-text-color: var(--core-color);
  --cms-nav-submenu-text-color-hover: var(--white-text-color);
  --cms-nav-submenu-background-color: var(--core-color);
  --cms-nav-mobile-background-color: #363c25;
  --vertical-tabs-nav-background-color: var(--dark-background-color);
  --vertical-tabs-nav-text-color: var(--light-text-color);
  --vertical-tabs-container-background-color: var(--white-color);
  --vertical-tabs-tab-hover-border-color: var(--warning-color);
  --vertical-tabs-active-tab-color: var(--white-color);
  --vertical-tabs-active-tab-text-color: var(--dark-text-color);
  --cohort-thumbnail-background-color: var(--light-background-color);
  --cohort-thumbnail-background-color-hover: var(--light-background-color-darker);
  --cohort-thumbnail-border-color: var(--warning-color);
  --cohort-thumbnail-text-color: var(--warning-color);
  --cohort-members-tile-background-color: var(--light-background-color-lighter);
  --cohort-members-tile-border-color: var(--warning-color);
  --module-popover-background-color: var(--secondary-color);
  --module-popover-shadow-color: var(--accent-color-3);
  --module-popover-heading-color: var(--dark-text-color);
  --lesson-default-border-color: var(--secondary-color);
  --lesson-optional-border-color: var(--accent-color-8);
  --lesson-inprogress-border-color: var(--accent-color-3);
  --lesson-completed-border-color: var(--success-color);
  --lesson-completed-highlight-color: var(--accent-color-4);
  --lesson-shadow-color: --box-shadow-color-4;
  --lesson-popover-background-color: var(--secondary-color);
  --lesson-popover-shadow-color: var(--accent-color-3);
  --activity-complete-checkmark-color: var(--accent-color-4);
  --activity-icon-frame-color: var(--secondary-color);
  --activity-icon-background-color: var(--core-color);
  --activity-menu-ribbon-image-neutral: url(/images/levels/activities/activity-ribbon-neutral.svg);
  --activity-menu-ribbon-image-hover: url(/images/levels/activities/activity-ribbon-hover.svg);
  --match-activity-dropspot-image-path: url(/images/pages/match-game/match-game-leaf-green.svg);
  --match-activity-highlighter-color: var(--accent-color-4);
  --multiple-choice-container-color: var(--light-background-color-darker);
  --multiple-choice-options-container-color: var(--neutral-400);
  --multiple-choice-options-item-color: var(--light-background-color);
  --multiple-choice-option-hover-color: #D3D7DB;
  --multiple-choice-option-active-color: #657F97;
  --multiple-choice-option-active-text-color: var(--light-text-color);
  --multiple-choice-option-correct-color: var(--success-color);
  --multiple-choice-option-correct-text-color: var(--light-text-color);
  --multiple-choice-option-wrong-color: var(--danger-color);
  --multiple-choice-option-wrong-text-color: var(--light-text-color);
  --fill-blanks-container-color: var(--neutral-200);
  --fill-blanks-input-background-color: var(--neutral-300);
  --fill-blanks-input-text-color: var(--dark-text-color);
  --fill-blanks-input-dashes-color: var(--accent-color-1);
  --background-1-image-path-md: url("/images/global/backgrounds/bg-texture-lines-1000.png");
  --background-1-image-path-lg: url("/images/global/backgrounds/bg-texture-lines-1000.png");
  --background-1-image-path-xl: url("/images/global/backgrounds/bg-texture-lines.svg");
  --background-1-color: var(--core-color);
  --background-2-image-path-md: url("/images/global/backgrounds/bg-texture-v-1000.png");
  --background-2-image-path-lg: url("/images/global/backgrounds/bg-texture-v-1000.png");
  --background-2-image-path-xl: url("/images/global/backgrounds/bg-texture-v.svg");
  --background-2-color: var(--success-color);
  --background-3-image-path-md: url("/images/global/backgrounds/bg-texture-basketweave-1000.png");
  --background-3-image-path-lg: url("/images/global/backgrounds/bg-texture-basketweave-1000.png");
  --background-3-image-path-xl: url("/images/global/backgrounds/bg-texture-basketweave.svg");
  --background-3-color: var(--warning-color);
  --background-4-image-path: url("/images/global/backgrounds/bg-campsite-default.svg");
  --background-4-color: var(--success-color);
  --background-5-image-path-md: url("/images/global/backgrounds/bg-mountains-road-1440x607.png");
  --background-5-image-path-lg: url("/images/global/backgrounds/bg-mountains-road-1920x929.png");
  --background-5-image-path-xl: url("/images/global/backgrounds/bg-mountains-road-2500x1406.png");
  --background-5-image-path-xxl: url("/images/global/backgrounds/bg-mountains-road-bg-mountains-road.svg");
  --background-6-image-path-md: url("/images/global/backgrounds/bg-forest-olive.png");
  --background-6-image-path-short: url("/images/global/backgrounds/bg-forest-olive-1440x607.png");
  --background-6-image-path-lg: url("/images/global/backgrounds/bg-forest-olive-1920x929.png");
  --background-6-image-path-xl: url("/images/global/backgrounds/bg-forest-olive-2500x1406.png");
  --background-6-image-path-xxl: url("/images/global/backgrounds/bg-forest-olive.png");
  --background-7-image-path-md: url("/images/global/backgrounds/bg-mountain-forest-1920x929.png");
  --background-7-image-path-short: url("/images/global/backgrounds/bg-mountain-forest-1440x607.png");
  --background-7-image-path-lg: url("/images/global/backgrounds/bg-mountain-forest-2500x1406.png");
  --background-7-image-path-xl: url("/images/global/backgrounds/bg-mountain-forest.png");
  --background-9a-image-path: url("/images/pages/tutorial/bg-camp-closeup-complete-29052023.svg");
  --background-9b-image-path: url("/images/pages/tutorial/bg-camp-closeup-empty.svg");
  --header-ribbon-default-path: url("/images/global/headers/header-ribbon-yellow.svg");
  --header-ribbon-mustard-image-path: url("/images/global/headers/header-ribbon-mustard.svg");
  --header-ribbon-mustard-text-color: var(--light-text-color);
  --header-ribbon-olive-image-path: url("/images/global/headers/header-ribbon-olive.svg");
  --header-ribbon-olive-text-color: var(--light-text-color);
  --header-ribbon-blue-image-path: url("/images/global/headers/header-ribbon-blue.svg");
  --header-ribbon-blue-text-color: var(--light-text-color);
  --header-ribbon-orange-image-path: url("/images/global/headers/header-ribbon-orange.svg");
  --header-ribbon-orange-text-color: var(--light-text-color);
  --header-ribbon-green-image-path: url("/images/global/headers/header-ribbon-green.svg");
  --header-ribbon-green-text-color: var(--light-text-color);
  --header-ribbon-double-left-image-path: url("/images/global/headers/header-ribbon-blue-left.svg");
  --header-ribbon-double-right-image-path: url("/images/global/headers/header-ribbon-blue-right.svg");
  --header-ribbon-double-text-color: var(--light-text-color);
  --header-ribbon-double-left-olive-image-path: url("/images/global/headers/header-ribbon-olive-left.svg");
  --header-ribbon-double-right-olive-image-path: url("/images/global/headers/header-ribbon-olive-right.svg");
  --header-retro-secondary-image-path: url("/images/global/headers/header-retro-olive.svg");
  --flashcard-touch-highlight-color: var(--accent-color-4);
  --flashcard-border-color: var(--core-color);
  --flashcard-btn-color: var(--core-color);
  --chart-legend-text-color: var(--primary-color-light);
  --chart-axis-title-color: #8E9576;
  --chart-axis-label-color: rgba(13, 13, 18, 0.46);
  --chart-axis-stroke-group-1: #eaf1d7;
  --chart-axis-stroke-group-2: #c1c7b3;
  --chart-tooltip-background-color: #FEFEF2;
  --chart-trackball-color: var(--accent-color-6);
  --decor-element-tape-color: transparent;
}
@layer base {
  :where(.learner-app) {
    *, ::after, ::before {
      box-sizing: border-box;
    }
    article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
      display: block;
    }
    [tabindex="-1"]:focus {
      outline: 0;
    }
    hr {
      box-sizing: content-box;
      height: 0;
      overflow: visible;
    }
    h1, h2, h3, h4, h5, h6 {
      margin-top: 0;
      margin-bottom: .5rem;
    }
    p {
      margin-top: 0;
      margin-bottom: 1rem;
    }
    abbr[data-original-title], abbr[title] {
      text-decoration: underline;
      -webkit-text-decoration: underline dotted;
      text-decoration: underline dotted;
      cursor: help;
      border-bottom: 0;
      -webkit-text-decoration-skip-ink: none;
      text-decoration-skip-ink: none;
    }
    address {
      margin-bottom: 1rem;
      font-style: normal;
      line-height: inherit;
    }
    dl, ol, ul {
      margin-top: 0;
      margin-bottom: 1rem;
    }
    ol ol, ol ul, ul ol, ul ul {
      margin-bottom: 0;
    }
    dt {
      font-weight: 700;
    }
    dd {
      margin-bottom: .5rem;
      margin-left: 0;
    }
    blockquote {
      margin: 0 0 1rem;
    }
    b, strong {
      font-weight: bolder;
    }
    small {
      font-size: 80%;
    }
    sub, sup {
      position: relative;
      font-size: 75%;
      line-height: 0;
      vertical-align: baseline;
    }
    sub {
      bottom: -.25em;
    }
    sup {
      top: -.5em;
    }
    a {
      color: #007bff;
      text-decoration: none;
      background-color: transparent;
    }
    a:hover {
      color: #0056b3;
      text-decoration: underline;
    }
    a:not([href]):not([tabindex]) {
      color: inherit;
      text-decoration: none;
    }
    a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
      color: inherit;
      text-decoration: none;
    }
    a:not([href]):not([tabindex]):focus {
      outline: 0;
    }
    code, kbd, pre, samp {
      font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
      font-size: 1em;
    }
    pre {
      margin-top: 0;
      margin-bottom: 1rem;
      overflow: auto;
    }
    figure {
      margin: 0 0 1rem;
    }
    img {
      vertical-align: middle;
      border-style: none;
    }
    svg {
      overflow: hidden;
      vertical-align: middle;
    }
    table {
      border-collapse: collapse;
    }
    caption {
      padding-top: .75rem;
      padding-bottom: .75rem;
      color: #6c757d;
      text-align: left;
      caption-side: bottom;
    }
    th {
      text-align: inherit;
    }
    label {
      display: inline-block;
      margin-bottom: .5rem;
    }
    button {
      border-radius: 0;
    }
    button:focus {
      outline: 1px dotted;
      outline: 5px auto -webkit-focus-ring-color;
    }
    button, input, optgroup, select, textarea {
      margin: 0;
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
    }
    button, input {
      overflow: visible;
    }
    button, select {
      text-transform: none;
    }
    select {
      word-wrap: normal;
    }
    [type=button], [type=reset], [type=submit], button {
      -webkit-appearance: button;
    }
    [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
      cursor: pointer;
    }
    [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
      padding: 0;
      border-style: none;
    }
    input[type=checkbox], input[type=radio] {
      box-sizing: border-box;
      padding: 0;
    }
    input[type=date], input[type=datetime-local], input[type=month], input[type=time] {
      -webkit-appearance: listbox;
    }
    textarea {
      overflow: auto;
      resize: vertical;
    }
    fieldset {
      min-width: 0;
      padding: 0;
      margin: 0;
      border: 0;
    }
    legend {
      display: block;
      width: 100%;
      max-width: 100%;
      padding: 0;
      margin-bottom: .5rem;
      font-size: 1.5rem;
      line-height: inherit;
      color: inherit;
      white-space: normal;
    }
    progress {
      vertical-align: baseline;
    }
    [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
      height: auto;
    }
    [type=search] {
      outline-offset: -2px;
      -webkit-appearance: none;
    }
    [type=search]::-webkit-search-decoration {
      -webkit-appearance: none;
    }
    ::-webkit-file-upload-button {
      font: inherit;
      -webkit-appearance: button;
    }
    output {
      display: inline-block;
    }
    summary {
      display: list-item;
      cursor: pointer;
    }
    template {
      display: none;
    }
    [hidden] {
      display: none;
    }
    h1, h2, h3, h4, h5, h6 {
      margin-bottom: .5rem;
      font-weight: 500;
      line-height: 1.2;
    }
    h1 {
      font-size: 2.5rem;
    }
    h2 {
      font-size: 2rem;
    }
    h3 {
      font-size: 1.75rem;
    }
    h4 {
      font-size: 1.5rem;
    }
    h5 {
      font-size: 1.25rem;
    }
    h6 {
      font-size: 1rem;
    }
    hr {
      margin-top: 1rem;
      margin-bottom: 1rem;
      border: 0;
      border-top: 1px solid rgba(0,0,0,.1);
    }
    small {
      font-size: 80%;
      font-weight: 400;
    }
    code {
      font-size: 87.5%;
      color: #e83e8c;
      word-break: break-word;
    }
    a>code {
      color: inherit;
    }
    kbd {
      padding: .2rem .4rem;
      font-size: 87.5%;
      color: #fff;
      background-color: #212529;
      border-radius: .2rem;
    }
    kbd kbd {
      padding: 0;
      font-size: 100%;
      font-weight: 700;
    }
    pre {
      display: block;
      font-size: 87.5%;
      color: #212529;
    }
    pre code {
      font-size: inherit;
      color: inherit;
      word-break: normal;
    }
    @media print {
      *, ::after, ::before {
        text-shadow: none;
        box-shadow: none;
      }
      abbr[title]::after {
        content: " (" attr(title) ")";
      }
      pre {
        white-space: pre-wrap;
      }
      blockquote, pre {
        border: 1px solid #adb5bd;
        page-break-inside: avoid;
      }
      thead {
        display: table-header-group;
      }
      img, tr {
        page-break-inside: avoid;
      }
      h2, h3, p {
        orphans: 3;
        widows: 3;
      }
      h2, h3 {
        page-break-after: avoid;
      }
    }
  }
}
@layer components {
  :where(.learner-app) {
    .h1, .h2, .h3, .h4, .h5, .h6 {
      margin-bottom: .5rem;
      font-weight: 500;
      line-height: 1.2;
    }
    .h1 {
      font-size: 2.5rem;
    }
    .h2 {
      font-size: 2rem;
    }
    .h3 {
      font-size: 1.75rem;
    }
    .h4 {
      font-size: 1.5rem;
    }
    .h5 {
      font-size: 1.25rem;
    }
    .h6 {
      font-size: 1rem;
    }
    .lead {
      font-size: 1.25rem;
      font-weight: 300;
    }
    .display-1 {
      font-size: 6rem;
      font-weight: 300;
      line-height: 1.2;
    }
    .container-fluid {
      width: 100%;
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
    }
    .row {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin-right: -15px;
      margin-left: -15px;
    }
    .no-gutters {
      margin-right: 0;
      margin-left: 0;
    }
    .no-gutters>.col, .no-gutters>[class*=col-] {
      padding-right: 0;
      padding-left: 0;
    }
    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
      position: relative;
      width: 100%;
      padding-right: 15px;
      padding-left: 15px;
    }
    .col {
      -ms-flex-preferred-size: 0;
      flex-basis: 0;
      -ms-flex-positive: 1;
      flex-grow: 1;
      max-width: 100%;
    }
    .col-auto {
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      width: auto;
      max-width: 100%;
    }
    .col-1 {
      -ms-flex: 0 0 8.333333%;
      flex: 0 0 8.333333%;
      max-width: 8.333333%;
    }
    .col-2 {
      -ms-flex: 0 0 16.666667%;
      flex: 0 0 16.666667%;
      max-width: 16.666667%;
    }
    .col-3 {
      -ms-flex: 0 0 25%;
      flex: 0 0 25%;
      max-width: 25%;
    }
    .col-4 {
      -ms-flex: 0 0 33.333333%;
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
    }
    .col-5 {
      -ms-flex: 0 0 41.666667%;
      flex: 0 0 41.666667%;
      max-width: 41.666667%;
    }
    .col-6 {
      -ms-flex: 0 0 50%;
      flex: 0 0 50%;
      max-width: 50%;
    }
    .col-7 {
      -ms-flex: 0 0 58.333333%;
      flex: 0 0 58.333333%;
      max-width: 58.333333%;
    }
    .col-8 {
      -ms-flex: 0 0 66.666667%;
      flex: 0 0 66.666667%;
      max-width: 66.666667%;
    }
    .col-9 {
      -ms-flex: 0 0 75%;
      flex: 0 0 75%;
      max-width: 75%;
    }
    .col-10 {
      -ms-flex: 0 0 83.333333%;
      flex: 0 0 83.333333%;
      max-width: 83.333333%;
    }
    .col-11 {
      -ms-flex: 0 0 91.666667%;
      flex: 0 0 91.666667%;
      max-width: 91.666667%;
    }
    .col-12 {
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%;
    }
    @media (min-width:576px) {
      .col-sm {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
      }
      .col-sm-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
      }
      .col-sm-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
      }
      .col-sm-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
      }
      .col-sm-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
      }
      .col-sm-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
      }
      .col-sm-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
      }
      .col-sm-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
      }
      .col-sm-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
      }
      .col-sm-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
      }
      .col-sm-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
      }
      .col-sm-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
      }
      .col-sm-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
      }
    }
    @media (min-width:768px) {
      .col-md {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
      }
      .col-md-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
      }
      .col-md-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
      }
      .col-md-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
      }
      .col-md-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
      }
      .col-md-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
      }
      .col-md-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
      }
      .col-md-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
      }
      .col-md-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
      }
      .col-md-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
      }
      .col-md-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
      }
      .col-md-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
      }
      .col-md-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
      }
    }
    @media (min-width:992px) {
      .col-lg {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
      }
      .col-lg-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
      }
      .col-lg-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
      }
      .col-lg-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
      }
      .col-lg-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
      }
      .col-lg-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
      }
      .col-lg-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
      }
      .col-lg-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
      }
      .col-lg-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
      }
      .col-lg-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
      }
      .col-lg-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
      }
      .col-lg-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
      }
      .col-lg-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
      }
    }
    @media (min-width:1200px) {
      .col-xl {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
      }
      .col-xl-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
      }
      .col-xl-2 {
        -ms-flex: 0 0 16.666667%;
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
      }
      .col-xl-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
      }
      .col-xl-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
      }
      .col-xl-5 {
        -ms-flex: 0 0 41.666667%;
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
      }
      .col-xl-6 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
      }
      .col-xl-7 {
        -ms-flex: 0 0 58.333333%;
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
      }
      .col-xl-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
      }
      .col-xl-9 {
        -ms-flex: 0 0 75%;
        flex: 0 0 75%;
        max-width: 75%;
      }
      .col-xl-10 {
        -ms-flex: 0 0 83.333333%;
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
      }
      .col-xl-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
      }
      .col-xl-12 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
      }
    }
    .table td, .table th {
      padding: .75rem;
      vertical-align: top;
      border-top: 1px solid #dee2e6;
    }
    .table thead th {
      vertical-align: bottom;
      border-bottom: 2px solid #dee2e6;
    }
    .table tbody+tbody {
      border-top: 2px solid #dee2e6;
    }
    .table-sm td, .table-sm th {
      padding: .3rem;
    }
    .table-bordered {
      border: 1px solid #dee2e6;
    }
    .table-bordered td, .table-bordered th {
      border: 1px solid #dee2e6;
    }
    .table-bordered thead td, .table-bordered thead th {
      border-bottom-width: 2px;
    }
    .table-hover tbody tr:hover {
      color: #212529;
      background-color: rgba(0,0,0,.075);
    }
    .table-hover .table-primary:hover {
      background-color: #9fcdff;
    }
    .table-hover .table-primary:hover>td, .table-hover .table-primary:hover>th {
      background-color: #9fcdff;
    }
    .table-hover .table-secondary:hover {
      background-color: #c8cbcf;
    }
    .table-hover .table-secondary:hover>td, .table-hover .table-secondary:hover>th {
      background-color: #c8cbcf;
    }
    .table-hover .table-success:hover {
      background-color: #b1dfbb;
    }
    .table-hover .table-success:hover>td, .table-hover .table-success:hover>th {
      background-color: #b1dfbb;
    }
    .table-hover .table-info:hover {
      background-color: #abdde5;
    }
    .table-hover .table-info:hover>td, .table-hover .table-info:hover>th {
      background-color: #abdde5;
    }
    .table-hover .table-warning:hover {
      background-color: #ffe8a1;
    }
    .table-hover .table-warning:hover>td, .table-hover .table-warning:hover>th {
      background-color: #ffe8a1;
    }
    .table-hover .table-danger:hover {
      background-color: #f1b0b7;
    }
    .table-hover .table-danger:hover>td, .table-hover .table-danger:hover>th {
      background-color: #f1b0b7;
    }
    .table-light, .table-light>td, .table-light>th {
      background-color: #fdfdfe;
    }
    .table-light tbody+tbody, .table-light td, .table-light th, .table-light thead th {
      border-color: #fbfcfc;
    }
    .table-hover .table-light:hover {
      background-color: #ececf6;
    }
    .table-hover .table-light:hover>td, .table-hover .table-light:hover>th {
      background-color: #ececf6;
    }
    .table-hover .table-dark:hover {
      background-color: #b9bbbe;
    }
    .table-hover .table-dark:hover>td, .table-hover .table-dark:hover>th {
      background-color: #b9bbbe;
    }
    .table-hover .table-active:hover {
      background-color: rgba(0,0,0,.075);
    }
    .table-hover .table-active:hover>td, .table-hover .table-active:hover>th {
      background-color: rgba(0,0,0,.075);
    }
    .table .thead-dark th {
      color: #fff;
      background-color: #343a40;
      border-color: #454d55;
    }
    .table .thead-light th {
      color: #495057;
      background-color: #e9ecef;
      border-color: #dee2e6;
    }
    .table-dark.table-bordered {
      border: 0;
    }
    .table-dark.table-hover tbody tr:hover {
      color: #fff;
      background-color: rgba(255,255,255,.075);
    }
    @media (max-width:575.98px) {
      .table-responsive-sm>.table-bordered {
        border: 0;
      }
    }
    @media (max-width:767.98px) {
      .table-responsive-md>.table-bordered {
        border: 0;
      }
    }
    @media (max-width:991.98px) {
      .table-responsive-lg>.table-bordered {
        border: 0;
      }
    }
    @media (max-width:1199.98px) {
      .table-responsive-xl>.table-bordered {
        border: 0;
      }
    }
    .table-responsive>.table-bordered {
      border: 0;
    }
    .form-control {
      display: block;
      width: 100%;
      height: calc(1.5em + .75rem + 2px);
      padding: .375rem .75rem;
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #495057;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid #ced4da;
      border-radius: .25rem;
      transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }
    @media (prefers-reduced-motion:reduce) {
      .form-control {
        transition: none;
      }
    }
    .form-control::-ms-expand {
      background-color: transparent;
      border: 0;
    }
    .form-control:focus {
      color: #495057;
      background-color: #fff;
      border-color: #80bdff;
      outline: 0;
      box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
    }
    .form-control::-webkit-input-placeholder {
      color: #6c757d;
      opacity: 1;
    }
    .form-control::-moz-placeholder {
      color: #6c757d;
      opacity: 1;
    }
    .form-control:-ms-input-placeholder {
      color: #6c757d;
      opacity: 1;
    }
    .form-control::-ms-input-placeholder {
      color: #6c757d;
      opacity: 1;
    }
    .form-control::placeholder {
      color: #6c757d;
      opacity: 1;
    }
    .form-control:disabled, .form-control[readonly] {
      background-color: #e9ecef;
      opacity: 1;
    }
    select.form-control:focus::-ms-value {
      color: #495057;
      background-color: #fff;
    }
    select.form-control[multiple], select.form-control[size] {
      height: auto;
    }
    textarea.form-control {
      height: auto;
    }
    .form-group {
      margin-bottom: 1rem;
    }
    .form-row {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin-right: -5px;
      margin-left: -5px;
    }
    .form-row>.col, .form-row>[class*=col-] {
      padding-right: 5px;
      padding-left: 5px;
    }
    .form-check {
      position: relative;
      display: block;
      padding-left: 1.25rem;
    }
    .form-check-input {
      position: absolute;
      margin-top: .3rem;
      margin-left: -1.25rem;
    }
    .form-check-input:disabled~.form-check-label {
      color: #6c757d;
    }
    .form-check-label {
      margin-bottom: 0;
    }
    .form-check-inline .form-check-input {
      position: static;
      margin-top: 0;
      margin-right: .3125rem;
      margin-left: 0;
    }
    .form-control.is-valid, .was-validated .form-control:valid {
      border-color: #28a745;
      padding-right: calc(1.5em + .75rem);
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: center right calc(.375em + .1875rem);
      background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    }
    .form-control.is-valid:focus, .was-validated .form-control:valid:focus {
      border-color: #28a745;
      box-shadow: 0 0 0 .2rem rgba(40,167,69,.25);
    }
    .form-control.is-valid~.valid-feedback, .form-control.is-valid~.valid-tooltip, .was-validated .form-control:valid~.valid-feedback, .was-validated .form-control:valid~.valid-tooltip {
      display: block;
    }
    .was-validated textarea.form-control:valid, textarea.form-control.is-valid {
      padding-right: calc(1.5em + .75rem);
      background-position: top calc(.375em + .1875rem) right calc(.375em + .1875rem);
    }
    .form-check-input.is-valid~.form-check-label, .was-validated .form-check-input:valid~.form-check-label {
      color: #28a745;
    }
    .form-check-input.is-valid~.valid-feedback, .form-check-input.is-valid~.valid-tooltip, .was-validated .form-check-input:valid~.valid-feedback, .was-validated .form-check-input:valid~.valid-tooltip {
      display: block;
    }
    .custom-control-input.is-valid~.custom-control-label, .was-validated .custom-control-input:valid~.custom-control-label {
      color: #28a745;
    }
    .custom-control-input.is-valid~.custom-control-label::before, .was-validated .custom-control-input:valid~.custom-control-label::before {
      border-color: #28a745;
    }
    .custom-control-input.is-valid~.valid-feedback, .custom-control-input.is-valid~.valid-tooltip, .was-validated .custom-control-input:valid~.valid-feedback, .was-validated .custom-control-input:valid~.valid-tooltip {
      display: block;
    }
    .custom-control-input.is-valid:checked~.custom-control-label::before, .was-validated .custom-control-input:valid:checked~.custom-control-label::before {
      border-color: #34ce57;
      background-color: #34ce57;
    }
    .custom-control-input.is-valid:focus~.custom-control-label::before, .was-validated .custom-control-input:valid:focus~.custom-control-label::before {
      box-shadow: 0 0 0 .2rem rgba(40,167,69,.25);
    }
    .custom-control-input.is-valid:focus:not(:checked)~.custom-control-label::before, .was-validated .custom-control-input:valid:focus:not(:checked)~.custom-control-label::before {
      border-color: #28a745;
    }
    .form-control.is-invalid, .was-validated .form-control:invalid {
      border-color: #dc3545;
      padding-right: calc(1.5em + .75rem);
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
      background-repeat: no-repeat;
      background-position: center right calc(.375em + .1875rem);
      background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    }
    .form-control.is-invalid:focus, .was-validated .form-control:invalid:focus {
      border-color: #dc3545;
      box-shadow: 0 0 0 .2rem rgba(220,53,69,.25);
    }
    .form-control.is-invalid~.invalid-feedback, .form-control.is-invalid~.invalid-tooltip, .was-validated .form-control:invalid~.invalid-feedback, .was-validated .form-control:invalid~.invalid-tooltip {
      display: block;
    }
    .was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
      padding-right: calc(1.5em + .75rem);
      background-position: top calc(.375em + .1875rem) right calc(.375em + .1875rem);
    }
    .form-check-input.is-invalid~.form-check-label, .was-validated .form-check-input:invalid~.form-check-label {
      color: #dc3545;
    }
    .form-check-input.is-invalid~.invalid-feedback, .form-check-input.is-invalid~.invalid-tooltip, .was-validated .form-check-input:invalid~.invalid-feedback, .was-validated .form-check-input:invalid~.invalid-tooltip {
      display: block;
    }
    .custom-control-input.is-invalid~.custom-control-label, .was-validated .custom-control-input:invalid~.custom-control-label {
      color: #dc3545;
    }
    .custom-control-input.is-invalid~.custom-control-label::before, .was-validated .custom-control-input:invalid~.custom-control-label::before {
      border-color: #dc3545;
    }
    .custom-control-input.is-invalid~.invalid-feedback, .custom-control-input.is-invalid~.invalid-tooltip, .was-validated .custom-control-input:invalid~.invalid-feedback, .was-validated .custom-control-input:invalid~.invalid-tooltip {
      display: block;
    }
    .custom-control-input.is-invalid:checked~.custom-control-label::before, .was-validated .custom-control-input:invalid:checked~.custom-control-label::before {
      border-color: #e4606d;
      background-color: #e4606d;
    }
    .custom-control-input.is-invalid:focus~.custom-control-label::before, .was-validated .custom-control-input:invalid:focus~.custom-control-label::before {
      box-shadow: 0 0 0 .2rem rgba(220,53,69,.25);
    }
    .custom-control-input.is-invalid:focus:not(:checked)~.custom-control-label::before, .was-validated .custom-control-input:invalid:focus:not(:checked)~.custom-control-label::before {
      border-color: #dc3545;
    }
    .form-inline .form-check {
      width: 100%;
    }
    @media (min-width:576px) {
      .form-inline .form-group {
        display: -ms-flexbox;
        display: flex;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        -ms-flex-align: center;
        align-items: center;
        margin-bottom: 0;
      }
      .form-inline .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
      }
      .form-inline .custom-select, .form-inline .input-group {
        width: auto;
      }
      .form-inline .form-check {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        width: auto;
        padding-left: 0;
      }
      .form-inline .form-check-input {
        position: relative;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        margin-top: 0;
        margin-right: .25rem;
        margin-left: 0;
      }
      .form-inline .custom-control {
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
      }
      .form-inline .custom-control-label {
        margin-bottom: 0;
      }
    }
    .btn {
      display: inline-block;
      font-weight: 400;
      color: #212529;
      text-align: center;
      vertical-align: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      background-color: transparent;
      border: 1px solid transparent;
      padding: .375rem .75rem;
      font-size: 1rem;
      line-height: 1.5;
      border-radius: .25rem;
      transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }
    @media (prefers-reduced-motion:reduce) {
      .btn {
        transition: none;
      }
    }
    .btn:hover {
      color: #212529;
      text-decoration: none;
    }
    .btn.focus, .btn:focus {
      outline: 0;
      box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
    }
    .btn.disabled, .btn:disabled {
      opacity: .65;
    }
    a.btn.disabled, fieldset:disabled a.btn {
      pointer-events: none;
    }
    .btn-primary {
      color: #fff;
      background-color: #007bff;
      border-color: #007bff;
    }
    .btn-primary:hover {
      color: #fff;
      background-color: #0069d9;
      border-color: #0062cc;
    }
    .btn-primary.focus, .btn-primary:focus {
      box-shadow: 0 0 0 .2rem rgba(38,143,255,.5);
    }
    .btn-primary.disabled, .btn-primary:disabled {
      color: #fff;
      background-color: #007bff;
      border-color: #007bff;
    }
    .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
      color: #fff;
      background-color: #0062cc;
      border-color: #005cbf;
    }
    .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
      box-shadow: 0 0 0 .2rem rgba(38,143,255,.5);
    }
    .btn-secondary {
      color: #fff;
      background-color: #6c757d;
      border-color: #6c757d;
    }
    .btn-secondary:hover {
      color: #fff;
      background-color: #5a6268;
      border-color: #545b62;
    }
    .btn-secondary.focus, .btn-secondary:focus {
      box-shadow: 0 0 0 .2rem rgba(130,138,145,.5);
    }
    .btn-secondary.disabled, .btn-secondary:disabled {
      color: #fff;
      background-color: #6c757d;
      border-color: #6c757d;
    }
    .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {
      color: #fff;
      background-color: #545b62;
      border-color: #4e555b;
    }
    .btn-secondary:not(:disabled):not(.disabled).active:focus, .btn-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-secondary.dropdown-toggle:focus {
      box-shadow: 0 0 0 .2rem rgba(130,138,145,.5);
    }
    .btn-success {
      color: #fff;
      background-color: #28a745;
      border-color: #28a745;
    }
    .btn-success:hover {
      color: #fff;
      background-color: #218838;
      border-color: #1e7e34;
    }
    .btn-success.focus, .btn-success:focus {
      box-shadow: 0 0 0 .2rem rgba(72,180,97,.5);
    }
    .btn-success.disabled, .btn-success:disabled {
      color: #fff;
      background-color: #28a745;
      border-color: #28a745;
    }
    .btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show>.btn-success.dropdown-toggle {
      color: #fff;
      background-color: #1e7e34;
      border-color: #1c7430;
    }
    .btn-success:not(:disabled):not(.disabled).active:focus, .btn-success:not(:disabled):not(.disabled):active:focus, .show>.btn-success.dropdown-toggle:focus {
      box-shadow: 0 0 0 .2rem rgba(72,180,97,.5);
    }
    .btn-info {
      color: #fff;
      background-color: #17a2b8;
      border-color: #17a2b8;
    }
    .btn-info:hover {
      color: #fff;
      background-color: #138496;
      border-color: #117a8b;
    }
    .btn-info.focus, .btn-info:focus {
      box-shadow: 0 0 0 .2rem rgba(58,176,195,.5);
    }
    .btn-info.disabled, .btn-info:disabled {
      color: #fff;
      background-color: #17a2b8;
      border-color: #17a2b8;
    }
    .btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show>.btn-info.dropdown-toggle {
      color: #fff;
      background-color: #117a8b;
      border-color: #10707f;
    }
    .btn-info:not(:disabled):not(.disabled).active:focus, .btn-info:not(:disabled):not(.disabled):active:focus, .show>.btn-info.dropdown-toggle:focus {
      box-shadow: 0 0 0 .2rem rgba(58,176,195,.5);
    }
    .btn-warning {
      color: #212529;
      background-color: #ffc107;
      border-color: #ffc107;
    }
    .btn-warning:hover {
      color: #212529;
      background-color: #e0a800;
      border-color: #d39e00;
    }
    .btn-warning.focus, .btn-warning:focus {
      box-shadow: 0 0 0 .2rem rgba(222,170,12,.5);
    }
    .btn-warning.disabled, .btn-warning:disabled {
      color: #212529;
      background-color: #ffc107;
      border-color: #ffc107;
    }
    .btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active, .show>.btn-warning.dropdown-toggle {
      color: #212529;
      background-color: #d39e00;
      border-color: #c69500;
    }
    .btn-warning:not(:disabled):not(.disabled).active:focus, .btn-warning:not(:disabled):not(.disabled):active:focus, .show>.btn-warning.dropdown-toggle:focus {
      box-shadow: 0 0 0 .2rem rgba(222,170,12,.5);
    }
    .btn-danger {
      color: #fff;
      background-color: #dc3545;
      border-color: #dc3545;
    }
    .btn-danger:hover {
      color: #fff;
      background-color: #c82333;
      border-color: #bd2130;
    }
    .btn-danger.focus, .btn-danger:focus {
      box-shadow: 0 0 0 .2rem rgba(225,83,97,.5);
    }
    .btn-danger.disabled, .btn-danger:disabled {
      color: #fff;
      background-color: #dc3545;
      border-color: #dc3545;
    }
    .btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show>.btn-danger.dropdown-toggle {
      color: #fff;
      background-color: #bd2130;
      border-color: #b21f2d;
    }
    .btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus, .show>.btn-danger.dropdown-toggle:focus {
      box-shadow: 0 0 0 .2rem rgba(225,83,97,.5);
    }
    .btn-light {
      color: #212529;
      background-color: #f8f9fa;
      border-color: #f8f9fa;
    }
    .btn-light:hover {
      color: #212529;
      background-color: #e2e6ea;
      border-color: #dae0e5;
    }
    .btn-light.focus, .btn-light:focus {
      box-shadow: 0 0 0 .2rem rgba(216,217,219,.5);
    }
    .btn-light.disabled, .btn-light:disabled {
      color: #212529;
      background-color: #f8f9fa;
      border-color: #f8f9fa;
    }
    .btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show>.btn-light.dropdown-toggle {
      color: #212529;
      background-color: #dae0e5;
      border-color: #d3d9df;
    }
    .btn-light:not(:disabled):not(.disabled).active:focus, .btn-light:not(:disabled):not(.disabled):active:focus, .show>.btn-light.dropdown-toggle:focus {
      box-shadow: 0 0 0 .2rem rgba(216,217,219,.5);
    }
    .btn-dark {
      color: #fff;
      background-color: #343a40;
      border-color: #343a40;
    }
    .btn-dark:hover {
      color: #fff;
      background-color: #23272b;
      border-color: #1d2124;
    }
    .btn-dark.focus, .btn-dark:focus {
      box-shadow: 0 0 0 .2rem rgba(82,88,93,.5);
    }
    .btn-dark.disabled, .btn-dark:disabled {
      color: #fff;
      background-color: #343a40;
      border-color: #343a40;
    }
    .btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active, .show>.btn-dark.dropdown-toggle {
      color: #fff;
      background-color: #1d2124;
      border-color: #171a1d;
    }
    .btn-dark:not(:disabled):not(.disabled).active:focus, .btn-dark:not(:disabled):not(.disabled):active:focus, .show>.btn-dark.dropdown-toggle:focus {
      box-shadow: 0 0 0 .2rem rgba(82,88,93,.5);
    }
    .btn-outline-primary.disabled, .btn-outline-primary:disabled {
      color: #007bff;
      background-color: transparent;
    }
    .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle {
      color: #fff;
      background-color: #007bff;
      border-color: #007bff;
    }
    .btn-outline-primary:not(:disabled):not(.disabled).active:focus, .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-primary.dropdown-toggle:focus {
      box-shadow: 0 0 0 .2rem rgba(0,123,255,.5);
    }
    .btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
      color: #6c757d;
      background-color: transparent;
    }
    .btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show>.btn-outline-secondary.dropdown-toggle {
      color: #fff;
      background-color: #6c757d;
      border-color: #6c757d;
    }
    .btn-outline-secondary:not(:disabled):not(.disabled).active:focus, .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-secondary.dropdown-toggle:focus {
      box-shadow: 0 0 0 .2rem rgba(108,117,125,.5);
    }
    .btn-outline-success.disabled, .btn-outline-success:disabled {
      color: #28a745;
      background-color: transparent;
    }
    .btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:not(:disabled):not(.disabled):active, .show>.btn-outline-success.dropdown-toggle {
      color: #fff;
      background-color: #28a745;
      border-color: #28a745;
    }
    .btn-outline-success:not(:disabled):not(.disabled).active:focus, .btn-outline-success:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-success.dropdown-toggle:focus {
      box-shadow: 0 0 0 .2rem rgba(40,167,69,.5);
    }
    .btn-outline-info.disabled, .btn-outline-info:disabled {
      color: #17a2b8;
      background-color: transparent;
    }
    .btn-outline-info:not(:disabled):not(.disabled).active, .btn-outline-info:not(:disabled):not(.disabled):active, .show>.btn-outline-info.dropdown-toggle {
      color: #fff;
      background-color: #17a2b8;
      border-color: #17a2b8;
    }
    .btn-outline-info:not(:disabled):not(.disabled).active:focus, .btn-outline-info:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-info.dropdown-toggle:focus {
      box-shadow: 0 0 0 .2rem rgba(23,162,184,.5);
    }
    .btn-outline-warning {
      color: #ffc107;
      border-color: #ffc107;
    }
    .btn-outline-warning:hover {
      color: #212529;
      background-color: #ffc107;
      border-color: #ffc107;
    }
    .btn-outline-warning.focus, .btn-outline-warning:focus {
      box-shadow: 0 0 0 .2rem rgba(255,193,7,.5);
    }
    .btn-outline-warning.disabled, .btn-outline-warning:disabled {
      color: #ffc107;
      background-color: transparent;
    }
    .btn-outline-warning:not(:disabled):not(.disabled).active, .btn-outline-warning:not(:disabled):not(.disabled):active, .show>.btn-outline-warning.dropdown-toggle {
      color: #212529;
      background-color: #ffc107;
      border-color: #ffc107;
    }
    .btn-outline-warning:not(:disabled):not(.disabled).active:focus, .btn-outline-warning:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-warning.dropdown-toggle:focus {
      box-shadow: 0 0 0 .2rem rgba(255,193,7,.5);
    }
    .btn-outline-danger.disabled, .btn-outline-danger:disabled {
      color: #dc3545;
      background-color: transparent;
    }
    .btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active, .show>.btn-outline-danger.dropdown-toggle {
      color: #fff;
      background-color: #dc3545;
      border-color: #dc3545;
    }
    .btn-outline-danger:not(:disabled):not(.disabled).active:focus, .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-danger.dropdown-toggle:focus {
      box-shadow: 0 0 0 .2rem rgba(220,53,69,.5);
    }
    .btn-outline-light.disabled, .btn-outline-light:disabled {
      color: #f8f9fa;
      background-color: transparent;
    }
    .btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active, .show>.btn-outline-light.dropdown-toggle {
      color: #212529;
      background-color: #f8f9fa;
      border-color: #f8f9fa;
    }
    .btn-outline-light:not(:disabled):not(.disabled).active:focus, .btn-outline-light:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-light.dropdown-toggle:focus {
      box-shadow: 0 0 0 .2rem rgba(248,249,250,.5);
    }
    .btn-outline-dark {
      color: #343a40;
      border-color: #343a40;
    }
    .btn-outline-dark:hover {
      color: #fff;
      background-color: #343a40;
      border-color: #343a40;
    }
    .btn-outline-dark.focus, .btn-outline-dark:focus {
      box-shadow: 0 0 0 .2rem rgba(52,58,64,.5);
    }
    .btn-outline-dark.disabled, .btn-outline-dark:disabled {
      color: #343a40;
      background-color: transparent;
    }
    .btn-outline-dark:not(:disabled):not(.disabled).active, .btn-outline-dark:not(:disabled):not(.disabled):active, .show>.btn-outline-dark.dropdown-toggle {
      color: #fff;
      background-color: #343a40;
      border-color: #343a40;
    }
    .btn-outline-dark:not(:disabled):not(.disabled).active:focus, .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .show>.btn-outline-dark.dropdown-toggle:focus {
      box-shadow: 0 0 0 .2rem rgba(52,58,64,.5);
    }
    .btn-link {
      font-weight: 400;
      color: #007bff;
      text-decoration: none;
    }
    .btn-link:hover {
      color: #0056b3;
      text-decoration: underline;
    }
    .btn-link.focus, .btn-link:focus {
      text-decoration: underline;
      box-shadow: none;
    }
    .btn-link.disabled, .btn-link:disabled {
      color: #6c757d;
      pointer-events: none;
    }
    .btn-group-lg>.btn, .btn-lg {
      padding: .5rem 1rem;
      font-size: 1.25rem;
      line-height: 1.5;
      border-radius: .3rem;
    }
    .btn-group-sm>.btn, .btn-sm {
      padding: .25rem .5rem;
      font-size: .875rem;
      line-height: 1.5;
      border-radius: .2rem;
    }
    .dropdown-item.active, .dropdown-item:active {
      color: #fff;
      text-decoration: none;
      background-color: #007bff;
    }
    .dropdown-item.disabled, .dropdown-item:disabled {
      color: #6c757d;
      pointer-events: none;
      background-color: transparent;
    }
    .btn-group-vertical>.btn, .btn-group>.btn {
      position: relative;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
    }
    .btn-group-vertical>.btn:hover, .btn-group>.btn:hover {
      z-index: 1;
    }
    .btn-group-vertical>.btn.active, .btn-group-vertical>.btn:active, .btn-group-vertical>.btn:focus, .btn-group>.btn.active, .btn-group>.btn:active, .btn-group>.btn:focus {
      z-index: 1;
    }
    .btn-toolbar .input-group {
      width: auto;
    }
    .btn-group>.btn-group:not(:first-child), .btn-group>.btn:not(:first-child) {
      margin-left: -1px;
    }
    .btn-group>.btn-group:not(:last-child)>.btn, .btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    .btn-group>.btn-group:not(:first-child)>.btn, .btn-group>.btn:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .btn-group-sm>.btn+.dropdown-toggle-split, .btn-sm+.dropdown-toggle-split {
      padding-right: .375rem;
      padding-left: .375rem;
    }
    .btn-group-lg>.btn+.dropdown-toggle-split, .btn-lg+.dropdown-toggle-split {
      padding-right: .75rem;
      padding-left: .75rem;
    }
    .btn-group-vertical>.btn, .btn-group-vertical>.btn-group {
      width: 100%;
    }
    .btn-group-vertical>.btn-group:not(:first-child), .btn-group-vertical>.btn:not(:first-child) {
      margin-top: -1px;
    }
    .btn-group-vertical>.btn-group:not(:last-child)>.btn, .btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle) {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }
    .btn-group-vertical>.btn-group:not(:first-child)>.btn, .btn-group-vertical>.btn:not(:first-child) {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    .btn-group-toggle>.btn, .btn-group-toggle>.btn-group>.btn {
      margin-bottom: 0;
    }
    .btn-group-toggle>.btn input[type=checkbox], .btn-group-toggle>.btn input[type=radio], .btn-group-toggle>.btn-group>.btn input[type=checkbox], .btn-group-toggle>.btn-group>.btn input[type=radio] {
      position: absolute;
      clip: rect(0,0,0,0);
      pointer-events: none;
    }
    .input-group {
      position: relative;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -ms-flex-align: stretch;
      align-items: stretch;
      width: 100%;
    }
    .input-group>.custom-file, .input-group>.custom-select, .input-group>.form-control, .input-group>.form-control-plaintext {
      position: relative;
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      width: 1%;
      margin-bottom: 0;
    }
    .input-group>.custom-file+.custom-file, .input-group>.custom-file+.custom-select, .input-group>.custom-file+.form-control, .input-group>.custom-select+.custom-file, .input-group>.custom-select+.custom-select, .input-group>.custom-select+.form-control, .input-group>.form-control+.custom-file, .input-group>.form-control+.custom-select, .input-group>.form-control+.form-control, .input-group>.form-control-plaintext+.custom-file, .input-group>.form-control-plaintext+.custom-select, .input-group>.form-control-plaintext+.form-control {
      margin-left: -1px;
    }
    .input-group>.custom-file .custom-file-input:focus~.custom-file-label, .input-group>.custom-select:focus, .input-group>.form-control:focus {
      z-index: 3;
    }
    .input-group>.custom-file .custom-file-input:focus {
      z-index: 4;
    }
    .input-group>.custom-select:not(:last-child), .input-group>.form-control:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    .input-group>.custom-select:not(:first-child), .input-group>.form-control:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .input-group>.custom-file {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
      align-items: center;
    }
    .input-group>.custom-file:not(:last-child) .custom-file-label, .input-group>.custom-file:not(:last-child) .custom-file-label::after {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    .input-group>.custom-file:not(:first-child) .custom-file-label {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .input-group-append, .input-group-prepend {
      display: -ms-flexbox;
      display: flex;
    }
    .input-group-append .btn, .input-group-prepend .btn {
      position: relative;
      z-index: 2;
    }
    .input-group-append .btn:focus, .input-group-prepend .btn:focus {
      z-index: 3;
    }
    .input-group-append .btn+.btn, .input-group-append .btn+.input-group-text, .input-group-append .input-group-text+.btn, .input-group-append .input-group-text+.input-group-text, .input-group-prepend .btn+.btn, .input-group-prepend .btn+.input-group-text, .input-group-prepend .input-group-text+.btn, .input-group-prepend .input-group-text+.input-group-text {
      margin-left: -1px;
    }
    .input-group-append {
      margin-left: -1px;
    }
    .input-group-lg>.custom-select, .input-group-lg>.form-control:not(textarea) {
      height: calc(1.5em + 1rem + 2px);
    }
    .input-group-lg>.custom-select, .input-group-lg>.form-control, .input-group-lg>.input-group-append>.btn, .input-group-lg>.input-group-append>.input-group-text, .input-group-lg>.input-group-prepend>.btn, .input-group-lg>.input-group-prepend>.input-group-text {
      padding: .5rem 1rem;
      font-size: 1.25rem;
      line-height: 1.5;
      border-radius: .3rem;
    }
    .input-group-sm>.custom-select, .input-group-sm>.form-control:not(textarea) {
      height: calc(1.5em + .5rem + 2px);
    }
    .input-group-sm>.custom-select, .input-group-sm>.form-control, .input-group-sm>.input-group-append>.btn, .input-group-sm>.input-group-append>.input-group-text, .input-group-sm>.input-group-prepend>.btn, .input-group-sm>.input-group-prepend>.input-group-text {
      padding: .25rem .5rem;
      font-size: .875rem;
      line-height: 1.5;
      border-radius: .2rem;
    }
    .input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle), .input-group>.input-group-append:last-child>.input-group-text:not(:last-child), .input-group>.input-group-append:not(:last-child)>.btn, .input-group>.input-group-append:not(:last-child)>.input-group-text, .input-group>.input-group-prepend>.btn, .input-group>.input-group-prepend>.input-group-text {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    .input-group>.input-group-append>.btn, .input-group>.input-group-append>.input-group-text, .input-group>.input-group-prepend:first-child>.btn:not(:first-child), .input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child), .input-group>.input-group-prepend:not(:first-child)>.btn, .input-group>.input-group-prepend:not(:first-child)>.input-group-text {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .custom-control {
      position: relative;
      display: block;
      min-height: 1.5rem;
      padding-left: 1.5rem;
    }
    .custom-control-inline {
      display: -ms-inline-flexbox;
      display: inline-flex;
      margin-right: 1rem;
    }
    .custom-control-input {
      position: absolute;
      z-index: -1;
      opacity: 0;
    }
    .custom-control-input:checked~.custom-control-label::before {
      color: #fff;
      border-color: #007bff;
      background-color: #007bff;
    }
    .custom-control-input:focus~.custom-control-label::before {
      box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
    }
    .custom-control-input:focus:not(:checked)~.custom-control-label::before {
      border-color: #80bdff;
    }
    .custom-control-input:not(:disabled):active~.custom-control-label::before {
      color: #fff;
      background-color: #b3d7ff;
      border-color: #b3d7ff;
    }
    .custom-control-input:disabled~.custom-control-label {
      color: #6c757d;
    }
    .custom-control-input:disabled~.custom-control-label::before {
      background-color: #e9ecef;
    }
    .custom-control-label {
      position: relative;
      margin-bottom: 0;
      vertical-align: top;
    }
    .custom-control-label::before {
      position: absolute;
      top: .25rem;
      left: -1.5rem;
      display: block;
      width: 1rem;
      height: 1rem;
      pointer-events: none;
      content: "";
      background-color: #fff;
      border: #adb5bd solid 1px;
    }
    .custom-control-label::after {
      position: absolute;
      top: .25rem;
      left: -1.5rem;
      display: block;
      width: 1rem;
      height: 1rem;
      content: "";
      background: no-repeat 50%/50% 50%;
    }
    .custom-checkbox .custom-control-label::before {
      border-radius: .25rem;
    }
    .custom-checkbox .custom-control-input:checked~.custom-control-label::after {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e");
    }
    .custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before {
      border-color: #007bff;
      background-color: #007bff;
    }
    .custom-checkbox .custom-control-input:indeterminate~.custom-control-label::after {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
    }
    .custom-checkbox .custom-control-input:disabled:checked~.custom-control-label::before {
      background-color: rgba(0,123,255,.5);
    }
    .custom-checkbox .custom-control-input:disabled:indeterminate~.custom-control-label::before {
      background-color: rgba(0,123,255,.5);
    }
    .custom-radio .custom-control-label::before {
      border-radius: 50%;
    }
    .custom-radio .custom-control-input:checked~.custom-control-label::after {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    }
    .custom-radio .custom-control-input:disabled:checked~.custom-control-label::before {
      background-color: rgba(0,123,255,.5);
    }
    .custom-switch .custom-control-label::before {
      left: -2.25rem;
      width: 1.75rem;
      pointer-events: all;
      border-radius: .5rem;
    }
    .custom-switch .custom-control-label::after {
      top: calc(.25rem + 2px);
      left: calc(-2.25rem + 2px);
      width: calc(1rem - 4px);
      height: calc(1rem - 4px);
      background-color: #adb5bd;
      border-radius: .5rem;
      transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-transform .15s ease-in-out;
      transition: transform .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
      transition: transform .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-transform .15s ease-in-out;
    }
    @media (prefers-reduced-motion:reduce) {
      .custom-switch .custom-control-label::after {
        transition: none;
      }
    }
    .custom-switch .custom-control-input:checked~.custom-control-label::after {
      background-color: #fff;
      -webkit-transform: translateX(.75rem);
      transform: translateX(.75rem);
    }
    .custom-switch .custom-control-input:disabled:checked~.custom-control-label::before {
      background-color: rgba(0,123,255,.5);
    }
    .custom-control-label::before, .custom-file-label, .custom-select {
      transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }
    @media (prefers-reduced-motion:reduce) {
      .custom-control-label::before, .custom-file-label, .custom-select {
        transition: none;
      }
    }
    .nav {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      padding-left: 0;
      margin-bottom: 0;
      list-style: none;
    }
    .nav-link {
      display: block;
      padding: .5rem 1rem;
    }
    .nav-link:focus, .nav-link:hover {
      text-decoration: none;
    }
    .nav-link.disabled {
      color: #6c757d;
      pointer-events: none;
      cursor: default;
    }
    .nav-tabs {
      border-bottom: 1px solid #dee2e6;
    }
    .nav-tabs .nav-item {
      margin-bottom: -1px;
    }
    .nav-tabs .nav-link {
      border: 1px solid transparent;
      border-top-left-radius: .25rem;
      border-top-right-radius: .25rem;
    }
    .nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
      border-color: #e9ecef #e9ecef #dee2e6;
    }
    .nav-tabs .nav-link.disabled {
      color: #6c757d;
      background-color: transparent;
      border-color: transparent;
    }
    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
      color: #495057;
      background-color: #fff;
      border-color: #dee2e6 #dee2e6 #fff;
    }
    .nav-tabs .dropdown-menu {
      margin-top: -1px;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    .nav-pills .nav-link {
      border-radius: .25rem;
    }
    .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
      color: #fff;
      background-color: #007bff;
    }
    .nav-fill .nav-item {
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      text-align: center;
    }
    .nav-justified .nav-item {
      -ms-flex-preferred-size: 0;
      flex-basis: 0;
      -ms-flex-positive: 1;
      flex-grow: 1;
      text-align: center;
    }
    .tab-content>.active {
      display: block;
    }
    .navbar>.container, .navbar>.container-fluid {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -ms-flex-align: center;
      align-items: center;
      -ms-flex-pack: justify;
      justify-content: space-between;
    }
    .navbar-nav .nav-link {
      padding-right: 0;
      padding-left: 0;
    }
    @media (max-width:575.98px) {
      .navbar-expand-sm>.container, .navbar-expand-sm>.container-fluid {
        padding-right: 0;
        padding-left: 0;
      }
    }
    @media (min-width:576px) {
      .navbar-expand-sm .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
      }
      .navbar-expand-sm>.container, .navbar-expand-sm>.container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
      }
    }
    @media (max-width:767.98px) {
      .navbar-expand-md>.container, .navbar-expand-md>.container-fluid {
        padding-right: 0;
        padding-left: 0;
      }
    }
    @media (min-width:768px) {
      .navbar-expand-md .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
      }
      .navbar-expand-md>.container, .navbar-expand-md>.container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
      }
    }
    @media (max-width:991.98px) {
      .navbar-expand-lg>.container, .navbar-expand-lg>.container-fluid {
        padding-right: 0;
        padding-left: 0;
      }
    }
    @media (min-width:992px) {
      .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
      }
      .navbar-expand-lg>.container, .navbar-expand-lg>.container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
      }
    }
    @media (max-width:1199.98px) {
      .navbar-expand-xl>.container, .navbar-expand-xl>.container-fluid {
        padding-right: 0;
        padding-left: 0;
      }
    }
    @media (min-width:1200px) {
      .navbar-expand-xl .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
      }
      .navbar-expand-xl>.container, .navbar-expand-xl>.container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
      }
    }
    .navbar-expand>.container, .navbar-expand>.container-fluid {
      padding-right: 0;
      padding-left: 0;
    }
    .navbar-expand .navbar-nav .nav-link {
      padding-right: .5rem;
      padding-left: .5rem;
    }
    .navbar-expand>.container, .navbar-expand>.container-fluid {
      -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
    }
    .navbar-light .navbar-nav .nav-link {
      color: rgba(0,0,0,.5);
    }
    .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
      color: rgba(0,0,0,.7);
    }
    .navbar-light .navbar-nav .nav-link.disabled {
      color: rgba(0,0,0,.3);
    }
    .navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
      color: rgba(0,0,0,.9);
    }
    .navbar-dark .navbar-nav .nav-link {
      color: rgba(255,255,255,.5);
    }
    .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
      color: rgba(255,255,255,.75);
    }
    .navbar-dark .navbar-nav .nav-link.disabled {
      color: rgba(255,255,255,.25);
    }
    .navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link {
      color: #fff;
    }
    .card {
      position: relative;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column;
      min-width: 0;
      word-wrap: break-word;
      background-color: #fff;
      background-clip: border-box;
      border: 1px solid rgba(0,0,0,.125);
      border-radius: .25rem;
    }
    .card>hr {
      margin-right: 0;
      margin-left: 0;
    }
    .card>.list-group:first-child .list-group-item:first-child {
      border-top-left-radius: .25rem;
      border-top-right-radius: .25rem;
    }
    .card>.list-group:last-child .list-group-item:last-child {
      border-bottom-right-radius: .25rem;
      border-bottom-left-radius: .25rem;
    }
    .card-body {
      -ms-flex: 1 1 auto;
      flex: 1 1 auto;
      padding: 1.25rem;
    }
    .card-title {
      margin-bottom: .75rem;
    }
    .card-subtitle {
      margin-top: -.375rem;
      margin-bottom: 0;
    }
    .card-text:last-child {
      margin-bottom: 0;
    }
    .card-header {
      padding: .75rem 1.25rem;
      margin-bottom: 0;
      background-color: rgba(0,0,0,.03);
      border-bottom: 1px solid rgba(0,0,0,.125);
    }
    .card-header:first-child {
      border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
    }
    .card-header+.list-group .list-group-item:first-child {
      border-top: 0;
    }
    .card-footer {
      padding: .75rem 1.25rem;
      background-color: rgba(0,0,0,.03);
      border-top: 1px solid rgba(0,0,0,.125);
    }
    .card-footer:last-child {
      border-radius: 0 0 calc(.25rem - 1px) calc(.25rem - 1px);
    }
    .card-img {
      width: 100%;
      border-radius: calc(.25rem - 1px);
    }
    .card-img-top {
      width: 100%;
      border-top-left-radius: calc(.25rem - 1px);
      border-top-right-radius: calc(.25rem - 1px);
    }
    .card-deck .card {
      margin-bottom: 15px;
    }
    @media (min-width:576px) {
      .card-deck .card {
        display: -ms-flexbox;
        display: flex;
        -ms-flex: 1 0 0%;
        flex: 1 0 0%;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-right: 15px;
        margin-bottom: 0;
        margin-left: 15px;
      }
    }
    .card-group>.card {
      margin-bottom: 15px;
    }
    @media (min-width:576px) {
      .card-group>.card {
        -ms-flex: 1 0 0%;
        flex: 1 0 0%;
        margin-bottom: 0;
      }
      .card-group>.card+.card {
        margin-left: 0;
        border-left: 0;
      }
      .card-group>.card:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
      .card-group>.card:not(:last-child) .card-header, .card-group>.card:not(:last-child) .card-img-top {
        border-top-right-radius: 0;
      }
      .card-group>.card:not(:last-child) .card-footer, .card-group>.card:not(:last-child) .card-img-bottom {
        border-bottom-right-radius: 0;
      }
      .card-group>.card:not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
      .card-group>.card:not(:first-child) .card-header, .card-group>.card:not(:first-child) .card-img-top {
        border-top-left-radius: 0;
      }
      .card-group>.card:not(:first-child) .card-footer, .card-group>.card:not(:first-child) .card-img-bottom {
        border-bottom-left-radius: 0;
      }
    }
    .card-columns .card {
      margin-bottom: .75rem;
    }
    @media (min-width:576px) {
      .card-columns .card {
        display: inline-block;
        width: 100%;
      }
    }
    .accordion>.card {
      overflow: hidden;
    }
    .accordion>.card:not(:first-of-type) .card-header:first-child {
      border-radius: 0;
    }
    .accordion>.card:not(:first-of-type):not(:last-of-type) {
      border-bottom: 0;
      border-radius: 0;
    }
    .accordion>.card:first-of-type {
      border-bottom: 0;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }
    .accordion>.card:last-of-type {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
    .accordion>.card .card-header {
      margin-bottom: -1px;
    }
    .breadcrumb-item.active {
      color: #6c757d;
    }
    .pagination {
      display: -ms-flexbox;
      display: flex;
      padding-left: 0;
      list-style: none;
      border-radius: .25rem;
    }
    .page-link {
      position: relative;
      display: block;
      padding: .5rem .75rem;
      margin-left: -1px;
      line-height: 1.25;
      color: #007bff;
      background-color: #fff;
      border: 1px solid #dee2e6;
    }
    .page-link:hover {
      z-index: 2;
      color: #0056b3;
      text-decoration: none;
      background-color: #e9ecef;
      border-color: #dee2e6;
    }
    .page-link:focus {
      z-index: 2;
      outline: 0;
      box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
    }
    .page-item:first-child .page-link {
      margin-left: 0;
      border-top-left-radius: .25rem;
      border-bottom-left-radius: .25rem;
    }
    .page-item:last-child .page-link {
      border-top-right-radius: .25rem;
      border-bottom-right-radius: .25rem;
    }
    .page-item.active .page-link {
      z-index: 1;
      color: #fff;
      background-color: #007bff;
      border-color: #007bff;
    }
    .page-item.disabled .page-link {
      color: #6c757d;
      pointer-events: none;
      cursor: auto;
      background-color: #fff;
      border-color: #dee2e6;
    }
    .pagination-lg .page-link {
      padding: .75rem 1.5rem;
      font-size: 1.25rem;
      line-height: 1.5;
    }
    .pagination-lg .page-item:first-child .page-link {
      border-top-left-radius: .3rem;
      border-bottom-left-radius: .3rem;
    }
    .pagination-lg .page-item:last-child .page-link {
      border-top-right-radius: .3rem;
      border-bottom-right-radius: .3rem;
    }
    .pagination-sm .page-link {
      padding: .25rem .5rem;
      font-size: .875rem;
      line-height: 1.5;
    }
    .pagination-sm .page-item:first-child .page-link {
      border-top-left-radius: .2rem;
      border-bottom-left-radius: .2rem;
    }
    .pagination-sm .page-item:last-child .page-link {
      border-top-right-radius: .2rem;
      border-bottom-right-radius: .2rem;
    }
    .badge {
      display: inline-block;
      padding: .25em .4em;
      font-size: 75%;
      font-weight: 700;
      line-height: 1;
      text-align: center;
      white-space: nowrap;
      vertical-align: baseline;
      border-radius: .25rem;
      transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }
    @media (prefers-reduced-motion:reduce) {
      .badge {
        transition: none;
      }
    }
    a.badge:focus, a.badge:hover {
      text-decoration: none;
    }
    .badge:empty {
      display: none;
    }
    .btn .badge {
      position: relative;
      top: -1px;
    }
    .badge-pill {
      padding-right: .6em;
      padding-left: .6em;
      border-radius: 10rem;
    }
    .badge-primary {
      color: #fff;
      background-color: #007bff;
    }
    a.badge-primary:focus, a.badge-primary:hover {
      color: #fff;
      background-color: #0062cc;
    }
    a.badge-primary.focus, a.badge-primary:focus {
      outline: 0;
      box-shadow: 0 0 0 .2rem rgba(0,123,255,.5);
    }
    .badge-secondary {
      color: #fff;
      background-color: #6c757d;
    }
    a.badge-secondary:focus, a.badge-secondary:hover {
      color: #fff;
      background-color: #545b62;
    }
    a.badge-secondary.focus, a.badge-secondary:focus {
      outline: 0;
      box-shadow: 0 0 0 .2rem rgba(108,117,125,.5);
    }
    .badge-success {
      color: #fff;
      background-color: #28a745;
    }
    a.badge-success:focus, a.badge-success:hover {
      color: #fff;
      background-color: #1e7e34;
    }
    a.badge-success.focus, a.badge-success:focus {
      outline: 0;
      box-shadow: 0 0 0 .2rem rgba(40,167,69,.5);
    }
    .badge-info {
      color: #fff;
      background-color: #17a2b8;
    }
    a.badge-info:focus, a.badge-info:hover {
      color: #fff;
      background-color: #117a8b;
    }
    a.badge-info.focus, a.badge-info:focus {
      outline: 0;
      box-shadow: 0 0 0 .2rem rgba(23,162,184,.5);
    }
    .badge-warning {
      color: #212529;
      background-color: #ffc107;
    }
    a.badge-warning:focus, a.badge-warning:hover {
      color: #212529;
      background-color: #d39e00;
    }
    a.badge-warning.focus, a.badge-warning:focus {
      outline: 0;
      box-shadow: 0 0 0 .2rem rgba(255,193,7,.5);
    }
    .badge-danger {
      color: #fff;
      background-color: #dc3545;
    }
    a.badge-danger:focus, a.badge-danger:hover {
      color: #fff;
      background-color: #bd2130;
    }
    a.badge-danger.focus, a.badge-danger:focus {
      outline: 0;
      box-shadow: 0 0 0 .2rem rgba(220,53,69,.5);
    }
    .jumbotron {
      padding: 2rem 1rem;
      margin-bottom: 2rem;
      background-color: #e9ecef;
      border-radius: .3rem;
    }
    @media (min-width:576px) {
      .jumbotron {
        padding: 4rem 2rem;
      }
    }
    .alert {
      position: relative;
      padding: .75rem 1.25rem;
      margin-bottom: 1rem;
      border: 1px solid transparent;
      border-radius: .25rem;
    }
    .alert-primary {
      color: #004085;
      background-color: #cce5ff;
      border-color: #b8daff;
    }
    .alert-primary hr {
      border-top-color: #9fcdff;
    }
    .alert-primary .alert-link {
      color: #002752;
    }
    .alert-secondary {
      color: #383d41;
      background-color: #e2e3e5;
      border-color: #d6d8db;
    }
    .alert-secondary hr {
      border-top-color: #c8cbcf;
    }
    .alert-secondary .alert-link {
      color: #202326;
    }
    .alert-success {
      color: #155724;
      background-color: #d4edda;
      border-color: #c3e6cb;
    }
    .alert-success hr {
      border-top-color: #b1dfbb;
    }
    .alert-success .alert-link {
      color: #0b2e13;
    }
    .alert-warning {
      color: #856404;
      background-color: #fff3cd;
      border-color: #ffeeba;
    }
    .alert-warning hr {
      border-top-color: #ffe8a1;
    }
    .alert-warning .alert-link {
      color: #533f03;
    }
    .progress {
      display: -ms-flexbox;
      display: flex;
      height: 1rem;
      overflow: hidden;
      font-size: .75rem;
      background-color: #e9ecef;
      border-radius: .25rem;
    }
    .progress-bar {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column;
      -ms-flex-pack: center;
      justify-content: center;
      color: #fff;
      text-align: center;
      white-space: nowrap;
      background-color: #007bff;
      transition: width .6s ease;
    }
    @media (prefers-reduced-motion:reduce) {
      .progress-bar {
        transition: none;
      }
    }
    .media {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: start;
      align-items: flex-start;
    }
    .media-body {
      -ms-flex: 1;
      flex: 1;
    }
    .list-group-item.disabled, .list-group-item:disabled {
      color: #6c757d;
      pointer-events: none;
      background-color: #fff;
    }
    .list-group-item.active {
      z-index: 2;
      color: #fff;
      background-color: #007bff;
      border-color: #007bff;
    }
    .list-group-item-primary.list-group-item-action.active {
      color: #fff;
      background-color: #004085;
      border-color: #004085;
    }
    .list-group-item-secondary.list-group-item-action.active {
      color: #fff;
      background-color: #383d41;
      border-color: #383d41;
    }
    .list-group-item-success.list-group-item-action.active {
      color: #fff;
      background-color: #155724;
      border-color: #155724;
    }
    .list-group-item-info.list-group-item-action.active {
      color: #fff;
      background-color: #0c5460;
      border-color: #0c5460;
    }
    .list-group-item-warning.list-group-item-action.active {
      color: #fff;
      background-color: #856404;
      border-color: #856404;
    }
    .list-group-item-danger.list-group-item-action.active {
      color: #fff;
      background-color: #721c24;
      border-color: #721c24;
    }
    .list-group-item-light.list-group-item-action.active {
      color: #fff;
      background-color: #818182;
      border-color: #818182;
    }
    .list-group-item-dark.list-group-item-action.active {
      color: #fff;
      background-color: #1b1e21;
      border-color: #1b1e21;
    }
    .close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover {
      opacity: .75;
    }
    a.close.disabled {
      pointer-events: none;
    }
    .carousel-item-next, .carousel-item-prev, .carousel-item.active {
      display: block;
    }
    .active.carousel-item-right, .carousel-item-next:not(.carousel-item-left) {
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
    .active.carousel-item-left, .carousel-item-prev:not(.carousel-item-right) {
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }
    .carousel-fade .carousel-item-next.carousel-item-left, .carousel-fade .carousel-item-prev.carousel-item-right, .carousel-fade .carousel-item.active {
      z-index: 1;
      opacity: 1;
    }
    .carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-right {
      z-index: 0;
      opacity: 0;
      transition: 0s .6s opacity;
    }
    @media (prefers-reduced-motion:reduce) {
      .carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-right {
        transition: none;
      }
    }
    .carousel-indicators .active {
      opacity: 1;
    }
    .spinner-border {
      display: inline-block;
      width: 2rem;
      height: 2rem;
      vertical-align: text-bottom;
      border: .25em solid currentColor;
      border-right-color: transparent;
      border-radius: 50%;
      -webkit-animation: spinner-border .75s linear infinite;
      animation: spinner-border .75s linear infinite;
    }
    @media print {
      a:not(.btn) {
        text-decoration: underline;
      }
      .badge {
        border: 1px solid #000;
      }
      .table td, .table th {
        background-color: #fff;
      }
      .table-bordered td, .table-bordered th {
        border: 1px solid #dee2e6;
      }
      .table .thead-dark th {
        color: inherit;
        border-color: #dee2e6;
      }
    }
  }
}
@layer utilities {
  :where(.learner-app) {
    .small {
      font-size: 80%;
      font-weight: 400;
    }
    .list-inline {
      padding-left: 0;
      list-style: none;
    }
    .list-inline-item {
      display: inline-block;
    }
    .list-inline-item:not(:last-child) {
      margin-right: .5rem;
    }
    .img-fluid {
      max-width: 100%;
      height: auto;
    }
    .table-responsive {
      display: block;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .bg-secondary {
      background-color: #6c757d;
    }
    a.bg-secondary:focus, a.bg-secondary:hover, button.bg-secondary:focus, button.bg-secondary:hover {
      background-color: #545b62;
    }
    .bg-success {
      background-color: #28a745;
    }
    a.bg-success:focus, a.bg-success:hover, button.bg-success:focus, button.bg-success:hover {
      background-color: #1e7e34;
    }
    .bg-info {
      background-color: #17a2b8;
    }
    a.bg-info:focus, a.bg-info:hover, button.bg-info:focus, button.bg-info:hover {
      background-color: #117a8b;
    }
    .bg-warning {
      background-color: #ffc107;
    }
    a.bg-warning:focus, a.bg-warning:hover, button.bg-warning:focus, button.bg-warning:hover {
      background-color: #d39e00;
    }
    .bg-danger {
      background-color: #dc3545;
    }
    a.bg-danger:focus, a.bg-danger:hover, button.bg-danger:focus, button.bg-danger:hover {
      background-color: #bd2130;
    }
    .bg-light {
      background-color: #f8f9fa;
    }
    a.bg-light:focus, a.bg-light:hover, button.bg-light:focus, button.bg-light:hover {
      background-color: #dae0e5;
    }
    .bg-dark {
      background-color: #343a40;
    }
    a.bg-dark:focus, a.bg-dark:hover, button.bg-dark:focus, button.bg-dark:hover {
      background-color: #1d2124;
    }
    .border-top {
      border-top: 1px solid #dee2e6;
    }
    .border-right {
      border-right: 1px solid #dee2e6;
    }
    .border-bottom {
      border-bottom: 1px solid #dee2e6;
    }
    .border-left {
      border-left: 1px solid #dee2e6;
    }
    .border-warning {
      border-color: #ffc107;
    }
    .border-dark {
      border-color: #343a40;
    }
    .justify-content-center {
      -ms-flex-pack: center;
      justify-content: center;
    }
    .w-25 {
      width: 25%;
    }
    .w-50 {
      width: 50%;
    }
    .w-75 {
      width: 75%;
    }
    .mb-0 {
      margin-bottom: 0;
    }
    .m-1 {
      margin: .25rem;
    }
    .mt-1 {
      margin-top: .25rem;
    }
    .mr-1 {
      margin-right: .25rem;
    }
    .mt-2 {
      margin-top: .5rem;
    }
    .mr-2, .mx-2 {
      margin-right: .5rem;
    }
    .mx-2 {
      margin-left: .5rem;
    }
    .m-3 {
      margin: 1rem;
    }
    .mt-3 {
      margin-top: 1rem;
    }
    .mr-3, .mx-3 {
      margin-right: 1rem;
    }
    .mx-3 {
      margin-left: 1rem;
    }
    .mr-4 {
      margin-right: 1.5rem;
    }
    .m-5 {
      margin: 3rem;
    }
    .mr-5, .mx-5 {
      margin-right: 3rem;
    }
    .ml-5, .mx-5 {
      margin-left: 3rem;
    }
    .pr-2 {
      padding-right: .5rem;
    }
    .p-5 {
      padding: 3rem;
    }
    .pl-5 {
      padding-left: 3rem;
    }
    .my-n2 {
      margin-top: -.5rem;
    }
    @media (min-width:768px) {
      .m-md-1 {
        margin: .25rem;
      }
      .mt-md-1, .my-md-1 {
        margin-top: .25rem;
      }
      .mb-md-1, .my-md-1 {
        margin-bottom: .25rem;
      }
      .mr-md-2, .mx-md-2 {
        margin-right: .5rem;
      }
      .mt-md-3, .my-md-3 {
        margin-top: 1rem;
      }
    }
    @media (min-width:992px) {
      .m-lg-0 {
        margin: 0;
      }
      .mr-lg-3, .mx-lg-3 {
        margin-right: 1rem;
      }
      .mr-lg-4, .mx-lg-4 {
        margin-right: 1.5rem;
      }
      .mr-lg-5, .mx-lg-5 {
        margin-right: 3rem;
      }
      .ml-lg-5, .mx-lg-5 {
        margin-left: 3rem;
      }
      .pt-lg-1, .py-lg-1 {
        padding-top: .25rem;
      }
      .pb-lg-1, .py-lg-1 {
        padding-bottom: .25rem;
      }
      .pr-lg-2, .px-lg-2 {
        padding-right: .5rem;
      }
      .pl-lg-2, .px-lg-2 {
        padding-left: .5rem;
      }
    }
    @media (min-width:1200px) {
      .mt-xl-1, .my-xl-1 {
        margin-top: .25rem;
      }
      .mb-xl-1, .my-xl-1 {
        margin-bottom: .25rem;
      }
      .mr-xl-5, .mx-xl-5 {
        margin-right: 3rem;
      }
      .mb-xl-5, .my-xl-5 {
        margin-bottom: 3rem;
      }
      .ml-xl-5, .mx-xl-5 {
        margin-left: 3rem;
      }
    }
    .text-center {
      text-align: center;
    }
    .font-weight-light {
      font-weight: 300;
    }
    .font-weight-normal {
      font-weight: 400;
    }
    .text-white {
      color: #fff;
    }
    .text-primary {
      color: #007bff;
    }
    a.text-primary:focus, a.text-primary:hover {
      color: #0056b3;
    }
    .text-success {
      color: #28a745;
    }
    a.text-success:focus, a.text-success:hover {
      color: #19692c;
    }
    .text-info {
      color: #17a2b8;
    }
    a.text-info:focus, a.text-info:hover {
      color: #0f6674;
    }
    .text-warning {
      color: #ffc107;
    }
    a.text-warning:focus, a.text-warning:hover {
      color: #ba8b00;
    }
    .text-danger {
      color: #dc3545;
    }
    a.text-danger:focus, a.text-danger:hover {
      color: #a71d2a;
    }
    .text-light {
      color: #f8f9fa;
    }
    a.text-light:focus, a.text-light:hover {
      color: #cbd3da;
    }
    .text-dark {
      color: #343a40;
    }
    a.text-dark:focus, a.text-dark:hover {
      color: #121416;
    }
    .text-muted {
      color: #6c757d;
    }
  }
}
@layer legacy-utilities {
  :where(.learner-app) {
    .container {
      width: 100%;
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
    }
    @media (min-width:576px) {
      .container {
        max-width: 540px;
      }
    }
    @media (min-width:768px) {
      .container {
        max-width: 720px;
      }
    }
    @media (min-width:992px) {
      .container {
        max-width: 960px;
      }
    }
    @media (min-width:1200px) {
      .container {
        max-width: 1140px;
      }
    }
    .table {
      width: 100%;
      margin-bottom: 1rem;
      color: #212529;
    }
    @media print {
      .container {
        min-width: 992px;
      }
      .table {
        border-collapse: collapse;
      }
    }
  }
}
@layer base {
  .learner-app {
    display: contents;
  }
  html:where(:has(.learner-app)) {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }
  body:where(:has(.learner-app)) {
    background-color: #fff;
  }
  body:where(:has(.learner-app)) {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
  }
  @media print {
    body:where(:has(.learner-app)) {
      min-width: 992px;
    }
  }
}
@layer base {
  :where(.learner-app) {
    table {
      border-collapse: collapse;
      margin: 25px 0;
      min-width: 400px;
      box-shadow: 0 0 20px var(--table-box-shadow-color);
      border-radius: 1rem;
      overflow: hidden;
    }
    table thead {
      border-bottom: 2px solid var(--table-header-border-color);
    }
    table thead tr {
      background-color: var(--table-header-background-color);
      color: var(--table-data-text-color);
      text-align: left;
      font-family: henderson-slab-basic, serif;
      font-size: 50%;
      border-bottom: 2px solid var(--table-header-border-color);
    }
    table th, table td {
      padding: 12px 15px;
      font-family: henderson-slab-basic, serif;
      font-size: 50%;
    }
    button {
      border-radius: 1.8rem;
      font-family: "Cubano", sans-serif;
      margin-right: 5px;
      color: var(--light-text-color);
      background-color: var(--primary-color);
      border-color: var(--primary-color);
    }
    label {
      font-weight: 800;
      margin-bottom: 0.2rem;
    }
    input[type=checkbox] {
      margin-right: 1.8rem;
      height: inherit;
      display: inline;
      position: relative;
    }
    input[type=checkbox]:active, input[type=checkbox]:focus {
      box-shadow: none;
    }
    input[type=checkbox]:after {
      content: "";
      width: 30px;
      height: 30px;
      background-color: var(--checkbox-color);
      border: 2px solid var(--checkbox-color);
      z-index: 1;
      opacity: 100%;
      position: relative;
      display: block;
      margin-top: -50%;
      margin-left: -50%;
      border-radius: 0.5rem;
      transition: all ease 0.3s;
      cursor: pointer;
    }
    input[type=checkbox]:checked:after {
      content: "✓";
      width: 30px;
      height: 30px;
      background-color: var(--checkbox-color);
      color: var(--checkbox-text-color);
      z-index: 1;
      opacity: 100%;
      position: relative;
      display: block;
      margin-top: -50%;
      margin-left: -50%;
      border-radius: 0.5rem;
      line-height: 1.6rem;
      font-family: "Cubano", sans-serif;
      text-align: center;
      transition: all ease 0.3s;
      cursor: pointer;
    }
    input {
      display: block;
      height: calc(1.5em + 0.75rem + 2px);
      padding: 0.4rem 1.2rem;
      font-size: 1.2rem;
      font-weight: 700;
      line-height: 1.5;
      color: var(--input-text-color);
      background-color: var(--input-neutral-background-color);
      background-clip: padding-box;
      border: 0px;
      border-radius: 3rem;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    input::placeholder {
      opacity: 50%;
      font-weight: 500;
    }
    input:focus, input:active {
      color: var(--input-active-text-color);
      background-color: var(--input-active-background-color);
      border-color: none;
      outline: 0;
      box-shadow: 0 0 0 0.2rem var(--input-box-shadow-color);
    }
    input:disabled, input[readonly] {
      background-color: var(--neutral-350);
    }
    input:disabled:focus, input:disabled:active, input:disabled:focus-visible, input[readonly]:focus, input[readonly]:active, input[readonly]:focus-visible {
      box-shadow: none;
      outline: none;
    }
    input:disabled::placeholder, input[readonly]::placeholder {
      color: var(--input-placeholder-text-color);
      opacity: 1;
    }
    input::placeholder {
      color: var(--input-placeholder-text-color);
      opacity: 0.5;
    }
    input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus {
      border: 2px solid var(--input-autofill-text-color);
      -webkit-text-fill-color: var(--input-autofill-text-color);
      -webkit-box-shadow: 0 0 0px 1000px var(--input-autofill-background-color) inset;
      transition: background-color 5000s ease-in-out 0s;
    }
    input[type=radio] {
      display: inline-block;
      margin-top: 14px;
      height: auto;
    }
    select[multiple] {
      margin: 10px;
      padding: 10px;
      border-radius: 1.2rem;
    }
    select[multiple]:after {
      content: "";
      height: 100%;
      width: 50px;
      background-color: var(--multiselect-background-color);
    }
    select[multiple]::-webkit-scrollbar {
      width: 15px;
      margin: 20px;
    }
    select[multiple]::-webkit-scrollbar-track {
      background: var(--scroll-bar-container-color);
      border-top-right-radius: 1.8rem;
      border-bottom-right-radius: 1.8rem;
    }
    select[multiple]::-webkit-scrollbar-thumb {
      background-color: var(--scroll-bar-color);
      border-radius: 10px;
    }
    select[multiple]:focus option:checked {
      background: var(--multiselect-option-checked-color) linear-gradient(0deg, var(--multiselect-option-checked-color) 0%, var(--multiselect-option-checked-color) 100%);
      border-radius: 1rem;
    }
    select[multiple]:focus option:active {
      background: var(--multiselect-option-checked-color) linear-gradient(0deg, var(--multiselect-option-checked-color) 0%, var(--multiselect-option-checked-color) 100%);
      border-radius: 1rem;
    }
    select[multiple] option {
      padding: 0.1rem 1rem;
    }
    select[multiple] option:checked {
      background: var(--multiselect-option-checked-color) linear-gradient(0deg, var(--multiselect-option-checked-color) 0%, var(--multiselect-option-checked-color) 100%);
      border-radius: 1rem;
    }
    textarea {
      border-radius: 1.3rem;
      border-start-end-radius: 5px;
      height: auto;
    }
    ::-webkit-resizer {
      border-width: 8px;
      background-color: var(--text-area-resizer-color);
      border-style: solid;
      border-color: transparent var(--text-area-resizer-color) var(--text-area-resizer-color) transparent;
      border-bottom-right-radius: 1.3rem;
      border-top-left-radius: 0.5rem;
    }
    ::picker(select) {
      appearance: base-select;
      border-radius: 10px;
      border-color: var(--core-color);
    }
    select:not([multiple]) {
      appearance: base-select;
      display: inline-block;
      width: 100%;
      height: calc(1.5em + 0.75rem + 2px);
      font-size: 1.3rem;
      font-weight: 400;
      line-height: 1.5;
      color: var(--dark-text-color);
      background-color: var(--neutral-300);
      border: none;
      border-radius: 1.8rem;
    }
    select:not([multiple]):hover, select:not([multiple]):focus, select:not([multiple]):active {
      color: var(--muted-text-color-darker);
      background-color: var(--neutral-600);
      border-color: none;
      outline: 0;
    }
    select:not([multiple])::picker-icon {
      content: url("/images/global/gui/icon-chevron-small.svg");
      transition: 0.4s rotate;
    }
    select:not([multiple]):open::picker-icon {
      rotate: 180deg;
    }
    select:not([multiple]):after {
      display: none;
    }
    select:not([multiple]) option {
      display: flex;
      justify-content: flex-start;
      gap: 20px;
      background: var(--neutral-300);
      padding: 10px;
      transition: 0.4s;
      color: var(--dark-text-color);
    }
    select:not([multiple]) option:hover {
      background-color: #e7dcaf;
    }
    select:not([multiple]) option::checkmark {
      display: none;
    }
    select:not([multiple]) option:checked {
      background-color: #70A262;
      color: var(--white-text-color);
    }
    * {
      scrollbar-width: 12px;
      scrollbar-color: var(--scroll-bar-color);
    }
    *::-webkit-scrollbar {
      width: 12px;
    }
    *::-webkit-scrollbar-track {
      background: var(--scroll-bar-container-color);
      border-radius: 0.8rem;
    }
    *::-webkit-scrollbar-thumb {
      background-color: var(--scroll-bar-color);
      border-radius: 20px;
    }
    figure {
      margin: 0 0 1rem;
    }
    pre {
      font-size: 13px;
      line-height: 1.30769231;
      color: var(--dark-color);
      background-color: var(--light-background-color-darker);
      border-radius: 10px;
      margin: 0;
      padding: 12px;
      overflow: auto;
      word-wrap: normal;
    }
    pre code {
      white-space: inherit;
      padding: 0;
    }
    text[id$=_ChartTitle], text[id$=_title] {
      font-family: henderson-slab-basic, serif;
      fill: var(--dark-text-color);
    }
    text[id*=_AxisLabel], text[id*=_datalabel] {
      font-family: "tgn-soft-round-comp", sans-serif;
      letter-spacing: 1px;
      font-size: 110%;
      color: var(--chart-axis-label-color);
    }
    text[id*=_AxisTitle] {
      font-family: "tgn-soft-round-comp", sans-serif;
      letter-spacing: 1px;
      font-size: 110%;
      color: var(--chart-axis-title-color);
    }
    text[id*=_chart_legend_text] {
      font-family: "tgn-soft-round-comp", sans-serif;
      font-size: 110%;
      padding-left: 3px;
      color: var(--chart-legend-text-color);
    }
    g[id$=AxisGroup0Inside] path {
      stroke: var(--chart-axis-stroke-group-1);
    }
    g[id$=AxisGroup1Inside] path {
      stroke: var(--chart-axis-stroke-group-2);
    }
    g[id$=bdAxisLabels1] text {
      font-family: "tgn-soft-round-comp", sans-serif;
      letter-spacing: 1px;
      font-size: 16px;
    }
    g[id$=bdAxisLabels0] text {
      font-family: "Cubano", sans-serif;
    }
    rect[id$=_ChartBorder] {
      padding: 10px;
      border-radius: 1.2rem;
      fill: transparent;
    }
    rect[id*=_ChartAreaBorder] {
      fill: transparent;
      stroke: transparent;
    }
    path[id*=_ChartAxisLine] {
      fill: transparent;
    }
  }
}
@layer components {
  :where(.learner-app) {
    .animista [class*=anim-delay-] {
      animation-duration: 0.75s;
      animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
      animation-fill-mode: both;
    }
    .animista.fade-in-bottom [class*=anim-delay-] {
      animation-name: fade-in-bottom;
    }
    .animista.flip-in-hor-bottom [class*=anim-delay-], .animista.flip-in-hor-bottom[class*=anim-delay-] {
      animation-name: flip-in-hor-bottom;
    }
    .animista.fade-in-top [class*=anim-delay-] {
      animation-name: fade-in-top;
    }
    .animista.fade-in-left [class*=anim-delay-] {
      animation-name: fade-in-left;
    }
    .animista.fade-in-right [class*=anim-delay-] {
      animation-name: fade-in-right;
    }
    .animista.slide-in-right [class*=anim-delay-] {
      animation-name: slide-in-right;
    }
    .animista.slide-in-left [class*=anim-delay-] {
      animation-name: slide-in-left;
    }
    .animista.slide-in-bottom [class*=anim-delay-] {
      animation-name: slide-in-bottom;
    }
    .animista.slide-in-top [class*=anim-delay-] {
      animation-name: slide-in-top;
    }
    .animista .anim-delay-1 {
      animation-delay: 0.1s;
    }
    .animista .anim-delay-2 {
      animation-delay: 0.2s;
    }
    .animista .anim-delay-3 {
      animation-delay: 0.3s;
    }
    .animista .anim-delay-4 {
      animation-delay: 0.4s;
    }
    .animista .anim-delay-5 {
      animation-delay: 0.5s;
    }
    .animista .anim-delay-6 {
      animation-delay: 0.6s;
    }
    .animista .anim-delay-7 {
      animation-delay: 0.7s;
    }
    .cursor-pointer {
      cursor: pointer;
    }
    th.comment-cell {
      width: 25rem;
    }
    th.sortable-column {
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 4px;
    }
    th.sortable-column.sorted-descending::after {
      content: " \f0de";
      font-family: "Line Awesome Free";
      text-decoration: none;
      font-size: 1.2rem;
      display: inline-block;
    }
    th.sortable-column.sorted-ascending::after {
      content: " \f0dd";
      font-family: "Line Awesome Free";
      text-decoration: none;
      font-size: 1.2rem;
      display: inline-block;
    }
    .visually-hidden {
      position: absolute;
      left: -100vw;
      display: none;
    }
    .balance-text {
      text-wrap: balance;
    }
    @media (min-width: 1500px) {
      .col-xxl-1 {
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
      }
    }
    @media (min-width: 1500px) {
      .col-xxl-2 {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
      }
    }
    @media (min-width: 1500px) {
      .col-xxl-3 {
        flex: 0 0 25%;
        max-width: 25%;
      }
    }
    @media (min-width: 1500px) {
      .col-xxl-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
      }
    }
    @media (min-width: 1500px) {
      .col-xxl-5 {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
      }
    }
    @media (min-width: 1500px) {
      .col-xxl-6 {
        flex: 0 0 50%;
        max-width: 50%;
      }
    }
    @media (min-width: 1500px) {
      .col-xxl-7 {
        flex: 0 0 58.333333%;
        max-width: 58.333333%;
      }
    }
    @media (min-width: 1500px) {
      .col-xxl-8 {
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
      }
    }
    @media (min-width: 1500px) {
      .col-xxl-9 {
        flex: 0 0 75%;
        max-width: 75%;
      }
    }
    @media (min-width: 1500px) {
      .col-xxl-10 {
        flex: 0 0 83.333333%;
        max-width: 83.333333%;
      }
    }
    @media (min-width: 1500px) {
      .col-xxl-11 {
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
      }
    }
    @media (min-width: 1500px) {
      .col-xxl-12 {
        flex: 0 0 100%;
        max-width: 100%;
      }
    }
    #notification-menu-container #notifications-list .notification-date, #notification-menu-container #notifications-list .entry-description {
      font-size: 90%;
    }
    @media (max-width: 1499.98px) {
      #notification-menu-container #notifications-list .notification-date, #notification-menu-container #notifications-list .entry-description {
        font-size: 60%;
      }
    }
    @media screen and (max-height: 768px) {
      #notification-menu-container #notifications-list .notification-date, #notification-menu-container #notifications-list .entry-description {
        font-size: 60%;
      }
    }
    .full-width-app .form-group, .cms-preview .form-group, .login-form .form-group, .cms-layout .form-group {
      font-family: "tgn-soft-round-comp", sans-serif;
      color: var(--body-font-color);
      font-size: 130%;
    }
    @media (max-width: 1499.98px) {
      .full-width-app .form-group, .cms-preview .form-group, .login-form .form-group, .cms-layout .form-group {
        font-size: 1.2rem;
      }
      .full-width-app .form-group label, .cms-preview .form-group label, .login-form .form-group label, .cms-layout .form-group label {
        font-size: 1.2rem;
      }
      .full-width-app .form-group li, .cms-preview .form-group li, .login-form .form-group li, .cms-layout .form-group li {
        font-size: 1.2rem;
      }
    }
    .full-width-app .orange, .cms-preview .orange, .login-form .orange, .cms-layout .orange {
      color: var(--accent-color-1);
    }
    .full-width-app .green, .cms-preview .green, .login-form .green, .cms-layout .green {
      color: var(--accent-color-6);
    }
    .full-width-app .burnt-orange, .cms-preview .burnt-orange, .login-form .burnt-orange, .cms-layout .burnt-orange {
      color: var(--accent-color-8);
    }
    .full-width-app .dark-green, .cms-preview .dark-green, .login-form .dark-green, .cms-layout .dark-green {
      color: var(--accent-color-6-dark);
    }
    .full-width-app .mossy-green, .cms-preview .mossy-green, .login-form .mossy-green, .cms-layout .mossy-green {
      color: var(--accent-color-11);
    }
    .full-width-app .blue, .cms-preview .blue, .login-form .blue, .cms-layout .blue {
      color: var(--info-color);
    }
    .full-width-app .body-font, .cms-preview .body-font, .login-form .body-font, .cms-layout .body-font {
      font-family: "tgn-soft-round-comp", sans-serif;
      font-weight: 700;
      font-style: normal;
    }
    .full-width-app .display-1, .full-width-app .display-2, .full-width-app .display-3, .full-width-app .display-4, .full-width-app .bd-title, .cms-preview .display-1, .cms-preview .display-2, .cms-preview .display-3, .cms-preview .display-4, .cms-preview .bd-title, .login-form .display-1, .login-form .display-2, .login-form .display-3, .login-form .display-4, .login-form .bd-title, .cms-layout .display-1, .cms-layout .display-2, .cms-layout .display-3, .cms-layout .display-4, .cms-layout .bd-title {
      font-family: henderson-slab-basic, serif;
      color: var(--dark-color);
    }
    .full-width-app p, .full-width-app u, .full-width-app li, .full-width-app blockquote, .full-width-app label, .cms-preview p, .cms-preview u, .cms-preview li, .cms-preview blockquote, .cms-preview label, .login-form p, .login-form u, .login-form li, .login-form blockquote, .login-form label, .cms-layout p, .cms-layout u, .cms-layout li, .cms-layout blockquote, .cms-layout label {
      font-size: 1.6rem;
      font-family: "tgn-soft-round-comp", sans-serif;
      color: var(--body-font-color-light);
      letter-spacing: 0.1px;
    }
    @media screen and (max-height: 768px) {
      .full-width-app p, .full-width-app u, .full-width-app li, .full-width-app blockquote, .full-width-app label, .cms-preview p, .cms-preview u, .cms-preview li, .cms-preview blockquote, .cms-preview label, .login-form p, .login-form u, .login-form li, .login-form blockquote, .login-form label, .cms-layout p, .cms-layout u, .cms-layout li, .cms-layout blockquote, .cms-layout label {
        font-size: 1.2rem;
      }
    }
    .full-width-app a, .cms-preview a, .login-form a, .cms-layout a {
      color: var(--link-color);
      letter-spacing: 0.1px;
    }
    .full-width-app h1, .full-width-app h2, .full-width-app h3, .full-width-app h4, .full-width-app h5, .full-width-app h6, .full-width-app .h1, .full-width-app .h2, .full-width-app .h3, .full-width-app .h4, .full-width-app .h5, .full-width-app .h6, .cms-preview h1, .cms-preview h2, .cms-preview h3, .cms-preview h4, .cms-preview h5, .cms-preview h6, .cms-preview .h1, .cms-preview .h2, .cms-preview .h3, .cms-preview .h4, .cms-preview .h5, .cms-preview .h6, .login-form h1, .login-form h2, .login-form h3, .login-form h4, .login-form h5, .login-form h6, .login-form .h1, .login-form .h2, .login-form .h3, .login-form .h4, .login-form .h5, .login-form .h6, .cms-layout h1, .cms-layout h2, .cms-layout h3, .cms-layout h4, .cms-layout h5, .cms-layout h6, .cms-layout .h1, .cms-layout .h2, .cms-layout .h3, .cms-layout .h4, .cms-layout .h5, .cms-layout .h6 {
      font-family: "Cubano", sans-serif;
      font-weight: 500;
      color: var(--heading-font-color);
    }
    .full-width-app h1, .full-width-app .h1, .cms-preview h1, .cms-preview .h1, .login-form h1, .login-form .h1, .cms-layout h1, .cms-layout .h1 {
      font-size: 3.6rem;
    }
    @media (max-width: 1499.98px) {
      .full-width-app h1, .full-width-app .h1, .cms-preview h1, .cms-preview .h1, .login-form h1, .login-form .h1, .cms-layout h1, .cms-layout .h1 {
        font-size: 3.2rem;
      }
    }
    @media screen and (max-height: 768px) {
      .full-width-app h1, .full-width-app .h1, .cms-preview h1, .cms-preview .h1, .login-form h1, .login-form .h1, .cms-layout h1, .cms-layout .h1 {
        font-size: 3.2rem;
      }
    }
    .full-width-app h2, .full-width-app .h2, .cms-preview h2, .cms-preview .h2, .login-form h2, .login-form .h2, .cms-layout h2, .cms-layout .h2 {
      font-size: 3.2rem;
    }
    @media (max-width: 1499.98px) {
      .full-width-app h2, .full-width-app .h2, .cms-preview h2, .cms-preview .h2, .login-form h2, .login-form .h2, .cms-layout h2, .cms-layout .h2 {
        font-size: 2.8rem;
      }
    }
    @media screen and (max-height: 768px) {
      .full-width-app h2, .full-width-app .h2, .cms-preview h2, .cms-preview .h2, .login-form h2, .login-form .h2, .cms-layout h2, .cms-layout .h2 {
        font-size: 2.8rem;
      }
    }
    .full-width-app h3, .full-width-app .h3, .cms-preview h3, .cms-preview .h3, .login-form h3, .login-form .h3, .cms-layout h3, .cms-layout .h3 {
      font-size: 2.8rem;
    }
    @media (max-width: 1499.98px) {
      .full-width-app h3, .full-width-app .h3, .cms-preview h3, .cms-preview .h3, .login-form h3, .login-form .h3, .cms-layout h3, .cms-layout .h3 {
        font-size: 2.4rem;
      }
    }
    @media screen and (max-height: 768px) {
      .full-width-app h3, .full-width-app .h3, .cms-preview h3, .cms-preview .h3, .login-form h3, .login-form .h3, .cms-layout h3, .cms-layout .h3 {
        font-size: 2.4rem;
      }
    }
    .full-width-app h4, .full-width-app .h4, .cms-preview h4, .cms-preview .h4, .login-form h4, .login-form .h4, .cms-layout h4, .cms-layout .h4 {
      font-size: 2.4rem;
    }
    @media (max-width: 1499.98px) {
      .full-width-app h4, .full-width-app .h4, .cms-preview h4, .cms-preview .h4, .login-form h4, .login-form .h4, .cms-layout h4, .cms-layout .h4 {
        font-size: 2rem;
      }
    }
    @media screen and (max-height: 768px) {
      .full-width-app h4, .full-width-app .h4, .cms-preview h4, .cms-preview .h4, .login-form h4, .login-form .h4, .cms-layout h4, .cms-layout .h4 {
        font-size: 2rem;
      }
    }
    .full-width-app h5, .full-width-app .h5, .cms-preview h5, .cms-preview .h5, .login-form h5, .login-form .h5, .cms-layout h5, .cms-layout .h5 {
      font-size: 2rem;
    }
    @media (max-width: 1499.98px) {
      .full-width-app h5, .full-width-app .h5, .cms-preview h5, .cms-preview .h5, .login-form h5, .login-form .h5, .cms-layout h5, .cms-layout .h5 {
        font-size: 1.6rem;
      }
    }
    @media screen and (max-height: 768px) {
      .full-width-app h5, .full-width-app .h5, .cms-preview h5, .cms-preview .h5, .login-form h5, .login-form .h5, .cms-layout h5, .cms-layout .h5 {
        font-size: 1.6rem;
      }
    }
    .full-width-app h6, .full-width-app .h6, .cms-preview h6, .cms-preview .h6, .login-form h6, .login-form .h6, .cms-layout h6, .cms-layout .h6 {
      font-size: 1.6rem;
    }
    @media (max-width: 1499.98px) {
      .full-width-app h6, .full-width-app .h6, .cms-preview h6, .cms-preview .h6, .login-form h6, .login-form .h6, .cms-layout h6, .cms-layout .h6 {
        font-size: 1.2rem;
      }
    }
    @media screen and (max-height: 768px) {
      .full-width-app h6, .full-width-app .h6, .cms-preview h6, .cms-preview .h6, .login-form h6, .login-form .h6, .cms-layout h6, .cms-layout .h6 {
        font-size: 1.2rem;
      }
    }
    .full-width-app .lead, .full-width-app .bd-lead, .cms-preview .lead, .cms-preview .bd-lead, .login-form .lead, .login-form .bd-lead, .cms-layout .lead, .cms-layout .bd-lead {
      font-size: 2rem;
      font-weight: 300;
    }
    .full-width-app .display-1, .cms-preview .display-1, .login-form .display-1, .cms-layout .display-1 {
      font-size: 6rem;
      font-weight: 300;
    }
    @media only screen and (max-height: 768px) {
      .full-width-app .display-1, .cms-preview .display-1, .login-form .display-1, .cms-layout .display-1 {
        font-size: 5rem;
      }
    }
    @media (max-width: 767.98px) {
      .full-width-app .display-1, .cms-preview .display-1, .login-form .display-1, .cms-layout .display-1 {
        font-size: 5rem;
      }
    }
    .full-width-app .display-2, .cms-preview .display-2, .login-form .display-2, .cms-layout .display-2 {
      font-size: 5.5rem;
      font-weight: 300;
    }
    @media only screen and (max-height: 768px) {
      .full-width-app .display-2, .cms-preview .display-2, .login-form .display-2, .cms-layout .display-2 {
        font-size: 4.5rem;
      }
    }
    @media (max-width: 767.98px) {
      .full-width-app .display-2, .cms-preview .display-2, .login-form .display-2, .cms-layout .display-2 {
        font-size: 4.5rem;
      }
    }
    .full-width-app .display-3, .cms-preview .display-3, .login-form .display-3, .cms-layout .display-3 {
      font-size: 4.5rem;
      font-weight: 300;
    }
    @media only screen and (max-height: 768px) {
      .full-width-app .display-3, .cms-preview .display-3, .login-form .display-3, .cms-layout .display-3 {
        font-size: 3.5rem;
      }
    }
    @media (max-width: 767.98px) {
      .full-width-app .display-3, .cms-preview .display-3, .login-form .display-3, .cms-layout .display-3 {
        font-size: 3.5rem;
      }
    }
    .full-width-app .display-4, .full-width-app .bd-title, .cms-preview .display-4, .cms-preview .bd-title, .login-form .display-4, .login-form .bd-title, .cms-layout .display-4, .cms-layout .bd-title {
      font-size: 3.5rem;
      font-weight: 300;
    }
    .full-width-app hr, .cms-preview hr, .login-form hr, .cms-layout hr {
      margin-top: 1.6rem;
      margin-bottom: 1.6rem;
      border: none;
      border-top: none;
    }
    .full-width-app small, .cms-preview small, .login-form small, .cms-layout small {
      font-size: 75%;
      font-weight: 400;
    }
    .full-width-app mark, .full-width-app .mark, .cms-preview mark, .cms-preview .mark, .login-form mark, .login-form .mark, .cms-layout mark, .cms-layout .mark {
      padding: 0.2em;
      background-color: var(--header-row-color);
    }
    .full-width-app .list-boxed li, .cms-preview .list-boxed li, .login-form .list-boxed li, .cms-layout .list-boxed li {
      background-color: var(--neutral-300);
      margin: 0.4rem;
      padding: 0.4rem;
      border-radius: 0.4rem;
    }
    .full-width-app .blockquote-footer, .cms-preview .blockquote-footer, .login-form .blockquote-footer, .cms-layout .blockquote-footer {
      font-size: 90%;
      color: var(--muted-text-color);
    }
    .blockquote {
      width: 50%;
      margin: auto;
      margin-top: 2rem;
      font-style: italic;
      font-size: 180%;
    }
    .cms-layout .form-group {
      font-family: "tgn-soft-round-comp", sans-serif;
      color: var(--body-font-color);
      font-size: 130%;
    }
    @media (max-width: 1499.98px) {
      .cms-layout .form-group {
        font-size: 1.2rem;
      }
      .cms-layout .form-group label {
        font-size: 1.2rem;
      }
      .cms-layout .form-group li {
        font-size: 1.2rem;
      }
    }
    .cms-layout p, .cms-layout u, .cms-layout li, .cms-layout blockquote, .cms-layout label {
      font-size: 1.2rem;
      font-family: "tgn-soft-round-comp", sans-serif;
      color: var(--body-font-color-light);
      letter-spacing: 1px;
    }
    .cms-layout a {
      color: var(--link-color);
      letter-spacing: 1px;
      font-size: 1.2rem;
    }
    .cms-layout h1, .cms-layout .h1 {
      font-size: 3.2rem;
    }
    .cms-layout h2, .cms-layout .h2 {
      font-size: 2.8rem;
    }
    .cms-layout h3, .cms-layout .h3 {
      font-size: 2.4rem;
    }
    .cms-layout h4, .cms-layout .h4 {
      font-size: 2rem;
    }
    @media (max-width: 1499.98px) {
      .cms-layout h4, .cms-layout .h4 {
        font-size: 1.4rem;
      }
    }
    .cms-layout h5, .cms-layout .h5 {
      font-size: 1.6rem;
    }
    .cms-layout h6, .cms-layout .h6 {
      font-size: 1.2rem;
    }
    .cms-layout .lead, .cms-layout .bd-lead {
      font-size: 2rem -0.4rem;
      font-weight: 300;
    }
    .cms-layout #notification-menu-container #notifications-list .notification-date, #notification-menu-container #notifications-list .cms-layout .notification-date, .cms-layout #notification-menu-container #notifications-list .entry-description, #notification-menu-container #notifications-list .cms-layout .entry-description {
      font-weight: 700;
    }
    .cms-layout #notification-menu-container #notifications-list .notification-date, #notification-menu-container #notifications-list .cms-layout .notification-date, .cms-layout #notification-menu-container #notifications-list .entry-description, #notification-menu-container #notifications-list .cms-layout .entry-description {
      font-size: 1rem;
    }
    @media (max-width: 1499.98px) {
      .cms-layout #notification-menu-container #notifications-list .notification-date, #notification-menu-container #notifications-list .cms-layout .notification-date, .cms-layout #notification-menu-container #notifications-list .entry-description, #notification-menu-container #notifications-list .cms-layout .entry-description {
        font-size: 0.6666666667rem;
      }
    }
    @media screen and (max-height: 768px) {
      .cms-layout #notification-menu-container #notifications-list .notification-date, #notification-menu-container #notifications-list .cms-layout .notification-date, .cms-layout #notification-menu-container #notifications-list .entry-description, #notification-menu-container #notifications-list .cms-layout .entry-description {
        font-size: 0.6666666667rem;
      }
    }
    .logout-modal {
      transition: 250ms all;
      z-index: 5;
    }
    .logout-modal .logout-modal-inner {
      width: 500px;
      box-sizing: border-box;
      padding: 30px 50px 40px;
      background: var(--blazor-modal-background-color);
      border-radius: 0.8rem;
      transition: 250ms all;
      border: 3px var(--blazor-modal-box-shadow-color);
      box-shadow: 5px 4px 0 1px var(--blazor-modal-box-shadow-color);
    }
    .logout-modal .logout-modal-inner .logout-modal-body h1, .logout-modal .logout-modal-inner .logout-modal-body h2, .logout-modal .logout-modal-inner .logout-modal-body h3, .logout-modal .logout-modal-inner .logout-modal-body h5, .logout-modal .logout-modal-inner .logout-modal-body h6 {
      font-size: 30px;
      font-family: "Cubano", sans-serif;
      color: var(--dark-text-color);
    }
    .logout-modal .logout-modal-inner .logout-modal-body h4 {
      font-weight: 500;
      color: var(--light-text-color);
      text-shadow: 4px 2px var(--success-modal-text-shadow-color);
      font-size: 170%;
    }
    .logout-modal .logout-modal-title {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      color: var(--accent-color-7-light);
    }
    .logout-modal .logout-modal-title .modal-close-btn {
      cursor: pointer;
      background: var(--blazor-close-btn-color);
      display: flex;
      justify-content: center;
      color: var(--white-text-color);
      border-radius: 50%;
      height: 40px;
      width: 40px;
      margin: -40px -64px 0px 0px;
    }
    .account-area ul.navbar-nav {
      flex-direction: row;
    }
    .account-area ul.navbar-nav li.nav-link:first-child {
      margin-right: 0.5rem;
    }
    .account-area ul.navbar-nav li.nav-link:first-child a {
      font-family: henderson-slab-basic, serif;
      color: var(--account-toggle-cms-dropdown-link-color);
      font-size: 1rem;
    }
    .cms-nav {
      background-color: var(--cms-nav-background-color);
      border-bottom-left-radius: 1.2rem;
      border-bottom-right-radius: 1.2rem;
    }
    @media (max-width: 991.98px) {
      .cms-nav {
        border-radius: 0;
        height: 100vh;
        margin-top: 0.6rem;
      }
    }
    .cms-nav .account-menu {
      padding: 0 1rem;
    }
    .cms-nav .nav-item {
      margin-top: 0.5vh;
      width: 105%;
      margin-left: 1px;
      transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .collapse .cms-nav .nav-item {
      width: 124%;
    }
    @media (max-width: 992px) {
      .collapse .cms-nav .nav-item {
        width: 96%;
      }
    }
    .cms-nav .nav-item:last-of-type {
      padding-bottom: 1rem;
    }
    .cms-nav .nav-item:not(:first-child) {
      margin-top: -6px;
      margin-bottom: -6px;
    }
    .cms-nav .nav-item a, .cms-nav .nav-item.nav-button .nav-link {
      color: var(--cms-nav-text-color);
      border-radius: 0px;
      height: 3rem;
      display: flex;
      align-items: center;
      line-height: 3rem;
    }
    .cms-nav .nav-item a.active, .cms-nav .nav-item a:active, .cms-nav .nav-item.nav-button .nav-link.active, .cms-nav .nav-item.nav-button .nav-link:active {
      background-color: var(--cms-nav-background-color-active);
      color: var(--cms-nav-text-color-active);
      border-top-left-radius: 1.8rem;
      border-bottom-left-radius: 1.8rem;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    @media (max-width: 991.98px) {
      .cms-nav .nav-item a.active, .cms-nav .nav-item a:active, .cms-nav .nav-item.nav-button .nav-link.active, .cms-nav .nav-item.nav-button .nav-link:active {
        background-color: transparent;
        color: var(--cms-nav-text-color);
        width: 100%;
        padding: 0 34px;
      }
    }
    .cms-nav .nav-item .nav-link {
      background-color: transparent;
      border-top-left-radius: 1.8rem;
      border-bottom-left-radius: 1.8rem;
      border-top-right-radius: 0rem;
      border-bottom-right-radius: 0rem;
      width: 100%;
      float: right;
      color: var(--cms-nav-text-color);
      margin-top: 0.4vh;
      padding-left: 34px;
      transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .cms-nav .nav-item .nav-link:hover, .cms-nav .nav-item .nav-link.hover {
      border-top-left-radius: 1.8rem;
      border-bottom-left-radius: 1.8rem;
      background-color: var(--cms-nav-background-color-hover);
      width: 95%;
      color: var(--cms-nav-text-color-hover);
      padding-left: 1.2vw;
    }
    .cms-nav .nav-item .nav-link:hover ~ .bottomcorner::before, .cms-nav .nav-item .nav-link:hover ~ .topcorner::before, .cms-nav .nav-item .nav-link.hover ~ .bottomcorner::before, .cms-nav .nav-item .nav-link.hover ~ .topcorner::before {
      box-shadow: 10px 10px 5px 100px var(--cms-nav-background-color-hover);
    }
    .cms-nav .nav-item .nav-link:hover.active ~ .bottomcorner::before, .cms-nav .nav-item .nav-link:hover.active ~ .topcorner::before, .cms-nav .nav-item .nav-link:hover:active ~ .bottomcorner::before, .cms-nav .nav-item .nav-link:hover:active ~ .topcorner::before, .cms-nav .nav-item .nav-link.hover.active ~ .bottomcorner::before, .cms-nav .nav-item .nav-link.hover.active ~ .topcorner::before, .cms-nav .nav-item .nav-link.hover:active ~ .bottomcorner::before, .cms-nav .nav-item .nav-link.hover:active ~ .topcorner::before {
      box-shadow: 10px 10px 5px 100px var(--cms-nav-background-color-hover);
    }
    .cms-nav .nav-item .nav-link:active, .cms-nav .nav-item .nav-link.active {
      border-top-left-radius: 1.8rem;
      border-bottom-left-radius: 1.8rem;
      background-color: var(--cms-nav-background-color-active);
      width: 96%;
      float: right;
      color: var(--cms-nav-text-color-active);
      padding-left: 1.4rem;
      margin-left: 1rem;
      transition: width 0.15s cubic-bezier(0.075, 0.82, 0.165, 1);
    }
    @media (max-width: 991.98px) {
      .cms-nav .nav-item .nav-link:active, .cms-nav .nav-item .nav-link.active {
        background-color: transparent;
        color: var(--cms-nav-text-color);
        width: 100%;
        padding: 34px;
      }
    }
    .collapse .cms-nav .nav-item .nav-link:active .icon-wrapper, .collapse .cms-nav .nav-item .nav-link.active .icon-wrapper {
      padding-left: 7px;
    }
    .cms-nav .nav-item .nav-link i {
      font-size: 1.2rem;
      margin-right: 32px;
    }
    .cms-nav .nav-item .nav-link .icon-wrapper {
      width: 300px;
      overflow: hidden;
      transition: all 0.15s cubic-bezier(0.075, 0.82, 0.165, 1);
    }
    .collapse .cms-nav .nav-item .nav-link .icon-wrapper {
      width: 32px;
    }
    .cms-nav .nav-item .nav-link .icon-text {
      font-family: henderson-slab-basic, serif;
      font-weight: 600;
      font-size: 80%;
      white-space: nowrap;
    }
    .cms-nav .sub-menu {
      background-color: var(--cms-nav-submenu-background-color);
      width: 85%;
      margin-left: 8%;
      margin-bottom: 1rem;
      border-radius: 1.2rem;
      padding: 0.6rem 0rem;
      margin-top: -10px;
      animation: scale-in-ver-top 0.2s ease-in-out;
    }
    .cms-nav .sub-menu .nav-item {
      width: 90%;
      padding-left: 0;
    }
    .cms-nav .sub-menu .nav-item:hover {
      width: 90%;
    }
    .cms-nav .sub-menu .nav-item:first-of-type {
      padding-top: 0;
      margin-top: 0;
    }
    .cms-nav .sub-menu .nav-item .nav-link:hover, .cms-nav .sub-menu .nav-item .nav-link.hover {
      width: 90%;
      background-color: transparent;
      color: var(--cms-nav-submenu-text-color-hover);
      padding-left: 12px;
    }
    .cms-nav .sub-menu .nav-item .nav-link .icon-text {
      font-weight: 400;
      font-size: 100%;
      font-family: "tgn-soft-round-comp", sans-serif;
      letter-spacing: 1px;
    }
    .collapse .cms-nav .sub-menu .nav-item .nav-link {
      padding-left: 25px;
    }
    .cms-nav .bottomcorner {
      position: relative;
      height: 20px;
      width: 20px;
      float: right;
      overflow: hidden;
      transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    }
    @media (max-width: 991.98px) {
      .cms-nav .bottomcorner {
        height: 0;
      }
    }
    .cms-nav .bottomcorner::before {
      content: "";
      position: absolute;
      right: 0px;
      height: 200%;
      width: 200%;
      border-radius: 100%;
      box-shadow: 10px 10px 5px 100px transparent;
      z-index: 2;
      transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .cms-nav .topcorner {
      position: relative;
      height: 20px;
      width: 20px;
      float: right;
      margin-top: -68px;
      overflow: hidden;
      transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    }
    @media (max-width: 991.98px) {
      .cms-nav .topcorner {
        height: 0;
      }
    }
    .cms-nav .topcorner::before {
      content: "";
      position: absolute;
      right: 0px;
      bottom: 0;
      height: 200%;
      width: 200%;
      border-radius: 100%;
      box-shadow: 10px 10px 5px 100px transparent;
      z-index: 2;
      transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .cms-nav .active ~ .bottomcorner {
      position: relative;
      height: 20px;
      width: 20px;
      float: right;
      overflow: hidden;
    }
    @media (max-width: 991.98px) {
      .cms-nav .active ~ .bottomcorner {
        height: 0;
      }
    }
    .cms-nav .active ~ .bottomcorner::before {
      content: "";
      position: absolute;
      right: 0px;
      height: 200%;
      width: 200%;
      border-radius: 100%;
      box-shadow: 10px 10px 5px 100px var(--cms-nav-background-color-active);
      z-index: 2;
    }
    @media (max-width: 991.98px) {
      .cms-nav .active ~ .bottomcorner::before {
        box-shadow: 10px 10px 5px 100px transparent;
        height: 0;
      }
    }
    .cms-nav .active ~ .topcorner {
      position: relative;
      height: 20px;
      width: 20px;
      float: right;
      margin-top: -68px;
      overflow: hidden;
    }
    @media (max-width: 991.98px) {
      .cms-nav .active ~ .topcorner {
        height: 0;
      }
    }
    .cms-nav .active ~ .topcorner::before {
      content: "";
      position: absolute;
      right: 0px;
      bottom: 0;
      height: 200%;
      width: 200%;
      border-radius: 100%;
      box-shadow: 10px 10px 5px 100px var(--cms-nav-background-color-active);
      z-index: 2;
    }
    @media (max-width: 991.98px) {
      .cms-nav .active ~ .topcorner::before {
        box-shadow: 10px 10px 5px 100px transparent;
        height: 0;
      }
    }
    .cms-nav .caret:after {
      content: "";
      margin-top: 0rem;
      display: inline-block;
      margin-left: 0.2em;
      vertical-align: 0.2em;
      border-top: 0.3em solid;
      border-right: 0.3em solid transparent;
      border-bottom: 0;
      border-left: 0.3em solid transparent;
    }
    @media (max-width: 991.98px) {
      .cms-nav {
        background-color: var(--cms-nav-mobile-background-color);
      }
    }
    .nav-link-card {
      width: 100px;
      height: 100px;
      -webkit-border-radius: 50px;
      -moz-border-radius: 50px;
      border-radius: 50px;
      background-color: var(--dark-background-color);
      padding: 5px;
      border: 4px dashed var(--warning-color);
    }
    @media (max-width: 991.98px) {
      .navbar-sticky {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: 0;
        z-index: 4;
        height: auto;
      }
      .navbar-sticky .navbar {
        justify-content: flex-end;
      }
    }
    @media (min-width: 992px) {
      .navbar-dark {
        background-color: var(--cms-nav-background-color);
        border-top-left-radius: 1.2rem;
        border-top-right-radius: 1.2rem;
        margin-right: 5%;
        transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .navbar-sticky.closed .navbar-dark {
        margin-right: 20%;
      }
    }
    .navbar-dark button.navbar-toggler {
      color: var(--cms-nav-text-color);
      border: none;
      background-color: transparent;
    }
    .navbar-dark button.navbar-toggler:focus, .navbar-dark button.navbar-toggler.focus {
      color: var(--cms-nav-text-color);
      border: none;
      background-color: transparent;
      outline: none;
    }
    .navbar-sticky {
      height: 100%;
      margin: 0.6rem 0rem 1rem 1rem;
      border-radius: 18px;
      animation: fade-in-top 0.3s ease-in-out;
    }
    @media (min-width: 992px) {
      .nav.flex-col.cms-nav {
        width: 95%;
        transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .collapse .nav.flex-col.cms-nav {
        width: 80%;
        margin-right: 0;
      }
      .navbar-sticky .collapse:not(.show) {
        display: block;
        height: 10%;
      }
      .main.cms-layout {
        width: 100%;
        transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
      }
      .navbar-sticky.closed + .main.cms-layout {
        width: 115%;
      }
    }
    @media (max-width: 991.98px) {
      .navbar-sticky {
        height: 10%;
      }
      .navbar-sticky .collapse:not(.show) {
        display: block;
        height: 10%;
      }
      .navbar-sticky .collapse:not(.show) .nav {
        transform: translate(-100%, 0);
        transition: transform 0.15s cubic-bezier(0.77, 0.2, 0.05, 1);
      }
      .navbar-sticky .collapse {
        -webkit-font-smoothing: antialiased;
        transform-origin: 0% 0%;
        transform: translate(0%, 0);
        transition: transform 0.15s cubic-bezier(0.77, 0.2, 0.05, 1);
      }
    }
    .navbar-toggler {
      display: block;
      background-color: transparent;
      color: var(--cms-nav-text-color);
      border: none;
      padding: 0.75rem;
      outline: none;
    }
    @media (max-width: 991.98px) {
      .navbar-toggler {
        padding: 0.25rem 0.75rem;
      }
    }
    .cms-layout .profile-avatar {
      background-color: var(--account-toggle-cms-avatar-background-color);
      margin-right: 8px;
      margin-bottom: 1px;
    }
    .cms-layout.top-row {
      animation: fade-in-top 0.3s ease-in-out;
    }
    .cms-layout.top-row a, .cms-layout.top-row .btn-link {
      white-space: nowrap;
      margin-left: 0.6rem;
    }
    .cms-layout .dropdown.account-menu .profile-pill {
      padding: 0.1rem 0.3rem;
      border: 2px solid var(--account-toggle-cms-border-color);
      border-radius: 1.8rem;
      padding-left: 0.2rem;
      background-color: var(--account-toggle-cms-background-color);
      display: flex;
      align-items: center;
      transition: background-color 0.3s ease;
      cursor: pointer;
      font-size: 1.2rem;
      letter-spacing: 0.5px;
      line-height: 1;
    }
    @media (max-width: 991.98px) {
      .cms-layout .dropdown.account-menu .profile-pill {
        border: none;
        background-color: transparent;
      }
    }
    .cms-layout .dropdown.account-menu .profile-pill a {
      margin-left: 0.6rem;
      color: var(--account-toggle-cms-text-color);
    }
    .cms-layout .dropdown.account-menu .profile-pill p {
      color: var(--account-toggle-cms-text-color);
      margin: 0;
    }
    @media (max-width: 991.98px) {
      .cms-layout .dropdown.account-menu .profile-pill p {
        display: none;
      }
    }
    .cms-layout .dropdown.account-menu .profile-pill:hover {
      background-color: var(--account-toggle-cms-background-color-hover);
    }
    .cms-layout .account-menu-dropdown {
      margin-left: 0;
      z-index: 2;
      color: var(--account-toggle-cms-dropdown-link-color);
      border: 2px solid var(--account-toggle-cms-border-color);
      border-radius: 1rem;
      background-color: var(--account-toggle-cms-dropdown-background-color);
      overflow: hidden;
      font-size: 1.1rem;
      margin-top: 0.5vh;
      position: absolute;
      right: 8%;
      animation: growDown 200ms ease-in-out forwards;
      transform-origin: top center;
      font-size: 1.2rem;
      letter-spacing: 0.5px;
    }
    .cms-layout .account-menu-dropdown .dropdown-item {
      color: var(--account-toggle-cms-dropdown-logout-color);
      transition: all 0.3s;
    }
    .cms-layout .account-menu-dropdown .dropdown-item:focus, .cms-layout .account-menu-dropdown .dropdown-item:hover {
      color: var(--account-toggle-cms-dropdown-link-color-hover);
      background-color: var(--account-toggle-cms-dropdown-background-color-hover);
    }
    .cms-layout .account-menu-dropdown .dropdown-item:active, .cms-layout .account-menu-dropdown .dropdown-item.active {
      color: var(--account-toggle-cms-dropdown-link-color-hover);
      background-color: var(--account-toggle-cms-dropdown-background-color-hover);
    }
    .cms-layout .account-menu-dropdown .dropdown-divider {
      border-top: 2px solid var(--account-toggle-cms-border-color);
      margin: 0;
    }
    .cms-layout .account-menu-dropdown a {
      margin-left: 0;
    }
    .cms-layout .nav-link {
      color: var(--account-toggle-cms-text-color);
    }
    .cms-layout .cms-dialect-selector {
      float: right;
      margin-top: 8px;
      margin-right: -10px;
    }
    .cms-layout .cms-organization-selector {
      float: right;
      margin-top: 8px;
      margin-right: 10px;
    }
    a.navbar-brand {
      color: var(--cms-navbar-brand-text-color);
      font-size: 1.2rem;
      background-image: var(--cms-navbar-brand-logo-container-image-path);
      font-family: henderson-slab-basic, serif;
      justify-content: center;
    }
    a.navbar-brand h1 {
      font-family: henderson-slab-basic, serif;
      font-size: 1.2rem;
      line-height: 1rem;
      margin-bottom: 0;
    }
    .account-menu .account-toggle {
      background-color: transparent;
      border: none;
      outline: none;
      color: var(--account-toggle-cms-text-color);
    }
    .account-menu .account-toggle .caret:after {
      content: "";
      margin-top: 0rem;
      display: inline-block;
      margin-left: 0em;
      vertical-align: 0.2em;
      border-top: 0.3em solid;
      border-right: 0.3em solid transparent;
      border-bottom: 0;
      border-left: 0.3em solid transparent;
    }
    @media (max-width: 991.98px) {
      .account-menu {
        display: none;
      }
    }
    .sidebar {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      padding: 7.2vh 0 0;
    }
    .sidebar-sticky {
      position: relative;
      top: 0;
      height: calc(100vh - 48px);
      padding-top: 0.5rem;
      overflow-x: hidden;
      overflow-y: auto;
    }
    @supports (position: -webkit-sticky) or (position: sticky) {
      .sidebar-sticky {
        position: -webkit-sticky;
        position: sticky;
      }
    }
    .full-width-app .start-menu {
      font-size: clamp(1rem, 4vh, 6rem);
      font-family: henderson-slab-basic, serif;
    }
    .full-width-app .start-menu .menu-item {
      padding-bottom: clamp(1rem, 4vh, 3rem);
      transform: scale(1);
    }
    .full-width-app .start-menu .menu-item:first-child {
      transform: rotate(-3deg);
      padding-bottom: clamp(1.275rem, 5vh, 5rem);
    }
    .full-width-app .start-menu .menu-item:last-child {
      transform: rotate(2deg);
      padding-top: 1rem;
    }
    .full-width-app .start-menu .menu-item:nth-child(2) {
      transform: rotate(2deg);
    }
    .full-width-app .start-menu .menu-item:nth-child(3) {
      transform: rotate(-1deg);
    }
    .full-width-app .start-menu .menu-item:nth-child(4) {
      transform: rotate(-3deg);
    }
    .full-width-app .start-menu .menu-item:hover {
      transform: scale(1.2);
      padding-left: 2rem;
      transition: all 200ms ease-in-out;
      animation: textani 1s forwards;
    }
    .full-width-app .start-menu .menu-item a {
      text-decoration: none;
      color: var(--start-menu-link-color);
      background: linear-gradient(to right, transparent, transparent), linear-gradient(to right, var(--accent-color-7-light), var(--accent-color-7-light));
      background-size: 100% 0.1em, 0 0.1em;
      background-position: 100% 100%, 0 100%;
      background-repeat: no-repeat;
      transition: background-size 400ms;
    }
    .full-width-app .start-menu .menu-item a:hover, .full-width-app .start-menu .menu-item a:focus {
      background-size: 0 0.1em, 100% 0.1em;
    }
    #notification-menu-container {
      position: fixed;
      top: 30px;
      right: 30px;
      z-index: 4;
      width: 500px;
      border-radius: 0.8rem;
      padding-bottom: 1.8rem;
      animation: 0.2s ease-in-out fade-in-top;
      background-color: transparent;
      background-image: var(--notification-hub-background-image-path);
      background-position: 50% 50%;
      background-size: contain;
      background-repeat: no-repeat;
      background-attachment: scroll;
      background-clip: border-box;
      object-fit: fill;
    }
    #notification-menu-container .dotted-line, #notification-menu-container .jumbotron hr, .jumbotron #notification-menu-container hr, #notification-menu-container .full-width-app hr, .full-width-app #notification-menu-container hr, #notification-menu-container .cms-preview hr, .cms-preview #notification-menu-container hr, #notification-menu-container .login-form hr, .login-form #notification-menu-container hr, #notification-menu-container .cms-layout hr, .cms-layout #notification-menu-container hr {
      width: 90%;
      border-top: none;
    }
    #notification-menu-container .paper-stack-container {
      margin: 0.75rem;
      padding: 1.5rem 0.5rem;
      padding-bottom: 3rem;
      margin-bottom: -0.5rem;
    }
    #notification-menu-container #notification-menu-header {
      color: var(--notification-hub-header-text-color);
      font-weight: 600;
      font-size: small;
      padding: 10px;
      padding-left: 15px;
      font-family: henderson-slab-basic, serif;
    }
    #notification-menu-container #notifications-list {
      list-style: none;
      border-radius: 0.8rem;
      overflow-y: auto;
      max-height: 300px;
      min-height: 60px;
      display: flex;
      flex-direction: column;
      padding-left: 0;
      margin-bottom: 0;
      box-shadow: none;
      padding: 0.5rem 0.5rem 0.5rem 0rem;
      scrollbar-width: unset;
    }
    #notification-menu-container #notifications-list .entry {
      position: relative;
      min-height: 60px;
      cursor: pointer;
      list-style: none;
      line-height: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-radius: 0.8rem;
      margin: 0.3rem 0rem;
      padding: 0.25rem 0.25rem 0.25rem 0.75rem;
    }
    #notification-menu-container #notifications-list .entry.message.unread {
      background-color: var(--notification-hub-unread-message-color);
    }
    #notification-menu-container #notifications-list .entry.message.unread .notification-date {
      background-color: var(--notification-hub-unread-message-date-color);
      color: var(--notification-hub-unread-message-text-color);
    }
    #notification-menu-container #notifications-list .entry.message.unread .notification-title {
      color: var(--notification-hub-unread-message-text-color);
    }
    #notification-menu-container #notifications-list .entry.message.read {
      background-color: var(--notification-hub-read-message-color);
    }
    #notification-menu-container #notifications-list .entry.message.read .notification-date {
      background-color: var(--notification-hub-read-message-date-color);
      color: var(--notification-hub-read-message-text-color);
    }
    #notification-menu-container #notifications-list .entry.message.read .notification-title {
      color: var(--notification-hub-read-message-text-color);
    }
    #notification-menu-container #notifications-list .entry.invitation.unread {
      color: var(--notification-hub-invitation-text-color);
      background-color: var(--notification-hub-unread-invitation-color);
    }
    #notification-menu-container #notifications-list .entry.invitation.unread .notification-date {
      background-color: var(--notification-hub-unread-invitation-date-color);
    }
    #notification-menu-container #notifications-list .entry.invitation.unread .notification-title {
      color: var(--notification-hub-unread-invitation-text-color);
    }
    #notification-menu-container #notifications-list .entry.invitation.read {
      background-color: var(--notification-hub-read-invitation-color);
    }
    #notification-menu-container #notifications-list .entry.invitation.read .notification-date {
      background-color: var(--notification-hub-read-invitation-date-color);
      color: var(--notification-hub-read-invitation-text-color);
    }
    #notification-menu-container #notifications-list .entry.invitation.read .notification-title {
      color: var(--notification-hub-read-invitation-text-color);
    }
    #notification-menu-container #notifications-list .entry.empty {
      background-color: var(--notification-hub-empty-background-color);
    }
    #notification-menu-container #notifications-list .entry.empty p {
      text-align: center;
      padding-top: 0.5rem;
      margin-bottom: 0;
    }
    #notification-menu-container #notifications-list .entry-title {
      margin: 0;
      padding: 0;
      font-weight: 400;
    }
    #notification-menu-container #notifications-list .entry-description {
      margin: 0;
      padding: 0;
    }
    #notification-menu-container #notifications-list .notification-list-date-wrapper {
      position: absolute;
      right: 0;
      margin-right: 5px;
      margin-top: -20px;
    }
    #notification-menu-container #notifications-list .notification-date {
      background-color: var(--notification-hub-unread-message-color);
      border-radius: 1.2rem;
      padding: 0.15rem 0.5rem;
      margin: 0.05rem;
      font-weight: 700;
    }
    .information-breach-container {
      margin: 0 auto;
      width: 70%;
      text-align: center;
      padding-left: 60px;
      padding-right: 60px;
    }
    .information-breach-icon {
      width: 100px;
      height: 100px;
      position: absolute;
      margin-top: 50px;
      margin-left: 3%;
    }
    .terms-of-service-container {
      margin: 0 auto;
      width: 70%;
      text-align: center;
      padding-left: 60px;
      padding-right: 60px;
    }
    .pin-box-container {
      display: flex;
      justify-content: center;
      margin-top: 10px;
      margin-bottom: 10px;
      width: auto;
    }
    .pin-box-container .pin-box {
      display: inline-block;
      width: 40px;
      height: 40px;
      background-color: white;
      border: 1px solid #ccc;
      border-radius: 8px;
      text-align: center;
      line-height: 40px;
      margin-right: 5px;
    }
    .vignette {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      box-shadow: 0 0 200px rgba(0, 0, 0, 0.9) inset;
      z-index: -1;
    }
    .background {
      height: 100%;
      width: 100%;
      background-position: center;
      background-size: contain;
      background-repeat: repeat;
      background-attachment: fixed;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 0;
    }
    .background-1 {
      background: var(--background-1-color);
      background-position: center;
      background-size: contain;
      background-repeat: repeat;
      background-attachment: fixed;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 0;
    }
    @media only screen and (max-height: 768px) {
      .background-1 {
        background-image: var(--background-1-image-path-md);
      }
    }
    @media only screen and (max-width: 1366px) {
      .background-1 {
        background-image: var(--background-1-image-path-lg);
      }
    }
    @media only screen and (min-width: 1367px) {
      .background-1 {
        background-image: var(--background-1-image-path-xl);
      }
    }
    .background-2 {
      background: var(--background-2-color);
      background-position: center;
      background-size: contain;
      background-repeat: repeat;
      background-attachment: fixed;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 0;
    }
    @media only screen and (max-height: 768px) {
      .background-2 {
        background-image: var(--background-2-image-path-md);
      }
    }
    @media only screen and (max-width: 1366px) {
      .background-2 {
        background-image: var(--background-2-image-path-lg);
      }
    }
    @media only screen and (min-width: 1367px) {
      .background-2 {
        background-image: var(--background-2-image-path-xl);
      }
    }
    .background-3 {
      background: var(--background-3-color);
      background-position: center;
      background-size: contain;
      background-repeat: repeat;
      background-attachment: fixed;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 0;
    }
    @media only screen and (max-height: 768px) {
      .background-3 {
        background-image: var(--background-3-image-path-md);
      }
    }
    @media only screen and (max-width: 1366px) {
      .background-3 {
        background-image: var(--background-3-image-path-lg);
      }
    }
    @media only screen and (min-width: 1367px) {
      .background-3 {
        background-image: var(--background-3-image-path-xl);
      }
    }
    .background-4 {
      background: var(--background-4-color);
      background-image: var(--background-4-image-path);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 0;
    }
    .background-5 {
      background: var(--light-background-color);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 0;
    }
    @media only screen and (max-height: 768px) {
      .background-5 {
        background-image: url("/images/global/backgrounds/bg-mountains-road-1440x607.png");
      }
    }
    @media only screen and (max-width: 1500px) {
      .background-5 {
        background-image: url("/images/global/backgrounds/bg-mountains-road-1920x929.png");
      }
    }
    @media only screen and (min-width: 1501px) and (max-width: 2999px) {
      .background-5 {
        background-image: url("/images/global/backgrounds/bg-mountains-road-2500x1406.png");
      }
    }
    @media only screen and (min-width: 3000px) {
      .background-5 {
        background-image: url("/images/global/backgrounds/bg-mountains-road.svg");
      }
    }
    .background-6 {
      background: var(--light-background-color);
      background-image: var(--background-6-image-path-md);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 0;
    }
    @media only screen and (max-height: 768px) {
      .background-6 {
        background-image: var(--background-6-image-path-short);
      }
    }
    @media only screen and (max-width: 1500px) {
      .background-6 {
        background-image: var(--background-6-image-path-lg);
      }
    }
    @media only screen and (min-width: 1501px) and (max-width: 2999px) {
      .background-6 {
        background-image: var(--background-6-image-path-xl);
      }
    }
    @media only screen and (min-width: 3000px) {
      .background-6 {
        background-image: var(--background-6-image-path-xxl);
      }
    }
    .background-7 {
      background: var(--light-background-color);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 0;
    }
    @media only screen and (max-height: 768px) {
      .background-7 {
        background-image: var(--background-7-image-path-short);
      }
    }
    @media only screen and (max-width: 1500px) {
      .background-7 {
        background-image: var(--background-7-image-path-md);
      }
    }
    @media only screen and (min-width: 1501px) and (max-width: 2999px) {
      .background-7 {
        background-image: var(--background-7-image-path-lg);
      }
    }
    @media only screen and (min-width: 3000px) {
      .background-7 {
        background-image: var(--background-7-image-path-xl);
      }
    }
    .background-9-a {
      background-image: var(--background-9a-image-path);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 0;
    }
    .background-9-b {
      background-image: var(--background-9b-image-path);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 0;
    }
    .page.main-layout {
      position: relative;
      display: flex;
    }
    .page.public-layout {
      position: relative;
      display: flex;
    }
    .main.full-width-app {
      flex: 1;
      overflow-x: hidden;
    }
    .content {
      padding-top: 0em;
      margin-left: 0em;
    }
    .container-fluid {
      isolation: isolate;
    }
    .cms-layout .content {
      background-color: var(--light-background-color);
      margin: 0.6rem;
      padding: 2vw;
      border-radius: 1.2rem;
      margin-bottom: 2vh;
      min-height: 85vh;
    }
    .full-width-app {
      height: auto;
      min-height: 100vh;
      width: 100%;
    }
    @media (min-width: 641px) {
      .main.full-width-app > div {
        padding-left: 0rem;
        padding-right: 0rem;
      }
    }
    .la, .lab, .lad, .lal, .lar, .las {
      font-size: 1.6rem;
    }
    .icon-wrapper {
      align-items: center;
      display: flex;
    }
    .icon-wrapper.padded {
      padding: 3px;
    }
    .icon-wrapper .icon-text {
      display: inline-block;
      margin-left: 5px;
      margin-bottom: 0;
      padding-right: 3px;
    }
    .filter-white {
      filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(306deg) brightness(103%) contrast(101%);
    }
    .filter-secondary {
      filter: brightness(0) saturate(100%) invert(58%) sepia(27%) saturate(786%) hue-rotate(8deg) brightness(100%) contrast(90%);
    }
    .printable-page {
      background-color: var(--neutral-000);
      font-family: Verdana, "Geneva", Tahoma, sans-serif;
    }
    .printable-page h1, .printable-page h2, .printable-page h3, .printable-page h4, .printable-page h5 {
      text-align: center;
    }
    .printable-page table {
      font-size: 200%;
      color: var(--black-text-color);
      border-radius: 0.8em;
    }
    .printable-page table.table-sm {
      font-size: 100%;
    }
    .printable-id-card-sheet {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr;
      gap: 12px 12px;
      grid-auto-flow: row;
      justify-items: center;
      grid-template-areas: ". .";
      width: 100%;
      height: 100%;
      grid-gap: 0px;
    }
    .printable-id-card-sheet table {
      font-size: inherit;
    }
    .printable-id-card-sheet .printable-id-card {
      padding: 1rem;
      width: 100%;
    }
    .printable-id-card-sheet .printable-id-card-inner {
      background-color: var(--white-color);
      border-radius: 0.8rem;
      border: 2px solid var(--muted-text-color);
      padding: 1rem;
    }
    .printable-id-card-sheet .printable-id-card-header {
      background-image: url(/images/levels/activities/activity-ribbon-hover.svg);
      background-repeat: no-repeat;
      background-size: contain;
      height: 3rem;
      display: flex;
      align-items: center;
    }
    .printable-id-card-sheet .printable-id-card-icon {
      background-color: var(--dark-color);
      border-radius: 50%;
      height: 4rem;
      width: 4rem;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 1rem;
    }
    .printable-id-card-sheet .printable-id-card-icon-inner {
      background-image: url(/images/global/brand/generic/generic-logo-circle.svg);
      background-repeat: no-repeat;
      background-clip: border-box;
      height: 3rem;
      width: 3rem;
      background-size: contain;
      margin: 12px;
    }
    .printable-id-card-sheet .printable-id-card-details {
      display: grid;
      grid-template-columns: 1fr 3fr;
      grid-template-rows: 1fr 1fr 1fr;
      gap: 6px 6px;
      grid-auto-flow: row;
      justify-items: center;
      grid-template-areas: ". ." ". ." ". .";
      width: 100%;
      height: 100%;
      padding: 1rem 1.5rem 0rem;
    }
    .printable-id-card-sheet .printable-id-card-details .printable-domain {
      grid-column: 1/span 2;
    }
    .printable-id-card-sheet .printable-id-card-details div {
      width: 100%;
      text-align: left;
    }
    .printable-id-card-sheet .printable-id-card-details div p {
      margin-bottom: 0px;
      font-size: 100%;
      font-family: henderson-slab-basic, serif;
    }
    @media print {
      .printable-page {
        background-color: var(--neutral-000);
        font-family: Verdana, "Geneva", Tahoma, sans-serif;
      }
      .printable-page h1, .printable-page h2, .printable-page h3, .printable-page h4, .printable-page h5 {
        text-align: center;
      }
      .printable-page table {
        font-size: 200%;
        color: var(--black-text-color);
        border-radius: 0.8em;
      }
      .printable-page table.table-sm {
        font-size: 100%;
      }
      .printable-id-card-sheet {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        gap: 12px 12px;
        grid-auto-flow: row;
        justify-items: center;
        grid-template-areas: ". .";
        width: 100%;
        height: 100%;
        grid-gap: 0px;
      }
      .printable-id-card-sheet table {
        font-size: inherit;
      }
      .printable-id-card-sheet .printable-id-card {
        padding: 1rem;
        width: 100%;
      }
      .printable-id-card-sheet .printable-id-card-inner {
        background-color: var(--white-color);
        border-radius: 0.8rem;
        border: 2px solid var(--muted-text-color);
        padding: 1rem;
      }
      .printable-id-card-sheet .printable-id-card-header {
        background-image: url(/images/levels/activities/activity-ribbon-hover.svg);
        background-repeat: no-repeat;
        background-size: contain;
        height: 3rem;
        display: flex;
        align-items: center;
      }
      .printable-id-card-sheet .printable-id-card-icon {
        background-color: var(--dark-color);
        border-radius: 50%;
        height: 4rem;
        width: 4rem;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 1rem;
      }
      .printable-id-card-sheet .printable-id-card-icon-inner {
        background-image: url(/images/global/brand/generic/generic-logo-circle.svg);
        background-repeat: no-repeat;
        background-clip: border-box;
        height: 3rem;
        width: 3rem;
        background-size: contain;
        margin: 12px;
      }
      .printable-id-card-sheet .printable-id-card-details {
        display: grid;
        grid-template-columns: 1fr 3fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        gap: 6px 6px;
        grid-auto-flow: row;
        justify-items: center;
        grid-template-areas: ". ." ". ." ". ." ". .";
        width: 100%;
        height: 100%;
        padding: 1rem 1.5rem 0rem;
      }
      .printable-id-card-sheet .printable-id-card-details .printable-domain {
        grid-column: 1/span 2;
      }
      .printable-id-card-sheet .printable-id-card-details div {
        width: 100%;
        text-align: left;
      }
      .printable-id-card-sheet .printable-id-card-details div p {
        margin-bottom: 0px;
        font-size: 100%;
        font-family: henderson-slab-basic, serif;
      }
    }
    .fireflies .firefly {
      position: fixed;
      left: 50%;
      top: 50%;
      width: 0.4vw;
      height: 0.4vw;
      margin: -0.2vw 0 0 9.8vw;
      animation: ease 200s alternate infinite;
      pointer-events: none;
    }
    .fireflies .firefly::before, .fireflies .firefly::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      transform-origin: -10vw;
    }
    .fireflies .firefly::before {
      background: black;
      opacity: 0.4;
      animation: drift ease alternate infinite;
    }
    .fireflies .firefly::after {
      background: white;
      opacity: 0;
      box-shadow: 0 0 0vw 0vw yellow;
      animation: drift ease alternate infinite, flash ease infinite;
    }
    .fireflies .firefly:nth-child(1) {
      animation-name: move1;
    }
    .fireflies .firefly:nth-child(1):before {
      animation-duration: 13s;
    }
    .fireflies .firefly:nth-child(1):after {
      animation-duration: 13s, 5592ms;
      animation-delay: 0ms, 1181ms;
    }
    .fireflies .firefly:nth-child(2) {
      animation-name: move2;
    }
    .fireflies .firefly:nth-child(2):before {
      animation-duration: 9s;
    }
    .fireflies .firefly:nth-child(2):after {
      animation-duration: 9s, 6608ms;
      animation-delay: 0ms, 3893ms;
    }
    .fireflies .firefly:nth-child(3) {
      animation-name: move3;
    }
    .fireflies .firefly:nth-child(3):before {
      animation-duration: 18s;
    }
    .fireflies .firefly:nth-child(3):after {
      animation-duration: 18s, 9086ms;
      animation-delay: 0ms, 8018ms;
    }
    .fireflies .firefly:nth-child(4) {
      animation-name: move4;
    }
    .fireflies .firefly:nth-child(4):before {
      animation-duration: 10s;
    }
    .fireflies .firefly:nth-child(4):after {
      animation-duration: 10s, 6741ms;
      animation-delay: 0ms, 6204ms;
    }
    .fireflies .firefly:nth-child(5) {
      animation-name: move5;
    }
    .fireflies .firefly:nth-child(5):before {
      animation-duration: 17s;
    }
    .fireflies .firefly:nth-child(5):after {
      animation-duration: 17s, 8292ms;
      animation-delay: 0ms, 2332ms;
    }
    .fireflies .firefly:nth-child(6) {
      animation-name: move6;
    }
    .fireflies .firefly:nth-child(6):before {
      animation-duration: 16s;
    }
    .fireflies .firefly:nth-child(6):after {
      animation-duration: 16s, 10602ms;
      animation-delay: 0ms, 4353ms;
    }
    .fireflies .firefly:nth-child(7) {
      animation-name: move7;
    }
    .fireflies .firefly:nth-child(7):before {
      animation-duration: 13s;
    }
    .fireflies .firefly:nth-child(7):after {
      animation-duration: 13s, 10934ms;
      animation-delay: 0ms, 7548ms;
    }
    .fireflies .firefly:nth-child(8) {
      animation-name: move8;
    }
    .fireflies .firefly:nth-child(8):before {
      animation-duration: 11s;
    }
    .fireflies .firefly:nth-child(8):after {
      animation-duration: 11s, 5948ms;
      animation-delay: 0ms, 5151ms;
    }
    .fireflies .firefly:nth-child(9) {
      animation-name: move9;
    }
    .fireflies .firefly:nth-child(9):before {
      animation-duration: 11s;
    }
    .fireflies .firefly:nth-child(9):after {
      animation-duration: 11s, 6065ms;
      animation-delay: 0ms, 5381ms;
    }
    .fireflies .firefly:nth-child(10) {
      animation-name: move10;
    }
    .fireflies .firefly:nth-child(10):before {
      animation-duration: 9s;
    }
    .fireflies .firefly:nth-child(10):after {
      animation-duration: 9s, 10745ms;
      animation-delay: 0ms, 667ms;
    }
    .fireflies .firefly:nth-child(11) {
      animation-name: move11;
    }
    .fireflies .firefly:nth-child(11):before {
      animation-duration: 13s;
    }
    .fireflies .firefly:nth-child(11):after {
      animation-duration: 13s, 9350ms;
      animation-delay: 0ms, 2859ms;
    }
    .fireflies .firefly:nth-child(12) {
      animation-name: move12;
    }
    .fireflies .firefly:nth-child(12):before {
      animation-duration: 17s;
    }
    .fireflies .firefly:nth-child(12):after {
      animation-duration: 17s, 6855ms;
      animation-delay: 0ms, 6215ms;
    }
    .fireflies .firefly:nth-child(13) {
      animation-name: move13;
    }
    .fireflies .firefly:nth-child(13):before {
      animation-duration: 14s;
    }
    .fireflies .firefly:nth-child(13):after {
      animation-duration: 14s, 9793ms;
      animation-delay: 0ms, 6363ms;
    }
    .fireflies .firefly:nth-child(14) {
      animation-name: move14;
    }
    .fireflies .firefly:nth-child(14):before {
      animation-duration: 14s;
    }
    .fireflies .firefly:nth-child(14):after {
      animation-duration: 14s, 9808ms;
      animation-delay: 0ms, 3952ms;
    }
    .fireflies .firefly:nth-child(15) {
      animation-name: move15;
    }
    .fireflies .firefly:nth-child(15):before {
      animation-duration: 16s;
    }
    .fireflies .firefly:nth-child(15):after {
      animation-duration: 16s, 7982ms;
      animation-delay: 0ms, 1957ms;
    }
    table.fluid-text thead, table.fluid-text tbody, table.fluid-text td, table.fluid-text tr {
      font-size: clamp(0.25rem, 2vw + 0.25rem, 2.25rem);
    }
    table.equal-width {
      table-layout: fixed;
      width: 100%;
    }
    table tbody.striped tr {
      border-bottom: 1px solid var(--white-color);
    }
    table tbody.striped tr:nth-of-type(even) {
      background-color: var(--table-striped-alternate-background-color);
    }
    table tbody.striped tr:last-of-type {
      border-bottom: 2px solid var(--table-striped-border-color);
    }
    table.table-hover tbody tr:hover {
      color: var(--core-color);
      background-color: var(--table-hover-color);
    }
    table.table-light thead {
      border-bottom: 2px dashed var(--neutral-300);
    }
    table.table-light thead tr {
      background-color: var(--light-background-color-lighter);
      color: var(--dark-text-color);
      text-align: left;
      font-family: henderson-slab-basic, serif;
      border-bottom: 2px dashed var(--neutral-300);
    }
    table.table-light th, table.table-light td {
      padding: 12px 15px;
    }
    table.table-light body tr {
      border-bottom: 1px solid var(--white-color);
    }
    table.table-light body tr:nth-of-type(even) {
      background-color: var(--neutral-300);
    }
    table.table-light body tr:last-of-type {
      border-bottom: 2px solid var(--secondary-color);
    }
    table.table-light.table-hover tbody tr:hover {
      color: var(--dark-text-color);
      background-color: var(--table-hover-color);
    }
    .cms-layout table h6 div.tooltip-container {
      font-size: inherit;
    }
    .cms-layout thead th {
      vertical-align: bottom;
      border-bottom: 2px solid var(--secondary-color);
    }
    .cms-layout thead th .th-content {
      align-items: center;
      display: flex;
    }
    .cms-layout th, .cms-layout td {
      padding: 1.4rem 1rem;
      border-top: 1px solid var(--white-color);
      vertical-align: middle;
      font-size: 1.1rem;
      letter-spacing: 1px;
    }
    .cms-layout th {
      font-size: 0.8rem;
    }
    .cms-layout tbody tr {
      border-bottom: 1px solid var(--white-color);
      background-color: var(--light-background-color-lighter);
      padding: 20px 25px;
    }
    .cms-layout tbody tr.active {
      background-color: #cdcfb2;
    }
    .cms-layout.table-striped tbody tr {
      border-bottom: 1px solid var(--white-color);
      background-color: var(--light-background-color-lighter);
      padding: 20px 25px;
    }
    .cms-layout.table-striped tbody tr:nth-of-type(even) {
      background-color: #f9f8e9;
    }
    .cms-layout.table-striped tbody tr:last-of-type {
      border-bottom: 2px solid var(--secondary-color);
    }
    .cms-layout.table-sm th {
      padding: 1rem 0.7rem;
    }
    .cms-layout.table-sm td {
      padding: 0.7rem 0.7rem;
    }
    .cms-layout.table-bordered tbody td {
      border: 1px solid var(--border-color-3);
    }
    .cms-layout.table-bordered th {
      border: 1px solid var(--core-color-dark);
    }
    .cms-layout.table-hover tbody tr:hover {
      color: var(--dark-text-color);
      background-color: var(--table-hover-color);
    }
    .header-ribbon {
      background-image: var(--header-ribbon-default-path);
      background-color: transparent;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: contain;
      margin: -4vh 1vw 4vh;
      display: flex;
      text-align: center;
      align-content: center;
      justify-content: center;
      flex-direction: column;
      padding: 0px 40px;
    }
    .header-ribbon h1, .header-ribbon h2, .header-ribbon h3 {
      font-size: 230%;
    }
    .header-ribbon.orange-ribbon {
      background-image: var(--header-ribbon-orange-image-path);
      background-size: 100% 100%;
    }
    .header-ribbon.orange-ribbon h1, .header-ribbon.orange-ribbon h2, .header-ribbon.orange-ribbon h3, .header-ribbon.orange-ribbon h4, .header-ribbon.orange-ribbon h5, .header-ribbon.orange-ribbon h6, .header-ribbon.orange-ribbon p {
      color: var(--header-ribbon-orange-text-color);
      padding-right: 10px;
      margin-top: 4px;
    }
    .header-ribbon.green-ribbon {
      background-image: var(--header-ribbon-green-image-path);
      background-size: 100% 100%;
    }
    .header-ribbon.green-ribbon h1, .header-ribbon.green-ribbon h2, .header-ribbon.green-ribbon h3, .header-ribbon.green-ribbon h4, .header-ribbon.green-ribbon h5, .header-ribbon.green-ribbon h6, .header-ribbon.green-ribbon p {
      color: var(--header-ribbon-green-text-color);
      padding-right: 10px;
      margin-top: 4px;
    }
    .header-ribbon.blue-ribbon {
      background-image: var(--header-ribbon-blue-image-path);
      background-size: 100% 100%;
    }
    .header-ribbon.blue-ribbon h1, .header-ribbon.blue-ribbon h2, .header-ribbon.blue-ribbon h3, .header-ribbon.blue-ribbon h4, .header-ribbon.blue-ribbon h5, .header-ribbon.blue-ribbon h6, .header-ribbon.blue-ribbon p {
      color: var(--header-ribbon-blue-text-color);
      padding-right: 10px;
      margin-top: 4px;
    }
    .header-ribbon.olive-ribbon {
      background-image: url("/images/global/headers/header-ribbon-olive.svg");
      background-size: 100% 100%;
    }
    .header-ribbon.olive-ribbon h1, .header-ribbon.olive-ribbon h2, .header-ribbon.olive-ribbon h3, .header-ribbon.olive-ribbon h4, .header-ribbon.olive-ribbon h5, .header-ribbon.olive-ribbon h6, .header-ribbon.olive-ribbon p {
      color: var(--header-ribbon-olive-text-color);
      padding-right: 10px;
      margin-top: 4px;
    }
    .header-ribbon.mustard-ribbon {
      background-image: var(--header-ribbon-mustard-image-path);
      background-size: 100% 100%;
    }
    .header-ribbon.mustard-ribbon h1, .header-ribbon.mustard-ribbon h2, .header-ribbon.mustard-ribbon h3, .header-ribbon.mustard-ribbon h4, .header-ribbon.mustard-ribbon h5, .header-ribbon.mustard-ribbon h6, .header-ribbon.mustard-ribbon p {
      color: var(--header-ribbon-mustard-text-color);
      padding-right: 10px;
      margin-top: 4px;
    }
    .header-ribbon.double-ribbon-left {
      background-image: var(--header-ribbon-double-left-image-path);
      margin: -1vh 0vw 4vh 4vh;
      z-index: 2;
      padding-right: 0.275vw;
      background-size: 100% 100%;
    }
    .header-ribbon.double-ribbon-left h1, .header-ribbon.double-ribbon-left h2, .header-ribbon.double-ribbon-left h3, .header-ribbon.double-ribbon-left h4, .header-ribbon.double-ribbon-left h5, .header-ribbon.double-ribbon-left h6, .header-ribbon.double-ribbon-left p {
      color: var(--header-ribbon-double-text-color);
      padding-right: 10px;
      margin-top: 4px;
    }
    .header-ribbon.double-ribbon-left.olive {
      background-image: var(--header-ribbon-double-left-olive-image-path);
    }
    .header-ribbon.double-ribbon-right {
      background-image: var(--header-ribbon-double-right-image-path);
      margin: -1vh 4vw 4vh -1vh;
      z-index: 3;
      padding-right: 0.275vw;
      padding-left: 1.5vw;
      background-size: 100% 100%;
    }
    .header-ribbon.double-ribbon-right h1, .header-ribbon.double-ribbon-right h2, .header-ribbon.double-ribbon-right h3, .header-ribbon.double-ribbon-right h4, .header-ribbon.double-ribbon-right h5, .header-ribbon.double-ribbon-right h6, .header-ribbon.double-ribbon-right p {
      color: var(--header-ribbon-double-text-color);
      padding-right: 10px;
      margin-top: 4px;
    }
    .header-ribbon.double-ribbon-right.olive {
      background-image: var(--header-ribbon-double-right-olive-image-path);
    }
    .header-ribbon.module-seq-ribbon-orange {
      background-image: url("/images/levels/modules/module-sequence-ribbon-orange.svg");
      background-repeat: no-repeat;
      background-size: contain;
      padding: 3.4vh 1vh 1vh 1vh;
    }
    .full-width-app .page-header .alert, .cms-preview .page-header .alert {
      display: flex;
      justify-content: center;
      width: fit-content;
      padding: 0.5rem 3rem;
    }
    .page-title-container {
      display: flex;
      align-items: center;
      flex-direction: column;
    }
    @media (max-width: 991.98px) {
      .page-title-container h1 {
        font-size: 4vw;
      }
    }
    .element-top-center {
      position: absolute;
      top: 0;
      margin: 1rem;
      z-index: 2;
    }
    .bottom-right-container {
      position: relative;
    }
    .bottom-right-container::before {
      content: "";
      flex: 1;
    }
    .container-centered {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      height: 100%;
      position: fixed;
    }
    .logo-img {
      width: 90%;
    }
    .logo-container {
      display: block;
      margin: auto;
      margin-top: -8em;
      text-align: center;
    }
    .box {
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: center;
      width: 25%;
      min-height: 50%;
      min-width: 300px;
      padding: 20px;
      background-color: var(--light-background-color);
      margin: auto;
      border-radius: 0.8rem;
      margin-top: 8em;
    }
    @media (max-width: 991.98px) {
      .box {
        width: 60%;
      }
    }
    @media (max-width: 767.98px) {
      .box {
        width: 90%;
      }
    }
    .full-width-app .container-centered.game-layout, .cms-layout .container-centered.game-layout {
      height: 100%;
    }
    .full-width-app .canvas, .cms-layout .canvas {
      background-color: var(--light-background-color);
      border-radius: 0.8rem;
      padding: 20px;
      z-index: 1;
      position: relative;
    }
    .full-width-app .canvas.card-gold, .full-width-app .floating-menu-container .canvas.floating-menu, .floating-menu-container .full-width-app .canvas.floating-menu, .cms-layout .canvas.card-gold, .cms-layout .floating-menu-container .canvas.floating-menu, .floating-menu-container .cms-layout .canvas.floating-menu {
      box-shadow: 5px 4px 0px 2px var(--secondary-color);
    }
    .full-width-app .canvas-centered, .cms-layout .canvas-centered {
      background-color: var(--light-background-color);
      border-radius: 0.8rem;
      padding: 20px;
      z-index: 1;
      max-height: 75vh;
      overflow-y: scroll;
      scroll-behavior: smooth;
    }
    .full-width-app .card, .full-width-app .floating-menu-container .floating-menu, .floating-menu-container .full-width-app .floating-menu, .cms-layout .card, .cms-layout .floating-menu-container .floating-menu, .floating-menu-container .cms-layout .floating-menu {
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: center;
      width: 50%;
      min-height: 50%;
      min-width: 300px;
      background-color: var(--light-background-color);
      border-color: transparent;
      margin: auto;
      border-radius: 0.8rem;
    }
    .full-width-app .card.card-gold, .full-width-app .floating-menu-container .floating-menu, .floating-menu-container .full-width-app .floating-menu, .cms-layout .card.card-gold, .cms-layout .floating-menu-container .floating-menu, .floating-menu-container .cms-layout .floating-menu {
      box-shadow: 5px 4px 0px 2px var(--secondary-color);
    }
    @media (max-width: 1199.98px) {
      .full-width-app .card, .full-width-app .floating-menu-container .floating-menu, .floating-menu-container .full-width-app .floating-menu, .cms-layout .card, .cms-layout .floating-menu-container .floating-menu, .floating-menu-container .cms-layout .floating-menu {
        width: 60%;
      }
    }
    @media (max-width: 991.98px) {
      .full-width-app .card, .full-width-app .floating-menu-container .floating-menu, .floating-menu-container .full-width-app .floating-menu, .cms-layout .card, .cms-layout .floating-menu-container .floating-menu, .floating-menu-container .cms-layout .floating-menu {
        width: 70%;
      }
    }
    @media (max-width: 767.98px) {
      .full-width-app .card, .full-width-app .floating-menu-container .floating-menu, .floating-menu-container .full-width-app .floating-menu, .cms-layout .card, .cms-layout .floating-menu-container .floating-menu, .floating-menu-container .cms-layout .floating-menu {
        width: 95%;
      }
    }
    .full-width-app .card .card-content, .full-width-app .floating-menu-container .floating-menu .card-content, .floating-menu-container .full-width-app .floating-menu .card-content, .cms-layout .card .card-content, .cms-layout .floating-menu-container .floating-menu .card-content, .floating-menu-container .cms-layout .floating-menu .card-content {
      max-height: 500px;
      overflow-y: scroll;
      padding: 20px;
    }
    .full-width-app .card.card-gold, .full-width-app .floating-menu-container .floating-menu, .floating-menu-container .full-width-app .floating-menu, .cms-layout .card.card-gold, .cms-layout .floating-menu-container .floating-menu, .floating-menu-container .cms-layout .floating-menu {
      box-shadow: 5px 4px 0px 2px var(--secondary-color);
    }
    .full-width-app .card.card-olive, .full-width-app .floating-menu-container .card-olive.floating-menu, .floating-menu-container .full-width-app .card-olive.floating-menu, .cms-layout .card.card-olive, .cms-layout .floating-menu-container .card-olive.floating-menu, .floating-menu-container .cms-layout .card-olive.floating-menu {
      box-shadow: 5px 4px 0px 2px var(--accent-color-11);
    }
    .full-width-app .card.card-orange, .full-width-app .floating-menu-container .card-orange.floating-menu, .floating-menu-container .full-width-app .card-orange.floating-menu, .cms-layout .card.card-orange, .cms-layout .floating-menu-container .card-orange.floating-menu, .floating-menu-container .cms-layout .card-orange.floating-menu {
      box-shadow: 5px 4px 0px 2px var(--accent-color-1);
    }
    .full-width-app .mini-card, .cms-layout .mini-card {
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: center;
      padding: 20px;
      background-color: var(--light-background-color);
      border-color: transparent;
      margin: auto;
      border-radius: 0.8rem;
    }
    .full-width-app .mini-card.card-gold, .full-width-app .floating-menu-container .mini-card.floating-menu, .floating-menu-container .full-width-app .mini-card.floating-menu, .cms-layout .mini-card.card-gold, .cms-layout .floating-menu-container .mini-card.floating-menu, .floating-menu-container .cms-layout .mini-card.floating-menu {
      box-shadow: 5px 4px 0px 2px var(--secondary-color);
    }
    .full-width-app .mini-card.card-olive, .cms-layout .mini-card.card-olive {
      box-shadow: 5px 4px 0px 2px var(--accent-color-11);
    }
    .full-width-app .mini-card.card-orange, .cms-layout .mini-card.card-orange {
      box-shadow: 5px 4px 0px 2px var(--accent-color-1);
    }
    .full-width-app .break, .cms-layout .break {
      flex-basis: 100%;
      height: 0;
    }
    .full-width-app .tile, .cms-layout .tile {
      position: relative;
      isolation: isolate;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-direction: column;
      flex-direction: column;
      min-width: 0;
      word-wrap: break-word;
      background-color: var(--light-background-color);
      background-clip: border-box;
      border-radius: 1.2rem;
      align-items: inherit;
    }
    .full-width-app .tile .card-header, .cms-layout .tile .card-header {
      font-family: henderson-slab-basic, serif;
      color: var(--dark-text-color);
      border-radius: 1.2rem 1.2rem 0 0;
    }
    .bg-primary .full-width-app .tile .card-header, .bg-primary .cms-layout .tile .card-header {
      color: var(--light-background-color);
    }
    .full-width-app .tile .card-body, .cms-layout .tile .card-body {
      padding: min(2vh, 1.25rem);
    }
    .full-width-app .tile .card-body .card-text label, .cms-layout .tile .card-body .card-text label {
      letter-spacing: 0.05rem;
      line-height: 1.2;
    }
    .full-width-app .tile .card-img-top, .full-width-app .tile .tile-header-img, .cms-layout .tile .card-img-top, .cms-layout .tile .tile-header-img {
      width: 100%;
      border-top-left-radius: calc(1.2rem - 1px);
      border-top-right-radius: calc(1.2rem - 1px);
    }
    .full-width-app .tile .tile-header, .cms-layout .tile .tile-header {
      overflow: hidden;
      position: relative;
      isolation: isolate;
    }
    .full-width-app .tile .tile-header-img, .cms-layout .tile .tile-header-img {
      z-index: -1;
      filter: blur(3px);
      filter: grayscale(1);
      filter: saturate(0.2);
      filter: hue-rotate(5deg);
    }
    .full-width-app .tile.tile-gold, .cms-layout .tile.tile-gold {
      box-shadow: 5px 4px 0px 2px var(--tile-accent-box-shadow-color);
    }
    .full-width-app .tile.tile-shadowed, .cms-layout .tile.tile-shadowed {
      box-shadow: 0 0 20px 0px rgba(227, 206, 151, 0.4);
      background-color: var(--light-background-color-lighter);
    }
    .full-width-app .tile.tile-dark-shadowed, .cms-layout .tile.tile-dark-shadowed {
      background-color: var(--neutral-500);
      box-shadow: 5px 4px 0px 2px #282725;
      transition: all 0.3s ease-out;
    }
    .full-width-app .tile.tile-dark-shadowed:hover, .cms-layout .tile.tile-dark-shadowed:hover {
      box-shadow: 0px 0px 0px 0px;
      transform: translate(5px, 4px);
    }
    .full-width-app .tile.hover-tile, .cms-layout .tile.hover-tile {
      box-shadow: 0 14px 26px rgba(0, 0, 0, 0.04);
      transition: all 0.3s ease-out;
    }
    .full-width-app .tile.hover-tile:hover, .cms-layout .tile.hover-tile:hover {
      transform: translateY(-5px) scale(1.005) translateZ(0);
      box-shadow: 0 24px 36px rgba(0, 0, 0, 0.11), 0 24px 46px rgba(0, 0, 0, 0.08);
      text-decoration: none;
    }
    .full-width-app .tile.hover-tile a:hover, .cms-layout .tile.hover-tile a:hover {
      text-decoration: none;
    }
    .full-width-app .tile.dashed-line, .cms-layout .tile.dashed-line {
      margin: 1.5rem;
      padding: 1rem;
      border-style: dashed;
      border-width: 0.2rem;
      border-color: var(--light-background-color);
      background-color: inherit;
      flex-grow: 1;
    }
    .full-width-app .tile-grid [class^=col]:nth-child(6n-5) .tile, .cms-layout .tile-grid [class^=col]:nth-child(6n-5) .tile {
      background-color: var(--accent-color-6-dark);
    }
    .full-width-app .tile-grid [class^=col]:nth-child(6n-4) .tile, .cms-layout .tile-grid [class^=col]:nth-child(6n-4) .tile {
      background-color: var(--accent-color-10);
    }
    .full-width-app .tile-grid [class^=col]:nth-child(6n-3) .tile, .cms-layout .tile-grid [class^=col]:nth-child(6n-3) .tile {
      background-color: var(--accent-color-1);
    }
    .full-width-app .tile-grid [class^=col]:nth-child(6n-2) .tile, .cms-layout .tile-grid [class^=col]:nth-child(6n-2) .tile {
      background-color: var(--primary-color);
    }
    .full-width-app .tile-grid [class^=col]:nth-child(6n-1) .tile, .cms-layout .tile-grid [class^=col]:nth-child(6n-1) .tile {
      background-color: var(--accent-color-2);
    }
    .full-width-app .tile-grid [class^=col]:nth-child(6n-0) .tile, .cms-layout .tile-grid [class^=col]:nth-child(6n-0) .tile {
      background-color: var(--secondary-color);
    }
    .full-width-app .catalog-grid, .cms-layout .catalog-grid {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: flex-start;
      margin: 1vw;
    }
    .full-width-app .catalog-grid-square, .cms-layout .catalog-grid-square {
      padding: 1vw;
    }
    .full-width-app .tile .themed, .cms-layout .tile .themed {
      height: 100%;
      background-color: var(--secondary-color);
    }
    .full-width-app .tile .themed .card-body, .cms-layout .tile .themed .card-body {
      display: flex;
      flex-direction: column;
      margin-top: 2vh;
      align-items: start;
    }
    .full-width-app .tile .themed .card-text, .cms-layout .tile .themed .card-text {
      display: flex;
      flex-direction: column;
      justify-content: start;
      flex-grow: 1;
    }
    .full-width-app .tile .themed .card-text p, .cms-layout .tile .themed .card-text p {
      color: inherit;
    }
    .full-width-app .tile .themed .card-text h6, .cms-layout .tile .themed .card-text h6 {
      color: inherit;
    }
    .circle-stamp {
      background-image: url("/images/global/avatars/avatar-circle-stamp.svg");
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: contain;
      background-color: var(--accent-color-1-dark);
      border-radius: 50%;
      height: 140px;
      width: 140px;
      margin: 10px;
      display: flex;
      text-align: center;
      align-content: center;
      justify-content: center;
      flex-direction: column;
    }
    @media (max-width: 1499.98px) {
      .circle-stamp {
        width: 10vw;
        height: 10vw;
      }
    }
    .circle-stamp-inner {
      font-family: henderson-slab-basic, serif;
      color: var(--white-color);
      font-size: 150%;
      line-height: 1.1;
      padding: 1rem;
      display: flex;
      justify-content: center;
    }
    .circle-stamp-inner img {
      height: 100%;
      width: 100%;
      border-radius: 50%;
      align-self: center;
    }
    .callout-box {
      margin: auto;
      max-width: 700px;
      background-color: var(--white-color);
      border-radius: 0.8rem;
      padding: 10px 50px;
    }
    .jumbotron {
      padding: 2rem 1rem;
      margin-bottom: 2rem;
      background-color: var(--core-color);
      border-radius: 1.8rem;
    }
    .jumbotron h1, .jumbotron h2, .jumbotron h3, .jumbotron h4, .jumbotron h5, .jumbotron p, .jumbotron ul, .jumbotron ol, .jumbotron li {
      color: var(--light-text-color);
    }
    .jumbotron hr {
      border: none;
    }
    .team-tile {
      margin: 1vw;
      flex: 1;
      max-width: 20vw;
    }
    .team-tile .card-title-ribbon {
      background-image: url("/images/levels/modules/module-sequence-ribbon-orange.svg");
      background-repeat: no-repeat;
      background-size: contain;
      padding: 3.4vh 1vh 1vh 1vh;
    }
    .team-tile .card-title, .team-tile h5.card-title {
      text-align: center;
      font-family: fenway-park-jf, sans-serif;
      color: var(--light-text-color);
      margin-bottom: 0;
    }
    .team-tile .card-text {
      text-align: center;
    }
    .team-tile .card-text p {
      color: var(--muted-text-color);
      font-family: henderson-slab-basic, serif;
      font-size: 1vw;
    }
    .team-tile .card-img {
      max-height: 30vh;
      overflow: hidden;
      display: flex;
    }
    .team-tile .card-img img {
      min-height: 0;
      min-width: 0;
    }
    .stamp {
      width: 140px;
      height: 140px;
      display: inline-block;
      padding: 10px;
      background: var(--white-color);
      position: relative;
      -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.2));
      background: radial-gradient(transparent 0px, transparent 4px, var(--white-color) 4px, var(--white-color));
      background-size: 20px 20px;
      background-position: -10px -10px;
    }
    @media (max-width: 1199.98px) {
      .stamp {
        height: 120px;
        width: 120px;
      }
    }
    .stamp:after {
      content: "";
      position: absolute;
      left: 5px;
      top: 5px;
      right: 5px;
      bottom: 5px;
      z-index: -1;
    }
    .stamp .stamp-bg {
      background-color: var(--light-background-color-darker);
      display: flex;
      text-align: center;
      height: 120px;
      width: 120px;
      padding: 12px;
    }
    @media (max-width: 1199.98px) {
      .stamp .stamp-bg {
        height: 100px;
        width: 100px;
        padding: 0px;
      }
      .stamp .stamp-bg h2, .stamp .stamp-bg h3, .stamp .stamp-bg h4, .stamp .stamp-bg h5, .stamp .stamp-bg h6, .stamp .stamp-bg p {
        font-size: 70%;
      }
    }
    .stamp.stamp-md {
      height: 200px;
      width: 200px;
    }
    @media screen and (max-height: 800px) {
      .stamp.stamp-md {
        height: 160px;
        width: 160px;
      }
    }
    .stamp.stamp-md .stamp-bg {
      height: 180px;
      width: 180px;
    }
    @media screen and (max-height: 800px) {
      .stamp.stamp-md .stamp-bg {
        height: 140px;
        width: 140px;
      }
    }
    .stamp.stamp-rectangle {
      height: 160px;
      width: 420px;
    }
    @media screen and (max-height: 800px) {
      .stamp.stamp-rectangle {
        height: 100px;
        width: 320px;
      }
    }
    .stamp.stamp-rectangle .stamp-bg {
      height: 140px;
      width: 400px;
    }
    @media screen and (max-height: 800px) {
      .stamp.stamp-rectangle .stamp-bg {
        height: 80px;
        width: 300px;
      }
    }
    .paper-stack-container {
      background-color: transparent;
      background-image: url(/images/global/shapes/paper-stack.svg);
      background-position: 50% 50%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-attachment: scroll;
      background-clip: border-box;
      object-fit: fill;
    }
    .paper-stack-container.book {
      background-image: url(/images/global/shapes/paper-stack-book.svg);
    }
    .paper-stack-container.book .book-nav .nav-left, .paper-stack-container.book .book-nav .nav-right {
      display: flex;
      flex-direction: row;
    }
    @media screen and (max-height: 768px) {
      .paper-stack-container.book .book-nav .nav-left, .paper-stack-container.book .book-nav .nav-right {
        width: 20%;
      }
    }
    .border.dashed {
      border: 3px dashed var(--neutral-400);
    }
    .dotted-line, .full-width-app hr, .cms-preview hr, .login-form hr, .cms-layout hr, .jumbotron hr {
      height: 4px;
      width: 100%;
      background-image: linear-gradient(to right, var(--header-row-color) 33%, rgba(255, 255, 255, 0) 0%);
      background-position: bottom;
      background-size: 12px 1px;
      background-repeat: repeat-x;
      margin: 0.4rem 0rem;
    }
    @media (min-width: 1200px) {
      .dotted-line, .full-width-app hr, .cms-preview hr, .login-form hr, .cms-layout hr, .jumbotron hr {
        margin: 1rem 0rem;
      }
    }
    @media screen and (max-height: 768px) {
      .dotted-line, .full-width-app hr, .cms-preview hr, .login-form hr, .cms-layout hr, .jumbotron hr {
        margin: 0rem;
      }
    }
    .circle {
      border-radius: 50%;
      height: 40px;
      width: 40px;
      line-height: 1.4;
    }
    .top-position {
      position: absolute;
      top: 10vh;
      z-index: 3;
    }
    @media screen and (max-height: 768px) {
      .top-position {
        top: 5vh;
      }
    }
    .bottom-position {
      position: absolute;
      bottom: 10vh;
      z-index: 3;
    }
    @media screen and (max-height: 768px) {
      .bottom-position {
        bottom: 5vh;
      }
    }
    .fixed.center-fixed {
      left: 50%;
      transform: translate(-50%, 0);
    }
    .full-screen {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      overflow: auto;
      background-color: var(--core-color);
    }
    .nmb-1 {
      margin-bottom: max(-1vh, -10px);
    }
    @media (min-width: 1500px) {
      .nmb-xxl-1 {
        margin-bottom: max(-1vh, -10px);
      }
    }
    @media screen and (min-height: 900px) {
      .nmb-xxl-1 {
        margin-bottom: max(-1vh, -10px);
      }
    }
    @media (min-width: 1200px) {
      .nmb-xl-1 {
        margin-bottom: max(-1vh, -10px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmb-xl-1 {
        margin-bottom: max(-1vh, -10px);
      }
    }
    @media (min-width: 992px) {
      .nmb-lg-1 {
        margin-bottom: max(-1vh, -10px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmb-lg-1 {
        margin-bottom: max(-1vh, -10px);
      }
    }
    @media (min-width: 768px) {
      .nmb-md-1 {
        margin-bottom: max(-1vh, -10px);
      }
    }
    @media screen and (max-height: 768px) {
      .nmb-md-1 {
        margin-bottom: max(-1vh, -10px);
      }
    }
    .nmb-2 {
      margin-bottom: max(-2vh, -20px);
    }
    @media (min-width: 1500px) {
      .nmb-xxl-2 {
        margin-bottom: max(-2vh, -20px);
      }
    }
    @media screen and (min-height: 900px) {
      .nmb-xxl-2 {
        margin-bottom: max(-2vh, -20px);
      }
    }
    @media (min-width: 1200px) {
      .nmb-xl-2 {
        margin-bottom: max(-2vh, -20px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmb-xl-2 {
        margin-bottom: max(-2vh, -20px);
      }
    }
    @media (min-width: 992px) {
      .nmb-lg-2 {
        margin-bottom: max(-2vh, -20px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmb-lg-2 {
        margin-bottom: max(-2vh, -20px);
      }
    }
    @media (min-width: 768px) {
      .nmb-md-2 {
        margin-bottom: max(-2vh, -20px);
      }
    }
    @media screen and (max-height: 768px) {
      .nmb-md-2 {
        margin-bottom: max(-2vh, -20px);
      }
    }
    .nmb-3 {
      margin-bottom: max(-3vh, -30px);
    }
    @media (min-width: 1500px) {
      .nmb-xxl-3 {
        margin-bottom: max(-3vh, -30px);
      }
    }
    @media screen and (min-height: 900px) {
      .nmb-xxl-3 {
        margin-bottom: max(-3vh, -30px);
      }
    }
    @media (min-width: 1200px) {
      .nmb-xl-3 {
        margin-bottom: max(-3vh, -30px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmb-xl-3 {
        margin-bottom: max(-3vh, -30px);
      }
    }
    @media (min-width: 992px) {
      .nmb-lg-3 {
        margin-bottom: max(-3vh, -30px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmb-lg-3 {
        margin-bottom: max(-3vh, -30px);
      }
    }
    @media (min-width: 768px) {
      .nmb-md-3 {
        margin-bottom: max(-3vh, -30px);
      }
    }
    @media screen and (max-height: 768px) {
      .nmb-md-3 {
        margin-bottom: max(-3vh, -30px);
      }
    }
    .nmb-4 {
      margin-bottom: max(-4vh, -40px);
    }
    @media (min-width: 1500px) {
      .nmb-xxl-4 {
        margin-bottom: max(-4vh, -40px);
      }
    }
    @media screen and (min-height: 900px) {
      .nmb-xxl-4 {
        margin-bottom: max(-4vh, -40px);
      }
    }
    @media (min-width: 1200px) {
      .nmb-xl-4 {
        margin-bottom: max(-4vh, -40px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmb-xl-4 {
        margin-bottom: max(-4vh, -40px);
      }
    }
    @media (min-width: 992px) {
      .nmb-lg-4 {
        margin-bottom: max(-4vh, -40px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmb-lg-4 {
        margin-bottom: max(-4vh, -40px);
      }
    }
    @media (min-width: 768px) {
      .nmb-md-4 {
        margin-bottom: max(-4vh, -40px);
      }
    }
    @media screen and (max-height: 768px) {
      .nmb-md-4 {
        margin-bottom: max(-4vh, -40px);
      }
    }
    .nmb-5 {
      margin-bottom: max(-5vh, -50px);
    }
    @media (min-width: 1500px) {
      .nmb-xxl-5 {
        margin-bottom: max(-5vh, -50px);
      }
    }
    @media screen and (min-height: 900px) {
      .nmb-xxl-5 {
        margin-bottom: max(-5vh, -50px);
      }
    }
    @media (min-width: 1200px) {
      .nmb-xl-5 {
        margin-bottom: max(-5vh, -50px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmb-xl-5 {
        margin-bottom: max(-5vh, -50px);
      }
    }
    @media (min-width: 992px) {
      .nmb-lg-5 {
        margin-bottom: max(-5vh, -50px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmb-lg-5 {
        margin-bottom: max(-5vh, -50px);
      }
    }
    @media (min-width: 768px) {
      .nmb-md-5 {
        margin-bottom: max(-5vh, -50px);
      }
    }
    @media screen and (max-height: 768px) {
      .nmb-md-5 {
        margin-bottom: max(-5vh, -50px);
      }
    }
    .nmb-6 {
      margin-bottom: max(-6vh, -60px);
    }
    @media (min-width: 1500px) {
      .nmb-xxl-6 {
        margin-bottom: max(-6vh, -60px);
      }
    }
    @media screen and (min-height: 900px) {
      .nmb-xxl-6 {
        margin-bottom: max(-6vh, -60px);
      }
    }
    @media (min-width: 1200px) {
      .nmb-xl-6 {
        margin-bottom: max(-6vh, -60px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmb-xl-6 {
        margin-bottom: max(-6vh, -60px);
      }
    }
    @media (min-width: 992px) {
      .nmb-lg-6 {
        margin-bottom: max(-6vh, -60px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmb-lg-6 {
        margin-bottom: max(-6vh, -60px);
      }
    }
    @media (min-width: 768px) {
      .nmb-md-6 {
        margin-bottom: max(-6vh, -60px);
      }
    }
    @media screen and (max-height: 768px) {
      .nmb-md-6 {
        margin-bottom: max(-6vh, -60px);
      }
    }
    .nmb-7 {
      margin-bottom: max(-7vh, -70px);
    }
    @media (min-width: 1500px) {
      .nmb-xxl-7 {
        margin-bottom: max(-7vh, -70px);
      }
    }
    @media screen and (min-height: 900px) {
      .nmb-xxl-7 {
        margin-bottom: max(-7vh, -70px);
      }
    }
    @media (min-width: 1200px) {
      .nmb-xl-7 {
        margin-bottom: max(-7vh, -70px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmb-xl-7 {
        margin-bottom: max(-7vh, -70px);
      }
    }
    @media (min-width: 992px) {
      .nmb-lg-7 {
        margin-bottom: max(-7vh, -70px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmb-lg-7 {
        margin-bottom: max(-7vh, -70px);
      }
    }
    @media (min-width: 768px) {
      .nmb-md-7 {
        margin-bottom: max(-7vh, -70px);
      }
    }
    @media screen and (max-height: 768px) {
      .nmb-md-7 {
        margin-bottom: max(-7vh, -70px);
      }
    }
    .nmb-8 {
      margin-bottom: max(-8vh, -80px);
    }
    @media (min-width: 1500px) {
      .nmb-xxl-8 {
        margin-bottom: max(-8vh, -80px);
      }
    }
    @media screen and (min-height: 900px) {
      .nmb-xxl-8 {
        margin-bottom: max(-8vh, -80px);
      }
    }
    @media (min-width: 1200px) {
      .nmb-xl-8 {
        margin-bottom: max(-8vh, -80px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmb-xl-8 {
        margin-bottom: max(-8vh, -80px);
      }
    }
    @media (min-width: 992px) {
      .nmb-lg-8 {
        margin-bottom: max(-8vh, -80px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmb-lg-8 {
        margin-bottom: max(-8vh, -80px);
      }
    }
    @media (min-width: 768px) {
      .nmb-md-8 {
        margin-bottom: max(-8vh, -80px);
      }
    }
    @media screen and (max-height: 768px) {
      .nmb-md-8 {
        margin-bottom: max(-8vh, -80px);
      }
    }
    .nmb-9 {
      margin-bottom: max(-9vh, -90px);
    }
    @media (min-width: 1500px) {
      .nmb-xxl-9 {
        margin-bottom: max(-9vh, -90px);
      }
    }
    @media screen and (min-height: 900px) {
      .nmb-xxl-9 {
        margin-bottom: max(-9vh, -90px);
      }
    }
    @media (min-width: 1200px) {
      .nmb-xl-9 {
        margin-bottom: max(-9vh, -90px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmb-xl-9 {
        margin-bottom: max(-9vh, -90px);
      }
    }
    @media (min-width: 992px) {
      .nmb-lg-9 {
        margin-bottom: max(-9vh, -90px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmb-lg-9 {
        margin-bottom: max(-9vh, -90px);
      }
    }
    @media (min-width: 768px) {
      .nmb-md-9 {
        margin-bottom: max(-9vh, -90px);
      }
    }
    @media screen and (max-height: 768px) {
      .nmb-md-9 {
        margin-bottom: max(-9vh, -90px);
      }
    }
    .nmb-10 {
      margin-bottom: max(-10vh, -100px);
    }
    @media (min-width: 1500px) {
      .nmb-xxl-10 {
        margin-bottom: max(-10vh, -100px);
      }
    }
    @media screen and (min-height: 900px) {
      .nmb-xxl-10 {
        margin-bottom: max(-10vh, -100px);
      }
    }
    @media (min-width: 1200px) {
      .nmb-xl-10 {
        margin-bottom: max(-10vh, -100px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmb-xl-10 {
        margin-bottom: max(-10vh, -100px);
      }
    }
    @media (min-width: 992px) {
      .nmb-lg-10 {
        margin-bottom: max(-10vh, -100px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmb-lg-10 {
        margin-bottom: max(-10vh, -100px);
      }
    }
    @media (min-width: 768px) {
      .nmb-md-10 {
        margin-bottom: max(-10vh, -100px);
      }
    }
    @media screen and (max-height: 768px) {
      .nmb-md-10 {
        margin-bottom: max(-10vh, -100px);
      }
    }
    .container-centered, .back-button-whatever, .activity-practice-button {
      position: relative;
      z-index: 1;
    }
    .flashcard {
      width: 18vw;
      height: calc(18vw * 1.25);
      min-height: 200px;
      min-width: 150px;
      display: flex;
      flex-direction: column;
      position: relative;
      background-color: var(--light-background-color);
      border-radius: 1rem;
      box-shadow: 1px 1px 0px 12px var(--flashcard-border-color);
      color: var(--black-text-color);
      justify-content: space-between;
      align-content: center;
      margin: 2vw;
      backface-visibility: hidden;
      isolation: isolate;
    }
    @media screen and (min-width: 2557px) {
      .flashcard {
        box-shadow: 1px 1px 0px 26px var(--flashcard-border-color);
        border-radius: 3.6rem;
      }
    }
    @media screen and (max-height: 768px) {
      .flashcard {
        width: calc(18vw - 2vw);
        height: calc(18vw * 1.25 - 2vw);
      }
    }
    .flashcard .card-click-area {
      height: 100%;
      width: 100%;
      position: absolute;
      z-index: 0;
    }
    .flashcard.card-back {
      background-image: url("/images/pages/flashcards/flashcards-bg.png");
      background-size: cover;
      background-repeat: no-repeat;
      border: none;
      backface-visibility: hidden;
    }
    .flashcard.card-back .card-click-area {
      z-index: 3;
    }
    .flashcard.card-back .flashcard-text {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
    }
    .flashcard.card-back .flashcard-text h4, .flashcard.card-back .flashcard-text h5, .flashcard.card-back .flashcard-text h6, .flashcard.card-back .flashcard-text p {
      background-color: var(--light-background-color);
      border-radius: 0.2rem;
      line-height: 1rem;
      transform: perspective(10px) rotateX(-1deg);
      padding: 0.8rem 0.8rem;
      align-self: center;
      width: 90%;
      margin: 1rem auto;
    }
    .flashcard.card-back .flashcard-text h4 {
      padding: 2rem 0.8rem;
      box-shadow: 12px 12px 0px var(--core-color-dark);
      font-size: 200%;
      margin-top: 30px;
      margin-bottom: 0px;
      line-height: 2rem;
    }
    .flashcard.card-back .flashcard-text h5 {
      box-shadow: 12px 12px 0px var(--core-color-dark);
      font-size: larger;
    }
    .flashcard.card-back .flashcard-type {
      height: 0%;
    }
    .flashcard.large .flashcard-img {
      max-height: 22em;
    }
    .flashcard.large .flashcard-img img {
      max-height: 16em;
    }
    .flashcard:hover {
      background-color: var(--light-background-color);
      color: var(--black-text-color);
    }
    @media only screen and (max-width: 1920px) {
      .flashcard .video-btn {
        transform: translate(0.1vw, -0.1vh);
      }
    }
    @media only screen and (max-width: 1600px) {
      .flashcard .video-btn {
        transform: translate(0.1vw, -0.4vh);
      }
    }
    @media (max-width: 1499.98px) {
      .flashcard .video-btn {
        transform: translate(0.1vw, -1vh);
      }
    }
    @media only screen and (max-width: 1920px) {
      .flashcard .audio-btn {
        transform: translate(0.1vw, 0.17vh);
      }
    }
    @media only screen and (max-width: 1600px) {
      .flashcard .audio-btn {
        transform: translate(0.1vw, 0.1vh);
      }
    }
    .flashcard .audio-btn, .flashcard .video-btn {
      background-color: var(--flashcard-btn-color);
      border-top-left-radius: 1.2rem;
      border-bottom-right-radius: 0.8rem;
      border: none;
      -webkit-transition: background-color 0.1s;
      transition: background-color ease-in-out 0.1s;
      -ms-flex-item-align: end;
      align-self: flex-end;
      padding: 0;
    }
    @media screen and (min-width: 3000px) {
      .flashcard .audio-btn, .flashcard .video-btn {
        border-bottom-right-radius: 3rem;
      }
    }
    .flashcard .audio-btn:hover, .flashcard .audio-btn.hover, .flashcard .video-btn:hover, .flashcard .video-btn.hover {
      background-color: var(--core-color-light);
    }
    .flashcard .audio-btn:focus, .flashcard .audio-btn.focus, .flashcard .video-btn:focus, .flashcard .video-btn.focus {
      background-color: var(--core-color-light);
      border: none;
      box-shadow: none;
    }
    .flashcard .audio-btn:not(:disabled):not(.disabled):active, .flashcard .audio-btn:not(:disabled):not(.disabled).active, .flashcard .video-btn:not(:disabled):not(.disabled):active, .flashcard .video-btn:not(:disabled):not(.disabled).active {
      background-color: var(--core-color-light);
    }
    .flashcard .audio-btn:empty, .flashcard .video-btn:empty {
      display: none;
    }
    .flashcard .audio-btn button, .flashcard .audio-btn .btn, .flashcard .video-btn button, .flashcard .video-btn .btn {
      background-color: transparent;
      border: none;
      transition: background-color ease-in-out 0.1s;
      align-self: flex-end;
      margin-right: 0px;
      padding: 0.8vw 0.6vw 0.6vw 0.8vw;
    }
    .flashcard .audio-btn button:focus, .flashcard .audio-btn button.focus, .flashcard .audio-btn .btn:focus, .flashcard .audio-btn .btn.focus, .flashcard .video-btn button:focus, .flashcard .video-btn button.focus, .flashcard .video-btn .btn:focus, .flashcard .video-btn .btn.focus {
      box-shadow: none;
    }
    .flashcard .audio-btn .btn-light:not(:disabled):not(.disabled).active, .flashcard .audio-btn .btn-light:not(:disabled):not(.disabled):active, .flashcard .audio-btn .show > .btn-light.dropdown-toggle, .flashcard .video-btn .btn-light:not(:disabled):not(.disabled).active, .flashcard .video-btn .btn-light:not(:disabled):not(.disabled):active, .flashcard .video-btn .show > .btn-light.dropdown-toggle {
      background-color: var(--light-background-color-darker);
      border-color: var(--neutral-400);
    }
    .flashcard .audio-btn .btn-light.focus, .flashcard .audio-btn .btn-light:focus, .flashcard .video-btn .btn-light.focus, .flashcard .video-btn .btn-light:focus {
      box-shadow: 0 0 0 0.2rem var(--light-background-color-darker);
    }
    .flashcard .video-btn {
      border-bottom-left-radius: 1.2rem;
      border-top-left-radius: 0rem;
      border-top-right-radius: 0.8rem;
      border-bottom-right-radius: 0rem;
      color: var(--light-text-color);
    }
    @media screen and (min-width: 3000px) {
      .flashcard .video-btn {
        border-top-right-radius: 3rem;
      }
    }
    .flashcard .video-btn .btn {
      color: var(--light-text-color);
      padding: 0.6vw 0.6vw 0.8vw 0.8vw;
    }
    .flashcard .journal-btn {
      background-color: var(--secondary-color);
      border-radius: 50%;
      border: none;
      transition: background-color ease-in-out 0.1s;
      align-self: center;
      padding: 0;
      z-index: 9999;
    }
    .flashcard .journal-btn:hover, .flashcard .journal-btn.hover {
      background-color: var(--secondary-color-lighter);
    }
    .flashcard .journal-btn:focus, .flashcard .journal-btn.focus {
      background-color: var(--secondary-color-lighter);
      border: none;
      box-shadow: none;
    }
    .flashcard .journal-btn:not(:disabled):not(.disabled):active, .flashcard .journal-btn:not(:disabled):not(.disabled).active {
      background-color: var(--secondary-color-lighter);
    }
    .flashcard .journal-btn:empty {
      display: none;
    }
    .flashcard .journal-btn button, .flashcard .journal-btn .btn {
      background-color: transparent;
      border: none;
      transition: background-color ease-in-out 0.1s;
      align-self: flex-end;
      margin-right: 0px;
      padding: 10px;
    }
    .flashcard .journal-btn button:focus, .flashcard .journal-btn button.focus, .flashcard .journal-btn .btn:focus, .flashcard .journal-btn .btn.focus {
      box-shadow: none;
    }
    .flashcard-top {
      display: flex;
      justify-content: space-between;
      z-index: 2;
    }
    .flashcard-type {
      background-image: url(/images/pages/flashcards/flashcards-ribbon.svg);
      background-repeat: no-repeat;
      background-position: 100%;
      padding: 0 1.2vw 0 0;
      display: flex;
      align-content: center;
      overflow: hidden;
      transform: translate(-1px, 10px);
    }
    @media screen and (min-width: 1921px) {
      .flashcard-type {
        transform: translate(-0.1vw, 1vh);
        background-size: contain;
      }
    }
    @media screen and (min-width: 4000px) {
      .flashcard-type {
        transform: translate(-0.3vw, 1vh);
        background-size: contain;
      }
    }
    .flashcard-type .flashcard-icon img.flashcard-neutral {
      padding-left: min(2vw, 20px);
      padding-right: min(2vw, 20px);
    }
    @media screen and (max-height: 1399px) {
      .flashcard-type .flashcard-icon img.flashcard-neutral {
        padding-left: 10px;
        padding-right: 18px;
      }
    }
    @media screen and (min-width: 1400px) {
      .flashcard-type .flashcard-icon img.flashcard-neutral {
        padding-left: min(0.5vw, 20px);
        padding-right: min(0.5vw, 20px);
      }
    }
    @media screen and (min-width: 1921px) {
      .flashcard-type .flashcard-icon img.flashcard-neutral {
        padding-left: min(0.5vw, 20px);
        padding-right: min(0.5vw, 20px);
        height: 75px;
        width: 75px;
      }
    }
    @media screen and (min-width: 2557px) {
      .flashcard-type .flashcard-icon img.flashcard-neutral {
        padding-left: min(0.5vw, 20px);
        padding-right: min(0.5vw, 20px);
        height: 100px;
        width: 100px;
      }
    }
    .flashcard-icon img, .flashcard-icon svg {
      height: 50px;
      width: 50px;
      padding: 2px;
    }
    .flashcard-body {
      flex-direction: column;
      display: flex;
      flex: 0 1 auto;
      flex-shrink: 1;
      min-height: 0;
      min-width: 0;
      padding: 10px;
    }
    .flashcard-img {
      height: 100%;
      width: auto;
      align-self: center;
      justify-self: center;
      min-height: 0;
      min-width: 0;
      max-width: 18vw;
    }
    .flashcard-text {
      text-align: center;
      word-break: break-word;
    }
    .flashcard-text h4 {
      font-size: 1.8vw;
      margin-bottom: 0;
    }
    .flashcard-text h4:empty {
      display: none;
    }
    .flashcard-text h5 {
      color: var(--dark-text-color);
      font-size: 1.125vw;
      padding-top: 0.4em;
      margin-bottom: 0;
    }
    .flashcard-text h5:empty {
      display: none;
    }
    .flashcard-text h6 {
      color: var(--muted-text-color);
      font-size: 0.9vw;
      padding-top: 0em;
    }
    .flashcard-text h6:empty {
      display: none;
    }
    .flashcard-bottom {
      display: flex;
      justify-content: flex-end;
      min-height: 4vh;
      z-index: 2;
    }
    .front-flip {
      animation: flip-front 0.1s linear;
      backface-visibility: hidden;
      animation-fill-mode: forwards;
    }
    .back-flip {
      animation: flip-back 0.1s linear;
      backface-visibility: hidden;
      animation-fill-mode: forwards;
    }
    .none-front {
      animation: flip-none-front 0.1s linear;
      backface-visibility: hidden;
      animation-fill-mode: forwards;
    }
    .none-back {
      animation: flip-none-back 0.1s linear;
      backface-visibility: hidden;
      animation-fill-mode: forwards;
    }
    .game-layout .label-container {
      width: 100%;
    }
    .difficulty-container {
      padding: 15px;
    }
    .btn, .button {
      border-radius: 1.8rem;
      font-family: "Cubano", sans-serif;
      margin-right: 5px;
      color: var(--light-text-color);
      background-color: var(--primary-color);
      border-color: var(--primary-color);
    }
    .btn-primary {
      color: var(--light-text-color);
      background-color: var(--primary-color);
      border-color: var(--primary-color);
      box-shadow: 5px 4px 0 1px var(--primary-color-dark);
      margin-bottom: 5px;
      transition: all ease 0.3s;
    }
    .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.focus, .btn-primary.active {
      color: var(--neutral-300);
      background-color: var(--primary-color);
      border-color: var(--primary-color);
      box-shadow: 2px 2px 0 1px var(--primary-color-dark);
      outline: var(--primary-color);
    }
    .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
      color: var(--neutral-300);
      background-color: var(--primary-color);
      border-color: var(--primary-color);
      box-shadow: 2px 2px 0 1px var(--primary-color-dark);
      outline: var(--primary-color);
    }
    .btn-primary:disabled, .btn-primary.disabled {
      color: var(--neutral-300);
      background-color: var(--primary-color);
      border-color: var(--primary-color);
      box-shadow: 2px 2px 0 1px var(--primary-color-dark);
      opacity: 78%;
    }
    .btn-primary.focus, .btn-primary:focus {
      box-shadow: var(--primary-color-dark);
    }
    .btn-primary.btn-paper {
      border-radius: 255px 15px 255px 15px/15px 225px 15px 255px;
    }
    .btn-secondary {
      color: var(--primary-color);
      background-color: var(--accent-color-7-light);
      border-color: var(--accent-color-7-light);
      box-shadow: 5px 4px 0 1px var(--primary-color);
      margin-bottom: 5px;
      transition: all ease 0.3s;
    }
    .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.focus, .btn-secondary.active {
      color: var(--primary-color);
      background-color: var(--accent-color-7-light);
      border-color: var(--accent-color-7-light);
      box-shadow: 2px 2px 0 1px var(--primary-color);
    }
    .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle {
      color: var(--primary-color);
      background-color: var(--accent-color-7-light);
      border-color: var(--accent-color-7-light);
      box-shadow: 2px 2px 0 1px var(--primary-color);
    }
    .btn-secondary.focus, .btn-secondary:focus {
      box-shadow: 2px 2px 0 1px var(--primary-color);
    }
    .btn-secondary.btn-paper {
      border-radius: 255px 15px 255px 15px/15px 225px 15px 255px;
    }
    .btn-success {
      color: var(--light-text-color);
      background-color: var(--success-color);
      border-color: var(--success-color);
      box-shadow: 5px 4px 0 1px var(--success-color-dark);
      margin-bottom: 5px;
      transition: all ease 0.3s;
    }
    .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.focus, .btn-success.active {
      background-color: var(--success-color-medium);
      border-color: var(--success-color-medium);
      box-shadow: 2px 2px 0 1px var(--success-color-dark);
    }
    .btn-success:not(:disabled):not(.disabled):active, .show > .btn-success.dropdown-toggle {
      color: var(--light-text-color);
      background-color: var(--success-color);
      border-color: var(--success-color);
      box-shadow: 2px 2px 0 1px var(--success-color-dark);
    }
    .btn-success:disabled, .btn-success.disabled {
      color: var(--light-text-color);
      background-color: var(--success-color);
      border-color: var(--success-color);
      box-shadow: 2px 2px 0 1px var(--success-color-dark);
      opacity: 78%;
    }
    .btn-success.focus, .btn-success:focus {
      box-shadow: 2px 2px 0 1px var(--success-color-dark);
    }
    .btn-success.btn-paper {
      border-radius: 255px 15px 255px 15px/15px 225px 15px 255px;
    }
    .btn-super-success {
      color: var(--light-text-color);
      background-color: var(--super-success-color);
      border-color: var(--super-success-color);
      box-shadow: 5px 4px 0 1px var(--super-success-color-medium);
      margin-bottom: 5px;
      transition: all ease 0.3s;
    }
    .btn-super-success:hover, .btn-super-success:focus, .btn-super-success:active, .btn-super-success.focus, .btn-super-success.active {
      background-color: var(--super-success-color-medium);
      border-color: var(--super-success-color-medium);
      box-shadow: 2px 2px 0 1px var(--super-success-color-dark);
      color: var(--white-text-color);
    }
    .btn-super-success:not(:disabled):not(.disabled):active, .show > .btn-super-success.dropdown-toggle {
      color: var(--light-text-color);
      background-color: var(--super-success-color);
      border-color: var(--super-success-color);
      box-shadow: 2px 2px 0 1px var(--success-color-dark);
    }
    .btn-super-success.focus, .btn-super-success:focus {
      box-shadow: 2px 2px 0 1px var(--success-color-dark);
    }
    .btn-super-success.btn-paper {
      border-radius: 255px 15px 255px 15px/15px 225px 15px 255px;
    }
    .btn-super-success:disabled, .btn-super-success.disabled {
      color: var(--light-text-color);
      background-color: var(--super-success-color);
      border-color: var(--super-success-color);
      box-shadow: 2px 2px 0 1px var(--success-color-dark);
      opacity: 50%;
    }
    .btn-danger {
      color: var(--light-text-color);
      background-color: var(--danger-color);
      border-color: var(--danger-color);
      box-shadow: 5px 4px 0 1px var(--danger-color-dark);
      margin-bottom: 5px;
      transition: all ease 0.3s;
    }
    .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.focus, .btn-danger.active {
      background-color: var(--danger-color-medium);
      border-color: var(--danger-color-medium);
      box-shadow: 2px 2px 0 1px var(--danger-color);
    }
    .btn-danger:not(:disabled):not(.disabled):active, .show > .btn-danger.dropdown-toggle {
      color: var(--light-text-color);
      background-color: var(--danger-color-medium);
      border-color: var(--danger-color-medium);
      box-shadow: 2px 2px 0 1px var(--danger-color);
    }
    .btn-danger.focus, .btn-danger:focus {
      box-shadow: 2px 2px 0 1px var(--danger-color);
    }
    .btn-danger:disabled, .btn-danger.disabled {
      color: var(--light-text-color);
      background-color: var(--danger-color-medium);
      border-color: var(--danger-color-medium);
      box-shadow: 2px 2px 0 1px var(--danger-color);
      opacity: 50%;
    }
    .btn-danger.btn-paper {
      border-radius: 255px 15px 255px 15px/15px 225px 15px 255px;
    }
    .btn-mild-danger {
      color: var(--light-text-color);
      background-color: var(--mild-danger-color);
      border-color: var(--mild-danger-color);
      box-shadow: 5px 4px 0 1px var(--mild-danger-color-dark);
      margin-bottom: 5px;
      transition: all ease 0.3s;
    }
    .btn-mild-danger:hover, .btn-mild-danger:focus, .btn-mild-danger:active, .btn-mild-danger.focus, .btn-mild-danger.active {
      background-color: var(--mild-danger-color-medium);
      border-color: var(--mild-danger-color-medium);
      box-shadow: 2px 2px 0 1px var(--mild-danger-color-dark);
    }
    .btn-mild-danger:not(:disabled):not(.disabled):active, .show > .btn-mild-danger.dropdown-toggle {
      color: var(--light-text-color);
      background-color: var(--mild-danger-color-medium);
      border-color: var(--mild-danger-color-medium);
      box-shadow: 2px 2px 0 1px var(--mild-danger-color-dark);
    }
    .btn-mild-danger:disabled, .btn-mild-danger.disabled {
      color: var(--light-text-color);
      background-color: var(--mild-danger-color-medium);
      border-color: var(--mild-danger-color-medium);
      box-shadow: 2px 2px 0 1px var(--mild-danger-color-dark);
      opacity: 50%;
    }
    .btn-mild-danger.focus, .btn-mild-danger:focus {
      box-shadow: 2px 2px 0 1px var(--mild-danger-color-dark);
    }
    .btn-mild-danger.btn-paper {
      border-radius: 255px 15px 255px 15px/15px 225px 15px 255px;
    }
    .btn-warning {
      color: var(--light-text-color);
      background-color: var(--warning-color);
      border-color: var(--warning-color);
      box-shadow: 5px 4px 0 1px var(--warning-color-medium);
      margin-bottom: 5px;
      transition: all ease 0.3s;
    }
    .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.focus, .btn-warning.active {
      background-color: var(--warning-color-dark);
      border-color: var(--warning-color-dark);
      box-shadow: 2px 2px 0 1px var(--warning-color-medium);
    }
    .btn-warning:not(:disabled):not(.disabled):active, .show > .btn-warning.dropdown-toggle {
      color: var(--light-text-color);
      background-color: var(--warning-color-dark);
      border-color: var(--warning-color-dark);
      box-shadow: 2px 2px 0 1px var(--warning-color-medium);
    }
    .btn-warning:disabled, .btn-warning.disabled {
      color: var(--light-text-color);
      background-color: var(--warning-color-dark);
      border-color: var(--warning-color-dark);
      box-shadow: 2px 2px 0 1px var(--warning-color-medium);
      opacity: 50%;
    }
    .btn-warning.focus, .btn-warning:focus {
      box-shadow: 2px 2px 0 1px var(--warning-color-medium);
    }
    .btn-warning.btn-paper {
      border-radius: 255px 15px 255px 15px/15px 225px 15px 255px;
    }
    .btn-info {
      color: var(--accent-color-7-light);
      background-color: var(--info-color);
      border: 2px solid var(--accent-color-7-light);
      box-shadow: 5px 4px 0 1px var(--info-color);
      margin-bottom: 5px;
      transition: all ease 0.3s;
    }
    .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.focus, .btn-info.active {
      color: var(--accent-color-7-light);
      background-color: var(--info-color);
      border: 2px solid var(--accent-color-7-light);
      box-shadow: 2px 2px 0 1px var(--info-color);
    }
    .btn-info:not(:disabled):not(.disabled):active, .show > .btn-info.dropdown-toggle {
      color: var(--accent-color-7-light);
      background-color: var(--info-color);
      border: 2px solid var(--accent-color-7-light);
      box-shadow: 2px 2px 0 1px var(--info-color);
    }
    .btn-info:disabled, .btn-info.disabled {
      color: var(--accent-color-7-light);
      background-color: var(--info-color);
      border: 2px solid var(--accent-color-7-light);
      box-shadow: 2px 2px 0 1px var(--info-color);
      opacity: 50%;
    }
    .btn-info.focus, .btn-info:focus {
      box-shadow: 2px 2px 0 1px var(--info-color);
    }
    .btn-info.btn-paper {
      border-radius: 255px 15px 255px 15px/15px 225px 15px 255px;
    }
    .btn-light {
      color: var(--light-color);
      background-color: var(--neutral-200);
      border: 2px solid var(--light-color);
      box-shadow: 5px 4px 0 1px var(--light-color);
      margin-bottom: 5px;
      transition: all ease 0.3s;
    }
    .btn-light:hover, .btn-light:focus, .btn-light:active, .btn-light.focus, .btn-light.active {
      color: var(--light-color);
      background-color: var(--neutral-300);
      border-color: var(--light-color);
      box-shadow: 2px 2px 0 1px var(--light-color);
    }
    .btn-light:not(:disabled):not(.disabled):active, .show > .btn-light.dropdown-toggle {
      color: var(--light-color);
      background-color: var(--accent-color-7-light);
      border-color: var(--light-color);
      box-shadow: 2px 2px 0 1px var(--light-color);
    }
    .btn-light:disabled, .btn-light.disabled {
      color: var(--light-color);
      background-color: var(--accent-color-7-light);
      border-color: var(--light-color);
      box-shadow: 2px 2px 0 1px var(--light-color);
      opacity: 50%;
    }
    .btn-light.focus, .btn-light:focus {
      box-shadow: 2px 2px 0 1px var(--light-color);
    }
    .btn-light.btn-paper {
      border-radius: 255px 15px 255px 15px/15px 225px 15px 255px;
    }
    .btn-dark {
      color: var(--accent-color-7-light);
      background-color: var(--dark-color);
      border: 2px solid var(--accent-color-7-light);
      box-shadow: 5px 4px 0 1px var(--accent-color-7-light);
      margin-bottom: 5px;
      transition: all ease 0.3s;
    }
    .btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark.focus, .btn-dark.active {
      color: var(--accent-color-7-light);
      background-color: var(--dark-color-dark);
      border-color: var(--accent-color-7-light);
      box-shadow: 2px 2px 0 1px var(--accent-color-7-light);
    }
    .btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active, .show > .btn-dark.dropdown-toggle {
      color: var(--accent-color-7-light);
      background-color: var(--dark-color-dark);
      border-color: var(--accent-color-7-light);
      box-shadow: 2px 2px 0 1px var(--accent-color-7-light);
    }
    .btn-dark:disabled, .btn-dark.disabled {
      color: var(--accent-color-7-light);
      background-color: var(--dark-color-dark);
      border-color: var(--accent-color-7-light);
      box-shadow: 2px 2px 0 1px var(--accent-color-7-light);
      opacity: 50%;
    }
    .btn-dark.focus, .btn-dark:focus {
      box-shadow: 2px 2px 0 1px var(--accent-color-7-light);
    }
    .btn-dark.btn-paper {
      border-radius: 255px 15px 255px 15px/15px 225px 15px 255px;
    }
    .btn-link, a.btn-link {
      color: var(--dark-color-dark);
      border-radius: 0rem;
      border: 2px solid transparent;
      transition: all ease 0.3s;
      background-color: transparent;
    }
    .btn-link:hover, .btn-link:focus, .btn-link:active, .btn-link.focus, .btn-link.active, a.btn-link:hover, a.btn-link:focus, a.btn-link:active, a.btn-link.focus, a.btn-link.active {
      text-decoration: none;
      color: var(--dark-color);
      border-radius: 0rem;
      border-bottom: 2px solid var(--dark-color);
      padding-top: 0px;
    }
    .btn-link:not(:disabled):not(.disabled).active, .btn-link:not(:disabled):not(.disabled):active, .show > .btn-link.dropdown-toggle, a.btn-link:not(:disabled):not(.disabled).active, a.btn-link:not(:disabled):not(.disabled):active, .show > a.btn-link.dropdown-toggle {
      text-decoration: none;
      color: var(--dark-color);
      border-radius: 0rem;
    }
    .btn-link:disabled, .btn-link.disabled, a.btn-link:disabled, a.btn-link.disabled {
      text-decoration: none;
      color: var(--dark-color);
      border-radius: 0rem;
      border-bottom: 2px solid var(--dark-color);
      padding-top: 0px;
      opacity: 50%;
    }
    .btn-link.focus, .btn-link:focus, a.btn-link.focus, a.btn-link:focus {
      border-bottom: 2px solid var(--dark-color);
      border-radius: 0rem;
    }
    .btn-outline-primary {
      color: var(--primary-color);
      border: 2px solid var(--primary-color);
      box-shadow: 5px 4px 0 1px var(--primary-color);
      margin-bottom: 5px;
      background-color: transparent;
      transition: all ease 0.3s;
    }
    .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.focus, .btn-outline-primary.active {
      color: var(--primary-color);
      border-color: var(--primary-color);
      background-color: transparent;
      box-shadow: 2px 2px 0 1px var(--primary-color);
    }
    .btn-outline-primary:not(:disabled):not(.disabled):active, .show > .btn-outline-primary.dropdown-toggle {
      color: var(--primary-color);
      border-color: var(--primary-color);
      background-color: transparent;
      box-shadow: 2px 2px 0 1px var(--primary-color);
      opacity: 75%;
    }
    .btn-outline-primary.focus, .btn-outline-primary:focus {
      box-shadow: 2px 2px 0 1px var(--primary-color);
      background-color: transparent;
    }
    .btn-plain-primary {
      color: var(--dark-color-dark);
      border: 2px solid var(--primary-color);
      background-color: var(--primary-color);
      transition: all ease 0.3s;
    }
    .btn-plain-primary:hover, .btn-plain-primary:focus, .btn-plain-primary:active, .btn-plain-primary.focus, .btn-plain-primary.active {
      border-color: var(--primary-color);
      background-color: var(var(--primary-color) -light);
    }
    .btn-plain-primary:not(:disabled):not(.disabled).active, .btn-plain-primary:not(:disabled):not(.disabled):active, .show > .btn-plain-primary.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-primary.focus, .btn-plain-primary:focus {
      background-color: var(--light-color);
    }
    .btn-plain-secondary {
      color: var(--dark-color-dark);
      border: 2px solid var(--secondary-color);
      background-color: var(--secondary-color);
      transition: all ease 0.3s;
    }
    .btn-plain-secondary:hover, .btn-plain-secondary:focus, .btn-plain-secondary:active, .btn-plain-secondary.focus, .btn-plain-secondary.active {
      border-color: var(--secondary-color);
      background-color: var(var(--secondary-color) -light);
    }
    .btn-plain-secondary:not(:disabled):not(.disabled).active, .btn-plain-secondary:not(:disabled):not(.disabled):active, .show > .btn-plain-secondary.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-secondary.focus, .btn-plain-secondary:focus {
      background-color: var(--light-color);
    }
    .btn-plain-success {
      color: var(--dark-color-dark);
      border: 2px solid var(--success-color);
      background-color: var(--success-color);
      transition: all ease 0.3s;
    }
    .btn-plain-success:hover, .btn-plain-success:focus, .btn-plain-success:active, .btn-plain-success.focus, .btn-plain-success.active {
      border-color: var(--success-color);
      background-color: var(var(--success-color) -light);
    }
    .btn-plain-success:not(:disabled):not(.disabled).active, .btn-plain-success:not(:disabled):not(.disabled):active, .show > .btn-plain-success.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-success.focus, .btn-plain-success:focus {
      background-color: var(--light-color);
    }
    .btn-plain-warning {
      color: var(--dark-color-dark);
      border: 2px solid var(--warning-color);
      background-color: var(--warning-color);
      transition: all ease 0.3s;
    }
    .btn-plain-warning:hover, .btn-plain-warning:focus, .btn-plain-warning:active, .btn-plain-warning.focus, .btn-plain-warning.active {
      border-color: var(--warning-color);
      background-color: var(var(--warning-color) -light);
    }
    .btn-plain-warning:not(:disabled):not(.disabled).active, .btn-plain-warning:not(:disabled):not(.disabled):active, .show > .btn-plain-warning.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-warning.focus, .btn-plain-warning:focus {
      background-color: var(--light-color);
    }
    .btn-plain-info {
      color: var(--dark-color-dark);
      border: 2px solid var(--info-color);
      background-color: var(--info-color);
      transition: all ease 0.3s;
    }
    .btn-plain-info:hover, .btn-plain-info:focus, .btn-plain-info:active, .btn-plain-info.focus, .btn-plain-info.active {
      border-color: var(--info-color);
      background-color: var(var(--info-color) -light);
    }
    .btn-plain-info:not(:disabled):not(.disabled).active, .btn-plain-info:not(:disabled):not(.disabled):active, .show > .btn-plain-info.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-info.focus, .btn-plain-info:focus {
      background-color: var(--light-color);
    }
    .btn-plain-danger {
      color: var(--dark-color-dark);
      border: 2px solid var(--danger-color);
      background-color: var(--danger-color);
      transition: all ease 0.3s;
    }
    .btn-plain-danger:hover, .btn-plain-danger:focus, .btn-plain-danger:active, .btn-plain-danger.focus, .btn-plain-danger.active {
      border-color: var(--danger-color);
      background-color: var(var(--danger-color) -light);
    }
    .btn-plain-danger:not(:disabled):not(.disabled).active, .btn-plain-danger:not(:disabled):not(.disabled):active, .show > .btn-plain-danger.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-danger.focus, .btn-plain-danger:focus {
      background-color: var(--light-color);
    }
    .btn-plain-light {
      color: var(--dark-color-dark);
      border: 2px solid var(--light-color);
      background-color: var(--light-color);
      transition: all ease 0.3s;
    }
    .btn-plain-light:hover, .btn-plain-light:focus, .btn-plain-light:active, .btn-plain-light.focus, .btn-plain-light.active {
      border-color: var(--light-color);
      background-color: var(var(--light-color) -light);
    }
    .btn-plain-light:not(:disabled):not(.disabled).active, .btn-plain-light:not(:disabled):not(.disabled):active, .show > .btn-plain-light.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-light.focus, .btn-plain-light:focus {
      background-color: var(--light-color);
    }
    .btn-plain-dark {
      color: var(--dark-color-dark);
      border: 2px solid var(--dark-color);
      background-color: var(--dark-color);
      transition: all ease 0.3s;
    }
    .btn-plain-dark:hover, .btn-plain-dark:focus, .btn-plain-dark:active, .btn-plain-dark.focus, .btn-plain-dark.active {
      border-color: var(--dark-color);
      background-color: var(var(--dark-color) -light);
    }
    .btn-plain-dark:not(:disabled):not(.disabled).active, .btn-plain-dark:not(:disabled):not(.disabled):active, .show > .btn-plain-dark.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-dark.focus, .btn-plain-dark:focus {
      background-color: var(--light-color);
    }
    .btn-ribbon {
      background-image: url("/images/global/shapes/ribbon-bordered-orange.svg");
      background-position: 50% 50%;
      background-size: contain;
      padding: 1rem 1.75rem;
      background-repeat: no-repeat;
      background-color: transparent;
      border-color: transparent;
      -webkit-transition: 0.3s;
      transition: 0.3s;
      font-size: 1.5rem;
      font-family: henderson-slab-basic, serif;
      border-radius: 0%;
      color: var(--light-text-color);
      box-shadow: none;
    }
    .btn-ribbon:hover {
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
      color: var(--light-text-color);
      background-color: transparent;
      border-color: transparent;
    }
    .btn-ribbon.focus, .btn-ribbon:focus {
      box-shadow: 0 0 0 0.2rem transparent;
      background-color: transparent;
      border: transparent;
    }
    .btn-ribbon > span {
      margin: 0em 0.5em;
    }
    .btn-ribbon.btn-lg {
      padding: 1rem 2rem;
    }
    .btn-ribbon.btn-green {
      background-image: url("/images/global/shapes/ribbon-bordered-green.svg");
      color: var(--light-text-color);
    }
    .btn-ribbon.btn-blue {
      background-image: url("/images/global/shapes/ribbon-bordered-blue.svg");
      color: var(--light-text-color);
    }
    .btn-ribbon.btn-yellow {
      background-image: url("/images/global/shapes/ribbon-bordered-yellow.svg");
      color: var(--body-font-color);
    }
    .btn-ribbon.btn-yellow:hover {
      color: var(--body-font-color);
    }
    .btn-ribbon:not(:disabled):not(.disabled).active, .btn-ribbon:not(:disabled):not(.disabled):active, .show > .btn-ribbon.dropdown-toggle {
      color: var(--white-text-color);
      background-color: transparent;
      border-color: transparent;
    }
    .btn-ribbon:not(:disabled):not(.disabled).active:focus, .btn-ribbon:not(:disabled):not(.disabled):active:focus, .show > .btn-ribbon.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem transparent;
    }
    .btn-outline-secondary {
      color: var(--secondary-color);
      border: 2px solid var(--secondary-color);
      box-shadow: 5px 4px 0 1px var(--secondary-color);
      margin-bottom: 5px;
      background-color: transparent;
      transition: all ease 0.3s;
    }
    .btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active, .btn-outline-secondary.focus, .btn-outline-secondary.active {
      color: var(--secondary-color);
      border-color: var(--secondary-color);
      background-color: transparent;
      box-shadow: 2px 2px 0 1px var(--secondary-color);
    }
    .btn-outline-secondary:not(:disabled):not(.disabled):active, .show > .btn-outline-secondary.dropdown-toggle {
      color: var(--secondary-color);
      border-color: var(--secondary-color);
      background-color: transparent;
      box-shadow: 2px 2px 0 1px var(--secondary-color);
      opacity: 75%;
    }
    .btn-outline-secondary.focus, .btn-outline-secondary:focus {
      box-shadow: 2px 2px 0 1px var(--secondary-color);
      background-color: transparent;
    }
    .btn-plain-primary {
      color: var(--dark-color-dark);
      border: 2px solid var(--primary-color);
      background-color: var(--primary-color);
      transition: all ease 0.3s;
    }
    .btn-plain-primary:hover, .btn-plain-primary:focus, .btn-plain-primary:active, .btn-plain-primary.focus, .btn-plain-primary.active {
      border-color: var(--primary-color);
      background-color: var(var(--primary-color) -light);
    }
    .btn-plain-primary:not(:disabled):not(.disabled).active, .btn-plain-primary:not(:disabled):not(.disabled):active, .show > .btn-plain-primary.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-primary.focus, .btn-plain-primary:focus {
      background-color: var(--light-color);
    }
    .btn-plain-secondary {
      color: var(--dark-color-dark);
      border: 2px solid var(--secondary-color);
      background-color: var(--secondary-color);
      transition: all ease 0.3s;
    }
    .btn-plain-secondary:hover, .btn-plain-secondary:focus, .btn-plain-secondary:active, .btn-plain-secondary.focus, .btn-plain-secondary.active {
      border-color: var(--secondary-color);
      background-color: var(var(--secondary-color) -light);
    }
    .btn-plain-secondary:not(:disabled):not(.disabled).active, .btn-plain-secondary:not(:disabled):not(.disabled):active, .show > .btn-plain-secondary.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-secondary.focus, .btn-plain-secondary:focus {
      background-color: var(--light-color);
    }
    .btn-plain-success {
      color: var(--dark-color-dark);
      border: 2px solid var(--success-color);
      background-color: var(--success-color);
      transition: all ease 0.3s;
    }
    .btn-plain-success:hover, .btn-plain-success:focus, .btn-plain-success:active, .btn-plain-success.focus, .btn-plain-success.active {
      border-color: var(--success-color);
      background-color: var(var(--success-color) -light);
    }
    .btn-plain-success:not(:disabled):not(.disabled).active, .btn-plain-success:not(:disabled):not(.disabled):active, .show > .btn-plain-success.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-success.focus, .btn-plain-success:focus {
      background-color: var(--light-color);
    }
    .btn-plain-warning {
      color: var(--dark-color-dark);
      border: 2px solid var(--warning-color);
      background-color: var(--warning-color);
      transition: all ease 0.3s;
    }
    .btn-plain-warning:hover, .btn-plain-warning:focus, .btn-plain-warning:active, .btn-plain-warning.focus, .btn-plain-warning.active {
      border-color: var(--warning-color);
      background-color: var(var(--warning-color) -light);
    }
    .btn-plain-warning:not(:disabled):not(.disabled).active, .btn-plain-warning:not(:disabled):not(.disabled):active, .show > .btn-plain-warning.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-warning.focus, .btn-plain-warning:focus {
      background-color: var(--light-color);
    }
    .btn-plain-info {
      color: var(--dark-color-dark);
      border: 2px solid var(--info-color);
      background-color: var(--info-color);
      transition: all ease 0.3s;
    }
    .btn-plain-info:hover, .btn-plain-info:focus, .btn-plain-info:active, .btn-plain-info.focus, .btn-plain-info.active {
      border-color: var(--info-color);
      background-color: var(var(--info-color) -light);
    }
    .btn-plain-info:not(:disabled):not(.disabled).active, .btn-plain-info:not(:disabled):not(.disabled):active, .show > .btn-plain-info.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-info.focus, .btn-plain-info:focus {
      background-color: var(--light-color);
    }
    .btn-plain-danger {
      color: var(--dark-color-dark);
      border: 2px solid var(--danger-color);
      background-color: var(--danger-color);
      transition: all ease 0.3s;
    }
    .btn-plain-danger:hover, .btn-plain-danger:focus, .btn-plain-danger:active, .btn-plain-danger.focus, .btn-plain-danger.active {
      border-color: var(--danger-color);
      background-color: var(var(--danger-color) -light);
    }
    .btn-plain-danger:not(:disabled):not(.disabled).active, .btn-plain-danger:not(:disabled):not(.disabled):active, .show > .btn-plain-danger.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-danger.focus, .btn-plain-danger:focus {
      background-color: var(--light-color);
    }
    .btn-plain-light {
      color: var(--dark-color-dark);
      border: 2px solid var(--light-color);
      background-color: var(--light-color);
      transition: all ease 0.3s;
    }
    .btn-plain-light:hover, .btn-plain-light:focus, .btn-plain-light:active, .btn-plain-light.focus, .btn-plain-light.active {
      border-color: var(--light-color);
      background-color: var(var(--light-color) -light);
    }
    .btn-plain-light:not(:disabled):not(.disabled).active, .btn-plain-light:not(:disabled):not(.disabled):active, .show > .btn-plain-light.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-light.focus, .btn-plain-light:focus {
      background-color: var(--light-color);
    }
    .btn-plain-dark {
      color: var(--dark-color-dark);
      border: 2px solid var(--dark-color);
      background-color: var(--dark-color);
      transition: all ease 0.3s;
    }
    .btn-plain-dark:hover, .btn-plain-dark:focus, .btn-plain-dark:active, .btn-plain-dark.focus, .btn-plain-dark.active {
      border-color: var(--dark-color);
      background-color: var(var(--dark-color) -light);
    }
    .btn-plain-dark:not(:disabled):not(.disabled).active, .btn-plain-dark:not(:disabled):not(.disabled):active, .show > .btn-plain-dark.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-dark.focus, .btn-plain-dark:focus {
      background-color: var(--light-color);
    }
    .btn-ribbon {
      background-image: url("/images/global/shapes/ribbon-bordered-orange.svg");
      background-position: 50% 50%;
      background-size: contain;
      padding: 1rem 1.75rem;
      background-repeat: no-repeat;
      background-color: transparent;
      border-color: transparent;
      -webkit-transition: 0.3s;
      transition: 0.3s;
      font-size: 1.5rem;
      font-family: henderson-slab-basic, serif;
      border-radius: 0%;
      color: var(--light-text-color);
      box-shadow: none;
    }
    .btn-ribbon:hover {
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
      color: var(--light-text-color);
      background-color: transparent;
      border-color: transparent;
    }
    .btn-ribbon.focus, .btn-ribbon:focus {
      box-shadow: 0 0 0 0.2rem transparent;
      background-color: transparent;
      border: transparent;
    }
    .btn-ribbon > span {
      margin: 0em 0.5em;
    }
    .btn-ribbon.btn-lg {
      padding: 1rem 2rem;
    }
    .btn-ribbon.btn-green {
      background-image: url("/images/global/shapes/ribbon-bordered-green.svg");
      color: var(--light-text-color);
    }
    .btn-ribbon.btn-blue {
      background-image: url("/images/global/shapes/ribbon-bordered-blue.svg");
      color: var(--light-text-color);
    }
    .btn-ribbon.btn-yellow {
      background-image: url("/images/global/shapes/ribbon-bordered-yellow.svg");
      color: var(--body-font-color);
    }
    .btn-ribbon.btn-yellow:hover {
      color: var(--body-font-color);
    }
    .btn-ribbon:not(:disabled):not(.disabled).active, .btn-ribbon:not(:disabled):not(.disabled):active, .show > .btn-ribbon.dropdown-toggle {
      color: var(--white-text-color);
      background-color: transparent;
      border-color: transparent;
    }
    .btn-ribbon:not(:disabled):not(.disabled).active:focus, .btn-ribbon:not(:disabled):not(.disabled):active:focus, .show > .btn-ribbon.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem transparent;
    }
    .btn-outline-success {
      color: var(--success-color);
      border: 2px solid var(--success-color);
      box-shadow: 5px 4px 0 1px var(--success-color);
      margin-bottom: 5px;
      background-color: transparent;
      transition: all ease 0.3s;
    }
    .btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active, .btn-outline-success.focus, .btn-outline-success.active {
      color: var(--success-color);
      border-color: var(--success-color);
      background-color: transparent;
      box-shadow: 2px 2px 0 1px var(--success-color);
    }
    .btn-outline-success:not(:disabled):not(.disabled):active, .show > .btn-outline-success.dropdown-toggle {
      color: var(--success-color);
      border-color: var(--success-color);
      background-color: transparent;
      box-shadow: 2px 2px 0 1px var(--success-color);
      opacity: 75%;
    }
    .btn-outline-success.focus, .btn-outline-success:focus {
      box-shadow: 2px 2px 0 1px var(--success-color);
      background-color: transparent;
    }
    .btn-plain-primary {
      color: var(--dark-color-dark);
      border: 2px solid var(--primary-color);
      background-color: var(--primary-color);
      transition: all ease 0.3s;
    }
    .btn-plain-primary:hover, .btn-plain-primary:focus, .btn-plain-primary:active, .btn-plain-primary.focus, .btn-plain-primary.active {
      border-color: var(--primary-color);
      background-color: var(var(--primary-color) -light);
    }
    .btn-plain-primary:not(:disabled):not(.disabled).active, .btn-plain-primary:not(:disabled):not(.disabled):active, .show > .btn-plain-primary.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-primary.focus, .btn-plain-primary:focus {
      background-color: var(--light-color);
    }
    .btn-plain-secondary {
      color: var(--dark-color-dark);
      border: 2px solid var(--secondary-color);
      background-color: var(--secondary-color);
      transition: all ease 0.3s;
    }
    .btn-plain-secondary:hover, .btn-plain-secondary:focus, .btn-plain-secondary:active, .btn-plain-secondary.focus, .btn-plain-secondary.active {
      border-color: var(--secondary-color);
      background-color: var(var(--secondary-color) -light);
    }
    .btn-plain-secondary:not(:disabled):not(.disabled).active, .btn-plain-secondary:not(:disabled):not(.disabled):active, .show > .btn-plain-secondary.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-secondary.focus, .btn-plain-secondary:focus {
      background-color: var(--light-color);
    }
    .btn-plain-success {
      color: var(--dark-color-dark);
      border: 2px solid var(--success-color);
      background-color: var(--success-color);
      transition: all ease 0.3s;
    }
    .btn-plain-success:hover, .btn-plain-success:focus, .btn-plain-success:active, .btn-plain-success.focus, .btn-plain-success.active {
      border-color: var(--success-color);
      background-color: var(var(--success-color) -light);
    }
    .btn-plain-success:not(:disabled):not(.disabled).active, .btn-plain-success:not(:disabled):not(.disabled):active, .show > .btn-plain-success.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-success.focus, .btn-plain-success:focus {
      background-color: var(--light-color);
    }
    .btn-plain-warning {
      color: var(--dark-color-dark);
      border: 2px solid var(--warning-color);
      background-color: var(--warning-color);
      transition: all ease 0.3s;
    }
    .btn-plain-warning:hover, .btn-plain-warning:focus, .btn-plain-warning:active, .btn-plain-warning.focus, .btn-plain-warning.active {
      border-color: var(--warning-color);
      background-color: var(var(--warning-color) -light);
    }
    .btn-plain-warning:not(:disabled):not(.disabled).active, .btn-plain-warning:not(:disabled):not(.disabled):active, .show > .btn-plain-warning.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-warning.focus, .btn-plain-warning:focus {
      background-color: var(--light-color);
    }
    .btn-plain-info {
      color: var(--dark-color-dark);
      border: 2px solid var(--info-color);
      background-color: var(--info-color);
      transition: all ease 0.3s;
    }
    .btn-plain-info:hover, .btn-plain-info:focus, .btn-plain-info:active, .btn-plain-info.focus, .btn-plain-info.active {
      border-color: var(--info-color);
      background-color: var(var(--info-color) -light);
    }
    .btn-plain-info:not(:disabled):not(.disabled).active, .btn-plain-info:not(:disabled):not(.disabled):active, .show > .btn-plain-info.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-info.focus, .btn-plain-info:focus {
      background-color: var(--light-color);
    }
    .btn-plain-danger {
      color: var(--dark-color-dark);
      border: 2px solid var(--danger-color);
      background-color: var(--danger-color);
      transition: all ease 0.3s;
    }
    .btn-plain-danger:hover, .btn-plain-danger:focus, .btn-plain-danger:active, .btn-plain-danger.focus, .btn-plain-danger.active {
      border-color: var(--danger-color);
      background-color: var(var(--danger-color) -light);
    }
    .btn-plain-danger:not(:disabled):not(.disabled).active, .btn-plain-danger:not(:disabled):not(.disabled):active, .show > .btn-plain-danger.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-danger.focus, .btn-plain-danger:focus {
      background-color: var(--light-color);
    }
    .btn-plain-light {
      color: var(--dark-color-dark);
      border: 2px solid var(--light-color);
      background-color: var(--light-color);
      transition: all ease 0.3s;
    }
    .btn-plain-light:hover, .btn-plain-light:focus, .btn-plain-light:active, .btn-plain-light.focus, .btn-plain-light.active {
      border-color: var(--light-color);
      background-color: var(var(--light-color) -light);
    }
    .btn-plain-light:not(:disabled):not(.disabled).active, .btn-plain-light:not(:disabled):not(.disabled):active, .show > .btn-plain-light.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-light.focus, .btn-plain-light:focus {
      background-color: var(--light-color);
    }
    .btn-plain-dark {
      color: var(--dark-color-dark);
      border: 2px solid var(--dark-color);
      background-color: var(--dark-color);
      transition: all ease 0.3s;
    }
    .btn-plain-dark:hover, .btn-plain-dark:focus, .btn-plain-dark:active, .btn-plain-dark.focus, .btn-plain-dark.active {
      border-color: var(--dark-color);
      background-color: var(var(--dark-color) -light);
    }
    .btn-plain-dark:not(:disabled):not(.disabled).active, .btn-plain-dark:not(:disabled):not(.disabled):active, .show > .btn-plain-dark.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-dark.focus, .btn-plain-dark:focus {
      background-color: var(--light-color);
    }
    .btn-ribbon {
      background-image: url("/images/global/shapes/ribbon-bordered-orange.svg");
      background-position: 50% 50%;
      background-size: contain;
      padding: 1rem 1.75rem;
      background-repeat: no-repeat;
      background-color: transparent;
      border-color: transparent;
      -webkit-transition: 0.3s;
      transition: 0.3s;
      font-size: 1.5rem;
      font-family: henderson-slab-basic, serif;
      border-radius: 0%;
      color: var(--light-text-color);
      box-shadow: none;
    }
    .btn-ribbon:hover {
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
      color: var(--light-text-color);
      background-color: transparent;
      border-color: transparent;
    }
    .btn-ribbon.focus, .btn-ribbon:focus {
      box-shadow: 0 0 0 0.2rem transparent;
      background-color: transparent;
      border: transparent;
    }
    .btn-ribbon > span {
      margin: 0em 0.5em;
    }
    .btn-ribbon.btn-lg {
      padding: 1rem 2rem;
    }
    .btn-ribbon.btn-green {
      background-image: url("/images/global/shapes/ribbon-bordered-green.svg");
      color: var(--light-text-color);
    }
    .btn-ribbon.btn-blue {
      background-image: url("/images/global/shapes/ribbon-bordered-blue.svg");
      color: var(--light-text-color);
    }
    .btn-ribbon.btn-yellow {
      background-image: url("/images/global/shapes/ribbon-bordered-yellow.svg");
      color: var(--body-font-color);
    }
    .btn-ribbon.btn-yellow:hover {
      color: var(--body-font-color);
    }
    .btn-ribbon:not(:disabled):not(.disabled).active, .btn-ribbon:not(:disabled):not(.disabled):active, .show > .btn-ribbon.dropdown-toggle {
      color: var(--white-text-color);
      background-color: transparent;
      border-color: transparent;
    }
    .btn-ribbon:not(:disabled):not(.disabled).active:focus, .btn-ribbon:not(:disabled):not(.disabled):active:focus, .show > .btn-ribbon.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem transparent;
    }
    .btn-outline-warning {
      color: var(--warning-color);
      border: 2px solid var(--warning-color);
      box-shadow: 5px 4px 0 1px var(--warning-color);
      margin-bottom: 5px;
      background-color: transparent;
      transition: all ease 0.3s;
    }
    .btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active, .btn-outline-warning.focus, .btn-outline-warning.active {
      color: var(--warning-color);
      border-color: var(--warning-color);
      background-color: transparent;
      box-shadow: 2px 2px 0 1px var(--warning-color);
    }
    .btn-outline-warning:not(:disabled):not(.disabled):active, .show > .btn-outline-warning.dropdown-toggle {
      color: var(--warning-color);
      border-color: var(--warning-color);
      background-color: transparent;
      box-shadow: 2px 2px 0 1px var(--warning-color);
      opacity: 75%;
    }
    .btn-outline-warning.focus, .btn-outline-warning:focus {
      box-shadow: 2px 2px 0 1px var(--warning-color);
      background-color: transparent;
    }
    .btn-plain-primary {
      color: var(--dark-color-dark);
      border: 2px solid var(--primary-color);
      background-color: var(--primary-color);
      transition: all ease 0.3s;
    }
    .btn-plain-primary:hover, .btn-plain-primary:focus, .btn-plain-primary:active, .btn-plain-primary.focus, .btn-plain-primary.active {
      border-color: var(--primary-color);
      background-color: var(var(--primary-color) -light);
    }
    .btn-plain-primary:not(:disabled):not(.disabled).active, .btn-plain-primary:not(:disabled):not(.disabled):active, .show > .btn-plain-primary.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-primary.focus, .btn-plain-primary:focus {
      background-color: var(--light-color);
    }
    .btn-plain-secondary {
      color: var(--dark-color-dark);
      border: 2px solid var(--secondary-color);
      background-color: var(--secondary-color);
      transition: all ease 0.3s;
    }
    .btn-plain-secondary:hover, .btn-plain-secondary:focus, .btn-plain-secondary:active, .btn-plain-secondary.focus, .btn-plain-secondary.active {
      border-color: var(--secondary-color);
      background-color: var(var(--secondary-color) -light);
    }
    .btn-plain-secondary:not(:disabled):not(.disabled).active, .btn-plain-secondary:not(:disabled):not(.disabled):active, .show > .btn-plain-secondary.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-secondary.focus, .btn-plain-secondary:focus {
      background-color: var(--light-color);
    }
    .btn-plain-success {
      color: var(--dark-color-dark);
      border: 2px solid var(--success-color);
      background-color: var(--success-color);
      transition: all ease 0.3s;
    }
    .btn-plain-success:hover, .btn-plain-success:focus, .btn-plain-success:active, .btn-plain-success.focus, .btn-plain-success.active {
      border-color: var(--success-color);
      background-color: var(var(--success-color) -light);
    }
    .btn-plain-success:not(:disabled):not(.disabled).active, .btn-plain-success:not(:disabled):not(.disabled):active, .show > .btn-plain-success.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-success.focus, .btn-plain-success:focus {
      background-color: var(--light-color);
    }
    .btn-plain-warning {
      color: var(--dark-color-dark);
      border: 2px solid var(--warning-color);
      background-color: var(--warning-color);
      transition: all ease 0.3s;
    }
    .btn-plain-warning:hover, .btn-plain-warning:focus, .btn-plain-warning:active, .btn-plain-warning.focus, .btn-plain-warning.active {
      border-color: var(--warning-color);
      background-color: var(var(--warning-color) -light);
    }
    .btn-plain-warning:not(:disabled):not(.disabled).active, .btn-plain-warning:not(:disabled):not(.disabled):active, .show > .btn-plain-warning.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-warning.focus, .btn-plain-warning:focus {
      background-color: var(--light-color);
    }
    .btn-plain-info {
      color: var(--dark-color-dark);
      border: 2px solid var(--info-color);
      background-color: var(--info-color);
      transition: all ease 0.3s;
    }
    .btn-plain-info:hover, .btn-plain-info:focus, .btn-plain-info:active, .btn-plain-info.focus, .btn-plain-info.active {
      border-color: var(--info-color);
      background-color: var(var(--info-color) -light);
    }
    .btn-plain-info:not(:disabled):not(.disabled).active, .btn-plain-info:not(:disabled):not(.disabled):active, .show > .btn-plain-info.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-info.focus, .btn-plain-info:focus {
      background-color: var(--light-color);
    }
    .btn-plain-danger {
      color: var(--dark-color-dark);
      border: 2px solid var(--danger-color);
      background-color: var(--danger-color);
      transition: all ease 0.3s;
    }
    .btn-plain-danger:hover, .btn-plain-danger:focus, .btn-plain-danger:active, .btn-plain-danger.focus, .btn-plain-danger.active {
      border-color: var(--danger-color);
      background-color: var(var(--danger-color) -light);
    }
    .btn-plain-danger:not(:disabled):not(.disabled).active, .btn-plain-danger:not(:disabled):not(.disabled):active, .show > .btn-plain-danger.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-danger.focus, .btn-plain-danger:focus {
      background-color: var(--light-color);
    }
    .btn-plain-light {
      color: var(--dark-color-dark);
      border: 2px solid var(--light-color);
      background-color: var(--light-color);
      transition: all ease 0.3s;
    }
    .btn-plain-light:hover, .btn-plain-light:focus, .btn-plain-light:active, .btn-plain-light.focus, .btn-plain-light.active {
      border-color: var(--light-color);
      background-color: var(var(--light-color) -light);
    }
    .btn-plain-light:not(:disabled):not(.disabled).active, .btn-plain-light:not(:disabled):not(.disabled):active, .show > .btn-plain-light.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-light.focus, .btn-plain-light:focus {
      background-color: var(--light-color);
    }
    .btn-plain-dark {
      color: var(--dark-color-dark);
      border: 2px solid var(--dark-color);
      background-color: var(--dark-color);
      transition: all ease 0.3s;
    }
    .btn-plain-dark:hover, .btn-plain-dark:focus, .btn-plain-dark:active, .btn-plain-dark.focus, .btn-plain-dark.active {
      border-color: var(--dark-color);
      background-color: var(var(--dark-color) -light);
    }
    .btn-plain-dark:not(:disabled):not(.disabled).active, .btn-plain-dark:not(:disabled):not(.disabled):active, .show > .btn-plain-dark.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-dark.focus, .btn-plain-dark:focus {
      background-color: var(--light-color);
    }
    .btn-ribbon {
      background-image: url("/images/global/shapes/ribbon-bordered-orange.svg");
      background-position: 50% 50%;
      background-size: contain;
      padding: 1rem 1.75rem;
      background-repeat: no-repeat;
      background-color: transparent;
      border-color: transparent;
      -webkit-transition: 0.3s;
      transition: 0.3s;
      font-size: 1.5rem;
      font-family: henderson-slab-basic, serif;
      border-radius: 0%;
      color: var(--light-text-color);
      box-shadow: none;
    }
    .btn-ribbon:hover {
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
      color: var(--light-text-color);
      background-color: transparent;
      border-color: transparent;
    }
    .btn-ribbon.focus, .btn-ribbon:focus {
      box-shadow: 0 0 0 0.2rem transparent;
      background-color: transparent;
      border: transparent;
    }
    .btn-ribbon > span {
      margin: 0em 0.5em;
    }
    .btn-ribbon.btn-lg {
      padding: 1rem 2rem;
    }
    .btn-ribbon.btn-green {
      background-image: url("/images/global/shapes/ribbon-bordered-green.svg");
      color: var(--light-text-color);
    }
    .btn-ribbon.btn-blue {
      background-image: url("/images/global/shapes/ribbon-bordered-blue.svg");
      color: var(--light-text-color);
    }
    .btn-ribbon.btn-yellow {
      background-image: url("/images/global/shapes/ribbon-bordered-yellow.svg");
      color: var(--body-font-color);
    }
    .btn-ribbon.btn-yellow:hover {
      color: var(--body-font-color);
    }
    .btn-ribbon:not(:disabled):not(.disabled).active, .btn-ribbon:not(:disabled):not(.disabled):active, .show > .btn-ribbon.dropdown-toggle {
      color: var(--white-text-color);
      background-color: transparent;
      border-color: transparent;
    }
    .btn-ribbon:not(:disabled):not(.disabled).active:focus, .btn-ribbon:not(:disabled):not(.disabled):active:focus, .show > .btn-ribbon.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem transparent;
    }
    .btn-outline-info {
      color: var(--info-color);
      border: 2px solid var(--info-color);
      box-shadow: 5px 4px 0 1px var(--info-color);
      margin-bottom: 5px;
      background-color: transparent;
      transition: all ease 0.3s;
    }
    .btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active, .btn-outline-info.focus, .btn-outline-info.active {
      color: var(--info-color);
      border-color: var(--info-color);
      background-color: transparent;
      box-shadow: 2px 2px 0 1px var(--info-color);
    }
    .btn-outline-info:not(:disabled):not(.disabled):active, .show > .btn-outline-info.dropdown-toggle {
      color: var(--info-color);
      border-color: var(--info-color);
      background-color: transparent;
      box-shadow: 2px 2px 0 1px var(--info-color);
      opacity: 75%;
    }
    .btn-outline-info.focus, .btn-outline-info:focus {
      box-shadow: 2px 2px 0 1px var(--info-color);
      background-color: transparent;
    }
    .btn-plain-primary {
      color: var(--dark-color-dark);
      border: 2px solid var(--primary-color);
      background-color: var(--primary-color);
      transition: all ease 0.3s;
    }
    .btn-plain-primary:hover, .btn-plain-primary:focus, .btn-plain-primary:active, .btn-plain-primary.focus, .btn-plain-primary.active {
      border-color: var(--primary-color);
      background-color: var(var(--primary-color) -light);
    }
    .btn-plain-primary:not(:disabled):not(.disabled).active, .btn-plain-primary:not(:disabled):not(.disabled):active, .show > .btn-plain-primary.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-primary.focus, .btn-plain-primary:focus {
      background-color: var(--light-color);
    }
    .btn-plain-secondary {
      color: var(--dark-color-dark);
      border: 2px solid var(--secondary-color);
      background-color: var(--secondary-color);
      transition: all ease 0.3s;
    }
    .btn-plain-secondary:hover, .btn-plain-secondary:focus, .btn-plain-secondary:active, .btn-plain-secondary.focus, .btn-plain-secondary.active {
      border-color: var(--secondary-color);
      background-color: var(var(--secondary-color) -light);
    }
    .btn-plain-secondary:not(:disabled):not(.disabled).active, .btn-plain-secondary:not(:disabled):not(.disabled):active, .show > .btn-plain-secondary.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-secondary.focus, .btn-plain-secondary:focus {
      background-color: var(--light-color);
    }
    .btn-plain-success {
      color: var(--dark-color-dark);
      border: 2px solid var(--success-color);
      background-color: var(--success-color);
      transition: all ease 0.3s;
    }
    .btn-plain-success:hover, .btn-plain-success:focus, .btn-plain-success:active, .btn-plain-success.focus, .btn-plain-success.active {
      border-color: var(--success-color);
      background-color: var(var(--success-color) -light);
    }
    .btn-plain-success:not(:disabled):not(.disabled).active, .btn-plain-success:not(:disabled):not(.disabled):active, .show > .btn-plain-success.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-success.focus, .btn-plain-success:focus {
      background-color: var(--light-color);
    }
    .btn-plain-warning {
      color: var(--dark-color-dark);
      border: 2px solid var(--warning-color);
      background-color: var(--warning-color);
      transition: all ease 0.3s;
    }
    .btn-plain-warning:hover, .btn-plain-warning:focus, .btn-plain-warning:active, .btn-plain-warning.focus, .btn-plain-warning.active {
      border-color: var(--warning-color);
      background-color: var(var(--warning-color) -light);
    }
    .btn-plain-warning:not(:disabled):not(.disabled).active, .btn-plain-warning:not(:disabled):not(.disabled):active, .show > .btn-plain-warning.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-warning.focus, .btn-plain-warning:focus {
      background-color: var(--light-color);
    }
    .btn-plain-info {
      color: var(--dark-color-dark);
      border: 2px solid var(--info-color);
      background-color: var(--info-color);
      transition: all ease 0.3s;
    }
    .btn-plain-info:hover, .btn-plain-info:focus, .btn-plain-info:active, .btn-plain-info.focus, .btn-plain-info.active {
      border-color: var(--info-color);
      background-color: var(var(--info-color) -light);
    }
    .btn-plain-info:not(:disabled):not(.disabled).active, .btn-plain-info:not(:disabled):not(.disabled):active, .show > .btn-plain-info.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-info.focus, .btn-plain-info:focus {
      background-color: var(--light-color);
    }
    .btn-plain-danger {
      color: var(--dark-color-dark);
      border: 2px solid var(--danger-color);
      background-color: var(--danger-color);
      transition: all ease 0.3s;
    }
    .btn-plain-danger:hover, .btn-plain-danger:focus, .btn-plain-danger:active, .btn-plain-danger.focus, .btn-plain-danger.active {
      border-color: var(--danger-color);
      background-color: var(var(--danger-color) -light);
    }
    .btn-plain-danger:not(:disabled):not(.disabled).active, .btn-plain-danger:not(:disabled):not(.disabled):active, .show > .btn-plain-danger.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-danger.focus, .btn-plain-danger:focus {
      background-color: var(--light-color);
    }
    .btn-plain-light {
      color: var(--dark-color-dark);
      border: 2px solid var(--light-color);
      background-color: var(--light-color);
      transition: all ease 0.3s;
    }
    .btn-plain-light:hover, .btn-plain-light:focus, .btn-plain-light:active, .btn-plain-light.focus, .btn-plain-light.active {
      border-color: var(--light-color);
      background-color: var(var(--light-color) -light);
    }
    .btn-plain-light:not(:disabled):not(.disabled).active, .btn-plain-light:not(:disabled):not(.disabled):active, .show > .btn-plain-light.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-light.focus, .btn-plain-light:focus {
      background-color: var(--light-color);
    }
    .btn-plain-dark {
      color: var(--dark-color-dark);
      border: 2px solid var(--dark-color);
      background-color: var(--dark-color);
      transition: all ease 0.3s;
    }
    .btn-plain-dark:hover, .btn-plain-dark:focus, .btn-plain-dark:active, .btn-plain-dark.focus, .btn-plain-dark.active {
      border-color: var(--dark-color);
      background-color: var(var(--dark-color) -light);
    }
    .btn-plain-dark:not(:disabled):not(.disabled).active, .btn-plain-dark:not(:disabled):not(.disabled):active, .show > .btn-plain-dark.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-dark.focus, .btn-plain-dark:focus {
      background-color: var(--light-color);
    }
    .btn-ribbon {
      background-image: url("/images/global/shapes/ribbon-bordered-orange.svg");
      background-position: 50% 50%;
      background-size: contain;
      padding: 1rem 1.75rem;
      background-repeat: no-repeat;
      background-color: transparent;
      border-color: transparent;
      -webkit-transition: 0.3s;
      transition: 0.3s;
      font-size: 1.5rem;
      font-family: henderson-slab-basic, serif;
      border-radius: 0%;
      color: var(--light-text-color);
      box-shadow: none;
    }
    .btn-ribbon:hover {
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
      color: var(--light-text-color);
      background-color: transparent;
      border-color: transparent;
    }
    .btn-ribbon.focus, .btn-ribbon:focus {
      box-shadow: 0 0 0 0.2rem transparent;
      background-color: transparent;
      border: transparent;
    }
    .btn-ribbon > span {
      margin: 0em 0.5em;
    }
    .btn-ribbon.btn-lg {
      padding: 1rem 2rem;
    }
    .btn-ribbon.btn-green {
      background-image: url("/images/global/shapes/ribbon-bordered-green.svg");
      color: var(--light-text-color);
    }
    .btn-ribbon.btn-blue {
      background-image: url("/images/global/shapes/ribbon-bordered-blue.svg");
      color: var(--light-text-color);
    }
    .btn-ribbon.btn-yellow {
      background-image: url("/images/global/shapes/ribbon-bordered-yellow.svg");
      color: var(--body-font-color);
    }
    .btn-ribbon.btn-yellow:hover {
      color: var(--body-font-color);
    }
    .btn-ribbon:not(:disabled):not(.disabled).active, .btn-ribbon:not(:disabled):not(.disabled):active, .show > .btn-ribbon.dropdown-toggle {
      color: var(--white-text-color);
      background-color: transparent;
      border-color: transparent;
    }
    .btn-ribbon:not(:disabled):not(.disabled).active:focus, .btn-ribbon:not(:disabled):not(.disabled):active:focus, .show > .btn-ribbon.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem transparent;
    }
    .btn-outline-danger {
      color: var(--danger-color);
      border: 2px solid var(--danger-color);
      box-shadow: 5px 4px 0 1px var(--danger-color);
      margin-bottom: 5px;
      background-color: transparent;
      transition: all ease 0.3s;
    }
    .btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active, .btn-outline-danger.focus, .btn-outline-danger.active {
      color: var(--danger-color);
      border-color: var(--danger-color);
      background-color: transparent;
      box-shadow: 2px 2px 0 1px var(--danger-color);
    }
    .btn-outline-danger:not(:disabled):not(.disabled):active, .show > .btn-outline-danger.dropdown-toggle {
      color: var(--danger-color);
      border-color: var(--danger-color);
      background-color: transparent;
      box-shadow: 2px 2px 0 1px var(--danger-color);
      opacity: 75%;
    }
    .btn-outline-danger.focus, .btn-outline-danger:focus {
      box-shadow: 2px 2px 0 1px var(--danger-color);
      background-color: transparent;
    }
    .btn-plain-primary {
      color: var(--dark-color-dark);
      border: 2px solid var(--primary-color);
      background-color: var(--primary-color);
      transition: all ease 0.3s;
    }
    .btn-plain-primary:hover, .btn-plain-primary:focus, .btn-plain-primary:active, .btn-plain-primary.focus, .btn-plain-primary.active {
      border-color: var(--primary-color);
      background-color: var(var(--primary-color) -light);
    }
    .btn-plain-primary:not(:disabled):not(.disabled).active, .btn-plain-primary:not(:disabled):not(.disabled):active, .show > .btn-plain-primary.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-primary.focus, .btn-plain-primary:focus {
      background-color: var(--light-color);
    }
    .btn-plain-secondary {
      color: var(--dark-color-dark);
      border: 2px solid var(--secondary-color);
      background-color: var(--secondary-color);
      transition: all ease 0.3s;
    }
    .btn-plain-secondary:hover, .btn-plain-secondary:focus, .btn-plain-secondary:active, .btn-plain-secondary.focus, .btn-plain-secondary.active {
      border-color: var(--secondary-color);
      background-color: var(var(--secondary-color) -light);
    }
    .btn-plain-secondary:not(:disabled):not(.disabled).active, .btn-plain-secondary:not(:disabled):not(.disabled):active, .show > .btn-plain-secondary.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-secondary.focus, .btn-plain-secondary:focus {
      background-color: var(--light-color);
    }
    .btn-plain-success {
      color: var(--dark-color-dark);
      border: 2px solid var(--success-color);
      background-color: var(--success-color);
      transition: all ease 0.3s;
    }
    .btn-plain-success:hover, .btn-plain-success:focus, .btn-plain-success:active, .btn-plain-success.focus, .btn-plain-success.active {
      border-color: var(--success-color);
      background-color: var(var(--success-color) -light);
    }
    .btn-plain-success:not(:disabled):not(.disabled).active, .btn-plain-success:not(:disabled):not(.disabled):active, .show > .btn-plain-success.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-success.focus, .btn-plain-success:focus {
      background-color: var(--light-color);
    }
    .btn-plain-warning {
      color: var(--dark-color-dark);
      border: 2px solid var(--warning-color);
      background-color: var(--warning-color);
      transition: all ease 0.3s;
    }
    .btn-plain-warning:hover, .btn-plain-warning:focus, .btn-plain-warning:active, .btn-plain-warning.focus, .btn-plain-warning.active {
      border-color: var(--warning-color);
      background-color: var(var(--warning-color) -light);
    }
    .btn-plain-warning:not(:disabled):not(.disabled).active, .btn-plain-warning:not(:disabled):not(.disabled):active, .show > .btn-plain-warning.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-warning.focus, .btn-plain-warning:focus {
      background-color: var(--light-color);
    }
    .btn-plain-info {
      color: var(--dark-color-dark);
      border: 2px solid var(--info-color);
      background-color: var(--info-color);
      transition: all ease 0.3s;
    }
    .btn-plain-info:hover, .btn-plain-info:focus, .btn-plain-info:active, .btn-plain-info.focus, .btn-plain-info.active {
      border-color: var(--info-color);
      background-color: var(var(--info-color) -light);
    }
    .btn-plain-info:not(:disabled):not(.disabled).active, .btn-plain-info:not(:disabled):not(.disabled):active, .show > .btn-plain-info.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-info.focus, .btn-plain-info:focus {
      background-color: var(--light-color);
    }
    .btn-plain-danger {
      color: var(--dark-color-dark);
      border: 2px solid var(--danger-color);
      background-color: var(--danger-color);
      transition: all ease 0.3s;
    }
    .btn-plain-danger:hover, .btn-plain-danger:focus, .btn-plain-danger:active, .btn-plain-danger.focus, .btn-plain-danger.active {
      border-color: var(--danger-color);
      background-color: var(var(--danger-color) -light);
    }
    .btn-plain-danger:not(:disabled):not(.disabled).active, .btn-plain-danger:not(:disabled):not(.disabled):active, .show > .btn-plain-danger.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-danger.focus, .btn-plain-danger:focus {
      background-color: var(--light-color);
    }
    .btn-plain-light {
      color: var(--dark-color-dark);
      border: 2px solid var(--light-color);
      background-color: var(--light-color);
      transition: all ease 0.3s;
    }
    .btn-plain-light:hover, .btn-plain-light:focus, .btn-plain-light:active, .btn-plain-light.focus, .btn-plain-light.active {
      border-color: var(--light-color);
      background-color: var(var(--light-color) -light);
    }
    .btn-plain-light:not(:disabled):not(.disabled).active, .btn-plain-light:not(:disabled):not(.disabled):active, .show > .btn-plain-light.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-light.focus, .btn-plain-light:focus {
      background-color: var(--light-color);
    }
    .btn-plain-dark {
      color: var(--dark-color-dark);
      border: 2px solid var(--dark-color);
      background-color: var(--dark-color);
      transition: all ease 0.3s;
    }
    .btn-plain-dark:hover, .btn-plain-dark:focus, .btn-plain-dark:active, .btn-plain-dark.focus, .btn-plain-dark.active {
      border-color: var(--dark-color);
      background-color: var(var(--dark-color) -light);
    }
    .btn-plain-dark:not(:disabled):not(.disabled).active, .btn-plain-dark:not(:disabled):not(.disabled):active, .show > .btn-plain-dark.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-dark.focus, .btn-plain-dark:focus {
      background-color: var(--light-color);
    }
    .btn-ribbon {
      background-image: url("/images/global/shapes/ribbon-bordered-orange.svg");
      background-position: 50% 50%;
      background-size: contain;
      padding: 1rem 1.75rem;
      background-repeat: no-repeat;
      background-color: transparent;
      border-color: transparent;
      -webkit-transition: 0.3s;
      transition: 0.3s;
      font-size: 1.5rem;
      font-family: henderson-slab-basic, serif;
      border-radius: 0%;
      color: var(--light-text-color);
      box-shadow: none;
    }
    .btn-ribbon:hover {
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
      color: var(--light-text-color);
      background-color: transparent;
      border-color: transparent;
    }
    .btn-ribbon.focus, .btn-ribbon:focus {
      box-shadow: 0 0 0 0.2rem transparent;
      background-color: transparent;
      border: transparent;
    }
    .btn-ribbon > span {
      margin: 0em 0.5em;
    }
    .btn-ribbon.btn-lg {
      padding: 1rem 2rem;
    }
    .btn-ribbon.btn-green {
      background-image: url("/images/global/shapes/ribbon-bordered-green.svg");
      color: var(--light-text-color);
    }
    .btn-ribbon.btn-blue {
      background-image: url("/images/global/shapes/ribbon-bordered-blue.svg");
      color: var(--light-text-color);
    }
    .btn-ribbon.btn-yellow {
      background-image: url("/images/global/shapes/ribbon-bordered-yellow.svg");
      color: var(--body-font-color);
    }
    .btn-ribbon.btn-yellow:hover {
      color: var(--body-font-color);
    }
    .btn-ribbon:not(:disabled):not(.disabled).active, .btn-ribbon:not(:disabled):not(.disabled):active, .show > .btn-ribbon.dropdown-toggle {
      color: var(--white-text-color);
      background-color: transparent;
      border-color: transparent;
    }
    .btn-ribbon:not(:disabled):not(.disabled).active:focus, .btn-ribbon:not(:disabled):not(.disabled):active:focus, .show > .btn-ribbon.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem transparent;
    }
    .btn-outline-light {
      color: var(--light-text-color);
      border: 2px solid var(--light-text-color);
      box-shadow: 5px 4px 0 1px var(--light-text-color);
      margin-bottom: 5px;
      background-color: transparent;
      transition: all ease 0.3s;
    }
    .btn-outline-light:hover, .btn-outline-light:focus, .btn-outline-light:active, .btn-outline-light.focus, .btn-outline-light.active {
      color: var(--light-text-color);
      border-color: var(--light-text-color);
      background-color: transparent;
      box-shadow: 2px 2px 0 1px var(--light-text-color);
    }
    .btn-outline-light:not(:disabled):not(.disabled):active, .show > .btn-outline-light.dropdown-toggle {
      color: var(--light-text-color);
      border-color: var(--light-text-color);
      background-color: transparent;
      box-shadow: 2px 2px 0 1px var(--light-text-color);
      opacity: 75%;
    }
    .btn-outline-light.focus, .btn-outline-light:focus {
      box-shadow: 2px 2px 0 1px var(--light-text-color);
      background-color: transparent;
    }
    .btn-plain-primary {
      color: var(--dark-color-dark);
      border: 2px solid var(--primary-color);
      background-color: var(--primary-color);
      transition: all ease 0.3s;
    }
    .btn-plain-primary:hover, .btn-plain-primary:focus, .btn-plain-primary:active, .btn-plain-primary.focus, .btn-plain-primary.active {
      border-color: var(--primary-color);
      background-color: var(var(--primary-color) -light);
    }
    .btn-plain-primary:not(:disabled):not(.disabled).active, .btn-plain-primary:not(:disabled):not(.disabled):active, .show > .btn-plain-primary.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-primary.focus, .btn-plain-primary:focus {
      background-color: var(--light-color);
    }
    .btn-plain-secondary {
      color: var(--dark-color-dark);
      border: 2px solid var(--secondary-color);
      background-color: var(--secondary-color);
      transition: all ease 0.3s;
    }
    .btn-plain-secondary:hover, .btn-plain-secondary:focus, .btn-plain-secondary:active, .btn-plain-secondary.focus, .btn-plain-secondary.active {
      border-color: var(--secondary-color);
      background-color: var(var(--secondary-color) -light);
    }
    .btn-plain-secondary:not(:disabled):not(.disabled).active, .btn-plain-secondary:not(:disabled):not(.disabled):active, .show > .btn-plain-secondary.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-secondary.focus, .btn-plain-secondary:focus {
      background-color: var(--light-color);
    }
    .btn-plain-success {
      color: var(--dark-color-dark);
      border: 2px solid var(--success-color);
      background-color: var(--success-color);
      transition: all ease 0.3s;
    }
    .btn-plain-success:hover, .btn-plain-success:focus, .btn-plain-success:active, .btn-plain-success.focus, .btn-plain-success.active {
      border-color: var(--success-color);
      background-color: var(var(--success-color) -light);
    }
    .btn-plain-success:not(:disabled):not(.disabled).active, .btn-plain-success:not(:disabled):not(.disabled):active, .show > .btn-plain-success.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-success.focus, .btn-plain-success:focus {
      background-color: var(--light-color);
    }
    .btn-plain-warning {
      color: var(--dark-color-dark);
      border: 2px solid var(--warning-color);
      background-color: var(--warning-color);
      transition: all ease 0.3s;
    }
    .btn-plain-warning:hover, .btn-plain-warning:focus, .btn-plain-warning:active, .btn-plain-warning.focus, .btn-plain-warning.active {
      border-color: var(--warning-color);
      background-color: var(var(--warning-color) -light);
    }
    .btn-plain-warning:not(:disabled):not(.disabled).active, .btn-plain-warning:not(:disabled):not(.disabled):active, .show > .btn-plain-warning.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-warning.focus, .btn-plain-warning:focus {
      background-color: var(--light-color);
    }
    .btn-plain-info {
      color: var(--dark-color-dark);
      border: 2px solid var(--info-color);
      background-color: var(--info-color);
      transition: all ease 0.3s;
    }
    .btn-plain-info:hover, .btn-plain-info:focus, .btn-plain-info:active, .btn-plain-info.focus, .btn-plain-info.active {
      border-color: var(--info-color);
      background-color: var(var(--info-color) -light);
    }
    .btn-plain-info:not(:disabled):not(.disabled).active, .btn-plain-info:not(:disabled):not(.disabled):active, .show > .btn-plain-info.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-info.focus, .btn-plain-info:focus {
      background-color: var(--light-color);
    }
    .btn-plain-danger {
      color: var(--dark-color-dark);
      border: 2px solid var(--danger-color);
      background-color: var(--danger-color);
      transition: all ease 0.3s;
    }
    .btn-plain-danger:hover, .btn-plain-danger:focus, .btn-plain-danger:active, .btn-plain-danger.focus, .btn-plain-danger.active {
      border-color: var(--danger-color);
      background-color: var(var(--danger-color) -light);
    }
    .btn-plain-danger:not(:disabled):not(.disabled).active, .btn-plain-danger:not(:disabled):not(.disabled):active, .show > .btn-plain-danger.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-danger.focus, .btn-plain-danger:focus {
      background-color: var(--light-color);
    }
    .btn-plain-light {
      color: var(--dark-color-dark);
      border: 2px solid var(--light-color);
      background-color: var(--light-color);
      transition: all ease 0.3s;
    }
    .btn-plain-light:hover, .btn-plain-light:focus, .btn-plain-light:active, .btn-plain-light.focus, .btn-plain-light.active {
      border-color: var(--light-color);
      background-color: var(var(--light-color) -light);
    }
    .btn-plain-light:not(:disabled):not(.disabled).active, .btn-plain-light:not(:disabled):not(.disabled):active, .show > .btn-plain-light.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-light.focus, .btn-plain-light:focus {
      background-color: var(--light-color);
    }
    .btn-plain-dark {
      color: var(--dark-color-dark);
      border: 2px solid var(--dark-color);
      background-color: var(--dark-color);
      transition: all ease 0.3s;
    }
    .btn-plain-dark:hover, .btn-plain-dark:focus, .btn-plain-dark:active, .btn-plain-dark.focus, .btn-plain-dark.active {
      border-color: var(--dark-color);
      background-color: var(var(--dark-color) -light);
    }
    .btn-plain-dark:not(:disabled):not(.disabled).active, .btn-plain-dark:not(:disabled):not(.disabled):active, .show > .btn-plain-dark.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-dark.focus, .btn-plain-dark:focus {
      background-color: var(--light-color);
    }
    .btn-ribbon {
      background-image: url("/images/global/shapes/ribbon-bordered-orange.svg");
      background-position: 50% 50%;
      background-size: contain;
      padding: 1rem 1.75rem;
      background-repeat: no-repeat;
      background-color: transparent;
      border-color: transparent;
      -webkit-transition: 0.3s;
      transition: 0.3s;
      font-size: 1.5rem;
      font-family: henderson-slab-basic, serif;
      border-radius: 0%;
      color: var(--light-text-color);
      box-shadow: none;
    }
    .btn-ribbon:hover {
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
      color: var(--light-text-color);
      background-color: transparent;
      border-color: transparent;
    }
    .btn-ribbon.focus, .btn-ribbon:focus {
      box-shadow: 0 0 0 0.2rem transparent;
      background-color: transparent;
      border: transparent;
    }
    .btn-ribbon > span {
      margin: 0em 0.5em;
    }
    .btn-ribbon.btn-lg {
      padding: 1rem 2rem;
    }
    .btn-ribbon.btn-green {
      background-image: url("/images/global/shapes/ribbon-bordered-green.svg");
      color: var(--light-text-color);
    }
    .btn-ribbon.btn-blue {
      background-image: url("/images/global/shapes/ribbon-bordered-blue.svg");
      color: var(--light-text-color);
    }
    .btn-ribbon.btn-yellow {
      background-image: url("/images/global/shapes/ribbon-bordered-yellow.svg");
      color: var(--body-font-color);
    }
    .btn-ribbon.btn-yellow:hover {
      color: var(--body-font-color);
    }
    .btn-ribbon:not(:disabled):not(.disabled).active, .btn-ribbon:not(:disabled):not(.disabled):active, .show > .btn-ribbon.dropdown-toggle {
      color: var(--white-text-color);
      background-color: transparent;
      border-color: transparent;
    }
    .btn-ribbon:not(:disabled):not(.disabled).active:focus, .btn-ribbon:not(:disabled):not(.disabled):active:focus, .show > .btn-ribbon.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem transparent;
    }
    .btn-outline-dark {
      color: var(--dark-color);
      border: 2px solid var(--dark-color);
      box-shadow: 5px 4px 0 1px var(--dark-color);
      margin-bottom: 5px;
      background-color: transparent;
      transition: all ease 0.3s;
    }
    .btn-outline-dark:hover, .btn-outline-dark:focus, .btn-outline-dark:active, .btn-outline-dark.focus, .btn-outline-dark.active {
      color: var(--dark-color);
      border-color: var(--dark-color);
      background-color: transparent;
      box-shadow: 2px 2px 0 1px var(--dark-color);
    }
    .btn-outline-dark:not(:disabled):not(.disabled):active, .show > .btn-outline-dark.dropdown-toggle {
      color: var(--dark-color);
      border-color: var(--dark-color);
      background-color: transparent;
      box-shadow: 2px 2px 0 1px var(--dark-color);
      opacity: 75%;
    }
    .btn-outline-dark.focus, .btn-outline-dark:focus {
      box-shadow: 2px 2px 0 1px var(--dark-color);
      background-color: transparent;
    }
    .btn-plain-primary {
      color: var(--dark-color-dark);
      border: 2px solid var(--primary-color);
      background-color: var(--primary-color);
      transition: all ease 0.3s;
    }
    .btn-plain-primary:hover, .btn-plain-primary:focus, .btn-plain-primary:active, .btn-plain-primary.focus, .btn-plain-primary.active {
      border-color: var(--primary-color);
      background-color: var(var(--primary-color) -light);
    }
    .btn-plain-primary:not(:disabled):not(.disabled).active, .btn-plain-primary:not(:disabled):not(.disabled):active, .show > .btn-plain-primary.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-primary.focus, .btn-plain-primary:focus {
      background-color: var(--light-color);
    }
    .btn-plain-secondary {
      color: var(--dark-color-dark);
      border: 2px solid var(--secondary-color);
      background-color: var(--secondary-color);
      transition: all ease 0.3s;
    }
    .btn-plain-secondary:hover, .btn-plain-secondary:focus, .btn-plain-secondary:active, .btn-plain-secondary.focus, .btn-plain-secondary.active {
      border-color: var(--secondary-color);
      background-color: var(var(--secondary-color) -light);
    }
    .btn-plain-secondary:not(:disabled):not(.disabled).active, .btn-plain-secondary:not(:disabled):not(.disabled):active, .show > .btn-plain-secondary.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-secondary.focus, .btn-plain-secondary:focus {
      background-color: var(--light-color);
    }
    .btn-plain-success {
      color: var(--dark-color-dark);
      border: 2px solid var(--success-color);
      background-color: var(--success-color);
      transition: all ease 0.3s;
    }
    .btn-plain-success:hover, .btn-plain-success:focus, .btn-plain-success:active, .btn-plain-success.focus, .btn-plain-success.active {
      border-color: var(--success-color);
      background-color: var(var(--success-color) -light);
    }
    .btn-plain-success:not(:disabled):not(.disabled).active, .btn-plain-success:not(:disabled):not(.disabled):active, .show > .btn-plain-success.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-success.focus, .btn-plain-success:focus {
      background-color: var(--light-color);
    }
    .btn-plain-warning {
      color: var(--dark-color-dark);
      border: 2px solid var(--warning-color);
      background-color: var(--warning-color);
      transition: all ease 0.3s;
    }
    .btn-plain-warning:hover, .btn-plain-warning:focus, .btn-plain-warning:active, .btn-plain-warning.focus, .btn-plain-warning.active {
      border-color: var(--warning-color);
      background-color: var(var(--warning-color) -light);
    }
    .btn-plain-warning:not(:disabled):not(.disabled).active, .btn-plain-warning:not(:disabled):not(.disabled):active, .show > .btn-plain-warning.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-warning.focus, .btn-plain-warning:focus {
      background-color: var(--light-color);
    }
    .btn-plain-info {
      color: var(--dark-color-dark);
      border: 2px solid var(--info-color);
      background-color: var(--info-color);
      transition: all ease 0.3s;
    }
    .btn-plain-info:hover, .btn-plain-info:focus, .btn-plain-info:active, .btn-plain-info.focus, .btn-plain-info.active {
      border-color: var(--info-color);
      background-color: var(var(--info-color) -light);
    }
    .btn-plain-info:not(:disabled):not(.disabled).active, .btn-plain-info:not(:disabled):not(.disabled):active, .show > .btn-plain-info.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-info.focus, .btn-plain-info:focus {
      background-color: var(--light-color);
    }
    .btn-plain-danger {
      color: var(--dark-color-dark);
      border: 2px solid var(--danger-color);
      background-color: var(--danger-color);
      transition: all ease 0.3s;
    }
    .btn-plain-danger:hover, .btn-plain-danger:focus, .btn-plain-danger:active, .btn-plain-danger.focus, .btn-plain-danger.active {
      border-color: var(--danger-color);
      background-color: var(var(--danger-color) -light);
    }
    .btn-plain-danger:not(:disabled):not(.disabled).active, .btn-plain-danger:not(:disabled):not(.disabled):active, .show > .btn-plain-danger.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-danger.focus, .btn-plain-danger:focus {
      background-color: var(--light-color);
    }
    .btn-plain-light {
      color: var(--dark-color-dark);
      border: 2px solid var(--light-color);
      background-color: var(--light-color);
      transition: all ease 0.3s;
    }
    .btn-plain-light:hover, .btn-plain-light:focus, .btn-plain-light:active, .btn-plain-light.focus, .btn-plain-light.active {
      border-color: var(--light-color);
      background-color: var(var(--light-color) -light);
    }
    .btn-plain-light:not(:disabled):not(.disabled).active, .btn-plain-light:not(:disabled):not(.disabled):active, .show > .btn-plain-light.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-light.focus, .btn-plain-light:focus {
      background-color: var(--light-color);
    }
    .btn-plain-dark {
      color: var(--dark-color-dark);
      border: 2px solid var(--dark-color);
      background-color: var(--dark-color);
      transition: all ease 0.3s;
    }
    .btn-plain-dark:hover, .btn-plain-dark:focus, .btn-plain-dark:active, .btn-plain-dark.focus, .btn-plain-dark.active {
      border-color: var(--dark-color);
      background-color: var(var(--dark-color) -light);
    }
    .btn-plain-dark:not(:disabled):not(.disabled).active, .btn-plain-dark:not(:disabled):not(.disabled):active, .show > .btn-plain-dark.dropdown-toggle {
      opacity: 75%;
    }
    .btn-plain-dark.focus, .btn-plain-dark:focus {
      background-color: var(--light-color);
    }
    .btn-ribbon {
      background-image: url("/images/global/shapes/ribbon-bordered-orange.svg");
      background-position: 50% 50%;
      background-size: contain;
      padding: 1rem 1.75rem;
      background-repeat: no-repeat;
      background-color: transparent;
      border-color: transparent;
      -webkit-transition: 0.3s;
      transition: 0.3s;
      font-size: 1.5rem;
      font-family: henderson-slab-basic, serif;
      border-radius: 0%;
      color: var(--light-text-color);
      box-shadow: none;
    }
    .btn-ribbon:hover {
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
      color: var(--light-text-color);
      background-color: transparent;
      border-color: transparent;
    }
    .btn-ribbon.focus, .btn-ribbon:focus {
      box-shadow: 0 0 0 0.2rem transparent;
      background-color: transparent;
      border: transparent;
    }
    .btn-ribbon > span {
      margin: 0em 0.5em;
    }
    .btn-ribbon.btn-lg {
      padding: 1rem 2rem;
    }
    .btn-ribbon.btn-green {
      background-image: url("/images/global/shapes/ribbon-bordered-green.svg");
      color: var(--light-text-color);
    }
    .btn-ribbon.btn-blue {
      background-image: url("/images/global/shapes/ribbon-bordered-blue.svg");
      color: var(--light-text-color);
    }
    .btn-ribbon.btn-yellow {
      background-image: url("/images/global/shapes/ribbon-bordered-yellow.svg");
      color: var(--body-font-color);
    }
    .btn-ribbon.btn-yellow:hover {
      color: var(--body-font-color);
    }
    .btn-ribbon:not(:disabled):not(.disabled).active, .btn-ribbon:not(:disabled):not(.disabled):active, .show > .btn-ribbon.dropdown-toggle {
      color: var(--white-text-color);
      background-color: transparent;
      border-color: transparent;
    }
    .btn-ribbon:not(:disabled):not(.disabled).active:focus, .btn-ribbon:not(:disabled):not(.disabled):active:focus, .show > .btn-ribbon.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem transparent;
    }
    .scale-on-hover, .lightbox-modal .popup-container .popup-button, .floating-menu-container .lightbox-modal .popup-container .open-close-button, .lightbox-modal .floating-menu-container .popup-button, .lightbox-modal .floating-menu-container .open-close-button {
      -webkit-transition: 0.3s;
      transition: 0.3s;
    }
    .scale-on-hover:hover, .lightbox-modal .popup-container .popup-button:hover, .floating-menu-container .lightbox-modal .popup-container .open-close-button:hover, .lightbox-modal .floating-menu-container .popup-button:hover, .lightbox-modal .floating-menu-container .open-close-button:hover {
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
    }
    .raise-on-hover {
      -webkit-transition: 200ms ease-in-out;
      transition: 200ms ease-in-out;
      cursor: pointer;
    }
    .raise-on-hover:hover {
      -webkit-transform: translateY(-6px);
      transform: translateY(-6px);
    }
    .rotate-on-hover:hover {
      -webkit-animation: rotate-right 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
      animation: rotate-right 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) both;
    }
    .back-button {
      position: absolute;
      top: 0;
      left: 0;
      margin: 1em;
      z-index: 2;
      -webkit-appearance: none;
      background-color: transparent;
      outline: transparent;
      border: transparent;
    }
    .back-button:focus {
      outline: none;
    }
    .btn-icon-primary {
      color: var(--primary-color-dark);
      border: 2px solid var(--primary-color);
      background-color: var(--primary-color);
      transition: all ease 0.3s;
      border-radius: 50%;
      height: 40px;
      width: 40px;
    }
    .btn-icon-primary:hover, .btn-icon-primary:focus, .btn-icon-primary:active, .btn-icon-primary.focus, .btn-icon-primary.active {
      border-color: var(--primary-color);
      background-color: var(--primary-color-dark);
    }
    .btn-icon-primary:not(:disabled):not(.disabled).active, .btn-icon-primary:not(:disabled):not(.disabled):active, .show > .btn-icon-primary.dropdown-toggle {
      opacity: 75%;
    }
    .btn-icon-primary.focus, .btn-icon-primary:focus {
      box-shadow: 0 0 0 0.2rem rgba(var(--primary-color)), 0.3;
    }
    .btn-icon-primary.btn-lg {
      height: 60px;
      width: 60px;
    }
    .btn-icon-primary.btn-lg i {
      font-size: 2.5rem;
    }
    @media (max-width: 1199.98px) {
      .btn-icon-primary.btn-lg {
        height: 42px;
        width: 42px;
      }
      .btn-icon-primary.btn-lg i {
        font-size: 1.5rem;
      }
    }
    .btn-icon-primary.btn-lg.btn-course {
      background-color: #F5F1C7;
      border-color: #768327;
      padding-bottom: 10px;
    }
    .btn-icon-primary.btn-lg.btn-course.hover, .btn-icon-primary.btn-lg.btn-course:hover {
      background-color: #e7dcaf;
    }
    .btn-icon-secondary {
      color: var(--secondary-color-dark);
      border: 2px solid var(--secondary-color);
      background-color: var(--secondary-color);
      transition: all ease 0.3s;
      border-radius: 50%;
      height: 40px;
      width: 40px;
    }
    .btn-icon-secondary:hover, .btn-icon-secondary:focus, .btn-icon-secondary:active, .btn-icon-secondary.focus, .btn-icon-secondary.active {
      border-color: var(--secondary-color);
      background-color: var(--secondary-color-dark);
    }
    .btn-icon-secondary:not(:disabled):not(.disabled).active, .btn-icon-secondary:not(:disabled):not(.disabled):active, .show > .btn-icon-secondary.dropdown-toggle {
      opacity: 75%;
    }
    .btn-icon-secondary.focus, .btn-icon-secondary:focus {
      box-shadow: 0 0 0 0.2rem rgba(var(--secondary-color)), 0.3;
    }
    .btn-icon-secondary.btn-lg {
      height: 60px;
      width: 60px;
    }
    .btn-icon-secondary.btn-lg i {
      font-size: 2.5rem;
    }
    @media (max-width: 1199.98px) {
      .btn-icon-secondary.btn-lg {
        height: 42px;
        width: 42px;
      }
      .btn-icon-secondary.btn-lg i {
        font-size: 1.5rem;
      }
    }
    .btn-icon-secondary.btn-lg.btn-course {
      background-color: #F5F1C7;
      border-color: #768327;
      padding-bottom: 10px;
    }
    .btn-icon-secondary.btn-lg.btn-course.hover, .btn-icon-secondary.btn-lg.btn-course:hover {
      background-color: #e7dcaf;
    }
    .btn-icon-success {
      color: var(--success-color-dark);
      border: 2px solid var(--success-color);
      background-color: var(--success-color);
      transition: all ease 0.3s;
      border-radius: 50%;
      height: 40px;
      width: 40px;
    }
    .btn-icon-success:hover, .btn-icon-success:focus, .btn-icon-success:active, .btn-icon-success.focus, .btn-icon-success.active {
      border-color: var(--success-color);
      background-color: var(--success-color-dark);
    }
    .btn-icon-success:not(:disabled):not(.disabled).active, .btn-icon-success:not(:disabled):not(.disabled):active, .show > .btn-icon-success.dropdown-toggle {
      opacity: 75%;
    }
    .btn-icon-success.focus, .btn-icon-success:focus {
      box-shadow: 0 0 0 0.2rem rgba(var(--success-color)), 0.3;
    }
    .btn-icon-success.btn-lg {
      height: 60px;
      width: 60px;
    }
    .btn-icon-success.btn-lg i {
      font-size: 2.5rem;
    }
    @media (max-width: 1199.98px) {
      .btn-icon-success.btn-lg {
        height: 42px;
        width: 42px;
      }
      .btn-icon-success.btn-lg i {
        font-size: 1.5rem;
      }
    }
    .btn-icon-success.btn-lg.btn-course {
      background-color: #F5F1C7;
      border-color: #768327;
      padding-bottom: 10px;
    }
    .btn-icon-success.btn-lg.btn-course.hover, .btn-icon-success.btn-lg.btn-course:hover {
      background-color: #e7dcaf;
    }
    .btn-icon-warning {
      color: var(--warning-color-dark);
      border: 2px solid var(--warning-color);
      background-color: var(--warning-color);
      transition: all ease 0.3s;
      border-radius: 50%;
      height: 40px;
      width: 40px;
    }
    .btn-icon-warning:hover, .btn-icon-warning:focus, .btn-icon-warning:active, .btn-icon-warning.focus, .btn-icon-warning.active {
      border-color: var(--warning-color);
      background-color: var(--warning-color-dark);
    }
    .btn-icon-warning:not(:disabled):not(.disabled).active, .btn-icon-warning:not(:disabled):not(.disabled):active, .show > .btn-icon-warning.dropdown-toggle {
      opacity: 75%;
    }
    .btn-icon-warning.focus, .btn-icon-warning:focus {
      box-shadow: 0 0 0 0.2rem rgba(var(--warning-color)), 0.3;
    }
    .btn-icon-warning.btn-lg {
      height: 60px;
      width: 60px;
    }
    .btn-icon-warning.btn-lg i {
      font-size: 2.5rem;
    }
    @media (max-width: 1199.98px) {
      .btn-icon-warning.btn-lg {
        height: 42px;
        width: 42px;
      }
      .btn-icon-warning.btn-lg i {
        font-size: 1.5rem;
      }
    }
    .btn-icon-warning.btn-lg.btn-course {
      background-color: #F5F1C7;
      border-color: #768327;
      padding-bottom: 10px;
    }
    .btn-icon-warning.btn-lg.btn-course.hover, .btn-icon-warning.btn-lg.btn-course:hover {
      background-color: #e7dcaf;
    }
    .btn-icon-info {
      color: var(--info-color-dark);
      border: 2px solid var(--info-color);
      background-color: var(--info-color);
      transition: all ease 0.3s;
      border-radius: 50%;
      height: 40px;
      width: 40px;
    }
    .btn-icon-info:hover, .btn-icon-info:focus, .btn-icon-info:active, .btn-icon-info.focus, .btn-icon-info.active {
      border-color: var(--info-color);
      background-color: var(--info-color-dark);
    }
    .btn-icon-info:not(:disabled):not(.disabled).active, .btn-icon-info:not(:disabled):not(.disabled):active, .show > .btn-icon-info.dropdown-toggle {
      opacity: 75%;
    }
    .btn-icon-info.focus, .btn-icon-info:focus {
      box-shadow: 0 0 0 0.2rem rgba(var(--info-color)), 0.3;
    }
    .btn-icon-info.btn-lg {
      height: 60px;
      width: 60px;
    }
    .btn-icon-info.btn-lg i {
      font-size: 2.5rem;
    }
    @media (max-width: 1199.98px) {
      .btn-icon-info.btn-lg {
        height: 42px;
        width: 42px;
      }
      .btn-icon-info.btn-lg i {
        font-size: 1.5rem;
      }
    }
    .btn-icon-info.btn-lg.btn-course {
      background-color: #F5F1C7;
      border-color: #768327;
      padding-bottom: 10px;
    }
    .btn-icon-info.btn-lg.btn-course.hover, .btn-icon-info.btn-lg.btn-course:hover {
      background-color: #e7dcaf;
    }
    .btn-icon-danger {
      color: var(--danger-color-dark);
      border: 2px solid var(--danger-color);
      background-color: var(--danger-color);
      transition: all ease 0.3s;
      border-radius: 50%;
      height: 40px;
      width: 40px;
    }
    .btn-icon-danger:hover, .btn-icon-danger:focus, .btn-icon-danger:active, .btn-icon-danger.focus, .btn-icon-danger.active {
      border-color: var(--danger-color);
      background-color: var(--danger-color-dark);
    }
    .btn-icon-danger:not(:disabled):not(.disabled).active, .btn-icon-danger:not(:disabled):not(.disabled):active, .show > .btn-icon-danger.dropdown-toggle {
      opacity: 75%;
    }
    .btn-icon-danger.focus, .btn-icon-danger:focus {
      box-shadow: 0 0 0 0.2rem rgba(var(--danger-color)), 0.3;
    }
    .btn-icon-danger.btn-lg {
      height: 60px;
      width: 60px;
    }
    .btn-icon-danger.btn-lg i {
      font-size: 2.5rem;
    }
    @media (max-width: 1199.98px) {
      .btn-icon-danger.btn-lg {
        height: 42px;
        width: 42px;
      }
      .btn-icon-danger.btn-lg i {
        font-size: 1.5rem;
      }
    }
    .btn-icon-danger.btn-lg.btn-course {
      background-color: #F5F1C7;
      border-color: #768327;
      padding-bottom: 10px;
    }
    .btn-icon-danger.btn-lg.btn-course.hover, .btn-icon-danger.btn-lg.btn-course:hover {
      background-color: #e7dcaf;
    }
    .btn-icon-light {
      color: var(--light-color-dark);
      border: 2px solid var(--light-color);
      background-color: var(--light-color);
      transition: all ease 0.3s;
      border-radius: 50%;
      height: 40px;
      width: 40px;
    }
    .btn-icon-light:hover, .btn-icon-light:focus, .btn-icon-light:active, .btn-icon-light.focus, .btn-icon-light.active {
      border-color: var(--light-color);
      background-color: var(--light-color-dark);
    }
    .btn-icon-light:not(:disabled):not(.disabled).active, .btn-icon-light:not(:disabled):not(.disabled):active, .show > .btn-icon-light.dropdown-toggle {
      opacity: 75%;
    }
    .btn-icon-light.focus, .btn-icon-light:focus {
      box-shadow: 0 0 0 0.2rem rgba(var(--light-color)), 0.3;
    }
    .btn-icon-light.btn-lg {
      height: 60px;
      width: 60px;
    }
    .btn-icon-light.btn-lg i {
      font-size: 2.5rem;
    }
    @media (max-width: 1199.98px) {
      .btn-icon-light.btn-lg {
        height: 42px;
        width: 42px;
      }
      .btn-icon-light.btn-lg i {
        font-size: 1.5rem;
      }
    }
    .btn-icon-light.btn-lg.btn-course {
      background-color: #F5F1C7;
      border-color: #768327;
      padding-bottom: 10px;
    }
    .btn-icon-light.btn-lg.btn-course.hover, .btn-icon-light.btn-lg.btn-course:hover {
      background-color: #e7dcaf;
    }
    .btn-icon-dark {
      color: var(--dark-color-dark);
      border: 2px solid var(--dark-color);
      background-color: var(--dark-color);
      transition: all ease 0.3s;
      border-radius: 50%;
      height: 40px;
      width: 40px;
    }
    .btn-icon-dark:hover, .btn-icon-dark:focus, .btn-icon-dark:active, .btn-icon-dark.focus, .btn-icon-dark.active {
      border-color: var(--dark-color);
      background-color: var(--dark-color-dark);
    }
    .btn-icon-dark:not(:disabled):not(.disabled).active, .btn-icon-dark:not(:disabled):not(.disabled):active, .show > .btn-icon-dark.dropdown-toggle {
      opacity: 75%;
    }
    .btn-icon-dark.focus, .btn-icon-dark:focus {
      box-shadow: 0 0 0 0.2rem rgba(var(--dark-color)), 0.3;
    }
    .btn-icon-dark.btn-lg {
      height: 60px;
      width: 60px;
    }
    .btn-icon-dark.btn-lg i {
      font-size: 2.5rem;
    }
    @media (max-width: 1199.98px) {
      .btn-icon-dark.btn-lg {
        height: 42px;
        width: 42px;
      }
      .btn-icon-dark.btn-lg i {
        font-size: 1.5rem;
      }
    }
    .btn-icon-dark.btn-lg.btn-course {
      background-color: #F5F1C7;
      border-color: #768327;
      padding-bottom: 10px;
    }
    .btn-icon-dark.btn-lg.btn-course.hover, .btn-icon-dark.btn-lg.btn-course:hover {
      background-color: #e7dcaf;
    }
    .btn-icon-dashed-primary {
      color: var(--primary-color-dark);
      border: 2px dashed var(--primary-color);
      background-color: transparent;
      transition: all ease 0.3s;
      border-radius: 50%;
      height: 40px;
      width: 40px;
    }
    @media (max-width: 1199.98px) {
      .btn-icon-dashed-primary {
        height: 20px;
        width: 20px;
      }
      .btn-icon-dashed-primary i {
        font-size: 1.5rem;
      }
    }
    .btn-icon-dashed-primary.btn-lg {
      height: 60px;
      width: 60px;
    }
    .btn-icon-dashed-primary.btn-lg i {
      font-size: 2.5rem;
    }
    @media (max-width: 1199.98px) {
      .btn-icon-dashed-primary.btn-lg {
        height: 42px;
        width: 42px;
      }
      .btn-icon-dashed-primary.btn-lg i {
        font-size: 1.5rem;
      }
    }
    .btn-icon-dashed-primary:hover, .btn-icon-dashed-primary:focus, .btn-icon-dashed-primary:active, .btn-icon-dashed-primary.focus, .btn-icon-dashed-primary.active {
      border-color: var(--primary-color);
      background-color: transparent;
      transform: scale(1.2);
    }
    .btn-icon-dashed-primary:not(:disabled):not(.disabled).active, .btn-icon-dashed-primary:not(:disabled):not(.disabled):active, .show > .btn-icon-dashed-primary.dropdown-toggle {
      opacity: 75%;
    }
    .btn-icon-dashed-primary.focus, .btn-icon-dashed-primary:focus {
      background-color: rgba(var(--primary-color));
      box-shadow: 0 0 0 0.2rem rgba(var(--primary-color));
    }
    .btn-icon-dashed-secondary {
      color: var(--secondary-color-dark);
      border: 2px dashed var(--secondary-color);
      background-color: transparent;
      transition: all ease 0.3s;
      border-radius: 50%;
      height: 40px;
      width: 40px;
    }
    @media (max-width: 1199.98px) {
      .btn-icon-dashed-secondary {
        height: 20px;
        width: 20px;
      }
      .btn-icon-dashed-secondary i {
        font-size: 1.5rem;
      }
    }
    .btn-icon-dashed-secondary.btn-lg {
      height: 60px;
      width: 60px;
    }
    .btn-icon-dashed-secondary.btn-lg i {
      font-size: 2.5rem;
    }
    @media (max-width: 1199.98px) {
      .btn-icon-dashed-secondary.btn-lg {
        height: 42px;
        width: 42px;
      }
      .btn-icon-dashed-secondary.btn-lg i {
        font-size: 1.5rem;
      }
    }
    .btn-icon-dashed-secondary:hover, .btn-icon-dashed-secondary:focus, .btn-icon-dashed-secondary:active, .btn-icon-dashed-secondary.focus, .btn-icon-dashed-secondary.active {
      border-color: var(--secondary-color);
      background-color: transparent;
      transform: scale(1.2);
    }
    .btn-icon-dashed-secondary:not(:disabled):not(.disabled).active, .btn-icon-dashed-secondary:not(:disabled):not(.disabled):active, .show > .btn-icon-dashed-secondary.dropdown-toggle {
      opacity: 75%;
    }
    .btn-icon-dashed-secondary.focus, .btn-icon-dashed-secondary:focus {
      background-color: rgba(var(--secondary-color));
      box-shadow: 0 0 0 0.2rem rgba(var(--secondary-color));
    }
    .btn-icon-dashed-success {
      color: var(--success-color-dark);
      border: 2px dashed var(--success-color);
      background-color: transparent;
      transition: all ease 0.3s;
      border-radius: 50%;
      height: 40px;
      width: 40px;
    }
    @media (max-width: 1199.98px) {
      .btn-icon-dashed-success {
        height: 20px;
        width: 20px;
      }
      .btn-icon-dashed-success i {
        font-size: 1.5rem;
      }
    }
    .btn-icon-dashed-success.btn-lg {
      height: 60px;
      width: 60px;
    }
    .btn-icon-dashed-success.btn-lg i {
      font-size: 2.5rem;
    }
    @media (max-width: 1199.98px) {
      .btn-icon-dashed-success.btn-lg {
        height: 42px;
        width: 42px;
      }
      .btn-icon-dashed-success.btn-lg i {
        font-size: 1.5rem;
      }
    }
    .btn-icon-dashed-success:hover, .btn-icon-dashed-success:focus, .btn-icon-dashed-success:active, .btn-icon-dashed-success.focus, .btn-icon-dashed-success.active {
      border-color: var(--success-color);
      background-color: transparent;
      transform: scale(1.2);
    }
    .btn-icon-dashed-success:not(:disabled):not(.disabled).active, .btn-icon-dashed-success:not(:disabled):not(.disabled):active, .show > .btn-icon-dashed-success.dropdown-toggle {
      opacity: 75%;
    }
    .btn-icon-dashed-success.focus, .btn-icon-dashed-success:focus {
      background-color: rgba(var(--success-color));
      box-shadow: 0 0 0 0.2rem rgba(var(--success-color));
    }
    .btn-icon-dashed-warning {
      color: var(--warning-color-dark);
      border: 2px dashed var(--warning-color);
      background-color: transparent;
      transition: all ease 0.3s;
      border-radius: 50%;
      height: 40px;
      width: 40px;
    }
    @media (max-width: 1199.98px) {
      .btn-icon-dashed-warning {
        height: 20px;
        width: 20px;
      }
      .btn-icon-dashed-warning i {
        font-size: 1.5rem;
      }
    }
    .btn-icon-dashed-warning.btn-lg {
      height: 60px;
      width: 60px;
    }
    .btn-icon-dashed-warning.btn-lg i {
      font-size: 2.5rem;
    }
    @media (max-width: 1199.98px) {
      .btn-icon-dashed-warning.btn-lg {
        height: 42px;
        width: 42px;
      }
      .btn-icon-dashed-warning.btn-lg i {
        font-size: 1.5rem;
      }
    }
    .btn-icon-dashed-warning:hover, .btn-icon-dashed-warning:focus, .btn-icon-dashed-warning:active, .btn-icon-dashed-warning.focus, .btn-icon-dashed-warning.active {
      border-color: var(--warning-color);
      background-color: transparent;
      transform: scale(1.2);
    }
    .btn-icon-dashed-warning:not(:disabled):not(.disabled).active, .btn-icon-dashed-warning:not(:disabled):not(.disabled):active, .show > .btn-icon-dashed-warning.dropdown-toggle {
      opacity: 75%;
    }
    .btn-icon-dashed-warning.focus, .btn-icon-dashed-warning:focus {
      background-color: rgba(var(--warning-color));
      box-shadow: 0 0 0 0.2rem rgba(var(--warning-color));
    }
    .btn-icon-dashed-info {
      color: var(--info-color-dark);
      border: 2px dashed var(--info-color);
      background-color: transparent;
      transition: all ease 0.3s;
      border-radius: 50%;
      height: 40px;
      width: 40px;
    }
    @media (max-width: 1199.98px) {
      .btn-icon-dashed-info {
        height: 20px;
        width: 20px;
      }
      .btn-icon-dashed-info i {
        font-size: 1.5rem;
      }
    }
    .btn-icon-dashed-info.btn-lg {
      height: 60px;
      width: 60px;
    }
    .btn-icon-dashed-info.btn-lg i {
      font-size: 2.5rem;
    }
    @media (max-width: 1199.98px) {
      .btn-icon-dashed-info.btn-lg {
        height: 42px;
        width: 42px;
      }
      .btn-icon-dashed-info.btn-lg i {
        font-size: 1.5rem;
      }
    }
    .btn-icon-dashed-info:hover, .btn-icon-dashed-info:focus, .btn-icon-dashed-info:active, .btn-icon-dashed-info.focus, .btn-icon-dashed-info.active {
      border-color: var(--info-color);
      background-color: transparent;
      transform: scale(1.2);
    }
    .btn-icon-dashed-info:not(:disabled):not(.disabled).active, .btn-icon-dashed-info:not(:disabled):not(.disabled):active, .show > .btn-icon-dashed-info.dropdown-toggle {
      opacity: 75%;
    }
    .btn-icon-dashed-info.focus, .btn-icon-dashed-info:focus {
      background-color: rgba(var(--info-color));
      box-shadow: 0 0 0 0.2rem rgba(var(--info-color));
    }
    .btn-icon-dashed-danger {
      color: var(--danger-color-dark);
      border: 2px dashed var(--danger-color);
      background-color: transparent;
      transition: all ease 0.3s;
      border-radius: 50%;
      height: 40px;
      width: 40px;
    }
    @media (max-width: 1199.98px) {
      .btn-icon-dashed-danger {
        height: 20px;
        width: 20px;
      }
      .btn-icon-dashed-danger i {
        font-size: 1.5rem;
      }
    }
    .btn-icon-dashed-danger.btn-lg {
      height: 60px;
      width: 60px;
    }
    .btn-icon-dashed-danger.btn-lg i {
      font-size: 2.5rem;
    }
    @media (max-width: 1199.98px) {
      .btn-icon-dashed-danger.btn-lg {
        height: 42px;
        width: 42px;
      }
      .btn-icon-dashed-danger.btn-lg i {
        font-size: 1.5rem;
      }
    }
    .btn-icon-dashed-danger:hover, .btn-icon-dashed-danger:focus, .btn-icon-dashed-danger:active, .btn-icon-dashed-danger.focus, .btn-icon-dashed-danger.active {
      border-color: var(--danger-color);
      background-color: transparent;
      transform: scale(1.2);
    }
    .btn-icon-dashed-danger:not(:disabled):not(.disabled).active, .btn-icon-dashed-danger:not(:disabled):not(.disabled):active, .show > .btn-icon-dashed-danger.dropdown-toggle {
      opacity: 75%;
    }
    .btn-icon-dashed-danger.focus, .btn-icon-dashed-danger:focus {
      background-color: rgba(var(--danger-color));
      box-shadow: 0 0 0 0.2rem rgba(var(--danger-color));
    }
    .btn-icon-dashed-light {
      color: var(--light-color-dark);
      border: 2px dashed var(--light-text-color);
      background-color: transparent;
      transition: all ease 0.3s;
      border-radius: 50%;
      height: 40px;
      width: 40px;
    }
    @media (max-width: 1199.98px) {
      .btn-icon-dashed-light {
        height: 20px;
        width: 20px;
      }
      .btn-icon-dashed-light i {
        font-size: 1.5rem;
      }
    }
    .btn-icon-dashed-light.btn-lg {
      height: 60px;
      width: 60px;
    }
    .btn-icon-dashed-light.btn-lg i {
      font-size: 2.5rem;
    }
    @media (max-width: 1199.98px) {
      .btn-icon-dashed-light.btn-lg {
        height: 42px;
        width: 42px;
      }
      .btn-icon-dashed-light.btn-lg i {
        font-size: 1.5rem;
      }
    }
    .btn-icon-dashed-light:hover, .btn-icon-dashed-light:focus, .btn-icon-dashed-light:active, .btn-icon-dashed-light.focus, .btn-icon-dashed-light.active {
      border-color: var(--light-text-color);
      background-color: transparent;
      transform: scale(1.2);
    }
    .btn-icon-dashed-light:not(:disabled):not(.disabled).active, .btn-icon-dashed-light:not(:disabled):not(.disabled):active, .show > .btn-icon-dashed-light.dropdown-toggle {
      opacity: 75%;
    }
    .btn-icon-dashed-light.focus, .btn-icon-dashed-light:focus {
      background-color: rgba(var(--light-text-color));
      box-shadow: 0 0 0 0.2rem rgba(var(--light-text-color));
    }
    .btn-icon-dashed-dark {
      color: var(--dark-color-dark);
      border: 2px dashed var(--dark-color);
      background-color: transparent;
      transition: all ease 0.3s;
      border-radius: 50%;
      height: 40px;
      width: 40px;
    }
    @media (max-width: 1199.98px) {
      .btn-icon-dashed-dark {
        height: 20px;
        width: 20px;
      }
      .btn-icon-dashed-dark i {
        font-size: 1.5rem;
      }
    }
    .btn-icon-dashed-dark.btn-lg {
      height: 60px;
      width: 60px;
    }
    .btn-icon-dashed-dark.btn-lg i {
      font-size: 2.5rem;
    }
    @media (max-width: 1199.98px) {
      .btn-icon-dashed-dark.btn-lg {
        height: 42px;
        width: 42px;
      }
      .btn-icon-dashed-dark.btn-lg i {
        font-size: 1.5rem;
      }
    }
    .btn-icon-dashed-dark:hover, .btn-icon-dashed-dark:focus, .btn-icon-dashed-dark:active, .btn-icon-dashed-dark.focus, .btn-icon-dashed-dark.active {
      border-color: var(--dark-color);
      background-color: transparent;
      transform: scale(1.2);
    }
    .btn-icon-dashed-dark:not(:disabled):not(.disabled).active, .btn-icon-dashed-dark:not(:disabled):not(.disabled):active, .show > .btn-icon-dashed-dark.dropdown-toggle {
      opacity: 75%;
    }
    .btn-icon-dashed-dark.focus, .btn-icon-dashed-dark:focus {
      background-color: rgba(var(--dark-color));
      box-shadow: 0 0 0 0.2rem rgba(var(--dark-color));
    }
    .hover-link {
      position: relative;
      cursor: pointer;
    }
    .hover-link:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      border-radius: 4px;
      background-color: var(--visual-link-color);
      bottom: 0;
      left: 0;
      transform-origin: right;
      transform: scaleX(0);
      transition: transform 0.3s ease-in-out;
    }
    .hover-link:hover::before {
      transform-origin: left;
      transform: scaleX(1);
    }
    .label-btn {
      font-family: "Cubano", sans-serif;
      font-weight: 400;
      font-size: 1rem;
      letter-spacing: inherit;
    }
    .close-modal-button {
      cursor: pointer;
      background: var(--notification-hub-close-button-color);
      display: flex;
      justify-content: center;
      align-content: center;
      font-size: 1.5rem;
      line-height: 0.8rem;
      height: 2.5rem;
      width: 2.5rem;
      color: var(--notification-hub-close-button-icon-color);
      border-radius: 50%;
      margin: -12px -20px 0px 0px;
      transition: 0.3s;
      padding: 0.8rem;
      font-family: "tgn-soft-round-comp", sans-serif;
      box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.45);
    }
    .close-modal-button:hover {
      color: var(--notification-hub-close-button-icon-color);
    }
    .restart-button {
      border: 0;
      box-shadow: none;
      background-color: transparent;
      gap: 3px;
      margin-left: -1rem;
      margin-top: -1rem;
      transition: all 200ms;
    }
    .restart-button i {
      rotate: 0;
      scale: 1;
      transition: all 200ms;
    }
    .restart-button:hover, .restart-button:active, .restart-button:focus, .restart-button:not(:disabled):not(.disabled):active, .restart-button:not(:disabled):not(.disabled):active:focus {
      box-shadow: none;
    }
    .restart-button:hover i, .restart-button:active i, .restart-button:focus i, .restart-button:not(:disabled):not(.disabled):active i, .restart-button:not(:disabled):not(.disabled):active:focus i {
      scale: 1.1;
      rotate: -10deg;
    }
    .step-back-button {
      border: 0;
      box-shadow: none;
      background-color: transparent;
      gap: 3px;
      margin-left: -1rem;
      margin-top: -1rem;
      transition: all 200ms;
    }
    .step-back-button i {
      scale: 1;
      transition: all 200ms;
    }
    .step-back-button:hover, .step-back-button:active, .step-back-button:focus, .step-back-button:not(:disabled):not(.disabled):active, .step-back-button:not(:disabled):not(.disabled):active:focus {
      box-shadow: none;
    }
    .step-back-button:hover i, .step-back-button:active i, .step-back-button:focus i, .step-back-button:not(:disabled):not(.disabled):active i, .step-back-button:not(:disabled):not(.disabled):active:focus i {
      scale: 1.1;
    }
    .slide-nav {
      display: flex;
      justify-content: end;
      margin: 0.5rem;
    }
    .slide-nav-spacer {
      flex-grow: 1;
    }
    .btn-col {
      position: relative;
      display: flex;
      flex-direction: column-reverse;
      justify-content: center;
      align-content: center;
    }
    .btn-col .btn {
      margin-top: 1rem;
    }
    .btn-row .equal-width .btn {
      flex: 1;
    }
    @media (min-width: 576px) {
      .btn-row {
        display: flex;
        justify-content: center;
        align-content: center;
      }
    }
    .btn-row .btn, .btn-row button {
      margin: 8px 20px;
    }
    @media (min-width: 576px) {
      .btn-row .btn, .btn-row button {
        margin: 0px 8px 0px 8px;
      }
    }
    @media (min-width: 576px) {
      .btn-row .btn:first-child, .btn-row button:first-child {
        margin-left: 0px;
      }
    }
    @media (min-width: 576px) {
      .btn-row .btn:last-child, .btn-row button:last-child {
        margin-right: 0px;
      }
    }
    .icon-action-bar-wrapper {
      position: relative;
    }
    .icon-action-bar-wrapper .icon-action-bar {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      display: flex;
      gap: 0.4rem;
      z-index: 100;
      --icon-color: #666;
      --icon-hover-color: #000;
    }
    .icon-action-bar-wrapper .icon-action-bar.icons-light {
      --icon-color: #ccc;
      --icon-hover-color: #fff;
    }
    .icon-action-bar-wrapper .icon-action-bar.small .action-icon {
      font-size: 1rem;
    }
    .icon-action-bar-wrapper .icon-action-bar.standard .action-icon {
      font-size: 1.5rem;
    }
    .icon-action-bar-wrapper .icon-action-bar.large .action-icon {
      font-size: 2rem;
    }
    .icon-action-bar-wrapper .icon-action-bar.extra-large .action-icon {
      font-size: 3rem;
    }
    .icon-action-bar-wrapper .icon-action-bar .action-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--icon-color);
      line-height: 1;
      font-family: "Line Awesome Free";
      font-weight: 900;
    }
    .icon-action-bar-wrapper .icon-action-bar .action-icon:hover {
      color: var(--icon-hover-color);
    }
    .icon-action-bar-wrapper .icon-action-bar .action-icon.edit::before {
      content: "\f303";
    }
    .icon-action-bar-wrapper .icon-action-bar .action-icon.delete::before {
      content: "\f2ed";
    }
    .icon-action-bar-wrapper .icon-action-bar .action-icon.cancel::before {
      content: "\f00d";
    }
    .icon-action-bar-wrapper .icon-action-bar .action-icon.view-details::before {
      content: "\f06e";
    }
    .card.illustration-card, .floating-menu-container .illustration-card.floating-menu {
      width: 300px;
      margin-top: 10px;
      display: block;
      background-color: var(--light-background-color);
      border: solid 1px var(--dark-color-light);
      margin: 2rem 0px;
    }
    .card.illustration-card img, .floating-menu-container .illustration-card.floating-menu img {
      padding: 1rem;
      width: inherit;
    }
    .card.illustration-card .card-body, .floating-menu-container .illustration-card.floating-menu .card-body {
      background-color: var(--light-background-color-darker);
      border-bottom-right-radius: 0.8rem;
      border-bottom-left-radius: 0.8rem;
    }
    .alert-info.instructions {
      color: var(--warning-color);
      background-color: var(--light-background-color);
      border-color: var(--light-background-color);
      text-align: center;
      width: 50%;
      margin: 0 auto 2em;
    }
    .alert {
      background-position: 50% 50%;
      background-size: contain;
      padding: 1rem 3rem;
      background-repeat: no-repeat;
      background-color: transparent;
      border-color: transparent;
      font-size: xx-large;
      color: var(--white-color);
      font-family: fenway-park-jf, sans-serif;
      font-weight: 400;
    }
    .alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6, .alert p, .alert a {
      font-size: xx-large;
      color: var(--white-color);
      font-family: fenway-park-jf, sans-serif;
      font-weight: 400;
    }
    .navbar .alert {
      align-items: center;
      padding: 1rem 1.6rem 1.2rem 1.6rem;
      margin-top: -0.3rem;
      margin-left: 1vw;
    }
    .navbar .alert h1.navbar-brand, .navbar .alert h2.navbar-brand, .navbar .alert h3.navbar-brand, .navbar .alert h4.navbar-brand, .navbar .alert h5.navbar-brand, .navbar .alert h6.navbar-brand, .navbar .alert p.navbar-brand, .navbar .alert a.navbar-brand {
      color: var(--white-color);
    }
    .alert-primary {
      background-image: var(--alert-primary-image-path);
      color: var(--alert-primary-text-color);
      background-size: 100% 100%;
    }
    .alert-primary h1, .alert-primary h2, .alert-primary h3, .alert-primary h4, .alert-primary h5, .alert-primary h6, .alert-primary p, .alert-primary a {
      color: var(--alert-primary-text-color);
    }
    .alert-success {
      background-image: var(--alert-success-image-path);
      background-size: 100% 100%;
    }
    .alert-info {
      background-image: var(--alert-info-image-path);
      color: var(--alert-info-text-color);
      background-size: 100% 100%;
    }
    .alert-info h1, .alert-info h2, .alert-info h3, .alert-info h4, .alert-info h5, .alert-info h6, .alert-info p, .alert-info a {
      color: var(--alert-info-text-color);
    }
    .alert-warning {
      background-image: var(--alert-warning-image-path);
      background-size: 100% 100%;
    }
    .alert-danger {
      background-image: var(--alert-primary-image-path);
      background-size: 100% 100%;
    }
    .alert-secondary {
      background-image: var(--alert-secondary-image-path);
      background-size: 100% 100%;
    }
    .alert-light {
      background-image: var(--alert-light-image-path);
      color: var(--alert-light-text-color);
      background-size: 100% 100%;
    }
    .alert-light h1, .alert-light h2, .alert-light h3, .alert-light h4, .alert-light h5, .alert-light h6, .alert-light p, .alert-light a {
      font-size: xx-large;
      color: var(--alert-light-text-color);
    }
    .badge {
      letter-spacing: 0.5px;
    }
    .badge.badge-primary {
      color: var(--badge-primary-text-color);
      background-color: var(--badge-primary-background-color);
    }
    .badge.badge-secondary {
      color: var(--badge-secondary-text-color);
      background-color: var(--badge-secondary-background-color);
    }
    .badge.badge-success {
      color: var(--badge-success-text-color);
      background-color: var(--badge-success-background-color);
    }
    .badge.badge-warning {
      color: var(--badge-warning-text-color);
      background-color: var(--badge-warning-background-color);
    }
    .badge.badge-danger {
      color: var(--badge-danger-text-color);
      background-color: var(--badge-danger-background-color);
    }
    .badge.badge-light {
      color: var(--badge-light-background-color);
      background-color: var(--badge-light-background-color);
      border: 1px solid var(--badge-light-text-color);
    }
    .badge.badge-info {
      color: var(--badge-info-text-color);
      background-color: var(--badge-info-background-color);
    }
    .badge.badge-dark {
      color: var(--badge-dark-text-color);
      background-color: var(--badge-dark-background-color);
    }
    .profile-avatar {
      width: 40px;
      height: 40px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px;
    }
    @media screen and (max-height: 768px) {
      .profile-avatar {
        height: 30px;
        width: 30px;
      }
    }
    .fade-in {
      visibility: visible;
      opacity: 1;
      transition: opacity 200ms linear;
    }
    .fade-out {
      visibility: hidden;
      opacity: 0;
      height: 0;
      transition: visibility 0s 0ms, opacity 0ms linear;
      display: none;
    }
    .selected-clan {
      border-radius: 100%;
      box-shadow: 3px 3px 0px 3px var(--dark-color);
      background-color: var(--warning-color);
    }
    .avatar {
      width: 100px;
      height: 100px;
      -webkit-border-radius: 50px;
      -moz-border-radius: 50px;
      border-radius: 50px;
    }
    .selected-avatar {
      border-radius: 100%;
      box-shadow: 3px 3px 0px 3px var(--selected-avatar-color);
      background-color: var(--selected-avatar-color);
      transform: scale(1.1);
    }
    .clan-badge img {
      width: 18vw;
      max-height: 19vh;
      margin: 4px;
    }
    @media (max-width: 1499.98px) {
      .clan-badge img {
        width: 14vw;
        max-height: 26vh;
      }
    }
    .card-avatar {
      background-color: var(--avatar-card-background-color);
      padding: 5px;
      border: 4px dashed var(--avatar-card-border-color);
    }
    .dialogue-avatar {
      background-color: var(--avatar-card-background-color);
      padding: 5px;
      border: 4px dashed var(--avatar-card-border-color);
      height: 10rem;
      width: 10rem;
      margin-top: -3vh;
      margin-left: -3vw;
    }
    @media (max-width: 1199.98px) {
      .dialogue-avatar {
        height: 8rem;
        width: 8rem;
      }
    }
    @media screen and (max-height: 600px) {
      .dialogue-avatar {
        height: 8rem;
        width: 8rem;
      }
    }
    .module_map {
      z-index: 1;
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      position: relative;
      top: auto;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      max-height: none;
      max-width: 80vw;
      margin: auto;
      min-height: 90vh;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      flex-direction: row;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-align-content: center;
      -ms-flex-line-pack: center;
      align-content: center;
      background-image: url(/images/levels/map/map-module-theme-1.svg);
      background-position: 50% 50%;
      background-size: contain;
      background-repeat: no-repeat;
      background-attachment: scroll;
      background-clip: border-box;
      -o-object-fit: fill;
      object-fit: fill;
      transform: rotate(2deg);
    }
    .module_map.theme_2 {
      background-image: url(/images/levels/map/map-module-theme-2.svg);
    }
    .module_map.theme_3 {
      background-image: url(/images/levels/map/map-module-theme-3.svg);
    }
    .module_map.theme_4 {
      background-image: url(/images/levels/map/map-module-theme-4.svg);
    }
    .modules-select {
      max-width: 1000px;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      align-content: center;
      height: 100vh;
    }
    @media screen and (max-height: 768px) {
      .modules-select {
        max-width: 800px;
      }
    }
    .modules-select .nav-link {
      flex: 0 0 auto;
      padding: 0px;
      position: relative;
      transition: all 0.5s;
    }
    .modules-select .nav-link:hover .module-info {
      z-index: 3;
    }
    .modules-select .nav-link .module-completed, .modules-select .nav-link .module-locked, .modules-select .nav-link .module-unlocked, .modules-select .nav-link .module-disabled, .modules-select .nav-link .module-InProgress {
      display: -ms-flexbox;
      background-repeat: no-repeat;
      background-position: 60% 50%;
      height: 180px;
      width: 180px;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      align-content: flex-end;
      margin-bottom: 50px;
      transition: 0.3s;
      z-index: 3;
    }
    .modules-select .nav-link .module-completed + .module-info, .modules-select .nav-link .module-locked + .module-info, .modules-select .nav-link .module-unlocked + .module-info, .modules-select .nav-link .module-disabled + .module-info, .modules-select .nav-link .module-InProgress + .module-info {
      z-index: 3;
      visibility: hidden;
      opacity: 0.4;
      background: var(--module-popover-background-color);
      border-radius: 0.4em;
      box-shadow: 5px 4px 0 1px var(--module-popover-shadow-color);
      position: absolute;
      top: -5px;
      left: 9.275vw;
      transform: translateY(9px);
      transition: all 0.3s ease-in-out;
      height: auto;
      min-width: 25vw;
      width: 0px;
    }
    .modules-select .nav-link .module-completed + .module-info:after, .modules-select .nav-link .module-locked + .module-info:after, .modules-select .nav-link .module-unlocked + .module-info:after, .modules-select .nav-link .module-disabled + .module-info:after, .modules-select .nav-link .module-InProgress + .module-info:after {
      content: " ";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 12px 15px 0 12.5px;
      border-color: var(--module-popover-background-color) transparent transparent transparent;
      position: absolute;
      top: 40%;
      left: -19px;
      transform: rotate(90deg);
    }
    .modules-select .nav-link .module-completed + .module-info .module-info-inner, .modules-select .nav-link .module-locked + .module-info .module-info-inner, .modules-select .nav-link .module-unlocked + .module-info .module-info-inner, .modules-select .nav-link .module-disabled + .module-info .module-info-inner, .modules-select .nav-link .module-InProgress + .module-info .module-info-inner {
      padding: 3vh 3vh;
      font-size: 80%;
    }
    .modules-select .nav-link .module-completed + .module-info .module-info-inner h2, .modules-select .nav-link .module-locked + .module-info .module-info-inner h2, .modules-select .nav-link .module-unlocked + .module-info .module-info-inner h2, .modules-select .nav-link .module-disabled + .module-info .module-info-inner h2, .modules-select .nav-link .module-InProgress + .module-info .module-info-inner h2 {
      color: var(--module-popover-heading-color);
    }
    .modules-select .nav-link .module-completed + .module-info .module-info-inner p, .modules-select .nav-link .module-locked + .module-info .module-info-inner p, .modules-select .nav-link .module-unlocked + .module-info .module-info-inner p, .modules-select .nav-link .module-disabled + .module-info .module-info-inner p, .modules-select .nav-link .module-InProgress + .module-info .module-info-inner p {
      color: var(--black-text-color);
    }
    .modules-select .nav-link .module-completed:hover + .module-info, .modules-select .nav-link .module-locked:hover + .module-info, .modules-select .nav-link .module-unlocked:hover + .module-info, .modules-select .nav-link .module-disabled:hover + .module-info, .modules-select .nav-link .module-InProgress:hover + .module-info {
      visibility: visible;
      transform: translateY(-10px);
      opacity: 1;
      transition: 0.3s linear;
      animation: odsoky 1s ease-in-out infinite alternate;
    }
    .modules-select .nav-link .module-completed.left:hover, .modules-select .nav-link .module-completed.top:hover, .modules-select .nav-link .module-completed.bottom:hover, .modules-select .nav-link .module-completed.right:hover, .modules-select .nav-link .module-locked.left:hover, .modules-select .nav-link .module-locked.top:hover, .modules-select .nav-link .module-locked.bottom:hover, .modules-select .nav-link .module-locked.right:hover, .modules-select .nav-link .module-unlocked.left:hover, .modules-select .nav-link .module-unlocked.top:hover, .modules-select .nav-link .module-unlocked.bottom:hover, .modules-select .nav-link .module-unlocked.right:hover, .modules-select .nav-link .module-disabled.left:hover, .modules-select .nav-link .module-disabled.top:hover, .modules-select .nav-link .module-disabled.bottom:hover, .modules-select .nav-link .module-disabled.right:hover, .modules-select .nav-link .module-InProgress.left:hover, .modules-select .nav-link .module-InProgress.top:hover, .modules-select .nav-link .module-InProgress.bottom:hover, .modules-select .nav-link .module-InProgress.right:hover {
      transform: translateX(-6px);
    }
    @media screen and (max-height: 768px) {
      .modules-select .nav-link .module-completed, .modules-select .nav-link .module-locked, .modules-select .nav-link .module-unlocked, .modules-select .nav-link .module-disabled, .modules-select .nav-link .module-InProgress {
        height: 150px;
        width: 150px;
        margin-bottom: 30px;
      }
    }
    .modules-select .nav-link .module-completed:after, .modules-select .nav-link .module-locked:after, .modules-select .nav-link .module-unlocked:after, .modules-select .nav-link .module-disabled:after, .modules-select .nav-link .module-InProgress:after {
      width: 0%;
    }
    .modules-select .nav-link .number {
      z-index: 1;
      text-align: center;
      margin-bottom: -26px;
    }
    .modules-select .nav-link .number p {
      margin: 0px;
      line-height: 55px;
      font-family: fenway-park-jf, sans-serif;
      color: var(--white-color);
      font-weight: 200;
      font-size: 34px;
      font-style: normal;
    }
    .modules-select .nav-link .number:after {
      background-image: url(/images/levels/modules/module-sequence-ribbon-orange.svg);
      content: " ";
      height: 55px;
      width: 55px;
      position: absolute;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 50%;
      margin-left: -28px;
      margin-top: -64px;
      z-index: -1;
    }
    .modules-select a {
      text-decoration: none;
    }
    .modules-select .module-unlocked {
      background-image: url(/images/levels/map/map-module-unlocked.svg);
    }
    .modules-select .module-completed {
      background-image: url(/images/levels/map/map-module-complete.svg);
    }
    .modules-select .module-InProgress {
      background-image: url(/images/levels/map/map-module-progressing.svg);
    }
    .modules-select .module-disabled {
      background-image: url(/images/levels/map/map-module-disabled.svg);
      opacity: 0.7;
    }
    .modules-select .module-locked {
      background-image: url(/images/levels/map/map-module-locked.svg);
    }
    .modules-select .module-completed:hover, .modules-select .module-unlocked:hover, .modules-select .module-InProgress:hover {
      transform: scale(1.2);
    }
    .modules-select .module-locked, .modules-select .module-disabled {
      cursor: default;
    }
    .modules-select .module-locked .number, .modules-select .module-disabled .number {
      opacity: 60%;
    }
    .card.module-content-layout, .floating-menu-container .module-content-layout.floating-menu {
      width: 75%;
    }
    .full-width-app .card.game-layout, .full-width-app .floating-menu-container .game-layout.floating-menu, .floating-menu-container .full-width-app .game-layout.floating-menu {
      width: fit-content;
      background-color: rgba(255, 255, 255, 0);
    }
    .module-content-layout p {
      font-size: 150%;
    }
    .full-width-app table.e-rte-table, .cms-preview table.e-rte-table {
      max-width: 50%;
      margin: 1em auto;
      border-radius: 0.8rem;
      background-color: var(--light-background-color-darker);
      box-shadow: none;
    }
    .full-width-app table.e-rte-table tr, .cms-preview table.e-rte-table tr {
      border-radius: 0.8rem;
    }
    .full-width-app table.e-rte-table td, .cms-preview table.e-rte-table td {
      border: 0px;
      padding: 5px 12px 12px 20px;
      line-height: 2rem;
    }
    .full-width-app table.e-rte-table p, .cms-preview table.e-rte-table p {
      margin: 0;
      padding: 4px 10px;
      font-weight: 500;
    }
    .lesson-select, .tools-select {
      max-width: 600px;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      align-content: center;
    }
    @media (max-width: 1499.98px) {
      .lesson-select, .tools-select {
        margin-top: 5em;
      }
    }
    @media screen and (max-height: 768px) {
      .lesson-select, .tools-select {
        max-width: 500px;
        margin-top: 4vh;
      }
    }
    .lesson-select a, .tools-select a {
      text-decoration: none;
    }
    .lesson-select .nav-link, .tools-select .nav-link {
      flex: 0 0 auto;
      padding: 14px;
      position: relative;
      transition: all 0.5s;
    }
    .lesson-select .nav-link:hover, .tools-select .nav-link:hover {
      z-index: 3;
    }
    .lesson-neutral, .lesson-inprogress, .lesson-unlocked, .lesson-locked, .lesson-completed, .lesson-optional {
      background-color: var(--light-background-color);
      display: -ms-flexbox;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      height: 90px;
      width: 90px;
      display: flex;
      justify-content: center;
      align-items: center;
      align-content: flex-end;
      z-index: 0;
      margin-bottom: 50px;
      transition: 0.3s;
      border-radius: 50%;
      -webkit-box-shadow: 0 2px 10px var(--lesson-shadow-color);
      box-shadow: 0 2px 10px var(--lesson-shadow-color);
    }
    @media screen and (max-height: 768px) {
      .lesson-neutral, .lesson-inprogress, .lesson-unlocked, .lesson-locked, .lesson-completed, .lesson-optional {
        margin-bottom: 0px;
        height: 70px;
        width: 70px;
      }
    }
    .lesson-neutral:hover, .lesson-inprogress:hover, .lesson-unlocked:hover, .lesson-locked:hover, .lesson-completed:hover, .lesson-optional:hover {
      transform: scale(1.2);
    }
    .lesson-neutral:after, .lesson-inprogress:after, .lesson-unlocked:after, .lesson-locked:after, .lesson-completed:after, .lesson-optional:after {
      width: 0%;
    }
    .lesson-neutral + .module-info, .lesson-inprogress + .module-info, .lesson-unlocked + .module-info, .lesson-locked + .module-info, .lesson-completed + .module-info, .lesson-optional + .module-info {
      z-index: 0;
      visibility: hidden;
      opacity: 0.4;
      background: var(--lesson-popover-background-color);
      border-radius: 0.4em;
      box-shadow: 5px 4px 0 1px var(--lesson-popover-shadow-color);
      position: absolute;
      top: 75%;
      left: -8.5vw;
      transform: translateY(9px);
      transition: all 0.3s ease-in-out;
      height: auto;
      min-width: 25vw;
      width: 0px;
    }
    @media (min-width: 1200px) {
      .lesson-neutral + .module-info, .lesson-inprogress + .module-info, .lesson-unlocked + .module-info, .lesson-locked + .module-info, .lesson-completed + .module-info, .lesson-optional + .module-info {
        left: -9.5vw;
      }
    }
    .lesson-neutral + .module-info:after, .lesson-inprogress + .module-info:after, .lesson-unlocked + .module-info:after, .lesson-locked + .module-info:after, .lesson-completed + .module-info:after, .lesson-optional + .module-info:after {
      content: " ";
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 12px 15px 0 12.5px;
      border-color: var(--lesson-popover-background-color) transparent transparent transparent;
      position: absolute;
      top: -4%;
      left: 47%;
      transform: rotate(180deg);
    }
    .lesson-neutral + .module-info .module-info-inner, .lesson-inprogress + .module-info .module-info-inner, .lesson-unlocked + .module-info .module-info-inner, .lesson-locked + .module-info .module-info-inner, .lesson-completed + .module-info .module-info-inner, .lesson-optional + .module-info .module-info-inner {
      padding: 3vh 3vh;
    }
    .lesson-neutral + .module-info .module-info-inner h2, .lesson-inprogress + .module-info .module-info-inner h2, .lesson-unlocked + .module-info .module-info-inner h2, .lesson-locked + .module-info .module-info-inner h2, .lesson-completed + .module-info .module-info-inner h2, .lesson-optional + .module-info .module-info-inner h2 {
      color: var(--black-text-color);
    }
    .lesson-neutral + .module-info .module-info-inner p, .lesson-inprogress + .module-info .module-info-inner p, .lesson-unlocked + .module-info .module-info-inner p, .lesson-locked + .module-info .module-info-inner p, .lesson-completed + .module-info .module-info-inner p, .lesson-optional + .module-info .module-info-inner p {
      color: var(--black-text-color);
    }
    .lesson-neutral:hover, .lesson-inprogress:hover, .lesson-unlocked:hover, .lesson-locked:hover, .lesson-completed:hover, .lesson-optional:hover {
      z-index: 3;
    }
    .lesson-neutral:hover + .module-info, .lesson-inprogress:hover + .module-info, .lesson-unlocked:hover + .module-info, .lesson-locked:hover + .module-info, .lesson-completed:hover + .module-info, .lesson-optional:hover + .module-info {
      visibility: visible;
      transform: translateY(-10px);
      opacity: 1;
      transition: 0.3s linear;
      animation: floating 1s ease-in-out infinite alternate;
    }
    .lesson-neutral.left:hover, .lesson-neutral.top:hover, .lesson-neutral.bottom:hover, .lesson-neutral.right:hover, .lesson-inprogress.left:hover, .lesson-inprogress.top:hover, .lesson-inprogress.bottom:hover, .lesson-inprogress.right:hover, .lesson-unlocked.left:hover, .lesson-unlocked.top:hover, .lesson-unlocked.bottom:hover, .lesson-unlocked.right:hover, .lesson-locked.left:hover, .lesson-locked.top:hover, .lesson-locked.bottom:hover, .lesson-locked.right:hover, .lesson-completed.left:hover, .lesson-completed.top:hover, .lesson-completed.bottom:hover, .lesson-completed.right:hover, .lesson-optional.left:hover, .lesson-optional.top:hover, .lesson-optional.bottom:hover, .lesson-optional.right:hover {
      transform: translateY(-6px);
    }
    .lesson-locked {
      background-color: var(--light-background-color);
      opacity: 0.75;
    }
    .lesson-completed {
      border: 4px solid var(--lesson-completed-highlight-color);
    }
    .lesson-icon {
      z-index: 2;
      color: var(--lesson-default-border-color);
      border: 2px dashed var(--lesson-default-border-color);
      border-radius: 50%;
      font-family: fenway-park-jf, sans-serif;
      font-weight: 200;
      font-size: 56px;
      font-style: normal;
      width: 80px;
      height: 80px;
      text-align: center;
      animation-name: number;
      animation-timing-function: ease-in-out;
      margin-bottom: 0px;
    }
    @media screen and (max-height: 768px) {
      .lesson-icon {
        height: 64px;
        width: 64px;
      }
    }
    .lesson-icon img {
      vertical-align: top;
      padding: 4px;
      width: 100%;
    }
    .lesson-icon:after {
      background: none;
    }
    .lesson-icon p {
      margin: 0px;
      line-height: 80px;
    }
    .lesson-locked .lesson-icon {
      border: 2px dashed var(--lesson-default-border-color);
    }
    .lesson-completed .lesson-icon {
      color: var(--lesson-completed-border-color);
      border: 2px dashed var(--lesson-completed-border-color);
    }
    .lesson-neutral .lesson-icon {
      color: var(--lesson-default-border-color);
      border: 2px dashed var(--lesson-default-border-color);
    }
    .lesson-inprogress .lesson-icon {
      color: var(--lesson-inprogress-border-color);
      border: 2px dashed var(--lesson-inprogress-border-color);
    }
    .lesson-optional .lesson-icon {
      border: 2px dashed var(--lesson-optional-border-color);
    }
    .lesson-select-3 .nav-link:nth-child(2) {
      transform: translate3d(0, -40px, 0);
    }
    .lesson-select-5 .nav-link:nth-child(2), .lesson-select-5 .nav-link:nth-child(4) {
      transform: translate3d(0, -50px, 0);
    }
    .lesson-select-5 .nav-link:nth-child(3) {
      transform: translate3d(0, -70px, 0);
    }
    .lesson-select-7 .nav-link:nth-child(2), .lesson-select-7 .nav-link:nth-child(4) {
      transform: translate3d(0, -50px, 0);
    }
    .lesson-select-7 .nav-link:nth-child(3) {
      transform: translate3d(0, -70px, 0);
    }
    .lesson-select-9 .nav-link:nth-child(2), .lesson-select-9 .nav-link:nth-child(4) {
      transform: translate3d(0, -50px, 0);
    }
    .lesson-select-9 .nav-link:nth-child(3) {
      transform: translate3d(0, -70px, 0);
    }
    .lesson-select-9 .nav-link:nth-child(7) {
      transform: translate3d(0, -50px, 0);
    }
    .lesson-select-9 .nav-link:nth-child(8) {
      transform: translate3d(0, -50px, 0);
    }
    .lesson-select-11 .nav-link:nth-child(2), .lesson-select-11 .nav-link:nth-child(4), .lesson-select-11 .nav-link:nth-child(7), .lesson-select-11 .nav-link:nth-child(9) {
      transform: translate3d(0, -50px, 0);
    }
    .lesson-select-11 .nav-link:nth-child(3), .lesson-select-11 .nav-link:nth-child(8) {
      transform: translate3d(0, -70px, 0);
    }
    .lesson-select-11 .nav-link .activity-completed {
      margin-bottom: 0;
    }
    .lesson-select-13 .nav-link:nth-child(2), .lesson-select-13 .nav-link:nth-child(4), .lesson-select-13 .nav-link:nth-child(7), .lesson-select-13 .nav-link:nth-child(9) {
      transform: translate3d(0, -50px, 0);
    }
    .lesson-select-13 .nav-link:nth-child(3), .lesson-select-13 .nav-link:nth-child(8) {
      transform: translate3d(0, -70px, 0);
    }
    .lesson-select-13 .nav-link:nth-child(12) {
      transform: translate3d(0, -50px, 0);
    }
    .lesson-select-13 .nav-link .activity-completed {
      margin-bottom: 0;
    }
    .lesson-select-15 .nav-link:nth-child(15) {
      transform: translate3d(0, -70px, 0);
    }
    .lesson-select-4 .nav-link:nth-child(2) {
      transform: translate3d(0, -40px, 0);
    }
    .lesson-select-4 .nav-link:nth-child(3) {
      transform: translate3d(0, -40px, 0);
    }
    .lesson-select-6 .nav-link:nth-child(2), .lesson-select-6 .nav-link:nth-child(4) {
      transform: translate3d(0, -50px, 0);
    }
    .lesson-select-6 .nav-link:nth-child(3) {
      transform: translate3d(0, -70px, 0);
    }
    .lesson-select-8 .nav-link:nth-child(2), .lesson-select-8 .nav-link:nth-child(4) {
      transform: translate3d(0, -50px, 0);
    }
    .lesson-select-8 .nav-link:nth-child(3) {
      transform: translate3d(0, -70px, 0);
    }
    .lesson-select-8 .nav-link:nth-child(7) {
      transform: translate3d(0, -50px, 0);
    }
    .lesson-select-10 .nav-link:nth-child(n+11) {
      transform: translate3d(0, -70px, 0);
    }
    .lesson-select-10 .nav-link:nth-child(2), .lesson-select-10 .nav-link:nth-child(4), .lesson-select-10 .nav-link:nth-child(7), .lesson-select-10 .nav-link:nth-child(9) {
      transform: translate3d(0, -50px, 0);
    }
    .lesson-select-10 .nav-link:nth-child(3), .lesson-select-10 .nav-link:nth-child(8) {
      transform: translate3d(0, -70px, 0);
    }
    .lesson-select-10 .nav-link .lesson-completed {
      margin-bottom: 0;
    }
    .lesson-select-12 .nav-link:nth-child(n+11) {
      transform: translate3d(0, -70px, 0);
    }
    .lesson-select-12 .nav-link:nth-child(2), .lesson-select-12 .nav-link:nth-child(4), .lesson-select-12 .nav-link:nth-child(7), .lesson-select-12 .nav-link:nth-child(9) {
      transform: translate3d(0, -50px, 0);
    }
    .lesson-select-12 .nav-link:nth-child(3), .lesson-select-12 .nav-link:nth-child(8) {
      transform: translate3d(0, -70px, 0);
    }
    .lesson-select-12 .nav-link .lesson-completed {
      margin-bottom: 0;
    }
    .lesson-select-14 .nav-link:nth-child(n+11) {
      transform: translate3d(0, -70px, 0);
    }
    .lesson-select-14 .nav-link:nth-child(2), .lesson-select-14 .nav-link:nth-child(4), .lesson-select-14 .nav-link:nth-child(7), .lesson-select-14 .nav-link:nth-child(9) {
      transform: translate3d(0, -50px, 0);
    }
    .lesson-select-14 .nav-link:nth-child(3), .lesson-select-14 .nav-link:nth-child(8) {
      transform: translate3d(0, -70px, 0);
    }
    .lesson-select-14 .nav-link:nth-child(12) {
      transform: translate3d(0, -50px, 0);
    }
    .lesson-select-14 .nav-link:nth-child(11) {
      transform: translate3d(0, -50px, 0);
    }
    .lesson-select-14 .nav-link .lesson-completed {
      margin-bottom: 0;
    }
    .ribbon-enter {
      animation: lesson-fade 0.6s ease both;
    }
    .lesson-list-enter {
      animation: lesson-fade 0.6s ease 0.4s both;
    }
    .lesson-select-6, .lesson-select-11 {
      max-width: 718px;
    }
    @media screen and (max-height: 768px) {
      .lesson-select-6, .lesson-select-11 {
        max-width: 618px;
      }
    }
    .lesson-select-6 .nav-link:nth-child(4), .lesson-select-6 .nav-link:nth-child(9), .lesson-select-11 .nav-link:nth-child(4), .lesson-select-11 .nav-link:nth-child(9) {
      transform: translate3d(0, -70px, 0);
    }
    .lesson-select-6 .nav-link:nth-child(5), .lesson-select-6 .nav-link:nth-child(8), .lesson-select-6 .nav-link:nth-child(10), .lesson-select-11 .nav-link:nth-child(5), .lesson-select-11 .nav-link:nth-child(8), .lesson-select-11 .nav-link:nth-child(10) {
      transform: translate3d(0, -50px, 0);
    }
    .lesson-select-6 .nav-link:nth-child(7), .lesson-select-6 .nav-link:nth-child(11), .lesson-select-11 .nav-link:nth-child(7), .lesson-select-11 .nav-link:nth-child(11) {
      transform: translate3d(0, 0px, 0);
    }
    @media (max-width: 1499.98px) {
      .tools-select {
        margin-top: 0em;
      }
    }
    .tools-select .nav-link {
      padding: 0.5rem 0.5rem 1.2rem 0rem;
    }
    .tools-select .nav-link:last-child {
      margin-right: 2.8rem;
    }
    .tools-select .nav-link .lesson-neutral {
      margin: 0;
      height: 60px;
      width: 60px;
    }
    .tools-select .nav-link .lesson-neutral .lesson-icon {
      height: 56px;
      width: 56px;
    }
    .tools-select .nav-link .lesson-neutral .lesson-icon img {
      padding: 0px;
    }
    .tools-select .nav-link:nth-child(5n+1) {
      transform: none;
    }
    .tools-select .nav-link .lesson-neutral + .module-info {
      left: -6.275vw;
      min-width: 15vw;
    }
    .tools-select .nav-link .lesson-neutral + .module-info .h5 {
      font-size: 1.4rem;
    }
    .activity-menu {
      list-style-type: none;
      padding-left: 0;
      margin-bottom: 0;
    }
    .activity-menu .activity-item {
      background-image: var(--activity-menu-ribbon-image-neutral);
      width: 98%;
      position: relative;
      color: var(--light-text-color);
      padding: 0.1em 0.1em;
      margin: 0em auto 1.4em;
      transition: all 0.2s ease-in-out;
      cursor: pointer;
      margin-top: 1rem;
      margin-bottom: 2.5rem;
      background-size: 100% 100%;
    }
    .activity-menu .activity-item .activity-icon-frame {
      background-color: var(--activity-icon-background-color);
      border: 2px solid var(--activity-icon-frame-color);
      box-shadow: 0px 0px 0px 3px var(--activity-icon-frame-color);
      height: 80px;
      width: 80px;
      border-radius: 50%;
      position: absolute;
      top: -16px;
      left: 30px;
    }
    @media (max-width: 1499.98px) {
      .activity-menu .activity-item .activity-icon-frame {
        height: 64px;
        width: 64px;
        top: -6px;
        left: 20px;
      }
    }
    @media screen and (max-height: 768px) {
      .activity-menu .activity-item .activity-icon-frame {
        height: 60px;
        width: 60px;
        top: -6px;
        left: 20px;
      }
    }
    .activity-menu .activity-item .activity-icon-frame img {
      height: 78px;
      width: 78px;
      border-radius: 50%;
      position: absolute;
      top: 0px;
      left: 0px;
    }
    @media screen and (max-width: 1500px) {
      .activity-menu .activity-item .activity-icon-frame img {
        height: 60px;
        width: 60px;
        top: -1px;
        left: 1px;
      }
    }
    @media screen and (max-height: 768px) {
      .activity-menu .activity-item .activity-icon-frame img {
        height: 56px;
        width: 56px;
        top: -1px;
        left: 1px;
      }
    }
    @media screen and (max-height: 768px) {
      .activity-menu .activity-item {
        margin-bottom: 1.4rem;
      }
    }
    .activity-menu .activity-item:hover {
      background-image: var(--activity-menu-ribbon-image-hover);
      width: 100%;
    }
    .activity-menu .activity-item:hover .activity-check path.check-bg {
      fill: var(--core-color);
    }
    .activity-menu .activity-item:hover .activity-item-body p.grow {
      color: var(--dark-text-color);
    }
    .activity-menu .activity-item u {
      text-decoration: none;
    }
    .activity-menu .activity-item.locked {
      opacity: 80%;
      color: var(--light-text-color);
      cursor: default;
    }
    .activity-menu .activity-item.locked:hover {
      background-image: url(/images/levels/activities/activity-ribbon-neutral.svg);
      width: 98%;
    }
    .activity-menu .activity-item.locked:hover .activity-check path.check-bg {
      fill: var(--activity-complete-checkmark-color);
    }
    .activity-menu .activity-item.locked:hover .activity-item-body p.grow {
      color: var(--light-text-color);
    }
    .activity-menu :last-child .activity-item {
      margin: 0;
    }
    .activity-item-body {
      padding: 0px 20px;
      display: flex;
      width: 100%;
    }
    .activity-item-body p.grow {
      margin: 0px;
      line-height: 2;
      margin-left: 120px;
      color: var(--light-text-color);
    }
    @media (max-width: 1499.98px) {
      .activity-item-body p.grow {
        margin-left: 110px;
      }
    }
    @media (max-width: 1199.98px) {
      .activity-item-body p.grow {
        margin-left: 80px;
      }
    }
    @media (max-width: 767.98px) {
      .activity-item-body p.grow {
        margin-left: 70px;
        font-size: 80%;
      }
    }
    .selectable-item {
      cursor: pointer;
      border-radius: 1.8rem;
      height: max-content;
    }
    .selectable-item .flashcard {
      transition: 0.2s transform;
    }
    .selectable-item:hover {
      background: var(--flashcard-touch-highlight-color);
      box-shadow: 1px 1px 9px 5px var(--flashcard-touch-highlight-color);
    }
    .selectable-item:hover .flashcard {
      transform: scale(1.1) rotateZ(3deg);
    }
    .selectable-item.selected {
      background: var(--flashcard-touch-highlight-color);
      box-shadow: 1px 1px 9px 5px var(--flashcard-touch-highlight-color);
    }
    .selectable-item.selected .flashcard {
      transform: scale(1.1);
    }
    .selectable-drop-area {
      cursor: pointer;
    }
    .selectable-drop-area .basket-container {
      transition: 0.2s transform;
    }
    .selectable-drop-area .basket-container:hover {
      transform: scale(1.1) translate(0px, -30px) rotateZ(8deg);
    }
    .cms-activity-list {
      padding-left: 0;
      margin-bottom: 0;
    }
    .cms-activity-list .cms-activity-item {
      background-image: url(/images/levels/activities/activity-ribbon-neutral.svg);
      width: 100%;
      position: relative;
      color: var(--light-text-color);
      padding: 0.1em 0.1em;
      margin: 1rem 5rem 1rem 0;
      transition: all 0.2s ease-in-out;
      cursor: pointer;
    }
    .cms-activity-list .cms-activity-item:hover {
      background-image: url(/images/levels/activities/activity-ribbon-hover.svg);
      width: 102%;
    }
    .cms-activity-list .cms-activity-item:hover .cms-activity-item-body p.grow {
      color: var(--dark-text-color);
    }
    .cms-activity-list .cms-activity-item .activity-item-body {
      padding: 0px 20px;
      display: flex;
      width: 100%;
    }
    .cms-activity-list .cms-activity-item .activity-item-body .activity-icon-frame {
      background-color: var(--activity-icon-background-color);
      border: 2px solid var(--activity-icon-frame-color);
      box-shadow: 0px 0px 0px 3px var(--activity-icon-frame-color);
      height: 80px;
      width: 80px;
      border-radius: 50%;
      position: absolute;
      top: -16px;
      left: 30px;
    }
    @media (max-width: 1199.98px) {
      .cms-activity-list .cms-activity-item .activity-item-body .activity-icon-frame {
        height: 64px;
        width: 64px;
        top: -6px;
        left: 20px;
      }
    }
    .cms-activity-list .cms-activity-item .activity-item-body .activity-icon-frame img {
      height: 78px;
      width: 78px;
      border-radius: 50%;
      position: absolute;
      top: 0px;
      left: 0px;
    }
    @media (max-width: 1199.98px) {
      .cms-activity-list .cms-activity-item .activity-item-body .activity-icon-frame img {
        height: 60px;
        width: 60px;
        top: -1px;
        left: 1px;
      }
    }
    .cms-activity-list .cms-activity-item .activity-item-body p.activity-title {
      margin: 0px;
      line-height: 2;
      margin-left: 120px;
      color: var(--light-text-color);
      font-size: 1.6rem;
    }
    @media (max-width: 767.98px) {
      .cms-activity-list .cms-activity-item .activity-item-body p.activity-title {
        margin-left: 60px;
        font-size: 80%;
      }
    }
    .cms-activity-list :last-child .activity-item {
      margin: 0;
    }
    .hint-text {
      font-weight: 400;
      font-size: inherit;
      width: 100%;
      color: inherit;
      text-align: center;
      padding-top: 2px;
      padding-bottom: 5px;
      overflow-wrap: break-word;
      background-position: center;
      background-size: cover;
    }
    .form-group {
      padding: 1vh 1vw;
    }
    .form-check {
      display: flex;
    }
    .input-group input {
      margin-right: 0;
    }
    .input-group .btn, .input-group button, .input-group .button {
      margin-right: 0;
      display: flex;
      justify-content: center;
    }
    input[type=checkbox].checkbox-hoverable {
      opacity: 0.2;
    }
    input[type=checkbox].checkbox-hoverable:hover {
      opacity: 1;
    }
    input[type=checkbox].checkbox-hoverable:checked {
      opacity: 1;
    }
    .star-pin {
      font-size: 3rem;
      cursor: pointer;
      transition: all 200ms ease-in-out;
      font-weight: 400;
    }
    .star-pin i {
      font-size: 2.5rem;
    }
    .star-pin i.lar {
      opacity: 75%;
    }
    .star-pin i.lar:hover, .star-pin i.lar.hover {
      transform: scale(1.3);
      transition-duration: 200ms;
    }
    .slider.round {
      border-radius: 40px;
    }
    .slider.round:before {
      border-radius: 50%;
    }
    .validation-message, .invalid-feedback {
      color: var(--danger-color);
    }
    .valid-feedback {
      color: var(--success-color);
    }
    .invalid {
      outline: none;
      border: 3px solid var(--danger-color);
      border-radius: 3rem;
    }
    .valid.modified:not([type=checkbox]):not(.search-bar-input) {
      outline: none;
      border: 3px solid var(--success-color-dark);
      border-radius: 3rem;
    }
    .was-validated .form-control.is-valid, .was-validated .bm-content textarea.is-valid, .bm-content .was-validated textarea.is-valid, .was-validated .form-control:valid, .was-validated .bm-content textarea:valid, .bm-content .was-validated textarea:valid, .was-validated input.is-valid, .was-validated input:valid {
      border-color: var(--success-color);
      padding-right: calc(1.5em + 0.75rem);
      background-image: url("/images/global/gui/icon-checkmark.svg");
      background-repeat: no-repeat;
      background-position: right calc(0.375em + 0.1875rem) center;
      background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
      color: var(--success-color-light);
    }
    form-control .was-validated .form-control.is-invalid, form-control .was-validated .bm-content textarea.is-invalid, .bm-content form-control .was-validated textarea.is-invalid, .was-validated .form-control:invalid, .was-validated .bm-content textarea:invalid, .bm-content .was-validated textarea:invalid, form-control .was-validated input.is-invalid, .was-validated input:invalid {
      border-color: var(--danger-color);
      padding-right: calc(1.5em + 0.75rem);
      background-image: url("/images/global/gui/icon-warning.svg");
      background-repeat: no-repeat;
      background-position: right calc(0.375em + 0.1875rem) center;
      background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
      color: var(--danger-color-light);
    }
    .form-control, .bm-content textarea {
      display: block;
      height: calc(1.5em + 0.75rem + 2px);
      padding: 0.4rem 1.2rem;
      font-size: 1.2rem;
      font-weight: 700;
      line-height: 1.5;
      color: var(--input-text-color);
      background-color: var(--input-neutral-background-color);
      background-clip: padding-box;
      border: 0px;
      border-radius: 3rem;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    .form-control::placeholder, .bm-content textarea::placeholder {
      opacity: 50%;
      font-weight: 500;
    }
    .form-control:focus, .bm-content textarea:focus, .form-control:active, .bm-content textarea:active {
      color: var(--input-active-text-color);
      background-color: var(--input-active-background-color);
      border-color: none;
      outline: 0;
      box-shadow: 0 0 0 0.2rem var(--input-box-shadow-color);
    }
    .form-control.is-invalid, .bm-content textarea.is-invalid, input.is-invalid {
      color: var(--danger-color-light);
      background-image: url("/images/global/gui/icon-warning.svg");
    }
    .form-control.is-invalid:focus, .bm-content textarea.is-invalid:focus, .form-control.is-invalid:active, .bm-content textarea.is-invalid:active, input.is-invalid:focus, input.is-invalid:active {
      box-shadow: 0 0 0 0.2rem;
    }
    .form-control.is-valid, .bm-content textarea.is-valid, input.is-valid {
      color: var(--success-color-light);
      background-image: url("/images/global/gui/icon-checkmark.svg");
    }
    .form-control:disabled, .bm-content textarea:disabled, .form-control[readonly], .bm-content textarea[readonly], .form-control .disabled, .bm-content textarea .disabled, input .disabled {
      background-color: var(--neutral-350);
    }
    .form-control:disabled:focus, .bm-content textarea:disabled:focus, .form-control:disabled:active, .bm-content textarea:disabled:active, .form-control:disabled:focus-visible, .bm-content textarea:disabled:focus-visible, .form-control[readonly]:focus, .bm-content textarea[readonly]:focus, .form-control[readonly]:active, .bm-content textarea[readonly]:active, .form-control[readonly]:focus-visible, .bm-content textarea[readonly]:focus-visible, .form-control .disabled:focus, .bm-content textarea .disabled:focus, .form-control .disabled:active, .bm-content textarea .disabled:active, .form-control .disabled:focus-visible, .bm-content textarea .disabled:focus-visible, input .disabled:focus, input .disabled:active, input .disabled:focus-visible {
      box-shadow: none;
      outline: none;
    }
    .form-control:disabled::placeholder, .bm-content textarea:disabled::placeholder, .form-control[readonly]::placeholder, .bm-content textarea[readonly]::placeholder, .form-control .disabled::placeholder, .bm-content textarea .disabled::placeholder, input .disabled::placeholder {
      color: var(--input-placeholder-text-color);
      opacity: 1;
    }
    .form-control.form-control-plaintext, .bm-content textarea.form-control-plaintext, input.form-control-plaintext {
      background-color: transparent;
      padding-bottom: 0px;
    }
    .form-control::placeholder, .bm-content textarea::placeholder {
      color: var(--input-placeholder-text-color);
      opacity: 0.5;
    }
    .custom-control.custom-radio.custom-control-inline {
      margin-right: 1rem;
      padding-left: 2.25rem;
    }
    .custom-control.custom-radio input[type=radio] {
      position: absolute;
      left: -9999px;
    }
    .custom-control.custom-radio input[type=radio] + label:before {
      content: "";
      background: var(--white-background-color);
      border: 2px solid var(--checkbox-color);
      height: 25px;
      width: 25px;
      border-radius: 50%;
      position: absolute;
      top: 8px;
      left: -36px;
      cursor: pointer;
    }
    .custom-control.custom-radio input[type=radio] + label:after {
      content: "";
      background: var(--checkbox-color);
      width: 15px;
      height: 15px;
      border-radius: 50%;
      position: absolute;
      top: 13px;
      left: -31px;
      opacity: 0;
      transform: scale(2);
      transition: transform 0.3s linear, opacity 0.3s linear;
    }
    .custom-control.custom-radio input[type=radio]:checked + label:after {
      opacity: 1;
      transform: scale(1);
    }
    .custom-control.custom-radio input[type=radio]:checked + label:before {
      box-shadow: 0 0 0 0.2rem rgba(90, 125, 89, 0.33);
    }
    .wrap-collapsible {
      margin-bottom: 1.2rem 0;
    }
    .wrap-collapsible input[type=checkbox] {
      display: none;
    }
    .wrap-collapsible .lbl-toggle {
      display: block;
      font-weight: bold;
      font-family: henderson-slab-basic, serif;
      font-size: 1.2rem;
      padding: 1rem;
      color: var(--dark-text-color);
      border-bottom: 2px dashed var(--neutral-300);
      cursor: pointer;
      border-radius: 7px;
      transition: all 0.25s ease-out;
    }
    .wrap-collapsible .lbl-toggle:hover {
      color: #7c5a0b;
    }
    .wrap-collapsible .lbl-toggle::before {
      content: " ";
      display: inline-block;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 5px solid currentColor;
      vertical-align: middle;
      margin-right: 0.7rem;
      transform: translateY(-2px);
      transition: transform 0.2s ease-out;
    }
    .wrap-collapsible .toggle:checked + .lbl-toggle::before {
      transform: rotate(90deg) translateX(-3px);
    }
    .wrap-collapsible .collapsible-content {
      max-height: 0px;
      overflow: hidden;
      transition: max-height 0.25s ease-in-out;
    }
    .wrap-collapsible .toggle:checked + .lbl-toggle + .collapsible-content {
      max-height: 100vh;
    }
    .wrap-collapsible .toggle:checked + .lbl-toggle {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }
    .wrap-collapsible .collapsible-content .content-inner {
      background: rgba(250, 224, 66, 0.2);
      border-bottom: 1px solid rgba(250, 224, 66, 0.45);
      border-bottom-left-radius: 7px;
      border-bottom-right-radius: 7px;
      padding: 0.5rem 1rem;
    }
    .form-group .progress {
      margin: 10px 20px;
    }
    .progress-bar.bg-primary {
      background-color: var(--primary-color);
    }
    .progress-bar.bg-warning {
      background-color: var(--warning-color);
    }
    .progress-bar.bg-danger {
      background-color: var(--danger-color);
    }
    .progress-bar.bg-info {
      background-color: var(--info-color);
    }
    select.select-with-icons {
      font-family: "tgn-soft-round-comp", sans-serif, "Line Awesome Free", sans-serif;
    }
    textarea.form-control, .bm-content textarea {
      border-radius: 1.3rem;
      border-start-end-radius: 5px;
      height: auto;
    }
    select:not([multiple]).short-control {
      height: calc(1em + 0.75rem + 2px);
      line-height: 1;
    }
    .custom-file-input:focus ~ .custom-file-label {
      border-color: transparent;
      box-shadow: 0 0 0 0.2rem var(--box-shadow-color-3);
    }
    .custom-file-label {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      height: inherit;
      padding: 0.375rem 0.75rem;
      line-height: 1.5;
      color: var(--dark-text-color);
      background-color: var(--neutral-300);
      border: none;
      border-radius: 1.8rem;
    }
    .custom-file-label:after {
      border-top-right-radius: 1.8rem;
      border-bottom-right-radius: 1.8rem;
      padding: 0.5rem 0.75rem;
      background-color: var(--dark-text-color);
      color: var(--light-background-color);
      border: none;
      font-family: henderson-slab-basic, serif;
      font-size: 90%;
    }
    .custom-file-label:after:hover {
      background-color: RGBA(var(--dark-background-color), 0.8);
    }
    .input-group-text {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-align: center;
      align-items: center;
      padding: 0.375rem 0.75rem;
      margin-bottom: 0;
      font-size: 1.2rem;
      font-weight: 400;
      line-height: 1.5;
      color: var(--light-text-color);
      text-align: center;
      white-space: nowrap;
      background-color: var(--dark-background-color);
      border: none;
      border-radius: 1.8rem;
      font-family: henderson-slab-basic, serif;
    }
    .input-group-append {
      display: flex;
      justify-content: center;
    }
    .input-group-append .btn, .input-group-append button, .input-group-append .button {
      box-shadow: none;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .input-group-append .btn i, .input-group-append button i, .input-group-append .button i {
      padding-top: 2px;
    }
    .compact-profile .profile-email {
      border-radius: 1.2rem;
      background-color: var(--compact-profile-background-color);
      color: var(--white-text-color);
      font-size: large;
      width: fit-content;
      margin: auto;
    }
    .compact-profile .profile-email p {
      color: var(--white-text-color);
      font-size: x-large;
      margin: 1px 2px;
    }
    .compact-profile .form-group {
      padding-top: 0;
      margin-bottom: 0.4rem;
    }
    .compact-profile .form-group label {
      font-size: 1.4rem;
      padding-left: 5px;
    }
    .cms-layout .custom-control.custom-radio.custom-control-inline {
      margin-right: 1rem;
      padding-left: 2.25rem;
    }
    .cms-layout .custom-control.custom-radio input[type=radio] {
      position: absolute;
      left: -9999px;
    }
    .cms-layout .custom-control.custom-radio input[type=radio] + label:before {
      content: "";
      top: 3px;
    }
    .cms-layout .custom-control.custom-radio input[type=radio] + label:after {
      content: "";
      background: var(--radio-checked-color);
      width: 15px;
      height: 15px;
      border-radius: 50%;
      position: absolute;
      top: 8px;
      left: -31px;
      opacity: 0;
      transform: scale(2);
      transition: transform 0.3s linear, opacity 0.3s linear;
    }
    .cms-layout .custom-control.custom-radio input[type=radio]:checked + label:after {
      opacity: 1;
      transform: scale(1);
    }
    .cms-layout .custom-control.custom-radio input[type=radio]:checked + label:before {
      box-shadow: 0 0 0 0.2rem rgba(90, 125, 89, 0.33);
    }
    .login-form .nav {
      list-style: none;
    }
    .login-form .form-control, .login-form .bm-content textarea, .bm-content .login-form textarea {
      display: block;
      width: 100%;
      height: calc(1.5em + 0.75rem + 2px);
      padding: 0.375rem 0.75rem;
      font-size: 1.2rem;
      font-weight: 400;
      line-height: 1.5;
      color: #495057;
      background-color: #fff;
      background-clip: padding-box;
      border: 3px solid #e3ce97;
      border-radius: 3rem;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    .login-form form {
      padding: 1em;
      display: flex;
      flex-direction: column;
    }
    .form-container {
      padding: 0em 1em;
    }
    .rating-btn {
      margin: 0rem 1rem;
    }
    .rating-btn .label {
      width: 100%;
      margin: auto;
      font-size: 150%;
    }
    .rating-btn .btn {
      border-radius: 50%;
      padding: 8px 8px;
      margin: 5px;
      background-color: var(--feedback-modal-btn-background-color);
      border: none;
    }
    .rating-btn .btn.btn-light {
      color: var(--feedback-modal-btn-text-color);
      background-color: var(--feedback-modal-btn-background-color);
      border-color: var(--feedback-modal-btn-background-color);
    }
    .rating-btn .btn.btn-light:active {
      border: var(--feedback-modal-btn-border-color);
    }
    .rating-btn .btn.btn-light.focus, .rating-btn .btn.btn-light:focus {
      box-shadow: 5px 4px 0 1px var(--feedback-modal-btn-box-shadow-color);
      border: none;
    }
    .rating-btn .btn.btn-light:not(:disabled):not(.disabled).active, .rating-btn .btn.btn-light:not(:disabled):not(.disabled):active, .show > .rating-btn .btn.btn-light.dropdown-toggle {
      background-color: var(--feedback-modal-btn-border-color);
      border-color: var(--feedback-modal-btn-border-color);
    }
    .rating-btn .btn.btn-info {
      background-color: var(--feedback-modal-btn-info-background-color);
    }
    .rating-btn .btn.btn-info.active, .rating-btn .btn.btn-info:active {
      background-color: var(--light-background-color);
      border-color: var(--neutral-400);
    }
    .rating-btn .btn.btn-info:not(:disabled):not(.disabled).active, .rating-btn .btn.btn-info:not(:disabled):not(.disabled):active, .show > .rating-btn .btn.btn-info.dropdown-toggle {
      color: #fff;
      background-color: var(--feedback-modal-btn-info-active-background-color);
      border-color: var(--feedback-modal-btn-info-border-color);
      box-shadow: 0 0 0 0.2rem var(--feedback-modal-btn-info-active-box-shadow-color);
    }
    .rating-btn .btn.btn-info:not(:disabled):not(.disabled).active:focus, .rating-btn .btn.btn-info:not(:disabled):not(.disabled):active:focus, .rating-btn .btn.btn-info.show > .rating-btn .btn.btn-info.btn-info.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem var(--feedback-modal-btn-info-active-background-color);
    }
    .rating-btn .btn.btn-info.focus, .rating-btn .btn.btn-info:focus {
      box-shadow: 0 0 0 0.2rem var(--feedback-modal-btn-info-active-background-color);
    }
    .rating-btn .btn.btn-info.focus-visible, .rating-btn .btn.btn-info:focus-visible {
      border: 0px;
      outline: none;
    }
    .rating {
      background-image: url("/images/global/gui/icon-rating.png");
      height: 70px;
      width: 70px;
      overflow: hidden;
      background-size: cover;
      background-position: 0 0;
      border: none;
    }
    .rating.two {
      background-position: 280px 0;
    }
    .rating.three {
      background-position: 210px 0;
    }
    .rating.four {
      background-position: 140px 0;
    }
    .rating.five {
      background-position: 70px 0;
    }
    .inline-radio-input {
      cursor: pointer;
    }
    .inline-radio-input:focus {
      box-shadow: none;
    }
    .inline-radio-input-label {
      line-height: 40px;
    }
    .datalist-component {
      display: block;
      position: relative;
      width: 100%;
      height: auto;
      margin-top: 2px;
    }
    .datalist {
      width: 100%;
      position: absolute;
      background-color: #f5f1c7;
      border-radius: 1.2rem 0 0 1.2rem;
      box-shadow: 0 0 0 0.2rem rgba(90, 125, 89, 0.3294117647);
      z-index: 4;
      max-height: 150px;
      overflow-y: scroll;
      margin-top: 0.3rem;
    }
    .datalist-item {
      padding: 2px 0 2px 30px;
      border-radius: 3rem;
    }
    .datalist-item:hover {
      background-color: #e8e5c3;
    }
    ul.list-selectable {
      padding-left: 0;
      list-style: none;
    }
    ul.list-selectable input[type=checkbox]:after {
      margin-top: -0.8rem;
      margin-left: inherit;
    }
    .activity-progress-container {
      background-color: var(--progress-bar-container-background-color);
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;
      margin-top: 5vh;
      margin-bottom: 3vh;
      margin-left: 20px;
      margin-right: 0px;
      max-width: 14rem;
      min-width: 14rem;
      height: 1.7rem;
      padding: 0.22em;
      z-index: 2;
      border-radius: 2rem;
      font-family: "Cubano", sans-serif;
      color: var(--progress-bar-text-color);
      -webkit-box-shadow: 0 2px 1px var(--progress-bar-shadow-color);
      box-shadow: 0 2px 1px var(--progress-bar-shadow-color);
    }
    .activity-progress-container .progress-bar.activity-progress-fill {
      background-color: var(--progress-bar-filled-area-color);
      color: var(--progress-bar-filled-area-text-color);
      font-size: 2vh;
    }
    .activity-progress-container .progress-bar.activity-progress-fill {
      background-color: var(--progress-bar-filled-area-color);
      color: var(--progress-bar-filled-area-text-color);
      font-size: 2vh;
    }
    @media screen and (max-height: 768px) {
      .activity-progress-container {
        height: 1.2rem;
      }
    }
    .activity-progress-container label {
      color: var(--progress-bar-icon-color);
      font-size: 0px;
      width: 50px;
      height: 50px;
      border: 2px dashed var(--progress-bar-icon-border-color);
      border-radius: 50%;
      margin: 5px;
    }
    .activity-progress-container label svg {
      width: 50px;
      height: 50px;
      margin-top: -3px;
    }
    @media screen and (max-height: 768px) {
      .activity-progress-container label {
        height: 36px;
        width: 36px;
        border: 1px dashed var(--progress-bar-icon-border-color);
        margin: 2px;
      }
    }
    .activity-progress-container .progress {
      margin-left: 1rem;
    }
    .activity-progress-container .progress-bar.activity-progress-fill {
      background-color: var(--progress-bar-filled-area-color);
      color: var(--progress-bar-filled-area-text-color);
      font-size: 2vh;
    }
    .progress-icon {
      height: 60px;
      width: 60px;
      border-radius: 50%;
      background-color: var(--progress-bar-container-background-color);
      margin: 2px 0px;
      position: relative;
      top: -42px;
      left: -47px;
      -webkit-box-shadow: 0 2px 10px var(--progress-bar-shadow-color);
      box-shadow: 0 2px 10px var(--progress-bar-shadow-color);
    }
    @media screen and (max-height: 768px) {
      .progress-icon {
        height: 40px;
        width: 40px;
        top: -28px;
        left: -22px;
      }
    }
    .progress {
      display: -ms-flexbox;
      display: -webkit-box;
      display: flex;
      height: 1.3rem;
      overflow: hidden;
      font-size: 0.75rem;
      background-color: var(--progress-bar-inner-background-color);
      z-index: 2;
      border-radius: 0.8rem;
    }
    @media screen and (max-height: 768px) {
      .progress {
        height: 0.8rem;
      }
    }
    .progress .progress-label {
      position: absolute;
      width: 12rem;
    }
    .progress .progress-label p {
      line-height: 1.2;
      font-size: 1.2rem;
      font-family: henderson-slab-basic, serif;
      margin-bottom: 0;
      margin-top: 3px;
      color: var(--progress-bar-filled-area-text-color);
      text-align: center;
      padding: 0px 6px;
    }
    .full-width-app .card.success-card, .full-width-app .floating-menu-container .success-card.floating-menu, .floating-menu-container .full-width-app .success-card.floating-menu, .success-card {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      max-width: 40vw;
      min-width: 30vw;
      z-index: 5;
      bottom: 0;
      max-height: 70vh;
      min-height: fit-content;
      box-shadow: 5px 4px 0 1px var(--success-modal-shadow-color);
    }
    .full-width-app .card.success-card h2, .full-width-app .floating-menu-container .success-card.floating-menu h2, .floating-menu-container .full-width-app .success-card.floating-menu h2, .success-card h2 {
      text-shadow: 4px 2px var(--success-modal-text-shadow-color);
      font-size: 370%;
    }
    .full-width-app .card.success-card .header-ribbon, .success-card .header-ribbon {
      position: relative;
      top: -10px;
    }
    .timer-container {
      background-color: var(--timer-background-color);
      border-radius: 1.8rem;
      padding: 0.6rem 1rem 0.5rem 1rem;
      width: -webkit-fit-content;
      width: -moz-fit-content;
      width: fit-content;
      font-family: "henderson-slab-basic";
      margin-top: 5px;
    }
    .card-counter {
      background-image: var(--card-counter-background-image-path);
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: contain;
      margin: -60px 10px 0px;
      display: flex;
      text-align: center;
      align-content: center;
      justify-content: center;
      flex-direction: column;
      padding: 0px;
    }
    .card-counter h3 {
      color: var(--card-counter-text-color);
      font-family: "Cubano", sans-serif;
      padding-top: 22px;
    }
    .progress-bar {
      background-color: var(--dark-color);
    }
    .course-content-progress-bar {
      width: 25rem;
      margin-top: -1.5rem;
      margin-bottom: 2.5rem;
    }
    .course-content-progress-bar .progress {
      height: 2rem;
      border-radius: 10rem;
      border-style: solid;
      border-width: 1px;
      border-color: #2C3840;
      position: relative;
    }
    .course-content-progress-bar .progress-bar {
      font-size: 1.75rem;
      line-height: 1.4;
      background-color: var(--progress-bar-filled-area-color);
      color: var(--primary-color);
    }
    .course-content-progress-bar .progress-bar span {
      padding-left: 13px;
    }
    .list-group {
      box-shadow: 10px 10px 0 var(--core-color);
      border-radius: 1.2rem;
    }
    .list-group-item {
      color: var(--body-font-color);
      background-color: var(--white-color);
      border: 4px solid var(--accent-color-10);
    }
    .list-group-item.list-group-item-action {
      border: 4px solid var(--secondary-color);
    }
    .list-group-item.list-group-item-action.active, .list-group-item.list-group-item-action:active {
      color: var(--white-color);
      border: 4px solid var(--secondary-color);
      background-color: var(--secondary-color);
    }
    .list-group-item.list-group-item-action.active h1, .list-group-item.list-group-item-action.active h2, .list-group-item.list-group-item-action.active h3, .list-group-item.list-group-item-action.active h4, .list-group-item.list-group-item-action.active h5, .list-group-item.list-group-item-action.active h6, .list-group-item.list-group-item-action.active p, .list-group-item.list-group-item-action.active a, .list-group-item.list-group-item-action:active h1, .list-group-item.list-group-item-action:active h2, .list-group-item.list-group-item-action:active h3, .list-group-item.list-group-item-action:active h4, .list-group-item.list-group-item-action:active h5, .list-group-item.list-group-item-action:active h6, .list-group-item.list-group-item-action:active p, .list-group-item.list-group-item-action:active a {
      color: var(--primary-color-dark);
    }
    .list-group-item.list-group-item-action.hover, .list-group-item.list-group-item-action:hover, .list-group-item.list-group-item-action:focus, .list-group-item.list-group-item-action.focus {
      color: var(--white-color);
      background-color: var(--secondary-color-medium);
      border: 4px solid var(--secondary-color);
    }
    .list-group-item.list-group-item-action.hover h1, .list-group-item.list-group-item-action.hover h2, .list-group-item.list-group-item-action.hover h3, .list-group-item.list-group-item-action.hover h4, .list-group-item.list-group-item-action.hover h5, .list-group-item.list-group-item-action.hover h6, .list-group-item.list-group-item-action.hover p, .list-group-item.list-group-item-action.hover a, .list-group-item.list-group-item-action:hover h1, .list-group-item.list-group-item-action:hover h2, .list-group-item.list-group-item-action:hover h3, .list-group-item.list-group-item-action:hover h4, .list-group-item.list-group-item-action:hover h5, .list-group-item.list-group-item-action:hover h6, .list-group-item.list-group-item-action:hover p, .list-group-item.list-group-item-action:hover a, .list-group-item.list-group-item-action:focus h1, .list-group-item.list-group-item-action:focus h2, .list-group-item.list-group-item-action:focus h3, .list-group-item.list-group-item-action:focus h4, .list-group-item.list-group-item-action:focus h5, .list-group-item.list-group-item-action:focus h6, .list-group-item.list-group-item-action:focus p, .list-group-item.list-group-item-action:focus a, .list-group-item.list-group-item-action.focus h1, .list-group-item.list-group-item-action.focus h2, .list-group-item.list-group-item-action.focus h3, .list-group-item.list-group-item-action.focus h4, .list-group-item.list-group-item-action.focus h5, .list-group-item.list-group-item-action.focus h6, .list-group-item.list-group-item-action.focus p, .list-group-item.list-group-item-action.focus a {
      color: var(--black-text-color);
    }
    .list-group-item.list-group-item-action.disabled, .list-group-item.list-group-item-action:disabled {
      color: var(--secondary-color-medium);
      background-color: var(--light-background-color-darker);
      border: 4px solid var(--dark-color);
    }
    .list-group-item:first-child {
      border-top-left-radius: 1.2rem;
      border-top-right-radius: 1.2rem;
    }
    .list-group-item:last-child {
      border-bottom-left-radius: 1.2rem;
      border-bottom-right-radius: 1.2rem;
    }
    .pagination {
      display: flex;
      border-radius: 50%;
    }
    .page-link {
      height: 50px;
      width: 50px;
      text-align: center;
      color: var(--dark-color);
      background-color: var(--light-background-color);
      border: none;
      border-radius: 50%;
      margin: 5px;
      font-family: henderson-slab-basic, serif;
      line-height: 1.5;
    }
    .page-link:hover {
      color: var(--dark-text-color);
      background-color: var(--light-background-color-darkest);
      border: none;
    }
    .page-link:focus {
      z-index: 2;
      outline: none;
      box-shadow: 5px 5px 0 var(--secondary-color);
    }
    .page-link.disabled {
      cursor: default;
      background-color: var(--disabled-color);
    }
    .page-item:first-child .page-link {
      margin-left: 0;
      border-radius: 50%;
    }
    .page-item:last-child .page-link {
      border-radius: 50%;
    }
    .page-item.active .page-link {
      color: var(--light-text-color);
      background-color: var(--dark-background-color);
      border: none;
      box-shadow: 5px 5px 0 var(--secondary-color);
    }
    .page-item.disabled .page-link {
      color: var(--light-background-color-darker);
      pointer-events: none;
      background-color: var(--secondary-color);
      border: none;
    }
    .pagination-lg .page-link {
      font-size: 150%;
      height: 70px;
      width: 70px;
      padding: 0;
      line-height: 1.9;
    }
    .pagination-sm .page-link {
      font-size: 80%;
      height: 30px;
      width: 30px;
      padding: 0;
      line-height: 1.6;
    }
    .cms-layout .breadcrumb {
      padding: 0rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 1rem;
    }
    .cms-layout .breadcrumb li.breadcrumb-item:before {
      color: var(--dark-text-color);
    }
    .cms-layout .breadcrumb li.breadcrumb-item.active {
      color: var(--black-text-color);
    }
    .cf-docs-section {
      padding: 2%;
    }
    .inner-container {
      padding: 2vw 5vh;
      width: 100%;
    }
    .swatch {
      margin: 0.5rem 1rem 3rem;
    }
    .color-swatch {
      height: 10rem;
      border-radius: 1.2rem;
      margin-bottom: 0.5rem;
    }
    .highlight {
      padding: 0.6rem;
      margin-top: 1rem;
      margin-bottom: 1rem;
      background-color: var(--light-background-color-darker);
      -ms-overflow-style: -ms-autohiding-scrollbar;
    }
    @media (min-width: 576px) {
      .highlight {
        padding: 1rem;
      }
    }
    .bd-example {
      position: relative;
      padding: 1rem;
      margin: 1rem -15px 0;
      border: 2px solid var(--light-background-color-darker);
      border-width: 0.2rem 0 0;
      margin: 5px;
    }
    @media (min-width: 576px) {
      .bd-example {
        padding: 1.5rem;
        margin-right: 0;
        margin-left: 0;
        border-width: 0.2rem;
      }
    }
    .bd-clipboard + .highlight {
      margin-top: 0;
    }
    .bd-callout {
      padding: 1.25rem;
      margin-top: 1.25rem;
      margin-bottom: 1.25rem;
      border: 1px solid var(--core-color);
      border-left-width: 0.25rem;
      border-radius: 0.25rem;
    }
    .bd-callout-warning {
      border-left-color: var(--warning-color);
    }
    .bd-callout-danger {
      border-left-color: var(--danger-color);
    }
    .bd-callout-info {
      border-left-color: var(--info-color);
    }
    .breadcrumb {
      background-color: transparent;
    }
    .data-list {
      line-height: normal;
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-width: 0px;
    }
    .data-list.table {
      color: var(--core-color-light);
      background-color: var(--neutral-100);
      box-shadow: rgba(0, 0, 0, 0.13) 0px 2px 6px 0px;
      border-radius: 8px;
    }
    .data-list .data-list-body {
      overflow-y: auto;
      padding: 1rem 0;
    }
    .data-list .data-list-header-labels {
      margin: 0rem 1rem;
      padding: 0px 22px;
      display: flex;
      margin-bottom: -10px;
    }
    .data-list .data-list-header-labels p, .data-list .data-list-header-labels label {
      font-size: 0.92rem;
      color: var(--dark-color);
      font-family: henderson-slab-basic, serif;
    }
    .data-list .select-column-header {
      text-align: center;
      margin-right: 60px;
    }
    .data-list .select-column {
      text-align: center;
      margin-right: 20px;
    }
    .data-list-controls {
      display: flex;
      -webkit-box-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      align-items: center;
      width: 100%;
    }
    .data-list-item {
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      padding: 8px 20px;
    }
    .data-list-item .column {
      margin-right: 20px;
    }
    .data-list-item .column.reorder-column {
      width: 40px;
      text-align: left;
    }
    .data-list-item:last-child {
      border-radius: 0px 0px 8px 8px;
    }
    .data-list-item-inner {
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      padding: 8px 20px;
    }
    .data-list.table .data-list-item-inner {
      box-shadow: var(--neutral-100) 0px -1px 0px 0px inset;
      height: 50px;
      padding: 0px 20px;
    }
    .data-list-item .btn {
      transform: translateY(-4px);
      padding: 0rem 0.5rem;
    }
    .data-list .column {
      text-align: center;
      margin-right: 20px;
    }
    .data-list .header-text-wrapper {
      color: var(--dark-text-color);
    }
    .data-list-item-inner {
      display: table;
      table-layout: fixed;
      transition: none 0.3s ease-out;
      width: 100%;
    }
    .data-list-item-inner div[class*=col-] {
      display: table-cell;
      position: relative;
      vertical-align: middle;
      word-break: break-word;
    }
    .data-list-dashed-style .data-list .data-list-header {
      padding: 8px;
      margin-left: 1rem;
      margin-right: 1rem;
      display: flex;
      box-shadow: none;
    }
    .data-list-dashed-style .data-list .data-list-body {
      background: var(--light-background-color-lighter);
      box-shadow: 0px 0px 20px var(--light-background-color-darkest);
      border-radius: 20px;
    }
    .data-list-dashed-style .data-list .data-list-body .data-list-item {
      box-sizing: border-box;
      border: 1px dashed var(--neutral-400);
      border-radius: 0.8rem;
      margin: 1rem;
    }
    .data-list-dashed-style .data-list .data-list-body .data-list-item:first-child {
      margin-top: 0;
    }
    .data-list-dashed-style .data-list .data-list-body .data-list-item .activity-icon-frame {
      background-color: var(--dark-background-color);
      border: 1px solid var(--warning-color);
      box-shadow: 0px 0px 0px 2px var(--warning-color);
      height: 50px;
      width: 50px;
      border-radius: 50%;
      position: relative;
    }
    .data-list-dashed-style .data-list .data-list-body .data-list-item .activity-icon-frame img {
      height: 48px;
      width: 48px;
      border-radius: 50%;
      position: absolute;
      top: 0px;
      left: 0px;
    }
    .data-list-dashed-style .data-list .data-list-body .data-item-number {
      width: 2.5rem;
      line-height: 2.5rem;
      border-radius: 50%;
      text-align: center;
      background-color: var(--warning-color);
      font-size: 1.2rem;
      color: var(--dark-text-color);
      font-family: henderson-slab-basic, serif;
    }
    .data-list-no-bg .data-list .data-list-body {
      background: transparent;
      box-shadow: none;
      border-radius: 0px;
    }
    .word-mover-columns .word-mover-divider {
      border: 1px solid var(--neutral-400);
      width: 1px;
      margin-left: 1rem;
      margin-right: 1rem;
    }
    .vimeo-modal {
      display: flex;
      z-index: 5;
      background-color: var(--dark-background-color);
      border-radius: 1.2rem;
      padding: 1rem;
      box-shadow: 10px 10px 0 var(--dark-color-dark);
      font-size: smaller;
      flex-direction: row-reverse;
    }
    .vimeo-modal .bm-title {
      display: none;
    }
    .vimeo-modal body.vp-center {
      border-radius: 1.2rem;
      box-shadow: 5px 5px 0 var(--dark-color-dark);
    }
    .vimeo-modal .player .vp-video-wrapper {
      border-radius: 1.2rem;
      box-shadow: 5px 5px 0 var(--dark-color-dark);
    }
    .vimeo-modal .player .vp-player-ui-overlays {
      opacity: 1;
      height: 50%;
      font-size: 75%;
    }
    .vimeo-modal .player .vp-controls .play {
      border-radius: 1.2rem;
      color: var(--dark-color);
    }
    .vimeo-modal .player .vp-controls .play-bar {
      border-radius: 1.2rem;
    }
    .vimeo-modal .player .vp-controls .vp-progress {
      border-radius: 1.2rem;
      border-color: var(--primary-color);
    }
    .vimeo-modal button .fill {
      fill: var(--light-background-color);
    }
    .vimeo-modal button:hover {
      background-color: var(--dark-background-color);
    }
    .popup-container, .floating-menu-container {
      display: inline-block;
      display: flex;
      justify-content: flex-end;
      align-content: flex-end;
    }
    .popup-container .popup-button, .popup-container .floating-menu-container .open-close-button, .floating-menu-container .popup-container .open-close-button, .floating-menu-container .popup-button, .floating-menu-container .open-close-button {
      background: var(--modal-open-btn-color);
      line-height: 34px;
      color: var(--white-text-color);
      padding: 10px 0px;
      text-align: center;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      font-size: 150%;
      display: block;
      cursor: pointer;
      font-family: henderson-slab-basic, serif;
      transition: all ease-in-out 0.3s;
    }
    .popup-container .popup-button:hover, .floating-menu-container .popup-button:hover, .floating-menu-container .open-close-button:hover {
      background: var(--modal-open-btn-color-hover);
    }
    .popup-container .popup, .floating-menu-container .popup {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      z-index: 5;
      opacity: 0;
      visibility: hidden;
      transition: 250ms all;
    }
    .popup-container .popup .popup-inner, .floating-menu-container .popup .popup-inner {
      width: 500px;
      box-sizing: border-box;
      padding: 30px 50px 40px;
      background: var(--light-background-color);
      position: absolute;
      left: 50%;
      border-radius: 0.8rem;
      transform: translate(-50%, -50%);
      top: 150%;
      transition: 250ms all;
    }
    .popup-container .popup .popup-inner .popup-title, .floating-menu-container .popup .popup-inner .popup-title {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 20px;
    }
    .popup-container .popup .popup-inner .popup-title h6, .floating-menu-container .popup .popup-inner .popup-title h6 {
      font-size: 18px;
      font-weight: 500;
    }
    .popup-container .popup .popup-inner .popup-title .popup-close-btn, .floating-menu-container .popup .popup-inner .popup-title .popup-close-btn {
      cursor: pointer;
      background-color: var(--modal-close-btn-color, #E6754B);
      color: var(--white-text-color, #fff);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      flex: 0 0 2.5rem;
      font-size: 1.5rem;
      line-height: 1;
      border-radius: 50%;
      margin: -40px -64px 0 0;
    }
    .popup-container .popup .popup-inner .popup-content, .floating-menu-container .popup .popup-inner .popup-content {
      display: flex;
      flex-direction: column;
    }
    .popup-container .popup .popup-inner .popup-content .popup-scroll, .floating-menu-container .popup .popup-inner .popup-content .popup-scroll {
      scroll-behavior: smooth;
      overflow-y: auto;
      overflow-x: clip;
      max-height: 400px;
      padding: 10px 20px;
    }
    .popup-container .popup .popup-inner .popup-content ul li, .floating-menu-container .popup .popup-inner .popup-content ul li {
      margin-bottom: 10px;
    }
    .popup-container .popup .popup-inner .popup-content ul li:last-child, .floating-menu-container .popup .popup-inner .popup-content ul li:last-child {
      margin-bottom: 0;
    }
    .popup-container .popup .popup-inner .popup-content ul li input, .floating-menu-container .popup .popup-inner .popup-content ul li input, .popup-container .popup .popup-inner .popup-content ul li input[type=checkbox] {
      width: 100%;
      border: 1px solid var(--white-background-color);
      border-radius: 3px;
      line-height: 34px;
      padding: 0 15px;
      font-size: 14px;
      box-sizing: border-box;
    }
    .popup-container .popup .popup-inner .popup-content ul li button, .floating-menu-container .popup .popup-inner .popup-content ul li button {
      width: 100%;
      line-height: 34px;
      background: #666;
      color: var(--white-text-color);
      cursor: pointer;
      border-radius: 3px;
      border: none;
      font-size: 14px;
    }
    .popup-container .popup .popup-inner .popup-content ul li button:hover, .floating-menu-container .popup .popup-inner .popup-content ul li button:hover {
      background: #444;
    }
    .popup-container .popup .transparent-label, .floating-menu-container .popup .transparent-label {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      cursor: pointer;
    }
    .popup-container > input[type=checkbox], .floating-menu-container > input[type=checkbox] {
      display: none;
    }
    .popup-container > input[type=checkbox]:checked + .popup, .floating-menu-container > input[type=checkbox]:checked + .popup {
      opacity: 1;
      visibility: visible;
    }
    .popup-container > input[type=checkbox]:checked + .popup .popup-inner, .floating-menu-container > input[type=checkbox]:checked + .popup .popup-inner {
      top: 50%;
    }
    .popup-container > input[type=checkbox]:after, .floating-menu-container > input[type=checkbox]:after {
      display: none;
    }
    .lightbox-modal .popup-container, .lightbox-modal .floating-menu-container {
      position: absolute;
    }
    .lightbox-modal .popup-container .popup, .lightbox-modal .floating-menu-container .popup {
      background: transparent;
    }
    .lightbox-modal .popup-container .popup .popup-inner, .lightbox-modal .floating-menu-container .popup .popup-inner {
      padding: 3vh 3vw 3vh;
    }
    .lightbox-modal .popup-container .popup-button, .floating-menu-container .lightbox-modal .popup-container .open-close-button, .lightbox-modal .floating-menu-container .popup-button, .lightbox-modal .floating-menu-container .open-close-button {
      font-size: 0;
      background-color: transparent;
      background-image: url(/images/global/gui/icon-magnify.png);
      background-size: contain;
      border-radius: 10%;
    }
    .lightbox-modal .popup-container .popup-inner, .lightbox-modal .floating-menu-container .popup-inner {
      width: 100%;
      box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
      max-height: 94vh;
    }
    @media screen and (max-height: 768px) {
      .lightbox-modal .popup-container .popup-inner, .lightbox-modal .floating-menu-container .popup-inner {
        width: 90%;
      }
    }
    .lightbox-modal .popup-container .popup-inner .popup-content .header-ribbon, .lightbox-modal .floating-menu-container .popup-inner .popup-content .header-ribbon {
      display: inline-flex;
    }
    .lightbox-modal .popup-container .popup-inner .popup-content .popup-scroll, .lightbox-modal .floating-menu-container .popup-inner .popup-content .popup-scroll {
      scroll-behavior: none;
      overflow: auto;
      max-height: unset;
    }
    .lightbox-modal {
      position: absolute;
      right: 15%;
      bottom: 30%;
    }
    .btn-text {
      line-height: 28px;
    }
    .popup .header-ribbon {
      margin: -2vh 0vh 2vh;
      align-self: center;
      width: fit-content;
    }
    .popup .dotted-line, .popup .full-width-app hr, .full-width-app .popup hr, .popup .cms-preview hr, .cms-preview .popup hr, .popup .login-form hr, .login-form .popup hr, .popup .cms-layout hr, .cms-layout .popup hr, .popup .jumbotron hr, .jumbotron .popup hr {
      margin: 30px 10px -10px;
    }
    .popup-container.help-btn, .help-btn.floating-menu-container {
      position: absolute;
      top: 0;
      right: 0;
      margin: 1rem;
      z-index: 2;
    }
    .bm-container {
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .blazored-modal-focus-trap {
      z-index: 5;
    }
    .bm-custom-modal {
      z-index: 5;
      background-color: var(--light-background-color);
      border-radius: 0.8rem;
      border: 1px solid var(--light-background-color);
      display: flex;
      flex-direction: column;
      padding: 1.5rem;
      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
    }
    .bm-title {
      font-family: "Cubano", sans-serif;
      color: var(--primary-color);
      font-size: 2.8rem;
    }
    .bm-container button.bm-close {
      cursor: pointer;
      background-color: var(--modal-close-btn-color, #E6754B);
      color: var(--white-text-color, #fff);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      flex: 0 0 40px;
      font-size: 40px;
      font-weight: normal;
      line-height: 1;
      border-radius: 50%;
      margin: -40px -44px 0 0;
      padding: 0;
      transition: 0.3s;
    }
    .bm-container button.bm-close span {
      height: 40px;
      width: 40px;
    }
    .bm-container button.bm-close:hover {
      transform: scale(1.2);
    }
    .bm-container button.bm-close:focus, .bm-container button.bm-close.focus {
      outline: none;
    }
    .bm-container .bm-header {
      padding: 0 0 1rem 0;
    }
    .bm-container .bm-title {
      width: 100%;
      text-align: center;
      background-image: var(--blazor-modal-header-image-path);
      background-position: 50% 50%;
      background-size: contain;
      padding: 1rem 3rem;
      background-repeat: no-repeat;
      background-color: transparent;
      border-color: transparent;
      font-size: xx-large;
      color: var(--light-alternate-text-color);
      font-family: fenway-park-jf, sans-serif;
      margin: -3rem 1rem 0px 1rem;
    }
    .bm-container .bm-title h1, .bm-container .bm-title h2, .bm-container .bm-title h3, .bm-container .bm-title h4, .bm-container .bm-title h5, .bm-container .bm-title h6, .bm-container .bm-title p {
      font-size: xx-large;
      color: var(--blazor-modal-header-color);
      font-family: fenway-park-jf, sans-serif;
    }
    .bm-content {
      font-family: "tgn-soft-round-comp", sans-serif;
      font-size: 1.6rem;
    }
    .bm-content .cms-layout {
      font-size: 1rem;
    }
    .bm-content h1, .bm-content h2, .bm-content h3, .bm-content h4, .bm-content h5, .bm-content h6 {
      font-family: "Cubano", sans-serif;
    }
    .bm-content textarea {
      background-color: var(--light-background-color-darker);
      border-color: var(--light-background-color-darker);
      border-radius: 0.8rem;
    }
    .bm-content .btn.btn-success {
      border-radius: 1.8rem;
      font-family: "Cubano", sans-serif;
      margin-right: 5px;
      color: var(--light-background-color);
      background-color: var(--success-color);
      border-color: var(--success-color);
      box-shadow: 5px 4px 0 1px var(--success-color-dark);
      transition: all ease 0.3s;
    }
    .bm-content .btn.btn-success:hover, .bm-content .btn.btn-success:focus, .bm-content .btn.btn-success:active, .bm-content .btn.btn-success.focus, .bm-content .btn.btn-success.active {
      background-color: var(--success-color-medium);
      border-color: var(--success-color-medium);
      box-shadow: 2px 2px 0 1px var(--success-color-dark);
    }
    .bm-content .btn.btn-success:not(:disabled):not(.disabled).active, .bm-content .btn.btn-success:not(:disabled):not(.disabled):active, .show > .bm-content .btn.btn-success.dropdown-toggle {
      color: var(--light-text-color);
      background-color: var(--success-color);
      border-color: var(--success-color);
      box-shadow: 2px 2px 0 1px var(--success-color-dark);
    }
    .bm-content .btn.btn-success.focus, .bm-content .btn.btn-success:focus {
      box-shadow: 2px 2px 0 1px var(--success-color-dark);
    }
    .modal-full-screen .bm-header .bm-title {
      opacity: 0;
      background-image: none;
    }
    .modal-full-screen .bm-header .bm-title h1 {
      color: transparent;
    }
    .activity-icon {
      border: 2px solid var(--secondary-color);
      background-color: var(--core-color-light);
      border-radius: 50%;
      content: " ";
      height: 80px;
      width: 80px;
      margin-left: 20px;
      margin-top: -15px;
      position: absolute;
      box-shadow: 0px 0px 0px 3px var(--secondary-color);
    }
    @media screen and (max-height: 768px) {
      .activity-icon {
        height: 60px;
        width: 60px;
        margin-top: -4px;
        margin-left: 10px;
      }
    }
    @media (max-width: 1499.98px) {
      .activity-icon {
        height: 60px;
        width: 60px;
        margin-top: -4px;
        margin-left: 10px;
      }
    }
    @media (max-width: 991.98px) {
      .activity-icon {
        margin-left: -10px;
        transform: scale(0.9);
      }
    }
    @media (max-width: 767.98px) {
      .activity-icon {
        margin-left: -20px;
        transform: scale(0.8);
      }
    }
    .activity-icon-pathwaygreen {
      line-height: 1;
      vertical-align: middle;
    }
    .activity-icon-pathwaygreen:before {
      background-image: url(/images/levels/activities/icon-sprite.png);
      background-size: 500%;
      width: 80px;
      height: 80px;
      background-position: 0% 0%;
      content: "";
      margin-right: 20px;
      display: inline-block;
      line-height: 80px;
      vertical-align: middle;
    }
    @media (max-width: 1499.98px) {
      .activity-icon-pathwaygreen:before {
        width: calc(80px - 20px);
        height: calc(80px - 20px);
      }
    }
    .activity-icon-challengeblue {
      line-height: 1;
      vertical-align: middle;
    }
    .activity-icon-challengeblue:before {
      background-image: url(/images/levels/activities/icon-sprite.png);
      background-size: 500%;
      width: 80px;
      height: 80px;
      background-position: 25% 0%;
      content: "";
      margin-right: 20px;
      display: inline-block;
      line-height: 80px;
      vertical-align: middle;
    }
    @media (max-width: 1499.98px) {
      .activity-icon-challengeblue:before {
        width: calc(80px - 20px);
        height: calc(80px - 20px);
      }
    }
    .activity-icon-challengegreen {
      line-height: 1;
      vertical-align: middle;
    }
    .activity-icon-challengegreen:before {
      background-image: url(/images/levels/activities/icon-sprite.png);
      background-size: 500%;
      width: 80px;
      height: 80px;
      background-position: 50% 0%;
      content: "";
      margin-right: 20px;
      display: inline-block;
      line-height: 80px;
      vertical-align: middle;
    }
    @media (max-width: 1499.98px) {
      .activity-icon-challengegreen:before {
        width: calc(80px - 20px);
        height: calc(80px - 20px);
      }
    }
    .activity-icon-challengered {
      line-height: 1;
      vertical-align: middle;
    }
    .activity-icon-challengered:before {
      background-image: url(/images/levels/activities/icon-sprite.png);
      background-size: 500%;
      width: 80px;
      height: 80px;
      background-position: 75% 0%;
      content: "";
      margin-right: 20px;
      display: inline-block;
      line-height: 80px;
      vertical-align: middle;
    }
    @media (max-width: 1499.98px) {
      .activity-icon-challengered:before {
        width: calc(80px - 20px);
        height: calc(80px - 20px);
      }
    }
    .activity-icon-pathwayred {
      line-height: 1;
      vertical-align: middle;
    }
    .activity-icon-pathwayred:before {
      background-image: url(/images/levels/activities/icon-sprite.png);
      background-size: 500%;
      width: 80px;
      height: 80px;
      background-position: 100% 0%;
      content: "";
      margin-right: 20px;
      display: inline-block;
      line-height: 80px;
      vertical-align: middle;
    }
    @media (max-width: 1499.98px) {
      .activity-icon-pathwayred:before {
        width: calc(80px - 20px);
        height: calc(80px - 20px);
      }
    }
    .activity-icon-challengeyellow {
      line-height: 1;
      vertical-align: middle;
    }
    .activity-icon-challengeyellow:before {
      background-image: url(/images/levels/activities/icon-sprite.png);
      background-size: 500%;
      width: 80px;
      height: 80px;
      background-position: 0% 33.3333333333%;
      content: "";
      margin-right: 20px;
      display: inline-block;
      line-height: 80px;
      vertical-align: middle;
    }
    @media (max-width: 1499.98px) {
      .activity-icon-challengeyellow:before {
        width: calc(80px - 20px);
        height: calc(80px - 20px);
      }
    }
    .activity-icon-dictionaryblue {
      line-height: 1;
      vertical-align: middle;
    }
    .activity-icon-dictionaryblue:before {
      background-image: url(/images/levels/activities/icon-sprite.png);
      background-size: 500%;
      width: 80px;
      height: 80px;
      background-position: 25% 33.3333333333%;
      content: "";
      margin-right: 20px;
      display: inline-block;
      line-height: 80px;
      vertical-align: middle;
    }
    @media (max-width: 1499.98px) {
      .activity-icon-dictionaryblue:before {
        width: calc(80px - 20px);
        height: calc(80px - 20px);
      }
    }
    .activity-icon-dictionarygreen {
      line-height: 1;
      vertical-align: middle;
    }
    .activity-icon-dictionarygreen:before {
      background-image: url(/images/levels/activities/icon-sprite.png);
      background-size: 500%;
      width: 80px;
      height: 80px;
      background-position: 50% 33.3333333333%;
      content: "";
      margin-right: 20px;
      display: inline-block;
      line-height: 80px;
      vertical-align: middle;
    }
    @media (max-width: 1499.98px) {
      .activity-icon-dictionarygreen:before {
        width: calc(80px - 20px);
        height: calc(80px - 20px);
      }
    }
    .activity-icon-dictionaryred {
      line-height: 1;
      vertical-align: middle;
    }
    .activity-icon-dictionaryred:before {
      background-image: url(/images/levels/activities/icon-sprite.png);
      background-size: 500%;
      width: 80px;
      height: 80px;
      background-position: 75% 33.3333333333%;
      content: "";
      margin-right: 20px;
      display: inline-block;
      line-height: 80px;
      vertical-align: middle;
    }
    @media (max-width: 1499.98px) {
      .activity-icon-dictionaryred:before {
        width: calc(80px - 20px);
        height: calc(80px - 20px);
      }
    }
    .activity-icon-pathwayyellow {
      line-height: 1;
      vertical-align: middle;
    }
    .activity-icon-pathwayyellow:before {
      background-image: url(/images/levels/activities/icon-sprite.png);
      background-size: 500%;
      width: 80px;
      height: 80px;
      background-position: 100% 33.3333333333%;
      content: "";
      margin-right: 20px;
      display: inline-block;
      line-height: 80px;
      vertical-align: middle;
    }
    @media (max-width: 1499.98px) {
      .activity-icon-pathwayyellow:before {
        width: calc(80px - 20px);
        height: calc(80px - 20px);
      }
    }
    .activity-icon-dictionaryyellow {
      line-height: 1;
      vertical-align: middle;
    }
    .activity-icon-dictionaryyellow:before {
      background-image: url(/images/levels/activities/icon-sprite.png);
      background-size: 500%;
      width: 80px;
      height: 80px;
      background-position: 0% 66.6666666667%;
      content: "";
      margin-right: 20px;
      display: inline-block;
      line-height: 80px;
      vertical-align: middle;
    }
    @media (max-width: 1499.98px) {
      .activity-icon-dictionaryyellow:before {
        width: calc(80px - 20px);
        height: calc(80px - 20px);
      }
    }
    .activity-icon-pathwaywhite {
      line-height: 1;
      vertical-align: middle;
    }
    .activity-icon-pathwaywhite:before {
      background-image: url(/images/levels/activities/icon-sprite.png);
      background-size: 500%;
      width: 80px;
      height: 80px;
      background-position: 25% 66.6666666667%;
      content: "";
      margin-right: 20px;
      display: inline-block;
      line-height: 80px;
      vertical-align: middle;
    }
    @media (max-width: 1499.98px) {
      .activity-icon-pathwaywhite:before {
        width: calc(80px - 20px);
        height: calc(80px - 20px);
      }
    }
    .activity-icon-lesson {
      line-height: 1;
      vertical-align: middle;
    }
    .activity-icon-lesson:before {
      background-image: url(/images/levels/activities/icon-sprite.png);
      background-size: 500%;
      width: 80px;
      height: 80px;
      background-position: 50% 66.6666666667%;
      content: "";
      margin-right: 20px;
      display: inline-block;
      line-height: 80px;
      vertical-align: middle;
    }
    @media (max-width: 1499.98px) {
      .activity-icon-lesson:before {
        width: calc(80px - 20px);
        height: calc(80px - 20px);
      }
    }
    .activity-icon-cardsblue {
      line-height: 1;
      vertical-align: middle;
    }
    .activity-icon-cardsblue:before {
      background-image: url(/images/levels/activities/icon-sprite.png);
      background-size: 500%;
      width: 80px;
      height: 80px;
      background-position: 75% 66.6666666667%;
      content: "";
      margin-right: 20px;
      display: inline-block;
      line-height: 80px;
      vertical-align: middle;
    }
    @media (max-width: 1499.98px) {
      .activity-icon-cardsblue:before {
        width: calc(80px - 20px);
        height: calc(80px - 20px);
      }
    }
    .activity-icon-Objective {
      line-height: 1;
      vertical-align: middle;
    }
    .activity-icon-Objective:before {
      background-image: url(/images/levels/activities/icon-sprite.png);
      background-size: 500%;
      width: 80px;
      height: 80px;
      background-position: 100% 100%;
      content: "";
      margin-right: 20px;
      display: inline-block;
      line-height: 80px;
      vertical-align: middle;
    }
    @media (max-width: 1499.98px) {
      .activity-icon-Objective:before {
        width: calc(80px - 20px);
        height: calc(80px - 20px);
      }
    }
    .activity-icon-cardsgreen {
      line-height: 1;
      vertical-align: middle;
    }
    .activity-icon-cardsgreen:before {
      background-image: url(/images/levels/activities/icon-sprite.png);
      background-size: 500%;
      width: 80px;
      height: 80px;
      background-position: 0% 100%;
      content: "";
      margin-right: 20px;
      display: inline-block;
      line-height: 80px;
      vertical-align: middle;
    }
    @media (max-width: 1499.98px) {
      .activity-icon-cardsgreen:before {
        width: calc(80px - 20px);
        height: calc(80px - 20px);
      }
    }
    .activity-icon-cardssorange {
      line-height: 1;
      vertical-align: middle;
    }
    .activity-icon-cardssorange:before {
      background-image: url(/images/levels/activities/icon-sprite.png);
      background-size: 500%;
      width: 80px;
      height: 80px;
      background-position: 25% 100%;
      content: "";
      margin-right: 20px;
      display: inline-block;
      line-height: 80px;
      vertical-align: middle;
    }
    @media (max-width: 1499.98px) {
      .activity-icon-cardssorange:before {
        width: calc(80px - 20px);
        height: calc(80px - 20px);
      }
    }
    .activity-icon-cardsyellow {
      line-height: 1;
      vertical-align: middle;
    }
    .activity-icon-cardsyellow:before {
      background-image: url(/images/levels/activities/icon-sprite.png);
      background-size: 500%;
      width: 80px;
      height: 80px;
      background-position: 50% 100%;
      content: "";
      margin-right: 20px;
      display: inline-block;
      line-height: 80px;
      vertical-align: middle;
    }
    @media (max-width: 1499.98px) {
      .activity-icon-cardsyellow:before {
        width: calc(80px - 20px);
        height: calc(80px - 20px);
      }
    }
    .activity-icon-pathwayblue {
      line-height: 1;
      vertical-align: middle;
    }
    .activity-icon-pathwayblue:before {
      background-image: url(/images/levels/activities/icon-sprite.png);
      background-size: 500%;
      width: 80px;
      height: 80px;
      background-position: 75% 100%;
      content: "";
      margin-right: 20px;
      display: inline-block;
      line-height: 80px;
      vertical-align: middle;
    }
    @media (max-width: 1499.98px) {
      .activity-icon-pathwayblue:before {
        width: calc(80px - 20px);
        height: calc(80px - 20px);
      }
    }
    .activity-icon-Lessonlg {
      line-height: 1;
      vertical-align: middle;
    }
    .activity-icon-Lessonlg:before {
      background-image: url(/images/levels/activities/icon-sprite.png);
      background-size: 500%;
      width: 80px;
      height: 80px;
      background-position: 100% 100%;
      content: "";
      margin-right: 20px;
      display: inline-block;
      line-height: 80px;
      vertical-align: middle;
    }
    @media (max-width: 1499.98px) {
      .activity-icon-Lessonlg:before {
        width: calc(80px - 20px);
        height: calc(80px - 20px);
      }
    }
    .nav.nav-tabs {
      border-bottom: none;
    }
    .nav.nav-tabs:after {
      content: "";
      height: 4px;
      width: 98%;
      background-image: linear-gradient(to right, #E3CE97 33%, rgba(255, 255, 255, 0) 0%);
      background-position: bottom;
      background-size: 12px 1px;
      background-repeat: repeat-x;
      margin: 0rem 0.4rem;
    }
    .no-border .nav.nav-tabs:after {
      content: none;
    }
    .nav.nav-tabs .nav-link {
      background-color: var(--tabs-default-link-color);
      color: var(--white-color);
      font-family: henderson-slab-basic, serif;
      border-radius: 50px;
      border: transparent;
      margin: 0.5rem;
      transition: all 200ms ease-in-out;
    }
    .nav.nav-tabs .nav-link:active, .nav.nav-tabs .nav-link.active {
      background-color: var(--tabs-default-active-color);
      color: var(--white-text-color);
    }
    .nav.nav-tabs .nav-link:active:hover, .nav.nav-tabs .nav-link.active:hover {
      background-color: var(--tabs-default-active-hover-color);
      color: var(--neutral-200);
    }
    .nav.nav-tabs .nav-link:hover {
      background-color: var(--tabs-default-link-color-hover);
      color: var(--neutral-200);
    }
    .hide-tabs .nav.nav-tabs {
      display: none;
    }
    .animated-tabs .nav {
      position: relative;
      display: flex;
      height: max-content;
      width: 55vw;
      background: var(--animated-tabs-background-color);
      box-shadow: 0 0 20px var(--box-shadow-color-2);
      line-height: normal;
      padding-top: 0.5em;
      padding-bottom: 0.5em;
      border-radius: 50px;
    }
    @media screen and (max-width: 1050px) {
      .animated-tabs .nav {
        width: 100%;
        align-items: center;
      }
    }
    .animated-tabs .nav.nav-tabs {
      border-bottom: none;
      margin-top: 0;
    }
    .animated-tabs .nav.nav-tabs:after {
      content: none;
    }
    .animated-tabs .nav .nav-item {
      flex: 1;
      width: 100%;
      z-index: 1;
      cursor: pointer;
    }
    .animated-tabs .nav a.nav-link, .animated-tabs .nav .nav-link {
      position: relative;
      z-index: 0;
      color: var(--black-text-color);
      font-size: 20px;
      font-weight: 700;
      font-family: "tgn-soft-round-comp", sans-serif;
      text-decoration: none;
      transition: color 0.6s ease;
      background-color: transparent;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 0;
      margin: 0;
      text-align: center;
      border: none;
    }
    .animated-tabs .nav a.nav-link:hover, .animated-tabs .nav .nav-link:hover {
      background-color: transparent;
      border: none;
      color: var(--black-text-color);
    }
    .animated-tabs .nav a.nav-link.active, .animated-tabs .nav a.nav-link:active, .animated-tabs .nav .nav-link.active, .animated-tabs .nav .nav-link:active {
      background-color: transparent;
      border: none;
      color: inherit;
    }
    .animated-tabs .nav a.nav-link.active:hover, .animated-tabs .nav a.nav-link:active:hover, .animated-tabs .nav .nav-link.active:hover, .animated-tabs .nav .nav-link:active:hover {
      background-color: transparent;
      border: none;
      color: var(--black-text-color);
    }
    .animated-tabs .nav .tab-highlighter {
      position: absolute;
      height: 100%;
      width: 20%;
      left: 0;
      bottom: 0;
      z-index: 0;
      border-radius: 50px;
      background: var(--animated-tabs-active-color);
      transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
    .animated-tabs.tabs-1 .nav .tab-highlighter {
      width: 100%;
    }
    .animated-tabs.tabs-1 .nav .nav-item.active:first-of-type ~ .tab-highlighter {
      left: 0%;
    }
    .animated-tabs.tabs-2 .nav .tab-highlighter {
      width: 50%;
    }
    .animated-tabs.tabs-2 .nav .nav-item.active:first-of-type ~ .tab-highlighter {
      left: 0%;
    }
    .animated-tabs.tabs-2 .nav .nav-item.active:nth-of-type(2) ~ .tab-highlighter {
      left: 50%;
    }
    .animated-tabs.tabs-3 .nav .tab-highlighter {
      width: 33.3333333333%;
    }
    .animated-tabs.tabs-3 .nav .nav-item.active:first-of-type ~ .tab-highlighter {
      left: 0%;
    }
    .animated-tabs.tabs-3 .nav .nav-item.active:nth-of-type(2) ~ .tab-highlighter {
      left: 33.3333333333%;
    }
    .animated-tabs.tabs-3 .nav .nav-item.active:nth-of-type(3) ~ .tab-highlighter {
      left: 66.6666666667%;
    }
    .animated-tabs.tabs-4 .nav .tab-highlighter {
      width: 25%;
    }
    .animated-tabs.tabs-4 .nav .nav-item.active:first-of-type ~ .tab-highlighter {
      left: 0%;
    }
    .animated-tabs.tabs-4 .nav .nav-item.active:nth-of-type(2) ~ .tab-highlighter {
      left: 25%;
    }
    .animated-tabs.tabs-4 .nav .nav-item.active:nth-of-type(3) ~ .tab-highlighter {
      left: 50%;
    }
    .animated-tabs.tabs-4 .nav .nav-item.active:nth-of-type(4) ~ .tab-highlighter {
      left: 75%;
    }
    .animated-tabs.tabs-5 .nav .tab-highlighter {
      width: 20%;
    }
    .animated-tabs.tabs-5 .nav .nav-item.active:first-of-type ~ .tab-highlighter {
      left: 0%;
    }
    .animated-tabs.tabs-5 .nav .nav-item.active:nth-of-type(2) ~ .tab-highlighter {
      left: 20%;
    }
    .animated-tabs.tabs-5 .nav .nav-item.active:nth-of-type(3) ~ .tab-highlighter {
      left: 40%;
    }
    .animated-tabs.tabs-5 .nav .nav-item.active:nth-of-type(4) ~ .tab-highlighter {
      left: 60%;
    }
    .animated-tabs.tabs-5 .nav .nav-item.active:nth-of-type(5) ~ .tab-highlighter {
      left: 80%;
    }
    .animated-tabs.tabs-6 .nav .tab-highlighter {
      width: 16.6666666667%;
    }
    .animated-tabs.tabs-6 .nav .nav-item.active:first-of-type ~ .tab-highlighter {
      left: 0%;
    }
    .animated-tabs.tabs-6 .nav .nav-item.active:nth-of-type(2) ~ .tab-highlighter {
      left: 16.6666666667%;
    }
    .animated-tabs.tabs-6 .nav .nav-item.active:nth-of-type(3) ~ .tab-highlighter {
      left: 33.3333333333%;
    }
    .animated-tabs.tabs-6 .nav .nav-item.active:nth-of-type(4) ~ .tab-highlighter {
      left: 50%;
    }
    .animated-tabs.tabs-6 .nav .nav-item.active:nth-of-type(5) ~ .tab-highlighter {
      left: 66.6666666667%;
    }
    .animated-tabs.tabs-6 .nav .nav-item.active:nth-of-type(6) ~ .tab-highlighter {
      left: 83.3333333333%;
    }
    .animated-tabs.tabs-7 .nav .tab-highlighter {
      width: 14.2857142857%;
    }
    .animated-tabs.tabs-7 .nav .nav-item.active:first-of-type ~ .tab-highlighter {
      left: 0%;
    }
    .animated-tabs.tabs-7 .nav .nav-item.active:nth-of-type(2) ~ .tab-highlighter {
      left: 14.2857142857%;
    }
    .animated-tabs.tabs-7 .nav .nav-item.active:nth-of-type(3) ~ .tab-highlighter {
      left: 28.5714285714%;
    }
    .animated-tabs.tabs-7 .nav .nav-item.active:nth-of-type(4) ~ .tab-highlighter {
      left: 42.8571428571%;
    }
    .animated-tabs.tabs-7 .nav .nav-item.active:nth-of-type(5) ~ .tab-highlighter {
      left: 57.1428571429%;
    }
    .animated-tabs.tabs-7 .nav .nav-item.active:nth-of-type(6) ~ .tab-highlighter {
      left: 71.4285714286%;
    }
    .animated-tabs.tabs-7 .nav .nav-item.active:nth-of-type(7) ~ .tab-highlighter {
      left: 85.7142857143%;
    }
    .animated-tabs.tabs-8 .nav .tab-highlighter {
      width: 12.5%;
    }
    .animated-tabs.tabs-8 .nav .nav-item.active:first-of-type ~ .tab-highlighter {
      left: 0%;
    }
    .animated-tabs.tabs-8 .nav .nav-item.active:nth-of-type(2) ~ .tab-highlighter {
      left: 12.5%;
    }
    .animated-tabs.tabs-8 .nav .nav-item.active:nth-of-type(3) ~ .tab-highlighter {
      left: 25%;
    }
    .animated-tabs.tabs-8 .nav .nav-item.active:nth-of-type(4) ~ .tab-highlighter {
      left: 37.5%;
    }
    .animated-tabs.tabs-8 .nav .nav-item.active:nth-of-type(5) ~ .tab-highlighter {
      left: 50%;
    }
    .animated-tabs.tabs-8 .nav .nav-item.active:nth-of-type(6) ~ .tab-highlighter {
      left: 62.5%;
    }
    .animated-tabs.tabs-8 .nav .nav-item.active:nth-of-type(7) ~ .tab-highlighter {
      left: 75%;
    }
    .animated-tabs.tabs-8 .nav .nav-item.active:nth-of-type(8) ~ .tab-highlighter {
      left: 87.5%;
    }
    .animated-tabs.tabs-9 .nav .tab-highlighter {
      width: 11.1111111111%;
    }
    .animated-tabs.tabs-9 .nav .nav-item.active:first-of-type ~ .tab-highlighter {
      left: 0%;
    }
    .animated-tabs.tabs-9 .nav .nav-item.active:nth-of-type(2) ~ .tab-highlighter {
      left: 11.1111111111%;
    }
    .animated-tabs.tabs-9 .nav .nav-item.active:nth-of-type(3) ~ .tab-highlighter {
      left: 22.2222222222%;
    }
    .animated-tabs.tabs-9 .nav .nav-item.active:nth-of-type(4) ~ .tab-highlighter {
      left: 33.3333333333%;
    }
    .animated-tabs.tabs-9 .nav .nav-item.active:nth-of-type(5) ~ .tab-highlighter {
      left: 44.4444444444%;
    }
    .animated-tabs.tabs-9 .nav .nav-item.active:nth-of-type(6) ~ .tab-highlighter {
      left: 55.5555555556%;
    }
    .animated-tabs.tabs-9 .nav .nav-item.active:nth-of-type(7) ~ .tab-highlighter {
      left: 66.6666666667%;
    }
    .animated-tabs.tabs-9 .nav .nav-item.active:nth-of-type(8) ~ .tab-highlighter {
      left: 77.7777777778%;
    }
    .animated-tabs.tabs-9 .nav .nav-item.active:nth-of-type(9) ~ .tab-highlighter {
      left: 88.8888888889%;
    }
    .animated-tabs.tabs-10 .nav .tab-highlighter {
      width: 10%;
    }
    .animated-tabs.tabs-10 .nav .nav-item.active:first-of-type ~ .tab-highlighter {
      left: 0%;
    }
    .animated-tabs.tabs-10 .nav .nav-item.active:nth-of-type(2) ~ .tab-highlighter {
      left: 10%;
    }
    .animated-tabs.tabs-10 .nav .nav-item.active:nth-of-type(3) ~ .tab-highlighter {
      left: 20%;
    }
    .animated-tabs.tabs-10 .nav .nav-item.active:nth-of-type(4) ~ .tab-highlighter {
      left: 30%;
    }
    .animated-tabs.tabs-10 .nav .nav-item.active:nth-of-type(5) ~ .tab-highlighter {
      left: 40%;
    }
    .animated-tabs.tabs-10 .nav .nav-item.active:nth-of-type(6) ~ .tab-highlighter {
      left: 50%;
    }
    .animated-tabs.tabs-10 .nav .nav-item.active:nth-of-type(7) ~ .tab-highlighter {
      left: 60%;
    }
    .animated-tabs.tabs-10 .nav .nav-item.active:nth-of-type(8) ~ .tab-highlighter {
      left: 70%;
    }
    .animated-tabs.tabs-10 .nav .nav-item.active:nth-of-type(9) ~ .tab-highlighter {
      left: 80%;
    }
    .animated-tabs.tabs-10 .nav .nav-item.active:nth-of-type(10) ~ .tab-highlighter {
      left: 90%;
    }
    .animated-tabs.dark-tabs .nav {
      background-color: var(--core-color-dark);
    }
    .animated-tabs.dark-tabs .tab-highlighter {
      border: 2px solid var(--black-text-color);
    }
    .nested-tabs .nav.nav-tabs {
      width: 55vw;
    }
    @media screen and (max-width: 1050px) {
      .nested-tabs .nav.nav-tabs {
        width: 100%;
        align-items: center;
      }
    }
    .nested-tabs .nav {
      background-color: inherit;
      box-shadow: inherit;
      border-bottom: none;
      margin-bottom: 10px;
    }
    .nested-tabs .nav .tab-highlighter {
      display: none;
    }
    .nested-tabs .nav .nav-item {
      flex: 1;
      width: 100%;
    }
    .nested-tabs .nav .nav-link {
      background-color: var(--tabs-default-link-color);
      color: var(--white-text-color);
      border-radius: 50px;
      border: transparent;
      margin: 0.5rem;
      padding: 0.2rem;
      transition: all 200ms ease-in-out;
      font-family: "tgn-soft-round-comp", sans-serif;
      text-align: center;
    }
    .nested-tabs .nav .nav-link:active, .nested-tabs .nav .nav-link.active {
      background-color: var(--tabs-default-active-color);
      color: var(--light-text-color);
    }
    .nested-tabs .nav .nav-link:active:hover, .nested-tabs .nav .nav-link.active:hover {
      background-color: var(--tabs-default-active-hover-color);
      color: var(--white-text-color);
    }
    .nested-tabs .nav .nav-link:hover {
      background-color: var(--tabs-default-link-color);
      color: var(--white-text-color);
    }
    .nested-tabs .nav .tab-highlighter {
      display: none;
    }
    .nested-tabs .nav:after {
      display: none;
    }
    .hide-tabs .nested-tabs .nav {
      display: none;
    }
    .vertical-tabs {
      display: flex;
      background-color: var(--vertical-tabs-container-background-color);
      border-radius: 1.8rem;
      margin-bottom: 2vh;
    }
    .vertical-tabs .nav {
      display: flex;
      flex-direction: column;
      background-color: var(--vertical-tabs-nav-background-color);
    }
    .vertical-tabs .nav-tabs, .vertical-tabs .nav.nav-tabs {
      border-bottom: none;
      margin-top: 0px;
    }
    .vertical-tabs .nav-tabs:after, .vertical-tabs .nav.nav-tabs:after {
      content: none;
    }
    .vertical-tabs .nav-tabs .nav-item, .vertical-tabs .nav.nav-tabs .nav-item {
      cursor: pointer;
    }
    .vertical-tabs .nav-tabs .nav-link, .vertical-tabs .nav.nav-tabs .nav-link {
      background-color: var(--vertical-tabs-nav-background-color);
      transition: all 0.2s ease-in-out;
      border-top-left-radius: 1.8rem;
      border-bottom-left-radius: 1.8rem;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
      border: 2px dashed transparent;
      padding-left: 50px;
      margin: 0;
    }
    .vertical-tabs .nav-tabs .nav-link:hover, .vertical-tabs .nav.nav-tabs .nav-link:hover {
      border-top-left-radius: 1.8rem;
      border-bottom-left-radius: 1.8rem;
      border: 2px dashed var(--vertical-tabs-tab-hover-border-color);
      border-right: 2px dashed transparent;
    }
    .vertical-tabs .nav-tabs .nav-link.active, .vertical-tabs .nav.nav-tabs .nav-link.active {
      background-color: var(--vertical-tabs-active-tab-color);
      border-color: transparent;
      color: var(--vertical-tabs-active-tab-text-color);
      border-top-left-radius: 1.8rem;
      border-bottom-left-radius: 1.8rem;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
      margin: 0;
    }
    .vertical-tabs .nav-item {
      color: var(--light-text-color);
      padding-right: 0px;
      border-top-left-radius: 1.8rem;
      border-bottom-left-radius: 1.8rem;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
      margin-left: 0.5rem;
    }
    .vertical-tabs .breadcrumb {
      padding: 0.5rem 2rem;
      background-color: var(--neutral-300);
      border-radius: 1.8rem;
      font-family: henderson-slab-basic, serif;
    }
    .vertical-tabs .breadcrumb .breadcrumb-item {
      font-family: henderson-slab-basic, serif;
    }
    .vertical-tabs .breadcrumb .breadcrumb-item:before {
      color: var(--dark-color);
      font-family: henderson-slab-basic, serif;
    }
    .vertical-tabs .breadcrumb .breadcrumb-item.active {
      color: var(--dark-color);
    }
    .vertical-tabs .breadcrumb .breadcrumb-item a {
      font-family: henderson-slab-basic, serif;
      font-size: 1rem;
    }
    .color-picker-container {
      width: 275px;
      height: auto;
      position: absolute;
      background-color: var(--white-color);
      border-radius: 1.8rem;
      border: 3px solid var(--warning-color);
      border-right: 8px solid var(--warning-color);
      border-bottom: 7px solid var(--warning-color);
      padding: 1rem;
      z-index: 3;
      box-shadow: 0 0 0 1px rgba(64, 87, 109, 0.07), 0 2px 12px rgba(53, 71, 90, 0.2);
      transform: translate3d(0px, 10px, 0px);
      will-change: transform;
      transition: all 150ms ease-in-out 0s;
    }
    .hide .color-picker-container {
      display: none;
      opacity: 0;
    }
    .show .color-picker-container {
      opacity: 1;
      transform: translate3d(0px, 0px, 0px);
    }
    .color-picker-container .color-body {
      display: flex;
      flex-wrap: wrap;
    }
    .color-picker-container .swatch {
      margin: 0.25rem;
      padding: 0.25rem;
      height: 50px;
      width: 50px;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
      transform: scale(1);
    }
    .color-picker-container .swatch:hover {
      transform: scale(0.925);
    }
    .color-picker-container .swatchPreview {
      width: 40px;
      height: 40px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px;
    }
    .color-palette-picker-container .swatch-display {
      width: 40px;
      height: 40px;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px;
    }
    .tooltip-container .tooltip-bottom-left::after, .tooltip-container .tooltip-bottom-right::after, .tooltip-container .tooltip-top-left::after, .tooltip-container .tooltip-top-right::after, .tooltip-container .tooltip-bottom::after, .tooltip-container .tooltip-top::after, .tooltip-container .tooltip-right::after, .tooltip-container .tooltip-left::after {
      content: " ";
      position: absolute;
      border-width: 5px;
      border-style: solid;
    }
    .tooltip-container {
      position: relative;
      display: inline-block;
      z-index: 3;
    }
    .tooltip-container.tooltip-dotted {
      border-bottom: 1px dotted var(--dark-text-color);
    }
    .tooltip-container .tooltip, .tooltip-container .tooltip-bottom-left, .tooltip-container .tooltip-bottom-right, .tooltip-container .tooltip-top-left, .tooltip-container .tooltip-top-right, .tooltip-container .tooltip-bottom, .tooltip-container .tooltip-top, .tooltip-container .tooltip-right, .tooltip-container .tooltip-left {
      visibility: hidden;
      background-color: var(--light-background-color);
      color: var(--body-font-color);
      text-align: center;
      border-radius: 6px;
      font-family: "tgn-soft-round-comp", sans-serif;
      font-size: 115%;
      position: absolute;
      width: auto;
      padding: 0.6rem 0.9rem;
      opacity: 0;
      transition: opacity 0.3s;
    }
    .tooltip-container .tooltip.tooltip-dark, .tooltip-container .tooltip-dark.tooltip-bottom-left, .tooltip-container .tooltip-dark.tooltip-bottom-right, .tooltip-container .tooltip-dark.tooltip-top-left, .tooltip-container .tooltip-dark.tooltip-top-right, .tooltip-container .tooltip-dark.tooltip-bottom, .tooltip-container .tooltip-dark.tooltip-top, .tooltip-container .tooltip-dark.tooltip-right, .tooltip-container .tooltip-dark.tooltip-left {
      background-color: var(--core-color);
      color: var(--light-text-color);
    }
    .tooltip-container .tooltip.tooltip-dark.tooltip-bordered, .tooltip-container .tooltip-dark.tooltip-bordered.tooltip-bottom-left, .tooltip-container .tooltip-dark.tooltip-bordered.tooltip-bottom-right, .tooltip-container .tooltip-dark.tooltip-bordered.tooltip-top-left, .tooltip-container .tooltip-dark.tooltip-bordered.tooltip-top-right, .tooltip-container .tooltip-dark.tooltip-bordered.tooltip-bottom, .tooltip-container .tooltip-dark.tooltip-bordered.tooltip-top, .tooltip-container .tooltip-dark.tooltip-bordered.tooltip-right, .tooltip-container .tooltip-dark.tooltip-bordered.tooltip-left {
      border: 2px dashed var(--light-text-color);
    }
    .tooltip-container .tooltip.tooltip-bordered, .tooltip-container .tooltip-bordered.tooltip-bottom-left, .tooltip-container .tooltip-bordered.tooltip-bottom-right, .tooltip-container .tooltip-bordered.tooltip-top-left, .tooltip-container .tooltip-bordered.tooltip-top-right, .tooltip-container .tooltip-bordered.tooltip-bottom, .tooltip-container .tooltip-bordered.tooltip-top, .tooltip-container .tooltip-bordered.tooltip-right, .tooltip-container .tooltip-bordered.tooltip-left {
      border: 2px dashed var(--core-color);
    }
    .tooltip-container .tooltip-left {
      top: -5px;
      right: 115%;
    }
    .tooltip-container .tooltip-left::after {
      top: 10%;
      left: 100%;
      margin-top: -5px;
      border-color: transparent transparent transparent var(--light-background-color);
    }
    .tooltip-container .tooltip-left.tooltip-dark::after {
      border-color: transparent transparent transparent var(--core-color);
    }
    .tooltip-container .tooltip-right {
      top: -5px;
      left: 115%;
    }
    .tooltip-container .tooltip-right::after {
      top: 10%;
      right: 100%;
      margin-top: -5px;
      border-color: transparent var(--light-background-color) transparent transparent;
    }
    .tooltip-container .tooltip-right.tooltip-dark::after {
      border-color: transparent var(--core-color) transparent transparent;
    }
    .tooltip-container .tooltip-top {
      bottom: 125%;
      left: 50%;
      margin-left: -60px;
    }
    .tooltip-container .tooltip-top::after {
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-color: var(--light-background-color) transparent transparent transparent;
    }
    .tooltip-container .tooltip-top.tooltip-dark::after {
      border-color: var(--core-color) transparent transparent transparent;
    }
    .tooltip-container .tooltip-bottom {
      top: 135%;
      left: 50%;
      margin-left: -60px;
    }
    .tooltip-container .tooltip-bottom::after {
      bottom: 100%;
      left: 50%;
      margin-left: -5px;
      border-color: transparent transparent var(--light-background-color) transparent;
    }
    .tooltip-container .tooltip-bottom.tooltip-dark::after {
      border-color: transparent transparent var(--core-color) transparent;
    }
    .tooltip-container .tooltip-top-right {
      bottom: 105%;
      left: 145%;
      margin-left: -60px;
    }
    .tooltip-container .tooltip-top-right::after {
      top: 100%;
      left: 7%;
      border-width: 6px;
      margin-top: -1px;
      border-color: var(--light-background-color) transparent transparent transparent;
    }
    .tooltip-container .tooltip-top-right.tooltip-dark::after {
      border-color: var(--core-color) transparent transparent transparent;
    }
    .tooltip-container .tooltip-top-left {
      bottom: 105%;
      right: 145%;
      margin-right: -60px;
    }
    .tooltip-container .tooltip-top-left::after {
      top: 100%;
      right: 7%;
      border-width: 6px;
      margin-top: -1px;
      border-color: var(--light-background-color) transparent transparent transparent;
    }
    .tooltip-container .tooltip-top-left.tooltip-dark::after {
      border-color: var(--core-color) transparent transparent transparent;
    }
    .tooltip-container .tooltip-bottom-right {
      top: 100%;
      left: 145%;
      margin-left: -60px;
    }
    .tooltip-container .tooltip-bottom-right::after {
      bottom: 100%;
      left: 12%;
      margin-left: -5px;
      border-color: transparent transparent var(--light-background-color) transparent;
    }
    .tooltip-container .tooltip-bottom-right.tooltip-dark::after {
      border-color: transparent transparent var(--core-color) transparent;
    }
    .tooltip-container .tooltip-bottom-left {
      top: 100%;
      right: 145%;
      margin-right: -60px;
    }
    .tooltip-container .tooltip-bottom-left::after {
      bottom: 100%;
      right: 12%;
      margin-right: -5px;
      border-color: transparent transparent var(--light-background-color) transparent;
    }
    .tooltip-container .tooltip-bottom-left.tooltip-dark::after {
      border-color: transparent transparent var(--core-color) transparent;
    }
    .tooltip-container:hover .tooltip, .tooltip-container:hover .tooltip-left, .tooltip-container:hover .tooltip-right, .tooltip-container:hover .tooltip-top, .tooltip-container:hover .tooltip-bottom, .tooltip-container:hover .tooltip-top-right, .tooltip-container:hover .tooltip-top-left, .tooltip-container:hover .tooltip-bottom-right, .tooltip-container:hover .tooltip-bottom-left {
      visibility: visible;
      opacity: 1;
    }
    .chart-tooltip {
      width: 100%;
      border: none;
      background-color: var(--chart-tooltip-background-color);
      box-shadow: 0px 8px 29px -6px rgba(97, 72, 10, 0.16), 0px 1px 5px rgba(97, 72, 10, 0.12), 0px 0px 6px rgba(97, 72, 10, 0.16);
      padding: 10px;
      border-radius: 0.6rem;
      min-width: 175px;
      margin-left: 10px;
    }
    .chart-tooltip-inner {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .chart-tooltip-header {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
    }
    .chart-tooltip-body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0px;
    }
    .chart-minimal path[id$=AxisLine_0] {
      stroke: transparent;
    }
    .chart-minimal path[id$=AxisLine_1] {
      stroke: #eaf1d7;
    }
    .chart-minimal ellipse[id$=_Symbol] {
      stroke: var(--neutral-100);
      fill: #50794A;
    }
    .chart-minimal ellipse[id$=_Symbol1] {
      stroke: var(--neutral-100);
      fill: #B59A46;
    }
    .chart-minimal ellipse[id$=Trackball_0] {
      stroke: rgba(80, 121, 74, 0.2117647059);
    }
    .chart-minimal ellipse[id$=Trackball_1] {
      stroke: var(--chart-trackball-color);
    }
    .toggle-switch-container {
      display: flex;
      align-content: center;
      flex-wrap: wrap;
    }
    .toggle-switch-container input {
      display: none;
    }
    .toggle-switch-container .slider {
      position: relative;
      display: inline-block;
      background-color: #cfc2a2;
      -webkit-transition: 0.4s;
      transition: 0.4s;
      height: 24px;
      width: 48px;
      cursor: pointer;
    }
    .toggle-switch-container .slider.toggle-disabled {
      background-color: #b4b5b5;
    }
    .toggle-switch-container .slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      bottom: 3px;
      left: 4px;
      background-color: white;
      -webkit-transition: 0.4s;
      transition: 0.4s;
    }
    .toggle-switch-container input:checked + .slider {
      background-color: var(--dark-color);
    }
    .toggle-switch-container input:checked + .slider.toggle-disabled {
      background-color: #b4b5b5;
    }
    .toggle-switch-container input:focus + .slider {
      box-shadow: 0 0 10px var(--dark-color);
    }
    .toggle-switch-container input:hover + .slider:before {
      box-shadow: 0 0 20px var(--dark-color);
    }
    .toggle-switch-container input:checked + .slider:before {
      -webkit-transform: translateX(22px);
      -ms-transform: translateX(22px);
      transform: translateX(22px);
    }
    .toggle-switch-container input .slider.round {
      border-radius: 40px;
    }
    .toggle-switch-container input .slider.round:before {
      border-radius: 50%;
    }
    .floating-menu-container {
      position: fixed;
      z-index: 3;
      top: 2vh;
      right: 0;
      padding: 0.2rem;
      display: flex;
      flex-direction: column;
    }
    .floating-menu-container .floating-menu {
      background-color: var(--light-background-color-lighter);
      position: absolute;
      padding: 1rem;
      top: 54px;
      right: 100%;
      width: 0px;
      display: block;
      transition: all 0.3s ease;
    }
    .floating-menu-container .floating-menu.menu-open {
      margin: 5px;
      opacity: 1;
      transform: scale(1);
      transform-origin: top right;
      width: 300px;
      display: block;
      transition: all 0.3s ease;
    }
    .floating-menu-container .floating-menu.menu-closed {
      transform: scale(0);
      transform-origin: top right;
      opacity: 0;
      display: block;
      transition: all 0.3s ease;
    }
    .floating-menu-container span {
      padding: 8px 8px 8px 32px;
      color: var(--secondary-color);
      display: block;
      transition: 0.3s;
      text-align: center;
    }
    .floating-menu-container span:hover {
      color: var(--light-background-color-lighter);
    }
    .floating-menu-container .open-close-button {
      cursor: pointer;
      color: var(--info-color);
      padding: 2px 0px;
      margin-right: 1vw;
      border: none;
    }
    .blazored-toast {
      display: flex;
      flex-direction: row;
      animation: fadein 1.5s;
      margin-bottom: 1rem;
      padding: 0.8rem 1rem;
      color: var(--toast-default-text-color);
      width: 100vw;
      box-shadow: rgba(0, 0, 0, 0.25) 0px 10px 40px;
    }
    .blazored-toast h1, .blazored-toast h2, .blazored-toast h3, .blazored-toast h4, .blazored-toast h5, .blazored-toast h6, .blazored-toast p, .blazored-toast label, .blazored-toast i, .blazored-toast .blazored-toast-icon {
      color: var(--toast-default-text-color);
    }
    @media (min-width: 576px) {
      .blazored-toast {
        width: 30rem;
        border-radius: 0.25rem;
      }
    }
    .blazored-toast.blazored-toast-info {
      background-color: var(--toast-info-background-color);
    }
    .blazored-toast.blazored-toast-info h1, .blazored-toast.blazored-toast-info h2, .blazored-toast.blazored-toast-info h3, .blazored-toast.blazored-toast-info h4, .blazored-toast.blazored-toast-info h5, .blazored-toast.blazored-toast-info h6, .blazored-toast.blazored-toast-info p, .blazored-toast.blazored-toast-info label, .blazored-toast.blazored-toast-info i {
      color: var(--toast-info-text-color);
    }
    .blazored-toast.blazored-toast-info .blazored-toast-icon {
      color: var(--toast-info-text-color);
    }
    .blazored-toast.blazored-toast-success {
      background-color: var(--toast-success-background-color);
    }
    .blazored-toast.blazored-toast-success h1, .blazored-toast.blazored-toast-success h2, .blazored-toast.blazored-toast-success h3, .blazored-toast.blazored-toast-success h4, .blazored-toast.blazored-toast-success h5, .blazored-toast.blazored-toast-success h6, .blazored-toast.blazored-toast-success p, .blazored-toast.blazored-toast-success label, .blazored-toast.blazored-toast-success i {
      color: var(--toast-success-text-color);
    }
    .blazored-toast.blazored-toast-success .blazored-toast-icon {
      color: var(--toast-success-text-color);
    }
    .blazored-toast.blazored-toast-warning {
      background-color: var(--toast-warning-background-color);
    }
    .blazored-toast.blazored-toast-warning h1, .blazored-toast.blazored-toast-warning h2, .blazored-toast.blazored-toast-warning h3, .blazored-toast.blazored-toast-warning h4, .blazored-toast.blazored-toast-warning h5, .blazored-toast.blazored-toast-warning h6, .blazored-toast.blazored-toast-warning p, .blazored-toast.blazored-toast-warning label, .blazored-toast.blazored-toast-warning i {
      color: var(--toast-warning-text-color);
    }
    .blazored-toast.blazored-toast-warning .blazored-toast-icon {
      color: var(--toast-warning-text-color);
    }
    .blazored-toast.blazored-toast-error {
      background-color: var(--toast-danger-background-color);
    }
    .blazored-toast.blazored-toast-error h1, .blazored-toast.blazored-toast-error h2, .blazored-toast.blazored-toast-error h3, .blazored-toast.blazored-toast-error h4, .blazored-toast.blazored-toast-error h5, .blazored-toast.blazored-toast-error h6, .blazored-toast.blazored-toast-error p, .blazored-toast.blazored-toast-error label, .blazored-toast.blazored-toast-error i {
      color: var(--toast-danger-text-color);
    }
    .blazored-toast.blazored-toast-error p {
      color: var(--toast-danger-text-color);
    }
    .blazored-toast.blazored-toast-error .blazored-toast-icon {
      color: var(--toast-danger-text-color);
    }
    .blazored-toast .blazored-toast-icon {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 1rem 0 0;
      font-size: 2.5rem;
    }
    .blazored-toast .blazored-toast-body {
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    .blazored-toast .blazored-toast-body .blazored-toast-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
    }
    .blazored-toast .blazored-toast-body .blazored-toast-header h1, .blazored-toast .blazored-toast-body .blazored-toast-header h2, .blazored-toast .blazored-toast-body .blazored-toast-header h3, .blazored-toast .blazored-toast-body .blazored-toast-header h4, .blazored-toast .blazored-toast-body .blazored-toast-header h5, .blazored-toast .blazored-toast-body .blazored-toast-header h6, .blazored-toast .blazored-toast-body .blazored-toast-header p, .blazored-toast .blazored-toast-body .blazored-toast-header label, .blazored-toast .blazored-toast-body .blazored-toast-header i {
      font-weight: bold;
      text-transform: uppercase;
      font-size: 1.3rem;
      margin-bottom: 0;
      line-height: 32px;
    }
    .blazored-toast .blazored-toast-body .blazored-toast-header .blazored-toast-close {
      background-color: transparent;
      border: 0;
      -webkit-appearance: none;
      color: inherit;
      font-size: 1.25rem;
    }
    .blazored-toast .blazored-toast-body p {
      margin-bottom: 0;
      font-size: 1.6rem;
    }
    .blazored-toast-container {
      display: flex;
      flex-direction: column;
      position: fixed;
      z-index: 6;
    }
    .blazored-toast-container.position-topleft, .blazored-toast-container.position-topright, .blazored-toast-container.position-topcenter {
      top: 0;
    }
    .blazored-toast-container.position-bottomleft, .blazored-toast-container.position-bottomright, .blazored-toast-container.position-bottomcenter {
      bottom: 0;
    }
    @media (min-width: 576px) {
      .blazored-toast-container.position-topleft {
        top: 2rem;
        left: 2rem;
      }
      .blazored-toast-container.position-topright {
        top: 2rem;
        right: 2rem;
      }
      .blazored-toast-container.position-topcenter {
        top: 2rem;
        left: 50%;
        margin-left: -15rem;
      }
      .blazored-toast-container.position-bottomleft {
        bottom: 2rem;
        left: 2rem;
      }
      .blazored-toast-container.position-bottomright {
        bottom: 2rem;
        right: 2rem;
      }
      .blazored-toast-container.position-bottomcenter {
        bottom: 2rem;
        left: 50%;
        margin-left: -15rem;
      }
    }
    .date-picker .date-picker-display {
      align-items: center;
      display: flex;
      max-width: 460px;
      margin-bottom: 5px;
    }
    .date-picker .date-picker-display .date-input {
      margin: 0;
    }
    .date-picker .date-picker-body {
      position: absolute;
      overflow: auto;
      background-color: var(--light-background-color-lighter);
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 3;
      border: 1px solid var(--light-background-color-darker);
      border-radius: 1rem;
    }
    .date-picker .date-picker-body .row {
      margin-right: 0;
      margin-left: 0;
    }
    .date-picker .date-picker-body .left-panel {
      float: left;
      margin-top: 10px;
    }
    .date-picker .date-picker-body .left-panel button.left-navigate {
      left: 8px;
      top: -2px;
      position: relative;
    }
    .date-picker .date-picker-body .left-panel label.left-month-text {
      position: relative;
      left: 35px;
      top: 4px;
      font-size: 1rem;
    }
    .date-picker .date-picker-body .right-panel {
      margin-top: 10px;
    }
    .date-picker .date-picker-body .right-panel button.right-navigate {
      top: -2px;
      position: relative;
      margin: 0 8px 0 27px;
    }
    .date-picker .date-picker-body .right-panel label.right-month-text {
      position: relative;
      top: 4px;
      font-size: 1rem;
    }
    .date-picker .date-picker-body table {
      width: 210px;
      font-size: 11px;
      margin: 0 10px 0 10px;
      min-width: 0;
      text-align: center;
    }
    .date-picker .date-picker-body table thead th {
      font-size: 0.6rem;
      padding-left: 12px;
      padding-top: 12px;
      padding-right: 12px;
      padding-bottom: 12px;
      letter-spacing: normal;
      background-color: var(--core-color);
      color: var(--white-color);
    }
    .date-picker .date-picker-body table thead th tr {
      background-color: var(--core-color);
      color: var(--white-color);
    }
    .date-picker .date-picker-body table tbody tr {
      height: 2rem;
      padding: 0;
      line-height: 0;
    }
    .date-picker .date-picker-body table tbody tr td {
      padding: 0;
      font-size: 0.8rem;
    }
    .date-picker .date-picker-body .date-picker-cell {
      cursor: pointer;
      font-weight: normal;
    }
    .date-picker .date-picker-body .date-picker-cell:hover {
      background-color: var(--success-color);
      transition-duration: 200ms;
      color: var(--light-background-color);
    }
    .date-picker .date-picker-body .date-picker-cell.active {
      background-color: var(--success-color);
      color: var(--white-text-color);
    }
    .date-picker .date-picker-body .date-picker-cell.disabled {
      color: var(--disabled-color);
    }
    .date-picker .date-picker-body .date-picker-cell.disabled:hover {
      background-color: inherit;
    }
    .date-picker .date-picker-body .date-picker-cell.selected {
      background-color: var(--accent-color-6-muted);
    }
    .date-picker .date-picker-body .date-picker-cell.blocked {
      color: var(--danger-color-light);
    }
    .date-picker .date-picker-body .date-picker-cell.today {
      font-weight: bold;
      text-decoration: underline;
      color: var(--primary-color-dark);
    }
    .date-picker .date-picker-body i {
      font-size: 1rem;
    }
    .date-picker .date-picker-body .date-picker-footer {
      height: 2.5rem;
    }
    .date-picker .date-picker-body .date-picker-footer button {
      margin-left: 10px;
      margin-right: 10px;
    }
    .e-control {
      font-family: "tgn-soft-round-comp", sans-serif;
    }
    .e-dropdown-popup ul {
      font-size: 20px;
    }
    .e-richtexteditor {
      min-width: var(--dynamic-min-width);
      max-width: var(--dynamic-max-width);
      min-height: var(--dynamic-min-height);
      max-height: var(--dynamic-max-height);
    }
    .e-richtexteditor .e-toolbar {
      background-color: var(--neutral-150);
      border-top-right-radius: 1rem;
      border-top-left-radius: 1rem;
      box-shadow: none;
    }
    .e-richtexteditor .e-toolbar .e-toolbar-items {
      background-color: var(--neutral-150);
      border-top-right-radius: 1rem;
      border-top-left-radius: 1rem;
    }
    .e-richtexteditor .e-toolbar .e-tbar-btn {
      background-color: var(--neutral-150);
    }
    .e-richtexteditor .e-toolbar .e-tbar-btn:hover {
      background: rgba(181, 154, 70, 0.4705882353);
      border-radius: 0.2rem;
    }
    .e-richtexteditor .e-toolbar .e-hor-nav.e-expended-nav {
      border-top-right-radius: 1rem;
    }
    .e-richtexteditor .e-control.e-btn.e-lib.e-dropdown-btn.e-rte-elements.e-tbar-btn.e-rte-fontcolor-dropdown.e-icon-btn:hover, .e-richtexteditor .e-control.e-btn.e-lib.e-dropdown-btn.e-rte-elements.e-tbar-btn.e-rte-backgroundcolor-dropdown.e-icon-btn:hover {
      background: rgba(181, 154, 70, 0.4705882353);
      border-radius: 0.2rem;
    }
    .e-richtexteditor.e-rte-tb-expand {
      border: 0px solid var(--neutral-300);
      border-top-right-radius: 1rem;
      border-top-left-radius: 1rem;
      border-bottom-right-radius: 1rem;
      border-bottom-left-radius: 1rem;
    }
    .e-richtexteditor.e-rte-tb-expand .e-rte-content {
      border-top: 0px;
      border-bottom-right-radius: 0rem;
    }
    .e-richtexteditor.e-rte-resize {
      border: 2px solid var(--neutral-300);
      background: none;
    }
    .e-richtexteditor .e-rte-srctextarea {
      font-size: 140%;
    }
    .cohort-picker-container {
      align-items: center;
      margin: 1rem;
      appearance: auto;
      overflow-y: auto;
      scroll-behavior: smooth;
    }
    .cohort-picker-container .cohort-selector {
      display: contents;
    }
    .cohort-thumbnail {
      color: var(--cohort-thumbnail-text-color);
      padding: 8px 10px 2px 10px;
      background-color: var(--cohort-thumbnail-background-color);
      border: 2px solid var(--cohort-thumbnail-border-color);
      box-shadow: 5px 4px 0 1px var(--cohort-thumbnail-border-color);
      border-radius: 10px;
      cursor: pointer;
      transition: background-color 0.2s ease-in-out;
      display: flow-root;
    }
    .cohort-thumbnail:hover {
      background-color: var(--cohort-thumbnail-background-color-hover);
    }
    .cohort-thumbnail:active, .cohort-thumbnail.active {
      color: var(--secondary-color);
      background-color: var(--danger-color);
      border-color: var(--secondary-color);
      box-shadow: 2px 2px 0 1px var(--secondary-color);
    }
    .cohort-thumbnail:active .cohort-members, .cohort-thumbnail.active .cohort-members {
      color: var(--light-text-color);
    }
    .cohort-thumbnail:active .cohort-name, .cohort-thumbnail.active .cohort-name {
      color: var(--light-text-color);
    }
    .cohort-thumbnail-alt {
      color: var(--dark-color);
      padding: 8px 10px 2px 10px;
      background-color: var(--light-background-color);
      border: 2px solid var(--dark-color);
      box-shadow: 5px 4px 0 1px var(--dark-color);
      border-radius: 10px;
      cursor: pointer;
      margin: 5px 0px;
      margin-top: 1rem;
      margin-bottom: 1rem;
      display: flow-root;
    }
    .cohort-thumbnail-alt.active, .cohort-thumbnail-alt:active {
      background-color: var(--accent-color-10);
      border: 2px solid var(--accent-color-10);
      box-shadow: 2px 2px 0 1px var(--accent-color-10);
    }
    .cohort-thumbnail-alt.active .cohort-members, .cohort-thumbnail-alt:active .cohort-members {
      color: var(--light-text-color);
    }
    .cohort-thumbnail-alt.active .cohort-name, .cohort-thumbnail-alt:active .cohort-name {
      color: var(--light-text-color);
    }
    .cohort-thumbnail:focus, .cohort-thumbnail.focus, .cohort-thumbnail-alt:focus, .cohort-thumbnail-alt.focus {
      color: var(--dark-color);
      background-color: var(--dark-color);
      border-color: var(--dark-color);
      box-shadow: 2px 2px 0 1px var(--dark-color);
    }
    .cohort-thumbnail:focus .cohort-members, .cohort-thumbnail.focus .cohort-members, .cohort-thumbnail-alt:focus .cohort-members, .cohort-thumbnail-alt.focus .cohort-members {
      color: var(--light-text-color);
    }
    .cohort-thumbnail:focus .cohort-name, .cohort-thumbnail.focus .cohort-name, .cohort-thumbnail-alt:focus .cohort-name, .cohort-thumbnail-alt.focus .cohort-name {
      color: var(--light-text-color);
    }
    .cohort-thumbnail .cohort-name, .cohort-thumbnail-alt .cohort-name {
      float: left;
      position: relative;
      width: 70%;
      text-align: left;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .cohort-thumbnail .cohort-members, .cohort-thumbnail-alt .cohort-members {
      float: right;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .cohort-members-tile {
      background-color: var(--cohort-members-tile-background-color);
      border-radius: 0.75rem;
      padding-left: 1rem;
      padding-bottom: 0.2rem;
      padding-right: 1rem;
      padding-top: 0.25rem;
      border: 1px solid var(--cohort-members-tile-border-color);
    }
    .actions-list-controls {
      margin-bottom: 0.5rem;
      margin-top: 1rem;
    }
    .cms-layout table.actions-list {
      background-color: #FFFFF3;
      margin-top: 0.25rem;
    }
    .cms-layout table.actions-list p {
      margin-bottom: 0;
    }
    .cms-layout table.actions-list thead {
      border-color: var(--neutral-300);
      border-bottom-width: 2px;
    }
    .cms-layout table.actions-list thead th p {
      font-family: henderson-slab-basic, serif;
      color: var(--dark-color);
      font-size: small;
    }
    .cms-layout .table-with-actions {
      margin-top: 1rem;
      z-index: 0;
      position: relative;
    }
    .cms-layout .table-with-actions .table-title {
      float: left;
      width: 60%;
    }
    .cms-layout .table-with-actions .table-title :first-child {
      margin-bottom: 0px;
    }
    .cms-layout .table-with-actions .actions-area {
      float: right;
      margin-bottom: 0.5rem;
    }
    .cms-layout .table-with-actions .table-container {
      position: relative;
    }
    .cms-layout .table-with-actions .table-container table {
      margin-top: 0;
      width: 100%;
      overflow: auto;
    }
    .cms-layout .table-with-actions .table-container table .checkbox-column {
      width: 80px;
    }
    .cms-layout .table-with-actions .table-container table .reorder-column {
      width: 80px;
    }
    .cms-layout .table-with-actions .table-container.sticky-header {
      max-height: 80vh;
      overflow: auto;
    }
    .cms-layout .table-with-actions .table-container.sticky-header table {
      position: relative;
      text-align: left;
    }
    .cms-layout .table-with-actions .table-container.sticky-header table th {
      position: sticky;
      top: -1px;
      background-color: inherit;
      z-index: 2;
    }
    .report-container {
      margin: auto;
      align-items: center;
      position: absolute;
      top: 50%;
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }
    .report-container .q-summary {
      align-items: center;
      justify-content: center;
      display: inline-flex;
      padding: 1em;
      width: 100%;
      text-align: center;
    }
    .report-container .time-taken {
      background-color: var(--primary-color-dark);
      color: var(--light-text-color);
      padding: 1em;
      margin: 1rem;
      font-family: "Cubano", sans-serif;
      font-weight: 400;
      width: auto;
      border-radius: 10px;
      box-shadow: 5px 5px 5px #E3CE97;
    }
    .report-container .report-view-card {
      width: auto;
      max-height: 50%;
      border-color: transparent;
      margin: 0.5rem;
      border-radius: 0.8rem;
      box-shadow: 5px 5px 5px var(--neutral-400);
    }
    .report-container .report-view-card h1, .report-container .report-view-card h2, .report-container .report-view-card h3, .report-container .report-view-card h4, .report-container .report-view-card h5, .report-container .report-view-card h6 {
      color: var(--light-text-color);
    }
    .report-container .report-view-card.correct-card {
      background-color: var(--success-color);
    }
    .report-container .report-view-card.incorrect-card {
      background-color: var(--accent-color-1-dark);
    }
    @media (max-width: 1199.98px) {
      .report-container .report-view-card {
        width: 60%;
      }
    }
    @media (max-width: 991.98px) {
      .report-container .report-view-card {
        width: 70%;
      }
    }
    @media (max-width: 767.98px) {
      .report-container .report-view-card {
        width: 95%;
      }
    }
    .report-container .report-view-card .card-text-center {
      text-align: center;
    }
    .report-container .nav-btns {
      vertical-align: middle;
      padding: 0.5em;
    }
    .user-thumbnail-container {
      position: relative;
      width: fit-content;
      border: 0.2rem dashed #b59a46;
      border-radius: 1rem;
      padding: 0.5rem 0.2rem;
      background-color: #FFFFE2;
    }
    .user-thumbnail-container p {
      margin-bottom: 0;
    }
    .user-list-item {
      width: 100%;
      padding: 0.5rem 0.2rem;
      background-color: #FFFFE2;
      margin: 0 0 -1px -1em;
      border: 0.75px #70A262 solid;
    }
    .user-list-item .row {
      align-items: center;
      padding-left: 1em;
    }
    .user-list-item .card-img {
      width: 100px;
    }
    .user-list-item .card-img .avatar {
      width: 60px;
      height: auto;
    }
    .user-list-item p {
      margin: -7px 0 -8px 0;
    }
    .user-list-item:hover {
      transition: background-color 0.5s linear;
      background-color: #D4D9D0;
    }
    .user-list-item.selected {
      transition: background-color 0.2s linear;
      background-color: #70A262;
    }
    .user-list-item.selected p {
      color: var(--light-text-color);
    }
    .spinner-border {
      color: var(--core-color);
      width: 3rem;
      height: 3rem;
      border-width: 0.4rem;
    }
    .spinner-border.xs {
      width: 1rem;
      height: 1rem;
      border-width: unset;
    }
    .spinner-border.sm {
      width: 2rem;
      height: 2rem;
      border-width: 0.3rem;
    }
    .spinner-border.lg {
      width: 4rem;
      height: 4rem;
      border-width: 0.5rem;
    }
    .spinner-border.xl {
      width: 5rem;
      height: 5rem;
      border-width: 0.6rem;
    }
    .full-width-app .loading-container {
      max-width: 30em;
      margin-top: 10%;
      background-color: transparent;
    }
    .full-width-app .loading-container h1 {
      font-size: 520%;
      color: var(--loading-screen-text-color);
      text-shadow: 4px 3px var(--loading-screen-text-shadow-color);
      margin-top: -1.4em;
      text-align: center;
    }
    .full-width-app .loading-screen h1, .full-width-app .loading-screen h2, .full-width-app .loading-screen h3, .full-width-app .loading-screen h4, .full-width-app .loading-screen h5, .full-width-app .loading-screen h6, .full-width-app .loading-screen p, .full-width-app .loading-screen label {
      text-align: center;
    }
    .full-width-app .loading-badge {
      position: absolute;
      width: 70%;
      z-index: -1;
      margin-top: -10em;
    }
    .full-width-app .loading-ribbon {
      margin-top: 5em;
    }
    .cms-preview {
      max-width: 1700px;
      width: 100%;
      height: 100%;
      position: relative;
    }
    .cms-preview .background-1, .cms-preview .background-2, .cms-preview .background-3, .cms-preview .background-4, .cms-preview .background-5 {
      height: 100%;
      width: auto;
      position: absolute;
    }
    .cms-preview .container-centered {
      position: relative;
    }
    .cms-preview .popup-container, .cms-preview .floating-menu-container {
      position: relative;
    }
    .cms-preview .card, .cms-preview .floating-menu-container .floating-menu, .floating-menu-container .cms-preview .floating-menu {
      background-color: transparent;
      border: none;
    }
    .ribbon-container {
      background-image: url(/images/global/shapes/ribbon-bordered-yellow.svg);
      background-color: transparent;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: contain;
    }
    .tape {
      background-image: url(/images/global/shapes/tape.svg);
      background-color: transparent;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: contain;
      height: 15vh;
      width: 26vh;
      position: absolute;
      z-index: 3;
      top: -7vh;
      left: -3vw;
      filter: var(--decor-element-tape-color);
    }
    .tape-bottom {
      bottom: 7vh;
      right: 3vw;
    }
    .pamphlet {
      transition: all 0.3s linear;
      display: flex;
      margin: auto;
      justify-content: center;
    }
    .pamphlet img {
      max-height: 60vh;
      cursor: pointer;
    }
    .pamphlet.hover-action:hover {
      animation: pamphlet 1s ease-in-out infinite alternate;
      transform: scale(1.2);
    }
    .speech-bubble {
      background-image: url("/images/global/shapes/speech-bubble.svg");
      background-color: transparent;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: contain;
      margin: -4vh 1vw 4vh;
      display: flex;
      text-align: center;
      align-content: center;
      justify-content: center;
      flex-direction: column;
      padding: 2vh 2vw 2vh 4vw;
      width: fit-content;
    }
    .stamps {
      z-index: -1;
    }
    .stamps-left {
      margin-left: -3rem;
      align-self: end;
    }
    .stamps-right {
      align-self: end;
    }
    .award-ribbon {
      background-image: url("/images/global/shapes/certificate-seal.png");
      background-size: contain;
      background-repeat: no-repeat;
      height: 18rem;
      width: 12rem;
      position: absolute;
      top: 1rem;
    }
    .certificate-border {
      position: relative;
    }
    .certificate-border .certificate-border-inner {
      background-image: linear-gradient(45deg, var(--neutral-400) 25%, transparent 25%, transparent 75%, var(--neutral-400) 75%, var(--neutral-400)), linear-gradient(-45deg, var(--neutral-400) 25%, transparent 25%, transparent 75%, var(--neutral-400) 75%, var(--neutral-400));
      background-size: 20px 20px;
      background-repeat: round round;
      background-position: -10px -10px;
      display: flex;
      padding: 0.6rem;
      flex-direction: row;
      flex-grow: 1;
    }
    .certificate-border .certificate-border-inner:after {
      content: "";
      position: absolute;
      left: 10px;
      top: 10px;
      right: 10px;
      bottom: 10px;
      background: var(--neutral-400);
      z-index: -1;
    }
    .owl-header {
      background-image: url(/images/pages/invitation/letter-head.svg);
      height: 8rem;
      width: 100%;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      overflow: visible;
      background-size: contain;
    }
    @media screen and (max-height: 768px) {
      .owl-header {
        scale: 80%;
        margin-top: -1rem;
        margin-bottom: -2rem;
      }
    }
    .range-slider {
      width: 100%;
    }
    .range-slider .slider-bar {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 12px;
      outline: none;
      opacity: 0.7;
      -webkit-transition: 0.2s;
      transition: opacity 0.2s;
      padding-right: 0px;
      padding-left: 0px;
      cursor: pointer;
    }
    .range-slider .slider-bar:hover {
      opacity: 1;
    }
    .range-slider .slider-bar:focus {
      box-shadow: 0 0 0 0.1rem rgba(90, 125, 89, 0.3294117647);
    }
    .range-slider .slider-bar::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 22px;
      height: 22px;
      border-radius: 15px;
      background: #50794A;
      cursor: pointer;
    }
    .range-slider .slider-bar::-moz-range-thumb {
      width: 22px;
      height: 22px;
      border-radius: 15px;
      background: #50794A;
      cursor: pointer;
    }
    .rt-video {
      margin: 1.5rem 0;
      width: 100%;
      overflow: hidden;
      border-radius: 0.75rem;
      background-color: #000;
    }
    .rt-video iframe {
      display: block;
      width: 100%;
      aspect-ratio: 16/9;
      border: 0;
    }
    .vimeo-video {
      display: flex;
      justify-content: start;
      margin: 5vh;
      position: relative;
      flex-grow: 1;
    }
    .vimeo-video iframe {
      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: end;
    }
    .tag-picker .tag-picker-menu {
      background-color: var(--white-color);
      border-radius: 1.8rem;
      border: 3px solid var(--dark-color);
      padding: 5px;
    }
    .tag-picker .removable-tag span {
      padding-right: 0;
    }
    .tag-picker .removable-tag button {
      cursor: pointer;
      background: transparent;
      margin-right: 3px;
      padding: 0;
      border: none;
      border-radius: 3px;
    }
    .tag-picker .removable-tag button:hover {
      backdrop-filter: brightness(125%);
    }
    .tag-picker .removable-tag button i {
      font-size: 1rem;
    }
    .tag-picker .tag-collection.tag-list {
      scroll-behavior: smooth;
      overflow-y: auto;
      overflow-x: auto;
      max-height: 25vh;
    }
    .tag-picker .tag-collection.tag-list .tag-item {
      display: block;
      width: fit-content;
      margin: 3px 0 3px 0;
    }
    .tag-collection .tag-item {
      display: inline-block;
      margin: 0 2px 3px 2px;
      border: 2px solid;
      border-radius: 10px;
      border-color: rgba(var(--r), var(--g), var(--b), var(--a));
      background: rgba(var(--r), var(--g), var(--b), 0.5);
    }
    .tag-collection .tag-item span {
      color: rgba(var(--r), var(--g), var(--b), var(--a));
      filter: brightness(60%);
      padding: 0 0.5rem 0 0.5rem;
    }
    .keyboard-widget {
      margin: auto;
      width: fit-content;
      align-content: center;
      background-color: #E6754B;
      border-radius: 10px 10px 0 0;
      margin-top: -20px;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      margin-right: auto;
      margin-left: auto;
      animation: slide-out-bottom 0.4s ease-in-out;
      z-index: 1;
    }
    .keyboard-widget.expanded {
      margin-top: -10px;
      padding-bottom: 30px;
      height: fit-content;
      width: fit-content;
      padding: 0px 20px 10px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      animation: slide-in-bottom 0.4s ease-in-out;
    }
    .keyboard-widget .keyboard-icon i {
      font-size: 32px;
      margin: 10px;
    }
    .keyboard-widget .keyboard-container {
      width: 100%;
      padding: 0px 10px;
      margin-bottom: -5px;
    }
    .keyboard-widget .keyboard-container .keyboard-section {
      display: inline-block;
    }
    .keyboard-widget .keyboard-container .keyboard-section .keyboard-row {
      display: flex;
    }
    .keyboard-widget .keyboard-container .keyboard-section .keyboard-btn {
      height: 3rem;
      width: 3rem;
      font-size: 1.5rem;
      text-align: center;
      border-radius: 10px;
      box-shadow: none;
    }
    .keyboard-widget .keyboard-container .keyboard-section .keyboard-btn:hover {
      filter: brightness(0.75);
    }
    .keyboard-widget .keyboard-container .keyboard-section .keyboard-btn.lg {
      font-size: 2.5rem;
      line-height: 2rem;
    }
    .keyboard-widget .keyboard-container .keyboard-section .keyboard-btn.modifier-btn {
      background-color: #4a8897;
    }
    .keyboard-widget .keyboard-container .keyboard-section .keyboard-btn.modifier-btn .superscript {
      color: white;
    }
    .keyboard-widget .keyboard-container .keyboard-section .keyboard-btn .superscript {
      font-size: 0.7rem;
      width: 0.7rem;
      height: 0.7rem;
      position: relative;
      top: -6px;
      left: -10px;
      color: #5a7d59;
    }
    .keyboard-widget .keyboard-container .keyboard-section .keyboard-btn .key-text {
      position: relative;
      top: -10px;
    }
    .keyboard-widget .keyboard-container .keyboard-section .keyboard-btn.btn-primary .superscript {
      filter: brightness(1.5);
    }
    .keyboard-widget .keyboard-container .keyboard-section .keyboard-btn.disabled {
      cursor: default;
    }
    .keyboard-widget .keyboard-container .keyboard-section .keyboard-btn.disabled:hover {
      filter: none;
    }
    .keyboard-widget .keyboard-container .keyboard-section .keyboard-btn-round {
      margin: 0px 8px 5px 8px;
      height: 3rem;
      width: 3rem;
      line-height: 2rem;
      font-size: 2rem;
      text-align: center;
      cursor: pointer;
    }
    .keyboard-widget .keyboard-container .keyboard-section .keyboard-btn-round.lg {
      font-size: 3rem;
      line-height: 3rem;
      text-align: center;
    }
    .keyboard-widget .collapse-btn {
      margin-left: auto;
      margin-right: 0;
    }
    .keyboard-widget .collapse-btn i {
      font-size: 20px;
      padding: 0 10px 0 5px;
      font-weight: bold;
      color: #FFFFE2;
      text-shadow: 1px 1px 1px #ccc;
    }
    .index-container {
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
    }
    @media screen and (max-width: 768px) {
      .index-container {
        flex-direction: column;
      }
    }
    .index-container .content-toggles {
      padding: 0.5em;
      text-align: end;
    }
    .index-container .content-toggles .btn {
      margin: 0.5em;
    }
    .index-container .content-index ul.tree {
      --spacing: 1.5rem;
      --radius: 19px;
      margin-left: -2rem;
      margin-top: 1rem;
      font-family: gin, serif;
    }
    .index-container .content-index ul.tree ul, .index-container .content-index ul.tree li, .index-container .content-index ul.tree summary {
      padding-bottom: 0.5rem;
    }
    .index-container .content-index ul.tree li {
      display: block;
      position: relative;
      padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
    }
    .index-container .content-index ul.tree ul {
      margin-left: calc(var(--radius) - var(--spacing));
      padding-left: 0;
      list-style-type: none;
    }
    .index-container .content-index ul.tree ul li {
      border-left: 2px solid #ddd;
    }
    .index-container .content-index ul.tree ul li:last-child {
      border-color: transparent;
    }
    .index-container .content-index ul.tree ul li::before {
      content: "";
      display: block;
      position: absolute;
      top: calc(var(--spacing) / -4);
      left: -2px;
      width: calc(var(--spacing) + 3px);
      height: calc(var(--spacing) + 2px);
      border: solid #ddd;
      border-width: 0 0 2px 2px;
    }
    .index-container .content-index ul.tree .tooltip-container {
      margin-bottom: 1.3em;
      margin-right: 1.2em;
      margin-left: -1.35em;
    }
    .index-container .content-index ul.tree summary {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      display: block;
      cursor: pointer;
    }
    .index-container .content-index ul.tree summary::marker, .index-container .content-index ul.tree summary::-webkit-details-marker {
      display: none;
    }
    .index-container .content-index ul.tree summary:focus {
      outline: none;
    }
    .index-container .content-index ul.tree summary:focus-visible {
      outline: 1px dotted #000;
    }
    .index-container .content-index ul.tree li span .badge, .index-container .content-index ul.tree summary span .badge {
      display: block;
      position: absolute;
      top: calc(var(--spacing) / 2 - var(--radius) - 2.5);
      left: calc(var(--spacing) - var(--radius) - 1px);
      width: calc(2 * var(--radius));
      height: calc(2 * var(--radius));
      padding: 9px;
      border-radius: 55%;
      font-weight: normal;
      z-index: 2;
      text-align: center;
    }
    .index-container .content-index ul.tree li span .badge.badge-course, .index-container .content-index ul.tree summary span .badge.badge-course {
      background-color: rgb(83, 16, 16);
      color: white;
    }
    .index-container .content-index ul.tree li span .badge.badge-assignment, .index-container .content-index ul.tree summary span .badge.badge-assignment {
      background-color: rgb(17, 56, 106);
      color: white;
    }
    .index-container .content-index ul.tree li span .badge.badge-module, .index-container .content-index ul.tree summary span .badge.badge-module {
      background-color: rgb(73, 47, 91);
      color: white;
    }
    .index-container .content-index ul.tree li span .badge.badge-module img, .index-container .content-index ul.tree li span .badge.badge-module svg, .index-container .content-index ul.tree summary span .badge.badge-module img, .index-container .content-index ul.tree summary span .badge.badge-module svg {
      width: 200%;
      margin-left: -0.7em;
      margin-top: -0.7em;
    }
    .index-container .content-index ul.tree li span .badge.badge-evaluation, .index-container .content-index ul.tree summary span .badge.badge-evaluation {
      background-color: rgb(130, 54, 0);
      color: black;
    }
    .index-container .content-index ul.tree li span .badge.badge-lesson, .index-container .content-index ul.tree summary span .badge.badge-lesson {
      background-color: rgb(0, 87, 97);
      color: white;
      margin-left: 1em;
    }
    .index-container .content-index ul.tree li span .badge.badge-lesson img, .index-container .content-index ul.tree li span .badge.badge-lesson svg, .index-container .content-index ul.tree summary span .badge.badge-lesson img, .index-container .content-index ul.tree summary span .badge.badge-lesson svg {
      width: 300%;
      margin-left: -1.4em;
      margin-top: -1.4em;
    }
    .index-container .content-index ul.tree li span .badge.badge-evaluation-section, .index-container .content-index ul.tree summary span .badge.badge-evaluation-section {
      background-color: lightsalmon;
      color: black;
    }
    .index-container .content-index ul.tree li ul i, .index-container .content-index ul.tree summary ul i {
      margin-left: -2em;
      margin-top: 0.5em;
    }
    .index-container .content-index ul.tree li ul a, .index-container .content-index ul.tree summary ul a {
      padding-left: 3.3em;
      padding-top: 0.3em;
    }
    .index-container .content-index ul.tree li ul li.no-children-element, .index-container .content-index ul.tree summary ul li.no-children-element {
      padding-left: 0.5rem;
    }
    .index-container .content-index ul.tree li ul li.nested-list li, .index-container .content-index ul.tree summary ul li.nested-list li {
      left: 0.7em;
    }
    .index-container .content-index ul.tree li.nested-list {
      list-style-type: none;
    }
    .index-container .content-index ul.tree li.no-children-element {
      list-style-type: none;
      padding-bottom: 1rem;
      padding-left: 0rem;
    }
    .index-container .content-index ul.tree .badge-activity {
      background-color: #228b2f;
      color: white;
      display: block;
      position: absolute;
      top: calc(var(--spacing) / 2 - var(--radius));
      left: calc(var(--spacing) - var(--radius) - 2px);
      width: calc(2 * var(--radius));
      height: calc(2 * var(--radius));
      padding: 9px;
      border-radius: 100%;
      font-weight: normal;
      margin-left: 0.8rem;
      z-index: 10;
      text-align: center;
      flex-direction: column;
      align-items: flex-end;
      margin-top: 0.5rem;
    }
    .index-container .content-index ul.tree .badge-activity i {
      font-size: 100%;
    }
    .index-container .content-index ul.tree .badge-activity img, .index-container .content-index ul.tree .badge-activity svg {
      width: 180%;
      margin-top: -0.5em;
      margin-left: -0.55em;
      filter: brightness(0) invert(100%) sepia(48%) saturate(2389%) hue-rotate(181deg) brightness(122%) contrast(100%);
    }
    .index-container .content-index ul.tree a {
      padding-left: 2.5em;
      margin-top: -5px;
      font-size: 1.3rem;
    }
    .index-container .content-index ul.tree a.activity-link {
      padding-left: 1.6em;
    }
    .index-container .content-index i {
      font-size: 1.2rem;
      color: var(--accent-color-10);
      margin-left: -2.5em;
      margin-top: 0.3em;
      transform: rotate(0deg);
    }
    .index-container .content-index details[open] i {
      transform: rotate(-90deg);
    }
    .index-container .content-index details:not([open]) i {
      transform: rotate(0deg);
    }
    .class-name-display {
      background-color: var(--accent-color-1);
      color: var(--white-color);
      border-radius: 6px;
      align-items: center;
      display: flex;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      z-index: 1;
    }
    .class-name-display text {
      font-size: 2rem;
    }
    .class-name-display i {
      font-size: 3rem;
      padding-bottom: 0.2rem;
    }
    .metric-container {
      display: flex;
      flex-direction: column;
      border-radius: 30px;
      border: 3px solid #D99D7B;
      background: #EDD4B6;
      padding-top: 0.2em;
      padding-bottom: 0.5em;
      padding-left: 0.5em;
      padding-right: 0.5em;
      font-size: 1.4rem;
      margin: 0.2rem;
      justify-content: space-evenly;
    }
    .metric-container i {
      font-size: 2.2rem;
    }
    .metric-container .icon-text {
      font-size: 1.6rem;
      letter-spacing: 0.02em;
    }
    .metric-container .metric-container-body {
      display: flex;
      flex-direction: row;
      margin-top: -0.3rem;
      margin-left: 1rem;
      padding-left: 1.2rem;
      padding-right: 1.2rem;
    }
    .metric-container .metric-container-body .metric-number {
      display: flex;
      flex-direction: column;
      margin-right: auto;
      margin-top: 0.5rem;
      max-width: 60%;
      line-height: 1.1;
    }
    .metric-container .metric-container-body .metric-number .title {
      padding-top: 0.2em;
    }
    .metric-container .metric-container-body .metric-number .value {
      font-size: 1.5rem;
      font-family: henderson-slab-basic, serif;
      line-height: 1.2;
    }
    .radial-progress-bar {
      height: 6.5rem;
      width: 6.5rem;
      margin: 0.5rem;
      float: left;
      position: relative;
    }
    .radial-progress-bar .radial-bar {
      height: 100%;
      width: 100%;
    }
    .radial-progress-bar .radial-bar .half-circle {
      border: 0.65rem solid var(--danger-color);
      border-radius: 50%;
      position: absolute;
      height: 100%;
      width: 100%;
      transform-origin: center center;
    }
    .radial-progress-bar .radial-bar-shadow {
      border: 0.65rem solid #F5F1C7;
      border-radius: 50%;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 0;
    }
    .radial-progress-bar .radial-bar-label {
      color: var(--danger-color);
      text-align: center;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 0.65rem;
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .radial-progress-bar .radial-bar-label .title {
      font-size: 1.3rem;
      line-height: 1;
    }
    .radial-progress-bar .radial-bar-label .number {
      font-size: 1.625rem;
    }
    .radial-progress-bar.progress-0 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-0 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-0 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-0 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-0 .radial-bar .right-half {
      transform: rotate(-180deg);
    }
    .radial-progress-bar.progress-0 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-0 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-0 .radial-bar .half-circle {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-0 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-0 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-0 .radial-bar .right-half {
      transform: rotate(-180deg);
    }
    .radial-progress-bar.progress-0 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-1 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-1 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-1 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-1 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-1 .radial-bar .right-half {
      transform: rotate(-176.4deg);
    }
    .radial-progress-bar.progress-1 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-2 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-2 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-2 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-2 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-2 .radial-bar .right-half {
      transform: rotate(-172.8deg);
    }
    .radial-progress-bar.progress-2 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-3 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-3 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-3 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-3 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-3 .radial-bar .right-half {
      transform: rotate(-169.2deg);
    }
    .radial-progress-bar.progress-3 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-4 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-4 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-4 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-4 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-4 .radial-bar .right-half {
      transform: rotate(-165.6deg);
    }
    .radial-progress-bar.progress-4 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-5 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-5 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-5 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-5 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-5 .radial-bar .right-half {
      transform: rotate(-162deg);
    }
    .radial-progress-bar.progress-5 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-6 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-6 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-6 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-6 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-6 .radial-bar .right-half {
      transform: rotate(-158.4deg);
    }
    .radial-progress-bar.progress-6 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-7 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-7 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-7 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-7 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-7 .radial-bar .right-half {
      transform: rotate(-154.8deg);
    }
    .radial-progress-bar.progress-7 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-8 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-8 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-8 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-8 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-8 .radial-bar .right-half {
      transform: rotate(-151.2deg);
    }
    .radial-progress-bar.progress-8 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-9 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-9 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-9 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-9 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-9 .radial-bar .right-half {
      transform: rotate(-147.6deg);
    }
    .radial-progress-bar.progress-9 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-10 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-10 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-10 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-10 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-10 .radial-bar .right-half {
      transform: rotate(-144deg);
    }
    .radial-progress-bar.progress-10 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-11 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-11 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-11 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-11 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-11 .radial-bar .right-half {
      transform: rotate(-140.4deg);
    }
    .radial-progress-bar.progress-11 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-12 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-12 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-12 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-12 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-12 .radial-bar .right-half {
      transform: rotate(-136.8deg);
    }
    .radial-progress-bar.progress-12 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-13 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-13 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-13 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-13 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-13 .radial-bar .right-half {
      transform: rotate(-133.2deg);
    }
    .radial-progress-bar.progress-13 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-14 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-14 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-14 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-14 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-14 .radial-bar .right-half {
      transform: rotate(-129.6deg);
    }
    .radial-progress-bar.progress-14 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-15 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-15 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-15 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-15 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-15 .radial-bar .right-half {
      transform: rotate(-126deg);
    }
    .radial-progress-bar.progress-15 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-16 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-16 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-16 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-16 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-16 .radial-bar .right-half {
      transform: rotate(-122.4deg);
    }
    .radial-progress-bar.progress-16 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-17 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-17 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-17 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-17 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-17 .radial-bar .right-half {
      transform: rotate(-118.8deg);
    }
    .radial-progress-bar.progress-17 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-18 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-18 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-18 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-18 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-18 .radial-bar .right-half {
      transform: rotate(-115.2deg);
    }
    .radial-progress-bar.progress-18 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-19 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-19 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-19 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-19 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-19 .radial-bar .right-half {
      transform: rotate(-111.6deg);
    }
    .radial-progress-bar.progress-19 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-20 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-20 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-20 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-20 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-20 .radial-bar .right-half {
      transform: rotate(-108deg);
    }
    .radial-progress-bar.progress-20 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-21 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-21 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-21 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-21 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-21 .radial-bar .right-half {
      transform: rotate(-104.4deg);
    }
    .radial-progress-bar.progress-21 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-22 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-22 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-22 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-22 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-22 .radial-bar .right-half {
      transform: rotate(-100.8deg);
    }
    .radial-progress-bar.progress-22 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-23 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-23 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-23 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-23 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-23 .radial-bar .right-half {
      transform: rotate(-97.2deg);
    }
    .radial-progress-bar.progress-23 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-24 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-24 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-24 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-24 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-24 .radial-bar .right-half {
      transform: rotate(-93.6deg);
    }
    .radial-progress-bar.progress-24 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-25 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-25 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-25 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-25 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-25 .radial-bar .right-half {
      transform: rotate(-90deg);
    }
    .radial-progress-bar.progress-25 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-26 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-26 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-26 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-26 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-26 .radial-bar .right-half {
      transform: rotate(-86.4deg);
    }
    .radial-progress-bar.progress-26 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-27 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-27 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-27 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-27 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-27 .radial-bar .right-half {
      transform: rotate(-82.8deg);
    }
    .radial-progress-bar.progress-27 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-28 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-28 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-28 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-28 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-28 .radial-bar .right-half {
      transform: rotate(-79.2deg);
    }
    .radial-progress-bar.progress-28 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-29 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-29 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-29 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-29 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-29 .radial-bar .right-half {
      transform: rotate(-75.6deg);
    }
    .radial-progress-bar.progress-29 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-30 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-30 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-30 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-30 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-30 .radial-bar .right-half {
      transform: rotate(-72deg);
    }
    .radial-progress-bar.progress-30 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-31 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-31 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-31 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-31 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-31 .radial-bar .right-half {
      transform: rotate(-68.4deg);
    }
    .radial-progress-bar.progress-31 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-32 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-32 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-32 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-32 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-32 .radial-bar .right-half {
      transform: rotate(-64.8deg);
    }
    .radial-progress-bar.progress-32 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-33 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-33 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-33 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-33 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-33 .radial-bar .right-half {
      transform: rotate(-61.2deg);
    }
    .radial-progress-bar.progress-33 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-34 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-34 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-34 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-34 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-34 .radial-bar .right-half {
      transform: rotate(-57.6deg);
    }
    .radial-progress-bar.progress-34 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-35 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-35 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-35 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-35 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-35 .radial-bar .right-half {
      transform: rotate(-54deg);
    }
    .radial-progress-bar.progress-35 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-36 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-36 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-36 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-36 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-36 .radial-bar .right-half {
      transform: rotate(-50.4deg);
    }
    .radial-progress-bar.progress-36 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-37 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-37 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-37 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-37 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-37 .radial-bar .right-half {
      transform: rotate(-46.8deg);
    }
    .radial-progress-bar.progress-37 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-38 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-38 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-38 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-38 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-38 .radial-bar .right-half {
      transform: rotate(-43.2deg);
    }
    .radial-progress-bar.progress-38 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-39 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-39 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-39 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-39 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-39 .radial-bar .right-half {
      transform: rotate(-39.6deg);
    }
    .radial-progress-bar.progress-39 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-40 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-40 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-40 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-40 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-40 .radial-bar .right-half {
      transform: rotate(-36deg);
    }
    .radial-progress-bar.progress-40 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-41 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-41 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-41 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-41 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-41 .radial-bar .right-half {
      transform: rotate(-32.4deg);
    }
    .radial-progress-bar.progress-41 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-42 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-42 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-42 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-42 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-42 .radial-bar .right-half {
      transform: rotate(-28.8deg);
    }
    .radial-progress-bar.progress-42 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-43 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-43 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-43 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-43 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-43 .radial-bar .right-half {
      transform: rotate(-25.2deg);
    }
    .radial-progress-bar.progress-43 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-44 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-44 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-44 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-44 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-44 .radial-bar .right-half {
      transform: rotate(-21.6deg);
    }
    .radial-progress-bar.progress-44 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-45 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-45 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-45 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-45 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-45 .radial-bar .right-half {
      transform: rotate(-18deg);
    }
    .radial-progress-bar.progress-45 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-46 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-46 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-46 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-46 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-46 .radial-bar .right-half {
      transform: rotate(-14.4deg);
    }
    .radial-progress-bar.progress-46 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-47 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-47 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-47 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-47 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-47 .radial-bar .right-half {
      transform: rotate(-10.8deg);
    }
    .radial-progress-bar.progress-47 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-48 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-48 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-48 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-48 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-48 .radial-bar .right-half {
      transform: rotate(-7.2deg);
    }
    .radial-progress-bar.progress-48 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-49 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-49 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-49 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-49 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-49 .radial-bar .right-half {
      transform: rotate(-3.6deg);
    }
    .radial-progress-bar.progress-49 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-50 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-50 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-50 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-50 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-50 .radial-bar .right-half {
      transform: rotate(0deg);
    }
    .radial-progress-bar.progress-50 .radial-bar .left-half {
      border-color: #F5F1C7;
    }
    .radial-progress-bar.progress-51 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-51 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-51 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-51 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-51 .radial-bar .left-half {
      display: block;
      transform: rotate(183.6deg);
    }
    .radial-progress-bar.progress-52 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-52 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-52 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-52 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-52 .radial-bar .left-half {
      display: block;
      transform: rotate(187.2deg);
    }
    .radial-progress-bar.progress-53 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-53 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-53 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-53 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-53 .radial-bar .left-half {
      display: block;
      transform: rotate(190.8deg);
    }
    .radial-progress-bar.progress-54 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-54 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-54 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-54 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-54 .radial-bar .left-half {
      display: block;
      transform: rotate(194.4deg);
    }
    .radial-progress-bar.progress-55 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-55 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-55 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-55 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-55 .radial-bar .left-half {
      display: block;
      transform: rotate(198deg);
    }
    .radial-progress-bar.progress-56 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-56 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-56 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-56 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-56 .radial-bar .left-half {
      display: block;
      transform: rotate(201.6deg);
    }
    .radial-progress-bar.progress-57 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-57 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-57 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-57 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-57 .radial-bar .left-half {
      display: block;
      transform: rotate(205.2deg);
    }
    .radial-progress-bar.progress-58 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-58 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-58 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-58 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-58 .radial-bar .left-half {
      display: block;
      transform: rotate(208.8deg);
    }
    .radial-progress-bar.progress-59 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-59 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-59 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-59 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-59 .radial-bar .left-half {
      display: block;
      transform: rotate(212.4deg);
    }
    .radial-progress-bar.progress-60 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-60 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-60 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-60 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-60 .radial-bar .left-half {
      display: block;
      transform: rotate(216deg);
    }
    .radial-progress-bar.progress-61 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-61 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-61 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-61 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-61 .radial-bar .left-half {
      display: block;
      transform: rotate(219.6deg);
    }
    .radial-progress-bar.progress-62 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-62 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-62 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-62 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-62 .radial-bar .left-half {
      display: block;
      transform: rotate(223.2deg);
    }
    .radial-progress-bar.progress-63 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-63 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-63 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-63 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-63 .radial-bar .left-half {
      display: block;
      transform: rotate(226.8deg);
    }
    .radial-progress-bar.progress-64 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-64 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-64 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-64 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-64 .radial-bar .left-half {
      display: block;
      transform: rotate(230.4deg);
    }
    .radial-progress-bar.progress-65 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-65 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-65 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-65 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-65 .radial-bar .left-half {
      display: block;
      transform: rotate(234deg);
    }
    .radial-progress-bar.progress-66 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-66 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-66 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-66 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-66 .radial-bar .left-half {
      display: block;
      transform: rotate(237.6deg);
    }
    .radial-progress-bar.progress-67 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-67 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-67 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-67 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-67 .radial-bar .left-half {
      display: block;
      transform: rotate(241.2deg);
    }
    .radial-progress-bar.progress-68 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-68 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-68 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-68 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-68 .radial-bar .left-half {
      display: block;
      transform: rotate(244.8deg);
    }
    .radial-progress-bar.progress-69 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-69 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-69 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-69 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-69 .radial-bar .left-half {
      display: block;
      transform: rotate(248.4deg);
    }
    .radial-progress-bar.progress-70 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-70 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-70 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-70 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-70 .radial-bar .left-half {
      display: block;
      transform: rotate(252deg);
    }
    .radial-progress-bar.progress-71 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-71 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-71 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-71 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-71 .radial-bar .left-half {
      display: block;
      transform: rotate(255.6deg);
    }
    .radial-progress-bar.progress-72 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-72 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-72 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-72 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-72 .radial-bar .left-half {
      display: block;
      transform: rotate(259.2deg);
    }
    .radial-progress-bar.progress-73 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-73 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-73 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-73 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-73 .radial-bar .left-half {
      display: block;
      transform: rotate(262.8deg);
    }
    .radial-progress-bar.progress-74 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-74 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-74 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-74 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-74 .radial-bar .left-half {
      display: block;
      transform: rotate(266.4deg);
    }
    .radial-progress-bar.progress-75 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-75 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-75 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-75 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-75 .radial-bar .left-half {
      display: block;
      transform: rotate(270deg);
    }
    .radial-progress-bar.progress-76 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-76 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-76 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-76 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-76 .radial-bar .left-half {
      display: block;
      transform: rotate(273.6deg);
    }
    .radial-progress-bar.progress-77 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-77 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-77 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-77 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-77 .radial-bar .left-half {
      display: block;
      transform: rotate(277.2deg);
    }
    .radial-progress-bar.progress-78 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-78 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-78 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-78 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-78 .radial-bar .left-half {
      display: block;
      transform: rotate(280.8deg);
    }
    .radial-progress-bar.progress-79 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-79 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-79 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-79 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-79 .radial-bar .left-half {
      display: block;
      transform: rotate(284.4deg);
    }
    .radial-progress-bar.progress-80 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-80 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-80 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-80 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-80 .radial-bar .left-half {
      display: block;
      transform: rotate(288deg);
    }
    .radial-progress-bar.progress-81 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-81 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-81 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-81 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-81 .radial-bar .left-half {
      display: block;
      transform: rotate(291.6deg);
    }
    .radial-progress-bar.progress-82 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-82 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-82 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-82 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-82 .radial-bar .left-half {
      display: block;
      transform: rotate(295.2deg);
    }
    .radial-progress-bar.progress-83 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-83 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-83 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-83 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-83 .radial-bar .left-half {
      display: block;
      transform: rotate(298.8deg);
    }
    .radial-progress-bar.progress-84 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-84 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-84 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-84 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-84 .radial-bar .left-half {
      display: block;
      transform: rotate(302.4deg);
    }
    .radial-progress-bar.progress-85 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-85 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-85 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-85 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-85 .radial-bar .left-half {
      display: block;
      transform: rotate(306deg);
    }
    .radial-progress-bar.progress-86 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-86 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-86 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-86 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-86 .radial-bar .left-half {
      display: block;
      transform: rotate(309.6deg);
    }
    .radial-progress-bar.progress-87 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-87 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-87 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-87 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-87 .radial-bar .left-half {
      display: block;
      transform: rotate(313.2deg);
    }
    .radial-progress-bar.progress-88 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-88 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-88 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-88 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-88 .radial-bar .left-half {
      display: block;
      transform: rotate(316.8deg);
    }
    .radial-progress-bar.progress-89 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-89 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-89 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-89 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-89 .radial-bar .left-half {
      display: block;
      transform: rotate(320.4deg);
    }
    .radial-progress-bar.progress-90 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-90 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-90 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-90 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-90 .radial-bar .left-half {
      display: block;
      transform: rotate(324deg);
    }
    .radial-progress-bar.progress-91 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-91 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-91 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-91 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-91 .radial-bar .left-half {
      display: block;
      transform: rotate(327.6deg);
    }
    .radial-progress-bar.progress-92 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-92 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-92 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-92 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-92 .radial-bar .left-half {
      display: block;
      transform: rotate(331.2deg);
    }
    .radial-progress-bar.progress-93 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-93 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-93 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-93 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-93 .radial-bar .left-half {
      display: block;
      transform: rotate(334.8deg);
    }
    .radial-progress-bar.progress-94 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-94 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-94 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-94 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-94 .radial-bar .left-half {
      display: block;
      transform: rotate(338.4deg);
    }
    .radial-progress-bar.progress-95 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-95 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-95 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-95 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-95 .radial-bar .left-half {
      display: block;
      transform: rotate(342deg);
    }
    .radial-progress-bar.progress-96 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-96 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-96 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-96 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-96 .radial-bar .left-half {
      display: block;
      transform: rotate(345.6deg);
    }
    .radial-progress-bar.progress-97 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-97 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-97 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-97 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-97 .radial-bar .left-half {
      display: block;
      transform: rotate(349.2deg);
    }
    .radial-progress-bar.progress-98 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-98 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-98 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-98 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-98 .radial-bar .left-half {
      display: block;
      transform: rotate(352.8deg);
    }
    .radial-progress-bar.progress-99 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-99 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-99 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-99 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-99 .radial-bar .left-half {
      display: block;
      transform: rotate(356.4deg);
    }
    .radial-progress-bar.progress-100 .radial-bar {
      clip-path: inset(0 0 0 0);
    }
    .radial-progress-bar.progress-100 .radial-bar .half-circle {
      border-color: var(--danger-color);
    }
    .radial-progress-bar.progress-100 .radial-bar .right-half {
      clip-path: inset(0 0 0 calc(6.5rem / 2));
      z-index: 2;
    }
    .radial-progress-bar.progress-100 .radial-bar .left-half {
      clip-path: inset(0 calc(6.5rem / 2) 0 0);
      z-index: 2;
    }
    .radial-progress-bar.progress-100 .radial-bar .left-half {
      display: block;
      transform: rotate(360deg);
    }
    .full-width-app .css-lightbox {
      position: relative;
      display: inline-block;
      padding: 20px;
      overflow: visible;
    }
    .full-width-app .css-lightbox .lightbox-checkbox {
      display: none;
    }
    .full-width-app .css-lightbox .lightbox-checkbox:checked ~ .lightbox-overlay {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
    .full-width-app .css-lightbox .lightbox-checkbox:checked ~ .lightbox-overlay .lightbox-content {
      transform: scale(1);
      opacity: 1;
    }
    .full-width-app .css-lightbox .lightbox-trigger {
      cursor: pointer;
      transition: opacity 0.3s ease, transform 0.3s ease;
      display: block;
    }
    .full-width-app .css-lightbox .lightbox-trigger:hover {
      opacity: 0.8;
      transform: scale(1.05);
    }
    .full-width-app .css-lightbox .lightbox-trigger .thumbnail {
      border-radius: 0.5rem;
      width: 100%;
      height: auto;
      display: block;
    }
    .full-width-app .css-lightbox .thumbnail-wrapper {
      position: relative;
      width: 100%;
      overflow: visible;
    }
    .full-width-app .css-lightbox .thumbnail-wrapper:after {
      content: "";
      display: block;
      height: 50px;
      width: 50px;
      background: url("/images/global/gui/icon-magnify.png") no-repeat center center;
      background-size: contain;
      position: absolute;
      bottom: 0%;
      left: 85%;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }
    .full-width-app .css-lightbox .thumbnail-wrapper:after:hover {
      opacity: 0.8;
      transform: scale(1.05);
    }
    .full-width-app .css-lightbox .lightbox-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.2);
      z-index: 5;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .full-width-app .css-lightbox .lightbox-overlay .lightbox-close {
      position: absolute;
      top: 20px;
      right: 20px;
      cursor: pointer;
      background: var(--modal-close-btn-color);
      color: var(--white-text-color);
      border: none;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      font-size: 24px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.3s ease, background-color 0.3s ease;
      z-index: 6;
    }
    .full-width-app .css-lightbox .lightbox-overlay .lightbox-close:hover {
      transform: scale(1.2);
      background: var(--modal-close-btn-color-hover);
    }
    .full-width-app .css-lightbox .lightbox-overlay .lightbox-close:after {
      content: "✕";
      font-weight: bold;
    }
    .full-width-app .css-lightbox .lightbox-overlay .lightbox-content {
      max-width: 90vw;
      max-height: 100vh;
      transform: scale(0.8);
      opacity: 0;
      transition: transform 0.3s ease, opacity 0.3s ease;
      position: relative;
      background-color: var(--light-background-color);
      padding: 20px;
      border-radius: 1.2rem;
    }
    .full-width-app .css-lightbox .lightbox-overlay .lightbox-content .lightbox-image-wrapper {
      padding: 20px;
      width: 84vw;
      border-radius: 8px 8px 0px 0px;
      display: flex;
      scroll-behavior: smooth;
      overflow-y: auto;
      overflow-x: auto;
      max-height: 850px;
    }
    .full-width-app .css-lightbox .lightbox-overlay .lightbox-content .lightbox-image {
      max-width: 100%;
    }
    .full-width-app .css-lightbox .lightbox-overlay .lightbox-content .lightbox-caption {
      position: relative;
      bottom: auto;
      left: auto;
      right: auto;
      background: var(--light-background-color);
      color: var(--dark-text-color);
      padding: 15px 20px;
      text-align: center;
      font-size: 16px;
      border-radius: 0 0 8px 8px;
      max-width: 100%;
    }
    .full-width-app .css-lightbox .lightbox-overlay .lightbox-content .lightbox-caption h4 {
      margin: 0 0 5px 0;
      color: var(--dark-text-color);
    }
    .full-width-app .css-lightbox .lightbox-overlay .lightbox-content .lightbox-caption p {
      margin: 0;
      opacity: 0.9;
    }
    @media (max-width: 768px) {
      .full-width-app .css-lightbox .lightbox-overlay .lightbox-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 20px;
      }
      .full-width-app .css-lightbox .lightbox-overlay .lightbox-content {
        max-width: 95vw;
        max-height: 95vh;
      }
      .full-width-app .css-lightbox .lightbox-overlay .lightbox-content .lightbox-caption {
        position: static;
        margin-top: 20px;
        border-radius: 8px;
      }
    }
    .server-banner {
      display: block;
      color: #FFFFE2;
      padding-bottom: 0.25rem;
      padding-top: 0.6rem;
      text-align: center;
      position: relative;
      z-index: 999;
    }
    .server-banner.red {
      background-color: #C9581F;
    }
    .server-banner.green {
      background-color: #70A262;
    }
    .true-false-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;
    }
    .true-false-container .header-ribbon {
      margin: 1.25rem;
      width: fit-content;
      display: flex;
      align-items: center;
    }
    .true-false-container .question-container {
      margin: 0;
      height: auto;
      min-height: 50%;
      max-height: 60%;
      width: 90%;
      border: 0px;
      align-items: normal;
    }
    .true-false-container .question-container .card-body {
      padding: 0;
    }
    .true-false-container .question-container .card-body .question-header {
      font-family: "Cubano", sans-serif;
      font-size: 1.6rem;
      color: var(--light-text-color);
      width: 100%;
      font-weight: 500;
      background-color: var(--info-color);
      padding: 1rem 1.25rem;
      border-radius: 0.8rem 0.8rem 0 0;
    }
    .true-false-container .question-container .card-body .question-text {
      padding: 1em;
      margin: 1rem;
      align-items: center;
      height: 100%;
      overflow-y: auto;
    }
    .true-false-container .question-container .card-body .question-text p {
      font-size: 1.6rem;
      height: fit-content;
      max-height: 95%;
    }
    .timed-slide-card {
      width: 70vw;
      height: 70vh;
      min-width: 50vw;
      display: flex;
      flex-direction: column;
      background-color: var(--light-background-color-darker);
      border-color: transparent;
      margin: auto;
      border-radius: 0.8rem;
    }
    .timed-slide-card .timed-slide-text-container {
      flex: 1 1 auto;
      min-height: 0;
      background-color: var(--light-background-color);
      margin: 1rem 1rem 0 1rem;
      padding: 0 1rem;
      display: flex;
      border-radius: 0.8rem;
      scroll-behavior: smooth;
      overflow-y: auto;
      overflow-x: auto;
    }
    .timed-slide-card .timed-slide-text-container .timed-slide-text {
      margin: 0.5rem;
      width: 100%;
      flex: 1 1 auto;
      min-height: 0;
    }
    .timed-slide-card .timed-slide-nav-container {
      padding: 0 0.75rem 0.75rem 0.75rem;
    }
    .timed-slide-layout {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1.25rem;
      min-height: 100vh;
      width: 100%;
      padding: 0 2rem;
      box-sizing: border-box;
      max-width: 1400px;
      margin: 0 auto;
    }
    .timed-slide-main {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      justify-content: center;
      margin-left: 20px;
    }
    .timed-slide-tts {
      flex: 0 0 320px;
      max-width: 360px;
      position: sticky;
      top: 1rem;
      margin-right: 20px;
    }
    .timed-slide-layout .timed-slide-card {
      width: 100%;
      min-width: 0;
      height: 70vh;
      margin: 0;
    }
    @media (max-width: 1100px) {
      .timed-slide-layout {
        flex-direction: column;
        align-items: center;
        min-height: auto;
        padding: 1rem 1.25rem;
      }
      .timed-slide-main {
        margin-left: 0px;
      }
      .timed-slide-tts {
        width: 100%;
        max-width: 700px;
        position: static;
        margin-right: 0px;
      }
      .timed-slide-layout .timed-slide-card {
        max-width: 900px;
        height: auto;
        min-height: 60vh;
      }
    }
    .restart-finish-activity {
      display: flex;
      flex-grow: 1;
    }
    .restart-finish-activity .card, .restart-finish-activity .floating-menu-container .floating-menu, .floating-menu-container .restart-finish-activity .floating-menu {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      padding: 1rem;
      max-width: 40vw;
      min-width: 30vw;
      z-index: 5;
      bottom: 0;
      max-height: 70vh;
      min-height: fit-content;
      box-shadow: 5px 4px 0 1px var(--box-shadow-color-1);
    }
    .restart-finish-activity .card .header-ribbon, .restart-finish-activity .floating-menu-container .floating-menu .header-ribbon, .floating-menu-container .restart-finish-activity .floating-menu .header-ribbon {
      position: relative;
      top: -10px;
      width: auto;
    }
    .restart-finish-activity .card h2, .restart-finish-activity .floating-menu-container .floating-menu h2, .floating-menu-container .restart-finish-activity .floating-menu h2 {
      text-shadow: 4px 2px var(--primary-color-dark);
      font-size: 370%;
    }
    .activity-report {
      display: flex;
      flex-grow: 1;
    }
    .activity-report .card, .activity-report .floating-menu-container .floating-menu, .floating-menu-container .activity-report .floating-menu {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      padding: 1rem;
      max-width: 40vw;
      min-width: 30vw;
      z-index: 5;
      bottom: 0;
      max-height: 70vh;
      min-height: fit-content;
      box-shadow: 5px 4px 0 1px #cb904a;
    }
    .activity-report .card .header-ribbon, .activity-report .floating-menu-container .floating-menu .header-ribbon, .floating-menu-container .activity-report .floating-menu .header-ribbon {
      position: relative;
      top: -10px;
      width: auto;
    }
    .activity-report .card h2, .activity-report .floating-menu-container .floating-menu h2, .floating-menu-container .activity-report .floating-menu h2 {
      text-shadow: 4px 2px #2c3840;
      font-size: 370%;
    }
    .activity-report .score-card {
      text-align: center;
      border-radius: 1rem;
      height: 10vw;
      width: 10vw;
      justify-content: center;
      display: flex;
      align-items: center;
      flex-direction: column;
      color: #FFFFE2;
    }
    .activity-report .score-card h3, .activity-report .score-card h4, .activity-report .score-card h5, .activity-report .score-card h6 {
      color: inherit;
    }
    .envelope-instructions {
      position: absolute;
      left: 50vw;
      transform: translate(-50%, -25%);
      top: 35vh;
      height: 22vw;
      width: 40vw;
      text-align: center;
    }
    .envelope-instructions .instructions-container {
      background-color: rgba(31, 41, 7, 0.6509803922);
      border-radius: 10px;
    }
    .envelope-instructions p {
      font-family: gin, serif;
      font-weight: normal;
      font-style: italic;
      font-size: 1.6rem;
    }
    @media (max-width: 991.98px) {
      .envelope-instructions {
        top: 28vh;
        height: 33vw;
        width: 60vw;
      }
      .envelope-instructions p {
        font-size: 1.4rem;
      }
    }
    .envelope-instructions.opened {
      opacity: 0;
      transition: opacity 1s 0.5s ease;
    }
    .envelope {
      position: absolute;
      top: 45vh;
      left: 50vw;
      transform: translate(-50%, -25%);
      height: 22vw;
      width: 40vw;
      cursor: pointer;
    }
    @media (max-width: 991.98px) {
      .envelope {
        top: 45vh;
        height: 33vw;
        width: 60vw;
      }
    }
    .envelope.opened {
      cursor: default;
    }
    .envelope .closed-flap {
      position: absolute;
      top: 0;
      z-index: 2;
      transform-origin: top;
      transform: rotateX(0deg);
      transition: transform 1s 1s ease, top 1s 1s;
      width: inherit;
    }
    .envelope .closed-flap img {
      width: inherit;
    }
    .envelope .closed-flap.opened {
      transform: rotateX(180deg);
      opacity: 0;
      transition: transform 1s 0.5s ease, opacity 0.6s 0.5s ease;
    }
    .envelope .open-flap {
      position: absolute;
      top: 0;
      opacity: 0;
      transform-origin: top;
      transition: transform 1s 1s ease;
      width: inherit;
    }
    .envelope .open-flap img {
      width: inherit;
    }
    .envelope .open-flap.opened {
      transform: rotateX(180deg);
      top: 10vh;
      transition: transform 1s 0.5s ease, top 2s 1.5s;
      animation: animateOpenFlapOpacity 2.5s;
    }
    .envelope .envelope-body {
      position: absolute;
      top: 0vh;
      z-index: 1;
      width: inherit;
      height: inherit;
      opacity: 1;
    }
    .envelope .envelope-body img {
      width: inherit;
    }
    .envelope .envelope-body.opened {
      opacity: 0;
      top: 10vh;
      transition: opacity 1s 1.5s ease, top 2s 1.5s;
      animation: fade-out 1s 1.5s;
    }
    .envelope .envelope-back {
      position: absolute;
      top: 0;
      background-color: #e3ce97;
      width: inherit;
      height: 50%;
    }
    .envelope .envelope-back.opened {
      opacity: 0;
      top: 10vh;
      transition: opacity 1s 1.5s ease, top 2s 1.5s;
      animation: fade-out 1s 1.5s;
    }
    .letter-page {
      position: absolute;
      top: 0;
      width: inherit;
      height: inherit;
      z-index: 0;
      background-image: url(/images/pages/invitation/paper-canvas.svg);
      background-size: cover;
      background-repeat: no-repeat;
    }
    .letter-page.opened {
      top: -20vh;
      z-index: 3;
      transition: top 2s 1.5s ease, height 2.5s 1.5s ease, z-index 1s 4s;
    }
    .letter-page .letter-content {
      width: inherit;
      height: inherit;
      overflow-y: hidden;
    }
    .letter-page .letter-content.opened {
      height: 98%;
      width: inherit;
      margin-top: 1%;
    }
    .letter-page .letter-content .letter-head {
      width: 60%;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
    .letter-page .letter-content .title {
      text-align: center;
      color: var(--danger-color);
    }
    .letter-page .letter-content .title.long {
      margin-top: -2vh;
      font-size: 2.5vw;
    }
    .letter-page .letter-content .greeting {
      text-align: left;
      color: var(--dark-color);
      font-family: fenway-park-jf, sans-serif;
      font-weight: 400;
      font-size: 2rem;
    }
    .letter-page .letter-content p {
      margin-left: 2vw;
      margin-right: 2vw;
      text-align: left;
      color: var(--dark-color);
      font-family: henderson-slab-basic, serif;
      font-size: 0.92rem;
      font-weight: 400;
    }
    .letter-page .letter-content .terms-and-conditions {
      overflow-y: auto;
      scroll-behavior: smooth;
      max-height: 20vh;
      background-color: #FFFFE2;
      border-radius: 10px;
      padding-top: 20px;
      padding-bottom: 20px;
    }
    .letter-page .letter-content .terms-and-conditions li {
      margin-left: 2vw;
      margin-right: 2vw;
      color: var(--dark-color);
      font-family: henderson-slab-basic, serif;
      font-size: 0.92rem;
      font-weight: 400;
    }
    .letter-page .letter-content .next-button {
      opacity: 0;
      float: right;
      margin-right: 10px;
      margin-bottom: 5px;
    }
    .letter-page .letter-content .next-button img {
      width: min(100px, 20vw);
    }
    .letter-page .letter-content .next-button.opened {
      opacity: 1;
      transition: opacity 1s 1.5s ease;
    }
    .close-letter-outer {
      position: absolute;
      right: 0;
      border: 0;
      margin: -10px -14px 0px 0px;
      z-index: 3;
    }
    .close-letter-inner {
      position: absolute;
      right: 0;
      border: 0;
      margin: 0px 0px 0px 0px;
      z-index: 3;
    }
    div.validation-messages {
      margin: 0.5rem 0;
    }
    div.validation-messages ul {
      margin: 0;
    }
    div.validation-messages ul > li {
      color: var(--danger-color);
      font-size: 1.3rem;
      font-weight: normal;
      line-height: 1.5rem;
    }
    .attention-arrow {
      transform: rotate(-25deg);
    }
    .wobble-hor-bottom, .stump:before {
      -webkit-animation: wobble-ver-left 0.8s 2s both;
      animation: wobble-ver-left 0.8s 2s both;
      -webkit-animation-duration: 5s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      -webkit-animation-delay: 0s;
    }
    .stump {
      height: 100%;
      width: 100%;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-attachment: fixed;
      isolation: isolate;
    }
    .stump .stump-bg {
      background-image: url("/images/pages/tutorial/book-stump-neutral.svg");
      height: 100%;
      width: 100%;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      position: absolute;
      top: 20vh;
      bottom: 0;
      left: 0;
      right: 0;
      background-attachment: fixed;
      transition: all 200ms ease-in-out;
    }
    .stump:before {
      content: " ";
      height: 28vh;
      width: 27vh;
      background-image: url(/images/global/shapes/arrow-orange.svg);
      background-repeat: no-repeat;
      background-size: contain;
      position: absolute;
      transform: none;
      top: 16vh;
      left: 43vw;
      z-index: 2;
    }
    .travel-guide {
      position: absolute;
      height: 14vh;
      width: 20vh;
      top: 43vh;
      left: 50.5vw;
      transform: skew(300deg, 18deg);
      z-index: 2;
      cursor: pointer;
    }
    .travel-guide:hover ~ .stump-bg {
      background-image: url("/images/pages/tutorial/book-stump-hover-guide.svg");
    }
    .trail-map {
      position: absolute;
      height: 18vh;
      width: 41vh;
      top: 47vh;
      left: 48.5vw;
      transform: skew(129deg, 207deg) rotate(172deg);
      z-index: 1;
      cursor: pointer;
    }
    .attention-arrow {
      transform: rotate(-25deg);
    }
    .wobble-hor-bottom, .stump:before {
      -webkit-animation: wobble-ver-left 0.8s 2s both;
      animation: wobble-ver-left 0.8s 2s both;
      -webkit-animation-duration: 5s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-timing-function: linear;
      -webkit-animation-delay: 0s;
    }
    .basket-game .flashcard {
      margin-right: 1em;
      margin-left: 1em;
    }
    .flashcard.basket-card {
      height: 14em;
      width: 11em;
    }
    .basket-container {
      background-image: url("/images/pages/basket-game/basket-birch-wide.svg");
      width: 13vw;
      height: 10vw;
      background-repeat: no-repeat;
      background-position: center;
      margin: auto;
      flex-grow: 1;
    }
    .cards-row {
      display: flex;
      flex: 2;
      width: 80%;
      justify-content: center;
    }
    .basket-row {
      display: flex;
      flex: 1;
      flex-direction: row;
      justify-content: center;
      width: 68vw;
      align-content: space-around;
      justify-content: space-around;
    }
    @media (max-width: 1499.98px) {
      .basket-row {
        max-width: 60vw;
      }
    }
    .basket-row .drop-container {
      display: flex;
      flex-direction: column;
    }
    .basket-label {
      color: #ffffd6;
      text-shadow: 5px 4px #C9581F;
      z-index: 1;
      width: 80%;
      margin-left: auto;
      text-align: center;
      vertical-align: middle;
      height: 100%;
      font-family: "cubano";
      display: flex;
      flex-direction: column;
      align-content: center;
      justify-content: center;
      font-size: 3vw;
    }
    @media (max-width: 1499.98px) {
      .basket-label {
        font-size: 180%;
      }
    }
    .basket-label p {
      font-size: 2vw;
      -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
      position: relative;
      top: 1.2em;
      left: 0.75em;
      z-index: 1;
      font-family: "cubano";
      color: #ffffd6;
      text-shadow: 5px 4px #C9581F;
    }
    .drop-area-text {
      font-size: 400%;
      text-align: center;
      border-radius: 10px;
      margin-bottom: 1vh;
      height: 2em;
      line-height: 1.7em;
      color: var(--light-text-color);
      transition: 0.2s all;
    }
    .drop-area-text.alert.alert-secondary:before {
      background-image: var(--match-activity-dropspot-image-path);
      background-repeat: no-repeat;
      background-position-y: top;
      content: "";
      position: absolute;
      height: clamp(65px, 3.2vw, 90px);
      width: clamp(120px, 4vw, 160px);
      top: -20px;
      left: -50px;
      transform: rotate(-15deg);
    }
    .drop-area-text.alert.alert-secondary:hover {
      box-shadow: 1px 1px 9px 5px var(--match-activity-highlighter-color);
      background-color: var(--match-activity-highlighter-color);
    }
    .flex-col .drop-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .flex-col .drop-container .drop-area-text {
      height: fit-content;
      margin: max(2vh, 20px);
    }
    .flex-row .drop-container {
      display: flex;
      flex-direction: row;
      align-content: center;
    }
    .fill-blanks {
      font-size: 2.8rem;
      line-height: 1.5;
      color: #001B31;
      background-color: var(--fill-blanks-container-color);
      padding: 2rem 1rem 1rem;
      border-radius: 0.8rem;
      align-items: flex-start;
    }
    .fill-blanks .dash-line-label {
      color: var(--fill-blanks-input-dashes-color);
      text-align: center;
      margin-top: 2px;
      width: 100%;
      line-height: 1em;
      font-family: "cubano";
      font-size: inherit;
    }
    .fill-blanks .blank-word {
      display: inline-block;
      margin-left: 0px;
      margin-right: 0px;
      margin-top: 0.1em;
      cursor: pointer;
      --slot-w: 0.6em;
      --slot-h: 1.4em;
      --slot-gap: 0.10em;
    }
    .fill-blanks .blank-word.syllabics {
      --slot-w: 0.8em;
    }
    .fill-blanks .word-blank-hidden {
      position: absolute;
      opacity: 0;
      width: 1px;
      height: 1px;
    }
    .fill-blanks .blank-slots {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: var(--slot-w);
      column-gap: var(--slot-gap);
      align-items: end;
    }
    .fill-blanks .blank-slot {
      width: var(--slot-w);
      height: var(--slot-h);
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      user-select: none;
    }
    .fill-blanks .letters {
      font-size: inherit;
    }
    .fill-blanks .blank-caret {
      position: absolute;
      left: 50%;
      bottom: -0.3em;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 0.18em solid transparent;
      border-right: 0.18em solid transparent;
      border-bottom: 0.24em solid #2fbf4a;
      opacity: 0;
      pointer-events: none;
    }
    .fill-blanks .blank-slot.is-selected .blank-caret {
      opacity: 1;
    }
    .fill-blanks .blank-glyph {
      font: inherit;
      color: var(--fill-blanks-input-text-color);
      line-height: 1;
      transform: translateY(-0.05em);
    }
    .fill-blanks .blank-underline {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0.15em;
      border-top: 3px solid var(--fill-blanks-input-dashes-color);
    }
    .fill-blanks .blank-slot.is-selected .blank-underline {
      border-top-color: #2fbf4a;
    }
    .fill-blanks .blank-chunk {
      display: inline-flex;
      align-items: flex-start;
      gap: 0;
      margin-right: 0.2em;
      margin-left: 0.2em;
    }
    .fill-blanks .blank-chunk > .letters {
      display: inline-block;
      align-self: flex-start;
      font-size: inherit;
    }
    .multiple-choice-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      height: 100vh;
      min-width: 100%;
    }
    .multiple-choice-container .card-body {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      border-radius: 0.8rem;
      padding: 0.5rem 1.25rem 0.5rem 1.25rem;
    }
    .multiple-choice-container p, .multiple-choice-container h6, .multiple-choice-container label {
      color: var(--black-text-color);
    }
    .full-width-app .multiple-choice-container input[type=checkbox] {
      position: relative;
      top: -0.8rem;
    }
    .full-width-app .multiple-choice-container input[type=checkbox]:after {
      position: relative;
      top: 1.5rem;
    }
    .multiple-choice-container .question-container {
      display: flex;
      align-items: center;
      flex-direction: row;
      justify-content: center;
      width: 70%;
      min-width: 300px;
      background-color: var(--multiple-choice-container-color);
      border-color: transparent;
      border-radius: 0.8rem;
      margin-top: 1.5rem;
      max-height: 26vh;
      min-height: 15vh;
    }
    .multiple-choice-container .question-container .card-body {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .multiple-choice-container .interaction-container {
      display: flex;
      flex-direction: row;
      height: 60vh;
      width: 100%;
    }
    .multiple-choice-container .interaction-container .options-container {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      min-width: 300px;
      background-color: var(--multiple-choice-options-container-color);
      border-color: transparent;
      margin-top: 1.5rem;
      border-radius: 0.8rem;
      max-height: 90%;
    }
    .multiple-choice-container .interaction-container .options-container .multiple-choice-option {
      display: flex;
      justify-content: flex-start;
      background-color: var(--multiple-choice-options-item-color);
      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
      padding: 0.8rem 1.4rem;
      border-radius: 0.1rem;
      cursor: pointer;
      width: 100%;
    }
    .multiple-choice-container .interaction-container .options-container .multiple-choice-option label, .multiple-choice-container .interaction-container .options-container .multiple-choice-option p {
      flex-grow: 1;
      text-align: center;
      cursor: pointer;
      font-weight: 500;
      margin: auto;
    }
    .multiple-choice-container .interaction-container .options-container .multiple-choice-option:hover {
      background-color: var(--multiple-choice-option-hover-color);
    }
    .multiple-choice-container .interaction-container .options-container .multiple-choice-option.active {
      background-color: var(--multiple-choice-option-active-color);
    }
    .multiple-choice-container .interaction-container .options-container .multiple-choice-option.active label, .multiple-choice-container .interaction-container .options-container .multiple-choice-option.active p {
      color: var(--multiple-choice-option-active-text-color);
    }
    .multiple-choice-container .interaction-container .options-container .multiple-choice-option.correct {
      background-color: var(--multiple-choice-option-correct-color);
    }
    .multiple-choice-container .interaction-container .options-container .multiple-choice-option.correct label, .multiple-choice-container .interaction-container .options-container .multiple-choice-option.correct p {
      color: var(--multiple-choice-option-correct-text-color);
    }
    .multiple-choice-container .interaction-container .options-container .multiple-choice-option.wrong {
      background-color: var(--multiple-choice-option-wrong-color);
    }
    .multiple-choice-container .interaction-container .options-container .multiple-choice-option.wrong label, .multiple-choice-container .interaction-container .options-container .multiple-choice-option.wrong p {
      color: var(--multiple-choice-option-wrong-text-color);
    }
    .multiple-choice-container .interaction-container .buttons-container {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      height: 95%;
    }
    .step-selection-container {
      margin-right: min(4vw, 40px);
      margin-left: min(4vw, 40px);
      margin-bottom: min(4vw, 40px);
    }
    .table-header {
      vertical-align: middle;
      text-align: center;
    }
    .table-pill-conjugation {
      display: inline-flex;
      align-items: center;
      vertical-align: middle;
    }
    .popular-verb-container {
      gap: 1rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: left;
    }
    .conjugator-footer {
      min-width: 100%;
      position: absolute;
      height: fit-content;
      bottom: 0;
      left: 0;
    }
    .conjugator-container {
      min-height: 100%;
    }
    .conjugator-content {
      padding-bottom: 10vh;
    }
    .word-search-container .word-search-line {
      display: flex;
    }
    .word-search-container .word-search-line .word-search-cell {
      font-family: "Courier New", Courier, monospace;
      font-weight: 500;
      font-size: 1.4rem;
      text-align: center;
      height: 1.85rem;
      width: 1.85rem;
      cursor: pointer;
    }
    .word-search-container .word-search-line .word-search-cell.correct {
      background-color: var(--accent-color-6-light);
    }
    .word-search-container .word-search-line .word-search-cell.highlighted {
      background-color: var(--yellow-background-color);
    }
    .word-search-container .word-search-line .word-search-cell.overlapped-states {
      background-color: var(--success-color-light);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in srgb, var(--success-color-light) 50%, var(--yellow-background-color) 50%);
      }
    }
    .word-search-container .word-search-line .word-search-cell.hinted {
      background-color: var(--accent-color-1);
    }
    .word-search-container .word-search-line .word-search-cell.default {
      background-color: var(--white-color);
    }
    .word-search-layout {
      padding-top: calc(1.7rem + 5vh + 3vh + 20px);
      display: flex;
      flex-direction: column;
      align-items: center;
      width: var(--grid-width);
      min-width: var(--grid-width);
    }
    .anagram-container {
      display: flex;
    }
    .anagram-container .anagram-display {
      display: grid;
      grid-template-columns: max-content;
      grid-gap: 1rem;
      margin-right: 2rem;
    }
    .anagram-container .anagram-display:has(.anagram-item-display:nth-child(n+6)) {
      grid-template-columns: repeat(2, max-content);
    }
    .anagram-container .anagram-display .anagram-item-display {
      padding: 1rem;
      border: thin solid black;
      border-radius: 5%;
      background-color: var(--disabled-color-dark);
    }
    .anagram-container .anagram-display .anagram-item-display.focused {
      background-color: #00AFFF;
    }
    .anagram-container .anagram-display .anagram-item-display.completed {
      background-color: var(--accent-color-6-light);
    }
    .anagram-container .anagram-display .anagram-item-display.completed-with-solution {
      background-color: var(--accent-color-2);
    }
    .anagram-container .anagram-display .anagram-item-display .anagram-item {
      display: flex;
      justify-content: center;
    }
    .anagram-container .anagram-display .anagram-item-display .anagram-item span {
      font-family: "Courier New", Courier, monospace;
      font-weight: 500;
      font-size: 1.4rem;
      text-align: center;
      background-color: var(--white-color);
      border: thin solid black;
      border-radius: 10%;
      padding: 0 0.2rem;
    }
    .anagram-container .anagram-display .anagram-item-display .anagram-item span.disabled {
      background-color: var(--disabled-color);
    }
    .anagram-container .anagram-display .anagram-item-display .anagram-item span.hinted {
      background-color: #77b8d2;
    }
    .anagram-container .anagram-display .anagram-item-display .anagram-item span.completed {
      background-color: var(--accent-color-6-muted);
    }
    .anagram-container .anagram-display .anagram-item-display .anagram-item span.completed-with-solution {
      background-color: var(--accent-color-1-medium);
    }
    .anagram-container .anagram-button-container {
      align-self: center;
      width: 10rem;
    }
    .anagram-container .anagram-button-container .anagram-button {
      display: flex;
      justify-content: center;
      margin-top: 0.2rem;
    }
    .anagram-container .anagram-image-hint {
      align-self: center;
      width: 20rem;
      height: 20rem;
    }
    .anagram-container .anagram-image-hint img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    .default-content-progress {
      display: flex;
      flex-direction: column;
      text-align: center;
      padding: 0.5rem;
      border-radius: 50px;
    }
    .default-content-progress .badge {
      height: 1.4rem;
      font-size: 1rem;
      margin: 0;
      width: 100%;
      display: flex;
      justify-content: space-around;
    }
    .default-content-progress .badge .course-title {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      max-width: 25vw;
      display: inline-block;
      vertical-align: middle;
    }
    .default-content-progress .badge .default-class-name {
      color: #FFFFE2;
      text-align: start;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      max-width: 25vw;
    }
    .default-content-progress .progress {
      height: 1.4rem;
      border-radius: 10rem;
      position: relative;
      margin-right: 1rem;
      margin-left: 0.1rem;
      margin-top: 0.5rem;
      width: 50%;
    }
    .default-content-progress .progress-bar {
      background-color: var(--progress-bar-filled-area-color);
      color: var(--primary-color);
    }
    .default-content-progress .progress-bar span {
      padding-left: 10px;
      font-size: 1rem;
    }
    .sunset-theme, &:has(.sunset-theme) {
      --core-color: #302f2d;
      --core-color-medium: #434c2b;
      --core-color-dark: #3a4225;
      --primary-color-light: #f5b642;
      --primary-color: #F2A413;
      --primary-color-dark: #e99b0c;
      --primary-color-darker: #aa7109;
      --secondary-color: #D91122;
      --secondary-color-medium: hsl(2, 60%, 44%);
      --secondary-color-dark: hsl(2, 60%, 40%);
      --black-color: #000;
      --white-color: #FFF;
      --radial-nav-color: #d56707;
      --radial-nav-color-dark: #bc5b06;
      --accent-color-1: #F05123;
      --accent-color-1-medium: #e46e07;
      --accent-color-1-dark: #d56707;
      --accent-color-2: #d81f27;
      --accent-color-2-medium: #c01b24;
      --accent-color-2-dark: #b31921;
      --accent-color-3: #6C682F;
      --accent-color-4: #FCD773;
      --accent-color-6: #65b150;
      --accent-color-6-medium: #5b874f;
      --accent-color-6-dark: #4c863c;
      --accent-color-7: #F2A413;
      --accent-color-7-light: #ffda75;
      --accent-color-8: #bc6d00;
      --accent-color-9: #466eb4;
      --neutral-100: #FFFFFF;
      --neutral-200: #FFFFD6;
      --neutral-300: #F5F1C7;
      --neutral-400: #E3CE97;
      --warning-color: var(--secondary-color);
      --warning-color-medium: var(--secondary-color-medium);
      --warning-color-dark: var(--secondary-color-dark);
      --mild-danger-color: var(--accent-color-1);
      --mild-danger-color-medium: var(--accent-color-1-medium);
      --mild-danger-color-dark: var(--accent-color-1-dark);
      --danger-color: var(--accent-color-2);
      --danger-color-medium: var(--accent-color-2-medium);
      --danger-color-dark: var(--accent-color-2-dark);
      --success-color: var(--accent-color-6);
      --success-color-medium: var(--accent-color-6-medium);
      --success-color-dark: var(--accent-color-6-dark);
      --super-success-color: #3a7441;
      --super-success-color-medium: hsl(127, 33%, 28%);
      --super-success-color-dark: #3a7441;
      --info-color: var(--primary-color);
      --light-color: var(--accent-color-1);
      --dark-color: var(--core-color);
      --dark-color-dark: var(--core-color-medium);
      --light-background-color: var(--neutral-200);
      --light-background-color-darker: var(--neutral-300);
      --dark-background-color: var(--core-color);
      --black-background-color: var(--black-color);
      --olive-background-color: var(--accent-color-1);
      --olive-1-background-color: var(--primary-color);
      --olive-2-background-color: var(--accent-color-1-dark);
      --light-text-color: var(--neutral-000);
      --dark-text-color: var(--core-color);
      --black-text-color: var(--black-color);
      --light-pink-text-color: var(--accent-color-4);
      --white-text-color: var(--neutral-000);
      --light-alternate-text-color: var(--dark-text-color);
      --muted-text-color: var(--accent-color-10);
      --link-color: var(--accent-color-10);
      --heading-font-color: var(--black-text-color);
      --body-font-color: var(--black-text-color);
      --body-font-color-light: var(--primary-color-medium);
      --visual-link-color: var(--accent-color-11);
      --global-background-color: var(--dark-color);
      --scroll-bar-container-color: var(--white-color);
      --scroll-bar-color: var(--primary-color);
      --header-row-color: #c8c8c8;
      --blazor-modal-background-color: var(--light-background-color);
      --blazor-modal-box-shadow-color: var(--accent-color-1-dark);
      --blazor-close-btn-color: var(--accent-color-1-dark);
      --blazor-modal-header-image-path: url("/images/global/headers/header-retro-yellow-sunset.svg");
      --blazor-modal-header-color: var(--dark-text-color);
      --modal-close-btn-color: var(--radial-nav-color);
      --modal-close-btn-color-hover: var(--radial-nav-color-dark);
      --modal-open-btn-color: var(--radial-nav-color);
      --modal-open-btn-color-hover: var(--radial-nav-color-dark);
      --timer-background-color: var(--light-background-color-darker);
      --card-counter-background-image-path: url(/images/pages/flashcards/flashcards-ribbon-lrg.svg);
      --card-counter-text-color: var(--dark-color);
      --progress-bar-container-background-color: var(--light-background-color);
      --progress-bar-inner-background-color: var(--neutral-300);
      --progress-bar-text-color: var(--accent-color-1);
      --progress-bar-shadow-color: var(--box-shadow-color-4);
      --progress-bar-filled-area-color: #beca59;
      --progress-bar-filled-area-text-color: var(--dark-text-color);
      --progress-bar-icon-color: var(--accent-color-1);
      --progress-bar-icon-border-color: var(--accent-color-1);
      --toast-default-text-color: var(--black-text-color);
      --toast-info-background-color: var(--accent-color-4);
      --toast-info-text-color: var(--black-text-color);
      --toast-success-background-color: var(--success-color);
      --toast-success-text-color: var(--white-text-color);
      --toast-warning-background-color: var(--info-color);
      --toast-warning-text-color: var(--dark-color);
      --toast-danger-background-color: var(--danger-color);
      --toast-danger-text-color: var(--white-text-color);
      --alert-default-text-color: var(--white-text-color);
      --alert-primary-text-color: var(--accent-color-7-light);
      --alert-primary-image-path: url("/images/global/headers/header-retro-yellow-sunset.svg");
      --alert-info-text-color: var(--white-text-color);
      --alert-info-image-path: url("/images/global/headers/header-yellow-sunset.svg");
      --alert-success-text-color: var(--white-text-color);
      --alert-success-image-path: url("/images/global/headers/header-yellow-sunset.svg");
      --alert-warning-text-color: var(--dark-color);
      --alert-warning-image-path: url("/images/global/headers/header-retro-yellow-sunset.svg");
      --alert-danger-text-color: var(--black-text-color);
      --alert-danger-image-path: url("/images/global/headers/header-retro-red.svg");
      --alert-secondary-text-color: var(--black-text-color);
      --alert-secondary-image-path: url("/images/global/headers/header-retro-yellow-sunset.svg");
      --alert-light-text-color: var(--dark-text-color);
      --alert-light-image-path: url("/images/global/headers/header-retro-light.svg");
      --badge-primary-background-color: var(--core-color);
      --badge-primary-text-color: var(--light-text-color);
      --badge-secondary-background-color: var(--accent-color-1);
      --badge-secondary-text-color: var(--light-text-color);
      --badge-success-background-color: var(--success-color);
      --badge-success-text-color: var(--light-text-color);
      --badge-warning-background-color: var(--primary-color);
      --badge-warning-text-color: var(--light-text-color);
      --badge-danger-background-color: var(--success-color);
      --badge-danger-text-color: var(--light-text-color);
      --badge-info-background-color: var(--info-color);
      --badge-info-text-color: var(--light-text-color);
      --badge-light-background-color: var(--light-color);
      --badge-light-text-color: var(--dark-color);
      --badge-dark-background-color: var(--black-color);
      --badge-dark-text-color: var(--light-text-color);
      --checkbox-color: var(--mild-danger-color)

                                                                                                                    /*Borders*/
                                                                                                                    --dotted-line-header-row-color: var(--neutral-400);
      --vertical-tabs-background-color: var(--dark-background-color);
      --tab-active-color: var(--accent-color-1-dark);
      --tab-text-color: var(--black-text-color);
      --tabs-default-link-color: RGB(var(--accent-color-12-rgb-value));
      --tabs-default-link-hover: var(--accent-color-12-dark);
      --tabs-default-active-color: RGB(var(--accent-color-1-dark-rgb-value));
      --tabs-default-active-hover-color: var(--accent-color-12-light)
                                                                                                                    --tabs-default-text-color: var(--black-text-color);
      --animated-tabs-background-color: var(--neutral-100);
      --animated-tabs-active-color: var(--secondary-color);
      --module-popover-background-color: var(--primary-color);
      --module-popover-shadow-color: var(--primary-color-darker);
      --module-popover-heading-color: var(--black-text-color);
      --lesson-popover-background-color: var(--primary-color);
      --lesson-popover-shadow-color: var(--primary-color-darker);
      --lesson-default-border-color: var(--primary-color-dark);
      --lesson-optional-border-color: var(--accent-color-8);
      --lesson-inprogress-border-color: var(--accent-color-3);
      --lesson-completed-border-color: var(--success-color);
      --lesson-completed-highlight-color: var(--accent-color-4);
      --lesson-shadow-color: #be000040;
      --activity-complete-checkmark-color: var(--accent-color-4);
      --activity-icon-frame-color: var(--primary-color);
      --activity-icon-background-color: var(--light-background-color-darker);
      --activity-menu-ribbon-image-neutral: url(/images/levels/activities/activity-ribbon-neutral-sunset.svg);
      --activity-menu-ribbon-image-hover: url(/images/levels/activities/activity-ribbon-hover-sunset.svg);
      --background-1-image-path-md: url("/images/global/backgrounds/bg-texture-lines-dark-1000.png");
      --background-1-image-path-lg: url("/images/global/backgrounds/bg-texture-lines-dark-1000.png");
      --background-1-image-path-xl: url("/images/global/backgrounds/bg-texture-lines-dark.svg");
      --background-2-image-path-md: url("/images/themes/wtg-bg-2.svg");
      --background-2-image-path-lg: url("/images/themes/wtg-bg-2.svg");
      --background-2-image-path-xl: url("/images/themes/wtg-bg-2.svg");
      --background-3-image-path-md: url("/images/global/backgrounds/bg-texture-basketweave-dark-1000.png");
      --background-3-image-path-lg: url("/images/global/backgrounds/bg-texture-basketweave-dark-1000.png");
      --background-3-image-path-xl: url("/images/global/backgrounds/bg-texture-basketweave-dark.svg");
      --background-4-image-path: url("/images/global/backgrounds/bg-campsite-animated-wtg.svg");
      --background-5-image-path-md: url("/images/global/backgrounds/bg-mountains-road-1440x607.png");
      --background-5-image-path-lg: url("/images/global/backgrounds/bg-mountains-road-1920x929.png");
      --background-5-image-path-xl: url("/images/global/backgrounds/bg-mountains-road-2500x1406.png");
      --background-5-image-path-xxl: url("/images/global/backgrounds/bg-mountains-road-bg-mountains-road.svg");
      --background-6-image-path-md: url("/images/global/backgrounds/bg-forest-olive.png");
      --background-6-image-path-short: url("/images/global/backgrounds/bg-forest-olive-1440x607.png");
      --background-6-image-path-lg: url("/images/global/backgrounds/bg-forest-olive-1920x929.png");
      --background-6-image-path-xl: url("/images/global/backgrounds/bg-forest-olive-2500x1406.png");
      --background-6-image-path-xxl: url("/images/global/backgrounds/bg-forest-olive.png");
      --background-7-image-path-md: url("/images/global/backgrounds/bg-mountain-forest-1920x929.png");
      --background-7-image-path-short: url("/images/global/backgrounds/bg-mountain-forest-1440x607.png");
      --background-7-image-path-lg: url("/images/global/backgrounds/bg-mountain-forest-2500x1406.png");
      --background-7-image-path-xl: url("/images/global/backgrounds/bg-mountain-forest.png");
      --background-9a-image-path: url("/images/pages/tutorial/bg-camp-closeup-complete-29052023.svg");
      --background-9b-image-path: url("/images/pages/tutorial/bg-camp-closeup-empty.svg");
      --header-ribbon-default-path: url("/images/global/headers/header-ribbon-yellow-sunset.svg");
      --header-ribbon-mustard-image-path: url("/images/global/headers/header-ribbon-yellow-sunset.svg");
      --header-ribbon-mustard-text-color: var(--black-text-color);
      --header-ribbon-olive-image-path: url("/images/global/headers/header-ribbon-orange-sunset.svg");
      --header-ribbon-olive-text-color: var(--black-text-color);
      --header-ribbon-double-left-image-path: url("/images/global/headers/header-ribbon-left-yellow-sunset.svg");
      --header-ribbon-double-right-image-path: url("/images/global/headers/header-ribbon-right-yellow-sunset.svg");
      --header-ribbon-olive-image-path: url("/images/global/headers/header-ribbon-yellow-sunset.svg");
      --header-ribbon-double-left-olive-image-path: url("/images/global/headers/header-ribbon-left-yellow-sunset.svg");
      --header-ribbon-double-right-olive-image-path: url("/images/global/headers/header-ribbon-right-yellow-sunset.svg");
      --header-ribbon-blue-image-path: url("/images/global/headers/header-ribbon-yellow-sunset.svg");
      --header-retro-secondary-image-path: url("/images/global/headers/header-retro-yellow-sunset.svg");
      --flashcard-touch-highlight-color: var(--accent-color-4);
      --flashcard-border-color: var(--accent-color-1-dark);
      --decor-element-tape-color: brightness(100%) sepia(1) hue-rotate(2deg) saturate(300%);
    }
    .sunset-theme .header-ribbon.double-ribbon-left h1, &:has(.sunset-theme) .header-ribbon.double-ribbon-left h1 {
      color: var(--dark-color);
    }
    .sunset-theme .activity-item-body p.grow, &:has(.sunset-theme) .activity-item-body p.grow {
      color: var(--dark-text-color);
    }
    .sunset-theme .slide-card.card, .sunset-theme .floating-menu-container .slide-card.floating-menu, .floating-menu-container .sunset-theme .slide-card.floating-menu, &:has(.sunset-theme) .slide-card.card, &:has(.sunset-theme) .floating-menu-container .slide-card.floating-menu, .floating-menu-container &:has(.sunset-theme) .slide-card.floating-menu {
      height: 90vh;
      width: 80vw;
      overflow: hidden;
      background-color: var(--black-color);
    }
    @media screen and (max-height: 768px) {
      .sunset-theme .slide-card.card, .sunset-theme .floating-menu-container .slide-card.floating-menu, .floating-menu-container .sunset-theme .slide-card.floating-menu, &:has(.sunset-theme) .slide-card.card, &:has(.sunset-theme) .floating-menu-container .slide-card.floating-menu, .floating-menu-container &:has(.sunset-theme) .slide-card.floating-menu {
        width: 78vw;
      }
    }
    @media (max-width: 991.98px) {
      .sunset-theme .slide-card.card, .sunset-theme .floating-menu-container .slide-card.floating-menu, .floating-menu-container .sunset-theme .slide-card.floating-menu, &:has(.sunset-theme) .slide-card.card, &:has(.sunset-theme) .floating-menu-container .slide-card.floating-menu, .floating-menu-container &:has(.sunset-theme) .slide-card.floating-menu {
        width: 76vw;
      }
    }
    .sunset-theme .timed-slide-container, &:has(.sunset-theme) .timed-slide-container {
      position: relative;
      overflow-x: hidden;
      padding: 0;
      isolation: isolate;
      margin-bottom: 0;
      overflow-y: auto;
      max-height: 800px;
      height: 100vh;
    }
    @media (min-width: 1200px) {
      .sunset-theme .timed-slide-container, &:has(.sunset-theme) .timed-slide-container {
        max-height: 1000px;
      }
    }
    @media (min-width: 1500px) {
      .sunset-theme .timed-slide-container, &:has(.sunset-theme) .timed-slide-container {
        max-height: 100%;
      }
    }
    .sunset-theme .timed-slide-card, &:has(.sunset-theme) .timed-slide-card {
      width: 100vw;
      height: 90vh;
      background-color: unset;
    }
    .sunset-theme .timed-slide-card .timed-slide-text-container, &:has(.sunset-theme) .timed-slide-card .timed-slide-text-container {
      overflow-x: unset;
    }
    .sunset-theme .timed-slide-card .timed-slide-nav-container, &:has(.sunset-theme) .timed-slide-card .timed-slide-nav-container {
      z-index: 2;
    }
    .sunset-theme .slide-card .card-body, &:has(.sunset-theme) .slide-card .card-body {
      height: 100%;
      padding: 0;
    }
    .sunset-theme .slide-card .card-body .dotted-line, .sunset-theme .slide-card .card-body .full-width-app hr, .full-width-app .sunset-theme .slide-card .card-body hr, .sunset-theme .slide-card .card-body .cms-preview hr, .cms-preview .sunset-theme .slide-card .card-body hr, .sunset-theme .slide-card .card-body .login-form hr, .login-form .sunset-theme .slide-card .card-body hr, .sunset-theme .slide-card .card-body .cms-layout hr, .cms-layout .sunset-theme .slide-card .card-body hr, .sunset-theme .slide-card .card-body .jumbotron hr, .jumbotron .sunset-theme .slide-card .card-body hr, &:has(.sunset-theme) .slide-card .card-body .dotted-line, &:has(.sunset-theme) .slide-card .card-body .full-width-app hr, .full-width-app &:has(.sunset-theme) .slide-card .card-body hr, &:has(.sunset-theme) .slide-card .card-body .cms-preview hr, .cms-preview &:has(.sunset-theme) .slide-card .card-body hr, &:has(.sunset-theme) .slide-card .card-body .login-form hr, .login-form &:has(.sunset-theme) .slide-card .card-body hr, &:has(.sunset-theme) .slide-card .card-body .cms-layout hr, .cms-layout &:has(.sunset-theme) .slide-card .card-body hr, &:has(.sunset-theme) .slide-card .card-body .jumbotron hr, .jumbotron &:has(.sunset-theme) .slide-card .card-body hr {
      display: none;
    }
    .sunset-theme .slide-nav, &:has(.sunset-theme) .slide-nav {
      margin-left: 3rem;
    }
    .sunset-theme .slide-nav button, &:has(.sunset-theme) .slide-nav button {
      margin-right: 1rem;
      margin-bottom: 1rem;
    }
    .sunset-theme .wtg-logo, &:has(.sunset-theme) .wtg-logo {
      height: 40vh;
      width: 40vh;
      background-image: url("/images/themes/WaketheGiant-Logo-01.svg");
      position: relative;
      background-repeat: no-repeat;
    }
    .sunset-theme .background-3, &:has(.sunset-theme) .background-3 {
      background-image: url("/images/global/backgrounds/bg-texture-basketweave-dark.svg");
      background-color: var(--black-color);
    }
    .sunset-theme .wtg-bg-gradient, &:has(.sunset-theme) .wtg-bg-gradient {
      background-color: var(--black-background-color);
      background: rgb(241, 181, 33);
      background: linear-gradient(180deg, rgb(241, 181, 33) 0%, rgb(233, 101, 52) 50%, rgb(232, 57, 64) 100%);
    }
    .sunset-theme .btn-info, &:has(.sunset-theme) .btn-info {
      color: var(--dark-text-color);
      border-color: var(--dark-text-color);
    }
    .sunset-theme .module-completed, &:has(.sunset-theme) .module-completed {
      background-image: url("/images/themes/WaketheGiant-Logo-01.svg");
    }
    .sunset-theme .lesson-icon img, &:has(.sunset-theme) .lesson-icon img {
      display: none;
    }
    .sunset-theme .lesson-icon, &:has(.sunset-theme) .lesson-icon {
      background-image: url("/images/themes/wtg-pineapple.png");
      background-size: cover;
      background-position: 50% 50%;
    }
    .sunset-theme .question-container.card, .sunset-theme .floating-menu-container .question-container.floating-menu, .floating-menu-container .sunset-theme .question-container.floating-menu, &:has(.sunset-theme) .question-container.card, &:has(.sunset-theme) .floating-menu-container .question-container.floating-menu, .floating-menu-container &:has(.sunset-theme) .question-container.floating-menu {
      background-color: var(--mild-danger-color);
      max-height: 30%;
      margin-top: 0%;
    }
    .sunset-theme .question-container.card .card-body .question-text, .sunset-theme .floating-menu-container .question-container.floating-menu .card-body .question-text, .floating-menu-container .sunset-theme .question-container.floating-menu .card-body .question-text, &:has(.sunset-theme) .question-container.card .card-body .question-text, &:has(.sunset-theme) .floating-menu-container .question-container.floating-menu .card-body .question-text, .floating-menu-container &:has(.sunset-theme) .question-container.floating-menu .card-body .question-text {
      justify-content: center;
    }
    .sunset-theme .question-container.card .question-text p, .sunset-theme .floating-menu-container .question-container.floating-menu .question-text p, .floating-menu-container .sunset-theme .question-container.floating-menu .question-text p, &:has(.sunset-theme) .question-container.card .question-text p, &:has(.sunset-theme) .floating-menu-container .question-container.floating-menu .question-text p, .floating-menu-container &:has(.sunset-theme) .question-container.floating-menu .question-text p {
      color: var(--white-text-color);
      text-align: center;
      font-size: 250%;
      text-wrap: balance;
    }
    .sunset-theme .activity-menu .activity-item .activity-icon-frame img, &:has(.sunset-theme) .activity-menu .activity-item .activity-icon-frame img {
      filter: brightness(0);
    }
    .sunset-theme .btn-primary, &:has(.sunset-theme) .btn-primary {
      color: var(--black-text-color);
    }
    .sunset-theme .btn-primary:not(:disabled):not(.disabled).active:focus, .sunset-theme .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .sunset-theme .btn-primary.dropdown-toggle:focus, &:has(.sunset-theme) .btn-primary:not(:disabled):not(.disabled).active:focus, &:has(.sunset-theme) .btn-primary:not(:disabled):not(.disabled):active:focus, .show > &:has(.sunset-theme) .btn-primary.dropdown-toggle:focus {
      box-shadow: 0 0 0 0.2rem #fbb03c;
    }
    .sunset-theme .btn-primary:not(:disabled):not(.disabled).active, .sunset-theme .btn-primary:not(:disabled):not(.disabled):active, .show > .sunset-theme .btn-primary.dropdown-toggle, &:has(.sunset-theme) .btn-primary:not(:disabled):not(.disabled).active, &:has(.sunset-theme) .btn-primary:not(:disabled):not(.disabled):active, .show > &:has(.sunset-theme) .btn-primary.dropdown-toggle {
      color: var(--black-text-color);
      background-color: #e99b0c;
      border-color: #e99b0c;
    }
    .sunset-theme .background-2, &:has(.sunset-theme) .background-2 {
      background-repeat: no-repeat;
      background-size: cover;
    }
    .sunset-theme .header-ribbon.blue-ribbon h1, .sunset-theme .header-ribbon.blue-ribbon h2, .sunset-theme .header-ribbon.blue-ribbon h3, .sunset-theme .header-ribbon.blue-ribbon h4, .sunset-theme .header-ribbon.blue-ribbon h5, .sunset-theme .header-ribbon.blue-ribbon h6, .sunset-theme .header-ribbon.blue-ribbon p, &:has(.sunset-theme) .header-ribbon.blue-ribbon h1, &:has(.sunset-theme) .header-ribbon.blue-ribbon h2, &:has(.sunset-theme) .header-ribbon.blue-ribbon h3, &:has(.sunset-theme) .header-ribbon.blue-ribbon h4, &:has(.sunset-theme) .header-ribbon.blue-ribbon h5, &:has(.sunset-theme) .header-ribbon.blue-ribbon h6, &:has(.sunset-theme) .header-ribbon.blue-ribbon p {
      color: var(--black-text-color);
    }
    .slide-layout {
      overflow: hidden;
      position: relative;
      height: 100%;
    }
    .slide-columns {
      height: 100%;
    }
    .slide-rows {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: end;
    }
    .slide-rows .top {
      height: 60%;
    }
    .slide-rows .bottom {
      height: 40%;
      display: flex;
      flex-direction: column;
      justify-content: end;
    }
    .bg-headers h1 {
      padding: 1rem 2rem;
      background-color: var(--white-color);
      color: var(--black-text-color);
      text-align: left;
    }
    @media screen and (max-height: 768px) {
      .bg-headers h1 {
        font-size: 220%;
      }
    }
    .wtg-header {
      padding: 1rem 2rem;
      background-color: var(--white-color);
      text-align: left;
      position: absolute;
      z-index: 5;
    }
    .wtg-header.top {
      top: 6%;
    }
    .wtg-header.right {
      right: 0;
    }
    .heart {
      background-image: url("/images/themes/WTG-heart.png");
      background-size: contain;
      display: block;
      width: 24vh;
      height: 24vh;
      background-repeat: no-repeat;
    }
    .wtg-bullets ul {
      list-style-type: none;
    }
    .wtg-bullets li {
      display: grid;
      grid-template-columns: 20px auto;
      justify-content: start;
      align-items: center;
    }
    .wtg-bullets li::before {
      content: "➼";
      font-size: x-large;
      color: var(--white-text-color);
      padding-top: 0.5rem;
    }
    .wtg-speech-bubble {
      background-image: url("/images/themes/WTG-speech-bubble.svg");
      display: inline-block;
      background-repeat: no-repeat;
      margin-right: 0.5rem;
    }
    @media screen and (max-height: 768px) {
      .wtg-speech-bubble p {
        font-size: 90%;
      }
    }
    .wtg-check {
      background-image: url("/images/themes/WTG-checkmark.png");
      background-size: contain;
      display: block;
      background-repeat: no-repeat;
      margin-right: 0.5rem;
    }
    .quotations {
      background-image: url("/images/themes/WTG-quotations.png");
      background-size: contain;
      display: block;
      width: 14vh;
      height: 10vh;
      background-repeat: no-repeat;
    }
    .pointer {
      background-image: url("/images/themes/WTG-arrow.png");
      background-size: contain;
      width: 15vh;
      height: 18vh;
      background-repeat: no-repeat;
      transform: rotate(238deg);
      position: absolute;
      left: 20vw;
      top: 4rem;
    }
    .wtg-arrow-header {
      display: flex;
      justify-content: center;
      margin-bottom: 3rem;
    }
    .wtg-arrow-header h1 {
      background-color: var(--white-color);
      margin-bottom: 0;
      vertical-align: middle;
      display: table-cell;
    }
    .wtg-arrow-header-inner {
      display: flex;
      align-items: center;
      background-color: var(--white-color);
      padding: 0rem 1.8rem;
    }
    .wtg-arrow-header .arrow {
      border-top: 47px solid transparent;
      border-right: 50px solid var(--white-color);
      border-bottom: 47px solid transparent;
      position: relative;
    }
    .wtg-bg-4, .wtg-bg-1, .wtg-bg-2, .wtg-bg-3, .wtg-bg-5, .wtg-bg-6, .wtg-bg-7, .wtg-bg-8, .wtg-bg-9, .wtg-bg-10, .wtg-bg-11, .wtg-bg-12, .wtg-bg-13, .wtg-bg-14, .wtg-bg-15, .wtg-bg-16, .wtg-bg-17, .wtg-bg-18, .wtg-bg-19, .wtg-bg-20, .wtg-bg-21, .wtg-bg-22, .wtg-bg-23 {
      height: 100vh;
      border-radius: 0.5rem;
      position: absolute;
      top: 0;
      height: 100%;
      right: 0;
      left: 0;
      bottom: 0;
      background-size: cover;
      overflow: hidden;
      isolation: isolate;
      background-repeat: no-repeat;
      z-index: 0;
    }
    .wtg-bg .wtg-bg-2, .wtg-bg .wtg-bg-9 {
      background-color: var(--black-color);
    }
    .wtg-bg-1 {
      background-image: url("/images/themes/wtg-bg-1.png");
    }
    .wtg-bg-2 {
      background-image: url("/images/themes/wtg-bg-2.png");
      background-size: contain;
      background-color: var(--black-color);
    }
    .wtg-bg-3 {
      background-image: url("/images/themes/wtg-bg-3.jpg");
    }
    .wtg-bg-4 {
      background-image: url("/images/themes/wtg-bg-4.jpg");
      background-size: cover;
      overflow: hidden;
      background-repeat: no-repeat;
      background-color: rgb(241, 181, 33);
      background-position: 30% 0%;
    }
    .wtg-bg-5 {
      background-image: url("https://github.com/legoodyearrr/cfsvg/blob/main/wtg-bg-5.jpg?raw=true");
      background-position: bottom;
    }
    .wtg-bg-6 {
      background-image: url("/images/themes/wtg-bg-6.png");
      background-position: center;
    }
    .wtg-bg-7 {
      background-image: url("/images/themes/wtg-bg-2.svg");
    }
    .wtg-bg-8 {
      background-image: url("/images/themes/wtg-bg-8.png");
      border-radius: 0;
      background-position: 100%;
    }
    .wtg-bg-8 .question {
      background-image: url("/images/themes/wtg-bg-8-b.svg");
      height: 100%;
      width: 100%;
      background-position: 110%;
    }
    .wtg-bg-9 {
      background-image: url("/images/themes/WTG-watchvideo2.png");
      background-size: contain;
      background-color: var(--black-color);
    }
    .wtg-bg-10 {
      background-image: url("/images/themes/WTG-studentstheexperience.png");
      background-size: cover;
      background-position: 100% 50%;
    }
    .wtg-bg-11 {
      background-image: url("/images/themes/WTG-students-2.png");
      background-size: cover;
      background-position: left;
      border-radius: 0;
    }
    .wtg-bg-12 {
      background-image: url("/images/themes/WTG-youth.png");
      background-size: cover;
      background-position: 100% 50%;
    }
    .wtg-bg-13 {
      background-image: url("/images/themes/WTG-youth.png");
      background-size: cover;
      background-position: 100% 50%;
    }
    .wtg-bg-14 {
      background-image: url("/images/themes/WTG-watchvideo3.png");
      background-size: contain;
      background-color: var(--black-color);
    }
    .wtg-bg-15 {
      background-image: url("/images/themes/WTG-words-bg.png");
      background-size: cover;
    }
    .wtg-bg-16 {
      background-image: url("/images/themes/WTG-values.png");
      background-size: cover;
      background-position: 100% 50%;
    }
    .wtg-bg-17 {
      background-image: url("/images/themes/WTG-participation.png");
      background-size: cover;
      background-position: 100% 50%;
      height: 100%;
      border-left: 10px solid white;
      margin-left: -15px;
    }
    .wtg-bg-18 {
      background-image: url("/images/themes/WTG-dosomething.png");
      background-size: cover;
      background-position: 100% 50%;
      height: 100%;
      border-left: 10px solid white;
      margin-left: -15px;
    }
    .wtg-bg-19 {
      background-image: url("/images/themes/WTG-remember.png");
      background-size: cover;
      background-position: 100% 50%;
      height: 100%;
      border-left: 10px solid white;
      border-radius: 0;
    }
    .wtg-bg-20 {
      background-image: url("/images/themes/WTG-megaphone.png");
      background-size: contain;
      margin: 2rem;
    }
    .wtg-bg-21 {
      background-image: url("/images/themes/WTG-remember2.png");
      background-size: cover;
      background-position: 100% 50%;
      height: 100%;
      border-left: 10px solid white;
      border-radius: 0;
      margin-left: -15px;
    }
    .wtg-bg-22 {
      background-image: url("/images/themes/WTG-peopletalking.png");
      background-size: contain;
      margin: 2rem;
    }
    .wtg-bg-23 {
      background-image: url("/images/themes/WTG-magnifyingglass.png");
      background-size: cover;
      margin: 2rem;
      background-position: top;
    }
    .wtg-bg-24 {
      background-image: url("/images/themes/WTG-magnifyingglass2.png");
      background-size: cover;
      margin: 2rem;
      background-position: top;
      height: 100%;
    }
    .wtg-bg-25 {
      background-image: url("/images/themes/WTG-magnifyingglass3.png");
      background-size: cover;
      margin: 2rem;
      background-position: top;
      height: 100%;
    }
    .wtg-bg-26 {
      background-image: url("/images/themes/WTG-answer1.png");
      background-size: cover;
      background-position: 100% 50%;
      height: 100%;
      border-left: 10px solid white;
      border-radius: 0;
      margin-left: -15px;
    }
    .wtg-bg-27 {
      background-image: url("/images/themes/WTG-answer2.png");
      background-size: cover;
      background-position: 100% 50%;
      height: 100%;
      border-left: 10px solid white;
      border-radius: 0;
      margin-left: -15px;
    }
    .wtg-bg-28 {
      background-image: url("/images/themes/WTG-answer3.png");
      background-size: cover;
      background-position: 100% 50%;
      height: 100%;
      border-left: 10px solid white;
      border-radius: 0;
      margin-left: -15px;
    }
    .wtg-bg-29 {
      background-image: url("/images/themes/WTG-answer4.png");
      background-size: cover;
      background-position: 100% 50%;
      height: 100%;
      border-left: 10px solid white;
      border-radius: 0;
      margin-left: -15px;
    }
    .wtg-bg-30 {
      background-image: url("/images/themes/WTG-answer5.png");
      background-size: cover;
      background-position: 100% 50%;
      height: 100%;
      border-left: 10px solid white;
      border-radius: 0;
      margin-left: -15px;
    }
    .wtg-bg-31 {
      background-image: url("/images/themes/WTG-magnifyingglass4.png");
      background-size: cover;
      margin: 2rem;
      background-position: top;
      height: 100%;
    }
    .wtg-bg-32 {
      background-image: url("/images/themes/WTG-note.png");
      background-size: contain;
      height: 100%;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      margin: 1vh 14vh;
    }
    .wtg-bg-33 {
      background-image: url("/images/themes/WTG-writing.png");
      background-size: contain;
      height: 100%;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }
    .wtg-bg-34 {
      background-image: url("/images/themes/WTG-laptop.png");
      background-size: contain;
      height: 100%;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }
    .wtg-bg-35 {
      background-image: url("/images/themes/WTG-resources.png");
      height: 50vh;
      max-height: 500px;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      width: 100%;
      margin: auto;
    }
    .wtg-bg-36 {
      background-image: url("/images/themes/WTG-glasses.png");
      background-size: contain;
      height: 100%;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }
    .wtg-bg-37 {
      background-image: url("/images/themes/WTG-tv.png");
      background-size: contain;
      height: 100%;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }
    .wtg-bg-38 {
      background-image: url("/images/themes/WTG-openbook.png");
      background-size: contain;
      height: 50%;
      background-repeat: no-repeat;
      background-position: top;
    }
    .wtg-bg-39 {
      background-image: url("/images/themes/WTG-glossary.png");
      background-size: cover;
      background-position: 50% 50%;
      height: 100%;
      border-left: 10px solid white;
      border-radius: 0;
      margin-left: -15px;
    }
    .wtg-bg-40 {
      background-image: url("/images/themes/WTG-harbour.png");
      background-size: cover;
      background-position: 50% 50%;
      height: 100%;
      border-radius: 0;
    }
    .wtg-bg-41 {
      background-image: url("/images/themes/WTG-welcoming.png");
      background-size: cover;
      height: 100%;
      background-position: 100%;
      border-radius: 0;
    }
    .wtg-bg-42 {
      background-image: url("/images/themes/WTG-revival.png");
      background-size: cover;
      background-position: left;
      height: 100%;
      border-right: 10px solid white;
      border-radius: 0;
      margin-right: -15px;
    }
    .wtg-bg-43 {
      background-image: url("/images/themes/WTG-timeline-1.png");
      background-size: contain;
      border-radius: 0;
      height: 54vh;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }
    .wtg-bg-44 {
      background-image: url("/images/themes/WTG-timeline-2.png");
      background-size: contain;
      border-radius: 0;
      height: 54vh;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }
    .wtg-bg-45 {
      background-image: url("/images/themes/WTG-resources.png");
      background-size: contain;
      border-radius: 0;
      height: 83vh;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }
    .wtg-bg-46 {
      background-image: url("/images/themes/WTG-books.png");
      background-size: contain;
      height: 90vh;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }
    .wtg-bg-47 {
      background-image: url("/images/themes/WTG-glossary2.png");
      background-size: cover;
      background-position: 100% 50%;
      height: 100%;
      border-left: 10px solid white;
      border-radius: 0;
      margin-left: -15px;
    }
    .wtg-bg-48 {
      background-image: url("/images/themes/WTG-glossary3.png");
      background-size: cover;
      background-position: 100% 50%;
      height: 100%;
      border-left: 10px solid white;
      border-radius: 0;
      margin-left: -15px;
    }
    .wtg-bg-49 {
      background-image: url("/images/themes/WTG-glossary4.png");
      background-size: cover;
      background-position: 100% 50%;
      height: 100%;
      border-left: 10px solid white;
      border-radius: 0;
      margin-left: -15px;
    }
    .wtg-bg-50 {
      background-image: url("/images/themes/WTG-glossary5.png");
      background-size: cover;
      background-position: 100% 50%;
      height: 100%;
      border-left: 10px solid white;
      border-radius: 0;
      margin-left: -15px;
    }
    .wtg-bg-51 {
      background-image: url("/images/themes/WTG-credits.png");
      background-size: cover;
      background-position: top left;
      height: 100%;
      border-radius: 0;
    }
    .nuu-wee-ya-theme, &:has(.nuu-wee-ya-theme) {
      --background-4-image-path: url("/images/global/backgrounds/nuu-wee-ya-bg.svg");
    }
    .moose-cree-theme, &:has(.moose-cree-theme) {
      --background-4-image-path: url("/images/global/backgrounds/moose-cree-bg.svg");
    }
  }
}
@layer utilities {
  :where(.learner-app) {
    .text-underline {
      text-decoration: underline;
    }
    .font-size-xs {
      font-size: 80%;
    }
    @media (max-width: 1499.98px) {
      .font-size-xs {
        font-size: 53.3333333333%;
      }
    }
    @media screen and (max-height: 768px) {
      .font-size-xs {
        font-size: 53.3333333333%;
      }
    }
    .font-size-sm {
      font-size: 90%;
    }
    @media (max-width: 1499.98px) {
      .font-size-sm {
        font-size: 60%;
      }
    }
    @media screen and (max-height: 768px) {
      .font-size-sm {
        font-size: 60%;
      }
    }
    .font-size-md {
      font-size: 120%;
    }
    @media (max-width: 1499.98px) {
      .font-size-md {
        font-size: 80%;
      }
    }
    @media screen and (max-height: 768px) {
      .font-size-md {
        font-size: 80%;
      }
    }
    .font-size-lg {
      font-size: 150%;
    }
    @media (max-width: 1499.98px) {
      .font-size-lg {
        font-size: 100%;
      }
    }
    @media screen and (max-height: 768px) {
      .font-size-lg {
        font-size: 100%;
      }
    }
    .font-size-xl {
      font-size: 200%;
    }
    @media (max-width: 1499.98px) {
      .font-size-xl {
        font-size: 133.3333333333%;
      }
    }
    @media screen and (max-height: 768px) {
      .font-size-xl {
        font-size: 133.3333333333%;
      }
    }
    .full-width-app .text-muted, .cms-preview .text-muted, .login-form .text-muted, .cms-layout .text-muted {
      color: var(--muted-text-color);
    }
    .full-width-app .text-white, .cms-preview .text-white, .login-form .text-white, .cms-layout .text-white {
      color: var(--light-text-color);
    }
    .full-width-app .text-disabled, .cms-preview .text-disabled, .login-form .text-disabled, .cms-layout .text-disabled {
      color: var(--primary-color-dark);
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in srgb, var(--primary-color-dark) 50%, var(--white-color) 50%);
      }
    }
    .full-width-app .text-primary, .cms-preview .text-primary, .login-form .text-primary, .cms-layout .text-primary {
      color: var(--primary-color);
    }
    .full-width-app .text-secondary, .cms-preview .text-secondary, .login-form .text-secondary, .cms-layout .text-secondary {
      color: var(--secondary-color);
    }
    .full-width-app .text-success, .cms-preview .text-success, .login-form .text-success, .cms-layout .text-success {
      color: var(--success-color);
    }
    .full-width-app .text-info, .cms-preview .text-info, .login-form .text-info, .cms-layout .text-info {
      color: var(--info-color);
    }
    .full-width-app .text-warning, .cms-preview .text-warning, .login-form .text-warning, .cms-layout .text-warning {
      color: var(--warning-color);
    }
    .full-width-app .text-danger, .cms-preview .text-danger, .login-form .text-danger, .cms-layout .text-danger {
      color: var(--danger-color);
    }
    .full-width-app .text-mild-danger, .cms-preview .text-mild-danger, .login-form .text-mild-danger, .cms-layout .text-mild-danger {
      color: var(--mild-danger-color);
    }
    .full-width-app .text-light, .cms-preview .text-light, .login-form .text-light, .cms-layout .text-light {
      color: var(--white-color);
    }
    .full-width-app .text-dark, .cms-preview .text-dark, .login-form .text-dark, .cms-layout .text-dark {
      color: var(--dark-color);
    }
    .full-width-app .text-olive, .cms-preview .text-olive, .login-form .text-olive, .cms-layout .text-olive {
      color: var(--accent-color-10);
    }
    .full-width-app .text-pink, .cms-preview .text-pink, .login-form .text-pink, .cms-layout .text-pink {
      color: var(--accent-color-7);
    }
    .full-width-app .text-light-pink, .cms-preview .text-light-pink, .login-form .text-light-pink, .cms-layout .text-light-pink {
      color: var(--accent-color-7-light);
    }
    .full-width-app .text-orange, .cms-preview .text-orange, .login-form .text-orange, .cms-layout .text-orange {
      color: var(--accent-color-1);
    }
    .full-width-app .text-beige, .cms-preview .text-beige, .login-form .text-beige, .cms-layout .text-beige {
      color: var(--neutral-300);
    }
    .full-width-app .text-olive, .cms-preview .text-olive, .login-form .text-olive, .cms-layout .text-olive {
      color: var(--dark-color);
    }
    .full-width-app .text-pink, .cms-preview .text-pink, .login-form .text-pink, .cms-layout .text-pink {
      color: var(--accent-color-7);
    }
    .full-width-app .text-light-pink, .cms-preview .text-light-pink, .login-form .text-light-pink, .cms-layout .text-light-pink {
      color: var(--light-pink-text-color);
    }
    .full-width-app .text-beige, .cms-preview .text-beige, .login-form .text-beige, .cms-layout .text-beige {
      color: var(--neutral-300);
    }
    .full-width-app .script-font, .cms-preview .script-font, .login-form .script-font, .cms-layout .script-font {
      font-family: fenway-park-jf, sans-serif;
      font-weight: 400;
      font-style: normal;
    }
    .full-width-app .serif-font, .cms-preview .serif-font, .login-form .serif-font, .cms-layout .serif-font {
      font-family: gin, serif;
      font-weight: 400;
      font-style: normal;
    }
    .full-width-app .slab-font, .cms-preview .slab-font, .login-form .slab-font, .cms-layout .slab-font {
      font-family: henderson-slab-basic, serif;
      font-weight: 900;
      font-style: normal;
    }
    .full-width-app .heading-font, .cms-preview .heading-font, .login-form .heading-font, .cms-layout .heading-font {
      font-family: "Cubano", sans-serif;
      font-weight: 400;
    }
    .full-width-app .small, .cms-preview .small, .login-form .small, .cms-layout .small {
      font-size: 75%;
      font-weight: 400;
    }
    .cms-layout .font-size-xs, .cms-layout .font-size-sm {
      font-weight: 700;
    }
    .cms-layout .font-size-xs {
      font-size: 0.9rem;
    }
    @media (max-width: 1499.98px) {
      .cms-layout .font-size-xs {
        font-size: 0.6rem;
      }
    }
    @media screen and (max-height: 768px) {
      .cms-layout .font-size-xs {
        font-size: 0.6rem;
      }
    }
    .cms-layout .font-size-sm {
      font-size: 1rem;
    }
    @media (max-width: 1499.98px) {
      .cms-layout .font-size-sm {
        font-size: 0.6666666667rem;
      }
    }
    @media screen and (max-height: 768px) {
      .cms-layout .font-size-sm {
        font-size: 0.6666666667rem;
      }
    }
    .cms-layout .font-size-md {
      font-size: 1.2rem;
    }
    @media (max-width: 1499.98px) {
      .cms-layout .font-size-md {
        font-size: 0.8rem;
      }
    }
    @media screen and (max-height: 768px) {
      .cms-layout .font-size-md {
        font-size: 0.8rem;
      }
    }
    .cms-layout .font-size-lg {
      font-size: 1.8rem;
    }
    @media (max-width: 1499.98px) {
      .cms-layout .font-size-lg {
        font-size: 1.2rem;
      }
    }
    @media screen and (max-height: 768px) {
      .cms-layout .font-size-lg {
        font-size: 1.2rem;
      }
    }
    .cms-layout .font-size-xl {
      font-size: 3rem;
    }
    @media (max-width: 1499.98px) {
      .cms-layout .font-size-xl {
        font-size: 2rem;
      }
    }
    @media screen and (max-height: 768px) {
      .cms-layout .font-size-xl {
        font-size: 2rem;
      }
    }
    @media print {
      .no-print {
        visibility: hidden;
      }
    }
    .border {
      border: 2px solid var(--neutral-400);
    }
    .border-primary {
      border: 2px solid var(--primary-color);
    }
    .border-secondary {
      border: 2px solid var(--secondary-color);
    }
    .border-success {
      border: 2px solid var(--success-color);
    }
    .border-info {
      border: 2px solid var(--info-color);
    }
    .border-warning {
      border: 2px solid var(--warning-color);
    }
    .border-danger {
      border: 2px solid var(--danger-color);
    }
    .border-mild-danger {
      border: 2px solid var(--mild-danger-color);
    }
    .border-light {
      border: 2px solid var(--white-color);
    }
    .border-dark {
      border: 2px solid var(--dark-color);
    }
    .border-olive {
      border: 2px solid var(--accent-color-10);
    }
    .border-pink {
      border: 2px solid var(--accent-color-7);
    }
    .border-light-pink {
      border: 2px solid var(--accent-color-7-light);
    }
    .border-orange {
      border: 2px solid var(--accent-color-1);
    }
    .border-beige {
      border: 2px solid var(--neutral-300);
    }
    .border-light {
      border: 2px dashed var(--neutral-300);
    }
    .w-30 {
      width: 30%;
    }
    @media (max-width: 1199.98px) {
      .w-30 {
        width: 60%;
      }
    }
    @media screen and (max-height: 768px) {
      .w-30 {
        width: 60%;
      }
    }
    .w-40 {
      width: 40%;
    }
    @media (max-width: 1199.98px) {
      .w-40 {
        width: 60%;
      }
    }
    .w-60 {
      width: 60%;
    }
    @media (max-width: 1199.98px) {
      .w-60 {
        width: 80%;
      }
    }
    @media screen and (max-height: 800px) {
      .w-60 {
        width: 80%;
      }
    }
    .w-70 {
      width: 70%;
    }
    @media (max-width: 1199.98px) {
      .w-70 {
        width: 90%;
      }
    }
    @media screen and (max-height: 800px) {
      .w-70 {
        width: 90%;
      }
    }
    @media screen and (max-height: 800px) {
      .w-75 {
        width: 100%;
      }
    }
    .w-80 {
      width: 80%;
    }
    .position-top-left {
      position: fixed;
      top: 0;
      margin-top: 4vh;
      left: 100px;
      transform: translateY(-50%);
    }
    .position-top-right {
      position: fixed;
      top: 0%;
      right: 100px;
      transform: translateY(50%);
      margin-top: 4vh;
    }
    .position-top-center {
      position: absolute;
      top: 0%;
      right: 42%;
      margin-top: 4vh;
      z-index: 1;
    }
    .position-bottom-left {
      position: fixed;
      bottom: 0;
      margin-top: 4vh;
      left: 100px;
      transform: translateY(-50%);
    }
    .position-bottom-right {
      position: fixed;
      bottom: 0%;
      right: 100px;
      transform: translateY(50%);
      margin-top: 4vh;
    }
    .position-bottom-center {
      position: absolute;
      bottom: 0%;
      right: 42%;
      margin-top: 4vh;
      z-index: 1;
    }
    .mt-1 {
      margin-top: min(1vh, 10px);
    }
    .m-1 {
      margin: min(1vh, 10px);
    }
    @media (max-width: 767.98px) {
      .mt-sm-1 {
        margin-top: min(1vh, 10px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-sm-1 {
        margin-top: min(1vh, 10px);
      }
    }
    @media (min-width: 768px) {
      .mt-md-1 {
        margin-top: min(1vh, 10px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-md-1 {
        margin-top: min(1vh, 10px);
      }
    }
    @media (min-width: 992px) {
      .mt-lg-1 {
        margin-top: min(1vh, 10px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-lg-1 {
        margin-top: min(1vh, 10px);
      }
    }
    @media (min-width: 1200px) {
      .mt-xl-1 {
        margin-top: min(1vh, 10px);
      }
    }
    @media screen and (max-height: 900px) {
      .mt-xl-1 {
        margin-top: min(1vh, 10px);
      }
    }
    @media (min-width: 1500px) {
      .mt-xxl-1 {
        margin-top: min(1vh, 10px);
      }
    }
    @media screen and (min-height: 900px) {
      .mt-xxl-1 {
        margin-top: min(1vh, 10px);
      }
    }
    .mt-2 {
      margin-top: min(2vh, 20px);
    }
    @media (max-width: 767.98px) {
      .mt-sm-2 {
        margin-top: min(2vh, 20px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-sm-2 {
        margin-top: min(2vh, 20px);
      }
    }
    @media (min-width: 768px) {
      .mt-md-2 {
        margin-top: min(2vh, 20px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-md-2 {
        margin-top: min(2vh, 20px);
      }
    }
    @media (min-width: 992px) {
      .mt-lg-2 {
        margin-top: min(2vh, 20px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-lg-2 {
        margin-top: min(2vh, 20px);
      }
    }
    @media (min-width: 1200px) {
      .mt-xl-2 {
        margin-top: min(2vh, 20px);
      }
    }
    @media screen and (max-height: 900px) {
      .mt-xl-2 {
        margin-top: min(2vh, 20px);
      }
    }
    @media (min-width: 1500px) {
      .mt-xxl-2 {
        margin-top: min(2vh, 20px);
      }
    }
    @media screen and (min-height: 900px) {
      .mt-xxl-2 {
        margin-top: min(2vh, 20px);
      }
    }
    .mt-3 {
      margin-top: min(3vh, 30px);
    }
    .m-3 {
      margin: min(3vh, 30px);
    }
    @media (max-width: 767.98px) {
      .mt-sm-3 {
        margin-top: min(3vh, 30px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-sm-3 {
        margin-top: min(3vh, 30px);
      }
    }
    @media (min-width: 768px) {
      .mt-md-3 {
        margin-top: min(3vh, 30px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-md-3 {
        margin-top: min(3vh, 30px);
      }
    }
    @media (min-width: 992px) {
      .mt-lg-3 {
        margin-top: min(3vh, 30px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-lg-3 {
        margin-top: min(3vh, 30px);
      }
    }
    @media (min-width: 1200px) {
      .mt-xl-3 {
        margin-top: min(3vh, 30px);
      }
    }
    @media screen and (max-height: 900px) {
      .mt-xl-3 {
        margin-top: min(3vh, 30px);
      }
    }
    @media (min-width: 1500px) {
      .mt-xxl-3 {
        margin-top: min(3vh, 30px);
      }
    }
    @media screen and (min-height: 900px) {
      .mt-xxl-3 {
        margin-top: min(3vh, 30px);
      }
    }
    @media (max-width: 767.98px) {
      .mt-sm-4 {
        margin-top: min(4vh, 40px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-sm-4 {
        margin-top: min(4vh, 40px);
      }
    }
    @media (min-width: 768px) {
      .mt-md-4 {
        margin-top: min(4vh, 40px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-md-4 {
        margin-top: min(4vh, 40px);
      }
    }
    @media (min-width: 992px) {
      .mt-lg-4 {
        margin-top: min(4vh, 40px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-lg-4 {
        margin-top: min(4vh, 40px);
      }
    }
    @media (min-width: 1200px) {
      .mt-xl-4 {
        margin-top: min(4vh, 40px);
      }
    }
    @media screen and (max-height: 900px) {
      .mt-xl-4 {
        margin-top: min(4vh, 40px);
      }
    }
    @media (min-width: 1500px) {
      .mt-xxl-4 {
        margin-top: min(4vh, 40px);
      }
    }
    @media screen and (min-height: 900px) {
      .mt-xxl-4 {
        margin-top: min(4vh, 40px);
      }
    }
    .m-5 {
      margin: min(5vh, 50px);
    }
    @media (max-width: 767.98px) {
      .mt-sm-5 {
        margin-top: min(5vh, 50px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-sm-5 {
        margin-top: min(5vh, 50px);
      }
    }
    @media (min-width: 768px) {
      .mt-md-5 {
        margin-top: min(5vh, 50px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-md-5 {
        margin-top: min(5vh, 50px);
      }
    }
    @media (min-width: 992px) {
      .mt-lg-5 {
        margin-top: min(5vh, 50px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-lg-5 {
        margin-top: min(5vh, 50px);
      }
    }
    @media (min-width: 1200px) {
      .mt-xl-5 {
        margin-top: min(5vh, 50px);
      }
    }
    @media screen and (max-height: 900px) {
      .mt-xl-5 {
        margin-top: min(5vh, 50px);
      }
    }
    @media (min-width: 1500px) {
      .mt-xxl-5 {
        margin-top: min(5vh, 50px);
      }
    }
    @media screen and (min-height: 900px) {
      .mt-xxl-5 {
        margin-top: min(5vh, 50px);
      }
    }
    @media (max-width: 767.98px) {
      .mt-sm-6 {
        margin-top: min(6vh, 60px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-sm-6 {
        margin-top: min(6vh, 60px);
      }
    }
    @media (min-width: 768px) {
      .mt-md-6 {
        margin-top: min(6vh, 60px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-md-6 {
        margin-top: min(6vh, 60px);
      }
    }
    @media (min-width: 992px) {
      .mt-lg-6 {
        margin-top: min(6vh, 60px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-lg-6 {
        margin-top: min(6vh, 60px);
      }
    }
    @media (min-width: 1200px) {
      .mt-xl-6 {
        margin-top: min(6vh, 60px);
      }
    }
    @media screen and (max-height: 900px) {
      .mt-xl-6 {
        margin-top: min(6vh, 60px);
      }
    }
    @media (min-width: 1500px) {
      .mt-xxl-6 {
        margin-top: min(6vh, 60px);
      }
    }
    @media screen and (min-height: 900px) {
      .mt-xxl-6 {
        margin-top: min(6vh, 60px);
      }
    }
    @media (max-width: 767.98px) {
      .mt-sm-7 {
        margin-top: min(7vh, 70px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-sm-7 {
        margin-top: min(7vh, 70px);
      }
    }
    @media (min-width: 768px) {
      .mt-md-7 {
        margin-top: min(7vh, 70px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-md-7 {
        margin-top: min(7vh, 70px);
      }
    }
    @media (min-width: 992px) {
      .mt-lg-7 {
        margin-top: min(7vh, 70px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-lg-7 {
        margin-top: min(7vh, 70px);
      }
    }
    @media (min-width: 1200px) {
      .mt-xl-7 {
        margin-top: min(7vh, 70px);
      }
    }
    @media screen and (max-height: 900px) {
      .mt-xl-7 {
        margin-top: min(7vh, 70px);
      }
    }
    @media (min-width: 1500px) {
      .mt-xxl-7 {
        margin-top: min(7vh, 70px);
      }
    }
    @media screen and (min-height: 900px) {
      .mt-xxl-7 {
        margin-top: min(7vh, 70px);
      }
    }
    .mt-8 {
      margin-top: min(8vh, 80px);
    }
    @media (max-width: 767.98px) {
      .mt-sm-8 {
        margin-top: min(8vh, 80px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-sm-8 {
        margin-top: min(8vh, 80px);
      }
    }
    @media (min-width: 768px) {
      .mt-md-8 {
        margin-top: min(8vh, 80px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-md-8 {
        margin-top: min(8vh, 80px);
      }
    }
    @media (min-width: 992px) {
      .mt-lg-8 {
        margin-top: min(8vh, 80px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-lg-8 {
        margin-top: min(8vh, 80px);
      }
    }
    @media (min-width: 1200px) {
      .mt-xl-8 {
        margin-top: min(8vh, 80px);
      }
    }
    @media screen and (max-height: 900px) {
      .mt-xl-8 {
        margin-top: min(8vh, 80px);
      }
    }
    @media (min-width: 1500px) {
      .mt-xxl-8 {
        margin-top: min(8vh, 80px);
      }
    }
    @media screen and (min-height: 900px) {
      .mt-xxl-8 {
        margin-top: min(8vh, 80px);
      }
    }
    .mt-9 {
      margin-top: min(9vh, 90px);
    }
    .m-9 {
      margin: min(9vh, 90px);
    }
    @media (max-width: 767.98px) {
      .mt-sm-9 {
        margin-top: min(9vh, 90px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-sm-9 {
        margin-top: min(9vh, 90px);
      }
    }
    @media (min-width: 768px) {
      .mt-md-9 {
        margin-top: min(9vh, 90px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-md-9 {
        margin-top: min(9vh, 90px);
      }
    }
    @media (min-width: 992px) {
      .mt-lg-9 {
        margin-top: min(9vh, 90px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-lg-9 {
        margin-top: min(9vh, 90px);
      }
    }
    @media (min-width: 1200px) {
      .mt-xl-9 {
        margin-top: min(9vh, 90px);
      }
    }
    @media screen and (max-height: 900px) {
      .mt-xl-9 {
        margin-top: min(9vh, 90px);
      }
    }
    @media (min-width: 1500px) {
      .mt-xxl-9 {
        margin-top: min(9vh, 90px);
      }
    }
    @media screen and (min-height: 900px) {
      .mt-xxl-9 {
        margin-top: min(9vh, 90px);
      }
    }
    @media (max-width: 767.98px) {
      .mt-sm-10 {
        margin-top: min(10vh, 100px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-sm-10 {
        margin-top: min(10vh, 100px);
      }
    }
    @media (min-width: 768px) {
      .mt-md-10 {
        margin-top: min(10vh, 100px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-md-10 {
        margin-top: min(10vh, 100px);
      }
    }
    @media (min-width: 992px) {
      .mt-lg-10 {
        margin-top: min(10vh, 100px);
      }
    }
    @media screen and (max-height: 768px) {
      .mt-lg-10 {
        margin-top: min(10vh, 100px);
      }
    }
    @media (min-width: 1200px) {
      .mt-xl-10 {
        margin-top: min(10vh, 100px);
      }
    }
    @media screen and (max-height: 900px) {
      .mt-xl-10 {
        margin-top: min(10vh, 100px);
      }
    }
    @media (min-width: 1500px) {
      .mt-xxl-10 {
        margin-top: min(10vh, 100px);
      }
    }
    @media screen and (min-height: 900px) {
      .mt-xxl-10 {
        margin-top: min(10vh, 100px);
      }
    }
    .m-1 {
      margin: min(1vh, 10px);
    }
    @media (max-width: 767.98px) {
      .mb-sm-1 {
        margin-bottom: min(1vh, 10px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-sm-1 {
        margin-bottom: min(1vh, 10px);
      }
    }
    @media (min-width: 768px) {
      .mb-md-1 {
        margin-bottom: min(1vh, 10px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-md-1 {
        margin-bottom: min(1vh, 10px);
      }
    }
    @media (min-width: 992px) {
      .mb-lg-1 {
        margin-bottom: min(1vh, 10px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-lg-1 {
        margin-bottom: min(1vh, 10px);
      }
    }
    @media (min-width: 1200px) {
      .mb-xl-1 {
        margin-bottom: min(1vh, 10px);
      }
    }
    @media screen and (max-height: 900px) {
      .mb-xl-1 {
        margin-bottom: min(1vh, 10px);
      }
    }
    @media (min-width: 1500px) {
      .mb-xxl-1 {
        margin-bottom: min(1vh, 10px);
      }
    }
    @media screen and (min-height: 900px) {
      .mb-xxl-1 {
        margin-bottom: min(1vh, 10px);
      }
    }
    @media (max-width: 767.98px) {
      .mb-sm-2 {
        margin-bottom: min(2vh, 20px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-sm-2 {
        margin-bottom: min(2vh, 20px);
      }
    }
    @media (min-width: 768px) {
      .mb-md-2 {
        margin-bottom: min(2vh, 20px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-md-2 {
        margin-bottom: min(2vh, 20px);
      }
    }
    @media (min-width: 992px) {
      .mb-lg-2 {
        margin-bottom: min(2vh, 20px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-lg-2 {
        margin-bottom: min(2vh, 20px);
      }
    }
    @media (min-width: 1200px) {
      .mb-xl-2 {
        margin-bottom: min(2vh, 20px);
      }
    }
    @media screen and (max-height: 900px) {
      .mb-xl-2 {
        margin-bottom: min(2vh, 20px);
      }
    }
    @media (min-width: 1500px) {
      .mb-xxl-2 {
        margin-bottom: min(2vh, 20px);
      }
    }
    @media screen and (min-height: 900px) {
      .mb-xxl-2 {
        margin-bottom: min(2vh, 20px);
      }
    }
    .m-3 {
      margin: min(3vh, 30px);
    }
    @media (max-width: 767.98px) {
      .mb-sm-3 {
        margin-bottom: min(3vh, 30px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-sm-3 {
        margin-bottom: min(3vh, 30px);
      }
    }
    @media (min-width: 768px) {
      .mb-md-3 {
        margin-bottom: min(3vh, 30px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-md-3 {
        margin-bottom: min(3vh, 30px);
      }
    }
    @media (min-width: 992px) {
      .mb-lg-3 {
        margin-bottom: min(3vh, 30px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-lg-3 {
        margin-bottom: min(3vh, 30px);
      }
    }
    @media (min-width: 1200px) {
      .mb-xl-3 {
        margin-bottom: min(3vh, 30px);
      }
    }
    @media screen and (max-height: 900px) {
      .mb-xl-3 {
        margin-bottom: min(3vh, 30px);
      }
    }
    @media (min-width: 1500px) {
      .mb-xxl-3 {
        margin-bottom: min(3vh, 30px);
      }
    }
    @media screen and (min-height: 900px) {
      .mb-xxl-3 {
        margin-bottom: min(3vh, 30px);
      }
    }
    @media (max-width: 767.98px) {
      .mb-sm-4 {
        margin-bottom: min(4vh, 40px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-sm-4 {
        margin-bottom: min(4vh, 40px);
      }
    }
    @media (min-width: 768px) {
      .mb-md-4 {
        margin-bottom: min(4vh, 40px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-md-4 {
        margin-bottom: min(4vh, 40px);
      }
    }
    @media (min-width: 992px) {
      .mb-lg-4 {
        margin-bottom: min(4vh, 40px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-lg-4 {
        margin-bottom: min(4vh, 40px);
      }
    }
    @media (min-width: 1200px) {
      .mb-xl-4 {
        margin-bottom: min(4vh, 40px);
      }
    }
    @media screen and (max-height: 900px) {
      .mb-xl-4 {
        margin-bottom: min(4vh, 40px);
      }
    }
    @media (min-width: 1500px) {
      .mb-xxl-4 {
        margin-bottom: min(4vh, 40px);
      }
    }
    @media screen and (min-height: 900px) {
      .mb-xxl-4 {
        margin-bottom: min(4vh, 40px);
      }
    }
    .m-5 {
      margin: min(5vh, 50px);
    }
    @media (max-width: 767.98px) {
      .mb-sm-5 {
        margin-bottom: min(5vh, 50px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-sm-5 {
        margin-bottom: min(5vh, 50px);
      }
    }
    @media (min-width: 768px) {
      .mb-md-5 {
        margin-bottom: min(5vh, 50px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-md-5 {
        margin-bottom: min(5vh, 50px);
      }
    }
    @media (min-width: 992px) {
      .mb-lg-5 {
        margin-bottom: min(5vh, 50px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-lg-5 {
        margin-bottom: min(5vh, 50px);
      }
    }
    @media (min-width: 1200px) {
      .mb-xl-5 {
        margin-bottom: min(5vh, 50px);
      }
    }
    @media screen and (max-height: 900px) {
      .mb-xl-5 {
        margin-bottom: min(5vh, 50px);
      }
    }
    @media (min-width: 1500px) {
      .mb-xxl-5 {
        margin-bottom: min(5vh, 50px);
      }
    }
    @media screen and (min-height: 900px) {
      .mb-xxl-5 {
        margin-bottom: min(5vh, 50px);
      }
    }
    @media (max-width: 767.98px) {
      .mb-sm-6 {
        margin-bottom: min(6vh, 60px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-sm-6 {
        margin-bottom: min(6vh, 60px);
      }
    }
    @media (min-width: 768px) {
      .mb-md-6 {
        margin-bottom: min(6vh, 60px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-md-6 {
        margin-bottom: min(6vh, 60px);
      }
    }
    @media (min-width: 992px) {
      .mb-lg-6 {
        margin-bottom: min(6vh, 60px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-lg-6 {
        margin-bottom: min(6vh, 60px);
      }
    }
    @media (min-width: 1200px) {
      .mb-xl-6 {
        margin-bottom: min(6vh, 60px);
      }
    }
    @media screen and (max-height: 900px) {
      .mb-xl-6 {
        margin-bottom: min(6vh, 60px);
      }
    }
    @media (min-width: 1500px) {
      .mb-xxl-6 {
        margin-bottom: min(6vh, 60px);
      }
    }
    @media screen and (min-height: 900px) {
      .mb-xxl-6 {
        margin-bottom: min(6vh, 60px);
      }
    }
    @media (max-width: 767.98px) {
      .mb-sm-7 {
        margin-bottom: min(7vh, 70px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-sm-7 {
        margin-bottom: min(7vh, 70px);
      }
    }
    @media (min-width: 768px) {
      .mb-md-7 {
        margin-bottom: min(7vh, 70px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-md-7 {
        margin-bottom: min(7vh, 70px);
      }
    }
    @media (min-width: 992px) {
      .mb-lg-7 {
        margin-bottom: min(7vh, 70px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-lg-7 {
        margin-bottom: min(7vh, 70px);
      }
    }
    @media (min-width: 1200px) {
      .mb-xl-7 {
        margin-bottom: min(7vh, 70px);
      }
    }
    @media screen and (max-height: 900px) {
      .mb-xl-7 {
        margin-bottom: min(7vh, 70px);
      }
    }
    @media (min-width: 1500px) {
      .mb-xxl-7 {
        margin-bottom: min(7vh, 70px);
      }
    }
    @media screen and (min-height: 900px) {
      .mb-xxl-7 {
        margin-bottom: min(7vh, 70px);
      }
    }
    @media (max-width: 767.98px) {
      .mb-sm-8 {
        margin-bottom: min(8vh, 80px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-sm-8 {
        margin-bottom: min(8vh, 80px);
      }
    }
    @media (min-width: 768px) {
      .mb-md-8 {
        margin-bottom: min(8vh, 80px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-md-8 {
        margin-bottom: min(8vh, 80px);
      }
    }
    @media (min-width: 992px) {
      .mb-lg-8 {
        margin-bottom: min(8vh, 80px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-lg-8 {
        margin-bottom: min(8vh, 80px);
      }
    }
    @media (min-width: 1200px) {
      .mb-xl-8 {
        margin-bottom: min(8vh, 80px);
      }
    }
    @media screen and (max-height: 900px) {
      .mb-xl-8 {
        margin-bottom: min(8vh, 80px);
      }
    }
    @media (min-width: 1500px) {
      .mb-xxl-8 {
        margin-bottom: min(8vh, 80px);
      }
    }
    @media screen and (min-height: 900px) {
      .mb-xxl-8 {
        margin-bottom: min(8vh, 80px);
      }
    }
    .mb-9 {
      margin-bottom: min(9vh, 90px);
    }
    .m-9 {
      margin: min(9vh, 90px);
    }
    @media (max-width: 767.98px) {
      .mb-sm-9 {
        margin-bottom: min(9vh, 90px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-sm-9 {
        margin-bottom: min(9vh, 90px);
      }
    }
    @media (min-width: 768px) {
      .mb-md-9 {
        margin-bottom: min(9vh, 90px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-md-9 {
        margin-bottom: min(9vh, 90px);
      }
    }
    @media (min-width: 992px) {
      .mb-lg-9 {
        margin-bottom: min(9vh, 90px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-lg-9 {
        margin-bottom: min(9vh, 90px);
      }
    }
    @media (min-width: 1200px) {
      .mb-xl-9 {
        margin-bottom: min(9vh, 90px);
      }
    }
    @media screen and (max-height: 900px) {
      .mb-xl-9 {
        margin-bottom: min(9vh, 90px);
      }
    }
    @media (min-width: 1500px) {
      .mb-xxl-9 {
        margin-bottom: min(9vh, 90px);
      }
    }
    @media screen and (min-height: 900px) {
      .mb-xxl-9 {
        margin-bottom: min(9vh, 90px);
      }
    }
    @media (max-width: 767.98px) {
      .mb-sm-10 {
        margin-bottom: min(10vh, 100px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-sm-10 {
        margin-bottom: min(10vh, 100px);
      }
    }
    @media (min-width: 768px) {
      .mb-md-10 {
        margin-bottom: min(10vh, 100px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-md-10 {
        margin-bottom: min(10vh, 100px);
      }
    }
    @media (min-width: 992px) {
      .mb-lg-10 {
        margin-bottom: min(10vh, 100px);
      }
    }
    @media screen and (max-height: 768px) {
      .mb-lg-10 {
        margin-bottom: min(10vh, 100px);
      }
    }
    @media (min-width: 1200px) {
      .mb-xl-10 {
        margin-bottom: min(10vh, 100px);
      }
    }
    @media screen and (max-height: 900px) {
      .mb-xl-10 {
        margin-bottom: min(10vh, 100px);
      }
    }
    @media (min-width: 1500px) {
      .mb-xxl-10 {
        margin-bottom: min(10vh, 100px);
      }
    }
    @media screen and (min-height: 900px) {
      .mb-xxl-10 {
        margin-bottom: min(10vh, 100px);
      }
    }
    .mr-1 {
      margin-right: min(1vw, 10px);
    }
    .m-1 {
      margin: min(1vw, 10px);
    }
    @media (max-width: 767.98px) {
      .mr-sm-1 {
        margin-right: min(1vw, 10px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-sm-1 {
        margin-right: min(1vw, 10px);
      }
    }
    @media (min-width: 768px) {
      .mr-md-1 {
        margin-right: min(1vw, 10px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-md-1 {
        margin-right: min(1vw, 10px);
      }
    }
    @media (min-width: 992px) {
      .mr-lg-1 {
        margin-right: min(1vw, 10px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-lg-1 {
        margin-right: min(1vw, 10px);
      }
    }
    @media (min-width: 1200px) {
      .mr-xl-1 {
        margin-right: min(1vw, 10px);
      }
    }
    @media screen and (max-height: 900px) {
      .mr-xl-1 {
        margin-right: min(1vw, 10px);
      }
    }
    @media (min-width: 1500px) {
      .mr-xxl-1 {
        margin-right: min(1vw, 10px);
      }
    }
    @media screen and (min-height: 900px) {
      .mr-xxl-1 {
        margin-right: min(1vw, 10px);
      }
    }
    .mr-2 {
      margin-right: min(2vw, 20px);
    }
    @media (max-width: 767.98px) {
      .mr-sm-2 {
        margin-right: min(2vw, 20px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-sm-2 {
        margin-right: min(2vw, 20px);
      }
    }
    @media (min-width: 768px) {
      .mr-md-2 {
        margin-right: min(2vw, 20px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-md-2 {
        margin-right: min(2vw, 20px);
      }
    }
    @media (min-width: 992px) {
      .mr-lg-2 {
        margin-right: min(2vw, 20px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-lg-2 {
        margin-right: min(2vw, 20px);
      }
    }
    @media (min-width: 1200px) {
      .mr-xl-2 {
        margin-right: min(2vw, 20px);
      }
    }
    @media screen and (max-height: 900px) {
      .mr-xl-2 {
        margin-right: min(2vw, 20px);
      }
    }
    @media (min-width: 1500px) {
      .mr-xxl-2 {
        margin-right: min(2vw, 20px);
      }
    }
    @media screen and (min-height: 900px) {
      .mr-xxl-2 {
        margin-right: min(2vw, 20px);
      }
    }
    .mr-3 {
      margin-right: min(3vw, 30px);
    }
    .m-3 {
      margin: min(3vw, 30px);
    }
    @media (max-width: 767.98px) {
      .mr-sm-3 {
        margin-right: min(3vw, 30px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-sm-3 {
        margin-right: min(3vw, 30px);
      }
    }
    @media (min-width: 768px) {
      .mr-md-3 {
        margin-right: min(3vw, 30px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-md-3 {
        margin-right: min(3vw, 30px);
      }
    }
    @media (min-width: 992px) {
      .mr-lg-3 {
        margin-right: min(3vw, 30px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-lg-3 {
        margin-right: min(3vw, 30px);
      }
    }
    @media (min-width: 1200px) {
      .mr-xl-3 {
        margin-right: min(3vw, 30px);
      }
    }
    @media screen and (max-height: 900px) {
      .mr-xl-3 {
        margin-right: min(3vw, 30px);
      }
    }
    @media (min-width: 1500px) {
      .mr-xxl-3 {
        margin-right: min(3vw, 30px);
      }
    }
    @media screen and (min-height: 900px) {
      .mr-xxl-3 {
        margin-right: min(3vw, 30px);
      }
    }
    .mr-4 {
      margin-right: min(4vw, 40px);
    }
    @media (max-width: 767.98px) {
      .mr-sm-4 {
        margin-right: min(4vw, 40px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-sm-4 {
        margin-right: min(4vw, 40px);
      }
    }
    @media (min-width: 768px) {
      .mr-md-4 {
        margin-right: min(4vw, 40px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-md-4 {
        margin-right: min(4vw, 40px);
      }
    }
    @media (min-width: 992px) {
      .mr-lg-4 {
        margin-right: min(4vw, 40px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-lg-4 {
        margin-right: min(4vw, 40px);
      }
    }
    @media (min-width: 1200px) {
      .mr-xl-4 {
        margin-right: min(4vw, 40px);
      }
    }
    @media screen and (max-height: 900px) {
      .mr-xl-4 {
        margin-right: min(4vw, 40px);
      }
    }
    @media (min-width: 1500px) {
      .mr-xxl-4 {
        margin-right: min(4vw, 40px);
      }
    }
    @media screen and (min-height: 900px) {
      .mr-xxl-4 {
        margin-right: min(4vw, 40px);
      }
    }
    .mr-5 {
      margin-right: min(5vw, 50px);
    }
    .m-5 {
      margin: min(5vw, 50px);
    }
    @media (max-width: 767.98px) {
      .mr-sm-5 {
        margin-right: min(5vw, 50px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-sm-5 {
        margin-right: min(5vw, 50px);
      }
    }
    @media (min-width: 768px) {
      .mr-md-5 {
        margin-right: min(5vw, 50px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-md-5 {
        margin-right: min(5vw, 50px);
      }
    }
    @media (min-width: 992px) {
      .mr-lg-5 {
        margin-right: min(5vw, 50px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-lg-5 {
        margin-right: min(5vw, 50px);
      }
    }
    @media (min-width: 1200px) {
      .mr-xl-5 {
        margin-right: min(5vw, 50px);
      }
    }
    @media screen and (max-height: 900px) {
      .mr-xl-5 {
        margin-right: min(5vw, 50px);
      }
    }
    @media (min-width: 1500px) {
      .mr-xxl-5 {
        margin-right: min(5vw, 50px);
      }
    }
    @media screen and (min-height: 900px) {
      .mr-xxl-5 {
        margin-right: min(5vw, 50px);
      }
    }
    .mr-6 {
      margin-right: min(6vw, 60px);
    }
    @media (max-width: 767.98px) {
      .mr-sm-6 {
        margin-right: min(6vw, 60px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-sm-6 {
        margin-right: min(6vw, 60px);
      }
    }
    @media (min-width: 768px) {
      .mr-md-6 {
        margin-right: min(6vw, 60px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-md-6 {
        margin-right: min(6vw, 60px);
      }
    }
    @media (min-width: 992px) {
      .mr-lg-6 {
        margin-right: min(6vw, 60px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-lg-6 {
        margin-right: min(6vw, 60px);
      }
    }
    @media (min-width: 1200px) {
      .mr-xl-6 {
        margin-right: min(6vw, 60px);
      }
    }
    @media screen and (max-height: 900px) {
      .mr-xl-6 {
        margin-right: min(6vw, 60px);
      }
    }
    @media (min-width: 1500px) {
      .mr-xxl-6 {
        margin-right: min(6vw, 60px);
      }
    }
    @media screen and (min-height: 900px) {
      .mr-xxl-6 {
        margin-right: min(6vw, 60px);
      }
    }
    .mr-7 {
      margin-right: min(7vw, 70px);
    }
    @media (max-width: 767.98px) {
      .mr-sm-7 {
        margin-right: min(7vw, 70px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-sm-7 {
        margin-right: min(7vw, 70px);
      }
    }
    @media (min-width: 768px) {
      .mr-md-7 {
        margin-right: min(7vw, 70px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-md-7 {
        margin-right: min(7vw, 70px);
      }
    }
    @media (min-width: 992px) {
      .mr-lg-7 {
        margin-right: min(7vw, 70px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-lg-7 {
        margin-right: min(7vw, 70px);
      }
    }
    @media (min-width: 1200px) {
      .mr-xl-7 {
        margin-right: min(7vw, 70px);
      }
    }
    @media screen and (max-height: 900px) {
      .mr-xl-7 {
        margin-right: min(7vw, 70px);
      }
    }
    @media (min-width: 1500px) {
      .mr-xxl-7 {
        margin-right: min(7vw, 70px);
      }
    }
    @media screen and (min-height: 900px) {
      .mr-xxl-7 {
        margin-right: min(7vw, 70px);
      }
    }
    .mr-8 {
      margin-right: min(8vw, 80px);
    }
    @media (max-width: 767.98px) {
      .mr-sm-8 {
        margin-right: min(8vw, 80px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-sm-8 {
        margin-right: min(8vw, 80px);
      }
    }
    @media (min-width: 768px) {
      .mr-md-8 {
        margin-right: min(8vw, 80px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-md-8 {
        margin-right: min(8vw, 80px);
      }
    }
    @media (min-width: 992px) {
      .mr-lg-8 {
        margin-right: min(8vw, 80px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-lg-8 {
        margin-right: min(8vw, 80px);
      }
    }
    @media (min-width: 1200px) {
      .mr-xl-8 {
        margin-right: min(8vw, 80px);
      }
    }
    @media screen and (max-height: 900px) {
      .mr-xl-8 {
        margin-right: min(8vw, 80px);
      }
    }
    @media (min-width: 1500px) {
      .mr-xxl-8 {
        margin-right: min(8vw, 80px);
      }
    }
    @media screen and (min-height: 900px) {
      .mr-xxl-8 {
        margin-right: min(8vw, 80px);
      }
    }
    .mr-9 {
      margin-right: min(9vw, 90px);
    }
    .m-9 {
      margin: min(9vw, 90px);
    }
    @media (max-width: 767.98px) {
      .mr-sm-9 {
        margin-right: min(9vw, 90px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-sm-9 {
        margin-right: min(9vw, 90px);
      }
    }
    @media (min-width: 768px) {
      .mr-md-9 {
        margin-right: min(9vw, 90px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-md-9 {
        margin-right: min(9vw, 90px);
      }
    }
    @media (min-width: 992px) {
      .mr-lg-9 {
        margin-right: min(9vw, 90px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-lg-9 {
        margin-right: min(9vw, 90px);
      }
    }
    @media (min-width: 1200px) {
      .mr-xl-9 {
        margin-right: min(9vw, 90px);
      }
    }
    @media screen and (max-height: 900px) {
      .mr-xl-9 {
        margin-right: min(9vw, 90px);
      }
    }
    @media (min-width: 1500px) {
      .mr-xxl-9 {
        margin-right: min(9vw, 90px);
      }
    }
    @media screen and (min-height: 900px) {
      .mr-xxl-9 {
        margin-right: min(9vw, 90px);
      }
    }
    .mr-10 {
      margin-right: min(10vw, 100px);
    }
    @media (max-width: 767.98px) {
      .mr-sm-10 {
        margin-right: min(10vw, 100px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-sm-10 {
        margin-right: min(10vw, 100px);
      }
    }
    @media (min-width: 768px) {
      .mr-md-10 {
        margin-right: min(10vw, 100px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-md-10 {
        margin-right: min(10vw, 100px);
      }
    }
    @media (min-width: 992px) {
      .mr-lg-10 {
        margin-right: min(10vw, 100px);
      }
    }
    @media screen and (max-height: 768px) {
      .mr-lg-10 {
        margin-right: min(10vw, 100px);
      }
    }
    @media (min-width: 1200px) {
      .mr-xl-10 {
        margin-right: min(10vw, 100px);
      }
    }
    @media screen and (max-height: 900px) {
      .mr-xl-10 {
        margin-right: min(10vw, 100px);
      }
    }
    @media (min-width: 1500px) {
      .mr-xxl-10 {
        margin-right: min(10vw, 100px);
      }
    }
    @media screen and (min-height: 900px) {
      .mr-xxl-10 {
        margin-right: min(10vw, 100px);
      }
    }
    .m-1 {
      margin: min(1vw, 10px);
    }
    @media (max-width: 767.98px) {
      .ml-sm-1 {
        margin-left: min(1vw, 10px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-sm-1 {
        margin-left: min(1vw, 10px);
      }
    }
    @media (min-width: 768px) {
      .ml-md-1 {
        margin-left: min(1vw, 10px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-md-1 {
        margin-left: min(1vw, 10px);
      }
    }
    @media (min-width: 992px) {
      .ml-lg-1 {
        margin-left: min(1vw, 10px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-lg-1 {
        margin-left: min(1vw, 10px);
      }
    }
    @media (min-width: 1200px) {
      .ml-xl-1 {
        margin-left: min(1vw, 10px);
      }
    }
    @media screen and (max-height: 900px) {
      .ml-xl-1 {
        margin-left: min(1vw, 10px);
      }
    }
    @media (min-width: 1500px) {
      .ml-xxl-1 {
        margin-left: min(1vw, 10px);
      }
    }
    @media screen and (min-height: 900px) {
      .ml-xxl-1 {
        margin-left: min(1vw, 10px);
      }
    }
    @media (max-width: 767.98px) {
      .ml-sm-2 {
        margin-left: min(2vw, 20px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-sm-2 {
        margin-left: min(2vw, 20px);
      }
    }
    @media (min-width: 768px) {
      .ml-md-2 {
        margin-left: min(2vw, 20px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-md-2 {
        margin-left: min(2vw, 20px);
      }
    }
    @media (min-width: 992px) {
      .ml-lg-2 {
        margin-left: min(2vw, 20px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-lg-2 {
        margin-left: min(2vw, 20px);
      }
    }
    @media (min-width: 1200px) {
      .ml-xl-2 {
        margin-left: min(2vw, 20px);
      }
    }
    @media screen and (max-height: 900px) {
      .ml-xl-2 {
        margin-left: min(2vw, 20px);
      }
    }
    @media (min-width: 1500px) {
      .ml-xxl-2 {
        margin-left: min(2vw, 20px);
      }
    }
    @media screen and (min-height: 900px) {
      .ml-xxl-2 {
        margin-left: min(2vw, 20px);
      }
    }
    .m-3 {
      margin: min(3vw, 30px);
    }
    @media (max-width: 767.98px) {
      .ml-sm-3 {
        margin-left: min(3vw, 30px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-sm-3 {
        margin-left: min(3vw, 30px);
      }
    }
    @media (min-width: 768px) {
      .ml-md-3 {
        margin-left: min(3vw, 30px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-md-3 {
        margin-left: min(3vw, 30px);
      }
    }
    @media (min-width: 992px) {
      .ml-lg-3 {
        margin-left: min(3vw, 30px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-lg-3 {
        margin-left: min(3vw, 30px);
      }
    }
    @media (min-width: 1200px) {
      .ml-xl-3 {
        margin-left: min(3vw, 30px);
      }
    }
    @media screen and (max-height: 900px) {
      .ml-xl-3 {
        margin-left: min(3vw, 30px);
      }
    }
    @media (min-width: 1500px) {
      .ml-xxl-3 {
        margin-left: min(3vw, 30px);
      }
    }
    @media screen and (min-height: 900px) {
      .ml-xxl-3 {
        margin-left: min(3vw, 30px);
      }
    }
    @media (max-width: 767.98px) {
      .ml-sm-4 {
        margin-left: min(4vw, 40px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-sm-4 {
        margin-left: min(4vw, 40px);
      }
    }
    @media (min-width: 768px) {
      .ml-md-4 {
        margin-left: min(4vw, 40px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-md-4 {
        margin-left: min(4vw, 40px);
      }
    }
    @media (min-width: 992px) {
      .ml-lg-4 {
        margin-left: min(4vw, 40px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-lg-4 {
        margin-left: min(4vw, 40px);
      }
    }
    @media (min-width: 1200px) {
      .ml-xl-4 {
        margin-left: min(4vw, 40px);
      }
    }
    @media screen and (max-height: 900px) {
      .ml-xl-4 {
        margin-left: min(4vw, 40px);
      }
    }
    @media (min-width: 1500px) {
      .ml-xxl-4 {
        margin-left: min(4vw, 40px);
      }
    }
    @media screen and (min-height: 900px) {
      .ml-xxl-4 {
        margin-left: min(4vw, 40px);
      }
    }
    .ml-5 {
      margin-left: min(5vw, 50px);
    }
    .m-5 {
      margin: min(5vw, 50px);
    }
    @media (max-width: 767.98px) {
      .ml-sm-5 {
        margin-left: min(5vw, 50px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-sm-5 {
        margin-left: min(5vw, 50px);
      }
    }
    @media (min-width: 768px) {
      .ml-md-5 {
        margin-left: min(5vw, 50px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-md-5 {
        margin-left: min(5vw, 50px);
      }
    }
    @media (min-width: 992px) {
      .ml-lg-5 {
        margin-left: min(5vw, 50px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-lg-5 {
        margin-left: min(5vw, 50px);
      }
    }
    @media (min-width: 1200px) {
      .ml-xl-5 {
        margin-left: min(5vw, 50px);
      }
    }
    @media screen and (max-height: 900px) {
      .ml-xl-5 {
        margin-left: min(5vw, 50px);
      }
    }
    @media (min-width: 1500px) {
      .ml-xxl-5 {
        margin-left: min(5vw, 50px);
      }
    }
    @media screen and (min-height: 900px) {
      .ml-xxl-5 {
        margin-left: min(5vw, 50px);
      }
    }
    .ml-6 {
      margin-left: min(6vw, 60px);
    }
    @media (max-width: 767.98px) {
      .ml-sm-6 {
        margin-left: min(6vw, 60px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-sm-6 {
        margin-left: min(6vw, 60px);
      }
    }
    @media (min-width: 768px) {
      .ml-md-6 {
        margin-left: min(6vw, 60px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-md-6 {
        margin-left: min(6vw, 60px);
      }
    }
    @media (min-width: 992px) {
      .ml-lg-6 {
        margin-left: min(6vw, 60px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-lg-6 {
        margin-left: min(6vw, 60px);
      }
    }
    @media (min-width: 1200px) {
      .ml-xl-6 {
        margin-left: min(6vw, 60px);
      }
    }
    @media screen and (max-height: 900px) {
      .ml-xl-6 {
        margin-left: min(6vw, 60px);
      }
    }
    @media (min-width: 1500px) {
      .ml-xxl-6 {
        margin-left: min(6vw, 60px);
      }
    }
    @media screen and (min-height: 900px) {
      .ml-xxl-6 {
        margin-left: min(6vw, 60px);
      }
    }
    .ml-7 {
      margin-left: min(7vw, 70px);
    }
    @media (max-width: 767.98px) {
      .ml-sm-7 {
        margin-left: min(7vw, 70px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-sm-7 {
        margin-left: min(7vw, 70px);
      }
    }
    @media (min-width: 768px) {
      .ml-md-7 {
        margin-left: min(7vw, 70px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-md-7 {
        margin-left: min(7vw, 70px);
      }
    }
    @media (min-width: 992px) {
      .ml-lg-7 {
        margin-left: min(7vw, 70px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-lg-7 {
        margin-left: min(7vw, 70px);
      }
    }
    @media (min-width: 1200px) {
      .ml-xl-7 {
        margin-left: min(7vw, 70px);
      }
    }
    @media screen and (max-height: 900px) {
      .ml-xl-7 {
        margin-left: min(7vw, 70px);
      }
    }
    @media (min-width: 1500px) {
      .ml-xxl-7 {
        margin-left: min(7vw, 70px);
      }
    }
    @media screen and (min-height: 900px) {
      .ml-xxl-7 {
        margin-left: min(7vw, 70px);
      }
    }
    .ml-8 {
      margin-left: min(8vw, 80px);
    }
    @media (max-width: 767.98px) {
      .ml-sm-8 {
        margin-left: min(8vw, 80px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-sm-8 {
        margin-left: min(8vw, 80px);
      }
    }
    @media (min-width: 768px) {
      .ml-md-8 {
        margin-left: min(8vw, 80px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-md-8 {
        margin-left: min(8vw, 80px);
      }
    }
    @media (min-width: 992px) {
      .ml-lg-8 {
        margin-left: min(8vw, 80px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-lg-8 {
        margin-left: min(8vw, 80px);
      }
    }
    @media (min-width: 1200px) {
      .ml-xl-8 {
        margin-left: min(8vw, 80px);
      }
    }
    @media screen and (max-height: 900px) {
      .ml-xl-8 {
        margin-left: min(8vw, 80px);
      }
    }
    @media (min-width: 1500px) {
      .ml-xxl-8 {
        margin-left: min(8vw, 80px);
      }
    }
    @media screen and (min-height: 900px) {
      .ml-xxl-8 {
        margin-left: min(8vw, 80px);
      }
    }
    .ml-9 {
      margin-left: min(9vw, 90px);
    }
    .m-9 {
      margin: min(9vw, 90px);
    }
    @media (max-width: 767.98px) {
      .ml-sm-9 {
        margin-left: min(9vw, 90px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-sm-9 {
        margin-left: min(9vw, 90px);
      }
    }
    @media (min-width: 768px) {
      .ml-md-9 {
        margin-left: min(9vw, 90px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-md-9 {
        margin-left: min(9vw, 90px);
      }
    }
    @media (min-width: 992px) {
      .ml-lg-9 {
        margin-left: min(9vw, 90px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-lg-9 {
        margin-left: min(9vw, 90px);
      }
    }
    @media (min-width: 1200px) {
      .ml-xl-9 {
        margin-left: min(9vw, 90px);
      }
    }
    @media screen and (max-height: 900px) {
      .ml-xl-9 {
        margin-left: min(9vw, 90px);
      }
    }
    @media (min-width: 1500px) {
      .ml-xxl-9 {
        margin-left: min(9vw, 90px);
      }
    }
    @media screen and (min-height: 900px) {
      .ml-xxl-9 {
        margin-left: min(9vw, 90px);
      }
    }
    .ml-10 {
      margin-left: min(10vw, 100px);
    }
    @media (max-width: 767.98px) {
      .ml-sm-10 {
        margin-left: min(10vw, 100px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-sm-10 {
        margin-left: min(10vw, 100px);
      }
    }
    @media (min-width: 768px) {
      .ml-md-10 {
        margin-left: min(10vw, 100px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-md-10 {
        margin-left: min(10vw, 100px);
      }
    }
    @media (min-width: 992px) {
      .ml-lg-10 {
        margin-left: min(10vw, 100px);
      }
    }
    @media screen and (max-height: 768px) {
      .ml-lg-10 {
        margin-left: min(10vw, 100px);
      }
    }
    @media (min-width: 1200px) {
      .ml-xl-10 {
        margin-left: min(10vw, 100px);
      }
    }
    @media screen and (max-height: 900px) {
      .ml-xl-10 {
        margin-left: min(10vw, 100px);
      }
    }
    @media (min-width: 1500px) {
      .ml-xxl-10 {
        margin-left: min(10vw, 100px);
      }
    }
    @media screen and (min-height: 900px) {
      .ml-xxl-10 {
        margin-left: min(10vw, 100px);
      }
    }
    @media (min-width: 1500px) {
      .nmt-xxl-1 {
        margin-top: max(-1vh, -10px);
      }
    }
    @media screen and (min-height: 900px) {
      .nmt-xxl-1 {
        margin-top: max(-1vh, -10px);
      }
    }
    @media (min-width: 1200px) {
      .nmt-xl-1 {
        margin-top: max(-1vh, -10px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmt-xl-1 {
        margin-top: max(-1vh, -10px);
      }
    }
    @media (min-width: 992px) {
      .nmt-lg-1 {
        margin-top: max(-1vh, -10px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmt-lg-1 {
        margin-top: max(-1vh, -10px);
      }
    }
    @media (min-width: 768px) {
      .nmt-md-1 {
        margin-top: max(-1vh, -10px);
      }
    }
    @media screen and (max-height: 768px) {
      .nmt-md-1 {
        margin-top: max(-1vh, -10px);
      }
    }
    @media (min-width: 1500px) {
      .nmt-xxl-2 {
        margin-top: max(-2vh, -20px);
      }
    }
    @media screen and (min-height: 900px) {
      .nmt-xxl-2 {
        margin-top: max(-2vh, -20px);
      }
    }
    @media (min-width: 1200px) {
      .nmt-xl-2 {
        margin-top: max(-2vh, -20px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmt-xl-2 {
        margin-top: max(-2vh, -20px);
      }
    }
    @media (min-width: 992px) {
      .nmt-lg-2 {
        margin-top: max(-2vh, -20px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmt-lg-2 {
        margin-top: max(-2vh, -20px);
      }
    }
    @media (min-width: 768px) {
      .nmt-md-2 {
        margin-top: max(-2vh, -20px);
      }
    }
    @media screen and (max-height: 768px) {
      .nmt-md-2 {
        margin-top: max(-2vh, -20px);
      }
    }
    .nmt-3 {
      margin-top: max(-3vh, -30px);
    }
    @media (min-width: 1500px) {
      .nmt-xxl-3 {
        margin-top: max(-3vh, -30px);
      }
    }
    @media screen and (min-height: 900px) {
      .nmt-xxl-3 {
        margin-top: max(-3vh, -30px);
      }
    }
    @media (min-width: 1200px) {
      .nmt-xl-3 {
        margin-top: max(-3vh, -30px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmt-xl-3 {
        margin-top: max(-3vh, -30px);
      }
    }
    @media (min-width: 992px) {
      .nmt-lg-3 {
        margin-top: max(-3vh, -30px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmt-lg-3 {
        margin-top: max(-3vh, -30px);
      }
    }
    @media (min-width: 768px) {
      .nmt-md-3 {
        margin-top: max(-3vh, -30px);
      }
    }
    @media screen and (max-height: 768px) {
      .nmt-md-3 {
        margin-top: max(-3vh, -30px);
      }
    }
    .nmt-4 {
      margin-top: max(-4vh, -40px);
    }
    @media (min-width: 1500px) {
      .nmt-xxl-4 {
        margin-top: max(-4vh, -40px);
      }
    }
    @media screen and (min-height: 900px) {
      .nmt-xxl-4 {
        margin-top: max(-4vh, -40px);
      }
    }
    @media (min-width: 1200px) {
      .nmt-xl-4 {
        margin-top: max(-4vh, -40px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmt-xl-4 {
        margin-top: max(-4vh, -40px);
      }
    }
    @media (min-width: 992px) {
      .nmt-lg-4 {
        margin-top: max(-4vh, -40px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmt-lg-4 {
        margin-top: max(-4vh, -40px);
      }
    }
    @media (min-width: 768px) {
      .nmt-md-4 {
        margin-top: max(-4vh, -40px);
      }
    }
    @media screen and (max-height: 768px) {
      .nmt-md-4 {
        margin-top: max(-4vh, -40px);
      }
    }
    .nmt-5 {
      margin-top: max(-5vh, -50px);
    }
    @media (min-width: 1500px) {
      .nmt-xxl-5 {
        margin-top: max(-5vh, -50px);
      }
    }
    @media screen and (min-height: 900px) {
      .nmt-xxl-5 {
        margin-top: max(-5vh, -50px);
      }
    }
    @media (min-width: 1200px) {
      .nmt-xl-5 {
        margin-top: max(-5vh, -50px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmt-xl-5 {
        margin-top: max(-5vh, -50px);
      }
    }
    @media (min-width: 992px) {
      .nmt-lg-5 {
        margin-top: max(-5vh, -50px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmt-lg-5 {
        margin-top: max(-5vh, -50px);
      }
    }
    @media (min-width: 768px) {
      .nmt-md-5 {
        margin-top: max(-5vh, -50px);
      }
    }
    @media screen and (max-height: 768px) {
      .nmt-md-5 {
        margin-top: max(-5vh, -50px);
      }
    }
    @media (min-width: 1500px) {
      .nmt-xxl-6 {
        margin-top: max(-6vh, -60px);
      }
    }
    @media screen and (min-height: 900px) {
      .nmt-xxl-6 {
        margin-top: max(-6vh, -60px);
      }
    }
    @media (min-width: 1200px) {
      .nmt-xl-6 {
        margin-top: max(-6vh, -60px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmt-xl-6 {
        margin-top: max(-6vh, -60px);
      }
    }
    @media (min-width: 992px) {
      .nmt-lg-6 {
        margin-top: max(-6vh, -60px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmt-lg-6 {
        margin-top: max(-6vh, -60px);
      }
    }
    @media (min-width: 768px) {
      .nmt-md-6 {
        margin-top: max(-6vh, -60px);
      }
    }
    @media screen and (max-height: 768px) {
      .nmt-md-6 {
        margin-top: max(-6vh, -60px);
      }
    }
    @media (min-width: 1500px) {
      .nmt-xxl-7 {
        margin-top: max(-7vh, -70px);
      }
    }
    @media screen and (min-height: 900px) {
      .nmt-xxl-7 {
        margin-top: max(-7vh, -70px);
      }
    }
    @media (min-width: 1200px) {
      .nmt-xl-7 {
        margin-top: max(-7vh, -70px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmt-xl-7 {
        margin-top: max(-7vh, -70px);
      }
    }
    @media (min-width: 992px) {
      .nmt-lg-7 {
        margin-top: max(-7vh, -70px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmt-lg-7 {
        margin-top: max(-7vh, -70px);
      }
    }
    @media (min-width: 768px) {
      .nmt-md-7 {
        margin-top: max(-7vh, -70px);
      }
    }
    @media screen and (max-height: 768px) {
      .nmt-md-7 {
        margin-top: max(-7vh, -70px);
      }
    }
    .nmt-8 {
      margin-top: max(-8vh, -80px);
    }
    @media (min-width: 1500px) {
      .nmt-xxl-8 {
        margin-top: max(-8vh, -80px);
      }
    }
    @media screen and (min-height: 900px) {
      .nmt-xxl-8 {
        margin-top: max(-8vh, -80px);
      }
    }
    @media (min-width: 1200px) {
      .nmt-xl-8 {
        margin-top: max(-8vh, -80px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmt-xl-8 {
        margin-top: max(-8vh, -80px);
      }
    }
    @media (min-width: 992px) {
      .nmt-lg-8 {
        margin-top: max(-8vh, -80px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmt-lg-8 {
        margin-top: max(-8vh, -80px);
      }
    }
    @media (min-width: 768px) {
      .nmt-md-8 {
        margin-top: max(-8vh, -80px);
      }
    }
    @media screen and (max-height: 768px) {
      .nmt-md-8 {
        margin-top: max(-8vh, -80px);
      }
    }
    .nmt-9 {
      margin-top: max(-9vh, -90px);
    }
    @media (min-width: 1500px) {
      .nmt-xxl-9 {
        margin-top: max(-9vh, -90px);
      }
    }
    @media screen and (min-height: 900px) {
      .nmt-xxl-9 {
        margin-top: max(-9vh, -90px);
      }
    }
    @media (min-width: 1200px) {
      .nmt-xl-9 {
        margin-top: max(-9vh, -90px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmt-xl-9 {
        margin-top: max(-9vh, -90px);
      }
    }
    @media (min-width: 992px) {
      .nmt-lg-9 {
        margin-top: max(-9vh, -90px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmt-lg-9 {
        margin-top: max(-9vh, -90px);
      }
    }
    @media (min-width: 768px) {
      .nmt-md-9 {
        margin-top: max(-9vh, -90px);
      }
    }
    @media screen and (max-height: 768px) {
      .nmt-md-9 {
        margin-top: max(-9vh, -90px);
      }
    }
    @media (min-width: 1500px) {
      .nmt-xxl-10 {
        margin-top: max(-10vh, -100px);
      }
    }
    @media screen and (min-height: 900px) {
      .nmt-xxl-10 {
        margin-top: max(-10vh, -100px);
      }
    }
    @media (min-width: 1200px) {
      .nmt-xl-10 {
        margin-top: max(-10vh, -100px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmt-xl-10 {
        margin-top: max(-10vh, -100px);
      }
    }
    @media (min-width: 992px) {
      .nmt-lg-10 {
        margin-top: max(-10vh, -100px);
      }
    }
    @media screen and (min-height: 768px) {
      .nmt-lg-10 {
        margin-top: max(-10vh, -100px);
      }
    }
    @media (min-width: 768px) {
      .nmt-md-10 {
        margin-top: max(-10vh, -100px);
      }
    }
    @media screen and (max-height: 768px) {
      .nmt-md-10 {
        margin-top: max(-10vh, -100px);
      }
    }
    @media (min-width: 576px) {
      .pt-sm-1 {
        padding-top: min(1vh, 10px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-sm-1 {
        padding-top: min(1vh, 10px);
      }
    }
    @media (min-width: 768px) {
      .pt-md-1 {
        padding-top: min(1vh, 10px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-md-1 {
        padding-top: min(1vh, 10px);
      }
    }
    @media (min-width: 992px) {
      .pt-lg-1 {
        padding-top: min(1vh, 10px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-lg-1 {
        padding-top: min(1vh, 10px);
      }
    }
    @media (min-width: 1200px) {
      .pt-xl-1 {
        padding-top: min(1vh, 10px);
      }
    }
    @media (min-width: 1500px) {
      .pt-xxl-1 {
        padding-top: min(1vh, 10px);
      }
    }
    @media (min-width: 576px) {
      .pt-sm-2 {
        padding-top: min(2vh, 20px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-sm-2 {
        padding-top: min(2vh, 20px);
      }
    }
    @media (min-width: 768px) {
      .pt-md-2 {
        padding-top: min(2vh, 20px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-md-2 {
        padding-top: min(2vh, 20px);
      }
    }
    @media (min-width: 992px) {
      .pt-lg-2 {
        padding-top: min(2vh, 20px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-lg-2 {
        padding-top: min(2vh, 20px);
      }
    }
    @media (min-width: 1200px) {
      .pt-xl-2 {
        padding-top: min(2vh, 20px);
      }
    }
    @media (min-width: 1500px) {
      .pt-xxl-2 {
        padding-top: min(2vh, 20px);
      }
    }
    @media (min-width: 576px) {
      .pt-sm-3 {
        padding-top: min(3vh, 30px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-sm-3 {
        padding-top: min(3vh, 30px);
      }
    }
    @media (min-width: 768px) {
      .pt-md-3 {
        padding-top: min(3vh, 30px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-md-3 {
        padding-top: min(3vh, 30px);
      }
    }
    @media (min-width: 992px) {
      .pt-lg-3 {
        padding-top: min(3vh, 30px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-lg-3 {
        padding-top: min(3vh, 30px);
      }
    }
    @media (min-width: 1200px) {
      .pt-xl-3 {
        padding-top: min(3vh, 30px);
      }
    }
    @media (min-width: 1500px) {
      .pt-xxl-3 {
        padding-top: min(3vh, 30px);
      }
    }
    @media (min-width: 576px) {
      .pt-sm-4 {
        padding-top: min(4vh, 40px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-sm-4 {
        padding-top: min(4vh, 40px);
      }
    }
    @media (min-width: 768px) {
      .pt-md-4 {
        padding-top: min(4vh, 40px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-md-4 {
        padding-top: min(4vh, 40px);
      }
    }
    @media (min-width: 992px) {
      .pt-lg-4 {
        padding-top: min(4vh, 40px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-lg-4 {
        padding-top: min(4vh, 40px);
      }
    }
    @media (min-width: 1200px) {
      .pt-xl-4 {
        padding-top: min(4vh, 40px);
      }
    }
    @media (min-width: 1500px) {
      .pt-xxl-4 {
        padding-top: min(4vh, 40px);
      }
    }
    .p-5 {
      padding-top: min(5vh, 50px);
    }
    @media (min-width: 576px) {
      .pt-sm-5 {
        padding-top: min(5vh, 50px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-sm-5 {
        padding-top: min(5vh, 50px);
      }
    }
    @media (min-width: 768px) {
      .pt-md-5 {
        padding-top: min(5vh, 50px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-md-5 {
        padding-top: min(5vh, 50px);
      }
    }
    @media (min-width: 992px) {
      .pt-lg-5 {
        padding-top: min(5vh, 50px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-lg-5 {
        padding-top: min(5vh, 50px);
      }
    }
    @media (min-width: 1200px) {
      .pt-xl-5 {
        padding-top: min(5vh, 50px);
      }
    }
    @media (min-width: 1500px) {
      .pt-xxl-5 {
        padding-top: min(5vh, 50px);
      }
    }
    .pt-6 {
      padding-top: min(6vh, 60px);
    }
    .p-6 {
      padding-top: min(6vh, 60px);
    }
    @media (min-width: 576px) {
      .pt-sm-6 {
        padding-top: min(6vh, 60px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-sm-6 {
        padding-top: min(6vh, 60px);
      }
    }
    @media (min-width: 768px) {
      .pt-md-6 {
        padding-top: min(6vh, 60px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-md-6 {
        padding-top: min(6vh, 60px);
      }
    }
    @media (min-width: 992px) {
      .pt-lg-6 {
        padding-top: min(6vh, 60px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-lg-6 {
        padding-top: min(6vh, 60px);
      }
    }
    @media (min-width: 1200px) {
      .pt-xl-6 {
        padding-top: min(6vh, 60px);
      }
    }
    @media (min-width: 1500px) {
      .pt-xxl-6 {
        padding-top: min(6vh, 60px);
      }
    }
    .pt-7 {
      padding-top: min(7vh, 70px);
    }
    .p-7 {
      padding-top: min(7vh, 70px);
    }
    @media (min-width: 576px) {
      .pt-sm-7 {
        padding-top: min(7vh, 70px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-sm-7 {
        padding-top: min(7vh, 70px);
      }
    }
    @media (min-width: 768px) {
      .pt-md-7 {
        padding-top: min(7vh, 70px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-md-7 {
        padding-top: min(7vh, 70px);
      }
    }
    @media (min-width: 992px) {
      .pt-lg-7 {
        padding-top: min(7vh, 70px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-lg-7 {
        padding-top: min(7vh, 70px);
      }
    }
    @media (min-width: 1200px) {
      .pt-xl-7 {
        padding-top: min(7vh, 70px);
      }
    }
    @media (min-width: 1500px) {
      .pt-xxl-7 {
        padding-top: min(7vh, 70px);
      }
    }
    .pt-8 {
      padding-top: min(8vh, 80px);
    }
    .p-8 {
      padding-top: min(8vh, 80px);
    }
    @media (min-width: 576px) {
      .pt-sm-8 {
        padding-top: min(8vh, 80px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-sm-8 {
        padding-top: min(8vh, 80px);
      }
    }
    @media (min-width: 768px) {
      .pt-md-8 {
        padding-top: min(8vh, 80px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-md-8 {
        padding-top: min(8vh, 80px);
      }
    }
    @media (min-width: 992px) {
      .pt-lg-8 {
        padding-top: min(8vh, 80px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-lg-8 {
        padding-top: min(8vh, 80px);
      }
    }
    @media (min-width: 1200px) {
      .pt-xl-8 {
        padding-top: min(8vh, 80px);
      }
    }
    @media (min-width: 1500px) {
      .pt-xxl-8 {
        padding-top: min(8vh, 80px);
      }
    }
    .pt-9 {
      padding-top: min(9vh, 90px);
    }
    .p-9 {
      padding-top: min(9vh, 90px);
    }
    @media (min-width: 576px) {
      .pt-sm-9 {
        padding-top: min(9vh, 90px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-sm-9 {
        padding-top: min(9vh, 90px);
      }
    }
    @media (min-width: 768px) {
      .pt-md-9 {
        padding-top: min(9vh, 90px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-md-9 {
        padding-top: min(9vh, 90px);
      }
    }
    @media (min-width: 992px) {
      .pt-lg-9 {
        padding-top: min(9vh, 90px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-lg-9 {
        padding-top: min(9vh, 90px);
      }
    }
    @media (min-width: 1200px) {
      .pt-xl-9 {
        padding-top: min(9vh, 90px);
      }
    }
    @media (min-width: 1500px) {
      .pt-xxl-9 {
        padding-top: min(9vh, 90px);
      }
    }
    .pt-10 {
      padding-top: min(10vh, 100px);
    }
    .p-10 {
      padding-top: min(10vh, 100px);
    }
    @media (min-width: 576px) {
      .pt-sm-10 {
        padding-top: min(10vh, 100px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-sm-10 {
        padding-top: min(10vh, 100px);
      }
    }
    @media (min-width: 768px) {
      .pt-md-10 {
        padding-top: min(10vh, 100px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-md-10 {
        padding-top: min(10vh, 100px);
      }
    }
    @media (min-width: 992px) {
      .pt-lg-10 {
        padding-top: min(10vh, 100px);
      }
    }
    @media screen and (max-height: 768px) {
      .pt-lg-10 {
        padding-top: min(10vh, 100px);
      }
    }
    @media (min-width: 1200px) {
      .pt-xl-10 {
        padding-top: min(10vh, 100px);
      }
    }
    @media (min-width: 1500px) {
      .pt-xxl-10 {
        padding-top: min(10vh, 100px);
      }
    }
    @media (min-width: 576px) {
      .pb-sm-1 {
        padding-bottom: min(1vh, 10px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-sm-1 {
        padding-bottom: min(1vh, 10px);
      }
    }
    @media (min-width: 768px) {
      .pb-md-1 {
        padding-bottom: min(1vh, 10px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-md-1 {
        padding-bottom: min(1vh, 10px);
      }
    }
    @media (min-width: 992px) {
      .pb-lg-1 {
        padding-bottom: min(1vh, 10px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-lg-1 {
        padding-bottom: min(1vh, 10px);
      }
    }
    @media (min-width: 1200px) {
      .pb-xl-1 {
        padding-bottom: min(1vh, 10px);
      }
    }
    @media (min-width: 1500px) {
      .pb-xxl-1 {
        padding-bottom: min(1vh, 10px);
      }
    }
    @media (min-width: 576px) {
      .pb-sm-2 {
        padding-bottom: min(2vh, 20px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-sm-2 {
        padding-bottom: min(2vh, 20px);
      }
    }
    @media (min-width: 768px) {
      .pb-md-2 {
        padding-bottom: min(2vh, 20px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-md-2 {
        padding-bottom: min(2vh, 20px);
      }
    }
    @media (min-width: 992px) {
      .pb-lg-2 {
        padding-bottom: min(2vh, 20px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-lg-2 {
        padding-bottom: min(2vh, 20px);
      }
    }
    @media (min-width: 1200px) {
      .pb-xl-2 {
        padding-bottom: min(2vh, 20px);
      }
    }
    @media (min-width: 1500px) {
      .pb-xxl-2 {
        padding-bottom: min(2vh, 20px);
      }
    }
    @media (min-width: 576px) {
      .pb-sm-3 {
        padding-bottom: min(3vh, 30px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-sm-3 {
        padding-bottom: min(3vh, 30px);
      }
    }
    @media (min-width: 768px) {
      .pb-md-3 {
        padding-bottom: min(3vh, 30px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-md-3 {
        padding-bottom: min(3vh, 30px);
      }
    }
    @media (min-width: 992px) {
      .pb-lg-3 {
        padding-bottom: min(3vh, 30px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-lg-3 {
        padding-bottom: min(3vh, 30px);
      }
    }
    @media (min-width: 1200px) {
      .pb-xl-3 {
        padding-bottom: min(3vh, 30px);
      }
    }
    @media (min-width: 1500px) {
      .pb-xxl-3 {
        padding-bottom: min(3vh, 30px);
      }
    }
    @media (min-width: 576px) {
      .pb-sm-4 {
        padding-bottom: min(4vh, 40px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-sm-4 {
        padding-bottom: min(4vh, 40px);
      }
    }
    @media (min-width: 768px) {
      .pb-md-4 {
        padding-bottom: min(4vh, 40px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-md-4 {
        padding-bottom: min(4vh, 40px);
      }
    }
    @media (min-width: 992px) {
      .pb-lg-4 {
        padding-bottom: min(4vh, 40px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-lg-4 {
        padding-bottom: min(4vh, 40px);
      }
    }
    @media (min-width: 1200px) {
      .pb-xl-4 {
        padding-bottom: min(4vh, 40px);
      }
    }
    @media (min-width: 1500px) {
      .pb-xxl-4 {
        padding-bottom: min(4vh, 40px);
      }
    }
    .p-5 {
      padding-bottom: min(5vh, 50px);
    }
    @media (min-width: 576px) {
      .pb-sm-5 {
        padding-bottom: min(5vh, 50px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-sm-5 {
        padding-bottom: min(5vh, 50px);
      }
    }
    @media (min-width: 768px) {
      .pb-md-5 {
        padding-bottom: min(5vh, 50px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-md-5 {
        padding-bottom: min(5vh, 50px);
      }
    }
    @media (min-width: 992px) {
      .pb-lg-5 {
        padding-bottom: min(5vh, 50px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-lg-5 {
        padding-bottom: min(5vh, 50px);
      }
    }
    @media (min-width: 1200px) {
      .pb-xl-5 {
        padding-bottom: min(5vh, 50px);
      }
    }
    @media (min-width: 1500px) {
      .pb-xxl-5 {
        padding-bottom: min(5vh, 50px);
      }
    }
    .pb-6 {
      padding-bottom: min(6vh, 60px);
    }
    .p-6 {
      padding-bottom: min(6vh, 60px);
    }
    @media (min-width: 576px) {
      .pb-sm-6 {
        padding-bottom: min(6vh, 60px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-sm-6 {
        padding-bottom: min(6vh, 60px);
      }
    }
    @media (min-width: 768px) {
      .pb-md-6 {
        padding-bottom: min(6vh, 60px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-md-6 {
        padding-bottom: min(6vh, 60px);
      }
    }
    @media (min-width: 992px) {
      .pb-lg-6 {
        padding-bottom: min(6vh, 60px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-lg-6 {
        padding-bottom: min(6vh, 60px);
      }
    }
    @media (min-width: 1200px) {
      .pb-xl-6 {
        padding-bottom: min(6vh, 60px);
      }
    }
    @media (min-width: 1500px) {
      .pb-xxl-6 {
        padding-bottom: min(6vh, 60px);
      }
    }
    .pb-7 {
      padding-bottom: min(7vh, 70px);
    }
    .p-7 {
      padding-bottom: min(7vh, 70px);
    }
    @media (min-width: 576px) {
      .pb-sm-7 {
        padding-bottom: min(7vh, 70px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-sm-7 {
        padding-bottom: min(7vh, 70px);
      }
    }
    @media (min-width: 768px) {
      .pb-md-7 {
        padding-bottom: min(7vh, 70px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-md-7 {
        padding-bottom: min(7vh, 70px);
      }
    }
    @media (min-width: 992px) {
      .pb-lg-7 {
        padding-bottom: min(7vh, 70px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-lg-7 {
        padding-bottom: min(7vh, 70px);
      }
    }
    @media (min-width: 1200px) {
      .pb-xl-7 {
        padding-bottom: min(7vh, 70px);
      }
    }
    @media (min-width: 1500px) {
      .pb-xxl-7 {
        padding-bottom: min(7vh, 70px);
      }
    }
    .pb-8 {
      padding-bottom: min(8vh, 80px);
    }
    .p-8 {
      padding-bottom: min(8vh, 80px);
    }
    @media (min-width: 576px) {
      .pb-sm-8 {
        padding-bottom: min(8vh, 80px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-sm-8 {
        padding-bottom: min(8vh, 80px);
      }
    }
    @media (min-width: 768px) {
      .pb-md-8 {
        padding-bottom: min(8vh, 80px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-md-8 {
        padding-bottom: min(8vh, 80px);
      }
    }
    @media (min-width: 992px) {
      .pb-lg-8 {
        padding-bottom: min(8vh, 80px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-lg-8 {
        padding-bottom: min(8vh, 80px);
      }
    }
    @media (min-width: 1200px) {
      .pb-xl-8 {
        padding-bottom: min(8vh, 80px);
      }
    }
    @media (min-width: 1500px) {
      .pb-xxl-8 {
        padding-bottom: min(8vh, 80px);
      }
    }
    .pb-9 {
      padding-bottom: min(9vh, 90px);
    }
    .p-9 {
      padding-bottom: min(9vh, 90px);
    }
    @media (min-width: 576px) {
      .pb-sm-9 {
        padding-bottom: min(9vh, 90px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-sm-9 {
        padding-bottom: min(9vh, 90px);
      }
    }
    @media (min-width: 768px) {
      .pb-md-9 {
        padding-bottom: min(9vh, 90px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-md-9 {
        padding-bottom: min(9vh, 90px);
      }
    }
    @media (min-width: 992px) {
      .pb-lg-9 {
        padding-bottom: min(9vh, 90px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-lg-9 {
        padding-bottom: min(9vh, 90px);
      }
    }
    @media (min-width: 1200px) {
      .pb-xl-9 {
        padding-bottom: min(9vh, 90px);
      }
    }
    @media (min-width: 1500px) {
      .pb-xxl-9 {
        padding-bottom: min(9vh, 90px);
      }
    }
    .pb-10 {
      padding-bottom: min(10vh, 100px);
    }
    .p-10 {
      padding-bottom: min(10vh, 100px);
    }
    @media (min-width: 576px) {
      .pb-sm-10 {
        padding-bottom: min(10vh, 100px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-sm-10 {
        padding-bottom: min(10vh, 100px);
      }
    }
    @media (min-width: 768px) {
      .pb-md-10 {
        padding-bottom: min(10vh, 100px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-md-10 {
        padding-bottom: min(10vh, 100px);
      }
    }
    @media (min-width: 992px) {
      .pb-lg-10 {
        padding-bottom: min(10vh, 100px);
      }
    }
    @media screen and (max-height: 768px) {
      .pb-lg-10 {
        padding-bottom: min(10vh, 100px);
      }
    }
    @media (min-width: 1200px) {
      .pb-xl-10 {
        padding-bottom: min(10vh, 100px);
      }
    }
    @media (min-width: 1500px) {
      .pb-xxl-10 {
        padding-bottom: min(10vh, 100px);
      }
    }
    @media (min-width: 576px) {
      .pr-sm-1 {
        padding-right: min(1vw, 10px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-sm-1 {
        padding-right: min(1vw, 10px);
      }
    }
    @media (min-width: 768px) {
      .pr-md-1 {
        padding-right: min(1vw, 10px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-md-1 {
        padding-right: min(1vw, 10px);
      }
    }
    @media (min-width: 992px) {
      .pr-lg-1 {
        padding-right: min(1vw, 10px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-lg-1 {
        padding-right: min(1vw, 10px);
      }
    }
    @media (min-width: 1200px) {
      .pr-xl-1 {
        padding-right: min(1vw, 10px);
      }
    }
    @media (min-width: 1500px) {
      .pr-xxl-1 {
        padding-right: min(1vw, 10px);
      }
    }
    .pr-2 {
      padding-right: min(2vw, 20px);
    }
    @media (min-width: 576px) {
      .pr-sm-2 {
        padding-right: min(2vw, 20px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-sm-2 {
        padding-right: min(2vw, 20px);
      }
    }
    @media (min-width: 768px) {
      .pr-md-2 {
        padding-right: min(2vw, 20px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-md-2 {
        padding-right: min(2vw, 20px);
      }
    }
    @media (min-width: 992px) {
      .pr-lg-2 {
        padding-right: min(2vw, 20px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-lg-2 {
        padding-right: min(2vw, 20px);
      }
    }
    @media (min-width: 1200px) {
      .pr-xl-2 {
        padding-right: min(2vw, 20px);
      }
    }
    @media (min-width: 1500px) {
      .pr-xxl-2 {
        padding-right: min(2vw, 20px);
      }
    }
    @media (min-width: 576px) {
      .pr-sm-3 {
        padding-right: min(3vw, 30px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-sm-3 {
        padding-right: min(3vw, 30px);
      }
    }
    @media (min-width: 768px) {
      .pr-md-3 {
        padding-right: min(3vw, 30px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-md-3 {
        padding-right: min(3vw, 30px);
      }
    }
    @media (min-width: 992px) {
      .pr-lg-3 {
        padding-right: min(3vw, 30px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-lg-3 {
        padding-right: min(3vw, 30px);
      }
    }
    @media (min-width: 1200px) {
      .pr-xl-3 {
        padding-right: min(3vw, 30px);
      }
    }
    @media (min-width: 1500px) {
      .pr-xxl-3 {
        padding-right: min(3vw, 30px);
      }
    }
    @media (min-width: 576px) {
      .pr-sm-4 {
        padding-right: min(4vw, 40px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-sm-4 {
        padding-right: min(4vw, 40px);
      }
    }
    @media (min-width: 768px) {
      .pr-md-4 {
        padding-right: min(4vw, 40px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-md-4 {
        padding-right: min(4vw, 40px);
      }
    }
    @media (min-width: 992px) {
      .pr-lg-4 {
        padding-right: min(4vw, 40px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-lg-4 {
        padding-right: min(4vw, 40px);
      }
    }
    @media (min-width: 1200px) {
      .pr-xl-4 {
        padding-right: min(4vw, 40px);
      }
    }
    @media (min-width: 1500px) {
      .pr-xxl-4 {
        padding-right: min(4vw, 40px);
      }
    }
    .p-5 {
      padding-right: min(5vw, 50px);
    }
    @media (min-width: 576px) {
      .pr-sm-5 {
        padding-right: min(5vw, 50px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-sm-5 {
        padding-right: min(5vw, 50px);
      }
    }
    @media (min-width: 768px) {
      .pr-md-5 {
        padding-right: min(5vw, 50px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-md-5 {
        padding-right: min(5vw, 50px);
      }
    }
    @media (min-width: 992px) {
      .pr-lg-5 {
        padding-right: min(5vw, 50px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-lg-5 {
        padding-right: min(5vw, 50px);
      }
    }
    @media (min-width: 1200px) {
      .pr-xl-5 {
        padding-right: min(5vw, 50px);
      }
    }
    @media (min-width: 1500px) {
      .pr-xxl-5 {
        padding-right: min(5vw, 50px);
      }
    }
    .p-6 {
      padding-right: min(6vw, 60px);
    }
    @media (min-width: 576px) {
      .pr-sm-6 {
        padding-right: min(6vw, 60px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-sm-6 {
        padding-right: min(6vw, 60px);
      }
    }
    @media (min-width: 768px) {
      .pr-md-6 {
        padding-right: min(6vw, 60px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-md-6 {
        padding-right: min(6vw, 60px);
      }
    }
    @media (min-width: 992px) {
      .pr-lg-6 {
        padding-right: min(6vw, 60px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-lg-6 {
        padding-right: min(6vw, 60px);
      }
    }
    @media (min-width: 1200px) {
      .pr-xl-6 {
        padding-right: min(6vw, 60px);
      }
    }
    @media (min-width: 1500px) {
      .pr-xxl-6 {
        padding-right: min(6vw, 60px);
      }
    }
    .p-7 {
      padding-right: min(7vw, 70px);
    }
    @media (min-width: 576px) {
      .pr-sm-7 {
        padding-right: min(7vw, 70px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-sm-7 {
        padding-right: min(7vw, 70px);
      }
    }
    @media (min-width: 768px) {
      .pr-md-7 {
        padding-right: min(7vw, 70px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-md-7 {
        padding-right: min(7vw, 70px);
      }
    }
    @media (min-width: 992px) {
      .pr-lg-7 {
        padding-right: min(7vw, 70px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-lg-7 {
        padding-right: min(7vw, 70px);
      }
    }
    @media (min-width: 1200px) {
      .pr-xl-7 {
        padding-right: min(7vw, 70px);
      }
    }
    @media (min-width: 1500px) {
      .pr-xxl-7 {
        padding-right: min(7vw, 70px);
      }
    }
    .p-8 {
      padding-right: min(8vw, 80px);
    }
    @media (min-width: 576px) {
      .pr-sm-8 {
        padding-right: min(8vw, 80px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-sm-8 {
        padding-right: min(8vw, 80px);
      }
    }
    @media (min-width: 768px) {
      .pr-md-8 {
        padding-right: min(8vw, 80px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-md-8 {
        padding-right: min(8vw, 80px);
      }
    }
    @media (min-width: 992px) {
      .pr-lg-8 {
        padding-right: min(8vw, 80px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-lg-8 {
        padding-right: min(8vw, 80px);
      }
    }
    @media (min-width: 1200px) {
      .pr-xl-8 {
        padding-right: min(8vw, 80px);
      }
    }
    @media (min-width: 1500px) {
      .pr-xxl-8 {
        padding-right: min(8vw, 80px);
      }
    }
    .pr-9 {
      padding-right: min(9vw, 90px);
    }
    .p-9 {
      padding-right: min(9vw, 90px);
    }
    @media (min-width: 576px) {
      .pr-sm-9 {
        padding-right: min(9vw, 90px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-sm-9 {
        padding-right: min(9vw, 90px);
      }
    }
    @media (min-width: 768px) {
      .pr-md-9 {
        padding-right: min(9vw, 90px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-md-9 {
        padding-right: min(9vw, 90px);
      }
    }
    @media (min-width: 992px) {
      .pr-lg-9 {
        padding-right: min(9vw, 90px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-lg-9 {
        padding-right: min(9vw, 90px);
      }
    }
    @media (min-width: 1200px) {
      .pr-xl-9 {
        padding-right: min(9vw, 90px);
      }
    }
    @media (min-width: 1500px) {
      .pr-xxl-9 {
        padding-right: min(9vw, 90px);
      }
    }
    .p-10 {
      padding-right: min(10vw, 100px);
    }
    @media (min-width: 576px) {
      .pr-sm-10 {
        padding-right: min(10vw, 100px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-sm-10 {
        padding-right: min(10vw, 100px);
      }
    }
    @media (min-width: 768px) {
      .pr-md-10 {
        padding-right: min(10vw, 100px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-md-10 {
        padding-right: min(10vw, 100px);
      }
    }
    @media (min-width: 992px) {
      .pr-lg-10 {
        padding-right: min(10vw, 100px);
      }
    }
    @media screen and (max-height: 768px) {
      .pr-lg-10 {
        padding-right: min(10vw, 100px);
      }
    }
    @media (min-width: 1200px) {
      .pr-xl-10 {
        padding-right: min(10vw, 100px);
      }
    }
    @media (min-width: 1500px) {
      .pr-xxl-10 {
        padding-right: min(10vw, 100px);
      }
    }
    @media (min-width: 576px) {
      .pl-sm-1 {
        padding-left: min(1vw, 10px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-sm-1 {
        padding-left: min(1vw, 10px);
      }
    }
    @media (min-width: 768px) {
      .pl-md-1 {
        padding-left: min(1vw, 10px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-md-1 {
        padding-left: min(1vw, 10px);
      }
    }
    @media (min-width: 992px) {
      .pl-lg-1 {
        padding-left: min(1vw, 10px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-lg-1 {
        padding-left: min(1vw, 10px);
      }
    }
    @media (min-width: 1200px) {
      .pl-xl-1 {
        padding-left: min(1vw, 10px);
      }
    }
    @media (min-width: 1500px) {
      .pl-xxl-1 {
        padding-left: min(1vw, 10px);
      }
    }
    @media (min-width: 576px) {
      .pl-sm-2 {
        padding-left: min(2vw, 20px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-sm-2 {
        padding-left: min(2vw, 20px);
      }
    }
    @media (min-width: 768px) {
      .pl-md-2 {
        padding-left: min(2vw, 20px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-md-2 {
        padding-left: min(2vw, 20px);
      }
    }
    @media (min-width: 992px) {
      .pl-lg-2 {
        padding-left: min(2vw, 20px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-lg-2 {
        padding-left: min(2vw, 20px);
      }
    }
    @media (min-width: 1200px) {
      .pl-xl-2 {
        padding-left: min(2vw, 20px);
      }
    }
    @media (min-width: 1500px) {
      .pl-xxl-2 {
        padding-left: min(2vw, 20px);
      }
    }
    @media (min-width: 576px) {
      .pl-sm-3 {
        padding-left: min(3vw, 30px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-sm-3 {
        padding-left: min(3vw, 30px);
      }
    }
    @media (min-width: 768px) {
      .pl-md-3 {
        padding-left: min(3vw, 30px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-md-3 {
        padding-left: min(3vw, 30px);
      }
    }
    @media (min-width: 992px) {
      .pl-lg-3 {
        padding-left: min(3vw, 30px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-lg-3 {
        padding-left: min(3vw, 30px);
      }
    }
    @media (min-width: 1200px) {
      .pl-xl-3 {
        padding-left: min(3vw, 30px);
      }
    }
    @media (min-width: 1500px) {
      .pl-xxl-3 {
        padding-left: min(3vw, 30px);
      }
    }
    @media (min-width: 576px) {
      .pl-sm-4 {
        padding-left: min(4vw, 40px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-sm-4 {
        padding-left: min(4vw, 40px);
      }
    }
    @media (min-width: 768px) {
      .pl-md-4 {
        padding-left: min(4vw, 40px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-md-4 {
        padding-left: min(4vw, 40px);
      }
    }
    @media (min-width: 992px) {
      .pl-lg-4 {
        padding-left: min(4vw, 40px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-lg-4 {
        padding-left: min(4vw, 40px);
      }
    }
    @media (min-width: 1200px) {
      .pl-xl-4 {
        padding-left: min(4vw, 40px);
      }
    }
    @media (min-width: 1500px) {
      .pl-xxl-4 {
        padding-left: min(4vw, 40px);
      }
    }
    .pl-5 {
      padding-left: min(5vw, 50px);
    }
    .p-5 {
      padding-left: min(5vw, 50px);
    }
    @media (min-width: 576px) {
      .pl-sm-5 {
        padding-left: min(5vw, 50px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-sm-5 {
        padding-left: min(5vw, 50px);
      }
    }
    @media (min-width: 768px) {
      .pl-md-5 {
        padding-left: min(5vw, 50px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-md-5 {
        padding-left: min(5vw, 50px);
      }
    }
    @media (min-width: 992px) {
      .pl-lg-5 {
        padding-left: min(5vw, 50px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-lg-5 {
        padding-left: min(5vw, 50px);
      }
    }
    @media (min-width: 1200px) {
      .pl-xl-5 {
        padding-left: min(5vw, 50px);
      }
    }
    @media (min-width: 1500px) {
      .pl-xxl-5 {
        padding-left: min(5vw, 50px);
      }
    }
    .p-6 {
      padding-left: min(6vw, 60px);
    }
    @media (min-width: 576px) {
      .pl-sm-6 {
        padding-left: min(6vw, 60px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-sm-6 {
        padding-left: min(6vw, 60px);
      }
    }
    @media (min-width: 768px) {
      .pl-md-6 {
        padding-left: min(6vw, 60px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-md-6 {
        padding-left: min(6vw, 60px);
      }
    }
    @media (min-width: 992px) {
      .pl-lg-6 {
        padding-left: min(6vw, 60px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-lg-6 {
        padding-left: min(6vw, 60px);
      }
    }
    @media (min-width: 1200px) {
      .pl-xl-6 {
        padding-left: min(6vw, 60px);
      }
    }
    @media (min-width: 1500px) {
      .pl-xxl-6 {
        padding-left: min(6vw, 60px);
      }
    }
    .p-7 {
      padding-left: min(7vw, 70px);
    }
    @media (min-width: 576px) {
      .pl-sm-7 {
        padding-left: min(7vw, 70px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-sm-7 {
        padding-left: min(7vw, 70px);
      }
    }
    @media (min-width: 768px) {
      .pl-md-7 {
        padding-left: min(7vw, 70px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-md-7 {
        padding-left: min(7vw, 70px);
      }
    }
    @media (min-width: 992px) {
      .pl-lg-7 {
        padding-left: min(7vw, 70px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-lg-7 {
        padding-left: min(7vw, 70px);
      }
    }
    @media (min-width: 1200px) {
      .pl-xl-7 {
        padding-left: min(7vw, 70px);
      }
    }
    @media (min-width: 1500px) {
      .pl-xxl-7 {
        padding-left: min(7vw, 70px);
      }
    }
    .p-8 {
      padding-left: min(8vw, 80px);
    }
    @media (min-width: 576px) {
      .pl-sm-8 {
        padding-left: min(8vw, 80px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-sm-8 {
        padding-left: min(8vw, 80px);
      }
    }
    @media (min-width: 768px) {
      .pl-md-8 {
        padding-left: min(8vw, 80px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-md-8 {
        padding-left: min(8vw, 80px);
      }
    }
    @media (min-width: 992px) {
      .pl-lg-8 {
        padding-left: min(8vw, 80px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-lg-8 {
        padding-left: min(8vw, 80px);
      }
    }
    @media (min-width: 1200px) {
      .pl-xl-8 {
        padding-left: min(8vw, 80px);
      }
    }
    @media (min-width: 1500px) {
      .pl-xxl-8 {
        padding-left: min(8vw, 80px);
      }
    }
    .pl-9 {
      padding-left: min(9vw, 90px);
    }
    .p-9 {
      padding-left: min(9vw, 90px);
    }
    @media (min-width: 576px) {
      .pl-sm-9 {
        padding-left: min(9vw, 90px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-sm-9 {
        padding-left: min(9vw, 90px);
      }
    }
    @media (min-width: 768px) {
      .pl-md-9 {
        padding-left: min(9vw, 90px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-md-9 {
        padding-left: min(9vw, 90px);
      }
    }
    @media (min-width: 992px) {
      .pl-lg-9 {
        padding-left: min(9vw, 90px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-lg-9 {
        padding-left: min(9vw, 90px);
      }
    }
    @media (min-width: 1200px) {
      .pl-xl-9 {
        padding-left: min(9vw, 90px);
      }
    }
    @media (min-width: 1500px) {
      .pl-xxl-9 {
        padding-left: min(9vw, 90px);
      }
    }
    .p-10 {
      padding-left: min(10vw, 100px);
    }
    @media (min-width: 576px) {
      .pl-sm-10 {
        padding-left: min(10vw, 100px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-sm-10 {
        padding-left: min(10vw, 100px);
      }
    }
    @media (min-width: 768px) {
      .pl-md-10 {
        padding-left: min(10vw, 100px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-md-10 {
        padding-left: min(10vw, 100px);
      }
    }
    @media (min-width: 992px) {
      .pl-lg-10 {
        padding-left: min(10vw, 100px);
      }
    }
    @media screen and (max-height: 768px) {
      .pl-lg-10 {
        padding-left: min(10vw, 100px);
      }
    }
    @media (min-width: 1200px) {
      .pl-xl-10 {
        padding-left: min(10vw, 100px);
      }
    }
    @media (min-width: 1500px) {
      .pl-xxl-10 {
        padding-left: min(10vw, 100px);
      }
    }
    .bg-primary {
      background-color: var(--primary-color);
    }
    .bg-secondary {
      background-color: var(--secondary-color);
    }
    .bg-warning {
      background-color: var(--warning-color);
    }
    .bg-danger {
      background-color: var(--danger-color);
    }
    .bg-mild-danger {
      background-color: var(--mild-danger-color);
    }
    .bg-success {
      background-color: var(--success-color);
    }
    .bg-success-light {
      background-color: var(--success-color-light);
    }
    .bg-dark {
      background-color: var(--dark-color);
    }
    .bg-light {
      background-color: var(--light-background-color);
    }
    .bg-info {
      background-color: var(--info-color);
    }
    .bg-olive {
      background-color: var(--olive-background-color);
    }
    .bg-light-pink {
      background-color: var(--light-pink-background-color);
    }
    .bg-pink {
      background-color: var(--pink-background-color);
    }
    .bg-light-beige {
      background-color: var(--neutral-150);
    }
    .bg-beige {
      background-color: var(--neutral-300);
    }
    .bg-yellow {
      background-color: var(--yellow-background-color);
    }
    .bg-light-yellow {
      background-color: var(--neutral-200);
    }
    .bg-olive-1 {
      background-color: var(--olive-1-background-color);
    }
    .bg-olive-2 {
      background-color: var(--olive-2-background-color);
    }
    .bg-pure-white {
      background-color: var(--neutral-100);
    }
    .bg-putty {
      background-color: var(--neutral-400);
    }
    .shadowed {
      box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25);
    }
    .shadowed-inset {
      box-shadow: inset 0 0 20px 0px var(--tile-shadow-color);
    }
    .vh-20 {
      height: 20vh;
    }
    .vh-25 {
      height: 25vh;
    }
    .vh-30 {
      height: 30vh;
    }
    .vh-35 {
      height: 35vh;
    }
    .vh-40 {
      height: 40vh;
    }
    .vh-45 {
      height: 45vh;
    }
    .vh-50 {
      height: 50vh;
    }
    .vh-55 {
      height: 55vh;
    }
    .vh-60 {
      height: 60vh;
    }
    .vh-65 {
      height: 65vh;
    }
    .vh-70 {
      height: 70vh;
    }
    .vh-75 {
      height: 75vh;
    }
    .vh-80 {
      height: 80vh;
    }
    .vh-85 {
      height: 85vh;
    }
    .vh-90 {
      height: 90vh;
    }
    .vh-95 {
      height: 95vh;
    }
    .vh-100 {
      height: 100vh;
    }
    .vw-20 {
      width: 20vw;
    }
    .vw-25 {
      width: 25vw;
    }
    .vw-30 {
      width: 30vw;
    }
    .vw-35 {
      width: 35vw;
    }
    .vw-40 {
      width: 40vw;
    }
    .vw-45 {
      width: 45vw;
    }
    .vw-50 {
      width: 50vw;
    }
    .vw-55 {
      width: 55vw;
    }
    .vw-60 {
      width: 60vw;
    }
    .vw-65 {
      width: 65vw;
    }
    .vw-70 {
      width: 70vw;
    }
    .vw-75 {
      width: 75vw;
    }
    .vw-80 {
      width: 80vw;
    }
    .vw-85 {
      width: 85vw;
    }
    .vw-90 {
      width: 90vw;
    }
    .vw-95 {
      width: 95vw;
    }
    .vw-100 {
      width: 10vw;
    }
    .scroll-y {
      scroll-behavior: smooth;
      overflow-y: auto;
    }
    .scroll-x {
      scroll-behavior: smooth;
      overflow-x: auto;
    }
    .flashcard-text h4.smaller {
      font-size: 1.125vw;
    }
    .flashcard-text h5.smaller {
      font-size: 0.9vw;
    }
    .flashcard-text h6.smaller {
      font-size: 0.75vw;
    }
    .alert-secondary h1.slab-font, .alert-secondary h2.slab-font, .alert-secondary h3.slab-font, .alert-secondary h4.slab-font, .alert-secondary h5.slab-font, .alert-secondary h6.slab-font, .alert-secondary p.slab-font, .alert-secondary a.slab-font {
      font-family: henderson-slab-basic, serif;
    }
    .alert-light h1.slab-font, .alert-light h2.slab-font, .alert-light h3.slab-font, .alert-light h4.slab-font, .alert-light h5.slab-font, .alert-light h6.slab-font, .alert-light p.slab-font, .alert-light a.slab-font {
      font-family: henderson-slab-basic, serif;
    }
    .scroll-text {
      max-height: 400px;
      overflow: unset;
      margin: 2rem;
      margin-top: 7rem;
      mix-blend-mode: hard-light;
    }
    .scroll-text:after {
      position: absolute;
      content: "";
      left: -100px;
      top: 60px;
      height: 100%;
      width: 100%;
      background: linear-gradient(transparent, transparent, gray);
      pointer-events: none;
    }
    @media screen and (max-height: 768px) {
      .scroll-text {
        max-height: 200px;
        margin-top: 5rem;
      }
    }
    .bg-headers {
      z-index: 3;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .bg-blue {
      background-color: var(--accent-color-9);
    }
    .text-blue {
      color: var(--accent-color-9);
    }
  }
}
:where(.learner-app) .bm-container button.bm-close {
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
:where(.learner-app) .bm-container button.bm-close span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
  background: #E6754B !important;
  color: #fff !important;
  border-radius: 50% !important;
  line-height: 1 !important;
}
@layer base {
  html:where(:has(.learner-app)), body:where(:has(.learner-app)) {
    font-family: "tgn-soft-round-comp", sans-serif;
    font-weight: 700;
    color: var(--body-font-color);
  }
  html:where(:has(.learner-app)), body:where(:has(.learner-app)) {
    height: auto;
    width: 100%;
    background-color: var(--global-background-color);
    z-index: -1;
  }
  body:has(.printable-page), html:has(.printable-page) {
    background-color: var(--neutral-000);
  }
  @media print {
    body:where(:has(.learner-app)) {
      background-color: var(--neutral-000);
    }
  }
  #blazor-error-ui {
    background: var(--blazor-error-background-color);
    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: 6;
  }
  #blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
  }
  html:where(:has(.learner-app)) {
    scrollbar-width: 12px;
    scrollbar-color: var(--scroll-bar-color);
  }
  html:where(:has(.learner-app))::-webkit-scrollbar {
    width: 12px;
  }
  html:where(:has(.learner-app))::-webkit-scrollbar-track {
    background: var(--scroll-bar-container-color);
    border-radius: 0.8rem;
  }
  html:where(:has(.learner-app))::-webkit-scrollbar-thumb {
    background-color: var(--scroll-bar-color);
    border-radius: 20px;
  }
}
@keyframes flip-in-hor-bottom {
  0% {
    transform: rotateX(80deg);
    opacity: 0;
  }
  100% {
    transform: rotateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-top {
  0% {
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-left {
  0% {
    transform: translateX(-50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-right {
  0% {
    transform: translateX(50px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    transform: translateX(1000px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-left {
  0% {
    transform: translateX(-1000px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-top {
  0% {
    transform: translateY(-1000px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@-webkit-keyframes scale-in-ver-top {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    opacity: 1;
  }
}
@keyframes scale-in-ver-top {
  0% {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    opacity: 1;
  }
}
@keyframes growDown {
  0% {
    transform: scaleY(0);
  }
  80% {
    transform: scaleY(1.1);
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes textani {
  0% {
    -webkit-clip-path: var(--from);
    clip-path: var(--from);
  }
  100% {
    -webkit-clip-path: var(--to);
    clip-path: var(--to);
    color: var(--color-of-text);
  }
}
@keyframes move1 {
  0% {
    transform: translateX(49vw) translateY(4vh) scale(0.1197007481);
  }
  5.2631578947% {
    transform: translateX(2vw) translateY(25vh) scale(0.6982543641);
  }
  10.5263157895% {
    transform: translateX(3vw) translateY(42vh) scale(0.5286783042);
  }
  15.7894736842% {
    transform: translateX(-32vw) translateY(35vh) scale(0.2294264339);
  }
  21.0526315789% {
    transform: translateX(44vw) translateY(20vh) scale(0.1197007481);
  }
  26.3157894737% {
    transform: translateX(-42vw) translateY(-11vh) scale(0.6882793017);
  }
  31.5789473684% {
    transform: translateX(12vw) translateY(48vh) scale(0.3391521197);
  }
  36.8421052632% {
    transform: translateX(28vw) translateY(18vh) scale(0.2294264339);
  }
  42.1052631579% {
    transform: translateX(7vw) translateY(-21vh) scale(0.7481296758);
  }
  47.3684210526% {
    transform: translateX(-17vw) translateY(24vh) scale(0.3790523691);
  }
  52.6315789474% {
    transform: translateX(13vw) translateY(3vh) scale(0.1795511222);
  }
  57.8947368421% {
    transform: translateX(20vw) translateY(-11vh) scale(0.63840399);
  }
  63.1578947368% {
    transform: translateX(-18vw) translateY(20vh) scale(0.5187032419);
  }
  68.4210526316% {
    transform: translateX(-37vw) translateY(25vh) scale(0.6882793017);
  }
  73.6842105263% {
    transform: translateX(17vw) translateY(-31vh) scale(0.6583541147);
  }
  78.9473684211% {
    transform: translateX(-5vw) translateY(-44vh) scale(0.578553616);
  }
  84.2105263158% {
    transform: translateX(48vw) translateY(-44vh) scale(0.6882793017);
  }
  89.4736842105% {
    transform: translateX(-8vw) translateY(14vh) scale(0.1596009975);
  }
  94.7368421053% {
    transform: translateX(46vw) translateY(-40vh) scale(0.1496259352);
  }
  100% {
    transform: translateX(-10vw) translateY(20vh) scale(0.349127182);
  }
}
@keyframes move2 {
  0% {
    transform: translateX(-27vw) translateY(23vh) scale(0.0798004988);
  }
  4.5454545455% {
    transform: translateX(-6vw) translateY(-25vh) scale(0.5486284289);
  }
  9.0909090909% {
    transform: translateX(16vw) translateY(-20vh) scale(0.1296758105);
  }
  13.6363636364% {
    transform: translateX(-14vw) translateY(-17vh) scale(0.3591022444);
  }
  18.1818181818% {
    transform: translateX(39vw) translateY(41vh) scale(0.2693266833);
  }
  22.7272727273% {
    transform: translateX(-38vw) translateY(-40vh) scale(0.6982543641);
  }
  27.2727272727% {
    transform: translateX(23vw) translateY(29vh) scale(0.2094763092);
  }
  31.8181818182% {
    transform: translateX(-20vw) translateY(-20vh) scale(0.3591022444);
  }
  36.3636363636% {
    transform: translateX(44vw) translateY(50vh) scale(0.1296758105);
  }
  40.9090909091% {
    transform: translateX(-21vw) translateY(9vh) scale(0.2992518703);
  }
  45.4545454545% {
    transform: translateX(4vw) translateY(2vh) scale(0.0399002494);
  }
  50% {
    transform: translateX(39vw) translateY(30vh) scale(0.6683291771);
  }
  54.5454545455% {
    transform: translateX(7vw) translateY(-37vh) scale(0.0897755611);
  }
  59.0909090909% {
    transform: translateX(-43vw) translateY(29vh) scale(0.2094763092);
  }
  63.6363636364% {
    transform: translateX(-34vw) translateY(16vh) scale(0.5486284289);
  }
  68.1818181818% {
    transform: translateX(-8vw) translateY(-14vh) scale(0.4588528678);
  }
  72.7272727273% {
    transform: translateX(32vw) translateY(-41vh) scale(0.3092269327);
  }
  77.2727272727% {
    transform: translateX(-39vw) translateY(29vh) scale(0.4788029925);
  }
  81.8181818182% {
    transform: translateX(18vw) translateY(7vh) scale(0.0897755611);
  }
  86.3636363636% {
    transform: translateX(22vw) translateY(46vh) scale(0.3790523691);
  }
  90.9090909091% {
    transform: translateX(-37vw) translateY(-13vh) scale(0.289276808);
  }
  95.4545454545% {
    transform: translateX(-29vw) translateY(-31vh) scale(0.1596009975);
  }
  100% {
    transform: translateX(24vw) translateY(37vh) scale(0.289276808);
  }
}
@keyframes move3 {
  0% {
    transform: translateX(6vw) translateY(-47vh) scale(0.1197007481);
  }
  3.5714285714% {
    transform: translateX(-2vw) translateY(48vh) scale(0.6184538653);
  }
  7.1428571429% {
    transform: translateX(1vw) translateY(20vh) scale(0.2693266833);
  }
  10.7142857143% {
    transform: translateX(-41vw) translateY(-17vh) scale(0.578553616);
  }
  14.2857142857% {
    transform: translateX(-36vw) translateY(42vh) scale(0.0199501247);
  }
  17.8571428571% {
    transform: translateX(16vw) translateY(8vh) scale(0.5087281796);
  }
  21.4285714286% {
    transform: translateX(-26vw) translateY(-34vh) scale(0.7481296758);
  }
  25% {
    transform: translateX(30vw) translateY(-27vh) scale(0.5885286783);
  }
  28.5714285714% {
    transform: translateX(-1vw) translateY(-49vh) scale(0.1496259352);
  }
  32.1428571429% {
    transform: translateX(35vw) translateY(25vh) scale(0.7182044888);
  }
  35.7142857143% {
    transform: translateX(-31vw) translateY(-12vh) scale(0.3990024938);
  }
  39.2857142857% {
    transform: translateX(8vw) translateY(43vh) scale(0.3591022444);
  }
  42.8571428571% {
    transform: translateX(15vw) translateY(20vh) scale(0.5386533666);
  }
  46.4285714286% {
    transform: translateX(-31vw) translateY(-16vh) scale(0.5985037406);
  }
  50% {
    transform: translateX(42vw) translateY(16vh) scale(0.6783042394);
  }
  53.5714285714% {
    transform: translateX(-16vw) translateY(-5vh) scale(0.1197007481);
  }
  57.1428571429% {
    transform: translateX(11vw) translateY(36vh) scale(0.1396508728);
  }
  60.7142857143% {
    transform: translateX(-19vw) translateY(35vh) scale(0.0997506234);
  }
  64.2857142857% {
    transform: translateX(-13vw) translateY(10vh) scale(0.0199501247);
  }
  67.8571428571% {
    transform: translateX(37vw) translateY(24vh) scale(0.7082294264);
  }
  71.4285714286% {
    transform: translateX(39vw) translateY(50vh) scale(0.6184538653);
  }
  75% {
    transform: translateX(40vw) translateY(-13vh) scale(0.3291770574);
  }
  78.5714285714% {
    transform: translateX(-45vw) translateY(-10vh) scale(0.1895261845);
  }
  82.1428571429% {
    transform: translateX(-46vw) translateY(27vh) scale(0.0798004988);
  }
  85.7142857143% {
    transform: translateX(-27vw) translateY(27vh) scale(0.3591022444);
  }
  89.2857142857% {
    transform: translateX(-8vw) translateY(-39vh) scale(0.5586034913);
  }
  92.8571428571% {
    transform: translateX(8vw) translateY(39vh) scale(0.6683291771);
  }
  96.4285714286% {
    transform: translateX(7vw) translateY(41vh) scale(0.1197007481);
  }
  100% {
    transform: translateX(-24vw) translateY(-4vh) scale(0.3291770574);
  }
}
@keyframes move4 {
  0% {
    transform: translateX(-30vw) translateY(16vh) scale(0.2493765586);
  }
  3.5714285714% {
    transform: translateX(-1vw) translateY(-48vh) scale(0.5985037406);
  }
  7.1428571429% {
    transform: translateX(33vw) translateY(-34vh) scale(0.4588528678);
  }
  10.7142857143% {
    transform: translateX(-8vw) translateY(-23vh) scale(0.1995012469);
  }
  14.2857142857% {
    transform: translateX(49vw) translateY(20vh) scale(0.3391521197);
  }
  17.8571428571% {
    transform: translateX(-21vw) translateY(-37vh) scale(0.2593516209);
  }
  21.4285714286% {
    transform: translateX(-49vw) translateY(48vh) scale(0.4189526185);
  }
  25% {
    transform: translateX(-25vw) translateY(0vh) scale(0.1795511222);
  }
  28.5714285714% {
    transform: translateX(-43vw) translateY(-5vh) scale(0.3591022444);
  }
  32.1428571429% {
    transform: translateX(-2vw) translateY(-1vh) scale(0.029925187);
  }
  35.7142857143% {
    transform: translateX(1vw) translateY(-16vh) scale(0.4788029925);
  }
  39.2857142857% {
    transform: translateX(-9vw) translateY(41vh) scale(0.319201995);
  }
  42.8571428571% {
    transform: translateX(-20vw) translateY(-42vh) scale(0.4987531172);
  }
  46.4285714286% {
    transform: translateX(-8vw) translateY(-12vh) scale(0.5286783042);
  }
  50% {
    transform: translateX(-7vw) translateY(-40vh) scale(0.7182044888);
  }
  53.5714285714% {
    transform: translateX(-44vw) translateY(-30vh) scale(0.7381546135);
  }
  57.1428571429% {
    transform: translateX(34vw) translateY(49vh) scale(0.63840399);
  }
  60.7142857143% {
    transform: translateX(38vw) translateY(-19vh) scale(0.63840399);
  }
  64.2857142857% {
    transform: translateX(40vw) translateY(0vh) scale(0.1396508728);
  }
  67.8571428571% {
    transform: translateX(-11vw) translateY(16vh) scale(0.7481296758);
  }
  71.4285714286% {
    transform: translateX(-42vw) translateY(-35vh) scale(0.4688279302);
  }
  75% {
    transform: translateX(36vw) translateY(-49vh) scale(0.4189526185);
  }
  78.5714285714% {
    transform: translateX(15vw) translateY(-23vh) scale(0.6284289277);
  }
  82.1428571429% {
    transform: translateX(-24vw) translateY(22vh) scale(0.2793017456);
  }
  85.7142857143% {
    transform: translateX(-36vw) translateY(47vh) scale(0.3990024938);
  }
  89.2857142857% {
    transform: translateX(30vw) translateY(16vh) scale(0.4887780549);
  }
  92.8571428571% {
    transform: translateX(-48vw) translateY(-37vh) scale(0.2992518703);
  }
  96.4285714286% {
    transform: translateX(47vw) translateY(-14vh) scale(0.5187032419);
  }
  100% {
    transform: translateX(-35vw) translateY(29vh) scale(0.3092269327);
  }
}
@keyframes move5 {
  0% {
    transform: translateX(19vw) translateY(9vh) scale(0.1895261845);
  }
  3.7037037037% {
    transform: translateX(8vw) translateY(20vh) scale(0.0897755611);
  }
  7.4074074074% {
    transform: translateX(-27vw) translateY(-36vh) scale(0.6583541147);
  }
  11.1111111111% {
    transform: translateX(-39vw) translateY(4vh) scale(0.7481296758);
  }
  14.8148148148% {
    transform: translateX(-5vw) translateY(22vh) scale(0.4089775561);
  }
  18.5185185185% {
    transform: translateX(-4vw) translateY(50vh) scale(0.6483790524);
  }
  22.2222222222% {
    transform: translateX(3vw) translateY(6vh) scale(0.3890274314);
  }
  25.9259259259% {
    transform: translateX(5vw) translateY(-43vh) scale(0.3990024938);
  }
  29.6296296296% {
    transform: translateX(18vw) translateY(-37vh) scale(0.608478803);
  }
  33.3333333333% {
    transform: translateX(-8vw) translateY(34vh) scale(0.4688279302);
  }
  37.037037037% {
    transform: translateX(-15vw) translateY(1vh) scale(0.5386533666);
  }
  40.7407407407% {
    transform: translateX(12vw) translateY(29vh) scale(0.2194513716);
  }
  44.4444444444% {
    transform: translateX(-33vw) translateY(50vh) scale(0.3890274314);
  }
  48.1481481481% {
    transform: translateX(-16vw) translateY(41vh) scale(0.2593516209);
  }
  51.8518518519% {
    transform: translateX(-4vw) translateY(39vh) scale(0.5187032419);
  }
  55.5555555556% {
    transform: translateX(3vw) translateY(36vh) scale(0.6583541147);
  }
  59.2592592593% {
    transform: translateX(-23vw) translateY(2vh) scale(0.0997506234);
  }
  62.962962963% {
    transform: translateX(37vw) translateY(-21vh) scale(0.63840399);
  }
  66.6666666667% {
    transform: translateX(-34vw) translateY(15vh) scale(0.1296758105);
  }
  70.3703703704% {
    transform: translateX(35vw) translateY(-21vh) scale(0.608478803);
  }
  74.0740740741% {
    transform: translateX(-45vw) translateY(-38vh) scale(0.3790523691);
  }
  77.7777777778% {
    transform: translateX(-3vw) translateY(13vh) scale(0.3291770574);
  }
  81.4814814815% {
    transform: translateX(-41vw) translateY(-21vh) scale(0.4688279302);
  }
  85.1851851852% {
    transform: translateX(2vw) translateY(-31vh) scale(0.7182044888);
  }
  88.8888888889% {
    transform: translateX(-9vw) translateY(2vh) scale(0.2094763092);
  }
  92.5925925926% {
    transform: translateX(-1vw) translateY(22vh) scale(0.029925187);
  }
  96.2962962963% {
    transform: translateX(-6vw) translateY(-3vh) scale(0.1396508728);
  }
  100% {
    transform: translateX(-48vw) translateY(30vh) scale(0.5187032419);
  }
}
@keyframes move6 {
  0% {
    transform: translateX(7vw) translateY(-24vh) scale(0.7381546135);
  }
  5.8823529412% {
    transform: translateX(-48vw) translateY(6vh) scale(0.2992518703);
  }
  11.7647058824% {
    transform: translateX(-17vw) translateY(29vh) scale(0.5187032419);
  }
  17.6470588235% {
    transform: translateX(44vw) translateY(-32vh) scale(0.2992518703);
  }
  23.5294117647% {
    transform: translateX(-30vw) translateY(5vh) scale(0.4788029925);
  }
  29.4117647059% {
    transform: translateX(16vw) translateY(-33vh) scale(0.5685785536);
  }
  35.2941176471% {
    transform: translateX(-15vw) translateY(20vh) scale(0.1296758105);
  }
  41.1764705882% {
    transform: translateX(9vw) translateY(-22vh) scale(0.0698254364);
  }
  47.0588235294% {
    transform: translateX(50vw) translateY(-47vh) scale(0.3391521197);
  }
  52.9411764706% {
    transform: translateX(21vw) translateY(9vh) scale(0.6882793017);
  }
  58.8235294118% {
    transform: translateX(45vw) translateY(10vh) scale(0.1895261845);
  }
  64.7058823529% {
    transform: translateX(-46vw) translateY(12vh) scale(0.2094763092);
  }
  70.5882352941% {
    transform: translateX(-18vw) translateY(48vh) scale(0.5386533666);
  }
  76.4705882353% {
    transform: translateX(-48vw) translateY(20vh) scale(0.5087281796);
  }
  82.3529411765% {
    transform: translateX(-26vw) translateY(-40vh) scale(0.5486284289);
  }
  88.2352941176% {
    transform: translateX(8vw) translateY(24vh) scale(0.0897755611);
  }
  94.1176470588% {
    transform: translateX(26vw) translateY(-6vh) scale(0.1396508728);
  }
  100% {
    transform: translateX(-1vw) translateY(-42vh) scale(0.4389027431);
  }
}
@keyframes move7 {
  0% {
    transform: translateX(13vw) translateY(34vh) scale(0.2194513716);
  }
  3.7037037037% {
    transform: translateX(16vw) translateY(-13vh) scale(0.4189526185);
  }
  7.4074074074% {
    transform: translateX(-34vw) translateY(-30vh) scale(0.4389027431);
  }
  11.1111111111% {
    transform: translateX(6vw) translateY(29vh) scale(0.63840399);
  }
  14.8148148148% {
    transform: translateX(-29vw) translateY(39vh) scale(0.5685785536);
  }
  18.5185185185% {
    transform: translateX(30vw) translateY(-16vh) scale(0.1197007481);
  }
  22.2222222222% {
    transform: translateX(0vw) translateY(-37vh) scale(0.4887780549);
  }
  25.9259259259% {
    transform: translateX(-36vw) translateY(-48vh) scale(0.4588528678);
  }
  29.6296296296% {
    transform: translateX(0vw) translateY(-28vh) scale(0.2094763092);
  }
  33.3333333333% {
    transform: translateX(-45vw) translateY(8vh) scale(0.5985037406);
  }
  37.037037037% {
    transform: translateX(-5vw) translateY(15vh) scale(0.578553616);
  }
  40.7407407407% {
    transform: translateX(-17vw) translateY(27vh) scale(0.5685785536);
  }
  44.4444444444% {
    transform: translateX(-7vw) translateY(-34vh) scale(0.1097256858);
  }
  48.1481481481% {
    transform: translateX(-24vw) translateY(-8vh) scale(0.1197007481);
  }
  51.8518518519% {
    transform: translateX(31vw) translateY(-3vh) scale(0.1396508728);
  }
  55.5555555556% {
    transform: translateX(-28vw) translateY(-25vh) scale(0.2693266833);
  }
  59.2592592593% {
    transform: translateX(-14vw) translateY(49vh) scale(0.4887780549);
  }
  62.962962963% {
    transform: translateX(-24vw) translateY(28vh) scale(0.1097256858);
  }
  66.6666666667% {
    transform: translateX(10vw) translateY(-28vh) scale(0.1795511222);
  }
  70.3703703704% {
    transform: translateX(9vw) translateY(33vh) scale(0.2394014963);
  }
  74.0740740741% {
    transform: translateX(-48vw) translateY(-22vh) scale(0.1097256858);
  }
  77.7777777778% {
    transform: translateX(3vw) translateY(-31vh) scale(0.6683291771);
  }
  81.4814814815% {
    transform: translateX(-8vw) translateY(27vh) scale(0.319201995);
  }
  85.1851851852% {
    transform: translateX(-10vw) translateY(-22vh) scale(0.2294264339);
  }
  88.8888888889% {
    transform: translateX(-6vw) translateY(-5vh) scale(0.3690773067);
  }
  92.5925925926% {
    transform: translateX(16vw) translateY(-47vh) scale(0.6882793017);
  }
  96.2962962963% {
    transform: translateX(2vw) translateY(0vh) scale(0.4887780549);
  }
  100% {
    transform: translateX(-44vw) translateY(8vh) scale(0.0099750623);
  }
}
@keyframes move8 {
  0% {
    transform: translateX(-17vw) translateY(8vh) scale(0.63840399);
  }
  4.7619047619% {
    transform: translateX(-45vw) translateY(39vh) scale(0.5286783042);
  }
  9.5238095238% {
    transform: translateX(-39vw) translateY(-39vh) scale(0.0399002494);
  }
  14.2857142857% {
    transform: translateX(44vw) translateY(46vh) scale(0.3890274314);
  }
  19.0476190476% {
    transform: translateX(-11vw) translateY(12vh) scale(0.6783042394);
  }
  23.8095238095% {
    transform: translateX(37vw) translateY(-42vh) scale(0.578553616);
  }
  28.5714285714% {
    transform: translateX(22vw) translateY(-37vh) scale(0.0099750623);
  }
  33.3333333333% {
    transform: translateX(41vw) translateY(-36vh) scale(0.4389027431);
  }
  38.0952380952% {
    transform: translateX(-4vw) translateY(4vh) scale(0.5087281796);
  }
  42.8571428571% {
    transform: translateX(-7vw) translateY(-28vh) scale(0.289276808);
  }
  47.619047619% {
    transform: translateX(22vw) translateY(44vh) scale(0.3092269327);
  }
  52.380952381% {
    transform: translateX(13vw) translateY(-41vh) scale(0.4389027431);
  }
  57.1428571429% {
    transform: translateX(21vw) translateY(10vh) scale(0.608478803);
  }
  61.9047619048% {
    transform: translateX(8vw) translateY(-18vh) scale(0.0199501247);
  }
  66.6666666667% {
    transform: translateX(-34vw) translateY(19vh) scale(0.6483790524);
  }
  71.4285714286% {
    transform: translateX(20vw) translateY(14vh) scale(0.7182044888);
  }
  76.1904761905% {
    transform: translateX(27vw) translateY(41vh) scale(0.1197007481);
  }
  80.9523809524% {
    transform: translateX(-13vw) translateY(35vh) scale(0.1795511222);
  }
  85.7142857143% {
    transform: translateX(-1vw) translateY(43vh) scale(0.1895261845);
  }
  90.4761904762% {
    transform: translateX(28vw) translateY(25vh) scale(0.1995012469);
  }
  95.2380952381% {
    transform: translateX(9vw) translateY(-14vh) scale(0.6882793017);
  }
  100% {
    transform: translateX(-27vw) translateY(50vh) scale(0.6583541147);
  }
}
@keyframes move9 {
  0% {
    transform: translateX(-14vw) translateY(13vh) scale(0.1895261845);
  }
  3.7037037037% {
    transform: translateX(36vw) translateY(27vh) scale(0.4089775561);
  }
  7.4074074074% {
    transform: translateX(13vw) translateY(-17vh) scale(0.6783042394);
  }
  11.1111111111% {
    transform: translateX(-39vw) translateY(-31vh) scale(0.0399002494);
  }
  14.8148148148% {
    transform: translateX(50vw) translateY(33vh) scale(0.3790523691);
  }
  18.5185185185% {
    transform: translateX(-46vw) translateY(-11vh) scale(0.0099750623);
  }
  22.2222222222% {
    transform: translateX(6vw) translateY(6vh) scale(0.578553616);
  }
  25.9259259259% {
    transform: translateX(-38vw) translateY(3vh) scale(0.0698254364);
  }
  29.6296296296% {
    transform: translateX(21vw) translateY(-15vh) scale(0.0997506234);
  }
  33.3333333333% {
    transform: translateX(-30vw) translateY(41vh) scale(0.3391521197);
  }
  37.037037037% {
    transform: translateX(-3vw) translateY(-28vh) scale(0.0199501247);
  }
  40.7407407407% {
    transform: translateX(24vw) translateY(-13vh) scale(0.2194513716);
  }
  44.4444444444% {
    transform: translateX(-29vw) translateY(38vh) scale(0.5187032419);
  }
  48.1481481481% {
    transform: translateX(11vw) translateY(9vh) scale(0.7381546135);
  }
  51.8518518519% {
    transform: translateX(10vw) translateY(16vh) scale(0.4089775561);
  }
  55.5555555556% {
    transform: translateX(7vw) translateY(38vh) scale(0.4389027431);
  }
  59.2592592593% {
    transform: translateX(-32vw) translateY(-23vh) scale(0.7182044888);
  }
  62.962962963% {
    transform: translateX(46vw) translateY(27vh) scale(0.349127182);
  }
  66.6666666667% {
    transform: translateX(-32vw) translateY(1vh) scale(0.0798004988);
  }
  70.3703703704% {
    transform: translateX(7vw) translateY(-40vh) scale(0.1097256858);
  }
  74.0740740741% {
    transform: translateX(-28vw) translateY(-16vh) scale(0.608478803);
  }
  77.7777777778% {
    transform: translateX(-6vw) translateY(-21vh) scale(0.5087281796);
  }
  81.4814814815% {
    transform: translateX(8vw) translateY(37vh) scale(0.1496259352);
  }
  85.1851851852% {
    transform: translateX(42vw) translateY(-4vh) scale(0.4488778055);
  }
  88.8888888889% {
    transform: translateX(-47vw) translateY(28vh) scale(0.3591022444);
  }
  92.5925925926% {
    transform: translateX(19vw) translateY(42vh) scale(0.5486284289);
  }
  96.2962962963% {
    transform: translateX(-32vw) translateY(43vh) scale(0.6683291771);
  }
  100% {
    transform: translateX(23vw) translateY(5vh) scale(0.3291770574);
  }
}
@keyframes move10 {
  0% {
    transform: translateX(33vw) translateY(43vh) scale(0.2094763092);
  }
  4.5454545455% {
    transform: translateX(-27vw) translateY(-21vh) scale(0.1995012469);
  }
  9.0909090909% {
    transform: translateX(-38vw) translateY(-47vh) scale(0.5985037406);
  }
  13.6363636364% {
    transform: translateX(-1vw) translateY(2vh) scale(0.4089775561);
  }
  18.1818181818% {
    transform: translateX(9vw) translateY(-41vh) scale(0.608478803);
  }
  22.7272727273% {
    transform: translateX(-13vw) translateY(1vh) scale(0.1596009975);
  }
  27.2727272727% {
    transform: translateX(-48vw) translateY(-39vh) scale(0.4389027431);
  }
  31.8181818182% {
    transform: translateX(-7vw) translateY(-2vh) scale(0.6783042394);
  }
  36.3636363636% {
    transform: translateX(-22vw) translateY(10vh) scale(0.1496259352);
  }
  40.9090909091% {
    transform: translateX(-33vw) translateY(11vh) scale(0.5187032419);
  }
  45.4545454545% {
    transform: translateX(36vw) translateY(-21vh) scale(0.6982543641);
  }
  50% {
    transform: translateX(26vw) translateY(-18vh) scale(0.0997506234);
  }
  54.5454545455% {
    transform: translateX(20vw) translateY(-36vh) scale(0.63840399);
  }
  59.0909090909% {
    transform: translateX(-30vw) translateY(8vh) scale(0.7082294264);
  }
  63.6363636364% {
    transform: translateX(8vw) translateY(-27vh) scale(0.3291770574);
  }
  68.1818181818% {
    transform: translateX(45vw) translateY(-16vh) scale(0.0798004988);
  }
  72.7272727273% {
    transform: translateX(45vw) translateY(-38vh) scale(0.3990024938);
  }
  77.2727272727% {
    transform: translateX(-45vw) translateY(13vh) scale(0.029925187);
  }
  81.8181818182% {
    transform: translateX(26vw) translateY(-34vh) scale(0.5386533666);
  }
  86.3636363636% {
    transform: translateX(39vw) translateY(-15vh) scale(0.3990024938);
  }
  90.9090909091% {
    transform: translateX(23vw) translateY(-20vh) scale(0.4389027431);
  }
  95.4545454545% {
    transform: translateX(13vw) translateY(36vh) scale(0.1496259352);
  }
  100% {
    transform: translateX(8vw) translateY(-14vh) scale(0.0099750623);
  }
}
@keyframes move11 {
  0% {
    transform: translateX(28vw) translateY(42vh) scale(0.1995012469);
  }
  5% {
    transform: translateX(-38vw) translateY(4vh) scale(0.5486284289);
  }
  10% {
    transform: translateX(39vw) translateY(-4vh) scale(0.1695760599);
  }
  15% {
    transform: translateX(-20vw) translateY(37vh) scale(0.1396508728);
  }
  20% {
    transform: translateX(42vw) translateY(-18vh) scale(0.1995012469);
  }
  25% {
    transform: translateX(-27vw) translateY(-27vh) scale(0.0897755611);
  }
  30% {
    transform: translateX(-30vw) translateY(-19vh) scale(0.6982543641);
  }
  35% {
    transform: translateX(10vw) translateY(9vh) scale(0.0798004988);
  }
  40% {
    transform: translateX(-1vw) translateY(49vh) scale(0.0897755611);
  }
  45% {
    transform: translateX(49vw) translateY(-19vh) scale(0.4289276808);
  }
  50% {
    transform: translateX(-18vw) translateY(6vh) scale(0.1197007481);
  }
  55% {
    transform: translateX(10vw) translateY(45vh) scale(0.0897755611);
  }
  60% {
    transform: translateX(-44vw) translateY(33vh) scale(0.1396508728);
  }
  65% {
    transform: translateX(-46vw) translateY(37vh) scale(0.63840399);
  }
  70% {
    transform: translateX(46vw) translateY(32vh) scale(0.7182044888);
  }
  75% {
    transform: translateX(28vw) translateY(26vh) scale(0.4688279302);
  }
  80% {
    transform: translateX(18vw) translateY(-41vh) scale(0.0798004988);
  }
  85% {
    transform: translateX(7vw) translateY(-40vh) scale(0.6583541147);
  }
  90% {
    transform: translateX(-41vw) translateY(-20vh) scale(0.0997506234);
  }
  95% {
    transform: translateX(-19vw) translateY(30vh) scale(0.4089775561);
  }
  100% {
    transform: translateX(28vw) translateY(-29vh) scale(0.0698254364);
  }
}
@keyframes move12 {
  0% {
    transform: translateX(-46vw) translateY(37vh) scale(0.5087281796);
  }
  4% {
    transform: translateX(25vw) translateY(0vh) scale(0.4289276808);
  }
  8% {
    transform: translateX(13vw) translateY(27vh) scale(0.6882793017);
  }
  12% {
    transform: translateX(31vw) translateY(50vh) scale(0.63840399);
  }
  16% {
    transform: translateX(-35vw) translateY(-48vh) scale(0.6184538653);
  }
  20% {
    transform: translateX(19vw) translateY(42vh) scale(0.5486284289);
  }
  24% {
    transform: translateX(-36vw) translateY(31vh) scale(0.5586034913);
  }
  28% {
    transform: translateX(-45vw) translateY(30vh) scale(0.1795511222);
  }
  32% {
    transform: translateX(0vw) translateY(19vh) scale(0.349127182);
  }
  36% {
    transform: translateX(15vw) translateY(27vh) scale(0.6783042394);
  }
  40% {
    transform: translateX(-31vw) translateY(32vh) scale(0.4987531172);
  }
  44% {
    transform: translateX(36vw) translateY(24vh) scale(0.349127182);
  }
  48% {
    transform: translateX(-17vw) translateY(19vh) scale(0.63840399);
  }
  52% {
    transform: translateX(-31vw) translateY(-25vh) scale(0.1496259352);
  }
  56% {
    transform: translateX(-43vw) translateY(-46vh) scale(0.5187032419);
  }
  60% {
    transform: translateX(-27vw) translateY(18vh) scale(0.2593516209);
  }
  64% {
    transform: translateX(-1vw) translateY(1vh) scale(0.63840399);
  }
  68% {
    transform: translateX(-25vw) translateY(21vh) scale(0.6483790524);
  }
  72% {
    transform: translateX(26vw) translateY(10vh) scale(0.578553616);
  }
  76% {
    transform: translateX(-38vw) translateY(-45vh) scale(0.0598503741);
  }
  80% {
    transform: translateX(-10vw) translateY(-47vh) scale(0.5586034913);
  }
  84% {
    transform: translateX(48vw) translateY(-8vh) scale(0.608478803);
  }
  88% {
    transform: translateX(-25vw) translateY(-17vh) scale(0.4089775561);
  }
  92% {
    transform: translateX(-22vw) translateY(22vh) scale(0.4488778055);
  }
  96% {
    transform: translateX(26vw) translateY(-24vh) scale(0.1695760599);
  }
  100% {
    transform: translateX(-28vw) translateY(5vh) scale(0.1895261845);
  }
}
@keyframes move13 {
  0% {
    transform: translateX(12vw) translateY(-9vh) scale(0.4887780549);
  }
  4.347826087% {
    transform: translateX(-48vw) translateY(-28vh) scale(0.4389027431);
  }
  8.6956521739% {
    transform: translateX(-47vw) translateY(5vh) scale(0.4588528678);
  }
  13.0434782609% {
    transform: translateX(-13vw) translateY(20vh) scale(0.3092269327);
  }
  17.3913043478% {
    transform: translateX(1vw) translateY(-35vh) scale(0.4389027431);
  }
  21.7391304348% {
    transform: translateX(-8vw) translateY(-16vh) scale(0.6882793017);
  }
  26.0869565217% {
    transform: translateX(31vw) translateY(-5vh) scale(0.0997506234);
  }
  30.4347826087% {
    transform: translateX(29vw) translateY(23vh) scale(0.6882793017);
  }
  34.7826086957% {
    transform: translateX(24vw) translateY(49vh) scale(0.7281795511);
  }
  39.1304347826% {
    transform: translateX(31vw) translateY(-2vh) scale(0.0399002494);
  }
  43.4782608696% {
    transform: translateX(49vw) translateY(-36vh) scale(0.0598503741);
  }
  47.8260869565% {
    transform: translateX(-44vw) translateY(4vh) scale(0.2094763092);
  }
  52.1739130435% {
    transform: translateX(-42vw) translateY(15vh) scale(0.0897755611);
  }
  56.5217391304% {
    transform: translateX(5vw) translateY(41vh) scale(0.4788029925);
  }
  60.8695652174% {
    transform: translateX(-46vw) translateY(-9vh) scale(0.1995012469);
  }
  65.2173913043% {
    transform: translateX(45vw) translateY(27vh) scale(0.3990024938);
  }
  69.5652173913% {
    transform: translateX(-34vw) translateY(-8vh) scale(0.5586034913);
  }
  73.9130434783% {
    transform: translateX(32vw) translateY(7vh) scale(0.1695760599);
  }
  78.2608695652% {
    transform: translateX(-27vw) translateY(-29vh) scale(0.7182044888);
  }
  82.6086956522% {
    transform: translateX(-38vw) translateY(1vh) scale(0.3890274314);
  }
  86.9565217391% {
    transform: translateX(16vw) translateY(-37vh) scale(0.6284289277);
  }
  91.3043478261% {
    transform: translateX(-40vw) translateY(-15vh) scale(0.1097256858);
  }
  95.652173913% {
    transform: translateX(-24vw) translateY(3vh) scale(0.5885286783);
  }
  100% {
    transform: translateX(35vw) translateY(7vh) scale(0.3591022444);
  }
}
@keyframes move14 {
  0% {
    transform: translateX(-49vw) translateY(33vh) scale(0.6882793017);
  }
  4.347826087% {
    transform: translateX(49vw) translateY(37vh) scale(0.5486284289);
  }
  8.6956521739% {
    transform: translateX(-14vw) translateY(25vh) scale(0.3291770574);
  }
  13.0434782609% {
    transform: translateX(-27vw) translateY(-7vh) scale(0.5586034913);
  }
  17.3913043478% {
    transform: translateX(-5vw) translateY(34vh) scale(0.6783042394);
  }
  21.7391304348% {
    transform: translateX(30vw) translateY(-4vh) scale(0.3391521197);
  }
  26.0869565217% {
    transform: translateX(22vw) translateY(-46vh) scale(0.7381546135);
  }
  30.4347826087% {
    transform: translateX(22vw) translateY(-46vh) scale(0.2693266833);
  }
  34.7826086957% {
    transform: translateX(32vw) translateY(35vh) scale(0.7182044888);
  }
  39.1304347826% {
    transform: translateX(10vw) translateY(-4vh) scale(0.2992518703);
  }
  43.4782608696% {
    transform: translateX(2vw) translateY(-16vh) scale(0.5885286783);
  }
  47.8260869565% {
    transform: translateX(-31vw) translateY(-31vh) scale(0.6583541147);
  }
  52.1739130435% {
    transform: translateX(-4vw) translateY(17vh) scale(0.6683291771);
  }
  56.5217391304% {
    transform: translateX(40vw) translateY(-49vh) scale(0.1296758105);
  }
  60.8695652174% {
    transform: translateX(36vw) translateY(-7vh) scale(0.1795511222);
  }
  65.2173913043% {
    transform: translateX(24vw) translateY(-36vh) scale(0.1995012469);
  }
  69.5652173913% {
    transform: translateX(8vw) translateY(-18vh) scale(0.1795511222);
  }
  73.9130434783% {
    transform: translateX(-35vw) translateY(-46vh) scale(0.1296758105);
  }
  78.2608695652% {
    transform: translateX(-14vw) translateY(5vh) scale(0.6683291771);
  }
  82.6086956522% {
    transform: translateX(19vw) translateY(13vh) scale(0.2793017456);
  }
  86.9565217391% {
    transform: translateX(12vw) translateY(-30vh) scale(0.7082294264);
  }
  91.3043478261% {
    transform: translateX(48vw) translateY(25vh) scale(0.1895261845);
  }
  95.652173913% {
    transform: translateX(-45vw) translateY(24vh) scale(0.0798004988);
  }
  100% {
    transform: translateX(4vw) translateY(14vh) scale(0.4887780549);
  }
}
@keyframes move15 {
  0% {
    transform: translateX(10vw) translateY(-7vh) scale(0.6483790524);
  }
  3.8461538462% {
    transform: translateX(-8vw) translateY(38vh) scale(0.5187032419);
  }
  7.6923076923% {
    transform: translateX(-40vw) translateY(-11vh) scale(0.4788029925);
  }
  11.5384615385% {
    transform: translateX(-10vw) translateY(-19vh) scale(0.3591022444);
  }
  15.3846153846% {
    transform: translateX(-9vw) translateY(-41vh) scale(0.5087281796);
  }
  19.2307692308% {
    transform: translateX(-2vw) translateY(30vh) scale(0.5586034913);
  }
  23.0769230769% {
    transform: translateX(25vw) translateY(-6vh) scale(0.7281795511);
  }
  26.9230769231% {
    transform: translateX(-30vw) translateY(49vh) scale(0.349127182);
  }
  30.7692307692% {
    transform: translateX(-14vw) translateY(4vh) scale(0.6882793017);
  }
  34.6153846154% {
    transform: translateX(-3vw) translateY(-24vh) scale(0.6882793017);
  }
  38.4615384615% {
    transform: translateX(-24vw) translateY(20vh) scale(0.1795511222);
  }
  42.3076923077% {
    transform: translateX(-5vw) translateY(15vh) scale(0.2593516209);
  }
  46.1538461538% {
    transform: translateX(39vw) translateY(-20vh) scale(0.0399002494);
  }
  50% {
    transform: translateX(32vw) translateY(-1vh) scale(0.4887780549);
  }
  53.8461538462% {
    transform: translateX(-27vw) translateY(28vh) scale(0.4887780549);
  }
  57.6923076923% {
    transform: translateX(-31vw) translateY(-21vh) scale(0.5386533666);
  }
  61.5384615385% {
    transform: translateX(-12vw) translateY(-33vh) scale(0.6982543641);
  }
  65.3846153846% {
    transform: translateX(-28vw) translateY(-2vh) scale(0.1596009975);
  }
  69.2307692308% {
    transform: translateX(22vw) translateY(-8vh) scale(0.0399002494);
  }
  73.0769230769% {
    transform: translateX(34vw) translateY(-32vh) scale(0.4987531172);
  }
  76.9230769231% {
    transform: translateX(32vw) translateY(-17vh) scale(0.7182044888);
  }
  80.7692307692% {
    transform: translateX(25vw) translateY(-37vh) scale(0.289276808);
  }
  84.6153846154% {
    transform: translateX(18vw) translateY(-7vh) scale(0.1197007481);
  }
  88.4615384615% {
    transform: translateX(4vw) translateY(47vh) scale(0.1995012469);
  }
  92.3076923077% {
    transform: translateX(-49vw) translateY(-34vh) scale(0.6483790524);
  }
  96.1538461538% {
    transform: translateX(-36vw) translateY(23vh) scale(0.3790523691);
  }
  100% {
    transform: translateX(20vw) translateY(41vh) scale(0.1097256858);
  }
}
@keyframes drift {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes flash {
  0% {
    opacity: 0;
    box-shadow: 0 0 0vw 0vw yellow;
  }
  30% {
    opacity: 0;
    box-shadow: 0 0 0vw 0vw yellow;
  }
  100% {
    opacity: 0;
    box-shadow: 0 0 0vw 0vw yellow;
  }
  5% {
    opacity: 1;
    box-shadow: 0 0 2vw 0.4vw yellow;
  }
}
@keyframes flip-front {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(89.5deg);
  }
}
@keyframes flip-back {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(-89.5deg);
  }
}
@keyframes flip-none-front {
  0% {
    transform: rotateY(-89.5deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}
@keyframes flip-none-back {
  0% {
    transform: rotateY(89.5deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}
@-webkit-keyframes rotate-right {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: right;
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-box-shadow: 12px -12px 20px -12px rgba(0, 0, 0, 0.35);
    box-shadow: 12px -12px 20px -12px rgba(0, 0, 0, 0.35);
  }
}
@keyframes rotate-right {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-box-shadow: 12px -12px 20px -12px rgba(0, 0, 0, 0.35);
    box-shadow: 12px -12px 20px -12px rgba(0, 0, 0, 0.35);
  }
}
@keyframes odsoky {
  0% {
    transform: translateY(6px);
  }
  100% {
    transform: translateY(1px);
  }
}
@keyframes floating {
  0% {
    transform: translateY(6px);
  }
  100% {
    transform: translateY(1px);
  }
}
@keyframes lesson-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes pamphlet {
  0% {
    transform: scale(1) rotate(0deg);
  }
  100% {
    transform: scale(1.1) rotate(-6deg);
  }
}
@-webkit-keyframes fadeinout {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes fadeinout {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes animateOpenFlapOpacity {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.7;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes wobble-ver-left {
  0%, 100% {
    -webkit-transform: translateY(0) rotate(0);
    transform: translateY(0) rotate(0);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  5% {
    -webkit-transform: translateY(-30px) rotate(-6deg);
    transform: translateY(-30px) rotate(-6deg);
  }
  10% {
    -webkit-transform: translateY(15px) rotate(6deg);
    transform: translateY(15px) rotate(6deg);
  }
  15% {
    -webkit-transform: translateY(-15px) rotate(-3.6deg);
    transform: translateY(-15px) rotate(-3.6deg);
  }
  20% {
    -webkit-transform: translateY(9px) rotate(2.4deg);
    transform: translateY(9px) rotate(2.4deg);
  }
  25% {
    -webkit-transform: translateY(-6px) rotate(-1.2deg);
    transform: translateY(-6px) rotate(-1.2deg);
  }
}
@keyframes wobble-ver-left {
  0%, 100% {
    -webkit-transform: translateY(0) rotate(0);
    transform: translateY(0) rotate(0);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  5% {
    -webkit-transform: translateY(-30px) rotate(-6deg);
    transform: translateY(-30px) rotate(-6deg);
  }
  10% {
    -webkit-transform: translateY(15px) rotate(6deg);
    transform: translateY(15px) rotate(6deg);
  }
  15% {
    -webkit-transform: translateY(-15px) rotate(-3.6deg);
    transform: translateY(-15px) rotate(-3.6deg);
  }
  20% {
    -webkit-transform: translateY(9px) rotate(2.4deg);
    transform: translateY(9px) rotate(2.4deg);
  }
  25% {
    -webkit-transform: translateY(-6px) rotate(-1.2deg);
    transform: translateY(-6px) rotate(-1.2deg);
  }
}
@-webkit-keyframes wobble-ver-left {
  0%, 100% {
    -webkit-transform: translateY(0) rotate(0);
    transform: translateY(0) rotate(0);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  5% {
    -webkit-transform: translateY(-30px) rotate(-6deg);
    transform: translateY(-30px) rotate(-6deg);
  }
  10% {
    -webkit-transform: translateY(15px) rotate(6deg);
    transform: translateY(15px) rotate(6deg);
  }
  15% {
    -webkit-transform: translateY(-15px) rotate(-3.6deg);
    transform: translateY(-15px) rotate(-3.6deg);
  }
  20% {
    -webkit-transform: translateY(9px) rotate(2.4deg);
    transform: translateY(9px) rotate(2.4deg);
  }
  25% {
    -webkit-transform: translateY(-6px) rotate(-1.2deg);
    transform: translateY(-6px) rotate(-1.2deg);
  }
}
@keyframes wobble-ver-left {
  0%, 100% {
    -webkit-transform: translateY(0) rotate(0);
    transform: translateY(0) rotate(0);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
  }
  5% {
    -webkit-transform: translateY(-30px) rotate(-6deg);
    transform: translateY(-30px) rotate(-6deg);
  }
  10% {
    -webkit-transform: translateY(15px) rotate(6deg);
    transform: translateY(15px) rotate(6deg);
  }
  15% {
    -webkit-transform: translateY(-15px) rotate(-3.6deg);
    transform: translateY(-15px) rotate(-3.6deg);
  }
  20% {
    -webkit-transform: translateY(9px) rotate(2.4deg);
    transform: translateY(9px) rotate(2.4deg);
  }
  25% {
    -webkit-transform: translateY(-6px) rotate(-1.2deg);
    transform: translateY(-6px) rotate(-1.2deg);
  }
}
@layer base {
  :where(.learner-app) {
    @media (prefers-reduced-motion: no-preference) {
      [data-aos] {
        animation-duration: 0.6s;
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-fill-mode: both;
      }
      [data-aos="fade-up"] {
        animation-name: lrn-aos-fade-up;
      }
      [data-aos="fade-down"] {
        animation-name: lrn-aos-fade-down;
      }
      [data-aos="fade-left"] {
        animation-name: lrn-aos-fade-left;
      }
      [data-aos="fade-right"] {
        animation-name: lrn-aos-fade-right;
      }
      [data-aos="fade-in"] {
        animation-name: lrn-aos-fade-in;
      }
      [data-aos="zoom-in"] {
        animation-name: lrn-aos-zoom-in;
      }
      [data-aos="zoom-in-up"] {
        animation-name: lrn-aos-zoom-in-up;
      }
      [data-aos="zoom-in-left"] {
        animation-name: lrn-aos-zoom-in-left;
      }
      [data-aos="flip-down"] {
        animation-name: lrn-aos-flip-down;
      }
      [data-aos="flip-up"] {
        animation-name: lrn-aos-flip-up;
      }
      [data-aos].background-1, [data-aos].background-2, [data-aos].background-3, [data-aos].background-4, [data-aos].background-5, [data-aos].background-6, [data-aos].background-7, [data-aos].background-9-a, [data-aos].background-9-b {
        animation-name: lrn-aos-fade-in;
      }
      [data-aos-delay="100"] {
        animation-delay: 0.1s;
      }
      [data-aos-delay="200"] {
        animation-delay: 0.2s;
      }
      [data-aos-delay="300"] {
        animation-delay: 0.3s;
      }
      [data-aos-delay="400"] {
        animation-delay: 0.4s;
      }
      [data-aos-delay="500"] {
        animation-delay: 0.5s;
      }
    }
  }
}
@keyframes lrn-aos-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes lrn-aos-fade-down {
  from {
    opacity: 0;
    transform: translate3d(0, -24px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes lrn-aos-fade-left {
  from {
    opacity: 0;
    transform: translate3d(24px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes lrn-aos-fade-right {
  from {
    opacity: 0;
    transform: translate3d(-24px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes lrn-aos-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes lrn-aos-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes lrn-aos-zoom-in-up {
  from {
    opacity: 0;
    transform: scale(0.94) translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes lrn-aos-zoom-in-left {
  from {
    opacity: 0;
    transform: scale(0.94) translate3d(24px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes lrn-aos-flip-down {
  from {
    opacity: 0;
    transform: perspective(2500px) rotateX(-72deg);
  }
  to {
    opacity: 1;
    transform: perspective(2500px) rotateX(0);
  }
}
@keyframes lrn-aos-flip-up {
  from {
    opacity: 0;
    transform: perspective(2500px) rotateX(72deg);
  }
  to {
    opacity: 1;
    transform: perspective(2500px) rotateX(0);
  }
}
@layer base {
  html:has(.learner-app) {
    overflow-x: clip;
  }
}
@layer responsive {
  :where(.learner-app) {
    @media (max-width: 62rem) {
      .main.full-width-app {
        overflow-x: auto;
      }
    }
    @media (max-width: 62rem) {
      .container-centered {
        position: static;
        height: auto;
        min-height: 100%;
        justify-content: flex-start;
        padding-top: 3.25rem;
        padding-bottom: 1rem;
      }
      .full-width-app {
        height: auto;
        min-height: 100svh;
      }
    }
    @media (max-width: 62rem) {
      .modules-select {
        max-width: 100%;
        height: auto;
        padding-inline: 1rem;
      }
      .modules-select .module-completed, .modules-select .module-locked, .modules-select .module-inprogress, .modules-select .module-neutral {
        height: min(140px, 34vw);
        width: min(140px, 34vw);
        margin-bottom: 1.5rem;
      }
      .module_map {
        max-width: 100%;
        min-height: 0;
        transform: none;
        background-image: none;
      }
      .modules-select .nav-link [class*="module-"] + .module-info, .modules-select .nav-link .module-info {
        position: static;
        left: auto;
        top: auto;
        width: auto;
        min-width: 0;
        max-width: min(90vw, 32rem);
        margin-inline: auto;
        visibility: visible;
        opacity: 1;
        transform: none;
      }
      .modules-select .nav-link [class*="module-"] + .module-info::after, .modules-select .nav-link .module-info::after {
        display: none;
      }
      .tools-select .nav-link .module-info {
        display: none;
      }
      .header-ribbon {
        max-width: 100%;
        margin-block: 0.25rem;
        margin-inline: 0;
        padding-inline: 1rem;
      }
      .header-ribbon[class*="nmt-"], .alert[class*="nmt-"] {
        margin-top: 0;
      }
      .header-ribbon.double-ribbon-left, .header-ribbon.double-ribbon-right, .header-ribbon.double-ribbon-right.olive {
        flex: 0 1 auto;
        width: auto;
        max-width: 100%;
        margin-inline: 0;
        background-size: 100% 100%;
      }
      .header-ribbon h1, .header-ribbon h2, .header-ribbon .h3 {
        font-size: 1.25rem;
        margin-bottom: 0;
        padding-inline: 0.75rem;
        overflow-wrap: anywhere;
      }
      .tools-select {
        max-width: 100%;
        flex-wrap: nowrap;
        gap: 0.25rem;
      }
    }
    @media (max-width: 62rem) {
      .top-position {
        position: static;
        top: auto;
      }
    }
    @media (max-width: 48rem) {
      .lesson-select {
        max-width: 100%;
        margin-top: 1rem;
        padding-inline: 0.75rem;
      }
      .lesson-select .nav-link {
        transform: none;
      }
    }
    @media (max-width: 62rem) {
      .flashcard {
        --fc-w: clamp(11rem, 18vw, 18vw);
        width: var(--fc-w);
        aspect-ratio: 4 / 5;
        height: auto;
        min-height: 0;
        min-width: 0;
      }
      .flashcard-text h4 {
        font-size: max(0.9375rem, calc(var(--fc-w) / 10));
      }
      .flashcard-text h4.smaller, .flashcard-text h5 {
        font-size: max(0.8125rem, calc(var(--fc-w) / 16));
      }
      .flashcard-text h5.smaller, .flashcard-text h6 {
        font-size: max(0.75rem, calc(var(--fc-w) / 20));
      }
      .flashcard-text h6.smaller {
        font-size: max(0.75rem, calc(var(--fc-w) / 24));
      }
      .flashcard .card-text, .flashcard p {
        font-size: max(0.8125rem, calc(var(--fc-w) / 16));
      }
      .flashcard-img {
        max-width: 100%;
      }
      .cards-row {
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x proximity;
      }
      .cards-row > * {
        flex: 0 0 auto;
        scroll-snap-align: center;
      }
    }
    @media (max-width: 62rem) {
      .full-width-app .start-menu {
        font-size: clamp(1rem, min(4vh, 7vw), 6rem);
      }
    }
    @media (max-width: 62rem) {
      .multiple-choice-container {
        height: auto;
        min-height: 100svh;
        min-width: 0;
      }
      .multiple-choice-container .interaction-container {
        height: auto;
        flex-direction: column;
      }
      .multiple-choice-container .interaction-container > div {
        width: 100%;
      }
      .multiple-choice-container .options-container {
        min-width: 0;
        max-height: none;
      }
      .question-container {
        width: 100%;
        min-width: 0;
        max-height: none;
      }
    }
    @media (max-width: 62rem) {
      .basket-row {
        width: 100%;
        flex-wrap: wrap;
        gap: 0.5rem;
      }
      .basket-container {
        width: clamp(5.5rem, 13vw, 13vw);
        height: clamp(4.25rem, 10vw, 10vw);
      }
      .basket-label {
        font-size: clamp(0.8rem, 3vw, 3vw);
      }
    }
    @media (max-width: 62rem) {
      .popup-container .popup .popup-inner, .floating-menu-container .popup .popup-inner {
        width: min(500px, calc(100vw - 1.5rem));
        max-width: calc(100vw - 1.5rem);
        padding: 1rem 1.25rem 1.5rem;
      }
      .popup-container .popup .popup-inner .popup-title .popup-close-btn, .floating-menu-container .popup .popup-inner .popup-title .popup-close-btn {
        margin: 0;
      }
      .popup-container .popup .popup-inner .popup-title, .floating-menu-container .popup .popup-inner .popup-title {
        margin-bottom: 0.5rem;
      }
      .popup-container .popup .popup-inner .popup-content .popup-scroll, .floating-menu-container .popup .popup-inner .popup-content .popup-scroll {
        max-height: min(400px, 45svh);
        padding: 0.5rem;
      }
    }
    @media (max-width: 62rem) {
      #notification-menu-container {
        top: 0.5rem;
        right: 0.5rem;
        left: 0.5rem;
        width: auto;
        max-height: calc(100svh - 1rem);
        overflow-y: auto;
      }
    }
    @media (max-width: 62rem) {
      .container {
        min-width: 0;
      }
      .downloads-page-block {
        width: 100%;
        float: none;
      }
      .w-60 {
        width: 100%;
      }
    }
    col-lg-* children pins them into a row at every width, so the responsive stacking those column classes exist to provide never happens and the second column is squeezed off the side. Honour the intent at the breakpoint the column class names it. IN `@layer utilities`, AND IT HAS TO BE. `flex-row!` is a Tailwind utility, which lives in that layer. For !important declarations the cascade prefers the EARLIER layer, and treats unlayered CSS as the last layer of all -- so an unlayered `!important` rule loses to a layered one no matter how specific it is. Written unlayered, as it was when the markup said `flex-row` and this file was the only thing in the bundle, this rule silently stopped applying. Inside the same layer, specificity decides again and these four-class selectors win. The scope prefix is spelled out because @layer cannot be nested inside a style rule, so this block sits outside the :where(.learner-app) wrapper the rest of the file is in. */ @media (max-width: 62rem) {
      .full-width-app table, .printable-page table {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }
      .full-width-app table > thead, .full-width-app table > tbody, .printable-page table > thead, .printable-page table > tbody {
        display: table;
        width: max-content;
        min-width: 100%;
      }
      .full-width-app table thead tr, .full-width-app table th, .full-width-app table td, .printable-page table thead tr, .printable-page table th, .printable-page table td {
        font-size: 0.875rem;
        white-space: normal;
      }
    }
    @media (max-width: 62rem) {
      .full-width-app .font-size-xs, .printable-page .font-size-xs, .cms-layout .font-size-xs {
        font-size: 0.8125rem;
      }
      .full-width-app .font-size-sm, .printable-page .font-size-sm, .cms-layout .font-size-sm {
        font-size: 0.875rem;
      }
      .full-width-app .font-size-md, .printable-page .font-size-md, .cms-layout .font-size-md {
        font-size: 1rem;
      }
      .team-tile {
        flex: 1 1 100%;
        max-width: min(100%, 30rem);
        margin-inline: auto;
        margin-block: 1rem;
      }
      .team-tile .card-text p {
        font-size: max(0.9375rem, 1vw);
      }
      .team-tile .card-img {
        max-height: 40vh;
      }
    }
    @media (max-width: 62rem) {
      .animated-tabs .nav a.nav-link, .animated-tabs .nav .nav-link {
        font-size: 0.8125rem;
        letter-spacing: 0;
        padding-inline: 0.25rem;
        overflow-wrap: anywhere;
      }
      .nav.nav-tabs:not(.animated-tabs .nav) {
        flex-wrap: wrap;
        row-gap: 0.25rem;
      }
      .vertical-tabs {
        flex-direction: column;
      }
      .vertical-tabs .nav {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 0.25rem;
      }
    }
    @media (max-width: 62rem) {
      .main.full-width-app {
        padding-bottom: 5.25rem;
      }
      .full-width-app .inner-container {
        padding-top: 3.25rem;
      }
      .full-width-app .alert h1, .full-width-app h1.alert, .full-width-app h2.alert, .full-width-app h3.alert {
        font-size: 1.375rem;
        line-height: 1.25;
      }
    }
    @media (max-width: 48rem) {
      .full-width-app .w-25, .full-width-app .w-50, .full-width-app .w-75 {
        width: 100%;
      }
    }
    @media (max-width: 62rem) {
      .full-width-app .nav-tabs .nav-link, .cms-layout .nav-tabs .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
      }
      .full-width-app .btn, .cms-layout .btn, .printable-page .btn {
        min-height: 44px;
      }
      .full-width-app input[type="checkbox"], .full-width-app input[type="radio"], .cms-layout input[type="checkbox"], .cms-layout input[type="radio"] {
        width: 1.25rem;
        height: 1.25rem;
      }
    }
    @media (max-width: 62rem) and (prefers-reduced-motion: no-preference) {
      [data-aos="fade-left"], [data-aos="fade-right"] {
        animation-name: lrn-aos-fade-up;
      }
      [data-aos="zoom-in-left"] {
        animation-name: lrn-aos-zoom-in;
      }
    }
    @media (hover: none) {
      .scale-on-hover {
        transform: none;
      }
    }
  }
}
@layer base {
  @layer utilities {
    @media (max-width: 62rem) {
      .full-width-app .flex:has(> .header-ribbon) {
        flex-wrap: wrap;
        justify-content: center;
        max-width: 100%;
        margin: 0;
        row-gap: 0.25rem;
      }
      .full-width-app .absolute.w-full:has(.header-ribbon) {
        position: static;
        padding-top: 3.25rem;
      }
    }
  }
  @layer utilities {
    @media (max-width: 62rem) {
      .full-width-app .flex.flex-row:has(> [class*="col-lg-"]), .printable-page .flex.flex-row:has(> [class*="col-lg-"]) {
        flex-direction: column;
      }
    }
    @media (max-width: 48rem) {
      .full-width-app .flex.flex-row:has(> [class*="col-md-"]), .printable-page .flex.flex-row:has(> [class*="col-md-"]) {
        flex-direction: column;
      }
    }
  }
}
@layer components {
  .ang-activity {
    --ang-tile-max: 3.25rem;
    --ang-tile-gap: clamp(0.15rem, 0.5vw, 0.35rem);
    --ang-radius: 0.5rem;
    --ang-lift: 0.1875rem;
    --ang-speed: 160ms;
    --ang-card: var(--light-background-color-lighter);
    --ang-card-active: var(--neutral-150);
    --ang-card-done: var(--success-color);
    @supports (color: color-mix(in lab, red, red)) {
      --ang-card-done: color-mix(in srgb, var(--success-color) 16%, var(--neutral-100));
    }
    --ang-card-revealed: var(--secondary-color);
    @supports (color: color-mix(in lab, red, red)) {
      --ang-card-revealed: color-mix(in srgb, var(--secondary-color) 20%, var(--neutral-100));
    }
    --ang-tile-face: var(--neutral-300);
    --ang-tile-edge: var(--neutral-400);
    --ang-ink: var(--dark-text-color);
    --ang-line: var(--muted-text-color);
    @supports (color: color-mix(in lab, red, red)) {
      --ang-line: color-mix(in srgb, var(--muted-text-color) 45%, transparent);
    }
    --ang-accent: var(--secondary-color);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: clamp(0.75rem, 2vw, 2rem);
    box-sizing: border-box;
    width: min(100%, 76rem);
    height: 100%;
    padding: 0 clamp(0.5rem, 1.5vw, 1.25rem) 1rem;
    outline: none;
  }
  .ang-progress {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    justify-content: center;
    margin-right: 20px;
  }
  .ang-board {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
    align-content: start;
    gap: clamp(0.5rem, 1.2vw, 1rem);
    align-self: stretch;
    min-height: 0;
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding-right: 0.25rem;
  }
  .ang-activity:focus-visible {
    outline: 0.1875rem solid var(--ang-accent);
    outline-offset: 0.375rem;
    border-radius: 0.75rem;
  }
  .ang-word {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    container-type: inline-size;
    padding: 0.7rem 0.9rem 0.85rem;
    border: 1px solid var(--muted-text-color);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--muted-text-color) 22%, transparent);
    }
    border-radius: 0.75rem;
    background-color: var(--ang-card);
    opacity: 0.55;
    cursor: pointer;
    transition: opacity var(--ang-speed) ease, transform var(--ang-speed) ease, box-shadow var(--ang-speed) ease, background-color 240ms ease;
  }
  .ang-word::before {
    content: "";
    position: absolute;
    inset: 0.6rem auto 0.6rem 0;
    width: 0.25rem;
    border-radius: 0.25rem;
    background-color: transparent;
    transition: background-color var(--ang-speed) ease;
  }
  .ang-word--active {
    opacity: 1;
    cursor: default;
    background-color: var(--ang-card-active);
    border-color: var(--ang-accent);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--ang-accent) 55%, transparent);
    }
    box-shadow: 0 0.5rem 1.5rem var(--core-color);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--core-color) 18%, transparent);
    }
    transform: translateY(-0.125rem);
  }
  .ang-word--active::before {
    background-color: var(--ang-accent);
  }
  .ang-word--done, .ang-word--revealed {
    opacity: 1;
    cursor: default;
  }
  .ang-word--done {
    background-color: var(--ang-card-done);
    border-color: var(--success-color);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--success-color) 45%, transparent);
    }
  }
  .ang-word--revealed {
    background-color: var(--ang-card-revealed);
    border-color: var(--secondary-color);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--secondary-color) 45%, transparent);
    }
  }
  .ang-word--wrong {
    animation: ang-shake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
  }
  .ang-word__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 1rem;
    line-height: 1.2;
    color: var(--muted-text-color);
  }
  .ang-word__num {
    display: inline-grid;
    place-items: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.4rem;
    border-radius: 0.9rem;
    background-color: var(--muted-text-color);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--muted-text-color) 18%, transparent);
    }
    font-weight: 700;
    color: var(--ang-ink);
  }
  .ang-word--active .ang-word__num {
    background-color: var(--ang-accent);
    color: var(--white-text-color);
  }
  .ang-word__status {
    font-variant-numeric: tabular-nums;
  }
  .ang-slots, .ang-pool {
    display: grid;
    grid-template-columns: repeat(var(--ang-len), minmax(0, 1fr));
    gap: var(--ang-tile-gap);
    width: 100%;
    max-width: calc(var(--ang-len) * (var(--ang-tile-max) + var(--ang-tile-gap)));
    margin-inline: auto;
  }
  .ang-pool {
    margin-top: 0.3rem;
  }
  .ang-slot, .ang-tile {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    border-radius: var(--ang-radius);
    font-family: inherit;
    font-size: clamp(1.15rem, 4.4cqi, 2rem);
    font-weight: 700;
    line-height: 1;
    color: var(--ang-ink);
    text-transform: none;
    user-select: none;
  }
  .ang-slot:focus, .ang-tile:focus {
    outline: none;
  }
  .ang-dragging {
    opacity: 0.3;
  }
  .ang-tile {
    border: 1px solid var(--ang-tile-edge);
    background-color: var(--ang-tile-face);
    box-shadow: 0 var(--ang-lift) 0 0 var(--ang-tile-edge);
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, background-color var(--ang-speed) ease;
  }
  .ang-word--active .ang-tile:hover {
    transform: translateY(-0.125rem);
    background-color: var(--ang-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--ang-accent) 18%, var(--ang-tile-face));
    }
    box-shadow: 0 calc(var(--ang-lift) + 0.125rem) 0 0 var(--ang-tile-edge);
  }
  .ang-word--active .ang-tile:active {
    transform: translateY(var(--ang-lift));
    box-shadow: none;
  }
  .ang-tile:focus-visible {
    outline: 0.1875rem solid var(--ang-accent);
    outline-offset: 0.125rem;
  }
  .ang-tile--empty {
    visibility: hidden;
  }
  .ang-slot {
    border: 0.125rem dashed var(--ang-line);
    background-color: transparent;
    cursor: pointer;
    transition: border-color 140ms ease, background-color var(--ang-speed) ease, box-shadow 140ms ease;
  }
  .ang-slot--filled {
    border-style: solid;
    border-color: var(--ang-tile-edge);
    background-color: var(--neutral-100);
    animation: ang-pop 200ms ease-out;
  }
  .ang-slot--hinted {
    border-style: solid;
    border-color: var(--info-color);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--info-color) 55%, transparent);
    }
    background-color: var(--info-color);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--info-color) 22%, var(--neutral-100));
    }
    cursor: not-allowed;
  }
  .ang-slot--separator {
    border-color: transparent;
    background-color: transparent;
    cursor: default;
  }
  .ang-word--active .ang-slot--active {
    border-style: solid;
    border-color: var(--ang-accent);
    animation: ang-caret 1.6s ease-in-out infinite;
  }
  .ang-word--done .ang-slot, .ang-word--revealed .ang-slot {
    cursor: default;
  }
  .ang-word--done .ang-slot--filled {
    border-color: var(--success-color);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--success-color) 60%, transparent);
    }
    background-color: var(--success-color);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--success-color) 26%, var(--neutral-100));
    }
  }
  .ang-word--revealed .ang-slot--filled {
    border-color: var(--secondary-color);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--secondary-color) 60%, transparent);
    }
    background-color: var(--secondary-color);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--secondary-color) 26%, var(--neutral-100));
    }
  }
  .ang-rail {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-self: start;
    gap: 0.85rem;
    width: clamp(12rem, 20vw, 16rem);
  }
  .ang-panel {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.8rem;
    border: 1px solid var(--muted-text-color);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--muted-text-color) 20%, transparent);
    }
    border-radius: 0.75rem;
    background-color: var(--neutral-100);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--neutral-100) 65%, transparent);
    }
  }
  .ang-panel__label {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-text-color);
  }
  .ang-panel__row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.65rem;
  }
  .ang-panel__spent {
    margin: 0;
    font-size: 0.95rem;
    text-align: center;
    color: var(--muted-text-color);
  }
  .ang-rail__hint {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    overflow: hidden;
    padding: 0.5rem;
    border: 1px solid var(--muted-text-color);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--muted-text-color) 18%, transparent);
    }
    border-radius: 0.5rem;
    background-color: var(--neutral-100);
  }
  .ang-rail__hint img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: ang-pop 260ms ease-out;
  }
  .ang-rail__hint-empty {
    margin: 0;
    font-size: 1.05rem;
    text-align: center;
    color: var(--muted-text-color);
  }
  .ang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: calc(100% - 6px);
    min-width: 0;
    margin-right: 0;
    margin-bottom: 5px;
    padding-inline: 0.5rem;
    white-space: normal;
  }
  .ang-btn i {
    font-size: 1.15em;
    line-height: 1;
  }
  .ang-btn--check {
    margin-top: 0.15rem;
    padding-block: 0.55rem;
    font-size: 1.05rem;
    font-weight: 700;
  }
  .ang-rail__tip {
    margin: 0;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--muted-text-color);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--muted-text-color) 20%, transparent);
    }
    border-radius: 0.75rem;
    background-color: var(--neutral-100);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--neutral-100) 65%, transparent);
    }
    font-size: 0.95rem;
    line-height: 1.4;
    text-align: center;
    color: var(--ang-ink);
  }
  .ang-print-button {
    margin-top: auto;
    white-space: nowrap;
  }
  .ang-print-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
  .ang-live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  @keyframes ang-pop {
    0% {
      transform: scale(0.72);
      opacity: 0;
    }
    60% {
      transform: scale(1.08);
      opacity: 1;
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes ang-shake {
    10%, 90% {
      transform: translateX(-0.0625rem);
    }
    20%, 80% {
      transform: translateX(0.125rem);
    }
    30%, 50%, 70% {
      transform: translateX(-0.25rem);
    }
    40%, 60% {
      transform: translateX(0.25rem);
    }
  }
  @keyframes ang-caret {
    0%, 100% {
      box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--ang-accent) 38%, transparent);
    }
    50% {
      box-shadow: 0 0 0 0.3125rem color-mix(in srgb, var(--ang-accent) 12%, transparent);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ang-word, .ang-word::before, .ang-tile, .ang-slot {
      transition-duration: 0.01ms;
      animation: none;
    }
    .ang-word--active {
      transform: none;
    }
    .ang-word--active .ang-tile:hover, .ang-word--active .ang-tile:active {
      transform: none;
    }
    .ang-rail__hint img {
      animation: none;
    }
    .ang-word--active .ang-slot--active {
      box-shadow: 0 0 0 0.1875rem var(--ang-accent);
    }
  }
  @media (max-width: 62rem) {
    .ang-activity {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto minmax(0, 1fr) auto;
      row-gap: 0.5rem;
    }
    .ang-progress, .ang-board {
      grid-column: 1;
    }
    .ang-rail {
      grid-column: 1;
      grid-row: 3;
      flex-direction: row;
      align-items: stretch;
      align-self: stretch;
      width: 100%;
    }
    .ang-panel--hint {
      flex: 0 1 auto;
      flex-direction: row;
      align-items: center;
    }
    .ang-panel--hint .ang-panel__label {
      display: none;
    }
    .ang-rail__hint {
      flex: 0 0 auto;
      width: 5.5rem;
    }
    .ang-panel {
      flex: 1 1 auto;
      justify-content: center;
    }
    .ang-btn--check {
      flex: 0 0 auto;
      align-self: center;
      width: auto;
      padding-inline: 1.75rem;
    }
    .ang-rail__tip {
      display: none;
    }
  }
  @media (max-width: 48rem) {
    .ang-activity {
      --ang-tile-max: 2.5rem;
    }
    .ang-word {
      overflow-x: auto;
      overscroll-behavior-x: contain;
    }
    .ang-slots, .ang-pool {
      grid-template-columns: repeat(var(--ang-len), 2.5rem);
      min-width: max-content;
      max-width: none;
      margin-inline: 0;
    }
  }
}
@layer components {
  .fib-activity {
    --fib-panel: var(--fill-blanks-container-color, #fffdd6);
    --fib-ink: var(--fill-blanks-input-text-color, #505b33);
    --fib-accent: var(--accent-color-1, #e6754b);
    --fib-on-dark: var(--neutral-200, #fffdd6);
    --fib-border: var(--fib-ink);
    @supports (color: color-mix(in lab, red, red)) {
      --fib-border: color-mix(in srgb, var(--fib-ink) 22%, transparent);
    }
    --fib-muted: var(--fib-ink);
    @supports (color: color-mix(in lab, red, red)) {
      --fib-muted: color-mix(in srgb, var(--fib-ink) 62%, transparent);
    }
    --fib-correct: #2f7d4f;
    --fib-wrong: #b8321f;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.75rem, 2vh, 1.25rem);
    width: min(100% - 2rem, 68rem);
    min-height: 100dvh;
    margin-inline: auto;
    padding-block: clamp(0.75rem, 3vh, 1.75rem);
  }
  .fib-activity-progress {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    width: 100%;
    padding-right: 20px;
  }
  .fib-stage {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 2.5vh, 1.5rem);
    width: 100%;
  }
  .fib-reveal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 4.25rem;
  }
  .fib-reveal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    max-width: 100%;
    padding: 0.6rem 1.5rem;
    border-radius: 0.8rem;
    background: var(--fib-panel);
    box-shadow: 0 6px 16px rgb(0 0 0 / 14%);
  }
  .fib-reveal-card--hint {
    background: var(--fib-accent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--fib-accent) 14%, var(--fib-panel));
    }
  }
  .fib-reveal-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--fib-accent);
  }
  .fib-reveal-text {
    font-size: clamp(1rem, 2.4vw, 1.4rem);
    font-weight: 600;
    text-align: center;
    color: var(--fib-ink);
  }
  .fib-answer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 3vw, 2.5rem) clamp(0.9rem, 2vw, 1.5rem);
    border-radius: 1rem;
    background: var(--fib-panel);
    box-shadow: 0 10px 28px rgb(0 0 0 / 16%);
  }
  .fib-status {
    min-height: 1.5rem;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
  }
  .fib-status--correct {
    color: var(--fib-correct);
  }
  .fib-status--wrong {
    color: var(--fib-wrong);
  }
  .fib-status--idle {
    color: transparent;
  }
  .fib-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
  }
  .fib-button {
    appearance: none;
    border: 2px solid transparent;
    border-radius: 999px;
    padding: 0.55rem 1.7rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 140ms ease, opacity 140ms ease, transform 100ms ease;
  }
  .fib-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
  .fib-button:not(:disabled):active {
    transform: translateY(1px);
  }
  .fib-button:focus-visible {
    outline: 2px solid var(--fib-on-dark);
    outline-offset: 3px;
  }
  .fib-button--go {
    background: var(--fib-accent);
    border-color: var(--fib-accent);
    color: var(--fib-on-dark);
  }
  .fib-button--go:not(:disabled):hover {
    background: var(--accent-color-1-dark, #e36435);
  }
  .fib-button--quiet {
    background: transparent;
    border-color: var(--fib-on-dark);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--fib-on-dark) 70%, transparent);
    }
    color: var(--fib-on-dark);
  }
  .fib-button--quiet:not(:disabled):hover {
    background: var(--fib-on-dark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--fib-on-dark) 18%, transparent);
    }
  }
  .fib-button--ghost {
    background: var(--fib-panel);
    border-color: var(--fib-panel);
    color: var(--fib-ink);
  }
  .fib-button--ghost:not(:disabled):hover {
    background: var(--fib-ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--fib-ink) 10%, var(--fib-panel));
    }
  }
  .fib-finish {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: auto;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: 1rem;
    background: var(--fib-panel);
    box-shadow: 0 12px 32px rgb(0 0 0 / 20%);
    text-align: center;
  }
  .fib-finish-title {
    margin: 0;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: var(--fib-ink);
  }
  .fib-finish-text {
    margin: 0;
    color: var(--fib-muted);
  }
  .fib-finish-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
  }
  .fib-finish .fib-button--ghost {
    border-color: var(--fib-border);
  }
}
@layer components {
  .fib-activity {
    --fib-panel: var(--fill-blanks-container-color, #fffdd6);
    --fib-ink: var(--fill-blanks-input-text-color, #505b33);
    --fib-accent: var(--accent-color-1, #e6754b);
    --fib-on-dark: var(--neutral-200, #fffdd6);
    --fib-border: var(--fib-ink);
    @supports (color: color-mix(in lab, red, red)) {
      --fib-border: color-mix(in srgb, var(--fib-ink) 22%, transparent);
    }
    --fib-muted: var(--fib-ink);
    @supports (color: color-mix(in lab, red, red)) {
      --fib-muted: color-mix(in srgb, var(--fib-ink) 62%, transparent);
    }
    --fib-correct: #2f7d4f;
    --fib-wrong: #b8321f;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.75rem, 2vh, 1.25rem);
    width: min(100% - 2rem, 68rem);
    min-height: 100dvh;
    margin-inline: auto;
    padding-block: clamp(0.75rem, 3vh, 1.75rem);
  }
  .fib-activity-progress {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    width: 100%;
    padding-right: 20px;
  }
  .fib-stage {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(0.75rem, 2.5vh, 1.5rem);
    width: 100%;
  }
  .fib-reveal {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 4.25rem;
  }
  .fib-reveal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    max-width: 100%;
    padding: 0.6rem 1.5rem;
    border-radius: 0.8rem;
    background: var(--fib-panel);
    box-shadow: 0 6px 16px rgb(0 0 0 / 14%);
  }
  .fib-reveal-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--fib-accent);
  }
  .fib-reveal-text {
    font-size: clamp(1.05rem, 2.6vw, 1.6rem);
    font-weight: 600;
    text-align: center;
    color: var(--fib-ink);
  }
  .fib-play {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    width: 100%;
  }
  .fib-prompt {
    flex: 0 1 auto;
  }
  .fib-answer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1rem, 3vw, 2.5rem) clamp(0.9rem, 2vw, 1.5rem);
    border-radius: 1rem;
    background: var(--fib-panel);
    box-shadow: 0 10px 28px rgb(0 0 0 / 16%);
  }
  .fib-status {
    min-height: 1.5rem;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
  }
  .fib-status--correct {
    color: var(--fib-correct);
  }
  .fib-status--wrong {
    color: var(--fib-wrong);
  }
  .fib-status--idle {
    color: transparent;
  }
  .fib-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
  }
  .fib-button {
    appearance: none;
    border: 2px solid transparent;
    border-radius: 999px;
    padding: 0.55rem 1.7rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 140ms ease, opacity 140ms ease, transform 100ms ease;
  }
  .fib-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
  .fib-button:not(:disabled):active {
    transform: translateY(1px);
  }
  .fib-button:focus-visible {
    outline: 2px solid var(--fib-on-dark);
    outline-offset: 3px;
  }
  .fib-button--go {
    background: var(--fib-accent);
    border-color: var(--fib-accent);
    color: var(--fib-on-dark);
  }
  .fib-button--go:not(:disabled):hover {
    background: var(--accent-color-1-dark, #e36435);
  }
  .fib-button--quiet {
    background: transparent;
    border-color: var(--fib-on-dark);
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--fib-on-dark) 70%, transparent);
    }
    color: var(--fib-on-dark);
  }
  .fib-button--quiet:not(:disabled):hover {
    background: var(--fib-on-dark);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--fib-on-dark) 18%, transparent);
    }
  }
  .fib-button--ghost {
    background: var(--fib-panel);
    border-color: var(--fib-panel);
    color: var(--fib-ink);
  }
  .fib-button--ghost:not(:disabled):hover {
    background: var(--fib-ink);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--fib-ink) 10%, var(--fib-panel));
    }
  }
  .fib-finish {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: auto;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border-radius: 1rem;
    background: var(--fib-panel);
    box-shadow: 0 12px 32px rgb(0 0 0 / 20%);
    text-align: center;
  }
  .fib-finish-title {
    margin: 0;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: var(--fib-ink);
  }
  .fib-finish-text {
    margin: 0;
    color: var(--fib-muted);
  }
  .fib-finish-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
  }
  .fib-finish .fib-button--ghost {
    border-color: var(--fib-border);
  }
}
@layer components {
  .fib-sentence {
    --fib-slot: 0.62em;
    --fib-slot-wide: 0.86em;
    --fib-slot-h: 1.15em;
    --fib-slot-gap: 0.14em;
    --fib-ink: var(--fill-blanks-input-text-color, #505b33);
    --fib-line: var(--fill-blanks-input-dashes-color, #e6754b);
    --fib-accent: var(--accent-color-1, #e6754b);
    --fib-muted: var(--fib-ink);
    @supports (color: color-mix(in lab, red, red)) {
      --fib-muted: color-mix(in srgb, var(--fib-ink) 55%, transparent);
    }
    --fib-slot-active: var(--fib-accent);
    @supports (color: color-mix(in lab, red, red)) {
      --fib-slot-active: color-mix(in srgb, var(--fib-accent) 16%, transparent);
    }
    --fib-correct: #2f7d4f;
    --fib-correct-soft: color-mix(in srgb, #2f7d4f 16%, transparent);
    --fib-wrong: #b8321f;
    --fib-wrong-soft: color-mix(in srgb, #b8321f 14%, transparent);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.28em 0.34em;
    font-size: clamp(1.25rem, 3.6vw, 2.35rem);
    line-height: 1.25;
    color: var(--fib-ink);
    text-align: center;
  }
  .fib-letters {
    font: inherit;
    color: inherit;
  }
  .fib-chunk {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
  }
  .fib-error {
    margin: 0;
    font-weight: 600;
    text-align: center;
    color: #c0392b;
  }
}
@layer components {
  .fib-blank {
    --fib-w: var(--fib-slot, 0.62em);
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    padding-bottom: max(1.2rem, 0.62em);
    margin-inline: 0.16em;
    cursor: text;
  }
  .fib-blank--wide {
    --fib-w: var(--fib-slot-wide, 0.86em);
  }
  .fib-blank-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
    background-color: transparent;
    color: transparent;
    caret-color: transparent;
    font: inherit;
    text-align: center;
    letter-spacing: var(--fib-slot-gap, 0.14em);
    cursor: text;
    -webkit-tap-highlight-color: transparent;
  }
  .fib-blank-input:focus, .fib-blank-input:active {
    background-color: transparent;
    box-shadow: none;
    outline: none;
  }
  .fib-blank-input::selection {
    background: transparent;
  }
  .fib-blank-input:-webkit-autofill, .fib-blank-input:-webkit-autofill:hover, .fib-blank-input:-webkit-autofill:focus {
    border: 0;
    -webkit-text-fill-color: transparent;
    -webkit-box-shadow: none;
  }
  .fib-blank-slots {
    display: flex;
    align-items: flex-end;
    gap: var(--fib-slot-gap, 0.14em);
  }
  .fib-blank-slot {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: var(--fib-w);
    height: var(--fib-slot-h, 1.15em);
    border-radius: 0.12em;
    background: transparent;
    user-select: none;
    transition: background-color 120ms ease;
  }
  .fib-blank-slot--active {
    background: var(--fib-slot-active, transparent);
  }
  .fib-blank-glyph {
    font: inherit;
    line-height: 1;
    padding-bottom: 0.08em;
    color: var(--fib-ink, #505b33);
  }
  .fib-blank-glyph::before {
    content: "\200B";
  }
  .fib-blank-underline {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 0.1em;
    border-radius: 999px;
    background: var(--fib-line, #e6754b);
    transition: background-color 120ms ease;
  }
  .fib-blank-slot--active .fib-blank-underline {
    background: var(--fib-accent, #d9822b);
  }
  .fib-blank-caret {
    position: absolute;
    top: 14%;
    bottom: 22%;
    left: 50%;
    width: 0.06em;
    min-width: 1px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: var(--fib-accent, #d9822b);
    opacity: 0;
    pointer-events: none;
  }
  .fib-blank-slot--active:not(.fib-blank-slot--filled) .fib-blank-caret {
    opacity: 1;
    animation: fib-blank-blink 1.06s steps(1, end) infinite;
  }
  .fib-blank-count {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    font-size: max(1rem, 0.32em);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    text-align: center;
    color: var(--fib-muted, #7b8464);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
    transition: color 120ms ease;
  }
  .fib-blank-count--done {
    color: var(--fib-correct, #2f7d4f);
  }
  .fib-blank-count--wrong {
    color: var(--fib-wrong, #b8321f);
  }
  .fib-blank-slot--locked {
    background: var(--fib-correct-soft, rgb(47 125 79 / 16%));
  }
  .fib-blank-slot--locked .fib-blank-underline {
    background: var(--fib-correct, #2f7d4f);
  }
  .fib-blank-slot--locked .fib-blank-glyph {
    color: var(--fib-correct, #2f7d4f);
  }
  .fib-blank--wrong .fib-blank-slot:not(.fib-blank-slot--locked) {
    background: var(--fib-wrong-soft, rgb(184 50 31 / 14%));
  }
  .fib-blank--wrong .fib-blank-slot:not(.fib-blank-slot--locked) .fib-blank-underline {
    background: var(--fib-wrong, #b8321f);
  }
  .fib-blank--wrong {
    animation: fib-blank-shake 320ms ease-in-out 1;
  }
  .fib-blank--correct .fib-blank-slot {
    background: var(--fib-correct-soft, rgb(47 125 79 / 16%));
  }
  .fib-blank--correct .fib-blank-underline {
    background: var(--fib-correct, #2f7d4f);
  }
  .fib-blank--correct {
    animation: fib-blank-pop 260ms ease-out 1;
  }
  @keyframes fib-blank-blink {
    0%, 49% {
      opacity: 1;
    }
    50%, 100% {
      opacity: 0;
    }
  }
  @keyframes fib-blank-shake {
    0%, 100% {
      transform: translateX(0);
    }
    20% {
      transform: translateX(-0.12em);
    }
    45% {
      transform: translateX(0.1em);
    }
    70% {
      transform: translateX(-0.05em);
    }
  }
  @keyframes fib-blank-pop {
    0% {
      transform: scale(1);
    }
    45% {
      transform: scale(1.06);
    }
    100% {
      transform: scale(1);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .fib-blank--wrong, .fib-blank--correct {
      animation: none;
    }
    .fib-blank-slot--active:not(.fib-blank-slot--filled) .fib-blank-caret {
      animation: none;
      opacity: 1;
    }
  }
}
@layer components {
  .fib-word {
    --fib-slot: 0.62em;
    --fib-slot-wide: 0.86em;
    --fib-slot-h: 1.15em;
    --fib-slot-gap: 0.14em;
    --fib-ink: var(--fill-blanks-input-text-color, #505b33);
    --fib-line: var(--fill-blanks-input-dashes-color, #e6754b);
    --fib-accent: var(--accent-color-1, #e6754b);
    --fib-muted: var(--fib-ink);
    @supports (color: color-mix(in lab, red, red)) {
      --fib-muted: color-mix(in srgb, var(--fib-ink) 55%, transparent);
    }
    --fib-slot-active: var(--fib-accent);
    @supports (color: color-mix(in lab, red, red)) {
      --fib-slot-active: color-mix(in srgb, var(--fib-accent) 16%, transparent);
    }
    --fib-correct: #2f7d4f;
    --fib-correct-soft: color-mix(in srgb, #2f7d4f 16%, transparent);
    --fib-wrong: #b8321f;
    --fib-wrong-soft: color-mix(in srgb, #b8321f 14%, transparent);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0;
    font-size: clamp(1.75rem, 7vw, 3rem);
    line-height: 1.2;
    color: var(--fib-ink);
  }
  .fib-letters {
    font: inherit;
    color: inherit;
    white-space: pre;
  }
  .fib-error {
    margin: 0;
    font-weight: 600;
    text-align: center;
    color: #c0392b;
  }
}
@layer components {
  .word-search-activity {
    --ws-gap: 0.15rem;
    --ws-board-ink: var(--core-color);
    --ws-board-paper: var(--neutral-100);
    --ws-board-rule: var(--core-color);
    @supports (color: color-mix(in lab, red, red)) {
      --ws-board-rule: color-mix(in srgb, var(--core-color) 12%, transparent);
    }
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 68rem;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
  }
  .ws-progress {
    width: min(100%, 32rem);
  }
  .ws-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 1.25rem;
    width: 100%;
  }
  .ws-board-panel {
    container-type: inline-size;
    flex: 1 1 22rem;
    min-width: 0;
    max-width: 40rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }
  .ws-board {
    position: relative;
    padding: 0.6rem;
    border-radius: 0.75rem;
    background-color: var(--ws-board-paper);
    box-shadow: 0 0.35rem 1.1rem var(--black-color);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0.35rem 1.1rem color-mix(in srgb, var(--black-color) 14%, transparent);
    }
  }
  .ws-grid {
    --ws-cell: clamp(1.05rem, calc((100cqw - 2.5rem) / var(--ws-columns)), 2.35rem);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--ws-gap);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }
  .ws-grid:focus {
    outline: none;
  }
  .ws-row {
    display: flex;
    gap: var(--ws-gap);
  }
  .ws-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ws-cell);
    height: var(--ws-cell);
    border-radius: 0.2rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: calc(var(--ws-cell) * 0.62);
    font-weight: 600;
    line-height: 1;
    color: var(--ws-board-ink);
    cursor: pointer;
    background-color: transparent;
    transition: color 120ms ease, background-color 120ms ease;
  }
  .ws-cell:hover {
    background-color: var(--ws-board-rule);
  }
  .ws-cell:focus-visible {
    outline: 0.15rem solid var(--accent-color-2);
    outline-offset: 0.05rem;
  }
  .ws-cell.is-found {
    color: var(--core-color);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--core-color) 72%, var(--white-color));
    }
    font-weight: 700;
  }
  .ws-cell.is-hinted {
    color: var(--white-color);
    background-color: var(--accent-color-2);
    animation: ws-pulse 1.4s ease-in-out infinite;
  }
  @keyframes ws-pulse {
    0%, 100% {
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color-2) 60%, transparent);
    }
    50% {
      box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--accent-color-2) 0%, transparent);
    }
  }
  .ws-highlights {
    position: absolute;
    inset: 0.6rem;
    z-index: 0;
    pointer-events: none;
  }
  .ws-highlight {
    position: absolute;
    border-radius: 999rem;
  }
  .ws-highlight-selection {
    background-color: var(--accent-color-4);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--accent-color-4) 78%, transparent);
    }
    box-shadow: 0 0 0 0.08rem var(--secondary-color-dark);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 0.08rem color-mix(in srgb, var(--secondary-color-dark) 45%, transparent);
    }
  }
  .ws-highlight-found {
    animation: ws-settle 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .ws-highlight-colour-0 {
    background-color: var(--accent-color-6);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--accent-color-6) 55%, transparent);
    }
  }
  .ws-highlight-colour-1 {
    background-color: var(--accent-color-1);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--accent-color-1) 50%, transparent);
    }
  }
  .ws-highlight-colour-2 {
    background-color: var(--accent-color-10);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--accent-color-10) 50%, transparent);
    }
  }
  .ws-highlight-colour-3 {
    background-color: var(--accent-color-9);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--accent-color-9) 58%, transparent);
    }
  }
  .ws-highlight-colour-4 {
    background-color: var(--accent-color-11);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--accent-color-11) 48%, transparent);
    }
  }
  .ws-highlight-colour-5 {
    background-color: var(--accent-color-7);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--accent-color-7) 62%, transparent);
    }
  }
  .ws-highlight-rejected {
    background-color: var(--accent-color-2);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--accent-color-2) 55%, transparent);
    }
    animation: ws-reject 420ms ease-out forwards;
  }
  @keyframes ws-settle {
    from {
      opacity: 0;
      scale: 0.88;
    }
    to {
      opacity: 1;
      scale: 1;
    }
  }
  @keyframes ws-reject {
    0% {
      opacity: 1;
      translate: 0;
    }
    20% {
      translate: -0.22rem;
    }
    40% {
      translate: 0.22rem;
    }
    60% {
      translate: -0.12rem;
    }
    80% {
      translate: 0;
      opacity: 1;
    }
    100% {
      translate: 0;
      opacity: 0;
    }
  }
  .ws-board-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
  }
  .ws-print-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
  }
  .ws-hint-button:disabled, .ws-print-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
  .ws-word-bank {
    flex: 1 1 16rem;
    min-width: 0;
    max-width: 24rem;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
  }
  .ws-words {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.35rem 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ws-word {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    transition: opacity 200ms ease;
  }
  .ws-word-text {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--black-color);
  }
  .ws-word-translation {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--black-color);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--black-color) 62%, transparent);
    }
  }
  .ws-word.is-found {
    opacity: 0.45;
  }
  .ws-word.is-found .ws-word-text {
    text-decoration: line-through;
    text-decoration-thickness: 0.1em;
  }
  .ws-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1.5rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    text-align: center;
  }
  .ws-summary-value {
    font-weight: 700;
    color: var(--accent-color-2);
  }
  .ws-announcer {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  @media (max-width: 48rem) {
    .word-search-activity {
      padding: 0.5rem 0.5rem 2.5rem;
      gap: 0.75rem;
    }
    .ws-board-panel, .ws-word-bank {
      flex-basis: 100%;
      max-width: 100%;
    }
    .ws-words {
      grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ws-cell, .ws-word {
      transition: none;
    }
    .ws-cell.is-hinted, .ws-highlight-found {
      animation: none;
    }
    .ws-highlight-rejected {
      animation: ws-fade-out 420ms ease-out forwards;
    }
    @keyframes ws-fade-out {
      to {
        opacity: 0;
      }
    }
  }
}
@layer components {
  .lrn-menu__trigger {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--radial-menu-background-color);
    background-image: url("/images/global/avatars/avatar-frame-default.png");
    background-position: center;
    background-size: cover;
    color: var(--neutral-100);
    box-shadow: 0 2px 8px rgb(0 0 0 / 35%);
    cursor: pointer;
    transition: transform 150ms ease, background-color 150ms ease;
  }
  .lrn-menu__trigger:hover, .lrn-menu__trigger:focus-visible {
    background-color: var(--radial-menu-background-color-hover);
    box-shadow: 0 0 0 2px var(--cms-nav-shadow-color-hover), 0 2px 8px rgb(0 0 0 / 35%);
    transform: scale(1.06);
  }
  .lrn-menu__trigger-avatar {
    width: 53px;
    height: 53px;
    border-radius: 50%;
    object-fit: cover;
  }
  .lrn-menu__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 0.25rem;
    border: 2px solid var(--neutral-100);
    border-radius: 999px;
    background-color: var(--accent-color-1);
    color: var(--neutral-100);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
  }
  .lrn-menu__scrim {
    position: fixed;
    inset: 0;
    z-index: 4;
    background-color: transparent;
  }
  .lrn-menu__sheet {
    position: fixed;
    left: 1.25rem;
    bottom: calc(1.25rem + 88px + 0.75rem);
    z-index: 5;
    width: 17.5rem;
    max-height: calc(100svh - 8rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.375rem;
    border: 2px solid var(--core-color);
    @supports (color: color-mix(in lab, red, red)) {
      border: 2px solid color-mix(in srgb, var(--core-color) 25%, transparent);
    }
    border-radius: 1rem;
    background-color: var(--neutral-100);
    box-shadow: 0 6px 24px rgb(0 0 0 / 28%);
    animation: 120ms ease-out lrn-menu-pop;
    transform-origin: bottom left;
  }
  .lrn-menu__grip {
    display: none;
  }
  .lrn-menu__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .lrn-menu__cta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
    padding: 0.625rem 0.75rem;
    border: 0;
    border-radius: 0.75rem;
    background-color: var(--secondary-color);
    box-shadow: none;
    color: var(--neutral-100);
    font-family: inherit;
    text-align: left;
    text-transform: none;
    cursor: pointer;
    transition: background-color 150ms ease;
  }
  .lrn-menu__cta:hover, .lrn-menu__cta:focus-visible, .lrn-menu__cta:active {
    background-color: var(--secondary-color);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--secondary-color) 85%, black);
    }
    color: var(--neutral-100);
    box-shadow: none;
  }
  .lrn-menu__cta-icon {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0.3125rem;
    border-radius: 50%;
    background-color: var(--core-color);
    color: var(--neutral-100);
    object-fit: contain;
  }
  .lrn-menu__cta-icon--glyph {
    font-size: 1.5rem;
    line-height: 2.125rem;
    text-align: center;
  }
  .lrn-menu__cta-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.0625rem;
    min-width: 0;
  }
  .lrn-menu__cta-label {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
  }
  .lrn-menu__cta-description {
    font-size: 0.8125rem;
    line-height: 1.25;
    text-align: left;
    opacity: 0.85;
  }
  .lrn-menu__cta-chevron {
    flex: 0 0 auto;
    font-size: 1.125rem;
    opacity: 0.8;
  }
  .lrn-menu__list .lrn-menu__row, .lrn-menu__list .lrn-menu__row-host .btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0.375rem 0.5rem;
    border: 0;
    border-radius: 0.625rem;
    background-color: transparent;
    box-shadow: none;
    color: var(--dark-text-color);
    font-family: inherit;
    font-size: 1rem;
    text-align: left;
    text-transform: none;
    cursor: pointer;
  }
  .lrn-menu__list .lrn-menu__row:hover, .lrn-menu__list .lrn-menu__row:focus-visible, .lrn-menu__list .lrn-menu__row:active, .lrn-menu__list .lrn-menu__row-host .btn:active, .lrn-menu__list .lrn-menu__row-host .btn:focus, .lrn-menu__list .lrn-menu__row-host .btn:hover {
    background-color: var(--neutral-300);
    box-shadow: none;
    color: var(--dark-text-color);
  }
  .lrn-menu__list .lrn-menu__row-host .btn {
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
  .lrn-menu__icon, .lrn-menu__list .lrn-menu__row-host .btn i {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0.25rem;
    border-radius: 50%;
    background-color: var(--core-color);
    color: var(--neutral-100);
    object-fit: contain;
  }
  .lrn-menu__list .lrn-menu__row-host .btn i {
    padding: 0;
    font-size: 1rem;
    line-height: 1.75rem !important;
    text-align: center;
  }
  .lrn-menu__icon--avatar {
    padding: 0;
    background-color: var(--neutral-300);
  }
  .lrn-menu__icon--glyph {
    padding: 0;
    font-size: 1rem;
    line-height: 1.75rem !important;
    text-align: center;
  }
  .lrn-menu__label {
    flex: 1 1 auto;
  }
  .lrn-menu__count {
    flex: 0 0 auto;
    min-width: 1.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background-color: var(--accent-color-1);
    color: var(--neutral-100);
    font-size: 0.8125rem;
    font-weight: 700;
    text-align: center;
  }
  .lrn-menu__divider {
    height: 1px;
    margin: 0.25rem 0.5rem;
    background-color: var(--core-color);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--core-color) 18%, transparent);
    }
  }
  .lrn-menu__row--logout .lrn-menu__label {
    color: var(--danger-color);
  }
  @keyframes lrn-menu-pop {
    from {
      opacity: 0;
      transform: scale(0.96) translateY(0.5rem);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
  @keyframes lrn-menu-rise {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
  @keyframes lrn-menu-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @media (max-width: 62rem) {
    .lrn-menu__trigger {
      left: 1rem;
      bottom: max(1rem, env(safe-area-inset-bottom));
      transition: none;
    }
    .lrn-menu__trigger:hover, .lrn-menu__trigger:focus-visible {
      transform: none;
    }
    .lrn-menu__trigger:active {
      background-color: var(--radial-menu-background-color-hover);
    }
    .lrn-menu__scrim {
      background-color: rgb(0 0 0 / 45%);
      animation: 150ms ease-out lrn-menu-fade;
    }
    .lrn-menu__sheet {
      right: 0;
      bottom: 0;
      left: 0;
      width: auto;
      max-height: 80svh;
      padding: 0.5rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
      border: 0;
      border-radius: 1.2rem 1.2rem 0 0;
      box-shadow: 0 -4px 20px rgb(0 0 0 / 30%);
      animation: 200ms ease-out lrn-menu-rise;
      transform-origin: bottom center;
    }
    .lrn-menu__grip {
      display: block;
      width: 3rem;
      height: 4px;
      margin: 0.25rem auto 0.5rem;
      border-radius: 999px;
      background-color: var(--core-color);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in srgb, var(--core-color) 30%, transparent);
      }
    }
    .lrn-menu__list .lrn-menu__row, .lrn-menu__list .lrn-menu__row-host .btn {
      gap: 0.875rem;
      min-height: 52px;
      padding: 0.5rem 0.75rem;
      border-radius: 0.75rem;
      font-size: 1.0625rem;
    }
    .lrn-menu__list .lrn-menu__row:hover {
      background-color: transparent;
    }
    .lrn-menu__list .lrn-menu__row:active {
      background-color: var(--neutral-300);
    }
    .lrn-menu__icon, .lrn-menu__list .lrn-menu__row-host .btn i {
      width: 2rem;
      height: 2rem;
    }
    .lrn-menu__list .lrn-menu__row-host .btn i, .lrn-menu__icon--glyph {
      font-size: 1.125rem;
      line-height: 2rem !important;
    }
    .lrn-menu__divider {
      margin: 0.375rem 0.75rem;
    }
    .lrn-menu__cta {
      gap: 0.875rem;
      padding: 0.75rem;
      border-radius: 0.875rem;
      transition: none;
    }
    .lrn-menu__cta:hover {
      background-color: var(--secondary-color);
    }
    .lrn-menu__cta:active {
      background-color: var(--secondary-color);
      @supports (color: color-mix(in lab, red, red)) {
        background-color: color-mix(in srgb, var(--secondary-color) 85%, black);
      }
    }
    .lrn-menu__cta-icon {
      width: 3rem;
      height: 3rem;
      padding: 0.375rem;
    }
    .lrn-menu__cta-icon--glyph {
      font-size: 1.625rem;
      line-height: 2.25rem !important;
    }
    .lrn-menu__cta-label {
      font-size: 1.125rem;
    }
    .lrn-menu__cta-description {
      font-size: 0.875rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .lrn-menu__sheet, .lrn-menu__scrim {
      animation: none;
    }
    .lrn-menu__trigger {
      transition: none;
    }
    .lrn-menu__trigger:hover, .lrn-menu__trigger:focus-visible {
      transform: none;
    }
  }
}
@layer components {
  .lrn-node__trigger {
    position: fixed;
    right: 1.5rem;
    top: 3.25rem;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0.75rem;
    background-color: transparent;
    box-shadow: none;
    cursor: pointer;
  }
  .lrn-node__trigger-ring {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 68px;
    height: 68px;
    border: 3px dashed var(--core-color);
    border-radius: 50%;
    background-color: var(--light-background-color);
    color: var(--core-color);
    box-shadow: 0 2px 8px rgb(0 0 0 / 30%);
    transition: transform 150ms ease, background-color 150ms ease;
  }
  .lrn-node__trigger:hover .lrn-node__trigger-ring, .lrn-node__trigger:focus-visible .lrn-node__trigger-ring {
    background-color: var(--light-background-color);
    transform: scale(1.06);
  }
  .lrn-node__trigger-icon {
    font-size: 2rem;
    line-height: 1;
  }
  .lrn-node__trigger-image {
    width: 2.25rem;
    height: 2.25rem;
    object-fit: contain;
  }
  .lrn-node__trigger-label {
    padding: 0.0625rem 0.5rem;
    border-radius: 999px;
    background-color: var(--core-color);
    color: var(--neutral-100);
    font-family: "Cubano", sans-serif;
    font-size: 0.8125rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
  }
  .lrn-node__scrim {
    position: fixed;
    inset: 0;
    z-index: 4;
    background-color: transparent;
  }
  .lrn-node__panel {
    position: fixed;
    right: 1.5rem;
    top: calc(3.25rem + 68px + 1.75rem);
    z-index: 5;
    width: 17.5rem;
    max-height: calc(100svh - 12rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.375rem;
    border: 2px solid var(--core-color);
    @supports (color: color-mix(in lab, red, red)) {
      border: 2px solid color-mix(in srgb, var(--core-color) 25%, transparent);
    }
    border-radius: 1rem;
    background-color: var(--neutral-100);
    box-shadow: 0 6px 24px rgb(0 0 0 / 28%);
    animation: 120ms ease-out lrn-node-pop;
    transform-origin: top right;
  }
  .lrn-node__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .lrn-node__list .lrn-node__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0.375rem 0.5rem;
    border: 0;
    border-radius: 0.625rem;
    background-color: transparent;
    box-shadow: none;
    color: var(--dark-text-color);
    font-family: inherit;
    font-size: 1rem;
    text-align: left;
    text-transform: none;
    cursor: pointer;
  }
  .lrn-node__list .lrn-node__row:hover, .lrn-node__list .lrn-node__row:focus-visible, .lrn-node__list .lrn-node__row:active {
    background-color: var(--neutral-300);
    box-shadow: none;
    color: var(--dark-text-color);
  }
  .lrn-node__icon {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 2rem;
    height: 2rem;
    padding: 0.25rem;
    border-radius: 50%;
    background-color: var(--core-color);
    color: var(--neutral-100);
    object-fit: contain;
  }
  .lrn-node__icon--glyph {
    padding: 0;
    font-size: 1.125rem;
    line-height: 2rem;
    text-align: center;
  }
  .lrn-node__text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
  }
  .lrn-node__label {
    text-align: left;
  }
  .lrn-node__description {
    font-size: 0.8125rem;
    line-height: 1.25;
    text-align: left;
    opacity: 0.75;
  }
  @keyframes lrn-node-pop {
    from {
      opacity: 0;
      transform: scale(0.96) translateY(-0.375rem);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
  @media (max-width: 62rem) {
    .lrn-node__trigger {
      top: auto;
      right: 0.75rem;
      bottom: max(1rem, env(safe-area-inset-bottom));
      transition: none;
    }
    .lrn-node__trigger-ring {
      width: 56px;
      height: 56px;
      transition: none;
    }
    .lrn-node__trigger:hover .lrn-node__trigger-ring, .lrn-node__trigger:focus-visible .lrn-node__trigger-ring {
      background-color: var(--light-background-color);
      transform: none;
    }
    .lrn-node__trigger:active .lrn-node__trigger-ring {
      background-color: var(--light-background-color);
    }
    .lrn-node__trigger-icon {
      font-size: 1.625rem;
    }
    .lrn-node__trigger-image {
      width: 1.875rem;
      height: 1.875rem;
    }
    .lrn-node__panel {
      position: fixed;
      right: 0;
      bottom: 0;
      left: 0;
      top: auto;
      width: auto;
      max-height: 70svh;
      padding: 0.5rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
      border: 0;
      border-radius: 1.2rem 1.2rem 0 0;
      box-shadow: 0 -4px 20px rgb(0 0 0 / 30%);
      animation: 200ms ease-out lrn-node-rise;
      transform-origin: bottom center;
    }
    .lrn-node__scrim {
      background-color: rgb(0 0 0 / 45%);
    }
    .lrn-node__list .lrn-node__row {
      gap: 0.875rem;
      min-height: 52px;
      padding: 0.5rem 0.75rem;
      border-radius: 0.75rem;
      font-size: 1.0625rem;
    }
    .lrn-node__list .lrn-node__row:hover {
      background-color: transparent;
    }
    .lrn-node__list .lrn-node__row:active {
      background-color: var(--neutral-300);
    }
  }
  @keyframes lrn-node-rise {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .lrn-node__panel {
      animation: none;
    }
    .lrn-node__trigger-ring {
      transition: none;
    }
    .lrn-node__trigger:hover .lrn-node__trigger-ring, .lrn-node__trigger:focus-visible .lrn-node__trigger-ring {
      transform: none;
    }
  }
}
@layer components {
  .change-username__current {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 0.25rem;
  }
  .change-username__label {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-color-light);
  }
  .change-username__value {
    font-family: henderson-slab-basic, serif;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--core-color);
    overflow-wrap: anywhere;
  }
  .change-username__form {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 2px dashed var(--neutral-400);
  }
  .change-username__waiting {
    margin: 0;
    color: var(--primary-color-light);
  }
}
@layer components {
  .username-picker__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
  }
  .username-picker__row .form-control {
    flex: 1 1 15rem;
    max-width: 22rem;
    margin: 0;
  }
  .username-picker__generate {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .username-picker__label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
  }
}
@layer components {
  .partner-logo {
    max-width: 12rem;
    height: auto;
  }
  .partner-logo--ubc {
    width: 9vw;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .partner-logo--altlab {
    width: 4vw;
  }
  .partner-logo--opd {
    width: 24vw;
  }
  @media (max-width: 62rem) {
    .conjugator-footer {
      flex-wrap: wrap;
      row-gap: 0.5rem;
      padding-block: 0.75rem;
    }
    .partner-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      min-width: 44px;
    }
    .partner-logo--ubc {
      width: auto;
      height: 2.25rem;
    }
    .partner-logo--altlab {
      width: auto;
      height: 1.75rem;
    }
    .partner-logo--opd {
      width: auto;
      height: 2rem;
    }
  }
}
@layer components {
  .downloads-hero {
    width: 1100px;
    max-width: 100%;
  }
  .downloads-hero-copy {
    float: left;
    width: 500px;
    max-width: 100%;
    height: auto;
  }
  .downloads-hero-image {
    display: inline;
    width: 510px;
    max-width: 100%;
  }
  .downloads-hero-image img {
    max-width: 100%;
    height: auto;
  }
  @media (max-width: 62rem) {
    .downloads-hero {
      width: 100%;
    }
    .downloads-hero-copy, .downloads-hero-image {
      float: none;
      display: block;
      width: 100%;
    }
  }
}
@layer components {
  .home-split {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    height: 100vh;
  }
  @media (max-width: 62rem) {
    .home-split {
      flex-direction: column;
      justify-content: flex-start;
      height: auto;
      min-height: 100svh;
    }
    .home-split > .home-sign, .home-split > .home-menu {
      flex: 0 0 auto;
      width: 100%;
      max-width: 100%;
    }
    .home-sign {
      justify-content: flex-start;
      max-height: 26svh;
    }
    .home-sign .img {
      max-height: 26svh;
      width: auto;
      object-fit: contain;
      object-position: left center;
    }
    .home-menu-outer {
      margin: 0;
    }
    .home-menu-inner {
      padding: 1rem 1.25rem;
      width: 100%;
    }
  }
  @media (max-width: 36rem) {
    .home-sign, .home-sign .img {
      max-height: 18svh;
    }
  }
}
@layer components {
  @media (max-width: 62rem) {
    .canvas {
      height: auto;
      min-height: 0;
      margin-inline: 0.75rem;
      margin-top: 0.75rem;
    }
    .nmt-4 {
      margin-top: 0;
    }
    .vh-75 {
      height: auto;
      max-height: none;
    }
    .tile.bg-beige {
      margin-inline: 0.5rem;
    }
    .stamp {
      margin-inline: 0.25rem;
    }
  }
}
@layer components {
  .prac-tile__media {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 0.5rem;
    background-color: var(--core-color);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--core-color) 88%, black);
    }
  }
  .prac-tile__art {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
  .prac-tile__media .prac-tile__art[src$=".svg"] {
    width: 62%;
    height: 62%;
  }
}
@layer components {
  .profile-identity {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.25rem 0.25rem 1.25rem;
  }
  .profile-identity__portrait {
    flex: 0 0 auto;
    width: 104px;
    height: 104px;
  }
  .profile-identity__portrait ::deep .circle-stamp {
    width: 100%;
    height: 100%;
    margin: 0;
  }
  .profile-identity__text {
    min-width: 0;
  }
  .profile-identity__name {
    margin: 0;
    font-size: 2rem;
    line-height: 1.15;
    color: var(--core-color);
    overflow-wrap: anywhere;
  }
  .profile-identity__names {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: baseline;
    gap: 0.15rem 0.75rem;
    margin: 0.45rem 0 0;
  }
  .profile-identity__names dt {
    margin: 0;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-color-light);
    font-weight: 600;
  }
  .profile-identity__names dd {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--accent-color-2);
    overflow-wrap: anywhere;
  }
  .profile-identity__note {
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    color: var(--primary-color-light);
  }
  @media (max-width: 480px) {
    .profile-identity__names {
      grid-template-columns: 1fr;
      gap: 0 0;
    }
    .profile-identity__names dd {
      margin-bottom: 0.4rem;
    }
  }
  ::deep .profile-section {
    background-color: var(--neutral-100);
    border: 2px solid var(--neutral-300);
    border-radius: 1.2rem;
    box-shadow: 0 0 20px 0 rgba(227, 206, 151, 0.4);
    padding: 1.25rem clamp(1rem, 2vw, 1.75rem) 1.4rem;
  }
  ::deep .profile-section + .profile-section {
    margin-top: 1.25rem;
  }
  ::deep .profile-section__heading {
    margin: 0 0 0.5rem;
    color: var(--core-color);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  ::deep .profile-subsection {
    margin-top: 1.35rem;
    padding-top: 1.35rem;
    border-top: 2px dashed var(--neutral-400);
  }
  ::deep .profile-subheading {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    letter-spacing: 0.03em;
    color: var(--core-color);
  }
  ::deep .profile-section__rule {
    border: 0;
    border-top: 2px dashed var(--neutral-400);
    margin: 0 0 0.9rem;
    opacity: 1;
  }
  ::deep .profile-panel {
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
  }
  ::deep .profile-hint {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    line-height: 1.45;
    color: var(--primary-color-light);
  }
  ::deep .profile-checkbox {
    display: block;
    margin: 0;
    cursor: pointer;
  }
  ::deep .profile-value {
    margin: 0;
    color: var(--black-color);
    overflow-wrap: anywhere;
  }
  ::deep .profile-value--empty {
    color: var(--primary-color-light);
    font-style: italic;
  }
  ::deep .profile-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
    align-items: flex-start;
  }
  ::deep .profile-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  ::deep .profile-field > label {
    margin-bottom: 0.25rem;
    color: var(--core-color);
  }
  ::deep .profile-field--name {
    flex: 1 1 16rem;
    max-width: 22rem;
  }
  ::deep .profile-field--initial {
    flex: 0 0 6rem;
  }
  ::deep .profile-field--spirit {
    flex: 1 1 20rem;
    max-width: 28rem;
  }
  ::deep .profile-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.35rem;
  }
  ::deep .profile-record {
    display: grid;
    grid-template-columns: minmax(7rem, 12rem) 1fr;
    gap: 0.6rem 1.25rem;
    margin: 0;
  }
  ::deep .profile-record dt {
    margin: 0;
    color: var(--core-color);
    font-weight: 600;
  }
  ::deep .profile-record dd {
    margin: 0;
    color: var(--black-color);
    overflow-wrap: anywhere;
  }
  @media (max-width: 520px) {
    ::deep .profile-record {
      grid-template-columns: 1fr;
      gap: 0.15rem;
    }
    ::deep .profile-record dd {
      margin-bottom: 0.6rem;
    }
  }
  .profile-avatars {
    margin: 0.25rem 0 0;
  }
  @media (max-width: 640px) {
    .profile-identity {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;
    }
    ::deep .profile-actions {
      justify-content: stretch;
    }
    ::deep .profile-actions > * {
      flex: 1 1 auto;
    }
  }
}
.phaser-shell {
  display: block;
}
.phaser-shell.hide {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 2px;
  height: 2px;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
.phaser-shell.show {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  visibility: visible;
  pointer-events: auto;
}
.phaser-root {
  width: 100%;
  height: 100%;
}
.phaser-root canvas {
  display: block;
}
.phaser-viewport {
  position: relative;
  overflow: hidden;
}
.phaser-viewport--inline {
  width: 100%;
  height: 100%;
}
.phaser-viewport--fullscreen {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}
.campsite {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.campsite .phaser-viewport {
  overflow: hidden;
}
.campsite .phaser-viewport canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  display: block;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-duration {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
    }
  }
}