/* ...


 */

.external-login-buttons {
  button {
    border: none;
    background: none;
  }
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

body {
  visibility: visible;
}

body.modal-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
}
@keyframes heartBeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.1);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(1);
  }
}

/* line 23, app/assets/stylesheets/creator/animations.scss */
.heartBeat {
  animation-name: heartBeat;
  animation-duration: calc(var(--animate-duration) * 1.3);
  animation-timing-function: ease-in-out;
}

@keyframes headShake {
  0% {
    transform: translateX(0);
  }
  6.5% {
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    transform: translateX(0);
  }
}

/* line 55, app/assets/stylesheets/creator/animations.scss */
.headShake {
  animation-timing-function: ease-in-out;
  animation-name: headShake;
}

@keyframes tada {
  from {
    transform: scale3d(1, 1, 1);
  }
  10%,
20% {
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%,
50%,
70%,
90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%,
60%,
80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}

/* line 88, app/assets/stylesheets/creator/animations.scss */
.tada {
  animation-name: tada;
}
/* line 1, app/assets/stylesheets/creator/variables.scss */
:root {
  /* Fonts */
  --brand-font: 'Factor A', sans-serif;
  --secondary-font: 'Inter', sans-serif;
  /* Colors */
  --color-black-background: #121212;
  --color-light-background: #F8F8F7;
  --color-play-mode-background: #1D1D1D;
  --color-menu-toolbar-background: #F8F8F7;
  --color-plan-basic: #3DEB8D;
  --play-mode-background-color: #1D1D1D;
  --color-neutral-0: #FFFFFF;
  --color-neutral-100: #F8F8F7;
  --color-neutral-150: #EFEFF0;
  --color-neutral-200: #DFE1E2;
  --color-neutral-300: #C3C6C8;
  --color-neutral-400: #A9ABAE;
  --color-neutral-500: #909090;
  --color-neutral-600: #7A7A7B;
  --color-neutral-700: #5A5B59;
  --color-neutral-750: #454545;
  --color-neutral-800: #272727;
  --color-neutral-900: #181818;
  --color-neutral-950: #121212;
  --color-neutral-1000: #000000;
  /* Accents */
  --accent-green: #006C32;
  --accent-green-light: #00D663;
  --accent-violet: #815FE0;
  --accent-negative-red: #E36D74;
  /* Type Sizes */
  --display-1: 40px;
  --h1: 32px;
  --h2: 26px;
  --h3: 22px;
  --h4: 18px;
  --ui1: 17px;
  --ui1-medium: 17px;
  --ui2: 16px;
  --ui2-medium: 16px;
  --ui3: 12px;
  --digits: 24px;
  --digits-2: 28px;
  /* Radius */
  --radius-0: 8px;
  --radius-1: 10px;
  --radius-2: 18px;
  --radius-3: 22px;
  /* Modal */
  --modal-gutter: 44px;
  --modal-margin: 16px;
  --modal-margin-blocks-ui: 16px;
  --modal-margin-blocks-ui2: 10px;
  /* Toolbar */
  --toolbar-width: 180px;
  /* Padding */
  --padding-40-24: 24px;
  --padding-40-36: 36px;
  --padding-30-20: 20px;
  --padding-24-16: 16px;
  --padding-22-20: 20px;
  --padding-18-14: 14px;
  --padding-18-20: 20px;
  --padding-16-12: 12px;
  --padding-12-10: 10px;
  --padding-10-8: 8px;
  --padding-8-6: 6px;
  /* z-indexes */
  --z-index-sticky-top: 1020;
  --z-index-toolbar: 2000;
  --z-index-modal-backdrop: 2999;
  --z-index-modal: 3000;
  /* Breakpoints */
  --breakpoint-mobile: 767px;
  --breakpoint-desktop: 1200px;
}

/* Font mixins */
@media (min-width: 768px) {
  /* line 204, app/assets/stylesheets/creator/variables.scss */
  :root {
    /* Type Sizes */
    --display-1: 60px;
    --h1: 56px;
    --h2: 38px;
    --h3: 26px;
    --h4: 19px;
    --ui1: 18px;
    --ui1-medium: 18px;
    --ui2: 16px;
    --ui2-medium: 16px;
    --ui3: 13px;
    --digits: 36px;
    --digits-2: 42px;
    /* Radius */
    --radius-0: 10px;
    --radius-1: 12px;
    --radius-2: 18px;
    --radius-3: 28px;
    /* Modal */
    --modal-gutter: 48px;
    --modal-margin: 24px;
    --modal-margin-blocks-ui: 22px;
    --modal-margin-blocks-ui2: 16px;
    /* Padding */
    --padding-40-24: 40px;
    --padding-40-36: 40px;
    --padding-30-20: 30px;
    --padding-24-16: 24px;
    --padding-22-20: 22px;
    --padding-18-14: 18px;
    --padding-18-20: 18px;
    --padding-16-12: 16px;
    --padding-12-10: 12px;
    --padding-10-8: 10px;
    --padding-8-6: 8px;
  }
}

/* line 3, app/assets/stylesheets/creator/button.scss */
.button {
  font-family: Inter;
  font-size: var(--ui1-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.18px;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  display: flex;
  height: 42px;
  padding: 0 18px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 26px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-neutral-800);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  outline: none;
  border: none;
  white-space: nowrap;
  user-select: none;
}

/* line 22, app/assets/stylesheets/creator/button.scss */
.button svg {
  width: 24px;
  height: 24px;
  fill: var(--color-neutral-800);
  flex-grow: 0;
  flex-shrink: 0;
}

/* line 30, app/assets/stylesheets/creator/button.scss */
.button .button-badge {
  color: var(--color-neutral-500);
  text-align: center;
  font-feature-settings: 'calt' off;
  font-size: 12px;
  font-style: normal;
  font-weight: 440;
  line-height: 140%;
  display: inline-flex;
  min-width: 24px;
  padding: 2px 6px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-2);
  border: 2px solid var(--color-Play-Mode-Background, #1D1D1D);
  background: #343434;
  position: absolute;
  top: -10px;
  right: -10px;
}

/* line 54, app/assets/stylesheets/creator/button.scss */
.button:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* line 58, app/assets/stylesheets/creator/button.scss */
.button-l {
  font-family: "Factor A";
  font-size: var(--h4);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  letter-spacing: -0.19px;
  font-feature-settings: 'ss02' on;
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

/* line 66, app/assets/stylesheets/creator/button.scss */
.button-primary {
  border: none;
  background: var(--color-neutral-800);
  color: var(--color-neutral-100);
}

/* line 70, app/assets/stylesheets/creator/button.scss */
.button-primary svg {
  fill: var(--color-neutral-100);
}

/* line 75, app/assets/stylesheets/creator/button.scss */
.button-primary:hover {
  background: var(--color-neutral-750);
}

/* line 79, app/assets/stylesheets/creator/button.scss */
.button-secondary {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  border: 1px solid var(--color-neutral-200);
  background: var(--color-neutral-0);
  color: var(--color-neutral-700);
}

/* line 84, app/assets/stylesheets/creator/button.scss */
.button-secondary svg {
  fill: var(--color-neutral-700);
}

/* line 89, app/assets/stylesheets/creator/button.scss */
.button-secondary:hover {
  background: var(--color-neutral-100);
}

/* line 93, app/assets/stylesheets/creator/button.scss */
.button-accent-violet {
  color: var(--accent-violet);
  border: 2px solid var(--accent-violet);
}

/* line 96, app/assets/stylesheets/creator/button.scss */
.button-accent-violet svg {
  fill: var(--accent-violet) !important;
}

/* line 101, app/assets/stylesheets/creator/button.scss */
.button-transparent {
  background: none;
  border: none;
  cursor: pointer;
}
/* line 1, app/assets/stylesheets/creator/variables.scss */
:root {
  /* Fonts */
  --brand-font: 'Factor A', sans-serif;
  --secondary-font: 'Inter', sans-serif;
  /* Colors */
  --color-black-background: #121212;
  --color-light-background: #F8F8F7;
  --color-play-mode-background: #1D1D1D;
  --color-menu-toolbar-background: #F8F8F7;
  --color-plan-basic: #3DEB8D;
  --play-mode-background-color: #1D1D1D;
  --color-neutral-0: #FFFFFF;
  --color-neutral-100: #F8F8F7;
  --color-neutral-150: #EFEFF0;
  --color-neutral-200: #DFE1E2;
  --color-neutral-300: #C3C6C8;
  --color-neutral-400: #A9ABAE;
  --color-neutral-500: #909090;
  --color-neutral-600: #7A7A7B;
  --color-neutral-700: #5A5B59;
  --color-neutral-750: #454545;
  --color-neutral-800: #272727;
  --color-neutral-900: #181818;
  --color-neutral-950: #121212;
  --color-neutral-1000: #000000;
  /* Accents */
  --accent-green: #006C32;
  --accent-green-light: #00D663;
  --accent-violet: #815FE0;
  --accent-negative-red: #E36D74;
  /* Type Sizes */
  --display-1: 40px;
  --h1: 32px;
  --h2: 26px;
  --h3: 22px;
  --h4: 18px;
  --ui1: 17px;
  --ui1-medium: 17px;
  --ui2: 16px;
  --ui2-medium: 16px;
  --ui3: 12px;
  --digits: 24px;
  --digits-2: 28px;
  /* Radius */
  --radius-0: 8px;
  --radius-1: 10px;
  --radius-2: 18px;
  --radius-3: 22px;
  /* Modal */
  --modal-gutter: 44px;
  --modal-margin: 16px;
  --modal-margin-blocks-ui: 16px;
  --modal-margin-blocks-ui2: 10px;
  /* Toolbar */
  --toolbar-width: 180px;
  /* Padding */
  --padding-40-24: 24px;
  --padding-40-36: 36px;
  --padding-30-20: 20px;
  --padding-24-16: 16px;
  --padding-22-20: 20px;
  --padding-18-14: 14px;
  --padding-18-20: 20px;
  --padding-16-12: 12px;
  --padding-12-10: 10px;
  --padding-10-8: 8px;
  --padding-8-6: 6px;
  /* z-indexes */
  --z-index-sticky-top: 1020;
  --z-index-toolbar: 2000;
  --z-index-modal-backdrop: 2999;
  --z-index-modal: 3000;
  /* Breakpoints */
  --breakpoint-mobile: 767px;
  --breakpoint-desktop: 1200px;
}

/* Font mixins */
@media (min-width: 768px) {
  /* line 204, app/assets/stylesheets/creator/variables.scss */
  :root {
    /* Type Sizes */
    --display-1: 60px;
    --h1: 56px;
    --h2: 38px;
    --h3: 26px;
    --h4: 19px;
    --ui1: 18px;
    --ui1-medium: 18px;
    --ui2: 16px;
    --ui2-medium: 16px;
    --ui3: 13px;
    --digits: 36px;
    --digits-2: 42px;
    /* Radius */
    --radius-0: 10px;
    --radius-1: 12px;
    --radius-2: 18px;
    --radius-3: 28px;
    /* Modal */
    --modal-gutter: 48px;
    --modal-margin: 24px;
    --modal-margin-blocks-ui: 22px;
    --modal-margin-blocks-ui2: 16px;
    /* Padding */
    --padding-40-24: 40px;
    --padding-40-36: 40px;
    --padding-30-20: 30px;
    --padding-24-16: 24px;
    --padding-22-20: 22px;
    --padding-18-14: 18px;
    --padding-18-20: 18px;
    --padding-16-12: 16px;
    --padding-12-10: 12px;
    --padding-10-8: 10px;
    --padding-8-6: 8px;
  }
}

/* line 3, app/assets/stylesheets/creator/dropdown.scss */
.dropdown-menu {
  flex-direction: column;
  border-radius: var(--radius-1);
  background: var(--color-neutral-800);
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.02);
  display: none;
  border: none;
  gap: 4px;
  padding: 8px;
}

/* line 13, app/assets/stylesheets/creator/dropdown.scss */
.dropdown-menu a {
  border-radius: 8px;
  color: var(--color-neutral-200);
}

/* line 18, app/assets/stylesheets/creator/dropdown.scss */
.dropdown-menu svg {
  fill: var(--color-neutral-600);
}

/* line 22, app/assets/stylesheets/creator/dropdown.scss */
.dropdown-menu .dropdown-item {
  padding: 0;
}

/* line 26, app/assets/stylesheets/creator/dropdown.scss */
.dropdown-menu .dropdown-item.active {
  cursor: default;
}

/* line 30, app/assets/stylesheets/creator/dropdown.scss */
.dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-neutral-0);
}

/* line 33, app/assets/stylesheets/creator/dropdown.scss */
.dropdown-menu .dropdown-item.active a, .dropdown-menu .dropdown-item:hover a {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-neutral-0);
}

/* line 37, app/assets/stylesheets/creator/dropdown.scss */
.dropdown-menu .dropdown-item.active svg, .dropdown-menu .dropdown-item:hover svg {
  fill: var(--color-neutral-0);
}

/* line 43, app/assets/stylesheets/creator/dropdown.scss */
.dropdown-menu li.spacer hr {
  background: var(--color-neutral-750);
  padding: 0;
  margin: 2px 0;
  height: 1px;
  border: none;
}

/* line 53, app/assets/stylesheets/creator/dropdown.scss */
.dropdown-menu.show {
  display: flex;
}
/* line 1, app/assets/stylesheets/creator/games/../variables.scss */
:root {
  /* Fonts */
  --brand-font: 'Factor A', sans-serif;
  --secondary-font: 'Inter', sans-serif;
  /* Colors */
  --color-black-background: #121212;
  --color-light-background: #F8F8F7;
  --color-play-mode-background: #1D1D1D;
  --color-menu-toolbar-background: #F8F8F7;
  --color-plan-basic: #3DEB8D;
  --play-mode-background-color: #1D1D1D;
  --color-neutral-0: #FFFFFF;
  --color-neutral-100: #F8F8F7;
  --color-neutral-150: #EFEFF0;
  --color-neutral-200: #DFE1E2;
  --color-neutral-300: #C3C6C8;
  --color-neutral-400: #A9ABAE;
  --color-neutral-500: #909090;
  --color-neutral-600: #7A7A7B;
  --color-neutral-700: #5A5B59;
  --color-neutral-750: #454545;
  --color-neutral-800: #272727;
  --color-neutral-900: #181818;
  --color-neutral-950: #121212;
  --color-neutral-1000: #000000;
  /* Accents */
  --accent-green: #006C32;
  --accent-green-light: #00D663;
  --accent-violet: #815FE0;
  --accent-negative-red: #E36D74;
  /* Type Sizes */
  --display-1: 40px;
  --h1: 32px;
  --h2: 26px;
  --h3: 22px;
  --h4: 18px;
  --ui1: 17px;
  --ui1-medium: 17px;
  --ui2: 16px;
  --ui2-medium: 16px;
  --ui3: 12px;
  --digits: 24px;
  --digits-2: 28px;
  /* Radius */
  --radius-0: 8px;
  --radius-1: 10px;
  --radius-2: 18px;
  --radius-3: 22px;
  /* Modal */
  --modal-gutter: 44px;
  --modal-margin: 16px;
  --modal-margin-blocks-ui: 16px;
  --modal-margin-blocks-ui2: 10px;
  /* Toolbar */
  --toolbar-width: 180px;
  /* Padding */
  --padding-40-24: 24px;
  --padding-40-36: 36px;
  --padding-30-20: 20px;
  --padding-24-16: 16px;
  --padding-22-20: 20px;
  --padding-18-14: 14px;
  --padding-18-20: 20px;
  --padding-16-12: 12px;
  --padding-12-10: 10px;
  --padding-10-8: 8px;
  --padding-8-6: 6px;
  /* z-indexes */
  --z-index-sticky-top: 1020;
  --z-index-toolbar: 2000;
  --z-index-modal-backdrop: 2999;
  --z-index-modal: 3000;
  /* Breakpoints */
  --breakpoint-mobile: 767px;
  --breakpoint-desktop: 1200px;
}

/* Font mixins */
@media (min-width: 768px) {
  /* line 204, app/assets/stylesheets/creator/games/../variables.scss */
  :root {
    /* Type Sizes */
    --display-1: 60px;
    --h1: 56px;
    --h2: 38px;
    --h3: 26px;
    --h4: 19px;
    --ui1: 18px;
    --ui1-medium: 18px;
    --ui2: 16px;
    --ui2-medium: 16px;
    --ui3: 13px;
    --digits: 36px;
    --digits-2: 42px;
    /* Radius */
    --radius-0: 10px;
    --radius-1: 12px;
    --radius-2: 18px;
    --radius-3: 28px;
    /* Modal */
    --modal-gutter: 48px;
    --modal-margin: 24px;
    --modal-margin-blocks-ui: 22px;
    --modal-margin-blocks-ui2: 16px;
    /* Padding */
    --padding-40-24: 40px;
    --padding-40-36: 40px;
    --padding-30-20: 30px;
    --padding-24-16: 24px;
    --padding-22-20: 22px;
    --padding-18-14: 18px;
    --padding-18-20: 18px;
    --padding-16-12: 16px;
    --padding-12-10: 12px;
    --padding-10-8: 10px;
    --padding-8-6: 8px;
  }
}

/* line 4, app/assets/stylesheets/creator/games/index.scss */
.reports-page .header {
  font-family: "Factor A";
  font-size: var(--display-1);
  font-style: normal;
  font-weight: 500;
  line-height: 103%;
  letter-spacing: -1.7px;
  font-feature-settings: 'ss02' on;
  margin-bottom: 56px;
}

/* line 9, app/assets/stylesheets/creator/games/index.scss */
.reports-page .games-list table {
  width: calc(100% + 28px);
  margin-left: -14px;
  margin-right: -14px;
}

/* line 14, app/assets/stylesheets/creator/games/index.scss */
.reports-page .games-list table thead {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  font-variation-settings: 'wght' 430, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-400);
}

/* line 18, app/assets/stylesheets/creator/games/index.scss */
.reports-page .games-list table thead tr th {
  padding: 14px 0;
}

/* line 21, app/assets/stylesheets/creator/games/index.scss */
.reports-page .games-list table thead tr th.date, .reports-page .games-list table thead tr th.accuracy, .reports-page .games-list table thead tr th.players {
  padding-left: 14px;
}

/* line 24, app/assets/stylesheets/creator/games/index.scss */
.reports-page .games-list table thead tr th.bump {
  padding: 0;
  width: 14px;
}

/* line 31, app/assets/stylesheets/creator/games/index.scss */
.reports-page .games-list table tbody {
  font-family: Inter;
  font-size: var(--ui1);
  font-style: normal;
  font-weight: 450;
  line-height: 140%;
  letter-spacing: 0.002em;
  font-variation-settings: 'wght' 450, 'opsz' 24;
  font-feature-settings: 'cv06' on, 'cv11' on;
  color: var(--color-neutral-750);
}

/* line 34, app/assets/stylesheets/creator/games/index.scss */
.reports-page .games-list table tbody tr {
  cursor: pointer;
  padding: 16px 12px;
  border-radius: var(--radius-1);
}

/* line 38, app/assets/stylesheets/creator/games/index.scss */
.reports-page .games-list table tbody tr td {
  padding: var(--padding-16-12) 0;
  border-top: 1px solid var(--color-neutral-150);
  padding-right: 14px;
  vertical-align: top;
}

/* line 44, app/assets/stylesheets/creator/games/index.scss */
.reports-page .games-list table tbody tr td:first-child {
  padding-left: 14px;
  border-top-left-radius: var(--radius-1);
  border-bottom-left-radius: var(--radius-1);
}

/* line 49, app/assets/stylesheets/creator/games/index.scss */
.reports-page .games-list table tbody tr td:last-child {
  padding-right: 14px;
  border-top-right-radius: var(--radius-1);
  border-bottom-right-radius: var(--radius-1);
  padding-right: 0;
}

/* line 55, app/assets/stylesheets/creator/games/index.scss */
.reports-page .games-list table tbody tr td.bump {
  border-top: 1px solid white;
  width: 14px;
  padding: 0;
}

/* line 60, app/assets/stylesheets/creator/games/index.scss */
.reports-page .games-list table tbody tr td.quiz {
  display: flex;
  flex-direction: row;
  gap: var(--padding-16-12);
}

/* line 64, app/assets/stylesheets/creator/games/index.scss */
.reports-page .games-list table tbody tr td.quiz img {
  width: 66px;
  height: 100px;
}

/* line 68, app/assets/stylesheets/creator/games/index.scss */
.reports-page .games-list table tbody tr td.quiz .date-embedded {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-500);
  margin-bottom: 4px;
  display: none;
}

/* line 75, app/assets/stylesheets/creator/games/index.scss */
.reports-page .games-list table tbody tr td.date, .reports-page .games-list table tbody tr td.accuracy, .reports-page .games-list table tbody tr td.players {
  padding-left: 14px;
}

/* line 79, app/assets/stylesheets/creator/games/index.scss */
.reports-page .games-list table tbody tr td.accuracy .progress {
  width: 60px;
  margin-top: 5px;
}

/* line 86, app/assets/stylesheets/creator/games/index.scss */
.reports-page .games-list table tbody tr:hover td {
  border-top: 1px solid white;
  background-color: var(--color-neutral-100);
}

/* line 92, app/assets/stylesheets/creator/games/index.scss */
.reports-page .games-list table tbody tr:hover + tr td {
  border-top: 1px solid white;
}

/* line 98, app/assets/stylesheets/creator/games/index.scss */
.reports-page .games-list .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* line 103, app/assets/stylesheets/creator/games/index.scss */
.reports-page .games-list .empty-state .ten-icon-no-quizzes {
  width: 330px;
  height: 292px;
}

/* line 107, app/assets/stylesheets/creator/games/index.scss */
.reports-page .games-list .empty-state .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

/* line 114, app/assets/stylesheets/creator/games/index.scss */
.reports-page .games-list .empty-state .text .cta {
  font-family: "Factor A";
  font-size: var(--h2);
  font-style: normal;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: -0.38px;
  font-feature-settings: 'ss02' on;
  color: var(--color-neutral-900);
}

/* line 118, app/assets/stylesheets/creator/games/index.scss */
.reports-page .games-list .empty-state .text .lead {
  font-family: Inter;
  font-size: var(--ui1);
  font-style: normal;
  font-weight: 450;
  line-height: 140%;
  letter-spacing: 0.002em;
  font-variation-settings: 'wght' 450, 'opsz' 24;
  font-feature-settings: 'cv06' on, 'cv11' on;
  color: var(--color-neutral-500);
}

@media (max-width: 767px) {
  /* line 129, app/assets/stylesheets/creator/games/index.scss */
  .reports-page .header {
    margin-bottom: 20px;
  }
  /* line 134, app/assets/stylesheets/creator/games/index.scss */
  .reports-page .games-list table thead {
    display: none;
  }
  /* line 140, app/assets/stylesheets/creator/games/index.scss */
  .reports-page .games-list table tbody tr td.quiz .date-embedded {
    display: block;
  }
  /* line 144, app/assets/stylesheets/creator/games/index.scss */
  .reports-page .games-list table tbody tr td.date, .reports-page .games-list table tbody tr td.accuracy, .reports-page .games-list table tbody tr td.players {
    display: none;
  }
}
/* line 1, app/assets/stylesheets/creator/variables.scss */
:root {
  /* Fonts */
  --brand-font: 'Factor A', sans-serif;
  --secondary-font: 'Inter', sans-serif;
  /* Colors */
  --color-black-background: #121212;
  --color-light-background: #F8F8F7;
  --color-play-mode-background: #1D1D1D;
  --color-menu-toolbar-background: #F8F8F7;
  --color-plan-basic: #3DEB8D;
  --play-mode-background-color: #1D1D1D;
  --color-neutral-0: #FFFFFF;
  --color-neutral-100: #F8F8F7;
  --color-neutral-150: #EFEFF0;
  --color-neutral-200: #DFE1E2;
  --color-neutral-300: #C3C6C8;
  --color-neutral-400: #A9ABAE;
  --color-neutral-500: #909090;
  --color-neutral-600: #7A7A7B;
  --color-neutral-700: #5A5B59;
  --color-neutral-750: #454545;
  --color-neutral-800: #272727;
  --color-neutral-900: #181818;
  --color-neutral-950: #121212;
  --color-neutral-1000: #000000;
  /* Accents */
  --accent-green: #006C32;
  --accent-green-light: #00D663;
  --accent-violet: #815FE0;
  --accent-negative-red: #E36D74;
  /* Type Sizes */
  --display-1: 40px;
  --h1: 32px;
  --h2: 26px;
  --h3: 22px;
  --h4: 18px;
  --ui1: 17px;
  --ui1-medium: 17px;
  --ui2: 16px;
  --ui2-medium: 16px;
  --ui3: 12px;
  --digits: 24px;
  --digits-2: 28px;
  /* Radius */
  --radius-0: 8px;
  --radius-1: 10px;
  --radius-2: 18px;
  --radius-3: 22px;
  /* Modal */
  --modal-gutter: 44px;
  --modal-margin: 16px;
  --modal-margin-blocks-ui: 16px;
  --modal-margin-blocks-ui2: 10px;
  /* Toolbar */
  --toolbar-width: 180px;
  /* Padding */
  --padding-40-24: 24px;
  --padding-40-36: 36px;
  --padding-30-20: 20px;
  --padding-24-16: 16px;
  --padding-22-20: 20px;
  --padding-18-14: 14px;
  --padding-18-20: 20px;
  --padding-16-12: 12px;
  --padding-12-10: 10px;
  --padding-10-8: 8px;
  --padding-8-6: 6px;
  /* z-indexes */
  --z-index-sticky-top: 1020;
  --z-index-toolbar: 2000;
  --z-index-modal-backdrop: 2999;
  --z-index-modal: 3000;
  /* Breakpoints */
  --breakpoint-mobile: 767px;
  --breakpoint-desktop: 1200px;
}

/* Font mixins */
@media (min-width: 768px) {
  /* line 204, app/assets/stylesheets/creator/variables.scss */
  :root {
    /* Type Sizes */
    --display-1: 60px;
    --h1: 56px;
    --h2: 38px;
    --h3: 26px;
    --h4: 19px;
    --ui1: 18px;
    --ui1-medium: 18px;
    --ui2: 16px;
    --ui2-medium: 16px;
    --ui3: 13px;
    --digits: 36px;
    --digits-2: 42px;
    /* Radius */
    --radius-0: 10px;
    --radius-1: 12px;
    --radius-2: 18px;
    --radius-3: 28px;
    /* Modal */
    --modal-gutter: 48px;
    --modal-margin: 24px;
    --modal-margin-blocks-ui: 22px;
    --modal-margin-blocks-ui2: 16px;
    /* Padding */
    --padding-40-24: 40px;
    --padding-40-36: 40px;
    --padding-30-20: 30px;
    --padding-24-16: 24px;
    --padding-22-20: 22px;
    --padding-18-14: 18px;
    --padding-18-20: 18px;
    --padding-16-12: 16px;
    --padding-12-10: 12px;
    --padding-10-8: 10px;
    --padding-8-6: 8px;
  }
}

/* line 3, app/assets/stylesheets/creator/layout.scss */
body {
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

/* line 9, app/assets/stylesheets/creator/layout.scss */
body.creator a {
  text-decoration: none;
}

/* line 14, app/assets/stylesheets/creator/layout.scss */
body.creator main .container {
  max-width: 968px;
  width: 100%;
  margin-top: 80px;
  padding-left: 24px;
  padding-right: 24px;
}

/* line 24, app/assets/stylesheets/creator/layout.scss */
.modal, .modal-dialog {
  z-index: var(--z-index-modal) !important;
}

/* line 28, app/assets/stylesheets/creator/layout.scss */
.modal-backdrop {
  z-index: var(--z-index-modal-backdrop) !important;
}

@media (max-width: 767px) {
  /* line 34, app/assets/stylesheets/creator/layout.scss */
  body.creator main .container {
    padding: 0 16px;
    margin-top: 20px;
  }
  /* line 40, app/assets/stylesheets/creator/layout.scss */
  body.creator main .container .quizzes-list .header .actions a {
    padding: 10px 13px;
  }
  /* line 42, app/assets/stylesheets/creator/layout.scss */
  body.creator main .container .quizzes-list .header .actions a span {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  /* line 59, app/assets/stylesheets/creator/layout.scss */
  body.creator main .container {
    margin-top: 37px;
  }
}

@media (min-width: 1200px) {
  /* line 68, app/assets/stylesheets/creator/layout.scss */
  body.creator main {
    margin-left: var(--toolbar-width);
  }
}
/* line 1, app/assets/stylesheets/creator/variables.scss */
:root {
  /* Fonts */
  --brand-font: 'Factor A', sans-serif;
  --secondary-font: 'Inter', sans-serif;
  /* Colors */
  --color-black-background: #121212;
  --color-light-background: #F8F8F7;
  --color-play-mode-background: #1D1D1D;
  --color-menu-toolbar-background: #F8F8F7;
  --color-plan-basic: #3DEB8D;
  --play-mode-background-color: #1D1D1D;
  --color-neutral-0: #FFFFFF;
  --color-neutral-100: #F8F8F7;
  --color-neutral-150: #EFEFF0;
  --color-neutral-200: #DFE1E2;
  --color-neutral-300: #C3C6C8;
  --color-neutral-400: #A9ABAE;
  --color-neutral-500: #909090;
  --color-neutral-600: #7A7A7B;
  --color-neutral-700: #5A5B59;
  --color-neutral-750: #454545;
  --color-neutral-800: #272727;
  --color-neutral-900: #181818;
  --color-neutral-950: #121212;
  --color-neutral-1000: #000000;
  /* Accents */
  --accent-green: #006C32;
  --accent-green-light: #00D663;
  --accent-violet: #815FE0;
  --accent-negative-red: #E36D74;
  /* Type Sizes */
  --display-1: 40px;
  --h1: 32px;
  --h2: 26px;
  --h3: 22px;
  --h4: 18px;
  --ui1: 17px;
  --ui1-medium: 17px;
  --ui2: 16px;
  --ui2-medium: 16px;
  --ui3: 12px;
  --digits: 24px;
  --digits-2: 28px;
  /* Radius */
  --radius-0: 8px;
  --radius-1: 10px;
  --radius-2: 18px;
  --radius-3: 22px;
  /* Modal */
  --modal-gutter: 44px;
  --modal-margin: 16px;
  --modal-margin-blocks-ui: 16px;
  --modal-margin-blocks-ui2: 10px;
  /* Toolbar */
  --toolbar-width: 180px;
  /* Padding */
  --padding-40-24: 24px;
  --padding-40-36: 36px;
  --padding-30-20: 20px;
  --padding-24-16: 16px;
  --padding-22-20: 20px;
  --padding-18-14: 14px;
  --padding-18-20: 20px;
  --padding-16-12: 12px;
  --padding-12-10: 10px;
  --padding-10-8: 8px;
  --padding-8-6: 6px;
  /* z-indexes */
  --z-index-sticky-top: 1020;
  --z-index-toolbar: 2000;
  --z-index-modal-backdrop: 2999;
  --z-index-modal: 3000;
  /* Breakpoints */
  --breakpoint-mobile: 767px;
  --breakpoint-desktop: 1200px;
}

/* Font mixins */
@media (min-width: 768px) {
  /* line 204, app/assets/stylesheets/creator/variables.scss */
  :root {
    /* Type Sizes */
    --display-1: 60px;
    --h1: 56px;
    --h2: 38px;
    --h3: 26px;
    --h4: 19px;
    --ui1: 18px;
    --ui1-medium: 18px;
    --ui2: 16px;
    --ui2-medium: 16px;
    --ui3: 13px;
    --digits: 36px;
    --digits-2: 42px;
    /* Radius */
    --radius-0: 10px;
    --radius-1: 12px;
    --radius-2: 18px;
    --radius-3: 28px;
    /* Modal */
    --modal-gutter: 48px;
    --modal-margin: 24px;
    --modal-margin-blocks-ui: 22px;
    --modal-margin-blocks-ui2: 16px;
    /* Padding */
    --padding-40-24: 40px;
    --padding-40-36: 40px;
    --padding-30-20: 30px;
    --padding-24-16: 24px;
    --padding-22-20: 22px;
    --padding-18-14: 18px;
    --padding-18-20: 18px;
    --padding-16-12: 16px;
    --padding-12-10: 12px;
    --padding-10-8: 10px;
    --padding-8-6: 8px;
  }
}

/* line 3, app/assets/stylesheets/creator/login.scss */
.login-page {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: Inter;
}

@media (min-width: 768px) {
  /* line 12, app/assets/stylesheets/creator/login.scss */
  .login-page {
    background-color: #F2D0F4;
    background-image: url(/assets/auth-background-e84d16a2e02aba439cbfc1a995d122dd1a821e298ad6f56cd4f7e4b7bdba4da5.svg);
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: 400px 400px;
  }
}

/* line 21, app/assets/stylesheets/creator/login.scss */
.login {
  max-width: 400px;
  background: #FFF;
  border-radius: var(--radius-3);
  padding: 26px;
}

/* line 26, app/assets/stylesheets/creator/login.scss */
.login .logo {
  margin-bottom: 58px;
}

/* line 28, app/assets/stylesheets/creator/login.scss */
.login .logo img {
  width: 113px;
}

/* line 32, app/assets/stylesheets/creator/login.scss */
.login .header {
  font-size: 48px;
  color: var(--color-neutral-900);
  font-family: var(--brand-font);
  font-style: normal;
  font-weight: 500;
  line-height: 105%;
  letter-spacing: -0.96px;
  margin-bottom: 28px;
  font-feature-settings: "ss01" on, "ss02" on;
}

/* line 42, app/assets/stylesheets/creator/login.scss */
.login .header .secondary {
  color: var(--color-neutral-500);
  font-feature-settings: "ss01" off;
}

/* line 47, app/assets/stylesheets/creator/login.scss */
.login .magic-link-login {
  margin-bottom: 28px;
}

/* line 49, app/assets/stylesheets/creator/login.scss */
.login .magic-link-login input {
  font-family: Inter;
  font-size: var(--ui1);
  font-style: normal;
  font-weight: 450;
  line-height: 140%;
  letter-spacing: 0.002em;
  font-variation-settings: 'wght' 450, 'opsz' 24;
  font-feature-settings: 'cv06' on, 'cv11' on;
  display: flex;
  height: 50px;
  padding: 14px;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: var(--radius-1);
  border: 1px solid var(--color-neutral-200);
  color: var(--color-neutral-800);
  border-radius: var(--radius-1);
  border: 1px solid var(--color-neutral-200);
}

/* line 63, app/assets/stylesheets/creator/login.scss */
.login .magic-link-login input:hover, .login .magic-link-login input:focus {
  outline: none;
  box-shadow: none;
  border-radius: var(--radius-1);
  border: 1px solid var(--color-neutral-300);
}

/* line 69, app/assets/stylesheets/creator/login.scss */
.login .magic-link-login input.is-invalid {
  border-radius: var(--radius-1);
  border: 1px solid var(--accent-negative-red);
}

/* line 73, app/assets/stylesheets/creator/login.scss */
.login .magic-link-login input.is-invalid + small {
  color: #E36D74 !important;
}

/* line 76, app/assets/stylesheets/creator/login.scss */
.login .magic-link-login input::placeholder {
  font-weight: 400;
  color: var(--color-neutral-400);
}

/* line 80, app/assets/stylesheets/creator/login.scss */
.login .magic-link-login button {
  font-family: Inter;
  font-size: var(--ui1-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.18px;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  display: flex;
  height: 50px;
  width: 100%;
  padding: 10px 20px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  align-self: stretch;
  border-radius: 26px;
  background: var(--color-neutral-800);
  color: var(--color-neutral-100);
  border: none;
}

/* line 95, app/assets/stylesheets/creator/login.scss */
.login .magic-link-login button svg {
  fill: var(--color-neutral-100);
  width: 24px;
  height: 24px;
}

/* line 101, app/assets/stylesheets/creator/login.scss */
.login .magic-link-login button:hover {
  background: var(--color-neutral-750);
}

/* line 104, app/assets/stylesheets/creator/login.scss */
.login .magic-link-login .form-control.is-invalid {
  background-image: none;
}

/* line 107, app/assets/stylesheets/creator/login.scss */
.login .magic-link-login .cf-turnstile {
  height: 0;
}

/* line 110, app/assets/stylesheets/creator/login.scss */
.login .magic-link-login .comment {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  font-variation-settings: 'wght' 430, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  text-align: center;
  color: var(--color-neutral-400);
  margin-top: 12px;
}

/* line 116, app/assets/stylesheets/creator/login.scss */
.login .magic-link-login .comment .ten-icon {
  width: 14px;
  height: 14px;
  position: relative;
  bottom: 3px;
}

/* line 124, app/assets/stylesheets/creator/login.scss */
.login .external-login {
  font-family: Inter;
  font-size: var(--ui1);
  font-style: normal;
  font-weight: 450;
  line-height: 140%;
  letter-spacing: 0.002em;
  font-variation-settings: 'wght' 450, 'opsz' 24;
  font-feature-settings: 'cv06' on, 'cv11' on;
  color: var(--color-neutral-400);
  text-align: center;
}

/* line 129, app/assets/stylesheets/creator/login.scss */
.login .external-login .ten-icon {
  width: 44px;
  height: 44px;
}

/* line 133, app/assets/stylesheets/creator/login.scss */
.login .external-login .ten-icon-auth-google {
  width: 154px;
  height: 44px;
}

/* line 138, app/assets/stylesheets/creator/login.scss */
.login .external-login form {
  padding: 0;
  margin: 0;
}

/* line 142, app/assets/stylesheets/creator/login.scss */
.login .external-login button {
  padding: 0;
  margin: 0;
}

/* line 145, app/assets/stylesheets/creator/login.scss */
.login .external-login button svg {
  fill: var(--color-neutral-400);
}

/* line 150, app/assets/stylesheets/creator/login.scss */
.login .external-login button:hover svg {
  fill: var(--color-neutral-700);
}

/* line 155, app/assets/stylesheets/creator/login.scss */
.login .actions {
  margin-top: 12px;
  gap: 10px;
}

/* line 159, app/assets/stylesheets/creator/login.scss */
.login .actions a {
  display: flex;
  padding: 10px 18px;
  justify-content: center;
  align-items: center;
  border-radius: 26px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-neutrals-800, #272727);
  font-family: Inter;
  font-size: var(--Type-UI-2-Medium, 16px);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  /* 22.4px */
  text-decoration: none;
}

/* line 174, app/assets/stylesheets/creator/login.scss */
.login .actions a svg {
  fill: var(--color-neutrals-800);
  width: 19px;
  height: 19px;
}

/* line 180, app/assets/stylesheets/creator/login.scss */
.login .actions a:hover {
  background: rgba(0, 0, 0, 0.1);
}

/* line 186, app/assets/stylesheets/creator/login.scss */
.login-page-link-sent .header {
  font-feature-settings: "ss01" off;
}

/* line 189, app/assets/stylesheets/creator/login.scss */
.login-page-link-sent .email {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-600);
  margin-top: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

/* line 197, app/assets/stylesheets/creator/login.scss */
.login-page-link-sent .email svg {
  fill: var(--color-neutral-600);
  width: 24px;
  height: 24px;
}

/* line 203, app/assets/stylesheets/creator/login.scss */
.login-page-link-sent .comment {
  color: var(--color-neutrals-400, #A9ABAE);
  margin-top: 1px;
  font-feature-settings: 'ss03' on;
  font-size: var(--Type-UI-2, 14px);
  font-style: normal;
  font-weight: 440;
  line-height: 140%;
  /* 19.6px */
  letter-spacing: -0.14px;
  max-width: 245px;
}

/* line 216, app/assets/stylesheets/creator/login.scss */
.notice {
  font-family: Inter;
  font-size: var(--ui3);
  font-style: normal;
  font-weight: 440;
  line-height: 140%;
  letter-spacing: -0.12px;
  font-feature-settings: 'calt' off;
  max-width: 400px;
  margin-top: 24px;
  color: var(--color-neutral-400);
}

/* line 222, app/assets/stylesheets/creator/login.scss */
.notice a {
  color: var(--color-neutral-400);
  text-decoration: underline;
}

@media (max-width: 768px) {
  /* line 229, app/assets/stylesheets/creator/login.scss */
  .login-page {
    display: flex;
    flex-direction: column;
  }
  /* line 232, app/assets/stylesheets/creator/login.scss */
  .login-page .login {
    flex-grow: 1;
    justify-content: space-between;
  }
  /* line 236, app/assets/stylesheets/creator/login.scss */
  .login-page .notice {
    margin-bottom: 32px;
  }
  /* line 240, app/assets/stylesheets/creator/login.scss */
  .notice {
    padding: 0 26px;
  }
}
/* line 1, app/assets/stylesheets/creator/variables.scss */
:root {
  /* Fonts */
  --brand-font: 'Factor A', sans-serif;
  --secondary-font: 'Inter', sans-serif;
  /* Colors */
  --color-black-background: #121212;
  --color-light-background: #F8F8F7;
  --color-play-mode-background: #1D1D1D;
  --color-menu-toolbar-background: #F8F8F7;
  --color-plan-basic: #3DEB8D;
  --play-mode-background-color: #1D1D1D;
  --color-neutral-0: #FFFFFF;
  --color-neutral-100: #F8F8F7;
  --color-neutral-150: #EFEFF0;
  --color-neutral-200: #DFE1E2;
  --color-neutral-300: #C3C6C8;
  --color-neutral-400: #A9ABAE;
  --color-neutral-500: #909090;
  --color-neutral-600: #7A7A7B;
  --color-neutral-700: #5A5B59;
  --color-neutral-750: #454545;
  --color-neutral-800: #272727;
  --color-neutral-900: #181818;
  --color-neutral-950: #121212;
  --color-neutral-1000: #000000;
  /* Accents */
  --accent-green: #006C32;
  --accent-green-light: #00D663;
  --accent-violet: #815FE0;
  --accent-negative-red: #E36D74;
  /* Type Sizes */
  --display-1: 40px;
  --h1: 32px;
  --h2: 26px;
  --h3: 22px;
  --h4: 18px;
  --ui1: 17px;
  --ui1-medium: 17px;
  --ui2: 16px;
  --ui2-medium: 16px;
  --ui3: 12px;
  --digits: 24px;
  --digits-2: 28px;
  /* Radius */
  --radius-0: 8px;
  --radius-1: 10px;
  --radius-2: 18px;
  --radius-3: 22px;
  /* Modal */
  --modal-gutter: 44px;
  --modal-margin: 16px;
  --modal-margin-blocks-ui: 16px;
  --modal-margin-blocks-ui2: 10px;
  /* Toolbar */
  --toolbar-width: 180px;
  /* Padding */
  --padding-40-24: 24px;
  --padding-40-36: 36px;
  --padding-30-20: 20px;
  --padding-24-16: 16px;
  --padding-22-20: 20px;
  --padding-18-14: 14px;
  --padding-18-20: 20px;
  --padding-16-12: 12px;
  --padding-12-10: 10px;
  --padding-10-8: 8px;
  --padding-8-6: 6px;
  /* z-indexes */
  --z-index-sticky-top: 1020;
  --z-index-toolbar: 2000;
  --z-index-modal-backdrop: 2999;
  --z-index-modal: 3000;
  /* Breakpoints */
  --breakpoint-mobile: 767px;
  --breakpoint-desktop: 1200px;
}

/* Font mixins */
@media (min-width: 768px) {
  /* line 204, app/assets/stylesheets/creator/variables.scss */
  :root {
    /* Type Sizes */
    --display-1: 60px;
    --h1: 56px;
    --h2: 38px;
    --h3: 26px;
    --h4: 19px;
    --ui1: 18px;
    --ui1-medium: 18px;
    --ui2: 16px;
    --ui2-medium: 16px;
    --ui3: 13px;
    --digits: 36px;
    --digits-2: 42px;
    /* Radius */
    --radius-0: 10px;
    --radius-1: 12px;
    --radius-2: 18px;
    --radius-3: 28px;
    /* Modal */
    --modal-gutter: 48px;
    --modal-margin: 24px;
    --modal-margin-blocks-ui: 22px;
    --modal-margin-blocks-ui2: 16px;
    /* Padding */
    --padding-40-24: 40px;
    --padding-40-36: 40px;
    --padding-30-20: 30px;
    --padding-24-16: 24px;
    --padding-22-20: 22px;
    --padding-18-14: 18px;
    --padding-18-20: 18px;
    --padding-16-12: 16px;
    --padding-12-10: 12px;
    --padding-10-8: 10px;
    --padding-8-6: 8px;
  }
}

/* line 3, app/assets/stylesheets/creator/plans.scss */
.plans-page {
  color: var(--color-neutral-900);
}

/* line 6, app/assets/stylesheets/creator/plans.scss */
.plans-page .header {
  font-family: "Factor A";
  font-size: var(--display-1);
  font-style: normal;
  font-weight: 500;
  line-height: 103%;
  letter-spacing: -1.7px;
  font-feature-settings: 'ss02' on;
  margin-bottom: 40px;
}

/* line 11, app/assets/stylesheets/creator/plans.scss */
.plans-page .period-controls {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 16px;
}

/* line 18, app/assets/stylesheets/creator/plans.scss */
.plans-page .period-controls .period-switch {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  height: 48px;
  border-radius: 100px;
  background: var(--color-neutral-100);
  padding: 3px;
  overflow: hidden;
}

/* line 29, app/assets/stylesheets/creator/plans.scss */
.plans-page .period-controls .period-switch button {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  flex: 1;
  border-radius: 40px;
  padding: 10px 16px;
  border: none;
  outline: none;
  color: var(--color-neutral-500);
  background: none;
}

/* line 40, app/assets/stylesheets/creator/plans.scss */
.plans-page .period-controls .period-switch button:hover {
  color: var(--color-neutral-600);
}

/* line 44, app/assets/stylesheets/creator/plans.scss */
.plans-page .period-controls .period-switch button.active {
  background: var(--color-neutral-0);
  color: var(--color-neutral-900);
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.01), 0px 10px 40px 12px rgba(0, 0, 0, 0.05);
}

/* line 51, app/assets/stylesheets/creator/plans.scss */
.plans-page .period-controls .annual-discount {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  font-variation-settings: 'wght' 430, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-500);
}

/* line 54, app/assets/stylesheets/creator/plans.scss */
.plans-page .period-controls .annual-discount span {
  color: var(--accent-green-light);
}

/* line 60, app/assets/stylesheets/creator/plans.scss */
.plans-page .plans {
  display: flex;
  flex-direction: row;
  gap: 20px;
  justify-content: left;
  margin-top: 32px;
  padding-bottom: 40px;
}

/* line 69, app/assets/stylesheets/creator/plans.scss */
.plans-page .plan {
  display: flex;
  width: 293px;
  padding: 20px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-pad-2);
  flex-shrink: 0;
  border-radius: var(--radius-2);
}

/* line 79, app/assets/stylesheets/creator/plans.scss */
.plans-page .plan .title {
  font-family: 'Factor A';
  font-size: var(--h3);
  font-style: normal;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: -0.22px;
  margin-bottom: 8px;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* line 86, app/assets/stylesheets/creator/plans.scss */
.plans-page .plan .title .popular {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  font-variation-settings: 'wght' 430, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  border-radius: 17px;
  border: 1px solid var(--color-neutral-900);
  flex: 0 auto;
  justify-content: center;
  align-items: center;
  padding: 4px 14px;
  display: flex;
}

/* line 97, app/assets/stylesheets/creator/plans.scss */
.plans-page .plan .price {
  font-family: "Factor A";
  font-size: var(--h2);
  font-style: normal;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: -0.38px;
  font-feature-settings: 'ss02' on;
}

/* line 100, app/assets/stylesheets/creator/plans.scss */
.plans-page .plan .price-annual {
  font-family: Inter;
  font-size: var(--ui1);
  font-style: normal;
  font-weight: 450;
  line-height: 140%;
  letter-spacing: 0.002em;
  font-variation-settings: 'wght' 450, 'opsz' 24;
  font-feature-settings: 'cv06' on, 'cv11' on;
  margin-top: 8px;
}

/* line 103, app/assets/stylesheets/creator/plans.scss */
.plans-page .plan .price-annual span {
  text-decoration: line-through;
}

/* line 108, app/assets/stylesheets/creator/plans.scss */
.plans-page .plan ul.features {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  font-variation-settings: 'wght' 430, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-500);
  display: flex;
  flex-direction: column;
  gap: var(--padding-12-10);
  margin: 0;
  margin-bottom: 8px;
  padding: 0;
  margin-top: 22px;
  width: 100%;
}

/* line 119, app/assets/stylesheets/creator/plans.scss */
.plans-page .plan ul.features li {
  display: flex;
  flex-direction: row;
  gap: 6px;
}

/* line 124, app/assets/stylesheets/creator/plans.scss */
.plans-page .plan ul.features li.separator {
  border-top: 1px solid var(--color-neutral-150);
  mix-blend-mode: multiply;
}

/* line 128, app/assets/stylesheets/creator/plans.scss */
.plans-page .plan ul.features svg {
  height: 22px;
  width: 22px;
  fill: var(--color-neutral-500);
  flex-shrink: 0;
}

/* line 136, app/assets/stylesheets/creator/plans.scss */
.plans-page .plan .btn {
  width: 100%;
}

/* line 141, app/assets/stylesheets/creator/plans.scss */
.plans-page .plan-free {
  border: 1px solid var(--color-neutral-150);
  background: var(--color-neutral-0);
}

/* line 144, app/assets/stylesheets/creator/plans.scss */
.plans-page .plan-free .price-annual {
  opacity: 0;
}

/* line 149, app/assets/stylesheets/creator/plans.scss */
.plans-page .plan-basic {
  background-color: var(--color-plan-basic);
}

/* line 151, app/assets/stylesheets/creator/plans.scss */
.plans-page .plan-basic ul.features {
  color: var(--color-neutral-900);
}

/* line 153, app/assets/stylesheets/creator/plans.scss */
.plans-page .plan-basic ul.features svg {
  fill: var(--color-neutral-900);
}

/* line 159, app/assets/stylesheets/creator/plans.scss */
.plans-page .plan-pro {
  background-color: var(--color-neutral-100);
}

/* line 163, app/assets/stylesheets/creator/plans.scss */
.plans-page .plan-button {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  margin-top: 22px;
  width: 100%;
  border-radius: var(--radius-3);
  padding: 12px 18px;
  cursor: pointer;
  transition: background 0.2s;
  text-align: center;
}

/* line 174, app/assets/stylesheets/creator/plans.scss */
.plans-page .plan-button-primary {
  background: var(--color-neutral-800);
  color: var(--color-neutral-0);
  border: none;
}

/* line 178, app/assets/stylesheets/creator/plans.scss */
.plans-page .plan-button-primary:hover {
  background: var(--color-neutral-750);
}

/* line 182, app/assets/stylesheets/creator/plans.scss */
.plans-page .plan-button-disabled {
  background: var(--color-neutral-100);
  color: var(--color-neutral-300);
  border: none;
  user-select: none;
  cursor: default;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* line 192, app/assets/stylesheets/creator/plans.scss */
.plans-page .enterprise {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  font-variation-settings: 'wght' 430, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-500);
  margin-bottom: 24px;
}

/* line 196, app/assets/stylesheets/creator/plans.scss */
.plans-page .enterprise a {
  color: var(--color-neutral-500);
  text-decoration: underline;
}

@media (max-width: 768px) {
  /* line 205, app/assets/stylesheets/creator/plans.scss */
  .plans-page .header {
    margin-bottom: 22px;
  }
  /* line 208, app/assets/stylesheets/creator/plans.scss */
  .plans-page .plans {
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
  }
  /* line 213, app/assets/stylesheets/creator/plans.scss */
  .plans-page .plan {
    width: 100%;
    height: auto;
    margin-bottom: 24px;
  }
}
/* line 1, app/assets/stylesheets/creator/progress.scss */
.progress {
  pointer-events: none;
  overflow: hidden;
  border-radius: var(--radius-2);
  background: rgba(0, 0, 0, 0.07);
  height: 7px;
  position: relative;
}

/* line 8, app/assets/stylesheets/creator/progress.scss */
.progress .current {
  position: absolute;
  height: 100%;
  left: 0;
  border-radius: var(--radius-2) 0 0 var(--radius-2);
  width: 50%;
}
/* line 1, app/assets/stylesheets/creator/quizzes/../variables.scss */
:root {
  /* Fonts */
  --brand-font: 'Factor A', sans-serif;
  --secondary-font: 'Inter', sans-serif;
  /* Colors */
  --color-black-background: #121212;
  --color-light-background: #F8F8F7;
  --color-play-mode-background: #1D1D1D;
  --color-menu-toolbar-background: #F8F8F7;
  --color-plan-basic: #3DEB8D;
  --play-mode-background-color: #1D1D1D;
  --color-neutral-0: #FFFFFF;
  --color-neutral-100: #F8F8F7;
  --color-neutral-150: #EFEFF0;
  --color-neutral-200: #DFE1E2;
  --color-neutral-300: #C3C6C8;
  --color-neutral-400: #A9ABAE;
  --color-neutral-500: #909090;
  --color-neutral-600: #7A7A7B;
  --color-neutral-700: #5A5B59;
  --color-neutral-750: #454545;
  --color-neutral-800: #272727;
  --color-neutral-900: #181818;
  --color-neutral-950: #121212;
  --color-neutral-1000: #000000;
  /* Accents */
  --accent-green: #006C32;
  --accent-green-light: #00D663;
  --accent-violet: #815FE0;
  --accent-negative-red: #E36D74;
  /* Type Sizes */
  --display-1: 40px;
  --h1: 32px;
  --h2: 26px;
  --h3: 22px;
  --h4: 18px;
  --ui1: 17px;
  --ui1-medium: 17px;
  --ui2: 16px;
  --ui2-medium: 16px;
  --ui3: 12px;
  --digits: 24px;
  --digits-2: 28px;
  /* Radius */
  --radius-0: 8px;
  --radius-1: 10px;
  --radius-2: 18px;
  --radius-3: 22px;
  /* Modal */
  --modal-gutter: 44px;
  --modal-margin: 16px;
  --modal-margin-blocks-ui: 16px;
  --modal-margin-blocks-ui2: 10px;
  /* Toolbar */
  --toolbar-width: 180px;
  /* Padding */
  --padding-40-24: 24px;
  --padding-40-36: 36px;
  --padding-30-20: 20px;
  --padding-24-16: 16px;
  --padding-22-20: 20px;
  --padding-18-14: 14px;
  --padding-18-20: 20px;
  --padding-16-12: 12px;
  --padding-12-10: 10px;
  --padding-10-8: 8px;
  --padding-8-6: 6px;
  /* z-indexes */
  --z-index-sticky-top: 1020;
  --z-index-toolbar: 2000;
  --z-index-modal-backdrop: 2999;
  --z-index-modal: 3000;
  /* Breakpoints */
  --breakpoint-mobile: 767px;
  --breakpoint-desktop: 1200px;
}

/* Font mixins */
@media (min-width: 768px) {
  /* line 204, app/assets/stylesheets/creator/quizzes/../variables.scss */
  :root {
    /* Type Sizes */
    --display-1: 60px;
    --h1: 56px;
    --h2: 38px;
    --h3: 26px;
    --h4: 19px;
    --ui1: 18px;
    --ui1-medium: 18px;
    --ui2: 16px;
    --ui2-medium: 16px;
    --ui3: 13px;
    --digits: 36px;
    --digits-2: 42px;
    /* Radius */
    --radius-0: 10px;
    --radius-1: 12px;
    --radius-2: 18px;
    --radius-3: 28px;
    /* Modal */
    --modal-gutter: 48px;
    --modal-margin: 24px;
    --modal-margin-blocks-ui: 22px;
    --modal-margin-blocks-ui2: 16px;
    /* Padding */
    --padding-40-24: 40px;
    --padding-40-36: 40px;
    --padding-30-20: 30px;
    --padding-24-16: 24px;
    --padding-22-20: 22px;
    --padding-18-14: 18px;
    --padding-18-20: 18px;
    --padding-16-12: 16px;
    --padding-12-10: 12px;
    --padding-10-8: 10px;
    --padding-8-6: 8px;
  }
}

/* line 4, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-content {
  border-radius: var(--radius-2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-left: none;
  border-right: none;
  border-bottom: none;
  background: var(--color-neutral-0);
  padding: var(--padding-24-16);
  display: flex;
  flex-direction: column;
  gap: var(--padding-40-24);
}

/* line 16, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-header {
  font-family: 'Factor A';
  font-size: var(--h3);
  font-style: normal;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: -0.22px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: none;
  padding: 0;
}

/* line 25, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-header button {
  display: flex;
  width: var(--padding-40-36);
  height: var(--padding-40-36);
  padding: var(--padding-10-8);
  justify-content: center;
  align-items: center;
  border-radius: 26px;
  background: rgba(0, 0, 0, 0.05);
  border: none;
}

/* line 36, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-header svg {
  width: var(--padding-22-20);
  height: var(--padding-22-20);
  fill: var(--color-neutral-800);
}

/* line 44, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-menu {
  font-family: Inter;
  font-size: var(--ui1-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.18px;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-800);
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: var(--padding-12-10);
  list-style-type: none;
  user-select: none;
}

/* line 57, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-menu li {
  padding: var(--padding-16-12);
  border-radius: var(--radius-2);
  background: var(--color-neutral-100);
  min-width: 143px;
  height: 87px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  flex-shrink: 1;
}

/* line 69, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-menu li:hover {
  outline: 2px solid var(--color-neutral-800);
}

/* line 72, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-menu li.active {
  background: var(--color-neutral-0);
  outline: 2px solid var(--color-neutral-800);
}

/* line 76, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-menu li:not(.active) {
  cursor: pointer;
}

/* line 79, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-menu svg {
  width: 22px;
  height: 24px;
  fill: var(--color-neutral-800);
  flex-shrink: 0;
}

/* line 87, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body {
  padding: 0;
}

/* line 89, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .topic {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* line 93, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .topic .text {
  font-family: Inter;
  font-size: var(--ui1);
  font-style: normal;
  font-weight: 450;
  line-height: 140%;
  letter-spacing: 0.002em;
  font-variation-settings: 'wght' 450, 'opsz' 24;
  font-feature-settings: 'cv06' on, 'cv11' on;
  color: var(--color-neutral-400);
  height: 124px;
  border-radius: var(--radius-1);
  border: 1px solid var(--color-neutral-200);
  width: 100%;
  padding: 14px;
}

/* line 102, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .topic .text textarea {
  border: none;
  width: 100%;
  height: 100%;
  padding-right: 25px;
  resize: none;
}

/* line 110, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .topic .text textarea:focus {
  outline: none;
}

/* line 114, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .topic .text .randomize {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 24px;
  height: 24px;
  cursor: pointer;
}

/* line 121, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .topic .text .randomize svg {
  width: 24px;
  height: 24px;
  fill: var(--color-neutral-400);
}

/* line 128, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .topic .text .randomize:hover svg {
  fill: var(--color-neutral-500);
}

/* line 133, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .topic .text:hover, .ai-generator-modal .modal-body .topic .text:focus-within {
  border: 1px solid var(--color-neutral-300);
}

/* line 136, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .topic .audience, .ai-generator-modal .modal-body .topic .difficulty {
  font-family: Inter;
  font-size: var(--ui1);
  font-style: normal;
  font-weight: 450;
  line-height: 140%;
  letter-spacing: 0.002em;
  font-variation-settings: 'wght' 450, 'opsz' 24;
  font-feature-settings: 'cv06' on, 'cv11' on;
  color: var(--color-neutral-400);
  border-radius: var(--radius-1);
  border: 1px solid var(--color-neutral-200);
  width: 100%;
  display: flex;
  flex-direction: row;
  padding: 14px;
  gap: 10px;
}

/* line 147, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .topic .audience textarea, .ai-generator-modal .modal-body .topic .difficulty textarea {
  border: none;
  width: 100%;
  height: 100%;
  flex-grow: 1;
  flex-shrink: 1;
  resize: none;
}

/* line 155, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .topic .audience textarea:focus, .ai-generator-modal .modal-body .topic .difficulty textarea:focus {
  outline: none;
}

/* line 158, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .topic .audience svg, .ai-generator-modal .modal-body .topic .difficulty svg {
  flex-grow: 0;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  fill: var(--color-neutral-400);
  cursor: pointer;
}

/* line 167, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .topic .audience:hover, .ai-generator-modal .modal-body .topic .difficulty:hover {
  border: 1px solid var(--color-neutral-300);
}

/* line 169, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .topic .audience:hover svg, .ai-generator-modal .modal-body .topic .difficulty:hover svg {
  fill: var(--color-neutral-500);
}

/* line 173, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .topic .audience:focus-within, .ai-generator-modal .modal-body .topic .difficulty:focus-within {
  border: 1px solid var(--color-neutral-300);
}

/* line 176, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .topic .buttons {
  display: flex;
  flex-direction: row;
  gap: var(--padding-10-8);
  color: var(--color-neutral-500);
}

/* line 181, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .topic .buttons svg {
  fill: var(--color-neutral-500);
}

/* line 188, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .text .text {
  font-family: Inter;
  font-size: var(--ui1);
  font-style: normal;
  font-weight: 450;
  line-height: 140%;
  letter-spacing: 0.002em;
  font-variation-settings: 'wght' 450, 'opsz' 24;
  font-feature-settings: 'cv06' on, 'cv11' on;
  color: var(--color-neutral-400);
  height: 182px;
  border-radius: var(--radius-1);
  border: 1px solid var(--color-neutral-200);
  width: 100%;
  padding: 14px;
}

/* line 197, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .text .text textarea {
  border: none;
  width: 100%;
  height: 100%;
  padding-right: 25px;
  resize: none;
}

/* line 204, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .text .text textarea:focus {
  outline: none;
}

/* line 210, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .document {
  font-family: Inter;
  font-size: var(--ui1);
  font-style: normal;
  font-weight: 450;
  line-height: 140%;
  letter-spacing: 0.002em;
  font-variation-settings: 'wght' 450, 'opsz' 24;
  font-feature-settings: 'cv06' on, 'cv11' on;
  color: var(--color-neutral-400);
  height: 182px;
  border-radius: var(--radius-1);
  outline: 1px solid var(--color-neutral-200);
  width: 100%;
  padding: var(--padding-30-20);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* line 223, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .document button {
  display: inline-flex;
  margin-bottom: 10px;
}

/* line 227, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .document span {
  display: block;
}

/* line 230, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .document span.formats {
  margin-top: 10px;
}

/* line 233, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .document input {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  opacity: 0;
}

/* line 242, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .document .filename {
  max-width: 90%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* line 248, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .document .dropithere-dragover {
  display: none;
}

/* line 252, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .document.dragover {
  outline: 2px dashed var(--color-neutral-400);
}

/* line 254, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .document.dragover button, .ai-generator-modal .modal-body .document.dragover .dropithere, .ai-generator-modal .modal-body .document.dragover .filename, .ai-generator-modal .modal-body .document.dragover .formats {
  display: none;
}

/* line 258, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-body .document.dragover .dropithere-dragover {
  display: block;
}

/* line 264, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-actions {
  display: flex;
  flex-direction: row;
  justify-content: end;
  gap: 12px;
}

/* line 271, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-preloader, .ai-generator-modal .modal-failure, .ai-generator-modal .modal-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* line 277, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-preloader svg, .ai-generator-modal .modal-failure svg, .ai-generator-modal .modal-success svg {
  width: 310px;
  height: 290px;
  margin-bottom: var(--padding-18-20);
}

/* line 282, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-preloader .header, .ai-generator-modal .modal-failure .header, .ai-generator-modal .modal-success .header {
  font-family: "Factor A";
  font-size: var(--h2);
  font-style: normal;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: -0.38px;
  font-feature-settings: 'ss02' on;
  color: var(--color-neutral-900);
  margin-bottom: var(--padding-8-6);
}

/* line 287, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-preloader .subheader, .ai-generator-modal .modal-failure .subheader, .ai-generator-modal .modal-success .subheader {
  font-family: Inter;
  font-size: var(--ui1);
  font-style: normal;
  font-weight: 450;
  line-height: 140%;
  letter-spacing: 0.002em;
  font-variation-settings: 'wght' 450, 'opsz' 24;
  font-feature-settings: 'cv06' on, 'cv11' on;
  color: var(--color-neutral-500);
  margin-bottom: var(--padding-40-24);
}

/* line 292, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-preloader .notice, .ai-generator-modal .modal-failure .notice, .ai-generator-modal .modal-success .notice {
  font-family: Inter;
  font-size: var(--ui1);
  font-style: normal;
  font-weight: 450;
  line-height: 140%;
  letter-spacing: 0.002em;
  font-variation-settings: 'wght' 450, 'opsz' 24;
  font-feature-settings: 'cv06' on, 'cv11' on;
  color: var(--color-neutral-500);
}

/* line 298, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-preloader svg {
  animation: heartBeat 1.3s infinite;
}

/* line 303, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-failure svg {
  animation: headShake 1.3s;
}

/* line 306, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-failure .subheader {
  margin-bottom: var(--padding-18-20);
}

/* line 311, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
.ai-generator-modal .modal-success svg {
  animation: tada 1.3s;
}

@media (max-width: 767px) {
  /* line 319, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
  .ai-generator-modal .modal-dialog {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    align-items: end;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
    max-width: none;
  }
  /* line 329, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
  .ai-generator-modal .modal-content {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  /* line 333, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
  .ai-generator-modal .modal-content .modal-menu {
    margin-top: auto;
    overflow-x: scroll;
    padding: 2px 16px;
    scrollbar-width: none;
    transform: translateX(-16px);
    width: calc(100% + 32px);
  }
  /* line 338, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
  .ai-generator-modal .modal-content .modal-menu::-webkit-scrollbar {
    display: none;
  }
  /* line 344, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
  .ai-generator-modal .modal-content .modal-body {
    flex-grow: 0;
    flex-shrink: 0;
  }
  /* line 348, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
  .ai-generator-modal .modal-content .modal-actions {
    margin-bottom: auto;
  }
  /* line 351, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
  .ai-generator-modal .modal-content .modal-preloader, .ai-generator-modal .modal-content .modal-success, .ai-generator-modal .modal-content .modal-failure {
    margin-top: auto;
    margin-bottom: auto;
  }
  /* line 359, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
  .ai-generator-modal.modal.fade .modal-dialog {
    transform: translate3d(0, 100vh, 0);
  }
  /* line 363, app/assets/stylesheets/creator/quizzes/ai-generator.scss */
  .ai-generator-modal.modal.show .modal-dialog {
    transform: translate3d(0, 0, 0);
  }
}
/* line 1, app/assets/stylesheets/creator/quizzes/../variables.scss */
:root {
  /* Fonts */
  --brand-font: 'Factor A', sans-serif;
  --secondary-font: 'Inter', sans-serif;
  /* Colors */
  --color-black-background: #121212;
  --color-light-background: #F8F8F7;
  --color-play-mode-background: #1D1D1D;
  --color-menu-toolbar-background: #F8F8F7;
  --color-plan-basic: #3DEB8D;
  --play-mode-background-color: #1D1D1D;
  --color-neutral-0: #FFFFFF;
  --color-neutral-100: #F8F8F7;
  --color-neutral-150: #EFEFF0;
  --color-neutral-200: #DFE1E2;
  --color-neutral-300: #C3C6C8;
  --color-neutral-400: #A9ABAE;
  --color-neutral-500: #909090;
  --color-neutral-600: #7A7A7B;
  --color-neutral-700: #5A5B59;
  --color-neutral-750: #454545;
  --color-neutral-800: #272727;
  --color-neutral-900: #181818;
  --color-neutral-950: #121212;
  --color-neutral-1000: #000000;
  /* Accents */
  --accent-green: #006C32;
  --accent-green-light: #00D663;
  --accent-violet: #815FE0;
  --accent-negative-red: #E36D74;
  /* Type Sizes */
  --display-1: 40px;
  --h1: 32px;
  --h2: 26px;
  --h3: 22px;
  --h4: 18px;
  --ui1: 17px;
  --ui1-medium: 17px;
  --ui2: 16px;
  --ui2-medium: 16px;
  --ui3: 12px;
  --digits: 24px;
  --digits-2: 28px;
  /* Radius */
  --radius-0: 8px;
  --radius-1: 10px;
  --radius-2: 18px;
  --radius-3: 22px;
  /* Modal */
  --modal-gutter: 44px;
  --modal-margin: 16px;
  --modal-margin-blocks-ui: 16px;
  --modal-margin-blocks-ui2: 10px;
  /* Toolbar */
  --toolbar-width: 180px;
  /* Padding */
  --padding-40-24: 24px;
  --padding-40-36: 36px;
  --padding-30-20: 20px;
  --padding-24-16: 16px;
  --padding-22-20: 20px;
  --padding-18-14: 14px;
  --padding-18-20: 20px;
  --padding-16-12: 12px;
  --padding-12-10: 10px;
  --padding-10-8: 8px;
  --padding-8-6: 6px;
  /* z-indexes */
  --z-index-sticky-top: 1020;
  --z-index-toolbar: 2000;
  --z-index-modal-backdrop: 2999;
  --z-index-modal: 3000;
  /* Breakpoints */
  --breakpoint-mobile: 767px;
  --breakpoint-desktop: 1200px;
}

/* Font mixins */
@media (min-width: 768px) {
  /* line 204, app/assets/stylesheets/creator/quizzes/../variables.scss */
  :root {
    /* Type Sizes */
    --display-1: 60px;
    --h1: 56px;
    --h2: 38px;
    --h3: 26px;
    --h4: 19px;
    --ui1: 18px;
    --ui1-medium: 18px;
    --ui2: 16px;
    --ui2-medium: 16px;
    --ui3: 13px;
    --digits: 36px;
    --digits-2: 42px;
    /* Radius */
    --radius-0: 10px;
    --radius-1: 12px;
    --radius-2: 18px;
    --radius-3: 28px;
    /* Modal */
    --modal-gutter: 48px;
    --modal-margin: 24px;
    --modal-margin-blocks-ui: 22px;
    --modal-margin-blocks-ui2: 16px;
    /* Padding */
    --padding-40-24: 40px;
    --padding-40-36: 40px;
    --padding-30-20: 30px;
    --padding-24-16: 24px;
    --padding-22-20: 22px;
    --padding-18-14: 18px;
    --padding-18-20: 18px;
    --padding-16-12: 16px;
    --padding-12-10: 12px;
    --padding-10-8: 10px;
    --padding-8-6: 8px;
  }
}

/* line 4, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-content {
  border-radius: var(--radius-3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-left: none;
  border-right: none;
  border-bottom: none;
  background: var(--color-neutral-0);
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 576px;
}

/* line 16, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: none;
  padding: var(--padding-24-16);
}

/* line 24, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-header button {
  display: flex;
  width: var(--padding-40-36);
  height: var(--padding-40-36);
  padding: var(--padding-10-8);
  justify-content: center;
  align-items: center;
  border-radius: 26px;
  background: rgba(0, 0, 0, 0.05);
  border: none;
}

/* line 35, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-header svg {
  width: var(--padding-22-20);
  height: var(--padding-22-20);
  fill: var(--color-neutral-800);
}

/* line 40, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-header .left {
  display: flex;
  flex-shrink: 1;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  gap: var(--padding-16-12);
  width: 100%;
  height: var(--padding-40-36);
}

/* line 50, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-header .right {
  position: absolute;
  right: 24px;
  top: 24px;
  bottom: 0;
  height: 40px;
}

/* line 57, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-header .quiz-creation-progress {
  display: flex;
  flex-direction: row;
  gap: 4px;
}

/* line 61, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-header .quiz-creation-progress .step {
  width: 45px;
  height: 6px;
  border-radius: 11px;
  background: var(--color-neutral-150);
}

/* line 67, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-header .quiz-creation-progress .step.active {
  background: var(--color-neutral-800);
}

/* line 74, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-dialog {
  max-width: 660px;
}

/* line 78, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-body {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: var(--padding-40-24);
  padding: 0 var(--padding-24-16) var(--padding-24-16) var(--padding-24-16);
}

/* line 85, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-body .title {
  font-family: "Factor A";
  font-size: var(--h2);
  font-style: normal;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: -0.38px;
  font-feature-settings: 'ss02' on;
  text-align: center;
}

/* line 90, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-body .actions {
  display: flex;
  flex-direction: row;
  gap: 18px;
  justify-content: center;
  align-items: center;
}

/* line 100, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-body .actions button {
  display: flex;
  flex-direction: column;
  align-items: start;
  height: 150px;
  width: 180px;
  padding: var(--padding-16-12);
  text-decoration: none;
  border-radius: var(--radius-2);
  border: none;
  outline: 1px solid rgba(0, 0, 0, 0.1);
  gap: var(--padding-8-6);
  background: var(--color-neutral-0);
  text-align: left;
}

/* line 115, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-body .actions button .header {
  font-family: Inter;
  font-size: var(--ui1-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.18px;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-800);
}

/* line 119, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-body .actions button .subheader {
  font-family: Inter;
  font-size: var(--ui3);
  font-style: normal;
  font-weight: 440;
  line-height: 140%;
  letter-spacing: -0.12px;
  font-feature-settings: 'calt' off;
  color: var(--color-neutral-400);
  margin-top: auto;
}

/* line 125, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-body .actions button:hover {
  outline: 2px solid var(--color-neutral-800);
}

/* line 128, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-body .actions button.active {
  outline: 2px solid var(--color-neutral-800);
}

/* line 131, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-body .actions svg {
  height: 24px;
  width: 24px;
  fill: var(--color-neutral-800);
}

/* line 137, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-body .templates {
  display: flex;
  flex-direction: column;
  gap: var(--padding-16-12);
}

/* line 141, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-body .templates .header {
  font-family: Inter;
  font-size: var(--ui1-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.18px;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-800);
}

/* line 145, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-body .templates .template-container {
  display: flex;
  flex-direction: row;
  gap: 16px;
}

/* line 150, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-body .templates .cover {
  cursor: pointer;
  width: 164px;
  height: 246px;
  overflow: visible;
}

/* line 155, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-body .templates .cover .title {
  font-size: 26px;
  padding: 0 18px 16px 17px;
}

/* line 161, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-body .templates .cover:hover {
  outline: 2px solid var(--color-neutral-800);
}

/* line 164, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-body .templates .cover.active {
  outline: 2px solid var(--color-neutral-800);
}

/* line 170, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px 24px 24px;
  box-shadow: 0px 3px 12.5px 0px rgba(0, 0, 0, 0.1);
}

/* line 178, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-footer .footer-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

/* line 184, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-footer .footer-left .language {
  font-family: Inter;
  font-size: var(--ui1);
  font-style: normal;
  font-weight: 450;
  line-height: 140%;
  letter-spacing: 0.002em;
  font-variation-settings: 'wght' 450, 'opsz' 24;
  font-feature-settings: 'cv06' on, 'cv11' on;
  position: relative;
  cursor: pointer;
}

/* line 188, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-footer .footer-left .language button {
  height: var(--padding-40-36);
  min-width: 164px;
  border-radius: var(--radius-1);
  border: 1px solid var(--color-neutral-200);
  cursor: pointer;
  background: var(--color-neutral-0);
  text-align: left;
  padding-left: 14px;
}

/* line 198, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-footer .footer-left .language button:hover {
  border: 1px solid var(--color-neutral-300);
}

/* line 201, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-footer .footer-left .language svg {
  position: absolute;
  width: 15px;
  height: 15px;
  top: 12px;
  right: 15px;
  fill: var(--color-neutral-400);
  pointer-events: none;
}

/* line 210, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-footer .footer-left .language .dropdown-menu.show {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  font-variation-settings: 'wght' 430, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-200);
  display: flex;
  padding: var(--padding-8-6);
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border-radius: var(--radius-1);
  background: var(--color-neutral-800);
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.02);
  z-index: 1021;
}

/* line 223, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-footer .footer-left .language .dropdown-menu.show ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* line 232, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-footer .footer-left .language .dropdown-menu.show ul li {
  padding: var(--padding-8-6);
  color: var(--color-neutral-200);
}

/* line 236, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-footer .footer-left .language .dropdown-menu.show ul li:hover {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

/* line 245, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
.create-quiz-modal .modal-footer .footer-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

@media (max-width: 767px) {
  /* line 256, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
  .create-quiz-modal .modal-dialog {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    align-items: end;
    width: 100%;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  }
  /* line 266, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
  .create-quiz-modal .modal-content {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    width: 100%;
  }
  /* line 274, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
  .create-quiz-modal .modal-header .language button {
    min-width: 110px;
    color: var(--color-neutral-800);
  }
  /* line 282, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
  .create-quiz-modal .modal-body .actions {
    grid-template-columns: 1fr 1fr;
  }
  /* line 284, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
  .create-quiz-modal .modal-body .actions button {
    height: 161px;
  }
  /* line 289, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
  .create-quiz-modal .modal-body .templates .template-container {
    overflow-x: scroll;
    scrollbar-width: none;
    gap: 14px;
    width: calc(100% + 32px);
    transform: translateX(-16px);
    padding-left: 16px;
    padding-right: 16px;
  }
  /* line 297, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
  .create-quiz-modal .modal-body .templates .template-container::-webkit-scrollbar {
    display: none;
  }
  /* line 302, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
  .create-quiz-modal .modal-body .templates .cover {
    width: 148px;
    height: 222px;
  }
  /* line 305, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
  .create-quiz-modal .modal-body .templates .cover .title {
    font-size: 22px;
  }
  /* line 309, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
  .create-quiz-modal .modal-body .templates .cover:hover {
    outline: none;
  }
  /* line 316, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
  .create-quiz-modal.modal .modal-dialog {
    transform: translate3d(0, 100vh, 0);
  }
  /* line 320, app/assets/stylesheets/creator/quizzes/create-quiz.scss */
  .create-quiz-modal.modal.show .modal-dialog {
    transform: translate3d(0, 0, 0);
  }
}
/* line 1, app/assets/stylesheets/creator/quizzes/../variables.scss */
:root {
  /* Fonts */
  --brand-font: 'Factor A', sans-serif;
  --secondary-font: 'Inter', sans-serif;
  /* Colors */
  --color-black-background: #121212;
  --color-light-background: #F8F8F7;
  --color-play-mode-background: #1D1D1D;
  --color-menu-toolbar-background: #F8F8F7;
  --color-plan-basic: #3DEB8D;
  --play-mode-background-color: #1D1D1D;
  --color-neutral-0: #FFFFFF;
  --color-neutral-100: #F8F8F7;
  --color-neutral-150: #EFEFF0;
  --color-neutral-200: #DFE1E2;
  --color-neutral-300: #C3C6C8;
  --color-neutral-400: #A9ABAE;
  --color-neutral-500: #909090;
  --color-neutral-600: #7A7A7B;
  --color-neutral-700: #5A5B59;
  --color-neutral-750: #454545;
  --color-neutral-800: #272727;
  --color-neutral-900: #181818;
  --color-neutral-950: #121212;
  --color-neutral-1000: #000000;
  /* Accents */
  --accent-green: #006C32;
  --accent-green-light: #00D663;
  --accent-violet: #815FE0;
  --accent-negative-red: #E36D74;
  /* Type Sizes */
  --display-1: 40px;
  --h1: 32px;
  --h2: 26px;
  --h3: 22px;
  --h4: 18px;
  --ui1: 17px;
  --ui1-medium: 17px;
  --ui2: 16px;
  --ui2-medium: 16px;
  --ui3: 12px;
  --digits: 24px;
  --digits-2: 28px;
  /* Radius */
  --radius-0: 8px;
  --radius-1: 10px;
  --radius-2: 18px;
  --radius-3: 22px;
  /* Modal */
  --modal-gutter: 44px;
  --modal-margin: 16px;
  --modal-margin-blocks-ui: 16px;
  --modal-margin-blocks-ui2: 10px;
  /* Toolbar */
  --toolbar-width: 180px;
  /* Padding */
  --padding-40-24: 24px;
  --padding-40-36: 36px;
  --padding-30-20: 20px;
  --padding-24-16: 16px;
  --padding-22-20: 20px;
  --padding-18-14: 14px;
  --padding-18-20: 20px;
  --padding-16-12: 12px;
  --padding-12-10: 10px;
  --padding-10-8: 8px;
  --padding-8-6: 6px;
  /* z-indexes */
  --z-index-sticky-top: 1020;
  --z-index-toolbar: 2000;
  --z-index-modal-backdrop: 2999;
  --z-index-modal: 3000;
  /* Breakpoints */
  --breakpoint-mobile: 767px;
  --breakpoint-desktop: 1200px;
}

/* Font mixins */
@media (min-width: 768px) {
  /* line 204, app/assets/stylesheets/creator/quizzes/../variables.scss */
  :root {
    /* Type Sizes */
    --display-1: 60px;
    --h1: 56px;
    --h2: 38px;
    --h3: 26px;
    --h4: 19px;
    --ui1: 18px;
    --ui1-medium: 18px;
    --ui2: 16px;
    --ui2-medium: 16px;
    --ui3: 13px;
    --digits: 36px;
    --digits-2: 42px;
    /* Radius */
    --radius-0: 10px;
    --radius-1: 12px;
    --radius-2: 18px;
    --radius-3: 28px;
    /* Modal */
    --modal-gutter: 48px;
    --modal-margin: 24px;
    --modal-margin-blocks-ui: 22px;
    --modal-margin-blocks-ui2: 16px;
    /* Padding */
    --padding-40-24: 40px;
    --padding-40-36: 40px;
    --padding-30-20: 30px;
    --padding-24-16: 24px;
    --padding-22-20: 22px;
    --padding-18-14: 18px;
    --padding-18-20: 18px;
    --padding-16-12: 16px;
    --padding-12-10: 12px;
    --padding-10-8: 10px;
    --padding-8-6: 8px;
  }
}

/* line 4, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
.modal.cover-modal .modal-header {
  font-family: 'Factor A';
  font-size: var(--h3);
  font-style: normal;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: -0.22px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: none;
  padding: 0;
  margin-bottom: var(--padding-40-24);
}

/* line 13, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
.modal.cover-modal .modal-header button {
  display: flex;
  width: var(--padding-40-36);
  height: var(--padding-40-36);
  padding: var(--padding-10-8);
  justify-content: center;
  align-items: center;
  border-radius: 26px;
  background: rgba(0, 0, 0, 0.05);
  border: none;
}

/* line 24, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
.modal.cover-modal .modal-header svg {
  width: var(--padding-22-20);
  height: var(--padding-22-20);
  fill: var(--color-neutral-800);
}

/* line 30, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
.modal.cover-modal .modal-dialog {
  max-width: 660px;
}

/* line 33, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
.modal.cover-modal .modal-content {
  border-radius: var(--radius-2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-left: none;
  border-right: none;
  border-bottom: none;
  background: var(--color-neutral-0);
  padding: var(--padding-24-16);
}

/* line 42, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
.modal.cover-modal .modal-content .content {
  display: flex;
  flex-direction: row;
  gap: 26px;
}

/* line 48, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
.modal.cover-modal .modal-content .content .controls .header {
  font-family: Inter;
  font-size: var(--ui1-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.18px;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-400);
  margin-bottom: 12px;
}

/* line 53, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
.modal.cover-modal .modal-content .content .controls .theme {
  margin-bottom: 40px;
}

/* line 55, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
.modal.cover-modal .modal-content .content .controls .theme .buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
}

/* line 61, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
.modal.cover-modal .modal-content .content .controls .theme .buttons button {
  width: 64px;
  height: 80px;
  padding: 0;
  background: none;
  border-radius: var(--radius-1);
  border: none;
  outline: 1px solid var(--color-neutral-150);
  flex-shrink: 0;
  flex-grow: 0;
}

/* line 71, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
.modal.cover-modal .modal-content .content .controls .theme .buttons button svg {
  width: 100%;
  height: 100%;
  fill: var(--color-neutral-1000);
  stroke: var(--color-neutral-1000);
  border-radius: var(--radius-1);
}

/* line 79, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
.modal.cover-modal .modal-content .content .controls .theme .buttons button.active {
  outline: 2px solid var(--color-neutral-1000);
}

/* line 85, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
.modal.cover-modal .modal-content .content .controls .color .buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
}

/* line 91, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
.modal.cover-modal .modal-content .content .controls .color .buttons button {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  border: none;
  flex-shrink: 0;
  flex-grow: 0;
}

/* line 99, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
.modal.cover-modal .modal-content .content .controls .color .buttons button.active {
  border: 2px solid var(--color-neutral-1000);
}

/* line 107, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
.modal.cover-modal .actions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: var(--padding-40-24);
}

/* line 113, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
.modal.cover-modal .actions .left, .modal.cover-modal .actions .right {
  display: flex;
  flex-direction: row;
  gap: 12px;
}

@media (max-width: 767px) {
  /* line 123, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
  .modal.cover-modal .modal-dialog {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    align-items: end;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) !important;
  }
  /* line 132, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
  .modal.cover-modal .modal-content {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  /* line 135, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
  .modal.cover-modal .modal-content .content {
    margin-top: auto;
    flex-direction: column;
  }
  /* line 138, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
  .modal.cover-modal .modal-content .content .preview .cover {
    margin-left: auto;
    margin-right: auto;
  }
  /* line 142, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
  .modal.cover-modal .modal-content .content .controls .theme {
    margin-bottom: 22px;
  }
  /* line 145, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
  .modal.cover-modal .modal-content .content .controls .theme .buttons, .modal.cover-modal .modal-content .content .controls .color .buttons {
    padding: 2px 16px;
    flex-wrap: nowrap;
    overflow-x: scroll;
    scrollbar-width: none;
    width: calc(100% + 32px);
    transform: translateX(-16px);
  }
  /* line 150, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
  .modal.cover-modal .modal-content .content .controls .theme .buttons::-webkit-scrollbar, .modal.cover-modal .modal-content .content .controls .color .buttons::-webkit-scrollbar {
    display: none;
  }
  /* line 157, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
  .modal.cover-modal .modal-content .actions {
    margin-top: 24px;
    margin-bottom: auto;
  }
  /* line 165, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
  .cover-modal.modal.fade .modal-dialog {
    transform: translate3d(0, 100vh, 0);
  }
  /* line 169, app/assets/stylesheets/creator/quizzes/edit-cover.scss */
  .cover-modal.modal.show .modal-dialog {
    transform: translate3d(0, 0, 0);
  }
}
/* line 1, app/assets/stylesheets/creator/quizzes/../variables.scss */
:root {
  /* Fonts */
  --brand-font: 'Factor A', sans-serif;
  --secondary-font: 'Inter', sans-serif;
  /* Colors */
  --color-black-background: #121212;
  --color-light-background: #F8F8F7;
  --color-play-mode-background: #1D1D1D;
  --color-menu-toolbar-background: #F8F8F7;
  --color-plan-basic: #3DEB8D;
  --play-mode-background-color: #1D1D1D;
  --color-neutral-0: #FFFFFF;
  --color-neutral-100: #F8F8F7;
  --color-neutral-150: #EFEFF0;
  --color-neutral-200: #DFE1E2;
  --color-neutral-300: #C3C6C8;
  --color-neutral-400: #A9ABAE;
  --color-neutral-500: #909090;
  --color-neutral-600: #7A7A7B;
  --color-neutral-700: #5A5B59;
  --color-neutral-750: #454545;
  --color-neutral-800: #272727;
  --color-neutral-900: #181818;
  --color-neutral-950: #121212;
  --color-neutral-1000: #000000;
  /* Accents */
  --accent-green: #006C32;
  --accent-green-light: #00D663;
  --accent-violet: #815FE0;
  --accent-negative-red: #E36D74;
  /* Type Sizes */
  --display-1: 40px;
  --h1: 32px;
  --h2: 26px;
  --h3: 22px;
  --h4: 18px;
  --ui1: 17px;
  --ui1-medium: 17px;
  --ui2: 16px;
  --ui2-medium: 16px;
  --ui3: 12px;
  --digits: 24px;
  --digits-2: 28px;
  /* Radius */
  --radius-0: 8px;
  --radius-1: 10px;
  --radius-2: 18px;
  --radius-3: 22px;
  /* Modal */
  --modal-gutter: 44px;
  --modal-margin: 16px;
  --modal-margin-blocks-ui: 16px;
  --modal-margin-blocks-ui2: 10px;
  /* Toolbar */
  --toolbar-width: 180px;
  /* Padding */
  --padding-40-24: 24px;
  --padding-40-36: 36px;
  --padding-30-20: 20px;
  --padding-24-16: 16px;
  --padding-22-20: 20px;
  --padding-18-14: 14px;
  --padding-18-20: 20px;
  --padding-16-12: 12px;
  --padding-12-10: 10px;
  --padding-10-8: 8px;
  --padding-8-6: 6px;
  /* z-indexes */
  --z-index-sticky-top: 1020;
  --z-index-toolbar: 2000;
  --z-index-modal-backdrop: 2999;
  --z-index-modal: 3000;
  /* Breakpoints */
  --breakpoint-mobile: 767px;
  --breakpoint-desktop: 1200px;
}

/* Font mixins */
@media (min-width: 768px) {
  /* line 204, app/assets/stylesheets/creator/quizzes/../variables.scss */
  :root {
    /* Type Sizes */
    --display-1: 60px;
    --h1: 56px;
    --h2: 38px;
    --h3: 26px;
    --h4: 19px;
    --ui1: 18px;
    --ui1-medium: 18px;
    --ui2: 16px;
    --ui2-medium: 16px;
    --ui3: 13px;
    --digits: 36px;
    --digits-2: 42px;
    /* Radius */
    --radius-0: 10px;
    --radius-1: 12px;
    --radius-2: 18px;
    --radius-3: 28px;
    /* Modal */
    --modal-gutter: 48px;
    --modal-margin: 24px;
    --modal-margin-blocks-ui: 22px;
    --modal-margin-blocks-ui2: 16px;
    /* Padding */
    --padding-40-24: 40px;
    --padding-40-36: 40px;
    --padding-30-20: 30px;
    --padding-24-16: 24px;
    --padding-22-20: 22px;
    --padding-18-14: 18px;
    --padding-18-20: 18px;
    --padding-16-12: 16px;
    --padding-12-10: 12px;
    --padding-10-8: 10px;
    --padding-8-6: 8px;
  }
}

/* line 3, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page {
  display: flex;
  flex-direction: column;
}

/* line 7, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 50px;
}

/* line 13, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-title {
  font-family: "Factor A";
  font-size: var(--h1);
  font-style: normal;
  font-weight: 500;
  line-height: 105%;
  letter-spacing: -1.12px;
  font-feature-settings: 'ss02' on;
  border: none;
  width: 100%;
  max-width: 604px;
  display: flex;
  word-break: break-word;
  padding-right: 20px;
  caret-color: var(--color-neutral-900);
}

/* line 24, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-title-default {
  color: var(--color-neutral-400);
}

/* line 28, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-title:focus {
  outline: none;
}

/* line 32, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-data {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 1;
}

/* line 39, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-cover {
  flex-grow: 0;
  flex-shrink: 0;
}

/* line 42, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-cover img {
  width: 141px;
  height: 210px;
}

/* line 47, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header h1 {
  font-family: "Factor A";
  font-size: var(--h1);
  font-style: normal;
  font-weight: 500;
  line-height: 105%;
  letter-spacing: -1.12px;
  font-feature-settings: 'ss02' on;
  color: var(--color-neutral-900);
}

/* line 52, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .general {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  font-variation-settings: 'wght' 430, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  color: var(--color-neutral-500);
  margin-top: 14px;
  margin-right: 10px;
}

/* line 62, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .general .time::first-letter {
  text-transform: capitalize;
}

/* line 66, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .general > div {
  white-space: nowrap;
  margin-right: 16px;
  margin-bottom: 4px;
}

/* line 72, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .actions {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-top: 32px;
}

/* line 78, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .actions .more > a {
  padding: 0px 14px;
}

/* line 83, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .actions .play {
  background: #0CD344;
  color: var(--color-neutral-0);
}

/* line 86, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .actions .play svg {
  fill: var(--color-neutral-0);
}

/* line 91, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .actions .play:hover {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.08) 100%), #0CD344;
}

/* line 95, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .actions .play[disabled="true"] {
  background: var(--color-neutral-0);
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: var(--color-neutral-300);
}

/* line 99, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .actions .play[disabled="true"] svg {
  fill: var(--color-neutral-300);
}

/* line 105, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .actions .modal.collaborators .cf-turnstile {
  height: 0;
  display: none;
}

/* line 109, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .actions .modal.collaborators .modal-content {
  border-radius: var(--radius-2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-left: none;
  border-right: none;
  border-bottom: none;
  background: var(--color-neutral-0);
  padding: var(--padding-24-16);
}

/* line 119, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .actions .modal.collaborators .modal-header {
  font-family: 'Factor A';
  font-size: var(--h3);
  font-style: normal;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: -0.22px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: none;
  padding: 0;
}

/* line 127, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .actions .modal.collaborators .modal-header button {
  display: flex;
  width: var(--padding-40-36);
  height: var(--padding-40-36);
  padding: var(--padding-10-8);
  justify-content: center;
  align-items: center;
  border-radius: 26px;
  background: rgba(0, 0, 0, 0.05);
  border: none;
}

/* line 138, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .actions .modal.collaborators .modal-header svg {
  width: var(--padding-22-20);
  height: var(--padding-22-20);
  fill: var(--color-neutral-800);
}

/* line 144, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .actions .modal.collaborators .modal-body {
  padding: 0;
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  gap: var(--padding-40-24);
}

/* line 151, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .actions .modal.collaborators .modal-body .subheader {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  font-variation-settings: 'wght' 430, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-600);
}

/* line 156, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .actions .modal.collaborators .modal-body .form {
  display: flex;
  flex-direction: row;
  gap: var(--padding-12-10);
}

/* line 160, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .actions .modal.collaborators .modal-body .form .input {
  width: 100%;
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* line 168, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .actions .modal.collaborators .modal-body .form input {
  font-family: Inter;
  font-size: var(--ui1);
  font-style: normal;
  font-weight: 450;
  line-height: 140%;
  letter-spacing: 0.002em;
  font-variation-settings: 'wght' 450, 'opsz' 24;
  font-feature-settings: 'cv06' on, 'cv11' on;
  display: flex;
  height: var(--play-mode-ui-technical-bet-width-2, 50px);
  padding: 14px 10px 14px 14px;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-1);
  border: 1px solid var(--color-neutral-200);
  outline: none;
  width: 100%;
}

/* line 180, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .actions .modal.collaborators .modal-body .form #newCollaboratorError {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  font-variation-settings: 'wght' 430, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: red;
}

/* line 185, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .actions .modal.collaborators .modal-body .collaborators-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* line 189, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .actions .modal.collaborators .modal-body .collaborators-list .header {
  font-family: Inter;
  font-size: var(--ui1-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.18px;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-800);
}

/* line 193, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .actions .modal.collaborators .modal-body .collaborators-list .collaborator {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 15px 0;
  color: var(--color-neutral-600);
}

/* line 199, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .actions .modal.collaborators .modal-body .collaborators-list .collaborator .email {
  flex-grow: 1;
  flex-shrink: 1;
}

/* line 203, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .actions .modal.collaborators .modal-body .collaborators-list .collaborator .remove {
  display: flex;
  background: var(--color-neutral-200);
  background: none;
  border: none;
}

/* line 208, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .actions .modal.collaborators .modal-body .collaborators-list .collaborator .remove svg {
  width: 22px;
  height: 22px;
  fill: var(--color-neutral-700);
}

/* line 215, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-info .actions .modal.collaborators .modal-body .collaborators-list .collaborator:not(:last-child) {
  border-bottom: 1px solid var(--color-neutral-150);
}

/* line 223, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .quiz-page-header .quiz-cover img {
  width: 141px;
}

/* line 228, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .dropdown-menu.show {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  font-variation-settings: 'wght' 430, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-200);
  display: flex;
  width: 212px;
  padding: var(--padding-8-6);
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border-radius: var(--radius-1);
  background: var(--color-neutral-800);
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.02);
  z-index: 1021;
}

/* line 242, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .dropdown-menu.show ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* line 251, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .dropdown-menu.show ul li {
  padding: var(--padding-8-6);
}

/* line 253, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .dropdown-menu.show ul li a {
  display: flex;
  flex-direction: row;
  gap: 10px;
  color: var(--color-neutral-200);
}

/* line 260, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .dropdown-menu.show ul li:hover {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

/* line 266, app/assets/stylesheets/creator/quizzes/edit.scss */
.quiz-page .dropdown-menu.show svg {
  flex-grow: 0;
  flex-shrink: 0;
  fill: var(--color-neutral-200);
  width: 20px;
  height: 20px;
}

/* line 276, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list {
  margin-bottom: 24px;
}

/* line 279, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list textarea {
  font-family: Inter;
  font-size: var(--ui1);
  font-style: normal;
  font-weight: 450;
  line-height: 140%;
  letter-spacing: 0.002em;
  font-variation-settings: 'wght' 450, 'opsz' 24;
  font-feature-settings: 'cv06' on, 'cv11' on;
  border: 0;
  width: 100%;
  color: var(--color-neutral-750);
  background: none;
  resize: none;
  overflow: hidden;
  min-height: 1px;
}

/* line 290, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list textarea:focus {
  outline: none;
}

/* line 294, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .qa {
  padding: 14px 14px 14px 24px;
  border-radius: var(--radius-2);
  border: 1px solid var(--color-neutral-150);
}

/* line 298, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .qa .handler {
  opacity: 0;
  border-radius: var(--radius-3);
}

/* line 302, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .qa .sortable-handle:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* line 305, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .qa .media {
  margin-top: 2px;
  margin-bottom: 12px;
  display: inline-flex;
  position: relative;
}

/* line 312, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .qa .media img {
  max-width: 200px;
  max-height: 200px;
  width: auto;
  height: auto;
  border-radius: var(--radius-1);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* line 321, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .qa .media .actions {
  display: flex;
  flex-direction: row;
  gap: 4px;
  position: absolute;
  top: 12px;
  right: 12px;
}

/* line 329, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .qa .media .actions a {
  border-radius: 100px;
  background: rgba(47, 47, 47, 0.4);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* line 339, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .qa .media .actions a svg {
  fill: var(--color-neutral-0);
  width: 18px;
  height: 18px;
}

/* line 345, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .qa .media .actions a:hover {
  background: rgba(47, 47, 47, 0.6);
}

/* line 351, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .qa:not(:first-child) {
  margin-top: var(--padding-40-24);
}

/* line 354, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .qa:first-child {
  margin-top: 17px;
}

/* line 358, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .qa:hover {
  border: 1px solid var(--color-neutral-200);
}

/* line 360, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .qa:hover .handler {
  opacity: 1;
  cursor: grab;
}

/* line 366, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .qa:focus-within {
  border: 1px solid var(--color-neutral-400);
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.01), 0px 10px 40px 12px rgba(0, 0, 0, 0.05);
}

/* line 371, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .actions {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

/* line 375, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .actions a {
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

/* line 382, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .actions a svg {
  width: 20px;
  height: 20px;
  fill: var(--color-neutral-400);
}

/* line 388, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .actions a.inactive {
  background: none;
  cursor: default;
}

/* line 390, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .actions a.inactive svg {
  fill: var(--color-neutral-200);
}

/* line 395, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .actions a:hover {
  background: rgba(0, 0, 0, 0.04);
}

/* line 397, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .actions a:hover svg {
  fill: var(--color-neutral-600);
}

/* line 401, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .actions a.inactive:hover {
  background: none;
}

/* line 403, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .actions a.inactive:hover svg {
  fill: var(--color-neutral-200);
}

/* line 409, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
}

/* line 416, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .header .position {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-400);
}

/* line 422, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .question {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-neutral-150);
}

/* line 427, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .answers {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* line 432, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .answer {
  padding: 12px 0;
  border-bottom: 1px solid var(--color-neutral-150);
  display: flex;
  flex-direction: row;
  gap: 8px;
}

/* line 439, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .answer svg {
  margin-top: 3px;
}

/* line 444, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .context {
  padding-top: 12px;
}

/* line 446, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .context span {
  font-size: 12px;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -0.12px;
  color: var(--color-neutral-400);
}

/* line 455, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .ten-icon-answer-check {
  width: 24px;
  height: 24px;
  fill: var(--color-neutral-750);
}

/* line 461, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .ten-icon-answer-blank {
  width: 24px;
  height: 24px;
  fill: var(--color-neutral-200);
}

/* line 467, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .ten-icon-drag {
  display: flex;
  width: 50px;
  height: 26px;
  padding: 3px 15px;
  cursor: grab;
  fill: var(--color-neutral-400);
}

/* line 476, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list .file-input {
  display: none;
}

/* line 482, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list.classic .context {
  display: none;
}

/* line 487, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list.classic .answers .answer:nth-last-child(1) {
  border-bottom: none;
}

/* line 490, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list.classic .answers .answer:nth-last-child(2):nth-child(odd) {
  border-bottom: none;
}

/* line 497, app/assets/stylesheets/creator/quizzes/edit.scss */
body.hide-answers .qa-list .answer textarea, body.hide-answers .qa-list .context textarea {
  -webkit-text-security: disc;
}

/* line 505, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list.reordering .qa .header .destroy {
  opacity: 0;
}

/* line 509, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list.reordering .qa .question {
  border: none;
  padding: 0;
}

/* line 513, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list.reordering .qa .answers {
  display: none;
}

/* line 516, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list.reordering .qa .context {
  display: none;
}

/* line 522, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list-blank {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 24px;
  border-radius: var(--radius-2);
  border: 1px solid var(--color-neutral-150);
  background: var(--color-neutral-50);
  margin: 24px 0;
  text-align: center;
}

/* line 532, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list-blank .header {
  font-family: "Factor A";
  font-size: var(--h2);
  font-style: normal;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: -0.38px;
  font-feature-settings: 'ss02' on;
  color: var(--color-neutral-900);
}

/* line 536, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list-blank .subheader {
  font-family: Inter;
  font-size: var(--ui1);
  font-style: normal;
  font-weight: 450;
  line-height: 140%;
  letter-spacing: 0.002em;
  font-variation-settings: 'wght' 450, 'opsz' 24;
  font-feature-settings: 'cv06' on, 'cv11' on;
  color: var(--color-neutral-500);
}

/* line 540, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list-blank .actions {
  display: flex;
  flex-direction: row;
  gap: 18px;
  margin-top: 28px;
}

/* line 545, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list-blank .actions button {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 170px;
  height: 170px;
  padding: var(--padding-16-12);
  text-decoration: none;
  border-radius: var(--radius-2);
  border: none;
  outline: 1px solid rgba(0, 0, 0, 0.1);
  gap: var(--padding-8-6);
  background: var(--color-neutral-0);
  text-align: left;
}

/* line 560, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list-blank .actions button .header {
  font-family: Inter;
  font-size: var(--ui1-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.18px;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-800);
}

/* line 564, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list-blank .actions button .subheader {
  font-family: Inter;
  font-size: var(--ui3);
  font-style: normal;
  font-weight: 440;
  line-height: 140%;
  letter-spacing: -0.12px;
  font-feature-settings: 'calt' off;
  color: var(--color-neutral-400);
  margin-top: auto;
}

/* line 570, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list-blank .actions button:hover {
  outline: 2px solid var(--color-neutral-800);
}

/* line 573, app/assets/stylesheets/creator/quizzes/edit.scss */
.qa-list-blank .actions svg {
  height: 24px;
  width: 24px;
  fill: var(--color-neutral-800);
}

@media (max-width: 767px) {
  /* line 583, app/assets/stylesheets/creator/quizzes/edit.scss */
  .quiz-page .quiz-page-header {
    margin-bottom: 30px;
  }
  /* line 586, app/assets/stylesheets/creator/quizzes/edit.scss */
  .quiz-page .quiz-page-header .quiz-cover img {
    width: 86px;
    height: 128px;
  }
  /* line 593, app/assets/stylesheets/creator/quizzes/edit.scss */
  .quiz-page .qa-list .qa {
    padding: 10px 10px 12px 16px;
  }
  /* line 596, app/assets/stylesheets/creator/quizzes/edit.scss */
  .quiz-page .qa-list .qa:first-child {
    margin-top: 10px;
  }
  /* line 599, app/assets/stylesheets/creator/quizzes/edit.scss */
  .quiz-page .qa-list .answers {
    grid-template-columns: 1fr;
  }
  /* line 606, app/assets/stylesheets/creator/quizzes/edit.scss */
  .quiz-page .qa-list.classic .answers .answer:nth-last-child(1) {
    border-bottom: none;
  }
  /* line 609, app/assets/stylesheets/creator/quizzes/edit.scss */
  .quiz-page .qa-list.classic .answers .answer:nth-last-child(2):nth-child(odd) {
    border-bottom: 1px solid var(--color-neutral-150);
  }
  /* line 614, app/assets/stylesheets/creator/quizzes/edit.scss */
  .quiz-page .qa-list-blank {
    border: none;
  }
  /* line 616, app/assets/stylesheets/creator/quizzes/edit.scss */
  .quiz-page .qa-list-blank .actions {
    flex-direction: column;
  }
}

@media (max-width: 465px) {
  /* line 626, app/assets/stylesheets/creator/quizzes/edit.scss */
  .quiz-page .quiz-page-header .quiz-title {
    word-break: break-all;
  }
}
/* line 1, app/assets/stylesheets/creator/quizzes/games/../../variables.scss */
:root {
  /* Fonts */
  --brand-font: 'Factor A', sans-serif;
  --secondary-font: 'Inter', sans-serif;
  /* Colors */
  --color-black-background: #121212;
  --color-light-background: #F8F8F7;
  --color-play-mode-background: #1D1D1D;
  --color-menu-toolbar-background: #F8F8F7;
  --color-plan-basic: #3DEB8D;
  --play-mode-background-color: #1D1D1D;
  --color-neutral-0: #FFFFFF;
  --color-neutral-100: #F8F8F7;
  --color-neutral-150: #EFEFF0;
  --color-neutral-200: #DFE1E2;
  --color-neutral-300: #C3C6C8;
  --color-neutral-400: #A9ABAE;
  --color-neutral-500: #909090;
  --color-neutral-600: #7A7A7B;
  --color-neutral-700: #5A5B59;
  --color-neutral-750: #454545;
  --color-neutral-800: #272727;
  --color-neutral-900: #181818;
  --color-neutral-950: #121212;
  --color-neutral-1000: #000000;
  /* Accents */
  --accent-green: #006C32;
  --accent-green-light: #00D663;
  --accent-violet: #815FE0;
  --accent-negative-red: #E36D74;
  /* Type Sizes */
  --display-1: 40px;
  --h1: 32px;
  --h2: 26px;
  --h3: 22px;
  --h4: 18px;
  --ui1: 17px;
  --ui1-medium: 17px;
  --ui2: 16px;
  --ui2-medium: 16px;
  --ui3: 12px;
  --digits: 24px;
  --digits-2: 28px;
  /* Radius */
  --radius-0: 8px;
  --radius-1: 10px;
  --radius-2: 18px;
  --radius-3: 22px;
  /* Modal */
  --modal-gutter: 44px;
  --modal-margin: 16px;
  --modal-margin-blocks-ui: 16px;
  --modal-margin-blocks-ui2: 10px;
  /* Toolbar */
  --toolbar-width: 180px;
  /* Padding */
  --padding-40-24: 24px;
  --padding-40-36: 36px;
  --padding-30-20: 20px;
  --padding-24-16: 16px;
  --padding-22-20: 20px;
  --padding-18-14: 14px;
  --padding-18-20: 20px;
  --padding-16-12: 12px;
  --padding-12-10: 10px;
  --padding-10-8: 8px;
  --padding-8-6: 6px;
  /* z-indexes */
  --z-index-sticky-top: 1020;
  --z-index-toolbar: 2000;
  --z-index-modal-backdrop: 2999;
  --z-index-modal: 3000;
  /* Breakpoints */
  --breakpoint-mobile: 767px;
  --breakpoint-desktop: 1200px;
}

/* Font mixins */
@media (min-width: 768px) {
  /* line 204, app/assets/stylesheets/creator/quizzes/games/../../variables.scss */
  :root {
    /* Type Sizes */
    --display-1: 60px;
    --h1: 56px;
    --h2: 38px;
    --h3: 26px;
    --h4: 19px;
    --ui1: 18px;
    --ui1-medium: 18px;
    --ui2: 16px;
    --ui2-medium: 16px;
    --ui3: 13px;
    --digits: 36px;
    --digits-2: 42px;
    /* Radius */
    --radius-0: 10px;
    --radius-1: 12px;
    --radius-2: 18px;
    --radius-3: 28px;
    /* Modal */
    --modal-gutter: 48px;
    --modal-margin: 24px;
    --modal-margin-blocks-ui: 22px;
    --modal-margin-blocks-ui2: 16px;
    /* Padding */
    --padding-40-24: 40px;
    --padding-40-36: 40px;
    --padding-30-20: 30px;
    --padding-24-16: 24px;
    --padding-22-20: 22px;
    --padding-18-14: 18px;
    --padding-18-20: 18px;
    --padding-16-12: 16px;
    --padding-12-10: 12px;
    --padding-10-8: 10px;
    --padding-8-6: 8px;
  }
}

/* line 3, app/assets/stylesheets/creator/quizzes/games/_stats.scss */
.game-stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: var(--padding-24-16);
  border-radius: var(--radius-2);
  border: 1px solid var(--color-neutral-150);
  margin-top: 10px;
}

/* line 11, app/assets/stylesheets/creator/quizzes/games/_stats.scss */
.game-stats > div {
  padding: 0 12px;
  border-right: 1px solid var(--color-neutral-150);
}

/* line 15, app/assets/stylesheets/creator/quizzes/games/_stats.scss */
.game-stats > div:first-child {
  padding-left: 0;
}

/* line 18, app/assets/stylesheets/creator/quizzes/games/_stats.scss */
.game-stats > div:last-child {
  padding-right: 0;
  border-right: none;
}

/* line 22, app/assets/stylesheets/creator/quizzes/games/_stats.scss */
.game-stats .header {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  font-variation-settings: 'wght' 430, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-400);
}

/* line 26, app/assets/stylesheets/creator/quizzes/games/_stats.scss */
.game-stats .value {
  font-family: "Factor A";
  font-size: var(--digits-2);
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  /* 42px */
  letter-spacing: -0.63px;
  color: var(--color-neutral-800);
  margin-top: 6px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  gap: 6px;
}

/* line 36, app/assets/stylesheets/creator/quizzes/games/_stats.scss */
.game-stats .progress {
  width: 44px;
}

@media (max-width: 767px) {
  /* line 42, app/assets/stylesheets/creator/quizzes/games/_stats.scss */
  .game-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 20px;
  }
  /* line 46, app/assets/stylesheets/creator/quizzes/games/_stats.scss */
  .game-stats > div {
    border: none;
    padding: 0;
  }
}
/* line 1, app/assets/stylesheets/creator/quizzes/games/../../variables.scss */
:root {
  /* Fonts */
  --brand-font: 'Factor A', sans-serif;
  --secondary-font: 'Inter', sans-serif;
  /* Colors */
  --color-black-background: #121212;
  --color-light-background: #F8F8F7;
  --color-play-mode-background: #1D1D1D;
  --color-menu-toolbar-background: #F8F8F7;
  --color-plan-basic: #3DEB8D;
  --play-mode-background-color: #1D1D1D;
  --color-neutral-0: #FFFFFF;
  --color-neutral-100: #F8F8F7;
  --color-neutral-150: #EFEFF0;
  --color-neutral-200: #DFE1E2;
  --color-neutral-300: #C3C6C8;
  --color-neutral-400: #A9ABAE;
  --color-neutral-500: #909090;
  --color-neutral-600: #7A7A7B;
  --color-neutral-700: #5A5B59;
  --color-neutral-750: #454545;
  --color-neutral-800: #272727;
  --color-neutral-900: #181818;
  --color-neutral-950: #121212;
  --color-neutral-1000: #000000;
  /* Accents */
  --accent-green: #006C32;
  --accent-green-light: #00D663;
  --accent-violet: #815FE0;
  --accent-negative-red: #E36D74;
  /* Type Sizes */
  --display-1: 40px;
  --h1: 32px;
  --h2: 26px;
  --h3: 22px;
  --h4: 18px;
  --ui1: 17px;
  --ui1-medium: 17px;
  --ui2: 16px;
  --ui2-medium: 16px;
  --ui3: 12px;
  --digits: 24px;
  --digits-2: 28px;
  /* Radius */
  --radius-0: 8px;
  --radius-1: 10px;
  --radius-2: 18px;
  --radius-3: 22px;
  /* Modal */
  --modal-gutter: 44px;
  --modal-margin: 16px;
  --modal-margin-blocks-ui: 16px;
  --modal-margin-blocks-ui2: 10px;
  /* Toolbar */
  --toolbar-width: 180px;
  /* Padding */
  --padding-40-24: 24px;
  --padding-40-36: 36px;
  --padding-30-20: 20px;
  --padding-24-16: 16px;
  --padding-22-20: 20px;
  --padding-18-14: 14px;
  --padding-18-20: 20px;
  --padding-16-12: 12px;
  --padding-12-10: 10px;
  --padding-10-8: 8px;
  --padding-8-6: 6px;
  /* z-indexes */
  --z-index-sticky-top: 1020;
  --z-index-toolbar: 2000;
  --z-index-modal-backdrop: 2999;
  --z-index-modal: 3000;
  /* Breakpoints */
  --breakpoint-mobile: 767px;
  --breakpoint-desktop: 1200px;
}

/* Font mixins */
@media (min-width: 768px) {
  /* line 204, app/assets/stylesheets/creator/quizzes/games/../../variables.scss */
  :root {
    /* Type Sizes */
    --display-1: 60px;
    --h1: 56px;
    --h2: 38px;
    --h3: 26px;
    --h4: 19px;
    --ui1: 18px;
    --ui1-medium: 18px;
    --ui2: 16px;
    --ui2-medium: 16px;
    --ui3: 13px;
    --digits: 36px;
    --digits-2: 42px;
    /* Radius */
    --radius-0: 10px;
    --radius-1: 12px;
    --radius-2: 18px;
    --radius-3: 28px;
    /* Modal */
    --modal-gutter: 48px;
    --modal-margin: 24px;
    --modal-margin-blocks-ui: 22px;
    --modal-margin-blocks-ui2: 16px;
    /* Padding */
    --padding-40-24: 40px;
    --padding-40-36: 40px;
    --padding-30-20: 30px;
    --padding-24-16: 24px;
    --padding-22-20: 22px;
    --padding-18-14: 18px;
    --padding-18-20: 18px;
    --padding-16-12: 16px;
    --padding-12-10: 12px;
    --padding-10-8: 10px;
    --padding-8-6: 8px;
  }
}

/* line 3, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard {
  background-color: var(--play-mode-background-color);
  height: 100%;
}

/* line 7, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* line 13, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .mobile-nav {
  display: none;
}

/* line 16, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens {
  flex-grow: 1;
  flex-shrink: 1;
  max-height: calc(100% - 98px);
  padding: 24px 24px 0 24px;
  display: flex;
  flex-direction: row;
  gap: 16px;
}

/* line 26, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .spectator-view {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-2);
  background: #0F0F0F;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* line 35, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .spectator-view .body {
  position: relative;
  flex-grow: 1;
  flex-shrink: 1;
}

/* line 40, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .spectator-view .body iframe {
  width: 100%;
  height: 100%;
  border: none;
  padding-left: 26px;
  padding-right: 26px;
}

/* line 48, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .spectator-view .body .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;
  z-index: 0;
}

/* line 61, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .spectator-view .header, body.dashboard main .screens .players .header, body.dashboard main .screens .questions .header {
  font-family: 'Factor A';
  font-size: var(--h3);
  font-style: normal;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: -0.22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-neutral-0);
  width: 100%;
  padding: 16px 16px 16px 22px;
}

/* line 69, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .spectator-view .header > div, body.dashboard main .screens .players .header > div, body.dashboard main .screens .questions .header > div {
  margin: 6px 0;
}

/* line 72, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .spectator-view .header span, body.dashboard main .screens .players .header span, body.dashboard main .screens .questions .header span {
  color: rgba(255, 255, 255, 0.3);
}

/* line 75, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .spectator-view .header svg, body.dashboard main .screens .players .header svg, body.dashboard main .screens .questions .header svg {
  width: 22px;
  height: 22px;
  fill: var(--color-neutral-600);
}

/* line 80, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .spectator-view .header .button, body.dashboard main .screens .players .header .button, body.dashboard main .screens .questions .header .button {
  padding: 10px;
}

/* line 84, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .spectator-view .header .button:hover svg, body.dashboard main .screens .players .header .button:hover svg, body.dashboard main .screens .questions .header .button:hover svg {
  fill: var(--color-neutral-800);
}

/* line 91, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .controls-mobile-onscreen {
  display: none;
}

/* line 95, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players, body.dashboard main .screens .questions {
  width: 100%;
  height: 100%;
  background-color: #0F0F0F;
  border-radius: var(--radius-2);
  overflow: hidden;
  display: none;
}

/* line 104, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players .header div, body.dashboard main .screens .questions .header div {
  display: flex;
  flex-direction: row;
  gap: var(--padding-8-6);
}

/* line 112, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players.players-show, body.dashboard main .screens .questions.questions-show {
  display: flex;
  flex-direction: column;
}

/* line 118, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players .list {
  overflow-y: scroll;
  height: 100%;
  padding: 0px 24px 24px 24px;
}

/* line 122, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players .list table {
  margin-bottom: 50px;
  width: 100%;
}

/* line 126, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players .list table thead th {
  color: var(--color-neutrals-600, #7A7A7B);
  text-align: right;
  font-feature-settings: 'calt' off;
  font-family: var(--Secondary-Font);
  font-size: 13px;
  font-style: normal;
  font-weight: 440;
  line-height: 140%;
  /* 18.2px */
}

/* line 136, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players .list table thead th.balance {
  text-align: right;
  padding-right: 10px;
}

/* line 140, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players .list table thead th.bet {
  text-align: left;
}

/* line 143, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players .list table thead th.answer {
  text-align: center;
}

/* line 146, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players .list table thead th.result {
  text-align: right;
}

/* line 151, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players .list table tbody td {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

/* line 156, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players .list table tbody tr:last-child td {
  border-bottom: none;
}

/* line 159, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players .list table tbody td.position {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  font-variation-settings: 'wght' 430, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-700);
  padding-right: 10px;
  width: 1%;
}

/* line 165, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players .list table tbody td.username {
  color: var(--color-neutral-200);
  overflow: hidden;
}

/* line 169, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players .list table tbody td.balance {
  width: 1%;
  padding-left: 10px;
  padding-right: 10px;
}

/* line 174, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players .list table tbody td.bet {
  width: 1%;
}

/* line 176, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players .list table tbody td.bet div {
  min-width: 50px;
  height: 38px;
  padding: 8px 0 8px 8px;
  border-top-left-radius: var(--radius-0);
  border-bottom-left-radius: var(--radius-0);
  background: rgba(255, 255, 255, 0.07);
}

/* line 185, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players .list table tbody td.answer {
  width: 1%;
  text-align: center;
}

/* line 188, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players .list table tbody td.answer div {
  height: 38px;
  background: rgba(255, 255, 255, 0.07);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* line 195, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players .list table tbody td.answer svg {
  width: 20px;
  height: 20px;
}

/* line 200, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players .list table tbody td.answer svg.correct {
  fill: var(--accent-green-light);
}

/* line 203, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players .list table tbody td.answer svg.incorrect {
  fill: var(--color-neutral-750);
}

/* line 206, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players .list table tbody td.answer svg.null {
  fill: var(--color-neutral-750);
}

/* line 210, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players .list table tbody td.result {
  width: 1%;
}

/* line 212, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players .list table tbody td.result div {
  min-width: 50px;
  height: 38px;
  text-align: right;
  padding: 8px 8px 8px 0;
  padding-right: 8px;
  border-top-right-radius: var(--radius-0);
  border-bottom-right-radius: var(--radius-0);
  background: rgba(255, 255, 255, 0.07);
}

/* line 224, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players .list table tbody .integer {
  color: var(--color-neutral-200);
}

/* line 228, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players .list table tbody .fraction {
  color: var(--color-neutral-700);
}

/* line 237, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players.classic .bet, body.dashboard main .screens .players.classic .result {
  display: none;
}

/* line 240, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players.classic .answer div {
  background: none !important;
}

/* line 243, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .players.classic .fraction {
  display: none;
}

/* line 249, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list {
  overflow-y: scroll;
  height: 100%;
  padding: 0px 24px 24px 24px;
}

/* line 253, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table {
  margin-bottom: 50px;
  width: 100%;
}

/* line 257, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table tbody tr:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

/* line 260, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table tbody td {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  padding: 8px 0;
}

/* line 265, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table tbody tr:last-child td {
  border-bottom: none;
}

/* line 268, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table tbody td.position {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  font-variation-settings: 'wght' 430, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-700);
  padding-right: 10px;
  width: 1%;
  vertical-align: top;
}

/* line 275, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table tbody td.question {
  color: var(--color-neutral-200);
  vertical-align: top;
  width: 100%;
}

/* line 280, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table tbody tr.future td.question {
  color: var(--color-neutral-600);
}

/* line 283, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table tbody td.stats {
  width: 1%;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  width: 75px;
}

/* line 289, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table tbody td.stats .accuracy-number {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-200);
  text-align: left;
}

/* line 294, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table tbody td.stats .accuracy-bar {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 4px;
  border-radius: var(--radius-0);
  margin: 2px 0;
}

/* line 301, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table tbody td.stats .accuracy-bar .correct-bar, body.dashboard main .screens .questions .list table tbody td.stats .accuracy-bar .incorrect-bar {
  height: 100%;
}

/* line 304, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table tbody td.stats .accuracy-bar .correct-bar {
  border-top-left-radius: var(--radius-0);
  border-bottom-left-radius: var(--radius-0);
}

/* line 308, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table tbody td.stats .accuracy-bar .incorrect-bar {
  background-color: #3D2F33;
  border-top-right-radius: var(--radius-0);
  border-bottom-right-radius: var(--radius-0);
}

/* line 313, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table tbody td.stats .accuracy-bar .correct-bar-0 {
  background-color: #FF5934;
}

/* line 316, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table tbody td.stats .accuracy-bar .correct-bar-10 {
  background-color: #FF5934;
}

/* line 319, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table tbody td.stats .accuracy-bar .correct-bar-20 {
  background-color: #FF5934;
}

/* line 322, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table tbody td.stats .accuracy-bar .correct-bar-30 {
  background-color: #FFCD44;
}

/* line 325, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table tbody td.stats .accuracy-bar .correct-bar-40 {
  background-color: #FFCD44;
}

/* line 328, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table tbody td.stats .accuracy-bar .correct-bar-50 {
  background-color: #88E241;
}

/* line 331, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table tbody td.stats .accuracy-bar .correct-bar-60 {
  background-color: #88E241;
}

/* line 334, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table tbody td.stats .accuracy-bar .correct-bar-70 {
  background-color: #41E248;
}

/* line 337, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table tbody td.stats .accuracy-bar .correct-bar-80 {
  background-color: #41E248;
}

/* line 340, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table tbody td.stats .accuracy-bar .correct-bar-90 {
  background-color: #00D663;
}

/* line 343, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table tbody td.stats .accuracy-bar .correct-bar-100 {
  background-color: #00D663;
}

/* line 347, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table tbody td.stats .accuracy-players {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: var(--color-neutral-600);
}

/* line 356, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .screens .questions .list table tbody td.stats.hidden div {
  opacity: 0;
}

/* line 365, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .controls {
  margin: 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-grow: 0;
  flex-shrink: 0;
}

/* line 374, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .controls .left, body.dashboard main .controls .center, body.dashboard main .controls .right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

/* line 381, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .controls .center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* line 388, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .controls .settings .dropdown-menu, body.dashboard main .controls .invite .dropdown-menu {
  border-radius: var(--radius-2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: var(--color-neutral-0);
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.02);
  padding: 22px;
}

/* line 395, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .controls .settings .dropdown-menu .header, body.dashboard main .controls .invite .dropdown-menu .header {
  font-family: 'Factor A';
  font-size: var(--h3);
  font-style: normal;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: -0.22px;
  margin-bottom: 6px;
}

/* line 400, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .controls .settings .dropdown-menu .subheader, body.dashboard main .controls .invite .dropdown-menu .subheader {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  font-variation-settings: 'wght' 430, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-500);
  margin-bottom: 24px;
  max-width: 331px;
}

/* line 407, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .controls .settings .dropdown-menu .phases, body.dashboard main .controls .invite .dropdown-menu .phases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

/* line 412, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .controls .settings .dropdown-menu .phases .header, body.dashboard main .controls .invite .dropdown-menu .phases .header {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-800);
  margin-bottom: 4px;
}

/* line 417, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .controls .settings .dropdown-menu .phases .subheader, body.dashboard main .controls .invite .dropdown-menu .phases .subheader {
  font-family: Inter;
  font-size: var(--ui3);
  font-style: normal;
  font-weight: 440;
  line-height: 140%;
  letter-spacing: -0.12px;
  font-feature-settings: 'calt' off;
  color: var(--color-neutral-400);
  margin-bottom: 12px;
}

/* line 422, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .controls .settings .dropdown-menu .phases .switch, body.dashboard main .controls .invite .dropdown-menu .phases .switch {
  border-radius: var(--radius-1);
  background: #F0F0F0;
  display: flex;
  flex-direction: row;
}

/* line 427, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .controls .settings .dropdown-menu .phases .switch .input, body.dashboard main .controls .settings .dropdown-menu .phases .switch .manual, body.dashboard main .controls .invite .dropdown-menu .phases .switch .input, body.dashboard main .controls .invite .dropdown-menu .phases .switch .manual {
  display: flex;
  height: 42px;
  padding: 14px 10px 14px 14px;
  align-items: center;
  gap: 0.25em;
  flex: 1 0 0;
  cursor: pointer;
}

/* line 436, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .controls .settings .dropdown-menu .phases .switch .input.active, body.dashboard main .controls .settings .dropdown-menu .phases .switch .manual.active, body.dashboard main .controls .invite .dropdown-menu .phases .switch .input.active, body.dashboard main .controls .invite .dropdown-menu .phases .switch .manual.active {
  border-radius: var(--radius-1);
  border: 1px solid var(--color-neutral-200);
  background: var(--color-neutral-0);
}

/* line 441, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .controls .settings .dropdown-menu .phases .switch .input, body.dashboard main .controls .invite .dropdown-menu .phases .switch .input {
  justify-content: flex-start;
}

/* line 444, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .controls .settings .dropdown-menu .phases .switch .manual, body.dashboard main .controls .invite .dropdown-menu .phases .switch .manual {
  justify-content: center;
}

/* line 448, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .controls .settings .dropdown-menu .phases input, body.dashboard main .controls .invite .dropdown-menu .phases input {
  border: 0;
  width: 30px;
  background: none;
}

/* line 453, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .controls .settings .dropdown-menu .phases input:focus, body.dashboard main .controls .invite .dropdown-menu .phases input:focus {
  outline: none;
}

/* line 461, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .controls .settings .dropdown-menu {
  width: 90vw;
  max-width: 500px;
}

/* line 466, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .controls .invite .dropdown-menu {
  width: 90vw;
  max-width: 375px;
}

/* line 470, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .controls .invite .dropdown-menu .button-copy-link {
  width: 100%;
  margin: 24px 0;
}

/* line 475, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .controls .invite .dropdown-menu .qr-code {
  padding: 50px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--radius-2);
  border: 1px solid rgba(0, 0, 0, 0.07);
}

/* line 483, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .controls .invite .dropdown-menu .qr-code svg {
  width: 185px;
  height: 185px;
}

/* line 490, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .controls .button-restart {
  margin-left: 24px;
}

/* line 495, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard main .controls-mobile {
  display: none;
}

/* line 500, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard .button {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  height: 53px;
}

/* line 507, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard .button-icon {
  padding: 15px;
}

/* line 511, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard .button-primary {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  border: none;
  background: var(--accent-violet);
  color: var(--color-neutral-0);
}

/* line 516, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard .button-primary svg {
  fill: var(--color-neutral-0);
}

/* line 521, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard .button-primary:hover {
  border: none;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.15) 100%), var(--accent-green-light);
}

/* line 526, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard .button-secondary {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-neutral-400);
}

/* line 531, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard .button-secondary svg {
  height: 22px;
  width: 22px;
  fill: var(--color-neutral-400);
}

/* line 538, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard .button-round {
  width: 50px;
  height: 50px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* line 547, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard .button-secondary.active {
  background: var(--color-neutral-100);
  color: var(--color-neutral-800);
}

/* line 550, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard .button-secondary.active svg {
  fill: var(--color-neutral-800);
}

/* line 555, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard .button-secondary:hover {
  background: rgba(255, 255, 255, 0.18);
  color: var(--color-neutral-200);
}

/* line 558, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard .button-secondary:hover svg {
  fill: var(--color-neutral-200);
}

/* line 563, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard .button-primary[disabled="true"] {
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-neutral-400);
  background: transparent;
  cursor: not-allowed;
}

/* line 568, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard .button-primary[disabled="true"] svg {
  fill: var(--color-neutral-400);
}

/* line 573, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard .button-secondary[disabled="true"] {
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-neutral-400);
  background: transparent;
  cursor: not-allowed;
}

/* line 578, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard .button-secondary[disabled="true"] svg {
  fill: var(--color-neutral-400);
}

/* line 583, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard .button-tretiary {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-neutral-800);
}

/* line 588, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard .button-tretiary svg {
  fill: var(--color-neutral-800);
}

/* line 592, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
body.dashboard .button-tretiary:hover {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  border: none;
  background: rgba(0, 0, 0, 0.1);
}

@media (max-width: 1120px) {
  /* line 601, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
  body.dashboard main {
    min-height: 100vh;
    height: auto;
    padding-bottom: 90px;
  }
  /* line 605, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
  body.dashboard main .mobile-nav {
    font-family: Inter;
    font-size: var(--ui1-medium);
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    letter-spacing: -0.18px;
    font-variation-settings: 'wght' 530, 'opsz' 22;
    font-feature-settings: 'cv06' on, 'cv11' on;
    letter-spacing: 0.002em;
    height: 58px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    color: var(--color-neutral-600);
  }
  /* line 613, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
  body.dashboard main .mobile-nav svg {
    width: 22px;
    height: 22px;
    fill: var(--color-neutral-600);
  }
  /* line 618, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
  body.dashboard main .mobile-nav .center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  /* line 624, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
  body.dashboard main .screens {
    flex-grow: 0;
    flex-shrink: 0;
    flex-direction: column;
    gap: 16px;
    min-height: 100vh;
    padding-top: 10px;
  }
  /* line 631, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
  body.dashboard main .screens .players, body.dashboard main .screens .questions {
    height: auto;
  }
  /* line 633, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
  body.dashboard main .screens .players .header, body.dashboard main .screens .questions .header {
    cursor: pointer;
  }
  /* line 637, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
  body.dashboard main .screens .players .list table, body.dashboard main .screens .questions .list table {
    margin-bottom: 0;
  }
  /* line 642, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
  body.dashboard main .screens .players {
    display: flex;
  }
  /* line 644, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
  body.dashboard main .screens .players .list {
    display: none;
  }
  /* line 649, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
  body.dashboard main .screens .players.players-show .list {
    display: flex;
  }
  /* line 653, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
  body.dashboard main .screens .questions {
    display: flex;
  }
  /* line 655, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
  body.dashboard main .screens .questions .list {
    display: none;
  }
  /* line 660, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
  body.dashboard main .screens .questions.questions-show .list {
    display: flex;
  }
  /* line 664, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
  body.dashboard main .screens .spectator-view {
    height: calc(100vh - 58px - 90px - 24px);
  }
  /* line 667, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
  body.dashboard main .screens .players, body.dashboard main .screens .questions {
    flex-shrink: 0;
  }
  /* line 670, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
  body.dashboard main .screens .controls-mobile-onscreen {
    display: flex;
  }
  /* line 672, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
  body.dashboard main .screens .controls-mobile-onscreen a {
    width: 100%;
    margin-bottom: 100px;
  }
  /* line 680, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
  body.dashboard main .controls .settings .dropdown-menu, body.dashboard main .controls .invite .dropdown-menu {
    width: calc(100vw - 32px);
    max-width: none;
    position: fixed !important;
    bottom: calc(90px + 8px) !important;
    left: 16px !important;
    inset: none !important;
    transform: none !important;
  }
  /* line 692, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
  body.dashboard main .controls-desktop {
    display: none;
  }
  /* line 695, app/assets/stylesheets/creator/quizzes/games/dashboard.scss */
  body.dashboard main .controls-mobile {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 90px;
    padding: 16px;
    margin: 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
}
/* line 1, app/assets/stylesheets/creator/quizzes/games/../../variables.scss */
:root {
  /* Fonts */
  --brand-font: 'Factor A', sans-serif;
  --secondary-font: 'Inter', sans-serif;
  /* Colors */
  --color-black-background: #121212;
  --color-light-background: #F8F8F7;
  --color-play-mode-background: #1D1D1D;
  --color-menu-toolbar-background: #F8F8F7;
  --color-plan-basic: #3DEB8D;
  --play-mode-background-color: #1D1D1D;
  --color-neutral-0: #FFFFFF;
  --color-neutral-100: #F8F8F7;
  --color-neutral-150: #EFEFF0;
  --color-neutral-200: #DFE1E2;
  --color-neutral-300: #C3C6C8;
  --color-neutral-400: #A9ABAE;
  --color-neutral-500: #909090;
  --color-neutral-600: #7A7A7B;
  --color-neutral-700: #5A5B59;
  --color-neutral-750: #454545;
  --color-neutral-800: #272727;
  --color-neutral-900: #181818;
  --color-neutral-950: #121212;
  --color-neutral-1000: #000000;
  /* Accents */
  --accent-green: #006C32;
  --accent-green-light: #00D663;
  --accent-violet: #815FE0;
  --accent-negative-red: #E36D74;
  /* Type Sizes */
  --display-1: 40px;
  --h1: 32px;
  --h2: 26px;
  --h3: 22px;
  --h4: 18px;
  --ui1: 17px;
  --ui1-medium: 17px;
  --ui2: 16px;
  --ui2-medium: 16px;
  --ui3: 12px;
  --digits: 24px;
  --digits-2: 28px;
  /* Radius */
  --radius-0: 8px;
  --radius-1: 10px;
  --radius-2: 18px;
  --radius-3: 22px;
  /* Modal */
  --modal-gutter: 44px;
  --modal-margin: 16px;
  --modal-margin-blocks-ui: 16px;
  --modal-margin-blocks-ui2: 10px;
  /* Toolbar */
  --toolbar-width: 180px;
  /* Padding */
  --padding-40-24: 24px;
  --padding-40-36: 36px;
  --padding-30-20: 20px;
  --padding-24-16: 16px;
  --padding-22-20: 20px;
  --padding-18-14: 14px;
  --padding-18-20: 20px;
  --padding-16-12: 12px;
  --padding-12-10: 10px;
  --padding-10-8: 8px;
  --padding-8-6: 6px;
  /* z-indexes */
  --z-index-sticky-top: 1020;
  --z-index-toolbar: 2000;
  --z-index-modal-backdrop: 2999;
  --z-index-modal: 3000;
  /* Breakpoints */
  --breakpoint-mobile: 767px;
  --breakpoint-desktop: 1200px;
}

/* Font mixins */
@media (min-width: 768px) {
  /* line 204, app/assets/stylesheets/creator/quizzes/games/../../variables.scss */
  :root {
    /* Type Sizes */
    --display-1: 60px;
    --h1: 56px;
    --h2: 38px;
    --h3: 26px;
    --h4: 19px;
    --ui1: 18px;
    --ui1-medium: 18px;
    --ui2: 16px;
    --ui2-medium: 16px;
    --ui3: 13px;
    --digits: 36px;
    --digits-2: 42px;
    /* Radius */
    --radius-0: 10px;
    --radius-1: 12px;
    --radius-2: 18px;
    --radius-3: 28px;
    /* Modal */
    --modal-gutter: 48px;
    --modal-margin: 24px;
    --modal-margin-blocks-ui: 22px;
    --modal-margin-blocks-ui2: 16px;
    /* Padding */
    --padding-40-24: 40px;
    --padding-40-36: 40px;
    --padding-30-20: 30px;
    --padding-24-16: 24px;
    --padding-22-20: 22px;
    --padding-18-14: 18px;
    --padding-18-20: 18px;
    --padding-16-12: 16px;
    --padding-12-10: 12px;
    --padding-10-8: 10px;
    --padding-8-6: 8px;
  }
}

/* line 4, app/assets/stylesheets/creator/quizzes/games/index.scss */
.quiz-page .games-list {
  width: 100%;
  margin-top: 47px;
}

/* line 7, app/assets/stylesheets/creator/quizzes/games/index.scss */
.quiz-page .games-list table {
  width: 100%;
}

/* line 10, app/assets/stylesheets/creator/quizzes/games/index.scss */
.quiz-page .games-list table thead th.name {
  font-family: 'Factor A';
  font-size: var(--h3);
  font-style: normal;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: -0.22px;
  color: var(--color-neutral-800);
  padding-left: 0;
}

/* line 15, app/assets/stylesheets/creator/quizzes/games/index.scss */
.quiz-page .games-list table thead th {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  font-variation-settings: 'wght' 430, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-400);
  padding-left: 14px;
  padding-top: 16px;
  padding-bottom: 16px;
}

/* line 24, app/assets/stylesheets/creator/quizzes/games/index.scss */
.quiz-page .games-list table tbody tr {
  cursor: pointer;
}

/* line 27, app/assets/stylesheets/creator/quizzes/games/index.scss */
.quiz-page .games-list table tbody td {
  padding-top: 16px;
  padding-bottom: 16px;
  padding-left: 14px;
  border-top: 1px solid var(--color-neutral-150);
  vertical-align: top;
}

/* line 33, app/assets/stylesheets/creator/quizzes/games/index.scss */
.quiz-page .games-list table tbody td .progress {
  width: 60px;
  margin-top: 5px;
}

/* line 38, app/assets/stylesheets/creator/quizzes/games/index.scss */
.quiz-page .games-list table tbody td.name {
  display: flex;
  flex-direction: row;
  gap: var(--padding-16-12);
  padding-left: 0;
}

/* line 43, app/assets/stylesheets/creator/quizzes/games/index.scss */
.quiz-page .games-list table tbody td.name .quiz-cover {
  flex-shrink: 0;
  flex-grow: 0;
}

/* line 46, app/assets/stylesheets/creator/quizzes/games/index.scss */
.quiz-page .games-list table tbody td.name .quiz-cover img {
  width: 66px;
  height: 100px;
}

/* line 51, app/assets/stylesheets/creator/quizzes/games/index.scss */
.quiz-page .games-list table tbody td.name .quiz-info {
  font-family: Inter;
  font-size: var(--ui1-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.18px;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-750);
  flex-shrink: 1;
  flex-grow: 1;
}

/* line 57, app/assets/stylesheets/creator/quizzes/games/index.scss */
.quiz-page .games-list table tbody td.name .quiz-info .title {
  word-break: break-all;
}

/* line 61, app/assets/stylesheets/creator/quizzes/games/index.scss */
.quiz-page .games-list table tbody td.name .quiz-info .date-embedded {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-500);
  margin-bottom: 4px;
  display: none;
}

/* line 69, app/assets/stylesheets/creator/quizzes/games/index.scss */
.quiz-page .games-list table tbody td.date {
  width: 200px;
}

/* line 72, app/assets/stylesheets/creator/quizzes/games/index.scss */
.quiz-page .games-list table tbody td.accuracy {
  width: 130px;
}

/* line 75, app/assets/stylesheets/creator/quizzes/games/index.scss */
.quiz-page .games-list table tbody td.players {
  width: 110px;
}

/* line 82, app/assets/stylesheets/creator/quizzes/games/index.scss */
.quiz-page .no-games-played {
  border-radius: var(--radius-2);
  border: 1px solid var(--color-neutral-150);
  padding: 80px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--padding-8-6);
  margin-top: 16px;
  text-align: center;
}

/* line 94, app/assets/stylesheets/creator/quizzes/games/index.scss */
.quiz-page .no-games-played .header {
  font-family: "Factor A";
  font-size: var(--h2);
  font-style: normal;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: -0.38px;
  font-feature-settings: 'ss02' on;
  color: var(--color-neutral-900);
}

/* line 98, app/assets/stylesheets/creator/quizzes/games/index.scss */
.quiz-page .no-games-played .subheader {
  font-family: Inter;
  font-size: var(--ui1);
  font-style: normal;
  font-weight: 450;
  line-height: 140%;
  letter-spacing: 0.002em;
  font-variation-settings: 'wght' 450, 'opsz' 24;
  font-feature-settings: 'cv06' on, 'cv11' on;
  color: var(--color-neutral-500);
}

@media (max-width: 767px) {
  /* line 107, app/assets/stylesheets/creator/quizzes/games/index.scss */
  .quiz-page .quiz-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 20px;
  }
  /* line 111, app/assets/stylesheets/creator/quizzes/games/index.scss */
  .quiz-page .quiz-stats > div {
    border: none;
    padding: 0;
  }
  /* line 117, app/assets/stylesheets/creator/quizzes/games/index.scss */
  .quiz-page .no-games-played {
    border: none;
    padding: 40px 16px;
  }
  /* line 122, app/assets/stylesheets/creator/quizzes/games/index.scss */
  .quiz-page .games-list {
    margin-top: 30px;
  }
  /* line 126, app/assets/stylesheets/creator/quizzes/games/index.scss */
  .quiz-page .games-list table tbody td.name .quiz-info .date-embedded {
    display: block;
  }
  /* line 131, app/assets/stylesheets/creator/quizzes/games/index.scss */
  .quiz-page .games-list table .date, .quiz-page .games-list table .accuracy, .quiz-page .games-list table .players {
    display: none;
  }
}
/* line 1, app/assets/stylesheets/creator/quizzes/games/../../variables.scss */
:root {
  /* Fonts */
  --brand-font: 'Factor A', sans-serif;
  --secondary-font: 'Inter', sans-serif;
  /* Colors */
  --color-black-background: #121212;
  --color-light-background: #F8F8F7;
  --color-play-mode-background: #1D1D1D;
  --color-menu-toolbar-background: #F8F8F7;
  --color-plan-basic: #3DEB8D;
  --play-mode-background-color: #1D1D1D;
  --color-neutral-0: #FFFFFF;
  --color-neutral-100: #F8F8F7;
  --color-neutral-150: #EFEFF0;
  --color-neutral-200: #DFE1E2;
  --color-neutral-300: #C3C6C8;
  --color-neutral-400: #A9ABAE;
  --color-neutral-500: #909090;
  --color-neutral-600: #7A7A7B;
  --color-neutral-700: #5A5B59;
  --color-neutral-750: #454545;
  --color-neutral-800: #272727;
  --color-neutral-900: #181818;
  --color-neutral-950: #121212;
  --color-neutral-1000: #000000;
  /* Accents */
  --accent-green: #006C32;
  --accent-green-light: #00D663;
  --accent-violet: #815FE0;
  --accent-negative-red: #E36D74;
  /* Type Sizes */
  --display-1: 40px;
  --h1: 32px;
  --h2: 26px;
  --h3: 22px;
  --h4: 18px;
  --ui1: 17px;
  --ui1-medium: 17px;
  --ui2: 16px;
  --ui2-medium: 16px;
  --ui3: 12px;
  --digits: 24px;
  --digits-2: 28px;
  /* Radius */
  --radius-0: 8px;
  --radius-1: 10px;
  --radius-2: 18px;
  --radius-3: 22px;
  /* Modal */
  --modal-gutter: 44px;
  --modal-margin: 16px;
  --modal-margin-blocks-ui: 16px;
  --modal-margin-blocks-ui2: 10px;
  /* Toolbar */
  --toolbar-width: 180px;
  /* Padding */
  --padding-40-24: 24px;
  --padding-40-36: 36px;
  --padding-30-20: 20px;
  --padding-24-16: 16px;
  --padding-22-20: 20px;
  --padding-18-14: 14px;
  --padding-18-20: 20px;
  --padding-16-12: 12px;
  --padding-12-10: 10px;
  --padding-10-8: 8px;
  --padding-8-6: 6px;
  /* z-indexes */
  --z-index-sticky-top: 1020;
  --z-index-toolbar: 2000;
  --z-index-modal-backdrop: 2999;
  --z-index-modal: 3000;
  /* Breakpoints */
  --breakpoint-mobile: 767px;
  --breakpoint-desktop: 1200px;
}

/* Font mixins */
@media (min-width: 768px) {
  /* line 204, app/assets/stylesheets/creator/quizzes/games/../../variables.scss */
  :root {
    /* Type Sizes */
    --display-1: 60px;
    --h1: 56px;
    --h2: 38px;
    --h3: 26px;
    --h4: 19px;
    --ui1: 18px;
    --ui1-medium: 18px;
    --ui2: 16px;
    --ui2-medium: 16px;
    --ui3: 13px;
    --digits: 36px;
    --digits-2: 42px;
    /* Radius */
    --radius-0: 10px;
    --radius-1: 12px;
    --radius-2: 18px;
    --radius-3: 28px;
    /* Modal */
    --modal-gutter: 48px;
    --modal-margin: 24px;
    --modal-margin-blocks-ui: 22px;
    --modal-margin-blocks-ui2: 16px;
    /* Padding */
    --padding-40-24: 40px;
    --padding-40-36: 40px;
    --padding-30-20: 30px;
    --padding-24-16: 24px;
    --padding-22-20: 22px;
    --padding-18-14: 18px;
    --padding-18-20: 18px;
    --padding-16-12: 16px;
    --padding-12-10: 12px;
    --padding-10-8: 10px;
    --padding-8-6: 8px;
  }
}

/* line 4, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report .header {
  font-family: 'Factor A';
  font-size: var(--h3);
  font-style: normal;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: -0.22px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* line 10, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report .header .actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--padding-10-8);
}

/* line 16, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report .header .actions .button {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
}

/* line 20, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report .header .actions .button.download svg {
  width: 16px;
  height: 19px;
  fill: var(--color-neutral-800);
}

/* line 28, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report .game-info {
  display: flex;
  flex-direction: row;
  gap: var(--padding-18-14);
  display: flex;
  flex-direction: row;
  flex-grow: 1;
  min-width: 0;
}

/* line 37, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report .game-info .quiz-cover {
  flex-shrink: 0;
}

/* line 39, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report .game-info .quiz-cover img {
  width: 66px;
  height: 100px;
}

/* line 45, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report .game-info .quiz-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--padding-10-8);
  flex-grow: 1;
  min-width: 0;
}

/* line 53, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report .game-info .quiz-info .title {
  font-family: "Factor A";
  font-size: var(--h1);
  font-style: normal;
  font-weight: 500;
  line-height: 105%;
  letter-spacing: -1.12px;
  font-feature-settings: 'ss02' on;
  color: var(--color-neutral-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 3px;
}

/* line 63, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report .game-info .quiz-info .game-status .datetime {
  font-family: Inter;
  font-size: var(--ui1-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.18px;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-900);
}

/* line 67, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report .game-info .quiz-info .game-status .datetime .time {
  color: var(--color-neutral-500);
}

/* line 74, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report .game-stats {
  margin-top: var(--padding-40-24);
  margin-bottom: 30px;
}

/* line 77, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report .game-stats .header {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  font-variation-settings: 'wght' 430, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-400);
}

/* line 83, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report .players, .game-report .questions {
  margin-top: 6px;
}

/* line 87, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report table {
  width: 100%;
  margin-bottom: 40px;
}

/* line 91, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report tbody tr:not(:last-child) {
  border-bottom: 1px solid var(--color-neutral-200);
}

/* line 95, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report thead th {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  font-variation-settings: 'wght' 430, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-400);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-neutral-200);
}

/* line 101, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report thead th.position {
  width: 1%;
}

/* line 104, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report thead th.balance {
  text-align: right;
}

/* line 107, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report thead th.answers, .game-report thead th.balance, .game-report thead th.speed {
  width: 1%;
  white-space: nowrap;
  padding-left: var(--padding-10-8);
  cursor: pointer;
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
}

/* line 115, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report thead th.answers svg, .game-report thead th.balance svg, .game-report thead th.speed svg {
  width: 14px;
  height: 20px;
  fill: var(--color-neutral-200);
  opacity: 0;
}

/* line 121, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report thead th.answers svg.active, .game-report thead th.balance svg.active, .game-report thead th.speed svg.active {
  fill: var(--color-neutral-400);
  opacity: 1;
}

/* line 125, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report thead th.answers svg.asc, .game-report thead th.balance svg.asc, .game-report thead th.speed svg.asc {
  transform: rotate(180deg);
}

/* line 129, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report thead th.accuracy, .game-report thead th.correct, .game-report thead th.incorrect {
  padding-left: 30px;
}

/* line 134, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report tbody td {
  padding-top: var(--padding-10-8);
  padding-bottom: var(--padding-10-8);
}

/* line 138, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report tbody td.position {
  font-family: Inter;
  font-size: var(--ui1);
  font-style: normal;
  font-weight: 450;
  line-height: 140%;
  letter-spacing: 0.002em;
  font-variation-settings: 'wght' 450, 'opsz' 24;
  font-feature-settings: 'cv06' on, 'cv11' on;
  white-space: nowrap;
  padding-right: var(--padding-10-8);
  color: var(--color-neutral-400);
}

/* line 143, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report tbody td.position svg {
  width: 19px;
  height: 22px;
  fill: var(--color-neutral-400);
}

/* line 149, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report tbody td.username {
  font-family: Inter;
  font-size: var(--ui1-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.18px;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-750);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* line 157, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report tbody td.questions {
  max-width: 380px;
}

/* line 160, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report tbody td.questions .question {
  border-radius: 11px;
  height: 16px;
  width: 16px;
  flex-grow: 0;
  flex-shrink: 0;
}

/* line 167, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report tbody td.questions .question.correct {
  background-color: #44E91A;
}

/* line 170, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report tbody td.questions .question.incorrect {
  background-color: rgba(0, 0, 0, 0.07);
}

/* line 173, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report tbody td.questions .question.blank {
  background-color: rgba(0, 0, 0, 0.07);
}

/* line 176, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report tbody td.questions .questions-container {
  height: 100%;
  display: flex;
  flex-direction: row;
  gap: 10px;
  overflow-x: auto;
  -ms-overflow-style: none;
  /* Internet Explorer and Edge */
  scrollbar-width: none;
  /* Firefox */
  padding: var(--padding-10-8) 0;
}

/* line 186, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report tbody td.questions .questions-container::-webkit-scrollbar {
  display: none;
}

/* line 190, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report tbody td.answers {
  font-family: Inter;
  font-size: var(--ui1);
  font-style: normal;
  font-weight: 450;
  line-height: 140%;
  letter-spacing: 0.002em;
  font-variation-settings: 'wght' 450, 'opsz' 24;
  font-feature-settings: 'cv06' on, 'cv11' on;
  color: var(--color-neutral-750);
  text-align: left;
  padding-left: var(--padding-10-8);
}

/* line 196, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report tbody td.balance {
  font-family: Inter;
  font-size: var(--ui1);
  font-style: normal;
  font-weight: 450;
  line-height: 140%;
  letter-spacing: 0.002em;
  font-variation-settings: 'wght' 450, 'opsz' 24;
  font-feature-settings: 'cv06' on, 'cv11' on;
  color: var(--color-neutral-750);
  text-align: right;
  padding-left: var(--padding-10-8);
}

/* line 202, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report tbody td.speed {
  font-family: Inter;
  font-size: var(--ui1);
  font-style: normal;
  font-weight: 450;
  line-height: 140%;
  letter-spacing: 0.002em;
  font-variation-settings: 'wght' 450, 'opsz' 24;
  font-feature-settings: 'cv06' on, 'cv11' on;
  color: var(--color-neutral-750);
  text-align: right;
  padding-left: var(--padding-10-8);
}

/* line 208, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report tbody td.question {
  font-family: Inter;
  font-size: var(--ui1-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.18px;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
}

/* line 211, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report tbody td.accuracy .progress {
  width: 60px;
}

/* line 214, app/assets/stylesheets/creator/quizzes/games/show.scss */
.game-report tbody td.accuracy, .game-report tbody td.correct, .game-report tbody td.incorrect {
  padding-left: 30px;
}

@media (max-width: 767px) {
  /* line 222, app/assets/stylesheets/creator/quizzes/games/show.scss */
  .game-report .header .actions {
    display: none;
  }
  /* line 225, app/assets/stylesheets/creator/quizzes/games/show.scss */
  .game-report table {
    margin-top: 16px;
  }
  /* line 227, app/assets/stylesheets/creator/quizzes/games/show.scss */
  .game-report table .questions, .game-report table .correct, .game-report table .incorrect {
    display: none;
  }
}
/* line 1, app/assets/stylesheets/creator/quizzes/../variables.scss */
:root {
  /* Fonts */
  --brand-font: 'Factor A', sans-serif;
  --secondary-font: 'Inter', sans-serif;
  /* Colors */
  --color-black-background: #121212;
  --color-light-background: #F8F8F7;
  --color-play-mode-background: #1D1D1D;
  --color-menu-toolbar-background: #F8F8F7;
  --color-plan-basic: #3DEB8D;
  --play-mode-background-color: #1D1D1D;
  --color-neutral-0: #FFFFFF;
  --color-neutral-100: #F8F8F7;
  --color-neutral-150: #EFEFF0;
  --color-neutral-200: #DFE1E2;
  --color-neutral-300: #C3C6C8;
  --color-neutral-400: #A9ABAE;
  --color-neutral-500: #909090;
  --color-neutral-600: #7A7A7B;
  --color-neutral-700: #5A5B59;
  --color-neutral-750: #454545;
  --color-neutral-800: #272727;
  --color-neutral-900: #181818;
  --color-neutral-950: #121212;
  --color-neutral-1000: #000000;
  /* Accents */
  --accent-green: #006C32;
  --accent-green-light: #00D663;
  --accent-violet: #815FE0;
  --accent-negative-red: #E36D74;
  /* Type Sizes */
  --display-1: 40px;
  --h1: 32px;
  --h2: 26px;
  --h3: 22px;
  --h4: 18px;
  --ui1: 17px;
  --ui1-medium: 17px;
  --ui2: 16px;
  --ui2-medium: 16px;
  --ui3: 12px;
  --digits: 24px;
  --digits-2: 28px;
  /* Radius */
  --radius-0: 8px;
  --radius-1: 10px;
  --radius-2: 18px;
  --radius-3: 22px;
  /* Modal */
  --modal-gutter: 44px;
  --modal-margin: 16px;
  --modal-margin-blocks-ui: 16px;
  --modal-margin-blocks-ui2: 10px;
  /* Toolbar */
  --toolbar-width: 180px;
  /* Padding */
  --padding-40-24: 24px;
  --padding-40-36: 36px;
  --padding-30-20: 20px;
  --padding-24-16: 16px;
  --padding-22-20: 20px;
  --padding-18-14: 14px;
  --padding-18-20: 20px;
  --padding-16-12: 12px;
  --padding-12-10: 10px;
  --padding-10-8: 8px;
  --padding-8-6: 6px;
  /* z-indexes */
  --z-index-sticky-top: 1020;
  --z-index-toolbar: 2000;
  --z-index-modal-backdrop: 2999;
  --z-index-modal: 3000;
  /* Breakpoints */
  --breakpoint-mobile: 767px;
  --breakpoint-desktop: 1200px;
}

/* Font mixins */
@media (min-width: 768px) {
  /* line 204, app/assets/stylesheets/creator/quizzes/../variables.scss */
  :root {
    /* Type Sizes */
    --display-1: 60px;
    --h1: 56px;
    --h2: 38px;
    --h3: 26px;
    --h4: 19px;
    --ui1: 18px;
    --ui1-medium: 18px;
    --ui2: 16px;
    --ui2-medium: 16px;
    --ui3: 13px;
    --digits: 36px;
    --digits-2: 42px;
    /* Radius */
    --radius-0: 10px;
    --radius-1: 12px;
    --radius-2: 18px;
    --radius-3: 28px;
    /* Modal */
    --modal-gutter: 48px;
    --modal-margin: 24px;
    --modal-margin-blocks-ui: 22px;
    --modal-margin-blocks-ui2: 16px;
    /* Padding */
    --padding-40-24: 40px;
    --padding-40-36: 40px;
    --padding-30-20: 30px;
    --padding-24-16: 24px;
    --padding-22-20: 22px;
    --padding-18-14: 18px;
    --padding-18-20: 18px;
    --padding-16-12: 16px;
    --padding-12-10: 12px;
    --padding-10-8: 10px;
    --padding-8-6: 8px;
  }
}

/* line 3, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list {
  display: flex;
  flex-direction: column;
  gap: 60px;
  margin-bottom: 40px;
}

/* line 9, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* line 16, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .header .title {
  font-family: "Factor A";
  font-size: var(--display-1);
  font-style: normal;
  font-weight: 500;
  line-height: 103%;
  letter-spacing: -1.7px;
  font-feature-settings: 'ss02' on;
}

/* line 21, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* line 26, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .empty-state .ten-icon-no-quizzes {
  width: 330px;
  height: 292px;
}

/* line 30, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .empty-state .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

/* line 37, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .empty-state .text .cta {
  font-family: "Factor A";
  font-size: var(--h2);
  font-style: normal;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: -0.38px;
  font-feature-settings: 'ss02' on;
  color: var(--color-neutral-900);
}

/* line 41, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .empty-state .text .lead {
  font-family: Inter;
  font-size: var(--ui1);
  font-style: normal;
  font-weight: 450;
  line-height: 140%;
  letter-spacing: 0.002em;
  font-variation-settings: 'wght' 450, 'opsz' 24;
  font-feature-settings: 'cv06' on, 'cv11' on;
  color: var(--color-neutral-500);
}

/* line 46, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .empty-state .actions {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

/* line 52, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .quizzes-list-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 32px 20px;
}

/* line 58, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .quizzes-list-container .quiz {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}

/* line 63, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .quizzes-list-container .quiz > a {
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* line 66, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .quizzes-list-container .quiz .button {
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* line 69, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .quizzes-list-container .quiz .state {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

/* line 73, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .quizzes-list-container .quiz .state .quiz-badge {
  display: flex;
  height: 34px;
  padding: 10px;
  margin: 10px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  border-radius: var(--radius-2);
  background: var(--color-neutral-0);
  color: var(--accent-violet);
}

/* line 87, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .quizzes-list-container .quiz .state .quiz-badge svg {
  width: 11px;
  height: 14px;
  fill: var(--accent-violet);
}

/* line 94, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .quizzes-list-container .quiz .info {
  font-family: Inter;
  font-size: var(--ui3);
  font-style: normal;
  font-weight: 440;
  line-height: 140%;
  letter-spacing: -0.12px;
  font-feature-settings: 'calt' off;
  color: var(--color-neutral-500);
  display: flex;
  flex-direction: row;
  margin-top: 6px;
}

/* line 100, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .quizzes-list-container .quiz .info .edited {
  margin-right: 20px;
}

/* line 104, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .quizzes-list-container .quiz .info .played svg {
  width: 10px;
  height: 12px;
  fill: var(--color-neutral-500);
}

/* line 111, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .quizzes-list-container .quiz .mode {
  font-family: Inter;
  font-size: var(--ui3);
  font-style: normal;
  font-weight: 440;
  line-height: 140%;
  letter-spacing: -0.12px;
  font-feature-settings: 'calt' off;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  color: var(--color-neutral-500);
}

/* line 118, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .quizzes-list-container .quiz .mode svg {
  width: 12px;
  height: 13px;
  fill: #00D663;
}

/* line 124, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .quizzes-list-container .quiz .menu {
  opacity: 0;
  position: absolute;
  top: 10px;
  right: 10px;
}

/* line 130, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .quizzes-list-container .quiz .menu > a {
  padding: 0;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* line 138, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .quizzes-list-container .quiz .menu > a svg {
  width: 19px;
  height: 19px;
}

/* line 143, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .quizzes-list-container .quiz .menu > a:hover {
  background: var(--color-neutral-0);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* line 149, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .quizzes-list-container .quiz .menu .dropdown-menu.show {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  font-variation-settings: 'wght' 430, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-200);
  display: flex;
  width: 212px;
  padding: var(--padding-8-6);
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border-radius: var(--radius-1);
  background: var(--color-neutral-800);
  box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.02);
  z-index: 1021;
}

/* line 163, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .quizzes-list-container .quiz .menu .dropdown-menu.show ul {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* line 172, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .quizzes-list-container .quiz .menu .dropdown-menu.show ul li {
  padding: var(--padding-8-6);
}

/* line 174, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .quizzes-list-container .quiz .menu .dropdown-menu.show ul li a {
  display: flex;
  flex-direction: row;
  gap: 10px;
  color: var(--color-neutral-200);
}

/* line 181, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .quizzes-list-container .quiz .menu .dropdown-menu.show ul li:hover {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

/* line 187, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .quizzes-list-container .quiz .menu .dropdown-menu.show svg {
  flex-grow: 0;
  flex-shrink: 0;
  fill: var(--color-neutral-200);
  width: 20px;
  height: 20px;
}

/* line 198, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .quizzes-list-container .quiz:hover > a {
  transform: translateY(-6px);
}

/* line 201, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .quizzes-list-container .quiz:hover .button {
  transform: translateY(-6px);
}

/* line 204, app/assets/stylesheets/creator/quizzes/index.scss */
.quizzes-list .content .quizzes-list-container .quiz:hover .menu {
  opacity: 1;
}

@media (max-width: 767px) {
  /* line 213, app/assets/stylesheets/creator/quizzes/index.scss */
  .quizzes-list {
    gap: 14px;
  }
  /* line 217, app/assets/stylesheets/creator/quizzes/index.scss */
  .quizzes-list .header .actions .button-create-quiz {
    width: 40px;
    height: 40px;
  }
  /* line 220, app/assets/stylesheets/creator/quizzes/index.scss */
  .quizzes-list .header .actions .button-create-quiz svg {
    width: 18px;
    height: 18px;
  }
  /* line 227, app/assets/stylesheets/creator/quizzes/index.scss */
  .quizzes-list .content .quizzes-list-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  /* line 232, app/assets/stylesheets/creator/quizzes/index.scss */
  .quizzes-list .content .quizzes-list-container .quiz .cover {
    width: 100%;
    height: auto;
    aspect-ratio: 6 / 9;
  }
  /* line 236, app/assets/stylesheets/creator/quizzes/index.scss */
  .quizzes-list .content .quizzes-list-container .quiz .cover svg {
    width: 100%;
    height: auto;
    aspect-ratio: 6 / 9;
  }
  /* line 242, app/assets/stylesheets/creator/quizzes/index.scss */
  .quizzes-list .content .quizzes-list-container .quiz .title {
    font-size: clamp(21px, calc(3vw + 10px), 28px);
    padding-left: clamp(15px, calc(0.5vw + 13.5px), 17px);
    padding-right: clamp(14px, calc(0.5vw + 13.5px), 15px);
    padding-bottom: clamp(14px, calc(0.25vw + 13.25px), 15px);
    word-break: break-word;
  }
  /* line 251, app/assets/stylesheets/creator/quizzes/index.scss */
  .quizzes-list .content .quizzes-list-container .quiz:hover > a {
    transform: none;
  }
  /* line 254, app/assets/stylesheets/creator/quizzes/index.scss */
  .quizzes-list .content .quizzes-list-container .quiz:hover .button {
    transform: none;
  }
  /* line 257, app/assets/stylesheets/creator/quizzes/index.scss */
  .quizzes-list .content .quizzes-list-container .quiz:hover .menu {
    opacity: 0;
  }
}

@media (max-width: 300px) {
  /* line 269, app/assets/stylesheets/creator/quizzes/index.scss */
  .quizzes-list .content .quizzes-list-container .quiz .title {
    word-break: break-all;
  }
}
/* line 1, app/assets/stylesheets/creator/quizzes/../variables.scss */
:root {
  /* Fonts */
  --brand-font: 'Factor A', sans-serif;
  --secondary-font: 'Inter', sans-serif;
  /* Colors */
  --color-black-background: #121212;
  --color-light-background: #F8F8F7;
  --color-play-mode-background: #1D1D1D;
  --color-menu-toolbar-background: #F8F8F7;
  --color-plan-basic: #3DEB8D;
  --play-mode-background-color: #1D1D1D;
  --color-neutral-0: #FFFFFF;
  --color-neutral-100: #F8F8F7;
  --color-neutral-150: #EFEFF0;
  --color-neutral-200: #DFE1E2;
  --color-neutral-300: #C3C6C8;
  --color-neutral-400: #A9ABAE;
  --color-neutral-500: #909090;
  --color-neutral-600: #7A7A7B;
  --color-neutral-700: #5A5B59;
  --color-neutral-750: #454545;
  --color-neutral-800: #272727;
  --color-neutral-900: #181818;
  --color-neutral-950: #121212;
  --color-neutral-1000: #000000;
  /* Accents */
  --accent-green: #006C32;
  --accent-green-light: #00D663;
  --accent-violet: #815FE0;
  --accent-negative-red: #E36D74;
  /* Type Sizes */
  --display-1: 40px;
  --h1: 32px;
  --h2: 26px;
  --h3: 22px;
  --h4: 18px;
  --ui1: 17px;
  --ui1-medium: 17px;
  --ui2: 16px;
  --ui2-medium: 16px;
  --ui3: 12px;
  --digits: 24px;
  --digits-2: 28px;
  /* Radius */
  --radius-0: 8px;
  --radius-1: 10px;
  --radius-2: 18px;
  --radius-3: 22px;
  /* Modal */
  --modal-gutter: 44px;
  --modal-margin: 16px;
  --modal-margin-blocks-ui: 16px;
  --modal-margin-blocks-ui2: 10px;
  /* Toolbar */
  --toolbar-width: 180px;
  /* Padding */
  --padding-40-24: 24px;
  --padding-40-36: 36px;
  --padding-30-20: 20px;
  --padding-24-16: 16px;
  --padding-22-20: 20px;
  --padding-18-14: 14px;
  --padding-18-20: 20px;
  --padding-16-12: 12px;
  --padding-12-10: 10px;
  --padding-10-8: 8px;
  --padding-8-6: 6px;
  /* z-indexes */
  --z-index-sticky-top: 1020;
  --z-index-toolbar: 2000;
  --z-index-modal-backdrop: 2999;
  --z-index-modal: 3000;
  /* Breakpoints */
  --breakpoint-mobile: 767px;
  --breakpoint-desktop: 1200px;
}

/* Font mixins */
@media (min-width: 768px) {
  /* line 204, app/assets/stylesheets/creator/quizzes/../variables.scss */
  :root {
    /* Type Sizes */
    --display-1: 60px;
    --h1: 56px;
    --h2: 38px;
    --h3: 26px;
    --h4: 19px;
    --ui1: 18px;
    --ui1-medium: 18px;
    --ui2: 16px;
    --ui2-medium: 16px;
    --ui3: 13px;
    --digits: 36px;
    --digits-2: 42px;
    /* Radius */
    --radius-0: 10px;
    --radius-1: 12px;
    --radius-2: 18px;
    --radius-3: 28px;
    /* Modal */
    --modal-gutter: 48px;
    --modal-margin: 24px;
    --modal-margin-blocks-ui: 22px;
    --modal-margin-blocks-ui2: 16px;
    /* Padding */
    --padding-40-24: 40px;
    --padding-40-36: 40px;
    --padding-30-20: 30px;
    --padding-24-16: 24px;
    --padding-22-20: 22px;
    --padding-18-14: 18px;
    --padding-18-20: 18px;
    --padding-16-12: 16px;
    --padding-12-10: 12px;
    --padding-10-8: 10px;
    --padding-8-6: 8px;
  }
}

/* line 3, app/assets/stylesheets/creator/quizzes/nav.scss */
.quiz-nav {
  padding: 12px 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: var(--color-neutral-0);
}

/* line 11, app/assets/stylesheets/creator/quizzes/nav.scss */
.quiz-nav .button {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
}

/* line 15, app/assets/stylesheets/creator/quizzes/nav.scss */
.quiz-nav .links {
  font-family: 'Factor A';
  font-size: var(--h3);
  font-style: normal;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: -0.22px;
  display: flex;
  flex-direction: row;
  gap: var(--padding-40-24);
}

/* line 21, app/assets/stylesheets/creator/quizzes/nav.scss */
.quiz-nav .links a {
  color: var(--color-neutral-500);
}

/* line 24, app/assets/stylesheets/creator/quizzes/nav.scss */
.quiz-nav .links a.active {
  color: var(--color-neutral-800);
  pointer-events: none;
  cursor: default;
}

/* line 29, app/assets/stylesheets/creator/quizzes/nav.scss */
.quiz-nav .links a:not(.active):hover {
  color: var(--color-neutral-600);
}

/* line 34, app/assets/stylesheets/creator/quizzes/nav.scss */
.quiz-nav .actions {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

/* line 40, app/assets/stylesheets/creator/quizzes/nav.scss */
.quiz-nav .actions a.reorder .text-done {
  display: none;
}

/* line 46, app/assets/stylesheets/creator/quizzes/nav.scss */
.quiz-nav .actions a.reorder.reordering .text-done {
  display: block;
}

/* line 49, app/assets/stylesheets/creator/quizzes/nav.scss */
.quiz-nav .actions a.reorder.reordering .text-reorder {
  display: none;
}

/* line 54, app/assets/stylesheets/creator/quizzes/nav.scss */
.quiz-nav .actions a.more {
  padding: 0 11px;
}

/* line 58, app/assets/stylesheets/creator/quizzes/nav.scss */
.quiz-nav .actions a.ai {
  background-color: var(--accent-violet);
}

/* line 63, app/assets/stylesheets/creator/quizzes/nav.scss */
.quiz-nav .actions div.more .dropdown-menu .hide-answers {
  display: flex;
}

/* line 66, app/assets/stylesheets/creator/quizzes/nav.scss */
.quiz-nav .actions div.more .dropdown-menu .show-answers {
  display: none;
}

/* line 71, app/assets/stylesheets/creator/quizzes/nav.scss */
.quiz-nav .actions .ten-icon-reorder {
  width: 23px;
  height: 19px;
  fill: var(--color-neutral-700);
}

/* line 77, app/assets/stylesheets/creator/quizzes/nav.scss */
.quiz-nav .actions .ten-icon-plus {
  width: 17px;
  height: 19px;
  fill: var(--color-neutral-100);
}

/* line 83, app/assets/stylesheets/creator/quizzes/nav.scss */
.quiz-nav .actions .ten-icon-more {
  width: 18px;
  height: 18px;
  fill: var(--color-neutral-700);
}

/* line 94, app/assets/stylesheets/creator/quizzes/nav.scss */
body.hide-answers .quiz-nav .more .dropdown-menu .hide-answers {
  display: none;
}

/* line 97, app/assets/stylesheets/creator/quizzes/nav.scss */
body.hide-answers .quiz-nav .more .dropdown-menu .show-answers {
  display: flex;
}

@media (max-width: 767px) {
  /* line 104, app/assets/stylesheets/creator/quizzes/nav.scss */
  .quiz-nav {
    flex-direction: column;
    align-items: start;
    padding: 0;
  }
  /* line 108, app/assets/stylesheets/creator/quizzes/nav.scss */
  .quiz-nav .links {
    width: calc(100% + 32px);
    margin-left: -16px;
    margin-right: -16px;
    border-bottom: 1px solid var(--color-neutral-200);
    padding: 16px;
  }
  /* line 115, app/assets/stylesheets/creator/quizzes/nav.scss */
  .quiz-nav .actions {
    width: 100%;
    padding: 14px 0 12px 0;
  }
  /* line 118, app/assets/stylesheets/creator/quizzes/nav.scss */
  .quiz-nav .actions .more {
    margin-left: auto;
    order: 2;
  }
  /* line 123, app/assets/stylesheets/creator/quizzes/nav.scss */
  .quiz-nav .actions .reorder {
    order: 1;
  }
  /* line 127, app/assets/stylesheets/creator/quizzes/nav.scss */
  .quiz-nav .actions .add-question {
    order: 0;
  }
}

@media (max-width: 357px) {
  /* line 136, app/assets/stylesheets/creator/quizzes/nav.scss */
  .quiz-nav .actions .more {
    display: none;
  }
}
/* line 1, app/assets/stylesheets/creator/variables.scss */
:root {
  /* Fonts */
  --brand-font: 'Factor A', sans-serif;
  --secondary-font: 'Inter', sans-serif;
  /* Colors */
  --color-black-background: #121212;
  --color-light-background: #F8F8F7;
  --color-play-mode-background: #1D1D1D;
  --color-menu-toolbar-background: #F8F8F7;
  --color-plan-basic: #3DEB8D;
  --play-mode-background-color: #1D1D1D;
  --color-neutral-0: #FFFFFF;
  --color-neutral-100: #F8F8F7;
  --color-neutral-150: #EFEFF0;
  --color-neutral-200: #DFE1E2;
  --color-neutral-300: #C3C6C8;
  --color-neutral-400: #A9ABAE;
  --color-neutral-500: #909090;
  --color-neutral-600: #7A7A7B;
  --color-neutral-700: #5A5B59;
  --color-neutral-750: #454545;
  --color-neutral-800: #272727;
  --color-neutral-900: #181818;
  --color-neutral-950: #121212;
  --color-neutral-1000: #000000;
  /* Accents */
  --accent-green: #006C32;
  --accent-green-light: #00D663;
  --accent-violet: #815FE0;
  --accent-negative-red: #E36D74;
  /* Type Sizes */
  --display-1: 40px;
  --h1: 32px;
  --h2: 26px;
  --h3: 22px;
  --h4: 18px;
  --ui1: 17px;
  --ui1-medium: 17px;
  --ui2: 16px;
  --ui2-medium: 16px;
  --ui3: 12px;
  --digits: 24px;
  --digits-2: 28px;
  /* Radius */
  --radius-0: 8px;
  --radius-1: 10px;
  --radius-2: 18px;
  --radius-3: 22px;
  /* Modal */
  --modal-gutter: 44px;
  --modal-margin: 16px;
  --modal-margin-blocks-ui: 16px;
  --modal-margin-blocks-ui2: 10px;
  /* Toolbar */
  --toolbar-width: 180px;
  /* Padding */
  --padding-40-24: 24px;
  --padding-40-36: 36px;
  --padding-30-20: 20px;
  --padding-24-16: 16px;
  --padding-22-20: 20px;
  --padding-18-14: 14px;
  --padding-18-20: 20px;
  --padding-16-12: 12px;
  --padding-12-10: 10px;
  --padding-10-8: 8px;
  --padding-8-6: 6px;
  /* z-indexes */
  --z-index-sticky-top: 1020;
  --z-index-toolbar: 2000;
  --z-index-modal-backdrop: 2999;
  --z-index-modal: 3000;
  /* Breakpoints */
  --breakpoint-mobile: 767px;
  --breakpoint-desktop: 1200px;
}

/* Font mixins */
@media (min-width: 768px) {
  /* line 204, app/assets/stylesheets/creator/variables.scss */
  :root {
    /* Type Sizes */
    --display-1: 60px;
    --h1: 56px;
    --h2: 38px;
    --h3: 26px;
    --h4: 19px;
    --ui1: 18px;
    --ui1-medium: 18px;
    --ui2: 16px;
    --ui2-medium: 16px;
    --ui3: 13px;
    --digits: 36px;
    --digits-2: 42px;
    /* Radius */
    --radius-0: 10px;
    --radius-1: 12px;
    --radius-2: 18px;
    --radius-3: 28px;
    /* Modal */
    --modal-gutter: 48px;
    --modal-margin: 24px;
    --modal-margin-blocks-ui: 22px;
    --modal-margin-blocks-ui2: 16px;
    /* Padding */
    --padding-40-24: 40px;
    --padding-40-36: 40px;
    --padding-30-20: 30px;
    --padding-24-16: 24px;
    --padding-22-20: 22px;
    --padding-18-14: 18px;
    --padding-18-20: 18px;
    --padding-16-12: 16px;
    --padding-12-10: 12px;
    --padding-10-8: 10px;
    --padding-8-6: 8px;
  }
}

/* line 4, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .title {
  font-family: "Factor A";
  font-size: var(--display-1);
  font-style: normal;
  font-weight: 500;
  line-height: 103%;
  letter-spacing: -1.7px;
  font-feature-settings: 'ss02' on;
  margin-bottom: 38px;
}

/* line 9, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .subscription-block .top {
  border-radius: var(--radius-2) var(--radius-2, 18px) 0px 0px;
  height: 301px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* line 15, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .subscription-block .top .header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: start;
  padding: 18px 20px 0 20px;
}

/* line 21, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .subscription-block .top .header .left {
  font-family: Inter;
  font-size: var(--ui1-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.18px;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transform: translateY(4px);
}

/* line 31, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .subscription-block .top .body {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: calc(42px + 18px);
}

/* line 38, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .subscription-block .top .body .header {
  font-family: "Factor A";
  font-size: var(--h1);
  font-style: normal;
  font-weight: 500;
  line-height: 105%;
  letter-spacing: -1.12px;
  font-feature-settings: 'ss02' on;
  margin-bottom: 10px;
  text-align: center;
}

/* line 43, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .subscription-block .top .body .subheader {
  font-family: Inter;
  font-size: var(--ui1);
  font-style: normal;
  font-weight: 450;
  line-height: 140%;
  letter-spacing: 0.002em;
  font-variation-settings: 'wght' 450, 'opsz' 24;
  font-feature-settings: 'cv06' on, 'cv11' on;
  text-align: center;
}

/* line 49, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .subscription-block .bottom {
  border-radius: 0px 0px var(--radius-2) var(--radius-2);
  border-right: 1px solid var(--color-neutral-150);
  border-bottom: 1px solid var(--color-neutral-150);
  border-left: 1px solid var(--color-neutral-150);
  padding: 16px 18px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* line 58, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .subscription-block .bottom .left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

/* line 63, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .subscription-block .bottom .left .price {
  font-family: Inter;
  font-size: var(--ui1-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.18px;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-900);
}

/* line 67, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .subscription-block .bottom .left .status {
  font-family: Inter;
  font-size: var(--ui1);
  font-style: normal;
  font-weight: 450;
  line-height: 140%;
  letter-spacing: 0.002em;
  font-variation-settings: 'wght' 450, 'opsz' 24;
  font-feature-settings: 'cv06' on, 'cv11' on;
  color: var(--color-neutral-500);
}

/* line 72, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .subscription-block .bottom .right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

/* line 77, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .subscription-block .bottom .right .label {
  font-family: Inter;
  font-size: var(--ui1);
  font-style: normal;
  font-weight: 450;
  line-height: 140%;
  letter-spacing: 0.002em;
  font-variation-settings: 'wght' 450, 'opsz' 24;
  font-feature-settings: 'cv06' on, 'cv11' on;
  color: var(--color-neutral-500);
}

/* line 81, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .subscription-block .bottom .right .card-details {
  font-family: Inter;
  font-size: var(--ui1);
  font-style: normal;
  font-weight: 450;
  line-height: 140%;
  letter-spacing: 0.002em;
  font-variation-settings: 'wght' 450, 'opsz' 24;
  font-feature-settings: 'cv06' on, 'cv11' on;
  color: var(--color-neutral-900);
}

/* line 84, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .subscription-block .bottom .right .card-details svg {
  width: 32px;
  height: 22px;
  fill: var(--color-neutral-900);
  margin-right: 8px;
}

/* line 96, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .subscription-block.subscription-free .top {
  border-right: 1px solid var(--color-neutral-150);
  border-top: 1px solid var(--color-neutral-150);
  border-left: 1px solid var(--color-neutral-150);
}

/* line 104, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .subscription-block.subscription-basic .top {
  background-image: url(/assets/creator/subscriptions/banner-basic-8394a30e26b4d2b021c63ac24775bccb73f129a597ecc559e9c338796f6601ce.svg);
  background-position: center;
  background-repeat: no-repeat;
}

/* line 112, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .subscription-block.subscription-pro .top {
  background-image: url(/assets/creator/subscriptions/banner-pro-b7c50a0056e842c83be6e1c9e5e59ef05104292333f33e1846a24e13065a16bd.svg);
  background-position: center;
  background-repeat: no-repeat;
}

/* line 117, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .subscription-block.subscription-pro .top .header .left {
  color: var(--color-neutral-100);
}

/* line 121, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .subscription-block.subscription-pro .top .header .right .change-plan {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-1000);
  background-color: var(--color-neutral-150);
}

/* line 125, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .subscription-block.subscription-pro .top .header .right .change-plan:hover {
  background-color: var(--color-neutral-200);
}

/* line 128, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .subscription-block.subscription-pro .top .header .right .change-plan:active {
  background-color: var(--color-neutral-800);
}

/* line 135, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .subscription-block.subscription-pro .top .body .header {
  color: var(--color-neutral-0);
}

/* line 138, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .subscription-block.subscription-pro .top .body .subheader {
  color: var(--color-neutral-0);
}

/* line 145, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .invoices {
  margin-top: 70px;
  margin-bottom: 70px;
}

/* line 148, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .invoices .title {
  font-family: 'Factor A';
  font-size: var(--h3);
  font-style: normal;
  font-weight: 500;
  line-height: 115%;
  letter-spacing: -0.22px;
  margin-bottom: 22px;
}

/* line 152, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .invoices table {
  width: 100%;
}

/* line 156, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .invoices table thead tr th {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  font-variation-settings: 'wght' 430, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-400);
  padding-bottom: 12px;
}

/* line 163, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .invoices table tbody {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  font-variation-settings: 'wght' 430, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
  color: var(--color-neutral-800);
}

/* line 166, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .invoices table tbody tr {
  border-bottom: 1px solid var(--color-neutral-150);
  border-top: 1px solid var(--color-neutral-150);
}

/* line 169, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .invoices table tbody tr td {
  padding: 9px 0;
}

/* line 171, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .invoices table tbody tr td .button {
  display: inline-flex;
}

/* line 175, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .invoices table tbody tr td.actions {
  text-align: right;
}

/* line 177, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .invoices table tbody tr td.actions .button {
  font-family: Inter;
  font-size: var(--ui2-medium);
  font-style: normal;
  font-weight: 500;
  line-height: 140%;
  font-variation-settings: 'wght' 530, 'opsz' 22;
  font-feature-settings: 'cv06' on, 'cv11' on;
  letter-spacing: 0.002em;
}

/* line 179, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .invoices table tbody tr td.actions .button svg {
  width: 20px;
  height: 20px;
}

/* line 188, app/assets/stylesheets/creator/subscriptions.scss */
.subscription-page .invoices .plan-mobile {
  display: none;
}

@media (max-width: 768px) {
  /* line 196, app/assets/stylesheets/creator/subscriptions.scss */
  .subscription-page .title {
    margin-bottom: 22px;
  }
  /* line 200, app/assets/stylesheets/creator/subscriptions.scss */
  .subscription-page .subscription-block .bottom {
    flex-direction: column;
    gap: 16px;
  }
  /* line 203, app/assets/stylesheets/creator/subscriptions.scss */
  .subscription-page .subscription-block .bottom .left {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  /* line 209, app/assets/stylesheets/creator/subscriptions.scss */
  .subscription-page .subscription-block .bottom .right .button {
    margin-left: auto;
  }
  /* line 217, app/assets/stylesheets/creator/subscriptions.scss */
  .subscription-page .invoices table thead {
    display: none;
  }
  /* line 225, app/assets/stylesheets/creator/subscriptions.scss */
  .subscription-page .invoices tbody tr td.actions .button {
    width: 42px;
    height: 42px;
  }
  /* line 228, app/assets/stylesheets/creator/subscriptions.scss */
  .subscription-page .invoices tbody tr td.actions .button .label {
    display: none;
  }
  /* line 236, app/assets/stylesheets/creator/subscriptions.scss */
  .subscription-page .invoices .plan-desktop {
    display: none;
  }
  /* line 239, app/assets/stylesheets/creator/subscriptions.scss */
  .subscription-page .invoices .plan-mobile {
    display: inline;
  }
}
/* line 1, app/assets/stylesheets/creator/variables.scss */
:root {
  /* Fonts */
  --brand-font: 'Factor A', sans-serif;
  --secondary-font: 'Inter', sans-serif;
  /* Colors */
  --color-black-background: #121212;
  --color-light-background: #F8F8F7;
  --color-play-mode-background: #1D1D1D;
  --color-menu-toolbar-background: #F8F8F7;
  --color-plan-basic: #3DEB8D;
  --play-mode-background-color: #1D1D1D;
  --color-neutral-0: #FFFFFF;
  --color-neutral-100: #F8F8F7;
  --color-neutral-150: #EFEFF0;
  --color-neutral-200: #DFE1E2;
  --color-neutral-300: #C3C6C8;
  --color-neutral-400: #A9ABAE;
  --color-neutral-500: #909090;
  --color-neutral-600: #7A7A7B;
  --color-neutral-700: #5A5B59;
  --color-neutral-750: #454545;
  --color-neutral-800: #272727;
  --color-neutral-900: #181818;
  --color-neutral-950: #121212;
  --color-neutral-1000: #000000;
  /* Accents */
  --accent-green: #006C32;
  --accent-green-light: #00D663;
  --accent-violet: #815FE0;
  --accent-negative-red: #E36D74;
  /* Type Sizes */
  --display-1: 40px;
  --h1: 32px;
  --h2: 26px;
  --h3: 22px;
  --h4: 18px;
  --ui1: 17px;
  --ui1-medium: 17px;
  --ui2: 16px;
  --ui2-medium: 16px;
  --ui3: 12px;
  --digits: 24px;
  --digits-2: 28px;
  /* Radius */
  --radius-0: 8px;
  --radius-1: 10px;
  --radius-2: 18px;
  --radius-3: 22px;
  /* Modal */
  --modal-gutter: 44px;
  --modal-margin: 16px;
  --modal-margin-blocks-ui: 16px;
  --modal-margin-blocks-ui2: 10px;
  /* Toolbar */
  --toolbar-width: 180px;
  /* Padding */
  --padding-40-24: 24px;
  --padding-40-36: 36px;
  --padding-30-20: 20px;
  --padding-24-16: 16px;
  --padding-22-20: 20px;
  --padding-18-14: 14px;
  --padding-18-20: 20px;
  --padding-16-12: 12px;
  --padding-12-10: 10px;
  --padding-10-8: 8px;
  --padding-8-6: 6px;
  /* z-indexes */
  --z-index-sticky-top: 1020;
  --z-index-toolbar: 2000;
  --z-index-modal-backdrop: 2999;
  --z-index-modal: 3000;
  /* Breakpoints */
  --breakpoint-mobile: 767px;
  --breakpoint-desktop: 1200px;
}

/* Font mixins */
@media (min-width: 768px) {
  /* line 204, app/assets/stylesheets/creator/variables.scss */
  :root {
    /* Type Sizes */
    --display-1: 60px;
    --h1: 56px;
    --h2: 38px;
    --h3: 26px;
    --h4: 19px;
    --ui1: 18px;
    --ui1-medium: 18px;
    --ui2: 16px;
    --ui2-medium: 16px;
    --ui3: 13px;
    --digits: 36px;
    --digits-2: 42px;
    /* Radius */
    --radius-0: 10px;
    --radius-1: 12px;
    --radius-2: 18px;
    --radius-3: 28px;
    /* Modal */
    --modal-gutter: 48px;
    --modal-margin: 24px;
    --modal-margin-blocks-ui: 22px;
    --modal-margin-blocks-ui2: 16px;
    /* Padding */
    --padding-40-24: 40px;
    --padding-40-36: 40px;
    --padding-30-20: 30px;
    --padding-24-16: 24px;
    --padding-22-20: 22px;
    --padding-18-14: 18px;
    --padding-18-20: 18px;
    --padding-16-12: 16px;
    --padding-12-10: 12px;
    --padding-10-8: 10px;
    --padding-8-6: 8px;
  }
}

/* line 3, app/assets/stylesheets/creator/toolbar.scss */
.toolbar {
  z-index: var(--z-index-toolbar);
}

/* line 6, app/assets/stylesheets/creator/toolbar.scss */
.toolbar .actions > ul, .toolbar .footer > ul {
  padding: 0;
  list-style-type: none;
}

/* line 12, app/assets/stylesheets/creator/toolbar.scss */
.toolbar .language .language-box {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: #E2E2E2;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* line 21, app/assets/stylesheets/creator/toolbar.scss */
.toolbar .language .language-box svg {
  width: 24px;
  height: 24px;
  fill: var(--color-neutral-600);
}

/* line 28, app/assets/stylesheets/creator/toolbar.scss */
.toolbar .language .dropdown-menu .language-box {
  background: rgba(226, 226, 226, 0.07);
}

/* line 31, app/assets/stylesheets/creator/toolbar.scss */
.toolbar .language .dropdown-menu li a {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
}

@media (max-width: 767px) {
  /* line 44, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar-top {
    padding: 10px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
  }
  /* line 52, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar-top .logo img {
    width: 96px;
    height: 40px;
  }
  /* line 56, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar-top .logo img.logo-ran-carney {
    width: 130px;
    height: auto;
  }
  /* line 61, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar-top .hamburger {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* line 67, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar-top .hamburger svg {
    width: 24px;
    height: 24px;
    fill: var(--color-neutral-800);
  }
  /* line 73, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar-top .hamburger:hover {
    background: rgba(32, 22, 40, 0.04);
    border-radius: 31px;
  }
  /* line 79, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar {
    display: none;
    padding: 10px 18px;
    flex-direction: column;
    justify-content: start;
    background-color: var(--color-neutral-0);
  }
  /* line 86, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .header {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  }
  /* line 91, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .header .top-row {
    display: flex;
    justify-content: space-between;
  }
  /* line 96, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .header .top-row .logo img {
    width: 96px;
    height: 40px;
  }
  /* line 100, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .header .top-row .logo img.logo-ran-carney {
    width: 125px;
    height: auto;
  }
  /* line 106, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .header .top-row .hide-toolbar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* line 112, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .header .top-row .hide-toolbar .ten-icon-arrow-left {
    display: none;
  }
  /* line 115, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .header .top-row .hide-toolbar svg {
    width: 24px;
    height: 24px;
    fill: var(--color-neutral-800);
  }
  /* line 122, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .header .top-row .hide-toolbar:hover {
    background: rgba(32, 22, 40, 0.04);
    border-radius: 31px;
  }
  /* line 129, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .actions {
    margin-top: 40px;
  }
  /* line 133, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .footer {
    margin-top: 32px;
  }
  /* line 137, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .actions, .toolbar .footer {
    font-family: 'Factor A';
    font-size: var(--h3);
    font-style: normal;
    font-weight: 500;
    line-height: 115%;
    letter-spacing: -0.22px;
  }
  /* line 139, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .actions > ul, .toolbar .footer > ul {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  /* line 145, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .actions > ul > li, .toolbar .footer > ul > li {
    display: flex;
  }
  /* line 147, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .actions > ul > li > a, .toolbar .footer > ul > li > a {
    background: rgba(32, 22, 40, 0.04);
    padding: 10px 16px;
    border-radius: var(--radius-2);
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 58px;
    color: var(--color-neutral-800);
  }
  /* line 158, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .actions > ul > li > a svg, .toolbar .footer > ul > li > a svg {
    fill: var(--color-neutral-800);
    width: 26px;
    height: 26px;
  }
  /* line 164, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .actions > ul > li > a.new-quiz, .toolbar .footer > ul > li > a.new-quiz {
    color: var(--accent-green-light);
  }
  /* line 166, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .actions > ul > li > a.new-quiz svg, .toolbar .footer > ul > li > a.new-quiz svg {
    fill: var(--accent-green-light);
  }
  /* line 170, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .actions > ul > li > a:hover, .toolbar .footer > ul > li > a:hover {
    background: rgba(32, 22, 40, 0.04);
    color: var(--color-neutral-700);
  }
  /* line 173, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .actions > ul > li > a:hover svg, .toolbar .footer > ul > li > a:hover svg {
    fill: var(--color-neutral-700);
  }
  /* line 182, app/assets/stylesheets/creator/toolbar.scss */
  body.toolbar-open {
    overflow: hidden;
  }
  /* line 185, app/assets/stylesheets/creator/toolbar.scss */
  body.toolbar-open .toolbar {
    display: flex;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
  }
}

@media (min-width: 768px) {
  /* line 200, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar {
    display: flex;
    background-color: var(--color-menu-toolbar-background);
    padding: 12px;
    position: fixed;
    top: 0;
    width: var(--toolbar-width);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  /* line 214, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .header .top-row .logo img {
    width: 105px;
    height: 33px;
    margin: 5px 3px 6px 12px;
  }
  /* line 219, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .header .top-row .logo img.logo-ran-carney {
    width: 150px;
    height: auto;
    margin: 0px;
  }
  /* line 227, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .actions {
    margin-top: 20px;
  }
  /* line 231, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .actions, .toolbar .footer {
    font-family: Inter;
    font-size: var(--ui2-medium);
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    font-variation-settings: 'wght' 530, 'opsz' 22;
    font-feature-settings: 'cv06' on, 'cv11' on;
    letter-spacing: 0.002em;
  }
  /* line 233, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .actions > ul, .toolbar .footer > ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 0;
  }
  /* line 240, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .actions > ul > li, .toolbar .footer > ul > li {
    display: flex;
  }
  /* line 242, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .actions > ul > li > a, .toolbar .footer > ul > li > a {
    padding: 7px 10px;
    border-radius: var(--radius-0);
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-neutral-600);
  }
  /* line 251, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .actions > ul > li > a svg, .toolbar .footer > ul > li > a svg {
    fill: var(--color-neutral-600);
    width: 26px;
    height: 26px;
  }
  /* line 257, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .actions > ul > li > a:hover, .toolbar .footer > ul > li > a:hover {
    background: rgba(32, 22, 40, 0.04);
    color: var(--color-neutral-700);
  }
  /* line 260, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .actions > ul > li > a:hover svg, .toolbar .footer > ul > li > a:hover svg {
    fill: var(--color-neutral-700);
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  /* line 272, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar-top {
    display: inline-flex;
    flex-direction: row;
    align-items: end;
    gap: 4px;
    padding: 12px;
  }
  /* line 279, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar-top .logo img {
    width: 105px;
    height: 33px;
    margin: 5px 3px 6px 12px;
  }
  /* line 285, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar-top .logo img.logo-ran-carney {
    width: 125px;
    height: auto;
    margin: 0px;
    margin-bottom: 5px;
  }
  /* line 292, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar-top .ten-icon-hamburger {
    width: 24px;
    height: 24px;
    fill: var(--color-neutral-800);
    margin: 10px;
    transform: translateY(2px);
  }
  /* line 300, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar {
    display: none;
  }
  /* line 303, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .top-row {
    display: flex;
    flex-direction: row;
    align-items: end;
  }
  /* line 308, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .top-row .hide-toolbar, .toolbar .top-row .toggle-toolbar {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0;
  }
  /* line 318, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .top-row .ten-icon-arrow-left {
    width: 20px;
    height: 20px;
    fill: var(--color-neutral-400);
    margin: 10px;
  }
  /* line 327, app/assets/stylesheets/creator/toolbar.scss */
  body.toolbar-open .toolbar-top {
    opacity: 0;
  }
  /* line 330, app/assets/stylesheets/creator/toolbar.scss */
  body.toolbar-open .toolbar {
    display: flex;
  }
  /* line 332, app/assets/stylesheets/creator/toolbar.scss */
  body.toolbar-open .toolbar .ten-icon-arrow-left {
    display: inline-flex;
  }
  /* line 335, app/assets/stylesheets/creator/toolbar.scss */
  body.toolbar-open .toolbar .ten-icon-hamburger {
    display: none;
  }
}

@media (min-width: 1201px) {
  /* line 344, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar-top {
    display: none;
  }
  /* line 349, app/assets/stylesheets/creator/toolbar.scss */
  .toolbar .header .top-row .hide-toolbar, .toolbar .header .top-row .toggle-toolbar {
    display: none;
  }
}
/* line 1, app/assets/stylesheets/creator/variables.scss */
:root {
  /* Fonts */
  --brand-font: 'Factor A', sans-serif;
  --secondary-font: 'Inter', sans-serif;
  /* Colors */
  --color-black-background: #121212;
  --color-light-background: #F8F8F7;
  --color-play-mode-background: #1D1D1D;
  --color-menu-toolbar-background: #F8F8F7;
  --color-plan-basic: #3DEB8D;
  --play-mode-background-color: #1D1D1D;
  --color-neutral-0: #FFFFFF;
  --color-neutral-100: #F8F8F7;
  --color-neutral-150: #EFEFF0;
  --color-neutral-200: #DFE1E2;
  --color-neutral-300: #C3C6C8;
  --color-neutral-400: #A9ABAE;
  --color-neutral-500: #909090;
  --color-neutral-600: #7A7A7B;
  --color-neutral-700: #5A5B59;
  --color-neutral-750: #454545;
  --color-neutral-800: #272727;
  --color-neutral-900: #181818;
  --color-neutral-950: #121212;
  --color-neutral-1000: #000000;
  /* Accents */
  --accent-green: #006C32;
  --accent-green-light: #00D663;
  --accent-violet: #815FE0;
  --accent-negative-red: #E36D74;
  /* Type Sizes */
  --display-1: 40px;
  --h1: 32px;
  --h2: 26px;
  --h3: 22px;
  --h4: 18px;
  --ui1: 17px;
  --ui1-medium: 17px;
  --ui2: 16px;
  --ui2-medium: 16px;
  --ui3: 12px;
  --digits: 24px;
  --digits-2: 28px;
  /* Radius */
  --radius-0: 8px;
  --radius-1: 10px;
  --radius-2: 18px;
  --radius-3: 22px;
  /* Modal */
  --modal-gutter: 44px;
  --modal-margin: 16px;
  --modal-margin-blocks-ui: 16px;
  --modal-margin-blocks-ui2: 10px;
  /* Toolbar */
  --toolbar-width: 180px;
  /* Padding */
  --padding-40-24: 24px;
  --padding-40-36: 36px;
  --padding-30-20: 20px;
  --padding-24-16: 16px;
  --padding-22-20: 20px;
  --padding-18-14: 14px;
  --padding-18-20: 20px;
  --padding-16-12: 12px;
  --padding-12-10: 10px;
  --padding-10-8: 8px;
  --padding-8-6: 6px;
  /* z-indexes */
  --z-index-sticky-top: 1020;
  --z-index-toolbar: 2000;
  --z-index-modal-backdrop: 2999;
  --z-index-modal: 3000;
  /* Breakpoints */
  --breakpoint-mobile: 767px;
  --breakpoint-desktop: 1200px;
}

/* Font mixins */
@media (min-width: 768px) {
  /* line 204, app/assets/stylesheets/creator/variables.scss */
  :root {
    /* Type Sizes */
    --display-1: 60px;
    --h1: 56px;
    --h2: 38px;
    --h3: 26px;
    --h4: 19px;
    --ui1: 18px;
    --ui1-medium: 18px;
    --ui2: 16px;
    --ui2-medium: 16px;
    --ui3: 13px;
    --digits: 36px;
    --digits-2: 42px;
    /* Radius */
    --radius-0: 10px;
    --radius-1: 12px;
    --radius-2: 18px;
    --radius-3: 28px;
    /* Modal */
    --modal-gutter: 48px;
    --modal-margin: 24px;
    --modal-margin-blocks-ui: 22px;
    --modal-margin-blocks-ui2: 16px;
    /* Padding */
    --padding-40-24: 40px;
    --padding-40-36: 40px;
    --padding-30-20: 30px;
    --padding-24-16: 24px;
    --padding-22-20: 22px;
    --padding-18-14: 18px;
    --padding-18-20: 18px;
    --padding-16-12: 16px;
    --padding-12-10: 12px;
    --padding-10-8: 10px;
    --padding-8-6: 8px;
  }
}