/* GENERAL LAYOUT SETTINGS */

    * { font-family:  "Helvetica", "Arial", sans-serif ;         }
 

/* <editor-fold defaultstate="collapsed" desc="General System Formats"> */
    .jsLink, .enableGet, .jsAuto { 
        color: blue !important;
        cursor: pointer; 
    }
    html, body { height: 100%; }
    
    @media print { 
         body { overflow: auto; }
    }
    
/* </editor-fold>*/
/* <editor-fold defaultstate="collapsed" desc="General Setup Styles"> */ 
    .centerBlock { 
        clear: both; 
        display: table; 
        margin: auto; 
        float: none !important; 
    }
    .centerButton { float: none !important; margin: 10px auto !important; display: block !important; }
    .clearfix { clear: both; }
    .hide, .hidden { 
        display: block;
        display: none;
    }
    .toolbar { 
        clear: both;
        display: table; 
        margin: 10px auto 0 auto; 
        border: 2px solid #707070; 
        background-color: #4F4F4F; 
        padding: 2px; 
        border-radius: 4px; 
    }
    .toolbar img { 
        width: 40px; 
        display: block; 
        float: left; 
    }
    .txtCenter { text-align: center; }    
    .center { text-align: center; float: none; display: block; margin: auto; }
    .italics { font-style: italic; }
    .right, .rightHalf { display: block; width: 49%; float: right; }
    .left, .leftHalf { display: block; width: 49%; float: left; }
    .block { 
        background-color: #f5f5f5; 
        border-radius: 15px;
        border: 5px solid #707070; 
        box-shadow: 4px 4px 2px #b2b2b2;
        display: block; 
        min-width: 150px; 
        min-width: 75px; 
        padding: 4px 10px 4px 10px; 
    }
    .block h1, .block h2, .block h3, .block h4, .block h5, .block h6 { text-align: center; }
    .extraDebug { font-style: italic; color: #D1CCFF; }
    .autoLoadAndReplace { color: #7A9D96; font-style: italic; }
    .gold { background-color: #fff3a8; }
    .errorBox { background-color: red; font-weight: bold; display: block; width: 100%; text-align: center; }
    .error {background-color: #FDFFCC; color: red; font-style:italic; }
    .lightGrey { color: #D5D5D5; font-style:italic; font-size: small; }
    .smalltext { font-size: x-small; }
    .insetBox { display: block; width: 85%; margin: 10px auto; padding: 5px; background-color:#f5f5f5; border: 2px solid black; }
    
    
    .infoBlock { display: block; width: 100%; } 
    .infoBlock label {  display: block; float: left; clear: both;  font-family: Verdana,Arial,sans-serif; font-weight: bolder; border-top: 1px dashed black; min-width: 250px; padding: 2px; margin:1px; text-align: right;  min-height: 24px; } 
    .infoBlock p { display: block; float: left; font-family: Verdana,Arial,sans-serif; font-weight: normal; padding: 2px 2px 2px 5px; margin: 1px;  min-height: 24px; } 
    
    #criticalSystemMessage { 
        display: block; 
        background-color: red; 
        width: 100%;
        margin: 0px 0px 5px 0px; 
        padding: 4px; 
        font-weight: bold; 
        color: yellow; 
        text-align: center; 
        font-size: large; 
        font-family: sans-serif; 
    }
    #criticalSystemMessage p { margin: 0; padding: 1px; }
/* </editor-fold>*/
/* <editor-fold defaultstate="collapsed" desc="Primary Navigation Setup Styles"> */ 
    body {
        overflow:hidden;
        }

    /* <editor-fold defaultstate="collapsed" desc="Header Toolbar"> */ 
        #topBar { 
                        display: block; 
                        position: absolute; 
                        top: 0; 
                        left: 0; 
                        background-color: #f5f5f5; 
                        border-bottom: solid 1px #C7C7C7; 
                        height: 45px; 
                        width: 100%; 
                        z-index: 900;
                        padding: 0; 
                } 
        #topBarLeft { 
                        display: block ;
                        float: left; 
                        margin: 0 0 0 10px; 
                        text-align: left; 
        }
        #topBarRight { 
                        display: block; 
                        float: right; 
                        position: absolute; 
                        right: 10px; 
                        bottom: 0px; 
                        text-align: right; 
        }
        #topBar ul { margin: 0; padding: 0; list-style-type: none; display: block; float: right; }
        #topBar li { display: block; float: right; }
        #topBar ul img { width: 40px; margin: 0; }
        #topBar .menuTitle { display: none; }
    
    /* </editor-fold>*/
    /* <editor-fold defaultstate="collapsed" desc="Icon Toolbars"> */ 
        #navigationMenu { 
                display: inline-block; 
                float: left; 
                background-color: #DEDEDE; 
                width: auto; 
            }
        #navigationMenu img { 
                width: 40px; 
                display: block; 
                float: left; 
                clear:left; 
            }
        #navigationMenu ul { 
                list-style-type: none; 
                padding: 0; 
                margin: 10px 0 0 0 ; 
            }
        #navigationMenu .menuTitle { 
                display: none;
                float: left; 
                overflow: hidden; 
                font-size: 16px; 
                margin: 12px 2px 0 2px;

            }
        #navigationMenu .navMenu { 
                display: inline-block; 
                float: left; 
                background-color: #DEDEDE; 
                padding: 45px 3px 0 3px; 
                border-left: solid 1px #C7C7C7; 
                height: 100%; 
        }
        #navMenu1 { 
                top: 0;
                left: 0; 
                z-index: 10; 
            }
        #navMenu2 { 
                top: 0; left: 48px; 
                z-index: 9; 
            }
        #navMenu3 { 
                top: 0; left: 96px; 
                z-index: 8;
            }
        #navMenu4 { 
                top: 0; left: 144px;
                z-index: 7; 
            }
        #navMenu5 {
                top: 0; left: 192px; 
                z-index: 6; 
            }
        #navigationMenu, #navigationMenu a { 
            color: black;
            font-size: medium;
            font-weight: normal; 
            text-decoration: none; 
        }
        #navigationMenu hr { 
            margin: 10px 0 5px 0;
            float: left;
            clear: both;
            width: 100%;
        }
    /* </editor-fold>*/
    /* <editor-fold defaultstate="collapsed" desc="Hidden Navigation Menu"> */ 
        #menuSidePanel { max-height: 100%; overflow: auto; }
        #hiddenNavMenu { 
            background-color: #DEDEDE;
            display: none; 
            width: 260px; 
            height: 100%; 
            position: absolute; 
            top: 0; 
            left: 0; 
            z-index: 999; 
            overflow-y: auto; 
            overflow-x: hidden; 
        }
        #hiddenNavMenu ul { margin: 0; padding: 0; list-style-type: none; width: 240px; }
        #hiddenNavMenu ul ul { margin: 0 0 0 10px; width: 230px; }
        #hiddenNavMenu ul ul ul { margin: 0 0 0 10px; width: 220px; }
        #hiddenNavMenu ul li { 
            border: 1px solid black; 
            height: 36px;
            width: 95%;
            display: block; 
            font-size: 16px;
            padding: 10px 0 0 10px;
            margin: 2px 0 0 0; 
            border-radius: 10px; 
            overflow: hidden; 
            background-color: white; 
            }
        #hiddenNavMenu li img.cstmIcon { 
                width: 30px; 
                display: block; 
                float: right;
            }
        #hiddenNavMenu, #hiddenNavMenu a { 
            color: black; 
            font-size: medium; 
            font-weight: normal; 
            text-decoration: none; 
        }
    /* </editor-fold>*/
    /* <editor-fold defaultstate="collapsed" desc="Footer Bar"> */ 
    #footerBar { 
            display: block; 
            position: absolute; 
            bottom: 0; 
            left: 0; 
            height: 40px; 
            background-color: black; 
            color: white; 
            width: 100%; 
            font-weight: normal; 
            font-size: medium; 
            text-shadow: none; 
            
            }
    #mainSystemSearch { 
            display: block; 
            float: right; 
            width: 250px;
            height: 30px; 
            margin: 5px 5px 0 0 ; 
            font-style: italic;
        }
    #footerShortcuts { 
            display: block; 
            float: left; 
        }
    #footerBar img { 
                width: 30px;
                margin: 5px 0 0 5px; 
            }
    /* Stretched top-to-bottom of the 40px bar and centred as a flex line, rather than
       pinned to `bottom: 0` -- that put the text's baseline on the bar's bottom edge, so it
       read as sitting low rather than centred. The phone breakpoint below puts this box back
       into the flow (position: static) and re-centres it with the bar's own align-items, so
       it resets display/height there. */
    #footerBar .copyright { 
        position: absolute; 
        width: 450px; 
        top: 0; 
        bottom: 0; 
        left: 50%; 
        margin: 0 0 0 -225px;
        text-align: center; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
    }
    /* .jsLink carries `color: blue !important`, which outranks even an inline style on the
       anchor -- so the footer's Notices link needs its own !important to read white on the
       black bar. The underline stays: with no colour contrast against the surrounding text
       it is the only thing marking it as a link. */
    #footerBar .copyright a.jsLink,
    #footerBar .copyright a.jsLink:link,
    #footerBar .copyright a.jsLink:visited,
    #footerBar .copyright a.jsLink:hover,
    #footerBar .copyright a.jsLink:focus,
    #footerBar .copyright a.jsLink:active {
        color: #ffffff !important;
        text-decoration: underline;
    }
    #liveSupportIcon { display: block; float: right }
    #liveSupportIcon img { width: auto; height: 100%; margin: 0; }
    #systemSearchTool { display: block; float: right } 
    /* </editor-fold>*/
    /* <editor-fold defaultstate="collapsed" desc="Status Messages"> */ 
        #statusMessages {
                display: none;
                float: right;
                position: absolute;
                bottom: 20px;
                right: 120px;
                background-color: #FFFD96; 
                border-radius: 15px 15px 0 0;
                border: 1px solid #C7C7C7;
                padding: 3px; 
                z-index: 900;
                width: 450px; 
            }
        #statusMessages:empty, #statusMessages:blank { display: none;  }
        #statusMessages:-moz-only-whitespace { display: none; }
        #statusMessages .message { 
            display: block; 
            border-width: 0 0 1px 0; 
            border-color: black; 
            border-style: dotted; 
            margin-top: 5px; 
            padding: 5px 5px 0 5px ;
        }
    /* </editor-fold>*/
    
    #mainContent { 
            display: block; 
            position: absolute; 
            top: 46px; 
            left: 48px; 
            overflow: auto; 
            height: 600px; width: 100%; 
            padding: 4px; 
        }
    #background-shade, div.background-shade{ 
        width: 100%; 
        height: 100%;
        position: fixed;
        display: block;
        background-color: rgba(42, 42, 42, .8);
        top: 0; 
        left: 0;
        z-index: 20; 
    }
/* </editor-fold>*/
/* <editor-fold defaultstate="collapsed" desc="Pop Up Related Formats"> */ 

    #popupContainer { 
        width: 100%; 
        height: 100%; 
        top: 0;
        position: absolute;     
        display: block; 
        background-color: rgba(42, 42, 42, .8)
    }
    .popped { 
        background-color: #FFFFE3;
        float: left; 
        display: block; 
        margin: -9999px;
        min-width: 500px; 
        position: fixed; 
        z-index: 21;
        top: 50%;
        left: 50%; 
        padding: 10px; 
        border: 6px solid #F7F7DC;
        border-radius: 15px; 
        
        -webkit-box-shadow:0 0 10px rgba(0,0,0,0.4);
        -moz-box-shadow:0 0 10px rgba(0,0,0,0.4); 
        box-shadow:0 0 10px rgba(0,0,0,0.4);
    }
    .internalPopped {
        display: block;

    }
    /* Help-topic popups (data-popclass='poppedHelp' on HLP::topicPopup's root div).
       Lighter, more modern chrome than the standard cream pop: white surface, hairline
       border, deeper shadow. Scoped to .poppedHelp so every other popup is unaffected. */
    .popped.poppedHelp {
        background-color: #FFFFFF;
        border: 1px solid #E4E8F0;
        border-radius: 14px;
        padding: 0;
        box-shadow: 0 18px 45px rgba(16, 22, 43, 0.30), 0 2px 8px rgba(16, 22, 43, 0.12);
    }
    /* Tall help topics scroll their BODY, not the whole pop, so the title bar stays put
       at the top and the scrollbar never runs up alongside it. makePop() sets
       overflow:auto inline on this div when the content doesn't fit, hence !important. */
    .popped.poppedHelp .internalPopped {
        background-color: #FFFFFF;
        border-radius: 14px;
        overflow: hidden !important;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .popped.poppedHelp .hlpTopicPop {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        /* .hlpDoc (shared with the full help page) sets max-width:1100px and margin:0 auto.
           Auto side margins stop a flex child from stretching, which left the title bar
           and body sized to their content instead of filling the pop. */
        width: 100%;
        max-width: none;
        margin: 0;
    }
    .popped.poppedHelp .hlpTopicPopHeader { flex: 0 0 auto; }
    .popped.poppedHelp .hlpTopicPopBody   { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
    /* Shaped like a dashboard card: tinted title bar across the top, white body below. */
    .popped.poppedHelp .hlpTopicPop { padding: 0; }
    .popped.poppedHelp .hlpTopicPopHeader {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        padding: 10px 88px 10px 16px;   /* right padding leaves room for the two buttons */
        font-size: large;
        font-weight: bold;
        color: var(--aceAccent2Text, #333333);
        background-color: var(--aceAccent2, #DCE6E3);
        border-bottom: 1px solid #C0CECA;   /* rule under the title + icon */
        border-radius: 13px 13px 0 0;
    }
    .popped.poppedHelp .hlpTopicPopHeader .bi-life-preserver { color: var(--aceAccent2Text, #333333); }
    .popped.poppedHelp .hlpTopicPopBody { padding: 4px 16px 16px 16px; }
    .popped.poppedHelp .hlpTopicPopBody::-webkit-scrollbar { width: 10px; }
    .popped.poppedHelp .hlpTopicPopBody::-webkit-scrollbar-thumb { background-color: #C3D2CE; border-radius: 5px; border: 2px solid #FFFFFF; }
    .popped.poppedHelp .hlpTopicPopBody::-webkit-scrollbar-track { background-color: transparent; }
    /* The frame itself is shared with the full help page -- see ".hlpDoc .hlpBodyText img"
       in the Help Documentation section. Only the click-to-enlarge affordance is set
       here, because the lightbox handler is bound to the popup alone (ace_start.js). */
    .popped.poppedHelp .hlpTopicPopBody img { cursor: zoom-in; }
    .popped.poppedHelp .hlpTopicPopBody a[href] img { cursor: pointer; }   /* author linked it -- the link wins */
    .popped.poppedHelp .hlpChildList a.jsLink:hover { text-decoration: underline; }

    /* Close / refresh sit INSIDE the card, in its title bar, instead of hanging off
       the top-right corner the way the standard pop chrome places them. .popped is
       position:fixed, so it is the containing block for these. */
    .popped.poppedHelp a.poppedCloseButton,
    .popped.poppedHelp a.poppedRefreshButton {
        position: absolute;
        top: 8px;
        float: none;
        margin: 0;
        width: 28px;
        height: 28px;
        padding: 0;
        line-height: 26px;
        text-align: center;
        font-size: 20px;
        font-weight: normal;
        color: var(--aceAccent, #7A9D96);
        background: transparent;
        border: 1px solid transparent;
        border-radius: 50%;
        box-shadow: none;
        z-index: 5;
    }
    .popped.poppedHelp a.poppedCloseButton   { right: 10px; }
    .popped.poppedHelp a.poppedRefreshButton { right: 44px; font-size: 18px; }
    .popped.poppedHelp a.poppedCloseButton:hover,
    .popped.poppedHelp a.poppedRefreshButton:hover {
        color: #333333;
        background: #E3EAE8;
        border-color: #D8E2E0;
    }
    a.poppedCloseButton { 
        float:right;
        margin-top:-30px;
        margin-right:-30px;
        cursor:pointer;
        color: #fff;
        border: 1px solid #AEAEAE;
        border-radius: 30px;
        background: #605F61;
        font-size: 31px;
        font-weight: bold;
        display: inline-block;
        line-height: 0px;
        padding: 11px 3px;       
    }
    .poppedCloseButton:before {
        content: "×";
    }
    a.poppedRefreshButton{
        float:right;
        margin-top:-30px;
        margin-right:0;
        cursor:pointer;
        color: #fff;
        border: 1px solid #AEAEAE;
        border-radius: 30px;
        background: #605F61;
        font-size: 25px;
        font-weight: bold;
        display: inline-block;
        line-height: 0px;
        padding: 11px 3px;        
    }
    .poppedRefreshButton:before{
        content: "↺"; 
    }

    /* Lightbox for help-topic images (opened by aceLightboxOpen in ace_start.js).
       z-index sits above the popup stack, whose boxes start at 20 and step by 2. */
    .aceLightbox {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 3000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 40px;
        background-color: rgba(16, 22, 43, 0.86);
        cursor: zoom-out;
    }
    .aceLightbox img {
        max-width: 92vw;
        max-height: 84vh;
        padding: 0;
        background-color: #FFFFFF;
        border: 3px solid #FFFFFF;
        border-radius: 8px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.55);
    }
    .aceLightboxCaption {
        max-width: 80vw;
        margin-top: 12px;
        color: #E8EDF2;
        font-size: small;
        text-align: center;
    }
    .aceLightboxClose {
        position: absolute;
        top: 16px;
        right: 24px;
        color: #FFFFFF;
        font-size: 34px;
        line-height: 1;
        font-weight: bold;
        opacity: 0.85;
        cursor: pointer;
    }
    .aceLightboxClose:before { content: "\00d7"; }
    .aceLightboxClose:hover { opacity: 1; }

    .OLD_popped {
        background-color: #FFFFE3;  
        display: none; 
        margin: 0 auto; 
        min-width: 500px; 
        position: fixed; 
        z-index: 21; 
        top: 50%; 
        left: 50%;
        margin-left: -300px; 
        margin-top: -250px; 
        padding: 10px; 
        border: 6px solid #F7F7DC; 
        border-radius: 15px; 
        
        -webkit-box-shadow:0 0 10px rgba(0,0,0,0.4);
        -moz-box-shadow:0 0 10px rgba(0,0,0,0.4); 
        box-shadow:0 0 10px rgba(0,0,0,0.4);
    }
/* </editor-fold>*/
/* <editor-fold defaultstate="collapsed" desc="Form Formats"> */ 
    .form { 
        width: 960px; 
        max-width: 100%; 
        display: block; 
        margin: auto; 
        padding: 5px; 
    }
    .form h2 { text-align: center; display: block; margin: auto; }
    .form_default { 
        background-color: #f5f5f5; 
        border-radius: 15px;
        border: 5px solid #707070; 
        box-shadow: 4px 4px 2px #b2b2b2;
    }
    /* <editor-fold defaultstate="collapsed" desc="Form Widths"> */ 
        .form span.fm { display: block; float: left; margin: 0 15px 0 0; min-height: 57px; }
        .form_w1 { max-width: 320px; padding: 15px 0 15px 15px; min-height: 57px; }
        .form_w2 { max-width: 640px; padding: 15px 0 15px 15px; min-height: 57px; }
        .form_w3 { max-width: 960px; padding: 15px 0 15px 15px; min-height: 57px; }
        /* <editor-fold defaultstate="collapsed" desc="1 Column Options"> */ 
        span.w11 { width: 290px; }
        .w11 input , .w11 textarea, .w11 select, .w13 .formResponse { width: 282px; }
        .w11 fieldset { width: 276px; }
        .w11 fieldset input, .w11 fieldset textarea, .w11 fieldset select, .w11 fieldset span.formResponse { width: 263px; }
        .w11 fieldset fieldset { width: 257px; }
        .w11 fieldset fieldset input, .w11 fieldset fieldset textarea, .w11 fieldset fieldset select, .w11 fieldset fieldset span.formResponse { width: 244px; }
        /* </editor-fold>*/
        /* <editor-fold defaultstate="collapsed" desc="2 Column Options"> */ 
        span.w12 { width: 297px; }
        .w12 input, .w12 textarea , .w12 select, .w12 .formResponse { width: 278px; }
        .w12 fieldset { width: 285px; }
        .w12 fieldset input, .w12 fieldset textarea, .w12 fieldset select, .w12 fielset span.formResposne { width: 272px; }
        .w12 fielset fieldset { width: 266px; }
        .w12 fieldset fieldset input, .w12 fieldsett fieldset textarea, .w12 fieldset fieldset select, .w12 fieldset fieldset span.formResponse { width: 253px; }

        span.w22 { width: 610px; }
        .w22 input, .w22 textarea , .w22 select, .w22 .formResponse { width: 591px; }
        .w22 fieldset { width: 591px; }
        .w22 fieldset input, .w22 fieldset textarea, .w22 fieldset select, .w22 fielset span.formResposne { width: 578px; }
        .w22 fielset fieldset { width: 572px; }
        .w22 fieldset fieldset input, .w22 fieldsett fieldset textarea, .w22 fieldset fieldset select, .w22 fieldset fieldset span.formResponse { width: 559px; }

        /* </editor-fold>*/
        /* <editor-fold defaultstate="collapsed" desc="3 Column Options"> */ 
        .form span.w13 { width: 300px; }
        .w13 input , .w13 textarea, .w13 select , .w13 .formResponse { width: 292px; }
        .w13 fieldset { width: 286px; }
        .w13 fieldset input , .w13 fieldset textarea , .w13 fieldset select , .w13 fieldset span.formResponse { width: 273px; }
        .w13 fieldset fieldset { width: 245px; }
        .w13 fieldset fieldset input, .w13 fieldset fieldset textarea, .w13 fieldset fieldset select, .w13 fieldset fieldset span.formResponse { width: 254px; } 

        .form span.w23 { width: 615px; }
        .w23 input , .w23 textarea , .w23 select , .w23 span.formResponse { width: 607px; }
        .w23 fieldest { width: 601px; }
        .w23 fieldset input , .w23 fieldset textarea , .w23 fieldset select , .w23 fieldset span.formResponse { width: 588px; }
        .w23 fieldset fieldset { width: 582px; }
        .w23 fieldset fieldset input, .w23 fieldset fieldset textarea, .w23 fieldset fieldset select, .w23 fieldset fieldset span.formResponse { width: 569px; } 

        .form span.w33 { width: 930px; }
        .w33 input , .w33 textarea , .w33 select , .w33 span.formResponse { width: 922px; }
        .w33 fieldset { width: 916px; }
        .w33 fieldset input , .w33 fieldset textarea , .w33 fieldset select , .w33 fieldset span formResponse { width: 903px; }
        .w33 fieldset fieldset { width: 897px; }
        .w33 fieldset fieldset input, .w33 fieldset fieldset textarea, .w33 fieldset fieldset select, .w33 fieldset fieldset span.formResponse { width: 884px; } 

        /* </editor-fold>*/
        /* <editor-fold defaultstate="collapsed" desc="4 Column Options"> */ 
        .form w14 { max-width: 240px; }
        .form w24 { max-width: 470px; }
        .form w34 { max-width: 700px; }
        .form w44 { max-width: 960px; } 

        span.w14 { width: 221px;}
        .w14 input , .w14 textarea , .w14 select , .w14 span.formResponse { width: 215px; }
        .w14 fieldset { width: 207px; }
        .w14 fieldset input , .w14 fieldset textarea , .w14 fieldset select , .w14 fieldset span.formResponse  { width: 194px; } 
        .w14 fieldset fieldset { width: 185px; }
        .w14 fielsdset fieldset input , .w14 fielsdset fieldset textarea , .w14 fielsdset fieldset select , .w14 fielsdset fieldset span.formResponse  { width: 172px; } 

        span.w24 { width: 457px;}
        .w24 input , .w24 textarea , .w24 select , .w24 span.formResponse { width: 451px; }
        .w24 fieldset { width: 443px; }
        .w24 fieldset input , .w24 fieldset textarea , .w24 fieldset select , .w24 fieldset span.formResponse  { width: 430px; } 
        .w24 fieldset fieldset { width: 424px; }
        .w24 fielsdset fieldset input , .w14 fielsdset fieldset textarea , .w14 fielsdset fieldset select , .w14 fielsdset fieldset span.formResponse  { width: 411px; } 

        span.w34 { width: 693px;}
        .w34 input , .w34 textarea , .w34 select , .w34 span.formResponse { width: 687px; }
        .w34 fieldset { width: 679px; }
        .w34 fieldset input , .w34 fieldset textarea , .w34 fieldset select , .w34 fieldset span.formResponse  { width: 666px; } 
        .w34 fieldset fieldset { width: 660px; }
        .w34 fielsdset fieldset input , .w14 fielsdset fieldset textarea , .w14 fielsdset fieldset select , .w14 fielsdset fieldset span.formResponse  { width: 647px; } 

        span.w44 { width: 929px;}
        .w44 input , .w44 textarea , .w44 select, .w44 span.formResponse { width: 923px; }
        .w44 fieldset { width: 915px; }
        .w44 fieldset input , .w44 fieldset textarea , .w44 fieldset select, .w44 fieldset span.formResponse { width: 902px; } 
        .w44 fieldset fieldset { width: 896px; }
        .w44 fielsdset fieldset input , .w14 fielsdset fieldset textarea , .w14 fielsdset fieldset select , .w14 fielsdset fieldset span.formResponse  { width: 883px; } 
        /* </editor-fold>*/
    /* </editor-fold>*/
    /* <editor-fold defaultstate="collapsed" desc="General Format For Form Objects Not In a Specific Form Type"> */ 
        button, input[type=submit], input[type=button], .button  { 
            display: block; 
            float: left; 
            width: auto; 
            min-width: 36px; 
            margin: 10px 10px 5px 0; 
            padding: 2px; 
            box-shadow: 4px 4px 2px #b2b2b2; 
            border: 1px solid #707070; 
            border-radius: 5px; 

        }
        input[type=radio] + label, input[type=checkbox] + label { 
            display: block; 
            float: left; 
        }

    /* </editor-fold>*/   
    /* <editor-fold defaultstate="collapsed" desc="Form DIV Setup"> */ 
        /* <editor-fold defaultstate="collapsed" desc="Quesion"> */     
            .form label { 
                font-weight: bold; 

            }
            .form input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]), .form textarea, .form select, span.formResponse {
                display: block;
                margin: -3px 0px 12px 4px; 
                padding: 2px; 
                font-size: large; 
                width: 100%; 
                box-sizing: border-box;
                border-radius: 5px;    
            }
            .form input:not([type=checkbox]):not([type=radio]):focus, .form textarea:focus { box-shadow: 0 0 5px #4F4F4F; background-color: #FEFEF3;  border: solid 2px #7A9D96; }
            
            
            .form .fm button, .form .fm input[type=submit], .form .fm input[type=button], .form .fm .button {
                float: none; 
                margin: auto; 
            }
            .form input[type=radio], .form input[type=checkbox], .entry_form input[type=radio], .entry_form input[type=checkbox] { 
                display: block;
                float: left;
                width: 30px; 
                clear: both; 
            }
            .form input[type=radio]:checked + label, .form input[type=checkbox]:checked + label { 
                background-color: #cc7829;
            }
            .fm fieldset { 
                border-radius: 10px; 
                border: 1px solid #707070; 
            }

        /* </editor-fold>*/

        /* <editor-fold defaultstate="collapsed" desc="Placeholder Format"> */ 
            ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
                color: #D1CCFF;
            }
            ::-moz-placeholder { /* Firefox 19+ */
                color: #D1CCFF;
            }
            :-ms-input-placeholder { /* IE 10+ */
                color: #D1CCFF;
            }
            :-moz-placeholder { /* Firefox 18- */
                color: #D1CCFF;
            }
        /* </editor-fold>*/
    /* </editor-fold>*/
    /* <editor-fold defaultstate="collapsed" desc="entry_form Table Formats"> */ 
        .entry_form { 
            border-collapse: collapse; 
            border: 1px solid black; 
            width: 100%;
            background-color: #f5f5f5;
            table-layout: fixed; 
            clear: both; 
        }
        .entry_form th { 
            text-transform: uppercase; 
            font-size: smaller; 
            text-align: left; 
            border-top: 1px solid black; 
            padding: 1px 0 0 4px; 
            font-family: 'Open Sans Condensed', sans-serif;
        }
        .entry_form td { 
            border-bottom: 1px solid black; 
            padding: 0 25px 8px 4px;
        }
        .entry_form input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]), .entry_form select, .entry_form textarea {
            width: 100%;
            border-radius: 6px;
            border-style: inset;
        }
        .entry_form button, .entry_form input[type=submit], .entry_form input[type=button], .entry_form .button {
            float: none; 
            margin: auto; 
        }
    /* </editor-fold>*/
    /* <editor-fold defaultstate="collapsed" desc="list_form Table Formats"> */ 

        table.list_form { 
            width: 95%;
            margin: 5px auto 5px auto; 
            border-collapse: collapse; 
            border: none; 
            display: block;
        }
        table.list_form th.set { 
            background-color: #fff3a8; 
            font-weight: bold; 
            text-align: left; 
        }
        table.list_form tr { 

        }
        table.list_form th { 
            font-weight: bold;
            text-align: right; 
            border-bottom: 1px solid #ffc6c6; 
        }
        table.list_form td { 
            border-bottom: 1px solid #ffc6c6; 
            max-width: 306px; 
            padding-left: 10px; 
        }
        table.list_form fieldset { 
            min-width: 300px; 
            margin: 0; 
            padding: 3px;
            border: 0px transparent; 
        }
        table.list_form input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]), table.list_form textarea, table.list_form select, span.formResponse {
            font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
            max-width: 100%; 
            width: 80%; 
        }
        table.list_form input[type=radio], table.list_form input[type=checkbox], table.list_form input[type=radio], table.list_form input[type=checkbox] { 
            display: block;
            float: left; 
            float: left;
            width: 30px; 
            clear: both; 
        }
/*        .form_button { 
            clear: both;
            display: block;
            margin: 5px auto;
            text-align: center;
            border: 1px solid #2a2a2a;
            border-radius: 10px;
            box-shadow: 4px 4px 2px #b2b2b2;
            display: block;
            margin: 0 auto 7px auto;
            min-width: 36px;
            padding: 6px;
            width: auto;
        }*/


    
    /* </editor-fold>*/
    /* <editor-fold defaultstate="collapsed" desc="form_table Formats"> */ 
    .form_table { 
        table-layout: auto; 
        width: 100%;
        margin: auto 5px; 
    }
    .form_table tr { 
        height: 30px; 
        width: 100%; 
    }
    .form_table td { 
        vertical-align: top; 
        padding: 3px; 
    }
    .form_table input { 
        margin: auto; 
        display: block; 
        float: left; 
    }
    .form_table img { 
        margin: 2px; 
    }
    /* </editor-fold>*/
    /* <editor-fold defaultstate="collapsed" desc="Mini Instant Form Settings"> */ 
    div.miniInstantForm label { 
        float: left; 
        clear: both; 
        font-weight: bold; 
        margin: 0 6px 3px 1px; 
    }
    div.miniInstantForm input, div.miniInstantForm textarea {
        display: block; 
        float: right; 
        width: 75%; 
        margin: 0 2px 3px 2px; 
    }
    div.miniInstantForm span { 
        display: block; 
        clear: right; 
        margin: 0 0 3px 0; 
    }
    /* </editor-fold>*/
    /* <editor-fold defaultstate="collapsed" desc="Mini Instant Form Settings"> */ 
    .form .switch { 
        position: relative;
        display: inline-block;
        width: 60px;
        height: 34px;
      }

    .form .switch input { 
        opacity: 0;
        width: 0;
        height: 0;
      }

    .form .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
      }

    .form .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
      }

    .form input:checked + .slider {
        background-color: #2196F3;
      }

    .form input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
      }

    .form input:checked + .slider:before {
        -webkit-transform: translateX(26px);
        -ms-transform: translateX(26px);
        transform: translateX(26px);
      }

      /* Rounded sliders */
    .form .slider.round {
        border-radius: 34px;
      }

    .form .slider.round:before {
        border-radius: 50%;
      }
    .form .sliderLabel { display:table-cell; min-height: 34px; vertical-align: middle; padding-left: 5px; }
    .form .switchContainer { display: table-cell; vertical-align: middle; }
    /* </editor-fold>*/
    
    /* <editor-fold defaultstate="collapsed" desc="basicForm settings"> */ 
        div.basicForm  { background-color: #f5f5f5; display: block; margin: 0 auto; min-width: 200px; max-width: 600px; width: 100%; border: solid 1px #707070; border-radius: 6px; padding: 10px; box-shadow:4px 4px 2px #b2b2b2; }
    
        div.basicForm label{ display: block; margin-top: 15px; }
        div.basicForm .checks label { margin-top: 0; }

        div.basicForm input { padding: 4px; border: solid 1px #999; }
        div.basicForm input[type="email"], div.basicForm input[type="text"] { width: 90%; }
        div.basicForm textarea{ height: 125px; width: 90%; padding: 5px; border: solid 1px #999 }

        div.basicForm .checks { margin-bottom: 15px; }
        div.basicForm .checks p { margin-bottom: 0; }

        div.basicForm input { font-size: large; border-radius: 3px; }
        div.basicForm input[type="checkbox"] + label, div.basicForm input[type="radio"] + label { display: inline-block; padding-top: 0; margin-top: 0; margin-left: 2px; }
        div.basicForm input[type="radio"] { margin-left: 25px; margin-right: 0; display: inline-block; float: left; width: auto; }
        div.basicForm input[type="checkbox"] { display: inline-block; float: left; margin-left: 0; clear: both; width: auto; }
        div.basicForm input[type="radio"]:first-of-type { margin-left: 0; }
        div.basicForm input:focus, div.basicForm textarea:focus { outline: solid 2px #4F4F4F; box-shadow: 0 0 5px #4F4F4F; background-color: #FEFEF3;  }

        div.basicForm select { font-size: large; min-width: 45%; max-width: 90%; } 
    
    /* </editor-fold>*/
    /* <editor-fold defaultstate="collapsed" desc="info_form"> */ 

    
        .info_form { width: 100%; display: block; }
        .info_form.alternate .row:nth-child(even) { background: #f5f5f5; }
        .info_form .row { width: 100%; display: block; clear: both; padding: 6px 0; border-top: 2px solid #afe3d9; }
        .info_form .row:first-child { border-top: none; }
        .info_form .left { width: 25%; display: block; float: left; clear: both; padding: 6px 0; }
        .info_form .right { width: 74%; display: block; float: right; padding: 6px 0; font-size: large; font-family: sans-serif; }
        .info_form .left label { display:block; float: right; clear: both; font-weight: bold; font-size: large; padding: 3px 0 0 0; text-align: right; }
        .info_form .info { font-style: italic; font-size: small; clear: both; display: block; float:right; text-align: right; }
        .info_form input:not([type=checkbox]):not([type=radio]), .info_form textarea { display: block;                 padding: 2px; 
                                                font-size: large;               font-family: sans-serif; 
                                                width: 98%; 
                                                align-content: box-sizing;      border-radius: 5px; 
                                                border-width: 2px;              border-style: inset; 
                                                border-color: initial;          border-image: initial; 
                                            }
        

        .info_form input[type=radio], .info_form input[type=checkbox] { display: block; float: left; clear: both; margin: 6px; }
        .info_form input[type=radio]+label, .info_form input[type=checkbox]+label { display: block; float: left; clear: none; font-weight: bold; }
        .info_form fieldset { border: 0px transparent; }
        .info_form select { min-width: 40%; font-size: large; font-family: sans-serif; }

    /* </editor-fold>*/
    
    .buttonBox { display: block; float: left; margin: 2px 5px; border-radius: 8px; border: 1px black solid; background-color: #ffffe3; padding: 4px;  }
    .buttonBox .label { display: block; width: 100%; text-align: center; font-weight: bold; font-size: large; }
    .makeMeRichTextarea { height: 310px; }
/* </editor-fold>*/



div.purchaseOrder .poTerms input[type="radio"] { clear: both; display: block; float: left; width: auto; margin-right: 5px;  }
div.purchaseOrder .poTerms input[type="radio"] + label { clear: none; }
.transaction input[type='radio'] { clear: both; display: block; float: left; width: auto; margin-right: 5px;  }
.transaction input[type='radio'] + lael { clear: none; }

.zsiq_float1 { z-index: 0 !important; }
.zsiq_custombtn { z-index: 0 !important; }
#zsiqwidget { z-index: 0 !important; }
#liveSupportIcon { z-index: 0 !important; }



/* <editor-fold defaultstate="collapsed" desc="Reoccuring Objects"> */ 
.reoccureform { }
.reoccureform .fslabel { float: none; font-size: large; background-color: #2e74A7; color: #fff3a8; font-weight: bold; padding: 0 5px 0 5px; border: 1px solid black; border-radius: 10px 10px 0px 0px; margin: 10px 0 0 0; border-bottom: 0px; }
.reoccureform fieldset { border-radius: 0 0px 10px 10px;
    padding: 5px 5px 5px 5px;
    margin: 0;
    border: 2px solid #2a2a2a;
    max-width: 100%;
    display: block; 
}
.reoccureform span.w13 { float: left; margin: 5px 10px 0 0;  }
.reoccureform th { width: 35px; }
.reoccureform td { width: 35px; }
/* </editor-fold>*/

/* <editor-fold defaultstate="collapsed" desc="General CharterAce Specific Options"> */ 
.actCode, .acctCode { font-weight: bold; }
.actDesc, .acctDesc { font-style: italic; font-size: small; }
.actSelTreeSelected, .actSelTreeSelected:checked { font-weight: bold; color: #4F4F4F; background-color: #ffffe3; margin: 3px 0 3px 0; border: 1px  dashed yellow; }
.actSelTreeParent { font-weight: bold; color: #4F4F4F; background-color: #ffffe3; }
div.pplContactInfo { display: block; float: left; margin: 5px auto; border: 2px solid black; border-radius: 10px; padding: 0 8px 5px 8px; background-color: #ffffe3; clear: both;   }
div.pplContatcInfo h3 { text-decoration: underline; }
.switch-wrapper { display: inline-block; position: relative; top: 3px; }    
div.searchResultBox { min-width: 1000px; min-height: 200px; border: 1px solid black; }
.actionBox400 { display: block; width: 400px; margin: 8px auto; padding: 4px; border: 2px solid black; border-radius: 5px; background-color: #ddffee; text-align: center; }
.actionBox500 { display: block; width: 500px; margin: 8px auto; padding: 4px; border: 2px solid black; border-radius: 5px; background-color: #ddffee; text-align: center; }

.selectionBox { display: block; border: 1px solid black; border-radius: 10px; background-color: #ddffee; padding: 5px 30px 10px 30px; text-align: center; min-height: 25px; margin: 20px auto; width: fit-content; text-align: center;}
.selectionBox:after { content:''; display: block; clear:both; }
.selectionBox h3 { margin: 2px auto 5px auto; }
.selectionBox button { margin: 0px 15px; border: 1px solid #4f4f4f; box-shadow: 2px 2px 2px #888080; padding: 3px 6px; display: inline-block; float: none; }
.selectionBox .option:first-of-class { margin: 0px 15px 0px 0px; }
.selectionBox .option:last-of-class { margin: 0px 0px 0px 15px; }
.selectionBox .selected { margin: 0px 15px; border: 1px solid #4f4f4f; box-shadow: none; padding: 3px 6px; display: inline-block; float: none; background-color: #ffffe3; border-radius: 5px; }

    
/* </editor-fold>*/
/* <editor-fold defaultstate="collapsed" desc="Messages or Emails"> */ 
    .msgMessage { border: solid 2px black; border-radius: 10px; background-color: #f5f5f5; padding: 0 0 5px 0; }
    .msgMessage hr { height: 4px; width: 100%; background-color: black; }
    .msgMessage .info { margin: 5px; list-style-type: none; padding: 0; }
    .msgMessage .info .label { display: block; text-align: right; float: left; width: 82px; padding: 0 4px 0 0; font-weight: bold; clear: both; }
    .msgMessage .body { margin: 10px; display: block; height: 325px; overflow-y: auto;  } 

    .systemNews { border: 1px solid black; border-radius: 15px; padding: 8px; width: 450px; display: block; margin: auto; background-color: white;  }
    .systemNews .top { background-color: #ddffee; display: block; width: 100%; border-radius: 15px 15px 0 0; margin: -8px -8px 0 -8px; padding: 8px; }
    .systemNews hr { margin: 0 -7px; }

/* </editor-fold>*/   
/* <editor-fold defaultstate="collapsed" desc="Preview File Display"> */ 
    #filPreview { display: block; float: left; position: absolute; top: 0; left: 0; height: 98%; width: 98%; }
    #filPreview #gotoPrevious { display: block; float: left; position: absolute; left: 0; width: 41px; z-index: 12; }
    #filPreview #gotoNext { display: block; float: right; position: absolute; right: 15px; width: 41px; z-index: 12;  }
    #filPreview #preview { display: block; float: left; position: absolute; width: 55%; top: 0; left: 0; height: 95%; z-index: 10; padding: 5px 5px 5px 45px;  }
    #filPreview #details { display: block; float: right; position: absolute; width: 35%; top:0; right: 0; height: 95%; z-index: 10; padding: 5px 5px 5px 45px; overflow-y: auto; }
    #filPreview #fileSelector { display: none; float: left; position: absolute; left: 0; bottom: 0; margin: 5px; z-index: 14; border: 2px solid black; border-radius: 5px; padding: 5px; background-color: white; }
    #filPreview #fileSelector p, #filPreview #listSelector p { text-align: center; width: 100%; display: block; margin: 1px auto; }
    #filPreview #listSelector { display: none; float: left; position: absolute; left: 0; bottom: 45px; margin: 5px; z-index: 14; border: 2px solid black; border-radius: 5px; padding: 5px; background-color: white; }
    #filPreview #leftToolbar { display: block; float: left; position: absolute; left: 0; bottom: 0; width: 42px; z-index: 12; }
    #filPreview #bottomToolbar { display: block; float: right; position: absolute; right: 0; bottom: 0; width: 35%; height: 48px; z-index: 12; }
    #filPreview #details { font-size: large; font-family: sans-serif; }
    #filPreview #details .blocks { display: block; float: left; margin: 0 10px; padding: 0 10px 0 0; border-right: 1px solid #7A9D96; }
    #filPreview #details .processingComments { display: block; margin: 3px; padding: 6px; border: 2px solid black; border-radius: 5px; background-color: #FF9D9D; }
    #filPreview #details .processingComments ul { margin: 0px; font-size: medium; padding-inline-start: 15px; }
    #filPreview #details label { display: block; clear: both; font-size: small; color: #707070; margin: 5px 0 0 0; }
    #filPreview #details div.amtLine { display: block; width: 100%; margin: 5px 0 0 0; border-bottom: 1px solid #7A9D96; padding: 2px 0 6px 0; }
    #filPreview #details div.coaCodesBlock { display: block; float: left; }
    #filPreview #details div.amountBlock { display: block;  }
    #filPreview #details div.commentBlock { display: block; float: left; } 
    #filPreview #details div.classBlock { display: block; float: right; clear: both;  }
    #filPreview #details .ui-tabs {font-size: small; }
    #filPreview #details .ui-tabs-anchor { font-size: small; }
    #filPreview #details h3 { margin: 15px auto 5px auto; text-align: center; }
    #filPreview #details fieldset label { clear: none; }
/* </editor-fold>*/   

/* <editor-fold defaultstate="collapsed" desc="Purchase Orders"> */ 
    div.purchaseOrder { 
        max-width: 95%; 
        background-color: #f5f5f5; 
        border: 3px solid #707070; 
        display: block; 
        margin: 10px auto 5px auto; 
        position: relative; 
        padding: 5px;
    }
    div.purchaseOrder .poNum { 
        font-size: 75px; 
        font-family: Impact, Charcoal, sans-serif; 
        color: #B0E4F5; 
        margin: 0 10px -10px 0; 
        padding: 0 10px 0 0; 
        float: right; 
        position: absolute;  
        top: 0;
        right: 0; 
        z-index: 0;
        /*width: 100%;*/ 
        text-align: right; 
    }
    div.purchaseOrder .detailArea { 
        display: block; 
        position: relative; 
        top: 50px; 
        z-index: 5;
        margin: 0 auto 55px auto; 
        padding: 2px 2px 5px 2px; 
    }
    div.purchaseOrder .detailBox { 
        background-color: RGBA(245, 245, 245, 0.6) ;
        width: 98%;
        z-index: 5; 
        border: 1px solid #4F4F4F; 
        border-radius: 5px;
        float: left; 
        margin: 0 2px 5px 2px; 
        padding: 8px; 
    }
    div.purchaseOrder .poTerms label { 
        float: left; 
        clear: both; 
        font-weight: bold; 
        margin: 0 6px 3px 1px; 
    }
    div.purchaseOrder .poTerms input, div.purchaseOrder .poTerms textarea {
        display: block; 
        float: right; 
        width: 75%; 
        margin: 0 2px 3px 2px; 
    }
    div.purchaseOrder .poTerms span { 
        display: block; 
        clear: right; 
        margin: 0 0 3px 0;
        min-height: 20px; 
    }
    div.purchaseOrder .detailBox ul { 
        list-style: none; 
        margin: 0 0 7px -20px; 
    }
    div.purchaseOrder .vendorBox ul li:first-child, div.purchaseOrder .shippingBox ul li:first-child { 
        font-size: large; 
        font-weight: bold; 
        text-decoration: underline; 
    }
    div.purchaseOrder .detailBox h3 { 
        display: block; 
        clear: none; 
        font-size: x-large; 
        color: #707070; 
        text-align: center; 
        margin: 0px; 
    }
    div.purchaseOrder h1 { 
        text-align: left;
        z-index: 1; 
        position: absolute; 
        top: 5px; 
        left: 5px;
        margin: 0; 
    }
    div.purchaseOrder h2 { 
        text-align: center; 
        text-decoration: underline; 
    }
    div.purchaseOrder .poItem { 
        display: block; 
        border-bottom: 1px dashed #7A9D96; 
        font-size: large;
        clear: both; 
        padding: 7px 0; 
    }
    div.purchaseOrder .poItem input { width: 95%; display: block; margin: auto; }
    div.purchaseOrder .poItem img { display: block; float: right; margin: 3px 0 0 5px; }
    div.purchaseOrder .poItem .itemNmbr { width: 15%; float: left; font-weight: bold; }
    div.purchaseOrder .poItem .hdg { text-align: center; font-weight: bold; font-size: medium; }
    div.purchaseOrder .poItem .description { width: 40%; float: left; }
    div.purchaseOrder .poItem .priceEach { width: 12%; float: left; text-align: right; }
    div.purchaseOrder .poItem .qty { width: 5%; float: right; text-align: center; }
    div.purchaseOrder .poItem .subTotal { width: 10%; float: right; text-align: right; font-weight: bold; }
    div.purchaseOrder .poItem .accountCode { margin: 2px 0 0 25px; font-size: medium; font-weight: bold; display: block; float: left; max-width: 75%; clear: both; }
    div.purchaseOrder .poItem .accountCode .acctDesc { font-style: italic; font-weight: normal; }
    div.purchaseOrder .poItem .classBlock { display: block; float: right; margin: 5px 0 0 0; max-width: 23%; }
    div.purchaseOrder .poItem .classBlock label { display: block; float: left; font-weight: bold; }
    div.purchaseOrder .poItem .classBlock select { clear: both; display: block; float: left; width: 350px; }
    div.purchaseOrder div.po_id { 
        font-size: xx-large; 
        font-family: arial; 
        font-weight: bold; 
        color: #DBDBDB; 
        display: block; 
        float: right; 
        position: absolute; 
        right: 5px;
        bottom: 5px;
    }
    


    div.printPO { }
    div.printPO img.logo { max-width: 300px; max-height: 225px; float: left; }
    div.printPO div.titleBox { display: block; float: right; text-align: right; }
    div.printPO h1 { font-size: xxx-large; font-weight: bold; margin: 0; }
    div.printPO h2 { font-size: xx-large; font-weight: normal; margin: 0; }
    div.printPO table.poNumTable {  display: block; 
                                    float: right; 
                                    border-collapse: collapse; 
                                    margin-top: 30px; }
    div.printPO table th {  border: 1px solid black; 
                            padding: 5px 15px; 
                            background-color: #7A9D96; 
                            font-weight: bold; 
                            text-align: center; 
                            font-family: sans-serif;
                            font-size: large; }
    div.printPO table td {  border: 1px solid black; 
                            padding: 3px 5px; 
                            text-align: center; } 
    div.printPO div.infoBlock { 
                            display: block; 
                            width: 100%; }    
    
    div.printPO div.infoBlock div.left { 
                            display: block;
                            width: 45%; 
                            float: left; }
    div.printPO div.infoBlock div.right { 
                            display: block; 
                            width: 45%; 
                            float: right; }
    div.printPO div.infoBlock h3 { 
                            display: block; 
                            width: 100%; 
                            text-align: center; 
                            background-color: #7A9D96; 
                            padding: 5px 0px; 
                            font-weight: bold; 
                            font-family: sans-serif;
                            font-size: large; 
                            margin-bottom: 4px; }
    div.printPO div.infoBlock .name { 
                            font-weight: bold; 
                            font-size: large; 
                            display: block; 
                            margin-bottom: 3px; }
    div.printPO table .poTitle { font-size: x-large; }
    div.printPO table.items {   width: 100%;
                                border-collapse: collapse;
                                table-layout: auto;
                                margin: 40px 0px 100px 0px;}
    div.printPO table.items th { background-color: #7A9D96; }
    div.printPO table.items tr.hdg th { background-color: #4F4F4F; color: white; font-size: x-large; }
    div.printPO table.items .txtRight  { text-align: right; }
    div.printPO table.items .txtLeft   { text-align: left; }
    div.printPO table.items .txtCenter { text-align: center; }
    div.printPO table.items tr.total th { background-color: #f5f5f5; }
    div.printPO table.items .clear { background-color: none; border: 0px transparent; }
    div.printPO table.items .total { border-top: 4px solid black; }
    
    div.printPO table.auth {    width: 100%; 
                                border-collapse: collapse; 
                                table-layout: auto; 
                                margin: 0;}
    div.printPO table.auth tr.hdg th { background-color: #4F4F4F; color: white; font-size: large; }
    div.printPO .comments { padding: 0; border: 1px solid black; min-height: 125px; }
    div.printPO .comments h3 { margin: 0; }
    div.printPO .comments span { margin: 5px; display: block; }
    
    table.poAddresses { border-collapse: collapse; width: 100%; border: 0px transparent; margin: 20px 0px !important; table-layout: fixed; }
    table.poAddresses th { text-align: center; border: 0px transparent !important; padding: 4px !important; background-color: #7A9D96;  }
    table.poAddresses tr { border: 0px transparent !important; }
    table.poAddresses td { text-align: left !important; border: 0px transparent !important; padding: 0; vertical-align: top; }
    table.poAddresses td.spacer { width: 20px; }
    table.poAddresses h3 { margin: 0px !important; }
    
    @media print {
        div.footer {    display: block; 
                        position: absolute; 
                        bottom: 25px; right: 25px; 
                        font-size: small; 
                        font-style: italic; 
                        border-top: 1px solid black; 
                        width: 100%; 
                        text-align: right; }
    }
    
    
/* </editor-fold>*/   
/* <editor-fold defaultstate="collapsed" desc="Tables Formatting"> */
    /* <editor-fold defaultstate="collapsed" desc="General Tables Classes"> */ 
    .fixed { 
        table-layout: fixed; 
    }
    .alternate tr:nth-child(even) {
        background-color: #FFF;
    }
    .alternate tr:nth-child(odd) {
        background-color: #EDEDED;
    }
    .alignTop { 
        vertical-align: top; 
    }
    tr.boldRow { font-weight: bold; }
    tr.italicRow { font-style: italic; } 
    /* </editor-fold>*/
    /* <editor-fold defaultstate="collapsed" desc="results_table Table Setup"> */ 
    .results_table { 
        border-collapse: collapse; 
        border: 1px solid black; 
        width: 100%;
        margin-bottom: 20px;
        background-color: white; 
    }
    .results_table th { 
        background-color: #7A9D96; 
        font-weight: bold; 
        border: 1px solid black; 
        border-bottom: 4px solid #2a2a2a; 
    }
    .results_table td { 
        border: 1px solid black;
    }
    .results_table span { display: block; }
    .results_table input, .results_table select, .results_table textarea { display: block; width: 98%;  }
    .results_table input[type='radio'] { width: 20px; display: block; float: left; }
    /* </editor-fold>*/
    /* <editor-fold defaultstate="collapsed" desc="Opt-in table utilities"> */
        /* Every column's DATA on one line. Opt in with $t->addClass('nowrapCols').
           Stops TEXT wrapping only: .results_table span is display:block above, so a cell
           built from stacked spans still stacks. That is structure, not wrapping, and
           unpicking it here would re-flow cells that are meant to have several lines.

           Column titles are deliberately left free to wrap -- a two-word heading over a
           short value would otherwise set the column's width for every row. Said out loud
           rather than left to the default because white-space inherits, so a nowrap set
           on any ancestor would otherwise reach the headings. */
        table.nowrapCols td { white-space: nowrap; }
        table.nowrapCols th { white-space: normal; }

        /* One step down from the surrounding text, for tables carrying a lot of columns.
           Opt in with $t->addClass('smallerFont'). Form controls do not inherit font-size,
           so the DataTables search inputs in the header keep their own. */
        table.smallerFont th, table.smallerFont td { font-size: 0.875em; }
    /* </editor-fold>*/
    /* <editor-fold defaultstate="collapsed" desc="brief_table Setup"> */ 
        table.brief_table { width: 80%; display: table; margin: 5px auto 5px auto; border-collapse: collapse; }
        table.brief_table tr:nth-child(odd) { background-color: #CCCCCC; }
        table.brief_table tr:nth-child(even) { background-color: #f5f5f5; }
        table.brief_table tr.hdg { border-bottom: 3px solid black; background-color: #f5f5f5; font-size: large; }
        table.brief_table th { font-weight: bolder; text-align: center; padding: 1px 5px;  }
        table.brief_table td { padding: 1px 3px 1px 5px; }
    /* </editor-fold>*/
    /* <editor-fold defaultstate="collapsed" desc="brief_table Setup"> */ 
        table.short_table { max-width: 80%; display: table; margin: 5px auto; border-collapse: collapse; }
        table.short_table th { font-weight: bolder; text-align: center; padding: 1px 5px; border: 1px solid black; background-color: #7A9D96; }
        table.short_table td { padding: 1px 3px 1px 5px; border: 1px solid black; }
    /* </editor-fold>*/
    
    /* <editor-fold defaultstate="collapsed" desc="listTable"> */ 
        table.listTable { border-collapse: collapse; }
        table.listTable tr { border: 1px solid black; }
        table.listTable td { border: 0px transparent; padding: 0 5px; }
/* </editor-fold>*/
    
    .popIconMenuToggle {
        text-align: right;
        float: right;
    }

    /* DataTables per-column filter row (built by autoTable::dtAddBlankSearchRow).
       A bare text input carries a browser default width of about 20 characters, and
       because it sits in the header it sets a FLOOR on the column: a 5-character
       "TRA ID" column ends up as wide as its "Search TRA ID" box, which is where the
       dead space in these tables comes from. Letting the input track the column
       instead means column widths follow the data. */
    tr.searchRow td { padding: 1px 3px; }
    tr.searchRow input {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        font-size: 11px;
        padding: 2px 4px;
    }
    /* The TRA ID filter only ever holds a few digits, so it is pinned narrow on every
       table that offers it rather than tracking the column like the other filters.
       The [i] flag covers both heading spellings in use ("TRA ID" and "Tra ID"). */
    tr.searchRow input[placeholder='Search TRA ID' i] {
        width: 75px;
        box-sizing: border-box;
    }

    tr.borderBlack1 { border: 1px solid black; }
    tr.borderBlack1 td, tr.borderBlack1 th { border: 0 transparent; border-top: 1px solid black; border-bottom: 1px solid black; }
    tr.borderBlack1 td:first-child, tr.borderBlack1 th:first-child { border-left: 1px solid black; }
    tr.borderBlack1 td:last-child, tr.borderBlack1 th:last-child { border-right: 1px solid black; }
    tr.hdgRow td, tr.hdgRow th { background-color: #7A9D96; font-weight: bold; font-size: large; }
    .pad5 { padding: 5px; }


    table.divideLines tr td { border-bottom: 1px solid black; }
    table.divideLines tr:last-child td { border-bottom: 0px transparent; }
    table.collapse { border-collapse: collapse;}
    table.dataList tr td:first-child { padding-left: 15px; padding-right: 5px; font-size: small; } 
    table.dataList tr td:last-child { padding-right: 20px; padding-left: 5px; font-size: large; }
        
/* </editor-fold>*/
/* <editor-fold defaultstate="collapsed" desc="Transaction Parts"> */ 
    .transaction { 
        max-width: 95%; 
        background-color: #f5f5f5; 
        border: 3px solid #707070; 
        display: block; 
        margin: 10px auto 5px auto; 
        padding: 5px;
        position: relative;
        min-width: 650px;
    }
    .transaction.urgent { background-color: #ffcfcf; }
    .transaction .ui-button-text { height: 20px; }
    /* Tab labels across the top of a transaction (Info / Apprs / Vendor / Accounting Sync / ...).
       Scoped with > so tab boxes nested INSIDE a tab's content keep their own sizing. */
    .transaction > .ui-tabs > .ui-tabs-nav li a { font-size: 0.85em; padding: 0.4em 0.8em; }
    .transaction label { 
        display: block; 
        float: left; 
        font-weight: bold; 
        margin: 0 0 0 -2px ; 
        font-style: normal; 
        font-variant: normal; 
        font-size: medium; 
    } 
    .transaction .type { 
        display: block; 
        float: left; 
        padding: 0 0 0 10px; 
        
    }
    .transaction .type .line { display: block; clear: both; }
    .transaction .status { 
        display: block;
        margin: auto; 
        width: auto; 
        min-width: 100px;
        max-width: 250px;
        text-align: center; 
        border: 1px solid black;
        font-weight: bold; 
        font-variant: small-caps; 
        font-style: italic;
    }
    .transaction .meta { 
        display: block;
        float: right; 
        padding: 0 10px 0 0; 
        text-align: right;
    }
    .transaction .vendor { 
        clear: both; 
        display: block;
        float: left; 
        width: 74%; 
        font-weight: bold;
        font-size: large; 
        padding: 20px 0 0 0; 
    }
    .transaction .amount {
        display: block;
        width: 24%;
        padding: 20px 0 0 0;
        text-align: right;
        float: right;
        font-size: large;
        font-weight: bold;

    }

    .transaction .description { 
        width: 90%; 
        display: block;
        clear: both; 
        margin: 0 0 0 8px;
    }    
    .transaction .description textarea {
        width: 90%;
        display: block; 
        clear: both;
    }
    .transaction .amtLine { 
        width: 80%; 
        border: 1px solid #BEE6DE; 
        display: block; 
        margin: auto; 
        padding: 4px; 
    }
    .transaction .amtLine .coaCodesBlock {
        display: block; 
        float: left; 
    }
    .transaction .amtLine .amountBlock {
        display: block;
        float: right;
        text-align: right;
    }
    .transaction .amtLine .amountBlock input , .transaction .amtLine .amountBlock .editableNow, .transaction .amtLine .amountBlock .clickableEditNow { 
        clear: both; 
        display: block; 
        width: 100%;
        padding: 4px; 
    }
    .transaction .amtLine .classBlock { 
        clear: both; 
        display: block;
        float: left;
        margin: 5px 0 0 0; 
    }
    .transaction .amtLine .classBlock select { 
        clear: both;
        display: block;
        float: left;
        width: 350px;
    }
    .transaction .amtLine .commentBlock {
        display: block;
        float: left; 
        clear: both;
        margin: 5px 0 0 0; 
        max-width: 100%;
    }
    .transaction .amtLine .commentBlock input { 
        width: 100%; 
        clear: both; 
    }
    .transaction div.trans_id { 
        font-size: xx-large; 
        font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
        font-weight: bold; 
        color: #DBDBDB; 
        display: block; 
        float: right; 
        position: absolute; 
        right: 5px;
        bottom: 5px;
    }
    .transaction .invDetails { display: block; float: left; width: 25%; margin: 5px 0 0 8px; }
    .transaction .invDetails input {display: block; float: left; clear: both; font-family: Verdana, Arial, sans-serif; font-size: 1em;  padding: 5px 10px; height: 24px; width: 90%; }
    .transaction .invDetails label { display: block; float: left; font-weight: bold; margin: 0 0 0 -2px; font-style: normal; font-variant: normal; font-size: medium; }
    
    .amountsTable {
        width: 75%;
        border: 1px solid #707070; 
        border-collapse: collapse; 
        margin: auto;
        
    }
    table.infoBlockTable { 
        border-collapse: collapse; 
        display: table; 
        width: 85%; 
        margin: auto;
        position: relative;
    }
    table.infoBlockTable th { 
        text-align: right; 
        width: 25%;
    }
    table.infoBlockTable td:nth-child(2) {
        text-align: center;
    }
    table.infoBlockTable td:nth-child(3) {
        text-align: left;
    }
    table.infoBlockTable tr { 
        border-bottom: 1px black dashed; 
    }    
    .traMajorNote {
        position: absolute; 
        margin: -25px auto;
        line-height: 1;
        font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
        color: #DBDBDB; 
        font-size: 125px;
        content: attr(data-bg-text);
        display: block;
        width: 100%; 
        text-align: center;
     }
    .traStatusBar { 
        display: block;
        float: left;
        width: 200px;
        height: 41px;
        max-width: 100%;
        text-align: center;
        font-size: large; 
        vertical-align: middle;
        margin: 0 2px;                
    }
    .traStatusBar .statusText { 
        margin: 10px 2px;
        display: block;
    }
    
    .assignCOACategories { width: 95%; height: 95%; display: block; position: absolute; bottom: 0; }
    .assignCOACategories .droppable { display: block; background-color: #ffffe3; }
    .categoryHolder { width: 550px; margin: 0 10px 0 10px; height: 95%; border: 3px solid black; overflow-y: scroll; overflow-x: hidden; display: block; float: left; }
    .assignCOACategories  li { display: block; width: 475px; border: 1px solid gray; margin: 5px; padding: 2px; font-size: large; }
    .assignCOACategories li li { width: 425px; }
    .assignCOACategories li li li { width: 375px; }
    .assignCOACategories li li li li { width: 325px; }
    .assignCOACategories li li li li li { width: 275px; }
    .assignCOACategories li li li li li li { width: 225px; }
    .assignCOACategories li span.count { display: block; float: right; color: gray; margin: 0 3px; font-size: small; }
    .assignCOACategories .coaList { display: block; float: left; margin: 0 10px; height: 95%; border: 3px solid black; }
    .assignCOACategories .categoryAccountList li { border: none; margin: 0; padding: 0; font-size: x-small; border: 0px transparent;  }
    .infoBlock { display: block; width: 100%; } 
    .infoBlock label {  display: block; float: left; clear: both;  font-family: Verdana,Arial,sans-serif; font-weight: bolder; border-top: 1px dashed black; width: 250px; padding: 2px; margin:1px; text-align: right;  min-height: 24px; } 
    .infoBlock p { display: block; float: left; font-family: Verdana,Arial,sans-serif; font-weight: normal; padding: 2px 2px 2px 5px; margin: 1px;  min-height: 24px; } 
    .missingerror { background-color: red; color: yellow; padding: 1px 5px; margin: 0px 5px; }
    
/* </editor-fold>*/
/* <editor-fold defaultstate="collapsed" desc="Dashboard Settings"> */
/* One size for the whole dashboard: 14px. Two things keep their own size further
   down -- the figure on each stat tile (.dashStats .stat .data) and the widget card
   title bars (.dashGroup .blk .item > .title, still `large`). Headings are listed
   out because h1-h6 carry a UA font-size in em, so they would scale off the 14px
   instead of taking it; the same goes for any heading a widget renders in a card. */
.dashHeader, .dashStats, .dashGroup, .dashFooter { font-size: 14px; }
.dashHeader h1, .dashHeader h2, .dashHeader h3, .dashHeader h4, .dashHeader h5, .dashHeader h6,
.dashStats  h1, .dashStats  h2, .dashStats  h3, .dashStats  h4, .dashStats  h5, .dashStats  h6,
.dashGroup  h1, .dashGroup  h2, .dashGroup  h3, .dashGroup  h4, .dashGroup  h5, .dashGroup  h6,
.dashFooter h1, .dashFooter h2, .dashFooter h3, .dashFooter h4, .dashFooter h5, .dashFooter h6 { font-size: 14px; }
.dashHeader {
    display: block; 
    width: 100%; 
    text-align: center; 
    margin: 0;
    background-color: #FFFFFF;
    border-bottom: 12px solid var(--aceAccent, #BFE3DC);
}
.dashHeader h1, .dashHeader h2, .dashHeader h3, .dashHeader h4, .dashHeader p { margin: 0; }
.dashHeader h1 { font-size: 28px; }   /* "<name> Dashboard" -- the page's own heading */
.dashHeader h2 { font-size: 22px; font-weight: normal; }   /* the entity name under the heading */
/* Stats bar -- each stat is its own small card, laid out on a grid that reflows
   with the window. auto-fit + minmax gives as many equal columns as will fit, so
   the tiles are always the same size as each other however wide the screen is
   (a content-sized flex row made them all different widths and left ragged gaps).
   The min(...) is what keeps a phone-width screen to one full-width tile rather
   than overflowing the page: a track can never be asked to be wider than the row.

   The 140px minimum is what sets the wrap point: a column costs 140px + the 10px
   gap, so eight tiles fit from roughly 1200px of window upwards. Raise it and the
   last tile drops to a row of its own on smaller laptops. auto-fit (not auto-fill)
   then collapses the tracks nothing landed in, so the tiles that ARE there spread
   out to fill the row instead of huddling at 140px with dead space beside them --
   max-width keeps that from stretching a two-tile dashboard across the monitor. */
.dashStats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: 10px;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    background-color: #FFFFFF;
    margin: 0;
    padding: 10px;
    clear: both;
}
.dashStats > .clearfix { display: none; }
.dashStats .stat {
    /* Column so the footer can be pinned to the bottom -- tiles in a row are
       equal height, and the footers then line up across the row. */
    display: flex;
    flex-direction: column;
    float: none;
    box-sizing: border-box;
    min-width: 0;               /* a grid item defaults to min-content wide; this lets it shrink */
    max-width: 320px;           /* stops a 2-3 tile dashboard stretching each one across the screen */
    margin: 0;                  /* the grid gap does the spacing now */
    padding: 8px 11px;
    background-color: white;
    border: 1px solid #D8E2E0;
    border-left: 4px solid var(--aceAccent, #7A9D96);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    overflow-wrap: break-word;  /* a long word wraps instead of widening the tile */
    container-type: inline-size;/* lets .data size itself against the tile -- see below */
}
.dashStats .stat p { margin: 0; padding: 0; }
/* Every title occupies two lines whether it needs them or not, so the figure and
   the footer below it start at the same height on every tile in the row. A title
   long enough to need a third line still gets one -- this is a floor, not a clamp,
   because truncating a stat's name would be worse than one tile running deeper. */
.dashStats .stat .top {
    font-size: 14px;
    color: #4f4f4f;
    line-height: 1.2;
    min-height: 2.4em;          /* 2 lines x line-height */
}
/* The figure is never allowed to wrap -- "$13,690.34" broken across two lines
   reads as two numbers.
   It is sized against the TILE (cqi), not the viewport, because those pull in
   opposite directions here: a wider window fits more columns, which makes each
   tile NARROWER, so a vw-based figure grows exactly when it has less room and
   the longest amounts overflow their card. Tiles in a row are all the same
   width, so this still renders every figure at the same size.
   The plain rem above is the fallback for anything too old for container units
   (pre-2023 browsers) -- it drops the declaration it can't parse and keeps that. */
.dashStats .stat .data {
    font-size: 1.2rem;
    font-size: clamp(0.95rem, 16cqi, 1.5rem);
    color: black;
    font-weight: bolder;
    line-height: 1.15;
    margin: 1px 0 3px 0;
    white-space: nowrap;
}
.dashStats .stat .bottom { font-size: 14px; color: #707070; line-height: 1.25; margin-top: auto; }
/* First child kept its own rule when the tiles were divider-separated; now it is a card like the rest. */
.dashStats .stat:first-child { border: 1px solid #D8E2E0; border-left: 4px solid var(--aceAccent, #7A9D96); }
.dashStats .stat[onclick] { cursor: pointer; }
.dashStats .stat[onclick]:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.14); }
/* Deferred (AJAX-loaded) tiles carry an inline display/float, so centre the
   spinner with text-align rather than flex -- the inline style would win. */
.dashStats .stat.replaceDshBrd { text-align: center; }
.dashStats .stat.replaceDshBrd img { max-width: 100%; height: auto; }
@media (max-width: 600px) {
    /* Phone widths: give the content the space the chrome was using. */
    .dashStats { gap: 8px; padding: 8px; }
    .dashStats .stat { padding: 8px 10px; }
}

/* Widget groups -- a light board that the widget cards sit on. Groups no longer
   render as alternating full-width bands; each widget is its own card instead. */
.dashGroup {
    display: flex;
    flex-wrap: wrap;
    /* flex-start, NOT stretch: each card is only as tall as its own content, so
       expanding/collapsing one card can't add blank space to its neighbours. */
    align-items: flex-start;
    box-sizing: border-box;
    clear: both;
    margin: 0;
    padding: 4px 6px;
    background-color: #FFFFFF;
    border-bottom: 0 none;
}
.dashGroup:nth-child(odd) { background-color: #FFFFFF; }
.dashGroup > .clearfix { display: none; }
.dashGroup > .title {
    font-size: 14px;
    text-align: center;
    display: block;
    flex: 0 0 100%;
    width: 100%;
    margin: 2px 0;
}
.dashGroup .blk {
    display: flex;
    float: none;
    background-color: unset;
    box-sizing: border-box;
    height: auto;
}
.googleChartHolder { margin: 5px; padding: 5px;  }
.dashGroup .blk .item {
    display: block;
    flex: 1 1 auto;
    box-sizing: border-box;
    background-color: white;
    border: 1px solid #D8E2E0;
    margin: 8px;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    height: auto;
    padding: 12px 14px;
}
.dashGroup .blk .item:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.14); }
/* Card header -- full-bleed across the top of the card, and the collapse control. */
.dashGroup .blk .item > .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: large;
    font-weight: bold;
    color: var(--aceAccent2Text, #2F4F4A);
    margin: -12px -14px 10px -14px;
    padding: 8px 14px;
    background-color: var(--aceAccent2, #F7FAF9);
    border-bottom: 1px solid #E3EAE8;
    border-radius: 9px 9px 0 0;
}
/* The title bar is the drag handle for repositioning the card. */
.dashGroup .blk .item > .title { cursor: move; }
.dashGroup .blk .item > .title > .titleText { flex: 1 1 auto; }
.dashGroup .blk .item > .title > .titleText[onclick] { cursor: pointer; }
.dashGroup .blk .item > .title > .titleText[onclick]:hover { text-decoration: underline; }
.dashGroup .blk .item > .title:hover { background-color: #EDF4F2; }
.dashGroup .blk .item > .title .dshCardToggle {
    flex: 0 0 auto;
    cursor: pointer;
    color: var(--aceAccent, #7A9D96);
    font-size: 14px;
    line-height: 1;
    padding: 2px 2px 2px 8px;
}
.dashGroup .blk .item > .title .dshCardToggle i { display: inline-block; transition: transform 0.15s ease; }
.dashGroup .blk .item .itemBody > .footer { margin: 10px -14px -12px -14px; padding: 6px 14px; border-top: 1px solid #E3EAE8; color: #707070; font-size: 14px; }

/* Collapsed: only the title bar remains, and it becomes the whole card. */
.dashGroup .blk .item.cardCollapsed > .itemBody { display: none; }
.dashGroup .blk .item.cardCollapsed > .title {
    margin-bottom: -12px;
    border-bottom: 0 none;
    border-radius: 9px;
}
.dashGroup .blk .item.cardCollapsed > .title .dshCardToggle i { transform: rotate(180deg); }
/* Deferred (AJAX-loaded) widgets: centre the spinner in the space the card will occupy. */
.dashGroup .blk.replaceDshBrd { align-items: center; justify-content: center; min-height: 140px; }
/* ...unless the user has that card collapsed -- then it only needs a title bar's worth. */
.dashGroup .blk.replaceDshBrd.cardCollapsed { min-height: 40px; }
.dashGroup .blk.replaceDshBrd.cardCollapsed img { max-height: 28px; width: auto; }

/* An empty row takes up no space until a drag starts, then becomes a visible
   "start a new row" drop zone. Without these rows, cards could only ever be
   moved between the rows the dashboard already built. */
.dashGroup.dshEmptyRow { padding: 0 6px; }
.dashGroup .dshRowHint { display: none; }
body.dshDragging .dashGroup.dshEmptyRow { padding: 6px; }
body.dshDragging .dashGroup.dshEmptyRow .dshRowHint {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex: 1 1 100%;
    min-height: 54px;
    margin: 0 8px;
    border: 2px dashed var(--aceAccent, #A9C6C0);
    border-radius: 10px;
    background-color: #EAF1EF;
    color: var(--aceAccent, #7A9D96);
    font-size: 14px;
}
/* Once a card is hovering over the row, the placeholder says it better than the hint. */
body.dshDragging .dashGroup.dshEmptyRow:has(.dshCardPlaceholder) .dshRowHint { display: none; }

/* Dashboard footer: reset control on the left, the school's logo centred.
   The two .dashFootSide cells are equal-width, which is what keeps the logo in
   the true middle of the page rather than the middle of the leftover space. */
.dashFooter {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    clear: both;
    padding: 6px 14px 12px 14px;
    background-color: #FFFFFF;
    text-align: left;
}
.dashFooter .dashFootSide { flex: 1 1 0; min-width: 0; }
.dashFooter .dashFootLogo { flex: 0 0 auto; text-align: center; padding: 0 12px; }
.dashFooter .dashFootLogo img {
    display: inline-block;
    height: 100px;
    max-width: 100%;
    width: auto;
    opacity: 0.9;
    transition: opacity 0.15s ease;
}
/* Linked to the school's website (Entity Settings -> Appearance -> Website). */
.dashFooter .dashFootLogo a { display: inline-block; text-decoration: none; border: 0 none; }
.dashFooter .dashFootLogo a img { cursor: pointer; }
.dashFooter .dashFootLogo a:hover img { opacity: 1; }
.dashFooter .dshResetLayout { color: var(--aceAccent, #7A9D96); font-size: 14px; cursor: pointer; }
.dashFooter .dshResetLayout:hover { color: #4F4F4F; text-decoration: underline; }

@media (max-width: 700px) {
    /* Narrow screens: stack the logo under the reset link instead of squeezing both. */
    .dashFooter { flex-wrap: wrap; justify-content: center; }
    .dashFooter .dashFootSide { flex: 1 1 100%; text-align: center; }
    .dashFooter .dashFootLogo { flex: 1 1 100%; margin-top: 8px; }

    /* Phones: pull the top-bar logo over to the left, next to the menu button.
       header.php centres it with an inline "margin: auto", so this needs !important to
       win. Floating rather than just zeroing the left margin matters: the logo is a
       display:block img, and a block box does not shrink away from the floated
       hamburger -- left-aligning it any other way slides it underneath the menu icon. */
    #topBar #topBarLogo { float: left !important; margin: 0 0 0 6px !important; }

    /* Phones: keep the header buttons on a single row.
       #topBarRight is bottom-anchored (position:absolute; bottom:0), so when its floated
       contents run out of width the overflow line grows UPWARD and the buttons get clipped
       off the top of the bar rather than simply stacking. Laying it out as a nowrap flex row
       removes the wrap entirely: the 40px buttons are fixed (flex: 0 0 auto) and the
       name/organization label is the only thing that gives, shrinking and ellipsising.
       The order values reproduce the float order the wide layout produces
       (name, info, change-org, logout, settings) so nothing jumps around at the breakpoint;
       row-reverse inside the list stands in for the "li { float: right }" that reverses it.
       max-width keeps the row from ever sliding left over the logo. */
    #topBar #topBarRight { display: flex; flex-wrap: nowrap; align-items: center;
                           max-width: calc(100% - 150px); }
    #topBar #topBarRight > div { order: 0; flex: 0 1 auto; min-width: 0; float: none;
                                 margin: 0 5px 0 0; overflow: hidden; white-space: nowrap;
                                 text-overflow: ellipsis; }
    #topBar #topBarRight > #sysInfoWrap { order: 1; flex: 0 0 auto; }
    #topBar #topBarRight > a { order: 2; flex: 0 0 auto; }
    #topBar #topBarRight > ul { order: 3; flex: 0 0 auto; display: flex; flex-wrap: nowrap;
                                flex-direction: row-reverse; float: none; }
    #topBar #topBarRight > ul > li { float: none; flex: 0 0 auto; }

    /* Phones: footer on one row -- shortcuts, then the copyright, then the search pinned
       right. .copyright is normally an absolutely positioned 450px box centred with a
       -225px margin; at phone width that box is wider than the screen, so it hangs off
       both edges and lands on top of the search field. Putting it back in the flow both
       left-aligns it and takes it off the search box. Same nowrap flex reasoning as the
       header: the fixed-size controls hold their size and the copyright is the only item
       allowed to give. */
    #footerBar { display: flex; flex-wrap: nowrap; align-items: center; }
    #footerBar #footerShortcuts { flex: 0 0 auto; float: none; }
    #footerBar .copyright { position: static; top: auto; bottom: auto; left: auto;
                            width: auto; margin: 0 0 0 6px; display: block;
                            flex: 0 1 auto; min-width: 0; text-align: left;
                            overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    /* Half width (250px -> 125px) so the search shares the bar rather than forcing a
       second line. The input keeps its float so it stays beside the Go button. */
    #footerBar #systemSearchTool { flex: 0 0 auto; float: none; margin-left: auto; }
    #footerBar #mainSystemSearch { width: 125px; }
}

/* Drag and drop: the gap the card will land in, and the card being dragged. */
.dashGroup .dshCardPlaceholder {
    box-sizing: border-box;
    margin: 8px;
    border: 2px dashed #A9C6C0;
    border-radius: 10px;
    background-color: #E7EFED;
}
.dashGroup .blk.ui-sortable-helper { z-index: 900; }
.dashGroup .blk.ui-sortable-helper .item { box-shadow: 0 6px 16px rgba(0,0,0,0.22); }
.col1-3 { max-width: 100%; min-width: 33%; width: 33%; }
.col2-3 { max-width: 100%; min-width: 66%; width: 66%; }
.col3-3 { width: 100%; }
.col1-2 { max-width: 100%; min-width: 50%; width: 50%; }
.col2-2 { width: 100%; }
.col1-4 { max-width: 100%; min-width: 24%; width: 24%; }
.col2-4 { max-width: 100%; min-width: 49%; width: 49%; }
.col3-4 { max-width: 100%; min-width: 74%; width: 74%; }
.col4-4 { width: 100%; }

/* Narrow screens: dashboard cards stack full width instead of squeezing into columns.
   Scoped to .dashGroup so the generic colN-N classes are untouched elsewhere. */
@media (max-width: 900px) {
    .dashGroup .blk { min-width: 100%; width: 100%; max-width: 100%; }
}

.bgColor1 { background-color: #f5f5f5;}
.bgColor2 { background-color: #ffffe3;}
.bgColor3 { background-color: #ddffee;}
.bgColor4 { background-color: #7A9D96;}
.bgColor5 { background-color: #707070;}
.bgColor6 { background-color: #4F4F4F;}

/* </editor-fold>*/
/* <editor-fold defaultstate="collapsed" desc="Detail Groups"> */ 
    .detailGroup { 
        display: block; 
        float: left; 
        border: 1px solid black; 
        padding: 0px; 
        width: 150px; 
    }
    .detailGroup .label { 
        display: block;
        background-color: #7A9D96; 
        border: 0 0 1px 0 solid black; 
        text-align: center;
        font-weight: bold;
        clear: both; 
        padding: 2px 4px 1px 4px; 
    }
    .detailGroup .info {
        display: block; 
        background-color: white; 
        clear: both; 
        padding: 2px 4px 2px 4px; 
        min-height: 23px; 
    }
/* </editor-fold>*/
/* <editor-fold defaultstate="collapsed" desc="Budget Formats"> */ 
    table.budget_table { 
        border-collapse: collapse; 
        table-layout: fixed; 
        width: 95%; 
        border: 3px solid black; 
        margin: 5px auto; 
    }
    table.budget_table td, table.budget_table tr, table.budget_table th { 
        min-width: 15px; 
    }
    table.budget_table td { 
        border: 1px solid black; 
        text-align: right; 
        font-size: small;
    }
    table.budget_table th.space1 { }
    table.budget_table th.lvl1.income { background-color: #6471b6; text-align: left; font-size: x-large; font-weight: bolder; }
    table.budget_table th.lvl2.income { background-color: #727dbc; text-align: left; font-size: large; font-weight: bold; }
    table.budget_table th.lvl3.income { background-color: #868ec6; text-align: left; font-size: large;}
    table.budget_table th.lvl4.income { background-color: #9ea3d2; text-align: left; }
    table.budget_table th.lvl5.income { background-color: #b9bcdf; text-align: left; }
    table.budget_table th.lvl6.income { background-color: #d5d6ec; text-align: left; }
    
    table.budget_table th.lvl1.expense { background-color: #ffa40a; text-align: left; font-size: x-large; font-weight: bolder; }
    table.budget_table th.lvl2.expense { background-color: #ffb02b; text-align: left; font-size: large; font-weight: bold; }
    table.budget_table th.lvl3.expense { background-color: #ffc057; text-align: left; font-size: large;}
    table.budget_table th.lvl4.expense { background-color: #ffd286; text-align: left; }
    table.budget_table th.lvl5.expense { background-color: #ffe3b5; text-align: left; }
    table.budget_table th.lvl6.expense { background-color: #fff3de; text-align: left; }
    
    table.budget_table th:not(:empty) { border-top: 1px solid black; }
    table.budget_table th { border-left: 1px solid black; }
    table.budget_table td.annual { border-left: 3px solid black; border-right: 3px solid black; font-weight: bold; background-color: #ffffe3; font-size: medium; }
    table.budget_table input { width: 95%; margin: auto; color: blue; font-weight: bold; background-color: yellow; }
    table.budget_table th.detailRow span.accountDescription { display: block; clear: both; font-size: x-small; font-style: italic; overflow: hidden; white-space: nowrap; font-weight: normal; }
    table.budget_table th.labelRow span.accountDescription { font-style: italic; font-weight: normal;}
    table.budget_table tr.total.income { border-top: 4px solid black; } 
    table.budget_table td.total { font-size: large; font-weight: bold; }
/* </editor-fold>*/
/* <editor-fold defaultstate="collapsed" desc="Help Screens"> */
.help_box { margin: 10px; display: block; max-width: 752px; border: 1px solid black; background-color: #dcdcdc; }
.help_box h2 { text-align: center; }

/* Modern Help page ------------------------------------------------------ */
.hlpIconLink { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 4px; color: #7c8697; cursor: pointer; text-decoration: none; border-radius: 50%; font-size: 10px; vertical-align: middle; line-height: 1; }
.hlpIconLink:hover { color: #2e74a7; background: #eef4fb; }
.hlpIconLink i { line-height: 1; font-size: inherit; }
/* The help tab strip and every tab body render in Arial. jQuery UI puts a font-family
   on .ui-widget -- and again on the form controls inside it -- and the CDN theme loaded
   after the local one is not Arial, so stating it on the wrapper alone is not enough. */
.hlpTabs,
.hlpTabs .ui-widget,
.hlpTabs .ui-widget input,
.hlpTabs .ui-widget select,
.hlpTabs .ui-widget textarea,
.hlpTabs .ui-widget button { font-family: Arial, Helvetica, sans-serif; }
/* Body text in every tab is 14px. Headings are pinned in rem (root-relative) so they
   keep the sizes they render at today instead of scaling down off the 14px -- the
   values are the browser's own h1-h6 defaults. Tabs whose content sets its own sizes
   (the Documentation tab's .hlpDoc headings, the Zoho ticket form) are more specific
   and keep theirs. */
.hlpTabs, .hlpTabs .ui-widget { font-size: 14px; }
.hlpTabs h1 { font-size: 2rem; }
.hlpTabs h2 { font-size: 1.5rem; }
.hlpTabs h3 { font-size: 1.17rem; }
.hlpTabs h4 { font-size: 1rem; }
.hlpTabs h5 { font-size: 0.83rem; }
.hlpTabs h6 { font-size: 0.67rem; }
.hlpTabs .ui-tabs .ui-tabs-nav li { font-size: 14px; height: auto; line-height: normal; padding: 0; }
.hlpTabs .ui-tabs .ui-tabs-nav li a { padding: 6px 14px; font-size: 14px; }
.hlpTabs .ui-tabs .ui-tabs-nav li i { font-size: 13px; margin-right: 3px; }
/* Support Ticket tab: the Zoho web-to-case form ships its own <style> block (.zsFontClass
   at 13px) which is injected into the page after this file, so matching it needs more
   specificity, not just a later rule. Form controls are listed out because they do not
   inherit font settings from their container by default. */
.hlpTabs #zohoSupportWebToCase,
.hlpTabs #zohoSupportWebToCase table,
.hlpTabs #zohoSupportWebToCase td,
.hlpTabs #zohoSupportWebToCase span,
.hlpTabs #zohoSupportWebToCase strong,
.hlpTabs #zohoSupportWebToCase input,
.hlpTabs #zohoSupportWebToCase select,
.hlpTabs #zohoSupportWebToCase textarea,
.hlpTabs #zohoSupportWebToCase button,
.hlpTabs #zohoSupportWebToCase .zsFontClass { font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
/* Legal Notices policy list (EULA, Terms, Privacy, Cookie, Disclaimer). Stated on the
   list itself, not just inherited, because this block is also rendered outside the tabs. */
.hlpLegal, .hlpLegal li, .hlpLegal a { font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
/* Help body text is 14px on both surfaces -- .hlpDoc is the root of the full help page
   AND of the help popup (which adds .hlpTopicPop). Titles and headings are unaffected:
   every one of them below carries its own px size (26 / 22 / 20 / 17 / 15), as does the
   popup's title bar (.popped.poppedHelp .hlpTopicPopHeader). */
.hlpDoc { max-width: 1100px; margin: 0 auto; font-size: 14px; font-family: Arial, Helvetica, sans-serif; }
.hlpDoc .hlpHeader { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #d0d4dc; margin-bottom: 12px; }
.hlpDoc .hlpHeader h1 { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 26px; color: #16193B; flex: 1; }
.hlpDoc .hlpHeader .hlpSearch { position: relative; flex: 0 1 320px; }
.hlpDoc .hlpHeader .hlpSearch i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #7c8697; pointer-events: none; }
.hlpDoc .hlpHeader .hlpSearch input { width: 100%; padding: 7px 10px 7px 32px; border: 1px solid #c9cfda; border-radius: 20px; font-size: 14px; background: #fff; box-sizing: border-box; }
.hlpDoc .hlpHeader .hlpSearch input:focus { outline: none; border-color: #2e74a7; box-shadow: 0 0 0 3px rgba(46,116,167,.15); }

.hlpDoc .hlpBody { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: start; }
.hlpDoc .hlpTOC { min-width: 0; max-height: calc(100vh - 200px); overflow-y: auto; position: sticky; top: 10px; padding: 8px; border-right: 1px solid #e2e5ec; font-size: 14px; }
.hlpDoc .hlpTOC ul { list-style: none; margin: 0; padding-left: 12px; }
.hlpDoc .hlpTOC > ul { padding-left: 0; }
.hlpDoc .hlpTOC li { margin: 1px 0; }
.hlpDoc .hlpTOC .tocRow { display: flex; align-items: center; padding: 4px 6px; border-radius: 4px; cursor: pointer; color: #2a2a2a; font-size: 14px; line-height: 1.35; text-decoration: none; border-left: 2px solid transparent; }
.hlpDoc .hlpTOC a.tocRow { color: #2a2a2a; text-decoration: none; }
.hlpDoc .hlpTOC .tocRow:hover { background: #eef4fb; }
.hlpDoc .hlpTOC .tocRow.active { background: #e3ecf6; color: #16193B; font-weight: bold; border-left-color: #2e74a7; }
.hlpDoc .hlpTOC a.tocRow:hover, .hlpDoc .hlpTOC a.tocRow:focus { text-decoration: none; color: #16193B; }
.hlpDoc .hlpTOC .tocRow.hasKids > .tocCaret { display: inline-block; width: 14px; margin-right: 2px; font-size: 10px; color: #7c8697; text-align: center; }
.hlpDoc .hlpTOC .tocRow:not(.hasKids) > .tocCaret { display: inline-block; width: 14px; margin-right: 2px; }
.hlpDoc .hlpTOC .tocRoot > li > .tocRow.hasKids > .tocCaret { width: 18px; font-size: 14px; color: #4a5060; }
.hlpDoc .hlpTOC .tocRow.hasKids.open > .tocCaret::before { content: '\25BE'; }
.hlpDoc .hlpTOC .tocRow.hasKids:not(.open) > .tocCaret::before { content: '\25B8'; }
.hlpDoc .hlpTOC .tocLabel { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.hlpDoc .hlpTOC li.tocHidden { display: none; }
.hlpDoc .hlpTOC li.collapsed > ul { display: none; }
.hlpDoc .hlpTOC .tocEmpty { padding: 20px 6px; color: #7c8697; font-style: italic; font-size: 14px; text-align: center; }

.hlpDoc .hlpContent { min-width: 0; padding: 4px 6px 60px 14px; scroll-behavior: smooth; }
.hlpDoc .hlpContent .hlpIntro { padding: 6px 0 18px 0; color: #4a5060; font-size: 14px; border-bottom: 1px solid #eef1f5; margin-bottom: 12px; }
.hlpDoc .hlpContent .hlpIntro h2 { margin: 0 0 6px 0; font-family: Arial, Helvetica, sans-serif; color: #16193B; font-size: 20px; }
.hlpDoc .hlpContent .hlpTopic { padding-top: 8px; margin-bottom: 26px; scroll-margin-top: 20px; }
.hlpDoc .hlpContent .hlpTopic.hlpHilite { animation: hlpHiliteFlash 1.6s ease-out 1; }
@keyframes hlpHiliteFlash { 0% { background: #fff3a8; } 100% { background: transparent; } }
.hlpDoc .hlpContent .hlpTopic h2, .hlpDoc .hlpContent .hlpTopic h3.hlpSection { margin: 0 0 6px 0; font-family: Arial, Helvetica, sans-serif; color: #16193B; border-bottom: 2px solid #f0d75f; padding-bottom: 6px; scroll-margin-top: 20px; }
.hlpDoc .hlpContent .hlpTopic h2 { font-size: 22px; }
.hlpDoc .hlpContent .hlpTopic h3.hlpSection { font-size: 17px; border-bottom-width: 1px; }
.hlpDoc .hlpContent .hlpTopic h4.hlpSection { font-size: 15px; color: #2a2a2a; margin: 8px 0 4px 0; }
.hlpDoc .hlpContent .hlpTopic .hlpCrumb { color: #7c8697; font-size: 12px; margin-bottom: 4px; }
.hlpDoc .hlpContent .hlpTopic .hlpBodyText { line-height: 1.55; margin: 8px 0; color: #23262d; }
/* Every image an author puts in a help topic is framed, wherever that topic is being
   shown -- the full documentation page and the help popup both wrap their content in
   .hlpBodyText / .hlpEmbed, so scoping to those covers both (and any later renderer)
   while leaving the help chrome's own icons alone. Screenshots are the bulk of help
   content and they need an edge: most are light-backgrounded and otherwise bleed into
   the page. max-width keeps a full-resolution screenshot inside its column. */
.hlpDoc .hlpBodyText img,
.hlpDoc .hlpEmbed img {
    max-width: 100%;
    height: auto;
    padding: 3px;
    background-color: #FFFFFF;
    border: 1px solid #C0CECA;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.hlpDoc .hlpBodyText img:hover,
.hlpDoc .hlpEmbed img:hover { border-color: var(--aceAccent, #7A9D96); }
.hlpDoc .hlpContent .hlpTopic .hlpEmbed { margin: 12px 0; text-align: center; }
.hlpDoc .hlpContent .hlpTopic .hlpEmbed iframe, .hlpDoc .hlpContent .hlpTopic .hlpEmbed video { max-width: 100%; border-radius: 6px; }
.hlpDoc .hlpContent .hlpTopic .hlpLink { margin: 12px 0; }
.hlpDoc .hlpContent .hlpTopic .hlpLink a { color: #2e74a7; word-break: break-all; }
.hlpDoc .hlpContent .hlpEmptyState { padding: 40px 20px; text-align: center; color: #7c8697; }
.hlpDoc .hlpContent .hlpEmptyState i { font-size: 44px; color: #c9d1e0; display: block; margin-bottom: 8px; }

/* Admin controls */
.hlpDoc .hlpAdminBtn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; margin-left: 8px; background: #2e74a7; color: #fff; border: 1px solid #24608a; border-radius: 4px; text-decoration: none; font-size: 13px; cursor: pointer; }
.hlpDoc .hlpAdminBtn:hover { background: #24608a; color: #fff; }
.hlpDoc .hlpAdminBtn.hlpBtnPrimary i { font-size: 14px; }
.hlpDoc .hlpTopic { position: relative; }
.hlpDoc .hlpTopic .hlpTopicTools { position: absolute; top: 6px; right: 6px; display: flex; gap: 2px; background: rgba(255,255,255,0.92); border: 1px solid #d0d4dc; border-radius: 4px; padding: 2px 4px; opacity: 0; transition: opacity .15s; }
.hlpDoc .hlpTopic:hover .hlpTopicTools, .hlpDoc .hlpTopic .hlpTopicTools:hover { opacity: 1; }
.hlpDoc .hlpTopic .hlpToolBtn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 22px; color: #4a5060; cursor: pointer; border-radius: 3px; text-decoration: none; font-size: 13px; }
.hlpDoc .hlpTopic .hlpToolBtn:hover { background: #eef4fb; color: #16193B; }
.hlpDoc .hlpTopic .hlpToolBtn.hlpToolDanger:hover { background: #fde7e7; color: #b8272c; }
.hlpDoc .hlpTopic.hlpInactive { opacity: 0.55; }
.hlpDoc .hlpTopic.hlpInactive:hover { opacity: 1; }
.hlpDoc .hlpTopic .hlpBadge { font-size: 11px; font-weight: normal; padding: 2px 6px; border-radius: 3px; vertical-align: middle; margin-left: 8px; }
.hlpDoc .hlpTopic .hlpBadgeHidden { background: #fff3cd; color: #7c6c1a; border: 1px solid #ffd94a; }
.hlpDoc .hlpTopic .hlpAdminHint { padding: 8px 12px; background: #f5f7fa; border-left: 3px solid #c9d1e0; color: #7c8697; font-size: 12px; font-style: italic; margin-top: 8px; border-radius: 3px; }
.hlpDoc .hlpTOC li.hlpInactive > .tocRow .tocLabel { color: #a4a4a4; font-style: italic; }

@media (max-width: 640px) {
    .hlpDoc .hlpBody { grid-template-columns: 1fr; }
    .hlpDoc .hlpTOC { position: static; max-height: none; border-right: none; border-bottom: 1px solid #e2e5ec; padding-bottom: 12px; margin-bottom: 12px; }
    .hlpDoc .hlpHeader { flex-wrap: wrap; }
    .hlpDoc .hlpHeader .hlpSearch { flex: 1 1 100%; }
}
/* </editor-fold>*/
/* <editor-fold defaultstate="collapsed" desc="hoverInfoBox Styles"> */ 
    #hoverInfoBox { 
        display: none; 
        width: 500px; 
        min-height: 50px; 
        background-color: rgba(79, 79, 79, .95);
        border: 3px solid black; 
        border-radius: 5px 15px 5px 0px; 
        color: white; 
        position: absolute; 
        bottom: 10px; 
        left: 10px; 
        padding: 5px; 
        z-index: 999; 
    }
    #hoverInfoBox .label { display: block; float: left; clear: both; min-width: 100px; text-align: right; margin: 5px 5px 0 0; color: #7A9D96; font-weight: bolder;  } 
    #hoverInfoBox .info { display: table-cell; margin: 2px 0 6px 5px; padding: 5px 0 0 0; text-align: left; }
    #hoverInfoBox .clickableEditNow { color: #dbd6fd; }
    .showHoverBox { color: red; }
/* </editor-fold>*/
/* <editor-fold defaultstate="collapsed" desc="Student Registration System Related Styles"> */ 
    /* <editor-fold defaultstate="collapsed" desc="Custom Search Forms"> */ 
    div.srSearchSetup { border: solid 2px black; border-radius: 15px; background-color: #ffffe3; padding: 10px;  width: 80%; margin: 10px auto;}
    div.srSearchSetup .centerButtons { display: table; margin: 2px auto; }
    div.srSearchSetup h2 { text-align: center; margin: 2px auto;}
    div.srSearchSetup input, div.srSearchSetup textarea, div.srSearchSetup select { width: 95%;  }
    div.srSearchSetup label { font-weight: bold; font-style: italic; }
    div.srSearchSetup label::after { content: ""; display: block; clear: both; }
    div.srSearchSetup .divider { display: block; text-align: center; font-weight: bold; font-style: italic; margin: 10px 0 0 0; }
    div.srSearchSetup .divider {width: 100%; text-align: center; border-bottom: 1px solid #707070; line-height: 0.1em; margin: 10px 0 20px; }
    div.srSearchSetup .divider span { background:#ffffe3; padding:0 10px; }                                
    div.srSearchCritiera .divider span { background:#f5f5f5; }                                
    div.srSearchCritiera { border: solid 2px black; border-radius: 15px; background-color: #f5f5f5; padding: 10px;  width: 80%; margin: 10px auto; }
    div.srSearchCritiera  h3 { margin: 3px auto 2px auto; text-align: center; width: 100%; }
    div.srSearchCritiera  .srSrchOpt { display: block; width: 25%; float: left; padding: 4px; }
    div.srSearchCritiera  .srSrchOpt label::after { content: ""; display: block; clear: both; }
    div.srSearchSetup #sortableavail, div.srSearchSetup #sortableuse{ background: transparent; max-width: 200px; padding: 0; min-height: 150px; }
    div.srSearchSetup #sortableavail li, div.srSearchSetup #sortableuse li { font-size: 1em; padding: 2px; width: 175px; margin 4px 0 4px 2px; }
    
    /* </editor-fold>*/
    
    div.srMergeDupsTable { border: 3px solid #4F4F4F; border-radius: 8px; padding: 5px; margin: 15px; background-color: #ffffe3; }
    div.srMergeDupsTable table { border-collapse: collapse; border: 2px solid #707070; margin: 0 auto; background-color: #f5f5f5; } 
    div.srMergeDupsTable td { min-width: 175px; padding: 2px; border: 1px solid #7A9D96; text-align: center;  }
    div.srMergeDupsTable td:nth-child(even) { background-color: #ddffee; }
    div.srMergeDupsTable ul { padding-inline-start: 5px; text-align: left; }
    div.srMergeDupsTable li { text-align: left; }
    
    table.srMergeDupsTable td input:not([type=checkbox]):not([type=radio]) { width: 100%; }
    table.srMergeDupsTable td select { width: 100%; }
    table.srMergeDupsTable td textarea { width: 100%; height: 100px; }
    
    table.srMergeDupsTable input[type=checkbox] { float: left; margin: 2px; }
    table.srMergeDupsTable input[type=radio] { float: left; margin: 2px; }

    .stRegPublic .srpplid {
        font-size: xx-large;
        font-family: arial;
        font-weight: bold;
        color: #DBDBDB;
        display: block;
        float: right;
        position: relative;
        right: 5px;
        bottom: -5px;
        margin: 0 10px -30px 0;
    }
/* </editor-fold>*/
/* <editor-fold defaultstate="collapsed" desc="Student Registration System Related Styles"> */ 
    .bgYellow { background-color: yellow; }
    .bgPaleYellow { background-color: #FEFFC6; }
/* </editor-fold>*/

div.scrollingBox { display: block; float: left; border: 1px solid black; height: 350px; width: 300px; overflow: auto; padding: 5px; margin: 10px;  }
div.scrollingBox h3 { margin: 0px; }
div.scrollingBox h4 { margin: 0px; } 
div.scrollingBox ul { list-style:none; text-indent:5px; padding-inline-start: 10px; margin-block-start: 0px; margin-block-end: 5px; }
div.scrollingBox li { line-height:25px; }
div.scrollingBox li:nth-child(even) { background:#f5f5f5; }


.traSubForm span { display: block; clear:both; }
.traSubForm .blocks { display: block; float: left; margin: 0 10px; padding: 0 10px 0 0; border-right: 1px solid #7A9D96; }
.traSubForm p { font-size: small; display: block; float: left; clear: both; margin: 0 0 0 5px; }
.traSubForm label { display: block; clear: both; font-size: small; color: #707070; margin: 5px 0 0 0; }
.traSubForm div.amtLine { display: block; width: 100%; margin: 5px 0 0 0; border-bottom: 1px solid #7A9D96; padding: 2px 0 6px 0; }
.traSubForm div.coaCodesBlock { display: block; float: left; }
.traSubForm div.amountBlock { display: block; float: right;   }
.traSubForm div.commentBlock { display: block; float: left; } 
.traSubForm div.classBlock { display: block; float: right; clear: both;  }
.traSubForm .ui-tabs {font-size: small; }
.traSubForm .ui-tabs-anchor { font-size: small; }
.traSubForm h3 { margin: 15px auto 5px auto; text-align: center; }
.traSubForm fieldset label { clear: none; }

div.progressTracker { display: block; margin: 20px auto; border: 3px solid #4F4F4F; border-radius: 25px; background-color: #ffffe3; width: 600px; min-height: 300 px; text-align: center; padding: 20px; }
div.progressBar { display: block; border: 1px solid #4F4F4F; background-color: #ddffee; border-radius: 5px; width: 400px; height: 30px; margin: 5px auto; padding: 0px; text-align: center; font-size: x-large; color:#7A9D96;}
div.progressBar .progress{ border: 0x transparent; background-color: #707070; border-radius: 5px; height: 100%; display: block; margin: 0px; text-align: center; color: white; font-size: x-large; width: 0px; }
div.progressBar .text { text-align: center; font-size: xlarge; }

div.mapLegend { display: block; background-color: white; border: 3px solid black; padding: 10px; margin: 10px; font-size: medium;  }
div.mapLegend h3 { margin-top:0px; text-align: center; font-size: large; text-decoration: underline;   }
div.mapLegend igm { vertical-align: middle; }


/* <editor-fold defaultstate="collapsed" desc="AceIcon Styles"> */

/* ── AceIcon Styles ── */
.ace-icon-wrap {
    display: inline-block;
    overflow: hidden;
    box-sizing: border-box;
    vertical-align: middle;
    text-align: center;
    line-height: 0;
}
.ace-icon-wrap svg {
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
}
.ace-icon-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.ace-icon-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    padding: 10px;
}
.ace-icon-gallery-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.ace-icon-gallery-item span {
    font-size: 11px;
    color: #555;
    max-width: 120px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* </editor-fold>*/

/* <editor-fold defaultstate="collapsed" desc="Multiple Payment Forms for BC Payments"> */
/* Card container: flex row with equal columns */
.multipleProcessTransactions {
    display: flex;
    border-radius: 15px;
    border: 1px solid black;
    padding: 5px;
    width: 95%;
    gap: 6px;
    margin: 20px 2px;
    box-shadow: 0 4px 8px rgba( 0, 0, 0, 0.4 );
}

/* All four columns: equal flex, box-sizing so padding/border included in width */
.multipleProcessTransactions .col1,
.multipleProcessTransactions .vendorBlock,
.multipleProcessTransactions .billBlock,
.multipleProcessTransactions .paymentBlock {
    flex: 1 1 0;
    min-width: 0;              /* allow flex children to shrink below content size */
    box-sizing: border-box;
    padding: 5px;
    overflow: hidden;           /* clip anything that still overflows */
}

.multipleProcessTransactions .col1 {
    border: 1px solid black;
    border-radius: 15px;
    background-color: #f7ffed;
}

/* fullPaymentForm wrapper: behaves as a flex row taking 3 of 4 equal parts */
.multipleProcessTransactions .fullPaymentForm {
    flex: 3 1 0;
    min-width: 0;
    display: flex;
    gap: 6px;
}

/* When a <form> wraps billBlock + paymentBlock, use grid for clean 2-col layout */
.multipleProcessTransactions > form,
.multipleProcessTransactions .fullPaymentForm > form {
    flex: 2 1 0;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

/* Submit button: span both columns, auto-width, centered */
.multipleProcessTransactions form button.center {
    grid-column: 1 / -1;
    justify-self: center;
}

/* Force all form elements, tables, and comboboxes to stay within column */
.multipleProcessTransactions select,
.multipleProcessTransactions input,
.multipleProcessTransactions textarea,
.multipleProcessTransactions table,
.multipleProcessTransactions .ui-widget,
.multipleProcessTransactions .custom-combobox,
.multipleProcessTransactions .custom-combobox-input {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Tables: fixed layout prevents columns from blowing out */
.multipleProcessTransactions table {
    table-layout: fixed;
    word-wrap: break-word;
}

.multipleProcessTransactions span.billPayHeading { display: none; }
.multipleProcessTransactions form button.center { width: auto; }

/* ── col1: two-column table layout (label | value) ── */
.multipleProcessTransactions .col1 {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 8px;
    align-content: start;
}

/* Labels: left column, right-aligned */
.multipleProcessTransactions .col1 > label {
    font-weight: bold;
    font-size: small;
    color: #707070;
    text-align: right;
    white-space: nowrap;
    padding: 2px 0;
}

/* Values (spans next to labels): right column */
.multipleProcessTransactions .col1 > span:not(.blocks):not(.billPayHeading) {
    padding: 2px 0;
    min-width: 0;
    overflow: hidden;
}

/* .blocks: dissolve into the parent grid so inner label+span become their own row */
.multipleProcessTransactions .col1 .blocks {
    display: contents;
}
/* Dissolve clickableEditNow inside .blocks so children become grid items */
.multipleProcessTransactions .col1 .blocks .clickableEditNow {
    display: contents;
}
/* .invDetails: also dissolve so its label participates in the grid */
.multipleProcessTransactions .col1 .invDetails {
    display: contents;
}
/* Hide the <br> between label and value inside invDetails */
.multipleProcessTransactions .col1 .invDetails br {
    display: none;
}
.multipleProcessTransactions .col1 .blocks label {
    font-weight: bold;
    font-size: small;
    color: #707070;
    text-align: right;
    white-space: nowrap;
    padding: 2px 0;
}

/* Full-width items: span both columns */
.multipleProcessTransactions .col1 > span:first-child,
.multipleProcessTransactions .col1 > hr,
.multipleProcessTransactions .col1 > .clearfix,
.multipleProcessTransactions .col1 > .amtLine,
.multipleProcessTransactions .col1 > .processingComments {
    grid-column: 1 / -1;
}

/* Description spans full width */
.multipleProcessTransactions .col1 .description {
    min-width: 0;
    overflow: hidden;
}
.multipleProcessTransactions .col1 .description textarea {
    width: 100%;
    box-sizing: border-box;
}

/* Clearfix: collapse to nothing in grid */
.multipleProcessTransactions .col1 .clearfix {
    height: 0;
    margin: 0;
    padding: 0;
}

/* Amount lines: full width, internal float layout preserved */
.multipleProcessTransactions .col1 .amtLine {
    border: 1px solid #BEE6DE;
    padding: 4px;
    box-sizing: border-box;
    overflow: hidden;
}
.multipleProcessTransactions .col1 .amtLine .coaCodesBlock {
    display: block;
    float: left;
}
.multipleProcessTransactions .col1 .amtLine .amountBlock {
    display: block;
    float: right;
    text-align: right;
}
.multipleProcessTransactions .col1 .amtLine .classBlock {
    clear: both;
    display: block;
    float: left;
    margin: 5px 0 0 0;
}
.multipleProcessTransactions .col1 .amtLine .commentBlock {
    display: block;
    float: left;
    clear: both;
    margin: 5px 0 0 0;
    max-width: 100%;
}
.multipleProcessTransactions .col1 .amtLine .commentBlock input {
    width: 100%;
}


/* </editor-fold>*/

/* <editor-fold defaultstate="collapsed" desc="Custom Script Styles - Miscellaneous Tools Settings"> */
.clickableEditNow {
    text-decoration: underline dashed #FFC7C7; 
    color: #090045;
}
div.matchedGroup { border-radius: 10px; border: 3px solid black; background-color: #ddffee; width: 95%; margin: 30px auto; padding: 4px; align-items: center; justify-content: center; text-align: center; }
div.matchedGroup table { display: table; float: left; width: 100%; border: 1px solid black; border-radius: 10px; border-collapse: collapse; } 
div.matchedGroup table th, div.matchedGroup table td { border: 1px solid black; }
div.matchedGroup table th { background-color: #8A9D96; font-weight: bolder; }
div.matchedGroup button { display: block; margin: 5px auto; justify-content: center; clear: both; padding: 4px; }
div.matchedGroup input { width: 95%; margin: auto; }   
.qbSyncFix { }
.qbSyncFix.complete { display: none; }
.qbSyncFix h2 { display:block; width: 100%; background-color: #4F4F4F; color: white; font-weight: bold; font-size: xx-large; }
    
/* </editor-fold>*/
/* <editor-fold defaultstate="collapsed" desc="Custom Script Styles - Pop Icons"> */ 
    /* The row-tools menu is anchored to its own table cell, so it opens immediately to
       the right of the tools icon -- over the next column -- instead of dropping inside
       a 30px-wide cell wherever its static position happens to land.
       z-index matters as much as the offsets: ace_start.js switches the left nav columns
       to position:absolute at runtime, which turns on the z-index: 6-10 that #navMenu1-5
       carry, and the tools column is the content nearest to them. Without a z-index of
       its own this menu has z-index:auto and a nav column paints straight over it. 15 is
       above the nav and below the popup stack (which starts at 20), so a menu inside a
       popup still sits inside that popup's stacking context rather than over later ones. */
    td:has( > .popIconMenu ) { position: relative; }
    .popIconMenu {
        display: none;
        border: 1px solid #7A9D96;
        border-radius: 5px;
        background-color: #ffffe3;
        box-shadow: 0 2px 6px rgba(0,0,0,0.18);
        position: absolute;
        top: 0;
        left: 100%;
        z-index: 15;
        /* Width comes from the longest label, not from the cell. An absolutely positioned
           box shrink-to-fits against its containing block, and that block is the 30px-wide
           tools cell, so the box would otherwise settle at min-content width -- which wraps
           every multi-word label ("Merge With Another Vendor") onto two or three lines.
           Capped so a single long label can't stretch the menu across the table. */
        width: max-content;
        min-width: 225px;
        max-width: 320px;
        overflow: hidden;           /* belt and braces: nothing can paint past the rounded border */
    }
    .popIconMenu ul {
        list-style-type: none;
        list-style-image: none;
        margin: 0;
        padding: 3px 0;             /* keeps the first and last row off the border */
    }
    /* Flex row so the icon and its label stay centred on each other, and -- the actual
       fix -- min-height instead of height: the old fixed 29px could not grow, so a label
       that did wrap rendered its second line below the menu's bottom border. */
    .popIconMenu li {
        display: flex;
        align-items: center;
        min-height: 29px;
        padding: 1px 8px 1px 0;
        font-size: 14px;
        line-height: 1.25;
        overflow-wrap: break-word;  /* even an unbroken long word stays inside */
    }
    .popIconMenu li img {
        flex: 0 0 auto;             /* the icon keeps its size; the label takes the slack */
        vertical-align: middle;
        margin: 2px 4px;
    }
/* </editor-fold>*/
/* <editor-fold defaultstate="collapsed" desc="Custom Script Styles - Custom ComboBox"> */ 
    .custom-combobox {
        position: relative;
        display: inline-block;
        float: left; 
        clear: both; 
    }
    .custom-combobox-toggle {
        position: absolute;
        top: 0;
        bottom: 0;
        margin-left: -1px;
        padding: 0;
    }
    .custom-combobox-input {
        margin: 0;
        display: block; float: left; 
        padding: 5px 10px;
        width: 500px;
        clear: both; 
    }
    .comboBoxWidthFull .custom-combobox { 
        width: 100%; 
    }
    .comboBoxWidthFull .custom-combobox-input { 
        width: 90%; 
        height: 28px; 
    }
    .comboBoxWidthFull .ui-button-icon-only { 
        width: 4%; 
        height: 38px; 
    }
/* </editor-fold>*/
/* <editor-fold defaultstate="collapsed" desc="Custom Script Styles - Custom ComboBox"> */ 
    /* <editor-fold defaultstate="collapsed" desc="Sortable Divs"> */ 
        #sortable, .sortable { 
            list-style-type: none; 
            margin: 0; 
            padding: 0; 
            width: 400px; 
        }
        #sortable li, .sortable li { 
            margin: 0 3px 3px 3px; 
            padding: 0.4em; 
            padding-left: 1.5em; 
            font-size: 1.4em; 
            height: 18px; 
        }
        #sortable li span, .sortable li span { 
            position: absolute; 
            margin-left: -1.3em; 
        }
        #double_sort { 

        }
        #sortable1, #sortable2, #sortable3, .sortableList { 
            list-style-type: none; 
            margin: 0; 
            float: left; 
            margin-right: 10px; 
            background: #eee; 
            padding: 5px; 
            width: 245px;

        }
        #sortable1 li, #sortable2 li, #sortable3 li, .sortableList li  { 
            margin: 5px; 
            padding: 5px; 
            font-size: 1.2em; 
            width: 225px;
        }
    /* </editor-fold>*/
/* </editor-fold>*/


img.headerLogo { max-width: 25%; max-height: 150px; }

@media print {
    html, body { height: 99%; }
    .no-print, no-print * { display: none !important; }
    .dataTables option { display: none !important; }
}