/* SASS VARIABLES ........................................................... */
/* potential fonts */
/* ~~~~~~~~~~~~~~~~~~~~~~~~ */
/* potential colors */
/* ~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~ */
/* selected colors */
/* ~~~~~~~~~~~~~~~~~~~~~~~~ */
/* RESET .....................................................................*/
/* Override rules from previous CSS files */
/* undo all of the corner rounding bootstrap does */
.btn, .form-control, .input-sm, .input-lg, .navbar .alert {
  border-radius: 0;
  box-shadow: none; }

/* adds standard blue to buttons */
.btn-primary {
  background-color: #569561;
  /* mainlight */ }

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background-color: #4C724F;
  /* maindark */ }

.btn-danger {
  background-color: #EF4836;
  /* dangerlight */ }

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
  background-color: #BC5050;
  /* dangerdark */ }

/* dropdown overwrites */
div.btn-group {
  width: inherit; }

div.btn-group .btn {
  text-align: left; }

.dropdown-menu > li > a {
  padding: 4px 12px; }

.dropdown-menu > li > a:hover {
  color: white;
  background-color: #36527c;
  /* mainlight */ }

.btn-group .caret {
  float: right;
  margin-top: 8px; }

/* adds standard blue to navbar */
.navbar-default {
  background-color: #569561;
  /* mainlight */
  border-bottom: 2px solid #4C724F;
  /* maindark */
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.2);
  z-index: 2; }

/* navbar menu items */
.navbar-default .navbar-nav > li > a {
  line-height: 2em;
  color: white; }

.navbar-default .navbar-nav > li > a:hover {
  color: white;
  text-decoration: underline; }

.navbar-default .navbar-header {
  position: relative; }

.navbar-default .logo {
  position: absolute;
  height: 55px;
  display: inline;
  float: left;
  padding: 10px;
  margin-right: 15px;
  transition: padding 0.05s linear; }

.navbar-default .logo + a {
  margin-left: 30px !important; }

.navbar-default .logo:hover {
  padding: 8px; }

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:active {
  background-color: #4C724F;
  /* maindark */
  color: white; }

/* datepicker */
table .btn-default {
  border: none; }

.well {
  border: none;
  box-shadow: none;
  -webkit-box-shadow: none; }

.dropdown-menu {
  border-radius: 0; }

/* bootstap tabs */
.nav-justified {
  background-color: #fafafa; }

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background-color: none; }

.nav-tabs.nav-justified > li > a,
.nav-tabs > li > a {
  /*border: none;*/
  border-radius: 0;
  color: #a0a0a0; }

.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
  border: 1px solid white;
  color: #00ACC1; }

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border: 1px solid white;
  color: #00ACC1; }

.tab-content {
  padding-top: 0.8em; }

.tooltip.in {
  opacity: 1; }

/*bootstrap tooltip*/
.tooltip-inner {
  max-width: 400px;
  color: white;
  text-align: left;
  border-radius: 0;
  background-color: #569561;
  /*mainlight*/
  -webkit-box-shadow: 0px 0px 7px 0px rgba(70, 70, 70, 0.62);
  -moz-box-shadow: 0px 0px 7px 0px rgba(70, 70, 70, 0.62);
  box-shadow: 0px 0px 7px 0px rgba(70, 70, 70, 0.62); }

.tooltip.top .tooltip-arrow,
.tooltip.top-left .tooltip-arrow,
.tooltip.top-right .tooltip-arrow {
  border-top-color: #569561;
  /*mainlight*/ }

.tooltip.right .tooltip-arrow {
  border-right-color: #569561;
  /*mainlight*/ }

.tooltip.left .tooltip-arrow {
  border-left-color: #569561;
  /*mainlight*/ }

.tooltip.bottom .tooltip-arrow,
.tooltip.bottom-left .tooltip-arrow,
.tooltip.bottom-right .tooltip-arrow {
  border-bottom-color: #569561;
  /*mainlight*/ }

/* main title */
.navbar-default .navbar-brand {
  font-size: inherit;
  padding: 0 10px;
  padding-left: 25px;
  margin: 0;
  height: inherit;
  color: white;
  letter-spacing: 0.5px;
  line-height: 55px; }

.navbar-header h3 {
  margin: 0;
  padding: 0;
  height: 55px; }

.navbar-default .navbar-brand:hover {
  color: white;
  text-decoration: underline; }

.navbar-default .navbar-brand:active,
.navbar-default .navbar-brand:focus {
  color: white; }

.input-group-addon {
  background-color: inherit;
  border-radius: 0; }

/* adds standard blue to select menu */
.ui-select-bootstrap .ui-select-choices-row.active > a {
  background-color: #569561;
  /*mainlight*/ }

.checkbox, .radio {
  background-color: white;
  padding: 6px 10px;
  border: 1px solid #D3D3D3;
  line-height: 20px;
  margin: 0; }

.checkbox label, .radio label {
  display: block; }

/* slider rules */
slider, [slider] {
  margin: 15px 2px; }

slider div.bar, [slider] div.bar {
  border: 1px solid #ccc;
  border-radius: 0px;
  background: #fff; }

slider div.bar .selection, [slider] div.bar .selection {
  background: #80DEEA; }

slider div.handle, [slider] div.handle {
  top: -7px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 0; }

slider div.handle:after, [slider] div.handle:after {
  display: none; }

/* SASS VARIABLES ........................................................... */
/* ~~~~~~~~~~~~~~~~~~~~~~~~ */
/* potential colors */
/* ~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~ */
/* selected colors */
/* ~~~~~~~~~~~~~~~~~~~~~~~~ */
/* CSS SELECTORS ............................................................ */
/* unclassed elements; general website style/format */
html {
  width: 100%;
  height: 100%;
  margin: 0; }

body {
  font-family: "Source Sans Pro", "Helvetica", sans-serif;
  font-weight: normal;
  width: 100%;
  height: 100%;
  margin: 0; }

label {
  display: block;
  color: #455a64;
  font-weight: 500;
  font-size: 13px;
  margin-bottom: 0px; }

h1, h2, h3, h4 {
  font-weight: 500; }

p {
  font-size: 15px; }

ul {
  list-style: none;
  padding: 0; }

pre {
  border-radius: 0;
  background-color: #E0F7FA;
  border-color: #80DEEA;
  overflow: auto;
  word-wrap: normal;
  white-space: pre; }

code {
  background-color: #E0F7FA;
  color: #00ACC1; }

/* OBJECTS ...................................................................*/
/* abstract classes; custom website style/format */
/* for custom style/format, assign these classes to HTML tags */
/* different margin sizes */
.no-margin {
  margin: 0; }

.margin-sm {
  margin-bottom: 0.85em; }

.margin-md {
  margin-bottom: 1.621em; }

.margin-lg {
  margin-bottom: 3.24em; }

.margin-xl {
  margin-bottom: 7.5em; }

.no-padding {
  padding: 0; }

.push-right {
  margin-left: 15px;
  margin-right: -15px; }

.full-height {
  height: 100%; }

.faded {
  color: #ddd; }

.grey {
  background-color: #ECECEC;
  padding: 0.81em 0; }

/* -webkit-animation and animation are a set; they allow animations in CSS */
.fade-animate.ng-hide-remove, .face.ng-show-add {
  -webkit-animation: fadeIn 0.3s;
  animation: fadeIn 0.3s; }

/* !important overrides all other attempts to style the particular element */
.fade-animate.ng-hide-add, .fade.ng-show-remove {
  -webkit-animation: fadeOut 0.3s;
  animation: fadeOut 0.3s;
  display: block !important; }

/* text-heavy pages should use this class for better formatting */
.text-document p {
  font-size: 1.4em;
  margin-bottom: 2.7em; }

.text-document h1 {
  margin-bottom: 1.621em; }

.text-document img {
  width: 100%;
  margin-bottom: 0.85em; }

.text-document .caption {
  font-style: italic; }

/* COMPONENTS ................................................................*/
/* Specific components */
/* Header */
/* Navbar */
/* Controls */
.timestamp {
  padding-left: 10px;
  float: right; }

/* Plots */
.popup-wrapper {
  pointer-events: none;
  opacity: 0;
  position: relative;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000000;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s; }

.popup {
  margin-top: 50px; }

.plot-error {
  border-top: 5px solid #EF4836;
  border-bottom: 5px solid #EF4836; }

.plot-error h4 {
  background-color: #EF4836;
  padding: 0.5em;
  margin: 0;
  color: white; }

.plot-image {
  max-width: 100%;
  height: auto;
  width: auto;
  padding: 0.5em;
  /* ie8 */
  cursor: pointer;
  display: block;
  margin: auto;
  z-index: 100000; }

/* Mapping */
/* ANIMATIONS ................................................................*/
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut; }

.visible {
  pointer-events: all;
  opacity: 1; }

.shadow {
  -webkit-transition: box-shadow 0.2s linear;
  -moz-transition: box-shadow 0.2 linear;
  transition: box-shadow 0.2s linear; }

.shadow:hover {
  -webkit-box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.2);
  -moz-box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.2);
  box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.2); }

/* SPINNER ................................................................*/
.spinner {
  margin: 0 auto 0;
  width: 100px;
  text-align: center; }

.spinner > div {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.spinner-light > div {
  background-color: white; }

.spinner-dark > div {
  background-color: #64BCE2;
  /* mainlight */ }

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s; }

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s; }

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0); }
  40% {
    -webkit-transform: scale(1); } }

@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0);
    -webkit-transform: scale(0); }
  40% {
    transform: scale(1);
    -webkit-transform: scale(1); } }

/* Databrowser overrides ....................................................*/
/*Force scrollbar to show up*/
h4 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 700;
  text-align: center;
  display: inline; }

.axis path, .axis line {
  fill: none;
  stroke: #969696;
  shape-rendering: crispEdges; }

.x.axis path {
  display: none; }

.x.axis text {
  display: none;
  font-size: 10px;
  fill: #969696; }

.faded {
  color: #919191; }

#last-updated {
  border: 1px solid #bbb;
  color: #889;
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 10px; }

#refresh {
  border: 1px solid #bbb;
  padding: 0.5rem; }

#disclaimer {
  border: 1px solid #bbb;
  padding: 0.5rem; }

.continue {
  border: 1px solid;
  display: block;
  margin: auto; }

.timestamp {
  padding-left: 10px;
  float: right; }

.bar:hover {
  fill: #005377; }

.pm25_label {
  font-size: 13px;
  fill: #969696; }

.parameter-selector {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 16rem;
  z-index: 1000; }

#map {
  height: 450px;
  border: 1px solid #bbb; }

.plot-legend {
  font-size: 9pt;
  /*height: 15rem;*/
  /*background-color: #fff;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 5px;
  padding-top: 5px;
  margin-top: 15px;
  box-shadow: 0px 0px 15px 2px #9d9d9d;*/ }

.legend-container {
  padding: 5px;
  background-color: #f5f5f5;
  border: 1px solid #bbb; }

.legend-title {
  font-size: 10pt;
  text-align: center;
  z-index: 10000; }

.legend-text {
  font-size: 10pt;
  margin-bottom: 15px;
  padding-left: 15px;
  padding-right: 15px;
  font-style: italic; }

.legend-icon {
  padding-right: 5px;
  text-align: center;
  vertical-align: middle; }

.legend-arrow {
  position: absolute;
  top: -25px;
  right: 40%;
  z-index: 9999;
  color: #9e9e9e; }

.invisible {
  opacity: 0; }

.monitor-timezone {
  font-size: 9pt;
  font-style: italic; }

.selected-details {
  padding: 5px;
  margin-top: 10px;
  margin-bottom: 30px;
  border-top: solid 2px #bbb;
  border-bottom: solid 2px #bbb;
  font-size: 12pt;
  text-align: center; }

.simple-explanation {
  /* padding-left: 2rem; */
  font-size: 2rem;
  font-style: italic;
  margin-bottom: 0px;
  /* color: #777; */ }

#timeseries-title {
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 10px; }

.barplots {
  /*margin-right: -15px;*/
  overflow-y: scroll;
  border-top: 1px solid #ddd;
  /*border-bottom-style: solid;*/
  /*border-top-style: solid;*/ }

/*Make sure scrollbar always shows up*/
.barplots::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
  border-radius: 0;
  background-color: #eee;
  border-left: solid 1px #ddd;
  /* border-top: solid 1px #ddd; */ }

.barplots::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); }

.barplot-column {
  border: 1px solid #bbb;
  background-color: #f5f5f5;
  padding-top: 10px;
  margin-right: -15px; }

.barplot-wrapper {
  padding-left: 10px;
  position: relative;
  transition: background-color 0.2s linear;
  padding-top: 5px; }

.barplot-wrapper:nth-last-of-type(even) {
  background-color: whitesmoke; }

.barplot-wrapper:nth-last-of-type(odd) {
  background-color: #ececec; }

.barplot-wrapper:hover .barplot-control {
  opacity: .4; }

.barplot-control {
  opacity: 0;
  -webkit-transition: opacity .5s; }

.hovered {
  box-shadow: inset 0px 0px 3px 1px #a2a2a2; }

.barplot-wrapper .barplot-control:hover {
  opacity: 1; }

.highlighted {
  background-color: whitesmoke; }

.thumbnail {
  width: 100%;
  border: none;
  background-color: #ececec; }

.x-out {
  cursor: pointer; }

.transparent {
  opacity: 0.5; }

/* tooltips from https://angular-ui.github.io/bootstrap */
.tooltip-icon {
  /* color: rgb(66, 191, 244); */
  padding: 0px 2px;
  /* just a smidge of space */ }

.tooltip {
  /*the div around the tooltip*/
  width: 200px;
  z-index: 99999; }

.tooltip .tooltip-inner {
  /*the bubble around the text*/
  border-radius: 5px;
  width: 190px;
  background-color: #5a5a5a;
  color: #fafafa;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175); }

.tooltip .tooltip-arrow {
  border-top-color: #5a5a5a;
  /*the little arrow*/ }