body {
  background-color: #3e4637;
  color: #dedfd6;
  font-family: ArialPixel, system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.5
}

::-webkit-scrollbar {
  width: 18px
}

::-webkit-scrollbar-track {
  background-color: #5a6a50;
  border: 1px solid #292c21;
  border-left: 0;
  width: 18px
}

::-webkit-scrollbar-thumb {
  background-color: #4a5942;
  border: 1px solid;
  border-color: #8c9284 #292c21 #292c21 #8c9284;
  width: 17px
}

::-webkit-scrollbar-corner {
  background-color: #5a6a50
}

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

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

::-webkit-scrollbar-button:vertical:start {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath fill='%23a0aa95' d='M5 9h1v1H5m1-1h1v1H6m0-2h1v1H6m1 0h1v1H7m0-2h1v1H7m0-2h1v1H7m1 1h1v1H8m0-2h1v1H8m0-2h1v1H8m0-2h1v1H8m1 2h1v1H9m0-2h1v1H9m0-2h1v1H9m1 1h1v1h-1m0-2h1v1h-1m1 0h1v1h-1'/%3E%3C/svg%3E")
}

::-webkit-scrollbar-button:vertical:end,
::-webkit-scrollbar-button:vertical:start {
  border: 1px solid;
  border-color: #8c9284 #292c21 #292c21 #8c9284
}

::-webkit-scrollbar-button:vertical:end:active,
::-webkit-scrollbar-button:vertical:start:active {
  border-color: #292c21 #8c9284 #8c9284 #292c21
}

::-webkit-scrollbar-button:vertical:start:active,
::-webkit-scrollbar-button:vertical:start:hover {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath fill='%23fff' d='M5 9h1v1H5m1-1h1v1H6m1-1h1v1H7m1-1h1v1H8m1-1h1v1H9m1-1h1v1h-1m1-1h1v1h-1M6 8h1v1H6m1-1h1v1H7m1-1h1v1H8m1-1h1v1H9m1-1h1v1h-1M7 7h1v1H7m1-1h1v1H8m1-1h1v1H9M8 6h1v1H8'/%3E%3C/svg%3E")
}

::-webkit-scrollbar-button:vertical:end {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath fill='%23a0aa95' d='M5 6h1v1H5m1-1h1v1H6m0 0h1v1H6m1-1h1v1H7m0 0h1v1H7m1 0h1v1H8m0-2h1v1H8m0-2h1v1H8M7 6h1v1H7m1-1h1v1H8m3-1h1v1h-1m-1-1h1v1h-1M9 6h1v1H9m0 1h1v1H9m0-2h1v1H9m1-1h1v1h-1'/%3E%3C/svg%3E")
}

::-webkit-scrollbar-button:vertical:end:active {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath fill='%23fff' d='M5 6h1v1H5m6-1h1v1h-1m-1-1h1v1h-1M9 6h1v1H9M8 6h1v1H8M7 6h1v1H7M6 6h1v1H6m0 0h1v1H6m4-1h1v1h-1M9 7h1v1H9M8 7h1v1H8M7 7h1v1H7m0 0h1v1H7m2-1h1v1H9M8 9h1v1H8m0-2h1v1H8'/%3E%3C/svg%3E")
}

.cs-btn {
  background-color: #4a5942;
  border: 1px solid;
  border-color: #8c9284 #292c21 #292c21 #8c9284;
  color: #dedfd6;
  font-size: 14px;
  line-height: 15px;
  padding: 4px 8px;
  cursor: pointer;
}

.cs-btn:hover {
  background-color: #3e4637;
}

.cs-btn-success {
  background-color: #2d4a1f;
}

.cs-btn-danger {
  background-color: #4a1f1f;
}

.cs-hr {
  border-bottom-color: #8c9284;
  border-left: 0;
  border-right: 0;
  border-top-color: #292c21;
}

.cs-checkbox {
  position: relative;

  input {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    border: 0;
    height: 1px;
    overflow: hidden;
    padding: 0;
    width: 1px;

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

    &:focus-visible+.cs-checkbox__label {
      outline: dotted 2px #000;
      outline-offset: 3px
    }

    &:checked+.cs-checkbox__label:before {
      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23c4b550' d='M2 6h1v1H2m1-2h1v1H3M2 5h1v1H2m0-2h1v1H2m1 1h1v1H3m0 0h1v1H3m1-2h1v1H4m0 0h1v1H4m0 0h1v1H4m1-2h1v1H5m0-2h1v1H5m0-2h1v1H5m1-2h1v1H6m0 0h1v1H6m0 0h1v1H6m1-2h1v1H7m0-2h1v1H7m0-2h1v1H7m1 0h1v1H8m0-2h1v1H8m0-2h1v1H8'/%3E%3C/svg%3E")
    }

    &:checked+.cs-checkbox__label {
      color: #c4b550
    }
  }

  .cs-checkbox__label {
    color: #d8ded3;
    cursor: pointer;
    display: inline-block;
    line-height: 15px;
    user-select: none;

    &:before {
      background-color: #3e4637;
      border: 1px solid;
      border-color: #292c21 #8c9284 #8c9284 #292c21;
      content: "";
      display: inline-block;
      height: 12px;
      margin-right: 7px;
      vertical-align: middle;
      width: 12px
    }

    &:hover {
      color: #fff
    }
  }
}

.cs-input {
  background-color: #3e4637;
  border: 1px solid;
  border-color: #292c21 #8c9284 #8c9284 #292c21;
  color: #d8ded3;
  font-size: 16px;
  line-height: 17px;
  outline: 0;
  padding: 3px 2px 2px;

  &:focus+.cs-input__label {
    color: #c4b550
  }

  &::selection {
    background-color: #958831;
    color: #fff
  }

  &:disabled {
    background-color: #4a5942;
    color: #a0aa95;
    pointer-events: none
  }

  &:disabled+.cs-input__label {
    color: #292c21;
    pointer-events: none;
    text-shadow: #75806f 1px 1px
  }
}

.cs-input__label {
  color: #d8ded3;
  user-select: none
}

.cs-select {
  appearance: none;
  background-color: #3e4637;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath fill='%23a0aa95' d='M0 0h1v1H0m1-1h1v1H1m0 0h1v1H1m1-1h1v1H2m0 0h1v1H2m1-1h1v1H3m0 0h1v1H3m0-3h1v1H3M2 0h1v1H2m1-1h1v1H3m1-1h1v1H4m0 1h1v1H4m0-2h1v1H4m1-1h1v1H5m0-2h1v1H5m1-1h1v1H6'/%3E%3C/svg%3E");
  background-position: right 6px top 50%;
  background-repeat: no-repeat;
  background-size: 7px auto;
  border: 1px solid;
  border-color: #292c21 #8c9284 #8c9284 #292c21;
  border-radius: 0;
  color: #d8ded3;
  line-height: 15px;
  min-width: 150px;
  outline: 0;
  padding: 5px 3px;
  user-select: none;

  &:focus-within,
  &:hover {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath fill='%23fff' d='M0 0h1v1H0m1-1h1v1H1m0 0h1v1H1m1-1h1v1H2m0 0h1v1H2m1 0h1v1H3m0-2h1v1H3m0-2h1v1H3M2 0h1v1H2m1-1h1v1H3m1-1h1v1H4m0 1h1v1H4m0-2h1v1H4m1-1h1v1H5m0-2h1v1H5m1-1h1v1H6'/%3E%3C/svg%3E")
  }

  option {
    background-color: #4a5942;
    color: #a0aa95
  }
}

.cs-select__label {
  color: #d8ded3;
  font-size: 16px;
  line-height: 15px;
  user-select: none
}

.cs-fieldset {
  border: none;
  user-select: none;

  legend {
    color: #d8ded3;
    margin-bottom: 10px
  }

  >div {
    padding-left: 10px
  }

  &:disabled {
    input[type=radio] {
      +label {
        color: #292c21;
        pointer-events: none;
        text-shadow: #75806f 1px 1px
      }
    }

    legend {
      color: #292c21;
      pointer-events: none;
      text-shadow: #75806f 1px 1px
    }
  }

  input[type=radio] {
    opacity: 0;

    +label {
      color: #d8ded3;
      cursor: pointer;
      font-size: 16px;
      line-height: 15px;
      position: relative;

      &:before {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23889180' d='M10 2h1v1h-1m0 0h1v1h-1m1 0h1v1h-1m0 0h1v1h-1m0 0h1v1h-1m0 0h1v1h-1m-1 0h1v1h-1m0 0h1v1h-1m-2 0h1v1H8m1-1h1v1H9m-2 0h1v1H7m-1-1h1v1H6m-1-1h1v1H5m-3-2h1v1H2m1-1h1v1H3m1 0h1v1H4'/%3E%3Cpath fill='%23292c21' d='M1 2h1v1H1m0 0h1v1H1m1-3h1v1H2m1-1h1v1H3m1-2h1v1H4m1-1h1v1H5m1-1h1v1H6m1-1h1v1H7m1 0h1v1H8m1-1h1v1H9M0 4h1v1H0m0 0h1v1H0m0 0h1v1H0m0 0h1v1H0m1 0h1v1H1m0 0h1v1H1'/%3E%3Cpath fill='%233e4637' d='M4 1h1v1H4m1-1h1v1H5m1-1h1v1H6m1-1h1v1H7m1 0h1v1H8m1-1h1v1H9m0 0h1v1H9m0 0h1v1H9m1-1h1v1h-1m0 0h1v1h-1m0 0h1v1h-1m0 0h1v1h-1M9 7h1v1H9m0 0h1v1H9m0 0h1v1H9M8 9h1v1H8M7 9h1v1H7m0 0h1v1H7m-1-1h1v1H6m-1-1h1v1H5m-1-1h1v1H4m2-2h1v1H6M5 9h1v1H5M4 9h1v1H4M3 9h1v1H3M2 9h1v1H2m0-2h1v1H2M1 7h1v1H1m0-4h1v1H1m1-2h1v1H2m0-2h1v1H2m1-1h1v1H3m1-1h1v1H4m1-1h1v1H5m1-1h1v1H6m1-1h1v1H7M3 3h1v1H3M2 4h1v1H2m0 0h1v1H2M1 5h1v1H1m0 0h1v1H1m1-1h1v1H2m0 0h1v1H2m1 0h1v1H3m0-2h1v1H3m0-2h1v1H3m0-2h1v1H3m0-2h1v1H3m1-2h1v1H4m1-1h1v1H5m0 0h1v1H5M4 8h1v1H4m0-2h1v1H4m0-2h1v1H4m0-3h1v1H4m0 0h1v1H4m1-1h1v1H5m0 0h1v1H5m0 0h1v1H5m0 0h1v1H5m1-1h1v1H6m0-2h1v1H6m0-2h1v1H6m0-4h1v1H6m0 0h1v1H6m0 0h1v1H6m1 1h1v1H7m0 0h1v1H7m1-1h1v1H8m0-2h1v1H8M7 6h1v1H7m0-2h1v1H7m0-2h1v1H7m0-2h1v1H7m1-1h1v1H8m0 0h1v1H8m0 0h1v1H8m0 0h1v1H8m1-1h1v1H9m0-2h1v1H9'/%3E%3C/svg%3E");
        height: 12px;
        left: -25px;
        top: 1px;
        width: 12px
      }

      &:after,
      &:before {
        content: "";
        position: absolute
      }

      &:after {
        height: 6px;
        left: -22px;
        top: 4px;
        width: 6px
      }
    }

    &:checked {
      +label {
        color: #c4b550
      }

      +label:after {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Cpath fill='%23c4b550' d='M1 0h1v1H1m2-1h1v1H3m1-1h1v1H4m0 0h1v1H4m1-1h1v1H5m0 0h1v1H5m0 0h1v1H5m0 0h1v1H5M4 5h1v1H4M3 5h1v1H3M2 5h1v1H2M1 5h1v1H1M0 4h1v1H0m0-2h1v1H0m0-2h1v1H0m1-1h1v1H1m0 0h1v1H1m0 0h1v1H1m1-1h1v1H2m0-2h1v1H2m0-4h1v1H2m0 0h1v1H2m1-1h1v1H3m0 1h1v1H3m0 0h1v1H3m1-1h1v1H4m0-2h1v1H4m0-2h1v1H4M3 2h1v1H3M2 2h1v1H2M1 1h1v1H1M0 1h1v1H0'/%3E%3C/svg%3E")
      }
    }
  }
}

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

  input {
    -webkit-appearance: none;
    appearance: none;
    background: #1f1f1f;
    border: 1px solid;
    border-color: #292c21 #8c9284 #8c9284 #292c21;
    box-sizing: border-box;
    height: 4px;
    outline: none;
    width: 150px
  }

  input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #4a5942;
    border: 1px solid;
    border-color: #8c9284 #292c21 #292c21 #8c9284;
    border-radius: 0;
    box-sizing: border-box;
    cursor: pointer;
    height: 16px;
    width: 8px
  }

  input::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: #4a5942;
    border: 1px solid;
    border-color: #8c9284 #292c21 #292c21 #8c9284;
    border-radius: 0;
    box-sizing: border-box;
    cursor: pointer;
    height: 16px;
    width: 8px
  }

  label {
    color: #d8ded3;
    font-size: 16px;
    line-height: 15px;
    margin-bottom: 12px
  }

  &:has(input:focus) label {
    color: #c4b550
  }

  .ruler {
    background-image: linear-gradient(to right, #7f8c7f 1px, transparent 1px);
    background-size: 15px 5px;
    height: 5px;
    margin-left: 4px;
    margin-top: 4px;
    width: calc(100% + 5px);
    z-index: -1
  }

  .value {
    align-items: center;
    color: #7f8c7f;
    display: flex;
    font-size: 13px;
    justify-content: space-between;
    line-height: 15px
  }
}

.cs-dialog {
  background-color: #4a5942;
  border: 1px solid;
  border-color: #8c9284 #292c21 #292c21 #8c9284;
  color: #dedfd6;
  margin: 20px auto;
  width: 100%;
  max-width: 1200px;
  padding: 4px;
  position: relative;
}

.heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: 3px;
  padding: 8px;
  background: #3e4637;
  border-bottom: 1px solid #292c21;
}

.heading .wrapper {
  align-items: center;
  display: flex;
  gap: 5px;
}

.heading .text {
  color: #dedfd6;
  font-size: 16px;
  line-height: 15px;
}

.cs-content {
  padding: 10px;
  background: #4a5942;
}

.cs-stats-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.cs-stats-item {
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: #4a5942;
  padding: 5px 10px;
  border: 1px solid;
  border-color: #8c9284 #292c21 #292c21 #8c9284;
}

.cs-stats-number {
  color: #c4b550;
  font-weight: bold;
}

.cs-weapon-stats {
  display: flex;
  gap: 5px;
}

.cs-total-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 10px 0;
}

.cs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.cs-table th {
  background-color: #4a5942;
  color: #dedfd6;
  padding: 8px;
  text-align: left;
  border: 1px solid #292c21;
}

.cs-table td {
  padding: 8px;
  border: 1px solid #292c21;
  background-color: #3e4637;
}

.cs-text {
  color: #dedfd6;
  text-decoration: none;
}

.cs-weapon {
  vertical-align: middle;
  margin-right: 5px;
  height: 25px;
}

.cs-link {
  color: #c4b550;
  text-decoration: none;
}

.cs-link:hover {
  color: #958831;
}

.cs-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}