.form {
    border-radius: 4px;

    &__error {
        border: 1px solid hsl(348, 100%, 61%) !important;
    }

    &__sucess {
        border: 1px solid hsl(141, 71%, 48%) !important;
    }

    &__headers {
        display: flex;
        margin-bottom: 26px;

        &__header {
            height: 40px;
            position: relative;
            flex-grow: 1;
            text-transform: uppercase;
            display: flex;
            justify-content: center;
            align-items: center;

            &__arrow {
                position: absolute;
                width: 0;
                height: 0;
                top: 34px;
                border-left: 20px solid transparent;
                border-right: 20px solid transparent;
                border-top: 20px solid hsl(217, 71%, 53%);
                align-self: center;
                justify-self: center;
            }
        }
    }

    &__content {
        padding: 0 8px;
    }

    &__label {
        margin-bottom: 8px;
    }

    &__input {
        padding: 6px 10px;
        font-size: .9rem;
        outline: none;
        border: 1px solid #828282;
        border-radius: 2px;
        background-color: transparent;
    }

    &__field {
        display: flex;
        flex-flow: column;
        margin-bottom: 16px;

        &__info {
            margin-top: 6px;
            font-size: .85rem;
        }
    }

    &__btn {
        display: flex;
        justify-content: center;
        text-transform: uppercase;
        width: auto;
        padding: 6px 10px;
        align-items: center;
        border: none;
        outline: none;
        border-radius: 4px;

        i {
            margin-left: 12px;
        }
    }
}

.input-with-icon {
    position: relative;
    display: flex;

    input {
        flex-grow: 1;
        padding-left: 34px;
    }

    i {
        position: absolute;
        display: block;
        z-index: 1;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 6px;
    }
}