.input-wrapper {
    position: relative;
}

.input-wrapper .input {
    width: 100%;
}

.input-wrapper.validated .alert-icon {
    display: none;
    position: absolute;
    width: 20px;
    height: 20px;
    right: 0;
    top: calc(50% - 10px);
}

.input-wrapper.validated.textarea .alert-icon {
    bottom: 14px;
    top: auto;
}

.input-wrapper.validated .error-message {
    display: none;
    position: absolute;
    font-size: var(--font-11);
    line-height: 125%;
    color: var(--accent-red); 
    bottom: -15px;
}

.input-wrapper.validated.error .alert-icon,
.input-wrapper.validated.error .error-message{
    display: block;
}
.input-wrapper.validated.error .input.underline {
    border-color: var(--accent-red);
}

.input {
    appearance: none;
    border: none;
    color: var(--extra-white);
    background-color: transparent;
    font-weight: 100;
    line-height: 125%;
}

.input.dark {
    color: var(--dark-blue);
}

.input::placeholder {
    text-transform: capitalize;
    line-height: 125%;
    color: var(--extra-white-opacity-03);
}


.input.dark::placeholder {
    color: var(--black-03);
}


.input:focus {
    stroke: none
}

.input.underline {
    border-bottom: var(--border-1) solid var(--extra-white);
    padding-bottom: var(--space-8);
}

.input.underline.dark {
    border-bottom: var(--border-1) solid var(--dark-blue);
}

@media (max-width: 767px) {
    .input,
    .input::placeholder {
        font-size: var(--font-14);
    }
    
}