@charset "utf-8";

/* .pf-page-container{
height: 800px !important;
} */

/* CSS Document */
.catfish-button,
.button,
.input,
.catfish-input,
.catfish-select,
.textarea,
.catfish-textarea,
.select select,
.file-cta,
.file-name,
.file:not(.is-boxed):not(.is-area) .file-cta,
.pagination-previous,
.pagination-next,
.pagination-link,
.pagination-ellipsis,
.account-page--myorders
    .orders_v2
    .order_page_select_container
    .order_page_state,
.taginput .taginput-container.is-focusable,
.pager span,
.pager a,
.text-box.single-line,
.t-button,
.t-grid table select,
.t-grid .t-animation-container .t-filter-options .t-filter-operator,
.t-grid .t-animation-container .t-filter-options input[type="text"],
.t-grid-pager .t-numeric .t-link,
.t-grid-pager .t-numeric span,
.t-grid-pager .t-link,
.t-datetimepicker input,
.t-datepicker input,
.t-numerictextbox .t-input,
.adminData .t-widget.t-dropdown.t-header .t-dropdown-wrap .t-input,
.adminData .t-widget.t-dropdown.t-header .t-dropdown-wrap input,
.t-combobox .t-dropdown-wrap .t-input,
.t-combobox .t-dropdown-wrap input,
.account-page--myorders .orders_v2 .order_page_select_container .order_page_but,
.account-page--myorders
    .orders_v2
    #filtered_orders
    .order_products_list
    ul
    .symphonyDashboardLink
    a,
.account-page--order-details #order_details_v2 .od_print_button,
.account-page--order-details .od_print_button,
.externalauthentication .oauth-login-linkedin a,
.externalauthentication .oauth-login-twitter a,
.externalauthentication .oauth-login-facebook a,
.ACD_sub_category #pager .pagerLink,
.arone-product-landing-page .attribute input:checked + label.button,
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button,
.ui-selectmenu-button {
    border-radius: 0px;
}

/* Homepage slider deforms images.
	to avoid this i recommend using a width of 100% on the images instead of height this way users can controll the fold via the image aspect ratio.
*/
#sliderrow .flexslider .slides li > * {
    height: auto;
    width: 100%;
}

#sliderrow .flexslider {
    height: auto;
}

/*Using flex on the slider we can make it so it always center aligns the content and html slides have the same height.*/
#sliderrow .flexslider .slides {
    display: flex;
    width: 100%;
    height: 100%;
    float: left;
    align-items: stretch;
    min-height: -webkit-min-content;
    min-height: -moz-min-content;
    min-height: min-content;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 1;
}

#sliderrow .flexslider .slides li {
    text-align: left;
    float: none !important;
    align-items: center;
    min-height: -webkit-min-content;
    min-height: -moz-min-content;
    display: flex !important;
    min-height: min-content;
    height: auto;
}

/*Minor tweaks*/
.homeFeaturedCategoriesWrapper .listWrapper .listItem {
    padding: 1rem;
}

.customScriptUi-batchArea,
.customScriptUi-viewControls {
    margin-left: 0.5rem;
}

.search-wrapper {
    background: #002e47;
    text-align: center;
}

.navbar-dropdown select,
.navbar-dropdown .language-list-container,
.navbar-dropdown .currency-list-container,
.navbar-dropdown .currency-selector {
    min-width: 100%;
}

.homeFeaturedCategoriesWrapper .small-product-item .category-item .picture {
    -webkit-transition: 0.3s all cubic-bezier(0.25, 0.1, 0.25, 1);
    -moz-transition: 0.3s all cubic-bezier(0.25, 0.1, 0.25, 1);
    -otransition: 0.3s all cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: 0.3s all cubic-bezier(0.25, 0.1, 0.25, 1);
}

.homeFeaturedCategoriesWrapper
    .small-product-item
    .category-item:hover
    .picture {
    opacity: 0.5;
}

.homeFeaturedCategoriesWrapper .small-product-item .category-item {
    background: transparent;
    -webkit-transition: 0.3s all cubic-bezier(0.25, 0.1, 0.25, 1);
    -moz-transition: 0.3s all cubic-bezier(0.25, 0.1, 0.25, 1);
    -otransition: 0.3s all cubic-bezier(0.25, 0.1, 0.25, 1);
    transition: 0.3s all cubic-bezier(0.25, 0.1, 0.25, 1);
}

.homeFeaturedCategoriesWrapper .small-product-item .category-item:hover {
    background: #14212a;
}

/*Ignore these tweak*/

#sliderrow .flexslider .flex-direction-nav .flex-nav-next:after {
    content: "\f054";
}

#sliderrow .flexslider .flex-direction-nav .flex-nav-prev:after {
    content: "\f053";
}

.homeFeaturedProductsWrapper
    .listWrapper
    .listItem
    .item-box
    .catfish-default-product-box
    .product-item--info
    .add-info {
    display: none;
}

/*Product attributes*/
/*Radio as buttons*/

.RadioAsButton .attribute .attribute-item {
    display: flex;
}

.RadioAsButton .attribute input[type="radio"] {
    display: none;
}

.RadioAsButton .attribute input[type="radio"] + label {
    border-radius: 4px;
    background-color: #ccc;
    border-color: transparent;
    border-width: 1px;
    color: #fff;
    cursor: pointer;
    justify-content: center;
    padding-top: calc(0.375em - 1px);
    padding-bottom: calc(0.375em - 1px);
    white-space: nowrap;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    text-align: center;
    margin-right: 5px;
}

.RadioAsButton .attribute input[type="radio"]:checked + label {
    background-color: #286eb9;
    color: #fff;
}

/*Live 3d Preview*/
.Live3DEditor #previewView {
    background: #fff;
    top: 3.6rem;
    z-index: 3 !important;
}

.Live3DEditor .editorTop.pane {
    z-index: 4 !important;
}

.Live3DEditor .previewButton,
.Live3DEditor .undoRedoContainer,
.Live3DEditor .toggleCollapseTab {
    display: none !important;
}

.Live3DEditor .freeTargetContainer .AddImageToField,
.Live3DEditor .freeTargetContainer .meuiTextBox,
.Live3DEditor .freeTargetContainer .meuiTextAre {
    width: calc(100% - 40px);
    float: left;
}

.Live3DEditor .freeTargetContainer .Focus3D {
    width: 39px;
    margin-left: 1px;
}

/*Position Helper*/
.PositionHelperConfig {
    position: fixed;
    z-index: 999999999;
    bottom: 30px;
    left: 30px;
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 10px;
    padding: 33px;
    width: 400px;
    display: block;
}

.PositionHelperConfig .ControlRow {
    position: relative;
    float: left;
    width: 100%;
    display: block;
}

.PositionHelperConfig .ControlRow .meuiLabel {
    position: relative;
    float: left;
    width: 15%;
}

.PositionHelperConfig .ControlRow .meuiLabel.RowTitle {
    position: relative;
    float: left;
    width: 100%;
    font-weight: bold;
}

.PositionHelperConfig .ControlRow .meuiNumber {
    position: relative;
    float: left;
    width: 15%;
    margin-right: 3.3%;
}

/*Tag category */

.TagSearchBox .freetextsearch,
.tagsearch-results-page .page-title {
    display: none;
}

.tagsearch-results-page,
.TagSearchBox {
    padding-top: 3rem;
}

/*Dynamic canvas plp controls */
table.dynamicProductOptionTable,
table.dynamicProductOptionTable tbody {
    display: block;
}

table.dynamicProductOptionTable tr {
    display: flex !important;
    justify-content: start;
    width: 100%;
}

table.dynamicProductOptionTable tr td {
    min-width: 5rem;
}

table.dynamicProductOptionTable tr td:nth-child(2) {
    width: 100%;
    display: flex;
}

table.dynamicProductOptionTable .DynamicCanvasRow td input {
    width: auto;
}

table.dynamicProductOptionTable .DynamicCanvasRow td input:first-child {
    width: 100%;
}

/*Banner preview*/

#preview-main-container.banner-preview {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    overflow: hidden;
}

#preview-main-container.banner-preview .flexslider {
    background: transparent;
}

#preview-main-container.banner-preview .flexslider .slides,
#preview-main-container.banner-preview .flexslider .slides li {
    height: 100vh !important;
    background: transparent;
    overflow: hidden;
    text-align: center;
}

#preview-main-container.banner-preview .flexslider .slides .floor {
    content: "";
    position: absolute;
    top: calc(100% + 56px);
    left: 50%;
    z-index: -1;
    width: 100vw;
    height: 50vh;
    margin-left: -50vw;
    background: rgb(154, 154, 154);
    background: linear-gradient(
        180deg,
        rgb(222 222 222) 0%,
        rgba(215, 215, 215, 1) 35%,
        rgba(255, 255, 255, 1) 100%
    );
}

#preview-main-container.banner-preview .flexslider .slides li .img-container {
    position: absolute;
    top: calc(50% - 40px);
    left: 50%;
    display: block;
    transform: translate(-50%, -50%);
    box-shadow: rgb(0 0 0 / 50%) 0px 0px 8px;
    border: solid 1px rgba(0, 0, 0, 0.5);
    border-top-color: rgba(255, 255, 255, 0.5);
    border-left-color: rgba(255, 255, 255, 0.5);
}

#preview-main-container.banner-preview
    .flexslider
    .slides
    li
    .img-container:before {
    content: "";
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: -20px;
    right: -20px;
    border: solid 2px #fff;
    border-top-color: #6b6b6b;
    border-left-color: #6b6b6b;
    border-radius: 20px;
    background: transparent;
    box-shadow: inset rgb(0 0 0 / 50%) 0px 0px 10px;
}

#preview-main-container.banner-preview
    .flexslider
    .slides
    li
    .img-container
    .frame {
    content: "";
    position: absolute;
    top: -30px;
    bottom: -30px;
    left: -30px;
    right: -30px;
    border: solid 10px #ccc;
    border-radius: 30px;
    box-shadow: rgb(0 0 0 / 50%) 0px 0px 10px;
    z-index: -1;
}

#preview-main-container.banner-preview
    .flexslider
    .slides
    li
    .img-container:after {
    content: "";
    position: absolute;
    top: -30px;
    bottom: -30px;
    left: -30px;
    right: -30px;
    border: solid 2px #6b6b6b;
    border-top-color: #fff;
    border-left-color: #fff;
    border-radius: 30px;
    background: transparent;
}

#preview-main-container.banner-preview
    .flexslider
    .slides
    li
    .img-container
    img {
    max-width: calc(90vw - 60px);
    max-height: calc(88vh - 60px);
    width: auto;
    height: auto;
}

#preview-main-container.banner-preview
    .flexslider
    .slides
    li
    .img-container
    .fixing-hole {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 10px;
}

#preview-main-container.banner-preview
    .flexslider
    .slides
    li
    .img-container
    .fixing-hole:before {
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    border: solid 2px #fff;
}

#preview-main-container.banner-preview
    .flexslider
    .slides
    li
    .img-container
    .fixing-hole-1:before {
    bottom: calc(50% - 1px);
    right: calc(50% - 1px);
    border-top: none;
    border-left: none;
}

#preview-main-container.banner-preview
    .flexslider
    .slides
    li
    .img-container
    .fixing-hole-1 {
    top: 10px;
    left: 10px;
}

#preview-main-container.banner-preview
    .flexslider
    .slides
    li
    .img-container
    .fixing-hole-2:before {
    width: 0px;
    left: calc(50% - 1px);
    bottom: calc(50% - 1px);
    border-left: none;
}

#preview-main-container.banner-preview
    .flexslider
    .slides
    li
    .img-container
    .fixing-hole-2 {
    top: 10px;
    left: calc(50% - 5px);
}

#preview-main-container.banner-preview
    .flexslider
    .slides
    li
    .img-container
    .fixing-hole-3:before {
    bottom: calc(50% - 1px);
    left: calc(50% - 1px);
    border-top: none;
    border-right: none;
}

#preview-main-container.banner-preview
    .flexslider
    .slides
    li
    .img-container
    .fixing-hole-3 {
    top: 10px;
    right: 10px;
}

#preview-main-container.banner-preview
    .flexslider
    .slides
    li
    .img-container
    .fixing-hole-4:before {
    height: 0px;
    right: calc(50% - 1px);
    bottom: calc(50% - 1px);
    border-top: none;
}

#preview-main-container.banner-preview
    .flexslider
    .slides
    li
    .img-container
    .fixing-hole-4 {
    top: calc(50% - 5px);
    left: 10px;
}

#preview-main-container.banner-preview
    .flexslider
    .slides
    li
    .img-container
    .fixing-hole-5:before {
    height: 0px;
    left: calc(50% - 1px);
    bottom: calc(50% - 1px);
    border-top: none;
}

#preview-main-container.banner-preview
    .flexslider
    .slides
    li
    .img-container
    .fixing-hole-5 {
    top: calc(50% - 5px);
    right: 10px;
}

#preview-main-container.banner-preview
    .flexslider
    .slides
    li
    .img-container
    .fixing-hole-6:before {
    top: calc(50% - 1px);
    right: calc(50% - 1px);
    border-bottom: none;
    border-left: none;
}

#preview-main-container.banner-preview
    .flexslider
    .slides
    li
    .img-container
    .fixing-hole-6 {
    bottom: 10px;
    left: 10px;
}

#preview-main-container.banner-preview
    .flexslider
    .slides
    li
    .img-container
    .fixing-hole-7:before {
    width: 0px;
    left: calc(50% - 1px);
    top: calc(50% - 1px);
    border-left: none;
}

#preview-main-container.banner-preview
    .flexslider
    .slides
    li
    .img-container
    .fixing-hole-7 {
    bottom: 10px;
    left: calc(50% - 5px);
}

#preview-main-container.banner-preview
    .flexslider
    .slides
    li
    .img-container
    .fixing-hole-8:before {
    top: calc(50% - 1px);
    left: calc(50% - 1px);
    border-bottom: none;
    border-right: none;
}

#preview-main-container.banner-preview
    .flexslider
    .slides
    li
    .img-container
    .fixing-hole-8 {
    bottom: 10px;
    right: 10px;
}

#preview-main-container.banner-preview
    .flexslider
    .slides
    li
    .img-container
    .leg {
    position: absolute;
    width: 15px;
    bottom: -76px;
    height: 60px;
    background: #ccc;
    z-index: 2;
    border-radius: 5px;
    border: solid 4px rgba(0, 0, 0, 0.5);
    border-top-color: rgba(255, 255, 255, 0.5);
    border-left-color: rgba(255, 255, 255, 0.5);
    border-bottom-width: 1px;
    box-shadow: rgb(0 0 0 / 50%) 0px -3px 10px;
}

#preview-main-container.banner-preview
    .flexslider
    .slides
    li
    .img-container
    .leg-1 {
    left: 20%;
}

#preview-main-container.banner-preview
    .flexslider
    .slides
    li
    .img-container
    .leg-2 {
    right: 20%;
}

/*ME Preview Attributes*/

.upload-pages .rawAttributeInfo {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.upload-pages .rawAttributeInfo:before {
    content: "Your attribute selections:";
    display: inline-block;
    padding: 0.7rem;
    font-size: 0.75rem;
    font-weight: bold;
    padding-left: 0px;
}

.upload-pages .rawAttributeInfo .rawAttributeInfo__item {
    padding: 0.75rem;
    line-height: 1rem;
    display: flex;
    padding-left: 0px;
    padding-top: 0px;
}

.upload-pages .rawAttributeInfo .rawAttributeInfo__item span {
    margin: 0px;
    padding: 0.75rem;
    background: whitesmoke;
    font-size: 0.75rem;
}

.upload-pages .rawAttributeInfo .rawAttributeInfo__item span:nth-child(2) {
    padding-left: 0px;
    padding-right: 0px;
}

.upload-pages .rawAttributeInfo .rawAttributeInfo__item span:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding-right: 0px;
}

.upload-pages .rawAttributeInfo .rawAttributeInfo__item span:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding-left: 0.25rem;
}

.upload-pages .upload-pages__title h1 {
    font-size: 1.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 90%;
}

/*Product landing page*/
/*Product description*/

.product-main-wrapper .full-description-wrapper {
    margin-bottom: 1.5rem;
}

/*Tier prices table*/
.tier-prices {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

table.prices-table.is-fullwidth {
    display: inline-table;
}

.hide-quote-button .column.save-quote-buttons-wrapper.action-button-wrapper {
    display: none;
}

.navbar-item img {
    max-height: 3.33333em;
}

/* Tharstern Products */
@media screen and (min-width: 768px) {
    .tharstern-product .attributes .attribute {
        width: 50%;
    }
}

/* Category Cards */
/* .homeFeaturedCategoriesWrapper .listWrapper .listItem .small-product-item .category-item .picture{
  background-color: #0e2e46;
} */

.sub-category-grid .listWrapper .item-box .sub-category-item .picture img,
.homeFeaturedCategoriesWrapper
    .listWrapper
    .listItem
    .small-product-item
    .category-item
    .picture
    img {
    object-fit: contain;
}

.sub-category-grid .listWrapper .item-box .sub-category-item .category-title {
    display: flex;
    align-items: center;
    justify-content: center;
}

.megaedit-preview #addToBasketButton {
    top: 1rem;
}
.page-dynamicproduct-editor .catfish-button.is-small,
.page-dynamicproduct-editor .button.is-small {
    padding: 0.5rem;
}
.page-dynamicproduct-editor .MEUIFormField .control .meuiNonLayout,
.page-dynamicproduct-editor .MEUIFormField .control .zoom-button {
    height: 100%;
}
.page-dynamicproduct-editor .AddImageToField span.no-image-text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    transform: translate(-50%, -50%);
}
.Script_DynamicUiGeneration_New .fb-background-color-select .colorSelector {
    min-width: 100%;
}
/* --- CSS Mobile UX ---*/
.Script_DynamicUiGeneration_New .ItemsListBody .itemDetails {
    padding-left: 1rem;
    padding-right: 1rem;
}
.Script_DynamicUiGeneration_New_MobileUX .DynamicUiGeneration-mobile-ui-global {
    position: fixed;
    bottom: 4.5rem;
    z-index: 5;
    max-height: 0px;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0px;
    -webkit-transition: max-height 0.15s linear;
    -moz-transition: max-height 0.15s linear;
    -o-transition: max-height 0.15s linear;
    transition: max-height 0.15s linear;
    box-shadow: inset 0px -7px 19px -10px rgba(0, 0, 0, 0.2);
}
.Script_DynamicUiGeneration_New_MobileUX
    .DynamicUiGeneration-mobile-ui-global
    > .columns {
    padding: 1rem;
    padding-bottom: 2rem;
    margin: 0 !important;
}
.Script_DynamicUiGeneration_New_MobileUX
    .DynamicUiGeneration-mobile-ui-global.is-active {
    max-height: 70vh;
}
.Script_DynamicUiGeneration_New_MobileUX .eds-mobile-ux {
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 5;
    background: #fff;
    text-align: center;
    padding: 0rem;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px;
}
.Script_DynamicUiGeneration_New_MobileUX .eds-mobile-ux > .columns {
    padding: 0px;
    margin: 0px;
}
.Script_DynamicUiGeneration_New_MobileUX .eds-mobile-ux > .columns > .column {
    padding: 1rem;
    margin: 0px;
    border-bottom: solid 1px #eee;
}
.Script_DynamicUiGeneration_New_MobileUX
    .eds-mobile-ux-footer
    .toggle-fieldlist-button {
    border: none;
    background: transparent !important;
}
.Script_DynamicUiGeneration_New_MobileUX
    .eds-mobile-ux-footer
    .progress-bar-container {
    display: block;
}
.Script_DynamicUiGeneration_New_MobileUX .eds-mobile-ux-footer .progress-bar {
    position: relative;
    width: 100%;
    height: 1.5rem;
    border-radius: 0.75rem;
}
.Script_DynamicUiGeneration_New_MobileUX
    .eds-mobile-ux-footer
    .progress-bar
    .progress {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    display: block;
    height: 1.5rem;
}
.Script_DynamicUiGeneration_New_MobileUX .select-step-button .field-name {
    max-width: calc(100vw - 10rem) !important;
    overflow: hidden;
    text-overflow: ellipsis;
}
.Script_DynamicUiGeneration_New_MobileUX .select-step-button {
    padding: 1rem;
    margin-bottom: -0.5rem;
}
.Script_DynamicUiGeneration_New_MobileUX .column.actions-list {
    overflow: hidden;
    overflow-x: auto;
    border-right: solid 1px #eee;
    box-shadow: inset -7px 0px 26px -13px rgba(0, 0, 0, 0.2);
    min-height: 100%;
}
.Script_DynamicUiGeneration_New_MobileUX
    .column.actions-list.Variable-Input-Container {
    overflow: visible;
    overflow-x: visible;
    text-align: left;
}
.Script_DynamicUiGeneration_New .large-icon-vertical-button {
    padding: 0.5rem;
    height: 4rem;
    width: 4rem !important;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.Script_DynamicUiGeneration_New .large-icon-vertical-button span.fill_button {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.Script_DynamicUiGeneration_New
    .large-icon-vertical-button
    span.fill_button
    .check {
}
.Script_DynamicUiGeneration_New .large-icon-vertical-button span.icon {
    display: block;
    margin: 0px !important;
    height: 1.8rem;
    line-height: 2rem;
    width: 100%;
}
.Script_DynamicUiGeneration_New .large-icon-vertical-button span.icon + .text {
    font-size: 0.75em;
    font-weight: bold;
    padding-top: 0.3rem;
}
.Script_DynamicUiGeneration_New .large-icon-vertical-button span.icon .fa-edit {
    margin-left: 0.2em;
}
.Script_DynamicUiGeneration_New .edit-mode-done-button {
    position: fixed;
    top: calc(50vh - 4rem);
    right: 1rem;
}
.Script_DynamicUiGeneration_New_MobileUX .column.eds-mobile-ux-header {
    position: fixed;
    top: 4rem;
    left: 0px;
    width: 100%;
    z-index: 9;
    padding: 0.5rem;
}
.Script_DynamicUiGeneration_New_MobileUX.EditingMode
    .column.eds-mobile-ux-header {
    top: 0px;
}
.Script_DynamicUiGeneration_New_MobileUX .column.eds-mobile-ux-header span {
    padding: 0rem 1rem;
    display: inline-block;
}
.Script_DynamicUiGeneration_New_MobileUX
    .column.eds-mobile-ux-header
    span.orderNR {
    border-right: solid 1px #fff;
}
.Script_DynamicUiGeneration_New_MobileUX .additionalTargetContainer {
    display: none !important;
}
@media screen and (max-width: 600px) {
    .Script_DynamicUiGeneration_New_MobileUX
        .meuiDateTimePicker
        + .dropdown-menu
        button,
    .Script_DynamicUiGeneration_New_MobileUX
        .meuiDateTimePicker
        + [uib-datepicker-popup-wrap]
        .uib-datepicker-popup.dropdown-menu
        button,
    .Script_DynamicUiGeneration_New_MobileUX
        [uib-datepicker-popup-wrap]
        .uib-datepicker-popup.dropdown-menu
        button {
        border: solid 1px #fff;
        padding: 0.7rem;
        font-size: 1rem;
        min-width: 100%;
        height: 3rem;
        border-radius: 5px;
    }
}
.Script_DynamicUiGeneration_New_MobileUX .input.is-danger,
.Script_DynamicUiGeneration_New_MobileUX .catfish-input.is-danger,
.Script_DynamicUiGeneration_New_MobileUX .catfish-select.is-danger,
.Script_DynamicUiGeneration_New_MobileUX .textarea.is-danger,
.catfish-textarea.is-danger {
    border-color: #cf4646 !important;
    background: #f9dcdc !important;
}
.megaedit-preview #addToBasketButton {
    top: 1rem;
    right: 5rem;
}

.UploadIntroDialog .modal-content {
    max-width: 30rem;
    box-shadow: none;
}
.UploadIntroDialog .modal-content .modal-header,
.UploadIntroDialog .modal-content .modal-footer {
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
}
.UploadIntroDialog .modal-content .modal-body {
    padding: 3rem;
    border-radius: 2rem;
}
.UploadIntroDialog .modal-content .modal-header {
    display: none;
}
.UploadIntroDialog .uploadIntro-UploadButton {
    border-style: dashed !important;
    border-width: 2px !important;
    background: transparent;
    padding: 1rem;
    white-space: normal;
}
.UploadIntroDialog .modal {
    background: rgba(255, 255, 255, 0.7);
}
/* --- CSS Mobile UX ---*/
.Script_DynamicUiGeneration_New .ItemsListBody .itemDetails {
    padding-left: 1rem;
    padding-right: 1rem;
}

.Script_DynamicUiGeneration_New_MobileUX .DynamicUiGeneration-mobile-ui-global {
    position: fixed;
    bottom: 4.5rem;
    z-index: 5;
    max-height: 0px;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0px;
    -webkit-transition: max-height 0.15s linear;
    -moz-transition: max-height 0.15s linear;
    -o-transition: max-height 0.15s linear;
    transition: max-height 0.15s linear;
    box-shadow: inset 0px -7px 19px -10px rgba(0, 0, 0, 0.2);
}

.Script_DynamicUiGeneration_New_MobileUX
    .DynamicUiGeneration-mobile-ui-global
    > .columns {
    padding: 1rem;
    padding-bottom: 2rem;
    margin: 0 !important;
}

.Script_DynamicUiGeneration_New_MobileUX
    .DynamicUiGeneration-mobile-ui-global.is-active {
    max-height: 70vh;
}

.Script_DynamicUiGeneration_New_MobileUX .eds-mobile-ux {
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 5;
    background: #fff;
    text-align: center;
    padding: 0rem;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px;
}

.Script_DynamicUiGeneration_New_MobileUX .eds-mobile-ux > .columns {
    padding: 0px;
    margin: 0px;
}

.Script_DynamicUiGeneration_New_MobileUX .eds-mobile-ux > .columns > .column {
    padding: 1rem;
    margin: 0px;
    border-bottom: solid 1px #eee;
}

.Script_DynamicUiGeneration_New_MobileUX
    .eds-mobile-ux-footer
    .toggle-fieldlist-button {
    border: none;
    background: transparent !important;
}

.Script_DynamicUiGeneration_New_MobileUX
    .eds-mobile-ux-footer
    .progress-bar-container {
    display: block;
}

.Script_DynamicUiGeneration_New_MobileUX .eds-mobile-ux-footer .progress-bar {
    position: relative;
    width: 100%;
    height: 1.5rem;
    border-radius: 0.75rem;
}

.Script_DynamicUiGeneration_New_MobileUX
    .eds-mobile-ux-footer
    .progress-bar
    .progress {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    display: block;
    height: 1.5rem;
}

.Script_DynamicUiGeneration_New_MobileUX .select-step-button .field-name {
    max-width: calc(100vw - 10rem) !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

.Script_DynamicUiGeneration_New_MobileUX .select-step-button {
    padding: 1rem;
    margin-bottom: -0.5rem;
}

.Script_DynamicUiGeneration_New_MobileUX .column.actions-list {
    overflow: hidden;
    overflow-x: auto;
    border-right: solid 1px #eee;
    box-shadow: inset -7px 0px 26px -13px rgba(0, 0, 0, 0.2);
    min-height: 100%;
}

.Script_DynamicUiGeneration_New_MobileUX
    .column.actions-list.Variable-Input-Container {
    overflow: visible;
    overflow-x: visible;
    text-align: left;
}

.Script_DynamicUiGeneration_New .large-icon-vertical-button {
    padding: 0.5rem;
    height: 4rem;
    width: 4rem !important;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.Script_DynamicUiGeneration_New .large-icon-vertical-button span.fill_button {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.Script_DynamicUiGeneration_New
    .large-icon-vertical-button
    span.fill_button
    .check {
}

.Script_DynamicUiGeneration_New .large-icon-vertical-button span.icon {
    display: block;
    margin: 0px !important;
    height: 1.8rem;
    line-height: 2rem;
    width: 100%;
}

.Script_DynamicUiGeneration_New .large-icon-vertical-button span.icon + .text {
    font-size: 0.75em;
    font-weight: bold;
    padding-top: 0.3rem;
}

.Script_DynamicUiGeneration_New .large-icon-vertical-button span.icon .fa-edit {
    margin-left: 0.2em;
}

.Script_DynamicUiGeneration_New .edit-mode-done-button {
    position: fixed;
    top: calc(50vh - 4rem);
    right: 1rem;
}

.Script_DynamicUiGeneration_New_MobileUX .column.eds-mobile-ux-header {
    position: fixed;
    top: 4rem;
    left: 0px;
    width: 100%;
    z-index: 9;
    padding: 0.5rem;
}

.Script_DynamicUiGeneration_New_MobileUX.EditingMode
    .column.eds-mobile-ux-header {
    top: 0px;
}

.Script_DynamicUiGeneration_New_MobileUX .column.eds-mobile-ux-header span {
    padding: 0rem 1rem;
    display: inline-block;
}

.Script_DynamicUiGeneration_New_MobileUX
    .column.eds-mobile-ux-header
    span.orderNR {
    border-right: solid 1px #fff;
}

.Script_DynamicUiGeneration_New_MobileUX .additionalTargetContainer {
    display: none !important;
}

@media screen and (max-width: 600px) {
    .Script_DynamicUiGeneration_New_MobileUX
        .meuiDateTimePicker
        + .dropdown-menu
        button,
    .Script_DynamicUiGeneration_New_MobileUX
        .meuiDateTimePicker
        + [uib-datepicker-popup-wrap]
        .uib-datepicker-popup.dropdown-menu
        button,
    .Script_DynamicUiGeneration_New_MobileUX
        [uib-datepicker-popup-wrap]
        .uib-datepicker-popup.dropdown-menu
        button {
        border: solid 1px #fff;
        padding: 0.7rem;
        font-size: 1rem;
        min-width: 100%;
        height: 3rem;
        border-radius: 5px;
    }
}

.Script_DynamicUiGeneration_New_MobileUX .input.is-danger,
.Script_DynamicUiGeneration_New_MobileUX .catfish-input.is-danger,
.Script_DynamicUiGeneration_New_MobileUX .catfish-select.is-danger,
.Script_DynamicUiGeneration_New_MobileUX .textarea.is-danger,
.catfish-textarea.is-danger {
    border-color: #cf4646 !important;
    background: #f9dcdc !important;
}

.Script_DynamicUiGeneration_New .UploadIntroDialog .modal-content {
    max-width: 30rem;
    box-shadow: none;
}

.Script_DynamicUiGeneration_New .UploadIntroDialog .modal-content .modal-header,
.UploadIntroDialog .modal-content .modal-footer {
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
}

.Script_DynamicUiGeneration_New .UploadIntroDialog .modal-content .modal-body {
    padding: 3rem;
    border-radius: 2rem;
}

.Script_DynamicUiGeneration_New
    .UploadIntroDialog
    .modal-content
    .modal-header {
    display: none;
}

.Script_DynamicUiGeneration_New .UploadIntroDialog .uploadIntro-UploadButton {
    border-style: dashed !important;
    border-width: 2px !important;
    background: transparent;
    padding: 1rem;
    white-space: normal;
}

.Script_DynamicUiGeneration_New .UploadIntroDialog .modal {
    background: rgba(255, 255, 255, 0.7);
}

.Script_DynamicUiGeneration_New .SceneModeControls {
    position: absolute;
    bottom: 3rem;
    left: 3rem;
    z-index: 2;
}

@media screen and (max-width: 768px) {
    .Script_DynamicUiGeneration_New .SceneModeControls {
        bottom: 1rem;
        left: 1rem;
    }

    .editorBottom.is-attached-to-editor .priceContainer {
        bottom: 1rem;
        right: 1rem;
    }

    .editorBottom.is-attached-to-editor .priceContainer h2.subtitle {
        font-size: 1rem;
    }

    .editorBottom.is-attached-to-editor .priceContainer .price.title {
        font-size: 1.5rem;
    }
}

.Script_DynamicUiGeneration_New
    .customScriptUi-mainControlsArea
    > div
    > .control {
    display: inline;
    position: initial;
}

.Script_DynamicUiGeneration_New .SceneView-Container {
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #fff;
}

.Script_DynamicUiGeneration_New .SceneView-Container .image-container {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.Script_DynamicUiGeneration_New .SceneView-Container .image-container img {
    box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 10px;
}

.Script_DynamicUiGeneration_New .errormsg.error.text-danger.has-text-danger {
    white-space: normal;
}
.Script_DynamicUiGeneration_New .UploadIntroDialog .modal {
    background-image: url("/973669751/Handler/CSSOverride/GetImage/150/EditorSplash.jpg");
    background-size: cover;
    background-position: center;
}

.Script_DynamicUiGeneration_New .SceneView-Container .image-container {
    top: 38%;
    left: 70%;
}

.Script_DynamicUiGeneration_New .SceneView-Container {
    background-image: url("/973669751/Handler/CSSOverride/GetImage/150/EditorSplash.jpg");
    background-size: cover;
    background-position: center;
}
.upload-status-clone-target .galleryURI {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.upload-status-clone-target .galleryUploadItem__info {
    max-width: calc(100% - 7.7rem);
}
.upload-status-clone-target .galleryPreview.media-left {
    width: 3rem;
    max-width: 3rem;
}
.upload-status-clone-target .uploadList {
    max-height: 10rem !important;
}
.MEUIColumnLayout.box.imageconfiglist {
    max-height: calc(100vh - 22rem);
    overflow: hidden;
    overflow-y: auto;
    border-radius: 0px !important;
    box-shadow: inset 0 2px 6px 0 rgba(0, 0, 0, 0.2);
}

.Script_DynamicUiGeneration_New
    .MEUIColumnLayout.box.imageconfiglist
    > .columns
    > .column {
    border: solid 1px rgba(0, 0, 0, 0.05);
    margin-bottom: -1px;
}

.Script_DynamicUiGeneration_New
    .fbFieldsContainer
    .field.has-addons
    .control:last-child
    .catfish-button {
    margin-bottom: 0px;
}

.Script_DynamicUiGeneration_New
    .fbFieldsContainer
    > .columns
    > .column.UI-SORTABLE {
    padding-left: 3rem !important;
    position: relative;
}

.Script_DynamicUiGeneration_New
    .fbFieldsContainer
    > .columns
    > .column.UI-SORTABLE:before {
    content: "\f7a4";
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 1.1rem 0.5rem;
    background: #ccc;
    cursor: grab;
    width: 2.7rem;
    height: 3.15rem;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-family: "Font Awesome 5 Pro";
    text-align: center;
    border-radius: 4px;
}

.Script_DynamicUiGeneration_New
    .fbFieldsContainer
    > .columns
    > .column.UI-SORTABLE.UI-SORTABLE-CREATE-MODE {
    padding-left: 0.5rem !important;
}
.Script_DynamicUiGeneration_New
    .fbFieldsContainer
    > .columns
    > .column.UI-SORTABLE.UI-SORTABLE-CREATE-MODE
    .field-main-title {
    padding-left: 1.5rem;
}
.Script_DynamicUiGeneration_New
    .fbFieldsContainer
    > .columns
    > .column.UI-SORTABLE-CREATE-MODE:before {
    top: 0.25rem;
    left: 0.5rem;
    padding: 0.5rem 0;
    background: transparent;
    width: 2.5rem;
    height: 2rem;
    text-align: left;
}
.Script_DynamicUiGeneration_New
    .fbFieldsContainer
    > .columns
    > .column.UI-SORTABLE-CREATE-MODE:hover {
    outline: solid 1px #ccc;
}
.Script_DynamicUiGeneration_New
    .fbFieldsContainer
    > .columns
    > .column.UI-SORTABLE
    .meuiButton:not(.is-small) {
    padding-left: 1rem;
    padding-right: 1rem;
}
div#previewArea.draw_die_line {
    background: #fff;
}
.RefineSizeDialog .modal-content {
    width: 400px;
}

/* --- Script config dialog --- */
.ScriptConfigDialog .modal-dialog,
.ScriptConfigDialog .modal-content {
    max-width: 96vw;
    width: 96vw;
}
.ScriptConfigDialog .modal-body.modal-card-body {
    max-height: calc(100vh - 14rem);
    overflow-y: auto;
}
.ScriptConfigDialog .ScriptConfigItem input[type="text"],
.ScriptConfigDialog .ScriptConfigItem input[type="number"],
.ScriptConfigDialog .ScriptConfigItem select {
    height: 2.5em;
}
.ScriptConfigDialog .ConfigUI-controls-wrap {
    position: fixed;
    top: 2.5rem;
    z-index: 3;
    background: #fff;
    margin: 0 !important;
    width: calc(98vw - 5rem);
}
.ScriptConfigDialog .ConfigUI-controls {
    margin: 0 !important;
    padding: 0.5rem 0;
    align-items: center;
}

.ScriptConfigDialog .ConfigUI-sections-dropdown .dropdown-content {
    max-height: 60vh;
    overflow-y: auto;
    min-width: 22rem;
}
.ScriptConfigDialog .ConfigUI-sections-dropdown .columns.is-fullwidth {
    margin: 0 !important;
    width: 100%;
}
.ScriptConfigDialog .ConfigUI-sections-dropdown .catfish-button {
    margin-bottom: 0.15rem;
}
.ScriptConfigDialog .column.is-excluded-config + .column {
    pointer-events: none;
    opacity: 0.2;
    max-height: 30rem;
    overflow: auto;
}

.ScriptConfigDialog .ScriptConfigItem .box.is-small {
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    border: solid 1px rgba(0, 0, 0, 0.08);
    width: 100%;
}
.ScriptConfigDialog .ScriptConfigItem textarea.ConfigUI-json {
    font-family: monospace;
    font-size: 0.8rem;
    min-height: 8rem;
    white-space: pre;
}
.ScriptConfigDialog .ScriptConfigItem textarea.is-danger {
    border-color: #cf4646 !important;
    background: #f9dcdc !important;
}
.ScriptConfigDialog .ResultingConfig .meuiLabel {
    word-break: break-all;
    text-align: right;
}
.ScriptConfigDialog .config-label {
    font-weight: 600;
}
.ScriptConfigDialog .config-key-name {
    font-family: monospace;
    font-size: 0.85em;
    font-weight: 400;
    opacity: 0.6;
    word-break: break-all;
}
.ScriptConfigDialog .ConfigUI-multiselect {
    max-height: 16rem;
    overflow-y: auto;
}
.ScriptConfigDialog .ConfigUI-readonly {
    font-weight: 600;
    opacity: 0.8;
}

/* BCC */
/*
 * BCC REACH batch dialogs.
 *
 * Paste into the storefront's custom CSS. The script only assigns class names; without
 * this file both dialogs render as one flat run of paragraphs with no grouping.
 *
 * Everything is scoped under .bccBatchDialog so no other MegaEdit dialog is affected.
 *
 * Colours, radii, weights and spacing come from the storefront's own theme variables, so
 * the dialogs follow the skin rather than carrying a palette of their own. Each var()
 * keeps the previous literal as its fallback for skins that do not define the token. The
 * download links wear the platform's button classes, so their appearance is not set here.
 *
 * Note on selectors: MegaEdit wraps every layout item in generated divs, so a component is
 * never the element the browser lays out. Anything about how an item sits among its
 * siblings - flex sizing, dividers, positional spacing - goes on the wrapper via "> *", and
 * a :first-child or :only-child exception matches every item rather than the first.
 */

.bccBatchDialog .modal-dialog {
    max-width: 40rem;
}

.bccBatchDialog .modal-body {
    padding-bottom: var(--advanced-general-spacing-normal, 1.5rem);
}

.bccBatchDialog .bccBatchIntro {
    margin: 0 0 1.75rem;
    opacity: 0.75;
}

/* A block of related controls, separated by the space above it.
   Do not add a :first-child or :only-child exception for the first block - every section
   is the only child of its own generated wrapper, so both match all of them, and their
   extra specificity then beats this rule and flattens the whole dialog. */
.bccBatchDialog .bccBatchSection {
    margin-top: var(--advanced-general-spacing-normal, 1.5rem);
}

.bccBatchDialog .bccBatchSectionTitle {
    margin: 0 0 0.35rem;
    font-weight: var(--advanced-font-weight-semibold, 600);
}

.bccBatchDialog .bccBatchHint {
    margin: 0 0 0.9rem;
    font-size: var(--smFontSize, 13px);
    line-height: 1.45;
    opacity: 0.7;
}

/* Only the gap is set here. Touching display would collapse the checkbox glyph, which the
   platform's own .cf-checkbox rules lay out. */
.bccBatchDialog .bccBatchExclusion {
    margin-bottom: var(--advanced-general-spacing-extra-small, 0.5rem);
}

.bccBatchDialog .bccBatchNcoaOption {
    margin-bottom: var(--advanced-general-spacing-extra-small, 0.5rem);
}

.bccBatchDialog .bccBatchMailingTypeDropdown,
.bccBatchDialog .bccBatchMailingDate {
    width: 100%;
}

/* ---- report ---- */

/* The body scrolls rather than the dialog growing, so the footer buttons can never be
   pushed off screen by a long address check. */
.bccBatchDialog .modal-content {
    max-height: 88vh;
    display: flex;
    flex-direction: column;
}

.bccBatchDialog .modal-body {
    overflow-y: auto;
}

/* Every MEUILabel carries Bulma's .label class, which is 600. Anything that reads as
   prose rather than a figure has to say so. */
.bccBatchDialog .bccBatchCellLabel,
.bccBatchDialog .bccBatchStatLabel,
.bccBatchDialog .bccBatchMoneyBasis,
.bccBatchDialog .bccBatchNotice {
    font-weight: var(--advanced-font-weight-normal, 400);
}

/* Sits directly under the headline figures and qualifies them, so it has to read as part
   of that block rather than as another paragraph. The left rule carries the caution colour
   without tinting the text, which would cost contrast. */
.bccBatchDialog .bccBatchCaution {
    margin: var(--advanced-general-spacing-small, 0.75rem) 0 0;
    padding-left: var(--advanced-general-spacing-small, 0.75rem);
    border-left: 3px solid var(--advanced-color-warning, #B26A00);
    font-weight: var(--advanced-font-weight-normal, 400);
}

.bccBatchDialog .bccBatchTable tr:last-child .bccBatchCellLabel {
    font-weight: var(--advanced-font-weight-bold, 700);
}

.bccBatchDialog .bccBatchHeading {
    margin: 1.5rem 0 0.5rem;
    font-size: var(--xsFontSize, 12px);
    font-weight: var(--advanced-font-weight-semibold, 600);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    opacity: 0.55;
}

/* The three numbers the shopper decides on, read before anything else.
   Sizing and dividers go on the direct children, not on .bccBatchStat: MegaEdit wraps
   every layout item in a generated div, so the wrappers are the flex items and the cell
   sits one level further in. */
.bccBatchDialog .bccBatchStats {
    display: flex;
    border: var(--advanced-border-size, 1px) solid var(--advanced-border-color, #CADFEB);
    border-radius: var(--advanced-border-radius-normal, 4px);
    overflow: hidden;
}

.bccBatchDialog .bccBatchStats > * {
    flex: 1 1 0;
    min-width: 0;
}

.bccBatchDialog .bccBatchStats > * + * {
    border-left: var(--advanced-border-size, 1px) solid var(--advanced-border-color, #CADFEB);
}

.bccBatchDialog .bccBatchStat {
    padding: 0.7rem 0.9rem;
}

.bccBatchDialog .bccBatchStatValue {
    font-size: 1.4rem;
    font-weight: var(--advanced-font-weight-bold, 700);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.bccBatchDialog .bccBatchStatLabel {
    margin-top: 0.2rem;
    font-size: var(--xsFontSize, 12px);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0.6;
}

.bccBatchDialog .bccBatchStat.is-good .bccBatchStatValue {
    color: var(--advanced-status-colors-success, #B4DC82);
    color: color-mix(in srgb, var(--advanced-status-colors-success, #B4DC82) 65%, #17321f);
}

.bccBatchDialog .bccBatchStat.is-bad .bccBatchStatValue {
    color: var(--advanced-status-colors-danger, #CF4646);
}

/* ---- breakdown table ---- */

.bccBatchDialog .bccBatchTable {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--baseFontSize, 14.5px);
}

.bccBatchDialog .bccBatchTable td {
    padding: 0.32rem 0.5rem;
    border-bottom: var(--advanced-border-size, 1px) solid var(--advanced-border-color, #CADFEB);
}

/* The last row is the input total. table.html renders a static <tr class>, so there is no
   way to mark it from the script - its position is what identifies it. */
.bccBatchDialog .bccBatchTable tr:last-child td {
    border-bottom: 0;
    border-top: 2px solid var(--advanced-border-color, #CADFEB);
    font-weight: var(--advanced-font-weight-bold, 700);
}

.bccBatchDialog .bccBatchCellStatus { width: 1.4rem; }

.bccBatchDialog .bccBatchCellCount {
    width: 5rem;
    text-align: right;
    font-weight: var(--advanced-font-weight-semibold, 600);
    font-variant-numeric: tabular-nums;
}

/* Repeats the verdict the row already states in words - never the only signal. */
.bccBatchDialog .bccBatchDot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    border: 2px solid var(--advanced-status-colors-danger, #CF4646);
}

.bccBatchDialog .bccBatchDot.is-ok {
    border-color: var(--advanced-status-colors-success, #B4DC82);
    background: var(--advanced-status-colors-success, #B4DC82);
}

/* Confirmed to the building, not to the door. Hollow rather than filled, so the three
   states differ in shape as well as colour and do not rely on colour vision. The row text
   says the same thing in words either way. */
.bccBatchDialog .bccBatchDot.is-caution {
    border-color: var(--advanced-status-colors-warning, #B26A00);
    background: transparent;
}

/* ---- postage ---- */

.bccBatchDialog .bccBatchMoney {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-top: var(--advanced-general-spacing-normal, 1.5rem);
    padding: 0.7rem 0.9rem;
    background: var(--advanced-general-colors-background, #F5F9FB);
    border-radius: var(--advanced-border-radius-normal, 4px);
}

.bccBatchDialog .bccBatchMoneyBasis {
    font-size: var(--smFontSize, 13px);
    opacity: 0.75;
}

.bccBatchDialog .bccBatchMoneyTotal {
    font-size: 1.2rem;
    font-weight: var(--advanced-font-weight-bold, 700);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- consequence and evidence, side by side above the buttons ---- */

.bccBatchDialog .bccBatchActions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--advanced-general-spacing-small, 0.75rem);
    margin-top: var(--advanced-general-spacing-normal, 1.5rem);
    padding-top: var(--advanced-general-spacing-normal, 1.5rem);
    border-top: var(--advanced-border-size, 1px) solid var(--advanced-border-color, #CADFEB);
}

/* The generated label element is inline, so it is forced to block here - an inline flex
   container gives its wrapper no height to grow to, and the links then sit on top of
   whatever precedes them. */
.bccBatchDialog .bccBatchDownloadsHost {
    display: block;
    width: 100%;
}

/* Every link lives inside one label, so this row is plain markup with no generated
   wrappers in it - which is the only way to make the buttons line up. */
.bccBatchDialog .bccBatchDownloads {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--advanced-general-spacing-extra-small, 0.5rem);
}

/* Appearance comes from the platform's own button classes, which the anchors carry, so
   only the sizing belongs here. They grow to share a row and wrap onto the next rather
   than being squeezed into equal columns: a job can produce a dozen documents, and
   thirteen equal columns are thirteen unreadable ones. */
.bccBatchDialog .bccBatchDownloads .bccBatchReportLink {
    flex: 1 1 auto;
    min-width: 10rem;
    max-width: 100%;
    text-align: center;
    white-space: normal;
    line-height: 1.35;
}

@media (max-width: 40rem) {
    .bccBatchDialog .bccBatchStats { flex-direction: column; }

    /* the divider moves with the direction, and it lives on the wrapper, not the cell */
    .bccBatchDialog .bccBatchStats > * + * {
        border-left: 0;
        border-top: var(--advanced-border-size, 1px) solid var(--advanced-border-color, #CADFEB);
    }

    /* One per line rather than two cramped ones, and the min-width no longer applies. */
    .bccBatchDialog .bccBatchDownloads { flex-direction: column; }

    .bccBatchDialog .bccBatchDownloads .bccBatchReportLink { min-width: 0; }
}