@font-face {
  font-family: 'Montserrat';
  src: url(9c46095118380d38f12e67c916b427f9.ttf);
}
.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.full-stretch {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  margin: auto;
}
body {
  font-family: Montserrat, Sans-Serif;
}
#root {
  padding: 2em 0;
  margin: 0 auto;
}
#root button {
  padding: 0.5em 1em;
  border: #ccc 1px solid;
  background-color: #fff;
}
#root svg path {
  fill: none;
}
#root svg .axis {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* 2-column layout */
#root .columns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  min-height: 800px;
}
#root .columns > * {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 360px;
  min-width: 300px;
}
/* Flex container holding svg container holding svg */
/* Outer conainer uses flex to resize everything including svg-container */
#root .outer {
  display: flex;
  flex-direction: column;
}
#root .outer > * {
  margin: 0 4rem;
}
#root .outer > *:first-child {
  margin-top: 4rem;
}
#root .outer > *:last-child {
  margin-bottom: 4rem;
}
#root .outer .svg-container {
  flex-grow: 1;
  height: 300px;
}
#root .outer .svg-container svg {
  height: 100%;
  width: 100%;
  overflow: visible;
}
.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.nceatable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.nceatable .select {
  margin: 1em 0 1em 17em;
}
.nceatable .select .modeset {
  font-family: Montserrat;
  padding: 0.4em 0.8em;
  background-color: #fff;
}
.nceatable .row,
.nceatable .header {
  display: flex;
}
.nceatable .row .label,
.nceatable .header .label {
  min-width: 16em;
  max-width: 16em;
  text-align: right;
  margin: auto 0;
}
.nceatable .row .label .sublabel,
.nceatable .header .label .sublabel {
  font-size: 0.7em;
}
.nceatable .row .rate,
.nceatable .header .rate {
  flex-grow: 1;
  margin: 0 1em;
  min-width: 10em;
  max-width: 20em;
}
.nceatable .row {
  padding: 0.75em 0;
}
.nceatable .row .rate {
  display: flex;
  flex-direction: column-reverse;
}
.nceatable .row .rate .bar {
  font-size: 0.85em;
  padding: 0 0 0 0.3em;
  color: rgba(0, 0, 0, 0);
}
.nceatable .row .rate .bar.l1 {
  background-color: #8dd3c7;
}
.nceatable .row .rate .bar.l2 {
  background-color: #80b1d3;
}
.nceatable .row .rate .bar.l3 {
  background-color: #bebada;
}
.nceatable .row .rate .bar.ue {
  background-color: #fdb462;
}
.nceatable .header .rate .explanation {
  margin: 0.25em 0;
  font-size: 0.9em;
}
.nceatable .header .rate .key {
  margin: 0.8em 0;
  font-size: 0.8em;
}
.nceatable .header .rate .key .row {
  padding: 0.10em;
}
.nceatable .header .rate .key .keybox {
  width: 1em;
  height: 1em;
  margin: auto 0.4em;
}
.nceatable .header .rate .key .l1 .keybox {
  background-color: #8dd3c7;
}
.nceatable .header .rate .key .l2 .keybox {
  background-color: #80b1d3;
}
.nceatable .header .rate .key .l3 .keybox {
  background-color: #bebada;
}
.nceatable .header .rate .key .ue .keybox {
  background-color: #fdb462;
}
.nceatable.highlighted .header .row {
  opacity: 0.2;
}
.nceatable.highlighted .header .row.highlighted {
  opacity: 1;
}
.nceatable.highlighted .row:hover {
  background-color: #eee;
}
.nceatable.highlighted .row:hover .label .main {
  font-weight: bold;
}
.nceatable.highlighted .row .bar {
  opacity: 0.2;
}
.nceatable.highlighted .row .bar.highlighted {
  color: #000000;
  opacity: 0.8;
}
.nceatable.highlighted .row .bar.highlighted:hover {
  opacity: 1;
  z-index: 100;
}