.form-control,
.form-control input,
.form-control select {
   float: left;
   width: 100%;
}

.form-control {
   position: relative;
   box-sizing: border-box;
   margin: 10px 0;
   font-family: "Open Sans", sans-serif;
}

.form-control select {
   cursor: pointer;
}

.form-control:focus-within label,
.form-control.checked label {
   top: 10px;
   font-size: 12px;
   transition: 0.2s all ease;
   color: #000;
}


.form-control:focus-within select,
.form-control.checked select {
   color: #000;
}

.form-control.error {
	background: #ffcece;
}

.form-control.error label {
	color:#000;
	opacity:1;
}


.form-control label {
   position: absolute; 
   z-index: 2; 
   cursor: pointer; 
   font-size: 14px; 
   top: 10px; 
   left: 17px; 
   opacity: 0.7; 
   pointer-events: none; 
   color: #000;
   user-select: none;
 }
 
 .form-control:focus-within label, .form-control.checked label {
	top: 5px;
	opacity:1;
 }
 
 .form-control input,
 .form-control textarea,
 .form-control select {
   border: none; 
   width: 100%; 
   float: left; 
   font-size: 16px; 
   box-sizing: border-box; 
   background-color: #f3f3f3; 
   background: -webkit-radial-gradient(top left,ellipse cover, #f9f9f9 40%, #cfcfcf 99%); 
   padding: 23px 15px 10px; 
   border-bottom: 1px solid #b5b5b5; 
   border-left: 5px solid #b5b5b5; 
   color: #000; 
   box-shadow: inset 20px -20px 20px 0px #f3f3f3; 
   border-radius: 3px;
 }

 .form-control textarea {
   background: #f7f7f7;
   box-shadow: none;
   border-bottom: 1px solid #b5b5b5;
   border-left: 5px solid #b5b5b5;
 }
 
 .form-control:hover input, .form-control:hover select, .form-control:focus-within select {
	border-left-color: #000000;
	background: -webkit-radial-gradient(top left,ellipse cover, #efefef 40%, #aaaaaa 99%);
	box-shadow: inset 20px -20px 20px 0px #e5e5e5;
	}

 .form-control:hover textarea {
	border-left-color: #000;
   background: #e9f9ee;
 }

.form-control.checked input,
.form-control.checked textarea,
.form-control.checked select {
   border-left-color: #000;
}


.form-control.error input, .form-control input.error,
.form-control.error select, .form-control select.error {
   border-left-color: #d35f5f;
   background: -webkit-radial-gradient(top left,ellipse cover, #fff2f2 40%, #ffc9c9 99%);
   box-shadow: inset 20px -20px 20px 0px #fff4f4;
}

.form-control.error textarea, .form-control textarea.error {
   border-left-color: #d35f5f;
   background: #fff2f2;
 }

.form-control:has(> input:disabled) {
  pointer-events: none;
}

.form-control input:disabled {
  opacity: 0.7;
  box-shadow: none;
  border-left-color: transparent;
}

 .form-control input.captcha {
   background-repeat: no-repeat;
   background-position: right center;
   box-shadow: inset 20px -5px 20px 0px #f3f3f3;
 }
 
.form-control-msg {
   width: fit-content;
   max-height: 0;
   transition: margin 0.5s ease, padding 0.5s ease, max-height 0.5s ease;
   overflow: hidden;
   padding: 0 30px;
   margin: 0 auto;
   box-sizing: border-box;
   text-align: center;
   font-size:14px;
}
.form-control-msg a {
   color: #fff;
   text-decoration: underline;
   text-decoration-style: dotted;
   font-weight: bold;
}
.form-control-msg a:hover {
   text-decoration-style: unset;
}
.error .form-control-msg,
.error.form-control-msg,
.success .form-control-msg,
.success.form-control-msg  {
   max-height: 550px;
   padding: 10px 30px;
   border-radius: 5px;
   margin: 10px auto;
   background: #d56161;
   box-shadow: 0 0 6px 1px #cb000059;
   color: #ffffff;
}

.success .form-control-msg,
.success.form-control-msg  {
   background: #309e54;
   box-shadow: 0 0 6px 1px #008e2e59;
}