/**
  99-grenoble.css
  Récupération des styles utiles dans les fichiers 
  CSS de la Métro
  Éric Demeester : 2018-09-17
*/

/** 
  Emplacement polices FontAwesome :
  ../fonts/
*/
@font-face{
    font-family:"FontAwesome";
    src:url("../fonts/fontawesome-webfont.eot");
    src:url("../fonts/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), 
        url("../fonts/fontawesome-webfont.woff") format('woff'), 
        url("../fonts/fontawesome-webfont.ttf") format('truetype'), 
        url("../fonts/fontawesome-webfont.svg#FontAwesome") format('svg');
    font-weight:normal;
    font-style:normal;
}

.calculs {
  text-align: center;
  background-color: #F4F4F4; /*#FFFDEA;*/
  border: 1px solid #AAAAAA; 
  margin: 10px 20px 0 0;
  min-height: 20px;
  padding: 10px;
}

/* avertissement javascript */
.alerte-js {
  padding: 0.7em;
  background-color: #EBECED;
  text-align: center;
}

.alerte-js p{
  margin:0;
  padding:0;
  color: red;
}

/* bouton jaune cliquable */
.btnJaune {
  width: 100%;
  margin-right: 20px;
}

/* remarque en italique */
.remarque {
  font-size: smaller;
  font-style: italic;
}

span.required {
    color: red;
    margin-left: 0.7ex;
    position: relative;
    top: -0.2ex;
    font-weight: normal;
}

/* surcharge css Grenoble */
#bandeauBas .pictoFooter{
    background:url("../images/picto_footer.png") no-repeat 20px 0;
}

#bandeauBas .bandeauBasWrap .bandeauBasGroupeBloc .coordonnees > div.blocAdresse::before{
  width:21px;
  background:url("../images/picto_adresse.svg") no-repeat 0 0;
}

#bandeauBas .bandeauBasWrap .bandeauBasGroupeBloc .coordonnees > div.blocHoraire::before{
  background:url("../images/picto_horaire.svg") no-repeat 0 0;
}

@media screen and (max-width: 1024px){
  #bandeauBas .innerCenter{
    background-size:100px auto;
  }
  #bandeauBas .pictoFooter{
      background-position:50% 60px;
  }
}

/* champ erreur formulaire */
div.error {
    color: red;
    font-weight: normal;
    font-style: italic;
    /*font-size: smaller;*/
    background: transparent url(../images/dialog-warning.png) top left no-repeat;
    padding-left: 22px;
    margin-left: 5px;
}

/* champ erreur remplissage page */

div.errornotice {
  margin-bottom: 0;
  /*
  color: red;
  background-color: #E6E6E6;
  border-bottom: 1px solid #93989D;
  */
}

/* Boîte d'affichage habitants + litrage */
.affichecalculs {
  /*background: #ECECEC; /*#F9F9F9;*/
  text-align: center;
  margin: 10px 15px 0 0;
  padding: 5px 0 5px 10px;
  border: 1px solid #AAAAAA;
}

.affichecalculs label {
  /*font-size: smaller;*/
  font-weight: lighter;
}


/* Personnalisation champs radio ---------------------------------------------*/
 
 /* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  /*font-size: 22px;*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: white; /*#eee;*/
  border: 1px solid black;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: black; /*#FFEC44; /*#2196F3;*/
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Fin personnalisation champs radio ----------------------------------------*/


/* largeur de champs */

.p30 {
  width: 30%;
}

.p50 {
  width: 50%;
}

.p60 {
  width: 60%;
}

.p70 {
  width: 70%;
}

.p85 {
  width: 85%;
}

.p90 {
  width: 90%;
}

.p95 {
  width: 95%;
}


@media screen and (max-width: 1024px){
  .p30 {
    width: 90%;
  }
  .p50 {
    width: 90%;
  }
  .p60 {
    width: 60%;
  }
  .p70 {
    width: 90%;
  }
  .p85 {
    width: 85%;
  }
  .p90 {
    width: 90%;
  }
  .p95 {
    width: 90%;
  }
}
  
@media screen and (max-width: 700px){
  .p30 {
    width: 100%;
  }
  .p50 {
    width: 100%;
  }
  .p60 {
    width: 100%;
  }
  .p70 {
    width: 100%;
  }
  .p85 {
    width: 100%;
  }
  .p90 {
    width: 100%;
  }
  .p95 {
    width: 100%;
  }
}