/* latest theme changes: 08/10/2025 */

/* Table of Contents 
-------------------------

Imports
Variables

Traditional Site Overrides
Test Site Overrides
Base
Buttons
Elements / Components
States
Tooltips
Notifications
Description Previews
Hidden Elements

Breadcrumb
Joruney
    Global Tile Picker
Category / Squad Store Pages
Product / Design Pages
Design Page

Dialog
    Size Chart
    Design Completion

Customize Page
    Debug Panel
    Design Not Found
    Model Preview
        Header
        Action Bar/Menu & Items Dialog
        Action Slot
            Items Dialog
            Product Aspects
            Related Products, Cross Sells & Design Selector
            Print Groups
    Customise Menu
        Steps
            Active Step
            Substeps
        Fields
            General
            Selected Values
            Horizontal Rule
            Description
            Design Selector
            Image Tile Picker
            Color Tile Picker
            Color Picker Custom
            Tile Picker HTML
            Image
            Color List
            Radio Buttons
            Slider
                Transform
            Text Box
            Dropdown
            Editor
                Text
                Image / Clipart
                    Clipart Fields
                    Clipart Groups
                    Detached Editor
            Team Details
            Highlight
        Single Item Checkout
    Footer

My Designs
    Designs
    Footer
    Dialogs

Forms

*/

/* --- Imports --- */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* --- Variables --- */

:root {

    /* colors */

    --kbdefault25-primary-1: var(--kbdefault25-custom-primary-1, #1E323D);
    --kbdefault25-primary-1-25: var(--kbdefault25-custom-primary-1-25, #1E323D25); /* generated */
    --kbdefault25-primary-1-50: var(--kbdefault25-custom-primary-1-50, #1E323D50); /* generated */

    --kbdefault25-primary-2: var(--kbdefault25-custom-primary-2, #AADCF5);
    --kbdefault25-primary-2-10: var(--kbdefault25-custom-primary-2-10, #AADCF510); /* generated */
    --kbdefault25-primary-2-25: var(--kbdefault25-custom-primary-2-25, #AADCF525); /* generated */
    --kbdefault25-primary-2-50: var(--kbdefault25-custom-primary-2-50, #AADCF550); /* generated */

    --kbdefault25-secondary-1: var(--kbdefault25-custom-secondary-1, #FF8500);
    --kbdefault25-secondary-1-10: var(--kbdefault25-custom-secondary-1-10, #FF850010); /* generated */
    --kbdefault25-secondary-1-25: var(--kbdefault25-custom-secondary-1-25, #FF850025); /* generated */

    --kbdefault25-background-1: var(--kbdefault25-custom-background-1, #FFFFFF);
    --kbdefault25-background-2: var(--kbdefault25-custom-background-2, #F6F6F6);

    --kbdefault25-alert: var(--kbdefault25-custom-alert, #9D0000);
    --kbdefault25-alert-50: var(--kbdefault25-custom-alert-50, #9D000050); /* generated */

    /* typography */

    --kbdefault25-paragraph-font: var(--kbdefault25-custom-paragraph-font, "Inter", sans-serif);
    --kbdefault25-title-font: var(--kbdefault25-custom-title-font, "Inter", sans-serif);

    /* layout */

    --kbdefault25-gap: 20px;
    --kbdefault25-gap-half: 10px;
    --kbdefault25-gap-third: 6.66px;
    --kbdefault25-gap-quarter: 5px;
    --kbdefault25-gap-double: 40px;

    --kbdefault25-radius:        var(--kbdefault25-custom-radius, 5px);
    --kbdefault25-button-radius: var(--kbdefault25-custom-button-radius, 100px);
    --kbdefault25-dialog-radius: var(--kbdefault25-custom-dialog-radius, 20px);
    
    --kbdefault25-field-gap:           var(--kbdefault25-gap);
    --kbdefault25-field-inline-margin: var(--kbdefault25-gap-double);

    --kbdefault25-max-journey-width: var(--kbdefault25-custom-max-journey-width, 1300px);

    /* journey */

    --kbdefault25-categories-selector-columns: var(--kbdefault25-DESKTOP-categories-selector-columns, 4);
    --kbdefault25-product-selector-columns:    var(--kbdefault25-DESKTOP-product-selector-columns,    5);
    --kbdefault25-design-selector-columns:     var(--kbdefault25-DESKTOP-design-selector-columns,     5);
    --kbdefault25-my-designs-columns:          var(--kbdefault25-DESKTOP-my-designs-columns,          3);

    /* columns */

    --kbdefault25-gtp-color-columns:               var(--kbdefault25-DESKTOP-gtp-color-columns,               7);
    --kbdefault25-field-design-selector-columns:   var(--kbdefault25-DESKTOP-field-design-selector-columns,   3);
    --kbdefault25-field-editor-columns:            var(--kbdefault25-DESKTOP-field-editor-columns,            5);
    --kbdefault25-field-color-tile-picker-columns: var(--kbdefault25-DESKTOP-field-color-tile-picker-columns, 7);
    --kbdefault25-field-tile-picker-columns:       var(--kbdefault25-DESKTOP-field-tile-picker-columns,       5);
    --kbdefault25-field-detached-editor-columns:   var(--kbdefault25-DESKTOP-field-detached-editor-columns,   7);
    --kbdefault25-dialog-product-columns:          var(--kbdefault25-DESKTOP-dialog-product-columns,          6);
    --kbdefault25-locker-room-design-columns:      var(--kbdefault25-DESKTOP-locker-room-design-columns,      5);

    --kbdefault25-team-store-columns:              var(--kbdefault25-DESKTOP-team-store-columns,              3);
    --kbdefault25-team-store-product-columns:      var(--kbdefault25-DESKTOP-team-store-product-columns,      3);
    --kbdefault25-team-store-images-columns:       var(--kbdefault25-DESKTOP-team-store-images-columns,       4);

    /* static */

    --kbdefault25-title-size:     var(--kbdefault25-custom-title-size, 20px);
    --kbdefault25-subtitle-size:  var(--kbdefault25-custom-subtitle-size, 16px);
    --kbdefault25-paragraph-size: var(--kbdefault25-custom-paragraph-size, 13px);

    --kbdefault25-gtp-width: 300px;
    --kbdefault25-footer-height: 80px;
    --kbdefault25-menu-width:  var(--kbdefault25-custom-menu-width, 600px);
    --kbdefault25-steps-width: var(--kbdefault25-custom-steps-width, 80px);

    --kbdefault25-material-ui-font: 'Material Icons Outlined';
}

/* --- Traditional Site Overrides --- */

body main:has(.kb-wrapper),
body div:has(.kb-wrapper) {
    padding-inline: 0 !important;
    margin-inline: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

    /* Shopify */
    
    body .kb-wrapper a:not([href]) {
        cursor: default;
    }
    body .kb-wrapper a:not([href])[ng-href],
    body .kb-wrapper a:not([href])[ng-click] {
        cursor: pointer;
    }
    .rte .select2 ul, .rte .select2 ol {
        padding-left: 0;
    }
    body .kb-wrapper * {
        letter-spacing: initial;
    }
    body .kb-wrapper img {
        border-radius: 0;
    }
    body .shopify-section div[class*="slide-in"]:has(.kb-wrapper) {
        transform: none !important;
        animation: none !important;
        opacity: 1 !important;
    }
    body .kb-wrapper a:empty, body .kb-wrapper div:empty, body .kb-wrapper ul:empty, body .kb-wrapper dl:empty {
        display: inherit;
    }

/* --- Test Site Overrides --- */

.kb-hosted-spaces-page .kb-hosted-spaces-content {
    display: block;
}

.kb-hosted-spaces-page .kb-container {
    width: 100%;
}

.kb-hosted-spaces-page .kb-wrapper .kb-customise-page.kb-2d .kb-preview-image, 
.kb-hosted-spaces-page .kb-wrapper .kb-customise-page.kb-2d .kb-3d-wrapper {
    height: calc(100vh - var(--kbdefault25-footer-height));
}

/* --- KB Utilities --- */

body .kb-wrapper .kb-flex { display: flex; }
body .kb-wrapper .kb-flex-between { justify-content: space-between; }
body .kb-wrapper .kb-overflow-hidden { overflow: hidden; }

body .kb-wrapper .kb-padding { padding: var(--kbdefault25-gap); }
body .kb-wrapper .kb-padding-top { padding-top: var(--kbdefault25-gap); }
body .kb-wrapper .kb-padding-bottom { padding-bottom: var(--kbdefault25-gap); }
body .kb-wrapper .kb-padding-left { padding-left: var(--kbdefault25-gap); }
body .kb-wrapper .kb-padding-right { padding-right: var(--kbdefault25-gap); }

body .kb-wrapper .kb-margin { margin: var(--kbdefault25-gap); }
body .kb-wrapper .kb-margin-top { margin-top: var(--kbdefault25-gap); }
body .kb-wrapper .kb-margin-bottom { margin-bottom: var(--kbdefault25-gap); }
body .kb-wrapper .kb-margin-left { margin-left: var(--kbdefault25-gap); }
body .kb-wrapper .kb-margin-right { margin-right: var(--kbdefault25-gap); }

body .kb-wrapper .kb-title { font-family: var(--kbdefault25-title-font) !important; font-size: var(--kbdefault25-title-size) !important; }
body .kb-wrapper .kb-subtitle { font-family: var(--kbdefault25-title-font) !important; font-size: var(--kbdefault25-subtitle-size) !important; }
body .kb-wrapper .kb-bold { font-weight: bold; }
body .kb-wrapper .kb-ellipse { text-wrap: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Base --- */

body .kb-wrapper ::selection {
    background-color: var(--kbdefault25-primary-1);
    color: var(--kbdefault25-background-1);
}

body .kb-wrapper {
    width: 100%;
    overflow: initial;
    background: var(--kbdefault25-background-1);
}

.kb-hosted-spaces-page .kb-wrapper .kb-partial-wrap,
body .kb-wrapper .kb-page-locker-room .kb-partial-wrap, 
body .kb-wrapper .kb-page-folder .kb-partial-wrap,
body .kb-wrapper .kb-partial-wrap {   
    float: unset;
    width: 100%;
    max-width: 3000px;
    margin: 0 auto;
}

/* text */
body .kb-wrapper h1, body .kb-wrapper h2, body .kb-wrapper h3, 
body .kb-wrapper h4, body .kb-wrapper h5, body .kb-wrapper h6, 
body .kb-wrapper input, body .kb-wrapper textarea, body .kb-wrapper p, 
body .kb-wrapper li, body .kb-wrapper div, body .kb-wrapper q, 
body .kb-wrapper cite, body .kb-wrapper blockquote, body .kb-wrapper span,
body .kb-wrapper a, body .kb-wrapper a:hover {
    font-family: var(--kbdefault25-paragraph-font) !important;
    color: var(--kbdefault25-primary-1);
}

body .kb-wrapper h1, body .kb-wrapper h2, body .kb-wrapper h3 {
    font-size: var(--kbdefault25-title-size);
}

body .kb-wrapper h4, body .kb-wrapper h5, body .kb-wrapper h6 {
    font-size: var(--kbdefault25-subtitle-size);
}

body .kb-wrapper input, body .kb-wrapper textarea, body .kb-wrapper p, 
body .kb-wrapper li, body .kb-wrapper div, body .kb-wrapper q, 
body .kb-wrapper cite, body .kb-wrapper blockquote, body .kb-wrapper span,
body .kb-wrapper a {
    font-size: var(--kbdefault25-paragraph-size);
}

/* --- Buttons --- */

body .kb-wrapper .kb-buttons-contents {
    display: contents;
}

/* buttons base */
body .kb-wrapper button.kb-button,
body .kb-wrapper label.kb-button,
body .kb-wrapper a.kb-button,
body .kb-wrapper span.kb-button,
body .kb-wrapper .kb-editor-button,
body .kb-wrapper .kb-button:visited,
body .kb-wrapper .kb-button:link,
body .kb-wrapper .kb-locker-room-buttons .kb-button,

    /* missing .kb-button */
    body .kb-wrapper .kb-editor-placement .kb-editor-add,
    body .kb-wrapper .kb-editor-placement .kb-upload-clipart,
    body .kb-wrapper .kb-editor-placement .kb-remove-text-item,
    body .kb-wrapper .kb-editor-placement .kb-upload-replace-clipart,
    body .kb-wrapper .kb-editor-font-button.kb-editor-bold,
    body .kb-wrapper .kb-editor-font-button.kb-editor-italic,
    body .kb-wrapper .kb-final-category-header-wrapper .kb-final-cta-list li a,
    body .kb-wrapper .kb-team-stores-product-customize .kb-team-stores-product-field-upload-image-wrapper .kb-button,
    body .kb-wrapper .kb-team-stores-product-customize .kb-team-stores-product-field-clipart-wrapper .kb-team-stores-product-field-remove-clipart,
    body .kb-wrapper .kb-dialog .kb-locker-room-buttons .kb-button,
    body .kb-wrapper .kb-custom-form .kb-file-upload-clear,
    body .kb-wrapper .kb-dialog .kb-items-dialog-open-button,
    body .kb-wrapper .kb-final-button,
    body .kb-wrapper .kb-locker-room-page .kb-multi-select-clear,
    body .kb-wrapper .kb-locker-room-folder-actions a,
    body .kb-wrapper .kb-locker-room-folder-actions label,
    body .kb-wrapper .kb-design-completion-dialog .kb-form-links-item a

{
    font-size: var(--kbdefault25-paragraph-size);
    font-weight: normal;
    padding: var(--kbdefault25-gap-half) var(--kbdefault25-gap);
    background: var(--kbdefault25-primary-2-25);
    color: var(--kbdefault25-primary-1);
    border: none;
    margin: 0;
    box-shadow: none;
    opacity: 1;
    width: max-content;
    transition: 
        200ms ease-in-out background-color, 
        200ms ease-in-out color, 
        200ms ease-in-out box-shadow;
    border-radius: var(--kbdefault25-button-radius);
    position: relative;
    text-decoration: none;
}

/* button hover */
body .kb-wrapper .kb-editor-button:hover,
body .kb-wrapper .kb-button:hover:not([disabled]),
body .kb-wrapper button.kb-button:hover,
body .kb-wrapper label.kb-button:hover,
body .kb-wrapper a.kb-button:hover,
body .kb-wrapper span.kb-button:hover,
body .kb-wrapper .kb-locker-room-buttons .kb-button:hover,

    /* missing .kb-button */
    body .kb-wrapper .kb-editor-placement .kb-editor-add:hover,
    body .kb-wrapper .kb-editor-placement .kb-upload-clipart:hover,
    body .kb-wrapper .kb-editor-placement .kb-remove-text-item:hover,
    body .kb-wrapper .kb-editor-placement .kb-upload-replace-clipart:hover,
    body .kb-wrapper .kb-editor-font-button.kb-editor-bold:hover,
    body .kb-wrapper .kb-editor-font-button.kb-editor-italic:hover,
    body .kb-wrapper .kb-final-category-header-wrapper .kb-final-cta-list li a:hover,
    body .kb-wrapper .kb-team-stores-product-customize .kb-team-stores-product-field-upload-image-wrapper .kb-button:hover,
    body .kb-wrapper .kb-team-stores-product-customize .kb-team-stores-product-field-clipart-wrapper .kb-team-stores-product-field-remove-clipart:hover,
    body .kb-wrapper .kb-custom-form .kb-file-upload-clear:hover,
    body .kb-wrapper .kb-dialog .kb-items-dialog-open-button:hover,
    body .kb-wrapper .kb-final-button:hover,
    body .kb-wrapper .kb-locker-room-folder-actions a:hover,
    body .kb-wrapper .kb-locker-room-folder-actions label:hover,
    body .kb-wrapper .kb-design-completion-dialog .kb-form-links-item a:hover

{
    background: var(--kbdefault25-primary-2-50);
    color: var(--kbdefault25-primary-1);
}

body .kb-wrapper .kb-button:active {
    top: unset;
    position: initial;
}

/* secondary */
body .kb-wrapper .kb-button.kb-button-secondary:not(.kb-button-inverse),
body .kb-wrapper .kb-button-secondary.kb-button-inverse:hover,

    /* missing .kb-button-secondary */
    body .kb-wrapper .kb-dialog .kb-dialog-button-ok,
    body .kb-wrapper .kb-dialog .kb-dialog-button-confirm,
    body .kb-wrapper .kb-email-to-friend-form-dialog .kb-submit-email-button,
    body .kb-wrapper .kb-button.kb-button-single-item-checkout-buy-now,
    body .kb-wrapper .kb-button.kb-button-single-item-checkout-add-to-cart:hover,
    body .kb-wrapper .kb-button.kb-team-stores-product-buy-now,
    body .kb-wrapper .kb-button.kb-team-stores-product-add-to-cart:hover
    
{
    background-color: var(--kbdefault25-secondary-1);
    box-shadow: 0 0 0 calc(var(--kbdefault25-gap) / 10) var(--kbdefault25-secondary-1) inset;
    color: var(--kbdefault25-background-1);
}
body .kb-wrapper .kb-button.kb-button-secondary:not(.kb-button-inverse):hover,
body .kb-wrapper .kb-button-secondary.kb-button-inverse,

    /* missing .kb-button-secondary */
    body .kb-wrapper .kb-dialog .kb-dialog-button-ok:hover,
    body .kb-wrapper .kb-dialog .kb-dialog-button-confirm:hover,
    body .kb-wrapper .kb-email-to-friend-form-dialog .kb-submit-email-button:hover,
    body .kb-wrapper .kb-button.kb-button-single-item-checkout-buy-now:hover,
    body .kb-wrapper .kb-button.kb-button-single-item-checkout-add-to-cart,
    body .kb-wrapper .kb-button.kb-team-stores-product-buy-now:hover,
    body .kb-wrapper .kb-button.kb-team-stores-product-add-to-cart
    
{
    background-color: transparent;
    box-shadow: 0 0 0 calc(var(--kbdefault25-gap) / 10) var(--kbdefault25-secondary-1) inset;
    color: var(--kbdefault25-secondary-1);
}

/* danger */
body .kb-wrapper .kb-button.kb-button-danger,
body .kb-wrapper .kb-button.kb-button-danger:hover,

    /* missing .kb-button-danger */ 
    body .kb-wrapper .kb-detached-editor-library-placements-dialog .kb-delete-detached-image,
    body .kb-wrapper .kb-detached-editor-library-placements-dialog .kb-delete-detached-image:hover,
    body .kb-wrapper a.kb-button.kb-file-upload-clear,
    body .kb-wrapper .kb-confirm-remove-all-basket-items-dialog .kb-reset-design-button,
    body .kb-wrapper .kb-locker-room-page .kb-delete-custom-designs-button,
    body .kb-wrapper .kb-locker-room-page .kb-delete-images-button,
    body .kb-wrapper .kb-team-stores-product-customize .kb-team-stores-product-field-remove-image.kb-button
    
{
    border: 2px solid var(--kbdefault25-alert);
    background-color: var(--kbdefault25-alert);
    color: var(--kbdefault25-background-1);
}
body .kb-wrapper .kb-button.kb-button-danger:hover,

    /* missing .kb-button-danger */ 
    body .kb-wrapper .kb-detached-editor-library-placements-dialog .kb-delete-detached-image:hover,
    body .kb-wrapper a.kb-button.kb-file-upload-clear:hover,
    body .kb-wrapper .kb-confirm-remove-all-basket-items-dialog .kb-reset-design-button:hover,
    body .kb-wrapper .kb-locker-room-page .kb-delete-custom-designs-button:hover,
    body .kb-wrapper .kb-locker-room-page .kb-delete-images-button:hover,
    body .kb-wrapper .kb-team-stores-product-customize .kb-team-stores-product-field-remove-image.kb-button:hover

{
    background-color: var(--kbdefault25-background-1);
    color: var(--kbdefault25-alert);
}

    /* inverted */
    body .kb-wrapper .kb-locker-room-page .kb-multi-select-clear-button {
        border: 2px solid var(--kbdefault25-alert);
        background-color: transparent;
        color: var(--kbdefault25-alert);
    }
    body .kb-wrapper .kb-locker-room-page .kb-multi-select-clear-button:hover {
        background-color: var(--kbdefault25-alert);
        color: var(--kbdefault25-background-1);
    }

/* --- Elements / Components --- */

/* lists */
body .kb-wrapper ul,
body .kb-wrapper li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

body .kb-wrapper [ng-bind-html] ol,
body .kb-wrapper [ng-bind-html] ul {
    padding: 0 0 0 20px !important;
}

body .kb-wrapper [ng-bind-html] ul li {
    list-style: circle !important;
}

/* checkmark */
body .kb-wrapper .kb-tile-picker-radio-selected::after, 
body .kb-wrapper .kb-tile-picker-radio:checked + .kb-tile-picker-tile::after, 
body .kb-wrapper .kb-tile-picker-multiple .kb-selected .kb-tile-picker-tile::after {
    content: none !important;
}

/* disabled */
body .kb-wrapper a.kb-disabled,
body .kb-wrapper button.kb-disabled,
body .kb-wrapper button[disabled="disabled"],
body .kb-wrapper label.kb-disabled,
body .kb-wrapper label[disabled="disabled"],
body .kb-wrapper div.kb-disabled,
body .kb-wrapper div[disabled="disabled"],
body .kb-wrapper input.kb-disabled,
body .kb-wrapper input[disabled="disabled"],
body .kb-wrapper span.kb-disabled,
body .kb-wrapper span[disabled="disabled"] {
    opacity: .5 !important;
    pointer-events: none;
}

/* required */
body .kb-wrapper .kb-required:after {
    color: var(--kbdefault25-alert);
    font-weight: bold;
    margin-left: 2px;
}

/* radio & checkbox */
body .kb-wrapper .kb-editor-toggle-color-radio-buttons label,
body .kb-wrapper .kb-editor-toggle-stroke-radio-buttons label,
body .kb-wrapper .kb-locker-room-page .kb-multi-select,
body .kb-wrapper input[type="radio"] ~ label,
body .kb-wrapper [form-field-checkbox] > label,
body .kb-wrapper div[ng-switch-when="Checkbox"] .kb-custom-form-field-wrap,
body .kb-wrapper div[ng-switch-when="Checkbox"] .kb-wizard-form-field {
    display: inline-flex;
    align-items: center;
    gap: var(--kbdefault25-gap-half);
    color: var(--kbdefault25-primary-1);
    position: relative;
}

body .kb-wrapper .kb-editor-toggle-color-radio-buttons label::before,
body .kb-wrapper .kb-editor-toggle-stroke-radio-buttons label::before,
body .kb-wrapper .kb-locker-room-page .kb-multi-select::before,
body .kb-wrapper input[type="radio"] ~ label::before,
body .kb-wrapper [form-field-checkbox] > label::before,
body .kb-wrapper .kb-cross-sells .kb-cross-sell .kb-cross-sell-checkbox, 
body .kb-wrapper .kb-cross-sells .kb-cross-sell .kb-cross-sell-checkbox-checked,
body .kb-wrapper div[ng-switch-when="Checkbox"] .kb-custom-form-field-wrap::before,
body .kb-wrapper div[ng-switch-when="Checkbox"] .kb-wizard-form-field::before {
    content: " ";
    position: relative;
    display: inline-block;
    height: var(--kbdefault25-paragraph-size);
    width: var(--kbdefault25-paragraph-size);
    background-color: var(--kbdefault25-background-2);
    border: 4px solid var(--kbdefault25-background-2);
    box-shadow: 0 0 0 2px var(--kbdefault25-primary-1);
    border-radius: calc(var(--kbdefault25-radius) + 1px);
    cursor: pointer;
}

body .kb-wrapper .kb-editor-toggle-color-radio-buttons label::before,
body .kb-wrapper .kb-editor-toggle-stroke-radio-buttons label::before,
body .kb-wrapper input[type="radio"] ~ label::before {
    border-radius: 100%;
}

body .kb-wrapper .kb-editor-toggle-color-radio-buttons label.kb-disabled::before,
body .kb-wrapper .kb-editor-toggle-color-radio-buttons label[disabled]::before,
body .kb-wrapper .kb-editor-toggle-stroke-radio-buttons label.kb-disabled::before,
body .kb-wrapper .kb-editor-toggle-stroke-radio-buttons label[disabled]::before {
    cursor: not-allowed;
    opacity: .5;
}

body .kb-wrapper .kb-editor-toggle-color-radio-buttons label:has(input[type="radio"]:checked)::before,
body .kb-wrapper .kb-editor-toggle-stroke-radio-buttons label:has(input[type="radio"]:checked)::before,
body .kb-wrapper .kb-locker-room-page .kb-multi-select.kb-multi-select-selected::before,
body .kb-wrapper input[type="radio"]:checked ~ label::before,
body .kb-wrapper input[type="radio"].kb-selected ~ label::before,
body .kb-wrapper [form-field-checkbox] > label:has(input:checked)::before,
body .kb-wrapper div[ng-switch-when="Checkbox"] .kb-custom-form-field-wrap:has(input:checked)::before,
body .kb-wrapper div[ng-switch-when="Checkbox"] .kb-wizard-form-field:has(input:checked)::before {
    background-color: var(--kbdefault25-secondary-1);
}

body .kb-wrapper input[type="radio"],
body .kb-wrapper input[type="checkbox"] {
    display: none;
}

body .kb-wrapper div[ng-switch-when="Checkbox"] .kb-custom-form-field-wrap input,
body .kb-wrapper div[ng-switch-when="Checkbox"] .kb-wizard-form-field input {
    display: block;
    margin: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}

/* inputs */
body .kb-wrapper .kb-text-box,
body .kb-wrapper textarea,
body .kb-wrapper input:not([type]),
body .kb-wrapper input[type="text"],
body .kb-wrapper input[type="email"],
body .kb-wrapper input[type="number"],
body .kb-wrapper input[type="text"].ng-valid:not(form):not([ng-form]):not(div),
body .kb-wrapper input[type="number"].ng-valid:not(form):not([ng-form]):not(div),
body .select2-dropdown-open .select2-search input {
    border: 2px solid var(--kbdefault25-primary-1) !important;
    border-radius: var(--kbdefault25-radius);
    padding: var(--kbdefault25-gap-quarter) var(--kbdefault25-gap-half);
    width: 100%;
    background-color: transparent;
    color: var(--kbdefault25-primary-1);
    outline: none;
    box-shadow: none !important;
    font-size: var(--kbdefault25-paragraph-size);
    box-sizing: border-box;
}

body .kb-wrapper .kb-text-box.kb-integer,
body .kb-wrapper input[type="number"],
body .kb-wrapper input[type="number"].ng-valid:not(form):not([ng-form]):not(div) {
    width: min(80px, 100%);
}

body .kb-wrapper textarea.kb-text-box,
body .kb-wrapper textarea {
    resize: vertical;
    overflow-y: auto;
}

body .kb-wrapper .kb-editor-placed-text-selected .kb-editor-text,
body .kb-wrapper textarea:focus,
body .kb-wrapper input:focus,
body .kb-wrapper select:focus,
body .select2-dropdown-open .select2-search input:focus {
    outline: 2px solid var(--kbdefault25-secondary-1) !important;
}

body .kb-wrapper .kb-loading-background {
    min-height: unset;
    min-width: unset;
    background: transparent;
    animation: loading-background linear 2000ms infinite;
}

@keyframes loading-background {
    0% {
        background: transparent;
    }
    50% {
        background: var(--kbdefault25-primary-2);
    }
    100% {
        background: transparent;
    }
}

/* select */
body .kb-wrapper select,
body .kb-wrapper select.ng-valid:not(form):not([ng-form]):not(div),
body .kb-wrapper select.ng-valid:not(form):not([ng-form]):not(div):focus {
    border: 2px solid var(--kbdefault25-primary-1);
    border-radius: var(--kbdefault25-radius);
    padding: calc(var(--kbdefault25-gap-quarter) - 0.5px) var(--kbdefault25-gap-half);
    width: 100%;
    max-width: -moz-available !important;
    background-color: transparent;
    color: var(--kbdefault25-primary-1);
    outline: none;
    box-shadow: none;
}

body .ui-select-container.open .ui-select-match::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

body .kb-wrapper .ui-select-placeholder {
    height: 37px !important;
    display: block;
}

body .ui-select-container.select2.direction-up .ui-select-dropdown.select2-drop {
    margin-top: 2px;
}

body .search-container input[type="search"] {
    margin: 0 10px;
    width: calc(100% - 20px) !important;
    margin-bottom: 10px;
}

/* scrollbar */
@-moz-document url-prefix() {
    body .kb-wrapper div {
        scrollbar-width: none;
        scrollbar-color: var(--kbdefault25-primary-1-25);
    }

    body .kb-wrapper div:hover {
        scrollbar-width: thin;
    }
}

body .kb-wrapper div {
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

body .kb-wrapper div::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

body .kb-wrapper div::-webkit-scrollbar-track {
    background-color: transparent;
}

body .kb-wrapper div::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
}

body .kb-wrapper div:hover::-webkit-scrollbar-track,
body .kb-wrapper div:hover::-webkit-scrollbar-thumb {
    background-color: var(--kbdefault25-primary-1-25);
}

/* clear before/after */
body .kb-wrapper .kb-editor-placement-image[ng-switch-when="clipart"] .kb-editor-image-library::before,
body .kb-wrapper .kb-editor-placement-image[ng-switch-when="clipart"] .kb-editor-image-library::after,
body .kb-wrapper .kb-editor-placement-image[ng-switch-when="image"] .kb-editor-image-library::before,
body .kb-wrapper .kb-editor-placement-image[ng-switch-when="image"] .kb-editor-image-library::after,
body .kb-wrapper .kb-detached-editor-library .kb-detached-editor-library-uploaded::before,
body .kb-wrapper .kb-detached-editor-library .kb-detached-editor-library-uploaded::after,
body .kb-wrapper .kb-editor-placement .kb-editor-info::before,
body .kb-wrapper .kb-editor-placement .kb-editor-info::after,
body .kb-wrapper .kb-html-tile-picker::before,
body .kb-wrapper .kb-html-tile-picker::after {
    content: none;
}

/* --- States --- */

/* hovered */
body .kb-wrapper .kb-customise-design-selector .kb-customise-design-selector-design,
body .kb-wrapper .kb-tile-picker-color .kb-tile-picker-tile,
body .kb-wrapper .kb-tile-picker .kb-tile-picker-tile,
body .kb-wrapper .kb-editor-placement .kb-tile-picker-base .kb-tile-picker-radio-selected,
body .kb-wrapper .kb-editor-placement-image .kb-editor-image-library .kb-editor-add-image,
body .kb-wrapper .kb-detached-editor-library .kb-editor-image, 
body .kb-wrapper .kb-editor-placement-image .kb-editor-placed-images .kb-editor-image:not(.kb-editor-placed-image-selected),
body .kb-wrapper .kb-dialog .kb-related-product,
body .kb-wrapper .kb-dialog .kb-cross-sell,
body .kb-wrapper .kb-dialog .kb-design-selector-design,
body .kb-wrapper .kb-form-field-image-library-images .kb-form-field-image-library-image {
    transition: 200ms ease-in-out box-shadow;
}

body .kb-wrapper .kb-customise-design-selector .kb-customise-design-selector-design:not(.kb-customise-design-selector-selected):hover,
body .kb-wrapper .kb-tile-picker-color .kb-tile-picker-tile:hover,
body .kb-wrapper .kb-tile-picker .kb-tile-picker-tile:hover,
body .kb-wrapper .kb-editor-placement .kb-tile-picker-base .kb-tile-picker-radio-selected:hover,
body .kb-wrapper .kb-editor-placement-image .kb-editor-image-library .kb-editor-add-image:hover, 
body .kb-wrapper .kb-detached-editor-library .kb-editor-image:hover,
body .kb-wrapper .kb-editor-placement-image .kb-editor-placed-images .kb-editor-image:not(.kb-editor-placed-image-selected):hover,
body .kb-wrapper .kb-dialog .kb-related-product:hover,
body .kb-wrapper .kb-dialog .kb-cross-sell:hover,
body .kb-wrapper .kb-dialog .kb-design-selector-design:hover,
body .kb-wrapper .kb-form-field-image-library-images .kb-form-field-image-library-image:hover {
    box-shadow: 0 0 0 4px var(--kbdefault25-background-1), 0 0 0 6px var(--kbdefault25-primary-1-50) !important;
}

/* selected */
body .kb-wrapper .kb-product-aspect-selector .kb-product-aspect.kb-product-aspect-selected a,
body .kb-wrapper .kb-customise-design-selector .kb-customise-design-selector-selected,
body .kb-wrapper .kb-tile-picker .kb-selected .kb-tile-picker-tile,
body .kb-wrapper .kb-tile-picker-color .kb-tile-picker-radio:checked ~ .kb-tile-picker-tile,
body .kb-wrapper .kb-tile-picker .kb-tile-picker-radio:checked ~ .kb-tile-picker-tile,
body .kb-wrapper .kb-editor-placement .kb-tile-picker-base .kb-tile-picker-radio-selected,
body .kb-wrapper .kb-editor-placement .kb-editor-colors .kb-tile-picker-radio-selected,
body .kb-wrapper .kb-editor-placed-image-selected,
body .kb-wrapper .kb-dialog .kb-design-selector-design.kb-design-selector-selected {
    box-shadow: 0 0 0 4px var(--kbdefault25-background-1), 0 0 0 6px var(--kbdefault25-secondary-1) !important;
    transition: 200ms ease-in-out box-shadow;
}

body .kb-wrapper .kb-editor-placement .kb-editor-font-button.kb-editor-italic.kb-editor-font-button-selected,
body .kb-wrapper .kb-editor-placement .kb-editor-font-button.kb-editor-bold.kb-editor-font-button-selected,
body .kb-wrapper .kb-final-category-preview-inner .kb-basket-item-buttons .kb-basket-item-button-selected {
    background-color: var(--kbdefault25-secondary-1);
    color: var(--kbdefault25-background-1);
}

/* item loading */
body .kb-wrapper .kb-final-category-preview-inner .kb-basket-image-gallery:has(.kb-basket-image-gallary-image-selected[src^="data:"])::before
{
    content: url(https://api.kitbuilder.co.uk/client/css/skin/spinner.svg);
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
}

body .kb-wrapper .kb-add-to-cart-dialog .kb-building-product-image::after,
body .kb-wrapper .kb-design-completion-quote .kb-form-links-download-button.kb-disabled::after {
    content: " ";
    display: inline-block;
    border: var(--kb-loading-width) solid var(--kb-loading-color);
    border-top-color: transparent;
    border-right-color: transparent;
    border-radius: 100%;
    position: relative;
    margin-left: 5px;
    right: 0;
    top: 1px;
    width: var(--kb-loading-size);
    height: var(--kb-loading-size);
    animation: infinite linear var(--kb-loading-speed) spinning;
 
    --kb-loading-speed: 500ms;
    --kb-loading-size: 8px;
    --kb-loading-width: 1px;
    --kb-loading-color: var(--kbdefault25-primary-1);
}

body .kb-wrapper .kb-page-loading > div,
body .kb-wrapper .kb-page-loading > a,
body .kb-wrapper [add-to-cart-progress-bar] {
    display: none !important;
}

/* customize page loading */
body .kb-wrapper.kb-loading-customize-data {
    position: relative;
}

body .kb-wrapper.kb-loading-customize-data .kb-page-customize .kb-partial-wrap {
    visibility: hidden;
    opacity: 0;
}

body .kb-wrapper.kb-loading-customize-data:has(.kb-customise-page-error) .kb-page-customize .kb-partial-wrap,
body .kb-wrapper .kb-page-customize .kb-partial-wrap {
    visibility: visible;
    opacity: 1;
    transition:
        visibility ease-in-out 500ms,
        opacity ease-in-out 500ms;
}

@keyframes spinning {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}

body .kb-wrapper .kb-loading-animation {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    display: none;
    transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out, display 200ms ease-in-out;
}

body .kb-wrapper .kb-loading-animation #kbtheme25-loading-animation {
    width: 150px;
    height: 150px;
    margin: 0 auto;
}

body .kb-wrapper .kb-loading-animation #kbtheme25-loading-animation path {
    stroke: var(--kbdefault25-primary-1);
    fill: var(--kbdefault25-primary-1-25);
}

body .kb-wrapper .kb-loading-animation .kb-loading-animation-title {
    font-size: var(--kbdefault25-title-size);
    font-family: var(--kbdefault25-title-font);
    color: var(--kbdefault25-primary-1);
    font-weight: bold;
}

body .kb-wrapper.kb-loading-customize-data .kb-loading-animation {
    opacity: 1;
    visibility: visible;
    display: block;
    transition-duration: 200ms, 200ms, 0ms;
}

/* --- Tooltips --- */

body .kb-wrapper .kb-tooltip {
    position: relative;
    margin: 0;
}

body .kb-wrapper .kb-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 50%;
    right: calc(100% + var(--kbdefault25-gap));
    transform: translateY(-50%);
    width: max-content;
    color: var(--kbdefault25-primary-1);
    background-color: var(--kbdefault25-primary-2);
    border-radius: var(--kbdefault25-radius);
    padding: var(--kbdefault25-gap-half) var(--kbdefault25-gap);
    box-shadow: 0 0 20px 0 var(--kbdefault25-primary-1-25);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: 
        opacity 200ms ease-in-out, 
        visibility 200ms ease-in-out;
}

body .kb-wrapper .kb-tooltip:hover::after {
    opacity: 1;
    visibility: visible;
}

/* --- Notifications --- */

body .kb-wrapper .kb-notifications {
    right: 50%;
    transform: translateX(50%);
    top: var(--kbdefault25-gap);
}

body .kb-wrapper .kb-notifications .kb-alert {
    font-size: var(--kbdefault25-paragraph-size);
    margin-bottom: var(--kbdefault25-gap-half);
    padding: var(--kbdefault25-gap-half) var(--kbdefault25-gap);
    border-radius: var(--kbdefault25-radius);
    box-shadow: 0 0 20px 0 var(--kbdefault25-primary-1-25);
}
body .kb-wrapper .kb-notifications .kb-alert * {
    color: currentColor;
}

body .kb-wrapper .kb-notifications .kb-alert.kb-alert-success {
    background-color: var(--kbdefault25-primary-2);
    color: var(--kbdefault25-primary-1);
    border: none;
}

body .kb-wrapper .kb-notifications .kb-alert.kb-alert-warning {
    background-color: var(--kbdefault25-secondary-1);
    color: var(--kbdefault25-background-1);
    border: none;
}

body .kb-wrapper .kb-notifications .kb-alert.kb-alert-error {
    background-color: var(--kbdefault25-alert);
    color: var(--kbdefault25-background-1);
    border: none;
}

/* --- Description Previews --- */

body .kb-wrapper .kb-description-preview {
    height: calc((calc(var(--kbdefault25-paragraph-size) + 3px)) * var(--description-preview-rows));
    line-height: calc(calc(var(--kbdefault25-paragraph-size) + 3px));
    color: var(--kbdefault25-primary-1-50);
    overflow: hidden;
    position: relative;
}

body .kb-wrapper .kb-description-preview.kb-description-truncated::after {
    content: " ";
    position: absolute;
    bottom: 0;
    right: 0;
    height: calc(calc(var(--kbdefault25-paragraph-size) + 3px));
    width: calc(var(--description-preview-fade) + 50px);
    background-image: linear-gradient(to left, var(--kbdefault25-background-1) var(--description-preview-fade), transparent);
    pointer-events: none;
}

body .kb-wrapper .kb-description-preview .kb-description-see-more {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
}

body .kb-wrapper .kb-description-preview .kb-description-see-more:hover {
    text-decoration: underline;
}

/* --- Hidden Elements --- */

body .kb-wrapper .kb-nav-panel,
body .kb-wrapper .kb-category-page .kb-catalog-product-heading,
body .kb-wrapper .kb-buy-quote-actions .kb-form-links li .kb-icon,
body .kb-wrapper .kb-change-view-buttons,
body .kb-wrapper .kb-change-design-button,
body .kb-wrapper .kb-customise-page .kb-breadcrumbs,
body .kb-wrapper .kb-customise-page .kb-customise-product-heading, /* -------------------------------------------------- moved location (header) */
body .kb-wrapper .kb-product-lead-time, /* ----------------------------------------------------------------------------- moved location (footer) */
body .kb-wrapper .kb-navigation-buttons .kb-reset-design-button, /* ---------------------------------------------------- moved location (action bar) */
body .kb-wrapper .kb-navigation-buttons .kb-button-finish, /* ---------------------------------------------------------- moved location (footer) */
body .kb-wrapper .kb-customise-page .kb-preview-design-name, /* -------------------------------------------------------- moved location (header) */
body .kb-wrapper .kb-preview-image .kb-history-controls, /* ------------------------------------------------------------ moved location (action bar) */
body .kb-wrapper .kb-change-view-buttons, /* --------------------------------------------------------------------------- moved location (action bar) */
body .kb-wrapper .kb-wizard-step .kb-form-links, /* -------------------------------------------------------------------- moved location (completion popup) */
body .kb-wrapper .kb-team-details .kb-tdi-description-top, /* ---------------------------------------------------------- use bottom description */
body .kb-wrapper .kb-team-details-enter-quantities .kb-tdi, /* --------------------------------------------------------- hidden when quantities */
body .kb-wrapper .kb-customise-edit-panel .kb-single-item-checkout .kb-buttons .kb-button:not(.kb-button-size-chart), /* moved to elsewhere */
body .kb-wrapper .kb-preview-image .kb-product-aspect-selector, /* ----------------------------------------------------- moved location (slot action bar) */
body .kb-wrapper .kb-editor-placement .kb-editor-message-upper,
body .kb-wrapper .kb-editor-placement .kb-editor-placed-images-heading:empty,
body .kb-wrapper .kb-detached-editor-library-wrapper br,
body .kb-wrapper .kb-final-cta-header,
body .kb-wrapper .kb-final-cta-list li[kb-settings-show="kb.final_page.show_continue_shopping"],
body .kb-wrapper .kb-final-cta-list .kb-final-remove-all,
body .kb-wrapper .kb-final-category-header-wrapper .kb-final-cta-list li span,
body .kb-wrapper .kb-team-stores-product-customize .kb-team-stores-cart-buttons, /* ------------------------------------ moved location (footer) */
body .kb-wrapper .kb-team-stores-product-header .kb-team-stores-product-price {
    display: none !important;
}

/* --- Breadcrumb --- */

body .kb-wrapper .kb-breadcrumb, 
body .kb-wrapper .kb-breadcrumb a,
body .kb-wrapper .kb-breadcrumb-selected,
body .kb-wrapper .kb-breadcrumb-selected span {
    color: var(--kbdefault25-primary-2);
    font-size: var(--kbdefault25-paragraph-size);
}

body .kb-wrapper .kb-breadcrumbs .kb-breadcrumb::after {
    content: "/";
    margin: 0 3px 0 5px;
    font-weight: normal;
    top: 0;
}

body .kb-wrapper .kb-breadcrumb-selected {
    cursor: default;
    font-weight: bold;
}

/* --- Joruney --- */

body .kb-wrapper .kb-journey-before-customize:has(> .kb-page-content),
body .kb-wrapper .kb-journey-before-customize > div {
    display: flex;
    flex-wrap: wrap;
}

body .kb-wrapper .kb-categories-page,
body .kb-wrapper .kb-category-page,
body .kb-wrapper .kb-designs-page,
body .kb-wrapper .kb-team-stores-home,
body .kb-wrapper .kb-team-stores-catalog {
    width: 100%;
    padding: var(--kbdefault25-gap);
    box-sizing: border-box;
    background-color: var(--kbdefault25-background-1);
}

body .kb-wrapper .kb-journey-before-customize .kb-breadcrumbs,
body .kb-wrapper .kb-journey-before-customize > .kb-widget,
body .kb-wrapper .kb-journey-before-customize .kb-page-content {
    width: 100%;
}

body .kb-wrapper .kb-journey-title-wrapper {
    margin-bottom: var(--kbdefault25-gap-half);
}

body .kb-wrapper .kb-journey-title {
    font-weight: bold;
}

body .kb-wrapper .kb-journey-item-count,
body .kb-wrapper .kb-journey-title {
    font-size: var(--kbdefault25-title-size);
    font-family: var(--kbdefault25-title-font) !important;
    color: var(--kbdefault25-primary-1);
}

body .kb-wrapper .kb-journey-item-count {
    margin-left: var(--kbdefault25-gap);
    padding-left: var(--kbdefault25-gap);
    border-left: 1px solid var(--kbdefault25-primary-1);
}

body .kb-wrapper .kb-categories-page .kb-categories,
body .kb-wrapper .kb-category-page .kb-categories,
body .kb-wrapper .kb-designs-page .kb-designs,
body .kb-wrapper .kb-team-stores-home .kb-team-stores-catalogs,
body .kb-wrapper .kb-team-stores-catalog .kb-page-content .kb-team-stores-products {
    display: grid;
    grid-template-columns: repeat(var(--kbdefault25-journey-item-columns), 1fr);
    max-width: var(--kbdefault25-max-journey-width);
    margin: var(--kbdefault25-gap-double) auto 0 auto !important;
    gap: var(--kbdefault25-gap);
    height: fit-content;
}

body .kb-wrapper .kb-categories-page .kb-categories > li,
body .kb-wrapper .kb-category-page .kb-categories > li,
body .kb-wrapper .kb-designs-page .kb-designs > li,
body .kb-wrapper .kb-team-stores-home .kb-team-stores-catalogs > li,
body .kb-wrapper .kb-team-stores-catalog .kb-content .kb-team-stores-products > li {
    display: inline-grid;
    width: 100%;
}

body .kb-wrapper .kb-home-navigation-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--kbdefault25-gap-half);
    max-width: var(--kbdefault25-max-journey-width);
    margin: var(--kbdefault25-gap-double) auto 0 auto;
    padding-bottom: var(--kbdefault25-gap-double);
    border-bottom: 1px solid var(--kbdefault25-primary-2);
}

body .kb-wrapper ul + .kb-home-navigation-options {
    padding-bottom: 0;
    padding-top: var(--kbdefault25-gap-double);
    border-bottom: none;
    border-top: 1px solid var(--kbdefault25-primary-2);
    margin-bottom: var(--kbdefault25-gap-double);
}

    /* --- Global Tile Picker --- */

    body .kb-wrapper .kb-customise-page > kb-global-kit {
        display: none !important;
    }
    
    body .kb-wrapper kb-global-kit {
        width: 100%;
    }

    body .kb-wrapper.kb-global-kit-available:has(.kb-global-kit-tile-picker-shown) .kb-page-content {
        width: calc(100% - var(--kbdefault25-gtp-width) - var(--kbdefault25-gap));
        height: fit-content;
    }

    body .kb-wrapper.kb-global-kit-available .kb-global-kit {
        width: var(--kbdefault25-gtp-width);
        margin-right: var(--kbdefault25-gap);
        background-color: var(--kbdefault25-background-2);
        border-radius: var(--kbdefault25-radius);
        margin-top: var(--kbdefault25-gap-double);
        overflow: unset;
        padding: 0;
    }

    body .kb-wrapper.kb-global-kit-available .kb-global-kit-wrapper-bottom .kb-global-kit {
        margin-left: var(--kbdefault25-gap);
        margin-right: 0;
    }

    body .kb-wrapper .kb-global-kit-fields {
        padding: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

        /* closed */

        body .kb-wrapper .kb-global-kit:not(.kb-global-kit-tile-picker-shown) {
            width: 0;
            margin-top: 0;
        }

        body .kb-wrapper .kb-global-kit:not(.kb-global-kit-tile-picker-shown) .kb-global-kit-fields {
            position: fixed;
            height: fit-content;
            bottom: var(--kbdefault25-gap);
            left: var(--kbdefault25-gap);
            border-radius: var(--kbdefault25-radius);
            background-color: var(--kbdefault25-primary-1);
            box-shadow: 0 0 20px 0 var(--kbdefault25-primary-1-50);
            overflow: hidden;
            z-index: 1;
        }
    
        body .kb-wrapper .kb-global-kit-wrapper-bottom .kb-global-kit:not(.kb-global-kit-tile-picker-shown) .kb-global-kit-fields {
            right: var(--kbdefault25-gap);
            left: unset;
        }

            /* previews */
            body .kb-wrapper .kb-global-kit-preview-wrapper {
                display: flex;
            }
            
            body .kb-wrapper .kb-global-kit-preview-wrapper .kb-global-kit-preview-color {
                height: var(--kbdefault25-gap);
                margin: 0;
                padding: 0;
                flex-grow: 1;
            }

        /* header */
        body .kb-wrapper .kb-global-kit-tile-picker-shown .kb-global-kit-tile-picker-header {
            border-radius: var(--kbdefault25-radius) var(--kbdefault25-radius) 0 0 ;
            background-color: var(--kbdefault25-primary-1);
            display: flex;
        }
        
        body .kb-wrapper .kb-global-kit-tile-picker-shown .kb-global-kit-tile-picker-title {
            position: relative;
            font-size: var(--kbdefault25-title-size);
            font-family: var(--kbdefault25-title-font);
            font-weight: bold;
            margin: 0;
        }

        body .kb-wrapper .kb-global-kit-tile-picker-title,
        body .kb-wrapper .kb-button.kb-global-kit-toggle-button,
        body .kb-wrapper .kb-button.kb-global-kit-toggle-button:hover {
            padding: var(--kbdefault25-gap);
            color: var(--kbdefault25-background-1);
        }

        body .kb-wrapper .kb-button.kb-global-kit-toggle-button,
        body .kb-wrapper .kb-button.kb-global-kit-toggle-button:hover {
            background-color: transparent;
            margin-left: auto;
        }

            /* left */
            body .kb-wrapper .kb-global-kit-wrapper-top .kb-global-kit-tile-picker-shown .kb-global-kit-tile-picker-header {
                flex-direction: row-reverse;
                text-align: right;
            }

            body .kb-wrapper .kb-global-kit-wrapper-top .kb-global-kit-tile-picker-shown .kb-button.kb-global-kit-toggle-button, 
            body .kb-wrapper .kb-global-kit-wrapper-top .kb-global-kit-tile-picker-shown .kb-button.kb-global-kit-toggle-button:hover {
                margin-left: 0;
                margin-right: auto;
            }

        /* fields */
        body .kb-wrapper .kb-global-kit-field-wrapper {
            overflow: auto;
        }
        
        body .kb-wrapper .kb-global-kit-field {
            padding: var(--kbdefault25-gap);
            margin: 0;
        }

        body .kb-wrapper .kb-global-kit-field .kb-global-kit-field-label {
            font-size: var(--kbdefault25-subtitle-size);
            font-weight: bold;
            margin-bottom: var(--kbdefault25-gap);
            display: block;
        }

        body .kb-wrapper .kb-global-kit-field .kb-tile-picker-color {
            gap: var(--kbdefault25-gap-half);
            grid-template-columns: repeat(var(--kbdefault25-gtp-color-columns), 1fr);
        }

/* --- Category / Squad Store Pages --- */

body .kb-wrapper .kb-categories-page .kb-page-content,
body .kb-wrapper .kb-team-stores-home .kb-page-content {
    max-width: var(--kbdefault25-max-journey-width);
    margin: 0 auto;
}

body .kb-wrapper .kb-categories-page .kb-categories {
    --kbdefault25-journey-item-columns: var(--kbdefault25-categories-selector-columns);
}

body .kb-wrapper .kb-categories .kb-category {
    height: 100%;
    border: 2px solid var(--kbdefault25-background-2);
    border-radius: var(--kbdefault25-radius);
    float: unset;
    transition: 200ms ease-in-out box-shadow;
}

body .kb-wrapper .kb-categories .kb-category:hover {
    border: 2px solid var(--kbdefault25-background-2);
    box-shadow: 0 0 20px 0 var(--kbdefault25-primary-1-50);
}

body .kb-wrapper .kb-categories .kb-category img {
    width: 100%;
    height: unset;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background-color: var(--kbdefault25-background-2);
    margin: 0;
}

body .kb-wrapper .kb-categories .kb-category-item-count,
body .kb-wrapper .kb-categories .kb-category-name {
    width: 100%;
    background: transparent;
    color: var(--kbdefault25-primary-1);
    text-align: left;
    line-height: unset;
    font-size: var(--kbdefault25-subtitle-size);
    font-weight: bold;
    height: unset;
    padding: calc(var(--kbdefault25-gap) / 1.5) calc(var(--kbdefault25-gap) / 1.5) 0;
    box-sizing: border-box;
}

body .kb-wrapper .kb-categories .kb-category-item-count {
    padding: calc(var(--kbdefault25-gap) / 1.5);
    font-size: var(--kbdefault25-paragraph-size);
    font-weight: normal;
}

body .kb-wrapper .kb-categories .kb-category-item-count.kb-category-item-count-gap span:first-child {
    margin-right: var(--kbdefault25-gap-half);
    padding-right: var(--kbdefault25-gap-half);
    border-right: 1px solid var(--kbdefault25-primary-1);
}

body .kb-wrapper .kb-product-content-innner-categories ~ .kb-product-content-innner-category {
    margin-top: var(--kbdefault25-gap-double) !important;
    border-top: 1px solid var(--kbdefault25-primary-2);
}

/* --- Product / Design Pages --- */

body .kb-wrapper .kb-category-page .kb-products,
body .kb-wrapper .kb-products {
    --kbdefault25-journey-item-columns: var(--kbdefault25-product-selector-columns);
}

body .kb-wrapper .kb-designs {
    --kbdefault25-journey-item-columns: var(--kbdefault25-design-selector-columns);
}

body .kb-wrapper .kb-products .kb-product,
body .kb-wrapper .kb-designs .kb-design {
    border: none;
    position: relative;
    overflow: visible;
}

body .kb-wrapper .kb-product-card,
body .kb-wrapper .kb-design-card {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    border: 2px solid var(--kbdefault25-background-2);
    border-radius: var(--kbdefault25-radius);
    background-color: var(--kbdefault25-background-1);
    transition: box-shadow 200ms ease-in-out;
    transition-delay: 0ms, 200ms;
}

body .kb-wrapper .kb-product-card:hover,
body .kb-wrapper .kb-design-card:hover {
    box-shadow: 0 0 20px 0 var(--kbdefault25-primary-1-50);
    z-index: 1;
}

body .kb-wrapper .kb-product-card-link,
body .kb-wrapper .kb-design-card-link {
    position: relative;
}

body .kb-wrapper .kb-product-card-hover,
body .kb-wrapper .kb-design-card-hover {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: clac(100% - var(--kbdefault25-gap));
    background-color: var(--kbdefault25-primary-1);
    color: var(--kbdefault25-background-1);
    padding: var(--kbdefault25-gap-half) var(--kbdefault25-gap);
    border-radius: var(--kbdefault25-button-radius);
    text-align: center;
    transform: translate(-50%, -50%);
    visibility: hidden;
    opacity: 0;
    transition: 
        visibility 200ms ease-in-out, 
        opacity 200ms ease-in-out;
}

body .kb-wrapper .kb-product-card:hover .kb-product-card-hover,
body .kb-wrapper .kb-design-card:hover .kb-design-card-hover {
    visibility: visible;
    opacity: .6;
}

body .kb-wrapper .kb-design-thumbnail-image-wrapper {
    height: 100%;
}

body .kb-wrapper .kb-product-card .kb-product-image,
body .kb-wrapper .kb-design-card .kb-design-image {
    border-radius: var(--kbdefault25-radius);
    background-color: var(--kbdefault25-background-2);
    padding-block: var(--kbdefault25-gap);
    aspect-ratio: 1 / 1;
}

body .kb-wrapper .kb-product-card .kb-product-image img,
body .kb-wrapper .kb-design-card .kb-design-image img {
    margin: 0;
}

body .kb-wrapper .kb-product-card .kb-product-image img,
body .kb-wrapper .kb-product-card .kb-product-image canvas,
body .kb-wrapper .kb-design-card .kb-design-image img,
body .kb-wrapper .kb-design-card .kb-design-image canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

body .kb-wrapper .kb-product-card-title,
body .kb-wrapper .kb-design-card-title {
    padding: calc(var(--kbdefault25-gap) / 1.5);
}

body .kb-wrapper .kb-product-card-title .kb-product-name,
body .kb-wrapper .kb-design-card-title .kb-design-name {
    width: 100%;
    font-weight: bold;
    font-size: var(--kbdefault25-subtitle-size);
    padding: 0;
}

body .kb-wrapper .kb-design-card-title .kb-design-name {
    position: relative;
    background-color: transparent;
    color: var(--kbdefault25-primary-1);
    text-align: left;
}

body .kb-wrapper .kb-product-card-title .kb-product-price,
body .kb-wrapper .kb-design-card-title .kb-design-price {
    padding-top: var(--kbdefault25-gap-quarter);
    font-size: var(--kbdefault25-subtitle-size);
}

    /* description preview */
    body .kb-wrapper .kb-product-card-with-description .kb-description-preview-wrapper,
    body .kb-wrapper .kb-design-card-with-description .kb-description-preview-wrapper {
        padding: calc(var(--kbdefault25-gap) / 1.5);
        padding-top: 0;
    }

/* --- Dialog --- */

body .kb-wrapper .kb-dialog-backdrop {
    display: block !important;
    z-index: 999;
}

body .kb-wrapper .kb-dialog {
    width: min(calc(600px - var(--kbdefault25-gap)), calc(96vw - var(--kbdefault25-gap)));
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    border-radius: var(--kbdefault25-dialog-radius);
    border: none;
    background-color: var(--kbdefault25-background-1);
    box-shadow: 0 0 50px 0 var(--kbdefault25-primary-1-50);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    overflow: hidden;
}

body .kb-wrapper .kb-dialog.kb-dialog-wide {
    width: min(calc(900px - var(--kbdefault25-gap)), calc(96vw - var(--kbdefault25-gap)));
}

body .kb-wrapper .kb-dialog.kb-dialog-large {
    width: min(calc(1200px - var(--kbdefault25-gap)), calc(96vw - var(--kbdefault25-gap)));
}

body .kb-wrapper .kb-dialog.kb-locker-room-add-to-cart-confirmation-dialog > div {
    width: 100%;
}

body .kb-wrapper .kb-create-custom-design-dialog .kb-dialog-content,
body .kb-wrapper .kb-dialog > div > .kb-dialog-content,
body .kb-wrapper .kb-dialog > .kb-dialog-content,
body .kb-wrapper .kb-dialog-inner {
    padding: var(--kbdefault25-gap);
    padding-bottom: 0;
    width: 100%;
    overflow-y: auto;
    max-height: calc(90vh - (var(--kbdefault25-gap) * 5));
    box-sizing: border-box;
}

body .kb-wrapper .kb-dialog-content {
    padding: 0;
}

body .kb-wrapper .kb-dialog-content:has(input),
body .kb-wrapper .kb-dialog-content:has(textarea) {
    padding-bottom: 5px !important;
}

body .kb-wrapper .kb-dialog .kb-button-panel {
    width: 100%;
    border: none;
    background: transparent;
    display: flex;
    flex-direction: row-reverse;
    padding: var(--kbdefault25-gap);
    justify-content: space-between;
    box-sizing: border-box;
}

body .kb-wrapper .kb-dialog.kb-move-to-folder-dialog .kb-button-panel {
    flex-direction: row;
}

/* inputs */
body .kb-wrapper .kb-dialog .kb-control-group {
    text-align: left;
}

body .kb-wrapper .kb-dialog .kb-control-group label {
    margin-bottom: var(--kbdefault25-gap-half);
    display: inline-block;
    color: var(--kbdefault25-primary-1);
    font-size: var(--kbdefault25-paragraph-size);
    font-family: var(--kbdefault25-paragraph-font) !important;
}

body .kb-wrapper .kb-dialog.kb-share-basic-dialog .kb-control-group label {
    display: none;
}

body .kb-wrapper .kb-dialog .kb-control-group:has(textarea[required]) > label::after,
body .kb-wrapper .kb-dialog .kb-control-group:has(input[required]) > label::after {
    content: "*";
    position: relative;
    margin-left: 5px;
    color: var(--kbdefault25-alert);
    font-weight: bold;
}

body .kb-wrapper .kb-dialog textarea {
    height: 28px;
    resize: none;
    text-wrap: nowrap;
    overflow: hidden;
}

body .kb-wrapper .kb-dialog textarea:focus {
    outline: 1px solid black;
}

/* title */
body .kb-wrapper .kb-dialog h1,
body .kb-wrapper .kb-dialog h2,
body .kb-wrapper .kb-dialog h3,
body .kb-wrapper .kb-dialog h4,
body .kb-wrapper .kb-dialog h5,

    /* missing header element*/
    body .kb-wrapper .kb-dialog .kb-title,
    body .kb-wrapper .kb-dialog-title,
    body .kb-wrapper .kb-information-dialog-heading

{
    font-size: var(--kbdefault25-title-size);
    font-family: var(--kbdefault25-title-font) !important;
    margin: 0 0 var(--kbdefault25-gap-half) 0;
    color: var(--kbdefault25-primary-1);
    font-style: normal;
    font-weight: bold;
    width: 100%;
}

/* body */

body .kb-wrapper .kb-dialog p,
body .kb-wrapper .kb-dialog .kb-subtitle,
body .kb-wrapper .kb-dialog .kb-dialog-subtitle {
    padding: 0;
    margin: 0;
    font-size: var(--kbdefault25-paragraph-size);
    color: var(--kbdefault25-primary-1);
    width: 100%;
}

body .kb-wrapper .kb-dialog .kb-subtitle,
body .kb-wrapper .kb-dialog .kb-dialog-subtitle {
    margin-bottom: var(--kbdefault25-gap);
}

/* wrapped buttons */
body .kb-wrapper .kb-dialog .kb-dialog-wrapped-buttons,
body .kb-wrapper .kb-dialog .kb-product-aspect-selector {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kbdefault25-gap);
    justify-content: center;
}

    /* --- Size Chart --- */

    body .kb-wrapper .kb-dialog.kb-size-chart-dialog {
        width: max-content;
        max-width: 96vw;
    }

    body .kb-wrapper .kb-dialog.kb-size-chart-dialog .kb-size-chart-image {
        max-width: 100%;
        width: auto;
        margin: 0;
    }

    /* --- Design Completion --- */
    body .kb-wrapper .kb-design-completion-dialog {
        display: flex;
        flex-wrap: wrap;
        gap: 0 var(--kbdefault25-gap);
    }

        /* lead time */
        body .kb-wrapper .kb-design-completion-dialog:has(.kb-lead-time) .kb-subtitle {
            margin-bottom: var(--kbdefault25-gap-half);
        }

        body .kb-wrapper .kb-design-completion-dialog .kb-lead-time {
            margin-bottom: var(--kbdefault25-gap);
            width: 100%;
        }
        
        body .kb-wrapper .kb-design-completion-dialog .kb-lead-time span {
            font-size: var(--kbdefault25-subtitle-size);
        }

        body .kb-wrapper .kb-design-completion-dialog .kb-lead-time .kb-lead-time-heading {
            font-weight: bold;
        }

        /* validation */
        body .kb-wrapper .kb-dialog .kb-design-completion-dialog div[ng-include="'partials/_checkout-validation.html'"],
        body .kb-wrapper .kb-dialog .kb-design-completion-dialog .kb-validation {
            width: 100%;
            margin: 0;
        }
        
        body .kb-wrapper .kb-dialog .kb-design-completion-dialog .kb-validation {
            margin: 0 0 var(--kbdefault25-gap) 0;
        }

        /* buttons */
        body .kb-wrapper .kb-design-completion-dialog .kb-single-item-checkout .kb-buttons {
            display: none;
        }

        body .kb-wrapper .kb-design-completion-dialog .kb-form-links,
        body .kb-wrapper .kb-design-completion-dialog .kb-form-links-list,
        body .kb-wrapper .kb-design-completion-dialog div[single-item-checkout],
        body .kb-wrapper .kb-design-completion-dialog .kb-single-item-checkout {
            display: contents;
        }
        
        body .kb-wrapper .kb-design-completion-dialog > .kb-buttons {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--kbdefault25-gap-half);
            margin-top: var(--kbdefault25-gap);
            margin-bottom: var(--kbdefault25-gap-double);
            width: 100%;
        }
        
        /* form links */
        body .kb-wrapper .kb-design-completion-dialog .kb-form-links-item {
            width: fit-content;
        }
        
        body .kb-wrapper .kb-design-completion-dialog .kb-form-links-item span:last-child {
            display: inline-block;
        }

        /* validation */
        body .kb-wrapper .kb-design-completion-dialog .kb-single-item-checkout div[ng-include="'partials/_checkout-validation.html'"] {
            order: 0;
        }

    /* add to cart */
    body .kb-wrapper .kb-add-to-cart-dialog .kb-building-product-wrapper {
        margin-block: var(--kbdefault25-gap);
    }

    body .kb-wrapper .kb-add-to-cart-dialog .kb-building-product-image {
        background-color: var(--kbdefault25-primary-1-25);
        width: 80px;
        height: 80px;
        border-radius: 5px;
        position: relative;
        overflow: hidden;
        border: 2px solid var(--kbdefault25-primary-1-25);
    }
    body .kb-wrapper .kb-add-to-cart-dialog .kb-building-product-image::after {
        content: " ";
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: 0;
        translate: -50% -50%;
        box-shadow: 0 0 0 100vw #ffffff90;
        background-color: #ffffff90;

        --kb-loading-speed: 1000ms;
        --kb-loading-size: 50%;
        --kb-loading-width: 8px;
    }

    body .kb-wrapper .kb-add-to-cart-dialog .kb-building-product-info {
        display: flex;
        flex-direction: column;
        gap: var(--kbdefault25-gap-quarter);
        justify-content: center;
        text-align: left;
        color: var(--kbdefault25-primary-1);
    }

    body .kb-wrapper .kb-add-to-cart-dialog .kb-building-product-info span {
        font-size: var(--kbdefault25-paragraph-size);
        color: var(--kbdefault25-primary-1);
    }

/* --- Customize Page --- */

body .kb-wrapper .kb-customise-page {
    background-color: var(--kbdefault25-background-2);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    position: relative;
}

body .kb-wrapper .kb-customise-page kb-global-kit {
    display: none !important;
}

    /* --- Debug Panel --- */

    body .kb-wrapper .kb-debug-panel {
        right: unset;
        left: 0;
        bottom: 50%;
        transform: translateY(50%);
        padding-left: 10px;
        background-color: white;
        opacity: .5;
        transition: opacity 200ms ease-in-out;
        min-width: 220px;
    }
    
    body .kb-wrapper .kb-debug-panel:hover {
        opacity: 1;
    }

    body .kb-wrapper .kb-debug-panel * {
        margin-top: 2px;
    }

    body .kb-wrapper .kb-debug-panel div[ng-repeat] {
        display: flex;
        align-items: center;
        margin-top: 5px;
    }
    
    body .kb-wrapper .kb-debug-panel div[ng-repeat] label {
        margin: 0;
        margin-right: 5px;
        flex-grow: 1;
    }

    body .kb-wrapper .kb-debug-panel div[ng-repeat]:hover label {
        font-weight: bold;
    }
    
    body .kb-wrapper .kb-debug-panel div[ng-repeat] input[type="number"].ng-valid:not(form):not([ng-form]):not(div),
    body .kb-wrapper .kb-debug-panel div[ng-repeat] input[type="text"].ng-valid:not(form):not([ng-form]):not(div),
    body .kb-wrapper .kb-debug-panel div[ng-repeat] input,
    body .kb-wrapper .kb-debug-panel div[ng-repeat] select {
        padding: 1px 0 !important;
        border: 1px solid black !important;
        border-radius: 0 !important;
    }
    
    body .kb-wrapper .kb-debug-panel div[ng-repeat] input:focus,
    body .kb-wrapper .kb-debug-panel div[ng-repeat] select:focus {
        outline: none !important;
    }

    body .kb-wrapper .kb-debug-panel div[ng-repeat] input[type="checkbox"] {
        display: block !important;
    }

    /* --- Design Not Found --- */

    body .kb-wrapper .kb-customise-page.kb-customise-page-error > div:not(.kb-preview-panel),
    body .kb-wrapper .kb-customise-page.kb-customise-page-error .kb-preview-panel > div[ng-include],
    body .kb-wrapper .kb-customise-page.kb-customise-page-error .kb-embed-hide {
        display: none !important;
    }

    body .kb-wrapper .kb-customise-page.kb-customise-page-error > .kb-preview-panel {
        width: 100%;
    }

    body .kb-wrapper .kb-customise-page.kb-customise-page-error .kb-preview-image, 
    body .kb-wrapper .kb-customise-page.kb-customise-page-error .kb-3d-wrapper {
        height: unset;
        background-color: transparent;
    }

    body .kb-wrapper .kb-preview-image > .kb-error-message:not(.ng-hide) {
        margin: var(--kbdefault25-gap-double) auto;
        padding: var(--kbdefault25-gap);
        padding-left: calc(var(--kbdefault25-gap) * 3);
        box-sizing: border-box;
        width: 90vw;
        max-width: 600px;
        border: 2px solid var(--kbdefault25-alert);
        font-size: var(--kbdefault25-subtitle-size);
        font-weight: bold;
        color: var(--kbdefault25-alert);
        background-color: var(--kbdefault25-background-1);
        position: relative;
    }

    body .kb-wrapper .kb-preview-image > .kb-error-message:not(.ng-hide)::before {
        content: "priority_high";
        position: absolute;
        font-family: var(--kbdefault25-material-ui-font);
        font-size: 30px;
        top: 0;
        left: 0;
        height: 100%;
        width: calc(var(--kbdefault25-gap) * 3);
        background-color: var(--kbdefault25-background-2);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* --- Model Preview --- */

    body .kb-wrapper .kb-loading:before {
        background: transparent;
        top: 50%;
        transform: translateY(-50%);
    }

    .kb-hosted-spaces-page .kb-wrapper .kb-customise-page .kb-preview-panel,
    body .kb-wrapper .kb-customise-page .kb-preview-panel {
        width: calc(100% - var(--kbdefault25-menu-width) - var(--kbdefault25-steps-width));
        float: unset;
        position: relative;
    }

    body .kb-wrapper .kb-3d-wrapper:after {
        content: none;
    }

    body .kb-wrapper .kb-customise-page:not(.kb-team-store-product) .kb-vector-wrapper,
    body .kb-wrapper .kb-customise-page.kb-team-store-product .kb-vector-wrapper {
        padding-bottom: 0;
    }

    .kb-hosted-spaces-page .kb-wrapper .kb-customise-page .kb-preview-image, 
    .kb-hosted-spaces-page .kb-wrapper .kb-customise-page .kb-3d-wrapper,
    body .kb-wrapper .kb-customise-page .kb-preview-image, 
    body .kb-wrapper .kb-customise-page .kb-3d-wrapper {
        height: calc(100vh - var(--kbdefault25-footer-height));
        width: 100%;
        box-sizing: border-box;
        border: none;
    }

    body .kb-wrapper .kb-customise-page:has(.kb-overlay-wrapper.kb-print-view-visible) .kb-3d-wrapper {
        background: repeating-linear-gradient(45deg, 
            var(--kbdefault25-background-2) 0, 
            var(--kbdefault25-background-2) 40px, 
            var(--kbdefault25-background-1) 0, 
            var(--kbdefault25-background-1) 80px);
    }

    body .kb-wrapper .kb-customise-page .kb-preview-panel .kb-tile-zoom-picker-image {
        top: var(--kbdefault25-gap);
        right: var(--kbdefault25-gap);
        border: 2px solid var(--kbdefault25-primary-1);
        padding: var(--kbdefault25-gap-half);
        box-shadow: 0 0 20px 0 var(--kbdefault25-primary-1-25);
        width: 250px;
        aspect-ratio: 1 / 1;
        max-width: 80%;
    }
    
    body .kb-wrapper .kb-customise-page .kb-preview-panel .kb-tile-zoom-picker-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

        /* --- Model Header --- */

        body .kb-wrapper .kb-model-header {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1;
            padding: var(--kbdefault25-gap);
            box-sizing: border-box;
        }

        body .kb-wrapper .kb-product-information-icon {
            position: relative;
            margin: 0 10px;
            width: var(--kbdefault25-title-size);
        }

        body .kb-wrapper .kb-model-header-back-button,
        body .kb-wrapper .kb-model-header-back-button:hover {
            margin-top: var(--kbdefault25-gap-half);
            color: var(--kbdefault25-primary-1-50);
            width: max-content;
        }

        body .kb-wrapper .kb-model-header-custom-design::after {
            content: "checkroom";
            font-family: var(--kbdefault25-material-ui-font);
            position: relative;
            top: 2px;
        }

        body .kb-wrapper .kb-dialog-inner:has(.kb-product-info-dialog-inner) {
            padding: var(--kbdefault25-gap-double);
            padding-bottom: 0;
            text-align: left;
        }

        body .kb-wrapper .kb-product-info-dialog-inner p {
            max-height: 300px;
            overflow-y: auto;
        }

        body .kb-wrapper .kb-product-info-dialog-inner .kb-product-info-dialog-addition {
            background-color: var(--kbdefault25-background-2);
            border-radius: var(--kbdefault25-radius);
            border: 2px solid var(--kbdefault25-primary-2);
            padding: var(--kbdefault25-gap-double);
            box-sizing: border-box;
        }

        /* --- Action Bar --- */
        
        body .kb-wrapper .kb-customise-page .kb-customize-action-fade .kb-customize-action-bar,
        body .kb-wrapper .kb-customise-page .kb-customize-action-fade .kb-customize-slot-action-bar {
            opacity: .4;
            transition: 1000ms ease-in-out opacity 2000ms;
        }

        body .kb-wrapper .kb-customise-page .kb-customize-action-fade .kb-customize-action-bar:hover,
        body .kb-wrapper .kb-customise-page .kb-customize-action-fade .kb-customize-slot-action-bar:hover {
            transition: 200ms ease-in-out opacity;
            opacity: 1;
        }

        body .kb-wrapper .kb-customise-page .kb-customize-action-bar {
            position: absolute;
            bottom: var(--kbdefault25-gap);
            left: 50%;
            transform: translateX(calc(-50% - (var(--kbdefault25-gap) * 1.75)));
            padding: var(--kbdefault25-gap-half);
            border-radius: var(--kbdefault25-button-radius);
            background-color: var(--kbdefault25-background-1);
            display: flex;
            gap: var(--kbdefault25-gap-half);
            
            overflow: auto;
            max-width: calc(100% - (var(--kbdefault25-gap) * 5.5));
            box-sizing: border-box;
            scrollbar-width: none;
        }

        body .kb-wrapper .kb-customise-page .kb-customize-action-bar .kb-customize-action-bar-menu {
            position: sticky;
            top: 0;
            right: 0;
            box-shadow: 0 0 0 var(--kbdefault25-gap-half) var(--kbdefault25-background-1);
            color: var(--kbdefault25-primary-1);
        }

        /* --- Action Bar/Menu & Items Dialog --- */

            body .kb-wrapper .kb-customise-page .kb-customize-actions {
                display: flex;
                gap: var(--kbdefault25-gap-half);
            }
        
            body .kb-wrapper .kb-customise-page .kb-customize-action-bar .kb-button,
            body .kb-wrapper .kb-customize-actions .kb-items-dialog .kb-button,
            body .kb-wrapper .kb-items-dialog .kb-button {
                padding: var(--kbdefault25-gap-quarter) var(--kbdefault25-gap-half);
                background-color: var(--kbdefault25-background-1);
                display: flex;
                text-wrap: nowrap;
                transition: 200ms ease-in-out background-color;
                font-size: var(--kbdefault25-paragraph-size);
                color: var(--kbdefault25-primary-1);
            }

            body .kb-wrapper .kb-items-dialog .kb-button .kb-items-dialog-open-button {
                display: none;
            }
            
            body .kb-wrapper .kb-customise-page .kb-customize-action-bar .kb-button:hover,
            body .kb-wrapper .kb-customize-actions .kb-items-dialog .kb-button:hover,
            body .kb-wrapper .kb-items-dialog .kb-button:hover {
                background-color: var(--kbdefault25-primary-2);
            }

            body .kb-wrapper .kb-customize-actions-wrapper .kb-customize-action-bar-only:not(:last-child),
            body .kb-wrapper .kb-customize-actions-wrapper .kb-customize-action-bar-last:not(:last-child) {
                margin-right: var(--kbdefault25-gap-half);
                position: relative;
            }

            body .kb-wrapper .kb-customize-actions-wrapper .kb-customize-action-bar-only:not(:last-child)::after,
            body .kb-wrapper .kb-customize-actions-wrapper .kb-customize-action-bar-last:not(:last-child)::after {
                content: " ";
                position: absolute;
                height: 100%;
                width: 1px;
                background-color: var(--kbdefault25-primary-2);
                left: calc(100% + var(--kbdefault25-gap-half));
                pointer-events: none;
            }

        /* --- Action Slot --- */

        body .kb-wrapper .kb-customise-page > .kb-add-cross-sells,
        body .kb-wrapper .kb-customise-page > .kb-add-related-products,
        body .kb-wrapper .kb-customise-page > .kb-design-selector {
            display: none !important;
        }

        body .kb-wrapper .kb-customise-page .kb-customize-slot-action-bar {
            position: absolute;
            right: var(--kbdefault25-gap);
            bottom: var(--kbdefault25-gap);
            z-index: 0;
        }
        
        body .kb-wrapper .kb-customise-page .kb-customize-slot-action-bar .kb-customize-slot-action-bar-toggle,
        body .kb-wrapper .kb-customise-page .kb-customize-slot-action-bar .kb-customize-slot-action-bar-apps {
            background-color: var(--kbdefault25-primary-1);
            color: var(--kbdefault25-background-1);
            width: var(--kbdefault25-gap-double);
            height: var(--kbdefault25-gap-double);
            border-radius: var(--kbdefault25-radius) var(--kbdefault25-radius) 0 0;
        }

        body .kb-wrapper .kb-customise-page .kb-customize-slot-action-bar .kb-customize-slot-action-bar-apps {
            border-radius: 0 0 var(--kbdefault25-radius) var(--kbdefault25-radius);
        }

        body .kb-wrapper .kb-customise-page .kb-customize-slot-action-bar .kb-customize-slot-action-bar-toggle::before,
        body .kb-wrapper .kb-customise-page .kb-customize-slot-action-bar .kb-customize-slot-action-bar-apps::before,
        body .kb-wrapper .kb-customise-page .kb-customize-slot-action-bar .kb-slot-action::before {
            font-family: var(--kbdefault25-material-ui-font);
            font-size: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%;
        }

        body .kb-wrapper .kb-customise-page .kb-customize-slot-action-bar .kb-slot-action::before {
            height: 0;
            overflow: hidden;
            transition: height 200ms ease-in-out;
        }
    
        body .kb-wrapper .kb-customise-page .kb-customize-slot-action-items {
            background-color: var(--kbdefault25-background-1);
            border-radius: var(--kbdefault25-button-radius) var(--kbdefault25-button-radius) 0 0;
            padding: var(--kbdefault25-gap-half) 0;
            display: flex;
            flex-direction: column-reverse;
            gap: var(--kbdefault25-gap-half);
            opacity: 0;
            visibility: hidden;
            transition:
                opacity 200ms ease-in-out,
                visibility 200ms ease-in-out;
        }

            /* open */
            body .kb-wrapper .kb-customise-page .kb-customize-slot-action-bar.kb-customize-slot-action-open .kb-customize-slot-action-items {
                opacity: 1;
                visibility: visible;
                transition: height 200ms ease-in-out;
            }

            body .kb-wrapper .kb-customise-page .kb-customize-slot-action-bar.kb-customize-slot-action-open .kb-slot-action::before {
                height: var(--kbdefault25-gap-double);
            }

            /* --- Items Dialog --- */

            body .kb-wrapper .kb-dialog.kb-customize-slot-actions-information .kb-items-dialog .kb-button {
                width: calc(50% - (var(--kbdefault25-gap) / 2));
                padding: var(--kbdefault25-gap);
                background-color: var(--kbdefault25-background-2);
                border-radius: var(--kbdefault25-radius);
                flex-wrap: wrap;
                box-sizing: border-box;
            }
            
            body .kb-wrapper .kb-dialog.kb-customize-slot-actions-information .kb-items-dialog .kb-button .kb-items-dialog-name {
                font-size: var(--kbdefault25-subtitle-size);
                font-weight: bold;
            }
            
            body .kb-wrapper .kb-dialog.kb-customize-slot-actions-information .kb-items-dialog .kb-button .kb-items-dialog-description {
                width: 100%;
                text-align: left;
                text-wrap: wrap;
                margin-top: var(--kbdefault25-gap-half);
                margin-bottom: var(--kbdefault25-gap);
            }

            body .kb-wrapper .kb-dialog.kb-customize-slot-actions-information .kb-items-dialog .kb-button .kb-items-dialog-open-button {
                display: block;
                margin-left: auto;
            }

            /* --- Product Aspect Selector --- */

            body .kb-wrapper .kb-product-aspect-selector [translate="kb.customize.product_aspect_selector.heading"] {
                display: none;
            }

            body .kb-wrapper .kb-dialog .kb-product-aspect-selector ul {
                display: contents;
            }
            
            body .kb-wrapper .kb-dialog .kb-product-aspect-selector .kb-button[kb-icon]:not([kb-icon=""])::before { 
                content: attr(kb-icon); 
            }

            body .kb-wrapper .kb-dialog .kb-product-aspect-selector li {
                padding: 7px !important;
            }

            body .kb-wrapper .kb-dialog .kb-product-aspect-selector .kb-product-aspect-selected {
                opacity: 1 !important;
            }

            /* --- Related Products, Cross Sells & Design Selector --- */

            body .kb-wrapper .kb-dialog .kb-related-products-heading,
            body .kb-wrapper .kb-dialog .kb-cross-sells-heading,
            body .kb-wrapper .kb-dialog .kb-cross-sells-description,
            body .kb-wrapper .kb-dialog .kb-design-selector-heading,
            body .kb-wrapper .kb-dialog .kb-design-selector-description {
                display: none;
            }

            body .kb-wrapper .kb-dialog .kb-related-products,
            body .kb-wrapper .kb-dialog .kb-cross-sells,
            body .kb-wrapper .kb-dialog .kb-design-selector-designs {
                display: grid;
                grid-template-columns: repeat(var(--kbdefault25-dialog-product-columns), 1fr);
                gap: var(--kbdefault25-gap);
                justify-content: center;
                margin-bottom: 6px !important;
                width: 100%;
            }

            body .kb-wrapper .kb-dialog .kb-related-product,
            body .kb-wrapper .kb-dialog .kb-cross-sell,
            body .kb-wrapper .kb-dialog .kb-design-selector-design {
                position: relative;
                width: 100%;
                display: inline-grid;
                margin: 0;
                border: none;
                background-color: var(--kbdefault25-background-2);
                border-radius: var(--kbdefault25-radius);
            }

            body .kb-wrapper .kb-dialog .kb-related-product-link,
            body .kb-wrapper .kb-dialog .kb-cross-sell-link,
            body .kb-wrapper .kb-dialog .kb-design-selector-design-link {
                display: block;
                padding-bottom: var(--kbdefault25-gap);
                border-radius: var(--kbdefault25-radius);
            }

            body .kb-wrapper .kb-dialog .kb-related-product-img,
            body .kb-wrapper .kb-dialog .kb-cross-sell-img,
            body .kb-wrapper .kb-dialog .kb-design-selector-design-img {
                padding: var(--kbdefault25-gap) 0;
                width: 100%;
            }

            body .kb-wrapper .kb-dialog .kb-related-product-name,
            body .kb-wrapper .kb-dialog .kb-cross-sell-name,
            body .kb-wrapper .kb-dialog .kb-design-selector-design-name {
                position: relative;
                width: 100%;
                display: block;
                font-size: var(--kbdefault25-paragraph-size);
                padding: 0;
                background-color: transparent;
                color: var(--kbdefault25-primary-1);
                white-space: normal;
            }

            body .kb-wrapper .kb-cross-sells .kb-cross-sell .kb-cross-sell-checkbox, 
            body .kb-wrapper .kb-cross-sells .kb-cross-sell .kb-cross-sell-checkbox-checked {
                position: absolute;
                background: none;
                top: var(--kbdefault25-gap-half);
                right: var(--kbdefault25-gap-half);
            }

            body .kb-wrapper .kb-cross-sells .kb-cross-sell-selected .kb-cross-sell-checkbox-checked {
                background: var(--kbdefault25-secondary-1);
            }

            /* --- Print Groups --- */

            body .kb-wrapper .kb-print-groups {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
            }

            body .kb-wrapper .kb-print-group-info {
                width: 50%;
                display: flex;
                flex-direction: column;
                gap: var(--kbdefault25-gap-half);
                align-items: center;
            }

            body .kb-wrapper .kb-print-group-insights .kb-print-group-info {
                margin-bottom: var(--kbdefault25-gap);
                width: 100%;
            }
            
            body .kb-wrapper .kb-print-group-info .kb-subtitle {
                margin: 0;
            }

            body .kb-wrapper .kb-print-group-colors {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: var(--kbdefault25-gap-quarter);
            }
            
            body .kb-wrapper .kb-print-group-color {
                height: calc(var(--kbdefault25-gap) * 1.5);
                min-width: calc(var(--kbdefault25-gap) / 1.5);
                padding-inline: var(--kbdefault25-gap-half);
                line-height: calc(var(--kbdefault25-gap) * 1.5);
                border-radius: var(--kbdefault25-radius);
                border: 2px solid var(--kbdefault25-background-2);
            }

                /* usage */
                body .kb-wrapper .kb-print-group-insights {    
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }

                body .kb-wrapper .kb-print-group-usage {
                    padding: var(--kbdefault25-gap);
                    box-sizing: border-box;
                    background-color: var(--kbdefault25-background-2);
                    border-radius: var(--kbdefault25-radius);
                    margin-bottom: var(--kbdefault25-gap);
                    width: 100%;
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: var(--kbdefault25-gap);
                }

                body .kb-wrapper .kb-print-group-usage .kb-print-group-placement {
                    font-weight: bold;
                }

                body .kb-wrapper .kb-print-group-usage .kb-print-group-editor-image svg {
                    height: 30px;
                    width: 30px;
                }

                body .kb-wrapper .kb-print-group-usage .kb-print-group-editor-colors {
                    display: flex;
                    flex-wrap: wrap;
                    gap: var(--kbdefault25-gap);
                    margin-left: auto;
                }

    /* --- Customise Menu --- */

    body .kb-wrapper .kb-customise-page .kb-customise-wizard {
        border: none;
        padding: var(--kbdefault25-gap);
        height: calc(100vh - var(--kbdefault25-footer-height) - 1px);
        width: var(--kbdefault25-menu-width);
        max-width: calc(100% - var(--kbdefault25-steps-width));
        background-color: var(--kbdefault25-background-1);
        box-shadow: 0 0 30px 0 var(--kbdefault25-primary-1-25);
        box-sizing: border-box;
        overflow: auto;
        position: relative;
    }
        
    .kb-hosted-spaces-page .kb-wrapper .kb-customise-page .kb-customise-edit-panel,
    body .kb-wrapper .kb-customise-page .kb-customise-edit-panel {
        width: calc(var(--kbdefault25-menu-width) + var(--kbdefault25-steps-width));
    }

    body .kb-wrapper .kb-customise-page .kb-customise-edit-panel-inner {
        max-width: 100%;
    }

    body .kb-wrapper .kb-customise-page .kb-customise-wizard > form {
        min-height: 100%;
        display: flex;
        flex-direction: column;
    }

    body .kb-wrapper .kb-customise-page .kb-wizard-form {
        padding: 0;
    }

    body .kb-wrapper .kb-customise-page .kb-wizard-form .kb-wizard {
        max-height: 100% !important; /* overrides auto scroll menu setting */
    }

    body .kb-wrapper div[ng-hide="showSingleItemCheckout()"] {
        margin-top: auto;
        padding-top: var(--kbdefault25-gap);
    }

    body .kb-wrapper .kb-navigation-buttons {
        overflow: visible;
        padding: 0;
        display: inline-block;
        width: 100%;
    }

        /* --- Steps --- */

        body .kb-wrapper .kb-customise-wizard .kb-wizard-breadcrumbs {
            display: none;
        }

        body .kb-wrapper .kb-widget-inside-after.kb-widget-kb-customise-edit-panel-inner {
            width: var(--kbdefault25-steps-width);
        }

        body .kb-wrapper .kb-icon-steps-wrapper {
            display: flex;
            flex-direction: column;
            width: var(--kbdefault25-steps-width);
            height: calc(100vh - var(--kbdefault25-footer-height));
            background-color: var(--kbdefault25-background-2);
            overflow: scroll;
            scrollbar-width: none;
            position: absolute;
            top: 0;
            right: 0;
        }
        
        body .kb-wrapper .kb-icon-steps-wrapper::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
        
        body .kb-wrapper .kb-customise-page .kb-step-controls,
        body .kb-wrapper .kb-customise-page .kb-step-controls .kb-step-collapse-button,
        body .kb-wrapper .kb-customise-page .kb-customise-edit-panel .kb-step-sidebar-toggle .kb-current-step {
            display: none;
        }
        
        body .kb-wrapper .kb-customise-page .kb-wizard-breadcrumbs {
            padding: 0;
            border: none;
            height: 100%;
        }

        body .kb-wrapper .kb-customise-page .kb-wizard-breadcrumb {
            position: relative;
            display: block;
        }

        body .kb-wrapper .kb-customise-page .kb-wizard-breadcrumb::after {
            content: " ";
            position: absolute;
            top: -1px;
            left: var(--kbdefault25-gap-half);
            width: calc(100% - var(--kbdefault25-gap));
            height: 2px;
            background-color: var(--kbdefault25-background-1);
        }

        body .kb-wrapper .kb-customise-page .kb-wizard-breadcrumb-active .kb-wizard-breadcrumb-inner::before,
        body .kb-wrapper .kb-customise-page .kb-wizard-breadcrumb-active .kb-wizard-breadcrumb-inner::after {
            content: none;
        }

        body .kb-wrapper .kb-customise-page .kb-wizard-breadcrumb a {
            width: var(--kbdefault25-steps-width);
            display: block;
            padding: var(--kbdefault25-gap) var(--kbdefault25-gap-half);
            box-sizing: border-box;
        }

        body .kb-wrapper .kb-customise-page .kb-wizard-breadcrumb .kb-wizard-breadcrumb-inner,
        body .kb-wrapper .kb-customise-page .kb-customise-edit-panel .kb-step-sidebar-toggle .kb-current-step,
        body .kb-wrapper .kb-customise-page .kb-step-controls .kb-step-collapse-button {
            color: var(--kbdefault25-secondary-1);
            font-weight: bold;
            font-size: var(--kbdefault25-paragraph-size);
            position: relative;
            z-index: 1;
        }

            /* --- Step Icon --- */
            body .kb-wrapper .kb-customise-page .kb-wizard-breadcrumb[kb-icon]:not([kb-icon=""])::before {
                content: attr(kb-icon);
                font-size: 30px;
                color: var(--kbdefault25-secondary-1);
                font-family: var(--kbdefault25-material-ui-font);
                position: absolute;
                top: 20px;
                right: 50%;
                transform: translateX(50%);
                pointer-events: none;
            }
            
            body .kb-wrapper .kb-customise-page .kb-wizard-breadcrumb[kb-icon]:not([kb-icon=""]) a {
                padding-top: max(calc(var(--kbdefault25-gap) * 3), 45px);
            }

            /* --- Active Step --- */

            body .kb-wrapper .kb-customise-page .kb-wizard-breadcrumb-active a {
                background-color: var(--kbdefault25-background-1);
                cursor: default;
            }
            
            body .kb-wrapper .kb-customise-page .kb-wizard-breadcrumb:not(:first-child).kb-wizard-breadcrumb-active a::before,
            body .kb-wrapper .kb-customise-page .kb-wizard-breadcrumb.kb-wizard-breadcrumb-active a::after {
                content: " ";
                position: absolute;
                top: -40px;
                left: 0px;
                height: 40px;
                width: 40px;
                border-bottom-left-radius: 50%;
                box-shadow: 0 20px 0 0 var(--kbdefault25-background-1);
                pointer-events: none;
            }
            
            body .kb-wrapper .kb-customise-page .kb-wizard-breadcrumb.kb-wizard-breadcrumb-active a::after {
                top: 100%;
                border-bottom-left-radius: 0;
                border-top-left-radius: 50%;
                box-shadow: 0 -20px 0 0 var(--kbdefault25-background-1);
            }

            /* --- Substeps --- */

            body .kb-wrapper .kb-wizard-group-header {
                background-color: transparent;
                color: var(--kbdefault25-primary-1);
                font-size: var(--kbdefault25-title-size);
                font-family: var(--kbdefault25-title-size) !important;
                font-weight: bold;
                margin: 0;
                padding: var(--kbdefault25-gap-half) 0;
                border-top: 1px solid var(--kbdefault25-primary-2);
            }

            body .kb-wrapper .kb-step-highlighted .kb-wizard-group-header {
                color: var(--kbdefault25-secondary-1);
                background-image: linear-gradient(to right, var(--kbdefault25-secondary-1-25), transparent);
                padding-left: var(--kbdefault25-gap-half);
            }

            body .kb-wrapper .kb-step-highlighted .kb-wizard-group-header-selected {
                margin-bottom: var(--kbdefault25-gap-half);
            }

            body .kb-wrapper .kb-team-details .kb-wizard-group-header {
                font-size: var(--kbdefault25-subtitle-size);
                font-family: var(--kbdefault25-paragraph-font) !important;
            }
            
            body .kb-wrapper .kb-wizard-group-header::after {
                font-size: 22px;
                font-family: var(--kbdefault25-material-ui-font);
            }

            body .kb-wrapper .kb-wizard-step {
                padding: 0;
            }

            /* remove top border */
            body .kb-wrapper .kb-wizard-step > div > div:has(> .kb-wizard-group-header:not(.ng-hide.kb-editor-heading)):first-child > .kb-wizard-group-header,
            body .kb-wrapper .kb-editor-placement-index-0 > div > div > .kb-wizard-group-header,
            body .kb-wrapper .kb-editor-dropdowns-wrapper > .kb-wizard-group-header:first-child,
            body .kb-wrapper .kb-team-index-0 .kb-wizard-group-header {
                padding-top: 0;
                border-top: none;
            }

            /* remove top border - advanced steps */
            body .kb-wrapper .kb-wizard-sub-step-wrapper:has(.kb-wizard-step:not(.ng-hide)):first-child .kb-wizard-group-header {
                padding-top: 0;
                border-top: none;
            }

        /* --- Fields --- */

        body .kb-wrapper .kb-wizard-form-row {
            padding: 0;
        }

        body .kb-wrapper .kb-wizard-form-label {
            line-height: unset;
            min-height: unset;
            float: unset;
        }

        body .kb-wrapper .kb-customise-design-selector-heading,
        body .kb-wrapper .kb-customise-design-selector .kb-customise-design-selector-heading,
        body .kb-wrapper .kb-wizard-customize-form-field .kb-wizard-form-label label {
            font-size: var(--kbdefault25-subtitle-size);
            font-weight: bold !important;
            margin: 0;
            margin-bottom: var(--kbdefault25-gap-half);
            color: var(--kbdefault25-primary-1);
            display: inline-block;
        }

        body .kb-wrapper .kb-wizard-form-field-type-teamdetails .kb-wizard-form-label label {
            font-size: var(--kbdefault25-title-size);
            font-family: var(--kbdefault25-title-font) !important;
        }

        body .kb-wrapper .kb-wizard-customize-form-field:not(.kb-wizard-form-field-type-editor):not(.kb-wizard-form-field-type-teamdetails) .kb-wizard-form-field,
        body .kb-wrapper .kb-customise-design-selector-wrap,
        body .kb-wrapper .kb-editor-placement .kb-tile-picker-base,
        body .kb-wrapper .kb-editor-placement .kb-editor-font-panel,
        body .kb-wrapper .kb-editor-placement .kb-editor-clipart-groups,
        body .kb-wrapper .kb-editor-placement-image[ng-switch-when="image"] .kb-editor-image-library,
        body .kb-wrapper .kb-editor-placement-image[ng-switch-when="clipart"] [ng-if="placement.groups.length == 0"] .kb-editor-image-library,
        body .kb-wrapper .kb-detached-editor-library,
        body .kb-wrapper .kb-editor-placement-image .kb-editor-placed-images,
        body .kb-wrapper .kb-editor-placement-image .kb-clipart-field .kb-wizard-form-field .kb-editor-toggle-color ~ div,
        body .kb-wrapper .kb-team-details .kb-pane-teams,
        body .kb-wrapper .kb-team-details .kb-pane-aggregate {
            width: calc(100% -(var(--kbdefault25-gap)* 4));
            margin: var(--kbdefault25-gap) var(--kbdefault25-field-inline-margin) !important;
            float: unset;
            display: block;
            overflow: visible;
        }

            /* --- General --- */

            /* description */
            body .kb-wrapper .kb-form-desc * {
                color: var(--kbdefault25-primary-1);
                font-size: var(--kbdefault25-paragraph-size);
                margin: 0;
            }

            body .kb-wrapper .kb-form-desc h1, 
            body .kb-wrapper .kb-form-desc h2,
            body .kb-wrapper .kb-form-desc h3 {
                font-size: var(--kbdefault25-title-size);
                font-family: var(--kbdefault25-title-font);
                margin: 0 0 var(--kbdefault25-gap) 0;
            }
            
            body .kb-wrapper .kb-form-desc h4,
            body .kb-wrapper .kb-form-desc h5 {
                font-size: var(--kbdefault25-subtitle-size);
                margin: 0 0 var(--kbdefault25-gap-half) 0;
            }
            
            body .kb-wrapper .kb-form-desc h5 {
                font-style: italic;
            }

            /* tile */
            body .kb-wrapper .kb-tile-picker::before,
            body .kb-wrapper .kb-tile-picker::after,
            body .kb-wrapper .kb-tile-picker-color::before,
            body .kb-wrapper .kb-tile-picker-color::after {
                content: none;
            }
            
            body .kb-wrapper .kb-tile-picker .kb-tile-picker-label,
            body .kb-wrapper .kb-tile-picker-color .kb-tile-picker-label {
                overflow: visible;
                display: inline-block;
                width: 100%;
                aspect-ratio: 1 / 1;
                border-radius: var(--kbdefault25-radius);
            }

            body .kb-wrapper .kb-tile-picker .kb-tile-picker-tile,
            body .kb-wrapper .kb-tile-picker-color .kb-tile-picker-tile {
                width: 100%;
                height: 100%;
                margin: 0;
                display: block;
                float: unset;
                border: 2px solid var(--kbdefault25-background-2);
                border-radius: var(--kbdefault25-radius);
                box-sizing: border-box;
                overflow: hidden;
            }

            /* validation */
            body .kb-wrapper .kb-custom-form .kb-validation-message,
            body .kb-wrapper .kb-validation.kb-invalid, 
            body .kb-wrapper .kb-validation.kb-warning {
                margin: 0 var(--kbdefault25-gap-double) var(--kbdefault25-gap) var(--kbdefault25-gap-double);
                padding: var(--kbdefault25-gap-half);
                background-color: var(--kbdefault25-secondary-1-25);
                border: 2px solid var(--kbdefault25-secondary-1);
                color: var(--kbdefault25-secondary-1);
                font-size: var(--kbdefault25-paragraph-size);
                font-style: italic;
                font-weight: normal;
                box-sizing: border-box;
                text-align: center;
            }

            body .kb-wrapper .kb-validation div:not(.kb-validation-action):not(.kb-button),
            body .kb-wrapper .kb-validation span:not(.kb-validation-action):not(.kb-button),
            body .kb-wrapper .kb-validation a:not(.kb-validation-action):not(.kb-button),
            body .kb-wrapper .kb-validation p:not(.kb-validation-action):not(.kb-button),
            body .kb-wrapper .kb-validation li:not(.kb-validation-action):not(.kb-button) {
                color: var(--kbdefault25-secondary-1);
                font-style: italic;
            }

            body .kb-wrapper .kb-validation [ng-if="item.action"],
            body .kb-wrapper .kb-validation-message .kb-validation-actions {
                display: flex;
                margin-top: var(--kbdefault25-gap-half);
                justify-content: center;
                gap: var(--kbdefault25-gap);
            }

            body .kb-wrapper .kb-validation .kb-validation-action,
            body .kb-wrapper .kb-validation-actions .kb-button,
            body .kb-wrapper .kb-validation.kb-invalid .kb-validation-actions .kb-button {
                background-color: var(--kbdefault25-secondary-1);
                border-radius: var(--kbdefault25-button-radius);
                padding: var(--kbdefault25-gap-half) calc(var(--kbdefault25-gap));
                color: var(--kbdefault25-background-1);
                font-size: var(--kbdefault25-paragraph-size);
                font-style: normal;
                opacity: 1;
                transition: opacity 200ms ease-in-out;
            }

            body .kb-wrapper .kb-validation .kb-validation-action:hover,
            body .kb-wrapper .kb-validation-actions .kb-button:hover,
            body .kb-wrapper .kb-validation.kb-invalid .kb-validation-actions .kb-button:hover {
                opacity: 0.6;
            }

            body .kb-wrapper .kb-validation-message ~ .kb-validation-message {
                margin-top: var(--kbdefault25-gap-half) !important;
            }

            body .kb-wrapper .kb-dialog .kb-validation {
                margin: var(--kbdefault25-gap) auto 0 auto;
                width: 85%;
            }

            /* error */
            body .kb-wrapper .kb-editor-file-upload-error {
                color: var(--kbdefault25-alert);
                font-weight: normal;
                font-style: italic;
                font-size: var(--kbdefault25-paragraph-size);
                padding: var(--kbdefault25-gap-half);
                border: 2px solid var(--kbdefault25-alert);
                background-color: var(--kbdefault25-alert-50);
            }

            /* --- Selected Values --- */

            body .kb-wrapper .kb-selected-field-values {
                margin: var(--kbdefault25-gap) 0 0 0;
                display: flex;
                flex-wrap: wrap;
                gap: var(--kbdefault25-gap-half) var(--kbdefault25-gap);
            }

            body .kb-wrapper .kb-selected-field-values .kb-selected-field-label {
                font-weight: bold;
            }

            body .kb-wrapper .kb-selected-field-values .kb-selected-property-group:not(:first-child),
            body .kb-wrapper .kb-selected-field-values:not(.kb-selected-field-values-vertical) .kb-selected-property-group:not(:first-child) {
                margin: 0;
            }

            body .kb-wrapper .kb-selected-field-values span {
                color: var(--kbdefault25-primary-1);
            }

            /* --- Horizontal Rule --- */

            body .kb-wrapper .kb-separator {
                background-color: var(--kbdefault25-primary-2);
                margin: 0 0 var(--kbdefault25-gap) 0;
                height: 2px;
            }

            /* --- Description --- */

            body .kb-wrapper .kb-field-description .kb-form-desc {
                margin-bottom: var(--kbdefault25-gap);
            }

            /* --- Design Selector --- */

            body .kb-wrapper .kb-customise-design-selector-description {
                font-size: var(--kbdefault25-paragraph-size);
                color: var(--kbdefault25-primary-1);
            }

            body .kb-wrapper .kb-customise-design-selector {
                display: inline-block;
                width: 100%;
            }

            body .kb-wrapper .kb-customise-design-selector .kb-customise-design-selector-designs {
                display: grid;
                grid-template-columns: repeat(var(--kbdefault25-field-design-selector-columns), 1fr);
                gap: var(--kbdefault25-gap);
            }

            body .kb-wrapper .kb-customise-design-selector .kb-customise-design-selector-design {
                position: relative;
                width: 100%;
                display: inline-grid;
                margin: 0;
                border: none;
                background-color: var(--kbdefault25-background-2);
                border-radius: var(--kbdefault25-radius);
            }

            body .kb-wrapper .kb-customise-design-selector .kb-customise-design-selector-selected {
                border: none;
                cursor: default;
            }

            body .kb-wrapper .kb-customise-design-selector .kb-customise-design-selector-design-link {
                display: block;
                padding-bottom: var(--kbdefault25-gap);
                border-radius: var(--kbdefault25-radius);
            }

            body .kb-wrapper .kb-customise-design-selector .kb-customise-design-selector-design-name {
                position: relative;
                width: 100%;
                display: block;
                font-size: var(--kbdefault25-paragraph-size);
                padding: 0;
                background-color: transparent;
                color: var(--kbdefault25-primary-1);
            }

            /* --- Color Tile Picker --- */

            body .kb-wrapper .kb-tile-picker-color {
                display: grid;
                grid-template-columns: repeat(var(--kbdefault25-field-color-tile-picker-columns), 1fr);
                gap: var(--kbdefault25-field-gap);
            }
                
            body .kb-wrapper .kb-tile-picker-color .kb-tile-picker-list-item {
                float: unset;
                width: 100%;
                display: inline-grid;
            }

            body .kb-wrapper .kb-tile-picker-radio:checked + .kb-tile-picker-tile {
                border-color: var(--kbdefault25-background-2);
            }

            body .kb-wrapper .kb-tile-picker-color .kb-tile-picker-label:has(.kb-tile-picker-radio:checked + .kb-tile-picker-tile) {
                border-radius: var(--kbdefault25-radius);
            }

            body .kb-wrapper .kb-print-group-color-disabled {
                filter: grayscale(.8);
                opacity: .2;
            }

            /* --- Color Picker Custom --- */

            body .kb-wrapper .kb-color-picker-custom,
            body .kb-wrapper .kb-color-picker-custom canvas {
                max-width: 100%;
            }
            
            body .kb-wrapper .kb-color-picker-custom .kb-custom-color-selector {
                background-color: var(--kb-selected-custom-color);
                box-shadow: 0 0 0 2px black;
                opacity: 1;
            }

            /* --- Image Tile Picker --- */

            body .kb-wrapper .kb-tile-picker,
            body .kb-wrapper .kb-editor-effect-panel .kb-tile-picker-color {
                display: grid;
                grid-template-columns: repeat(var(--kbdefault25-field-tile-picker-columns), 1fr);
                gap: var(--kbdefault25-field-gap);
            }

            body .kb-wrapper .kb-tile-picker .kb-tile-picker-list-item,
            body .kb-wrapper .kb-editor-effect-panel .kb-tile-picker-list-item,
            body .kb-wrapper .kb-editor-effect2-panel .kb-tile-picker-list-item,
            body .kb-wrapper .kb-editor-tail-panel .kb-tile-picker-list-item {
                float: unset;
                width: 100%;
                display: inline-grid;
            }

            body .kb-wrapper .kb-tile-picker-tile img,
            body .kb-wrapper .kb-tile-picker-tile.kb-tile-picker-tile-images img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

            /* --- Tile Picker HTML --- */

            body .kb-wrapper .kb-html-tile-picker {
                gap: var(--kbdefault25-field-gap);
            }

            body .kb-wrapper .kb-html-tile-picker-list-item {
                border: none;
            }

            body .kb-wrapper .kb-html-tile-picker-list-item .kb-html-tile-picker-label {
                border: 2px solid var(--kbdefault25-primary-1);
                border-radius: var(--kbdefault25-radius);
                padding: var(--kbdefault25-gap-half);
                background-color: var(--kbdefault25-background-1);
                width: 100%;
                display: block;
                box-sizing: border-box;
                transition:
                    border-color 200ms ease-in-out,
                    background-color 200ms ease-in-out;
            }

            body .kb-wrapper .kb-html-tile-picker-list-item .kb-html-tile-picker-tile {
                transition: color 200ms ease-in-out;
            }

            body .kb-wrapper .kb-html-tile-picker-radio-selected:after, 
            body .kb-wrapper .kb-html-tile-picker-radio:checked + .kb-html-tile-picker-tile:after {
                content: none;
            }

            body .kb-wrapper .kb-html-tile-picker-list-item.kb-selected .kb-html-tile-picker-label {
                border-color: var(--kbdefault25-secondary-1);
                background-color: var(--kbdefault25-secondary-1);
            }

            body .kb-wrapper .kb-html-tile-picker-list-item.kb-selected .kb-html-tile-picker-tile {
                color: var(--kbdefault25-background-1);
            }

            /* --- Image --- */

            body .kb-wrapper .kb-wizard-form-field-type-image [form-field-image] {
                display: flex;
                flex-wrap: wrap;
                gap: var(--kbdefault25-field-gap);
            }

            body .kb-wrapper .kb-wizard-form-field-type-image .kb-wizard-form-file-preview {
                order: -1;
                margin: 0;
                width: calc(60% - var(--kbdefault25-field-gap));
                background-color: var(--kbdefault25-background-2);
                object-fit: contain;
                aspect-ratio: 1 / 1;
                display: flex;
                border-radius: var(--kbdefault25-radius);
                overflow: hidden;
            }

            body .kb-wrapper .kb-wizard-form-field-type-image .kb-wizard-form-file-preview img {
                margin: auto;
                max-width: 100%;
                max-height: 100%;
            }

            body .kb-wrapper .kb-wizard-form-field-type-image .kb-wizard-form-field .kb-form-file-options {
                width: 40%;
                min-width: fit-content;
                display: flex;
                flex-direction: column;
                gap: var(--kbdefault25-field-gap);
            }
            
            body .kb-wrapper .kb-wizard-form-field-type-image .kb-wizard-form-field .kb-form-file-options .kb-button:not(:first-child) {
                margin-left: 0;
            }

            body .kb-wrapper .kb-wizard-form-field-type-image .kb-file-upload-success {
                display: none;
            }

                /* library */
                body .kb-wrapper .kb-form-field-image-library-heading {
                    background-color: transparent;
                    color: var(--kbdefault25-primary-1);
                    border: none;
                    font-weight: normal;
                    font-size: var(--kbdefault25-subtitle-size);
                    margin: 0 0 var(--kbdefault25-gap) 0;
                    padding: 0;
                }

            /* --- Color List --- */

            body .kb-wrapper .kb-colorlist {
                display: inline-block;
                width: 100%;
            }

            body .kb-wrapper .kb-colorlist .kb-table {
                border-collapse: collapse;
                margin-bottom: var(--kbdefault25-field-gap);
            }

            body .kb-wrapper .kb-colorlist thead tr {
                border-bottom: 2px solid var(--kbdefault25-primary-1);
            }

            body .kb-wrapper .kb-colorlist .kb-table-header-cell,
            body .kb-wrapper .kb-colorlist .kb-table .kb-table-cell {
                border-bottom: none;
                padding: 0;
            }

            body .kb-wrapper .kb-colorlist .kb-table-header-cell:not(:last-child) {
                padding: 0 var(--kbdefault25-gap-half) var(--kbdefault25-gap-half) 0;
            }

            body .kb-wrapper .kb-colorlist .kb-table-header-cell:first-child,
            body .kb-wrapper .kb-colorlist .kb-table .kb-table-cell:first-child {
                width: 20px;
                min-width: 20px;
                font-weight: bold;
            }
            
            body .kb-wrapper .kb-colorlist .kb-table .kb-table-cell:not(:last-child) {
                padding: var(--kbdefault25-gap-half) var(--kbdefault25-gap-half) 0 0;
            }

            body .kb-wrapper .kb-colorlist .kb-color-preview {
                height: 23px;
                width: 70px;
                border-radius: var(--kbdefault25-radius);
            }

            /* --- Radio Buttons --- */

            body .kb-wrapper .kb-radio-buttons {
                display: flex;
                flex-wrap: wrap;
                gap: var(--kbdefault25-gap);
            }
            
            body .kb-wrapper .kb-radio-buttons .kb-radio-wrapper {
                width: max(calc(50% - (var(--kbdefault25-gap) / 2)), 100px);
                min-width: fit-content;
            }

            /* --- Slider --- */

            body .kb-wrapper .kb-pattern-transform-slider-control {
                margin-top: 0;
            }

            body .kb-wrapper .noUi-target {
                border: none !important;
                box-shadow: none !important;
                background: var(--kbdefault25-secondary-1) !important;
                border-radius: var(--kbdefault25-button-radius);
            }

            body .kb-wrapper .noUi-base {
                margin: 0 0 0 6px;
                background: var(--kbdefault25-secondary-1) !important;
                border-radius: var(--kbdefault25-button-radius);
            }

            body .kb-wrapper .noUi-origin {
                background: var(--kbdefault25-background-2) !important;
                border-radius: 0 var(--kbdefault25-button-radius) var(--kbdefault25-button-radius) 0;
            }

            body .kb-wrapper .noUi-horizontal .noUi-handle {
                height: 20px !important;
                width: 20px !important;
                top: -3px !important;
                left: -15px !important;
                background: var(--kbdefault25-primary-1) !important;
                border: none !important;
                border-radius: var(--kbdefault25-button-radius);
                cursor: ew-resize;
            }

                /* --- Transform --- */

                body .kb-wrapper .kb-pattern-transform {
                    margin: 0;
                    display: flex;
                    flex-wrap: wrap;
                    gap: var(--kbdefault25-gap);
                }

                body .kb-wrapper .kb-pattern-transform-slider {
                    margin: 0;
                    width: calc(50% - (var(--kbdefault25-gap) / 2));
                    height: unset;
                }

                body .kb-wrapper .kb-transform-reset {
                    float: unset;
                    font-weight: normal;
                    margin: 0 auto;
                }

            /* --- Text Box --- */

            body .kb-wrapper .kb-remaining-characters {
                width: 100%;
                text-align: right;
                margin-top: var(--kbdefault25-gap-half);
            }

            body .kb-wrapper .kb-remaining-characters[data-remaining="10"],
            body .kb-wrapper .kb-remaining-characters[data-remaining="9"],
            body .kb-wrapper .kb-remaining-characters[data-remaining="8"],
            body .kb-wrapper .kb-remaining-characters[data-remaining="7"],
            body .kb-wrapper .kb-remaining-characters[data-remaining="6"],
            body .kb-wrapper .kb-remaining-characters[data-remaining="5"],
            body .kb-wrapper .kb-remaining-characters[data-remaining="4"],
            body .kb-wrapper .kb-remaining-characters[data-remaining="3"],
            body .kb-wrapper .kb-remaining-characters[data-remaining="2"],
            body .kb-wrapper .kb-remaining-characters[data-remaining="1"],
            body .kb-wrapper .kb-remaining-characters[data-remaining="0"] {
                color: var(--kbdefault25-alert);
            }

            /* --- Dropdown --- */

            body .kb-wrapper .select2-container .select2-choice {
                border-radius: var(--kbdefault25-radius);
                border: 2px solid var(--kbdefault25-primary-1);
                background-color: transparent;
                height: var(--kbdefault25-paragraph-size);
                line-height: unset;
                padding: var(--kbdefault25-gap-half);
                box-shadow: none;
            }

            body .kb-wrapper .select2-container .select2-choice > .select2-chosen {
                height: calc(var(--kbdefault25-paragraph-size) + var(--kbdefault25-gap));
                line-height: calc(var(--kbdefault25-paragraph-size) + var(--kbdefault25-gap));
                position: absolute;
                top: 0;
                width: calc(100% - 36px);
            }

            body .kb-wrapper .select2-container .select2-choice > .select2-chosen span,
            body .kb-wrapper .select2-container .select2-choice .select2-arrow {
                color: var(--kbdefault25-primary-1);
            }

            body .kb-wrapper .select2-container .select2-choice .select2-arrow {
                background: transparent;
                width: 30px;
            }
            
            body .kb-wrapper .select2-container .select2-choice .select2-arrow::after,
            body .select2-dropdown-open .select2-choice .select2-arrow::after {
                font-family: var(--kbdefault25-material-ui-font);
                font-size: 32px;
            }

            body .kb-wrapper .select2-container .select2-choice .select2-arrow b,
            body .select2-dropdown-open .select2-choice .select2-arrow b {
                display: none;
            }

            body .select2-container .select2-choice {
                padding-left: var(--kbdefault25-gap-half);
            }

            body .kb-wrapper .kb-select-color-preview, 
            body .kb-select2 .kb-select-color-preview, 
            body .kb-select-color .kb-select-color-preview {
                border: 1px solid var(--kbdefault25-primary-1);
            }

                body .select2-dropdown-open .select2-choice,
                body .select2-dropdown-open.direction-up .ui-select-dropdown {
                    border-color: var(--kbdefault25-primary-1);
                    border-width: 2px;
                    border-radius: var(--kbdefault25-radius);
                    background: var(--kbdefault25-background-1);
                }
                
                body .select2-dropdown-open:not(.direction-up) .select2-choice {
                    height: calc(var(--kbdefault25-paragraph-size) + var(--kbdefault25-gap));
                    border-bottom-left-radius: 0;
                    border-bottom-right-radius: 0;
                    padding-left: var(--kbdefault25-gap-half);
                    border-bottom: none;
                }

                body .ui-select-container[theme="select2"].direction-up .ui-select-dropdown, 
                body .ui-select-container.select2.direction-up .ui-select-dropdown {
                    border-bottom-width: 0;
                    margin-top: -8px;
                    border-radius: var(--kbdefault25-radius);
                    border-bottom-left-radius: 0;
                    border-bottom-right-radius: 0;
                    border-top-width: 2px;
                }
                
                body .ui-select-container[theme="select2"].direction-up.select2-dropdown-open .ui-select-match, 
                body .ui-select-container.select2.direction-up.select2-dropdown-open .ui-select-match {
                    border-bottom: 2px solid var(--kbdefault25-primary-1);
                    border-radius: var(--kbdefault25-radius);
                    border-top-left-radius: 0;
                    border-top-right-radius: 0;
                    height: fit-content;
                }

                body .select2-container .select2-choice > .select2-chosen {
                    line-height: calc(var(--kbdefault25-paragraph-size) + var(--kbdefault25-gap));
                    font-size: var(--kbdefault25-paragraph-size);
                    font-family: var(--kbdefault25-paragraph-font);
                    margin-right: var(--kbdefault25-gap);
                    letter-spacing: normal;
                }

                body .select2-dropdown-open .select2-choice .select2-arrow {
                    width: 30px;
                }

                body .select2-dropdown-open .select2-choice .select2-arrow::after {
                    top: 3px;
                    position: relative;
                }

                body .select2-dropdown-open .select2-drop-active {
                    background: var(--kbdefault25-background-1);
                    border: 2px solid var(--kbdefault25-primary-1);
                    border-top: none;
                    border-bottom-left-radius: var(--kbdefault25-radius);
                    border-bottom-right-radius: var(--kbdefault25-radius);
                }

                body .select2-dropdown-open .select2-search,
                body .select2-dropdown-open .select2-results {
                    padding: 0;
                    margin: 0;
                }

                body .select2-dropdown-open .ui-select-choices-row {
                    color: var(--kbdefault25-primary-1);
                    font-family: var(--kbdefault25-paragraph-font);
                    font-size: var(--kbdefault25-paragraph-size);
                }

                body .select2-dropdown-open .ui-select-choices-row:hover {
                    background-color: var(--kbdefault25-secondary-1-25);
                }

                body .select2-dropdown-open .select2-results .select2-highlighted {
                    background-color: var(--kbdefault25-secondary-1);
                    color: var(--kbdefault25-background-1);
                }

                body .select2-dropdown-open .select2-results .select2-result-label {
                    padding: var(--kbdefault25-gap-quarter) var(--kbdefault25-gap-half);
                }

                body .select2-dropdown-open .select2-results .select2-result-label span {
                    letter-spacing: unset;
                }

            /* --- Editor --- */
            
            body .kb-wrapper .kb-editor-placement:has(.kb-editor-placement-selected) {                
                margin-bottom: var(--kbdefault25-gap);
            }

            body .kb-wrapper .kb-editor-placement .kb-add-text-help {
                color: var(--kbdefault25-primary-1);
                margin: 0;
            }

            body .kb-wrapper .kb-editor-placement .kb-editor-info,
            body .kb-wrapper .kb-editor-placement .kb-editor-clipart-info {
                display: flex;
                flex-wrap: wrap;
                gap: var(--kbdefault25-gap);
                justify-content: center;
            }

            body .kb-wrapper .kb-editor-placement .kb-editor-info {
                margin-bottom: var(--kbdefault25-gap);
            }

            body .kb-wrapper .kb-editor-placement .kb-editor-scale-buttons {
                display: contents;
            }

            body .kb-wrapper .kb-editor-placement .kb-editor-info .kb-button {
                padding: var(--kbdefault25-gap-half) var(--kbdefault25-gap);
                display: flex;
                margin: 0;
                opacity: 1;
            }

            body .kb-wrapper .kb-editor-placement .kb-editor-slider-wrapper {
                margin: 0;
            }

            body .kb-wrapper .kb-editor-file-upload-error {
                margin: var(--kbdefault25-gap) var(--kbdefault25-gap-double) 0;
            }

            /* touch controls */
            body .kb-wrapper .kb-editor-buttons {
                background-color: var(--kbdefault25-background-1);
                border-radius: var(--kbdefault25-button-radius);
                border: 2px solid var(--kbdefault25-primary-1);
                position: absolute;
                display: flex;
                flex-direction: column;
                gap: var(--kbdefault25-gap-double);
                justify-content: center;
                padding: var(--kbdefault25-gap);
                box-sizing: border-box;
                bottom: calc(var(--kbdefault25-gap-double) + 51px);
                left: var(--kbdefault25-gap);
                margin: 0;
                width: fit-content;
            }

            body .kb-wrapper .kb-editor-buttons::before {
                content: none;
            }

            body .kb-wrapper .kb-editor-buttons .kb-editor-button {
                position: relative;
                background: none;
                font-size: var(--kbdefault25-subtitle-size);
                transform: none;
                border: none;
                margin: 0;
                width: unset;
                height: unset;
                top: unset;
                left: unset;
                right: unset;
            }

                /* --- Text --- */

                body .kb-wrapper .kb-editor-placement .kb-add-text-help {
                    display: block !important;
                    text-align: left;
                    font-size: var(--kbdefault25-paragraph-size);
                    margin: 0 0 20px 0;
                }

                body .kb-wrapper .kb-editor-placement .kb-editor-placed-texts {
                    display: flex;
                    flex-direction: column;
                    gap: var(--kbdefault25-gap);
                }

                body .kb-wrapper .kb-editor-placement .kb-editor-placed-text {
                    display: flex;
                    gap: var(--kbdefault25-gap);
                }

                body .kb-wrapper .kb-editor-placement .kb-remove-text-item {
                    position: relative;
                    height: fit-content;
                    width: fit-content;
                    bottom: unset;
                    right: unset;
                }

                body .kb-wrapper .kb-editor-placement .kb-editor-placed-text-selected::after {
                    content: none;
                }

                body .kb-wrapper .kb-editor-placement .kb-editor-toggle-color-radio-buttons,
                body .kb-wrapper .kb-editor-placement .kb-editor-toggle-stroke-radio-buttons {
                    display: flex;
                    gap: var(--kbdefault25-gap);
                    flex-wrap: wrap;
                }

                body .kb-wrapper .kb-editor-placement .kb-editor-toggle-color-radio-buttons span,
                body .kb-wrapper .kb-editor-placement .kb-editor-toggle-stroke-radio-buttons span {
                    color: var(--kbdefault25-primary-1);
                }

                body .kb-wrapper .kb-editor-text-controls {
                    padding-top: 0;
                }

                body .kb-wrapper .kb-editor-text-controls:not(.kb-editor-text-controls-text-selected) {
                    display: none; /* hidden until selected */
                }

                /* sources */
                body .kb-wrapper .kb-placement-wrapper:has(.kb-editor-placed-texts li) .kb-editor-add-text-source-panel {
                    margin-top: var(--kbdefault25-gap);
                }

                body .kb-wrapper .kb-editor-placed-text[data-text-source-name]::before {
                    content: none;
                }

                body .kb-wrapper .kb-editor-selected .kb-editor-add-text-source-panel {
                    opacity: .5;
                }

                body .kb-wrapper .kb-editor-add-text-source-panel {
                    display: flex;
                    flex-wrap: wrap;
                    gap: var(--kbdefault25-gap);
                }
            
                body .kb-wrapper .kb-editor-add-text-source-panel .kb-editor-add-source-radio-buttons {
                    width: max(calc(50% - (var(--kbdefault25-gap) / 2)), 100px);
                    min-width: fit-content;
                }

                body .kb-wrapper .kb-editor-placed-texts[ng-show="placement.showTextSourcePanel"] {
                    flex-direction: row;
                    flex-wrap: wrap;
                    gap: 0;
                }
                
                body .kb-wrapper .kb-editor-selected .kb-editor-placed-texts[ng-show="placement.showTextSourcePanel"] {
                    margin-bottom: var(--kbdefault25-gap-half) !important;
                }
                
                body .kb-wrapper .kb-editor-placed-texts[ng-show="placement.showTextSourcePanel"] li {
                    color: var(--kbdefault25-primary-1-50);
                }
                
                body .kb-wrapper .kb-editor-placed-texts[ng-show="placement.showTextSourcePanel"] li:not(:last-child)::after {
                    content: ", ";
                    margin: 0 4px 0 -3px;
                    color: var(--kbdefault25-primary-1);
                }

                /* tabs */
                body .kb-wrapper .kb-editor .kb-editor-tabs,
                body .kb-wrapper .kb-editor .kb-editor-tabs.kb-editor-tabs-length {
                    display: flex;
                    flex-wrap: balance;
                    gap: var(--kbdefault25-gap-half);
                }
                
                body .kb-wrapper .kb-editor .kb-editor-tabs li,
                body .kb-wrapper .kb-editor .kb-editor-tabs.kb-editor-tabs-length li {
                    flex: 1;
                }

                body .kb-wrapper .kb-editor .kb-editor-tabs .kb-button,
                body .kb-wrapper .kb-editor .kb-editor-tabs .kb-button,
                body .kb-wrapper .kb-editor .kb-editor-tabs.kb-editor-tabs-length .kb-button:hover,
                body .kb-wrapper .kb-editor .kb-editor-tabs.kb-editor-tabs-length .kb-button:hover {
                    cursor: pointer;
                    opacity: 1;
                    justify-content: center;
                    text-wrap: nowrap;
                    width: 100%;
                }

                body .kb-wrapper .kb-editor .kb-editor-tabs .kb-button.kb-editor-tab-selected,
                body .kb-wrapper .kb-editor .kb-editor-tabs .kb-button.kb-editor-tab-selected,
                body .kb-wrapper .kb-editor .kb-editor-tabs.kb-editor-tabs-length .kb-button.kb-editor-tab-selected:hover,
                body .kb-wrapper .kb-editor .kb-editor-tabs.kb-editor-tabs-length .kb-button.kb-editor-tab-selected:hover {
                    color: var(--kbdefault25-background-1);
                    background-color: var(--kbdefault25-secondary-1);
                    cursor: default;
                }

                /* color and font */
                body .kb-wrapper .kb-editor-placement .kb-tile-picker-base {
                    padding: 0;
                }

                body .kb-wrapper .kb-editor-placement .kb-editor-font-panel {
                    display: flex;
                    gap: var(--kbdefault25-gap);
                }

                body .kb-wrapper .kb-editor-placement .kb-editor-font-panel::before,
                body .kb-wrapper .kb-editor-placement .kb-editor-font-panel::after {
                    content: none;
                }

                body .kb-wrapper .kb-editor-placement .kb-editor-font-button.kb-editor-bold,
                body .kb-wrapper .kb-editor-placement .kb-editor-font-button.kb-editor-italic {
                    height: unset;
                    line-height: unset;
                    font-weight: normal;
                    font-style: normal;
                }
                
                body .kb-wrapper .kb-editor-placement .kb-editor-font-button.kb-editor-italic {
                    font-style: italic;
                }

                body .kb-wrapper .kb-editor-placement .kb-editor-font-button.kb-editor-bold {
                    font-weight: 900;
                }

                /* --- Image / Clipart --- */
                
                body .kb-wrapper .kb-editor-placement .kb-editor-placement-new-image-label,
                body .kb-wrapper .kb-editor-placement .kb-upload-clipart,
                body .kb-wrapper .kb-editor-placement .kb-upload-replace-clipart {
                    cursor: pointer;
                }

                body .kb-wrapper .kb-editor-placement .kb-upload-clipart input[type="file"],
                body .kb-wrapper .kb-editor-placement .kb-upload-replace-clipart input[type="file"] {
                    width: 0;
                }

                body .kb-wrapper .kb-editor-placement .kb-upload-clipart span,
                body .kb-wrapper .kb-editor-placement .kb-upload-replace-clipart span {
                    display: block;
                    color: currentColor;
                }
                
                body .kb-wrapper .kb-editor-placement .kb-editor-placement-new-image,
                body .kb-wrapper .kb-editor-placement .kb-upload-clipart,
                body .kb-wrapper .kb-editor-placement .kb-editor-add {
                    margin: var(--kbdefault25-gap) auto;
                    float: unset;
                    height: fit-content;
                }

                body .kb-wrapper .kb-editor-placement .kb-editor-placement-new-image {
                    width: 100%;
                }
                
                body .kb-wrapper .kb-editor-placement .kb-editor-placement-new-image .kb-editor-add {
                    margin: 0 auto;
                }

                body .kb-wrapper .kb-editor-placement .kb-editor-placed-images-heading {
                    background-color: transparent;
                    border: none;
                    color: var(--kbdefault25-primary-1);
                    font-weight: normal;
                    font-size: var(--kbdefault25-subtitle-size);
                    margin: var(--kbdefault25-gap) var(--kbdefault25-gap-double);
                    padding: 0;
                    border-top: 1px solid var(--kbdefault25-primary-2);
                    padding-top: var(--kbdefault25-gap);
                    cursor: default;
                }

                body .kb-wrapper .kb-editor-placement-image[ng-switch-when="image"] .kb-editor-image-library,
                body .kb-wrapper .kb-editor-placement-image[ng-switch-when="clipart"] [ng-if="placement.groups.length == 0"] .kb-editor-image-library,
                body .kb-wrapper .kb-editor-placement-image .kb-editor-placed-images,
                body .kb-wrapper .kb-detached-editor-library .kb-detached-editor-library-uploaded,
                body .kb-wrapper .kb-form-field-image-library-images {
                    display: grid;
                    grid-template-columns: repeat(var(--kbdefault25-field-editor-columns), 1fr);
                    gap: var(--kbdefault25-gap);
                    overflow: visible;
                    margin-top: 0 !important;
                }

                body .kb-wrapper .kb-editor-placement-image .kb-editor-placed-images:not(:has(> li)) {
                    margin: 0 !important;
                }

                body .kb-wrapper .kb-editor-placement-image .kb-editor-image-library .kb-editor-add-image,
                body .kb-wrapper .kb-editor-placement-image .kb-editor-placed-images .kb-editor-image,
                body .kb-wrapper .kb-detached-editor-library .kb-editor-image,
                body .kb-wrapper .kb-form-field-image-library-images .kb-form-field-image-library-image {
                    width: 100%;
                    display: inline-grid;
                    height: unset;
                    aspect-ratio: 1 / 1;
                    border: 2px solid var(--kbdefault25-background-2);
                    border-radius: var(--kbdefault25-radius);
                    overflow: hidden;
                    box-sizing: border-box;
                }

                body .kb-wrapper .kb-detached-editor-library .kb-editor-add-image-link,
                body .kb-wrapper .kb-detached-editor-library .kb-editor-add-image-link .kb-editor-image-thumb,
                body .kb-wrapper .kb-editor-placement-image .kb-editor-image .kb-editor-add-image-link,
                body .kb-wrapper .kb-editor-placement-image .kb-editor-images .kb-editor-image-thumb, 
                body .kb-wrapper .kb-editor-placement-image .kb-editor-images .kb-editor-folder,
                body .kb-wrapper .kb-editor-placement-image .kb-editor-image .kb-editor-placed-image-button,
                body .kb-wrapper .kb-editor-placement-image .kb-editor-image .kb-editor-placed-image-button svg,
                body .kb-wrapper .kb-form-field-image-library-images .kb-form-field-image-library-image-thumb {
                    height: 100%;
                    width: 100%;
                    display: block;
                    border-radius: 0;
                    border: none;
                    background-color: transparent;
                    margin: 0;
                }

                body .kb-wrapper .kb-editor-placement-image .kb-editor-image-library .kb-remove-image-from-library,
                body .kb-wrapper .kb-editor-placement-image .kb-editor-image .kb-remove-image-item,
                body .kb-wrapper .kb-detached-editor-library-section .kb-editor-image .kb-remove-image-item,
                body .kb-wrapper .kb-form-field-image-library-images .kb-form-field-image-library-image .kb-remove-image-item {
                    background: var(--kbdefault25-background-2);
                    border-top-left-radius: var(--kbdefault25-radius);
                    right: 0;
                    bottom: 0;
                    width: unset;
                    height: unset;
                }

                body .kb-wrapper .kb-editor-placement-image .kb-editor-image-library .kb-remove-image-from-library::before,
                body .kb-wrapper .kb-editor-placement-image .kb-editor-image .kb-remove-image-item::before,
                body .kb-wrapper .kb-detached-editor-library-section .kb-editor-image .kb-remove-image-item::before,
                body .kb-wrapper .kb-form-field-image-library-images .kb-form-field-image-library-image .kb-remove-image-item::before {
                    font-size: 140%;
                    display: block;
                    font-family: var(--kbdefault25-material-ui-font);
                    padding: calc(var(--kbdefault25-gap) / 5);
                    color: var(--kbdefault25-primary-1);
                }

                body .kb-wrapper .kb-editor-placed-image-selected:after {
                    content: none;
                }

                    /* --- Clipart Fields */

                    body .kb-wrapper .kb-editor-clipart-options-fields {
                        margin-bottom: var(--kbdefault25-gap);
                    }

                    body .kb-wrapper .kb-editor-clipart-options-fields .kb-clipart-field > div:not(:has(.kb-wizard-form-linked)) {
                        margin-top: var(--kbdefault25-gap);
                        padding-top: var(--kbdefault25-gap);
                        border-top: 1px solid var(--kbdefault25-primary-2);
                    }

                    body .kb-wrapper .kb-editor-clipart-options-fields .kb-clipart-field:first-child > div {
                        margin-top: 0 !important;
                        padding-top: 0 !important;
                        border-top: none !important;
                    }

                    body .kb-wrapper .kb-editor-clipart-options-fields .kb-clipart-field [ng-switch-when="image"] > .kb-wizard-form-field {
                        width: 100%;
                    }

                    body .kb-wrapper .kb-editor-placement .kb-upload-replace-clipart {
                        margin: 0 auto;
                    }

                    body .kb-wrapper .kb-editor-clipart-options-fields .kb-clipart-field [ng-switch-when="image"] > .kb-wizard-form-label,
                    body .kb-wrapper .kb-editor-clipart-options-fields .kb-clipart-field [ng-switch-when="image"] .kb-wizard-form-file-preview,
                    body .kb-wrapper .kb-editor-clipart-options-fields .kb-clipart-field [ng-switch-when="image"] .kb-file-upload-clear {
                        display: none;
                    }

                    body .kb-wrapper .kb-editor-clipart-options-fields .kb-clipart-field .kb-wizard-form-linked {
                        margin-inline: var(--kbdefault25-gap-double);
                    }

                    body .kb-wrapper .kb-editor-placement-image[ng-switch-when="clipart"] .kb-editor-image-library {
                        display: grid;
                        grid-template-columns: repeat(var(--kbdefault25-field-tile-picker-columns), 1fr);
                        gap: var(--kbdefault25-gap);
                        overflow: visible;
                    }

                    /* --- Clipart Groups --- */

                    body .kb-wrapper .kb-editor-placement .kb-editor-clipart-groups {
                        margin-block: 0 !important;
                    }

                    body .kb-wrapper .kb-editor-placement .kb-editor-clipart-groups-wrapper .kb-editor-images {
                        margin-bottom: var(--kbdefault25-gap) !important
                    }
                    
                    body .kb-wrapper .kb-editor-placement .kb-editor-clipart-groups-wrapper .kb-editor-clipart-groups:first-child .kb-editor-clipart-group-heading {
                        margin-top: var(--kbdefault25-gap);
                        padding-top: 0;
                        border-top: none;
                    }

                    /* --- Detached Editor --- */

                    body .kb-wrapper .kb-detached-editor-library-wrapper .kb-detached-editor-library-title {
                        font-size: var(--kbdefault25-title-size);
                        color: var(--kbdefault25-primary-1);
                    }

                    body .kb-wrapper .kb-detached-editor-library-wrapper .kb-detached-editor-library-subtitle {
                        font-size: var(--kbdefault25-paragraph-size);
                        color: var(--kbdefault25-primary-1);
                        margin-top: var(--kbdefault25-gap-half);
                    }

                    body .kb-wrapper .kb-detached-editor-library {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                    }

                    body .kb-wrapper .kb-detached-editor-library .kb-detached-editor-library-uploaded {
                        width: 100%;
                    }

                    body .kb-wrapper .kb-detached-editor-library .kb-detached-editor-library-options {
                        margin-top: var(--kbdefault25-gap);
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: center;
                        gap: var(--kbdefault25-gap);
                    }

                    body .kb-wrapper .kb-placement-wrapper .kb-detached-editor-library-options {
                        display: flex;
                        justify-content: center;
                        margin-bottom: var(--kbdefault25-gap);
                    }
                    
                    body .kb-wrapper .kb-detached-editor-library-placements-dialog,
                    body .kb-wrapper .kb-detached-editor-library-images-dialog {
                        width: min(900px, 90vw);
                    }

                    /* placements dialog */
                    body .kb-wrapper .kb-detached-editor-library-placements-dialog .kb-dialog-content {
                        display: flex;
                        flex-wrap: wrap;
                    }
                    
                    body .kb-wrapper .kb-detached-editor-library-placements-dialog .kb-detached-editor-library-image-wrapper,
                    body .kb-wrapper .kb-detached-editor-library-placements-dialog .kb-detached-editor-library-placements-wrapper {
                        width: 50%;
                        box-sizing: border-box;
                    }

                    body .kb-wrapper .kb-detached-editor-library-placements-dialog .kb-detached-editor-library-image-wrapper { 
                        padding-right: var(--kbdefault25-gap-half);
                        padding-bottom: 0;
                        margin-bottom: 0;
                        border-bottom: none;
                    }

                    body .kb-wrapper .kb-detached-editor-library-placements-dialog  .kb-detached-editor-library-image-name {
                        text-overflow: ellipsis;
                        text-wrap: nowrap;
                        overflow: hidden;
                    }
                    
                    body .kb-wrapper .kb-detached-editor-library-placements-dialog .kb-detached-editor-library-image-wrapper::before {
                        content: " ";
                        position: absolute;
                        background-color: var(--kbdefault25-background-2);
                        top: 0;
                        left: 0;
                        width: 50%;
                        height: 100%;
                        z-index: -1;
                    }

                    body .kb-wrapper .kb-detached-editor-library-placements-dialog .kb-detached-editor-library-image-wrapper .kb-detached-editor-library-image {
                        max-width: 100%;
                        width: 300px;
                        height: unset;
                        max-height: unset;
                        aspect-ratio: 1 / 1;
                        margin: var(--kbdefault25-gap) 0;
                        object-fit: scale-down;
                    }

                    body .kb-wrapper .kb-detached-editor-library-placements-dialog .kb-detached-editor-library-placements-wrapper {
                        padding-left: var(--kbdefault25-gap-half);
                        margin: auto;
                    }

                    body .kb-wrapper .kb-detached-editor-library-placements-dialog .kb-detached-editor-library-title:not(:empty) {
                        margin-bottom: var(--kbdefault25-gap-half);
                        font-size: var(--kbdefault25-title-size);
                        font-family: var(--kbdefault25-title-font);
                        font-weight: bold;
                        width: 100%;
                    }
                    
                    body .kb-wrapper .kb-detached-editor-library-placements-dialog .kb-detached-editor-library-subtitle:not(:empty) {
                        margin-bottom: var(--kbdefault25-gap);
                        width: 100%;
                    }

                    body .kb-wrapper .kb-detached-editor-library-placements-dialog .kb-detached-editor-library-placements {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: center;
                        align-items: center;
                        gap: var(--kbdefault25-gap);
                    }

                    body .kb-wrapper .kb-detached-editor-library-placements-dialog .kb-button-panel {
                        flex-direction: row;
                    }

                    /* library dialog */
                    body .kb-wrapper .kb-detached-editor-library-images-dialog .kb-dialog-content {
                        background-color: var(--kbdefault25-background-2);
                        text-align: left;
                        padding: 0;
                    }

                    body .kb-wrapper .kb-detached-editor-library-images-dialog .kb-detached-editor-library-images-title {
                        background-color: var(--kbdefault25-background-1);
                        font-size: var(--kbdefault25-title-size);
                        font-family: var(--kbdefault25-title-font);
                        font-weight: bold;
                        padding: var(--kbdefault25-gap);
                        padding-bottom: 0;
                    }
                    
                    body .kb-wrapper .kb-detached-editor-library-images-dialog  .kb-detached-editor-library-images-subtitle {
                        padding: 0 var(--kbdefault25-gap);
                        padding-top: var(--kbdefault25-gap-half);
                        background-color: var(--kbdefault25-background-1);
                    }

                    body .kb-wrapper .kb-detached-editor-library-images-dialog .kb-detached-editor-library-section {
                        margin: 0;
                    }

                    body .kb-wrapper .kb-detached-editor-library-images-dialog .kb-detached-editor-library-section-title {
                        background-color: var(--kbdefault25-background-1);
                        font-size: var(--kbdefault25-subtitle-size);
                        padding: var(--kbdefault25-gap);
                        position: sticky;
                        top: 0;
                        z-index: 1;
                    }

                    body .kb-wrapper .kb-detached-editor-library-images-dialog .kb-detached-editor-library {
                        margin: 0 !important;
                        padding: var(--kbdefault25-gap);
                    }

                    body .kb-wrapper .kb-detached-editor-library-images-dialog .kb-editor-images {
                        grid-template-columns: repeat(var(--kbdefault25-field-detached-editor-columns), 1fr);
                    }

                    body .kb-wrapper .kb-detached-editor-library-images-dialog .kb-editor-image {
                        border-color: var(--kbdefault25-primary-1-25);
                        background-color: var(--kbdefault25-background-1);
                    }

                    body .kb-wrapper .kb-detached-editor-library-images-dialog .kb-editor-image:hover {
                        box-shadow: 0 0 0 4px var(--kbdefault25-background-2), 0 0 0 6px var(--kbdefault25-primary-1-50) !important;
                    }

                    body .kb-wrapper .kb-detached-editor-library-images-dialog .kb-validation {
                        position: absolute;
                        left: 50%;
                        bottom: calc(var(--kbdefault25-gap) * 5);
                        transform: translateX(-50%);
                        width: max-content;
                        padding: var(--kbdefault25-gap-half) var(--kbdefault25-gap) !important;
                        border: none;
                        border-radius: var(--kbdefault25-radius);
                        background-color: var(--kbdefault25-secondary-1);
                        box-shadow: 0 0 20px 0 var(--kbdefault25-primary-1-50);
                        z-index: 1;
                    }

                    body .kb-wrapper .kb-detached-editor-library-images-dialog .kb-validation div:not(.kb-validation-action):not(.kb-button),
                    body .kb-wrapper .kb-detached-editor-library-images-dialog .kb-validation span:not(.kb-validation-action):not(.kb-button),
                    body .kb-wrapper .kb-detached-editor-library-images-dialog .kb-validation a:not(.kb-validation-action):not(.kb-button),
                    body .kb-wrapper .kb-detached-editor-library-images-dialog .kb-validation p:not(.kb-validation-action):not(.kb-button),
                    body .kb-wrapper .kb-detached-editor-library-images-dialog .kb-validation li:not(.kb-validation-action):not(.kb-button) {
                        color: var(--kbdefault25-background-1);
                        font-style: normal;
                    }

            /* --- Team Details --- */

            /* tabs */
            body .kb-wrapper .kb-team-details .kb-team-details-tabs {
                border-radius: var(--kbdefault25-button-radius);
                background-color: var(--kbdefault25-primary-2-25);
                margin-top: var(--kbdefault25-gap) !important;
                position: relative;
                display: flex;
                flex-direction: row-reverse;
            }
            
            body .kb-wrapper .kb-team-details .kb-team-details-tabs::before {
                content: " ";
                display: block;
                position: absolute;
                width: 50%;
                height: 100%;
                background-color: var(--kbdefault25-primary-1);
                border-radius: var(--kbdefault25-button-radius);
                left: 0;
                transition: 300ms linear left;
                transition-delay: 200ms;
            }
            
            body .kb-wrapper .kb-team-details .kb-team-details-tabs:has(li:nth-child(2) .kb-team-details-tab-selected)::before {
                left: 50%;
            }

            body .kb-wrapper .kb-team-details .kb-team-details-tabs li,
            body .kb-wrapper .kb-team-details .kb-team-details-tabs li .kb-button {
                width: 100%;
                text-align: center;
                justify-content: center;
            }
            
            body .kb-wrapper .kb-team-details .kb-team-details-tabs li .kb-button,
            body .kb-wrapper .kb-team-details .kb-team-details-tabs li .kb-button:hover,            
            body .kb-wrapper .kb-team-details .kb-team-details-tabs li .kb-team-details-tab-selected,
            body .kb-wrapper .kb-team-details .kb-team-details-tabs li .kb-team-details-tab-selected:hover {
                padding: calc(var(--kbdefault25-gap) / 1.5) 5px;
                border-radius: var(--kbdefault25-button-radius);
                color: var(--kbdefault25-background-1);
                font-weight: bold;
                background-color: transparent;
                opacity: 1;
                z-index: 1;
                position: relative;
                transition: 300ms linear color;
                transition-delay: 200ms;
            }

            /* note: these are opposite */
            body .kb-wrapper .kb-team-details .kb-team-details-tabs li .kb-team-details-tab-selected,
            body .kb-wrapper .kb-team-details .kb-team-details-tabs li .kb-team-details-tab-selected:hover { 
                color: var(--kbdefault25-primary-1);
                cursor: pointer;
            }

            /* team details import */
            body .kb-wrapper .kb-tdi {
                margin: 0 0 var(--kbdefault25-gap) 0;
            }

            body .kb-wrapper .kb-team-details .kb-tdi-buttons {
                display: flex;
                padding: 0;
                margin: var(--kbdefault25-gap-half) var(--kbdefault25-gap-double) 0 var(--kbdefault25-gap-double);
                gap: var(--kbdefault25-gap);
            }

            body .kb-wrapper .kb-team-details-tabs.ng-hide ~ .kb-tdi .kb-tdi-buttons {
                margin-top: var(--kbdefault25-gap);
            }
            
            body .kb-wrapper .kb-team-details .kb-tdi-buttons .kb-button  {
                width: 100%;
                margin: 0;
                justify-content: center;
            }

            body .kb-wrapper .kb-team-details .kb-tdi-buttons .kb-button.kb-tdi-download-button::before,
            body .kb-wrapper .kb-team-stores-product-customize .kb-team-stores-unit-upload-buttons .kb-button.kb-tdi-download-button::before { content: "download"; }
            body .kb-wrapper .kb-team-details .kb-tdi-buttons .kb-button.kb-tdi-upload-button::before,
            body .kb-wrapper .kb-team-stores-product-customize .kb-team-stores-unit-upload-buttons .kb-button.kb-tdi-upload-button::before { content: "upload"; }

            /* teams */
            body .kb-wrapper .kb-team-details .kb-pane-teams .kb-group,
            body .kb-wrapper .kb-team-details .kb-pane-teams {
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            body .kb-wrapper .kb-wizard-group-header span:last-child {
                font-weight: normal;
            }
            
            body .kb-wrapper .kb-team-details .kb-pane-teams .kb-group table {
                font-size: var(--kbdefault25-paragraph-size);
            }

            body .kb-wrapper .kb-team-details .kb-pane-teams .kb-group table,
            body .kb-wrapper .kb-team-details .kb-pane-teams > div {
                width: 100%;
            }

            body .kb-wrapper .kb-team-details .kb-pane-teams .kb-add-unit {
                margin: var(--kbdefault25-gap) 0 var(--kbdefault25-gap-half) 0;
            }
            
            body .kb-wrapper .kb-team-details .kb-pane-teams .kb-add-unit,
            body .kb-wrapper .kb-team-details .kb-pane-teams .kb-add-team {
                background-color: var(--kbdefault25-background-2);
                width: 100%;
                box-sizing: border-box;
                border-radius: var(--kbdefault25-radius);
                justify-content: center;
            }

            body .kb-wrapper .kb-team-details .kb-pane-teams .kb-add-unit:hover,
            body .kb-wrapper .kb-team-details .kb-pane-teams .kb-add-team:hover {
                background-color: var(--kbdefault25-primary-2-50);
            }
            
            body .kb-wrapper .kb-team-details .kb-pane-teams .kb-add-unit::before { content: "person"; }
            body .kb-wrapper .kb-team-details .kb-pane-teams .kb-add-team::before { content: "groups"; }

            body .kb-wrapper .kb-team-details .kb-pane-teams .kb-team-table {
                margin-bottom: var(--kbdefault25-gap);
            }

            body .kb-wrapper .kb-team-details .kb-table .kb-table-cell {
                color: var(--kbdefault25-primary-1);
                padding: 0;
            }

            body .kb-wrapper .kb-team-details .kb-table .kb-table-cell .kb-remove::before,
            body .kb-wrapper .kb-team-details .kb-table .kb-table-cell .kb-preview::before {
                font-size: 22px;
                display: inline-block;
                color: var(--kbdefault25-primary-1);
            }

            body .kb-wrapper .kb-team-details .kb-table .kb-table-cell.kb-team-remove,
            body .kb-wrapper .kb-team-details .kb-table .kb-table-cell.kb-unit-preview,
            body .kb-wrapper .kb-team-details .kb-table .kb-table-cell.kb-unit-remove {
                width: 30px;
                min-width: unset;
                text-align: center;
            }
            
            body .kb-wrapper .kb-team-details .kb-table .kb-table-cell .kb-remove,
            body .kb-wrapper .kb-team-details .kb-table .kb-table-cell .kb-preview {
                display: flex;
                justify-content: center;
                height: 100%;
                align-items: center;
            }

            body .kb-wrapper .kb-team-details .kb-table-body .kb-table-row .kb-team-name {
                flex-grow: 1;
            }

            /* units */
            body .kb-wrapper .kb-team-details .kb-table-body .kb-table-row {
                display: flex;
                flex-wrap: wrap;
                gap: 5px;
            }

            body .kb-wrapper .kb-team-details .kb-units-table .kb-table-row:not(:first-child) {
                margin-top: 5px;
            }
            
            body .kb-wrapper .kb-team-details .kb-unit-size select {
                width: -webkit-fill-available !important;
            }

                /* 2 input, size */
                body .kb-wrapper .kb-team-details .kb-units-table .kb-table-row:not(:has(td:nth-child(6))) td:nth-child(1) {
                    flex-grow: 1;
                }
                body .kb-wrapper .kb-team-details .kb-units-table .kb-table-row:not(:has(td:nth-child(6))) td:not(:nth-child(1)):not(.kb-unit-preview):not(.kb-unit-remove) {
                    width: 20%;
                }

                /* 3 inputs, size */
                body .kb-wrapper .kb-team-details .kb-units-table .kb-table-row:has(td:nth-child(6)):not(:has(td:nth-child(7))) td:not(.kb-unit-size):not(.kb-unit-preview):not(.kb-unit-remove) {
                    width: 49%;
                }
                body .kb-wrapper .kb-team-details .kb-units-table .kb-table-row:has(td:nth-child(6)):not(:has(td:nth-child(7))) .kb-unit-size {
                    width: 35%;
                }

                /* 4 inputs, size */
                body .kb-wrapper .kb-team-details .kb-units-table .kb-table-row:has(td:nth-child(7)):not(:has(td:nth-child(8))) td:nth-child(1) {
                    width: 49%;
                }
                body .kb-wrapper .kb-team-details .kb-units-table .kb-table-row:has(td:nth-child(7)):not(:has(td:nth-child(8))) td:nth-child(2),
                body .kb-wrapper .kb-team-details .kb-units-table .kb-table-row:has(td:nth-child(7)):not(:has(td:nth-child(8))) td:nth-child(3) {
                    width: 24%;
                }
                body .kb-wrapper .kb-team-details .kb-units-table .kb-table-row:has(td:nth-child(7)):not(:has(td:nth-child(8))) td:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)):not(.kb-unit-size):not(.kb-unit-preview):not(.kb-unit-remove) {
                    width: 49%;
                }
                body .kb-wrapper .kb-team-details .kb-units-table .kb-table-row:has(td:nth-child(7)):not(:has(td:nth-child(8))) .kb-unit-size {
                    width: 35%;
                }

                /* 3+ inputs */
                body .kb-wrapper .kb-team-details .kb-units-table .kb-table-row:not(:first-child):has(td:nth-child(6)) {
                    margin-top: var(--kbdefault25-gap);
                }

            /* quantities */
            body .kb-wrapper .kb-team-details .kb-pane-aggregate table {
                border-spacing: 0;
                font-size: var(--kbdefault25-paragraph-size);
            }

            body .kb-wrapper .kb-team-details .kb-pane-aggregate table tr:not(:first-child) td {
                padding-top: var(--kbdefault25-gap-half);
                border-top: 1px solid var(--kbdefault25-primary-2);
            }

            body .kb-wrapper .kb-team-details .kb-pane-aggregate table tr:not(:last-child) td {
                padding-bottom: var(--kbdefault25-gap-half);
            }

            body .kb-wrapper .kb-team-details .kb-pane-aggregate table .kb-out-of-stock {
                background-image: linear-gradient(5deg, transparent 45px, var(--kbdefault25-alert) 0, var(--kbdefault25-alert) 52px, transparent 0);
                opacity: 0.2;
                pointer-events: none;
            }

            body .kb-wrapper .kb-team-details .kb-size-quantity-input {
                display: inline-flex;
                border: 2px solid var(--kbdefault25-primary-1);
                border-radius: var(--kbdefault25-radius);
                width: 98px;
                transition: 200ms ease-in-out opacity;
            }

            body .kb-wrapper .kb-team-details .kb-size-quantity-input.kb-no-size-quantity:not(:hover) {
                opacity: .2;
            }
            
            body .kb-wrapper .kb-team-details .kb-size-quantity-input .kb-button,
            body .kb-wrapper .kb-team-details .kb-size-quantity-input .kb-button:hover {
                background-color: transparent;
                padding: 0 5px;
            }
            
            body .kb-wrapper .kb-team-details .kb-size-quantity-input .kb-button::before {
                font-size: 14px;
            }

            body .kb-wrapper .kb-team-details .kb-table-cell-number input::-webkit-inner-spin-button,
            body .kb-wrapper .kb-team-details .kb-table-cell-number input::-webkit-outer-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }

            body .kb-wrapper .kb-team-details .kb-table-cell-number input[type="number"][ng-model] {
                -moz-appearance: textfield;
                border: none !important;
                text-align: center;
                padding: 8px 0;
            }

                /* file upload */

                body .kb-wrapper div[ng-hide="field.teamDetails.hideFileUpload"] {
                    position: relative;
                    border: 2px dashed var(--kbdefault25-primary-1);
                    padding: var(--kbdefault25-gap);
                    border-radius: var(--kbdefault25-radius);
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: right;
                    gap: var(--kbdefault25-gap);
                    align-items: center;
                    margin-top: var(--kbdefault25-gap);
                }

                body .kb-wrapper .kb-team-details div[ng-hide="field.teamDetails.hideFileUpload"] .kb-upload-names-numbers-spreadsheet {
                    text-align: center;
                    flex-grow: 1;
                }

                body .kb-wrapper .kb-team-details div[ng-hide="field.teamDetails.hideFileUpload"] .kb-document-upload-input {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                    left: 0;
                    top: 0;
                }
                
                body .kb-wrapper .kb-team-details div[ng-hide="field.teamDetails.hideFileUpload"] .kb-upload-status {
                    margin: 0;
                    width: 100%;
                    float: unset;
                    text-align: center;
                }

                body .kb-wrapper .kb-team-details div[ng-hide="field.teamDetails.hideFileUpload"] .kb-file-upload-error {
                    font-weight: normal;
                    color: var(--kbdefault25-alert);
                }

                body .kb-wrapper .kb-team-details div[ng-hide="field.teamDetails.hideFileUpload"] .kb-upload-status:has(.kb-file-upload-error:empty) {
                    display: none;
                }

                body .kb-wrapper .kb-team-details div[ng-hide="field.teamDetails.hideFileUpload"]:has(.kb-upload-status .kb-file-upload-error:empty)::after {
                    content: "upload";
                    background-color: var(--kbdefault25-primary-2);
                    color: var(--kbdefault25-primary-1);
                    font-family: var(--kbdefault25-material-ui-font);
                    position: relative;
                    font-size: var(--kbdefault25-gap);
                    height: var(--kbdefault25-gap-double);
                    width: var(--kbdefault25-gap-double);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 100%;
                    pointer-events: none;
                }

                body .kb-wrapper .kb-team-details div[ng-hide="field.teamDetails.hideFileUpload"]:has(.kb-upload-status .kb-file-upload-uploading:not(.ng-hide))::after {
                    background-color: var(--kbdefault25-secondary-1);
                    color: var(--kbdefault25-background-1);
                }

                body .kb-wrapper .kb-team-details div[ng-hide="field.teamDetails.hideFileUpload"]:has(.kb-upload-status .kb-file-upload-success:not(.ng-hide))::after {
                    content: "check";
                    background-color: var(--kbdefault25-primary-1);
                    color: var(--kbdefault25-background-1);
                }

                body .kb-wrapper .kb-team-details div[ng-hide="field.teamDetails.hideFileUpload"] .kb-document-upload-clear {
                    height: var(--kbdefault25-gap-double);
                    width: var(--kbdefault25-gap-double);
                    overflow: hidden;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: var(--kbdefault25-alert);
                    border-radius: 100%;
                    position: relative;
                    font-size: 0;
                    float: unset;
                    margin: 0;
                }
                
                body .kb-wrapper .kb-team-details div[ng-hide="field.teamDetails.hideFileUpload"] .kb-document-upload-clear::after {
                    content: "delete";
                    font-family: var(--kbdefault25-material-ui-font);
                    font-size: var(--kbdefault25-gap);
                    color: var(--kbdefault25-background-1);
                }

            /* --- Highlight --- */

            @keyframes kb-highlight-fade {
                0% {
                    box-shadow: 0 0 0 var(--kbdefault25-gap-half) transparent;
                }
                10% {
                    box-shadow: 0 0 0 var(--kbdefault25-gap-half) var(--kbdefault25-secondary-1-25);
                    background-color: var(--kbdefault25-secondary-1-25);
                }
                90% {
                    box-shadow: 0 0 0 var(--kbdefault25-gap-half) var(--kbdefault25-secondary-1-25);
                    background-color: var(--kbdefault25-secondary-1-25);
                }
                100% {
                    box-shadow: 0 0 0 var(--kbdefault25-gap-half) transparent;
                }
            }

        /* --- Single Item Checkout --- */

        body .kb-wrapper .kb-single-item-checkout .kb-buttons {
            display: flex;
            justify-content: center;
            margin-bottom: var(--kbdefault25-gap);
        }

        body .kb-wrapper .kb-single-item-checkout table,
        body .kb-wrapper .kb-single-item-checkout-aggregate-pricing .kb-single-item-checkout-total-wrapper {
            border-spacing: 0;
            font-size: var(--kbdefault25-paragraph-size);
            background: var(--kbdefault25-background-2);
            padding: var(--kbdefault25-gap-double);
            box-sizing: border-box;
        }
        
        body .kb-wrapper .kb-single-item-checkout .kb-simple-tired-pricing-table,
        body .kb-wrapper .kb-single-item-checkout table .kb-table-header-cell,
        body .kb-wrapper .kb-single-item-checkout table .kb-table-row .kb-table-cell,
        body .kb-wrapper .kb-single-item-checkout-aggregate-pricing .kb-single-item-checkout-total-wrapper span {
            color: var(--kbdefault25-primary-1);
            margin: 0;
        }
        
        body .kb-wrapper .kb-single-item-checkout table .kb-table-header-cell,
        body .kb-wrapper .kb-single-item-checkout table .kb-table-row .kb-table-cell {
            border-color: var(--kbdefault25-primary-1);
        }
        
        /* 1 table */
        body .kb-wrapper .kb-single-item-checkout table,
        body .kb-wrapper .kb-single-item-checkout-aggregate-pricing .kb-single-item-checkout-total-wrapper {
            border-radius: var(--kbdefault25-radius);
            border: 2px solid var(--kbdefault25-primary-2);
        }

        /* 2 tables */
        body .kb-wrapper .kb-single-item-checkout-aggregate-pricing .kb-cost-breakdown-wrapper table,
        body .kb-wrapper .kb-single-item-checkout table:not(.ng-hide):has(~ table:not(.ng-hide)) {
            border-radius: var(--kbdefault25-radius) var(--kbdefault25-radius) 0 0;
            padding-bottom: 0;
            border-bottom: none;
            text-align: left;
        }

        body .kb-wrapper .kb-single-item-checkout-aggregate-pricing .kb-cost-breakdown-wrapper:not(.ng-hide) ~ .kb-single-item-checkout-total-wrapper,
        body .kb-wrapper .kb-single-item-checkout table:not(.ng-hide) ~ table:not(.ng-hide) {
            border-radius: 0 0 var(--kbdefault25-radius) var(--kbdefault25-radius);
            padding-top: 0;
            border-top: none;
            text-align: left;
        }

            /* Aggregate */
            body .kb-wrapper .kb-single-item-checkout-aggregate-pricing {
                display: flex;
                flex-direction: column;
            }

            body .kb-wrapper .kb-single-item-checkout-aggregate-pricing .kb-single-item-checkout-total-wrapper {
                margin-bottom: 0;
            }

            body .kb-wrapper .kb-single-item-checkout-aggregate-pricing .kb-single-item-checkout-total-wrapper span {
                padding: 0;
            }

            body .kb-wrapper .kb-single-item-checkout-aggregate-pricing .kb-cost-breakdown-wrapper:not(.ng-hide) ~ .kb-single-item-checkout-total-wrapper::before {
                content: " ";
                position: relative;
                width: 100%;
                height: 1px;
                display: block;
                margin: var(--kbdefault25-gap-half) 0;
                background-color: var(--kbdefault25-primary-2);
            }

            body .kb-wrapper .kb-single-item-checkout-aggregate-pricing .kb-cost-breakdown-wrapper.ng-hide ~ .kb-single-item-checkout-total-wrapper .kb-single-item-checkout-total-cost-label {
                display: none !important;
            }

            body .kb-wrapper .kb-single-item-checkout-item-cost-label {
                font-weight: bold;
            }

            body .kb-wrapper .kb-single-item-checkout-total-cost {
                text-align: right;
                width: unset;
                float: unset;
            }

            body .kb-wrapper .kb-single-item-checkout-aggregate-pricing .kb-navigation-buttons .kb-button:not(.kb-button-size-chart) {
                display: none !important;
            }
            
            body .kb-wrapper .kb-single-item-checkout-aggregate-pricing .kb-navigation-buttons {
                display: flex;
                justify-content: center;
                order: -100;
                margin-bottom: var(--kbdefault25-gap);
            }

    /* --- Footer --- */

    body .kb-wrapper [ng-include]:has(> .kb-customize-footer) {
        width: 100%;
    }

    body .kb-wrapper .kb-customize-footer {
        width: 100%;
        height: var(--kbdefault25-footer-height);
        background-color: var(--kbdefault25-primary-1);
        display: flex;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;
        gap: var(--kbdefault25-gap);
    }

    body .kb-wrapper .kb-customize-footer .kb-button {
        line-height: var(--kbdefault25-title-size);
        box-sizing: border-box;
        height: 100%;
    }

    body .kb-wrapper .kb-customize-footer .kb-button:not(.kb-button-secondary) {
        position: relative;
        background-color: var(--kbdefault25-primary-2-10);
        color: var(--kbdefault25-background-1);
        display: flex;
        text-wrap: nowrap;
    }

    body .kb-wrapper .kb-customize-footer .kb-footer-button-finished {
        position: relative;
        margin-left: auto;
    }

    body .kb-wrapper .kb-customize-footer .kb-button:not(.kb-button-secondary):hover {
        background-color: var(--kbdefault25-primary-2-25);
        color: var(--kbdefault25-background-1);
    }
    
    body .kb-wrapper .kb-customize-footer .kb-lead-time {
        padding: var(--kbdefault25-gap-half) var(--kbdefault25-gap);
        border-right: 1px solid var(--kbdefault25-background-1);
        flex-grow: 1;
        text-align: center;
    }

    body .kb-wrapper .kb-customize-footer .kb-button + .kb-lead-time {
        border-left: 1px solid var(--kbdefault25-background-1);
    }
    
    body .kb-wrapper .kb-customize-footer .kb-lead-time span {
        color: var(--kbdefault25-background-1);
        font-size: var(--kbdefault25-subtitle-size);
    }
    
    body .kb-wrapper .kb-customize-footer .kb-lead-time .kb-lead-time-heading {
        font-size: var(--kbdefault25-subtitle-size);
        font-weight: bold;
    }

    body .kb-wrapper .kb-customize-footer .kb-button.kb-footer-button-options {
        display: none;
    }

    body .kb-wrapper .kb-customize-footer .kb-button.kb-button-secondary:not(.kb-disabled)::after {
        content: " ";
        position: absolute;
        height: 100%;
        width: 100%;
        border-radius: inherit;
        top: 0;
        left: 0;
        animation: infinite ease-in-out 8000ms complete-button-breath;
    }

    @keyframes complete-button-breath {
        0% {
            box-shadow: 0 0 0 0 var(--kbdefault25-secondary-1);
        }
        40% {
            box-shadow: 0 0 0 16px transparent;
        }
    }

/* --- My Designs --- */

body .kb-wrapper .kb-final-page .kb-journey-title-wrapper {
    width: 100%;
    margin-bottom: 0;
    padding: var(--kbdefault25-gap) var(--kbdefault25-gap) var(--kbdefault25-gap-half);
    background-color: var(--kbdefault25-background-1);
    box-sizing: border-box;
}

body .kb-wrapper .kb-final-page .kb-breadcrumbs {
    width: 100%;
    padding: 0 var(--kbdefault25-gap) var(--kbdefault25-gap) !important;
    background-color: var(--kbdefault25-background-1);
    box-sizing: border-box;
}

body .kb-wrapper .kb-final-page .kb-final-category-header-wrapper {
    border: none;
    margin: 0;
    padding: 0 var(--kbdefault25-gap) var(--kbdefault25-gap);
}

body .kb-wrapper .kb-final-page .kb-final-cta-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kbdefault25-gap);
}

body .kb-wrapper .kb-final-page .kb-final-cta-list li {
    display: inherit;
}

body .kb-wrapper .kb-final-page .kb-final-category-header-wrapper .kb-sharer {
    display: none !important;
}

body .kb-wrapper .kb-final-category-preview {
    background-color: var(--kbdefault25-background-2);
    padding: var(--kbdefault25-gap);
    margin: 0;
    border: none;
}

    /* add buttons */
    body .kb-wrapper .kb-final-category-preview .kb-add-buttons {
        margin: 0 0 var(--kbdefault25-gap) 0;
    }
    
    body .kb-wrapper .kb-final-category-preview .kb-add-buttons > div {
        display: flex;
        flex-wrap: wrap;
        gap: var(--kbdefault25-gap);
    }

    body .kb-wrapper .kb-final-category-preview .kb-final-button:not(.kb-final-remove):visited,
    body .kb-wrapper .kb-final-category-preview .kb-final-button:not(.kb-final-remove):link {
        color: var(--kbdefault25-primary-1);
        margin: 0;
    }

    /* names */
    body .kb-wrapper .kb-final-category-preview .kb-category-final-names {
        background-color: transparent;
        margin: var(--kbdefault25-gap) 0 0;
        padding: 0;
    }

    body .kb-wrapper .kb-final-category-preview .kb-category-final-names * {
        color: var(--kbdefault25-primary-1);
    }

    /* --- Designs --- */

    body .kb-wrapper .kb-final-category-preview .kb-final-category-preview-inner {
        display: grid;
        grid-template-columns: repeat(var(--kbdefault25-my-designs-columns), 1fr);
        gap: var(--kbdefault25-gap);
        width: 100%;
        min-height: unset;
        max-width: var(--kbdefault25-max-journey-width);
        margin: 0 auto;
        padding: 0;
        overflow: visible;
    }

    /* design */
    body .kb-wrapper .kb-final-category-preview-inner .kb-basket-item {
        width: 100%;
        position: relative;
        padding: var(--kbdefault25-gap);
        box-sizing: border-box;
        background-color: var(--kbdefault25-background-1);
        border-radius: var(--kbdefault25-radius);
        transition: 200ms ease-in-out box-shadow;
        padding-top: calc(var(--kbdefault25-gap) * 4.1);
    }
    
    body .kb-wrapper .kb-final-category-preview-inner .kb-basket-item::before,
    body .kb-wrapper .kb-final-category-preview-inner .kb-basket-item::after {
        content: attr(data-name);
        position: absolute;
        left: var(--kbdefault25-gap);
        top: var(--kbdefault25-gap);
        font-size: var(--kbdefault25-title-size);
        font-family: var(--kbdefault25-title-font);
        font-weight: bold;
        color: var(--kbdefault25-primary-1);
        width: calc(100% - 80px);
        text-align: left;
        text-wrap: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    body .kb-wrapper .kb-final-category-preview-inner .kb-basket-item::after {
        content: attr(data-product-name);
        top: calc(var(--kbdefault25-gap) * 2.4);
        font-size: var(--kbdefault25-paragraph-size);
        font-family: var(--kbdefault25-paragraph-size);
        font-weight: normal;
    }

    body .kb-wrapper .kb-final-category-preview-inner .kb-basket-item:hover {
        box-shadow: 0 0 20px 0 var(--kbdefault25-primary-1-50);
    }

        /* remove */
        body .kb-wrapper .kb-final-page .kb-basket-item .kb-final-remove {
            position: absolute;
            top: var(--kbdefault25-gap);
            right: var(--kbdefault25-gap);
            background-color: transparent;
            padding: 0;
            color: var(--kbdefault25-alert);
            font-size: var(--kbdefault25-gap);
        }

        /* images */
        body .kb-wrapper .kb-final-page .kb-basket-item .kb-final-overlay-wrapper {
            display: flex;
            flex-wrap: nowrap;
            gap: var(--kbdefault25-gap);
            overflow-x: auto;
            overflow-y: hidden;
            position: relative;
        }

        body .kb-wrapper .kb-final-page .kb-basket-item .kb-final-overlay-wrapper::-webkit-scrollbar-track,
        body .kb-wrapper .kb-final-page .kb-basket-item .kb-final-overlay-wrapper::-webkit-scrollbar-thumb {
            background-color: transparent;
        }

        body .kb-wrapper .kb-final-page .kb-basket-item:hover .kb-final-overlay-wrapper::-webkit-scrollbar-track,
        body .kb-wrapper .kb-final-page .kb-basket-item:hover .kb-final-overlay-wrapper::-webkit-scrollbar-thumb {
            background-color: var(--kbdefault25-primary-1-25);
        }
        
        body .kb-wrapper .kb-final-page .kb-basket-item .kb-final-overlay-wrapper span:not(.kb-final-overlay-wrap) {
            display: contents;
        }

        body .kb-wrapper .kb-final-page .kb-basket-item .kb-final-overlay-wrap {
            background-color: var(--kbdefault25-background-2);
            border-radius: var(--kbdefault25-radius);
            display: inline-flex;
            width: max(calc(50% - (var(--kbdefault25-gap) * 2)), 150px);
            min-width: max(calc(50% - (var(--kbdefault25-gap) * 2)), 150px);
            aspect-ratio: 1 / 1;
        }

        body .kb-wrapper .kb-final-page .kb-basket-item .kb-final-overlay-wrapper > .kb-final-overlay-wrap:first-child {
            margin-left: auto;
        }

        body .kb-wrapper .kb-final-page .kb-basket-item .kb-final-overlay-wrapper > .kb-final-overlay-wrap:last-child,
        body .kb-wrapper .kb-final-page .kb-basket-item .kb-final-overlay-wrapper > span > .kb-final-overlay-wrap:last-child {
            margin-right: auto;
        }

        body .kb-wrapper .kb-final-page .kb-basket-item .kb-final-overlay-wrap img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 0;
        }

        /* buttons */
        body .kb-wrapper .kb-final-page .kb-basket-item .kb-final-buttons-wrapper {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--kbdefault25-gap-half);
            margin-top: var(--kbdefault25-gap);
        }

        body .kb-wrapper .kb-final-page .kb-basket-item .kb-final-buttons-wrapper br {
            display: none;
        }

    /* --- Footer --- */

    body .kb-wrapper .kb-final-page div[ng-include]:has(> .kb-my-designs-footer) {
        position: sticky;
        bottom: 0;
    }

    body .kb-wrapper .kb-final-page .kb-my-designs-footer {
        min-height: calc(var(--kbdefault25-footer-height) - (var(--kbdefault25-gap) * 2));
        width: calc(100% - (var(--kbdefault25-gap) * 2));
        padding: var(--kbdefault25-gap);
        background-color: var(--kbdefault25-primary-1);
        display: flex;
        align-items: center;
        gap: var(--kbdefault25-gap);
        flex-wrap: wrap;
    }

        /* buttons */
        body .kb-wrapper .kb-my-designs-footer .kb-my-designs-footer-buttons {
            margin-right: auto;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: var(--kbdefault25-gap);
            height: 100%;
        }

        body .kb-wrapper .kb-my-designs-footer .kb-remove-all-designs-button,
        body .kb-wrapper .kb-my-designs-footer .kb-remove-all-designs-button:hover {
            background-color: var(--kbdefault25-background-1);
            color: var(--kbdefault25-alert);
            opacity: 1;
            transition: opacity 200ms ease-in-out;
        }
        
        body .kb-wrapper .kb-my-designs-footer .kb-remove-all-designs-button:hover {
            opacity: .8;
        }
        
        body .kb-wrapper .kb-my-designs-footer .kb-new-design-button,
        body .kb-wrapper .kb-my-designs-footer .kb-new-design-button:hover {
            position: relative;
            background-color: var(--kbdefault25-primary-2-10);
            color: var(--kbdefault25-background-1);
            display: flex;
            text-wrap: nowrap;
        }
        
        body .kb-wrapper .kb-my-designs-footer .kb-new-design-button:hover {
            background-color: var(--kbdefault25-primary-2-25);
            color: var(--kbdefault25-background-1);
        }

        /* sharer */
        body .kb-wrapper .kb-my-designs-footer .kb-sharer {
            top: unset;
            float: unset;
            gap: var(--kbdefault25-gap);
            margin-left: auto;
        }
        
        body .kb-wrapper .kb-my-designs-footer .kb-sharer .kb-share-button-icon:hover {
            opacity: 1;
        }
        
        body .kb-wrapper .kb-my-designs-footer .kb-sharer .kb-share-button-icon svg {
            color: var(--kbdefault25-background-1);
            width: calc(var(--kbdefault25-footer-height) / 3);
            height: calc(var(--kbdefault25-footer-height) / 3);
            transition: color 200ms ease-in-out;
        }
        
        body .kb-wrapper .kb-my-designs-footer .kb-sharer .kb-share-button-icon svg:hover {
            color: var(--kbdefault25-primary-2);
        }

    /* --- Dialogs --- */

    /* email a friend */
    body .kb-wrapper .kb-email-to-friend-form-dialog .kb-validation {
        display: none;
    }
    
    body .kb-wrapper .kb-email-to-friend-form-dialog .kb-group::before,
    body .kb-wrapper .kb-email-to-friend-form-dialog .kb-group::after {
        content: none;
    }

    body .kb-wrapper .kb-email-to-friend-form-dialog .kb-wizard-form-row {
        width: calc(50% - (var(--kbdefault25-gap) / 1.5));
        display: inline-block;
    }
    
    body .kb-wrapper .kb-email-to-friend-form-dialog .kb-wizard-form-row:first-child {
        margin-right: var(--kbdefault25-gap);
    }
    
    body .kb-wrapper .kb-email-to-friend-form-dialog .kb-wizard-form-label {
        display: block;
        text-align: left;
        margin-bottom: var(--kbdefault25-gap-half);
        width: 100%;
    }
    
    body .kb-wrapper .kb-email-to-friend-form-dialog .kb-wizard-form-field {
        width: 100%;
    }

    /* remove all */
    body .kb-wrapper .kb-confirm-remove-all-basket-items-dialog .kb-button-panel {
        padding-top: calc(var(--kbdefault25-gap) * 2 + 41px);
    }
    
    body .kb-wrapper .kb-confirm-remove-all-basket-items-dialog .kb-reset-design-button {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(var(--kbdefault25-gap) * 2 + 35px);
    }

    /* confirmation */
    body .kb-wrapper .kb-confirm-dialog .kb-button-panel {
        flex-direction: row;
    }
    
    body .kb-wrapper .kb-confirm-dialog .kb-button-panel .kb-button {
        padding: calc(var(--kbdefault25-gap) * 0.5) calc(var(--kbdefault25-gap) * 3);
    }

/* --- Forms --- */

body .kb-wrapper .kb-form-page {
    padding: var(--kbdefault25-gap);
    background-color: var(--kbdefault25-background-2);
    min-height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
}

body .kb-wrapper .kb-form-page .kb-breadcrumbs {
    margin-bottom: var(--kbdefault25-gap) !important;
}

body .kb-wrapper [custom-form] {
    width: 500px;
    max-width: calc(100% - (var(--kbdefault25-gap) * 2));
    margin: auto;
    overflow-y: auto;
    box-shadow: 0 0 50px 0 var(--kbdefault25-primary-1-25);
    background-color: var(--kbdefault25-background-1);
    padding: var(--kbdefault25-gap);
    border-radius: var(--kbdefault25-dialog-radius);
}

body .kb-wrapper .kb-custom-form {
    width: 100%;
}

body .kb-wrapper .kb-custom-form .kb-popup-inner-inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kbdefault25-gap);
}

body .kb-wrapper .kb-custom-form .kb-popup-inner-inner::before,
body .kb-wrapper .kb-custom-form .kb-popup-inner-inner::after {
    content: none;
}

body .kb-wrapper .kb-custom-form .kb-popup-inner-inner > div {
    width: 100%;
}

body .kb-wrapper .kb-custom-form .kb-form-header { order: 1; }
body .kb-wrapper .kb-custom-form div[ng-switch="submitSizeValues"] { order: 5; }
body .kb-wrapper .kb-custom-form .kb-form-wrapper { order: 3; }
body .kb-wrapper .kb-custom-form .kb-progress { order: 4; }

body .kb-wrapper .kb-custom-form .kb-button-back {
    float: unset;
    display: inline-block;
    margin-bottom: var(--kbdefault25-gap);
}

body .kb-wrapper .kb-custom-form .kb-form-button-panel {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kbdefault25-gap);
    margin-top: var(--kbdefault25-gap);
}

body .kb-wrapper .kb-custom-form .kb-form-header-title {
    font-weight: bold;
    font-size: var(--kbdefault25-title-size);
    font-family: var(--kbdefault25-title-font);
    text-align: center;
}

body .kb-wrapper .kb-custom-form .kb-form-intro {
    font-size: var(--kbdefault25-paragraph-size);
    text-align: center;
    color: var(--kbdefault25-primary-1);
    width: 100%;
}

body .kb-wrapper .kb-custom-form .kb-form-header-title:not(:empty) + .kb-form-intro:not(:empty) {
    margin-top: var(--kbdefault25-gap-half);
}

body .kb-wrapper .kb-custom-form .kb-form-footer-content {
    font-size: var(--kbdefault25-paragraph-size);
    text-align: left;
    color: var(--kbdefault25-primary-1);
    font-style: italic;
    background-color: var(--kbdefault25-background-2);
    padding: var(--kbdefault25-gap);
    border-radius: var(--kbdefault25-radius);
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

body .kb-wrapper .kb-custom-form .kb-form-intro,
body .kb-wrapper .kb-custom-form .kb-validation-message {
    margin: 0;
}

body .kb-wrapper .kb-custom-form .kb-form-intro + .kb-validation-message:not(.ng-hide) {
    margin-top: var(--kbdefault25-gap);
}

body .kb-wrapper .kb-custom-form .kb-button-form {
    min-width: unset;
    height: unset;
}

body .kb-wrapper .kb-custom-form .kb-button-popup-form-submit::before {
    content: none;
}

body .kb-wrapper .kb-custom-form [ng-switch="submitSizeValues"] .kb-button-popup-form-submit,
body .kb-wrapper .kb-custom-form .kb-form-button-submit {
    margin-left: auto;
}

    /* fields */
    body .kb-wrapper .kb-custom-form .kb-custom-form-default-field:not(:has(.kb-custom-form-field-outer-wrapper *)) {
        display: none;
    }

    body .kb-wrapper .kb-custom-form .kb-form-fields-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: var(--kbdefault25-gap-half);
    }

    body .kb-wrapper .kb-form-fields-wrapper .kb-custom-form-field-outer-wrapper {
        float: unset;
        width: 100%;
    }

    body .kb-wrapper .kb-custom-form .kb-custom-form-default-field,
    body .kb-wrapper .kb-custom-form .kb-custom-form-field,
    body .kb-wrapper .kb-custom-form .kb-wizard-form-field { 
        width: 100%;
        flex-grow: 1;
    }

    body .kb-wrapper .kb-custom-form .kb-ff-quarter { width: calc(25% - (var(--kbdefault25-gap) / 2.55)); }
    body .kb-wrapper .kb-custom-form .kb-ff-third { width: calc(33% - (var(--kbdefault25-gap) / 3.55)); }
    body .kb-wrapper .kb-custom-form .kb-ff-half { width: calc(50% - var(--kbdefault25-gap-quarter)); }

    body .kb-wrapper .kb-custom-form .kb-custom-form-default-field .kb-custom-form-heading,
    body .kb-wrapper .kb-custom-form .kb-custom-form-field .kb-custom-form-heading {
        font-size: var(--kbdefault25-subtitle-size);
        color: var(--kbdefault25-primary-1);
        margin: 0 0 var(--kbdefault25-gap-half) 0;
    }

    body .kb-wrapper .kb-custom-form .kb-custom-form-default-field .kb-custom-form-description,
    body .kb-wrapper .kb-custom-form .kb-custom-form-field .kb-custom-form-description {
        font-size: var(--kbdefault25-paragraph-size);
        color: var(--kbdefault25-primary-1);
        margin: 0 0 var(--kbdefault25-gap-half) 0;
        font-style: italic;
    }

    body .kb-wrapper .kb-custom-form .kb-custom-form-default-field label,
    body .kb-wrapper .kb-custom-form .kb-custom-form-field label {
        display: inline-block;
        color: var(--kbdefault25-primary-1);
        font-size: var(--kbdefault25-paragraph-size);
        margin-bottom: var(--kbdefault25-gap-quarter);
    }

        /* file upload */
        body .kb-wrapper .kb-custom-form .kb-wizard-form-file-preview {
            margin: 0;
        }

        body .kb-wrapper .kb-custom-form .kb-wizard-form-file-preview-image {
            height: 50px;
            width: 50px;
            object-fit: contain;
            margin: var(--kbdefault25-gap-half) var(--kbdefault25-gap-half) 0 0;
        }

        body .kb-wrapper .kb-custom-form .kb-file-upload-error {
            font-weight: normal;
            color: var(--kbdefault25-alert);
            margin-top: var(--kbdefault25-gap-half);
        }

        body .kb-wrapper .kb-custom-form .kb-file-upload-success {
            display: none;
        }

        body .kb-wrapper .kb-custom-form .kb-file-upload-clear {
            margin-top: calc(var(--kbdefault25-gap) / 1.5);
        }

    /* enter quantities */
    body .kb-wrapper .kb-custom-form div[ng-switch="submitSizeValues"]:not(:has(> *)) {
        display: none;
    }

    body .kb-wrapper .kb-custom-form .kb-sizes-form {
        background-color: var(--kbdefault25-background-2);
        border: 2px solid var(--kbdefault25-primary-2);
        padding: var(--kbdefault25-gap);
        border-radius: var(--kbdefault25-radius);
    }

    body .kb-wrapper .kb-sizes-form .kb-form-category-wrapper:not(:first-child) {
        margin-top: var(--kbdefault25-gap);
    }

    body .kb-wrapper .kb-sizes-form .kb-form-category-wrapper {
        padding: 0;
        display: flex;
        flex-wrap: wrap;
    }

    body .kb-wrapper .kb-sizes-form .kb-category-name {
        padding: 0;
        width: 100%;
        margin-bottom: var(--kbdefault25-gap-half);
        border-bottom: none;
        color: var(--kbdefault25-primary-1);
        font-size: var(--kbdefault25-subtitle-size);
    }

    body .kb-wrapper .kb-sizes-form .kb-size-basket-item:last-child,
    body .kb-wrapper .kb-sizes-form .kb-size-basket-item:has(+ .kb-size-basket-item:last-child):nth-child(even) {
        padding-bottom: 0;
        border-bottom: none;
    }

    body .kb-wrapper .kb-sizes-form .kb-size-basket-item {
        padding: var(--kbdefault25-gap-half) 0;
        border-bottom: 1px dashed var(--kbdefault25-primary-2);
        box-sizing: border-box;
        width: 100%;
    }

    body .kb-wrapper .kb-sizes-form .kb-design-heading {
        font-weight: normal;
        font-size: var(--kbdefault25-paragraph-size);
        margin: 0 0 var(--kbdefault25-gap-half) 0;
        color: var(--kbdefault25-primary-1);
    }

    body .kb-wrapper .kb-sizes-form .kb-design-image {
        margin-right: var(--kbdefault25-gap);
        width: 60px;
        height: 80px;
        object-fit: contain;
    }

    body .kb-wrapper .kb-sizes-form .kb-size-quantities {
        float: right;
        width: calc(100% - 80px);
    }

    body .kb-wrapper .kb-sizes-form .kb-size-quantities tr:first-child {
        display: none;
    }

    body .kb-wrapper .kb-sizes-form .kb-size-quantities td {
        padding: 2px 0;
        font-size: var(--kbdefault25-paragraph-size);
        color: var(--kbdefault25-primary-1);
        text-align: right;
    }

    body .kb-wrapper .kb-sizes-form td.kb-qty-cell {
        padding-left: 5px;
    }
    
    body .kb-wrapper .kb-sizes-form .kb-qty-cell,
    body .kb-wrapper .kb-sizes-form .kb-qty-cell input[type="number"].kb-quantity {
        width: 70px;
    }

    body .kb-wrapper .kb-sizes-form .kb-no-opts-available {
        height: 80px;
        font-size: var(--kbdefault25-paragraph-size);
        color: var(--kbdefault25-alert);
        font-style: italic;
        align-items: center;
        display: flex;
        text-align: center;
    }

    /* submitting */
    body .kb-wrapper div[ng-switch="submitSizeValues"] .kb-form-button-panel {
        margin-top: var(--kbdefault25-gap);
    }

    body .kb-wrapper .kb-custom-form:not(.ng-valid) [ng-switch="submitSizeValues"] .kb-button-popup-form-submit,
    body .kb-wrapper .kb-custom-form:not(.ng-valid) .kb-form-button-submit {
        opacity: .5 !important;
        pointer-events: none;
    }

    body .kb-wrapper .kb-form-page:has(.kb-progress:not(.ng-hide)):has(.kb-success.ng-hide)::before {
        content: " ";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.4);
        z-index: 1;
    }
    
    body .kb-wrapper .kb-form-page:has(.kb-progress:not(.ng-hide)):has(.kb-success.ng-hide)::after {
        height: 50px;
        width: 50px;
        border-width: 10px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
        z-index: 1;
    }

    body .kb-wrapper .kb-custom-form .kb-progress {
        display: none;
    }

    /* success */

    body .kb-wrapper .kb-custom-form .kb-success {
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--kbdefault25-gap);
    }

    body .kb-wrapper .kb-custom-form .kb-success .kb-form-success-content * {
        color: var(--kbdefault25-primary-1) !important;
        font-size: var(--kbdefault25-paragraph-size);
    }
    
    body .kb-wrapper .kb-custom-form .kb-success .kb-form-success-content h1, 
    body .kb-wrapper .kb-custom-form .kb-success .kb-form-success-content h2,
    body .kb-wrapper .kb-custom-form .kb-success .kb-form-success-content h3 {
        font-size: var(--kbdefault25-title-size);
        font-family: var(--kbdefault25-title-font) !important;
        margin: 0 0 var(--kbdefault25-gap) 0;
        font-weight: bold;
    }
    
    body .kb-wrapper .kb-custom-form .kb-success .kb-form-success-content h4,
    body .kb-wrapper .kb-custom-form .kb-success .kb-form-success-content h5 {
        font-size: var(--kbdefault25-subtitle-size);
        margin: 0 0 var(--kbdefault25-gap-half) 0;
    }
    
    body .kb-wrapper .kb-custom-form .kb-success .kb-form-success-content h5 {
        font-style: italic;
    }

    /* media */
    @media screen and (min-width: 1000px) {
        body .kb-wrapper .kb-custom-form .kb-form-wrapper {
            height: fit-content;
            position: sticky;
            top: 0;
        }

        body .kb-wrapper [custom-form]:has(div[ng-switch="submitSizeValues"] *) {
            width: 900px;
        }

        body .kb-wrapper .kb-custom-form div[ng-switch="submitSizeValues"] {
            order: 2;
            width: calc(60% - (var(--kbdefault25-gap) / 2));
        }

        body .kb-wrapper .kb-custom-form:has(div[ng-switch="submitSizeValues"] *) div.kb-form-wrapper {
            width: calc(40% - (var(--kbdefault25-gap) / 2));
        }
        
        body .kb-wrapper div[ng-switch="submitSizeValues"] .kb-form-button-panel {
            display: none;
        }
    }

    @media screen and (min-width: 550px) {
        body .kb-wrapper .kb-sizes-form .kb-size-basket-item {
            width: 50%;
        }
        
        body .kb-wrapper .kb-sizes-form .kb-size-basket-item:nth-child(2n+2) {
            padding-right: var(--kbdefault25-gap-half);
            border-right: 1px dashed var(--kbdefault25-primary-2)
        }

        body .kb-wrapper .kb-sizes-form .kb-size-basket-item:nth-child(2n+3) {
            padding-left: var(--kbdefault25-gap-half);
        }
    }

    @media screen and (max-width: 500px) {
        body .kb-wrapper .kb-custom-form .kb-ff-quarter { width: calc(33% - (var(--kbdefault25-gap) / 3.55)); }
        body .kb-wrapper .kb-custom-form .kb-ff-third { width: calc(50% - var(--kbdefault25-gap-quarter)); }
    }
    
    @media screen and (max-width: 400px) {
        body .kb-wrapper .kb-custom-form .kb-ff-quarter,
        body .kb-wrapper .kb-custom-form .kb-ff-third,
        body .kb-wrapper .kb-custom-form .kb-ff-half { width: 100%; }
    }