.input-container {
    position: relative;
    width: 100%;
}

.input-container input {
    width: 100%;
    padding: 10px 40px 10px 12px;  /* set some space for icon */
    border-radius: 6px;
    box-sizing: border-box;
}

/* Structure for icons */
.input-container::after {
    font-family: "FontAwesome";
    font-weight: 900;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Style Success via JS */
.input-container.is-valid::after {
    content: "\f00c";
    color: #2ecc71;
}

/* Style Error via JS */
.input-container.is-invalid::after {
    content: "\f00d";
    color: #e74c3c;
}
/* Style Loading */
.input-container.is-loading::after {
    content: "\f110"; /* unicode for spinner Font Awesome */
    color: #3498db;
    /* apply animation */
    animation: spin 1s linear infinite;
}
/* animation */
@keyframes spin {
    from {
        transform: translateY(-50%) rotate(0deg); /* keep vertical center */
    }
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}