.pre-alert-message{
  font-size: 30px;
  font-weight: bold;
  line-height: normal;
}
.pre-alert-message .fa{
  font-size: 40px;
}
.wi{
  font-size:35px;
}
#meteo_criteria .col-sm-6{
  padding-top:10px;
}
#sec_alerts{
  background-color: #333333;
  color: white;
  min-height: 800px;
  margin-top: 80px;
  padding-top: 20px;
}
button.active {
  background:#3887BE;
  color:#FFF;
}
button.active:hover {
  background:#3074a4;
}
#map {
  cursor: crosshair;
  width: 95%;
  margin:auto;
}
.popup_map .btn-great {
  margin-top:10px;
  color:#333333;
}
.map_controls .btn-great {
  margin-top:10px;
}
#map:hover + .map_tooltip{
  display:block;
  position:fixed;
  overflow:hidden;
}
.map_tooltip{
  display:none;
  padding:10px;
  border-radius: 5px;
  color : #fff;
  background-color: rgba(50, 50, 50, 0.5);
}
#cloud_overlay_btn, #rain_overlay_btn, #temperatures_overlay_btn, #wind_overlay_btn{
  margin-bottom:10px;
  color: #666;
  font-size: 18px;
  padding: 3px 6px;
  cursor:pointer;
  background-color: rgba(51, 51, 51, 0.9);
}
.legend > div .wi{
  font-size : inherit;
}
.legend > div .fa, .legend > div .wi{
  color: #FFF;
  padding: 2px 0px;
}
.legend > div{
  padding: 2px;
  background-color:rgba(51, 51, 51, 0.9);
}
.legend label,
.legend span {
  display:block;
  float:left;
  height:10px;
  width:13.9%;
  text-align:center;
  font-size:9px;
  margin-top:5px;
  color:white;
}
.wind span,
.wind label{
  width:20%;
}
.map-legends{
  background: none;
  box-shadow:none;
  border-bottom : 1px solid white;
  border-left : 1px solid white;
}
.table_legend{
  float:right;
}
.table_legend td{
  font-size: 10px;
  line-height: 100%;
  color: white;
  font-weight: bold;
  text-align:center;
  height: 20px;
  padding: 5px;
}
.table_legend td .wi{
  font-size: 12px;
}
#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;
}
#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;
  overflow: auto;
}
#forecast_dialog .modal-body
 {
  background-color:#333333;
  color: white;
}
#forecast_dialog .modal-body h3{
  color: white;
  font-weight: bold;
}
#forecast_dialog .modal-body {
  overflow: auto;
}
#forecast_dialog .modal-header h1 {
  margin: 0px;
}
.info_advanced{
  text-align: center;
  font-size: 20px;
  padding: 40px 50px;
  font-weight: bold;
}
.info_advanced .row{
  overflow: auto;
  height:80vh;
  background-repeat: repeat;
  overflow-x: scroll;
}
.map-background > table{
  background: url('../../images/map_background.png');
  background-size: 1860px 1937px;
  background-position: 0px 0px;
  background-repeat: no-repeat;
}
.cs{
  min-width:11px;
  height:16px;
  border: 1px solid rgba(0,0,0,0.15);
}
.cs.selected{
  background-color:rgba(230,40,30,0.3);
}
.alert{
  font-weight:bold;
  color:orange;
  text-align: center;
}
.div_forecast h2{
  color: white;
  font-weight: bold;
  font-size: 30px;
}
.div_forecast h3{
  color: white;
  font-weight: bold;
  font-size: 22px;
}
.div_forecast .previsions{
  color: white;
  font-weight: bold;
  font-size:20px;
}
.div_forecast{
  color: white;
  font-weight: bold;
  font-size: 16px;
}
.forecast24hours thead{
  border: 1px solid grey;
}
.forecast24hours td{
  border-top: 1px solid grey;
  background-color: #080808;
}
.forecast24hours .wi {
  font-size: 25px;
}
.forecast24hours td , .forecast24hours th{
  padding: 5px;
  text-align :center;
}
.label_date{
  padding : 15px 7px 3px 7px !important;
  text-align: center !important;
  font-weight:bold !important;
  border-bottom: 2px solid rgba(255,255,255,.2);
  cursor:pointer;
}
.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;
}
.div_dayhour_selection{
  border-top: 2px solid #fff;
  padding-top: 20px;
  font-weight: 700;
}
.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;
}
.datehourand{
  font-size: 35px;
  font-weight: bold;
}
#div_winddirection, .gust-slider{
    padding-top:40px;
}
.map-checkboxes input.checkb_map_area{
  position: fixed;
  top: 10px;
}
#div_alerts{
  width: 100%;
  margin: auto;
  padding-top: 20px;
}
.item-alert{
  background: rgba(37, 184, 137, 0.7);
  width: 100%;
  min-height: 200px;
  margin: 10px 0px;
  transition: all .6s linear;
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.item-alert.pause{
  background: rgba(221, 119, 68, 0.7);
}
.item-alert.developped {
  z-index: 9999;
  min-height: 1400px;
}
.item-alert .btn-great.modify, .item-alert .btn-great.pause, .item-alert .btn-great.play, .item-alert .btn-great.delete, #div_alerts .btn-great.add{
  border: none;
  border-radius: 0px;
  font-size: 30px;
  margin: 60px 10px 10px 10px;
  transition: transform 0.5s ease;
  border-radius: 100px;
  padding: 16px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.item-alert .btn-great.modify:hover, .item-alert .btn-great.pause:hover, .item-alert .btn-great.play:hover, .item-alert .btn-great.delete:hover, #div_alerts .btn-great.add:hover{
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.item-alert .btn-great.pause{
  background: #dd7744;
}
.item-alert .btn-great.play{
  background: rgba(37, 184, 137, 1);
}
.item-alert .btn-great.delete{
  background: #F44336;
}
#div_alerts .btn-great.add{
  background: rgba(37, 184, 137, 0.7);
}
.item-alert.developped .btn-great.modify{
  box-shadow: 0 -1px 3px rgba(0,0,0,0.12), 0 -1px 2px rgba(0,0,0,0.24);
  transform: rotate(180deg);
}
.item-alert.developped .btn-great.modify:hover{
  box-shadow: 0 -3px 6px rgba(0,0,0,0.16), 0 -3px 6px rgba(0,0,0,0.23);
}
.div-alert-info{
  margin-top: 0px;
  font-weight: bold;
}
.sp_alert_name{
  font-size: 30px;
  margin-bottom: 10px;
}
.alert-tuto{
  font-size: 30px;
  margin-top: 10px;
}
.pre-alert-message .fa-user{
  cursor: pointer;
}
@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: 3px 0px;
  }
}
#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;
  }
  .item-alert.developped {
    min-height: 2000px;
  }
  .item-alert .btn-great.modify, .item-alert .btn-great.pause, .item-alert .btn-great.play, .item-alert .btn-great.delete, #div_alerts .btn-great.add{
    border: none;
    border-radius: 0px;
    font-size: 20px;
    margin: 10px;
    transition: transform 0.5s ease;
    border-radius: 100px;
    padding: 7px 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  }
}