/* Styles for the Station Information panel */
#station_info_map {
 display: block;
 width: 550px;
 height: 300px;
 margin: 10px auto;
}
#stn_map_popup {
 display: block;
 min-width: 250px;
 background-color: #FFFFFF;
 border-radius: 4px;
 border: 1px solid #FFFFFF;
 padding: 5px;
 box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.75);
 line-height: 140%;
 font-family: Univers, UniversLight, Arial, sans-serif;
 font-size: 14px;
}
/* Add an arrow at the bottom of the popup */
#stn_map_popup:after {
 content: '';
 position: absolute;
 top: 100%;
 left: 50%;
 margin-left: -8px;
 width: 0;
 height: 0;
 border-top: solid 8px #FFFFFF;
 border-left: solid 8px transparent;
 border-right: solid 8px transparent;
}
div.map_popup_close {
 position: relative;
 float: right;
 right: 3px;
 padding: 3px;
 cursor: pointer;
 color: #999999;
 font-size: 14px;
}
.map_popup_title {
 display: block;
 margin-bottom: 5px;
 padding: 5px;
 background-color: #34495E;
 color: #FFFFFF;
 font-size: 18px
}

/* Add custom styling for the nearby stations dropdown menu */
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item-wrapper {
 padding: 0.5em 0 0.5em 3em;
}
.ui-menu-item-wrapper {
 font-family: Univers, UniversLight, Arial, sans-serif;
 font-size: 14px;
}
.ui-selectmenu-menu .ui-menu.customicons .ui-menu-item .ui-icon {
 height: 20px;
 width: 20px;
 top: 0.1em;
}
.ui-selectmenu-text {
 font-family: Univers, UniversLight, Arial, sans-serif;
 font-size: 14px;
}
span.ui-icon{
  border-radius: 24px;
  border: 1px solid black;
  width: 12px;
  height: 12px;
}
.ui-icon.econet {
  background-image: none !important;
}
.ui-icon.asos {
  background-image: none !important;
}
.ui-icon.awos {
  background-image: none !important;
}
.ui-icon.buoy {
  background-image: none !important;
}
.ui-icon.cman {
  background-image: none !important;
}
.ui-icon.nos {
  background-image: none !important;
}
.ui-icon.raws {
  background-image: none !important;
}
.ui-icon.uscrn {
  background-image: none !important;
}
.ui-icon.cocorahs {
  background-image: none !important;
}
.ui-icon.coop {
  background-image: none !important;
}

/* The popup bubble styling for the labeled  marker on the Station Information map */
.popup-bubble {
 /* Position the bubble centred-above its parent */
 position: absolute;
 top: 0;
 left: 0;
 transform: translate(-50%, -100%);
 /* Style the bubble. */
 background-color: #4156A1;
 padding: 5px;
 border-radius: 5px;
 font-family: sans-serif;
 overflow-y: auto;
 max-height: 60px;
 box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.5);
 color: #FFFFFF;
 font-weight: bold;
 /* Don't allow highlighting of the text inside the popup */
 -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

/* The parent of the bubble. A zero-height div at the top of the tip */
.popup-bubble-anchor {
 /* Position the div a fixed distance above the tip */
 position: absolute;
 width: 100%;
 bottom: 8px;
 left: 0;
}

/* This element draws the tip */
.popup-bubble-anchor::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 /* Center the tip horizontally */
 transform: translate(-50%, 0);
 /* The tip is a https://css-tricks.com/snippets/css/css-triangle/ */
 width: 0;
 height: 0;
 /* The tip is 8px high, and 12px wide */
 border-left: 6px solid transparent;
 border-right: 6px solid transparent;
 border-top: 8px solid #4156A1;
}

/* JavaScript will position this div at the bottom of the popup tip */
.popup-container {
 cursor: auto;
 height: 0;
 position: absolute;
 /* The max width of the info window */
 width: 200px;
}

/* Styles for the map popup when a nearby station is selected */
.nearby_popup {
 text-align: center;
 font-family: Univers, UniversLight, Arial, sans-serif;
}
 .nearby_popup_title {
  font-size: 14px;
  font-weight: bold;
 }
 .nearby_popup_table {
  display: table;
  margin: 5px 0px;
  text-align: left;
  font-size: 12px;
 }
  .nearby_popup_table_row {
   display: table-row;
  }
   .nearby_popup_table_field {
    display: table-cell;
    padding: 2px 4px 2px 0px;
    font-weight: bold;
   }
   .nearby_popup_table_value {
    display: table-cell;
    padding: 2px 0px 2px 4px;
   }

#ob_timeline {
 height: 200px;
 margin: 20px auto 0px auto;
}