/** util.css **/
:root {
  --almostBlack:        rgb( 25,  25,  25);
  --almostWhite:        rgb(250, 250, 250);
  --grey250:            rgb(250, 250, 250);
  --grey240:            rgb(240, 240, 240);
  --grey230:            rgb(230, 230, 230);
  --grey220:            rgb(220, 220, 220);
  --grey210:            rgb(210, 210, 210);
  --grey200:            rgb(200, 200, 200);
  --grey180:            rgb(180, 180, 180);
  --grey150:            rgb(150, 150, 150);
  --grey140:            rgb(140, 140, 140);
  --grey130:            rgb(130, 130, 130);
  --grey120:            rgb(120, 120, 120);
  --grey110:            rgb(110, 110, 110);
  --grey100:            rgb(100, 100, 100);
  --grey70:             rgb( 70,  70,  70);
  --grey60:             rgb( 60,  60,  60);
  --grey50:             rgb( 50,  50,  50);
  --grey40:             rgb( 40,  40,  40);
  --grey35:             rgb( 35,  35,  35);
  --grey30:             rgb( 30,  30,  30);
  --grey20:             rgb( 20,  20,  20);

  --blue:               rgb(  0, 100, 255);
  --orange:             rgb(215,  95,  35);
  --darkOrange:         rgb(207, 117,   0);
  --medGreen:           rgb(  0, 180, 180);
  --medLightGreen:      rgb(  0, 175, 135);
  --medExtraLightGreen: rgb(  0, 200, 175);

  --verilyRed:          rgb(255,  80,  82);
  --verilyRed2:         rgb(255,  60,  60);

  --verilyGreen:        rgb(  0, 175,   0);
  --verilyLightGreen:   rgb(  0, 190,   0);
  --verilyLightGreen2:  rgb(150, 200, 150);
  --verilyLightGreen3:  rgb(200, 230, 200);
  --verilyLightGreen4:  rgb(230, 255, 230);
  --verilyLightGreen5:  rgb(50, 245, 50);

  --verilyDarkGreen:    rgb( 50, 150,  50);

  --goodColor:       rgb(0, 175, 0);
  --neutralColor:    rgb(170, 170, 170);
  --badColor:        rgb(255, 30, 30);

  --borderColor:     var(--grey200);
  --border:          solid 1px var(--borderColor);
  --borderRadius:    5px;

  --boxShadow:       3px 3px 3px var(--grey200);
  --boxShadowTransparent: 3px 3px 3px transparent;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;   /* this allows us to change it (e.g. content-box) */
  font-size: inherit;
}


.disabledButton,
.button {
  align-items: center;
  background: var(--verilyGreen);
  border-radius: 5px;
  border: solid 1px var(--verilyDarkGreen);
  color: var(--almostWhite);
  cursor: pointer;
  display: flex;
  font-family: Roboto;
  height: auto;
  justify-content: center;
  letter-spacing: 1px;
  outline-color: rgb(0, 100, 255);
  outline-width: 0px;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  transition-duration: 0.2s;
  transition-property: background, box-shadow, color;
  transition-timing-function: ease-in-out;
  user-select: none;
  white-space: nowrap;
  width: 100px;
}

.button:hover {
  background: var(--verilyLightGreen);
  box-shadow: 3px 3px 5px var(--grey180);
  color: var(--almostWhite);
}

.buttonSelected {
  background: var(--verilyLightGreen);
  border: solid 1px var(--verilyDarkGreen);
}

.disabledButton {
  background: var(--verilyLightGreen3);
  border: solid 1px var(--grey200);
  color: var(--grey150);
  cursor: default;
  pointer-events: none;
  user-select: none;
}


.slider {
  width: 100%;
}

/*****
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}
*****/