.form{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 8px;
	gap: 8px;
	margin-bottom: 8px;
	}
.form > .field{
	position: relative;
  	grid-column: span 12;
  	margin-bottom: 8px;
	}
.form > .field > label{
	display: block;
	font-family: var(--font-ui);
	font-size: 1em;
	text-indent: 8px;
	margin-bottom: 8px;
	line-height: 120%;
	}
.form > .field > input,
.form > .field > textarea,
.form > .field > select{
	display: block;
	width: 100%;
	background-color: #FFF;
	border: solid 2px var(--main-color-light);
	padding: 12px 16px;
	-moz-border-radius: 8px; 
	-webkit-border-radius: 8px;
	}
.form > .field > input:focus,
.form > .field > textarea:focus{
	background-color: #F6F6F6;
	border: solid 2px var(--main-color-dark);
	-moz-box-shadow: inset 1px 1px 4px rgba(0,0,0,0.3); 
	-webkit-box-shadow: inset 1px 1px 4px rgba(0,0,0,0.3); 
	box-shadow: inset 1px 1px 4px rgba(0,0,0,0.3);
	}

.form > .field > input[data-error='1'],
.form > .field > textarea[data-error='1']{
	background-color: #FFEEEE !important;
	}

.form > .field > input[disabled="true"],
.form > .field > textarea[disabled="true"],
.form > .field > select[disabled="true"]{
	border-color:rgba(0,0,0,0.05);
	background-color: #F6F6F6;
	}

.form > .field[data-size='1']{ grid-column: span 1;	}
.form > .field[data-size='2']{ grid-column: span 2;	}
.form > .field[data-size='3']{ grid-column: span 3;	}
.form > .field[data-size='4']{ grid-column: span 4;	}
.form > .field[data-size='5']{ grid-column: span 5;	}
.form > .field[data-size='6']{ grid-column: span 6;	}
.form > .field[data-size='7']{ grid-column: span 7;	}
.form > .field[data-size='8']{ grid-column: span 8;	}
.form > .field[data-size='9']{ grid-column: span 9;	}
.form > .field[data-size='10']{ grid-column: span 10;	}
.form > .field[data-size='11']{ grid-column: span 11;	}
.form > .field[data-size='12']{ grid-column: span 12;	}

@media (max-width: 1600px) {

}
@media (max-width: 1200px) {

}
@media (max-width: 1024px) {

}
@media (max-width: 840px) {

}
@media (max-width: 720px) {

}
@media (max-width: 600px) {
	.form > .field{ grid-column: span 12 !important;	}
}
@media (max-width: 480px) {
	.form > .field > input,
	.form > .field > textarea{
		padding: 8px 12px;
		}
	.form > .field > label{
		font-size: 0.9em;
		text-indent: 8px;
		margin-bottom: 4px;
		line-height: 100%;
		}
}
@media (max-width: 320px) {

}