/* Set some styles used by station details panel. */

/* The preview bar at the bottom of the map */
.station_preview_bar {
 display: none;
 position: absolute;
 bottom: 0px;
 width: 100%;
 z-index: 1;
 padding: 7px 10px;
 border-top: 4px solid #092940;
 background-color: #FFFFFF;
 text-align: center;
}
 .station_preview_bar img {
  width: 15px;
  height: 15px;
  vertical-align: top;
  margin-right: 5px;
 }

/* The panel below the map containing station info */
.station_panel {
 display: none;
 position: relative;
 top: 100%;
 padding: 10px;
 background-color: #FFFFFF;
}

 /* Styles for the parameter change option */
 .station_section_param {
  display: block;
  margin: 5px;
 }
  .station_section_param i {
   margin: 0px 4px;
  }

 /* Styles for subsections in the station details panel */
 .station_section_metadata, .station_section_almanac, .station_section_graph {
  display: block;
  margin: 0px 5px;
  border: 1px solid #484848;
  vertical-align: top;
 }
 .station_section_almanac {
  text-align: center;
 }
 .station_section_title {
  display: block;
  padding: 8px;
  text-align: left;
  background-color: #484848;
  color: #FFFFFF;
 }
  .station_section_title i {
   margin: 0px 4px;
  }
  .station_section_export {
   display: inline-block;
   float: right;
  }
   .station_section_export i {
    cursor: pointer;
   }

 /* The section for station metadata */
 .station_section_metadata {
  max-width: 25%;
 }
 .station_metadata_table {
  display: table;
 }
  .station_metadata_tr {
   display: table-row;
  }
   .station_metadata_field, .station_metadata_value {
    display: table-cell;
    padding: 4px 8px;
   }
   .station_metadata_field {
    font-weight: bold;
   }
 .station_metadata_link {
  display: block;
  padding: 4px 8px;
 }
  .station_metadata_link i {
   margin-right: 5px;
  }

 /* The section for the daily almanac */
 .station_almanac_container {
  display: inline-block;
  margin: auto;
 }
  .station_almanac_title {
   display: none;
   padding: 5px 10px;
   background-color: #484848;
   color: #FFFFFF;
  }
   .station_almanac_title_station {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
   }
   .station_almanac_title_param {
    display: block;
    margin-bottom: 6px;
   }
  .station_almanac_data {
   display: block;
   padding: 5px 10px;
  }
   .station_almanac_table {
    display: table;
    margin: auto;
    border-collapse: collapse;
   }
    .station_almanac_tr {
     display: table-row;
    }
     .station_almanac_header {
      display: table-cell;
      padding: 15px 4px 2px 4px;
      text-align: center;
      font-weight: bold;
     }
     .station_almanac_month {
      display: table-cell;
      padding: 2px 4px;
      font-weight: bold;
     }
     .station_almanac_monthly_stats {
      display: table-cell;
      width: 10vw;
      padding-right: 5px;
      vertical-align: middle;
      text-align: left;
     }
      .station_almanac_stat_bar {
       display: inline-block;
       position: relative;
       padding: 2px 0px;
       text-align: center;
      }
       .stat_bar_tooltip_icon {
        position: absolute;
        width: 0;
        height: 0;
        top: 0;
        right: 0;
        border-top-width: 0.4vw;
        border-top-style: solid;
        border-top-color: #000000;
        border-bottom-width: 0.4vw;
        border-bottom-style: solid;
        border-bottom-color: transparent;
        border-left-width: 0.4vw;
        border-left-style: solid;
        border-left-color: transparent;
        cursor: help;
       }
        .stat_bar_tooltip_icon .stat_tooltip_text {
         visibility: hidden;
         position: absolute;
         width: 120px;
         background-color: #000000;
         color: #FFFFFF;
         text-align: center;
         border-radius: 6px;
         border: 1px solid #000000;
         padding: 5px 0;
         z-index: 1;
         bottom: 14px;
         left: 50%;
         margin-left: -60px;
        }
        .stat_bar_tooltip_icon .stat_tooltip_text::after {
         content: "";
         position: absolute;
         top: 100%;
         left: 50%;
        }
        .stat_bar_tooltip_icon:hover .stat_tooltip_text {
         visibility: visible;
        }
     .station_almanac_day {
      display: table-cell;
      width: 1.4vw;
      padding: 2px;
      border: 1px solid #484848;
      text-align: center;
     }
     .station_almanac_noday {
      display: table-cell;
      padding: 2px;
     }

 /* The section for the graph/Highchart */
 .station_graph {
  display: block;
  width: 800px;
  height: 400px;
  margin: auto;
  text-align: center;
 }
  .station_graph_error {
   display: block;
   margin: 20px auto;
   text-align: center;
   color: #990000;
  }
   .station_graph_error i {
    color: #FFB000;
   }

 /* Attribution for the graph data */
 .station_attribution {
  display: block;
  padding-bottom: 10px;
  color: #AA44AA;
  text-align: center;
 }
  .station_attribution img {
   width: 15px;
   margin-right: 0.1vw;
  }
  .station_attribution a {
   color: #AA44AA;
  }

 /* A disclaimer about the graph data */
 .station_disclaimer {
  display: block;
  padding-bottom: 10px;
  text-align: center;
 }
  .station_disclaimer i {
   color: #FFC624;
  }