.formComposition .availableFields, .formComposition  .availableRootFields, .formComposition  .dynamicFormFields, .formComposition  .dynamicFormSubFields {
    border: 1px solid #ccc;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    overflow-y: auto; }
.formCompositionRender .availableFields, .formCompositionRender .availableRootFields, .formCompositionRender .dynamicFormFields, .formCompositionRender .dynamicFormSubFields {
    overflow-y: visible; }
.availableFields, .availableRootFields {
    width: 300px;
}
.availableFields {
    height: 452px;
}
.availableRootFields {
}
.dynamicFormFields {
    height: 630px;
}
.dynamicFormSubFields {
    border: none;
    padding-top: 10px;
    padding-bottom: 10px;
}
.availableFields li, .availableRootFields li, .dynamicFormFields li {
    margin: 5px 5px 5px 5px;
    padding: 8px;

    border: 1px solid #ccc;
    background-color: #f2f2f2;
}

li.dynamicFormItemBox {
    background-color: #f2f2f2;
}

/* Styling level 0 */
.formCompositionEdit li.dynamicFormItemBox,
.formCompositionEdit li.emptyPageField
{
    /*background-color: #d0d0d0;*/
}
/* End of Styling level 0 */

/* Styling level 1 */
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox,
.formCompositionEdit li.dynamicFormItemBox li.emptyPageField{
    background-color: #18aaec;
    border: 1px solid #0d5c80;
}

.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox h3,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox .formFieldCommonSettingsToggle {
    border-bottom: 1px solid #0d5c80;
}

.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox .fieldValidator,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox .formFieldSettings,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox .formFieldSettings .dynamicFormItemBox
{
    background-color: #f2f2f2;
    border: 1px solid #ccc;
}

.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox .formFieldSettings .formFieldCommonSettingsToggle,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox .valueValidators li.dynamicFormItemBox .formFieldCommonSettingsToggle
{
    border-bottom: 1px solid #c8c9ca;
}

.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox .formFieldRender,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox .formFieldPartRender,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox .formFieldContainer {
    border: 1px solid #0d5c80;
}
/* End of Styling level 1 */

/* Styling level 2 */
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.emptyPageField{
    background-color: #f5da38;
    border: 1px solid #948422;
}

.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox h3,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldCommonSettingsToggle {
    border-bottom: 1px solid #948422;
}

.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .fieldValidator,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldSettings,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldSettings .dynamicFormItemBox
{
    background-color: #f2f2f2;
    border: 1px solid #ccc;
}

.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldSettings .formFieldCommonSettingsToggle,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .valueValidators li.dynamicFormItemBox .formFieldCommonSettingsToggle
{
    border-bottom: 1px solid #c8c9ca;
}

.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldRender,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldPartRender,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldContainer {
    border: 1px solid #948422;
}
/* End of Styling level 2 */

/* Styling level 3 */
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.emptyPageField{
    background-color: #ef4b23;
    border: 1px solid #772511;
}

.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox h3,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldCommonSettingsToggle {
    border-bottom: 1px solid #772511;
}

.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .fieldValidator,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldSettings,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldSettings .dynamicFormItemBox
{
    background-color: #f2f2f2;
    border: 1px solid #ccc;
}

.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldSettings .formFieldCommonSettingsToggle,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .valueValidators li.dynamicFormItemBox .formFieldCommonSettingsToggle
{
    border-bottom: 1px solid #c8c9ca;
}

.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldRender,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldPartRender,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldContainer {
    border: 1px solid #772511;
}
/* End of Styling level 3 */

/* Styling level 4 */
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.emptyPageField{
    background-color: #78ca69;
    border: 1px solid #385f31;
}

.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox h3,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldCommonSettingsToggle {
    border-bottom: 1px solid #385f31;
}

.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .fieldValidator,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldSettings,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldSettings .dynamicFormItemBox
{
    background-color: #f2f2f2;
    border: 1px solid #ccc;
}

.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldSettings .formFieldCommonSettingsToggle,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .valueValidators li.dynamicFormItemBox .formFieldCommonSettingsToggle
{
    border-bottom: 1px solid #c8c9ca;
}

.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldRender,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldPartRender,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldContainer {
    border: 1px solid #385f31;
}
/* End of Styling level 4 */

/* Styling level 5 */
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.emptyPageField{
    background-color: #a182d3;
    border: 1px solid #665285;
}

.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox h3,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldCommonSettingsToggle {
    border-bottom: 1px solid #665285;
}

.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .fieldValidator,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldSettings,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldSettings .dynamicFormItemBox
{
    background-color: #f2f2f2;
    border: 1px solid #ccc;
}

.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldSettings .formFieldCommonSettingsToggle,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .valueValidators li.dynamicFormItemBox .formFieldCommonSettingsToggle
{
    border-bottom: 1px solid #c8c9ca;
}

.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldRender,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldPartRender,
.formCompositionEdit li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox li.dynamicFormItemBox .formFieldContainer {
    border: 1px solid #665285;
}
/* End of Styling level 5 */

.portlet-body .formCompositionEdit h3 {
    color: #000000;
}

.portlet-body .formCompositionEdit h4 {
    font-weight: normal;
}

.handle {
    cursor: pointer;
}

.clearBoth {
    clear: both;
}

.dynamicFormLeft {
    float: left;
}

.dynamicFormBox {
    float: left; }

.formFieldRemove {
    float: right;
    cursor: pointer;
}
.availableFields .formFieldRemove, .availableRootFields .formFieldRemove {
    display: none;
}
.availableFields .formFieldCommonSettingsToggle, .availableRootFields .formFieldCommonSettingsToggle,
.availableRootFields .emptyPageField, .dynamicFormLeftShow, .previewHide,
.availableFieldValidators .formFieldSettings, .availableFieldValidators .formFieldCommonSettingsToggle {
    display: none;
}

.hideCommonSettings {
    display: none;
}

.formFieldSettings {
    display: none;
    border: 1px solid #ccc;
    padding: 5px;
}

.formFieldCommonSettingsToggle {
    border-bottom: 1px solid #ccc;
    margin-bottom: 5px;
    cursor: pointer;
}

.formFieldSettings {
    border-bottom: 1px solid #ccc;
    margin-bottom: 5px;
}

.formFieldRender, .formFieldPartRender, .formFieldContainer {
    border: 1px solid #ccc;
    padding: 5px;
}

.formFieldContainer {
    margin: 4px;
}

.formFieldSettingsToggleButton {
    float: right;
    cursor: pointer;
    font-weight: normal;
}

.dynamicFormLeftToggle, .previewToggle {
    cursor: pointer;
}

.dynamicFormFields li.ui-selected, .dynamicFormFields li.ui-selecting {
    border: 2px solid #777;
}

.wysiwygSingletonWrapper {
    display: none;
}

.ui-selectable-helper{
    pointer-events:none;
}

.dynamicFormBoxLabel {
    margin: 5px;
    font-weight: bold;
}

.fieldValidatorBox {
    float: left;
}

.fieldValidatorBox.availableFieldValidatorsBox {
    width: 30%;
}

.fieldValidatorBox.fieldValidatorsBox {
    width: 68%;
}

.fieldValidator {
    list-style-type: none;
    margin: 0;
    border: 1px solid #ccc;
    height: 200px;
    overflow-y: auto;
}

.fieldValidatorBox .validatorJson {
    width: 95%;
}

.ui-datepicker .holiday {
}

.ui-datepicker .holiday a, .ui-datepicker .holiday span {
    border: 1px #FF3333 solid;
}

.formFieldSettingsField, .formFieldRenderField {
    margin-bottom: 3px;
    margin-top: 3px;
}

.formFieldSettingsField label, .formFieldRenderField label {
    padding: 5px;
    overflow-y: hidden;
}

.formFieldSettingsField span {
    padding-left: 90px;

    display: block;
}

.formFieldRenderField > span {
    padding-left: 5px;
    display: inline;
}

.formCompositionRender .formFieldRenderField > span {
    display: inline;
}

.formCompositionRender .formFieldRenderField > span.formFieldValidationResult {
    padding-left: 15px;

    display: inline;
}

.dynamicFormLeft .formFieldSettingsField span, .dynamicFormLeft .formFieldRenderField > span {
    padding-left: 5px;
}

.formFieldSettingsField span input, .formFieldSettingsField span textarea, .formFieldRenderField span input, .formFieldRenderField span textarea {
    width: 95%;
    /* max-width: 360px; */
}

.cfe-menu-desktop-lg .formFieldSettingsField span input, .cfe-menu-desktop-lg .formFieldSettingsField span textarea, .cfe-menu-desktop-lg .formFieldRenderField span input, .cfe-menu-desktop-lg .formFieldRenderField span textarea {
    width: 102%;
}

.formFieldRenderField span input {
    max-width: 160px;
}

.formFieldRenderField span textarea {
    width: 160px;
}

.formFieldSettingsFieldCheckbox, .formFieldSettingsFieldCheckbox, .formFieldRenderFieldCheckbox, .formFieldRenderFieldCheckbox {
    margin-bottom: 6px;
    margin-top: 6px;
}

.formCompositionRender .dynamicFormLeft {
    display: none;
}

.formCompositionRender .dynamicFormFields {
    height: auto;
}

.formCompositionRender .formFieldRender, .formCompositionRender .formFieldContainer, .formCompositionRender .formFieldPartRender,
.formCompositionRender .dynamicFormItemBox, .formCompositionRender .dynamicFormFields li {
    border: none;
}

.imageField {
    max-height: 800px;
    max-width: 800px;
}

p.msg-hidden {
    display: none;
}

.dynamicFormPages{
    text-align: center;
    margin: 10px;
    padding-top: 10px;
}

.dynamicFormStart {
    padding-top: 100px;
    padding-bottom: 50px;
    text-align: center;
}

.formCompositionRender .formFieldRenderField span input {
    max-width: 260px;
}

.formCompositionRender .formFieldRenderField.service-name span input {
    min-width: 375px;
}

.formCompositionRender .formFieldRenderField span input.luft {
    max-width: 340px;
}

.formCompositionRender .formFieldRenderField span textarea {
    width: 100%;
    min-height: 80px;
    max-width: 580px;
}

.formCompositionRender .formFieldRenderField span textarea.luft {
    width: 340px;
}

.formCompositionRender {
    line-height: 28px;
}

.formCompositionRender .dynamicFormPages .pageMiddle {
    display: inline;
}

.formCompositionRender .dynamicFormPages .prevPageButtonSpan {
    float: left;
    display: inline;
    width: 40%;
    text-align: left;
    min-height: 1px;
}

.formCompositionRender .dynamicFormPages .nextPageButtonSpan {
    float: right;
    display: inline;
    width: 40%;
    text-align: right;
}

.formCompositionRender .formFieldValidationResult {
    padding-left: 10px;
}

.formCompositionRender .formFieldValidationResult .validated {
    background-image: url("../../images/icons/valid-icon.png");
    width: 24px;
    height: 24px;
    margin-top: 5px;
    display: inline-block;
}

.formCompositionRender .formFieldValidationResult .error {
    color: red;
}

.formCompositionRender .dynamicFormSubForm {
    margin-left: 40px;
}

.formCompositionRender li.dynamicFormItemBox.fieldTypeHIDDEN {
    display: none;
}

.dynamicFormShowHideActions {
    margin-top: 10px;
    margin-bottom: 10px;
}

.waterbear-theme .ui-widget-header {
    background: #e20074;
    border: 1px solid #e20074;
}

.fileInputResponseDiv {
    font-size: 24px;
    line-height: 1;
}

.formComposition label.labelField {
    margin-right: 10px;
}

.formComposition label.labelField.fieldRequired {
    font-weight: bold;
}

.formComposition label.labelField.fieldRequired:after {
    content: "*";
}

.formFieldSettingsFieldCheckbox .radioGroupError {
    display: none;
    font-weight: bold;
    color: red;
}

.formCompositionRender input[type="checkbox"], .formCompositionRender input[type="radio"] {
    margin-left: 5px;
}

.dynamicFormField-invalidated {
    border: 1px solid red;
}

.fileUploadedItem {
    display: block;
}

.fileUploadedItem .remove {
    cursor: pointer;
    font-weight: bold;
    color: blue;
}

.fileUploadedItem .remove:before {
    content: 'X';
}

@media screen and (max-width: 820px) {
    .formCompositionRender .dynamicFormPages .pageMiddle {
        padding-top: 5px;
        padding-bottom: 5px;
        float: none;
        display: block;
    }

    .formCompositionRender .dynamicFormPages .prevPageButtonSpan {
        float: none;
        display: block;
        width: auto;
        text-align: center;
    }

    .formCompositionRender .dynamicFormPages .nextPageButtonSpan {
        float: none;
        display: block;
        width: auto;
        text-align: center;
    }
}

@media screen and (max-width: 500px) {
    .formCompositionRender .formFieldRenderField > span {
    }

    .formFieldSettingsField label, .formFieldRenderField label {
        display: block;
    }

    .formCompositionRender .formFieldRenderField > span.formFieldValidationResult {
        padding-left: 5px;
    }

    .formCompositionRender .formFieldRenderField > span.formFieldValidationResult span.error {
        display: block;
        padding-left: 5px;
        padding-top: 8px;
    }

    .formCompositionRender .formFieldValidationResult {
        padding-left: 0px;
    }

    .formCompositionRender .formFieldRenderField span input {
        max-width: 220px;
    }

    .formCompositionRender .formFieldRenderField.service-name span input {
        min-width: 375px;
    }

    .formCompositionRender .formFieldRenderField span textarea {
        width: 220px;
    }

    .availableFields li, .availableRootFields li, .dynamicFormFields li {
        margin: 1px;
        padding: 1px;
    }

    .formFieldRender, .formFieldPartRender, .formFieldContainer {
        padding: 2px;
    }

    .formCompositionRender div.radio, .formCompositionRender div.checker {
        padding-left: 5px;
    }

    .formCompositionRender .dynamicFormSubForm {
        margin-left: 25px;
    }
}

table.selectFieldOptionsTable {
    width: 100%;
}

table.selectFieldOptionsTable tr td {
    width: 20%;
    text-align: center;
    vertical-align: middle;
}

table.selectFieldOptionsTable tr td:first-child {
    width: 60%;
}

table.selectFieldOptionsTable tr td:first-child input {
    width: 90%;
}

@media screen and (min-width: 960px) {
    .formCompositionRender .formFieldRenderField .col-cust-46 {
        width: 46%;
    }

    .formCompositionRender .formFieldRenderField .col-cust-29 {
        width: 29%;
    }
}