:root {
    /* Color Palette from your comment */
    --color-blue: #0f2dff;
    --color-light-blue: #38B8C8;
    --color-red: #C84838;
    --color-pink: #C83870;
    --color-beige: #C89038;
    --color-green: #45980f;
    --color-light-green: #38C848;
    --color-olive: #B8C838;
    --color-purple: #9038C8;
    --color-light-purple: #C838B8;
    --color-dark-purple: #4838C8;
    --color-black: #383838;
    --color-grey: #707070;
    --color-silver: #C8C8C8;
    --color-yellow: #FFFF00;
    --color-dark-blue-border: #3B63ED;
    --color-border-dark: #888888;

    /* Window/Menu Colors */
    --color-window-1: #C2D6EF; 
    --color-window-2: #9AD8EB; 
    --color-window-3: #B3F0FF; 
    --color-window-4: #F9A763; 
    --color-window-6: #FCE5E4; 
    --color-window-7: #B6EDFB; 
    --color-menu-main: #A2A6DA; 

    /* Semantic/Common Colors */
    --color-primary-ui: var(--color-blue);
    --color-secondary-ui: var(--color-light-blue);
    --color-success: var(--color-green);
    --color-danger: var(--color-red);
    --color-text-default: var(--color-black);
    --color-text-light: #fff; /* standard white (FIXED: removed var() in definition) */

    /* Utility/Spacing */
    --spacing-1x: 4px;
    --spacing-2x: 8px;
    --font-weight-bold: bold;
}

.ui-dialog-titlebar-closehide {
    visibility: hidden;
}

.ui-dialog .ui-dialog-title { /* FIXED: Removed extra space */
    height: 3em;
}

.nt-site-header {
    height: 5.4rem;
}

.ui-accordion .ui-accordion-content {
    padding: 0; /* Changed to 0 instead of 0% */
}

@media screen and (max-width: 1800px) {
    .cpshide1800 {
        display: none;
    }
}

@media screen and (max-width: 1600px) {
    .cpshide1600 {
        display: none;
    }
}

@media screen and (max-width: 960px) {
    .ui-dialog-titlebar-close {
        display: none;
    }
}

.ui-button {
    /* Kept !important to override library, but use variables for colors */
    border-width: 0.15em !important;
    border-color: var(--color-yellow) !important;
}

.ui-selectmenu-button.ui-button {
    text-align: left;
    white-space: nowrap;
    width: 15em !important;
}

.nt-body-div {
    height: 100% !important;
    min-height: 100px !important;
}

.ui-resizable-e {
    border: 0 solid #888888; /* Changed 0px to 0 */
    width: 0; /* Changed 0px to 0 */
}
   
.logo-image {
    /* Use margin to create the necessary space between the image and the text */
    margin-right: 8px; /* Adjust this value as needed for the desired gap */
    /* Ensure no unwanted borders */
    border: none;
}

.logo-name {
    /* Style the text font, color, etc., independently */
    font-size: 1.75em;
    font-weight: bold;
    color: var(--color-blue);
}  

.logo-wpname {
    /* Style the text font, color, etc., independently */
    font-size: 1.75em;
    font-weight: bold;
    color: var(--color-black);
}   
   
.scroll-container {
    width: 350px;
    height: 200px;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

.mancolour {
    background: var(--color-blue);
}

.ladycolour {
    background: var(--color-pink);
}

.unisexcolour {
    background: var(--color-success);
}

.cpsyoutube {
    min-width: 700px;
    min-height: 400px;
}

.cpsperformance {
    background-color: var(--color-primary-ui);
    color: var(--color-text-light);
    text-align: right;
    font-weight: var(--font-weight-bold);
}

.cpsemoji {
    margin-right: -37px;
    border: unset;
    padding-top: 4px;
}

/* --- Widths/Sizing --- */
.cpswidth0em {
    width: 0em !important; /* FIXED: Removed extra space before !important */
    margin-left: 0.2em !important; /* FIXED: Removed extra space before !important */
}
.cpswidth5em { width: 5em !important; }
.cpswidth6em { width: 6em !important; }
.cpswidth7em { width: 7em !important; }
.cpswidth8em { width: 8em !important; }
.cpswidth9em { width: 9em !important; }
.cpswidth10em { width: 10em !important; }
.cpswidth12em { width: 12em !important; }
.cpswidth15em { width: 15em !important; }
.cpswidth20em { width: 20em !important; }
.cpswidth25em { width: 25em !important; }
.cpswidth30em { width: 30em !important; }
.cpswidth35em { width: 35em !important; }
.cpswidth40em { width: 40em !important; }
.cpswidth45em { width: 45em !important; }
.cpswidth50em { width: 50em !important; }
.cpsphotowidth { width: 25em !important; }
.cpswidth-100 { width: 100px !important; }
.cpswidth-120 { width: 120px !important; }
.cpswidth-140 { width: 140px !important; }
.cpswidth-160 { width: 160px !important; }
.cpswidth-200 { width: 200px !important; }
.cpswidth-250 { width: 250px !important; }
.cpswidth-300 { width: 300px !important; }
.cpswidth-400 { width: 400px !important; }
.cpswidth-500 { width: 500px !important; }
.cpsmw40 { max-width: 40px !important; }
.cpsmw50 { max-width: 50px !important; }
.cpsmw60 { max-width: 60px !important; }
.cpsmw75 { max-width: 75px !important; }
.cpsmw85 { max-width: 85px !important; }
.cpsmw100 { max-width: 100px !important; }
.cpsmw150 { max-width: 150px !important; }
.cpsmw200 { max-width: 200px !important; }
.cpsmw250 { max-width: 250px !important; }
.cpsmw300 { max-width: 300px !important; }
.cpsmw350 { max-width: 350px !important; }
.cpsmw400 { max-width: 400px !important; }
.cpsmw450 { max-width: 450px !important; }
.cpsmw500 { max-width: 500px !important; }
.size-60prompt { width: 60px; }

.cpspasswordbutton {
    position: relative;
    right: 6em;
    background: var(--color-secondary-ui);
    border: 0;
    min-width: 0.5em;
    padding-left: 1em;
}

.xxx1>.ui-selectmenu-button.ui-button {
    width: 120px !important;
    background-color: var(--color-olive) !important;
    flex-direction: row;
    color: var(--color-primary-ui);
}

.xxx2>.ui-selectmenu-button.ui-button {
    width: 100px !important;
    background-color: var(--color-olive) !important;
    text-align: right !important;
}

.xxx3>.ui-selectmenu-button.ui-button {
    min-width: 100%;
    background-color: var(--color-olive) !important;
}

.xxx4>.cke_reset {
    width: 580px !important;
}

.xxx5>.cke_reset {
    width: 800px !important;
}

/* Redactor/CKEditor Overrides (xxx6, xxx8, xxx9, etc.) */
/* Consolidate min/max to a single width/height when they match */
.xxx6>.redactor-box.redactor-styles-on .redactor-in {
    width: 800px !important;
    height: 340px !important;
}

.xxx7>.redactor-box.redactor-styles-on .redactor-toolbar {
    display: none !important;
}

.xxx8>.redactor-box.redactor-styles-on .redactor-in {
    width: 260px !important;
    height: 120px !important;
}

.xxx9>.redactor-box.redactor-styles-on .redactor-in {
    width: 20em !important;
    height: 10em !important;
}

.xxx10>.redactor-box.redactor-styles-on .redactor-in {
    width: 18em !important;
}

.cps-messageby { font-size: 0.75em !important; }

.cpssmallnumber {
    width: 1.5em;
    height: 1.5em;
}

.cpssmallbutton {
    margin-left: 4px;
    margin-right: 4px;
    padding-left: 0;
    padding-right: 0;
    width: 2em;
}

.cpssmallmenubutton {
    width: 6em;
    font-size: 0.6em;
}

.phoneplannerbutton { width: 5em; }

.cpspad0 {
    padding: 0;
    margin: 0;
}

.cpspad0margin1 {
    padding: 0;
    margin: 1px;
}

.cpsemailfont { font-size: 0.8em !important; }

/* Small Form */
.cps-smallform-cell {
    display: flex;
    justify-content: space-between;
}

.cps-smallform-prompt {
    text-align: left;
    max-width: 0.5em;
}

.cps-smallform-checkbox-div {
    width: 7em;
    justify-content: flex-end;
}

.cps-time-lower {
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    min-width: 3em;
}

.cps-time-higher {
    margin-right: -30px;
    padding-left: 0;
    padding-right: 0;
}

.cps-down-button,
.cps-up-button { /* Combined identical rules */
    width: 1em;
    margin-left: -80px;
}

.cpstextgreen {
    background-color: transparent;
    color: var(--color-blue);
    font-weight: var(--font-weight-bold);
}

/* Highlight Classes - Use Variables */
.plusextrahighlightred,
.cpshighlightred,
.holdbutton { /* Combined selectors */
    background-color: var(--color-danger) !important;
    color: var(--color-text-light);
}

.plusextrahighlightblue,
.cpshighlight,
.cpshighlightblue { /* Combined selectors */
    background-color: var(--color-primary-ui);
    color: var(--color-text-light);
}

.cpshighlightgreen {
    background-color: var(--color-success);
    color: var(--color-text-light);
}

/* --- About Widths & Colors --- */
.cps-about-width20,
.cps-about-width30,
.cps-about-width50,
.cps-about-width70,
.cps-about-width80,
.cps-about-width100 { /* Combined selectors */
    font-weight: var(--font-weight-bold);
}
.cps-about-width20 { width: 20%; }
.cps-about-width30 { width: 30%; }
.cps-about-width50 { width: 50%; }
.cps-about-width70 { width: 70%; }
.cps-about-width80 { width: 80%; }
.cps-about-width100 { width: 100%; }

.cps-about-blue { color: var(--color-blue); }
.cps-about-lightblue { color: var(--color-light-blue); }
.cps-about-red { color: var(--color-red); }
.cps-about-pink { color: var(--color-pink); }
.cps-about-beige { color: var(--color-beige); }
.cps-about-green { color: var(--color-green); }
.cps-about-lightgreen { color: var(--color-light-green); }
.cps-about-olive { color: var(--color-olive); }
.cps-about-purple { color: var(--color-purple); }
.cps-about-black { color: var(--color-black); }
.cps-about-lightpurple { color: var(--color-light-purple); }
.cps-about-darkpurple { color: var(--color-dark-purple); }
.cps-about-grey { color: var(--color-grey); }
.cps-about-silver { color: var(--color-silver); }

.cpsmobileform {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0; /* Changed 0% to 0 */
    padding: 0; /* Changed 0% to 0 */
}

.cpsplusmenu {
    position: relative;
    width: 100%;
    min-height: 800px;
    height: 100%;
    margin: 0; /* Changed 0% to 0 */
    padding: 0; /* Changed 0% to 0 */
}

/* Windows */
.cpsbackgroundwhite { background-color: white; }
.OrderWindowOne { background-color: var(--color-window-1); }
.OrderWindowTwo { background-color: var(--color-window-2); }
.OrderWindowThree { background-color: var(--color-window-3); }
.OrderWindowFour { background-color: var(--color-window-4); }
.OrderWindowSix { background-color: var(--color-window-6); }
.OrderWindowSeven { background-color: var(--color-window-7); }
.OrderWindowEight { background-color: var(--color-window-3); }

.cpsmobilemenu {
    position: relative;
    background-color: white;
    max-width: 100%;
    margin: 0; /* Changed 0% to 0 */
    padding: 0; /* Changed 0% to 0 */
}

.OrderWindowWhite {
    background-color: white;
    margin-left: -20px;
    margin-right: 0; /* Changed 0px to 0 */
}

.OrderWindowWhiteSmall {
    margin-left: -20px;
    margin-right: 0; /* Changed 0px to 0 */
}

.MenuWindowThree {
    background-color: var(--color-window-3);
    min-height: 40em;
}

.cpsdisplaytext { min-height: 5em; }

.cps-mobilemenu-button,
.cps-menu-button { /* Combined identical rules */
    width: 98% !important;
    min-height: 2em;
    color: white;
    text-align: left;
    text-decoration: none;
    border: none;
    border-radius: 20px;
    min-width: 9em;
    font-size: 1.5em;
}

.cpsentrypart-dropdown { width: 100% !important; }

.cpsdroppart-dropdown {
    min-height: 30em !important;
    text-align: left;
    white-space: nowrap;
    min-width: 100% !important;
}

.cpsdroppart-dropdownsmall {
    min-height: 20em !important;
    text-align: left;
    white-space: nowrap;
    max-width: 100% !important;
}

.cpsdroppart-dropdownExtra {
    min-height: 20em !important;
    text-align: left;
    white-space: nowrap;
    width: 20em !important;
}

.cpsentrypart-dropdownwide { width: 30em !important; }

.cpsdroppart-dropdownextrawide {
    min-height: 30em !important;
    text-align: left;
    white-space: nowrap;
    width: 40em !important;
}

.cpsdroppart-dropdownwide {
    min-height: 30em !important;
    text-align: left;
    white-space: nowrap;
    width: 30em !important;
}

.plusextraentrypart-dropdownsmall { max-width: 8em !important; }

.plusextraentrypart-dropdown { width: 30em !important; }

.plusextradroppart-dropdown {
    min-height: 30em !important;
    text-align: left;
    white-space: nowrap;
    width: 30em !important;
}

.RP-button {
    background-color: white;
    display: inline-block;
    width: 800px;
    height: 60px;
}

.extramenu-button {
    min-width: 5rem;
    width: 5rem;
    height: 4rem;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    background-color: var(--color-primary-ui);
    border: 0.15rem solid var(--color-yellow);
}

.RT-button {
    height: 55px;
    margin-right: -10px;
    min-width: 75px;
}

.RT-buttonbig {
    height: 80px;
    margin-right: -10px;
}

.cpspad10 { padding-left: 30px; }
.cpsminw100 { min-width: 100px !important; }
.cpsminw150 { min-width: 150px !important; }
.cpsminw200 { min-width: 200px !important; }
.cpsminw250 { min-width: 250px !important; }
.cpsminw300 { min-width: 300px !important; }
.cpsminw350 { min-width: 350px !important; }
.cpsminw400 { min-width: 400px !important; }
.cpsminw480 { min-width: 480px !important; }
.cpsminw500 { min-width: 500px !important; }
.cpsminw510 { min-width: 510px !important; }
.cpsminw600 { min-width: 600px !important; }
.cpsminw700 { min-width: 700px !important; }

.cpsborder8100p { min-width: 100%; }

.cpsborder8 { min-height: 1000px; }

.cpstableheight { min-height: 5000px !important; }

.cps-radio {
    font-size: 0.7em;
    min-width: 4em !important;
    min-height: 3em !important;
    background-color: var(--color-secondary-ui) !important;
}

.Balance-button {
    display: inline-block;
    padding: 15px 25px;
    font-size: 1em;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: Black;
    background-color: var(--color-primary-ui);
    border: none;
    border-radius: 15px;
    width: 150px;
}

.DeliveryAddress {
    width: 400px;
    margin-left: -18px;
}

.EntryBoxOption {
    font-size: 1.5em !important;
    min-height: 3em !important;
    position: relative !important;       
    background-color: var(--color-olive) !important;
    flex-direction: row;
    color: var(--color-blue);
}

.locationtext { font-size: 50px; }

.noofitemstext {
    font-size: 5em;
    color: var(--color-primary-ui) !important;
}

.MainMenu { background-color: var(--color-menu-main); }

.MOBBrowseEntry { font-size: 50px !important; }

.MobileMenu-button {
    background-color: var(--color-primary-ui) !important;
    color: White !important;
    width: 850px;
    border-radius: 0; /* Changed 0px to 0 */
    height: 9.375rem;
    font-size: 3.125rem !important;
}

.MobileSearchBox {
    background-color: var(--color-primary-ui) !important;
    color: white !important;
    font-size: 3.125rem !important;
}

.Next-button {
    display: inline-block;
    padding: 15px 25px;
    font-size: 1em;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: White;
    background-color: var(--color-primary-ui);
    border: none;
    border-radius: 15px;
    width: 150px;
}

.orderqtyentry {
    max-width: 85px;
    background-color: var(--color-olive);
}

.PackingBrowseTable {
    font-size: 50px;
    color: var(--color-text-default);
    margin: 5px 0 5px; /* Changed 0px to 0 */
    border-color: var(--color-border-dark);
    padding: 0; /* Changed 0px to 0 */
    border-spacing: 0; /* Changed 0px to 0 */
    /* Simplified border properties */
    border: 1px solid var(--color-border-dark);
}

.pendingamount {
    background-color: var(--color-primary-ui) !important;
    color: White !important;
    height: 3em;
    font-size: 50px !important;
    padding-right: 1em;
}

.Pick-Actual {
    width: 400px !important;
    height: 300px !important;
    color: var(--color-primary-ui) !important;
    font-size: 110px !important;
}

.Pick-Item {
    background-color: white !important;
    width: 400px !important;
    height: 300px !important;
    color: var(--color-primary-ui) !important;
    font-size: 110px !important;
}

.Pick-firstbutton {
    width: 25rem;
    height: 18.75rem;
    border: none;
    padding: 1px; /* Changed 1px 1px to 1px */
    font-size: 3rem !important;
    text-align: center;
}

.phonepickbuttons {
    width: 60px;
    height: 60px;
    font-size: 16px !important;
    text-align: center;
}

.phonepicklocation {
    background-color: white !important;
    width: 260px !important;
    height: 80px !important;
    color: var(--color-primary-ui) !important;
    font-size: 20px !important;
    padding-left: 0.25em !important;
    padding-bottom: 1.0em !important;
}

.phonepickitem {
    background-color: white !important;
    width: 260px !important;
    height: 60px !important;
    color: var(--color-primary-ui) !important;
    font-size: 16px !important;
    padding-left: 0.25em !important;
}

.warehousepickbuttons {
    width: 300px;
    height: 150px;
    font-size: 36px !important;
    text-align: center;
}

.cpsmenubutton { font-size: 0.75em !important; }

.optionsbutton {
    font-size: 1.25em !important;
    min-height: 3em;
    max-height: 3em;
}

.holdbutton {
    font-size: 1.25em !important;
    background: var(--color-danger);
    min-height: 3em;
    max-height: 3em;
}

.optionsbuttonspeech {
    background: var(--color-grey) !important;
    font-size: 1.25em !important;
    min-height: 3em;
    max-height: 3em;
}
.optionsbuttonspares {
    background: var(--color-success) !important;
    font-size: 1.25em !important;
    min-height: 3em;
    max-height: 3em;
}
.optionsbuttongroup {
    background: var(--color-beige) !important;
    font-size: 1.25em !important;
    min-height: 3em;
    max-height: 3em;
}
.optionsbuttonstock {
    background: var(--color-purple) !important;
    font-size: 1.25em !important;
    min-height: 3em;
    max-height: 3em;
}

.warehousepicklocation {
    background-color: white !important;
    width: 350px !important;
    height: 300px !important;
    color: var(--color-primary-ui) !important;
    font-size: 80px !important;
    padding-left: 0.25em !important;
}

.warehousepickingqty {
    background-color: white !important;
    width: 350px !important;
    height: 300px !important;
    color: var(--color-primary-ui) !important;
    font-size: 80px !important;
    padding-left: 0.25em !important;
}

.warehousepickitem {
    background-color: white !important;
    width: 300px !important;
    height: 150px !important;
    color: var(--color-primary-ui) !important;
    font-size: 20px !important;
    padding-left: 0.25em !important;
}

.warehousepickqty {
    background-color: white !important;
    width: 300px !important;
    height: 150px !important;
    color: var(--color-primary-ui) !important;
    font-size: 60px !important;
    padding-left: 0.25em !important;
}

.cpspaddingleft1 { padding-left: 1em !important; }

.cpsbuttonpadright1 { padding-right: 1em !important; }

.Pick-main {
    width: 400px !important;
    height: 300px !important;
    font-size: 84px !important;
}

.Pick-Qty {
    background-color: white !important;
    width: 25rem !important;
    height: 18.75rem !important;
    color: var(--color-primary-ui) !important;
    font-size: 6.875rem !important;
}

.Post-button {
    display: inline-block;
    padding: 15px 25px;
    font-size: 1em;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: White;
    background-color: var(--color-success);
    border: none;
    border-radius: 15px;
    width: 300px;
}

.Quantity-button {
    display: inline-block;
    padding: 15px 25px;
    font-size: 1em;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: Black;
    background-color: var(--color-secondary-ui);
    border: none;
    border-radius: 15px;
    width: 150px;
}

.Reset-button { color: cyan; }

.RestockBrowseTable { font-size: 40px; }

.SearchBoxOption {
    font-size: 1.5em !important;
    color: White;
    background-color: var(--color-primary-ui);
    min-height: 2.5em !important;
    position: relative;
}

.SetupMenu-button {
    padding: 25px;
    font-size: 1.5em !important;
    min-width: 250px;
}

.SMLnext-button {
    font-size: 2.0em;
    width: 400px;
    height: 200px;
}

.StockMenu-button {
    padding: 1.5rem;
    width: 15rem;
    min-height: 10rem;
    font-size: 1.25em;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-dark-purple);
}

.stringentry { background-color: var(--color-olive); }

.TrackingNumber { font-size: 50px !important; }

.boxheight5 { min-height: 5em; }
.boxheight4dot5 { min-height: 4.5em; }
.boxheight4 { min-height: 4em; }
.boxheight3dot5 { min-height: 3.5em; }
.boxheight3 { min-height: 3em; }