@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700;800;900&display=swap');

* { box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; color: #444444; line-height: 1.6; font-size: 16px; background: #f9ebe3; padding-top: 20px; padding-bottom: 90px; }

.container {}
.wrapper { margin-left: auto; margin-right: auto; max-width: 450px; width: 100%; padding-left: 15px; padding-right: 15px;  }
a { color: #444; }	
	
h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 300;  }	
h3.bold, h4.bold, h5.bold { font-weight: 700;}
h1 { text-align: center; margin-bottom: 10px; margin-top: 10px; }	
h2 { text-align: center; margin-bottom: 10px; margin-top: 10px; }	
h3 { text-align: center; margin-bottom: 10px; margin-top: 10px; }	
h4 { text-align: center; margin-bottom: 10px; margin-top: 30px;  }	
h5 { text-transform: uppercase; text-align: center; margin-bottom: 0px; margin-top: 20px; }
h6 { text-transform: uppercase; text-align: center; margin-bottom: 0px; margin-top: 0px; }
.subtitle { text-align: center; }


.input-wrap { margin-top: 50px; }

.bmiDisplay-wrap { width: 120px; height: 120px; background: #C18679; color: #fff; margin-left: auto; margin-right: auto; border-radius: 50%; padding-top: 28px; }
.bmiDisplay-wrap #bmi-text { display: block; display: block;font-size: 13px;  }
.bmiDisplay-wrap #bmi-no { display: block;font-size: 22px; font-weight: 700;  }

.input-text { margin-bottom: 20px; }
.input-text label { display: block; text-align: center; margin-bottom: 10px; }
.input-text input[type=number] { font-size: 16px; background: #fff; border: none; border-radius: 10px; display: block; text-align: center; width: 100%; max-width: 100%; padding: 20px; }	

.input-check { margin-bottom: 20px; }
.input-check label { font-size: 15px; background: #fff; border: none; border-radius: 10px; display: block;  width: 100%; max-width: 100%; padding: 20px; }
.input-check input[type=checkbox] { margin-right: 10px; height: 16px; width: 16px; position: relative; bottom: -2px; }	
.input-check input[type=radio] { margin-right: 10px; height: 16px; width: 16px; position: relative; bottom: -2px; }	

select { font-size: 16px; background: #fff; border: none; border-radius: 10px; display: block;  width: 100%; max-width: 100%; padding: 20px; -webkit-appearance: none; }


/*
.input-check-simpel { margin-bottom: 20px; }
.input-check-simpel label { font-size: 15px; display: block; width: 100%; max-width: 100%; margin-bottom: 0px; }
.input-check-simpel label span { float: left; width: calc(100% - 50px); padding-top: 3px; padding-left: 5px; }
.input-check-simpel input[type=checkbox] { float: left; margin-right: 10px; height: 20px; width: 20px; position: relative; bottom: -2px; }	
.input-check-simpel input[type=radio] { float: left; margin-right: 10px; height: 22px; width: 22px; position: relative; bottom: 0px; }	
*/


.submit { margin-top: 40px; }
.submit input[type=submit] { font-size: 16px; background: #C18679; border: none; border-radius: 100px; display: block; text-align: center; width: 100%; max-width: 450px; padding: 20px; color: #fff; text-decoration: none; margin-left: auto; margin-right: auto; cursor: pointer;  }
.submit input[type=submit]:disabled { cursor: not-allowed; opacity: 50%; }	
.submit.float { margin-top: 70px; position: fixed; bottom: 0px; left: 0px; width: 100%; padding: 15px; padding-top: 0px; z-index: 99999 !important; }	 
	 
	 
@media screen and (max-width: 1000px) { 

	 .submit.float { margin-top: 70px; position: fixed; bottom: 0px; left: 0px; width: 100%; padding: 15px; padding-top: 0px; z-index: 99999 !important; }	 
	 
}	
	
	
.progressbar  { background: rgba(193, 134, 121, 0.5); width: 100%; position: absolute; top: 0px; left: 0px; text-align: center; display: block; font-size: 10px; }
.progressbar span { display: block; background: #C18679; color: #fff; }
.progressbar.progress-step1 span { width: 20%;  }
.progressbar.progress-step2 span { width: 40%; }
.progressbar.progress-step3 span { width: 60%; }
.progressbar.progress-step4 span { width: 80%; }
.progressbar.progress-step4e1 span { width: 90%; }
.progressbar.progress-step4e2 span { width: 95%; }
.progressbar.progress-step5 { display: none; }
	
	
	
	
.result { text-align: center; }
.result .result-icon { margin-bottom: 20px; }
.result .result-icon.green i { color: #61a873; }
.result .result-icon.red i { color: #C18679; }
.result .result-icon i { font-size: 52px; }

.result .result-info { background: #fff; border-radius: 20px; padding-top: 20px; padding-bottom: 20px; margin-top: 30px; margin-bottom: 20px; }
.result .result-info hr { margin-top: 30px; margin-bottom: 30px; border: none; border-top: 1px dashed #ccc; }
.result .result-info .left { float: left; width: 50%; border-right: 1px dashed #444; padding-left: 10px; padding-right: 10px; }	
.result .result-info .right { float: right; width: 50%; padding-left: 10px; padding-right: 10px;  }	
	
.result .more { margin-top: 30px; margin-bottom: 30px; }
.result .more .bullet { text-align: left; }
.result .more .bullet i { color: #61a873; font-size: 20px; }
.result .more .bullet span { float: right; display: block; width: calc(100% - 35px); font-size: 14px; margin-bottom: 20px;  }

.result .more2 { margin-top: 20px; margin-bottom: 30px; background: #fff; border-radius: 20px; padding: 20px; }
.result .more2 .bullet { text-align: left; }
.result .more2 .bullet i { color: #c18679; font-size: 20px; }
.result .more2 .bullet span { float: right; display: block; width: calc(100% - 35px); font-size: 14px; margin-bottom: 20px;  }


.data { background: #eaeaea; padding: 10px; position: absolute; z-index: 999; bottom: 0px; right: 0px; opacity: 0.4; display: none !important; }
.data:hover { opacity: 1;  }



.cta { margin-top: 60px; position: fixed; bottom: 0px; left: 0px; width: 100%; padding: 15px; padding-top: 70px; background: rgb(252,244,239);
	background: linear-gradient(180deg, rgba(252,244,239,0) 0%, rgba(252,244,239,1) 100%); z-index: 99999 !important; }
.cta a {font-size: 16px; background: #61a873; border: none; border-radius: 100px; display: block; text-align: center; width: 100%; max-width: 450px; padding: 20px; color: #fff; text-decoration: none; margin-left: auto; margin-right: auto; }
.cta.red a {background: #C18679;  }



@keyframes shake {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
	}
	10%, 30%, 50%, 70%, 90% {
		transform: scale(0.98);
		opacity: 0.9;
	}
	20%, 40%, 60%, 80% {
		transform: scale(1.02);
		opacity: 1;
	}
}




.shake {
	animation: shake 1s;
	animation-delay: 6s;
	scale: 1;
	animation-timing-function: ease-in-out;
}


.fade { opacity: 0; transition: opacity 1s ease-out; }
.fade1 { transition-delay: 0.20s; }
.fade2 { transition-delay: 0.60s; }
.fade3 { transition-delay: 1.00s; }
.fade4 { transition-delay: 4.00s; }