.ipModuleForm {

    // disabling default styles
    form, fieldset, label {
        border: none;
        margin: 0;
        padding: 0;
    }
    input, select, textarea, option {
        font-family:  @ipFormInputFontFamily;
        font-size: @ipFormInputFontSize;
    }

    .ipmPage {
        .ipWidget-IpHtml;
    }

    .ipmFieldset {}

    .ipmField {
        margin-bottom: @ipFormFieldSpace; // double space for global errors
        position: relative; // to position inner elements respectively to the field

        .clearfix;

        &:last-child {
            margin-bottom: 0;
        }

        &.ipmRequired { } // change any styles if field is required
    }

    .ipmType-blank { // if blank we'll remove it from the flow
        margin: -(@ipFormFieldSpace) 0 0;
        position: absolute;
    }

    .ipmLabel {
        display: block;
        font-weight: bold;
        margin: 0 0 3px 0;
        min-height: 1px; // to keep the width when empty
    }

    .ipmMarker {}

    .ipmControl {}

    .ipmControlBlank {
        height: 0;
        margin: 0;
        padding: 0;
        visibility: hidden;
        width: 0;
    }

    .ipmControlInput {
        background-color: @ipFormInputBackground;
        border: 1px solid @ipBorderColor;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box; // for max-width to make sense
        color: @ipFormInputColor;
        margin: 0; // reseting default styles on some browsers
        max-width: @ipFormInputMaxWidth;
        padding: (@ipSpaceElement / 2);
        width: 100%;

        &:focus {
            background-color: @ipFormInputBackgroundActive;
            border-color: @ipBorderColorActive;
            color: @ipFormInputFocus;
        }
    }

    .ipmControlTextarea {
        .ipmControlInput;
        height: @ipFormTextareaHeight; // height is relative to the font size to have full lines
        overflow: auto; // hiding scrolls if not necessary
    }

    .ipmControlSelect {
        .ipmControlInput;
    }

    .ipmControlRadio {}

    .ipmControlCheckbox {}

    .ipmType-confirm .ipmControlCheckbox {
        float: left;
    }
    .ipmControlConfirmOptions {
        margin-left: 25px;
    }

    .ipmType-captcha .ipmControl img {
        display: block;
        max-width: 100%;
    }

    .ipmNote { // always visible
        color: lighten(@ipTextColor, 20);
        font-size: @ipFontSizeSmall;
    }

    .ipmHint { // to be shown on hover
        background-color: @ipBorderColor;
        color: #fff;
        display: none;
        font-size: @ipFontSizeSmall;
        padding: 4px 10px 2px;
        position: absolute;
        right: 0;
        top: 0;
        width: 50%;
        z-index: 1;
    }
    .ipmField:hover .ipmHint { // hint is shown only on hover
        display: block;
    }

    .ipmControlSubmit {
        background: @ipFormButtonBackground;
        border: none;
        border-radius: @ipFormButtonCorner;
        color: @ipFormButtonColor;
        cursor: pointer;
        font-family: @ipFormButtonFontFamily;
        font-weight: bold;
        margin: 0; // reseting default styles on some browsers
        padding: (@ipSpaceElement / 2) @ipSpaceElement;

        &:hover {
            box-shadow: 0 0 0 1px @ipFormButtonBackground inset;
            background: darken(@ipFormButtonBackground, 20);
        }
    }

    // errors
    .ipmControlError {
        border-color: @ipErrorColor;
    }

    .ipmFileContainer {
        .ipmHiddenInput { // hide input inside div. Input needed for jQuery Tools library to position error message
            width: 0;
            height: 0;
            overflow: hidden;

            input { // margins on input makes error message to appear lower than it should
                margin: 0;
                padding: 0;
            }
        }

        .ipmFile {
            background-color: lighten(@ipBorderColor, 20);
            margin-top: (@ipSpaceGroup / 2);
            padding: (@ipSpaceElement / 2);

            .ipmRemove {
                cursor: pointer;
                float: right;

                &:before {
                    border: 1px solid @ipBorderColor;
                    font-family: Verdana, Geneva, sans-serif;
                    font-size: 13px;
                    color: @ipTextColor;
                    content: '\00D7';
                    display: inline-block;
                    height: 15px;
                    line-height: 15px;
                    text-align: center;
                    width: 15px;
                }

                &:hover:before {
                    background-color: @ipBackgroundColorInverted;
                    color: @ipTextColorInverted;
                }
            }

            .ipmFileProgress {
                border: 1px solid @ipBorderColor;
                height: 3px;
            }

            .ipmFileProgressValue {
                background-color: @ipBorderColor;
                height: 3px;
            }

            .ipmUploadError {
                color: @ipErrorColor;
                font-size: @ipFontSizeSmall;
            }
        }
    }
}

.ipmErrorMessage { // this object is created globally next to each invalid field
    background-color: @ipErrorColor;
    color: #fff;
    font-size: @ipFontSizeSmall;
    padding: 4px 10px 2px;
}
