* { border: 0px; }
a { color: #144660; }
a:hover, a:active, a:focus { color: #6c93a3; }
html { position: absolute; height: 100%; width: 100%; }
body { font-family: 'Noto Sans', sans-serif; position: absolute; height: 100%; width: 100%; display: block; }
.container-fluid { padding-right: 0; padding-left: 0; margin-right: 3%; margin-left: 3%; }
.footer { position: fixed; bottom: 0; width: 100%; background-color: #144660; color:white; padding-top: 8px; text-align: center; z-index: 1; line-height: 8px; }
@media(max-width:767px) { .footer { padding-top: 5px; } }
p.no-pad { padding: 0px; margin: 0px; }
p.c { text-align: center; }

.width-100 { width: 100%; }
.centered { text-align: center; vertical-align: middle; margin-top: 25vh; }

.figure {
  margin-top: 15%;
  display: table;
}
.figure img {
  width: 100%;
  height: auto;
  vertical-align: top;
  margin-bottom: 3px;
  border:2px black solid;
  margin-top:10px;
}
.figure .caption {
  display: table-caption;
  caption-side: bottom;
  background: #e3e3e3;
  box-sizing: border-box;
  padding: 10px;
  margin: 0;
  text-align: center;
}

/* Navbar styling */
  .navbar { padding: 0px; margin: 0px; border-radius: 0px; z-index: 10000; background-color: #144660; color: white; border-color: #6c93a3; border-width: 0px 0px 3px 0px; border-style: solid; }
  .navbar-nav > li > a { color: white; }
  .navbar .container-fluid { padding-left: 0px; padding-right: 0px; margin-left: 30px; }
  .navbar .container-fluid .navbar-header button.navbar-toggle { text-align: center; vertical-align: middle; float: left; margin-right: 0px; border: none; }
  .navbar .container-fluid .navbar-header a.navbar-brand { font-family:  'Rockwell', 'Arvo', 'Carter One', serif; font-size: 1.7em; text-shadow: 0px 0px 0px ; color: white; }
  .navbar .container-fluid .navbar-header a.navbar-brand img { display: inline; height: 18px;  transform: translate(0px, -3px); }
  .navbar a { color: white; font-size: 1.2em; text-shadow: 0px 0px 0px; text-decoration: none; }
  .navbar .container-fluid .navbar-collapse ul.nav.navbar-nav li.open,
  .navbar .container-fluid .navbar-collapse ul.nav.navbar-nav li.open:active,
  .navbar .container-fluid .navbar-collapse ul.nav.navbar-nav li.open:focus,
  .navbar .container-fluid .navbar-collapse ul.nav.navbar-nav li a.dropdown-toggle[aria-expanded=true],
  .navbar .container-fluid .navbar-collapse ul.nav.navbar-nav li a:active,
  .navbar .container-fluid .navbar-collapse ul.nav.navbar-nav li a:focus,
  .navbar .container-fluid .navbar-collapse ul.nav.navbar-nav li a:hover,
  .navbar .container-fluid .navbar-header a.navbar-brand:hover { background: #6c93a3; color: white; text-decoration: none; text-shadow: 0px 0px 0px; } 

    .navbar .container-fluid .navbar-collapse ul.dropdown-menu>li>a.prime { color: #144660 !important; }

  .navbar .container-fluid .navbar-collapse ul.dropdown-menu>li>a.prime:active, 
  .navbar .container-fluid .navbar-collapse ul.dropdown-menu>li>a.prime:focus, 
  .navbar .container-fluid .navbar-collapse ul.dropdown-menu>li>a.prime:hover { background-color: #144660; color: white !important; }


  .navbar ul.icon-menu  { max-height: 50px; padding: 17px 0 15px 0; margin: 0px; display: inline-block; float: right; font-size: 10px; }
  .navbar ul.icon-menu li a .fa { margin: 0 0 0 5px; font-size: 14px; }
  .navbar ul.icon-menu li a .fa-info { margin: 0 10px 0 0px; }
  .navbar ul.icon-menu li { display: inline-block; font-size: 10px; }
  .navbar ul.icon-menu li a { padding: 0px; }
  .navbar ul.icon-menu li.dropdown ul.dropdown-menu.pull-right.menu-mini { max-width: 40px; }
  @media (max-width:767px) { .navbar .container-fluid ul.dropdown-menu>li>a.prime { color: white; margin-left: 30px; } }

  .nav-icon {
    line-height: 18px;
    height: 18px;
    margin-right: 5px;
    width: 1.28571429em;
    text-align: center;
    vertical-align: top;
    display: inline-block;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    /*box-shadow: 0 1px 0 rgba(255,255,255,.25);*/
    box-sizing: border-box;
    translate: -10px;
  }
/* END Navbar styling */

/* Font Awesome Icon Colors */
  .fa { color: white; } /* #6c93a3;*/ 
  .fa.fa-bars { font-size: 1.6em; }
  .fa-fw { margin-right: 5px; }
  .fa-bell.on { color: red; }
  .fa-exclamation { color: red; }
  .fa-rss { color: gold; }
  .blurb .fa { color: #3a6a2f; }
  .red { color: #c12e2a; }
/* END Font Awesome Icon Colors */

/* BEGIN alert divs */
  .alert { z-index: 10000; width: 100%; top: 50px; position: absolute; margin-bottom: 0px; border-radius: 0px; box-shadow: none; background-image: none; text-align: center; }
  .alert.alert-success { text-shadow: 0 0 0; color: #748f24; background-color: #c1db70; border-color: #b4d455; }
  .alert.alert-block.alert-danger { text-shadow: 0 0 0; color: #803333; background-color: #be5b5b; border-color: #a44141; }
  .alert-debug { color: black; background-color: white; border-color: #d6e9c6; }
  .alert-info { color: #3a87ad; background-color: #d9edf7; border-color: #bce8f1; }
  .alert-success { color: #468847; background-color: #dff0d8; border-color: #d6e9c6; }
  .alert-warning { color: black; background-color: orange; border-color: #d6e9c6; }
  .alert-error { color: #b94a48; background-color: #f2dede; border-color: #eed3d7; }
/* END alert divs */

/* Standard Button Styling for Site */
  .plain-btn { color: white; background: #6c93a3; border-color: #6c93a3; box-shadow: none; margin-bottom: 10px; }
  .plain-btn:hover, .plain-btn:active, .plain-btn:focus { color: white; background: #6c93a3; border-color: #6c93a3; font-weight: bold; }
  .btn-danger { background: #c12e2a; text-shadow: 0px 0px 0px 0px; box-shadow: none; margin-bottom: 10px; }
  .btn-danger:hover, .btn-danger:active, .btn-danger:focus { color: white; background: #e74c3c; border-color: #e74c3c; font-weight: bold; }
  .btn-left { float: left; width: 48%; }
  .btn-right { float: right; width: 48%; }
  .btn.move, .btn.save { width: 100%; max-width: 150px; text-align: center; padding:10px; }
  .btn .fa { color: white; }
  .btn.plain-btn.export span { color: white; }
/* END Standard Button Styling for Site */

/* Sac Basin Water Year Index */
  .chart-calculated-height.wyi-chart { height: -moz-calc(75vh - 230px); height: -webkit-calc(75vh - 230px); height: calc(75vh - 230px); margin: 0px; }
/* END Sac Basin Water Year Index */


/* LOADER */
  .loader {
    border: 16px solid #6c93a3;
    border-top: 16px solid #144660;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 2s linear infinite;
    position: absolute;
    top: 45vh;
    left: 50%;
    z-index: 1000000;
  }

  .tiny-loader {
    border: 4px solid #6c93a3;
    border-top: 4px solid #144660;
    border-radius: 50%;
    animation: spin 2s linear infinite;
    position: absolute;
    z-index: 1000000;
    top: 6px;
    width: 18px;
    height: 18px;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
/* END LOADER */

/* EXPORTING HIGHCHARTS */
    .btn:active,
    .btn:hover,
    .btn:focus {
      background: #144660;
      border-color: #144660;
    }

    .title-block {
      text-align: center;
      margin-top: 20px;
    }
    #chart-title {
      font-size: 1.7em;
      margin-bottom: 10px;
    }

    #exportCsv, #exportXls, #exportPng, #exportJpeg, #exportPdf, #printPlot {
      display: none;
      margin-top: 0px;
      margin-bottom: 0px;
    }

    .pale-btn {
      border-radius: 4px;
      background: #6c93a3;
      color: white;
    }

    #exportMenu {
      padding: 4px 10px 4px 10px ;
      height: 34px;
      vertical-align: middle;
    }

    #exportMenu > #button-title {
      height: 100%;
      vertical-align: middle;
      float: left;
      margin-top: 2px;
    }

    #exportMenu:active,
    #exportMenu:hover,
    #exportMenu:focus {
      text-decoration: none;
      font-weight: normal;
    }
    .pale-btn:active,
    .pale-btn:hover,
    .pale-btn:focus {
      background: #6c93a3;
      border-color: #6c93a3;
      color: white;
      font-weight: bold;
    }
/* END EXPORING HIGHCHARTS */

/* FORM BAR STYLING */
  #chart { margin: 0 30px 0 30px; }
  .chart-calculated-height { height: -moz-calc(100vh - 230px); height: -webkit-calc(100vh - 230px); height: calc(100vh - 230px); margin: 0px; }

  .yellow { overflow: hidden; }
  #control-wrapper>.yellow { background-color: #f1c40f; padding:0px; }
  .chart-content { background-color: white; margin: 20px 30px 20px 30px; box-shadow: 0 0 4px 0 rgba(0,0,0,.04); padding-top: 0px; }
  #control-wrapper { margin: 0px; }
  #form-wrapper, #form-wrapper>form, .button-wrapper { display: inline-block; }

  .button-wrapper #resetZoom { margin-left: 0px; }

  .button-wrapper { float: right; vertical-align: middle; line-height: 38px; margin-right: 10px; }
  #form-wrapper, .button-wrapper { padding: 5px; }

  #form-wrapper label {
    vertical-align: middle;
    display: inline-block;
    padding-left: 30px;
    font-weight: bold;
    margin: 0px;
  }
  #form-wrapper #release-projection,  
  #form-wrapper #hydrology-type {
    text-align: center;
    vertical-align: middle;
    line-height: 34px;
  }
  #form-wrapper #hydrology-type {
    border-radius: 0px;
    width: auto;
    margin: 0 0 0 10px;
    height: 34px;
    border-radius:0px;
    text-align: center;
    vertical-align: middle;
    text-align-last: center;
  }
  #form-wrapper #release-projection,
  #form-wrapper .btn,
  .button-wrapper .btn {
    display: inline-block;
    height: 34px;
    margin: 0px;
  }

  select {
    background: white;
    border: solid 7px white;
    outline: white solid thick;
    outline-offset: -5px;
  }

  .switch-holder { vertical-align: middle; font-size: 14px; line-height: 38px; display: inline-block; margin-right: 2px; }
  .switch input { display: none; }
  .slider { position: absolute; cursor: pointer; top: 0px; left: 0; right: 0; bottom: 0px; background-color: #6c93a3; -webkit-transition: .4s; transition: .4s; }
  .slider:before { position: absolute; content: ""; height: 8px; width: 8px; left: 3px; bottom: 3px; background-color: white; -webkit-transition: .4s; transition: .4s; }
  input:checked + .slider:before { -webkit-transform: translateX(15px); -ms-transform: translateX(15px); transform: translateX(15px); }
  .disabled { cursor: not-allowed; }
  .slider.round { border-radius: 14px; }
  .slider.round:before { border-radius: 50%; }
  .switch { position: relative; display: inline-block; width: 24px; height: 14px; }
  span.slider-label { margin: 12px; }
  #switch-wrapper, #form-wrapper, #form-wrapper>form, .button-wrapper { display: inline-block; }
  input[type="number"]:disabled { color: #DDD; cursor: not-allowed; }
  input#release-project-submit:disabled { opacity: 1.0; cursor: not-allowed; text-shadow: none; color: #DDD; pointer-events: all; font-weight: normal; cursor: not-allowed; }
  .btn:hover, .btn:active, .btn:focus { font-weight: normal; }
  .blue { color: #6c93a3; }


/* END FORM BAR STYLING */

/* TOOLBARS AND SIDEBARS */
  #user-sidebar { background: white; padding: 0px;  border-right: 2px LightGray solid; overflow: hidden; color: #000; position: relative;}
  .sidebar-section { padding: 15px; min-height: 50px; max-height: 600px; } /*border-bottom: 1px rgba(0,0,0,0.2) solid; }*/
  .sidebar-footer { padding: 15px; position: absolute; bottom: 0; min-height: 50px; max-height: 600px; }

  .sidebar-section:hover, .sidebar-section:focus, .sidebar-section:active { background: rgba(0,0,0,0.08); }
  #save-blurb input.plain-btn { float: left; width: 30%; }
  #save-blurb a.plain-btn { float: right; width: 65%; }
  .blurb-holder { background: white; padding-top: 0px; margin-top: 10px; padding-bottom: 10px; }
  @media(max-width:767px) { #user-sidebar { height:auto; margin-bottom: 20px; } }

  .content-holder { padding: 0px 0px 0px 0px; }
  @media(max-width:767px) {
    .content-holder { padding:0px 30px 0px 30px; }
    .calculated-height { height: -moz-calc(100vh - 79px); height: -webkit-calc(100vh - 79px); height: calc(100vh - 79px); }
    #user-sidebar.col-xs-12 { margin-bottom: 0px; }
    #user-sidebar { border-right: none; }
    .col-xs-12.content-holder { margin-bottom: 24px; }
    .col-xs-12.content-holder,
    .col-xs-12.content-holder .col-xs-12 { padding: 0px; }
    .col-xs-12.content-holder .btn-danger { font-size: 11px; }
    .col-xs-12.content-holder .col-xs-12 .blurb-holder { padding: 0px; margin-top: 0px; border-bottom: 1px rgba(0,0,0,0.2) solid; background: white; }
    .sidebar-section { padding: 10px; min-height: 40px; max-height: 600px; }
    .col-xs-12.content-holder { background: white; }
    .col-xs-12.content-holder .col-xs-12 .blurb-holder:hover,
    .col-xs-12.content-holder .col-xs-12 .blurb-holder:focus,
    .col-xs-12.content-holder .col-xs-12 .blurb-holder:active { background: rgba(0,0,0,0.08);  }
    .col-xs-12.content-holder .col-xs-12 .blurb-holder h4 { padding: 10px; min-height: 40px; background: none; margin: 10px 0 10px 0;  }
  }  
  @media(max-width: 991px) {
    #user-sidebar.col-sm-12, #user-sidebar { margin-bottom: 0px; height: auto; }
    #user-sidebar { border-right: none; }
    .col-sm-12.content-holder { margin-bottom: 24px; }
    .col-sm-12.content-holder,
    .col-sm-12.content-holder .col-sm-12 { padding: 0px; }
    #threshold-form .col-sm-12 { padding: 0 15px 0 15px;}
    .col-sm-12.content-holder .col-sm-12 .blurb-holder { padding: 0px; margin-top: 0px; border-bottom: 1px rgba(0,0,0,0.2) solid; background: white; }
    .sidebar-section { padding: 10px; min-height: 40px; max-height: 600px; }
    .col-sm-12.content-holder { background: white; }
    .col-sm-12.content-holder .col-sm-12 .blurb-holder:hover,
    .col-sm-12.content-holder .col-sm-12 .blurb-holder:focus,
    .col-sm-12.content-holder .col-sm-12 .blurb-holder:active { background: rgba(0,0,0,0.08); }
    .col-sm-12.content-holder .col-sm-12 .blurb-holder h4 { padding: 10px; min-height: 40px; background: none; margin: 10px 0 10px 0; }
  }
/* END TOOLBARS AND SIDEBARS*/