.megaedit-preview #addToBasketButton {
    top: 1rem;
}
.page-dynamicproduct-editor.Script_DynamicUiGeneration_New_html-TS .catfish-button.is-small, .page-dynamicproduct-editor.Script_DynamicUiGeneration_New_html-TS .button.is-small {
    padding: 0.5rem;
}
.page-dynamicproduct-editor.Script_DynamicUiGeneration_New_html-TS .MEUIFormField .control .meuiNonLayout, 
.page-dynamicproduct-editor.Script_DynamicUiGeneration_New_html-TS .MEUIFormField .control .zoom-button-TS   {
    height:100%;
}
.page-dynamicproduct-editor .AddImageToField-TS span.no-image-text-TS {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    transform: translate(-50%,-50%);
}
.Script_DynamicUiGeneration_New-TS .fb-background-color-select-TS .colorSelector  {
    min-width: 100%;
}
/* --- CSS Mobile UX ---*/
.Script_DynamicUiGeneration_New-TS .ItemsListBody-TS .itemDetails-TS {
    padding-left: 1rem;
    padding-right: 1rem;
}
.Script_DynamicUiGeneration_New_MobileUX-TS .DynamicUiGeneration-mobile-ui-global-TS {
    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,.2);
}
.Script_DynamicUiGeneration_New_MobileUX-TS .DynamicUiGeneration-mobile-ui-global-TS > .columns {
    padding: 1rem;
    padding-bottom: 2rem;
    margin: 0!important;
}
.Script_DynamicUiGeneration_New_MobileUX-TS .DynamicUiGeneration-mobile-ui-global-TS.is-active {
    max-height:70vh;
}
.Script_DynamicUiGeneration_New_MobileUX-TS .eds-mobile-ux-TS {
    position: fixed;
    bottom: 0px;
    width: 100%;
    z-index: 5;
    background: #fff;
    text-align: center;
    padding:0rem;
    box-shadow: rgba(0,0,0,.3) 0px 0px 10px;
}
.Script_DynamicUiGeneration_New_MobileUX-TS .eds-mobile-ux-TS > .columns {
    padding: 0px;
    margin: 0px;
}
.Script_DynamicUiGeneration_New_MobileUX-TS .eds-mobile-ux-TS > .columns > .column {
    padding: 1rem;
    margin: 0px;
    border-bottom: solid 1px #eee;
}
.Script_DynamicUiGeneration_New_MobileUX-TS .eds-mobile-ux-footer-TS .toggle-fieldlist-button-TS {
    border: none;
    background: transparent!important;
}
.Script_DynamicUiGeneration_New_MobileUX-TS .eds-mobile-ux-footer-TS .progress-bar-container-TS {
    display: block;
}
.Script_DynamicUiGeneration_New_MobileUX-TS .eds-mobile-ux-footer-TS .progress-bar {
    position: relative;
    width: 100%;
    height: 1.5rem;
    border-radius: 0.75rem;
}
.Script_DynamicUiGeneration_New_MobileUX-TS .eds-mobile-ux-footer-TS .progress-bar .progress {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    display: block;
    height: 1.5rem;
}
.Script_DynamicUiGeneration_New_MobileUX-TS .select-step-button-TS .field-name {
    max-width: calc(100vw - 10rem)!important;
    overflow: hidden;
    text-overflow: ellipsis;
}
.Script_DynamicUiGeneration_New_MobileUX-TS .select-step-button-TS {
    padding: 1rem;
    margin-bottom: -0.5rem;
}
.Script_DynamicUiGeneration_New_MobileUX-TS .column.actions-list-TS {
    overflow: hidden;
    overflow-x: auto;
    border-right: solid 1px #eee;
    box-shadow: inset -7px 0px 26px -13px rgba(0,0,0,.2);
    min-height: 100%;
}
.Script_DynamicUiGeneration_New_MobileUX-TS .column.actions-list-TS.Variable-Input-Container-TS {
    overflow: visible;
    overflow-x: visible;
    text-align: left;
}
.Script_DynamicUiGeneration_New-TS .large-icon-vertical-button-TS {
    padding: 0.5rem;
    height: 4rem;
    width: 4rem!important;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.Script_DynamicUiGeneration_New-TS .large-icon-vertical-button-TS span.fill_button-TS {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}
.Script_DynamicUiGeneration_New-TS .large-icon-vertical-button-TS span.fill_button-TS .check {

}
.Script_DynamicUiGeneration_New-TS .large-icon-vertical-button-TS span.icon {
    display: block;
    margin: 0px!important;    
    height: 1.8rem;
    line-height: 2rem;
    width: 100%;
}
.Script_DynamicUiGeneration_New-TS .large-icon-vertical-button-TS span.icon + .text {
    font-size: 0.75em;
    font-weight: bold;
    padding-top: 0.3rem;
}
.Script_DynamicUiGeneration_New-TS .large-icon-vertical-button-TS span.icon .fa-edit {
    margin-left: 0.2em;
}
.Script_DynamicUiGeneration_New-TS .edit-mode-done-button-TS {
    position: fixed;
    top: calc(50vh - 4rem);
    right: 1rem;
}
.Script_DynamicUiGeneration_New_MobileUX-TS .column.eds-mobile-ux-header-TS {
    position: fixed;
    top: 4rem;
    left: 0px;
    width: 100%;
    z-index: 9;
    padding: 0.5rem;
}
.Script_DynamicUiGeneration_New_MobileUX-TS.EditingMode-TS .column.eds-mobile-ux-header-TS {
    top: 0px;
}
.Script_DynamicUiGeneration_New_MobileUX-TS .column.eds-mobile-ux-header-TS span {
    padding: 0rem 1rem;
    display: inline-block;
}
.Script_DynamicUiGeneration_New_MobileUX-TS .column.eds-mobile-ux-header-TS span.orderNR-TS {
    border-right: solid 1px #fff;
}
.Script_DynamicUiGeneration_New_MobileUX-TS .additionalTargetContainer {
    display: none!important;
}
@media screen and (max-width: 600px) {
    .Script_DynamicUiGeneration_New_MobileUX-TS .meuiDateTimePicker+.dropdown-menu button, 
    .Script_DynamicUiGeneration_New_MobileUX-TS .meuiDateTimePicker+[uib-datepicker-popup-wrap] .uib-datepicker-popup.dropdown-menu button, 
    .Script_DynamicUiGeneration_New_MobileUX-TS [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-TS .input.is-danger, 
.Script_DynamicUiGeneration_New_MobileUX-TS .catfish-input.is-danger, 
.Script_DynamicUiGeneration_New_MobileUX-TS .catfish-select.is-danger, 
.Script_DynamicUiGeneration_New_MobileUX-TS .textarea.is-danger, .Script_DynamicUiGeneration_New-TS .catfish-textarea.is-danger {
    border-color: #CF4646!important;
    background: #f9dcdc!important;
}
.megaedit-preview #addToBasketButton {
    top: 1rem;
    right: 5rem;
}

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

.Script_DynamicUiGeneration_New_MobileUX-TS .DynamicUiGeneration-mobile-ui-global-TS {
    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, .2);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media screen and (max-width: 600px) {

    .Script_DynamicUiGeneration_New_MobileUX-TS .meuiDateTimePicker+.dropdown-menu button,
    .Script_DynamicUiGeneration_New_MobileUX-TS .meuiDateTimePicker+[uib-datepicker-popup-wrap] .uib-datepicker-popup.dropdown-menu button,
    .Script_DynamicUiGeneration_New_MobileUX-TS [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-TS .input.is-danger,
.Script_DynamicUiGeneration_New_MobileUX-TS .catfish-input.is-danger,
.Script_DynamicUiGeneration_New_MobileUX-TS .catfish-select.is-danger,
.Script_DynamicUiGeneration_New_MobileUX-TS .textarea.is-danger,
.Script_DynamicUiGeneration_New-TS .catfish-textarea.is-danger {
    border-color: #CF4646 !important;
    background: #f9dcdc !important;
}

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

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

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

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

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

.Script_DynamicUiGeneration_New-TS .UploadIntroDialog-TS .modal {
    background: rgba(255, 255, 255, .7);
}

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

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

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

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

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

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

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

.Script_DynamicUiGeneration_New-TS .SceneView-Container-TS .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-TS .SceneView-Container-TS .image-container img {
    box-shadow: rgba(0, 0, 0, .3) 2px 2px 10px;
}

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

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

.Script_DynamicUiGeneration_New-TS .SceneView-Container-TS {
    background-image: url("/973669751/Handler/CSSOverride/GetImage/150/EditorSplash.jpg");
    background-size: cover;
    background-position: center;
}
.upload-status-clone-target-TS .galleryURI {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.upload-status-clone-target-TS .galleryUploadItem__info {
    max-width: calc(100% - 7.7rem);
}
.upload-status-clone-target-TS .galleryPreview.media-left {
    width: 3rem;
    max-width: 3rem;
}
.upload-status-clone-target-TS .uploadList {
    max-height: 10rem !important;
}
/* The upload review (docs/testing/upload.md). The popup's own line says what FormBuilder is doing
   once the host's list has emptied (the image is being put into its field), or that a file was
   refused. Hidden otherwise. */
.upload-status-clone-target-TS .fb-upload-state-TS {
    display: none;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.upload-status-clone-target-TS.is-applying-TS .fb-upload-state-TS,
.upload-status-clone-target-TS.has-upload-error-TS .fb-upload-state-TS {
    display: block;
}
.upload-status-clone-target-TS.is-applying-TS .fb-upload-state-TS::after {
    content: "";
    display: block;
    height: 0.35rem;
    margin-top: 0.5rem;
    border-radius: 1rem;
    background: linear-gradient(90deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.25) 100%);
    background-size: 200% 100%;
    animation: fb-upload-indeterminate-TS 1.2s linear infinite;
}
/* A file at 100% has been sent and the server is still working on it (a PDF, a large TIFF): the
   bar stops looking finished and keeps moving. */
.upload-status-clone-target-TS .progress-bar[style*="width: 100%"],
.upload-status-clone-target-TS .progress-bar[style*="width:100%"] {
    background-image: linear-gradient(45deg, rgba(255,255,255,.35) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.35) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
    animation: fb-upload-stripes-TS 0.8s linear infinite;
}
/* A refused file: the popup turns to the danger colour and the host's message in its row stands out. */
.notification.upload-status-clone-target-TS.has-upload-error-TS {
    background-color: #f14668;
    color: #fff;
}
.upload-status-clone-target-TS .galleryUploadItem .errormsg:not(.ng-hide) {
    display: block;
    margin: 0.25rem 0;
    padding: 0.25rem 0.5rem;
    border-left: 3px solid #f14668;
    background: #feecf0;
    color: #cc0f35 !important;
    font-weight: 600;
    white-space: normal;
}
@keyframes fb-upload-indeterminate-TS {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}
@keyframes fb-upload-stripes-TS {
    from { background-position: 1rem 0; }
    to { background-position: 0 0; }
}
/* showFileDropFeedback: files are being dragged over the editor. The host's upload widget takes a
   drop anywhere on the page, so the whole editor is outlined (an outline: no layout change). */
body.fb-file-drag-TS .megaEditMainContainer {
    outline: 3px dashed #485fc7;
    outline-offset: -0.5rem;
}
body.fb-file-drag-invalid-TS .megaEditMainContainer {
    outline-color: #f14668;
}
.UploadIntroDialog-TS .uploadIntro-UploadButton-TS.is-drop-target-TS {
    border-style: solid !important;
    background: rgba(72, 95, 199, .08);
    transform: scale(1.02);
    transition: transform .15s ease, background-color .15s ease;
}
/* The first-load dialog's button while its picker is open or its upload runs. It stays clickable:
   a picker cancelled where the browser does not say so would otherwise lock it. */
.UploadIntroDialog-TS .uploadIntro-UploadButton-TS.is-busy {
    opacity: .6;
    cursor: progress;
    position: relative;
}
.UploadIntroDialog-TS .uploadIntro-UploadButton-TS.is-busy::after {
    content: "";
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 1.5rem;
    height: 1.5rem;
    border: 3px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: fb-upload-spin-TS 0.8s linear infinite;
}
@keyframes fb-upload-spin-TS {
    to { transform: rotate(360deg); }
}
.MEUIColumnLayout.box.imageconfiglist-TS {
    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-TS .MEUIColumnLayout.box.imageconfiglist-TS > .columns > .column {
    border: solid 1px rgba(0,0,0,0.05);
    margin-bottom: -1px;
}

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


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

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

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

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

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

.ProductBuilderDialog .pb-json textarea,
.ProductBuilderDialog textarea.pb-json {
    font-family: monospace;
    font-size: 0.8rem;
    width: 100%;      /* MEUITextArea defaults to a 200x100 Size when width/height are null */
    min-height: 16rem;
    white-space: pre;
}

.ProductBuilderDialog .is-danger textarea,
.ProductBuilderDialog textarea.is-danger {
    border-color: #CF4646;
    background: #f9dcdc;
}

.ProductBuilderDialog .notification { white-space: pre-wrap; font-size: 0.8rem; }
.pb-open-button { margin: 0.5rem 0; }
/* ---- SVG shape fields ---- */

.Script_DynamicUiGeneration_New-TS .fb-shape-controls-TS {
    width: 100%;
}

/* Colour groups are unbounded - one per distinct fill in the artwork - so this deliberately reads as
   one bounded panel rather than a run of loose boxes. It used to cap at 18rem and scroll, matching
   ShapeField's own dialog; the border reads better, at the cost of artwork with many fills growing
   the form rather than scrolling inside it. */
.Script_DynamicUiGeneration_New-TS .fb-shape-groups-TS {
    background: #fff;
    border: solid 1px #dbdbdb;
}
.Script_DynamicUiGeneration_New-TS .fb-shape-group-TS {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
}

.Script_DynamicUiGeneration_New-TS .fb-shape-group-TS:last-child {
    margin-bottom: 0;
}

/* A slider sitting flush against its container clips its handle at both ends. */
.Script_DynamicUiGeneration_New-TS .fb-shape-controls-TS .meuiSlider.ui-slider-horizontal {
       margin: 0.75rem !important;
    width: calc(100% - 0.75rem);
    margin-left: 0 !important;
}

.Script_DynamicUiGeneration_New-TS .fb-shape-placement-TS .MEUIFormField-Label {
    font-size: 0.85rem;
}

.Script_DynamicUiGeneration_New-TS .itemClass-ShapeField-TS .AddShapeToField-TS.show-thumbnail-TS {
    height: auto;
    padding: 0;
}
.Script_DynamicUiGeneration_New-TS .config-key-name-TS {
    color: #5a5a5a;
    font-weight: 400;
    font-size: 0.75rem;
}
/* The mobile shape container needs what the variable container already gets: the actions column
   clips otherwise, and its contents centre. Mirrors the Variable-Input-Container rule above. */
.Script_DynamicUiGeneration_New_MobileUX-TS .column.actions-list-TS.Shape-Input-Container-TS {
    overflow: visible;
    overflow-x: visible;
    text-align: left;
}

.Script_DynamicUiGeneration_New-TS .control.is-fullwidth .fb-shape-groups-TS .button.colorSelector,
.Script_DynamicUiGeneration_New-TS .colorpicker-is-fullwidth-TS .button.colorSelector {
    width: 100%;
}

.Script_DynamicUiGeneration_New-TS .fb-shape-group-TS .label {
    font-size: 12px;
}
.Script_DynamicUiGeneration_New-TS .fb-placement-controls-TS .meuiSliderValue {
    display:none;
}
.Script_DynamicUiGeneration_New-TS .fb-placement-controls-TS .field, .Script_DynamicUiGeneration_New-TS .fb-placement-controls-TS .field .control {
    min-width: 100%;
}
.Script_DynamicUiGeneration_New-TS .shape-controls-in-primary-TS .fb-shape-group-TS {

    border: none;
}

.Script_DynamicUiGeneration_New-TS .fb-shape-group-TS .colorSelector,
.Script_DynamicUiGeneration_New-TS .fb-shape-groups-TS .colorSelector,
.Script_DynamicUiGeneration_New-TS .fb-shape-group-TS input[type="number"],
.Script_DynamicUiGeneration_New-TS .fb-shape-group-TS .fb-color-variable-bound-TS,
.Script_DynamicUiGeneration_New-TS .fb-shape-groups-TS .fb-color-variable-bound-TS {
    padding: 0.5rem;
    height: 2.5rem;
    min-width: 3.5rem;
}
.Script_DynamicUiGeneration_New-TS .field.MEUIFormField.ng-scope.shape-controls-in-primary-TS.has-addons {
    overflow: hidden;
}
.Script_DynamicUiGeneration_New-TS .fb-shape-group-TS input[type="number"] {
    margin-left: -0.75rem;
}

/* ---- Colour variables ---- */
/* One row that does not wrap: four swatches read as a set, a stacked list reads as four unrelated
   controls. The pickers size themselves, so the row only has to stop them growing apart. */
.Script_DynamicUiGeneration_New-TS .fb-color-variables-TS {
    width: 100%;
    gap: 0.25rem;
}
.Script_DynamicUiGeneration_New-TS .fb-color-variables-TS .button.colorSelector,
.Script_DynamicUiGeneration_New-TS .fb-color-variables-TS .fb-color-variable-bound-TS  {
    width: 100%;
    min-width: 2.5rem;
}
/* The button that stands in for a bound picker. Sized like the swatch it replaces so a row of
   controls does not change height when one of them is bound, and outlined rather than filled so it
   does not read as a colour of its own. */
.Script_DynamicUiGeneration_New-TS .fb-color-variable-bound-TS {
    min-width: 2.5rem;
    font-weight: 700;
    padding: 0.5rem;
}
.Script_DynamicUiGeneration_New-TS .fb-color-variable-admin-TS {
    width: 100%;
}

/* ---- Design elements ---- */
/* The form head's "Design elements" dropdown for fields tagged isDesignElement
   (src/ui/build/design-elements.ts), directly under the colour variables. One bordered box: the
   header opens and closes it, and the body lists every design element's controls, one after another,
   each under its own title. */
.Script_DynamicUiGeneration_New-TS .design-elements-container-TS {
    border: solid 1px #dbdbdb;
    border-radius: 4px;
    background: #fff;
    margin-bottom: 0.25rem;
}
.Script_DynamicUiGeneration_New-TS .fb-design-elements-TS {
    width: 100%;
}
.Script_DynamicUiGeneration_New-TS .fb-design-element-TS {
    margin-bottom: 0.5rem;
}
.Script_DynamicUiGeneration_New-TS .fb-design-element-TS:last-child {
    margin-bottom: 0;
}
.Script_DynamicUiGeneration_New-TS .fb-design-element-header-TS {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 0.85rem;
    box-shadow: none;
}
.Script_DynamicUiGeneration_New-TS .fb-design-element-header-TS .text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.Script_DynamicUiGeneration_New-TS .fb-design-element-open-TS .fb-design-element-header-TS {
    font-weight: 700;
    border-bottom: solid 1px #dbdbdb;
    border-radius: 4px 4px 0 0;
}
.Script_DynamicUiGeneration_New-TS .fb-design-element-body-TS {
    padding: 0.5rem 0.25rem;
}

/* Unscoped on purpose, like every other dialog rule in this file: a dialog is a modal on the host
   document and is not inside the script's own container, so a .Script_DynamicUiGeneration_New-TS prefix
   would never match it. */
.ColorSelectResetDialog-TS .modal-content {
    width: 84%;
    max-width: 30rem;
}

/* ---- CSV batch ---- */
/* Two rows at the head of the panel, tight together: they are one control about one file, and a
   normal field gap between them reads as two unrelated toolbars. */
.Script_DynamicUiGeneration_New-TS .fb-batch-toolbar-TS {
    width: 100%;
    gap: 0.25rem;
}
.Script_DynamicUiGeneration_New-TS .fb-batch-toolbar-TS .field.has-addons {
    margin-bottom: 0;
	margin-top: -0.5rem;
}
/* MEUIUpload is a Bulma file input, not a button: its own wrapper is a div, so inside a
   has-addons row it has to be told to behave like the buttons beside it. */
.Script_DynamicUiGeneration_New-TS .fb-batch-toolbar-file-TS {
    width: 100%;
}
.Script_DynamicUiGeneration_New-TS .fb-batch-toolbar-file-TS .file,
.Script_DynamicUiGeneration_New-TS .fb-batch-toolbar-file-TS .file-label {
    width: 100%;
}
.Script_DynamicUiGeneration_New-TS .fb-batch-toolbar-file-TS .file-cta {
    border-radius: 0;
    height: 100%;
    width: 100%;
    white-space: nowrap;
}
.Script_DynamicUiGeneration_New-TS .fb-batch-toolbar-records-TS {
    width: 100%;
}
/* The row the form gains while a record is on screen, so it takes the whole width - there is
   nothing beside it to share with. */
.Script_DynamicUiGeneration_New-TS .fb-batch-toolbar-back-TS {
    width: 100%;
}
.Script_DynamicUiGeneration_New-TS .fb-batch-back-TS {
    flex-grow: 1;
}
/* Fixed size, like the arrows: the count between them is the only control in the row that
   should take the slack. */
.Script_DynamicUiGeneration_New-TS .fb-batch-map-TS {
    flex-grow: 0;
}
/* Icon-only, so they must not grow with the row - the counter between them is what should. */
.Script_DynamicUiGeneration_New-TS .fb-batch-nav-TS {
    flex-grow: 0;
    min-width: 2.5rem;
}
/* The dropdown that stands in for a batched control. Sized like the input it replaces so a form
   does not change height when one field is batched, and italic rather than plain so it does not
   read as a value the customer typed. */
/* The only input an unmapped target gets while a layout is batched: full width, like the
   ordinary control it stands in for, so a form does not change shape when a layout is mapped. */
.Script_DynamicUiGeneration_New-TS .fb-batch-static-TS {
    width: 100%;
}
.Script_DynamicUiGeneration_New-TS .fb-batch-mapped-TS {
    width: 100%;
}
.Script_DynamicUiGeneration_New-TS .fb-batch-mapped-TS select {
    width: 100%;
    font-style: italic;
}
/* The admin's opt-in, beside the field label. No opacity: the button carries is-light when the
   target is static and is-success when it is mapped, and each state says which it is in words, so
   dimming one of them only made a legible button harder to read. */
.Script_DynamicUiGeneration_New-TS .fb-batch-toggle-TS {
    min-width: 2rem;
    padding: 0.6rem !important;
    font-size: 0.65rem;
    font-weight: bold;
}
/* A bordered button keeps a visible edge while it is disabled. The theme drops the border colour
   along with the text colour, which leaves Example - shown but disabled until something is
   batchable, so that the feature stays discoverable - as a label floating with no button around it.
   Both class names, because a button here is .catfish-button from the platform and .button from
   Bulma depending on which builder made it. */
.Script_DynamicUiGeneration_New-TS .catfish-button.has-border[disabled],
.Script_DynamicUiGeneration_New-TS .button.has-border[disabled] {
    border-color: #474747 !important;
}

/* Unscoped on purpose, like every other dialog rule in this file: a dialog is a modal on the host
   document and is not inside the script's own container. The class is the platform's own, hardcoded
   on the dialog window at UIHandlers.js:339 - the cssClasses we pass lands on an inner stack layout
   (:300-301) and cannot size the window. */
.Script_DynamicUiGeneration_New-TS .batch-mapping-dialog .modal-content {
    width: 92%;
    max-width: 46rem;
}
.Script_DynamicUiGeneration_New-TS .batch-mapping-dialog .modal-content table {
    width: 100%;
}
/* A variable now titles itself the way a field does, so the switch has a line to sit on beside the
   label instead of being stranded after the input. */
.Script_DynamicUiGeneration_New-TS .fb-batch-variable-title-TS {
    width: 100%;
    align-items: center;
}
.Script_DynamicUiGeneration_New-TS .fb-batch-variable-title-TS .field-main-title-TS {
    margin-bottom: 0;
}
/* Eligibility lives in the admin tools panel with the other field tags, so it is a switch and not
   a button - this only keeps it in line with its neighbours. */
.Script_DynamicUiGeneration_New-TS .fb-batch-eligibility-TS {
    margin-top: 0.25rem;
}
/* The mapping dialog is ours now, not the platform's, because a Map column has to sit in front of
   Static and ShowMappingDialog has no room for one. Unscoped like every other dialog rule here. */
.batch-mapping-dialog .fb-batch-map-head-TS {
    border-bottom: 1px solid #dbdbdb;
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem;
}
.batch-mapping-dialog .fb-batch-map-row-TS {
    align-items: center;
    min-height: 2.75rem;
}
/* The three value cells occupy the same column, so they are sized alike and the rows do not jump
   as a switch moves. */
.batch-mapping-dialog .fb-batch-map-value-TS {
    width: 100%;
}
/* Not an input, and it should not look like an empty one. */
.batch-mapping-dialog .fb-batch-map-fromform-TS {
    font-style: italic;
    opacity: 0.7;
}
/* The sentence above the table. It explains the three states, so it is prose and not a heading. */
.batch-mapping-dialog .fb-batch-map-info-TS {
    display: block;
    margin-bottom: 0.75rem;
    opacity: 0.85;
}
/* The record number is typed now, not only stepped. Wide enough that four digits and the spinner
   both fit - clipping the spinner made it read as a label rather than an input - and tabular
   figures so the toolbar does not shuffle as it counts. */
.Script_DynamicUiGeneration_New-TS .fb-batch-record-current-TS {
    width: 5.5rem;
    min-width: 5.5rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
/* The total. This one IS pressable - it opens the record browser - so it keeps a button's cursor
   and background. It replaced a deliberately dead readout, and inheriting that readout's
   pointer-events: none is what stopped the browser from ever opening. */
.Script_DynamicUiGeneration_New-TS .fb-batch-record-total-TS {
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    min-width: 4.5rem;
}
/* The clear confirmation. Unscoped like every other dialog rule here, and the class is the
   windowClass we pass to ShowDialog, which reaches $modal.open verbatim (UIController.js:61). */
.batch-clear-dialog-TS .modal-content {
    width: 90%;
    max-width: 30rem;
}
.batch-clear-dialog-TS .fb-batch-clear-note-TS {
    display: block;
    line-height: 1.4;
}
/* Icon-only from Download onwards once there is a file, so the glyph has to sit in the middle of
   the padding p-3 gives it rather than where a label would have left it. */
.Script_DynamicUiGeneration_New-TS .fb-batch-toolbar-file-TS .button .icon:only-child {
    margin-left: 0;
    margin-right: 0;
}
/* The record browser. Unscoped like every other dialog rule here: a dialog is a modal on the host
   document, outside the script's own container. This class is the windowClass we pass to
   ShowDialog, which reaches $modal.open verbatim (UIController.js:61) - so it has to be written
   the way the stylesheet spells it. */
.batch-records-dialog-TS .modal-content {
    width: 94%;
    max-width: 56rem;
}
/* The three sections, separated so the customer can tell where the search ends and the validation
   begins. Each is also the hook the section titles and rows hang under. */
.batch-records-dialog-TS .fb-batch-records-search-TS,
.batch-records-dialog-TS .fb-batch-records-worst-TS,
.batch-records-dialog-TS .fb-batch-records-invalid-TS {
    display: block;
    padding-bottom: 0.75rem;
	background: var(--advanced-general-colors-background);
    padding: 1rem;
}
.batch-records-dialog-TS .fb-batch-records-worst-TS,
.batch-records-dialog-TS .fb-batch-records-invalid-TS {
    border-top: 1px solid #ededed;
    margin-top: 0.5rem;
}
.batch-records-dialog-TS .fb-batch-records-title-TS {
    display: block;
    font-weight: 600;
    margin: 0.75rem 0 0.25rem;
}
.batch-records-dialog-TS .fb-batch-records-head-TS {
    border-bottom: 1px solid #dbdbdb;
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem;
}
.batch-records-dialog-TS .fb-batch-records-heading-TS {
    font-weight: 600;
    opacity: 0.75;
}
.batch-records-dialog-TS .fb-batch-records-row-TS {
    align-items: center;
    min-height: 2.25rem;
}
.batch-records-dialog-TS .fb-batch-records-row-TS:hover {
    background: #f5f5f5;
}
/* A cell holds whatever the file holds, and a file holds addresses. One line each, clipped, so
   twelve rows stay twelve rows and the sections below stay reachable. */
.batch-records-dialog-TS .fb-batch-records-cell-TS {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Prose, not data: nothing found, nothing typed yet, nothing to check against. */
.batch-records-dialog-TS .fb-batch-records-hint-TS,
.batch-records-dialog-TS .fb-batch-records-none-TS,
.batch-records-dialog-TS .fb-batch-records-norules-TS,
.batch-records-dialog-TS .fb-batch-records-flat-TS,
.batch-records-dialog-TS .fb-batch-records-clean-TS {
    display: block;
    font-style: italic;
    opacity: 0.7;
    padding: 0.5rem 0;
}
.batch-records-dialog-TS .fb-batch-records-term-TS {
    width: 100%;
}
/* Its column is is-narrow, so it sizes to the button rather than the other way round - and the
   label must not wrap inside a column that is only as wide as the label. */
.batch-records-dialog-TS .fb-batch-records-view-TS {
    white-space: nowrap;
}
/* Above the check button, because it changes what pressing it means. */
.batch-records-dialog-TS .fb-batch-records-showempty-TS {
    margin-bottom: 0.25rem;
}
/* Ten hits plus a row per column plus a fault list will outgrow the window on a wide file, and the
   sections have to stay scrollable rather than pushing the dialog buttons off screen. */
.batch-records-dialog-TS .fb-batch-records-results-TS,
.batch-records-dialog-TS .fb-batch-records-faults-TS {
    overflow-x: auto;
	overflow-y: hidden;
}
.Script_DynamicUiGeneration_New-TS .is-small .file-cta {
    font-size: 0.8rem!important;
}
.Script_DynamicUiGeneration_New-TS .is-primary .file-cta {
    background-color: var(--brand-main-colors-and-font-primary-color)!important;
    border-color: transparent;
    color: #fff!important;
}
.MEUIColumnLayout.ng-scope.fb-batch-records-head-TS > .columns > .column:first-child {
    min-width: 4.1rem;
}
.MEUIColumnLayout.ng-scope.fb-batch-records-head-TS > .columns > .column:nth-child(2),
.MEUIColumnLayout.ng-scope.fb-batch-records-row-TS > .columns > .column:nth-child(2){
    max-width: 4rem;
    text-align:center
}
.MEUIColumnLayout.ng-scope.fb-batch-records-head-TS > .columns > .column .label {
    font-size: 0.8rem;
}
.MEUIColumnLayout.ng-scope.fb-batch-records-head-TS > .columns > .column .label,
.MEUIColumnLayout.ng-scope.fb-batch-records-row-TS > .columns > .column .label {
    font-size: 0.8rem;
}
.MEUIColumnLayout.ng-scope.fb-batch-records-row-TS > .columns > .column .label {
    font-weight:400;
}

/* The form head is now the panel's own header band: it bleeds to the panel edges, sits on white,
   and carries the rule that used to be a separator element added underneath it. The negative
   margin plus the calc width is what escapes the .column padding the platform puts around it -
   margin-bottom comes after the shorthand deliberately, so only the bottom keeps a positive gap. */
.Script_DynamicUiGeneration_New-TS .meuiTitle.main-title {
    font-size: 1.2rem;
    font-weight: bold;
}

.Script_DynamicUiGeneration_New-TS .column.meuiColumnLayout.is-12.FormHead-TS {
    margin: -1.5rem;
    padding: 2.1rem;
    width: calc(100% + 3rem);
    background: #fff;
    border-bottom: solid 1px #ccc;
    margin-bottom: 1rem;
}

/* The file box: what the CSV is called, and what is in it, with the two things you can do to it
   sitting beside them. One label holding both lines, because every child of a has-addons row
   becomes a .control on the line - two labels would sit side by side, not stacked. */
.Script_DynamicUiGeneration_New-TS .fb-batch-file-summary-TS {
    overflow: hidden;
    line-height: 1.3;
}
.Script_DynamicUiGeneration_New-TS .fb-batch-file-name-TS {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 14rem;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}
/* Small and bold rather than small and faint: it is the one line that says how big the job is. */
.Script_DynamicUiGeneration_New-TS .fb-batch-file-stats-TS {
    font-size: 0.65rem;
    font-weight: bold;
}
/* Heads the record navigator in the footer. Never wraps: the row is the count and two arrows
   beside it, and a label that wraps takes the height of the whole row with it. */
.Script_DynamicUiGeneration_New-TS .fb-batch-records-open-TS {
    white-space: nowrap;
}
.Script_DynamicUiGeneration_New-TS .column.ng-scope.ng-isolate-scope.meuiColumnLayout.is-12.p-3.mb-2.box {
    padding-top: 0.5rem !important;
}
/* --- Image crop sliders (imageControls) --- */
/* An offset slider that cannot move the image looks locked and takes no input. transformImageField
   puts restrictH / restrictV on the panel (.imageSliders-TS); each row is .sliderBox-TS.hcontrol-TS /
   .vcontrol-TS with the slider (.imgControl-TS) inside it. The stock themes' rule nests the two the other
   way round (.imgControl-TS .sliderBox-TS), so it never matched and a locked slider looked live. */
.Script_DynamicUiGeneration_New-TS .imageSliders-TS.restrictH-TS .sliderBox-TS.hcontrol-TS,
.Script_DynamicUiGeneration_New-TS .imageSliders-TS.restrictV-TS .sliderBox-TS.vcontrol-TS {
    opacity: 0.4;
    filter: grayscale(1);
    pointer-events: none;
}
/* Room for a fingertip: the browser does not pan or zoom from a slider (jquery.ui.touch-punch
   already cancels the touch events it turns into mouse events; this stops the page starting a pan
   before it does), and the track takes touches a little above and below the line it draws. */
.Script_DynamicUiGeneration_New-TS .imageSliders-TS .meuiSlider {
    touch-action: none;
}
.Script_DynamicUiGeneration_New-TS .imageSliders-TS .meuiSlider.ui-slider-horizontal::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -0.75rem;
    bottom: -0.75rem;
}
/* A larger handle, centred on the track whatever height the theme gives it, with a hit area of
   about 44 px around it. */
.Script_DynamicUiGeneration_New-TS .imageSliders-TS .ui-slider-handle {
    width: 1.5rem;
    height: 1.5rem;
    top: 50%;
    margin-top: -0.75rem;
    margin-left: -0.75rem;
    border-radius: 50%;
    touch-action: none;
}
.Script_DynamicUiGeneration_New-TS .imageSliders-TS .ui-slider-handle::after {
    content: '';
    position: absolute;
    left: -0.6rem;
    right: -0.6rem;
    top: -0.6rem;
    bottom: -0.6rem;
}
/* imageCropTouchControls: the - and + buttons either side of each slider. */
.Script_DynamicUiGeneration_New-TS .imageSliders-TS .fb-crop-nudge-TS {
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0;
}

/*
 * The Arone theme's rules for FormBuilder (Content/Themes/Arone/sass/megaedit/scriptedui/
 * dynamicuigenscript.scss, the "New Styling" block under the FormBuilder.js body class), carried
 * over with the rewrite's class names: the theme's own rules name FormBuilder.js's classes and do not
 * reach the rewrite. They apply on every theme, not only Arone - the other themes have no such block.
 */
.Script_DynamicUiGeneration_New-TS .freeTargetContainer {
    overflow: hidden auto;
}
.Script_DynamicUiGeneration_New-TS .column.separator {
    height: 0.75rem;
}
.Script_DynamicUiGeneration_New-TS .column.separator .separator-line-TS {
    border-top: solid 1px rgba(0,0,0,0.2);
    height: 0px;
    vertical-align: top;
    width: 100%;
}
.Script_DynamicUiGeneration_New-TS .ItemsListBody-TS:not(.list-view-TS) .itemDetails-TS {
    display: none;
}
.Script_DynamicUiGeneration_New-TS .ItemsListBody-TS .thumbnail {
    background-color: rgba(0, 0, 0, 0.1);
}
.Script_DynamicUiGeneration_New-TS .ItemsListBody-TS .itemDetails-TS {
    padding-left: 3rem;
    padding-right: 3rem;
}
.Script_DynamicUiGeneration_New-TS .sliderBox-TS .meuiSliderValue {
    display: none!important;
}
.Script_DynamicUiGeneration_New-TS .sliderBox-TS .iconBox-TS {
    min-width: 1.5rem;
    text-align: center;
}
.Script_DynamicUiGeneration_New-TS .imageSliders-TS.restrictV-TS .imgControl-TS .sliderBox-TS.vcontrol-TS, .Script_DynamicUiGeneration_New-TS .imageSliders-TS.restrictH-TS .imgControl-TS .sliderBox-TS.hcontrol-TS {
    opacity: .5!important;
    pointer-events: none!important;
}
.Script_DynamicUiGeneration_New-TS .TextAreaContainer-TS .zoom-button-TS {
    height: 120px;
}
.Script_DynamicUiGeneration_New-TS .format-icon.format-icon-bold:before {
    content: "B";
    font-weight: bold;
    font-style: normal;
}
.Script_DynamicUiGeneration_New-TS .format-icon.format-icon-italic:before {
    content: "i";
    font-weight: normal;
    font-style: italic;
}
.Script_DynamicUiGeneration_New-TS .freeTargetContainer .customScriptUi-freeTarget {
    padding-bottom: 15rem;
}