@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

/*---------------------------------------------*/
.formV4 {
	padding-left: 3rem;
	padding-top: 3rem;
	padding-right: 3rem;
	padding-bottom: 2rem;
}

.formV4 .title {
  display: block;
  font-family: inherit;
  font-size: 39px;
  color: #333333;
  line-height: 1.2;
  font-weight: bold;
}

.formV4 .group {
  width: 100%;
  position: relative;
  border-bottom: 2px solid #d9d9d9;
}

.formV4 .group span {
  font-family: 'Poppins', regular;
  font-size: 14px;
  color: #333333;
  line-height: 1.5;
  padding-left: 10px;
  padding-right: 10px;
  width: 100%; 
  display: block;
}

.formV4 .group .size-md {
  height: 42px !important;
}

/*---------------------------------------------
[ focus-icon ]*/

.formV4 .focus-icon {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* color icon */
.formV4 .focus-icon i {
  content: attr(data-symbol);
  color: #adadad;
  font-size: 22px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  height: 100%;
  bottom: 0;
  left: 0;
  padding-left: 13px;
  padding-right: 13px;
  padding-top: 3px;
  padding-bottom: 3px;
}

/* Color border-bottom: background */
.formV4 .focus-icon::before {
  content: "";
  display: block;
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #007bff;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}

/*---------------------------------------------
[ elements html ]*/

.formV4 input,
.formV4 textarea
{
	outline: none;
	border: none;
}

.formV4 input:hover,
.formV4 input:focus,
.formV4 textarea:hover,
.formV4 textarea:focus
{
  background-color: transparent;
}

.formV4 input:focus::-webkit-input-placeholder,
.formV4 input:focus:-moz-placeholder,
.formV4 input:focus::-moz-placeholder,
.formV4 input:focus:-ms-input-placeholder,
.formV4 textarea:focus::-webkit-input-placeholder,
.formV4 textarea:focus:-moz-placeholder,
.formV4 textarea:focus::-moz-placeholder,
.formV4 textarea:focus:-ms-input-placeholder
{
  color:transparent;
  color: #adadad;
}

/*------------------------------------------------------------------
[ custom input ]*/

.formV4 input:not([type=checkbox])
{
  font-family: 'Poppins', medium;
  font-size: 16px;
  color: #333333;
  line-height: 1.2;
  display: block;
  width: 100%;
  height: 55px;
  background: transparent;
  padding: 0 7px 0 43px;
}

.formV4 input:-webkit-autofill,
.formV4 input:-webkit-autofill:hover, 
.formV4 input:-webkit-autofill:focus, 
.formV4 input:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

/* [input valid,invalid, required]
Eliminar border red required */
.formV4 input:invalid { 
  box-shadow: none;
}

.formV4 input:not([type='datetime-local']):not(:placeholder-shown):valid + .focus-icon i,
.formV4 input:required:valid + .focus-icon i,
.formV4 input:focus + .focus-icon i 
{
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
  color: #007bff;
}

.formV4 input:not([type='datetime-local']):not(:placeholder-shown) + .focus-icon::before,
.formV4 input:required:valid + .focus-icon::before,
.formV4 input:focus + .focus-icon::before
{
  width: 100%;
}

.formV4 input:not([type='datetime-local']):invalid:not(:placeholder-shown) + .focus-icon i
{
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
  color: red;
}

.formV4 input:not([type='datetime-local']):invalid:not(:placeholder-shown) + .focus-icon::before
{
  background: red;
  width: 100%;
}

.formV4 input:required:valid  {
  
}
.formV4 input:required:focus:valid {
  
}
.formV4 input:focus:invalid {
	
}

/*------------------------------------------------------------------
[ custom textarea ]*/

.formV4 textarea
{
  font-family: 'Poppins', medium;
  font-size: 16px;
  color: #333333;
  line-height: 1.2;
  display: block;
  width: 100%;
  min-height: 47px;
  background: transparent;
  padding: 7px 7px 7px 43px;
}

.formV4 textarea:-webkit-autofill,
.formV4 textarea:-webkit-autofill:hover, 
.formV4 textarea:-webkit-autofill:focus, 
.formV4 textarea:-webkit-autofill:active  {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

/* [textarea valid,invalid, required]
Eliminar border red required */
.formV4 textarea:invalid { 
  box-shadow: none;
}

.formV4 textarea:not(:placeholder-shown):valid + .focus-icon i,
.formV4 textarea:required:valid + .focus-icon i,
.formV4 textarea:focus + .focus-icon i 
{
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
  color: #007bff;
}

.formV4 textarea:not(:placeholder-shown) + .focus-icon::before,
.formV4 textarea:required:valid + .focus-icon::before,
.formV4 textarea:focus + .focus-icon::before
{
  width: 100%;
}

.formV4 textarea:invalid:not(:placeholder-shown) + .focus-icon i
{
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
  color: red;
}

.formV4 textarea:invalid:not(:placeholder-shown) + .focus-icon::before
{
  background: red;
  width: 100%;
}

.formV4 textarea:required:valid  {
  
}
.formV4 textarea:required:focus:valid {
  
}
.formV4 textarea:focus:invalid {
  
}

/*------------------------------------------------------------------
[ media query desing ]*/

@media (max-width:575.98px) {
  .formV4 {
    padding-left: 1rem;
    padding-top: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
  }
}

@media (max-width:767.98px) {

}

@media (max-width:991.98px) {

}

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