/*
Forms
==========================================
Defines the general form element styles.

It contains the components as: `capacha`, `description`, `required information` etc.
*/

    // General
.forms--content {
    width: 100%;

    .forms--headline {
        .unitize(margin-bottom, 20);

        .forms--title {
            .unitize(margin-top, 0);
        }

        .forms--text {
            p { .unitize(margin-bottom, 12); }
        }
    }

    // Margin alert message
    .alert {
        .unitize-margin(30, 0, 0, 0);
    }

    .forms--field {
        .unitize(margin-bottom, 5);
        width: 100%;
    }

    input {
        .unitize(margin-bottom, 10);
        width: 100%;
    }

    input[type="checkbox"] {
        width: auto;
    }

    textarea {
        .unitize(margin-bottom, 10);
        width: 100%;
    }

        .field--select {
            .unitize(margin-bottom, 10);
    }

    .btn {
        float: right;
    }

    .buttons {
        .clearfix();
    }

    .strasse {
        margin-right: 2%;
        width: 80%;
        float: left;
    }

    .nr {
        width: 18%;
        float: left;
    }

    .plz {
        margin-right: 2%;
        width: 28%;
        float: left;
    }

    .ort {
        .clearfix();
        width: 70%;
        float: left;
    }

    .forms--required {
        .unitize(font-size, 12);
        .unitize(margin-bottom, 10);
    }

    .forms--description {
        .unitize-margin(-8, 0, 10, 0, 16);
        clear: both;
    }

    .forms--captcha {

        strong.captcha--notice {
            .unitize(margin-bottom, 8);
            display: block;
        }

    }

    .forms--checkbox {
        label {
            .unitize(-2, 16, top);
            position: relative;
        }

        input[type="checkbox"] {
            width: auto;
        }
    }

}

@media screen and (min-width: @tabletViewportWidth) {

    .forms--content {
        .unitize(margin-top, 45);

        input {
            .unitize(margin-bottom, 15);
        }

        textarea {
            .unitize(margin-bottom, 15);
        }

        .forms--captcha {

            strong.captcha--notice {
                .unitize(margin-bottom, 16);
            }

        }
    }
}

@media screen and (min-width: @desktopViewportWidth) {

    .forms--content {
        .unitize(margin-top, 45);

        // Margin alert message
        .alert {
            .unitize-margin(0, 0, 0, 0, 16);
        }
    }

}