*,
*::before,
*::after {
  box-sizing: border-box;
}

#formLayover  {
	background-color: rgba(59,96,0,0.6);
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9999999;
}
@media all and (max-height:750px) {
#formLayover  {
	position:absolute;
}		
}

#formLayover div.form {
    background-color: white;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 0 10px rgb(0,54,76);
    color: currentcolor;
    padding: 15px 15px;
    position: relative;
    left: auto;
    line-height: 1.5em;
    margin:0 auto;
	right: auto;
    top: 50px;
    width: 500px;
	max-width: calc(100vw - 30px);
	
}
#formLayover .input-form {
	--input_height: 30px;
	--input_color: #99d040;
	--input_bgcolor:#f4faeb;
	display:none;
	margin-bottom:25px;
	position: relative;
}
#formLayover .input-form.type_checkbox{
	margin-bottom:1em;
}

#formLayover .input-form:has(input:checked) {
	border-bottom:1px solid var(--input_color);
}
#formLayover .input-field {
  height: var(--input_height);
  width: 100%;
	padding-bottom:0;
  padding-top: 0;
  font-size: 1em;
  background: transparent;
  border: none;
  outline: none;
  border-bottom: 1px solid rgb(138, 138, 138);
  z-index: 2;
}
#formLayover textarea.input-field {
	height:200px;
	padding:0.5em 0.25em;
	border:1px solid currentcolor;
}
#formLayover .input-label {
  position: absolute;
  bottom: 0.2em;
  left: 0;
  height: 100%;
  width: calc(100% - 2em);
  z-index: 1;
}
#formLayover .label-name {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform: translateY(calc(var(--input_height) - 20px));
  transition: transform 200ms ease-in-out;
}
#formLayover textarea ~ label .label-name{
	padding-left:0.25em;
}
#formLayover .input-label::after {
  content: "";
  position: absolute;
  bottom: 0.2em;
  left: 0;
  width: 0%;
  border: 0px solid var(--input_color);
}
#formLayover .input-field:focus,
#formLayover textarea.input-field:not(:placeholder-shown) ,
#formLayover input.input-field:not(:placeholder-shown),
#formLayover select.input-field[required]:valid {
	background-color:var(--input_bgcolor);	
  border: 1px solid var(--input_color);

}
#formLayover .input-field:focus ~ .input-label::after,
#formLayover textarea.input-field:not(:placeholder-shown) ~ .input-label::after,
#formLayover input.input-field:not(:placeholder-shown) ~ .input-label::after,
#formLayover select.input-field[required]:valid ~ .input-label::after{
  width: calc(100% - 2em);
  transition: 200ms;
}
#formLayover .input-field:focus ~ .input-label .label-name,
#formLayover textarea.input-field:not(:placeholder-shown) ~ .input-label .label-name ,
#formLayover input.input-field:not(:placeholder-shown) ~ .input-label .label-name,
#formLayover select.input-field[required]:valid ~ .input-label .label-name {
  color: var(--input_color);
  font-size: 0.85em;
  transform: translateY(0px);
  top:-1.3em;
}
#formLayover .input-field:required ~ .input-label span.label-name::after,
#formLayover .type_checkbox input:required ~ span.label::after{
	content:'*';	
}
#formLayover .form-container {
  border-radius: 3px;
  padding:3em 1em 0 1em;
	position:relative;
}

/* checkbox */

#formLayover label.container {
  display: block;
  position: relative;
  height:40px;
  margin:0;
  padding-bottom: 12px;
	padding-left:30px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#formLayover div.type_checkbox label.container {
	height: auto;
	padding-bottom: 0;
}

#formLayover #i_7 label.container span.label::after {
	content:'?';
	margin-left:0.1em;
}
#formLayover label.container span.label {
	color:inherit;
	font:inherit;
	padding:0;
	white-space:normal;
}
#formLayover label.container input:checked ~ span.label {
	color:black;
	border:1px solid (--input_color);
	background-color: (--input_bgcolor);
}
#formLayover #i_7 label.container input:checked ~ span.label::after {
	color:var(--input_color);
	content:'!';
	font-weight:bold;
}
#formLayover .container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
#formLayover .checkmark {
	position: absolute;
	top:0px;
	left: 0px;
	background-color: var(--input_bgcolor);
	border:1px solid currentcolor;
	height:20px;
	width:20px;
	display: block;
	transition:  all 0.5s;
}
#formLayover .error .checkmark {
	background-color: var(--input_bgcolor);
	border-color: #b20d14;
}
#formLayover .container input:checked ~ .checkmark {
	background-color:rgba(255,255,255,0);
	border:none;
	border-bottom:2px solid var(--input_color);
	border-left:2px solid var(--input_color);
	height:8px;
	display: block;
	left:0px;
	top:4px;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	width:16px;
	transition: all 0.5s;
}
#formLayover svg.close {
    cursor: pointer;
    height: 3em;
    padding: 15px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    transition: all 0.5s;
    width: 3em;
	z-index:9;
}
#formLayover svg.close:hover {
	-webkit-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	transform: rotate(-90deg);
	transition: all 0.5s;
}
#formLayover #i_12 {
  margin-top:1.5em
}
#formLayover form.check input:invalid,
#formLayover form.check select:invalid,
#formLayover form.check textarea:invalid,
#formLayover form.check .type_checkbox input:invalid ~ span.label,
#formLayover .respose.error {
	background-color:rgb(209,0,16,0.2);
	border:1px solid rgb(209,0,16);
}
.response {
	width:75%;
}
#i_20 .sub {
	display:none;
	margin-top:1em;
}