#map_canvas {
 width: 100%;
 max-width: 1365px;
 height: 600px;
 border: 1px solid #000000;
 background-color: #FFFFFF;
}

/* Style for the loading progress bar */
#map_progress_bar {
 position: absolute;
 height: 6px;
 background: rgba(1, 1, 240, 0.6);
 width: 0;
 transition: width 250ms;
 z-index: 40;
}

/* Styles for the map popup */
#map_popup {
 display: block;
 width: 250px;
 background-color: #FFFFFF;
 border-radius: 4px;
 padding: 5px;
 box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.75);
 font-size: 12px;
}
#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;
}
.map_popup_title {
 display: block;
 padding: 4px;
 background-color: #CEDAEF;
 border-bottom: 2px solid #3E61A2;
 color: #3E61A2;
 font-size: 14px;
 font-weight: bold;
}
.map_popup_close {
 float: right;
 cursor: pointer;
}

/* Styles for the legends */
div.legend_container {
 margin-top: 10px;
 min-width: 600px;
}
 div.legend_table {
  display: table;
  font-size: 14px;
 }
 div.legend_dataset_type {
  display: table-cell;
  width: 60px;
  padding: 3px;
  text-align: center;
  background-color: #B9C4AA;
  color: #FFFFFF;
  font-size: 10px;
  letter-spacing: 1px;
 }
 div.legend_median {
  display: table-cell;
  width: 6px;
 }
 div.legend_details {
  display: table-cell;
 }
 div.legend_table_row_group {
  display: table-row-group;
 }
 div.legend_table_row {
  display: table-row;
 }
  div.legend_table_param_info {
   display: table-cell;
   padding-right: 10px;
  }
   div.legend_title {
    display: block;
    padding: 0px 2px 2px 0px;
    font-size: 14px;
    font-weight: bold;
   }
  div.legend_table_param_highlight {
   display: table-cell;
   padding: 0px 10px 0px 0px;
   font-size: 12px;
  }
  div.legend_table_ramp {
   display: table-cell;
   vertical-align: top;
   padding: 0px 0px 3px 0px;
  }
   table.legend_table_color_ramp_table {
   }
    tr.legend_table_row {
    }
     td.legend_table_top_text {
      text-align: center;
      font-size: 12px;
     }
     td.legend_table_invis {
      height: 0px;
     }
     td.legend_table_color_shade {
      text-align: center;
      padding: 2px 4px;
      width: 14px;
      height: 5px;
      font-size: 10px;
      font-weight: bold;
     }
     td.legend_table_color_shade_usdm {
      width: 120px;
      height: 20px;
     }
     td.legend_table_color_shade_end {
      padding: 2px 4px;
      width: 4px;
      height: 5px;
      font-size: 10px;
      font-weight: bold;
     }
     td.legend_table_color_value {
      text-align: center;
      font-size: 10px;
     }
  div.legend_single_value {
   padding: 2px 4px;
   border: 1px solid #000000;
   margin-bottom: 3px;
   margin-right: 100px;
   text-align: center;
   font-size: 10px;
   font-weight: bold;
  }
  div.legend_4param_container {
   display: table-cell;
   vertical-align: top;
   padding: 0px 0px 7px 0px;
  }
   div.legend_table_4param_param_left, div.legend_table_4param_param_right {
    display: table-cell;
    font-size: 11px;
    padding: 2px 4px;
   }
   div.legend_table_4param_param_left {
    text-align: right;
    color: #000000;
   }
   div.legend_table_4param_param_right {
    text-align: left;
    color: #000000;
   }
   div.legend_table_4param_blank {
    display: table-cell;
   }
    div.legend_table_4param_circle {
     width: 8px;
     height: 8px;
     background-color: #FFFFFF;
     border: 1px solid #000000;
     border-radius: 50%;
    }
    div.legend_table_4param_wheel_rgb, div.legend_table_4param_wheel_gray {
     display: table-cell;
     width: 10px;
     padding: 0px 2px;
    }
     div.legend_table_4param_wheel_rgb {
      background: url('../images/color_wheel_rgb.png') no-repeat center;
     }
     div.legend_table_4param_wheel_gray {
      background: url('../images/color_wheel_gray.png') no-repeat center;
      opacity: 0.4;
      cursor: pointer;
     }
 div.legend_table_ob {
  display: table-caption;
  padding-top: 2px;
  caption-side: bottom;
  color: #990000;
  font-size: 12px;
 }
 div.legend_table_4param_obs {
  display: table-caption;
  padding-top: 5px;
  caption-side: bottom;
  color: #BB6677;
  font-size: 11px;
  line-height: 150%;
 }
 div.legend_table_warning {
  display: table-caption;
  padding-top: 2px;
  caption-side: bottom;
  color: #DA0A0A;
  font-size: 12px;
  }
  div.legend_table_warning_icon {
   display: inline-block;
   width: 12px;
   height: 12px;
   margin-right: 3px;
   line-height: 12px;
   border: 1px solid #DA0A0A;
   border-radius: 50%;
   background-color: #DA0A0A;
   text-align: center;
   font-size: 11px;
   color: #FFFFFF;
   font-weight: bold;
  }
  div.legend_table_warning_text {
   display: inline;
  }
 div.legend_table_forecast_issuance {
  display: table-caption;
  padding-top: 2px;
  caption-side: bottom;
  color: #000000;
  font-size: 12px;
 }
 div.legend_table_note {
  display: table-caption;
  padding-top: 4px;
  caption-side: bottom;
  color: #000099;
  font-size: 11px;
  font-style: italic;
 }
 div.legend_table_source {
  display: table-caption;
  padding-top: 4px;
  caption-side: bottom;
  color: #000000;
  font-size: 11px;
 }
 div.legend_table_source a {
  color: #0000CC;
 }