* { border: 0px;}
a { color: #00796b;}
a:hover, a:active, a:focus { color: #004d40;}
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: #004d40; 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;}

.width-100 { width: 100%;}
.centered { text-align: center; vertical-align: middle; margin-top: 25vh;}
#id_point_of_diversion { height: 52px; font-size: 20px; }
#schedule { margin-top: 52px; }

.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: #00796b; color: white; border-color: #80cbc4; 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:  sans-serif; font-size: 1.7em; text-shadow: 0px 0px 0px ; color: white;}
  .navbar .container-fluid .navbar-header a.navbar-brand img { display: inline; height: 40px;  transform: translate(-0px, -8px);}
  .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: #004d40; color: white; text-decoration: none; text-shadow: 0px 0px 0px;} 
  .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: rgba(0,0,0,0.75);}
  .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;} }
/* END Navbar styling */

/* Font Awesome Icon Colors */
  .fa { color: #80cbc4;} /* #004d40;*/ 
  .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: #004d40; border-color: #004d40; box-shadow: none; margin-bottom: 10px;}
  .plain-btn:hover, .plain-btn:active, .plain-btn:focus { color: white; background: #004d40; border-color: #004d40; 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;}
  .btn-tall { height: 52px; line-height: 40px; font-size: 20px; }
/* END Standard Button Styling for Site */

/* Sac Basin Water Year Index */
  #wyichart { padding-top: 50px;}
  #over-chart { position: absolute; top: 20px; right: 25px; z-index: 99;}
/* END Sac Basin Water Year Index */

/* MAPS */
  #map { width: 100%;}
  .info.legend { line-height: 18px; color: #555;   padding: 6px 8px; background: white; background: rgba(255,255,255,0.8); box-shadow: 0 0 15px rgba(0,0,0,0.2); border-radius: 5px;}
  .legend i { width: 18px; height: 18px; float: left; margin-right: 8px; opacity: 0.9;}
  .legend .circle { border-radius: 50%; width: 10px; height: 10px; margin-top: 8px;}
  .info.legend h4 { margin: 0 0 5px; color: #000;}
  .calculated-height { height: -moz-calc(100% - 76px); height: -webkit-calc(100% - 76px); height: calc(100% - 76px);}
  .legend { background-color: white; border-radius: 6px; width: 100px;}
  .leg-item { height: 100%; padding: 0; display:inline-block; margin:2px 0 2px 0; width: 100%; position: relative;}
  #leg-header { width: 100%; padding: 5px; padding-top: 0px; text-align: center;}
  #leg-header h4 { margin: 0px; padding: 0px;}
  #leg-gage, 
  #leg-gage-gray, 
  #leg-network { background: white; border: 2px solid black; border-radius: 50%; width: 10px; height: 10px; position: absolute; top: 51%; left: 5%; transform: translate(-50%,-50%);} 
  #leg-network { background: none; border: none; border-radius: none;}
  #img-network { width: 10px; height: 10px; transform: translate(0%, -50%);}
  span.leg-text { margin-left: 15px; color: #000;}
  .contractor-label { color: #f8eccd;  font-weight: normal; font-size: 12px;  text-shadow: 2px 2px 10px rgba(0,0,0,1.0), -2px -2px 10px rgba(0,0,0,1.0); }
  .gage-label { color: #fff;  white-space: nowrap; font-weight: normal; padding: 0px 0px 0px 20px; font-size: 14px;  text-shadow: 2px 2px 10px rgba(0,0,0,1.0), -2px -2px 10px rgba(0,0,0,1.0); }
/* END Maps*/

/* DIVERSION DATA ENTRY STYLING */
  form.table, form.table .attach-slider {min-width: 420px; max-width: 440px; margin: 0px;}
  form.table .slider-holder {float: right; line-height: 34px;}
  form.table .attach-slider .form-actions, form.table .slider-holder {display: inline-block;}
  form.table .attach-slider #submit-id-publish {width: 240px;}
  @media(max-width: 767px) { 
    form.table, form.table .attach-slider {min-width: 360px; max-width: 400px;}
    form.table .attach-slider #submit-id-publish {width: 180px;}
  }
/* END DIVERSION ENTRY STYLING */

/* CHECKBOX SLIDER STYLING */
  /* The switch - the box around the slider */
  .switch { position: relative; display: inline-block; width: 24px; height: 14px;}
  span.slider-label { margin: 12px;}
  span#enable-interval, span#enable-theme { color: #ccc; cursor: not-allowed;}
  h3#limit-width { max-width: 640px;}

  /* Hide default HTML checkbox */
  .switch-holder { position: absolute; display: inline-block;  vertical-align: middle;  right: 100px; margin-right: 2px;  font-size: 14px;  }
  .inline-switch-holder { font-size: 14px; display:inline-block; }
  .switch input { display: none; }

  .inl-switch-holder { line-height: 34px; vertical-align: middle; display: inline-block; margin-top: -10px;}
  
  /* The slider */
  .slider { position: absolute; cursor: pointer; top: 7px; left: 0; right: 0; bottom: -7px; background-color: #80cbc4; -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 { background-color: #00796b;}
  input:focus + .slider { box-shadow: 0 0 1px #00796b;}
  input:checked + .slider:before { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px);}
  input:disabled + .slider { background-color: #ccc; cursor: not-allowed;}

  /* Rounded sliders */
  .slider.round { border-radius: 14px;}
  .slider.round:before { border-radius: 50%;}
/* END CHECKBOX SLIDER STYLING */

/* LOADER */
  .loader {
    border: 16px solid #80cbc4;
    border-top: 16px solid #00796b;
    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 #80cbc4;
    border-top: 4px solid #00796b;
    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 */
    /* The switch - the box around the slider */
    .switch {
      position: relative;
      width: 24px;
      height: 14px;
    }

    span.slider-label {
      margin: 12px;
    }
    .switch-holder {
      vertical-align: middle;
      font-size: 14px;
      line-height: 34px;
      display: inline-block;
    }

    /* Hide default HTML checkbox */
    .switch input {display:none;}

    /* The slider */
    .slider {
      position: absolute;
      cursor: pointer;
      top: 7px;
      left: 0;
      right: 0;
      bottom: -7px;
      background-color: #80cbc4;
      -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 {
      background-color: #00796b;
    }

    input:focus + .slider {
      box-shadow: 0 0 1px #00796b;
    }

    input:checked + .slider:before {
      -webkit-transform: translateX(10px);
      -ms-transform: translateX(10px);
      transform: translateX(10px);
    }

    /* Rounded sliders */
    .slider.round {
      border-radius: 14px;
    }

    .slider.round:before {
      border-radius: 50%;
    }

    .btn:active,
    .btn:hover,
    .btn:focus {
      background: #00796b;
      border-color: #00796b;
    }

    .title-block {
      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: #80cbc4;
      color: #004d40;
    }

    #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: #004d40;
      border-color: #004d40;
      color: white;
      font-weight: bold;
    }
/* END EXPORING HIGHCHARTS */


/* DATATABLES */
  table.table.dataTable.no-footer { border-bottom: 1px solid #ddd;}
  .dataTables_wrapper { margin-bottom: 50px;}
  .dataTables_wrapper .H.width-100 {margin:20px 0 0 0;}
  .dataTables_wrapper .F.width-100 {margin-top:25px;}
  .dataTables_wrapper .float-left, .dataTables_wrapper .float-right { margin-right: 0px; display: inline-block;}
  .dataTables_wrapper .float-left {  float: left;   min-width: 150px;}
  .dataTables_wrapper .float-right { float: right; width: 50%;}
  .dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate, .form-control.input-sm { display: inline-block;}
  .dataTables_filter, .dataTables_paginate, .dataTables_filter label, .dataTables_filter label .input-sm { width: 100%;}
  .dataTables_wrapper th { background: #ddd;}
  .pagination { margin: 0px; float:right ;}
  .pagination a, .pagination>.active>a, .pagination>.active>span { background: #00796b; border-color: #00796b;}
  .pagination>li>a, .pagination>li>span { color: #00796b;}
  .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>span:focus, .pagination>.active>span:hover { background: #004d40; border-color: #004d40;}
  .pagination>li>a:focus, .pagination>li>a:hover, .pagination>li>span:focus, .pagination>li>span:hover { color: #004d40;}
  table.dataTable thead th { position: relative; background-image: none !important; vertical-align: middle;}
  table.dataTable thead th.sorting:after,
  table.dataTable thead th.sorting_asc:after,
  table.dataTable thead th.sorting_desc:after { position: absolute; top: 33%; right: 10%; display: block; font-family: FontAwesome;}
  table.dataTable thead th.sorting:after { content: "\f0dc"; color: #00796b; font-size: 1.0em;  vertical-align: middle;}
  table.dataTable thead th.sorting_asc:after { content: "\f0de";}
  table.dataTable thead th.sorting_desc:after { content: "\f0dd";}

  .table-spacer {
    margin-top: 60px;
  }

/* END DATATABLES */

    input#submit-id-candidate {
      width: 30%;
    }
    select#select-pattern {
      width: 65%;
      display: inline-block;
      vertical-align: top;
    }