:root {
  --bgcolor--error: rgb(255, 192, 192);
  --bgcolor--green: hsla(120, 100%, 50%, 0.25);
  --bgcolor--red: hsla(0, 100%, 50%, 0.25);
  --bgcolor--super-status: rgba(0, 0, 136, 0.5);
  --bgcolor--tramp-status: rgba(0, 136, 0, 0.5);
  --bgcolor--ultra-status: rgba(136, 0, 136, 0.5);
  --body--bgcolor--dark: rgb(17, 17, 17);
  --body--bgcolor--light: rgb(221, 221, 221);
  --body--color--dark: rgb(221, 221, 221);
  --body--color--light: rgb(17, 17, 17);
  --color--error: rgb(164, 38, 44);
  --color--super-progress: rgba(0, 0, 192, 0.5);
  --color--tramp-progress: rgba(0, 192, 0, 0.5);
  --color--ultra-progress: rgba(192, 0, 192, 0.5);
  --body--font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --body-font-weight: 400;
  --body-font-size: 14px;
  --hue-voice--bari: 120;
  --hue-voice--bass: 240;
  --hue-voice--guest: 300;
  --hue-voice--lead: 0;
  --hue-voice--tenor: 60;
}

@keyframes blink--bari {
  0% {
    background-color: hsla(var(--hue-voice--bari), 100%, 50%, 0.15);
  }

  25% {
    background-color: hsla(var(--hue-voice--bari), 100%, 50%, 0.40);
  }

  50% {
    background-color: hsla(var(--hue-voice--bari), 100%, 50%, 0.40);
  }

  75% {
    background-color: hsla(var(--hue-voice--bari), 100%, 50%, 0.15);
  }

  100% {
    background-color: hsla(var(--hue-voice--bari), 100%, 50%, 0.15);
  }
}

@keyframes blink--bass {
  0% {
    background-color: hsla(var(--hue-voice--bass), 100%, 50%, 0.15);
  }

  25% {
    background-color: hsla(var(--hue-voice--bass), 100%, 50%, 0.40);
  }

  50% {
    background-color: hsla(var(--hue-voice--bass), 100%, 50%, 0.40);
  }

  75% {
    background-color: hsla(var(--hue-voice--bass), 100%, 50%, 0.15);
  }

  100% {
    background-color: hsla(var(--hue-voice--bass), 100%, 50%, 0.15);
  }
}

@keyframes blink--guest {
  0% {
    background-color: hsla(var(--hue-voice--guest), 100%, 50%, 0.15);
  }

  25% {
    background-color: hsla(var(--hue-voice--guest), 100%, 50%, 0.40);
  }

  50% {
    background-color: hsla(var(--hue-voice--guest), 100%, 50%, 0.40);
  }

  75% {
    background-color: hsla(var(--hue-voice--guest), 100%, 50%, 0.15);
  }

  100% {
    background-color: hsla(var(--hue-voice--guest), 100%, 50%, 0.15);
  }
}

@keyframes blink--lead {
  0% {
    background-color: hsla(var(--hue-voice--lead), 100%, 50%, 0.15);
  }

  25% {
    background-color: hsla(var(--hue-voice--lead), 100%, 50%, 0.40);
  }

  50% {
    background-color: hsla(var(--hue-voice--lead), 100%, 50%, 0.40);
  }

  75% {
    background-color: hsla(var(--hue-voice--lead), 100%, 50%, 0.15);
  }

  100% {
    background-color: hsla(var(--hue-voice--lead), 100%, 50%, 0.15);
  }
}

@keyframes blink--tenor {
  0% {
    background-color: hsla(var(--hue-voice--tenor), 100%, 50%, 0.15);
  }

  25% {
    background-color: hsla(var(--hue-voice--tenor), 100%, 50%, 0.40);
  }

  50% {
    background-color: hsla(var(--hue-voice--tenor), 100%, 50%, 0.40);
  }

  75% {
    background-color: hsla(var(--hue-voice--tenor), 100%, 50%, 0.15);
  }

  100% {
    background-color: hsla(var(--hue-voice--tenor), 100%, 50%, 0.15);
  }
}

body {
  font-family: var(--body--font-family);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  margin: 0;

  &.dark {
    background-color: var(--body--bgcolor--dark);
    color: var(--body--color--dark);
  }

  &.light {
    background-color: var(--body--bgcolor--light);
    color: var(--body--color--light);
  }
}

main {
  max-width: 100vw;
  min-width: 60vw;
  padding: 1em;
}

.accessibility {
  position: absolute;
  left: -1000px;
  top: -1000px;
  z-index: 1000;
}

.accessibility:focus {
  position: relative;
  left: 0;
  top: 0;
}

.App.theme--dark {
  background-color: rgba(51, 51, 51, 0.15);
  --border--subtle: rgba(255, 255, 255, 0.25);
  --button--background: rgba(0, 0, 0, .75);
  --button--background-hover: rgba(0, 0, 128, .85);
  --button--foreground: rgba(255, 255, 255, .85);
  --color--negative: rgba(128, 0, 0, 0.85);
  --color--neutral: rgba(255, 255, 255, 0.85);
  --color--placeholder: rgba(255, 255, 255, 0.5);
  --color--positive: rgba(0, 128, 0, 0.85);
  --form--negative-background: rgba(255, 0, 0, 0.15);
  --form--neutral-background: rgba(255, 255, 255, 0.15);
  --form--positive-background: rgba(0, 128, 0, 0.15);
  --input--background: rgba(15, 15, 15, 1);
  --input--border: rgba(255, 255, 255, 1);
  --input--border-hover: rgba(255, 255, 0, 0.75);
}

.App.theme--light {
  background-color: var(rgba(255, 255, 255, 0.85));
  --border--subtle: rgba(0, 0, 0, 0.25);
  --button--background: rgba(255, 255, 255, .75);
  --button--background-hover: rgba(0, 0, 128, .15);
  --button--foreground: rgba(0, 0, 0, .85);
  --color--negative: rgba(128, 0, 0, 0.85);
  --color--neutral: rgba(0, 0, 0, 0.85);
  --color--placeholder: rgba(0, 0, 0, 0.5);
  --color--positive: rgba(0, 128, 0, 0.85);
  --form--negative-background: rgba(255, 0, 0, 0.15);
  --form--neutral-background: rgba(0, 0, 0, 0.15);
  --form--positive-background: rgba(0, 128, 0, 0.15);
  --input--background: rgba(255, 255, 255, 1);
  --input--border: rgba(0, 0, 0, 1);
  --input--border-hover: rgba(255, 255, 0, 0.75);
}

.div--columns {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  margin-left: auto;
  margin-right: auto;
}

.div--form-buttons {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 1em;
}

.div--rows {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
}

.flex--horizontal {
  display: flex;
  flex-flow: row wrap;
  gap: 2em;
}

.flex-align--center {
  align-items: center;
}

.flex-grow {
  flex-grow: 1;
}

.flex-justify--center {
  justify-content: center;
}

.flex-justify--end {
  justify-content: end;
}

.flex-justify--space-between {
  justify-content: space-between;
}

.gap--1em {
  gap: 1em;
}

.margin--0_5em {
  margin: 0.5em;
}

.margin--2em {
  margin: 2em;
}

.max-height--2em {
  max-height: 2em;
}

@media only screen and (min-width: 768px) {
  div.singer-card {
    max-width: calc(256px - 0.75em);
  }
}

@media only screen and (min-width: 1024px) {
  div.singer-card {
    max-width: calc(256px - 1em);
  }
}

@media only screen and (min-width: 1280px) {
  div.singer-card {
    max-width: calc(256px - 1.2em);
  }
}

/*# sourceMappingURL=app.css.map*/