body {margin:0; padding:0;}
.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}


#clac_block {padding:30px; background:#E8EBEC; font-family:'Roboto', Segoe UI;}

#box {text-align:center; margin:0 auto; min-width:600px; border-radius:6px; overflow:hidden; position:relative;}
.shoreline {background:#C0C2C5; font-size:17px; padding:14px;}
canvas {user-select: none;}
#calc {background:#ccc; margin:0; width:100%; height:950px; overflow:hidden; position:relative;}
.hint_txt, #calc_form {text-align:left; font-size:19px; color:#222222; line-height:29px;}
.hint_txt {color:#333; padding:9px; font-size:14px;}
#calc_form {position:absolute; z-index:100; top:80px; left:0; margin:0 auto; text-align:center;}
#calc_form input,.txtf {font-size:19px; border:1px solid #ccc; box-shadow:2px 2px 8px #ddd inset; padding:10px 20px; border-radius:8px; width:400px; margin:15px 0;}
#calc_form textarea {border:1px solid #ccc; box-shadow:2px 2px 8px #ddd inset; padding:10px 2%; font-size:19px; margin:15px auto 0 auto; border-radius:8px; height:200px; max-height:200px; width:70%; max-width:70%; font-family:'Roboto','Segoe UI',Arial,sans-serif;}
#calc_form textarea.two {float:left; width:calc(45% - 8px) !important; max-width:calc(45% - 8px) !important;}
#calc_form textarea.two.first {margin-right:15px;}
.paddedr {padding-right:35px;}
#loader {position:absolute; left:50%; bottom:-150px;}

button,#form input[type='submit'] {background:#0d5da2; border-radius:8px; padding:10px 25px; border:0; border-top:1px solid #76bfff; border-bottom:2px solid #003869; color:#fff; font-size:20px; text-transform:uppercase; font-family:'Roboto','Segoe UI',Arial,sans-serif; cursor:pointer;}
button.yt {background:#d41c1c url(zimg/yt.png) no-repeat right center; background-size:auto 90%; border-radius:12px; padding:20px 100px 20px 25px; border:0; color:#fff; font-size:25px;}
.red {color:#cc0000; font-style:italic; font-weight:bold; padding:10px 0 20px 0;}
#usrdata {text-align:left; padding:30px 0 80px 0;}
#project {position:absolute; top:calc(12.5% + 140px); width:calc(80% - 150px); left:calc(10% + 50px); height:calc(75% - 250px); border:1px solid #ccc; box-shadow:2px 2px 8px #ddd inset; padding:8px; margin:auto; border-radius:8px; font-family:'Roboto','Segoe UI',Arial,sans-serif; font-size:11px; display:none; outline:none;}

@media screen and (max-width:1000px) {
	#clac_block {padding:5px;}
	.shoreline {font-size:14px; padding:7px;}
	#box {min-width:unset;}
	.hint_txt {line-height:19px; font-size:13px; padding:7px;}
}
@media screen and (max-width:500px) {
	#project {width:calc(80% - 18px); left:10%;}
	#calc_form {top:80px; left:10%; margin-left:0; width:calc(80% - 10px);}
	#calc_form input,.txtf {font-size:16px; padding:7px 5px; border-radius:4px; width:100%; margin:10px auto;}
	#calc_form textarea {padding:7px 5px; font-size:16px; margin:15px auto; border-radius:4px; height:150px; width:92%; max-width:92%;}
}
@media screen and (max-height:500px) {
	#calc_form {top:60px;}
	#calc_form input,.txtf {margin:5px auto;}
	#calc_form textarea {padding:7px 5px; margin:5px auto; height:60px;}
}