/*     Code pour la page Calcul IMC     */
/*  Fait le 10/12/2022 par Paulo Silva  */
/*           https://paulo.lu           */

/* **** **** **** **** **** **** **** **** **** **** **** */
/*    Début code section pour le formulaire calcul IMC    */
/* **** **** **** **** **** **** **** **** **** **** **** */

.divcalcform {
/*	position: relative;*/
	width: 560px;
	height: auto;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px 7px 10px;
	line-height: 1.7;
	background-color: #e9e9e9;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-ms-border-radius: 10px;
	border-radius: 10px;
	border: double #0000FF;
}

@media only screen and (max-width: 600px) {
	.divcalcform {
	width: auto;
	margin-top: 0px;
	margin-left: 24px;
	margin-right: 24px;
  }
}

@media only screen and (min-width: 600px) {
	.divcalcform {
	width: auto;
	margin-top: 0px;
	margin-left: 10%; /*15%; /*25%; changé 03/03/2023 */
	margin-right: 10%; /*15%; /*25%; changé 03/03/2023 */
  }
}

@media only sceen and (min-width: 750px) and (max-width: 950px) {
	.divcalcform {
/*    width:  89.9999% !important;*/
	width: auto;
	margin-top: 0px;
	margin-left: 5%; /*25%; changé 01/03/2023 */
	margin-right: 5%; /*25%; changé 01/03/2023 */
  }
}

@media only screen and (min-width: 951px) {
	.divcalcform {
	width: auto; /*89.99999%;*/
	margin-top: 0px;
	margin-left: 20%; /*25%; changé 01/03/2023 */
	margin-right: 20%; /*25%; changé 01/03/2023 */
  }
}

/* zone de texte, en-tête, boutons de navigation et box photo des pages photo au hasard */
@media only screen and (min-width: 992px) {
	.divcalcform {
	margin-top: 0px;
	margin-left: auto; /* 0px; /* changé 01/03/2023  */
	margin-right: auto; /* 0px; /* changé 01/03/2023  */
	margin-bottom: 5px;
	width: 99.99999%;
  }
}

#hauteur {
	height: 32px;
	width: 90px;
	border: 2px solid #1746AC;
	font-size: 16px;
	padding: 5px;
	border-radius: 7px;
}

#hauteur:focus {
	background-color: #E1F1F9;
	border: 2px solid #0020BE;
	box-shadow: 0px 0px 7px #0020BE;
}

#pk {
	height: 32px;
	width: 90px;
	border: 2px solid #1746AC;
	font-size: 16px;
	padding: 5px;
	border-radius: 7px;
}

#pk:focus {
	background-color: #E1F1F9;
	border: 2px solid #0020BE;
	box-shadow: 0px 0px 7px #0020BE;
}
  
#imc {
	display: flex;
	align-items: center;
	justify-content: center;/**/
	width: 70%;
	height: 40px;
	font-size: 16px;
	vertical-align: middle;
	border: #0000ff double;
	background-color: #FFFFFF;
	margin-top: 5px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	-webkit-border-radius: 4px;	
	-moz-border-radius: 4px;
	border-radius: 4px;
  }

#imc span {
	display: flex;
	align-items: center;
	justify-content: center;/**/
	vertical-align: middle;
/*	display: table-cell;*/
}

.colorfieldset {
	-webkit-background-clip: fieldset;
	-webkit-text-fill-color: transparent;
	background-image: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
  }

/* Colonne milieu plus large*/
.colonnemilieucalc {
  float: none;
  width: 79.9999%;
  margin-left: auto;
  margin-right: auto;
/*  background-color: #green; /* #f1f1f1; */
}

/* écran smartphone */
@media only screen and (max-width: 600px) {
   .colonnemilieucalc {
    float: none;/* */
    width: 99.9999%;
	margin-left: auto;
	margin-right: auto;
/*	background-color: green;*/
  }
}

/* écran tablette portrait et smartphone large */
@media only screen and (min-width: 600px) {
   .colonnemilieucalc {
    float: none;/* */
    width: auto; /*89.9999%; /* changé 01/03/2023  */
	margin-left: auto;
	margin-right: auto;
/*	background-color: green;*/
  }
}

@media only screen and (min-width: 750px) and (max-width: 930px) {
	.colonnemilieucalc {
    float: none;/* */
    width: auto; /* 89.9999%;*/
	margin-left: auto;
	margin-right: auto;
  }
}
	
@media only screen and (min-width: 931px) {
   .colonnemilieucalc {
    float: none; /**/
    width: 79.999%; /* auto; /* 79.9999%;*/
	margin-left: auto;/* 5%; */
	margin-right: auto; /* 5%; */
/*	background-color: orange;*/
  }
}

@media only screen and (min-width: 1200px) {
   .colonnemilieucalc {
    float: none; /**/
    width: 69.999%; /* auto; /* 79.9999%;*/
	margin-left: auto;/* 5%; */
	margin-right: auto; /* 5%; */
/*	background-color: orange;*/
  }
}

table {
	border: 2px solid;
	-webkit-border-radius: 12px;	
	-moz-border-radius: 12px;
	border-radius: 12px;
	cellspacing: 15px;
	margin-left: auto;
	margin-right: auto;
  }

/* tableau responsive */
@media only screen and (max-width: 600px) {
	table {
    width: 89.9999%; /*96.9999%;*/
  }
}

@media only screen and (min-width: 600px) {
	table {
    width: 89.999%; /*69.9999%; changé 01/03/2023 */
	margin-left: auto;
	margin-right: auto;
  }
}

@media only screen and (min-width: 768px) {
	table {
    width: 69.999%; /*69.9999%; changé 01/03/2023 */
    width: auto;
  }
}

tr  {
	margin-top: 5px;
	padding: 12px;
  }

td  {
	border: 1px solid;
	-webkit-border-radius: 6px;	
	-moz-border-radius: 6px;
	border-radius: 6px;
	padding-left: 0px; /* ajouté 01/03/2023  */
	padding-right: 0px; /* ajouté 01/03/2023  */
  }

.tableaux1  {
	display: inline-block;
	width: auto;
	margin-top: 10px;
	margin-bottom: 15px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 0px;
  }

.tableaux2  {
	display: inline-block;
	vertical-align: top;
	margin-top: 0px;
	margin-right: -5px;
	padding-top: 10px;
	padding-bottom: 14px;
  }

/* tableau responsive */
@media only screen and (max-width: 600px) {
	.tableaux1 {
    width: 99.9999%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0px;
	padding-right: 0px;
  }
}

/* tableau responsive */
@media only screen and (min-width: 600px) {
	.tableaux1 {
	display: inline-block; /* ajouté 01/03/2023  */
	margin-left: auto;
	margin-right: auto;
  }
}

/* tableau responsive */
@media only screen and (max-width: 600px) {
	.tableaux2 {
    width: 99.9999%;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: -5px;
	padding-top: 0px;
	padding-bottom: 20px;
  }
}

/* tableau responsive */
@media only screen and (min-width: 600px) {
	.tableaux2 {
	display: inline-block; /* ajouté 01/03/2023  */
	margin-left: auto;
	margin-right: auto;
  }
}

/* tableau responsive */
@media only screen and (min-width: 768px) {
	.tableaux2 {
	display: inline-block; /* ajouté 01/03/2023  */
	margin-left: auto; /* ajouté 01/03/2023  */
	margin-right: auto; /* ajouté 01/03/2023  */
	padding-left: 12px;
  }
}

#nouveaucalcul {
	width: 100%;
	height: auto;
	margin: auto;
	padding: 0px;
  }
 
/* ***************************************************************************** */
/*   Voir à la fin du fichier les codes pour .boutonnavcalc et .boutonnouvcalc   */
/*   pour mettre le symbole de la calculatrice avant le texte "Nouveau calcul"   */
/* ***************************************************************************** */

.boutonnavcalc {
	display: block;
	background-color: #DDDDDD;
	border: none;
	width: 100%;
	height: auto;
	padding-top: 5px;
	padding-bottom: 6px;
	text-decoration: none;
	font: 14px Verdana, sans-serif;
	letter-spacing: 1px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	-webkit-transition: background-color 0.4s;
	-moz-transition: background-color 0.4s;
	-ms-transition: background-color 0.4s;
	transition: background-color 0.4s;
	-webkit-transition-duration: 0.4s;
	-moz-transition-duration: 0.4s;
	-ms-transition-duration: 0.4s;
	transition-duration: 0.4s;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-ms-border-radius: 8px;
	border-radius:  8px;
	cursor: pointer;
	outline: none;
  }
 
.boutonnouvcalc {
	width: 80%;
	height: auto;
	margin-top: 15px;
	margin-bottom: 15px;
	margin-left: auto;
	margin-right: auto;
	padding-top: 5px;
	padding-bottom: 6px;
	color: #0000FF !important;
	background-color: #DDDDDD;
	border: 2px solid #1F85E0 !important;
	outline: none;
  }

.boutonnouvcalc:hover {
	background-color: #608FE8;
	padding-top: 5px;
	padding-bottom: 6px;
	color: white !important;
	-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	-moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);	
	-ms-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.18);
	outline: none;
  }

input[type=text] {
	width: 75%;
	height: 70%;
	margin-top: 5px;
	padding: 5px;
	color: #000000;
	text-align: center;
	font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
	font-size: 0.9rem;
	border: 1px solid #ccc;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-ms-border-radius: 7px;
	border-radius: 7px;
	resize: none;
	outline: none;
  }

input[type=text]:focus {
	background-color: #E1F1F9;
  }

input[type=tel] {
	width: 75%;
	height: 70%;
	margin-top: 5px;
	padding: 5px;
	color: #000000;
	text-align: center;
	font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", Geneva, sans-serif;
	font-size: 0.9rem;
	border: 1px solid #ccc;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-ms-border-radius: 7px;
	border-radius: 7px;
	resize: none;
	outline: none;
  }

input[type=tel]:focus {
	background-color: #E1F1F9;
  }

label {
	height: 14px;
	line-height: 14px;
	margin-left: auto;
	margin-right: auto;
	padding: 10px 10px 10px 10px;
	text-align: center;
	display: inline-block;
	outline: none;
  }

::-moz-placeholder {
	opacity: 0.3;
	text-align: center;
	vertical-align: middle;
	font-size: 13px;
  }

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	vertical-align: middle;
	font-size: 13px;
  }

placeholder {
	color: #FF0000;
	text-align: center;
	vertical-align: middle;
	font-size: 13px;
  }

input[type=submit] {
	-webkit-appearance: none;
	background-color: #1B77CB;
	color: white;
	height: 38px;
	line-height: 38px;
	padding: 0px 20px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	float: right;
	outline: none;
  }

input[type=submit]:hover {
	-webkit-appearance: none;
	background-color: #4B95E7;
	outline: none;
  }

input[type=reset] {
	-webkit-appearance: none;
	background-color: #4B95E7;
	color: white;
	text-decoration: none;
	height: 25px;
	vertical-align: middle;
	padding: 0px 10px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	float: left;
	outline: none;
  }

input[type=reset]:hover {
	-webkit-appearance: none;
	background-color: #89BAEF;
	text-decoration: none;
	outline: none;
  }

.conteneurform {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	border-radius: 5px !important;
	padding-top: 5px;
	padding-bottom: 10px;
	padding-left: 5px;
	padding-right: 5px;
	outline: none;
  }

.clearfix::after {
	content: "";
	display: table;
	clear: both;
  }

/* formulaire responsive */
@media only screen and (max-width: 600px) {
	input[type=submit] {
	background-color: #005CB9;
	width: 49.99999%;
	height: 42px;
	font-size: 14px;
	margin-top: 0px;
  }
}

/* formulaire responsive */
@media only screen and (max-width: 600px) {
	input[type=submit]:hover {
	background-color: #4B95E7;
	width: 49.99999%;
	height: 42px;
	margin-top: 0px;
  }
}

/* formulaire responsive */
@media only screen and (max-width: 600px) {
	input[type=reset] {
	font-size: 12px;
  }
}

/* div(s)texte... responsives */
@media only screen and (max-width: 992px) {
	.divtexteimage4, .divtexteimage5 {
	margin-top: 10px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	width: 99.99999%;
  }
}

/* **** **** **** **** **** **** **** **** **** */
/*    Fin code pour le formulaire calcul imc    */
/* **** **** **** **** **** **** **** **** **** */