:root {
    --primary-color: #e7ffde;
	--secondary-color: #45857d;
}
.mt3 {margin-top: 3rem;}
.mb1 {margin-bottom: 1rem;}
.mb3 {margin-bottom: 3rem;}
.mb5 {margin-bottom: 5rem;}
.ml3 {margin-left: 3rem;}
.mr3 {margin-right: 3rem;}

#form__contact {
    background-color: var(--primary-color);
	padding: 6rem 0;
}
#form-input, #form-confirm {
	margin: 0 auto;
	max-width: 65rem;
	width: 98%;
}
#form-confirm {display: none;}
.form-input-content, .form-confirm-content {
	background-color: white;
}
.form-input-content {padding: 0 0 3rem;}
.form-confirm-content {
	padding: 3rem;
}
.input-field {
	display: flex;
}
.input-header {
	align-items: center;
	background-color: green;
	border-bottom: 1px solid white;
	color: #fff;
	display: flex;
	font-weight: 700;
	justify-content: space-between;
	padding: 2rem;
}
.input-content {
	padding: 2rem;
}
.input-ui, .input-ui-short, .input-ui-textarea {
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: .5rem;
	width: 100%;
}
.input-ui-short {
	width: 5rem;
}
.input-ui-select {
	padding: .5rem;
	width: 50%;
}
.label-require, .label-option {
	padding: .5rem;
	font-size: .8rem;
}
.label-require{background-color: red;}
.label-option{background-color: orange;}
.error-message {
    color: #ff0000;
	padding: 1rem 0;
}

.confirm-row {
	padding: 2rem 1rem;
}
.p-country-name{display:none;}
.confirm-header {color: var(--secondary-color); font-weight: 700;}
.confirm-content.body {
	white-space: pre-wrap;
}
.buttons {
	display: flex;
	justify-content: space-around;
	margin: 6rem auto 0;
}
.btn {cursor: pointer;}
.btn:disabled {background-color: #aaa;cursor:not-allowed;}
.btn.btn-border {
	background-color: white;
	border: 2px solid var(--secondary-color);
	color: var(--secondary-color);
}

@media screen and (max-width: 768px) {
	.buttons {
		flex-direction: column;
	}
}