:root {
    --global-border-radius: 0.3em;
    --global-highlight-color: #0056b3;
    --global-highlight-text-color: #fff;

    --wrapper-margin-horizontal: 4em;
}


:root BODY[data-responsive-width~="large"] {
        --wrapper-margin-horizontal: 1em;
    }


:root {

    --body-background-color: #fff;
    --body-text-color: #000;
    --body-font-size: 14pt;

    --link-text-color: #0062cd;

    --element-background-color: #eee;
    --element-background-color-hover: #ddd;
    --element-background-color-selected: #bbb;
    --element-border-color: #ddd;
    --element-border-color-hover: #ccc;
    --element-text-color: #444;

    --content-element-background-color: transparent;
    --content-element-background-color-hover: #eee;
    --content-element-background-color-selected: var(--content-element-background-color-hover);
    --content-element-color-highlight: var(--global-highlight-color);
    --content-element-text-color: inherit;

    --error-popup-background-color: #fffafa;
    --error-popup-text-color: #800;

    --product-background-color: transparent;
    --product-border-radius: var(--global-border-radius);
    --product-padding: 0em;
    --product-min-width: 200px;
    --product-img-border-color-pdf: #eee;

    --homepage-grid-max-columns: 4;
    --homepage-grid-column-gap: 2em;
    --homepage-grid-row-gap: 2em;
    --homepage-grid-image-max-width: 200px;
    --homepage-grid-image-max-height: var(--homepage-grid-image-max-width);
    --homepage-grid-image-drop-shadow-size: 0.2em;
    --homepage-grid-image-drop-shadow-visible: "";
    --homepage-grid-image-drop-shadow-hidden: "none";
    --homepage-grid-image-drop-shadow-visibility: var(--homepage-grid-image-drop-shadow-hidden);
    --homepage-grid-image-padding-horizontal: 0px;
    --homepage-grid-item-min-width: 0px;
    --homepage-grid-item-border-width: 0pt;
    --homepage-grid-item-border-color: transparent;
    --homepage-grid-item-background-color: transparent;
    --homepage-grid-item-background-color-hover: transparent;
    --homepage-grid-item-padding-horizontal: 0em;
    --homepage-grid-item-padding-vertical: 0em;
    --homepage-grid-item-info-gap: 0.8em;
    --homepage-grid-item-title-color: #000;
    --homepage-grid-item-title-alignment: center;
    --homepage-grid-item-brief-color: #444;
    --homepage-grid-max-width: calc(
            /* max columns */
            var(--homepage-grid-max-columns)
            /* column width including one gap */
            * (
                max(
                    /* hardcoded min-width */
                    var(--homepage-grid-item-min-width),
                    /* calculated min width */
                    (var(--homepage-grid-item-border-width) + var(--homepage-grid-image-drop-shadow-size) + var(--homepage-grid-image-padding-horizontal)) * 2 + var(--homepage-grid-image-max-width)
                )
                + var(--homepage-grid-column-gap)
            )
            /* remove last gap */
            - var(--homepage-grid-column-gap)
    );

    --button-color: #666;
    --button-text-color: #fff;
    --button-positive-color: var(--global-highlight-color);
    --button-positive-hover-color: var(--button-positive-color);
    --button-positive-hover-filter: brightness(1.3);
    --button-positive-text-color: var(--global-highlight-text-color);
    --button-negative-color: #a01818;
    --button-negative-text-color: #fff;

    --control-bar-height: 4em;

    --responsive-width-large: 1300px;
    --responsive-width-medium: 1000px;
    --responsive-width-small: 640px;
    --responsive-form-vertical-size: medium;

    --catalogue-products-menu-width: 20vw;
    --catalogue-products-menu-font-size: inherit;

    font-size: var(--body-font-size);
}


/* Global */

HTML {
    height: 100%;
}

BODY {
    background: var(--body-background-color);
    color: var(--body-text-color);
    margin: 0;
    font-family: helvetica, arial, sans-serif;

    height: 100%;
    display: flex;
    flex-direction: column;
}

#outside {
    flex: 1;
    display: flex;
    flex-direction: column;
    z-index: 0;
}

#main-body {
    flex: 1;
    padding: 1em 0;
}

DIV.wrapper {
    margin: 0 var(--wrapper-margin-horizontal);
    position: relative;
}

A:where([href]) {
    color: var(--link-text-color);
}

INPUT, BUTTON {
    /* inherit the surrounding font size for INPUT and BUTTON elements rather than using the browser default */
    font-size: inherit;
}




/* Info messages */

.info .infoInline {
    background-color: var(--global-highlight-color);
    color: var(--global-highlight-text-color);
}

:is(.info .infoInline) A.infoClose {
        color: var(--global-highlight-text-color);
    }




/* Buttons */

.button {
    box-sizing: border-box;
    background: var(--body-background-color);
    border: 2pt solid var(--button-color);
    color: var(--button-color);
    border-radius: var(--global-border-radius);
    min-width: 10em;
    padding: 0.6em 1.2em;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
    display: inline-block;
    text-align: center;
}

.button.productButton {
        background: #eee;
        padding: 0.5em;
    }

.button:hover {
        background: var(--button-color);
        color: var(--button-text-color);
        text-decoration: none;
    }

.button.button_highlight,.button.button_buttonNext,.button.positive {
        background: var(--button-positive-color);
        border-color: var(--button-positive-color);
        color: var(--button-positive-text-color);
    }

:is(.button.button_highlight,.button.button_buttonNext,.button.positive):hover {
            background-color: var(--button-positive-hover-color);
            border-color: var(--button-positive-hover-color);
            filter: var(--button-positive-hover-filter);
        }

.button.button_buttonCancel,.button.negative {
        color: var(--button-negative-color);
        border: 2pt solid var(--button-negative-color);
    }

:is(.button.button_buttonCancel,.button.negative):hover {
            background: var(--button-negative-color);
            color: var(--button-negative-text-color);
        }

.button::before {
        margin-right: 0.8em;
    }

.button::after {
        margin-left: 0.8em;
    }

.button.previous::before {
        font: var(--fa-font-solid);
        content: "\f053"; /* chevron left */
    }

.button.next::after {
        font: var(--fa-font-solid);
        content: "\f054"; /* chevron right */
    }

BODY[data-responsive-width~="medium"] .button {
        padding: 0.5em 1em;
        min-width: 5em;
    }



/* Top Bar */

#topbar .topmenu {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    font-size: 0.9rem;
}

BODY[data-responsive-width~="large"] :is(#topbar .topmenu) {
        gap: 1rem;
    }

#topbar .topmenuItem {
    margin: 0 -0.5rem;
}

#topbar .topmenuLabel {
    font-weight: 300;
    padding: 0.6rem 0;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

:is(#topbar .topmenuLabel) I:first-of-type {
        margin-right: 0.1em;
    }

:is(#topbar .topmenuLabel) B {
        font-weight: 500;
    }

.shown:is(.topmenuAction .topmenuLabel),:is(.topmenuAction .topmenuLabel):hover {
        background: #fff;
        color: #444;
    }

/*  User and Cart Menu Popups */
#topbar .topmenuPopupItem .topmenuLabel {
    position: relative;
    z-index: 301;
    cursor: pointer;
}

.topmenuPopup {
    z-index: 300;
    box-shadow: 0 0 1.6rem -0.6rem #000;
}




/* Homepage */

.presentationStyle-home-page #main-body {
        padding: 0;
    }

.presentationStyle-home-page .grid-layout-inner {
        display: grid;
        grid-template-columns: repeat(auto-fill, calc(max(var(--homepage-grid-item-min-width), var(--homepage-grid-item-border-width) * 2 + var(--homepage-grid-image-max-width))));
        grid-template-rows: repeat(auto-fill, auto auto);
        column-gap: var(--homepage-grid-column-gap);
        row-gap: var(--homepage-grid-row-gap);
        justify-content: center;
        max-width: var(--homepage-grid-max-width);
        margin: var(--homepage-grid-row-gap) auto;
    }

:is(.presentationStyle-home-page .grid-layout-inner) .product-box {
            display: grid;
            grid-template-rows: subgrid;
            grid-template-columns: 1fr;
            grid-row-end: span 2;
            gap: var(--homepage-grid-item-info-gap);
            padding: var(--homepage-grid-item-padding-vertical) var(--homepage-grid-item-padding-horizontal);
            background: var(--homepage-grid-item-background-color);
            border: var(--homepage-grid-item-border-width) solid var(--homepage-grid-item-border-color);
            overflow: hidden;
            text-decoration: none;
        }

:is(:is(.presentationStyle-home-page .grid-layout-inner) .product-box):hover {
                background: var(--homepage-grid-item-background-color-hover);
            }

:is(:is(.presentationStyle-home-page .grid-layout-inner) .product-box) .img {
                margin: calc(0em - var(--homepage-grid-item-padding-vertical)) calc(0em - var(--homepage-grid-item-padding-horizontal)) 0;
                background: var(--homepage-grid-item-background-color-hover);
                display: flex;
                align-items: center;
                justify-content: center;
            }

:is(:is(:is(.presentationStyle-home-page .grid-layout-inner) .product-box) .img) IMG {
                    max-width: var(--homepage-grid-image-max-width);
                    max-height: var(--homepage-grid-image-max-height);
                    filter: drop-shadow(0.1em 0.1em var(--homepage-grid-image-drop-shadow-size) rgba(0, 0, 0, 0.6)) var(--homepage-grid-image-drop-shadow-visibility);
                    margin: 0.2em;
                }

:is(:is(.presentationStyle-home-page .grid-layout-inner) .product-box) .info {
                /* make the info wrap within the box rather than expanding it */
                max-width: min-content;
                min-width: 100%;
                /* */
                display: flex;
                flex-direction: column;
                gap: var(--homepage-grid-item-info-gap);
            }

:is(:is(:is(.presentationStyle-home-page .grid-layout-inner) .product-box) .info) .title {
                    font-weight: bold;
                    font-size: large;
                    color: var(--homepage-grid-item-title-color);
                    text-align: var(--homepage-grid-item-title-alignment);
                }

:is(:is(:is(.presentationStyle-home-page .grid-layout-inner) .product-box) .info) .brief {
                    font-size: 90%;
                    color: var(--homepage-grid-item-brief-color);
                }

.presentationStyle-home-page .text,.presentationStyle-home-page .row-inner:has( > .carousel) {
        max-width: var(--homepage-grid-max-width);
        margin: 0 auto;
    }

.presentationStyle-home-page .slick-initialized .slick-slide {
        display: flex;
        justify-content: center;
    }

/* line the top content up with the grid */

.presentationStyle-home-page #main-after-header-inner,.presentationStyle-home-page #main-logo-inner,.presentationStyle-home-page #topbar-inner,.presentationStyle-home-page #main-footerText-inner,.presentationStyle-home-page #search-inner,.presentationStyle-home-page #main-messages-inner {
        max-width: var(--homepage-grid-max-width);
        margin: 0 auto;
    }




/* Breadcrumbs */

DIV.breadcrumb * {
        box-sizing: border-box;
        display: inline-block;
        height: 2em;
        padding: 0;
        margin: 0;
        vertical-align: middle;
    }

DIV.breadcrumb .crumb {
        border-color: var(--element-background-color);
    }

:is(DIV.breadcrumb .crumb) .crumb-content {
            background-color: var(--element-background-color);
        }

:is(DIV.breadcrumb .crumb):hover {
            border-color: var(--element-background-color-hover);
        }

:is(DIV.breadcrumb .crumb):hover .crumb-content {
                background-color: var(--element-background-color-hover);
            }

:is(DIV.breadcrumb .crumb) .crumb-start,:is(DIV.breadcrumb .crumb) .crumb-end {
            border: 1em solid;
            border-color: inherit;
        }

:is(DIV.breadcrumb .crumb) .crumb-start {
            border-left-color: transparent;
            border-right: none;
        }

:is(DIV.breadcrumb .crumb):first-child .crumb-start {
            display: none;
        }

:is(DIV.breadcrumb .crumb) .crumb-end {
            border-color: transparent;
            border-left-color: inherit;
            border-right: none;
        }

:is(DIV.breadcrumb .crumb) .crumb-content {
            padding: 0 0.25em 0 0.5em;
        }

:is(:is(DIV.breadcrumb .crumb) .crumb-content) A {
                padding-top: 0.5em;
                line-height: 1;
                text-decoration: none;
                color: var(--element-text-color);
            }




/* Search */

DIV#search {
    text-align: right;
}

DIV#search #searchText {
        box-sizing: border-box;
        padding: 0 0.5em;
        border-radius: 0.3em 0 0 0.3em;
        height: 2em;
        width: max(140px, 20vw);
        border: 2px solid var(--element-background-color);
        border-right: none;
        color: var(--element-text-color);
    }

DIV#search BUTTON {
        box-sizing: border-box;
        border-radius: 0 0.3em 0.3em 0;
        border: none;
        background: var(--element-background-color);
        color: var(--element-text-color);
        padding: 0 0.5em;
        height: 2em;
        cursor: pointer;
    }

:is(DIV#search BUTTON):hover {
            background: var(--element-background-color-hover);
        }

DIV#search .searchForm_advanced_hidden {
        display: none;
    }

DIV#main-breadcrumbs DIV#search {
        float: right;
    }

#fieldSearch {
    display: flex;
    flex-direction: column;
    row-gap: 0.5em;
    padding-right: 0.5em;
}

#fieldSearch .fieldSearch_field_title {
        font-weight: bold;
        font-size: 90%;
    }

#fieldSearch #fieldSearch_fields_show,#fieldSearch #fieldSearch_fields_hide {
        background: var(--element-background-color);
        padding: 0.2em;
        border: 1pt solid var(--element-border-color);
        border-radius: 0.3em;
        font-size: 90%;
        text-align: center;
    }

:is(#fieldSearch #fieldSearch_fields_show,#fieldSearch #fieldSearch_fields_hide):hover {
            background: var(--element-background-color-hover);
            border-color: var(--element-border-color-hover);
        }

#fieldSearch #fieldSearch_button_search {
        background: var(--element-background-color);
        padding: 0.5em;
        border: 1pt solid var(--element-border-color);
        border-radius: 0.3em;
        text-align: center;
        cursor: pointer;
    }

:is(#fieldSearch #fieldSearch_button_search):hover {
            background: var(--element-background-color-hover);
            border-color: var(--element-border-color-hover);
        }

:is(#fieldSearch .fieldSearch_field_text) .searchField {
            width: 100%;
            box-sizing: border-box;
            padding: 0 0.5em;
            border-radius: 0.3em;
            height: 2em;
            border: 2px solid var(--element-background-color);
            color: var(--element-text-color);
        }




/* Products View and Search Results */

#main-products {
    margin-top: 2rem;
}

#main-products-inner {
    display: flex;
}

.products-menu, #fieldSearch {
    box-sizing: border-box;
    vertical-align: top;
    width: max(151px, var(--catalogue-products-menu-width));
    max-width: max-content;
    min-width: min-content;
    border-right: 0.2rem solid var(--content-element-background-color-selected);
    font-size: var(--catalogue-products-menu-font-size);
}

:is(:is(.products-menu,#fieldSearch) .folders) .folder {
            display: block;
            text-decoration: none;
            color: var(--content-element-text-color);
            padding: 0.6em 0.2em;
            border-left: 0.3rem solid transparent;
            overflow: hidden;
        }

.selected:is(:is(:is(.products-menu,#fieldSearch) .folders) .folder) {
                border-color: var(--content-element-color-highlight);
                background: var(--content-element-background-color-selected);
            }

:is(:is(:is(.products-menu,#fieldSearch) .folders) .folder):hover {
                background: var(--content-element-background-color-hover);
                text-decoration: none;
            }

:is(:is(.products-menu,#fieldSearch) .folders) .folders:has( ~ .folder),:is(:is(.products-menu,#fieldSearch) .folders) .folder ~ .folders {
            padding-left: 0.8em;
        }

.product-view, #searchResults {
    flex: 1;
    padding-left: 1em;
    display: flex;
    flex-direction: column;
    row-gap: 1em;
}

:is(.product-view,#searchResults) P:first-child {
        margin-block-start: 0;
    }

:is(.product-view,#searchResults) P:last-child {
        margin-block-end: 0;
    }

:is(.product-view,#searchResults) .header {
        display: flex;
        flex-direction: column;
        row-gap: 1em;
    }

:is(:is(.product-view,#searchResults) .header) .frontViewAdminButtons {
            position: absolute;
            right: 0;
        }

:is(.product-view,#searchResults) .folders {
        display: flex;
        flex-wrap: wrap;
        column-gap: 1em;
        row-gap: 0.5em;
    }

:is(:is(.product-view,#searchResults) .folders) .folder {
            display: flex;
            align-items: center;
            column-gap: 0.5em;
            padding: 0.5em;
            text-decoration: none;
            border-radius: 0.3em;
            background: var(--content-element-background-color);
            color: var(--content-element-text-color);
        }

:is(:is(:is(.product-view,#searchResults) .folders) .folder):first-child {
                margin-left: -0.5em;
            }

:is(:is(:is(.product-view,#searchResults) .folders) .folder):hover {
                background: var(--content-element-background-color-hover);
            }

.presentationStyle-regular :is(.product-view,#searchResults) .products {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(calc(var(--product-padding) * 2 + var(--product-min-width)), 1fr));
        grid-template-rows: repeat(auto-fill, auto auto auto);
        gap: 1em;
    }

:is(.presentationStyle-regular :is(.product-view,#searchResults) .products) .product {
            display: grid;
            grid-template-rows: subgrid;
            grid-row-end: span 3;
            grid-template-columns: 1fr;
            gap: 0.3em;


            padding: var(--product-padding);
            background: var(--product-background-color);
            border-radius: var(--product-border-radius);
        }

:is(:is(.presentationStyle-regular :is(.product-view,#searchResults) .products) .product) .img {
                display: flex;
                align-items: center;
                justify-content: center;
            }

.source-pdf:is(:is(:is(:is(.presentationStyle-regular :is(.product-view,#searchResults) .products) .product) .img) IMG) {
                        border: 1pt solid var(--product-img-border-color-pdf);
                    }

:is(:is(.presentationStyle-regular :is(.product-view,#searchResults) .products) .product) .info {
                /* make the info wrap within the box rather than expanding it */
                max-width: min-content;
                min-width: 100%;
                /* */
                display: flex;
                flex-direction: column;
                row-gap: 0.3em;
            }

:is(:is(:is(.presentationStyle-regular :is(.product-view,#searchResults) .products) .product) .info) .name {
                    font-weight: bold;
                    text-align: center;
                }

:is(:is(:is(.presentationStyle-regular :is(.product-view,#searchResults) .products) .product) .info) .description {
                    font-size: 90%;
                    opacity: 0.5;
                }

:is(:is(.presentationStyle-regular :is(.product-view,#searchResults) .products) .product) .info2 {
                flex: 1;
                display: flex;
                flex-direction: column;
                row-gap: 0.3em;
                justify-content: end;
                text-align: center;
            }

.presentationStyle-condensed-products :is(.product-view,#searchResults) .products {
        display: flex;
        flex-direction: column;
        gap: 1em;
    }

:is(.presentationStyle-condensed-products :is(.product-view,#searchResults) .products) .product {
            display: grid;
            grid-template-columns: min-content 1fr minmax(min-content, var(--product-min-width));
            grid-template-rows: min-content min-content 1fr;
            gap: 0.3em;

            padding: var(--product-padding);
            background: var(--product-background-color);
            border-radius: var(--product-border-radius);
        }

BODY[data-responsive-width~="medium"] :is(:is(.presentationStyle-condensed-products :is(.product-view,#searchResults) .products) .product) {
                grid-template-columns: min-content 1fr;
                grid-template-rows: min-content min-content min-content 1fr;
            }

:is(:is(.presentationStyle-condensed-products :is(.product-view,#searchResults) .products) .product) .img {
                grid-column: 1;
                grid-row: 1 / -1;
            }

:is(:is(.presentationStyle-condensed-products :is(.product-view,#searchResults) .products) .product) .name {
                grid-column: 2;
                grid-row: 1;
            }

:is(:is(.presentationStyle-condensed-products :is(.product-view,#searchResults) .products) .product) .price {
                grid-column: 2;
                grid-row: 2;
            }

:is(:is(.presentationStyle-condensed-products :is(.product-view,#searchResults) .products) .product) .description {
                grid-column: 2;
                grid-row: 3;
            }

:is(:is(.presentationStyle-condensed-products :is(.product-view,#searchResults) .products) .product) .add {
                grid-column: 3;
                grid-row: 1 / -1;
                align-self: end;
            }

BODY[data-responsive-width~="medium"] :is(:is(:is(.presentationStyle-condensed-products :is(.product-view,#searchResults) .products) .product) .add) {
                    grid-column: 2;
                    grid-row: 4;
                    justify-self: end;
                }

:is(:is(.presentationStyle-condensed-products :is(.product-view,#searchResults) .products) .product) .add {

                min-width: var(--product-min-width);
            }

:is(:is(.presentationStyle-condensed-products :is(.product-view,#searchResults) .products) .product) .img {
                display: flex;
                align-items: center;
                justify-content: center;
            }

.source-pdf:is(:is(:is(:is(.presentationStyle-condensed-products :is(.product-view,#searchResults) .products) .product) .img) IMG) {
                        border: 1pt solid var(--product-img-border-color-pdf);
                    }

:is(:is(.presentationStyle-condensed-products :is(.product-view,#searchResults) .products) .product) .name {
                font-weight: bold;
            }

:is(:is(.presentationStyle-condensed-products :is(.product-view,#searchResults) .products) .product) .description {
                font-size: 90%;
                opacity: 0.5;
            }

:is(:is(.product-view,#searchResults) .product) .add {
            display: flex;
            flex-wrap: wrap;
            row-gap: 0.3em;
            position: relative;
            line-height: 1;
            text-align: center;
            height: min-content;
            font-size: 12pt;
        }

:is(:is(:is(.product-view,#searchResults) .product) .add) INPUT[type=number] {
                width: 4em;
                border-radius: 0.3em 0 0 0.3em;
                border: 2pt solid var(--button-color);
                border-right: none;
                padding: 0;
                text-align: center;
                line-height: 1;
            }

:is(:is(:is(:is(.product-view,#searchResults) .product) .add) INPUT[type=number])::-webkit-inner-spin-button {
                    height: 2em;
                    min-width: 0.8em;
                    cursor: pointer;
                }

:is(:is(:is(:is(.product-view,#searchResults) .product) .add) INPUT[type=number]) ~ A,:is(:is(:is(:is(.product-view,#searchResults) .product) .add) INPUT[type=number]) ~ BUTTON {
                    border-radius: 0 0.3em 0.3em 0;
                }

:is(:is(:is(.product-view,#searchResults) .product) .add) INPUT[type=number] {

                /* mozilla: only show the number spinners on hover or focus */
                -moz-appearance: textfield;
            }

:is(:is(:is(:is(.product-view,#searchResults) .product) .add) INPUT[type=number]):hover,:is(:is(:is(:is(.product-view,#searchResults) .product) .add) INPUT[type=number]):focus {
                    -moz-appearance: unset;
                    outline: none;
                }

/* safari: only show the number spinners on hover or focus */

:is(:is(:is(:is(.product-view,#searchResults) .product) .add) INPUT[type=number])::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                }

:is(:is(:is(:is(.product-view,#searchResults) .product) .add) INPUT[type=number]):hover::-webkit-inner-spin-button {
                    -webkit-appearance: auto;
                }

:is(:is(:is(.product-view,#searchResults) .product) .add) .button {
                min-width: unset;
                flex: 1;
            }

:is(:is(:is(.product-view,#searchResults) .product) .add) .itemQuantityError {
                box-sizing: border-box;
                position: absolute;
                top: calc(100% + 0.3em);
                width: 100%;
                padding: 0.5em;
                background: var(--error-popup-background-color);
                border-radius: var(--global-border-radius);
                color: var(--error-popup-text-color);
                box-shadow: 0 0 1.5em -0.5em #000;
            }

:is(:is(.product-view,#searchResults) .product) A {
            color: inherit;
            text-decoration: none;
        }




/* Form Tasks */

:root {
    --preview-width: 265px;
    --preview-peek-width: 20px;
}

#steps-inner {
    font-size: xx-large;
    font-weight: 500;
}

.includesPreview #controlBar,.includesPreview #content {
        margin-right: var(--preview-width);
        transition: margin-right 0.7s;
    }
.includesPreview[data-responsive-width~="large"] #controlBar,.includesPreview[data-responsive-width~="large"] #content {
        margin-right: var(--preview-peek-width);
    }

BODY.includesPreview :where(#content, #controlBar) DIV.wrapper {
    margin-right: 1em;
}

/* align the document sources header with the left of the upload field */
.field_documentSources_header .pfcs {
    margin-left: 0;
}

#content-inner P:first-of-type {
    margin-top: 0;
}

#controlBarShadow {
    position: sticky;
    bottom: var(--control-bar-height);
    box-shadow: inset 0 -10px 10px -10px gray;
    height: 10px;
}
#controlBarShadowBlock {
    position: absolute;
    width: 100%;
    height: 10px;
    background: white;
    z-index: 50;
}
#controlBar.checkout {
    position: unset;
}
#controlBarShadow.checkout,
#controlBarShadowBlock.checkout {
    display:none;
}

#controlBar {
    position: sticky;
    bottom: 0;
    z-index: 51;
    margin-top: 10px; /* give room for the shadow and shadow block */
    height: var(--control-bar-height);
    background: var(--body-background-color);
    display: flex;
    align-items: center;
}

#controlBar .wrapper {
        flex: 1;
    }

#controlBar #controlBar-inner {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

:is(#controlBar #controlBar-inner) .dynamicPriceEl {
            flex: 1;
            font-size: 24px;
            font-weight: 500;
        }

.unavailable:is(:is(#controlBar #controlBar-inner) .dynamicPriceEl) {
                font-size: 20px;
            }

BODY[data-responsive-width~="medium"] :is(:is(#controlBar #controlBar-inner) .dynamicPriceEl) {
                display: none;
            }

:is(#controlBar #controlBar-inner) #buttonBar {
            display: flex;
            gap: 0.5em;
        }

#thumbnailsAllowedArea {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 265px; /* also update controlBar margin-right below */
    right: 0;
    overflow: hidden;
    z-index: 100;
    transition: width 0.7s;
    pointer-events: none;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

BODY[data-responsive-width~="large"] #thumbnailsAllowedArea {
        width: var(--preview-peek-width);
        transition: width 0.7s;
    }

:is(BODY[data-responsive-width~="large"] #thumbnailsAllowedArea):hover {
            width: var(--preview-width);
            transition: width 0.7s;
        }




/* Form V2 */

.ui-form, .ui-modal {
    --input-border-color-required: var(--global-highlight-color);
}

.ui-form {
    flex: 1;
}




/* PDF Preview Zoom */

#zoomContainer {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2000;
    cursor: pointer;
    cursor: zoom-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgb(0,0,0,0.75);
    user-select: none;
}

#zoomContainer #zoomWrapper {
        flex: 1;
        margin: 14px;
        padding: 14px;
        border-radius: var(--global-border-radius);
        background: #fff;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

:is(#zoomContainer #zoomWrapper) #zoomLoading,:is(#zoomContainer #zoomWrapper) #zoomWrapperInner,:is(#zoomContainer #zoomWrapper) .zoomClose {
            box-shadow: 0 0 30px -10px #000;
        }

:is(#zoomContainer #zoomWrapper) #zoomLoading {
            flex: 1;
        }

:is(#zoomContainer #zoomWrapper) #zoomWrapperInner {
            overflow: hidden;
            flex: 1;
            min-width: 0;
        }

:is(:is(#zoomContainer #zoomWrapper) #zoomWrapperInner) IMG {
                display: block;
                max-width: 100%;
                max-height: 100%;
                margin: 0 auto;
            }

:is(#zoomContainer #zoomWrapper) .zoomClose {
            margin-top: 14px;
            font-size: 16px;
            color: #eee;
            background-color: #222;
            border-radius: var(--global-border-radius);
            padding: 0.5em;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            cursor: auto;
        }

:is(:is(#zoomContainer #zoomWrapper) .zoomClose) I {
                cursor: pointer;
            }




/* Summary */

.summaryChild {
    margin-left: 2ex;
}

.itemLevelContainer > .summaryChild {
        margin-left: 0;
    }




/* Dynamic Preview for Templates */

BODY.wide[data-responsive-width~="medium"] .form-block.right {
        display: none;
    }




/* Cart Add Popup */

#cart-add-message {
    position: absolute;
    top: 15vh;
    left: 50%;
    transform: translateX(-50%);
    width: 700px;
    background: #fff;
    z-index: 101;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 40px;
    box-shadow: 0 0 30px -10px #000;
}

#cart-add-message H1 {
        color: #fff;
        background: #444;
        margin: 0;
        padding: 15px 60px;
        font-size: 20pt;
    }

:is(#cart-add-message H1) I {
            margin-right: 0.5em;
        }

#cart-add-message .content {
        padding: 0 60px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

:is(#cart-add-message .content) .header {
            font-size: 120%;
            font-weight: bold;
        }

#cart-add-message .actions {
        padding: 0 60px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

:is(#cart-add-message .actions) BUTTON {
            grid-column: 1 / 3;
        }




/* Cart */

#main-cart {
    margin-top: 2em;
}



















/* Unchecked */

A {
    text-decoration: none;
}
A:hover {
    text-decoration: underline;
}

.wrapper #messages .info {
    width: 900px;
}

#popupUser {
    z-index: 300;
    width: max-content;
    max-width: 50vw;
    min-width: 100%;
    box-sizing: border-box;
    right: 0;
}

#popupCart {
    overflow:auto;
    max-height:500px;
    z-index: 300;
}
#popupCart .cart-link {
    text-align: right;
    padding:5px;
}

#topbar {
    position: sticky;
    z-index: 100;
}

#banner {
    width: 100%;
    height:100%;
    position: absolute;
    overflow: hidden;
    background-size: 100%;
    background-position: top;
    z-index: -1;
    background-repeat: no-repeat;
}

#main-logo-inner {
    height: 120px;
    margin-top: 0 !important;
}

#main-logo * {
    vertical-align: middle;
}

body.popup-small #outside {
    margin-top: 8px;
}

body.popup #outside DIV.wrapper {
    width: 640px;
}

body.popup-small #outside DIV.wrapper {
    width: 450px; 
}

/* There are quite a number of style overloads around that
 have a 70px left/right padding to turn some stuff white or something? sure messes up
 small popups, so we'll override here, at the cost of some slight ugliness, but at least
 things will fit. I guess those style overrides can be mended at some stage?
*/
body.popup-small #outside DIV.wrapper {
    padding: 1px 0;
}

.main-spacer {
    display: none;
}

.items-group {
}
.items-group .folder {
    display: inline-block;
}

DIV#main {
    background:none;
    padding:0;
}

#main > div {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0;
}
#main > div:first-of-type {
    margin-top: 0 !important;
}

DIV#main-header {
    display: none;
    position: relative;
    padding: 10px;
    margin-top: 0 !important;
    margin-bottom: 0;
    border-bottom: 0;
    border-radius: 0;
    border-top-left-radius: 5px;
    /*border-top-right-radius: 5px;*/
    box-shadow: none;
}

DIV.folders-menu {
    margin-bottom: 0;
    padding: 10px 0px;
    background-color: #444;
    border:1px solid #ddd;
}

DIV.folders-menu SPAN.folder {
    margin: 0;
    padding: 0px 5px;
    border-right: 1px dotted #bbb;
}

DIV.folders-menu SPAN.folder:first-child {
    padding-left: 0;
}

DIV.folders-menu SPAN.folder:last-child {
    border: none;
}

DIV.folders-menu SPAN.folder a {
    text-decoration: none;
    color: white;
}

DIV.folders-menu SPAN.folder:first-child {
    border-left: none;
    margin-left: 10px;
}

#main-folders {
    position: sticky;
    top: 20px;
    z-index: 100;
}
#outside .main-folders .wrapper > DIV {
    margin-top: 0;
}

.child-indicator {
    border:1px solid black;
    padding: 2px;
}

DIV#home {
    float: left;
}


DIV#info-header {
    margin: 0;
    padding: 0;
    border: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    text-align: right;
    background: none;
}

#info-header DIV.info-content {
    background-color: white;
    /*display: inline;*/
    padding: 0 10px;
    border-top-left-radius: 5px;
    width: 960px;
    margin: 0 auto;
}

#logout {
    position: relative;
    display: inline;
    top: 0;
    right: 0;
    margin: 0;
    margin-right: 5px;
}

#cart-summary {
    background-color: white;
    line-height: 30px;
    margin-left: 5px;
    padding: 5px;
    position: relative;
}

#cart-summary IMG {
    margin-bottom: -2px;
}

#cart-summary:hover {
    cursor: pointer;
}

#popup-cart {
    position: absolute;
    top: 23px;
    right: -1px;
    background-color: white;
    border: 1px solid black;
    z-index: 10;
    width: 300px;
}

#popup-cart .widget {
    text-align: left;
    padding: 20px;
}

#home {
    margin: 0;
}

.topmenu .topmenuItem .topmenuLabel A {
    color: inherit;
    text-decoration: inherit;
}

#wrapper DIV.row {
    margin-top: 40px;
}

DIV.row DIV.row-title {
    font-size: 20pt;
    margin-bottom: 10px;
}


#outside > DIV.highlight {
    margin: 40px 0;
    width: 100%;
    background-color: #eee;
    padding: 30px 0;
}

#outside #main-links-inner {
    margin: 60px auto 0;
    border-top: 1px solid #e4e4e4;
    text-align: center;
    border-radius:0px;
    box-shadow: none;
}
#main-links-inner UL {
    border-right:none;
    text-align: left;
}
#main-links-inner UL:last-child {
    border: none;
}

.carousel {
    /*background:white;*/
}
.carousel button:before {
    color: black;
}

.slick-slide img {
    display: inline;
}
.carousel .product-box {
    text-align: center;
}
.carousel .product-box .img {
    text-align: center;
    overflow: hidden;
    height: 150px;
}
.carousel .product-box .img img {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.carousel .product-box .img img.source-pdf {
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.carousel .product-box .description {
    display: none;
}
.carousel .product-box .brief {
    opacity: 0.5;
    font-size: 95%;
}
.carousel A .title, .carousel A:visited .title {
    color: black;
}
.carousel .bottom-row {
    display: none;
}
.carousel .bottom-row A {
    text-decoration: none;
    background-color: #444;
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    /*line-height: 16px;*/
}
.carousel A:hover {
    text-decoration: underline;
    cursor: pointer;
}
.carousel .bottom-row {
    position: relative;
    height: 60px;
}
.carousel .buttons {
    position: absolute;
    bottom: 10px;
    width: 100%;
}



DIV#main-cart-inner {
    border: 1px solid #ddd !important;
    background-color: white;
    display: block;
    box-shadow: none;
    padding-bottom: 10px;
}

.cart-widget .lineItems .lineItem .name a {
    text-decoration: underline;
}
.cart-widget .lineItems .lineItem .description {
    font-size: 9pt;
    padding:5px 0;
    padding-left:10px;
}

.saved-cart-widget .lineItems .lineItem .description {
    padding-left:25px;
}

.cart-widget .lineItem .legend {
    font-style: italic;
}

.cart-widget .message {
    text-align: center;
}


#popupUser UL {
    list-style: none;
    padding: 0 30px;
    margin-top:0;
}
#popupUser UL LI {
    line-height: 30px;
    white-space: nowrap;
}

#popupUser UL LI I {
    font-size: 14px;
    margin-right:3px;
}
.content_table {
    margin-top:10px;
}
.container_title {
    padding:0;
    background-color:white;
    font-size:18px !important;
    font-weight: normal;
    border-bottom: none;
    font-family: helvetica, arial, sans-serif;
}
TABLE.content_table > TBODY > TR > TD {
    padding: 5px;
}
#pagedButtonTable {
    background-color:white;
}

DIV#main DIV.print {
    box-shadow: none;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd !important;
    border-radius: 0;
    padding: 4px 10px;
    float: right;
}
DIV#main DIV.print:hover {
    box-shadow: none;
    background: rgba(0, 0, 0, 0.05);
}

DIV#main DIV.search {
    box-shadow: none;
    padding: 0 10px;
    cursor: pointer;
    border-radius: 0;
    float: right;
}
DIV.search INPUT[type=button] {
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 4px 10px;
}

DIV.search INPUT[type=button]:hover {
    box-shadow: none;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.05);
}

#main > div, #widgets > .widget {
    box-shadow: none;
    border-radius: 0;
}

.cart A.checkout, .cart A.continueCheckout {
    width:200px;
    margin:0 auto;
}
.cart .button-row {
    text-align: left;
}



DIV.receipt {

}
DIV.receipt .feedback-line {
    padding:5px 0;
}
DIV.receipt .feedback-line .order-id {
    display: block;
    margin:20px 50px;
    padding: 10px;
    box-shadow: 1px 0px 5px #bbb;
    font-size: 18pt;
    font-weight: bold;
    text-align: center;
}
DIV.receipt .item-line {
    font-size: 16px;
    font-weight: bold;
}
DIV.receipt .item-feedback-line {
    margin-left: 50px;
}

.item:hover {
    background:none !important;
    color:black;
}


#popupCart {
    width: max-content;
    max-width: 70vw;
    min-width: 100%;
    box-sizing: border-box;
    right: 0;
    padding: 0;
}
#popupCart #cart {
    min-width: 300px;
}

#main-cart .container_title {
    padding: 10px 20px;
    text-align: center;
}

.cart-widget .lineItem  {
    padding: 10px;
}

.cart-widget.saved-cart-widget .lineItem  {
    padding: 5px;
}

.cart-widget .lineItem.subLineItem {
    margin-left: 20px;
    border-left: 1px solid #e6e6e6;
}

.cart-widget .lineItem.subLineItem + .lineItem {
    border-top: 1px solid #e6e6e6;
    margin-top: 10px;
}
.cart-widget .lineItem.subLineItem + .lineItem.subLineItem {
    border-top: none;
    margin-top: 0;
}

.cart-widget .total {
    padding: 15px 10px;
}

.cart-widget .button-row {
    padding: 0 10px;
    text-align: right;
}

#popupCart .cart-link {
    padding: 10px;
}

#cartModeNotice div.wrapper #cartModeNotice-inner {
    margin-top: 0;
    text-align: right;
}

#cartModeNotice .cartModeMessage {
    text-align: left;
}

#cartModeNotice * {
    font-size: 18px;
}

#cartModeNotice .frontHelpText {
    font-size: 90%;
    opacity: 0.7;
}

#cartModeNotice button {
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 90%;
    cursor: pointer;
}

#outside #cartModeNotice div.wrapper {
    background: rgba(0,0,0,0.03);
    padding-top: 20px;
    padding-bottom: 20px;
}




DIV.notice DIV.wrapper DIV {
    margin-top: 0;
}

DIV.notice DIV.button-bar {
    text-align: right;
}

DIV.notice * {
    font-size: 16px;
}

DIV.notice .subMessage {
    font-size: 95%;
    opacity: 0.8;
}

DIV.notice DIV.button-bar BUTTON {
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 90%;
    cursor: pointer;
}

#outside DIV.notice DIV.wrapper {
    background: rgba(0,0,0,0.03);
    padding-top: 20px;
    padding-bottom: 20px;
}


#sourceDropNotice-pre {
    display: none;
}


#main-cart .container_message {
    background-color: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-style: normal;
    padding: 12px;
    margin: 24px;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#main-cart .container_message.bottomMessage {
    background-color: transparent;
}

.published-field-title::after {
    content: ': ';
}


/* sign in */

.loginPopup {
    box-sizing: border-box;
    width: 400px;
    padding: 30px 40px 40px 40px;
}

.loginPopup_title {
    text-align: center;
    font-size: 150%;
    font-weight: bold;
    margin-bottom: 30px;
}

.loginPopup LABEL {
    display: none;
}
#loginPopup_password .loginPopup_option_title {
    display: none;
}

.loginPopup_option_title {
    text-align: center;
    margin: 10px 0;
}

.loginPopup_option_field {
    margin: 10px 0;
}

.loginPopup_input, .loginPopup_button {
    box-sizing: border-box;
    width: 100%;
    font-size: 14px;
    padding: 8px;
}

.loginPopup_button {
    cursor: pointer;
}

.loginPopup_separator {
    margin: 30px 0;
    text-align: center;
    color: #aaa;
    height: 1px;
    background: #aaa;
}
.loginPopup_separator::after {
    content: "or";
    padding: 0 0.5em;
    background-color: #fff;
    position: relative;
    top: -0.55em;
}

#checkoutLogin .loginPopup_title {
    display: none;
}
#checkoutLogin .loginPopup {
    margin: 0 auto;
}
.checkoutLogin_message {
    box-sizing: border-box;
    width: 400px;
    padding: 30px 40px 0 40px;
    margin: 0 auto;
}

DIV.customTableList DIV.customTableSearch {
    margin: 20px 0;
}

TABLE.customTableList {
    font-size: 85%;
    background: #fff;
    width: 100%;
}

TABLE.customTableList TH {
    background: #e2e2e2;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.1;
    text-align: left;
    vertical-align: bottom;
    padding: 12px 0 12px 6px;
}
TABLE.customTableList TH:last-child {
    padding-right: 6px;
}

TABLE.customTableList TD {
    line-height: 1.3;
    vertical-align: baseline;
    padding: 6px;
}

TABLE.customTableList TBODY TR.even {
    background: #e2e2e2;
}

/*# sourceMappingURL=/Volumes/Scratch/build/neon/releaseCustomTables/production/neon/WEB-INF/csites/com/pirionsystems/ne/csites/standard/catbase/staticFiles/style/fancy.css.map */