/* <copyright file="conexgo-core.css" company="Laxson Solutions">
 * Laxson Solutions Development Team
 *
 * Description:
 * Defines core visual design tokens, shell styling, and shared application appearance.
 * </copyright> */

/* CONEXGO CORE CASCADE - generated by R18-206.6 on 2026-09-19 14:31:40 */
/* Historical source boundaries are retained for reviewability. */

@import url("open-iconic/font/css/open-iconic-bootstrap.min.css");

/* ==========================================================================
   SOURCE: wwwroot\css\site.css
   Preserved in source/cascade order by R18-206.6.
   ========================================================================== */
html,
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a,
.btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    /* background-color: #1b6ec2; */
    background-color: #2369ca;
    border-color: #1861ac;
}

.center {
    height: 200px;
    position: relative;
}

    .center p {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

        .center p img {
            padding-left: 20px;
        }

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type="checkbox"]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred.";
    }

.position-bottomcenter {
    bottom: 2rem;
    left: 50%;
    margin-left: -15rem;
    margin: auto;
    top: 50%;
}

.sort-link {
    cursor: pointer;
    color: blue;
    text-decoration: underline;
}

.addressform {
    margin-bottom: 0rem !important;
}

.dashboard {
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    margin: 0;
    overflow: hidden;
    padding: 5px 0 5px 5px;
    width: 100%;
    background: none repeat scroll 0 0 #dddddd;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

    .dashboard li {
        list-style-type: none;
        float: left;
        padding-left: 10px;
        padding-right: 10px;
        border-left: 1px solid #000;
    }

        .dashboard li.spacer {
            list-style-type: none;
            float: left;
            width: 50px;
            border: none;
        }

    .dashboard a {
        display: block;
        background-image: url("");
        background-repeat: no-repeat;
        background-position: right;
        padding-right: 0;
        text-decoration: none;
        color: #000;
        float: left;
        margin-right: 8px;
    }

.dashboard_mobile {
    height: 40px;
    margin: 0;
    overflow: hidden;
    padding: 5px 0 0 5px;
    width: 100%;
    background: none repeat scroll 0 0 #eeeeee;
    font-size: 9pt;
}

    .dashboard_mobile li {
        list-style-type: none;
        float: left;
        padding-left: 10px;
        padding-right: 10px;
        border-left: 1px solid #000;
    }

        .dashboard_mobile li.spacer {
            list-style-type: none;
            float: left;
            width: 50px;
            border: none;
        }

    .dashboard_mobile a {
        display: block;
        background-image: url("");
        background-repeat: no-repeat;
        background-position: right;
        padding-right: 0;
        text-decoration: none;
        color: #000;
        float: left;
    }

.blazored-toast-container {
    z-index: 200;
}

/* CLOCK*/
#clock li,
#clock2 li {
    display: inline;
    color: #333333;
    font-size: 11px;
    font-weight: bold;
}

#clock,
#clock2 {
    padding-left: 0;
    margin: 5px 0;
}

.title {
    color: #333333;
    font-size: 11px;
    font-weight: bold;
    margin: 0 10px;
}

.running-text {
    background: none repeat scroll 0 0 #eee;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 30px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
    color: #ffffff;
    padding: 10px 20px 10px 20px;
    color: black;
}

@media (min-width: 768px) {
    .running-text {
        margin-left: 150px;
    }
}

@media (max-width: 768px) {
    .running-text {
        font-size: 9pt;
    }
}

@font-face {
    font-family: "BebasNeueRegular";
    src: url("../font/bebasneue-webfont.eot");
    src: url("../font/bebasneue-webfont.eot?#iefix") format("embedded-opentype"), url("../font/bebasneue-webfont.woff") format("woff"), url("../font/bebasneue-webfont.ttf") format("truetype"), url("../font/bebasneue-webfont.svg#bebas_neueregular") format("svg");
    font-weight: normal;
    font-style: normal;
}

.clock {
    position: fixed;
    top: 15px;
    right: 10px;
}

.date-top {
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.1);
    float: left;
    padding-right: 15px;
}

    .date-top > li {
    }

#nt-title {
    margin: 0;
}

    #nt-title li {
        list-style: none outside none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.navbar-left {
    float: left !important;
}

.digital {
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.1);
    float: left;
    padding-right: 15px;
}

    .digital li {
        display: inline;
    }

.meridiem {
    font-size: 10px;
}

.tickercontainer {
    /* the outer div */
    background: rgba(0, 0, 0, 1);
    width: 100%;
    height: 45px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    z-index: 999;
}

    .tickercontainer .mask {
        /* that serves as a mask. so you get a sort of padding both left and right */
        position: relative;
        padding-left: 10px;
        padding-right: 10px;
        top: 13px;
        height: 20px;
        width: 100%;
        overflow: hidden;
    }

.features {
    list-style-type: circle;
    padding-left: 20px;
}

.none-indicator {
    text-align: center;
    margin-top: 20px;
    padding: 10px;
    background-color: #eeeeee;
}

/* For the details on the device data page */
a.tip {
    /* border-bottom: 1px dashed; */
    text-decoration: none;
}

    a.tip:hover {
        cursor: help;
        position: relative;
    }

    a.tip span {
        display: none;
    }

    a.tip:hover span {
        border: #c0c0c0 1px dotted;
        padding: 5px 20px 5px 5px;
        display: block;
        z-index: 100;
        /*  background: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%; */
        left: 0px;
        margin: 10px;
        width: 350px;
        position: absolute;
        top: 10px;
        text-decoration: none;
    }

.battery-full {
    color: green;
}

.battery-warning {
    color: orange;
}

.battery-low {
    color: red;
}

.dashboard-item {
    font-size: 9pt;
    height: 26px;
    text-align: center;
}

@media (max-width: 768px) {
    .dashboard-item {
        display: none;
    }
}

.language {
    text-align: center;
    padding-top: 10px;
}

@media (max-width: 768px) {
    .language {
    }
}

.icon-badge {
    position: relative;
    display: inline-block; /* Or flex, grid, etc., as needed */
}

.operator-badge {
    position: absolute;
    top: -5px;
    right: -2px;
    color: white;
    padding: 2px 5px;
    border-radius: 50%;
    font-size: 0.5em; /* Or adjust as needed */
}

.alertqueue-badge {
    position: absolute;
    top: -5px;
    right: -2px;
    background-color: red;
    color: white;
    padding: 2px 5px;
    border-radius: 50%;
    font-size: 0.5em; /* Or adjust as needed */
}

.notification-badge {
    position: absolute;
    top: -5px;
    right: -2px;
    background-color: red;
    color: white;
    padding: 2px 5px;
    border-radius: 50%;
    font-size: 0.5em; /* Or adjust as needed */
}

.callcenter-badge {
    background-color: red;
    color: white;
    padding: 2px 5px;
    margin-right: 5px;
    border-radius: 50%;
    font-size: 0.5em; /* Or adjust as needed */
}

#container {
    width: 100%;
    height: 450px;
    margin: 0;
    padding: 0;
}

.div-info {
    font-family: Arial, sans-serif;
    line-height: 1.3;
}

.info-title {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: bold;
    color: #2a5d84;
    border-bottom: 1px solid #ccc;
    padding-bottom: 4px;
}

.custom-infowindow,
.custom-infowindow * {
    cursor: default !important;
}

.signal {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: 35px;
    user-select: none;
}

    .signal .bar {
        width: 14%;
        background: #bbb;
        border-radius: 2px 2px 0 0;
        transition: background 0.18s, transform 0.12s;
        transform-origin: bottom center;
    }
        /* heights for 5 bars (smallest -> largest) */
        .signal .bar:nth-child(1) {
            height: 5px;
        }

        .signal .bar:nth-child(2) {
            height: 10px;
        }

        .signal .bar:nth-child(3) {
            height: 15px;
        }

        .signal .bar:nth-child(4) {
            height: 20px;
        }

        .signal .bar:nth-child(5) {
            height: 25px;
        }

        /* active state */
        .signal .bar.active {
            background: linear-gradient(180deg, #00c853, #00796b);
            transform: scaleY(1.05);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
        }

.blur {
    backdrop-filter: blur(10px);
}

.dialog-background {
}

.dialog-background-title {
    background: #0562a9;
    color: var(--mud-palette-white);
}

.dialog-background-surface {
    background: rgba(var(--mud-palette-surface-rgb), 0.75);
}

/* =========================
   Material 3 Dialog Animations
   Scoped to your dialog
   ========================= */

/* OPEN animation */
.m3-dialog.mud-dialog {
    transform-origin: center;
    animation: m3-dialog-enter 260ms cubic-bezier(0.2, 0, 0, 1);
    background-color: gray;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.15);
}

    /* CLOSE animation */
    .m3-dialog.mud-dialog.mud-dialog-closing {
        animation: m3-dialog-exit 180ms cubic-bezier(0.4, 0, 1, 1);
    }

/* BACKDROP (overlay) */
.mud-overlay-scrim {
    animation: m3-scrim-enter 260ms cubic-bezier(0.2, 0, 0, 1);
}

    .mud-overlay-scrim.mud-overlay-leaving {
        animation: m3-scrim-exit 180ms cubic-bezier(0.4, 0, 1, 1);
    }

/* =========================
   KEYFRAMES
   ========================= */

@keyframes m3-dialog-enter {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes m3-dialog-exit {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    to {
        opacity: 0;
        transform: scale(0.92) translateY(8px);
    }
}

@keyframes m3-scrim-enter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes m3-scrim-exit {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.permissions {
    display: flex;
    justify-content: space-between; /* spread horizontally */
    align-items: flex-start; /* align all items to top */
}

.permission-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* center icon + button horizontally */
    width: 50px;
}

/* CONEXGO R18-32 UI NORMALIZATION START */
/*
   Final private-portal visual normalization.
   - coherent dialog widths
   - consistent Last Updated cards
   - solid modern row action menus, opening to the right on desktop
   - Conexgo-blue pagination hover
*/

/* ---------------------------------------------------------------
   1. Dialog sizing
   Stop the old 900px / 1240px conflict and use one normal envelope.
   --------------------------------------------------------------- */
@media (min-width: 992px) {
    html body .mud-dialog.cx-dialog-root.cx-standard-form-dialog,
    html body .mud-dialog.cx-dialog-root.cx-device-config-dialog,
    html body .mud-dialog.cx-dialog-root.cx-r8-account-email {
        width: min(1040px, calc(100vw - 48px)) !important;
        max-width: min(1040px, calc(100vw - 48px)) !important;
    }

    html body .mud-dialog.cx-dialog-root:is( .cx-r1-device-addedit, .cx-r1-device-geofence, .cx-r1-device-message, .cx-r1-account-addedit, .cx-r1-devicemodel-addedit, .cx-terms-dialog, .cx-report-subscribe-dialog ) {
        width: min(1180px, calc(100vw - 48px)) !important;
        max-width: min(1180px, calc(100vw - 48px)) !important;
    }
}

/* ---------------------------------------------------------------
   2. "Dernier changement effectué" / Last updated
   Keep the dark Conexgo accent on every configuration modal.
   --------------------------------------------------------------- */
html body .mud-dialog :is( .cx-device-config-last-updated, .device-dot-last-updated, .device-geofence-last-updated ) {
    border: 1px solid #d6e0ea !important;
    border-left: 4px solid #315879 !important;
    border-inline-start: 4px solid #315879 !important;
    border-radius: 10px !important;
    background: #f2f7fb !important;
    color: #526170 !important;
    box-shadow: none !important;
}

html body .mud-dialog .device-dot-last-updated {
    width: min(100%, var(--cx-device-modal-content-width, 960px)) !important;
    min-width: 0 !important;
    margin: 18px auto 0 !important;
    padding: 14px 16px !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 11px !important;
}

html body .mud-dialog .device-dot-last-updated-icon {
    width: 32px !important;
    height: 32px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    background: #e2edf6 !important;
    color: #315879 !important;
}

html body .mud-dialog .device-dot-last-updated-label,
html body .mud-dialog .device-geofence-last-updated-label {
    color: #2c4c6c !important;
    font-size: .78rem !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

html body .mud-dialog .device-dot-last-updated-value:not(.cx-r1878-last-updated-date),
html body .mud-dialog .device-geofence-last-updated-value:not(.cx-r1878-last-updated-date) {
    margin-top: 3px !important;
    color: #344054 !important;
    font-size: .9rem !important;
    font-weight: 650 !important;
}

html body .mud-dialog .device-dot-last-updated-by,
html body .mud-dialog .device-geofence-last-updated-by {
    margin-top: 2px !important;
    color: #667585 !important;
    font-size: .84rem !important;
}

html body .mud-dialog .device-geofence-last-updated {
    width: 100% !important;
    min-width: 0 !important;
    margin: 16px 0 0 !important;
    padding: 14px 16px !important;
}

/* ---------------------------------------------------------------
   3. Account / Device row action menus — R18-46.1 canonical
   Stable below-only placement + internal scrolling.
   --------------------------------------------------------------- */
html body .conexgo-pagedlist-table .dropdown-menu,
html body .account-list-cell-name .dropdown-menu,
html body .device-list-action-menu,
html body .conexgo-row-action-menu {
    min-width: 246px !important;
    max-width: min(310px, calc(100vw - 28px)) !important;
    max-height: var(--cx-row-menu-max-height, min(360px, calc(100dvh - 96px))) !important;
    padding: 6px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    border: 1px solid #c7d6e2 !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    color: #2c4c6c !important;
    box-shadow: 0 12px 28px rgba(31, 61, 89, .16) !important;
    scrollbar-width: thin !important;
    scrollbar-color: #9eafbd transparent !important;
    z-index: 2800 !important;
}

    html body .conexgo-pagedlist-table .dropdown-menu .dropdown-item,
    html body .account-list-cell-name .dropdown-menu .dropdown-item,
    html body .device-list-action-menu .dropdown-item,
    html body .conexgo-row-action-menu .dropdown-item {
        min-height: 38px !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        border-radius: 6px !important;
        background: transparent !important;
        color: #2c4c6c !important;
        font-size: 13.5px !important;
        font-weight: 650 !important;
        line-height: 1.2 !important;
        text-decoration: none !important;
    }

        html body .conexgo-pagedlist-table .dropdown-menu .dropdown-item > :is(i, span[class*="fa"]),
        html body .account-list-cell-name .dropdown-menu .dropdown-item > :is(i, span[class*="fa"]),
        html body .device-list-action-menu .dropdown-item > :is(i, span[class*="fa"]),
        html body .conexgo-row-action-menu .dropdown-item > :is(i, span[class*="fa"]) {
            width: 18px !important;
            min-width: 18px !important;
            padding-right: 0 !important;
            color: #537594 !important;
            font-size: 13px !important;
            text-align: center !important;
        }

        html body .conexgo-pagedlist-table .dropdown-menu .dropdown-item:hover,
        html body .conexgo-pagedlist-table .dropdown-menu .dropdown-item:focus-visible,
        html body .account-list-cell-name .dropdown-menu .dropdown-item:hover,
        html body .account-list-cell-name .dropdown-menu .dropdown-item:focus-visible,
        html body .device-list-action-menu .dropdown-item:hover,
        html body .device-list-action-menu .dropdown-item:focus-visible,
        html body .conexgo-row-action-menu .dropdown-item:hover,
        html body .conexgo-row-action-menu .dropdown-item:focus-visible {
            background: #edf4f8 !important;
            color: #2c4c6c !important;
            outline: none !important;
            transform: none !important;
        }

html body :is( .conexgo-pagedlist-table .dropdown-menu, .account-list-cell-name .dropdown-menu, .device-list-action-menu, .conexgo-row-action-menu ) .dropdown-item.text-danger {
    color: #bd3448 !important;
}

html body .device-list-action-group,
html body .account-list-cell-name .conexgo-row-action-group {
    position: relative !important;
    overflow: visible !important;
}

html body .device-list-action-group {
    width: min(100%, 380px) !important;
    min-width: min(330px, 100%) !important;
}

html body .account-list-cell-name .conexgo-row-action-group {
    width: 100% !important;
    min-width: 270px !important;
}

html body .device-list-action-group .device-list-name-button,
html body .account-list-cell-name .account-list-name-button {
    min-width: 0 !important;
    min-height: 48px !important;
    height: 48px !important;
    border-color: #315879 !important;
    background: #ffffff !important;
    color: #2c4c6c !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

    html body .device-list-action-group .device-list-name-button:is(:hover, :focus-visible, :active),
    html body .account-list-cell-name .account-list-name-button:is(:hover, :focus-visible, :active) {
        border-color: #315879 !important;
        background: #ffffff !important;
        color: #2c4c6c !important;
        box-shadow: none !important;
        transform: none !important;
        filter: none !important;
    }

html body .account-list-cell-name .account-list-name-button {
    max-width: none !important;
    padding-inline: 14px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body .account-list-cell-name .conexgo-row-action-toggle,
html body .device-list-action-toggle,
html body .account-list-cell-name .conexgo-row-action-toggle:hover,
html body .account-list-cell-name .conexgo-row-action-toggle:focus-visible,
html body .account-list-cell-name .conexgo-row-action-toggle:active,
html body .device-list-action-toggle:hover,
html body .device-list-action-toggle:focus-visible,
html body .device-list-action-toggle:active {
    width: 48px !important;
    min-width: 48px !important;
    flex: 0 0 48px !important;
    min-height: 48px !important;
    height: 48px !important;
    border-color: #315879 !important;
    background: #315879 !important;
    color: #ffffff !important;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
}

/* data-bs-display="static" disables Popper flipping. The menu is always below
   the split button; JS only calculates how much internal scrolling fits. */
@media (min-width: 768px) {
    html body :is(.device-list-action-group, .account-list-cell-name .conexgo-row-action-group) > :is(.device-list-action-menu, .conexgo-row-action-menu),
    html body :is(.device-list-action-group, .account-list-cell-name .conexgo-row-action-group) > :is(.device-list-action-menu, .conexgo-row-action-menu).show {
        position: absolute !important;
        inset: calc(100% + 5px) -8px auto auto !important;
        top: calc(100% + 5px) !important;
        right: -8px !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 !important;
    }

    html body .conexgo-pagedlist-table tbody tr:has(:is(.device-list-action-menu, .conexgo-row-action-menu).show),
    html body .conexgo-pagedlist-table tbody td:has(:is(.device-list-action-menu, .conexgo-row-action-menu).show),
    html body .table-responsive:has(:is(.device-list-action-menu, .conexgo-row-action-menu).show),
    html body .conexgo-pagedlist-table-region:has(:is(.device-list-action-menu, .conexgo-row-action-menu).show) {
        position: relative !important;
        overflow: visible !important;
        z-index: 2750 !important;
    }
}

@media (max-width: 767.98px) {
    html body .device-list-action-group,
    html body .account-list-cell-name .conexgo-row-action-group {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ---------------------------------------------------------------
   4. Pagination hover — stable visual state
   --------------------------------------------------------------- */
html body .conexgo-pagedlist-pagination
.page-item:not(.disabled):not(.conexgo-pagedlist-page-status)
.page-link,
html body .conexgo-pagedlist-pagination
.page-item:not(.disabled):not(.conexgo-pagedlist-page-status)
.page-link:hover,
html body .conexgo-pagedlist-pagination
.page-item:not(.disabled):not(.conexgo-pagedlist-page-status)
.page-link:focus-visible,
html body .conexgo-pagedlist-pagination
.page-item:not(.disabled):not(.conexgo-pagedlist-page-status)
.page-link:active {
    border-color: #cfd8e3 !important;
    background: #ffffff !important;
    color: #2c4c6c !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    outline: none !important;
    transition: none !important;
}

/* Keep mobile modal behavior untouched. */
@media (max-width: 767.98px) {
    html body .mud-dialog.cx-dialog-root.cx-standard-form-dialog,
    html body .mud-dialog.cx-dialog-root.cx-device-config-dialog,
    html body .mud-dialog.cx-dialog-root.cx-r8-account-email {
        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;
    }
}
/* CONEXGO R18-32 UI NORMALIZATION END */

/* CONEXGO R18-37 V6 QA FINAL START */
/* Final QA layer: centralized CSS only. No Razor-local <style> blocks. */

/* --------------------------------------------------------------------------
   Device status alignment
   -------------------------------------------------------------------------- */
html body .device-status-icons > .fa-stack,
html body .device-status-icons .conexgo-device-battery-stack {
    transform: translateY(3px) !important;
}

@media (max-width: 991.98px) {
    html body .device-mobile-battery,
    html body .device-mobile-battery > .fa-stack-1x,
    html body .device-mobile-status-icons > .fa-stack {
        transform: translateY(2px) !important;
    }

    html body .device-mobile-status-icons {
        min-width: 0 !important;
        max-width: 118px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 2px !important;
        overflow: visible !important;
    }

        html body .device-mobile-status-icons > * {
            flex: 0 0 24px !important;
            width: 24px !important;
            min-width: 24px !important;
            max-width: 24px !important;
        }
}

/* --------------------------------------------------------------------------
   Short tables + row action menus — R18-44
   Menus are overlays with their own scroll; no artificial table padding.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    html body .table-responsive:has(.conexgo-row-action-menu.show),
    html body .table-responsive:has(.device-list-action-menu.show),
    html body .conexgo-pagedlist-table-region:has(.conexgo-row-action-menu.show),
    html body .conexgo-pagedlist-table-region:has(.device-list-action-menu.show) {
        position: relative !important;
        padding-bottom: 0 !important;
        overflow-y: visible !important;
    }
}

/* --------------------------------------------------------------------------
   Limited-role responsive shell
   Customer/User/Admin/Operator use the bottom quick navigation on mobile.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    html body .cx-restricted-mobile-sidebar-toggle {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    html,
    body {
        overflow-x: hidden !important;
    }

        /* Reserve bottom-nav space only once (the footer owns it). */
        html body .main-content.app-content {
            padding-bottom: 8px !important;
        }

        html body .footer,
        html body .conexgo-enterprise-footer {
            margin-top: 8px !important;
            padding-bottom: 0 !important;
        }

        html body .conexgo-enterprise-footer__inner {
            min-height: 0 !important;
            padding: 9px 12px calc(74px + env(safe-area-inset-bottom, 0px)) !important;
        }

        html body .device-list-data-row {
            padding-bottom: 0 !important;
            margin-bottom: 0 !important;
        }

            html body .device-list-data-row,
            html body .device-list-data-row > div,
            html body .device-list-data-row .table-responsive,
            html body .device-list-data-row .conexgo-pagedlist-table-region,
            html body .device-list-data-row .conexgo-pagedlist-table-column,
            html body .device-list-data-row .conexgo-pagedlist-native-mobile {
                max-width: 100% !important;
                min-width: 0 !important;
            }

                html body .device-list-data-row .conexgo-pagedlist-native-mobile tbody tr {
                    max-width: 100% !important;
                    min-width: 0 !important;
                }

        html body .device-list-action-menu,
        html body .device-list-action-menu.show,
        html body .conexgo-row-action-menu.show {
            position: fixed !important;
            top: auto !important;
            right: 10px !important;
            bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
            left: 10px !important;
            width: min(430px, calc(100vw - 20px)) !important;
            max-width: min(430px, calc(100vw - 20px)) !important;
            max-height: min(58dvh, 500px) !important;
            margin-inline: auto !important;
            transform: none !important;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            background: #fff !important;
            opacity: 1 !important;
            z-index: 3000 !important;
        }
}

/* --------------------------------------------------------------------------
   Dashboard: no preserved masonry gaps when cards are collapsed on mobile.
   Customer default visual order follows the V6 QA document.
   -------------------------------------------------------------------------- */
.cx-dashboard-customer-order > .conexgo-dashboard-smart-item[data-dashboard-key="deviceStatus"] {
    order: 1 !important;
}

.cx-dashboard-customer-order > .conexgo-dashboard-smart-item[data-dashboard-key="latestAlerts"] {
    order: 2 !important;
}

.cx-dashboard-customer-order > .conexgo-dashboard-smart-item[data-dashboard-key="alertTrend"] {
    order: 3 !important;
}

.cx-dashboard-customer-order > .conexgo-dashboard-smart-item[data-dashboard-key="topAlertDevices"] {
    order: 4 !important;
}

.cx-dashboard-customer-order > .conexgo-dashboard-smart-item[data-dashboard-key="totalDevices"] {
    order: 5 !important;
}

.cx-dashboard-customer-order > .conexgo-dashboard-smart-item[data-dashboard-key="offlineDevices"] {
    order: 6 !important;
}

.cx-dashboard-customer-order > .conexgo-dashboard-smart-item[data-dashboard-key="activeUsers"] {
    order: 7 !important;
}

@media (max-width: 767.98px) {
    html body .cx-dashboard-page #conexgoDashboardSmartGrid.conexgo-dashboard-content-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        align-content: flex-start !important;
        gap: 10px !important;
        height: auto !important;
        min-height: 0 !important;
    }

    html body .cx-dashboard-page #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item,
    html body .cx-dashboard-page #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item[data-masonry-positioned="true"] {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        grid-row: auto !important;
    }

        html body .cx-dashboard-page #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item:has(> .conexgo-dashboard-minimized-card),
        html body .cx-dashboard-page #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item:has(> .conexgo-dashboard-card-closing) {
            flex: 0 0 auto !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
        }

    html body .cx-dashboard-page .conexgo-dashboard-minimized-card,
    html body .cx-dashboard-page .conexgo-dashboard-card-closing {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        resize: none !important;
    }
}

/* --------------------------------------------------------------------------
   Device Add/Edit contacts and business-rule notes
   -------------------------------------------------------------------------- */
html body .cx-device-contact-template,
html body textarea.cx-device-contact-template {
    line-height: 1.2 !important;
    white-space: pre-wrap;
}

html body .cx-device-contact-template--readonly {
    padding: 10px 12px !important;
    border: 1px solid #dce5ed !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    color: #34495e !important;
}

html body .cx-device-dati-managed-note,
html body .cx-device-emergency-access-note {
    display: flex !important;
    align-items: flex-start !important;
    gap: 9px !important;
    margin: 10px 0 14px !important;
    padding: 11px 13px !important;
    border: 1px solid #d7e2ec !important;
    border-left: 4px solid #315879 !important;
    border-radius: 9px !important;
    background: #f2f7fb !important;
    color: #3f5265 !important;
    line-height: 1.4 !important;
}

html body .cx-device-emergency-access-note--locked {
    border-left-color: #b85b66 !important;
    background: #fff5f6 !important;
}

html body .cx-device-emergency-access-note--editable {
    border-left-color: #4c8362 !important;
    background: #f2faf5 !important;
}

/* --------------------------------------------------------------------------
   Password visibility toggles
   -------------------------------------------------------------------------- */
html body .cx-password-input-shell,
html body .cx-password-dialog__control {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
}

    html body .cx-password-input-shell .form-control,
    html body .cx-password-dialog__control .form-control {
        width: 100% !important;
        min-width: 0 !important;
        padding-right: 42px !important;
        box-sizing: border-box !important;
    }

html body .cx-password-visibility-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 9px !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateY(-50%) !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: #496985 !important;
    cursor: pointer !important;
    z-index: 2 !important;
}

    html body .cx-password-visibility-toggle i {
        font-size: 13px !important;
        line-height: 1 !important;
    }

    html body .cx-password-visibility-toggle:hover,
    html body .cx-password-visibility-toggle:focus-visible {
        background: #edf3f7 !important;
        color: #244e73 !important;
        outline: none !important;
        transform: translateY(-50%) !important;
        box-shadow: none !important;
        filter: none !important;
    }

/* --------------------------------------------------------------------------
   Logs hub / Support hub
   -------------------------------------------------------------------------- */
html body .cx-logs-hub,
html body .cx-support-hub {
    overflow: hidden !important;
    border: 1px solid #dce5ed !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 18px rgba(44, 76, 108, .07) !important;
}

html body .cx-logs-hub__intro,
html body .cx-support-hub__header {
    padding: 16px 18px !important;
    background: #2c4c6c !important;
    color: #fff !important;
}

    html body .cx-support-hub__header .card-title {
        margin: 0 !important;
        color: #fff !important;
    }

html body .cx-logs-hub__grid,
html body .cx-support-hub__grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 12px !important;
}

html body .cx-logs-hub__card,
html body .cx-support-hub__card {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 14px !important;
    border: 1px solid #e0e7ee !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #2c4c6c !important;
    text-decoration: none !important;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease !important;
}

    html body .cx-logs-hub__card:hover,
    html body .cx-logs-hub__card:focus-visible,
    html body .cx-support-hub__card:hover,
    html body .cx-support-hub__card:focus-visible {
        border-color: #aac0d3 !important;
        background: #f3f8fb !important;
        box-shadow: 0 6px 16px rgba(44, 76, 108, .09) !important;
        transform: translateY(-1px) !important;
        outline: none !important;
    }

html body .cx-support-hub__label {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    font-weight: 750 !important;
}

html body .cx-support-hub__external {
    color: #7890a5 !important;
    font-size: .8rem !important;
}

/* Report list no-subscription state. */
html body .cx-report-not-subscribed {
    color: #7b8794 !important;
    font-weight: 600 !important;
}

/* Ensure all Last Updated variants keep the Conexgo accent. */
html body .mud-dialog :is( .cx-device-config-last-updated, .device-dot-last-updated, .device-geofence-last-updated ) {
    border-left: 4px solid #315879 !important;
    border-inline-start: 4px solid #315879 !important;
}

/* Pagination keeps the exact same visual state on hover/focus. */
html body .conexgo-pagedlist-pagination .page-item:not(.disabled):not(.conexgo-pagedlist-page-status) .page-link:hover,
html body .conexgo-pagedlist-pagination .page-item:not(.disabled):not(.conexgo-pagedlist-page-status) .page-link:focus-visible {
    border-color: #cfd8e3 !important;
    background: #ffffff !important;
    color: #2c4c6c !important;
    box-shadow: none !important;
    transform: none !important;
}

/* CONEXGO R18-37 V6 QA FINAL END */

/* CONEXGO R18-37 V6 RESPONSIVE FINAL START */
/*
   Final responsive normalization requested during V6 pre-release QA.
   This block intentionally lives in site.css and is loaded last for the
   authenticated portal. No Razor-local <style> blocks are introduced.
*/

/* --------------------------------------------------------------------------
   Shared filter geometry: panel and table use the exact same content width.
   -------------------------------------------------------------------------- */
html body .cx-design-system .cx-filter-disclosure,
html body .cx-filter-disclosure,
html body .alert-list-card-body > .cx-filter-disclosure,
html body .cx-log-list-card .cx-filter-disclosure {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
}

html body .cx-filter-disclosure-region,
html body .cx-filter-disclosure-inner,
html body .cx-filter-disclosure-inner > .device-filter-panel--professional,
html body .cx-filter-disclosure-inner > .alert-filter-panel {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

html body .alert-list-card-body > .table-responsive,
html body .cx-log-list-card .card-body > .table-responsive {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
}

/* Alert filters must visually align with the table below instead of appearing
   narrower because of nested Bootstrap row margins. */
html body .alert-list-card-body .alert-filter-panel {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-inline: 12px !important;
}

    html body .alert-list-card-body .alert-filter-panel > [class*="col-"],
    html body .alert-list-card-body .alert-filter-inline {
        width: 100% !important;
        max-width: none !important;
        margin-inline: 0 !important;
    }

/* --------------------------------------------------------------------------
   Device filter economy: Battery shares the top toolbar with Reset.
   The six remaining filters form a balanced grid below.
   -------------------------------------------------------------------------- */
html body .device-filter-toolbar {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 12px 18px !important;
}

html body .device-filter-toolbar-actions {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    min-width: 0 !important;
}

html body .device-filter-field--battery-toolbar {
    width: clamp(250px, 24vw, 390px) !important;
    min-width: 220px !important;
    max-width: 390px !important;
    flex: 0 1 390px !important;
}

    html body .device-filter-field--battery-toolbar .device-filter-control,
    html body .device-filter-field--battery-toolbar .cx-custom-select,
    html body .device-filter-field--battery-toolbar .cx-custom-select-trigger {
        width: 100% !important;
    }

html body .cx-filter-disclosure-inner .device-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
}

/* On truly wide workstations use the available width instead of leaving a
   second line of filters unnecessarily. */
@media (min-width: 1800px) {
    html body .cx-filter-disclosure-inner .device-filter-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

/* Data logs now use the exact shared Device filter component language. */
html body .cx-data-log-responsive-filter {
    width: 100% !important;
    max-width: none !important;
}

html body .cx-data-log-unified-toolbar {
    margin-bottom: 10px !important;
}

html body .cx-data-log-unified-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

html body .cx-data-log-unified-filter .device-filter-summary {
    display: flex !important;
    align-items: center !important;
    min-height: 34px !important;
}

html body .cx-data-log-unified-filter .device-filter-count {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #50677d !important;
    font-weight: 650 !important;
}

@media (max-width: 991.98px) {
    html body .device-filter-toolbar {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
    }

    html body .device-filter-toolbar-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: end !important;
    }

    html body .device-filter-field--battery-toolbar {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    html body .cx-filter-disclosure-inner .device-filter-grid,
    html body .cx-data-log-unified-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 639.98px) {
    html body .device-filter-toolbar-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

        html body .device-filter-toolbar-actions .device-filter-reset {
            width: 100% !important;
        }

    html body .cx-filter-disclosure-inner .device-filter-grid,
    html body .cx-data-log-unified-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

/* --------------------------------------------------------------------------
   Device Add/Edit: same read-only creation-date treatment as Account Add/Edit.
   -------------------------------------------------------------------------- */
html body .cx-r1-device-created-row .cx-readonly-value {
    width: 100% !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 12px !important;
    border: 1px solid #d2dee9 !important;
    border-radius: 9px !important;
    background: #f5f8fb !important;
    color: #294b6b !important;
    font-weight: 650 !important;
}

    html body .cx-r1-device-created-row .cx-readonly-value > i {
        width: 32px !important;
        height: 32px !important;
        display: inline-grid !important;
        place-items: center !important;
        flex: 0 0 32px !important;
        border-radius: 8px !important;
        background: #e9f1f7 !important;
        color: #315879 !important;
    }

/* Form rhythm remains compact but scales gently instead of feeling glued
   together on workstation-size displays. */
html body .mud-dialog .cx-r1-form-row {
    margin-bottom: clamp(.55rem, .42rem + .12vw, .85rem) !important;
}

    html body .mud-dialog .cx-r1-form-row:last-child {
        margin-bottom: 0 !important;
    }

/* --------------------------------------------------------------------------
   Fluid workstation / control-center scaling.
   The old 1780px hard ceiling made 2K/4K screens look tiny. Keep ordinary
   desktops unchanged, then progressively use more viewport and larger UI.
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
    html body .main-content.app-content .main-container.container-fluid {
        width: 100% !important;
        max-width: min(3200px, calc(100vw - clamp(56px, 4vw, 132px))) !important;
        margin-inline: auto !important;
        padding-inline: clamp(26px, 2.25vw, 68px) !important;
    }

    html body .main-content.app-content {
        font-size: clamp(.94rem, .83rem + .11vw, 1.08rem) !important;
    }

    html body .page-title {
        font-size: clamp(1.65rem, 1.32rem + .34vw, 2.15rem) !important;
    }

    html body .breadcrumb,
    html body .form-label,
    html body .device-filter-label,
    html body .conexgo-pagedlist-table {
        font-size: clamp(.84rem, .76rem + .09vw, 1rem) !important;
    }

    html body .form-control,
    html body .form-select,
    html body .cx-custom-select-trigger,
    html body .cx-control,
    html body .mud-input-control {
        min-height: clamp(44px, 40px + .25vw, 52px) !important;
        font-size: clamp(.9rem, .82rem + .08vw, 1.04rem) !important;
    }

    html body .btn:not(.btn-sm):not(.btn-icon),
    html body .cx-page-action,
    html body .device-filter-reset {
        min-height: clamp(40px, 37px + .22vw, 48px) !important;
        font-size: clamp(.85rem, .78rem + .07vw, 1rem) !important;
    }

    html body .conexgo-pagedlist-table th,
    html body .conexgo-pagedlist-table td {
        padding-block: clamp(10px, 8px + .18vw, 15px) !important;
        padding-inline: clamp(11px, 9px + .18vw, 17px) !important;
    }

    html body .cx-filter-disclosure-toggle {
        min-height: clamp(50px, 46px + .22vw, 58px) !important;
        padding-inline: clamp(14px, 1vw, 22px) !important;
    }

    html body .cx-filter-disclosure-title {
        font-size: clamp(.88rem, .8rem + .08vw, 1.03rem) !important;
    }
}

/* 2K and ultrawide workstations. */
@media (min-width: 1920px) {
    html {
        font-size: 17px;
    }

        html body .main-header,
        html body .app-sidebar {
            font-size: 1rem !important;
        }

        html body .mud-dialog.cx-dialog-root.cx-standard-form-dialog,
        html body .mud-dialog.cx-dialog-root.cx-device-config-dialog,
        html body .mud-dialog.cx-dialog-root.cx-r8-account-email {
            width: min(clamp(1120px, 58vw, 1760px), calc(100vw - 96px)) !important;
            max-width: min(clamp(1120px, 58vw, 1760px), calc(100vw - 96px)) !important;
        }

        html body .mud-dialog.cx-dialog-root:is( .cx-r1-device-addedit, .cx-r1-device-geofence, .cx-r1-device-message, .cx-r1-account-addedit, .cx-r1-devicemodel-addedit, .cx-terms-dialog, .cx-report-subscribe-dialog ) {
            width: min(clamp(1260px, 68vw, 1960px), calc(100vw - 96px)) !important;
            max-width: min(clamp(1260px, 68vw, 1960px), calc(100vw - 96px)) !important;
        }

        html body .mud-dialog .cx-dialog-content,
        html body .mud-dialog .mud-dialog-content {
            padding-inline: clamp(22px, 1.55vw, 42px) !important;
        }
}

/* Large 4K/control-center displays: scale enough to remain readable without
   turning the portal into a stretched kiosk interface. */
@media (min-width: 2560px) {
    html {
        font-size: 18px;
    }

        html body .main-content.app-content .main-container.container-fluid {
            max-width: min(3400px, calc(100vw - clamp(96px, 4vw, 180px))) !important;
        }

        html body .main-header .header-link-icon,
        html body .main-header .header-icon {
            transform: scale(1.06);
            transform-origin: center;
        }

        html body .conexgo-pagedlist-table {
            font-size: 1rem !important;
        }

        html body .mud-dialog.cx-dialog-root.cx-standard-form-dialog,
        html body .mud-dialog.cx-dialog-root.cx-device-config-dialog,
        html body .mud-dialog.cx-dialog-root.cx-r8-account-email {
            width: min(64vw, 1860px) !important;
            max-width: min(64vw, 1860px) !important;
        }

        html body .mud-dialog.cx-dialog-root:is( .cx-r1-device-addedit, .cx-r1-device-geofence, .cx-r1-device-message, .cx-r1-account-addedit, .cx-r1-devicemodel-addedit, .cx-terms-dialog, .cx-report-subscribe-dialog ) {
            width: min(72vw, 2140px) !important;
            max-width: min(72vw, 2140px) !important;
        }
}

/* Preserve mobile behavior after the wide-screen rules above. */
@media (max-width: 767.98px) {
    html {
        font-size: 16px;
    }

        html body .mud-dialog.cx-dialog-root.cx-standard-form-dialog,
        html body .mud-dialog.cx-dialog-root.cx-device-config-dialog,
        html body .mud-dialog.cx-dialog-root.cx-r8-account-email,
        html body .mud-dialog.cx-dialog-root.cx-r1-device-addedit,
        html body .mud-dialog.cx-dialog-root.cx-r1-account-addedit {
            width: calc(100vw - 14px) !important;
            max-width: calc(100vw - 14px) !important;
        }
}
/* CONEXGO R18-37 V6 RESPONSIVE FINAL END */

/* ==========================================================================
   CONEXGO R18-38.3 - VISUAL STYLE RESTORATION
   Keep R18-38 functionality and wide-screen layout, but remove the oversized
   typography/control scaling introduced during pre-release QA.
   ========================================================================== */

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

        html body .main-content.app-content {
            font-size: inherit !important;
        }

            /* Large displays use more width instead of globally enlarging the UI. */
            html body .main-content.app-content .main-container.container-fluid {
                width: 100% !important;
                max-width: min(3200px, calc(100vw - clamp(48px, 3.25vw, 120px))) !important;
                margin-inline: auto !important;
                padding-inline: clamp(22px, 1.55vw, 48px) !important;
            }

        html body .page-title {
            font-size: 1.55rem !important;
        }

        html body .breadcrumb {
            font-size: .82rem !important;
        }

        html body .form-label,
        html body .device-filter-label {
            font-size: 12px !important;
        }

        html body .form-control,
        html body .form-select,
        html body .cx-custom-select-trigger,
        html body .cx-control {
            min-height: 40px !important;
            font-size: 13.5px !important;
        }

        html body .btn:not(.btn-sm):not(.btn-icon),
        html body .cx-page-action,
        html body .device-filter-reset {
            min-height: 38px !important;
            font-size: 13px !important;
        }

        html body .conexgo-pagedlist-table {
            font-size: 13px !important;
        }

            html body .conexgo-pagedlist-table th {
                padding: 9px 10px !important;
                font-size: 12px !important;
                line-height: 1.25 !important;
            }

            html body .conexgo-pagedlist-table td {
                padding: 9px 10px !important;
                font-size: 13px !important;
                line-height: 1.35 !important;
            }

        html body .cx-filter-disclosure-toggle {
            min-height: 46px !important;
            padding: 7px 12px !important;
        }

        html body .cx-filter-disclosure-title {
            font-size: 13px !important;
        }

        html body .cx-filter-disclosure-chevron {
            width: 34px !important;
            height: 34px !important;
            min-width: 34px !important;
        }

        html body .cx-list-search .form-control,
        html body .cx-list-search input,
        html body .dataTables_filter .form-control,
        html body .dataTables_filter input {
            min-height: 40px !important;
            height: 40px !important;
            font-size: 13px !important;
        }

        html body .cx-list-search .btn,
        html body .dataTables_filter .btn {
            min-height: 40px !important;
            height: 40px !important;
            font-size: 13px !important;
        }
}

/* Device filters: compact utility row + balanced grid. */
html body .cx-filter-disclosure-inner > .device-filter-panel--professional {
    padding: 10px 12px 12px !important;
}

html body .device-filter-toolbar {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 8px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    gap: 10px !important;
}

html body .device-filter-toolbar-actions {
    width: auto !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    gap: 9px !important;
}

html body .device-filter-field--battery-toolbar {
    width: clamp(230px, 20vw, 300px) !important;
    min-width: 230px !important;
    max-width: 300px !important;
    flex: 0 1 300px !important;
}

html body .cx-filter-disclosure-inner .device-filter-label {
    min-height: 22px !important;
    gap: 5px !important;
    font-size: 11.5px !important;
}

html body .cx-filter-disclosure-inner .device-filter-label-icon {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px !important;
    border-radius: 7px !important;
}

html body .cx-filter-disclosure-inner .device-filter-control .cx-custom-select-trigger,
html body .device-filter-field--battery-toolbar .cx-custom-select-trigger {
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
}

html body .cx-filter-disclosure-inner .device-filter-grid {
    gap: 8px 10px !important;
}

html body .cx-filter-disclosure-inner .device-filter-reset {
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 11px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
}

/* PagedList: compact toolbar, pagination and table rhythm. */
html body .cx-paged-list .conexgo-pagedlist-toolbar {
    margin-bottom: 10px !important;
    padding-block: 2px 4px !important;
    gap: 10px 14px !important;
}

html body .cx-paged-list .conexgo-pagedlist-pagination .pagination {
    gap: 4px !important;
}

html body .cx-paged-list .conexgo-pagedlist-pagination .page-link {
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 7px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
}

html body .cx-paged-list .conexgo-pagedlist-page-status .page-link {
    min-width: 86px !important;
    font-size: 12px !important;
}

html body .cx-paged-list .conexgo-pagedlist-page-size .cx-custom-select-trigger,
html body .cx-paged-list .conexgo-pagedlist-page-size select,
html body .conexgo-pagedlist-page-size .cx-custom-select-trigger,
html body .conexgo-pagedlist-page-size select {
    min-height: 36px !important;
    height: 36px !important;
    font-size: 12.5px !important;
}

html body .conexgo-pagedlist-table td .small,
html body .conexgo-pagedlist-table td small {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
}

html body .conexgo-pagedlist-table td p {
    margin-bottom: 4px !important;
    line-height: 1.4 !important;
}

/* Dialogs stay fluid on control-center displays without global font zoom. */
@media (min-width: 1920px) {
    html {
        font-size: 16px !important;
    }

        html body .mud-dialog.cx-dialog-root.cx-standard-form-dialog,
        html body .mud-dialog.cx-dialog-root.cx-device-config-dialog,
        html body .mud-dialog.cx-dialog-root.cx-r8-account-email {
            width: min(62vw, 1620px) !important;
            max-width: min(62vw, 1620px) !important;
        }

        html body .mud-dialog.cx-dialog-root:is( .cx-r1-device-addedit, .cx-r1-device-geofence, .cx-r1-device-message, .cx-r1-account-addedit, .cx-r1-devicemodel-addedit, .cx-terms-dialog, .cx-report-subscribe-dialog ) {
            width: min(70vw, 1840px) !important;
            max-width: min(70vw, 1840px) !important;
        }
}

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

        html body .main-content.app-content .main-container.container-fluid {
            max-width: min(3400px, calc(100vw - clamp(88px, 3.5vw, 160px))) !important;
        }

        /* Small targeted readability increase only on truly huge displays. */
        html body .conexgo-pagedlist-table td {
            font-size: 13.5px !important;
        }

        html body .conexgo-pagedlist-table th {
            font-size: 12.5px !important;
        }

        html body .form-control,
        html body .form-select,
        html body .cx-custom-select-trigger,
        html body .cx-control {
            min-height: 42px !important;
            font-size: 14px !important;
        }
}

@media (max-width: 767.98px) {
    html {
        font-size: 16px !important;
    }

        html body .device-filter-toolbar,
        html body .device-filter-toolbar-actions {
            width: 100% !important;
            display: grid !important;
            grid-template-columns: minmax(0, 1fr) !important;
            align-items: stretch !important;
        }

        html body .device-filter-field--battery-toolbar {
            width: 100% !important;
            min-width: 0 !important;
            max-width: none !important;
        }

        html body .device-filter-toolbar-actions .device-filter-reset {
            width: 100% !important;
        }
}
/* CONEXGO R18-38.3 - VISUAL STYLE RESTORATION END */

/* ==========================================================================
   CONEXGO R18-38.4 - TERMS PERSISTENCE + ACTION POLISH
   ========================================================================== */

html body .mud-dialog.cx-terms-dialog .cx-terms-dialog-actions,
html body .mud-dialog.cx-terms-dialog .mud-dialog-actions {
    gap: 10px !important;
    padding: 12px 18px !important;
    align-items: center !important;
}

html body .mud-dialog.cx-terms-dialog .cx-dialog-action {
    min-height: 40px !important;
    padding: 0 14px !important;
    gap: 8px !important;
    border-radius: 9px !important;
    font-size: 12.5px !important;
    font-weight: 750 !important;
    letter-spacing: .005em !important;
}

html body .mud-dialog.cx-terms-dialog .cx-terms-action-icon {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 7px !important;
    line-height: 1 !important;
    transition: transform .16s ease, background-color .16s ease !important;
}

    html body .mud-dialog.cx-terms-dialog .cx-terms-action-icon i {
        margin: 0 !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }

html body .mud-dialog.cx-terms-dialog .cx-terms-action-icon--agree {
    color: #ffffff !important;
    background: rgba(255, 255, 255, .14) !important;
}

html body .mud-dialog.cx-terms-dialog .cx-terms-action-icon--logout {
    color: #536477 !important;
    background: #eef3f7 !important;
    border: 1px solid #dde6ed !important;
}

html body .mud-dialog.cx-terms-dialog .cx-dialog-action:hover .cx-terms-action-icon {
    transform: translateY(-1px) !important;
}

html body .mud-dialog.cx-terms-dialog .cx-dialog-action--save-close:hover .cx-terms-action-icon--agree {
    background: rgba(255, 255, 255, .22) !important;
}

html body .mud-dialog.cx-terms-dialog .cx-dialog-action--cancel:hover .cx-terms-action-icon--logout {
    background: #e5edf4 !important;
}

@media (max-width: 767.98px) {
    html body .mud-dialog.cx-terms-dialog .cx-terms-dialog-actions,
    html body .mud-dialog.cx-terms-dialog .mud-dialog-actions {
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    html body .mud-dialog.cx-terms-dialog .cx-dialog-action {
        min-height: 40px !important;
        padding-inline: 12px !important;
    }
}
/* CONEXGO R18-38.4 - TERMS PERSISTENCE + ACTION POLISH END */

/* ==========================================================================
   CONEXGO R18-38.5 - FILTER WIDTH + MAP QA + RESPONSIVE POLISH
   ========================================================================== */

/* Lists that place ResponsiveFilterPanel inside .card-body must visually match
   Device_List, where the disclosure sits directly in the card and spans the
   same width as the table. Bootstrap card-body adds 1rem on each side. */
@media (min-width: 576px) {
    html body .alert-list-card-body > .cx-filter-disclosure.cx-filter-table-width,
    html body .notification-list-card-body > .cx-filter-disclosure.cx-filter-table-width,
    html body .cx-log-list-card > .card-body > .cx-filter-disclosure.cx-filter-table-width {
        width: calc(100% + 2rem) !important;
        max-width: none !important;
        margin-left: -1rem !important;
        margin-right: -1rem !important;
        box-sizing: border-box !important;
    }
}

/* Keep the same full-width relationship on small screens without creating
   horizontal overflow because the Alert mobile card-body already removes
   its own horizontal padding. */
@media (max-width: 575.98px) {
    html body .cx-filter-disclosure.cx-filter-table-width {
        width: 100% !important;
        max-width: none !important;
        margin-inline: 0 !important;
    }
}

/* Device ergonomics:
   Battery belongs at the left edge of the utility row.
   Reset remains at the far right. Do not center the pair. */
@media (min-width: 768px) {
    html body .cx-filter-disclosure-inner .device-filter-toolbar {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) auto !important;
        align-items: end !important;
        column-gap: 14px !important;
        row-gap: 8px !important;
    }

    html body .cx-filter-disclosure-inner .device-filter-toolbar-actions {
        display: contents !important;
    }

    html body .cx-filter-disclosure-inner .device-filter-field--battery-toolbar {
        grid-column: 1 !important;
        justify-self: start !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 320px !important;
    }

    html body .cx-filter-disclosure-inner .device-filter-toolbar-actions > .device-filter-reset {
        grid-column: 3 !important;
        justify-self: end !important;
        align-self: end !important;
        width: auto !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 900px) {
    html body .cx-notification-device-filter .device-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    html body .cx-filter-disclosure-inner .device-filter-toolbar,
    html body .cx-filter-disclosure-inner .device-filter-toolbar-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
    }

    html body .cx-filter-disclosure-inner .device-filter-field--battery-toolbar {
        width: 100% !important;
        max-width: none !important;
    }

    html body .cx-filter-disclosure-inner .device-filter-toolbar-actions > .device-filter-reset {
        width: 100% !important;
    }
}

/* The Logs hub markup already contains a title and a description. They were
   inline because the copy wrapper had no layout rule. Stack them explicitly. */
html body .cx-logs-hub__grid {
    padding: 12px !important;
    background: #f6f8fb !important;
}

html body .cx-logs-hub__copy {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    display: grid !important;
    align-content: center !important;
    gap: 4px !important;
}

    html body .cx-logs-hub__copy strong {
        display: block !important;
        color: #294d70 !important;
        font-size: .94rem !important;
        font-weight: 760 !important;
        line-height: 1.25 !important;
    }

    html body .cx-logs-hub__copy small {
        display: block !important;
        color: #60758a !important;
        font-size: .78rem !important;
        font-weight: 500 !important;
        line-height: 1.42 !important;
        overflow-wrap: anywhere !important;
    }

html body .cx-logs-hub__icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 9px !important;
    background: #edf4f9 !important;
    color: #315f88 !important;
}

html body .cx-logs-hub__arrow {
    margin-left: auto !important;
    color: #557794 !important;
    font-size: .78rem !important;
}

html body .cx-logs-hub__card {
    min-height: 96px !important;
    align-items: center !important;
}

/* Mobile: the content area must never retain desktop sidebar geometry.
   The sidebar can overlay when opened, while the actual page uses 100%. */
@media (max-width: 767.98px) {
    html body .page,
    html body .page-main,
    html body .main-content.app-content,
    html body .main-content.app-content .side-app,
    html body .main-content.app-content .main-container.container-fluid,
    html body #conexgo-page-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    html body .main-content.app-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-inline: 0 !important;
    }

        html body .main-content.app-content .side-app {
            margin: 0 !important;
            padding: 0 !important;
        }

        html body .main-content.app-content .main-container.container-fluid {
            margin: 0 !important;
            padding-left: 8px !important;
            padding-right: 8px !important;
        }
}
/* CONEXGO R18-38.5 - FILTER WIDTH + MAP QA + RESPONSIVE POLISH END */

/* R18-38.6 alert-emphasis layer removed by R18-44: canonical classic alert queue is defined below. */


/* ==========================================================================
   CONEXGO R18-38.9 - RECOVERY PREMIUM UX
   No global descendant font override: icon fonts are protected.
   ========================================================================== */

:root {
    --cx-r38-9-text: #264765;
    --cx-r38-9-muted: #66798b;
    --cx-r38-9-line: #d8e3ec;
    --cx-r38-9-soft: #f7f9fb;
    --cx-r38-9-soft-blue: #edf4f8;
}

/* Restore the icon fonts destroyed by R18-38.8. */
html body :is(.mud-dialog, .cx-dialog-root, .nt-clock-card, .topbar-version-pill)
:is(.fa, .fas, .fa-solid) {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-style: normal !important;
}

html body :is(.mud-dialog, .cx-dialog-root, .nt-clock-card, .topbar-version-pill)
:is(.far, .fa-regular) {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

html body :is(.mud-dialog, .cx-dialog-root, .nt-clock-card, .topbar-version-pill)
:is(.fab, .fa-brands) {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    font-style: normal !important;
}

html body :is(.mud-dialog, .cx-dialog-root, .nt-clock-card, .topbar-version-pill)
[class^="fe "],
html body :is(.mud-dialog, .cx-dialog-root, .nt-clock-card, .topbar-version-pill)
[class*=" fe-"] {
    font-family: "feather" !important;
}

/* Targeted readability only. Never zoom the whole body/root. */
html body .page-title {
    color: #244765 !important;
    font-size: clamp(1.42rem, 1.38rem + .12vw, 1.58rem) !important;
    font-weight: 700 !important;
    letter-spacing: -.012em !important;
    line-height: 1.18 !important;
}

html body .breadcrumb,
html body .breadcrumb a {
    font-size: .86rem !important;
    font-weight: 560 !important;
}

/* Dashboard titles: stronger, not huge. */
html body .conexgo-dashboard-smart-grid .card-header .card-title,
html body .conexgo-dashboard-card-header .card-title,
html body .conexgo-dashboard-config-section-title,
html body .conexgo-dashboard-visibility-heading,
html body .conexgo-dashboard-config-header-button {
    font-weight: 700 !important;
    letter-spacing: -.008em !important;
}

html body .conexgo-dashboard-smart-grid .card-header .card-title {
    font-size: 1rem !important;
    line-height: 1.25 !important;
}

/* Common compact control size. */
html body .form-control:not(textarea),
html body .form-select,
html body .cx-custom-select-trigger,
html body .cx-control:not(textarea),
html body .device-filter-control .cx-custom-select-trigger,
html body .cx-filter-disclosure .cx-custom-select-trigger {
    min-height: 41px !important;
    height: 41px !important;
    font-size: 13.5px !important;
    line-height: 1.25 !important;
}

html body textarea.form-control,
html body textarea.cx-control {
    height: auto;
    min-height: 100px !important;
}

html body .form-label,
html body label.form-label,
html body .device-filter-label {
    color: #294b69 !important;
    font-size: 12px !important;
    font-weight: 650 !important;
}

html body .btn:not(.btn-sm):not(.btn-icon),
html body .cx-page-action,
html body .cx-dialog-action,
html body .device-filter-reset {
    min-height: 39px !important;
    font-size: 13px !important;
    font-weight: 650 !important;
}

/* Dialog typography: text elements only; never the icon elements. */
html body .mud-dialog.cx-dialog-root {
    color: var(--cx-r38-9-text) !important;
}

    html body .mud-dialog.cx-dialog-root :is( .mud-dialog-title, .mud-dialog-content, .mud-dialog-actions, label, input, textarea, select, button, p ) {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    /* Fieldsets */
    html body .mud-dialog.cx-dialog-root .cx-r1-section,
    html body .mud-dialog.cx-dialog-root .cx-modal-group-v21 {
        border: 1.6px solid #6f8da5 !important;
        border-radius: 11px !important;
        background: #fff !important;
        box-shadow: 0 1px 4px rgba(35, 60, 85, .05) !important;
    }

    html body .mud-dialog.cx-dialog-root .cx-r1-section-title,
    html body .mud-dialog.cx-dialog-root .cx-device-config-section-title {
        color: #244b6b !important;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
        font-size: .96rem !important;
        font-weight: 700 !important;
        line-height: 1.22 !important;
        letter-spacing: -.006em !important;
    }

    html body .mud-dialog.cx-dialog-root .cx-r1-section-icon,
    html body .mud-dialog.cx-dialog-root .cx-device-config-section-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        display: inline-grid !important;
        place-items: center !important;
        border-radius: 9px !important;
        background: var(--cx-r38-9-soft-blue) !important;
        color: #35678f !important;
        border: 1px solid #d8e5ee !important;
    }

    html body .mud-dialog.cx-dialog-root .cx-r1-section-description,
    html body .mud-dialog.cx-dialog-root .cx-device-config-section-description {
        color: #64788b !important;
        font-size: .87rem !important;
        font-weight: 450 !important;
        line-height: 1.45 !important;
    }

    /* Desktop dialog dimensions */
    html body .mud-dialog.cx-dialog-root.cx-standard-form-dialog {
        width: min(78vw, 1100px) !important;
        max-width: min(78vw, 1100px) !important;
        max-height: min(84dvh, 820px) !important;
    }

    html body .mud-dialog.cx-dialog-root.cx-terms-dialog {
        width: min(74vw, 1080px) !important;
        max-width: min(74vw, 1080px) !important;
        max-height: min(78dvh, 720px) !important;
    }

    html body .mud-dialog.cx-dialog-root.cx-report-subscribe-dialog {
        width: min(68vw, 920px) !important;
        max-width: min(68vw, 920px) !important;
        max-height: min(76dvh, 720px) !important;
    }

    html body .mud-dialog.cx-dialog-root:is( .cx-r1-device-addedit, .cx-r1-account-addedit, .cx-device-config-dialog, .cx-r1-device-geofence, .cx-r1-device-message ) {
        width: min(84vw, 1260px) !important;
        max-width: min(84vw, 1260px) !important;
        max-height: min(86dvh, 860px) !important;
    }

    html body .mud-dialog.cx-dialog-root .mud-dialog-content,
    html body .mud-dialog.cx-dialog-root .cx-dialog-content {
        min-height: 0 !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

@media (min-width: 1920px) {
    html body .mud-dialog.cx-dialog-root.cx-standard-form-dialog {
        width: min(58vw, 1180px) !important;
        max-width: min(58vw, 1180px) !important;
    }

    html body .mud-dialog.cx-dialog-root.cx-terms-dialog {
        width: min(56vw, 1180px) !important;
        max-width: min(56vw, 1180px) !important;
    }

    html body .mud-dialog.cx-dialog-root.cx-report-subscribe-dialog {
        width: min(48vw, 940px) !important;
        max-width: min(48vw, 940px) !important;
    }

    html body .mud-dialog.cx-dialog-root:is( .cx-r1-device-addedit, .cx-r1-account-addedit, .cx-device-config-dialog, .cx-r1-device-geofence, .cx-r1-device-message ) {
        width: min(66vw, 1420px) !important;
        max-width: min(66vw, 1420px) !important;
    }
}

@media (max-width: 991.98px) {
    html body .mud-dialog.cx-dialog-root,
    html body .mud-dialog.cx-dialog-root.cx-standard-form-dialog,
    html body .mud-dialog.cx-dialog-root.cx-terms-dialog,
    html body .mud-dialog.cx-dialog-root.cx-report-subscribe-dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        margin: 12px !important;
    }
}

@media (max-width: 575.98px) {
    html body .mud-dialog.cx-dialog-root,
    html body .mud-dialog.cx-dialog-root.cx-standard-form-dialog,
    html body .mud-dialog.cx-dialog-root.cx-terms-dialog,
    html body .mud-dialog.cx-dialog-root.cx-report-subscribe-dialog {
        width: calc(100vw - 10px) !important;
        max-width: calc(100vw - 10px) !important;
        max-height: calc(100dvh - 10px) !important;
        margin: 5px !important;
        border-radius: 12px !important;
    }
}

/* Topbar text weights only. */
html body .topbar-version-label {
    font-size: .7rem !important;
    font-weight: 500 !important;
    letter-spacing: .04em !important;
}

html body .topbar-version-value {
    font-size: .88rem !important;
    font-weight: 620 !important;
}

html body .nt-date-text {
    font-size: .84rem !important;
    font-weight: 560 !important;
}

html body .nt-clock-value {
    font-size: .89rem !important;
    font-weight: 600 !important;
}

html body .nt-clock-separator,
html body .nt-meridiem {
    font-size: .86rem !important;
    font-weight: 520 !important;
}

/* Alert cards remain strong but less neon. */
html body .conexgo-header-alerts .conexgo-alert-card {
    border-width: 2px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(31, 61, 90, .08) !important;
}

    html body .conexgo-header-alerts .conexgo-alert-card::before {
        width: 4px !important;
    }

html body .conexgo-header-alerts .conexgo-alert-card-title {
    color: #b42343 !important;
    font-size: 9.7pt !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
}

html body .conexgo-header-alerts .conexgo-alert-card-icon {
    width: 39px !important;
    height: 39px !important;
    min-width: 39px !important;
    border-width: 1.5px !important;
    box-shadow: none !important;
}

/* Log filter panels — full table width, same family as Data Logs. */
html body .cx-log-list-card .cx-log-filter-panel {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 10px !important;
}

html body .cx-log-filter-unified {
    padding: 10px 12px 12px !important;
}

html body .cx-log-filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)) !important;
    gap: 9px 12px !important;
}

    html body .cx-log-filter-grid .cx-custom-select,
    html body .cx-log-filter-grid .cx-custom-select-trigger,
    html body .cx-data-log-unified-grid .cx-custom-select,
    html body .cx-data-log-unified-grid .cx-custom-select-trigger,
    html body .device-filter-grid .cx-custom-select,
    html body .device-filter-grid .cx-custom-select-trigger {
        width: 100% !important;
        min-height: 41px !important;
        height: 41px !important;
    }

/* Tables: scroll when needed; do not chop phrases character by character. */
html body .cx-log-list-card .table-responsive,
html body .cx-list-card .table-responsive {
    overflow-x: auto !important;
    overscroll-behavior-inline: contain !important;
}

html body .cx-log-list-card .conexgo-pagedlist-table {
    min-width: 760px !important;
    table-layout: auto !important;
}

html body .conexgo-pagedlist-table th,
html body .conexgo-pagedlist-table td {
    word-break: normal !important;
    hyphens: none !important;
    vertical-align: top !important;
}

html body .conexgo-pagedlist-table td {
    overflow-wrap: break-word !important;
    line-height: 1.4 !important;
}

/* Keep R18-38.8 Profile Terms feature, without its font regression. */
html body .conexgo-profile-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
}

    html body .conexgo-profile-tabs > li > a {
        min-height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 8px 12px !important;
        border-radius: 9px !important;
        color: #315270 !important;
        font-size: .88rem !important;
        font-weight: 630 !important;
    }

        html body .conexgo-profile-tabs > li > a.active {
            color: #fff !important;
            background: #315879 !important;
        }

html body .cx-profile-terms {
    display: grid !important;
    gap: 14px !important;
}

html body .cx-profile-terms-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 14px !important;
    border: 1px solid var(--cx-r38-9-line) !important;
    border-radius: 11px !important;
    background: var(--cx-r38-9-soft) !important;
}

html body .cx-profile-terms-heading {
    min-width: 0 !important;
    display: flex !important;
    gap: 11px !important;
}

html body .cx-profile-terms-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 9px !important;
    color: #315f87 !important;
    background: #e9f2f8 !important;
    border: 1px solid #d5e3ed !important;
}

html body .cx-profile-terms-heading h2 {
    margin: 0 !important;
    color: #244b6d !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
}

html body .cx-profile-terms-heading p {
    margin: 4px 0 0 !important;
    color: var(--cx-r38-9-muted) !important;
    font-size: .87rem !important;
    line-height: 1.45 !important;
}

html body .cx-profile-terms-status {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 7px 9px !important;
    border-radius: 9px !important;
    font-size: .8rem !important;
    font-weight: 630 !important;
}

    html body .cx-profile-terms-status.is-accepted {
        color: #2f6b46 !important;
        background: #edf8f1 !important;
        border: 1px solid #cbe7d5 !important;
    }

    html body .cx-profile-terms-status.is-declined {
        color: #8c4550 !important;
        background: #fff3f4 !important;
        border: 1px solid #efd2d6 !important;
    }

html body .cx-profile-terms-document {
    max-height: 48vh !important;
    overflow-y: auto !important;
    padding: 16px 18px !important;
    border: 1px solid var(--cx-r38-9-line) !important;
    border-radius: 11px !important;
    background: #fff !important;
    color: #253e57 !important;
    font-size: .9rem !important;
    line-height: 1.58 !important;
}

html body .cx-profile-terms-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border: 1px solid #ead9dc !important;
    border-radius: 10px !important;
    background: #fff9f9 !important;
}

/* Matched + controls in Account list. */
html body .account-list-inline-add,
html body .account-list-document-add {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    display: inline-grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid #a8c8b1 !important;
    border-radius: 8px !important;
    background: #f7fbf8 !important;
    color: #37814e !important;
    font-size: 13px !important;
}

@media (max-width: 767.98px) {
    html body .page-title {
        font-size: 1.34rem !important;
    }

    html body .cx-log-list-card .conexgo-pagedlist-table {
        min-width: 680px !important;
    }

    html body .cx-profile-terms-header,
    html body .cx-profile-terms-actions {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }
}
/* CONEXGO R18-38.9 - RECOVERY PREMIUM UX END */

/* ==========================================================================
   CONEXGO R18-38.10 - NOTIFICATION / DEVICE PARITY + MOBILE LIST POLISH
   ========================================================================== */

/* Notifications now uses the exact Device filter composition:
   disclosure -> professional filter panel -> toolbar -> utility filter/reset
   -> uniform filter grid -> table. */
html body .notification-list-card > .cx-notification-filter-panel {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

    html body .notification-list-card > .cx-notification-filter-panel .cx-filter-disclosure-header {
        min-height: 48px !important;
    }

html body .notification-list-card-body {
    padding-top: 12px !important;
}

html body .cx-notification-device-filter {
    width: 100% !important;
    min-width: 0 !important;
}

    html body .cx-notification-device-filter .cx-notification-priority-toolbar {
        min-width: 0 !important;
    }

    html body .cx-notification-device-filter .device-filter-grid {
        grid-template-columns: repeat(2, minmax(220px, 320px)) !important;
        align-items: end !important;
        justify-content: start !important;
        gap: 10px 12px !important;
    }

    html body .cx-notification-device-filter .device-filter-field,
    html body .cx-notification-device-filter .device-filter-control,
    html body .cx-notification-device-filter .cx-custom-select,
    html body .cx-notification-device-filter .cx-custom-select-trigger,
    html body .cx-notification-device-filter .cx-notification-filter-date {
        width: 100% !important;
        min-width: 0 !important;
    }

        html body .cx-notification-device-filter .cx-custom-select-trigger,
        html body .cx-notification-device-filter .cx-notification-filter-date,
        html body .cx-notification-device-filter .cx-notification-filter-date input {
            min-height: 41px !important;
            height: 41px !important;
        }

    html body .cx-notification-device-filter .device-filter-label {
        min-height: 26px !important;
        margin-bottom: 5px !important;
    }

    /* Notification filtering is immediate, like Device. Keep the UI steady while
   the new query is being loaded. */
    html body .cx-notification-device-filter .device-filter-updating {
        min-height: 26px !important;
    }

/* Mobile Device list: every card must consume the available content width.
   The action toggle gets a fixed column; the name and status area get the rest. */
@media (max-width: 767.98px) {
    html body .device-list-data-row,
    html body .device-list-data-row > div,
    html body .device-list-data-row .table-responsive,
    html body .device-list-data-row .conexgo-pagedlist-table-region,
    html body .device-list-data-row .conexgo-pagedlist-table-column,
    html body .device-list-data-row .conexgo-pagedlist-native-mobile,
    html body .device-list-data-row .conexgo-pagedlist-native-mobile table,
    html body .device-list-data-row .conexgo-pagedlist-native-mobile tbody,
    html body .device-list-data-row .conexgo-pagedlist-native-mobile tr,
    html body .device-list-data-row .conexgo-pagedlist-native-mobile td {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

        html body .device-list-data-row .conexgo-pagedlist-native-mobile table,
        html body .device-list-data-row .conexgo-pagedlist-native-mobile tbody {
            display: block !important;
        }

            html body .device-list-data-row .conexgo-pagedlist-native-mobile tbody tr {
                display: block !important;
                margin-inline: 0 !important;
            }

                html body .device-list-data-row .conexgo-pagedlist-native-mobile tbody tr > td:first-child {
                    display: block !important;
                    padding-inline: 8px !important;
                }

    html body .device-list-action-group {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        align-items: stretch !important;
    }

        html body .device-list-action-group .device-list-name-button {
            width: auto !important;
            min-width: 0 !important;
            max-width: none !important;
            flex: 1 1 auto !important;
        }

        html body .device-list-action-group .device-list-action-toggle {
            width: 42px !important;
            min-width: 42px !important;
            flex: 0 0 42px !important;
        }

    html body .device-list-meta {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    html body .device-mobile-status.cx-device-mobile-status {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 7px !important;
    }

    html body .device-mobile-status .device-mobile-status-pill {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    html body .device-mobile-status .device-mobile-status-icons {
        width: auto !important;
        min-width: max-content !important;
        justify-content: flex-end !important;
        gap: 4px !important;
    }

    html body .cx-notification-device-filter .device-filter-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body .cx-notification-device-filter .device-filter-toolbar,
    html body .cx-notification-device-filter .device-filter-toolbar-actions {
        width: 100% !important;
    }

    html body .cx-notification-device-filter .device-filter-reset {
        width: 100% !important;
    }
}

/* Desktop list/menu: never reserve artificial vertical space just because an
   action menu is open. The menu remains an overlay above the table. */
@media (min-width: 992px) {
    html body .device-list-card,
    html body .device-list-card .card-body,
    html body .device-list-data-row,
    html body .device-list-data-row > div,
    html body .device-list-data-row .table-responsive,
    html body .device-list-data-row .conexgo-pagedlist-table-region,
    html body .device-list-data-row .conexgo-pagedlist-table-column {
        min-height: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

        html body .device-list-card:has(.device-list-action-menu.show),
        html body .device-list-data-row:has(.device-list-action-menu.show),
        html body .device-list-data-row .table-responsive:has(.device-list-action-menu.show) {
            min-height: 0 !important;
            padding-bottom: 0 !important;
            margin-bottom: 0 !important;
            overflow-y: visible !important;
        }
}
/* CONEXGO R18-38.10 END */

/* ==========================================================================
   CONEXGO R18-38.11 - DASHBOARD REFLOW / SIMPLE ALERTS / REPORT PREVIEW
   Centralized CSS only. No Razor-local <style> blocks.
   ========================================================================== */

/* Shared dashboard order: configuration options and rendered cards now follow
   the same priority sequence. */
.cx-dashboard-priority-order > .conexgo-dashboard-smart-item[data-dashboard-key="deviceStatus"] {
    order: 1 !important;
}

.cx-dashboard-priority-order > .conexgo-dashboard-smart-item[data-dashboard-key="latestAlerts"] {
    order: 2 !important;
}

.cx-dashboard-priority-order > .conexgo-dashboard-smart-item[data-dashboard-key="alertTrend"] {
    order: 3 !important;
}

.cx-dashboard-priority-order > .conexgo-dashboard-smart-item[data-dashboard-key="topAlertDevices"] {
    order: 4 !important;
}

.cx-dashboard-priority-order > .conexgo-dashboard-smart-item[data-dashboard-key="totalDevices"] {
    order: 5 !important;
}

.cx-dashboard-priority-order > .conexgo-dashboard-smart-item[data-dashboard-key="offlineDevices"] {
    order: 6 !important;
}

.cx-dashboard-priority-order > .conexgo-dashboard-smart-item[data-dashboard-key="activeUsers"] {
    order: 7 !important;
}

/* The dashboard is content-driven. Old fixed card heights were the source of
   large blank zones when a card had little data. The JS masonry layer owns
   only x/y placement; content owns height. */
@media (min-width: 1200px) {
    html body #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item > .conexgo-dashboard-resizable-card:not(.conexgo-dashboard-minimized-card) {
        min-height: 0 !important;
        resize: vertical !important;
        overflow: hidden !important;
    }
}

@media (max-width: 1199.98px) {
    html body #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item > .conexgo-dashboard-resizable-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        resize: none !important;
        overflow: visible !important;
    }
}

html body #conexgoDashboardSmartGrid .conexgo-dashboard-card-body-auto,
html body #conexgoDashboardSmartGrid .conexgo-dashboard-resizable-list,
html body #conexgoDashboardSmartGrid .card-body {
    min-height: 0 !important;
    max-height: none !important;
}

html body #conexgoDashboardSmartGrid .conexgo-dashboard-empty-state,
html body #conexgoDashboardSmartGrid .conexgo-dashboard-empty-state.compact {
    min-height: 0 !important;
}

    html body #conexgoDashboardSmartGrid .conexgo-dashboard-empty-state.compact {
        padding-block: 16px !important;
    }

/* Dashboard configuration: consistent rhythm and the same visual hierarchy as
   the cards it controls. */
html body .conexgo-dashboard-visibility-panel {
    align-items: stretch !important;
}

html body .conexgo-dashboard-visibility-option {
    min-height: 64px !important;
    border: 1px solid #d7e2ec !important;
    border-radius: 9px !important;
    background: #fff !important;
    transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease !important;
}

    html body .conexgo-dashboard-visibility-option:hover,
    html body .conexgo-dashboard-visibility-option:focus-within {
        border-color: #b9cfdf !important;
        background: #f8fbfd !important;
        box-shadow: 0 2px 8px rgba(44, 76, 108, .06) !important;
    }

    html body .conexgo-dashboard-visibility-option:has(input:checked) {
        border-color: #aec8db !important;
        background: #f2f7fb !important;
    }

html body .conexgo-dashboard-config-section,
html body .conexgo-dashboard-visibility-section {
    transition: background-color .14s ease, border-color .14s ease !important;
}

    html body .conexgo-dashboard-config-section:hover,
    html body .conexgo-dashboard-visibility-section:hover {
        border-color: #c6d8e6 !important;
        background: #fbfdff !important;
    }

/* Large displays: use more of the available surface without making cards or
   text oversized. Masonry JS increases to three columns at very wide widths. */
@media (min-width: 1800px) {
    html body .cx-dashboard-page {
        --cx-dashboard-wide-gap: 18px;
    }

    html body #conexgoDashboardSmartGrid .card-header .card-title {
        font-size: 1.04rem !important;
    }

    html body #conexgoDashboardSmartGrid .card-body {
        font-size: .94rem !important;
    }
}

/* Header alert queue — R18-44 classic Conexgo reference.
   Grey header, square blue bordered rows, red italic title, no decorative type icon. */
html body .conexgo-header-alerts .conexgo-alert-dropdown {
    width: 500px !important;
    max-width: calc(100vw - 20px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #d9e1e8 !important;
    border-radius: 8px !important;
    background: #fff !important;
    box-shadow: 0 12px 28px rgba(31, 61, 89, .14) !important;
}

html body .conexgo-header-alerts .conexgo-alert-dropdown-header--classic {
    min-height: 58px !important;
    padding: 10px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    border-bottom: 1px solid #24425e !important;
    background: #2c4c6c !important;
    color: #ffffff !important;
}

html body .conexgo-alert-classic-header-title {
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
}

    html body .conexgo-alert-classic-header-title i {
        color: #ffffff !important;
        font-size: 17px !important;
    }

html body .conexgo-alert-classic-clear-all {
    min-height: 36px !important;
    padding: 0 14px !important;
    border: 1px solid #83a0b9 !important;
    border-radius: 4px !important;
    background: #3e6a99 !important;
    color: #fff !important;
    font-size: 12.5px !important;
    font-weight: 650 !important;
    box-shadow: none !important;
}

html body .conexgo-alert-list--classic {
    max-height: min(430px, calc(100dvh - 190px)) !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #fff !important;
    scrollbar-width: thin;
    scrollbar-color: #a9b6c2 transparent;
}

html body .conexgo-header-alerts .conexgo-alert-card--classic {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 11px 14px 10px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    border: 3px solid #0b4ff0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
}

    html body .conexgo-header-alerts .conexgo-alert-card--classic + .conexgo-alert-card--classic {
        margin-top: 7px !important;
    }

    html body .conexgo-header-alerts .conexgo-alert-card--classic.conexgo-alert-card--english {
        border-color: #ef334d !important;
    }

    html body .conexgo-header-alerts .conexgo-alert-card--classic.conexgo-alert-card--default {
        border-color: #0b4ff0 !important;
    }

    html body .conexgo-header-alerts .conexgo-alert-card--classic::before {
        display: none !important;
        content: none !important;
    }

    html body .conexgo-header-alerts .conexgo-alert-card--classic:hover,
    html body .conexgo-header-alerts .conexgo-alert-card--classic:focus-within {
        background: #fff !important;
        box-shadow: none !important;
        transform: none !important;
    }

    html body .conexgo-header-alerts .conexgo-alert-card--classic.conexgo-alert-card--english:hover,
    html body .conexgo-header-alerts .conexgo-alert-card--classic.conexgo-alert-card--english:focus-within {
        border-color: #ef334d !important;
    }

    html body .conexgo-header-alerts .conexgo-alert-card--classic.conexgo-alert-card--default:hover,
    html body .conexgo-header-alerts .conexgo-alert-card--classic.conexgo-alert-card--default:focus-within {
        border-color: #0b4ff0 !important;
    }

html body .conexgo-alert-classic-copy {
    min-width: 0 !important;
}

html body .conexgo-header-alerts .conexgo-alert-card-title {
    color: #e31d35 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    font-style: italic !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere !important;
}

html body .conexgo-header-alerts .conexgo-alert-card-device {
    margin-top: 2px !important;
    color: #23364b !important;
    font-size: 12px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
}

html body .conexgo-alert-classic-meta {
    margin-top: 2px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

html body .conexgo-header-alerts .conexgo-alert-card-time {
    margin: 0 !important;
    color: #526375 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

html body .conexgo-alert-classic-language {
    min-width: 28px !important;
    padding: 2px 5px !important;
    border: 1px solid #0d6efd !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    color: #0d6efd !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-align: center !important;
}

html body .conexgo-alert-card--english .conexgo-alert-classic-language {
    border-color: #ef334d !important;
    color: #d9223c !important;
}

html body .conexgo-alert-classic-assignment {
    margin-top: 7px !important;
    padding-top: 6px !important;
    display: grid !important;
    gap: 1px !important;
    border-top: 1px solid #e3e9ef !important;
    color: #667789 !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
}

    html body .conexgo-alert-classic-assignment strong {
        color: #284c70 !important;
        font-size: 11.5px !important;
        font-weight: 700 !important;
    }


html body .conexgo-alert-classic-side {
    min-width: 38px !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 9px !important;
}

html body .conexgo-alert-classic-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
}

html body .conexgo-alert-classic-action {
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    color: #fff !important;
    font-size: 11.5px !important;
    font-weight: 650 !important;
    box-shadow: none !important;
    transform: none !important;
}

html body .conexgo-alert-classic-action.is-answer {
    width: auto !important;
    min-width: 48px !important;
    padding: 0 13px !important;
    gap: 7px !important;
    white-space: nowrap !important;
    border: 1px solid #78B842 !important;
    background: #78B842 !important;
}

    html body .conexgo-alert-classic-action.is-clear {
        border: 1px solid #1267c7 !important;
        background: #0d6efd !important;
    }

html body .conexgo-alert-empty--classic {
    padding: 22px 14px !important;
    color: #6d7b89 !important;
    font-size: 12px !important;
    text-align: center !important;
}

html body .conexgo-alert-see-all--classic,
html body .conexgo-alert-see-all--classic:hover,
html body .conexgo-alert-see-all--classic:focus-visible {
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-top: 1px solid #e2e6ea !important;
    background: #fff !important;
    color: #627083 !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

@media (max-width: 575.98px) {
    html body .conexgo-header-alerts .conexgo-alert-dropdown {
        width: min(430px, calc(100vw - 12px)) !important;
    }

    html body .conexgo-header-alerts .conexgo-alert-card--classic {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body .conexgo-alert-classic-side {
        width: 100% !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    html body .conexgo-alert-classic-actions {
        justify-content: flex-start !important;
    }
}

/* R18-45 — device list location hierarchy and alert customer cleanup. */
html body .device-list-table-shell td.device-location-cell {
    min-width: 300px !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    vertical-align: top !important;
}

html body .device-location-summary {
    min-width: 0 !important;
    display: grid !important;
    gap: 2px !important;
    color: #34495e !important;
    font-size: 13px !important;
    line-height: 1.34 !important;
}

html body .device-location-reported {
    color: #2c4c6c !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
}

html body .device-location-address {
    max-width: 100% !important;
    color: #34495e !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    overflow-wrap: anywhere !important;
}

html body .device-location-fix {
    color: #657586 !important;
    font-size: 11.5px !important;
}

    html body .device-location-fix > span {
        color: #52677a !important;
        font-weight: 650 !important;
    }

html body .alert-list-customer-cell {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
    color: #34495e !important;
    line-height: 1.35 !important;
}

html body .alert-list-customer-name {
    color: #2c4c6c !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

html body .alert-list-customer-address {
    color: #647486 !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
}

html body .alert-list-customer-empty {
    color: #8794a1 !important;
}

html body .alert-list-card td:has(> .alert-list-customer-cell) {
    width: 230px !important;
    min-width: 230px !important;
    max-width: 260px !important;
}

html body .alert-list-customer-address {
    overflow-wrap: normal !important;
    word-break: normal !important;
}

/* Report preview: exactly one useful scroll area. The dialog shell, fieldset
   and panel remain fixed while only the generated report body scrolls. */
html body .mud-dialog.cx-report-preview-dialog {
    height: min(88dvh, 900px) !important;
    max-height: min(88dvh, 900px) !important;
}

    html body .mud-dialog.cx-report-preview-dialog .mud-dialog-content {
        min-height: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    html body .mud-dialog.cx-report-preview-dialog .cx-report-preview-layout,
    html body .mud-dialog.cx-report-preview-dialog .cx-report-preview-section {
        min-height: 0 !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    html body .mud-dialog.cx-report-preview-dialog .report-preview-summary {
        flex: 0 0 auto !important;
    }

    html body .mud-dialog.cx-report-preview-dialog .report-preview-panel {
        min-height: 0 !important;
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    html body .mud-dialog.cx-report-preview-dialog .report-preview-toolbar {
        flex: 0 0 auto !important;
    }

    html body .mud-dialog.cx-report-preview-dialog .report-preview-scroll {
        min-height: 0 !important;
        max-height: none !important;
        flex: 1 1 auto !important;
        overflow: auto !important;
        overscroll-behavior: contain !important;
        scrollbar-gutter: stable !important;
        scrollbar-width: thin !important;
        scrollbar-color: #9db3c5 #eef3f7 !important;
    }

        html body .mud-dialog.cx-report-preview-dialog .report-preview-scroll::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        html body .mud-dialog.cx-report-preview-dialog .report-preview-scroll::-webkit-scrollbar-track {
            background: #eef3f7;
        }

        html body .mud-dialog.cx-report-preview-dialog .report-preview-scroll::-webkit-scrollbar-thumb {
            border: 2px solid #eef3f7;
            border-radius: 999px;
            background: #9db3c5;
        }

    html body .mud-dialog.cx-report-preview-dialog .report-preview-rendered-content {
        overflow: visible !important;
    }

        html body .mud-dialog.cx-report-preview-dialog .report-preview-rendered-content table {
            width: 100% !important;
            min-width: 720px !important;
            max-width: none !important;
        }

@media (max-width: 767.98px) {
    html body .mud-dialog.cx-report-preview-dialog {
        height: calc(100dvh - 12px) !important;
        max-height: calc(100dvh - 12px) !important;
    }

        html body .mud-dialog.cx-report-preview-dialog .report-preview-summary {
            margin-bottom: 10px !important;
            padding: 10px 12px !important;
        }

        html body .mud-dialog.cx-report-preview-dialog .report-preview-scroll {
            padding: 8px !important;
        }

        html body .mud-dialog.cx-report-preview-dialog .report-preview-rendered-content table {
            min-width: 620px !important;
        }
}

/* Restore the quiet hover previously used on dialog fieldsets. No movement,
   scale or decorative animation. */
html body .mud-dialog.cx-dialog-root .cx-r1-section,
html body .mud-dialog.cx-dialog-root .cx-modal-group-v21 {
    transition: background-color .14s ease, border-color .14s ease !important;
}

    html body .mud-dialog.cx-dialog-root .cx-r1-section:hover,
    html body .mud-dialog.cx-dialog-root .cx-r1-section:focus-within,
    html body .mud-dialog.cx-dialog-root .cx-modal-group-v21:hover,
    html body .mud-dialog.cx-dialog-root .cx-modal-group-v21:focus-within {
        border-color: #6f8da5 !important;
        background: #ffffff !important;
    }

/* Device list: sparse datasets and open action menus must never manufacture
   hundreds of pixels of empty card height. */
html body .device-list-card,
html body .device-list-card-body,
html body .device-list-data-row,
html body .device-list-data-row > div,
html body .device-list-table-shell,
html body .device-list-data-row .conexgo-pagedlist-table-region,
html body .device-list-data-row .conexgo-pagedlist-table-column {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

@media (min-width: 992px) {
    html body .device-list-card:has(.device-list-action-menu.show),
    html body .device-list-table-shell:has(.device-list-action-menu.show),
    html body .device-list-data-row:has(.device-list-action-menu.show),
    html body .device-list-data-row .table-responsive:has(.device-list-action-menu.show),
    html body .device-list-data-row .conexgo-pagedlist-table-region:has(.device-list-action-menu.show),
    html body .device-list-data-row .conexgo-pagedlist-table-column:has(.device-list-action-menu.show),
    html body .device-list-data-row .conexgo-pagedlist-table-column:has( tbody > tr:nth-last-child(-n+4) .device-list-action-menu.show ) {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        overflow: visible !important;
    }
}

/* Device table text: preserve natural words and stable vertical rhythm. */
@media (min-width: 992px) {
    html body .device-list-card .conexgo-pagedlist-table tbody td {
        vertical-align: top !important;
        line-height: 1.34 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
    }

        html body .device-list-card .conexgo-pagedlist-table tbody td:first-child,
        html body .device-list-card .conexgo-pagedlist-table tbody td:nth-child(2) {
            vertical-align: middle !important;
        }
}


/* R18-46.1 dashboard canonical stabilization.
   Fixed-content cards size to their content. Data-heavy cards keep bounded
   vertical resize and scroll only inside their list content. */
html body #conexgoDashboardSmartGrid .card-header {
    min-height: 50px !important;
    padding: 10px 12px !important;
}

    html body #conexgoDashboardSmartGrid .card-header .card-title,
    html body .conexgo-dashboard-configuration-card .card-header .card-title {
        min-width: 0 !important;
        margin: 0 !important;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: -.005em !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

html body #conexgoDashboardSmartGrid .card-body {
    min-width: 0 !important;
    min-height: 0 !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
}

html body #conexgoDashboardSmartGrid.conexgo-dashboard-single-column {
    grid-template-columns: minmax(0, 1fr) !important;
}

html body #conexgoDashboardSmartGrid .conexgo-dashboard-resizable-card {
    min-width: 0 !important;
    overflow: hidden !important;
}

/* These cards have a finite, semantic amount of content. Resizing them only
   created blank space and pointless scrollbars. */
html body #conexgoDashboardSmartGrid .conexgo-dashboard-content-fit-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    resize: none !important;
    overflow: hidden !important;
}

html body #conexgoDashboardSmartGrid
.conexgo-dashboard-smart-item[data-dashboard-key="deviceStatus"]
.conexgo-dashboard-table-card-body {
    min-height: 0 !important;
    overflow: hidden !important;
}

html body #conexgoDashboardSmartGrid
.conexgo-dashboard-smart-item[data-dashboard-key="deviceStatus"]
.conexgo-dashboard-table-scroll {
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: thin !important;
}

html body #conexgoDashboardSmartGrid
.conexgo-dashboard-smart-item[data-dashboard-key="deviceStatus"]
.conexgo-device-status-table {
    width: 100% !important;
    min-width: 560px !important;
    table-layout: fixed !important;
}

html body #conexgoDashboardSmartGrid .conexgo-device-status-table th {
    padding: 8px 7px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: normal !important;
}

html body #conexgoDashboardSmartGrid .conexgo-device-status-table td {
    padding: 9px 7px !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

html body #conexgoDashboardSmartGrid
.conexgo-dashboard-smart-item[data-dashboard-key="deviceStatus"]
.conexgo-device-status-table th:first-child,
html body #conexgoDashboardSmartGrid
.conexgo-dashboard-smart-item[data-dashboard-key="deviceStatus"]
.conexgo-device-status-table td:first-child {
    width: 34% !important;
}

/* Data-heavy cards: the shell never scrolls. Only the list body does. */
html body #conexgoDashboardSmartGrid .conexgo-dashboard-card-body-auto {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

html body #conexgoDashboardSmartGrid :is( .conexgo-dashboard-resizable-list, .conexgo-dashboard-active-users-list ) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
    scrollbar-color: #a7b7c5 transparent !important;
}

html body #conexgoDashboardSmartGrid .conexgo-dashboard-ranked-item,
html body #conexgoDashboardSmartGrid .conexgo-dashboard-latest-item,
html body #conexgoDashboardSmartGrid .conexgo-dashboard-active-user {
    min-width: 0 !important;
}

html body #conexgoDashboardSmartGrid .conexgo-dashboard-ranked-title,
html body #conexgoDashboardSmartGrid .conexgo-dashboard-latest-title,
html body #conexgoDashboardSmartGrid .conexgo-dashboard-ranked-subtitle {
    min-width: 0 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
}

html body #conexgoDashboardSmartGrid .conexgo-dashboard-filter-grid,
html body #conexgoDashboardSmartGrid .conexgo-dashboard-card-filter-row {
    min-width: 0 !important;
}

html body #conexgoDashboardSmartGrid .conexgo-dashboard-config-section-title,
html body #conexgoDashboardSmartGrid .form-label {
    font-size: 12px !important;
    font-weight: 650 !important;
}

/* Resize handles only make sense on data-heavy list cards. */
@media (min-width: 1200px) {
    html body #conexgoDashboardSmartGrid
    .conexgo-dashboard-smart-item[data-dashboard-key="latestAlerts"] > .conexgo-dashboard-resizable-card:not(.conexgo-dashboard-minimized-card),
    html body #conexgoDashboardSmartGrid
    .conexgo-dashboard-smart-item[data-dashboard-key="topAlertDevices"] > .conexgo-dashboard-resizable-card:not(.conexgo-dashboard-minimized-card),
    html body #conexgoDashboardSmartGrid
    .conexgo-dashboard-smart-item[data-dashboard-key="offlineDevices"] > .conexgo-dashboard-resizable-card:not(.conexgo-dashboard-minimized-card),
    html body #conexgoDashboardSmartGrid
    .conexgo-dashboard-smart-item[data-dashboard-key="activeUsers"] > .conexgo-dashboard-resizable-card:not(.conexgo-dashboard-minimized-card) {
        resize: vertical !important;
        overflow: hidden !important;
    }
}

@media (max-width: 1199.98px) {
    html body #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item > .conexgo-dashboard-resizable-card {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        resize: none !important;
        overflow: visible !important;
    }

    html body #conexgoDashboardSmartGrid :is( .conexgo-dashboard-resizable-list, .conexgo-dashboard-active-users-list ) {
        max-height: none !important;
        overflow-y: visible !important;
    }
}
/* R18-46.1 dashboard canonical stabilization END */


/* R18-43 release stabilization: current page indicator is informational, not a hover button. */
html body .conexgo-pagedlist-pagination .conexgo-pagedlist-page-status .page-link,
html body .conexgo-pagedlist-pagination .conexgo-pagedlist-page-status .page-link:hover,
html body .conexgo-pagedlist-pagination .conexgo-pagedlist-page-status .page-link:focus-visible,
html body .conexgo-pagedlist-pagination .conexgo-pagedlist-page-status .page-link:active {
    background: #315879 !important;
    border-color: #315879 !important;
    color: #fff !important;
    box-shadow: none !important;
    transform: none !important;
}

/* CONEXGO R18-44 RELEASE HOVER NORMALIZATION START */
/* Preserve each control's base colors. Hover adds only a small depth cue. */
button.btn:not(.dropdown-toggle):not([data-bs-toggle="dropdown"]):not([data-toggle="dropdown"]):not(:disabled):hover,
a.btn[role="button"]:not(.dropdown-toggle):hover,
input.btn[type="button"]:not(:disabled):hover,
input.btn[type="submit"]:not(:disabled):hover,
.mud-button-root:not(.mud-icon-button-root):not(.mud-tab):not(.mud-disabled):hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 10px rgba(44, 76, 108, .09) !important;
    filter: brightness(.99) !important;
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease !important;
}

/* Split buttons, selects, pickers and pagination status never recolor or move. */
.device-list-name-button:hover,
.device-list-name-button:focus-visible {
    border-color: #315879 !important;
    background: #fff !important;
    color: #2c4c6c !important;
    filter: none !important;
}

.dropdown-toggle:hover,
button[data-bs-toggle="dropdown"]:hover,
button[data-toggle="dropdown"]:hover,
button[aria-haspopup="listbox"]:hover,
button[role="combobox"]:hover,
.mud-select button:hover,
.mud-input-adornment button:hover,
.mud-picker button:hover,
.mud-date-picker button:hover,
.mud-time-picker button:hover,
.conexgo-pagedlist-page-status .page-link:hover {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
}

button.btn:not(.dropdown-toggle):not(:disabled):active,
a.btn[role="button"]:not(.dropdown-toggle):active,
input.btn:not(:disabled):active,
.mud-button-root:not(.mud-icon-button-root):not(.mud-tab):not(.mud-disabled):active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 4px rgba(44, 76, 108, .07) !important;
}
/* CONEXGO R18-44 RELEASE HOVER NORMALIZATION END */

/* R18-45.3 pre-integration polish: compact custom-select menus. */
html body .cx-custom-select-menu[data-cx-select-owner],
html body .cx-custom-select-menu--top-layer[popover] {
    padding: 5px !important;
    border-radius: 9px !important;
}

    html body .cx-custom-select-menu[data-cx-select-owner] .cx-custom-select-option,
    html body .cx-custom-select-menu--top-layer[popover] .cx-custom-select-option {
        min-height: 36px !important;
        padding: 6px 9px !important;
        grid-template-columns: minmax(0, 1fr) 24px !important;
        gap: 7px !important;
        border-radius: 7px !important;
        font-size: 13px !important;
        font-weight: 560 !important;
    }

    html body .cx-custom-select-menu[data-cx-select-owner] .cx-custom-select-option-check,
    html body .cx-custom-select-menu--top-layer[popover] .cx-custom-select-option-check {
        width: 24px !important;
        height: 24px !important;
    }

/* R18-45.3 pre-integration polish: keep shared list controls compact. */
html body .cx-paged-list .conexgo-pagedlist-size-select,
html body .cx-paged-list .conexgo-pagedlist-range-select {
    min-height: 36px !important;
    height: 36px !important;
    padding-block: 0 !important;
    font-size: 12.5px !important;
}

    html body .cx-paged-list .conexgo-pagedlist-size-select .cx-custom-select-value,
    html body .cx-paged-list .conexgo-pagedlist-range-select .cx-custom-select-value {
        font-size: 13px !important;
        font-weight: 600 !important;
    }

/* Keep Conexgo data links readable without turning dense tables into a wall of
   underlines. Focus/hover restores an underline for an obvious affordance. */
html body :is(.account-list-device-link, .account-list-email-link) {
    text-decoration: none !important;
    text-underline-offset: 2px !important;
}

    html body :is(.account-list-device-link, .account-list-email-link):is(:hover, :focus-visible) {
        text-decoration: underline !important;
    }


/* ==========================================================================
   CONEXGO R18-46.1 - RELEASE UI STABILIZATION
   ========================================================================== */

/* Account row action sizing is owned here; no Bootstrap hover recoloring. */
html body .account-list-cell-name {
    width: 285px !important;
    min-width: 285px !important;
}

html body .account-list-table-shell table {
    min-width: 1120px !important;
}

/* Shared pagination returns to the normal compact scale. */
html body .conexgo-pagedlist-pagination .pagination {
    gap: 4px !important;
}

html body .conexgo-pagedlist-pagination .page-link {
    min-width: 34px !important;
    height: 34px !important;
    padding-inline: 7px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
}

html body .conexgo-pagedlist-pagination .conexgo-pagedlist-page-status .page-link {
    min-width: 86px !important;
}

html body .conexgo-pagedlist-page-size .cx-custom-select-trigger,
html body .conexgo-pagedlist-range-select.cx-custom-select-trigger {
    min-height: 36px !important;
    height: 36px !important;
}

/* Report subscription is a focused workflow, not a full-screen form. */
html body .cx-report-subscribe-dialog .report-subscribe-form {
    gap: 14px !important;
}

html body .cx-report-subscribe-dialog .report-subscribe-section {
    padding: 16px 18px 18px !important;
}

html body .cx-report-subscribe-dialog .report-subscribe-time-menu {
    max-height: 260px !important;
    overflow-y: auto !important;
}

/* Structural Notification dropdown. The previous file only contained animation
   rules, leaving the Bootstrap defaults visible when the list was empty. */
html body .conexgo-header-notifications .conexgo-notification-dropdown {
    width: min(400px, calc(100vw - 24px)) !important;
    min-width: 320px !important;
    max-width: 400px !important;
    max-height: min(520px, calc(100dvh - 92px)) !important;
    margin-top: 10px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #cbd8e3 !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 38px rgba(31, 61, 89, .18) !important;
    color: #263f58 !important;
    z-index: 3200 !important;
}

html body .conexgo-notification-dropdown .conexgo-notification-dropdown-header {
    min-height: 64px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    background: #2c4c6c !important;
    color: #ffffff !important;
}

html body .conexgo-notification-dropdown .conexgo-notification-header-main {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
}

html body .conexgo-notification-dropdown .conexgo-notification-header-icon {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.09) !important;
    color: #fff !important;
}

html body .conexgo-notification-dropdown .conexgo-notification-header-title-wrap {
    min-width: 0 !important;
}

html body .conexgo-notification-dropdown .conexgo-notification-header-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #fff !important;
}

html body .conexgo-notification-dropdown .conexgo-notification-header-meta {
    margin-top: 2px !important;
    color: rgba(255,255,255,.78) !important;
    font-size: 11.5px !important;
    line-height: 1.25 !important;
}

html body .conexgo-notification-dropdown .conexgo-notification-header-count {
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 750 !important;
}

html body .conexgo-notification-dropdown .conexgo-notification-list {
    max-height: min(340px, calc(100dvh - 220px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
}

html body .conexgo-notification-dropdown .conexgo-notification-item {
    min-width: 0 !important;
    padding: 11px 13px !important;
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    border-bottom: 1px solid #e6edf3 !important;
    background: #fff !important;
    color: #263f58 !important;
    text-decoration: none !important;
    transform: none !important;
}

    html body .conexgo-notification-dropdown .conexgo-notification-item:is(:hover, :focus-visible) {
        background: #f5f9fc !important;
        color: #263f58 !important;
        transform: none !important;
    }

html body .conexgo-notification-dropdown .conexgo-notification-item-icon {
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: var(--cx-notification-icon-bg, #eef4f8) !important;
    color: var(--cx-notification-icon-color, #315879) !important;
}

html body .conexgo-notification-dropdown .conexgo-notification-item-content {
    min-width: 0 !important;
}

html body .conexgo-notification-dropdown .conexgo-notification-item-title {
    color: #2c4c6c !important;
    font-size: 12.5px !important;
    font-weight: 650 !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

html body .conexgo-notification-dropdown .conexgo-notification-item-time {
    margin-top: 3px !important;
    color: #748493 !important;
    font-size: 11px !important;
}

html body .conexgo-notification-dropdown .conexgo-notification-empty {
    min-height: 128px !important;
    padding: 24px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    color: #6d7e8e !important;
    font-size: 12.5px !important;
    text-align: center !important;
}

html body .conexgo-notification-dropdown .conexgo-notification-empty-icon {
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: #eef4f8 !important;
    color: #527493 !important;
    font-size: 16px !important;
}

html body .conexgo-notification-dropdown .conexgo-notification-see-all-wrap {
    border-top: 1px solid #e3ebf2 !important;
    background: #fbfcfd !important;
}

html body .conexgo-notification-dropdown .conexgo-notification-see-all {
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    background: #fbfcfd !important;
    color: #2c4c6c !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transform: none !important;
}

    html body .conexgo-notification-dropdown .conexgo-notification-see-all:is(:hover, :focus-visible) {
        background: #f1f6fa !important;
        color: #2c4c6c !important;
        transform: none !important;
    }

/* R18-46.1 END */

/* ==========================================================================
   CONEXGO R18-46.2 - PRE-PUSH REGRESSION REPAIR
   Canonical late overrides only.  This section intentionally owns the
   split-button density, row-menu overflow policy and notification filters.
   ========================================================================== */

/* 1) Account + Device split buttons: return to the Conexgo blue control.
   Rest/hover/focus/active are intentionally identical to avoid the color
   jump reported during R18-46.1 testing. */
html body :is( .device-list-action-group .device-list-name-button, .account-list-cell-name .account-list-name-button, .device-list-action-group .device-list-action-toggle, .account-list-cell-name .conexgo-row-action-toggle ),
html body :is( .device-list-action-group .device-list-name-button, .account-list-cell-name .account-list-name-button, .device-list-action-group .device-list-action-toggle, .account-list-cell-name .conexgo-row-action-toggle ):is(:hover, :focus-visible, :active) {
    min-height: 44px !important;
    height: 44px !important;
    border-color: #315879 !important;
    background: #315879 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
}

html body .device-list-action-group {
    width: min(100%, 340px) !important;
    min-width: min(300px, 100%) !important;
}

html body .account-list-cell-name {
    width: 255px !important;
    min-width: 255px !important;
}

    html body .account-list-cell-name .conexgo-row-action-group {
        width: 100% !important;
        min-width: 245px !important;
    }

html body :is( .device-list-action-group .device-list-action-toggle, .account-list-cell-name .conexgo-row-action-toggle ) {
    width: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
}

html body :is( .device-list-action-group .device-list-name-button, .account-list-cell-name .account-list-name-button ) {
    padding-inline: 12px !important;
    font-size: 13.5px !important;
    font-weight: 650 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* 2) Row action dropdowns: always below, never arbitrarily capped to 360/420px.
   JS sets an inline max-height only when the natural menu cannot fit below the
   trigger.  If everything fits, no scrollbar is shown. */
html body :is( .device-list-action-group, .account-list-cell-name .conexgo-row-action-group ) > :is(.device-list-action-menu, .conexgo-row-action-menu),
html body :is( .device-list-action-group, .account-list-cell-name .conexgo-row-action-group ) > :is(.device-list-action-menu, .conexgo-row-action-menu).show {
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
}

    html body :is( .device-list-action-group, .account-list-cell-name .conexgo-row-action-group ) > :is(.device-list-action-menu, .conexgo-row-action-menu).cx-row-menu-scrollable {
        max-height: var(--cx-row-menu-max-height) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        scrollbar-width: thin !important;
    }

@media (min-width: 768px) {
    html body :is(.device-list-action-group, .account-list-cell-name .conexgo-row-action-group) > :is(.device-list-action-menu, .conexgo-row-action-menu),
    html body :is(.device-list-action-group, .account-list-cell-name .conexgo-row-action-group) > :is(.device-list-action-menu, .conexgo-row-action-menu).show {
        position: absolute !important;
        top: calc(100% + 6px) !important;
        right: -4px !important;
        bottom: auto !important;
        left: auto !important;
        inset: calc(100% + 6px) -4px auto auto !important;
        width: min(300px, calc(100vw - 28px)) !important;
        min-width: 250px !important;
        margin: 0 !important;
        transform: none !important;
    }
}

/* 3) Notification filters: one aligned desktop row, compact controls, then
   progressive wrapping on smaller content widths.  The count already exists
   in the disclosure badge, so the duplicate summary is hidden. */
html body .cx-notification-device-filter {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(150px, 1fr)) max-content !important;
    align-items: end !important;
    gap: 10px 12px !important;
    padding: 12px 14px 14px !important;
}

    html body .cx-notification-device-filter > .device-filter-toolbar,
    html body .cx-notification-device-filter .device-filter-toolbar-actions,
    html body .cx-notification-device-filter > .device-filter-grid {
        display: contents !important;
    }

    html body .cx-notification-device-filter .device-filter-summary {
        display: none !important;
    }

    html body .cx-notification-device-filter .device-filter-field,
    html body .cx-notification-device-filter .cx-notification-priority-toolbar {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    html body .cx-notification-device-filter .cx-notification-priority-toolbar {
        order: 1 !important;
    }

    html body .cx-notification-device-filter > .device-filter-grid > .device-filter-field:nth-child(1) {
        order: 2 !important;
    }

    html body .cx-notification-device-filter > .device-filter-grid > .device-filter-field:nth-child(2) {
        order: 3 !important;
    }

    html body .cx-notification-device-filter > .device-filter-grid > .device-filter-field:nth-child(3) {
        order: 4 !important;
    }

    html body .cx-notification-device-filter > .device-filter-grid > .device-filter-field:nth-child(4) {
        order: 5 !important;
    }

    html body .cx-notification-device-filter .device-filter-reset {
        order: 6 !important;
    }

    html body .cx-notification-device-filter .device-filter-label {
        min-height: 24px !important;
        margin: 0 0 5px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    html body .cx-notification-device-filter :is( .cx-custom-select-trigger, .cx-notification-filter-date, .cx-notification-filter-date input ) {
        width: 100% !important;
        min-height: 38px !important;
        height: 38px !important;
        font-size: 13px !important;
    }

    html body .cx-notification-device-filter .device-filter-reset {
        min-width: 104px !important;
        min-height: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        align-self: end !important;
        white-space: nowrap !important;
    }

@media (max-width: 1199.98px) {
    html body .cx-notification-device-filter {
        grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
    }

        html body .cx-notification-device-filter .device-filter-reset {
            justify-self: start !important;
        }
}

@media (max-width: 899.98px) {
    html body .cx-notification-device-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 575.98px) {
    html body .cx-notification-device-filter {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 10px !important;
    }

        html body .cx-notification-device-filter .device-filter-reset {
            width: 100% !important;
        }
}

/* 4) Shared PagedList controls: compact again.  Only the requested hover
   behavior changes; navigation controls keep their normal dimensions. */
html body .cx-paged-list .conexgo-pagedlist-size-select {
    width: 112px !important;
    min-width: 112px !important;
    min-height: 36px !important;
    height: 36px !important;
}

    html body .cx-paged-list .conexgo-pagedlist-size-select .cx-custom-select-trigger {
        min-height: 36px !important;
        height: 36px !important;
        padding-inline: 10px !important;
    }

html body .conexgo-pagedlist-pagination .page-link,
html body .conexgo-pagedlist-pagination .page-link:hover,
html body .conexgo-pagedlist-pagination .page-link:focus-visible,
html body .conexgo-pagedlist-pagination .page-link:active {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
}

/* Mobile split controls stay full width, but not oversized. */
@media (max-width: 767.98px) {
    html body .device-list-action-group,
    html body .account-list-cell-name .conexgo-row-action-group {
        width: 100% !important;
        min-width: 0 !important;
    }

    html body .account-list-cell-name {
        width: auto !important;
        min-width: 0 !important;
    }
}

/* CONEXGO R18-46.2 END */


/* ==========================================================================
   CONEXGO R18-46.3 - RELEASE STABILIZATION
   Runtime guards + responsive shell corrections after R18-46.2.
   ========================================================================== */

/* Forms/dialogs: section boundaries must remain visible at rest. Interaction
   feedback is a restrained light-blue surface only; no movement/zoom. */
html body .mud-dialog.cx-dialog-root :is( .cx-r1-section, fieldset.cx-modal-group-v21, .cx-device-config-section, .alert-email-form, .alert-sms-form ) {
    border: 1.6px solid #6f8da5 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 4px rgba(35, 60, 85, .05) !important;
    transition: background-color .14s ease, border-color .14s ease, box-shadow .14s ease !important;
    transform: none !important;
}

    html body .mud-dialog.cx-dialog-root :is( .cx-r1-section, fieldset.cx-modal-group-v21, .cx-device-config-section, .alert-email-form, .alert-sms-form ):is(:hover, :focus-within) {
        border-color: #567c9c !important;
        background: #f4f8fc !important;
        box-shadow: 0 4px 12px rgba(44, 76, 108, .08) !important;
        transform: none !important;
    }

/* Header: keep Version and Date/Time visually balanced instead of allowing
   either pill to dominate the top bar. */
@media (min-width: 1241px) {
    html body .app-header-modern .app-header-main-row {
        grid-template-columns: minmax(210px, 1fr) minmax(320px, 390px) minmax(330px, 1fr) !important;
        column-gap: clamp(12px, 1.4vw, 22px) !important;
    }

    html body .app-header-modern .app-header-left-zone {
        gap: 11px !important;
    }

    html body .app-header-modern .topbar-version-pill {
        min-width: 124px !important;
        height: 40px !important;
        padding-inline: 12px !important;
    }

    html body .app-header-modern .app-header-center-zone .nt-clock-card {
        width: 100% !important;
        min-width: 300px !important;
        max-width: 390px !important;
        height: 40px !important;
    }
}

/* Only Master/Distributor render a sidebar toggle. For roles without one,
   remove the otherwise-empty hamburger column on responsive screens. */
@media (max-width: 991.98px) {
    html body .app-header-modern .app-header-left-zone:not(:has(> .app-sidebar__toggle)) {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
    }

        html body .app-header-modern .app-header-left-zone:not(:has(> .app-sidebar__toggle)) > .app-header-brand-link {
            grid-column: 1 !important;
            justify-self: start !important;
            justify-content: flex-start !important;
            padding-left: 2px !important;
        }

        html body .app-header-modern .app-header-left-zone:not(:has(> .app-sidebar__toggle)) > .topbar-version-pill {
            grid-column: 2 !important;
            justify-self: end !important;
        }

    html body .app-header-modern .app-header-center-zone {
        padding-top: 2px !important;
    }

        html body .app-header-modern .app-header-center-zone .nt-clock-card {
            width: min(100%, 440px) !important;
            max-width: 440px !important;
        }
}

@media (max-width: 575.98px) {
    html body .app-header-modern .main-container {
        padding: 6px 8px !important;
    }

    html body .app-header-modern .app-header-main-row {
        row-gap: 4px !important;
    }

    html body .app-header-modern .app-header-left-zone {
        gap: 6px !important;
    }

    html body .app-header-modern .app-sidebar__toggle {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        border-radius: 9px !important;
    }

    html body .app-header-modern .app-header-left-zone:not(:has(> .app-sidebar__toggle)) {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    html body .app-header-modern .app-header-brand-link {
        height: 36px !important;
    }

    html body .app-header-modern .header-brand-img {
        max-width: 102px !important;
        max-height: 28px !important;
    }

    html body .app-header-modern .topbar-version-pill {
        height: 36px !important;
        min-width: 84px !important;
        max-width: 98px !important;
        padding-inline: 7px !important;
        gap: 5px !important;
    }

    html body .app-header-modern .nt-clock-card {
        width: min(100%, 390px) !important;
        min-width: 0 !important;
        height: 36px !important;
        padding-inline: 9px !important;
        gap: 7px !important;
    }

    html body .app-header-modern .nt-date-text {
        font-size: 8.4pt !important;
    }

    html body .app-header-modern .nt-clock {
        padding-left: 8px !important;
        font-size: 8.8pt !important;
    }

    html body .app-header-modern .nt-seconds,
    html body .app-header-modern .nt-clock-separator-secondary {
        display: none !important;
    }
}

/* Dashboard customization: Add section and Quick actions are peer actions and
   belong on one desktop row. Keep the panel compact; visibility is below. */
@media (min-width: 1200px) {
    html body .cx-dashboard-page .conexgo-dashboard-config-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    html body .cx-dashboard-page .conexgo-dashboard-configuration-card > .card-body {
        padding: 14px !important;
    }

    html body .cx-dashboard-page .conexgo-dashboard-config-section,
    html body .cx-dashboard-page .conexgo-dashboard-visibility-section {
        padding: 11px 12px !important;
    }

    html body .cx-dashboard-page .conexgo-dashboard-visibility-section {
        margin-top: 12px !important;
    }

    html body .cx-dashboard-page .conexgo-dashboard-config-section-header,
    html body .cx-dashboard-page .conexgo-dashboard-visibility-heading {
        min-height: 44px !important;
        align-items: center !important;
    }

    html body .cx-dashboard-page .conexgo-dashboard-config-section.is-collapsed
    .conexgo-dashboard-config-section-header,
    html body .cx-dashboard-page .conexgo-dashboard-visibility-section.is-collapsed
    .conexgo-dashboard-visibility-heading {
        margin-bottom: 0 !important;
    }
}

/* Device configuration: expanded rows must turn into a true stacked mobile
   layout. Never compress text into character-wide legacy columns. */
@media (max-width: 767.98px) {
    html body .device-config-page-header,
    html body .device-config-card,
    html body .device-config-card-body,
    html body .device-config-sections-shell,
    html body .device-config-sections-shell .dataTables_wrapper,
    html body .device-config-sections-shell .row,
    html body .device-config-sections-shell .col-sm-12,
    html body .device-config-sections-shell .col-md-12 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    html body .device-config-card {
        overflow: hidden !important;
    }

    html body .device-config-card-body {
        padding: 8px !important;
    }

    html body .device-config-section-header {
        grid-template-columns: minmax(0, 1fr) 36px !important;
        gap: 8px !important;
        padding: 9px 10px !important;
    }

        html body .device-config-section-header .device-config-col-feature {
            grid-column: 1 !important;
            min-width: 0 !important;
            overflow-wrap: break-word !important;
            word-break: normal !important;
        }

        html body .device-config-section-header .device-config-col-toggle {
            grid-column: 2 !important;
        }

        html body .device-config-section-header .device-config-column-heading {
            display: none !important;
        }

    html body .device-config-section-content {
        grid-template-columns: 40px minmax(0, 1fr) !important;
        gap: 8px 10px !important;
        padding: 10px !important;
        overflow: hidden !important;
        align-items: start !important;
    }

        html body .device-config-section-content .device-config-col-customer {
            grid-column: 1 / -1 !important;
            grid-row: auto !important;
            width: 100% !important;
            min-width: 0 !important;
            padding-bottom: 8px !important;
        }

        html body .device-config-section-content .device-config-col-edit,
        html body .device-config-section-content .device-config-col-edit--standalone {
            grid-column: 1 !important;
            grid-row: 2 !important;
            width: 40px !important;
            min-width: 40px !important;
            align-self: start !important;
        }

        html body .device-config-section-content .device-config-col-value,
        html body .device-config-section--schedule.device-config-section-content .device-config-col-value,
        html body .device-config-section--ringtone.device-config-section-content .device-config-col-value--wide,
        html body .device-config-section--geofence.device-config-section-content .device-config-col-value--geofence {
            grid-column: 2 !important;
            grid-row: 2 !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            display: block !important;
            align-self: center !important;
            word-break: normal !important;
            overflow-wrap: break-word !important;
            white-space: normal !important;
        }

        html body .device-config-section-content :is( .device-config-col-email, .device-config-col-sms, .device-config-col-updated, .device-config-col-schedule ) {
            grid-column: 1 / -1 !important;
            grid-row: auto !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 100% !important;
            display: grid !important;
            grid-template-columns: minmax(86px, 112px) minmax(0, 1fr) !important;
            gap: 8px !important;
            padding-top: 8px !important;
            word-break: normal !important;
            overflow-wrap: break-word !important;
            white-space: normal !important;
        }

            html body .device-config-section-content :is( .device-config-col-email, .device-config-col-sms, .device-config-col-updated, .device-config-col-schedule ) * {
                min-width: 0 !important;
                max-width: 100% !important;
                word-break: normal !important;
                overflow-wrap: break-word !important;
                white-space: normal !important;
            }
}

/* No-location alerts should not leave a permanent "Loading" map placeholder. */
html body .alert-answer-map-canvas--empty {
    min-height: 150px !important;
    height: 150px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    color: #6b7e90 !important;
    background: #f8fafc !important;
}

    html body .alert-answer-map-canvas--empty > i {
        color: #6f8da5 !important;
        font-size: 20px !important;
    }

/* R18-46.3 END */

/* ==========================================================================
   CONEXGO R18-47 - UI CONSISTENCY / INPUT RESIZE / TABS / LIST FILTERS
   Screenshot-driven stabilization pass.
   ========================================================================== */

/* 1) Restore the native resize affordance for editable multi-line fields.
   Desktop users can resize both dimensions; mobile stays vertical to prevent
   dialogs/pages from creating horizontal overflow. */
@media (min-width: 768px) {
    html body textarea.form-control:not(:disabled):not([readonly]):not(.note-codable):not(.fr-code),
    html body .mud-dialog textarea:not(:disabled):not([readonly]):not(.note-codable):not(.fr-code),
    html body .panel-body textarea:not(:disabled):not([readonly]):not(.note-codable):not(.fr-code) {
        resize: both !important;
        overflow: auto !important;
        min-width: 180px !important;
        max-width: 100% !important;
        min-height: 72px !important;
        max-height: 60dvh !important;
    }

    html body .mud-dialog.cx-r1-device-addedit textarea.cx-direct-large-textarea {
        resize: both !important;
        min-width: 240px !important;
        min-height: 92px !important;
        max-width: 100% !important;
        max-height: 60dvh !important;
    }
}

@media (max-width: 767.98px) {
    html body textarea.form-control:not(:disabled):not([readonly]):not(.note-codable):not(.fr-code),
    html body .mud-dialog textarea:not(:disabled):not([readonly]):not(.note-codable):not(.fr-code),
    html body .panel-body textarea:not(:disabled):not([readonly]):not(.note-codable):not(.fr-code) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        resize: vertical !important;
        overflow: auto !important;
    }
}

/* 2) One tab language throughout Conexgo. Account Profile is the visual
   reference: restrained outlined rail + compact navy active pill. */
html body ul.nav.panel-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 0 14px !important;
    padding: 6px !important;
    list-style: none !important;
    border: 1px solid #dce6ee !important;
    border-radius: 10px !important;
    background: #f7fafc !important;
    box-shadow: none !important;
}

    html body ul.nav.panel-tabs > li {
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

        html body ul.nav.panel-tabs > li > a {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 8px !important;
            min-height: 42px !important;
            margin: 0 !important;
            padding: 8px 13px !important;
            border: 1px solid transparent !important;
            border-radius: 8px !important;
            background: transparent !important;
            color: #315270 !important;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
            font-size: .92rem !important;
            font-weight: 700 !important;
            line-height: 1.15 !important;
            text-decoration: none !important;
            white-space: nowrap !important;
            transform: none !important;
            box-shadow: none !important;
            transition: background-color .14s ease, border-color .14s ease, color .14s ease !important;
        }

            html body ul.nav.panel-tabs > li > a:hover,
            html body ul.nav.panel-tabs > li > a:focus-visible {
                background: #edf4f8 !important;
                border-color: #d2dfe9 !important;
                color: #244b6b !important;
                transform: none !important;
                box-shadow: none !important;
            }

            html body ul.nav.panel-tabs > li > a.active,
            html body ul.nav.panel-tabs > li.active > a,
            html body ul.nav.panel-tabs > li > a[aria-selected="true"] {
                background: #315879 !important;
                border-color: #315879 !important;
                color: #ffffff !important;
                box-shadow: 0 2px 6px rgba(37, 72, 101, .14) !important;
                transform: none !important;
            }

            html body ul.nav.panel-tabs > li > a :is(i, svg) {
                flex: 0 0 auto !important;
            }

            html body ul.nav.panel-tabs > li > a img {
                width: 22px !important;
                height: 22px !important;
                max-width: 22px !important;
                max-height: 22px !important;
                object-fit: contain !important;
                flex: 0 0 22px !important;
                transform: none !important;
            }

            html body ul.nav.panel-tabs > li > a.active img,
            html body ul.nav.panel-tabs > li.active > a img,
            html body ul.nav.panel-tabs > li > a[aria-selected="true"] img {
                filter: brightness(0) invert(1) !important;
            }

/* Device geofence has button-based tabs rather than <ul class=panel-tabs>. */
html body .device-geofence-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 6px !important;
    margin: 0 0 14px !important;
    border: 1px solid #dce6ee !important;
    border-radius: 10px !important;
    background: #f7fafc !important;
}

    html body .device-geofence-tabs .nav-link {
        min-height: 42px !important;
        margin: 0 !important;
        padding: 8px 13px !important;
        border: 1px solid transparent !important;
        border-radius: 8px !important;
        background: transparent !important;
        color: #315270 !important;
        font-weight: 700 !important;
        transform: none !important;
        box-shadow: none !important;
    }

        html body .device-geofence-tabs .nav-link:hover,
        html body .device-geofence-tabs .nav-link:focus-visible {
            background: #edf4f8 !important;
            border-color: #d2dfe9 !important;
            color: #244b6b !important;
            transform: none !important;
        }

        html body .device-geofence-tabs .nav-link.active {
            background: #315879 !important;
            border-color: #315879 !important;
            color: #fff !important;
            transform: none !important;
        }

@media (max-width: 575.98px) {
    html body ul.nav.panel-tabs,
    html body .device-geofence-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain !important;
        scrollbar-width: thin !important;
    }
}

/* 3) Account lists now use the same disclosure/filter language as the other
   professional list pages. */
html body .account-list-card .cx-account-filter-panel {
    margin: 0 !important;
    border-top: 1px solid #e1e9f0 !important;
    border-bottom: 1px solid #e1e9f0 !important;
    background: #fbfdff !important;
}

html body .cx-account-filter-panel .cx-filter-disclosure-toggle {
    min-height: 52px !important;
}

html body .cx-account-filter-panel .cx-filter-disclosure-inner {
    overflow: visible !important;
}

html body .cx-account-filter-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(150px, 1fr)) max-content !important;
    align-items: end !important;
    gap: 10px 12px !important;
    padding: 12px 14px 14px !important;
}

    html body .cx-account-filter-grid .device-filter-field {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    html body .cx-account-filter-grid .device-filter-label {
        min-height: 24px !important;
        margin: 0 0 5px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    html body .cx-account-filter-grid .cx-custom-select-trigger {
        width: 100% !important;
        min-height: 38px !important;
        height: 38px !important;
        font-size: 13px !important;
    }

html body .cx-account-filter-reset {
    min-width: 112px !important;
    min-height: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    align-self: end !important;
    white-space: nowrap !important;
}

html body .cx-account-filter-progress {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 34px !important;
    padding: 0 14px 12px !important;
    color: #5a7084 !important;
    font-size: 12px !important;
}

@media (max-width: 899.98px) {
    html body .cx-account-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body .cx-account-filter-reset {
        justify-self: start !important;
    }
}

@media (max-width: 575.98px) {
    html body .cx-account-filter-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 10px !important;
    }

    html body .cx-account-filter-reset {
        width: 100% !important;
    }
}

/* 4) Notification filters: keep all five filters + Reset on ONE desktop row.
   The former 1199px breakpoint wrapped Reset even on ordinary scaled desktops. */
@media (min-width: 992px) {
    html body .cx-notification-device-filter {
        grid-template-columns: minmax(108px, .78fr) minmax(150px, 1.05fr) minmax(140px, .95fr) minmax(150px, 1fr) minmax(150px, 1fr) max-content !important;
        gap: 8px 9px !important;
        padding: 11px 12px 13px !important;
    }

        html body .cx-notification-device-filter .device-filter-reset {
            min-width: 96px !important;
            width: auto !important;
            justify-self: end !important;
        }
}

/* 5) Split-button columns must fit their content; remove forced minimum widths
   that made Device/Account name columns dominate the table. */
@media (min-width: 768px) {
    html body .device-list-action-group {
        width: min(100%, 340px) !important;
        min-width: 0 !important;
        max-width: 340px !important;
    }

    html body .device-list-name-button,
    html body .device-list-action-toggle,
    html body .account-list-name-button,
    html body .conexgo-row-action-toggle {
        min-height: 42px !important;
        height: 42px !important;
    }

    html body .account-list-cell-name {
        width: 255px !important;
        min-width: 220px !important;
        max-width: 255px !important;
    }

        html body .account-list-cell-name .conexgo-row-action-group {
            width: 100% !important;
            min-width: 0 !important;
            max-width: 255px !important;
        }
}

/* 6) PagedList already renders a sort icon in ColumnHeader. Disable the old
   DataTables pseudo arrows so table headers do not show duplicate sort marks. */
html body .conexgo-pagedlist-table > thead > tr > th.sorting::before,
html body .conexgo-pagedlist-table > thead > tr > th.sorting::after,
html body .conexgo-pagedlist-table > thead > tr > th.sorting_asc::before,
html body .conexgo-pagedlist-table > thead > tr > th.sorting_asc::after,
html body .conexgo-pagedlist-table > thead > tr > th.sorting_desc::before,
html body .conexgo-pagedlist-table > thead > tr > th.sorting_desc::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
}

/* Device model actions are a compact horizontal action cell, not a tall
   dedicated column. */
html body .device-model-list-card .conexgo-pagedlist-table > thead > tr > th:first-child,
html body .device-model-list-card .conexgo-pagedlist-table > tbody > tr > td:first-child {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    text-align: center !important;
}

html body .device-model-list-card td.bstable-actions {
    padding-inline: 8px !important;
    white-space: nowrap !important;
}

    html body .device-model-list-card td.bstable-actions .btn-list {
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        margin: 0 !important;
    }

    html body .device-model-list-card td.bstable-actions .btn {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        display: inline-grid !important;
        place-items: center !important;
        margin: 0 !important;
        transform: none !important;
    }

html body .device-model-list-card .conexgo-pagedlist-table > thead > tr > th {
    padding-block: 11px !important;
    vertical-align: middle !important;
}

/* 7) Notification View should be a focused detail dialog, not a near-full
   desktop surface. Keep the content scrollable while the footer stays usable. */
html body .mud-dialog.cx-notification-view-dialog,
html body .mud-dialog.cx-r1-notification-view {
    width: min(840px, calc(100vw - 32px)) !important;
    max-width: min(840px, calc(100vw - 32px)) !important;
    max-height: min(82dvh, 760px) !important;
}

    html body .mud-dialog.cx-notification-view-dialog .mud-dialog-content,
    html body .mud-dialog.cx-r1-notification-view .mud-dialog-content {
        min-height: 0 !important;
        overflow-y: auto !important;
        padding: 14px 16px !important;
    }

    html body .mud-dialog.cx-notification-view-dialog .cx-r1-section,
    html body .mud-dialog.cx-r1-notification-view .cx-r1-section {
        padding: 14px !important;
    }

    html body .mud-dialog.cx-notification-view-dialog .mud-dialog-actions,
    html body .mud-dialog.cx-r1-notification-view .mud-dialog-actions {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 3 !important;
        background: #f7fafc !important;
    }

@media (max-width: 767.98px) {
    html body .mud-dialog.cx-notification-view-dialog,
    html body .mud-dialog.cx-r1-notification-view {
        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;
        max-height: calc(100dvh - 14px) !important;
    }
}

/* 8) Account Add/Edit: desktop keeps the label/control relationship and every
   field gets a visible vertical rhythm. The previous 1100px breakpoint stacked
   the rows too early on scaled desktop displays. */
@media (min-width: 768px) {
    html body .mud-dialog.cx-r1-account-addedit .cx-r1-form-row {
        display: grid !important;
        grid-template-columns: minmax(170px, 200px) minmax(0, 1fr) !important;
        align-items: center !important;
        column-gap: 18px !important;
        row-gap: 6px !important;
        width: 100% !important;
        margin: 0 0 14px !important;
    }

        html body .mud-dialog.cx-r1-account-addedit .cx-r1-form-row > .form-label,
        html body .mud-dialog.cx-r1-account-addedit .cx-r1-form-row > .col-md-3 {
            grid-column: 1 !important;
            width: 100% !important;
            max-width: none !important;
            padding: 0 !important;
            margin: 0 !important;
            text-align: right !important;
            align-self: center !important;
        }

        html body .mud-dialog.cx-r1-account-addedit .cx-r1-form-row > .col-md-9 {
            grid-column: 2 !important;
            width: 100% !important;
            max-width: none !important;
            min-width: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        html body .mud-dialog.cx-r1-account-addedit .cx-r1-form-row :is( .form-control, .cx-custom-select-root, .cx-control, .cx-readonly-value ) {
            width: 100% !important;
            min-width: 0 !important;
            margin-bottom: 0 !important;
        }

    html body .mud-dialog.cx-r1-account-addedit .cx-r1-section-description {
        margin: 0 0 16px !important;
    }
}

@media (max-width: 767.98px) {
    html body .mud-dialog.cx-r1-account-addedit .cx-r1-form-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 6px !important;
        width: 100% !important;
        margin: 0 0 13px !important;
    }

        html body .mud-dialog.cx-r1-account-addedit .cx-r1-form-row > .form-label,
        html body .mud-dialog.cx-r1-account-addedit .cx-r1-form-row > .col-md-3,
        html body .mud-dialog.cx-r1-account-addedit .cx-r1-form-row > .col-md-9 {
            grid-column: 1 !important;
            width: 100% !important;
            max-width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
            text-align: left !important;
        }
}

/* R18-47 END */

/* ==========================================================================
   CONEXGO R18-49 - PERIOD FILTER / TRUE RESIZE / DASHBOARD OVERFLOW
   Final targeted layer after R18-47. This replaces contradictory historical
   sizing rules rather than adding component-specific hacks.
   ========================================================================== */

/* 1) Editable textareas. The width/height themselves MUST NOT be !important:
   native browser resizing writes inline dimensions, and author !important rules
   would otherwise make the resize grip visible but functionally inert. */
@media (min-width: 768px) {
    html body .mud-dialog.cx-dialog-root textarea.cx-dialog-textarea:not([readonly]):not(:disabled),
    html body .mud-dialog textarea.cx-direct-large-textarea:not([readonly]):not(:disabled),
    html body .panel-body textarea.cx-dialog-textarea:not([readonly]):not(:disabled) {
        display: block !important;
        box-sizing: border-box !important;
        width: min(86%, 920px);
        min-width: min(280px, 100%);
        max-width: 100% !important;
        min-height: 92px !important;
        max-height: min(62dvh, 680px) !important;
        resize: both !important;
        overflow: auto !important;
        overscroll-behavior: contain;
    }

    html body .mud-dialog.cx-dialog-root textarea.form-control:not(.cx-dialog-textarea):not([readonly]):not(:disabled),
    html body .panel-body textarea.form-control:not(.cx-dialog-textarea):not([readonly]):not(:disabled) {
        min-width: min(240px, 100%);
        max-width: 100% !important;
        max-height: min(62dvh, 680px) !important;
        resize: both !important;
        overflow: auto !important;
    }

    html body .mud-dialog.cx-dialog-root textarea:is( .cx-dialog-textarea, .cx-direct-large-textarea ):focus {
        border-color: #6f96b8 !important;
        box-shadow: 0 0 0 3px rgba(62, 106, 153, .10) !important;
    }
}

@media (max-width: 767.98px) {
    html body textarea.cx-dialog-textarea:not([readonly]):not(:disabled),
    html body textarea.cx-direct-large-textarea:not([readonly]):not(:disabled) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        resize: vertical !important;
        overflow: auto !important;
    }
}

/* 2) Notification filters: one compact period selector plus business filters.
   Custom dates live in a dedicated range panel instead of occupying the main
   row all the time. */
html body .cx-notification-device-filter {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
}

html body .cx-notification-filter-main-grid {
    display: grid !important;
    grid-template-columns: minmax(150px, 1.05fr) minmax(120px, .78fr) minmax(165px, 1fr) minmax(150px, .95fr) max-content !important;
    align-items: end !important;
    gap: 10px 12px !important;
    width: 100% !important;
    padding: 14px 16px !important;
}

    html body .cx-notification-filter-main-grid > .device-filter-field {
        min-width: 0 !important;
        width: auto !important;
        margin: 0 !important;
    }

    html body .cx-notification-filter-main-grid .device-filter-label,
    html body .cx-notification-custom-range .device-filter-label {
        min-height: 24px !important;
        margin: 0 0 6px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    html body .cx-notification-filter-main-grid :is( .device-filter-control, .cx-custom-select-root, .cx-custom-select-trigger ),
    html body .cx-notification-custom-range :is( .cx-notification-filter-date, .cx-notification-filter-date input ) {
        min-width: 0 !important;
        width: 100% !important;
    }

    html body .cx-notification-filter-main-grid .cx-notification-filter-reset {
        min-width: 112px !important;
        width: auto !important;
        height: 42px !important;
        min-height: 42px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        align-self: end !important;
        justify-self: end !important;
        white-space: nowrap !important;
    }

html body .cx-notification-custom-range {
    margin: 0 16px 16px !important;
    padding: 14px !important;
    border: 1px solid #d9e4ec !important;
    border-left: 4px solid #5c83a7 !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #fbfcfd 0%, #f7fafc 100%) !important;
    box-shadow: 0 3px 12px rgba(34, 70, 105, .045) !important;
}

html body .cx-notification-custom-range-grid {
    display: grid !important;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) max-content !important;
    align-items: end !important;
    gap: 10px 12px !important;
}

html body .cx-notification-custom-apply {
    min-width: 118px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid #315a80 !important;
    border-radius: 8px !important;
    background: #315a80 !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 5px rgba(34, 70, 105, .10) !important;
}

    html body .cx-notification-custom-apply:hover:not(:disabled),
    html body .cx-notification-custom-apply:focus-visible:not(:disabled) {
        background: #294e70 !important;
        border-color: #294e70 !important;
    }

    html body .cx-notification-custom-apply:disabled {
        opacity: .58 !important;
        cursor: not-allowed !important;
    }

@media (max-width: 1199.98px) {
    html body .cx-notification-filter-main-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

        html body .cx-notification-filter-main-grid .cx-notification-filter-reset {
            justify-self: start !important;
        }
}

@media (max-width: 767.98px) {
    html body .cx-notification-filter-main-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 12px !important;
    }

    html body .cx-notification-custom-range {
        margin: 0 12px 12px !important;
        padding: 12px !important;
    }

    html body .cx-notification-custom-range-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body .cx-notification-filter-main-grid .cx-notification-filter-reset,
    html body .cx-notification-custom-apply {
        width: 100% !important;
        justify-self: stretch !important;
    }
}

/* 3) Device / Account row action menus. Compact, anchored and readable. */
html body :is(.device-list-action-menu, .conexgo-row-action-menu) {
    min-width: 224px !important;
    width: max-content !important;
    max-width: min(276px, calc(100vw - 24px)) !important;
    max-height: 320px !important;
    padding: 4px !important;
    border: 1px solid #cad7e2 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(18, 49, 78, .15), 0 2px 8px rgba(18, 49, 78, .07) !important;
    overflow-x: hidden !important;
}

    html body :is(.device-list-action-menu, .conexgo-row-action-menu) .dropdown-item {
        min-height: 34px !important;
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        padding: 7px 9px !important;
        border-radius: 7px !important;
        color: #214467 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        transform: none !important;
    }

        html body :is(.device-list-action-menu, .conexgo-row-action-menu) .dropdown-item:hover,
        html body :is(.device-list-action-menu, .conexgo-row-action-menu) .dropdown-item:focus-visible {
            background: #f1f6f9 !important;
            color: #173b62 !important;
            transform: none !important;
        }

    html body :is(.device-list-action-menu, .conexgo-row-action-menu) .dropdown-divider {
        height: 1px !important;
        margin: 4px 5px !important;
        border: 0 !important;
        background: #e3ebf1 !important;
    }

@media (min-width: 768px) {
    html body :is(.device-list-action-group, .conexgo-row-action-group).cx-row-menu-open-above > :is(.device-list-action-menu, .conexgo-row-action-menu),
    html body :is(.device-list-action-group, .conexgo-row-action-group).cx-row-menu-open-above > :is(.device-list-action-menu, .conexgo-row-action-menu).show {
        top: auto !important;
        right: -4px !important;
        bottom: calc(100% + 6px) !important;
        left: auto !important;
        inset: auto -4px calc(100% + 6px) auto !important;
        transform: none !important;
    }
}

/* 4) Account profile image chooser had markup but no dedicated visual system. */
html body .conexgo-profile-icon-picker {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

html body .conexgo-profile-icon-picker__trigger {
    width: 100% !important;
    min-height: 44px !important;
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) 30px !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 4px 5px 4px 6px !important;
    border: 1px solid #c9d7e3 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #173b62 !important;
    text-align: left !important;
    box-shadow: 0 1px 2px rgba(22, 55, 87, .035) !important;
}

    html body .conexgo-profile-icon-picker__trigger:hover {
        border-color: #91a9bd !important;
    }

    html body .conexgo-profile-icon-picker__trigger[aria-expanded="true"] {
        border-color: #6f8faa !important;
        box-shadow: 0 0 0 3px rgba(62, 106, 153, .12) !important;
    }

html body .conexgo-profile-icon-picker__preview {
    width: 34px !important;
    height: 34px !important;
    display: inline-grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border: 1px solid #d8e2ea !important;
    border-radius: 50% !important;
    background: #f5f8fa !important;
    color: #64809a !important;
}

    html body .conexgo-profile-icon-picker__preview img,
    html body .conexgo-profile-icon-picker__panel button > img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 50% !important;
    }

html body .conexgo-profile-icon-picker__label {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
}

html body .conexgo-profile-icon-picker__chevron {
    width: 30px !important;
    height: 30px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 7px !important;
    background: #f3f7fa !important;
    color: #3e6386 !important;
}

html body .conexgo-profile-icon-picker__panel {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: auto !important;
    width: min(100%, 520px) !important;
    z-index: 3200 !important;
    display: grid !important;
    gap: 2px !important;
    max-height: 300px !important;
    padding: 5px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border: 1px solid #cbd8e3 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(18, 49, 78, .15), 0 2px 8px rgba(18, 49, 78, .07) !important;
    scrollbar-width: thin !important;
}

    html body .conexgo-profile-icon-picker__panel > button {
        width: 100% !important;
        min-height: 40px !important;
        display: grid !important;
        grid-template-columns: 32px minmax(0, 1fr) 24px !important;
        align-items: center !important;
        gap: 9px !important;
        padding: 4px 8px !important;
        border: 0 !important;
        border-radius: 7px !important;
        background: transparent !important;
        color: #214467 !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-align: left !important;
    }

        html body .conexgo-profile-icon-picker__panel > button > img,
        html body .conexgo-profile-icon-picker__option-none {
            width: 30px !important;
            height: 30px !important;
            display: inline-grid !important;
            place-items: center !important;
            border-radius: 50% !important;
            background: #f5f8fa !important;
        }

        html body .conexgo-profile-icon-picker__panel > button:hover,
        html body .conexgo-profile-icon-picker__panel > button[aria-selected="true"] {
            background: #eef4f8 !important;
        }

        html body .conexgo-profile-icon-picker__panel > button[aria-selected="true"] {
            box-shadow: inset 3px 0 0 #3e6a99 !important;
        }

html body .conexgo-profile-icon-picker__check {
    width: 24px !important;
    height: 24px !important;
    display: inline-grid !important;
    place-items: center !important;
    justify-self: end !important;
    color: #3e6a99 !important;
}

/* 5) Account Profile: use the available card width and remove the empty tail. */
html body .conexgo-account-profile {
    margin-bottom: 16px !important;
}

    html body .conexgo-account-profile > .card-body {
        padding-bottom: 18px !important;
    }

    html body .conexgo-account-profile .tabs-menu-body,
    html body .conexgo-account-profile .tab-content {
        padding-bottom: 0 !important;
    }

    html body .conexgo-account-profile .form-horizontal {
        width: min(100%, 1040px) !important;
    }

        html body .conexgo-account-profile .form-horizontal > .row:last-of-type {
            margin-bottom: 0 !important;
        }

    html body .conexgo-account-profile .mt-4 {
        margin-top: 16px !important;
    }

/* 7) Dialog action bar harmonization. Every migrated Conexgo MudDialog uses
   the same footer rhythm, button height, icon sizing and action hierarchy.
   Width remains label-driven so translations never get clipped. */
html body .mud-dialog.cx-dialog-root :is( .mud-dialog-actions, .dialog-background-surface.mud-dialog-actions, .cx-dialog-actions ) {
    min-height: 62px !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    border-top: 1px solid #d8e2eb !important;
    background: #f7f9fb !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

html body .mud-dialog.cx-dialog-root :is( .mud-dialog-actions, .cx-dialog-actions ) > * {
    flex: 0 0 auto !important;
}

html body .mud-dialog.cx-dialog-root .cx-dialog-action,
html body .mud-dialog.cx-dialog-root .mud-dialog-actions .mud-button-root.cx-dialog-action,
html body .mud-dialog.cx-dialog-root .mud-dialog-actions .btn.cx-dialog-action {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 96px !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border-radius: 8px !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    letter-spacing: .004em !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 2px rgba(25, 54, 82, .05) !important;
    transform: none !important;
}

html body .mud-dialog.cx-dialog-root .cx-dialog-action--save-close {
    min-width: 146px !important;
}

html body .mud-dialog.cx-dialog-root .cx-dialog-action--publish,
html body .mud-dialog.cx-dialog-root .cx-dialog-action--send {
    min-width: 112px !important;
}

html body .mud-dialog.cx-dialog-root .cx-dialog-action :is(i, svg),
html body .mud-dialog.cx-dialog-root .mud-dialog-actions .cx-dialog-action :is(i, svg) {
    width: 15px !important;
    min-width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

html body .mud-dialog.cx-dialog-root .cx-dialog-action .mud-button-label {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    line-height: 1 !important;
}

html body .mud-dialog.cx-dialog-root .cx-dialog-action:hover:not(:disabled):not(.mud-disabled) {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(31, 62, 91, .11) !important;
}

html body .mud-dialog.cx-dialog-root .cx-dialog-action:active:not(:disabled):not(.mud-disabled) {
    transform: none !important;
    box-shadow: 0 1px 2px rgba(25, 54, 82, .06) !important;
}

@media (max-width: 767.98px) {
    /* Preserve the existing compact icon-only mobile action model. The shared
       desktop rules above must not force translated labels into narrow dialogs. */
    html body .mud-dialog.cx-dialog-root .cx-dialog-action,
    html body .mud-dialog.cx-dialog-root .mud-dialog-actions .mud-button-root.cx-dialog-action,
    html body .mud-dialog.cx-dialog-root .mud-dialog-actions .btn.cx-dialog-action {
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
        padding: 0 !important;
        flex: 0 0 44px !important;
        font-size: 0 !important;
        overflow: hidden !important;
    }

        html body .mud-dialog.cx-dialog-root .cx-dialog-action .mud-button-label {
            width: 100% !important;
            height: 100% !important;
            gap: 0 !important;
        }

        html body .mud-dialog.cx-dialog-root .cx-dialog-action :is(i, svg) {
            width: 18px !important;
            min-width: 18px !important;
            height: 18px !important;
            font-size: 16px !important;
        }
}

/* R18-49 END */

/* ==========================================================================
   CONEXGO R18-52 - TARGETED UI REBUILD
   Scope: controls, filters, row actions, geofence, modal actions and header.
   Dashboard selectors are intentionally excluded from this phase.
   ========================================================================== */

/* Editable multi-line controls: native browser resize must remain authoritative.
   Do not make width/height !important on desktop; inline dimensions created by
   the native resize grip must be allowed to win. */
@media (min-width: 768px) {
    html body textarea.form-control:not(:disabled):not([readonly]):not(.note-codable):not(.fr-code),
    html body .mud-dialog.cx-dialog-root textarea:not(:disabled):not([readonly]):not(.note-codable):not(.fr-code),
    html body .panel-body textarea.form-control:not(:disabled):not([readonly]):not(.note-codable):not(.fr-code) {
        box-sizing: border-box !important;
        width: 100%;
        height: auto;
        min-width: min(240px, 100%) !important;
        max-width: 100% !important;
        min-height: 84px !important;
        max-height: min(65dvh, 720px) !important;
        resize: both !important;
        overflow: auto !important;
        overscroll-behavior: contain !important;
    }

    html body .mud-dialog.cx-r1-device-addedit textarea.cx-direct-large-textarea:not(:disabled):not([readonly]) {
        width: min(88%, 980px);
        height: 148px;
        min-width: min(300px, 100%) !important;
        min-height: 92px !important;
    }
}

@media (max-width: 767.98px) {
    html body textarea.form-control:not(:disabled):not([readonly]):not(.note-codable):not(.fr-code),
    html body .mud-dialog.cx-dialog-root textarea:not(:disabled):not([readonly]):not(.note-codable):not(.fr-code) {
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        resize: vertical !important;
        overflow: auto !important;
    }
}

/* Account / Device row actions: compact split button and bounded menu. */
html body .account-list-cell-name {
    width: 340px !important;
    min-width: 320px !important;
    max-width: 380px !important;
}

    html body .account-list-cell-name .conexgo-row-action-group {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 380px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    html body .account-list-cell-name .account-list-name-button {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    html body .account-list-cell-name .conexgo-row-action-toggle,
    html body .device-list-action-group .device-list-action-toggle {
        flex: 0 0 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        padding-inline: 0 !important;
    }

html body :is(.account-list-cell-name, .device-list-action-group)
:is(.conexgo-row-action-menu, .device-list-action-menu) {
    min-width: 238px !important;
    width: max-content !important;
    max-width: min(300px, calc(100vw - 24px)) !important;
}

@media (min-width: 768px) {
    html body .account-list-cell-name .conexgo-row-action-group > .conexgo-row-action-menu,
    html body .account-list-cell-name .conexgo-row-action-group > .conexgo-row-action-menu.show {
        left: 0 !important;
        right: auto !important;
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
        transform: none !important;
    }
}

/* Geofence: compact five-tab rail, status dot, optional contained preview. */
html body .cx-r1-device-geofence .device-geofence-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    margin: 2px 0 14px !important;
    padding: 5px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain !important;
    border: 1px solid #dce6ee !important;
    border-radius: 11px !important;
    background: #f5f8fb !important;
    scrollbar-width: thin !important;
}

html body .cx-r1-device-geofence .device-geofence-tab {
    flex: 0 0 auto !important;
    min-width: 118px !important;
    max-width: 190px !important;
    min-height: 42px !important;
    height: 42px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) 10px !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 10px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #315879 !important;
    box-shadow: none !important;
    transform: none !important;
}

    html body .cx-r1-device-geofence .device-geofence-tab:hover:not(:disabled),
    html body .cx-r1-device-geofence .device-geofence-tab:focus-visible {
        border-color: #cfdee9 !important;
        background: #eaf2f8 !important;
        color: #244b6b !important;
        transform: none !important;
    }

    html body .cx-r1-device-geofence .device-geofence-tab.active {
        border-color: #315879 !important;
        background: #315879 !important;
        color: #fff !important;
        box-shadow: 0 3px 9px rgba(49, 88, 121, .14) !important;
    }

html body .cx-r1-device-geofence .device-geofence-tab-number {
    opacity: .78 !important;
    font-size: 11.5px !important;
    font-weight: 750 !important;
}

html body .cx-r1-device-geofence .device-geofence-tab-name {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body .cx-r1-device-geofence .device-geofence-tab-status {
    width: 9px !important;
    height: 9px !important;
    display: block !important;
    border-radius: 999px !important;
    background: #b7c4cf !important;
}

html body .cx-r1-device-geofence .device-geofence-tab-status-enabled {
    background: #5da873 !important;
}

html body .cx-r1-device-geofence .device-geofence-tab.active .device-geofence-tab-status-enabled {
    background: #bde8c9 !important;
}

html body .cx-r1-device-geofence .device-geofence-tab.active .device-geofence-tab-status-disabled {
    background: rgba(255, 255, 255, .58) !important;
}

html body .device-geofence-topbar {
    gap: 10px !important;
    margin-bottom: 12px !important;
}

html body .device-geofence-preview-button {
    min-height: 40px !important;
    padding: 0 13px !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

html body .device-geofence-configuration-layout-with-preview {
    display: grid !important;
    grid-template-columns: minmax(0, 1.4fr) minmax(290px, .6fr) !important;
    align-items: stretch !important;
    gap: 14px !important;
}

html body .device-geofence-map-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 300px !important;
    max-height: 500px !important;
    border: 1px solid #ccdbe6 !important;
    border-radius: 11px !important;
    background: #fff !important;
    box-shadow: 0 5px 16px rgba(44, 76, 108, .07) !important;
    resize: vertical !important;
    overflow: hidden !important;
}

html body .device-geofence-map-header {
    min-height: 42px !important;
    padding: 8px 10px !important;
    background: #f5f8fb !important;
    border-bottom: 1px solid #dce6ee !important;
}

html body .device-geofence-map-preview {
    min-height: 240px !important;
}

html body .device-geofence-dialog-actions .device-geofence-delete {
    margin-right: auto !important;
}

/* Header: compact information pills; profile gets the same restrained lift. */
html body .app-header-modern .topbar-version-pill {
    min-width: 128px !important;
    height: 40px !important;
    padding: 0 11px 0 9px !important;
    gap: 8px !important;
    border: 1px solid #dbe5ed !important;
    border-radius: 11px !important;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%) !important;
    box-shadow: 0 2px 6px rgba(44, 76, 108, .05) !important;
}

html body .app-header-modern .topbar-version-icon {
    width: 27px !important;
    height: 27px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    background: #eef4f8 !important;
    color: #3e6a99 !important;
}

html body .app-header-modern .topbar-version-content {
    display: flex !important;
    align-items: baseline !important;
    gap: 5px !important;
    min-width: 0 !important;
}

html body .app-header-modern .topbar-version-label {
    font-size: 10.5px !important;
    font-weight: 650 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    color: #74879a !important;
}

html body .app-header-modern .topbar-version-value {
    font-size: 13.5px !important;
    font-weight: 750 !important;
    color: #274c6c !important;
}

html body .app-header-modern .nt-clock-card {
    min-width: 330px !important;
    max-width: 410px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    padding: 0 13px !important;
    border: 1px solid #dbe5ed !important;
    border-radius: 11px !important;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%) !important;
    box-shadow: 0 2px 6px rgba(44, 76, 108, .045) !important;
}

html body .app-header-modern .nt-date,
html body .app-header-modern .nt-clock {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding-block: 0 !important;
}

html body .app-header-modern .nt-clock {
    padding-left: 11px !important;
    border-left: 1px solid #dbe5ed !important;
    font-variant-numeric: tabular-nums !important;
}

html body .app-header-modern .nt-clock-value {
    min-width: 18px !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums !important;
    font-weight: 720 !important;
}

html body .app-header-modern .conexgo-header-profile > .nav-link {
    border-radius: 999px !important;
    transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease !important;
}

    html body .app-header-modern .conexgo-header-profile > .nav-link:hover,
    html body .app-header-modern .conexgo-header-profile > .nav-link:focus-visible {
        transform: translateY(-1px) !important;
        background: #eef4f8 !important;
        box-shadow: 0 4px 12px rgba(44, 76, 108, .10) !important;
    }

html body .app-header-modern .conexgo-header-profile .profile-user {
    transition: transform .16s ease, box-shadow .16s ease !important;
}

html body .app-header-modern .conexgo-header-profile > .nav-link:hover .profile-user,
html body .app-header-modern .conexgo-header-profile > .nav-link:focus-visible .profile-user {
    transform: scale(1.035) !important;
}

/* Responsive filter/geofence behavior. */
@media (max-width: 1199.98px) {
    html body .cx-account-filter-grid,
    html body .cx-notification-filter-business-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body .device-geofence-configuration-layout-with-preview {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body .device-geofence-map-card {
        max-height: 440px !important;
    }

    html body .app-header-modern .nt-clock-card {
        min-width: 280px !important;
        max-width: 350px !important;
    }

    html body .app-header-modern .nt-seconds,
    html body .app-header-modern .nt-clock-separator-secondary {
        display: none !important;
    }
}

@media (max-width: 767.98px) {
    html body .cx-account-filter-toolbar,
    html body .cx-notification-filter-toolbar {
        align-items: stretch !important;
        flex-direction: column !important;
        padding: 10px !important;
    }

        html body .cx-account-filter-toolbar .device-filter-toolbar-actions,
        html body .cx-notification-filter-toolbar-actions {
            width: 100% !important;
            margin-left: 0 !important;
            justify-content: stretch !important;
        }

    html body .cx-account-filter-reset,
    html body .cx-notification-filter-reset {
        width: 100% !important;
    }

    html body .cx-notification-filter-toolbar .cx-notification-period-field {
        width: 100% !important;
        min-width: 0 !important;
        flex-basis: auto !important;
    }

    html body .cx-account-filter-grid,
    html body .cx-notification-filter-business-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 10px !important;
    }

    html body .cx-notification-custom-range {
        margin: 0 10px 10px !important;
    }

    html body .cx-notification-custom-range-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 12px !important;
    }

    html body .cx-notification-custom-apply {
        width: 100% !important;
    }

    html body .account-list-cell-name {
        width: auto !important;
        min-width: 260px !important;
        max-width: none !important;
    }

        html body .account-list-cell-name .conexgo-row-action-group {
            max-width: none !important;
        }

    html body .cx-r1-device-geofence .device-geofence-tab {
        min-width: 110px !important;
    }

    html body .device-geofence-map-card {
        min-height: 270px !important;
        max-height: 410px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body .app-header-modern .conexgo-header-profile > .nav-link,
    html body .app-header-modern .conexgo-header-profile .profile-user,
    html body .cx-custom-select-chevron i {
        transition: none !important;
        transform: none !important;
    }
}

/* R18-52 TARGETED UI REBUILD END */

/* ==========================================================================
   CONEXGO R18-53 - VISUAL QA RECOVERY / FINAL CASCADE LAYER
   Appended at the end of site.css so this is the authoritative final layer
   for shared filters, pagination, dropdown action zones and the dialogs
   identified in the 2026-08-13 visual QA screenshots.
   ========================================================================== */

/* --------------------------------------------------------------------------
   2. Account / Device row actions — real split button.
   Main label remains steady. The arrow is a separate darker action segment.
   -------------------------------------------------------------------------- */
html body.cx-design-system :is( .device-list-action-group, .account-list-cell-name .conexgo-row-action-group ) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    overflow: visible !important;
    border-radius: 9px !important;
}

html body.cx-design-system :is( .device-list-action-group .device-list-name-button, .account-list-cell-name .account-list-name-button ),
html body.cx-design-system :is( .device-list-action-group .device-list-name-button, .account-list-cell-name .account-list-name-button ):is(:hover, :focus, :active) {
    min-height: 44px !important;
    height: 44px !important;
    border-color: #315879 !important;
    border-right-color: #547b9d !important;
    border-radius: 9px 0 0 9px !important;
    background: #315879 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

html body.cx-design-system :is( .device-list-action-group .device-list-action-toggle, .account-list-cell-name .conexgo-row-action-toggle ),
html body.cx-design-system :is( .device-list-action-group .device-list-action-toggle, .account-list-cell-name .conexgo-row-action-toggle ):focus-visible {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border: 1px solid #274d6d !important;
    border-left-color: #6889a5 !important;
    border-radius: 0 9px 9px 0 !important;
    background: #264f71 !important;
    color: #eef6fb !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease !important;
}

    html body.cx-design-system :is( .device-list-action-group .device-list-action-toggle, .account-list-cell-name .conexgo-row-action-toggle ):hover {
        border-color: #1d405e !important;
        border-left-color: #7e9bb4 !important;
        background: #1f4666 !important;
        color: #ffffff !important;
        transform: none !important;
    }

    html body.cx-design-system :is( .device-list-action-group .device-list-action-toggle, .account-list-cell-name .conexgo-row-action-toggle )[aria-expanded="true"] {
        border-color: #173a56 !important;
        background: #193f5d !important;
        color: #ffffff !important;
    }

html body.cx-design-system .account-list-cell-name {
    width: 310px !important;
    min-width: 300px !important;
    max-width: 340px !important;
}

    html body.cx-design-system .account-list-cell-name .conexgo-row-action-group,
    html body.cx-design-system .device-list-action-group {
        width: 100% !important;
        max-width: 340px !important;
        min-width: 0 !important;
    }

        html body.cx-design-system .account-list-cell-name .account-list-name-button,
        html body.cx-design-system .device-list-action-group .device-list-name-button {
            flex: 1 1 auto !important;
            min-width: 0 !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
        }

/* Account table geometry — preserve readable names/devices and scroll only
   when the viewport genuinely cannot contain the columns. */
html body.cx-design-system .account-list-table-shell {
    overflow-x: auto !important;
    overscroll-behavior-inline: contain !important;
    scrollbar-gutter: stable both-edges !important;
}

    html body.cx-design-system .account-list-table-shell .conexgo-pagedlist-table {
        min-width: 980px !important;
        table-layout: auto !important;
    }

html body.cx-design-system .account-list-cell-contact {
    min-width: 280px !important;
}

html body.cx-design-system .account-list-cell-devices {
    min-width: 240px !important;
    width: 270px !important;
    vertical-align: top !important;
}

html body.cx-design-system .account-list-device-links {
    display: grid !important;
    gap: 5px !important;
    margin-bottom: 7px !important;
}

html body.cx-design-system .account-list-device-link {
    width: fit-content !important;
    max-width: 100% !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

html body.cx-design-system .account-list-cell-comment {
    min-width: 190px !important;
}

/* --------------------------------------------------------------------------
   6. Shared PagedList toolbar + custom range.
   Keep controls close to the table; compact Apply remains on the same row at
   desktop sizes (the old <=1399 rule forced it to span the full panel).
   -------------------------------------------------------------------------- */
html body.cx-design-system .cx-paged-list .conexgo-pagedlist-toolbar {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 9px !important;
    padding: 9px 10px !important;
    display: grid !important;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
    align-items: end !important;
    gap: 10px 16px !important;
    border: 1px solid #e0e8ef !important;
    border-radius: 11px !important;
    background: #fbfdff !important;
    box-shadow: none !important;
}

html body.cx-design-system .cx-paged-list .conexgo-pagedlist-filters {
    display: flex !important;
    align-items: end !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

html body.cx-design-system .cx-paged-list .conexgo-pagedlist-field {
    gap: 5px !important;
}

html body.cx-design-system .cx-paged-list .conexgo-pagedlist-size-select {
    width: 118px !important;
    min-width: 118px !important;
}

html body.cx-design-system .cx-paged-list .conexgo-pagedlist-range-select {
    width: 210px !important;
    min-width: 210px !important;
}

html body.cx-design-system .cx-paged-list .conexgo-pagedlist-pagination {
    justify-self: end !important;
    align-self: end !important;
    margin: 0 !important;
}

    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-pagination .pagination {
        margin: 0 !important;
        gap: 5px !important;
    }

html body.cx-design-system .cx-paged-list .conexgo-pagedlist-custom {
    margin: 0 0 10px !important;
    padding: 10px !important;
    border: 1px solid #d8e4ed !important;
    border-left: 3px solid #4e7ba3 !important;
    border-top-width: 1px !important;
    border-radius: 11px !important;
    background: #f8fbfd !important;
    box-shadow: none !important;
}

    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-custom::before {
        display: none !important;
    }

html body.cx-design-system .cx-paged-list .conexgo-pagedlist-custom-fields {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 10px !important;
}

html body.cx-design-system .cx-paged-list .conexgo-pagedlist-custom-group {
    display: grid !important;
    grid-template-columns: minmax(180px, 1fr) minmax(130px, .58fr) !important;
    align-items: end !important;
    gap: 10px !important;
}

html body.cx-design-system .cx-paged-list .conexgo-pagedlist-custom-separator {
    display: grid !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 42px !important;
    place-items: center !important;
}

html body.cx-design-system .cx-paged-list .conexgo-pagedlist-apply {
    width: auto !important;
    min-width: 112px !important;
    max-width: none !important;
    height: 42px !important;
    min-height: 42px !important;
    grid-column: auto !important;
    align-self: end !important;
    padding: 0 14px !important;
}

html body.cx-design-system .cx-paged-list .conexgo-pagedlist-table-region {
    margin-top: 0 !important;
}

/* --------------------------------------------------------------------------
   7. Alert filter chips.
   -------------------------------------------------------------------------- */
html body.cx-design-system .alert-list-card-body .cx-filter-disclosure-inner > .alert-filter-panel {
    padding: 9px 10px 10px !important;
}

html body.cx-design-system .alert-list-card-body .alert-filter-inline {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 7px !important;
}

    html body.cx-design-system .alert-list-card-body .alert-filter-inline > label {
        min-height: 36px !important;
        margin: 0 !important;
        padding: 5px 9px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        border: 1px solid #dce5ed !important;
        border-radius: 9px !important;
        background: #fbfdff !important;
        color: #31516f !important;
    }

        html body.cx-design-system .alert-list-card-body .alert-filter-inline > label:hover {
            border-color: #bfd0dd !important;
            background: #f2f7fa !important;
        }

/* --------------------------------------------------------------------------
   8. Report subscription — reduce the oversized scheduling card.
   -------------------------------------------------------------------------- */
html body.cx-design-system .mud-dialog.cx-report-subscribe-dialog {
    width: min(1040px, calc(100vw - 32px)) !important;
    max-width: min(1040px, calc(100vw - 32px)) !important;
}

html body.cx-design-system .cx-report-subscribe-dialog .mud-dialog-content {
    padding: 10px 12px !important;
    max-height: min(72dvh, 760px) !important;
}

html body.cx-design-system .cx-report-subscribe-dialog .cx-modal-layout-v21,
html body.cx-design-system .cx-report-subscribe-dialog .report-subscribe-form {
    gap: 10px !important;
}

html body.cx-design-system .cx-report-subscribe-dialog .report-subscribe-section {
    padding: 12px 14px 13px !important;
    border-radius: 11px !important;
}

html body.cx-design-system .cx-report-subscribe-dialog .cx-r1-section-title {
    margin-bottom: 4px !important;
    font-size: 16px !important;
}

html body.cx-design-system .cx-report-subscribe-dialog .cx-r1-section-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    flex-basis: 38px !important;
}

html body.cx-design-system .cx-report-subscribe-dialog .cx-r1-section-description {
    margin-bottom: 10px !important;
    font-size: 13px !important;
}

html body.cx-design-system .cx-report-subscribe-dialog .report-subscribe-schedule-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
}

html body.cx-design-system .cx-report-subscribe-dialog .report-subscribe-next-send {
    margin-top: 10px !important;
    padding: 9px 11px !important;
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 9px !important;
    border-radius: 9px !important;
    background: #f6f9fc !important;
}

html body.cx-design-system .cx-report-subscribe-dialog .report-subscribe-next-send-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
}

html body.cx-design-system .cx-report-subscribe-dialog .report-subscribe-next-send-value {
    margin-top: 0 !important;
    font-size: .88rem !important;
}

html body.cx-design-system .cx-report-subscribe-dialog .report-subscribe-next-send-summary {
    margin-top: 1px !important;
    font-size: .74rem !important;
}

/* --------------------------------------------------------------------------
   9. Account email / message template dialog — denser composition surface.
   R18-51.3 language/template logic remains untouched.
   -------------------------------------------------------------------------- */
html body.cx-design-system .mud-dialog.cx-r8-account-email {
    width: min(980px, calc(100vw - 32px)) !important;
    max-width: min(980px, calc(100vw - 32px)) !important;
}

html body.cx-design-system .cx-r8-account-email .mud-dialog-content {
    padding: 12px 14px !important;
    max-height: min(74dvh, 760px) !important;
}

html body.cx-design-system .cx-r8-account-email .cx-modal-layout-v21 {
    gap: 10px !important;
}

html body.cx-design-system .cx-r8-account-email .cx-r8-email-section {
    width: 100% !important;
    max-width: none !important;
    padding: 12px 14px 14px !important;
    border-radius: 11px !important;
}

html body.cx-design-system .cx-r8-account-email .cx-r8-section-description {
    margin: 0 0 10px !important;
}

html body.cx-design-system .cx-r8-account-email .cx-r8-email-tabs {
    margin-bottom: 10px !important;
    padding: 4px !important;
    gap: 5px !important;
}

html body.cx-design-system .cx-r8-account-email .cx-r8-email-tab {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 12px !important;
}

html body.cx-design-system .cx-r8-account-email .cx-r8-form-row {
    grid-template-columns: 126px minmax(0, 1fr) !important;
    gap: 7px 12px !important;
    margin-bottom: 9px !important;
}

    html body.cx-design-system .cx-r8-account-email .cx-r8-form-row > .form-label {
        padding-top: 10px !important;
    }

html body.cx-design-system .cx-r8-account-email .form-control:not(textarea),
html body.cx-design-system .cx-r8-account-email .cx-custom-select-trigger {
    min-height: 42px !important;
    height: 42px !important;
}

html body.cx-design-system .cx-r8-account-email textarea.form-control {
    height: 168px;
    min-height: 120px !important;
    max-height: min(60dvh, 620px) !important;
    resize: both !important;
    overflow: auto !important;
}

/* --------------------------------------------------------------------------
   10. Alert details / answer dialogs — retain hierarchy without giant panels.
   -------------------------------------------------------------------------- */
html body.cx-design-system .mud-dialog.cx-r1-alert-view,
html body.cx-design-system .mud-dialog.cx-r1-alert-answer {
    width: min(1020px, calc(100vw - 32px)) !important;
    max-width: min(1020px, calc(100vw - 32px)) !important;
}

html body.cx-design-system :is(.cx-r1-alert-view, .cx-r1-alert-answer) .mud-dialog-content {
    padding: 12px 14px !important;
    max-height: min(76dvh, 780px) !important;
}

html body.cx-design-system :is(.cx-r1-alert-view, .cx-r1-alert-answer) .cx-modal-layout-v21 {
    gap: 10px !important;
}

html body.cx-design-system :is(.cx-r1-alert-view, .cx-r1-alert-answer) .cx-r1-section {
    padding: 12px 14px 14px !important;
}

html body.cx-design-system :is(.cx-r1-alert-view, .cx-r1-alert-answer) .cx-r1-section-description {
    margin: 0 0 10px !important;
    font-size: 13px !important;
}

html body.cx-design-system :is(.alert-view-summary, .alert-answer-summary) {
    padding: 9px 11px !important;
    gap: 10px !important;
    border-width: 1.5px !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

html body.cx-design-system :is(.alert-view-device-title, .alert-answer-device-title) {
    font-size: 15px !important;
    line-height: 1.25 !important;
}

html body.cx-design-system :is(.alert-view-table, .alert-answer-table) {
    margin-bottom: 8px !important;
    font-size: 12.5px !important;
}

    html body.cx-design-system :is(.alert-view-table, .alert-answer-table) th,
    html body.cx-design-system :is(.alert-view-table, .alert-answer-table) td {
        padding: 7px 9px !important;
    }

html body.cx-design-system :is(.alert-view-map-canvas, .alert-answer-map-canvas) {
    min-height: 250px !important;
    height: 250px !important;
}

/* --------------------------------------------------------------------------
   Responsive composition.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    html body.cx-design-system .cx-filter-disclosure-inner .cx-notification-device-filter > .cx-notification-filter-business-grid,
    html body.cx-design-system .cx-filter-disclosure-inner .cx-account-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-custom-fields {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
    }

    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-custom-separator {
        display: none !important;
    }

    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-custom-group {
        grid-template-columns: minmax(0, 1fr) minmax(130px, .55fr) !important;
    }

    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-apply {
        width: auto !important;
        min-width: 112px !important;
        grid-column: auto !important;
    }
}

@media (max-width: 1199.98px) and (min-width: 768px) {
    html body.cx-design-system .account-list-table-shell .conexgo-pagedlist-table {
        min-width: 860px !important;
    }

    html body.cx-design-system .account-list-cell-name {
        width: 250px !important;
        min-width: 240px !important;
        max-width: 270px !important;
    }

    html body.cx-design-system .account-list-cell-contact {
        min-width: 225px !important;
    }

    html body.cx-design-system .account-list-cell-devices {
        width: 210px !important;
        min-width: 200px !important;
    }

    html body.cx-design-system .account-list-cell-comment {
        min-width: 170px !important;
    }
}

@media (max-width: 991.98px) {
    html body.cx-design-system .cx-filter-disclosure-inner .cx-notification-device-filter > .cx-notification-filter-toolbar {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    html body.cx-design-system .cx-filter-disclosure-inner .cx-notification-period-field {
        grid-column: 1 !important;
        max-width: none !important;
    }

    html body.cx-design-system .cx-filter-disclosure-inner .cx-notification-filter-toolbar-actions {
        grid-column: 2 !important;
    }

    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-toolbar {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-pagination {
        justify-self: start !important;
    }

    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-custom-fields {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-custom-group {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-apply {
        justify-self: start !important;
    }

    html body.cx-design-system .cx-report-subscribe-dialog .report-subscribe-schedule-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    html body.cx-design-system .cx-filter-disclosure-inner .cx-notification-device-filter > .cx-notification-filter-toolbar,
    html body.cx-design-system .cx-filter-disclosure-inner .cx-notification-device-filter > .cx-notification-filter-business-grid,
    html body.cx-design-system .cx-filter-disclosure-inner .cx-account-filter-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body.cx-design-system .cx-filter-disclosure-inner .cx-notification-filter-toolbar-actions {
        grid-column: 1 !important;
        justify-content: stretch !important;
    }

    html body.cx-design-system .cx-filter-disclosure-inner .cx-notification-filter-reset,
    html body.cx-design-system .cx-account-filter-reset,
    html body.cx-design-system .cx-notification-custom-apply {
        width: 100% !important;
    }

    html body.cx-design-system .cx-account-filter-toolbar {
        padding: 8px 10px !important;
    }

    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-filters {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: 100% !important;
    }

    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-size-select,
    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-range-select {
        width: 100% !important;
        min-width: 0 !important;
    }

    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-pagination {
        width: 100% !important;
        overflow-x: auto !important;
    }

    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-custom-group,
    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-filters,
    html body.cx-design-system .cx-report-subscribe-dialog .report-subscribe-schedule-grid,
    html body.cx-design-system .cx-r8-account-email .cx-r8-form-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-apply {
        width: 100% !important;
    }

    html body.cx-design-system .account-list-cell-name {
        min-width: 270px !important;
        width: 270px !important;
    }

    html body.cx-design-system .cx-r8-account-email .cx-r8-form-row > .form-label {
        padding-top: 0 !important;
        text-align: left !important;
    }

    html body.cx-design-system .cx-r8-account-email textarea.form-control {
        height: 150px;
        resize: vertical !important;
    }
}

@media (max-width: 479.98px) {
    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-filters {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body.cx-design-system .alert-list-card-body .alert-filter-inline {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body.cx-design-system .cx-custom-select-chevron,
    html body.cx-design-system :is( .device-list-action-group .device-list-action-toggle, .account-list-cell-name .conexgo-row-action-toggle ) {
        transition: none !important;
    }
}

/* CONEXGO R18-53 VISUAL QA RECOVERY END */

/* ==========================================================================
   CONEXGO R18-54 - SELECT + FILTER VISUAL RESTORATION
   Restore the proven pre-R18-52 CxSelect appearance and compact filter layout.
   Functional R18-51/R18-52 changes stay intact.
   ========================================================================== */

/* Generic CxSelect: restore R18-48.1. Row-action split buttons are separate. */
html body.cx-design-system .cx-custom-select-trigger {
    min-height: 42px !important;
    height: 42px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 30px !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 5px 0 12px !important;
    overflow: hidden !important;
    border: 1px solid #c9d7e3 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #173b62 !important;
    box-shadow: 0 1px 2px rgba(22, 55, 87, .035) !important;
    transform: none !important;
    transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease !important;
}

    html body.cx-design-system .cx-custom-select-trigger:has(.cx-custom-select-leading-icon) {
        grid-template-columns: 26px minmax(0, 1fr) 30px !important;
        padding-left: 8px !important;
    }

html body.cx-design-system .cx-custom-select-value {
    min-width: 0 !important;
    padding-inline: 0 !important;
}

html body.cx-design-system .cx-custom-select-trigger:hover:not(:disabled) {
    border-color: #91a9bd !important;
    background: #ffffff !important;
    box-shadow: 0 2px 5px rgba(22, 55, 87, .06) !important;
    transform: none !important;
}

html body.cx-design-system .cx-custom-select-trigger:focus-visible,
html body.cx-design-system .cx-custom-select-trigger.is-open,
html body.cx-design-system .cx-custom-select-trigger[data-cx-open="True"],
html body.cx-design-system .cx-custom-select-trigger[data-cx-open="true"] {
    border-color: #6f8faa !important;
    outline: none !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(62, 106, 153, .12) !important;
    transform: none !important;
}

html body.cx-design-system .cx-custom-select-chevron,
html body.cx-design-system .cx-custom-select-trigger:hover:not(:disabled) .cx-custom-select-chevron {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    display: inline-grid !important;
    place-items: center !important;
    align-self: center !important;
    justify-self: end !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 7px !important;
    background: #f3f7fa !important;
    color: #3e6386 !important;
    box-shadow: none !important;
}

html body.cx-design-system .cx-custom-select-trigger:hover:not(:disabled) .cx-custom-select-chevron {
    background: #eaf1f6 !important;
}

html body.cx-design-system .cx-custom-select-trigger.is-open .cx-custom-select-chevron,
html body.cx-design-system .cx-custom-select-trigger[data-cx-open="True"] .cx-custom-select-chevron,
html body.cx-design-system .cx-custom-select-trigger[data-cx-open="true"] .cx-custom-select-chevron {
    background: #eaf2f8 !important;
    color: #2c4c6c !important;
}

/* Device filters: compact Device_List layout with direct grid children. */
html body.cx-design-system .cx-device-list-filter {
    padding: 10px 12px 12px !important;
}

    html body.cx-design-system .cx-device-list-filter > .device-filter-toolbar {
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 0 8px !important;
        display: grid !important;
        grid-template-columns: minmax(240px, 320px) minmax(0, 1fr) auto !important;
        align-items: end !important;
        gap: 8px 14px !important;
    }

        html body.cx-design-system .cx-device-list-filter > .device-filter-toolbar > .device-filter-field--battery-toolbar {
            grid-column: 1 !important;
            grid-row: 1 !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: 320px !important;
        }

        html body.cx-design-system .cx-device-list-filter > .device-filter-toolbar > .device-filter-summary {
            grid-column: 2 !important;
            grid-row: 1 !important;
            align-self: end !important;
            min-width: 0 !important;
        }

        html body.cx-design-system .cx-device-list-filter > .device-filter-toolbar > .device-filter-reset {
            grid-column: 3 !important;
            grid-row: 1 !important;
            justify-self: end !important;
            width: auto !important;
            min-height: 40px !important;
            height: 40px !important;
            padding: 0 11px !important;
            white-space: nowrap !important;
        }

    html body.cx-design-system .cx-device-list-filter > .device-filter-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: end !important;
        gap: 8px 10px !important;
        width: 100% !important;
    }

/* Accounts: pre-R18-52 compact row, including Reset as the fourth item. */
html body.cx-design-system .cx-account-filter-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(150px, 1fr)) max-content !important;
    align-items: end !important;
    gap: 10px 12px !important;
    width: 100% !important;
    padding: 12px 14px 14px !important;
}

    html body.cx-design-system .cx-account-filter-grid > .device-filter-field {
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    html body.cx-design-system .cx-account-filter-grid .cx-custom-select-trigger {
        width: 100% !important;
        min-height: 38px !important;
        height: 38px !important;
        font-size: 13px !important;
    }

    html body.cx-design-system .cx-account-filter-grid .cx-account-filter-reset {
        min-width: 112px !important;
        width: auto !important;
        min-height: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        justify-self: end !important;
        align-self: end !important;
    }

/* Notifications: restore the compact desktop row from before R18-52. */
html body.cx-design-system .cx-notification-device-filter {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
}

html body.cx-design-system .cx-notification-filter-main-grid {
    display: grid !important;
    grid-template-columns: minmax(150px, 1.05fr) minmax(120px, .78fr) minmax(165px, 1fr) minmax(150px, .95fr) max-content !important;
    align-items: end !important;
    gap: 10px 12px !important;
    width: 100% !important;
    padding: 14px 16px !important;
}

    html body.cx-design-system .cx-notification-filter-main-grid > .device-filter-field {
        min-width: 0 !important;
        width: auto !important;
        margin: 0 !important;
    }

    html body.cx-design-system .cx-notification-filter-main-grid .cx-notification-filter-reset {
        min-width: 112px !important;
        width: auto !important;
        min-height: 42px !important;
        height: 42px !important;
        margin: 0 !important;
        padding: 0 14px !important;
        justify-self: end !important;
        align-self: end !important;
    }

@media (min-width: 1800px) {
    html body.cx-design-system .cx-device-list-filter > .device-filter-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1199.98px) {
    html body.cx-design-system .cx-notification-filter-main-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

        html body.cx-design-system .cx-notification-filter-main-grid .cx-notification-filter-reset {
            justify-self: start !important;
        }
}

@media (max-width: 991.98px) {
    html body.cx-design-system .cx-device-list-filter > .device-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 899.98px) {
    html body.cx-design-system .cx-account-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

        html body.cx-design-system .cx-account-filter-grid .cx-account-filter-reset {
            justify-self: start !important;
        }
}

@media (max-width: 767.98px) {
    html body.cx-design-system .cx-device-list-filter > .device-filter-toolbar,
    html body.cx-design-system .cx-device-list-filter > .device-filter-grid,
    html body.cx-design-system .cx-account-filter-grid,
    html body.cx-design-system .cx-notification-filter-main-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

        html body.cx-design-system .cx-device-list-filter > .device-filter-toolbar > .device-filter-field--battery-toolbar,
        html body.cx-design-system .cx-device-list-filter > .device-filter-toolbar > .device-filter-summary,
        html body.cx-design-system .cx-device-list-filter > .device-filter-toolbar > .device-filter-reset {
            grid-column: 1 !important;
            grid-row: auto !important;
            width: 100% !important;
            max-width: none !important;
            justify-self: stretch !important;
        }

    html body.cx-design-system .cx-account-filter-grid {
        padding: 10px !important;
    }

        html body.cx-design-system .cx-account-filter-grid .cx-account-filter-reset,
        html body.cx-design-system .cx-notification-filter-main-grid .cx-notification-filter-reset {
            width: 100% !important;
            justify-self: stretch !important;
        }
}

/* CONEXGO R18-54 SELECT + FILTER VISUAL RESTORATION END */


/* ==========================================================================
   CONEXGO R18-55 - DASHBOARD PREMIUM POLISH / GLOBAL SELECT REFINEMENT
   Visual presentation is centralized here. Index.razor contains no style=
   attributes; dynamic percentages are mapped to CSS utility classes below.
   ========================================================================== */

/* Global CxSelect: keep the compact Device-filter pattern everywhere, with a
   clearer but restrained action surface for the chevron. */
html body.cx-design-system .cx-custom-select-trigger {
    min-height: 42px !important;
    height: 42px !important;
    grid-template-columns: minmax(0, 1fr) 30px !important;
    gap: 6px !important;
    padding: 0 5px 0 12px !important;
    border-color: #c8d8e5 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #173b62 !important;
    box-shadow: 0 1px 2px rgba(23, 59, 98, .035) !important;
    transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease !important;
}

    html body.cx-design-system .cx-custom-select-trigger:has(.cx-custom-select-leading-icon) {
        grid-template-columns: 26px minmax(0, 1fr) 30px !important;
    }

html body.cx-design-system .cx-custom-select-value {
    font-size: 13.75px !important;
    font-weight: 620 !important;
    line-height: 1.25 !important;
    color: #173b62 !important;
}

html body.cx-design-system .cx-custom-select-chevron {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    border: 1px solid #d9e7f0 !important;
    border-radius: 7px !important;
    background: #edf4f8 !important;
    color: #315d7d !important;
    box-shadow: 0 1px 2px rgba(32, 72, 105, .035) !important;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease !important;
}

html body.cx-design-system .cx-custom-select-trigger:hover:not(:disabled) {
    border-color: #96afc2 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 6px rgba(28, 65, 97, .065) !important;
}

    html body.cx-design-system .cx-custom-select-trigger:hover:not(:disabled) .cx-custom-select-chevron {
        border-color: #c4d8e6 !important;
        background: #dceaf4 !important;
        color: #214f73 !important;
        box-shadow: 0 2px 5px rgba(36, 79, 112, .08) !important;
    }

html body.cx-design-system .cx-custom-select-trigger:is( :focus-visible, .is-open, [data-cx-open="True"], [data-cx-open="true"] ) {
    border-color: #7294ad !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(62, 106, 153, .11) !important;
}

html body.cx-design-system .cx-custom-select-trigger:is( .is-open, [data-cx-open="True"], [data-cx-open="true"] ) .cx-custom-select-chevron {
    border-color: #bcd3e3 !important;
    background: #d4e6f1 !important;
    color: #1f4c6e !important;
}

html body.cx-design-system .cx-custom-select-menu--top-layer[popover],
html body.cx-design-system .cx-custom-select-menu[data-cx-select-owner] {
    padding: 6px !important;
    border: 1px solid #c9d9e5 !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 34px rgba(23, 59, 98, .16), 0 3px 10px rgba(23, 59, 98, .08) !important;
}

    html body.cx-design-system .cx-custom-select-menu--top-layer[popover] .cx-custom-select-option,
    html body.cx-design-system .cx-custom-select-menu[data-cx-select-owner] .cx-custom-select-option {
        min-height: 38px !important;
        border-radius: 7px !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
    }

        html body.cx-design-system .cx-custom-select-menu--top-layer[popover] .cx-custom-select-option:hover:not(:disabled),
        html body.cx-design-system .cx-custom-select-menu[data-cx-select-owner] .cx-custom-select-option:hover:not(:disabled),
        html body.cx-design-system .cx-custom-select-menu--top-layer[popover] .cx-custom-select-option.is-active,
        html body.cx-design-system .cx-custom-select-menu[data-cx-select-owner] .cx-custom-select-option.is-active {
            background: #eef5f9 !important;
            color: #173b62 !important;
        }

/* Header information: keep date/time readable without the excessive spacing
   seen between hour, minute and seconds. */
html body .app-header-modern .nt-clock-card {
    min-width: 300px !important;
    max-width: 360px !important;
    gap: 8px !important;
    padding-inline: 12px !important;
}

html body .app-header-modern .nt-date {
    gap: 5px !important;
}

html body .app-header-modern .nt-clock {
    gap: 2px !important;
    padding-left: 9px !important;
}

html body .app-header-modern .nt-clock-value {
    min-width: 13px !important;
    width: auto !important;
    padding: 0 !important;
    letter-spacing: 0 !important;
    font-size: 13.5px !important;
    font-weight: 720 !important;
    font-variant-numeric: tabular-nums !important;
}

html body .app-header-modern .nt-clock-separator {
    min-width: 4px !important;
    margin: 0 1px !important;
    padding: 0 !important;
    text-align: center !important;
    opacity: .66 !important;
}

/* Dashboard type and rhythm. */
html body.cx-design-system .cx-dashboard-page,
html body.cx-design-system #conexgoDashboardSmartGrid {
    font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif !important;
    color: #263f58 !important;
}

    html body.cx-design-system .conexgo-dashboard-configuration-card,
    html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item > .card {
        border: 1px solid #d6e1e9 !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        box-shadow: 0 1px 2px rgba(24, 55, 83, .035), 0 7px 20px rgba(24, 55, 83, .055) !important;
        transition: border-color .16s ease, box-shadow .16s ease !important;
    }

        html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item > .card:hover {
            border-color: #c5d7e4 !important;
            box-shadow: 0 2px 4px rgba(24, 55, 83, .05), 0 12px 28px rgba(24, 55, 83, .085) !important;
        }

html body.cx-design-system .conexgo-dashboard-card-header-surface {
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    padding: 10px 13px 10px 16px !important;
    border: 0 !important;
    border-radius: 11px 11px 0 0 !important;
    background: linear-gradient(135deg, #31597b 0%, #2a4d6d 100%) !important;
}

html body.cx-design-system .conexgo-dashboard-card-title,
html body.cx-design-system #conexgoDashboardSmartGrid .card-header .card-title {
    margin: 0 !important;
    color: #ffffff !important;
    font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    letter-spacing: -.012em !important;
    line-height: 1.28 !important;
}

html body.cx-design-system .conexgo-dashboard-card-action {
    width: 34px !important;
    height: 34px !important;
    border: 1px solid rgba(255,255,255,.34) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,.08) !important;
    color: #ffffff !important;
    transition: background-color .14s ease, border-color .14s ease !important;
}

    html body.cx-design-system .conexgo-dashboard-card-action:hover,
    html body.cx-design-system .conexgo-dashboard-card-action:focus-visible {
        border-color: rgba(255,255,255,.52) !important;
        background: rgba(255,255,255,.16) !important;
    }

html body.cx-design-system #conexgoDashboardSmartGrid .card-body {
    padding: 15px !important;
    font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif !important;
    font-size: 13.75px !important;
    font-weight: 400 !important;
    line-height: 1.48 !important;
    color: #304a63 !important;
}

html body.cx-design-system .conexgo-dashboard-configuration-card .card-body {
    padding: 16px 18px 18px !important;
}

html body.cx-design-system .conexgo-dashboard-config-layout {
    gap: 12px !important;
}

html body.cx-design-system .conexgo-dashboard-config-section,
html body.cx-design-system .conexgo-dashboard-visibility-section {
    border-color: #dce6ed !important;
    border-radius: 10px !important;
    background: #fbfdfe !important;
}

html body.cx-design-system .conexgo-dashboard-config-section-header,
html body.cx-design-system .conexgo-dashboard-visibility-heading {
    min-height: 52px !important;
    padding: 10px 12px !important;
}

html body.cx-design-system .conexgo-dashboard-config-section-title {
    color: #294865 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

html body.cx-design-system .conexgo-dashboard-config-section-description {
    margin-top: 2px !important;
    color: #6c7f90 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
}

html body.cx-design-system .conexgo-dashboard-visibility-panel {
    gap: 10px 12px !important;
}

html body.cx-design-system .conexgo-dashboard-visibility-option {
    min-height: 54px !important;
    padding: 10px 12px !important;
    border-radius: 9px !important;
    background: #f8fbfd !important;
}

    html body.cx-design-system .conexgo-dashboard-visibility-option:hover,
    html body.cx-design-system .conexgo-dashboard-visibility-option:focus-within {
        border-color: #abc6d8 !important;
        background: #f1f7fb !important;
        box-shadow: 0 4px 12px rgba(43, 80, 112, .065) !important;
    }

/* Dashboard filters and data typography. */
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-filter-label {
    margin-bottom: 5px !important;
    color: #536b80 !important;
    font-size: 12.25px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-filter-label--compact {
    font-size: 11.75px !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-muted {
    color: #6f8190 !important;
    font-size: 13px !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-filter-surface,
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-offline-filter-surface {
    flex: 0 0 auto !important;
    background: #fbfdfe !important;
    border-bottom: 1px solid #e4ebf0 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-summary-number {
    color: #315f85 !important;
    font-size: 27px !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-summary-caption {
    color: #718292 !important;
    font-size: 11.75px !important;
    font-weight: 600 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-latest-dot.is-sos {
    background: #c94b62 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-latest-dot.is-standard {
    background: #426f94 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-latest-item,
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-ranked-item,
html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-offline-item,
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-active-user {
    transition: background-color .14s ease !important;
}

    html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-latest-item:hover,
    html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-ranked-item:hover,
    html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-offline-item:hover,
    html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-active-user:hover {
        background: #f6fafc !important;
    }

/* Unit-status table: no pointless desktop horizontal scrollbar. */
@media (min-width: 900px) {
    html body.cx-design-system #conexgoDashboardSmartGrid
    .conexgo-dashboard-smart-item[data-dashboard-key="deviceStatus"]
    .conexgo-dashboard-table-scroll {
        overflow-x: hidden !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid
    .conexgo-dashboard-smart-item[data-dashboard-key="deviceStatus"]
    .conexgo-device-status-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
    }
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-table-head-row {
    background: #f3f8f6 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-model-icon {
    background: rgba(61, 98, 135, .09) !important;
    color: #3d6287 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-empty-cell {
    padding: 0 !important;
    border-bottom: 0 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-device-status-table th {
    padding: 9px 8px !important;
    color: #324d65 !important;
    font-size: 11.5px !important;
    font-weight: 720 !important;
    letter-spacing: .01em !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-device-status-table td {
    padding: 10px 8px !important;
    color: #314b63 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
}

/* Alert trend: rich hover target with visible feedback. The text itself is
   generated by GetAlertTrendTooltip and rendered by the global tooltip layer. */
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-trend-summary {
    padding: 2px 1px 6px !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-trend-stat {
    color: #667b8e !important;
    font-size: 12.25px !important;
    font-weight: 560 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-trend-stat-value {
    color: #315f85 !important;
    font-weight: 750 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-trend-chart {
    height: 126px !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 7px !important;
    padding: 12px 5px 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: thin !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-trend-point {
    position: relative !important;
    flex: 1 0 24px !important;
    min-width: 24px !important;
    height: 100% !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    cursor: help !important;
    outline: none !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-trend-bar {
    --cx-dashboard-percent: 4%;
    width: min(28px, 72%) !important;
    height: max(4px, var(--cx-dashboard-percent)) !important;
    border-radius: 6px 6px 2px 2px !important;
    background: linear-gradient(180deg, #4c789c 0%, #3b6487 100%) !important;
    box-shadow: 0 2px 4px rgba(38, 82, 116, .12) !important;
    transform-origin: bottom center !important;
    transition: transform .14s ease, filter .14s ease, box-shadow .14s ease, background-color .14s ease !important;
}

    html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-trend-bar.is-peak {
        background: linear-gradient(180deg, #3979ab 0%, #2e648f 100%) !important;
        box-shadow: 0 3px 8px rgba(46, 100, 143, .18) !important;
    }

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-trend-point:hover .conexgo-dashboard-trend-bar,
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-trend-point:focus-visible .conexgo-dashboard-trend-bar {
    transform: translateY(-3px) scaleX(1.07) !important;
    filter: saturate(1.08) brightness(.98) !important;
    box-shadow: 0 6px 14px rgba(39, 82, 116, .20) !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-trend-axis {
    display: flex !important;
    gap: 7px !important;
    margin-top: 6px !important;
    padding-inline: 5px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-trend-label {
    flex: 1 0 24px !important;
    min-width: 24px !important;
    color: #718292 !important;
    font-size: 10px !important;
    font-weight: 560 !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

/* Ranked / progress / overview details. */
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-ranked-meter {
    width: 100% !important;
    max-width: 230px !important;
    min-width: 0 !important;
    flex: 0 1 230px !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-progress {
    width: 100% !important;
    min-width: 0 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-ranked-count {
    min-width: 34px !important;
    color: #315f85 !important;
    font-weight: 750 !important;
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-progress-fill,
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-device-overview-progress-fill {
    --cx-dashboard-percent: 0%;
    width: var(--cx-dashboard-percent) !important;
    background: linear-gradient(90deg, #426f94 0%, #315f85 100%) !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-device-overview-progress-fill {
    display: block !important;
    height: 100% !important;
}

/* Offline card details. */
html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-offline-item {
    min-width: 0 !important;
    border-bottom: 1px solid #e6edf2 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-offline-main {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    padding-right: 10px !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-offline-device-link {
    display: block !important;
    overflow: hidden !important;
    color: #2d526f !important;
    font-size: 13.25px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-offline-customer {
    overflow: hidden !important;
    color: #6a7d8e !important;
    font-size: 12px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-offline-duration {
    margin-top: 4px !important;
    color: #697c8d !important;
    font-size: 11.75px !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-offline-duration-value {
    color: #315f85 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-offline-meta {
    min-width: 96px !important;
    flex: 0 0 auto !important;
    text-align: right !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-offline-severity {
    display: inline-block !important;
    padding: 3px 8px !important;
    border: 1px solid #dce5eb !important;
    border-radius: 999px !important;
    background: #f6f8fa !important;
    font-size: 10.5px !important;
    font-weight: 720 !important;
    white-space: nowrap !important;
}

    html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-offline-severity.is-critical {
        color: #8a4f4f !important;
        border-color: #e6cccc !important;
        background: #fbf4f4 !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-offline-severity.is-investigate {
        color: #8a641f !important;
        border-color: #ead9b8 !important;
        background: #fcf8ef !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-offline-severity.is-validate {
        color: #315f85 !important;
        border-color: #cfdeea !important;
        background: #f1f6fa !important;
    }

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-offline-threshold {
    margin-top: 6px !important;
    color: #758695 !important;
    font-size: 10.75px !important;
    white-space: nowrap !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-list-footer {
    border-top: 1px solid #e6edf2 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-list-count {
    color: #718292 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-view-all-link {
    color: #315f85 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Active users. */
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-active-user-copy {
    min-width: 0 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-active-user-heading {
    min-width: 0 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-active-user-name {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    color: #2b4e6b !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-active-user-score {
    color: #6c7f90 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
}

/* Hidden legacy mobile shortcuts are style-free in Razor too. */
html body.cx-design-system .conexgo-dashboard-mobile-shortcut-row {
    background: #ffffff !important;
}

html body.cx-design-system .conexgo-dashboard-mobile-shortcut-link {
    display: block !important;
    width: 100% !important;
    font-weight: 700 !important;
}

html body.cx-design-system .conexgo-dashboard-mobile-shortcut-icon {
    margin-right: 5px !important;
    font-size: 16pt !important;
}

html body.cx-design-system .cx-dashboard-percent-0 {
    --cx-dashboard-percent: 0%;
}

html body.cx-design-system .cx-dashboard-percent-1 {
    --cx-dashboard-percent: 1%;
}

html body.cx-design-system .cx-dashboard-percent-2 {
    --cx-dashboard-percent: 2%;
}

html body.cx-design-system .cx-dashboard-percent-3 {
    --cx-dashboard-percent: 3%;
}

html body.cx-design-system .cx-dashboard-percent-4 {
    --cx-dashboard-percent: 4%;
}

html body.cx-design-system .cx-dashboard-percent-5 {
    --cx-dashboard-percent: 5%;
}

html body.cx-design-system .cx-dashboard-percent-6 {
    --cx-dashboard-percent: 6%;
}

html body.cx-design-system .cx-dashboard-percent-7 {
    --cx-dashboard-percent: 7%;
}

html body.cx-design-system .cx-dashboard-percent-8 {
    --cx-dashboard-percent: 8%;
}

html body.cx-design-system .cx-dashboard-percent-9 {
    --cx-dashboard-percent: 9%;
}

html body.cx-design-system .cx-dashboard-percent-10 {
    --cx-dashboard-percent: 10%;
}

html body.cx-design-system .cx-dashboard-percent-11 {
    --cx-dashboard-percent: 11%;
}

html body.cx-design-system .cx-dashboard-percent-12 {
    --cx-dashboard-percent: 12%;
}

html body.cx-design-system .cx-dashboard-percent-13 {
    --cx-dashboard-percent: 13%;
}

html body.cx-design-system .cx-dashboard-percent-14 {
    --cx-dashboard-percent: 14%;
}

html body.cx-design-system .cx-dashboard-percent-15 {
    --cx-dashboard-percent: 15%;
}

html body.cx-design-system .cx-dashboard-percent-16 {
    --cx-dashboard-percent: 16%;
}

html body.cx-design-system .cx-dashboard-percent-17 {
    --cx-dashboard-percent: 17%;
}

html body.cx-design-system .cx-dashboard-percent-18 {
    --cx-dashboard-percent: 18%;
}

html body.cx-design-system .cx-dashboard-percent-19 {
    --cx-dashboard-percent: 19%;
}

html body.cx-design-system .cx-dashboard-percent-20 {
    --cx-dashboard-percent: 20%;
}

html body.cx-design-system .cx-dashboard-percent-21 {
    --cx-dashboard-percent: 21%;
}

html body.cx-design-system .cx-dashboard-percent-22 {
    --cx-dashboard-percent: 22%;
}

html body.cx-design-system .cx-dashboard-percent-23 {
    --cx-dashboard-percent: 23%;
}

html body.cx-design-system .cx-dashboard-percent-24 {
    --cx-dashboard-percent: 24%;
}

html body.cx-design-system .cx-dashboard-percent-25 {
    --cx-dashboard-percent: 25%;
}

html body.cx-design-system .cx-dashboard-percent-26 {
    --cx-dashboard-percent: 26%;
}

html body.cx-design-system .cx-dashboard-percent-27 {
    --cx-dashboard-percent: 27%;
}

html body.cx-design-system .cx-dashboard-percent-28 {
    --cx-dashboard-percent: 28%;
}

html body.cx-design-system .cx-dashboard-percent-29 {
    --cx-dashboard-percent: 29%;
}

html body.cx-design-system .cx-dashboard-percent-30 {
    --cx-dashboard-percent: 30%;
}

html body.cx-design-system .cx-dashboard-percent-31 {
    --cx-dashboard-percent: 31%;
}

html body.cx-design-system .cx-dashboard-percent-32 {
    --cx-dashboard-percent: 32%;
}

html body.cx-design-system .cx-dashboard-percent-33 {
    --cx-dashboard-percent: 33%;
}

html body.cx-design-system .cx-dashboard-percent-34 {
    --cx-dashboard-percent: 34%;
}

html body.cx-design-system .cx-dashboard-percent-35 {
    --cx-dashboard-percent: 35%;
}

html body.cx-design-system .cx-dashboard-percent-36 {
    --cx-dashboard-percent: 36%;
}

html body.cx-design-system .cx-dashboard-percent-37 {
    --cx-dashboard-percent: 37%;
}

html body.cx-design-system .cx-dashboard-percent-38 {
    --cx-dashboard-percent: 38%;
}

html body.cx-design-system .cx-dashboard-percent-39 {
    --cx-dashboard-percent: 39%;
}

html body.cx-design-system .cx-dashboard-percent-40 {
    --cx-dashboard-percent: 40%;
}

html body.cx-design-system .cx-dashboard-percent-41 {
    --cx-dashboard-percent: 41%;
}

html body.cx-design-system .cx-dashboard-percent-42 {
    --cx-dashboard-percent: 42%;
}

html body.cx-design-system .cx-dashboard-percent-43 {
    --cx-dashboard-percent: 43%;
}

html body.cx-design-system .cx-dashboard-percent-44 {
    --cx-dashboard-percent: 44%;
}

html body.cx-design-system .cx-dashboard-percent-45 {
    --cx-dashboard-percent: 45%;
}

html body.cx-design-system .cx-dashboard-percent-46 {
    --cx-dashboard-percent: 46%;
}

html body.cx-design-system .cx-dashboard-percent-47 {
    --cx-dashboard-percent: 47%;
}

html body.cx-design-system .cx-dashboard-percent-48 {
    --cx-dashboard-percent: 48%;
}

html body.cx-design-system .cx-dashboard-percent-49 {
    --cx-dashboard-percent: 49%;
}

html body.cx-design-system .cx-dashboard-percent-50 {
    --cx-dashboard-percent: 50%;
}

html body.cx-design-system .cx-dashboard-percent-51 {
    --cx-dashboard-percent: 51%;
}

html body.cx-design-system .cx-dashboard-percent-52 {
    --cx-dashboard-percent: 52%;
}

html body.cx-design-system .cx-dashboard-percent-53 {
    --cx-dashboard-percent: 53%;
}

html body.cx-design-system .cx-dashboard-percent-54 {
    --cx-dashboard-percent: 54%;
}

html body.cx-design-system .cx-dashboard-percent-55 {
    --cx-dashboard-percent: 55%;
}

html body.cx-design-system .cx-dashboard-percent-56 {
    --cx-dashboard-percent: 56%;
}

html body.cx-design-system .cx-dashboard-percent-57 {
    --cx-dashboard-percent: 57%;
}

html body.cx-design-system .cx-dashboard-percent-58 {
    --cx-dashboard-percent: 58%;
}

html body.cx-design-system .cx-dashboard-percent-59 {
    --cx-dashboard-percent: 59%;
}

html body.cx-design-system .cx-dashboard-percent-60 {
    --cx-dashboard-percent: 60%;
}

html body.cx-design-system .cx-dashboard-percent-61 {
    --cx-dashboard-percent: 61%;
}

html body.cx-design-system .cx-dashboard-percent-62 {
    --cx-dashboard-percent: 62%;
}

html body.cx-design-system .cx-dashboard-percent-63 {
    --cx-dashboard-percent: 63%;
}

html body.cx-design-system .cx-dashboard-percent-64 {
    --cx-dashboard-percent: 64%;
}

html body.cx-design-system .cx-dashboard-percent-65 {
    --cx-dashboard-percent: 65%;
}

html body.cx-design-system .cx-dashboard-percent-66 {
    --cx-dashboard-percent: 66%;
}

html body.cx-design-system .cx-dashboard-percent-67 {
    --cx-dashboard-percent: 67%;
}

html body.cx-design-system .cx-dashboard-percent-68 {
    --cx-dashboard-percent: 68%;
}

html body.cx-design-system .cx-dashboard-percent-69 {
    --cx-dashboard-percent: 69%;
}

html body.cx-design-system .cx-dashboard-percent-70 {
    --cx-dashboard-percent: 70%;
}

html body.cx-design-system .cx-dashboard-percent-71 {
    --cx-dashboard-percent: 71%;
}

html body.cx-design-system .cx-dashboard-percent-72 {
    --cx-dashboard-percent: 72%;
}

html body.cx-design-system .cx-dashboard-percent-73 {
    --cx-dashboard-percent: 73%;
}

html body.cx-design-system .cx-dashboard-percent-74 {
    --cx-dashboard-percent: 74%;
}

html body.cx-design-system .cx-dashboard-percent-75 {
    --cx-dashboard-percent: 75%;
}

html body.cx-design-system .cx-dashboard-percent-76 {
    --cx-dashboard-percent: 76%;
}

html body.cx-design-system .cx-dashboard-percent-77 {
    --cx-dashboard-percent: 77%;
}

html body.cx-design-system .cx-dashboard-percent-78 {
    --cx-dashboard-percent: 78%;
}

html body.cx-design-system .cx-dashboard-percent-79 {
    --cx-dashboard-percent: 79%;
}

html body.cx-design-system .cx-dashboard-percent-80 {
    --cx-dashboard-percent: 80%;
}

html body.cx-design-system .cx-dashboard-percent-81 {
    --cx-dashboard-percent: 81%;
}

html body.cx-design-system .cx-dashboard-percent-82 {
    --cx-dashboard-percent: 82%;
}

html body.cx-design-system .cx-dashboard-percent-83 {
    --cx-dashboard-percent: 83%;
}

html body.cx-design-system .cx-dashboard-percent-84 {
    --cx-dashboard-percent: 84%;
}

html body.cx-design-system .cx-dashboard-percent-85 {
    --cx-dashboard-percent: 85%;
}

html body.cx-design-system .cx-dashboard-percent-86 {
    --cx-dashboard-percent: 86%;
}

html body.cx-design-system .cx-dashboard-percent-87 {
    --cx-dashboard-percent: 87%;
}

html body.cx-design-system .cx-dashboard-percent-88 {
    --cx-dashboard-percent: 88%;
}

html body.cx-design-system .cx-dashboard-percent-89 {
    --cx-dashboard-percent: 89%;
}

html body.cx-design-system .cx-dashboard-percent-90 {
    --cx-dashboard-percent: 90%;
}

html body.cx-design-system .cx-dashboard-percent-91 {
    --cx-dashboard-percent: 91%;
}

html body.cx-design-system .cx-dashboard-percent-92 {
    --cx-dashboard-percent: 92%;
}

html body.cx-design-system .cx-dashboard-percent-93 {
    --cx-dashboard-percent: 93%;
}

html body.cx-design-system .cx-dashboard-percent-94 {
    --cx-dashboard-percent: 94%;
}

html body.cx-design-system .cx-dashboard-percent-95 {
    --cx-dashboard-percent: 95%;
}

html body.cx-design-system .cx-dashboard-percent-96 {
    --cx-dashboard-percent: 96%;
}

html body.cx-design-system .cx-dashboard-percent-97 {
    --cx-dashboard-percent: 97%;
}

html body.cx-design-system .cx-dashboard-percent-98 {
    --cx-dashboard-percent: 98%;
}

html body.cx-design-system .cx-dashboard-percent-99 {
    --cx-dashboard-percent: 99%;
}

html body.cx-design-system .cx-dashboard-percent-100 {
    --cx-dashboard-percent: 100%;
}

@media (max-width: 899.98px) {
    html body.cx-design-system #conexgoDashboardSmartGrid
    .conexgo-dashboard-smart-item[data-dashboard-key="deviceStatus"]
    .conexgo-dashboard-table-scroll {
        overflow-x: auto !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid
    .conexgo-dashboard-smart-item[data-dashboard-key="deviceStatus"]
    .conexgo-device-status-table {
        min-width: 560px !important;
    }
}

@media (max-width: 767.98px) {
    html body.cx-design-system .conexgo-dashboard-card-header-surface {
        min-height: 48px !important;
        padding: 9px 10px 9px 12px !important;
    }

    html body.cx-design-system .conexgo-dashboard-card-title,
    html body.cx-design-system #conexgoDashboardSmartGrid .card-header .card-title {
        font-size: 14.5px !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid .card-body {
        padding: 12px !important;
        font-size: 13.25px !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-trend-chart {
        height: 112px !important;
        gap: 5px !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-trend-point,
    html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-trend-label {
        flex-basis: 22px !important;
        min-width: 22px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item > .card,
    html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-trend-bar,
    html body.cx-design-system .cx-custom-select-chevron {
        transition: none !important;
    }
}

/* CONEXGO R18-55 DASHBOARD PREMIUM POLISH END */

/* ==========================================================================
   CONEXGO R18-56 - DASHBOARD VISUAL RECOVERY / FINAL QA
   Fixes the post-R18-55 visual regressions without changing dashboard data:
   - visible percentage-driven chart/progress fills,
   - compact saved card heights,
   - lighter minimized headers,
   - tighter date/time pill,
   - clearer Account/Device split action arrow,
   - refined shared CxSelect arrow surface.
   ========================================================================== */

/* Dashboard headers: open cards retain the deep Conexgo blue. Closed cards
   use a lighter blue so the state is immediately visible. */
html body.cx-design-system .conexgo-dashboard-configuration-card > .conexgo-dashboard-card-header-surface,
html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item > .card:not(.conexgo-dashboard-minimized-card) > .conexgo-dashboard-card-header-surface {
    background: linear-gradient(135deg, #315d80 0%, #294f70 100%) !important;
}

html body.cx-design-system .conexgo-dashboard-configuration-card.conexgo-dashboard-minimized-card > .conexgo-dashboard-card-header-surface,
html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item > .conexgo-dashboard-minimized-card > .conexgo-dashboard-card-header-surface {
    background: linear-gradient(135deg, #6686a0 0%, #587b98 100%) !important;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.10) !important;
}

html body.cx-design-system .conexgo-dashboard-configuration-card > .conexgo-dashboard-card-header-surface .conexgo-dashboard-card-title,
html body.cx-design-system .conexgo-dashboard-configuration-card > .conexgo-dashboard-card-header-surface .card-title,
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-card-header-surface .conexgo-dashboard-card-title,
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-card-header-surface .card-title {
    color: #ffffff !important;
    text-shadow: 0 1px 1px rgba(10,35,55,.12) !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-minimized-card .conexgo-dashboard-card-action,
html body.cx-design-system .conexgo-dashboard-configuration-card.conexgo-dashboard-minimized-card .conexgo-dashboard-card-action {
    border-color: rgba(255,255,255,.40) !important;
    background: rgba(255,255,255,.11) !important;
}

/* Percentage utilities.
   R18-55's base bar/fill selectors contain #conexgoDashboardSmartGrid and
   therefore had higher specificity than the old percentage helper classes.
   The values were calculated correctly but every trend bar stayed at 4% and
   every progress fill stayed at 0%. These equally-scoped rules restore the
   real percentages while keeping all sizing in CSS. */
html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-0 {
    --cx-dashboard-percent: 0% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-1 {
    --cx-dashboard-percent: 1% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-2 {
    --cx-dashboard-percent: 2% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-3 {
    --cx-dashboard-percent: 3% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-4 {
    --cx-dashboard-percent: 4% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-5 {
    --cx-dashboard-percent: 5% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-6 {
    --cx-dashboard-percent: 6% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-7 {
    --cx-dashboard-percent: 7% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-8 {
    --cx-dashboard-percent: 8% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-9 {
    --cx-dashboard-percent: 9% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-10 {
    --cx-dashboard-percent: 10% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-11 {
    --cx-dashboard-percent: 11% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-12 {
    --cx-dashboard-percent: 12% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-13 {
    --cx-dashboard-percent: 13% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-14 {
    --cx-dashboard-percent: 14% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-15 {
    --cx-dashboard-percent: 15% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-16 {
    --cx-dashboard-percent: 16% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-17 {
    --cx-dashboard-percent: 17% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-18 {
    --cx-dashboard-percent: 18% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-19 {
    --cx-dashboard-percent: 19% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-20 {
    --cx-dashboard-percent: 20% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-21 {
    --cx-dashboard-percent: 21% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-22 {
    --cx-dashboard-percent: 22% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-23 {
    --cx-dashboard-percent: 23% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-24 {
    --cx-dashboard-percent: 24% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-25 {
    --cx-dashboard-percent: 25% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-26 {
    --cx-dashboard-percent: 26% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-27 {
    --cx-dashboard-percent: 27% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-28 {
    --cx-dashboard-percent: 28% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-29 {
    --cx-dashboard-percent: 29% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-30 {
    --cx-dashboard-percent: 30% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-31 {
    --cx-dashboard-percent: 31% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-32 {
    --cx-dashboard-percent: 32% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-33 {
    --cx-dashboard-percent: 33% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-34 {
    --cx-dashboard-percent: 34% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-35 {
    --cx-dashboard-percent: 35% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-36 {
    --cx-dashboard-percent: 36% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-37 {
    --cx-dashboard-percent: 37% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-38 {
    --cx-dashboard-percent: 38% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-39 {
    --cx-dashboard-percent: 39% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-40 {
    --cx-dashboard-percent: 40% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-41 {
    --cx-dashboard-percent: 41% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-42 {
    --cx-dashboard-percent: 42% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-43 {
    --cx-dashboard-percent: 43% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-44 {
    --cx-dashboard-percent: 44% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-45 {
    --cx-dashboard-percent: 45% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-46 {
    --cx-dashboard-percent: 46% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-47 {
    --cx-dashboard-percent: 47% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-48 {
    --cx-dashboard-percent: 48% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-49 {
    --cx-dashboard-percent: 49% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-50 {
    --cx-dashboard-percent: 50% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-51 {
    --cx-dashboard-percent: 51% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-52 {
    --cx-dashboard-percent: 52% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-53 {
    --cx-dashboard-percent: 53% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-54 {
    --cx-dashboard-percent: 54% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-55 {
    --cx-dashboard-percent: 55% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-56 {
    --cx-dashboard-percent: 56% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-57 {
    --cx-dashboard-percent: 57% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-58 {
    --cx-dashboard-percent: 58% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-59 {
    --cx-dashboard-percent: 59% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-60 {
    --cx-dashboard-percent: 60% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-61 {
    --cx-dashboard-percent: 61% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-62 {
    --cx-dashboard-percent: 62% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-63 {
    --cx-dashboard-percent: 63% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-64 {
    --cx-dashboard-percent: 64% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-65 {
    --cx-dashboard-percent: 65% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-66 {
    --cx-dashboard-percent: 66% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-67 {
    --cx-dashboard-percent: 67% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-68 {
    --cx-dashboard-percent: 68% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-69 {
    --cx-dashboard-percent: 69% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-70 {
    --cx-dashboard-percent: 70% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-71 {
    --cx-dashboard-percent: 71% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-72 {
    --cx-dashboard-percent: 72% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-73 {
    --cx-dashboard-percent: 73% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-74 {
    --cx-dashboard-percent: 74% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-75 {
    --cx-dashboard-percent: 75% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-76 {
    --cx-dashboard-percent: 76% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-77 {
    --cx-dashboard-percent: 77% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-78 {
    --cx-dashboard-percent: 78% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-79 {
    --cx-dashboard-percent: 79% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-80 {
    --cx-dashboard-percent: 80% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-81 {
    --cx-dashboard-percent: 81% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-82 {
    --cx-dashboard-percent: 82% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-83 {
    --cx-dashboard-percent: 83% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-84 {
    --cx-dashboard-percent: 84% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-85 {
    --cx-dashboard-percent: 85% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-86 {
    --cx-dashboard-percent: 86% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-87 {
    --cx-dashboard-percent: 87% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-88 {
    --cx-dashboard-percent: 88% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-89 {
    --cx-dashboard-percent: 89% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-90 {
    --cx-dashboard-percent: 90% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-91 {
    --cx-dashboard-percent: 91% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-92 {
    --cx-dashboard-percent: 92% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-93 {
    --cx-dashboard-percent: 93% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-94 {
    --cx-dashboard-percent: 94% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-95 {
    --cx-dashboard-percent: 95% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-96 {
    --cx-dashboard-percent: 96% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-97 {
    --cx-dashboard-percent: 97% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-98 {
    --cx-dashboard-percent: 98% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-99 {
    --cx-dashboard-percent: 99% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .cx-dashboard-percent-100 {
    --cx-dashboard-percent: 100% !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-trend-chart {
    position: relative !important;
    height: 132px !important;
    padding: 13px 7px 0 !important;
    border-bottom: 1px solid #d8e4ec !important;
    background: linear-gradient(to top, transparent 24%, rgba(99,132,156,.08) 25%, transparent 26%, transparent 49%, rgba(99,132,156,.08) 50%, transparent 51%, transparent 74%, rgba(99,132,156,.08) 75%, transparent 76%) !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-trend-bar {
    min-height: 5px !important;
    width: min(30px, 74%) !important;
    border-radius: 7px 7px 2px 2px !important;
    background: linear-gradient(180deg, #5c8db2 0%, #35688f 100%) !important;
    box-shadow: 0 2px 6px rgba(37,82,116,.16) !important;
}

    html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-trend-bar.is-peak {
        background: linear-gradient(180deg, #3f86b8 0%, #255f8a 100%) !important;
        box-shadow: 0 4px 10px rgba(32,91,133,.22) !important;
    }

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-trend-point:hover .conexgo-dashboard-trend-bar,
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-trend-point:focus-visible .conexgo-dashboard-trend-bar {
    transform: translateY(-3px) scaleX(1.08) !important;
    filter: saturate(1.08) brightness(1.03) !important;
    box-shadow: 0 7px 16px rgba(31,79,113,.24) !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-progress,
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-active-user .progress {
    height: 8px !important;
    min-height: 8px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
    background: #e8eff5 !important;
    box-shadow: inset 0 1px 2px rgba(34,70,97,.06) !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-progress-fill {
    min-width: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #5b8db2 0%, #32688f 100%) !important;
    box-shadow: 0 1px 2px rgba(40,91,127,.12) !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-ranked-item:hover,
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-active-user:hover {
    background: #f7fafc !important;
}

/* Account / Device row action split buttons.
   Main label remains fixed; only the arrow segment is visibly distinct and
   receives the stronger hover/open feedback. */
html body.cx-design-system :is( .device-list-action-group .device-list-name-button, .account-list-cell-name .account-list-name-button ),
html body.cx-design-system :is( .device-list-action-group .device-list-name-button, .account-list-cell-name .account-list-name-button ):is(:hover, :focus, :active) {
    border-color: #315f82 !important;
    border-right-color: #6689a6 !important;
    background: #315f82 !important;
    color: #ffffff !important;
    transform: none !important;
    filter: none !important;
}

html body.cx-design-system :is( .device-list-action-group .device-list-action-toggle, .account-list-cell-name .conexgo-row-action-toggle ) {
    border-color: #356381 !important;
    border-left-color: #7f9cb3 !important;
    background: #426f91 !important;
    color: #f7fbfe !important;
}

    html body.cx-design-system :is( .device-list-action-group .device-list-action-toggle, .account-list-cell-name .conexgo-row-action-toggle ):hover {
        border-color: #244e6e !important;
        border-left-color: #87a3b9 !important;
        background: #285775 !important;
        color: #ffffff !important;
    }

    html body.cx-design-system :is( .device-list-action-group .device-list-action-toggle, .account-list-cell-name .conexgo-row-action-toggle )[aria-expanded="true"] {
        border-color: #1e4665 !important;
        border-left-color: #7697b0 !important;
        background: #234f70 !important;
        color: #ffffff !important;
    }

/* Shared CxSelect: keep the compact Device visual but give the arrow a little
   more separation from the value area. */
html body.cx-design-system .cx-custom-select-trigger {
    grid-template-columns: minmax(0, 1fr) 32px !important;
}

html body.cx-design-system .cx-custom-select-chevron {
    width: 30px !important;
    height: 30px !important;
    border: 1px solid #d3e1eb !important;
    border-radius: 8px !important;
    background: #edf4f8 !important;
    color: #285b80 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.70) !important;
}

html body.cx-design-system .cx-custom-select-trigger:hover:not(:disabled) .cx-custom-select-chevron {
    border-color: #bfd3e1 !important;
    background: #e1edf4 !important;
    color: #1f5278 !important;
}

html body.cx-design-system .cx-custom-select-trigger.is-open .cx-custom-select-chevron,
html body.cx-design-system .cx-custom-select-trigger[data-cx-open="True"] .cx-custom-select-chevron,
html body.cx-design-system .cx-custom-select-trigger[data-cx-open="true"] .cx-custom-select-chevron {
    border-color: #aec8da !important;
    background: #d8e8f2 !important;
    color: #194c72 !important;
}

/* Header date/time: preserve seconds but remove the loose spacing that made
   the clock read as "7 : 06 : 45 PM". */
html body .app-header-modern .app-header-center-zone .nt-clock-card,
html body .app-header-modern .nt-clock-card {
    width: auto !important;
    min-width: 0 !important;
    max-width: 370px !important;
    height: 40px !important;
    justify-content: center !important;
    gap: 9px !important;
    padding: 0 12px !important;
}

html body .app-header-modern .nt-date {
    gap: 6px !important;
}

html body .app-header-modern .nt-clock {
    gap: 0 !important;
    padding-left: 8px !important;
}

    html body .app-header-modern .nt-clock > li {
        margin: 0 !important;
    }

html body .app-header-modern .nt-time-icon {
    margin-right: 5px !important;
}

html body .app-header-modern .nt-clock-value {
    min-width: 14px !important;
    width: auto !important;
    padding: 0 !important;
    font-size: 13px !important;
    font-weight: 720 !important;
    letter-spacing: 0 !important;
}

html body .app-header-modern .nt-clock-separator {
    width: 3px !important;
    min-width: 3px !important;
    margin: 0 !important;
    opacity: .62 !important;
}

html body .app-header-modern .nt-meridiem {
    margin-left: 4px !important;
    font-size: 10px !important;
    letter-spacing: .06em !important;
}

@media (min-width: 1241px) {
    html body .app-header-modern .app-header-main-row {
        grid-template-columns: minmax(210px, 1fr) minmax(300px, 370px) minmax(330px, 1fr) !important;
    }

    html body .app-header-modern .app-header-center-zone .nt-clock-card {
        width: auto !important;
        min-width: 0 !important;
        max-width: 370px !important;
    }
}

@media (max-width: 767.98px) {
    html body .app-header-modern .nt-clock-separator-secondary,
    html body .app-header-modern .nt-seconds {
        display: none !important;
    }

    html body .app-header-modern .nt-clock-card {
        max-width: 330px !important;
    }
}

/* CONEXGO R18-56 DASHBOARD VISUAL RECOVERY END */

/* ==========================================================================
   CONEXGO R18-57 - FINAL QA RECOVERY
   Scope:
   - Welcome template reliability and editable template surfaces
   - true textarea resizing
   - inert current-page pagination status
   - Account row dropdown viewport flipping
   - Account Profile polish / Terms decline action
   - Device map/history wait states and status indicators
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Textareas — browser resize must remain functional.
   IMPORTANT: width/height are intentionally NOT !important on desktop because
   the browser writes the user's resized dimensions as inline declarations.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    html body.cx-design-system :is( .mud-dialog.cx-dialog-root, .mud-dialog.cx-standard-form-dialog, .cx-r8-account-email, .panel-body ) textarea:not([readonly]):not(:disabled):not(.note-codable):not(.fr-code),
    html body.cx-design-system textarea.cx-template-textarea:not([readonly]):not(:disabled) {
        box-sizing: border-box !important;
        width: 100%;
        height: auto;
        min-width: min(240px, 100%) !important;
        max-width: 100% !important;
        min-height: 88px !important;
        max-height: min(68dvh, 760px) !important;
        resize: both !important;
        overflow: auto !important;
        overscroll-behavior: contain !important;
    }

    html body.cx-design-system .cx-r8-account-email textarea.cx-email-compose-textarea {
        width: 100%;
        height: 168px;
        min-height: 118px !important;
        max-height: min(64dvh, 680px) !important;
        resize: both !important;
    }

    html body.cx-design-system textarea.cx-template-textarea {
        height: 150px;
        min-height: 104px !important;
    }
}

@media (max-width: 767.98px) {
    html body.cx-design-system :is( .mud-dialog.cx-dialog-root, .mud-dialog.cx-standard-form-dialog, .cx-r8-account-email, .panel-body ) textarea:not([readonly]):not(:disabled):not(.note-codable):not(.fr-code),
    html body.cx-design-system textarea.cx-template-textarea:not([readonly]):not(:disabled) {
        width: 100% !important;
        height: auto;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 96px !important;
        max-height: 62dvh !important;
        resize: vertical !important;
        overflow: auto !important;
    }
}

/* Template settings page. */
html body.cx-design-system .cx-template-label {
    padding-top: 8px !important;
    color: #294c6b !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

html body.cx-design-system .cx-template-textarea {
    display: block !important;
    border: 1px solid #c9d8e4 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #203b55 !important;
    line-height: 1.48 !important;
}

    html body.cx-design-system .cx-template-textarea:focus {
        border-color: #6f96b8 !important;
        box-shadow: 0 0 0 3px rgba(62, 106, 153, .10) !important;
    }

html body.cx-design-system .cx-template-save {
    min-height: 40px !important;
    padding: 8px 14px !important;
    border: 1px solid #315879 !important;
    border-radius: 9px !important;
    background: #315879 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Email modal / history. */
html body.cx-design-system .cx-email-history-head-row > th {
    background: #edf8f2 !important;
    color: #294b69 !important;
}

/* --------------------------------------------------------------------------
   2. Pagination — arrows can react; the "1 de N" status is display-only.
   -------------------------------------------------------------------------- */
html body.cx-design-system .conexgo-pagedlist-pagination
.conexgo-pagedlist-page-status .page-link,
html body.cx-design-system .conexgo-pagedlist-pagination
.conexgo-pagedlist-page-status .page-link:hover,
html body.cx-design-system .conexgo-pagedlist-pagination
.conexgo-pagedlist-page-status .page-link:focus,
html body.cx-design-system .conexgo-pagedlist-pagination
.conexgo-pagedlist-page-status .page-link:focus-visible,
html body.cx-design-system .conexgo-pagedlist-pagination
.conexgo-pagedlist-page-status .page-link:active {
    min-width: 112px !important;
    cursor: default !important;
    user-select: none !important;
    pointer-events: none !important;
    border-color: #315879 !important;
    background: #315879 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
}

/* --------------------------------------------------------------------------
   3. Account / Device split action menu — bottom rows must flip above instead
   of being clipped by the table/footer.
   -------------------------------------------------------------------------- */
html body.cx-design-system .account-list-cell-name .conexgo-row-action-group,
html body.cx-design-system .device-list-action-group {
    position: relative !important;
}

html body.cx-design-system .account-list-cell-name .account-list-name-button {
    width: auto !important;
    text-align: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.cx-design-system :is(.conexgo-row-action-menu, .device-list-action-menu).show {
    z-index: 1250 !important;
}

html body.cx-design-system :is( .conexgo-pagedlist-table tbody tr, .conexgo-pagedlist-table tbody td, .conexgo-pagedlist-table-region, .table-responsive ):has(:is(.conexgo-row-action-menu, .device-list-action-menu).show) {
    overflow-y: visible !important;
}

@media (min-width: 768px) {
    html body.cx-design-system :is( .conexgo-row-action-group, .device-list-action-group ).cx-row-menu-open-above > :is( .conexgo-row-action-menu, .device-list-action-menu ),
    html body.cx-design-system :is( .conexgo-row-action-group, .device-list-action-group ).cx-row-menu-open-above > :is( .conexgo-row-action-menu, .device-list-action-menu ).show {
        top: auto !important;
        right: -4px !important;
        bottom: calc(100% + 6px) !important;
        left: auto !important;
        inset: auto -4px calc(100% + 6px) auto !important;
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   4. Account Profile — less oversized, better hierarchy, no inline styling.
   -------------------------------------------------------------------------- */
html body.cx-design-system .conexgo-account-profile {
    overflow: visible !important;
    border: 1px solid #d6e1ea !important;
    border-radius: 13px !important;
    background: #ffffff !important;
    box-shadow: 0 7px 22px rgba(27, 62, 91, .06) !important;
}

html body.cx-design-system .conexgo-account-profile-header {
    min-height: 58px !important;
    padding: 13px 18px !important;
    display: flex !important;
    align-items: center !important;
    border: 0 !important;
    border-radius: 13px 13px 0 0 !important;
    background: linear-gradient(135deg, #315879 0%, #294d6d 100%) !important;
}

html body.cx-design-system .conexgo-account-profile-header-row {
    width: 100% !important;
    margin: 0 !important;
}

html body.cx-design-system .conexgo-account-profile-header .card-title {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: clamp(20px, 1.7vw, 26px) !important;
    font-weight: 760 !important;
    line-height: 1.2 !important;
}

html body.cx-design-system .conexgo-account-profile > .card-body {
    padding: 16px 18px 18px !important;
}

html body.cx-design-system .conexgo-account-profile .tab-menu-heading-boxed {
    padding: 7px !important;
    border: 1px solid #d8e3ec !important;
    border-radius: 11px !important;
    background: #f7fafc !important;
}

html body.cx-design-system .conexgo-account-profile .panel-body.tabs-menu-body {
    padding: 18px 8px 2px !important;
}

html body.cx-design-system .conexgo-account-profile-form {
    width: min(100%, 900px) !important;
    margin-inline: auto !important;
}

    html body.cx-design-system .conexgo-account-profile-form > .row {
        align-items: center !important;
        margin-bottom: 10px !important;
    }

html body.cx-design-system .conexgo-account-profile-label {
    padding-top: 0 !important;
    text-align: right !important;
    color: #294b69 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

html body.cx-design-system .conexgo-account-profile-form :is( .form-control, .cx-custom-select-trigger ) {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
}

html body.cx-design-system .conexgo-account-profile-save {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 15px !important;
    border: 1px solid #315879 !important;
    border-radius: 9px !important;
    background: #315879 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

    html body.cx-design-system .conexgo-account-profile-save:hover,
    html body.cx-design-system .conexgo-account-profile-save:focus-visible {
        border-color: #24445f !important;
        background: #24445f !important;
        color: #ffffff !important;
        transform: none !important;
    }

/* Terms: the decline action must look like an intentional destructive action. */
html body.cx-design-system .cx-profile-terms-decline {
    min-height: 40px !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 13px !important;
    border: 1px solid #d56a72 !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    color: #ad3e48 !important;
    font-size: 13px !important;
    font-weight: 720 !important;
    box-shadow: none !important;
}

    html body.cx-design-system .cx-profile-terms-decline > :is(i, span) {
        color: inherit !important;
    }

    html body.cx-design-system .cx-profile-terms-decline:hover,
    html body.cx-design-system .cx-profile-terms-decline:focus-visible {
        border-color: #bd4f59 !important;
        background: #fff2f3 !important;
        color: #96313a !important;
        transform: none !important;
    }

    html body.cx-design-system .cx-profile-terms-decline:disabled {
        opacity: .62 !important;
        cursor: wait !important;
    }

@media (max-width: 767.98px) {
    html body.cx-design-system .conexgo-account-profile > .card-body {
        padding: 12px !important;
    }

    html body.cx-design-system .conexgo-account-profile .panel-body.tabs-menu-body {
        padding: 12px 0 0 !important;
    }

    html body.cx-design-system .conexgo-account-profile-label {
        margin-bottom: 5px !important;
        text-align: left !important;
    }

    html body.cx-design-system .cx-profile-terms-decline {
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   5. Device status / history / map loading.
   Status classes replace Razor inline colors and keep the indicators coherent.
   -------------------------------------------------------------------------- */
html body.cx-design-system .device-map-settings .conexgo-device-status-item {
    color: #8998a6 !important;
}

html body.cx-design-system .device-map-settings .cx-device-tone-primary {
    color: #376b93 !important;
}

html body.cx-design-system .device-map-settings .cx-device-tone-success {
    color: #4f8b63 !important;
}

html body.cx-design-system .device-map-settings .cx-device-tone-warning {
    color: #c4932d !important;
}

html body.cx-design-system .device-map-settings .cx-device-tone-danger {
    color: #b84d59 !important;
}

html body.cx-design-system .device-map-settings .cx-device-tone-light {
    color: #477493 !important;
}

html body.cx-design-system .device-map-settings .cx-device-tone-neutral {
    color: #9aa5b1 !important;
}

html body.cx-design-system .device-map-settings
.conexgo-device-cellular .signal .bar.active {
    background: currentColor !important;
    opacity: 1 !important;
}

html body.cx-design-system .conexgo-device-battery-charge {
    display: none !important;
}

    html body.cx-design-system .conexgo-device-battery-charge.is-visible {
        display: inline-block !important;
    }

html body.cx-design-system .cx-device-phone-event {
    margin-left: 5px !important;
}

html body.cx-design-system .cx-device-phone-event--on {
    color: #37814e !important;
}

html body.cx-design-system .cx-device-phone-event--off {
    color: #8e99a4 !important;
}

html body.cx-design-system .device-map-back-icon {
    font-size: 18pt !important;
}

html body.cx-design-system .device-map-settings #waitIndicator.conexgo-history-wait {
    display: none;
    position: static !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin: 0 0 0 8px !important;
    padding: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    object-fit: contain !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    animation: none !important;
}

html body.cx-design-system .conexgo-map-controller {
    height: 0 !important;
    min-height: 0 !important;
    padding-block: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    border-width: 0 !important;
    transition: height .16s ease, opacity .16s ease !important;
}

    html body.cx-design-system .conexgo-map-controller.is-visible {
        height: 50px !important;
        min-height: 50px !important;
        opacity: 1 !important;
        border-bottom-width: 1px !important;
    }

html body.cx-design-system .device-map-loading-overlay {
    padding: 16px !important;
    background: rgba(247, 250, 252, .82) !important;
}

html body.cx-design-system .device-map-loading-card {
    width: min(300px, calc(100% - 24px)) !important;
    min-height: 0 !important;
    gap: 9px !important;
    padding: 18px 20px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 28px rgba(34, 67, 94, .12) !important;
}

html body.cx-design-system .device-map-loading-spinner {
    width: 36px !important;
    height: 36px !important;
    border-width: 4px !important;
}

html body.cx-design-system .device-map-loading-title {
    margin-top: 1px !important;
    font-size: 14px !important;
}

html body.cx-design-system .device-map-loading-description {
    max-width: 240px !important;
    font-size: 12px !important;
    line-height: 1.42 !important;
}

@media (prefers-reduced-motion: reduce) {
    html body.cx-design-system .device-map-settings #waitIndicator.conexgo-history-wait,
    html body.cx-design-system .device-map-loading-spinner {
        animation-duration: 1.6s !important;
    }
}

/* Account list classes replacing legacy inline presentation. */
html body.cx-design-system .account-list-table-head-row > th {
    background: #eaf8f1 !important;
}

html body.cx-design-system .account-list-row.is-suspended > td {
    background: #fff2f3 !important;
}

html body.cx-design-system .cx-row-action-icon-gap {
    margin-right: 5px !important;
}

html body.cx-design-system .account-list-last-login {
    margin-top: 8px !important;
    margin-left: 5px !important;
    color: #405a72 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

/* CONEXGO R18-57 FINAL QA RECOVERY END */

/* ==========================================================================
   CONEXGO R18-58 - FINAL UI HARMONIZATION
   One final cascade contract for Dashboard states, list-card geometry,
   pagination and shared dropdown action zones.
   ========================================================================== */

/* Dashboard: expanded = Conexgo navy; minimized = deliberately pale blue. */
html body.cx-design-system .conexgo-dashboard-configuration-card:not(.conexgo-dashboard-minimized-card) > .conexgo-dashboard-card-header-surface,
html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item > .card:not(.conexgo-dashboard-minimized-card) > .conexgo-dashboard-card-header-surface {
    background: #315879 !important;
    border-color: #315879 !important;
}

html body.cx-design-system .conexgo-dashboard-configuration-card.conexgo-dashboard-minimized-card > .conexgo-dashboard-card-header-surface,
html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item > .conexgo-dashboard-minimized-card > .conexgo-dashboard-card-header-surface {
    background: #e7f0f6 !important;
    border: 1px solid #c7d8e5 !important;
    box-shadow: inset 0 -1px 0 rgba(41, 79, 112, .04) !important;
}

html body.cx-design-system .conexgo-dashboard-card-title,
html body.cx-design-system #conexgoDashboardSmartGrid .card-header .card-title {
    text-transform: uppercase !important;
    letter-spacing: .025em !important;
    font-size: 14px !important;
    font-weight: 760 !important;
}

html body.cx-design-system .conexgo-dashboard-configuration-card:not(.conexgo-dashboard-minimized-card) .conexgo-dashboard-card-title,
html body.cx-design-system #conexgoDashboardSmartGrid .card:not(.conexgo-dashboard-minimized-card) .conexgo-dashboard-card-header-surface .conexgo-dashboard-card-title {
    color: #ffffff !important;
    text-shadow: none !important;
}

html body.cx-design-system .conexgo-dashboard-configuration-card.conexgo-dashboard-minimized-card .conexgo-dashboard-card-title,
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-minimized-card .conexgo-dashboard-card-title {
    color: #244b6b !important;
    text-shadow: none !important;
}

html body.cx-design-system .conexgo-dashboard-configuration-card.conexgo-dashboard-minimized-card .conexgo-dashboard-card-action,
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-minimized-card .conexgo-dashboard-card-action {
    border-color: #adc4d5 !important;
    background: #f4f8fb !important;
    color: #315879 !important;
}

    html body.cx-design-system .conexgo-dashboard-configuration-card.conexgo-dashboard-minimized-card .conexgo-dashboard-card-action:hover,
    html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-minimized-card .conexgo-dashboard-card-action:hover {
        border-color: #94b0c4 !important;
        background: #dce9f2 !important;
        color: #244b6b !important;
    }

/* The four list-oriented cards share Active Users' geometry and scrolling. */
html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item:is( [data-dashboard-key="latestAlerts"], [data-dashboard-key="topAlertDevices"], [data-dashboard-key="offlineDevices"], [data-dashboard-key="activeUsers"] ) > .conexgo-dashboard-resizable-card:not(.conexgo-dashboard-minimized-card) {
    display: flex !important;
    flex-direction: column !important;
    min-height: 300px !important;
    max-height: 500px !important;
    overflow: hidden !important;
}

    html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item:is( [data-dashboard-key="latestAlerts"], [data-dashboard-key="topAlertDevices"], [data-dashboard-key="offlineDevices"], [data-dashboard-key="activeUsers"] ) > .conexgo-dashboard-resizable-card:not(.conexgo-dashboard-minimized-card) > .card-body {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item:is( [data-dashboard-key="latestAlerts"], [data-dashboard-key="topAlertDevices"], [data-dashboard-key="offlineDevices"], [data-dashboard-key="activeUsers"] ) :is(.conexgo-dashboard-resizable-list, .conexgo-dashboard-active-users-list) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: thin !important;
    scrollbar-color: #9eb2c2 transparent !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item:is( [data-dashboard-key="latestAlerts"], [data-dashboard-key="topAlertDevices"], [data-dashboard-key="offlineDevices"], [data-dashboard-key="activeUsers"] ) :is(.conexgo-dashboard-card-filter-row, .conexgo-dashboard-filter-grid, .conexgo-dashboard-latest-summary, .conexgo-dashboard-list-footer) {
    flex: 0 0 auto !important;
}

/* Current page is a status chip, not an interactive button. */
html body.cx-design-system .conexgo-pagedlist-pagination .conexgo-pagedlist-page-status .page-link,
html body.cx-design-system .conexgo-pagedlist-pagination .conexgo-pagedlist-page-status .page-link:hover,
html body.cx-design-system .conexgo-pagedlist-pagination .conexgo-pagedlist-page-status .page-link:focus,
html body.cx-design-system .conexgo-pagedlist-pagination .conexgo-pagedlist-page-status .page-link:focus-visible,
html body.cx-design-system .conexgo-pagedlist-pagination .conexgo-pagedlist-page-status .page-link:active {
    min-width: 112px !important;
    border-color: #315879 !important;
    background: #315879 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    cursor: default !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* CxSelect action zone: center the icon perfectly and keep hover local. */
html body.cx-design-system .cx-custom-select-trigger {
    grid-template-columns: minmax(0, 1fr) 34px !important;
    column-gap: 6px !important;
}

    html body.cx-design-system .cx-custom-select-trigger:has(.cx-custom-select-leading-icon) {
        grid-template-columns: 26px minmax(0, 1fr) 34px !important;
    }

html body.cx-design-system .cx-custom-select-chevron {
    display: grid !important;
    place-items: center !important;
    align-self: center !important;
    justify-self: center !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

    html body.cx-design-system .cx-custom-select-chevron > i {
        display: block !important;
        margin: 0 !important;
        line-height: 1 !important;
        transform-origin: center !important;
    }

html body.cx-design-system .cx-custom-select-menu--top-layer[popover] {
    border-color: #bfd1df !important;
    border-radius: 10px !important;
    box-shadow: 0 16px 36px rgba(31, 68, 98, .16), 0 3px 10px rgba(31, 68, 98, .08) !important;
}

/* Account / Device split button: stable label + centered dedicated arrow. */
html body.cx-design-system :is(.conexgo-row-action-group, .device-list-action-group) {
    display: flex !important;
    align-items: stretch !important;
}

html body.cx-design-system :is( .account-list-cell-name .conexgo-row-action-toggle, .device-list-action-group .device-list-action-toggle ) {
    position: relative !important;
    flex: 0 0 48px !important;
    width: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    line-height: 1 !important;
}

    html body.cx-design-system :is( .account-list-cell-name .conexgo-row-action-toggle, .device-list-action-group .device-list-action-toggle )::after {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
        transform-origin: center !important;
    }

    html body.cx-design-system :is( .account-list-cell-name .conexgo-row-action-toggle, .device-list-action-group .device-list-action-toggle ) > .caret {
        display: none !important;
    }

html body.cx-design-system :is(.conexgo-row-action-menu, .device-list-action-menu) {
    z-index: 2000 !important;
    padding: 6px !important;
    border: 1px solid #c4d4e0 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 40px rgba(30, 63, 91, .18), 0 4px 12px rgba(30, 63, 91, .08) !important;
}

    html body.cx-design-system :is(.conexgo-row-action-menu, .device-list-action-menu) .dropdown-item {
        min-height: 38px !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 10px !important;
        border-radius: 7px !important;
    }

    html body.cx-design-system :is(.conexgo-row-action-menu, .device-list-action-menu).cx-row-menu-scrollable {
        scrollbar-width: thin !important;
        scrollbar-color: #a5b6c4 transparent !important;
    }

/* Restored history wait_status_small.gif: ergonomic spacing, no replacement spinner. */
html body.cx-design-system .device-map-settings #waitIndicator.conexgo-history-wait {
    display: none;
    position: static !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    margin-inline-start: 8px !important;
    object-fit: contain !important;
    border: 0 !important;
    background: transparent !important;
    animation: none !important;
}

/* Keep this block last: it is the final visual contract for R18-58. */
/* CONEXGO R18-58 FINAL UI HARMONIZATION END */

/* ==========================================================================
   CONEXGO R18-62 - TARGETED FINAL REPAIR
   This block intentionally changes only the defects validated in the current
   86d0b9d + R18-61 working tree. It does not restyle the application.
   ========================================================================== */

/* 1) Account / Device row-action menus.
   The split button owns the width. The menu is always below. A scrollbar is
   activated only by the R18-62 one-shot overflow check when content cannot
   fit below the trigger. */
html body.cx-design-system :is( .device-list-action-group, .account-list-cell-name .conexgo-row-action-group ) {
    position: relative !important;
    overflow: visible !important;
}

    html body.cx-design-system :is( .device-list-action-group, .account-list-cell-name .conexgo-row-action-group ) > :is(.device-list-action-menu, .conexgo-row-action-menu),
    html body.cx-design-system :is( .device-list-action-group, .account-list-cell-name .conexgo-row-action-group ) > :is(.device-list-action-menu, .conexgo-row-action-menu).show {
        position: absolute !important;
        inset: calc(100% + 6px) auto auto 0 !important;
        top: calc(100% + 6px) !important;
        right: auto !important;
        bottom: auto !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 7px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        overscroll-behavior: auto !important;
        scrollbar-gutter: auto !important;
        background: #ffffff !important;
        border: 1px solid #c5d5e2 !important;
        border-radius: 10px !important;
        box-shadow: 0 16px 34px rgba(29, 61, 89, .18) !important;
        z-index: 5200 !important;
        transition: none !important;
    }

        html body.cx-design-system :is( .device-list-action-group, .account-list-cell-name .conexgo-row-action-group ) > :is(.device-list-action-menu, .conexgo-row-action-menu).cx-r62-row-menu-scrollable {
            max-height: var(--cx-r62-row-menu-max-height) !important;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            overscroll-behavior: contain !important;
            scrollbar-gutter: stable !important;
            scrollbar-width: thin !important;
            scrollbar-color: #9fb2c1 transparent !important;
        }

html body.cx-design-system :is( .device-list-action-menu, .conexgo-row-action-menu ) .dropdown-item {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 10px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    border-radius: 7px !important;
    white-space: normal !important;
    line-height: 1.25 !important;
}

    html body.cx-design-system :is( .device-list-action-menu, .conexgo-row-action-menu ) .dropdown-item > :is(i, span[class*="fa"]) {
        width: 20px !important;
        min-width: 20px !important;
        height: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-grid !important;
        place-items: center !important;
        justify-self: center !important;
        font-size: 14px !important;
        line-height: 1 !important;
        text-align: center !important;
    }

html body.cx-design-system .account-list-cell-name
.conexgo-row-action-menu .dropdown-item > .fa-mobile {
    font-size: 14px !important;
}

html body.cx-design-system :is( .conexgo-pagedlist-table tbody tr, .conexgo-pagedlist-table tbody td, .conexgo-pagedlist-table-region, .conexgo-pagedlist-table-column, .table-responsive ):has(:is(.conexgo-row-action-menu, .device-list-action-menu).show) {
    position: relative !important;
    overflow: visible !important;
    z-index: 5100 !important;
}

/* 2) Alert device identity: device + call-center indicator stay on one
   baseline. No HTML string / inline style is used for the phone icon. */
html body.cx-design-system .alert-list-device-cell {
    min-width: 320px !important;
    vertical-align: middle !important;
}

html body.cx-design-system .alert-list-device-line {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 9px !important;
    white-space: nowrap !important;
}

html body.cx-design-system .alert-list-device-name {
    min-width: 0 !important;
}

html body.cx-design-system .alert-list-callcenter {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

    html body.cx-design-system .alert-list-callcenter > i {
        width: 18px !important;
        min-width: 18px !important;
        height: 18px !important;
        display: inline-grid !important;
        place-items: center !important;
        margin: 0 !important;
        color: #12863c !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

/* 3) PagedList desktop toolbar: Display + Range stay together on the left;
   pagination remains on the same baseline on the right. Mobile behavior is
   intentionally left to the existing component rules. */
@media (min-width: 992px) {
    html body.cx-design-system .conexgo-pagedlist-toolbar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: end !important;
        column-gap: 18px !important;
        row-gap: 10px !important;
    }

    html body.cx-design-system .conexgo-pagedlist-filters {
        min-width: 0 !important;
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: end !important;
        gap: 12px !important;
    }

    html body.cx-design-system .conexgo-pagedlist-pagination {
        width: auto !important;
        min-width: max-content !important;
        justify-self: end !important;
        align-self: end !important;
        overflow: visible !important;
    }

        html body.cx-design-system .conexgo-pagedlist-pagination .pagination {
            flex-wrap: nowrap !important;
            margin: 0 !important;
        }
}

/* Preserve R18-58's dark current-page status with no hover/interactivity. */
html body.cx-design-system .conexgo-pagedlist-pagination
.conexgo-pagedlist-page-status .page-link,
html body.cx-design-system .conexgo-pagedlist-pagination
.conexgo-pagedlist-page-status .page-link:is(:hover, :focus, :focus-visible, :active) {
    border-color: #315879 !important;
    background: #315879 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    cursor: default !important;
    pointer-events: none !important;
}

/* 4) Header clock: stable tabular columns and guaranteed meridiem spacing. */
html body.cx-design-system .app-header-modern .nt-clock {
    display: grid !important;
    grid-template-columns: 18px 2ch .55ch 2ch .55ch 2ch 2.8em !important;
    align-items: center !important;
    justify-content: center !important;
    column-gap: 3px !important;
    padding-left: 8px !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
}

    html body.cx-design-system .app-header-modern .nt-clock > .nt-time-icon {
        width: 18px !important;
        min-width: 18px !important;
        margin: 0 !important;
        text-align: center !important;
    }

    html body.cx-design-system .app-header-modern .nt-clock > .nt-clock-value {
        min-width: 2ch !important;
        width: 2ch !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        font-variant-numeric: tabular-nums !important;
    }

    html body.cx-design-system .app-header-modern .nt-clock > .nt-clock-separator {
        width: .55ch !important;
        min-width: .55ch !important;
        margin: 0 !important;
        text-align: center !important;
    }

    html body.cx-design-system .app-header-modern .nt-clock > .nt-meridiem {
        min-width: 2.8em !important;
        margin: 0 0 0 3px !important;
        text-align: left !important;
        white-space: nowrap !important;
    }

@media (max-width: 767.98px) {
    html body.cx-design-system .app-header-modern .nt-clock {
        grid-template-columns: 18px 2ch .55ch 2ch 2.8em !important;
        column-gap: 2px !important;
    }
}

/* 5) Notification header dropdown. Header/footer remain fixed in the dropdown;
   only the list can scroll. */
html body.cx-design-system .conexgo-header-notifications
.conexgo-notification-dropdown {
    width: min(400px, calc(100vw - 24px)) !important;
    min-width: min(320px, calc(100vw - 24px)) !important;
    max-width: 400px !important;
    max-height: min(480px, calc(100dvh - 96px)) !important;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
}

html body.cx-design-system .conexgo-notification-dropdown
.conexgo-notification-list {
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: thin !important;
}

html body.cx-design-system .conexgo-notification-dropdown
.conexgo-notification-item-title {
    display: -webkit-box !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
}

html body.cx-design-system :is( .conexgo-notification-badge, .conexgo-notification-header-count ).is-high {
    background: #cc3657 !important;
    color: #ffffff !important;
}

html body.cx-design-system :is( .conexgo-notification-badge, .conexgo-notification-header-count ).is-medium {
    background: #f4c542 !important;
    color: #1f2937 !important;
}

html body.cx-design-system :is( .conexgo-notification-badge, .conexgo-notification-header-count ).is-information {
    background: #2f5fa8 !important;
    color: #ffffff !important;
}

html body.cx-design-system .conexgo-notification-item-icon.is-high {
    background: #fff1f3 !important;
    color: #cc3657 !important;
}

html body.cx-design-system .conexgo-notification-item-icon.is-medium {
    background: #fff4e6 !important;
    color: #d88418 !important;
}

html body.cx-design-system .conexgo-notification-item-icon.is-information {
    background: #eef4ff !important;
    color: #2f5fa8 !important;
}

/* 6) Notification detail modal: focused desktop dialog, bounded content, fixed
   action footer. This keeps the existing visual language and only fixes scale
   and overflow. */
html body .mud-dialog.cx-notification-view-dialog,
html body .mud-dialog.cx-r1-notification-view {
    width: min(760px, calc(100vw - 32px)) !important;
    max-width: min(760px, calc(100vw - 32px)) !important;
    max-height: min(78dvh, 680px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

    html body .mud-dialog.cx-notification-view-dialog .mud-dialog-content,
    html body .mud-dialog.cx-r1-notification-view .mud-dialog-content {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        padding: 14px 16px !important;
    }

    html body .mud-dialog.cx-notification-view-dialog .mud-dialog-actions,
    html body .mud-dialog.cx-r1-notification-view .mud-dialog-actions {
        position: static !important;
        flex: 0 0 auto !important;
        margin-top: auto !important;
        background: #f7fafc !important;
    }

html body .cx-notification-view-dialog .notification-view-priority-card {
    border-left: 4px solid #2f5fa8 !important;
}

    html body .cx-notification-view-dialog
    .notification-view-priority-card.is-high {
        border-left-color: #dc3545 !important;
    }

    html body .cx-notification-view-dialog
    .notification-view-priority-card.is-medium {
        border-left-color: #b7791f !important;
    }

    html body .cx-notification-view-dialog
    .notification-view-priority-card.is-information {
        border-left-color: #2f5fa8 !important;
    }

    html body .cx-notification-view-dialog
    .notification-view-priority-card.is-high .notification-view-priority-icon {
        background: #fff1f1 !important;
        color: #dc3545 !important;
    }

    html body .cx-notification-view-dialog
    .notification-view-priority-card.is-medium .notification-view-priority-icon {
        background: #fff7e6 !important;
        color: #b7791f !important;
    }

    html body .cx-notification-view-dialog
    .notification-view-priority-card.is-information .notification-view-priority-icon {
        background: #eef4fa !important;
        color: #2f5fa8 !important;
    }

html body .cx-notification-view-dialog
.cx-dialog-action--acknowledge {
    border-color: #4f5fb8 !important;
    background: #4f5fb8 !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

@media (max-width: 767.98px) {
    html body .mud-dialog.cx-notification-view-dialog,
    html body .mud-dialog.cx-r1-notification-view {
        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;
        max-height: calc(100dvh - 14px) !important;
    }
}

/* Dashboard visual styling already matches R18-58. R18-62 intentionally
   changes only the saved-height storage generation in dashboard-layout.js. */

/* CONEXGO R18-62 TARGETED FINAL REPAIR END */

/* ==========================================================================
   CONEXGO R18-63 - TARGETED QA MICRO-FIXES
   No redesign: notification close/empty density, exact CxSelect alignment,
   and compact Dashboard list-row rhythm only.
   ========================================================================== */

/* Header notification list owns no page-list margin/gap. */
html body.cx-design-system .conexgo-header-notifications .conexgo-notification-list {
    margin: 0 !important;
    gap: 0 !important;
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
}

html body.cx-design-system .conexgo-header-notifications .conexgo-notification-empty {
    min-height: 88px !important;
    padding: 16px 14px !important;
}

html body.cx-design-system .conexgo-header-notifications .conexgo-notification-dropdown {
    height: auto !important;
}

/* JS owns the top-layer position and width. CSS must not re-introduce a
   competing minimum width. */
html body.cx-design-system .cx-custom-select-menu--top-layer[popover],
html body.cx-design-system .cx-custom-select-menu[data-cx-select-owner] {
    min-width: 0 !important;
}

    html body.cx-design-system .cx-custom-select-menu--top-layer[popover] .cx-custom-select-option,
    html body.cx-design-system .cx-custom-select-menu[data-cx-select-owner] .cx-custom-select-option {
        box-sizing: border-box !important;
    }

/* Match the compact vertical rhythm already used by Active Users without
   changing the card colors, typography, progress styling or hover language. */
html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="latestAlerts"] .conexgo-dashboard-latest-item,
html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="topAlertDevices"] .conexgo-dashboard-ranked-item,
html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="offlineDevices"] .cx-dashboard-offline-item {
    padding: 9px 10px !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="latestAlerts"] .conexgo-dashboard-latest-item {
    gap: 10px !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="topAlertDevices"] .conexgo-dashboard-ranked-item {
    gap: 10px !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="topAlertDevices"] .conexgo-dashboard-ranked-meter {
    max-width: 210px !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="offlineDevices"] .conexgo-dashboard-offline-duration {
    margin-top: 2px !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="offlineDevices"] .conexgo-dashboard-offline-threshold {
    margin-top: 3px !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="offlineDevices"] .conexgo-dashboard-list-footer {
    padding: 8px 10px !important;
}

/* CONEXGO R18-63 END */

/* ==========================================================================
   CONEXGO R18-63.2 - DASHBOARD ROW DENSITY / EMPTY NOTIFICATION MICRO-FIX
   Scope: row geometry only. Preserve colors, hover language, card shells,
   filters, progress semantics and all notification/backend behavior.
   ========================================================================== */

/* The Active Users row is the density reference (~62px including its avatar).
   Keep Top Alert Devices on one horizontal row at normal two-column dashboard
   widths instead of pushing the progress meter onto a second row at 560px. */
html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="topAlertDevices"] .conexgo-dashboard-ranked-item {
    min-height: 58px !important;
    padding: 7px 10px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(145px, 42%) !important;
    column-gap: 10px !important;
    row-gap: 2px !important;
    align-items: center !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="topAlertDevices"] .conexgo-dashboard-ranked-copy {
    align-self: center !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="topAlertDevices"] .conexgo-dashboard-ranked-title {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="topAlertDevices"] .conexgo-dashboard-ranked-subtitle {
    margin-top: 2px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="topAlertDevices"] .conexgo-dashboard-ranked-meter {
    width: 100% !important;
    max-width: 190px !important;
    gap: 7px !important;
    justify-self: end !important;
    align-self: center !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="topAlertDevices"] .conexgo-dashboard-progress {
    height: 7px !important;
    min-height: 7px !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="topAlertDevices"] .conexgo-dashboard-ranked-count {
    min-width: 26px !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

/* Latest Alerts uses the same compact rhythm. The title/time remain side by
   side at ordinary dashboard widths; this removes the unnecessary tall row. */
html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="latestAlerts"] .conexgo-dashboard-latest-item {
    min-height: 58px !important;
    padding: 7px 10px !important;
    gap: 8px !important;
    align-items: center !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="latestAlerts"] .conexgo-dashboard-latest-mainline {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 6px !important;
    align-items: baseline !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="latestAlerts"] .conexgo-dashboard-latest-title {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="latestAlerts"] .conexgo-dashboard-latest-time {
    font-size: 10.75px !important;
    line-height: 1.2 !important;
    text-align: right !important;
    white-space: nowrap !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="latestAlerts"] .conexgo-dashboard-latest-device {
    margin-top: 2px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
}

/* Offline rows have one extra information line, so keep a slightly larger
   target while removing the old p-3 vertical bulk. */
html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="offlineDevices"] .cx-dashboard-offline-item {
    min-height: 64px !important;
    padding: 7px 10px !important;
    gap: 8px !important;
    align-items: center !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="offlineDevices"] .conexgo-dashboard-offline-device-link {
    font-size: 13px !important;
    line-height: 1.2 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="offlineDevices"] .conexgo-dashboard-offline-customer,
html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="offlineDevices"] .conexgo-dashboard-offline-duration {
    margin-top: 2px !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="offlineDevices"] .conexgo-dashboard-offline-threshold {
    margin-top: 2px !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
}

/* Only genuinely narrow card containers stack the ranking meter. */
@container (max-width: 430px) {
    html body.cx-design-system #conexgoDashboardSmartGrid
    [data-dashboard-key="topAlertDevices"] .conexgo-dashboard-ranked-item {
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 4px !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid
    [data-dashboard-key="topAlertDevices"] .conexgo-dashboard-ranked-meter {
        max-width: none !important;
        justify-self: stretch !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid
    [data-dashboard-key="latestAlerts"] .conexgo-dashboard-latest-mainline {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 2px !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid
    [data-dashboard-key="latestAlerts"] .conexgo-dashboard-latest-time {
        text-align: left !important;
        white-space: normal !important;
    }
}

/* Empty notification dropdown should read as an empty state, not as a large
   blank panel. Header and footer remain unchanged. */
html body.cx-design-system .conexgo-header-notifications .conexgo-notification-empty {
    min-height: 0 !important;
    padding: 10px 14px !important;
    gap: 5px !important;
}

html body.cx-design-system .conexgo-header-notifications
.conexgo-notification-empty-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
}

/* CONEXGO R18-63.2 END */

/* ==========================================================================
   CONEXGO R18-63.3 - COLLAPSE STATE + NOTIFICATION VISIBILITY
   Targeted only: Bootstrap notification visibility and Dashboard minimized
   geometry. Existing visual language is preserved.
   ========================================================================== */

/* R18-62 made the dropdown a grid, but `display:grid !important` also
   overrode Bootstrap's hidden `.dropdown-menu` state. Bootstrap owns the
   `.show` class; the Conexgo layout applies only while the menu is open. */
html body.cx-design-system .conexgo-header-notifications
.conexgo-notification-dropdown:not(.show) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html body.cx-design-system .conexgo-header-notifications
.conexgo-notification-dropdown.show {
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* A minimized Dashboard card must collapse its actual card AND its masonry
   wrapper. Runtime resize heights are cleared by dashboard-layout.js. These
   rules are the final CSS safety net, including tablet/narrow desktop rules
   defined earlier in the cascade. */
html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item:has(> .conexgo-dashboard-minimized-card),
html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item:has(> .conexgo-dashboard-card-closing) {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    overflow: visible !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item > .conexgo-dashboard-resizable-card.conexgo-dashboard-minimized-card,
html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item > .conexgo-dashboard-resizable-card.conexgo-dashboard-card-closing,
html body.cx-design-system
.conexgo-dashboard-configuration-card.conexgo-dashboard-minimized-card,
html body.cx-design-system
.conexgo-dashboard-configuration-card.conexgo-dashboard-card-closing {
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    resize: none !important;
    overflow: hidden !important;
}

    html body.cx-design-system #conexgoDashboardSmartGrid
    .conexgo-dashboard-minimized-card > .card-body,
    html body.cx-design-system #conexgoDashboardSmartGrid
    .conexgo-dashboard-card-closing > .card-body,
    html body.cx-design-system
    .conexgo-dashboard-configuration-card.conexgo-dashboard-minimized-card > .card-body,
    html body.cx-design-system
    .conexgo-dashboard-configuration-card.conexgo-dashboard-card-closing > .card-body {
        display: none !important;
    }

/* CONEXGO R18-63.3 END */

/* ==========================================================================
   CONEXGO R18-64 - CANONICAL LIST-PAGE LAYOUT / ROW-MENU ERGONOMICS
   Shared component rules only. No page-specific restyle.
   ========================================================================== */

/* Blue list toolbar + filter disclosure = one visual unit. */
html body.cx-design-system .card > .cx-list-toolbar,
html body.cx-design-system .card > .cx-list-toolbar.mb-1 {
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

    html body.cx-design-system .card > .cx-list-toolbar + .cx-filter-disclosure {
        margin-top: 0 !important;
        border-top: 0 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    html body.cx-design-system .card > .cx-list-toolbar + .card-body:has(> .cx-filter-disclosure:first-child) {
        padding-top: 0 !important;
    }

    html body.cx-design-system .card > .cx-list-toolbar + .card-body > .cx-filter-disclosure:first-child {
        margin-top: 0 !important;
        border-top: 0 !important;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

@media (min-width: 576px) {
    html body.cx-design-system .card > .cx-list-toolbar + .card-body > .cx-filter-disclosure:first-child.cx-filter-table-width {
        width: calc(100% + 2rem) !important;
        margin-left: -1rem !important;
        margin-right: -1rem !important;
    }
}

/* Shared PagedList toolbar: Display + Range + Pagination share one baseline. */
@media (min-width: 992px) {
    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-toolbar {
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 0 10px !important;
        padding: 10px 12px !important;
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: flex-end !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        border: 1px solid #e0e8ef !important;
        border-radius: 11px !important;
        background: #fbfdff !important;
        box-shadow: none !important;
    }

    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-filters {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        display: flex !important;
        flex-flow: row nowrap !important;
        align-items: flex-end !important;
        gap: 12px !important;
    }

    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-field {
        min-width: 0 !important;
        display: grid !important;
        grid-template-rows: minmax(20px, auto) 42px !important;
        align-content: end !important;
        gap: 5px !important;
        margin: 0 !important;
    }

    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-field-label {
        min-height: 20px !important;
        margin: 0 !important;
        align-self: center !important;
    }

    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-size-select {
        width: 150px !important;
        min-width: 150px !important;
        max-width: 150px !important;
    }

    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-range-select {
        width: 220px !important;
        min-width: 220px !important;
        max-width: 220px !important;
    }

    html body.cx-design-system .cx-paged-list
    :is(.conexgo-pagedlist-size-select, .conexgo-pagedlist-range-select)
    .cx-custom-select-trigger {
        height: 42px !important;
        min-height: 42px !important;
    }

    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-pagination {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: max-content !important;
        height: 42px !important;
        margin: 0 0 0 auto !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        align-self: flex-end !important;
        overflow: visible !important;
    }

        html body.cx-design-system .cx-paged-list
        .conexgo-pagedlist-pagination .pagination {
            height: 42px !important;
            margin: 0 !important;
            display: flex !important;
            flex-wrap: nowrap !important;
            align-items: stretch !important;
            gap: 5px !important;
        }

        html body.cx-design-system .cx-paged-list
        .conexgo-pagedlist-pagination .page-link {
            min-width: 42px !important;
            height: 42px !important;
            padding: 0 10px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

    html body.cx-design-system .cx-paged-list
    .conexgo-pagedlist-page-status .page-link {
        min-width: 126px !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-toolbar {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-end !important;
        gap: 10px 12px !important;
    }

    html body.cx-design-system .cx-paged-list .conexgo-pagedlist-pagination {
        margin-left: auto !important;
        align-self: flex-end !important;
    }
}

/* CONEXGO R18-64 END */

/* ==========================================================================
   CONEXGO R18-65 - CANONICAL ADAPTIVE ACCOUNT / DEVICE ROW MENUS

   Requires the R18-65 row-menu JavaScript:
   - default: open below
   - cx-row-menu-open-above: open above
   - cx-r64-row-menu-scrollable: constrain to calculated available height

   Keep this section after all older row-menu rules so it is the single final
   placement contract for desktop/tablet row menus.
   ========================================================================== */

/* The split-button group is the positioning context. */
html body.cx-design-system :is( .device-list-action-group, .account-list-cell-name .conexgo-row-action-group ) {
    position: relative !important;
    overflow: visible !important;
}

/* Base menu geometry: natural-height menu opening below the split button. */
@media (min-width: 768px) {
    html body.cx-design-system :is( .device-list-action-group, .account-list-cell-name .conexgo-row-action-group ) > :is( .device-list-action-menu, .conexgo-row-action-menu ),
    html body.cx-design-system :is( .device-list-action-group, .account-list-cell-name .conexgo-row-action-group ) > :is( .device-list-action-menu, .conexgo-row-action-menu ).show {
        position: absolute !important;
        inset: calc(100% + 6px) 0 auto 0 !important;
        top: calc(100% + 6px) !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        overscroll-behavior: auto !important;
        scrollbar-gutter: auto !important;
        transform: none !important;
        z-index: 5200 !important;
    }

    /*
       Adaptive upward placement.
       JS adds cx-row-menu-open-above to the split-button group when the menu
       cannot fit below and there is more usable viewport space above.
    */
    html body.cx-design-system :is( .device-list-action-group, .account-list-cell-name .conexgo-row-action-group, .conexgo-row-action-group ).cx-row-menu-open-above > :is( .device-list-action-menu, .conexgo-row-action-menu ),
    html body.cx-design-system :is( .device-list-action-group, .account-list-cell-name .conexgo-row-action-group, .conexgo-row-action-group ).cx-row-menu-open-above > :is( .device-list-action-menu, .conexgo-row-action-menu ).show {
        position: absolute !important;
        inset: auto 0 calc(100% + 6px) 0 !important;
        top: auto !important;
        right: 0 !important;
        bottom: calc(100% + 6px) !important;
        left: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }
}

/*
   The JavaScript adds this class only when the natural menu cannot fit in
   the selected direction or exceeds the ergonomic height cap.
*/
html body.cx-design-system :is( .device-list-action-menu, .conexgo-row-action-menu ).cx-r64-row-menu-scrollable {
    max-height: var(--cx-r64-row-menu-max-height, 430px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: thin !important;
    scrollbar-color: #9fb2c1 transparent !important;
}

/* Keep the menu above surrounding table/card layers. */
html body.cx-design-system :is( .conexgo-pagedlist-table tbody tr, .conexgo-pagedlist-table tbody td, .conexgo-pagedlist-table-region, .conexgo-pagedlist-table-column, .table-responsive ):has(:is( .device-list-action-menu, .conexgo-row-action-menu ).show) {
    position: relative !important;
    overflow: visible !important;
    z-index: 5100 !important;
}

/* Menu item density remains consistent with the existing Conexgo design. */
html body.cx-design-system :is( .device-list-action-menu, .conexgo-row-action-menu ) .dropdown-item {
    min-height: 38px !important;
    padding: 7px 10px !important;
}

/* CONEXGO R18-65 END */

/* ==========================================================================
   CONEXGO R18-66 - TARGETED MODAL / MAP / DASHBOARD MICRO-FIXES
   No broad restyle.
   ========================================================================== */

html body .mud-dialog.cx-r1-device-geofence
.device-geofence-dialog-actions {
    justify-content: flex-end !important;
}

html body .mud-dialog.cx-r1-device-geofence
.device-geofence-dialog-actions .device-geofence-delete {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

html body .cx-r1-device-geofence .device-geofence-map-card {
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    min-height: 320px !important;
}

html body .cx-r1-device-geofence .device-geofence-map-preview {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 270px !important;
    flex: 1 1 270px !important;
    background: #eef3f7 !important;
}

html body .mud-dialog.cx-r1-device-lowbattery
.cx-device-config-field-grid {
    grid-template-columns: minmax(240px, 380px) !important;
    justify-content: start !important;
}

html body .mud-dialog.cx-r1-device-lowbattery
.cx-control--battery-threshold {
    width: 100% !important;
    max-width: 380px !important;
}

html body.cx-design-system .cx-row-action-icon--manage-devices {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 8px !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="latestAlerts"]
.conexgo-dashboard-latest-period-row {
    display: block !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="latestAlerts"]
.conexgo-dashboard-latest-period-field {
    width: min(100%, 390px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
[data-dashboard-key="latestAlerts"]
.conexgo-dashboard-latest-period-select {
    width: 100% !important;
    max-width: 390px !important;
    margin-top: 1px !important;
}

html body.cx-design-system .alert-list-device-line {
    column-gap: 14px !important;
}

html body.cx-design-system .alert-list-callcenter {
    gap: 7px !important;
}

html body.cx-design-system .alert-list-callcenter > i {
    margin-left: 1px !important;
}

html body.cx-design-system .cx-paged-list .conexgo-pagedlist-field {
    gap: 8px !important;
}

html body.cx-design-system .cx-paged-list
.conexgo-pagedlist-field-label--icon {
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

html body.cx-design-system .cx-paged-list
.conexgo-pagedlist-label-icon {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    flex: 0 0 24px !important;
    margin: 0 !important;
}

html body.cx-design-system :is(
    .device-list-action-menu,
    .conexgo-row-action-menu
).cx-r66-row-menu-scrollable {
    max-height: var(--cx-r66-row-menu-max-height) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: thin !important;
    scrollbar-color: #9fb2c1 transparent !important;
}

html body.cx-design-system :is(
    .device-list-action-menu,
    .conexgo-row-action-menu
):not(.cx-r66-row-menu-scrollable) {
    max-height: none !important;
    overflow-y: visible !important;
    scrollbar-gutter: auto !important;
}

@media (max-width: 767.98px) {
    html body .mud-dialog.cx-r1-device-lowbattery
    .cx-device-config-field-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body .mud-dialog.cx-r1-device-lowbattery
    .cx-control--battery-threshold {
        max-width: none !important;
    }
}

/* CONEXGO R18-66 END */

/* ==========================================================================
   CONEXGO R18-67 - FINAL TARGETED UI HARMONIZATION
   Targeted only: legacy onboarding modals, Notification_View, profile spacing,
   profile-image picker, Device name/action split. No broad restyle.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CHANGE PASSWORD + TIMEZONE
   Keep Blazored.Modal behavior but visually align the legacy onboarding
   dialogs with the newer Conexgo fieldset/dialog language.
   -------------------------------------------------------------------------- */

html body .blazored-modal:has(.cx-modal-title-shared-password),
html body .blazored-modal:has(.cx-modal-title-timezone) {
    width: min(760px, calc(100vw - 32px)) !important;
    max-width: min(760px, calc(100vw - 32px)) !important;
    max-height: min(760px, calc(100dvh - 32px)) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1px solid #9fb5c8 !important;
    border-radius: 14px !important;
    background: #f6f9fc !important;
    box-shadow: 0 24px 64px rgba(31, 58, 82, .24) !important;
}

html body .blazored-modal:has(.cx-modal-title-shared-password)
.blazored-modal-header,
html body .blazored-modal:has(.cx-modal-title-timezone)
.blazored-modal-header {
    min-height: 64px !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, #31597b 0%, #2a4d6d 100%) !important;
    color: #fff !important;
}

html body .blazored-modal:has(.cx-modal-title-shared-password)
.blazored-modal-title,
html body .blazored-modal:has(.cx-modal-title-timezone)
.blazored-modal-title {
    margin: 0 !important;
    color: #fff !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -.01em !important;
}

html body .blazored-modal:has(.cx-modal-title-shared-password)
.blazored-modal-close,
html body .blazored-modal:has(.cx-modal-title-timezone)
.blazored-modal-close {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: 9px !important;
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
    opacity: 1 !important;
}

html body .blazored-modal:has(.cx-modal-title-shared-password)
.blazored-modal-content,
html body .blazored-modal:has(.cx-modal-title-timezone)
.blazored-modal-content {
    max-height: calc(100dvh - 100px) !important;
    padding: 16px !important;
    overflow: auto !important;
    background: #f6f9fc !important;
}

html body .cx-legacy-password-modal,
html body .cx-legacy-timezone-modal {
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
}

html body .cx-legacy-password-modal .cx-modal-layout-v21,
html body .cx-legacy-timezone-modal .cx-modal-layout-v21 {
    padding: 0 !important;
}

html body .cx-legacy-password-modal .cx-modal-group-v21,
html body .cx-legacy-timezone-modal .cx-modal-group-v21 {
    margin: 0 !important;
    padding: 18px !important;
    border: 1px solid #9fb8ca !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(36, 67, 95, .07) !important;
}

html body .cx-legacy-password-modal .cx-r1-section-description,
html body .cx-legacy-timezone-modal .cx-r1-section-description {
    margin-bottom: 14px !important;
}

html body .cx-legacy-password-modal .cx-legacy-note {
    margin: 0 0 16px !important;
    border-color: #c8d8e5 !important;
    border-left: 4px solid #4d7ca5 !important;
    border-radius: 9px !important;
    background: #f7fafc !important;
}

html body .cx-legacy-password-modal .cx-legacy-form-row,
html body .cx-legacy-timezone-modal .cx-legacy-form-row {
    display: grid !important;
    grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 16px !important;
    row-gap: 7px !important;
    margin: 0 0 14px !important;
}

html body .cx-legacy-password-modal .cx-legacy-form-row:last-child,
html body .cx-legacy-timezone-modal .cx-legacy-form-row:last-child {
    margin-bottom: 0 !important;
}

html body .cx-legacy-password-modal .cx-legacy-form-label,
html body .cx-legacy-timezone-modal .cx-legacy-form-label {
    margin: 0 !important;
    color: #344f69 !important;
    font-weight: 750 !important;
    line-height: 1.35 !important;
}

html body .cx-legacy-password-modal .cx-password-input-shell,
html body .cx-legacy-timezone-modal .cx-control--timezone {
    width: 100% !important;
}

html body .cx-legacy-password-modal .form-control {
    min-height: 46px !important;
    border: 1px solid #b7cada !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: none !important;
}

html body .cx-legacy-password-modal .form-control:focus {
    border-color: #4d7ca5 !important;
    box-shadow: 0 0 0 3px rgba(77,124,165,.12) !important;
}

html body .cx-legacy-password-modal .cx-legacy-fieldset-actions,
html body .cx-legacy-timezone-modal .cx-legacy-fieldset-actions {
    width: 100% !important;
    margin: 14px 0 0 !important;
    padding: 14px 0 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    border-top: 1px solid #d8e2eb !important;
}

html body .cx-legacy-password-modal .conexgo-blue-button,
html body .cx-legacy-timezone-modal .conexgo-blue-button {
    min-height: 44px !important;
    margin-left: auto !important;
    padding-inline: 18px !important;
    border-radius: 9px !important;
}

/* --------------------------------------------------------------------------
   NOTIFICATION VIEW
   Preserve data/actions; improve hierarchy and form surface.
   -------------------------------------------------------------------------- */

html body .mud-dialog.cx-notification-view-dialog,
html body .mud-dialog:has(.cx-notification-view-dialog) {
    width: min(900px, calc(100vw - 32px)) !important;
    max-width: min(900px, calc(100vw - 32px)) !important;
}

html body .cx-notification-view-dialog .notification-view-form {
    width: min(100%, 820px) !important;
    margin: 0 auto !important;
    display: grid !important;
    gap: 14px !important;
}

html body .cx-notification-view-dialog .notification-view-field {
    display: grid !important;
    gap: 7px !important;
    margin: 0 !important;
}

html body .cx-notification-view-dialog .notification-view-label {
    margin: 0 !important;
    color: #48617a !important;
    font-size: .76rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    letter-spacing: .055em !important;
    text-transform: uppercase !important;
}

html body .cx-notification-view-dialog .notification-view-priority-card {
    min-height: 66px !important;
    padding: 11px 13px !important;
    gap: 12px !important;
    border: 1px solid #cbd9e5 !important;
    border-radius: 10px !important;
    background: linear-gradient(180deg, #fff 0%, #fbfdff 100%) !important;
    box-shadow: 0 2px 7px rgba(39, 70, 98, .045) !important;
}

html body .cx-notification-view-dialog .notification-view-priority-icon {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
}

html body .cx-notification-view-dialog .notification-view-title-box {
    min-height: 50px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid #c8d8e5 !important;
    border-left: 4px solid #4d7ca5 !important;
    border-radius: 9px !important;
    background: #f8fbfd !important;
    color: #243d57 !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
}

html body .cx-notification-view-dialog .notification-view-message-box {
    min-height: 110px !important;
    max-height: 260px !important;
    padding: 13px 14px !important;
    overflow: auto !important;
    border: 1px solid #c8d8e5 !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #30475f !important;
    font-size: .95rem !important;
    line-height: 1.55 !important;
    box-shadow: inset 0 1px 2px rgba(34, 61, 84, .025) !important;
}

html body .cx-notification-view-dialog .notification-view-acknowledged {
    min-height: 38px !important;
    padding: 8px 12px !important;
    border-radius: 9px !important;
}

/* --------------------------------------------------------------------------
   ACCOUNT PROFILE DETAILS + PROFILE IMAGE PICKER
   Give fields enough breathing room without making the page tall.
   -------------------------------------------------------------------------- */

html body.cx-design-system .conexgo-account-profile .form-horizontal > .row,
html body.cx-design-system .conexgo-account-profile .tab-pane .form-horizontal > .row {
    margin-bottom: 12px !important;
    row-gap: 6px !important;
}

html body.cx-design-system .conexgo-account-profile .form-horizontal > .row:last-child,
html body.cx-design-system .conexgo-account-profile .tab-pane .form-horizontal > .row:last-child {
    margin-bottom: 0 !important;
}

html body.cx-design-system .conexgo-account-profile .form-label {
    padding-top: 9px !important;
    padding-bottom: 4px !important;
}

html body.cx-design-system .conexgo-profile-icon-picker {
    margin-top: 3px !important;
    margin-bottom: 10px !important;
}

html body.cx-design-system .conexgo-profile-icon-picker__trigger {
    min-height: 48px !important;
    gap: 10px !important;
    padding: 6px 8px !important;
}

html body.cx-design-system .conexgo-profile-icon-picker__preview {
    margin-right: 2px !important;
}

html body.cx-design-system .conexgo-profile-icon-picker__panel {
    top: calc(100% + 10px) !important;
    max-height: min(270px, 38dvh) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    z-index: 4500 !important;
}

html body.cx-design-system .conexgo-profile-icon-picker__option {
    min-height: 48px !important;
    gap: 11px !important;
    padding: 7px 10px !important;
}

/* --------------------------------------------------------------------------
   DEVICE NAME/ACTION CONTROL — Nancy QA request.
   Product/name surface stays white with dark text. The menu-arrow section
   remains a distinct Conexgo-blue action surface with a high-contrast chevron.
   -------------------------------------------------------------------------- */

html body.cx-design-system .device-list-action-group .device-list-name-button,
html body.cx-design-system .device-list-action-group .device-list-name-button:hover,
html body.cx-design-system .device-list-action-group .device-list-name-button:focus,
html body.cx-design-system .device-list-action-group .device-list-name-button:active {
    min-height: 46px !important;
    padding: 7px 12px !important;
    gap: 9px !important;
    border-color: #b8cbd9 !important;
    border-right-color: #9fb8ca !important;
    background: #fff !important;
    color: #274966 !important;
    box-shadow: none !important;
}

html body.cx-design-system .device-list-action-group .device-list-name-button:hover,
html body.cx-design-system .device-list-action-group .device-list-name-button:focus-visible {
    background: #f7fafc !important;
    border-color: #8eacbf !important;
}

html body.cx-design-system .device-list-action-group .device-list-name-button img {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    padding: 2px !important;
    object-fit: contain !important;
    image-rendering: auto !important;
    opacity: 1 !important;
    filter: contrast(1.04) saturate(1.05) !important;
    background: #ffffff !important;
    border: 1px solid #d7e3ec !important;
    border-radius: 9px !important;
}

html body.cx-design-system .device-list-action-group .device-list-name-text {
    color: #274966 !important;
    font-weight: 800 !important;
}

html body.cx-design-system .device-list-action-group .device-list-action-toggle,
html body.cx-design-system .device-list-action-group .device-list-action-toggle:hover,
html body.cx-design-system .device-list-action-group .device-list-action-toggle:focus,
html body.cx-design-system .device-list-action-group .device-list-action-toggle:active,
html body.cx-design-system .device-list-action-group .device-list-action-toggle.show {
    width: 48px !important;
    min-width: 48px !important;
    flex-basis: 48px !important;
    border-color: #315879 !important;
    background: #315879 !important;
    color: #fff !important;
    box-shadow: none !important;
}

html body.cx-design-system .device-list-action-group .device-list-action-toggle:hover,
html body.cx-design-system .device-list-action-group .device-list-action-toggle:focus-visible {
    background: #294c69 !important;
    border-color: #294c69 !important;
}

html body.cx-design-system .device-list-action-group .device-list-action-toggle::after,
html body.cx-design-system .device-list-action-group .device-list-action-toggle .caret {
    color: #fff !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Keep the white name/action split coherent as one control. */
html body.cx-design-system .device-list-action-group {
    border-radius: 10px !important;
    box-shadow: 0 2px 7px rgba(37, 66, 92, .075) !important;
}

html body.cx-design-system .device-list-action-group .device-list-name-button {
    border-radius: 10px 0 0 10px !important;
}

html body.cx-design-system .device-list-action-group .device-list-action-toggle {
    border-radius: 0 10px 10px 0 !important;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    html body .blazored-modal:has(.cx-modal-title-shared-password),
    html body .blazored-modal:has(.cx-modal-title-timezone) {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }

    html body .cx-legacy-password-modal .cx-legacy-form-row,
    html body .cx-legacy-timezone-modal .cx-legacy-form-row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 7px !important;
    }

    html body .cx-legacy-password-modal .cx-legacy-form-label,
    html body .cx-legacy-timezone-modal .cx-legacy-form-label {
        text-align: left !important;
    }

    html body .mud-dialog.cx-notification-view-dialog,
    html body .mud-dialog:has(.cx-notification-view-dialog) {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
    }
}

/* CONEXGO R18-67 END */


/* ==========================================================================
   CONEXGO R18-68 - DATA LOG RESET BUTTON + R18-67 RECOVERY
   Keep the Data Logs reset action compact. The generic Device toolbar desktop
   grid has three columns for Battery + summary + reset; Data Logs only have
   summary + reset, so the reset button was auto-placed into the flexible 1fr
   column and stretched across most of the panel. This override restores the
   intended two-item toolbar without changing Device/Notification filters.
   ========================================================================== */

html body.cx-design-system .cx-data-log-unified-toolbar {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px 14px !important;
}

html body.cx-design-system .cx-data-log-unified-toolbar > .device-filter-summary {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

html body.cx-design-system .cx-data-log-unified-toolbar > .device-filter-reset {
    width: auto !important;
    min-width: 0 !important;
    max-width: max-content !important;
    min-height: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    flex: 0 0 auto !important;
    justify-self: auto !important;
    align-self: center !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

@media (max-width: 575.98px) {
    html body.cx-design-system .cx-data-log-unified-toolbar {
        align-items: flex-start !important;
    }

    html body.cx-design-system .cx-data-log-unified-toolbar > .device-filter-reset {
        min-height: 38px !important;
        height: 38px !important;
        padding-inline: 11px !important;
    }
}

/* CONEXGO R18-68 END */


/* ==========================================================================
   CONEXGO R18-70 - MARC-INTEGRATED COMPACT DASHBOARD / UNIFIED ROW ACTIONS

   Final cascade contract for this phase:
   - preserve Marc's R18-65 adaptive up/down row-menu placement;
   - unify Account + Device split controls and menu typography;
   - reduce Dashboard Customization density without changing dashboard logic.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ACCOUNT + DEVICE ROW ACTIONS
   Marc owns placement/overflow geometry. R18-70 only owns the visual surface.
   -------------------------------------------------------------------------- */

html body.cx-design-system :is(
    .device-list-action-group,
    .account-list-cell-name .conexgo-row-action-group
) {
    width: min(100%, 520px) !important;
    min-width: 0 !important;
    max-width: 520px !important;
    display: flex !important;
    align-items: stretch !important;
    border-radius: 9px !important;
    box-shadow: 0 2px 7px rgba(37, 66, 92, .07) !important;
}

html body.cx-design-system :is(
    .device-list-action-group .device-list-name-button,
    .account-list-cell-name .account-list-name-button
),
html body.cx-design-system :is(
    .device-list-action-group .device-list-name-button,
    .account-list-cell-name .account-list-name-button
):is(:hover, :focus, :focus-visible, :active) {
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    flex: 1 1 auto !important;
    padding: 6px 11px !important;
    border: 1px solid #b8cbd9 !important;
    border-right-color: #9fb8ca !important;
    border-radius: 9px 0 0 9px !important;
    background: #ffffff !important;
    color: #274966 !important;
    text-align: left !important;
    font-size: 13.5px !important;
    font-weight: 720 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

html body.cx-design-system :is(
    .device-list-action-group .device-list-name-button,
    .account-list-cell-name .account-list-name-button
):is(:hover, :focus-visible) {
    border-color: #8eacbf !important;
    background: #f7fafc !important;
}

html body.cx-design-system .device-list-action-group .device-list-name-button {
    gap: 8px !important;
}

html body.cx-design-system .device-list-action-group .device-list-name-button img {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    padding: 2px !important;
    object-fit: contain !important;
    image-rendering: auto !important;
    opacity: 1 !important;
    filter: contrast(1.04) saturate(1.05) !important;
    background: #ffffff !important;
    border: 1px solid #d7e3ec !important;
    border-radius: 9px !important;
}

html body.cx-design-system .device-list-action-group .device-list-name-text {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #274966 !important;
    font-size: 13.5px !important;
    font-weight: 720 !important;
}

html body.cx-design-system :is(
    .device-list-action-group .device-list-action-toggle,
    .account-list-cell-name .conexgo-row-action-toggle
),
html body.cx-design-system :is(
    .device-list-action-group .device-list-action-toggle,
    .account-list-cell-name .conexgo-row-action-toggle
):is(:hover, :focus, :focus-visible, :active),
html body.cx-design-system :is(
    .device-list-action-group .device-list-action-toggle,
    .account-list-cell-name .conexgo-row-action-toggle
)[aria-expanded="true"] {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    flex: 0 0 42px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #315879 !important;
    border-left-color: #486f8d !important;
    border-radius: 0 9px 9px 0 !important;
    background: #315879 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

html body.cx-design-system :is(
    .device-list-action-group .device-list-action-toggle,
    .account-list-cell-name .conexgo-row-action-toggle
):is(:hover, :focus-visible),
html body.cx-design-system :is(
    .device-list-action-group .device-list-action-toggle,
    .account-list-cell-name .conexgo-row-action-toggle
)[aria-expanded="true"] {
    border-color: #294c69 !important;
    background: #294c69 !important;
}

html body.cx-design-system :is(
    .device-list-action-group .device-list-action-toggle,
    .account-list-cell-name .conexgo-row-action-toggle
)::after,
html body.cx-design-system :is(
    .device-list-action-group .device-list-action-toggle,
    .account-list-cell-name .conexgo-row-action-toggle
) .caret {
    color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
}

html body.cx-design-system :is(
    .device-list-action-menu,
    .conexgo-row-action-menu
).cx-r64-row-menu-scrollable {
    max-height: var(--cx-r64-row-menu-max-height, 430px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: thin !important;
    scrollbar-color: #9fb2c1 transparent !important;
}

html body.cx-design-system :is(
    .device-list-action-menu,
    .conexgo-row-action-menu
):not(.cx-r64-row-menu-scrollable) {
    max-height: none !important;
    overflow-y: visible !important;
    scrollbar-gutter: auto !important;
}

html body.cx-design-system :is(
    .device-list-action-menu,
    .conexgo-row-action-menu
) {
    padding: 6px !important;
    border: 1px solid #c7d7e2 !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 30px rgba(32, 61, 87, .14) !important;
}

html body.cx-design-system :is(
    .device-list-action-menu,
    .conexgo-row-action-menu
) .dropdown-item {
    min-height: 36px !important;
    padding: 7px 9px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    border-radius: 6px !important;
    color: #294865 !important;
    font-size: 13px !important;
    font-weight: 620 !important;
    line-height: 1.22 !important;
    white-space: normal !important;
}

html body.cx-design-system :is(
    .device-list-action-menu,
    .conexgo-row-action-menu
) .dropdown-item > :is(i, span[class*="fa"]) {
    width: 18px !important;
    min-width: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #5b7d99 !important;
    font-size: 14px !important;
}

html body.cx-design-system :is(
    .device-list-action-menu,
    .conexgo-row-action-menu
) .dropdown-item:is(:hover, :focus-visible) {
    background: #eef5fa !important;
    color: #214763 !important;
}

html body.cx-design-system :is(
    .device-list-action-menu,
    .conexgo-row-action-menu
) :is(li.divider, .dropdown-divider) {
    height: 1px !important;
    min-height: 1px !important;
    margin: 5px 4px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: #e1e9ef !important;
}

html body.cx-design-system :is(
    .device-list-action-menu,
    .conexgo-row-action-menu
) .dropdown-item.text-danger {
    color: #b93a4e !important;
}

@media (max-width: 767.98px) {
    html body.cx-design-system :is(
        .device-list-action-group,
        .account-list-cell-name .conexgo-row-action-group
    ) {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   DASHBOARD CUSTOMIZATION - COMPACT ENTERPRISE DENSITY
   Same controls, same behavior, substantially less vertical space.
   -------------------------------------------------------------------------- */

html body.cx-design-system .conexgo-dashboard-configuration-row {
    margin-bottom: 12px !important;
}

html body.cx-design-system .conexgo-dashboard-configuration-card:not(.conexgo-dashboard-minimized-card)
> .conexgo-dashboard-card-header-surface {
    min-height: 44px !important;
    height: 44px !important;
    padding: 6px 9px 6px 13px !important;
}

html body.cx-design-system .conexgo-dashboard-configuration-card
.conexgo-dashboard-card-header {
    min-height: 0 !important;
    gap: 8px !important;
}

html body.cx-design-system .conexgo-dashboard-configuration-card
.conexgo-dashboard-card-title {
    font-size: 13.25px !important;
    letter-spacing: .02em !important;
    line-height: 1.15 !important;
}

html body.cx-design-system .conexgo-dashboard-configuration-card
.conexgo-dashboard-card-action {
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
}

html body.cx-design-system .conexgo-dashboard-configuration-card > .card-body {
    padding: 10px 12px 12px !important;
}

html body.cx-design-system .conexgo-dashboard-config-layout {
    gap: 8px !important;
}

html body.cx-design-system .conexgo-dashboard-config-section,
html body.cx-design-system .conexgo-dashboard-visibility-section {
    padding: 8px 9px !important;
    border-radius: 9px !important;
}

html body.cx-design-system .conexgo-dashboard-config-section-header {
    min-height: 38px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 32px minmax(0, 1fr) 24px !important;
    align-items: center !important;
    gap: 8px !important;
}

html body.cx-design-system .conexgo-dashboard-config-section-icon {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #d5e2eb !important;
    border-radius: 8px !important;
    background: #f8fbfd !important;
    color: #315879 !important;
    font-size: 13px !important;
}

html body.cx-design-system .conexgo-dashboard-config-section-copy {
    min-width: 0 !important;
    gap: 1px !important;
}

html body.cx-design-system .conexgo-dashboard-config-section-title {
    font-size: 12.75px !important;
    font-weight: 720 !important;
    line-height: 1.22 !important;
}

html body.cx-design-system .conexgo-dashboard-config-section-description {
    margin-top: 1px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}

html body.cx-design-system .conexgo-dashboard-config-section-toggle {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
}

html body.cx-design-system .conexgo-dashboard-config-collapse-inner {
    padding-top: 7px !important;
}

html body.cx-design-system .conexgo-dashboard-config-add-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 40px !important;
    align-items: center !important;
    gap: 7px !important;
}

html body.cx-design-system .cx-control--dashboard-config .cx-custom-select-trigger {
    min-height: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
}

html body.cx-design-system .conexgo-dashboard-config-icon-button {
    width: 40px !important;
    min-width: 40px !important;
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 8px !important;
}

html body.cx-design-system .conexgo-dashboard-config-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
}

html body.cx-design-system .conexgo-dashboard-config-action {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 9px !important;
    gap: 6px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

html body.cx-design-system .conexgo-dashboard-visibility-section {
    margin-top: 8px !important;
}

html body.cx-design-system .conexgo-dashboard-visibility-heading {
    min-height: 38px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto 24px !important;
    align-items: center !important;
    gap: 8px !important;
}

html body.cx-design-system .conexgo-dashboard-visibility-count {
    min-width: 46px !important;
    height: 28px !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #d2e0e9 !important;
    border-radius: 999px !important;
    background: #f6f9fb !important;
    color: #3b5b74 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
}

html body.cx-design-system .conexgo-dashboard-visibility-panel {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    gap: 7px !important;
}

html body.cx-design-system .conexgo-dashboard-visibility-option {
    min-height: 42px !important;
    padding: 7px 9px !important;
    border-radius: 8px !important;
    font-size: 12.25px !important;
    line-height: 1.2 !important;
}

@media (min-width: 1200px) {
    html body.cx-design-system .conexgo-dashboard-config-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    html body.cx-design-system .conexgo-dashboard-visibility-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767.98px) {
    html body.cx-design-system .conexgo-dashboard-configuration-card:not(.conexgo-dashboard-minimized-card)
    > .conexgo-dashboard-card-header-surface {
        height: auto !important;
        min-height: 44px !important;
    }

    html body.cx-design-system .conexgo-dashboard-configuration-card > .card-body {
        padding: 8px !important;
    }

    html body.cx-design-system .conexgo-dashboard-config-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    html body.cx-design-system .conexgo-dashboard-config-actions {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body.cx-design-system .conexgo-dashboard-config-action {
        width: 100% !important;
    }

    html body.cx-design-system .conexgo-dashboard-visibility-panel {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body.cx-design-system .conexgo-dashboard-visibility-option {
        min-height: 40px !important;
    }
}

/* CONEXGO R18-70 END */
/* ==========================================================================
   CONEXGO R18-71 - DASHBOARD FILTER / OVERFLOW / ROW MENU / NAVBAR QA
   Final cascade only. No application behavior is removed.
   ========================================================================== */

/* Dashboard primary filters: Period + Alert type are a permanent pair. */
html body.cx-design-system #conexgoDashboardSmartGrid
.conexgo-dashboard-filter-stack {
    min-width: 0 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
.conexgo-dashboard-primary-filter-row {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: end !important;
    gap: 10px !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
.conexgo-dashboard-custom-range-grid {
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 9px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    align-items: end !important;
    gap: 8px !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
.conexgo-dashboard-filter-field {
    min-width: 0 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
.conexgo-dashboard-filter-field .cx-control--dashboard-filter,
html body.cx-design-system #conexgoDashboardSmartGrid
.conexgo-dashboard-filter-field .cx-custom-select,
html body.cx-design-system #conexgoDashboardSmartGrid
.conexgo-dashboard-filter-field .cx-custom-select-trigger {
    width: 100% !important;
    min-width: 0 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
.conexgo-dashboard-filter-field .cx-custom-select-value {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: left !important;
}

/* Content-driven Dashboard cards: remove browser resize handles and the
   oversized blank zones they were creating. Lists alone receive bounded
   internal scrolling when real data is present. */
html body.cx-design-system #conexgoDashboardSmartGrid
> .conexgo-dashboard-smart-item
> .conexgo-dashboard-resizable-card:not(.conexgo-dashboard-minimized-card) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    resize: none !important;
    overflow: visible !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
> .conexgo-dashboard-smart-item
> .conexgo-dashboard-resizable-card:not(.conexgo-dashboard-minimized-card)
> .card-body {
    min-height: 0 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
:is(.conexgo-dashboard-resizable-list, .conexgo-dashboard-active-users-list) {
    min-height: 0 !important;
    max-height: 300px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: thin !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
.conexgo-dashboard-no-data-card
:is(.conexgo-dashboard-resizable-list, .conexgo-dashboard-active-users-list) {
    max-height: none !important;
    overflow-y: visible !important;
    scrollbar-gutter: auto !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
.conexgo-dashboard-no-data-card > .card-body {
    padding-top: 12px !important;
    padding-bottom: 14px !important;
    overflow: visible !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
.conexgo-dashboard-no-data-card
.conexgo-dashboard-empty-state,
html body.cx-design-system #conexgoDashboardSmartGrid
.conexgo-dashboard-no-data-card
.conexgo-dashboard-empty-state.compact {
    min-height: 0 !important;
    padding: 10px 8px 8px !important;
    gap: 5px !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
.conexgo-dashboard-no-data-card
.conexgo-dashboard-empty-icon {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin-bottom: 2px !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
.conexgo-dashboard-no-data-card
.conexgo-dashboard-empty-title {
    margin-top: 0 !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid
.conexgo-dashboard-no-data-card
.conexgo-dashboard-empty-description {
    margin-top: 0 !important;
}

/* Account rows: many linked devices/documents must not turn one record into a
   several-hundred-pixel row. Dense collections scroll inside their own cell. */
html body.cx-design-system .account-list-row > td {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    vertical-align: top !important;
}

html body.cx-design-system
:is(.account-list-cell-name, .account-list-cell-contact, .account-list-cell-devices) {
    vertical-align: top !important;
}

html body.cx-design-system .account-list-last-login {
    margin-top: 6px !important;
    margin-left: 5px !important;
}

html body.cx-design-system
:is(.account-list-device-links, .account-list-document-stack) {
    max-height: 132px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: thin !important;
    scrollbar-color: #a7b8c6 transparent !important;
}

html body.cx-design-system .account-list-device-links {
    align-content: start !important;
    padding-right: 4px !important;
    margin-bottom: 6px !important;
}

/* Account + Device row menus: text is a left-aligned list, never a centered
   button stack. Marc's placement classes still own up/down geometry. */
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu) {
    padding: 5px !important;
}

html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu) > li {
    width: 100% !important;
    min-width: 0 !important;
}

html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu) .dropdown-item {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 6px 8px !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    text-align: left !important;
    white-space: normal !important;
}

html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item > :is(i, span[class*="fa"]) {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;
    flex: 0 0 18px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item > *:not(i):not(span[class*="fa"]) {
    min-width: 0 !important;
    text-align: left !important;
}

/* Header: keep the clock inside a bounded center column. Row-menu JavaScript
   uses the visible header bottom as a hard upper boundary. */
html body.cx-design-system .app-header-modern
:is(.app-header-left-zone, .app-header-center-zone, .app-header-right-zone) {
    min-width: 0 !important;
}

html body.cx-design-system .app-header-modern .app-header-center-zone {
    overflow: visible !important;
}

html body.cx-design-system .app-header-modern .app-header-center-zone .nt-clock-card {
    min-width: 0 !important;
    width: min(100%, 350px) !important;
    max-width: 350px !important;
}

@media (min-width: 1241px) and (max-width: 1599.98px) {
    html body.cx-design-system .app-header-modern .app-header-main-row {
        grid-template-columns:
            minmax(240px, .9fr)
            minmax(300px, 350px)
            minmax(360px, 1.1fr) !important;
        column-gap: 12px !important;
    }

    html body.cx-design-system .app-header-modern .nt-clock-card {
        padding-inline: 10px !important;
        gap: 7px !important;
    }
}

@media (max-width: 767.98px) {
    html body.cx-design-system #conexgoDashboardSmartGrid
    .conexgo-dashboard-primary-filter-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid
    .conexgo-dashboard-custom-range-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid
    .conexgo-dashboard-primary-filter-row .conexgo-dashboard-filter-label {
        font-size: 11px !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid
    .conexgo-dashboard-primary-filter-row .cx-custom-select-trigger {
        min-height: 38px !important;
        height: 38px !important;
        font-size: 11.5px !important;
    }
}

/* CONEXGO R18-71 END */

/* ==========================================================================
   CONEXGO R18-72 - MODALS / CLOCK / SELECTS / PROFILE PICKER / DATA LOGS
   Final QA layer. Historical cumulative rules remain below this layer in the
   source history, but this contract is intentionally last in the cascade.
   ========================================================================== */

/* Real MudDialog security/timezone prompts: Device_AddEdit visual language. */
html body.cx-design-system .mud-dialog.cx-r18-72-security-dialog {
    width: min(760px, calc(100vw - 32px)) !important;
    max-width: 760px !important;
    border: 1px solid #c8d9e7 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #f8fbfd !important;
    box-shadow: 0 22px 60px rgba(31, 61, 88, .20) !important;
}

html body.cx-design-system .mud-dialog.cx-r18-72-security-dialog .mud-dialog-title.cx-r18-72-security-title,
html body.cx-design-system .mud-dialog.cx-r18-72-security-dialog .cx-r18-72-security-title {
    min-height: 54px !important;
    padding: 13px 18px !important;
    display: flex !important;
    align-items: center !important;
    background: #315f82 !important;
    border-bottom: 1px solid #294f6d !important;
    color: #fff !important;
    font-size: 17px !important;
    font-weight: 750 !important;
    letter-spacing: .01em !important;
}

html body.cx-design-system .mud-dialog.cx-r18-72-security-dialog .cx-r18-72-security-content {
    padding: 16px 18px !important;
    background: #f8fbfd !important;
}

html body.cx-design-system .mud-dialog.cx-r18-72-security-dialog .cx-r18-72-security-layout,
html body.cx-design-system .mud-dialog.cx-r18-72-security-dialog .cx-r18-72-security-form {
    width: 100% !important;
    min-width: 0 !important;
}

html body.cx-design-system .mud-dialog.cx-r18-72-security-dialog .cx-r18-72-security-section {
    margin: 0 !important;
    padding: 18px 18px 16px !important;
    background: #fff !important;
    border: 1px solid #9fbdd4 !important;
    border-radius: 12px !important;
}

html body.cx-design-system .mud-dialog.cx-r18-72-security-dialog .cx-r1-section-title {
    color: #173f60 !important;
    font-size: 14px !important;
    font-weight: 750 !important;
}

html body.cx-design-system .mud-dialog.cx-r18-72-security-dialog .cx-r1-section-description {
    margin: 2px 0 14px !important;
    color: #5d7489 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

html body.cx-design-system .mud-dialog.cx-r18-72-security-dialog .cx-r1-form-row {
    margin: 0 !important;
    padding: 9px 0 !important;
    display: flex !important;
    align-items: center !important;
    row-gap: 6px !important;
}

html body.cx-design-system .mud-dialog.cx-r18-72-security-dialog .cx-r1-form-row > .form-label {
    padding-right: 16px !important;
    text-align: right !important;
}

html body.cx-design-system .mud-dialog.cx-r18-72-security-dialog .cx-r1-form-row > .form-label > label {
    margin: 0 !important;
    color: #294a67 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

html body.cx-design-system .mud-dialog.cx-r18-72-security-dialog .form-control,
html body.cx-design-system .mud-dialog.cx-r18-72-security-dialog .cx-custom-select-trigger {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 9px !important;
}

html body.cx-design-system .mud-dialog.cx-r18-72-security-dialog .cx-r18-72-password-shell {
    position: relative !important;
}

html body.cx-design-system .mud-dialog.cx-r18-72-security-dialog .cx-password-visibility-toggle {
    width: 38px !important;
    height: 38px !important;
    right: 2px !important;
    top: 2px !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #4d7392 !important;
    background: transparent !important;
}

html body.cx-design-system .mud-dialog.cx-r18-72-security-dialog .cx-password-visibility-toggle:hover {
    color: #2f5f83 !important;
    background: #edf5fa !important;
}

html body.cx-design-system .cx-r18-72-security-note {
    margin: 0 0 12px !important;
    padding: 9px 11px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 9px !important;
    border: 1px solid #c8dbe9 !important;
    border-left: 3px solid #4d7fa5 !important;
    border-radius: 9px !important;
    background: #f5f9fc !important;
    color: #4e687f !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
}

html body.cx-design-system .cx-r18-72-security-note__icon {
    color: #4d7fa5 !important;
    flex: 0 0 auto !important;
}

html body.cx-design-system .cx-r18-72-timezone-help {
    margin-top: 9px !important;
    padding: 9px 11px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 5px 8px !important;
    border-radius: 9px !important;
    background: #f5f9fc !important;
    color: #5a7185 !important;
    font-size: 11.5px !important;
}

html body.cx-design-system .cx-r18-72-timezone-help__label {
    font-weight: 700 !important;
    color: #355977 !important;
}

html body.cx-design-system .cx-r18-72-timezone-help__value {
    font-variant-numeric: tabular-nums !important;
}

html body.cx-design-system .mud-dialog.cx-r18-72-security-dialog .cx-r18-72-security-actions {
    min-height: 62px !important;
    padding: 10px 16px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    border-top: 1px solid #d8e4ed !important;
    background: #f8fbfd !important;
}

html body.cx-design-system .cx-r18-72-dialog-loading {
    min-height: 160px !important;
    display: grid !important;
    place-items: center !important;
}

/* Global CxSelect: softer Conexgo palette and left-aligned content. */
html body.cx-design-system .cx-custom-select-trigger {
    min-height: 40px !important;
    color: #294b68 !important;
    background: #fbfdff !important;
    border-color: #c8d9e7 !important;
    border-radius: 9px !important;
    box-shadow: 0 1px 2px rgba(28, 61, 88, .025) !important;
    font-weight: 620 !important;
    text-align: left !important;
}

html body.cx-design-system .cx-custom-select-value {
    min-width: 0 !important;
    color: #294b68 !important;
    text-align: left !important;
    line-height: 1.25 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.cx-design-system .cx-custom-select-trigger:hover:not(:disabled) {
    color: #244560 !important;
    background: #f7fbfd !important;
    border-color: #aec8dc !important;
    box-shadow: 0 2px 7px rgba(35, 76, 108, .07) !important;
}

html body.cx-design-system .cx-custom-select-trigger.is-open,
html body.cx-design-system .cx-custom-select-trigger:focus-visible {
    background: #fff !important;
    border-color: #7fa8c7 !important;
    box-shadow: 0 0 0 3px rgba(83, 132, 169, .11) !important;
}

html body.cx-design-system .cx-custom-select-chevron {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    border: 1px solid #d3e1eb !important;
    border-radius: 8px !important;
    background: #eef5f9 !important;
    color: #315f82 !important;
}

html body.cx-design-system .cx-custom-select-trigger:hover:not(:disabled) .cx-custom-select-chevron {
    background: #e7f1f7 !important;
    border-color: #c4d8e6 !important;
    color: #264f70 !important;
}

html body.cx-design-system .cx-custom-select-menu--top-layer[popover],
html body.cx-design-system .cx-custom-select-menu[data-cx-select-owner] {
    padding: 5px !important;
    border: 1px solid #c8d9e7 !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 14px 34px rgba(27, 59, 84, .15) !important;
}

html body.cx-design-system .cx-custom-select-option {
    min-height: 34px !important;
    padding: 7px 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    border-radius: 7px !important;
    color: #35536c !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 560 !important;
    line-height: 1.25 !important;
    text-align: left !important;
}

html body.cx-design-system .cx-custom-select-option-label {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
}

html body.cx-design-system .cx-custom-select-option:hover:not(:disabled),
html body.cx-design-system .cx-custom-select-option.is-active {
    color: #244963 !important;
    background: #f1f7fb !important;
}

html body.cx-design-system .cx-custom-select-option.is-selected {
    color: #234d6b !important;
    background: #eaf3f9 !important;
    font-weight: 680 !important;
}

html body.cx-design-system .cx-custom-select-option-check {
    width: 18px !important;
    min-width: 18px !important;
    color: #4e7fa4 !important;
    text-align: center !important;
}

/* Profile image picker: floating 4-column tile chooser. */
html body.cx-design-system .conexgo-profile-icon-picker {
    position: relative !important;
    z-index: 5000 !important;
}

html body.cx-design-system .conexgo-profile-icon-picker__trigger {
    min-height: 44px !important;
    padding: 5px 8px !important;
    border: 1px solid #b9d0e1 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #294b68 !important;
    box-shadow: 0 1px 3px rgba(32, 68, 95, .05) !important;
}

html body.cx-design-system .conexgo-profile-icon-picker__panel {
    position: absolute !important;
    top: calc(100% + 7px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 5100 !important;
    width: 100% !important;
    max-height: 220px !important;
    margin: 0 !important;
    padding: 8px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
    border: 1px solid #c5d8e6 !important;
    border-radius: 11px !important;
    background: #fff !important;
    box-shadow: 0 18px 42px rgba(26, 57, 82, .17) !important;
}

html body.cx-design-system .conexgo-profile-icon-picker__option {
    position: relative !important;
    min-width: 0 !important;
    min-height: 76px !important;
    padding: 7px 5px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border: 1px solid #d7e3ec !important;
    border-radius: 9px !important;
    background: #fbfdff !important;
    color: #47637a !important;
    font-size: 10.5px !important;
    font-weight: 650 !important;
    text-align: center !important;
}

html body.cx-design-system .conexgo-profile-icon-picker__option:hover {
    border-color: #aac6da !important;
    background: #f1f7fb !important;
    color: #2d5878 !important;
}

html body.cx-design-system .conexgo-profile-icon-picker__option.is-selected {
    border-color: #6f9dbe !important;
    background: #eaf3f9 !important;
    box-shadow: inset 0 0 0 1px rgba(76, 127, 165, .12) !important;
}

html body.cx-design-system .conexgo-profile-icon-picker__option img,
html body.cx-design-system .conexgo-profile-icon-picker__option-none {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain !important;
}

html body.cx-design-system .conexgo-profile-icon-picker__check {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    width: 18px !important;
    height: 18px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: #3f7297 !important;
    color: #fff !important;
    font-size: 9px !important;
}

html body.cx-design-system .conexgo-account-profile,
html body.cx-design-system .conexgo-account-profile .card-body,
html body.cx-design-system .conexgo-account-profile .panel,
html body.cx-design-system .conexgo-account-profile .panel-body,
html body.cx-design-system .conexgo-account-profile .tab-content,
html body.cx-design-system .conexgo-account-profile .tab-pane.active {
    overflow: visible !important;
}

/* Header clock: compact, tabular, tighter separators. */
html body.cx-design-system .app-header-modern .nt-clock-card {
    width: auto !important;
    max-width: 390px !important;
    min-width: 0 !important;
    padding: 6px 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    border: 1px solid #d7e4ed !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(30, 64, 91, .045) !important;
}

html body.cx-design-system .app-header-modern .nt-clock-list {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    list-style: none !important;
}

html body.cx-design-system .app-header-modern .nt-date {
    gap: 6px !important;
    padding-right: 9px !important;
    border-right: 1px solid #e0e9ef !important;
    color: #45647e !important;
}

html body.cx-design-system .app-header-modern .nt-date-icon,
html body.cx-design-system .app-header-modern .nt-time-icon {
    width: 18px !important;
    min-width: 18px !important;
    display: inline-grid !important;
    place-items: center !important;
    color: #3f739a !important;
}

html body.cx-design-system .app-header-modern .nt-date-text {
    color: #45647e !important;
    font-size: 11.5px !important;
    font-weight: 650 !important;
    white-space: nowrap !important;
}

html body.cx-design-system .app-header-modern .nt-clock {
    gap: 0 !important;
    padding: 3px 6px !important;
    border-radius: 8px !important;
    background: #f5f9fc !important;
    color: #294d69 !important;
    font-variant-numeric: tabular-nums !important;
}

html body.cx-design-system .app-header-modern .nt-clock-value {
    min-width: 1.45em !important;
    padding: 0 !important;
    color: #294d69 !important;
    font-size: 12px !important;
    font-weight: 720 !important;
    line-height: 1 !important;
    text-align: center !important;
    font-variant-numeric: tabular-nums !important;
}

html body.cx-design-system .app-header-modern .nt-clock-separator {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 1px !important;
    color: #7790a4 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

html body.cx-design-system .app-header-modern .nt-seconds {
    color: #71899c !important;
    font-size: 10px !important;
    font-weight: 650 !important;
}

html body.cx-design-system .app-header-modern .nt-meridiem {
    margin-left: 5px !important;
    padding: 2px 4px !important;
    border-radius: 5px !important;
    background: #eaf2f7 !important;
    color: #52748e !important;
    font-size: 8.5px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    letter-spacing: .035em !important;
}

/* Dashboard close: override the old abrupt display:none closing rule. */
html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item:has(> .conexgo-dashboard-card-closing),
html body.cx-design-system .conexgo-dashboard-configuration-row :has(> .conexgo-dashboard-card-closing) {
    height: auto !important;
    min-height: 48px !important;
    max-height: none !important;
    overflow: hidden !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-card-closing,
html body.cx-design-system .conexgo-dashboard-configuration-card.conexgo-dashboard-card-closing {
    height: auto !important;
    min-height: 48px !important;
    max-height: none !important;
    overflow: hidden !important;
    resize: none !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-card-closing > .card-body,
html body.cx-design-system .conexgo-dashboard-configuration-card.conexgo-dashboard-card-closing > .card-body {
    display: block !important;
    overflow: hidden !important;
    transform-origin: top !important;
    animation: cx-r18-72-dashboard-close 240ms cubic-bezier(.4, 0, .2, 1) both !important;
    pointer-events: none !important;
}

html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-resizable-card:not(.conexgo-dashboard-minimized-card):not(.conexgo-dashboard-card-closing) > .card-body,
html body.cx-design-system .conexgo-dashboard-configuration-card:not(.conexgo-dashboard-minimized-card):not(.conexgo-dashboard-card-closing) > .card-body {
    animation: cx-r18-72-dashboard-open 200ms cubic-bezier(.2, .7, .2, 1) both;
}

html body.cx-design-system .conexgo-dashboard-chevron {
    transition: transform 220ms cubic-bezier(.2, .7, .2, 1), color 160ms ease, opacity 160ms ease !important;
}

@keyframes cx-r18-72-dashboard-close {
    0% { opacity: 1; transform: translateY(0) scaleY(1); max-height: 900px; }
    100% { opacity: 0; transform: translateY(-5px) scaleY(.94); max-height: 0; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; }
}

@keyframes cx-r18-72-dashboard-open {
    0% { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Account list overflow stays bounded and visually lighter. */
html body.cx-design-system .account-list-table-shell {
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: thin !important;
    scrollbar-color: #aec0cd transparent !important;
}

html body.cx-design-system .account-list-table-shell::-webkit-scrollbar {
    height: 7px !important;
}

html body.cx-design-system .account-list-table-shell::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: #aec0cd !important;
}

html body.cx-design-system .account-list-table-shell::-webkit-scrollbar-track {
    background: transparent !important;
}

html body.cx-design-system .account-list-row > td {
    vertical-align: top !important;
}

@media (min-width: 1200px) {
    html body.cx-design-system .account-list-table-shell table,
    html body.cx-design-system .account-list-table-shell .conexgo-pagedlist-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: auto !important;
    }

    html body.cx-design-system .account-list-cell-name {
        width: clamp(230px, 27vw, 330px) !important;
        min-width: 230px !important;
        max-width: 330px !important;
    }

    html body.cx-design-system .account-list-cell-contact {
        width: auto !important;
        min-width: 210px !important;
    }

    html body.cx-design-system .account-list-cell-devices {
        width: 210px !important;
        min-width: 165px !important;
    }

    html body.cx-design-system .account-list-cell-comment {
        width: auto !important;
        min-width: 110px !important;
    }
}

/* Data-log hover: structured rows for Atlas JSON and other protocols. */
html body.cx-design-system .cx-data-log-popover-content--generic,
html body.cx-design-system .cx-data-log-popover-content--raw {
    width: 100% !important;
    min-width: 0 !important;
}

html body.cx-design-system .cx-data-log-popover-content--generic .cx-data-log-section-body {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
}

html body.cx-design-system .cx-data-log-popover-row {
    min-height: 31px !important;
    padding: 5px 7px !important;
    display: grid !important;
    grid-template-columns: minmax(120px, .42fr) minmax(0, .58fr) !important;
    align-items: start !important;
    gap: 10px !important;
    border-bottom: 1px solid #edf2f6 !important;
}

html body.cx-design-system .cx-data-log-popover-row:last-child {
    border-bottom: 0 !important;
}

html body.cx-design-system .cx-data-log-popover-key {
    color: #617a8f !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    text-align: left !important;
}

html body.cx-design-system .cx-data-log-popover-value {
    min-width: 0 !important;
    color: #294b68 !important;
    font-size: 11px !important;
    font-weight: 590 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
}

html body.cx-design-system .cx-data-log-raw-toggle {
    margin-top: 8px !important;
    border-top: 1px solid #e5edf3 !important;
}

html body.cx-design-system .cx-data-log-raw-toggle > summary {
    padding-top: 7px !important;
    color: #55758e !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

html body.cx-design-system .cx-data-log-raw-toggle > pre {
    max-height: 180px !important;
    margin: 7px 0 0 !important;
    padding: 8px !important;
    overflow: auto !important;
    border: 1px solid #e1eaf0 !important;
    border-radius: 7px !important;
    background: #f7fafc !important;
    color: #415c72 !important;
    font-size: 9.5px !important;
    line-height: 1.35 !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
}

/* Device/Account action-menu content stays left aligned. */
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu) .dropdown-item {
    justify-content: flex-start !important;
    text-align: left !important;
}

@media (max-width: 767.98px) {
    html body.cx-design-system .mud-dialog.cx-r18-72-security-dialog {
        width: calc(100vw - 18px) !important;
        max-width: none !important;
    }

    html body.cx-design-system .mud-dialog.cx-r18-72-security-dialog .cx-r1-form-row {
        align-items: stretch !important;
    }

    html body.cx-design-system .mud-dialog.cx-r18-72-security-dialog .cx-r1-form-row > .form-label,
    html body.cx-design-system .mud-dialog.cx-r18-72-security-dialog .cx-r1-form-row > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        text-align: left !important;
    }

    html body.cx-design-system .mud-dialog.cx-r18-72-security-dialog .cx-r1-form-row > .form-label {
        margin-bottom: 4px !important;
    }

    html body.cx-design-system .conexgo-profile-icon-picker__panel {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 5px !important;
        padding: 6px !important;
    }

    html body.cx-design-system .conexgo-profile-icon-picker__option {
        min-height: 66px !important;
        padding: 5px 3px !important;
        font-size: 9px !important;
    }

    html body.cx-design-system .conexgo-profile-icon-picker__option img,
    html body.cx-design-system .conexgo-profile-icon-picker__option-none {
        width: 32px !important;
        height: 32px !important;
    }

    html body.cx-design-system .app-header-modern .nt-clock-card {
        max-width: 100% !important;
        gap: 6px !important;
        padding-inline: 7px !important;
    }

    html body.cx-design-system .app-header-modern .nt-date-text {
        font-size: 10.5px !important;
    }

    html body.cx-design-system .cx-data-log-popover-row {
        grid-template-columns: 1fr !important;
        gap: 2px !important;
    }
}

/* CONEXGO R18-72 END */

/* ==========================================================================
   CONEXGO R18-72.1 - ACCOUNT ROW NAME ALIGNMENT
   Account split-control label: true left alignment + vertical centering.
   ========================================================================== */

html body.cx-design-system
.account-list-cell-name
.conexgo-row-action-group {
    align-items: stretch !important;
}

html body.cx-design-system
.account-list-cell-name
.account-list-name-button,
html body.cx-design-system
.account-list-cell-name
.account-list-name-button:hover,
html body.cx-design-system
.account-list-cell-name
.account-list-name-button:focus,
html body.cx-design-system
.account-list-cell-name
.account-list-name-button:focus-visible,
html body.cx-design-system
.account-list-cell-name
.account-list-name-button:active {
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    flex: 1 1 auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    padding: 0 12px !important;
    margin: 0 !important;

    color: #274966 !important;
    background: #ffffff !important;

    text-align: left !important;
    text-indent: 0 !important;
    vertical-align: middle !important;

    font-size: 13.5px !important;
    font-weight: 720 !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    box-shadow: none !important;
    transform: none !important;
}

html body.cx-design-system
.account-list-cell-name
.conexgo-row-action-toggle,
html body.cx-design-system
.account-list-cell-name
.conexgo-row-action-toggle:hover,
html body.cx-design-system
.account-list-cell-name
.conexgo-row-action-toggle:focus,
html body.cx-design-system
.account-list-cell-name
.conexgo-row-action-toggle:focus-visible,
html body.cx-design-system
.account-list-cell-name
.conexgo-row-action-toggle:active,
html body.cx-design-system
.account-list-cell-name
.conexgo-row-action-toggle[aria-expanded="true"] {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;

    flex: 0 0 42px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;
}

/* CONEXGO R18-72.1 END */

/* ==========================================================================
   CONEXGO R18-72.2 - PROFILE PICKER ABOVE / PROFILE SPACING / ROW MENU OVERLAY
   Scope:
   1) Profile icon chooser opens ABOVE the trigger.
   2) Account Profile form rows have a consistent vertical rhythm.
   3) Device/Account action dropdowns stay above table rows and are compact.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ACCOUNT PROFILE — field spacing
   The e-mail field lives in its own form and the remaining fields live in a
   second form, so spacing must cover both row-to-row AND form-to-form gaps.
   -------------------------------------------------------------------------- */

html body.cx-design-system
.conexgo-account-profile
.conexgo-account-profile-form {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

html body.cx-design-system
.conexgo-account-profile
.conexgo-account-profile-form
> .row:not(.justify-content-end) {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    align-items: center !important;
}

html body.cx-design-system
.conexgo-account-profile
.conexgo-account-profile-form
> .row:not(.justify-content-end):last-of-type {
    margin-bottom: 0 !important;
}

html body.cx-design-system
.conexgo-account-profile
.conexgo-account-profile-form
+ .conexgo-account-profile-form {
    margin-top: 12px !important;
}

html body.cx-design-system
.conexgo-account-profile
.conexgo-account-profile-form
.form-control,
html body.cx-design-system
.conexgo-account-profile
.conexgo-account-profile-form
.cx-custom-select-trigger {
    min-height: 42px !important;
    height: 42px !important;
}

html body.cx-design-system
.conexgo-account-profile
.conexgo-account-profile-label {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

html body.cx-design-system
.conexgo-account-profile
.conexgo-account-profile-label
> label {
    margin: 0 !important;
    line-height: 1.25 !important;
}

/* --------------------------------------------------------------------------
   PROFILE ICON PICKER — always open ABOVE.
   It is a floating chooser: it must never push the Save button or footer down.
   -------------------------------------------------------------------------- */

html body.cx-design-system
.conexgo-account-profile
.conexgo-profile-icon-picker {
    position: relative !important;
    z-index: 2300 !important;
    overflow: visible !important;
}

html body.cx-design-system
.conexgo-account-profile
.conexgo-profile-icon-picker__panel {
    position: absolute !important;

    top: auto !important;
    bottom: calc(100% + 8px) !important;

    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    max-width: none !important;
    max-height: 218px !important;

    margin: 0 !important;
    padding: 8px !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;

    border: 1px solid #c5d8e6 !important;
    border-radius: 11px !important;
    background: #ffffff !important;
    box-shadow: 0 -16px 38px rgba(29, 59, 82, .16) !important;

    z-index: 2400 !important;
    transform-origin: bottom center !important;
}

html body.cx-design-system
.conexgo-account-profile
.conexgo-profile-icon-picker__option {
    min-height: 72px !important;
    padding: 6px 5px !important;
}

html body.cx-design-system
.conexgo-account-profile
:is(
    .card,
    .card-body,
    .panel,
    .panel-body,
    .tabs-menu-body,
    .tab-content,
    .tab-pane,
    .tab-pane.active,
    .conexgo-account-profile-form,
    .row,
    [class*="col-"]
) {
    overflow: visible !important;
}

/* The picker itself scrolls internally; its ancestors must not clip it. */
html body.cx-design-system
.conexgo-account-profile
.conexgo-profile-icon-picker__panel {
    overflow-y: auto !important;
}

/* --------------------------------------------------------------------------
   DEVICE / ACCOUNT ROW ACTION MENUS — overlay contract.
   Bring the currently-open row and cell above the rest of the table.
   This is visual only; Marc's JS continues deciding UP vs DOWN placement.
   -------------------------------------------------------------------------- */

html body.cx-design-system
tr:has(
    .device-list-action-menu.show,
    .conexgo-row-action-menu.show
) {
    position: relative !important;
    z-index: 3100 !important;
}

html body.cx-design-system
td:has(
    .device-list-action-menu.show,
    .conexgo-row-action-menu.show
) {
    position: relative !important;
    z-index: 3200 !important;
    overflow: visible !important;
}

html body.cx-design-system
:is(
    .device-list-action-group,
    .conexgo-row-action-group
):has(
    .device-list-action-menu.show,
    .conexgo-row-action-menu.show
) {
    position: relative !important;
    z-index: 3300 !important;
    isolation: isolate !important;
}

html body.cx-design-system
:is(
    .device-list-action-menu,
    .conexgo-row-action-menu
).show {
    z-index: 3400 !important;

    min-width: 100% !important;
    max-width: min(360px, calc(100vw - 32px)) !important;
    max-height: min(
        var(--cx-r64-row-menu-max-height, 360px),
        calc(100vh - 150px)
    ) !important;

    padding: 5px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;

    border: 1px solid #c6d7e4 !important;
    border-radius: 10px !important;

    background: #ffffff !important;
    box-shadow: 0 16px 36px rgba(28, 58, 82, .17) !important;
}

html body.cx-design-system
:is(
    .device-list-action-menu,
    .conexgo-row-action-menu
).show
> li {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.cx-design-system
:is(
    .device-list-action-menu,
    .conexgo-row-action-menu
).show
.dropdown-item {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;

    margin: 0 !important;
    padding: 6px 8px !important;

    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 8px !important;

    color: #294b68 !important;
    background: transparent !important;

    font-size: 12px !important;
    font-weight: 620 !important;
    line-height: 1.2 !important;

    text-align: left !important;
    white-space: normal !important;

    border-radius: 7px !important;
}

html body.cx-design-system
:is(
    .device-list-action-menu,
    .conexgo-row-action-menu
).show
.dropdown-item:hover,
html body.cx-design-system
:is(
    .device-list-action-menu,
    .conexgo-row-action-menu
).show
.dropdown-item:focus {
    color: #244963 !important;
    background: #f0f6fa !important;
}

html body.cx-design-system
:is(
    .device-list-action-menu,
    .conexgo-row-action-menu
).show
.dropdown-item
> :is(
    .fa,
    .fas,
    .far,
    .fa-solid,
    .fa-regular
) {
    width: 18px !important;
    min-width: 18px !important;
    flex: 0 0 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    color: #5b82a1 !important;
    text-align: center !important;
}

html body.cx-design-system
:is(
    .device-list-action-menu,
    .conexgo-row-action-menu
).show
.divider {
    height: 1px !important;
    min-height: 1px !important;
    margin: 4px 5px !important;
    background: #e2ebf1 !important;
}

/*
   Bootstrap .table-responsive can clip a dropdown even when the row itself
   has a high z-index. While one row menu is OPEN, temporarily allow that
   menu to paint outside the table scroll box. Horizontal scrolling returns
   automatically as soon as the dropdown closes.
*/
html body.cx-design-system
.table-responsive:has(
    .device-list-action-menu.show,
    .conexgo-row-action-menu.show
) {
    overflow: visible !important;
}

/* Preserve the normal responsive-table behavior whenever no menu is open. */
html body.cx-design-system
.table-responsive:not(:has(
    .device-list-action-menu.show,
    .conexgo-row-action-menu.show
)) {
    overflow-x: auto;
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    html body.cx-design-system
    .conexgo-account-profile
    .conexgo-account-profile-form
    > .row:not(.justify-content-end) {
        margin-bottom: 10px !important;
    }

    html body.cx-design-system
    .conexgo-account-profile
    .conexgo-account-profile-label {
        justify-content: flex-start !important;
        margin-bottom: 4px !important;
    }

    html body.cx-design-system
    .conexgo-account-profile
    .conexgo-profile-icon-picker__panel {
        bottom: calc(100% + 6px) !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        max-height: 190px !important;
        padding: 6px !important;
        gap: 5px !important;
    }

    html body.cx-design-system
    :is(
        .device-list-action-menu,
        .conexgo-row-action-menu
    ).show {
        max-width: min(330px, calc(100vw - 20px)) !important;
    }
}

/* CONEXGO R18-72.2 END */

/* ==========================================================================
   CONEXGO R18-73 - CONTENT LINKS / REPORT UX
   Premium content-link language for the Conexgo operations portal.
   Navigation, buttons, pagination and dropdown actions keep their own styles.
   ========================================================================== */

html body.cx-design-system #conexgo-page-content {
    --cx-content-link: #356b92;
    --cx-content-link-hover: #234f70;
    --cx-content-link-focus: #2d6288;
    --cx-content-link-underline: rgba(53, 107, 146, .38);
    --cx-content-link-underline-hover: rgba(35, 79, 112, .72);
}

html body.cx-design-system #conexgo-page-content
a[href]:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):
not(.cx-page-action):not(.conexgo-dashboard-view-all-link):
not(.device-list-name-button):not(.account-list-name-button):
not(.conexgo-row-action-toggle):not(.device-list-action-toggle):not(.device-config-toolbar-link) {
    color: var(--cx-content-link) !important;
    font-weight: 590 !important;
    text-decoration-line: underline !important;
    text-decoration-color: var(--cx-content-link-underline) !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2.5px !important;
    text-decoration-skip-ink: auto !important;
    transition:
        color 150ms ease,
        text-decoration-color 150ms ease,
        text-decoration-thickness 150ms ease !important;
}

html body.cx-design-system #conexgo-page-content
a[href]:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):
not(.cx-page-action):not(.conexgo-dashboard-view-all-link):
not(.device-list-name-button):not(.account-list-name-button):
not(.conexgo-row-action-toggle):not(.device-list-action-toggle):not(.device-config-toolbar-link):visited {
    color: var(--cx-content-link) !important;
}

html body.cx-design-system #conexgo-page-content
a[href]:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):
not(.cx-page-action):not(.conexgo-dashboard-view-all-link):
not(.device-list-name-button):not(.account-list-name-button):
not(.conexgo-row-action-toggle):not(.device-list-action-toggle):not(.device-config-toolbar-link):hover {
    color: var(--cx-content-link-hover) !important;
    text-decoration-color: var(--cx-content-link-underline-hover) !important;
    text-decoration-thickness: 1.5px !important;
}

html body.cx-design-system #conexgo-page-content
a[href]:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):
not(.cx-page-action):not(.conexgo-dashboard-view-all-link):
not(.device-list-name-button):not(.account-list-name-button):
not(.conexgo-row-action-toggle):not(.device-list-action-toggle):not(.device-config-toolbar-link):focus-visible {
    color: var(--cx-content-link-focus) !important;
    text-decoration-color: currentColor !important;
    text-decoration-thickness: 1.5px !important;
    outline: 2px solid rgba(53, 107, 146, .42) !important;
    outline-offset: 3px !important;
    border-radius: 3px !important;
}

html body.cx-design-system #conexgo-page-content
:is(
    .table,
    table,
    .dataTable,
    .dataTables_wrapper
)
a[href]:not(.btn):not(.dropdown-item):not(.page-link) {
    color: #2f668f !important;
    font-weight: 620 !important;
    text-decoration-color: rgba(47, 102, 143, .42) !important;
    overflow-wrap: anywhere !important;
}

html body.cx-design-system #conexgo-page-content
:is(
    .table,
    table,
    .dataTable,
    .dataTables_wrapper
)
a[href]:not(.btn):not(.dropdown-item):not(.page-link):hover {
    color: #214d6e !important;
    text-decoration-color: rgba(33, 77, 110, .80) !important;
}

html body.cx-design-system #conexgo-page-content
.breadcrumb a[href] {
    color: #4b6f89 !important;
    font-weight: 580 !important;
    text-decoration-color: rgba(75, 111, 137, .30) !important;
}

html body.cx-design-system #conexgo-page-content
.breadcrumb a[href]:hover {
    color: #2e5d7f !important;
    text-decoration-color: rgba(46, 93, 127, .68) !important;
}

/* CONEXGO R18-73 END */

/* ==========================================================================
   CONEXGO R18-74.1 - GLOBAL TABLE / SELECT / DROPDOWN VISUAL SYSTEM
   Applies to every table/select/action-menu surface, including raw <th>
   headers that do not use the shared ColumnHeader component.
   ========================================================================== */

html body.cx-design-system {
    --cx-r18741-control-height: 44px;
    --cx-r18741-control-radius: 10px;
    --cx-r18741-control-border: #c7d9e6;
    --cx-r18741-control-border-hover: #acc7d9;
    --cx-r18741-control-bg: #fbfdff;
    --cx-r18741-control-bg-hover: #f7fafc;
    --cx-r18741-control-text: #294b68;
}

/* --------------------------------------------------------------------------
   GLOBAL SELECTS
   -------------------------------------------------------------------------- */

html body.cx-design-system
:is(
    .cx-custom-select-trigger,
    .cx-control-select,
    select.form-select
) {
    min-height: var(--cx-r18741-control-height) !important;
    height: var(--cx-r18741-control-height) !important;
    border: 1px solid var(--cx-r18741-control-border) !important;
    border-radius: var(--cx-r18741-control-radius) !important;
    background: var(--cx-r18741-control-bg) !important;
    color: var(--cx-r18741-control-text) !important;
    box-shadow: 0 1px 2px rgba(31, 65, 91, .025) !important;
    font-size: 14px !important;
    font-weight: 620 !important;
    line-height: 1.2 !important;
    transform: none !important;
    transition:
        border-color 140ms ease,
        background-color 140ms ease,
        box-shadow 140ms ease,
        color 140ms ease !important;
}

html body.cx-design-system
.cx-custom-select-trigger {
    padding: 4px 5px 4px 12px !important;
    grid-template-columns: minmax(0, 1fr) 34px !important;
    column-gap: 7px !important;
    text-align: left !important;
}

html body.cx-design-system
.cx-custom-select-trigger:has(.cx-custom-select-leading-icon) {
    grid-template-columns: 25px minmax(0, 1fr) 34px !important;
}

html body.cx-design-system
.cx-custom-select-value {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    color: #294b68 !important;
    font-size: 14px !important;
    font-weight: 620 !important;
    text-align: left !important;
}

html body.cx-design-system
.cx-custom-select-placeholder {
    color: #7b8fa1 !important;
    font-weight: 540 !important;
}

html body.cx-design-system
.cx-custom-select-chevron {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #d4e2eb !important;
    border-radius: 8px !important;
    background: #eef5f9 !important;
    color: #315f82 !important;
    box-shadow: none !important;
    transition:
        border-color 140ms ease,
        background-color 140ms ease,
        color 140ms ease !important;
}

html body.cx-design-system
:is(
    .cx-custom-select-trigger,
    select.form-select
):hover:not(:disabled) {
    border-color: var(--cx-r18741-control-border-hover) !important;
    background: var(--cx-r18741-control-bg-hover) !important;
    color: #244963 !important;
    box-shadow: 0 3px 10px rgba(38, 79, 108, .05) !important;
    transform: none !important;
}

html body.cx-design-system
.cx-custom-select-trigger:hover:not(:disabled)
.cx-custom-select-chevron {
    border-color: #c6d9e6 !important;
    background: #e9f2f7 !important;
    color: #2c5979 !important;
}

html body.cx-design-system
.cx-custom-select-trigger:is(
    .is-open,
    [data-cx-open="True"],
    [data-cx-open="true"],
    :focus-visible
),
html body.cx-design-system
select.form-select:focus {
    border-color: #7ea7c4 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(70, 119, 155, .10) !important;
    outline: none !important;
}

html body.cx-design-system
.cx-custom-select-trigger:is(
    .is-open,
    [data-cx-open="True"],
    [data-cx-open="true"]
)
.cx-custom-select-chevron {
    border-color: #b8cfdf !important;
    background: #e4eff6 !important;
    color: #244f70 !important;
}

html body.cx-design-system
.cx-custom-select-chevron > i {
    font-size: 12px !important;
    transition: transform 160ms ease !important;
}

html body.cx-design-system
.cx-custom-select-trigger:is(
    .is-open,
    [data-cx-open="True"],
    [data-cx-open="true"]
)
.cx-custom-select-chevron > i {
    transform: rotate(180deg) !important;
}

/* PagedList selectors and pagination share the same visual height. */
html body.cx-design-system
.cx-paged-list
:is(
    .conexgo-pagedlist-size-select,
    .conexgo-pagedlist-range-select
)
.cx-custom-select-trigger,
html body.cx-design-system
.cx-paged-list
.conexgo-pagedlist-pagination
.page-link {
    min-height: var(--cx-r18741-control-height) !important;
    height: var(--cx-r18741-control-height) !important;
}

/* Select popup menus across all pages. */
html body.cx-design-system
:is(
    .cx-custom-select-menu--top-layer[popover],
    .cx-custom-select-menu[data-cx-select-owner]
) {
    padding: 5px !important;
    border: 1px solid #c9d9e5 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 14px 32px rgba(29, 59, 82, .12) !important;
}

html body.cx-design-system
:is(
    .cx-custom-select-menu--top-layer[popover],
    .cx-custom-select-menu[data-cx-select-owner]
)
.cx-custom-select-option {
    min-height: 37px !important;
    padding: 7px 9px !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #34536c !important;
    font-size: 14px !important;
    font-weight: 590 !important;
    line-height: 1.25 !important;
    text-align: left !important;
    transform: none !important;
    transition:
        background-color 120ms ease,
        border-color 120ms ease,
        color 120ms ease !important;
}

html body.cx-design-system
.cx-custom-select-option-label {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    text-align: left !important;
}

html body.cx-design-system
:is(
    .cx-custom-select-menu--top-layer[popover],
    .cx-custom-select-menu[data-cx-select-owner]
)
.cx-custom-select-option:hover:not(:disabled),
html body.cx-design-system
:is(
    .cx-custom-select-menu--top-layer[popover],
    .cx-custom-select-menu[data-cx-select-owner]
)
.cx-custom-select-option.is-active {
    border-color: #e2ebf1 !important;
    background: #f4f8fb !important;
    color: #284d68 !important;
}

html body.cx-design-system
:is(
    .cx-custom-select-menu--top-layer[popover],
    .cx-custom-select-menu[data-cx-select-owner]
)
.cx-custom-select-option.is-selected {
    border-color: #d6e4ed !important;
    background: #edf5f9 !important;
    color: #234c69 !important;
    font-weight: 680 !important;
}

/* --------------------------------------------------------------------------
   GLOBAL TABLE ROW ACTION DROPDOWNS
   Covers Device, Account and any other dropdown rendered inside a table.
   -------------------------------------------------------------------------- */

html body.cx-design-system
:is(
    table,
    .conexgo-pagedlist-table
)
.dropdown-menu
.dropdown-item,
html body.cx-design-system
:is(
    .device-list-action-menu,
    .conexgo-row-action-menu
)
.dropdown-item {
    min-height: 38px !important;
    padding: 7px 9px !important;
    gap: 9px !important;
    border: 1px solid transparent !important;
    border-radius: 7px !important;
    background: transparent !important;
    color: #2e506c !important;
    font-size: 14px !important;
    font-weight: 620 !important;
    line-height: 1.28 !important;
    text-align: left !important;
    text-decoration: none !important;
    transform: none !important;
    transition:
        background-color 120ms ease,
        border-color 120ms ease,
        color 120ms ease !important;
}

html body.cx-design-system
:is(
    table,
    .conexgo-pagedlist-table
)
.dropdown-menu
.dropdown-item:hover,
html body.cx-design-system
:is(
    table,
    .conexgo-pagedlist-table
)
.dropdown-menu
.dropdown-item:focus-visible,
html body.cx-design-system
:is(
    .device-list-action-menu,
    .conexgo-row-action-menu
)
.dropdown-item:hover,
html body.cx-design-system
:is(
    .device-list-action-menu,
    .conexgo-row-action-menu
)
.dropdown-item:focus-visible {
    border-color: #e1eaf0 !important;
    background: #f4f8fb !important;
    color: #244963 !important;
    outline: none !important;
    box-shadow: none !important;
}

html body.cx-design-system
:is(
    table,
    .conexgo-pagedlist-table,
    .device-list-action-menu,
    .conexgo-row-action-menu
)
.dropdown-item
> :is(
    i,
    .fa,
    .fas,
    .far,
    .fa-solid,
    .fa-regular,
    span[class*="fa"]
) {
    width: 19px !important;
    min-width: 19px !important;
    flex: 0 0 19px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #5a809e !important;
    font-size: 13.5px !important;
    text-align: center !important;
}

html body.cx-design-system
:is(
    .device-list-name-button,
    .account-list-name-button
):hover {
    background: #f8fbfd !important;
    color: #244963 !important;
    box-shadow: inset 0 0 0 1px rgba(100, 143, 174, .04) !important;
    transform: none !important;
}

html body.cx-design-system
:is(
    .device-list-action-toggle,
    .conexgo-row-action-toggle
):hover {
    background: #3a688a !important;
    color: #ffffff !important;
    filter: none !important;
    transform: none !important;
}

/* ==========================================================================
   CONEXGO R18-75 - STRUCTURAL TABLE HEADER SYSTEM
   Real Razor-rendered Font Awesome icons. No MutationObserver or injected TH
   markup. Shared ColumnHeader covers list pages; StaticColumnHeader covers
   every remaining real <thead> table individually.
   ========================================================================== */

html body.cx-design-system {
    --cx-r1875-header-bg: #edf8f3;
    --cx-r1875-header-bg-hover: #e8f4ef;
    --cx-r1875-header-border: #d6e7df;
    --cx-r1875-header-text: #294a65;
    --cx-r1875-header-muted: #748896;
    --cx-r1875-icon-bg: #f8fbfd;
    --cx-r1875-icon-border: #d0e0ea;
    --cx-r1875-icon-text: #4b7595;
}

html body.cx-design-system
.cx-table-header-row,
html body.cx-design-system
.conexgo-pagedlist-table thead tr,
html body.cx-design-system
.cx-native-table thead tr {
    background: var(--cx-r1875-header-bg) !important;
}

html body.cx-design-system
th.cx-table-column-header {
    position: relative !important;
    padding: 0 !important;
    vertical-align: middle !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--cx-r1875-header-border) !important;
    background: var(--cx-r1875-header-bg) !important;
    color: var(--cx-r1875-header-text) !important;
    user-select: none !important;
}

html body.cx-design-system
th.cx-table-column-header::before,
html body.cx-design-system
th.cx-table-column-header::after {
    content: none !important;
    display: none !important;
}

html body.cx-design-system
.cx-table-column-header__layout {
    min-height: 50px !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    padding: 9px 11px !important;
}

html body.cx-design-system
.cx-table-column-header__icon {
    width: 28px !important;
    min-width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--cx-r1875-icon-border) !important;
    border-radius: 8px !important;
    background: var(--cx-r1875-icon-bg) !important;
    color: var(--cx-r1875-icon-text) !important;
    box-shadow: 0 1px 2px rgba(31, 65, 91, .035) !important;
    pointer-events: none !important;
    transition:
        background-color 140ms ease,
        border-color 140ms ease,
        color 140ms ease,
        box-shadow 140ms ease !important;
}

html body.cx-design-system
.cx-table-column-header__icon > i {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

html body.cx-design-system
.cx-table-column-header__copy {
    min-width: 0 !important;
    display: flex !important;
    flex: 0 1 auto !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px !important;
}

html body.cx-design-system
.cx-table-column-header__label {
    display: block !important;
    color: var(--cx-r1875-header-text) !important;
    font-size: 12.5px !important;
    font-weight: 760 !important;
    line-height: 1.18 !important;
    letter-spacing: .012em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

html body.cx-design-system
.cx-table-column-header__description {
    display: block !important;
    max-width: 260px !important;
    color: var(--cx-r1875-header-muted) !important;
    font-size: 10.5px !important;
    font-weight: 520 !important;
    line-height: 1.25 !important;
    text-transform: none !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
}

html body.cx-design-system
.cx-table-column-header__sort {
    width: 18px !important;
    min-width: 18px !important;
    height: 24px !important;
    flex: 0 0 18px !important;
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #91a7b5 !important;
    font-size: 9.5px !important;
    pointer-events: none !important;
}

html body.cx-design-system
th.cx-table-column-header--sortable {
    cursor: pointer !important;
}

html body.cx-design-system
th.cx-table-column-header--sortable:hover {
    background: var(--cx-r1875-header-bg-hover) !important;
}

html body.cx-design-system
th.cx-table-column-header--sortable:hover
.cx-table-column-header__icon {
    border-color: #bfd4e1 !important;
    background: #f4f9fc !important;
    color: #356989 !important;
    box-shadow: 0 2px 6px rgba(34, 77, 107, .065) !important;
}

html body.cx-design-system
th.cx-table-column-header--sortable:focus-visible {
    outline: 2px solid rgba(74, 120, 154, .38) !important;
    outline-offset: -2px !important;
}

html body.cx-design-system
th.cx-table-column-header.sorting_asc,
html body.cx-design-system
th.cx-table-column-header.sorting_desc {
    background: #e6f3ee !important;
}

html body.cx-design-system
th.cx-table-column-header.sorting_asc
.cx-table-column-header__sort,
html body.cx-design-system
th.cx-table-column-header.sorting_desc
.cx-table-column-header__sort {
    color: #356989 !important;
}

html body.cx-design-system
th.cx-table-column-header--align-center
.cx-table-column-header__layout {
    justify-content: center !important;
}

html body.cx-design-system
th.cx-table-column-header--align-center
.cx-table-column-header__copy {
    align-items: center !important;
    text-align: center !important;
}

html body.cx-design-system
th.cx-table-column-header--align-center
.cx-table-column-header__sort {
    margin-left: 0 !important;
}

html body.cx-design-system
th.cx-table-column-header--align-right
.cx-table-column-header__layout {
    justify-content: flex-end !important;
}

html body.cx-design-system
th.cx-table-column-header--align-right
.cx-table-column-header__copy {
    align-items: flex-end !important;
    text-align: right !important;
}

/* Semantic minimum widths prevent the letter-by-letter wrapping seen in R18-74.3. */
html body.cx-design-system th.cx-table-column-header--action { min-width: 122px !important; }
html body.cx-design-system th.cx-table-column-header--alert { min-width: 148px !important; }
html body.cx-design-system th.cx-table-column-header--datetime { min-width: 168px !important; }
html body.cx-design-system th.cx-table-column-header--device { min-width: 225px !important; }
html body.cx-design-system th.cx-table-column-header--customer { min-width: 210px !important; }
html body.cx-design-system th.cx-table-column-header--name { min-width: 175px !important; }
html body.cx-design-system th.cx-table-column-header--status { min-width: 132px !important; }
html body.cx-design-system th.cx-table-column-header--location { min-width: 245px !important; }
html body.cx-design-system th.cx-table-column-header--phone { min-width: 185px !important; }
html body.cx-design-system th.cx-table-column-header--email { min-width: 215px !important; }
html body.cx-design-system th.cx-table-column-header--comment { min-width: 205px !important; }
html body.cx-design-system th.cx-table-column-header--message { min-width: 220px !important; }
html body.cx-design-system th.cx-table-column-header--direction { min-width: 138px !important; }
html body.cx-design-system th.cx-table-column-header--type { min-width: 145px !important; }
html body.cx-design-system th.cx-table-column-header--model { min-width: 165px !important; }
html body.cx-design-system th.cx-table-column-header--inventory { min-width: 112px !important; }
html body.cx-design-system th.cx-table-column-header--active { min-width: 98px !important; }
html body.cx-design-system th.cx-table-column-header--suspended { min-width: 112px !important; }
html body.cx-design-system th.cx-table-column-header--deactivated { min-width: 118px !important; }
html body.cx-design-system th.cx-table-column-header--document { min-width: 175px !important; }
html body.cx-design-system th.cx-table-column-header--download { min-width: 145px !important; }
html body.cx-design-system th.cx-table-column-header--description { min-width: 220px !important; }
html body.cx-design-system th.cx-table-column-header--role { min-width: 150px !important; }
html body.cx-design-system th.cx-table-column-header--language { min-width: 155px !important; }
html body.cx-design-system th.cx-table-column-header--user { min-width: 175px !important; }
html body.cx-design-system th.cx-table-column-header--identifier { min-width: 100px !important; }
html body.cx-design-system th.cx-table-column-header--reason { min-width: 210px !important; }
html body.cx-design-system th.cx-table-column-header--selected { min-width: 130px !important; }
html body.cx-design-system th.cx-table-column-header--count { min-width: 118px !important; }
html body.cx-design-system th.cx-table-column-header--manufacturer { min-width: 175px !important; }
html body.cx-design-system th.cx-table-column-header--frequency { min-width: 195px !important; }
html body.cx-design-system th.cx-table-column-header--format { min-width: 145px !important; }
html body.cx-design-system th.cx-table-column-header--schedule { min-width: 175px !important; }
html body.cx-design-system th.cx-table-column-header--generic { min-width: 145px !important; }

/* Dashboard Unit Status deliberately uses a different visual language from filters.
   No icon tiles: this is a dense metrics table, so the header relies on typography,
   spacing and a quiet data-grid rail instead of control-like decoration. */
html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-smart-item[data-dashboard-key="deviceStatus"]
.conexgo-device-status-table thead,
html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-device-status-table thead {
    background: #f3f8f6 !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-device-status-table
th.cx-table-column-header--compact {
    padding: 0 !important;
    border-top: 1px solid rgba(205, 224, 216, .72) !important;
    border-bottom: 1px solid #cfe1da !important;
    background: #f3f8f6 !important;
    color: #2f4d63 !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-device-status-table
th.cx-table-column-header--compact
.cx-table-column-header__layout {
    min-height: 42px !important;
    gap: 0 !important;
    padding: 9px 12px !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-device-status-table
th.cx-table-column-header--compact.cx-table-column-header--no-icon
.cx-table-column-header__copy {
    flex: 1 1 auto !important;
    width: 100% !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-device-status-table
th.cx-table-column-header--compact
.cx-table-column-header__label {
    color: #38546a !important;
    font-size: 11.25px !important;
    font-weight: 760 !important;
    line-height: 1.2 !important;
    letter-spacing: .035em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

/* Model is the reading anchor; metrics are quieter and centered. */
html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-device-status-table
th.cx-table-column-header--model
.cx-table-column-header__layout {
    padding-left: 14px !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-device-status-table
th.cx-table-column-header--align-center
.cx-table-column-header__layout {
    justify-content: center !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-device-status-table
th.cx-table-column-header--align-center
.cx-table-column-header__copy {
    align-items: center !important;
    text-align: center !important;
}

/* Hairline separators preserve scanability without making the header look like filters. */
html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-device-status-table
th.cx-table-column-header--compact + th.cx-table-column-header--compact {
    border-left: 1px solid rgba(209, 225, 219, .66) !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-device-status-table tbody tr {
    transition: background-color 130ms ease !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-device-status-table tbody tr:hover {
    background: rgba(239, 246, 243, .72) !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-device-status-table tbody td {
    border-bottom-color: rgba(219, 228, 235, .82) !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-device-status-table tbody tr:last-child td {
    border-bottom-color: transparent !important;
}

/* Paged-list and explicit native table headers share the same premium rail. */
html body.cx-design-system
:is(
    .conexgo-pagedlist-table,
    .cx-native-table,
    .cx-devicemodel-alert-table,
    .cx-admin-table,
    .cx-email-history-head-row
)
thead,
html body.cx-design-system
:is(
    .conexgo-pagedlist-table,
    .cx-native-table,
    .cx-devicemodel-alert-table,
    .cx-admin-table
)
thead tr {
    background: var(--cx-r1875-header-bg) !important;
}

/* Keep horizontal scrolling intentional: preserve readable headers rather than crushing them. */
html body.cx-design-system
.conexgo-pagedlist-table-region,
html body.cx-design-system
.table-responsive {
    scrollbar-gutter: stable !important;
}

@media (max-width: 767.98px) {
    html body.cx-design-system
    .cx-table-column-header__layout {
        min-height: 46px !important;
        gap: 7px !important;
        padding: 8px 9px !important;
    }

    html body.cx-design-system
    .cx-table-column-header__icon {
        width: 26px !important;
        min-width: 26px !important;
        height: 26px !important;
        flex-basis: 26px !important;
    }

    html body.cx-design-system
    .cx-table-column-header__label {
        font-size: 11.75px !important;
    }
}

/* CONEXGO R18-75 STRUCTURAL TABLE HEADER SYSTEM END */

/* ==========================================================================
   CONEXGO R18-75.2 - PRE-QA STABILITY / TABLE FIT / ROW ACTION CONSISTENCY
   ========================================================================== */

/* --------------------------------------------------------------------------
   DASHBOARD UNIT STATUS
   The card must never be clipped by the two-column dashboard grid. The table
   uses fixed proportional columns when there is room, and a local horizontal
   viewport only when the card becomes genuinely narrower than the data.
   -------------------------------------------------------------------------- */

html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-smart-item[data-dashboard-key="deviceStatus"] {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-smart-item[data-dashboard-key="deviceStatus"]
> .card {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="deviceStatus"]
.conexgo-dashboard-table-card-body {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="deviceStatus"]
.conexgo-dashboard-table-viewport {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain !important;
    scrollbar-gutter: stable !important;
    -webkit-overflow-scrolling: touch;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="deviceStatus"]
.conexgo-device-status-table--fit {
    width: 100% !important;
    min-width: 510px !important;
    max-width: none !important;
    table-layout: fixed !important;
    margin: 0 !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="deviceStatus"]
.conexgo-device-status-table--fit
col.conexgo-device-status-col-model {
    width: 36% !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="deviceStatus"]
.conexgo-device-status-table--fit
col.conexgo-device-status-col-metric {
    width: 16% !important;
}

/* Cancel the large semantic minimum widths from the full list-table system.
   Dashboard metrics are a compact summary and have their own sizing model. */
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="deviceStatus"]
.conexgo-device-status-table--fit
th.cx-table-column-header--compact {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="deviceStatus"]
.conexgo-device-status-table--fit
th.cx-table-column-header--compact
.cx-table-column-header__layout {
    min-width: 0 !important;
    padding: 9px 9px !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="deviceStatus"]
.conexgo-device-status-table--fit
th.cx-table-column-header--compact
.cx-table-column-header__label {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="deviceStatus"]
.conexgo-device-status-model-cell,
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="deviceStatus"]
.conexgo-device-status-metric-cell {
    padding: 9px 10px !important;
    vertical-align: middle !important;
    border-bottom-color: rgba(219, 228, 235, .82) !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="deviceStatus"]
.conexgo-device-status-model-cell {
    min-width: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="deviceStatus"]
.conexgo-device-status-model-cell
.conexgo-dashboard-model-icon {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    margin: 0 9px 0 0 !important;
    padding: 6px !important;
    vertical-align: middle !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="deviceStatus"]
.conexgo-device-status-model-cell
.mobile {
    display: inline-block !important;
    max-width: calc(100% - 58px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="deviceStatus"]
.conexgo-device-status-metric-cell {
    text-align: center !important;
    white-space: nowrap !important;
    font-variant-numeric: tabular-nums !important;
}

@media (max-width: 620px) {
    html body.cx-design-system
    #conexgoDashboardSmartGrid
    [data-dashboard-key="deviceStatus"]
    .conexgo-device-status-table--fit {
        min-width: 500px !important;
    }
}

/* --------------------------------------------------------------------------
   ALERTS TABLE
   Keep the six operational columns visible at normal desktop widths.
   Horizontal scrolling is reserved for genuinely smaller viewports.
   -------------------------------------------------------------------------- */

html body.cx-design-system
.alert-list-card
.conexgo-pagedlist-table {
    width: 100% !important;
    min-width: 1040px !important;
    table-layout: fixed !important;
}

html body.cx-design-system
.alert-list-card
th.cx-table-column-header--action {
    width: 8% !important;
    min-width: 88px !important;
}

html body.cx-design-system
.alert-list-card
th.cx-table-column-header--alert {
    width: 13% !important;
    min-width: 125px !important;
}

html body.cx-design-system
.alert-list-card
th.cx-table-column-header--datetime {
    width: 15% !important;
    min-width: 145px !important;
}

html body.cx-design-system
.alert-list-card
th.cx-table-column-header--device {
    width: 30% !important;
    min-width: 270px !important;
}

html body.cx-design-system
.alert-list-card
th.cx-table-column-header--customer {
    width: 17% !important;
    min-width: 185px !important;
}

html body.cx-design-system
.alert-list-card
th.cx-table-column-header--comment {
    width: 17% !important;
    min-width: 175px !important;
}

html body.cx-design-system
.alert-list-card
.alert-list-device-cell {
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
}

html body.cx-design-system
.alert-list-card
.alert-list-device-line {
    min-width: 0 !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    column-gap: 10px !important;
    row-gap: 4px !important;
    white-space: normal !important;
}

html body.cx-design-system
.alert-list-card
.alert-list-device-name {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
}

html body.cx-design-system
.alert-list-card
.alert-list-customer-cell-container,
html body.cx-design-system
.alert-list-card
.alert-list-comment-cell {
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    vertical-align: top !important;
}

html body.cx-design-system
.alert-list-card
.alert-list-customer-cell-container
.alert-list-customer-cell {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

html body.cx-design-system
.alert-list-card
.alert-list-customer-cell-container
.alert-list-customer-address {
    overflow-wrap: anywhere !important;
}

@media (min-width: 1280px) {
    html body.cx-design-system
    .alert-list-card
    .conexgo-pagedlist-table {
        min-width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   ROW ACTION MENUS
   Device and Account now share the same trigger feedback, tooltip contract
   and lightweight opening animation.
   -------------------------------------------------------------------------- */

html body.cx-design-system
:is(
    .device-list-action-group,
    .account-list-cell-name .conexgo-row-action-group
)
:is(
    .device-list-name-button,
    .account-list-name-button,
    .device-list-action-toggle,
    .conexgo-row-action-toggle
) {
    transition:
        background-color 130ms ease,
        border-color 130ms ease,
        color 130ms ease,
        box-shadow 130ms ease,
        transform 130ms ease !important;
}

html body.cx-design-system
.account-list-cell-name
.account-list-name-button:hover {
    background: #f8fbfd !important;
    border-color: #b8d0df !important;
    color: #234b68 !important;
    box-shadow: 0 3px 10px rgba(35, 76, 105, .05) !important;
    transform: translateY(-1px) !important;
}

html body.cx-design-system
.account-list-cell-name
.account-list-name-button:active {
    transform: translateY(0) !important;
}

html body.cx-design-system
:is(
    .device-list-action-toggle,
    .conexgo-row-action-toggle
):hover {
    background: #3b6a8c !important;
    border-color: #3b6a8c !important;
    box-shadow: 0 3px 9px rgba(39, 79, 109, .12) !important;
    transform: none !important;
}

html body.cx-design-system
:is(
    .device-list-action-toggle,
    .conexgo-row-action-toggle
)[aria-expanded="true"] {
    background: #315f80 !important;
    border-color: #315f80 !important;
    box-shadow: 0 0 0 3px rgba(70, 119, 155, .10) !important;
}

@keyframes cx-r18752-row-menu-in-down {
    from {
        opacity: 0;
        transform: translateY(-5px) scale(.992);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes cx-r18752-row-menu-in-up {
    from {
        opacity: 0;
        transform: translateY(5px) scale(.992);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

html body.cx-design-system
:is(
    .device-list-action-menu,
    .conexgo-row-action-menu
).show {
    transform-origin: top right !important;
    animation: cx-r18752-row-menu-in-down 135ms cubic-bezier(.2, .75, .25, 1) both !important;
}

html body.cx-design-system
:is(
    .device-list-action-group,
    .conexgo-row-action-group
).cx-row-menu-open-above
> :is(
    .device-list-action-menu,
    .conexgo-row-action-menu
).show {
    transform-origin: bottom right !important;
    animation-name: cx-r18752-row-menu-in-up !important;
}

@media (prefers-reduced-motion: reduce) {
    html body.cx-design-system
    :is(
        .device-list-action-menu,
        .conexgo-row-action-menu
    ).show {
        animation: none !important;
    }

    html body.cx-design-system
    :is(
        .device-list-name-button,
        .account-list-name-button,
        .device-list-action-toggle,
        .conexgo-row-action-toggle
    ) {
        transition: none !important;
    }
}

/* CONEXGO R18-75.2 END */

/* ==========================================================================
   CONEXGO R18-75.3 - ALERT TABLE HEADER FIT
   Scoped only to Alerts. Keeps the structural R18-75 header system.
   ========================================================================== */

/* Give the six Alerts columns enough real space without making the table huge. */
html body.cx-design-system
.alert-list-card
.conexgo-pagedlist-table {
    width: 100% !important;
    min-width: 1030px !important;
    table-layout: fixed !important;
}

/* Balanced desktop column proportions. */
html body.cx-design-system
.alert-list-card
th.cx-table-column-header--action {
    width: 10% !important;
    min-width: 110px !important;
}

html body.cx-design-system
.alert-list-card
th.cx-table-column-header--alert {
    width: 12% !important;
    min-width: 120px !important;
}

html body.cx-design-system
.alert-list-card
th.cx-table-column-header--datetime {
    width: 14% !important;
    min-width: 140px !important;
}

html body.cx-design-system
.alert-list-card
th.cx-table-column-header--device {
    width: 30% !important;
    min-width: 280px !important;
}

html body.cx-design-system
.alert-list-card
th.cx-table-column-header--customer {
    width: 17% !important;
    min-width: 170px !important;
}

html body.cx-design-system
.alert-list-card
th.cx-table-column-header--comment {
    width: 17% !important;
    min-width: 170px !important;
}

/* Alerts headers need a slightly denser composition than very wide list tables. */
html body.cx-design-system
.alert-list-card
th.cx-table-column-header
.cx-table-column-header__layout {
    min-height: 50px !important;
    gap: 7px !important;
    padding: 8px 8px !important;
}

html body.cx-design-system
.alert-list-card
th.cx-table-column-header
.cx-table-column-header__icon {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    flex: 0 0 26px !important;
    border-radius: 7px !important;
}

html body.cx-design-system
.alert-list-card
th.cx-table-column-header
.cx-table-column-header__icon > i {
    font-size: 11.5px !important;
}

html body.cx-design-system
.alert-list-card
th.cx-table-column-header
.cx-table-column-header__copy {
    min-width: max-content !important;
    flex: 0 1 auto !important;
    overflow: visible !important;
}

html body.cx-design-system
.alert-list-card
th.cx-table-column-header
.cx-table-column-header__label {
    min-width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
}

/* Keep sort glyph separate from the title instead of squeezing the title. */
html body.cx-design-system
.alert-list-card
th.cx-table-column-header
.cx-table-column-header__sort {
    width: 14px !important;
    min-width: 14px !important;
    height: 22px !important;
    flex: 0 0 14px !important;
    margin-left: 3px !important;
    font-size: 8.75px !important;
}

/* Action has no sort glyph and gets a little extra breathing room. */
html body.cx-design-system
.alert-list-card
th.cx-table-column-header--action
.cx-table-column-header__layout {
    padding-left: 9px !important;
    padding-right: 9px !important;
}

/* Keep actual row content aligned with the corrected header widths. */
html body.cx-design-system
.alert-list-card
.bstable-actions {
    min-width: 0 !important;
    padding-left: 10px !important;
    padding-right: 8px !important;
    vertical-align: middle !important;
}

html body.cx-design-system
.alert-list-card
.alert-list-device-cell,
html body.cx-design-system
.alert-list-card
.alert-list-customer-cell-container,
html body.cx-design-system
.alert-list-card
.alert-list-comment-cell {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* At narrower desktop widths, preserve readable headers and let only the table scroll. */
@media (max-width: 1180px) {
    html body.cx-design-system
    .alert-list-card
    .conexgo-pagedlist-table {
        min-width: 1080px !important;
    }
}

/* CONEXGO R18-75.3 END */

/* ==========================================================================
   CONEXGO R18-71 - ALERT OPERATOR ROW ALIGNMENT
   Textual alert cells share one top baseline while action buttons stay
   vertically centered. This removes the device-column drop visible on
   multi-line customer/comment rows without changing the table proportions.
   ========================================================================== */

html body.cx-design-system
.alert-list-card
.conexgo-pagedlist-table
tbody > tr > :is(
    .alert-list-alert-cell,
    .alert-list-datetime-cell,
    .alert-list-device-cell,
    .alert-list-customer-cell-container,
    .alert-list-comment-cell
) {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
    vertical-align: top !important;
}

html body.cx-design-system
.alert-list-card
.alert-list-device-line {
    align-items: flex-start !important;
}

html body.cx-design-system
.alert-list-card
.alert-list-callcenter {
    margin-top: 1px !important;
}

/* CONEXGO R18-71 ALERT ROW ALIGNMENT END */


/* ==========================================================================
   CONEXGO R18-65 - DEVICE CONFIG + B-DOTS FINAL OWNERSHIP
   ========================================================================== */

@media (min-width: 1200px) {
    html body .device-config-card .device-config-main-header,
    html body .device-config-card .device-config-sections-shell {
        width: min(100%, 1160px) !important;
        max-width: 1160px !important;
        margin-inline: auto !important;
    }

    html body .device-config-card .device-config-section-header,
    html body .device-config-card .device-config-section-content {
        grid-template-columns:
            minmax(170px, 1.25fr)
            40px
            minmax(120px, .92fr)
            minmax(120px, .9fr)
            minmax(96px, .7fr)
            minmax(190px, 1.3fr)
            38px !important;
        gap: 7px !important;
    }

    html body .device-config-card .device-config-section-header {
        padding: 9px 11px !important;
    }

    html body .device-config-card .device-config-section-content {
        padding: 10px 11px !important;
    }

    html body .device-config-card .device-config-column-heading {
        font-size: 10px !important;
        letter-spacing: .045em !important;
    }

    html body .device-config-card .device-config-col-updated {
        max-width: 260px !important;
    }
}

@media (min-width: 992px) {
    html body .mud-dialog.cx-dialog-root.cx-device-config-dialog.cx-r1-device-dot {
        width: min(960px, calc(100vw - 48px)) !important;
        max-width: min(960px, calc(100vw - 48px)) !important;
        max-height: min(86dvh, 820px) !important;
    }
}

html body .mud-dialog.cx-dialog-root.cx-r1-device-dot .mud-dialog-content,
html body .mud-dialog.cx-dialog-root.cx-r1-device-dot .cx-dialog-content {
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}

html body .mud-dialog.cx-dialog-root.cx-r1-device-dot .device-dot-form {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    gap: 14px !important;
}

html body .mud-dialog.cx-dialog-root.cx-r1-device-dot .device-dot-summary,
html body .mud-dialog.cx-dialog-root.cx-r1-device-dot .device-dot-section {
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px !important;
    border: 1px solid #d9e4ed !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 3px 10px rgba(36, 66, 95, .035) !important;
}

html body .mud-dialog.cx-dialog-root.cx-r1-device-dot .device-dot-grid {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 340px)) !important;
    align-items: stretch !important;
    justify-content: start !important;
    gap: 12px !important;
}

html body .mud-dialog.cx-dialog-root.cx-r1-device-dot .device-dot-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 138px !important;
    margin: 0 !important;
    padding: 12px !important;
    display: grid !important;
    grid-template-columns: 86px minmax(0, 1fr) !important;
    grid-template-rows: auto 1fr !important;
    grid-template-areas:
        "status details"
        "status action" !important;
    gap: 9px 12px !important;
    align-items: start !important;
    overflow: hidden !important;
    border: 1px solid #d7e2eb !important;
    border-radius: 11px !important;
    background: #fbfcfd !important;
    box-shadow: none !important;
}

html body .mud-dialog.cx-dialog-root.cx-r1-device-dot .device-dot-card-status {
    grid-area: status !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 7px !important;
}

html body .mud-dialog.cx-dialog-root.cx-r1-device-dot .device-dot-image {
    width: 76px !important;
    height: 76px !important;
    max-width: 76px !important;
    max-height: 76px !important;
    margin: 0 !important;
    display: block !important;
    object-fit: contain !important;
}

html body .mud-dialog.cx-dialog-root.cx-r1-device-dot .device-dot-connection {
    max-width: 100% !important;
    min-height: 25px !important;
    padding: 0 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border-radius: 999px !important;
    font-size: 10.75px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

html body .mud-dialog.cx-dialog-root.cx-r1-device-dot .device-dot-card-details {
    grid-area: details !important;
    min-width: 0 !important;
    padding: 1px 0 0 !important;
    display: grid !important;
    align-content: start !important;
    justify-items: start !important;
    gap: 7px !important;
}

html body .mud-dialog.cx-dialog-root.cx-r1-device-dot .device-dot-name {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    font-weight: 760 !important;
}

html body .mud-dialog.cx-dialog-root.cx-r1-device-dot .device-dot-battery {
    min-height: 27px !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    border: 1px solid #dce5ec !important;
    border-radius: 7px !important;
    background: #fff !important;
    font-size: 11.5px !important;
}

html body .mud-dialog.cx-dialog-root.cx-r1-device-dot .device-dot-card-action {
    grid-area: action !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    align-self: end !important;
}

html body .mud-dialog.cx-dialog-root.cx-r1-device-dot .device-dot-locate-button {
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 1px solid #cbd9e4 !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #315879 !important;
    font-size: 11.5px !important;
    font-weight: 730 !important;
    line-height: 1.2 !important;
}

html body .mud-dialog.cx-dialog-root.cx-r1-device-dot .device-dot-locate-button > img {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    margin: 0 !important;
    object-fit: contain !important;
}

html body .mud-dialog.cx-dialog-root.cx-r1-device-dot .device-dot-count {
    min-width: 26px !important;
    height: 26px !important;
    padding: 0 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 11px !important;
}

@media (max-width: 991.98px) {
    html body .mud-dialog.cx-dialog-root.cx-r1-device-dot {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        margin: 12px !important;
    }
}

@media (max-width: 575.98px) {
    html body .mud-dialog.cx-dialog-root.cx-r1-device-dot .device-dot-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    html body .mud-dialog.cx-dialog-root.cx-r1-device-dot .device-dot-card {
        grid-template-columns: 76px minmax(0, 1fr) !important;
        gap: 8px 10px !important;
    }

    html body .mud-dialog.cx-dialog-root.cx-r1-device-dot .device-dot-image {
        width: 66px !important;
        height: 66px !important;
        max-width: 66px !important;
        max-height: 66px !important;
    }
}
/* END CONEXGO R18-65 */

/* ==========================================================================
   CONEXGO R18-65.1 - SOFT CXSELECT HOVER
   Keep select interaction calm and progressive instead of snapping between
   idle / hover / active states. Applies globally to shared CxSelect controls.
   ========================================================================== */

html body.cx-design-system .cx-custom-select-trigger {
    transition:
        border-color 220ms cubic-bezier(.22, 1, .36, 1),
        background-color 220ms cubic-bezier(.22, 1, .36, 1),
        box-shadow 220ms cubic-bezier(.22, 1, .36, 1),
        color 180ms ease !important;
}

html body.cx-design-system .cx-custom-select-trigger:hover:not(:disabled) {
    border-color: #b5c7d5 !important;
    background: #fbfdff !important;
    box-shadow: 0 2px 8px rgba(31, 65, 91, .035) !important;
    transform: none !important;
}

html body.cx-design-system .cx-custom-select-chevron,
html body.cx-design-system .cx-custom-select-leading-icon {
    transition:
        border-color 220ms cubic-bezier(.22, 1, .36, 1),
        background-color 220ms cubic-bezier(.22, 1, .36, 1),
        color 180ms ease,
        box-shadow 220ms cubic-bezier(.22, 1, .36, 1) !important;
}

html body.cx-design-system
.cx-custom-select-trigger:hover:not(:disabled)
.cx-custom-select-chevron {
    border-color: #d0dee8 !important;
    background: #eef4f8 !important;
    color: #315c7c !important;
}

html body.cx-design-system
.cx-custom-select-trigger:hover:not(:disabled)
.cx-custom-select-leading-icon {
    background: #f0f5f8 !important;
    color: #315c7c !important;
    transform: none !important;
}

/* The active option is updated immediately on mouseenter by CxSelect.
   Give the visual state enough time to glide instead of flashing. */
html body.cx-design-system
:is(
    .cx-custom-select-menu--top-layer[popover],
    .cx-custom-select-menu[data-cx-select-owner],
    .cx-custom-select-menu
)
.cx-custom-select-option {
    border-color: transparent !important;
    transform: none !important;
    transition:
        background-color 190ms cubic-bezier(.22, 1, .36, 1),
        border-color 190ms cubic-bezier(.22, 1, .36, 1),
        color 170ms ease,
        box-shadow 190ms cubic-bezier(.22, 1, .36, 1) !important;
}

html body.cx-design-system
:is(
    .cx-custom-select-menu--top-layer[popover],
    .cx-custom-select-menu[data-cx-select-owner],
    .cx-custom-select-menu
)
.cx-custom-select-option:hover:not(:disabled),
html body.cx-design-system
:is(
    .cx-custom-select-menu--top-layer[popover],
    .cx-custom-select-menu[data-cx-select-owner],
    .cx-custom-select-menu
)
.cx-custom-select-option.is-active:not(:disabled) {
    border-color: #edf2f6 !important;
    background: #f7fafc !important;
    color: #2d4f69 !important;
    box-shadow: inset 0 0 0 1px rgba(94, 126, 151, .025) !important;
    transform: none !important;
}

html body.cx-design-system
:is(
    .cx-custom-select-menu--top-layer[popover],
    .cx-custom-select-menu[data-cx-select-owner],
    .cx-custom-select-menu
)
.cx-custom-select-option.is-selected {
    border-color: #dbe7ef !important;
    background: #eef5f9 !important;
    color: #294f6d !important;
}

html body.cx-design-system
:is(
    .cx-custom-select-menu--top-layer[popover],
    .cx-custom-select-menu[data-cx-select-owner],
    .cx-custom-select-menu
)
.cx-custom-select-option.is-selected:hover:not(:disabled),
html body.cx-design-system
:is(
    .cx-custom-select-menu--top-layer[popover],
    .cx-custom-select-menu[data-cx-select-owner],
    .cx-custom-select-menu
)
.cx-custom-select-option.is-selected.is-active:not(:disabled) {
    border-color: #d4e2eb !important;
    background: #eaf2f7 !important;
    color: #264c69 !important;
}

html body.cx-design-system .cx-custom-select-option-check {
    transition:
        opacity 170ms ease,
        background-color 190ms cubic-bezier(.22, 1, .36, 1),
        color 170ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
    html body.cx-design-system .cx-custom-select-trigger,
    html body.cx-design-system .cx-custom-select-chevron,
    html body.cx-design-system .cx-custom-select-leading-icon,
    html body.cx-design-system .cx-custom-select-option,
    html body.cx-design-system .cx-custom-select-option-check {
        transition: none !important;
    }
}

/* CONEXGO R18-65.1 - SOFT CXSELECT HOVER END */

/* ==========================================================================
   CONEXGO R18-76.4 - GLOBAL COLLAPSIBLE HEADER + ROW MENU CONTRACT
   - Entire collapsible section headers are interactive surfaces.
   - Device/Account action menus match their split-control width.
   - Row-menu JavaScript chooses UP/DOWN and available height only.
   - CSS keeps each menu anchored to its own split control.
   ========================================================================== */

html body.cx-design-system
:is(
    .device-config-section-header,
    .device-config-section-content,
    .device-permissions-wrapper,
    .account-config-section-header,
    .account-config-section-content
) {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html body.cx-design-system
:is(
    .device-config-section-header,
    .account-config-section-header,
    .device-permissions-header,
    .alert-answer-comment-header
) {
    cursor: pointer !important;
    user-select: none !important;
    transition:
        background-color 130ms ease,
        border-color 130ms ease,
        box-shadow 130ms ease !important;
}

html body.cx-design-system
:is(
    .device-config-section-header,
    .account-config-section-header,
    .device-permissions-header,
    .alert-answer-comment-header
):hover {
    box-shadow: inset 0 0 0 1px rgba(56, 101, 134, .08) !important;
}

html body.cx-design-system
:is(
    .device-list-action-menu,
    .conexgo-row-action-menu
).show {
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
}

html body.cx-design-system
:is(
    .device-list-action-menu,
    .conexgo-row-action-menu
).show
> li,
html body.cx-design-system
:is(
    .device-list-action-menu,
    .conexgo-row-action-menu
).show
.dropdown-item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html body.cx-design-system
:is(
    .account-list-card,
    .account-list-card-body,
    .account-list-table-shell,
    .cx-paged-list,
    .conexgo-pagedlist-table-region,
    .conexgo-pagedlist-table-column,
    .conexgo-pagedlist-table,
    .table-responsive
):has(
    .device-list-action-menu.show,
    .conexgo-row-action-menu.show
) {
    overflow: visible !important;
}

/* CONEXGO R18-76.4 END */

/* ==========================================================================
   CONEXGO R18-76.5 - GLOBAL TABLE ALIGNMENT + DASHBOARD STATUS FIT
   - Data cells use one top baseline across list tables.
   - Action buttons start on the same baseline as row text.
   - Alert detail tables keep labels/values aligned.
   - Dashboard Unit Status uses the full card width on desktop.
   ========================================================================== */

html body.cx-design-system
.conexgo-pagedlist-table
> tbody
> tr
> td {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
    vertical-align: top !important;
    line-height: 1.35 !important;
}

html body.cx-design-system
.conexgo-pagedlist-table
.bstable-actions {
    vertical-align: top !important;
}

html body.cx-design-system
.conexgo-pagedlist-table
.bstable-actions
> .btn-list {
    align-items: flex-start !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

html body.cx-design-system
.conexgo-pagedlist-table
:is(
    .device-list-action-group,
    .conexgo-row-action-group
) {
    vertical-align: top !important;
}

html body.cx-design-system
:is(
    .alert-view-table,
    .alert-answer-table
)
:is(th, td) {
    vertical-align: top !important;
}

/* Alerts: buttons and every textual column share the exact same row baseline. */
html body.cx-design-system
.alert-list-card
.conexgo-pagedlist-table
tbody > tr > .bstable-actions {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
}

/* Unit Status is already a compact card: do not waste its inner width or show
   an unnecessary horizontal scrollbar on normal desktop widths. */
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="deviceStatus"]
.conexgo-dashboard-table-card-body {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="deviceStatus"]
.conexgo-dashboard-table-viewport {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="deviceStatus"]
.conexgo-device-status-table--fit {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

@media (min-width: 900px) {
    html body.cx-design-system
    #conexgoDashboardSmartGrid
    [data-dashboard-key="deviceStatus"]
    .conexgo-dashboard-table-viewport {
        overflow-x: hidden !important;
        scrollbar-gutter: auto !important;
    }

    html body.cx-design-system
    #conexgoDashboardSmartGrid
    [data-dashboard-key="deviceStatus"]
    .conexgo-device-status-table--fit {
        min-width: 0 !important;
        table-layout: fixed !important;
    }
}

@media (max-width: 899.98px) {
    html body.cx-design-system
    #conexgoDashboardSmartGrid
    [data-dashboard-key="deviceStatus"]
    .conexgo-dashboard-table-viewport {
        overflow-x: auto !important;
    }
}

/* CONEXGO R18-76.5 END */

/* ==========================================================================
   CONEXGO R18-76.10 - UI CONTRACT STABILITY
   Scope:
   - Device/Account split dropdowns: larger trigger, square geometry, effectively neutral hover, no animated jump, no decorative borders on popup items.
   - Keep ordinary CxSelect controls compact.
   - Account Profile: CxSelect/profile picker match the legacy text-input width
     instead of enlarging text inputs.
   - Customer Device information: readable left padding for read-only values.
   - Dashboard filter cards: align labels/selects using Active Users as the
     reference layout.
   - Editable textareas: vertical resize only, including Account Email.
   ========================================================================== */

/* 1. Ordinary selects stay compact. This is NOT the row-action dropdown. */
html body.cx-design-system
.cx-custom-select-root
.cx-custom-select-trigger,
html body.cx-design-system
select.form-select {
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 8px !important;
}

html body.cx-design-system
.cx-custom-select-root
.cx-custom-select-trigger {
    padding: 4px 5px 4px 12px !important;
}

html body.cx-design-system
.cx-custom-select-root
.cx-custom-select-chevron {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    border-radius: 7px !important;
}

/* Preserve the useful Group filter introduced during Customer QA. */
html body.cx-design-system .cx-group-filter-grid {
    display: grid !important;
    grid-template-columns: minmax(220px, 360px) max-content !important;
    align-items: end !important;
    gap: 10px 12px !important;
    width: 100% !important;
    padding: 12px 14px 14px !important;
}

html body.cx-design-system .cx-group-filter-grid > .device-filter-field {
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
}

html body.cx-design-system .cx-group-filter-reset {
    min-width: 112px !important;
    min-height: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    align-self: end !important;
}

html body.cx-design-system .cx-group-filter-progress {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 14px 12px !important;
    color: #5b7489 !important;
    font-size: 13px !important;
}

/* 2. Device / Account row-action dropdowns.
   These are intentionally larger than ordinary selects. */
html body.cx-design-system
:is(
    .device-list-action-group,
    .account-list-cell-name .conexgo-row-action-group
) {
    position: relative !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html body.cx-design-system
:is(
    .device-list-action-group .device-list-name-button,
    .account-list-cell-name .account-list-name-button
),
html body.cx-design-system
:is(
    .device-list-action-group .device-list-name-button,
    .account-list-cell-name .account-list-name-button
):hover,
html body.cx-design-system
:is(
    .device-list-action-group .device-list-name-button,
    .account-list-cell-name .account-list-name-button
):focus,
html body.cx-design-system
:is(
    .device-list-action-group .device-list-name-button,
    .account-list-cell-name .account-list-name-button
):focus-visible,
html body.cx-design-system
:is(
    .device-list-action-group .device-list-name-button,
    .account-list-cell-name .account-list-name-button
):active {
    min-height: 50px !important;
    height: 50px !important;
    padding-inline: 14px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    color: #274966 !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color 70ms linear !important;
}

html body.cx-design-system
:is(
    .device-list-action-group .device-list-name-button,
    .account-list-cell-name .account-list-name-button
):hover {
    background: #ffffff !important;
}

html body.cx-design-system
:is(
    .device-list-action-group .device-list-action-toggle,
    .account-list-cell-name .conexgo-row-action-toggle
),
html body.cx-design-system
:is(
    .device-list-action-group .device-list-action-toggle,
    .account-list-cell-name .conexgo-row-action-toggle
):hover,
html body.cx-design-system
:is(
    .device-list-action-group .device-list-action-toggle,
    .account-list-cell-name .conexgo-row-action-toggle
):focus,
html body.cx-design-system
:is(
    .device-list-action-group .device-list-action-toggle,
    .account-list-cell-name .conexgo-row-action-toggle
):focus-visible,
html body.cx-design-system
:is(
    .device-list-action-group .device-list-action-toggle,
    .account-list-cell-name .conexgo-row-action-toggle
):active,
html body.cx-design-system
:is(
    .device-list-action-group .device-list-action-toggle,
    .account-list-cell-name .conexgo-row-action-toggle
)[aria-expanded="true"] {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    min-height: 50px !important;
    height: 50px !important;
    flex: 0 0 50px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #315f80 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color 70ms linear !important;
}

html body.cx-design-system
:is(
    .device-list-action-group .device-list-action-toggle,
    .account-list-cell-name .conexgo-row-action-toggle
):hover,
html body.cx-design-system
:is(
    .device-list-action-group .device-list-action-toggle,
    .account-list-cell-name .conexgo-row-action-toggle
)[aria-expanded="true"] {
    background: #315f80 !important;
}

/* Popup shell: square, borderless, anchored to the split control. */
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu) {
    padding: 4px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: 0 10px 22px rgba(29, 59, 82, .10) !important;
    overflow-x: hidden !important;
}

html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
> li,
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item,
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item:hover,
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item:active {
    min-height: 48px !important;
    padding: 10px 13px !important;
    gap: 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #2e506c !important;
    font-size: 14px !important;
    font-weight: 620 !important;
    line-height: 1.25 !important;
    box-shadow: none !important;
    transform: none !important;
}

html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item {
    background: #ffffff !important;
    transition: background-color 70ms linear !important;
}

html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item:hover {
    background: #fbfcfd !important;
}

html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item:focus-visible {
    border: 0 !important;
    border-radius: 0 !important;
    background: #f7fafc !important;
    color: #284d68 !important;
    outline: 2px solid rgba(70, 119, 155, .12) !important;
    outline-offset: -2px !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Remove the visible opening animation introduced in R18-75.2. */
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu).show,
html body.cx-design-system
:is(.device-list-action-group, .conexgo-row-action-group).cx-row-menu-open-above
> :is(.device-list-action-menu, .conexgo-row-action-menu).show {
    animation: none !important;
    transform: none !important;
}

@media (min-width: 768px) {
    html body.cx-design-system
    :is(
        .device-list-action-group,
        .account-list-cell-name .conexgo-row-action-group
    )
    > :is(.device-list-action-menu, .conexgo-row-action-menu),
    html body.cx-design-system
    :is(
        .device-list-action-group,
        .account-list-cell-name .conexgo-row-action-group
    )
    > :is(.device-list-action-menu, .conexgo-row-action-menu).show {
        position: absolute !important;
        inset: calc(100% + 5px) 0 auto 0 !important;
        top: calc(100% + 5px) !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        margin: 0 !important;
        transform: none !important;
        overflow-y: visible !important;
        z-index: 12000 !important;
    }

    html body.cx-design-system
    :is(
        .device-list-action-group,
        .account-list-cell-name .conexgo-row-action-group
    ).cx-row-menu-open-above
    > :is(.device-list-action-menu, .conexgo-row-action-menu),
    html body.cx-design-system
    :is(
        .device-list-action-group,
        .account-list-cell-name .conexgo-row-action-group
    ).cx-row-menu-open-above
    > :is(.device-list-action-menu, .conexgo-row-action-menu).show {
        inset: auto 0 calc(100% + 5px) 0 !important;
        top: auto !important;
        right: 0 !important;
        bottom: calc(100% + 5px) !important;
        left: 0 !important;
    }

    html body.cx-design-system
    :is(.device-list-action-menu, .conexgo-row-action-menu).cx-r64-row-menu-scrollable {
        max-height: var(--cx-r64-row-menu-max-height) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        scrollbar-width: thin !important;
    }
}

/* 3. Account Profile: match selects/profile picker TO existing text inputs.
   Do not enlarge the text inputs to match a longer select. */
@media (min-width: 768px) {
    html body.cx-design-system
    .conexgo-account-profile
    .conexgo-account-profile-form
    > .row:not(.justify-content-end)
    > .col-md-9 {
        min-width: 0 !important;
    }

    html body.cx-design-system
    .conexgo-account-profile
    .conexgo-account-profile-form
    .form-control {
        width: 90% !important;
        max-width: 90% !important;
    }

    html body.cx-design-system
    .conexgo-account-profile
    .conexgo-account-profile-form
    :is(
        .cx-custom-select-root,
        .conexgo-profile-icon-picker
    ) {
        width: 90% !important;
        max-width: 90% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    html body.cx-design-system
    .conexgo-account-profile
    .conexgo-account-profile-form
    :is(
        .cx-custom-select-trigger,
        .conexgo-profile-icon-picker__trigger
    ) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        min-height: 42px !important;
        height: 42px !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 767.98px) {
    html body.cx-design-system
    .conexgo-account-profile
    .conexgo-account-profile-form
    :is(
        .form-control,
        .cx-custom-select-root,
        .cx-custom-select-trigger,
        .conexgo-profile-icon-picker,
        .conexgo-profile-icon-picker__trigger
    ) {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* 4. Customer Device information: readable inset for read-only values. */
html body.cx-design-system
.mud-dialog.cx-r1-device-addedit
.cx-r1-form-row
> .cx-r1-readonly-value {
    min-height: 48px !important;
    padding: 10px 20px 10px 32px !important;
    align-items: center !important;
    text-indent: 0 !important;
}

html body.cx-design-system
.mud-dialog.cx-r1-device-addedit
.cx-r1-form-row
> .cx-r1-readonly-value
> :first-child {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

html body.cx-design-system
.mud-dialog.cx-r1-device-addedit
.cx-r1-form-row
> .cx-r1-readonly-value.cx-device-activation-readonly {
    padding-left: 32px !important;
    padding-right: 12px !important;
}

/* 5. Dashboard card filters.
   Active Users is the reference: descriptive copy/label aligns with the
   selector instead of floating above it. */
html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-standard-filter-row,
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="latestAlerts"]
.conexgo-dashboard-latest-period-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 280px) !important;
    align-items: center !important;
    gap: 10px 14px !important;
    width: 100% !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-standard-filter-row
> .cx-custom-select-root,
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="latestAlerts"]
.conexgo-dashboard-latest-period-row
> .cx-custom-select-root {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-primary-filter-row {
    align-items: center !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-primary-filter-row
> .conexgo-dashboard-filter-field {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-primary-filter-row
> .conexgo-dashboard-filter-field
> .conexgo-dashboard-filter-label {
    margin: 0 !important;
    white-space: nowrap !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-device-overview-period {
    display: grid !important;
    grid-template-columns: max-content minmax(190px, 270px) !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-device-overview-period
> .conexgo-dashboard-filter-label {
    margin: 0 !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-offline-filter-surface
> .conexgo-dashboard-standard-filter-row {
    padding: 0 !important;
}

@media (max-width: 767.98px) {
    html body.cx-design-system .cx-group-filter-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        padding: 10px !important;
    }

    html body.cx-design-system .cx-group-filter-reset {
        width: 100% !important;
        justify-self: stretch !important;
    }

    html body.cx-design-system
    #conexgoDashboardSmartGrid
    :is(
        .conexgo-dashboard-standard-filter-row,
        [data-dashboard-key="latestAlerts"] .conexgo-dashboard-latest-period-row
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 6px !important;
    }

    html body.cx-design-system
    #conexgoDashboardSmartGrid
    .conexgo-dashboard-primary-filter-row {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
    }

    html body.cx-design-system
    #conexgoDashboardSmartGrid
    .conexgo-dashboard-primary-filter-row
    > .conexgo-dashboard-filter-field,
    html body.cx-design-system
    #conexgoDashboardSmartGrid
    .conexgo-device-overview-period {
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: stretch !important;
        gap: 5px !important;
    }
}

/* 6. Editable textareas: vertical resizing only.
   Account Email gets an explicit dedicated rule because older R18 layers set
   conflicting dimensions/resize modes for the same textarea. */
html body.cx-design-system
:is(form, .mud-dialog, .panel-body, .cx-r8-account-email)
textarea:not([readonly]):not(:disabled):not(.note-codable):not(.fr-code) {
    min-width: 0 !important;
    max-width: 100% !important;
    resize: vertical !important;
    overflow: auto !important;
}

html body.cx-design-system
.mud-dialog.cx-r8-account-email
textarea.cx-email-compose-textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 168px;
    min-height: 118px !important;
    max-height: min(64dvh, 680px) !important;
    resize: vertical !important;
    overflow: auto !important;
}

@media (prefers-reduced-motion: reduce) {
    html body.cx-design-system
    :is(
        .device-list-action-menu .dropdown-item,
        .conexgo-row-action-menu .dropdown-item,
        .device-list-action-group .device-list-name-button,
        .account-list-cell-name .account-list-name-button,
        .device-list-action-group .device-list-action-toggle,
        .account-list-cell-name .conexgo-row-action-toggle
    ) {
        transition: none !important;
    }
}

/* CONEXGO R18-76.10 END */

/* ==========================================================================
   CONEXGO R18-76.11 - RESPONSIVE HEADER / DASHBOARD / ALERT LIST POLISH
   Scope is intentionally visual-only. No alert/notification/profile business
   logic and no Nancy Customer QA role/permission behavior is modified.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Groups responsive list toolbar.
   Match Device_List on narrow screens: back control at the left, search on the
   same blue row, no detached arrow floating above the search field.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    html body.cx-design-system .group-list-card > .group-list-toolbar {
        width: 100% !important;
        min-height: 56px !important;
        padding: 8px !important;
        display: block !important;
        background: #2c4c6c !important;
        overflow: visible !important;
    }

    html body.cx-design-system .group-list-toolbar .group-list-toolbar-row {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: 40px minmax(0, 1fr) !important;
        align-items: center !important;
        gap: 8px !important;
    }

    html body.cx-design-system .group-list-toolbar .group-list-toolbar-back {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 40px !important;
        min-width: 40px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        justify-self: start !important;
    }

    html body.cx-design-system .group-list-toolbar .group-list-toolbar-search {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        display: block !important;
    }

    html body.cx-design-system .group-list-toolbar .group-list-toolbar-search :is(.dataTables_filter, label) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }

    html body.cx-design-system .group-list-toolbar .group-list-toolbar-search .dataTables_filter > label {
        display: flex !important;
        align-items: stretch !important;
        gap: 6px !important;
    }

    html body.cx-design-system .group-list-toolbar .group-list-toolbar-search :is(.input-group, .cx-search-control) {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   2. Dashboard mobile cards.
   Desktop-saved resize heights must not create empty mobile cards. Mobile owns
   a natural-height single-column flow; minimized cards stay compact and their
   long titles ellipsize instead of being vertically clipped.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    html body.cx-design-system .cx-dashboard-page,
    html body.cx-design-system #conexgoDashboardSmartGrid {
        width: 100% !important;
        max-width: none !important;
        margin-inline: 0 !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid.conexgo-dashboard-content-grid {
        gap: 8px !important;
        padding-inline: 0 !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item,
    html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item[data-masonry-positioned="true"] {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item > .conexgo-dashboard-resizable-card:not(.conexgo-dashboard-minimized-card):not(.conexgo-dashboard-card-closing),
    html body.cx-design-system .conexgo-dashboard-configuration-card:not(.conexgo-dashboard-minimized-card):not(.conexgo-dashboard-card-closing) {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        resize: none !important;
        overflow: visible !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item:has(> .conexgo-dashboard-minimized-card),
    html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item:has(> .conexgo-dashboard-card-closing) {
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item > .conexgo-dashboard-minimized-card,
    html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item > .conexgo-dashboard-card-closing,
    html body.cx-design-system .conexgo-dashboard-configuration-card.conexgo-dashboard-minimized-card,
    html body.cx-design-system .conexgo-dashboard-configuration-card.conexgo-dashboard-card-closing {
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        overflow: hidden !important;
    }

    html body.cx-design-system .conexgo-dashboard-card-header-surface {
        min-height: 46px !important;
        height: 46px !important;
        padding: 7px 8px 7px 11px !important;
        overflow: hidden !important;
    }

    html body.cx-design-system .conexgo-dashboard-card-header {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    html body.cx-design-system .conexgo-dashboard-card-title,
    html body.cx-design-system #conexgoDashboardSmartGrid .card-header .card-title {
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 1 1 auto !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: 12.75px !important;
        line-height: 1.2 !important;
    }

    html body.cx-design-system .conexgo-dashboard-card-action {
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        flex: 0 0 32px !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid .card-body {
        padding: 10px !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid :is(.conexgo-dashboard-resizable-list, .conexgo-dashboard-active-users-list) {
        min-height: 0 !important;
        max-height: min(44dvh, 320px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }
}

/* --------------------------------------------------------------------------
   4. Header notification dropdown.
   Keep its own content, but give it the same disciplined panel geometry as the
   alert queue: bounded body, fixed header/footer, no horizontal overflow.
   -------------------------------------------------------------------------- */
html body.cx-design-system .conexgo-header-notifications .conexgo-notification-dropdown {
    width: 500px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 20px) !important;
    max-height: min(540px, calc(100dvh - 100px)) !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    border: 1px solid #d9e1e8 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: 0 12px 28px rgba(31, 61, 89, .14) !important;
    overflow: hidden !important;
}

html body.cx-design-system .conexgo-notification-dropdown .conexgo-notification-dropdown-header {
    min-height: 58px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid #24425e !important;
    background: #2c4c6c !important;
}

html body.cx-design-system .conexgo-notification-dropdown .conexgo-notification-list {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: thin !important;
}

html body.cx-design-system .conexgo-notification-dropdown .conexgo-notification-item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 11px 14px !important;
    overflow: hidden !important;
}

html body.cx-design-system .conexgo-notification-dropdown .conexgo-notification-item-content {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

html body.cx-design-system .conexgo-notification-dropdown .conexgo-notification-item-title {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

html body.cx-design-system .conexgo-notification-dropdown .conexgo-notification-see-all-wrap,
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-see-all--classic {
    background: #ffffff !important;
    border-top: 1px solid #e1e8ee !important;
}

html body.cx-design-system .conexgo-notification-dropdown .conexgo-notification-see-all,
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-see-all--classic {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #244b6a !important;
    font-weight: 700 !important;
    transition: background-color 140ms ease, color 140ms ease !important;
}

html body.cx-design-system .conexgo-notification-dropdown .conexgo-notification-see-all:is(:hover, :focus-visible),
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-see-all--classic:is(:hover, :focus-visible) {
    background: #f3f7fa !important;
    color: #173b58 !important;
    box-shadow: none !important;
    transform: none !important;
}

@media (max-width: 767.98px) {
    html body.cx-design-system .conexgo-header-notifications .conexgo-notification-dropdown,
    html body.cx-design-system .conexgo-header-alerts .conexgo-alert-dropdown {
        width: calc(100vw - 16px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 16px) !important;
        max-height: min(68dvh, 560px) !important;
        margin-inline: 8px !important;
        overflow: hidden !important;
    }

    html body.cx-design-system .conexgo-notification-dropdown .conexgo-notification-dropdown-header,
    html body.cx-design-system .conexgo-header-alerts .conexgo-alert-dropdown-header--classic {
        min-height: 52px !important;
        padding: 8px 10px !important;
    }

    html body.cx-design-system .conexgo-notification-dropdown .conexgo-notification-item {
        padding: 9px 10px !important;
    }

    html body.cx-design-system .conexgo-notification-dropdown .conexgo-notification-header-title,
    html body.cx-design-system .conexgo-alert-classic-header-title {
        font-size: 14px !important;
    }

    html body.cx-design-system .conexgo-notification-dropdown .conexgo-notification-see-all,
    html body.cx-design-system .conexgo-header-alerts .conexgo-alert-see-all--classic {
        min-height: 44px !important;
    }
}

/* --------------------------------------------------------------------------
   5. Profile trigger/dropdown responsive polish.
   Preserve the small rounded avatar treatment while allowing the menu to use
   the phone width instead of remaining a narrow desktop popover.
   -------------------------------------------------------------------------- */
html body.cx-design-system .conexgo-header-profile #profile-image {
    width: 40px !important;
    height: 40px !important;
    border: 2px solid #dfe8ef !important;
    border-radius: 999px !important;
    box-shadow: 0 3px 9px rgba(24, 55, 83, .10) !important;
    object-fit: cover !important;
}

html body.cx-design-system .conexgo-header-profile .conexgo-profile-dropdown {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: min(520px, calc(100dvh - 100px)) !important;
}

@media (max-width: 767.98px) {
    html body.cx-design-system .conexgo-header-profile #profile-image {
        width: 42px !important;
        height: 42px !important;
        border-width: 2px !important;
        box-shadow: 0 3px 10px rgba(24, 55, 83, .12) !important;
    }

    html body.cx-design-system .conexgo-header-profile .conexgo-profile-dropdown {
        width: calc(100vw - 20px) !important;
        min-width: 0 !important;
        max-width: 380px !important;
        max-height: min(70dvh, 560px) !important;
        border-radius: 10px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    html body.cx-design-system .conexgo-header-profile .conexgo-profile-dropdown > div:first-child img {
        width: 58px !important;
        height: 58px !important;
        border-radius: 999px !important;
    }
}

/* CONEXGO R18-76.11 END */

/* ==========================================================================
   CONEXGO R18-76.12 - DROPDOWN / DASHBOARD FILTER / ALERT VIEW POLISH
   This is a narrow corrective layer over the source-audited R18-76.10/11
   contract. It does not alter permissions, alert handling, filtering logic,
   exports, Nancy Items #1-#6, or the alert-queue card design.
   ========================================================================== */

/* 1. Device / Account split controls: soften R18-76.10's completely square
   geometry without returning to the large rounded treatment. */
html body.cx-design-system
:is(
    .device-list-action-group,
    .account-list-cell-name .conexgo-row-action-group
) {
    border-radius: 7px !important;
}

html body.cx-design-system
:is(
    .device-list-action-group .device-list-name-button,
    .account-list-cell-name .account-list-name-button
),
html body.cx-design-system
:is(
    .device-list-action-group .device-list-name-button,
    .account-list-cell-name .account-list-name-button
):is(:hover, :focus, :focus-visible, :active) {
    border-radius: 7px 0 0 7px !important;
    background: #f8fafc !important;
    box-shadow: none !important;
    transform: none !important;
}

html body.cx-design-system
:is(
    .device-list-action-group .device-list-action-toggle,
    .account-list-cell-name .conexgo-row-action-toggle
),
html body.cx-design-system
:is(
    .device-list-action-group .device-list-action-toggle,
    .account-list-cell-name .conexgo-row-action-toggle
):is(:hover, :focus, :focus-visible, :active),
html body.cx-design-system
:is(
    .device-list-action-group .device-list-action-toggle,
    .account-list-cell-name .conexgo-row-action-toggle
)[aria-expanded="true"] {
    border-radius: 0 7px 7px 0 !important;
    background: #315f80 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* 2. Action dropdown: slightly rounded, less white, and almost motionless.
   The JS control layer also suppresses redundant floating tooltips inside it. */
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu) {
    padding: 5px !important;
    border: 0 !important;
    border-radius: 7px !important;
    background: #f3f6f8 !important;
    box-shadow: 0 9px 20px rgba(29, 59, 82, .09) !important;
}

html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item,
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item:active {
    min-height: 48px !important;
    padding: 10px 13px !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: transparent !important;
    color: #2e506c !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color 90ms ease !important;
}

html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item:hover {
    border: 0 !important;
    background: #edf2f5 !important;
    color: #2e506c !important;
    box-shadow: none !important;
    transform: none !important;
}

html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item:focus-visible {
    border: 0 !important;
    border-radius: 5px !important;
    background: #edf2f5 !important;
    color: #2e506c !important;
    outline: 2px solid rgba(70, 119, 155, .14) !important;
    outline-offset: -2px !important;
    box-shadow: none !important;
    transform: none !important;
}

/* 3. Dashboard cards with TWO primary selects.
   Each label belongs above its own select. The two fields remain side by side
   on desktop; on phones they keep the existing one-column responsive flow. */
html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-primary-filter-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 10px 14px !important;
    width: 100% !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-primary-filter-row
> .conexgo-dashboard-filter-field {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: stretch !important;
    gap: 5px !important;
    min-width: 0 !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-primary-filter-row
> .conexgo-dashboard-filter-field
> .conexgo-dashboard-filter-label {
    width: 100% !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-primary-filter-row
> .conexgo-dashboard-filter-field
> :is(.cx-custom-select-root, .cx-control--dashboard-filter) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
}

@media (max-width: 767.98px) {
    html body.cx-design-system
    #conexgoDashboardSmartGrid
    .conexgo-dashboard-primary-filter-row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }
}

/* 4. Read-only Alert View: use the same restrained yellow highlighter family
   as Alert Answer so the comment/history section is visually easy to find. */
html body.cx-design-system
.mud-dialog.cx-dialog--alert-view
.alert-view-comments-section {
    border-color: #d8bd54 !important;
    border-radius: 9px !important;
    background: #fff8cf !important;
    box-shadow: 0 0 0 2px rgba(205, 168, 51, .08) !important;
    overflow: hidden !important;
}

html body.cx-design-system
.mud-dialog.cx-dialog--alert-view
.alert-view-comments-toggle {
    border-bottom-color: #dfcc7b !important;
    background: #fff2b8 !important;
    color: #2c4c6c !important;
    box-shadow: inset 4px 0 0 #d2aa25 !important;
}

html body.cx-design-system
.mud-dialog.cx-dialog--alert-view
.alert-view-comments-toggle:is(:hover, :focus-visible) {
    background: #fff0ae !important;
    color: #2c4c6c !important;
    box-shadow: inset 4px 0 0 #d2aa25 !important;
    transform: none !important;
}

html body.cx-design-system
.mud-dialog.cx-dialog--alert-view
:is(.alert-view-comments-collapse, .alert-view-comments-collapse-inner, .alert-view-comments-body) {
    background: #fffbe7 !important;
}

html body.cx-design-system
.mud-dialog.cx-dialog--alert-view
.alert-view-comments-empty {
    color: #75673e !important;
}

/* CONEXGO R18-76.12 END */

/* ==========================================================================
   CONEXGO R18-76.13 - ALERT MOBILE CARD RESTORATION
   Undo only the R18-76.11 forced four-column phone table. Alert rows fall
   back to the same native responsive card contract used by Groups and other
   paged lists. Desktop/tablet behavior is unchanged.
   ========================================================================== */
@media (max-width: 767.98px) {
    html body.cx-design-system .alert-list-card,
    html body.cx-design-system .alert-list-card-body,
    html body.cx-design-system .alert-list-card-body > .table-responsive,
    html body.cx-design-system .alert-list-card-body .dataTables_wrapper,
    html body.cx-design-system .alert-list-card-body .cx-paged-list,
    html body.cx-design-system .alert-list-card-body .conexgo-pagedlist-table-region,
    html body.cx-design-system .alert-list-card-body .conexgo-pagedlist-table-column {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        box-sizing: border-box !important;
    }

    html body.cx-design-system .alert-list-card-body {
        padding: 8px !important;
    }

    /* Do not force a desktop-width table on phones. The shared PagedList
       responsive layer can now render each row as the same compact card used
       by Groups. */
    html body.cx-design-system .alert-list-card .conexgo-pagedlist-table {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: auto !important;
        margin: 0 !important;
    }

    html body.cx-design-system .alert-list-card-body > .table-responsive,
    html body.cx-design-system .alert-list-card .conexgo-pagedlist-table-region,
    html body.cx-design-system .alert-list-card .conexgo-pagedlist-table-column {
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    /* Customer/comment are intentionally desktop-only in the compact alert
       list. Keep the phone card focused on Action, Alert, Date/Time and Device. */
    html body.cx-design-system .alert-list-card :is(
        th.cx-table-column-header--customer,
        th.cx-table-column-header--comment,
        td.alert-list-customer-cell-container,
        td.alert-list-comment-cell
    ) {
        display: none !important;
    }

    html body.cx-design-system .alert-list-card .bstable-actions .btn-list {
        gap: 6px !important;
        flex-wrap: wrap !important;
    }
}
/* CONEXGO R18-76.13 END */

/* ==========================================================================
   CONEXGO R18-76.14 - DROPDOWN / OFFLINE CARD / NOTIFICATION STABILITY
   ========================================================================== */

/* Split Device/Account controls: only a light depth cue. */
html body.cx-design-system
:is(
    .device-list-action-group,
    .account-list-cell-name .conexgo-row-action-group
) {
    box-shadow: 0 2px 7px rgba(29, 59, 82, .08) !important;
}

html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu) {
    box-shadow: 0 6px 16px rgba(29, 59, 82, .10) !important;
}

/* Pointer hover in the row-action popup is intentionally neutral: no jump,
   no contrast flash, no animation. Keyboard focus remains visible. */
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item,
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item:hover,
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item:active {
    background: transparent !important;
    color: #2e506c !important;
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
}

html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item:focus-visible {
    background: rgba(49, 95, 128, .045) !important;
    outline: 2px solid rgba(49, 95, 128, .14) !important;
    outline-offset: -2px !important;
}

/* Unit Status hover uses the Conexgo blue interaction family. */
html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-device-status-table tbody tr:hover {
    background: rgba(49, 95, 128, .075) !important;
}

/* Offline/watch filter: copy and explanation on the left, control on the right. */
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="offlineDevices"]
.conexgo-dashboard-offline-period-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(230px, .95fr) !important;
    align-items: center !important;
    gap: 12px 18px !important;
    width: 100% !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="offlineDevices"]
.conexgo-dashboard-offline-period-copy {
    min-width: 0 !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="offlineDevices"]
.conexgo-dashboard-offline-period-copy
.conexgo-dashboard-config-section-description {
    margin-top: 3px !important;
    max-width: 38ch !important;
}

html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="offlineDevices"]
.conexgo-dashboard-offline-period-select {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* Notification dropdown: denser desktop panel, still bounded and scrollable. */
html body.cx-design-system
.conexgo-header-notifications
.conexgo-notification-dropdown {
    width: 390px !important;
    min-width: min(300px, calc(100vw - 24px)) !important;
    max-width: min(390px, calc(100vw - 24px)) !important;
    max-height: min(440px, calc(100dvh - 104px)) !important;
    box-shadow: 0 9px 22px rgba(31, 61, 89, .12) !important;
}

html body.cx-design-system
.conexgo-notification-dropdown
.conexgo-notification-dropdown-header {
    min-height: 54px !important;
    padding: 8px 10px !important;
}

html body.cx-design-system
.conexgo-notification-dropdown
.conexgo-notification-item {
    padding: 9px 11px !important;
}

html body.cx-design-system
.conexgo-header-notifications
.conexgo-notification-empty {
    min-height: 72px !important;
    padding: 12px !important;
    gap: 6px !important;
}

html body.cx-design-system
.conexgo-notification-dropdown
.conexgo-notification-empty-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 14px !important;
}

html body.cx-design-system
.conexgo-notification-dropdown
.conexgo-notification-see-all {
    min-height: 40px !important;
    padding: 7px 10px !important;
}

@media (max-width: 767.98px) {
    html body.cx-design-system
    #conexgoDashboardSmartGrid
    [data-dashboard-key="offlineDevices"]
    .conexgo-dashboard-offline-period-row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    html body.cx-design-system
    .conexgo-header-notifications
    .conexgo-notification-dropdown {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: min(58dvh, 440px) !important;
        margin-inline: 12px !important;
    }
}

/* CONEXGO R18-76.14 END */

/* ==========================================================================
   CONEXGO R18-76.15 - RESPONSIVE DASHBOARD / ALERT HEADER / DOCUMENT POLISH
   Final narrow override over R18-76.14.  No alert-card business logic, Nancy
   QA permissions, exports, dashboard storage, or device/account actions change.
   ========================================================================== */

/* 1. Device/Account split controls: return to white with only restrained depth. */
html body.cx-design-system
:is(
    .device-list-action-group .device-list-name-button,
    .account-list-cell-name .account-list-name-button
),
html body.cx-design-system
:is(
    .device-list-action-group .device-list-name-button,
    .account-list-cell-name .account-list-name-button
):is(:hover, :focus, :focus-visible, :active) {
    background: #ffffff !important;
    border-color: #cbd9e4 !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
}

html body.cx-design-system
:is(
    .device-list-action-group,
    .account-list-cell-name .conexgo-row-action-group
) {
    background: #ffffff !important;
    box-shadow: 0 2px 7px rgba(29, 59, 82, .08) !important;
}

/* Popup remains white and calm. Pointer hover intentionally has no fill or
   motion; only keyboard focus receives a very soft accessibility cue. */
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu) {
    background: #ffffff !important;
    border: 1px solid #d7e2ea !important;
    box-shadow: 0 8px 18px rgba(29, 59, 82, .10) !important;
}

html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item,
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item:hover,
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item:active {
    background: #ffffff !important;
    color: #2e506c !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
}

html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item:focus-visible {
    background: #f7fafc !important;
    color: #2e506c !important;
    outline: 1px solid #c7d7e3 !important;
    outline-offset: -1px !important;
    box-shadow: none !important;
}

/* Shared CxSelect: white surface, tiny depth, and a deliberately restrained
   hover that does not look like a state jump. */
html body.cx-design-system .cx-custom-select-trigger {
    background: #ffffff !important;
    border-color: #cfdae3 !important;
    box-shadow: 0 1px 4px rgba(29, 59, 82, .045) !important;
    transform: none !important;
    filter: none !important;
    transition: border-color 120ms ease, box-shadow 120ms ease !important;
}

html body.cx-design-system .cx-custom-select-trigger:hover:not(:disabled) {
    background: #ffffff !important;
    border-color: #c5d3de !important;
    box-shadow: 0 2px 6px rgba(29, 59, 82, .055) !important;
    transform: none !important;
    filter: none !important;
}

html body.cx-design-system
.cx-custom-select-trigger:hover:not(:disabled)
.cx-custom-select-chevron {
    background: #f3f7fa !important;
    border-color: #d2dfe8 !important;
    color: #315c7c !important;
    box-shadow: none !important;
    transform: none !important;
}

/* 2. Alerts popup header now follows the Notification information hierarchy,
   while the existing alert cards and alert colors remain untouched. */
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-dropdown-header--classic {
    min-height: 62px !important;
    padding: 9px 11px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    background: #2c4c6c !important;
    border-bottom: 1px solid #24425e !important;
}

html body.cx-design-system .conexgo-alert-header-main {
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

html body.cx-design-system .conexgo-alert-header-icon {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .09) !important;
    color: #ffffff !important;
    font-size: 15px !important;
}

html body.cx-design-system .conexgo-alert-header-title-wrap {
    min-width: 0 !important;
}

html body.cx-design-system .conexgo-alert-header-title {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 720 !important;
    line-height: 1.15 !important;
}

html body.cx-design-system .conexgo-alert-header-meta {
    margin-top: 2px !important;
    color: rgba(255, 255, 255, .84) !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}

html body.cx-design-system .conexgo-alert-header-actions {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}

html body.cx-design-system .conexgo-alert-header-count {
    min-width: 28px !important;
    height: 28px !important;
    padding: 0 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 750 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .10) !important;
}

html body.cx-design-system .conexgo-alert-classic-clear-all {
    min-height: 32px !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
}

/* 3. Version pill: same calm card family as Clock/other header controls and
   a useful responsive width instead of collapsing to an 84-98px chip. */
html body.cx-design-system .app-header-modern .topbar-version-pill {
    min-width: 132px !important;
    height: 40px !important;
    padding: 0 10px !important;
    border-color: #d7e2ea !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 7px rgba(29, 59, 82, .055) !important;
}

html body.cx-design-system .app-header-modern .topbar-version-icon {
    width: 29px !important;
    height: 29px !important;
    flex: 0 0 29px !important;
    border-radius: 8px !important;
    background: #f0f5f8 !important;
}

html body.cx-design-system .app-header-modern .topbar-version-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

@media (max-width: 575.98px) {
    html body.cx-design-system .app-header-modern .topbar-version-pill {
        width: clamp(108px, 31vw, 132px) !important;
        min-width: 108px !important;
        max-width: 132px !important;
        height: 38px !important;
        padding-inline: 8px !important;
        gap: 6px !important;
    }

    html body.cx-design-system .app-header-modern .topbar-version-icon {
        width: 28px !important;
        height: 28px !important;
        flex-basis: 28px !important;
    }

    html body.cx-design-system .app-header-modern .topbar-version-label {
        font-size: 9.5px !important;
    }

    html body.cx-design-system .app-header-modern .topbar-version-value {
        font-size: 12.5px !important;
    }
}

/* 4. Dashboard mobile cards: final single-column compact contract.  Saved
   desktop heights cannot clip phone titles or leave fake empty card space. */
@media (max-width: 767.98px) {
    html body.cx-design-system #conexgoDashboardSmartGrid.conexgo-dashboard-content-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
        align-items: start !important;
        width: 100% !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item,
    html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item[data-masonry-positioned="true"] {
        position: static !important;
        inset: auto !important;
        transform: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item:has(> .conexgo-dashboard-minimized-card),
    html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item:has(> .conexgo-dashboard-card-closing) {
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item > .conexgo-dashboard-minimized-card,
    html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item > .conexgo-dashboard-card-closing,
    html body.cx-design-system .conexgo-dashboard-configuration-card.conexgo-dashboard-minimized-card,
    html body.cx-design-system .conexgo-dashboard-configuration-card.conexgo-dashboard-card-closing {
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
        border-radius: 11px !important;
        overflow: hidden !important;
        box-shadow: 0 2px 7px rgba(35, 65, 90, .065) !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-card-header-surface,
    html body.cx-design-system .conexgo-dashboard-configuration-card .conexgo-dashboard-card-header-surface {
        width: 100% !important;
        min-width: 0 !important;
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
        padding: 0 8px 0 13px !important;
        display: flex !important;
        align-items: center !important;
        overflow: hidden !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-card-header,
    html body.cx-design-system .conexgo-dashboard-configuration-card .conexgo-dashboard-card-header {
        width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-card-title,
    html body.cx-design-system .conexgo-dashboard-configuration-card .conexgo-dashboard-card-title {
        min-width: 0 !important;
        margin: 0 !important;
        display: block !important;
        color: inherit !important;
        font-size: 12.5px !important;
        font-weight: 720 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-card-action,
    html body.cx-design-system .conexgo-dashboard-configuration-card .conexgo-dashboard-card-action {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        flex: 0 0 36px !important;
        margin: 0 !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item > .conexgo-dashboard-resizable-card:not(.conexgo-dashboard-minimized-card):not(.conexgo-dashboard-card-closing) {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        resize: none !important;
    }

    html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item > .conexgo-dashboard-resizable-card:not(.conexgo-dashboard-minimized-card):not(.conexgo-dashboard-card-closing) > .card-body {
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* 5. Document dialogs: reduce desktop scale and remove the oversized padding /
   viewer height.  PDF remains comfortably readable and mobile still uses the
   available viewport. */
html body.cx-design-system .mud-dialog.cx-dialog-root.cx-dialog--document-view {
    width: min(1120px, calc(100vw - 40px)) !important;
    max-width: min(1120px, calc(100vw - 40px)) !important;
    max-height: calc(100dvh - 32px) !important;
}

html body.cx-design-system .mud-dialog.cx-dialog-root.cx-dialog--document-view .mud-dialog-content {
    padding: 10px 12px !important;
}

html body.cx-design-system .mud-dialog.cx-dialog-root.cx-dialog--document-view .cx-modal-layout-v21 {
    gap: 8px !important;
}

html body.cx-design-system .mud-dialog.cx-dialog-root.cx-dialog--document-view .cx-r1-section {
    padding: 14px !important;
}

html body.cx-design-system .mud-dialog.cx-dialog-root.cx-dialog--document-view .cx-r1-section-description {
    margin: 4px 0 10px !important;
}

html body.cx-design-system .mud-dialog.cx-dialog-root.cx-dialog--document-view .conexgo-document-view-header {
    margin: 0 0 8px !important;
}

html body.cx-design-system .mud-dialog.cx-dialog-root.cx-dialog--document-view .conexgo-document-view-title {
    margin: 0 !important;
    font-size: 1.45rem !important;
    line-height: 1.2 !important;
}

html body.cx-design-system .mud-dialog.cx-dialog-root.cx-dialog--document-view .conexgo-document-view-description {
    margin-top: 4px !important;
}

html body.cx-design-system .mud-dialog.cx-dialog-root.cx-dialog--document-view .conexgo-document-resize-shell {
    height: min(60dvh, 680px) !important;
    min-height: 400px !important;
    max-height: 680px !important;
    border-radius: 8px !important;
}

html body.cx-design-system .mud-dialog.cx-dialog-root.cx-r1-document-delete {
    width: min(820px, calc(100vw - 40px)) !important;
    max-width: min(820px, calc(100vw - 40px)) !important;
}

html body.cx-design-system .mud-dialog.cx-dialog-root.cx-r1-document-addedit {
    width: min(900px, calc(100vw - 40px)) !important;
    max-width: min(900px, calc(100vw - 40px)) !important;
}

html body.cx-design-system .mud-dialog.cx-dialog-root:is(.cx-r1-document-delete, .cx-r1-document-addedit) .mud-dialog-content {
    padding: 12px 14px !important;
}

@media (max-width: 767.98px) {
    html body.cx-design-system .mud-dialog.cx-dialog-root:is(.cx-dialog--document-view, .cx-r1-document-delete, .cx-r1-document-addedit) {
        width: calc(100vw - 12px) !important;
        max-width: calc(100vw - 12px) !important;
        margin: 6px !important;
    }

    html body.cx-design-system .mud-dialog.cx-dialog-root.cx-dialog--document-view .conexgo-document-resize-shell {
        height: 54dvh !important;
        min-height: 300px !important;
        max-height: 58dvh !important;
    }
}

/* CONEXGO R18-76.15 END */

/* ==========================================================================
   CONEXGO R18-76.16 - FORM / NOTIFICATION / DASHBOARD STABILITY
   ========================================================================== */

/* Global contract: editable multiline controls may change HEIGHT only.
   Width remains owned by the form/grid at every breakpoint. */
html body.cx-design-system textarea:not([readonly]):not(:disabled):not(.note-codable):not(.fr-code),
html body.cx-design-system .mud-input-slot textarea:not([readonly]):not(:disabled),
html body.cx-design-system .mud-input-control textarea:not([readonly]):not(:disabled),
html body.cx-design-system .cx-dialog-textarea:not([readonly]):not(:disabled),
html body.cx-design-system .notification-message-textarea:not([readonly]):not(:disabled) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    resize: vertical !important;
    overflow: auto !important;
}

/* Notification Add/Edit: one control width contract for priority, EN and FR content. */
html body .mud-dialog.cx-r1-notification-addedit {
    --cx-notification-field-max: 780px;
}

html body .mud-dialog.cx-r1-notification-addedit .notification-priority-field,
html body .mud-dialog.cx-r1-notification-addedit .cx-r1-form-row > .col-md-9,
html body .mud-dialog.cx-r1-notification-addedit .cx-r1-form-row > [class*="col-"]:last-child {
    width: min(100%, var(--cx-notification-field-max)) !important;
    max-width: var(--cx-notification-field-max) !important;
    min-width: 0 !important;
}

html body .mud-dialog.cx-r1-notification-addedit :is(.form-control, .form-select, .cx-custom-select, .cx-control, .cx-datepicker) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Notification View: preserve modal geometry; refine the information surfaces inside it. */
html body .cx-notification-view-dialog .notification-view-form {
    width: min(100%, 900px) !important;
    margin-inline: auto !important;
    display: grid !important;
    gap: 12px !important;
}

html body .cx-notification-view-dialog .notification-view-block {
    margin: 0 !important;
}

html body .cx-notification-view-dialog .notification-view-block-label {
    margin-bottom: 6px !important;
    color: #4e6478 !important;
    font-size: .76rem !important;
    font-weight: 800 !important;
    letter-spacing: .035em !important;
    text-transform: uppercase !important;
}

html body .cx-notification-view-dialog .notification-view-priority-card,
html body .cx-notification-view-dialog .notification-view-title-box,
html body .cx-notification-view-dialog .notification-view-message-box {
    border-color: #d5e0e9 !important;
    border-radius: 9px !important;
    box-shadow: 0 2px 8px rgba(39, 67, 94, .045) !important;
}

html body .cx-notification-view-dialog .notification-view-priority-card {
    min-height: 58px !important;
    padding: 10px 13px !important;
}

html body .cx-notification-view-dialog .notification-view-priority-icon {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
}

html body .cx-notification-view-dialog .notification-view-title-box {
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    padding: 10px 13px !important;
    background: #f7fafc !important;
}

html body .cx-notification-view-dialog .notification-view-message-box {
    min-height: 112px !important;
    max-height: 260px !important;
    padding: 13px 15px !important;
    background: #fff !important;
    line-height: 1.55 !important;
}

html body .cx-notification-view-dialog .notification-view-acknowledged {
    min-height: 40px !important;
    padding: 8px 12px !important;
    border-radius: 9px !important;
}

/* Block-notice controls: reason and action selects now occupy the same available width. */
html body .mud-dialog.cx-r1816-blocknotice .cx-r1876-blocknotice-action-control,
html body .mud-dialog.cx-r1816-blocknotice .cx-r1876-blocknotice-action-control > *,
html body .mud-dialog.cx-r1816-blocknotice .cx-r1-form-row > .col-md-9 > .cx-custom-select {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

/* Dashboard responsive sizing is content-driven. Desktop resize heights must never
   force giant/empty cards on phone/tablet. */
@media (max-width: 767.98px) {
    html body .conexgo-dashboard-smart-grid,
    html body .cx-dashboard-grid,
    html body .conexgo-dashboard-smart-grid.cx-dashboard-priority-order {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-rows: auto !important;
        align-items: start !important;
        gap: 12px !important;
    }

    html body .conexgo-dashboard-smart-item,
    html body .conexgo-dashboard-smart-item > .card,
    html body .conexgo-dashboard-resizable-card:not(.conexgo-dashboard-minimized-card) {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    html body .conexgo-dashboard-resizable-card:not(.conexgo-dashboard-minimized-card) > .card-body {
        height: auto !important;
        max-height: none !important;
    }

    html body .conexgo-dashboard-resizable-card .conexgo-dashboard-resizable-list {
        max-height: min(42dvh, 360px) !important;
    }

    html body .conexgo-dashboard-configuration-card.conexgo-dashboard-minimized-card,
    html body .conexgo-dashboard-smart-item .conexgo-dashboard-minimized-card {
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
        overflow: hidden !important;
    }
}

/* Compact tablet cards without inheriting desktop fixed heights. */
@media (min-width: 768px) and (max-width: 1023.98px) {
    html body .conexgo-dashboard-smart-item > .conexgo-dashboard-resizable-card:not(.conexgo-dashboard-minimized-card) {
        height: auto !important;
        max-height: none !important;
    }
}

/* CONEXGO R18-76.16 END */

/* CONEXGO R18-76.18.5.2 ROW-MENU-HOVER-NEUTRAL BEGIN */
/* ==========================================================================
   CONEXGO R18-76.18.5.2
   ROW-ACTION POPUP MENU — MOUSE HOVER NEUTRALIZATION

   Scope is deliberately narrow:
   - Device row action popup (Carte / Configuration / Modifier / ...)
   - Account row action popup
   - Other paged-list Bootstrap row-action popups
   - Account document row popup

   NOT touched:
   - CxSelect option panels
   - topbar dropdowns
   - buttons / split-button trigger styling
   ========================================================================== */

/*
   IMPORTANT: these selectors intentionally match or exceed the specificity of
   the older site.css rules that used #edf4f8 / #eef5fa / #f0f6fa / #f4f8fb.
   A lower-specificity override does not win against those !important rules.
*/
html body.cx-design-system
:is(
    .device-list-action-menu,
    .conexgo-row-action-menu,
    .conexgo-account-document-menu
).show
.dropdown-item,
html body.cx-design-system
.conexgo-pagedlist-table
.dropdown-menu.show
.dropdown-item,
html body.cx-design-system
.account-list-cell-name
.dropdown-menu.show
.dropdown-item {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
}

/* Mouse hover / press: deliberately no visual fill, lift, border or color jump. */
html body.cx-design-system
:is(
    .device-list-action-menu,
    .conexgo-row-action-menu,
    .conexgo-account-document-menu
).show
.dropdown-item:hover,
html body.cx-design-system
:is(
    .device-list-action-menu,
    .conexgo-row-action-menu,
    .conexgo-account-document-menu
).show
.dropdown-item:active,
html body.cx-design-system
.conexgo-pagedlist-table
.dropdown-menu.show
.dropdown-item:hover,
html body.cx-design-system
.conexgo-pagedlist-table
.dropdown-menu.show
.dropdown-item:active,
html body.cx-design-system
.account-list-cell-name
.dropdown-menu.show
.dropdown-item:hover,
html body.cx-design-system
.account-list-cell-name
.dropdown-menu.show
.dropdown-item:active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    color: #294b68 !important;
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

/* Bootstrap can leave :focus on a clicked item. Mouse focus remains visually neutral. */
html body.cx-design-system
:is(
    .device-list-action-menu,
    .conexgo-row-action-menu,
    .conexgo-account-document-menu
).show
.dropdown-item:focus:not(:focus-visible),
html body.cx-design-system
.conexgo-pagedlist-table
.dropdown-menu.show
.dropdown-item:focus:not(:focus-visible),
html body.cx-design-system
.account-list-cell-name
.dropdown-menu.show
.dropdown-item:focus:not(:focus-visible) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    color: #294b68 !important;
    outline: none !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

/* Keep only a quiet keyboard focus cue for accessibility. */
html body.cx-design-system
:is(
    .device-list-action-menu,
    .conexgo-row-action-menu,
    .conexgo-account-document-menu
).show
.dropdown-item:focus-visible,
html body.cx-design-system
.conexgo-pagedlist-table
.dropdown-menu.show
.dropdown-item:focus-visible,
html body.cx-design-system
.account-list-cell-name
.dropdown-menu.show
.dropdown-item:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: rgba(62, 106, 153, .24) !important;
    color: #294b68 !important;
    outline: 1px solid rgba(62, 106, 153, .24) !important;
    outline-offset: -2px !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

/* Kill older decorative hover layers if a theme injects them. */
html body.cx-design-system
:is(
    .device-list-action-menu,
    .conexgo-row-action-menu,
    .conexgo-account-document-menu
).show
.dropdown-item:hover::before,
html body.cx-design-system
:is(
    .device-list-action-menu,
    .conexgo-row-action-menu,
    .conexgo-account-document-menu
).show
.dropdown-item:hover::after,
html body.cx-design-system
.conexgo-pagedlist-table
.dropdown-menu.show
.dropdown-item:hover::before,
html body.cx-design-system
.conexgo-pagedlist-table
.dropdown-menu.show
.dropdown-item:hover::after,
html body.cx-design-system
.account-list-cell-name
.dropdown-menu.show
.dropdown-item:hover::before,
html body.cx-design-system
.account-list-cell-name
.dropdown-menu.show
.dropdown-item:hover::after {
    opacity: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

/* Icons do not change color on mouse hover either. */
html body.cx-design-system
:is(
    .device-list-action-menu,
    .conexgo-row-action-menu,
    .conexgo-account-document-menu
).show
.dropdown-item:hover
> :is(i, span[class*="fa"]),
html body.cx-design-system
.conexgo-pagedlist-table
.dropdown-menu.show
.dropdown-item:hover
> :is(i, span[class*="fa"]),
html body.cx-design-system
.account-list-cell-name
.dropdown-menu.show
.dropdown-item:hover
> :is(i, span[class*="fa"]) {
    color: #5b82a1 !important;
    filter: none !important;
    transform: none !important;
}
/* CONEXGO R18-76.18.5.2 ROW-MENU-HOVER-NEUTRAL END */

/* ========================================================================== */
/* CONEXGO R18-77.5 - OPERATIONS / ALERT / DOCUMENT / CONFIG CONSISTENCY     */
/* ========================================================================== */

/* Alert comments: one readable date heading per day, then text + author/time. */
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .cx-alert-comment-day {
    display: grid !important;
    gap: 7px !important;
    padding: 11px 14px !important;
    border-bottom: 1px solid rgba(205, 169, 55, .28) !important;
}

html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .cx-alert-comment-day:last-child {
    border-bottom: 0 !important;
}

html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .cx-alert-comment-date {
    width: fit-content !important;
    padding: 3px 8px !important;
    border: 1px solid rgba(164, 125, 16, .20) !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,.55) !important;
    color: #775d13 !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: .025em !important;
    line-height: 1.25 !important;
}

html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .cx-alert-comment-entry {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: baseline !important;
    gap: 10px 18px !important;
    min-width: 0 !important;
}

html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .cx-alert-comment-text {
    min-width: 0 !important;
    color: #263f55 !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
}

html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .cx-alert-comment-meta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    color: #687a88 !important;
    font-size: 11.5px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .cx-alert-comment-meta strong {
    color: #315a7d !important;
    font-style: italic !important;
    font-weight: 750 !important;
}

html body.cx-design-system .cx-dialog--alert-answer .alert-answer-comment-card,
html body.cx-design-system .cx-dialog--alert-view .alert-view-comments-section {
    border: 1px solid #dfc35a !important;
    border-radius: 12px !important;
    background: #fff9df !important;
    box-shadow: 0 2px 10px rgba(117, 91, 19, .055) !important;
    overflow: hidden !important;
}

html body.cx-design-system .cx-dialog--alert-answer .alert-answer-comment-header,
html body.cx-design-system .cx-dialog--alert-view .alert-view-comments-toggle {
    min-height: 50px !important;
    padding: 9px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(203, 164, 45, .30) !important;
    background: #fff3b8 !important;
    color: #2c4c6c !important;
    box-shadow: inset 3px 0 0 #d4ac2d !important;
    transform: none !important;
}

html body.cx-design-system .cx-dialog--alert-answer .alert-answer-comment-collapse-inner,
html body.cx-design-system .cx-dialog--alert-answer .alert-answer-comment-history,
html body.cx-design-system .cx-dialog--alert-view :is(.alert-view-comments-collapse-inner,.alert-view-comments-body) {
    background: #fff9df !important;
}

html body.cx-design-system .cx-dialog--alert-answer .alert-answer-comment-editor {
    padding: 12px !important;
    border-top: 1px solid rgba(203, 164, 45, .24) !important;
    background: rgba(255,255,255,.48) !important;
}

html body.cx-design-system :is(.alert-answer-count,.alert-view-count-badge) {
    min-width: 26px !important;
    height: 26px !important;
    padding: 0 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #e94c43 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    box-shadow: 0 2px 5px rgba(158,47,42,.18) !important;
}

@media (max-width: 650px) {
    html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .cx-alert-comment-entry {
        grid-template-columns: minmax(0,1fr) !important;
        gap: 4px !important;
    }
    html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .cx-alert-comment-meta {
        justify-content: flex-start !important;
    }
}

/* Header alert actions: exact colors used by Alert_List. */
html body .conexgo-alert-classic-action.is-answer {
    min-width: 96px !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    gap: 7px !important;
    border: 1px solid #78B842 !important;
    background: #78B842 !important;
    color: #fff !important;
    border-radius: 7px !important;
    font-weight: 750 !important;
}
html body .conexgo-alert-classic-action.is-clear,
html body .conexgo-alert-classic-clear-all {
    min-height: 42px !important;
    padding: 0 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    border: 1px solid #3E6A99 !important;
    background: #3E6A99 !important;
    color: #fff !important;
    border-radius: 7px !important;
    font-weight: 750 !important;
    box-shadow: none !important;
}
html body .conexgo-alert-classic-action.is-answer:is(:hover,:focus-visible) {
    background: #6eaa3b !important;
    border-color: #6eaa3b !important;
    transform: none !important;
}
html body :is(.conexgo-alert-classic-action.is-clear,.conexgo-alert-classic-clear-all):is(:hover,:focus-visible) {
    background: #355f8d !important;
    border-color: #355f8d !important;
    transform: none !important;
}

/* Device row menu: never fall through the footer; scroll inside the popup. */
html body.cx-design-system .device-list-action-menu.show {
    max-height: min(390px, calc(100dvh - 150px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
    border-radius: 10px !important;
}
html body.cx-design-system .device-list-action-menu.show .dropdown-item:hover {
    background: #f7f9fb !important;
    color: #294b68 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Document View: keep the large preview, but make the document identity deliberate. */
html body.cx-design-system .mud-dialog.cx-dialog--document-view .conexgo-document-view-header {
    margin: 2px 0 12px !important;
    padding: 12px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    border: 1px solid #d8e4ec !important;
    border-radius: 10px !important;
    background: #f8fbfd !important;
}
html body.cx-design-system .mud-dialog.cx-dialog--document-view .conexgo-document-view-filemark {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #d2e1eb !important;
    border-radius: 9px !important;
    background: #edf5fa !important;
    color: #386b90 !important;
    font-size: 18px !important;
}
html body.cx-design-system .mud-dialog.cx-dialog--document-view .conexgo-document-view-identity {
    min-width: 0 !important;
}
html body.cx-design-system .mud-dialog.cx-dialog--document-view .conexgo-document-view-eyebrow {
    display: block !important;
    margin-bottom: 2px !important;
    color: #6a8091 !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
}
html body.cx-design-system .mud-dialog.cx-dialog--document-view .conexgo-document-view-title {
    margin: 0 !important;
    color: #234a69 !important;
    font-size: 18px !important;
    font-weight: 760 !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
}
html body.cx-design-system .mud-dialog.cx-dialog--document-view .conexgo-document-view-description {
    margin-top: 3px !important;
    color: #65798a !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
}
html body.cx-design-system .mud-dialog.cx-dialog--document-view .conexgo-document-image-stage {
    height: 100% !important;
    padding: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: auto !important;
    background: #263039 !important;
}
html body.cx-design-system .mud-dialog.cx-dialog--document-view .conexgo-document-image-preview {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    border-radius: 4px !important;
}

/* Account-level documents dedicated to alerts. */
html body .cx-account-alert-documents-section {
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid #dfe8ee !important;
}
html body .cx-alert-documents-manager-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin-bottom: 10px !important;
}
html body .cx-alert-documents-manager-title {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    color: #2d5877 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}
html body .cx-alert-documents-manager-description {
    max-width: 760px !important;
    margin-top: 3px !important;
    color: #6a7e8e !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}
html body .cx-alert-documents-add {
    min-height: 38px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    border: 1px solid #3E6A99 !important;
    border-radius: 8px !important;
    background: #3E6A99 !important;
    color: #fff !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}
html body .cx-alert-documents-manager-list {
    display: grid !important;
    gap: 7px !important;
}
html body .cx-alert-document-manager-row {
    min-height: 56px !important;
    padding: 7px 9px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border: 1px solid #dce6ed !important;
    border-radius: 9px !important;
    background: #fff !important;
}
html body .cx-alert-document-manager-row.is-selected {
    border-color: #a9c8b1 !important;
    background: #f5fbf6 !important;
}
html body .cx-alert-document-selector {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    cursor: pointer !important;
}
html body .cx-alert-document-selector > input { position: absolute !important; opacity: 0 !important; pointer-events: none !important; }
html body .cx-alert-document-check {
    width: 22px !important; height: 22px !important; display:inline-flex !important;align-items:center !important;justify-content:center !important;
    border:1px solid #b8cad6 !important;border-radius:6px !important;background:#fff !important;color:transparent !important;
}
html body .cx-alert-document-manager-row.is-selected .cx-alert-document-check { background:#78B842 !important;border-color:#78B842 !important;color:#fff !important; }
html body .cx-alert-document-file-icon { width:34px !important;height:34px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;border-radius:8px !important;background:#edf4f8 !important;color:#386b90 !important; }
html body .cx-alert-document-copy { min-width:0 !important;display:grid !important;gap:2px !important; }
html body .cx-alert-document-copy strong { color:#294b68 !important;font-size:13px !important;overflow-wrap:anywhere !important; }
html body .cx-alert-document-copy small { color:#708391 !important;font-size:11.5px !important;overflow-wrap:anywhere !important; }
html body .cx-alert-document-row-actions { display:inline-flex !important;gap:5px !important; }
html body .cx-alert-document-row-actions button { width:34px !important;height:34px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;border:1px solid #d5e1e9 !important;border-radius:7px !important;background:#fff !important;color:#3E6A99 !important; }
html body .cx-alert-documents-empty { min-height:70px !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;border:1px dashed #d5e1e9 !important;border-radius:9px !important;background:#fafcfd !important;color:#718492 !important; }

html body .cx-alert-documents-toggle-row { display:inline-flex !important; }
html body .alert-answer-toggle-documents { border-color:#b9d2e4 !important;background:#f3f8fc !important;color:#2d5d7e !important; }
html body .cx-alert-documents-count { min-width:22px !important;height:22px !important;padding:0 6px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;border-radius:999px !important;background:#3E6A99 !important;color:#fff !important;font-size:11px !important;font-weight:800 !important; }
html body .cx-alert-documents-preview-list { margin-top:8px !important;display:grid !important;grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;gap:8px !important; }
html body .cx-alert-document-preview-card { min-width:0 !important;padding:10px !important;display:grid !important;grid-template-columns:38px minmax(0,1fr) auto !important;align-items:center !important;gap:9px !important;border:1px solid #d8e5ed !important;border-radius:9px !important;background:#fff !important;color:#294b68 !important;text-align:left !important;box-shadow:none !important; }
html body .cx-alert-document-preview-card:hover { background:#f8fbfd !important;border-color:#c7d9e5 !important;transform:none !important; }
html body .cx-alert-document-preview-icon { width:38px !important;height:38px !important;display:flex !important;align-items:center !important;justify-content:center !important;border-radius:8px !important;background:#edf5fa !important;color:#386b90 !important; }
html body .cx-alert-document-preview-copy { min-width:0 !important;display:grid !important;gap:2px !important; }
html body .cx-alert-document-preview-copy strong { overflow-wrap:anywhere !important; }
html body .cx-alert-document-preview-copy small { color:#718492 !important;font-size:11px !important;overflow-wrap:anywhere !important; }
html body .cx-alert-document-preview-action { display:inline-flex !important;align-items:center !important;gap:5px !important;color:#3E6A99 !important;font-size:11.5px !important;font-weight:750 !important; }
html body .alert-view-secondary-actions { margin:10px 0 !important; }

/* Device Add/Edit: all selects/fields share one control geometry; read-only is deliberate, not disabled-looking. */
html body.cx-design-system .mud-dialog.cx-r1-device-addedit .cx-r1-form-row > .col-md-9,
html body.cx-design-system .mud-dialog.cx-r1-device-addedit .cx-r1-form-row > [class*="col-"]:last-child {
    min-width: 0 !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-addedit :is(.cx-custom-select-root,.cx-control-field,.cx-control--form,.form-control) {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-addedit :is(.cx-custom-select-trigger.cx-control--form,.form-control:not(textarea),.cx-r1-readonly-value) {
    min-height: 54px !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-addedit .cx-r1-readonly-value,
html body.cx-design-system .cx-standard-form-dialog :is(input.form-control[readonly],textarea.form-control[readonly],.cx-readonly-value) {
    border: 1px solid #cddce6 !important;
    border-left: 3px solid #9bb8cc !important;
    border-radius: 9px !important;
    background: #f5f9fc !important;
    color: #284963 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}
html body .cx-dated-notes-helper { display:block !important;margin-top:5px !important;color:#738694 !important;font-size:11.5px !important;line-height:1.35 !important; }
html body .cx-device-emergency-editor-launch { display:flex !important;justify-content:flex-end !important;margin:0 0 12px !important; }
html body .cx-device-emergency-editor-button { min-height:38px !important;padding:0 12px !important;display:inline-flex !important;align-items:center !important;gap:7px !important;border:1px solid #aac7dc !important;border-radius:8px !important;background:#f3f8fc !important;color:#2d5d7e !important;font-weight:700 !important; }
html body .cx-device-emergency-editor-grid { display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important; }
html body .cx-device-emergency-notes-field { margin-top:12px !important; }
html body .cx-device-emergency-notes-head { display:flex !important;align-items:baseline !important;justify-content:space-between !important;gap:12px !important;margin-bottom:6px !important; }
html body .cx-device-emergency-notes-head span { color:#718492 !important;font-size:11px !important; }

/* Per-day Location Service schedule. */
html body .cx-location-schedule-mode { margin:12px 0 !important;padding:4px !important;display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:4px !important;border:1px solid #d7e3eb !important;border-radius:10px !important;background:#f4f8fb !important; }
html body .cx-location-schedule-mode-button { min-height:42px !important;padding:7px 10px !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:7px !important;border:1px solid transparent !important;border-radius:8px !important;background:transparent !important;color:#5d7487 !important;font-weight:700 !important; }
html body .cx-location-schedule-mode-button.is-selected { border-color:#bdd2e1 !important;background:#fff !important;color:#2d5d7e !important;box-shadow:0 1px 4px rgba(40,72,97,.08) !important; }
html body .cx-location-daily-schedule { display:grid !important;gap:6px !important;margin-top:10px !important; }
html body .cx-location-daily-schedule-head,
html body .cx-location-day-row { display:grid !important;grid-template-columns:minmax(145px,.7fr) minmax(140px,1fr) minmax(140px,1fr) !important;gap:10px !important;align-items:center !important; }
html body .cx-location-daily-schedule-head { padding:0 10px !important;color:#6b7e8d !important;font-size:10.5px !important;font-weight:800 !important;text-transform:uppercase !important;letter-spacing:.04em !important; }
html body .cx-location-day-row { min-height:56px !important;padding:7px 9px !important;border:1px solid #dce6ed !important;border-radius:9px !important;background:#f9fbfc !important; }
html body .cx-location-day-row.is-enabled { background:#fff !important;border-color:#cbdce7 !important; }
html body .cx-location-day-toggle { display:flex !important;align-items:center !important;gap:8px !important;cursor:pointer !important; }
html body .cx-location-day-toggle > input { position:absolute !important;opacity:0 !important;pointer-events:none !important; }
html body .cx-location-day-row:not(.is-enabled) .form-control { background:#f1f4f6 !important;color:#9aa9b4 !important; }

/* Ring tone: audition controls are distinct from selecting/saving a ringtone. */
html body .cx-dialog--ringtone .cx-device-config-choice-card { position:relative !important;padding-right:112px !important; }
html body .cx-ringtone-preview-button { position:absolute !important;right:10px !important;top:50% !important;transform:translateY(-50%) !important;min-height:34px !important;padding:0 10px !important;display:inline-flex !important;align-items:center !important;gap:6px !important;border:1px solid #c8dbe8 !important;border-radius:7px !important;background:#fff !important;color:#356486 !important;font-size:11.5px !important;font-weight:750 !important; }
html body .cx-ringtone-preview-button:hover { background:#edf5fa !important;transform:translateY(-50%) !important; }

/* Notification View: remove the dead vertical space and tighten hierarchy. */
html body .mud-dialog.cx-notification-view-dialog,
html body .mud-dialog.cx-r1-notification-view {
    width: min(760px, calc(100vw - 32px)) !important;
    max-width: min(760px, calc(100vw - 32px)) !important;
    max-height: min(760px, calc(100dvh - 28px)) !important;
}
html body .mud-dialog.cx-notification-view-dialog .mud-dialog-content,
html body .mud-dialog.cx-r1-notification-view .mud-dialog-content { padding:12px 14px !important; }
html body .cx-notification-view-dialog .notification-view-form { width:100% !important;gap:9px !important; }
html body .cx-notification-view-dialog .notification-view-message-box { min-height:84px !important;max-height:210px !important;padding:11px 13px !important; }
html body .cx-notification-view-dialog .notification-view-title-box { min-height:42px !important;padding:9px 12px !important; }
html body .cx-notification-view-dialog .notification-view-priority-card { min-height:52px !important;padding:8px 11px !important; }
html body .cx-notification-view-dialog .cx-r1-section { padding:12px !important; }

/* Usage log. */
html body .cx-usage-log-page { display:grid !important;gap:14px !important; }
html body .cx-usage-log-notice { padding:12px 14px !important;display:flex !important;align-items:flex-start !important;gap:10px !important;border:1px solid #cfe0eb !important;border-radius:10px !important;background:#f5f9fc !important;color:#315a76 !important; }
html body .cx-usage-log-notice > div { display:grid !important;gap:2px !important; }
html body .cx-usage-log-notice span { color:#657b8c !important;font-size:12px !important; }
html body .cx-usage-log-toolbar { padding:10px 12px !important;display:flex !important;align-items:end !important;gap:10px !important;border:1px solid #dde7ed !important;border-radius:10px !important;background:#fff !important; }
html body .cx-usage-log-toolbar label { min-width:230px !important;display:grid !important;gap:5px !important;color:#526b7e !important;font-size:11px !important;font-weight:750 !important; }
html body .cx-usage-log-table-shell { border:1px solid #dce6ed !important;border-radius:10px !important;background:#fff !important;overflow:auto !important; }
html body .cx-usage-log-table { margin:0 !important; }
html body .cx-usage-log-table th { padding:10px 12px !important;background:#eef7f2 !important;color:#294b68 !important;font-size:11px !important;text-transform:uppercase !important;letter-spacing:.025em !important;white-space:nowrap !important; }
html body .cx-usage-log-table td { padding:10px 12px !important;vertical-align:top !important;color:#354f64 !important; }
html body .cx-usage-log-table td:first-child { display:grid !important;gap:2px !important; }
html body .cx-usage-log-table td:first-child small { color:#7b8d9a !important;font-size:10.5px !important; }
html body .cx-usage-session-list { display:grid !important;gap:2px !important;font-size:11.5px !important; }

@media (max-width: 767.98px) {
    html body .cx-device-emergency-editor-grid,
    html body .cx-location-schedule-mode { grid-template-columns:minmax(0,1fr) !important; }
    html body .cx-location-daily-schedule-head { display:none !important; }
    html body .cx-location-day-row { grid-template-columns:minmax(0,1fr) !important;gap:7px !important; }
    html body .cx-alert-documents-manager-head { flex-direction:column !important; }
    html body .cx-alert-documents-add { width:100% !important;justify-content:center !important; }
    html body .cx-alert-document-preview-card { grid-template-columns:36px minmax(0,1fr) !important; }
    html body .cx-alert-document-preview-action { grid-column:2 !important;justify-content:flex-start !important; }
    html body .cx-usage-log-toolbar { align-items:stretch !important;flex-direction:column !important; }
    html body .cx-usage-log-toolbar label { min-width:0 !important;width:100% !important; }
}

/* CONEXGO R18-77.5 END */

/* ==========================================================================
   SOURCE: wwwroot\css\conexgo-reconnect-modal.css
   Preserved in source/cascade order by R18-206.6.
   ========================================================================== */
/* Conexgo — reconnexion proche du modèle Blazor, mais plus propre */

#components-reconnect-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483000;

    display: none;
    align-items: flex-start;
    justify-content: center;

    padding:
        clamp(28px, 7vh, 66px)
        18px
        20px;

    background: rgba(20, 32, 48, 0.20);
    backdrop-filter: blur(1.75px);
    -webkit-backdrop-filter: blur(1.75px);

    opacity: 0;

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-resume-failed {
    display: flex;
    opacity: 1;
}

#components-reconnect-modal.components-reconnect-hide {
    display: none;
    opacity: 0;
}

#components-reconnect-modal .conexgo-reconnect-card {
    width: min(470px, 100%);

    padding: 31px 32px 29px;

    color: #2f3a4d;
    background: rgba(255, 255, 255, 0.985);

    border: 1px solid rgba(44, 76, 108, 0.16);
    border-radius: 11px;

    box-shadow:
        0 14px 36px rgba(17, 31, 48, 0.21),
        0 2px 7px rgba(17, 31, 48, 0.06);

    text-align: center;

    animation: conexgo-reconnect-enter 0.18s ease forwards;
}

#components-reconnect-modal .conexgo-reconnect-visual {
    position: relative;

    width: 66px;
    height: 66px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 22px;
}

#components-reconnect-modal .conexgo-reconnect-spinner {
    position: absolute;
    inset: 0;

    border: 3px solid #e1e6eb;
    border-top-color: #2c4c6c;
    border-right-color: #3d6287;
    border-radius: 50%;

    animation: conexgo-reconnect-spin 0.85s linear infinite;
}

#components-reconnect-modal .conexgo-reconnect-icon {
    width: 43px;
    height: 43px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: #2c4c6c;
    background: #f6f8fa;

    border: 1px solid #e0e6eb;
    border-radius: 50%;

    font-size: 18px;
}

#components-reconnect-modal .conexgo-reconnect-state {
    display: none !important;
}

#components-reconnect-modal.components-reconnect-show:not(
        .components-reconnect-retrying
    ):not(
        .components-reconnect-failed
    ):not(
        .components-reconnect-rejected
    ):not(
        .components-reconnect-paused
    ):not(
        .components-reconnect-resume-failed
    )
    .conexgo-state-initial {
    display: block !important;
}

#components-reconnect-modal.components-reconnect-retrying
    .conexgo-state-retrying {
    display: block !important;
}

#components-reconnect-modal.components-reconnect-failed
    .conexgo-state-failed {
    display: block !important;
}

#components-reconnect-modal.components-reconnect-rejected
    .conexgo-state-rejected {
    display: block !important;
}

#components-reconnect-modal.components-reconnect-paused
    .conexgo-state-paused {
    display: block !important;
}

#components-reconnect-modal.components-reconnect-resume-failed
    .conexgo-state-resume-failed {
    display: block !important;
}

#components-reconnect-modal .conexgo-reconnect-state h2 {
    margin: 0 0 12px;

    color: #2c4c6c;

    font-size: 22px;
    font-weight: 750;
    line-height: 1.3;
}

#components-reconnect-modal .conexgo-reconnect-state p {
    max-width: 390px;

    margin: 0 auto;

    color: #687386;

    font-size: 15px;
    line-height: 1.65;
}

#components-reconnect-modal .conexgo-reconnect-state strong {
    color: #2c4c6c;
    font-weight: 800;
}

#components-reconnect-modal .conexgo-reconnect-attempt {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-top: 20px;
    padding: 7px 13px;

    color: #56677a;
    background: #f4f7f9;

    border: 1px solid #dfe6ec;
    border-radius: 999px;

    font-size: 13px;
}

#components-reconnect-modal .conexgo-reconnect-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;

    margin-top: 27px;
}

#components-reconnect-modal button.conexgo-reconnect-button,
#components-reconnect-modal #components-reconnect-button {
    min-height: 42px;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 9px 17px;

    appearance: none;
    -webkit-appearance: none;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background: #2c4c6c !important;

    border: 1px solid #2c4c6c !important;
    border-radius: 8px !important;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;

    cursor: pointer;

    opacity: 1 !important;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

#components-reconnect-modal button.conexgo-reconnect-button i,
#components-reconnect-modal button.conexgo-reconnect-button span,
#components-reconnect-modal #components-reconnect-button i,
#components-reconnect-modal #components-reconnect-button span {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

#components-reconnect-modal button.conexgo-reconnect-button:hover:not(:disabled),
#components-reconnect-modal #components-reconnect-button:hover:not(:disabled) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background: #3d6287 !important;
    border-color: #3d6287 !important;

    transform: translateY(-1px);

    box-shadow: 0 3px 9px rgba(44, 76, 108, 0.22);
}

#components-reconnect-modal button.conexgo-reconnect-button:disabled,
#components-reconnect-modal #components-reconnect-button:disabled {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    background: #6f8093 !important;
    border-color: #6f8093 !important;

    cursor: wait;
    opacity: 0.82 !important;
}

#components-reconnect-modal button.conexgo-reconnect-button:focus-visible,
#components-reconnect-modal #components-reconnect-button:focus-visible {
    outline: 3px solid rgba(61, 98, 135, 0.25);
    outline-offset: 3px;
}

#components-reconnect-modal button.conexgo-reconnect-button-secondary {
    color: #2c4c6c !important;
    -webkit-text-fill-color: #2c4c6c !important;

    background: #ffffff !important;
    border-color: #cdd6df !important;
}

#components-reconnect-modal button.conexgo-reconnect-button-secondary:hover:not(:disabled) {
    color: #2c4c6c !important;
    -webkit-text-fill-color: #2c4c6c !important;

    background: #f4f6f8 !important;
    border-color: #aebbc9 !important;
}

#components-reconnect-modal.components-reconnect-failed
    .conexgo-reconnect-spinner,
#components-reconnect-modal.components-reconnect-rejected
    .conexgo-reconnect-spinner,
#components-reconnect-modal.components-reconnect-resume-failed
    .conexgo-reconnect-spinner {
    animation: none;
    border-color: rgba(151, 77, 77, 0.19);
}

#components-reconnect-modal.components-reconnect-failed
    .conexgo-reconnect-icon,
#components-reconnect-modal.components-reconnect-rejected
    .conexgo-reconnect-icon,
#components-reconnect-modal.components-reconnect-resume-failed
    .conexgo-reconnect-icon {
    color: #945454;
    background: #fbf6f6;
    border-color: #eedddd;
}

#components-reconnect-modal[data-language="fr"]
    .conexgo-reconnect-en,
#components-reconnect-modal[data-language="en"]
    .conexgo-reconnect-fr {
    display: none !important;
}

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

@keyframes conexgo-reconnect-enter {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 576px) {
    #components-reconnect-modal {
        padding: 16px 13px;
    }

    #components-reconnect-modal .conexgo-reconnect-card {
        padding: 25px 20px 23px;
    }

    #components-reconnect-modal .conexgo-reconnect-visual {
        margin-bottom: 18px;
    }

    #components-reconnect-modal .conexgo-reconnect-state h2 {
        font-size: 20px;
    }

    #components-reconnect-modal .conexgo-reconnect-state p {
        font-size: 14px;
    }

    #components-reconnect-modal .conexgo-reconnect-actions {
        flex-direction: column;
        margin-top: 22px;
    }

    #components-reconnect-modal button.conexgo-reconnect-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    #components-reconnect-modal,
    #components-reconnect-modal .conexgo-reconnect-card,
    #components-reconnect-modal .conexgo-reconnect-spinner,
    #components-reconnect-modal .conexgo-reconnect-button {
        animation: none;
        transition: none;
    }
}

/* ==========================================================================
   SOURCE: wwwroot\css\conexgo-r18-76-17-overrides.css
   Preserved in source/cascade order by R18-206.6.
   ========================================================================== */
/* CONEXGO R18-76.17
   Live device + dashboard density + no-lift hover + alert attention + emergency info.
   Loaded after authenticated site.css.
*/

/* ============================================================
   1. GLOBAL HOVER CONTRACT — NEVER MOVE CONTROLS VERTICALLY
   Keep tooltips, color, border and background hover feedback.
   ============================================================ */
html body.cx-design-system a:hover,
html body.cx-design-system button:hover,
html body.cx-design-system .btn:hover,
html body.cx-design-system .nav-link:hover,
html body.cx-design-system .dropdown-item:hover,
html body.cx-design-system [role="button"]:hover,
html body.cx-design-system .card:hover,
html body.cx-design-system .cx-page-action:hover,
html body.cx-design-system .device-list-name-button:hover,
html body.cx-design-system .device-list-action-toggle:hover,
html body.cx-design-system .conexgo-dashboard-card-action:hover,
html body.cx-design-system .conexgo-notification-trigger:hover,
html body.cx-design-system .conexgo-mobile-quick-nav a:hover,
html body.cx-design-system .conexgo-device-overview-metric:hover,
html body.cx-design-system .conexgo-dashboard-active-user:hover,
html body.cx-design-system .conexgo-dashboard-config-action:hover,
html body.cx-design-system .conexgo-dashboard-quick-action:hover {
    transform: none !important;
    translate: none !important;
    scale: 1 !important;
}

html body.cx-design-system a,
html body.cx-design-system button,
html body.cx-design-system .btn,
html body.cx-design-system .nav-link,
html body.cx-design-system .dropdown-item,
html body.cx-design-system [role="button"],
html body.cx-design-system .card,
html body.cx-design-system .cx-page-action {
    transform-origin: center center !important;
}

/* ============================================================
   2. DASHBOARD — TWO-COLUMN DENSE LAYOUT + MOBILE SAFETY
   The JS adds .cx-r1817-masonry-ready only after coordinates
   have been calculated, so CSS has a safe grid fallback.
   ============================================================ */
#conexgoDashboardSmartGrid.conexgo-dashboard-smart-grid {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: dense !important;
    grid-auto-rows: auto !important;
    align-items: start !important;
    gap: 16px !important;
    position: relative !important;
    overflow: visible !important;
}

#conexgoDashboardSmartGrid.conexgo-dashboard-smart-grid:has(> .conexgo-dashboard-smart-item:only-child) {
    grid-template-columns: minmax(0, 1fr) !important;
}

#conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    transform: none !important;
}

#conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item > .card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    position: relative !important;
    transform: none !important;
}

@media (min-width: 1200px) {
    #conexgoDashboardSmartGrid.cx-r1817-masonry-ready {
        display: block !important;
        min-height: 1px !important;
    }

    #conexgoDashboardSmartGrid.cx-r1817-masonry-ready > .conexgo-dashboard-smart-item {
        position: absolute !important;
        visibility: visible !important;
        transition: none !important;
        will-change: left, top, width;
    }
}

@media (max-width: 1199.98px) {
    #conexgoDashboardSmartGrid.conexgo-dashboard-smart-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        height: auto !important;
        min-height: 0 !important;
        gap: 12px !important;
    }

    #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        height: auto !important;
        visibility: visible !important;
    }

    #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item > .card {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Reliable explicit dashboard resize affordance. */
.conexgo-dashboard-resizable-card {
    position: relative !important;
    resize: none !important;
}

.cx-dashboard-resize-handle-r1817 {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 22px;
    height: 22px;
    z-index: 12;
    display: grid;
    place-items: center;
    border: 1px solid #c7d6e4;
    border-radius: 7px;
    background: rgba(248, 251, 253, .96);
    color: #426987;
    cursor: ns-resize;
    touch-action: none;
    user-select: none;
    box-shadow: 0 2px 6px rgba(31, 62, 89, .08);
}

.cx-dashboard-resize-handle-r1817::before {
    content: "";
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: .72;
}

.cx-dashboard-resize-handle-r1817:hover,
.cx-dashboard-resize-handle-r1817:focus-visible {
    transform: none !important;
    background: #eef5fa;
    border-color: #8eabc2;
    outline: none;
}

.conexgo-dashboard-minimized-card > .cx-dashboard-resize-handle-r1817 {
    display: none !important;
}

@media (max-width: 1199.98px) {
    .cx-dashboard-resize-handle-r1817 {
        display: none !important;
    }
}

/* ============================================================
   3. ALERT ANSWER — STRONG, TEMPORARY ATTENTION CUE
   ============================================================ */
.alert-answer-comment-card.is-action-required,
.alert-answer-comment-card:has(textarea:placeholder-shown) {
    border-color: #d49a00 !important;
    border-width: 2px !important;
    background: #ffefad !important;
    box-shadow: 0 0 0 3px rgba(212, 154, 0, .14) !important;
    animation: cx-alert-answer-attention-r1817 1s ease-in-out 6;
}

.alert-answer-comment-card.is-action-required .alert-answer-comment-title,
.alert-answer-comment-card.is-action-required .alert-answer-next-action,
.alert-answer-comment-card:has(textarea:placeholder-shown) .alert-answer-comment-title {
    color: #684800 !important;
    font-weight: 900 !important;
}

.alert-answer-comment-card textarea::placeholder {
    color: #7b5b12 !important;
    opacity: 1 !important;
    font-weight: 700;
}

@keyframes cx-alert-answer-attention-r1817 {
    0%, 100% {
        background-color: #ffefad;
        box-shadow: 0 0 0 3px rgba(212, 154, 0, .14);
    }
    50% {
        background-color: #ffd95b;
        box-shadow: 0 0 0 6px rgba(193, 126, 0, .22);
    }
}

/* ============================================================
   4. EMERGENCY SERVICE INFO MODAL
   ============================================================ */
.cx-dialog--device-emergency-info .cx-emergency-info-section {
    width: 100% !important;
    max-width: none !important;
}

.cx-emergency-info-loading {
    min-height: 150px;
    display: grid;
    place-items: center;
}

.cx-emergency-info-device {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 14px;
    padding: 12px 14px;
    border: 1px solid #d8e3ec;
    border-radius: 10px;
    background: #f7fafc;
    color: #2c4c6c;
}

.cx-emergency-info-device > i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #fdecec;
    color: #b64d57;
}

.cx-emergency-info-device strong,
.cx-emergency-info-device span {
    display: block;
}

.cx-emergency-info-device span {
    margin-top: 2px;
    color: #6a7d8f;
    font-size: .82rem;
}

.cx-emergency-info-readonly {
    min-height: 150px;
    padding: 16px;
    border: 1px solid #cddbe7;
    border-left: 4px solid #b64d57;
    border-radius: 10px;
    background: #f8fbfd;
}

.cx-emergency-info-content {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: #344f68;
    line-height: 1.55;
}

.cx-emergency-info-empty {
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #718397;
    text-align: center;
}

/* ============================================================
   5. GUARANTEED IN-APP DUE NOTIFICATION MESSAGE
   ============================================================ */
#cx-r1817-notification-toast-host {
    position: fixed;
    top: 82px;
    right: 18px;
    z-index: 200000;
    width: min(390px, calc(100vw - 28px));
    display: grid;
    gap: 10px;
    pointer-events: none;
}

.cx-r1817-notification-toast {
    pointer-events: auto;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 30px;
    align-items: start;
    gap: 10px;
    padding: 13px 12px 13px 13px;
    border: 1px solid #cbd9e5;
    border-left: 4px solid #3e6a99;
    border-radius: 12px;
    background: rgba(255, 255, 255, .985);
    color: #263f57;
    box-shadow: 0 16px 38px rgba(28, 51, 73, .18);
    animation: cx-r1817-toast-in .18s ease-out both;
}

.cx-r1817-notification-toast.is-high {
    border-left-color: #bc4050;
}

.cx-r1817-notification-toast.is-medium {
    border-left-color: #c58a1d;
}

.cx-r1817-notification-toast__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #edf4f9;
    color: #3e6a99;
}

.cx-r1817-notification-toast.is-high .cx-r1817-notification-toast__icon {
    background: #fdecef;
    color: #b23c4c;
}

.cx-r1817-notification-toast.is-medium .cx-r1817-notification-toast__icon {
    background: #fff4dc;
    color: #a97010;
}

.cx-r1817-notification-toast__title {
    margin: 0 0 3px;
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.3;
}

.cx-r1817-notification-toast__message {
    margin: 0;
    color: #5d7184;
    font-size: .83rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.cx-r1817-notification-toast__close {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #677c8f;
    display: grid;
    place-items: center;
}

.cx-r1817-notification-toast__close:hover {
    transform: none !important;
    background: #edf3f7;
}

@keyframes cx-r1817-toast-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 575.98px) {
    #cx-r1817-notification-toast-host {
        top: 66px;
        right: 10px;
        width: calc(100vw - 20px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .alert-answer-comment-card.is-action-required,
    .alert-answer-comment-card:has(textarea:placeholder-shown),
    .cx-r1817-notification-toast {
        animation: none !important;
    }
}


/* ============================================================
   CONEXGO R18-76.18 — SCROLL / SELECTION / MAP VISIBILITY
   ============================================================ */

/* Notification and alert queues share ONE scrollbar contract. */
.conexgo-notification-list,
.conexgo-alert-list--classic,
.message-menu-scroll {
    scrollbar-width: auto !important;
    scrollbar-color: #9eacb9 #f4f7f9 !important;
    scrollbar-gutter: stable !important;
    overscroll-behavior: contain !important;
}

.conexgo-notification-list::-webkit-scrollbar,
.conexgo-alert-list--classic::-webkit-scrollbar,
.message-menu-scroll::-webkit-scrollbar {
    width: 11px !important;
    height: 11px !important;
}

.conexgo-notification-list::-webkit-scrollbar-track,
.conexgo-alert-list--classic::-webkit-scrollbar-track,
.message-menu-scroll::-webkit-scrollbar-track {
    background: #f4f7f9 !important;
    border-left: 1px solid #e2e8ee !important;
}

.conexgo-notification-list::-webkit-scrollbar-thumb,
.conexgo-alert-list--classic::-webkit-scrollbar-thumb,
.message-menu-scroll::-webkit-scrollbar-thumb {
    min-height: 44px;
    border: 2px solid #f4f7f9 !important;
    border-radius: 999px !important;
    background: #9eacb9 !important;
}

.conexgo-notification-list::-webkit-scrollbar-thumb:hover,
.conexgo-alert-list--classic::-webkit-scrollbar-thumb:hover,
.message-menu-scroll::-webkit-scrollbar-thumb:hover {
    background: #7f909f !important;
}

/* Group/device map selection: calm Conexgo blue instead of highlighter yellow. */
tr.cx-map-row-selected > td,
.cx-map-row-selected > td,
.cx-map-row-selected {
    background: #e4f0f7 !important;
    color: #203f5b !important;
}

tr.cx-map-row-selected > td:first-child,
.cx-map-row-selected > td:first-child {
    box-shadow: inset 4px 0 0 #3e6a99 !important;
}

tr.cx-map-row-selected:hover > td,
.cx-map-row-selected:hover > td,
.cx-map-row-selected:hover {
    background: #d9e9f3 !important;
}

/* Alert_Answer emergency controls are operational actions: make them visible. */
.cx-dialog--alert-answer .alert-answer-action-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin: 16px 0 12px !important;
}

.cx-dialog--alert-answer .alert-answer-toggle {
    min-width: 190px !important;
    min-height: 46px !important;
    padding: 10px 17px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-width: 1px !important;
    border-radius: 9px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    box-shadow: 0 2px 5px rgba(31, 59, 82, .06) !important;
    transform: none !important;
}

.cx-dialog--alert-answer .alert-answer-toggle i {
    font-size: 15px !important;
}

.cx-dialog--alert-answer .alert-answer-toggle-danger {
    border-color: #e6a8ad !important;
    background: #fff1f2 !important;
    color: #a9323d !important;
}

.cx-dialog--alert-answer .alert-answer-toggle-danger:hover,
.cx-dialog--alert-answer .alert-answer-toggle-danger:focus-visible {
    border-color: #d88790 !important;
    background: #fbe5e7 !important;
    color: #922b35 !important;
    transform: none !important;
}

.cx-dialog--alert-answer .alert-answer-toggle-danger.active {
    border-color: #a93743 !important;
    background: #b8424e !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(184, 66, 78, .13) !important;
}

.cx-dialog--alert-answer .alert-answer-toggle-info {
    border-color: #a9c5da !important;
    background: #eef6fb !important;
    color: #294f70 !important;
}

.cx-dialog--alert-answer .alert-answer-toggle-info:hover,
.cx-dialog--alert-answer .alert-answer-toggle-info:focus-visible {
    border-color: #83acc9 !important;
    background: #e2f0f8 !important;
    color: #234661 !important;
    transform: none !important;
}

.cx-dialog--alert-answer .alert-answer-toggle-info.active {
    border-color: #315a7b !important;
    background: #315a7b !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(49, 90, 123, .13) !important;
}

/* Map canvases must become true block surfaces once Google owns the DOM.
   Loading/error/empty states stay centered and readable. */
.alert-answer-map-wrap,
.alert-view-map-wrap,
.device-map-canvas-shell,
.group-map-wrap,
.cx-map-wrap {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

#alert-answer-map-canvas,
.alert-answer-map-canvas,
.alert-view-map-canvas,
.device-map-canvas-shell #map-canvas,
.group-map-wrap #map-canvas,
.cx-map-wrap #map-canvas {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 340px !important;
    overflow: hidden !important;
    background: #f4f7f9 !important;
}

#alert-answer-map-canvas[data-conexgo-map-state="loading"],
#alert-answer-map-canvas[data-conexgo-map-state="empty"],
#alert-answer-map-canvas[data-conexgo-map-state="error"],
.alert-view-map-canvas[data-conexgo-map-state="loading"],
.alert-view-map-canvas[data-conexgo-map-state="empty"],
.alert-view-map-canvas[data-conexgo-map-state="error"],
#map-canvas[data-conexgo-map-state="loading"],
#map-canvas[data-conexgo-map-state="empty"],
#map-canvas[data-conexgo-map-state="error"] {
    display: grid !important;
    place-items: center !important;
    padding: 24px !important;
    color: #687b8e !important;
    text-align: center !important;
}

#alert-answer-map-canvas[data-conexgo-map-state="error"],
.alert-view-map-canvas[data-conexgo-map-state="error"],
#map-canvas[data-conexgo-map-state="error"] {
    color: #a33c46 !important;
    background: #fff6f7 !important;
}

#alert-answer-map-canvas[data-conexgo-map-state="ready"],
.alert-view-map-canvas[data-conexgo-map-state="ready"],
#map-canvas[data-conexgo-map-state="ready"] {
    display: block !important;
    padding: 0 !important;
    text-align: initial !important;
    background: #eef3f7 !important;
}

#alert-answer-map-canvas .gm-style,
.alert-view-map-canvas .gm-style,
#map-canvas .gm-style {
    width: 100% !important;
    height: 100% !important;
}

/* Map/list split views must be allowed to shrink instead of forcing the map
   outside the visible content area. This is intentionally structural only. */
.row:has(> [class*="col-"] #map-canvas) > [class*="col-"],
.row:has(> [class*="col-"] .group-map-wrap) > [class*="col-"] {
    min-width: 0 !important;
}

.row:has(> [class*="col-"] #map-canvas) .table-responsive,
.row:has(> [class*="col-"] .group-map-wrap) .table-responsive {
    max-width: 100% !important;
}

@media (max-width: 1199.98px) {
    .row:has(> [class*="col-"] #map-canvas) > [class*="col-"],
    .row:has(> [class*="col-"] .group-map-wrap) > [class*="col-"] {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 575.98px) {
    .cx-dialog--alert-answer .alert-answer-action-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .cx-dialog--alert-answer .alert-answer-toggle {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 48px !important;
    }

    #alert-answer-map-canvas,
    .alert-answer-map-canvas,
    .alert-view-map-canvas,
    .device-map-canvas-shell #map-canvas,
    .group-map-wrap #map-canvas,
    .cx-map-wrap #map-canvas {
        min-height: 300px !important;
    }
}

/* CONEXGO R18-76.18 END */

/* CONEXGO R18-76.18.3 SAFE MAP BASELINE HANDOFF */