:root {
  --bg: #4a5942;
  --secondary-bg: #3e4637;

  --accent: #c4b550;
  --secondary-accent: #958831;

  --text: #dedfd6;
  --secondary-text: #d8ded3;
  --text-3: #a0aa95;

  --border-light: #8c9284;
  --border-dark: #292c21;

  --disabled-text: #292c21;
  --disabled-text-shadow: #75806f;

  --outline: #000;
  --slider: #7f8c7f;
  --slider-bg: #1f1f1f;

  --scrollbar-track: #5a6a50;
}

@font-face {
  font-family: ArialPixel;
  src: url('https://cdn.jsdelivr.net/gh/ekmas/cs16.css@main/ArialPixel.ttf')
    format('truetype');
  font-weight: 400;
  font-style: normal;
}

.cs {
  & {
    font-weight: 400;
    line-height: 1.5;
    background-color: var(--bg);
    color: var(--text);
    font-family: ArialPixel, system-ui, sans-serif;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
    padding: 0;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
    font-weight: 400;
  }

  /* Scrollbars */

  ::-webkit-scrollbar {
    width: 18px;
    width: 1.125rem;
  }

  ::-webkit-scrollbar-track {
    background-color: var(--scrollbar-track);
    width: 18px;
    width: 1.125rem;
    border: 1px solid var(--border-dark);
    border-left: 0;
  }

  ::-webkit-scrollbar-thumb {
    width: 17px;
    width: 1.0625rem;
    background-color: var(--bg);
    border: 1px solid;
    border-color: var(--border-light) var(--border-dark) var(--border-dark)
      var(--border-light);
  }

  ::-webkit-scrollbar-corner {
    background-color: var(--scrollbar-track);
  }

  ::-webkit-scrollbar-button:vertical:start:decrement,
  ::-webkit-scrollbar-button:vertical:end:increment {
    display: block;
  }

  ::-webkit-scrollbar-button:vertical:start:increment,
  ::-webkit-scrollbar-button:vertical:start:decrement,
  ::-webkit-scrollbar-button:vertical:end:increment,
  ::-webkit-scrollbar-button:vertical:end:decrement {
    background-repeat: no-repeat;
    height: 17px;
    height: 1.0625rem;
  }

  ::-webkit-scrollbar-button:vertical:start {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M6,8 7,8 7,9 6,9 M7,9 8,9 8,10 7,10 M7,8 8,8 8,9 7,9 M7,7 8,7 8,8 7,8 M8,9 9,9 9,10 8,10 M8,8 9,8 9,9 8,9 M8,7 9,7 9,8 8,8 M8,6 9,6 9,7 8,7 M9,9 10,9 10,10 9,10 M9,8 10,8 10,9 9,9 M9,7 10,7 10,8 9,8 M10,9 11,9 11,10 10,10 M10,8 11,8 11,9 10,9 M11,9 12,9 12,10 11,10 ' fill='%23a0aa95'/%3E%3C/svg%3E");
  }

  ::-webkit-scrollbar-button:vertical:start,
  ::-webkit-scrollbar-button:vertical:end {
    border: 1px solid;
    border-color: var(--border-light) var(--border-dark) var(--border-dark)
      var(--border-light);
  }

  ::-webkit-scrollbar-button:vertical:start:active,
  ::-webkit-scrollbar-button:vertical:end:active {
    border-color: var(--border-dark) var(--border-light) var(--border-light)
      var(--border-dark);
  }

  ::-webkit-scrollbar-button:vertical:start:active,
  ::-webkit-scrollbar-button:vertical:start:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M7,9 8,9 8,10 7,10 M8,9 9,9 9,10 8,10 M9,9 10,9 10,10 9,10 M10,9 11,9 11,10 10,10 M11,9 12,9 12,10 11,10 M6,8 7,8 7,9 6,9 M7,8 8,8 8,9 7,9 M8,8 9,8 9,9 8,9 M9,8 10,8 10,9 9,9 M10,8 11,8 11,9 10,9 M7,7 8,7 8,8 7,8 M8,7 9,7 9,8 8,8 M9,7 10,7 10,8 9,8 M8,6 9,6 9,7 8,7 ' fill='%23ffffff'/%3E%3C/svg%3E");
  }
  ::-webkit-scrollbar-button:vertical:end {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,6 6,6 6,7 5,7 M6,6 7,6 7,7 6,7 M6,7 7,7 7,8 6,8 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M8,9 9,9 9,10 8,10 M8,8 9,8 9,9 8,9 M8,7 9,7 9,8 8,8 M7,6 8,6 8,7 7,7 M8,6 9,6 9,7 8,7 M11,6 12,6 12,7 11,7 M10,6 11,6 11,7 10,7 M9,6 10,6 10,7 9,7 M9,8 10,8 10,9 9,9 M9,7 10,7 10,8 9,8 M10,7 11,7 11,8 10,8 ' fill='%23a0aa95'/%3E%3C/svg%3E");
  }
  ::-webkit-scrollbar-button:vertical:end:active {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,6 6,6 6,7 5,7 M11,6 12,6 12,7 11,7 M10,6 11,6 11,7 10,7 M9,6 10,6 10,7 9,7 M8,6 9,6 9,7 8,7 M7,6 8,6 8,7 7,7 M6,6 7,6 7,7 6,7 M6,7 7,7 7,8 6,8 M10,7 11,7 11,8 10,8 M9,7 10,7 10,8 9,8 M8,7 9,7 9,8 8,8 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M9,8 10,8 10,9 9,9 M8,9 9,9 9,10 8,10 M8,8 9,8 9,9 8,9 ' fill='%23ffffff'/%3E%3C/svg%3E");
  }

  /* Buttons */

  .cs-btn,
  button:not(.default-btn),
  input[type='submit']:not(.default-btn) {
    background-color: var(--bg);
    color: #fff;
    padding: 4px 5px 3px;
    padding: 0.25rem 0.3125rem 0.1875rem;
    font-size: 16px;
    font-size: 1rem;
    line-height: 15px;
    line-height: 0.9375rem;
    border: 1px solid;
    border-color: var(--border-light) var(--border-dark) var(--border-dark)
      var(--border-light);
    user-select: none;

    &.close {
      padding: 0px;
      padding: 0;
      width: 18px;
      width: 1.125rem;
      height: 18px;
      height: 1.125rem;
      background: no-repeat center center;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3,3 4,3 4,4 3,4 M4,3 5,3 5,4 4,4 M3,4 4,4 4,5 3,5 M4,4 5,4 5,5 4,5 M4,5 5,5 5,6 4,6 M5,5 6,5 6,6 5,6 M5,4 6,4 6,5 5,5 M5,6 6,6 6,7 5,7 M6,6 7,6 7,7 6,7 M6,5 7,5 7,6 6,6 M6,7 7,7 7,8 6,8 M6,8 7,8 7,9 6,9 M7,8 8,8 8,9 7,9 M7,7 8,7 8,8 7,8 M7,6 8,6 8,7 7,7 M8,6 9,6 9,7 8,7 M8,7 9,7 9,8 8,8 M8,8 9,8 9,9 8,9 M8,5 9,5 9,6 8,6 M9,5 10,5 10,6 9,6 M9,6 10,6 10,7 9,7 M9,4 10,4 10,5 9,5 M10,4 11,4 11,5 10,5 M10,5 11,5 11,6 10,6 M10,3 11,3 11,4 10,4 M11,3 12,3 12,4 11,4 M11,4 12,4 12,5 11,5 M9,8 10,8 10,9 9,9 M9,9 10,9 10,10 9,10 M8,9 9,9 9,10 8,10 M10,9 11,9 11,10 10,10 M10,10 11,10 11,11 10,11 M9,10 10,10 10,11 9,11 M11,10 12,10 12,11 11,11 M11,11 12,11 12,12 11,12 M10,11 11,11 11,12 10,12 M5,8 6,8 6,9 5,9 M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M4,9 5,9 5,10 4,10 M4,10 5,10 5,11 4,11 M5,10 6,10 6,11 5,11 M3,10 4,10 4,11 3,11 M3,11 4,11 4,12 3,12 M4,11 5,11 5,12 4,12 ' fill='%238c9284'/%3E%3C/svg%3E");
    }

    &:focus-visible {
      padding: 3px 4px 2px;
      padding: 0.1875rem 0.25rem 0.125rem;
      outline: 1px solid var(--outline);
      outline: 0.0625rem solid var(--outline);

      &.close {
        padding: 0;
        outline: 0;
      }
    }

    &:active {
      border-color: var(--border-dark) var(--border-light) var(--border-light)
        var(--border-dark);
    }

    &:disabled {
      color: var(--disabled-text);
      text-shadow: var(--disabled-text-shadow) 1px 1px;
      text-shadow: var(--disabled-text-shadow) 0.0625rem 0.0625rem;
      pointer-events: none;
    }
  }

  /* Hr */

  hr:not(.default-hr) {
    border-left: 0;
    border-right: 0;
    border-top-color: var(--border-dark);
    border-bottom-color: var(--border-light);
  }

  /* Checkbox */

  .cs-checkbox:not(input) {
    position: relative;
  }

  input[type='checkbox']:not(.default-checkbox),
  input.cs-checkbox,
  .cs-checkbox input {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
    padding: 0;
    border: 0;
    height: 1px;
    height: 0.0625rem;
    width: 1px;
    width: 0.0625rem;
    overflow: hidden;

    &:focus:not(:focus-visible) {
      outline: none;
    }

    &:focus-visible + .cs-checkbox__label,
    &:focus-visible + label {
      outline: dotted 2px var(--outline);
      outline: dotted 0.125rem var(--outline);
      outline-offset: 3px;
      outline-offset: 0.1875rem;
    }

    &:checked + .cs-checkbox__label,
    &:checked + label {
      color: var(--accent);
      &::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2,6 3,6 3,7 2,7 M3,5 4,5 4,6 3,6 M2,5 3,5 3,6 2,6 M2,4 3,4 3,5 2,5 M3,6 4,6 4,7 3,7 M3,7 4,7 4,8 3,8 M4,6 5,6 5,7 4,7 M4,7 5,7 5,8 4,8 M4,8 5,8 5,9 4,9 M5,7 6,7 6,8 5,8 M5,6 6,6 6,7 5,7 M5,5 6,5 6,6 5,6 M6,4 7,4 7,5 6,5 M6,5 7,5 7,6 6,6 M6,6 7,6 7,7 6,7 M7,5 8,5 8,6 7,6 M7,4 8,4 8,5 7,5 M7,3 8,3 8,4 7,4 M8,4 9,4 9,5 8,5 M8,3 9,3 9,4 8,4 M8,2 9,2 9,3 8,3 ' fill='%23c4b550'/%3E%3C/svg%3E");
      }
    }
  }

  .cs-checkbox__label,
  input[type='checkbox']:not(.default-checkbox) + label,
  input.cs-checkbox + label,
  .cs-checkbox input + label,
  label:not(.default-checkbox):has(
      input[type='checkbox']:not(.default-checkbox)
    ),
  label:has(.cs-checkbox),
  label.cs-checkbox:has(input) {
    cursor: pointer;
    display: inline-block;
    user-select: none;
    color: var(--secondary--text);
    line-height: 15px;
    line-height: 0.9375rem;

    &::before {
      content: '';
      display: inline-block;
      vertical-align: middle;
      width: 12px;
      width: 0.75rem;
      height: 12px;
      height: 0.75rem;
      background-color: var(--secondary-bg);
      border: 1px solid;
      border-color: var(--border-dark) var(--border-light) var(--border-light)
        var(--border-dark);
      margin-right: 7px;
      margin-right: 0.4375rem;
    }

    &:hover {
      color: white;
    }
  }
  label:not(.default-checkbox):has(
      input[type='checkbox']:not(.default-checkbox)
    ),
  label:has(.cs-checkbox),
  label.cs-checkbox:has(input) {
    position: relative;
    &:has(input:not(.default-checkbox):focus-visible),
    &:has(.cs-checkbox:focus-visible) {
      outline: dotted 2px var(--outline);
      outline: dotted 0.125rem var(--outline);
      outline-offset: 3px;
      outline-offset: 0.1875rem;
    }
    &::before {
      margin-right: 3px;
      margin-right: 0.1875rem;
    }
    &:has(input:not(.default-checkbox):checked),
    &:has(.cs-checkbox:checked) {
      color: var(--accent);
      &::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2,6 3,6 3,7 2,7 M3,5 4,5 4,6 3,6 M2,5 3,5 3,6 2,6 M2,4 3,4 3,5 2,5 M3,6 4,6 4,7 3,7 M3,7 4,7 4,8 3,8 M4,6 5,6 5,7 4,7 M4,7 5,7 5,8 4,8 M4,8 5,8 5,9 4,9 M5,7 6,7 6,8 5,8 M5,6 6,6 6,7 5,7 M5,5 6,5 6,6 5,6 M6,4 7,4 7,5 6,5 M6,5 7,5 7,6 6,6 M6,6 7,6 7,7 6,7 M7,5 8,5 8,6 7,6 M7,4 8,4 8,5 7,5 M7,3 8,3 8,4 7,4 M8,4 9,4 9,5 8,5 M8,3 9,3 9,4 8,4 M8,2 9,2 9,3 8,3 ' fill='%23c4b550'/%3E%3C/svg%3E");
      }
    }
  }

  /* Input */

  .cs-input,
  input:is(
      [type='text'],
      [type='number'],
      [type='email'],
      [type='date'],
      [type='datetime-local'],
      [type='month'],
      [type='password'],
      [type='search'],
      [type='tel'],
      [type='text'],
      [type='url'],
      [type='week'],
      [type='datetime'],
      [type='input']
    ):not(.default-input) {
    outline: 0;
    border: 1px solid;
    padding: 3px 2px 2px;
    padding: 0.1875rem 0.125rem 0.125rem;
    font-size: 1rem;
    line-height: 1.0625rem;
    background-color: var(--secondary-bg);
    border-color: var(--border-dark) var(--border-light) var(--border-light)
      var(--border-dark);
    color: var(--secondary--text);

    &:focus + .cs-input__label,
    &:focus + label {
      color: var(--accent);
    }

    &::-moz-selection {
      background-color: var(--secondary-accent);
      color: white;
    }

    &::selection {
      background-color: var(--secondary-accent);
      color: white;
    }

    &:disabled {
      background-color: var(--bg);
      pointer-events: none;
      color: var(--text-3);
    }

    &:disabled + .cs-input__label,
    &:disabled + label {
      color: var(--disabled-text);
      text-shadow: var(--disabled-text-shadow) 1px 1px;
      text-shadow: var(--disabled-text-shadow) 0.0625rem 0.0625rem;
      pointer-events: none;
    }
  }

  .cs-input__label,
  label:has(
      input:is(
          [type='text'],
          [type='number'],
          [type='email'],
          [type='date'],
          [type='datetime-local'],
          [type='month'],
          [type='password'],
          [type='search'],
          [type='tel'],
          [type='text'],
          [type='url'],
          [type='week'],
          [type='datetime'],
          [type='input']
        ):not(.default-input)
    ):not(.default-input) {
    color: var(--secondary--text);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    &:has(input:not(.default-input):focus) {
      color: var(--accent);
    }
    &:has(input:not(.default-input):disabled) {
      color: var(--disabled-text);
      text-shadow: var(--disabled-text-shadow) 1px 1px;
      text-shadow: var(--disabled-text-shadow) 0.0625rem 0.0625rem;
      pointer-events: none;
    }
  }

  /* Select */

  .cs-select,
  select:not(.default-select) {
    outline: 0;
    background-color: var(--secondary-bg);
    min-width: 150px;
    min-width: 9.375rem;
    appearance: none;
    border-radius: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0,0 1,0 1,1 0,1 M1,0 2,0 2,1 1,1 M1,1 2,1 2,2 1,2 M2,1 3,1 3,2 2,2 M2,2 3,2 3,3 2,3 M3,2 4,2 4,3 3,3 M3,3 4,3 4,4 3,4 M3,1 4,1 4,2 3,2 M2,0 3,0 3,1 2,1 M3,0 4,0 4,1 3,1 M4,0 5,0 5,1 4,1 M4,2 5,2 5,3 4,3 M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 ' fill='%23a0aa95'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px top 50%;
    background-position: right 0.375rem top 50%;
    background-size: 7px auto;
    background-size: 0.4375rem auto;
    line-height: 15px;
    line-height: 0.9375rem;
    padding: 5px 15px 5px 3px;
    padding: 0.3125rem 0.9375rem 0.3125rem 0.1875rem;
    color: var(--secondary--text);
    border: 1px solid;
    border-color: var(--border-dark) var(--border-light) var(--border-light)
      var(--border-dark);
    user-select: none;

    &:hover,
    &:focus-within {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0,0 1,0 1,1 0,1 M1,0 2,0 2,1 1,1 M1,1 2,1 2,2 1,2 M2,1 3,1 3,2 2,2 M2,2 3,2 3,3 2,3 M3,3 4,3 4,4 3,4 M3,2 4,2 4,3 3,3 M3,1 4,1 4,2 3,2 M2,0 3,0 3,1 2,1 M3,0 4,0 4,1 3,1 M4,0 5,0 5,1 4,1 M4,2 5,2 5,3 4,3 M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 ' fill='%23ffffff'/%3E%3C/svg%3E");
    }

    option {
      background-color: var(--bg);
      color: var(--text-3);
    }
  }

  .cs-select__label,
  label:has(select:not(.default-select)):not(.default-select-label) {
    color: var(--secondary--text);
    font-size: 16px;
    font-size: 1rem;
    line-height: 15px;
    line-height: 0.9375rem;
    user-select: none;
  }

  /* Radio Group */

  .cs-fieldset,
  fieldset:not(.default-fieldset) {
    border: none;
    user-select: none;

    legend {
      color: var(--secondary--text);
      margin-bottom: 10px;
      margin-bottom: 0.625rem;
    }

    > div {
      padding-left: 10px;
      padding-left: 0.625rem;
    }

    &:disabled {
      input[type='radio'] {
        + label {
          color: var(--disabled-text);
          text-shadow: var(--disabled-text-shadow) 1px 1px;
          text-shadow: var(--disabled-text-shadow) 0.0625rem 0.0625rem;
          pointer-events: none;
        }
      }

      legend {
        color: var(--disabled-text);
        text-shadow: var(--disabled-text-shadow) 1px 1px;
        text-shadow: var(--disabled-text-shadow) 0.0625rem 0.0625rem;
        pointer-events: none;
      }
    }

    input[type='radio'] {
      opacity: 0;

      + label {
        position: relative;
        cursor: pointer;
        font-size: 16px;
        font-size: 1rem;
        line-height: 15px;
        line-height: 0.9375rem;
        color: var(--secondary--text);

        &::before {
          content: '';
          position: absolute;
          left: -25px;
          left: -1.5625rem;
          top: 1px;
          top: 0.0625rem;
          width: 12px;
          width: 0.75rem;
          height: 12px;
          height: 0.75rem;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M10,2 11,2 11,3 10,3 M10,3 11,3 11,4 10,4 M11,4 12,4 12,5 11,5 M11,5 12,5 12,6 11,6 M11,6 12,6 12,7 11,7 M11,7 12,7 12,8 11,8 M10,8 11,8 11,9 10,9 M10,9 11,9 11,10 10,10 M8,10 9,10 9,11 8,11 M9,10 10,10 10,11 9,11 M7,11 8,11 8,12 7,12 M6,11 7,11 7,12 6,12 M5,11 6,11 6,12 5,12 M2,10 3,10 3,11 2,11 M3,10 4,10 4,11 3,11 M4,11 5,11 5,12 4,12 ' fill='%23889180'/%3E%3Cpath d='M1,2 2,2 2,3 1,3 M1,3 2,3 2,4 1,4 M2,1 3,1 3,2 2,2 M3,1 4,1 4,2 3,2 M4,0 5,0 5,1 4,1 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 M7,0 8,0 8,1 7,1 M8,1 9,1 9,2 8,2 M9,1 10,1 10,2 9,2 M0,4 1,4 1,5 0,5 M0,5 1,5 1,6 0,6 M0,6 1,6 1,7 0,7 M0,7 1,7 1,8 0,8 M1,8 2,8 2,9 1,9 M1,9 2,9 2,10 1,10 ' fill='%23292c21'/%3E%3Cpath d='M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M6,1 7,1 7,2 6,2 M7,1 8,1 8,2 7,2 M8,2 9,2 9,3 8,3 M9,2 10,2 10,3 9,3 M9,3 10,3 10,4 9,4 M9,4 10,4 10,5 9,5 M10,4 11,4 11,5 10,5 M10,5 11,5 11,6 10,6 M10,6 11,6 11,7 10,7 M10,7 11,7 11,8 10,8 M9,7 10,7 10,8 9,8 M9,8 10,8 10,9 9,9 M9,9 10,9 10,10 9,10 M8,9 9,9 9,10 8,10 M7,9 8,9 8,10 7,10 M7,10 8,10 8,11 7,11 M6,10 7,10 7,11 6,11 M5,10 6,10 6,11 5,11 M4,10 5,10 5,11 4,11 M6,9 7,9 7,10 6,10 M5,9 6,9 6,10 5,10 M4,9 5,9 5,10 4,10 M3,9 4,9 4,10 3,10 M2,9 3,9 3,10 2,10 M2,8 3,8 3,9 2,9 M1,7 2,7 2,8 1,8 M1,4 2,4 2,5 1,5 M2,3 3,3 3,4 2,4 M2,2 3,2 3,3 2,3 M3,2 4,2 4,3 3,3 M4,2 5,2 5,3 4,3 M5,2 6,2 6,3 5,3 M6,2 7,2 7,3 6,3 M7,2 8,2 8,3 7,3 M3,3 4,3 4,4 3,4 M2,4 3,4 3,5 2,5 M2,5 3,5 3,6 2,6 M1,5 2,5 2,6 1,6 M1,6 2,6 2,7 1,7 M2,6 3,6 3,7 2,7 M2,7 3,7 3,8 2,8 M3,8 4,8 4,9 3,9 M3,7 4,7 4,8 3,8 M3,6 4,6 4,7 3,7 M3,5 4,5 4,6 3,6 M3,4 4,4 4,5 3,5 M4,3 5,3 5,4 4,4 M5,3 6,3 6,4 5,4 M5,4 6,4 6,5 5,5 M4,8 5,8 5,9 4,9 M4,7 5,7 5,8 4,8 M4,6 5,6 5,7 4,7 M4,4 5,4 5,5 4,5 M4,5 5,5 5,6 4,6 M5,5 6,5 6,6 5,6 M5,6 6,6 6,7 5,7 M5,7 6,7 6,8 5,8 M5,8 6,8 6,9 5,9 M6,8 7,8 7,9 6,9 M6,7 7,7 7,8 6,8 M6,6 7,6 7,7 6,7 M6,3 7,3 7,4 6,4 M6,4 7,4 7,5 6,5 M6,5 7,5 7,6 6,6 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M8,8 9,8 9,9 8,9 M8,7 9,7 9,8 8,8 M7,6 8,6 8,7 7,7 M7,5 8,5 8,6 7,6 M7,4 8,4 8,5 7,5 M7,3 8,3 8,4 7,4 M8,3 9,3 9,4 8,4 M8,4 9,4 9,5 8,5 M8,5 9,5 9,6 8,6 M8,6 9,6 9,7 8,7 M9,6 10,6 10,7 9,7 M9,5 10,5 10,6 9,6 ' fill='%233e4637'/%3E%3C/svg%3E");
        }

        &::after {
          content: '';
          position: absolute;
          left: -22px;
          left: -1.375rem;
          top: 4px;
          top: 0.25rem;
          width: 6px;
          width: 0.375rem;
          height: 6px;
          height: 0.375rem;
        }
      }

      &:checked {
        + label {
          color: var(--accent);
        }

        + label::after {
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Cpath d='M1,0 2,0 2,1 1,1 M3,0 4,0 4,1 3,1 M4,0 5,0 5,1 4,1 M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M5,2 6,2 6,3 5,3 M5,3 6,3 6,4 5,4 M5,4 6,4 6,5 5,5 M4,5 5,5 5,6 4,6 M3,5 4,5 4,6 3,6 M2,5 3,5 3,6 2,6 M1,5 2,5 2,6 1,6 M0,4 1,4 1,5 0,5 M0,3 1,3 1,4 0,4 M0,2 1,2 1,3 0,3 M1,2 2,2 2,3 1,3 M1,3 2,3 2,4 1,4 M1,4 2,4 2,5 1,5 M2,4 3,4 3,5 2,5 M2,3 3,3 3,4 2,4 M2,0 3,0 3,1 2,1 M2,1 3,1 3,2 2,2 M3,1 4,1 4,2 3,2 M3,3 4,3 4,4 3,4 M3,4 4,4 4,5 3,5 M4,4 5,4 5,5 4,5 M4,3 5,3 5,4 4,4 M4,2 5,2 5,3 4,3 M3,2 4,2 4,3 3,3 M2,2 3,2 3,3 2,3 M1,1 2,1 2,2 1,2 M0,1 1,1 1,2 0,2 ' fill='%23c4b550'/%3E%3C/svg%3E");
        }
      }
    }
  }

  /* Slider */

  .cs-slider {
    display: flex;
    flex-direction: column-reverse;
    width: 150px;
    width: 9.375rem;
    user-select: none;

    input {
      -webkit-appearance: none;
      appearance: none;
      width: 150px;
      width: 9.375rem;
      height: 4px;
      height: 0.25rem;
      background: var(--slider-bg);
      outline: none;
      border: 1px solid;
      box-sizing: border-box;
      border-color: var(--border-dark) var(--border-light) var(--border-light)
        var(--border-dark);
    }

    input::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 8px;
      width: 0.5rem;
      height: 16px;
      height: 1rem;
      background: var(--bg);
      cursor: pointer;
      border: 1px solid;
      box-sizing: border-box;
      border-color: var(--border-light) var(--border-dark) var(--border-dark)
        var(--border-light);
      border-radius: 0;
    }

    input::-moz-range-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 8px;
      width: 0.5rem;
      height: 16px;
      height: 1rem;
      background: var(--bg);
      cursor: pointer;
      border: 1px solid;
      box-sizing: border-box;
      border-color: var(--border-light) var(--border-dark) var(--border-dark)
        var(--border-light);
      border-radius: 0;
    }

    label {
      color: var(--secondary--text);
      font-size: 16px;
      font-size: 1rem;
      line-height: 15px;
      line-height: 0.9375rem;
      margin-bottom: 12px;
      margin-bottom: 0.75rem;
    }

    &:has(input:focus) label {
      color: var(--accent);
    }

    .ruler {
      margin-top: 4px;
      margin-top: 0.25rem;
      margin-left: 4px;
      margin-left: 0.25rem;
      height: 5px;
      height: 0.3125rem;
      width: calc(100% + 5px);
      width: calc(100% + 0.3125rem);
      background-image: linear-gradient(
        to right,
        var(--slider) 1px,
        transparent 1px
      );
      background-image: linear-gradient(
        to right,
        var(--slider) 0.0625rem,
        transparent 0.0625rem
      );
      background-size: 15px 5px;
      background-size: 0.9375rem 0.3125rem;
      z-index: -1;
    }

    .value {
      font-size: 13px;
      font-size: 0.8125rem;
      line-height: 15px;
      line-height: 0.9375rem;
      color: var(--slider);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  /* Dialog */

  .cs-dialog,
  dialog:not(.default-dialog) {
    position: fixed;
    right: 0;
    top: 0;
    margin: auto;
    min-width: 350px;
    min-width: 21.875rem;
    max-width: 510px;
    max-width: 31.875rem;
    background-color: var(--bg);
    color: var(--text);
    border: 1px solid;
    border-color: var(--border-light) var(--border-dark) var(--border-dark)
      var(--border-light);
    padding: 4px;
    padding: 0.25rem;
    user-select: none;

    .heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 3px;
      margin-top: 0.1875rem;
      padding-left: 2px;
      padding-left: 0.125rem;

      .wrapper {
        display: flex;
        align-items: center;
        gap: 5px;
        gap: 0.3125rem;

        .icon {
          width: 16px;
          width: 1rem;
          height: 15px;
          height: 0.9375rem;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' viewBox='0 0 16 15'%3E%3Cpath d='M1,12 2,12 2,13 1,13 M2,13 3,13 3,14 2,14 M3,12 4,12 4,13 3,13 M14,7 15,7 15,8 14,8 ' fill='%238c9284'/%3E%3Cpath d='M3,14 4,14 4,15 3,15 ' fill='%23a5aa9c'/%3E%3Cpath d='M0,11 1,11 1,12 0,12 M10,3 11,3 11,4 10,4 M10,5 11,5 11,6 10,6 M12,3 13,3 13,4 12,4 M12,5 13,5 13,6 12,6 M12,8 13,8 13,9 12,9 ' fill='%23bdbeb5'/%3E%3Cpath d='M0,10 1,10 1,11 0,11 M0,9 1,9 1,10 0,10 M0,8 1,8 1,9 0,9 M1,8 2,8 2,9 1,9 M1,9 2,9 2,10 1,10 M1,10 2,10 2,11 1,11 M2,10 3,10 3,11 2,11 M2,9 3,9 3,10 2,10 M3,9 4,9 4,10 3,10 M3,10 4,10 4,11 3,11 M4,9 5,9 5,10 4,10 M4,10 5,10 5,11 4,11 M5,10 6,10 6,11 5,11 M1,11 2,11 2,12 1,12 M2,11 3,11 3,12 2,12 M3,11 4,11 4,12 3,12 M4,11 5,11 5,12 4,12 M5,11 6,11 6,12 5,12 M3,13 4,13 4,14 3,14 M6,8 7,8 7,9 6,9 M6,7 7,7 7,8 6,8 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M8,7 9,7 9,8 8,8 M8,8 9,8 9,9 8,9 M9,7 10,7 10,8 9,8 M9,8 10,8 10,9 9,9 M10,7 11,7 11,8 10,8 M10,8 11,8 11,9 10,9 M7,9 8,9 8,10 7,10 M8,9 9,9 9,10 8,10 M9,9 10,9 10,10 9,10 M7,6 8,6 8,7 7,7 M8,6 9,6 9,7 8,7 M8,5 9,5 9,6 8,6 M8,4 9,4 9,5 8,5 M8,3 9,3 9,4 8,4 M7,11 8,11 8,12 7,12 M11,3 12,3 12,4 11,4 M11,4 12,4 12,5 11,5 M10,4 11,4 11,5 10,5 M11,5 12,5 12,6 11,6 M12,4 13,4 13,5 12,5 M9,2 10,2 10,3 9,3 M13,2 14,2 14,3 13,3 M13,7 14,7 14,8 13,8 M14,6 15,6 15,7 14,7 M14,5 15,5 15,6 14,6 M14,4 15,4 15,5 14,5 M14,3 15,3 15,4 14,4 M10,1 11,1 11,2 10,2 M11,1 12,1 12,2 11,2 M12,1 13,1 13,2 12,2 ' fill='%23ffffff'/%3E%3Cpath d='M0,7 1,7 1,8 0,8 M11,0 12,0 12,1 11,1 M7,4 8,4 8,5 7,5 M8,1 9,1 9,2 8,2 ' fill='%23848e84'/%3E%3Cpath d='M2,8 3,8 3,9 2,9 M3,8 4,8 4,9 3,9 M6,14 7,14 7,15 6,15 M7,13 8,13 8,14 7,14 M10,9 11,9 11,10 10,10 M15,4 16,4 16,5 15,5 M15,5 16,5 16,6 15,6 ' fill='%239ca29c'/%3E%3Cpath d='M4,8 5,8 5,9 4,9 M6,9 7,9 7,10 6,10 ' fill='%23d6d7ce'/%3E%3Cpath d='M4,14 5,14 5,15 4,15 M5,14 6,14 6,15 5,15 M8,10 9,10 9,11 8,11 ' fill='%23dedfde'/%3E%3Cpath d='M5,8 6,8 6,9 5,9 M11,7 12,7 12,8 11,8 M12,7 13,7 13,8 12,8 M11,8 12,8 12,9 11,9 ' fill='%23f7f7f7'/%3E%3Cpath d='M2,12 3,12 3,13 2,13 M6,13 7,13 7,14 6,14 M7,12 8,12 8,13 7,13 M7,10 8,10 8,11 7,11 M7,5 8,5 8,6 7,6 ' fill='%23efefef'/%3E%3Cpath d='M4,12 5,12 5,13 4,13 M5,12 6,12 6,13 5,13 M9,6 10,6 10,7 9,7 ' fill='%23cecfce'/%3E%3Cpath d='M8,2 9,2 9,3 8,3 M9,1 10,1 10,2 9,2 M13,1 14,1 14,2 13,2 M14,2 15,2 15,3 14,3 ' fill='%23d6dbd6'/%3E%3Cpath d='M13,6 14,6 14,7 13,7 ' fill='%23949e94'/%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,10 7,10 7,11 6,11 M6,11 7,11 7,12 6,12 M6,12 7,12 7,13 6,13 M4,13 5,13 5,14 4,14 M5,13 6,13 6,14 5,14 M13,5 14,5 14,6 13,6 M13,3 14,3 14,4 13,4 M13,8 14,8 14,9 13,9 M9,10 10,10 10,11 9,11 M7,14 8,14 8,15 7,15 ' fill='%235a6952'/%3E%3Cpath d='M10,6 11,6 11,7 10,7 M11,6 12,6 12,7 11,7 M12,6 13,6 13,7 12,7 M13,4 14,4 14,5 13,5 M12,2 13,2 13,3 12,3 M11,2 12,2 12,3 11,3 M10,2 11,2 11,3 10,3 M9,3 10,3 10,4 9,4 M9,4 10,4 10,5 9,5 M9,5 10,5 10,6 9,6 M5,7 6,7 6,8 5,8 M7,2 8,2 8,3 7,3 M7,3 8,3 8,4 7,4 M9,0 10,0 10,1 9,1 M10,0 11,0 11,1 10,1 M12,0 13,0 13,1 12,1 M14,1 15,1 15,2 14,2 ' fill='%23525d4a'/%3E%3Cpath d='M6,6 7,6 7,7 6,7 ' fill='%23adb6ad'/%3E%3C/svg%3E");
        }

        .text {
          font-size: 16px;
          font-size: 1rem;
          line-height: 15px;
          line-height: 0.9375rem;
          color: white;
        }
      }
    }

    .content {
      padding: 10px;
      padding: 0.625rem;
    }

    .footer-btns {
      float: right;
      margin: 4px 8px 8px 0;
      margin: 0.25rem 0.5rem 0.5rem 0;

      .cs-btn {
        width: 72px;
        width: 4.5rem;
        text-align: left;
      }
    }
  }

  /* Tooltip */

  .cs-tooltip {
    position: relative;
    display: inline-block;
    color: white;
    line-height: 20px;
    line-height: 1.25rem;
    user-select: none;

    &:hover .text {
      visibility: visible;
    }

    .text {
      visibility: hidden;
      width: max-content;
      background-color: var(--secondary-accent);
      color: black;
      text-align: center;
      font-size: 16px;
      font-size: 1rem;
      line-height: 15px;
      line-height: 0.9375rem;
      position: absolute;
      z-index: 1;
      border: 1px solid var(--border-dark);
      padding: 2px 2px 1px;
      padding: 0.125rem 0.125rem 0.0625rem;
    }
  }

  /* Progress bar */

  .cs-progress-bar {
    width: 260px;
    width: 16.25rem;
    height: 24px;
    height: 1.5rem;
    padding: 3px;
    padding: 0.1875rem;
    background-color: var(--secondary-bg);
    border: 1px solid;
    border-color: var(--border-dark) var(--border-light) var(--border-light)
      var(--border-dark);

    .bars {
      height: 100%;
      background-image: linear-gradient(
        to right,
        var(--accent) 8px,
        transparent 2px
      );
      background-image: linear-gradient(
        to right,
        var(--accent) 0.5rem,
        transparent 0.125rem
      );
      background-size: 12px 16px;
      background-size: 0.75rem 1rem;
    }
  }
  progress:not(.default-progress) {
    width: 260px;
    width: 16.25rem;
    height: 24px;
    height: 1.5rem;
    padding: 3px;
    padding: 0.1875rem;
    background-color: var(--secondary-bg);
    border: 1px solid;
    border-color: var(--border-dark) var(--border-light) var(--border-light)
      var(--border-dark);
    position: relative;
    &::-moz-progress-bar {
      background-color: var(--secondary-bg);
      height: 100%;
      background-image: linear-gradient(
        90deg,
        transparent 0px,
        var(--accent) 0.01px,
        var(--accent) 7.99px,
        /* FIXME: despite this hack to try to fix it, firefox shows a gradient on the right when zoomed in via swiping (not via ctrl[+-]) */
          transparent 8px
      );
      background-image: linear-gradient(
        90deg,
        transparent 0,
        var(--accent) 0.00063rem,
        var(--accent) 0.49938rem,
        
          transparent 0.5rem
      );
      background-size: 12px 16px;
      background-size: 0.75rem 1rem;
    }
    &::-webkit-progress-bar {
      background-color: var(--secondary-bg);
    }
    &::-webkit-progress-value {
      background-color: var(--secondary-bg);
      height: 100%;
      background-image: linear-gradient(
        to right,
        var(--accent) 8px,
        transparent 2px
      );
      background-image: linear-gradient(
        to right,
        var(--accent) 0.5rem,
        transparent 0.125rem
      );
      background-size: 12px 16px;
      background-size: 0.75rem 1rem;
    }
  }

  /* Tabs */

  .cs-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    user-select: none;

    .radiotab {
      position: absolute;
      opacity: 0;
    }

    .label {
      cursor: pointer;
      font-size: 16px;
      font-size: 1rem;
      color: white;
      line-height: 15px;
      line-height: 0.9375rem;
      height: 27px;
      height: 1.6875rem;
      padding: 4px 5px;
      padding: 0.25rem 0.3125rem;
      text-align: left;
      min-width: 64px;
      min-width: 4rem;
      position: relative;
      background-color: var(--bg);
      border-top: solid 1px var(--border-light);
      border-top: solid 0.0625rem var(--border-light);
      border-left: solid 1px var(--border-light);
      border-left: solid 0.0625rem var(--border-light);
      border-right: solid 1px var(--border-dark);
      border-right: solid 0.0625rem var(--border-dark);
      border-bottom: none;
      margin-right: 1px;
      margin-right: 0.0625rem;
      z-index: 10;
    }

    .radiotab:checked + .label {
      background: var(--bg);
      padding: 5px;
      padding: 0.3125rem;
      height: 29px;
      height: 1.8125rem;
      color: var(--accent);

      &::before {
        content: '';
        position: absolute;
        bottom: 0px;
        bottom: 0;
        left: 0px;
        left: 0;
        width: 100%;
        height: 1px;
        height: 0.0625rem;
        background-color: var(--bg);
      }
    }

    .panel {
      display: none;
      position: relative;
      bottom: 1px;
      bottom: 0.0625rem;
      padding: 32px 39px 27px;
      padding: 2rem 2.4375rem 1.6875rem;
      background: var(--bg);
      width: 100%;
      border-left: solid 1px var(--border-light);
      border-left: solid 0.0625rem var(--border-light);
      border-bottom: solid 1px var(--border-dark);
      border-bottom: solid 0.0625rem var(--border-dark);
      border-right: solid 1px var(--border-dark);
      border-right: solid 0.0625rem var(--border-dark);
      border-top: solid 1px var(--border-light);
      border-top: solid 0.0625rem var(--border-light);
      order: 99;
      color: var(--text);
    }

    .radiotab:checked + .label + .panel {
      display: block;
      position: relative;
    }
  }
}