/**
 * grid.isEnabled:                     {{grid.isEnabled}}
 *
 * grid.pageWidth:                     {{grid.pageWidth}}
 * grid.pageWidthWithoutPadding:       {{grid.pageWidthWithoutPadding}}
 * grid.columnWidth:                   {{grid.columnWidth}}
 * grid.columnSpacing:                 {{grid.columnSpacing}}
 * grid.spaceReservedForColumnSpacing: {{grid.spaceReservedForColumnSpacing}}
 * grid.paddingLeft:                   {{grid.paddingLeft}}
 * grid.paddingRight:                  {{grid.paddingRight}}
 * grid.paddingTop:                    {{grid.paddingTop}}
 * grid.paddingBottom:                 {{grid.paddingBottom}}
 */

#form div[data-role="grid"] {
    padding-left: {{grid.paddingLeft}}px;
    padding-right: {{grid.paddingRight}}px;
}

#form div[data-role="grid"] > div[data-role="edge"][data-edge="left"] {
    left: {{grid.paddingLeft}}px;
}

#form div[data-role="grid"] > div[data-role="edge"][data-edge="right"] {
    right: {{grid.paddingRight}}px;
}

#form div[data-role="grid"] > div[data-role="edge"][data-edge="top"] {
    top: {{grid.paddingTop}}px;
}

#form div[data-role="grid"] > div[data-role="edge"][data-edge="bottom"] {
    bottom: {{grid.paddingBottom}}px;
}

{{#if grid.isEnabled}}

    #form div[data-role="grid"] > div[data-role="col"] {
        width: {{grid.columnWidth}}px;
        margin-right: {{grid.columnSpacing}}px;
    }

    #form div[data-role="grid"] > div[data-role="col"][data-index="1"] {
        margin-left: calc({{container.padding.horizontal}} + {{page.padding.left}} + 1px);
    }

    #form [data-role="control"]:not([data-colspan]),
    #form [data-role="container"][data-type="likert-wrapper"]:not([data-colspan]) {
        width: {{grid.pageWidthWithoutPadding}}px;
    }

    #form [data-role="input-row"] > *[data-size] + *[data-size] {
        margin-left: {{grid.columnSpacing}}px !important;
    }

    #form[data-text-direction="rtl"] [data-role="control"]:not([data-force-mobile-rendering]) [data-role="input-row"] > *[data-size] + *[data-size] {
        margin-left: {{grid.columnSpacing}}px;
    }

    {{#each cols}}

        #form [data-colspan="{{colspan}}"][data-role="control"],
        #form [data-colspan="{{colspan}}"][data-role="container"],
        #form [data-colspan="{{colspan}}"][data-role="virtual-form-table-row"] {
            width: {{width}}px;
        }

        #form [data-role="input-row"][data-fill-colspan="{{colspan}}"] > [data-size="fill"] {
            width: calc( {{width}}px - {{../grid.columnSpacing}}px );
        }

        {{#if additionalCSSClass}}

        #form [data-role="input-row"] > [data-size="{{additionalCSSClass}}"] {
            width: calc( {{width}}px - {{../grid.columnSpacing}}px);
        }

        {{#end}}

        #form [data-colspan="{{colspan}}"]:not([data-role="control"]):not([data-role="container"]):not([data-role="virtual-form-table-row"]):not([data-role="page"]) {
            width: {{widthWithoutPadding}}px;
            margin-right: {{../grid.columnSpacing}}px;
        }

        #form [data-role="control"][data-label-width="{{colspan}}"]:hover > [data-role="label-resizer"],
        #form [data-role="container"][data-type="likert-wrapper"][data-label-width="{{colspan}}"]:hover > [data-role="label-resizer"] {
            left: calc({{width}}px - 1px);
        }

        #form [data-colspan="{{colspan}}"] > [data-role="input-row"] > [data-size="full"],
        [data-role="container"][data-type="repeatable"][data-colspan="{{colspan}}"] > button[data-role="add-group-button"] {
            width: {{full}}px;
        }

        #form [data-colspan="{{colspan}}"] > [data-role="input-row"] > [data-size="half"] {
            width: {{half}}px;
        }

        #form [data-colspan="{{colspan}}"] > [data-role="input-row"] > [data-size="third"] {
            width: {{third}}px;
        }

        #form [data-colspan="{{colspan}}"] > [data-role="input-row"] > [data-size="quarter"] {
            width: {{quarter}}px;
        }

    {{#end}}

{{#else}}

    #form div[data-role="grid"] [data-role="col"] {
        display: none !important;
    }

    #form [data-role="control"],
    #form [data-role="container"][data-type="likert-wrapper"] {
        width: {{grid.pageWidthWithoutPadding}}px;
    }

    #form [data-role="control"] [data-role="input-row"] > * + *:not([data-role="choice"]):not([data-role="instructions"]) {
        margin-top: {{input.margin.vertical}} !important;
    }

    #form [data-role="control"] [data-role="input-row"] > * + *:not(:last-child):not([data-role="choice"]) {
        margin-bottom: {{input.margin.vertical}} !important;
    }

{{#end}}

#form {
    background-color: {{form.background.color}};
    font-family: {{form.font.family}};
    font-size: {{form.font.size}};
    {{#if form.background.image}}
    background-image: url({{form.background.image}});
    {{#if form.background.repeat}}background-repeat: {{form.background.repeat}}{{#else}}background-repeat: no-repeat{{#end}};
    {{#if form.background.size}}background-size: {{form.background.size}};{{#end}}
    {{#if form.background.position}}background-position: {{form.background.position}};{{#end}}
    {{#if form.background.attachment}}background-attachment: {{form.background.attachment}};{{#end}}
    {{#end}}
}

body.with-notification #notifications-area {
    background-color: {{form.background.color}} !important;
}

#form[data-submission-phase="show-html"] > [data-submission-phase="show-html"],
#form div[data-role="detailed-invoice"],
#form #editor-settings-panel {
    width: calc({{grid.pageWidth}}px + {{page.border.width}} + {{page.border.width}});
    padding: {{page.padding.top}} {{page.padding.right}} {{page.padding.bottom}} {{page.padding.left}};
    background-color: {{page.background.color}};
    border-width: {{page.border.width}};
    border-style: {{page.border.style}};
    border-color: {{page.border.color}};
}

#form div[data-role="page"]{
    width: calc({{grid.pageWidth}}px + {{page.border.width}} + {{page.border.width}});
    padding: 0 {{page.padding.right}} {{page.padding.bottom}} {{page.padding.left}};
    margin: {{page.margin.top}} auto {{page.margin.bottom}} auto !important;
    background-color: {{page.background.color}};
    border-width: {{page.border.width}};
    border-style: {{page.border.style}};
    border-color: {{page.border.color}};
}

#form div[data-role="page"][data-type="payment-summary-page"] {
    margin-bottom: calc({{page.margin.bottom}} + {{page.margin.bottom}}) !important;
}

#form.has-backlink div[data-role="page"][data-type="payment-summary-page"] {
    margin-bottom: calc({{page.margin.bottom}} + 12px) !important;
}

#form div[data-type="backlink-container"] {
    width: calc({{grid.pageWidth}}px + {{page.border.width}} + {{page.border.width}} + 16px);
    margin: 0 auto;
}

#form [data-role="page"][data-num-children]:not([data-num-children="0"]){
    width: calc({{grid.pageWidth}}px + {{page.border.width}} + {{page.border.width}});
    padding: 0 {{page.padding.right}} {{page.padding.bottom}} {{page.padding.left}};
    margin-top: {{page.margin.top}} !important;
    margin-bottom: {{page.margin.bottom}} !important;
    background-color: {{page.background.color}};
    border-width: {{page.border.width}};
    border-style: {{page.border.style}};
    border-color: {{page.border.color}};
}

#form.has-backlink [data-role="page"],
#form.has-backlink [data-role="page"][data-num-children]:not([data-num-children="0"]) {
    margin-bottom: 12px !important;
}

body > [data-role="wix-app-warning-box"] {
    width: calc({{grid.pageWidth}}px + {{page.border.width}} + {{page.border.width}});
}

{{#if page.background.image}}
#form div[data-role="page"] {
    background-image: url({{page.background.image}});
    {{#if page.background.repeat}}background-repeat: {{page.background.repeat}}{{#else}}background-repeat: no-repeat{{#end}};
    {{#if page.background.size}}background-size: {{page.background.size}};{{#end}}
    {{#if page.background.position}}background-position: {{page.background.position}};{{#end}}
    {{#if page.background.attachment}}background-attachment: {{page.background.attachment}};{{#end}}
}
{{#end}}

#form[data-has-fixed-header] div[data-role="page"] [data-role="control"][data-type="realtime-calculations"],
#form div[data-role="page"] > div[data-role="page-header"] > div[data-role="quiz-timer"] {
    width: calc({{grid.pageWidth}}px + {{page.border.width}} + {{page.border.width}});
}

#form div[data-role="page"] > div[data-role="page-header"] > div[data-role="quiz-timer"] {
    padding-right: calc( {{page.padding.right}} + {{container.padding.horizontal}} );
}

#form div[data-role="page"] > div[data-role="page-header"] > div[data-role="quiz-timer"] {
    margin-left: -{{page.padding.left}};
    margin-right: -{{page.padding.right}};
}

#form div[data-role="page"] > div[data-role="page-header"] > div[data-role="control"][data-type="realtime-calculations"] {
    margin-left: -{{page.padding.left}};
}

#form div[data-role="page"] > div[data-role="page-header"]:not([data-has-quiz-timer]) > div[data-role="control"][data-type="realtime-calculations"] {
    margin-right: -{{page.padding.right}};
}

#form div[data-role="page"] > div[data-role="page-header"]:not([data-has-quiz-timer]) > div[data-role="control"][data-type="realtime-calculations"]{
    padding-right: {{page.padding.right}};
}

#form:not([data-has-fixed-header]) div[data-role="page"] > div[data-role="page-header"][data-has-realtime-calculations][data-has-quiz-timer] > div[data-role="control"][data-type="realtime-calculations"] {
    width: calc( 100% + {{page.padding.left}} + {{page.padding.right}});
    margin-left: -{{page.padding.left}};
}

#form div[data-role="form-errors"],
#form[data-submission-phase="show-report"] > [data-submission-phase="show-report"],
#form[data-submission-phase="show-quiz-results"] > [data-submission-phase="show-quiz-results"],
#form[data-submission-phase="redirect"] > [data-submission-phase="redirect"],
#form[data-submission-phase="text-and-redirect"] > [data-submission-phase="text-and-redirect"],
#form[data-submission-phase="show-text"] > [data-submission-phase="show-text"],
#form[data-submission-phase="unhandled"] > [data-submission-phase="unhandled"] {
    width: calc({{grid.pageWidth}}px + {{page.border.width}} + {{page.border.width}});
    padding: {{page.padding.top}} {{page.padding.right}} {{page.padding.bottom}} {{page.padding.left}};
    border-width: {{page.border.width}};
    border-style: {{page.border.style}};
}

#form {
    padding-top: {{page.margin.top}};
}

@media (max-width: 768px) {
    body.has-ribbon #form {
        padding-top: calc({{page.margin.top}} + 60px);
    }
}

#form[data-has-language-selector] {
    padding-top: calc({{page.margin.top}} + 40px);
}

#form div[data-role="control"][data-type="language-selector"] > div[data-ui-role="ui-element"][data-type="dropdown"] {
    font-family: {{form.font.family}};
    font-size: {{form.font.size}};
    line-height: {{form.font.line.height}};
}

#form[data-loader-type="viewer"] {
    padding-bottom: {{page.margin.bottom}};
}

#form[data-layout-type="desktop"] div[data-role="page"][data-page-index="0"],
#form[data-submission-phase="show-html"] > [data-submission-phase="show-html"],
#form[data-loader-type="viewer"] div[data-role="page"][data-is-active] {
    margin: 0 auto 0 auto;
}

#form div[data-role="page"] ~ [data-role="after-submit-page-break"] {
    width: calc({{grid.pageWidth}}px + {{page.border.width}} + {{page.border.width}});
    height: calc({{page.margin.top}} + {{page.margin.bottom}});
}

#form div[data-role="control"],
#form div[data-role="container"][data-type="div"],
#form div[data-role="container"][data-type="likert-wrapper"] {
    padding: {{container.padding.vertical}} {{container.padding.horizontal}};
    border-width: {{control.border.width}};
    border-style: {{control.border.style}};
    border-radius: {{control.border.radius}};
}

/** CONTROL:normal **/
#form div[data-role="control"]:not(:hover):not(.selected):not([data-is-selected]):not([data-disabled]):not([data-is-active]):not([data-has-errors]),
#form div[data-role="container"][data-type="div"]:not(:hover):not(.selected):not([data-is-selected]):not([data-disabled]):not([data-is-active]):not([data-has-errors]),
#form div[data-role="container"][data-type="likert-wrapper"]:not(:hover):not(.selected):not([data-is-selected]):not([data-disabled]):not([data-is-active]):not([data-has-errors]) {
    background-color: {{control.normal.background.color}};
    border-color: {{control.normal.border.color}};
}

/** CONTROL:hover **/
body:not([data-mouse-gesture-type]) #form[data-loader-type="editor"] div[data-role="control"]:hover:not(.selected):not([data-is-selected]):not([data-is-drag-source]):not([data-disabled]):not([data-is-active]):not([data-has-errors]),
body:not([data-mouse-gesture-type]) #form[data-loader-type="editor"] div[data-role="container"][data-type="div"]:hover:not([data-is-drag-source]):not(.selected):not([data-is-selected]):not([data-disabled]):not([data-is-active]):not([data-has-errors]):not([data-num-children]),
body:not([data-mouse-gesture-type]) #form[data-loader-type="editor"] div[data-role="container"][data-type="likert-wrapper"]:hover:not([data-is-drag-source]):not(.selected):not([data-is-selected]):not([data-disabled]):not([data-is-active]):not([data-has-errors]) {
    background-color: {{control.hover.background.color}};
    border-color: {{control.hover.border.color}};
}

/** CONTROL:selected **/
#form[data-loader-type="editor"] div[data-role="control"][data-is-selected]:not([data-disabled]):not([data-is-active]):not([data-has-errors]),
#form[data-loader-type="editor"] div[data-role="control"].selected:not([data-disabled]):not([data-is-active]):not([data-has-errors]),
#form[data-loader-type="editor"] div[data-role="container"][data-type="div"][data-is-selected]:not([data-disabled]):not([data-is-active]):not([data-has-errors]),
#form[data-loader-type="editor"] div[data-role="container"][data-type="div"].selected:not([data-disabled]):not([data-is-active]):not([data-has-errors]),
#form[data-loader-type="editor"] div[data-role="container"][data-type="likert-wrapper"][data-is-selected]:not([data-disabled]):not([data-is-active]):not([data-has-errors]),
#form[data-loader-type="editor"] div[data-role="container"][data-type="likert-wrapper"].selected:not([data-disabled]):not([data-is-active]):not([data-has-errors]),
#form[data-loader-type="editor"] div[data-role="container"][data-type="repeatable"][data-is-selected],
#form[data-loader-type="editor"] div[data-role="container"][data-type="repeatable"].selected {
    background-color: {{control.selected.background.color}};
    border-color: {{control.selected.border.color}};
}

/** CONTROL:disabled **/
#form div[data-role="control"][data-disabled]:not([data-is-active]):not([data-has-errors]),
#form div[data-role="container"][data-type="div"][data-disabled]:not([data-is-active]):not([data-has-errors]),
#form div[data-role="container"][data-type="likert-wrapper"][data-disabled]:not([data-is-active]):not([data-has-errors]) {
    background-color: {{control.disabled.background.color}};
    border-color: {{control.disabled.border.color}};
}

/** CONTROL:active **/
#form[data-loader-type="editor"] div[data-role="control"][data-is-active]:not([data-has-errors]),
#form[data-loader-type="editor"] div[data-role="container"][data-type="div"][data-is-active]:not([data-has-errors]),
#form[data-loader-type="editor"] div[data-role="container"][data-type="likert-wrapper"][data-is-active]:not([data-has-errors]),
#editor-settings-panel [data-role="setting"][data-is-selected]:not([data-has-errors]) {
    background-color: {{control.focused.background.color}};
    border-color: {{control.focused.border.color}};
}

/** CONTROL:error **/
#form div[data-role="control"][data-has-errors],
#form div[data-role="container"][data-type="div"][data-has-errors],
#form div[data-role="container"][data-type="likert-wrapper"][data-has-errors] {
    background-color: {{control.error.background.color}};
    border-color: {{control.error.border.color}};
}

/** CONTROLS FROM HEADER AND FOOTER **/
#form [data-role="page"] > [data-role="page-header"] [data-role="control"],
#form [data-role="page"] > [data-role="page-footer"] [data-role="control"] {
    background-color: {{control.normal.background.color}};
    border-color: {{control.normal.border.color}};
}

body:not([data-mouse-gesture-type]) #form[data-loader-type="editor"] [data-role="page"] > [data-role="page-header"] [data-role="control"]:not([data-is-selected]):hover,
body:not([data-mouse-gesture-type]) #form[data-loader-type="editor"] [data-role="page"] > [data-role="page-footer"] [data-role="control"]:not([data-is-selected]):not([data-type="form-captcha"]):hover {

    border-color: {{control.hover.border.color}} !important;
}

#form [data-role="page"] > [data-role="page-header"] [data-role="control"][data-is-selected],
#form [data-role="page"] > [data-role="page-footer"] [data-role="control"][data-is-selected] {
    background-color: {{control.selected.background.color}};
    border-color: {{control.selected.border.color}};
}

/** LABEL APPEARANCE **/
#form div[data-role="control"] label[data-role="label"],
#form div[data-role="control"] div.control__label,
#form div[data-role="container"][data-type="likert-wrapper"] label[data-role="label"],
#form div[data-role="container"][data-type="repeatable"] label[data-role="label"],
#form [data-role="page-footer"] > [data-type="payment-summary"] > .invoice-wrapper > label[data-role="label"] {
    font-family: {{form.font.family}};
    font-size: {{form.font.size}};
    font-weight: {{form.font.weight}};
    font-style: {{form.font.style}};
    line-height: {{form.font.line.height}};
    padding-top: {{label.padding.top}};
    padding-bottom: {{label.padding.bottom}};
    margin-top: {{label.margin.top}};
    margin-bottom: {{label.margin.bottom}};
}

/** LABEL:normal **/
#form,
#form div[data-role="control"]:not(:hover):not([data-is-selected]):not([data-disabled]):not([data-is-active]):not([data-has-errors]) div[data-role="label"],
#form div[data-role="control"]:not(:hover):not([data-is-selected]):not([data-disabled]):not([data-is-active]):not([data-has-errors]) label[data-role="label"],
#form div[data-role="container"][data-type="likert-wrapper"]:not(:hover):not([data-is-selected]):not([data-disabled]):not([data-is-active]):not([data-has-errors]) label[data-role="label"] {
    color: {{label.normal.color}};
}

/** LABEL:hover **/
#form div[data-role="control"]:hover:not([data-is-selected]):not([data-is-drag-source]):not([data-disabled]):not([data-is-active]):not([data-has-errors]) div[data-role="label"],
#form div[data-role="control"]:hover:not([data-is-selected]):not([data-is-drag-source]):not([data-disabled]):not([data-is-active]):not([data-has-errors]) label[data-role="label"],
#form div[data-role="container"][data-type="likert-wrapper"]:hover:not([data-is-selected]):not([data-is-drag-source]):not([data-disabled]):not([data-is-active]):not([data-has-errors]) label[data-role="label"] {
    color: {{label.hover.color}};
}

/** LABEL:selected **/
#form div[data-role="control"][data-is-selected]:not([data-disabled]):not([data-is-active]):not([data-has-errors]) div[data-role="label"],
#form div[data-role="control"][data-is-selected]:not([data-disabled]):not([data-is-active]):not([data-has-errors]) label[data-role="label"],
#form div[data-role="container"][data-type="likert-wrapper"][data-is-selected]:not([data-disabled]):not([data-is-active]):not([data-has-errors]) label[data-role="label"] {
    color: {{label.selected.color}};
}

/** LABEL:disabled **/
#form div[data-role="control"][data-disabled]:not([data-is-active]):not([data-has-errors]) div[data-role="label"],
#form div[data-role="control"][data-disabled]:not([data-is-active]):not([data-has-errors]) label[data-role="label"],
#form div[data-role="container"][data-type="likert-wrapper"][data-disabled]:not([data-is-active]):not([data-has-errors]) label[data-role="label"] {
    color: {{label.disabled.color}};
}

/** LABEL:active **/
#form div[data-role="control"][data-is-active]:not([data-has-errors]) div.control__label,
#form div[data-role="control"][data-is-active]:not([data-has-errors]) label[data-role="label"],
#form div[data-role="container"][data-type="likert-wrapper"][data-is-active]:not([data-has-errors]) label[data-role="label"],
#form div[data-role="control"][data-is-active]:not([data-has-errors]) div.control__label,
#form div[data-role="container"][data-type="likert-wrapper"][data-is-active]:not([data-has-errors]) div.control__label {
    color: {{label.focused.color}};
}

/** LABEL:error **/
#form div[data-role="control"][data-has-errors] div[data-role="label"],
#form div[data-role="control"][data-has-errors] label[data-role="label"],
#form div[data-role="container"][data-type="likert-wrapper"][data-has-errors] label[data-role="label"] {
    color: {{label.error.color}};
}

#form div[data-role="control"][data-is-required]:not([data-type="likert-scale"]) label[data-role="label"]:after,
#form div[data-role="container"][data-is-required][data-type="likert-wrapper"] label[data-role="label"]:after,
#form div[data-role="control"][data-is-required]:not([data-type="likert-scale"]) div.control__label:after,
#form div[data-role="container"][data-is-required][data-type="likert-wrapper"] div.control__label:after {
    color: {{control.required.star.color}};
}

/** ERROR appearance **/
#form div[data-role="control"] label[data-role="error"],
#form div[data-role="container"][data-type="likert-wrapper"] label[data-role="error"] {
    font-family: {{error.font.family}};
    font-size: {{error.font.size}};
    font-weight: {{error.font.weight}};
    font-style: {{error.font.style}};
    line-height: {{error.font.line.height}};
    padding-top: {{error.padding.top}};
    padding-bottom: {{error.padding.bottom}};
    color: {{error.normal.color}};
    white-space: normal;
}

/** INSTRUCTIONS appearance **/
#form div[data-role="control"] dt[data-role="instructions"],
#form div[data-role="container"][data-type="likert-wrapper"] dt[data-role="instructions"],
#form div[data-role="container"][data-type="repeatable"] dt[data-role="instructions"] {
    font-family: {{instructions.font.family}};
    font-size: {{instructions.font.size}};
    font-weight: {{instructions.font.weight}};
    font-style: {{instructions.font.style}};
    line-height: {{instructions.font.line.height}};
    padding-top: {{instructions.padding.top}};
    padding-bottom: {{instructions.padding.bottom}};
    margin-top: {{instructions.margin.top}};
    margin-bottom: {{instructions.margin.bottom}};
}

/** INSTRUCTIONS:normal **/
#form div[data-role="control"]:not(:hover):not([data-is-selected]):not([data-disabled]):not([data-is-active]):not([data-has-errors]) dt[data-role="instructions"],
#form div[data-role="container"][data-type="likert-wrapper"]:not(:hover):not([data-is-selected]):not([data-disabled]):not([data-is-active]):not([data-has-errors]) dt[data-role="instructions"] {
    color: {{instructions.normal.color}};
}

/** INSTRUCTIONS:hover **/
#form div[data-role="control"]:hover:not([data-is-selected]):not([data-disabled]):not([data-is-active]):not([data-has-errors]) dt[data-role="instructions"],
#form div[data-role="page-footer"] div[data-role="control"]:hover:not([data-is-selected]):not([data-disabled]):not([data-is-active]):not([data-has-errors]) .actionBarDisclaimerContainer,
#form div[data-role="container"][data-type-likert-wrapper]:hover:not([data-is-selected]):not([data-disabled]):not([data-is-active]):not([data-has-errors]) dt[data-role="instructions"] {
    color: {{instructions.hover.color}};
}

/** INSTRUCTIONS:selected **/
#form div[data-role="control"][data-is-selected]:not([data-disabled]):not([data-is-active]):not([data-has-errors]) dt[data-role="instructions"],
#form div[data-role="control"][data-is-selected]:not([data-disabled]):not([data-is-active]):not([data-has-errors]) .actionBarDisclaimerContainer,
#form div[data-role="container"][data-type="likert-wrapper"][data-is-selected]:not([data-disabled]):not([data-is-active]):not([data-has-errors]) dt[data-role="instructions"] {
    color: {{instructions.selected.color}};
}

/** INSTRUCTIONS:disabled **/
#form div[data-role="control"][data-disabled]:not([data-is-active]):not([data-has-errors]) dt[data-role="instructions"],
#form div[data-role="container"][data-type="likert-wrapper"][data-disabled]:not([data-is-active]):not([data-has-errors]) dt[data-role="instructions"] {
    color: {{instructions.disabled.color}};
}

/** INSTRUCTIONS:active **/
#form div[data-role="control"][data-is-active]:not([data-has-errors]) dt[data-role="instructions"],
#form div[data-role="container"][data-type="likert-wrapper"][data-is-active]:not([data-has-errors]) dt[data-role="instructions"] {
    color: {{instructions.focused.color}};
}

/** INSTRUCTIONS:error **/
#form div[data-role="control"][data-has-errors] dt[data-role="instructions"],
#form div[data-role="container"][data-type="likert-wrapper"][data-has-errors] dt[data-role="instructions"] {
    color: {{instructions.error.color}};
}

/** INPUT appearance **/
#form div[data-role="control"] input[data-role="i123-input"]:not([type=radio]):not([type=checkbox]):not([type=reset]):not([type=hidden]):not([data-no-theme]),
#form div[data-role="control"] select[data-role="i123-input"],
#form div[data-role="control"] textarea[data-role="i123-input"],
#form div[data-role="control"] div[data-role="i123-input"]:not([data-type="file"]),
#form div[data-role="control"] div[data-role="i123-input"][data-type="file"] > div[data-role="upload-overlay"],
#form div[data-role="control"] div[data-role="i123-input"][data-type="file"] > div[data-role="abort-all-uploads"],
#form div[data-role="control"][data-type="check-box"] input[data-role="other"],
#form div[data-role="control"][data-type="radio"] input[data-role="other"],
#form div[data-role="control"] div[data-role="price-container"],
#form div[data-role="control"] div[data-role="price-container"] > input,
#form div[data-role="control"] div[data-role="input-container"],
#form div[data-role="control"] div[data-role="input-container"] > input {
    color: {{input.normal.color}};
    padding: {{input.padding.vertical}} {{input.padding.horizontal}};
    border-width: {{input.border.width}} !important;
    border-style: {{input.border.style}} !important;
    border-radius: {{input.border.radius}} !important;
    font-family: {{input.font.family}};
    font-size: {{input.font.size}};
    font-weight: {{input.font.weight}};
    font-style: {{input.font.style}};
    line-height: {{input.font.line.height}};
    background-color: {{input.normal.background.color}};
    border-color: {{input.normal.border.color}};
}

#form div[data-role="control"] textarea[data-role="i123-input"]::-ms-input-placeholder {
    color: {{input.normal.color}};
    opacity: .5;
}

#form div[data-role="control"] textarea[data-role="i123-input"]::placeholder {
    color: {{input.normal.color}};
    opacity: .5;
}

#form div[data-role="control"] input[data-role="i123-input"]::-ms-input-placeholder {
    color: {{input.normal.color}};
    opacity: .5;
}

#form div[data-role="control"] textarea[data-role="i123-input"]::-webkit-input-placeholder {
    color: {{input.normal.color}};
    opacity: .5;
}

#form div[data-role="control"] input[data-role="i123-input"]::-webkit-input-placeholder {
    color: {{input.normal.color}};
    opacity: .5;
}

#form div[data-role="control"] div[data-role="price-container"] > input,
#form div[data-role="control"] div[data-role="input-container"] > input {
    border: none !important;
}

/** STAR RATING appearance **/
#form div[data-role="control"] div[data-type="star-rating"][data-role="i123-input"] {
    color: {{input.disabled.color}};
}

#form div[data-role="control"] div[data-role="i123-input"][data-type="date"] > div[data-role="expander"]:after,
#form div[data-role="control"] div[data-role="i123-input"][data-type="time"] > div[data-role="expander"]:after {
    right: calc({{input.padding.horizontal}} - 3px);
}


#form div[data-role="control"] input[data-role="i123-input"]:not([type=radio]):not([type=checkbox]):not([type=reset]):not([type=hidden]):not([data-no-theme]),
#form div[data-role="control"] select[data-role="i123-input"],
#form div[data-role="control"] div[data-role="i123-input"],
#form div[data-role="control"][data-type="form-captcha"] img[data-role="i123-captcha"]:not([data-captcha-type="recaptcha"]),
#form div[data-role="control"][data-type="check-box"] input[data-role="other"],
#form div[data-role="control"][data-type="radio"] input[data-role="other"],
#form div[data-role="control"] div[data-role="price-container"],
#form div[data-role="control"] div[data-role="input-container"] {
    height: calc( {{input.padding.vertical}} + {{input.padding.vertical}} + {{input.border.width}} + {{input.border.width}} + {{input.font.line.height}} );
}

/** RADIO appearance **/
#form div[data-role="control"] input[data-role="i123-input"][type=radio] + label,
#form div[data-role="control"] input[data-role="i123-input"][type=radio] + i.radio-icon {
    border-width: {{input.border.width}};
    border-style: {{input.border.style}};
    {{#unless radio.appearance}}border-radius: calc({{radio.width}} / 2);{{#else}}border-radius: {{input.border.radius}};{{#end}}
    width: {{radio.width}};
    height: {{radio.height}};
    margin: 0 {{radio.margin}} 0 0;
    background-color: {{input.normal.background.color}};
    border-color: {{input.normal.border.color}};
}

{{#if radio.appearance}}
#form input[data-role="i123-input"][type=radio]:checked + label:after,
#form input[data-role="i123-input"][type=radio]:checked + i.radio-icon {
    content: "\e990";
    font-weight: bold;
}
{{#end}}

#form div[data-role="control"] input[data-role="i123-input"][type=radio]:checked + label:after,
#form div[data-role="control"] input[data-role="i123-input"][type=radio]:checked + i.radio-icon:after {
    font-size: {{radio.width}};
}

#form div[data-role="control"] input[data-role="i123-input"][type=checkbox]:checked + label:after {
    font-size: {{checkbox.width}};
}

 /**
 * RADIO and LIKERT SCALE: checked & CONTROL : active and not active
 */
 #form div[data-role="control"][data-type="radio"] input[data-role="i123-input"][type=radio]:checked + label,
 #form div[data-role="control"][data-type="radio"] input[data-role="i123-input"][type=radio]:checked + i.radio-icon,
 #form div[data-role="control"][data-type="likert-scale"] input[data-role="i123-input"][type=radio]:checked + label,
 #form div[data-role="control"][data-type="likert-scale"] input[data-role="i123-input"][type=radio]:checked + i.radio-icon {
    border-color: {{input.normal.color}} !important;
    background-color: {{input.normal.color}} !important;
 }

 #form div[data-role="control"][data-type="radio"] input[data-role="i123-input"][type=radio]:checked + label:after,
 #form div[data-role="control"][data-type="likert-scale"] input[data-role="i123-input"][type=radio]:checked + label:after,
 #form div[data-role="control"][data-type="radio"] input[data-role="i123-input"][type=radio]:checked + i.radio-icon:after,
 #form div[data-role="control"][data-type="likert-scale"] input[data-role="i123-input"][type=radio]:checked + i.radio-icon:after {
    color: {{page.background.color}};
 }

 #form div[data-role="control"][data-type="radio"] input[data-role="i123-input"][type=radio]:checked:hover + label,
 #form div[data-role="control"][data-type="likert-scale"] input[data-role="i123-input"][type=radio]:checked:hover + label {
    border-color: {{input.hover.border.color}} !important;
 }

/**
 * CHECKBOX appearance
 **/
#form div[data-role="control"] input[data-role="i123-input"][type=checkbox] + label,
#form div[data-role="control"] input[data-role="i123-input"][type=checkbox] + i.checkbox-icon {
    border-width: {{input.border.width}};
    border-style: {{input.border.style}};
    width: {{checkbox.width}};
    height: {{checkbox.height}};
    border-radius: {{input.border.radius}};
    margin: 0 {{checkbox.margin}} 0 0;

    background-color: {{input.normal.background.color}};
    border-color: {{input.normal.border.color}};

}

 /**
  * CHECKBOX and TOS: checked & CONTROL : active and not active states
  */

  #form div[data-role="control"][data-type="check-box"] input[data-role="i123-input"][type=checkbox]:checked + label,
  #form div[data-role="control"][data-type="check-box"] input[data-role="i123-input"][type=checkbox]:checked + i.checkbox-icon,
  #form div[data-role="control"][data-type="product"] input[data-role="i123-input"][type=checkbox]:checked + label,
  #form div[data-role="control"][data-type="terms-of-service"] input[data-role="i123-input"][type=checkbox]:checked + label {
      border-color: {{input.normal.color}} !important;
      border-radius: {{input.border.radius}};
      border-width: {{input.border.width}};
      border-style: {{input.border.style}};
      background-color: {{input.normal.color}} !important;
  }

  #form div[data-role="control"][data-type="check-box"] input[data-role="i123-input"][type=checkbox]:checked:hover + label,
  #form div[data-role="control"][data-type="terms-of-service"] input[data-role="i123-input"][type=checkbox]:checked:hover + label {
      border-color: {{input.hover.border.color}} !important;
  }

  #form div[data-role="control"][data-type="check-box"] input[data-role="i123-input"][type=checkbox]:checked + label:after,
  #form div[data-role="control"][data-type="product"] input[data-role="i123-input"][type=checkbox]:checked + label:after,
  #form div[data-role="control"][data-type="check-box"] input[data-role="i123-input"][type=checkbox]:checked + i.checkbox-icon:after,
  #form div[data-role="control"][data-type="terms-of-service"] input[data-role="i123-input"][type=checkbox]:checked + label:after {
      color: {{page.background.color}};
  }

/**
 * CHECKBOX INFO - no. of choices left
 */
#form [data-role="control"][data-show-number-of-choices] [data-role="input-row"] > [data-role="choice"] > label[data-role="choice"] > span[data-role="label-info"] {
    color: {{ label.disabled.color}};
}


/**CHECKBOX & RADIO */

#form div[data-role="control"][data-type="check-box"] label[data-role="choice"],
#form [data-role="control"] [data-role="input-row"] label[data-role="tos-label"] {
    padding-left: calc( {{checkbox.width}} + {{checkbox.margin}} );
    padding-top: {{input.border.width}};
}

#form div[data-role="control"][data-type="radio"] label[data-role="choice"]{
    padding-left: calc( {{radio.width}} + {{radio.margin}} );
    padding-top: {{input.border.width}};
}

#form[data-text-direction="rtl"] div[data-role="control"][data-type="check-box"] label[data-role="choice"],
#form[data-text-direction="rtl"] [data-role="control"] [data-role="input-row"] label[data-role="tos-label"] {
    padding-right: calc( {{checkbox.width}} + {{checkbox.margin}} + {{container.padding.horizontal}} - {{control.border.width}} - 1px );
}

#form[data-text-direction="rtl"] div[data-role="control"][data-type="radio"] label[data-role="choice"] {
    padding-right: calc( {{radio.width}} + {{radio.margin}} + {{container.padding.horizontal}} - {{control.border.width}} - 1px );
}

#form div[data-role="control"][data-type="check-box"] label[data-role="choice"] > input[data-role="i123-input"][type=checkbox]+ label,
#form [data-role="control"] [data-role="input-row"] label[data-role="tos-label"] > input[data-role="i123-input"][type=checkbox] + label,
#form div[data-role="control"][data-type="check-box"] label[data-role="choice"] > input[data-role="i123-input"][type=checkbox] + i.checkbox-icon {
    margin-left: calc( -{{checkbox.width}} - {{checkbox.margin}} );
    margin-right: {{checkbox.margin}};
}

#form div[data-role="control"][data-type="radio"] label[data-role="choice"] > input[data-role="i123-input"][type=radio]+ label,
#form div[data-role="control"][data-type="radio"] label[data-role="choice"] > input[data-role="i123-input"][type=radio]+ i.radio-icon{
    margin-left: calc( -{{radio.width}} - {{radio.margin}} );
    margin-right: {{radio.margin}};
}

#form[data-text-direction="rtl"] div[data-role="control"][data-type="check-box"] label[data-role="choice"] > input[data-role="i123-input"][type=checkbox]+ label,
#form[data-text-direction="rtl"] [data-role="control"] [data-role="input-row"] label[data-role="tos-label"] > input[data-role="i123-input"][type=checkbox] + label {
    margin-right: calc( -{{checkbox.width}} - {{checkbox.margin}} );
    margin-left: {{checkbox.margin}};
}

#form[data-text-direction="rtl"] div[data-role="control"][data-type="radio"] label[data-role="choice"] > input[data-role="i123-input"][type=radio]+ label {
    margin-right: calc( -{{radio.width}} - {{radio.margin}} );
    margin-left: {{radio.margin}};
}

/**
 * disabled choice
 */

#form div[data-role="control"][data-type="check-box"] label[data-role="choice"][data-disabled],
#form div[data-role="control"][data-type="radio"] label[data-role="choice"][data-disabled] {
    color: {{label.disabled.color}};
}

#form div[data-role="control"][data-type="check-box"] label[data-role="choice"][data-disabled] > input[data-role="i123-input"][type=checkbox]+ label,
#form div[data-role="control"][data-type="radio"] label[data-role="choice"][data-disabled] > input[data-role="i123-input"][type=radio]+ label{
    background-color: {{input.disabled.background.color}};
    border-color: {{input.disabled.border.color}};
}

#form div[data-role="control"]:not(:hover):not([data-is-selected]):not([data-disabled]):not([data-is-active]):not([data-has-errors]) input[data-role="i123-input"][type=checkbox][data-disabled] + label,
#form div[data-role="control"]:not(:hover):not([data-is-selected]):not([data-disabled]):not([data-is-active]):not([data-has-errors]) input[data-role="i123-input"][type=radio][data-disabled]+ label,
#form div[data-role="control"]:not(:hover):not([data-is-selected]):not([data-disabled]):not([data-is-active]):not([data-has-errors]) input[data-role="i123-input"][type=radio][data-disabled]+ i.radio-icon {
    background-color: {{input.disabled.background.color}};
    border-color: {{input.disabled.border.color}};
}

/** INPUT: normal **/
#form div[data-role="control"]:not([data-is-selected]):not([data-disabled]):not([data-has-errors]) input[data-role="i123-input"]:not([data-no-theme]):not([type=reset]):not([type=radio]):not([type=checkbox]):not([type=hidden]),
#form div[data-role="control"]:not([data-is-selected]):not([data-disabled]):not([data-has-errors]) select[data-role="i123-input"],
#form div[data-role="control"]:not([data-is-selected]):not([data-disabled]):not([data-has-errors]) div[data-role="i123-input"]:not([data-type=file]),
#form div[data-role="control"]:not([data-is-selected]):not([data-disabled]):not([data-has-errors]) div[data-role="price-container"],
#form div[data-role="control"]:not([data-is-selected]):not([data-disabled]):not([data-has-errors]) div[data-role="input-container"],
#form div[data-role="control"]:not([data-is-selected]):not([data-disabled]):not([data-has-errors]) div[data-role="i123-input"][type=file] > [data-role="upload-overlay"],
#form div[data-role="control"]:not([data-is-selected]):not([data-disabled]):not([data-has-errors]) div[data-role="i123-input"][type=file] > [data-role="abort-all-uploads"],
#form div[data-role="control"]:not([data-is-selected]):not([data-disabled]):not([data-has-errors]) textarea[data-role="i123-input"],
#form div[data-role="control"]:not([data-is-selected]):not([data-disabled]):not([data-has-errors]) input[data-role="i123-input"][type=radio] + label,
#form div[data-role="control"]:not([data-is-selected]):not([data-disabled]):not([data-has-errors]) input[data-role="i123-input"][type=checkbox] + label,
#form div[data-role="control"]:not([data-is-selected]):not([data-disabled]):not([data-has-errors]) div[data-role="choice"] input[data-role="other"],
#form div[data-role="control"]:not([data-is-selected]):not([data-disabled]):not([data-has-errors]) div[data-role="choice"] i.checkbox-icon,
#form div[data-role="control"][data-type="signature"]:not([data-is-selected]):not([data-disabled]):not([data-has-errors]) [data-role="signature-container"],
#form [data-role="container"][data-type="repeatable"] [data-role="add-group-button"] {
    background-color: {{input.normal.background.color}};
    border-color: {{input.normal.border.color}};
}


#form div[data-ui-role="ui-element"][data-type="file"] > div[data-role="abort-all-uploads"] {
    color: {{input.disabled.color}};
}

#form div[data-ui-role="ui-element"][data-type="file"] > div[data-role="upload-overlay"] > div[data-role="placeholder"]{
    color: {{label.normal.color}};
}

/** INPUT:hover **/
body:not([data-mouse-gesture-type]) #form[data-loader-type="viewer"] div[data-role="control"]:not([data-is-drag-source]):not([data-disabled]):not([data-has-errors]) input[data-role="i123-input"]:not([type=reset]):not([type=radio]):not([type=checkbox]):not([type=hidden]):not([data-disabled]):not([data-no-theme]):hover,
body:not([data-mouse-gesture-type]) #form[data-loader-type="viewer"] div[data-role="control"]:not([data-is-drag-source]):not([data-disabled]):not([data-has-errors]) select[data-role="i123-input"]:not([data-disabled]):hover,
body:not([data-mouse-gesture-type]) #form[data-loader-type="viewer"] div[data-role="control"]:not([data-is-drag-source]):not([data-disabled]):not([data-has-errors]) div[data-role="i123-input"]:not([data-type="file"]):not([data-disabled]):not([readonly="readonly"]):hover,
body:not([data-mouse-gesture-type]) #form[data-loader-type="viewer"] div[data-role="control"]:not([data-is-drag-source]):not([data-disabled]):not([data-has-errors]) div[data-role="price-container"]:not([data-disabled]):hover,
body:not([data-mouse-gesture-type]) #form[data-loader-type="viewer"] div[data-role="control"]:not([data-is-drag-source]):not([data-disabled]):not([data-has-errors]) div[data-role="price-container"]:not([data-disabled]) > input:hover,
body:not([data-mouse-gesture-type]) #form[data-loader-type="viewer"] div[data-role="control"]:not([data-is-drag-source]):not([data-disabled]):not([data-has-errors]) div[data-role="input-container"]:not([data-disabled]):hover,
body:not([data-mouse-gesture-type]) #form[data-loader-type="viewer"] div[data-role="control"]:not([data-is-drag-source]):not([data-disabled]):not([data-has-errors]) div[data-role="input-container"]:not([data-disabled]) > input:hover,
body:not([data-mouse-gesture-type]) #form[data-loader-type="viewer"] div[data-role="control"]:not([data-is-drag-source]):not([data-disabled]):not([data-has-errors]) div[data-role="i123-input"][data-type="file"]:not([data-disabled]) > [data-role="upload-overlay"]:hover,
body:not([data-mouse-gesture-type]) #form[data-loader-type="viewer"] div[data-role="control"]:not([data-is-drag-source]):not([data-disabled]):not([data-has-errors]) div[data-role="i123-input"][data-type="file"]:not([data-disabled]) > [data-role="abort-all-uploads"]:hover,
body:not([data-mouse-gesture-type]) #form[data-loader-type="viewer"] div[data-role="control"]:not([data-is-drag-source]):not([data-disabled]):not([data-has-errors]) textarea[data-role="i123-input"]:not([data-disabled]):hover,
body:not([data-mouse-gesture-type]) #form[data-loader-type="viewer"] div[data-role="control"]:not([data-is-drag-source]):not([data-disabled]):not([data-has-errors]) input[data-role="i123-input"][type=radio]:not([data-disabled]):hover + label,
body:not([data-mouse-gesture-type]) #form[data-loader-type="viewer"] div[data-role="control"]:not([data-is-drag-source]):not([data-disabled]):not([data-has-errors]) input[data-role="i123-input"][type=radio]:not([data-disabled]):hover + i.radio-icon,
body:not([data-mouse-gesture-type]) #form[data-loader-type="viewer"] div[data-role="control"]:not([data-is-drag-source]):not([data-disabled]):not([data-has-errors]) input[data-role="i123-input"][type=checkbox]:not([data-disabled]):not([readonly]):hover + label,
body:not([data-mouse-gesture-type]) #form[data-loader-type="viewer"] div[data-role="control"]:not([data-is-drag-source]):not([data-disabled]):not([data-has-errors]) div[data-role="choice"] input[data-role="other"]:not([data-disabled]):hover,
body:not([data-mouse-gesture-type]) #form[data-loader-type="viewer"] div[data-role="control"]:not([data-is-drag-source]):not([data-disabled]):not([data-has-errors]) div[data-role="choice"] label[data-role="choice"] > input + label:focus,
body:not([data-mouse-gesture-type]) #form[data-loader-type="viewer"] div[data-role="control"]:not([data-is-drag-source]):not([data-disabled]):not([data-has-errors]) div[data-role="choice"] label[data-role="choice"] > input:focus + label,
body:not([data-mouse-gesture-type]) #form[data-loader-type="viewer"] div[data-role="control"]:not([data-is-drag-source]):not([data-disabled]):not([data-has-errors]) div[data-role="choice"] label[data-role="choice"] > input[type=radio]:focus + label,
body:not([data-mouse-gesture-type]) #form[data-loader-type="viewer"] div[data-role="control"]:not([data-is-drag-source]):not([data-disabled]):not([data-has-errors]) div[data-role="input-row"] label[data-role="tos-label"] > input:not([readonly]) + label:focus,
body:not([data-mouse-gesture-type]) #form[data-loader-type="viewer"] div[data-role="control"]:not([data-is-drag-source]):not([data-disabled]):not([data-has-errors]) div[data-role="input-row"] label[data-role="tos-label"] > input:not([readonly]):focus + label,
body:not([data-mouse-gesture-type]) #form[data-loader-type="viewer"] div[data-role="control"][data-type="signature"]:not([data-is-drag-source]):not([data-disabled]):not([data-has-errors]) [data-role="signature-container"]:not([readonly="readonly"]):hover {
    background-color: {{input.hover.background.color}};
    border-color: {{input.hover.border.color}};
    color: {{input.hover.color}}
}

body:not([data-mouse-gesture-type]) #form[data-loader-type="viewer"] div[data-role="control"]:not([data-is-drag-source]):not([data-disabled]):not([data-has-errors]):not([data-is-active]) div[data-role="i123-input"][data-type="file"]:not([data-disabled]) > [data-role="upload-overlay"]:hover > div[data-role="placeholder"],
body:not([data-mouse-gesture-type]) #form[data-loader-type="viewer"] div[data-role="control"]:not([data-is-drag-source]):not([data-disabled]):not([data-has-errors]):not([data-is-active]) div[data-role="i123-input"][data-type="file"]:not([data-disabled]) > [data-role="abort-all-uploads"]:hover {
    color: {{colors.selected.color}};
}

/**INPUT:disabled **/
#form div[data-role="control"][data-disabled]:not([data-is-active]):not([data-has-errors]) input[data-role="i123-input"]:not([data-no-theme]):not([type=reset]):not([type=radio]):not([type=checkbox]):not([type=hidden]),
#form div[data-role="control"][data-disabled]:not([data-is-active]):not([data-has-errors]) select[data-role="i123-input"],
#form div[data-role="control"][data-disabled]:not([data-is-active]):not([data-has-errors]) div[data-role="i123-input"],
#form div[data-role="control"][data-disabled]:not([data-is-active]):not([data-has-errors]) div[data-role="price-container"],
#form div[data-role="control"][data-disabled]:not([data-is-active]):not([data-has-errors]) div[data-role="price-container"] > input,
#form div[data-role="control"][data-disabled]:not([data-is-active]):not([data-has-errors]) div[data-role="input-container"],
#form div[data-role="control"][data-disabled]:not([data-is-active]):not([data-has-errors]) div[data-role="input-container"] > input,
#form div[data-role="control"][data-disabled]:not([data-is-active]):not([data-has-errors]) textarea[data-role="i123-input"],
#form div[data-role="control"][data-disabled]:not([data-is-active]):not([data-has-errors]) input[data-role="i123-input"][type=radio] + label,
#form div[data-role="control"][data-disabled]:not([data-is-active]):not([data-has-errors]) input[data-role="i123-input"][type=checkbox] + label,
#form div[data-role="control"][data-disabled]:not([data-is-active]):not([data-has-errors]) div[data-role="choice"] input[data-role="other"]{
    background-color: {{input.disabled.background.color}};
    border-color: {{input.disabled.border.color}};
}

/**EDITOR > INPUT:active **/
#form[data-loader-type="editor"] div[data-role="control"][data-is-active]:not([data-has-errors]) input[data-role="i123-input"]:not([data-no-theme]):not([type=reset]):not([type=radio]):not([type=checkbox]):not([type=hidden]),
#form[data-loader-type="editor"] div[data-role="control"][data-is-active]:not([data-has-errors]) select[data-role="i123-input"],
#form[data-loader-type="editor"] div[data-role="control"][data-is-active]:not([data-has-errors]) div[data-role="i123-input"]:not([data-type="file"]),
#form[data-loader-type="editor"] div[data-role="control"][data-is-active]:not([data-has-errors]) div[data-role="price-container"],
#form[data-loader-type="editor"] div[data-role="control"][data-is-active]:not([data-has-errors]) div[data-role="price-container"] > input,
#form[data-loader-type="editor"] div[data-role="control"][data-is-active]:not([data-has-errors]) div[data-role="input-container"],
#form[data-loader-type="editor"] div[data-role="control"][data-is-active]:not([data-has-errors]) div[data-role="input-container"] > input,
#form[data-loader-type="editor"] div[data-role="control"][data-is-active]:not([data-has-errors]) div[data-role="i123-input"][data-type="file"] > div[data-role="upload-overlay"],
#form[data-loader-type="editor"] div[data-role="control"][data-is-active]:not([data-has-errors]) div[data-role="i123-input"][data-type="file"] > div[data-role="abort-all-uploads"],
#form[data-loader-type="editor"] div[data-role="control"][data-is-active]:not([data-has-errors]) textarea[data-role="i123-input"],
#form[data-loader-type="editor"] div[data-role="control"][data-is-active]:not([data-has-errors]) div[data-role="choice"] input[data-role="other"] {
    background-color: {{input.normal.background.color}};
    border-color: {{input.normal.border.color}};
}

/**VIEWER > INPUT:active **/
#form[data-loader-type="viewer"] div[data-role="control"][data-is-active]:not([data-has-errors]) input[data-role="i123-input"]:not([data-no-theme]):not([type=reset]):not([type=radio]):not([type=checkbox]):not([type=hidden]):focus,
#form[data-loader-type="viewer"] div[data-role="control"][data-is-active]:not([data-has-errors]) select[data-role="i123-input"]:focus,
#form[data-loader-type="viewer"] div[data-role="control"][data-is-active]:not([data-has-errors]) div[data-role="i123-input"]:not([data-type="file"]):not([data-type="dropdown"]):focus,
#form[data-loader-type="viewer"] div[data-role="control"][data-is-active]:not([data-has-errors]) div[data-role="i123-input"][data-is-focused-child-element],
#form[data-loader-type="viewer"] div[data-role="control"][data-is-active]:not([data-has-errors]) div[data-role="price-container"][data-is-focused-child-element],
#form[data-loader-type="viewer"] div[data-role="control"][data-is-active]:not([data-has-errors]) div[data-role="price-container"][data-is-focused-child-element] > input,
#form[data-loader-type="viewer"] div[data-role="control"][data-is-active]:not([data-has-errors]) div[data-role="input-container"][data-is-focused-child-element],
#form[data-loader-type="viewer"] div[data-role="control"][data-is-active]:not([data-has-errors]) div[data-role="input-container"][data-is-focused-child-element] > input,
#form[data-loader-type="viewer"] div[data-role="control"][data-is-active]:not([data-has-errors]) div[data-role="i123-input"][data-type="file"]:focus > [data-role="upload-overlay"],
#form[data-loader-type="viewer"] div[data-role="control"][data-is-active]:not([data-has-errors]) div[data-role="i123-input"][data-type="file"]:focus > [data-role="abort-all-uploads"],
#form[data-loader-type="viewer"] div[data-role="control"][data-is-active]:not([data-has-errors]) div[data-role="i123-input"][data-type="file"][data-file-tab-focus-state] div[data-role="upload-overlay"],
#form[data-loader-type="viewer"] div[data-role="control"][data-is-active]:not([data-has-errors]) textarea[data-role="i123-input"]:focus,
#form[data-loader-type="viewer"] div[data-role="control"][data-is-active]:not([data-has-errors]) div[data-role="choice"] input[data-role="other"]:focus {
    background-color: {{input.focused.background.color}} !important;
    border-color: {{input.focused.border.color}} !important;
    color: {{input.focused.color}} !important;
}

#form[data-loader-type="viewer"] div[data-role="control"][data-is-active]:not([data-has-errors]) div[data-role="i123-input"][data-type="file"][data-file-tab-focus-state] div[data-role="upload-overlay"] div[data-role="placeholder"] {
    color: {{input.focused.border.color}};
}

#form[data-loader-type="viewer"] div[data-role="control"][data-is-active]:not([data-has-errors]) div[data-role="i123-input"][data-type="file"]:focus > [data-role="upload-overlay"] > [data-role="placeholder"],
#form[data-loader-type="viewer"] div[data-role="control"][data-is-active]:not([data-has-errors]) div[data-role="i123-input"][data-type="file"]:hover > [data-role="upload-overlay"] > [data-role="placeholder"],
#form[data-loader-type="viewer"] div[data-role="control"][data-is-active]:not([data-has-errors]) div[data-role="i123-input"][data-type="file"] > [data-role="abort-all-uploads"] {
    color: {{colors.selected.color}};
}

/**INPUT:error **/
#form div[data-role="control"][data-has-errors]:not([data-type="address"]) select[data-role="i123-input"],
#form div[data-role="control"][data-has-errors]:not([data-type="address"]) div[data-role="i123-input"]:not([data-type="file"]),
#form div[data-role="control"][data-has-errors] div[data-role="price-container"],
#form div[data-role="control"][data-has-errors] div[data-role="input-container"],
#form div[data-role="control"][data-has-errors] div[data-role="i123-input"][data-type="file"] [data-role="upload-overlay"],
#form div[data-role="control"][data-has-errors] textarea[data-role="i123-input"],
#form div[data-role="control"][data-has-errors] input[data-role="i123-input"][type=radio] + label,
#form div[data-role="control"][data-has-errors] input[data-role="i123-input"][type=radio] + i.radio-icon,
#form div[data-role="control"][data-has-errors]:not([data-type="product"]) input[data-role="i123-input"][type=checkbox] + label,
#form div[data-role="control"][data-has-errors] div[data-role="choice"] input[data-role="other"],
#form div[data-role="control"][data-has-errors] div[data-role="price-container"] span[data-role="currency-code"],
#form div[data-role="control"][data-has-errors]:not([data-type="product"]) input {
    background-color: {{input.error.background.color}};
    border-color: {{input.error.border.color}};
    color: {{input.error.color}};
}

#form div[data-role="control"][data-has-errors][data-type="address"] input[data-role="i123-input"][data-field-with-error]:not([data-no-theme]):not([type=reset]):not([type=radio]):not([type=checkbox]):not([type=hidden]),
#form div[data-role="control"][data-has-errors][data-type="address"] select[data-role="i123-input"][data-field-with-error],
#form div[data-role="control"][data-has-errors][data-type="address"] div[data-role="i123-input"]:not([data-type="file"])[data-field-with-error] {
    background-color: {{input.error.background.color}};
    border-color: {{input.error.border.color}};
    color: {{input.error.color}};
}

#form div[data-role="control"][data-has-errors] div[data-role="price-container"] input,
#form div[data-role="control"][data-has-errors] div[data-role="input-container"] input {
    color: {{input.error.color}};
}
#form div[data-role="control"][data-has-errors] div[data-role="i123-input"][data-type="file"] [data-role="upload-overlay"] > [data-role="placeholder"] {
    color: {{error.normal.color}};
}

#form div[data-role="control"][data-has-errors] div[data-type="date"][data-role="i123-input"] div[data-role="date-part"],
#form div[data-role="control"][data-has-errors] div[data-type="time"][data-role="i123-input"] div[data-role="date-part"] {
    color: {{input.error.border.color}};
}

/**
 * INPUT ROWS
 */
#form [data-role="control"]:not([data-type="check-box"]):not([data-type="radio"]) [data-role="input-row"]:not([data-is-first-row]) {
    margin-top: {{input.margin.vertical}};
}

#form [data-role="control"]:not([data-type="check-box"]):not([data-type="radio"]) [data-role="input-row"]:not([data-is-last-row]) {
    margin-bottom: {{input.margin.vertical}};
}

#form [data-role="control"]:not([data-type="check-box"]):not([data-type="radio"])[data-force-mobile-rendering] [data-role="input-row"] > * + * {
    margin-top: {{input.margin.vertical}} !important;
}

#form [data-role="control"][data-type="check-box"] [data-role="input-row"] label[data-role="choice"],
#form [data-role="control"][data-type="radio"] [data-role="input-row"] i.checkbox-icon,
#form [data-role="control"][data-type="radio"] [data-role="input-row"] label[data-role="choice"] {
    padding-top: calc({{input.padding.vertical}} + {{input.border.width}});
    padding-bottom: calc({{input.padding.vertical}} + {{input.border.width}});
    line-height: {{input.font.line.height}};
}


/**
 * FORM TYPOGRAPHY
 */
#form div[data-role="control"] h1 {
    font-size: 2em;
}

#form div[data-role="control"] h2 {
    font-size: 1.8em;
}

#form div[data-role="control"] h3 {
    font-size: 1.5em;
}

#form div[data-role="control"] h4 {
    font-size: 1.2em;
}

#form div[data-role="control"] h5 {
    font-size: 1em;
}

#form div[data-role="control"] h6 {
    font-size: 0.8em;
}

#form div[data-role="control"] p {
    font-size: 1em;
}

#form div[data-role="control"] h1,
#form div[data-role="control"] h2,
#form div[data-role="control"] h3,
#form div[data-role="control"] h4,
#form div[data-role="control"] h5,
#form div[data-role="control"] h6,
#form div[data-role="control"]:not([data-type="html-block"]) p,
#form div[data-role="control"][data-type="html-block"] > * {
    color: {{form.color}};
}

#form div[data-role="control"][data-type="heading"] h1,
#form div[data-role="control"][data-type="heading"] h2,
#form div[data-role="control"][data-type="heading"] h3,
#form div[data-role="control"][data-type="heading"] h4,
#form div[data-role="control"][data-type="heading"] h5,
#form div[data-role="control"][data-type="heading"] h6 {
    color: {{label.normal.color}};
}

/**
 * Control renderers
 */
#form div[data-renderer-type="tln"] > div[data-role="input-row"] {
    margin-right: calc(-2 * {{control.border.width}});
}

#form [data-role="control"][data-renderer-type="tlc"] dt[data-role="instructions"],
#form [data-role="control"][data-renderer-type="llc"] dt[data-role="instructions"],
#form [data-role="control"][data-renderer-type="rlc"] dt[data-role="instructions"] {
    padding-bottom: {{label.padding.bottom}} !important;
}

#form div[data-role="control"][data-renderer-type="tln"] label[data-role="label"] + dt[data-role="instructions"] + div[data-role="input-row"],
#form div[data-role="control"][data-renderer-type="tln"] div.control__label + dt[data-role="instructions"] + div[data-role="input-row"],
#form div[data-role="control"][data-type="form-captcha"][data-renderer-type="tln"] label[data-role="label"] ~ div[data-role="input-row"],
#form div[data-role="control"][data-renderer-type="tln"] div.control__label + dt[data-role="instructions"] + div[data-role="input-row"],
#form[data-layout-type="mobile"] div[data-type="payments-selector"] div[data-ui-role="ui-element"] {
    margin-top: {{label.padding.bottom}} !important;
}

#form div[data-role="control"][data-type="payments-selector"][data-renderer-type="tln"] label[data-role="label"] {
    padding-bottom: {{label.padding.bottom}} !important;
}

#form div[data-type="payments-selector"] > div[data-role="nowrap"] > label {
    margin-bottom: {{label.padding.bottom}};
}

/**
 * UI-software elements skinning
 */
div[data-ui-role="ui-element"][data-type="file"] > div[data-role="upload"] {
    color: {{input.normal.color}};
    background-color: {{input.normal.background.color}};
}

/**
 * Map control
 */
#form div[data-role="control"][data-type="map"] > div[data-role="map-canvas"] {
    left: {{container.padding.horizontal}};
    right: {{container.padding.horizontal}};
    top: {{container.padding.vertical}};
    bottom: {{container.padding.vertical}};
}

/**
 * Likert control
 */

#form div[data-role="control"][data-type="likert-scale"] div[data-role="label-resizer"] {
    transform: translateX( calc( -{{grid.columnSpacing}}px / 2 - 2 * {{control.border.width}} ) );
}

/**
 * Star rating control
 */
#form div[data-ui-role="ui-element"][data-type="star-rating"] div[data-role="star"][data-rating-tab-focus-state],
#form div[data-ui-role="ui-element"][data-type="star-rating"] div[data-role="star"][data-rating-tab-focus-state][data-is-checked]{
    color: {{colors.selected.color}};
}

#form div[data-ui-role="ui-element"][data-type="star-rating"] div[data-role="star"][data-is-hover] {
    color: {{colors.selected.color}};
}

#form div[data-ui-role="ui-element"][data-type="star-rating"] div[data-role="star"][data-is-checked]:not([data-is-hover]) {
    color: {{colors.selected.color}};
}

/**
 * PAGINATION
 */

#form > div[data-role="page"]  > [data-role="page-header"] > div[data-role="pagination"] {
    margin-left : -{{page.padding.left}};
    margin-right : -{{page.padding.right}};
}

#form > div[data-role="page"] > [data-role="page-header"] > div[data-role="pagination"] > div[data-role="legend"] {
    margin: 0 calc({{grid.paddingRight}}px + {{container.padding.horizontal}}) 0 calc({{grid.paddingLeft}}px + {{container.padding.horizontal}});
}

#form > div[data-role="page"] > [data-role="page-header"] > div[data-role="pagination"] div[data-role="step"]:not([data-is-current]) {
    color: {{input.disabled.color}};
}

#form > div[data-role="page"] > [data-role="page-header"] > div[data-role="pagination"][data-type="steps"] > div[data-role="step"][data-is-current] {
    border-bottom-color: {{colors.selected.color}};
}

#form > div[data-role="page"] > [data-role="page-header"] > div[data-role="pagination"][data-type="steps"] > div[data-role="step"]:not([data-is-current]) {
    border-bottom-color: {{input.disabled.color}};
}

#form > div[data-role="page"] > div[data-role="page-header"] > div[data-role="pagination"][data-type="percents"] > div[data-role="progress-bar"] > div[data-role="progress"] {
    background-color: {{colors.selected.color}};
}

{{#unless page.shadow.visibility}}
    #form div[data-role="page"],
    #form div[data-role="control"][data-type="realtime-calculations"] {
        box-shadow: none;
    }
{{#end}}

#form [data-role="page"] [data-role="page-footer"] [data-role="control"][data-type="form-action-bar"] {
    line-height: calc( {{button.padding.vertical}} + {{button.padding.vertical}} + {{button.font.line.height}} + {{button.border.width}} + {{button.border.width}} + {{grid.columnSpacing}}px + {{button.padding.vertical}} );
}

#form [data-role="control"]:not([data-force-mobile-rendering]) [data-role="input-row"][data-fill-colspan="0"] {
    margin-right: calc(-2 * {{control.border.width}});
}

div[data-ui-role="ui-element"][data-type="file"] > div[data-role="files-container"] > [data-role="upload"] > [data-role="size"] {
    color: {{input.disabled.color}};
}

div[data-ui-role="ui-element"][data-type="file"] > div[data-role="files-container"] > [data-role="upload"][data-has-error] {
    background-color: {{input.error.background.color}};
}

#form div[data-role="control"] div[data-role="i123-input"][data-type="file"] [data-role="button-remove"] {
    color: {{input.disabled.color}};
}

#form div[data-role="control"] div[data-role="i123-input"][data-type="file"] [data-role="button-remove"]:hover {
    color: {{input.normal.color}};
}

/**
 * Signature Control
 */

#form div[data-role="control"][data-type="signature"] div[data-role="signature-container"] > a[data-role="clear-signature"] {
    color: {{input.normal.color}};
}

#form div[data-role="control"][data-type="signature"] div[data-role="signature-container"]:hover > a[data-role="clear-signature"] {
    color: {{input.hover.color}};
}

#form div[data-role="control"][data-type="terms-of-service"] [data-role="input-row"],
#form div[data-role="control"][data-type="likert-scale"] [data-role="input-column"] {
    padding-top: {{input.padding.vertical}};
}

#form div[data-role="control"][data-type="terms-of-service"] a {
    color: {{button.primary.normal.background.color}};
}

#form [data-role="container"][data-type="likert-wrapper"] [data-role="likert-header"] div[data-role="scale-column"] {
    color: {{label.normal.color}};
    font-family: {{form.font.family}};
    font-size: {{form.font.size}};
    font-weight: {{form.font.weight}};
    font-style: {{form.font.style}};
    line-height: {{form.font.line.height}};
}

#form div[data-role="control"][data-type="price"] div[data-role="price-container"] span,
#form div[data-role="control"] div[data-role="input-container"] span {
    padding-left: {{input.padding.horizontal}};
    padding-top: {{input.border.width}};
}

#form[data-text-direction="rtl"] div[data-role="control"][data-type="price"] div[data-role="price-container"] span,
#form[data-text-direction="rtl"] div[data-role="control"] div[data-role="input-container"] span {
    padding-right: {{input.padding.horizontal}};
}

#form div[data-role="control"][data-type="price"] div[data-role="price-container"] input,
#form div[data-role="control"] div[data-role="input-container"] input {
    padding-left: calc( {{input.font.size}} * 2.6 + {{input.padding.horizontal}} );
    top: 50%;
}

#form[data-text-direction="rtl"] div[data-role="control"][data-type="price"] div[data-role="price-container"] input {
    padding-right: calc( {{input.font.size}} * 2.6 + {{input.padding.horizontal}} );
}

#form div[data-type="payments-selector"] img + span:after {
    border-radius: {{input.border.radius}};
    background-color: {{colors.selected.color}};
    border: 1px solid {{colors.selected.color}};
}

#form[data-has-fixed-header] div[data-role="page"] > div[data-role="page-header"][data-has-realtime-calculations][data-has-quiz-timer] > [data-role="quiz-timer"] {
    padding-left: {{page.padding.left}};
}

#form div[data-role="page-header"] div[data-type="form-header"] {
    display: inline-block;
}

#form div[data-role="page-header"][data-has-realtime-calculations] div[data-type="form-header"],
#form div[data-role="page-header"][data-has-quiz-timer][data-has-realtime-calculations] div[data-type="form-header"] {
    margin-top: {{page.padding.top}};
}

/**
 * Heading
 */

 #form[data-loader-type="editor"] div[data-role="control"][data-type="heading"] *{
    font-family: {{form.font.family}} !important;
 }

{{#if device.isMobile}}
html,
body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
{{#end}}


/**
 * Repeatable
 */
 #form [data-role="container"][data-type="repeatable"] [data-type="repeatable-group"] [data-ro#form div[data-role="control"]:not([data-is-selected]):not([data-disabled]):not([data-has-errors]) input[data-role="i123-input"]:not([data-no-theme]):not([type=reset]):not([type=radio]):not([type=checkbox]):not([type=hidden]), #form div[data-role="control"]:notle=remove-group-button],
 #form [data-role="container"][data-type="repeatable"] [data-role="add-group-button"] {
    border-color: {{input.normal.border.color}} !important;
 }

 #form [data-role="container"][data-type="repeatable"] [data-type="repeatable-group"] [data-role="remove-group-button"],
 #form [data-role="container"][data-type="repeatable"] [data-role="add-group-button"] {
    color: {{input.normal.border.color}} !important;
    border-color: {{input.normal.border.color}} !important;
 }

 #form [data-role="container"][data-type="repeatable"] [data-type="repeatable-group"] [data-role="remove-group-button"],
 #form [data-role="container"][data-type="repeatable"] [data-type="repeatable-group"] [data-role="remove-group-button"]:hover {
    background-color: {{page.background.color}};
 }

 #form [data-role="container"][data-type="repeatable"] [data-type="repeatable-group"] [data-role="remove-group-button"]:hover i {
    color: {{input.normal.color}} !important;
 }

 #form [data-role="container"][data-type="repeatable"] > [data-role="body"]:before,
 #form [data-role="container"][data-type="repeatable"] > [data-role="body"]:after {
    left: {{container.padding.horizontal}};
    right: {{container.padding.horizontal}};
    border-top: {{input.border.width}} solid {{input.normal.border.color}};
 }

 #form [data-role="container"][data-type="repeatable"] > [data-role="body"] [data-type="repeatable-group"] + [data-type="repeatable-group"]:before {
    left: {{container.padding.horizontal}};
    right: {{container.padding.horizontal}};
    border-top: {{input.border.width}} solid {{input.normal.border.color}};
 }

 #form [data-role="container"][data-type="repeatable"] [data-role="add-group-button"] {
    padding: {{container.padding.vertical}} {{container.padding.horizontal}};
    font-size: {{button.font.size}};
    border-width: {{input.border.width}};
 }

 #form [data-role="container"][data-type="repeatable"] [data-role="add-group-button"]:hover {
    border-color: {{input.hover.border.color}} !important;
    color: {{input.hover.border.color}} !important;
 }

 #form [data-role="container"][data-type="repeatable"] [data-type="repeatable-group"] [data-role="remove-group-button"] {
    right: {{container.padding.horizontal}};
 }

 #form [data-role="container"][data-type="repeatable"] > label[data-role="label"],
 #form [data-role="container"][data-type="repeatable"] > dt[data-role="instructions"] {
    margin-left: {{container.padding.horizontal}};
 }

 #form[data-layout-type="mobile"] [data-role="container"][data-type="repeatable"] [data-role="add-group-button"],
 #form[data-layout-type="mobile"] [data-role="container"][data-type="repeatable"] > label[data-role="label"],
 #form[data-layout-type="mobile"] [data-role="container"][data-type="repeatable"] > dt[data-role="instructions"] {
    width: calc(100% - 2 * {{container.padding.horizontal}});
 }

 #form [data-role="container"][data-type="repeatable"] {
    padding-top: {{input.padding.vertical}} !important;
    padding-bottom: {{input.padding.vertical}} !important;
 }

 #form [data-role="container"][data-type="repeatable"] > [data-role="instructions"] {
    font-size: {{instructions.font.size}};
 }

 #form [data-role="container"][data-type="repeatable"] > [data-role="body"]:before,
 #form [data-role="container"][data-type="repeatable"] > [data-role="body"]:after,
 #form [data-role="container"][data-type="repeatable"] > [data-role="body"] [data-type="repeatable-group"] + [data-type="repeatable-group"]:before {
    height: {{input.border.width}};
 }

 #form [data-role="container"][data-type="repeatable"][data-has-errors] {
    background-color: {{input.error.background.color}};
 }

 #form [data-type="repeatable-group"][data-empty-state] > [data-role="body"] {
     border: 1px dashed {{input.normal.border.color}};
     margin-left: {{container.padding.horizontal}};
     margin-right: {{container.padding.horizontal}};
     padding: 16px !important;
 }

{{#if input.normal.placeholderColor}}

::placeholder {
    color: {{input.normal.placeholderColor}} !important;
}

:-ms-input-placeholder {
    color: {{input.normal.placeholderColor}} !important;
}

::-ms-input-placeholder {
    color: {{input.normal.placeholderColor}} !important;
}

textarea[placeholder]::placeholder {
    color: {{input.normal.placeholderColor}} !important;
}

textarea[placeholder]:-ms-input-placeholder {
    color: {{input.normal.placeholderColor}} !important;
}

textarea[placeholder]::-ms-input-placeholder {
    color: {{input.normal.placeholderColor}} !important;
}

div[data-ui-role="ui-element"][data-type="date"] div[data-role="date-part"][data-is-null],
div[data-ui-role="ui-element"][data-type="date"]:focus div[data-role="date-part"][data-is-null][data-is-focused],
div[data-ui-role="ui-element"][data-type="time"] div[data-role="date-part"]:not([data-part="am-pm"])[data-is-null],
div[data-ui-role="ui-element"][data-type="time"]:focus div[data-role="date-part"]:not([data-part="am-pm"])[data-is-null][data-is-focused] {
    color: {{input.normal.placeholderColor}} !important;
}

 /* add rest of browser specific styles */

{{#end}}

div.ui-dialog[data-dialog-role="detailed-invoice-dialog"] > .ui-body table[data-role="detailed-invoice"] td,
div.ui-dialog[data-dialog-role="detailed-invoice-dialog"] .ui-titlebar{
    font-family: {{form.font.family}};
}

div.ui-dialog[data-dialog-role="detailed-invoice-dialog"] > .ui-body table[data-role="detailed-invoice"] td{
    font-style: {{form.font.style}};
    font-size: {{form.font.size}};
    line-height: {{form.font.line.height}};
}

#form [data-role="page"] > [data-role="page-header"] > [data-role="control"][data-type="realtime-calculations"]:not(:hover):not(.selected):not([data-is-selected]):not([data-disabled]):not([data-is-active]):not([data-has-errors]){
    background-color: {{table.header.background.color}};
    font-style: {{form.font.style}};
    font-family: {{form.font.family}};
}

#form [data-role="page"] > [data-role="page-header"] > [data-role="control"][data-type="realtime-calculations"]:not(.selected):not([data-is-selected]):not([data-disabled]):not([data-is-active]):not([data-has-errors]){
    font-family: {{form.font.family}};
}

#form [data-role="page"] > [data-role="page-header"] > [data-role="control"][data-type="realtime-calculations"]:not(.selected):not([data-is-selected]):not([data-disabled]):not([data-is-active]):not([data-has-errors]):hover{
    background-color: {{table.header.background.color}};
}

#form [data-role="page"] > [data-role="page-header"] > .header-text-container{
    right: {{page.padding.right}}
}

/* real-time payment summary */
#form[data-loader-type="editor"] [data-type="payment-summary"] .invoice-wrapper{
    padding: {{container.padding.vertical}} {{container.padding.horizontal}};
}

.invoice-wrapper label {
    font-family: {{form.font.family}};
    font-size: {{form.font.size}};
    font-style: {{form.font.style}};
    font-weight: {{form.font-weight}};
    line-height: {{form.font.line.height}};
    color: {{label.normal.color}};
}

.detailed-invoice-container {
	font-family: {{form.font.family}};
	font-size: {{form.font.size}};
    font-style: {{form.font.style}};
	line-height: {{form.font.line.height}};
	color: {{label.normal.color}};
}

.detailed-invoice-container > .invoice-row.invoice-header {
	background-color: {{table.header.background.color}};
}

.detailed-invoice-container > .invoice-row.invoice-subtotal,
.detailed-invoice-container > .invoice-row.invoice-total {
	border-top: {{input.border.width}} solid {{input.normal.border.color}};
}

div.ui-dialog[data-dialog-role="detailed-invoice-dialog"] > .ui-body table[data-role="detailed-invoice"] td,
div.ui-dialog[data-dialog-role="detailed-invoice-dialog"] .ui-titlebar{
    font-family: {{form.font.family}};
}

div.ui-dialog[data-dialog-role="detailed-invoice-dialog"] > .ui-body table[data-role="detailed-invoice"] td{
    font-style: {{form.font.style}};
    font-size: {{form.font.size}};
    line-height: {{form.font.line.height}};
}

#form [data-role="page"] > [data-role="page-header"] > [data-role="control"][data-type="realtime-calculations"]:not(:hover):not(.selected):not([data-is-selected]):not([data-disabled]):not([data-is-active]):not([data-has-errors]){
    background-color: {{table.header.background.color}};
    font-style: {{form.font.style}};
    font-family: {{form.font.family}};
}

#form [data-role="page"] > [data-role="page-header"] > [data-role="control"][data-type="realtime-calculations"]:not(.selected):not([data-is-selected]):not([data-disabled]):not([data-is-active]):not([data-has-errors]){
    font-family: {{form.font.family}};
}

#form [data-role="page"] > [data-role="page-header"] > [data-role="control"][data-type="realtime-calculations"]:not(.selected):not([data-is-selected]):not([data-disabled]):not([data-is-active]):not([data-has-errors]):hover{
    background-color: {{table.header.background.color}};
}

#form [data-role="page"] > [data-role="page-header"] > .header-text-container{
    right: {{page.padding.right}}
}

#form .loader-container > .loader > .form-header h1 {
    font-size: 2em;
}

#form .loader-container > .loader > .form-header h2 {
    font-size: 1.8em;
}

#form .loader-container > .loader > .form-header h3 {
    font-size: 1.5em;
}

#form .loader-container > .loader > .form-header h4 {
    font-size: 1.2em;
}

#form .loader-container > .loader > .form-header h5 {
    font-size: 1em;
}

#form .loader-container > .loader > .form-header h6 {
    font-size: 0.8em;
}

#form .loader-container > .loader > .form-header p {
    font-size: 1em;
}

#form .loader-container > .loader > .form-header > * {
    color: {{form.color}};
}

#form .loader-container > .loader > .form-header li {
    color: {{label.normal.color}};
}

#form .loader-container > .loader > .loader-text {
    font-weight: {{form.font.weight}};
    font-style: {{form.font.style}};
    color: {{label.normal.color}};
}

#form[data-loader-type='editor'] div[data-role='control'][data-type='form-captcha'][data-captcha-type='none'] p {
  color: {{label.normal.color}};
}

#form[data-loader-type='editor'] > div[data-role='page'] div[data-role='control'][data-type='form-captcha'][data-captcha-type='none']:not([data-disabled]):not([data-has-errors]),
body:not([data-mouse-gesture-type]) #form[data-loader-type='editor'] [data-type='form-captcha'][data-captcha-type='none']:hover:not(.selected):not([data-is-selected]):not([data-is-drag-source]):not([data-disabled]):not([data-is-active]):not([data-has-errors]):hover {
  border-color: {{input.normal.border.color}};
}

#form [data-role="page-footer"] .abuse-disclaimer,
#form [data-role="page-footer"] .abuse-disclaimer a {
    color: {{label.normal.color}};
}

#form [data-role="control"].button-choices .choice-box__label {
    border: 1px solid {{input.normal.border.color}};
    border-radius: {{input.border.radius}};
    border-width: {{input.border.width}};
    background-color: {{input.normal.background.color}};
}

#form [data-role="control"].button-choices .choice-box:hover .choice-box__label {
    background-color: {{input.hover.background.color}};
    border-color: {{input.hover.border.color}};
}

#form [data-role="control"].button-choices .choice-box[data-is-checked="1"] .choice-box__label {
    background-color: {{input.focused.background.color}};
}

#form [data-type="signature"] .signature__placeholder-container {
    color: {{instructions.normal.color}};
}

#form [data-type="signature"] .signature__placeholder-mask {
    background-color: {{instructions.normal.color}};
}

#form label[data-role="label"],
#form div[data-role="label"],
#form dt[data-role="instructions"] {
    text-align: {{master.text.align}};
}

/* Setup root variables */
:root {
    --master-border-radius: {{master.border.radius}};
    --master-text-align: {{master.text.align}};

    --form-font-family: {{form.font.family}};
    --form-font-size: {{form.font.size}};
    --form-font-weight: {{form.font.weight}};
    --form-font-style: {{form.font.style}};
    --form-font-line-height: {{form.font.line.height}};

    --input-normal-color: {{input.normal.color}};
    --input-normal-border-color: {{input.normal.border.color}};
    --input-normal-background-color: {{input.normal.background.color}};
    --input-error-border-color: {{input.error.border.color}};
    --input-error-background-color: {{input.error.background.color}};
    --input-hover-border-color: {{input.hover.border.color}};
    --input-hover-background-color: {{input.hover.background.color}};
    --input-font-family: {{input.font.family}};
    --input-font-size: {{input.font.size}};
    --input-font-weight: {{input.font.weight}};
    --input-font-style: {{input.font.style}};
    --input-font-line-height: {{input.font.line.height}};

    --input-padding-vertical: {{input.padding.vertical}};
    --input-padding-horizontal: {{input.padding.horizontal}};

    --input-border-width: {{input.border.width}};
    --input-border-style: {{input.border.style}};
    --input-border-radius: {{input.border.radius}};

    --button-font-family: {{button.font.family}};
    --button-font-size: {{button.font.size}};
    --button-font-weight: {{button.font.weight}};
    --button-font-style: {{button.font.style}};
    --button-line-height: {{button.font.line.height}};
    --button-border-radius: {{button.border.radius}};
    --button-border-width: {{button.border.width}};
    --button-border-style: {{button.border.style}};

    --button-padding-horizontal: {{button.padding.horizontal}};
    --button-padding-vertical: {{button.padding.vertical}};

    --button-primary-normal-background-color: {{button.primary.normal.background.color}};
    --button-primary-normal-border-color: {{button.primary.normal.border.color}};
    --button-primary-normal-color: {{button.primary.normal.color}};
    --button-primary-hover-background-color: {{button.primary.hover.background.color}};
    --button-primary-hover-border-color: {{button.primary.hover.border.color}};
    --button-primary-hover-color: {{button.primary.hover.color}};
    --button-primary-disabled-background-color: {{button.primary.disabled.background.color}};
    --button-primary-disabled-border-color: {{button.primary.disabled.border.color}};
    --button-primary-disabled-color: {{button.primary.disabled.color}};

    --button-secondary-normal-background-color: {{button.secondary.normal.background.color}};
    --button-secondary-normal-border-color: {{button.secondary.normal.border.color}};
    --button-secondary-normal-color: {{button.secondary.normal.color}};
    --button-secondary-hover-background-color: {{button.secondary.hover.background.color}};
    --button-secondary-hover-border-color: {{button.secondary.hover.border.color}};
    --button-secondary-hover-color: {{button.secondary.hover.color}};
    --button-secondary-disabled-background-color: {{button.secondary.disabled.background.color}};
    --button-secondary-disabled-border-color: {{button.secondary.disabled.border.color}};
    --button-secondary-disabled-color: {{button.secondary.disabled.color}};

    --control-required-star-color: {{control.required.star.color}};

    --instructions-normal-color: {{instructions.normal.color}};
    --instructions-error-color: {{instructions.error.color}};
    --instructions-hover-color: {{instructions.hover.color}};
    --instructions-selected-color: {{instructions.selected.color}};
    --instructions-focused-color: {{instructions.focused.color}};
    --instructions-disabled-color: {{instructions.disabled.color}};
    --instructions-font-family: {{instructions.font.family}};
    --instructions-font-size: {{instructions.font.size}};
    --instructions-font-weight: {{instructions.font.weight}};
    --instructions-font-style: {{instructions.font.style}};
    --instructions-font-line-height: {{instructions.font.line.height}};
    --instructions-padding-top: {{instructions.padding.top}};
    --instructions-padding-bottom: {{instructions.padding.bottom}};
    --instructions-margin-top: {{instructions.margin.top}};
    --instructions-margin-bottom: {{instructions.margin.bottom}};

    --label-normal-color: {{label.normal.color}};
    --label-error-color: {{label.error.color}};
    --label-hover-color: {{label.hover.color}};
    --label-selected-color: {{label.selected.color}};
    --label-focused-color: {{label.focused.color}};
    --label-disabled-color: {{label.disabled.color}};
    --label-margin-top: {{label.margin.top}};
    --label-margin-bottom: {{label.margin.bottom}};
    --label-padding-top: {{label.padding.top}};
    --label-padding-bottom: {{label.padding.bottom}};

    --page-width: {{grid.pageWidth}}px;
    --page-border-width: {{page.border.width}};
    --page-padding-top: {{page.padding.top}};
    --page-padding-bottom: {{page.padding.bottom}};
    --page-padding-left: {{page.padding.left}};
    --page-padding-right: {{page.padding.right}};

    --page-background-color: {{page.background.color}};

    --button-primary-normal-background-color: {{button.primary.normal.background.color}};

    --grid-pageWidth: {{grid.pageWidth}};
    --grid-pageWidthWithoutPadding: {{grid.pageWidthWithoutPadding}};
    --grid-columnWidth: {{grid.columnWidth}};
    --grid-columnSpacing: {{grid.columnSpacing}};
    --grid-spaceReservedForColumnSpacing: {{grid.spaceReservedForColumnSpacing}};
    --grid-paddingLeft: {{grid.paddingLeft}};
    --grid-paddingRight: {{grid.paddingRight}};
    --grid-paddingTop: {{grid.paddingTop}};
    --grid-paddingBottom: {{grid.paddingBottom}};

    --container-padding-horizontal: {{container.padding.horizontal}};
    --container-padding-vertical: {{container.padding.vertical}};
}