.phone-field {
  position: relative;
}

.phone-input-shell {
  position: relative;
}

.phone-input-shell .iti {
  display: block;
  width: 100%;
}

.phone-input-shell .iti__country-container {
  pointer-events: none;
}

.phone-input-shell .iti__selected-country {
  color: rgba(226, 232, 255, 0.9);
  cursor: default;
  pointer-events: none;
}

.phone-input-shell .iti__selected-country-primary {
  padding-left: 1rem;
  padding-right: 0.3rem;
}

.phone-input-shell .iti__selected-dial-code {
  font-size: 0.9rem;
  font-weight: 600;
  margin-left: 0.45rem;
}

.phone-input-shell .iti__arrow {
  display: none;
}

.phone-input-shell .iti input[data-phone-input] {
  box-sizing: border-box;
  width: 100%;
  padding-left: 6.25rem !important;
}

.phone-field.is-invalid .field-error {
  display: inline-block;
}

.phone-field.is-invalid input[data-phone-input] {
  border-color: rgba(249, 115, 117, 0.78);
  box-shadow: 0 0 0 1px rgba(249, 115, 117, 0.18);
}

.phone-field.is-valid input[data-phone-input] {
  border-color: rgba(34, 197, 94, 0.62);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.14);
}

@media (max-width: 420px) {
  .phone-input-shell .iti input[data-phone-input] {
    padding-left: 6rem !important;
  }
}