.box-form {
	--min-border-radius: 18;
	--max-border-radius: 24;
	--border-radius: calc(
		(var(--min-border-radius) * 1px) + 
		(var(--max-border-radius) - var(--min-border-radius)) * 
		((100cqw - 320px) / (1200 - 320))
	);
	border-radius: clamp(var(--min-border-radius) * 1px, var(--border-radius), var(--max-border-radius) * 1px);
	
	border: 1px solid #56A0F0;
	background: rgba(86, 160, 240, 0.2);

	width: calc(100% - 32px);
	max-width: 864px;
	margin: 0 auto 40px;
	
	margin-left: auto;
	margin-right: auto;
	
	--min-margin-top: 43.2;
	--max-margin-top: 120;
	--margin-top: calc(
		(var(--min-margin-top) * 1px) + 
		(var(--max-margin-top) - var(--min-margin-top)) * 
		((100cqw - 320px) / (1200 - 320))
	);
	margin-top: clamp(var(--min-margin-top) * 1px, var(--margin-top), var(--max-margin-top) * 1px);
}

.box-form-wrapper {
	padding: 0 16px 16px;
	position: relative;
	z-index: 888;
}

.box-form-top { padding: 20px 0 24px; }

.box-form-top > div.row > div {
	--min-size: 18;
	--max-size: 32;
	--font-size: calc(
		(var(--min-size) * 1px) + 
		(var(--max-size) - var(--min-size)) * 
		((100cqw - 375px) / (1200 - 375))
	);
	font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
	
	font-weight: 600;
	text-align: center;
	
	padding: 0;
}

.box-form-top > div.row > div:nth-child(1) {
	--min-width: 53;
	--max-width: 80;
	--width: calc(
		(var(--min-width) * 1px) + 
		(var(--max-width) - var(--min-width)) * 
		((100cqw - 375px) / (1200 - 375))
	);
	width: clamp(var(--min-width) * 1px, var(--width), var(--max-width) * 1px);
}

.box-form-top > div.row > div:nth-child(2) {
	flex: 0 0 auto;
	width: auto;
	margin-left: 12px;
}

.box-form-content {
	background: #FFF;
	border-radius: 16px;
	padding: 0 20px;
}

.box-form-content > div:nth-child(1) {
	padding: 20px 0 24px;
	font-size: 18px;
	font-weight: 400;
	text-align: center;
}
.box-row { display: flex; flex-wrap: wrap; }
.box-row.form-group { margin-bottom: 24px; }
.box-row.form-group > div:nth-child(1) { width: 45px; }
.box-row.form-group > div:nth-child(2) { width: calc(100% - 45px); }

input, select {
	background: rgba(51, 51, 51, 0.05);
	border-radius: 8px !important;
	padding: 11px 24px 11px 20px !important;
	
	outline: none;
}
input:focus, input:active,
select:focus, select:active { outline: none;  }

input, select option {
	font-size: 18px;
	font-weight: 400;
	line-height: 26px;
	text-align: left;
}
select {
	-moz-appearance: none; /* Firefox */
    -webkit-appearance: none; /* Safari and Chrome */
	background: url(../../img/v3.1/arr_down.png) no-repeat 97% rgba(51, 51, 51, 0.05);	
}
select::-ms-expand { display: none; }
select:required:invalid { color: gray; }
option { color: black; }
option:disabled { color: gray; }
select:has(option:checked:first-child) { color: gray; }

input:-internal-autofill-previewed,
input:-internal-autofill-selected {
	-webkit-text-fill-color: #000 !important;
	transition: background-color 5000s ease-in-out 0s !important;
}

.box-form-note { 
	--min-size: 12;
	--max-size: 14;
	--font-size: calc(
		(var(--min-size) * 1px) + 
		(var(--max-size) - var(--min-size)) * 
		((100cqw - 320px) / (576 - 320))
	);
	text-align: center; 
	padding: 16px 0;
}

.box-form-btn { padding-bottom: 20px; }
.box-form-btn > button {
	border: 0;
	border-radius: 30px;
	background: #56A0F0;

	color: #FFF;
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	display: block;
	width: 90%;
	padding: 16px;
}

@media screen and (max-width: 374px) {
	
	.box-form-top > div.row > div { font-size: 14px; }

	.box-form-content > div:nth-child(1) { font-size: 14px; }
	
	.form-conrol { font-size: 14px; }
	
	input, select {	padding: 11px 24px 11px 10px !important; }
}

@media screen and (min-width: 414px) {
	.box-form-note { font-size: 13px; }
}

@media screen and (min-width: 576px) {
	.box-form-note { font-size: 14px; }
}

@media screen and (min-width: 640px) {
}

@media screen and (min-width: 768px) {
	.box-form { width: 72%; }
	.box-form-wrapper { padding: 4.266666% 4.266666%; }
}

@media screen and (min-width: 992px) {
	
}

@media screen and (min-width: 1200px) {
	
}
