/* ========== Styles ========== */


/* Add all your page styles here, or any custom overrides to html, layout, variables, fonts, or icons. But try and do global changes or default styles for the web application only in there. */



/* ========== Exigo Admin Overrides (only if using admin styles)========== */

/* Required to cascacde over any display property when adding 'hidden' to any element. */

#body [hidden] { display: none !important; }

/* Note: Override all old Admin CSS in this section that is still styling the HTML. As of 2026, this was not needed as we removed all Admin stylesheets from all Element areas. But these remain in case we need to integrate stuff like old Portl.js sliders, tables, bootstrap 3 tabs, etc. (I do not recommend it!) I kept these old Admin HTML wrappers and classes in place below in case the portal.js system manipulates or references them, in the future. Ive also gutted all basic formatting and maximize dimensions to hold the new designs. - MS */

#body .frameset,
#body .frame, 
#body .frame-body {

    display: block !important;

    /* ALERT: When using the old Admin CSS styles, be  sure to disable all the Admin's nested flexboxes having only one box inside a parent! */

    flex: none !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    /*flex-direction: column !important;*/
    width: auto !important;
    height: auto !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important; /* added "viewport" unit dimensions which forces the old admin boxes to the devices full viewport */
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Uncomment these borders to test old Admin boxes to make sure they are wrapping around all new child content correctly, inclduing the layout grid. - MS */

#body .frameset
{
    /*border:3px solid orange;*/
}
#body form
{
    /*border:3px solid green;*/
}
#body .frame
{
    /*border:3px solid red;*/
}
#body .frame-body
{
    /*border:3px solid black;*/
}





/* ========== Special Browser Global HTML Fixes ========== */

/* FORM CONTROL DEFAULTS: These extra overides on all inputs just makes sure they are reset to basic defaults needed across Elements. You can override these as needed. */

#body input,
#body input:visited,
#body input:hover,
#body input:focus,
#body input:active
{
  display: inline-block;
  width: auto;
  height: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  overflow: visible;
  text-transform: none;
  background: transparent;
  cursor: pointer;
  /*letter-spacing: 0;*/
  /* added this as chrome is now changing certain pseudo classes on sub-features of inputs */
  padding-block: 0;
  padding-inline: 0;
  line-height: normal; /* added */
}

#body input[type=text]::placeholder,
#body input[type=textarea]::placeholder
{
    color: var(--Type-Limed-Spruce-Placeholder, inherit) !important;
    transition: none;
}



/* The old Admin Portal.css changes the font-family directly using specialized classes and elements. We will just change the elements for now, in the rare case old portal.js is used and starts manipulating these styles. */


h1, h2, h3, h4, form .form-title, form legend, .form .form-title, .form legend, h5, .list-group .list-group-item.list-group-header, h6
{
    /* Use "inherit" to remove any styles and let the element and classes inherit the nature values coming off the body/html tags. */
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    word-spacing: inherit;
    letter-spacing: inherit;
    color: inherit;
}
  


/* CHROME BROWSER HACK : This partially solves a Chrome browser bug where using the autofill input attribute then choosing a text choice from the browser popup displays a font in the wrong family, size, and with a blue background! This fixes the blue background and font size, but not the font family which cannot be modified as of 4/2024. This should remove the ugly gray or colored box that overlays all input fields when the "autocomplete=on" attribute is added to input text fields, and the Chrome browser pops up its own text choices from user's previous inputs. This creates a nasty gray filler on the text input. But this hack removes it. - MStokely */

input:-webkit-autofill,
input:-webkit-autofill:link,
input:-webkit-autofill:visited,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:focus-visible,
input:-webkit-autofill:focus-within,
input:-webkit-autofill:active {
  -webkit-background-clip: text !important;
  /*-webkit-box-shadow: 0 0 0 1000px white inset !important;*//* hack to destroy chromes nasty blue autofill bg color */
  /*-webkit-text-fill-color: inherit !important;*/
  border-radius: 0.5rem !important;
  /*-webkit-background: transparent !important;*/
  /*background: transparent !important;*/

}











/* ========== Grids &  Layouts ========== */

/* 
    
IMPORTANT:
    
    1. These override the default grid in layout.css so you dont have to recreate grid CSS every time. Allows you to fully customize a base grid with header, asides, main, and footer. Most of these styles may be reused across pages.
    
    2. Elements Now Uses a Grid with Main Panel Only! (no headere, footer, or asides are used)

    3. Delete these grid styles below to see the original 5-part grid layout (layout.css) with all features (if needed) Note: This extra class below (".grid_parent_1") as added next to the ".grid_parent" class on the grid layout div wrapper that goes around the header, foot, and main elements. Its locks them all in a single page grid. This class below was added to the parent grid div and allows us to further write over the "layout.css" default page grid styles and further customize them. The FIGMA designs have changed several times, further changing the layouts, complicating all the child grid panels. So this class set below has allowed us to change the grid layouts without changing the styles in "layouts.css" file which control the original grid styles. This allows us to go back to an older grid with full header, footer, and asides later if the web design keeps changing and evolving and goes back to odler designs, like headers or footers. Otherwise, all those styles would be lost and the next UI person would have to keep starting over from scratch with new grids and layouts. - MStokely

*/

/* ===== Layout With No Header ===== */

html #body .grid_parent_1 {

  border: none;

  /* NO HEADER STYLES */
  grid-template-rows: auto;
  grid-template-columns: auto;
  grid-template-areas: "main";
  -ms-grid-rows: auto;
  -ms-grid-columns: auto;
  overflow: hidden;
  height: auto;
  min-height: 100vh;
  max-height: 100vh;

  /*border: 5px solid blue;*/

}

/* header style */

html #body.add-header .grid_parent_1 {

  border: none;

  /* HEADER STYLES */
  grid-template-rows: auto 1fr;
  grid-template-columns: auto;
  grid-template-areas: "header" "main";
  -ms-grid-rows: auto auto;
  -ms-grid-columns: auto;
  overflow: hidden;
  height: auto;
  min-height: 100vh;
  max-height: 100vh;

  /*border: 5px solid blue;*/

}

html #body .grid_main_1 {

    border: none;

    /* NO HEADER STYLES */
    max-height: 100vh;/* Removed header so this can me 100vh now. */
    overflow: visible;/* Important: We must allow modals to overflow outside Main into Header. */

    /*border: 3px solid black;*/

}

html #body.add-header .grid_main_1 {

    border: none;

    /* HEADER STYLES */
    max-height:calc(100vh - 3.5rem);/* Important: This prevents the "main" content box from overflowing. */
    overflow: hidden;

    /*border: 3px solid black;*/

}

/* UPDATE: None of the header, asides, or footer are used in the latest Figma designs. So these are not used below. But I left these styles in case in the future we need these HTML5 major structural panels. If you enable these, you will need to add them back above by deleting "grid_parent_1" and/or modifying "grid_parent" class. The original full grid layouts arin "layouts.css" which allow every combination of grid layout possible for you. - MStokely */

html #body .grid_header_1 {

    display:none;

    /*
    border: none;
    overflow: visible;
    z-index: 100;
   -webkit-box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08);
    */
}

html #body.add-header .grid_header_1 {

    display: block;
    border: none;
    overflow: visible;
    z-index: 100;
    -webkit-box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08);

    min-height: 3.5rem;
    max-height: 3.5rem;

    background: var(--Neutral-Nero-000, transparent);

}

html #body .grid_asideleft_1 {
	display:none;
}

html #body .grid_asideright_1 {
	display:none;
}

html #body .grid_footer_1 {
	display:none;
}











/* ===== Custom Body ===== */

html #body {



}





/* ===== Old Promotions Site.css (delete these and the file later) ===== */

/*
html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}
*/



#body .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

#body .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

#body .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}










/* ========== Spacer ========== */

/* Universal Expanding Flexbox Spacer : Only use this class for created maximum expanding and shrinking spacers to fill flexboxes. You easily customize or override these settings inside your own containers, if needed but add your custom container class in front of .spacer in your own CSS section of this file. We have to use #main or some powerful selector to override any flex selectors in custom flexboxes child classes the spacer inherits. You can also add !important to all the properties or in your classes to override these, or better dont use spacer class and just create a new named spacer class for your custom situation. But leave this one alone.  - MStokely */

#body #header .spacer,
#body #main .spacer,
#body .spacer
{
    
    display: block;
    margin: auto;
    padding: 0;
    line-height: 0;

    /* Remove below if you want your flexbox design to customize width and height of the actual spacer outside the flex coontrols. */
    width: auto;
    height: auto;
    min-width: auto;
    min-height: none;
    max-width: auto;
    max-height: none;

    /* Note: The flex-grow below is set to "1" which changes the spacer inside flexboxes. Also, the second "1" can be "0" if you have issues with spacer expansion as this "flex-shrink" just says make the spacer as tiny as possible or 0 width if the other sibling flexboxes fill up the row with their content. - MS */

    -webkit-box-flex: 1 1 !important;
    -moz-box-flex: 1 1 !important;
    -webkit-flexbox: 1 1 !important;
    -webkit-flex: 1 1 !important;
    -ms-flex: 1 1 !important;
    flex: 1 1 auto !important;

    cursor: default;

    /* Uncomment below to see all the spacer in the website layout and get  feel visually for what all your spacers are doing. */
    /*border: 1px solid blue;*/

}






/* ===== Homepage Flexbox Wrapper ===== */

#body main section.homepage
{
    position: relative;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 0; /* row space | column space */
    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
    align-content: stretch;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: auto;
    height: auto;
    min-width: 100%;
    max-width: 100%;
    min-height: 100vh;
    max-height: 100vh;
    padding: 0;
    margin: 0;
    text-align: left;
    background: transparent;
    overflow: visible;/* Set to visible, so any future overflow context menus will appear in neighboring panels. */

    /*border:5px solid blue;*/
}

/* When the header is present, subtract its height. */
#body.add-header main section.homepage
{
    min-height: calc(100vh - 3.5rem);
    max-height: calc(100vh - 3.5rem);
}


/* Homepage : Left Content Area */
#body main section.homepage .homepage_leftmenu
{
    display: none;/* TURN OFF UNTIL NEEDED! */

    position: relative;
    list-style: none;
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;

    width: 17rem;/* This is a temporary width that could change */
    /*width: auto;*/
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: 100%;
    max-height: 100%;
    text-align: left;
    border: none;

    /* Header Styles */
    /*padding: 1rem 0rem 1rem 1rem;*/
    margin: 0rem;
    /*overflow-x: auto;*//* Scrolling is controlled here so the whole panel with padding scrolls. */
    /*overflow-y: auto;*/
    background: transparent;
    /*max-height: calc(100vh - 5rem);*/

    /* No Header Styles */
    padding: 0rem;
    overflow: visible;/* Set to visible, so any future overflow context menus will appear in neighboring panels. */
    min-height: 100vh;/* Removed header so this can me 100vh now. */
    max-height: 100vh;/* Removed header so this can me 100vh now. */

    /*border: 3px solid green;*/
}

/* When the header is present, subtract its height. */
#body.add-header main section.homepage .homepage_leftmenu
{
    min-height: calc(100vh - 3.5rem);
    max-height: calc(100vh - 3.5rem);
}


/* Right Content Area : Tabular or other data */
#body main section.homepage .homepage_rightcontent
{
    position: relative;
    display: block;
    list-style: none;
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex: 1 1 auto;
    -webkit-flexbox: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: auto;
    height: auto;
    /*min-width: calc(100vw - 17rem);*//* Turn off if left menu not needed */
    min-width: 100vw;
    max-width: none;
    text-align: left;
    border: none;
    padding: 0;
    margin: 0;
    padding: 0;
    margin: 0;

    /* HEADER */
    /*background: transparent;*/
    /*min-height: 100%;*/
    /*max-height: calc(100vh - 4rem);*//* subtract the height of the header */
    /*overflow-x: auto;*/
    /*overflow-y: hidden;*/

    /* NO HEADER */
    background: var(--Neutral-Nero-000, transparent);/* New white background added under table panel. */
    min-height: 100vh;/* Removed header so this can me 100vh now. */
    max-height: 100vh;/* Removed header so this can me 100vh now. */
    overflow: visible;/* changed to visible to allow context menu overflows into neighboring panels, if needed. */

    /*border:3px solid red;*/
}

/* When the header is present, subtract its height. */
#body.add-header section.homepage .homepage_rightcontent
{
    min-height: calc(100vh - 3.5rem);
    max-height: calc(100vh - 3.5rem);
}





/* ===== Page Styles ===== */

#body #main .page_elements {

}


















/* ===== Old Layout Styles (we might be able to delete later) ===== */

#body a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

/*#body a {
    color: #0077cc;
}*/

#body .btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

#body .nav-pills .nav-link.active,
#body .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

#body .border-top {
    border-top: 1px solid #e5e5e5;
}
#body .border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

#body .box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

#body button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/*#body .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
}*/







/* ===== Header Navigation Styles (we might be able to delete later) ===== */

/* Base navbar styles */
#body .ex-navbar {

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    min-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    min-height: 3.5rem;
    margin: auto 0;
    position: relative;

    flex-wrap: nowrap;
    justify-content: flex-start;

    /* color: rgba(0, 0, 0, 0.55); */
    /* background-color: #fff; */
    /* border-bottom: 1px solid rgba(0, 0, 0, 0.175); */
    /* box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); */
    /* margin-bottom: 1rem; */

    /* border:2px solid blue; */

}

/* Full-width container */
#body .ex-container-fluid {

    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    margin: auto 1rem;

    /* border:2px solid green; */
}

/* Navbar brand */
#body .ex-navbar-brand {

    font-size: 1.25rem;
    text-decoration: none;
    white-space: nowrap;
    margin: auto 0;

    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    -o-transition: color 300ms ease;
    transition: color 300ms ease;

    /* border:2px solid green; */
}

#body .ex-navbar-brand:hover {

    color: var(--Primary-Denim-300, inherit);

    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    -o-transition: color 300ms ease;
    transition: color 300ms ease;
}

/* Hide checkbox : Small screens show a special mobile menu with dropdown, which is controlled by a hidden checkbox feature. */
#body .ex-navbar-toggle-checkbox {

    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    z-index: -9999;
    pointer-events: none;

}

/* Navbar toggler button */
#body .ex-navbar-toggler {

    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid var(--Neutral-Cool-Gray-450);
    /*border-radius: 0.375rem;*/
    border-radius: 0.25rem;
    /*transition: box-shadow 0.15s ease-in-out;*/
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#body .ex-navbar-toggler:hover {
    text-decoration: none;
}

#body .ex-navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 0.25rem;
}

/* Navbar collapse container */
#body .ex-navbar-collapse {

    display: inline-flex;
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
    justify-content: space-between;

}

/* Navigation list */
#body .ex-navbar-nav {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;

    flex-grow: 1;

}

/* Navigation item */
#body .ex-nav-item {
    display: list-item;
}

/* Navigation link */
#body .ex-nav-link {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;

    color: var(--Type-Limed-Spruce-100, inherit);
}

#body .ex-nav-link:hover,
#body .ex-nav-link:focus {

    color: var(--Primary-Denim-300, inherit);

    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    -o-transition: color 300ms ease;
    transition: color 300ms ease;

}



/* Mobile styles (< 576px) */
@media (max-width: 575.98px) {

    #body .ex-navbar-expand-sm {
        flex-wrap: wrap;
    }

    #body .ex-container-fluid {
        flex-wrap: wrap;
    }

    #body .ex-navbar-toggler {
        display: flex;
    }

    #body .ex-navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--Neutral-Nero-000);
        border-top: 1px solid var(--Neutral-Cool-Gray-450);
        -webkit-box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08);
        -moz-box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08);
        box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        padding: 0.5rem 3rem;
        z-index: -1;
        max-height: 0;
        opacity: 0;

        /*transition: max-height 0.5s ease, opacity 0.5s ease;*/
                
    }

    /* Show menu when checkbox is checked */
    #body #ex-navbar-toggle:checked ~ .ex-navbar-collapse {

        z-index: 1000;
        max-height: 10rem;
        opacity: 1;

        transition: max-height 0.5s ease, opacity 0.5s ease;

        /* border:2px solid green; */
    }

    #body ul.ex-navbar-nav {
        margin:0;
        padding:0;
        flex-direction: column;
    }

    #body .ex-nav-link {
        padding-right: 0;
        padding-left: 0;
    }
}

/* Desktop styles (≥ 576px) */
@media (min-width: 576px) {

    #body .ex-navbar-expand-sm {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    #body .ex-navbar-toggler {
        display: none;
    }

    #body .ex-navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    #body .ex-navbar-nav {
        flex-direction: row;
    }

    #body .ex-nav-item {
        margin-left: 0.5rem;
    }

    #body .ex-nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

}







/* ===== Welcome & Privacy Page Styles ===== */

#body .welcome-container,
#body .privacy-container {
    min-width: 100%;
    text-align: center;
    margin-top: 2rem;
}

#body .welcome-text,
#body .privacy-text
{
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--Type-Limed-Spruce-500, inherit);
    min-width: auto;
    max-width: none;
}










#body .hidden {
  display: none !important;
}

/* REMOVE tHESE LATER */

:root {
  /* Colors - Neutrals */
  --ex-white: #FFFFFF;
  --ex-bg-page: #F2F2F2;
  --ex-bg-card-header: #F8F9FA;
  --ex-border: #E0E0E0;
  
  /* Colors - Text */
  --ex-text-heading: #1F2931;
  --ex-text-primary: #2C3943;
  --ex-text-label: #46565F;
  --ex-text-placeholder: #8C959E;
  --ex-text-subtle: rgba(83, 83, 83, 0.8);
  
  /* Colors - Brand */
  --ex-primary: #126CB8;
  --ex-primary-dark: #0E4E99;
  --ex-primary-light: rgba(175, 202, 244, 0.5);
  --ex-secondary: #A037C5;
  --ex-error: #D70015;
  
  /* Colors - Tags/Badges */
  --ex-tag-blue-bg: #D0E8F2;
  --ex-tag-blue-text: #126CB8;
  --ex-tag-orange-bg: #FFE5CC;
  --ex-tag-orange-text: #E65100;
  --ex-tag-green-bg: #D0F0C0;
  --ex-tag-green-text: #2E7D32;
  --ex-tag-gray-bg: #E0E0E0;
  --ex-tag-gray-text: #46565F;
  
  /* Colors - Pale Sky */
  --ex-pale-sky: #6C757D;
  
  /* Spacing */
  --ex-spacing-xs: 4px;
  --ex-spacing-sm: 8px;
  --ex-spacing-md: 16px;
  --ex-spacing-lg: 24px;
  --ex-spacing-xl: 32px;
  
  /* Border Radius */
  --ex-radius-sm: 4px;
  --ex-radius-md: 8px;
  --ex-radius-lg: 16px;
  --ex-radius-pill: 24px;
  
  /* Typography */
  --ex-font-family: 'Proxima Nova', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ex-font-size-xs: 10px;
  --ex-font-size-sm: 12px;
  --ex-font-size-md: 14px;
  --ex-font-size-lg: 16px;
  --ex-font-size-xl: 24px;
  
  /* Shadows */
  --ex-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --ex-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
  
  /* Z-Index Scale - Consistent stacking hierarchy across the application
   * Use these CSS variables for z-index values to maintain proper layering.
   * 
   * IMPORTANT: When using opacity, transform, or filter on parent elements,
   * be aware they create new stacking contexts that can trap child z-index.
   * See: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
   */
  --z-base: 1;              /* Base level content */
  --z-elevated: 10;         /* Elevated content (sticky headers, etc.) */
  --z-sticky: 100;          /* Sticky elements, preview panels */
  --z-topnav: 1000;         /* Top navigation bar */
  --z-dropdown: 1100;       /* Dropdown menus, filter panels */
  --z-popover: 1200;        /* Popovers, tooltips */
  --z-modal-backdrop: 1300; /* Modal backdrop overlay */
  --z-modal: 1400;          /* Modal dialogs */
  --z-toast: 1500;          /* Toast notifications */
  --z-tooltip: 1600;        /* Tooltips that must appear above modals */
}





/* ============================================
   Base Styles
   ============================================ */

/* Page utility: set a page-level white background when needed (template pages) */

/* NO DO NOT USE THIS!
body.page-white {
  background: var(--ex-white);
}
*/

/* Fallback for environments where server-side body class isn't injected reliably:
   Use :has() to apply white background when the promos card is present (modern browsers)
*/

/* NO DO NOT USE THIS!
body:has(.ex-promo-card) {
  background: var(--ex-white);
}
*/

/* Optional: To use the exact 'Proxima Nova' font from Figma, add licensed @font-face rules
   and place the font files under /wwwroot/fonts. Example:

   @font-face {
     font-family: 'Proxima Nova';
     src: url('/fonts/ProximaNova-Regular.woff2') format('woff2');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
   }

   NOTE: Do not add font files here unless you have licensing for the font. Using the
   system fallback stack provides a robust, readable alternative when the font is
   not available on the client.
*/

/* DO NOT USE THIS 
body {
  font-family: var(--ex-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--ex-bg-page);
  color: var(--ex-text-primary);
}
*/










/* ============================================
   OLD Page Layout
   ============================================ */

/*
#body .ex-page-layout {
  display: flex;
  min-height: 100vh;
  padding-top: 64px;
}

#body .ex-sidebar {
  width: 444px;
  background: var(--ex-white);
  border-radius: var(--ex-radius-lg);
  margin: var(--ex-spacing-md);
  padding: var(--ex-spacing-md);
  height: fit-content;
  position: sticky;
  top: 80px;
}

#body .ex-main-content {
  flex: 1;
  padding: var(--ex-spacing-md);
  max-width: 640px;
}
*/












/* ===== New Edit Page ===== */

#body .editpage {
    position: relative;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: vertical;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    flex-direction: column;
    gap: 0 0;
    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
    align-content: stretch;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: auto;
    height: auto;
    min-width: 100%;
    max-width: 100%;
    min-height: 100vh;
    max-height: 100vh;
    padding: 0;
    margin: 0;
    text-align: left;
    background: transparent;
    overflow: visible;

    /*border: 2px solid red;*/
}

/* When the header is present, subtract its height. */

#body.add-header .editpage
{
    min-height: calc(100vh - 3.5rem);
    max-height: calc(100vh - 3.5rem);
}

/* ===== Edit Header ===== */

#body .editpage-header {

    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;

    position: relative;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: vertical;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 0;
    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
    align-content: stretch;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    /*
    justify-content: space-between;
    align-content: center;
    align-items: center;
    */

    width: auto;
    height: auto;
    min-width: 100%;
    max-width: 100%;
    min-height: 4rem;
    max-height: 4rem;
    text-align: left;
    overflow: visible; /* Set to visible, so any future overflow context menus will appear in neighboring panels. */
    background: var(--Neutral-Nero-000, transparent);
    /*padding: 0rem 1.5rem;*/
    padding: 0;
    margin: 0;
    /*z-index: 10;*/
    box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.08);
    /*backdrop-filter: blur(1.25rem);*/

    /*border: 1px solid blue;*/
}

#body .titlebar-header {

    position: relative;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 1rem;
    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
    align-content: normal;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: auto;
    height: auto;
    min-width: 100%;
    max-width: none;
    min-height: auto;
    max-height: none;
    overflow: visible;
    text-align: left;
    padding: 0 2rem 0 1rem;
    margin: auto 0;
    background: transparent;

}

#body .titlebar_header > * {
    position: relative;
    display: block;
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: auto 0;
}

#body .titlebar_backbutton,
#body .titlebar_forwardbutton
{
    background: var(--Neutral-Nero-000, transparent);
    border-radius: .5rem;
    padding: .375rem;
    margin: auto;
}

#body .titlebar_titletype1
{
    -webkit-box-flex: 1 0 auto;
    -moz-box-flex: 1 0 auto;
    -webkit-flexbox: 1 0 auto;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    position: relative;
    list-style: none;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 .25rem;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
    align-content: stretch;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: auto;
    height: auto;
    min-width: 12rem;
    max-width: none;
    min-height: auto;
    max-height: none;
    padding: 0;
    margin: auto 0;
    overflow: visible;
    text-align: left;
    background: transparent;
    overflow-x: clip;
}

#body .titlebar_titletype1 > h1
{
    position: relative;
    top: 0;
    display: block;
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: auto 0 auto 0;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: 100%;
    min-height: auto;
    max-height: none;
    border: 0;
    outline: 0;
    padding: 0;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1rem;
    font-weight: 400;
    line-height: normal;
    font-style: normal;
    color: var(--Type-Limed-Spruce-500, inherit);
}






/* ===== Edit Page Styles ===== */

#body .editpage-form
{
    -webkit-box-flex: 1 0 auto;
    -moz-box-flex: 1 0 auto;
    -webkit-flexbox: 1 0 auto;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;

    display: block;
    width: auto;
    height: auto;
    min-width: 100%;
    max-width: 100%;
    min-height: auto;
    max-height: none;
    text-align: left;
    border: 0;
    padding: 1rem 1rem 1rem 1rem;
    margin: 0;
    overflow: visible;
    background: transparent;

    /*border: 2px solid blue;*/

}

#body .editpage-panels
{
    position: static;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 4rem;
    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
    align-content: stretch;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: auto;
    height: auto;
    min-width: 100%;
    max-width: 100%;
    min-height: auto;
    max-height: none;
    padding: 0 4rem 0 0;
    margin: 0;
    overflow: visible;
    text-align: left;
    background: transparent;

    /*border: 2px solid green;*/
}

#body .editpage-panels > .panel-left
{
    position: relative;
    display: block;
    list-style: none;
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    text-align: left;
    border: 0;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    overflow-x: hidden;
    overflow-y: hidden;
    background: transparent;
}


#body .editpage-panels > .panel-right
{
    position: relative;
    display: block;
    list-style: none;
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex: 1 1 auto;
    -webkit-flexbox: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

    position: relative;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: wrap;
    flex-flow: wrap;
    flex-direction: row;
    gap: 1.5rem 1.5rem;
    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
    align-content: flex-start;
    -webkit-box-align: normal;
    -webkit-flex-align: normal;
    -webkit-align-items: normal;
    -ms-flex-align: normal;
    align-items: normal;

    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: calc(100vh - 6rem);
    max-height: calc(100vh - 6rem);
    text-align: left;
    border: 0;
    background: transparent;
    padding: 0 1rem 0 0;
    margin: 0;

    overflow-x: auto;/* set to hidden for no scrollbar bar */
    overflow-y: auto;
    scrollbar-gutter: stable;

    container-type: inline-size;/* used below to trigger the ability to hide empty last spacer container children in card-container. */

}






/* ===== Left Menu : Content Panels ===== */

#body nav.menu-left
 {
    position: relative;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    flex-direction: row;
    gap: 0 0;
    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
    align-content: normal;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: 100%;
    max-height: 100%;
    overflow: visible;
    padding: 1rem;
    margin: 0;
    background: var(--Neutral-Nero-000, transparent);
    border-radius: 1rem;
    text-align: left;
}

#body .menu-left > .iconmenu {
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    border: 0;
    padding: 0;
}

#body .menu-left > ul,
#body .menu-left > ul.iconmenu
{
    position: static;
    list-style: none;
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    flex-direction: column;
    gap: 0 0;
    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
    align-content: normal;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background: transparent;
    border-radius: 0;
    text-align: left;
}

#body .menu-left ul > li
 {
    position: relative;
    list-style: none;
    display: block;
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    min-width: 100%;
    max-width: 100%;
    min-height: auto;
    max-height: none;
    text-align: left;
    white-space: nowrap;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0rem 0rem 0.25rem 0rem;
    overflow: visible;
    background: transparent;
}

#body .menu-left > .iconmenu > li > button,
#body .menu-left > .iconmenu > li > button:hover,
#body .menu-left > .iconmenu > li > button:focus,
#body .menu-left > .iconmenu > li > button:active
{
    position: relative;
    display: block;
    width: auto;
    height: auto;
    overflow: hidden;
    text-align: center;
    padding: .375rem;
    margin: auto;
    border-radius: .5rem;
    border: 1px solid transparent;
    background: transparent;
    -webkit-transition: background 300ms ease;
    -moz-transition: background 300ms ease;
    -o-transition: background 300ms ease;
    transition: background 300ms ease;
}

#body .menu-left > .iconmenu > li > button > img
{
    text-align: center !important;
    margin: auto 0 !important;
}

#body .iconmenu button > img:nth-child(1)
{
    display: block;
}

#body .iconmenu button > img:nth-child(2)
{
    display: none;
}




/* Pressed State */

#body .menu-left > .iconmenu > li > button.pressed
 {
    background: var(--Primary-Denim-50, inherit);
    -webkit-transition: background 300ms ease;
    -moz-transition: background 300ms ease;
    -o-transition: background 300ms ease;
    transition: background 300ms ease;
}

#body .menu-left > .iconmenu > li > button.pressed > :nth-child(1)
{
    display: none;
}
#body .menu-left > .iconmenu > li > button.pressed > :nth-child(2)
{
    display: block;
}
#body .menu-left > .iconmenu > li > button.pressed > img
{
    filter: var(--Primary-Denim-400-SVG) !important;
    -webkit-transition: filter 300ms ease !important;
    -moz-transition: filter 300ms ease!important;
    -o-transition: filter 300ms ease!important;
    transition: filter 300ms ease !important;
}






/* ===== Left Menu - Content ===== */

#body .menu-left picture,
#body .menu-left section,
#body .menu-left aside,
#body .menu-left nav,
#body .menu-left ul,
#body .menu-left li {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
    width: auto;
    height: auto;
    border: 0;
    text-align: left;
}

#body .menu-left > ul.textmenu {
    -webkit-box-flex: 1 0 auto;
    -moz-box-flex: 1 0 auto;
    -webkit-flexbox: 1 0 auto;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    padding: 0 1rem 0 1rem;
    width: 21.5rem;
    min-height: calc(100vh - 10rem);
    max-height: calc(100vh - 10rem);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-gutter: stable;
    -webkit-transition: width 400ms ease;
    -moz-transition: width 400ms ease;
    -o-transition: width 400ms ease;
    transition: width 400ms ease;
}

#body .menu-left > ul.textmenu.scrollableinsets {
    margin-top: 2rem;
}

/* Left panel collapses when .close is toggled via JS */

#body nav.menu-left > ul.textmenu.close {
    display: block !important;
    flex: none !important;
    width: 0rem !important;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    -webkit-transition: width 0ms ease;
    -moz-transition: width 0ms ease;
    -o-transition: width 0ms ease;
    transition: width 0ms ease;
}

#body nav.menu-left > ul.textmenu.close * {
    display: none !important;
}

#body .menu-left:has(.textmenu:not(.close)) .iconmenu {
    padding: 0 1rem 0 0 !important;
    border-right: 1px solid var(--Neutral-Alto-300, inherit) !important;
}

#body .menu-left > .scrollableinsets > li:first-of-type {
    position: absolute;
    margin-top: -2rem;
    z-index: 100;
    min-width: auto;
    max-width: none;
}

#body .menu-left > ul.textmenu > li.flextitle {
    min-width: 20.625rem;
    max-width: 20.625rem;
    overflow: hidden;
    text-overflow: initial;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 .5rem;
    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
    align-content: normal;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

#body .menu-left > ul.textmenu > li.flextitle > h2
 {
    -webkit-box-flex: 1 0 auto;
    -moz-box-flex: 1 0 auto;
    -webkit-flexbox: 1 0 auto;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    width: auto;
    min-width: auto;
    max-width: none;
    overflow: hidden;
    padding: 0;
    margin: auto 0;
}

#body .menu-left > ul.textmenu > li.flextitle > h2 > *:first-child {
    margin-left: 0.5rem; 
}

#body .menu-left > ul.textmenu > li.flextitle > button
 {
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    min-width: auto;
    max-width: none;
    overflow: hidden;
    padding: 0;
    margin: auto 0;
    border: 0;
    border-radius: 0;
    background: none;
    outline: 0;
}

#body .menu-left > ul.textmenu > li {
    margin-bottom: 0;
}

#body .menu-left > ul.textmenu > li > h2.schemapanel_title,
#body .menu-left > ul.textmenu > li > h2.schemapanel_title > div {
    font-size: 1rem;
    line-height: 2rem;
    font-weight: 400;
    color: var(--Type-Limed-Spruce-500, inherit);
}



#body .menu-left > ul.textmenu > li > h2.schemapanel_title > div:nth-child(1)
{
    padding-left: 0;
}

#body .menu-left > ul.textmenu > li > h2.schemapanel_title > div:nth-child(1) > img,
#body .menu-left > ul.textmenu > li > h2.schemapanel_title > div:has(img):nth-child(3) img
{
    margin: auto !important;
}

#body .menu-left > ul.textmenu > li > h2.schemapanel_title > div:nth-child(2)
{
    margin: auto auto auto .25rem;
}





/* Left Menu List Items */

#body .menu-left > ul.textmenu > li.statuslistitem
{
    position: relative;
    list-style: none;
    display: block;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    text-align: left;
    white-space: nowrap;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0.5rem 0rem 0.5rem 0rem;
    overflow: visible;
    background: transparent;
}

#body .menu-left > ul.textmenu > li.defaultlistitem
{
    position: relative;
    list-style: none;
    display: block;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    text-align: left;
    white-space: nowrap;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0rem 0rem 0.5rem 0rem;
    overflow: visible;
    background: transparent;
}

#body .menu-left > ul.textmenu > li.statuslistitem > div:first-child
{
    position: relative;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 .25rem;
    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
    align-content: normal;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: auto;
    height: auto;
    min-width: 100%;
    max-width: 100%;
    min-height: auto;
    max-height: none;
    overflow: visible;
    text-align: left;
    padding: 0;
    margin: auto 0;
    border-radius: 0;
    cursor: default;
    text-decoration: none;
    border: 0;
    background: transparent;
}

#body .menu-left > ul.textmenu > li.statuslistitem > div:first-child > *,
#body .menu-left > ul.textmenu > li.schemapanel > h2.schemapanel_title > button
 {
    position: relative;
    list-style: none;
    display: block;
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    text-align: left;
    white-space: nowrap;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: auto 0;
    overflow: visible;
    background: transparent;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.25rem;
    color: var(--Type-Limed-Spruce-300, inherit);
    margin: auto 0;
}

#body .menu-left > ul.textmenu > li.statuslistitem > div:first-child > span:first-of-type {
    margin: 0 0 0 0.5rem; 
}


#body hr.schemapanel_hr
{
    margin: 0 0 .5rem 0;
}

#body .menu-left > ul.textmenu > li > hr.schemapanel_hr
{
    margin: .75rem 0 .75rem 0;
}

#body .menu-left > ul.textmenu > li hr.schemapanel_hr
{
    border-top: 1px solid var(--Neutral-Alto-300);
    margin: 0 0 0 0;
}

#body .menu-left > ul.textmenu .schemapanel_subtext div:first-child,
#body .menu-left > ul.textmenu .schemapanel_subtext div:last-child {
    padding: 0;
    margin: .25rem 0 0 0;
    color: var(--Type-Limed-Spruce-Placeholder, inherit);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1rem;
}

#body .menu-left > ul.textmenu > li.li-divider-1
{
    margin: 1rem 0rem 0.5rem 0rem !important;
}

#body .menu-left > ul.textmenu > li.li-divider-2
{
    margin: 0.5rem 0rem 0.5rem 0rem !important;
}









#body .menu-left .schemapanel_title
 {
    position: relative;
    width: auto;
    height: auto;
    min-width: 100%;
    max-width: none;
    min-height: auto;
    max-height: none;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 .25rem;
    -webkit-box-pack: stretch;
    -ms-flex-pack: stretch;
    justify-content: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding: 0;
    margin: auto;
    text-align: left;
    background: transparent;
    overflow: visible;
    border-radius: 0;
    border: 0;
    /* border: 1px solid green; */
}

#body .menu-left .schemapanel_title > *
 {
    display: block;
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    text-align: center;
    white-space: nowrap;
    outline: 0;
    border: 0;
    border-radius: 0;
    margin: auto 0;
    padding: 0;
    color: var(--Type-Limed-Spruce-100, inherit);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.25rem;
    letter-spacing: normal;
}




/* ===== Generic Form Title Styles (also copied into field-helpers.js) ===== */

#body .generic-title {
    position: relative;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 .25rem;
    -webkit-box-pack: stretch;
    -ms-flex-pack: stretch;
    justify-content: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding: 0rem 0rem 0rem 1rem;
    margin: 0 0 0.25rem 0;
    text-align: left;
    background: transparent;
    overflow: visible;
    border-radius: 0;
    border: 0;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 400;
}

#body .generic-title >  *
{
    display: block;
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    text-align: center;
    white-space: nowrap;
    outline: 0;
    border: 0;
    border-radius: 0;
    margin: auto 0;
    padding: 0;
    color: var(--Type-Limed-Spruce-100, inherit);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.25rem;
    letter-spacing: normal;
}

#body .generic-title button.help-icon
 {
    display: block;
    padding: 0;
    margin: auto 0;
    overflow: hidden;
    border: 0;
    outline: 0;
    border-radius: 0;
    background: none;
}

#body .generic-title button.help-icon img
{
    margin: auto 0 !important;
}

#body .generic-title .help-box
{
    display: none;
    flex: none;
    position: absolute;
    top: 1.375rem;
    background: var(--Neutral-Nero-000, inherit);
    width: auto;
    height: auto;
    min-width: 10rem;
    max-width: 10rem;
    min-height: 2.5rem;
    max-height: none;
    border-radius: .5rem;
    border: 1px solid var(--Neutral-Concrete-200, inherit);
    white-space: wrap;
    z-index: 101;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1rem;
    text-align: left;
    color: var(--Type-Limed-Spruce-100, inherit);
    padding: .5rem 1rem;
    margin: 0 2rem;

    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, .08);
    -moz-box-shadow: 0 4px 8px rgba(0,0,0,.08);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .08);
}

#body .generic-title .help-box span {
    font-size: .75rem;
    font-weight: 400;
    line-height: 1rem;
    color: var(--Type-Limed-Spruce-100, inherit);
    text-align: left;
    white-space: wrap;
    padding: 0;
    margin: 0;

    /* Use this if you add foreign language shared.rsx and dont want overflows of text.
    max-width: 17rem;
    overflow: hidden;
    text-overflow: ellipsis;
    */
}

#body .generic-title:has(button.help-icon:hover) .help-box,
#body .generic-title:has(button.help-icon:focus) .help-box,
#body .generic-title:has(button.help-icon:focus-within) .help-box
{
    display: block;
}


/* ===== Generic Form Field Container ===== */

#body .generic-flexbox
{
    position: relative;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 0;
    -webkit-box-pack: stretch;
    -ms-flex-pack: stretch;
    justify-content: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding: 0rem 0rem 0rem 0rem;
    margin: 0rem 0rem 0rem 0rem;
    text-align: left;
    background: transparent;
    overflow: hidden;
    border-radius: 0;
    border: 0;

    /*border: 1px solid blue;*/
}

#body .generic-flexbox > *
{
    display: block;
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: auto 0;
}

#body .generic-flexbox.margin1
{
    margin: auto 0 1rem 0;
}

#body .default-text
{
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.25rem;
    color: var(--Type-Limed-Spruce-300, inherit);
    margin: auto 0 auto 0.5rem;
}

#body .managecode-text
{
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--Type-Limed-Spruce-300, inherit);
    line-height: 1rem;
    margin: auto 0;
    padding: 0rem 0rem 0rem 0.5rem;
}

#body .summary-text
{
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--Type-Limed-Spruce-500, inherit);
    line-height: 1rem;
    margin: 0.5rem 0rem 0.5rem 0rem;
    padding: 0rem 0rem 0rem 0.5rem;
    word-wrap: normal;
    white-space: normal;
}

#body .summary-text span
{
    word-wrap: normal;
}






/* Horizontal Rule Dividers */

#body hr.hr-divider-1
{
    border-top: 1px solid var(--Neutral-Alto-300);
    padding: 0 0 0 0 !important;
    margin: 0 0 0 0 !important;
    opacity: 1 !important;/* bootstraps reboot sheet is setting hr opacity to 0.25. why? this fixes it! */
}

#body hr.hr-divider-2
{
    border-top: 1px solid var(--Neutral-Alto-300);
    padding: 0 0 0 0 !important;
    margin: 1rem 0 1rem 0 !important;
    opacity: 1 !important;/* bootstraps reboot sheet is setting hr opacity to 0.25. why? this fixes it! */
}





/* ===== Textarea ===== */


#body .generic-flexbox textarea:hover,
#body .generic-flexbox textarea:focus,
#body .generic-flexbox textarea:active
{

    border: 1px solid var(--Primary-Denim-300);

    -webkit-transition: border 300ms ease;
    -moz-transition: border 300ms ease;
    -o-transition: border 300ms ease;
    transition: border 300ms ease;
}

#body .generic-flexbox textarea::placeholder
{
    color: var(--Type-Limed-Spruce-Placeholder, inherit) !important;
    transition: none;
}

#body .generic-flexbox textarea:disabled
 {
    background: var(--Neutral-Alto-300, transparent) !important;
    border: 1px solid var(--Neutral-Alto-300, inherit) !important;

    color: var(--Neutral-Pale-Sky-500, inherit) !important;
    cursor: default !important;

    /* Stop text selection */
    -webkit-touch-callout: none !important; /* iOS Safari */
    -webkit-user-select: none !important; /* Safari, Chrome, Opera */
    -khtml-user-select: none !important; /* Konqueror HTML */
    -moz-user-select: none !important; /* Firefox */
    -ms-user-select: none !important; /* Internet Explorer/Edge */
    user-select: none !important; /* Standard property */
}








  /* ========== STATUS & STATES COLORS  ========== */

  /* These may be duplicates of styles in the listing page. Remove, if so. */

    #body span.active,
    #body span.published,
    #body span.draft,
    #body span.archive,
    #body span.success,
    #body span.failed,
    #body span.pushing,
    #body span.queued,
    #body span.unpublished


    {

        display: block !important;
        border-radius: .5rem !important;
        padding: .25rem .5rem !important;
        font-size: .75rem !important;
        font-weight: 600 !important;
        line-height: 1rem !important;
        background: transparent !important;

    }

    #body span.active {
        background: var(--Tags-Background-Green,transparent) !important;
        color: var(--Tags-Type-Green,inherit) !important;
    }

    #body span.published {
        background: var(--Tags-Background-Blue,transparent) !important;
        color: var(--Tags-Type-Blue,inherit) !important;    
    }

    #body span.draft {
        background: var(--Tags-Background-Orange,transparent) !important;
        color: var(--Tags-Type-Orange,inherit) !important;
    }

    #body span.unpublished {
        background: var(--Tags-Background-Orange,transparent) !important;
        color: var(--Tags-Type-Orange,inherit) !important;
    }

    #body span.archive {
        background: var(--Neutral-Alto-300,transparent) !important;
        color: var(--Type-Limed Spruce-100,inherit) !important;
    }

    #body span.success {
        background: var(--Tags-Background-Green,transparent) !important;
        color: var(--Tags-Type-Green,inherit) !important;
    }

    #body span.failed {
        background: var(--Tags-Background-Red,transparent) !important;
        color: var(--Tags-Type-Red,inherit) !important;
    }

    #body span.pushing {
        background: var(--Tags-Background-Blue,transparent) !important;
        color: var(--Tags-Type-Blue,inherit) !important;
    }

    #body span.queued {
        background: var(--Tags-Background-Orange,transparent) !important;
        color: var(--Tags-Type-Orange,inherit) !important;
    }








    /* ===== User Bubbles ===== */

    #body .user-bubble-1,
    #body .user-bubble-2,
    #body .user-bubble-3
    {

        position: relative;
        border-radius: 50% !important;
        display: inline-block;
        text-align: center !important;
        width: 1.5rem !important;
        height: 1.5rem !important;
        margin: auto 0 !important;

    }

    #body .user-bubble-1 > span,
    #body .user-bubble-2 > span,
    #body .user-bubble-3 > span
    {
        text-align: center;
        display: inline-block;
        padding: 0;
        margin: auto;
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 1rem;
        color: rgba(83, 83, 83, 0.80);

    }

    #body div.user-bubble-1 {
        background: linear-gradient(143deg, var(--Primary-Picton-Blue-300) 8.22%, var(--Primary-Denim-300) 89.8%);
    }
    #body div.user-bubble-2 {
        background: linear-gradient(143deg, var(--Primary-Denim-300) 8.22%, var(--Secondary-Amethyst-300) 89.8%);
    }
    #body div.user-bubble-3 {
        background: linear-gradient(143deg, var(--Secondary-Amethyst-300) 8.22%, var(--Primary-Picton-Blue-300) 89.8%);
    }

    #body .user-name
    {
        text-align: left;
        display: inline-block;
        padding: 0rem 0rem 0rem 0rem;
        margin: auto 0 auto 0.5rem;
        font-size: 0.875rem;
        font-weight: 400;
        line-height: 1rem;
        color: var(--Typography-Limed-Spruce-300, inherit);
        word-wrap: nowrap;
    }









/* ===== Edit Page : Right Content Panels ===== */

#body .card-container {

    /* Controls the edit panel min widths needed to hold content and control flexbox stacking. */
    --card-container-width: 27rem;

    /* Controls the width of cards until they stack. Also, keeps them uniform in width when stacked. */

    -webkit-box-flex: 1 1 var(--card-container-width);
    -moz-box-flex: 1 1 var(--card-container-width);
    -webkit-flexbox: 1 1 var(--card-container-width);
    -webkit-flex: 1 1 var(--card-container-width);
    -ms-flex: 1 1 var(--card-container-width);
    flex: 1 1 var(--card-container-width);

    position: relative;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    flex-direction: column;
    gap: 0 0;
    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
    align-content: normal;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;

    width: auto;
    height: auto;
    min-width: var(--card-container-width);
    max-width: none;
    min-height: auto;
    max-height: none;
    padding: 1rem 1rem 1rem 1rem;
    margin: 0rem 0rem 0rem 0rem;
    background: var(--Neutral-Nero-000, transparent);
    border-radius: .5rem;
    text-align: left;
    overflow: visible;/* for now, lets allow dropdowns inside to overflow this parent container */
    /*z-index: 1;*//* NEVER USE Z-index when you have multiple child calendars or dropdowns overflowing sibing parents. */

    /*border: 3px solid black;*/
}

#body .card-container > * {

    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: auto 0;
}


#body .card-container.card-spacer {
  height: 0;
  min-height: 0;
  max-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  overflow: hidden;
  visibility: hidden;
}

/* Special : When all four panels display on very wide browser views, we need to hide the last dummy spacer panels that push the last panel into one column when a slightly smaller width shows only three panel. This value is a rough estimate of the left men plus three panels plus margins. So the value below is a rough estimate. Because browsers do not support "calc()" inside container queries below, we cant calculate this. */

@container (min-width: 138rem) {
  html #body .card-container.card-spacer {
      display: none;
  }
}

#body .card-container .card-header-caret {
  cursor: pointer !important;
}

#body .card-container.collapsed .card-header-caret {
  transform: rotate(180deg) !important;
}

#body .card-container.collapsed .card-content {
  display: none;
}

#body .card-header {

    position: relative;
    width: auto;
    height: auto;
    min-width: 100%;
    max-width: none;
    min-height: auto;
    max-height: none;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 .25rem;
    -webkit-box-pack: stretch;
    -ms-flex-pack: stretch;
    justify-content: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding: 0rem 0rem 0rem 1rem;
    margin: 0rem 0rem 1rem 0rem;/* card headers now control their bottom spacing from content */
    text-align: left;
    background: transparent;
    overflow: hidden;/* if we add info icons with dropdown, change this to visible */
    border-radius: 0;
    border: 0;
}

#body .card-content {

    -webkit-box-flex: 1 0 auto;
    -moz-box-flex: 1 0 auto;
    -webkit-flexbox: 1 0 auto;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;

    position: relative;
    width: auto;
    height: auto;
    min-width: 100%;
    max-width: none;
    min-height: auto;
    max-height: none;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 .25rem;
    -webkit-box-pack: stretch;
    -ms-flex-pack: stretch;
    justify-content: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding: 0rem 0rem 0rem 0rem;
    margin: 0rem 0rem 0rem 0rem;
    text-align: left;
    background: transparent;
    overflow: visible;/* for now, lets allow dropdowns inside to overflow this parent container */
    border-radius: 0;
    border: 0;
}

#body .card-footer {

    position: relative;
    width: auto;
    height: auto;
    min-width: 100%;
    max-width: none;
    min-height: auto;
    max-height: none;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 .25rem;
    -webkit-box-pack: stretch;
    -ms-flex-pack: stretch;
    justify-content: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding: 0rem 0rem 0rem 0rem;
    margin: 0rem 0rem 0rem 0rem;
    text-align: left;
    background: transparent;
    overflow: hidden;
    border-radius: 0;
    border: 0;
}

#body .card-header > *,
#body .card-footer > *
{
     /* Flex 0 0 1 and min-width: 0 allows the internal button and dropdown text to shrink with long text */
    -webkit-box-flex: 0 1 auto;
    -moz-box-flex: 0 1 auto;
    -webkit-flexbox: 0 1 auto;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    margin: 0;
    min-width: 0;
}

#body .card-content > *
{
    -webkit-box-flex: 0 1 auto;
    -moz-box-flex: 0 1 auto;
    -webkit-flexbox: 0 1 auto;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;

    position: relative;
    width: auto;
    height: auto;
    min-width: 100%;
    max-width: none;
    min-height: auto;
    max-height: none;
    padding: 0;
    margin: 0;
    text-align: left;
    background: transparent;
    overflow: visible;/* for now, lets allow dropdowns inside to overflow this parent container */
    border-radius: 0;
    border: 0;
}

#body .card-header-title {
    display: inline-block;
    font-size: 0.875rem !important;
    line-height: normal !important;
    font-weight: 400 !important;
    color: var(--Type-Limed-Spruce-100, inherit) !important;
    margin: auto 0;
}


#body .card-header-badge {
    display: inline-block;
    width: auto;
    height: auto;
    min-width: 1rem;
    max-height: 1rem;
    padding: 0 0.5rem !important;
    margin: auto 0.25rem !important;
    background: var(--Tags-Background-Blue, transparent) !important;

    font-size: 0.625rem !important;
    line-height: 1rem !important;
    font-weight: 700 !important;
    color: var(--Tags-Type-Blue, inherit) !important;

    /*text-transform: uppercase !important;*/
    border-radius: 0.25rem !important;
    border: 0 !important;
    text-align: center !important;
}

#body .card-content-item
{
    position: relative;
    display: block;
    padding: 0;
    margin: 0rem 0rem 0.5rem 0rem;

    border-bottom: 1px solid var(--Neutral-Alto-300);
}

#body .card-content .card-content-item .card-content-caret {
    cursor: pointer !important;
    transform: rotate(0deg);
    transition: transform 300ms ease !important;
}

#body .card-content .card-content-item.collapsed .card-content-caret {
    cursor: pointer !important;
    transform: rotate(180deg);
    transition: transform 300ms ease !important;
}

#body .card-content-item-header {
    position: relative;
    width: auto;
    height: auto;
    min-width: 100%;
    max-width: none;
    min-height: auto;
    max-height: none;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 .5rem;
    -webkit-box-pack: stretch;
    -ms-flex-pack: stretch;
    justify-content: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding: 0rem 0rem 0rem 0rem;
    margin: 0rem 0rem 0.5rem 0rem;/* header controls the spacing below it */
    text-align: left;
    background: transparent;
    overflow: hidden;
    border-radius: 0;
    border: 0;

    /*border: 1px solid blue;*/
}

#body .card-content-item-header > * {
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: auto 0;
}

#body .card-content-item-header .card-content-item-header-text {
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex: 1 1 auto;
    -webkit-flexbox: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

    position: relative;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 0.5rem;
    -webkit-box-pack: stretch;
    -ms-flex-pack: stretch;
    justify-content: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;

    margin: auto 0;
    text-align: left;

    font-size: 0.875rem;
    line-height: 1rem;
    font-weight: 600;
    color: var(--Type-Limed-Spruce-Drama, inherit);
}

#body .card-content-item-header .card-content-item-header-text > span {
    white-space: nowrap;
    margin: auto 0;
    text-align: left;
}

#body .card-content-item-header .card-content-item-actions {
    position: relative;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: 1.25rem;
    max-height: none;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 .5rem;
    -webkit-box-pack: stretch;
    -ms-flex-pack: stretch;
    justify-content: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding: 0rem 0rem 0rem 0rem;
    margin: 0rem 0rem 0rem 0rem;
    text-align: left;
    background: transparent;
    overflow: hidden;
    border-radius: 0;
    border: 0;

    /*border: 1px solid green;*/
}

#body .card-content-item-actions > * {
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: auto 0;
}

#body .card-content-item-button {

    position: relative;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 0;
    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
    align-content: normal;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;

    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;

    text-align: center;
    color: inherit;
    background: transparent;
    overflow: hidden;
    padding: 0;
    margin: auto;
    border: 0;
    border-radius: 0;
    white-space: nowrap;
    outline: none;

    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;

    /*border:1px solid green;*/

}

#body .card-content-item-divider {
    width: 1px;
    height: 1.25rem;
    background: var(--Neutral-Alto-300);
    margin: auto 0;
    text-align: center;
}

#body .card-pill-paused {
    display: inline-block;
    background: var(--Neutral-Concrete-200, transparent);
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 600;
    color: var(--Type-Limed-Spruce-100, inherit);
    border-radius: 0.5rem;
    padding: 0.1rem 0.5rem;
    margin: auto 0.5rem;
    text-align: center;
}



#body .card-content-item-content {

    position: relative;
    display: block;
    width: auto;
    height: auto;
    min-width: 100%;
    max-width: none;
    min-height: auto;
    max-height: none;
    text-align: left;
    background: transparent;
    overflow: visible !important;
    padding: 0;
    margin: 0;
    border: 0;

    /*border: 1px solid blue;*/

}

#body .card-content .card-content-item.collapsed .card-content-item-content {
  display: none;
}

#body .card-content-item-group {

    position: relative;
    display: block;
    width: auto;
    height: auto;
    min-width: 100%;
    max-width: none;
    min-height: auto;
    max-height: none;
    text-align: left;
    background: transparent;
    overflow: visible !important;
    padding: 0;
    margin: 0rem 0rem 0.5rem 0rem !important;/* group containers control bottom margins between interior comtrols which are agnostic */
    border: 0;

    /*border: 1px solid blue;*/

}

html #body .card-content-item-group .card-content-item-group {

    margin: 0rem 0rem 0rem 0rem !important;/* if nested groups are created remove the child margins for now */

    /*border: 1px solid blue;*/

}

/* Flexbox-1 type manages multiple child boxes of equal expanding/contracting width in rows that collapse at will based on available width. Use inside cards of content. */

html #body .card-content-flexbox-1 {

    position: relative;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: wrap;
    flex-flow: wrap;
    gap: 0.5rem 0.5rem;
    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
    align-content: normal;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;

    width: auto;
    height: auto;
    min-width: 100%;
    max-width: none;
    min-height: auto;
    max-height: none;
    text-align: left;
    background: transparent;
    overflow: visible !important;
    padding: 0;
    margin: 0;
    border: 0;

    /*border: 1px solid blue !important;*/

}

#body .card-content-flexbox-1 > *:not([type="hidden"])
{
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex: 1 1 auto;
    -webkit-flexbox: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    margin: auto 0;
}

#body .card-content-flexbox-1 > .card-content-flexbox-group-1
{
    display: block;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    text-align: left;
    background: transparent;
    overflow: visible !important;
    padding: 0;
    margin: 0;
    border: 0;

    /*border: 1px solid black !important;*/
}

/* Flexbox-2 type manages multiple child boxes of equal expanding (but not contracting width) in one row that fills container and that will not collapse children to new rows. Note it also has ability to set a child class to expand more than its siblngs. Use inside cards of content. */

#body .card-content-flexbox-2
{
    position: relative;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 0.5rem;
    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
    align-content: normal;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;

    width: auto;
    height: auto;
    min-width: 100%;
    max-width: none;
    min-height: auto;
    max-height: none;
    text-align: left;
    background: transparent;
    overflow: visible !important;
    padding: 0;
    margin: 0;
    border: 0;

    /*border: 1px solid green !important;*/
}

#body .card-content-flexbox-2-child-1
{
    -webkit-box-flex: 1 0 auto;
    -moz-box-flex: 1 0 auto;
    -webkit-flexbox: 1 0 auto;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    margin: 0;/* Note: Must not be auto as in rare cases this flexbox is shared in containers where siblings exand height and box needs to position at top by default. */
}


#body .card-content-flexbox-2-child-2
{
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: 0;/* Note: Must not be auto as in rare cases this flexbox is shared in containers where siblings exand height and box needs to position at top by default. */
}


#body .card-content-daytime-picker
{
    height: 2.25rem;/* match this to the left date picker input height */
}























/* ===== Custom Blue Checkbox with Label ===== */

#body input[type=checkbox].checkbox-type-1,
#body input[type=checkbox].checkbox-type-1:visited,
#body input[type=checkbox].checkbox-type-1:hover,
#body input[type=checkbox].checkbox-type-1:focus,
#body input[type=checkbox].checkbox-type-1:active
{
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;

    position: static !important;/* ALERT: Bootstrap 3 writes over this property with important. Super dumb! */
    display: block;
    width: 1rem;
    height: 1rem;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    text-align: left;
    white-space: nowrap;
    outline: 0;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    accent-color: var(--Primary-Denim-300, inherit);
    cursor: pointer;

}

#body label.label-type-1
{
    -webkit-box-flex: 1 1 auto;
    -moz-box-flex: 1 1 auto;
    -webkit-flexbox: 1 1 auto;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;

    display: block;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    text-align: left;
    white-space: nowrap;
    outline: 0;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1rem;
    letter-spacing: normal;
    color: var(--Type-Limed-Spruce-300, inherit);
    cursor: pointer;

}

#body label.label-type-1 > span
{
    display: block;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    text-align: left;
    white-space: nowrap;
    outline: 0;
    border: 0;
    border-radius: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1rem;
    letter-spacing: normal;
    color: var(--Type-Limed-Spruce-300, inherit);
    cursor: pointer;

    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    -o-transition: color 300ms ease;
    transition: color 300ms ease;

}

#body label.label-type-1:hover span,
#body label.label-type-1:focus span
{
    color: var(--Primary-Denim-300, inherit);

    -webkit-transition: color 300ms ease;
    -moz-transition: color 300ms ease;
    -o-transition: color 300ms ease;
    transition: color 300ms ease;
}

#body label.label-type-1 span.hint-1,
#body label.label-type-1:hover span.hint-1,
#body label.label-type-1:focus span.hint-1
{
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.25rem;
    letter-spacing: normal;
    color: var(--Type-Limed-Spruce-Placeholder, inherit);
    padding: 0;
    margin: 0;
}

#body .info-text-1
{
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: normal;
    letter-spacing: normal;
    color: var(--Primary-Denim-300, inherit);
    padding: 0;
    margin: auto 0;
}

#body .text-muted-1
{
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
    letter-spacing: normal;
    color: var(--Type-Limed-Spruce-Placeholder, inherit);
    padding: 0;
    margin: auto 0;
    text-align: center;
}

#body input[type=checkbox].checkbox-type-1:disabled
{
    accent-color: var(--Neutral-Pale-Sky-500, inherit) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

#body .card-content-flexbox-2:has(input[type=checkbox]:disabled) label.label-type-1 > span
{
    color: var(--Neutral-Pale-Sky-500, inherit) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}






















/* OLD CODE tO DELETE */

#body .ex-topnav-left {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-md);
}

#body .ex-topnav-right {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-md);
}

#body .ex-topnav-title {
  font-size: var(--ex-font-size-lg);
  color: var(--ex-text-heading);
  font-weight: 400;
}

#body .ex-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--ex-text-primary);
  text-decoration: none;
}

#body .ex-back-btn:hover {
  color: var(--ex-primary);
}

/* ============================================
   Buttons
   ============================================ */

#body .ex-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ex-spacing-xs);
  padding: 8px 24px;
  border-radius: var(--ex-radius-pill);
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  line-height: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  border: none;
}

#body .ex-btn-primary {
  background: var(--ex-primary);
  color: var(--ex-white);
}

#body .ex-btn-primary:hover {
  background: #0E5A9A;
  color: var(--ex-white);
}

#body .ex-btn-secondary {
  background: transparent;
  color: var(--ex-text-primary);
  border: 1px solid var(--ex-text-primary);
}

#body .ex-btn-secondary:hover {
  background: var(--ex-bg-page);
  color: var(--ex-text-primary);
}

#body .ex-btn-tertiary {
  background: transparent;
  color: var(--ex-secondary);
  padding: 8px 16px;
  font-size: var(--ex-font-size-sm);
}

#body .ex-btn-tertiary:hover {
  background: rgba(160, 55, 197, 0.05);
  color: var(--ex-secondary);
}

#body .ex-btn-icon {
  width: 18px;
  height: 18px;
}






/* ============================================
   Cards & Sections
   ============================================ */

#body .ex-card {
  background: var(--ex-white);
  border-radius: var(--ex-radius-md);
  padding: var(--ex-spacing-md);
  margin-bottom: var(--ex-spacing-md);
}

#body .ex-section {
  background: var(--ex-white);
  border-radius: var(--ex-radius-md);
  padding: var(--ex-spacing-md);
  padding-bottom: var(--ex-spacing-lg);
  margin-bottom: var(--ex-spacing-md);
  position: relative;
}

#body .ex-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

#body .ex-section-title {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
}

#body .ex-section-title-icon {
  width: 16px;
  height: 16px;
  color: var(--ex-text-primary);
}

#body .ex-section-title-text {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-label);
  font-weight: 400;
}

#body .ex-section-caret {
  width: 20px;
  height: 20px;
  color: var(--ex-text-primary);
  transition: transform 0.2s ease;
}

#body .ex-section.collapsed .ex-section-caret {
  transform: rotate(180deg);
}

#body .ex-section-content {
  margin-top: var(--ex-spacing-md);
  padding-bottom: var(--ex-spacing-xs);
}

#body .ex-section.collapsed .ex-section-content {
  display: none;
}

#body .ex-section-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--ex-spacing-sm);
}
/* Embedded time picker (used inside range picker sections) */
#body .ex-cal-time.ex-cal-time--embedded {
  padding: 0;
  margin-top: 0;
  border-top: none;
}

/* ============================================
   Badges
   ============================================ */

/* When a range calendar is rendered inside a date-field dropdown,
   the dropdown provides the border/shadow; avoid double framing. */

#body .ex-date-field__calendar-container .ex-date-range-picker {
  border: none;
  box-shadow: none;
  padding: 12px;
}
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: var(--ex-radius-sm);
  font-size: var(--ex-font-size-sm);
  font-weight: 600;
  line-height: 16px;
}

/*
#body .ex-badge-count {
  min-width: 16px;
  height: 16px;
  padding: 0 8px;
  background: var(--ex-tag-blue-bg);
  color: var(--ex-tag-blue-text);
  font-size: var(--ex-font-size-xs);
  font-weight: 700;
  border-radius: var(--ex-radius-sm);
}

#body .ex-badge-active {
  background: var(--ex-tag-blue-bg);
  color: var(--ex-tag-blue-text);
}

#body .ex-badge-disabled {
  background: var(--ex-tag-gray-bg);
  color: var(--ex-tag-gray-text);
}

#body .ex-badge-pending {
  background: var(--ex-tag-orange-bg);
  color: var(--ex-tag-orange-text);
}

#body .ex-badge-draft {
  background: var(--ex-tag-orange-bg);
  color: var(--ex-tag-orange-text);
}
*/

/* ============================================
   Form Inputs - Figma Design System Match
   ============================================ */
#body .ex-form-group {
  margin-bottom: var(--ex-spacing-sm);
}

/* Labels per Figma: 14px Regular (#46565F) */
#body .ex-label {
  display: block;
  padding-left: var(--ex-spacing-md);
  margin-bottom: var(--ex-spacing-xs);
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md); /* 14px */
  color: var(--ex-text-label); /* #46565F */
  font-weight: 400;
  line-height: 20px;
}

#body .ex-label-optional {
  color: var(--ex-text-placeholder); /* #8C959E */
}

/* Input fields per Figma: 16px Regular (#2C3943), #E0E0E0 border, 8px radius */
#body .ex-input {
  width: 100%;
  padding: 6px 16px;
  border: 1px solid var(--ex-border); /* #E0E0E0 */
  border-radius: var(--ex-radius-md); /* 8px */
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-lg); /* 16px */
  line-height: 24px;
  color: var(--ex-text-primary); /* #2C3943 */
  background: var(--ex-white);
  transition: border-color 0.2s ease;
}

/* Specific styling for date inputs to match Figma and hide native icons when we provide custom ones */
#body .ex-input[type="date"],
#body .ex-input[type="datetime-local"] {
  position: relative;
}

/* 
   Hide native calendar icon in Chrome/Edge/Safari.
   We make it transparent and stretch it to cover the entire input.
   This hides the icon but keeps the entire field clickable to open the native picker.
*/

#body input[type="date"]::-webkit-calendar-picker-indicator,
#body input[type="datetime-local"]::-webkit-calendar-picker-indicator,
#body .ex-input[type="date"]::-webkit-calendar-picker-indicator,
#body .ex-input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  z-index: 5;
  background: transparent !important;
  color: transparent !important;
  -webkit-appearance: none !important;
}

/* Firefox - Hide native calendar icon */
#body input[type="date"],
#body input[type="datetime-local"] {
  background-image: none !important;
}

/* Hide native clear button and spin buttons */
#body input[type="date"]::-webkit-inner-spin-button,
#body input[type="date"]::-webkit-clear-button,
#body input[type="datetime-local"]::-webkit-inner-spin-button,
#body input[type="datetime-local"]::-webkit-clear-button,
#body .ex-input[type="date"]::-webkit-inner-spin-button,
#body .ex-input[type="date"]::-webkit-clear-button,
#body .ex-input[type="datetime-local"]::-webkit-inner-spin-button,
#body .ex-input[type="datetime-local"]::-webkit-clear-button {
  display: none !important;
  -webkit-appearance: none !important;
}

/* Ensure the custom icon is visible behind the transparent native indicator */
#body .ex-input-icon {
  z-index: 1; /* Below the transparent native indicator hit area */
}

#body .ex-input::placeholder {
  color: var(--ex-text-placeholder);
}

#body .ex-input:focus {
  outline: none;
  border-color: var(--ex-primary);
}

#body .ex-input-hint {
  padding-left: var(--ex-spacing-sm);
  margin-top: var(--ex-spacing-xs);
  font-size: var(--ex-font-size-sm);
  color: var(--ex-text-placeholder);
  line-height: 16px;
}

#body .ex-input-info {
  padding-left: var(--ex-spacing-sm);
  margin-top: var(--ex-spacing-xs);
  font-size: var(--ex-font-size-sm);
  color: var(--ex-primary);
  line-height: 16px;
}

#body .ex-textarea {
  min-height: 128px;
  resize: vertical;
}

#body .ex-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232C3943' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 40px;
}

/* ============================================
   Checkboxes - Figma Design System Match
   ============================================ */

#body .ex-checkbox-group {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
}

/* Custom checkbox styling per Figma: 18px square, 2px border, blue fill when checked */
#body .ex-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid var(--ex-text-primary); /* Figma: #2C3943 */
  border-radius: 2px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  background: var(--ex-white);
  flex-shrink: 0;
  transition: all 0.15s ease;
}

#body .ex-checkbox:checked {
  background: var(--ex-primary); /* Figma: #126CB8 */
  border-color: var(--ex-primary);
}

#body .ex-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#body .ex-checkbox:hover:not(:checked) {
  border-color: var(--ex-primary);
}

#body .ex-checkbox:focus {
  outline: 2px solid var(--ex-primary-light);
  outline-offset: 2px;
}

#body .ex-checkbox-label {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md); /* 14px */
  color: var(--ex-text-primary); /* #2C3943 */
  line-height: 20px;
  cursor: pointer;
}

/* ============================================
   Item Cards (for schedules, qualifications, etc.)
   ============================================ */
#body .ex-item-card {
  background: var(--ex-white);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-md);
  padding: var(--ex-spacing-sm) var(--ex-spacing-md);
  margin-bottom: var(--ex-spacing-sm);
}

#body .ex-item-header {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
  cursor: pointer;
  user-select: none;
}

#body .ex-item-caret {
  width: 16px;
  height: 16px;
  color: rgba(83, 83, 83, 1);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

#body .ex-item-card.collapsed .ex-item-caret {
  transform: rotate(180deg);
}

#body .ex-item-title {
  flex: 1;
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: rgba(83, 83, 83, 0.8);
}

#body .ex-item-actions {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
}

#body .ex-item-actions exigo-icon-button {
  --exigo-icon-button-size: 20px;
  --exigo-icon-button-icon-size: 16px;
}

#body .ex-item-action-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ex-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

#body .ex-item-action-btn:hover {
  color: var(--ex-primary);
}

#body .ex-item-content {
  margin-top: var(--ex-spacing-sm);
}

#body .ex-item-card.collapsed .ex-item-content {
  display: none;
}

#body .ex-item-divider {
  width: 1px;
  height: 19px;
  background: var(--ex-border);
}

/* ============================================
   Sidebar Specific
   ============================================ */

/*#body .ex-sidebar-icons {
*/  display: flex;
  flex-direction: column;
  width: 32px;
  gap: var(--ex-spacing-xs);
}

/*#body .ex-sidebar-icon-btn {
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: var(--ex-radius-md);
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ex-text-primary);
}

#body .ex-sidebar-icon-btn.active {
  background: var(--ex-primary-light);
  color: var(--ex-primary);
}

#body .ex-sidebar-icon-btn:hover:not(.active) {
  background: var(--ex-bg-page);
}*/

/*#body .ex-sidebar-content {
  flex: 1;
  padding-left: var(--ex-spacing-md);
  border-left: 1px solid var(--ex-border);
}*/

#body .ex-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ex-spacing-xs) var(--ex-spacing-sm);
  margin-bottom: var(--ex-spacing-sm);
}

#body .ex-sidebar-title {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
  font-size: var(--ex-font-size-lg);
  color: var(--ex-text-heading);
}

#body .ex-sidebar-section {
  margin-bottom: var(--ex-spacing-md);
}

#body .ex-sidebar-divider {
  height: 1px;
  background: var(--ex-border);
  margin: var(--ex-spacing-md) 0;
}

/* ============================================
   Status Row
   ============================================ */
#body .ex-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ex-spacing-xs) var(--ex-spacing-sm);
}

#body .ex-status-label {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
}

/* ============================================
   Metadata
   ============================================ */
#body .ex-metadata-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ex-spacing-xs) var(--ex-spacing-sm);
}

#body .ex-metadata-label {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
}

#body .ex-metadata-value {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
}

#body .ex-created-by {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
}

#body .ex-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-text-subtle);
  background: linear-gradient(143deg, rgba(159, 56, 197, 1) 8%, rgba(37, 191, 228, 1) 90%);
}

/* ============================================
   Summary Section
   ============================================ */
#body .ex-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#body .ex-summary-title {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
}

#body .ex-summary-text {
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-text-heading);
  line-height: 16px;
  margin-top: var(--ex-spacing-sm);
}

/* ============================================
   Tables (for Index page)
   ============================================ */
#body .ex-table {
  width: 100%;
  background: var(--ex-white);
  border-radius: var(--ex-radius-md);
  overflow: hidden;
}

#body .ex-table thead {
  background: var(--ex-bg-card-header);
}

#body .ex-table th {
  padding: var(--ex-spacing-sm) var(--ex-spacing-md);
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-text-primary);
  text-align: left;
  border-bottom: 1px solid var(--ex-border);
}

#body .ex-table td {
  padding: var(--ex-spacing-sm) var(--ex-spacing-md);
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
  border-bottom: 1px solid var(--ex-border);
}

#body .ex-table tbody tr:hover {
  background: var(--ex-bg-page);
}

#body .ex-table tbody tr:last-child td {
  border-bottom: none;
}

/* ============================================
   Utilities
   ============================================ */
#body .ex-text-muted {
  color: var(--ex-text-placeholder);
}

#body .ex-text-sm {
  font-size: var(--ex-font-size-sm);
}

#body .ex-mt-sm { margin-top: var(--ex-spacing-sm); }
#body .ex-mt-md { margin-top: var(--ex-spacing-md); }
#body .ex-mb-sm { margin-bottom: var(--ex-spacing-sm); }
#body .ex-mb-md { margin-bottom: var(--ex-spacing-md); }
#body .ex-mb-lg { margin-bottom: var(--ex-spacing-lg); }
#body .ex-py-lg { padding-top: var(--ex-spacing-lg); padding-bottom: var(--ex-spacing-lg); }

#body .ex-flex { display: flex; }
#body .ex-flex-col { flex-direction: column; }
#body .ex-items-center { align-items: center; }
#body .ex-justify-between { justify-content: space-between; }
#body .ex-justify-center { justify-content: center; }
#body .ex-gap-sm { gap: var(--ex-spacing-sm); }
#body .ex-gap-md { gap: var(--ex-spacing-md); }

/* ============================================
   Two-Panel Layout
   ============================================ */
#body .ex-two-panel-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--ex-spacing-lg);
}

@media (max-width: 1024px) {
  #body .ex-two-panel-layout {
    grid-template-columns: 1fr;
  }
  
/*  #body .ex-sidebar-panel {
    order: -1;
  }*/
}

#body .ex-main-panel {
  min-width: 0;
}

/*#body .ex-sidebar-panel {
  position: sticky;
  top: var(--ex-spacing-md);
  height: fit-content;
}*/

/* ============================================
   Spinner
   ============================================ */
#body .ex-spinner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 3px solid var(--ex-border-color);
  border-radius: 50%;
  border-top-color: var(--ex-primary);
  animation: ex-spin 1s linear infinite;
}

@keyframes ex-spin {
  to { transform: rotate(360deg); }
}

#body .ex-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}





/* ============================================
   Alerts
   ============================================ */

#body .ex-alert {
  padding: var(--ex-spacing-sm) var(--ex-spacing-md);
  border-radius: var(--ex-radius-sm);
  margin-bottom: var(--ex-spacing-md);
}

#body .ex-alert-danger {
  background: var(--ex-tag-orange-bg);
  color: var(--ex-danger);
  border: 1px solid var(--ex-danger);
}

#body .ex-alert-success {
  background: var(--ex-tag-green-bg);
  color: var(--ex-tag-green-text);
  border: 1px solid var(--ex-tag-green-text);
}

#body .ex-hidden {
  display: none !important;
}

/* ============================================
   Text Utilities
   ============================================ */
#body .ex-text-secondary {
  color: var(--ex-text-secondary);
}

#body .ex-text-sm {
  font-size: var(--ex-font-size-sm);
}

/* ============================================
   Lists
   ============================================ */
#body .ex-list {
  list-style: disc;
  padding-left: var(--ex-spacing-md);
  margin: 0;
}

#body .ex-meta-list {
  margin: 0;
}

#body .ex-meta-list dt {
  font-weight: 600;
  color: var(--ex-text-secondary);
  margin-top: var(--ex-spacing-xs);
}

#body .ex-meta-list dd {
  margin: 0;
  margin-bottom: var(--ex-spacing-xs);
}

/* ============================================
   Info Card
   ============================================ */
#body .ex-card-info {
  background: var(--ex-bg-secondary);
  border: 1px solid var(--ex-border-color);
}

#body .ex-card-info .ex-card-content {
  padding: var(--ex-spacing-md);
}

#body .ex-card-info .ex-card-title {
  font-size: var(--ex-font-size-base);
  font-weight: 600;
  margin: 0 0 var(--ex-spacing-sm) 0;
}

/* ============================================
   Form Row
   ============================================ */
#body .ex-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ex-spacing-md);
}

@media (max-width: 640px) {
  #body .ex-form-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Checkbox
   ============================================ */
#body .ex-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--ex-spacing-xs);
  cursor: pointer;
  min-height: fit-content;
}

#body .ex-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  accent-color: var(--ex-primary);
}

#body .ex-checkbox-label {
  line-height: 1.4;
  flex: 1;
}

/* ============================================
   Textarea
   ============================================ */
#body .ex-textarea {
  min-height: 80px;
  resize: vertical;
}

/* ============================================
   Detail List
   ============================================ */
#body .ex-detail-list {
  margin: 0;
}

#body .ex-detail-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--ex-spacing-md);
  padding: var(--ex-spacing-sm) 0;
  border-bottom: 1px solid var(--ex-border-color);
}

#body .ex-detail-row:last-child {
  border-bottom: none;
}

#body .ex-detail-list dt {
  font-weight: 500;
  color: var(--ex-text-secondary);
  margin: 0;
}

#body .ex-detail-list dd {
  margin: 0;
}

/* ============================================
   Code Styling
   ============================================ */
#body .ex-code {
  font-family: 'Consolas', 'Monaco', monospace;
  background: var(--ex-bg-secondary);
  padding: 2px 6px;
  border-radius: var(--ex-radius-sm);
  font-size: var(--ex-font-size-sm);
}

/* ============================================
   Table Wrapper
   ============================================ */
#body .ex-table-wrapper {
  overflow-x: auto;
}

/* ============================================
   Danger Section
   ============================================ */
#body .ex-section-danger {
  border: 1px solid var(--ex-danger);
}

#body .ex-section-header-danger {
  background: var(--ex-danger);
  color: white;
}

#body .ex-section-header-danger .ex-section-title {
  color: white;
}

/* ============================================
   Color Text Utilities
   ============================================ */

#body .ex-text-success { color: var(--ex-tag-green-text); }
#body .ex-text-warning { color: #D97706; }
#body .ex-text-danger { color: var(--ex-danger); }

/* ============================================
   Button Block
   ============================================ */
#body .ex-btn-block {
  width: 100%;
  justify-content: center;
}

/* ============================================
   Info Badge
   ============================================ */

/*
#body .ex-badge-info {
  background: var(--ex-tag-blue-bg);
  color: var(--ex-tag-blue-text);
}
*/














/*
#body .ex-main-content {

  flex: 1;

  overflow-y: auto;
  overflow-x: hidden;
  padding: 0rem 0.5rem 0rem 0rem;
  margin: 0rem 0rem 0rem 0rem;
  height: calc(100vh - 6rem);

}

#body .ex-sidebar.ex-sidebar-collapsed {
  width: 64px;
  min-width: 64px;
  padding: var(--ex-spacing-sm);
}
*/

/*#body .ex-sidebar.ex-sidebar-collapsed .ex-sidebar-content {
  display: none;
}*/

/*#body .ex-sidebar.ex-sidebar-collapsed .ex-sidebar-icons {
  border-left: none;
  height: 100%;
}*/

/*#body .ex-sidebar.ex-sidebar-collapsed .ex-sidebar-inner {
  justify-content: center;
}*/

#body .ex-sidebar.ex-sidebar-collapsed .ex-sidebar-logo {
  display: none;
}

/* Show expand button only when collapsed */
/*#body .ex-sidebar-icon-btn.ex-sidebar-expand-btn {
  display: none;
}*/

/*#body .ex-sidebar.ex-sidebar-collapsed .ex-sidebar-icon-btn.ex-sidebar-expand-btn {
  display: flex;
}*/

/* Main content flex grow when sidebar is collapsed */

/*
#body .ex-promo-edit-layout.sidebar-collapsed .ex-main-content {
  max-width: 100%;
  flex: 1;
}

#body .ex-sidebar-dock-btn {
  width: 24px;
  height: 24px;
  padding: 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ex-pale-sky);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

#body .ex-sidebar-dock-btn:hover {
  color: var(--ex-primary);
}
*/

/* Sidebar Layout */
#body .ex-sidebar .ex-flex {
  display: flex;
  gap: var(--ex-spacing-md);
}

/*#body .ex-sidebar-icons {
  display: flex;
  flex-direction: column;
  gap: var(--ex-spacing-xs);
  padding-top: var(--ex-spacing-xs);
}*/

/*#body .ex-sidebar-icon-btn {
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: var(--ex-radius-md);
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ex-text-primary);
  transition: all 0.2s ease;
}

#body .ex-sidebar-icon-btn.active {
  background: var(--ex-primary-light);
  color: var(--ex-primary);
}

#body .ex-sidebar-icon-btn:hover:not(.active) {
  background: var(--ex-bg-page);
}*/

/*#body .ex-sidebar-content {
  flex: 1;
  padding-left: var(--ex-spacing-md);
  border-left: 1px solid var(--ex-border);
  display: flex;
  flex-direction: column;
  gap: var(--ex-spacing-sm);
}*/

#body .ex-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ex-spacing-xs) var(--ex-spacing-sm);
}

#body .ex-sidebar-title {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
  font-size: var(--ex-font-size-lg);
  color: var(--ex-text-heading);
}

#body .ex-sidebar-section {
  padding: 0 var(--ex-spacing-sm);
}

#body .ex-sidebar-divider {
  height: 1px;
  background: var(--ex-border);
  margin: var(--ex-spacing-sm) var(--ex-spacing-sm);
}

/* Status Row */
#body .ex-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ex-spacing-xs) var(--ex-spacing-sm);
}

#body .ex-status-label {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
}

/* Metadata Row */
#body .ex-metadata-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ex-spacing-xs) 0;
}

#body .ex-metadata-label {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
}

#body .ex-metadata-value {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
}

/* Created By */
#body .ex-created-by {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
}

#body .ex-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-text-subtle);
  background: linear-gradient(143deg, rgba(159, 56, 197, 1) 8%, rgba(37, 191, 228, 1) 90%);
}

/* Summary */
#body .ex-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#body .ex-summary-title {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
}

#body .ex-summary-text {
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-text-heading);
  line-height: 16px;
  margin-top: var(--ex-spacing-sm);
}

/* Input Hint */
#body .ex-input-hint {
  padding-left: var(--ex-spacing-sm);
  margin-top: var(--ex-spacing-xs);
  font-size: var(--ex-font-size-sm);
  color: var(--ex-text-placeholder);
  line-height: 16px;
}

/* Section Collapsible */
#body .ex-section {
  background: var(--ex-white);
  border-radius: var(--ex-radius-md);
  padding: var(--ex-spacing-md);
  margin-bottom: var(--ex-spacing-md);
}

#body .ex-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}

#body .ex-section-title {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
}

#body .ex-section-title-icon {
  width: 16px;
  height: 16px;
  color: var(--ex-text-primary);
}

#body .ex-section-title-text {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-label);
  font-weight: 400;
}

#body .ex-section-caret {
  width: 20px;
  height: 20px;
  color: var(--ex-text-primary);
  transition: transform 0.2s ease;
}

#body .ex-section.collapsed .ex-section-caret {
  transform: rotate(180deg);
}

#body .ex-section-content {
  margin-top: var(--ex-spacing-md);
  padding-bottom: var(--ex-spacing-xs);
}

#body .ex-section.collapsed .ex-section-content {
  display: none;
}

#body .ex-section-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--ex-spacing-sm);
}

/* Item Card (for schedule, qualification, etc.) */
#body .ex-item-card {
  background: var(--ex-white);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-md);
  padding: var(--ex-spacing-sm) var(--ex-spacing-md);
  margin-bottom: var(--ex-spacing-sm);
}

#body .ex-item-header {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
}

#body .ex-item-title {
  flex: 1;
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-text-subtle);
}

#body .ex-item-actions {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
}

#body .ex-item-action-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ex-text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

#body .ex-item-action-btn:hover {
  color: var(--ex-primary);
}

#body .ex-item-divider {
  width: 1px;
  height: 19px;
  background: var(--ex-border);
}

#body .ex-item-content {
  margin-top: var(--ex-spacing-sm);
}

/* Empty Message in Sections */
#body .ex-empty-message {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-placeholder);
  padding: var(--ex-spacing-sm) 0;
}

/* Select Wrapper for Custom Arrow */
#body .ex-select-wrapper {
  position: relative;
}

#body .ex-select-wrapper .ex-select,
#body .ex-select-wrapper select.ex-input {
  appearance: none;
  padding-right: 40px;
}

/* Never Expires Checkbox */
#body .ex-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--ex-spacing-sm);
  margin-top: var(--ex-spacing-sm);
}

#body .ex-checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  accent-color: var(--ex-primary);
}

#body .ex-checkbox-label-text {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
  line-height: 20px;
}

#body .ex-checkbox-hint {
  font-size: var(--ex-font-size-sm);
  color: var(--ex-text-placeholder);
  padding-left: 26px;
  margin-top: 2px;
}

/* ============================================
   Index Page - Promotions List
   ============================================ */

/* Index Page Container for Ultra-wide Support */
#body .ex-index-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Page-level modifier to make pages full-bleed (edge-to-edge) while keeping visual spacing */
#body .ex-index-container.page-full-bleed,
#body .page-full-bleed .ex-index-container {
  max-width: none;
  margin: 0;
  padding-left: var(--ex-spacing-md);
  padding-right: var(--ex-spacing-md);
  /* Make the container visually white and fill the viewport so it matches other template pages */
  background: var(--ex-white);
  min-height: 100vh;
}

/* Ensure promos index has breathing room below rows even if page-full-bleed isn't present */
#body .ex-index-container .ex-promo-card,
#body .page-full-bleed .ex-promo-card {
  width: 100%;
  border-radius: var(--ex-radius-md);
  box-shadow: var(--ex-shadow-md);
  /* Match Figma canvas vertical size and padding: fix height to Figma's container and apply top/bottom padding */
  min-height: 756px; /* Figma container h-[756px] */
  padding-top: var(--ex-spacing-md);
  padding-bottom: var(--ex-spacing-lg);

}

/* When used inside a full-width layout, add padding so the page matches Figma spacing */
#body .container-fluid .ex-index-container,
#body .container-fluid main .ex-index-container {
  padding-left: 16px;
  padding-right: 16px;
  max-width: 1200px;
  margin: 0 auto;
}








/* Header Bar with Search */

/*
#body .ex-promo-header {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
  margin-bottom: var(--ex-spacing-md);
}

#body .ex-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 6px;
  background: var(--ex-bg-page);
  border-radius: var(--ex-radius-md);
  color: var(--ex-text-primary);
  text-decoration: none;
  transition: background 0.2s ease;
}

#body .ex-icon-btn:hover {
  background: var(--ex-border);
  color: var(--ex-text-primary);
}

#body .ex-search-container {
  flex: 1;
}

#body .ex-search-field {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-xs);
  height: 32px;
  padding: 0 var(--ex-spacing-sm);
  background: var(--ex-bg-page);
  border-radius: var(--ex-radius-md);
}

#body .ex-search-field:has(.ex-search-input:placeholder-shown) {
  justify-content: center;
}

#body .ex-search-field:has(.ex-search-input:placeholder-shown) .ex-search-input {
  flex: 0 0 auto;
  width: auto;
  padding-left: 8px;
  padding-right: 8px;
}

#body .ex-search-field.placeholder-empty {
  justify-content: center;
}
#body .ex-search-field.placeholder-empty .ex-search-input {
  flex: 0 0 auto;
  width: auto;
  padding-left: 8px;
  padding-right: 8px;
}

#body .ex-search-icon {
  flex-shrink: 0;
} 

#body .ex-search-input {
  flex: 1;
  display: flex;
  align-items: center;
  height: 32px;
  line-height: 32px;
  padding-top: 0;
  padding-bottom: 0;
  border: none;
  background: transparent;
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
  outline: none;
  text-align: left;
}

#body .ex-search-input:placeholder-shown {
  text-align: center;
}

#body .ex-search-input::placeholder {
  color: var(--ex-text-placeholder);
}

#body .ex-promo-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ex-spacing-md);
  flex-wrap: wrap;
  gap: var(--ex-spacing-md);
}

#body .ex-page-title {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-xl);
  font-weight: 300;
  color: var(--ex-text-heading);
  margin: 0;
  line-height: 32px;
}

#body .ex-filter-bar {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
  opacity: 0.8;
}

#body .ex-filter-btn {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-xs);
  padding: 4px 8px;
  background: var(--ex-bg-card-header);
  border: 1px solid var(--ex-pale-sky);
  border-radius: var(--ex-radius-md);
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-sm);
  font-weight: 600;
  color: var(--ex-text-label);
  cursor: pointer;
  transition: background 0.2s ease;
}

#body .ex-filter-btn:hover {
  background: var(--ex-border);
}

#body .ex-promo-card {
  background: var(--ex-white);
  border-radius: var(--ex-radius-md);
  box-shadow: var(--ex-shadow-md);
  overflow: hidden;
}

#body .ex-promo-card.ex-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ex-spacing-xl) var(--ex-spacing-md);
  text-align: center;
}

#body .ex-empty-title {
  font-size: var(--ex-font-size-lg);
  font-weight: 600;
  color: var(--ex-text-heading);
  margin: var(--ex-spacing-md) 0 var(--ex-spacing-sm) 0;
}

#body .ex-empty-text {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-placeholder);
  margin: 0;
}

#body .ex-promo-table {
  width: 100%;
  border-collapse: collapse;
}

#body .ex-promo-table th {
  padding: var(--ex-spacing-sm) var(--ex-spacing-md);
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-sm);
  font-weight: 600;
  color: var(--ex-text-placeholder);
  text-align: left;
  border-bottom: none;
  white-space: nowrap;
}

#body .ex-promo-table td {
  padding: var(--ex-spacing-sm) var(--ex-spacing-md);
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
  vertical-align: middle;
  height: 52px;
}

#body .ex-promo-table thead {
  position: relative;
}

#body .ex-promo-table thead::after {
  content: "";
  position: absolute;
  left: var(--ex-spacing-md);
  right: var(--ex-spacing-md);
  bottom: 0;
  height: 1px;
  background: rgba(14, 78, 153, 0.06);
  transform-origin: center;
  transform: scaleY(0.5);
  pointer-events: none;
}

#body .ex-promo-table tbody tr.ex-row-alt {
  background: var(--ex-bg-card-header);
}

#body .ex-th-name { width: 30%; }
#body .ex-th-currency { width: 15%; }
#body .ex-th-warehouse { width: 15%; }
#body .ex-th-status { width: 10%; }
#body .ex-th-timing { width: 25%; }
#body .ex-th-action { width: 5%; text-align: right; }

#body .ex-promo-table th.ex-th-name,
#body .ex-promo-table td.ex-td-name {
  padding-left: calc(var(--ex-spacing-md) + 15px);
}

#body .ex-promo-table th.ex-th-action,
#body .ex-promo-table td.ex-td-action {
  padding-right: calc(var(--ex-spacing-md) + 15px);
}

#body .ex-promo-name-link {
  color: var(--ex-text-primary);
  text-decoration: none;
  font-weight: 400;
}

#body .ex-promo-name-link:hover {
  color: var(--ex-primary);
}

#body .ex-currency-link {
  color: var(--ex-primary-dark);
  cursor: pointer;
}

#body .ex-timing-link {
  color: var(--ex-primary-dark);
  cursor: pointer;
}

#body .ex-status-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: var(--ex-radius-md);
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-sm);
  font-weight: 600;
  white-space: nowrap;
}

#body .ex-status-enabled {
  background: var(--ex-tag-green-bg);
  color: var(--ex-tag-green-text);
}

#body .ex-status-disabled {
  background: var(--ex-tag-gray-bg);
  color: var(--ex-tag-gray-text);
}

#body .ex-status-pending {
  background: var(--ex-tag-orange-bg);
  color: var(--ex-tag-orange-text);
}

*/














/* Menu Button */

#body .ex-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
}

#body .ex-menu-btn:hover svg {
  stroke: var(--ex-primary);
}









/* ============================================
   Edit Page - Figma Match Styles
   ============================================ */

/* Sidebar Inner Layout */

/*#body .ex-sidebar-inner {
  display: flex;
  gap: var(--ex-spacing-md);
  height: 100%;
}*/

/* Sidebar Field Styles */


#body .ex-sidebar-field {
  margin-bottom: var(--ex-spacing-md);
}



#body .ex-field-label {
  display: block;
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
  margin-bottom: var(--ex-spacing-xs);
}


#body .ex-field-input {
  width: 100%;
  padding: 8px var(--ex-spacing-md);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-md);
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
  background: var(--ex-white);
  line-height: 24px;
  transition: border-color 0.2s ease;
}

#body .ex-field-input::placeholder {
  color: var(--ex-text-placeholder);
}

#body .ex-field-input:focus {
  outline: none;
  border-color: var(--ex-primary);
}

#body .ex-field-textarea {
  min-height: 100px;
  resize: vertical;
}

#body .ex-field-hint {
  font-size: var(--ex-font-size-sm);
  color: var(--ex-text-placeholder);
  margin-top: var(--ex-spacing-xs);
}

/* Select Wrapper */

#body .ex-select-wrapper {
  position: relative;
}

#body .ex-field-select {
  appearance: none;
  padding-right: 40px;
  cursor: pointer;
}

#body .ex-select-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--ex-text-primary);
}

/* Dock Button */
#body .ex-sidebar-dock-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ex-text-primary);
}

#body .ex-sidebar-dock-btn:hover {
  color: var(--ex-primary);
}

/* Generate Button - Figma: 12px Semibold, Amethyst #A037C5 */

/*
#body .ex-generate-btn {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-sm);
  font-weight: 600;
  color: var(--ex-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 24px;
  line-height: 16px;
}

#body .ex-generate-btn:hover {
  text-decoration: underline;
}
*/

/* Sidebar Logo */

#body .ex-sidebar-logo {
  position: absolute;
  bottom: var(--ex-spacing-md);
  left: var(--ex-spacing-md);
  color: var(--ex-text-heading);
}

/* Count Badge (for sections) - Figma: 10px Bold, #D0E8F2 bg, #126CB8 text */

#body .ex-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 8px;
  background: var(--ex-tag-blue-bg);
  color: var(--ex-tag-blue-text);
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-xs);
  font-weight: 700;
  line-height: 14px;
  text-transform: uppercase;
  border-radius: var(--ex-radius-sm);
}

/* Add Button (for sections) - Figma: 12px Semibold, Amethyst #A037C5 */

#body .ex-add-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ex-spacing-xs);
  padding: 8px 16px;
  background: none;
  border: none;
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-sm);
  font-weight: 600;
  line-height: 16px;
  color: var(--ex-secondary);
  cursor: pointer;
  border-radius: var(--ex-radius-pill);
}

#body .ex-add-btn:hover {
  background: rgba(160, 55, 197, 0.05);
}

#body .ex-add-btn svg,
#body .ex-add-btn img {
  width: 18px;
  height: 18px;
}

/* Section Nested Items */

#body .ex-schedule-item {
  background: var(--ex-bg-page);
  border-radius: var(--ex-radius-md);
  padding: var(--ex-spacing-md);
  margin-bottom: var(--ex-spacing-sm);
}

#body .ex-schedule-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ex-spacing-md);
}

#body .ex-schedule-title {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-label);
}

#body .ex-schedule-actions {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
}

#body .ex-schedule-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ex-text-primary);
}

#body .ex-schedule-action-btn:hover {
  color: var(--ex-primary);
}

/* Never Expires Checkbox */

#body .ex-never-expires {
  display: flex;
  flex-direction: column;
  gap: var(--ex-spacing-xs);
  margin-top: var(--ex-spacing-md);
}

#body .ex-never-expires-row {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
}

#body .ex-never-expires-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--ex-primary);
  cursor: pointer;
}

#body .ex-never-expires-label {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
  cursor: pointer;
}

#body .ex-never-expires-hint {
  font-size: var(--ex-font-size-sm);
  color: var(--ex-text-placeholder); /* Figma: #8C959E */
  margin-left: 26px;
}

/* Qualification/Reward Info Text */

/*
#body .ex-info-text {
  font-size: var(--ex-font-size-sm);
  color: var(--ex-primary);
  margin-top: var(--ex-spacing-sm);
}
*/

/* Exclusive Checkbox */

#body .ex-exclusive-row {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
  margin-top: var(--ex-spacing-md);
}

#body .ex-exclusive-checkbox {
  width: 18px;
  height: 18px;
  border: 1px solid var(--ex-text-primary);
  border-radius: 2px;
  cursor: pointer;
}

#body .ex-exclusive-label {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
  cursor: pointer;
}

/* ============================================
   Modal Z-Index Fix
   Uses design system z-index scale to ensure
   proper stacking with Bootstrap modals
   ============================================ */
/*
.modal {
  z-index: var(--z-modal) !important;
}
*/

/*
.modal-backdrop {
  z-index: var(--z-modal-backdrop) !important;
}
*/

/*
.modal-dialog {
  z-index: calc(var(--z-modal) + 10) !important;
}
*/

/* ============================================
   Form Field with Icon
   ============================================ */
#body .ex-input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

#body .ex-input-with-icon .ex-input,
#body .ex-input-with-icon .ex-field-input {
  padding-right: 44px; /* Increased to accommodate icon + spacing */
}

#body .ex-input-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--ex-text-primary);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  z-index: 1;
}

#body .ex-input-icon img,
#body .ex-input-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Hide native date picker indicator but keep it clickable to trigger picker */
#body .ex-input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 8px;
  padding: 0;
  width: 24px;
  height: 24px;
  cursor: pointer;
  opacity: 0;
}

/* ============================================
   Rewards Read-Only Display
   ============================================ */

#body .ex-reward-card {
  background: var(--ex-white);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-md);
  padding: var(--ex-spacing-md);
  margin-bottom: var(--ex-spacing-sm);
}

#body .ex-reward-header {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
}

#body .ex-reward-title {
  flex: 1;
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: rgba(83, 83, 83, 0.8);
}

#body .ex-reward-content {
  margin-top: var(--ex-spacing-sm);
}

#body .ex-reward-type-label {
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-label);
  margin-bottom: var(--ex-spacing-xs);
}

#body .ex-reward-type-value {
  font-size: var(--ex-font-size-lg);
  color: var(--ex-text-primary);
  padding: 6px var(--ex-spacing-md);
  background: var(--ex-white);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-md);
}

#body .ex-reward-info {
  font-size: var(--ex-font-size-sm);
  color: var(--ex-primary);
  margin-top: var(--ex-spacing-sm);
  padding-left: var(--ex-spacing-sm);
}

/* ============================================
   Codes Summary - Figma Match
   ============================================ */

#body .ex-codes-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ex-spacing-sm) 0;
}

#body .ex-codes-count {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-text-heading);
  line-height: 20px;
}

#body .ex-codes-manage-btn {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-secondary); /* #A037C5 Amethyst */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 20px;
}

#body .ex-codes-manage-btn:hover {
  text-decoration: underline;
}

/* ============================================
   Schedule Date Row - Side by Side Layout
   ============================================ */

/*
#body .ex-date-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ex-spacing-md);

  margin: 0.5rem 0rem 0.5rem 0rem;
}
*/

/* Date + Time side by side within a schedule row */
#body .ex-datetime-group {
  display: flex;
  align-items: flex-end;
  gap: var(--ex-spacing-sm, 8px);
  flex-wrap: wrap;
}

/* ============================================
   Typography Refinements - Figma Match
   ============================================ */

/* Section title text should be 14px with proper weight */

#body .ex-section-title-text {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md); /* 14px */
  font-weight: 400;
  color: var(--ex-text-label); /* #46565F */
  line-height: 20px;
  letter-spacing: 0.02em;
}

/* Field labels should have consistent spacing */

#body .ex-field-label,
#body .ex-label {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md); /* 14px */
  font-weight: 400;
  color: var(--ex-text-label); /* #46565F */
  line-height: 20px;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}

/* Input fields typography */

#body .ex-field-input,
#body .ex-input {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-lg); /* 16px */
  font-weight: 400;
  color: var(--ex-text-primary); /* #2C3943 */
  line-height: 24px;
  letter-spacing: 0.01em;
}

/* Placeholder text */

#body .ex-field-input::placeholder,
#body .ex-input::placeholder {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-lg); /* 16px */
  font-weight: 400;
  color: var(--ex-text-placeholder); /* #8C959E */
}

/* Status label styling */

#body .ex-status-label {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md); /* 14px */
  font-weight: 400;
  color: var(--ex-text-primary);
  line-height: 20px;
}

/* Metadata labels */

#body .ex-metadata-label {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  font-weight: 400;
  color: var(--ex-text-primary);
  line-height: 20px;
}

#body .ex-metadata-value {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  font-weight: 400;
  color: var(--ex-text-primary);
  line-height: 20px;
}

/* Summary text */

#body .ex-summary-text {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md); /* 14px */
  font-weight: 600;
  color: var(--ex-text-heading);
  line-height: 18px;
}

/* ============================================
   Custom Select Component - Figma Design Match
   
   This styles the reusable select component from:
   components/select/select-ui.js
   
   Design Specs from Figma (node 2364:3199):
   - White background (#FFFFFF)
   - Border: 1px solid #E0E0E0
   - Border radius: 8px
   - Dropdown caret icon: 24x24px positioned at right
   - Placeholder color: #8C959E
   - Text color: #2C3943
   - Font size: 16px
   ============================================ */

/* Wrapper */

#body .ex-select-component {
  position: relative;
  width: 100%;
  font-family: var(--ex-font-family);
}

#body .ex-select-component.disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* Trigger Button */

#body .ex-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: var(--ex-white);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease;
  text-align: left;
  min-height: 44px;
}

#body .ex-select-trigger:hover:not(:disabled) {
  border-color: var(--ex-primary);
}

#body .ex-select-trigger:focus {
  outline: 2px solid var(--ex-primary-light);
  outline-offset: 2px;
  border-color: var(--ex-primary);
}

#body .ex-select-trigger:disabled {
  cursor: not-allowed;
  background: var(--ex-bg-page);
}

/* Trigger Text */

#body .ex-select-trigger-text {
  flex: 1;
  font-size: var(--ex-font-size-lg); /* 16px */
  font-weight: 400;
  color: var(--ex-text-primary);
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#body .ex-select-trigger-text.ex-select-placeholder {
  color: var(--ex-text-placeholder); /* #8C959E */
}

/* Trigger Caret Icon */

#body .ex-select-trigger-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-left: 8px;
  color: var(--ex-text-primary);
  transition: transform 0.2s ease;
}

#body .ex-select-component .ex-select-trigger[aria-expanded="true"] .ex-select-trigger-icon {
  transform: rotate(180deg);
}

/* Dropdown */

#body .ex-select-dropdown {
  position: fixed;
  display: none;
  flex-direction: column;
  min-width: 100%;
  max-height: 280px;
  overflow-y: auto;
  background: var(--ex-white);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: var(--z-dropdown); /* Uses design system z-index scale */
}

#body .ex-select-dropdown.open {
  display: flex;
}

/* Options */

#body .ex-select-option {
  padding: 10px 14px;
  font-size: var(--ex-font-size-lg); /* 16px */
  font-weight: 400;
  color: var(--ex-text-primary);
  line-height: 24px;
  cursor: pointer;
  transition: background-color 0.1s ease;
}

#body .ex-select-option:hover:not(.disabled) {
  background: var(--ex-bg-page);
}

#body .ex-select-option.highlighted {
  background: var(--ex-primary-light);
}

#body .ex-select-option.selected {
  background: var(--ex-primary-light);
  color: var(--ex-primary);
  font-weight: 500;
}

#body .ex-select-option.disabled {
  color: var(--ex-text-placeholder);
  cursor: not-allowed;
}

/* ============================================
   Date Field Component - Figma Design Match
   
   This styles the reusable date field component from:
   components/date-field/date-field-ui.js
   
   Design Specs from Figma (node 2118:2244):
   - Input with calendar icon at right (24x24)
   - Placeholder text: mm/dd/yyyy in #8C959E
   - Border: 1px solid #E0E0E0
   - Border radius: 8px
   - Calendar dropdown with proper z-index
   ============================================ */

/* Date Picker Container */

#body .ex-datetime-picker-container {
  position: relative;
  width: 100%;
}

#body .ex-datetime-picker {
  position: relative;
  width: 100%;
}

/* Date Display Button (trigger) */

#body .ex-date-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  background: var(--ex-white);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-md);
  cursor: pointer;
  transition: border-color 0.15s ease;
  text-align: left;
  min-height: 44px;
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-lg);
  color: var(--ex-text-primary);
}

#body .ex-date-display:hover {
  border-color: var(--ex-primary);
}

#body .ex-date-display:focus {
  outline: none;
  border-color: var(--ex-primary);
  box-shadow: 0 0 0 3px rgba(18, 108, 184, 0.1);
}

/* Date Text */

#body .ex-date-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#body .ex-date-text.placeholder {
  color: var(--ex-text-placeholder);
}


/* Calendar Icon */

#body .ex-calendar-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  margin-left: 8px;
}

/* Calendar Dropdown */

#body .ex-calendar-dropdown {
  display: none;
  position: fixed;
  z-index: var(--z-dropdown); /* Uses design system z-index scale */
  background: var(--ex-white);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  min-width: 280px;
  padding: var(--ex-spacing-sm);
}

#body .ex-calendar-dropdown.show {
  display: block;
}

/* Calendar Header */

#body .ex-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ex-spacing-xs) 0;
  margin-bottom: var(--ex-spacing-xs);
}

#body .ex-calendar-title {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-text-heading);
}

#body .ex-calendar-nav {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--ex-radius-sm);
  cursor: pointer;
  color: var(--ex-text-primary);
  transition: background-color 0.15s ease;
}

#body .ex-calendar-nav:hover {
  background: var(--ex-bg-page);
}

/* Calendar Weekdays */

#body .ex-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: var(--ex-spacing-xs);
}

#body .ex-weekday {
  font-family: var(--ex-font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--ex-text-label);
  text-align: center;
  padding: 4px;
}

/* Calendar Days Grid */

#body .ex-calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

#body .ex-calendar-day {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  font-weight: 400;
  color: var(--ex-text-primary);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#body .ex-calendar-day:hover:not(.outside):not(.selected) {
  background: var(--ex-bg-page);
}

#body .ex-calendar-day.outside {
  color: var(--ex-text-placeholder);
  cursor: default;
}

#body .ex-calendar-day.today {
  font-weight: 600;
  color: var(--ex-primary);
}

#body .ex-calendar-day.selected {
  background: var(--ex-primary);
  color: var(--ex-white);
  font-weight: 500;
}

/* Calendar Footer */

#body .ex-calendar-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--ex-spacing-sm);
  border-top: 1px solid var(--ex-border);
  margin-top: var(--ex-spacing-sm);
}

#body .ex-calendar-select-btn {
  padding: 8px 16px;
  background: var(--ex-primary);
  color: var(--ex-white);
  border: none;
  border-radius: var(--ex-radius-sm);
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

#body .ex-calendar-select-btn:hover {
  background: #0E5BA6;
}









/* ============================================
   History Panel
   ============================================ */

/*
#body .ex-history-list {
  display: flex;
  flex-direction: column;
  gap: var(--ex-spacing-md);
  max-height: calc(100vh - 280px);
  overflow-y: auto;
  padding-right: var(--ex-spacing-xs);
}
*/

#body .ex-history-entry {
  display: flex;
  flex-direction: column;
  gap: var(--ex-spacing-xs);
  padding: var(--ex-spacing-sm);
  background: var(--ex-bg-page);
  border-radius: var(--ex-radius-md);
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

#body .ex-history-entry:hover {
  background: var(--ex-bg-card-header);
}

#body .ex-history-entry-current {
  background: rgba(175, 202, 244, 0.5);
}

#body .ex-history-entry-current:hover {
  background: rgba(175, 202, 244, 0.7);
}

#body .ex-history-entry-selected {
  box-shadow: 0 0 0 2px var(--ex-primary);
}

#body .ex-history-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#body .ex-history-version {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-text-heading);
}

#body .ex-history-user {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-sm);
}

#body .ex-history-user-name {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-text-primary);
}

#body .ex-history-meta {
  display: flex;
  flex-direction: column;
  gap: var(--ex-spacing-xs);
}

#body .ex-history-date {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
}

#body .ex-history-reason {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#body .ex-history-reason-label {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-text-primary);
}

#body .ex-history-reason-text {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
  line-height: 1.4;
}

#body .ex-empty-history {
  padding: var(--ex-spacing-lg);
  text-align: center;
}

#body .ex-empty-history p {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-primary);
  margin: 0 0 var(--ex-spacing-xs);
}
/*
#body .ex-loading-spinner {
  padding: var(--ex-spacing-lg);
  text-align: center;
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  color: var(--ex-text-placeholder);
}
*/
/* JSON Preview Panel */

#body .ex-history-json-preview {
  position: fixed;
  top: 80px;
  left: calc(100vw - 616px);
  width: 600px;
  height: calc(100vh - 96px);
  min-width: 320px;
  min-height: 200px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  background: var(--ex-white);
  border-radius: var(--ex-radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  resize: both;
}

#body .ex-json-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ex-spacing-sm) var(--ex-spacing-md);
  background: rgba(175, 202, 244, 0.5);
  cursor: move;
  user-select: none;
}

#body .ex-json-preview-badge {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md);
  font-weight: 600;
  color: var(--ex-text-primary);
}

#body .ex-json-preview-close {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--ex-radius-sm);
  cursor: pointer;
  font-size: 18px;
  color: var(--ex-text-primary);
  transition: background-color 0.15s ease;
}

#body .ex-json-preview-close:hover {
  background: var(--ex-bg-page);
}

#body .ex-json-preview-content {
  flex: 1;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--ex-white);
  min-height: 400px;
  position: relative;
}

/* Monaco Editor Container */

#body .ex-monaco-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 400px;
}

/* Ensure Monaco diff editor fills container */

#body .ex-monaco-container .monaco-diff-editor {
  height: 100% !important;
}

/* Fallback for when Monaco fails to load */

#body .ex-json-preview-fallback {
  margin: 0;
  padding: var(--ex-spacing-md);
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ex-text-primary);
  white-space: pre;
  overflow: auto;
}

/* Preview header actions container */

#body .ex-json-preview-actions {
  display: flex;
  align-items: center;
  gap: var(--ex-spacing-xs);
}

/* Mode toggle button in preview header */

#body .ex-json-preview-mode-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--ex-radius-sm);
  cursor: pointer;
  color: var(--ex-text-primary);
  transition: background-color 0.15s ease;
}

#body .ex-json-preview-mode-btn:hover {
  background: var(--ex-bg-page);
}

/* =============================================================================
   History Panel - Diff/Compare Styles
   ============================================================================= */

/* Toolbar at top of history list */

#body .ex-history-toolbar {
  padding: var(--ex-spacing-sm) 0;
  margin-bottom: var(--ex-spacing-sm);
  border-bottom: 1px solid var(--ex-border);
}

#body .ex-history-toolbar .ex-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ex-spacing-xs);
  font-size: 12px;
}

#body .ex-history-toolbar .ex-btn svg {
  flex-shrink: 0;
}

/* Compare button on each history entry */

#body .ex-history-compare-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-sm);
  cursor: pointer;
  color: var(--ex-text-muted);
  transition: all 0.15s ease;
  opacity: 0;
}

#body .ex-history-entry:hover .ex-history-compare-btn {
  opacity: 1;
}

#body .ex-history-compare-btn:hover {
  background: var(--ex-primary-soft);
  border-color: var(--ex-primary);
  color: var(--ex-primary);
}

/* Compare base indicator */

#body .ex-history-compare-indicator {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  background: var(--ex-primary-soft);
  color: var(--ex-primary);
  border-radius: var(--ex-radius-sm);
}

/* History entry when it's the compare base */

#body .ex-history-entry-compare-base {
  border-color: var(--ex-primary);
  background: var(--ex-primary-soft);
}

#body .ex-history-entry-compare-base::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ex-primary);
  border-radius: var(--ex-radius-sm) 0 0 var(--ex-radius-sm);
}

/* Update entry header to accommodate compare button */

#body .ex-history-entry-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ex-spacing-xs);
}

#body .ex-history-version {
  font-weight: 600;
  font-size: 13px;
  color: var(--ex-text-primary);
}

/* ============================================
   Toast Alert Positioning
   Fixed position alerts that appear at top of viewport.
   Uses z-index scale for proper layering.
   ============================================ */

#body .ex-toast-alert {
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  max-width: 600px;
}

/* Small button variant */

#body .ex-btn-sm {
  padding: 4px 8px;
  font-size: 12px;
}

/* ============================================
   Calendar Component - Figma Design Match
   
   Standalone calendar component that can be used
   independently or with date-field.
   
   Based on Figma design (node 2109:2677):
   - 364px wide calendar grid
   - Month navigation with left/right arrows
   - 32x32px day cells
   - Colors match Figma design tokens
   ============================================ */

#body .ex-cal {
  width: 364px;
  background: var(--ex-white);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-md);
  padding: 12px; /* Figma: 12px padding */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
  font-family: var(--ex-font-family);
}

/* Calendar Header */

#body .ex-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  margin-bottom: var(--ex-spacing-sm);
}

#body .ex-cal-title {
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-lg); /* 16px */
  font-weight: 600;
  color: var(--ex-primary-dark); /* #0E4E99 */
  line-height: 20px;
  text-align: center;
}

#body .ex-cal-nav-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ex-bg-page); /* #F2F2F2 */
  border: none;
  border-radius: var(--ex-radius-md);
  cursor: pointer;
  color: var(--ex-text-primary); /* #2C3943 */
  transition: background-color 0.15s ease;
  padding: 6px;
}

#body .ex-cal-nav-btn:hover {
  background: var(--ex-border); /* #E0E0E0 */
}

#body .ex-cal-nav-btn:focus {
  outline: 2px solid var(--ex-primary-light);
  outline-offset: 2px;
}

#body .ex-cal-nav-placeholder {
  width: 32px;
  height: 32px;
  display: inline-flex;
  visibility: hidden;
}

/* Weekday Headers */

#body .ex-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  margin-bottom: var(--ex-spacing-sm); /* 8px - Figma spec */
}

#body .ex-cal-weekday {
  width: 32px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md); /* 14px */
  font-weight: 600;
  color: #46565F; /* Type/Limed Spruce/100 */
  line-height: 16px;
  text-align: center;
}

/* Calendar Days Grid */

#body .ex-cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  row-gap: var(--ex-spacing-sm);
  padding: var(--ex-spacing-sm) 0;
}

#body .ex-cal-day {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-lg); /* 16px */
  font-weight: 600;
  color: var(--ex-text-primary); /* #2C3943 - current month days */
  background: transparent;
  border: none;
  border-radius: var(--ex-radius-md);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  line-height: 20px;
}

#body .ex-cal-day:hover:not(.outside):not(.selected):not(:disabled) {
  background: var(--ex-bg-page); /* #F2F2F2 */
}

#body .ex-cal-day:focus {
  outline: 2px solid var(--ex-primary-light);
  outline-offset: 2px;
}

/* Outside month days (previous/next month) */

#body .ex-cal-day.outside {
  color: #CBCBCF; /* Neutral/Cool Gray 450 */
  cursor: default;
}

#body .ex-cal-day.outside:disabled {
  cursor: not-allowed;
}

/* Past days (before today) - .outside takes precedence */
#body .ex-cal-day.past:not(.selected):not(.outside) {
  color: var(--ex-pale-sky); /* #6C757D */
}

/* Today */

#body .ex-cal-day.today {
  color: var(--ex-secondary); /* #A037C5 - Amethyst */
  font-weight: 600;
}

/* Selected day */

#body .ex-cal-day.selected {
  background: var(--ex-primary-dark); /* #0E4E99 */
  color: var(--ex-white);
  font-weight: 600;
}

#body .ex-cal-day.selected:hover {
  background: var(--ex-primary); /* #126CB8 */
}

/* Calendar Footer */

#body .ex-cal-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--ex-spacing-sm);
  border-top: 1px solid var(--ex-border);
  margin-top: var(--ex-spacing-sm);
}

#body .ex-cal-select-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  background: var(--ex-primary); /* #126CB8 */
  color: var(--ex-white);
  border: none;
  border-radius: var(--ex-radius-pill); /* 24px */
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md); /* 14px */
  font-weight: 600;
  line-height: 16px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  height: 32px;
}

#body .ex-cal-select-btn:hover {
  background: #0E5A9A;
}

#body .ex-cal-select-btn:focus {
  outline: 2px solid var(--ex-primary-light);
  outline-offset: 2px;
}

/* ============================================
   Date Field Component - Figma Design Match
   
   Input field with calendar dropdown for date selection.
   The calendar dropdown anchors to the input and follows on scroll.
   
   Based on Figma design (node 2357:845):
   - Label above input
   - Input with border, 8px radius
   - Calendar icon on right
   - Dropdown below with calendar
   ============================================ */

#body .ex-date-field {
  position: relative;
  width: 100%;
  font-family: var(--ex-font-family);
}

#body .ex-date-field--disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* Label */

#body .ex-date-field__label {
  display: block;
  padding-left: var(--ex-spacing-md); /* 16px */
  margin-bottom: var(--ex-spacing-xs); /* 4px */
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-md); /* 14px */
  font-weight: 400;
  color: #46565F; /* Type/Limed Spruce/100 */
  line-height: 20px;
}

/* Input Wrapper */

#body .ex-date-field__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

/* Input */

#body .ex-date-field__input {
  width: 100%;
  padding: 6px 44px 6px 16px; /* Room for icon on right */
  background: var(--ex-white);
  border: 1px solid var(--ex-border); /* #E0E0E0 */
  border-radius: var(--ex-radius-md); /* 8px */
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-lg); /* 16px */
  font-weight: 400;
  color: var(--ex-text-primary); /* #2C3943 */
  line-height: 24px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#body .ex-date-field__input::placeholder {
  color: var(--ex-text-placeholder); /* #8C959E */
}

#body .ex-date-field__input:focus {
  outline: none;
  border-color: var(--ex-primary);
  box-shadow: 0 0 0 3px rgba(18, 108, 184, 0.1);
}

#body .ex-date-field__input:disabled {
  background: var(--ex-bg-page);
  cursor: not-allowed;
}

/* Error state */

#body .ex-date-field--error .ex-date-field__input {
  border-color: #DC3545;
}

#body .ex-date-field--error .ex-date-field__input:focus {
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

/* Icon Button */

#body .ex-date-field__icon-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ex-text-primary);
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease, color 0.15s ease;
}

#body .ex-date-field__icon-btn:hover {
  opacity: 1;
  color: var(--ex-primary);
}

#body .ex-date-field__icon-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

#body .ex-date-field__icon-btn svg {
  width: 20px;
  height: 20px;
}

/* Error Message */

#body .ex-date-field__error {
  padding-left: var(--ex-spacing-sm);
  margin-top: var(--ex-spacing-xs);
  font-family: var(--ex-font-family);
  font-size: var(--ex-font-size-sm); /* 12px */
  color: #DC3545;
  line-height: 16px;
}

/* Calendar Anchor (for positioning) */

#body .ex-date-field__calendar-anchor {
  position: relative;
  width: 100%;
  height: 0;
}

/* Calendar Dropdown */

#body .ex-date-field__calendar-dropdown {
  display: none;
  position: fixed;
  z-index: var(--z-popover); /* Ensure calendar floats above nav/filters */
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
  padding: 0;
  overflow: visible;
}

#body .ex-date-field__calendar-dropdown.open {
  display: block;
}

/* Arrow pointer (optional - for visual connection to input) */

#body .ex-date-field__calendar-dropdown::before {
  content: none;
  display: none;
}

/* When dropdown is above the input */

#body .ex-date-field__calendar-dropdown--above::before {
  content: none;
  display: none;
}

/* Calendar Container within dropdown */

#body .ex-date-field__calendar-container {
  padding: 0;
}

/* =========================================================
   Calendar Popover (DateTime/Range) - Figma Time Picker

   The date-field dropdown is a transparent positioner.
   The calendar component renders the visible popover card.
   ========================================================= */

#body .ex-cal-popover {
  background: var(--ex-white);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-md);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Figma: center */
  align-items: center;     /* Figma: center */
  gap: 8px;
  box-sizing: border-box;
}

#body .ex-cal-divider {
  height: 1px;
  width: 100%;
  background: var(--ex-border);
}

#body .ex-cal-popover__calendar {
  display: flex;
  justify-content: center;
}

#body .ex-cal-popover__footer {
  display: flex;
  justify-content: flex-end;
}

#body .ex-cal--embedded {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

#body .ex-cal-dt {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#body .ex-cal-dt-row {
  display: flex;
  align-items: center; /* Changed from flex-start to center for better alignment */
  gap: 8px;
  padding: 8px 0;
  width: 100%;
}

#body .ex-cal-dt-row__label {
  font-family: var(--ex-font-family);
  font-size: 14px; /* Reduced from 16px to fit better */
  font-weight: 600;
  line-height: 20px;
  color: var(--ex-text-primary);
  white-space: nowrap;
  width: 72px; /* Fixed width to ensure consistency */
  min-width: 72px;
  flex-shrink: 0;
}

#body .ex-cal-dt-row__date-pill {
  height: 32px;
  padding: 4px 8px;
  background: #F2F2F2;
  border: none;
  border-radius: var(--ex-radius-md);
  font-family: var(--ex-font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--ex-text-primary);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

#body .ex-cal-dt-row__date-pill.active {
  background: #DEE2E6;
  color: var(--ex-primary-dark);
  font-weight: 600;
}

#body .ex-cal-dt-row__date-pill:focus {
  outline: 2px solid rgba(18, 108, 184, 0.3);
  outline-offset: 2px;
}

#body .ex-cal-time-pill {
  height: 32px;
  padding: 4px 8px;
  background: #F2F2F2;
  border-radius: var(--ex-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
}

#body .ex-cal-time-pill:focus-within {
  background: #DEE2E6;
  box-shadow: 0 0 0 2px rgba(18, 108, 184, 0.2);
}

#body .ex-cal-time-pill__input {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  font-family: var(--ex-font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
  color: var(--ex-text-primary);
  text-align: center;
}

#body .ex-cal-time-pill__input:focus {
  outline: none;
  background: rgba(14, 78, 153, 0.05);
  border-radius: 4px;
}

#body .ex-cal-time-pill__separator {
  font-family: var(--ex-font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--ex-text-primary);
}

/* Focus visible state for date field (keyboard navigation) */

#body .ex-date-field__input:focus-visible {
  outline: 2px solid var(--ex-primary);
  outline-offset: 1px;
}

/* Click outside overlay (for closing dropdown) */

#body .ex-date-field__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: calc(var(--z-popover) - 1);
  background: transparent;
}

/* ============================================
   Date Range Mode - Figma Design Match
   
   Range selection with start/end date highlighting.
   Based on Figma designs (nodes 2109:2483, 2109:2535)
   ============================================ */

/* Range Start Day */

#body .ex-cal-day.range-start {
  background: var(--ex-primary-dark); /* #0E4E99 */
  color: var(--ex-white);
  border-radius: var(--ex-radius-md) 0 0 var(--ex-radius-md);
}

/* Range End Day */

#body .ex-cal-day.range-end {
  background: var(--ex-primary-dark); /* #0E4E99 */
  color: var(--ex-white);
  border-radius: 0 var(--ex-radius-md) var(--ex-radius-md) 0;
}

/* Days In Range */

#body .ex-cal-day.in-range {
  background: rgba(14, 78, 153, 0.1); /* #0E4E99 at 10% */
  border-radius: 0;
}

/* Range Start + End Same Day */

#body .ex-cal-day.range-start.range-end {
  border-radius: var(--ex-radius-md);
}

/* ============================================
   Time Picker Component - Figma Design Match
   
   Based on Figma design (node 2109:2677):
   - Time display pills: 32px height
   - HH:MM input format with ":" separator
   - AM/PM toggle: 102px wide segmented control
   - Colors: #F2F2F2 bg, #DEE2E6 selected, #2C3943 text
   ============================================ */

/* Time Picker Container */

#body .ex-cal-time {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px 0;
  margin-top: 8px;
  border-top: 1px solid var(--ex-border); /* #E0E0E0 */
}

/* Time Label */

#body .ex-cal-time__label {
  font-family: var(--ex-font-family);
  font-size: 14px;
  font-weight: 400;
  color: #46565F; /* Type/Limed Spruce/100 */
  line-height: 16px;
  min-width: 36px;
}

/* Time Input Group (HH:MM) */

#body .ex-cal-time__input-group {
  display: flex;
  align-items: center;
  gap: 0;
}

/* Time Input Pill */

#body .ex-cal-time__input {
  width: 48px;
  height: 32px;
  padding: 4px 8px;
  background: #F2F2F2; /* Fill/Concrete/200 */
  border: none;
  border-radius: var(--ex-radius-md); /* 8px */
  font-family: var(--ex-font-family);
  font-size: 16px;
  font-weight: 600;
  color: var(--ex-text-primary); /* #2C3943 */
  text-align: center;
  line-height: 24px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

#body .ex-cal-time__input:focus {
  outline: none;
  background: #DEE2E6; /* Neutral/Geyser/400 */
  box-shadow: 0 0 0 2px rgba(18, 108, 184, 0.2);
}

#body .ex-cal-time__input::placeholder {
  color: #CBCBCF; /* Neutral/Cool Gray 450 */
}

/* Time Separator (colon) */

#body .ex-cal-time__separator {
  font-family: var(--ex-font-family);
  font-size: 16px;
  font-weight: 600;
  color: var(--ex-text-primary); /* #2C3943 */
  padding: 0 4px;
}

/* AM/PM Toggle Container */

#body .ex-cal-time__ampm {
  display: flex;
  align-items: center;
  width: 102px;
  min-width: 102px;
  height: 32px;
  padding: 2px;
  background: #F2F2F2; /* Fill/Concrete/200 */
  border-radius: var(--ex-radius-md); /* 8px */
  margin-left: 0;
  overflow: hidden;
  flex-shrink: 0;
}

/* AM/PM Option Button */

#body .ex-cal-time__ampm-option {
  flex: 1;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-family: var(--ex-font-family);
  font-size: 14px;
  font-weight: 600;
  line-height: 16px; /* Figma spec */
  color: var(--ex-text-primary); /* #2C3943 */
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

#body .ex-cal-time__ampm-option:hover:not(.active) {
  background: rgba(0, 0, 0, 0.05);
}

#body .ex-cal-time__ampm-option.active {
  background: var(--ex-white);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  border: 0.5px solid rgba(0, 0, 0, 0.04);
  color: var(--ex-primary-dark);
}

#body .ex-cal-time__ampm-option:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(18, 108, 184, 0.3);
}

/* ============================================
   Date Range Picker Layout - Figma Design Match
   
   Dual calendar layout for date range selection.
   Based on Figma design (node 2109:2535)
   ============================================ */

/* Date Range Picker Container */

#body .ex-date-range-picker {
  display: flex;
  flex-direction: column;
  background: var(--ex-white);
  border: 1px solid var(--ex-border);
  border-radius: var(--ex-radius-md);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
  padding: 12px;
}

/* Date Range Header (displays selected range) */

#body .ex-date-range-picker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ex-border);
  margin-bottom: 12px;
}

/* Date Display Pill */

#body .ex-date-range-picker__date-pill {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#body .ex-date-range-picker__date-label {
  font-family: var(--ex-font-family);
  font-size: 12px;
  font-weight: 400;
  color: #46565F; /* Type/Limed Spruce/100 */
  line-height: 14px;
}

#body .ex-date-range-picker__date-value {
  display: flex;
  align-items: center;
  padding: 4px 12px;
  background: #F2F2F2; /* Fill/Concrete/200 */
  border-radius: var(--ex-radius-md);
  font-family: var(--ex-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--ex-text-primary); /* #2C3943 */
  height: 32px;
}

#body .ex-date-range-picker__date-value.active {
  background: #DEE2E6; /* Neutral/Geyser/400 */
  box-shadow: inset 0 0 0 2px var(--ex-primary);
}

/* Arrow between dates */

#body .ex-date-range-picker__arrow {
  font-size: 18px;
  color: #6C757D; /* Pale Sky */
}

/* Dual Calendar Container */

#body .ex-date-range-picker__calendars {
  display: flex;
  gap: 16px;
}

#body .ex-date-range-picker__calendars .ex-cal {
  box-shadow: none;
  border: none;
  padding: 0;
}

/* Time Section for Range */

#body .ex-date-range-picker__times {
  display: flex;
  gap: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--ex-border);
  margin-top: 12px;
}

#body .ex-date-range-picker__time-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#body .ex-date-range-picker__time-label {
  font-family: var(--ex-font-family);
  font-size: 12px;
  font-weight: 400;
  color: #46565F;
  line-height: 14px;
}

/* Range Picker Footer */

#body .ex-date-range-picker__footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ex-border);
  margin-top: 12px;
}

#body .ex-date-range-picker__btn {
  padding: 8px 24px;
  border-radius: var(--ex-radius-pill); /* 24px */
  font-family: var(--ex-font-family);
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  cursor: pointer;
  height: 32px;
  transition: background-color 0.15s ease;
}

#body .ex-date-range-picker__btn--secondary {
  background: transparent;
  border: 1px solid var(--ex-border);
  color: var(--ex-text-primary);
}

#body .ex-date-range-picker__btn--secondary:hover {
  background: #F2F2F2;
}

#body .ex-date-range-picker__btn--primary {
  background: var(--ex-primary); /* #126CB8 */
  border: none;
  color: var(--ex-white);
}

#body .ex-date-range-picker__btn--primary:hover {
  background: #0E5A9A;
}

/* ============================================
   Date-Time Field Mode - Figma Design Match
   
   Date field with integrated time picker.
   Based on Figma design (node 2109:2650)
   ============================================ */

/* DateTime mode adds time below calendar */

#body .ex-date-field--datetime .ex-date-field__calendar-dropdown {
  min-width: 388px;
}

/* Date Range Field Mode */

#body .ex-date-field--daterange .ex-date-field__calendar-dropdown,
#body .ex-date-field--datetimerange .ex-date-field__calendar-dropdown {
  min-width: 780px;
}

/* Responsive adjustments for smaller screens */

@media (max-width: 480px) {
  #body .ex-date-field__calendar-dropdown {
    min-width: 320px;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
  }

  #body .ex-cal-popover {
    width: 100%;
  }
  
  #body .ex-cal {
    width: 100%;
    min-width: 280px;
  }
  
  #body .ex-cal-day,
  #body .ex-cal-weekday {
    width: 100%;
    min-width: 28px;
  }
  
  /* Stack calendars vertically on mobile for range picker */

  #body .ex-date-range-picker__calendars {
    flex-direction: column;
    gap: 24px;
  }
  
  #body .ex-date-range-picker__times {
    flex-direction: column;
    gap: 16px;
  }
  
  #body .ex-date-field--daterange .ex-date-field__calendar-dropdown,
  #body .ex-date-field--datetimerange .ex-date-field__calendar-dropdown {
    min-width: 320px;
  }
}






/* ===== Promotion History ===== */

#body .history-list {

}

#body .history-loading,
#body .history-error
{
    position: relative;
    display: block;
    padding: 0.5rem;
    margin: auto 0;
    border-radius: 0.5rem;
    min-height: 6rem;
    white-space: nowrap;
}

#body div.history-loading
{
    display: flex;
    align-items: center;/* centers span text */
    height: 6rem;
    min-height: 6rem;
    max-height: 6rem;
    background: var(--Neutral-Athens-Gray-100, transparent);
}

#body div.history-error
{
    display: flex;
    align-items: center;/* centers span text */
    background: var(--Neutral-Athens-Gray-100, transparent);
}

#body .history-loading > *,
#body .history-error > *
{
    display: block;
    text-align: center;
    margin: auto;
}

#body .history-text-normal {
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.25rem;
    color: var(--Type-Limed-Spruce-300, inherit);
    white-space: wrap;
}

#body .history-text-muted {
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.25rem;
    color: var(--Type-Limed-Spruce-Placeholder, inherit);
    white-space: wrap;
}

#body .history-text-danger {
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25rem;
    color: var(--Core-Urgent, inherit);
    white-space: wrap;
}

#body .history-toolbar
{
    position: relative;
    display: block;
    padding: 0;
    margin: 0.75rem auto 0.75rem auto;
    text-align: center;
    white-space: nowrap;
}

#body .button-compare
{
    position: relative;
    display: block;
    width: 1rem;
    height: 1rem;
    text-align: center;
    background: transparent;
    overflow: hidden;
    padding: 0;
    margin: auto;
    border: 0;
    border-radius: none;
    outline: none;
}

#body .history-compare-indicator
{
    font-size: .75rem;
    font-weight: 600;
    line-height: .75rem;
    color: var(--Primary-Denim-300, inherit);
    text-transform: uppercase;
}



/* Promotion History Panels */

#body .history-entry
{
    position: relative;
    list-style: none;

    -webkit-box-flex: 1 0 auto;
    -moz-box-flex: 1 0 auto;
    -webkit-flexbox: 1 0 auto;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;

    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    flex-direction: column;
    gap: 0.5rem 0rem;/* gap between lines in blue history panels */
    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
    align-content: normal;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: 6rem;
    max-height: none;
    overflow: hidden;
    padding: 0.5rem;
    margin: 0rem 0rem 0.75rem 0rem;
    background: transparent;
    border-radius: 0.5rem;
    text-align: left;
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    background: var(--Neutral-Concrete-200, transparent);
    filter: none;

    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

#body .history-entry:hover {
    background: var(--Neutral-Concrete-200, transparent);
    filter: brightness(96%);

    -webkit-transition: filter 300ms ease;
    -moz-transition: filter 300ms ease;
    -o-transition: filter 300ms ease;
    transition: filter 300ms ease;
}

#body div.history-entry-current
{
    background: var(--Primary-Denim-50, transparent);
    filter: none;

    -webkit-transition: filter 300ms ease;
    -moz-transition: filter 300ms ease;
    -o-transition: filter 300ms ease;
    transition: filter 300ms ease;
}

#body div.history-entry-current:hover
{
    background: var(--Primary-Denim-50, transparent);
    filter: brightness(96%);

    -webkit-transition: filter 300ms ease;
    -moz-transition: filter 300ms ease;
    -o-transition: filter 300ms ease;
    transition: filter 300ms ease;
}

#body div.history-entry-selected
{
    border: 1px solid var(--Primary-Denim-300);

    -webkit-transition: border 300ms ease;
    -moz-transition: border 300ms ease;
    -o-transition: border 300ms ease;
    transition: border 300ms ease;
}

#body .history-entry > *,
#body .history-gray > *
{
    position: relative;
    display: block;
    -webkit-box-flex: 1 0 auto;
    -moz-box-flex: 1 0 auto;
    -webkit-flexbox: 1 0 auto;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;

    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 0.5rem;
    -webkit-box-pack: normal;
    -ms-flex-pack: normal;
    justify-content: normal;
    align-content: normal;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;

    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    overflow: hidden;
    padding: 0;
    margin: auto 0;
    background: transparent;
    border-radius: 0;
    text-align: left;
    border: 0;
    white-space: nowrap;
}

#body .history-entry > * > *,
#body .history-gray > * > *
{
    position: relative;
    display: block;
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;

    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    overflow: hidden;
    padding: 0;
    margin: auto 0;
    background: transparent;
    border-radius: 0;
    text-align: left;
    border: 0;
    white-space: nowrap;
}

#body .history-version-text
{
    font-size: .875rem;
    font-weight: 600;
    line-height: .875rem;
    color: var(--Type-Limed-Spruce-500, inherit);
    white-space: wrap;
}
#body .history-date-text
{
    font-size: .875rem;
    font-weight: 400;
    line-height: .875rem;
    color: var(--Type-Limed-Spruce-300, inherit);
    white-space: wrap;
}
#body .history-reason-text
{
    font-size: .875rem;
    font-weight: 600;
    line-height: .875rem;
    color: var(--Type-Limed-Spruce-300, inherit);
    white-space: wrap;
}

#body .history-entry .user-name
{
    margin-left: 0.125rem !important;
}

#body .history-entry-actions
{
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

#body .history-entry-actions exigo-icon-button
{
  --exigo-icon-button-size: 1.5rem;
  --exigo-icon-button-icon-size: 1rem;
}









/* ===== Formfield Styles ===== */

/* Duplicates of what is in the web components since some controls do not yet use Controls.js */



/* Titlebar */

#body .formfield-title
{
    position: relative;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 .25rem;
    -webkit-box-pack: stretch;
    -ms-flex-pack: stretch;
    justify-content: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding: 0rem 0rem 0rem 1rem;
    margin: 0 0 0.25rem 0;
    text-align: left;
    background: transparent;
    overflow: visible;
    border-radius: 0;
    border: 0;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 400;
}

#body .formfield-title > *
{
    display: block;
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    text-align: center;
    white-space: nowrap;
    outline: 0;
    border: 0;
    border-radius: 0;
    margin: auto 0;
    padding: 0;
}

#body .formfield-title *
{
    color: var(--Type-Limed-Spruce-100, inherit);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.25rem;
    letter-spacing: normal;
}

#body .formfield-title button.help-icon
{
    display: block;
    padding: 0;
    margin: auto 0;
    overflow: hidden;
    border: 0;
    outline: 0;
    border-radius: 0;
    background: none;
}

#body .formfield-title button.help-icon img
{
    margin: auto 0 !important;
}

#body .formfield-title .help-box
{
    display: none;
    flex: none;
    position: absolute;
    top: 1.25rem;
    background: var(--Neutral-Nero-000, inherit);
    width: auto;
    height: auto;
    min-width: 10rem;
    max-width: 10rem;
    min-height: 2.5rem;
    max-height: none;
    border-radius: .5rem;
    border: 1px solid var(--Neutral-Concrete-200, inherit);
    white-space: wrap;
    z-index: 501;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1rem;
    text-align: left;
    color: var(--Type-Limed-Spruce-100, inherit);
    padding: .5rem 1rem;
            margin: 0rem 2rem 0rem 10%;/* tries to position box closer to the help icons unknown position based on title */

    -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, .16);
    -moz-box-shadow: 0 4px 8px rgba(0,0,0,.16);
    box-shadow: 0 4px 8px rgba(0, 0, 0, .16);
}

#body .formfield-title .help-box span
 {
    font-size: .75rem;
    font-weight: 400;
    line-height: 1rem;
    color: var(--Type-Limed-Spruce-100, inherit);
    text-align: left;
    white-space: wrap;
    padding: 0;
    margin: 0;
}





/* Error Subtitle for Form Controls */

#body .formfield-subtitle
{
    position: relative;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: 1rem;
    max-height: none;
    display: block;
    display: box;
    display: flexbox;
    display: -webkit-flexbox;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: nowrap;
    flex-flow: nowrap;
    gap: 0 .25rem;
    -webkit-box-pack: stretch;
    -ms-flex-pack: stretch;
    justify-content: stretch;
    align-content: stretch;
    -webkit-box-align: stretch;
    -webkit-flex-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    padding: 0rem 0rem 0rem 0.5rem;
    margin: 0.25rem 0 0 0;
    text-align: left;
    background: transparent;
    overflow: visible;
    border-radius: 0;
    border: 0;

    /* border: 1px solid green; */
}

#body .formfield-subtitle > *
{
    display: block;
    -webkit-box-flex: 0 0 auto;
    -moz-box-flex: 0 0 auto;
    -webkit-flexbox: 0 0 auto;
    -webkit-flex: 0 0 auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    min-width: auto;
    max-width: none;
    min-height: auto;
    max-height: none;
    text-align: left;
    white-space: nowrap;
    outline: 0;
    border: 0;
    border-radius: 0;
    margin: auto 0;
    padding: 0;
    color: var(--Type-Limed-Spruce-Placeholder, inherit);
    font-size: .75rem;
    font-weight: 400;
    line-height: 1rem;
    letter-spacing: normal;
}

#body .formfield-subtitle.status-error img
{
    filter: var(--Core-Urgent-SVG) !important;
}

#body .formfield-subtitle.status-error,
#body .formfield-subtitle.status-error div
{
    color: var(--Core-Urgent);
    font-weight: 600;
}