.wi{
  font-size:35px;
}
#meteo_criteria .col-sm-6{
  padding-top:10px;
}
#div_advanced{
  background-color: #333333;
  color: white;
  min-height: 800px;
  margin-top: 50px;
}
button.active {
  background:#3887BE;
  color:#FFF;
}
button.active:hover {
  background:#3074a4;
}
.popup_map .btn-great {
  margin-top:10px;
  color:#333333;
}
.map_controls .btn-great {
  margin-top:10px;
}
#table_hour_selection{
  margin: 0 auto;
}
#div_hour_selection{
  border-top:2px solid white;
}
#table_hour_selection:hover + .advacedHourSelection_tooltip{
  display:block;
  position:fixed;
  overflow:hidden;
}
.advacedHourSelection_tooltip{
  display:none;
  padding:10px;
  border-radius: 5px;
  color : #333;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 50;
}
#meteo_criteria label{
  background-color: rgba(255,255,255, 0.2);
  border-radius: 100px;
  cursor:pointer;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
html.non-touch #meteo_criteria label:hover{
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
#meteo_criteria label.col-font{
  background-color: rgba(0,0,0, 0);
}
#div_winddirection label, #div_date table label{
  box-shadow: 0px 0px 1px #888888;
  min-width:35px;
  border-radius: 4px;
}
#div_winddirection label{
  min-height:30px;
}
#div_winddirection{
  text-align:center;
}
.label_winddir_subm{
  cursor: pointer;
}
#div_winddirection table{
  margin: 0 auto;
}
#div_winddirection td{
  text-align: center;
  vertical-align: middel;
  padding: 0px 3px;
}
.winddir{
  font-size: 12px;
}
.slider_details{
  background-color:white;
  color:#333333;
  overflow: auto;
}
#forecast_dialog .modal-body
 {
  background-color:#333333;
  color: white;
}
.info_advanced{
  text-align: center;
  font-size: 20px;
  padding: 40px 50px;
  font-weight: bold;
}
.alert{
  font-weight:bold;
  color:orange;
}
.label_date{
  padding : 10px 5px 0px 5px !important;
  text-align: center !important;
  font-weight:bold !important;
  border-bottom: 2px solid rgba(255,255,255,.2);
  cursor:pointer;
}
#table_hour_selection .today{
  background-color: rgba(20,220,20,.2);
}
.label_datehour{
  padding : 0px;
  margin : 0px;
}
.label_hour{
  padding : 0px !important;
  margin : 0px !important;
  text-align: center !important;
  text-align: center !important;
  font-weight: normal !important;
}
.recurent_searches div{
  border-top: 2px solid #fff;
  font-size:16px;
  font-weight: bold;
}
.recurent_searches .btn-great{
  padding: 10px 20px;
  margin-top: 10px;
}
.formadv_search_submit{
  cursor:pointer;
}
.checkb_date, .checkb_date_subm,
.checkb_hour, .checkb_hour_subm,
.checkb_datehour,
.checkb_temperatures_subm,
.checkb_sky_subm,
.checkb_cloudcover_subm,
.checkb_precipitation_subm,
.checkb_lightning_subm,
.checkb_wind_subm,
.checkb_winddir_subm,
.checkb_sea_subm,
.checkb_distance_subm{
   position: absolute;
   left: -9999px;
}
.wi-checkb {
  margin: 15px 9px;
}
.datehourand{
  font-size: 35px;
  font-weight: bold;
}
#div_winddirection, .gust-slider{
    padding-top:40px;
}
.map-overlay {
  top: inherit;
}
.td_hour_selection_column{
  vertical-align: top;
}
#btn_search {
  transition: all 0.2s ease;
}
#btn_search span{
  font-size: 26px;
}
#btn_search.fixedBottomRightCorner{
  position: fixed;
  bottom: 30px;
  border-radius: 100px;
  padding: 14px 17px;
  transition: all 0.2s ease;
}
#btn_search.fixedBottomRightCorner span{
  font-size: 34px;
}
@media (min-width: 768px){
  #cloud_overlay_btn, #rain_overlay_btn, #temperatures_overlay_btn, #wind_overlay_btn {
    font-size: 24px;
    padding: 5px 10px;
  }
  .legend > div .fa, .legend > div .wi{
    padding: 12px 0px;
    width: 48px;
  }
  #div_advanced{
    margin-top: 81px;
  }
}
#map{
  height : 70vh;
  height : calc(80vh - 80px);
}
@media (max-width: 991px) and (min-width: 768px){
  .slider.slider-horizontal{
    width : 70%;
    margin-top : 18px;
  }
}
@media (max-width: 767px){
  .info_advanced{
    font-size:12px;
  }
  #map{
    height : 80vh;
    height : calc(80vh - 50px);
    width: 100vw;
  }
  #btn_search.fixedBottomRightCorner{
    right: 10px;
    bottom: 10px;
  }
}
@media (max-width: 480px){
  #table_hour_selection{
    font-size:10px;
  }
}
.section-advanced {
  padding-top: 0px;
}
.text-center-col {
  text-align: center;
}
.table-hour-selection {
  border-top: 2px solid white;
  margin: 0 auto;
}
.icon-stats {
  font-size: 26px;
}
.criteria-container {
  text-align: center;
}
.alert-button-container {
  text-align: center;
}
.city-input-large {
  font-weight: bold;
  color: white;
  font-size: 32px;
}