.form-container {
    flex-direction: column;
    margin: auto;
}

.form-group {
    margin: 8px 0;
}

.form-group label {
    display: block;
    font-size: 20px;
    font-family: 'Varela Round', system-ui, sans-serif;
}

.icon-label {
    padding-left: 38px !important;
}

.form-group input[type="text"],
.form-group input[type="password"] {
    width: 100%;
    height: 40px;
    margin-top: 6px;
    padding: 0 12px 0 15px;
    border: 2px solid #c4c4c4;
    border-radius: 20px;
    font-size: 18px;
    transition: 1ms;
}

.form-group input[type="text"]:focus
.form-group input[type="password"]:focus {
    border-color: #124ce7;
    box-shadow: 0 0 12px #bbd3ff;
}

.form-group input[type="text"]:valid,
.form-group input[type="password"]:valid {
    background: #e4edff;
}

.form-group input[disabled] {
    color: #fff;
    cursor: not-allowed;
}

.form-group i {
    position: absolute;
    color: #444;
    transform: translateX(-7.1rem) translateY(1rem);
    left: 0;
    right: 0;
    font-size: 1.25rem;
    pointer-events: none; /* to prevent the icon from being clicked */
}