body {
  font-family: 'Blinker', Arial, Helvetica, sans-serif;
  color: var(--color-gray4);
  min-height: 100vh;
  font-size: 100%;
  /* this sets 1rem = 16px by default, or user-defined value */
}

a,
button,
.pointer {
  cursor: pointer;
}

.not-allowed {
  cursor: not-allowed;
}

a,
a:visited {
  color: var(--color-action);
  text-decoration: none;
}

textarea,
input[type="color"],
input[type="email"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select {
  background-color: var(--color-gray0-5);
  border: none;
  border-radius: 4px;
  padding: .75rem .75rem .625rem .75rem;
  width: 100%;
  box-sizing: border-box;
}

input[type="color"].dark-background,
input[type="email"].dark-background,
input[type="date"].dark-background,
input[type="datetime-local"].dark-background,
input[type="month"].dark-background,
input[type="number"].dark-background,
input[type="password"].dark-background,
input[type="search"].dark-background,
input[type="tel"].dark-background,
input[type="text"].dark-background,
input[type="time"].dark-background,
input[type="url"].dark-background,
input[type="week"].dark-background {
  background-color: var(--color-black);
  border: 1px solid var(--color-white);
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  input[type='range']:not(.cr-slider) {
    height: 3px;
    -webkit-appearance: none;
    background-color: var(--color-gray2);
    border-radius: 3px;
  }

  input[type='range']::-webkit-slider-runnable-track:not(.cr-slider) {
    height: 3px;
    -webkit-appearance: none;
    color: var(--color-gray2);
    border-radius: 8px;
  }

  input[type='range']::-webkit-slider-thumb:not(.cr-slider) {
    width: 16px;
    -webkit-appearance: none;
    height: 16px;
    cursor: pointer;
    background: var(--color-gray1);
    box-shadow: 0px 4px 4px 0px #00000040;
    border-radius: 50%;
    position: relative;
    top: -7px;
  }
}

/** FF*/
input[type="range"]::-moz-range-progress:not(.cr-slider) {
  background-color: var(--color-gray1);
}

input[type="range"]::-moz-range-track:not(.cr-slider) {
  background-color: var(--color-gray2);
}

/* IE*/
input[type="range"]::-ms-fill-lower:not(.cr-slider) {
  background-color: var(--color-gray1);
}

input[type="range"]::-ms-fill-upper:not(.cr-slider) {
  background-color: var(--color-gray2);
}

::placeholder {
  color: var(--color-gray2-5);
  opacity: 1;
  /* Firefox */
}

::-ms-input-placeholder {
  /* Edge 12 -18 */
  color: var(--color-gray2-5);
}

select { /* --color-gray-3 */
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%233B5166" class="size-5"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" /></svg>');
  background-repeat: no-repeat;
  background-position-x: calc(100% - .75rem);
  background-position-y: 50%;
  background-size: 1.5rem;
  padding: .75rem 2.5rem .625rem .75rem;
  -moz-appearance: none;
  -webkit-appearance: none;
}

select::-ms-expand {
  display: none;
}

/* aggregate data section */
.agg-section {
  box-sizing: border-box;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.agg-section-part {
  background: var(--color-gray0-5);
  padding: 0.75rem 1rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.agg-section-part-value {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

/*  */
.container {
  background: var(--color-white);
  border-radius: 4px;
  padding: .75rem;
}

.no-scroll {
  overflow: hidden;
}