﻿.FieldsContainer {
    display: table;
    table-layout: auto;
    width: 100%;
}

    .FieldsContainer .Field {
        white-space: nowrap;
        display: table-row;
    }

        .FieldsContainer .Field .FormFieldLib, .FieldsContainer .Field .FormField {
            display: table-cell;
            padding: 3px;
        }

        .FieldsContainer .Field .FormField {
            white-space: normal;
        }

        .FieldsContainer .Field .FormFieldLib {
            vertical-align: top;
            padding-top: 6px;
            min-width: 180px;
            white-space: normal;
        }

    .FieldsContainer .FormFieldLib, .FieldsContainer .ControlAtLeft > .FormField {
        width: 180px;
        text-align: right;
    }

        .FieldsContainer .FormFieldLib::after {
            content: ' :';
        }

    .FieldsContainer .Field.Obligatoire > .FormFieldLib {
        font-weight: bold;
    }

        .FieldsContainer .Field.Obligatoire > .FormFieldLib > LABEL::after {
            content: ' *';
            color: red;
        }

    .FieldsContainer .ControlAtLeft > .FormFieldLib {
        text-align: left;
        width: auto;
    }

        .FieldsContainer .ControlAtLeft > .FormFieldLib::after {
            content: none;
        }

    .FieldsContainer .Field .FormField > span {
        display: inline-block;
        margin-top: 3px;
    }

    .FieldsContainer .FormField .CheckBoxList {
        max-height: 250px;
        display: block;
        overflow-y: scroll;
        border: 1px solid gray;
    }

@media only screen and (max-width:400px) {
    .FieldsContainer {
        display: block;
    }

        .FieldsContainer .Field {
            display: block;
        }

            .FieldsContainer .Field .FormFieldLib {
                display: block;
                text-align: left;
                margin: 0;
                width: auto;
            }

            .FieldsContainer .Field .FormField {
                display: block;
                box-sizing: border-box;
            }

                .FieldsContainer .Field .FormField > * {
                    width: 100%;
                    box-sizing: border-box;
                }

                .FieldsContainer .Field .FormField > input[type=checkbox] {
                    width: auto;
                }

        .FieldsContainer .ControlAtLeft {
            margin-bottom: 5px;
            margin-top: 5px;
        }

            .FieldsContainer .ControlAtLeft .FormFieldLib, .FieldsContainer .ControlAtLeft .FormField {
                display: inline-block;
                width: auto;
                min-width: 20px;
            }

            .FieldsContainer .ControlAtLeft .FormFieldLib {
                float: left;
            }

        .FiltersControl .FormField .ComboBox, .FieldsContainer .FormField > .RadComboBox {
            width: 100% !important;
        }

        .FieldsContainer .Field .FormField > span {
            margin: 0;
        }
}
