/* Main elements */
body {
  font-family: Arial, sans-serif;
  font-size: 13.0892px;
}

:focus-visible {
  outline: unset;
}

#form {
  max-width: 900px;
}

fieldset {
  margin: 0.25em;
}

.radio-text {
  margin-left: 0.2em;
}

.text {
  margin-top: 0.2em;
}

.text input {
  width: 50%;
  font-size: 85%;
}

.text-short input {
  width: 25%;
}

.text-tiny input {
  width: 3em;
}

.text-tiny input.user-size {
  width: 6.5em;
}

.text-tiny input.date-size {
  width: 16.2ch;
}

input[type=radio] {
  height: 11px;
  width: 11px;
}

#duration-custom-value {
  width: 8ch;
}

#build {
  margin: 0.4em;
}

.info {
  font-size: 0.8em;
}

#ban-options-rule,
#shield-options-rule,
#custom-css,
#template,
#output {
  width: 85%;
  font-size: 0.85em;
}

#output {
  max-width: 800px;
}

/* Options grid style */
.options-grid {
  display: -ms-grid;
  display: grid;
  grid-template-areas:
    "basic activity"
    "other activity";
}

@media only screen and (max-width: 643px) {
  .options-grid {
    display: -ms-grid;
    display: grid;
    grid-template-areas:
      "basic"
      "activity"
      "other";
  }
}

.options-grid .basic {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: basic;
}

.options-grid .activity {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 2;
  grid-area: activity;
}

.options-grid .other {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: other;
}

@media only screen and (max-width: 643px) {
  .options-grid .basic {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
  }

  .options-grid .activity {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
  }

  .options-grid .other {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
  }
}

/* Dark theme styles*/
.dark:root {
  background: #202020;
  color: rgb(210, 210, 210);
}

.dark:root a {
  color: #fff;
}

.dark:root textarea {
  background: #161616 !important;
  color: rgb(210, 210, 210);
  border: 1px solid #c1c1c1;
}

.dark:root input,
.dark:root select,
.dark:root button {
  background: #161616 !important;
  color: rgb(210, 210, 210);
  border: 1px solid #c1c1c1;
  border-radius: 4px;
  padding: 2.5px 5px;
}

.dark:root input[type="number"]::-webkit-inner-spin-button,
.dark:root input[type="number"]::-webkit-outer-spin-button {
  background-color: #252424;
  color: rgb(210, 210, 210);
}

.dark input[type="number"] {
  -moz-appearance: textfield;
  /* Firefox */
}

.dark:root button:hover {
  background: #202020;
}

/* Basic utility classes */
.hidden {
  display: none;
}

#error {
  text-align: center;
  color: #b01;
}

.error-secondary {
  font-size: 0.6em;
}

#output {
  font-family: 'Droid Sans Mono', 'DejaVu Sans Mono', monospace;
  margin: 0 0.4em;
}