.text-input-component {
  position: relative;
  width: 100%;
  flex: 1;
}
.text-input-component--disabled, .text-input-component--readonly {
  color: #9caaba;
  pointer-events: none;
}
.text-input-component--disabled .text-input-component__label, .text-input-component--readonly .text-input-component__label {
  color: #9caaba;
}
.text-input-component--disabled .text-input-component__wrapper, .text-input-component--readonly .text-input-component__wrapper {
  background-color: #e7e9eb;
  pointer-events: none;
  border: none !important;
}
.text-input-component--no-label .text-input-component__input {
  padding-top: 0.5rem;
  padding-left: 0.25rem;
}
.text-input-component--alt.text-input-component--disabled {
  opacity: 1;
}
.text-input-component__wrapper {
  width: 100%;
  padding-right: 1rem;
  padding-left: 1rem;
  background: #ffffff;
  position: relative;
  display: flex;
  align-items: center;
  border: 0.0469rem solid rgba(26, 73, 127, 0.2);
  border-radius: 0.75rem;
  height: 3.5rem;
  color: #222a3f;
}
.text-input-component__wrapper .text-input-component__input:-webkit-autofill {
  box-shadow: 0 0 0px 62.5rem #ffffff inset;
}
.text-input-component__wrapper--alt {
  background-color: #f5f8fa;
}
.text-input-component__wrapper--alt:disabled {
  background-color: #e7e9eb;
}
.text-input-component__wrapper--alt .text-input-component__input:-webkit-autofill {
  box-shadow: 0 0 0px 62.5rem #f5f8fa inset;
}
.text-input-component__wrapper--alt.text-input-component--disabled {
  opacity: 1;
  pointer-events: none;
  border: none !important;
}
.text-input-component__wrapper--error {
  outline: 0.0469rem solid rgba(237, 113, 95, 0.2392156863);
  background-color: #fef4f2;
}
.text-input-component__wrapper--error .text-input-component__input {
  color: #b85849;
}
.text-input-component__wrapper--readonly {
  outline: 0.0469rem solid #e7e9eb;
  background-color: #e7e9eb;
}
.text-input-component__wrapper--readonly .text-input-component__input {
  opacity: 0.6;
}
.text-input-component__wrapper--success {
  outline: 0.0469rem solid #54cda0;
}
.text-input-component__wrapper:focus, .text-input-component__wrapper:focus-within, .text-input-component__wrapper:hover {
  outline: 0.0938rem solid #03a4dc;
}
.text-input-component__input {
  width: 100%;
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  background: transparent;
  padding: 0.5rem 0;
  transition: padding 0.3s ease;
  z-index: 1;
  font-weight: 400;
  color: #4c5470;
  caret-color: #03a4dc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5rem;
  letter-spacing: 0.01rem;
}
.text-input-component__input--filled {
  padding-top: 1.5rem;
  font-size: 1em;
  color: #222a3f;
}
.text-input-component__input--with-left-content {
  padding-left: 0.25rem;
}
.text-input-component__input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0rem 62.5rem #f5f8fa inset;
  box-shadow: 0 0 0rem 62.5rem #f5f8fa inset;
  padding: 0;
  margin: 0;
}
.text-input-component__label {
  width: 100%;
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s ease;
  padding: 0 0.25rem;
  color: #686d7b;
  pointer-events: none;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01rem;
}
.text-input-component__label--active {
  top: 1rem;
  font-size: 0.75rem;
  z-index: 1;
}
.text-input-component__label--with-left-content {
  left: 3rem;
}
@media (max-width: 767.98px) {
  .text-input-component__label--with-overflow-label {
    width: 50%;
  }
}
.text-input-component__label--with-error {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 1439.98px) {
  .text-input-component__label--with-error {
    width: 100%;
    max-width: 100%;
    padding-right: 3rem;
  }
}
.text-input-component__icon {
  padding-left: 1.5rem;
  position: relative;
  color: #9caaba;
}
.text-input-component__error-icon, .text-input-component__success-icon {
  position: relative;
  margin-left: 0.5rem;
  border-color: #f1d8d7;
}
.text-input-component__error-icon__tooltip, .text-input-component__success-icon__tooltip {
  min-width: 8.75rem;
  max-width: 100%;
  display: none;
  position: absolute;
  top: -1rem;
  right: 0;
  transform: translateY(-50%);
  background-color: #fef4f2;
  color: #9caaba;
  padding: 0.5rem;
  border-radius: 0.25rem;
  box-shadow: 0rem 0rem 0.3125rem rgba(0, 0, 0, 0.1);
  z-index: 20;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.text-input-component__error-icon:hover .text-input-component__error-icon__tooltip,
.text-input-component__error-icon:hover .text-input-component__success-icon__tooltip, .text-input-component__error-icon:active .text-input-component__error-icon__tooltip,
.text-input-component__error-icon:active .text-input-component__success-icon__tooltip, .text-input-component__success-icon:hover .text-input-component__error-icon__tooltip,
.text-input-component__success-icon:hover .text-input-component__success-icon__tooltip, .text-input-component__success-icon:active .text-input-component__error-icon__tooltip,
.text-input-component__success-icon:active .text-input-component__success-icon__tooltip {
  display: block;
}
.text-input-component__hint {
  font-size: 0.75rem;
  line-height: 1.25rem;
  letter-spacing: 0.02rem;
  color: #4c5470;
  font-weight: 400;
  margin-top: 0.5rem;
  padding-left: 1rem;
}
.text-input-component__hint--error {
  color: #b85849;
}
.text-input-component__content-right {
  all: unset;
  cursor: pointer;
  position: relative;
  height: 100%;
  margin-left: 1rem;
}
.text-input-component__content-right__tooltip {
  min-width: 8.75rem;
  max-width: 100%;
  display: none;
  position: absolute;
  top: -1rem;
  right: 0;
  transform: translateY(-50%);
  background-color: #fef4f2;
  color: #9caaba;
  padding: 0.5rem;
  border-radius: 0.25rem;
  box-shadow: 0rem 0rem 0.3125rem rgba(0, 0, 0, 0.1);
  z-index: 20;
}
.text-input-component__content-right:hover .text-input-component__content-right__tooltip {
  display: block;
}
.text-input-component__content-right:focus {
  outline: auto;
}
.text-input-component__content-left {
  all: unset;
  cursor: pointer;
  position: relative;
  height: 100%;
  margin-right: 0.5rem;
}
.text-input-component__content-left__tooltip {
  min-width: 8.75rem;
  max-width: 100%;
  display: none;
  position: absolute;
  top: -1rem;
  left: 0;
  transform: translateY(-50%);
  background-color: #fef4f2;
  color: #9caaba;
  padding: 0.5rem;
  border-radius: 0.25rem;
  box-shadow: 0rem 0rem 0.3125rem rgba(0, 0, 0, 0.1);
  z-index: 20;
}
.text-input-component__content-left:hover .text-input-component__content-left__tooltip {
  display: block;
}
.text-input-component__info-container {
  display: flex;
  flex-direction: column;
}
@keyframes autofill {
  100% {
    background: transparent;
    color: inherit;
  }
}
.text-input-component .text-input-component__input:-webkit-autofill__label {
  top: 1rem;
  font-size: 0.75rem;
  z-index: 1;
}
.text-input-component .text-input-component__input:-webkit-autofill {
  transition: 0s ease-in-out;
  animation-name: autofill;
  background-clip: content-box;
  margin-top: 1.25rem;
  background: rgba(0, 0, 0, 0);
}
.text-input-component .text-input-component__input:-webkit-autofill-strong-password, .text-input-component .text-input-component__input:-webkit-autofill-strong-password-viewable, .text-input-component .text-input-component__input:-webkit-autofill-and-obscured {
  background: transparent;
  background-color: transparent;
}
.text-input-component .text-input-component__input::-ms-reveal {
  display: none;
}