.theme__color {
  cursor: pointer;
  position: relative;
}
.theme__input {
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
}
.theme__input:checked + .theme__icon {
  border-radius: 1rem;
}
.theme__input:checked + .theme__icon::before {
  content: "check";
  font-size: 27px;
  color: var(--primary-dark);
  text-align: center;
  width: 3.5rem;
  line-height: 2.9rem;
  display: inherit;
  border-radius: 1rem;
  font-family: Material Symbols Rounded;
}
.theme__icon {
  display: inline-block;
  width: 3.5rem;
  height: 2.9rem;
  border-radius: 1.5rem;
  background: var(--color);
  transition: 0.2s;
  vertical-align: middle;
  font-weight: 500;
}
.theme__icon::before {
  content: "";
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.85) -100%,
    transparent 75%,
    rgba(255, 255, 255, 0.3) 100%
  );
  width: 3.5rem;
  height: 2.9rem;
  display: block;
  border-radius: 1.5rem;
  transition: 0.2s border-radius;
}
body {
  --thumb-background: #7a757f;
  --background: #e6e0e9;
  --accent-text: gray;
  --accent-text-faded: gray;
  --primary-border: gray;
  --primary-background-faded: var(--primary-background);
  --primary-foreground-faded: var(--primary-foreground);
  --timeline: var(--primary-light);
}
@supports (color: color-mix(in srgb, red, blue)) {
  body {
    --accent-text: color-mix(in srgb, var(--primary-light) 47.5%, black);
    --accent-text-faded: color-mix(
      in srgb,
      var(--accent-text) 80%,
      transparent
    );
    --accent-text-light: color-mix(in srgb, var(--accent-text) 55%, black);
    --primary-border: color-mix(in srgb, var(--accent-text) 40%, transparent);
    --primary-background-faded: color-mix(
      in srgb,
      var(--primary-background) 75%,
      transparent
    );
    --primary-foreground-faded: color-mix(
      in srgb,
      var(--primary-foreground) 90%,
      #fffefe17
    );
    --timeline: color-mix(
      in srgb,
      var(--primary-light) 50%,
      var(--primary-accent)
    );
    --background-muted: color-mix(
      in srgb,
      var(--background) 50%,
      var(--primary-background)
    );
  }
}
body[data-theme="red"] {
  --primary-light: #842a2a;
  --primary-dark: #fff;
  --primary-accent: #ffc9c9;
  --primary-foreground: #fff8f6;
  --primary-background: #ffd9d9;
  --background: #ffbaba;
  --thumb-background: #8a494f;
}
body[data-theme="red monochrome"] {
  --primary-light: #8c4c43;
  --primary-dark: #fff;
  --primary-accent: #ffcfcf;
  --primary-foreground: #fff8f6;
  --primary-background: #fceae6;
}
body[data-theme="orange"] {
  --primary-light: #8f501b;
  --primary-dark: #fff;
  --primary-accent: #ffd3a6;
  --primary-foreground: #fff7f3;
  --primary-background: #fedfbf;
  --background: #fddb9b;
  --thumb-background: #8a6449;
}
body[data-theme="orange monochrome"] {
  --primary-light: #7a4415;
  --primary-dark: #fff;
  --primary-accent: #f8dbc2;
  --primary-foreground: #fff9f3;
  --primary-background: #f8ebde;
}
body[data-theme="yellow"] {
  --primary-light: #7c5c1d;
  --primary-dark: #fff;
  --primary-accent: #fde09b;
  --primary-foreground: #fff9f3;
  --primary-background: #fdeab1;
  --background: #fdf79b;
  --thumb-background: #8a7d49;
}
body[data-theme="yellow monochrome"] {
  --primary-light: #7a5715;
  --primary-dark: #fff;
  --primary-accent: #f8e6c2;
  --primary-foreground: #fff9f3;
  --primary-background: #f8ecde;
}
body[data-theme="green"] {
  --primary-light: #2e6707;
  --primary-dark: #dbfed1;
  --primary-accent: #b4f0b3;
  --primary-foreground: #f8faef;
  --primary-background: #cdfbcc;
  --background: #c1ffc8;
  --thumb-background: #498a53;
}
body[data-theme="green monochrome"] {
  --primary-light: #456637;
  --primary-dark: #fff;
  --primary-accent: #d5e9d1;
  --primary-foreground: #f8faef;
  --primary-background: #ecefe6;
}
body[data-theme="cyan"] {
  --primary-light: #076763;
  --primary-dark: #d1fafe;
  --primary-accent: #ade2e8;
  --primary-foreground: #e8f9ff;
  --primary-background: #bff0fe;
  --background: #9be9fd;
  --thumb-background: #497d8a;
}
body[data-theme="cyan monochrome"] {
  --primary-light: #076861;
  --primary-dark: #fff;
  --primary-accent: #c9e6e9;
  --primary-foreground: #f5fbf9;
  --primary-background: #e9efed;
}
body[data-theme="blue"] {
  --primary-light: #275586;
  --primary-dark: #d1edfe;
  --primary-accent: #bce6ff;
  --primary-foreground: #eef9ff;
  --primary-background: #d1eeff;
  --background: #9bd8fd;
  --thumb-background: #495c8a;
}
body[data-theme="blue monochrome"] {
  --primary-light: #396089;
  --primary-dark: #fff;
  --primary-accent: #c9e6ff;
  --primary-foreground: #f8f9fe;
  --primary-background: #edeef3;
}
body[data-theme="purple"] {
  --primary-light: #6a2897;
  --primary-dark: #f0d1fe;
  --primary-accent: #f0bcff;
  --primary-foreground: #fcf2ff;
  --primary-background: #fbd1ff;
  --background: #dbbcff;
  --thumb-background: #6a498a;
}
body[data-theme="purple monochrome"] {
  --primary-light: #705284;
  --primary-dark: #fff;
  --primary-accent: #e8e1f3;
  --primary-foreground: #fff6fe;
  --primary-background: #f5ebf3;
}
body[data-theme="pink"] {
  --primary-light: #9b2e57;
  --primary-dark: #ffd9ee;
  --primary-accent: #ffc8d9;
  --primary-foreground: #fef8f8;
  --primary-background: #ffd9e5;
  --background: #ffb3de;
  --thumb-background: #9d3e66;
}
body[data-theme="pink monochrome"] {
  --primary-light: #834d6f;
  --primary-dark: #fff;
  --primary-accent: #ffd9e5;
  --primary-foreground: #fef8f8;
  --primary-background: #f9eaef;
}
.switch:has(.switch__input:checked) {
  background-color: var(--primary-accent);
}
#submenu.selectedSubmenu {
  background-color: var(--primary-background);
}
@media (prefers-color-scheme: dark) {
  .switch:has(.switch__input:checked),
  #submenu.selectedSubmenu {
    background-color: var(--primary-dark);
  }
  body {
    --thumb-background: #948f99;
    --background: #312f35;
    --accent-text: rgba(255, 255, 255, 0.8);
    --accent-text-faded: rgba(255, 255, 255, 0.8);
    --primary-border: rgba(255, 255, 255, 0.4);
  }
  @supports (color: color-mix(in srgb, red, blue)) {
    body {
      --accent-text: color-mix(in srgb, var(--primary-light) 47.5%, white);
      --accent-text-faded: color-mix(
        in srgb,
        var(--accent-text) 80%,
        transparent
      );
      --accent-text-light: color-mix(in srgb, var(--accent-text) 55%, white);
      --primary-border: color-mix(in srgb, var(--accent-text) 40%, transparent);
      --primary-darker: color-mix(
        in srgb,
        var(--primary-dark) 20%,
        var(--primary-background)
      );
    }
  }
  body[data-theme="red"] {
    --primary-light: #fda294;
    --primary-dark: #610f11;
    --primary-accent: #571a14;
    --primary-foreground: #601818;
    --primary-background: #460c0c;
    --background: #310002;
    --thumb-background: #95464a;
  }
  body[data-theme="red monochrome"] {
    --primary-light: #fab6ad;
    --primary-dark: #610f11;
    --primary-accent: #571a14;
    --primary-foreground: #423735;
    --primary-background: #271d1c;
  }
  body[data-theme="orange"] {
    --primary-light: #ffa886;
    --primary-dark: #612512;
    --primary-accent: #462400;
    --primary-foreground: #552115;
    --primary-background: #3f180c;
    --background: #311500;
    --thumb-background: #884e40;
  }
  body[data-theme="orange monochrome"] {
    --primary-light: #f0b58b;
    --primary-dark: #614d12;
    --primary-accent: #463213;
    --primary-foreground: #3f352e;
    --primary-background: #241d17;
  }
  body[data-theme="yellow"] {
    --primary-light: #f1ca6d;
    --primary-dark: #5f4201;
    --primary-accent: #462b13;
    --primary-foreground: #483214;
    --primary-background: #332305;
    --background: #312000;
    --thumb-background: #8a6e49;
  }
  body[data-theme="yellow monochrome"] {
    --primary-light: #edbe76;
    --primary-dark: #614d12;
    --primary-accent: #463213;
    --primary-foreground: #3f382e;
    --primary-background: #242017;
  }
  body[data-theme="green"] {
    --primary-light: #a1e184;
    --primary-dark: #2b4f1f;
    --primary-accent: #28462b;
    --primary-foreground: #2a3c27;
    --primary-background: #1c2d19;
    --background: #0f3100;
    --thumb-background: #5d8452;
  }
  body[data-theme="green monochrome"] {
    --primary-light: #a9d195;
    --primary-dark: #2b4f1f;
    --primary-accent: #28462b;
    --primary-foreground: #373a33;
    --primary-background: #1c211b;
  }
  body[data-theme="cyan"] {
    --primary-light: #00dcff;
    --primary-dark: #003a42;
    --primary-accent: #00303a;
    --primary-foreground: #00303a;
    --primary-background: #001d23;
    --background: #002a31;
    --thumb-background: #497d8a;
  }
  body[data-theme="cyan monochrome"] {
    --primary-light: #82d5cd;
    --primary-dark: #003a42;
    --primary-accent: #00303a;
    --primary-foreground: #343a3a;
    --primary-background: #1b2121;
  }
  body[data-theme="blue"] {
    --primary-light: #56bbff;
    --primary-dark: #0b3b62;
    --primary-accent: #002746;
    --primary-foreground: #002746;
    --primary-background: #011b32;
    --background: #000c31;
    --thumb-background: #495f8a;
  }
  body[data-theme="blue monochrome"] {
    --primary-light: #a0cafc;
    --primary-dark: #122861;
    --primary-accent: #002746;
    --primary-foreground: #36393e;
    --primary-background: #1d2025;
  }
  body[data-theme="purple"] {
    --primary-light: #dba6f9;
    --primary-dark: #3d1261;
    --primary-accent: #341d51;
    --primary-foreground: #391557;
    --primary-background: #28013e;
    --background: #160031;
    --thumb-background: #66498a;
  }
  body[data-theme="purple monochrome"] {
    --primary-light: #dfb8f7;
    --primary-dark: #3d1261;
    --primary-accent: #4a1c51;
    --primary-foreground: #3d383e;
    --primary-background: #231e24;
  }
  body[data-theme="pink"] {
    --primary-light: #ff94b3;
    --primary-dark: #751c3d;
    --primary-accent: #730438;
    --primary-foreground: #68132f;
    --primary-background: #4d0c21;
    --background: #440006;
    --thumb-background: #a84762;
  }
  body[data-theme="pink monochrome"] {
    --primary-light: #f5b3d9;
    --primary-dark: #63002b;
    --primary-accent: #730438;
    --primary-foreground: #40373c;
    --primary-background: #241e20;
  }
}
.switch__label {
  position: relative;
  cursor: pointer;
  margin-left: auto;
}
.switch__input {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
}
.switch__input:focus + .switch__design {
  box-shadow:
    0 0 0 0.1rem var(--global-background),
    0 0 0 0.2rem var(--focus);
}
.switch {
  --width: 48px;
  --height: 28px;
  --checked-background: var(--primary-light);
  --thumb-size: 22px;
  --thumb-ripple-color: var(--ripple);
  --checked-thumb-background: var(--primary-dark);
  --thumb-space-between-edges: 0.2rem;
  --thumb-out: var(--thumb-space-between-edges);
  max-width: calc(100vw - 92px);
  padding: 16px;
}
.switch__design {
  width: var(--width);
  height: var(--height);
  border: var(--border);
  border-radius: 100rem;
  background: var(--background);
  position: relative;
  transition: 0.1s;
  border: 2px solid var(--thumb-background);
  float: right;
  bottom: 6.5px;
}
.switch__design::before {
  content: "";
  position: absolute;
  left: var(--thumb-out);
  top: 50%;
  transform: translateY(-50%);
  width: var(--thumb-size);
  height: var(--thumb-size);
  border-radius: 100rem;
  background: var(--thumb-background);
  transition: inherit;
  font-weight: 500;
}
.switch__input:checked + .switch__design {
  border-color: transparent;
  background: var(--checked-background);
  --thumb-size: 24px;
  --thumb-space-between-edges: 0.1rem;
  --thumb-out: var(--thumb-space-between-edges);
}
.switch__input:checked + .switch__design::before {
  left: calc(100% - (var(--thumb-size) + var(--thumb-out)));
  background: var(--checked-thumb-background);
  content: "check";
  text-align: center;
  line-height: 1.35;
  color: var(--checked-background);
  font-family: Material Symbols Rounded;
  font-size: 18px;
  font-variation-settings: "wght" 500;
}
.switch__input:not(:checked) + .switch__design::before {
  color: var(--background);
  content: "close";
  text-align: center;
  letter-spacing: 2px;
  line-height: 1.35;
  font-family: Material Symbols Rounded;
  font-variation-settings: "wght" 600;
}

.material-textfield {
  position: relative;
  padding: 12px;
}

.material-textfield label {
  position: absolute;
  font-size: 1rem;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--primary-foreground);
  color: var(--accent-text-faded);
  padding: 0 0.3rem;
  margin: 0 0.5rem;
  transition: 0.1s ease-out;
  transform-origin: left top;
  pointer-events: none;
  border-radius: 8px;
}
.material-textfield input {
  font-size: 1rem;
  outline: none;
  border: 1px solid var(--primary-border);
  border-radius: 0.5rem;
  padding: 1rem 0.7rem;
  width: calc(100% - 25px);
  font-family: inherit;
  font-feature-settings:
    "liga" 1,
    "calt" 1,
    "cv07" 1;
  background-color: transparent;
  font-weight: 450;
  letter-spacing: 0.1px;
}
p {
  margin: 0;
  font-weight: 450;
  letter-spacing: 0.1px;
}
#closeBtn {
  font-size: inherit;
  float: right;
  margin-left: auto;
  margin-top: 12px;
  view-transition-name: close;
}

#schoolName {
  max-width: calc(100% - 95px);
}
.material-textfield input:focus {
  border: 3px solid var(--primary-light);
  padding: calc(1rem - 2px) calc(0.7rem - 2px);
}
.material-textfield input:focus + label {
  color: var(--primary-light);
  top: 14px;
  transform: translateY(-50%) scale(0.9);
  font-weight: 450;
  letter-spacing: 0.1px;
}
.material-textfield input:not(:placeholder-shown) + label,
.material-textfield select:not(:placeholder-shown) + label {
  top: 14px;
  transform: translateY(-50%) scale(0.9);
  font-weight: 450;
  letter-spacing: 0.1px;
}
::selection {
  background-color: var(--primary-light);
  color: var(--primary-dark);
}
#container,
.right #content {
  max-height: calc(100vh - 160px);
  max-width: calc(100vw - 60px);
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 1rem;
}
#container {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: min-content auto;
}
@media (max-width: 570px) {
  #container {
    grid-template-columns: auto;
  }
  #dialog {
    width: 292px;
  }
}