.form{
	box-sizing: border-box;
	box-shadow: var(--shadow);
	display: grid;
	border-radius: var(--m_gap);
	grid-auto-rows: min-content;
	grid-gap: var(--l_gap);
	grid-template-areas: "header" "item";
	grid-template-rows: auto 1fr;
	padding: var(--m_gap);
	width: 300px}
.form.off{
	display: none}
	.form > .header{
		align-items: center;
		display: grid;
		font-size: var(--xl_font);
		font-weight: bold;
		grid-area: header;
		grid-template-columns:  1fr max-content}
	.form > .item{
		display: grid;
		grid-area: item;
		grid-gap: var(--m_gap)}
	.form >.item.off{
		display: none}
		.form .error_span{
			color:var(--red_2);
			display: block;
			font-style:italic;
			font-size: var(--m_font)}
		.form .error_span.off{
			display:none}
		.form .vertical_button{
			margin-top:var(--m_gap)}
		.form .counter{
			display: grid;
			grid-auto-columns: min-content;
			grid-auto-flow: column;
			grid-gap:var(--xs_gap);
			justify-self:center}
			.form .counter div{
				/*background: red;*/
				border-radius: 50%;
				height: var(--s_gap);
				width: var(--s_gap)}
			.form .counter div.active{
				transform: scale(1.2)}
.form.green_2{
	border: 2px solid var(--green_3);
	background: var(--green_2)}
	.form.green_2 > .header{
		color: var(--green_1)}
		.form.green_2 .counter div{
			background: var(--green_1)}
		.form.green_2 .counter div.active{
			background: var(--yellow_1)}