/* Scrollbars */
::-webkit-scrollbar {
  width: min(5px, calc(5 * 0.1667vh));
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0);
}

::-webkit-scrollbar-thumb {
  border-radius: min(99px, calc(99 * 0.1667vh));

  background: rgba(255, 255, 255, .5);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .8);
}

/* Tab Input*/

.stat-input {
  padding: 0px;
  flex-shrink: 0;

  width: max(36px, calc(36vh/12));

  font-size: max(18px, calc(18vh/12)) !important;

  background-color: rgba(0, 0, 0, 0);
  border: none;

  text-align: center;
}

.stat-input::-webkit-outer-spin-button,
.stat-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.stat-input:focus {
  outline: none;
}

/* Sliders */

.slider {
  -webkit-appearance: none;

  appearance: none;
  
  flex: 1;
  height: max(10px, calc(10vh/12));
  border-radius: min(16px, calc(16 * 0.1667vh));  
  background: rgba(0, 0, 0, 0.75);
  outline: none;

  -webkit-transition: .2s;
  transition: opacity .2s;

  margin-right: min(6px, calc(6 * 0.1667vh));
}

.slider::-webkit-slider-thumb {
  appearance: none;
  width: max(18px, calc(18vh/12));
  height: max(18px, calc(18vh/12));
  border-radius: 50%; 
  background: #ffffff;
  cursor: pointer;

  transition: 0.2s;
}

.slider::-webkit-slider-thumb:hover {
  background: #ccccff;
  cursor: pointer;
}

.slider::-webkit-slider-thumb:active {
  transform: scale(0.9);
}

/* Buttons */

.button-hover {
  cursor: pointer;
}

.button-hover:hover {
  background-color: rgba(0, 0, 0, 0.9);
}

.button-hover:active {
  background-color: rgba(0, 0, 0, 1);
}

/* Label Buttons */

.clickable-label input[type="checkbox"] {
  display: none;
}

.clickable-label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  
  outline: min(1px, calc(1 * 0.1667vh)) solid rgba(255, 255, 255, .3);
  transition: 0.2s;
}

.clickable-label:hover {
  transform: scale(1.1);
  outline: min(1px, calc(1 * 0.1667vh)) solid rgba(255, 255, 255, 1);
}

/* Checkboxes */

.checkmark {
  width: max(18px, calc(18vh/12));
  height: max(18px, calc(18vh/12));
  background-color: transparent;
  border-radius: max(4px, calc(4vh/12));

  border: min(2px, calc(2 * 0.1667vh)) solid rgba(255, 255, 255, 0.5);
  
  position: relative;
  transition: background-color 0.2s ease;
}

.clickable-label input:checked + .checkmark::after {
  content: "";
  position: absolute;
  left: max(6px, calc(6vh/12));
  top: max(3px, calc(3vh/12));

  width: max(4px, calc(4vh/12));
  height: max(8px, calc(8vh/12));
  border: solid rgb(0, 0, 0);
  border-width: 0 min(2px, calc(2 * 0.1667vh)) min(2px, calc(2 * 0.1667vh)) 0;
  transform: rotate(45deg);
}

.clickable-label input:checked + .checkmark {
  background-color: #ffffff;
  
  border: none;
}

.no-select {
  user-select: none; /* Standard syntax */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none;
}