#widgets-page {
  padding-bottom: 20px;
}

#widgets-page h2 {
  color         : #145e9a;
  font-size     : 22px;
  line-height   : 22px;
  padding-bottom: 5px;
  border-bottom : 1px solid #d3d3d3;
  font-weight   : 700;
  font-family   : "Quicksand", sans-serif;
  margin-bottom : 20px;
}

#widgets-page .widgets-list li.with_border {
  border-bottom : 1px solid #d3d3d3;
  padding-bottom: 20px;
  margin-bottom : 20px;
}

#widgets-page .widgets-list p {
  font-size  : 14px;
  line-height: 30px;
}

#widgets-page .widgets-list textarea {
  width : 50%;
  height: 122px;
}

#widgets-page .widgets-list iframe {
  margin-left: 20px;
}

@media screen and (max-width: 1023px) {
  #widgets-page .widgets-list textarea {
    width : 100%;
    height: 100px;
  }

  #widgets-page .widgets-list iframe {
    margin-left: 0px;
    margin-top : 20px;
  }
}

#widget {
  width          : 298px;
  height         : 120px;
  border         : 1px solid #ededed;
  display        : block;
  text-decoration: none;
  position       : relative;
}

#widget:not(.widget_france):after {
  content     : "";
  background  : url("../../../../../modules/custom/mf_widget_vigilance/img/logo_mf_small.png");
  width       : 40px;
  height      : 40px;
  display     : block;
  margin-right: 10px;
  position    : absolute;
  top         : 6px;
  right       : -3px;
}

#widget .minimap {
  float       : left;
  margin-right: 10px;
  width       : 71px;
  height      : 75px;
}

#widget .zone {
  color         : #145e9a;
  font-size     : 15px;
  line-height   : 22px;
  padding-bottom: 8px;
  font-weight   : 500;
  font-family   : "Quicksand", sans-serif;
  width         : 127px;
  display       : inline-block;
  margin        : 3px 0 0 0;
  height        : 44px;
}

#widget .zone span {
  color: #333333;
}

#widget p {
  font-size: 12px;
  color    : #333333;
  padding  : 0;
  margin   : 0;
}

#widget p.level {
  margin: -3px 0 0 0;
}

#widget p.italic {
  font-style: italic;
  margin    : 0px 0 8px 0;
}

#widget ul {
  margin-left: 8px;
  display    : flex;
  align-items: center;
}

#widget ul li {
  list-style   : none;
  width        : 30px;
  height       : 25px;
  border-radius: 4px;

  background-color: #31aa35;
  position        : relative;
  overflow        : hidden;
  text-align      : center;
  line-height     : 30px;
}


#widget ul li.stipes:before {
  content   : "";
  position  : absolute;
  width     : 100%;
  height    : 100%;
  top       : 0;
  left      : 0;
  background: repeating-linear-gradient(-45deg, #F5F3C2, #F5F3C2 5px, transparent 5px, transparent 10px);
  z-index   : 1;
}

#widget ul li:not(:last-child) {
  margin-right: 2px;
}

#widget i {
  display         : inline-flex;
  background-image: url(../../../../../modules/custom/mf_widget_vigilance/img/sprites.png);
  position        : relative;
  z-index         : 5;

}


/** vent **/
#widget i.type_1 {
  background-position: 0px -119px;
  width              : 21px;
  height             : 17px;

}

/** pluie **/
#widget i.type_2 {
  background-position: -25px -100px;
  width              : 27px;
  height             : 15px;

}

/** orage **/
#widget i.type_3 {
  background-position: -100px -119px;
  width              : 15px;
  height             : 15px;


}

/** crue **/
#widget i.type_4 {
  background-position: -28px -68px;
  width              : 30px;
  height             : 11px;

}

/** neige **/
#widget i.type_5 {
  background-position: -52px -100px;
  width              : 27px;
  height             : 15px;

}


/** canicule **/
#widget i.type_6 {
  background-position: -157px -107px;
  width              : 8px;
  height             : 21px;

}

/** froid **/
#widget i.type_7 {
  background-position: -157px -86px;
  width              : 8px;
  height             : 21px;
}

/** avalanche **/
#widget i.type_8 {
  background-position: 0px -100px;
  width              : 25px;
  height             : 19px;

}

/** submersion **/
#widget i.type_9 {
  background-position: -58px -68px;
  width              : 22px;
  height             : 10px;

}

/** cyclone **/
#widget i.type_10 {
  background-position: -43px -119px;
  width              : 21px;
  height             : 16px;

}

/* Forte Houle */
#widget i.type_11 {
  background-position: -58px -68px;
  width              : 22px;
  height             : 10px;
}

/* Fortes Pluies-orages */
#widget i.type_12 {
  background-position: -21px -119px;
  width              : 22px;
  height             : 16px;
}

/* Verglas */
#widget i.type_13 {
  background-position: -58px -68px;
  width              : 22px;
  height             : 10px;
}

/* Mer dangereuse à la côte*/
#widget i.type_14 {
  background-position: -58px -68px;
  width              : 22px;
  height             : 10px;
}

/* BMS */
#widget i.type_16 {
  background-position: -58px -68px;
  width              : 22px;
  height             : 10px;
}

/* Alerte Cyclonique */
#widget i.type_18 {
  background-position: -58px -68px;
  width              : 22px;
  height             : 10px;
}

/** RESET **/
body,
ul {
  padding: 0;
  margin : 0;
}

#toolbar-administration,
#drupal-live-announce {
  display: none;
}

/* WIDGET FRANCE */
#widget.widget_france:after {
  content: "Meteo France";
  font-family: "Quicksand", sans-serif;
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 8px;
  line-height: 14px;
  text-transform: uppercase;
  width: 82px;
  height: 14px;
  text-align: center;
  font-weight: 700;
  color: #ffffff;
  background: #145e9a;

}

#widget.widget_france .zone {
  font-size     : 12px;
  line-height   : 16px;
  font-weight   : 700;
  padding-left  : 3px;
  padding-top   : 2px;
  padding-bottom: 0;
  display       : block;
  text-transform: uppercase;
  margin        : 0;
  height        : auto;
  width         : auto;
}

#widget.widget_france #minimaps_wrapper {
  display: flex;
  justify-content: space-evenly;
}

#widget.widget_france #minimaps_wrapper .minimap,
#widget.widget_france #minimaps_wrapper .minimap2 {
  float: none;
  margin: 0;
  text-align: center;
  width: 80px;
  height: 93px;
}

#widget.widget_france #minimaps_wrapper .minimap2 p,
#widget.widget_france #minimaps_wrapper .minimap p {
  color: #145e9a;
  font-size: 12px;
  line-height: 10px;
  font-family: "Quicksand", sans-serif;
  margin-top: 1px;
  margin-bottom: -2px;
}

#widget.widget_france #minimaps_wrapper .minimap2 img,
#widget.widget_france #minimaps_wrapper .minimap img {
  max-width: 100%;
  height: auto;
}

#widget.widget_france p.italic {
  margin-left: 3px;
  color: #666666;
  font-family: "Quicksand", sans-serif;
  font-size: 10px;
  margin-top: -4px;
}