body{background-image:url(../images/background.jpg);background-position: center center; background-attachment: fixed;background-size:cover;
		background-repeat:no-repeat;}
#fbuilder {font-family:"Roboto", "Arial", sans-serif;background-color: rgba(255,255,255,0.5);}
		#fbuilder span.r{color:#ff0000;}
		#fbuilder {
			border: 1px solid #f2f2f2;
			margin: 50px auto 0 auto;
			padding-bottom:20px;
			width:100%;
			max-width:600px;			
		}
		#fbuilder input[type="text"], #fbuilder input[type="number"], #fbuilder select {  
			border: 1px solid #dcdcdc;
			border-radius: 25px;
			font-family: "Roboto","Arial",sans-serif;
			font-size: 14px;
			font-weight: 500;			
			margin: 1px 0;
			padding: 15px;
			width: 62%;
			color:rgb(102, 102, 102);
		}
		#fbuilder select{width: 70%;text-align:center!important;}
		#fbuilder select option{font-size: 15px;line-height:20px;}
		#fbuilder .fields label {
			float: left;
			line-height: 120%;
			width: 25%;
			text-align: right;
			padding: 5px 12px 0 12px;        
			color:rgb(102, 102, 102);
			font-size:12px;
			font-weight:400;
			padding-top:1.5em;
		}
		#fbuilder span.uh {
			font-family: "Roboto","Arial",sans-serif;        
			font-style: italic;
			width: inherit;
			letter-spacing: .02em;
			margin-top: 5px;
		}
		#fbuilder .dfield { float: right !important; width: 65%;position: relative;line-height: 30px;}
		#fbuilder .fields{
			padding: 7px 0;
			clear: both;
		}
		#fbuilder  div.clearer {
			clear: both;
		}

		#fbuilder .calculate-button{
			background-color: #000000;
			border: none;
			color: white;
			padding: 15px 30px;
			text-align: center;
			text-decoration: none;
			display: block;
			font-size: 12px;
			cursor: pointer;
			letter-spacing:2px;
			font-weight:700;
			margin: 20px auto;
			
		}
		#fbuilder .separator{ border:1px solid #f2f2f2;border-bottom:none;width:95%;margin:20px auto;}
		#fbuilder h2{text-align:center;margin:0}
		#fbuilder div.header{background-color: #f2f2f2;border-radius:7px;width:80%;margin:30px auto 20px auto;padding:15px;}
		#fbuilder .slidecontainer {width: 100%;}

		#fbuilder .slider {
		  -webkit-appearance: none;
		  width: 80%;
		  height: 7px;
		  background: #d3d3d3;
		  outline: none;
		  opacity: 0.7;
		  -webkit-transition: .2s;
		  transition: opacity .2s;
		}
		#fbuilder .slider:hover {
		  opacity: 1;
		}
		#fbuilder .slider::-webkit-slider-thumb {
		  -webkit-appearance: none;
		  appearance: none;
		  width: 20px;
		  height: 20px;
		  background: #0066ff;
		  border-radius:3px;
		  cursor: pointer;
		}
		#fbuilder .slider::-moz-range-thumb {
		  width: 20px;
		  height: 20px;
		  background: #0066ff;
		  border-radius:3px;
		  cursor: pointer;
		}
		
		#fbuilder .slider-small {
		  -webkit-appearance: none;
		  width: 68%;
		  height: 7px;
		  background: #d3d3d3;
		  outline: none;
		  opacity: 0.7;
		  -webkit-transition: .2s;
		  transition: opacity .2s;
		}
		#fbuilder .slider-small:hover {
		  opacity: 1;
		}
		#fbuilder .slider-small::-webkit-slider-thumb {
		  -webkit-appearance: none;
		  appearance: none;
		  width: 100px;
		  height: 30px;
		  content:"male";
		  background: #0066ff;
		  border-radius:3px;
		  cursor: pointer;
		}
		#fbuilder .slider-small::-moz-range-thumb {
		  width: 20px;
		  height: 20px;
		  background: #0066ff;
		  border-radius:3px;
		  cursor: pointer;
		}
		#fbuilder p {text-align:center;width:80%;line-height:120%;margin:0;font-size:0.9em;}
		#div-results, #height-inches, #options-calorie-surplus{display:none;}
		
		
		#fbuilder label.container {
		  display: block;
		  position: relative;
		  padding-left: 0px!important;
		  margin-bottom: 12px;
		  cursor: pointer;
		  font-size: 22px;
		  -webkit-user-select: none;
		  -moz-user-select: none;
		  -ms-user-select: none;
		  user-select: none;
		  width:81px!important;
		}


		#fbuilder .container input {
		  position: absolute;
		  opacity: 0;
		  cursor: pointer;
		  height: 0;
		  width: 0;
		  
		}

		#fbuilder .checkmark {
		  position: absolute;
		  top: 0;
		  left: 0;
		  height: 50px;
		  width: 137px;		  
		  border-radius: 25px;  
		}
		#fbuilder .checkmark.small {width: 91px!important;	}
		#fbuilder label.container.small{width:91px!important;padding-right:0!important;}
		
		#fbuilder .container:hover input ~ .checkmark {
		  background-color: #f2f2f2;
		}


		#fbuilder .container input:checked ~ .checkmark {
		  background-color: #cccccc;
		}

		#fbuilder .checkmark:after {
		  content: "";
		  position: absolute;
		  display: none;
		}
		
		#fbuilder .fields label.container {text-align:auto!important;font-size:14px;line-height:120%!important;}

		#fbuilder .container input:checked ~ .checkmark:after {
		  display: block;
		}

		#fbuilder .tooltip-button {
		  position: relative;
		  
		}
		
		#fbuilder .tooltip-button .tooltip-button-text {
			visibility: hidden;
			width: 340px;
			top: 40px;
			left: 50%;    
			line-height: 1.5em;
			transform: translate(-50%,0);
			padding: 10px;
			color: #3c3c3c;
			background-color: #fff8e5;
			font-size: 13px;
			text-align:center;
			border-radius: 8px;
			position: absolute;
			z-index: 99999999;
			box-sizing: border-box;
			box-shadow: 0 1px 8px rgba(0,0,0,.5);
		   
		}
		
		#fbuilder .tooltip-button:hover .tooltip-button-text {
		  /* visibility: visible; */
		}
		
		
		#fbuilder .tooltip {
		  position: relative;
		  display: inline-block;
		}

		#fbuilder .tooltip .tooltiptext {
			visibility: hidden;
			width: 350px;
			top: 40px;
			left: 50%;    
			line-height: 1.5em;
			transform: translate(-50%,0);
			padding: 10px;
			color: #3c3c3c;
			background-color: #fff8e5;
			font-size: 13px;
			font-weight: normal;
			border-radius: 8px;
			position: absolute;
			z-index: 99999999;
			box-sizing: border-box;
			box-shadow: 0 1px 8px rgba(0,0,0,.5);
		   
		}
		#fbuilder .tooltip .tooltiptext ul{text-align:left;padding-left:20px;}

		#fbuilder .tooltip:hover .tooltiptext {
		  visibility: visible;
		}


		#fbuilder .il-icon {
			height: 18px;
			width: 18px;
			display: inline-grid;
			margin-left: 10px;
			margin-right: 10px;
			vertical-align: text-bottom;
		}
		
		#fbuilder .radio-slider {border:1px solid #dcdcdc;height:50px;width:70%;border-radius:25px; text-align:auto!important;}
		
		#fbuilder .pagebreak {display: block;clear: both;page-break-after: always;}
		#button-pdf{
			background-color: #000000;
			border: none;
			color: white;
			padding: 15px 30px;
			text-align: center;
			text-decoration: none;
			display: block;
			font-size: 12px;
			cursor: pointer;
			letter-spacing:2px;
			font-weight:700;
			margin: 20px auto;
		}
		#hidden-button{}
		
		@media screen and (max-width:720px){
			#fbuilder{margin: 10px auto 0 auto;}
			#fbuilder .tooltip .tooltiptext {			
				transform: translate(10%,0);
				width: 200px;
			}
		}
		@media screen and (max-width:525px){
			#fbuilder .tooltip .tooltiptext {			
				transform: translate(0,0);
				width: 200px;
			}
		}