/* Based off of 98.css */
/* by aph */

:root {
  /* Color */
  --surface: #c0c0c0;
  --button-highlight: #ffffff;
  --button-face: #c0c0c0;
  --button-shadow: #808080;
  --window-frame: #0a0a0a;
  --dialog-blue: #000080;
  --dialog-blue-light: #1084d0;
  --dialog-gray: #808080;
  --dialog-gray-light: #b5b5b5;
  --link-blue: #0000ff;

  /* Spacing */
  --element-spacing: 8px;
  --grouped-button-spacing: 4px;
  --grouped-element-spacing: 6px;
  --radio-width: 12px;
  --checkbox-width: 13px;
  --radio-label-spacing: 6px;
  --range-track-height: 4px;
  --range-spacing: 10px;

  /* Some detailed computations for radio buttons and checkboxes */
  --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
  --radio-total-width: calc(var(--radio-total-width-precalc));
  --radio-left: calc(-1 * var(--radio-total-width-precalc));
  --radio-dot-width: 4px;
  --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
  --radio-dot-left: calc(
    -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(
        --radio-dot-width
      ) / 2
  );

  --checkbox-total-width-precalc: var(--checkbox-width) +
    var(--radio-label-spacing);
  --checkbox-total-width: calc(var(--checkbox-total-width-precalc));
  --checkbox-left: calc(-1 * var(--checkbox-total-width-precalc));
  --checkmark-width: 7px;
  --checkmark-top: 3px;
  --checkmark-left: 3px;

  /* Borders */
  --border-width: 1px;
  --border-raised-outer: inset -1px -1px var(--window-frame),
    inset 1px 1px var(--button-highlight);
  --border-raised-inner: inset -2px -2px var(--button-shadow),
    inset 2px 2px var(--button-face);
  --border-sunken-outer: inset -1px -1px var(--button-highlight),
    inset 1px 1px var(--window-frame);
  --border-sunken-inner: inset -2px -2px var(--button-face),
    inset 2px 2px var(--button-shadow);

  /* Window borders flip button-face and button-highlight */
  --border-window-outer: inset -1px -1px var(--window-frame),
    inset 1px 1px var(--button-face);
  --border-window-inner: inset -2px -2px var(--button-shadow),
    inset 2px 2px var(--button-highlight);

  /* Field borders (checkbox, input, etc) flip window-frame and button-shadow */
  --border-field: inset -1px -1px var(--button-highlight),
    inset 1px 1px var(--button-shadow), inset -2px -2px var(--button-face),
    inset 2px 2px var(--window-frame);
}

::-webkit-scrollbar {
  width: 16px !important;
}
::-webkit-scrollbar:horizontal {
  height: 16px !important;
}

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

::-webkit-scrollbar-track {
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0v1h1v1h1V1H1V0z' fill='silver'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1v1H0v1h1V1h1V0z' fill='%23fff'/%3E%3C/svg%3E") !important;
      border-radius: 0px !important;
}

::-webkit-scrollbar-thumb {
      width: 16px !important;
      height: 16px !important;
  background-color: var(--surface) !important;
  box-shadow: var(--border-window-outer), var(--border-window-inner) !important;
      border-radius: 0px !important;
        border: none;
}

::-webkit-scrollbar-button {
    border: none;
}

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

::-webkit-scrollbar-button:vertical:start {
  height: 16px !important;
  background-color: var(--surface) !important;
  box-shadow: var(--border-window-outer), var(--border-window-inner);
    background-image: url(https://cdn.discordapp.com/attachments/797622888466612254/925166195030786058/up.png) !important;
    background-repeat: no-repeat !important;
    background-position: 45% 51% !important;
      border-radius: 0px !important;
}
::-webkit-scrollbar-button:vertical:end {
  height: 16px;
  background-color: var(--surface) !important;
  box-shadow: var(--border-window-outer), var(--border-window-inner);
      border-radius: 0px !important;
        background-image: url(https://cdn.discordapp.com/attachments/797622888466612254/925169220268982332/down.png) !important;
    background-repeat: no-repeat !important;
    background-position: 45% 51% !important;
}
::-webkit-scrollbar-button:horizontal:start {
  width: 16px;
  background-color: var(--surface) !important;
  box-shadow: var(--border-window-outer), var(--border-window-inner);
      border-radius: 0px !important;
            background-image: url(https://cdn.discordapp.com/attachments/797622888466612254/925171901121323018/left.png) !important;
    background-repeat: no-repeat !important;
    background-position: 45% 51% !important;
}
::-webkit-scrollbar-button:horizontal:end {
  width: 16px;
  background-color: var(--surface) !important;
  box-shadow: var(--border-window-outer), var(--border-window-inner);
      border-radius: 0px !important;
                background-image: url(https://cdn.discordapp.com/attachments/797622888466612254/925171900928380958/right.png) !important;
    background-repeat: no-repeat !important;
    background-position: 51% 51% !important;
}

::-webkit-scrollbar-button:horizontal:active, ::-webkit-scrollbar-button:vertical:active {
      background-color: var(--surface) !important;
    border: 1px solid var(--button-shadow) !important;
    box-shadow: none !important;
        background-position: 45% 55% !important;
}