html {
 height: 100%;
}
body {
 font-family: Lato, Arial, Helvetica, sans-serif;
 font-size: 14px;
 margin: 0px;
 width: 100%;
 height: 100%;
 min-height: 100%;
 overflow-y: scroll;
 text-align: center;
}
#cc_outer_container {
 width: 100%;
 background-color: #FFFFFF;
 text-align: center;
}
#cc_container {
 width: 1140px;
 padding: 12px 0px;
 display: inline-block;
 margin: auto;
 background-color: #FFFFFF;
 text-align: center;
}
#cc_container_mobile {
 width: 80%;
 padding: 12px 0px;
 display: inline-block;
 margin: auto;
 text-align: center;
}
#cc_menu {
 display: none;
 float: left;
 max-width: 150px;
 height: 400px;
 background-color: #FFFFFF;
}
#cc_map {
 display: inline-block;
 width: 938px;
 height: 400px;
 margin: 0px;
}
#cc_meteogram {
 display: none;
 width: 938px;
 height: 400px;
 margin: 0px;
 float: right;
 background-color: #FFFFFF;
}
#cc_sidebar, #cc_sidebar_mobile {
 display: inline-block;
 position: relative;
}
#cc_sidebar {
 width: 198px;
 height: 400px;
}
#cc_sidebar_mobile {
 width: 100%;
}
div.cc_sidebar_param_sel, div.cc_sidebar_param_unsel {
 display: block;
 width: 180px;
 text-align: left;
 cursor: pointer;
 border-radius: 18px;
 margin-bottom: 3px;
 padding: 7px;
}
div.cc_sidebar_param_sel {
 background-color: #A3BDD6;
 border-bottom: 2px solid #849eb7;
 color: #000000;
}
div.cc_sidebar_param_unsel {
 background-color: #EEEEEE;
 border-bottom: 2px solid #DDDDDD;
 color: #666666;
}
#cc_sidebar div input[type="radio"] {
 position: absolute;
 opacity: 0;
}
#cc_sidebar div input[type="radio"] + .cc_radio_label:before {
 content: '';
 border-radius: 100%;
 display: inline-block;
 width: 1.2em;
 height: 1.2em;
 position: relative;
 top: -0.1em;
 margin-right: 0.4em;
 vertical-align: top;
 cursor: pointer;
 text-align: center;
 -webkit-transition: all 250ms ease;
 transition: all 250ms ease;
 background: #f4f4f4;
 border: 1px solid #b4b4b4;
}
#cc_sidebar div input[type="radio"]:checked + .cc_radio_label:before {
 background-color: #447CB3;
 box-shadow: inset 0 0 0 4px #f4f4f4;
}
#cc_sidebar div input[type="radio"]:focus + .cc_radio_label:before {
 outline: none;
 border-color: #447CB3;
}
#cc_sidebar div input[type="radio"]:disabled + .cc_radio_label:before {
 box-shadow: inset 0 0 0 4px #f4f4f4;
 border-color: #b4b4b4;
 background: #b4b4b4;
}
#cc_sidebar div input[type="radio"] + .cc_radio_label:empty:before {
 margin-right: 0;
}
#cc_sidebar .cc_station_info, #cc_sidebar_mobile .cc_station_info_mobile {
 display: inline-block;
 width: 100%;
 text-align: center;
}
#cc_sidebar .cc_station_info {
 position: absolute;
 bottom: 2px;
 right: 1px;
}
 .cc_station_info_table {
  display: table;
  width: 100%;
 }
 .cc_station_info_row {
  display: table-row;
 }
 #cc_sidebar .cc_station_info_header, #cc_sidebar_mobile .cc_station_info_header {
  display: table-cell;
  padding: 4px;
  text-align: center;
  font-weight: bold;
  background-color: #a3bdd6;
  border-radius: 18px 18px 0px 0px;
 }
 #cc_sidebar .cc_station_info_header {
  font-size: 18px;
 }
 #cc_sidebar_mobile .cc_station_info_header {
  font-size: 28px;
 }
 #cc_sidebar .cc_station_info_subheader, #cc_sidebar_mobile .cc_station_info_subheader {
  display: table-cell;
  padding: 2px 4px;
  text-align: center;
  background-color: #c1d0de;
 }
 #cc_sidebar .cc_station_info_subheader {
  font-size: 14px;
 }
 #cc_sidebar_mobile .cc_station_info_subheader {
  font-size: 24px;
 }
 .cc_station_info_stationsel {
  display: table-cell;
  padding: 2px 4px;
  text-align: center;
 }
 #cc_sidebar_mobile .cc_station_info_stationsel {
  font-size: 24px;
  background-color: #dde4ea;
 }
 .cc_station_info_select {
  font-family: Lato, Arial, Helvetica, sans-serif;
 }
 .cc_station_info_obtime {
  display: table-cell;
  padding: 2px;
  text-align: center;
  background-color: #d0dae4;
  border-bottom: 2px solid #a3bdd6;
 }
 #cc_sidebar .cc_station_info_obtime {
  font-size: 12px;
 }
 #cc_sidebar_mobile .cc_station_info_obtime {
  font-size: 20px;
 }
 .cc_station_info_data {
  display: table-cell;
  padding: 0px;
  background-color: #a8b5c1;
  text-align: center;
  font-size: 12px;
 }
 .cc_station_info_wx_table {
  display: table;
  width: 100%;
 }
 .cc_station_info_wx_param {
  display: table-cell;
  padding: 2px 2px 2px 4px;
  text-align: left;
  vertical-align: top;
 }
 #cc_sidebar .cc_station_info_wx_param, #cc_sidebar .cc_station_info_wx_value {
  font-size: 12px;
 }
 #cc_sidebar_mobile .cc_station_info_wx_param, #cc_sidebar_mobile .cc_station_info_wx_value {
  font-size: 20px;
 }
 .cc_station_info_wx_value {
  display: table-cell;
  padding: 2px 4px 2px 2px;
  text-align: center;
  vertical-align: top;
 }
 .cc_station_info_wx_color0 {
  background-color: #d4d4d4;
 }
 .cc_station_info_wx_color1 {
  background-color: #e5e5e5;
 }
 .cc_station_info_footer {
  height: 20px;
  padding-top: 4px;
  background-color: #a3bdd6;
  border-radius: 0px 0px 18px 18px;
  border-bottom: 2px solid #849EB7;
 }
 #cc_sidebar .cc_station_info_footer {
  font-size: 11px;
 }
 #cc_sidebar_mobile .cc_station_info_footer {
  font-size: 18px;
 }
 .cc_station_info_footer a {
  color: #2222BB;
 }

#cc_display_switch {
 display: block;
}
 #cc_map_switch, #cc_meteogram_switch {
  display: inline-block;
  margin: 0px;
  font-size: 16px;
  text-align: center;
  padding: 5px 10px;
 }
 #cc_map_switch {
  border-radius: 18px 0px 0px 18px;
 }
 #cc_meteogram_switch {
  border-radius: 0px 18px 18px 0px;
 }
 .cc_switch_sel {
   background-color: #A3BDD6;
   border-color: #5A7894;
   border-width: 3px 1px 1px 1px;
   border-style: solid;
   cursor: default;
 }
 .cc_switch_unsel {
   background-color: #EEEEEE;
   color: #537BA0;
   border-color: #8296A9;
   border-width: 3px 1px 1px 1px;
   border-style: solid;
   cursor: pointer;
 }
 .cc_switch_disabled {
   background-color: #CCCCCC;
   color: #AAAAAA;
   border-color: #AAAAAA;
   border-width: 3px 1px 1px 1px;
   border-style: solid;
   cursor: not-allowed;
 }

#stnNum {
 margin-top: 5px;
 font-size: 16px;
}

.highcharts-background {
 fill: #FFFFFF;
}
.highcharts-title {
 font-size: 20px !important;
 color: #000000 !important;
 fill: #000000 !important;
}
.highcharts-subtitle {
 font-size: 14px !important;
 color: #52758c !important;
 fill: #52758c !important;
}

/* Styles for the wind vector explanation tooltip */
.cc_tooltip {
 display: inline-block;
 position: absolute;
 left: 50px;
 top: 50px;
 background-color: #A3BDD6;
 border: 2px solid #2d567d;
 box-shadow: 0 0 3px grey;
 cursor: default;
 color: #000000;
 border-radius: 8px;
 width: 12px;
 height: 12px;
 font-size: 12px;
 line-height: 12px;
 margin-left: 2px;
 vertical-align: middle;
 text-align: center;
 padding-left: 1px;
}
.cc_tooltip:before {
 content: '?';
 font-weight: bold;
 color: #000000;
}

/* How the tooltip box fades in */
.cc_tooltip:hover p {
 display: block;
 transform-origin: 100% 0%;
 -webkit-animation: fadeIn 0.3s ease-in-out;
 animation: fadeIn 0.3s ease-in-out;
}
/* The tooltip box */
.cc_tooltip p {
 position: absolute;
 display: none;
 width: 310px;
 height: 120px;
 top: -115px;

 margin-left: 21px;
 text-align: left;
 //background-color: #FFFFFF;
 background-color: rgba(247,247,247,0.85);
 opacity: 0.4;
 padding: 0px;
 border-radius: 5px;
 color: #FFFFFF;
 font-size: 13px;
 line-height: 1.4;
 z-index: 1000;
 white-space: normal;
}
/* The triangle above the help box */
.cc_tooltip p:before {
 position: absolute;
 content: '';
 width: 0;
 height: 0;
 border: 8px solid transparent;
 border-right-color: #333333;
 left: -16px;
 bottom: 4px;
}
.cc_tooltip p:after {
 width: 200px;
 height: 100px;
 content: '';
 position: absolute;
 top: -40px;
 left: 0;
}

/* The tooltip answer/content */
.cc_tooltip_content {
 display: block;
 width: 298px;
 height: 108px;
 padding: 6px;
 border: 3px solid #333333;
 background-color: #FFFFFF;
 opacity: 0.8;
 color: #000000;
 font-size: 11px;
 font-weight: normal;
 border-radius: 5px;
 overflow: hidden;
}
@-webkit-keyframes fadeIn {
 0% { 
  opacity: 0; 
  transform: scale(0.6);
 }
 100% {
  opacity: 100%;
  transform: scale(1);
 }
}
@keyframes fadeIn {
 0% { opacity:0; }
 100% { opacity:100%; }
}