:root {
  --main-color: 240, 10%;
  --main-color-10: hsl(var(--main-color), 10%);
  --main-color-15: hsl(var(--main-color), 15%);
  --main-color-20: hsl(var(--main-color), 20%);
  --main-color-25: hsl(var(--main-color), 25%);
  --main-color-30: hsl(var(--main-color), 30%);
  --main-color-35: hsl(var(--main-color), 35%);
  --main-color-40: hsl(var(--main-color), 40%);
  --main-color-45: hsl(var(--main-color), 45%);
  --main-color-50: hsl(var(--main-color), 50%);
  --main-color-55: hsl(var(--main-color), 55%);
  --main-color-60: hsl(var(--main-color), 60%);
  --main-color-65: hsl(var(--main-color), 65%);
  --main-color-70: hsl(var(--main-color), 70%);
  --main-color-75: hsl(var(--main-color), 75%);
  --main-color-80: hsl(var(--main-color), 80%);
  --main-color-85: hsl(var(--main-color), 85%);
  --main-color-90: hsl(var(--main-color), 90%);
  --main-color-95: hsl(var(--main-color), 95%);
  --main-color-100: hsl(var(--main-color), 100%);

  --main-font-color: white;

  --highlight-color: 60, 100%;
  --highlight-color-10: hsl(var(--highlight-color), 10%);
  --highlight-color-20: hsl(var(--highlight-color), 20%);
  --highlight-color-30: hsl(var(--highlight-color), 30%);
  --highlight-color-40: hsl(var(--highlight-color), 40%);
  --highlight-color-50: hsl(var(--highlight-color), 50%);
  --highlight-color-60: hsl(var(--highlight-color), 60%);
  --highlight-color-70: hsl(var(--highlight-color), 70%);
  --highlight-color-80: hsl(var(--highlight-color), 80%);
  --highlight-color-90: hsl(var(--highlight-color), 90%);
  --highlight-color-100: hsl(var(--highlight-color), 100%);

  --highlight-font-color: hsl(var(--highlight-color), 50%);
}

body {
  background-color: var(--main-color-10);
  color: var(--main-font-color);
  font-family: 'Noto Sans KR', sans-serif;
  margin: 0;
}

a {
  color: var(--main-font-color);
}

button {
  color: var(--main-font-color);
}

form {
  margin: 0;
}

header {
  font-weight: bold;
  padding-top: 0.5em;
}

header.header-main {
  background-color: var(--main-color-20);
  display: flex;
  flex-wrap: wrap;
}

header.header-sub {
  background-color: var(--main-color-25);
}

header.header-sub-sub {
  background-color: var(--main-color-30);

}

nav.nav-user {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
}

nav ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

nav a {
  display: inline-block;
  margin: 0;
  padding: 1em;
  text-align: center;
  text-decoration: none;
}

header.header-main a:hover {
  background-color: var(--main-color-35);
}

header.header-sub a:hover {
  background-color: var(--main-color-40);
}

header.header-sub-sub a:hover {
  background-color: var(--main-color-45);
}

header.header-main a:active {
  background-color: var(--main-color-45);
}

header.header-sub a:active {
  background-color: var(--main-color-50);
}

header.header-sub-sub a:active {
  background-color: var(--main-color-55);
}

header a.selected {
  color: var(--highlight-font-color);
}

header.header-main a:active, header.header-sub a:active, header.header-sub-sub a:active {
  background-color: var(--main-color-50);
  color: var(--highlight-font-color);
}


main {
  display: flex;
  justify-content: center;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"],
select,
button,
textarea,
.file-indicator {
  background-color: var(--main-color-35);
  border: none;
  border-radius: 0.25rem;
  color: var(--main-font-color);
  padding: 0.5rem 1rem;
  margin: 0.25rem;
  font-size: 1em;
  height: 3rem;
  min-width: 0;
}

.file-indicator {
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

button {
  cursor: pointer;
}

.file-button {
  background-color: var(--main-color-35);
  border: none;
  border-radius: 0.25rem;
  color: var(--main-font-color);
  padding: 0 1rem;
  margin: 0.25rem !important;
  font-size: 1em;
  height: 3rem;
  cursor: pointer;

  display: flex;
  align-items: center;
}

textarea {
  font-family: inherit;
  resize: vertical;
  min-height: 3rem;
  max-height: 90vh;
}

input[type="radio"] {
  appearance: none;
  background-color: var(--main-font-color);
  margin: 0 0.5em 0 0;
  font: inherit;
  width: 1.15em;
  height: 1.15em;
  border: none;
  border-radius: 50%;
  display: inline-grid;
  place-content: center;
}

input[type="radio"]::before {
  content: "";
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  border: none;
  transform: scale(0);
  transition: all 120ms ease-in-out;
  background-color: var(--main-color-100);
}

input[type="radio"]:hover::before {
  background-color: var(--main-color-75);
  transform: scale(1);
}

input[type="radio"]:checked:hover::before {
  background-color: var(--main-color-50);
  transform: scale(1);
}

input[type="radio"]:checked::before {
  background-color: var(--main-color-50);
  transform: scale(0.65);
}

.radio-wrapper {
  display: flex;
  align-items: center;
  margin: 0.25rem;
  min-height: 1.5rem;
}

input[type="checkbox"] {
  appearance: none;
  background-color: var(--main-font-color);
  margin: 0;
  font: inherit;
  width: 1.15em;
  height: 1.15em;
  border: none;
  border-radius: 25%;
  display: inline-grid;
  place-content: center;
}

input[type="checkbox"]::before {
  content: "";
  background-color: var(--main-color-100);
  margin: 0;
  font: inherit;
  width: 1.15em;
  height: 1.15em;
  border: none;
  border-radius: 25%;
  transform: scale(0);
  transition: all 120ms ease-in-out;
}

input[type="checkbox"]:hover::before {
  background-color: var(--main-color-75);
  transform: scale(1);
}

input[type="checkbox"]:checked:hover::before {
  background-color: var(--main-color-50);
  transform: scale(1);
}

input[type="checkbox"]:checked::before {
  background-color: var(--main-color-50);
  /* border-radius: 0.3em; */
  transform: scale(0.65);
}

input[type="range"] {
  appearance: none;
  background: var(--main-color-15);
  outline: none;
  border-radius: 1em;
  overflow: hidden;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 1.45em;
  height: 1.45em;
  border-radius: 50%;
  background: var(--main-color-50);
  cursor: pointer;
  border: 0.3em solid var(--main-color-100);
  box-shadow: -407px 0 0 400px var(--main-color-35);
  transition: all 120ms ease-in-out;
}

input[type="range"]:hover::-webkit-slider-thumb {
  border: none;
}

.range-wrapper {
  display: flex;
  align-items: center;
}

.range-wrapper input[type="range"] {
  flex-grow: 1;
}

.range-wrapper output {
  margin-left: 1em;
}

section {
  background-color: var(--main-color-20);
  margin-top: 2em;
  border-radius: 1em;
  padding: 1em;
  width: 100%;
  max-width: 800px;
}

section > :first-child {
  margin-top: 0;
}

section > :last-child {
  margin-bottom: 0;
}

.section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1em;
  margin-bottom: 1em;
}

.section-header:first-child {
  margin-top: 0;
}

.section-header * {
  margin: 0;
}

.section-header h1 {
  flex-grow: 1;
}

.section-header form {
  display: flex;
  align-items: center;
}

.section-row {
  padding: 0.5em;
  text-decoration: none;
  display: flex;
  align-items: center;
  min-height: 2.5em;
}

.section-row:hover {
  background-color: var(--main-color-45);
}

.scroll-area {
  background-color: var(--main-color-15);
  border-radius: 1em;
  overflow-y: auto;
  padding: 0.5em;
  min-height: 3em;
}

.scroll-area::-webkit-scrollbar
{
	width: 0.5em;
	background-color: transparent;
}

.scroll-area::-webkit-scrollbar-track
{
	border-radius: 0 1em 1em 0;
	background-color: var(--main-color-15);
}

.scroll-area::-webkit-scrollbar-thumb
{
	border-radius: 1em;
	background-color: var(--main-color-35);
}

.list {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.list-row {
  padding: 0.5em;
  text-decoration: none;
  display: flex;
  align-items: center;
  min-height: 2.5em;
  flex-wrap: wrap;
}

.list-row:hover {
  background-color: var(--main-color-45);
}

.list-row .button-wrapper {
  display: inline;
  margin-block-end: 0;
  align-items: center;
}

.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}

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

.login section {
  flex-grow: 0;
  width: fit-content;
}

.login form {
  margin: 0;
}

.login label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.login input {
  margin-bottom: 1em;
}

.login .button-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.source-row {
  height: 3em;
}

.source-row:hover {
  background-color: var(--main-color-45);
}

.source-row, .node-row {
  display: flex;
  align-items: center;
}

.source-row .source-name {
  flex-grow: 1;
}

.source-row form, form.source-row {
  margin: 0;
}

.icon-button {
  padding: 0.25em;
  height: auto;
  margin-left:  0;
  margin-right: 0.1em;
}

.cluster-list .cluster-name {
  flex-grow: 1;
}

.node-list .node-name {
  flex-grow: 1;
}

.file-list .list-row form {
  display: flex;
  align-items: center;
  width: 100%;
}

.file-list .list-row input {
  flex-grow: 1;
}

.file-list .list-row span {
  margin: 0 1em;
}

.node-upgrade-list .list-row form {
  display: flex;
  align-items: center;
  width: 100%;
}

.node-upgrade-list .list-row .version {
  flex-grow: 1;
}

.upgrade-list .list-row form {
  display: flex;
  align-items: center;
  width: 100%;
}

.upgrade-list .list-row .version {
  flex-grow: 5;
  flex-basis: 100px;
}

.upgrade-list .list-row .type {
  flex-grow: 1;
  flex-basis: 10px;
}

.upgrade-list .list-row span {
  margin: 0 1em;
}


.grid-row-header {
  grid-column: 1;
}

.grid-row-span {
  grid-column: 2 / -1;
}

.input-repeat,
.input-duration {
  width: 5em;
}

.popup-wrapper {
  background-color: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  padding: 15px;
}

.popup {
  width: 100%;
  max-width: 600px;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--main-color-20);
  box-shadow: 5px 10px 10px 1px rgba(0,0,0,1);
  padding: 1em;
}

.popup-button {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.heading-icon {
  margin-right: 0.5em;
}


.cluster-popup {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: 1em;
  align-items: center;
  margin: 0;
}

.node-status-icon {
  margin-right: 0.65rem;
}

.broadcast-option {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: 1em;
  align-items: center;
}

.broadcast-option-tts,
.broadcast-option-source,
.broadcast-option-stream {
  display: contents;
}

.broadcast-option .source-list,
.broadcast-option .play-list,
.broadcast-option .node-list {
  max-height: 15em;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.broadcast-option .node-list .list-row {
  padding: 0;
}

.broadcast-option .node-list input {
  margin-left:  0.55em;
  margin-right: 0.75em;
}

.schedule-option {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: 1em;
  align-items: center;
}

.schedule-option-tts,
.schedule-option-source,
.schedule-option-stream {
  display: contents;
}

.schedule-option .source-list,
.schedule-option .play-list,
.schedule-option .node-list {
  max-height: 15em;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.schedule-option .node-list .list-row {
  padding: 0;
}

.schedule-option .node-list input {
  margin-left:  0.55em;
  margin-right: 0.75em;
}

.schedule-list .schedule-name {
  flex-grow: 5;
  flex-basis: 1px;
}

.schedule-list .schedule-time {
  flex-grow: 1;
  flex-basis: 1px;
}

.schedule-list .schedule-type {
  flex-grow: 1;
  flex-basis: 1px;
  display: flex;
  justify-content: center;
}

.source-popup {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: 1em;
  align-items: center;
  margin: 0;
}

.node-list label {
  display: flex;
  align-items: center;
  height: 3rem;
}

.node-popup {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: 1em;
  align-items: center;
  margin: 0;
}

.node-popup .token-wrapper {
  display: flex;
  align-items: center;
}

.node-popup .token-wrapper input {
  flex-grow: 1;
  margin-right: 0;
  border-right: 1px solid var(--main-color-50);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.node-popup .token-wrapper button {
  margin-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.user-list .user-name {
  flex-grow: 5;
  flex-basis: 1px;
}

.user-list .user-type {
  flex-grow: 1;
  flex-basis: 1px;;

  display: flex;
  justify-content: center;
}

.user-option {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: 1em;
}

.user-option .node-list {
  max-height: 10em;
  margin: 0;
}

.tts-preset-list .tts-preset-name {
  flex-grow: 1;
}

.tts-preset-option {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: 1em;
  align-items: center;
}

.stream-preset-list .stream-preset-name {
  flex-grow: 1;
}

.stream-preset-option {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: 1em;
  align-items: center;
}

.upgrade-popup {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  row-gap: 1em;
  align-items: center;
  margin: 0;
}