/***********************************************/
/* Styles shared by most or all Cardinal pages */
/***********************************************/

/*
html {
 height: 100%;
}
@font-face {
 font-family: Lato;
 src: url('fonts/LATO-REGULAR.TTF');
}
body {
 font-family: Lato, Arial, sans-serif;
 font-size: 15px;
 margin: 0px;
 overflow-y: scroll;
}
input, select {
 font-family: Lato, Arial, sans-serif;
}
*/

/* Page title area */
.cardinal_title {
 display: block;
 width: 100%;
 font-size: 28px;
 font-weight: bold;
 margin: 5px 0px 15px 0px;
}
 .cardinal_title_card {
  display: inline;
  color: #CC0000;
 }
  .cardinal_title_card img {
   height: 36px;
   vertical-align: middle;
  }
  .cardinal_title_card a {
   text-decoration: underline;
  }
 .cardinal_title_arr {
  display: inline;
  color: #888888;
  font-weight: normal;
 }
 .cardinal_title_page {
  display: inline;
  color: #000000;
 }

/* A full-width text area */
.cardinal_full_text {
 display: block;
 width: 100%;
}

/* Styles for the date picker */
.ui-datepicker {
 z-index: 1000;
}
#ui-datepicker-div {
 font-family: Lato, Arial, Helvetica, sans-serif;
}
#ui-datepicker-div select {
 font-family: Lato, Arial, Helvetica, sans-serif;
}

/* Rounded icons for each network type */
.network_btn {
 display: inline-block;
 height: 16px;
 padding: 0px 8px 0px 8px;
 margin: 2px 5px;
 vertical-align: top;
 border-radius: 20px;
 font-size: 12px;
 color: #FFFFFF;
}

/*
.econet, .ncsu {
 background-color: #A40122;
}
.asos {
 background-color: #FFC33B;
 color: #000000;
}
.awos {
 background-color: #009F81;
}
.buoy {
 background-color: #FF5AAF;
}
.cman {
 background-color: #00FCCF;
}
.nos {
 background-color: #008DF9;
}
.raws {
 background-color: #FF6E3A;
}
.uscrn {
 background-color: #8400CD;
}
.cocorahs {
 background-color: #9F0162;
}
.coop {
 background-color: #FFB2FD;
 color: #000000;
}
*/
.asos {
 background-color: #FF595A;
}
.awos {
 background-color: #AB0F2F;
}
.buoy {
 background-color: #0B80D9;
}
.cman {
 background-color: #AC93FB;
}
.nos {
 background-color: #C4E5FF;
 color: #000000;
}
.coop {
 background-color: #FFCEFE;
 color: #000000;
}
.uscrn {
 background-color: #EF994F;
}
.raws {
 background-color: #FFDB29;
 color: #000000;
}
.econet {
 background-color: #94F7A5;
 color: #000000;
}
.ecoext {
 background-color: #009F1B;
}

/* Custom checkboxes for selecting parameters */
/* A (label) container that the custom checkbox will be placed in */
.chkbx_container {
 position: relative;
 padding-left: 25px;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
/* Hide the default checkbox */
.chkbx_container input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}
/* Create a custom checkbox */
.param_chkbx {
 position: absolute;
 top: 0;
 left: 0;
 height: 12px;
 width: 12px;
 background-color: #EEEEEE;
 /*border-radius: 50%;*/
 border: 3px solid #A2B729;
}
/* On mouse-over, add a grey background color */
.chkbx_container:hover input ~ .param_chkbx {
 background-color: #ccc;
}
/* Create the checkmark/indicator (hidden when not checked) */
.param_chkbx:after {
 content: "";
 position: absolute;
 display: none;
}
/* Show the indicator (dot/circle) when checked */
.chkbx_container input:checked ~ .param_chkbx:after {
 display: block;
}
/* Style the indicator (dot/circle) */
.chkbx_container .param_chkbx:after {
	top: 3px;
	left: 3px;
 width: 6px;
 height: 6px;
 /*border-radius: 50%;*/
 background: #A2B729;
}

/* Alternating row colors for tables */
.entry_odd {
 background-color: #F9F9F9;
}
.entry_even {
 background-color: #EFEFEF;
}

/* Colors for data availability ranges */
.data_active {
 color: #0DB790;
}
.data_active_fill {
 background-color: #0DB790;
}
.data_intermed {
 color: #E2C32C;
}
.data_intermed_fill {
 background-color: #E2C32C;
}
.data_inactive {
 color: #FC5938;
}
.data_inactive_fill {
 background-color: #FC5938;
}

/* Tooltips when hovering over measurement levels or units */
.param_level_tooltip_icon, .param_unit_tooltip_icon {
 position: absolute;
 width: 0;
 height: 0;
 top: 0;
 right: 0;
 border-top-width: 8px;
 border-top-style: solid;
 border-bottom-width: 8px;
 border-bottom-style: solid;
 border-bottom-color: transparent;
 border-left-width: 8px;
 border-left-style: solid;
 border-left-color: transparent;
 cursor: help;
}
 .param_level_tooltip_default {
  border-top-color: #00CC00;
 }
 .param_level_tooltip_secondary {
  border-top-color: #FFCC00;
 }
 .param_unit_tooltip_icon {
  border-top-color: #27A0FF;
 }
 .param_level_tooltip_text, .param_unit_tooltip_text {
  position: absolute;
  visibility: hidden;
  top: -15px;
  right: 15px;
  width: 120px;
  padding: 5px;
  border-radius: 6px;
  background-color: #333333;
  color: #FFFFFF;
  z-index: 1;
  font-size: 12px;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
 }
 .param_level_tooltip_text {
  text-align: center;
 }
 .param_unit_tooltip_text {
  text-align: left;
 }
  .param_unit_tooltip_text ul{
   margin-top: 5px;
   margin-left: 0px;
   padding-left: 20px;
  }
 .param_level_tooltip_icon:hover .param_level_tooltip_text, .param_unit_tooltip_icon:hover .param_unit_tooltip_text {
  visibility: visible;
 }

/* A disclaimer about a particular parameter */
.disclaimer_icon {
 display: inline;
 font-size: 14px;
}
 .disclaimer_icon i {
  color: #FF9900;
  cursor: pointer;
 }
.disclaimer_text {
 display: none;
 padding: 4px 8px;
 border-radius: 8px;
 background-color: #FF9900;
 color: #000000;
}
 .disclaimer_text i {
  color: #000000;
  margin-right: 5px;
 }
 .disclaimer_text a {
  color: #000000;
  text-decoration: underline;
 }

/* Styles for the data usage quota bar */
.quota_bar_container {
 display: block;
 margin: 20px 5px;
}
 .quota_bar_title {
  display: inline-block;
  width: 180px;
  text-align: left;
  vertical-align: top;
  margin: 0px 10px;
  font-size: 16px;
  font-weight: bold;
 }
  .quota_bar_subtitle {
   display: block;
   margin: auto;
   font-size: 12px;
   font-weight: normal;
  }
 .quota_bar_wrapper, .quota_bar_wrapper_reg {
  display: inline-block;
  width: 500px;
 }
 .quota_bar_wrapper_wide {
  display: inline-block;
  width: 800px;
 }
 .quota_bar {
  display: block;
  width: 100%;
  height: 55px;
  vertical-align: top;
  background-color: #E6E6E6;
  border: 2px solid #AAAAAA;
  box-sizing: unset !important;
  -webkit-box-sizing: unset !important;
 }
  .quota_bar_used_cardinal {
   display: inline-block;
   height: 100%;
   background-color: #006600;
   box-shadow: -1px 0px 0px 0px #E6E6E6;
  }
  .quota_bar_used_other {
   display: inline-block;
   height: 100%;
   background-color: #326070;
   box-shadow: -1px 0px 0px 0px #E6E6E6;
  }
  .quota_bar_used_over {
   display: inline-block;
   height: 100%;
   background-color: #FF8888;
   box-shadow: -1px 0px 0px 0px #E6E6E6;
  }
  .quota_bar_est_under {
   display: inline-block;
   height: 100%;
   background-color: #F16827;
   box-shadow: -1px 0px 0px 0px #E6E6E6;
  }
  .quota_bar_est_over {
   display: inline-block;
   height: 100%;
   background-color: #990000;
   box-shadow: -1px 0px 0px 0px #E6E6E6;
  }
  .quota_bar_label_est_under_right, .quota_bar_label_est_under_left, .quota_bar_label_est_over, .quota_bar_label_est_inner {
   display: inline-block;
   margin: 0px 5px;
   vertical-align: top;
   font-size: 12px;
  }
  .quota_bar_label_est_under_right {
   float: right;
   text-align: right;
   color: #F16827;
  }
  .quota_bar_label_est_under_left {
   text-align: left;
   color: #F16827;
  }
  .quota_bar_label_est_over {
   float: right;
   text-align: right;
   color: #990000;
  }
  .quota_bar_label_est_inner {
   float: right;
   text-align: right;
   color: #FFFFFF;
  }
 .quota_bar_labels {
  display: block;
  width: 100%;
  padding: 0px 0px 0px 4px;
  font-size: 12px;
 }
  .quota_bar_label_used_cardinal {
   display: inline-block;
   /*position: absolute;*/
   padding-right: 12px;
   text-align: left;
   color: #006600;
  }
  .quota_bar_label_used_other {
   display: inline-block;
   /*position: absolute;*/
   padding-right: 12px;
   text-align: left;
   color: #326070;
  }
  .quota_bar_label_used_over {
   display: inline-block;
   /*position: absolute;*/
   padding-right: 12px;
   text-align: left;
   color: #CC0000;
  }
  .quota_bar_label_total {
   display: inline-block;
   float: right;
   padding: 0px 5px;
   border-right: 2px solid #999999;
   text-align: right;
   color: #666666;
  }