:root {
  --light-text: rgba(255, 255, 255, 0.85);
  --dark-text: rgba(0, 0, 0, 0.85);
  --blue-500: #2196F3;
  --yellow-500: #FFEB3B;
  --orange-500: #FF9800;
  --red-500: #F44336;
  --black: black;
  --purple-500: #9C27B0;
  --green-500: #4CAF50;
}

/* The chart */

.barChart {
  background-color: transparent !important;
  border: none !important;
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.barChart caption {
  margin-bottom: 8px;
  font-size: 12pt;
  font-weight: bold;
}

.barChart > tbody:nth-child(2) > tr:nth-child(1) > td:nth-child(2) {
  border-left: 1px solid rgba(0,0,0,0.4);
}
.barChart > tbody:nth-child(2) > tr > td:last-of-type {
  border-right: 1px solid rgba(0,0,0,0.4);
}


.bar {
  width: 100%;
  background-color: var(--blue-500);
  position: relative;
}

.bar > p {
  display: block;
  position: absolute;
  top: -2rem;
  text-align: center;
  font-size: 0.5rem;
  width: 100%;
}

.bar.red {
  background-color: var(--red-500);
}

.bar.purple {
  background-color: var(--purple-500);
}

.bar.yellow {
  background-color: var(--yellow-500);
}

.bar.blue {
  background-color: var(--blue-500);
}

.bar.black {
  background-color: var(--black);
}

.bar.orange {
  background-color: var(--orange-500);
}

.bar.green {
  background-color: var(--green-500);
}

p.left {
  display: block;
  position: absolute;
  left: 0;
  width: auto;
  height: 1rem;
}

p.right {
  display: block;
  position: absolute;
  right: 0;
  width: auto;
  height: 1rem;
}

.barChart th.label p.text {
  font-size: 0.5rem;
  font-weight: normal;
  color: var(--dark-text);
}

.barChart td.label p {
  text-align: right;
  font-size: 0.5rem;
  margin: 0;
  color: var(--dark-text);
}

p.top {
  display: block;
  position: absolute;
  top: 0;
  width: auto;
  height: 1rem;
}

p.bottom {
  display: block;
  position: absolute;
  bottom: 0;
  width: auto;
  height: 1rem;
}

.barChart.horizontal td {
  height: 3rem;
  vertical-align: bottom;
  border: 0;
  position: relative;
  background: repeating-linear-gradient(
    to right,
    rgba(0,0,0,0.1),
    rgba(0,0,0,0.1) 1px,
    transparent 1px,
    transparent 5%
  );
}

table.barChart.horizontal > tbody > tr > td:nth-child(1) {
  width: 10%;
  background: none;
  vertical-align: middle;
}

.barChart.horizontal th {
  width: 18%;
  border: 0;
  height: 1rem;
  text-align: center;
  position: relative;
  background: none;
}

.barChart.horizontal td.label, .barChart.horizontal th.label {
  width: 10%;
  background: none;
  border: 0;
}

.barChart.horizontal .bar {
  height: 100%;
  background-color: var(--blue-500);
  position: relative;
}

.barChart.horizontal .bar > p {
  display: block;
  position: absolute;
  top: 0.25rem;
  right: -1rem;
  text-align: right;
  font-size: 0.5rem;
  width: 100%;
}

.barChart.horizontal > tbody:nth-child(2) > tr:nth-child(1) > td:nth-child(2) {
  border-top: 1px solid rgba(0,0,0,0.4);
}

.barChart.horizontal > tbody:nth-child(2) > tr:last-of-type > td:nth-child(2) {
  border-bottom: 1px solid rgba(0,0,0,0.4);
}

.barChart.horizontal > tbody:nth-child(2) > tr > td:nth-child(2) {
  border-left: 1px solid rgba(0,0,0,0.4);
}

.barChart.horizontal td.label p {
  display: block;
  font-size: 0.5rem;
  margin: 0;
  color: var(--dark-text);
  top: 0;
}

.barChart.horizontal td.label p.text {
  position: relative;
  left: 0;
  transform:none;
  white-space: nowrap;
  text-align: center;
}

.barChart.vertical td {
  height: 30rem;
  vertical-align: bottom;
  border-top: 1px solid rgba(0,0,0,0.4);
  border-bottom: 1px solid rgba(0,0,0,0.4);
  border-left: 0;
  border-right: 0;
  position: relative;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.1),
    rgba(0,0,0,0.1) 1px,
    transparent 1px,
    transparent 5%
  );
}

.barChart.vertical th {
  width: 18%;
  border: 0;
  height: 1rem;
  text-align: center;
  position: relative;
  background: none;
}

.barChart.vertical td.label, .barChart.vertical th.label {
  width: 10%;
  background: none;
  border: 0;
}

.barChart.vertical > td.label p {
  text-align: right;
  font-size: 0.5rem;
  margin: 0;
  color: var(--dark-text);
}

.barChart.vertical td.label p.text {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  transform: rotate(90deg);
  white-space: nowrap;
}

:root{--primary-color: #263238;--primary-color-darker: #3c484e;--primary-color-dark: #000a12;--primary-color-light: #78909C;--secondary-color: #7C4DFF;--secondary-color-dark: #6200EA;--secondary-color-light: #B388FF;--background-color: #ECEFF1;--app-color: #efefef;--rule-color: #CFD8DC;--app-color: #EEEEEE;--panel-color: #EEEEEE;--app-text: rgba(0,0,0,0.85);--border-color: rgba(0,0,0,0.85)}.main{transition:opacity 0.3s ease}dialog.about{width:23rem;margin-left:-12.25rem;height:20rem}dialog.about h1{color:var(--primary-color)}dialog.about .logo{background:center/contain no-repeat url(images/logo.png);width:4rem;height:4rem;margin:1rem auto}.header{margin:0 0 1rem 0}.content{display:inline-block;width:calc(100% - 17rem);height:calc(100vh - 7rem);overflow-y:auto;overflow-x:hidden;vertical-align:top}.leftNav{height:calc(100vh - 5rem);overflow-y:auto;overflow-x:hidden}.leftNav .spacer{height:1rem}.leftNav h1{font-size:1.2rem}.container{display:block;position:relative;overflow:hidden;margin:1rem}.container>nav.wrapper{height:15rem}.container .menu--off{position:absolute}.container .blur{display:block;position:relative;padding:1rem}.container dialog{position:relative;top:0;left:auto;margin:auto;padding:1rem auto}.container .splash{position:relative;top:auto;left:auto;right:auto;bottom:auto;margin:1rem auto;z-index:0}.notify{position:relative;top:0}.form:not(dialog){display:block;position:relative;width:20rem;margin:0 auto;text-align:right}.form:not(dialog) fieldset,.form:not(dialog) form,.form:not(dialog) .input{width:100%}.form:not(dialog) button{margin-top:1rem;display:inline-block;vertical-align:bottom}.barChart{max-width:45rem;max-height:30rem}.facets{display:block;position:relative;width:15rem;left:0;z-index:1;background-color:var(--app-color);height:100%;overflow-x:hidden;padding-right:0.5rem;padding-left:0.5rem}.facets h1{text-align:center;font-size:1.2rem;font-weight:600;color:var(--dark-text)}.facets h2{margin:0.5rem 0 0.5rem 0;padding:0;font-size:1rem;font-weight:400}.facets label{margin-left:1rem;vertical-align:bottom;font-size:1rem;line-height:1rem}.facets label .material-icons{font-size:1rem;line-height:1rem}.facets input[type=checkbox]{float:left;margin-right:0.5rem;margin-top:0;height:1rem;line-height:1rem}.facets h2.toggle::after{content:"▶";right:0;text-align:right;float:right}.facets div.toggle{transition:max-height 1s ease, opacity 1s ease;display:block;visibility:visible;max-height:38rem;opacity:1;overflow:hidden}.facets div.toggle.collapse{max-height:0;opacity:0}.facets h2.toggle.collapse::after{content:"▲";color:var(--dark-text)}.facets label:hover{background-color:var(--secondary-color-light)}.facets h2.toggle:hover::after{color:var(--secondary-color-dark)}.facets button{margin-left:auto;margin-right:auto}.facets .colorway{display:inline-block;width:1rem;height:1rem}.facets .size{display:inline-block;width:1.5rem;height:1.5rem;line-height:1.5rem;font-size:0.8rem;text-transform:uppercase;text-align:center;border:1px solid rgba(0,0,0,0.85)}.facets .image{margin:0;display:inline-block;width:auto;height:2rem;border:1px solid rgba(0,0,0,0.85)}.facets .image img{height:2rem}.facets .range input[type="text"]{display:inline-block;width:3rem;height:1rem;margin:0 auto 0.1rem auto;font-size:1rem}.carousel{display:block;position:relative;border:1px solid rgba(0,0,0,0.85);box-shadow:0.25rem 0.25rem 0.25rem black;overflow:hidden;margin:0 auto !important}.carousel button{width:2rem;height:100%;margin:0;padding:0;font-size:1rem;color:var(--light-text);background-color:rgba(0,0,0,0.1);top:0;border:none;box-shadow:none;border-radius:0;z-index:1}.carousel button i.material-icons{font-size:2rem}.carousel button.left{position:absolute;left:0}.carousel button.right{position:absolute;right:0}.carousel div{display:inline-block;vertical-align:top;transition:transform 0.5s;height:100%;margin:0}.carousel figure{display:inline-block;position:relative;vertical-align:top;margin:0}.carousel p{padding:0.25rem;margin:0;font-size:0.75rem;color:var(--light-text);background-color:rgba(0,0,0,0.2);z-index:1;overflow:hidden}.checkbox input[type="checkbox"]{background-color:var(--app-color);border:2px solid rgba(255,255,255,0.85)}.checkbox input[type="checkbox"]:hover::before{background-color:rgba(255,255,255,0.1)}.checkbox input[type="checkbox"]:checked{background-color:var(--primary-color);border-color:var(--primary-color)}.checkbox label{color:var(--light-text)}.checkbox.large input[type="checkbox"]{background-color:var(--app-color);border:2px solid rgba(255,255,255,0.85)}.checkbox.large input[type="checkbox"]:hover::before{background-color:rgba(255,255,255,0.1)}.checkbox.large input[type="checkbox"]:checked{background-color:var(--primary-color);border-color:var(--primary-color)}.checkbox.large label{color:var(--light-text)}.panel .toolbar>div{display:inline-block;vertical-align:text-top}.panel .toolbar>div i.material-icons{display:inline;line-height:1rem;font-size:100%;padding:0 0.5rem;margin:0}


/*# sourceMappingURL=main.css.map*/