/* configuration */

.ffc {
    --font-family: 'Roboto', sans-serif;
    --font-size: 13px;
    --line-height: 18px;
    --text-color: #000;

    --inset: 200px;
    --indent: 20px;
    --indent-right: 0;
    --indent-bottom: var(--indent-right);
    --label-margin-right: 4px;

    --input-padding: 3px;
    --input-border: 1px;
    --input-buffer: calc(var(--input-padding) + var(--input-border));
    --input-inline-spacing: 20px;

    --control-padding-vertical: 4px;
    --control-padding-horizontal: 8px;
    --control-padding-horizontal-checkbox: var(--control-padding-horizontal);
    --control-margin-top: 4px;

    --checkbox-height: 13px;
    --checkbox-margin-top: calc((var(--line-height) - 13px) / 2);
    --checkbox-indent: calc(var(--checkbox-height) + var(--control-padding-horizontal-checkbox) - 1px);

    --very-short: 50px;
    --short: 200px;
    --medium: 400px;
    --long: 727px;
    --very-long: 727px;

    --input-max-width: calc(var(--very-long) + 2 * var(--input-padding));

    --spacer-height: 24px;

    --tiles-min-width: auto;
    --tiles-max-width: var(--input-max-width);
    --tile-width: 80px;
    --tile-hover-background: #316AC5;
    --tile-hover-color: white;
    --tile-selected-background: color-mix(in srgb, var(--tile-hover-background) 80%, #fff);
    --tile-selected-color: white;
    --tile-disabled-selected-background: color-mix(in srgb, var(--tile-selected-background) 80%, #fff);
    --tile-disabled-selected-color: white;

    --responsive-width-noinset: 767px;
    --responsive-width-stacked: 480px;

    --indent-color-rgb: 0, 0, 0;
    --indent-opacity: 0.04;

    --text-color-normal: var(--text-color);
    --input-border-color-normal: #aab;
    --input-text-color-normal: var(--text-color-normal);
    --input-background-color-normal: #fff;
    --input-inset-shadow-color-normal: color-mix(in srgb, var(--input-background-color-normal) 20%, transparent);
    --input-hover-glow-color-normal: color-mix(in srgb, var(--input-border-color-normal) 60%, transparent);
    --input-focus-glow-color-normal: var(--input-border-color-normal);

    --text-color-required: var(--text-color-normal);
    --input-border-color-required: #ec8;
    --input-text-color-required: color-mix(in srgb, var(--input-border-color-required) 40%, #000);
    --input-background-color-required: color-mix(in srgb, var(--input-border-color-required) 5%, #fff);
    --input-inset-shadow-color-required: color-mix(in srgb, var(--input-border-color-required) 20%, transparent);
    --input-hover-glow-color-required: color-mix(in srgb, var(--input-border-color-required) 60%, transparent);
    --input-focus-glow-color-required: var(--input-border-color-required);

    --disabled-lighten-amount: 50%;
    --text-color-disabled: #aaa;
    --input-border-color-disabled: color-mix(in srgb, var(--input-border-color-normal) calc(100% - var(--disabled-lighten-amount)), transparent);
    --input-text-color-disabled: color-mix(in srgb, var(--input-text-color-normal) calc(100% - var(--disabled-lighten-amount)), #fff);
    --input-background-color-disabled: var(--input-background-color-normal);
    --input-inset-shadow-color-disabled: color-mix(in srgb, var(--input-border-color-disabled) 20%, transparent);
    --input-hover-glow-color-disabled: color-mix(in srgb, var(--input-border-color-disabled) 60%, transparent);
    --input-focus-glow-color-disabled: var(--input-border-color-disabled);

    --color-error: #a00;
    --text-color-error: color-mix(in srgb, var(--color-error) 80%, #000);
    --input-border-color-error: color-mix(in srgb, var(--color-error) 80%, #fff);
    --input-text-color-error: var(--text-color-error);
    --input-background-color-error: color-mix(in srgb, var(--color-error) 5%, #fff);
    --input-inset-shadow-color-error: color-mix(in srgb, var(--color-error) 20%, transparent);
    --input-hover-glow-color-error: color-mix(in srgb, var(--color-error) 60%, transparent);
    --input-focus-glow-color-error: var(--color-error);

    --border-radius: 0.3em;

    --help-font-size: calc(var(--font-size) - 1px);
    --help-line-height: calc(var(--line-height) - 1px);
    --help-text-color: var(--text-color);
    --help-opacity: 0.75;
    --help-span-padding-left: 8px;
    --help-inline-padding-left: 8px;
    --help-popup-font-size: 140%;
    --help-popup-font: var(--fa-font-regular);
    --help-popup-content: "\f059";
    --help-popup-font-hover: var(--fa-font-solid);
    --help-popup-content-hover: "\f059";

    --header-page-background-color: rgba(var(--indent-color-rgb), var(--indent-opacity));
    --header-page-background-color-ie8: #eee;
    --header-page-border-color: rgba(var(--indent-color-rgb), calc(var(--indent-opacity) * 2));
    --header-page-border-color-ie8: #ddd;

    --header-section-border-color: rgba(0,0,0,0.15);
    --header-section-border-color-ie8: #ddd;
    --header-section-border-padding: 32px;
    --header-section-margin-top: 24px;
    --header-section-margin-bottom: 6px;
    --header-section-font-weight: bold;
    --header-section-font-color: rgba(0,0,0,0.7);
    --header-section-font-color-ie8: #444;

    --footer-page-border-color: rgba(var(--indent-color-rgb), calc(var(--indent-opacity) * 2));
    --footer-page-border-color-ie8: #ddd;

    --tag-color: #eee;
    --tag-border-color: #aab;
    --tag-color-hover: var(--tag-color);
    --tag-border-color-hover: var(--tag-border-color);
    --tag-glow-color-hover: color-mix(in srgb, var(--tag-border-color) 60%, transparent);
    --tag-color-selected: #fff;
    --tag-border-color-selected: color-mix(in srgb, var(--tag-border-color) 90%, #000);
    --tag-glow-color-selected: transparent;
}



/* layout */

.ffc {
    font-family: var(--font-family);
    font-size: var(--font-size);
    line-height: var(--line-height);
    color: var(--text-color);
}

.pfc-label, LABEL, .pfcs, SPAN.pfc-help {
    display: inline-block;
    vertical-align: baseline;
}

.textarea :is(.pfc-label,LABEL,.pfcs,SPAN.pfc-help) {
        vertical-align: top;
    }

.pfc-label {
    margin-top: calc(var(--input-buffer) + var(--control-padding-vertical) + var(--control-margin-top));
    width: var(--inset);
    text-align: right;
    margin-right: var(--label-margin-right);
}
.pfc-label-top {
    margin-top: 0;
    padding-top: calc(var(--control-padding-vertical) + var(--control-margin-top));
    width: auto;
    min-width: var(--inset);
}

.form-vertical .pfc-label {
    text-align: left;
    display: block;
    width: 100%;
    margin-top: 0;
    padding-top: calc(var(--control-padding-vertical) + var(--control-margin-top));
}

.pfc-label-indented, .pfc-input-aligned {
    margin-left: calc(var(--inset) + var(--label-margin-right) + var(--control-padding-horizontal));
    text-align: left;
    width: 100%;
}
.pfcs .pfc-input-aligned {
    margin-left: calc(var(--inset) + var(--label-margin-right));
}

.form-noinset .pfc-label-indented, .form-noinset .pfc-input-aligned {
    margin-left: var(--control-padding-horizontal);
}

.pfcs {
    margin-top: var(--control-margin-top);
    padding: var(--control-padding-vertical) var(--control-padding-horizontal);
    margin-left: calc(var(--inset) + var(--label-margin-right));
}
.pfc-group .pfcs.pfcs-checkbox {
    flex: unset;
    padding: var(--control-padding-vertical) var(--control-padding-horizontal-checkbox);
}

.pfc-label + .pfcs {
    margin-left: 0px;
}

.pfc-label + .pfcs-block, .pfc-label-top + .pfcs, .form-vertical .pfcs {
    margin-left: calc(var(--inset) + var(--label-margin-right));
}

.pfc-label + .pfcs-block, .pfc-label-top + .pfcs, .form-vertical .pfc-label + .pfcs {
    margin-top: 0;
}

.form-noinset .pfcs, .pfcs-noindent {
    margin-left: 0;
    padding-left: 0;
}

.pfcs-block {
    padding-right: 0;
    flex-wrap: wrap;
}

.pfcs-block:not(:has(.pfc-forceInline)) LABEL {
    width: 100%;
}

.pfcs-block .pfc-forceInline LABEL {
    display: inline-block;
}

.form-noinset .pfcs-checkbox, .form-noinset .pfcs-radio {
    margin-right: 0;
    margin-left: calc(0px - var(--control-padding-horizontal));
    padding-left: var(--control-padding-horizontal);
}

.pfcs-checkbox LABEL, .pfcs-radio LABEL {
    text-indent: calc(0px - var(--checkbox-indent));
    margin-left: var(--checkbox-indent);
    padding: var(--input-buffer) 0 var(--input-buffer) 0;
}

.pfcs-checkbox > INPUT, .pfcs-radio > INPUT {
    margin-top: calc(var(--checkbox-margin-top) + var(--input-buffer) + 1px) !important;
    margin-bottom: calc(var(--line-height) - var(--checkbox-margin-top) - var(--checkbox-height) + var(--input-buffer) - 1px) !important
}

.pfc-indent {
    padding-left: var(--indent);
}

.form-noinset .pfc-indent {
    margin-left: calc(0px - var(--control-padding-horizontal));
    padding-left: var(--control-padding-horizontal);
}

.ffc > .pfc-indent {
    padding-right: var(--indent-right);
}

.pfc-spacer .pfc-group {
    padding-bottom: var(--indent-bottom);
}

.header {
    margin-top: calc(var(--control-margin-top) * 1.5);
    padding-bottom: var(--control-padding-vertical);
}

.header:empty {
        display: none;
    }

.footer {
    padding: var(--control-padding-vertical) 0;
}

.pfc-help, .pfc-help-inline {
    font-size: var(--help-font-size);
    color: var(--help-text-color);
    opacity: var(--help-opacity);
}

.pfc-help-inline {
    padding-left: var(--help-inline-padding-left);
    line-height: var(--help-line-height);
    color: var(--help-text-color);
}

.pfc-popup-help {
    padding-left: var(--help-inline-padding-left);
    cursor: pointer;
    font-size: var(--help-popup-font-size);
    height: min-content;
    color: var(--text-color); /* the color for the field may be overridden to make it stand out, the help button shouldn't be */
}

.pfc-popup-help::before {
        font: var(--help-popup-font);
        content: var(--help-popup-content);
    }

.pfc-popup-help:hover::before {
        font: var(--help-popup-font-hover);
        content: var(--help-popup-content-hover);
    }

.pfc-popup-help.ph-tile {
        position: absolute;
        margin-left: -1.1em;
        margin-top: 0.1em;
        padding-left: 0;
    }

.ph-blockout {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1em;
    cursor: pointer;
}

.ph-blockout .ph-popup {
        background: #fff;
        border-radius: 0.3em;
        pointer-events: all;
        cursor: auto;
        font-size: var(--font-size);
        width: min-content;
    }

.ph-small:is(.ph-blockout .ph-popup) {
            min-width: min(100%, max(25%, 20em));
        }

.ph-medium_small:is(.ph-blockout .ph-popup) {
            min-width: min(100%, max(37.5%, 30em));
        }

.ph-medium:is(.ph-blockout .ph-popup) {
            min-width: min(100%, max(50%, 40em));
        }

.ph-large:is(.ph-blockout .ph-popup) {
            min-width: min(100%, max(75%, 60em));
        }

:is(.ph-blockout .ph-popup) .ph-topbar {
            display: flex;
            align-items: flex-start;
            justify-content: flex-end;
            gap: 1em;
            margin: 1em 1em 0;
        }

:is(:is(.ph-blockout .ph-popup) .ph-topbar) .ph-heading {
                flex: 1;
                font-size: 1.2em;
                font-weight: 500;
                margin-bottom: 1em;
            }

:is(:is(.ph-blockout .ph-popup) .ph-topbar) .ph-close {
                line-height: 1;
                cursor: pointer;
            }

:is(:is(:is(.ph-blockout .ph-popup) .ph-topbar) .ph-close)::after {
                    font: var(--fa-font-solid);
                    content: "\f00d";
                }

:is(.ph-blockout .ph-popup) .ph-content {
            margin-top: -0.8em;
        }

:is(:is(.ph-blockout .ph-popup) .ph-content) P {
                margin: 0.8em 1em;
            }

:is(:is(.ph-blockout .ph-popup) .ph-content) IMG {
                margin: 1em;
                max-width: max-content;
                width: calc(100% - 2em); /* 100% - margins */
                height: unset;
            }

:is(:is(:is(.ph-blockout .ph-popup) .ph-content) IMG):not(.ph-float) {
                    display: block;
                    margin: 1em auto;
                }

.ph-float:is(:is(:is(.ph-blockout .ph-popup) .ph-content) IMG) {
                    margin-top: 0;
                }

.ph-float.ph-float-right:is(:is(:is(.ph-blockout .ph-popup) .ph-content) IMG) {
                        float: right;
                    }

.ph-float.ph-float-left:is(:is(:is(.ph-blockout .ph-popup) .ph-content) IMG) {
                        float: left;
                    }



.pfc-inline-label-content p:first-of-type {
    /*
    TinyMCE edited html is included here as labels and the top-level <p>s mess up formatting, so inline the first at least so it's inline with the control.
     This might be okay to apply generally? Right now we're adding this style manually. If there are follow-up p's their alignment will be off though.
     */
    display: inline;
}

SPAN.pfc-help {
    padding-top: calc(var(--control-padding-vertical) + var(--input-buffer));
    margin-top: var(--control-margin-top);
    margin-left: var(--help-span-padding-left);
}

.pfc-label-top ~ SPAN.pfc-help, .form-vertical .pfc-label ~ SPAN.pfc-help {
    margin-top: 0;
}

DIV.pfc-help, .pfcs-block ~ SPAN.pfc-help {
    display: block;
    margin-left: var(--indent);
    padding-left: calc(var(--inset) - var(--indent) + var(--label-margin-right) + var(--control-padding-horizontal));
    margin-right: var(--indent-right);
    line-height: calc(var(--line-height) - 1);
    padding-bottom: var(--control-padding-vertical);
    margin-top: 0;
    padding-top: 0;
    width: 100%;
}

.form-noinset DIV.pfc-help, .form-noinset .pfcs-block ~ SPAN.pfc-help {
    margin-left: 0;
    padding-left: var(--control-padding-horizontal);
    margin-right: 0;
    padding-right: var(--indent-right);
}

.pfc-group {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}

.pfc-group.proofing {
        align-items: center;
    }

.pfc-group.pfc-tile {
        align-items: normal;
    }

.pfc-group .pfcs {
    flex: 1;
    min-width: 0; /* necessary for SELECT fields which otherwise won't shrink below the width of the longest option */
    display: flex;
    align-items: baseline;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.pfcs-block:is(.pfc-group .pfcs) {
        flex-basis: 100%;
    }

.infoField:is(.pfc-group .pfcs),.proofingField:is(.pfc-group .pfcs) {
        display: inline-block;
    }

.pfcs-tile:is(.pfc-group .pfcs) {
        align-items: normal;
    }

.pfc-indent .pfc-group:first-child {
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.pfc-indent .pfc-group:last-child, .pfc-indent:last-child {
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.pfc-group.selected > DIV.pfc-help {
    margin-left: calc(var(--indent) + var(--border-radius));
    margin-right: calc(var(--indent-right) + var(--border-radius));
    padding-left: calc(var(--inset) - var(--indent) + var(--control-padding-horizontal) - var(--border-radius));
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.pfc-indent .pfc-indent, .pfc-indent .pfc-group, .pfc-group.selected .pfcs, .pfc-group.selected DIV.pfc-help, .form-noinset .pfc-indent {
    background-color: rgba(var(--indent-color-rgb), var(--indent-opacity));
}

.form-noinset .pfc-group {
    background-color: transparent;
}

.ffc TEXTAREA,.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password] {
        box-sizing: border-box;
        height: calc(var(--line-height) + 2 * (var(--input-border) + var(--input-padding)));
        margin: 0;
        padding: var(--input-padding);
        border-radius: var(--border-radius);
        max-width: var(--input-max-width);
    }

.ffc TEXTAREA,.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password],.ffc .tiles,.ffc .tile {
        color: var(--input-text-color-normal);
        background-color: var(--input-background-color-normal);
        border: var(--input-border) solid var(--input-border-color-normal);
        box-shadow: inset 0 1px 1px var(--input-inset-shadow-color-normal), 0 0 8px transparent;
        transition: box-shadow 0.2s linear;
    }

:is(.ffc TEXTAREA,.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password],.ffc .tiles,.ffc .tile):hover {
            box-shadow: inset 0 1px 1px var(--input-inset-shadow-color-normal), 0 0 8px var(--input-hover-glow-color-normal);
        }

:is(.ffc TEXTAREA,.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password],.ffc .tiles,.ffc .tile):focus {
            outline: none;
            box-shadow: inset 0 1px 1px var(--input-inset-shadow-color-normal), 0 0 8px var(--input-focus-glow-color-normal);
        }

.ffc .pfc-group.disabled,.ffc .pfc-group.immutable .pfcs-checkbox {
        color: var(--text-color-disabled);
    }

.pfc-group.disabled :is(.ffc TEXTAREA,.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password],.ffc .tiles,.ffc .tile),.pfc-group .disabled:is(.ffc TEXTAREA,.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password],.ffc .tiles,.ffc .tile) {
            color: var(--input-text-color-disabled) !important;
            border-color: var(--input-border-color-disabled) !important;
            box-shadow: inset 0 1px 1px var(--input-inset-shadow-color-disabled), 0 0 8px transparent !important;
            transition: box-shadow 0.2s linear;
        }

:is(.pfc-group.disabled :is(.ffc TEXTAREA,.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password],.ffc .tiles,.ffc .tile),.pfc-group .disabled:is(.ffc TEXTAREA,.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password],.ffc .tiles,.ffc .tile)):not(.tile) {
                background-color: var(--input-background-color-disabled) !important;
            }

:is(.pfc-group.disabled :is(.ffc TEXTAREA,.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password],.ffc .tiles,.ffc .tile),.pfc-group .disabled:is(.ffc TEXTAREA,.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password],.ffc .tiles,.ffc .tile)):hover {
                box-shadow: inset 0 1px 1px var(--input-inset-shadow-color-disabled), 0 0 8px var(--input-hover-glow-color-disabled) !important;
            }

:is(.pfc-group.disabled :is(.ffc TEXTAREA,.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password],.ffc .tiles,.ffc .tile),.pfc-group .disabled:is(.ffc TEXTAREA,.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password],.ffc .tiles,.ffc .tile)):focus {
                box-shadow: inset 0 1px 1px var(--input-inset-shadow-color-disabled), 0 0 8px var(--input-focus-glow-color-disabled) !important;
            }

.pfc-group.immutable :is(.ffc TEXTAREA,.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password],.ffc .tiles,.ffc .tile),.pfc-group .immutable:is(.ffc TEXTAREA,.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password],.ffc .tiles,.ffc .tile) {
            color: var(--input-text-color-normal) !important;
            background-color: var(--input-background-color-normal) !important;
            border-color: var(--input-border-color-disabled) !important;
            cursor: not-allowed;
            box-shadow: inset 0 1px 1px transparent, 0 0 8px transparent !important;
            transition: box-shadow 0.2s linear;
        }

:is(.pfc-group.immutable :is(.ffc TEXTAREA,.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password],.ffc .tiles,.ffc .tile),.pfc-group .immutable:is(.ffc TEXTAREA,.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password],.ffc .tiles,.ffc .tile)):hover {
                box-shadow: inset 0 1px 1px transparent, 0 0 8px transparent !important;
            }

:is(.pfc-group.immutable :is(.ffc TEXTAREA,.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password],.ffc .tiles,.ffc .tile),.pfc-group .immutable:is(.ffc TEXTAREA,.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password],.ffc .tiles,.ffc .tile)):focus {
                box-shadow: inset 0 1px 1px transparent, 0 0 8px transparent !important;
            }

:is(.ffc .pfc-group.immutable.lookup) .header,:is(.ffc .pfc-group.immutable.lookup) INPUT[type=text],:is(.ffc .pfc-group.immutable.lookup) BR {
            display: none;
        }

.pfc-group.disabled :is(.ffc INPUT[type=checkbox]),:is(.ffc INPUT[type=checkbox]):disabled,.pfc-group.immutable :is(.ffc INPUT[type=checkbox]) {
            opacity: 0.3;
        }

.ffc .tile.disabled {
        color: var(--input-text-color-disabled) !important;
        background-color: var(--input-background-color-disabled);
    }

:is(.ffc .pfc-group.required.mutable) TEXTAREA,:is(.ffc .pfc-group.required.mutable) SELECT,:is(.ffc .pfc-group.required.mutable) INPUT[type=text],:is(.ffc .pfc-group.required.mutable) INPUT[type=password],:is(.ffc .pfc-group.required.mutable) .pfcs-tiles:not(.tiles-full-width) :is(.tiles,.tile) {
            color: var(--input-text-color-required);
            background-color: var(--input-background-color-required);
            border: var(--input-border) solid var(--input-border-color-required);
            box-shadow: inset 0 1px 1px var(--input-inset-shadow-color-required), 0 0 8px transparent;
            transition: box-shadow 0.2s linear;
        }

:is(:is(.ffc .pfc-group.required.mutable) TEXTAREA,:is(.ffc .pfc-group.required.mutable) SELECT,:is(.ffc .pfc-group.required.mutable) INPUT[type=text],:is(.ffc .pfc-group.required.mutable) INPUT[type=password],:is(.ffc .pfc-group.required.mutable) .pfcs-tiles:not(.tiles-full-width) :is(.tiles,.tile)):hover {
                box-shadow: inset 0 1px 1px var(--input-inset-shadow-color-required), 0 0 8px var(--input-hover-glow-color-required);
            }

:is(:is(.ffc .pfc-group.required.mutable) TEXTAREA,:is(.ffc .pfc-group.required.mutable) SELECT,:is(.ffc .pfc-group.required.mutable) INPUT[type=text],:is(.ffc .pfc-group.required.mutable) INPUT[type=password],:is(.ffc .pfc-group.required.mutable) .pfcs-tiles:not(.tiles-full-width) :is(.tiles,.tile)):focus {
                box-shadow: inset 0 1px 1px var(--input-inset-shadow-color-required), 0 0 8px var(--input-focus-glow-color-required);
            }

/* error doubled up to make it more specific than .pfc-group.required.mutable */

:is(.ffc .pfc-group.error.error) TEXTAREA,:is(.ffc .pfc-group.error.error) SELECT,:is(.ffc .pfc-group.error.error) INPUT[type=text],:is(.ffc .pfc-group.error.error) INPUT[type=password],:is(.ffc .pfc-group.error.error) .tiles,:is(.ffc .pfc-group.error.error) .tile {
            color: var(--input-text-color-error);
            background-color: var(--input-background-color-error);
            border: var(--input-border) solid var(--input-border-color-error);
            box-shadow: inset 0 1px 1px var(--input-inset-shadow-color-error), 0 0 8px transparent;
            transition: box-shadow 0.2s linear;
        }

:is(:is(.ffc .pfc-group.error.error) TEXTAREA,:is(.ffc .pfc-group.error.error) SELECT,:is(.ffc .pfc-group.error.error) INPUT[type=text],:is(.ffc .pfc-group.error.error) INPUT[type=password],:is(.ffc .pfc-group.error.error) .tiles,:is(.ffc .pfc-group.error.error) .tile):hover {
                box-shadow: inset 0 1px 1px var(--input-inset-shadow-color-error), 0 0 8px var(--input-hover-glow-color-error);
            }

:is(:is(.ffc .pfc-group.error.error) TEXTAREA,:is(.ffc .pfc-group.error.error) SELECT,:is(.ffc .pfc-group.error.error) INPUT[type=text],:is(.ffc .pfc-group.error.error) INPUT[type=password],:is(.ffc .pfc-group.error.error) .tiles,:is(.ffc .pfc-group.error.error) .tile):focus {
                box-shadow: inset 0 1px 1px var(--input-inset-shadow-color-error), 0 0 8px var(--input-focus-glow-color-error);
            }

:is(.ffc .pfc-group.error.error) .errorText,:is(.ffc .pfc-group.error.error) .errorText-persistent {
            width: 100%;
            font-weight: bold;
        }

.ffc .pfc-group.error.error {

        color: var(--text-color-error);
    }

.ffc TEXTAREA {
        height: calc(var(--line-height) * 3 + 2 * (var(--input-border) + var(--input-padding)));
    }

.ffc TEXTAREA.high {
        height: calc(var(--line-height) * 6 + 2 * (var(--input-border) + var(--input-padding)));
    }

.ffc TEXTAREA.very-high {
        height: calc(var(--line-height) * 10 + 2 * (var(--input-border) + var(--input-padding)));
    }

.ffc INPUT[type=checkbox],.ffc INPUT[type=radio] {
        vertical-align: top;
        height: var(--checkbox-height);
        width: var(--checkbox-height);
        margin: 0;
        margin-top: var(--checkbox-margin-top);
        margin-right: calc(var(--control-padding-horizontal-checkbox) - 1px);
        padding: 0;
    }

.ffc OPTION.disabled {
        color: #aaa;
    }

.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password],.ffc TEXTAREA,.ffc .pfcs-duo {
        flex: 1;
        min-width: var(--very-short); /* necessary for SELECT fields which otherwise won't shrink below the width of the longest option */
    }

.very-short:is(.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password],.ffc TEXTAREA,.ffc .pfcs-duo) {
            max-width: var(--very-short);
        }

.short:is(.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password],.ffc TEXTAREA,.ffc .pfcs-duo) {
            max-width: var(--short);
        }

:is(.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password],.ffc TEXTAREA,.ffc .pfcs-duo),.medium:is(.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password],.ffc TEXTAREA,.ffc .pfcs-duo) {
            max-width: var(--medium);
        }

.long:is(.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password],.ffc TEXTAREA,.ffc .pfcs-duo) {
            max-width: var(--long);
        }

.very-long:is(.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password],.ffc TEXTAREA,.ffc .pfcs-duo) {
            max-width: var(--very-long);
        }

.width-auto:is(.ffc SELECT,.ffc INPUT[type=text],.ffc INPUT[type=password],.ffc TEXTAREA,.ffc .pfcs-duo) {
        }

:is(.ffc .multi-field) TEXTAREA,:is(.ffc .multi-field) INPUT[type=text],:is(.ffc .multi-field) INPUT[type=password],:is(.ffc .multi-field) SELECT {
            width: auto;
        }

.ffc .dropzone.horizontal,.ffc .thumbBrowser {
        width: 100%;
    }

:is(.ffc .pfcs-duo) INPUT,:is(.ffc .pfcs-duo) SELECT {
            width: 100%;
        }

/* Tile Select */

.pfc-group .pfcs .tiles .tile {
    text-align: center;
    padding: 2px;
    border-width: 0 0 0 1px;
    width: var(--tile-width);
    white-space: normal;
    cursor: pointer;

    display: inline-block;
    zoom: 1;
    vertical-align: top;
}
.pfc-group .pfcs .tiles.multiLineTiles .tile {
    border-width: 0 1px 1px 0;
}

.ffc .pfc-group .pfcs.tiles-full-width .tiles {
    border: none;
    background: none;
    display: flex;
    width: 100%;
    max-width: unset;
    overflow: unset;
    box-shadow: none;
}

:is(.ffc .pfc-group .pfcs.tiles-full-width .tiles) .tile {
        border: none;
        background: none;
        flex: 1;
        width: unset;
        height: unset;
        min-width: 80px;
        max-width: 180px;
        box-shadow: none;
    }

:is(:is(.ffc .pfc-group .pfcs.tiles-full-width .tiles) .tile) IMG {
            border-radius: 5px;
            width: 80%;
            height: unset;
        }

:is(:is(.ffc .pfc-group .pfcs.tiles-full-width .tiles) .tile):hover {
            box-shadow: none;
        }

:is(:is(.ffc .pfc-group .pfcs.tiles-full-width .tiles) .tile):hover IMG {
                outline: 3px solid #888;
            }

.selected:is(:is(.ffc .pfc-group .pfcs.tiles-full-width .tiles) .tile) {
            color: unset;
        }

.selected:is(:is(.ffc .pfc-group .pfcs.tiles-full-width .tiles) .tile) IMG {
                outline: 3px solid black;
            }

:is(.ffc .pfc-group .pfcs.tiles-full-width .tiles):hover {
        box-shadow: none;
    }

.pfc-group .pfcs .tiles:not(.multiLineTiles) .tile:first-child {
    border-left: none;
}

.pfcs:not(.tiles-full-width) .tiles .tile:hover {
    background: var(--tile-hover-background);
    color: var(--tile-hover-color);
    box-shadow: none;
}

.disabled :is(.pfcs:not(.tiles-full-width) .tiles .tile:hover),.disabled:is(.pfcs:not(.tiles-full-width) .tiles .tile:hover) {
        background: var(--input-background-color-disabled);
        color: var(--input-text-color-disabled);
    }

.ffc .pfcs .tiles .tile.selected {
    background: var(--tile-selected-background);
    color: var(--tile-selected-color);
}

.disabled :is(.ffc .pfcs .tiles .tile.selected),.disabled:is(.ffc .pfcs .tiles .tile.selected) {
        background: var(--tile-disabled-selected-background);
        color: var(--tile-disabled-selected-color);
    }

.pfc-group.disabled .tile IMG, .tile.disabled IMG {
    opacity: 0.4;
}

.tileLabel {
    display: block;
    font-size: var(--font-size);
}

.tileSpan {
    white-space: nowrap;
}

.tiles {
    max-width: var(--tiles-max-width);
    min-width: var(--tiles-min-width);
    white-space: nowrap;
    overflow: auto;

    border-radius: var(--border-radius);

    display: inline-flex;
    zoom: 1;
    *display: inline;
    vertical-align: top;
    box-sizing: border-box;
}
.tiles.multiLineTiles {
    white-space: normal;
}

.pfc-group.spacer {
    height: var(--spacer-height);
}

IMG.ui-datepicker-trigger {
    margin-left: 8px;
    vertical-align: -2px;
    cursor: pointer;
}

.immutable IMG.ui-datepicker-trigger {
    display: none;
}

/* page header/footer */

.pageHeader, .pageFooter, .preview_description, .fullWidthNotice {
    margin: 1em 0 0.75em 0;
    display: block;
}

.pageHeader {
    font-size: large;
    font-weight: 500;
}

body.popup .pageHeader {
    margin: 5px;
}

.pageItem {
    background-image: url(/images/vcf-d2hic1/ui/bullet-link.gif);
    background-position: center left;
    background-repeat: no-repeat;
    padding: 10px;
    padding-left: 20px;
}

.sectionHeader {
    border-bottom: 1px solid var(--header-section-border-color);
    padding: 6px var(--header-section-border-padding) 2px var(--header-section-border-padding);
    margin: var(--header-section-margin-top) 0 var(--header-section-margin-bottom) calc(var(--inset) - var(--header-section-border-padding) + var(--label-margin-right) + var(--control-padding-horizontal));
    font-weight: var(--header-section-font-weight);
    color: var(--header-section-font-color);
}


/* important text */

.important {
    color: #C02A2A;
    font-weight: bold;
}

.strong {
    font-weight: bold;
}

/* new file inputs */

DIV.file_fileContainer {
    position: relative;
    overflow: hidden;
    display: inline-block;
    text-align: left !important;
    vertical-align: middle;
}

DIV.file_fileContainer .file_fakeButton {
    z-index: 1;
    width: 100px;
    padding: 1px 6px;
}

DIV.file_fileContainer .file_filename {
}

DIV.file_fileContainer .file_file {
    position: absolute;
    width: auto;
    font-size: 20px;
    right: 100%;
    margin-right: -100px;
    margin-top: -4px;
    z-index: 2;
    opacity: 0;
}

/* table layouts */

TABLE.formLayout {
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    border: 0;
}

TABLE.formLayout TD {
    padding: 3px 0;
}

TABLE.formLayout TD.label {
    text-align: right;
    padding-right: 3px;
}

TABLE.formLayout TD.content {
}

TABLE.formLayout TD.right {
    padding-left: 10px;
}

/* document sources input */

.documentSource .dropzone + .documentSourceAddButtons {
    margin-top: 10px;
}

.documentSourceAddButtons BUTTON {
    padding: 0.1em 1.5em;
}

TABLE.documentSources, TABLE.poli {
    width: 100%;
    border-radius: var(--border-radius);
}

:is(TABLE.documentSources,TABLE.poli) THEAD TR {
        background: #E4E4E4;
        border-left: 1px solid #D4D4D4;
        border-right: 1px solid #D4D4D4;
    }

:is(TABLE.documentSources,TABLE.poli) TBODY TR {
        border-left: 1px solid #DDDDDD;
        border-right: 1px solid #DDDDDD;
    }

:is(TABLE.documentSources,TABLE.poli) TBODY TR:last-child {
        border-bottom: 1px solid #DDDDDD;
    }

:is(TABLE.documentSources,TABLE.poli) TBODY TD {
        background: none;
    }

TABLE.documentSources TR:nth-child(odd), TABLE.poli TBODY TR:nth-child(4n+3), TABLE.poli TBODY TR:nth-child(4n+4) {
    background: #f8f8f8;
    border-left: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
}
TABLE.documentSources TR:nth-child(odd), TABLE.poli TBODY TR:nth-child(4n+3) {
    border-top: 1px solid #DDDDDD;
}

TABLE.documentSources TR:nth-child(even), TABLE.poli THEAD TR, TABLE.poli TBODY TR:nth-child(4n+1) {
    border-top: 1px solid #D4D4D4 !important;
}
TABLE.documentSources TR:nth-child(even), TABLE.poli THEAD TR, TABLE.poli TBODY TR:nth-child(4n+2) {
    border-bottom: 1px solid #D4D4D4 !important;
}

TABLE.documentSources TR.invalid:nth-child(odd), TABLE.poli TR.invalid:nth-child(4n+3), TABLE.poli TR.invalid:nth-child(4n+4) {
    background: #FFEEEE;
}

TABLE.documentSources TR.invalid:nth-child(even), TABLE.poli TR.invalid:nth-child(4n+1), TABLE.poli TR.invalid:nth-child(4n+2) {
    background: #FFE4E4;
}

TABLE.documentSources TD.label, TABLE.poli TD.label {
    padding-right: 8px;
}

TABLE.documentSources TD.right, TABLE.poli TD.right {
    min-width: 68px;
    max-width: 92px;
    white-space: nowrap;
    text-align: right;
}

TABLE.documentSources.singleSource TD.right {
    width: 130px;
    min-width: 130px;
    max-width: 154px;
}

TABLE.documentSources TD.right IMG, TABLE.documentSources TD.right DIV.file_fileContainer, TABLE.poli TD.right IMG {
    margin-right: 8px;
    vertical-align: middle;
}

TABLE.documentSources TD.changeFile {
    width: 108px;
}

TABLE.documentSources SPAN.documentSources_pageCount {
    display: none;
}

TABLE.documentSources TR.manualPageCountRequired SPAN.documentSources_pageCount {
    display: inline;
}

TABLE.documentSources TR.first IMG.img_up, TABLE.documentSources TR.last IMG.img_down, TABLE.poli TR.first IMG.img_up, TABLE.poli TR.last IMG.img_down {
    opacity: 0.15;
}

TABLE.documentSources IMG.img_progress {
    display: none;
}

TABLE.documentSources TR.uploading IMG.img_progress {
    display: inline;
}

.singleSource .ifNotSingleSource, .ifSingleSource {
    display: none;
}

.singleSource SPAN.ifSingleSource {
    display: inline;
}

.singleSource.sourcePresent .documentSourceAddButtons {
    display: none;
}

TABLE.documentSources SPAN.documentSources_thumbnail {
    float: left;
    border: 1px solid #BBBBBB;
    margin-right: 5px;
}

:is(TABLE.documentSources SPAN.documentSources_thumbnail) IMG {
        display: block;
    }
TABLE.documentSources SPAN.documentSources_thumbnail IMG {
    display: block;
}
TABLE.documentSources .hardcopyAdvice
{
    font-style: italic;
    padding: 15px 10px;
}
TABLE.documentSources DIV.ds_viewFile * {
    margin-left: 20px;
    font-size: 90%;
}

/* Proofing Control */

.proofing .pfc-label IMG {
    margin-right: 18px;
}

.proofing .pfcs div {
    margin-bottom: 8px;
}

/* checkbox multi select control */

.pfcs-radio .pfcg {
    padding-top: 3px;
    cursor: pointer;
}

:is(.pfcs-radio .pfcg) .pfcgt::after {
        content: "(hide)";
        font-size: 85%;
        margin-left: 10px;
        color: var(--text-color-disabled);
        position: relative;
        top: -1px;
    }

.pfcgcollapse:is(.pfcs-radio .pfcg) .pfcgt::after {
        content: "(show)";
    }

:is(.pfcs-radio .pfcg) .pfcgc {
        padding-left: 10px;
    }

.pfcgcollapse:is(.pfcs-radio .pfcg) .pfcgc LABEL {
        display: none;
    }

.checked:is(.pfcgcollapse:is(.pfcs-radio .pfcg) .pfcgc LABEL) {
            display: block;
        }

.pfcs-radio LABEL.checked {
    font-weight: bold;
}


/* poli */

:is(.poli TABLE.poli) TD,:is(.poli TABLE.poli) TH {
            padding: 3px;
        }

:is(.poli TABLE.poli) TD {
            text-align: right;
        }

.poli_td_label:is(:is(.poli TABLE.poli) TD),.poli_td_qty:is(:is(.poli TABLE.poli) TD),.poli_td_offering:is(:is(.poli TABLE.poli) TD) {
                text-align: left;
            }

.poli TABLE.poli TD.poli_descriptionCell {
        padding-top: 0;
    }

.poli .poli_label {
        font-weight: bold;
        padding-right: 5px;
    }

.poli INPUT.poli_qty {
        width: 4em;
        text-align: right;
    }

.poli SELECT.poli_offering {
        padding: 3px;
    }

.poli INPUT.poli_unitCost,.poli INPUT.poli_unitRrp {
        width: 5em;
        text-align: right;
    }

.poli INPUT.poli_costPrice,.poli INPUT.poli_totalPrice,.poli .poli_grandTotal {
        width: 6em;
        text-align: right;
    }

.poli .poli_unitCost,.poli .poli_unitRrp,.poli .poli_costPrice {
        background-color: white;
        padding: 2px;
        display: inline-block;
        border: 1px solid var(--input-border-color-disabled);
        border-radius: var(--border-radius);
    }

.poli INPUT.poli_margin,.poli INPUT.poli_markup {
        width: 3.5em;
        text-align: right;
    }

.poli .poli_total {
        padding: 3px 4px;
        font-weight: bold;
        text-align: right;
    }

.poli .poli_totalCell {
        text-align: right;
        font-weight: bold;
    }

.poli TEXTAREA.poli_description {
        width: 100%;
        max-width: none !important;
        height: 5em;
    }

.poli INPUT {
        max-width: none !important;
    }

.poli DIV.poli_description {
        font-weight: bold;
        cursor: pointer;
        display: none;
    }

.poli DIV.poli_description.visible::after {
        content: "(hide)";
        font-weight: normal;
        opacity: 0.7;
        font-size: 85%;
        padding-left: 10px;
    }

.poli DIV.poli_description::after {
        content: "(show)";
        font-weight: normal;
        opacity: 0.7;
        font-size: 85%;
        padding-left: 10px;
    }

/* file view */

.pfc-fileView IFRAME {
    width: 100%;
    height: calc(100px + var(--help-font-size) + 2 * 5px + 2 * 2px + 4px); /* there's an extra 4 mystery pixels */
    border: 1px solid var(--input-border-color-normal);
    border-radius: var(--border-radius);
}

/* tags */

.pfcs:has(> .pfc-tag) {
    display: flex;
    flex-wrap: wrap;
    gap: var(--label-margin-right);
}

.pfc-tag {
    padding: var(--input-padding);
    border-radius: var(--border-radius);
    background-color: var(--tag-color);
    border: 1px solid var(--tag-border-color);
    box-shadow: inset 0 1px 1px transparent, 0 0 8px transparent;
    transition: box-shadow 0.2s linear;
    cursor: pointer;
}

.pfc-tag.selected {
        box-shadow: inset 0 1px 1px transparent, 0 0 8px var(--tag-glow-color-selected);
        border-color: var(--tag-border-color-selected);
        background: var(--tag-color-selected);
    }

.pfc-tag.selected::after {
        content: "x";
        margin-left: 6px;
        opacity: 0.7;
        font-weight: bold;
    }

.pfc-tag:hover {
        box-shadow: inset 0 1px 1px transparent, 0 0 8px var(--tag-glow-color-hover);
    }

/* collections */

.pfc-collectionItem {
    display: block;
    cursor: pointer;
    padding: calc(var(--input-padding) + 1px);
    border-radius: var(--border-radius);
}

.pfc-collectionItem.addable::before {
        content: "+";
        margin-right: 6px;
        font-weight: bold;
        opacity: 0.7;
    }

.pfc-collectionItem.removable::before {
        content: "-";
        margin-right: 6px;
        font-weight: bold;
        opacity: 0.7;
    }

.pfc-collectionItem:hover {
        background-color: var(--tag-color);
    }

/* information */

.pfc-group.emptyInfo {
    display: none !important;
}

.pfcs.infoField P:first-of-type {
    margin-top: 0;
}


/* form blocks */

DIV:has(> .form-block) {
    display: flex;
}

.form-block.left {
        flex: 1;
        max-width: 100%;
    }

.form-block.right {
        width: 328px;
        margin: 8.1px 8px 8px 5px;
    }

BODY.wide .form-block.right {
            width: 651px;
        }

/* ACE Editor for CSS */

.ace-editor-popup {
    display:none;
    position:absolute;
    z-index: 101;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
}
.ace-editor-header {
    position: absolute;
    bottom:90%;
    left:10%;
    width:80%;
    background-color: #555;
    line-height: 40px;
    text-align: left;
    vertical-align: middle;
    color:white;
    font-weight: bold;
}
.ace-editor-header span {
    padding-left:20px;
}
.ace-editor-actions {
    position: absolute;
    top:90%;
    left:10%;
    width:80%;
    background-color: white;
    line-height: 40px;
    text-align: right;
    vertical-align: middle;
    border-top: 1px solid #eee;
}
.ace-editor-actions BUTTON {
    margin-right:10px;
    line-height:15px;
}
.ace-editor {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
}

/* Password field */

.password-group .activePasswordFields {
        display: none;
    }

/* will be on same element as .activePasswordFields, indicating that it should be active by default, so order is important */

.password-group .initialPasswordFields {
        display: block;
    }

.password-group .passwordSubLabel {
        /* top margin also gets things in line with the primary label */
        margin: 4px 0 2px 3px;
        color: #444;
        display: inline-block;
    }

.password-group .retainCurrentPassword {
        display: block;
        padding: 5px;
    }

/* Tiny MCE fixups */

.ffc .mce-ico {
    font-family: "tinymce";
}

.pfc-group.tinymce {
    display: flex;
}
.pfc-group.tinymce .pfcs {
    flex: 1;
}
/*# sourceMappingURL=/Volumes/Scratch/build/neon/releaseCustomTables/production/neon/WEB-INF/classes/com/pirionsystems/ne/sites/root/skin/staticContent/style/skin/html5/form.css.map */