@import url('https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Condensed&display=swap');

.ui-form, .ui-modal {
    --font-family: 'Roboto', sans-serif;
    --font-size: 12pt;

    --row-spacing: 20px;
    --cell-spacing: 10px;
    --vertical-cell-spacing: 5px;
    --form-text-row-spacing: 5px;
    --line-height: 1.2;

    --input-border-radius: 3px;
    --input-border-colour: #d8d8d8;
    --input-border-colour-required: #ec8;
    --input-border-colour-validation-error: #ff1111;
    --input-attachment-background-colour: #eee;
    --input-font-size: 1em;
    --input-line-height: var(--line-height);
    --input-font-family: 'Roboto', sans-serif;
    --input-font-color: #222;
    --input-padding-horizontal: 0.8em;
    --input-padding-vertical: 0.5em;
    --input-hover-brightness: 1.03;
    --input-active-brightness: 1.1;
    --input-background-colour-validation-error: #fff8f8;
    --input-colour-validation-error: #a00;
    --input-disabled-opacity: 0.3;

    --input-checkbox-colour: #aaa;
    --input-checkbox-colour-required: var(--input-border-colour-required);
    --input-checkbox-colour-validation-error: var(--error-message-colour);

    --label-font-color: #222;
    --label-font-weight: 700;
    --label-horizontal-cell-width: 100px;
    --label-horizontal-font-size: var(--input-font-size);
    --label-vertical-font-size: 0.9em;

    --message-font-size: 0.9em;
    --message-font-color: #222;
    --message-internal-margin: 1em;

    --input-button-font-size: 0.8em;
    --input-button-padding-horizontal: 1.3em;
    --input-button-padding-vertical: 0.6em;
    --input-button-background: #eee;
    --input-button-background-focus: #e8e8e8;
    --input-button-background-active: #fafafa;
    --input-button-default-background: #ddd;

    --input-fileUpload-placeholder-font-size: 0.8em;
    --input-fileUpload-placeholder-font-color: #888;

    --error-message-colour: #a00;
    --error-message-border-colour: #fff0f0;
    --error-message-background-colour: #fff8f8;

    --gallery-margin: 10px;

    font-size: var(--font-size);
    font-family: var(--font-family);
    line-height: var(--line-height);

    box-sizing: border-box;
    margin: 0;
}

.ui-form {
    margin: 0 auto;
}

.ui-form * {
    box-sizing: inherit;
}

INPUT.ui-input, TEXTAREA.ui-input, .ui-input-attached-right, .ui-input-attached-left, .ui-input-separator, .ui-button, .ui-input-select, .ui-input-fileUpload {
    padding: var(--input-padding-vertical) var(--input-padding-horizontal);
    min-width: 0;
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
    font-family: var(--input-font-family);
    text-decoration: none;
    color: var(--input-font-color);
}

INPUT.ui-input, TEXTAREA.ui-input, .ui-input-attached-right, .ui-input-attached-left, .ui-input-select, .ui-input-multiFileUpload {
    border: 1px solid var(--input-border-colour);
    border-radius: var(--input-border-radius);
}

INPUT[disabled] {
    opacity: var(--input-disabled-opacity);
}

INPUT[type=radio], INPUT[type=checkbox] {
    appearance: none;
    border: 0.15em solid var(--input-checkbox-colour);
    border-radius: 50%;
    width: 0.85em;
    height: 0.85em;
    background: none;
    cursor: pointer;
}
INPUT[type=checkbox] {
    border-radius: var(--input-border-radius);
}
INPUT[type=radio]:checked, INPUT[type=checkbox]:checked {
    background: var(--input-checkbox-colour);
    box-shadow: inset 0 0 0 0.1em white;
}

.ui-required INPUT.ui-input, .ui-required TEXTAREA.ui-input, .ui-required .ui-input-attached-right, .ui-required .ui-input-attached-left, .ui-required .ui-input-select, .ui-required .ui-input-multiFileUpload {
    border-color: var(--input-border-colour-required);
}
.ui-required INPUT[type=radio], .ui-required INPUT[type=checkbox] {
    border-color: var(--input-checkbox-colour-required);
}
.ui-required INPUT[type=radio]:checked, .ui-required INPUT[type=checkbox]:checked {
    background: var(--input-checkbox-colour-required);
}

.ui-validation-error INPUT.ui-input, .ui-validation-error TEXTAREA.ui-input, .ui-validation-error .ui-input-attached-right, .ui-validation-error .ui-input-attached-left, .ui-validation-error .ui-input-select, .ui-validation-error .ui-input-multiFileUpload {
    border-color: var(--input-border-colour-validation-error);
    background-color: var(--input-background-colour-validation-error);
    color: var(--input-colour-validation-error);
}
.ui-validation-error INPUT[type=radio], .ui-validation-error INPUT[type=checkbox] {
    border-color: var(--input-checkbox-colour-validation-error);
}
.ui-validation-error INPUT[type=radio]:checked, .ui-validation-error INPUT[type=checkbox]:checked {
    background: var(--input-checkbox-colour-validation-error);
}

.ui-error-messages {
    border: 1px solid var(--error-message-border-colour);
    background-color: var(--error-message-background-colour);
    color: var(--error-message-colour);
    border-top: none;
    border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
    padding: var(--input-padding-vertical) var(--input-padding-horizontal);
    display: none;
}
.ui-validation-error .ui-error-messages {
    display: revert;
}


.ui-button {
    min-width: 90px;
    background: var(--input-button-background);
    font-size: var(--input-button-font-size);
    padding: var(--input-button-padding-vertical) var(--input-button-padding-horizontal);
    cursor: pointer;
    display: inline-block;
    text-align: center;
    user-select: none;
    -webkit-user-drag: none;
    border: none;
    border-radius: var(--input-border-radius);
}
.ui-button.ui-button-default {
    background: var(--input-button-default-background);
}
.ui-button:hover {
    filter: brightness(var(--input-hover-brightness));
}
.ui-button:active {
    background: var(--input-button-background-active);
}



.ui-row + .ui-row {
    margin-top: var(--row-spacing);
}
.ui-form .ui-row > *:not(.ui-row) {
    margin-top: 0;
    margin-bottom: var(--form-text-row-spacing);
}
.ui-form .ui-row > *:not(.ui-row):last-child {
    margin-bottom: 0;
}

.ui-cells {
    display: flex;
    align-items: center;
    gap: var(--cell-spacing);

    width: 100%;
}



.ui-cell {
    flex: 1 1 0;
    width: 0;
}
.ui-cell-2 {
    flex-grow: 2;
}
.ui-cell-3 {
    flex-grow: 3;
}
.ui-cell-4 {
    flex-grow: 4;
}
.ui-cell-min {
    flex: 0 0 auto;
}
.ui-label-cell {
    flex: 0 1 var(--label-horizontal-cell-width);
}

.ui-cell > *, .ui-row > :not(.ui-cells):not(.ui-embedded) {
    width: 100%;
    margin-top: 0;
    margin-bottom: var(--form-text-row-spacing);
}
.ui-cell > *:last-child, .ui-row > :not(.ui-cells):not(.ui-row):last-child {
    margin-bottom: 0;
}

.ui-form LABEL {
    display: block;
}
.ui-form LABEL.ui-input-optionControlled-label {
    display: inline;
    cursor: pointer;
}

.ui-form .ui-message-error {
    color: red;
    background: #ffeeee;
    border-radius: 0 0 3px 3px;
    padding: 4px 6px;
    /*border: 1px solid #ffdddd;*/
}

.ui-hidden {
    display: none;
}

.ui-form INPUT[type=checkbox] {
    margin: 0 0.5em 0 0;
}

.ui-form INPUT.ui-input-optionControlled-input {
    margin: 0 0.5em;
}

.ui-compound-input {
    display: flex;
    align-items: baseline;
}
.ui-compound-input > * {
    flex: 1 1 0;
}
.ui-form .ui-attached-right, .ui-input-attached-right {
    border-radius: var(--input-border-radius) 0 0 var(--input-border-radius);
}
.ui-form .ui-attached-right {
    border-right: none;
}
.ui-form .ui-attached-left, .ui-input-attached-left {
    border-radius: 0 var(--input-border-radius) var(--input-border-radius) 0;
}
.ui-form .ui-attached-left {
    border-left: none;
}
.ui-input-attached-left, .ui-input-attached-right {
    background: var(--input-attachment-background-colour);
    flex: 0 0 auto;
}
.ui-input-separator {
    flex: 0 0 auto;
}


.ui-form LABEL:not(.ui-checkbox):not(.ui-input-optionControlled-label) {
    font-size: var(--label-vertical-font-size);
    font-weight: var(--label-font-weight);
    color: var(--label-font-color);
}

.ui-form LABEL.ui-checkbox, .ui-form LABEL.ui-input-optionControlled-label {
    font-size: var(--label-horizontal-font-size);
    color: var(--label-font-color);
}

.ui-form P.ui-message {
    font-size: var(--message-font-size);
    color: var(--message-font-color);
}

.ui-form P.ui-message + P.ui-message {
    margin-top: var(--message-internal-margin);
}

.ui-heading {
    border-bottom: 1px solid #ddd;
}


.ui-embedded {
    padding-left: 15px;
    border-left: 5px solid #444;
}

.ui-input-multiFileUpload {
    padding: var(--input-padding-vertical);
}


FIGURE.ui-image {
    margin: 0;
}
.ui-image IMG {
    border-radius: var(--input-border-radius);
}
.ui-image-border IMG {
    border: 1px solid var(--input-border-colour);
}
.ui-image IMG {
    display: block;
    width: 100%;
    object-fit: cover;
}
.ui-image-zoom IMG {
    cursor: zoom-in;
}
.ui-image-zoomed {
    cursor: zoom-out;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    padding: 10vmin;
    background: rgba(255,255,255,0.9);
    user-select: none;
}
.ui-image-zoomed IMG {
    cursor: inherit;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    object-fit: revert;
}
.ui-image FIGCAPTION {
    font-size: var(--message-font-size);
    color: var(--message-font-color);
    text-align: center;
    margin-top: 0.3em;
}


.ui-gallery {
    user-select: none;
}
.ui-gallery-focus, .ui-gallery-thumbnails {
    white-space: nowrap;
    overflow: hidden;
    overflow-x: auto;
    line-height: 0;
    scroll-behavior: smooth;
}
.ui-gallery-focus {
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.ui-gallery-focus::-webkit-scrollbar {
    display: none;
}
.ui-gallery-focus-container {
    position: relative;
}
.ui-gallery-focus-container:hover::before, .ui-gallery-focus-container:hover::after {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    content: '<';
    top: 0;
    width: 10%;
    height: 100%;
    cursor: pointer;
    font-size: 80px;
    background: rgba(255,255,255,0.4);
    color: #eee;
    text-shadow: 0 0 5px rgba(0,0,0, 0.5);
}
.ui-gallery-focus-container:hover::after {
    content: '>';
    right: 0;
}
.ui-gallery-focus-container:has(FIGURE:only-of-type):hover::before, .ui-gallery-focus-container:has(FIGURE:only-of-type):hover::after {
    display: none;
}
.ui-gallery-thumbnails {
    display: flex;
    margin-top: var(--gallery-margin);
}
/* only one child */
.ui-gallery-thumbnails:has(> FIGURE:only-of-type) {
    display: none;
}
.ui-gallery-thumbnails FIGURE {
    flex: 1 0 22%;
    max-width: 34%;
    margin-right: var(--gallery-margin);
    cursor: pointer;
}
.ui-gallery-thumbnails FIGURE:last-child {
    margin-right: 0;
}
.ui-gallery FIGURE {
    display: inline-block;
    width: 100%;
}
.ui-gallery-bordered-exhibits IMG {
    border: 1px solid var(--input-border-colour);
}
.ui-gallery-caption {
    text-align: center;
    margin-top: var(--gallery-margin);
    font-size: var(--message-font-size);
    color: var(--message-font-color);
}
.ui-image-sample {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: silver;
    border: 1px solid gray;
    border-radius: var(--input-border-radius);
    font-weight: bold;
}


@media (max-width: 576px) {

    .ui-cells {
        display: block;
    }

    .ui-cell {
        width: unset;
    }

    .ui-cell + .ui-cell {
        margin-top: var(--vertical-cell-spacing);
    }

    LABEL:not(.ui-checkbox) {
        font-size: var(--label-vertical-font-size);
    }

    .ui-image-zoomed {
        padding: 0;
    }

}



/*
 * user selectable styles
 */
.ui-form P.ui-message.ui-title {
    font-size: 1.5em;
    font-weight: bold;
    opacity: 0.8;
    padding-bottom: 20px;
}
/*# sourceMappingURL=/Volumes/Scratch/build/neon/releaseCustomTables/production/neon/WEB-INF/classes/com/pirionsystems/ne/sites/standard/skin/staticContent/style/form/v2/form.css.map */