* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

img {
  width: 100%;
  max-width: 400px;
  margin: 0 auto 20px auto;
}

.chart-container {
  position: relative;
  left: -10px;
  height: 50%;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.handle {
  position: absolute;
  width: 40px;
  height: 40px;
  transition: opacity 0.2s;
}

.handleKnob {
  width: 10px;
  height: 10px;
  margin: 15px auto;
  background: white;
  box-shadow: 1px 1px 5px gray inset, 1px 1px 2px gray;
  border-radius: 10px;
  cursor: ns-resize;
}

.slider_container {
  position: relative;
  margin: 20px auto;
  width: 90%;
  max-width: 380px;
  height: 40px;
}

.slider_left_gutter,
.slider_right_gutter,
.slider_knob {
  background: #777;
}

.slider_left_gutter, .slider_right_gutter {
  position: absolute;
  height: 4px;
  top: 18px;
  border-radius: 2px;
}

.slider_left_gutter {
  width: 0;
}

.slider_right_gutter {
  opacity: 0.2;
  width: 100%;
}

.slider_knob {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  cursor: ew-resize;
  touch-action: none;
  left: -20px;
}

.centered {
  text-align: center;
  justify-content: center;
  margin: auto;
}

.right {
  text-align: right;
}

.vertical {
  flex-direction: column;
}

.border {
  border: 1px solid black;
}

.flex-container {
  display: flex;
}

.full-height {
  height: 100%;
}

.width-90 {
  width: 90%;
}

.transparent {
  opacity: 0;
}