@import "https://unpkg.com/simpledotcss/simple.min.css";

input[type=range] {
  --webkit-appearance: auto;
  appearance: auto;
}

:root {
  --laborColor: #4e79a7;
  --marketingColor: #f28e2b;
  --overheadColor: #e15759;
  --netProfitColor: #59a14f;
}

td, th { white-space: nowrap; }
td input[type=number] { max-width: 6em }

td.percent-inputs {
  input[type=number] {
    width: 4em;
    margin-right: 0.5em;
  }
}

@media only screen and (max-width: 720px) {
  td.percent-inputs {
    width: 8em;
    input[type=range] {
      display: block;
      width: 100%;
    }
  }
}

.color_indicator {
  display: inline-block;
  width: 1em;
  height: 1em;
  &.labor { background-color: var(--laborColor); }
  &.marketing { background-color: var(--marketingColor); }
  &.overhead { background-color: var(--overheadColor); }
  &.netProfit { background-color: var(--netProfitColor); }
}

.calculation--negative-profit .calculation--profit-value {
  background-color: red;
}