.of-container {
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.of-form {
  position: relative;
}

.of-input {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.of-input label {
  width: 100%;
  height: 45px;
  display: block;
  border: 1px solid transparent;
  background-color: #eee;
  display: flex;
  margin-bottom: 0;
  transition: 0.2s all ease-in-out;
}
.of-input label input {
  width: calc(100% - 20px);
  height: 100%;
  border: none;
  outline: none;
  margin: 0;
  padding: 0 10px;
  background-color: transparent;
  font-size: 15px;
}
.of-input label select {
  width: calc(100% - 20px);
  height: 100%;
  border: none;
  outline: none;
  margin: 0;
  padding: 0 10px;
  background-color: transparent;
  font-size: 15px;
}
.of-input label input:-internal-autofill-selected {
  -webkit-box-shadow: 0 0 0px 40rem #eee inset;
  transition: 0.2s all ease-in-out;
}
.of-input label:hover input:-internal-autofill-selected {
  -webkit-box-shadow: 0 0 0px 40rem #fff inset !important;
}
.of-input label:focus input:-internal-autofill-selected {
  -webkit-box-shadow: 0 0 0px 40rem #fff inset !important;
}
.of-input label .of-extension {
  min-width: 40px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.of-input label .of-extension svg {
  width: 22px;
  height: 22px;
}
.of-input label .of-extension[of-extension-type=success-tic] {
  width: 0;
  opacity: 0;
  min-width: 0;
  transition: 0.2s all ease-in-out;
}
.of-input label .of-extension[of-extension-type=success-tic] svg {
  width: 17px;
  height: 17px;
  color: #126412;
}
.of-input label .of-extension[of-extension-type=look-password] svg {
  color: #212121;
}
.of-input label:hover {
  background-color: transparent;
  border-color: #a7a7a7;
}
.of-input label:focus {
  background-color: transparent;
  border-color: #a7a7a7;
}
.of-input .of-input-error {
  border-color: #f55 !important;
  background-color: rgb(255, 236, 236) !important;
}
.of-input .of-input-success .of-extension[of-extension-type=success-tic] {
  opacity: 1;
  min-width: 40px;
}
.of-input .of-error-list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #f55;
}
.of-input .of-error-list li {
  display: none;
  margin-top: 5px;
  font-size: 0.8rem;
}
.of-input .of-error-list .of-error-visible {
  display: block;
}

.of-input-12 {
  width: 100%;
}

.of-input-11 {
  width: calc(91.6666666667% - 10px);
}

.of-input-10 {
  width: calc(83.3333333333% - 10px);
}

.of-input-9 {
  width: calc(75% - 10px);
}

.of-input-8 {
  width: calc(66.6666666667% - 10px);
}

.of-input-7 {
  width: calc(58.3333333333% - 10px);
}

.of-input-6 {
  width: calc(50% - 10px);
}

.of-input-5 {
  width: calc(41.6666666667% - 10px);
}

.of-input-4 {
  width: calc(33.3333333333% - 10px);
}

.of-input-3 {
  width: calc(25% - 10px);
}

.of-input-2 {
  width: calc(16.6666666667% - 10px);
}

.of-input-1 {
  width: calc(8.3333333333% - 10px);
}

@media screen and (max-width: 576px) {
  .of-input-xs-12 {
    width: 100%;
  }
  .of-input-xs-11 {
    width: calc(91.6666666667% - 10px) !important;
  }
  .of-input-xs-10 {
    width: calc(83.3333333333% - 10px) !important;
  }
  .of-input-xs-9 {
    width: calc(75% - 10px) !important;
  }
  .of-input-xs-8 {
    width: calc(66.6666666667% - 10px) !important;
  }
  .of-input-xs-7 {
    width: calc(58.3333333333% - 10px) !important;
  }
  .of-input-xs-6 {
    width: calc(50% - 10px) !important;
  }
  .of-input-xs-5 {
    width: calc(41.6666666667% - 10px) !important;
  }
  .of-input-xs-4 {
    width: calc(33.3333333333% - 10px) !important;
  }
  .of-input-xs-3 {
    width: calc(25% - 10px) !important;
  }
  .of-input-xs-2 {
    width: calc(16.6666666667% - 10px) !important;
  }
  .of-input-xs-1 {
    width: calc(8.3333333333% - 10px) !important;
  }
}
@media screen and (min-width: 576px) {
  .of-input-sm-12 {
    width: 100%;
  }
  .of-input-sm-11 {
    width: calc(91.6666666667% - 10px) !important;
  }
  .of-input-sm-10 {
    width: calc(83.3333333333% - 10px) !important;
  }
  .of-input-sm-9 {
    width: calc(75% - 10px) !important;
  }
  .of-input-sm-8 {
    width: calc(66.6666666667% - 10px) !important;
  }
  .of-input-sm-7 {
    width: calc(58.3333333333% - 10px) !important;
  }
  .of-input-sm-6 {
    width: calc(50% - 10px) !important;
  }
  .of-input-sm-5 {
    width: calc(41.6666666667% - 10px) !important;
  }
  .of-input-sm-4 {
    width: calc(33.3333333333% - 10px) !important;
  }
  .of-input-sm-3 {
    width: calc(25% - 10px) !important;
  }
  .of-input-sm-2 {
    width: calc(16.6666666667% - 10px) !important;
  }
  .of-input-sm-1 {
    width: calc(8.3333333333% - 10px) !important;
  }
}
@media screen and (min-width: 768px) {
  .of-input-md-12 {
    width: 100%;
  }
  .of-input-md-11 {
    width: calc(91.6666666667% - 10px) !important;
  }
  .of-input-md-10 {
    width: calc(83.3333333333% - 10px) !important;
  }
  .of-input-md-9 {
    width: calc(75% - 10px) !important;
  }
  .of-input-md-8 {
    width: calc(66.6666666667% - 10px) !important;
  }
  .of-input-md-7 {
    width: calc(58.3333333333% - 10px) !important;
  }
  .of-input-md-6 {
    width: calc(50% - 10px) !important;
  }
  .of-input-md-5 {
    width: calc(41.6666666667% - 10px) !important;
  }
  .of-input-md-4 {
    width: calc(33.3333333333% - 10px) !important;
  }
  .of-input-md-3 {
    width: calc(25% - 10px) !important;
  }
  .of-input-md-2 {
    width: calc(16.6666666667% - 10px) !important;
  }
  .of-input-md-1 {
    width: calc(8.3333333333% - 10px) !important;
  }
}
@media screen and (min-width: 992px) {
  .of-input-lg-12 {
    width: 100%;
  }
  .of-input-lg-11 {
    width: calc(91.6666666667% - 10px) !important;
  }
  .of-input-lg-10 {
    width: calc(83.3333333333% - 10px) !important;
  }
  .of-input-lg-9 {
    width: calc(75% - 10px) !important;
  }
  .of-input-lg-8 {
    width: calc(66.6666666667% - 10px) !important;
  }
  .of-input-lg-7 {
    width: calc(58.3333333333% - 10px) !important;
  }
  .of-input-lg-6 {
    width: calc(50% - 10px) !important;
  }
  .of-input-lg-5 {
    width: calc(41.6666666667% - 10px) !important;
  }
  .of-input-lg-4 {
    width: calc(33.3333333333% - 10px) !important;
  }
  .of-input-lg-3 {
    width: calc(25% - 10px) !important;
  }
  .of-input-lg-2 {
    width: calc(16.6666666667% - 10px) !important;
  }
  .of-input-lg-1 {
    width: calc(8.3333333333% - 10px) !important;
  }
}
@media screen and (min-width: 1200px) {
  .of-input-xl-12 {
    width: 100%;
  }
  .of-input-xl-11 {
    width: calc(91.6666666667% - 10px) !important;
  }
  .of-input-xl-10 {
    width: calc(83.3333333333% - 10px) !important;
  }
  .of-input-xl-9 {
    width: calc(75% - 10px) !important;
  }
  .of-input-xl-8 {
    width: calc(66.6666666667% - 10px) !important;
  }
  .of-input-xl-7 {
    width: calc(58.3333333333% - 10px) !important;
  }
  .of-input-xl-6 {
    width: calc(50% - 10px) !important;
  }
  .of-input-xl-5 {
    width: calc(41.6666666667% - 10px) !important;
  }
  .of-input-xl-4 {
    width: calc(33.3333333333% - 10px) !important;
  }
  .of-input-xl-3 {
    width: calc(25% - 10px) !important;
  }
  .of-input-xl-2 {
    width: calc(16.6666666667% - 10px) !important;
  }
  .of-input-xl-1 {
    width: calc(8.3333333333% - 10px) !important;
  }
}

/*# sourceMappingURL=oveo-former.css.map */