html {
	font-family: Trebuchet MS,verdana,tahoma;
	font-size: 12pt;
}

body {
	/*height: 100vh;*/
	background-size: 100% 100vh, cover;
	/*background-image: url("../images/pic06.jpg");*/
}


#main {
	width: 100%;
	/*height: 100vh;*/
	text-align: -webkit-center;
	/*display: flex;
    justify-content: center;
    align-items: center;*/
}

#inpbox {
	width: 50%;
	background: lavender;
	opacity: 0.9;
	padding: 20px 40px 20px 40px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

#inpdiv {
	width: 100%;
	text-align: center; 
}

.inpcont {
	text-align: left; 
	margin-top: 20px;
}

.inplabel {
	text-align: left;
	/*width:40%;*/
	font-weight: bold;
}

.inpcom {
	text-align: left;
	width: -webkit-fill-available;
	margin-top: 5px;
}

#confirmbox {
	width: 50%;
	background: lavender;
	opacity: 0.9;
	padding: 20px 40px 20px 40px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

input[type="text"],
input[type="date"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
	background: transparent;
	/*border-radius: 0.375em;*/
	border: 0;
	border-bottom: solid 1px #3587a6;
	color: #555;
	display: block;
	outline: 0;
	padding: 0 0.5em;
	text-decoration: none;
	width: -webkit-fill-available;
	height: 1.5em;
}

/*input[type="number"] {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
	background: transparent;
	border-radius: 0.375em;
	border: 0;
	border: solid 1px rgba(210, 215, 217, 0.75);
	color: inherit;
	display: block;
	outline: 0;
	padding: 0 0.5em;
	text-decoration: none;
	width: 50px;
	height: 1.5em;
}*/

select {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
	background: transparent;
	border-radius: 0.375em;
	border: 0;
	border-bottom: solid 1px #3587a6;
	color: #555;
	display: block;
	outline: 0;
	padding: 0 0.5em;
	text-decoration: none;
	width: -webkit-fill-available;
	height: 2.0em;
}

submit, button {
	/*font: bold 100%;*/
	padding: 5px;
	border: 0 none;
	cursor: pointer;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	/*background: blue;
	color: white;*/
	font-weight: bold;
	/*height: 50px;*/
	/*width: 80px;*/
	/*display: flex;
	flex-wrap: wrap;
	width: 80px;*/
	padding: 10px;
}

#btproses {
	width: 100%;
	/*margin-top: 20px; */
	background: indianred;	
	color: white;
}

#tothrglabel {
	font-size: 12pt; color: black; margin-right: 10px;
}

#totalharga {
	width: 140px; background: green; font-size: 14pt; color: white; padding: 5px 5px; border-radius: 5px; text-align: right;
}

/*#prosesbooking {
	width: 140px; margin-left: 10px; text-align: right;
}*/

#mainpesan {
	width: 100%;
	height: 100vh;
	display: flex;
    justify-content: center;
    align-items: center;
}

#pesanbox {
	width: 40%;
	background: whitesmoke;
	opacity: 0.9;
	padding: 10px 40px 30px 40px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	text-align: left;
}

.pesanrow {
	display: flex; align-items: center; 
	width: 100%;
}

.pesanlabel {
	/*color: #555; */
	width: 35%; 
	text-align: left;
}

.pesanisi {
	/*color: #555;*/
	/*font-weight: bold;*/
	/*width: 50%;*/
	text-align: left;
}

@media screen and (max-width: 450px) {
	html {
		font-size: 10pt;

	}

	input[type="text"],
	input[type="date"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	input[type="search"],
	input[type="url"],
	input[type="number"],
	textarea {
		height: 1.1em;
	}

	#inpbox {
		width: 70%;
		padding: 20px 30px 20px 30px;
		/*font-size: 80%;*/
	}

	#confirmbox {
		width: 70%;
		padding: 20px 30px 20px 30px;
		/*font-size: 80%;*/
	}

	#tothrglabel {
		font-size: 10pt; color: black;
	}

	#totalharga {
		width: 120px;
	}

	/*#btproses {
		width: 100px;
	}*/
	/*#prosesbooking {
		width: 80px;
	}*/

	#pesanbox {
		width: 70%;
		padding: 10px 30px 30px 30px;
		/*font-size: 80%;*/
	}

	.pesanlabel {
		/*color: #555; */
		width: 50%; 
		text-align: left;
	}
}

@media screen and (min-width: 451px) and (max-width: 750px) {
	html {
		font-size: 11pt;

	}

	input[type="text"],
	input[type="date"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	input[type="search"],
	input[type="url"],
	input[type="number"],
	textarea {
		height: 1.3em;
	}

	#inpbox {
		width: 60%;
		padding: 20px 30px 20px 30px;
		/*font-size: 80%;*/
	}

	#confirmbox {
		width: 60%;
		padding: 20px 30px 20px 30px;
		/*font-size: 80%;*/
	}

	#pesanbox {
		width: 60%;
		padding: 10px 30px 30px 30px;
		/*font-size: 80%;*/
	}

	.pesanlabel {
		/*color: #555; */
		width: 47%; 
		text-align: left;
	}
}