@import "css/gamemodes.css";

:root {
  font-size: 15px;
  --max-width: 800px;
  --button_glow: 0.85rem;

  --popup-backdrop: brightness(50%) blur(0.2rem);

  /* Egyedi beállítások */
  --header-color: transparent;
  --menu_hover: rgba(170, 170, 170, 0.1);
  --page_change_time: 200ms;
  --button-border-radius: 0.5em;
  --button-border: 3px solid var(--white);
  --star-duration: 400ms;

  /*Alap szöveg színek */
  --white: #ffffff;
  --dark: #707070;
  --text_main: #f8f8f8;
  --text_sub: #afafaf;
  --link: #ffb36e;
  --matrix: #69b32d;
  --black: #000030;

  /*Előfizetés függő színek*/
  --instant_bg: #5ceb38;
  --club_bg: var(--color8);
  --teachers_bg: #3badd7;
  --temp: #5ceb38;

  /*Gombok, szövegdobozok, inaktív */
  --textbox_bg: #f8f8f8;
  --textbox_col: #e0e0e0;

  /*színek*/
  --color1: #fcd558;
  --color2: #eba24d;
  --color3: #6d57bb;
  --color4: rgba(0, 0, 0, 0.5);
  --color5: #75d994;
  --color6: linear-gradient(90deg, #69b32d 0%, 50%, #33aa33 100%);
  --color7: #cecece;
  --color8: #eb534d;
  --color9: #7ac2e8;
  --greenish: linear-gradient(0deg, #69b32d 0%, 50%, #75d994 100%);
  --magentash: linear-gradient(0deg, #eba24d 0%, 50%, #eb534d 100%);

  --border-radius: 0.5rem;
}

@font-face {
  font-family: NotoSansRegular;
  src: url(css/fonts/NotoSansRegular.ttf);
}

@font-face {
  font-family: NotoSansLight;
  src: url(css/fonts/NotoSansLight.ttf);
}

@font-face {
  font-family: NotoSansCondRegular;
  src: url(css/fonts/NotoSansCondRegular.ttf);
}

@font-face {
  font-family: NotoSansCondBlack;
  src: url(css/fonts/NotoSansCondBlack.ttf);
}

@font-face {
  font-family: NotoSansBlack;
  src: url(css/fonts/NotoSansBlack.ttf);
}

@font-face {
  font-family: NotoSansHeavy;
  src: url(css/fonts/NotoSansHeavy.ttf);
}

/* Opening page formatting*/

[orange] {
  color: var(--color2);
}

[blue] {
  color: var(--color3);
}

[green] {
  color: var(--color1);
}

[magenta] {
  color: var(--color8);
}

[logo] {
  position: relative;
  left: 50%;
  width: min(10rem, 30vw);
  height: min(5rem, 15vw);
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateX(-50%);
}

[logo="7streak"] {
  background-image: url(css/designs/2208/icons/7streak_compromise.svg);
}

[logo="Quizzes"] {
  background-image: url(css/designs/2208/icons/quizzes_green.svg);
}

.preload {
  opacity: 0;
  pointer-events: none;
}

.loader_anim {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: relative;
  animation: rotate 1s linear infinite;
  place-self: center;
}
.loader_anim::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  inset: 0px;
  border-radius: 50%;
  border: 5px solid #fff;
  animation: prixClipFix 2s linear infinite;
}

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

@keyframes prixClipFix {
  0% {
    clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
  }
  25% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
  }
  50% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
  }
  75% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
  }
  100% {
    clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
  }
}

/************értékelés*************/
.feedback_module {
  display: grid;
  place-items: center;
  gap: 0.5rem;
}

.feedback_module .send_feedback {
  color: var(--white);
  font-size: 0.8rem;
  cursor: pointer;
}

.feedback_module .send_feedback:hover {
  color: var(--link);
}

.rate {
  --star-size: min(2rem, 8vw);
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  background-color: var(--color4);
  border-radius: var(--border-radius);
}

.rate .ratings {
  display: grid;
  gap: 0.2rem;
  grid-auto-flow: column;
  place-content: center;
  align-items: center;
}

.rate [rate_content="global"] {
  display: none;
}

.rate [rate_value] {
  display: none;
  color: var(--white);
  translate: 0 3px;
}

.rate.animationEnd [rate_value] {
  display: grid;
  justify-self: start;
  margin-left: 0.3rem;
}

.rate.animationEnd [rate_content="global"] {
  display: grid;
}

.rate.animationEnd [rate_content="my"] {
  display: none;
}

.streak .rate {
  --star-size: 1em;
  background-color: transparent;
  padding: 0;
  gap: 0;
  border-radius: 0;
  justify-self: center;
}

[rate_content] {
  color: white;
  font-size: 0.9rem;
  text-align: center;
  padding: 0 1rem;
}

[previous_rating] {
  color: rgb(122, 194, 232);
  font-size: 0.8rem;
  text-decoration: underline;
  text-align: center;
  cursor: pointer;
}

[previous_rating]:hover {
  color: var(--white);
}

[rates] {
  color: var(--white);
  translate: 0 3px;
  font-size: 0.6rem;
  translate: 0 4px;
}

.rate_stars {
  --hover_scale: 1.1;
  display: grid;
  gap: min(0.5rem, 1vw);
  grid-auto-flow: column;
  justify-self: end;
  font-size: var(--star-size);
}

.streak .rate_stars {
  gap: 1px;
}

.rate_star {
  display: grid;
  width: var(--star-size);
  height: var(--star-size);
}

.rate_star.rated {
  animation: 250ms rateanim forwards ease-in-out;
}

.streak .rate_star {
  width: var(--star-size);
  height: var(--star-size);
  font-size: 1em;
}

.streak [rate_star] {
  width: var(--star-size);
  height: var(--star-size);
}

[rate_star] {
  width: var(--star-size);
  height: var(--star-size);
  fill: hsl(var(--h), var(--s), var(--l));
  grid-area: 1 / 1;
  stroke-width: 1px;
  overflow: hidden;
}

[rate_star="full"] {
  --h: 130;
  --s: 60%;
  --l: 70%;
  stroke: hsl(var(--h), calc(var(--s) + 40%), calc(var(--l) - 20%));
}

[rate_star="empty"] {
  fill: transparent;
  stroke: rgb(140, 140, 140);
}

.rate_stars.rated {
  pointer-events: none;
}

.rate_stars.rated [rate_star="full"],
.rate_stars.rating:hover [rate_star="full"] {
  --h: 110;
  scale: var(--hover_scale);
}

.rate_stars.rating .rate_star {
  cursor: pointer;
}

.rate_stars.rating .rate_star:hover {
  animation: 250ms rateanim forwards ease-in-out;
}

@keyframes rateanim {
  0% {
    scale: 1;
  }

  25% {
    scale: 1.2;
    rotate: 5deg;
  }

  75% {
    rotate: -5deg;
  }

  100% {
    scale: 1;
    rotate: 0deg;
  }
}

/*gdpr/aszf*/
.gdpr_terms {
  padding: 3rem;
  color: var(--text_main);
  display: grid;
  place-items: center;
}

* {
  box-sizing: border-box;
}

a {
  color: var(--color2);
  font-size: min(1rem, 3.5vw);
}

.info ol {
  display: grid;
  gap: 1rem;
}

.info li {
  list-style-type: none;
  justify-self: start;
}

.info li::before {
  content: "";
  position: absolute;
  width: 2rem;
  height: 2rem;
  background-image: url(css/icons/menu/checkmark.svg);
  background-size: contain;
  background-repeat: no-repeat;
  transform: translate(-2.2rem, -0.4rem);
}

input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  position: absolute;
  right: 0;
}

.eval_gray {
  color: var(--text_sub);
}

.eval_green {
  color: var(--color5);
}

.eval_red {
  color: var(--color8);
}

.link {
  cursor: pointer;
  text-decoration: underline;
  color: var(--text_main);
  font-size: min(1rem, 3.5vw);
}

.link:hover,
a:hover {
  color: var(--color9);
}

.grid_columns {
  display: grid;
  gap: 1rem;
  grid-auto-flow: column;
}

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: hsl(0, 0%, 90%);
  font-family: "NotoSansLight", sans-serif;
  overflow: hidden;
  cursor: default;
}

.background {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgb(0, 0, 0) 0%,
    rgb(0, 14, 51) 11.3%,
    rgb(38, 7, 95) 41.9%,
    rgb(0, 40, 0) 100%,
    rgb(255, 255, 255) 100%
  );
}

.main {
  position: absolute;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 0 1fr;
  grid-template-columns: 100%;
  overflow: hidden;
}

.main[type="game"] .footer {
  padding: 1rem;
}

.game {
  position: relative;
  display: grid;
  width: 100%;
  overflow: auto;
  place-items: center;
  grid-template-rows: 1fr auto;
}

.gamecontent {
  display: grid;
  grid-template-rows: 1fr;
  width: min(100%, var(--max-width));
  height: 100%;
}

/* .gamecontent :is([page="game"], [page="task_list"], [page="instructions"], [page="end"]) { */
.gamecontent [page="game"],
.gamecontent [page="task_list"],
.gamecontent [page="instructions"],
.gamecontent [page="end"] {
  align-self: start;
  grid-template-rows: initial;
  overflow: hidden;
}

.gamecontent [page="task_list"] {
  grid-template-rows: auto auto auto 1fr auto;
}

.page_info {
  font-family: NotoSansRegular;
  font-size: min(1.2rem, 5vw);
  text-align: center;
}

/**************COOKIES****************/
.cookie {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: var(--teachers_bg);
  padding: 1rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr auto;
  place-content: center;
  align-items: center;
  font-size: 1.1rem;
  z-index: 100;
}

.cookie_accept {
  cursor: pointer;
  place-self: center;
  width: auto;
  height: auto;
  padding: 1rem;
  background-color: var(--color5);
  border-radius: 10px;
  box-shadow: 0.2rem 0.2rem 0.2rem;
}

/***************CARDS*****************/
.cards {
  position: absolute;
  width: 100%;
  height: 100%;
}

.card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: min(1rem, 5vw);
  width: min(28rem, 90%);
  max-height: 100%;
  aspect-ratio: 1 / 1.6;
  background-color: var(--white);
  border-radius: 2em;
  border: 1px solid var(--text_main);
  box-shadow: 1em 1em 1em var(--text_main);
  padding: 2em;
  z-index: 1000;

  display: grid;
  grid-template-rows: 1fr auto;
  color: var(--text_main);
  cursor: pointer;
  user-select: none;
}

.card .card_close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 2rem;
  height: 2rem;
  font-family: NotoSansCondBlack;
  font-size: 1.5rem;
  display: grid;
  place-content: center;
  cursor: pointer;
}

.card .card_content {
  display: grid;
  gap: 2em;
  place-content: center;
}

.card .card_image {
  aspect-ratio: 1.5/1;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.card .card_title {
  font-family: NotoSansCondBlack;
  font-size: min(1.6em, 5vw);
  text-align: center;
}

.card .card_description {
  font-family: NotoSansRegular;
  font-size: min(1.1em, 3vw);
  text-align: center;
}

.card_progress {
  display: grid;
  grid-auto-flow: column;
  place-content: space-evenly;
  align-items: center;
}

[card_progress_indicator] {
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 0.3vh solid grey;
}

[card_progress_indicator].active {
  width: 1.2em;
  height: 1.2em;
  background-color: var(--text_main);
}

/***************POPUP*****************/
.popup {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: var(--popup-backdrop);
  -webkit-backdrop-filter: var(--popup-backdrop);
  display: grid;
  place-content: center;
  z-index: 100;
}

.popup_module {
  max-height: 90vh;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 0.5rem;
  backdrop-filter: blur(0.5rem) brightness(150%) contrast(50%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  overflow: hidden;
  grid-template-rows: auto auto 1fr auto;
}
.popup_module.disabled .button {
  opacity: 0.5;
  pointer-events: none;
}

.popup_module:empty {
  display: none;
}

.popup_module > *:not(.popup_module_title) {
  margin: 0.5rem;
}

.popup_module textarea {
  resize: none;
  border-radius: 0.25rem;
  border: none;
  padding: 0.5rem;
  font-family: NotoSansLight;
  font-size: 0.9rem;
}

.popup_content .popup_textarea {
  text-align: left;
  border-radius: 0.25rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  resize: vertical;
  min-height: 10rem;
  font-family: NotoSansCondRegular;
  font-size: 1em;
  color: dimgray;
}

.popup_module_title {
  font-size: 1.2rem;
  text-align: center;
  color: var(--black);
  font-family: NotoSansCondRegular;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 0.5rem;
  backdrop-filter: blur(1rem) contrast(75%) brightness(125%);
}

.popup_body {
  width: min(40em, 90vw);
  background-color: var(--white);
  color: var(--text_main);
  border: 1px solid var(--text_main);
  border-radius: 2em;
  padding: 2em;
  display: grid;
  max-height: 70vh;
  overflow: auto;
  overflow-x: hidden;
}

.popup_content {
  margin-bottom: 1em;
  display: grid;
  gap: 0.5rem;
}

.popup_content .title {
  font-size: min(1.5rem, 5vw);
  font-family: NotoSansCondBlack;
  text-align: center;
  margin-bottom: 0.5rem;
}

.popup_content.nomargin {
  margin: 0;
}

.popup_content.nomargin .title {
  margin: 0;
}

.popup_content textarea {
  text-align: center;
  padding: 0.5rem;
  font-family: NotoSansRegular;
  font-size: 0.8rem;
  resize: none;
}

.popup_content .description {
  font-size: min(0.8rem, 4vw);
  text-align: center;
}

.popup_content .description.share {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr auto;
  place-items: center;
  margin-bottom: 0.5rem;
}

.popup_content .info {
  font-size: min(1.2rem, 5vw);
  text-align: center;
}

.popup_content .info.bold {
  font-family: NotoSansCondBlack;
  text-align: left;
}

.popup_content .info span {
  font-family: NotoSansCondBlack;
}

.popup_buttons {
  display: grid;
  gap: 1em;
  place-content: center;
  place-items: center;
  grid-template-columns: repeat(auto-fit, minmax(7rem, auto));
}

.popup_content .popup_form {
  display: grid;
  gap: 0.25em;
  font-size: min(1em, 5vw);
}

.popup_content [title] {
  font-family: NotoSansRegular;
}

.popup_content input {
  font-family: NotoSansLight;
  font-size: 1em;
  color: var(--text_main);
  width: 100%;
  padding: 1em;
  border-radius: 0.5em;
  outline: 2px solid var(--color4);
  border: none;
  margin-bottom: 1em;
}

.safari .popup_content input {
  border: 2px solid var(--color4);
  outline: none;
}

.popup_content input.copy,
.popup_content input.copy_code {
  margin-bottom: 0;
  height: 100%;
}

.popup_content .error {
  text-align: center;
}

[points] [point] {
  opacity: 0;
  transition-duration: 250ms;
}

[points] [point].active {
  opacity: 1;
}

.header {
  display: grid;
  gap: 1rem;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: min(0.5rem, 2vw) min(1rem, 2vw);
  cursor: default;
  z-index: 3;
}

.header .streak_logo {
  position: relative;
  padding-top: calc(1 / 2 * 100%);
  width: min(7rem, 20vw);
  background-image: url(css/icons/7streak_compromise.svg);
  background-repeat: no-repeat;
  background-size: contain;
  cursor: pointer;
}

.header .languageSelector {
  cursor: pointer;
}

.languages {
  position: absolute;
  right: 0;
  background-color: rgb(32, 32, 32);
  padding: 1rem;
  overflow: hidden;
  transform: translateX(100%);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
  z-index: 2;
}

.languages.open {
  transform: translateX(0);
}

.languages .elem {
  color: var(--color7);
  padding: 0.75rem;
  font-size: 1rem;
  cursor: pointer;
}

.languages .elem:hover {
  color: var(--white);
  background-color: var(--menu_hover);
}

.flag {
  --size: min(3rem, 10vw);
  width: var(--size);
  height: var(--size);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.flag.hu {
  background-image: url(css/flags/hu.png);
}

.flag.en {
  background-image: url(css/flags/en.png);
}

[menu="language"] {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  color: var(--color4);
}

.header .loginpanel {
  display: grid;
  gap: min(1rem, 2vw);
  grid-auto-flow: column;
  justify-content: end;
  justify-self: end;
}

.header .userpanel {
  display: grid;
  user-select: none;
  -webkit-user-select: none;
  justify-content: end;
  font-size: min(1.2rem, 5vw);
}

.header .userpanel .name {
  font-family: NotoSansRegular;

  color: var(--color4);
  cursor: pointer;
}

.header .userpanel img {
  width: min(2rem, 8vw);
  height: min(2rem, 8vw);
  border-radius: 50%;
}

.header .userpanel .name:hover {
  color: var(--teachers_bg);
}

.header .userpanel .logout {
  font-size: 0.8em;
  font-variant: petite-caps;
  color: var(--white);
  text-decoration: none;
  width: fit-content;
  cursor: pointer;
}

.header .userpanel .logout:hover {
  color: var(--teachers_bg);
}

.menupanels {
  z-index: 100;
}

.menu {
  position: absolute;
  right: 0;
  background-color: rgb(32, 32, 32);
  padding: 1rem;
  overflow: hidden;
  transform: translateX(100%);
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
}

.menu.open {
  transform: translateY(0);
}

.menu .elem {
  color: var(--color7);
  padding: 0.75rem 5rem 0.75rem 0.5rem;
  font-size: 1rem;
  cursor: pointer;
}

.menu .elem:hover {
  color: var(--white);
  background-color: var(--menu_hover);
}

.menu .elem.divider {
  pointer-events: none;
  padding: 0.25rem 0;
}

.menu .elem .name {
  color: var(--white);
}

.menu .elem .email {
  font-size: 0.75em;
  color: var(--text_main);
}

.menu .elem:hover .email {
  color: var(--text_main);
}

.menu .separator {
  width: 100%;
  height: 1px;
  background-color: var(--color7);
}

[page="error"] {
  text-align: center;
  place-content: center;
}

.logo {
  display: grid;
  grid-auto-flow: column;
  gap: 0.5em;
}

.logo .icon {
  width: min(3rem, 8vw);
  height: min(3rem, 8vw);
}

.logo {
  grid-template-columns: auto 1fr;
  justify-items: start;
  align-items: center;
}

.logo .icon {
  filter: invert(35%) sepia(16%) saturate(0%) hue-rotate(218deg) brightness(200%) contrast(98%);
}

.logo.streak_club .icon {
  background-image: url(css/icons/menu/streakclub.svg);
}

.logo.streak_club_loggedout .icon {
  background-image: url(css/icons/menu/streakclub.svg);
}

.logo.create .icon {
  background-image: url(css/icons/menu/createstreak.svg);
}

.logo.instant_streak .icon {
  background-image: url(css/icons/menu/instant.svg);
}

.logo.teachers_lab .icon {
  background-image: url(css/icons/menu/teacherslab.svg);
}

.logo.game .icon {
  background-image: url(css/icons/template/language.svg);
  filter: invert(100%);
}

.header.instant .logo.game .icon {
  background-image: url(css/icons/menu/instant.svg);
  filter: invert(0%);
}

.logo .title {
  font-size: min(2em, 5vw);
  color: var(--white);
  text-align: left;
}

.textlogo {
  display: grid;
  grid-auto-flow: column;
  gap: 1em;
  grid-template-columns: 1fr auto;
  width: 15em;
}

.textlogo div {
  font-family: NotoSansCondBlack;
  color: #707070;
  font-size: 1em;
}

.textlogo div:first-child {
  font-size: 2em;
}

.content {
  display: grid;
  position: relative;
  width: min(100%, var(--max-width));
  justify-items: center;
  gap: 1rem;
}

.error {
  color: var(--color8);
  font-family: NotoSansRegular;
  font-size: 0.9rem;
}

.streak_info {
  place-self: end;
  cursor: pointer;
  font-size: min(1rem, 3vw);
}

.streak_info .info {
  font-family: NotoSansCondBlack;
  color: var(--color5);
  transform: rotate(-6deg);
  font-size: 2em;
  -webkit-text-stroke: 1px var(--white);
  text-align: center;
}

.streak_info .info:first-child {
  font-size: 1.3em;
}

[form] {
  display: grid;
  padding: 2em;
  gap: 1em;
  grid-template-columns: auto 1fr;
  place-items: center;
  width: 100%;

  font-size: min(1rem, 3vw);
  border-radius: 0.5rem;
  outline: 2px solid var(--color3);
  border: none;
  backdrop-filter: brightness(150%) blur(1rem);
  -webkit-backdrop-filter: brightness(150%) blur(1rem);
  box-shadow: 0 0 10px var(--color3);
}

form#login > .buttons {
  grid-auto-flow: row;
}

.safari [form] {
  border: 2px solid var(--color3);
  outline: none;
}

[form] label {
  justify-self: end;
  font-family: NotoSansLight;
}

[form] input {
  width: 100%;
  font-family: NotoSansLight;
  font-size: 1.3em;
  padding: 0.75em;
  border-radius: 0.25em;
  outline: 2px solid var(--color3);
  border: none;
}

.safari [form] input {
  border: 2px solid var(--color3);
  outline: none;
}

[form] input[type="checkbox"] {
  outline: none;
  border: none;
  cursor: pointer;
}

input {
  width: 100%;
  font-size: 1.3rem;
  padding: 1rem;
  border-radius: 0.5rem;
  outline: 1px solid var(--dark);
  border: none;
}

.safari input {
  border: 1px solid var(--dark);
  outline: none;
}

input#code {
  text-align: center;
  font-size: min(3rem, 10vw);
  font-family: NotoSansCondBlack;
  letter-spacing: min(1rem, 2vw);
}

.buttons {
  display: grid;
  gap: 1em;
  grid-auto-flow: column;
  place-items: center;
  place-content: center;
}

@media screen and (max-width: 550px) {
  form .buttons {
    grid-auto-flow: row;
  }
}

.button {
  --background-brightness: 3%;
  --border-brightness: 30%;
  --icon-brightness: 70%;
  --text-brightness: 70%;
  --saturation: 90%;
  position: relative;
  display: grid;
  gap: min(0.5rem, 2vw);
  grid-template-columns: auto 1fr;
  place-items: center;
  font-size: min(1.3rem, 5vw);
  border-radius: 0.5rem;
  padding: min(1rem, 3vw);
  background-color: hsl(var(--h), var(--saturation), var(--background-brightness));
  outline: 1px solid hsl(var(--h), var(--saturation), var(--border-brightness));
  border: none;
  transition-duration: 100ms;
  cursor: pointer;
}

.safari .button {
  border: 1px solid hsl(var(--h), var(--saturation), var(--border-brightness));
  outline: none;
}

[button] > .title {
  transform: translateY(2px);
}

[button="profile"].button {
  padding: min(0.75rem, 3vw);
}

.button:hover {
  --background-brightness: 12%;
  --border-brightness: 60%;
  --icon-brightness: 60%;
  --text-brightness: 60%;
  --saturation: 100%;
  outline-width: 2px;
  box-shadow: 0 0 var(--button_glow) 1px hsl(var(--h), var(--saturation), var(--border-brightness));
}

.button:hover .icon {
  animation-delay: 0.3s;
  animation: smalliconanim 0.3s ease-in-out;
  animation-iteration-count: 1;
  scale: 1;
  rotate: 0deg;
}

.button.pink {
  --h: 341.9;
}

.button.green {
  --h: 93.1;
}

.button.yellow {
  --h: 50;
}

.button.blue {
  --h: 200.8;
}

.button.orange {
  --h: 32.3;
}

.button.white {
  --h: 0;
  --saturation: 0%;
  --background-brightness: 5%;
  --icon-brightness: 100%;
  --text-brightness: 100%;
  --border-brightness: 30%;
}

.button.white:hover {
  --background-brightness: 15%;
  --border-brightness: 70%;
}

.button.text {
  gap: 0;
}

.button.text .icon {
  width: 0;
}

@keyframes smalliconanim {
  0% {
    scale: 1;
  }

  25% {
    scale: 1.1;
    rotate: 3deg;
  }

  75% {
    rotate: -3deg;
  }

  100% {
    scale: 1;
    rotate: 0deg;
  }
}

/* .safari :not(.hs_content) .button {
    outline: 1px solid transparent;
    border: 1px solid hsl(var(--h), var(--saturation), var(--border-brightness));
}

.safari .hs_content .button {
    outline: none;
    border: none;
} */

.button.locked {
  --h: 0;
  --saturation: 0%;
  --border-brightness: 30%;
  --background-brightness: 20%;
  opacity: 0.8;
}

.button[type="submit"] {
  border: none;
}

.gamemodes .button {
  padding: 1rem;
}

.button.iconend {
  grid-template-columns: 1fr 2rem;
}

.button.iconless {
  grid-template-columns: 1fr;
}

.button.noicon {
  grid-template-columns: 1fr;
}

.button.large {
  gap: min(1rem, 2vw);
  grid-template-columns: auto;
  min-width: min(9rem, 80vw);
}

.button.large .title {
  color: var(--white);
}

.button.large .icon {
  width: 2.5rem;
  height: 2.5rem;
}

/* .main_buttons .button {
    width: 100%;
} */

.button.deselect {
  background: var(--white);
}

.button.deselect .title {
  color: var(--text_sub);
}

.button[button="listen"],
.button[button="text_hint"] {
  grid-template-columns: auto;
}

.button[button="listen"].classic,
.button[button="text_hint"].classic {
  --counter: "1";

  --border-brightness: 0%;
  --saturation: 0%;
  --background-brightness: 90%;
}

.button[button="listen"].classic::after,
.button[button="text_hint"].classic::after {
  content: var(--counter);
  position: absolute;
  right: 0.25rem;
  bottom: 0rem;
  font-family: NotoSansCondBlack;
  color: var(--dark);
}

.button[button="listen"],
.button[button="text_hint"],
.button[button="audio"],
.button[button="mic"] {
  --border-brightness: 0% !important;
  --saturation: 0% !important;
  --background-brightness: 90% !important;
}

.button[button="listen"].imprinting,
.button[button="text_hint"].imprinting {
  --counter: "0";

  --border-brightness: 0%;
  --saturation: 0%;
  --background-brightness: 90%;
}

.button[button="listen"].imprinting::after,
.button[button="text_hint"].imprinting::after {
  content: var(--counter);
  position: absolute;
  right: -0rem;
  bottom: -0.25rem;
  font-family: NotoSansCondBlack;
  color: var(--dark);
}

.button[button="listen"].imprinting.inactive,
.button[button="text_hint"].imprinting.inactive {
  pointer-events: none;
  background-color: var(--textbox_col);
}

.button.white.inactive .icon.listen,
.button.white.inactive .icon.text_hint {
  filter: brightness(100);
}

#hint .button[button="listen"] .icon,
#hint_template .button[button="listen"] .icon {
  background-image: url(css/icons/game/listen.svg);
}

#hint .button[button="text_hint"] .icon,
#hint_template .button[button="text_hint"] .icon {
  background-image: url(css/icons/game/texthint.svg);
}

.button[button="audio"] .icon {
  background-image: url(css/icons/game/listen.svg);
}

.button.green .icon.checkmark {
  filter: saturate(0) brightness(100);
}

.button[button="clipboard_copy"] .icon.checkmark {
  filter: saturate(0) brightness(100);
}

.button[button="copy_code"] .icon.checkmark {
  filter: saturate(0) brightness(100);
}

.button[button="copy_link"] .icon.checkmark {
  filter: saturate(0) brightness(100);
}

.button .title {
  font-family: NotoSansRegular;
  font-size: min(1.1rem, 3.5vw);
  color: hsl(var(--h), var(--saturation), var(--text-brightness));
  letter-spacing: -0.5px;
}

.gamemodes .button .title {
  text-transform: uppercase;
  text-align: left;
}

.button .created {
  justify-self: start;
  font-family: NotoSansCondBlack;
  font-size: min(0.65em, 5vw);
}

.button .description {
  justify-self: start;
  font-family: NotoSansRegular;
  font-size: min(0.55em, 3vw);
}

/* [button_info] {
    display: grid;
} */

/* .footer .button {
    color: var(--white);
}

.footer .button {
    box-shadow: 0 0 0px 1px var(--white);
}

.footer .button:hover {
    box-shadow: 0 0 0px 2px var(--white);
} */

.button.white.locked .icon.listen {
  filter: brightness(100);
}

.button.break {
  width: min-content;
}

.button.disabled {
  display: none;
}

.button.locked {
  pointer-events: none;
}

.button.locked::after {
  content: "";
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url(css/icons/editing/publishing/padlock.svg);
  background-size: 1.5rem;
  background-repeat: no-repeat;

  position: absolute;
  left: auto;
  right: -0.5rem;
  top: auto;
  bottom: -0.5rem;
}

.button.locked .title {
  color: var(--textbox_bg);
}

.button.locked .icon.quick_test {
  background-image: url(css/icons/menu/quicktest_inactive.svg);
}

/*A streak panel tulajdonságai */
.streak {
  --border-radius: 0.5rem;
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  font-size: min(1em, 8vw);
  width: min(20em, 90vw);
  min-height: 10em;
  color: var(--text_main);
  border-radius: var(--border-radius);
  outline: 1px solid var(--color);
  border: none;
  transition-duration: 75ms;
}

.safari .streak {
  outline: none;
  border: 1px solid var(--color);
}

.streak.complete {
  background-color: goldenrod;
  outline: 3px solid goldenrod;
  box-shadow: 0 0 8px goldenrod;
}

.safari .streak.complete {
  border: 3px solid goldenrod;
  outline: none;
}

.streak.image {
  background-position: center;
  background-size: cover;
}

.streak[type="instant"] {
  --color: var(--club_bg);
  --colormix: var(--color2);
}

.streak[type="club"] {
  --color: var(--club_bg);
  --colormix: var(--color2);
}

.streak[type="group"] {
  --color: var(--teachers_bg);
  --colormix: var(--color9);
}

.streak[type="closed"] {
  --color: #87d95f;
  --colormix: #4e8400;
}

.streak:not(.visible) {
  opacity: 0;
  pointer-events: none;
}

.streak:not(.visible) .streakdata,
.streak:not(.visible) .trophies {
  display: none;
}

.streak.visible:not([variant="instruction"]):hover {
  cursor: pointer;
  transform: scale(1.04);
}

/*transition-duration: 200ms;*/

.streak.visible:not([variant="instruction"]) .trophies::after {
  content: "";
  position: absolute;
  left: -100px;
  width: 100px;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.5) 25%,
    rgba(255, 255, 255, 1) 70%,
    rgba(255, 255, 255, 0.35) 90%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: 0;
  pointer-events: none;
}

.streak.visible:not([variant="instruction"]):hover .trophies::after {
  animation: streakhover 600ms ease-out forwards;
}

@keyframes streakhover {
  10% {
    opacity: 0.8;
  }

  50% {
    opacity: 0.3;
  }

  100% {
    left: 100%;
  }
}

.streak.visible.nohover:hover {
  transform: inherit;
}

.streak.draft {
  filter: brightness(50%) grayscale(1) opacity(0.8);
  --text: "";
}

.streak.draft:hover {
  filter: none;
  transform: inherit;
}

.streak.draft::after {
  content: var(--text);
  position: absolute;
  rotate: -25deg;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  font-size: 2.8rem;
  font-family: NotoSansCondBlack;
  opacity: 0.2;
  letter-spacing: 1px;
}

.streak.draft:hover::after {
  opacity: 0.025;
}

.streak .streakdata {
  display: grid;
  gap: 0.25em;
  font-family: NotoSansLight;
  padding: 0.5em;
  min-height: 7em;
}

.streak .streakdata {
  grid-template-areas: "title menu" "base_info base_info";
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  background-color: rgb(15, 15, 30);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.streak:not([variant="instruction"]):hover .streakdata {
  background-color: rgb(20, 20, 40);
}

.streak.complete .streakdata {
  grid-template-areas: "cup title menu" "base_info base_info base_info";
  grid-template-columns: auto 1fr auto;
}

.streak.nomenu .streakdata {
  grid-template-areas: "title" "base_info";
  grid-template-rows: auto 1fr;
}

.streak.nomenu.complete .streakdata {
  grid-template-areas: "cup title" "base_info base_info";
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
}

.streak.set_element.disabled {
  filter: grayscale(100%) brightness(150%);
  --color: var(--club_bg);
  pointer-events: none;
}

.streak.set_element.disabled::after {
  position: absolute;
  content: "";
  width: 2rem;
  height: 2rem;
  background-image: url(css/icons/editing/publishing/padlock.svg);
  background-size: contain;
  top: 0.5rem;
  right: 0.25rem;
}

.streakdata .image {
  place-self: center;
  display: grid;
  gap: 0.25em;
}

.streak.image .base_info {
  grid-template-columns: 1fr 1fr;
}

.streak.image img {
  background-size: contain;
  width: 100%;
}

.streak .streak_description {
  display: grid;
  gap: 0.25em;
  align-self: center;
}

.streakdata .icon {
  grid-area: icon;
  width: min(3rem, 15vw);
  height: min(3rem, 15vw);
  filter: contrast(0.2);
  place-self: center;
}

.streakdata .base_info {
  grid-area: base_info;
  place-self: center;
  display: grid;
  gap: 0.25em;
  padding: 0.25em 0;
}

.streakdata .title {
  grid-area: title;
  width: 100%;
  font-size: 1.2em;
  color: var(--white);
  -webkit-text-stroke: 0.5px var(--dark);
  text-shadow: 1.4px 1.4px 0px var(--color);
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  white-space: nowrap;
}

.streakdata .created {
  font-size: 0.7em;
  color: var(--textbox_col);
  text-align: center;
  max-height: 2.8em;
  line-height: 1.4em;
  overflow: hidden;
  justify-self: center;
}

/* .streakdata .created:hover {
    color: var(--color1);
} */

.instruction .streakdata .created:hover {
  pointer-events: none;
}

.streakdata .description {
  justify-self: center;
  font-size: 0.7em;
  color: var(--text_sub);
  text-align: center;

  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  word-wrap: break-word;
  max-height: 3.6em;
}

.streakdata .cup {
  grid-area: cup;
  display: none;
}

.streak.complete .streakdata .cup {
  display: block;
  width: min(1.53em, 6vw);
  height: min(1.53em, 6vw);
  background-image: url(css/icons/reward.svg);
  background-size: 110%;
  translate: -2px -2px;
}

.streakdata .menu {
  grid-area: menu;
  justify-self: end;
  font-family: NotoSansRegular;
  font-size: 0.55em;
}

.trophies {
  position: relative;
  width: 100%;
  min-height: 2.5em;
  display: grid;
  grid-auto-flow: column;
  padding: 0.1em 0.5em;
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  background: linear-gradient(90deg, var(--color) 0%, var(--colormix) 75%);
  grid-template-columns: auto 1fr;
  gap: 0.5em;
  overflow: hidden;
}

.trophies .task_properties {
  display: grid;
  gap: 0.35em;
  grid-auto-flow: column;
  justify-self: start;
  align-items: center;
}

.trophies .task_properties .title {
  font-size: min(1em, 5vw);
  text-shadow: var(--dark) 1px 1px;
}

.trophies .task_results {
  display: grid;
  gap: 0.35em;
  grid-auto-flow: column;
  justify-self: end;
  align-items: center;
}

.trophies .icon {
  width: min(1.2em, 4vw);
  height: min(1.2em, 4vw);
}

.trophies [task_type="phrases"] {
  background-image: url(css/icons/streak_data/language.svg);
}

.trophies [task_type="spelling"] {
  background-image: url(css/icons/streak_data/spelling.svg);
}

.trophies [task_type="geography"] {
  background-image: url(css/icons/streak_data/geography.svg);
}

.trophies [task_type="testing"] {
  background-image: url(css/icons/streak_data/testing.svg);
}

.trophies [task_type="interaction"] {
  background-image: url(css/icons/streak_data/interaction.svg);
}

.trophies [task_type="set"] {
  background-image: url(css/icons/streak_data/set.svg);
}

.trophies [task_type="quiz"][game_mode="quiz"] {
  background-image: url(css/icons/template/arcade.svg);
}

.trophies [task_type="quiz"][game_mode="jojo"] {
  background-image: url(css/icons/template/blitz.svg);
}

.trophies [task_type="quiz"][game_mode="exam"] {
  background-image: url(css/icons/template/exam.svg);
}

.trophies [task_type="quiz"][game_mode="poem"] {
  background-image: url(css/icons/template/poem.svg);
}

.trophies [access="private"] {
  background-image: url(css/icons/streak_data/private.svg);
}

.trophies [access="public"] {
  background-image: url(css/icons/streak_data/public.svg);
  display: none;
}

.trophies [access="group"] {
  background-image: url(css/icons/streak_data/group.svg);
  display: none;
}

.trophies [task_settings] {
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 0.7em;
  height: auto;
  width: auto;
}

[trophy] {
  width: 1.4em;
  height: 1.4em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

[trophy="private"] {
  background-image: url(css/icons/streak_data/private.svg);
  background-size: 70%;
  opacity: 0;
}

[trophy="group"] {
  background-image: url(css/icons/streak_data/group.svg);
  background-size: 70%;
}

[trophy="public"] {
  background-image: url(css/icons/streak_data/public.svg);
  background-size: 70%;
}

[trophy="private"].done {
  opacity: 1;
}

[trophy="streak"] {
  background-image: url(css/icons/achievements/7streak_white.svg);
  opacity: 0.3;
}

[trophy="streak"].done {
  opacity: 1;
}

[trophy="time"] {
  background-image: url(css/icons/achievements/stopwatch_white.svg);
  opacity: 0.3;
}

[trophy="time"].done {
  opacity: 1;
}

[trophy="completion"] {
  display: none;
}

[trophy="completion"].done {
  background-image: url(css/icons/achievements/crown_white.svg);
  display: block;
}

[trophy="percent"] {
  display: none;
  height: auto;
  width: 3em;
}

[trophy="percent"].done {
  display: grid;
  place-items: center;
  gap: 0.15em;
}

[trophy="percent"] .percent_frame {
  width: 100%;
  height: 0.5em;
  border-radius: 1em;
  border: 1px solid var(--white);
  overflow: hidden;
}

[trophy="percent"] .percent_line {
  height: 100%;
  background-color: var(--white);
}

.task_results .result_percent {
  display: grid;
  justify-items: center;
  place-content: center;
}

.task_results .result_percent[type="percent"] {
  grid-template-rows: auto 0.5em;
  gap: 0.2em;
}

.task_results .percent {
  font-size: 0.75em;
  font-family: NotoSansRegular;
  color: var(--white);
}

/* Nagyobb streak panel az instrukció oldalon */
.instruction {
  z-index: 1;
}

.instruction .streak {
  font-size: min(1.5rem, 4.5vw);
}

.instruction .trophies {
  font-size: 0.8em;
}

/* Gombok */
[button_info] .description {
  font-family: NotoSansLight;
}

.streak_menu [button] .title {
  color: var(--white);
  overflow: visible;
}

.icon {
  width: min(4rem, 15vw);
  height: min(4rem, 15vw);
  background-size: contain;
  background-repeat: no-repeat;
}

.button .icon {
  width: min(2rem, 8vw);
  height: min(2rem, 8vw);
}

.icon.edit {
  background-image: url(css/icons/menu/createstreak.svg);
}

.icon.browse {
  background-image: url(css/icons/menu/browsestreaks.svg);
}

.icon.instant_streak {
  background-image: url(css/icons/menu/instant.svg);
}

.button.pink .icon.back {
  background-image: url(css/icons/editing/back_white.svg);
}

.icon.next {
  background-image: url(css/icons/editing/next.svg);
}

.icon.paste {
  background-image: url(css/icons/editing/paste.svg);
}

.icon.campaign {
  background-image: url(css/icons/editing/campaign.svg);
}

.button.blue .icon.delete_streak {
  background-image: url(css/icons/editing/delete_blue.svg);
}
.button.blue .icon.block_streak {
  background-image: url(css/icons/editing/block_streak_blue.svg);
}

.button.blue .icon.switch {
  background-image: url(css/icons/editing/enter_blue.svg);
}

.button.orange .icon.enter {
  background-image: url(css/icons/editing/enter_orange.svg);
}

.button.blue .icon.enter {
  background-image: url(css/icons/editing/enter_blue.svg);
}

.button.green .icon.enter {
  background-image: url(css/icons/editing/enter_green.svg);
}

.button.pink .icon.enter {
  background-image: url(css/icons/editing/enter_white.svg);
}

.icon.listen {
  background-image: url(css/icons/game/listen.svg);
}

.icon.start {
  background-image: url(css/icons/game/start.svg);
  filter: invert(100%);
}

.icon.continue {
  background-image: url(css/icons/game/continue.svg);
  filter: invert(100%);
}

.button.blue .icon.restart {
  background-image: url(css/icons/game/restart_blue.svg);
}

.button.green .icon.copy {
  background-image: url(css/icons/editing/copy_green.svg);
}

.preload.icon.download_xlsx,
.button.green .icon.download_xlsx {
  background-image: url(css/icons/download_green.svg);
}

.button.green .icon.download {
  background-image: url(css/icons/download.svg);
}

.icon.quick_test {
  background-image: url(css/icons/menu/quicktest_active.svg);
}

.icon.imprinting {
  background-image: url(css/icons/game/imprinting.svg);
}

.icon.phrases {
  background-image: url(css/icons/streak_data/language.svg);
}

.icon.spelling {
  background-image: url(css/icons/streak_data/spelling.svg);
}

.icon.create_streak {
  background-image: url(css/icons/game/star_active_new.svg);
}

.icon.geography {
  background-image: url(css/icons/streak_data/geography.svg);
}

.icon.google {
  background-image: url(css/google.svg);
}

[button="eduid"] {
  --border-color: #1273bc;
  --text-color: #003654;
  align-items: center;
  background-color: white;
  outline-color: var(--border-color);
  &:hover {
    box-shadow: 0 0 var(--button_glow) 1px var(--border-color);
  }
  & .icon {
    width: 5rem;
    background-image: url(css/eduid.png);
  }
  & .title {
    color: var(--text-color);
    transform: none;
  }
}

.icon.mic {
  background-image: url(css/icons/editing/microphone_empty.svg);
}

.icon.mic.active {
  background-image: url(css/icons/editing/microphone_full.svg);
}

.preload.icon.refresh,
.button.pink .icon.refresh {
  background-image: url(css/icons/game/restart_white.svg);
}

[page] {
  position: relative;
  width: 100%;
  height: 100%;
  transition-duration: var(--page_change_time);
  padding: 1em;
  display: grid;
  gap: 1rem;
  place-items: center;
  justify-self: center;
  align-content: start;
  overflow: auto;
  grid-template-rows: 1fr;
}

[page].center {
  align-items: center;
}

[page="instructions"] {
  gap: 2rem;
  place-content: center;
}

[page="instructions"] .content {
  display: grid;
  gap: 2rem;
  place-items: center;
}

[page="instructions"] .content[set_list] {
  grid-template-columns: repeat(auto-fill, minmax(min(20em, 60vw), max-content));
  place-content: center;
  padding: 1rem;
}

[page="instructions"][game="set"] {
  grid-template-rows: auto auto;
  place-content: center;
}

.game[type="set"] .center {
  justify-content: inherit;
}

[page].disabled {
  opacity: 0;
  pointer-events: none;
  display: none;
}

[page] .info {
  justify-self: start;
  font-family: NotoSansCondRegular;
  color: var(--text_main);
  font-size: min(1em, 5vw);
}

[page] .info.center {
  justify-self: center;
  text-align: center;
}

[page] .info.center.light {
  font-family: NotoSansLight;
}

[page] .promo {
  color: var(--text_main);
  font-size: min(0.8em, 5vw);
}

[page] .module {
  display: grid;
  grid-auto-flow: column;
}

[page] .module_title {
  justify-self: start;
  font-family: NotoSansCondBlack;
  color: var(--text_main);
  font-size: min(1.2em, 4vw);
  text-shadow: var(--dark) 2px 2px 2px;
}

[page] .module_title.center {
  justify-self: center;
  text-align: center;
}

[page] .module_more {
  justify-self: end;
  font-family: NotoSansCondBlack;
  color: var(--link);
  font-size: min(1.2em, 4vw);
  cursor: pointer;
}

[page] .module_more:hover {
  color: var(--teachers_bg);
}

[page] .info_center {
  font-family: NotoSansLight;
  text-align: center;
  color: var(--text_main);
  font-size: min(1rem, 3.5vw);
}

[page] .edit_info {
  display: grid;
  gap: 0.25rem;
}

[editor="quiz"] .edit_info {
  width: 100%;
}

[page] .edit_info .info_center {
  font-family: NotoSansRegular;
}

[page] .edit_info p {
  margin: 0;
}

[page] textarea.info_center {
  resize: none;
  padding: 0.5em;
  border: 1px solid var(--text_main);
  color: var(--text_main);
  font-family: NotoSansRegular;
  font-size: min(0.9em, 3vw);
}

[page] textarea.info_center::placeholder {
  line-height: 1.4;
  font-size: min(0.9em, 3vw);
}

[page="game"] .button {
  width: 100%;
}

[page="feedback"] {
  grid-template-rows: auto;
}

[page="feedback"] textarea,
[page="feedback"] select {
  width: 100%;
  padding: 1rem;
  font-family: NotoSansLight;
  font-size: min(1.2em, 4vw);
  background-color: var(--white);
  color: var(--dark);
  border-radius: 0.5rem;
  outline: 1px solid var(--dark);
  border: none;
  resize: none;
}

.safari [page="feedback"] textarea,
.safari [page="feedback"] select {
  outline: 1px solid transparent;
  border: 1px solid var(--dark);
}

[page="feedback"] select option {
  font-size: 16px;
  cursor: pointer;
}

[page="feedback"] textarea::placeholder {
  font-size: 0.8em;
}

.feedback_sent {
  text-shadow: var(--dark) 2px 2px 2px;
  font-size: 1.2rem;
  color: var(--color1);
}

/* [page="create"] .button[button="back"] {
    grid-template-columns: 1fr;
    padding: 0.5em;
} */

[page="code"] {
  grid-template-rows: 1fr;
  width: 100%;
  overflow: auto;
}

[page="code"] .content {
  gap: 1rem;
  place-items: center;
  width: min(100%, var(--max-width));
}

[page="opening"] {
  gap: 0;
  grid-template-rows: 1fr;
}

[page="opening"] .footer {
  margin-top: 1rem;
}

[page="opening"] .info li:before {
  width: 1rem;
  height: 1rem;
  transform: translate(-1.5rem, 0.1rem);
}

[page="opening"] .info {
  color: var(--text_main);
  font-size: min(1.2em, 4vw);
  text-shadow: var(--dark) 2px 2px 2px;
}

[page="opening"] .opening_text .info {
  color: var(--color7);
}

[page="opening"] .content {
  gap: 0rem;
  place-items: center;
}

[page="streaks"] {
  grid-template-rows: 1fr auto;
  overflow-y: auto;
  width: 100%;
}

[page="streaks"] .content {
  gap: 0;
  place-items: center;
  align-self: start;
  height: 100%;
  align-content: start;
  grid-template-rows: auto auto 1fr;
  width: min(100%, 90rem);
}

[page="streaks"] .content.load {
  grid-template-rows: auto 1fr;
}

[page="streaks"] .content [page="loader"] {
  display: none;
}

[page="streaks"] .content.load [page="loader"] {
  display: grid;
}

[page="streaks"] .content.load [modules] {
  display: none;
}

[page="streaks"] .content.load .streak_buttons {
  display: none;
}

[page="streaks"] .main_buttons {
  display: grid;
  gap: min(1rem, 3vw);
  grid-template-columns: repeat(2, 1fr);
  margin: 0.5rem 0;
}

[page="streaks"] .mainpage {
  width: 100%;
  height: 100%;
  display: grid;
  gap: 1rem;
  place-items: center;
  align-self: start;
  align-content: start;
  overflow: hidden;
  padding: min(1rem, 2vw);
}

.mainpage.disabled {
  display: none;
}

/* .buttons {
    display: grid;
    gap: 1rem;
    grid-auto-flow: column;
    place-items: center;
}

@media screen and (max-width: 550px) {
    .mainpage .buttons {
        grid-auto-flow: row;
        place-items: center;
    }
     .buttons {
        grid-auto-flow: row;
    } 
} */

[page="streaks"] .searchpage {
  width: 100%;
  height: 100%;
  display: grid;
  gap: 1rem;
  place-items: center;
  grid-template-rows: auto 1fr;
}

.searchpage.disabled {
  display: none;
}

[page="loggedout"] {
  grid-template-rows: 1fr;
}

[page="loggedout"] .content {
  gap: 1rem;
  grid-template-rows: 1fr auto 1fr;
  align-items: end;
  justify-items: center;
  align-self: start;
  overflow: hidden;
  height: 100%;
  padding: 1rem 0;
}

[page="loggedout"][type="play"] .content {
  gap: 2rem;
  grid-template-rows: 1fr auto auto 1fr;
}

.footer {
  display: grid;
  grid-auto-flow: column;
  place-items: center;
  place-content: center;
  align-self: end;
  gap: 2rem;
}

.flink {
  color: var(--link);
  font-family: NotoSansCondBlack;
  font-size: min(1.5rem, 5vw);
  text-align: center;
  cursor: pointer;
}

.flink:hover {
  color: var(--teachers_bg);
}

[page="instructions"] .buttons {
  display: grid;
  gap: 1em;
  justify-items: center;
  grid-template-columns: 1fr;
  grid-auto-flow: inherit;
}

/* @media screen and (max-width: 550px) {
    [page="instructions"] .buttons {
        grid-auto-flow: row;
    }
} */

[page="instructions"] .button {
  width: 100%;
}

.gamemodebutton {
  width: 100%;
  display: grid;
  gap: 0.5rem;
  justify-items: center;
}

.gamemode_description {
  color: var(--white);
  font-size: 0.75em;
  text-align: center;
}

[page="register"] .regcheckbox {
  display: grid;
  grid-gap: 0.1em;
  grid-template-columns: auto 1fr;
  place-items: center;
  justify-self: start;
  grid-column: 2 / 3;
  font-size: 0.9em;
}

[page="register"] .regcheckbox label {
  color: var(--text_main);
}

[page="register"] .regcheckbox label span {
  font-size: 1em;
  color: var(--color2);
  text-decoration: underline;
  cursor: pointer;
}

[page="register"] .regcheckbox label span:hover {
  color: var(--color2);
}

.popup_content .gdpr_text {
  font-size: min(1rem, 4vw);
}

.popup_content .gdpr_text .cim {
  font-size: 2em;
  font-weight: bold;
  margin-top: 0;
}

.popup_content .gdpr_text .alcim {
  font-size: 1.25em;
  font-weight: bold;
}

.popup_content .gdpr_text .leiras {
  font-size: 1em;
}

.popup_content .gdpr_text .elem {
  font-style: italic;
  font-weight: bolder;
}

.popup_content .gdpr_text ls li {
  margin-left: 2.5rem;
}

.title {
  font-family: NotoSansCondBlack;
  font-size: min(2rem, 5vw);
  text-align: center;
  color: var(--text_main);
}

.title a {
  font-family: NotoSansCondBlack;
  font-size: 1em;
  text-align: center;
  color: var(--link);
}

[page="menu"] {
  gap: 2rem;
  grid-auto-flow: column;
  place-items: start;
}

.gamemodes,
.popular_streaks {
  display: grid;
  gap: 1rem;
}

/* [page="game"] {
    gap: 0.5rem;
    grid-template-columns: 1fr;
    align-content: start;
} */

[page="game"].set {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  padding: 0;
  z-index: 5;
}

[page="game"].set iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  border: none;
}

[page="end"] {
  gap: 2em;
  grid-template-columns: 1fr;
  align-content: start;
}

#results,
.results {
  display: grid;
  background-color: #100;
  font-size: min(1.25rem, 4vw);
  pointer-events: none;
  user-select: none;
  /* width: 100%;
	grid-auto-flow: column;
	place-content: center; */
  padding: 1rem;
  gap: 0.5rem;
  width: 100%;
}

#results[trophyindex="0"] {
  grid-template-areas: "trophy trophy" "display display";
}

/* #results[trophyindex="1"] {
    grid-template-areas: "trophy trophy" "display display";
} */

#results[trophyindex="1"],
#results[trophyindex="2"] {
  grid-template-areas: "trophy trophy" "results results" "display display";
}

.results {
  grid-auto-flow: row;
  background-color: var(--teachers_bg);
}

[page="end"][gamemode="quiz"] .results {
  margin-bottom: 2rem;
}

.results .resultpanel {
  display: grid;
  grid-auto-flow: column;
  place-content: center;
}

.results .knowledge {
  justify-self: center;
  grid-area: inherit;
  color: white;
  font-family: NotoSansRegular;
  margin-top: 1rem;
}

#results [display] {
  grid-area: display;
  display: grid;
  grid-auto-flow: column;
  place-self: center;
}

#results[trophyindex="0"] [display] {
  grid-template-areas: "stars stars";
}

#results[trophyindex="1"] [display] {
  grid-template-areas: "stars timer";
}

#results[trophyindex="2"] [display] {
  grid-template-areas: "stars timer";
}

#results [achievement] {
  grid-area: trophy;

  font-size: min(1.3rem, 10vw);
  font-family: NotoSansCondBlack;
  color: var(--text_main);
  text-align: center;
}

#results [resultrow] {
  grid-area: results;
  place-self: center;
  margin: 0.25rem;
}

#results [resultrow]:empty {
  margin: 0;
}

#results [resultrow] [result] {
  --base-width: 1.6rem;
  --base-height: 0.8rem;
  --current-width: 2rem;
  --current-height: 1.25rem;
  height: var(--current-height);
  display: grid;
  place-items: center;
  float: left;
  width: var(--current-width);
}

#results [resultrow] [result] .resultcolor {
  width: var(--base-width);
  height: var(--base-height);
  border-radius: 0.3rem;
  transition-duration: 250ms;
}

#results [resultrow] [result="null"] .resultcolor {
  background-color: rgba(255, 255, 255, 0.1);
  outline: 1px solid rgba(255, 255, 255, 0.5);
}

#results [resultrow] [result="0"] .resultcolor {
  background-color: var(--color8);
}

#results [resultrow] [result="1"] .resultcolor {
  background-color: var(--color2);
}

#results [resultrow] [result="2"] .resultcolor {
  background-color: var(--instant_bg);
}

/* #results [resultrow] [result="3"] .resultcolor{
    background-color: var(--instant_bg);
} */
/* #results [resultrow] [result="repetition"].done { */
#results [resultrow] [result].done {
  animation: removeRepetition 0.5s linear forwards;
}

#results [resultrow] [tasktype="repetition"] .resultcolor {
  background-color: rgba(255, 255, 255, 0.3);
}

#results [resultrow] [tasktype="repetition"]::after {
  position: absolute;
  content: "R";
  color: var(--white);
  translate: 0 1px;
  font-size: 0.6rem;
}

#results [resultrow] [tasktype="repetition"][result="0"] .resultcolor {
  background-color: var(--color8);
}

#results [resultrow] [tasktype="repetition"][result="1"] .resultcolor {
  background-color: var(--color2);
}

#results [resultrow] [tasktype="repetition"][result="2"] .resultcolor {
  background-color: var(--instant_bg);
}

#results [resultrow] [tasktype="repetition"][result="2"]::after {
  color: var(--dark);
}

@keyframes removeRepetition {
  100% {
    scale: 0;
    width: 0;
  }
}

#results [resultrow] [result].current .resultcolor {
  transition-duration: 0.25s;
  width: var(--current-width);
  height: var(--current-height);
  animation: selectResultBox 0.75s linear;
  animation-delay: 0.25s;
}

@keyframes selectResultBox {
  0% {
    scale: 1;
  }

  25% {
    scale: 1.2;
  }

  50% {
    scale: 0.8;
  }

  70% {
    scale: 1.1;
  }

  85% {
    scale: 0.9;
  }

  95% {
    scale: 1.05;
  }

  100% {
    scale: 1;
  }
}

#results [stars] {
  grid-area: stars;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  justify-self: center;
  width: 9em;
  gap: 0.25rem;
}

#results [timer] {
  grid-area: timer;

  width: 3em;
  display: grid;
  place-items: center;
  font-size: 3em;
  font-family: NotoSansCondBlack;
  color: var(--color1);
  transform: translateY(0.25rem);
}

#results[trophyindex="0"] [timer] {
  display: none;
}

#results[trophyindex="0"] [resultrow] {
  display: none;
}

#timer,
.timer {
  width: 3em;
  display: grid;
  place-items: center;
  font-size: 3em;
  font-family: NotoSansCondBlack;
  color: var(--color1);
  transform: translateY(0.25rem);
}

[page="end"] .timer {
  text-shadow: -1px -1px 0px var(--white), -1px 1px 0px var(--white), 1px 1px 0px var(--white),
    1px -1px 0px var(--white);
}

[page="end"][gamemode="quiz"] .timer {
  width: auto;
}

[page="end"] .buttons {
  display: grid;
  gap: 1em;
  justify-items: center;
}

.highscore_selector {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  gap: 1rem;
  align-items: end;
  height: 4rem;
  align-content: end;
}

/* .highscore_selector {
    padding: 0;
} */

.highscores {
  width: 100%;
  background-color: var(--color4);
  color: var(--textbox_col);
  padding: 0.5rem;
  display: grid;
  gap: 0.25rem;
}

.highscores .title {
  font-size: min(1.2rem, 6vw);
}

.highscores .title:empty {
  display: none;
}

.highscores .list {
  display: grid;
  grid-template-columns: 1fr;
  place-content: center;
  font-size: min(1rem, 3vw);
  border-radius: 0.25rem;
  backdrop-filter: brightness(150%);
  -webkit-backdrop-filter: brightness(150%);
  overflow: hidden;
}

.highscore {
  display: grid;
}

.highscore .image {
  width: min(2.5rem, 5vw);
  height: min(2.5rem, 5vw);
  border-radius: 50%;
  margin: 0 min(0.5rem, 1vw);
  overflow: hidden;
}

.highscore .image img {
  width: 100%;
  height: 100%;
}

.highscore.current {
  animation: currentHighscore 1s infinite;
  color: var(--white);
}

@keyframes currentHighscore {
  50% {
    color: var(--color1);
  }
}

.highscore .dotted {
  border-bottom: 1px dotted var(--text_main);
  margin-bottom: 4px;
  grid-column: 2 / 3;
}

.highscores .list.user .highscore {
  grid-template-columns: auto 1fr auto;
  padding: 1rem 0.5rem;
}

/* .highscores :is(.list.group, .list.global) .highscore { */
.highscores .list.group .highscore,
.highscores .list.global .highscore {
  grid-template-columns: 1.25rem auto 1fr auto;
  align-items: center;
  border-bottom: 1px dotted var(--dark);
  padding: min(0.5rem, 5vw);
}

.highscores .list .highscore:nth-child(odd) {
  backdrop-filter: brightness(115%);
  -webkit-backdrop-filter: brightness(115%);
}

.highscores .list .highscore:last-child {
  border: none;
}

.teacher_info {
  text-align: center;
  font-size: min(0.8rem, 3vw);
}

#stars,
.stars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 9em;
  gap: 0.25rem;
}

[star] {
  width: 2em;
  height: 2em;
  background-image: url(css/icons/game/star_inactive.svg);
  background-size: contain;
  background-repeat: no-repeat;
  transition-duration: var(--star-duration);
}

[star].done {
  background-image: url(css/icons/game/star_active.svg);
  animation: starDone 0.5s ease-in-out;
  animation-iteration-count: 1;
  transform: scale(1) rotate(0deg);
}

[star="1"].done {
  background-image: url(css/icons/game/star_active_1.svg);
}

[star="2"].done {
  background-image: url(css/icons/game/star_active_2.svg);
}

[star="3"].done {
  background-image: url(css/icons/game/star_active_3.svg);
}

[star="4"].done {
  background-image: url(css/icons/game/star_active_4.svg);
}

[star="5"].done {
  background-image: url(css/icons/game/star_active_5.svg);
}

[star="6"].done {
  background-image: url(css/icons/game/star_active_6.svg);
}

[star="7"].done {
  background-image: url(css/icons/game/star_active_7.svg);
}

@keyframes starDone {
  0% {
    transform: scale(1);
  }

  75% {
    transform: scale(1.5) rotate(72deg);
  }

  100% {
    transform: scale(1) rotate(72deg);
  }
}

[page="end"] [star] {
  background-image: url(css/icons/game/star_end.svg);
}

.game_instruction {
  font-size: min(1.3rem, 10vw);
  font-family: NotoSansCondBlack;
  color: var(--text_main);
  text-align: center;
}

[game] form {
  width: 100%;
}

[game] [task] {
  grid-area: task;
  width: 100%;
  display: grid;
  transition-duration: 200ms;
}

[game][groupIndex] #knowledge {
  grid-area: knowledge;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-content: center;
}

[game][groupIndex] #knowledge .knowledge_icon {
  width: 3rem;
  height: 3rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

[game][groupIndex] #knowledge .knowledge_icon.hide {
  animation: hide 0.25s ease-in-out forwards;
}

[game][groupIndex] #knowledge .knowledge_icon.show {
  animation: show 0.25s linear forwards;
}

[game][groupIndex="0"] #knowledge .knowledge_icon {
  background-image: url(icons/game/danger.svg);
}

[game][groupIndex="1"] #knowledge .knowledge_icon {
  background-image: url(icons/game/gray_brain.svg);
}

[game][groupIndex="2"] #knowledge .knowledge_icon {
  background-image: url(icons/game/heart.svg);
}

[game] #hint,
[game] #hint_template {
  grid-area: hint;
}

[game] #task {
  font-size: min(2rem, 6vw);
  font-family: NotoSansRegular;
  text-align: center;
  /* text-transform: uppercase; */
  color: var(--text_main);
  display: grid;
  place-content: center;
}

[game] #task.disabled {
  background-color: transparent;
}

[game] #task[gamemode="imprinting"].disabled::after {
  content: var(--counter);
}

[game] #task.inactive {
  color: var(--white);
}

[game] #task.locked {
  background-image: url(css/icons/editing/publishing/padlock.svg);
  background-repeat: no-repeat;
  background-position: center;
}

.table {
  font-size: min(1rem, 5vw);
  border-spacing: 0;
  border-collapse: collapse;
}

.table td {
  border: 1px solid var(--text_sub);
  padding: min(0.5rem, 3vw);
  width: min(2.5rem, 5vw);
  height: min(2.5rem, 5vw);
}

.table_header {
  font-weight: bold;
  background-color: var(--color7);
}

.table_marked {
  background-color: var(--color2);
}

@keyframes hide {
  0% {
    width: 2rem;
    height: 2rem;
  }

  100% {
    width: 0rem;
    height: 0rem;
  }
}

@keyframes show {
  0% {
    width: 0rem;
    height: 0rem;
  }

  75% {
    width: 2.5rem;
    height: 2.5rem;
  }

  100% {
    width: 2rem;
    height: 2rem;
  }
}

[game] #answer {
  grid-area: answer;
  width: 100%;
  font-size: min(2em, 6vw);
  display: grid;
}

[game] #answer.disabled {
  pointer-events: none;
}

[game] #answer [answer] {
  font-family: NotoSansRegular;
  text-align: center;
}

[game] #answer [answer="answer"] {
  grid-row: 1;
  grid-column: 1;
  color: transparent;
  caret-color: var(--text_main);
}

[game] #answer [answer="feedback"] {
  grid-row: 1;
  grid-column: 1;
  color: var(--text_main);
  pointer-events: none;
}

[game] #answer [answer="placeholder"] {
  grid-row: 1;
  grid-column: 1;
  color: var(--color7);
  pointer-events: none;
}

[game] #answer [answer="placeholder"].disabled {
  display: none;
}

[game] #answer [answer="answer"].correct {
  color: var(--color5);
}

[game] #answer [answer="answer"].wrong {
  color: var(--color8);
}

[game] #answer [answer="answer"][contenteditable]:focus {
  outline: none;
}

[game] button {
  width: 6em;
  height: 6em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
  cursor: pointer;
  border-radius: var(--button-border-radius);
  border: var(--button-border);
  background-color: var(--color2);
}

[game] button:hover {
  background-color: var(--color5);
}

[game] #feedback {
  grid-area: feedback;
}

[game] #feedback,
[page="end"] .feedback {
  pointer-events: none;
  font-size: min(1.5rem, 5vw);
  font-family: NotoSansRegular;
  text-align: center;
  display: grid;
  place-content: center;
  height: min(7rem, 20vw);
  width: 100%;
}

[page="end"] .feedback {
  height: auto;
}

[page="end"][gamemode="quiz"] .feedback {
  height: auto;
}

[game] #feedback.default,
[page="end"] .feedback.default {
  opacity: 1;
}

[game] #feedback.wrong,
[page="end"] .feedback.wrong {
  opacity: 1;
  color: var(--color8);
}

[game] #feedback.correct,
[page="end"] .feedback.correct {
  opacity: 1;
  color: var(--teachers_bg);
}

[game] #feedback.win,
[page="end"] .feedback.win {
  opacity: 1;
  color: var(--color2);
}

.achievements {
  display: grid;
  gap: 1em;
  grid-auto-flow: column;
}

.achievements [trophy] {
  width: min(3rem, 10vw);
  height: min(3rem, 10vw);
}

.achievements [trophy="streak"] {
  background-image: url(css/icons/game/trophy_7.svg);
  opacity: 0.1;
}

.achievements [trophy="streak"].done {
  opacity: 1;
}

.achievements [trophy="percent"] {
  display: grid;
  gap: 0.2em;
  grid-template-rows: 1fr auto;
  place-items: center;
  align-content: center;
  color: var(--white);
}

.achievements [trophy="percent"][done="false"] {
  grid-template-rows: auto;
  transform: translateY(8px);
}

.achievements [trophy="percent"] .crown {
  width: 100%;
  height: 100%;
  background-image: url(css/icons/game/crown.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/****************************CREATE*****************************/
[page="create"] .content {
  align-self: start;
  height: 100%;
}

[page="create"] .content[game="interactions"] {
  overflow: hidden;
  width: 100%;
}

[page="create"] .content[game="interactions"] [subpage="database"] {
  width: 100%;
  margin-top: 0.5rem;
}

[page="create"] .content[game="interactions"] [subpage="publish"],
[page="create"] .content[game="self_test"] [subpage="publish"] {
  justify-self: center;
}
[page="create"] .content[game="business_modeling_tools"] [subpage="publish"],
[page="create"] .content[game="learning_journey"] [subpage="publish"] {
  justify-self: center;
  grid-template-rows: auto auto auto 1fr;
  overflow: auto;
}
[page="create"] .content[game="business_modeling_tools"] [subpage="publish"] .buttons,
[page="create"] .content[game="learning_journey"] [subpage="publish"] .buttons {
  align-self: end;
}

[page="create"] .create_selector {
  width: 100%;
  display: grid;
  gap: 3rem;
  align-self: start;
  height: 100%;
  grid-template-rows: auto 1fr auto;
}

[page="create"] .create_selector > .title {
  font-family: NotoSansRegular;
  font-size: min(1.8rem, 5vw);
}

[page="create"] .create_selector .buttons {
  place-content: center;
}

[page="create"] .create_editor {
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}

[page="create"] .create_games {
  --size: 12rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  place-content: center;
}

[page="create"] .create_games [create] {
  position: relative;
  --background-color: var(--white);
  --border-color: var(--white);
  width: var(--size);
  height: var(--size);
  background-color: var(--background-color);
  border-radius: 1.5rem;
  border: 0.5rem solid var(--border-color);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: grid;
  padding: 2rem 1rem;
  transition-duration: 150ms;
}
[page="create"] .create_games [create]:hover {
  scale: 1.1;
}

/* [page="create"] .create_games [create]::after {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  font-size: 1.5rem;
} */

[page="create"] .create_games [create].disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.5;
  display: none;
}

[page="create"] .create_games [create]:not(.selected):not(.disabled) {
  cursor: pointer;
}

[page="create"] .create_games [create].selected {
  --border-color: var(--color2);
  scale: 1.1;
}

[page="create"] .create_games [create] .text {
  font-family: NotoSansBlack;
  font-size: 22px;
  color: #191717;
  letter-spacing: -2px;
  text-align: center;
  align-self: end;
  justify-self: center;
}

[page="create"] .create_games [create="quiz"] .text {
  -webkit-text-stroke: 1px #009cdc;
  text-shadow: #8b8b8a 1px -2px 0px;
}

[page="create"] .create_games [create="7streak"] {
  background-image: url(css/icons/create_buttons/btn_7streak.svg);
  background-size: 80%;
}

[page="create"] .create_games [create="timeline"] {
  background-image: url(css/icons/create_buttons/btn_timeline.svg);
  background-size: 90% !important;
  background-position: top center !important;
}
[page="create"] .create_games [create="timeline"] .text {
  line-height: 1;
  translate: 0 1rem;
  font-size: 18px;
  letter-spacing: normal;
  font-family: NotoSansCondRegular;
}

[page="create"] .create_games [create="quiz"] {
  background-image: url(css/icons/create_buttons/btn_quiz.svg);
  background-size: 80%;
}

[page="create"] .create_games [create="set"] {
  background-image: url(css/icons/create_buttons/btn_set.svg);
  background-size: 80% !important;
  background-position: top center !important;
}
[page="create"] .create_games [create="set"] .text {
  line-height: 1;
  translate: 0 1rem;
  font-size: 18px;
  letter-spacing: normal;
  font-family: NotoSansCondRegular;
}

[page="create"] .create_games [create="gpt"] {
  background-image: url(css/icons/create_buttons/gpt.jpg);
}

[page="create"] .create_games [create="articulate"] {
  background-image: url(css/icons/create_buttons/storyline.png);
}

[page="create"] .create_games [create="self_test"] {
  background-image: url(css/icons/create_buttons/btn_self.svg);
  background-size: 85% !important;
  background-position: top center !important;
}
[page="create"] .create_games [create="self_test"] .text {
  line-height: 1;
  translate: 0 1rem;
  font-size: 18px;
  letter-spacing: normal;
  font-family: NotoSansCondRegular;
}

[page="create"] .create_games [create="treasure_hunt"] {
  background-image: url(css/icons/create_buttons/btn_treasurehunt.svg);
}

/* [page="create"] .create_games [create="interactions"] {
  background-image: url(css/icons/create_buttons/btn_interactions.svg);
} */
[page="create"] .create_games [create="interactions"] {
  background-image: url(css/icons/create_buttons/btn_interactions.svg);
  background-size: 80% !important;
  background-position: top center !important;
}
[page="create"] .create_games [create="interactions"] .text {
  line-height: 1;
  translate: 0 1rem;
  font-size: 18px;
  letter-spacing: normal;
  font-family: NotoSansCondRegular;
}

[page="create"] .create_games [create="survey"] {
  background-image: url(css/icons/create_buttons/btn_survey.svg);
  background-size: 80% !important;
  background-position: top center !important;
}
[page="create"] .create_games [create="survey"] .text {
  line-height: 1;
  translate: 0 1rem;
  font-size: 18px;
  letter-spacing: normal;
  font-family: NotoSansCondRegular;
}

[page="create"] .create_games [create="learning_journey"] {
  background-image: url(css/icons/create_buttons/btn_learning_journey.svg);
  background-size: 80% !important;
  background-position: top center !important;
}
[page="create"] .create_games [create="learning_journey"] .text {
  line-height: 1;
  translate: 0 1rem;
  font-size: 18px;
  letter-spacing: normal;
  font-family: NotoSansCondRegular;
}

[page="create"] .create_games [create="business_modeling_tools"] {
  background-image: url(css/icons/create_buttons/btn_bmt.svg);
  background-size: 75% !important;
  background-position: top center !important;
}
[page="create"] .create_games [create="business_modeling_tools"] .text {
  line-height: 1;
  translate: 0 1.4rem;
  font-size: 18px;
  letter-spacing: normal;
  font-family: NotoSansCondRegular;
}

[page="create"] .streaks {
  width: 100%;
  height: 100%;
  grid-template-columns: auto;
  place-self: center;
}

[page="create"] [preview] {
  display: grid;
  gap: min(1rem, 3vw);
  width: 100%;
  grid-template-columns: 1fr 1fr;
}

[page="create"] [preview] > div {
  display: grid;
  gap: min(1rem, 3vw);
  grid-template-rows: auto 1fr;
}

@media screen and (max-width: 700px) {
  [page="create"] [preview] {
    grid-auto-flow: row;
    grid-template-columns: auto;
  }
}

[page="create"] .input {
  width: 100%;
  padding: 0.5em 0.7em;
  font-size: min(1.2em, 5vw);
  font-family: NotoSansLight;
  background-color: var(--white);
  color: var(--text_main);
  border: none;
  border-radius: 0;
  border-bottom: 2px solid var(--color7);
}

[page="create"] .input:focus-visible {
  outline: none;
}

[page="create"] .input::placeholder {
  font-size: 0.8em;
}

[page="create"] .textarea {
  width: 100%;
  padding: 0.5em 0.7em;
  font-family: NotoSansLight;
  font-size: min(1.2em, 4vw);
  background-color: var(--white);
  color: var(--text_main);
  border: none;
  border-bottom: 2px solid var(--color7);
  resize: none;
}

[page="create"] .textarea:focus-visible {
  outline: none;
}

[page="create"] .textarea::placeholder {
  font-size: 0.8em;
}

[page="create"] [section="streak_image"] {
  width: min(100%, 30rem);
  grid-template-areas: "image edit";
  justify-self: center;
}

[page="create"] [section="streak_image"] img {
  grid-area: image;
  width: 100%;
  aspect-ratio: 1200/630;
  outline: 1px solid var(--text_main);
  border: none;
  background-image: url(css/icons/editing/photo_camera.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 30%;
  background-color: var(--text_main);
}

.safari [page="create"] [section="streak_image"] img {
  border: 1px solid var(--text_main);
  outline: none;
}

[page] :is(.templates, .modelist) {
  display: grid;
  grid-auto-flow: column;
  gap: 1em;
  justify-items: center;
  align-items: start;
}
[page] .modelist {
  justify-content: center;
}

[page] :is([template], [modelist]) {
  cursor: pointer;
  display: grid;
  gap: 0.5rem;
  place-items: center;
  position: relative;
  grid-template-columns: min(5.5em, 17vw);
}

[page] [template].disabled::after {
  position: absolute;
  content: "";
  width: 2rem;
  height: 2rem;
  background-image: url(css/icons/editing/publishing/padlock.svg);
  background-size: contain;
  top: auto;
  bottom: 1rem;
  left: auto;
  right: -0.5rem;
}

[page] [template] [template_icon],
[page] [modelist] [template_icon] {
  position: relative;
  width: min(5rem, 15vw);
  height: min(5rem, 15vw);
  border-radius: 1em;
  box-shadow: 0 0 0 1px var(--text_main);
  background-color: rgba(255, 255, 255, 0.1);
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
}

[page] [template="chemistry"] [template_icon] {
  background-image: url(css/icons/template/chemistry.svg);
}

[page] [template="geography"] [template_icon] {
  background-image: url(css/icons/template/geography.svg);
}

[page] [template="phrases"] [template_icon] {
  background-image: url(css/icons/template/language.svg);
}

[page] [template="math"] [template_icon] {
  background-image: url(css/icons/template/math.svg);
}

[page] [template="spelling"] [template_icon] {
  background-image: url(css/icons/template/spelling.svg);
}

[page] [template="testing"] [template_icon] {
  background-image: url(css/icons/template/testing.svg);
}

[page] [template="interaction"] [template_icon] {
  background-image: url(css/icons/template/interaction.svg);
}

[page] [template="set"] [template_icon] {
  background-image: url(css/icons/template/set.svg);
}

[page] [template="quiz"][rule="quiz"] [template_icon] {
  background-image: url(css/icons/template/arcade.svg);
}

[page] [template="quiz"][rule="jojo"] [template_icon] {
  background-image: url(css/icons/template/blitz.svg);
}

[page] [template="quiz"][rule="exam"] [template_icon] {
  background-image: url(css/icons/template/exam.svg);
}

[page] [template="quiz"][rule="poem"] [template_icon] {
  background-image: url(css/icons/template/poem.svg);
}

[page] [template="quiz"][rule="multiquiz"] [template_icon] {
  background-image: url(css/icons/template/multiquiz.svg);
}

[page] [template="survey"] [template_icon] {
  background-image: url(css/icons/template/survey.svg);
}

[page] [template="business_modeling_tools"] [template_icon]::after {
  position: absolute;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-family: NotoSansCondBlack;
  font-size: 1.5rem;
  color: white;
}
[page] [template="business_modeling_tools"][rule="bmc"] [template_icon]::after {
  content: "BMC";
}
[page] [template="business_modeling_tools"][rule="vpc"] [template_icon]::after {
  content: "VPC";
}
[page] [template="business_modeling_tools"][rule="ukt"] [template_icon]::after {
  content: "ÜKT";
}

[page] [template].selected [template_icon],
[page] [modelist].selected [template_icon] {
  box-shadow: 0 0 0 3px var(--color2);
  background-color: rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

[page] [template].disabled [template_icon],
[page] [modelist].disabled [template_icon] {
  filter: opacity(0.2);
}

[page] [template] [template_title],
[page] [modelist] [template_title] {
  font-size: min(0.8em, 2.5vw);
  font-family: NotoSansRegular;
  text-align: center;
}

/* [subpage="publish"] {
  grid-template-rows: auto auto auto auto 1fr;
} */
[subpage="publish"].active {
  grid-template-rows: auto auto 1fr auto;
}

[page] .publish_settings {
  display: grid;
  grid-auto-flow: column;
  gap: 1em;
  place-items: center;
}

[page] [publish_setting] {
  cursor: pointer;
  display: grid;
  place-items: center;
}

[page] [publish_setting] [template_icon] {
  width: min(5rem, 15vw);
  height: min(5rem, 15vw);
  border-radius: 1em;
  box-shadow: 0 0 0 1px var(--text_main);
  background-color: rgba(255, 255, 255, 0.1);
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
}

[page] [publish_setting="private"] [template_icon] {
  background-image: url(css/icons/editing/publishing/private.svg);
}

[page] [publish_setting="public"] [template_icon] {
  background-image: url(css/icons/editing/publishing/public.svg);
}

[page] [publish_setting="group"] [template_icon] {
  background-image: url(css/icons/editing/publishing/group.svg);
}

[page] [publish_setting="closed"] [template_icon] {
  background-image: url(css/icons/editing/publishing/closed.svg);
}

[page] [publish_setting].disabled::after {
  position: absolute;
  content: "";
  width: 2rem;
  height: 2rem;
  background-image: url(css/icons/editing/publishing/padlock.svg);
  background-size: contain;
}

[page] [publish_setting].disabled [template_icon] {
  filter: opacity(0.2);
}

[page] [publish_setting].selected [template_icon] {
  box-shadow: 0 0 0 3px var(--color2);
  width: min(5.5em, 17vw);
  height: min(5.5em, 17vw);
  pointer-events: none;
}

[page] [publish_setting] [template_title] {
  font-size: min(0.8em, 5vw);
  font-family: NotoSansRegular;
}

[page] .template_info {
  display: grid;
  gap: 0.25rem;
  width: 100%;
  place-items: center;
  padding: min(1rem, 2vw);
  border-radius: 1em;
  outline: 1px solid var(--text_main);
  border: none;
  font-size: min(1em, 3.5vw);
  text-align: center;
  background-color: var(--color4);
  color: var(--text_main);
  cursor: default;
}

.safari [page] .template_info {
  border: 1px solid var(--text_main);
  outline: none;
}

[create="publish"] .template_info {
  background-color: transparent;
  border: none;
}

[create="publish"] .template_info [description] {
  font-size: min(1.1rem, 4vw);
}

[create="publish"] .buttons {
  justify-content: center;
  margin-top: 1rem;
}

@media screen and (max-width: 500px) {
  [create="publish"] .buttons {
    grid-auto-flow: row;
    grid-template-columns: auto;
    place-items: center;
  }
}

.openingbuttons {
  margin-top: min(2rem, 5vw);
  margin-bottom: min(2rem, 5vw);
  display: grid;
  gap: 1rem;
  grid-auto-flow: column;
}

/* .openingbuttons .button {
    width: max-content;
} */

@media (orientation: portrait) {
  .openingbuttons {
    grid-auto-flow: row;
    gap: min(1.5rem, 5vw);
  }

  /* .openingbuttons .button {
        width: 100%;
    } */
}

[page] .template_info [title] {
  font-family: NotoSansCondBlack;
  font-size: 1.1em;
}

[page] .template_info [description] {
  width: 100%;
  font-size: 0.9em;
}

[page] .template_info [description] ol {
  list-style-type: unset;
  text-align: left;
  margin: 0;
  padding: 0 2rem;
}

[page] .template_info [description] ol li {
  margin: 0.5rem 0;
}

[page] .template_info.disabled {
  opacity: 0;
}

[page="create"] .template_settings {
  display: grid;
  gap: 1em;
  width: 100%;
}

[page="create"] .template_settings .settingRow {
  display: grid;
  gap: 0.25rem;
}
[page="create"] .template_settings .settingRow[type="modelist"] .template_info {
  margin: 0.5rem 0;
}

[page="create"] .template_settings .select {
  font-family: NotoSansRegular;
  font-size: min(1em, 3vw);
  border: 1px solid var(--text_main);
  border-radius: 1em;
  background-color: var(--white);
  padding: min(1rem, 3vw);
}

.code {
  font-family: NotoSansCondBlack;
  letter-spacing: min(1rem, 3vw);
  font-size: min(3rem, 8vw);
}

[page="create"] .evaluateSettings:empty {
  display: none;
}

[page="create"] .evaluateSettings {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
}

/********************************************/
/******************SUBPAGE*******************/
/********************************************/
[subpage],
[billing] {
  width: min(100%, var(--max-width));
  height: 100%;
  align-content: start;
  padding: min(1rem, 3vw);
  gap: min(1rem, 3vw);
  place-items: center;
  grid-row: 2;
  grid-column: 1;
  align-self: start;
  transition-duration: var(--star-duration);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  display: none;
}

[subpage].active {
  opacity: 1;
  pointer-events: auto;
  z-index: 0;
  display: grid;
}

[page="create"] [subpage="basic_data"] {
  grid-template-rows: repeat(6, auto) 1fr;
}

[page="create"] [subpage="basic_data"] .buttons {
  align-self: end;
}

[page="create"] [dynamicEditorPage] {
  grid-template-rows: 1fr;
  padding: 0;
  overflow: hidden;
}

[page="create"] [dynamicEditorPage] [subpage="database"] {
  width: auto;
}

[page="create"] [dynamicEditorPage] [editor] {
  width: 100%;
  height: 100%;
  padding: min(1rem, 3vw);
  display: grid;
  gap: min(1rem, 3vw);
  justify-items: center;
}

[page="create"] [dynamicEditorPage] [editor="classic"] {
  grid-template-rows: auto 1fr auto auto;
  gap: min(1rem, 3vw);
  padding: 1rem 0;
}

[page="create"] [dynamicEditorPage] [editor="quiz"] {
  grid-template-rows: 1fr auto auto;
  gap: min(1rem, 3vw);
  padding: 1rem 0;
}

[page="create"] [dynamicEditorPage] [editor="quiz"][mode="poem"] {
  grid-template-rows: auto 1fr auto auto;
}

[page="create"] [dynamicEditorPage] [editor="quiz_feedback"] {
  grid-template-rows: 1fr auto auto;
  gap: min(1rem, 3vw);
  padding: 1rem 0;
}

[page="create"] [dynamicEditorPage] [editor="dialogue"] {
  grid-template-rows: 1fr auto auto;
  padding: 0;
  overflow: hidden;
}

/* [page="create"] [dynamicEditorPage] [editor="dialogue"] input {
    margin: 0;
    padding: 0.5rem 0;
} */

[page="create"] [dynamicEditorPage] [editor="set"] {
  grid-template-rows: auto 1fr auto auto;
  padding: 0 0 min(1rem, 3vw) 0;
}

[page="create"] [dynamicEditorPage] [editor="gpt"] {
  grid-template-rows: auto 1fr auto;
}

[page="create"] [dynamicEditorPage] [editor="articulate_highscores"] {
  grid-template-rows: 1fr auto;
}

[page="create"] [dynamicEditorPage] [editor="articulate_saves"] {
  grid-template-rows: 1fr auto;
}

[page="create"] [dynamicEditorPage] [editor="self_test_settings"] {
  padding: 0 0 min(1rem, 3vw) 0;
}

[page="create"] [dynamicEditorPage] [editor="timeline"] {
  grid-template-rows: 1fr auto;
}

[page="create"] [dynamicEditorPage] [editor="business_modeling_tools"] {
  grid-template-rows: auto 1fr auto auto;
  gap: min(1rem, 3vw);
  padding: 1rem 0;
}

[date] {
  color: var(--link);
  font-family: NotoSansCondBlack;
  cursor: pointer;
}

[date]:hover {
  color: var(--teachers_bg);
}

/* [page="create"] [button="next"] {
    grid-template-columns: 1fr 3rem;
    padding-right: 0;
    padding-left: 0.5em;
} */

[page="create"] [editorpages] {
  position: absolute;
}

.database_editor,
.feedback_editor {
  --columncount: 2;
  display: grid;
  height: 100%;
  align-content: start;
}

[editor="quiz"] .database_editor {
  width: 100%;
  padding: 1rem 0;
  gap: 1rem;
}

[editor="quiz_feedback"] .feedback_editor {
  width: 100%;
  padding: 1rem 0;
  gap: 1rem;
}

/* [editor="quiz"] .button[button="newrow"] {
    place-self: center;
} */

.database_editor [block] [buttons] {
  display: grid;
  grid-gap: 1rem;
  grid-auto-flow: column;
  place-items: center;
  place-content: center;
}

[editor="articulate_quiz"] .database_editor .buttons {
  grid-auto-flow: row;
  justify-items: center;
  gap: 0.5rem;
}

[editor="articulate_quiz"] .database_editor .filename {
  justify-self: center;
  font-size: min(0.8em, 5vw);
  color: lightgray;
}

[editor="articulate_quiz"] .database_editor .filename:empty {
  display: none;
}

[editor="articulate_video"],
[editor="articulate_quiz"],
[editor="articulate_links"],
[editor="articulate_download"],
[editor="self_test_settings"],
[editor="self_test_data"],
[editor="self_test_evaluation"],
[editor="text2speech"] {
  grid-template-rows: 1fr auto;
}

[editor="articulate_video"] #video {
  width: 100%;
}

[editor="articulate_highscores"] .database_editor,
[editor="articulate_saves"] .database_editor,
[editor="articulate_video"] .database_editor,
[editor="articulate_quiz"] .database_editor,
[editor="articulate_links"] .database_editor,
[editor="articulate_download"] .database_editor,
[editor="self_test_settings"] .database_editor,
[editor="self_test_data"] .database_editor,
[editor="self_test_evaluation"] .database_editor,
[editor="text2speech"] .database_editor,
[editor="gpt"] .database_editor,
[editor="timeline"] .database_editor {
  width: 100%;
  padding: 1rem 0;
  gap: 1rem;
}

[editor="text2speech"] .database_editor {
  grid-template-rows: auto 1fr;
  padding: 1rem 0 0;
}

[editor="articulate_download"] .database_editor {
  margin-top: 2rem;
}

[editor="articulate_highscores"] .database_editor .row,
[editor="articulate_saves"] .database_editor .row,
[editor="articulate_video"] .database_editor .row,
[editor="articulate_quiz"] .database_editor .row,
[editor="articulate_links"] .database_editor .row,
[editor="articulate_download"] .database_editor .row,
[editor="self_test_settings"] .database_editor .row,
[editor="self_test_data"] .database_editor .row,
[editor="self_test_evaluation"] .database_editor .row,
[editor="text2speech"] .database_editor .row,
[editor="gpt"] .database_editor .row,
[editor="timeline"] .database_editor .row {
  width: 100%;
  display: grid;
  gap: 0.5rem;
}

.row.scrollx {
  overflow-x: auto;
}

[editor="self_test_data"] .database_editor .row {
  border-radius: 0.5rem;
}

[editor="text2speech"] .database_editor .row,
[editor="articulate_saves"] .database_editor .row,
[editor="timeline"] .database_editor .row {
  grid-template-rows: auto 1fr;
}

.content[rule="text2speech"],
.content[rule="articulate_saves"],
.content[rule="timeline"] {
  width: 100%;
}

.content[rule="text2speech"] [subpage="database"],
.content[rule="articulate_saves"] [subpage="database"],
.content[rule="timeline"] [subpage="database"] {
  width: 100%;
}

table.datable {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
}

table.datable :is(th, td) {
  padding: 0.5rem;
  border: 1px solid;
  min-width: 15rem;
}

table.datable th {
  background-color: var(--teachers_bg);
  border-color: dimgray;
  color: white;
}

table.datable th:empty {
  min-width: 0;
}

table.datable td {
  border-color: rgb(165, 165, 165);
}

table.datable tr:nth-child(odd) {
  background-color: #e3e3e3;
}

table.datable tr:nth-child(even) {
  background-color: white;
}

table.datable td:focus {
  background-color: rgb(202, 240, 255);
  outline: none;
}

table.datable td:empty::after {
  content: "";
  display: inline-block;
  vertical-align: top;
  min-height: 2rem;
}

.content[game="self_test"] {
  width: 100%;
}

.content[game="self_test"] [subpage="settings"],
.content[game="self_test"] [subpage="evaluation"] {
  justify-self: center;
}

.content[game="self_test"] [subpage="data"] {
  width: 100%;
}

.content[game="self_test"] #evaluations_container {
  display: grid;
  gap: 1rem;
  overflow-x: auto;
}

.content[game="self_test"] .evaluation {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: brightness(150%);
  border-radius: 0.5rem;
  width: 100%;
}

.content[game="self_test"] .evaluation .row {
  gap: 0.25rem;
}

.content[game="self_test"] .dimensions {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
}

.content[game="self_test"] .dimension {
  position: relative;
  left: auto !important;
  display: grid;
  gap: 0.5rem;
  padding: 0.5rem;
  background-color: white;
  outline: 1px solid hsl(0, 0%, 65%);
  border-radius: 0.5rem;
}

.content[game="self_test"] .dimension [handle] {
  position: absolute;
  left: 0;
  height: 1.5rem;
  width: 1.5rem;
  background-image: url(css/icons/editing/move_vertical.svg);
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(50%);
  background-size: 60%;
  top: 50%;
  cursor: move;
}

.content[game="self_test"] .dimension [title] {
  font-size: 0.8rem;
  color: black;
}

.content[game="self_test"] .dimension [contenteditable] {
  padding: 0.5rem;
  border-radius: 0.25rem;
}

.content[game="self_test"] .dimension [contenteditable]:empty::before {
  content: attr(placeholder);
  color: rgb(185, 185, 185);
  font-size: 0.8rem;
}

[editor="self_test_evaluation"] .database_editor [dimension_prop] {
  font-family: NotoSansLight;
  font-size: 1rem;
  background-color: rgb(245, 245, 245);
  color: var(--dark);
  outline: 1px solid lightgray;
  margin-left: 1rem;
  width: auto;
}

[editor="self_test_evaluation"] .database_editor .evaluation [margin] {
  margin-left: 0.5rem;
  width: auto;
}

[editor="self_test_evaluation"] .database_editor [dimension_prop="recode"] {
  display: grid;
  gap: 0.5rem;
  place-items: center;
  padding: 0.5rem;
  border-radius: 0.25rem;
}

[editor="self_test_evaluation"] .database_editor [dimension_prop="recode"] table {
  width: 100%;
}

[editor="self_test_evaluation"] .database_editor [dimension_prop="recode"] [button] {
  padding: 0.5rem;
}

[editor="self_test_evaluation"] .database_editor [dimension_prop="recode"] th:nth-child(1),
[editor="self_test_evaluation"] .database_editor [dimension_prop="recode"] th:nth-child(2),
[editor="self_test_evaluation"] .database_editor [dimension_prop="recode"] td:nth-child(1),
[editor="self_test_evaluation"] .database_editor [dimension_prop="recode"] td:nth-child(2) {
  min-width: 5rem;
  width: 5rem;
  text-align: center;
}

[editor="self_test_evaluation"] .database_editor [dimension_prop="recode"] th:nth-child(3),
[editor="self_test_evaluation"] .database_editor [dimension_prop="recode"] td:nth-child(3) {
  min-width: 10rem;
  width: 10rem;
  text-align: center;
}

[editor="self_test_data"] .database_editor td:last-child,
[editor="self_test_evaluation"] .database_editor [dimension_prop="recode"] td:nth-child(5) {
  min-width: 1rem;
  width: 1rem;
  border: none;
  background-color: rgb(245, 245, 245);
  padding: 0;
  padding-left: 0.4rem;
}

[editor="self_test_data"] .database_editor td:last-child {
  background-color: transparent;
  padding: 0.5rem;
  border-bottom: 1px solid rgb(165, 165, 165);
}

[editor="self_test_data"] .database_editor [remove],
[editor="self_test_evaluation"] .database_editor [remove],
[editor="timeline"] .database_editor [remove],
.translate_popup [remove] {
  width: 1rem;
  height: 1rem;
  background-image: url(css/icons/editing/delete.svg);
  background-size: contain;
  cursor: pointer;
  filter: brightness(75%);
}

[editor="self_test_data"] .database_editor [remove]:hover,
[editor="self_test_evaluation"] .database_editor [remove]:hover,
[editor="timeline"] .database_editor [remove]:hover,
.translate_popup [remove]:hover {
  filter: brightness(50%);
}

/* select[dimension_prop="display_values"] option[value="4"]:checked {
    padding: 1rem;
} */

/* #datable {
    display: grid;
    gap: 0.5rem;
}

#datable .row {
    display: grid;
    grid-auto-flow: column;
} */

[editor="articulate_links"] .link_rows {
  display: grid;
  gap: 0.5rem;
}

[editor="articulate_links"] .link_row {
  display: grid;
  gap: 0.5rem;
  grid-auto-flow: column;
  place-items: center;
  grid-template-columns: 1fr 1fr auto;
}

[editor="articulate_links"] [button="add_link"] {
  justify-self: center;
  margin-top: 0.5rem;
}

[editor="articulate_links"] .link_row [remove] {
  width: 1.5rem;
  height: 1.5rem;
  background-image: url(css/icons/editing/delete.svg);
  background-size: contain;
  cursor: pointer;
  filter: brightness(75%);
}

[editor="articulate_links"] .link_row [remove]:hover {
  filter: brightness(100%);
}

[editor="articulate_highscores"] .database_editor {
  grid-template-rows: 1fr 1fr;
}

[editor="articulate_highscores"] .database_editor .row {
  grid-template-rows: auto 1fr;
}

[editor="articulate_download"] .database_editor .row {
  justify-items: center;
}

[editor="articulate_download"] .database_editor .row .info {
  justify-self: center;
}

[editor="gpt"] .database_editor {
  grid-template-rows: 1fr 1fr;
}

[editor="gpt"] .database_editor .row {
  grid-template-rows: auto 1fr;
}

.database_editor textarea {
  resize: none;
  border-radius: 0.5rem;
  outline: 1px solid var(--text_sub);
  border: none;
  padding: 1rem;
  color: var(--dark);
  font-family: NotoSansCondRegular;
  font-size: 1.05rem;
}

.safari .database_editor textarea {
  outline: none;
  border: 1px solid var(--text_sub);
}

[editor="articulate_highscores"] .database_editor textarea {
  font-size: 0.8rem;
  font-family: NotoSansLight;
}

[editor="self_test_evaluation"] .database_editor :is(input, textarea, select),
[editor="self_test_settings"] .database_editor :is(input, textarea, select, .multiplicator),
[editor="text2speech"] .database_editor :is(input, textarea, select),
[editor="articulate_saves"] .database_editor :is(input, textarea, select),
[editor="timeline"] .database_editor :is(input, textarea, select) {
  width: 100%;
  border-radius: 0.5rem;
  outline: 1px solid var(--text_sub);
  border: none;
  padding: 1rem;
  color: var(--dark);
  font-size: 1rem;
  font-family: NotoSansLight;
  overflow: clip;
}

[editor="self_test_settings"] .database_editor .multiplicator {
  background-color: white;
  display: grid;
  gap: 0.5rem;
}
[editor="self_test_settings"] .database_editor .multiplicator .multiplicator_row {
  display: grid;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.5rem;
}

[editor="self_test_evaluation"] .database_editor .dimension :is(input, textarea, select) {
  padding: 0.5rem;
  border-radius: 0.25rem;
  background-color: white;
}

[editor="timeline"] .database_editor :is(input, textarea, select) {
  background-color: white;
}

[editor="timeline"] [event_id] [key="date"] input:nth-child(1) {
  margin-bottom: 0.5rem;
}

[editor="timeline"] [event_id] .timeline_preview {
  border-radius: 0.5rem;
  outline: 1px solid var(--text_sub);
  border: none;
  padding: 0.75rem;
  color: var(--dark);
  font-size: 1rem;
  font-family: NotoSansLight;
  background-color: white;
}

[editor="timeline"] [event_id] .timeline_preview::after {
  content: ".";
  visibility: hidden;
}

[page="create"] [game="timeline"] [subpage] {
  justify-self: center;
}

[editor="articulate_saves"] .database_editor #api_key[disabled] {
  background-color: white;
}

:is([editor="text2speech"], [editor="articulate_saves"], [editor="timeline"]) .database_editor [group] {
  display: grid;
  grid-template-columns: auto 1fr;
  place-items: center;
  gap: 1rem;
  margin-left: 1rem;
}

:is([editor="text2speech"], [editor="articulate_saves"], [editor="timeline"]) .database_editor [group] .info {
  font-size: 0.9rem;
  color: lightgray;
}

:is([editor="text2speech"], [editor="articulate_saves"], [editor="timeline"]) .database_editor .row > .info {
  font-size: 1.2rem;
}

:is([editor="text2speech"], [editor="articulate_saves"], [editor="timeline"]) .database_editor [group="list"] {
  grid-template-columns: auto;
  grid-template-rows: auto 1fr auto;
  overflow: auto;
}

:is([editor="articulate_saves"], [editor="timeline"]) .database_editor [group="list"] {
  grid-template-rows: 1fr auto;
}

:is([editor="text2speech"], [editor="articulate_saves"], [editor="timeline"]) .database_editor [group="list"] .row {
  grid-auto-flow: column;
  grid-template-rows: initial;
  align-self: start;
}

[editor="text2speech"] .database_editor [group="list"] .row [modifier] {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: auto 1fr;
  justify-items: start;
  align-items: center;
}

[editor="text2speech"] .database_editor [group="list"] .row [modifier] .buttons {
  gap: 0.5rem;
}

[editor="text2speech"] .database_editor [group="list"] .row [modifier] .info {
  justify-self: center;
  font-size: 0.9rem;
  min-width: 6rem;
}

:is([editor="text2speech"], [editor="articulate_saves"], [editor="timeline"])
  .database_editor
  [group="list"]
  table
  .buttons {
  grid-auto-flow: row;
  width: 1rem;
  overflow: hidden;
}

:is([editor="text2speech"], [editor="articulate_saves"], [editor="timeline"])
  .database_editor
  [group="list"]
  .row
  [button] {
  padding: 0.75rem;
}

:is([editor="text2speech"], [editor="articulate_saves"], [editor="timeline"])
  .database_editor
  [group="list"]
  .row
  [button="delete"] {
  width: 1rem;
  height: 1rem;
  padding: 0;
  background-image: url(css/icons/editing/delete_red.svg);
  margin-bottom: 2rem;
  cursor: pointer;
}

:is([editor="articulate_saves"], [editor="timeline"]) .database_editor [group="list"] .row [button="delete"] {
  margin: 0;
  background-image: url(css/icons/editing/delete_red.svg);
}

:is([editor="text2speech"], [editor="articulate_saves"], [editor="timeline"])
  .database_editor
  [group="list"]
  .row
  [button="delete"].disabled {
  opacity: 0.25;
  pointer-events: none;
}

:is([editor="text2speech"], [editor="articulate_saves"], [editor="timeline"])
  .database_editor
  [group="list"]
  .row
  [button="delete"]:not(.disabled):hover::after {
  content: var(--content);
  position: absolute;
  color: var(--dark);
  translate: -100% calc(-100% - 3px);
  padding: 0.5rem;
  background-color: white;
  border-radius: 0.25rem;
  text-decoration: none;
  font-weight: normal;
  box-shadow: 0 0 5px 1px black;
}

[editor="text2speech"] .database_editor [group="list"] .row [button="play"] {
  width: 1rem;
  height: 1rem;
  padding: 0;
  background-image: url(css/icons/game/start.svg);
  cursor: pointer;
}

[editor="text2speech"] .database_editor [group="list"] .row [button="play"].disabled {
  opacity: 0.25;
  pointer-events: none;
}

[editor="text2speech"] .database_editor [group="list"] .row [button="play"]:not(.disabled):hover::after {
  content: var(--content);
  position: absolute;
  color: var(--dark);
  translate: -100% calc(-100% - 3px);
  padding: 0.5rem;
  background-color: white;
  border-radius: 0.25rem;
  text-decoration: none;
  font-weight: normal;
  box-shadow: 0 0 5px 1px black;
}

[editor="text2speech"] .database_editor [group="list"] .row [button="download"] {
  width: 2rem;
  height: 2rem;
  padding: 0;
  background-image: url(css/icons/download_black.svg);
  cursor: pointer;
}

[editor="text2speech"] .database_editor [group="list"] .row [button="download"].disabled {
  opacity: 0.25;
  pointer-events: none;
}

[editor="text2speech"] .database_editor [group="list"] .row [button="download"]:not(.disabled):hover::after {
  content: var(--content);
  position: absolute;
  color: var(--dark);
  translate: -100% calc(-100% - 3px);
  padding: 0.5rem;
  background-color: white;
  border-radius: 0.25rem;
  text-decoration: none;
  font-weight: normal;
  box-shadow: 0 0 5px 1px black;
}

:is([editor="text2speech"], [editor="articulate_saves"], [editor="timeline"])
  .database_editor
  [group="list"]
  table.datable
  :is(th, td) {
  min-width: initial;
}

:is([editor="text2speech"], [editor="articulate_saves"], [editor="timeline"])
  .database_editor
  [group="list"]
  table.datable
  tr:nth-child(1n) {
  background-color: rgba(255, 255, 255, 0.2);
}

:is([editor="text2speech"], [editor="articulate_saves"], [editor="timeline"])
  .database_editor
  [group="list"]
  table.datable
  tr:nth-child(2n) {
  background-color: rgba(155, 155, 155, 0.2);
}

:is([editor="text2speech"], [editor="articulate_saves"], [editor="timeline"])
  .database_editor
  [group="list"]
  table.datable
  td {
  border-color: transparent;
}

:is([editor="text2speech"], [editor="articulate_saves"], [editor="timeline"])
  .database_editor
  [group="list"]
  table.datable
  tr
  td:last-child {
  width: 1rem;
}

:is([editor="text2speech"], [editor="articulate_saves"], [editor="timeline"])
  .database_editor
  [group="list"]
  table.datable
  :is(input, select) {
  padding: 0.75rem !important;
}

[editor="text2speech"] .database_editor div[contenteditable] {
  width: 100%;
  max-width: 50rem;
  min-width: 15rem;
  min-height: 7rem;
  border-radius: 0.5rem;
  outline: 1px solid var(--text_sub);
  border: none;
  padding: 1rem;
  color: var(--dark);
  font-size: 1rem;
  font-family: NotoSansLight;

  padding: 0.5rem;
  background-color: white;
}

[editor="text2speech"] .database_editor div[contenteditable] > * {
  --content: "";
  text-decoration: underline;
  font-weight: bold;
  color: black;
}

[editor="text2speech"] .database_editor div[contenteditable] .mouseover:hover {
  color: var(--color3);
}

[editor="text2speech"] .database_editor div[contenteditable] break::before {
  content: "⏲️";
  width: 1rem;
  height: 1rem;
}

[editor="text2speech"] .database_editor div[contenteditable] .mouseover:hover::after {
  content: var(--content);
  position: absolute;
  color: var(--dark);
  translate: -0.5rem calc(-100% - 3px);
  padding: 0.5rem;
  background-color: white;
  border-radius: 0.25rem;
  text-decoration: none;
  font-weight: normal;
  box-shadow: 0 0 5px 1px black;
}

[editor="text2speech"] .database_editor [modifier_button] {
  padding: 0.25rem;
  border-radius: 0.25rem;
  background-color: var(--color1);
  cursor: pointer;
}

[editor="text2speech"] .database_editor [modifier_button].disabled {
  background-color: var(--color7);
  opacity: 0.5;
  pointer-events: none;
}

[editor="text2speech"] .database_editor .mode_buttons {
  display: grid;
  gap: 0.5rem;
  grid-auto-flow: column;
  place-content: center;
  margin-top: 0.5rem;
}

[editor="text2speech"] .database_editor [mode_button] {
  position: relative;
  width: fit-content;
  padding: 0.25rem;
  border-radius: 0.25rem;
  background-color: var(--color1);
  font-size: 0.8rem;
  pointer-events: none;
}

[editor="text2speech"] .database_editor [mode_button].disabled {
  background-color: var(--color7);
  opacity: 0.5;
  pointer-events: auto;
  cursor: pointer;
}

[dynamiceditorpage] [block] {
  padding: 1rem;
  background-color: rgba(100, 250, 250, 0.1);
  backdrop-filter: brightness(150%) blur(1rem);
  -webkit-backdrop-filter: brightness(150%) blur(1rem);
  border-radius: 1rem;
  font-size: min(1rem, 3vw);
  display: grid;
  gap: 1rem;
}

.block_placeholder {
  padding: 1rem;
  border-radius: 1rem;
  background-color: rgba(0, 200, 255, 0.5);
}

[dynamiceditorpage] [block] .block_header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
}

[dynamiceditorpage] [block] .block_move {
  width: 1.5em;
  height: 1.5em;
  background-image: url(css/icons/editing/move_vertical.svg);
  background-size: contain;
  place-self: center;
  cursor: pointer;
}

[dynamiceditorpage] .block_header [remove] {
  width: 1.5em;
  height: 1.5em;
  background-image: url(css/icons/editing/delete.svg);
  background-size: contain;
  cursor: pointer;
}

.feedback_editor [block="0"] [remove] {
  display: none;
  pointer-events: none;
  opacity: 0;
}

[dynamiceditorpage] [block] .block_settings {
  color: var(--text_sub);
  font-size: 0.9em;
}

[dynamiceditorpage] [block] .block_settings span {
  color: white;
  font-weight: bold;
  margin-right: 0.1em;
}

.database_editor [block] .block_data .rows.sorting:empty {
  padding: 1rem;
}

[dynamiceditorpage] [block] .block_settings [block_option] {
  padding: min(0.5rem, 1vw);
  margin: min(0.25rem, 1vw);
  font-size: min(1rem, 3vw);
  border: initial;
  border-radius: 0.25rem;
  background-color: white;
}

[dynamiceditorpage] [block] .block_settings [block_option="input"] {
  width: min(5rem, 15vw);
  text-align: center;
}

[dynamiceditorpage] [block] .block_settings [block_option="select"] {
  text-align: left;
}

[dynamiceditorpage] [block] .block_data {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 0.5rem;
  padding: 0.5rem;
}

[database_row] {
  display: grid;
  gap: 0.5em;
  grid-auto-flow: column;
  place-items: center;
  padding: 0.25em 1em;
  border-radius: 1em;
}

.feedback_editor [database_row] {
  padding: 0;
}

[editor="classic"] [database_row] {
  grid-template-columns: repeat(var(--columncount), 1fr) 1em;
}

[editor="quiz"] [database_row] {
  grid-template-columns: 1em repeat(var(--columncount), 1fr) 1em;
}

.database_editor [block] .block_data [database_row]:not([database_row="header"]),
.row_placeholder {
  padding: 1em;
  border-radius: 0.5rem;
}

.row_placeholder {
  background-color: rgba(0, 200, 255, 0.5);
}

[database_row="header"] {
  background-color: transparent;
  color: var(--white);
  text-align: center;
}

[database_row="header"] [header] {
  width: 100%;
  height: 100%;
  padding: min(1em, 1.5vw);
  font-size: min(1rem, 3vw);
  background-color: var(--text_main);
  display: grid;
  place-items: center;
}

[editor="quiz"] [database_row="header"] [header] {
  font-size: 1em;
  padding: 0;
}

[database_row] [change_order] {
  width: 1em;
  height: 1em;
  background-image: url(css/icons/editing/move_vertical.svg);
  background-size: contain;
  opacity: 0;
  pointer-events: none;
}

[database_row] [remove] {
  width: 1em;
  height: 1em;
  background-image: url(css/icons/editing/delete.svg);
  background-size: contain;
  opacity: 0;
  pointer-events: none;
}

[database_row]:not([database_row="header"]):hover {
  background-color: var(--color7);
}

[database_row]:not([database_row="header"]):hover [remove] {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

[database_row]:not([database_row="header"]):hover [change_order] {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

[database_row] .createInput {
  padding: min(0.8rem, 2vw);
  background-color: var(--white);
  font-family: NotoSansRegular;
  font-size: min(1.2rem, 4vw);
  text-align: center;
  color: var(--text_main);
  border: 1px solid var(--text_main);
  border-radius: 0.5rem;
  width: 100%;
  display: grid;
}

[database_row] .createImage {
  --size: clamp(5vw, 10vw, 6rem);
  padding: min(0.8rem, 2vw);
  background-color: var(--white);
  color: var(--text_main);
  border: 1px solid var(--text_main);
  border-radius: 0.5rem;
  padding: 0;
  width: var(--size);
  height: var(--size);
  background-image: url(css/icons/editing/add_photo.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  cursor: pointer;
}

[database_row] .createImage[src=""] {
  --size: min(3rem, 10vw);
}

[editor="quiz"] .createInput {
  font-size: 1em;
}

[database_row] .createInput.audio {
  gap: 0.5rem;
}

[database_row] .createInput [type="placeholder"] {
  grid-row: 1;
  grid-column: 1;
  color: var(--text_sub);
}

[database_row] .createInput [type="input"] {
  grid-row: 1;
  grid-column: 1;
  overflow: hidden;
}

[database_row] .createInput [type="input"]:focus {
  outline: none;
}

[database_row] .createInput.audio [type="input"] {
  border: 1px solid var(--text_sub);
  border-radius: 0.25rem;
  padding: 0.25rem;
}

[editor="set"] .database_editor {
  grid-template-rows: auto 1fr;
  overflow: auto;
}

[database_row] .dropdown {
  width: 100%;
}

[database_row] .dropdown select {
  width: 100%;
  padding: min(0.5rem, 1vw);
  font-size: min(1rem, 2vw);
  background-color: white;
  border: 1px solid var(--text_sub);
  border-radius: 0.5rem;
  color: var(--text_main);
  font-family: NotoSansCondRegular;
}

.recordAudio {
  display: grid;
  gap: 0.5rem;
  grid-auto-flow: column;
  place-content: center;
  background-color: var(--textbox_col);
  padding: 0.5rem;
}

.recordAudio .button {
  padding: min(0.5rem, 2vw);
}

.recordAudio .button .icon {
  width: min(1.5rem, 4vw);
  height: min(1.5rem, 4vw);
}

.recordAudio .audioProgress {
  display: grid;
  gap: 0.5rem;
  padding: 0.5rem;
}

.recordAudio .audioProgress .audioProgressTime {
  font-size: min(0.8rem, 5vw);
}

.recordAudio .audioProgress .audioProgressBar {
  width: 100%;
  height: 1px;
  background-color: var(--text_main);
}

.recordAudio .audioProgress .audioProgressBar .audioProgressBarFill {
  width: 0.5rem;
  height: 1rem;
  background-color: var(--white);
  border: 1px solid var(--text_sub);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.database_buttons {
  display: grid;
  gap: 1em;
  grid-auto-flow: column;
}

[create="preview"],
[create="publish"] {
  display: grid;
  gap: 1em;
  place-items: center;
  text-align: center;
  width: 100%;
}

[create="publish"] {
  align-self: start;
}

[create] .info {
  transform: translateX(-2em);
}

.checkbox_group {
  display: grid;
  gap: 0.5rem;
}

[checkboxrow] {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  place-items: center;
}

[checkboxrow="block_report"] .title {
  margin: 0;
}

[buttonrow] {
  display: grid;
  gap: 0.25rem;
  align-items: center;

  & .title {
    font-family: NotoSansCondRegular;
    font-size: 1em;
    justify-self: start;
    text-align: left;
  }

  & .button {
    width: fit-content;
    padding: 0.5rem;

    & .title {
      user-select: none;
      font-size: 0.8em;
    }

    &.send {
      pointer-events: none;

      & .title {
        color: transparent;
      }

      &::after {
        content: var(--content);
        position: absolute;
        font-family: NotoSansCondRegular;
        font-size: 0.8em;
        color: hsl(var(--h), var(--saturation), var(--text-brightness));
        letter-spacing: -0.5px;
      }
    }
  }
}

[checkbox] {
  position: relative;
  width: 50px;
  height: 30px;
  background-color: #ffffff;
  border: 1px solid #d9dadc;
  border-radius: 50px;
  box-shadow: inset -20px 0 0 0 #ffffff;
  transition-duration: 200ms;
  cursor: pointer;
}

[checkbox]:after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 26px;
  height: 26px;
  background-color: transparent;
  border-radius: 50%;
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.2);
}

[checkbox].selected {
  border-color: var(--teachers_bg);
  box-shadow: inset 20px 0 0 0 var(--teachers_bg);
}

[checkbox].selected:after {
  left: 20px;
  box-shadow: -2px 4px 3px rgba(0, 0, 0, 0.05);
}

[checkboxrow] .title {
  font-family: NotoSansCondRegular;
  font-size: 1em;
  justify-self: start;
  text-align: left;
}

/****************************Statusbar*******************************/
.statusbar {
  display: grid;
  grid-auto-flow: column;
  place-content: center;
}

.status {
  font-size: min(1rem, 2.8vw);
  color: var(--textbox_col);
}

.status.active {
  font-family: NotoSansBlack;
  color: var(--white);
}

.status::after {
  content: " >>";
  font-family: NotoSansRegular;
  font-size: 0.7em;
  padding: 0.5em;
}

.status:last-child::after {
  content: "";
}

/**************************Password-reminder****************************/
[page="password-reminder"] button {
  grid-column: 1 / 3;
}

[page="password-reminder"] [form] {
  gap: 1rem;
}

[page="password-reminder"] .description {
  color: var(--white);
  grid-column: 1/3;
}

[page="new_password"] [title] {
  color: var(--white);
}

[page="password-reset"] .description {
  color: var(--white);
  grid-column: 1/3;
}

[page="password-reset"] .error {
  grid-column: 1/3;
}

[page="password-reset"] [button="change_password"] {
  grid-column: 1/3;
}

/****************************Subscription*******************************/
[page="subscription"] {
  color: var(--text_main);
  gap: 0;
  grid-template-rows: auto 1fr auto;
}

[page="packages"] {
  color: var(--text_main);
}

[subpage] .header {
  background-color: var(--color2);
  color: var(--white);
  display: grid;
  grid-template-columns: 1fr;
  font-size: min(1.1em, 5vw);
  border: 1px solid var(--text_main);
}

[subpage] .header .title {
  font-size: min(1em, 5vw);
  text-align: center;
}

[subpage] .header .description {
  font-size: min(0.8em, 4vw);
  text-align: center;
}

[subpage="packages"] {
  gap: 2rem;
  padding: 2rem 1rem;
}

[subpage="packages"] .packages {
  display: grid;
  gap: 1em;
  place-content: center;
}

.coupon {
  display: grid;
  gap: 0.5rem;
}

.coupon_input {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr auto;
}

.coupon_code {
  font-weight: bold;
  letter-spacing: 0.25rem;
  text-align: center;
  padding: 0;
}

.coupon_code::placeholder {
  letter-spacing: initial;
  color: var(--dark);
  font-weight: initial;
}

.coupon_error {
  font-size: 0.8rem;
  color: var(--color8);
  text-align: center;
}

[subpage="packages"] [package] {
  width: 100%;
  display: grid;
  padding: 1rem;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "features features";
  place-items: center;
  color: var(--text_sub);
  background-color: rgba(255, 255, 255, 0.05);
  outline: 1px solid rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 1rem;
  gap: 2rem;
  backdrop-filter: brightness(80%);
}

.safari [subpage="packages"] [package] {
  outline: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

[subpage="packages"] [package]:not(.current) .current_subscription {
  display: none;
}

[subpage="packages"] [package]:not(.current) .extend_info {
  display: none;
}

[subpage="packages"] [package="streak_club"].current {
  grid-template-areas: "features features" "extend_info extend_info";
}

[subpage="packages"] [package="teachers_lab"].current {
  grid-template-areas: "features features" "extend_info extend_info";
}

[subpage="packages"] .extend_info {
  grid-area: extend_info;
  color: rgb(200, 200, 200);
  font-size: min(0.7rem, 2vw);
  text-align: center;
  display: grid;
  justify-items: center;
}

[subpage="packages"] [submenu] {
  gap: 1rem;
  display: none;
}

[subpage="packages"] [submenu].active {
  display: grid;
}

[subpage="packages"] [package].current {
  --saturation: 100%;
  --brightness: 50%;
  --color: hsl(var(--hue), var(--saturation), var(--brightness));
  --background-color: hsl(var(--hue), var(--saturation), 5%);

  grid-template-areas: "current current" "features features";
  color: var(--text_main);
  background-color: var(--background-color);
  outline: 1px solid var(--color);
  border: none;

  outline-width: 2px;
  box-shadow: 0 0 var(--button_glow) 1px var(--color);
}

.safari [subpage="packages"] [package].current {
  outline: none;
  border: 1px solid var(--color);
}

[subpage="packages"] [package="streak_club"].current {
  grid-template-areas: "current current" "features features" "extend_info extend_info";
}

[subpage="packages"] [package="teachers_lab"].current {
  grid-template-areas: "current current" "features features" "extend_info extend_info";
}

[subpage="packages"] [package].current .current_subscription {
  grid-area: current;
  display: grid;
  justify-items: center;
  text-align: center;
}

[subpage="packages"] [package].current.green {
  --hue: 93.1;
}

[subpage="packages"] [package].current.orange {
  --hue: 32.3;
}

[subpage="packages"] [package].current.blue {
  --hue: 200.8;
}

[subpage="packages"] [package] .module_title {
  justify-self: center;
  font-size: min(1.5rem, 5vw);
}

[subpage="packages"] [package] .features {
  grid-area: features;
  width: 90%;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

[subpage="packages"] [package] .selector {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
}

[subpage="new_subscription"] {
  gap: 2rem;
  justify-items: center;
}

[subpage="new_subscription"] .description {
  grid-area: inherit;
  place-self: center;
  text-align: center;
}

[subpage="new_subscription"] .buttons {
  grid-auto-flow: row;
  justify-items: center;
}

[subpage="packages"] .description ol,
[subpage="new_subscription"] .description ol {
  display: grid;
  gap: 0.5rem;
  font-family: NotoSansLight;
  padding: 0;
  margin: 0;
}

[subpage="packages"] .description li,
[subpage="new_subscription"] .description li {
  font-size: min(0.9rem, 3vw);
  list-style-type: none;
}

[subpage="packages"] .features_info,
[subpage="new_subscription"] .features_info {
  font-size: min(0.8rem, 3vw);
  text-align: center;
}

.price {
  font-family: NotoSansCondBlack;
  font-size: min(1.1rem, 3vw);
  text-align: center;
}

.price [firstrow] {
  font-size: min(1.3rem, 3vw);
}

.price [price] {
  position: relative;
  font-size: min(2.5rem, 8vw);
}

/* [price]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 3px;
    background-color: red;
    transform: translate(-50%, -50%) rotate(-20deg);
} */

[subpage="billing"] {
  gap: 0;
  color: var(--text_main);
  padding: 1rem 0;
}

[subpage="billing"] .form {
  display: grid;
  grid-gap: 1.5rem;
}

[subpage="billing"] [section] input {
  font-size: min(1rem, 5vw);
  pointer-events: auto;
}

[subpage="billing"] [section] [title] {
  font-size: min(1rem, 5vw);
}

[subpage="billing"] [billing] {
  display: grid;
  gap: 2rem;
  color: var(--text_main);
  height: 100%;
  overflow: hidden auto;
  opacity: 1;
  pointer-events: auto;
}

[subpage="billing"] [billing] .title {
  font-family: NotoSansCondBlack;
  font-size: min(1.5rem, 5vw);
}

[subpage="billing"] [billing] .description {
  font-family: NotoSansRegular;
  text-align: center;
}

[subpage="billing"] [billing="select"] .buttons {
  grid-auto-flow: inherit;
  place-items: center;
  margin-top: 2rem;
}

[subpage="pay"] .description {
  text-align: center;
  font-size: min(0.8rem, 5vw);
}

/**************************INSTANT STREAK****************************/
[page="instant_streak"] {
  gap: 1em;
  align-items: start;
  align-content: start;
  grid-template-columns: 1fr;
  justify-content: center;
  grid-template-rows: 1fr;
}

[page="instant_streak"] [button="streak_club"] {
  grid-template-areas: "icon title" "icon description";
}

[page="instant_streak"] [button="streak_club"] .icon {
  grid-area: icon;
}

[page="instant_streak"] [button="streak_club"] .title {
  grid-area: title;
}

[page="instant_streak"] [button="streak_club"] .description {
  grid-area: description;
}

[page="instant_streak"] [subpage] {
  grid-row: 1;
}

[page="instant_streak"] [subpage="main"] {
  grid-template-rows: auto auto 1fr auto;
  align-items: start;
}

[page="instant_streak"] .pagedata {
  text-align: center;
}

/****************************STREAK CLUB*****************************/
[page="streak_club"] {
  gap: 1em;
  align-items: start;
  align-content: start;
  grid-template-columns: 1fr;
  justify-content: center;
  grid-template-rows: auto auto 1fr;
}

.search {
  background-image: url(css/icons/menu/search.svg);
  background-size: min(1.5rem, 4vw);
  background-position: min(0.5rem, 2vw) center;
  background-repeat: no-repeat;
  padding: min(1rem, 3vw) min(1rem, 3vw) min(1rem, 2.5vw) min(2.5rem, 7vw);
  /* border-radius: 0.5rem; */
  outline: 1px solid var(--dark);
  border: none;

  font-family: NotoSansLight;
  font-size: min(1.2rem, 4vw);
  color: var(--black);
  background-color: var(--textbox_bg);
}

.safari .search {
  outline: 1px solid transparent;
  border: 1px solid var(--dark);
}

[modules] {
  width: 100%;
  height: 100%;
  overflow: hidden auto;
  padding: 1px;
}

[page="streaks"] [modules] {
  display: grid;
  gap: 2rem;
  align-content: start;
}

.mainpage [modules],
.searchpage [modules] {
  overflow: hidden;
}

[streak_module] {
  position: relative;
  display: grid;
  gap: 1rem;

  padding: min(1.5rem, 4vw);
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 0.5rem;
  /* backdrop-filter: brightness(150%) blur(1rem) opacity(0.2);
    -webkit-backdrop-filter: brightness(150%) blur(1rem) opacity(0.2); */
  outline: 1px solid rgba(255, 255, 255, 0.15);
  border: none;
}

.safari [streak_module] {
  border: 1px solid rgba(255, 255, 255, 0.15);
  outline: none;
}

[streak_module].hidden {
  display: none;
}

[streak_module="search"] .module_title {
  text-align: center;
  width: 100%;
}

.search_results {
  display: grid;
  gap: 1rem;
  width: 100%;
}

.search_results.disabled {
  display: none;
}

.empty_search {
  text-align: center;
}

.empty_search.disabled {
  display: none;
}

.streak_club_streaks {
  display: grid;
  gap: 2em;
  grid-auto-flow: column;
  align-items: start;
  align-content: start;
  padding: 0.25rem;
  width: 100%;
  height: 100%;
  justify-content: center;
}

.streaks {
  gap: 1.5em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(20em, 60vw), max-content));
    justify-content: center;
    justify-items: center; */
}

.streak_buttons {
  width: 100%;
}

.streak_menu .title {
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

[variant="preview"] {
  pointer-events: none;
  width: 100%;
  height: 100%;
}

[variant="preview"] .streak_menu {
  display: none;
}

.streak .menu_btn {
  --padding: 0.6rem;
  --gap: 0.5rem;
  --menu_size: 1.5rem;
  width: var(--menu_size);
  height: var(--menu_size);
  background-image: url(css/icons/menu/menu.svg);
  background-repeat: no-repeat;
  background-position: initial;
  pointer-events: auto;
  cursor: pointer;
}

.streak_floating_menu {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  gap: 0.5rem;
  padding: 0.6rem;
  background-color: rgba(200, 200, 200, 0.2);
  outline: 1px solid rgba(200, 200, 200, 0.6);
  border: none;
  border-radius: 0.5em;
  opacity: 0;
  pointer-events: none;
  transition-duration: 0ms;
  backdrop-filter: blur(0.5rem) brightness(200%) contrast(0.75);
  -webkit-backdrop-filter: blur(0.5rem) brightness(200%);
  box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.6);
}

.safari .streak_floating_menu {
  border: 1px solid rgba(200, 200, 200, 0.6);
  outline: none;
}

.streak_floating_menu:not(.move) {
  transition-duration: 150ms;
}

/* .streak_floating_menu [button] {
    width: 100%;
} */

.streak_floating_menu [button] .title {
  justify-self: start;
}

.streak_floating_menu.open {
  z-index: 10;
  opacity: 1;
  pointer-events: auto;
  cursor: default;
}

.safari .streak_menu [buttons] {
  border: 1px solid rgba(255, 255, 255, 0.6);
  outline: none;
}

.streak_menu [buttons].open {
  opacity: 1;
  pointer-events: auto;
  cursor: default;
}

.streak_menu .button {
  width: 100%;
  grid-template-areas: "icon title";
}

.streak .streak_menu .icon {
  filter: brightness(100%);
}

.contents {
  overflow: hidden auto;
  width: 100%;
  height: 100%;
}

.contents [type] {
  display: none;
}

.contents [type].active {
  display: grid;
  gap: 1rem;
  place-items: center;
}

.contents [type="loader"].active {
  width: 100%;
  height: 100%;
  place-content: center;
}

.contents [type="browse"].active {
  grid-auto-flow: column;
  align-items: start;
  padding-bottom: 1em;
}

.contents [type="search"] [button="back"] {
  margin-bottom: 1rem;
}

@media screen and (max-width: 720px) {
  .contents [type="browse"].active {
    grid-auto-flow: row;
    width: 100vw;
    justify-items: center;
  }
}

/****************************STREAK CLUB*****************************/
[page="streak_club_loggedout"] {
  gap: 2em;
  align-items: start;
  align-content: start;
  padding: 2em;
  overflow: auto;
}

[page="streak_club_loggedout"] .buttons {
  display: grid;
  grid-auto-flow: column;
  gap: 1em;
}

[info] {
  display: grid;
  justify-self: start;
  width: 100%;
  font-size: min(1rem, 4vw);
}

[info] .info {
  font-size: 1.2em;
  padding-bottom: 0.5em;
}

[page="streaks"] .info {
  justify-self: center;
  text-align: center;
  font-family: NotoSansLight;
  font-size: min(1.1rem, 3.5vw);
  text-shadow: var(--dark) 2px 2px 2px;
}

[page="streaks"] .info p {
  margin: 0;
}

[page="streaks"] .info a {
  color: var(--link);
  font-size: min(1.1rem, 5vw);
}

.advantage {
  background-image: url(css/icons/menu/checkmark.svg);
  background-position: left center;
  background-size: 1em;
  background-repeat: no-repeat;
  padding: 0.5em 1.5em;
  font-family: NotoSansRegular;
  color: var(--text_main);
  filter: brightness(0%) contrast(25%);
}

.pageSelector {
  display: grid;
  grid-auto-flow: column;
  gap: 1rem;
  justify-self: center;
}

.pageSelector .button {
  opacity: 0.5;
  pointer-events: none;
}

.pageSelector .button.active {
  opacity: 1;
  pointer-events: auto;
}

.pageSelector .button[button="prev_page"] {
  grid-template-columns: 1fr;
  place-self: center;
}

.pageSelector .button[button="next_page"] {
  grid-template-columns: 1fr;
  place-self: center;
}

.currentPage {
  display: grid;
  place-items: center;
}

/****************************PROFIL*****************************/
[page="profile"] {
  width: min(100%, var(--max-width));
  align-content: start;
  place-items: start;
  color: var(--text_main);
  grid-template-rows: auto;
}

.profile_buttons {
  display: grid;
  gap: 0.5rem;
  grid-auto-flow: column;
  justify-self: center;
  margin: 0 0 1rem 0;
  justify-self: center;
}
[profile_button] {
  padding: 0.5rem;
  background-color: rgba(255, 255, 255, 0.2);
  min-width: 5em;
  border-radius: 0.25rem;
  font-family: NotoSansCondRegular;
  font-size: min(1em, 4vw);
  text-align: center;
  user-select: none;
  &:not(.selected) {
    cursor: pointer;
    &:hover {
      background-color: rgba(255, 255, 255, 0.7);
      color: black;
    }
  }
  &.selected {
    background-color: white;
    color: black;
    pointer-events: none;
  }
}
[profile_page] {
  width: 100%;
  display: grid;
  gap: 0.5rem;

  & [section] input {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.5);
    outline: none;
  }

  & #delete_profile {
    margin: 1rem 0;
  }
  &:not(.selected) {
    display: none;
  }

  & [checkboxrow] .title {
    cursor: pointer;
  }

  & [info] {
    text-align: center;
    margin-bottom: 1rem;
  }

  & [section="blocked_contents"] {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 0.5rem;
    display: grid;
    grid-template-areas: initial;
    grid-template-columns: 1fr;
    overflow: auto;
    padding: 0.5rem;
    background-color: rgba(255, 255, 255, 0.5);

    & .noblock {
      text-align: center;
      font-size: 1em;
    }

    & .blocked_content {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 1rem;
      padding: 0.5rem;
      background-color: rgb(235, 235, 235);
      border-radius: 0.25rem;

      &:hover {
        background-color: white;
      }

      & .button {
        padding: 0.5rem;
        border-radius: 0.25rem;
        & .title {
          transform: none;
          font-size: 0.75em;
        }
      }

      & .content_container {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.5rem;
        align-items: center;

        & .content_data {
          color: black;
          font-family: NotoSansCondRegular;

          & .content_name {
            font-size: 1.1em;
            text-overflow: ellipsis;
            overflow: hidden;
          }

          & .content_creator {
            color: dimgray;
            font-size: 0.8em;
          }
        }

        & .content_image {
          display: grid;

          & img {
            width: 5em;
            border-radius: 0.25rem;
            border: 1px solid rgba(0, 0, 0, 0.15);
          }
        }
      }
    }
  }
}

[section] {
  display: grid;
  width: 100%;
  gap: min(0.5rem, 5vw);
  grid-template-areas: "title title" "input edit";
  align-items: center;
  font-size: min(1.1rem, 5vw);
  grid-template-columns: 1fr auto;
}

/* gap: min(0.5rem, 5vw) 0; */
[section="current_subscription"] {
  gap: 0;
  grid-template-columns: 1fr;
}

[section] [title] {
  grid-area: title;
  font-family: NotoSansCondBlack;
}

[section="title"] {
  text-align: center;
}

[section="title"] [title] {
  font-size: min(1.3rem, 6vw);
}

.button[button="subscriptions"] {
  place-self: center;
}

[section] input {
  grid-area: input;
  width: 100%;
  font-family: NotoSansLight;
  font-size: min(1.1rem, 5vw);
  padding: 1.1em;
  border-radius: 0.5em;
  outline: 2px solid var(--dark);
  border: none;
  color: var(--text_main);
  pointer-events: none;
}

.safari [section] input {
  border: 2px solid var(--dark);
  outline: none;
}

[section] [status] {
  font-size: min(1rem, 5vw);
}

[section="current_subscription"] [status] {
  padding: 1rem;
  width: 100%;
  border-radius: 0.5rem;
}

[section] [status="registration"] {
  background-color: var(--color7);
  color: var(--text_main);
}

[section] [status="streak_club"] {
  background-color: var(--color2);
  color: var(--white);
}

[section] [status="teachers_lab"] {
  background-color: var(--teachers_bg);
  color: var(--white);
}

[section="current_subscription"] [status] .subscription_type {
  font-weight: bolder;
  font-size: 1em;
}

[section="current_subscription"] [status] .valid_text {
  font-size: 0.8em;
}

[section="current_subscription"] [status] .valid_date {
  font-weight: bolder;
  font-size: 0.8em;
}

[section] .editfield {
  grid-area: edit;
  width: 2em;
  height: 2em;
  cursor: pointer;
}

[section] .editfield:hover {
  filter: invert(100%) contrast(50%);
}

[section="avatar"] {
  --size: min(10rem, 30vw);
}

[section="avatar"] img {
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: rgb(255, 255, 255);
  background-image: url(css/icons/editing/photo_camera.svg);
  background-size: 50%;
}

[section="avatar"] [title] {
  grid-area: 1/1;
}

[section="avatar"] img,
[section="avatar"] .editfield,
[section="avatar"] .imgborder {
  grid-area: 2/1;
  place-self: center;
}

[section="avatar"] .editfield {
  transform: translate(calc(calc(var(--size) / 2) + 1.5em));
}

[section="avatar"] .imgborder {
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  outline: 2px solid var(--dark);
  border: none;
}

.safari [section="avatar"] .imgborder {
  border: 2px solid var(--dark);
  outline: none;
}

[section="avatar"] {
  width: 100%;
  grid-template-areas: inherit;
  cursor: pointer;
}

/********************************ADMIN********************************/
[page="admin"] {
  color: var(--text_main);
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  place-items: center;
}

[page="admin"] .title {
  font-size: min(1.3rem, 6vw);
}

[page="admin"] .admin_functions {
  display: grid;
  gap: 1rem;
  grid-auto-flow: column;
  justify-self: start;
}

[page="admin"] .admin_function {
  padding: 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(1rem);
}

[page="admin"] .admin_function.selected,
[page="admin"] .admin_function:hover {
  color: rgba(255, 255, 255, 1);
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(1rem) brightness(150%);
}

[page="admin"] .subpages {
  width: 100%;
  height: 100%;
  backdrop-filter: blur(5rem) brightness(150%);
  border-radius: 0.5rem;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

[page="admin"] .subpage {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0) 10%,
    rgba(255, 255, 255, 0) 90%,
    rgba(255, 255, 255, 0.05) 100%
  );
  display: none;
}

[page="admin"] .subpage .error {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

[page="admin"] .subpage.utilities,
[page="admin"] .subpage.coupons {
  display: grid;
  grid-template-areas: "title title" "sidemenu settings";
  grid-template-rows: auto 1fr;
  grid-template-columns: 15rem 1fr;
}

[page="admin"] .subpage > .title {
  grid-area: title;
  font-family: NotoSansCondRegular;
  font-size: min(1.1rem, 5vw);
  background-color: rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  padding: 0.75rem;
}

[page="admin"] .subpage .sidemenu {
  grid-area: sidemenu;
  backdrop-filter: blur(2rem);
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  align-content: start;
}

[page="admin"] .subpage .sidemenu .subcategory {
  padding: 0.75rem;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

[page="admin"] .subpage .sidemenu .subcategory.selected,
[page="admin"] .subpage .sidemenu .subcategory:hover {
  color: white;
  background-color: rgba(255, 255, 255, 0.2);
}

[page="admin"] .subpage .settings {
  grid-area: settings;
  backdrop-filter: blur(2rem) brightness(110%);
  padding: 1rem;
  overflow: auto;
}

[page="admin"] .subpage .setting {
  display: grid;
  gap: 0.5rem;
}

[page="admin"] .subpage .setting.hide {
  display: none;
}

[page="admin"] .subpage .setting .grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  align-items: center;
}

[page="admin"] .subpage .setting.tts_from_json {
  height: 100%;
  grid-template-rows: 1fr auto auto;
}

[page="admin"] .subpage textarea#json_data {
  height: 100%;
  resize: none;
}

/* [page="admin"] .subpage .setting.new_coupon .grid {
    grid-template-columns: auto 1fr;
} */

[page="admin"] .setting .info {
  width: 10rem;
}

[page="admin"] .subpage .setting .checkbox {
  place-self: start;
  width: 3rem;
  height: 3rem;
  margin: 0;
  padding: 0;
  outline: 2px solid rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.8);
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  cursor: pointer;
}

[page="admin"] .subpage .setting .checkbox::after {
  content: "❌";
}

[page="admin"] .subpage .setting .checkbox:checked::after {
  content: "✔️";
}

[page="admin"] .subpage .setting input,
[page="admin"] .subpage .setting select {
  font-size: 1.1rem;
  padding: 1rem;
  border-radius: 0.5rem;
  font-family: NotoSansRegular;
}

[page="admin"] .subpage .setting .input {
  border: none;
  outline: 2px solid rgba(0, 0, 0, 0.3);
  background-color: rgba(255, 255, 255, 0.8);
}

[page="admin"] [coupon_type].hide {
  display: none;
}

[page="admin"] .subpage .listgrid {
  display: grid;
  gap: 0.5rem;
}

[page="admin"] .subpage .listgrid:empty ~ .buttons {
  display: none;
}

[page="admin"] .subpage .buttons {
  justify-content: start;
  margin-top: 1rem;
}

[page="admin"] .subpage .buttons.hide {
  display: none;
}

[page="admin"] .subpage .button {
  justify-self: start;
}

[page="admin"] .subpage .button.wait {
  opacity: 0.5;
  pointer-events: none;
}

[page="admin"] .subpage .feedback {
  opacity: 0;
  transition-duration: 500ms;
}

[page="admin"] .subpage .feedback.admin_error {
  color: orangered;
}

[page="admin"] .subpage .feedback.new {
  opacity: 1;
}

[page="admin"] .coupon {
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: brightness(150%);
  border-radius: 0.5rem;
  display: grid;
  grid-template-areas: "name code" "expiry code" "expiry type";
  grid-template-columns: 1fr auto;
  align-items: center;
}

[page="admin"] .coupon:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

[page="admin"] .coupon .coupon_name {
  grid-area: name;
}

[page="admin"] .coupon .coupon_code {
  grid-area: code;
  font-size: 1.5rem;
  color: rgb(25, 25, 25);
  font-family: NotoSansCondRegular;
  text-align: right;
}

[page="admin"] .coupon .coupon_expiry {
  grid-area: expiry;
  color: var(--text_sub);
  font-size: 0.9rem;
}

[page="admin"] .coupon .coupon_type {
  grid-area: type;
  font-size: 0.9rem;
}

[page="admin"] .deepl_translate {
  height: 100%;
  grid-template-rows: auto 1fr auto;

  & .translate_settings {
    display: grid;
    gap: 1rem;
    grid-auto-flow: column;
    justify-content: start;

    & select {
      padding: 0.5rem;
      border: none;
    }

    & > div {
      display: grid;
      gap: 0.25rem;
    }

    & .info {
      width: auto;
    }
  }
  & .translate_grid {
    display: grid;
    gap: 0.5rem;
    height: 100%;
    overflow: auto;
    padding: 0.5rem;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 0.25rem;

    & div {
      color: dimgray;
      padding: 0.5rem;
      background-color: whitesmoke;
      border-radius: 0.2rem;
    }
  }
  & .buttons {
    justify-content: center;
    margin: 0;
  }
}

/****************************előfizetések*****************************/
.sub_grid,
.prices {
  display: grid;
  grid-template-columns: repeat(3, minmax(10em, auto));
  font-size: min(1rem, 3vw);
}

.sub_grid [column] {
  border: 1px solid var(--text_main);
  border-bottom: none;
}

.sub_grid [column] .header {
  color: var(--white);
  text-align: center;
  font-family: NotoSansCondBlack;
  font-size: 1.1em;
}

.sub_grid [column="instant_streak"] .header {
  background-color: var(--color5);
}

.sub_grid [column="streak_club"] .header {
  background-color: var(--color2);
}

.sub_grid [column="teachers_lab"] .header {
  background-color: var(--teachers_bg);
}

.prop {
  font-size: 0.8em;
  padding: 0.25em;
  max-width: 12em;
  margin: 0.5em;
}

.prices [column] {
  display: grid;
  place-items: center;
  border: 1px solid var(--text_main);
  border-top: none;
  padding: 3em 0 1em;
}

.proptable [column="instant_streak"],
.proptable [column="streak_club"] {
  border-right: none;
}

.prices [column] .prop:not(.button) {
  font-family: NotoSansCondBlack;
  font-size: 1.1em;
}

[column] .button.prop {
  width: 10em;
  grid-template-columns: 1fr;
}

[column] .button .title {
  width: 100%;
  text-align: center;
  font-size: 1.2em;
}

[section] select {
  grid-area: input;
  width: clamp(10vw, 30rem, 80vw);
  padding: 1.1em;
  border-radius: 0.5em;
  border: 2px solid var(--color4);
  color: var(--dark);
  margin-left: 1em;
  font-size: min(1rem, 5vw);
  pointer-events: auto;
  background-color: var(--white);
}

[billing] select {
  margin: 0;
}

[page="payment_status"] {
  align-content: start;
  color: var(--text_main);
  gap: 1rem;
  user-select: auto;
  grid-template-rows: auto;
}

/* [page="payment_status"] .title {
    font-size: min(2rem, 10vw);
} */

[page="payment_status"] .description {
  font-size: min(1rem, 5vw);
  text-align: center;
}

[page="payment_status"] li {
  list-style: none;
}

[page="payment_status"] li::before {
  content: "✓";
  margin-right: 0.5rem;
  font-weight: bold;
  font-size: 1.4rem;
}

.simplepay {
  background-image: url(css/simplepay_bankcard_logos_top_01.jpg);
  width: min(15rem, 100%);
  aspect-ratio: 15/5;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: white;
  padding: 4rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
}

.simplepay a {
  display: block;
  width: 100%;
  height: 100%;
}

/****************************statisztika*****************************/
[page="statistics"] {
  --stat-color-0: rgb(255, 169, 169);
  --stat-color-1: rgb(255, 217, 173);
  --stat-color-2: rgb(253, 255, 201);
  --stat-color-3: rgb(163, 255, 160);
  grid-template-rows: auto 1fr auto;
  gap: 2rem;
}

[page="statistics"] > div:not(.buttons) {
  width: min(100%, var(--max-width));
}

[page="statistics"] .statistics {
  overflow: auto;
}
[page="statistics"] .statistics.survey {
  justify-content: inherit;
  width: 100%;
}

[page="statistics"] table,
[page="statistics"] th,
[page="statistics"] td {
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-collapse: collapse;
  padding: 0.75rem;
}

[page="statistics"] .loading {
  border: none;
}

[page="statistics"] th {
  background-color: var(--text_main);
  color: var(--white);
}

[page="statistics"] tr[header] {
  background-color: var(--teachers_bg);
  border-bottom: 3px solid black;
}

[page="statistics"] tr[result="3"] {
  background-color: var(--stat-color-3);
}

[page="statistics"] tr[result="2"] {
  background-color: var(--stat-color-2);
}

[page="statistics"] tr[result="1"] {
  background-color: var(--stat-color-1);
}

[page="statistics"] tr[result="0"] {
  background-color: var(--stat-color-0);
}

[page="statistics"] td {
  text-align: center;
}

[page="statistics"] td[stat_name] {
  text-align: left;
}

.task_data {
  font-size: 1rem;
  text-align: center;
  display: grid;
  gap: 1rem;
}

.task_data .title {
  font-size: 2rem;
}

.task_data .dates {
  display: grid;
  grid-auto-flow: column;
  gap: 2rem;
}

.statistics {
  /* width: min(100%, var(--max-width)); */
  font-family: NotoSansCondRegular;
  display: grid;
  align-self: start;
  justify-content: center;
  align-content: start;
}

/****************************statisztika*****************************/
[page="about"] {
  gap: 2rem;
  justify-content: center;
  grid-template-rows: auto;
}

[page="about"] .section_title {
  font-family: NotoSansCondBlack;
  font-size: min(1.5rem, 10vw);
}

[page="about"] .section_grid_1 {
  display: grid;
  text-align: center;
}

[page="about"] .section_grid_2 {
  display: grid;
  gap: 0 1rem;
  grid-template-columns: repeat(2, 1fr);
}

[page="about"] .section_grid_2 div:nth-child(odd) {
  justify-self: end;
}

[page="about"] .info {
  display: grid;
  gap: 1rem;
  justify-items: center;
  width: 100%;
  font-family: NotoSansRegular;
  font-size: min(1rem, 5vw);
}

[page="about"] .levelup {
  background-image: url(css/icons/levelup.svg);
  width: 100%;
  height: 3rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

[page="about"] .separator {
  width: 100%;
  height: 2px;
  background-color: var(--color7);
}

[page="about"] .terms {
  display: grid;
  gap: 0.5rem;
}

[page="about"] .terms .info {
  font-family: NotoSansCondBlack;
  font-size: min(1.2rem, 5vw);
  cursor: pointer;
}

/****************************Listás megjelenítés*****************************/
/* [page="task_list"] {
    align-content: start;
    width: 100%;
    overflow: auto;
} */
[page="task_list"] {
  margin-bottom: 5rem;
}

[page="task_list"] .maxwidth {
  width: min(100%, var(--max-width));
}

[page="task_list"] [buttons="task_list"] {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
  background-color: rgba(255, 255, 255, 0.2);
  padding: 1rem;
}

.lists.database_editor .database_editor {
  overflow: initial;
}

.lists.database_editor [database_row] {
  grid-template-columns: 1.25em repeat(var(--columncount), 1fr);
  padding: 0.75em;
  border-radius: 0;
}

.lists.database_editor [database_row]:focus-within {
  background-color: var(--color7);
}

.lists.database_editor [database_row].correct [type="input"] {
  background-color: var(--color5);
}

.lists.database_editor [database_row].wrong [type="input"] {
  background-color: var(--color8);
  color: var(--white);
}

.lists.database_editor [database_row].wrong [type="input"] .rightanswer {
  font-size: 0.8em;
}

.lists.database_editor [database_row].wrong [type="input"]::after {
  content: "";
}

.lists.database_editor [database_row].empty [type="input"] {
  background-color: var(--textbox_col);
}

.lists.database_editor [element]:not(.button) {
  width: 100%;
  padding: min(0.75em, 3vw);
  font-size: min(0.8em, 5vw);
  font-family: NotoSansRegular;
  text-align: center;
  color: var(--text_main);
  word-break: break-word;
}

.lists.database_editor [type="div"] {
  border: none;
}

.lists.database_editor [type="input"] {
  background-color: var(--white);
  outline: 1px solid var(--text_sub);
}

.lists.database_editor [type="input"]:empty::after {
  content: "I";
  color: transparent;
}

.lists.database_editor [type="input"]:focus {
  outline: 3px var(--teachers_bg);
  outline-style: double;
}

.lists.database_editor [database_row]:focus-within [type="div"] {
  color: var(--white);
}

.lists.database_editor [database_row] [listicon] {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.lists.database_editor [database_row] [listicon="0"] {
  background-image: url(css/icons/game/danger.svg);
}

.lists.database_editor [database_row] [listicon="1"] {
  background-image: url(css/icons/game/gray_brain.svg);
}

.lists.database_editor [database_row] [listicon="2"] {
  background-image: url(css/icons/game/orange_brain.svg);
}

.lists.database_editor [database_row] [listicon="3"] {
  background-image: url(css/icons/game/heart.svg);
}

:is([page="unsubscribe"], [page="unsubscribe_success"]).center {
  grid-template-rows: 1fr;

  & .content {
    & > .title {
      color: white;
    }
    & > .description {
      color: lightgray;
    }

    & input {
      text-align: center;
      font-family: NotoSansLight;
    }

    & .button .title {
      transform: none;
    }
  }
}

[page="login"].center {
  grid-template-rows: 1fr;
}

[page="login"] .content {
  gap: 1rem;
  place-items: center;
  grid-template-rows: 1fr auto 1fr;
  height: 100%;
}

[page="login"] .content .title:first-child {
  align-self: end;
}

[page="login"] .content a {
  align-self: end;
}

[page="login"] .error,
[page="register"] .error {
  grid-column: 1 / 3;
}

[page="register"].center {
  grid-template-rows: 1fr;
}

[page="register"] .content {
  gap: 1rem;
  place-items: center;
}

[page="name"].center {
  overflow-y: auto;
  grid-template-rows: auto 1fr;
}

[page="name"] .content {
  gap: 1rem;
  place-items: center;
}

[page="groups"] {
  grid-template-rows: auto 1fr auto;
}
[page="groups"]:not(.loading) > .loader_anim {
  display: none;
}
[page="groups"].loading > .loader_anim {
  display: block;
}
[page="groups"].loading .groups {
  display: none;
}
[page="groups"] .popup_module#group_list {
  grid-template-rows: auto 1fr auto;
}
.groups {
  height: 100%;
  display: grid;
  gap: 1rem;
  width: min(100%, 1200px);
  grid-template-columns: 1fr 1fr;
  overflow: auto;
}
[page="groups"] .groups .group_list {
  display: grid;
  gap: 0.5rem;
  align-content: start;

  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.5rem;
  overflow: auto;
}
.group_list .group {
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 0.25rem;
  backdrop-filter: blur(0.5rem) brightness(150%) contrast(50%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: grid;
  grid-template-columns: 1fr auto;
  cursor: pointer;
}
.group_list .group .group_name {
  color: dimgray;
  font-size: 1.1rem;
  border-radius: 0.25rem;
  padding: 0.75rem;
  border: 1px solid transparent;
  outline: none;
}
.group_list .group .group_name:focus-visible {
  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.2);
}
.group_list .group.selected {
  background-color: var(--teachers_bg);
}
.group_list .group.selected .group_name {
  color: white;
}
.group_list .group .settings {
  display: grid;
  gap: 0.5rem;
  align-items: center;
  margin: 0.5rem;
}
.group_list .group .settings:empty {
  display: none;
}
.group_list .group .settings .group_button {
  padding: 0.5rem;
  background-color: #3ec7ff;
  border-radius: 0.25rem;
  color: white;
}
.group_list .group .settings .group_button:hover {
  background-color: #1791c2;
}

/****************************játék popup*****************************/
.game_popup {
  position: absolute;
  width: 100%;
  height: 100%;
  backdrop-filter: var(--popup-backdrop);
  -webkit-backdrop-filter: var(--popup-backdrop);
  display: grid;
  place-items: center;
  z-index: 100;
}

.game_info {
  --border-radius: 0.75rem;
  max-width: min(50rem, calc(100% - 1rem));
  background-color: var(--textbox_col);
  border-radius: var(--border-radius);
  font-size: min(1rem, 6vw);
}

.game_info[tasktype="instant"] {
  --color: var(--instant_bg);
}

.game_info[tasktype="0"] {
  --color: var(--club_bg);
}

.game_info[tasktype="1"] {
  --color: var(--club_bg);
}

.game_info[tasktype="2"],
.game_info[tasktype="3"] {
  --color: var(--teachers_bg);
}

.game_info_header {
  padding: 1rem;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  background-color: var(--color);
  color: var(--white);
  text-align: center;
}

.game_info_content {
  padding: 1rem;
  color: var(--color);
  border-left: 1px solid var(--color);
  border-right: 1px solid var(--color);
  text-align: center;
  display: grid;
  gap: 0.5rem;
  place-items: center;
}

.game_info_content .message_list {
  font-size: 0.7em;
  color: var(--text_main);
  text-align: left;
  justify-self: start;
}

.game_info_content .message {
  font-size: 1.25em;
  font-family: NotoSansRegular;
}

.game_info_content .message_sub {
  font-size: 0.8em;
  color: var(--text_main);
}

.game_info_content .game_achievements {
  display: grid;
  gap: 0.5rem;
  grid-auto-flow: column;
  padding: 1rem;
}

.game_info_content .game_achievements [game_trophy] {
  --size: 2.5em;
  width: var(--size);
  height: var(--size);
}

.game_info_content .game_achievements [game_trophy].disabled {
  opacity: 0.3;
}

.game_info_content .game_achievements [game_trophy].done {
  animation: newtrophy 1s forwards;
}

@keyframes newtrophy {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1);
  }
}

.game_info[tasktype="instant"] .game_info_content .game_achievements [game_trophy="complete"] {
  background-image: url(css/icons/achievements/7streak_compromise.svg);
}

.game_info[tasktype="0"] .game_info_content .game_achievements [game_trophy="complete"] {
  background-image: url(css/icons/achievements/7streak_magenta.svg);
}

.game_info[tasktype="1"] .game_info_content .game_achievements [game_trophy="complete"] {
  background-image: url(css/icons/achievements/7streak_magenta.svg);
}

.game_info[tasktype="2"] .game_info_content .game_achievements [game_trophy="complete"],
.game_info[tasktype="3"] .game_info_content .game_achievements [game_trophy="complete"] {
  background-image: url(css/icons/achievements/7streak_blue.svg);
}

.game_info[tasktype="instant"] .game_info_content .game_achievements [game_trophy="time"] {
  background-image: url(css/icons/achievements/stopwatch_green.svg);
}

.game_info[tasktype="0"] .game_info_content .game_achievements [game_trophy="time"] {
  background-image: url(css/icons/achievements/stopwatch_magenta.svg);
}

.game_info[tasktype="1"] .game_info_content .game_achievements [game_trophy="time"] {
  background-image: url(css/icons/achievements/stopwatch_magenta.svg);
}

.game_info[tasktype="2"] .game_info_content .game_achievements [game_trophy="time"],
.game_info[tasktype="3"] .game_info_content .game_achievements [game_trophy="time"] {
  background-image: url(css/icons/achievements/stopwatch_blue.svg);
}

.game_info[tasktype="instant"] .game_info_content .game_achievements [game_trophy="percent"] {
  background-image: url(css/icons/achievements/crown_green.svg);
}

.game_info[tasktype="0"] .game_info_content .game_achievements [game_trophy="percent"] {
  background-image: url(css/icons/achievements/crown_magenta.svg);
}

.game_info[tasktype="1"] .game_info_content .game_achievements [game_trophy="percent"] {
  background-image: url(css/icons/achievements/crown_magenta.svg);
}

.game_info[tasktype="2"] .game_info_content .game_achievements [game_trophy="percent"],
.game_info[tasktype="3"] .game_info_content .game_achievements [game_trophy="percent"] {
  background-image: url(css/icons/achievements/crown_blue.svg);
}

.game_info_buttons {
  padding: 1rem;
  padding-top: 0;
  display: grid;
  place-items: center;
  border-left: 1px solid var(--color);
  border-right: 1px solid var(--color);
  border-bottom: 1px solid var(--color);
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

[keyboard="numeric"] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

[keyboard="numeric"] .button {
  grid-template-columns: 1fr;
}

[keyboard="numeric"] .button .title {
  font-size: min(2rem, 8vw);
}

[keyboard="none"] .button {
  grid-template-columns: auto 1fr;
}

/****************************feltöltés*****************************/
/* .uploader { */
[file_browser] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: var(--popup-backdrop);
  -webkit-backdrop-filter: var(--popup-backdrop);
  z-index: 100;
  display: none;
}

[file_browser] .settings_header {
  position: absolute;
  height: 2rem;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: grid;
  grid-template-columns: 1fr auto;
}

[file_browser] .settings_header .header_title {
  font-family: NotoSansCondRegular;
  font-size: 0.95rem;
  color: white;
  display: grid;
  place-items: center;
}

[file_browser] .close_settings {
  position: absolute;
  top: 0;
  right: 0;
  width: 2rem;
  height: 2rem;
  background-image: url(css/icons/close.svg);
  background-size: 80%;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

[file_browser] .close_settings:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

[file_browser].open {
  display: grid;
  place-content: center;
}

[file_browser="browser"] :is([uploader], [change]) {
  display: none;
}
[file_browser="uploader"] :is([browser], [change]) {
  display: none;
}
[file_browser="change"] :is([browser], [uploader]) {
  display: none;
}

[browser],
[uploader],
[change] {
  display: none;
  gap: 1rem;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0.5rem;
  padding: 1rem;
  outline: 1px solid rgba(255, 255, 255, 0.3);
  border: none;
  width: 80vw;
  height: 80vh;
  backdrop-filter: blur(1rem);
  -webkit-backdrop-filter: blur(1rem);
  overflow: hidden;
}

[file_browser="browser"] [browser] {
  grid-template-columns: 18rem 1fr;
  grid-template-rows: 1fr auto;
  padding-top: 3rem;
}

[file_browser="browser"] [uploader] {
  padding-top: 3rem;
}

[file_browser="browser"] [change] {
  padding-top: 3rem;
}

[browser].open,
[uploader].open,
[change].open {
  display: grid;
}

[browser_element]:not([browser_element="buttons"], [browser_element="file_buttons"]) {
  border-radius: 0.25rem;
  padding: 1rem;
  outline: 1px solid rgba(200, 200, 200, 0.2);
  border: none;
  backdrop-filter: blur(1rem) brightness(70%);
  -webkit-backdrop-filter: blur(1rem) brightness(70%);
}

.safari [browser_element] {
  border: 1px solid rgba(200, 200, 200, 0.2);
  outline: none;
}

[browser_element] .loader {
  width: 100%;
  height: 100%;
}

[browser_element="preview"].load img {
  display: none;
}

[browser_element].load .lds-ring {
  position: absolute;
  top: 50%;
  left: 50%;
}

[browser_element].load .lds-ring div {
  display: block;
  position: absolute;
  width: 2rem;
  height: 2rem;
  border: 6px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
  transform: translate(-50%, -50%);
}

[browser_element].load .lds-ring div:nth-child(1) {
  animation-delay: 0.45s;
}

[browser_element].load .lds-ring div:nth-child(2) {
  animation-delay: 0.3s;
}

[browser_element].load .lds-ring div:nth-child(3) {
  animation-delay: 0.15s;
}

@keyframes lds-ring {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

[browser_element="files"] {
  grid-column: 1;
  grid-row: 1;
  overflow: auto;
}

[browser_element="files"] .files {
  display: grid;
  gap: 1rem;
  place-content: start;
}

[browser_element="files"] .loader {
  display: none;
}

[browser_element="files"].load .loader {
  display: grid;
}

[browser_element="files"].load .files {
  display: none;
}

[browser_element="files"] img {
  max-width: 100%;
  border-radius: 0.25rem;
  outline: 1px solid rgba(20, 20, 20, 0.25);
  border: none;
}

/* [browser_element="files"] img.selected {
    outline: 3px solid var(--teachers_bg);
    box-shadow: 0 0 10px 1px var(--teachers_bg);
}

[browser_element="files"] img:not(.selected) {
    cursor: pointer;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.5);
} */

.safari [browser_element="files"] img {
  border: 1px solid rgba(20, 20, 20, 0.25);
  outline: none;
}

.safari [browser_element="files"] img.selected {
  border: 3px solid var(--teachers_bg);
  outline: none;
}

[browser_element="preview"] {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
}

[browser_element="preview"] img {
  width: 100%;
  max-height: 100%;
  object-position: center;
  border-radius: 0.25rem;
  object-fit: contain;
  outline: 1px solid rgba(20, 20, 20, 0.25);
  border: none;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.5);
}

.safari [browser_element="preview"] img {
  border: 1px solid rgba(20, 20, 20, 0.25);
  outline: none;
}

[browser_element="preview"] img[src=""] {
  display: none;
}

[browser_element="preview"].image img {
  display: block;
}

[browser_element="preview"] .loader {
  display: none;
}

[browser_element="preview"] .preview_info {
  display: none;
}

[browser_element="preview"].load .loader {
  display: block;
}

[browser_element="preview"].info .loader {
  display: none;
}

[browser_element="preview"].info img {
  display: none;
}

[browser_element="preview"].info .preview_info {
  display: block;
  color: rgba(220, 220, 220, 0.8);
  font-size: 0.9rem;
}

[browser_element="files"] img {
  display: block;
}

[browser_element="files"].load img {
  display: none;
}

[browser_element="file_buttons"],
[browser_element="buttons"] {
  grid-row: 2;
  display: grid;
  gap: 1rem;
  grid-auto-flow: column;
  place-items: center;
  justify-content: center;
}

[browser_element="file_buttons"] {
  grid-column: 1;
}

[browser_element="buttons"] {
  grid-column: 2;
}

[file_preview] {
  display: grid;
  background-color: antiquewhite;
  padding: 0.25rem;
  gap: 0.25rem;
  border-radius: 0.25rem;
  cursor: pointer;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.5);
}

[file_preview].selected {
  outline: 3px solid var(--teachers_bg);
  background-color: var(--teachers_bg);
}

[file_preview]:not(.selected) {
  cursor: pointer;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.5);
}

[file_preview] [name] {
  width: 100%;
  font-size: 0.8rem;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[file_preview].selected [name] {
  font-size: 0.8rem;
  color: rgba(0, 0, 0, 0.75);
  translate: 0 2px;
}

/* .uploader .buttons {
    grid-template-columns: repeat(auto-fit, minmax(10rem, auto));
    grid-auto-flow: initial;
    place-content: center;
    place-items: center;
} */
[uploader] .buttons {
  grid-template-columns: repeat(auto-fit, minmax(10rem, auto));
  grid-auto-flow: initial;
  place-content: center;
  place-items: center;
}

/* .uploader [upload] {
    display: none;
}

.uploader [upload].open {
    display: grid;
    place-content: center;
} */

/* .uploader .uploader_background {
    background-color: white;
    border-radius: 0.5rem;
    padding: 1rem;
    outline: 1px solid var(--dark);
    border: none;
    width: min(var(--max-width), 90vw);
    height: min(var(--max-width), 90vh);
} */

/* .uploader .uploader_background [mode] {
    width: 100%;
    height: 100%;
    display: none;
}

.uploader .uploader_background [mode].open {
    display: grid;
    gap: 1rem;
} */

/* .uploader .uploader_background [mode="upload"].open {
    grid-template-rows: auto 1fr auto;
}

.uploader .uploader_background [mode="cropper"].open {
    grid-template-rows: auto 1fr auto;
} */

/* .safari .uploader .uploader_background {
    outline: 1px solid transparent;
    border: 1px solid var(--dark);
}

.uploader .upload_info {
    text-align: center;
} */
/* .safari [uploader] .uploader_background {
    outline: 1px solid transparent;
    border: 1px solid var(--dark);
} */

[uploader] .upload_info {
  text-align: center;
  color: rgba(220, 220, 220, 0.8);
  font-size: 0.9rem;
}

/* .uploader .upload_image {
    --size: min(100%, 20rem);
    width: var(--size);
    height: var(--size);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    place-self: center;
    cursor: pointer;
}

.upload_image:hover {
    animation: 250ms uploadHover forwards ease-in-out;
} */

/* .uploader [upload="image"] .upload_image {
    background-image: url(css/icons/editing/photo_camera.svg);
}

.uploader [upload="image"] .crop_image {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0.25rem;
    outline: 1px solid var(--dark);
    border: none;
    place-self: center;
    max-width: 100%;
}

.safari .uploader [upload="image"] .crop_image {
    outline: none;
    border: 1px solid var(--dark);
} */
/* [uploader] [upload="image"] .upload_image {
    background-image: url(css/icons/editing/photo_camera.svg);
} */

/* [uploader] [upload="image"] .crop_image { */
[uploader] .crop_image {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0.25rem;
  outline: 1px solid var(--dark);
  border: none;
  place-self: center;
  max-width: 100%;
}

/* .safari [uploader] [upload="image"] .crop_image { */
.safari [uploader] .crop_image {
  outline: none;
  border: 1px solid var(--dark);
}

/* .uploader [upload="sound"] .upload_image {
    background-image: url(css/icons/editing/campaign.svg);
} */

/* @keyframes uploadHover {
    0% {
        scale: 1;
    }

    25% {
        scale: 1.05;
        rotate: 3deg;
    }

    75% {
        rotate: -3deg;
    }

    100% {
        scale: 1;
        rotate: 0deg;
    }
} */

.cropper-view-box {
  outline: 5px dashed var(--color2) !important;
}

/****************************************************/
/********************TOPLISTA************************/
/****************************************************/
#highscores {
  position: absolute;
  width: min(100%, var(--max-width));
  height: 100%;
  z-index: 1;
  display: none;
}

#highscores.open {
  display: grid;
  gap: 1rem;
  grid-template-rows: 1fr auto;
  padding: 1rem;
  place-items: center;
}

#highscores .loader {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

#highscores .hs_content {
  width: 100%;
  height: 100%;
}

.hs_content .button {
  --background-brightness: 3%;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  background-color: var(--color4);
  box-shadow: 0 0 0;
  cursor: default;
  height: 3.5rem;
  display: grid;
  place-items: center;
  transform: none;
  outline: none;
  border: none;
}

.hs_content .button.deselect {
  cursor: pointer;
  height: 3rem;
}

.hs_content .button.deselect:hover {
  height: 3.5rem;
}

.hs_content .button.deselect:hover .title {
  color: hsl(var(--h), var(--saturation), var(--text-brightness));
}

#highscores .hs_content > .title {
  font-family: NotoSansCondRegular;
  font-size: min(1.6rem, 4vw);
  color: var(--textbox_col);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

#highscores .hs_task {
  font-weight: bold;
  color: var(--text_main);
}

.hs_hide {
  display: none;
}

/*audio*/
.audio {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 1rem;
  backdrop-filter: brightness(200%);
  border-radius: 0.5rem;
}

audio {
  border-radius: 0.5rem;
}

.editors_panel {
  display: grid;
  gap: 1rem;
  padding: 1rem;
}
.editor_info {
  font-size: 0.9rem;
}
.add_editor {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
}
.icon.add_editor {
  background-image: url(css/icons/person_add.svg);
}
.add_editor .input {
  margin: 0;
  font-size: 1rem;
  padding: 1rem;
}
.add_editor .title {
  margin: 0;
}
.editors {
  display: grid;
  gap: 0.5rem;
}
.editor {
  padding: 0.5rem;
  background-color: rgb(221, 221, 221);
  border-radius: 0.5rem;
  color: black;
  font-family: NotoSansRegular;
  display: grid;
  gap: 0 0.5rem;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
}
.editor_image {
  grid-row: 1 / 3;
  grid-column: 1;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: white;
  background-image: url(css/icons/person.svg);
  background-size: contain;
  border: 1px solid rgb(211, 211, 211, 211);
}
.editor_name {
  grid-row: 1;
  grid-column: 2;
  font-size: 1.1rem;
  text-align: left;
  align-self: end;
}
.editor_email {
  grid-row: 2;
  grid-column: 2;
  font-size: 0.8rem;
  color: dimgray;
  text-align: left;
  align-self: start;
}
.editor_remove {
  grid-row: 1 / 3;
  grid-column: 3;
  width: 1.1rem;
  height: 1.1rem;
  background-image: url(css/icons/editing/delete.svg);
  background-size: contain;
  cursor: pointer;
  filter: brightness(50%);
}
.editor_remove:hover {
  filter: brightness(10%);
}

.user_list {
  min-height: 20rem;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.5rem;
  overflow: auto;
  display: grid;
  gap: 0.5rem;
}
.user_list:not(.loading) {
  align-content: start;
}

.user_element {
  padding: 0.5rem;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0.25rem;
  backdrop-filter: blur(1rem) brightness(150%);
  display: grid;
  gap: 0.5rem;
  grid-template-columns: auto 1fr auto;
  align-items: center;
}
.user_element[found="true"] {
  background-color: rgb(152, 251, 152);
}
.user_element[found="false"] {
  background-color: rgb(255, 192, 203);
}

.user_element .avatar {
  width: 3rem;
  height: 3rem;
  background-color: darkgray;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 75%;
  border: 1px solid dimgray;
  border-radius: 50%;
}

.user_element .type {
  color: gray;
  font-family: NotoSansCondRegular;
  font-size: 0.7rem;
  text-transform: uppercase;
}
.user_element .name {
  font-family: NotoSansCondRegular;
  font-size: 1.1rem;
}
.user_element .email {
  font-size: 0.8rem;
  color: dimgray;
}

.user_element[type="email"] .avatar {
  background-image: url(css/icons/person.svg);
}
.user_element[type="group"] .avatar {
  background-image: url(css/icons/editing/publishing/group.svg);
}
.user_element .list_settings {
  display: grid;
  gap: 0.5rem;
  grid-auto-flow: column;
}
.user_element .list_settings [icon] {
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
}
.user_element .list_settings [icon="remove"] {
  background-image: url(css/icons/remove.svg);
  background-color: black;
  border-radius: 50%;
  background-position: center;
  background-size: 80%;
}
.user_element .list_settings [icon="email"] {
  background-image: url(css/icons/mail.svg);
  background-position: center;
}

.paste_grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.emails {
  font-size: 0.8em;
  padding: 1rem;
}