/* ==========================================================================
   12_FORM LAYOUT
   --------------------------------------------------------------------------
   * README

   * GENERAL
   * GENERAL MODIFIERS

   * ACCEPT CHECKBOX
   * ACCEPT CHECKBOX MODIFIERS
   * ALERTS CUSTOM FIELDS
   * ALERTS CUSTOM FIELDS MODIFIERS
   * BUTTON BAR
   * BUTTON BAR MODIFIERS
   * CHECKBOXES LIST
   * CHECKBOXES LIST MODIFIERS
   * CURRENCY
   * DATASET
   * DATASET MODIFIERS
   * DATE
   * FILE UPLOAD
   * FILE UPLOAD MODIFIERS
   * FORM
   * FORM MODIFIERS
   * RADIOS LIST
   * RADIOS LIST MODIFIERS
   * SCHEDULING/TIMESLOT
   * SCHEDULING/TIMESLOT MODIFIERS
   * SELECT FORM FIELD
   * UI WIDGET
   ========================================================================== */

/* README
   ========================================================================== */

/*!
 * Styles on this stylesheet are the Form Layout default styles.
 * That means they apply to the layout of the Form HTML component, andtherefore,
 * they apply only to the pages that display that component.

 * If you need to deal with an exception to these Form Layout default
 * styles, you should manage it by adding a .X--modifier class to the .X element
 * and develop the given exception nested to this .X--modifier class in
 * stylesheet #17 under the corresponding page subtitle.

 * If you need to deal with styles for a new type of Form Layout component
 * or a new sub-element for an existing one, you should develop them in this
 * stylesheet, under a new component subtitle or under the correspondent one
 * accordingly, separating them in Structure, Behaviour or Appearance styles
 * as appropriate.
 */

/* GENERAL
   ========================================================================== */

/* HTML Snippet
   --------------------------------------------------------------------------
   As we are unable to modify the Wizards HTML, we are using its basics -when
   in accessibility mode- to manage all Forms in the site with the same code.
   --------------------------------------------------------------------------

    <form class="form clearfix" action="X" autocomplete="X" id="X" method="X" role="X">
        <fieldset class="Section SectionX">
            <div class="Separator SeparatorX">
                <legend>X</legend>

                <div class="SeparatorDescription">
                    <span>X</span>
                </div>
            </div>

            <div class="fieldSpec">
                <label class="labelText" for="X">X</label>

                <div>
                    [...]
                </div>
            </div>

            <div class="fieldSpec">
                <fieldset>
                    <legend>x</legend>

                    <div>
                        [...]
                    </div>
                </fieldset>
            </div>

            [...]

        </fieldset>

        <fieldset class="Section SectionX">
            <legend class="visibility--visually-hidden">X</legend>

            <div class="fieldSpec">
                <label class="labelText" for="X">X</label>

                <div>
                    [...]
                </div>
            </div>

            <div class="fieldSpec">
                <fieldset>
                    <legend>x</legend>

                    <div>
                        [...]
                    </div>
                </fieldset>
            </div>

            [...]

            <div class="button-bar">
                <div role="navigation">
                    [...]
                </div>
            </div>
        </fieldset>
    </form>

   --------------------------------------------------------------------------
   With accesibility mode disabled
   --------------------------------------------------------------------------

    <form class="form clearfix" action="X" autocomplete="X" id="X" method="X" role="X">
        <div class="Section SectionX">
            <div class="Separator SeparatorX" id="fieldSpecContainerX">
                <span>X</span>

                <div class="SeparatorDescription" id="X">
                    <span>X</span>
                </div>
            </div>

            <div class="fieldSpec" id="fieldSpecContainerX">
                <div class="fieldSpecPadder">
                    <div class="specTitle">
                        <label class="fieldLabel">
                            <div class="labelText">X <span class="requiredField">*</span></div>

                            [...]
                        </label>
                    </div>
                </div>
            </div>

            [...]

        </div>

        [...]

    </form>

   -------------------------------------------------------------------------- */

/* Structure
   -------------------------------------------------------------------------- */
.form {
    margin: 0 auto;
    width: 100%;
}

.form + * {
    margin-top: 40px;
}

* + .form {
    margin-top: 40px;
}

.form--error {
    margin-bottom: 20px;
}

.Section + .Section {
    padding-top: 20px;
}

.Separator {
    padding-bottom: 20px;
}

.SeparatorDescription > span {
    margin-top: 6px;
}

/*
 * 1. By defalut the .fieldSpec element is full width. If you need to deal with 2
 * columns, please refer to the GENERAL MODIFIERS subtitle for further information.
 */
.fieldSpec,
.formfieldSpec,
.datasetfieldSpec {
    width: 100%; /* 1 */
    max-width: 100%;
    padding-bottom: 20px;
}

div[class*="labelText"],
.AlertCustomField label,
.fieldSpec > label,
.formfieldSpec > label,
.datasetfieldSpec > label,
.fieldSpec > fieldset > legend,
.formfieldSpec > fieldset > legend,
.datasetfieldSpec > fieldset > legend {
    padding-bottom: 6px;
}

.description,
.formdescription,
.datasetdescription {
    padding-bottom: 4px;
}

.errorMessage,
.warningMessage,
.duplicateWarningMessage {
    padding-top: 4px;
}

/* Behaviour
   -------------------------------------------------------------------------- */
.form {
    text-align: left;
}

.Separator > legend,
.Separator > span {
    display: block;
}

.Separator > legend:empty,
.Separator > span:empty {
    display: none;
}

.SeparatorDescription > span {
    display: block;
}

.SeparatorDescription > span:empty {
    display: none;
}

.fieldSpec,
.formfieldSpec,
.datasetfieldSpec {
    clear: both;
}

div[class*="labelText"],
.AlertCustomField label,
.fieldSpec > label,
.formfieldSpec > label,
.datasetfieldSpec > label,
.fieldSpec > fieldset > legend,
.formfieldSpec > fieldset > legend,
.datasetfieldSpec > fieldset > legend {
    display: block;
}

div[class*="labelText"]:empty,
.AlertCustomField label:empty,
.fieldSpec > label:empty,
.formfieldSpec > label:empty,
.datasetfieldSpec > label:empty,
.fieldSpec > fieldset > legend:empty,
.formfieldSpec > fieldset > legend:empty,
.datasetfieldSpec > fieldset > legend:empty {
    display: none
}

.description,
.formdescription,
.datasetdescription {
    display: block;
}

.description:empty,
.formdescription:empty,
.datasetdescription:empty {
    display: none
}

/*
 * 1. A simple clearfix where we cannot add it manually to the HTML.
 */
.Section:before,
.Section:after {
    content: ""; /* 1 */
    display: table; /* 1 */
}

.Section:after {
    clear: both; /* 1 */
}

.fieldSpec > div:not(.description):before,
.fieldSpec > div:not(.description):after,
.formfieldSpec > div:not(.formdescription):before,
.formfieldSpec > div:not(.formdescription):after,
.datasetfieldSpec > div:not(.datasetdescription):before,
.datasetfieldSpec > div:not(.datasetdescription):after {
    content: ""; /* 1 */
    display: table; /* 1 */
}

.fieldSpec > div:not(.description):after,
.formfieldSpec > div:not(.formdescription):after,
.datasetfieldSpec > div:not(.datasetdescription):after {
    clear: both; /* 1 */
}

div[class*="labelText"] + div:before,
div[class*="labelText"] + div:after {
    content: ""; /* 1 */
    display: table; /* 1 */
}

div[class*="labelText"] + div:after {
    clear: both; /* 1 */
}

.fieldSpec > fieldset > legend + div:before,
.fieldSpec > fieldset > legend + div:after,
.formfieldSpec > fieldset > legend + div:before,
.formfieldSpec > fieldset > legend + div:after,
.datasetfieldSpec > fieldset > legend + div:before,
.datasetfieldSpec > fieldset > legend + div:after {
    content: ""; /* 1 */
    display: table; /* 1 */
}

.fieldSpec > fieldset > legend + div:after,
.formfieldSpec > fieldset > legend + div:after,
.datasetfieldSpec > fieldset > legend + div:after {
    clear: both; /* 1 */
}

div[class*="labelText"] + label:before,
div[class*="labelText"] + label:after {
    content: ""; /* 1 */
    display: table; /* 1 */
}

div[class*="labelText"] + label:after {
    clear: both; /* 1 */
}

div[class*="labelText"] + label {
    display: block;
}

label[class*="fieldLabel"] {
    display: block;
}

.errorMessage,
.warningMessage,
.duplicateWarningMessage {
    display: block;
    clear: both;
}

/* Appearance
   -------------------------------------------------------------------------- */
.form--error {
    font-size: 12px;
    line-height: 150%;
    color: #aa1133;
}

/*
 * The following styles match the .article__header__text__title--3 default ones
 */
.Separator > legend,
.Separator > span,
.fieldSpec.MultipleDatasetEntryFormField > label {
    font-size: 28px;
    font-weight: 400;
    color: #004750;
    margin-bottom: 15px;
}

/*
 * The following styles match the .article__header__text__subtitle default ones
 */
.SeparatorDescription > span {
    font-size: 13px;
}

div[class*="labelText"],
.AlertCustomField label,
.fieldSpec > label,
.formfieldSpec > label,
.datasetfieldSpec > label,
.fieldSpec > fieldset > legend,
.formfieldSpec > fieldset > legend,
.datasetfieldSpec > fieldset > legend {
    font-size: 14px;
    font-weight: bold;
}

span[class*="requiredField"] {
    color: #aa1133;
}

.description,
.formdescription,
.datasetdescription {
    font-size: 12px;
    line-height: 150%;
}

.errorMessage,
.warningMessage,
.duplicateWarningMessage {
    font-size: 12px;
    line-height: 150%;
    color: #aa1133;
}

/* GENERAL MODIFIERS
   ========================================================================== */

/* DEFAULT > The .fieldSpec element is visible and displaying a label.
   --------------------------------------------------------------------------
   .form__item--hidden > To hide a field entirely
   --------------------------------------------------------------------------
   .form__item--hidden-label > To hide a field's label
   -------------------------------------------------------------------------- */

/* Behaviour
  -------------------------------------------------------------------------- */
.fieldSpec.form__item--hidden {
    display: none;
}

.fieldSpec.form__item--hidden-label .labelText,
.fieldSpec.form__item--hidden-label > label,
.fieldSpec.form__item--hidden-label .formfieldSpec > label,
.fieldSpec.form__item--hidden-label .datasetfieldSpec > label,
.fieldSpec.form__item--hidden-label > fieldset > legend,
.fieldSpec.form__item--hidden-label .formfieldSpec > fieldset > legend,
.fieldSpec.form__item--hidden-label .datasetfieldSpec > fieldset > legend {
    display: none
}

/* STRUCTURE MODIFIERS (DEALING WITH COLUMNS WITH A MODIFIER FIELD BY FIELD)
   ========================================================================== */

/* DEFAULT > All .fieldSpec elements are full width.
   --------------------------------------------------------------------------
   .form__item--odd and .form__item--even > To deal with 2 columns, use
   these two classes as appropriate. It may seem tedious but it's worth it:
   they float and clear wisely to achieve complex layouts including conditional
   fields, empty spots, combinations with full width fields, combinations with
   very tall fields... all without exploding, without patches, without
   min-heights nor any other weird stuff.
   -------------------------------------------------------------------------- */

/* Behaviour
  -------------------------------------------------------------------------- */
.fieldSpec.form__item--odd,
.fieldSpec.form__item--even {
    -webkit-transition: all 250ms ease-in-out;
    -ms-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}

@media all and (min-width:769px) {

    /* Structure
      -------------------------------------------------------------------------- */

    /*
     * 1. 50% width minus half the final gutter
     */
    .fieldSpec.form__item--odd,
    .fieldSpec.form__item--even {
        width: calc(50% - 10px); /* 1 */
    }

    /*
     * 1. Setting the element as a left column item.
     */
    .fieldSpec.form__item--odd {
        float: left; /* 1 */
    }

    /*
     * 1. Setting the element as a right column item.
     */
    .fieldSpec.form__item--even {
        float: right; /* 1 */
    }

    /* Behaviour
       -------------------------------------------------------------------------- */

    /*
     * 1. Clearing all floats (two consecutive .form__item--odd elements will stack just fine).
     */
    .fieldSpec.form__item--odd {
        clear: both; /* 1 */
    }

    /*
     * 1. Clearing only the right float (in case we have two consecutive .form__item--even elements).
     */
    .fieldSpec.form__item--even {
        clear: right; /* 1 */
    }

}

/* STRUCTURE MODIFIERS (DEALING WITH COLUMNS WITH A MODIFIER IN THE .FORM PARENT)
   ========================================================================== */

/* DEFAULT > All .form--cols2 .fieldSpec fields are arranged in 2 columns, and we will
   manage complex layouts including conditional fields, empty spots, combinations
   with full width fields, combinations with very tall fields... with modifiers
   applied to specific fields.
   --------------------------------------------------------------------------
   .form__item--clearer > To clear the floats
   --------------------------------------------------------------------------
   .form__item--full > To make a field full width
   -------------------------------------------------------------------------- */

@media all and (min-width:769px) {

    /* Structure
      -------------------------------------------------------------------------- */

    .form--cols2 {
        margin-left: -10px;
        margin-right: -10px;
    }

    /*
     * 1. 50% width and floats
     */
    .form--cols2 .fieldSpec:not(.form__item--full) {
        width: 50%; /* 1 */
        float: left; /* 1 */
    }

    /*
     * 1. The gutter
     */
    .form--cols2 .fieldSpec .fieldSpecPadder {
        padding-left: 10px; /* 1 */
        padding-right: 10px; /* 1 */
    }

    /* Behaviour
       -------------------------------------------------------------------------- */
    .form--cols2 .fieldSpec:nth-of-type(even) {
        clear: none;
    }

    /*
     * 1. Clearing all floats
     */
    .form--cols2 .form__item--clearer,
    .form--cols2 .form__item--full {
        clear: both !important; /* 1 */
    }

}

/* ACCEPT CHECKBOX
   ========================================================================== */

/* HTML Snippet
   --------------------------------------------------------------------------
   With accesibility mode enabled
   --------------------------------------------------------------------------

    <div class="fieldSpec AcceptCheckboxField fieldSpecPadder" id="fieldSpecContainerX">
        <label class="requiredField">X</label>

        <div>
            <label for="X">X</label>

            <div class="description" id="X-description">X</div>

            <input id="X" type="checkbox" tabindex="X" value="X" name="X" aria-describedby="X-description" aria-labeledby="X-label">
        </div>
    </div>

   --------------------------------------------------------------------------
   With accesibility mode disabled
   --------------------------------------------------------------------------

    <div class="fieldSpec AcceptCheckboxField" id="fieldSpecContainerX">
        <div class="fieldSpecPadder">
            <div class="specTitle">
                <div class="fieldLabel">
                    <div class="labelText">X <span class="requiredField">*</span></div>

                    <label for="X"><input id="X" type="checkbox" tabindex="X" value="1" name="X">X</label>
                </div>
            </div>
        </div>
    </div>

   -------------------------------------------------------------------------- */

/* Structure
   -------------------------------------------------------------------------- */
.fieldSpec.AcceptCheckboxField input {
    position: absolute;
    top: 27px;
    left: 0px;
}

/* ACCEPT CHECKBOX MODIFIERS
   ========================================================================== */

/* DEFAULT > The .AcceptCheckboxField checkbox is next to the Description text.
   --------------------------------------------------------------------------
   .AcceptCheckboxField--checkbox-in-field-label > To reposition the checkbox
   net to the label text.
   -------------------------------------------------------------------------- */

/* Structure
   -------------------------------------------------------------------------- */
.fieldSpec.AcceptCheckboxField--checkbox-in-field-label div[class*="labelText"],
.fieldSpec.AcceptCheckboxField--checkbox-in-field-label > label {
    padding-left: 20px;
}

/* Behaviour
   -------------------------------------------------------------------------- */
.fieldSpec.AcceptCheckboxField--checkbox-in-field-label {
    position: relative;
}

.fieldSpec.AcceptCheckboxField--checkbox-in-field-label input {
    position: absolute;
    top: 1px;
    left: 0;
}
.fieldSpec.AcceptCheckboxField legend {
  float: left;
  margin-right: 5px;
}
.fieldSpec.AcceptCheckboxField:not(.agentField) > div {
  float: left;
  width: 25px;
}
.fieldSpec.AcceptCheckboxField:not(.agentField) {
    border-top: solid 1px #CDCDCD;
    border-bottom: solid 1px #CDCDCD;
    padding: 25px 0 25px 25px;
    margin: 25px 0;
    position: relative;
}

/* ALERTS CUSTOM FIELDS
   ========================================================================== */

/* HTML Snippet
   --------------------------------------------------------------------------

    <div>
        <br>

        <label for="X">X</label>

        <br>

        <select class="jobCustomField_X SelectFormField" name="X" tabindex="0" id="X">
            [...]
        </select>

        <br>

        <label for="X">X</label>

        <br>

        <select class="jobCustomField_X SelectFormField" name="X" tabindex="0" id="X">
            [...]
        </select>
    </div>

   -------------------------------------------------------------------------- */

/* Structure
   -------------------------------------------------------------------------- */
.AlertCustomField input,
.AlertCustomField select,
.AlertCustomField textarea {
    margin-bottom: 20px; /* This margin matches the .fieldSpec padding-bottom */
}

/* Behaviour
   -------------------------------------------------------------------------- */
.tpt_searchAgentHiddenFields {
    display: none;
}

.tpt_searchAgentHiddenFields.open {
    display: block;
}

.AlertCustomField br {
    display: none;
}

/* ALERTS CUSTOM FIELDS MODIFIERS
   ========================================================================== */

/* DEFAULT > The fields in the .AlertCustomField element are full width.
   --------------------------------------------------------------------------
   .AlertCustomField--left-col > To emulate a left column from the wrapper (as we
   don't have access to the internal HTML, we cannot play with columns in there)
   -------------------------------------------------------------------------- */

@media all and (min-width:769px) {

    /* Structure
      -------------------------------------------------------------------------- */

    /*
     * 1. 50% width minus half the final gutter
     */
    .AlertCustomField--left-col {
        width: calc(50% - 10px); /* 1 */
    }

    /*
     * 1. Setting the element as a left column item.
     */
    .AlertCustomField--left-col {
        float: left; /* 1 */
    }

    /* Behaviour
       -------------------------------------------------------------------------- */

    /*
     * 1. Clearing all floats.
     */
    .AlertCustomField--left-col {
        clear: both; /* 1 */
    }

}

/* BUTTON BAR
   ========================================================================== */

/* HTML Snippet
   --------------------------------------------------------------------------
   With accesibility mode enabled AND the class .button-bar assigned manually
   --------------------------------------------------------------------------

    <div class="fieldSpec button-bar fieldSpecPadder" id="fieldSpecContainerX">
        <label>X</label>

        <div role="navigation">
            [...]
        </div>
    </div>

   -------------------------------------------------------------------------- */

/* Structure
   -------------------------------------------------------------------------- */
.button-bar {
    padding: 0;
    margin-bottom: -10px;
}

.button-bar button,
.button-bar .button {
    width: 100%;
    margin-bottom: 10px;
}

/* Behaviour
   -------------------------------------------------------------------------- */
.button-bar {
    clear: both;
    text-align: center;
    -webkit-transition: all 250ms ease-in-out;
    -ms-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}

/*
 * 1. A simple clearfix where we cannot add it manually to the HTML.
 */
.button-bar:before,
.button-bar:after {
    content: ""; /* 1 */
    display: table; /* 1 */
}

.button-bar:after {
    clear: both; /* 1 */
}
.MultipleDatasetEntryFormField + .button-bar {
  padding-top: 20px;
}

@media all and (min-width:769px) and (max-width:1024px) {

    /* Structure
       -------------------------------------------------------------------------- */

    /*
     * 1. 50% width minus half the final gutter
     */
    .button-bar:not(.button-bar--1col) button,
    .button-bar:not(.button-bar--1col) .button {
        width: calc(50% - 10px); /* 1 */
    }

    /*
     * 1. Setting the element as a left column item.
     */
    .button-bar:not(.button-bar--1col) button:nth-child(odd),
    .button-bar:not(.button-bar--1col) .button:nth-child(odd) {
        float: left; /* 1 */
    }

    /*
     * 1. Setting the element as a right column item.
     */
    .button-bar:not(.button-bar--1col) button:nth-child(even),
    .button-bar:not(.button-bar--1col) .button:nth-child(even) {
        float: right; /* 1 */
    }

    /* Behaviour
       -------------------------------------------------------------------------- */

    /*
     * 1. Clearing all floats.
     */
    .button-bar:not(.button-bar--1col) button:nth-child(odd),
    .button-bar:not(.button-bar--1col) .button:nth-child(odd) {
        clear: both; /* 1 */
    }

    /*
     * 1. Clearing only the right float.
     */
    .button-bar:not(.button-bar--1col) button:nth-child(even),
    .button-bar:not(.button-bar--1col) .button:nth-child(even) {
        clear: right; /* 1 */
    }

}

@media all and (min-width:1025px) {

    /* Structure
       -------------------------------------------------------------------------- */
    .button-bar:not([class*="button-bar--"]) button,
    .button-bar:not([class*="button-bar--"]) .button {
        float: left;
        width: auto;
        min-width: 150px;
    }

    .button-bar:not([class*="button-bar--"]) button + button,
    .button-bar:not([class*="button-bar--"]) .button + .button {
        margin-left: 20px;
    }

}

/* BUTTON BAR MODIFIERS
   ========================================================================== */

/* DEFAULT > The buttons in the .button-bar element are auto width and left
   aligned. In tablet widths they will always arrange in two colulmns, and in
   mobile widths they will always expand to full width.
   --------------------------------------------------------------------------
   .button-bar--center > To center buttons
   .button-bar--1col > To make buttons full width
   .button-bar--2col > To arrange buttons in two columns
   -------------------------------------------------------------------------- */

@media all and (min-width:1025px) {

    /* Structure
       -------------------------------------------------------------------------- */
    .button-bar--center button,
    .button-bar--center .button {
        width: auto;
        min-width: 150px;
        margin-right: 10px;
        margin-left: 10px;
    }

    .button-bar--1col button,
    .button-bar--1col .button {
        width: 100%;
    }

    /*
     * 1. 50% width minus half the final gutter
     */
    .button-bar--2col button,
    .button-bar--2col .button {
        width: calc(50% - 10px);
    }

    /*
     * 1. Setting the element as a left column item.
     */
    .button-bar--2col button:nth-child(odd),
    .button-bar--2col .button:nth-child(odd) {
        float: left; /* 1 */
    }

    /*
     * 1. Setting the element as a right column item.
     */
    .button-bar--2col button:nth-child(even),
    .button-bar--2col .button:nth-child(even) {
        float: right; /* 1 */
    }

    /* Behaviour
      -------------------------------------------------------------------------- */

    /*
     * 1. Clearing all floats (two consecutive elements will stack just fine).
     */
    .button-bar--2col button:nth-child(odd),
    .button-bar--2col .button:nth-child(odd) {
        clear: both; /* 1 */
    }

    /*
     * 1. Clearing only the right float (in case we have two consecutive elements).
     */
    .button-bar--2col button:nth-child(even),
    .button-bar--2col .button:nth-child(even) {
        clear: right; /* 1 */
    }

}

/* CHECKBOXES LIST
   ========================================================================== */

/* HTML Snippet
   --------------------------------------------------------------------------
   With accesibility mode enabled
   --------------------------------------------------------------------------

    <div class="fieldSpec CheckBoxListFormField fieldSpecPadder" id="fieldSpecContainerX">
        <label for="X">X</label>

        <div class="description" id="X-description">X</div>

        <div class="CheckBoxListFormField" id="X">
            <div>
                <input id="X_0" type="checkbox" name="X[]" value="X" tabindex="X" aria-describedby="X-description">
                <label for="X_0">X</label>
            </div>

            <div>
                <input id="X_1" type="checkbox" name="X[]" value="X" tabindex="X" aria-describedby="X-description">
                <label for="X_1">X</label>
            </div>

            <div>
                <input id="X_2" type="checkbox" name="X[]" value="X" tabindex="X" aria-describedby="X-description">
                <label for="X_2">X</label>
            </div>

            <a class="CheckBoxListFormField_more" onclick="X" href="X" data-num-options-to-show="3">more</a>

            <div style="display: none;" class="CheckBoxListFormField_hiddenOptions">
                <div>
                    <input id="X_3" type="checkbox" name="X[]" value="X" tabindex="X" aria-describedby="X-description">
                    <label for="X_3">X</label>
                </div>

                <div>
                    <input id="X_4" type="checkbox" name="X[]" value="X" tabindex="X" aria-describedby="X-description">
                    <label for="X_4">X</label>
                </div>

                <div>
                    <input id="X_5" type="checkbox" name="X[]" value="X" tabindex="X" aria-describedby="X-description">
                    <label for="X_5">X</label>
                </div>
            </div>
        </div>
    </div>

   --------------------------------------------------------------------------
   With accesibility mode disabled
   --------------------------------------------------------------------------

    <div class="fieldSpec CheckBoxListFormField" id="fieldSpecContainerX">
        <div class="fieldSpecPadder">
            <div class="specTitle">
                <div class="fieldLabel">
                    <div class="labelText">X</div>

                    <div class="description">X</div>

                    <div class=" CheckBoxListFormField" id="X">
                        <label for="X_0">
                            <input id="X_0" type="checkbox" name="X[]" value="X" tabindex="X"> X<div class="cb"></div>
                        </label>

                        <label for="X_1">
                            <input id="X_1" type="checkbox" name="X[]" value="X" tabindex="X"> X<div class="cb"></div>
                        </label>

                        <label for="X_2">
                            <input id="X_2" type="checkbox" name="X[]" value="X" tabindex="X"> X<div class="cb"></div>
                        </label>

                        <a class="CheckBoxListFormField_more" onclick="showHiddenElementsFor(this); return false;" href="X" data-num-options-to-show="3">more</a>

                        <div style="display: none;" class="CheckBoxListFormField_hiddenOptions">
                            <label for="X_3">
                                <input id="X_3" type="checkbox" name="X[]" value="X" tabindex="X"> X<div class="cb"></div>
                            </label>

                            <label for="X_4">
                                <input id="X_4" type="checkbox" name="X[]" value="X" tabindex="X"> X<div class="cb"></div>
                            </label>

                            <label for="X_5">
                                <input id="X_5" type="checkbox" name="X[]" value="X" tabindex="X"> X<div class="cb"></div>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

   -------------------------------------------------------------------------- */

/* Structure
   -------------------------------------------------------------------------- */
div[class*="fieldSpec"].CheckBoxListFormField .CheckBoxListFormField > div:not(.CheckBoxListFormField_hiddenOptions),
div[class*="fieldSpec"].CheckBoxListFormField .CheckBoxListFormField > label,
div[class*="fieldSpec"].CheckBoxListFormField .CheckBoxListFormField_hiddenOptions > div,
div[class*="fieldSpec"].CheckBoxListFormField .CheckBoxListFormField_hiddenOptions > label {
    margin-top: 6px;
}

div[class*="fieldSpec"].CheckBoxListFormField input[type="checkbox"] {
    margin-right: 8px;
}

.formfieldSpec.CheckBoxListFormField .formlabelText + div > label + label {
    margin-top: 6px;
}

.formfieldSpec.CheckBoxListFormField .formlabelText + div > label input[type="checkbox"] {
    float: left;
    margin: 2px 8px 3px 0;
}

.CheckBoxListFormField_more {
    float: left;
    margin-top: 5px;
}

/* Behaviour
   -------------------------------------------------------------------------- */
div[class*="fieldSpec"].CheckBoxListFormField .CheckBoxListFormField > label,
div[class*="fieldSpec"].CheckBoxListFormField .CheckBoxListFormField_hiddenOptions > label * {
    display: block;
}

div[class*="fieldSpec"].CheckBoxListFormField .CheckBoxListFormField > div:not(.CheckBoxListFormField_hiddenOptions) *,
div[class*="fieldSpec"].CheckBoxListFormField .CheckBoxListFormField > label *,
div[class*="fieldSpec"].CheckBoxListFormField .CheckBoxListFormField_hiddenOptions > div *,
div[class*="fieldSpec"].CheckBoxListFormField .CheckBoxListFormField_hiddenOptions > label * {
    display: inline-block;
    vertical-align: middle;
}

.formfieldSpec.CheckBoxListFormField .formlabelText + div > label {
    display: block;
}

.CheckBoxListFormField_more {
    clear: both;
}

/* Appearance
   -------------------------------------------------------------------------- */
div[class*="fieldSpec"].CheckBoxListFormField .CheckBoxListFormField label {
    font-size: 14px;
}

.CheckBoxListFormField_more {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    text-decoration: none;
    color: #26C59A; /* var(--color--site) in an IE free world - use this comment as a handler for smart find & replace! */
}

.CheckBoxListFormField_more:hover,
.CheckBoxListFormField_more:focus {
    border-bottom-color: inherit;
}

/* CHECKBOXES LIST MODIFIERS
   ========================================================================== */

/* DEFAULT > The items in the .CheckBoxListFormField element are full width.
   --------------------------------------------------------------------------
   .CheckBoxListFormField--cols2 > To arrange the items list in two columns.
   -------------------------------------------------------------------------- */

@media all and (min-width:769px) {

    /* Structure
      -------------------------------------------------------------------------- */
    div[class*="fieldSpec"].CheckBoxListFormField--cols2 .CheckBoxListFormField {
        -webkit-column-gap: 40px;
        -moz-column-gap: 40px;
        column-gap: 40px;
    }

    /* Behaviour
       -------------------------------------------------------------------------- */
    div[class*="fieldSpec"].CheckBoxListFormField--cols .CheckBoxListFormField {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }

    div[class*="fieldSpec"].CheckBoxListFormField--cols2 .CheckBoxListFormField>* {
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;
    }

}

/* CURRENCY
   ========================================================================== */

/* HTML Snippet
   --------------------------------------------------------------------------
   With accesibility mode enabled
   --------------------------------------------------------------------------

    <div class="fieldSpec fieldSpecPadder" id="fieldSpecContainerX">
        <label for="X">X</label>

        <span class="_format">$ <input type="text" id="X" name="X" tabindex="X"></span>
    </div>

   --------------------------------------------------------------------------
   With accesibility mode disabled
   --------------------------------------------------------------------------

    <div class="fieldSpec " id="fieldSpecContainerX">
        <div class="fieldSpecPadder">
            <div class="specTitle">
                <label class="fieldLabel">
                    <div class="labelText">X</div>

                    <div class="description">X</div>

                    <span class="_format">$ <input type="text" id="X" name="X" tabindex="X" class="" value="" placeholder=""></span>
                </label>
            </div>
        </div>
    </div>

   -------------------------------------------------------------------------- */

/* Structure
   -------------------------------------------------------------------------- */
div[class*="fieldSpec"] span[class*="_format"] input {
    float: right;
    width: calc(100% - 20px);
}

/* Behaviour
   -------------------------------------------------------------------------- */
div[class*="fieldSpec"] span[class*="_format"] {
    display: block;
}

/*
 * 1. A simple clearfix where we cannot add it manually to the HTML.
 */
div[class*="fieldSpec"] span[class*="_format"]:before,
div[class*="fieldSpec"] span[class*="_format"]:after {
    content: ""; /* 1 */
    display: table; /* 1 */
}

div[class*="fieldSpec"] span[class*="_format"]:after {
    clear: both; /* 1 */
}

/* Appearance
   -------------------------------------------------------------------------- */

div[class*="fieldSpec"] span[class*="_format"] {
    line-height: 40px; /* This is the input height, so the $ centers vertically */
}

/* DATASET
   ========================================================================== */

/* HTML Snippet
   --------------------------------------------------------------------------
   With accesibility mode enabled
   --------------------------------------------------------------------------

    <div class="fieldSpec MultipleDatasetEntryFormField fieldSpecPadder" id="fieldSpecContainerX">
        <label for="X">X</label>

        <div class="description" id="X-description">X</div>

        <div class="multipleDatasetWrapper">
            <div id="multipleDatasetEntry_X_0">
                <a class="removeDatasetRow" href="X" name="removeRowFor_X" tabindex="X" onclick="X">remove</a>

                <div class="datasetFieldContainer" id="datasetFieldContainerX-1-0" data-schema-field-id="X">
                    <div class="datasetfieldSpec SelectFormField datasetfieldSpecPadder" id="fieldSpecContainerX-1-0">
                        <label for="X-1-0">X</label>

                        <div>
                            [...]
                        </div>
                    </div>
                </div>
            </div>

            <a class="addDatasetRow" href="X" id="addRowFor_X" tabindex="X" onclick="X">add another</a>
        </div>
    </div>

   --------------------------------------------------------------------------
   With accesibility mode disabled
   --------------------------------------------------------------------------

    <div class="fieldSpec MultipleDatasetEntryFormField" id="fieldSpecContainerX">
        <div class="fieldSpecPadder">
            <div class="specTitle">
                <div class="fieldLabel">
                    <div class="labelText">X</div>

                    <div class="description">X</div>

                    <div class="multipleDatasetWrapper">
                        <div id="multipleDatasetEntry_X_0">
                            <a class="removeDatasetRow" href="X" name="removeRowFor_X" tabindex="X" onclick="X">remove</a>

                            <div id="datasetFieldContainerX-1-0" class="datasetFieldContainer" data-schema-field-id="X">
                                <div class="datasetfieldSpec SelectFormField" id="fieldSpecContainerX-1-0">
                                    <div class="datasetfieldSpecPadder">
                                        <div class="datasetspecTitle">
                                            <label class="datasetfieldLabel">
                                                <div class="datasetlabelText">X</div>

                                                <div>
                                                    [...]
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <a class="addDatasetRow" href="X" id="addRowFor_X" tabindex="X" onclick="X">add another</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

   -------------------------------------------------------------------------- */

/* Structure
   -------------------------------------------------------------------------- */
.removeDatasetRow,
.addDatasetRow {
    float: left;
}

.removeDatasetRow {
    margin-bottom: 5px;
}

.addDatasetRow {
    margin-top: 5px;
}

/* Behaviour
   -------------------------------------------------------------------------- */
div[class*="fieldSpec"].MultipleDatasetEntryFormField {
  border-top: solid 1px #CDCDCD;
  padding: 25px 0 0;
  margin-top: 25px;
}
div[class*="fieldSpec"].MultipleDatasetEntryFormField .datasetFieldContainer {
    clear: both;
}

.removeDatasetRow,
.addDatasetRow {
    clear: both;
}

/* Appearance
   -------------------------------------------------------------------------- */
.removeDatasetRow,
.addDatasetRow {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    font-size: 16px;
    text-decoration: none;
    text-transform: capitalize;
}

.removeDatasetRow {
    color: #128474;
}

.addDatasetRow {
    color: #128474;
  }

.removeDatasetRow:hover,
.addDatasetRow:hover,
.removeDatasetRow:focus,
.addDatasetRow:focus {
    border-bottom-color: inherit;
}

/* DATASET MODIFIERS
   ========================================================================== */

/* DEFAULT > The fields in the .MultipleDatasetEntryFormField element are full width.
   --------------------------------------------------------------------------
   .MultipleDatasetEntryFormField--cols2 > To arrange the dataset fields in two columns.
   -------------------------------------------------------------------------- */

@media all and (min-width:769px) {

    /* Structure
      -------------------------------------------------------------------------- */

    /*
     * 1. 50% width minus half the final gutter
     */
    div[class*="fieldSpec"].MultipleDatasetEntryFormField--cols2 [id^="multipleDatasetEntry_"] > div {
        width: calc(50% - 10px); /* 1 */
    }

    /*
     * 1. Setting the element as a left column item.
     */
    div[class*="fieldSpec"].MultipleDatasetEntryFormField--cols2 [id^="multipleDatasetEntry_"] > div:nth-of-type(odd) {
        float: left; /* 1 */
    }

    /*
     * 1. Setting the element as a right column item.
     */
    div[class*="fieldSpec"].MultipleDatasetEntryFormField--cols2 [id^="multipleDatasetEntry_"] > div:nth-of-type(even) {
        float: right; /* 1 */
    }

    /* Behaviour
      -------------------------------------------------------------------------- */

    /*
     * 1. A simple clearfix where we cannot add it manually to the HTML.
     */
    div[class*="fieldSpec"].MultipleDatasetEntryFormField--cols2 [id^="multipleDatasetEntry_"]:before,
    div[class*="fieldSpec"].MultipleDatasetEntryFormField--cols2 [id^="multipleDatasetEntry_"]:after {
        content: ""; /* 1 */
        display: table; /* 1 */
    }

    div[class*="fieldSpec"].MultipleDatasetEntryFormField--cols2 [id^="multipleDatasetEntry_"]:after {
        clear: both; /* 1 */
    }

    div[class*="fieldSpec"].MultipleDatasetEntryFormField--cols2 [id^="multipleDatasetEntry_"] > div {
        -webkit-transition: all 250ms ease-in-out;
        -ms-transition: all 250ms ease-in-out;
        transition: all 250ms ease-in-out;
    }

    /*
     * 1. Clearing all floats (two consecutive .form__item--odd elements will stack just fine).
     */
    div[class*="fieldSpec"].MultipleDatasetEntryFormField--cols2 [id^="multipleDatasetEntry_"] > div:nth-of-type(odd) {
        clear: both; /* 1 */
    }

    /*
     * 1. Clearing only the right float (in case we have two consecutive .form__item--even elements).
     */
    div[class*="fieldSpec"].MultipleDatasetEntryFormField--cols2 [id^="multipleDatasetEntry_"] > div:nth-of-type(even) {
        clear: right; /* 1 */
    }

}

/* DATE
   ========================================================================== */

/* HTML Snippet
   --------------------------------------------------------------------------
   With accesibility mode enabled
   --------------------------------------------------------------------------

    <div class="fieldSpec DateFormField fieldSpecPadder" id="fieldSpecContainerX">
        <label for="X">X</label>

        <div class="description" id="X-description">X</div>

        <div>
            <div>
                <select class="yearInput" id="X_year" name="X_year" tabindex="X">
                    [...]
                </select>

                <select class="monthInput" id="X_month" name="X_month" tabindex="X">
                    [...]
                </select>

                <select class="dayInput" id="X_day" name="X_day" tabindex="X">
                    [...]
                </select>
            </div>
        </div>
    </div>

   --------------------------------------------------------------------------
   With accesibility mode disabled
   --------------------------------------------------------------------------

    <div class="fieldSpec DateFormField" id="fieldSpecContainerX">
        <div class="fieldSpecPadder">
            <div class="specTitle">
                <div class="fieldLabel">
                    <div class="labelText">X</div>

                    <div class="description">X</div>

                    <div>
                        <div>
                            <select class="yearInput" id="X_year" name="X_year" tabindex="X">
                                [...]
                            </select>

                            <select class="monthInput" id="X_month" name="X_month" tabindex="X">
                                [...]
                            </select>

                            <select class="dayInput" id="X_day" name="X_day" tabindex="X">
                                [...]
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

   -------------------------------------------------------------------------- */

/* Structure
   -------------------------------------------------------------------------- */
div[class*="fieldSpec"].DateFormField select {
    float: left;
}

div[class*="fieldSpec"].DateFormField select.yearInput {
    width: 25%;
}

div[class*="fieldSpec"].DateFormField select.monthInput {
    width: 45%;
}

div[class*="fieldSpec"].DateFormField select.dayInput {
    width: 20%;
}

div[class*="fieldSpec"].DateFormField select + select {
    margin-left: 5%;
}

/* FILE UPLOAD
   ========================================================================== */

/* HTML Snippet
   --------------------------------------------------------------------------
   With accesibility mode enabled
   --------------------------------------------------------------------------

    <div class="fieldSpec FileField fieldSpecPadder" id="fieldSpecContainerX">
        <label for="X">X</label>

        <div class="description" id="X-description">X</div>

        <div id="fileInput_X">
            <input class="FileField" type="file" name="file_X" id="X" tabindex="X" aria-describedby="X-description" aria-labeledby="X-label" onchange="X">

            <a class="dropbox-dropin-btn dropbox-dropin-default" href="X"><span class="dropin-btn-status"></span>Choose from Dropbox</a>

            <a class="drivePickerButton" id="drivePicker">Choose from Google Drive</a>
        </div>
    </div>

   --------------------------------------------------------------------------
   With accesibility mode disabled
   --------------------------------------------------------------------------

    <div class="fieldSpec FileField" id="fieldSpecContainerX">
        <div class="fieldSpecPadder">
            <div class="specTitle">
                <label class="fieldLabel">
                    <div class="labelText">X</div>

                    <div class="description">X</div>

                    <div id="fileInput_X">
                        <input class="FileField" type="file" name="file_X" id="X" tabindex="0" onchange="X">

                        <div class="uploadedFile">X <button class="removeFile" type="submit" name="removeFile" value="X">Remove</button></div>

                        <a class="dropbox-dropin-btn dropbox-dropin-default" href="#"><span class="dropin-btn-status"></span>Choose from Dropbox</a>

                        <a class="drivePickerButton" id="drivePicker">Choose from Google Drive</a>
                    </div>
                </label>
            </div>
        </div>
    </div>

   -------------------------------------------------------------------------- */

/* Structure
   -------------------------------------------------------------------------- */
.uploadedFile {
    padding: 4px 0 0 0;
}

/* Behaviour
   -------------------------------------------------------------------------- */
.uploadedFile {
    display: block;
    clear: both;
    word-break: break-all;
}

/* Appearance
   -------------------------------------------------------------------------- */
.uploadedFile {
    font-size: 12px;
    line-height: 150%;
}

/* FILE UPLOAD MODIFIERS
   ========================================================================== */

/* DEFAULT > When the "dropboxChooser" and/or "googleDriveChooser" instance
   configs are set to TRUE, two icons render next to the file input, and those
   styles are broken by default. So you need this class.
   --------------------------------------------------------------------------
   .form__item--upload-with-dropbox-and-drive > To make the file upload with
   Dropbox and Drive defalut styles fancier.
   -------------------------------------------------------------------------- */

/* Structure
  -------------------------------------------------------------------------- */
div[class*="fieldSpec"].FileField.form__item--upload-with-dropbox-and-drive div[id*="fileInput_"] {
    padding-top: 40px; /* This is the input height */
}

div[class*="fieldSpec"].FileField.form__item--upload-with-dropbox-and-drive div[id*="fileInput_"] input[type="file"] {
    width: calc(100% - 90px); /* 90px is to make space for the Dropbox and Drive buttons widths (40px) and margins (5px) */
}

div[class*="fieldSpec"].FileField.form__item--upload-with-dropbox-and-drive div[id*="fileInput_"] a {
    width: 40px;
    height: 40px; /* This is the input height */
    padding: 0;
}

div[class*="fieldSpec"].FileField.form__item--upload-with-dropbox-and-drive div[id*="fileInput_"] span[id*="Info_"] {
    padding-top: 4px;
    padding-right: 2px;
}

/* Behaviour
   -------------------------------------------------------------------------- */
div[class*="fieldSpec"].FileField.form__item--upload-with-dropbox-and-drive div[id*="fileInput_"] {
    position: relative;
}

div[class*="fieldSpec"].FileField.form__item--upload-with-dropbox-and-drive div[id*="fileInput_"] input[type="file"],
div[class*="fieldSpec"].FileField.form__item--upload-with-dropbox-and-drive div[id*="fileInput_"] a {
    display: block;
    position: absolute;
    top: 0;
}

div[class*="fieldSpec"].FileField.form__item--upload-with-dropbox-and-drive div[id*="fileInput_"] input[type="file"] {
    right: 0;
}

div[class*="fieldSpec"].FileField.form__item--upload-with-dropbox-and-drive div[id*="fileInput_"] a {
    left: 0;
    box-sizing: border-box !important;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 60%;
    overflow: hidden;
}

div[class*="fieldSpec"].FileField.form__item--upload-with-dropbox-and-drive div[id*="fileInput_"] a + a {
    left: 45px; /* This is the width of the first button width (40px) and margin (5px) */
}

div[class*="fieldSpec"].FileField.form__item--upload-with-dropbox-and-drive div[id*="fileInput_"] span[id*="Info_"] {
    display: inline-block;
    word-break: break-all;
}

/* Appearance
   -------------------------------------------------------------------------- */
div[class*="fieldSpec"].FileField.form__item--upload-with-dropbox-and-drive div[id*="fileInput_"] a {
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
    border-color: #CACACA; /* var(--color--borders) in an IE free world - use this comment as a handler for smart find & replace! */
    background-color: #FFFFFF;
    filter: none !important;
    text-indent: -9999px;
    cursor: pointer;
}

div[class*="fieldSpec"].FileField.form__item--upload-with-dropbox-and-drive div[id*="fileInput_"] a.dropbox-dropin-btn {
    background-image: url(../images/icon--dropbox.svg);
}

div[class*="fieldSpec"].FileField.form__item--upload-with-dropbox-and-drive div[id*="fileInput_"] a.drivePickerButton {
    background-image: url(../images/icon--google-drive.svg);
}

div[class*="fieldSpec"].FileField.form__item--upload-with-dropbox-and-drive div[id*="fileInput_"] span[id*="Info_"] {
    font-size: 12px;
    line-height: 150%;
}

/* FORM
   ========================================================================== */

/* HTML Snippet
   --------------------------------------------------------------------------
   With accesibility mode enabled
   --------------------------------------------------------------------------

    <div class="fieldSpec formContainer fieldSpecPadder" id="fieldSpecContainerX">
        <label for="X">X</label>

        <div class="description" id="X-description">X</div>

        <div class="formContainer">
            <div class="FormHeader FormHeader_X">
                <h3>X</h3>
            </div>

            <div class="schemaFieldContainer" id="schemaFieldContainerX-1" data-schema-field-id="178">
                <div class="formfieldSpec X formfieldSpecPadder" id="fieldSpecContainerX-1">
                    <label for="X-1">X</label>

                    <div class="X" id="X-1">
                        [...]
                    </div>
                </div>
            </div>

            [...]

        </div>
    </div>

   --------------------------------------------------------------------------
   With accesibility mode disabled
   --------------------------------------------------------------------------

    <div class="fieldSpec formContainer" id="fieldSpecContainerX">
        <div class="fieldSpecPadder">
            <div class="specTitle">
                <div class="fieldLabel">
                    <div class="labelText">X</div>

                    <div class="description">X</div>

                    <div class="formContainer">
                        <div class="FormHeader FormHeader_X">
                            <h3>X</h3>
                        </div>

                        <div class="schemaFieldContainer" id="schemaFieldContainerX-1" data-schema-field-id="178">
                            <div class="formfieldSpec CheckBoxListFormField" id="fieldSpecContainerX-1">
                                <div class="formfieldSpecPadder">
                                    <div class="formspecTitle">
                                        <div class="formfieldLabel">
                                            <div class="formlabelText">X</div>

                                            <div class="X" id="X-1">
                                                [...]
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        [...]

                    </div>
                </div>
            </div>
        </div>
    </div>

   -------------------------------------------------------------------------- */

/* Structure
   -------------------------------------------------------------------------- */
.fieldSpec.formContainer .FormHeader {
    margin-bottom: 10px;
    padding-bottom: 4px;
}

/* Behaviour
   -------------------------------------------------------------------------- */
.fieldSpec.formContainer .labelText,
.fieldSpec.formContainer > label {
    display: none;
}

.fieldSpec.formContainer .description {
    display: none;
}

/* Appearance
   -------------------------------------------------------------------------- */
.fieldSpec.formContainer .FormHeader {
    border-bottom: 1px dotted #CCCCCC;
}

.fieldSpec.formContainer .FormHeader h3 {
    font-size: 14px;
    font-weight: bold;
}

/* FORM MODIFIERS
   ========================================================================== */

/* DEFAULT > The form title is visible.
   --------------------------------------------------------------------------
   .form__item--hidden-form-title > To a form title.
   .formContainer--cols2 > To arrange the items list in two columns.
   -------------------------------------------------------------------------- */

/* Behaviour
   -------------------------------------------------------------------------- */
.fieldSpec.formContainer.form__item--hidden-form-title .FormHeader {
    display: none;
}

@media all and (min-width:769px) {

    /* Structure
      -------------------------------------------------------------------------- */

    /*
     * 1. 50% width minus half the final gutter
     */
    .fieldSpec.formContainer--cols2 .schemaFieldContainer {
        width: calc(50% - 10px); /* 1 */
    }

    /*
     * 1. Setting the element as a left column item.
     */
    .fieldSpec.formContainer--cols2 .schemaFieldContainer:nth-of-type(even) {
        float: left; /* 1 */
    }

    /*
     * 1. Setting the element as a right column item.
     */
    .fieldSpec.formContainer--cols2 .schemaFieldContainer:nth-of-type(odd) {
        float: right; /* 1 */
    }

    /* Behaviour
      -------------------------------------------------------------------------- */

    /*
     * 1. A simple clearfix where we cannot add it manually to the HTML.
     */
    .fieldSpec.formContainer--cols2 .formContainer:before,
    .fieldSpec.formContainer--cols2 .formContainer:after {
        content: ""; /* 1 */
        display: table; /* 1 */
    }

    .fieldSpec.formContainer--cols2 .formContainer:after {
        clear: both; /* 1 */
    }

    .fieldSpec.formContainer--cols2 .schemaFieldContainer {
        -webkit-transition: all 250ms ease-in-out;
        -ms-transition: all 250ms ease-in-out;
        transition: all 250ms ease-in-out;
    }

    /*
     * 1. Clearing all floats (two consecutive .form__item--odd elements will stack just fine).
     */
    .fieldSpec.formContainer--cols2 .schemaFieldContainer:nth-of-type(even) {
        clear: both; /* 1 */
    }

    /*
     * 1. Clearing only the right float (in case we have two consecutive .form__item--even elements).
     */
    .fieldSpec.formContainer--cols2 .schemaFieldContainer:nth-of-type(odd) {
        clear: right; /* 1 */
    }

}

/* RADIOS LIST
   ========================================================================== */

/* HTML Snippet
   --------------------------------------------------------------------------
   With accesibility mode enabled
   --------------------------------------------------------------------------

    <div class="fieldSpec RadioButtonListFormField fieldSpecPadder" id="fieldSpecContainerX">
        <fieldset>
            <legend>Choice</legend>

            <div id="X">
                <div class="cb">
                    <input class="RadioButtonListFormField" type="radio" name="X" tabindex="X" value="X" id="X_0">
                    &nbsp;
                    <label for="X_0">X</label>
                </div>

                <div class="cb">
                    <input class="RadioButtonListFormField" type="radio" name="X" tabindex="X" value="X" id="X_1">
                    &nbsp;
                    <label for="X_1">X</label>
                </div>

                <div class="cb">
                    <input class="RadioButtonListFormField" type="radio" name="X" tabindex="X" value="X" id="X_2">
                    &nbsp;
                    <label for="X_2">X</label>
                </div>
            </div>
        </fieldset>
    </div>

   --------------------------------------------------------------------------
   With accesibility mode disabled
   --------------------------------------------------------------------------

    <div class="fieldSpec RadioButtonListFormField" id="fieldSpecContainerX">
        <div class="fieldSpecPadder">
            <div class="specTitle">
                <div class="fieldLabel">
                    <div class="labelText">X</div>

                    <div id="X">
                        <label>
                            <input class="RadioButtonListFormField" type="radio" name="X" tabindex="X" value="X" id="X_0">
                            &nbsp;X
                        </label>

                        <div class="cb"></div>

                        <label>
                            <input class="RadioButtonListFormField" type="radio" name="X" tabindex="X" value="X" id="X_1">
                            &nbsp;X
                        </label>

                        <div class="cb"></div>

                        <label>
                            <input class="RadioButtonListFormField" type="radio" name="X" tabindex="X" value="X" id="X_2">
                            &nbsp;X
                        </label>

                        <div class="cb"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

   -------------------------------------------------------------------------- */

/* Structure
   -------------------------------------------------------------------------- */

div[class*="fieldSpec"].RadioButtonListFormField legend + div>.cb,
div[class*="fieldSpec"].RadioButtonListFormField label {
    margin-top: 6px;
}

div[class*="fieldSpec"].RadioButtonListFormField input[type="radio"] {
    margin-right: 8px;
}

.formfieldSpec.RadioButtonListFormField .formlabelText + div > label + label {
    margin-top: 6px;
}

.formfieldSpec.RadioButtonListFormField .formlabelText + div > label input[type="radio"] {
    float: left;
    margin: 2px 8px 3px 0;
}

.RadioButtonListFormField_more {
    float: left;
    margin-top: 5px;
}

/* Behaviour
   -------------------------------------------------------------------------- */
div[class*="fieldSpec"].RadioButtonListFormField label {
    display: block;
}

div[class*="fieldSpec"].RadioButtonListFormField legend + div>.cb *,
div[class*="fieldSpec"].RadioButtonListFormField label * {
    display: inline-block;
    vertical-align: middle;
}

.formfieldSpec.RadioButtonListFormField .formlabelText + div > label {
    display: block;
}

.RadioButtonListFormField_more {
    clear: both;
}

/* Appearance
   -------------------------------------------------------------------------- */
div[class*="fieldSpec"].RadioButtonListFormField label {
    font-size: 14px;
}

.RadioButtonListFormField_more {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
    text-decoration: none;
    color: #26C59A; /* var(--color--site) in an IE free world - use this comment as a handler for smart find & replace! */
}

.RadioButtonListFormField_more:hover,
.RadioButtonListFormField_more:focus {
    border-bottom-color: inherit;
}

/* RADIOS LIST MODIFIERS
   ========================================================================== */

/* DEFAULT > The items in the .RadioButtonListFormField element are full width.
   --------------------------------------------------------------------------
   .RadioButtonListFormField--cols2 > To arrange the items list in two columns.
   -------------------------------------------------------------------------- */

@media all and (min-width:769px) {

    /* Structure
    -------------------------------------------------------------------------- */
    div[class*="fieldSpec"].RadioButtonListFormField--cols2 legend + div:before,
    div[class*="fieldSpec"].RadioButtonListFormField--cols2 legend + div:after {
        display: none;
    }

    div[class*="fieldSpec"].RadioButtonListFormField--cols2 legend + div {
        -webkit-column-gap: 40px;
        -moz-column-gap: 40px;
        column-gap: 40px;
    }

    /* Behaviour
     -------------------------------------------------------------------------- */
    div[class*="fieldSpec"].RadioButtonListFormField--cols2 legend + div {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }

    div[class*="fieldSpec"].RadioButtonListFormField--cols2 legend + div>* {
        -webkit-column-break-inside: avoid;
        page-break-inside: avoid;
        break-inside: avoid;
    }

}

/* SCHEDULING/TIMESLOT
   ========================================================================== */

/* HTML Snippet
   --------------------------------------------------------------------------
   With accesibility mode enabled
   --------------------------------------------------------------------------

    <div class="fieldSpec fieldSpecPadder" id="fieldSpecContainerX">
        <label for="X">X</label>

        <div class="description" id="X-description">X</div>

        <div class="schedulerWidget" style="">
            <div class="headerContainer">
                <p class="title">X</p>
                <p class="description">X</p>
            </div>

            <div class="companySelectorContainer">
                <select class="companySelector" id="X">
                    <option value="X">X</option>
                    <option value="X">X</option>
                </select>
            </div>

            <div class="schedulerDatePicker datepicker-skin-scheduling hasDatepicker" id="X_datepicker_scheduling">
                <div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" style="display: block;">
                    <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
                        <a class="ui-datepicker-prev ui-corner-all ui-state-disabled" title="Previous">
                            <span class="ui-icon ui-icon-circle-triangle-w">Previous</span>
                        </a>

                        <a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title="Next">
                            <span class="ui-icon ui-icon-circle-triangle-e">Next</span>
                        </a>

                        <div class="ui-datepicker-title">
                            <span class="ui-datepicker-month">XX</span>
                            &nbsp;
                            <span class="ui-datepicker-year">XXXX</span>
                        </div>
                    </div>

                    <table class="ui-datepicker-calendar">
                        <thead>
                            <tr>
                                <th class="ui-datepicker-week-end">
                                    <span title="Sunday">Su</span>
                                </th>

                                <th>
                                    <span title="Monday">Mo</span>
                                </th>

                                <th>
                                    <span title="Tuesday">Tu</span>
                                </th>

                                <th>
                                    <span title="Wednesday">We</span>
                                </th>

                                <th>
                                    <span title="Thursday">Th</span>
                                </th>

                                <th>
                                    <span title="Friday">Fr</span>
                                </th>

                                <th class="ui-datepicker-week-end">
                                    <span title="Saturday">Sa</span>
                                </th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr>
                                <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">29</span>
                                </td>

                                <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">30</span>
                                </td>

                                <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">31</span>
                                </td>

                                <td class="ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">1</span>
                                </td>

                                <td class="ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">2</span>
                                </td>

                                <td class="ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">3</span>
                                </td>

                                <td class="ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">4</span>
                                </td>
                            </tr>

                            <tr>
                                <td class="ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">5</span>
                                </td>

                                <td class="ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">6</span>
                                </td>

                                <td class="ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">7</span>
                                </td>

                                <td class="ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">8</span>
                                </td>

                                <td class="ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">9</span>
                                </td>

                                <td class="ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">10</span>
                                </td>

                                <td class="ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">11</span>
                                </td>
                            </tr>

                            <tr>
                                <td class="ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">12</span>
                                </td>

                                <td class="ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">13</span>
                                </td>

                                <td class="ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">14</span>
                                </td>

                                <td class="ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">15</span>
                                </td>

                                <td class="ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">16</span>
                                </td>

                                <td class="ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">17</span>
                                </td>

                                <td class="ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">18</span>
                                </td>
                            </tr>

                            <tr>
                                <td class="ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">19</span>
                                </td>

                                <td class="ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">20</span>
                                </td>

                                <td class="ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">21</span>
                                </td>

                                <td class="ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">22</span>
                                </td>

                                <td class="ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">23</span>
                                </td>

                                <td class="ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">24</span>
                                </td>

                                <td class="ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">25</span>
                                </td>
                            </tr>

                            <tr>
                                <td class="ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">26</span>
                                </td>

                                <td class="ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">27</span>
                                </td>

                                <td class="not-selectable-day ui-datepicker-today" data-handler="selectDay" data-event="click" data-month="XX" data-year="XXXX">
                                    <a class="ui-state-default ui-state-highlight" href="X">28</a>
                                </td>

                                <td class="not-selectable-day" data-handler="selectDay" data-event="click" data-month="XX" data-year="XXXX">
                                    <a class="ui-state-default" href="X">29</a>
                                </td>

                                <td class="not-selectable-day ui-datepicker-current-day" data-handler="selectDay" data-event="click" data-month="XX" data-year="XXXX">
                                    <a class="ui-state-default ui-state-active" href="X">30</a>
                                </td>

                                <td class="ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">1</span>
                                </td>

                                <td class="ui-datepicker-week-end ui-datepicker-other-month ui-datepicker-unselectable ui-state-disabled not-selectable-day">
                                    <span class="ui-state-default">2</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="results">
                <p class="availability">Availability for <span class="currentDay">X, X XX, XXXX</span></p>

                <div class="noResults">
                    <p class="noResultsText">No results found. Please choose a different date</p>
                </div>

                <div class="resultsList" style="display: none;"></div>

                <p class="allDay" style="display:none">All day</p>
            </div>
        </div>
    </div>

   -------------------------------------------------------------------------- */

/* Structure
   -------------------------------------------------------------------------- */
.datepicker-skin-scheduling .ui-datepicker {
    padding: 0;
    width: 100%;
}

.datepicker-skin-scheduling .ui-datepicker table {
    width: 100%;
    margin: 0;
}

.datepicker-skin-scheduling .ui-datepicker th {
    padding: 0;
}

.datepicker-skin-scheduling .ui-datepicker td {
    padding: 0;
}

.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-header {
    padding: 0 40px;
    margin: 0;
}

.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-title {
    margin: 0;
    height: 40px;
}

.datepicker-skin-scheduling td .ui-state-default {
    padding: .5em;
    margin: 0;
}

.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-prev,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-next {
    width: 40px;
    height: 100%;
}

.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-prev span,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-next span {
    margin-left: 0;
    margin-top: 0;
}

.datepicker-skin-scheduling .ui-datepicker select.ui-datepicker-month,
.datepicker-skin-scheduling .ui-datepicker select.ui-datepicker-year {
    width: 49%;
}

.datepicker-skin-scheduling .ui-datepicker th span,
.datepicker-skin-scheduling .ui-datepicker th a,
.datepicker-skin-scheduling .ui-datepicker td span,
.datepicker-skin-scheduling .ui-datepicker td a {
    padding: 10px 10px;
}

.schedulerWidget {
    margin: 0;
    width: 100%;
    padding: 0;
}

.schedulerWidget .headerContainer .title {
    padding-bottom: 4px;
}

.schedulerWidget .headerContainer .description {
    padding-top: 0;
    padding-bottom: 4px;
}

.schedulerWidget .results {
    margin-top: 10px;
    padding-top: 10px;
}

.schedulerWidget .results .availability {
    padding: 0 0 10px;
}

.schedulerWidget .results .resultsList,
.schedulerWidget .results .noResults {
    height: auto;
}

.schedulerWidget .results .resultsList .resultItem {
    padding: 0.75em;
}

.schedulerWidget .results .resultsList .resultItem .time .timeZone {
    padding-left: 0.4em;
}

/* Behaviour
   -------------------------------------------------------------------------- */
.headerContainer {
    display: none;
}

.datepicker-skin-scheduling .ui-datepicker {
    display: none;
}

.datepicker-skin-scheduling .ui-datepicker table {
    border-collapse: collapse;
}

.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-header {
    position: relative;
    vertical-align: middle;
}

.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-prev,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 0;
}

.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-prev-hover,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-next-hover {
    top: 1px;
}

.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-prev span,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-next span {
    display: block;
    position: absolute;
    left: calc(50% - 8px);
    top: calc(50% - 8px);
}

.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-prev span:before,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-next span:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.datepicker-skin-scheduling .ui-datepicker th span,
.datepicker-skin-scheduling .ui-datepicker th a,
.datepicker-skin-scheduling .ui-datepicker td span,
.datepicker-skin-scheduling .ui-datepicker td a {
    display: block;
}

.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-prev-hover,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-next-hover,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-next,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-prev {
    top: 0;
}

.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-prev-hover {
    left: 0;
}

.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-next-hover {
    right: 0;
}

.schedulerWidget .results .resultsList,
.schedulerWidget .results .noResults {
    overflow: auto;
}

/* Appearance
   -------------------------------------------------------------------------- */
.datepicker-skin-scheduling {
    font-size: 100%;
}

.datepicker-skin-scheduling .ui-widget {
    font-family: inherit;
    background: none;
    border: none;
    border-radius: 0;
}

.datepicker-skin-scheduling .ui-datepicker-header {
    border: none;
    border-radius: 0;
    background: none;
    font-weight: bold;
    font-size: 16px;
    height: 40px;
}

.datepicker-skin-scheduling .ui-datepicker-header .ui-state-hover {
    background: transparent;
    border-color: transparent;
    cursor: pointer;
    border-radius: 0;
}

.datepicker-skin-scheduling .ui-datepicker {
    -webkit-box-shadow: none;
    box-shadow: none;
    background: none;
}

.datepicker-skin-scheduling .ui-datepicker table {
    font-size: inherit;
}

.datepicker-skin-scheduling .ui-datepicker th {
    text-align: center;
    border: none;
    background-color: transparent;
    color: inherit;
    font-size: inherit;
    font-weight: bold;
    border: none;
}

.datepicker-skin-scheduling .ui-datepicker td {
    background: none;
    border: none;
}

.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-title {
    line-height: 40px;
    text-align: center;
    color: inherit;
}

.datepicker-skin-scheduling td .ui-state-default {
    background: none;
    border: none;
    text-align: center;
    font-weight: inherit;
    color: inherit;
    font-size: inherit;
}

.datepicker-skin-scheduling .ui-state-disabled {
    opacity: 1;
}

.datepicker-skin-scheduling .ui-state-disabled .ui-state-default {
    color: #999999;
}

.datepicker-skin-scheduling td .ui-state-active,
.datepicker-skin-scheduling td .ui-state-hover {
    background: #a9a9a9;
}

.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-prev span,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-next span {
    background: none;
    font-weight: inherit;
}

.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-prev span:before,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-next span:before {
    text-indent: 0;
    font-weight: bold;
}

.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-prev span:before {
    content: '<';
}

.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-next span:before {
    content: '>';
}

.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-prev.ui-state-disabled span:before,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-next.ui-state-disabled span:before {
    color: #999999;
}

.datepicker-skin-scheduling .ui-datepicker-unselectable.ui-state-disabled,
.datepicker-skin-scheduling .ui-datepicker-unselectable.ui-state-disabled span,
.datepicker-skin-scheduling .ui-datepicker-other-month.ui-datepicker-unselectable {
    color: #999999;
    background: none;
}

.datepicker-skin-scheduling .ui-datepicker th span,
.datepicker-skin-scheduling .ui-datepicker th a,
.datepicker-skin-scheduling .ui-datepicker td span,
.datepicker-skin-scheduling .ui-datepicker td a {
    text-decoration: none;
    text-align: center;
}

.datepicker-skin-scheduling .ui-datepicker td span.ui-state-hover,
.datepicker-skin-scheduling .ui-datepicker td a.ui-state-hover,
.datepicker-skin-scheduling .ui-datepicker td.selectable-day {
    background-color: #FAFAFA;
}

.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-current-day,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-current-day a,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-current-day a.ui-state-hover {
    background-color: #26C59A; /* var(--color--site) in an IE free world - use this comment as a handler for smart find & replace! */
    color: #FFFFFF;
}

.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-today,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-today a,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-today a.ui-state-hover {
    font-weight: 700;
}

.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-prev-hover,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-next-hover,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-next,
.datepicker-skin-scheduling .ui-datepicker .ui-datepicker-prev {
    border: none;
    background: none;
}

.schedulerWidget {
    background: none;
    border: none;
}

.schedulerWidget .headerContainer .title {
    font-size: 14px;
    font-weight: bold;
}

.schedulerWidget .headerContainer .description {
    font-size: 12px;
    line-height: 150%;
}

.schedulerWidget .results {
    border: none;
}

.schedulerWidget .results .availability {
    font-size: 16px;
    line-height: 40px;
    font-weight: bold;
}

.schedulerWidget .results .noResults .noResultsText {
    font-size: inherit;
}

.schedulerWidget .results .resultsList .resultItem {
    background: none;
    border-bottom: solid 1px #999999;
}

.schedulerWidget .results .resultsList .resultItem:hover {
    background: #FAFAFA;
    cursor: pointer;
}

.schedulerWidget .results .resultsList .resultItem.selected {
    background: #BBD7FF;
    cursor: pointer;
}

.schedulerWidget .results .resultsList .resultItem .title {
    font-size: inherit;
    font-weight: bold;
}

.schedulerWidget .results .resultsList .resultItem .time,
.schedulerWidget .results .resultsList .resultItem .location,
.schedulerWidget .results .resultsList .resultItem .allDay {
    font-size: inherit;
}

.schedulerWidget .results .resultsList .resultItem .time .timeZone {
    color: #565656;
}

@media all and (min-width:769px) {

    /* Structure
     -------------------------------------------------------------------------- */
    .companySelectorContainer {
        padding-bottom: 30px;
    }

    .datepicker-skin-scheduling,
    .schedulerWidget .results {
        width: 50%;
    }

    .datepicker-skin-scheduling {
        padding-right: 10px;
    }

    .schedulerWidget .results {
        margin-top: 0;
        padding-top: 0;
        padding-left: 10px;
    }

    /* Behaviour
     -------------------------------------------------------------------------- */
    .schedulerWidget {
        display: table;
    }

    .companySelectorContainer {
        display: table-caption;
    }

    .datepicker-skin-scheduling,
    .schedulerWidget .results {
        display: table-cell;
    }

    /* Appearance
     -------------------------------------------------------------------------- */
    .schedulerWidget .results {
        border: none;
    }

}

/* SCHEDULING/TIMESLOT MODIFIERS
   ========================================================================== */

/* DEFAULT > The .schedulerWidget widget has no borders.
   --------------------------------------------------------------------------
   .schedulerWidget--with-borders > To wrap the widget in a boxed style.
   -------------------------------------------------------------------------- */

/* Structure
   -------------------------------------------------------------------------- */
.schedulerWidget--with-borders .schedulerWidget {
    padding: 10px;
}

/* Appearance
   -------------------------------------------------------------------------- */
.schedulerWidget--with-borders .schedulerWidget {
    border-width: 1px;
    border-style: solid;
    border-color: #CACACA; /* var(--color--borders) in an IE free world - use this comment as a handler for smart find & replace! */
    border-radius: 4px;
}

.schedulerWidget--with-borders .results {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #CACACA; /* var(--color--borders) in an IE free world - use this comment as a handler for smart find & replace! */
}

@media all and (min-width:769px) {

    /* Appearance
     -------------------------------------------------------------------------- */
    .schedulerWidget--with-borders .results {
        border-top: none;
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color: #CACACA; /* var(--color--borders) in an IE free world - use this comment as a handler for smart find & replace! */
    }

}

/* SELECT FORM FIELD
   ========================================================================== */

/* HTML Snippet
   --------------------------------------------------------------------------
   Type 1: With accesibility mode enabled
   --------------------------------------------------------------------------

    <div class="fieldSpec SelectFormField fieldSpecPadder" id="fieldSpecContainerX">
        <label for="X">X</label>

        <div class="description" id="X-description">X</div>

        <select class="SelectFormField" name="X" tabindex="X" id="X" aria-describedby="X-description" aria-labeledby="X-label">
            <option value="X">X</option>

            <optgroup label="X">
                <option value="X">X</option>
            </optgroup>

            <optgroup label="X">
                <option value="X">X</option>
                <option value="X">X</option>
                <option value="X">X</option>
            </optgroup>
        </select>
    </div>

   --------------------------------------------------------------------------
   Type 2: With accesibility mode enabled
   --------------------------------------------------------------------------

    <div class="fieldSpec SelectFormField fieldSpecPadder" id="fieldSpecContainerX">
        <fieldset>
            <legend>Source</legend>

            <select name="X" tabindex="X" class="SelectFormField" id="X" aria-describedby="X-description" aria-labeledby="X-label">
                <option value="X">X</option>

                <optgroup label="X">
                    <option value="X">X</option>
                </optgroup>

                <optgroup label="X">
                    <option value="X">X</option>
                    <option value="X">X</option>
                    <option value="X">X</option>
                </optgroup>
            </select>
        </fieldset>
    </div>

   -------------------------------------------------------------------------- */

/* Structure
   -------------------------------------------------------------------------- */

div[class*="fieldSpec"].SelectFormField > div:not(.description)>label + label {
    margin-top: 10px;
}

div[class*="fieldSpec"].SelectFormField > div:not(.description)>label>* {
    margin-top: 6px;
}

/* Behaviour
   -------------------------------------------------------------------------- */
div[class*="fieldSpec"].SelectFormField > div:not(.description)>label {
    display: block;
}

/* Appearance
   -------------------------------------------------------------------------- */
div[class*="fieldSpec"].SelectFormField > div:not(.description)>label {
    font-size: 14px;
    line-height: normal;
    font-weight: 400;
    color: #565656;
}

/* UI WIDGET
  ========================================================================== */

/* Appearance
  -------------------------------------------------------------------------- */
.ui-widget {
    background-color: #FFFFFF;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

/* PHOTO PREVIEW FIELD
  ========================================================================== */

.photoInputPreviewWrapper {
    display: flex;
    align-items: center;
    position: relative;
}

.photoInputPreviewWrapper .photoInputPreviewContainer {
    vertical-align: middle;
}

.photoInputPreviewWrapper .photoInputPreview {
   width: 46px;
   height: 46px;
   border-radius: 50%;
}

.photoInputPreviewWrapper .FileField {
    padding:10px;
}

.photoInputPreviewWrapper .fileInputCancelButton,
.photoInputPreviewWrapper .fileInputCancelButton:hover,
.photoInputPreviewWrapper .fileInputCancelButton:focus,
.photoInputPreviewWrapper .fileInputCancelButton:active,
.uploadedFile button,
.uploadedFile button:hover,
.uploadedFile button:focus,
.uploadedFile button:active {
    background-image: url(../images/icon-remove.svg);
    background-repeat: no-repeat;
    background-color: #ffffff;
    background-position: center center;
    width: 15px;
    height: 15px;
    text-indent: -9999px;
    direction: ltr;
    overflow: hidden;
    display: block;
    border: none;
    cursor: pointer;
}

.photoInputPreviewWrapper .fileInputCancelButton,
.photoInputPreviewWrapper .fileInputCancelButton:hover,
.photoInputPreviewWrapper .fileInputCancelButton:focus,
.photoInputPreviewWrapper .fileInputCancelButton:active {
    margin: 0 15px 0 5px;
}

.form__item--photo-preview-field .uploadedFile,
.form__item--photo-preview-field .errorMessage {
    display: block;
    clear: both;
    word-break: break-all;
    margin-left: 62px;
}

.form__item--photo-preview-field .uploadedFile button,
.form__item--photo-preview-field .uploadedFile button:hover,
.form__item--photo-preview-field .uploadedFile button:focus,
.form__item--photo-preview-field .uploadedFile button:active {
    display: inline-block;
    margin-left: 16px;
}

.photoInputPreviewContainer{
    height: 46px;
    width: 46px;
    margin-right: 16px;
    flex-shrink: 0;
}

.photoPreviewUnselected {
    background-image: url(../images/icon-defaultProfilePhoto.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: #ffffff;
    background-position: center center;
}

/*Modifier .form__item--photo-preview-upload-with-dropbox-and-drive */

div[class*="fieldSpec"].FileField.form__item--photo-preview-upload-with-dropbox-and-drive div[id*="fileInput_"] {
    position: relative;
}

.form__item--photo-preview-upload-with-dropbox-and-drive .photoInputPreviewWrapper {
    width: calc(100% - 90px);
}

div[class*="fieldSpec"].FileField.form__item--photo-preview-upload-with-dropbox-and-drive div[id*="fileInput_"] a {
    width: 40px;
    height: 40px; /* This is the input height */
    padding: 0;
}

/* Behaviour
   -------------------------------------------------------------------------- */

div[class*="fieldSpec"].FileField.form__item--photo-preview-upload-with-dropbox-and-drive div[id*="fileInput_"] a {
    display: block;
    position: absolute;
}

div[class*="fieldSpec"].FileField.form__item--photo-preview-upload-with-dropbox-and-drive div[id*="fileInput_"] a {
    right: 0;
    box-sizing: border-box !important;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 60%;
    overflow: hidden;
    top:3px;
}

div[class*="fieldSpec"].FileField.form__item--photo-preview-upload-with-dropbox-and-drive div[id*="fileInput_"] a + a {
    right: 45px; /* This is the width of the first button width (40px) and margin (5px) */
}

div[class*="fieldSpec"].FileField.form__item--photo-preview-upload-with-dropbox-and-drive div[id*="fileInput_"] span[id*="Info_"] {
    display: inline-block;
    word-break: break-all;
}

/* Appearance
   -------------------------------------------------------------------------- */
div[class*="fieldSpec"].FileField.form__item--photo-preview-upload-with-dropbox-and-drive div[id*="fileInput_"] a {
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
    border-color: #CACACA; /* var(--color--borders) in an IE free world - use this comment as a handler for smart find & replace! */
    background-color: #FFFFFF;
    filter: none !important;
    text-indent: -9999px;
    cursor: pointer;
}

div[class*="fieldSpec"].FileField.form__item--photo-preview-upload-with-dropbox-and-drive span[id*="dropboxInfo_"],
div[class*="fieldSpec"].FileField.form__item--photo-preview-upload-with-dropbox-and-drive div[id*="fileInput_"] a.dropbox-dropin-btn {
    background-image: url(../images/icon--dropbox.svg);
}

div[class*="fieldSpec"].FileField.form__item--photo-preview-upload-with-dropbox-and-drive .drivePickerUploadFile,
div[class*="fieldSpec"].FileField.form__item--photo-preview-upload-with-dropbox-and-drive div[id*="fileInput_"] a.drivePickerButton {
    background-image: url(../images/icon--google-drive.svg);
}

div[class*="fieldSpec"].FileField.form__item--photo-preview-upload-with-dropbox-and-drive div[id*="fileInput_"] span[id*="Info_"] {
    font-size: 12px;
    line-height: 150%;
}

div[class*="fieldSpec"].FileField.form__item--photo-preview-upload-with-dropbox-and-drive span[id*="dropboxInfo_"],
div[class*="fieldSpec"].FileField.form__item--photo-preview-upload-with-dropbox-and-drive .drivePickerUploadFile {
    box-sizing: border-box !important;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 16px;
    overflow: hidden;
    padding-left: 25px;
    vertical-align: middle;
    margin-left: 62px;
}

div[class*="fieldSpec"].FileField.form__item--photo-preview-upload-with-dropbox-and-drive button[id*="dropboxRemove_"],
div[class*="fieldSpec"].FileField.form__item--photo-preview-upload-with-dropbox-and-drive .drivePickerUploadFile button{
    background-color: transparent;
    background-image: url(../images/icon-remove.svg);
    background-repeat: no-repeat;
    background-color: #ffffff;
    background-position: center center;
    border: none;
    width: 15px;
    height: 15px;
    text-indent: -9999px;
    direction: ltr;
    overflow: hidden;
    display: inline-block;
    margin-left: 16px;
    vertical-align: middle
}