/* ======================================================= */
/* 🚀 GLOBAL STYLES (Applies to all devices unless overridden) */
/* ======================================================= */


body {
    padding-left: 11px;
    font-size: 12pt; /* Keep large font for desktop */
}

.page {
    /* FIXED SYNTAX: Removed commas from padding property */
    padding: 35px 0 0 0;
}

.highlight-appt {
    background-color: #ffe08a !important;
    border-color: #e0b000 !important;
    border: 5px dashed;
    color: #000 !important;
}

.container {
    padding-right: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto;
}

iframe {
    padding-top: 0px;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
}

div {
    /* Set a reasonable default to avoid unexpected borders */
    border: 0;
    border-style: solid;
    border-bottom-color: green;
}

.hidden {
    display: none;
}

.pg-center-block {
    margin-top: 15px;
}

a:link {
    color: #034af3;
    font-weight: 600;
}

.attention {
    background-color: yellow;
    color: yellowgreen;
}

.list-group-item-sub {
    padding-left: 2em;
    font-size: 12pt;
}

.highlight-box {
    background-color: #ffff99;
    padding: 10px;
    text-align: center;
    border-radius: 6px;
}

/* Desktop / Default size */
.dashboard-value {
    font-size: 26pt;
}

.rsValidatorMsg.rsInvalid {
    color: red;
    font-weight: bold;
    font-size: 13px;
}
/* ======================================================= */
/* 📱 NAVIGATION & UTILITY STYLES */
/* ======================================================= */

.loginDisplay {
    float: right;
    position: inherit;
    font-size: small;
    margin-right: 3px;
    padding: 1px 15px 3px 10px; /* Consolidate padding */
    color: White;
}

.navbar-header {
    padding: 5px;
    width: 100%;
}

.navbar-toggle {
    float: left;
}

.navbar ul {
    margin-left: 1px;
}

.navbar-inverse .navbar-toggle {
    border-color: #333;
    margin-left: 10px;
}

.navbar-inverse .navbar-nav > li > a {
    padding: 7px;
    margin: 4px;
}

.navbar-inverse .navbar-brand {
    color: #FFEE09;
}

.h-divider {
    margin: 15px 0; /* Consolidate margin top/bottom */
    height: 2px;
    width: 100%;
    border-top: 1px solid gray;
}

/* ======================================================= */
/* 📊 RADGRID & MESSAGE STYLES */
/* ======================================================= */

#MainContent_btnAdminGroup, #adminSubmenu {
    background-color: yellow;
    padding: 5px;
    border: dotted;
    border-width: 1pt;
    border-bottom-style: dotted;
}

#message span {
    color: green;
    width: 100%;
    padding: 3px;
}

#message {
    height: auto;
    border: 0px solid; /* Use shorthand for borders */
    width: auto;
    margin-top: 5px;
}

#RadGridQuotes {
    width: 100%;
}

.alert {
    padding: 2px;
    padding-top: 25px;
    margin-left: 5px;
    margin-bottom: 10px;
    margin-top: 10px;
    border: 0 solid transparent;
    border-radius: 2px;
}

.RadGrid_Default {
    border: 0;
}

    .RadGrid_Default .rgHeader {
        font-size: 12pt;
        font-weight: bolder;
    }

    .RadGrid_Default .rgRow > td, .RadGrid_Default .rgAltRow > td {
        border-color: #fff;
        font-family: sans-serif;
        font-weight: 700;
        height: 50px; /* This fixed height will be overridden for mobile */
    }

.RadGrid .rgHeader a {
    text-decoration: none;
    font-weight: bold;
    font-size: small;
}

.RadGrid .rgCommandRow a, .RadGrid .rgHeader input {
    vertical-align: middle;
    font-weight: bold;
    font-size: small;
}

.RadGrid_Default .rgFooter a, .RadGrid_Default .rgEditForm a {
    color: #000;
    font-weight: bold;
    font-size: medium;
}


/* ======================================================= */
/* 📱 MOBILE MEDIA QUERY: PHONES (320px to 667px) */
/* ======================================================= */
/* CONVERTS GRID TO CARD LAYOUT */
/* ---------------------------------------------------- */
/* Global Structural Fix (Applies to ALL RadGrids) 1199px     */
/* ---------------------------------------------------- */
@media only screen and (max-width: 667px) {
    /* 🔴 FIX 1: Remove all default browser margin/padding on the body */
    body {
        margin: 0 !important;
        padding: 0 !important;
        /* Optionally, check your body font size here if needed */
    }

    /* 🔴 FIX 2: Reset the main container's side padding to zero */
    .container {
        /* This will override any 10px padding from Bootstrap or Site.css */
        padding-left: 0 !important;
        padding-right: 0 !important;
        /* If the cards/filters still don't touch the edge, the space is here */
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important; /* Ensure it takes full viewport width */
    }

    /* 🔴 FIX 3: Reset padding on any inner wrapper (like the .page) */
    .page {
        margin: 0;
        padding: 0;
    }

    /* 🔴 FIX 4: Reset the margin on the main content area */
    .main-content {
        /* Ensure the fixed left margin used for desktop is gone */
        margin-left: 0 !important;
    }


    /* General Styles - Applies Card Structure and Flexbox */
    .RadGrid_Default .rgHeader {
        display: none;
    }

    .RadGrid_Default .rgMasterTable, .RadGrid_Default .rgMasterTable tbody,
    .RadGrid_Default .rgRow, .RadGrid_Default .rgAltRow {
        display: block;
        width: 100%;
        border: none !important;
        margin-bottom: 1px;
        padding: 5px;
        border: 1px solid #ccc;
    }

        .RadGrid_Default .rgRow > td, .RadGrid_Default .rgAltRow > td {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            text-align: left;
            flex-direction: column;
            padding: 5px;
            border: none !important;
            line-height: 1.5;
            margin: 0;
            /* height: auto !important;      */
        }


    /* ---------------------------------------------------- */
    /* Custom Labels: #RadGridQuotes */
    /* ---------------------------------------------------- */
    /*SEARCH DOCUMENTS*/
    /* Column 1: Quote ID (This is the 3rd or 4th TD in the HTML due to hidden columns/elements) */
    [id*='RadGridQuotes'] .rgRow > td:nth-of-type(1)::before,
    [id*='RadGridQuotes'] .rgAltRow > td:nth-of-type(1)::before {
        content: "Document ID: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridQuotes'] .rgRow > td:nth-of-type(2)::before,
    [id*='RadGridQuotes'] .rgAltRow > td:nth-of-type(2)::before {
        content: "Customer: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridQuotes'] .rgRow > td:nth-of-type(3)::before,
    [id*='RadGridQuotes'] .rgAltRow > td:nth-of-type(3)::before {
        content: "Document Type: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridQuotes'] .rgRow > td:nth-of-type(4)::before,
    [id*='RadGridQuotes'] .rgAltRow > td:nth-of-type(4)::before {
        content: "Date: ";
        font-weight: bold;
        float: left;
    }


    [id*='RadGridQuotes'] .rgRow > td:nth-of-type(5)::before,
    [id*='RadGridQuotes'] .rgAltRow > td:nth-of-type(5)::before {
        content: "Total: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridQuotes'] .rgRow > td:nth-of-type(6)::before,
    [id*='RadGridQuotes'] .rgAltRow > td:nth-of-type(6)::before {
        content: "Margin: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridQuotes'] .rgRow > td:nth-of-type(7)::before,
    [id*='RadGridQuotes'] .rgAltRow > td:nth-of-type(7)::before {
        content: "Copy: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridQuotes'] .rgRow > td:nth-of-type(8)::before,
    [id*='RadGridQuotes'] .rgAltRow > td:nth-of-type(8)::before {
        content: "Client Approved: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridQuotes'] .rgRow > td:nth-of-type(9)::before,
    [id*='RadGridQuotes'] .rgAltRow > td:nth-of-type(9)::before {
        content: "Scheduled";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridQuotes'] .rgRow > td:nth-of-type(10)::before,
    [id*='RadGridQuotes'] .rgAltRow > td:nth-of-type(10)::before {
        content: "Paid: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridQuotes'] .rgRow > td:nth-of-type(11)::before,
    [id*='RadGridQuotes'] .rgAltRow > td:nth-of-type(11)::before {
        content: "QR Code: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridQuotes'] .rgRow > td:nth-of-type(12)::before,
    [id*='RadGridQuotes'] .rgAltRow > td:nth-of-type(12)::before {
        content: "Agent Sign: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridQuotes'] .rgRow > td:nth-of-type(13)::before,
    [id*='RadGridQuotes'] .rgAltRow > td:nth-of-type(13)::before {
        content: "One Line Rider: ";
        font-weight: bold;
        float: left;
    }

    /* ---------------------------------------------------- */
    /* HEADER ROW FIX for #RadGridQuotes (The Filter Row)   */
    /* ---------------------------------------------------- */
    /* 1. Force the Filter Row itself to be a stacked Flex container */
    [id*='RadGridQuotes'] .rgFilterRow {
        display: flex;
        flex-direction: column; /* Stack the filter cells vertically */
        width: 100%;
        padding: 5px;
        border-bottom: 1px solid #ccc;
        margin-bottom: 15px; /* Separate filter block from the cards */
    }

        /* 2. Style the individual Filter Cells (TDs) */
        [id*='RadGridQuotes'] .rgFilterRow > td {
            display: flex;
            align-items: center; /* 🔴 FIX 1: Explicitly align items to the vertical center */
            padding: 5px 0;
            width: 100%;
            border: none !important;
            /* Ensure there is some space between the input and the icon */
            justify-content: space-between;
        }

        /* 3. Style the Input/Filter Box inside the cell */
        [id*='RadGridQuotes'] .rgFilterRow input[type="text"],
        [id*='RadGridQuotes'] .rgFilterRow .riTextBox {
            /* Make the input box take most of the available space */
            flex-grow: 1;
            margin-right: 5px;
            height: 30px;
        }

        /* 4. Inject the Column Header/Label for the Filter Field */
        /* This is KEY to telling the user what they are filtering! */

        /* Example: Column 1 - Quote ID */
        [id*='RadGridQuotes'] .rgFilterRow > td:nth-of-type(1)::before {
            content: "Document ID: ";
            font-weight: bold;
            min-width: 70px; /* Give the label space */
            text-align: left;
        }

        /* Example: Column 2 - Customer Name */
        [id*='RadGridQuotes'] .rgFilterRow > td:nth-of-type(2)::before {
            content: "Customer: ";
            font-weight: bold;
            min-width: 70px;
            text-align: left;
        }

        /* Example: Column 3 - Document Type */
        [id*='RadGridQuotes'] .rgFilterRow > td:nth-of-type(3)::before {
            content: "Document Type: ";
            font-weight: bold;
            min-width: 70px;
            text-align: left;
        }

        /* Example: Column 4 - Date */
        [id*='RadGridQuotes'] .rgFilterRow > td:nth-of-type(4)::before {
            content: "Date: ";
            font-weight: bold;
            min-width: 70px;
            text-align: left;
        }

        /* Example: Column 5 - Total */
        [id*='RadGridQuotes'] .rgFilterRow > td:nth-of-type(5)::before {
            content: "Total: ";
            font-weight: bold;
            min-width: 70px;
            text-align: left;
        }

        /* Example: Column 9 - ClientIsApproved */
        [id*='RadGridQuotes'] .rgFilterRow > td:nth-of-type(9)::before {
            content: "Client Approved: ";
            font-weight: bold;
            min-width: 70px;
            text-align: left;
        }

        /* Example: Column 9 - Job Scheduled */
        [id*='RadGridQuotes'] .rgFilterRow > td:nth-of-type(10)::before {
            content: "Job Scheduled: ";
            font-weight: bold;
            min-width: 70px;
            text-align: left;
        }

        /* ---------------------------------------------------- */
        /* HIDE UNWANTED FILTERS for #RadGridQuotes bu INDEX           */
        /* ---------------------------------------------------- */
        [id*='RadGridQuotes'] .rgFilterRow > td:nth-of-type(6) {
            display: none;
        }

        [id*='RadGridQuotes'] .rgFilterRow > td:nth-of-type(7) {
            display: none;
        }

        [id*='RadGridQuotes'] .rgFilterRow > td:nth-of-type(8) {
            display: none;
        }

        /* [id*='RadGridQuotes'] .rgFilterRow > td:nth-of-type(8) {
            display: none;
        }*/

        /* [id*='RadGridQuotes'] .rgFilterRow > td:nth-of-type(9) {
            display: none;
        }*/

        [id*='RadGridQuotes'] .rgFilterRow > td:nth-of-type(11) {
            display: none;
        }

    /* ---------------------------------------------------- */
    /* FOOTER  - HIDE for #RadGridQuotes                        */
    /* ---------------------------------------------------- */

    /* Target the footer row of the specific RadGrid using the Attribute Selector */
    [id*='RadGridQuotes'] .rgFooter {
        display: none;
    }


    /* ---------------------------------------------------- */
    /* Custom Quote Line Item Labels: #RadGrid1 */
    /* ---------------------------------------------------- */
    [id*='RadGrid1'] .rgRow > td:nth-of-type(1)::before,
    [id*='RadGrid1'] .rgAltRow > td:nth-of-type(1)::before {
        content: "Move Line Up: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGrid1'] .rgRow > td:nth-of-type(2)::before,
    [id*='RadGrid1'] .rgAltRow > td:nth-of-type(2)::before {
        content: "Move Line Down: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGrid1'] .rgRow > td:nth-of-type(3)::before,
    [id*='RadGrid1'] .rgAltRow > td:nth-of-type(3)::before {
        content: "Edit: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGrid1'] .rgRow > td:nth-of-type(4)::before,
    [id*='RadGrid1'] .rgAltRow > td:nth-of-type(4)::before {
        content: "Delete: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGrid1'] .rgRow > td:nth-of-type(5)::before,
    [id*='RadGrid1'] .rgAltRow > td:nth-of-type(5)::before {
        content: "UOM: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGrid1'] .rgRow > td:nth-of-type(6)::before,
    [id*='RadGrid1'] .rgAltRow > td:nth-of-type(6)::before {
        content: "Qty: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGrid1'] .rgRow > td:nth-of-type(7)::before,
    [id*='RadGrid1'] .rgAltRow > td:nth-of-type(7)::before {
        content: "Description: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGrid1'] .rgRow > td:nth-of-type(8)::before,
    [id*='RadGrid1'] .rgAltRow > td:nth-of-type(8)::before {
        content: "Taxable: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGrid1'] .rgRow > td:nth-of-type(9)::before,
    [id*='RadGrid1'] .rgAltRow > td:nth-of-type(9)::before {
        content: "Unit Price: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGrid1'] .rgRow > td:nth-of-type(10)::before,
    [id*='RadGrid1'] .rgAltRow > td:nth-of-type(10)::before {
        content: "Sub Total: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGrid1'] .rgRow > td:nth-of-type(11)::before,
    [id*='RadGrid1'] .rgAltRow > td:nth-of-type(11)::before {
        content: "Unit Cost: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGrid1'] .rgRow > td:nth-of-type(12)::before,
    [id*='RadGrid1'] .rgAltRow > td:nth-of-type(12)::before {
        content: "Sub Cost: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGrid1'] .rgRow > td:nth-of-type(13)::before,
    [id*='RadGrid1'] .rgAltRow > td:nth-of-type(13)::before {
        content: "Profit %: ";
        font-weight: bold;
        float: left;
    }

    /* ---------------------------------------------------- */
    /* Custom Quote Line Item Labels: #RadGridTerms */
    /* ---------------------------------------------------- */
    [id*='RadGridTerms'] .rgRow > td:nth-of-type(1)::before,
    [id*='RadGridTerms'] .rgAltRow > td:nth-of-type(1)::before {
        content: "Move Line Up: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridTerms'] .rgRow > td:nth-of-type(2)::before,
    [id*='RadGridTerms'] .rgAltRow > td:nth-of-type(2)::before {
        content: "Move Line Down: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridTerms'] .rgRow > td:nth-of-type(3)::before,
    [id*='RadGridTerms'] .rgAltRow > td:nth-of-type(3)::before {
        content: "Edit: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridTerms'] .rgRow > td:nth-of-type(4)::before,
    [id*='RadGridTerms'] .rgAltRow > td:nth-of-type(4)::before {
        content: "Delete: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridTerms'] .rgRow > td:nth-of-type(5)::before,
    [id*='RadGridTerms'] .rgAltRow > td:nth-of-type(5)::before {
        content: "Term: ";
        font-weight: bold;
        float: left;
    }

    /* ---------------------------------------------------- */
    /* Sales Agent Labels: #RadGridSalesReps */
    /* ---------------------------------------------------- */
    [id*='RadGridSalesReps'] .rgRow > td:nth-of-type(1)::before,
    [id*='RadGridSalesReps'] .rgAltRow > td:nth-of-type(1)::before {
        content: "First Name: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridSalesReps'] .rgRow > td:nth-of-type(2)::before,
    [id*='RadGridSalesReps'] .rgAltRow > td:nth-of-type(2)::before {
        content: "Last Name: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridSalesReps'] .rgRow > td:nth-of-type(3)::before,
    [id*='RadGridSalesReps'] .rgAltRow > td:nth-of-type(3)::before {
        content: "Phone: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridSalesReps'] .rgRow > td:nth-of-type(4)::before,
    [id*='RadGridSalesReps'] .rgAltRow > td:nth-of-type(4)::before {
        content: "Email: ";
        font-weight: bold;
        float: left;
    }

    /* ---------------------------------------------------- */
    /* HEADER ROW FIX for #RadGridProduct (The Filter Row)   */
    /* ---------------------------------------------------- */
    /* 1. Force the Filter Row itself to be a stacked Flex container */
    [id*='RadGridSalesReps'] .rgFilterRow {
        display: flex;
        flex-direction: column; /* Stack the filter cells vertically */
        width: 100%;
        padding: 5px;
        border-bottom: 1px solid #ccc;
        margin-bottom: 15px; /* Separate filter block from the cards */
    }

        /* 2. Style the individual Filter Cells (TDs) */
        [id*='RadGridSalesReps'] .rgFilterRow > td {
            display: flex;
            align-items: center; /* 🔴 FIX 1: Explicitly align items to the vertical center */
            padding: 5px 0;
            width: 100%;
            border: none !important;
            /* Ensure there is some space between the input and the icon */
            justify-content: space-between;
        }

        /* 3. Style the Input/Filter Box inside the cell */
        [id*='RadGridSalesReps'] .rgFilterRow input[type="text"],
        [id*='RadGridSalesReps'] .rgFilterRow .riTextBox {
            /* Make the input box take most of the available space */
            flex-grow: 1;
            margin-right: 5px;
            height: 30px;
        }

        /* 4. Inject the Column Header/Label for the Filter Field */
        /* This is KEY to telling the user what they are filtering! */

        /* Example: Column 1 - First Name*/
        [id*='RadGridSalesReps'] .rgFilterRow > td:nth-of-type(1)::before {
            content: "First Name: ";
            font-weight: bold;
            min-width: 70px; /* Give the label space */
            text-align: left;
        }

        /* Example: Column 2 - Last Name*/
        [id*='RadGridSalesReps'] .rgFilterRow > td:nth-of-type(2)::before {
            content: "Last Name: ";
            font-weight: bold;
            min-width: 70px; /* Give the label space */
            text-align: left;
        }

        /* Example: Column 3 - Phone*/
        [id*='RadGridSalesReps'] .rgFilterRow > td:nth-of-type(3)::before {
            content: "Phone: ";
            font-weight: bold;
            min-width: 70px; /* Give the label space */
            text-align: left;
        }

        /* Example: Column 4 - Email*/
        [id*='RadGridSalesReps'] .rgFilterRow > td:nth-of-type(4)::before {
            content: "Email: ";
            font-weight: bold;
            min-width: 70px; /* Give the label space */
            text-align: left;
        }


    /* ---------------------------------------------------- */
    /* HIDE UNWANTED FILTERS for #RadGridCustomers bu INDEX           */
    /* ---------------------------------------------------- */

    /* [id*='RadGridSalesReps'] .rgFilterRow > td:nth-of-type(2) {
            display: none;
        }*/



    /* ---------------------------------------------------- */
    /* FOOTER  - HIDE for #RadGridProduct                        */
    /* ---------------------------------------------------- */
    /* Target the footer row of the specific RadGrid using the Attribute Selector */
    [id*='RadGridSalesReps'] .rgFooter {
        display: none;
    }



    /* ---------------------------------------------------- */
    /* Customer Labels: #RadGridCustomers */
    /* ---------------------------------------------------- */
    [id*='RadGridCustomers'] .rgRow > td:nth-of-type(1)::before,
    [id*='RadGridCustomers'] .rgAltRow > td:nth-of-type(1)::before {
        content: "Email Statement: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridCustomers'] .rgRow > td:nth-of-type(2)::before,
    [id*='RadGridCustomers'] .rgAltRow > td:nth-of-type(2)::before {
        content: "Company Name: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridCustomers'] .rgRow > td:nth-of-type(3)::before,
    [id*='RadGridCustomers'] .rgAltRow > td:nth-of-type(3)::before {
        content: "First Name: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridCustomers'] .rgRow > td:nth-of-type(4)::before,
    [id*='RadGridCustomers'] .rgAltRow > td:nth-of-type(4)::before {
        content: "Last Name: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridCustomers'] .rgRow > td:nth-of-type(5)::before,
    [id*='RadGridCustomers'] .rgAltRow > td:nth-of-type(5)::before {
        content: "City: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridCustomers'] .rgRow > td:nth-of-type(6)::before,
    [id*='RadGridCustomers'] .rgAltRow > td:nth-of-type(6)::before {
        content: "Phone: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridCustomers'] .rgRow > td:nth-of-type(7)::before,
    [id*='RadGridCustomers'] .rgAltRow > td:nth-of-type(7)::before {
        content: "Unapplied Cash: ";
        font-weight: bold;
        float: left;
    }

    /* ---------------------------------------------------- */
    /* HEADER ROW FIX for #RadGridCustomers (The Filter Row)   */
    /* ---------------------------------------------------- */
    /* 1. Force the Filter Row itself to be a stacked Flex container */
    [id*='RadGridCustomers'] .rgFilterRow {
        display: flex;
        flex-direction: column; /* Stack the filter cells vertically */
        width: 100%;
        padding: 5px;
        border-bottom: 1px solid #ccc;
        margin-bottom: 15px; /* Separate filter block from the cards */
    }

        /* 2. Style the individual Filter Cells (TDs) */
        [id*='RadGridCustomers'] .rgFilterRow > td {
            display: flex;
            align-items: center; /* 🔴 FIX 1: Explicitly align items to the vertical center */
            padding: 5px 0;
            width: 100%;
            border: none !important;
            /* Ensure there is some space between the input and the icon */
            justify-content: space-between;
        }

        /* 3. Style the Input/Filter Box inside the cell */
        [id*='RadGridCustomers'] .rgFilterRow input[type="text"],
        [id*='RadGridCustomers'] .rgFilterRow .riTextBox {
            /* Make the input box take most of the available space */
            flex-grow: 1;
            margin-right: 5px;
            height: 30px;
        }

        /* 4. Inject the Column Header/Label for the Filter Field */
        /* This is KEY to telling the user what they are filtering! */

        /* Example: Column 1 - Quote ID */
        /*[id*='RadGridCustomers'] .rgFilterRow > td:nth-of-type(1)::before {
            content: "Email Statement: ";
            font-weight: bold;
            min-width: 70px;*/ /* Give the label space */
        /*text-align: left;
        }*/

        [id*='RadGridCustomers'] .rgFilterRow > td:nth-of-type(2)::before {
            content: "Company Name: ";
            font-weight: bold;
            min-width: 70px; /* Give the label space */
            text-align: left;
        }

        /* Example: Column 2 - First Name */
        [id*='RadGridCustomers'] .rgFilterRow > td:nth-of-type(3)::before {
            content: "First Name: ";
            font-weight: bold;
            min-width: 70px;
            text-align: left;
        }

        /* Example: Column 3 - Last Name */
        [id*='RadGridCustomers'] .rgFilterRow > td:nth-of-type(4)::before {
            content: "Last Name: ";
            font-weight: bold;
            min-width: 70px;
            text-align: left;
        }

        /* Example: Column 4 - City */
        [id*='RadGridCustomers'] .rgFilterRow > td:nth-of-type(5)::before {
            content: "City: ";
            font-weight: bold;
            min-width: 70px;
            text-align: left;
        }

        /* ---------------------------------------------------- */
        /* HIDE UNWANTED FILTERS for #RadGridCustomers bu INDEX           */
        /* ---------------------------------------------------- */
        [id*='RadGridCustomers'] .rgFilterRow > td:nth-of-type(6) {
            display: none;
        }

        [id*='RadGridCustomers'] .rgFilterRow > td:nth-of-type(7) {
            display: none;
        }

    /* ---------------------------------------------------- */
    /* FOOTER  - HIDE for #RadGridCustomers                        */
    /* ---------------------------------------------------- */
    /* Target the footer row of the specific RadGrid using the Attribute Selector */
    [id*='RadGridCustomers'] .rgFooter {
        display: none;
    }


    /* ---------------------------------------------------- */
    /* Product Work Item Labels: #RadGridProduct */
    /* ---------------------------------------------------- */
    [id*='RadGridProduct'] .rgRow > td:nth-of-type(1)::before,
    [id*='RadGridProduct'] .rgAltRow > td:nth-of-type(1)::before {
        content: "Description: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridProduct'] .rgRow > td:nth-of-type(2)::before,
    [id*='RadGridProduct'] .rgAltRow > td:nth-of-type(2)::before {
        content: "Price: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridProduct'] .rgRow > td:nth-of-type(3)::before,
    [id*='RadGridProduct'] .rgAltRow > td:nth-of-type(3)::before {
        content: "Cost: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridProduct'] .rgRow > td:nth-of-type(4)::before,
    [id*='RadGridProduct'] .rgAltRow > td:nth-of-type(4)::before {
        content: "Unit Code: ";
        font-weight: bold;
        float: left;
    }

    [id*='RadGridProduct'] .rgRow > td:nth-of-type(5)::before,
    [id*='RadGridProduct'] .rgAltRow > td:nth-of-type(5)::before {
        content: "Taxable: ";
        font-weight: bold;
        float: left;
    }

    /* ---------------------------------------------------- */
    /* HEADER ROW FIX for #RadGridProduct (The Filter Row)   */
    /* ---------------------------------------------------- */
    /* 1. Force the Filter Row itself to be a stacked Flex container */
    [id*='RadGridProduct'] .rgFilterRow {
        display: flex;
        flex-direction: column; /* Stack the filter cells vertically */
        width: 100%;
        padding: 5px;
        border-bottom: 1px solid #ccc;
        margin-bottom: 15px; /* Separate filter block from the cards */
    }

        /* 2. Style the individual Filter Cells (TDs) */
        [id*='RadGridProduct'] .rgFilterRow > td {
            display: flex;
            align-items: center; /* 🔴 FIX 1: Explicitly align items to the vertical center */
            padding: 5px 0;
            width: 100%;
            border: none !important;
            /* Ensure there is some space between the input and the icon */
            justify-content: space-between;
        }

        /* 3. Style the Input/Filter Box inside the cell */
        [id*='RadGridProduct'] .rgFilterRow input[type="text"],
        [id*='RadGridProduct'] .rgFilterRow .riTextBox {
            /* Make the input box take most of the available space */
            flex-grow: 1;
            margin-right: 5px;
            height: 30px;
        }

        /* 4. Inject the Column Header/Label for the Filter Field */
        /* This is KEY to telling the user what they are filtering! */

        /* Example: Column 1 - Description*/
        [id*='RadGridProduct'] .rgFilterRow > td:nth-of-type(1)::before {
            content: "Description: ";
            font-weight: bold;
            min-width: 70px; /* Give the label space */
            text-align: left;
        }


        /* ---------------------------------------------------- */
        /* HIDE UNWANTED FILTERS for #RadGridCustomers bu INDEX           */
        /* ---------------------------------------------------- */

        [id*='RadGridProduct'] .rgFilterRow > td:nth-of-type(2) {
            display: none;
        }

        [id*='RadGridProduct'] .rgFilterRow > td:nth-of-type(3) {
            display: none;
        }

        [id*='RadGridProduct'] .rgFilterRow > td:nth-of-type(4) {
            display: none;
        }

        [id*='RadGridProduct'] .rgFilterRow > td:nth-of-type(5) {
            display: none;
        }

    /* ---------------------------------------------------- */
    /* FOOTER  - HIDE for #RadGridProduct                        */
    /* ---------------------------------------------------- */
    /* Target the footer row of the specific RadGrid using the Attribute Selector */
    [id*='RadGridProduct'] .rgFooter {
        display: none;
    }


    /* FIX for Service Items Checkboxes*/
    /* ---------------------------------------------------- */
    /* Checkbox List Font Shrink Fix                        */
    /* ---------------------------------------------------- */
    .responsive-checkbox-list label {
        /* Reduce the font size for small screens (e.g., from 14pt/18.6px down to 14px) */
        font-size: 12px !important;
        /* Add word-break to prevent very long labels from causing horizontal scroll */
        word-break: break-word;
    }

    /* FIX for Home Dashboard*/
    .dashboard-value {
        font-size: 16pt !important;
    }

    /* Optional: Shrink the headers too */
    .highlight-box {
        font-size: 10pt;
    }


    













    /*@media only screen and (max-width: 667px) {*/

    /* Global Mobile Adjustments */
    /*.page {
        margin: 2px auto 0px auto;
    }

    .container {
        padding-right: 5px;
        padding-left: 5px;
    }*/

    /* 1. HIDE GRID HEADER */
    /*.RadGrid_Default .rgHeader {
        display: none;
    }*/

    /* 2 & 3. FORCE BLOCK DISPLAY AND STYLE CARD CONTAINER (Row becomes Card) */
    /*.RadGrid_Default,
    .RadGrid_Default .rgMasterTable,
    .RadGrid_Default .rgMasterTable tbody,
    .RadGrid_Default .rgRow,
    .RadGrid_Default .rgAltRow {
        display: block;
        width: 100%;
        border: none !important;
    }

        .RadGrid_Default .rgRow,
        .RadGrid_Default .rgAltRow {
            border: 1px solid #ccc;
            margin-bottom: 15px;
            padding: 10px;
            border-radius: 4px;
        }*/

    /* 4. STYLE CELLS (Cell becomes a Labeled Line Item) */
    /*.RadGrid_Default .rgRow > td,
            .RadGrid_Default .rgAltRow > td {
                display: block;
                text-align: right;*/ /* Align value to the right */
    /*padding: 5px 0;
                border: none !important;
                height: auto !important;*/ /* Remove restrictive fixed height */
    /*}*/

    /* 5. INJECT LABELS (You must adjust nth-of-type(N) to match your column order) */
    /* *** You will need to customize the content: property below *** */
    /*SEARCH DOCUMENTS*/

    /*.RadGrid_Default .rgRow > td:nth-of-type(1)::before,
                .RadGrid_Default .rgAltRow > td:nth-of-type(1)::before {
                    content: "ID: ";
                    font-weight: bold;
                    float: left;
                }

                .RadGrid_Default .rgRow > td:nth-of-type(2)::before,
                .RadGrid_Default .rgAltRow > td:nth-of-type(2)::before {
                    content: "Customer: ";
                    font-weight: bold;
                    float: left;
                }

                .RadGrid_Default .rgRow > td:nth-of-type(3)::before,
                .RadGrid_Default .rgAltRow > td:nth-of-type(3)::before {
                    content: "Document Type: ";
                    font-weight: bold;
                    float: left;
                }

                .RadGrid_Default .rgRow > td:nth-of-type(4)::before,
                .RadGrid_Default .rgAltRow > td:nth-of-type(4)::before {
                    content: "Date: ";
                    font-weight: bold;
                    float: left;
                }

                .RadGrid_Default .rgRow > td:nth-of-type(5)::before,
                .RadGrid_Default .rgAltRow > td:nth-of-type(5)::before {
                    content: "Total: ";
                    font-weight: bold;
                    float: left;
                }
                .RadGrid_Default .rgRow > td:nth-of-type(6)::before,
                .RadGrid_Default .rgAltRow > td:nth-of-type(6)::before {
                    content: "Margin: ";
                    font-weight: bold;
                    float: left;
                }*/

    /* Make existing icons large (from your original code) */
    /*.RadGrid input[type="image"] {
        height: 25px;
        width: 25px;
    }
}*/


    /* ======================================================= */
    /* 🖥️ TABLET/LANDSCAPE PHONE & DESKTOP MEDIA QUERIES */
    /* ======================================================= */

    /* Tablet (Portrait) / Small Desktop (768px and up) - CONSOLIDATED */
    @media only screen and (min-width: 768px) {

        .page {
            margin: 15px auto 0px auto;
        }

        .container {
            margin-top: 5px;
        }

        #message {
            margin-top: 25px;
        }

        /* Desktop (992px and up) - Specific Adjustments */
        @media only screen and (min-width: 992px) {
            .page {
                margin: 65px auto 0px auto;
            }
        }



        /* Hide nested lists by default */
        .collapsible-list .nested {
            display: none;
            margin-left: 5px; /* indent */
        }

        /* Cursor for toggles */
        .collapsible-toggle {
            cursor: pointer;
            font-weight: bold;
            user-select: none;
        }

            /* Optional: indicate expanded state */
            .collapsible-toggle::after {
                content: " ▼";
                font-size: 0.8em;
            }

            .collapsible-toggle.active::after {
                content: " ▲";
                font-size: 0.8em;
                display: flex;
                padding-left: 70px;
            }
    }




}

/*  set Print */
  @media print {
        body {
            font-size: 12pt;
        }

    .highlight-box {
        font-size: 10pt;
        min-width: 150px;
    }

    .dashboard-value {
        font-size: 10pt;
        min-width: 150px;
    }


    .list-group-item {
        font-size: 8pt;
    }

 }