/*
* Laxson Solutions Development Team
*
* Description:
* Defines responsive layout, navigation, table, dialog, and mobile behavior for the Conexgo
* UI.
* */
/* Historical source boundaries are retained for reviewability. */
/* --------------------------------------------------------------------------
1) ROW-ACTION POPUP MENUS
A simple flat hover is intentional. No pseudo-layer, no translate/lift,
no gradient and no shape/diagonal animation.
-------------------------------------------------------------------------- */
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,
html body.cx-design-system
.table-responsive
.dropdown-menu.show
.dropdown-item {
background-image: none !important;
transform: none !important;
translate: none !important;
scale: 1 !important;
filter: none !important;
box-shadow: none !important;
transition:
background-color 90ms ease-out,
color 90ms ease-out !important;
}
/* Mouse hover: subtle and stable. */
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
.conexgo-pagedlist-table
.dropdown-menu.show
.dropdown-item:hover,
html body.cx-design-system
.account-list-cell-name
.dropdown-menu.show
.dropdown-item:hover,
html body.cx-design-system
.table-responsive
.dropdown-menu.show
.dropdown-item:hover {
background: #f1f6fa !important;
background-color: #f1f6fa !important;
background-image: none !important;
border-color: transparent !important;
color: #294b68 !important;
transform: none !important;
translate: none !important;
scale: 1 !important;
filter: none !important;
box-shadow: none !important;
}
/* Click / mouse focus remains stable as well. */
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:active,
html body.cx-design-system
.account-list-cell-name
.dropdown-menu.show
.dropdown-item:active,
html body.cx-design-system
.table-responsive
.dropdown-menu.show
.dropdown-item:active,
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),
html body.cx-design-system
.table-responsive
.dropdown-menu.show
.dropdown-item:focus:not(:focus-visible) {
background: #f1f6fa !important;
background-color: #f1f6fa !important;
background-image: none !important;
border-color: transparent !important;
color: #294b68 !important;
outline: none !important;
transform: none !important;
translate: none !important;
scale: 1 !important;
filter: none !important;
box-shadow: none !important;
}
/* Kill legacy decorative layers responsible for the strange diagonal effect. */
html body.cx-design-system
:is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu
).show
.dropdown-item::before,
html body.cx-design-system
:is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu
).show
.dropdown-item::after,
html body.cx-design-system
.conexgo-pagedlist-table
.dropdown-menu.show
.dropdown-item::before,
html body.cx-design-system
.conexgo-pagedlist-table
.dropdown-menu.show
.dropdown-item::after,
html body.cx-design-system
.account-list-cell-name
.dropdown-menu.show
.dropdown-item::before,
html body.cx-design-system
.account-list-cell-name
.dropdown-menu.show
.dropdown-item::after,
html body.cx-design-system
.table-responsive
.dropdown-menu.show
.dropdown-item::before,
html body.cx-design-system
.table-responsive
.dropdown-menu.show
.dropdown-item::after {
content: none !important;
display: none !important;
opacity: 0 !important;
background: transparent !important;
background-image: none !important;
transform: none !important;
translate: none !important;
filter: none !important;
box-shadow: none !important;
}
/* Keyboard accessibility stays visible but restrained. */
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,
html body.cx-design-system
.table-responsive
.dropdown-menu.show
.dropdown-item:focus-visible {
background: #f1f6fa !important;
background-image: none !important;
color: #294b68 !important;
outline: 1px solid rgba(62, 106, 153, .28) !important;
outline-offset: -2px !important;
transform: none !important;
filter: none !important;
box-shadow: none !important;
}
@media (min-width: 1200px) {
html body.cx-design-system
#conexgoDashboardSmartGrid.conexgo-dashboard-smart-grid,
html body.cx-design-system
#conexgoDashboardSmartGrid.conexgo-dashboard-smart-grid.cx-r1817-masonry-ready,
html body.cx-design-system
#conexgoDashboardSmartGrid.conexgo-dashboard-content-grid.cx-r1817-masonry-ready {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-auto-rows: 8px !important;
grid-auto-flow: dense !important;
gap: 16px !important;
align-items: start !important;
align-content: start !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
position: relative !important;
overflow: visible !important;
column-count: initial !important;
columns: auto !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid.conexgo-dashboard-smart-grid
> .conexgo-dashboard-smart-item,
html body.cx-design-system
#conexgoDashboardSmartGrid.conexgo-dashboard-smart-grid.cx-r1817-masonry-ready
> .conexgo-dashboard-smart-item,
html body.cx-design-system
#conexgoDashboardSmartGrid.conexgo-dashboard-content-grid.cx-r1817-masonry-ready
> .conexgo-dashboard-smart-item {
display: block !important;
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
inset: auto !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
visibility: visible !important;
transform: none !important;
translate: none !important;
transition: none !important;
will-change: auto !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
> .conexgo-dashboard-smart-item
> .card {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
transform: none !important;
translate: none !important;
}
/* One real DOM card may use the complete row. The JS also handles the
one-visible-card case when role/data conditions hide siblings. */
html body.cx-design-system
#conexgoDashboardSmartGrid
> .conexgo-dashboard-smart-item:only-child {
grid-column: 1 / -1 !important;
}
}
@media (max-width: 1199.98px) {
html body.cx-design-system
#conexgoDashboardSmartGrid.conexgo-dashboard-smart-grid,
html body.cx-design-system
#conexgoDashboardSmartGrid.conexgo-dashboard-smart-grid.cx-r1817-masonry-ready,
html body.cx-design-system
#conexgoDashboardSmartGrid.conexgo-dashboard-content-grid.cx-r1817-masonry-ready {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-auto-rows: auto !important;
grid-auto-flow: row !important;
gap: 12px !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
position: relative !important;
overflow: visible !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
> .conexgo-dashboard-smart-item {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
inset: auto !important;
grid-column: 1 !important;
grid-row: auto !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
margin: 0 !important;
transform: none !important;
translate: none !important;
transition: none !important;
}
}
/* Avoid huge stale white zones after a card is collapsed/hidden. */
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) {
min-height: 0 !important;
height: auto !important;
}
/* Card shells should never stretch just because a neighboring card is taller. */
html body.cx-design-system
#conexgoDashboardSmartGrid
> .conexgo-dashboard-smart-item
> .conexgo-dashboard-resizable-card {
align-self: start !important;
}
/* --------------------------------------------------------------------------
3) COMPACT DASHBOARD REFLOW FEEDBACK
No animation on the card geometry itself. This prevents the visual "jump"
when collapsing/expanding or when data arrives after render.
-------------------------------------------------------------------------- */
html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-smart-item,
html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-resizable-card {
transition-property:
background-color,
border-color,
box-shadow,
color,
opacity !important;
}
/* 1) Header notification count: same geometry as AlertQueue.
Semantic notification tone remains intact; only the bubble contract is unified. */
html body.cx-design-system
:is(
.conexgo-notification-trigger .conexgo-notification-badge,
.conexgo-alert-trigger .alertqueue-badge
) {
position: absolute !important;
top: -9px !important;
right: -9px !important;
min-width: 24px !important;
height: 24px !important;
padding: 0 6px !important;
border: 0 !important;
border-radius: 999px !important;
display: inline-grid !important;
place-items: center !important;
font-size: 11px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
box-shadow: 0 0 0 2px #fff !important;
transform: none !important;
z-index: 8 !important;
}
/* 2) Dashboard alert rows become real interactive destinations. */
html body.cx-design-system
.conexgo-dashboard-latest-item--interactive {
cursor: pointer !important;
border-radius: 7px !important;
transition:
background-color 100ms ease-out,
box-shadow 100ms ease-out !important;
}
html body.cx-design-system
.conexgo-dashboard-latest-item--interactive:hover {
background: #f1f6fa !important;
box-shadow: inset 3px 0 0 rgba(62, 106, 153, .34) !important;
}
html body.cx-design-system
.conexgo-dashboard-latest-item--interactive:focus-visible {
outline: 2px solid rgba(62, 106, 153, .45) !important;
outline-offset: -2px !important;
background: #f1f6fa !important;
}
/* 3) Resize handles: keep the functionality, remove the permanent little
floating squares visible between neighboring cards. */
html body.cx-design-system
#conexgoDashboardSmartGrid
.cx-dashboard-resize-handle-r1817 {
width: 17px !important;
height: 17px !important;
right: 6px !important;
bottom: 6px !important;
border-radius: 5px !important;
opacity: 0 !important;
pointer-events: none !important;
box-shadow: 0 1px 3px rgba(31, 62, 89, .08) !important;
transition:
opacity 100ms ease-out,
background-color 100ms ease-out,
border-color 100ms ease-out !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-resizable-card:hover
> .cx-dashboard-resize-handle-r1817,
html body.cx-design-system
#conexgoDashboardSmartGrid
.cx-dashboard-resize-handle-r1817:focus-visible,
html body.cx-design-system
#conexgoDashboardSmartGrid
.cx-dashboard-resize-handle-r1817:active {
opacity: .74 !important;
pointer-events: auto !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
.cx-dashboard-resize-handle-r1817:hover,
html body.cx-design-system
#conexgoDashboardSmartGrid
.cx-dashboard-resize-handle-r1817:focus-visible {
opacity: 1 !important;
background: #edf4f8 !important;
border-color: #93adc1 !important;
transform: none !important;
}
/* Keep a small invisible hit area available at the card bottom-right.
The handle becomes visible as soon as the card itself is hovered. */
html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-resizable-card:hover
> .cx-dashboard-resize-handle-r1817 {
pointer-events: auto !important;
}
/* 4) Alert Answer emergency buttons: compact but still easy to hit. */
html body.cx-design-system
.cx-dialog--alert-answer
.alert-answer-action-row {
gap: 9px !important;
margin: 12px 0 10px !important;
}
html body.cx-design-system
.cx-dialog--alert-answer
.alert-answer-toggle {
min-width: 0 !important;
min-height: 38px !important;
padding: 7px 12px !important;
border-radius: 8px !important;
gap: 7px !important;
font-size: 13px !important;
font-weight: 750 !important;
line-height: 1.15 !important;
box-shadow: 0 1px 3px rgba(31, 59, 82, .05) !important;
}
html body.cx-design-system
.cx-dialog--alert-answer
.alert-answer-toggle i {
font-size: 13px !important;
}
html body.cx-design-system
.cx-dialog--alert-answer
.alert-answer-toggle.has-data {
position: relative !important;
overflow: visible !important;
}
html body.cx-design-system
.cx-dialog--alert-answer
.alert-answer-toggle.has-data::after {
content: "";
position: absolute;
top: -5px;
right: -5px;
width: 11px;
height: 11px;
border: 2px solid #fff;
border-radius: 999px;
box-shadow: 0 1px 4px rgba(25, 54, 78, .18);
pointer-events: none;
}
html body.cx-design-system
.cx-dialog--alert-answer
.alert-answer-toggle-danger.has-data::after {
background: #d94b55;
}
html body.cx-design-system
.cx-dialog--alert-answer
.alert-answer-toggle-info.has-data::after {
background: #3e6a99;
}
@media (max-width: 575.98px) {
html body.cx-design-system
.cx-dialog--alert-answer
.alert-answer-toggle {
min-height: 40px !important;
padding: 8px 11px !important;
}
}
/* 6) Alert maps are collapsible in View and Answer. */
html body.cx-design-system
:is(.alert-answer-map-wrap, .alert-view-map-wrap) {
border: 1px solid #c9d8e5 !important;
border-radius: 9px !important;
overflow: hidden !important;
background: #fff !important;
}
html body.cx-design-system
:is(.alert-answer-map-toolbar, .alert-view-map-toolbar) {
min-height: 48px !important;
padding: 9px 12px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
background: #fbfcfd !important;
border-bottom: 1px solid #e1e8ee !important;
}
html body.cx-design-system
:is(.alert-answer-map-wrap, .alert-view-map-wrap).is-collapsed
:is(.alert-answer-map-toolbar, .alert-view-map-toolbar) {
border-bottom-color: transparent !important;
}
html body.cx-design-system
:is(.alert-answer-map-toggle, .alert-view-map-toggle) {
width: 38px !important;
height: 38px !important;
padding: 0 !important;
border: 1px solid #bfd0df !important;
border-radius: 8px !important;
background: #f4f8fb !important;
color: #315a7b !important;
display: inline-grid !important;
place-items: center !important;
flex: 0 0 auto !important;
box-shadow: none !important;
}
html body.cx-design-system
:is(.alert-answer-map-toggle, .alert-view-map-toggle):hover {
background: #eaf2f7 !important;
border-color: #9fb9cc !important;
transform: none !important;
}
html body.cx-design-system
:is(.alert-answer-map-toggle, .alert-view-map-toggle) i {
transition: transform .30s cubic-bezier(.22, 1, .36, 1) !important;
}
html body.cx-design-system
:is(.alert-answer-map-toggle, .alert-view-map-toggle) i.is-expanded {
transform: rotate(180deg) !important;
}
html body.cx-design-system
.alert-view-map-actions {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
html body.cx-design-system
:is(.alert-answer-map-empty, .alert-view-map-empty) {
min-height: 92px !important;
padding: 18px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 9px !important;
color: #6a7d8f !important;
background: #f6f8fa !important;
font-size: 14px !important;
text-align: center !important;
}
html body.cx-design-system
:is(.alert-answer-map-empty, .alert-view-map-empty) i {
color: #6687a1 !important;
}
html body.cx-design-system
.cx-dialog--alert-answer
.alert-answer-map-canvas {
min-height: 320px !important;
height: 320px !important;
}
html body.cx-design-system
.cx-dialog--alert-view
.alert-view-map-canvas {
min-height: 320px !important;
height: 320px !important;
}
@media (max-width: 575.98px) {
html body.cx-design-system
:is(
.cx-dialog--alert-answer .alert-answer-map-canvas,
.cx-dialog--alert-view .alert-view-map-canvas
) {
min-height: 250px !important;
height: 250px !important;
}
html body.cx-design-system
:is(.alert-answer-map-empty, .alert-view-map-empty) {
min-height: 76px !important;
padding: 14px !important;
}
}
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-classic-action.is-answer {
min-width: 82px !important;
height: 38px !important;
padding: 0 12px !important;
border: 1px solid #63b536 !important;
border-radius: 8px !important;
background: #75c943 !important;
color: #ffffff !important;
box-shadow: 0 3px 8px rgba(67, 133, 39, .16) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
font-size: 13px !important;
font-weight: 750 !important;
line-height: 1 !important;
transform: none !important;
transition:
background-color 140ms ease,
border-color 140ms ease,
box-shadow 140ms ease !important;
}
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-classic-action.is-answer:hover,
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-classic-action.is-answer:focus-visible {
background: #66b93a !important;
border-color: #58a832 !important;
box-shadow: 0 4px 10px rgba(67, 133, 39, .20) !important;
color: #ffffff !important;
transform: none !important;
outline: none !important;
}
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-classic-action.is-answer:active {
background: #5eae35 !important;
box-shadow: 0 2px 5px rgba(67, 133, 39, .16) !important;
transform: none !important;
}
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-classic-action.is-answer i {
font-size: 13px !important;
flex: 0 0 auto !important;
}
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-classic-action-label {
display: inline-block;
white-space: nowrap;
}
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-card {
scroll-margin-block: 10px;
}
@media (max-width: 520px) {
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-classic-action.is-answer {
width: 40px !important;
min-width: 40px !important;
height: 36px !important;
padding: 0 !important;
}
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-classic-action-label {
display: none !important;
}
}
@media (prefers-reduced-motion: reduce) {
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-classic-action.is-answer {
transition: none !important;
}
}
/* Row action menus: fixed geometry and intentionally simple hover.
No pseudo-wave, lift, transform, animation, or delayed relocation. */
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu),
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu).show {
animation: none !important;
transition: none !important;
transform: none !important;
translate: none !important;
will-change: auto !important;
max-height: min(64vh, 560px) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
}
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu) .dropdown-item,
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu) .dropdown-item > *,
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu) .dropdown-item::before,
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu) .dropdown-item::after {
animation: none !important;
transform: none !important;
translate: none !important;
scale: 1 !important;
filter: none !important;
text-shadow: none !important;
}
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu) .dropdown-item {
transition: background-color 90ms ease-out, color 90ms ease-out !important;
}
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu) .dropdown-item::before,
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu) .dropdown-item::after {
content: none !important;
display: none !important;
}
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu) .dropdown-item:hover,
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu) .dropdown-item:focus-visible,
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu) .dropdown-item:active {
background: #f1f6fa !important;
color: #294b68 !important;
box-shadow: none !important;
}
/* Dashboard: one layout engine only. Auto rows are a safe fallback even if JS
fails; cards can never be squeezed into 8px tracks and overlap each other. */
@media (min-width: 1200px) {
html body.cx-design-system #conexgoDashboardSmartGrid.conexgo-dashboard-smart-grid,
html body.cx-design-system #conexgoDashboardSmartGrid.conexgo-dashboard-smart-grid.cx-r1817-masonry-ready,
html body.cx-design-system #conexgoDashboardSmartGrid.conexgo-dashboard-content-grid.cx-r1817-masonry-ready {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-auto-rows: auto !important;
grid-auto-flow: row !important;
gap: 16px !important;
align-items: start !important;
align-content: start !important;
height: auto !important;
min-height: 0 !important;
position: relative !important;
overflow: visible !important;
}
html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item {
display: block !important;
position: relative !important;
inset: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
margin: 0 !important;
grid-row: auto !important;
grid-column: auto !important;
visibility: visible !important;
transform: none !important;
translate: none !important;
transition: none !important;
will-change: auto !important;
}
html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item:only-child {
grid-column: 1 / -1 !important;
}
}
@media (max-width: 1199.98px) {
html body.cx-design-system #conexgoDashboardSmartGrid.conexgo-dashboard-smart-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-auto-rows: auto !important;
grid-auto-flow: row !important;
gap: 12px !important;
height: auto !important;
}
}
/* Immediate collapse: no temporary 48px "closing" wave and no geometry tween. */
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-smart-item,
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-resizable-card,
html body.cx-design-system .conexgo-dashboard-configuration-card {
animation: none !important;
}
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-resizable-card.conexgo-dashboard-minimized-card,
html body.cx-design-system .conexgo-dashboard-configuration-card.conexgo-dashboard-minimized-card {
resize: none !important;
}
html body.cx-design-system .conexgo-dashboard-resizable-card > .cx-dashboard-resize-handle-r18189 {
position: absolute !important;
right: 7px !important;
bottom: 7px !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
padding: 0 !important;
border: 1px solid #9db4c7 !important;
border-radius: 5px !important;
background: #f4f8fb !important;
cursor: ns-resize !important;
z-index: 20 !important;
opacity: .22 !important;
pointer-events: auto !important;
box-shadow: none !important;
transition: opacity 90ms ease-out, background-color 90ms ease-out !important;
}
html body.cx-design-system .conexgo-dashboard-resizable-card:hover > .cx-dashboard-resize-handle-r18189,
html body.cx-design-system .conexgo-dashboard-resizable-card > .cx-dashboard-resize-handle-r18189:focus-visible,
html body.cx-design-system .conexgo-dashboard-resizable-card > .cx-dashboard-resize-handle-r18189.is-resizing {
opacity: .9 !important;
background: #edf4f8 !important;
}
html body.cx-design-system .conexgo-dashboard-resizable-card > .cx-dashboard-resize-handle-r18189::after {
content: "";
position: absolute;
right: 3px;
bottom: 3px;
width: 7px;
height: 7px;
border-right: 2px solid #5f819b;
border-bottom: 2px solid #5f819b;
pointer-events: none;
}
/* Card/map headers are the click target, not only the tiny chevron. */
html body.cx-design-system :is(.alert-answer-map-toolbar, .alert-view-map-toolbar) {
cursor: pointer !important;
user-select: none !important;
}
/* Device deep-link feedback: subtle highlight, then a clean fade. */
html body.cx-design-system .conexgo-pagedlist-table tr.cx-device-focus-target > td {
transition: background-color 650ms ease-out, box-shadow 650ms ease-out !important;
}
html body.cx-design-system .conexgo-pagedlist-table tr.cx-device-focus-visible > td {
background: #eaf3fa !important;
box-shadow: inset 4px 0 0 #3e6a99 !important;
}
/* Table readability: avoid tiny/over-compressed operational data. */
html body.cx-design-system :is(.conexgo-pagedlist-table, .conexgo-device-status-table) th {
line-height: 1.3 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
vertical-align: middle !important;
}
html body.cx-design-system :is(.conexgo-pagedlist-table, .conexgo-device-status-table) td {
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.38 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
vertical-align: middle !important;
}
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-card-title {
line-height: 1.25 !important;
overflow-wrap: anywhere !important;
}
/* AlertQueue scales up on control-room / high-resolution displays. */
@media (min-width: 1440px) {
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-dropdown {
width: clamp(620px, 38vw, 760px) !important;
max-width: calc(100vw - 48px) !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-dropdown-header--classic {
min-height: 68px !important;
padding: 13px 16px !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-header-title {
font-size: 17px !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-header-meta,
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-card-time {
font-size: 13px !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-list--classic {
max-height: min(68vh, 720px) !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-card--classic {
padding: 15px 18px !important;
gap: 16px !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-card-title {
font-size: 15.5px !important;
line-height: 1.32 !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-card-device {
font-size: 14.5px !important;
line-height: 1.32 !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-assignment {
font-size: 12.5px !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-assignment strong {
font-size: 13.5px !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-action {
min-height: 42px !important;
height: 42px !important;
font-size: 13px !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-action.is-answer {
min-width: 56px !important;
width: auto !important;
padding-inline: 14px !important;
}
}
@media (min-width: 1600px) {
html body.cx-design-system :is(.conexgo-pagedlist-table, .conexgo-device-status-table) td {
font-size: 15px !important;
line-height: 1.42 !important;
}
html body.cx-design-system :is(.conexgo-pagedlist-table, .conexgo-device-status-table) th {
font-size: 13.5px !important;
}
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-card-title {
font-size: 16px !important;
}
}
html body.cx-design-system .cx-dialog--alert-answer :is(.alert-answer-panel-danger, .alert-answer-panel-info) > div:not(.alert-answer-panel-title) {
font-size: 14px !important;
line-height: 1.58 !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
}
@media (min-width: 1440px) {
html body.cx-design-system .cx-dialog--alert-answer :is(.alert-answer-panel-danger, .alert-answer-panel-info) > div:not(.alert-answer-panel-title) {
font-size: 15px !important;
line-height: 1.62 !important;
}
}
/* --------------------------------------------------------------------------
1) ROW ACTION MENUS — COLOR CHANGE ONLY, NO MOTION/WAVE/FOCUS FLASH
-------------------------------------------------------------------------- */
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu),
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu).show,
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu)
.dropdown-item,
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu)
.dropdown-item > *,
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu)
.dropdown-item::before,
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu)
.dropdown-item::after {
animation: none !important;
transition: none !important;
transform: none !important;
translate: none !important;
scale: 1 !important;
filter: none !important;
text-shadow: none !important;
will-change: auto !important;
}
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu)
.dropdown-item::before,
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu)
.dropdown-item::after {
content: none !important;
display: none !important;
}
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu)
.dropdown-item {
background-image: none !important;
box-shadow: none !important;
outline: none !important;
}
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item {
transition: background-color .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease !important;
}
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu)
.dropdown-item:hover,
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu)
.dropdown-item:focus:not(:focus-visible),
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu)
.dropdown-item:active {
background: #f0f5f9 !important;
color: #294b68 !important;
border-color: transparent !important;
box-shadow: none !important;
outline: none !important;
}
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu)
.dropdown-item:focus-visible {
background: #f0f5f9 !important;
color: #294b68 !important;
outline: 1px solid rgba(62, 106, 153, .28) !important;
outline-offset: -2px !important;
box-shadow: none !important;
}
/* Notification Add keeps its current primary color when dialog focus returns to the trigger. */
html body.cx-design-system .cx-notification-page-header .cx-page-action--primary:focus:not(:focus-visible) {
background: var(--cx-blue) !important;
border-color: var(--cx-blue) !important;
color: #ffffff !important;
box-shadow: none !important;
transform: none !important;
}
/* --------------------------------------------------------------------------
2) DASHBOARD — ONE MASONRY ENGINE, TWO INDEPENDENT VERTICAL COLUMNS
-------------------------------------------------------------------------- */
@media (min-width: 1200px) {
html body.cx-design-system
#conexgoDashboardSmartGrid.cx-r181812-masonry-ready {
display: block !important;
position: relative !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
align-content: initial !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid.cx-r181812-masonry-ready
> .conexgo-dashboard-smart-item {
display: block !important;
margin: 0 !important;
padding: 0 !important;
min-width: 0 !important;
height: auto !important;
grid-row: auto !important;
grid-column: auto !important;
transition: none !important;
animation: none !important;
transform: none !important;
translate: none !important;
will-change: auto !important;
}
}
@media (max-width: 1199.98px) {
html body.cx-design-system #conexgoDashboardSmartGrid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-auto-rows: auto !important;
gap: 12px !important;
height: auto !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item {
position: relative !important;
inset: auto !important;
width: auto !important;
max-width: none !important;
}
}
/* Keep card collapse/reflow immediate and predictable. */
html body.cx-design-system
#conexgoDashboardSmartGrid :is(.conexgo-dashboard-smart-item, .conexgo-dashboard-resizable-card),
html body.cx-design-system .conexgo-dashboard-configuration-card {
animation: none !important;
transition-property: background-color, border-color, color, box-shadow !important;
}
/* --------------------------------------------------------------------------
3) RESIZE GRIP — ALWAYS VISIBLE ON EXPANDED DESKTOP CARDS
-------------------------------------------------------------------------- */
html body.cx-design-system
.conexgo-dashboard-resizable-card > .cx-dashboard-resize-handle-r181812 {
position: absolute !important;
right: 7px !important;
bottom: 7px !important;
width: 21px !important;
height: 21px !important;
min-width: 21px !important;
min-height: 21px !important;
padding: 0 !important;
display: block !important;
border: 1px solid #91aabd !important;
border-radius: 6px !important;
background: rgba(247, 250, 252, .96) !important;
color: #557792 !important;
cursor: ns-resize !important;
z-index: 30 !important;
opacity: .82 !important;
pointer-events: auto !important;
box-shadow: 0 1px 3px rgba(41, 75, 104, .10) !important;
transform: none !important;
transition: none !important;
}
html body.cx-design-system
.conexgo-dashboard-resizable-card > .cx-dashboard-resize-handle-r181812::before,
html body.cx-design-system
.conexgo-dashboard-resizable-card > .cx-dashboard-resize-handle-r181812::after {
content: "" !important;
position: absolute !important;
pointer-events: none !important;
border-right: 2px solid #5d7e98 !important;
border-bottom: 2px solid #5d7e98 !important;
}
html body.cx-design-system
.conexgo-dashboard-resizable-card > .cx-dashboard-resize-handle-r181812::before {
right: 4px !important;
bottom: 4px !important;
width: 8px !important;
height: 8px !important;
}
html body.cx-design-system
.conexgo-dashboard-resizable-card > .cx-dashboard-resize-handle-r181812::after {
right: 7px !important;
bottom: 7px !important;
width: 4px !important;
height: 4px !important;
opacity: .72 !important;
}
html body.cx-design-system
.conexgo-dashboard-resizable-card > .cx-dashboard-resize-handle-r181812:hover,
html body.cx-design-system
.conexgo-dashboard-resizable-card > .cx-dashboard-resize-handle-r181812:focus-visible,
html body.cx-design-system
.conexgo-dashboard-resizable-card > .cx-dashboard-resize-handle-r181812.is-resizing {
opacity: 1 !important;
background: #edf4f8 !important;
border-color: #6f91aa !important;
outline: 2px solid rgba(62, 106, 153, .18) !important;
outline-offset: 1px !important;
}
html body.cx-design-system
.conexgo-dashboard-resizable-card.conexgo-dashboard-minimized-card
> .cx-dashboard-resize-handle-r181812 {
display: none !important;
}
@media (max-width: 1199.98px) {
html body.cx-design-system
.conexgo-dashboard-resizable-card > .cx-dashboard-resize-handle-r181812 {
display: none !important;
}
}
/* --------------------------------------------------------------------------
4) DEEP-LINK DEVICE FOCUS — ONE LEFT ACCENT, NOT A BLUE BAR PER CELL
-------------------------------------------------------------------------- */
html body.cx-design-system
.conexgo-pagedlist-table tr.cx-device-focus-target > td {
transition: background-color 700ms ease-out, border-color 700ms ease-out !important;
}
html body.cx-design-system
.conexgo-pagedlist-table tr.cx-device-focus-visible > td {
background: #f1f6fa !important;
border-top-color: #c9dbe8 !important;
border-bottom-color: #c9dbe8 !important;
box-shadow: none !important;
}
html body.cx-design-system
.conexgo-pagedlist-table tr.cx-device-focus-visible > td:first-child {
box-shadow: inset 4px 0 0 #3e6a99 !important;
}
html body.cx-design-system
.conexgo-pagedlist-table tr.cx-device-focus-visible
:is(.device-list-name-button, .device-list-action-toggle) {
border-color: #91afc6 !important;
}
/* --------------------------------------------------------------------------
5) TABLE READABILITY — DO NOT BREAK WORDS AT ARBITRARY CHARACTERS
-------------------------------------------------------------------------- */
html body.cx-design-system
:is(.conexgo-pagedlist-table, .conexgo-device-status-table) th,
html body.cx-design-system
:is(.conexgo-pagedlist-table, .conexgo-device-status-table) td {
word-break: normal !important;
overflow-wrap: break-word !important;
hyphens: none !important;
text-wrap: pretty;
}
html body.cx-design-system
:is(.conexgo-pagedlist-table, .conexgo-device-status-table) th {
line-height: 1.25 !important;
vertical-align: middle !important;
}
html body.cx-design-system
:is(.conexgo-pagedlist-table, .conexgo-device-status-table) td {
line-height: 1.42 !important;
vertical-align: top !important;
}
/* Alert table: reserve enough width for the columns operators actually read. */
html body.cx-design-system .alert-list-card .bstable-actions {
width: 104px !important;
min-width: 104px !important;
max-width: 104px !important;
vertical-align: middle !important;
}
html body.cx-design-system .alert-list-card .alert-list-alert-cell {
width: 240px !important;
min-width: 220px !important;
max-width: 300px !important;
font-weight: 590 !important;
line-height: 1.38 !important;
}
html body.cx-design-system .alert-list-card .alert-list-datetime-cell {
width: 168px !important;
min-width: 168px !important;
white-space: nowrap !important;
vertical-align: top !important;
}
html body.cx-design-system .alert-list-card .alert-list-device-cell {
min-width: 310px !important;
line-height: 1.4 !important;
}
html body.cx-design-system
.alert-list-card .alert-list-customer-cell-container {
min-width: 245px !important;
line-height: 1.38 !important;
}
html body.cx-design-system .alert-list-card .alert-list-comment-cell {
min-width: 175px !important;
line-height: 1.4 !important;
}
html body.cx-design-system
.alert-list-card .alert-list-device-name,
html body.cx-design-system
.alert-list-card .alert-list-callcenter,
html body.cx-design-system
.device-list-table-shell .device-list-name-text {
word-break: normal !important;
overflow-wrap: break-word !important;
}
@media (min-width: 1600px) {
html body.cx-design-system
:is(.conexgo-pagedlist-table, .conexgo-device-status-table) td {
font-size: 15px !important;
line-height: 1.45 !important;
}
html body.cx-design-system
:is(.conexgo-pagedlist-table, .conexgo-device-status-table) th {
font-size: 13.5px !important;
}
}
/* --------------------------------------------------------------------------
6) HEADER ALERT QUEUE — SUBDUED PROFESSIONAL GREEN ANSWER BUTTON
-------------------------------------------------------------------------- */
html body.cx-design-system
.conexgo-header-alerts .conexgo-alert-classic-action.is-answer,
html body.cx-design-system
.conexgo-header-alerts .conexgo-alert-classic-action.is-answer > * {
color: #ffffff !important;
}
html body.cx-design-system
.conexgo-header-alerts .conexgo-alert-classic-action.is-answer {
min-width: 86px !important;
height: 38px !important;
padding: 0 12px !important;
border: 1px solid #527a5b !important;
border-radius: 6px !important;
background: #638b6b !important;
box-shadow: none !important;
font-size: 13px !important;
font-weight: 700 !important;
transform: none !important;
transition: none !important;
}
html body.cx-design-system
.conexgo-header-alerts .conexgo-alert-classic-action.is-answer:hover,
html body.cx-design-system
.conexgo-header-alerts .conexgo-alert-classic-action.is-answer:focus-visible {
background: #587f61 !important;
border-color: #496e52 !important;
color: #ffffff !important;
box-shadow: none !important;
transform: none !important;
}
html body.cx-design-system
.conexgo-header-alerts .conexgo-alert-classic-action.is-answer:focus-visible {
outline: 2px solid rgba(82, 122, 91, .24) !important;
outline-offset: 2px !important;
}
html body.cx-design-system
.conexgo-header-alerts .conexgo-alert-classic-action.is-answer:active {
background: #4f7458 !important;
border-color: #45664d !important;
box-shadow: none !important;
}
@media (min-width: 1440px) {
html body.cx-design-system
.conexgo-header-alerts .conexgo-alert-classic-action.is-answer {
min-width: 94px !important;
height: 42px !important;
padding-inline: 14px !important;
font-size: 13.5px !important;
}
}
@media (max-width: 520px) {
html body.cx-design-system
.conexgo-header-alerts .conexgo-alert-classic-action.is-answer {
width: 40px !important;
min-width: 40px !important;
height: 36px !important;
padding: 0 !important;
}
}
/* --------------------------------------------------------------------------
7) BROWSER NOTIFICATION FEEDBACK — NEVER CLIPPED BY HEADER CONTAINERS
-------------------------------------------------------------------------- */
html body.cx-design-system .cx-header-status-result {
position: fixed !important;
top: 88px !important;
right: 24px !important;
left: auto !important;
width: min(360px, calc(100vw - 32px)) !important;
z-index: 12050 !important;
animation: none !important;
transform: none !important;
}
html body.cx-design-system .cx-header-status-result::before {
display: none !important;
}
html body.cx-design-system .conexgo-notification-overlay {
z-index: 12100 !important;
}
@media (max-width: 575.98px) {
html body.cx-design-system .cx-header-status-result {
top: 78px !important;
right: 12px !important;
left: 12px !important;
width: auto !important;
}
}
html body.cx-design-system
:is(
.device-list-action-group,
.conexgo-row-action-group,
.device-list-action-menu,
.conexgo-row-action-menu,
.device-list-name-button,
.account-list-name-button,
.device-list-action-toggle,
.conexgo-row-action-toggle
),
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu) *,
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu).show,
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu).show * {
animation: none !important;
transition: none !important;
transform: none !important;
translate: none !important;
will-change: auto !important;
}
html body.cx-design-system
:is(.device-list-name-button, .account-list-name-button) {
box-shadow: none !important;
}
html body.cx-design-system
:is(.device-list-name-button, .account-list-name-button):hover {
background: #f5f9fc !important;
border-color: #bfd3e2 !important;
color: #244963 !important;
box-shadow: none !important;
}
html body.cx-design-system
:is(.device-list-action-toggle, .conexgo-row-action-toggle) {
box-shadow: none !important;
}
html body.cx-design-system
:is(.device-list-action-toggle, .conexgo-row-action-toggle):hover,
html body.cx-design-system
:is(.device-list-action-toggle, .conexgo-row-action-toggle)[aria-expanded="true"] {
background: #356887 !important;
border-color: #356887 !important;
color: #ffffff !important;
box-shadow: none !important;
}
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu),
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu).show {
margin: 0 !important;
padding: 5px !important;
border: 1px solid #c8d8e5 !important;
border-radius: 9px !important;
background: #ffffff !important;
box-shadow: 0 8px 20px rgba(29, 59, 82, .11) !important;
}
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item {
margin: 0 !important;
border: 0 !important;
border-radius: 6px !important;
background: #ffffff !important;
color: #294b68 !important;
box-shadow: none !important;
outline: 0 !important;
}
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,
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item:focus-visible,
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item:active {
border: 0 !important;
background: #eaf3f8 !important;
color: #244963 !important;
box-shadow: none !important;
outline: 0 !important;
}
@media (min-width: 768px) {
html body.cx-design-system
:is(.device-list-action-group, .conexgo-row-action-group) {
position: relative !important;
overflow: visible !important;
}
html body.cx-design-system
:is(.device-list-action-group, .conexgo-row-action-group)
> :is(.device-list-action-menu, .conexgo-row-action-menu),
html body.cx-design-system
:is(.device-list-action-group, .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;
margin: 0 !important;
overflow-x: hidden !important;
z-index: 12000 !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),
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 {
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-r181818-row-menu-scrollable {
max-height: var(--cx-r181818-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;
}
}
/* 1) Header notification bell: same contained action language as the alert icon. */
html body.cx-design-system .app-header-modern .conexgo-header-notifications {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
html body.cx-design-system .app-header-modern .conexgo-header-notifications .conexgo-notification-trigger {
position: relative !important;
width: 42px !important;
min-width: 42px !important;
height: 42px !important;
min-height: 42px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid #d9e4ec !important;
border-radius: 999px !important;
background: #f8fbfd !important;
box-shadow: 0 1px 2px rgba(29, 61, 88, .035) !important;
color: #2f5a7c !important;
transform: none !important;
translate: none !important;
transition: background-color .12s ease, border-color .12s ease !important;
}
html body.cx-design-system .app-header-modern .conexgo-header-notifications .conexgo-notification-trigger:hover,
html body.cx-design-system .app-header-modern .conexgo-header-notifications .conexgo-notification-trigger:focus-visible,
html body.cx-design-system .app-header-modern .conexgo-header-notifications .conexgo-notification-trigger:active,
html body.cx-design-system .app-header-modern .conexgo-header-notifications .conexgo-notification-trigger[aria-expanded="true"] {
background: #f8fbfd !important;
border-color: #cbd8e4 !important;
color: #2f5a7c !important;
box-shadow: 0 3px 9px rgba(44, 76, 108, .08) !important;
transform: none !important;
translate: none !important;
}
html body.cx-design-system .app-header-modern .conexgo-header-notifications .conexgo-notification-trigger.is-empty {
border-color: #dfe5e9 !important;
background: #f4f6f8 !important;
color: #8c98a2 !important;
box-shadow: none !important;
}
html body.cx-design-system .app-header-modern .conexgo-header-notifications .conexgo-notification-trigger.is-empty > .conexgo-notification-bell {
color: #8c98a2 !important;
}
html body.cx-design-system .app-header-modern .conexgo-header-notifications .conexgo-notification-trigger.is-empty:hover,
html body.cx-design-system .app-header-modern .conexgo-header-notifications .conexgo-notification-trigger.is-empty:focus-visible,
html body.cx-design-system .app-header-modern .conexgo-header-notifications .conexgo-notification-trigger.is-empty:active,
html body.cx-design-system .app-header-modern .conexgo-header-notifications .conexgo-notification-trigger.is-empty[aria-expanded="true"] {
border-color: #dfe5e9 !important;
background: #f4f6f8 !important;
color: #8c98a2 !important;
box-shadow: 0 2px 7px rgba(44, 76, 108, .05) !important;
}
html body.cx-design-system .app-header-modern .conexgo-header-notifications .conexgo-notification-bell {
margin: 0 !important;
font-size: 17px !important;
line-height: 1 !important;
}
html body.cx-design-system .app-header-modern .conexgo-header-notifications .conexgo-notification-badge {
top: -7px !important;
right: -8px !important;
}
/* 2) Operator alert queue: account context is information, not assignment. */
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-account-context {
margin-top: 9px !important;
padding-top: 9px !important;
border-top: 1px solid #e3e9ee !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-account-context > span {
color: #718297 !important;
font-size: 12px !important;
font-weight: 560 !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-account-context > strong {
display: block !important;
margin-top: 2px !important;
color: #294f71 !important;
line-height: 1.25 !important;
overflow-wrap: break-word !important;
word-break: normal !important;
}
/* 3) Dashboard: dense shortest-column masonry and no artificial page/grid height. */
@media (min-width: 1200px) {
html body.cx-design-system #conexgoDashboardSmartGrid.conexgo-dashboard-smart-grid,
html body.cx-design-system #conexgoDashboardSmartGrid.conexgo-dashboard-content-grid,
html body.cx-design-system #conexgoDashboardSmartGrid.cx-r181814-masonry-ready {
display: block !important;
align-content: start !important;
min-height: 0 !important;
margin-top: 10px !important;
margin-bottom: 10px !important;
padding-bottom: 0 !important;
overflow: visible !important;
}
html body.cx-design-system #conexgoDashboardSmartGrid.cx-r181814-masonry-ready > .conexgo-dashboard-smart-item {
margin: 0 !important;
padding: 0 !important;
}
html body.cx-design-system .conexgo-dashboard-configuration-row {
margin-bottom: 8px !important;
}
}
/* 4) Persistent resize grip: visible for Master/Distributor/Operator/Customer alike. */
html body.cx-design-system .conexgo-dashboard-resizable-card {
position: relative !important;
}
html body.cx-design-system .conexgo-dashboard-resizable-card > .cx-dashboard-resize-handle-r181814 {
position: absolute !important;
z-index: 14 !important;
right: 7px !important;
bottom: 7px !important;
width: 24px !important;
min-width: 24px !important;
height: 24px !important;
min-height: 24px !important;
padding: 0 !important;
display: block !important;
opacity: .95 !important;
cursor: ns-resize !important;
touch-action: none !important;
border: 1px solid #9db6c9 !important;
border-radius: 7px !important;
background: rgba(246, 250, 252, .97) !important;
box-shadow: 0 1px 3px rgba(31, 70, 102, .12) !important;
}
html body.cx-design-system .conexgo-dashboard-resizable-card > .cx-dashboard-resize-handle-r181814::before,
html body.cx-design-system .conexgo-dashboard-resizable-card > .cx-dashboard-resize-handle-r181814::after {
content: "" !important;
position: absolute !important;
right: 4px !important;
bottom: 4px !important;
border-right: 2px solid #557d9a !important;
border-bottom: 2px solid #557d9a !important;
pointer-events: none !important;
}
html body.cx-design-system .conexgo-dashboard-resizable-card > .cx-dashboard-resize-handle-r181814::before {
width: 9px !important;
height: 9px !important;
}
html body.cx-design-system .conexgo-dashboard-resizable-card > .cx-dashboard-resize-handle-r181814::after {
width: 4px !important;
height: 4px !important;
right: 8px !important;
bottom: 8px !important;
opacity: .72 !important;
}
html body.cx-design-system .conexgo-dashboard-resizable-card > .cx-dashboard-resize-handle-r181814:hover,
html body.cx-design-system .conexgo-dashboard-resizable-card > .cx-dashboard-resize-handle-r181814:focus-visible,
html body.cx-design-system .conexgo-dashboard-resizable-card > .cx-dashboard-resize-handle-r181814.is-resizing {
opacity: 1 !important;
background: #edf5f9 !important;
border-color: #6f94ad !important;
outline: 2px solid rgba(62, 106, 153, .17) !important;
outline-offset: 1px !important;
}
html body.cx-design-system .conexgo-dashboard-minimized-card > .cx-dashboard-resize-handle-r181814,
html body.cx-design-system .conexgo-dashboard-card-closing > .cx-dashboard-resize-handle-r181814 {
display: none !important;
}
@media (max-width: 1199.98px) {
html body.cx-design-system .conexgo-dashboard-resizable-card > .cx-dashboard-resize-handle-r181814 {
display: none !important;
}
}
/* 5) Dashboard navigation: every actionable surface reads as actionable, calmly. */
html body.cx-design-system .conexgo-dashboard-card-open-action {
color: #eef6fb !important;
}
html body.cx-design-system .conexgo-dashboard-data-row--clickable,
html body.cx-design-system .conexgo-dashboard-trend-point[role="button"],
html body.cx-design-system .conexgo-device-status-table tbody tr[role="button"] {
cursor: pointer !important;
}
html body.cx-design-system .conexgo-dashboard-data-row--clickable:hover,
html body.cx-design-system .conexgo-dashboard-data-row--clickable:focus-visible,
html body.cx-design-system .conexgo-device-status-table tbody tr[role="button"]:hover > td,
html body.cx-design-system .conexgo-device-status-table tbody tr[role="button"]:focus-visible > td {
background-color: #f0f6fa !important;
}
html body.cx-design-system .conexgo-dashboard-data-row--clickable:focus-visible,
html body.cx-design-system .conexgo-device-status-table tbody tr[role="button"]:focus-visible {
outline: 2px solid rgba(62, 106, 153, .34) !important;
outline-offset: -2px !important;
}
/* 6) Deep-link focus: one restrained pulse on the destination, then disappear. */
@keyframes cx-r181814-focus-pulse {
0% { box-shadow: inset 4px 0 0 #3e6a99, 0 0 0 0 rgba(62, 106, 153, .24); }
45% { box-shadow: inset 4px 0 0 #3e6a99, 0 0 0 5px rgba(62, 106, 153, .11); }
100% { box-shadow: inset 4px 0 0 #3e6a99, 0 0 0 0 rgba(62, 106, 153, 0); }
}
html body.cx-design-system tr.cx-deep-focus-visible > td,
html body.cx-design-system tr.cx-device-focus-target > td,
html body.cx-design-system tr.cx-alert-focus-target > td,
html body.cx-design-system tr.cx-dashboard-search-target > td {
background-color: #edf5fa !important;
}
html body.cx-design-system .cx-deep-focus-visible {
animation: cx-r181814-focus-pulse 1.15s ease-out 2 !important;
}
html body.cx-design-system tr.cx-deep-focus-visible > td:first-child,
html body.cx-design-system tr.cx-device-focus-target > td:first-child,
html body.cx-design-system tr.cx-alert-focus-target > td:first-child,
html body.cx-design-system tr.cx-dashboard-search-target > td:first-child {
box-shadow: inset 4px 0 0 #3e6a99 !important;
}
/* 7) Alert list: readable operational columns without breaking words mid-token. */
html body.cx-design-system .alert-list-card .table-responsive,
html body.cx-design-system .alert-list-card .conexgo-pagedlist-table-wrap {
overflow-x: auto !important;
}
html body.cx-design-system .alert-list-card table {
min-width: 1460px !important;
table-layout: auto !important;
}
html body.cx-design-system .alert-list-card :is(th, td) {
overflow-wrap: normal !important;
word-break: normal !important;
hyphens: none !important;
}
html body.cx-design-system .alert-list-card .bstable-actions {
width: 108px !important;
min-width: 108px !important;
max-width: 108px !important;
}
html body.cx-design-system .alert-list-card .alert-list-alert-cell {
width: 300px !important;
min-width: 280px !important;
max-width: 360px !important;
white-space: normal !important;
line-height: 1.4 !important;
font-weight: 610 !important;
}
html body.cx-design-system .alert-list-card .cx-alert-description-wrap {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 7px !important;
}
html body.cx-design-system .alert-list-card .alert-list-datetime-cell {
width: 215px !important;
min-width: 215px !important;
white-space: nowrap !important;
line-height: 1.35 !important;
}
html body.cx-design-system .alert-list-card .alert-list-device-cell {
min-width: 360px !important;
width: 390px !important;
}
html body.cx-design-system .alert-list-card .alert-list-customer-cell-container {
min-width: 250px !important;
width: 270px !important;
}
html body.cx-design-system .alert-list-card .alert-list-comment-cell {
min-width: 245px !important;
width: 280px !important;
white-space: normal !important;
line-height: 1.45 !important;
}
html body.cx-design-system .cx-alert-no-comment-badge {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
min-height: 25px !important;
padding: 3px 8px !important;
border: 1px solid #e1bf72 !important;
border-radius: 999px !important;
background: #fff8e8 !important;
color: #795d20 !important;
font-size: 11.5px !important;
font-weight: 650 !important;
line-height: 1 !important;
}
/* Avoid stale row/table transition effects when deep-linked. */
@media (prefers-reduced-motion: reduce) {
html body.cx-design-system .cx-deep-focus-visible {
animation: none !important;
}
}
html body.cx-design-system .conexgo-dashboard-drilldown-row {
cursor: pointer;
border-radius: 9px;
transition:
background-color 120ms ease,
box-shadow 120ms ease;
transform: none !important;
}
html body.cx-design-system .conexgo-dashboard-drilldown-row:hover,
html body.cx-design-system .conexgo-dashboard-drilldown-row:focus-visible {
background: rgba(49, 102, 143, .065) !important;
box-shadow: inset 3px 0 0 rgba(49, 102, 143, .62);
outline: none;
transform: none !important;
}
html body.cx-design-system .conexgo-dashboard-drilldown-row .conexgo-dashboard-offline-device-link,
html body.cx-design-system .conexgo-dashboard-drilldown-row .conexgo-dashboard-ranked-title {
cursor: pointer;
text-decoration: none;
}
html body.cx-design-system .conexgo-dashboard-drilldown-row:focus-visible {
box-shadow:
inset 3px 0 0 rgba(49, 102, 143, .72),
0 0 0 2px rgba(49, 102, 143, .12);
}
@media (prefers-reduced-motion: reduce) {
html body.cx-design-system .conexgo-dashboard-drilldown-row {
transition: none !important;
}
}
#conexgoDashboardSmartGrid {
width: 100%;
min-width: 0;
}
#conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item {
min-width: 0;
margin: 0 !important;
}
/* The JS runtime owns masonry geometry once ready. Before JS initializes, keep a
stable two-column desktop fallback instead of flashing a full-width stack. */
@media (min-width: 900px) {
#conexgoDashboardSmartGrid:not(.cx-r181817-masonry-ready):not(.cx-r181817-single-column) {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
align-items: start !important;
height: auto !important;
}
#conexgoDashboardSmartGrid.cx-r181817-masonry-ready {
display: block !important;
position: relative !important;
grid-template-columns: none !important;
gap: 0 !important;
}
#conexgoDashboardSmartGrid.cx-r181817-single-column {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 10px !important;
height: auto !important;
}
/* Resize must be discoverable without hover on desktop. */
.conexgo-dashboard-resizable-card:not(.conexgo-dashboard-minimized-card) > .cx-dashboard-resize-handle-r181817 {
position: absolute !important;
right: 8px !important;
bottom: 7px !important;
z-index: 8 !important;
width: 28px !important;
height: 28px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid #b8cde0 !important;
border-radius: 8px !important;
background: rgba(246, 250, 253, .96) !important;
color: #416b8f !important;
opacity: 1 !important;
visibility: visible !important;
cursor: ns-resize !important;
box-shadow: 0 2px 6px rgba(37, 65, 91, .08) !important;
transform: none !important;
transition: border-color .12s ease, background-color .12s ease !important;
}
.conexgo-dashboard-resizable-card:not(.conexgo-dashboard-minimized-card) > .cx-dashboard-resize-handle-r181817::before {
content: "";
width: 10px;
height: 10px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
opacity: .8;
}
.conexgo-dashboard-resizable-card:not(.conexgo-dashboard-minimized-card) > .cx-dashboard-resize-handle-r181817:hover,
.conexgo-dashboard-resizable-card:not(.conexgo-dashboard-minimized-card) > .cx-dashboard-resize-handle-r181817:focus-visible {
border-color: #7fa6c7 !important;
background: #eef5fa !important;
outline: none !important;
}
}
@media (max-width: 899.98px) {
#conexgoDashboardSmartGrid,
#conexgoDashboardSmartGrid.cx-r181817-masonry-ready,
#conexgoDashboardSmartGrid.cx-r181817-single-column {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 10px !important;
height: auto !important;
position: static !important;
}
#conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item {
position: static !important;
inset: auto !important;
width: 100% !important;
max-width: none !important;
transform: none !important;
}
.cx-dashboard-resize-handle-r181817 {
display: none !important;
}
}
/* Shared exact-target cue used by Device_List / Alert_List drill-downs. */
.cx-deep-focus-visible {
position: relative;
z-index: 1;
outline: 2px solid rgba(58, 111, 158, .58) !important;
outline-offset: -2px;
background: rgba(221, 237, 249, .72) !important;
box-shadow: 0 0 0 4px rgba(58, 111, 158, .10) !important;
}
@media (prefers-reduced-motion: reduce) {
.cx-deep-focus-visible {
scroll-behavior: auto;
}
}
/* --------------------------------------------------------------------------
Header profile: same contained circular action language as notification,
alert and server controls. Avatar remains the user's identity cue.
-------------------------------------------------------------------------- */
html body.cx-design-system
.conexgo-header-profile {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
float: none !important;
}
html body.cx-design-system
.conexgo-header-profile
> a.nav-link {
width: 50px !important;
min-width: 50px !important;
height: 50px !important;
min-height: 50px !important;
padding: 0 !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
border: 1px solid #d6e3ed !important;
border-radius: 999px !important;
background: #f8fbfd !important;
color: #2c4c6c !important;
box-shadow: none !important;
transform: none !important;
transition: none !important;
}
html body.cx-design-system
.conexgo-header-profile
> a.nav-link:hover,
html body.cx-design-system
.conexgo-header-profile
> a.nav-link:focus-visible,
html body.cx-design-system
.conexgo-header-profile.show
> a.nav-link {
border-color: #bfd4e3 !important;
background: #eef5fa !important;
outline: 0 !important;
box-shadow: none !important;
transform: none !important;
}
html body.cx-design-system
.conexgo-header-profile
> a.nav-link
> span {
display: none !important;
}
html body.cx-design-system
.conexgo-header-profile
> a.nav-link
img.profile-user {
width: 36px !important;
height: 36px !important;
border: 1px solid #dfe8ef !important;
box-shadow: none !important;
}
/* --------------------------------------------------------------------------
Dashboard: keep the current two-column workstation layout, but make every
card internally width-safe. Individual card content responds to CARD width,
not only the browser viewport.
-------------------------------------------------------------------------- */
html body.cx-design-system
#conexgoDashboardSmartGrid,
html body.cx-design-system
#conexgoDashboardSmartGrid
> .conexgo-dashboard-smart-item,
html body.cx-design-system
#conexgoDashboardSmartGrid
> .conexgo-dashboard-smart-item
> .card {
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
> .conexgo-dashboard-smart-item {
container-type: inline-size;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
:is(
.card-header,
.card-body,
.conexgo-dashboard-card-header,
.conexgo-dashboard-card-filter-row,
.conexgo-dashboard-filter-stack,
.conexgo-dashboard-primary-filter-row,
.conexgo-dashboard-filter-field,
.conexgo-device-overview-toolbar,
.conexgo-device-overview-copy,
.conexgo-device-overview-period,
.conexgo-dashboard-offline-period-row,
.conexgo-dashboard-offline-period-copy,
.conexgo-dashboard-ranked-item,
.conexgo-dashboard-ranked-main,
.conexgo-dashboard-latest-item,
.conexgo-dashboard-latest-main
) {
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-config-section-description,
html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-ranked-subtitle,
html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-latest-subtitle {
overflow-wrap: break-word !important;
word-break: normal !important;
}
/* Device overview: preserve side-by-side composition when it fits. */
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="totalDevices"]
.conexgo-device-overview-toolbar {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(180px, 235px) !important;
align-items: start !important;
gap: 12px 16px !important;
width: 100% !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="totalDevices"]
.conexgo-device-overview-period {
display: grid !important;
grid-template-columns: max-content minmax(0, 1fr) !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="totalDevices"]
.conexgo-device-overview-period
:is(.cx-custom-select-root, .cx-control--dashboard-filter),
html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-primary-filter-row
:is(.cx-custom-select-root, .cx-control--dashboard-filter) {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
:is(
.conexgo-dashboard-active-user,
.conexgo-dashboard-latest-item,
.conexgo-dashboard-ranked-item,
.cx-dashboard-offline-item,
.conexgo-device-overview-metric,
.conexgo-device-overview-model,
.conexgo-dashboard-latest-breakdown-item
) {
box-sizing: border-box !important;
background: #ffffff !important;
border: 1px solid #dce5ee !important;
border-radius: 10px !important;
box-shadow: none !important;
transform: none !important;
transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
:is(
.conexgo-dashboard-active-user,
.conexgo-dashboard-latest-item,
.conexgo-dashboard-ranked-item,
.cx-dashboard-offline-item,
.conexgo-device-overview-metric,
.conexgo-device-overview-model,
.conexgo-dashboard-latest-breakdown-item
):is(:hover, :focus-within) {
background: #f4f8fb !important;
border-color: #c8dbe8 !important;
box-shadow: 0 4px 12px rgba(44, 76, 108, .08) !important;
transform: translateY(-1px) !important;
}
/* Card-width responsive rules prevent filters from escaping a narrow half-column. */
@container (max-width: 620px) {
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="totalDevices"]
.conexgo-device-overview-toolbar,
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="activeUsers"]
.conexgo-dashboard-card-filter-row,
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="offlineDevices"]
.conexgo-dashboard-offline-period-row {
grid-template-columns: minmax(0, 1fr) !important;
align-items: stretch !important;
gap: 8px !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="totalDevices"]
.conexgo-device-overview-period {
grid-template-columns: minmax(0, 1fr) !important;
align-items: stretch !important;
gap: 5px !important;
}
}
@container (max-width: 540px) {
html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-primary-filter-row {
grid-template-columns: minmax(0, 1fr) !important;
gap: 8px !important;
}
}
/* --------------------------------------------------------------------------
Alert list: give operational text real columns. Horizontal scroll is better
than text collisions or character-by-character wrapping.
-------------------------------------------------------------------------- */
html body.cx-design-system
.alert-list-card
.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 {
min-width: 0 !important;
}
@media (min-width: 768px) {
html body.cx-design-system
.alert-list-card
.table-responsive {
overflow-x: auto !important;
overflow-y: visible !important;
scrollbar-gutter: stable !important;
}
html body.cx-design-system
.alert-list-card
.conexgo-pagedlist-table {
width: 100% !important;
min-width: 1480px !important;
table-layout: fixed !important;
}
html body.cx-design-system .alert-list-card th.cx-table-column-header--action,
html body.cx-design-system .alert-list-card td.bstable-actions {
width: 110px !important;
min-width: 110px !important;
max-width: 110px !important;
}
html body.cx-design-system .alert-list-card th.cx-table-column-header--alert,
html body.cx-design-system .alert-list-card td.alert-list-alert-cell {
width: 220px !important;
min-width: 220px !important;
max-width: 220px !important;
}
html body.cx-design-system .alert-list-card th.cx-table-column-header--datetime,
html body.cx-design-system .alert-list-card td.alert-list-datetime-cell {
width: 215px !important;
min-width: 215px !important;
max-width: 215px !important;
white-space: nowrap !important;
}
html body.cx-design-system .alert-list-card th.cx-table-column-header--device,
html body.cx-design-system .alert-list-card td.alert-list-device-cell {
width: 390px !important;
min-width: 390px !important;
max-width: 390px !important;
}
html body.cx-design-system .alert-list-card th.cx-table-column-header--customer,
html body.cx-design-system .alert-list-card td.alert-list-customer-cell-container {
width: 260px !important;
min-width: 260px !important;
max-width: 260px !important;
}
html body.cx-design-system .alert-list-card th.cx-table-column-header--comment,
html body.cx-design-system .alert-list-card td.alert-list-comment-cell {
width: 285px !important;
min-width: 285px !important;
max-width: 285px !important;
}
html body.cx-design-system
.alert-list-card
:is(
.alert-list-alert-cell,
.alert-list-device-cell,
.alert-list-customer-cell-container,
.alert-list-comment-cell
) {
overflow: visible !important;
overflow-wrap: break-word !important;
word-break: normal !important;
hyphens: auto !important;
white-space: normal !important;
line-height: 1.38 !important;
}
html body.cx-design-system
.alert-list-card
.alert-list-device-line {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px !important;
width: 100% !important;
min-width: 0 !important;
}
html body.cx-design-system
.alert-list-card
.alert-list-device-name,
html body.cx-design-system
.alert-list-card
.alert-list-customer-address,
html body.cx-design-system
.alert-list-card
.alert-list-comment-cell * {
max-width: 100% !important;
overflow-wrap: break-word !important;
word-break: normal !important;
}
}
/* Filter badges are now populated on Alerts and the log pages. Keep them compact. */
html body.cx-design-system
.cx-filter-table-width
:is(.responsive-filter-panel-badge, .cx-filter-panel-badge) {
min-width: 28px !important;
}
/* --------------------------------------------------------------------------
Row menus: late ownership against historical hover/lift rules.
The dedicated row-menu CSS owns geometry; this only guarantees zero motion.
-------------------------------------------------------------------------- */
html body.cx-design-system
:is(
.device-list-action-group,
.conexgo-row-action-group,
.device-list-name-button,
.account-list-name-button,
.device-list-action-toggle,
.conexgo-row-action-toggle,
.device-list-action-menu,
.conexgo-row-action-menu
),
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu) * {
animation: none !important;
transition: none !important;
transform: none !important;
translate: none !important;
}
/* Alert list: keep the bug fix (no text collisions) without making the table
unnecessarily wide on normal workstations. */
@media (min-width: 768px) {
html body.cx-design-system
.alert-list-card
.conexgo-pagedlist-table {
width: 100% !important;
min-width: 1175px !important;
table-layout: fixed !important;
}
html body.cx-design-system .alert-list-card th.cx-table-column-header--action,
html body.cx-design-system .alert-list-card td.bstable-actions {
width: 100px !important;
min-width: 100px !important;
max-width: 100px !important;
}
html body.cx-design-system .alert-list-card th.cx-table-column-header--alert,
html body.cx-design-system .alert-list-card td.alert-list-alert-cell {
width: 170px !important;
min-width: 170px !important;
max-width: 170px !important;
}
html body.cx-design-system .alert-list-card th.cx-table-column-header--datetime,
html body.cx-design-system .alert-list-card td.alert-list-datetime-cell {
width: 190px !important;
min-width: 190px !important;
max-width: 190px !important;
white-space: nowrap !important;
overflow: hidden !important;
}
html body.cx-design-system .alert-list-card th.cx-table-column-header--device,
html body.cx-design-system .alert-list-card td.alert-list-device-cell {
width: 295px !important;
min-width: 295px !important;
max-width: 295px !important;
}
html body.cx-design-system .alert-list-card th.cx-table-column-header--customer,
html body.cx-design-system .alert-list-card td.alert-list-customer-cell-container {
width: 200px !important;
min-width: 200px !important;
max-width: 200px !important;
}
html body.cx-design-system .alert-list-card th.cx-table-column-header--comment,
html body.cx-design-system .alert-list-card td.alert-list-comment-cell {
width: 220px !important;
min-width: 220px !important;
max-width: 220px !important;
}
html body.cx-design-system
.alert-list-card
:is(
.alert-list-alert-cell,
.alert-list-device-cell,
.alert-list-customer-cell-container,
.alert-list-comment-cell
) {
overflow: hidden !important;
overflow-wrap: break-word !important;
word-break: normal !important;
hyphens: none !important;
white-space: normal !important;
line-height: 1.38 !important;
}
html body.cx-design-system
.alert-list-card
.alert-list-device-line {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px !important;
min-width: 0 !important;
max-width: 100% !important;
}
}
/* Two-select cards: Period + Alert type remain beside one another on desktop.
Each field keeps its own label above its own select. This intentionally wins
over the earlier card-container fallback that could stack them in a narrow
half-column. */
@media (min-width: 768px) {
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;
min-width: 0 !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;
}
/* Single-filter cards use the same workstation composition as Latest
Alerts: explanatory label/copy on the left, selector on the right. */
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="latestAlerts"]
.conexgo-dashboard-latest-period-row,
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="offlineDevices"]
.conexgo-dashboard-offline-period-row,
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="activeUsers"]
.conexgo-dashboard-card-filter-row,
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="totalDevices"]
.conexgo-device-overview-toolbar {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(220px, 0.95fr) !important;
align-items: center !important;
gap: 12px 18px !important;
width: 100% !important;
min-width: 0 !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="latestAlerts"]
.conexgo-dashboard-latest-period-select,
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="offlineDevices"]
.conexgo-dashboard-offline-period-select,
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="activeUsers"]
.conexgo-dashboard-card-filter-row
> .cx-custom-select-root {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="totalDevices"]
.conexgo-device-overview-period {
display: grid !important;
grid-template-columns: max-content minmax(0, 1fr) !important;
align-items: center !important;
gap: 8px !important;
width: 100% !important;
min-width: 0 !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
:is(
.conexgo-dashboard-latest-period-row,
.conexgo-dashboard-offline-period-row,
.conexgo-device-overview-toolbar,
.conexgo-dashboard-card-filter-row
)
.conexgo-dashboard-config-section-description {
margin-top: 3px !important;
max-width: 40ch !important;
line-height: 1.28 !important;
}
}
@media (max-width: 767.98px) {
html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-primary-filter-row,
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="latestAlerts"]
.conexgo-dashboard-latest-period-row,
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="offlineDevices"]
.conexgo-dashboard-offline-period-row,
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="activeUsers"]
.conexgo-dashboard-card-filter-row,
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="totalDevices"]
.conexgo-device-overview-toolbar,
html body.cx-design-system
#conexgoDashboardSmartGrid
[data-dashboard-key="totalDevices"]
.conexgo-device-overview-period {
grid-template-columns: minmax(0, 1fr) !important;
align-items: stretch !important;
gap: 7px !important;
}
}
@media (max-width: 767.98px) {
html body.cx-design-system
#conexgoDashboardSmartGrid,
html body.cx-design-system
#conexgoDashboardSmartGrid.cx-r181817-masonry-ready,
html body.cx-design-system
#conexgoDashboardSmartGrid.cx-r181817-single-column {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 12px !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
position: static !important;
padding: 0 !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
> .conexgo-dashboard-smart-item {
position: static !important;
inset: auto !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
transform: none !important;
translate: none !important;
box-sizing: border-box !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
> .conexgo-dashboard-smart-item
> .card,
html body.cx-design-system
.conexgo-dashboard-configuration-card {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
border-radius: 12px !important;
overflow: hidden !important;
box-sizing: border-box !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 {
min-height: 52px !important;
padding: 8px 9px 8px 12px !important;
display: flex !important;
align-items: center !important;
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-card-header,
html body.cx-design-system
.conexgo-dashboard-configuration-card
.conexgo-dashboard-card-header {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto auto !important;
align-items: center !important;
gap: 6px !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !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;
max-width: 100% !important;
margin: 0 !important;
font-size: 14px !important;
line-height: 1.25 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
overflow-wrap: break-word !important;
word-break: normal !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;
padding: 0 !important;
flex: 0 0 36px !important;
transform: none !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-minimized-card
> .conexgo-dashboard-card-header-surface,
html body.cx-design-system
.conexgo-dashboard-configuration-card.conexgo-dashboard-minimized-card
> .conexgo-dashboard-card-header-surface {
min-height: 52px !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
.card-body,
html body.cx-design-system
.conexgo-dashboard-configuration-card
.card-body {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-table-viewport {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
overflow-x: auto !important;
overscroll-behavior-inline: contain !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
:is(
.conexgo-dashboard-primary-filter-row,
.conexgo-dashboard-latest-period-row,
.conexgo-dashboard-offline-period-row,
.conexgo-dashboard-card-filter-row,
.conexgo-device-overview-toolbar,
.conexgo-device-overview-period
) {
grid-template-columns: minmax(0, 1fr) !important;
align-items: stretch !important;
gap: 7px !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
:is(
.cx-custom-select-root,
.cx-control--dashboard-filter,
.conexgo-dashboard-filter-field,
.conexgo-dashboard-latest-period-select,
.conexgo-dashboard-offline-period-select
) {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
:is(
.conexgo-dashboard-ranked-item,
.conexgo-dashboard-ranked-main,
.conexgo-dashboard-latest-item,
.conexgo-dashboard-latest-main,
.conexgo-dashboard-offline-device-row
) {
min-width: 0 !important;
max-width: 100% !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
:is(canvas, svg, img) {
max-width: 100% !important;
}
}
@media (max-width: 399.98px) {
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 {
padding: 7px 8px 7px 10px !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid
.conexgo-dashboard-card-title,
html body.cx-design-system
.conexgo-dashboard-configuration-card
.conexgo-dashboard-card-title {
font-size: 13px !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: 34px !important;
min-width: 34px !important;
height: 34px !important;
min-height: 34px !important;
flex-basis: 34px !important;
}
}
/* --------------------------------------------------------------------------
1. ALERT LIST - consistent row alignment
-------------------------------------------------------------------------- */
.alert-list-card .conexgo-pagedlist-table thead th {
vertical-align: middle !important;
}
.alert-list-card .conexgo-pagedlist-table tbody tr > td {
vertical-align: top !important;
padding-top: 17px !important;
padding-bottom: 17px !important;
}
.alert-list-card .conexgo-pagedlist-table tbody tr > td.bstable-actions {
vertical-align: top !important;
}
.alert-list-card .conexgo-pagedlist-table tbody .bstable-actions .btn-list {
align-items: flex-start !important;
justify-content: flex-start !important;
}
.alert-list-card .conexgo-pagedlist-table tbody tr > td > :first-child {
margin-top: 0;
}
.alert-list-card .conexgo-pagedlist-table tbody tr > td {
line-height: 1.42;
}
/* --------------------------------------------------------------------------
2. TABLE/DASHBOARD HIGHLIGHT - visible background, no left accent
-------------------------------------------------------------------------- */
.device-list-data-row .conexgo-pagedlist-table tbody tr,
.device-list-data-row .conexgo-pagedlist-table tbody tr > td:first-child {
border-left: 0 !important;
}
.device-list-data-row .conexgo-pagedlist-table tbody tr:hover,
.device-list-data-row .conexgo-pagedlist-table tbody tr:focus-within,
.device-list-data-row .conexgo-pagedlist-table tbody tr:hover > td,
.device-list-data-row .conexgo-pagedlist-table tbody tr:focus-within > td {
border-left: 0 !important;
background: #e7f1f7 !important;
box-shadow: none !important;
transform: none !important;
}
.cx-dashboard-page :is(
.conexgo-dashboard-active-user,
.conexgo-dashboard-latest-item,
.conexgo-dashboard-ranked-item,
.conexgo-device-overview-metric,
.conexgo-device-overview-model,
.conexgo-dashboard-latest-breakdown-item
):hover,
.cx-dashboard-page :is(
.conexgo-dashboard-active-user,
.conexgo-dashboard-latest-item,
.conexgo-dashboard-ranked-item,
.conexgo-device-overview-metric,
.conexgo-device-overview-model,
.conexgo-dashboard-latest-breakdown-item
):focus-within {
border-color: #bfd5e4 !important;
border-left-color: #bfd5e4 !important;
background: #e7f1f7 !important;
box-shadow: none !important;
transform: none !important;
}
.cx-dashboard-page
.conexgo-dashboard-resizable-card
.card-body
table
tbody
tr:hover,
.cx-dashboard-page
.conexgo-dashboard-resizable-card
.card-body
table
tbody
tr:focus-within {
background: #e7f1f7 !important;
box-shadow: none !important;
transform: none !important;
}
.cx-dashboard-page
.conexgo-dashboard-resizable-card
.card-body
table
tbody
tr:hover > td,
.cx-dashboard-page
.conexgo-dashboard-resizable-card
.card-body
table
tbody
tr:focus-within > td {
background: transparent !important;
}
/* --------------------------------------------------------------------------
3. DASHBOARD MOBILE/TABLET - natural one-column cards, no clipped headers
-------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
#conexgoDashboardSmartGrid.conexgo-dashboard-smart-grid {
width: 100% !important;
min-width: 0 !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-auto-rows: auto !important;
gap: 10px !important;
column-count: 1 !important;
column-gap: 0 !important;
}
#conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
display: block !important;
overflow: visible !important;
break-inside: avoid !important;
}
#conexgoDashboardSmartGrid .conexgo-dashboard-resizable-card {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
resize: none !important;
overflow: hidden !important;
}
#conexgoDashboardSmartGrid .conexgo-dashboard-minimized-card,
#conexgoDashboardSmartGrid .conexgo-dashboard-card-closing {
height: auto !important;
min-height: 56px !important;
max-height: none !important;
}
#conexgoDashboardSmartGrid .conexgo-dashboard-minimized-card > .card-header,
#conexgoDashboardSmartGrid .conexgo-dashboard-card-closing > .card-header {
width: 100% !important;
min-height: 56px !important;
height: auto !important;
padding: 10px 12px !important;
display: flex !important;
align-items: center !important;
overflow: visible !important;
}
#conexgoDashboardSmartGrid .conexgo-dashboard-card-header {
width: 100% !important;
min-width: 0 !important;
min-height: 34px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
overflow: visible !important;
}
#conexgoDashboardSmartGrid .conexgo-dashboard-card-title,
#conexgoDashboardSmartGrid .conexgo-dashboard-card-header h4 {
min-width: 0 !important;
margin: 0 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
font-size: 12.5px !important;
line-height: 1.3 !important;
}
#conexgoDashboardSmartGrid .conexgo-dashboard-card-action {
flex: 0 0 auto !important;
}
.cx-dashboard-page .conexgo-dashboard-resizable-card .card-body {
min-width: 0 !important;
max-width: 100% !important;
overflow-x: auto !important;
}
}
@media (max-width: 575.98px) {
#conexgoDashboardSmartGrid.conexgo-dashboard-smart-grid {
gap: 9px !important;
}
#conexgoDashboardSmartGrid .conexgo-dashboard-minimized-card,
#conexgoDashboardSmartGrid .conexgo-dashboard-card-closing {
min-height: 54px !important;
}
#conexgoDashboardSmartGrid .conexgo-dashboard-minimized-card > .card-header,
#conexgoDashboardSmartGrid .conexgo-dashboard-card-closing > .card-header {
min-height: 54px !important;
padding: 9px 10px !important;
}
#conexgoDashboardSmartGrid .conexgo-dashboard-card-title,
#conexgoDashboardSmartGrid .conexgo-dashboard-card-header h4 {
font-size: 12px !important;
}
}
/* --------------------------------------------------------------------------
4. RINGTONE - "last updated" band uses the full dialog width
-------------------------------------------------------------------------- */
.cx-dialog--ringtone .row.mt-3:has(> [style*="lightcyan"]) {
width: 100% !important;
max-width: none !important;
margin-right: 0 !important;
margin-left: 0 !important;
}
.cx-dialog--ringtone .row.mt-3:has(> [style*="lightcyan"]) > .col-md-3 {
display: none !important;
}
.cx-dialog--ringtone .row.mt-3:has(> [style*="lightcyan"]) > [style*="lightcyan"],
.cx-dialog--ringtone .cx-device-config-last-updated,
.cx-dialog--ringtone .cx-r1-ringtone-last-updated,
.cx-dialog--ringtone .device-ringtone-last-updated {
width: 100% !important;
max-width: none !important;
flex: 0 0 100% !important;
box-sizing: border-box !important;
}
/* --------------------------------------------------------------------------
6. TERMS DECLINE MINI MODAL
-------------------------------------------------------------------------- */
.cx-terms-confirm-backdrop {
position: fixed;
inset: 0;
z-index: 7200;
display: grid;
place-items: center;
padding: 16px;
background: rgba(20, 35, 50, .54);
backdrop-filter: blur(2px);
}
.cx-terms-confirm-dialog {
width: min(520px, calc(100vw - 24px));
overflow: hidden;
border: 1px solid #9eb6c9;
border-radius: 14px;
background: #fff;
box-shadow: 0 28px 75px rgba(20, 42, 62, .26);
}
.cx-terms-confirm-header {
min-height: 66px;
padding: 13px 17px;
display: flex;
align-items: center;
gap: 12px;
background: #315a7e;
color: #fff;
}
.cx-terms-confirm-header-icon {
width: 40px;
height: 40px;
flex: 0 0 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255,255,255,.2);
border-radius: 9px;
background: rgba(255,255,255,.1);
}
.cx-terms-confirm-title {
margin: 0;
color: #fff;
font-size: 19px;
font-weight: 800;
line-height: 1.25;
}
.cx-terms-confirm-body {
padding: 20px;
display: grid;
grid-template-columns: 54px minmax(0, 1fr);
gap: 16px;
align-items: center;
}
.cx-terms-confirm-body-icon {
width: 54px;
height: 54px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: #fbeaec;
color: #ad4b55;
font-size: 18px;
}
.cx-terms-confirm-message {
margin: 0;
color: #304d68;
font-size: 15px;
font-weight: 600;
line-height: 1.55;
}
.cx-terms-confirm-actions {
padding: 12px 16px;
display: flex;
justify-content: flex-end;
gap: 10px;
border-top: 1px solid #dce5ec;
background: #f7f9fb;
}
.cx-terms-confirm-actions button {
min-height: 44px;
padding: 9px 15px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border-radius: 8px;
font-size: 13px;
font-weight: 800;
cursor: pointer;
}
.cx-terms-confirm-cancel {
border: 1px solid #c6d3de;
background: #fff;
color: #526476;
}
.cx-terms-confirm-cancel:hover,
.cx-terms-confirm-cancel:focus-visible {
border-color: #aebfcd;
background: #f3f7fa;
outline: none;
}
.cx-terms-confirm-danger {
border: 1px solid #ad4b55;
background: #ad4b55;
color: #fff;
}
.cx-terms-confirm-danger:hover,
.cx-terms-confirm-danger:focus-visible {
border-color: #973e48;
background: #973e48;
outline: none;
}
@media (max-width: 575.98px) {
.cx-terms-confirm-actions {
flex-direction: column-reverse;
}
.cx-terms-confirm-actions button {
width: 100%;
}
}
/* --------------------------------------------------------------------------
8. LEGACY DEVICE MODEL DELETE - compact like the other delete confirmations
Runtime adds this class only when the Blazored modal title matches the
Device Model delete dialog, so larger edit/configuration dialogs are untouched.
-------------------------------------------------------------------------- */
.cx-device-model-delete-modal {
width: min(720px, calc(100vw - 32px)) !important;
max-width: 720px !important;
min-width: 0 !important;
margin-inline: auto !important;
}
.cx-device-model-delete-modal .blazored-modal-content,
.cx-device-model-delete-modal .modal-body {
min-width: 0 !important;
}
@media (max-width: 575.98px) {
.cx-device-model-delete-modal {
width: calc(100vw - 20px) !important;
max-width: calc(100vw - 20px) !important;
}
}
.cx-group-view-split {
--bs-gutter-x: 0 !important;
width: var(--cx-group-view-split-width, 100%) !important;
max-width: var(--cx-group-view-split-width, 100%) !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr) !important;
gap: 16px !important;
align-items: start !important;
overflow: hidden !important;
}
.cx-group-view-split > .cx-group-view-list-pane,
.cx-group-view-split > .cx-group-view-map-pane {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
flex: none !important;
overflow: hidden !important;
}
.cx-group-view-map-pane {
overflow: hidden !important;
align-self: start !important;
}
.cx-group-view-map-pane #map-canvas {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: var(--cx-group-view-pane-height, 480px) !important;
min-height: var(--cx-group-view-pane-height, 480px) !important;
max-height: var(--cx-group-view-pane-height, 480px) !important;
margin: 0 !important;
}
@media (max-width: 1099.98px) {
.cx-group-view-split {
width: 100% !important;
max-width: 100% !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 16px !important;
overflow: visible !important;
}
.cx-group-view-map-pane #map-canvas {
height: clamp(320px, 48vh, 460px) !important;
min-height: 320px !important;
max-height: 460px !important;
}
}
.cx-dropdown-auto-up > .dropdown-menu,
.cx-dropdown-auto-up .dropdown-menu {
max-height: min(72vh, 520px);
overflow-y: auto;
overscroll-behavior: contain;
}
/*
Device config modal: the "last change" strip must occupy the full content
width, matching the working SOS modal. No modal geometry or footer changes.
*/
:is(.cx-dialog--ringtone, .cx-dialog--phone-events)
.row.mt-3:has(> [style*="lightcyan"]) {
width: 100% !important;
max-width: none !important;
margin-right: 0 !important;
margin-left: 0 !important;
padding-right: 0 !important;
padding-left: 0 !important;
box-sizing: border-box !important;
}
.cx-dialog--ringtone
.row.mt-3:has(> [style*="lightcyan"]) > .col-md-3 {
display: none !important;
}
:is(.cx-dialog--ringtone, .cx-dialog--phone-events)
.row.mt-3:has(> [style*="lightcyan"]) > [style*="lightcyan"] {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
flex: 0 0 100% !important;
margin: 0 !important;
box-sizing: border-box !important;
}
:is(.cx-dialog--ringtone, .cx-dialog--phone-events)
:is(.cx-modal-layout-v21, .cx-device-config-layout, .cx-dialog-v17-form) {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
/*
Device row dropdown: neutralize old global border/transition rules that add
the thin white/light rim during hover. Keep only the restrained blue hover.
*/
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
filter: none !important;
transform: none !important;
transition: none !important;
background-clip: border-box !important;
}
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,
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item:focus-visible {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: #edf5fa !important;
color: #244963 !important;
filter: none !important;
transform: none !important;
}
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item:active {
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: #e8f2f8 !important;
color: #244963 !important;
filter: none !important;
transform: none !important;
}
/* Keep icons stable; hover changes only the row background. */
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu)
.dropdown-item > :is(i, .fa, .fas, .far, .fa-solid, .fa-regular, span[class*="fa"]) {
transform: none !important;
filter: none !important;
}
html body .mud-dialog.cx-dialog--ringtone .cx-device-config-form,
html body .mud-dialog.cx-dialog--phone-events .cx-device-config-form {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
justify-self: stretch !important;
align-self: stretch !important;
}
html body .mud-dialog.cx-dialog--ringtone .cx-device-config-form > .cx-device-config-last-updated,
html body .mud-dialog.cx-dialog--phone-events .cx-device-config-form > .cx-device-config-last-updated {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
justify-self: stretch !important;
align-self: stretch !important;
grid-column: 1 / -1 !important;
box-sizing: border-box !important;
}
html body .mud-dialog.cx-dialog--ringtone .cx-device-config-last-updated > *,
html body .mud-dialog.cx-dialog--phone-events .cx-device-config-last-updated > * {
min-width: 0 !important;
max-width: none !important;
}
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-browser-state {
position: relative !important;
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
flex: 0 0 30px !important;
display: inline-grid !important;
place-items: center !important;
border: 1px solid rgba(255, 255, 255, .28) !important;
border-radius: 7px !important;
background: rgba(255, 255, 255, .10) !important;
color: #ffffff !important;
font-size: 13px !important;
line-height: 1 !important;
cursor: help !important;
outline: 0 !important;
box-shadow: none !important;
}
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-browser-state:hover,
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-browser-state:focus-visible {
background: rgba(255, 255, 255, .16) !important;
border-color: rgba(255, 255, 255, .42) !important;
color: #ffffff !important;
box-shadow: none !important;
}
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-browser-state-dot {
position: absolute !important;
right: 3px !important;
bottom: 3px !important;
width: 7px !important;
height: 7px !important;
border: 1.5px solid #2c4c6c !important;
border-radius: 999px !important;
background: #aebac4 !important;
}
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-browser-state.is-on
.conexgo-alert-browser-state-dot {
background: #59b978 !important;
}
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-browser-state.is-off {
color: rgba(255, 255, 255, .78) !important;
}
/* Header alert queue: give the product/device type a stable visual anchor without
increasing the overall dropdown width. The existing language/action column stays
aligned at the right edge. */
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-card--classic {
grid-template-columns: 38px minmax(0, 1fr) auto !important;
column-gap: 10px !important;
row-gap: 4px !important;
align-items: start !important;
}
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-device-media {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
display: grid !important;
place-items: center !important;
align-self: start !important;
overflow: hidden !important;
border: 1px solid #d7e3ec !important;
border-radius: 10px !important;
background: #f4f8fb !important;
color: #3f7092 !important;
box-shadow: none !important;
}
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-device-media .conexgo-alert-device-image {
display: block !important;
width: 36px !important;
height: 36px !important;
max-width: 36px !important;
max-height: 36px !important;
padding: 2px !important;
object-fit: contain !important;
image-rendering: auto !important;
background: #ffffff !important;
border: 1px solid #d7e3ec !important;
border-radius: 10px !important;
filter: contrast(1.04) saturate(1.05) !important;
}
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-device-media > i {
font-size: 17px !important;
line-height: 1 !important;
}
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-classic-copy {
grid-column: 2 !important;
min-width: 0 !important;
}
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-classic-side {
grid-column: 3 !important;
min-width: 0 !important;
}
/* Central alert supervision: compact operational state, easy to scan, no extra
horizontal expansion of the data table. */
html body.cx-design-system
.alert-list-card .alert-list-workflow-cell {
min-width: 138px !important;
width: 150px !important;
max-width: 180px !important;
white-space: normal !important;
}
html body.cx-design-system
.alert-list-card .cx-alert-workflow-status {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
width: fit-content !important;
max-width: 100% !important;
padding: 5px 9px !important;
border: 1px solid #dbe5ec !important;
border-radius: 999px !important;
background: #f5f8fa !important;
color: #486176 !important;
font-size: 11.5px !important;
font-weight: 700 !important;
line-height: 1.15 !important;
}
html body.cx-design-system
.alert-list-card .cx-alert-workflow-dot {
width: 7px !important;
height: 7px !important;
flex: 0 0 7px !important;
border-radius: 999px !important;
background: #8da0af !important;
}
html body.cx-design-system
.alert-list-card .cx-alert-workflow-status.is-pending {
border-color: #efd7a8 !important;
background: #fff8e9 !important;
color: #7d5b13 !important;
}
html body.cx-design-system
.alert-list-card .cx-alert-workflow-status.is-pending .cx-alert-workflow-dot {
background: #d99b20 !important;
}
html body.cx-design-system
.alert-list-card .cx-alert-workflow-status.is-in-progress {
border-color: #bed8e8 !important;
background: #eef7fc !important;
color: #2c6285 !important;
}
html body.cx-design-system
.alert-list-card .cx-alert-workflow-status.is-in-progress .cx-alert-workflow-dot {
background: #397da9 !important;
}
html body.cx-design-system
.alert-list-card .cx-alert-workflow-status.is-completed {
border-color: #c8dfce !important;
background: #eff8f1 !important;
color: #3d704a !important;
}
html body.cx-design-system
.alert-list-card .cx-alert-workflow-status.is-completed .cx-alert-workflow-dot {
background: #5f9f6e !important;
}
html body.cx-design-system
.alert-list-card .cx-alert-workflow-operator {
display: grid !important;
gap: 1px !important;
margin-top: 6px !important;
color: #718395 !important;
font-size: 10.5px !important;
line-height: 1.25 !important;
}
html body.cx-design-system
.alert-list-card .cx-alert-workflow-operator strong {
min-width: 0 !important;
color: #2f526f !important;
font-size: 11px !important;
font-weight: 700 !important;
overflow-wrap: anywhere !important;
}
/* Call-centre dashboard: operator availability is presented as an operational
stat (role / name / duration), not as audit navigation. */
html body.cx-design-system
#conexgoDashboardSmartGrid .cx-dashboard-operator-stats-head {
display: grid !important;
grid-template-columns: 74px minmax(0, 1fr) auto !important;
gap: 10px !important;
align-items: center !important;
margin: 10px 2px 2px !important;
padding: 0 10px 7px !important;
border-bottom: 1px solid #e4ebf0 !important;
color: #718395 !important;
font-size: 10px !important;
font-weight: 750 !important;
letter-spacing: .025em !important;
text-transform: uppercase !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid .cx-dashboard-active-user-name-wrap {
display: flex !important;
min-width: 0 !important;
align-items: center !important;
gap: 8px !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid .cx-dashboard-operator-role {
display: inline-flex !important;
align-items: center !important;
flex: 0 0 auto !important;
padding: 3px 6px !important;
border: 1px solid #d7e4ec !important;
border-radius: 6px !important;
background: #f3f8fb !important;
color: #446781 !important;
font-size: 9.5px !important;
font-weight: 750 !important;
line-height: 1 !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid .conexgo-dashboard-active-user-score {
color: #315d7e !important;
font-size: 11px !important;
font-weight: 750 !important;
}
@media (max-width: 575.98px) {
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-card--classic {
grid-template-columns: 34px minmax(0, 1fr) !important;
column-gap: 8px !important;
}
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-device-media {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
}
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-device-media .conexgo-alert-device-image {
display: block !important;
width: 36px !important;
height: 36px !important;
max-width: 36px !important;
max-height: 36px !important;
padding: 2px !important;
object-fit: contain !important;
image-rendering: auto !important;
background: #ffffff !important;
border: 1px solid #d7e3ec !important;
border-radius: 10px !important;
filter: contrast(1.04) saturate(1.05) !important;
}
html body.cx-design-system
.conexgo-header-alerts
.conexgo-alert-classic-side {
grid-column: 1 / -1 !important;
justify-self: end !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid .cx-dashboard-operator-stats-head {
grid-template-columns: 62px minmax(0, 1fr) auto !important;
gap: 6px !important;
padding-inline: 4px !important;
font-size: 9px !important;
}
html body.cx-design-system
#conexgoDashboardSmartGrid .cx-dashboard-active-user-name-wrap {
display: grid !important;
gap: 4px !important;
}
}
/* The call-centre-managed SOS branch uses the same modal structure as the normal
SOS form. Keep it on the same clean grid instead of falling back to the old
grey Bootstrap-style block. This is CSS-only and does not change permissions. */
html body.cx-design-system
.mud-dialog.cx-dialog--sos
.cx-r1-sos-numbers.is-call-center-managed {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
padding: 24px 28px 26px !important;
border: 1px solid #6f96b2 !important;
border-radius: 14px !important;
background: #ffffff !important;
box-sizing: border-box !important;
}
html body.cx-design-system
.mud-dialog.cx-dialog--sos
.cx-r1-sos-numbers.is-call-center-managed
.cx-call-center-managed-notice {
width: 100% !important;
margin: 18px 0 20px !important;
padding: 13px 16px !important;
border: 1px solid #c7d5df !important;
border-left: 4px solid #5d819b !important;
border-radius: 10px !important;
background: #f0f4f7 !important;
color: #3b5568 !important;
font-size: 12.5px !important;
font-weight: 650 !important;
line-height: 1.45 !important;
box-sizing: border-box !important;
}
html body.cx-design-system
.mud-dialog.cx-dialog--sos
.cx-r1-sos-numbers.is-call-center-managed
.cx-r2-sos-number-columns,
html body.cx-design-system
.mud-dialog.cx-dialog--sos
.cx-r1-sos-numbers.is-call-center-managed
.cx-r1-sos-number-row {
display: grid !important;
grid-template-columns: minmax(220px, 270px) minmax(260px, .75fr) minmax(340px, 1.4fr) !important;
gap: 14px 22px !important;
align-items: center !important;
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
html body.cx-design-system
.mud-dialog.cx-dialog--sos
.cx-r1-sos-numbers.is-call-center-managed
.cx-r2-sos-number-columns {
margin: 0 0 8px !important;
padding: 0 8px 8px !important;
border-bottom: 1px solid #e1e9ef !important;
color: #4f6375 !important;
font-size: 11px !important;
font-weight: 750 !important;
letter-spacing: .025em !important;
text-transform: uppercase !important;
}
html body.cx-design-system
.mud-dialog.cx-dialog--sos
.cx-r1-sos-numbers.is-call-center-managed
.cx-r1-sos-number-row {
padding: 7px 8px !important;
}
html body.cx-design-system
.mud-dialog.cx-dialog--sos
.cx-r1-sos-numbers.is-call-center-managed
.cx-r1-sos-number-row > label {
margin: 0 !important;
color: #38536a !important;
font-size: 11.5px !important;
font-weight: 750 !important;
line-height: 1.25 !important;
text-align: right !important;
text-transform: uppercase !important;
}
html body.cx-design-system
.mud-dialog.cx-dialog--sos
.cx-r1-sos-numbers.is-call-center-managed
.cx-r1-sos-number-row .form-control {
width: 100% !important;
min-width: 0 !important;
height: 48px !important;
margin: 0 !important;
border: 1px solid #c9d8e3 !important;
border-radius: 10px !important;
background: #f3f6f8 !important;
color: #546a7b !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
@media (max-width: 1050px) {
html body.cx-design-system
.mud-dialog.cx-dialog--sos
.cx-r1-sos-numbers.is-call-center-managed
.cx-r2-sos-number-columns {
display: none !important;
}
html body.cx-design-system
.mud-dialog.cx-dialog--sos
.cx-r1-sos-numbers.is-call-center-managed
.cx-r1-sos-number-row {
grid-template-columns: minmax(0, 1fr) !important;
gap: 7px !important;
padding: 10px 0 !important;
}
html body.cx-design-system
.mud-dialog.cx-dialog--sos
.cx-r1-sos-numbers.is-call-center-managed
.cx-r1-sos-number-row > label {
text-align: left !important;
}
}
html body .cx-data-log-unified-grid.cx-data-log-unified-grid--atlas {
grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)) !important;
}
html body .cx-data-log-atlas-event-filter .device-filter-label-icon {
color: #3f6f98 !important;
}
@media (max-width: 991.98px) {
html body .cx-data-log-unified-grid.cx-data-log-unified-grid--atlas {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 639.98px) {
html body .cx-data-log-unified-grid.cx-data-log-unified-grid--atlas {
grid-template-columns: minmax(0, 1fr) !important;
}
}
/* ========================================================================== */
/* Loaded after legacy overrides from PrivateMainLayout. */
/* ========================================================================== */
/* Alert comments: one date per day, then compact text + author/time together. */
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .cx-alert-comment-day {
display: flex !important;
flex-direction: column !important;
gap: 5px !important;
padding: 9px 12px !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .cx-alert-comment-entry {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 3px !important;
padding: 2px 0 5px !important;
min-width: 0 !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .cx-alert-comment-entry + .cx-alert-comment-entry {
margin-top: 3px !important;
padding-top: 7px !important;
border-top: 1px solid rgba(205, 169, 55, .20) !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .cx-alert-comment-meta {
display: inline-flex !important;
justify-content: flex-start !important;
gap: 6px !important;
font-size: 11px !important;
white-space: normal !important;
}
html body.cx-design-system .cx-dialog--alert-answer .alert-answer-comment-history {
max-height: 185px !important;
overflow: auto !important;
}
html body.cx-design-system .cx-dialog--alert-answer .alert-answer-comment-editor {
padding: 9px 11px !important;
}
html body.cx-design-system .cx-dialog--alert-answer .alert-answer-textarea {
min-height: 78px !important;
max-height: 150px !important;
}
/* Alert documents remain discoverable at count 0. */
html body .cx-alert-documents-alert-empty {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
padding: 11px 12px !important;
border: 1px dashed #c9d9e5 !important;
border-radius: 8px !important;
background: #f8fbfd !important;
color: #536d82 !important;
}
html body .cx-alert-documents-alert-empty > i {
margin-top: 2px !important;
color: #5b82a1 !important;
}
html body .cx-alert-documents-alert-empty strong,
html body .cx-alert-documents-alert-empty span {
display: block !important;
}
html body .cx-alert-documents-alert-empty strong {
margin-bottom: 2px !important;
color: #315a7d !important;
font-size: 12px !important;
}
html body .cx-alert-documents-alert-empty span {
font-size: 11.5px !important;
line-height: 1.4 !important;
}
/* Definitive removal of the old translateY(-1px) "lift" from menus/actions. */
html body.cx-design-system :is(
.dropdown-menu .dropdown-item,
.dropdown-toggle,
.slide-menu .slide-item,
.side-menu__item,
.device-list-action-menu .dropdown-item,
.cx-device-config-choice-card,
.cx-ringtone-preview-button,
.cx-location-schedule-mode-button,
.cx-alert-documents-add,
.cx-alert-document-preview-card,
.cx-alert-document-row-actions button,
.cx-document-upload-button,
.conexgo-account-document-action,
.cx-dialog-action,
.alert-answer-toggle,
.alert-view-comments-toggle
):is(:hover, :focus-visible, :active) {
transform: none !important;
translate: none !important;
}
html body.cx-design-system .device-list-action-menu.show {
max-height: min(360px, calc(100dvh - 170px)) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain !important;
scrollbar-width: thin !important;
}
html body.cx-design-system .device-list-action-menu.show .dropdown-item:is(:hover, :focus-visible) {
background: #f4f8fb !important;
color: #294b68 !important;
box-shadow: none !important;
}
html body.cx-design-system .slide-menu .slide-item:is(:hover, :focus-visible),
html body.cx-design-system .side-menu__item:is(:hover, :focus-visible) {
box-shadow: none !important;
}
/* Ring Tone: radio selection and Preview are separate interactive controls. */
html body .cx-dialog--ringtone .cx-ringtone-choice-grid .cx-device-config-choice-card {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: stretch !important;
min-height: 66px !important;
padding: 0 !important;
overflow: hidden !important;
transform: none !important;
transition: border-color .14s ease, background-color .14s ease, box-shadow .14s ease !important;
}
html body .cx-dialog--ringtone .cx-ringtone-choice-select {
position: relative !important;
min-width: 0 !important;
min-height: 64px !important;
margin: 0 !important;
padding: 14px 10px 14px 48px !important;
display: flex !important;
align-items: center !important;
cursor: pointer !important;
}
html body .cx-dialog--ringtone .cx-ringtone-choice-select--silent {
grid-column: 1 / -1 !important;
}
html body .cx-dialog--ringtone .cx-ringtone-preview-button {
position: static !important;
align-self: center !important;
min-width: 96px !important;
min-height: 38px !important;
margin: 0 11px 0 8px !important;
padding: 0 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
border: 1px solid #bfd3e2 !important;
border-radius: 7px !important;
background: #fff !important;
color: #315f82 !important;
box-shadow: none !important;
transform: none !important;
}
html body .cx-dialog--ringtone .cx-ringtone-preview-button:is(:hover, :focus-visible) {
background: #edf5fa !important;
border-color: #9fbed3 !important;
transform: none !important;
}
/* Location per-day controls avoid InputBase entirely. */
html body .cx-location-day-time {
width: 100% !important;
min-width: 0 !important;
min-height: 42px !important;
}
/* Notification View: target the actual Mud dialog root via the inner marker. */
html body .mud-dialog:has(.cx-r187752-notification-marker) {
width: min(780px, calc(100vw - 28px)) !important;
max-width: min(780px, calc(100vw - 28px)) !important;
max-height: min(680px, calc(100dvh - 28px)) !important;
}
html body .mud-dialog:has(.cx-r187752-notification-marker) .mud-dialog-content {
padding: 10px 12px !important;
overflow: auto !important;
}
html body .mud-dialog:has(.cx-r187752-notification-marker) .cx-r1-section {
padding: 11px 12px !important;
}
html body .mud-dialog:has(.cx-r187752-notification-marker) .notification-view-form {
gap: 8px !important;
}
html body .mud-dialog:has(.cx-r187752-notification-marker) .notification-view-priority-card {
min-height: 50px !important;
padding: 8px 10px !important;
}
html body .mud-dialog:has(.cx-r187752-notification-marker) .notification-view-title-box {
min-height: 40px !important;
padding: 8px 11px !important;
}
html body .mud-dialog:has(.cx-r187752-notification-marker) .notification-view-message-box {
min-height: 78px !important;
max-height: 170px !important;
padding: 10px 11px !important;
overflow: auto !important;
}
html body .mud-dialog:has(.cx-r187752-notification-marker) .mud-dialog-actions {
padding: 9px 12px !important;
}
/* Loading feedback stays on the action being executed. */
html body .cx-document-upload-button {
width: 100% !important;
min-height: 40px !important;
padding: 0 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
border-color: #3d6287 !important;
background: #3d6287 !important;
color: #fff !important;
box-shadow: none !important;
}
html body .cx-document-upload-message {
color: #6c7d8b !important;
font-size: 12px !important;
}
html body .conexgo-account-document-action .spinner-border {
width: 14px !important;
height: 14px !important;
border-width: 2px !important;
}
@media (max-width: 720px) {
html body .cx-dialog--ringtone .cx-ringtone-choice-grid .cx-device-config-choice-card {
grid-template-columns: minmax(0, 1fr) !important;
}
html body .cx-dialog--ringtone .cx-ringtone-preview-button {
width: calc(100% - 22px) !important;
margin: 0 11px 11px !important;
}
html body .mud-dialog:has(.cx-r187752-notification-marker) {
width: calc(100vw - 16px) !important;
max-width: calc(100vw - 16px) !important;
max-height: calc(100dvh - 16px) !important;
}
}
/* Freeze the split-control geometry itself. Do not change its approved colors. */
html body.cx-design-system :is(
.device-list-action-group,
.conexgo-row-action-group,
.account-list-cell-name .conexgo-row-action-group
),
html body.cx-design-system :is(
.device-list-action-group,
.conexgo-row-action-group,
.account-list-cell-name .conexgo-row-action-group
):is(:hover, :focus, :focus-within, :active) {
transform: none !important;
translate: none !important;
scale: 1 !important;
animation: none !important;
will-change: auto !important;
}
/* The left name button and the dropdown toggle must never lift either. */
html body.cx-design-system :is(
.device-list-name-button,
.account-list-name-button,
.device-list-action-toggle,
.conexgo-row-action-toggle,
.dropdown-toggle
),
html body.cx-design-system :is(
.device-list-name-button,
.account-list-name-button,
.device-list-action-toggle,
.conexgo-row-action-toggle,
.dropdown-toggle
):is(:hover, :focus, :focus-visible, :active),
html body.cx-design-system :is(
.device-list-action-toggle,
.conexgo-row-action-toggle,
.dropdown-toggle
)[aria-expanded="true"] {
transform: none !important;
translate: none !important;
scale: 1 !important;
filter: none !important;
animation: none !important;
will-change: auto !important;
}
/* Popup container is static. Keep its existing placement and depth. */
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu
),
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu
).show {
transform: none !important;
translate: none !important;
scale: 1 !important;
animation: none !important;
will-change: auto !important;
}
/* Every popup row keeps identical geometry in every pointer state. */
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu
) :is(li, .dropdown-item),
html body.cx-design-system .conexgo-pagedlist-table .dropdown-menu :is(li, .dropdown-item),
html body.cx-design-system .account-list-cell-name .dropdown-menu :is(li, .dropdown-item) {
transform: none !important;
translate: none !important;
scale: 1 !important;
animation: none !important;
will-change: auto !important;
}
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu
) .dropdown-item {
margin-block: 0 !important;
box-shadow: none !important;
filter: none !important;
transform: none !important;
translate: none !important;
scale: 1 !important;
transition: background-color 90ms ease-out, color 90ms ease-out !important;
}
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu
).show .dropdown-item:is(:hover, :focus-visible, :active),
html body.cx-design-system .conexgo-pagedlist-table .dropdown-menu.show .dropdown-item:is(:hover, :focus-visible, :active),
html body.cx-design-system .account-list-cell-name .dropdown-menu.show .dropdown-item:is(:hover, :focus-visible, :active),
html body.cx-design-system .table-responsive .dropdown-menu.show .dropdown-item:is(:hover, :focus-visible, :active) {
background: #f4f8fb !important;
background-color: #f4f8fb !important;
background-image: none !important;
color: #294b68 !important;
border-color: transparent !important;
outline-offset: 0 !important;
box-shadow: none !important;
filter: none !important;
transform: none !important;
translate: none !important;
scale: 1 !important;
}
/* Icons/text/pseudo-layers cannot jump independently from the row. */
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu
) .dropdown-item > *,
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu
) .dropdown-item::before,
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu
) .dropdown-item::after {
transform: none !important;
translate: none !important;
scale: 1 !important;
animation: none !important;
filter: none !important;
text-shadow: none !important;
will-change: auto !important;
}
/* Any decorative pseudo layer injected by old themes stays disabled on hover. */
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu
).show .dropdown-item:is(:hover, :active)::before,
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu
).show .dropdown-item:is(:hover, :active)::after {
content: none !important;
display: none !important;
opacity: 0 !important;
box-shadow: none !important;
transform: none !important;
translate: none !important;
}
/* ========================================================================== */
/* Loaded last. Fixes geometry-only hover, Usage Log parity, emergency review,*/
/* alert comments and alert resource panels. */
/* ========================================================================== */
/* --- Row action menus: keep the soft blue hover, freeze every geometry input. --- */
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:focus,
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu) .dropdown-item:focus-visible,
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu) .dropdown-item:active {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
min-height: 40px !important;
margin: 0 !important;
padding: 8px 10px !important;
gap: 9px !important;
column-gap: 9px !important;
text-align: left !important;
text-indent: 0 !important;
transform: none !important;
translate: none !important;
scale: none !important;
box-shadow: none !important;
transition: background-color .12s ease, color .12s ease !important;
}
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 {
background: #f4f8fb !important;
color: #294b68 !important;
}
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu) .dropdown-item > :is(i, span[class*="fa"], svg),
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu) .dropdown-item:hover > :is(i, span[class*="fa"], svg),
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu) .dropdown-item:focus-visible > :is(i, span[class*="fa"], svg) {
flex: 0 0 18px !important;
width: 18px !important;
min-width: 18px !important;
max-width: 18px !important;
margin: 0 !important;
padding: 0 !important;
position: static !important;
inset: auto !important;
transform: none !important;
translate: none !important;
scale: none !important;
}
html body.cx-design-system :is(.device-list-action-group, .conexgo-row-action-group) > :is(button, a),
html body.cx-design-system :is(.device-list-action-group, .conexgo-row-action-group) > :is(button, a):is(:hover, :focus, :focus-visible, :active) {
transform: none !important;
translate: none !important;
scale: none !important;
}
/* --- Usage Log: same structural language as Data / SMS / Voice logs. --- */
html body.cx-design-system .cx-log-list-card--usage {
overflow: visible !important;
}
html body.cx-design-system .cx-log-list-card--usage > .cx-log-list-toolbar {
background: #2c4c6c !important;
color: #fff !important;
border: 0 !important;
}
html body.cx-design-system .cx-usage-log-notice--canonical {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
margin: 0 0 14px !important;
padding: 10px 12px !important;
border: 1px solid #d5e2ec !important;
border-radius: 9px !important;
background: #f7fafc !important;
color: #4d6476 !important;
}
html body.cx-design-system .cx-usage-log-notice--canonical strong,
html body.cx-design-system .cx-usage-log-notice--canonical span {
display: block !important;
}
html body.cx-design-system .cx-usage-log-notice--canonical strong {
color: #294f6d !important;
margin-bottom: 2px !important;
}
html body.cx-design-system .cx-usage-device-name,
html body.cx-design-system .cx-usage-device-id {
display: block !important;
}
html body.cx-design-system .cx-usage-device-id {
color: #718497 !important;
font-size: 11px !important;
margin-top: 2px !important;
}
html body.cx-design-system .cx-usage-session-list {
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
min-width: 220px !important;
}
html body.cx-design-system .cx-usage-device-context-value {
min-height: 42px !important;
display: flex !important;
align-items: center !important;
padding: 8px 11px !important;
border: 1px solid #cbd9e5 !important;
border-radius: 7px !important;
background: #f7fafc !important;
color: #315a79 !important;
}
/* --- Emergency contact review: request-only admin view, owner response form. --- */
html body.cx-design-system .cx-emergency-review-layout {
display: grid !important;
gap: 14px !important;
}
html body.cx-design-system .cx-emergency-review-intro,
html body.cx-design-system .cx-emergency-review-status {
display: flex !important;
align-items: flex-start !important;
gap: 11px !important;
padding: 12px 14px !important;
border: 1px solid #d5e2ec !important;
border-radius: 10px !important;
background: #f7fafc !important;
}
html body.cx-design-system .cx-emergency-review-intro-icon,
html body.cx-design-system .cx-emergency-review-status > i {
color: #35698d !important;
margin-top: 2px !important;
}
html body.cx-design-system .cx-emergency-review-intro strong,
html body.cx-design-system .cx-emergency-review-intro span,
html body.cx-design-system .cx-emergency-review-status strong,
html body.cx-design-system .cx-emergency-review-status span {
display: block !important;
}
html body.cx-design-system .cx-emergency-review-intro strong,
html body.cx-design-system .cx-emergency-review-status strong {
color: #234f70 !important;
margin-bottom: 3px !important;
}
html body.cx-design-system .cx-emergency-review-status.is-pending {
background: #fff9e9 !important;
border-color: #ead9a2 !important;
}
html body.cx-design-system .cx-emergency-review-status.is-kept,
html body.cx-design-system .cx-emergency-review-status.is-updated {
background: #f0f8f3 !important;
border-color: #c7dfcf !important;
}
html body.cx-design-system .cx-emergency-review-current-grid,
html body.cx-design-system .cx-device-emergency-editor-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px !important;
}
html body.cx-design-system .cx-emergency-review-readonly label {
display: block !important;
margin-bottom: 6px !important;
color: #294f6d !important;
font-weight: 700 !important;
}
html body.cx-design-system .cx-emergency-review-readonly-value {
min-height: 132px !important;
max-height: 210px !important;
overflow: auto !important;
white-space: pre-wrap !important;
padding: 11px 12px !important;
border: 1px solid #d4e0e9 !important;
border-radius: 8px !important;
background: #f8fafc !important;
color: #40586c !important;
}
html body.cx-design-system .cx-emergency-review-message {
min-height: 96px !important;
}
html body.cx-design-system .cx-notification-emergency-review {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
padding: 10px 12px !important;
border: 1px solid #d5e2ec !important;
border-radius: 9px !important;
background: #f7fafc !important;
}
html body.cx-design-system .cx-notification-emergency-review strong,
html body.cx-design-system .cx-notification-emergency-review span {
display: block !important;
}
/* --- Alert comments: compact history, clear hierarchy, no giant yellow block. --- */
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 #d5e1ea !important;
border-radius: 10px !important;
background: #fff !important;
overflow: hidden !important;
box-shadow: none !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: 48px !important;
padding: 10px 13px !important;
background: #fff7dc !important;
border: 0 !important;
border-bottom: 1px solid #eadba9 !important;
color: #57440e !important;
}
html body.cx-design-system .cx-dialog--alert-answer .alert-answer-comment-collapse-inner,
html body.cx-design-system .cx-dialog--alert-view .alert-view-comments-collapse-inner {
padding: 0 !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .cx-alert-comment-day {
display: flex !important;
flex-direction: column !important;
gap: 7px !important;
padding: 10px 12px !important;
background: #fff !important;
border: 0 !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .cx-alert-comment-day + .cx-alert-comment-day {
border-top: 1px solid #e4ebf0 !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .cx-alert-comment-date {
align-self: flex-start !important;
margin: 0 !important;
padding: 3px 8px !important;
border: 1px solid #d7e1e8 !important;
border-radius: 999px !important;
background: #f5f8fa !important;
color: #536a7d !important;
font-size: 11px !important;
font-weight: 700 !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;
gap: 8px 12px !important;
align-items: start !important;
padding: 8px 9px !important;
border: 1px solid #e2e8ed !important;
border-radius: 8px !important;
background: #fbfcfd !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .cx-alert-comment-entry + .cx-alert-comment-entry {
margin-top: 0 !important;
border-top: 1px solid #e2e8ed !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .cx-alert-comment-text {
min-width: 0 !important;
color: #263b4b !important;
line-height: 1.45 !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;
gap: 6px !important;
color: #718392 !important;
font-size: 11px !important;
white-space: nowrap !important;
}
html body.cx-design-system .cx-dialog--alert-answer .alert-answer-comment-history,
html body.cx-design-system .cx-dialog--alert-view .alert-view-comment-panel-content {
max-height: 220px !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
}
html body.cx-design-system .cx-dialog--alert-answer .alert-answer-comment-editor {
padding: 10px 12px !important;
border-top: 1px solid #e3e9ee !important;
background: #fff !important;
}
html body.cx-design-system .cx-dialog--alert-answer .alert-answer-textarea {
min-height: 84px !important;
max-height: 150px !important;
}
/* --- Emergency info + service info + documents are one resource system. --- */
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .alert-answer-action-row {
display: flex !important;
flex-wrap: wrap !important;
align-items: stretch !important;
gap: 10px !important;
margin-top: 12px !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .alert-answer-action-row > .alert-answer-toggle,
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .alert-answer-action-row > .cx-alert-documents-toggle-row > .alert-answer-toggle {
flex: 1 1 210px !important;
min-height: 54px !important;
justify-content: flex-start !important;
padding: 10px 14px !important;
border-radius: 9px !important;
transform: none !important;
translate: none !important;
}
html body.cx-design-system .cx-alert-documents.is-alert-panel,
html body.cx-design-system .cx-alert-documents.is-alert-panel > .cx-alert-documents-toggle-row {
display: contents !important;
}
html body.cx-design-system .cx-alert-documents-count {
margin-left: auto !important;
min-width: 26px !important;
height: 26px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 999px !important;
background: #3f72a6 !important;
color: #fff !important;
font-size: 11px !important;
font-weight: 800 !important;
}
html body.cx-design-system .cx-alert-resource-panel,
html body.cx-design-system .cx-alert-resource-detail {
flex: 1 0 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 11px 12px !important;
border: 1px solid #d7e2ea !important;
border-radius: 9px !important;
background: #f8fafc !important;
}
html body.cx-design-system .cx-alert-resource-panel-title {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin-bottom: 9px !important;
color: #285776 !important;
font-weight: 800 !important;
}
html body.cx-design-system .cx-alert-resource-panel-title .cx-alert-documents-count {
margin-left: 2px !important;
}
html body.cx-design-system .cx-alert-resource-empty {
display: flex !important;
align-items: center !important;
gap: 9px !important;
padding: 9px 10px !important;
color: #667b8c !important;
background: #fff !important;
border: 1px dashed #cad8e2 !important;
border-radius: 7px !important;
}
html body.cx-design-system .cx-alert-document-resource-list {
display: grid !important;
gap: 8px !important;
}
html body.cx-design-system .cx-alert-document-preview-card {
width: 100% !important;
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 10px !important;
padding: 9px 10px !important;
border: 1px solid #d8e3eb !important;
border-radius: 8px !important;
background: #fff !important;
color: #294f6d !important;
text-align: left !important;
transform: none !important;
translate: none !important;
}
html body.cx-design-system .alert-view-resource-actions {
margin-bottom: 12px !important;
}
@media (max-width: 760px) {
html body.cx-design-system .cx-emergency-review-current-grid,
html body.cx-design-system .cx-device-emergency-editor-grid {
grid-template-columns: 1fr !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .cx-alert-comment-entry {
grid-template-columns: 1fr !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .alert-answer-action-row > .alert-answer-toggle {
flex-basis: 100% !important;
}
}
/* ========================================================================== */
/* ========================================================================== */
/* Usage Log: same visual density as the established Voice/Data log screens. */
html body.cx-design-system .cx-log-list-card--usage .card-body.cx-usage-log-body {
padding: 12px 14px 14px !important;
}
html body.cx-design-system .cx-usage-log-filter-panel {
margin-bottom: 10px !important;
}
html body.cx-design-system .cx-usage-log-filter-panel .cx-filter-disclosure-toggle {
min-height: 48px !important;
padding: 8px 14px !important;
}
html body.cx-design-system .cx-usage-log-filter-panel .cx-filter-disclosure-inner {
padding: 10px 14px 11px !important;
}
html body.cx-design-system .cx-usage-log-filter-row {
display: grid !important;
grid-template-columns: minmax(180px, 220px) minmax(220px, 275px) minmax(0, 1fr) !important;
gap: 10px 14px !important;
align-items: end !important;
}
html body.cx-design-system .cx-usage-log-filter-field {
min-width: 0 !important;
}
html body.cx-design-system .cx-usage-log-filter-field .device-filter-label {
margin-bottom: 5px !important;
}
html body.cx-design-system .cx-usage-log-filter-field .device-filter-control,
html body.cx-design-system .cx-usage-log-filter-field .cx-select-shell {
width: 100% !important;
max-width: none !important;
}
html body.cx-design-system .cx-usage-log-inline-note {
min-width: 0 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
min-height: 42px !important;
padding: 6px 10px !important;
border-left: 1px solid #dbe4eb !important;
color: #617487 !important;
font-size: 12px !important;
line-height: 1.35 !important;
}
html body.cx-design-system .cx-usage-log-inline-note > i {
color: #477796 !important;
flex: 0 0 auto !important;
}
html body.cx-design-system .cx-usage-log-inline-note strong {
color: #315876 !important;
}
html body.cx-design-system .cx-usage-log-table-wrap {
margin-top: 0 !important;
}
html body.cx-design-system .cx-log-list-card--usage .cx-table-column-header__layout {
min-height: 42px !important;
}
html body.cx-design-system .cx-log-list-card--usage .cx-table-column-header__icon {
flex: 0 0 32px !important;
width: 32px !important;
height: 32px !important;
}
html body.cx-design-system .cx-log-list-card--usage .cx-table-column-header__label {
font-size: 12px !important;
line-height: 1.2 !important;
}
html body.cx-design-system .cx-log-list-card--usage .cx-usage-session-list {
min-width: 180px !important;
gap: 2px !important;
}
html body.cx-design-system .cx-log-list-card--usage tbody td {
padding-top: 9px !important;
padding-bottom: 9px !important;
}
/* Emergency review modal: clear fieldsets, icon, title and short help per field. */
html body.cx-design-system .cx-emergency-review-dialog {
width: min(960px, calc(100vw - 36px)) !important;
max-width: 960px !important;
}
html body.cx-design-system .cx-emergency-review-layout,
html body.cx-design-system .cx-device-config-layout {
gap: 12px !important;
}
html body.cx-design-system .cx-emergency-review-dialog .cx-r1-section {
padding: 16px 18px 17px !important;
}
html body.cx-design-system .cx-emergency-review-dialog .cx-r1-section-description {
margin: 4px 0 12px !important;
padding: 8px 10px !important;
font-size: 12px !important;
}
html body.cx-design-system .cx-emergency-review-status {
margin-top: 10px !important;
padding: 9px 11px !important;
}
html body.cx-design-system .cx-emergency-field {
min-width: 0 !important;
padding: 11px 12px !important;
border: 1px solid #d8e3eb !important;
border-radius: 9px !important;
background: #fbfcfd !important;
}
html body.cx-design-system .cx-emergency-field-heading {
display: flex !important;
align-items: flex-start !important;
gap: 9px !important;
margin-bottom: 8px !important;
}
html body.cx-design-system .cx-emergency-field-icon {
flex: 0 0 34px !important;
width: 34px !important;
height: 34px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid #d8e4ed !important;
border-radius: 9px !important;
background: #f2f7fa !important;
color: #35698d !important;
}
html body.cx-design-system .cx-emergency-field-heading > div {
min-width: 0 !important;
}
html body.cx-design-system .cx-emergency-field-heading label {
display: block !important;
margin: 0 !important;
color: #244f6d !important;
font-weight: 800 !important;
}
html body.cx-design-system .cx-emergency-field-heading span:not(.cx-emergency-field-icon) {
display: block !important;
margin-top: 2px !important;
color: #6a7d8d !important;
font-size: 11px !important;
line-height: 1.35 !important;
}
html body.cx-design-system .cx-emergency-review-readonly-value {
min-height: 100px !important;
max-height: 170px !important;
padding: 9px 10px !important;
}
html body.cx-design-system .cx-emergency-review-message {
min-height: 78px !important;
}
html body.cx-design-system .cx-device-emergency-editor-grid {
gap: 10px !important;
}
html body.cx-design-system .cx-device-emergency-notes-field {
margin-top: 10px !important;
}
/* Alert Answer/View: keep the resource row compact; map remains available. */
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .alert-answer-action-row {
gap: 8px !important;
margin-top: 9px !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .alert-answer-action-row > .alert-answer-toggle,
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .alert-answer-action-row > .cx-alert-documents-toggle-row > .alert-answer-toggle {
min-height: 46px !important;
padding: 8px 12px !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .alert-answer-map-toolbar {
min-height: 46px !important;
padding-top: 8px !important;
padding-bottom: 8px !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .alert-answer-map-canvas {
height: 240px !important;
min-height: 240px !important;
}
@media (max-width: 980px) {
html body.cx-design-system .cx-usage-log-filter-row {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
html body.cx-design-system .cx-usage-log-inline-note {
grid-column: 1 / -1 !important;
border-left: 0 !important;
border-top: 1px solid #dbe4eb !important;
padding-left: 0 !important;
}
}
@media (max-width: 760px) {
html body.cx-design-system .cx-usage-log-filter-row {
grid-template-columns: 1fr !important;
}
html body.cx-design-system .cx-usage-log-inline-note {
grid-column: auto !important;
}
html body.cx-design-system .cx-emergency-review-dialog {
width: calc(100vw - 16px) !important;
}
}
html body.cx-design-system .cx-usage-log-context-note {
display: flex;
align-items: flex-start;
gap: 10px;
margin: 0 0 12px;
padding: 8px 10px;
color: #587087;
font-size: .86rem;
line-height: 1.45;
}
html body.cx-design-system .cx-usage-log-context-note > i {
margin-top: 3px;
color: #4d7598;
}
html body.cx-design-system .cx-usage-log-body > .cx-usage-log-table-wrap {
margin-top: 0;
}
html body.cx-design-system .cx-emergency-review-compose-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-bottom: 14px;
}
html body.cx-design-system .cx-emergency-review-automation {
margin-top: 4px;
}
html body.cx-design-system .cx-emergency-automation-toggle {
display: flex;
align-items: center;
gap: 10px;
min-height: 46px;
padding: 10px 12px;
border: 1px solid #d6e2ec;
border-radius: 10px;
background: #f8fbfd;
color: #294b68;
font-weight: 650;
}
html body.cx-design-system .cx-emergency-automation-toggle input {
width: 18px;
height: 18px;
margin: 0;
}
html body.cx-design-system .cx-emergency-automation-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
}
@media (max-width: 767.98px) {
html body.cx-design-system .cx-emergency-review-compose-grid {
grid-template-columns: 1fr;
}
html body.cx-design-system .cx-emergency-automation-actions > .btn {
width: 100%;
}
}
html body.cx-design-system .cx-alert-product-identity {
width: 52px;
height: 52px;
flex: 0 0 52px;
display: grid;
place-items: center;
border: 1px solid #d7e3ec;
border-radius: 10px;
background: #fff;
overflow: hidden;
}
html body.cx-design-system .cx-alert-product-image {
width: 100%;
height: 100%;
object-fit: contain;
padding: 5px;
}
html body.cx-design-system .alert-view-summary-main:has(.cx-alert-product-identity) {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
column-gap: 12px;
align-items: center;
}
html body.cx-design-system .alert-view-summary-main:has(.cx-alert-product-identity)
> :is(.alert-view-badge, .alert-view-device-title, .alert-view-account-subtitle) {
grid-column: 2;
}
@media (max-width: 767.98px) {
html body.cx-design-system .cx-alert-product-identity {
width: 44px;
height: 44px;
flex-basis: 44px;
}
html body.cx-design-system .alert-view-summary-main:has(.cx-alert-product-identity) {
grid-template-columns: 44px minmax(0, 1fr);
}
}
@keyframes cx-modal-validation-pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
}
20%, 60% {
border-color: #dc3545 !important;
box-shadow:
0 0 0 3px rgba(220, 53, 69, .17),
0 0 0 7px rgba(220, 53, 69, .06);
}
40%, 80% {
border-color: #f04457 !important;
box-shadow:
0 0 0 2px rgba(220, 53, 69, .11),
0 0 0 5px rgba(220, 53, 69, .04);
}
}
.mud-dialog .cx-modal-validation-flash,
.modal .cx-modal-validation-flash,
[role="dialog"] .cx-modal-validation-flash {
animation: cx-modal-validation-pulse .52s ease-in-out 3 !important;
border-color: #dc3545 !important;
scroll-margin-top: 92px !important;
scroll-margin-bottom: 92px !important;
}
.mud-dialog .validation-message,
.mud-dialog .field-validation-error,
.mud-dialog .cx-recipient-error,
.mud-dialog .invalid-feedback,
.modal .validation-message,
.modal .field-validation-error,
.modal .cx-recipient-error,
.modal .invalid-feedback,
[role="dialog"] .validation-message,
[role="dialog"] .field-validation-error,
[role="dialog"] .cx-recipient-error,
[role="dialog"] .invalid-feedback {
display: flex !important;
align-items: flex-start !important;
gap: 7px !important;
width: 100% !important;
max-width: 100% !important;
min-height: 38px !important;
box-sizing: border-box !important;
margin-top: 7px !important;
padding: 8px 12px !important;
border: 1px solid rgba(220, 53, 69, .28) !important;
border-left: 4px solid #dc3545 !important;
border-radius: 8px !important;
background: #fff5f6 !important;
color: #a82031 !important;
font-size: .86rem !important;
font-weight: 750 !important;
line-height: 1.35 !important;
}
.mud-dialog .is-invalid,
.mud-dialog [aria-invalid="true"],
.modal .is-invalid,
.modal [aria-invalid="true"],
[role="dialog"] .is-invalid,
[role="dialog"] [aria-invalid="true"] {
border-color: #dc3545 !important;
}
.cx-emergency-automation-date {
display: grid;
gap: 6px;
margin: 12px 0 4px;
padding: 12px 14px;
border: 1px solid #d7e3ed;
border-radius: 10px;
background: #f8fbfd;
}
.cx-emergency-automation-date > label {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
color: #294f70;
font-weight: 800;
}
.cx-emergency-automation-date > small {
color: #66798a;
line-height: 1.45;
}
/* Data logs: the trigger must wrap the text, otherwise the fixed popover is
anchored to the far edge of the whole table cell. */
html body.cx-design-system .cx-log-list-card .cx-data-log-trigger {
display: inline-block !important;
width: auto !important;
max-width: 100% !important;
vertical-align: top !important;
}
html body.cx-design-system .cx-data-log-popover-surface {
width: min(560px, calc(100vw - 24px)) !important;
max-width: min(560px, calc(100vw - 24px)) !important;
max-height: min(58vh, 560px) !important;
padding: 12px 14px !important;
scrollbar-gutter: stable !important;
}
html body.cx-design-system .cx-data-log-popover-content {
gap: 9px !important;
}
html body.cx-design-system .cx-data-log-section-title {
padding: 7px 9px !important;
}
html body.cx-design-system .cx-data-log-section-body {
padding: 6px 9px !important;
}
html body.cx-design-system .cx-data-log-popover-row {
padding: 4px 0 !important;
}
/* Call-center metadata: no selected alert is useful configuration information,
not a fatal device error. */
html body.cx-design-system .callcenter-phone-icon {
margin-right: 5px !important;
color: #16823b !important;
font-size: 12pt !important;
}
html body.cx-design-system .callcenter-status-hint {
width: 18px !important;
height: 18px !important;
margin-right: 5px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
vertical-align: -1px !important;
border: 1px solid #ead8aa !important;
border-radius: 50% !important;
background: #fff9e9 !important;
color: #9a6a12 !important;
font-size: 9px !important;
line-height: 1 !important;
cursor: help !important;
}
html body.cx-design-system .callcenter-company {
vertical-align: middle !important;
}
/* B-DOT: keep the low-battery setting compact instead of stretching the
percentage field and help copy across the full dialog width. */
html body.cx-design-system .mud-dialog.cx-dialog-root.cx-r1-device-dot .device-dot-battery-section {
padding: 12px !important;
}
html body.cx-design-system .cx-r1-device-dot .device-dot-battery-field-grid {
grid-template-columns: minmax(150px, 205px) minmax(260px, 520px) !important;
justify-content: start !important;
align-items: center !important;
gap: 10px 14px !important;
}
html body.cx-design-system .cx-r1-device-dot .device-dot-battery-input {
height: 40px !important;
padding-right: 44px !important;
}
html body.cx-design-system .cx-r1-device-dot .device-dot-battery-suffix {
width: 40px !important;
height: 38px !important;
font-size: 12px !important;
}
html body.cx-design-system .cx-r1-device-dot .device-dot-battery-description {
min-height: 40px !important;
max-width: 520px !important;
padding: 8px 10px !important;
font-size: 12px !important;
line-height: 1.4 !important;
}
@media (max-width: 767.98px) {
html body.cx-design-system .cx-data-log-popover-surface {
max-height: 46vh !important;
}
html body.cx-design-system .cx-r1-device-dot .device-dot-battery-field-grid {
grid-template-columns: minmax(0, 1fr) !important;
gap: 8px !important;
}
html body.cx-design-system .cx-r1-device-dot .device-dot-battery-description {
max-width: none !important;
}
}
html body.cx-design-system .cx-shared-search .conexgo-search-clear,
html body.cx-design-system .cx-shared-search .conexgo-search-clear:hover,
html body.cx-design-system .cx-shared-search .conexgo-search-clear:focus,
html body.cx-design-system .cx-shared-search .conexgo-search-clear:focus-visible,
html body.cx-design-system .cx-shared-search .conexgo-search-clear:active {
top: 50% !important;
bottom: auto !important;
right: 8px !important;
margin: 0 !important;
transform: translateY(-50%) !important;
translate: none !important;
scale: 1 !important;
}
/* --------------------------------------------------------------------------
Modal form alignment and input spacing
Keeps Device Add/Edit sections aligned and normalizes text in read-only and
alert-comment fields without changing form behavior or validation.
-------------------------------------------------------------------------- */
/* Device Add/Edit sections must use the same horizontal envelope. */
html body.cx-design-system
.mud-dialog.cx-r1-device-addedit
.cx-device-config-form {
grid-template-columns: minmax(0, 1fr) !important;
}
html body.cx-design-system
.mud-dialog.cx-r1-device-addedit
.cx-device-config-form > fieldset.cx-modal-group-v21 {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
justify-self: stretch !important;
box-sizing: border-box !important;
}
/* Read-only modal values need a smaller, consistent left inset. */
html body.cx-design-system
.mud-dialog.cx-dialog-root
:is(
.cx-r1-readonly-value,
.cx-readonly-value,
input.form-control[readonly],
textarea.form-control[readonly]
) {
padding-left: 20px !important;
}
html body.cx-design-system
.mud-dialog.cx-r1-device-addedit
.cx-device-activation-readonly {
padding-left: 20px !important;
padding-right: 10px !important;
}
/* Alert Answer: keep the prompt and typed comment on the same comfortable inset. */
html body.cx-design-system
.cx-dialog--alert-answer
.alert-answer-textarea {
padding: 15px 17px !important;
}
html body.cx-design-system
.cx-dialog--alert-answer
@media (max-width: 767.98px) {
html body.cx-design-system
.mud-dialog.cx-dialog-root
:is(
.cx-r1-readonly-value,
.cx-readonly-value,
input.form-control[readonly],
textarea.form-control[readonly]
) {
padding-left: 14px !important;
}
html body.cx-design-system
.cx-dialog--alert-answer
.alert-answer-textarea {
padding: 13px 14px !important;
}
html body.cx-design-system
.cx-dialog--alert-answer
}
/*
* Conexgo Map Runtime
* Shared loading, empty and error states for all Google Maps surfaces.
* This file intentionally contains only map-state presentation; map behavior
* remains in assets/js/conexgo/maps.js.
*/
.cx-map-state {
width: 100%;
min-width: 0;
min-height: inherit;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 22px;
box-sizing: border-box;
background: #f8fafc;
color: #2c4c6c;
}
.cx-map-state__card {
width: min(100%, 420px);
max-width: 420px;
min-width: 0;
padding: 22px 30px;
text-align: center;
background: #ffffff;
border: 1px solid #dee2e6;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.cx-map-state__icon {
width: 42px;
height: 42px;
margin: 0 auto 12px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #4d7392;
font-size: 20px;
}
.cx-map-state__spinner {
width: 38px;
height: 38px;
border: 4px solid #edf0f2;
border-top-color: #2c4c6c;
border-radius: 50%;
animation: conexgo-map-spin .8s linear infinite;
}
.cx-map-state__title {
color: #2c4c6c;
font-size: 10.5pt;
font-weight: 750;
line-height: 1.3;
}
.cx-map-state__subtitle {
margin-top: 4px;
color: #6c757d;
font-size: 8.8pt;
line-height: 1.35;
}
.cx-map-state--error .cx-map-state__icon {
color: #a84545;
}
.cx-map-state--empty .cx-map-state__icon {
color: #6c8294;
}
/* Legacy device-history GIF is retired. Loading is rendered inside the map. */
#waitIndicator.conexgo-history-wait,
.device-map-settings #waitIndicator {
display: none !important;
}
/* Align existing device-map loading presentation with the table wait indicator. */
.device-map-loading-overlay {
background: rgba(248, 250, 252, .94) !important;
backdrop-filter: none !important;
}
.device-map-loading-card {
width: min(100%, 420px) !important;
max-width: 420px !important;
min-height: 0 !important;
padding: 22px 30px !important;
gap: 0 !important;
border: 1px solid #dee2e6 !important;
border-radius: 10px !important;
background: #ffffff !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, .06) !important;
}
.device-map-loading-spinner {
width: 38px !important;
height: 38px !important;
margin: 0 auto 12px !important;
border: 4px solid #edf0f2 !important;
border-top-color: #2c4c6c !important;
}
.device-map-loading-title {
margin: 0 !important;
color: #2c4c6c !important;
font-size: 10.5pt !important;
font-weight: 750 !important;
}
.device-map-loading-description {
margin-top: 4px !important;
color: #6c757d !important;
font-size: 8.8pt !important;
line-height: 1.35 !important;
}
/* Geofence preview uses the same visual hierarchy while preserving its retry action. */
.device-geofence-map-preview .device-geofence-map-empty {
width: min(100% - 28px, 420px);
min-height: 150px;
margin: auto;
padding: 22px 30px;
align-self: center;
justify-self: center;
border: 1px solid #dee2e6;
border-radius: 10px;
background: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
text-align: center;
}
.device-geofence-map-preview .cx-native-spinner {
width: 38px;
height: 38px;
border-width: 4px;
border-color: #edf0f2;
border-top-color: #2c4c6c;
}
@media (max-width: 479.98px) {
.cx-map-state {
padding: 14px;
}
.cx-map-state__card,
.device-map-loading-card,
.device-geofence-map-preview .device-geofence-map-empty {
padding: 18px 16px !important;
}
}
@media (prefers-reduced-motion: reduce) {
.cx-map-state__spinner,
.device-map-loading-spinner,
.device-geofence-map-preview .cx-native-spinner {
animation-duration: 1.6s !important;
}
}
@keyframes conexgo-map-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* --------------------------------------------------------------------------
* Device history playback
* Compact, accessible navigation for the selected historical GPS position.
* -------------------------------------------------------------------------- */
.device-map-settings .conexgo-map-controller {
display: flex !important;
align-items: center !important;
min-height: 0 !important;
background: #f8fafc !important;
border-bottom: 1px solid #dbe5ec !important;
}
.device-map-settings .conexgo-map-controller.is-visible {
height: auto !important;
min-height: 62px !important;
padding: 8px 14px !important;
overflow: visible !important;
}
.device-map-settings .conexgo-history-playback {
width: auto;
max-width: min(100%, 620px);
min-width: 0;
margin: 0;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px;
border: 1px solid #d8e4ec;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 2px 8px rgba(39, 73, 98, .05);
}
.device-map-settings .conexgo-history-playback-controls {
display: inline-flex;
align-items: center;
gap: 4px;
flex: 0 0 auto;
}
.device-map-settings .conexgo-history-step {
width: 36px;
min-width: 36px;
height: 36px;
margin: 0;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #d8e4ec;
border-radius: 9px;
background: #ffffff;
color: #315f82;
font-size: 13px;
line-height: 1;
box-shadow: none;
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.device-map-settings .conexgo-history-step:hover,
.device-map-settings .conexgo-history-step:focus-visible {
border-color: #b8cede;
background: #eef5f9;
color: #294f6d;
outline: none;
}
.device-map-settings .conexgo-history-step:focus-visible {
box-shadow: 0 0 0 3px rgba(49, 95, 130, .13);
}
.device-map-settings .conexgo-history-step[style*="cursor: auto"],
.device-map-settings .conexgo-history-step[style*="cursor:auto"] {
border-color: #e5ebef;
background: #f8fafb;
color: #b7c1c9 !important;
cursor: default !important;
box-shadow: none !important;
}
.device-map-settings .conexgo-history-playback-time {
min-width: 235px;
min-height: 36px;
padding: 0 13px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid #d8e4ec;
border-radius: 9px;
background: #f3f7fa;
color: #294c68;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
}
.device-map-settings .conexgo-history-playback-time-icon {
flex: 0 0 auto;
color: #527b99;
font-size: 12px;
}
.device-map-settings #tracker_datetime:empty::after {
content: "—";
color: #8a9aa7;
}
@media (max-width: 575.98px) {
.device-map-settings .conexgo-map-controller.is-visible {
padding: 8px !important;
}
.device-map-settings .conexgo-history-playback {
width: 100%;
max-width: none;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 5px;
}
.device-map-settings .conexgo-history-step {
width: 32px;
min-width: 32px;
height: 34px;
border-radius: 8px;
}
.device-map-settings .conexgo-history-playback-time {
width: 100%;
min-width: 0;
min-height: 34px;
padding: 0 8px;
overflow: hidden;
font-size: 11.5px;
text-overflow: ellipsis;
white-space: nowrap;
}
.device-map-settings #tracker_datetime {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
@media (prefers-reduced-motion: reduce) {
.device-map-settings .conexgo-history-step {
transition-duration: .01ms;
}
}
/* ============================================================================
* ConexGo report preview
*
* Generated reports are complete HTML documents. They stay isolated in a
* srcdoc iframe, but the iframe grows to the document's real height so the
* dialog owns the only vertical scrollbar.
* ========================================================================== */
html body .mud-dialog.cx-report-preview-dialog {
width: min(1320px, calc(100vw - 32px)) !important;
max-width: min(1320px, calc(100vw - 32px)) !important;
height: min(92dvh, 980px) !important;
max-height: min(92dvh, 980px) !important;
}
html body .mud-dialog.cx-report-preview-dialog .mud-dialog-content {
min-height: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
display: block !important;
scrollbar-gutter: stable !important;
scrollbar-width: thin !important;
scrollbar-color: #9db3c5 #eef3f7 !important;
}
html body .mud-dialog.cx-report-preview-dialog .mud-dialog-content::-webkit-scrollbar {
width: 8px;
}
html body .mud-dialog.cx-report-preview-dialog .mud-dialog-content::-webkit-scrollbar-track {
background: #eef3f7;
}
html body .mud-dialog.cx-report-preview-dialog .mud-dialog-content::-webkit-scrollbar-thumb {
border: 2px solid #eef3f7;
border-radius: 999px;
background: #9db3c5;
}
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: auto !important;
display: block !important;
}
html body .mud-dialog.cx-report-preview-dialog .cx-report-preview-section {
padding-bottom: 18px !important;
}
html body .mud-dialog.cx-report-preview-dialog .report-preview-panel {
width: 100% !important;
min-width: 0 !important;
overflow: hidden !important;
border: 1px solid #d7e1ea !important;
border-radius: 12px !important;
background: #ffffff !important;
}
html body .mud-dialog.cx-report-preview-dialog .report-preview-toolbar {
min-height: 48px !important;
padding: 10px 14px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
border-bottom: 1px solid #e1e8ef !important;
background: #f6f9fb !important;
}
html body .mud-dialog.cx-report-preview-dialog .report-preview-toolbar-title {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
color: #294c69 !important;
font-size: .84rem !important;
font-weight: 800 !important;
}
html body .mud-dialog.cx-report-preview-dialog .report-preview-toolbar-meta {
color: #748596 !important;
font-size: .76rem !important;
white-space: normal !important;
text-align: right !important;
}
html body .mud-dialog.cx-report-preview-dialog .report-preview-scroll {
width: 100% !important;
min-height: 0 !important;
max-height: none !important;
padding: 14px !important;
overflow: visible !important;
background: #eef3f7 !important;
}
html body .mud-dialog.cx-report-preview-dialog .report-preview-rendered-content {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
min-height: 0 !important;
overflow: visible !important;
}
html body .mud-dialog.cx-report-preview-dialog .report-preview-frame {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 480px;
min-height: 360px !important;
display: block !important;
overflow: hidden !important;
border: 1px solid #dbe5ec !important;
border-radius: 12px !important;
background: #eef3f7 !important;
}
html body .mud-dialog.cx-report-preview-dialog .report-preview-empty {
width: 100%;
min-height: 320px;
padding: 32px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 10px;
color: #66798a;
font-size: .84rem;
font-weight: 700;
text-align: center;
}
html body .mud-dialog.cx-report-preview-dialog .report-preview-empty-icon {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #d6e2eb;
border-radius: 12px;
background: #ffffff;
color: #426b89;
font-size: 1.05rem;
}
@media (max-width: 767.98px) {
html body .mud-dialog.cx-report-preview-dialog {
width: calc(100vw - 12px) !important;
max-width: calc(100vw - 12px) !important;
height: calc(100dvh - 12px) !important;
max-height: calc(100dvh - 12px) !important;
}
html body .mud-dialog.cx-report-preview-dialog .report-preview-toolbar {
align-items: flex-start !important;
flex-direction: column !important;
}
html body .mud-dialog.cx-report-preview-dialog .report-preview-toolbar-meta {
text-align: left !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-frame {
min-height: 320px !important;
border-radius: 9px !important;
}
}
/* Pending device configuration: keep the warning visible without gluing a raw orange glyph to the value. */
html body.cx-design-system .device-config-col-value > .fa-circle-exclamation,
html body.cx-design-system .device-config-col-value--wide > .fa-circle-exclamation {
display: inline-flex !important;
width: 22px !important;
height: 22px !important;
margin-inline-start: 8px !important;
align-items: center !important;
justify-content: center !important;
vertical-align: middle !important;
border: 1px solid #e5bf67 !important;
border-radius: 999px !important;
background: #fff8df !important;
color: #9a6200 !important;
font-size: 11px !important;
line-height: 1 !important;
box-shadow: 0 1px 2px rgba(23, 58, 87, .06) !important;
}
/* Device list dropdown: JS supplies fixed viewport coordinates. This escapes table/card/footer clipping. */
@media (min-width: 768px) {
html body.cx-design-system .device-list-action-group,
html body.cx-design-system .conexgo-row-action-group {
isolation: auto !important;
}
html body.cx-design-system .device-list-action-group:has(> .device-list-action-menu.show),
html body.cx-design-system .conexgo-row-action-group:has(> .conexgo-row-action-menu.show) {
z-index: 2147481900 !important;
}
html body.cx-design-system .device-list-action-menu.show,
html body.cx-design-system .conexgo-row-action-menu.show,
html body.cx-design-system .cx-row-menu-open-above > .device-list-action-menu.show,
html body.cx-design-system .cx-row-menu-open-above > .conexgo-row-action-menu.show {
position: fixed !important;
inset: auto !important;
top: var(--cx-r1821-row-menu-top) !important;
left: var(--cx-r1821-row-menu-left) !important;
right: auto !important;
bottom: auto !important;
width: var(--cx-r1821-row-menu-width) !important;
min-width: var(--cx-r1821-row-menu-width) !important;
max-width: var(--cx-r1821-row-menu-width) !important;
max-height: var(--cx-r1821-row-menu-max-height) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
transform: none !important;
z-index: 2147482000 !important;
}
}
/* Mobile Dashboard: normal document flow is authoritative. No masonry height/transform may clip text or cards. */
@media (max-width: 767.98px) {
html body.cx-design-system #conexgoDashboardSmartGrid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-auto-flow: row !important;
align-items: start !important;
gap: 10px !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item {
position: static !important;
inset: auto !important;
transform: none !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
overflow: visible !important;
}
html body.cx-design-system #conexgoDashboardSmartGrid > .conexgo-dashboard-smart-item > .conexgo-dashboard-resizable-card,
html body.cx-design-system .conexgo-dashboard-configuration-card {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-minimized-card,
html body.cx-design-system .conexgo-dashboard-configuration-card.conexgo-dashboard-minimized-card {
height: auto !important;
min-height: 52px !important;
max-height: none !important;
}
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-minimized-card > .card-body,
html body.cx-design-system .conexgo-dashboard-configuration-card.conexgo-dashboard-minimized-card > .card-body {
display: none !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 {
height: auto !important;
min-height: 52px !important;
max-height: none !important;
padding-block: 9px !important;
overflow: visible !important;
}
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-card-header,
html body.cx-design-system .conexgo-dashboard-configuration-card .conexgo-dashboard-card-header {
display: flex !important;
width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
align-items: center !important;
gap: 7px !important;
overflow: visible !important;
}
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-card-title,
html body.cx-design-system .conexgo-dashboard-configuration-card .conexgo-dashboard-card-title {
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
line-height: 1.25 !important;
}
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-card-action,
html body.cx-design-system .conexgo-dashboard-configuration-card .conexgo-dashboard-card-action {
flex: 0 0 auto !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 {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-latest-mainline,
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-latest-copy,
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-latest-copy * {
min-width: 0 !important;
max-width: 100% !important;
overflow-wrap: anywhere !important;
}
}
@media (max-width: 479.98px) {
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-latest-mainline {
grid-template-columns: minmax(0, 1fr) !important;
row-gap: 2px !important;
}
html body.cx-design-system #conexgoDashboardSmartGrid .conexgo-dashboard-latest-time {
justify-self: start !important;
text-align: left !important;
white-space: normal !important;
}
}
@media (min-width: 768px) {
body > .cx-r1822-row-menu-portal.show {
position: fixed !important;
inset: auto !important;
top: var(--cx-r1821-row-menu-top) !important;
left: var(--cx-r1821-row-menu-left) !important;
right: auto !important;
bottom: auto !important;
width: var(--cx-r1821-row-menu-width) !important;
min-width: var(--cx-r1821-row-menu-width) !important;
max-width: var(--cx-r1821-row-menu-width) !important;
max-height: var(--cx-r1821-row-menu-max-height) !important;
margin: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
transform: none !important;
translate: none !important;
z-index: 2147483000 !important;
pointer-events: auto !important;
}
}
/* #530 / #536 / #538 / #541: desktop Device Configuration alignment and readable informational values. */
@media (min-width: 1200px) {
html body .device-config-card .device-config-section-header,
html body .device-config-card .device-config-section-content {
grid-template-columns:
minmax(150px, 1.02fr)
40px
minmax(170px, 1.22fr)
minmax(150px, 1.02fr)
minmax(100px, .68fr)
minmax(155px, .95fr)
38px !important;
gap: 8px !important;
}
html body .device-config-card .device-config-col-value,
html body .device-config-card .device-config-col-email,
html body .device-config-card .device-config-col-sms,
html body .device-config-card .device-config-col-schedule,
html body .device-config-card .device-config-col-updated {
min-width: 0 !important;
max-width: 100% !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
line-height: 1.42 !important;
font-size: 12.5px !important;
}
html body .device-config-card .device-config-col-updated { max-width: none !important; }
}
/* #538: helper/instruction text remains readable in unit-configuration dialogs. */
html body .cx-device-config-section-description,
html body .cx-device-config-section-description span {
color: #586f84 !important;
font-size: 13px !important;
line-height: 1.45 !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
}
html body .cx-r1878-last-updated-date {
color: #b42318 !important;
font-weight: 800 !important;
}
/* #535: Distributor unit list needs a more readable unit name/meta size without changing other roles. */
html body.cx-design-system .cx-device-list-card--distributor .device-list-name-text {
font-size: 15px !important;
line-height: 1.3 !important;
}
html body.cx-design-system .cx-device-list-card--distributor .device-list-meta,
html body.cx-design-system .cx-device-list-card--distributor .device-list-meta > span {
font-size: 12.5px !important;
line-height: 1.35 !important;
}
/* #519: emergency-service information grouped with the emergency contact list. */
html body .cx-r1878-emergency-service-card { margin-top: 12px !important; }
html body .cx-r1878-emergency-service-inline {
margin-top: 12px !important;
padding-top: 12px !important;
border-top: 1px solid rgba(180, 35, 24, .18) !important;
}
html body .cx-r1878-emergency-service-inline > strong {
display: flex !important;
align-items: center !important;
gap: 7px !important;
margin-bottom: 5px !important;
}
/* #544: identify the selected DATI at the top of every per-device journal. */
html body .cx-r1878-log-device-context {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin: 10px 16px 0 !important;
padding: 9px 12px !important;
border: 1px solid #d8e4ed !important;
border-radius: 8px !important;
background: #f7fafc !important;
color: #53697d !important;
line-height: 1.3 !important;
}
html body .cx-r1878-log-device-context i { color: #3d6287 !important; }
html body .cx-r1878-log-device-context strong { color: #213f5b !important; overflow-wrap: anywhere !important; }
/* #534: keep alert-document management visually inside Unit Information. */
html body .cx-r1878-device-alert-documents .cx-alert-documents {
width: 100% !important;
min-width: 0 !important;
}
html body .report-subscribe-attachment-section .report-subscribe-field { max-width: 520px !important; }
html body .cx-r1878-device-alert-documents .cx-alert-documents-manager-head {
align-items: flex-start !important;
gap: 12px !important;
}
html body .cx-r1878-device-alert-documents .cx-alert-documents-manager-description {
max-width: 760px !important;
}
/* #508 — Group View selection: restore the approved highlighter-yellow row. */
html body.cx-design-system tr.cx-map-row-selected > td,
html body.cx-design-system .cx-map-row-selected > td,
html body.cx-design-system .cx-map-row-selected,
html body.cx-design-system tr.cx-map-row-selected:hover > td,
html body.cx-design-system .cx-map-row-selected:hover > td,
html body.cx-design-system .cx-map-row-selected:hover {
background: #fff200 !important;
color: #17233c !important;
}
html body.cx-design-system tr.cx-map-row-selected > td:first-child,
html body.cx-design-system .cx-map-row-selected > td:first-child {
box-shadow: inset 4px 0 0 #d6ad00 !important;
}
/* #512 — Alert Answer: the five emergency-information lines use normal black
copy; the already-approved yellow comment section remains untouched. */
html body.cx-design-system .cx-r1882-emergency-contact-lines,
html body.cx-design-system .cx-r1882-emergency-contact-lines * {
color: #111827 !important;
}
/* #515 — Header alert Answer CTA: return to the visible Conexgo green. */
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-action.is-answer {
background: #78b842 !important;
border-color: #659f35 !important;
color: #fff !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-action.is-answer > * {
color: #fff !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-action.is-answer:is(:hover, :focus-visible) {
background: #69a63a !important;
border-color: #5b9232 !important;
color: #fff !important;
}
/* #519 — Contact-list modal null-safe loading state. */
html body.cx-design-system .cx-contact-list-loading,
html body.cx-design-system .cx-device-contactlist-loading {
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
color: #51697f;
font-weight: 650;
}
/* #530 — Device configuration follows the page grid instead of a narrow,
centered desktop island. */
@media (min-width: 1200px) {
html body.cx-design-system .device-config-card .device-config-main-header,
html body.cx-design-system .device-config-card .device-config-sections-shell {
width: 100% !important;
max-width: none !important;
margin-inline: 0 !important;
}
}
/* #530 — Permissions / Sign-out actions stay side-by-side; logout is danger. */
html body.cx-design-system .device-permissions-actions {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
html body.cx-design-system .device-permissions-actions .device-permissions-query-button {
margin: 0 !important;
}
html body.cx-design-system .device-permissions-actions .device-permissions-logout-button {
background: #c94552 !important;
border-color: #b43a46 !important;
color: #fff !important;
}
html body.cx-design-system .device-permissions-actions .device-permissions-logout-button:is(:hover, :focus-visible) {
background: #b83b47 !important;
border-color: #a5323e !important;
color: #fff !important;
}
html body.cx-design-system .device-permissions-actions .device-permissions-logout-button :is(svg, i, span) {
color: inherit !important;
stroke: currentColor !important;
}
/* #536 — Make the edit column intentionally compact and give email the room
long addresses require. Applies only to desktop configuration rows. */
@media (min-width: 992px) {
html body.cx-design-system .device-config-section-header,
html body.cx-design-system .device-config-section-content {
grid-template-columns:
minmax(170px, 1fr)
40px
minmax(170px, .95fr)
minmax(230px, 1.35fr)
minmax(125px, .72fr)
minmax(185px, 1fr)
38px !important;
}
html body.cx-design-system .device-config-col-edit,
html body.cx-design-system .device-config-col-edit--standalone {
width: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding-inline: 0 !important;
}
html body.cx-design-system .device-config-col-email,
html body.cx-design-system .device-config-col-email * {
min-width: 0 !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
white-space: normal !important;
text-overflow: clip !important;
}
}
/* #538 — Shared visual hierarchy for configuration copy.
Function/explanation copy = bold + italic; procedure/action copy = bold. */
html body.cx-design-system .cx-device-config-section-description,
html body.cx-design-system .cx-device-config-section-description span,
html body.cx-design-system .cx-dialog-root .cx-r1-section-description,
html body.cx-design-system .cx-dialog-root .cx-r1-section-description span,
html body.cx-design-system .cx-device-config-function-copy {
font-size: 14px !important;
line-height: 1.48 !important;
font-weight: 700 !important;
font-style: italic !important;
color: #435d74 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
-webkit-line-clamp: unset !important;
}
html body.cx-design-system .cx-device-config-setting-copy > span:not(.cx-device-config-function-copy),
html body.cx-design-system .cx-device-config-field > small,
html body.cx-design-system .cx-device-config-setting-card > small,
html body.cx-design-system .cx-device-config-field-help,
html body.cx-design-system .cx-emergency-field-heading > div > span {
font-size: 13.5px !important;
line-height: 1.45 !important;
font-weight: 700 !important;
font-style: normal !important;
color: #4d667c !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
/* #541 — Connection Service / Scheduled Reporting descriptions must never be
clipped with an ellipsis. */
html body.cx-design-system .cx-dialog--online .cx-device-config-section-description,
html body.cx-design-system .cx-dialog--online .cx-device-config-section-description *,
html body.cx-design-system .cx-dialog--online .cx-device-config-setting-copy,
html body.cx-design-system .cx-dialog--online .cx-device-config-setting-copy * {
max-width: none !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
display: block !important;
-webkit-line-clamp: unset !important;
}
/* #532 — Group View / Modify Group status presentation mirrors the Unit List
while remaining compact enough for the existing table layouts. */
html body.cx-design-system .cx-group-view-status-label,
html body.cx-design-system .cx-group-member-status-label {
display: block;
margin-bottom: 4px;
font-size: 12px;
line-height: 1.25;
font-weight: 700;
color: #27445f;
}
html body.cx-design-system .cx-group-view-status-icons,
html body.cx-design-system .cx-group-member-status-icons {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 20px;
white-space: nowrap;
}
html body.cx-design-system .cx-group-view-status-icon,
html body.cx-design-system .cx-group-member-status-icon {
width: 17px;
text-align: center;
font-size: 14px;
line-height: 1;
}
html body.cx-design-system .cx-group-view-battery-icon,
html body.cx-design-system .cx-group-member-battery-icon {
width: 19px;
height: 18px;
font-size: 14px;
line-height: 18px;
vertical-align: middle;
}
html body.cx-design-system .cx-group-view-battery-charge,
html body.cx-design-system .cx-group-member-battery-charge {
font-size: 8px !important;
line-height: 18px !important;
color: #fff !important;
}
/* #546 — Emergency-contact review copy is full text, never line-clamped. */
html body.cx-design-system .cx-emergency-review-dialog .cx-r1-section-description,
html body.cx-design-system .cx-emergency-review-dialog .cx-r1-section-description *,
html body.cx-design-system .cx-emergency-review-dialog .cx-device-config-section-description,
html body.cx-design-system .cx-emergency-review-dialog .cx-device-config-section-description * {
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
max-height: none !important;
-webkit-line-clamp: unset !important;
}
html body.cx-design-system .cx-emergency-review-delivery {
margin-top: 10px;
padding: 10px 12px;
border: 1px solid #d8e5ef;
border-radius: 8px;
background: #f7fafc;
color: #29465f;
font-size: 13px;
line-height: 1.45;
}
html body.cx-design-system .cx-emergency-review-delivery.is-success {
border-color: #add9ba;
background: #f2fbf5;
}
html body.cx-design-system .cx-emergency-review-delivery.is-error {
border-color: #efb2b9;
background: #fff5f6;
color: #8d2833;
}
html body.cx-design-system .cx-emergency-review-delivery strong,
html body.cx-design-system .cx-emergency-review-delivery span {
display: block;
}
/* #547 — MAIN is a normal sidebar section header, not a compressed special
first item. Keep every section header on the exact same vertical rhythm. */
html body.cx-design-system .app-sidebar-modern .side-menu > .sub-category,
html body.cx-design-system .app-sidebar-modern .side-menu > .sub-category:first-child {
margin: 12px 0 7px !important;
padding: 0 !important;
min-height: 42px !important;
overflow: visible !important;
}
html body.cx-design-system .app-sidebar-modern .conexgo-sidebar-section-toggle {
min-height: 42px !important;
height: 42px !important;
padding: 9px 12px 9px 14px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
line-height: 1.2 !important;
}
html body.cx-design-system .app-sidebar-modern .conexgo-sidebar-section-title,
html body.cx-design-system .app-sidebar-modern .conexgo-sidebar-section-chevron {
line-height: 1.2 !important;
align-self: center !important;
}
@media (max-width: 991.98px) {
html body.cx-design-system .app-sidebar-modern .conexgo-sidebar-section-toggle {
min-height: 44px !important;
height: 44px !important;
}
}
/* #546 — Distributor-visible, scoped emergency-review delivery log. */
html body.cx-design-system .cx-emergency-delivery-log {
margin-top: 14px;
border: 1px solid #d8e5ef;
border-radius: 10px;
background: #fff;
overflow: hidden;
}
html body.cx-design-system .cx-emergency-delivery-log__heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
background: #f5f9fc;
border-bottom: 1px solid #e2edf4;
color: #29465f;
}
html body.cx-design-system .cx-emergency-delivery-log__heading > span {
display: inline-flex;
align-items: center;
gap: 7px;
font-weight: 750;
}
html body.cx-design-system .cx-emergency-delivery-log__heading small {
color: #60798f;
font-size: 12px;
}
html body.cx-design-system .cx-emergency-delivery-log__rows {
max-height: 220px;
overflow-y: auto;
}
html body.cx-design-system .cx-emergency-delivery-log__row {
display: grid;
grid-template-columns: 126px minmax(0, 1fr);
gap: 12px;
padding: 9px 12px;
border-bottom: 1px solid #edf2f6;
font-size: 12.5px;
line-height: 1.4;
color: #334f67;
}
html body.cx-design-system .cx-emergency-delivery-log__row:last-child {
border-bottom: 0;
}
html body.cx-design-system .cx-emergency-delivery-log__row time {
font-variant-numeric: tabular-nums;
color: #60798f;
white-space: nowrap;
}
html body.cx-design-system .cx-emergency-delivery-log__row span {
overflow-wrap: anywhere;
}
html body.cx-design-system .cx-emergency-delivery-log__empty {
padding: 14px 12px;
color: #60798f;
font-size: 13px;
}
@media (max-width: 640px) {
html body.cx-design-system .cx-emergency-delivery-log__heading {
align-items: flex-start;
flex-direction: column;
}
html body.cx-design-system .cx-emergency-delivery-log__row {
grid-template-columns: 1fr;
gap: 4px;
}
}
/* SOURCE: Conexgo.Client/Components/Pages/account/Account_AddEdit.razor */
.cx-r1-account-addedit .cx-account-advanced-toggle {
min-height: 36px;
padding: 7px 11px;
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid #d7e3eb;
border-radius: 9px;
background: #f8fbfd;
color: #46657d;
font: inherit;
font-size: 12.5px;
font-weight: 620;
cursor: pointer;
}
.cx-r1-account-addedit .cx-account-advanced-toggle:hover,
.cx-r1-account-addedit .cx-account-advanced-toggle:focus-visible {
border-color: #c7d9e5;
background: #f1f7fa;
color: #315873;
outline: none;
}
.cx-r1-account-addedit .cx-account-advanced-actions-panel {
width: 100%;
margin-bottom: 10px;
padding: 10px 12px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
border: 1px solid #dde7ed;
border-radius: 11px;
background: #f8fafc;
}
.cx-r1-account-addedit .cx-account-advanced-actions-group,
.cx-r1-account-addedit .cx-account-primary-actions-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.cx-r1-account-addedit .cx-account-primary-actions-row {
width: 100%;
justify-content: flex-end;
padding-top: 2px;
}
@media (max-width: 767.98px) {
.cx-r1-account-addedit .cx-account-advanced-actions-panel,
.cx-r1-account-addedit .cx-account-primary-actions-row {
align-items: stretch;
}
.cx-r1-account-addedit .cx-account-advanced-actions-group {
width: 100%;
}
}
/* SOURCE: Conexgo.Client/Components/Pages/account/Account_BlockNotice.razor */
.cx-r1-account-blocknotice .account-blocknotice-history-toggle {
width: 100%;
min-height: 46px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 9px 11px;
border: 1px solid #d7e0e9;
border-radius: 10px;
background: #f7fafc;
color: #2c4c6c;
text-align: left;
cursor: pointer;
transition: background-color .14s ease, border-color .14s ease;
}
.cx-r1-account-blocknotice .account-blocknotice-history-toggle:hover,
.cx-r1-account-blocknotice .account-blocknotice-history-toggle:focus-visible {
border-color: #b8cbdc;
background: #eef4f8;
outline: none;
}
.cx-r1-account-blocknotice .account-blocknotice-history-toggle-icon {
width: 32px;
min-width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #c8d7e4;
border-radius: 8px;
background: #ffffff;
color: #315879;
}
.cx-r1-account-blocknotice .account-blocknotice-history-toggle-icon > i {
transition: transform .18s ease;
}
.cx-r1-account-blocknotice .account-blocknotice-history-toggle-icon > i.is-expanded {
transform: rotate(180deg);
}
.cx-r1-account-blocknotice .account-blocknotice-history-section.is-collapsed
.account-blocknotice-history-heading {
margin-bottom: 0;
}
/* SOURCE: Conexgo.Client/Components/Pages/account/Account_BlockNotice.razor */
.cx-r1876-blocknotice-field-grid {
display: grid;
grid-template-columns: minmax(280px, 520px) minmax(220px, 1fr);
align-items: center;
gap: 18px;
width: 100%;
}
.cx-r1876-blocknotice-primary-control {
min-width: 0;
width: 100%;
max-width: 520px;
}
.cx-r1876-blocknotice-primary-control > :is(.form-control, .cx-custom-select, .cx-datepicker, div) {
width: 100%;
}
.cx-r1876-blocknotice-action-control {
width: 100%;
max-width: 520px;
}
@media (max-width: 991.98px) {
.cx-r1876-blocknotice-field-grid {
grid-template-columns: 1fr;
gap: 7px;
}
.cx-r1876-blocknotice-primary-control,
.cx-r1876-blocknotice-action-control {
max-width: none;
}
}
/* SOURCE: Conexgo.Client/Components/Pages/account/Account_List.razor */
html body.cx-design-system .account-list-card:has(.conexgo-row-action-menu.show),
html body.cx-design-system .account-list-card-body:has(.conexgo-row-action-menu.show),
html body.cx-design-system .account-list-table-shell:has(.conexgo-row-action-menu.show),
html body.cx-design-system .cx-list-data-row:has(.conexgo-row-action-menu.show),
html body.cx-design-system .cx-list-data-row > [class*="col-"]:has(.conexgo-row-action-menu.show),
html body.cx-design-system .cx-paged-list:has(.conexgo-row-action-menu.show),
html body.cx-design-system .conexgo-pagedlist-table-region:has(.conexgo-row-action-menu.show),
html body.cx-design-system .conexgo-pagedlist-table-column:has(.conexgo-row-action-menu.show),
html body.cx-design-system .conexgo-pagedlist-table:has(.conexgo-row-action-menu.show),
html body.cx-design-system .conexgo-pagedlist-table tbody:has(.conexgo-row-action-menu.show),
html body.cx-design-system .account-list-row:has(.conexgo-row-action-menu.show),
html body.cx-design-system .account-list-cell-name:has(.conexgo-row-action-menu.show) {
overflow: visible !important;
}
html body.cx-design-system .account-list-card:has(.conexgo-row-action-menu.show) {
position: relative !important;
z-index: 5300 !important;
}
html body.cx-design-system .account-list-card-body:has(.conexgo-row-action-menu.show),
html body.cx-design-system .account-list-table-shell:has(.conexgo-row-action-menu.show) {
position: relative !important;
z-index: 5310 !important;
}
html body.cx-design-system .account-list-row:has(.conexgo-row-action-menu.show),
html body.cx-design-system .account-list-cell-name:has(.conexgo-row-action-menu.show) {
position: relative !important;
z-index: 5320 !important;
}
html body.cx-design-system
.account-list-cell-name
.conexgo-row-action-group > .conexgo-row-action-menu.show {
z-index: 5400 !important;
visibility: visible !important;
pointer-events: auto !important;
}
/* SOURCE: Conexgo.Client/Components/Pages/admin/BlockedCallNumber_AddEdit.razor */
.cx-blocked-call-dialog {
width: min(860px, calc(100vw - 32px)) !important;
max-width: 860px !important;
}
.cx-blocked-call-dialog .cx-blocked-call-dialog-layout {
width: 100% !important;
max-width: none !important;
margin: 0 auto !important;
padding: 0 18px !important;
box-sizing: border-box !important;
}
.cx-blocked-call-dialog .cx-blocked-call-dialog-section {
width: 100% !important;
max-width: none !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
.cx-blocked-call-dialog .cx-r1-form-row {
width: 100% !important;
margin-right: 0 !important;
margin-left: 0 !important;
align-items: center !important;
}
.cx-blocked-call-dialog .cx-r1-form-row > .form-label {
padding-right: 18px !important;
}
.cx-blocked-call-dialog .cx-r1-form-row input.form-control,
.cx-blocked-call-dialog .cx-r1-form-row textarea.form-control {
width: 100% !important;
max-width: none !important;
}
.cx-blocked-call-dialog .cx-blocked-call-form-help {
display: block;
margin-top: 6px;
color: #6f8092;
}
@media (max-width: 767.98px) {
.cx-blocked-call-dialog {
width: calc(100vw - 20px) !important;
max-width: calc(100vw - 20px) !important;
}
.cx-blocked-call-dialog .cx-r1-form-row > .form-label {
padding-right: 0 !important;
text-align: left !important;
}
}
/* SOURCE: Conexgo.Client/Components/Pages/admin/BlockedCallNumber_List.razor */
.cx-blocked-call-page .device-list-action-group {
position: relative;
z-index: 1065;
min-height: 46px;
width: min(100%, 320px);
}
.cx-blocked-call-page .device-list-name-button,
.cx-blocked-call-page .device-list-action-toggle {
min-height: 46px !important;
}
.cx-blocked-call-page .device-list-name-button {
min-width: 0;
flex: 1 1 auto;
padding-inline: 12px !important;
display: inline-flex;
align-items: center;
gap: 9px;
text-align: left !important;
cursor: default;
}
.cx-blocked-call-page .device-list-name-text {
min-width: 0;
flex: 1 1 auto;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cx-blocked-call-page .cx-blocked-call-phone-icon {
width: 22px;
flex: 0 0 22px;
text-align: center;
}
.cx-blocked-call-page .device-list-action-toggle {
flex: 0 0 48px !important;
width: 48px !important;
min-width: 48px !important;
}
.cx-blocked-call-page .device-list-action-menu,
.cx-blocked-call-page .device-list-action-menu.show {
width: min(230px, calc(100vw - 28px));
min-width: min(230px, calc(100vw - 28px));
max-width: calc(100vw - 28px);
max-height: min(66vh, 520px);
overflow-y: auto;
overflow-x: hidden;
padding: 8px;
border: 1px solid #d7e1ea;
border-radius: 10px;
box-shadow: 0 16px 34px rgba(30, 52, 75, .18);
scrollbar-gutter: stable;
z-index: 1150 !important;
}
.cx-blocked-call-page .device-list-action-menu .dropdown-item {
min-height: 40px;
display: flex;
align-items: center;
gap: 9px;
padding: 8px 10px;
border-radius: 7px;
color: #324b67;
white-space: normal;
line-height: 1.3;
text-decoration: none !important;
}
.cx-blocked-call-page .device-list-action-menu .dropdown-item:hover,
.cx-blocked-call-page .device-list-action-menu .dropdown-item:focus {
background: #eaf2f8;
color: #24435f;
}
.cx-blocked-call-page .device-list-action-menu .dropdown-item > span {
width: 18px;
flex: 0 0 18px;
text-align: center;
}
/*
Desktop: never allow Popper/table geometry to flip this menu upward.
There is reserved row space below it exactly for this purpose.
*/
@media (min-width: 1200px) {
.cx-blocked-call-page .cx-blocked-call-table-responsive {
overflow: visible !important;
}
.cx-blocked-call-page .device-list-action-menu,
.cx-blocked-call-page .device-list-action-menu.show {
position: absolute !important;
top: calc(100% + 7px) !important;
right: 0 !important;
bottom: auto !important;
left: auto !important;
inset: auto 0 auto auto !important;
margin: 0 !important;
transform: none !important;
}
.cx-blocked-call-page .conexgo-pagedlist-table tbody tr:has(.device-list-action-menu.show),
.cx-blocked-call-page .conexgo-pagedlist-table tbody td:has(.device-list-action-menu.show),
.cx-blocked-call-page .device-list-action-group:has(.device-list-action-menu.show) {
position: relative;
z-index: 1140 !important;
}
}
/* Same small-screen menu treatment as Device_List. */
@media (max-width: 1199.98px) {
.cx-blocked-call-page .device-list-action-group {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
}
.cx-blocked-call-page .device-list-action-menu,
.cx-blocked-call-page .device-list-action-menu.show {
position: fixed !important;
inset: auto 12px calc(78px + env(safe-area-inset-bottom, 0px)) 12px !important;
width: auto !important;
min-width: 0 !important;
max-width: 420px !important;
max-height: min(58vh, 480px) !important;
margin-inline: auto !important;
box-sizing: border-box !important;
transform: none !important;
overflow-x: hidden !important;
overflow-y: auto !important;
z-index: 1150 !important;
}
}
@media (max-width: 575.98px) {
.cx-blocked-call-page .device-list-action-menu,
.cx-blocked-call-page .device-list-action-menu.show {
inset-inline: 8px !important;
max-width: calc(100vw - 16px) !important;
}
}
@media (prefers-reduced-motion: reduce) {
.cx-blocked-call-page .device-list-action-menu .dropdown-item {
transition: none !important;
}
}
/* SOURCE: Conexgo.Client/Components/Pages/device/Device_AddEdit.razor */
.cx-r1-device-addedit .cx-r1-readonly-value {
min-height: 48px !important;
padding: 10px 18px 10px 20px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
border: 1px solid #cbdce8 !important;
border-radius: 10px !important;
background: #f7fafc !important;
color: #254963 !important;
font-weight: 560 !important;
line-height: 1.35 !important;
box-shadow: inset 3px 0 0 rgba(54, 99, 132, .10) !important;
overflow-wrap: anywhere;
}
.cx-r1-device-addedit .cx-device-activation-readonly {
justify-content: space-between !important;
padding-right: 10px !important;
}
.cx-device-activation-value {
min-width: 0;
flex: 1 1 auto;
}
.cx-device-activation-actions {
display: inline-flex;
align-items: center;
justify-content: flex-end;
flex: 0 0 auto;
gap: 6px;
margin-left: auto;
}
.cx-device-readonly-action {
width: 34px;
min-width: 34px;
height: 34px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
color: #315f82;
cursor: pointer;
transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.cx-device-readonly-action:hover,
.cx-device-readonly-action:focus-visible {
border-color: #d3e1ea;
background: #edf4f8;
color: #234f70;
outline: none;
}
.cx-modal-title-device-info::before {
content: "\f06e" !important;
}
@media (max-width: 767.98px) {
.cx-r1-device-addedit .cx-r1-readonly-value {
min-height: 46px !important;
padding: 9px 14px !important;
}
}
/* SOURCE: Conexgo.Client/Components/Pages/device/Device_AddEdit.razor */
@media (min-width: 992px) {
.cx-dialog--device.cx-r1-device-addedit .cx-modal-group-v21--device-general,
.cx-dialog--device .cx-r1-device-addedit .cx-modal-group-v21--device-general,
.cx-r1-device-addedit .cx-modal-group-v21--device-general {
width: min(100%, 1040px) !important;
max-width: 1040px !important;
margin-right: auto !important;
margin-left: auto !important;
}
.cx-r1-device-addedit .cx-modal-group-v21--device-general .cx-r1-form-row:not(.cx-r1-device-switch-row) {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin-right: 0 !important;
margin-left: 0 !important;
display: grid !important;
grid-template-columns: minmax(190px, 225px) minmax(0, 1fr) !important;
column-gap: 18px !important;
align-items: center !important;
}
.cx-r1-device-addedit .cx-modal-group-v21--device-general .cx-r1-form-row:not(.cx-r1-device-switch-row) > .form-label {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding-right: 0 !important;
padding-left: 0 !important;
text-align: right !important;
}
.cx-r1-device-addedit .cx-modal-group-v21--device-general .cx-r1-form-row:not(.cx-r1-device-switch-row) > :not(.form-label) {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding-right: 0 !important;
padding-left: 0 !important;
}
.cx-r1-device-addedit .cx-modal-group-v21--device-general :is(
input.form-control,
select.form-control,
select.form-select,
.cx-custom-select-root,
.cx-custom-select-trigger,
.cx-r1-readonly-value
) {
width: 100% !important;
max-width: 760px !important;
min-width: 0 !important;
}
}
/* SOURCE: Conexgo.Client/Components/Pages/device/Device_DOT.razor */
.cx-r1-device-dot .device-dot-grid {
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 340px)) !important;
justify-content: end !important;
justify-items: stretch !important;
box-sizing: border-box !important;
}
.cx-r1-device-dot .device-dot-card {
width: 100% !important;
max-width: 340px !important;
grid-template-columns: 64px minmax(0, 1fr) !important;
column-gap: 18px !important;
padding: 14px !important;
}
.cx-r1-device-dot .device-dot-image {
width: 52px !important;
height: 52px !important;
max-width: 52px !important;
max-height: 52px !important;
}
.cx-r1-device-dot .device-dot-card-details,
.cx-r1-device-dot .device-dot-card-action {
padding-left: 0 !important;
}
@media (max-width: 760px) {
.cx-r1-device-dot .device-dot-grid {
grid-template-columns: minmax(0, 1fr) !important;
justify-content: stretch !important;
}
.cx-r1-device-dot .device-dot-card {
max-width: none !important;
}
}
@media (max-width: 575.98px) {
.cx-r1-device-dot .device-dot-card {
grid-template-columns: 58px minmax(0, 1fr) !important;
column-gap: 14px !important;
padding: 12px !important;
}
.cx-r1-device-dot .device-dot-image {
width: 48px !important;
height: 48px !important;
max-width: 48px !important;
max-height: 48px !important;
}
}
/* SOURCE: Conexgo.Client/Components/Pages/device/Device_Map.razor */
.device-map-card {
overflow: hidden;
border: 1px solid #d8e4ec;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 8px 24px rgba(34, 67, 92, .07);
}
.device-map-card > .card-body {
padding: 0;
}
.device-map-inner-header {
margin: 0;
padding: 14px 18px;
border: 0;
border-bottom: 1px solid #294f6d;
border-radius: 12px 12px 0 0;
background: #315f82;
}
.device-map-header-layout {
width: 100%;
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.device-map-identity {
min-width: 0;
display: flex;
align-items: center;
flex: 1 1 auto;
}
.device-map-back {
margin-right: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
color: #ffffff;
text-decoration: none;
}
.device-map-back:hover,
.device-map-back:focus {
color: #ffffff;
opacity: .88;
}
.device-map-avatar,
.device-map-avatar-placeholder {
width: 42px;
height: 42px;
min-width: 42px;
margin-right: 12px;
border: 1px solid rgba(255, 255, 255, .32);
border-radius: 50%;
background: rgba(255, 255, 255, .11);
}
.device-map-avatar {
display: block;
object-fit: cover;
}
.device-map-avatar-placeholder {
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 16px;
}
.device-map-name-block {
min-width: 0;
}
.device-map-name-row {
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
}
.device-map-name {
min-width: 0;
display: block;
overflow: hidden;
color: #ffffff;
font-size: 18px;
font-weight: 760;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.device-map-info {
flex: 0 0 auto;
color: rgba(255, 255, 255, .9);
font-size: 13px;
cursor: help;
}
.device-map-meta {
display: block;
margin-top: 4px;
overflow: hidden;
color: rgba(255, 255, 255, .76);
font-size: 11.5px;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.device-map-location-strip {
min-height: 44px;
margin: 0;
padding: 9px 18px;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 9px;
border: 0;
border-bottom: 1px solid #dde7ee;
background: #fbfdfe;
color: #2c4c68;
font-size: 13px;
line-height: 1.35;
}
.device-map-location-strip i {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 24px;
border-radius: 7px;
background: #eef5f9;
color: #527b99;
font-size: 11px;
}
.device-map-location-strip.is-empty {
color: #677d8f;
background: #fafcfd;
}
.device-map-location-strip span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.device-map-settings {
margin: 0;
overflow: hidden;
border-bottom: 1px solid #d9e4eb;
background: #f7fafc;
}
.device-map-settings .conexgo-device-setting-toolbar,
.device-map-settings .setting-header {
width: calc(100% - 58px) !important;
min-height: 56px !important;
margin: 0 !important;
float: left !important;
overflow: visible !important;
border: 0 !important;
border-radius: 0 !important;
background: #f7fafc !important;
}
.device-map-settings .conexgo-device-setting-toolbar > section,
.device-map-settings .setting-header > section {
width: 100% !important;
min-width: 0 !important;
}
.device-map-settings .conexgo-device-setting-toolbar .dashboard,
.device-map-settings .setting-header .dashboard {
width: 100% !important;
min-width: 0 !important;
min-height: 56px !important;
margin: 0 !important;
padding: 7px 10px !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
list-style: none !important;
scrollbar-width: thin;
}
.device-map-settings .conexgo-device-setting-toolbar .dashboard > li,
.device-map-settings .setting-header .dashboard > li {
min-width: 0 !important;
min-height: 42px !important;
height: 42px !important;
margin: 0 !important;
padding: 0 7px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
border: 0 !important;
border-radius: 8px !important;
background: transparent !important;
color: #8495a4;
transition:
background-color 130ms ease,
color 130ms ease;
}
.device-map-settings .conexgo-device-setting-toolbar .dashboard > li:hover,
.device-map-settings .setting-header .dashboard > li:hover,
.device-map-settings .conexgo-device-setting-toolbar .dashboard > li:focus-within,
.device-map-settings .setting-header .dashboard > li:focus-within {
background: transparent !important;
box-shadow: none !important;
transform: none !important;
filter: none !important;
}
.device-map-settings .conexgo-device-status-item {
border-radius: 8px !important;
cursor: help !important;
}
.device-map-settings .conexgo-device-status-item {
position: relative;
min-width: 46px !important;
width: 46px !important;
height: 40px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: help;
}
.device-map-settings .conexgo-device-status-item .fa-stack,
.device-map-settings .setting-header .fa-stack {
width: 28px !important;
height: 28px !important;
line-height: 28px !important;
}
.device-map-settings #battery {
font-size: 20px !important;
}
.device-map-settings #battery_charging {
font-size: 9px !important;
}
.device-map-settings .conexgo-device-cellular {
min-width: 46px !important;
width: 46px !important;
}
.device-map-settings .conexgo-device-cellular .signal,
.device-map-settings .setting-header #sig {
transform: scale(.96) !important;
transform-origin: center !important;
}
.device-map-settings .conexgo-device-gps-icon,
.device-map-settings .conexgo-device-connectivity-icon {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
filter: none !important;
text-shadow: none !important;
line-height: 1 !important;
}
.device-map-settings .conexgo-device-gps-icon,
.device-map-settings .conexgo-device-connectivity-icon,
.device-map-settings .conexgo-device-connectivity-icon i {
color: inherit !important;
}
.device-map-settings .conexgo-device-gps-icon,
.device-map-settings .conexgo-device-connectivity-icon i {
font-size: 18px !important;
line-height: 1 !important;
vertical-align: middle !important;
transform: none !important;
filter: none !important;
text-shadow: none !important;
}
.device-map-settings .conexgo-device-connectivity-dot {
display: none !important;
}
.device-map-settings .conexgo-device-history-item {
min-width: 220px !important;
max-width: 310px !important;
height: 42px !important;
padding: 0 4px 0 8px !important;
flex: 0 1 310px !important;
justify-content: flex-start !important;
background: transparent !important;
}
.device-map-settings .conexgo-device-history-icon {
display: none !important;
}
.device-map-settings .conexgo-device-history-select,
.device-map-settings .setting-header select {
width: 100% !important;
min-width: 190px !important;
height: 40px !important;
margin: 0 !important;
padding: 6px 38px 6px 12px !important;
border: 1px solid #cad9e4 !important;
border-radius: 9px !important;
background-color: #ffffff !important;
color: #284b67 !important;
font-size: 13px !important;
font-weight: 680 !important;
line-height: 1.2 !important;
box-shadow: 0 2px 6px rgba(39, 73, 98, .035) !important;
cursor: pointer !important;
transition:
border-color 130ms ease,
background-color 130ms ease,
box-shadow 130ms ease !important;
}
.device-map-settings .conexgo-device-history-select:hover,
.device-map-settings .setting-header select:hover {
border-color: #aec5d5 !important;
background-color: #fcfdff !important;
}
.device-map-settings .conexgo-device-history-select:focus,
.device-map-settings .setting-header select:focus {
border-color: #79a2bf !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(61, 98, 135, .10) !important;
}
.device-map-settings .setting-header-config {
width: 58px !important;
min-height: 56px !important;
margin: 0 !important;
float: right !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 0 !important;
border-left: 1px solid #d9e4eb !important;
border-radius: 0 !important;
background: #f7fafc !important;
}
.device-map-settings .setting-header-config .dashboard,
.device-map-settings .setting-header-config .dashboard-item {
width: 100% !important;
min-height: 56px !important;
height: 56px !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 0 !important;
background: transparent !important;
}
.device-map-settings .setting-header-config a {
width: 38px !important;
min-width: 38px !important;
height: 38px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid #cbd9e4 !important;
border-radius: 9px !important;
background: #ffffff !important;
color: #315f82 !important;
line-height: 1 !important;
text-decoration: none !important;
box-shadow: 0 2px 6px rgba(39, 73, 98, .04) !important;
transition:
background-color 130ms ease,
border-color 130ms ease,
color 130ms ease !important;
}
.device-map-settings .setting-header-config a:hover,
.device-map-settings .setting-header-config a:focus {
border-color: #adc5d6 !important;
background: #edf4f8 !important;
color: #294f6d !important;
opacity: 1 !important;
}
.device-map-settings .setting-header-config a i {
padding: 0 !important;
color: inherit !important;
font-size: 18px !important;
line-height: 1 !important;
}
.device-map-settings .setting-header-config a span,
.device-map-settings .setting-header-config a br {
display: none !important;
}
.device-map-settings > .setting_header:not(#map-controller) {
clear: both;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-top: 1px solid #e1e9ef !important;
border-bottom: 1px solid #d9e4eb !important;
background: #fbfcfd !important;
}
.device-map-settings > .setting_header:not(#map-controller) > section {
padding: 14px 16px 16px !important;
overflow: visible !important;
}
.device-map-settings > .setting_header:not(#map-controller) .row {
--bs-gutter-x: .85rem;
--bs-gutter-y: .7rem;
}
.device-map-settings > .setting_header:not(#map-controller) .form-label {
margin-bottom: 5px !important;
color: #576e81 !important;
font-size: 11.5px !important;
font-weight: 720 !important;
line-height: 1.2 !important;
}
.device-map-settings > .setting_header:not(#map-controller) .form-control,
.device-map-settings > .setting_header:not(#map-controller) .form-select {
width: 100% !important;
min-width: 0 !important;
height: 40px !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
border: 1px solid #cbd9e4 !important;
border-radius: 8px !important;
background-color: #ffffff !important;
color: #284b67 !important;
font-size: 13px !important;
box-shadow: none !important;
}
.device-map-settings > .setting_header:not(#map-controller) .form-control:focus,
.device-map-settings > .setting_header:not(#map-controller) .form-select:focus {
border-color: #79a2bf !important;
box-shadow: 0 0 0 3px rgba(61, 98, 135, .10) !important;
}
.device-map-settings #goButton {
height: 40px !important;
padding: 0 15px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
border: 1px solid #315f82 !important;
border-radius: 8px !important;
background: #315f82 !important;
color: #ffffff !important;
font-size: 12px !important;
font-weight: 700 !important;
white-space: nowrap !important;
box-shadow: none !important;
}
.device-map-settings #goButton:hover,
.device-map-settings #goButton:focus,
.device-map-settings #goButton:active {
border-color: #294f6d !important;
background: #294f6d !important;
color: #ffffff !important;
box-shadow: none !important;
transform: none !important;
}
.device-map-settings #waitIndicator {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.device-map-settings #map-controller {
clear: both;
border: 0 !important;
}
.device-map-canvas-shell {
position: relative;
clear: both;
margin: 0;
min-width: 0;
overflow: hidden;
border: 0;
background: #f7f9fb;
}
#map-canvas {
width: 100%;
height: clamp(350px, 50vh, 540px);
min-height: 350px;
display: flex;
align-items: center;
justify-content: center;
background: #f7f9fb;
color: #6a7d8e;
font-size: 13px;
}
.device-map-canvas-shell.is-empty {
min-height: 300px;
background:
radial-gradient(circle at 50% 42%, rgba(76, 124, 159, .055), transparent 28%),
#f7f9fb;
}
.device-map-canvas-shell.is-empty #map-canvas {
display: none !important;
}
.device-map-empty-state {
min-height: 300px;
padding: 36px 22px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: #62798c;
text-align: center;
}
.device-map-empty-icon {
width: 50px;
height: 50px;
margin-bottom: 5px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #d7e4ec;
border-radius: 14px;
background: #ffffff;
color: #527b99;
font-size: 17px;
box-shadow: 0 4px 12px rgba(39, 73, 98, .05);
}
.device-map-empty-title {
color: #294c68;
font-size: 15px;
font-weight: 760;
line-height: 1.3;
}
.device-map-empty-description {
max-width: 430px;
color: #738697;
font-size: 12.5px;
line-height: 1.5;
}
.device-map-loading-overlay {
position: absolute;
inset: 0;
z-index: 8;
display: none;
align-items: center;
justify-content: center;
padding: 22px;
background: rgba(247, 249, 252, .90);
backdrop-filter: blur(1.5px);
}
.device-map-canvas-shell.is-loading .device-map-loading-overlay {
display: flex;
}
.device-map-loading-card {
width: min(330px, calc(100% - 28px));
min-height: 188px;
padding: 25px 22px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 11px;
border: 1px solid #d7e2ea;
border-radius: 12px;
background: #ffffff;
box-shadow: 0 8px 24px rgba(44, 76, 108, .08);
color: #315f82;
text-align: center;
}
.device-map-loading-spinner {
width: 48px;
height: 48px;
display: block;
border: 5px solid #e6edf2;
border-top-color: #315f82;
border-radius: 50%;
animation: device-map-loading-spin .85s linear infinite;
}
.device-map-loading-title {
margin-top: 2px;
color: #294c68;
font-size: 15px;
font-weight: 760;
line-height: 1.25;
}
.device-map-loading-description {
max-width: 270px;
color: #768797;
font-size: 12.5px;
line-height: 1.5;
}
@keyframes device-map-loading-spin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 991.98px) {
.device-map-settings .conexgo-device-setting-toolbar,
.device-map-settings .setting-header {
width: 100% !important;
float: none !important;
}
.device-map-settings .setting-header-config {
display: none !important;
}
.device-map-settings .conexgo-device-setting-toolbar .dashboard,
.device-map-settings .setting-header .dashboard {
justify-content: flex-start !important;
}
#map-canvas {
height: clamp(330px, 48vh, 480px);
min-height: 330px;
}
}
@media (max-width: 575.98px) {
.device-map-inner-header {
padding: 12px;
}
.device-map-avatar,
.device-map-avatar-placeholder {
width: 36px;
height: 36px;
min-width: 36px;
margin-right: 9px;
}
.device-map-name {
font-size: 15px;
}
.device-map-meta {
max-width: calc(100vw - 104px);
font-size: 10.5px;
}
.device-map-location-strip {
min-height: 42px;
padding: 8px 11px;
font-size: 12px;
}
.device-map-settings .conexgo-device-setting-toolbar,
.device-map-settings .setting-header {
min-height: 0 !important;
overflow: visible !important;
}
.device-map-settings .conexgo-device-setting-toolbar .dashboard,
.device-map-settings .setting-header .dashboard {
min-height: 0 !important;
padding: 7px 8px !important;
display: grid !important;
grid-template-columns: repeat(5, minmax(44px, 1fr)) !important;
align-items: stretch !important;
gap: 4px !important;
overflow: visible !important;
}
.device-map-settings .conexgo-device-setting-toolbar .dashboard > li,
.device-map-settings .setting-header .dashboard > li {
width: auto !important;
min-width: 0 !important;
min-height: 40px !important;
height: 40px !important;
padding: 0 !important;
}
.device-map-settings .conexgo-device-status-item,
.device-map-settings .conexgo-device-cellular {
width: 100% !important;
min-width: 0 !important;
height: 40px !important;
}
.device-map-settings .conexgo-device-history-item {
grid-column: 1 / -1;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: auto !important;
min-height: 46px !important;
padding: 4px 0 0 !important;
}
.device-map-settings .conexgo-device-history-select,
.device-map-settings .setting-header select {
width: 100% !important;
min-width: 0 !important;
height: 40px !important;
}
.device-map-settings > .setting_header:not(#map-controller) > section {
padding: 12px !important;
}
#map-canvas {
height: 320px;
min-height: 320px;
}
.device-map-canvas-shell.is-empty,
.device-map-empty-state {
min-height: 270px;
}
.device-map-empty-state {
padding: 28px 18px;
}
.device-map-loading-overlay {
padding: 14px;
}
.device-map-loading-card {
min-height: 170px;
padding: 21px 17px;
}
.device-map-loading-spinner {
width: 44px;
height: 44px;
border-width: 4px;
}
}
@media (prefers-reduced-motion: reduce) {
.device-map-settings .conexgo-device-setting-toolbar .dashboard > li,
.device-map-settings .setting-header .dashboard > li,
.device-map-settings .conexgo-device-history-select,
.device-map-settings .setting-header select,
.device-map-settings .setting-header-config a {
transition-duration: .01ms !important;
}
.device-map-loading-spinner {
animation-duration: 1.4s;
}
}
.device-map-settings {
position: relative;
z-index: 4;
overflow: visible !important;
}
.device-map-settings .conexgo-device-setting-toolbar,
.device-map-settings .setting-header,
.device-map-settings .conexgo-device-setting-toolbar > section,
.device-map-settings .setting-header > section {
overflow: visible !important;
}
.device-map-settings .conexgo-device-setting-toolbar .dashboard,
.device-map-settings .setting-header .dashboard {
overflow-y: visible !important;
}
.device-map-settings .conexgo-device-history-item {
position: relative;
z-index: 8;
width: 270px !important;
min-width: 250px !important;
max-width: 300px !important;
flex: 0 0 270px !important;
}
.device-map-settings .conexgo-device-history-item :is(
.cx-custom-select-root,
.cx-control-field,
.cx-control-field--select,
.cx-custom-select-trigger,
.conexgo-device-history-select
) {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
}
.device-map-settings .conexgo-device-history-item .cx-custom-select-value {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.device-map-settings > .setting_header:not(#map-controller) .conexgo-history-form {
width: 100% !important;
max-width: 1040px !important;
margin-right: auto !important;
margin-left: 0 !important;
}
@media (max-width: 991.98px) {
.device-map-settings .conexgo-device-setting-toolbar .dashboard,
.device-map-settings .setting-header .dashboard {
flex-wrap: wrap !important;
overflow-x: visible !important;
overflow-y: visible !important;
}
.device-map-settings .conexgo-device-history-item {
width: auto !important;
min-width: min(260px, 100%) !important;
max-width: 360px !important;
flex: 1 1 280px !important;
}
}
@media (max-width: 575.98px) {
.device-map-settings .conexgo-device-history-item {
grid-column: 1 / -1 !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
flex: 1 1 100% !important;
}
}
/* SOURCE: Conexgo.Client/Components/Pages/device/Device_PhoneEvents.razor */
.cx-dialog--phone-events .row.mt-3:has(> [style*="lightcyan"]) {
width: 100% !important;
margin: 14px 0 0 !important;
display: block !important;
}
.cx-dialog--phone-events .row.mt-3:has(> [style*="lightcyan"]) > [style*="lightcyan"],
.cx-dialog--phone-events .cx-device-config-last-updated,
.cx-dialog--phone-events .cx-r1-phoneevents-last-updated,
.cx-dialog--phone-events .device-phoneevents-last-updated,
.cx-dialog--phone-events .device-phone-events-last-updated {
width: min(100%, 760px) !important;
max-width: 760px !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 12px 14px !important;
display: block !important;
border: 1px solid #d6e3ec !important;
border-left: 4px solid #527b99 !important;
border-radius: 10px !important;
background: #f4f8fb !important;
color: #40566a !important;
box-sizing: border-box !important;
}
.cx-dialog--phone-events .row.mt-3:has(> [style*="lightcyan"]) > [style*="lightcyan"] > div,
.cx-dialog--phone-events .cx-device-config-last-updated > div,
.cx-dialog--phone-events .cx-r1-phoneevents-last-updated > div,
.cx-dialog--phone-events .device-phoneevents-last-updated > div,
.cx-dialog--phone-events .device-phone-events-last-updated > div {
width: 100% !important;
max-width: none !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
.cx-dialog--phone-events .cx-device-config-last-updated,
.cx-dialog--phone-events .cx-r1-phoneevents-last-updated,
.cx-dialog--phone-events .device-phoneevents-last-updated,
.cx-dialog--phone-events .device-phone-events-last-updated {
display: grid !important;
grid-template-columns: 38px minmax(0, 1fr) !important;
column-gap: 12px !important;
align-items: start !important;
}
@media (max-width: 575.98px) {
.cx-dialog--phone-events .cx-device-config-last-updated,
.cx-dialog--phone-events .cx-r1-phoneevents-last-updated,
.cx-dialog--phone-events .device-phoneevents-last-updated,
.cx-dialog--phone-events .device-phone-events-last-updated {
width: 100% !important;
max-width: none !important;
}
}
/* SOURCE: Conexgo.Client/Components/Pages/device/Device_RingTone.razor */
.cx-dialog--ringtone .row.mt-3:has(> [style*="lightcyan"]) {
width: 100% !important;
margin: 14px 0 0 !important;
display: block !important;
}
.cx-dialog--ringtone .row.mt-3:has(> [style*="lightcyan"]) > .col-md-3 {
display: none !important;
}
.cx-dialog--ringtone .row.mt-3:has(> [style*="lightcyan"]) > [style*="lightcyan"],
.cx-dialog--ringtone .cx-device-config-last-updated,
.cx-dialog--ringtone .cx-r1-ringtone-last-updated,
.cx-dialog--ringtone .device-ringtone-last-updated {
width: min(100%, 760px) !important;
max-width: 760px !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 12px 14px !important;
display: block !important;
border: 1px solid #d6e3ec !important;
border-left: 4px solid #527b99 !important;
border-radius: 10px !important;
background: #f4f8fb !important;
color: #40566a !important;
font-size: 13px !important;
line-height: 1.45 !important;
box-sizing: border-box !important;
}
.cx-dialog--ringtone .row.mt-3:has(> [style*="lightcyan"]) > [style*="lightcyan"] > div,
.cx-dialog--ringtone .cx-device-config-last-updated > div,
.cx-dialog--ringtone .cx-r1-ringtone-last-updated > div,
.cx-dialog--ringtone .device-ringtone-last-updated > div {
width: 100% !important;
max-width: none !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
.cx-dialog--ringtone .cx-ringtone-choice-select > input[type="radio"] {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}
.cx-dialog--ringtone .cx-ringtone-choice-select > .cx-device-config-choice-indicator {
position: absolute !important;
left: 16px !important;
top: 50% !important;
width: 20px !important;
height: 20px !important;
transform: translateY(-50%) !important;
border: 2px solid #9aabba !important;
border-radius: 50% !important;
background: #fff !important;
box-shadow: inset 0 0 0 4px #fff !important;
pointer-events: none !important;
}
.cx-dialog--ringtone .cx-ringtone-choice-select > input[type="radio"]:checked + .cx-device-config-choice-indicator {
border-color: #315f8a !important;
background: #315f8a !important;
}
.cx-dialog--ringtone .cx-ringtone-choice-select:focus-within > .cx-device-config-choice-indicator {
outline: 2px solid rgba(49, 95, 138, .28) !important;
outline-offset: 2px !important;
}
/* SOURCE: Conexgo.Client/Components/Pages/device/Geofence.razor */
.device-geofence-configuration-layout-with-preview {
display: grid !important;
grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr) !important;
align-items: start !important;
gap: 20px !important;
width: 100% !important;
min-width: 0 !important;
}
.device-geofence-configuration-layout-without-preview {
display: block !important;
width: 100% !important;
min-width: 0 !important;
}
.device-geofence-fields-column {
min-width: 0 !important;
}
.device-geofence-map-card {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
min-height: 390px !important;
height: clamp(390px, 52dvh, 540px) !important;
max-height: min(60dvh, 560px) !important;
align-self: start !important;
overflow: hidden !important;
border: 1px solid #cfdeea !important;
border-radius: 14px !important;
background: #ffffff !important;
box-shadow: 0 5px 18px rgba(35, 74, 108, .08) !important;
}
.device-geofence-map-header {
position: relative !important;
z-index: 10 !important;
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
min-height: 52px !important;
padding: 0 14px !important;
border-bottom: 1px solid #dbe6ef !important;
background: #f7fafc !important;
color: #244d70 !important;
font-weight: 800 !important;
}
.device-geofence-map-header > div {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
.device-geofence-map-preview {
display: block !important;
position: relative !important;
isolation: isolate !important;
width: 100% !important;
min-width: 0 !important;
min-height: 330px !important;
flex: 1 1 330px !important;
overflow: hidden !important;
background: #eef4f8 !important;
}
.device-geofence-map-preview > div,
.device-geofence-map-preview .gm-style {
width: 100% !important;
height: 100% !important;
min-height: 330px !important;
}
.device-geofence-map-empty {
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
padding: 28px !important;
text-align: center !important;
background:
radial-gradient(circle at 50% 35%, rgba(74, 126, 168, .09), transparent 42%),
#f5f9fc !important;
color: #4a6175 !important;
}
.device-geofence-map-empty > i {
width: 52px !important;
height: 52px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid #cbdce8 !important;
border-radius: 50% !important;
background: #ffffff !important;
color: #356789 !important;
font-size: 21px !important;
box-shadow: 0 5px 14px rgba(35, 74, 108, .08) !important;
}
.device-geofence-map-empty strong {
color: #244d70 !important;
font-size: 16px !important;
font-weight: 800 !important;
}
.device-geofence-map-empty span {
max-width: 330px !important;
line-height: 1.5 !important;
}
.device-geofence-map-empty .btn {
margin-top: 4px !important;
}
.device-geofence-map-status {
z-index: 8 !important;
min-height: 100% !important;
background: #f5f9fc !important;
}
.device-geofence-map-card.device-geofence-map-resizable {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
resize: none !important;
flex: initial !important;
}
.device-geofence-map-canvas {
z-index: 1 !important;
background: #eef4f8 !important;
}
@media (max-width: 1199.98px) {
.device-geofence-configuration-layout-with-preview {
grid-template-columns: minmax(0, 1fr) !important;
}
.device-geofence-map-card {
min-height: 350px !important;
height: 360px !important;
max-height: 520px !important;
position: relative !important;
top: auto !important;
}
.device-geofence-map-preview,
.device-geofence-map-preview > div,
.device-geofence-map-preview .gm-style {
min-height: 300px !important;
}
}
.device-geofence-configuration-layout.is-manual-focus {
grid-template-columns: minmax(0, 1fr) !important;
gap: 16px !important;
}
.device-geofence-configuration-layout.is-manual-focus > .device-geofence-map-card {
grid-column: 1 / -1 !important;
order: -2 !important;
min-height: 520px !important;
height: clamp(520px, 64dvh, 720px) !important;
max-height: 72dvh !important;
}
.device-geofence-configuration-layout.is-manual-focus > .device-geofence-fields-column {
grid-column: 1 / -1 !important;
order: 1 !important;
}
.device-geofence-configuration-layout.is-manual-focus .device-geofence-map-preview,
.device-geofence-configuration-layout.is-manual-focus .device-geofence-map-canvas {
min-height: 390px !important;
height: 100% !important;
}
.device-geofence-map-header-actions { display:flex !important; align-items:center !important; gap:8px !important; }
.device-geofence-map-focus-exit {
min-height:34px !important; display:inline-flex !important; align-items:center !important; gap:7px !important;
padding:6px 11px !important; border:1px solid #b7cade !important; border-radius:8px !important;
background:#fff !important; color:#244d73 !important; font-weight:700 !important;
}
.device-geofence-map-location-search {
display:grid !important; gap:6px !important; padding:10px 12px 12px !important;
border-bottom:1px solid #d8e5f1 !important; background:#f7fbff !important;
}
.device-geofence-map-location-search > label {
display:flex !important; align-items:center !important; gap:7px !important; margin:0 !important;
color:#244d73 !important; font-size:12.5px !important; font-weight:800 !important;
}
.device-geofence-map-location-search-row {
display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; gap:8px !important; align-items:center !important;
}
.device-geofence-map-location-search-row .form-control { min-height:40px !important; margin:0 !important; }
.device-geofence-map-location-search-button {
min-height:40px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important;
gap:7px !important; padding:7px 14px !important; border:1px solid #2f628d !important; border-radius:8px !important;
background:#315f88 !important; color:#fff !important; font-weight:800 !important; white-space:nowrap !important;
}
.device-geofence-map-location-search > small { color:#5f7388 !important; line-height:1.35 !important; }
.device-geofence-map-location-result { color:#315f88 !important; font-size:12px !important; font-weight:700 !important; }
@media (max-width: 767.98px) {
.device-geofence-map-location-search-row { grid-template-columns:minmax(0,1fr) !important; }
.device-geofence-map-location-search-button { width:100% !important; }
.device-geofence-configuration-layout.is-manual-focus > .device-geofence-map-card {
min-height:480px !important; height:min(68dvh,620px) !important; max-height:none !important;
}
}
/* SOURCE: Conexgo.Client/Components/Pages/group/Group_View.razor */
.cx-group-view-page .cx-group-view-wrapper,
.cx-group-view-page .cx-group-view-shell,
.cx-group-view-page .cx-group-view-layout,
.cx-group-view-page .cx-group-view-list-column,
.cx-group-view-page .cx-group-view-map-column {
min-width: 0 !important;
}
.cx-group-view-page .cx-group-view-layout {
width: 100% !important;
max-width: 100% !important;
display: grid !important;
grid-template-columns: minmax(560px, 1.08fr) minmax(420px, .92fr) !important;
gap: 16px !important;
align-items: stretch !important;
}
.cx-group-view-page .cx-group-view-list-column {
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
}
/* The outer wrapper is the only desktop/tablet table scroll owner. */
.cx-group-view-page .cx-group-view-list-scroll {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow: auto !important;
overscroll-behavior: contain !important;
scrollbar-gutter: stable both-edges !important;
scrollbar-width: thin !important;
scrollbar-color: #5f8cac #edf3f7 !important;
}
.cx-group-view-page .cx-group-view-list-scroll::-webkit-scrollbar {
width: 9px !important;
height: 9px !important;
}
.cx-group-view-page .cx-group-view-list-scroll::-webkit-scrollbar-track {
background: #edf3f7 !important;
}
.cx-group-view-page .cx-group-view-list-scroll::-webkit-scrollbar-thumb {
border: 2px solid #edf3f7 !important;
border-radius: 999px !important;
background: #5f8cac !important;
}
.cx-group-view-page .cx-group-view-list-scroll :is(.conexgo-pagedlist-table-region, .conexgo-pagedlist-table-column) {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
overflow: visible !important;
}
.cx-group-view-page .cx-group-view-list-scroll .conexgo-pagedlist-table {
width: 100% !important;
min-width: 780px !important;
max-width: none !important;
table-layout: fixed !important;
}
.cx-group-view-page .cx-group-view-list-scroll .conexgo-pagedlist-table th:nth-child(1),
.cx-group-view-page .cx-group-view-list-scroll .conexgo-pagedlist-table td:nth-child(1) { width: 38% !important; }
.cx-group-view-page .cx-group-view-list-scroll .conexgo-pagedlist-table th:nth-child(2),
.cx-group-view-page .cx-group-view-list-scroll .conexgo-pagedlist-table td:nth-child(2) { width: 26% !important; }
.cx-group-view-page .cx-group-view-list-scroll .conexgo-pagedlist-table th:nth-child(3),
.cx-group-view-page .cx-group-view-list-scroll .conexgo-pagedlist-table td:nth-child(3) { width: 36% !important; }
.cx-group-view-page .cx-group-view-list-scroll .conexgo-pagedlist-table td {
min-width: 0 !important;
overflow-wrap: anywhere !important;
}
.cx-group-view-page .cx-group-view-status-cell {
vertical-align: middle !important;
text-align: center !important;
}
.cx-group-view-page .cx-group-view-status-icons {
min-width: 96px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 9px !important;
white-space: nowrap !important;
}
.cx-group-view-page .cx-group-view-status-icon {
width: 20px !important;
min-width: 20px !important;
font-size: 18px !important;
line-height: 1 !important;
text-align: center !important;
}
.cx-group-view-page .cx-group-view-battery-icon {
width: 20px !important;
min-width: 20px !important;
height: 20px !important;
line-height: 20px !important;
font-size: 18px !important;
}
.cx-group-view-mobile-context,
.cx-group-mobile-field-label { display: none; }
.cx-group-member-name-value {
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
}
.cx-group-member-name-value img {
flex: 0 0 auto;
max-width: 28px;
max-height: 28px;
padding: 0 !important;
}
.cx-group-member-lastreported-time,
.cx-group-member-address { display: block; }
.cx-group-member-lastreported-time { font-weight: 700; }
.cx-group-member-address {
margin-top: 4px;
font-size: .8rem;
line-height: 1.35;
color: #64748b;
}
@media (min-width: 1200px) {
.cx-group-view-page .cx-group-view-layout {
height: var(--cx-group-view-pane-height, 430px) !important;
min-height: 430px !important;
max-height: 900px !important;
}
.cx-group-view-page .cx-group-view-list-column,
.cx-group-view-page .cx-group-view-map-column {
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
}
.cx-group-view-page .cx-group-view-list-scroll {
flex: 1 1 auto !important;
height: 100% !important;
min-height: 0 !important;
}
.cx-group-view-page .cx-group-view-map-canvas {
flex: 1 1 auto !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
overflow: hidden !important;
}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
.cx-group-view-page .cx-group-view-layout {
grid-template-columns: minmax(0, 1fr) !important;
height: auto !important;
max-height: none !important;
gap: 14px !important;
}
.cx-group-view-page .cx-group-view-map-column {
order: -1 !important;
}
.cx-group-view-page .cx-group-view-map-canvas {
height: clamp(360px, 50vh, 500px) !important;
min-height: 360px !important;
}
.cx-group-view-page .cx-group-view-list-scroll {
max-height: min(620px, 62vh) !important;
}
}
@media (max-width: 767.98px) {
.cx-group-view-page { padding-bottom: 92px !important; }
.cx-group-view-page .cx-group-view-layout {
grid-template-columns: minmax(0, 1fr) !important;
height: auto !important;
max-height: none !important;
gap: 12px !important;
}
.cx-group-view-page .cx-group-view-map-column {
order: -1 !important;
width: 100% !important;
margin: 0 0 12px !important;
border: 1px solid #e2e8f0 !important;
border-radius: 11px !important;
background: #fff !important;
overflow: hidden !important;
}
.cx-group-view-page .cx-group-view-map-canvas {
height: clamp(300px, 46vh, 400px) !important;
min-height: 300px !important;
}
.cx-group-view-page .cx-group-view-card {
border: 0 !important;
border-radius: 12px !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
.cx-group-view-page .cx-group-view-mobile-context {
margin: 0 0 10px !important;
padding: 12px !important;
display: block !important;
gap: 0 !important;
border: 1px solid #e2e8f0 !important;
border-radius: 11px !important;
background: #fff !important;
box-shadow: 0 3px 10px rgba(32, 57, 83, .06) !important;
}
.cx-group-view-mobile-context-copy { min-width: 0; }
.cx-group-view-mobile-eyebrow {
display: block;
margin-bottom: 3px;
color: #64748b;
font-size: .69rem;
font-weight: 700;
letter-spacing: .045em;
text-transform: uppercase;
}
.cx-group-view-mobile-context h2 {
margin: 0 !important;
color: #17233c !important;
font-size: 1rem !important;
line-height: 1.2 !important;
overflow-wrap: anywhere;
}
.cx-group-view-page .card-header.cx-list-toolbar {
margin: 0 0 10px !important;
padding: 8px !important;
border: 0 !important;
border-radius: 10px !important;
background: #2d587d !important;
overflow: hidden !important;
}
.cx-group-view-page .cx-group-view-mobile-toolbar-row {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) 52px !important;
gap: 8px !important;
align-items: stretch !important;
}
.cx-group-view-page :is(.cx-list-search, .dataTables_filter, .dataTables_filter > label) {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
}
.cx-group-view-page .cx-group-view-mobile-toolbar-row .cx-list-search {
grid-column: 1 !important;
}
.cx-group-view-page .cx-group-view-mobile-toolbar-row .conexgo-search-wrapper {
min-width: 0 !important;
}
.cx-group-view-page .cx-group-view-mobile-toolbar-row .conexgo-search-button,
.cx-group-view-page .cx-group-view-toolbar-refresh {
min-height: 52px !important;
border: 1px solid #4c82aa !important;
background: #3f739a !important;
color: #ffffff !important;
box-shadow: none !important;
}
.cx-group-view-page .cx-group-view-mobile-toolbar-row .conexgo-search-button:is(:hover, :focus-visible),
.cx-group-view-page .cx-group-view-toolbar-refresh:is(:hover, :focus-visible) {
border-color: #315f82 !important;
background: #315f82 !important;
color: #ffffff !important;
}
.cx-group-view-page .cx-group-view-toolbar-refresh {
grid-column: 2 !important;
width: 52px !important;
min-width: 52px !important;
height: 52px !important;
padding: 0 !important;
display: inline-grid !important;
place-items: center !important;
border-radius: 9px !important;
font-size: 1rem !important;
}
.cx-group-view-page .card-body { padding: 0 !important; }
.cx-group-view-page .card-body > .d-flex.align-items-center.justify-content-between { display: none !important; }
.cx-group-view-page .cx-group-view-list-scroll,
.cx-group-view-page .cx-group-view-list-scroll :is(.conexgo-pagedlist-table-region, .conexgo-pagedlist-table-column) {
overflow: visible !important;
max-height: none !important;
scrollbar-gutter: auto !important;
}
.cx-group-view-page .cx-group-view-list-scroll .conexgo-pagedlist-table {
width: 100% !important;
min-width: 0 !important;
table-layout: auto !important;
border-collapse: separate !important;
border-spacing: 0 9px !important;
background: transparent !important;
}
.cx-group-view-page .cx-group-view-list-scroll .conexgo-pagedlist-table thead { display: none !important; }
.cx-group-view-page .cx-group-view-list-scroll .conexgo-pagedlist-table :is(tbody, tr, td) {
width: 100% !important;
max-width: 100% !important;
display: block !important;
}
/* Razor already owns mobile labels; generic table pseudo-labels must stay silent. */
.cx-group-view-page .conexgo-pagedlist-table td::before,
.cx-group-view-page .conexgo-pagedlist-table td::after {
content: none !important;
display: none !important;
}
.cx-group-view-page .cx-group-member-row {
margin: 0 !important;
padding: 12px !important;
border: 1px solid #e2e8f0 !important;
border-radius: 11px !important;
background: #fff !important;
box-shadow: 0 3px 10px rgba(32, 57, 83, .055) !important;
overflow: hidden !important;
}
.cx-group-view-page .cx-group-member-row > td {
min-width: 0 !important;
padding: 7px 0 !important;
border: 0 !important;
text-align: left !important;
overflow: visible !important;
}
.cx-group-view-page .cx-group-member-row > td + td { border-top: 1px solid #edf2f7 !important; }
.cx-group-view-page .cx-group-mobile-field-label {
margin-bottom: 5px;
display: block !important;
color: #315f82;
font-size: .66rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: .045em;
text-transform: uppercase;
}
.cx-group-view-page .cx-group-member-name-value {
gap: 9px;
color: #17233c;
font-size: .86rem;
font-weight: 650;
line-height: 1.35;
}
.cx-group-view-page .cx-group-view-status-icons {
min-width: 0 !important;
justify-content: flex-start !important;
gap: 10px !important;
}
.cx-group-view-page .cx-group-member-lastreported-time { font-size: .78rem; line-height: 1.35; }
.cx-group-view-page .cx-group-member-address {
max-width: 100%;
font-size: .72rem;
line-height: 1.4;
overflow-wrap: anywhere;
}
}
/* SOURCE: Conexgo.Client/Components/Pages/Shared/page-components/ChangePassword.razor */
.mud-dialog:has(.cx-password-r757),
.blazored-modal:has(.cx-password-r757),
.modal-content:has(.cx-password-r757) {
width: min(760px, calc(100vw - 30px)) !important;
max-width: 760px !important;
border-radius: 14px !important;
overflow: hidden !important;
box-shadow: 0 18px 44px rgba(31, 56, 78, .16) !important;
}
.cx-password-r757 {
width: 100%;
min-width: 0;
background: #ffffff;
color: #31495d;
}
.cx-password-r757-form {
width: 100%;
min-width: 0;
margin: 0;
}
.cx-password-r757-card {
margin: 0;
padding: 20px 22px 22px;
border: 0;
background: #ffffff;
}
.cx-password-r757-heading {
min-width: 0;
display: flex;
align-items: flex-start;
gap: 12px;
}
.cx-password-r757-heading-icon {
width: 38px;
height: 38px;
min-width: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #d6e3eb;
border-radius: 10px;
background: #eef5f9;
color: #315f82;
font-size: 14px;
}
.cx-password-r757-heading-copy {
min-width: 0;
flex: 1 1 auto;
}
.cx-password-r757-title {
margin: 1px 0 0;
color: #294c68;
font-size: 15px;
font-weight: 760;
line-height: 1.3;
}
.cx-password-r757-description {
margin: 5px 0 0;
color: #718495;
font-size: 12.5px;
line-height: 1.5;
}
.cx-password-r757-policy {
margin-top: 15px;
padding: 10px 12px;
display: flex;
align-items: flex-start;
gap: 9px;
border: 1px solid #dce7ed;
border-radius: 9px;
background: #f8fbfc;
color: #5f7486;
font-size: 12px;
line-height: 1.45;
}
.cx-password-r757-policy i {
margin-top: 2px;
flex: 0 0 auto;
color: #527b99;
}
.cx-password-r757-fields {
margin-top: 18px;
display: grid;
gap: 14px;
}
.cx-password-r757-row {
min-width: 0;
display: grid;
grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
align-items: start;
gap: 14px;
}
.cx-password-r757-label {
padding-top: 12px;
color: #50697d;
font-size: 12.5px;
font-weight: 720;
line-height: 1.35;
text-align: right;
}
.cx-password-r757-control {
min-width: 0;
}
.cx-password-r757-input-shell {
position: relative;
min-width: 0;
}
.cx-password-r757-input {
width: 100% !important;
min-width: 0 !important;
height: 44px !important;
padding: 8px 13px !important;
border: 1px solid #cad9e4 !important;
border-radius: 9px !important;
background: #ffffff !important;
color: #29475f !important;
font-size: 13px !important;
line-height: 1.3 !important;
box-shadow: none !important;
}
.cx-password-r757-input-shell .cx-password-r757-input {
padding-right: 48px !important;
}
.cx-password-r757-input:hover {
border-color: #aec4d4 !important;
}
.cx-password-r757-input:focus {
border-color: #79a2bf !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(61, 98, 135, .10) !important;
}
.cx-password-r757-eye {
position: absolute;
top: 4px;
right: 4px;
width: 36px;
height: 36px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 7px;
background: transparent;
color: #617c91;
cursor: pointer;
transition:
background-color 120ms ease,
color 120ms ease;
}
.cx-password-r757-eye:hover,
.cx-password-r757-eye:focus-visible {
outline: none;
background: #eef4f8;
color: #315f82;
}
.cx-password-r757-control .validation-message {
display: block;
margin-top: 5px;
color: #b74f59;
font-size: 11.5px;
font-weight: 620;
line-height: 1.35;
}
.cx-password-r757-actions {
padding: 13px 22px 15px;
display: flex;
align-items: center;
justify-content: flex-end;
border-top: 1px solid #e2eaef;
background: #f8fafb;
}
.cx-password-r757-save {
min-width: 126px;
height: 40px;
padding: 0 16px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid #6b8f71;
border-radius: 8px;
background: #6b8f71;
color: #ffffff;
font-size: 12.5px;
font-weight: 720;
line-height: 1;
cursor: pointer;
box-shadow: 0 3px 9px rgba(71, 111, 79, .10);
transition:
background-color 120ms ease,
border-color 120ms ease,
box-shadow 120ms ease;
}
.cx-password-r757-save:hover:not(:disabled),
.cx-password-r757-save:focus-visible:not(:disabled) {
border-color: #5f8066;
outline: none;
background: #5f8066;
box-shadow: 0 4px 11px rgba(71, 111, 79, .14);
}
.cx-password-r757-save:disabled {
cursor: wait;
opacity: .66;
box-shadow: none;
}
.cx-password-r757-loading {
min-height: 180px;
padding: 28px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 11px;
color: #697f91;
font-size: 12.5px;
}
.cx-password-r757-spinner {
width: 38px;
height: 38px;
border: 4px solid #e3ebf0;
border-top-color: #315f82;
border-radius: 50%;
animation: cx-password-r757-spin .85s linear infinite;
}
@keyframes cx-password-r757-spin {
to {
transform: rotate(360deg);
}
}
@media (max-width: 720px) {
.mud-dialog:has(.cx-password-r757),
.blazored-modal:has(.cx-password-r757),
.modal-content:has(.cx-password-r757) {
width: calc(100vw - 20px) !important;
max-width: calc(100vw - 20px) !important;
}
.cx-password-r757-card {
padding: 18px 16px;
}
.cx-password-r757-row {
grid-template-columns: minmax(0, 1fr);
gap: 6px;
}
.cx-password-r757-label {
padding-top: 0;
text-align: left;
}
.cx-password-r757-actions {
padding: 12px 16px 14px;
}
}
@media (max-width: 460px) {
.cx-password-r757-actions {
display: grid;
}
.cx-password-r757-save {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.cx-password-r757-eye,
.cx-password-r757-save {
transition-duration: .01ms !important;
}
.cx-password-r757-spinner {
animation-duration: 1.4s;
}
}
/* 1) Sidebar / row-menu stacking: preserve geometry, repair ownership. */
@media (min-width: 768px) {
html body.cx-design-system .app-sidebar-shell {
z-index: 1200 !important;
isolation: isolate !important;
}
html body.cx-design-system .app-sidebar-modern {
z-index: 1201 !important;
}
html body.cx-design-system .app-sidebar-modern .side-header {
position: sticky !important;
top: 0 !important;
z-index: 1220 !important;
background: #ffffff !important;
opacity: 1 !important;
visibility: visible !important;
isolation: isolate !important;
}
html body.cx-design-system .app-sidebar-modern .side-header .header-brand1 {
position: relative !important;
z-index: 1221 !important;
background: #ffffff !important;
}
html body.cx-design-system .app-sidebar-modern .side-header
:is(.conexgo-sidebar-brand-primary, .desktop-logo, .header-brand-img) {
position: relative !important;
z-index: 1222 !important;
}
html body.cx-design-system
:is(.device-list-action-menu, .conexgo-row-action-menu).show {
z-index: 1150 !important;
}
html body.cx-design-system .conexgo-pagedlist-table tbody
tr:has(.device-list-action-menu.show),
html body.cx-design-system .conexgo-pagedlist-table tbody
td:has(.device-list-action-menu.show),
html body.cx-design-system
.device-list-action-group:has(.device-list-action-menu.show) {
z-index: 1140 !important;
}
}
/* 2) Alert resource buttons: real persistent dark open state + soft semantic hover. */
html body.cx-design-system
:is(.cx-dialog--alert-answer, .cx-dialog--alert-view)
.alert-answer-toggle {
transition:
background-color 150ms ease,
border-color 150ms ease,
color 150ms ease,
box-shadow 150ms ease,
transform 150ms ease !important;
}
/* Contacts / red. */
html body.cx-design-system
:is(.cx-dialog--alert-answer, .cx-dialog--alert-view)
.alert-answer-toggle-danger:not(.active):not([aria-expanded="true"]):hover,
html body.cx-design-system
:is(.cx-dialog--alert-answer, .cx-dialog--alert-view)
.alert-answer-toggle-danger:not(.active):not([aria-expanded="true"]):focus-visible {
background: #f8deda !important;
border-color: #df8179 !important;
color: #a72e25 !important;
box-shadow: 0 4px 12px rgba(202, 61, 50, .14) !important;
}
html body.cx-design-system
:is(.cx-dialog--alert-answer, .cx-dialog--alert-view)
.alert-answer-toggle-danger:is(.active, [aria-expanded="true"]) {
background: #ca3d32 !important;
border-color: #ca3d32 !important;
color: #ffffff !important;
box-shadow: 0 5px 14px rgba(202, 61, 50, .24) !important;
}
/* Emergency information / blue. */
html body.cx-design-system
:is(.cx-dialog--alert-answer, .cx-dialog--alert-view)
.alert-answer-toggle-info:not(.alert-answer-toggle-documents):not(.active):not([aria-expanded="true"]):hover,
html body.cx-design-system
:is(.cx-dialog--alert-answer, .cx-dialog--alert-view)
.alert-answer-toggle-info:not(.alert-answer-toggle-documents):not(.active):not([aria-expanded="true"]):focus-visible {
background: #dfeaf3 !important;
border-color: #86a9c3 !important;
color: #274f6e !important;
box-shadow: 0 4px 12px rgba(49, 95, 130, .14) !important;
}
html body.cx-design-system
:is(.cx-dialog--alert-answer, .cx-dialog--alert-view)
.alert-answer-toggle-info:not(.alert-answer-toggle-documents):is(.active, [aria-expanded="true"]) {
background: #315f82 !important;
border-color: #315f82 !important;
color: #ffffff !important;
box-shadow: 0 5px 14px rgba(49, 95, 130, .24) !important;
}
/* Documents / green. */
html body.cx-design-system
:is(.cx-dialog--alert-answer, .cx-dialog--alert-view)
.alert-answer-toggle-documents:not(.active):not([aria-expanded="true"]):hover,
html body.cx-design-system
:is(.cx-dialog--alert-answer, .cx-dialog--alert-view)
.alert-answer-toggle-documents:not(.active):not([aria-expanded="true"]):focus-visible {
background: #e1f0e5 !important;
border-color: #8abb99 !important;
color: #347348 !important;
box-shadow: 0 4px 12px rgba(75, 148, 97, .14) !important;
}
html body.cx-design-system
:is(.cx-dialog--alert-answer, .cx-dialog--alert-view)
.alert-answer-toggle-documents:is(.active, [aria-expanded="true"]) {
background: #4b9461 !important;
border-color: #4b9461 !important;
color: #ffffff !important;
box-shadow: 0 5px 14px rgba(75, 148, 97, .24) !important;
}
html body.cx-design-system
:is(.cx-dialog--alert-answer, .cx-dialog--alert-view)
:is(
.alert-answer-toggle-danger,
.alert-answer-toggle-info:not(.alert-answer-toggle-documents),
.alert-answer-toggle-documents
):is(.active, [aria-expanded="true"])
:is(i, span, strong) {
color: #ffffff !important;
}
/* Alert View map: same visual weight as the adjacent sections. */
html body.cx-design-system .cx-dialog--alert-view .alert-view-map-wrap {
width: 100% !important;
border-radius: 11px !important;
}
html body.cx-design-system .cx-dialog--alert-view .alert-view-map-toolbar {
min-height: 64px !important;
padding: 11px 16px !important;
}
html body.cx-design-system .cx-dialog--alert-view .alert-view-map-title {
font-size: 10pt !important;
font-weight: 800 !important;
}
html body.cx-design-system .cx-dialog--alert-view .alert-view-map-toggle {
width: 48px !important;
min-width: 48px !important;
height: 48px !important;
min-height: 48px !important;
}
html body.cx-design-system .cx-dialog--alert-view .alert-view-map-canvas {
width: 100% !important;
height: 430px !important;
min-height: 360px !important;
}
/* 3) Device Map: readable semantic status icons and coherent history cards. */
html body.cx-design-system .device-map-settings .conexgo-device-status-item {
color: #71879a !important;
}
html body.cx-design-system .device-map-settings .cx-device-tone-primary {
color: #326a95 !important;
}
html body.cx-design-system .device-map-settings .cx-device-tone-success {
color: #37814e !important;
}
html body.cx-design-system .device-map-settings .cx-device-tone-warning {
color: #b98215 !important;
}
html body.cx-design-system .device-map-settings .cx-device-tone-danger {
color: #b8505b !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: #97a6b3 !important;
}
html body.cx-design-system .device-map-settings
.conexgo-device-status-item
:is(
.conexgo-device-simple-icon,
.conexgo-device-simple-icon i,
.conexgo-device-battery-icon,
.conexgo-device-battery-charge,
#satellite
) {
color: currentColor !important;
opacity: 1 !important;
text-shadow: none !important;
filter: none !important;
}
html body.cx-design-system .device-map-settings
.conexgo-device-cellular .signal {
color: inherit !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 .device-map-settings
.conexgo-device-cellular .signal .bar:not(.active) {
background: #c7d2db !important;
opacity: .85 !important;
}
html body.cx-design-system .device-map-settings .conexgo-history-results {
display: grid !important;
grid-template-columns: minmax(280px, .9fr) minmax(430px, 1.1fr) !important;
align-items: stretch !important;
gap: 12px !important;
}
html body.cx-design-system .device-map-settings .conexgo-history-location-count,
html body.cx-design-system .device-map-settings .conexgo-history-playback {
min-height: 64px !important;
height: auto !important;
margin: 0 !important;
border: 1px solid #c7d9e7 !important;
border-radius: 12px !important;
background: #ffffff !important;
color: #294f6d !important;
box-shadow: 0 4px 14px rgba(39, 73, 98, .08) !important;
box-sizing: border-box !important;
}
html body.cx-design-system .device-map-settings .conexgo-history-location-count {
width: 100% !important;
padding: 9px 16px !important;
justify-content: flex-start !important;
gap: 11px !important;
font-size: 13.5px !important;
line-height: 1.35 !important;
}
html body.cx-design-system .device-map-settings
.conexgo-history-location-count > i {
width: 38px !important;
height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 38px !important;
border: 1px solid #d4e1eb !important;
border-radius: 10px !important;
background: #f5f9fc !important;
color: #3d6f95 !important;
font-size: 15px !important;
}
html body.cx-design-system .device-map-settings .conexgo-history-playback {
padding: 7px 9px !important;
}
html body.cx-design-system .device-map-settings
.conexgo-history-playback-time {
min-height: 48px !important;
border-radius: 10px !important;
background: #f7fafc !important;
}
@media (max-width: 900px) {
html body.cx-design-system .device-map-settings .conexgo-history-results {
grid-template-columns: 1fr !important;
}
}
/* 4) Device Message: balanced header row + editable reusable templates. */
html body.cx-design-system .cx-dialog--message .device-message-summary-grid,
html body.cx-design-system .device-message-dialog .device-message-summary-grid {
grid-template-columns: minmax(260px, .95fr) minmax(300px, 1.05fr) !important;
align-items: stretch !important;
gap: 14px !important;
}
html body.cx-design-system .cx-dialog--message .device-message-device,
html body.cx-design-system .cx-dialog--message .device-message-type-field,
html body.cx-design-system .device-message-dialog .device-message-device,
html body.cx-design-system .device-message-dialog .device-message-type-field {
min-height: 82px !important;
height: 100% !important;
box-sizing: border-box !important;
}
html body.cx-design-system .cx-dialog--message .device-message-type-field,
html body.cx-design-system .device-message-dialog .device-message-type-field {
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
margin: 0 !important;
}
html body.cx-design-system .cx-dialog--message
.device-message-type-field .cx-custom-select-root,
html body.cx-design-system .device-message-dialog
.device-message-type-field .cx-custom-select-root {
width: 100% !important;
}
html body.cx-design-system .device-message-template-panel {
margin: 14px 0 12px !important;
padding: 12px !important;
border: 1px solid #d5e2ec !important;
border-radius: 11px !important;
background: #f8fbfd !important;
}
html body.cx-design-system .device-message-template-heading {
margin-bottom: 9px !important;
display: flex !important;
align-items: baseline !important;
justify-content: space-between !important;
gap: 12px !important;
color: #315a79 !important;
}
html body.cx-design-system .device-message-template-heading strong {
font-size: 12px !important;
font-weight: 800 !important;
}
html body.cx-design-system .device-message-template-heading small {
color: #708297 !important;
font-size: 11px !important;
}
html body.cx-design-system .device-message-template-list {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
html body.cx-design-system .device-message-template-chip {
min-height: 36px !important;
padding: 0 12px !important;
border: 1px solid #c7d9e7 !important;
border-radius: 9px !important;
background: #ffffff !important;
color: #315a79 !important;
font-size: 11.5px !important;
font-weight: 750 !important;
line-height: 1.2 !important;
cursor: pointer !important;
transition:
background-color 140ms ease,
border-color 140ms ease,
box-shadow 140ms ease,
transform 140ms ease !important;
}
html body.cx-design-system .device-message-template-chip:hover,
html body.cx-design-system .device-message-template-chip:focus-visible {
border-color: #7ea6c4 !important;
background: #edf5fa !important;
box-shadow: 0 3px 10px rgba(49, 90, 121, .10) !important;
transform: translateY(-1px) !important;
}
@media (max-width: 767.98px) {
html body.cx-design-system .cx-dialog--message .device-message-summary-grid,
html body.cx-design-system .device-message-dialog .device-message-summary-grid {
grid-template-columns: 1fr !important;
}
html body.cx-design-system .device-message-template-chip {
flex: 1 1 180px !important;
}
}
/* 5) Reports: one density/system for operator reports and monthly reports. */
html body.cx-design-system .cx-monthly-report-list-card
.cx-monthly-report-row-action,
html body.cx-design-system .cx-monthly-report-list-card
.cx-report-standard-action,
html body.cx-design-system .report-list-card
.cx-report-standard-action {
width: 42px !important;
min-width: 42px !important;
height: 40px !important;
min-height: 40px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 6px !important;
font-size: 13px !important;
line-height: 1 !important;
}
html body.cx-design-system .cx-monthly-report-list-card .btn-list,
html body.cx-design-system .report-list-card .btn-list {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
html body.cx-design-system .cx-monthly-report-list-card .report-list-toolbar,
html body.cx-design-system .report-list-card .report-list-toolbar {
min-height: 72px !important;
}
html body.cx-design-system .cx-monthly-report-list-card
.report-list-toolbar-row {
width: 100% !important;
min-height: 48px !important;
align-items: center !important;
justify-content: space-between !important;
gap: 14px !important;
}
/* Report Subscribe: remove the large viewport spacer regression. */
html body.cx-design-system
:is(.report-subscribe-modern, .cx-dialog--report-subscribe, .report-subscribe-dialog) {
width: min(1120px, calc(100vw - 40px)) !important;
max-width: 1120px !important;
max-height: min(90dvh, 900px) !important;
}
html body.cx-design-system
:is(.report-subscribe-modern, .cx-dialog--report-subscribe, .report-subscribe-dialog)
.mud-dialog-content,
html body.cx-design-system .report-subscribe-content {
min-height: 0 !important;
max-height: none !important;
padding-bottom: 18px !important;
scroll-padding-bottom: 18px !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
}
html body.cx-design-system .report-subscribe-content::after,
html body.cx-design-system
:is(.report-subscribe-modern, .cx-dialog--report-subscribe, .report-subscribe-dialog)
.mud-dialog-content::after {
display: none !important;
content: none !important;
}
html body.cx-design-system
:is(.report-subscribe-modern, .cx-dialog--report-subscribe, .report-subscribe-dialog)
.mud-dialog-actions {
position: static !important;
inset: auto !important;
min-height: 64px !important;
padding: 10px 16px !important;
flex: 0 0 auto !important;
border-top: 1px solid #d7e1e9 !important;
background: #ffffff !important;
box-shadow: none !important;
}
html body.cx-design-system .report-subscribe-footer {
position: static !important;
inset: auto !important;
width: 100% !important;
margin: 0 !important;
flex: 0 0 auto !important;
}
html body.cx-design-system
:is(.report-subscribe-modern, .cx-dialog--report-subscribe, .report-subscribe-dialog)
:is(.report-subscribe-button, .cx-dialog-action, .mud-button-root) {
min-height: 40px !important;
height: 40px !important;
padding: 0 14px !important;
border-radius: 8px !important;
font-size: 11.5px !important;
line-height: 1 !important;
}
html body.cx-design-system
:is(.cx-dialog--report-preview, .report-preview-dialog)
:is(.cx-dialog-action, .mud-button-root) {
min-height: 40px !important;
height: 40px !important;
padding: 0 14px !important;
border-radius: 8px !important;
font-size: 11.5px !important;
}
@media (max-width: 767.98px) {
html body.cx-design-system
:is(.report-subscribe-modern, .cx-dialog--report-subscribe, .report-subscribe-dialog) {
width: calc(100vw - 18px) !important;
max-width: calc(100vw - 18px) !important;
max-height: 94dvh !important;
}
html body.cx-design-system
:is(.report-subscribe-modern, .cx-dialog--report-subscribe, .report-subscribe-dialog)
.mud-dialog-actions {
flex-wrap: wrap !important;
}
html body.cx-design-system
:is(.report-subscribe-modern, .cx-dialog--report-subscribe, .report-subscribe-dialog)
:is(.report-subscribe-button, .cx-dialog-action, .mud-button-root) {
flex: 1 1 180px !important;
}
}
/* 6) Blocked-call dropdown: same compact density as normal row actions. */
html body.cx-design-system .cx-blocked-call-page
:is(.device-list-action-menu, .conexgo-row-action-menu),
html body.cx-design-system .cx-blocked-call-page
:is(.device-list-action-menu, .conexgo-row-action-menu).show {
width: min(230px, calc(100vw - 28px)) !important;
min-width: min(230px, calc(100vw - 28px)) !important;
max-width: calc(100vw - 28px) !important;
}
/* Header notifications: slightly larger, calmer density, better empty state. */
html body.cx-design-system .conexgo-notification-dropdown {
width: min(570px, calc(100vw - 30px)) !important;
min-width: 520px !important;
max-width: 570px !important;
border: 1px solid #cfdeea !important;
border-radius: 14px !important;
overflow: hidden !important;
box-shadow: 0 18px 48px rgba(34, 63, 87, .20) !important;
}
html body.cx-design-system .conexgo-notification-dropdown-header {
min-height: 78px !important;
padding: 15px 18px !important;
}
html body.cx-design-system .conexgo-notification-header-main {
gap: 12px !important;
}
html body.cx-design-system .conexgo-notification-header-icon {
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
border-radius: 11px !important;
}
html body.cx-design-system .conexgo-notification-header-title {
font-size: 14px !important;
line-height: 1.25 !important;
font-weight: 800 !important;
}
html body.cx-design-system .conexgo-notification-header-meta {
margin-top: 3px !important;
font-size: 12px !important;
line-height: 1.35 !important;
}
html body.cx-design-system .conexgo-notification-list {
max-height: 430px !important;
}
html body.cx-design-system .conexgo-notification-empty {
min-height: 190px !important;
padding: 28px 18px !important;
gap: 12px !important;
font-size: 13px !important;
}
html body.cx-design-system .conexgo-notification-empty-icon {
width: 48px !important;
height: 48px !important;
border-radius: 50% !important;
font-size: 18px !important;
}
html body.cx-design-system .conexgo-notification-item {
min-height: 72px !important;
padding: 13px 17px !important;
gap: 12px !important;
}
html body.cx-design-system .conexgo-notification-item-icon {
width: 40px !important;
min-width: 40px !important;
height: 40px !important;
}
html body.cx-design-system .conexgo-notification-see-all-wrap {
padding: 0 !important;
}
html body.cx-design-system .conexgo-notification-see-all {
min-height: 50px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #fbfcfd !important;
color: #2c4c6c !important;
font-size: 12.5px !important;
font-weight: 800 !important;
transform: none !important;
transition:
background-color .38s cubic-bezier(.22, 1, .36, 1),
color .32s ease,
box-shadow .38s cubic-bezier(.22, 1, .36, 1) !important;
}
html body.cx-design-system .conexgo-notification-see-all:is(:hover, :focus-visible) {
background: #f1f6fa !important;
color: #2c4c6c !important;
box-shadow: none !important;
transform: none !important;
}
@media (max-width: 620px) {
html body.cx-design-system .conexgo-notification-dropdown {
width: calc(100vw - 18px) !important;
min-width: 0 !important;
max-width: calc(100vw - 18px) !important;
}
}
/* --------------------------------------------------------------------------
Settings / Application family
-------------------------------------------------------------------------- */
html body.cx-design-system .cx-settings-page-card {
border: 1px solid #d8e4ed !important;
border-radius: 14px !important;
background: #ffffff !important;
box-shadow: 0 8px 24px rgba(42, 73, 98, .055) !important;
overflow: visible !important;
}
html body.cx-design-system .cx-settings-page-card > .card-body,
html body.cx-design-system .cx-settings-page-card .card-body {
padding: 22px 24px !important;
}
/* Language is a compact control card, not a lonely label/select. */
html body.cx-design-system .cx-settings-page-card .dataTables_length {
width: fit-content !important;
min-width: 360px !important;
max-width: 100% !important;
margin: 0 0 18px !important;
padding: 10px 12px !important;
border: 1px solid #d7e4ee !important;
border-radius: 12px !important;
background: #f7fafc !important;
box-shadow: inset 3px 0 0 #4b789a !important;
}
html body.cx-design-system .cx-settings-page-card .dataTables_length > label {
margin: 0 !important;
display: grid !important;
grid-template-columns: auto minmax(210px, 270px) !important;
align-items: center !important;
gap: 12px !important;
color: #506a80 !important;
font-size: 12px !important;
font-weight: 800 !important;
line-height: 1.25 !important;
}
html body.cx-design-system .cx-settings-page-card .dataTables_length select,
html body.cx-design-system .cx-settings-page-card .dataTables_length .cx-custom-select-root {
width: 100% !important;
min-width: 210px !important;
margin: 0 !important;
}
/* Settings tabs: remove the old gray strip / cramped tabs. */
html body.cx-design-system .cx-settings-page-alert .panel,
html body.cx-design-system .cx-settings-page-alert .tab-menu-heading,
html body.cx-design-system .cx-settings-page-alert .panel-body {
border: 0 !important;
box-shadow: none !important;
}
html body.cx-design-system .cx-settings-page-alert .tab-menu-heading {
margin: 0 0 18px !important;
padding: 8px !important;
border: 1px solid #d8e5ee !important;
border-radius: 13px !important;
background: #f7fafc !important;
overflow-x: auto !important;
scrollbar-width: thin !important;
}
html body.cx-design-system .cx-settings-page-alert .panel-tabs,
html body.cx-design-system .cx-settings-page-alert ul.panel-tabs {
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px !important;
border: 0 !important;
}
html body.cx-design-system .cx-settings-page-alert .panel-tabs > li {
margin: 0 !important;
border: 0 !important;
}
html body.cx-design-system .cx-settings-page-alert .panel-tabs > li > a {
min-height: 42px !important;
padding: 0 13px !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
border: 1px solid transparent !important;
border-radius: 9px !important;
background: transparent !important;
color: #2f506c !important;
font-size: 12.5px !important;
font-weight: 800 !important;
line-height: 1 !important;
white-space: nowrap !important;
transition:
background-color 140ms ease,
border-color 140ms ease,
color 140ms ease,
box-shadow 140ms ease !important;
}
html body.cx-design-system .cx-settings-page-alert .panel-tabs > li > a:hover {
border-color: #c9dce9 !important;
background: #edf5fa !important;
color: #244863 !important;
}
html body.cx-design-system .cx-settings-page-alert
.panel-tabs > li:is(.active, [aria-selected="true"]) > a,
html body.cx-design-system .cx-settings-page-alert
.panel-tabs > li > a:is(.active, [aria-selected="true"]) {
border-color: #315f82 !important;
background: #315f82 !important;
color: #ffffff !important;
box-shadow: 0 5px 12px rgba(49, 95, 130, .18) !important;
}
html body.cx-design-system .cx-settings-page-alert .panel-tabs img {
width: 22px !important;
height: 22px !important;
object-fit: contain !important;
}
/* Alert setting content: stronger hierarchy, smaller useless gaps. */
html body.cx-design-system .cx-settings-page-alert .tab-content {
padding: 2px 0 0 !important;
}
html body.cx-design-system .cx-settings-page-alert .tab-pane {
padding: 2px 0 8px !important;
}
html body.cx-design-system .cx-settings-page-alert .form-horizontal > .row,
html body.cx-design-system .cx-settings-page-alert .tab-pane > .row {
margin-left: 0 !important;
margin-right: 0 !important;
}
html body.cx-design-system .cx-settings-page-alert
.form-horizontal > .row.mb-4:not(.cx-settings-parameter-row) {
margin-bottom: 12px !important;
padding: 10px 12px !important;
align-items: flex-start !important;
border: 1px solid #e1e9f0 !important;
border-radius: 10px !important;
background: #ffffff !important;
}
html body.cx-design-system .cx-settings-page-alert .form-label,
html body.cx-design-system .cx-settings-page-alert .col-md-3.form-label {
padding-top: 11px !important;
color: #31536f !important;
font-size: 12px !important;
font-weight: 800 !important;
line-height: 1.35 !important;
}
html body.cx-design-system .cx-settings-page-alert
:is(input.form-control, textarea.form-control) {
border-color: #cfdee9 !important;
border-radius: 10px !important;
background: #fbfdff !important;
color: #1f3447 !important;
box-shadow: none !important;
}
html body.cx-design-system .cx-settings-page-alert
:is(input.form-control, textarea.form-control):focus {
border-color: #6f9dbd !important;
background: #ffffff !important;
box-shadow: 0 0 0 3px rgba(67, 116, 151, .10) !important;
}
/* Available Parameters becomes a clear technical reference panel. */
html body.cx-design-system .cx-settings-page-alert .cx-settings-parameter-row {
margin: 4px 0 16px !important;
padding: 14px 16px !important;
align-items: flex-start !important;
border: 1px solid #cfe0eb !important;
border-left: 4px solid #4b789a !important;
border-radius: 11px !important;
background: #f6fafc !important;
color: #334f65 !important;
}
html body.cx-design-system .cx-settings-page-alert
.cx-settings-parameter-row .form-label {
padding-top: 2px !important;
text-align: left !important;
color: #315f82 !important;
font-size: 12px !important;
font-weight: 850 !important;
}
html body.cx-design-system .cx-settings-page-alert
.cx-settings-format-example {
width: fit-content !important;
margin: 0 0 9px !important;
padding: 5px 8px !important;
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
border: 1px solid #c7dbe8 !important;
border-radius: 8px !important;
background: #ffffff !important;
color: #315f82 !important;
font-family: inherit !important;
font-size: 11px !important;
font-weight: 800 !important;
}
html body.cx-design-system .cx-settings-page-alert
.cx-settings-format-example code {
padding: 2px 5px !important;
border-radius: 5px !important;
background: #edf5fa !important;
color: #244e6d !important;
font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace !important;
font-size: 11px !important;
}
html body.cx-design-system .cx-settings-page-alert
.cx-settings-parameter-row > :last-child {
color: #405b70 !important;
font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace !important;
font-size: 11.5px !important;
line-height: 1.65 !important;
overflow-wrap: anywhere !important;
}
/* General settings: compact functional block instead of an enormous empty card. */
html body.cx-design-system .cx-settings-page-general {
min-height: 0 !important;
}
html body.cx-design-system .cx-settings-page-general .card-body {
min-height: 0 !important;
padding: 20px 24px !important;
}
html body.cx-design-system .cx-settings-page-general .form-horizontal,
html body.cx-design-system .cx-settings-page-general form {
width: min(100%, 980px) !important;
margin: 0 auto !important;
}
html body.cx-design-system .cx-settings-page-general .row {
margin-left: 0 !important;
margin-right: 0 !important;
}
html body.cx-design-system .cx-settings-page-general
.form-horizontal > .row:not(.justify-content-end),
html body.cx-design-system .cx-settings-page-general
form > .row:not(.justify-content-end) {
margin-bottom: 10px !important;
padding: 10px 12px !important;
align-items: center !important;
border-bottom: 1px solid #e6edf3 !important;
}
html body.cx-design-system .cx-settings-page-general .form-label {
color: #31536f !important;
font-size: 12px !important;
font-weight: 800 !important;
}
html body.cx-design-system .cx-settings-page-general
:is(input.form-control, select.form-select) {
min-height: 46px !important;
border-color: #cedee9 !important;
border-radius: 10px !important;
background: #fbfdff !important;
}
html body.cx-design-system .cx-settings-page-general
.row.justify-content-end {
margin-top: 14px !important;
margin-bottom: 0 !important;
}
/* Legal: styled rendered document, not raw legacy-looking text. */
html body.cx-design-system .cx-settings-page-legal .nav,
html body.cx-design-system .cx-settings-page-legal .nav-tabs {
margin: 0 0 18px !important;
padding: 7px !important;
display: flex !important;
gap: 6px !important;
border: 1px solid #d8e5ee !important;
border-radius: 12px !important;
background: #f7fafc !important;
}
html body.cx-design-system .cx-settings-page-legal
:is(.nav-link, .nav-tabs .nav-link) {
min-height: 40px !important;
padding: 0 16px !important;
display: inline-flex !important;
align-items: center !important;
border: 1px solid transparent !important;
border-radius: 9px !important;
background: transparent !important;
color: #31536f !important;
font-size: 12.5px !important;
font-weight: 800 !important;
}
html body.cx-design-system .cx-settings-page-legal
:is(.nav-link, .nav-tabs .nav-link).active {
border-color: #315f82 !important;
background: #315f82 !important;
color: #ffffff !important;
box-shadow: 0 4px 10px rgba(49, 95, 130, .16) !important;
}
html body.cx-design-system .cx-settings-page-legal
:is(h1, h2, h3, h4) {
margin: 20px 0 9px !important;
color: #274b67 !important;
font-weight: 850 !important;
line-height: 1.3 !important;
}
html body.cx-design-system .cx-settings-page-legal h1 {
font-size: 19px !important;
}
html body.cx-design-system .cx-settings-page-legal h2 {
font-size: 16px !important;
}
html body.cx-design-system .cx-settings-page-legal h3,
html body.cx-design-system .cx-settings-page-legal h4 {
font-size: 14px !important;
}
html body.cx-design-system .cx-settings-page-legal
:is(p, li) {
color: #334b60 !important;
font-size: 13px !important;
line-height: 1.65 !important;
}
html body.cx-design-system .cx-settings-page-legal p {
margin: 0 0 11px !important;
}
html body.cx-design-system .cx-settings-page-legal
:is(ul, ol) {
margin: 0 0 14px !important;
padding-left: 22px !important;
}
html body.cx-design-system .cx-settings-page-legal a {
color: #2e6591 !important;
font-weight: 750 !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 2px !important;
}
/* API / Template share the same modern control density. */
html body.cx-design-system
:is(.cx-settings-page-api, .cx-settings-page-template)
.form-horizontal > .row.mb-4 {
margin-bottom: 12px !important;
padding: 10px 12px !important;
border-bottom: 1px solid #e6edf3 !important;
}
html body.cx-design-system
:is(.cx-settings-page-api, .cx-settings-page-template)
.form-label {
color: #31536f !important;
font-size: 12px !important;
font-weight: 800 !important;
}
/* --------------------------------------------------------------------------
Alert Answer comment section: fresh neutral surface with warm accent only.
-------------------------------------------------------------------------- */
html body.cx-design-system .cx-dialog--alert-answer
.alert-answer-comment-card {
border: 1px solid #d4e1ea !important;
border-left: 4px solid #d2aa45 !important;
border-radius: 12px !important;
background: #ffffff !important;
box-shadow: 0 5px 16px rgba(38, 72, 98, .07) !important;
overflow: hidden !important;
}
html body.cx-design-system .cx-dialog--alert-answer
.alert-answer-comment-header {
min-height: 54px !important;
padding: 10px 14px !important;
border-bottom: 1px solid #dde7ee !important;
background: #f7fafc !important;
color: #31536f !important;
}
html body.cx-design-system .cx-dialog--alert-answer
.alert-answer-comment-title {
color: #31536f !important;
font-size: 13px !important;
font-weight: 850 !important;
}
html body.cx-design-system .cx-dialog--alert-answer
.alert-answer-comment-history {
min-height: 58px !important;
max-height: 150px !important;
padding: 10px 14px !important;
overflow-y: auto !important;
border-bottom: 1px solid #e2eaf0 !important;
background: #fbfdff !important;
}
html body.cx-design-system .cx-dialog--alert-answer
.alert-answer-comment-empty {
color: #7b8d9d !important;
font-size: 12px !important;
font-style: italic !important;
}
html body.cx-design-system .cx-dialog--alert-answer
.alert-answer-comment-editor {
padding: 12px 14px !important;
background: #ffffff !important;
}
html body.cx-design-system .cx-dialog--alert-answer
.alert-answer-textarea {
min-height: 104px !important;
padding: 12px 13px !important;
border: 1px solid #cbdce7 !important;
border-radius: 10px !important;
background: #fbfdff !important;
color: #263f53 !important;
font-size: 12.5px !important;
line-height: 1.55 !important;
box-shadow: none !important;
}
html body.cx-design-system .cx-dialog--alert-answer
.alert-answer-textarea:focus {
border-color: #6d9bbb !important;
background: #ffffff !important;
box-shadow: 0 0 0 3px rgba(64, 111, 145, .10) !important;
}
/* --------------------------------------------------------------------------
Table separation on the modernized/list/modal surfaces.
No global table rewrite: only actual Conexgo data grids are touched.
-------------------------------------------------------------------------- */
html body.cx-design-system
:is(
.conexgo-pagedlist-table,
.cx-settings-page-card table,
.cx-dialog--alert-answer table,
.cx-dialog--alert-view table,
.cx-dialog--device-model table
)
:is(table) {
border-collapse: separate !important;
border-spacing: 0 !important;
border: 1px solid #d6e2eb !important;
}
html body.cx-design-system
:is(
.conexgo-pagedlist-table,
.cx-settings-page-card table,
.cx-dialog--alert-answer table,
.cx-dialog--alert-view table,
.cx-dialog--device-model table
)
:is(table) :is(th, td) {
border-right: 1px solid #dbe5ed !important;
border-bottom: 1px solid #e1e9ef !important;
vertical-align: middle !important;
}
html body.cx-design-system
:is(
.conexgo-pagedlist-table,
.cx-settings-page-card table,
.cx-dialog--alert-answer table,
.cx-dialog--alert-view table,
.cx-dialog--device-model table
)
:is(table) tr > :last-child {
border-right: 0 !important;
}
html body.cx-design-system
:is(
.conexgo-pagedlist-table,
.cx-settings-page-card table,
.cx-dialog--alert-answer table,
.cx-dialog--alert-view table,
.cx-dialog--device-model table
)
:is(table) tbody tr:last-child > * {
border-bottom: 0 !important;
}
/* Fresh disabled state: still obviously disabled without muddy dark gray. */
html body.cx-design-system
:is(
.cx-settings-page-card,
.cx-dialog-v17,
.cx-standard-form-dialog
)
:is(input, select, textarea, button):disabled,
html body.cx-design-system
:is(
.cx-settings-page-card,
.cx-dialog-v17,
.cx-standard-form-dialog
)
.disabled {
opacity: .72 !important;
}
html body.cx-design-system
:is(.cx-settings-page-card, .cx-dialog-v17)
:is(input, select, textarea):disabled {
border-color: #dae4eb !important;
background: #f1f5f8 !important;
color: #718393 !important;
}
html body.cx-design-system .cx-settings-page-legal textarea {
width: 100% !important;
min-height: 280px !important;
height: auto !important;
padding: 14px 16px !important;
border: 1px solid #cbdce7 !important;
border-radius: 10px !important;
background: #fbfdff !important;
color: #263f53 !important;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
font-size: 12.5px !important;
font-weight: 500 !important;
line-height: 1.58 !important;
resize: vertical !important;
white-space: pre-wrap !important;
overflow-wrap: anywhere !important;
box-shadow: inset 0 1px 2px rgba(42, 73, 98, .04) !important;
}
html body.cx-design-system .cx-settings-page-legal textarea:hover {
border-color: #afc8d9 !important;
background: #ffffff !important;
}
html body.cx-design-system .cx-settings-page-legal textarea:focus {
outline: none !important;
border-color: #4f7da1 !important;
background: #ffffff !important;
box-shadow: 0 0 0 3px rgba(79, 125, 161, .12) !important;
}
.cx-blocked-call-add-button {
background: #3e6a99;
border-color: #3e6a99;
color: #fff;
}
.cx-blocked-call-toolbar {
background-color: #2c4c6c;
}
.cx-blocked-call-search-slot {
margin-top: 8px;
text-align: right;
}
.cx-blocked-call-table-head-row {
background: #eafaf1;
}
.cx-blocked-call-action-menu {
inset-inline-end: 0;
inset-inline-start: auto;
}
.cx-blocked-call-status-cell {
width: 112px;
min-width: 112px;
max-width: 112px;
text-align: center;
}
.cx-blocked-call-status-pill {
width: 100px;
margin: 0 auto;
padding: 4px 6px;
font-size: 12px;
font-weight: 700;
line-height: 1.15;
text-align: center;
}
.cx-blocked-call-status-pill.is-blocked {
background: #f5d7db;
color: #8b3440;
}
.cx-blocked-call-status-pill.is-inactive {
background: #e7edf3;
color: #53677a;
}
.cx-alert-theme-danger { --alert-color: #dc3545; }
.cx-alert-theme-warning { --alert-color: #ffc107; }
.cx-alert-theme-success { --alert-color: #198754; }
.cx-alert-theme-primary { --alert-color: #0d6efd; }
.cx-alert-theme-orange { --alert-color: #fd7e14; }
.cx-alert-theme-purple { --alert-color: #6f42c1; }
.cx-alert-theme-cyan { --alert-color: #0dcaf0; }
.cx-alert-theme-dark { --alert-color: #212529; }
.cx-alert-theme-neutral { --alert-color: #6c757d; }
.alert-view-empty-icon {
display: block;
margin-bottom: 8px;
color: #b8505b;
font-size: 20pt;
}
.alert-answer-map-canvas--fixed {
width: 100%;
height: 320px;
min-height: 320px;
}
.cx-alert-list-actions-cell {
vertical-align: middle;
white-space: nowrap;
}
.cx-alert-list-actions {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
}
.cx-alert-list-action {
display: inline-flex;
align-items: center;
justify-content: center;
}
.cx-alert-list-action--view {
background: #3e6a99;
border-color: #3e6a99;
color: #fff;
}
.cx-alert-list-action--answer {
background: #78b842;
border-color: #78b842;
color: #fff;
}
.cx-alert-list-comment-copy {
font-size: small;
}
.cx-alert-comment-author,
.cx-alert-comment-date {
font-size: 8pt;
font-style: italic;
}
.cx-alert-comment-author { font-weight: 700; }
.cx-alert-comment-date { font-weight: 400; }
.cx-alert-comment-empty { font-style: italic; }
.cx-setting-label { text-align: right; }
.cx-setting-label-left { text-align: left; }
.cx-setting-validation-icon {
margin-left: 5px;
color: #b4232d;
}
.cx-setting-save-button {
background: #3d6287;
border-color: #3d6287;
color: #fff;
}
.cx-setting-legal-editor {
width: 100%;
height: 250px;
padding: 10px;
}
.cx-document-view-loading {
min-height: 180px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 12px;
}
.cx-document-view-loading-copy {
color: #6c757d;
font-size: 12.5px;
}
.device-config-sections-row { margin-bottom: 2rem; }
.device-config-section-header { border-radius: 8px; }
.device-config-section-header.is-expanded { border-radius: 8px 8px 0 0; }
.device-config-section-content {
border: 1px solid #dee2e6;
border-top: 0;
border-radius: 0 0 8px 8px;
background: #fff;
}
.device-config-pending-icon { color: #e58b00; }
.device-config-geofence-stack-item { min-height: 50px; }
.device-config-geofence-separator { background: #dee2e6; }
.cx-generated-status-icon.is-enabled { color: #198754; }
.cx-generated-status-icon.is-disabled { color: #b8505b; }
.cx-generated-dots-row { padding-bottom: 10px; }
.cx-generated-dots-label { font-weight: 700; }
.cx-generated-beacon-icon { width: 30px; }
.cx-generated-phone-event-icon { margin-left: 5px; }
.cx-generated-phone-event-icon.is-active { color: #198754; }
.cx-generated-phone-event-icon.is-inactive { color: #6c757d; }
@media (max-width: 767.98px) {
.cx-setting-label { text-align: left; }
}
.cx-setting-label-right {
text-align: right;
}
.cx-settings-alert-event-card {
border: 1px solid #d8e3eb;
border-radius: 8px;
overflow: hidden;
}
.cx-settings-alert-event-title {
margin-top: 0;
padding: 8px 10px;
text-align: center;
background: #eef3f7;
color: #294c68;
font-weight: 700;
}
.cx-report-toolbar-align,
.cx-log-search-align {
text-align: right !important;
}
.cx-log-search-align {
margin-top: 8px;
}
.cx-table-action-cell {
text-align: center;
}
.cx-report-schedule-value {
max-width: 260px;
color: #2c4c6c;
font-size: 9.3pt;
font-weight: 650;
line-height: 1.4;
}
.cx-usage-log-full-width {
width: 100%;
}
.cx-device-page-primary-action {
background: #3e6a99;
border-color: #3e6a99;
color: #fff;
}
.cx-device-list-toolbar {
background: #2c4c6c;
}
.cx-device-list-toolbar-actions,
.cx-device-list-search-align {
text-align: right !important;
}
.cx-device-list-toolbar-actions {
color: #fff;
}
.cx-device-list-search-align {
margin-top: 8px;
}
.cx-row-menu-icon {
margin-right: 5px;
}
.cx-device-firmware-meta {
padding-left: 10px;
font-size: 8pt;
}
.cx-device-status-cell-fixed {
width: 112px;
min-width: 112px;
max-width: 112px;
text-align: center;
}
.cx-device-status-pill-desktop {
width: 100px;
margin: 0 auto 6px;
padding: 4px 6px;
text-align: center;
font-size: 12px;
font-weight: 700;
line-height: 1.15;
}
.cx-device-status-icons-desktop {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
gap: 6px;
}
.cx-device-status-icon-desktop {
font-size: 14pt;
}
.cx-device-battery-stack-desktop {
width: 18px;
height: 18px;
font-size: 14pt;
line-height: 18px;
vertical-align: middle;
}
.cx-device-battery-bolt {
font-size: 6pt;
}
.cx-device-battery-bolt.is-light { color: #fff; }
.cx-device-battery-bolt.is-dark { color: #000; }
.cx-device-status-state--inactive { background: #d2d7dc; color: #17324d; }
.cx-device-status-state--inventory { background: #ffe36e; color: #5f4700; }
.cx-device-status-state--alert { background: #f08080; color: #17324d; }
.cx-device-status-state--active { background: #90ee90; color: #17324d; }
.cx-device-status-state--info { background: #add8e6; color: #17324d; }
.cx-device-status-state--special { background: #ffb6c1; color: #17324d; }
.cx-device-status-state--unknown { background: #d3d3d3; color: #17324d; }
.cx-device-connectivity--active { color: #f2b705; }
.cx-device-connectivity--inactive { color: #c7cdd4; }
.cx-device-gps--active { color: #2f6fed; }
.cx-device-gps--inactive { color: #c7cdd4; }
.cx-device-satellite--active { color: #7a5cb8; }
.cx-device-satellite--inactive { color: #c7cdd4; }
html body.cx-design-system .cx-dialog--device-model .cx-devicemodel-layout {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
html body.cx-design-system .cx-dialog--device-model .cx-devicemodel-form {
display: flex !important;
flex-direction: column !important;
gap: 18px !important;
width: 100% !important;
}
html body.cx-design-system .cx-dialog--device-model
:is(.cx-device-model-form-section, .cx-device-model-alert-section) {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
}
html body.cx-design-system .cx-dialog--device-model .cx-devicemodel-fields {
width: 100% !important;
max-width: 1040px !important;
margin: 0 auto !important;
padding: 0 !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-fields > .cx-r1-form-row {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 0 10px !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: minmax(190px, 225px) minmax(0, 1fr) !important;
column-gap: 18px !important;
row-gap: 6px !important;
justify-content: stretch !important;
align-items: start !important;
border: 0 !important;
background: transparent !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-fields > .cx-r1-form-row:last-child {
margin-bottom: 0 !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-fields > .cx-r1-form-row > [class*="col-"] {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-fields > .cx-r1-form-row > .form-label:first-child {
grid-column: 1 !important;
align-self: start !important;
padding-top: 11px !important;
padding-right: 0 !important;
padding-left: 0 !important;
text-align: right !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-fields > .cx-r1-form-row > .form-label:first-child > label {
display: inline-block !important;
margin: 0 !important;
text-align: right !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-fields > .cx-r1-form-row > [class*="col-"]:not(.form-label:first-child) {
grid-column: 2 !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-fields .form-control {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
min-height: 42px !important;
margin: 0 !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-device-model-form-section .cx-device-config-section-description {
margin-bottom: 14px !important;
}
html body.cx-design-system .cx-dialog--device-model .cx-device-model-alert-section {
padding-bottom: 18px !important;
}
html body.cx-design-system .cx-dialog--device-model .cx-devicemodel-alert-table-shell {
width: 100% !important;
min-width: 0 !important;
overflow-x: auto !important;
border: 1px solid #cfdee8 !important;
border-radius: 10px !important;
background: #ffffff !important;
box-shadow: none !important;
}
html body.cx-design-system .cx-dialog--device-model .cx-devicemodel-alert-table {
width: 100% !important;
min-width: 650px !important;
table-layout: fixed !important;
border: 0 !important;
border-collapse: separate !important;
border-spacing: 0 !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-alert-table .cx-devicemodel-alert-col-answerable {
width: 17% !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-alert-table .cx-devicemodel-alert-col-name {
width: 66% !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-alert-table .cx-devicemodel-alert-col-default {
width: 17% !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-alert-table :is(th, td) {
min-width: 0 !important;
height: 52px !important;
padding: 10px 16px !important;
vertical-align: middle !important;
border-right: 1px solid #dbe5ed !important;
border-bottom: 1px solid #e1e9ef !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-alert-table :is(th, td):last-child {
border-right: 0 !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-alert-table tbody tr:last-child > td {
border-bottom: 0 !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-alert-table thead th {
height: 56px !important;
background: #edf7f3 !important;
color: #294f6d !important;
font-size: 12px !important;
font-weight: 850 !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-alert-table :is(th, td):first-child,
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-alert-table .cx-devicemodel-alert-default-column {
text-align: center !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-alert-table :is(th, td):nth-child(2) {
padding-left: 24px !important;
padding-right: 24px !important;
text-align: left !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-alert-table tbody tr {
background: #ffffff !important;
transition: background-color 120ms ease !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-alert-table tbody tr:hover {
background: #f8fbfd !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-alert-table tbody tr.is-selected {
background: #f4f8fb !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-alert-table .cx-devicemodel-alert-name {
display: block !important;
color: #263f58 !important;
font-size: 13px !important;
font-weight: 750 !important;
line-height: 1.35 !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-alert-table :is(input[type="checkbox"], input[type="radio"]) {
width: 20px !important;
height: 20px !important;
margin: 0 auto !important;
display: block !important;
}
@media (max-width: 767.98px) {
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-fields > .cx-r1-form-row {
grid-template-columns: minmax(0, 1fr) !important;
row-gap: 6px !important;
margin-bottom: 12px !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-fields > .cx-r1-form-row > .form-label:first-child {
grid-column: 1 !important;
padding-top: 0 !important;
text-align: left !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-fields > .cx-r1-form-row > .form-label:first-child > label {
text-align: left !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-fields > .cx-r1-form-row > [class*="col-"]:not(.form-label:first-child) {
grid-column: 1 !important;
}
html body.cx-design-system .cx-dialog--device-model .cx-devicemodel-alert-table {
min-width: 620px !important;
}
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-alert-table thead th
.cx-table-column-header__layout {
min-height: 44px !important;
gap: 18px !important;
align-items: center !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-alert-table thead th
.cx-table-column-header__icon {
margin: 0 !important;
flex-shrink: 0 !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-alert-table thead th
.cx-table-column-header__copy {
min-width: 0 !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-alert-table thead th
.cx-table-column-header__label {
line-height: 1.15 !important;
white-space: nowrap !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-alert-table thead th:first-child
.cx-table-column-header__layout,
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-alert-table thead
.cx-devicemodel-alert-default-column
.cx-table-column-header__layout {
justify-content: center !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-alert-table thead th:nth-child(2)
.cx-table-column-header__layout {
justify-content: flex-start !important;
}
html body.cx-design-system .cx-dialog--device-model
.cx-devicemodel-alert-table :is(th, td) {
vertical-align: middle !important;
}
@media (max-width: 767.98px) {
html body.cx-design-system .cx-group-view-page-header {
width: 100% !important;
min-width: 0 !important;
display: block !important;
margin: 0 0 12px !important;
padding: 8px 0 10px !important;
}
html body.cx-design-system .cx-group-view-page-header .cx-page-header-copy {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
html body.cx-design-system .cx-group-view-page-header .page-title {
width: 100% !important;
margin: 0 0 4px !important;
text-align: left !important;
}
html body.cx-design-system .cx-group-view-page .cx-group-view-mobile-toolbar-row {
display: grid !important;
grid-template-columns: 52px minmax(0, 1fr) !important;
gap: 8px !important;
align-items: stretch !important;
}
html body.cx-design-system .cx-group-view-page .cx-group-view-toolbar-back {
grid-column: 1 !important;
width: 52px !important;
min-width: 52px !important;
max-width: 52px !important;
height: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
margin: 0 !important;
padding: 0 !important;
display: inline-grid !important;
place-items: center !important;
align-self: stretch !important;
border: 1px solid #8493a3 !important;
border-radius: 9px !important;
background: #8493a3 !important;
color: #ffffff !important;
box-shadow: none !important;
}
html body.cx-design-system .cx-group-view-page .cx-group-view-toolbar-back:is(:hover, :focus-visible) {
border-color: #8493a3 !important;
background: #8493a3 !important;
color: #ffffff !important;
}
html body.cx-design-system .cx-group-view-page .cx-group-view-toolbar-back > i {
width: 100% !important;
height: 100% !important;
display: grid !important;
place-items: center !important;
font-size: 1rem !important;
}
html body.cx-design-system .cx-group-view-page .cx-group-view-mobile-toolbar-row .cx-list-search {
grid-column: 2 !important;
min-width: 0 !important;
}
html body.cx-design-system .cx-group-view-page .cx-group-view-mobile-toolbar-row
.conexgo-search-button {
border-color: #8493a3 !important;
background: #8493a3 !important;
color: #ffffff !important;
}
html body.cx-design-system .cx-group-view-page .cx-group-view-mobile-toolbar-row
.conexgo-search-button:is(:hover, :focus-visible) {
border-color: #8493a3 !important;
background: #8493a3 !important;
color: #ffffff !important;
}
/* Long breadcrumbs wrap at natural word boundaries. Historical
overflow-wrap:anywhere rules made long device/group names break letter-by-letter. */
html body.cx-design-system .page-header .breadcrumb {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
row-gap: 3px !important;
column-gap: 0 !important;
overflow: visible !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
html body.cx-design-system .page-header .breadcrumb-item {
min-width: 0 !important;
max-width: 100% !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
html body.cx-design-system .page-header .breadcrumb-item > :is(a, span) {
min-width: 0 !important;
max-width: 100% !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
html body.cx-design-system .page-header .breadcrumb-item + .breadcrumb-item::before {
float: none !important;
flex: 0 0 auto !important;
}
}
@media (max-width: 767.98px) {
html body.cx-design-system .cx-group-view-page
.cx-group-view-list-scroll .conexgo-pagedlist-table
.cx-group-member-row > td:nth-child(1),
html body.cx-design-system .cx-group-view-page
.cx-group-view-list-scroll .conexgo-pagedlist-table
.cx-group-member-row > td:nth-child(2),
html body.cx-design-system .cx-group-view-page
.cx-group-view-list-scroll .conexgo-pagedlist-table
.cx-group-member-row > td:nth-child(3) {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
box-sizing: border-box !important;
}
html body.cx-design-system .cx-group-view-page .cx-group-member-row {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
html body.cx-design-system .cx-group-view-page .cx-group-member-name-value {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
align-items: flex-start !important;
}
html body.cx-design-system .cx-group-view-page .cx-group-member-name-value > span:last-child {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
white-space: normal !important;
overflow: visible !important;
overflow-wrap: break-word !important;
word-break: normal !important;
}
html body.cx-design-system .cx-group-view-page .cx-group-view-status-cell,
html body.cx-design-system .cx-group-view-page .cx-group-member-lastreported-cell,
html body.cx-design-system .cx-group-view-page .cx-group-member-address,
html body.cx-design-system .cx-group-view-page .cx-group-member-lastreported-time {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
}
html body.cx-design-system .cx-group-view-page .cx-group-member-address {
white-space: normal !important;
overflow-wrap: break-word !important;
word-break: normal !important;
}
}
/* Device list: IMEI / phone must remain legible and must not be squeezed. */
html body.cx-design-system .cx-device-identity-cell {
width: 190px !important;
min-width: 170px !important;
max-width: 220px !important;
}
html body.cx-design-system .cx-device-identity-stack {
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
min-width: 0 !important;
color: #344054 !important;
font-size: 13.5px !important;
line-height: 1.35 !important;
font-weight: 500 !important;
}
html body.cx-design-system .cx-device-identity-stack > span {
display: block !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
}
/* Unit action dropdown: absolutely no geometry/typography movement on hover.
The only visual response is the small blue background requested in QA. */
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu),
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu).show {
transform: none !important;
translate: none !important;
scale: 1 !important;
animation: none !important;
transition: none !important;
will-change: auto !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:is(:hover, :focus, :focus-visible, :active) {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
min-height: 40px !important;
margin: 0 !important;
padding: 8px 10px !important;
gap: 9px !important;
column-gap: 9px !important;
border-radius: 6px !important;
font-size: 13.5px !important;
font-weight: 650 !important;
line-height: 1.2 !important;
text-indent: 0 !important;
transform: none !important;
translate: none !important;
scale: 1 !important;
animation: none !important;
transition: none !important;
box-shadow: none !important;
outline-offset: 0 !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:is(:hover, :focus, :focus-visible, :active) * {
transform: none !important;
translate: none !important;
scale: 1 !important;
animation: none !important;
transition: none !important;
}
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu) .dropdown-item > :is(i, span[class*="fa"], svg),
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu) .dropdown-item:is(:hover, :focus, :focus-visible, :active) > :is(i, span[class*="fa"], svg) {
flex: 0 0 18px !important;
width: 18px !important;
min-width: 18px !important;
max-width: 18px !important;
margin: 0 !important;
padding: 0 !important;
font-size: 13px !important;
text-align: center !important;
}
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu) .dropdown-item:is(:hover, :focus-visible) {
background: #edf5fb !important;
color: #284f70 !important;
border-color: transparent !important;
}
/* Header alert workflow status: compact, static and immediately readable. */
html body.cx-design-system .conexgo-alert-card-title-row {
display: flex !important;
align-items: center !important;
gap: 7px !important;
min-width: 0 !important;
}
html body.cx-design-system .conexgo-alert-card-title-row .conexgo-alert-card-title {
min-width: 0 !important;
flex: 1 1 auto !important;
}
html body.cx-design-system .cx-alert-workflow-status {
width: 22px !important;
height: 22px !important;
flex: 0 0 22px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid transparent !important;
border-radius: 999px !important;
box-shadow: none !important;
transform: none !important;
animation: none !important;
}
html body.cx-design-system .cx-alert-workflow-status > i {
width: 14px !important;
min-width: 14px !important;
text-align: center !important;
font-size: 11px !important;
transform: none !important;
animation: none !important;
}
html body.cx-design-system .cx-alert-workflow-status--pending {
background: #fff5df !important;
border-color: #f1d08c !important;
color: #996515 !important;
}
html body.cx-design-system .cx-alert-workflow-status--in-progress {
background: #eaf3fb !important;
border-color: #b8d4e8 !important;
color: #2f6288 !important;
}
html body.cx-design-system .cx-alert-workflow-status--done {
background: #eaf6ed !important;
border-color: #b8d9c0 !important;
color: #327545 !important;
}
/* Modern global export/download feedback. */
.cx-global-download-status {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 2147482000;
width: min(360px, calc(100vw - 32px));
display: flex;
align-items: center;
gap: 12px;
padding: 13px 14px;
border: 1px solid #cbdce9;
border-radius: 12px;
background: #ffffff;
color: #294a66;
box-shadow: 0 14px 35px rgba(33, 66, 92, .18);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
pointer-events: none;
transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.cx-global-download-status.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.cx-global-download-status__icon {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 10px;
background: #eaf3fa;
color: #315f84;
font-size: 16px;
}
.cx-global-download-status__copy {
min-width: 0;
flex: 1;
display: flex;
flex-direction: column;
gap: 3px;
}
.cx-global-download-status__copy strong {
font-size: 13.5px;
line-height: 1.25;
color: #294a66;
}
.cx-global-download-status__copy small {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 11.5px;
color: #6d8193;
}
.cx-global-download-status__bar {
height: 3px;
margin-top: 4px;
overflow: hidden;
border-radius: 999px;
background: #e6eef4;
}
.cx-global-download-status__bar > span {
display: block;
width: 45%;
height: 100%;
border-radius: inherit;
background: #4d7fa5;
animation: cx-r1883-download-progress 1.25s ease-in-out infinite alternate;
}
.cx-global-download-status.is-ready .cx-global-download-status__icon {
background: #e8f4ec;
color: #3f7655;
}
.cx-global-download-status.is-ready .cx-global-download-status__bar > span {
width: 100%;
animation: none;
background: #5d8a6b;
}
.cx-global-download-status.is-error .cx-global-download-status__icon {
background: #fbebec;
color: #a8474d;
}
.cx-global-download-status.is-error .cx-global-download-status__bar > span {
width: 100%;
animation: none;
background: #b85a60;
}
@keyframes cx-r1883-download-progress {
from { transform: translateX(-20%); }
to { transform: translateX(130%); }
}
/* Emergency-contact review: make automatic language selection explicit. */
.cx-emergency-language-notice {
display: flex;
align-items: flex-start;
gap: 9px;
margin: 0 0 12px;
padding: 10px 12px;
border: 1px solid #d3e1ec;
border-radius: 9px;
background: #f5f9fc;
color: #44647f;
font-size: 12.5px;
line-height: 1.45;
}
.cx-emergency-language-notice i {
margin-top: 2px;
color: #3e739b;
}
/* Location, Data, SMS and Voice logs use the same device context component. */
.cx-log-list-card--location .cx-r1878-log-device-context {
margin: 12px 14px 0;
}
/* Non-blocking modern activity state for shared list operations. */
.cx-r1883-inline-activity {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 34px;
padding: 6px 10px;
border: 1px solid #cfdeea;
border-radius: 8px;
background: #f7fafc;
color: #42647f;
font-size: 12px;
font-weight: 650;
}
@media (max-width: 768px) {
.cx-global-download-status {
right: 16px;
bottom: 16px;
}
}
@media (prefers-reduced-motion: reduce) {
.cx-global-download-status,
.cx-global-download-status__bar > span {
animation: none !important;
transition: none !important;
}
}
/* Shared list/search loading states: calm icon + linear progress, no rotating glyph. */
.cx-r1883-wait-icon {
width: 58px;
height: 58px;
margin: 0 auto 14px;
display: block;
box-sizing: border-box;
border: 6px solid #dbe8f1;
border-top-color: #315a7c;
border-left-color: #315a7c;
border-radius: 14px;
background: #eef5fa;
box-shadow: 0 5px 14px rgba(44, 76, 108, .08);
animation: cx-conexgo-card-loader-spin .92s cubic-bezier(.45, 0, .55, 1) infinite;
}
.cx-r1883-wait-icon i { display: none !important; }
.table-wait-indicator .cx-r1883-wait-bar { display: none !important; }
@keyframes cx-conexgo-card-loader-spin { to { transform: rotate(360deg); } }
.cx-r1883-wait-bar {
width: min(240px, 80%);
height: 3px;
margin: 10px auto 0;
overflow: hidden;
border-radius: 999px;
background: #e2ebf2;
}
.cx-r1883-wait-bar > span {
display: block;
width: 42%;
height: 100%;
border-radius: inherit;
background: #4f7fa3;
animation: cx-r1883-download-progress 1.2s ease-in-out infinite alternate;
}
.cx-r1883-searching-icon {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
}
.cx-r1883-searching-icon i { animation: none !important; transform: none !important; }
.cx-review-log-status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 700;
white-space: nowrap;
}
.cx-review-log-status.is-success { background:#e8f4ec; color:#3f7655; }
.cx-review-log-status.is-error { background:#fbeaec; color:#a3474f; }
.cx-review-log-status.is-warning { background:#fbf3df; color:#8a6620; }
.cx-r1883-empty-log {
display:flex; align-items:center; justify-content:center; gap:9px;
padding:28px 16px; color:#6c8192; font-size:13px;
}
/* Alert document first-save/upload guidance. */
.cx-document-upload-hint {
display: inline-flex;
align-items: flex-start;
gap: 8px;
width: 100%;
padding: 9px 11px;
border: 1px solid #d7e5ef;
border-radius: 8px;
background: #f5f9fc;
color: #48687e;
font-size: 12.5px;
line-height: 1.45;
}
.cx-document-upload-hint i {
margin-top: 2px;
color: #3f7398;
flex: 0 0 auto;
}
/* Device dropdown: hover changes ONLY the background. No text/icon growth,
weight shift, movement, pseudo-layer or color jump. */
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:is(:hover, :focus, :focus-visible, :active) {
color: #294f6d !important;
font-family: inherit !important;
font-size: 13.5px !important;
font-weight: 650 !important;
line-height: 1.2 !important;
letter-spacing: normal !important;
text-shadow: none !important;
transform: none !important;
translate: none !important;
scale: 1 !important;
transition: none !important;
animation: none !important;
}
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu) .dropdown-item {
background: transparent !important;
}
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu) .dropdown-item:is(:hover, :focus-visible) {
background: #edf5fb !important;
color: #294f6d !important;
}
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu) .dropdown-item::before,
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu) .dropdown-item::after {
content: none !important;
display: none !important;
}
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu) .dropdown-item > :is(i, span[class*="fa"], svg),
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu) .dropdown-item:is(:hover, :focus, :focus-visible, :active) > :is(i, span[class*="fa"], svg) {
color: #668299 !important;
font-size: 13px !important;
transform: none !important;
translate: none !important;
scale: 1 !important;
filter: none !important;
}
/* Header alert queue: workflow state and language belong to the same compact
top-right row so Pending/In progress is visually aligned, not floating in
the title copy column. */
html body.cx-design-system .conexgo-alert-classic-side {
align-items: flex-end !important;
}
html body.cx-design-system .conexgo-alert-classic-side-top {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 8px !important;
min-height: 24px !important;
white-space: nowrap !important;
}
html body.cx-design-system .conexgo-alert-classic-side-top .cx-alert-workflow-status,
html body.cx-design-system .conexgo-alert-classic-side-top .conexgo-alert-classic-language {
margin: 0 !important;
align-self: center !important;
}
/* #532 — ensure status content in Group View / Modify Group is never dimmed
by table/theme rules. Inline colors remain the same source of truth as the
Unit List; these rules only guarantee visibility and stable geometry. */
html body.cx-design-system :is(.cx-group-view-status-cell, .cx-group-member-status-cell) {
min-width: 132px !important;
}
html body.cx-design-system :is(.cx-group-view-status-label, .cx-group-member-status-label),
html body.cx-design-system :is(.cx-group-view-status-icon, .cx-group-member-status-icon),
html body.cx-design-system :is(.cx-group-view-battery-icon, .cx-group-member-battery-icon) {
opacity: 1 !important;
visibility: visible !important;
filter: none !important;
}
html body.cx-design-system :is(.cx-group-view-status-icons, .cx-group-member-status-icons) {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
min-height: 20px !important;
}
/* ========================================================================== */
/* ========================================================================== */
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .alert-answer-action-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto !important;
gap: 10px !important;
align-items: stretch !important;
width: 100% !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .alert-answer-toggle {
min-height: 52px !important;
padding: 10px 14px !important;
justify-content: flex-start !important;
border-radius: 11px !important;
font-size: 13.5px !important;
font-weight: 800 !important;
line-height: 1.25 !important;
box-shadow: none !important;
transform: none !important;
translate: none !important;
scale: none !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .alert-answer-toggle > i {
width: 22px !important;
min-width: 22px !important;
text-align: center !important;
font-size: 15px !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .alert-answer-panel,
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .cx-alert-resource-detail {
padding: 14px 16px !important;
border-radius: 11px !important;
background: #ffffff !important;
color: #172b3a !important;
font-size: 14px !important;
line-height: 1.62 !important;
box-shadow: 0 2px 8px rgba(35, 74, 108, .05) !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .alert-answer-panel-danger,
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .cx-alert-resource-detail.alert-answer-panel-danger {
border: 1px solid #efc7c2 !important;
border-left: 4px solid #c93a2f !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .alert-answer-panel-info,
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .cx-alert-resource-detail.alert-answer-panel-info {
border: 1px solid #c9dbea !important;
border-left: 4px solid #315f82 !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .cx-alert-resource-body,
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .cx-r1882-emergency-contact-lines {
color: #172b3a !important;
font-weight: 500 !important;
line-height: 1.65 !important;
overflow-wrap: anywhere !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .alert-answer-panel-title {
margin-bottom: 9px !important;
font-size: 13.5px !important;
font-weight: 850 !important;
}
html body.cx-design-system .cx-dialog--alert-view .alert-view-resource-actions > .cx-alert-resource-detail {
grid-column: 1 / -1 !important;
}
html body.cx-design-system .cx-device-identity-readonly-notice {
display: grid !important;
grid-template-columns: 42px minmax(0, 1fr) !important;
align-items: start !important;
gap: 12px !important;
margin: 4px 0 16px !important;
padding: 12px 14px !important;
border: 1px solid #c8dbea !important;
border-left: 4px solid #315f82 !important;
border-radius: 10px !important;
background: #f3f8fc !important;
color: #294d68 !important;
}
html body.cx-design-system .cx-device-identity-readonly-notice__icon {
width: 36px !important;
height: 36px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 9px !important;
background: #e4eef6 !important;
color: #315f82 !important;
}
html body.cx-design-system .cx-device-identity-readonly-notice__copy {
display: grid !important;
gap: 3px !important;
min-width: 0 !important;
}
html body.cx-design-system .cx-device-identity-readonly-notice__copy strong {
color: #244d70 !important;
font-size: 13.5px !important;
font-weight: 850 !important;
}
html body.cx-design-system .cx-device-identity-readonly-notice__copy > span {
font-size: 12.75px !important;
line-height: 1.5 !important;
}
html body.cx-design-system .cx-alert-followup-pilot {
display: grid !important;
grid-template-columns: 46px minmax(0, 1fr) minmax(240px, 340px) !important;
align-items: center !important;
gap: 14px !important;
margin: 0 0 14px !important;
padding: 14px !important;
border: 1px solid #c8dbea !important;
border-radius: 12px !important;
background: #f7fafc !important;
}
html body.cx-design-system .cx-alert-followup-pilot__icon {
width: 42px !important;
height: 42px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 10px !important;
background: #e7f1f8 !important;
color: #315f82 !important;
font-size: 18px !important;
}
html body.cx-design-system .cx-alert-followup-pilot__copy {
display: grid !important;
gap: 3px !important;
color: #49677f !important;
}
html body.cx-design-system .cx-alert-followup-pilot__copy strong {
color: #244d70 !important;
font-size: 14px !important;
font-weight: 850 !important;
}
html body.cx-design-system .cx-alert-followup-pilot__account {
display: grid !important;
gap: 5px !important;
margin: 0 !important;
color: #2c4c6c !important;
font-size: 11.5px !important;
font-weight: 800 !important;
}
html body.cx-design-system .device-geofence-map-empty.is-hidden {
display: none !important;
}
@media (max-width: 900px) {
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view) .alert-answer-action-row,
html body.cx-design-system .cx-alert-followup-pilot {
grid-template-columns: 1fr !important;
}
}
html body.cx-design-system .device-geofence-map-empty--static {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
min-height: 330px !important;
position: absolute !important;
inset: 0 !important;
z-index: 5 !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view)
:is(.alert-answer-panel-danger, .alert-answer-panel-info) .cx-alert-resource-body,
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view)
:is(.alert-answer-panel-danger, .alert-answer-panel-info) .cx-r1882-emergency-contact-lines {
color: #172b3d !important;
font-weight: 500 !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view)
.alert-answer-panel-danger .alert-answer-panel-title {
color: #b42318 !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view)
.alert-answer-panel-info .alert-answer-panel-title {
color: #244d70 !important;
}
html body.cx-design-system .cx-device-identity-readonly-notice {
display: grid !important;
grid-template-columns: 42px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
margin: 10px 0 18px !important;
padding: 13px 15px !important;
border: 1px solid #bdd4e4 !important;
border-left: 4px solid #3b6f95 !important;
border-radius: 10px !important;
background: #f1f7fb !important;
color: #2c4c64 !important;
}
html body.cx-design-system .cx-device-identity-readonly-notice__icon {
width: 40px !important;
height: 40px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 9px !important;
background: #e3eef6 !important;
color: #315f82 !important;
}
html body.cx-design-system .cx-device-identity-readonly-notice__copy {
display: grid !important;
gap: 3px !important;
line-height: 1.45 !important;
}
html body.cx-design-system .cx-device-identity-readonly-notice__copy strong {
color: #244d70 !important;
font-size: 14px !important;
font-weight: 850 !important;
}
html body.cx-design-system .cx-alert-followup-pilot--available-now {
border-color: #b9d8c3 !important;
background: #f3fbf5 !important;
}
/* Alert View / Answer: contacts stay visually red/pink, with dark text. */
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view)
.alert-answer-panel-danger,
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view)
.cx-alert-resource-detail.alert-answer-panel-danger {
background: #fff0ee !important;
border: 1px solid #edaaa2 !important;
border-left: 4px solid #ca3d32 !important;
color: #172b3d !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view)
.alert-answer-panel-danger :is(.alert-answer-panel-title, .cx-alert-resource-body, .cx-r1882-emergency-contact-lines, p, span, strong, div) {
color: #172b3d !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view)
.alert-answer-panel-danger .alert-answer-panel-title {
color: #8f241c !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view)
.alert-answer-panel-info,
html body.cx-design-system :is(.cx-dialog--alert-answer, .cx-dialog--alert-view)
.cx-alert-resource-detail.alert-answer-panel-info {
background: #eef6fc !important;
border: 1px solid #bed6e7 !important;
border-left: 4px solid #315f82 !important;
color: #172b3d !important;
}
/* Geofence definition mode. */
html body.cx-design-system .device-geofence-mode-switch {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
padding: 4px !important;
border: 1px solid #c9d9e6 !important;
border-radius: 11px !important;
background: #f7fafc !important;
}
html body.cx-design-system .device-geofence-mode-button {
min-height: 39px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 8px 13px !important;
border: 1px solid transparent !important;
border-radius: 8px !important;
background: transparent !important;
color: #4c657c !important;
font-size: 12.75px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
box-shadow: none !important;
transform: none !important;
transition: background-color .16s ease, border-color .16s ease, color .16s ease !important;
}
html body.cx-design-system .device-geofence-mode-button:is(:hover, :focus-visible) {
background: #edf4f9 !important;
color: #294f70 !important;
transform: none !important;
}
html body.cx-design-system .device-geofence-mode-button.is-active {
border-color: #8fb3cf !important;
background: #e7f1f8 !important;
color: #244d70 !important;
box-shadow: inset 0 0 0 1px rgba(49, 95, 130, .04) !important;
}
html body.cx-design-system .device-geofence-manual-card {
display: grid !important;
grid-template-columns: 42px minmax(0, 1fr) auto !important;
gap: 12px !important;
align-items: center !important;
margin: 14px 0 4px !important;
padding: 13px 14px !important;
border: 1px solid #c5d9e8 !important;
border-left: 4px solid #315f82 !important;
border-radius: 11px !important;
background: #f3f8fc !important;
color: #314d65 !important;
}
html body.cx-design-system .device-geofence-manual-card__icon {
width: 40px !important;
height: 40px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 10px !important;
background: #e2eef7 !important;
color: #315f82 !important;
font-size: 17px !important;
}
html body.cx-design-system .device-geofence-manual-card__copy {
min-width: 0 !important;
display: grid !important;
gap: 3px !important;
font-size: 12.5px !important;
line-height: 1.45 !important;
}
html body.cx-design-system .device-geofence-manual-card__copy strong {
color: #244d70 !important;
font-size: 13.5px !important;
font-weight: 850 !important;
}
html body.cx-design-system .device-geofence-manual-card__actions {
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-end !important;
gap: 7px !important;
}
html body.cx-design-system .device-geofence-map-card {
overflow: hidden !important;
}
html body.cx-design-system .device-geofence-map-canvas {
position: absolute !important;
inset: 0 !important;
min-height: 330px !important;
width: 100% !important;
height: 100% !important;
}
html body.cx-design-system .device-geofence-map-draw-hint {
position: absolute !important;
z-index: 6 !important;
left: 12px !important;
right: 12px !important;
bottom: 12px !important;
max-width: 620px !important;
margin: 0 auto !important;
padding: 9px 12px !important;
border: 1px solid rgba(49, 95, 130, .28) !important;
border-radius: 9px !important;
background: rgba(255, 255, 255, .94) !important;
color: #294f70 !important;
font-size: 12px !important;
font-weight: 750 !important;
line-height: 1.35 !important;
text-align: center !important;
box-shadow: 0 5px 16px rgba(38, 67, 91, .12) !important;
backdrop-filter: blur(6px) !important;
}
/* Wi-Fi indoor assist under Last Location. */
html body.cx-design-system .device-map-wifi-location {
display: flex !important;
align-items: flex-start !important;
gap: 8px !important;
margin-top: 7px !important;
padding: 7px 10px !important;
border: 1px solid #d6e2eb !important;
border-radius: 8px !important;
background: #f7fafc !important;
color: #3d5870 !important;
font-size: 11.75px !important;
line-height: 1.35 !important;
}
html body.cx-design-system .device-map-wifi-location > i {
margin-top: 2px !important;
color: #39739c !important;
}
html body.cx-design-system .device-map-wifi-location > div {
min-width: 0 !important;
display: grid !important;
gap: 2px !important;
}
html body.cx-design-system .device-map-wifi-location span {
overflow-wrap: anywhere !important;
}
/* Emergency Contact Review log: align it with Data/SMS/Voice list architecture. */
html body.cx-design-system .cx-emergency-review-context {
margin-bottom: 0 !important;
}
html body.cx-design-system .cx-emergency-review-filter-panel {
margin: 0 16px 12px !important;
}
html body.cx-design-system .cx-emergency-review-filter-grid {
grid-template-columns: repeat(4, minmax(170px, 1fr)) !important;
}
html body.cx-design-system .cx-emergency-review-search {
width: min(100%, 470px) !important;
margin-left: auto !important;
}
html body.cx-design-system .cx-r1883-inline-operation {
width: min(100%, 430px) !important;
min-height: 44px !important;
display: grid !important;
grid-template-columns: 34px minmax(0, 1fr) !important;
grid-template-rows: auto 4px !important;
align-items: center !important;
column-gap: 9px !important;
row-gap: 5px !important;
margin-left: auto !important;
padding: 7px 10px !important;
border: 1px solid rgba(255,255,255,.35) !important;
border-radius: 9px !important;
background: rgba(255,255,255,.1) !important;
color: #fff !important;
font-size: 12px !important;
font-weight: 750 !important;
}
html body.cx-design-system .cx-r1883-inline-operation .cx-r1883-wait-icon {
grid-row: 1 / 3 !important;
width: 30px !important;
height: 30px !important;
}
html body.cx-design-system .cx-r1883-inline-operation .cx-r1883-wait-bar {
grid-column: 2 !important;
width: 100% !important;
}
html body.cx-design-system .cx-review-log-status {
width: max-content !important;
max-width: 100% !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 5px 9px !important;
border: 1px solid transparent !important;
border-radius: 999px !important;
font-size: 11.5px !important;
font-weight: 850 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
html body.cx-design-system .cx-review-log-status.is-success {
border-color: #b8d8c2 !important;
background: #edf8f0 !important;
color: #28613b !important;
}
html body.cx-design-system .cx-review-log-status.is-warning {
border-color: #efd395 !important;
background: #fff8e8 !important;
color: #805812 !important;
}
html body.cx-design-system .cx-review-log-status.is-error {
border-color: #efb7b1 !important;
background: #fff1ef !important;
color: #9f3027 !important;
}
html body.cx-design-system .cx-emergency-review-device {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
color: #294f70 !important;
font-weight: 750 !important;
}
html body.cx-design-system .cx-emergency-review-device > i {
color: #4f7ea2 !important;
}
html body.cx-design-system .cx-emergency-review-details-trigger {
display: inline-block !important;
max-width: 390px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
html body.cx-design-system .cx-r1883-empty-log {
min-height: 120px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
padding: 24px !important;
color: #6a8194 !important;
text-align: center !important;
}
html body.cx-design-system .cx-r1883-empty-log > i {
color: #7893a8 !important;
font-size: 18px !important;
}
html body.cx-design-system #scheduled-alert-report {
scroll-margin-top: 110px !important;
}
@media (max-width: 1100px) {
html body.cx-design-system .cx-emergency-review-filter-grid {
grid-template-columns: repeat(2, minmax(170px, 1fr)) !important;
}
html body.cx-design-system .device-geofence-manual-card {
grid-template-columns: 42px minmax(0, 1fr) !important;
}
html body.cx-design-system .device-geofence-manual-card__actions {
grid-column: 1 / -1 !important;
justify-content: flex-start !important;
}
}
@media (max-width: 680px) {
html body.cx-design-system .device-geofence-mode-switch {
width: 100% !important;
display: grid !important;
grid-template-columns: 1fr !important;
}
html body.cx-design-system .device-geofence-mode-button {
width: 100% !important;
}
html body.cx-design-system .cx-emergency-review-filter-grid {
grid-template-columns: minmax(0, 1fr) !important;
}
html body.cx-design-system .cx-emergency-review-filter-panel {
margin-inline: 8px !important;
}
}
html body.cx-design-system .alert-list-card .cx-alert-workflow-status {
width: max-content !important;
max-width: 100% !important;
height: auto !important;
min-height: 28px !important;
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 7px !important;
padding: 5px 9px !important;
border-radius: 999px !important;
font-size: 12px !important;
font-weight: 750 !important;
line-height: 1.15 !important;
white-space: nowrap !important;
}
html body.cx-design-system .alert-list-card .cx-alert-workflow-status .cx-alert-workflow-icon {
width: 13px !important;
min-width: 13px !important;
height: auto !important;
flex: 0 0 13px !important;
font-size: 11px !important;
line-height: 1 !important;
text-align: center !important;
}
html body.cx-design-system .alert-list-card .cx-alert-workflow-status.is-pending {
background: #fff5df !important;
border-color: #f1d08c !important;
color: #7b5516 !important;
}
html body.cx-design-system .alert-list-card .cx-alert-workflow-status.is-in-progress {
background: #eaf3fb !important;
border-color: #b8d4e8 !important;
color: #2f6288 !important;
}
html body.cx-design-system .alert-list-card .cx-alert-workflow-status.is-completed {
background: #eaf6ed !important;
border-color: #b8d9c0 !important;
color: #327545 !important;
}
html body.cx-design-system .alert-list-card .alert-list-workflow-cell {
vertical-align: middle !important;
}
@media (min-width: 1200px) {
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-configuration-layout-with-preview {
grid-template-columns: minmax(0, 1.28fr) minmax(370px, .72fr) !important;
align-items: start !important;
gap: 18px !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-card {
position: sticky !important;
top: 10px !important;
align-self: start !important;
width: 100% !important;
min-width: 0 !important;
height: clamp(400px, 52dvh, 540px) !important;
min-height: 400px !important;
max-height: min(60dvh, 560px) !important;
resize: none !important;
overflow: hidden !important;
z-index: 12 !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-preview {
min-height: 0 !important;
height: auto !important;
flex: 1 1 auto !important;
}
}
@media (max-width: 1199.98px) {
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-configuration-layout-with-preview {
grid-template-columns: minmax(0, 1fr) !important;
align-items: start !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-card {
position: relative !important;
top: auto !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 380px !important;
min-height: 340px !important;
max-height: 520px !important;
align-self: auto !important;
resize: vertical !important;
}
}
@media (max-width: 767.98px) {
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.cx-r1-section {
padding: 12px !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-configuration-card,
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-recipients-card {
padding: 12px !important;
border-radius: 10px !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-card-header {
gap: 9px !important;
margin-bottom: 12px !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-card-icon {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-fields-grid {
grid-template-columns: minmax(0, 1fr) !important;
gap: 13px !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-field-full {
grid-column: auto !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-radio-group {
grid-template-columns: minmax(0, 1fr) !important;
gap: 8px !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.cx-native-radio-card .device-geofence-radio-content {
min-height: 66px !important;
padding: 11px 12px 11px 44px !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-manual-card {
grid-template-columns: 36px minmax(0, 1fr) !important;
padding: 11px !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-manual-card__icon {
width: 36px !important;
height: 36px !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-manual-card__actions {
grid-column: 1 / -1 !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
width: 100% !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-manual-card__actions .btn {
width: 100% !important;
min-height: 38px !important;
white-space: normal !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-card {
height: 330px !important;
min-height: 300px !important;
max-height: 440px !important;
resize: none !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-preview,
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-preview > div,
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-preview .gm-style {
min-height: 250px !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-draw-hint {
left: 8px !important;
right: 8px !important;
bottom: 8px !important;
padding: 7px 9px !important;
font-size: 11.5px !important;
}
}
@media (max-width: 575.98px) {
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-tabs {
margin-bottom: 10px !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-tab {
min-width: 102px !important;
max-width: 150px !important;
min-height: 40px !important;
height: 40px !important;
padding-inline: 8px !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-topbar {
align-items: stretch !important;
gap: 8px !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-switch-card,
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-mode-switch,
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-preview-button {
width: 100% !important;
max-width: none !important;
align-self: stretch !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-preview-button {
display: inline-flex !important;
justify-content: center !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-dialog-actions {
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
flex-wrap: nowrap !important;
gap: 8px !important;
padding: 8px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-dialog-actions > button {
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
min-height: 44px !important;
margin: 0 !important;
padding: 0 !important;
flex: 0 0 44px !important;
white-space: nowrap !important;
}
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-configuration-layout-with-preview > .device-geofence-map-card,
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-card.device-geofence-map-resizable {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
resize: none !important;
flex: initial !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-configuration-layout-with-preview > .device-geofence-fields-column {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
}
@media (min-width: 1200px) {
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-configuration-layout-with-preview {
grid-template-columns: minmax(0, 1.22fr) minmax(400px, .78fr) !important;
grid-auto-flow: row !important;
align-items: start !important;
gap: 20px !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-configuration-layout-with-preview > .device-geofence-map-card {
grid-column: 2 !important;
grid-row: 1 !important;
justify-self: stretch !important;
align-self: start !important;
position: sticky !important;
top: 10px !important;
height: clamp(400px, 52dvh, 540px) !important;
min-height: 400px !important;
max-height: min(60dvh, 560px) !important;
}
}
@media (max-width: 1199.98px) {
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-configuration-layout-with-preview {
grid-template-columns: minmax(0, 1fr) !important;
gap: 14px !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-configuration-layout-with-preview > .device-geofence-map-card {
grid-column: 1 !important;
grid-row: auto !important;
position: relative !important;
top: auto !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 380px !important;
min-height: 340px !important;
max-height: 520px !important;
}
}
@media (max-width: 767.98px) {
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-configuration-layout-with-preview > .device-geofence-map-card {
height: 330px !important;
min-height: 300px !important;
max-height: 440px !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-header {
min-width: 0 !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-header > div {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
}
/* Manual geofence drawing: controls live outside the Google Maps surface so
neither the helper copy nor the buttons can cover the area the user must tap. */
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-drawing-panel {
flex: 0 0 auto !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 9px 12px !important;
width: 100% !important;
padding: 9px 10px !important;
border-bottom: 1px solid #d9e5ee !important;
background: #f6f9fc !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-draw-hint {
position: static !important;
inset: auto !important;
z-index: auto !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
display: flex !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 7px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: #3b5d78 !important;
box-shadow: none !important;
backdrop-filter: none !important;
text-align: left !important;
font-size: 11.75px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
pointer-events: none !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-draw-hint > i {
flex: 0 0 auto !important;
margin-top: 2px !important;
color: #3f7298 !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-draw-toolbar {
position: static !important;
inset: auto !important;
z-index: auto !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
flex-wrap: wrap !important;
gap: 6px !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
pointer-events: auto !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-tool {
min-height: 34px !important;
min-width: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
padding: 6px 9px !important;
border: 1px solid #c7d7e4 !important;
border-radius: 8px !important;
background: #ffffff !important;
color: #315a7d !important;
font-size: 11.5px !important;
font-weight: 800 !important;
line-height: 1.1 !important;
box-shadow: none !important;
transform: none !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-tool:not(.device-geofence-map-tool--primary):not(.device-geofence-map-tool--success):not(.device-geofence-map-tool--danger):is(:hover, :focus-visible):not(:disabled) {
border-color: #8eb4cf !important;
background: #edf5fb !important;
color: #244d70 !important;
transform: none !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-tool--primary,
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-tool--primary.is-active {
border-color: #315f82 !important;
background: #315f82 !important;
color: #ffffff !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-tool--success:not(:disabled) {
border-color: #5f916b !important;
background: #edf7ef !important;
color: #356943 !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-tool--danger:not(:disabled) {
border-color: #dca8ae !important;
background: #fff5f6 !important;
color: #9d3f4b !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-tool:disabled {
opacity: .46 !important;
cursor: not-allowed !important;
}
/* A successful map must never leave an invisible full-size status layer above it. */
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-status.is-hidden,
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-status[hidden] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Customer read-only contact/emergency/note blocks follow the same visual
language as other read-only fields without looking like disabled textareas. */
html body.cx-design-system .mud-dialog.cx-r1-device-addedit
.cx-device-readonly-multiline {
min-height: 68px !important;
height: auto !important;
display: block !important;
padding: 12px 14px !important;
border: 1px solid #cfdeea !important;
border-left: 4px solid #6ea0c2 !important;
border-radius: 9px !important;
background: #f7fafc !important;
color: #263f58 !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.55 !important;
white-space: pre-wrap !important;
overflow-wrap: anywhere !important;
align-items: initial !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-addedit
.cx-device-readonly-contacts {
min-height: 150px !important;
}
/* Alert queue workflow is intentionally readable, not an unexplained 22px icon. */
html body.cx-design-system .conexgo-alert-classic-side-top .cx-alert-workflow-status {
width: max-content !important;
max-width: 132px !important;
height: auto !important;
min-height: 26px !important;
flex: 0 0 auto !important;
gap: 6px !important;
padding: 4px 8px !important;
border-radius: 999px !important;
white-space: nowrap !important;
font-size: 10.75px !important;
font-weight: 850 !important;
line-height: 1 !important;
}
html body.cx-design-system .conexgo-alert-classic-side-top
.cx-alert-workflow-status > i {
width: 12px !important;
min-width: 12px !important;
font-size: 10px !important;
}
html body.cx-design-system .conexgo-alert-classic-side-top
.cx-alert-workflow-status__label {
display: inline !important;
min-width: 0 !important;
}
html body.cx-design-system .conexgo-alert-trigger.is-pending .conexgo-alert-icon {
color: #cc3657 !important;
}
html body.cx-design-system .conexgo-alert-trigger.is-in-progress .conexgo-alert-icon {
color: #315f82 !important;
}
/* Scheduled client report entry: use Conexgo controls and give the action its
own column rather than letting an implicit grid track distort the card. */
html body.cx-design-system .cx-alert-followup-pilot {
grid-template-columns: 46px minmax(260px, 1fr) minmax(260px, 340px) auto !important;
align-items: end !important;
gap: 12px 14px !important;
padding: 15px 16px !important;
}
html body.cx-design-system .cx-alert-followup-pilot__icon,
html body.cx-design-system .cx-alert-followup-pilot__copy {
align-self: center !important;
}
html body.cx-design-system .cx-alert-followup-pilot__account-label {
display: block !important;
margin-bottom: 5px !important;
color: #3d5a72 !important;
font-size: 11px !important;
font-weight: 850 !important;
letter-spacing: .025em !important;
text-transform: uppercase !important;
}
html body.cx-design-system .cx-alert-followup-pilot__select,
html body.cx-design-system .cx-alert-followup-pilot__select .cx-custom-select-trigger {
width: 100% !important;
min-width: 0 !important;
}
html body.cx-design-system .cx-alert-followup-pilot__actions {
align-self: end !important;
}
html body.cx-design-system .cx-alert-followup-configure {
min-height: 39px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
padding: 8px 12px !important;
border: 1px solid #315f82 !important;
border-radius: 9px !important;
background: #315f82 !important;
color: #fff !important;
font-weight: 800 !important;
white-space: nowrap !important;
}
/* Report delivery modal: clear hierarchy between schedule, recipients and
attachment while keeping all existing Conexgo form components. */
html body.cx-design-system .mud-dialog.cx-report-subscribe-dialog {
width: min(1160px, calc(100vw - 28px)) !important;
max-width: min(1160px, calc(100vw - 28px)) !important;
}
html body.cx-design-system .cx-report-subscribe-dialog .mud-dialog-content {
max-height: min(76dvh, 820px) !important;
padding: 12px 14px !important;
}
html body.cx-design-system .cx-report-subscribe-dialog .report-subscribe-form {
gap: 14px !important;
}
html body.cx-design-system .cx-report-subscribe-dialog .report-subscribe-section {
padding: 14px 16px 16px !important;
border-color: #c9dbe8 !important;
box-shadow: 0 3px 10px rgba(36, 77, 112, .035) !important;
}
html body.cx-design-system .cx-report-subscribe-dialog .cx-r1878-report-target {
width: 100% !important;
display: grid !important;
grid-template-columns: 34px auto minmax(0, 1fr) !important;
align-items: center !important;
gap: 8px !important;
margin: 0 0 12px !important;
padding: 9px 11px !important;
border: 1px solid #d3e0ea !important;
border-radius: 9px !important;
background: #f6f9fc !important;
color: #536b7e !important;
}
html body.cx-design-system .cx-report-subscribe-dialog .cx-r1878-report-target > i {
width: 30px !important;
height: 30px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 8px !important;
background: #e5f0f7 !important;
color: #315f82 !important;
}
html body.cx-design-system .cx-report-subscribe-dialog .cx-r1878-report-target strong {
color: #244d70 !important;
overflow-wrap: anywhere !important;
}
html body.cx-design-system .cx-report-subscribe-dialog .report-subscribe-footer {
width: 100% !important;
display: grid !important;
grid-template-columns: repeat(4, max-content) !important;
justify-content: end !important;
align-items: center !important;
gap: 8px !important;
}
html body.cx-design-system .cx-report-subscribe-dialog .report-subscribe-action {
min-height: 40px !important;
margin: 0 !important;
border-radius: 9px !important;
white-space: nowrap !important;
}
/* Manage Devices search result/status areas stay readable at desktop and mobile. */
html body.cx-design-system .mud-dialog.cx-r1-account-managedevices .dataTables_filter,
html body.cx-design-system .mud-dialog.cx-r1-account-managedevices .dataTables_filter label,
html body.cx-design-system .mud-dialog.cx-r1-account-managedevices .dataTables_filter .input-group {
width: 100% !important;
max-width: none !important;
}
@media (max-width: 1050px) {
html body.cx-design-system .cx-alert-followup-pilot {
grid-template-columns: 46px minmax(0, 1fr) !important;
}
html body.cx-design-system .cx-alert-followup-pilot__account,
html body.cx-design-system .cx-alert-followup-pilot__actions {
grid-column: 1 / -1 !important;
}
html body.cx-design-system .cx-alert-followup-pilot__actions,
html body.cx-design-system .cx-alert-followup-configure {
width: 100% !important;
}
}
@media (max-width: 767.98px) {
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-card {
height: auto !important;
min-height: 390px !important;
max-height: none !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-drawing-panel {
grid-template-columns: minmax(0, 1fr) !important;
gap: 8px !important;
padding: 8px !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-draw-toolbar {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
width: 100% !important;
gap: 6px !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-tool {
width: 100% !important;
min-height: 36px !important;
padding-inline: 6px !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-preview {
min-height: 300px !important;
flex: 1 1 300px !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-preview > div,
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-preview .gm-style {
min-height: 300px !important;
}
html body.cx-design-system .cx-report-subscribe-dialog .report-subscribe-footer {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
width: 100% !important;
}
html body.cx-design-system .cx-report-subscribe-dialog .report-subscribe-action {
width: 100% !important;
min-width: 0 !important;
white-space: normal !important;
}
html body.cx-design-system .cx-report-subscribe-dialog .cx-r1878-report-target {
grid-template-columns: 34px minmax(0, 1fr) !important;
}
html body.cx-design-system .cx-report-subscribe-dialog .cx-r1878-report-target strong {
grid-column: 2 !important;
}
}
@media (max-width: 430px) {
html body.cx-design-system .mud-dialog.cx-r1-device-geofence
.device-geofence-map-draw-toolbar {
grid-template-columns: minmax(0, 1fr) !important;
}
html body.cx-design-system .cx-report-subscribe-dialog .report-subscribe-footer {
grid-template-columns: minmax(0, 1fr) !important;
}
}
/* Row-action menus: requested interaction is background-only. Never translate,
scale, enlarge, indent or animate the content when hovering/focusing. */
html body.cx-design-system :is(.dropdown-menu, .device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu) .dropdown-item,
html body.cx-design-system :is(.dropdown-menu, .device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu) .dropdown-item *,
html body.cx-design-system :is(.dropdown-menu, .device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu) .dropdown-item::before,
html body.cx-design-system :is(.dropdown-menu, .device-list-action-menu, .conexgo-row-action-menu, .conexgo-account-document-menu) .dropdown-item::after {
translate: none !important;
scale: 1 !important;
animation: none !important;
margin-left: 0 !important;
}
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu) .dropdown-item {
transform: translateY(0) !important;
transition: background-color .14s ease, color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease !important;
}
html body.cx-design-system :is(.device-list-action-menu, .conexgo-row-action-menu) .dropdown-item:is(:hover, :focus, :focus-visible, :active) {
transform: translateY(-1px) !important;
translate: none !important;
scale: 1 !important;
box-shadow: 0 3px 8px rgba(44, 76, 108, .07) !important;
background: #f0f5f9 !important;
color: #244d70 !important;
}
html body.cx-design-system :is(.dropdown-menu, .conexgo-account-document-menu) .dropdown-item:is(:hover, :focus, :focus-visible, :active) {
transform: none !important;
translate: none !important;
scale: 1 !important;
box-shadow: none !important;
background: rgba(49, 95, 128, .10) !important;
color: #244d70 !important;
}
/* Keep the same slightly stronger blue hover used by Device List everywhere. */
html body.cx-design-system :is(.table-hover, .conexgo-pagedlist-table, .cx-native-table, .report-list-card table, .account-list-card table) tbody tr:hover > *,
html body.cx-design-system :is(.table-hover, .conexgo-pagedlist-table, .cx-native-table, .report-list-card table, .account-list-card table) tbody tr:focus-within > * {
--bs-table-accent-bg: rgba(49, 95, 128, .075) !important;
background-color: rgba(49, 95, 128, .075) !important;
}
/* Block notice: stable two-column form. Help belongs to its field instead of
floating in a narrow third column. */
html body.cx-design-system .mud-dialog.cx-r1-account-blocknotice {
width: min(1080px, calc(100vw - 28px)) !important;
max-width: min(1080px, calc(100vw - 28px)) !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .mud-dialog-content {
padding: 16px 18px !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .cx-r1-form-row {
display: grid !important;
grid-template-columns: minmax(180px, 230px) minmax(0, 1fr) !important;
align-items: start !important;
gap: 8px 18px !important;
margin: 0 0 14px !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .cx-r1-form-row > [class*="col-"] {
width: auto !important;
max-width: none !important;
padding: 0 !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .cx-r1-form-row > .form-label {
padding-top: 10px !important;
text-align: left !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .cx-r1876-blocknotice-field-grid {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 6px !important;
width: 100% !important;
}
html body.cx-design-system .cx-r1-account-blocknotice :is(.cx-r1876-blocknotice-primary-control, .cx-r1876-blocknotice-action-control) {
width: 100% !important;
max-width: none !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .cx-field-help {
color: #647b8e !important;
font-size: 12.5px !important;
line-height: 1.45 !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .cx-blocknotice-auto-row > .col-md-2,
html body.cx-design-system .cx-r1-account-blocknotice .cx-blocknotice-auto-row > .col-md-7 {
grid-column: 2 !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .cx-blocknotice-auto-row > .col-md-2 {
width: max-content !important;
padding: 5px 0 0 !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .cx-blocknotice-auto-row > .col-md-7 {
margin-top: -4px !important;
padding: 10px 12px !important;
border: 1px solid #dbe6ee !important;
border-radius: 9px !important;
background: #f7fafc !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .cx-blocknotice-message-row textarea {
min-height: 150px !important;
padding: 12px 14px !important;
line-height: 1.55 !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .account-blocknotice-history-table tbody tr:hover > * {
background: rgba(49, 95, 128, .075) !important;
}
/* Alert documents belong to the same resource system as Contacts and Emergency
Service Information, rather than looking like a separate nested widget. */
html body.cx-design-system :is(.alert-answer-action-row, .alert-view-resource-actions) .cx-alert-resource-documents,
html body.cx-design-system :is(.alert-answer-action-row, .alert-view-resource-actions) .cx-alert-resource-documents .cx-alert-documents-toggle-row {
display: contents !important;
}
html body.cx-design-system :is(.alert-answer-action-row, .alert-view-resource-actions) .alert-answer-toggle-documents {
min-height: 50px !important;
border: 1px solid #8fb5cf !important;
border-radius: 9px !important;
background: #f5f9fc !important;
color: #2c5d80 !important;
font-weight: 800 !important;
}
html body.cx-design-system :is(.alert-answer-action-row, .alert-view-resource-actions) .alert-answer-toggle-documents:is(:hover, :focus-visible, .active) {
background: #e8f2f8 !important;
color: #234f70 !important;
transform: none !important;
}
html body.cx-design-system :is(.alert-answer-action-row, .alert-view-resource-actions) .cx-alert-documents-preview-list {
grid-column: 1 / -1 !important;
width: 100% !important;
margin-top: 2px !important;
padding: 14px 16px !important;
border: 1px solid #b9d2e3 !important;
border-left: 4px solid #315f82 !important;
border-radius: 10px !important;
background: #edf5fa !important;
color: #173b57 !important;
}
html body.cx-design-system .cx-alert-documents-preview-list .cx-alert-resource-panel-title {
color: #173b57 !important;
font-weight: 850 !important;
}
html body.cx-design-system .cx-alert-document-preview-card {
border-color: #cbdde9 !important;
background: #fff !important;
box-shadow: none !important;
}
html body.cx-design-system .cx-alert-document-preview-card:hover {
background: #f7fbfe !important;
transform: none !important;
}
/* Monthly reports use the same list-page language as the existing report
screens. Keep this surface intentionally restrained: one standard report
card, one toolbar, one table and the usual Conexgo action colours. */
html body.cx-design-system .cx-monthly-report-list-card {
overflow: hidden !important;
}
html body.cx-design-system .cx-monthly-report-toolbar-row {
grid-template-columns: minmax(240px, 1fr) minmax(320px, 470px) !important;
gap: 16px !important;
}
html body.cx-design-system .cx-monthly-report-toolbar-heading {
min-width: 0 !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
color: #fff !important;
}
html body.cx-design-system .cx-monthly-report-toolbar-icon {
flex: 0 0 auto !important;
width: 36px !important;
height: 36px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid rgba(255,255,255,.22) !important;
border-radius: 8px !important;
background: rgba(255,255,255,.08) !important;
color: #fff !important;
}
html body.cx-design-system .cx-monthly-report-toolbar-copy {
min-width: 0 !important;
display: grid !important;
gap: 1px !important;
}
html body.cx-design-system .cx-monthly-report-toolbar-copy strong {
color: #fff !important;
font-size: .96rem !important;
font-weight: 800 !important;
line-height: 1.2 !important;
}
html body.cx-design-system .cx-monthly-report-toolbar-copy small {
color: rgba(255,255,255,.76) !important;
font-size: .76rem !important;
line-height: 1.25 !important;
}
html body.cx-design-system .cx-monthly-report-toolbar-control {
width: 100% !important;
min-width: 0 !important;
justify-self: end !important;
}
html body.cx-design-system .cx-monthly-report-toolbar-label {
display: block !important;
margin: 0 0 4px !important;
color: rgba(255,255,255,.78) !important;
font-size: .72rem !important;
font-weight: 800 !important;
letter-spacing: .025em !important;
text-transform: uppercase !important;
}
html body.cx-design-system .cx-monthly-report-target-select {
width: 100% !important;
max-width: none !important;
}
html body.cx-design-system .cx-monthly-report-toolbar-control .cx-select-control,
html body.cx-design-system .cx-monthly-report-toolbar-control .cx-control--filter {
background: #fff !important;
}
html body.cx-design-system .cx-monthly-report-account-context {
min-height: 48px !important;
display: grid !important;
grid-template-columns: 34px minmax(0,1fr) !important;
align-items: center !important;
gap: 9px !important;
padding: 6px 10px !important;
border: 1px solid rgba(255,255,255,.2) !important;
border-radius: 8px !important;
background: rgba(255,255,255,.08) !important;
color: #fff !important;
}
html body.cx-design-system .cx-monthly-report-account-icon {
width: 32px !important;
height: 32px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 7px !important;
background: rgba(255,255,255,.1) !important;
}
html body.cx-design-system .cx-monthly-report-account-context > span:last-child {
min-width: 0 !important;
display: grid !important;
gap: 1px !important;
}
html body.cx-design-system .cx-monthly-report-account-context small {
color: rgba(255,255,255,.7) !important;
font-size: .7rem !important;
font-weight: 750 !important;
text-transform: uppercase !important;
}
html body.cx-design-system .cx-monthly-report-account-context strong {
min-width: 0 !important;
color: #fff !important;
font-size: .88rem !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
html body.cx-design-system .cx-monthly-report-card-body {
display: grid !important;
gap: 16px !important;
padding: 16px 20px 20px !important;
}
html body.cx-design-system .cx-monthly-report-info {
display: grid !important;
grid-template-columns: 38px minmax(0,1fr) !important;
align-items: start !important;
gap: 11px !important;
padding: 12px 14px !important;
border: 1px solid #d6e2eb !important;
border-left: 4px solid #3e6a99 !important;
border-radius: 9px !important;
background: #f7fafc !important;
color: #536b7e !important;
}
html body.cx-design-system .cx-monthly-report-info-icon {
width: 34px !important;
height: 34px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 8px !important;
background: #e8f2f8 !important;
color: #315f82 !important;
}
html body.cx-design-system .cx-monthly-report-info > div {
min-width: 0 !important;
display: grid !important;
gap: 3px !important;
}
html body.cx-design-system .cx-monthly-report-info strong {
color: #244d70 !important;
font-weight: 820 !important;
}
html body.cx-design-system .cx-monthly-report-info span {
line-height: 1.45 !important;
}
html body.cx-design-system .cx-monthly-report-table-shell {
margin: 0 !important;
border: 1px solid #dce5ec !important;
border-radius: 9px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
}
html body.cx-design-system .cx-monthly-report-table {
min-width: 900px !important;
margin: 0 !important;
}
html body.cx-design-system .cx-monthly-report-table thead th {
padding: 12px 14px !important;
border-bottom: 1px solid #cbdde9 !important;
color: #244d70 !important;
font-size: .79rem !important;
font-weight: 850 !important;
letter-spacing: .015em !important;
text-transform: uppercase !important;
vertical-align: middle !important;
white-space: nowrap !important;
}
html body.cx-design-system .cx-monthly-report-column-icon {
width: 30px !important;
height: 30px !important;
margin-right: 7px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid #cfe0ea !important;
border-radius: 7px !important;
background: #f6fbfe !important;
color: #315f82 !important;
vertical-align: middle !important;
}
html body.cx-design-system .cx-monthly-report-table tbody td {
padding: 14px !important;
color: #2c4c6c !important;
vertical-align: top !important;
}
html body.cx-design-system .cx-monthly-report-action-column {
width: 145px !important;
}
html body.cx-design-system .cx-monthly-report-action-cell {
text-align: center !important;
vertical-align: middle !important;
}
html body.cx-design-system .cx-monthly-report-row-actions {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
html body.cx-design-system .cx-monthly-report-row-action {
width: 40px !important;
height: 36px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 0 !important;
border-radius: 4px !important;
box-shadow: none !important;
transform: none !important;
transition: background-color .15s ease, border-color .15s ease !important;
}
html body.cx-design-system .cx-monthly-report-row-action:hover,
html body.cx-design-system .cx-monthly-report-row-action:focus-visible {
transform: none !important;
}
html body.cx-design-system .cx-monthly-report-row-action--configure {
background: #78b842 !important;
color: #fff !important;
}
html body.cx-design-system .cx-monthly-report-row-action--configure:hover,
html body.cx-design-system .cx-monthly-report-row-action--configure:focus-visible {
background: #69a536 !important;
}
html body.cx-design-system .cx-monthly-report-row-action--preview {
background: #3e6a99 !important;
color: #fff !important;
}
html body.cx-design-system .cx-monthly-report-row-action--preview:hover,
html body.cx-design-system .cx-monthly-report-row-action--preview:focus-visible {
background: #315f82 !important;
}
html body.cx-design-system .cx-monthly-report-row-action:disabled {
opacity: .48 !important;
cursor: not-allowed !important;
}
html body.cx-design-system .cx-monthly-report-name-cell {
min-width: 290px !important;
}
html body.cx-design-system .cx-monthly-report-name-cell strong {
display: block !important;
color: #173b57 !important;
font-weight: 800 !important;
line-height: 1.3 !important;
}
html body.cx-design-system .cx-monthly-report-name-cell small {
display: block !important;
margin-top: 3px !important;
color: #657b8c !important;
line-height: 1.4 !important;
}
html body.cx-design-system .cx-monthly-report-recipient-cell {
min-width: 230px !important;
}
html body.cx-design-system .cx-monthly-report-recipient {
display: block !important;
overflow-wrap: anywhere !important;
line-height: 1.4 !important;
}
html body.cx-design-system .cx-monthly-report-muted {
color: #8997a3 !important;
font-style: italic !important;
}
html body.cx-design-system .cx-monthly-report-format {
white-space: nowrap !important;
}
html body.cx-design-system .cx-monthly-report-schedule-cell {
min-width: 230px !important;
color: #2c4c6c !important;
font-size: .86rem !important;
font-weight: 650 !important;
line-height: 1.4 !important;
}
html body.cx-design-system .cx-monthly-report-footnote {
display: flex !important;
align-items: flex-start !important;
gap: 8px !important;
padding: 0 2px !important;
color: #657b8c !important;
font-size: .78rem !important;
line-height: 1.4 !important;
}
html body.cx-design-system .cx-monthly-report-footnote i {
margin-top: 2px !important;
color: #557b99 !important;
}
@media (max-width: 991.98px) {
html body.cx-design-system .cx-monthly-report-toolbar-row {
grid-template-columns: minmax(0,1fr) !important;
}
html body.cx-design-system .cx-monthly-report-toolbar-control {
justify-self: stretch !important;
}
}
@media (max-width: 575.98px) {
html body.cx-design-system .cx-monthly-report-card-body {
padding: 12px !important;
gap: 12px !important;
}
html body.cx-design-system .cx-monthly-report-toolbar-heading {
align-items: flex-start !important;
}
html body.cx-design-system .cx-monthly-report-info {
grid-template-columns: 32px minmax(0,1fr) !important;
padding: 11px !important;
}
html body.cx-design-system .cx-monthly-report-info-icon {
width: 30px !important;
height: 30px !important;
}
}
/* Report subscription customer mode: keep the target visible and make the
sections compact/readable. */
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;
}
@media (max-width: 991.98px) {
html body.cx-design-system .cx-r1-account-blocknotice .cx-r1-form-row {
grid-template-columns: minmax(0, 1fr) !important;
gap: 6px !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .cx-blocknotice-auto-row > .col-md-2,
html body.cx-design-system .cx-r1-account-blocknotice .cx-blocknotice-auto-row > .col-md-7 { grid-column: 1 !important; }
html body.cx-design-system .cx-monthly-report-target-card,
html body.cx-design-system .cx-monthly-report-actions-card { grid-template-columns: minmax(0, 1fr) !important; }
html body.cx-design-system .cx-monthly-report-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !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: 575.98px) {
html body.cx-design-system .cx-monthly-report-hero { grid-template-columns: 42px minmax(0, 1fr) !important; padding: 14px !important; }
html body.cx-design-system .cx-monthly-report-summary { grid-template-columns: minmax(0, 1fr) !important; }
html body.cx-design-system .cx-monthly-report-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
html body.cx-design-system .cx-monthly-report-action { width: 100% !important; }
html body.cx-design-system .cx-report-subscribe-dialog .report-subscribe-schedule-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
html body.cx-design-system :is(.dropdown-menu,.device-list-action-menu,.conexgo-row-action-menu,.conexgo-account-document-menu) .dropdown-item,
html body.cx-design-system :is(.dropdown-menu,.device-list-action-menu,.conexgo-row-action-menu,.conexgo-account-document-menu) .dropdown-item:is(:hover,:focus,:focus-visible,:active) {
inset: auto !important;
left: auto !important;
right: auto !important;
text-indent: 0 !important;
padding-left: var(--bs-dropdown-item-padding-x, 1rem) !important;
padding-right: var(--bs-dropdown-item-padding-x, 1rem) !important;
}
html body.cx-design-system .cx-emergency-review-eligibility-warning {
display: grid !important;
grid-template-columns: 42px minmax(0,1fr) !important;
align-items: start !important;
gap: 12px !important;
margin: 12px 0 4px !important;
padding: 13px 14px !important;
border: 1px solid #e8cb86 !important;
border-left: 4px solid #c98a16 !important;
border-radius: 10px !important;
background: #fff8e8 !important;
color: #594519 !important;
}
html body.cx-design-system .cx-emergency-review-eligibility-icon {
display: inline-flex !important;
width: 38px !important;
height: 38px !important;
align-items: center !important;
justify-content: center !important;
border-radius: 9px !important;
background: #f9e8bd !important;
color: #a86e08 !important;
}
html body.cx-design-system .cx-emergency-review-eligibility-copy { display:grid !important; gap:3px !important; line-height:1.42 !important; }
html body.cx-design-system .cx-emergency-review-eligibility-copy strong { color:#4d3a12 !important; font-weight:850 !important; }
html body.cx-design-system .cx-emergency-review-eligibility-copy > span { color:#6e5724 !important; font-size:13px !important; }
/* Make all three Alert resources feel like one component family. */
html body.cx-design-system :is(.alert-answer-action-row,.alert-view-resource-actions) {
align-items: stretch !important;
}
html body.cx-design-system :is(.alert-answer-toggle-danger,.alert-answer-toggle-info,.alert-answer-toggle-documents) {
min-height: 52px !important;
border-radius: 9px !important;
box-shadow: none !important;
transform: none !important;
}
html body.cx-design-system .cx-alert-documents-preview-list {
margin-bottom: 0 !important;
box-shadow: none !important;
}
@media (max-width: 575.98px) {
html body.cx-design-system .cx-emergency-review-eligibility-warning { grid-template-columns:34px minmax(0,1fr) !important; padding:11px !important; }
html body.cx-design-system .cx-emergency-review-eligibility-icon { width:32px !important; height:32px !important; }
}
/* Documents use exactly the same blue interaction language as Emergency service info. */
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .alert-answer-toggle-documents {
border-color: #a9c5da !important;
background: #eef6fb !important;
color: #294f70 !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .alert-answer-toggle-documents:is(:hover,:focus-visible) {
border-color: #83acc9 !important;
background: #e2f0f8 !important;
color: #234661 !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .alert-answer-toggle-documents.active {
border-color: #315a7b !important;
background: #315a7b !important;
color: #fff !important;
box-shadow: 0 0 0 3px rgba(49,90,123,.13) !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .alert-answer-panel-documents {
border: 1px solid #c9dbea !important;
border-left: 4px solid #315f82 !important;
background: #edf5fa !important;
color: #172b3a !important;
}
/* Block Notice form rebuilt as a real responsive field grid. */
html body.cx-design-system .cx-r1-account-blocknotice .cx-blocknotice-recipient-field {
display: grid !important;
grid-template-columns: minmax(180px,230px) minmax(0,1fr) !important;
align-items: center !important;
gap: 10px 18px !important;
margin-bottom: 16px !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .cx-blocknotice-form-grid {
display: grid !important;
grid-template-columns: repeat(2,minmax(0,1fr)) !important;
gap: 16px !important;
padding: 16px !important;
border: 1px solid #dbe6ee !important;
border-radius: 12px !important;
background: #fbfdfe !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .cx-blocknotice-field {
min-width: 0 !important;
display: grid !important;
align-content: start !important;
gap: 7px !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .cx-blocknotice-field--full { grid-column: 1 / -1 !important; }
html body.cx-design-system .cx-r1-account-blocknotice .cx-blocknotice-label {
margin: 0 !important;
color: #465f74 !important;
font-size: 12px !important;
font-weight: 850 !important;
letter-spacing: .03em !important;
text-transform: uppercase !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .cx-blocknotice-control,
html body.cx-design-system .cx-r1-account-blocknotice .cx-blocknotice-field :is(.form-control,.cx-select-control,.cx-date-picker) {
width: 100% !important;
min-width: 0 !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .cx-blocknotice-switch-line {
min-height: 48px !important;
display: flex !important;
align-items: center !important;
padding: 5px 10px !important;
border: 1px solid #d7e3ec !important;
border-radius: 9px !important;
background: #fff !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .cx-blocknotice-auto-help {
margin: 0 !important;
padding: 8px 10px !important;
border-radius: 8px !important;
background: #f2f7fa !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .cx-blocknotice-message-field textarea {
min-height: 160px !important;
resize: vertical !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .cx-r1-preview-card {
margin-top: 14px !important;
}
@media (max-width: 767.98px) {
html body.cx-design-system .cx-r1-account-blocknotice .cx-blocknotice-recipient-field,
html body.cx-design-system .cx-r1-account-blocknotice .cx-blocknotice-form-grid {
grid-template-columns: minmax(0,1fr) !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .cx-blocknotice-field--full { grid-column: 1 !important; }
}
html body.cx-design-system :is(.dropdown-menu,.device-list-action-menu,.conexgo-row-action-menu,.conexgo-account-document-menu) .dropdown-item,
html body.cx-design-system :is(.dropdown-menu,.device-list-action-menu,.conexgo-row-action-menu,.conexgo-account-document-menu) .dropdown-item * {
transform: none !important;
translate: none !important;
scale: 1 !important;
animation: none !important;
transition: none !important;
}
html body.cx-design-system :is(.dropdown-menu,.device-list-action-menu,.conexgo-row-action-menu,.conexgo-account-document-menu) .dropdown-item:is(:hover,:active) {
transform: none !important;
translate: none !important;
scale: 1 !important;
margin: 0 !important;
text-indent: 0 !important;
box-shadow: none !important;
background-color: rgba(49,95,128,.10) !important;
}
/* ========================================================================== */
/* ========================================================================== */
/* Device contact read-only modal: section labels must read as real headings. */
html body.cx-design-system .cx-r1-device-contactlist .cx-device-config-readonly-label {
display: flex !important;
align-items: center !important;
gap: 7px !important;
margin: 0 0 7px !important;
color: #284d6b !important;
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1.3 !important;
}
html body.cx-design-system .cx-r1-device-contactlist .cx-device-config-readonly-label :is(i,svg) {
color: #416f91 !important;
font-weight: 700 !important;
}
html body.cx-design-system .cx-r1-device-contactlist .cx-device-config-readonly-value {
padding: 12px 14px !important;
line-height: 1.55 !important;
}
/* Header alert queue: preserve the readable workflow text, but give the alert
enough room that the device identity is never sacrificed to the status pill. */
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-dropdown {
width: 640px !important;
max-width: calc(100vw - 20px) !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-card--classic {
grid-template-columns: 46px minmax(0, 1fr) minmax(118px, auto) !important;
align-items: start !important;
column-gap: 14px !important;
row-gap: 8px !important;
padding: 13px 15px !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-card-device {
display: block !important;
overflow: visible !important;
text-overflow: clip !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
max-width: none !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side {
min-width: 118px !important;
width: auto !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side-top {
width: 100% !important;
justify-content: flex-end !important;
}
html body.cx-design-system .conexgo-header-alerts .cx-alert-workflow-status {
max-width: none !important;
white-space: nowrap !important;
}
@media (max-width: 575.98px) {
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-dropdown {
width: min(440px, calc(100vw - 12px)) !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-card--classic {
grid-template-columns: 40px minmax(0, 1fr) !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side {
grid-column: 1 / -1 !important;
width: 100% !important;
min-width: 0 !important;
flex-direction: row !important;
align-items: center !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side-top {
width: auto !important;
}
}
/* Row action menus: hard-stop every legacy hover animation on the LI, anchor,
icon and pseudo-elements. The ONLY mouse-hover change is the blue background. */
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu,
.conexgo-pagedlist-table .dropdown-menu,
.account-list-cell-name .dropdown-menu
) > li,
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu,
.conexgo-pagedlist-table .dropdown-menu,
.account-list-cell-name .dropdown-menu
) > li:is(:hover,:focus-within,:active) {
margin: 0 !important;
padding: 0 !important;
inset: auto !important;
transform: none !important;
translate: none !important;
scale: 1 !important;
animation: none !important;
transition: none !important;
filter: none !important;
}
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu,
.conexgo-pagedlist-table .dropdown-menu,
.account-list-cell-name .dropdown-menu
) .dropdown-item,
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu,
.conexgo-pagedlist-table .dropdown-menu,
.account-list-cell-name .dropdown-menu
) .dropdown-item:is(:hover,:focus,:focus-visible,:active) {
box-sizing: border-box !important;
width: 100% !important;
max-width: 100% !important;
min-height: 40px !important;
margin: 0 !important;
padding: 8px 10px !important;
border: 0 !important;
border-radius: 6px !important;
gap: 9px !important;
line-height: 1.2 !important;
letter-spacing: normal !important;
text-indent: 0 !important;
transform: none !important;
translate: none !important;
scale: 1 !important;
animation: none !important;
transition: none !important;
filter: none !important;
box-shadow: none !important;
}
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu,
.conexgo-pagedlist-table .dropdown-menu,
.account-list-cell-name .dropdown-menu
) .dropdown-item:is(:hover,:focus-visible,:active) {
background: rgba(49, 95, 128, .10) !important;
background-color: rgba(49, 95, 128, .10) !important;
background-image: none !important;
}
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu,
.conexgo-pagedlist-table .dropdown-menu,
.account-list-cell-name .dropdown-menu
) .dropdown-item:not(.text-danger),
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu,
.conexgo-pagedlist-table .dropdown-menu,
.account-list-cell-name .dropdown-menu
) .dropdown-item:not(.text-danger):is(:hover,:focus,:focus-visible,:active) {
color: #294f6d !important;
}
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu,
.conexgo-pagedlist-table .dropdown-menu,
.account-list-cell-name .dropdown-menu
) .dropdown-item.text-danger,
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu,
.conexgo-pagedlist-table .dropdown-menu,
.account-list-cell-name .dropdown-menu
) .dropdown-item.text-danger:is(:hover,:focus,:focus-visible,:active) {
color: #b34255 !important;
}
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu,
.conexgo-pagedlist-table .dropdown-menu,
.account-list-cell-name .dropdown-menu
) .dropdown-item :is(i,span,svg),
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu,
.conexgo-pagedlist-table .dropdown-menu,
.account-list-cell-name .dropdown-menu
) .dropdown-item:is(:hover,:focus,:focus-visible,:active) :is(i,span,svg) {
transform: none !important;
translate: none !important;
scale: 1 !important;
animation: none !important;
transition: none !important;
filter: none !important;
}
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu,
.conexgo-pagedlist-table .dropdown-menu,
.account-list-cell-name .dropdown-menu
) .dropdown-item::before,
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu,
.conexgo-pagedlist-table .dropdown-menu,
.account-list-cell-name .dropdown-menu
) .dropdown-item::after {
content: none !important;
display: none !important;
transform: none !important;
animation: none !important;
transition: none !important;
}
/* ========================================================================== */
/* ========================================================================== */
/* Header attention is deliberately short and restrained. It is restarted only
when a genuinely new alert/notification is detected, never on initial load. */
@keyframes cx-r1893-header-jump {
0%, 100% { transform: translateY(0) scale(1); }
18% { transform: translateY(-6px) scale(1.035); }
36% { transform: translateY(0) scale(1); }
52% { transform: translateY(-3px) scale(1.018); }
70% { transform: translateY(0) scale(1); }
}
html body.cx-design-system :is(.cx-alert-incoming-attention, .cx-header-incoming-attention) {
animation: cx-r1893-header-jump .72s cubic-bezier(.2,.8,.25,1) 2 !important;
transform-origin: center bottom !important;
}
@media (prefers-reduced-motion: reduce) {
html body.cx-design-system :is(.cx-alert-incoming-attention, .cx-header-incoming-attention) {
animation: none !important;
outline: 3px solid rgba(204,54,87,.22) !important;
outline-offset: 3px !important;
}
}
/* Alert queue: compact again, but not cramped. Text receives the space rather
than an oversized container. */
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-dropdown {
width: 570px !important;
max-width: calc(100vw - 20px) !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-dropdown-header {
padding: 13px 14px !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-header-title {
font-size: 16px !important;
line-height: 1.2 !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-header-meta {
font-size: 12.75px !important;
line-height: 1.25 !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-card--classic {
grid-template-columns: 44px minmax(0, 1fr) minmax(122px, auto) !important;
gap: 8px 12px !important;
padding: 12px 13px !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-card-title {
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1.25 !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-card-device {
font-size: 14px !important;
font-weight: 750 !important;
line-height: 1.28 !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-card-time,
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-assignment {
font-size: 12.5px !important;
line-height: 1.3 !important;
}
html body.cx-design-system .conexgo-header-alerts .cx-alert-workflow-status {
width: auto !important;
height: 31px !important;
min-width: 0 !important;
max-width: none !important;
flex: 0 0 auto !important;
gap: 6px !important;
padding: 0 10px !important;
border-radius: 999px !important;
font-size: 12.75px !important;
font-weight: 800 !important;
}
html body.cx-design-system .conexgo-header-alerts .cx-alert-workflow-status > i {
width: auto !important;
min-width: 13px !important;
font-size: 12px !important;
}
html body.cx-design-system .conexgo-header-alerts .cx-alert-workflow-status__label {
display: inline !important;
font-size: inherit !important;
font-weight: inherit !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-language {
font-size: 11.5px !important;
line-height: 1 !important;
}
/* Compact status controls inspired by the permission tiles: icon first, count
second, tooltip carries the full explanation. */
html body.cx-design-system .conexgo-alert-filterbar {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 7px !important;
padding: 8px 12px !important;
border-bottom: 1px solid #d9e4ec !important;
background: #f7fafc !important;
}
html body.cx-design-system .conexgo-alert-filter {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
min-width: 38px !important;
height: 36px !important;
padding: 0 9px !important;
border: 1px solid #cbdbe7 !important;
border-radius: 9px !important;
background: #fff !important;
color: #315f82 !important;
box-shadow: none !important;
text-decoration: none !important;
transform: none !important;
transition: background-color .12s ease, border-color .12s ease, color .12s ease !important;
}
html body.cx-design-system .conexgo-alert-filter:is(:hover,:focus-visible) {
background: #edf5fa !important;
border-color: #9fbdd2 !important;
color: #244e6d !important;
transform: none !important;
}
html body.cx-design-system .conexgo-alert-filter.is-selected {
background: #315f82 !important;
border-color: #315f82 !important;
color: #fff !important;
}
html body.cx-design-system .conexgo-alert-filter.is-pending:not(.is-selected) {
color: #9a6818 !important;
background: #fff9ed !important;
border-color: #ead19d !important;
}
html body.cx-design-system .conexgo-alert-filter.is-progress:not(.is-selected) {
color: #2f6288 !important;
background: #f0f7fc !important;
border-color: #bad4e6 !important;
}
html body.cx-design-system .conexgo-alert-filter-count {
font-size: 11.5px !important;
font-weight: 850 !important;
line-height: 1 !important;
}
/* Customer clear actions are neutral/white. Destructive meaning is not implied. */
html body.cx-design-system .conexgo-header-alerts :is(.conexgo-alert-classic-clear-all, .conexgo-alert-classic-action.is-clear) {
background: #fff !important;
color: #315f82 !important;
border: 1px solid #b9cede !important;
box-shadow: none !important;
transform: none !important;
}
html body.cx-design-system .conexgo-header-alerts :is(.conexgo-alert-classic-clear-all, .conexgo-alert-classic-action.is-clear):is(:hover,:focus-visible) {
background: #edf5fa !important;
color: #274f6d !important;
border-color: #94b6ce !important;
transform: none !important;
}
@media (max-width: 640px) {
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-dropdown {
width: min(520px, calc(100vw - 12px)) !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-card--classic {
grid-template-columns: 40px minmax(0, 1fr) !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side {
grid-column: 1 / -1 !important;
width: 100% !important;
min-width: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
}
html body.cx-design-system .conexgo-alert-filterbar {
justify-content: flex-start !important;
overflow-x: auto !important;
}
}
/* Notification cards and trigger are tooltip targets; keep the card geometry
completely still while allowing a calm, progressive background affordance. */
html body.cx-design-system .conexgo-notification-item {
transform: none !important;
transition:
background-color .40s cubic-bezier(.22, 1, .36, 1),
border-color .40s cubic-bezier(.22, 1, .36, 1),
box-shadow .40s cubic-bezier(.22, 1, .36, 1) !important;
}
html body.cx-design-system .conexgo-notification-item:is(:hover, :focus-visible) {
background: rgba(49, 95, 128, .10) !important;
box-shadow: none !important;
transform: none !important;
filter: none !important;
}
/* Row action menus: final source-of-truth typography. The previous hover size
now becomes the permanent size, while hover itself only changes background. */
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu,
.conexgo-pagedlist-table .dropdown-menu,
.account-list-cell-name .dropdown-menu
) .dropdown-item,
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu,
.conexgo-pagedlist-table .dropdown-menu,
.account-list-cell-name .dropdown-menu
) .dropdown-item:is(:hover,:focus,:focus-visible,:active) {
min-height: 42px !important;
padding: 9px 11px !important;
gap: 10px !important;
font-size: 14.25px !important;
font-weight: 650 !important;
line-height: 1.25 !important;
letter-spacing: 0 !important;
transform: none !important;
translate: none !important;
scale: 1 !important;
animation: none !important;
transition: none !important;
}
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu,
.conexgo-pagedlist-table .dropdown-menu,
.account-list-cell-name .dropdown-menu
) .dropdown-item:is(:hover,:focus-visible,:active) {
background: #edf5fb !important;
background-image: none !important;
}
html body.cx-design-system :is(
.device-list-action-menu,
.conexgo-row-action-menu,
.conexgo-account-document-menu,
.conexgo-pagedlist-table .dropdown-menu,
.account-list-cell-name .dropdown-menu
) .dropdown-item > :is(i,span[class*="fa"],svg) {
flex: 0 0 19px !important;
width: 19px !important;
min-width: 19px !important;
font-size: 14px !important;
}
/* The action arrow changes on open/close, not on hover. */
html body.cx-design-system .conexgo-row-action-toggle .conexgo-row-action-chevron {
margin-left: 5px !important;
font-size: 11px !important;
transform: rotate(0deg) !important;
transition: none !important;
}
html body.cx-design-system .conexgo-row-action-toggle[aria-expanded="true"] .conexgo-row-action-chevron {
transform: rotate(180deg) !important;
}
/* Custom selects: no hover growth, larger permanent text, dynamic chevron is
supplied by CxSelect itself. */
html body.cx-design-system .cx-custom-select-trigger {
font-size: 14px !important;
}
html body.cx-design-system .cx-custom-select-option,
html body.cx-design-system .cx-custom-select-option:is(:hover,:focus-visible,.is-active,.is-selected) {
min-height: 42px !important;
padding: 9px 12px !important;
font-size: 14px !important;
line-height: 1.3 !important;
transform: none !important;
scale: 1 !important;
transition: none !important;
}
html body.cx-design-system .cx-custom-select-option:is(:hover,:focus-visible,.is-active) {
background: #edf5fb !important;
}
html body.cx-design-system .cx-custom-select-chevron {
width: 18px !important;
min-width: 18px !important;
text-align: center !important;
}
/* Standard report row actions. Restores the familiar green pencil and blue eye
on Report > Alerts and on the dedicated Monthly Reports page. */
html body.cx-design-system .cx-report-row-action {
width: 38px !important;
height: 36px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 0 !important;
border-radius: 5px !important;
color: #fff !important;
box-shadow: none !important;
text-decoration: none !important;
transform: none !important;
}
html body.cx-design-system .cx-report-row-action--configure {
background: #78b842 !important;
}
html body.cx-design-system .cx-report-row-action--preview {
background: #3e6a99 !important;
}
html body.cx-design-system .cx-report-row-action:is(:hover,:focus-visible) {
filter: brightness(.96) !important;
transform: none !important;
}
/* Monthly Reports deliberately inherits the exact Report_List frame. Only the
right-side account selector is specific to this page. */
html body.cx-design-system .cx-monthly-report-standard-toolbar {
grid-template-columns: auto minmax(300px, 470px) !important;
align-items: end !important;
gap: 18px !important;
}
html body.cx-design-system .cx-monthly-report-standard-toolbar .report-list-back-slot {
align-self: center !important;
}
html body.cx-design-system .cx-monthly-report-toolbar-control {
width: min(470px, 100%) !important;
justify-self: end !important;
}
html body.cx-design-system .cx-monthly-report-toolbar-label {
display: block !important;
margin: 0 0 5px !important;
color: rgba(255,255,255,.88) !important;
font-size: 12px !important;
font-weight: 750 !important;
}
html body.cx-design-system .cx-monthly-report-account-context {
min-height: 46px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 7px 11px !important;
border: 1px solid rgba(255,255,255,.24) !important;
border-radius: 8px !important;
background: rgba(255,255,255,.08) !important;
color: #fff !important;
}
html body.cx-design-system .cx-monthly-report-account-context small,
html body.cx-design-system .cx-monthly-report-account-context strong {
display: block !important;
color: inherit !important;
}
html body.cx-design-system .cx-monthly-report-name-cell strong {
display: block !important;
color: #294d6a !important;
font-size: 14px !important;
}
html body.cx-design-system .cx-monthly-report-name-cell small {
display: block !important;
margin-top: 3px !important;
color: #667b8e !important;
font-size: 12.5px !important;
}
html body.cx-design-system .cx-monthly-report-recipient {
display: block !important;
line-height: 1.45 !important;
}
@media (max-width: 767.98px) {
html body.cx-design-system .cx-monthly-report-standard-toolbar {
grid-template-columns: minmax(0,1fr) !important;
}
html body.cx-design-system .cx-monthly-report-toolbar-control {
width: 100% !important;
justify-self: stretch !important;
}
}
/* Alert comments: keep the amber semantic colour but make the hierarchy and
editor feel like the other Conexgo resource panels. */
html body.cx-design-system :is(.alert-answer-comment-card,.alert-view-comments-section) {
border-radius: 10px !important;
overflow: hidden !important;
box-shadow: none !important;
}
html body.cx-design-system .alert-answer-comment-header,
html body.cx-design-system .alert-view-comments-toggle {
min-height: 52px !important;
padding: 11px 14px !important;
font-size: 14px !important;
font-weight: 800 !important;
}
html body.cx-design-system .alert-answer-comment-collapse-inner,
html body.cx-design-system .alert-view-comments-collapse-inner {
padding: 12px 14px !important;
}
html body.cx-design-system .alert-answer-comment-editor {
margin-top: 10px !important;
}
html body.cx-design-system .alert-answer-comment-editor textarea {
min-height: 110px !important;
padding: 12px 13px !important;
border-radius: 8px !important;
font-size: 14px !important;
line-height: 1.5 !important;
}
html body.cx-design-system .cx-alert-comment-entry {
padding: 8px 10px !important;
border-radius: 7px !important;
background: rgba(255,255,255,.65) !important;
}
/* Documents are green so the three alert resources have distinct semantics:
Contacts red, Emergency info blue, Documents green. */
html body.cx-design-system :is(.alert-answer-action-row, .alert-view-resource-actions) .alert-answer-toggle-documents {
border-color: #98c8a7 !important;
background: #f3faf5 !important;
color: #2f7045 !important;
}
html body.cx-design-system :is(.alert-answer-action-row, .alert-view-resource-actions) .alert-answer-toggle-documents:is(:hover,:focus-visible,.active) {
border-color: #6eae82 !important;
background: #e6f4ea !important;
color: #285e3b !important;
transform: none !important;
}
html body.cx-design-system :is(.alert-answer-action-row, .alert-view-resource-actions) .cx-alert-documents-preview-list {
border-color: #b8d9c1 !important;
border-left-color: #4b9461 !important;
background: #eef8f1 !important;
color: #245437 !important;
}
html body.cx-design-system .cx-alert-documents-preview-list .cx-alert-resource-panel-title {
color: #285e3b !important;
}
html body.cx-design-system .cx-alert-document-preview-card {
border-color: #c7e1ce !important;
}
html body.cx-design-system .cx-alert-document-preview-card:hover {
background: #f7fcf8 !important;
}
/* Client notice history: prevent compressed columns and clipped records. */
html body.cx-design-system .cx-r1-account-blocknotice .account-blocknotice-history-section {
margin-top: 18px !important;
border: 1px solid #d5e2ec !important;
border-radius: 10px !important;
background: #fff !important;
overflow: hidden !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .account-blocknotice-history-toggle {
min-height: 50px !important;
padding: 10px 13px !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .account-blocknotice-history-table-wrapper {
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
overflow-y: visible !important;
padding: 0 10px 10px !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .account-blocknotice-history-table {
width: 100% !important;
min-width: 790px !important;
table-layout: auto !important;
margin: 0 !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .account-blocknotice-history-table th,
html body.cx-design-system .cx-r1-account-blocknotice .account-blocknotice-history-table td {
padding: 10px 12px !important;
vertical-align: middle !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
font-size: 13px !important;
line-height: 1.35 !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .account-blocknotice-history-table th:first-child,
html body.cx-design-system .cx-r1-account-blocknotice .account-blocknotice-history-table td:first-child {
min-width: 230px !important;
}
/* Manual geofence: helper text gets its own full row; the four tools get a
separate balanced toolbar instead of crushing the copy into a tiny column. */
html body.cx-design-system .mud-dialog.cx-r1-device-geofence .device-geofence-map-drawing-panel {
display: grid !important;
grid-template-columns: minmax(0,1fr) !important;
gap: 8px !important;
padding: 10px 11px !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence .device-geofence-map-draw-hint {
width: 100% !important;
font-size: 12.25px !important;
line-height: 1.4 !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence .device-geofence-map-draw-toolbar {
width: 100% !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0,1fr)) !important;
gap: 7px !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence .device-geofence-map-tool {
width: 100% !important;
min-width: 0 !important;
min-height: 38px !important;
padding: 7px 8px !important;
justify-content: center !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence .device-geofence-open-draw-button {
min-height: 40px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 8px 13px !important;
border: 1px solid #315f82 !important;
border-radius: 7px !important;
background: #315f82 !important;
color: #fff !important;
font-size: 13px !important;
font-weight: 750 !important;
box-shadow: none !important;
transform: none !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-geofence .device-geofence-open-draw-button:is(:hover,:focus-visible) {
background: #294f6c !important;
border-color: #294f6c !important;
transform: none !important;
}
@media (max-width: 767.98px) {
html body.cx-design-system .mud-dialog.cx-r1-device-geofence .device-geofence-map-draw-toolbar {
grid-template-columns: repeat(2, minmax(0,1fr)) !important;
}
}
/* Profile dropdown follows the same no-motion menu contract. */
html body.cx-design-system .conexgo-profile-dropdown .dropdown-item,
html body.cx-design-system .conexgo-profile-dropdown .dropdown-item:is(:hover,:focus,:focus-visible,:active) {
min-height: 42px !important;
padding: 9px 11px !important;
gap: 10px !important;
font-size: 14px !important;
font-weight: 650 !important;
line-height: 1.25 !important;
transform: none !important;
translate: none !important;
scale: 1 !important;
transition: none !important;
animation: none !important;
box-shadow: none !important;
}
html body.cx-design-system .conexgo-profile-dropdown .dropdown-item:is(:hover,:focus-visible,:active) {
background: #edf5fb !important;
}
/* Bootstrap supplies the row-action chevron through ::after. Reflect the open
state there so we do not render a second icon in the button. */
html body.cx-design-system :is(
.account-list-cell-name .conexgo-row-action-toggle,
.device-list-action-group .device-list-action-toggle
)::after {
transform: translate(-50%, -50%) rotate(0deg) !important;
transition: none !important;
}
html body.cx-design-system :is(
.account-list-cell-name .conexgo-row-action-toggle,
.device-list-action-group .device-list-action-toggle
)[aria-expanded="true"]::after {
transform: translate(-50%, -50%) rotate(180deg) !important;
}
html body.cx-design-system .report-list-card .conexgo-pagedlist-table {
width: 100% !important;
table-layout: fixed !important;
border-collapse: separate !important;
border-spacing: 0 !important;
}
html body.cx-design-system .report-list-card .conexgo-pagedlist-table > :is(thead, tbody) > tr > :is(th, td) {
vertical-align: middle !important;
padding: 13px 15px !important;
border-right: 1px solid #d8e3eb !important;
border-bottom: 1px solid #d8e3eb !important;
overflow-wrap: anywhere !important;
}
html body.cx-design-system .report-list-card .conexgo-pagedlist-table > :is(thead, tbody) > tr > :is(th, td):last-child {
border-right: 0 !important;
}
html body.cx-design-system .report-list-card .conexgo-pagedlist-table > thead > tr > th:nth-child(1),
html body.cx-design-system .report-list-card .conexgo-pagedlist-table > tbody > tr > td:nth-child(1) {
width: 13% !important;
min-width: 135px !important;
text-align: center !important;
}
html body.cx-design-system .report-list-card .conexgo-pagedlist-table > thead > tr > th:nth-child(2),
html body.cx-design-system .report-list-card .conexgo-pagedlist-table > tbody > tr > td:nth-child(2) {
width: 28% !important;
}
html body.cx-design-system .report-list-card .conexgo-pagedlist-table > thead > tr > th:nth-child(3),
html body.cx-design-system .report-list-card .conexgo-pagedlist-table > tbody > tr > td:nth-child(3) {
width: 22% !important;
}
html body.cx-design-system .report-list-card .conexgo-pagedlist-table > thead > tr > th:nth-child(4),
html body.cx-design-system .report-list-card .conexgo-pagedlist-table > tbody > tr > td:nth-child(4) {
width: 15% !important;
}
html body.cx-design-system .report-list-card .conexgo-pagedlist-table > thead > tr > th:nth-child(5),
html body.cx-design-system .report-list-card .conexgo-pagedlist-table > tbody > tr > td:nth-child(5) {
width: 22% !important;
}
html body.cx-design-system .cx-report-standard-action {
width: 42px !important;
min-width: 42px !important;
height: 38px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #fff !important;
border: 0 !important;
border-radius: 4px !important;
transform: none !important;
transition: background-color .15s ease, box-shadow .15s ease !important;
}
html body.cx-design-system .cx-report-standard-action--edit { background: #78b842 !important; }
html body.cx-design-system .cx-report-standard-action--preview { background: #3e6a99 !important; }
html body.cx-design-system .cx-report-standard-action:hover,
html body.cx-design-system .cx-report-standard-action:focus-visible {
transform: none !important;
filter: none !important;
box-shadow: 0 2px 7px rgba(38, 70, 96, .14) !important;
}
html body.cx-design-system .cx-report-schedule-value {
max-width: 100% !important;
color: #2c4c6c !important;
font-size: 13px !important;
font-weight: 650 !important;
line-height: 1.4 !important;
white-space: normal !important;
}
html body.cx-design-system .cx-report-muted {
color: #6b7e90 !important;
font-style: italic !important;
}
html body.cx-design-system .report-subscribe-account-selector,
html body.cx-design-system .report-preview-account-selector {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 8px !important;
margin: 0 0 14px !important;
padding: 12px 14px !important;
border: 1px solid #c8d9e6 !important;
border-left: 4px solid #3e6a99 !important;
border-radius: 10px !important;
background: #f7fbfe !important;
}
html body.cx-design-system :is(.report-subscribe-account-selector, .report-preview-account-selector) > label {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
margin: 0 !important;
color: #294f70 !important;
font-size: 13px !important;
font-weight: 750 !important;
}
html body.cx-design-system .report-subscribe-account-selector > small {
color: #6b7e90 !important;
font-size: 12px !important;
line-height: 1.4 !important;
}
/* Block Notice history: clear, stable columns instead of a visually floating row. */
html body.cx-design-system .cx-r1-account-blocknotice .account-blocknotice-history-table-wrapper {
overflow-x: auto !important;
border: 1px solid #d4e0e9 !important;
border-radius: 10px !important;
background: #fff !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .account-blocknotice-history-table {
width: 100% !important;
min-width: 850px !important;
table-layout: fixed !important;
border-collapse: separate !important;
border-spacing: 0 !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .account-blocknotice-history-table > :is(thead, tbody) > tr > :is(th, td) {
padding: 13px 14px !important;
vertical-align: middle !important;
border-right: 1px solid #d7e3eb !important;
border-bottom: 1px solid #d7e3eb !important;
white-space: normal !important;
overflow-wrap: anywhere !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .account-blocknotice-history-table > :is(thead, tbody) > tr > :is(th, td):last-child {
border-right: 0 !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .account-blocknotice-history-table > thead > tr > th:nth-child(1),
html body.cx-design-system .cx-r1-account-blocknotice .account-blocknotice-history-table > tbody > tr > td:nth-child(1) { width: 28% !important; }
html body.cx-design-system .cx-r1-account-blocknotice .account-blocknotice-history-table > thead > tr > th:nth-child(2),
html body.cx-design-system .cx-r1-account-blocknotice .account-blocknotice-history-table > tbody > tr > td:nth-child(2) { width: 30% !important; }
html body.cx-design-system .cx-r1-account-blocknotice .account-blocknotice-history-table > thead > tr > th:nth-child(3),
html body.cx-design-system .cx-r1-account-blocknotice .account-blocknotice-history-table > tbody > tr > td:nth-child(3) { width: 17% !important; text-align:center !important; }
html body.cx-design-system .cx-r1-account-blocknotice .account-blocknotice-history-table > thead > tr > th:nth-child(4),
html body.cx-design-system .cx-r1-account-blocknotice .account-blocknotice-history-table > tbody > tr > td:nth-child(4) { width: 25% !important; }
@media (max-width: 900px) {
html body.cx-design-system .report-list-card .conexgo-pagedlist-table {
min-width: 900px !important;
}
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-dropdown {
width: 560px !important;
max-width: calc(100vw - 18px) !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-filterbar {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
align-items: center !important;
gap: 10px !important;
padding: 9px 12px !important;
background: #f7fafc !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-filterbar-label {
min-width: 0 !important;
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
color: #5a7084 !important;
font-size: 12.5px !important;
font-weight: 750 !important;
letter-spacing: .01em !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-filterbar-label > i {
color: #315f82 !important;
font-size: 12px !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-filterbar-actions {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 7px !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-filter {
min-width: 44px !important;
height: 38px !important;
padding: 0 9px !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-filter > i {
width: 15px !important;
min-width: 15px !important;
font-size: 13px !important;
text-align: center !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-filter.is-done:not(.is-selected) {
color: #327545 !important;
background: #f1f9f3 !important;
border-color: #b9dac1 !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-list--classic {
padding: 8px 0 2px !important;
background: #f8fafc !important;
}
/* Keep Nancy's exact red/blue card border colour rules from site.css. */
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-card--classic {
width: calc(100% - 18px) !important;
margin: 0 9px 8px !important;
grid-template-columns: 42px minmax(0, 1fr) minmax(124px, auto) !important;
align-items: start !important;
column-gap: 12px !important;
row-gap: 7px !important;
padding: 11px 12px !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-card--classic + .conexgo-alert-card--classic {
margin-top: 0 !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-device-media {
align-self: start !important;
margin-top: 1px !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-copy {
display: grid !important;
align-content: start !important;
gap: 2px !important;
min-width: 0 !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-card-title {
font-size: 14.5px !important;
line-height: 1.22 !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-card-device {
margin-top: 0 !important;
font-size: 14.25px !important;
line-height: 1.28 !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-card-time {
font-size: 12.5px !important;
line-height: 1.25 !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-assignment {
margin-top: 7px !important;
padding-top: 6px !important;
display: flex !important;
align-items: baseline !important;
flex-wrap: wrap !important;
gap: 3px 6px !important;
font-size: 12px !important;
line-height: 1.25 !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-assignment strong {
font-size: 12.5px !important;
line-height: inherit !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side {
min-width: 124px !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.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side-top {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
flex-wrap: wrap !important;
gap: 6px !important;
width: 100% !important;
}
html body.cx-design-system .conexgo-header-alerts .cx-alert-workflow-status {
height: 30px !important;
padding: 0 9px !important;
font-size: 12.5px !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-language {
min-height: 24px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 3px 6px !important;
font-size: 11px !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-see-all--classic {
width: 100% !important;
min-height: 44px !important;
margin: 0 !important;
padding: 9px 12px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 7px !important;
box-sizing: border-box !important;
border-top: 1px solid #e3ebf2 !important;
background: #fbfcfd !important;
color: #2c4c6c !important;
font-size: 12.5px !important;
font-weight: 750 !important;
text-decoration: none !important;
transform: none !important;
transition:
background-color .38s cubic-bezier(.22, 1, .36, 1),
color .32s ease,
box-shadow .38s cubic-bezier(.22, 1, .36, 1) !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-see-all--classic:is(:hover, :focus-visible) {
background: #f1f6fa !important;
color: #2c4c6c !important;
box-shadow: none !important;
text-decoration: none !important;
transform: none !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-see-all--classic > i {
font-size: 10.5px !important;
}
@media (max-width: 640px) {
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-dropdown {
width: min(520px, calc(100vw - 10px)) !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-filterbar {
grid-template-columns: minmax(0, 1fr) !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-filterbar-actions {
width: 100% !important;
justify-content: flex-start !important;
overflow-x: auto !important;
padding-bottom: 2px !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-card--classic {
grid-template-columns: 40px minmax(0, 1fr) !important;
width: calc(100% - 12px) !important;
margin-left: 6px !important;
margin-right: 6px !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side {
grid-column: 2 !important;
width: 100% !important;
min-width: 0 !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side-top {
width: auto !important;
justify-content: flex-start !important;
}
}
/* ========================================================================== */
/* ========================================================================== */
/*
PagedList/table columns can legitimately recompute their intrinsic width
when a search reduces the result set. Row action controls must not inherit
that width change: the action button and its menu keep a predictable desktop
footprint and the table scrolls horizontally when the viewport is tighter.
*/
@media (min-width: 1200px) {
html body.cx-design-system .device-list-data-row .device-list-action-group {
flex: 0 0 420px !important;
width: 420px !important;
min-width: 420px !important;
max-width: 420px !important;
}
html body.cx-design-system :is(
.device-list-action-menu,
.device-list-action-menu.show
) {
width: 420px !important;
min-width: 420px !important;
max-width: 420px !important;
}
html body.cx-design-system .account-list-cell-name .conexgo-row-action-group {
flex: 0 0 400px !important;
width: 400px !important;
min-width: 400px !important;
max-width: 400px !important;
}
html body.cx-design-system .account-list-cell-name :is(
.conexgo-row-action-menu,
.conexgo-row-action-menu.show
) {
width: 400px !important;
min-width: 400px !important;
max-width: 400px !important;
}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
html body.cx-design-system .device-list-data-row .device-list-action-group,
html body.cx-design-system .account-list-cell-name .conexgo-row-action-group {
flex: 0 0 360px !important;
width: 360px !important;
min-width: 360px !important;
max-width: 360px !important;
}
html body.cx-design-system :is(
.device-list-action-menu,
.device-list-action-menu.show,
.account-list-cell-name .conexgo-row-action-menu,
.account-list-cell-name .conexgo-row-action-menu.show
) {
width: 360px !important;
min-width: 360px !important;
max-width: 360px !important;
}
}
/* Generic row-action menus used by other list pages also keep a stable width.
Device and Account use the more specific values above. */
@media (min-width: 992px) {
html body.cx-design-system .conexgo-pagedlist-table :is(
.conexgo-row-action-menu,
.conexgo-row-action-menu.show
) {
min-width: 360px !important;
}
}
/* AlertQueue: statuses belong to the card instead of floating like pills. */
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side {
min-width: 138px !important;
max-width: 154px !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side-top {
flex-wrap: nowrap !important;
gap: 7px !important;
}
html body.cx-design-system .conexgo-header-alerts .cx-alert-workflow-status {
min-height: 30px !important;
height: 30px !important;
padding: 0 10px !important;
border-radius: 8px !important;
box-shadow: none !important;
white-space: nowrap !important;
font-size: 12.5px !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-language {
min-height: 30px !important;
height: 30px !important;
border-radius: 7px !important;
padding: 0 8px !important;
white-space: nowrap !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-card--classic {
grid-template-columns: 42px minmax(0,1fr) 148px !important;
align-items: start !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-filter {
border-radius: 8px !important;
}
@media (max-width:640px) {
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-card--classic {
grid-template-columns: 40px minmax(0,1fr) !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side {
max-width:none !important;
}
}
/* Alert resource selectors: inactive is light, selected is deliberately dark.
Lower content panels keep their semantic light background. */
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .alert-answer-toggle-danger.active,
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .alert-answer-toggle-danger[aria-expanded="true"] {
background:#b83a32 !important;
border-color:#b83a32 !important;
color:#fff !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .alert-answer-toggle-info.active,
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .alert-answer-toggle-info[aria-expanded="true"] {
background:#315a7b !important;
border-color:#315a7b !important;
color:#fff !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .alert-answer-toggle-documents.active,
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .alert-answer-toggle-documents[aria-expanded="true"] {
background:#477b58 !important;
border-color:#477b58 !important;
color:#fff !important;
box-shadow:none !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) :is(.alert-answer-toggle-danger,.alert-answer-toggle-info,.alert-answer-toggle-documents).active :is(i,span),
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) :is(.alert-answer-toggle-danger,.alert-answer-toggle-info,.alert-answer-toggle-documents)[aria-expanded="true"] :is(i,span) {
color:#fff !important;
}
/* Monthly report: same button geometry and table rhythm as Report_List. */
html body.cx-design-system .cx-monthly-report-row-actions {
display:inline-flex !important;
align-items:center !important;
gap:8px !important;
}
html body.cx-design-system .cx-monthly-report-row-action {
width:42px !important;
min-width:42px !important;
max-width:42px !important;
height:42px !important;
min-height:42px !important;
padding:0 !important;
border-radius:5px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
font-size:14px !important;
}
html body.cx-design-system .cx-monthly-report-row-action > i { margin:0 !important; }
html body.cx-design-system .report-list-card .conexgo-pagedlist-table {
width:100% !important;
min-width:1080px !important;
table-layout:fixed !important;
}
html body.cx-design-system .report-list-card .conexgo-pagedlist-table > thead > tr > th {
padding:14px 16px !important;
vertical-align:middle !important;
white-space:normal !important;
line-height:1.22 !important;
}
html body.cx-design-system .report-list-card .conexgo-pagedlist-table > tbody > tr > td {
padding:15px 16px !important;
vertical-align:middle !important;
line-height:1.35 !important;
}
html body.cx-design-system .cx-monthly-report-name-cell strong { line-height:1.25 !important; }
html body.cx-design-system .cx-monthly-report-name-cell small { margin-top:5px !important; line-height:1.38 !important; }
/* Every standard list gets Device_List's darker, still subtle row hover. */
html body.cx-design-system :is(.table,.conexgo-pagedlist-table) > tbody > tr:hover > td,
html body.cx-design-system :is(.table,.conexgo-pagedlist-table) > tbody > tr:focus-within > td {
background:#dfeaf3 !important;
}
/* Device Add/Edit: one aligned form axis, consistent read-only surfaces. */
html body.cx-design-system .mud-dialog.cx-r1-device-addedit .row {
align-items:center !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-addedit :is(.form-label,label[class*="col-"]) {
line-height:1.25 !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-addedit :is(.form-control,.cx-select-control,.cx-date-picker,.cx-device-readonly-multiline) {
min-height:52px !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-addedit :is(.form-control[readonly],.form-control:disabled,.cx-device-readonly-multiline) {
background:#f5f9fc !important;
border-color:#c8dbe8 !important;
color:#263f58 !important;
}
html body.cx-design-system .mud-dialog.cx-r1-device-addedit .form-text {
margin-top:6px !important;
line-height:1.35 !important;
}
/* Location / Check-in configuration modals use the same compact enterprise rhythm. */
html body.cx-design-system :is(.mud-dialog.cx-r1-device-locationservice,.mud-dialog.cx-r1-device-checkin) fieldset,
html body.cx-design-system :is(.mud-dialog.cx-r1-device-locationservice,.mud-dialog.cx-r1-device-checkin) .cx-modal-group-v21 {
margin-bottom:16px !important;
}
html body.cx-design-system :is(.mud-dialog.cx-r1-device-locationservice,.mud-dialog.cx-r1-device-checkin) :is(.form-control,.cx-select-control,.cx-date-picker) {
min-height:50px !important;
}
html body.cx-design-system .cx-awaiting-confirmation-polished {
display:flex !important;
align-items:center !important;
gap:10px !important;
min-height:54px !important;
padding:11px 14px !important;
border:1px solid #d7e2ea !important;
border-left:4px solid #d49a2f !important;
border-radius:9px !important;
background:#fff9ec !important;
color:#6d541e !important;
font-weight:700 !important;
}
html body.cx-design-system .cx-awaiting-confirmation-polished::before {
content:"\f017";
font-family:"Font Awesome 6 Free";
font-weight:900;
color:#b77a13;
}
/* Date controls: keep icon integrated and prevent the calendar button from floating. */
html body.cx-design-system :is(.cx-date-picker,.cx-datetime-picker,.cx-time-picker) {
align-items:stretch !important;
}
html body.cx-design-system :is(.cx-date-picker,.cx-datetime-picker,.cx-time-picker) :is(button,.btn) {
min-width:48px !important;
border-radius:0 8px 8px 0 !important;
}
/* Alert page filter chips: clean spacing and enough text room for Check-in/Atlas. */
html body.cx-design-system .alert-list-card :is(.cx-alert-filter-option,.conexgo-alert-filter-option,.form-check-inline) {
min-height:42px !important;
padding:7px 11px !important;
margin:0 7px 7px 0 !important;
border-radius:8px !important;
}
/* Emergency review: one empty state only; JS tags the redundant legacy message. */
html body.cx-design-system .cx-emergency-review-duplicate-empty { display:none !important; }
/* Report preview: give the report itself more breathing room without making the dialog huge. */
html body.cx-design-system .mud-dialog .report-preview-content,
html body.cx-design-system .mud-dialog .cx-report-preview-content {
width:100% !important;
max-width:none !important;
}
html body.cx-design-system .mud-dialog .report-preview-content table,
html body.cx-design-system .mud-dialog .cx-report-preview-content table {
width:100% !important;
}
html body.cx-design-system .mud-dialog .report-preview-content th,
html body.cx-design-system .mud-dialog .report-preview-content td,
html body.cx-design-system .mud-dialog .cx-report-preview-content th,
html body.cx-design-system .mud-dialog .cx-report-preview-content td {
padding:11px 13px !important;
vertical-align:top !important;
}
/* Device map top status area: compact, aligned, and clearly separated from the map. */
html body.cx-design-system .device-map-wifi-location {
min-height:42px !important;
margin:8px 0 !important;
padding:9px 12px !important;
border:1px solid #d2e0ea !important;
border-radius:8px !important;
background:#f8fbfd !important;
}
html body.cx-design-system :is(.device-map-toolbar,.device-map-status-toolbar,.device-location-toolbar) {
min-height:58px !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
padding:9px 12px !important;
border:1px solid #d4e0e8 !important;
border-radius:9px !important;
background:#f6f9fb !important;
}
/* Block notice: keep the two-column intent but align related fields. */
html body.cx-design-system .cx-r1-account-blocknotice .cx-blocknotice-form-grid {
align-items:start !important;
column-gap:20px !important;
row-gap:18px !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .cx-blocknotice-field {
min-width:0 !important;
}
html body.cx-design-system .cx-r1-account-blocknotice .cx-blocknotice-label {
margin-bottom:7px !important;
}
/* ========================================================================== */
/* ========================================================================== */
@media (min-width: 992px) {
html body.cx-design-system.app.sidebar-mini.sidenav-toggled .app-sidebar-shell,
html body.cx-design-system.sidebar-mini.sidenav-toggled .app-sidebar-shell {
width: 80px !important;
min-width: 80px !important;
max-width: 80px !important;
overflow: visible !important;
pointer-events: auto !important;
}
html body.cx-design-system.app.sidebar-mini.sidenav-toggled .app-sidebar-shell .app-sidebar-modern,
html body.cx-design-system.sidebar-mini.sidenav-toggled .app-sidebar-shell .app-sidebar-modern {
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
transform: none !important;
}
}
/* Account action trigger is a table-cell resident. The menu can overlay, but
the trigger can never make the NAME column wider than the column itself. */
html body.cx-design-system .account-list-cell-name {
min-width: 0 !important;
}
html body.cx-design-system .account-list-cell-name .conexgo-row-action-group {
display: flex !important;
flex: 1 1 auto !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
}
html body.cx-design-system .account-list-cell-name .account-list-name-button {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: calc(100% - 48px) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
text-align: left !important;
}
html body.cx-design-system .account-list-cell-name .conexgo-row-action-toggle {
flex: 0 0 48px !important;
width: 48px !important;
min-width: 48px !important;
max-width: 48px !important;
}
@media (min-width: 992px) {
html body.cx-design-system .account-list-cell-name :is(.conexgo-row-action-menu,.conexgo-row-action-menu.show) {
width: min(400px, calc(100vw - 32px)) !important;
min-width: min(320px, calc(100vw - 32px)) !important;
max-width: calc(100vw - 32px) !important;
}
}
@media (max-width: 991.98px) {
html body.cx-design-system .account-list-cell-name .account-list-name-button {
max-width: calc(100% - 44px) !important;
}
html body.cx-design-system .account-list-cell-name .conexgo-row-action-toggle {
flex-basis: 44px !important;
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
}
}
/* AlertQueue: long identities get room to breathe; workflow/language metadata
is visually subordinate and never collides with the device name. */
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-card--classic {
grid-template-columns: 44px minmax(0, 1fr) 132px !important;
gap: 10px 12px !important;
padding: 12px 13px !important;
border-radius: 11px !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
html body.cx-design-system .conexgo-header-alerts :is(.conexgo-alert-classic-copy,.conexgo-alert-card-title-row,.conexgo-alert-classic-assignment) {
min-width: 0 !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-card-title {
min-width: 0 !important;
overflow-wrap: anywhere !important;
word-break: normal !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-card-device {
min-width: 0 !important;
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
overflow: hidden !important;
overflow-wrap: anywhere !important;
white-space: normal !important;
line-height: 1.32 !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side {
width: 132px !important;
min-width: 0 !important;
max-width: 132px !important;
align-items: stretch !important;
gap: 7px !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side-top {
width: 100% !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
align-items: stretch !important;
gap: 6px !important;
}
html body.cx-design-system .conexgo-header-alerts .cx-alert-workflow-status {
width: 100% !important;
max-width: 100% !important;
height: 30px !important;
justify-content: flex-start !important;
gap: 6px !important;
padding: 0 9px !important;
border-radius: 8px !important;
overflow: hidden !important;
box-shadow: none !important;
font-size: 11.75px !important;
font-weight: 750 !important;
}
html body.cx-design-system .conexgo-header-alerts .cx-alert-workflow-status__label {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
html body.cx-design-system .conexgo-header-alerts .cx-alert-workflow-status--pending,
html body.cx-design-system .conexgo-header-alerts .cx-alert-workflow-status.is-pending {
color: #7a5a17 !important;
background: #fff8e8 !important;
border-color: #e6c873 !important;
}
html body.cx-design-system .conexgo-header-alerts .cx-alert-workflow-status--in-progress,
html body.cx-design-system .conexgo-header-alerts .cx-alert-workflow-status.is-in-progress {
color: #285876 !important;
background: #edf5fb !important;
border-color: #bad2e2 !important;
}
html body.cx-design-system .conexgo-header-alerts .cx-alert-workflow-status--done,
html body.cx-design-system .conexgo-header-alerts .cx-alert-workflow-status.is-completed {
color: #326442 !important;
background: #eff8f1 !important;
border-color: #b9d8c1 !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-language {
width: fit-content !important;
max-width: 100% !important;
min-height: 25px !important;
height: 25px !important;
padding: 0 8px !important;
border: 1px solid #cbd9e4 !important;
border-radius: 7px !important;
background: #f7fafc !important;
color: #49647b !important;
font-size: 10.75px !important;
font-weight: 700 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
@media (max-width: 640px) {
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-card--classic {
grid-template-columns: 40px minmax(0, 1fr) !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side {
grid-column: 2 !important;
width: 100% !important;
max-width: none !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side-top {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
}
html body.cx-design-system .conexgo-header-alerts .cx-alert-workflow-status {
width: auto !important;
max-width: min(100%, 190px) !important;
}
}
/* Resource cards follow the current Conexgo dialog language. Open state is an
actual expanded state, not a transient focus/hover state. */
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .alert-answer-action-row,
html body.cx-design-system .cx-dialog--alert-view .alert-view-resource-actions {
gap: 10px !important;
align-items: start !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) :is(.alert-answer-toggle-danger,.alert-answer-toggle-info,.alert-answer-toggle-documents) {
min-height: 56px !important;
padding: 10px 14px !important;
border-radius: 10px !important;
box-shadow: 0 2px 8px rgba(39, 67, 92, .04) !important;
font-weight: 800 !important;
line-height: 1.25 !important;
transition: background-color .14s ease, border-color .14s ease, color .14s ease !important;
transform: none !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) :is(.alert-answer-toggle-danger,.alert-answer-toggle-info,.alert-answer-toggle-documents):hover {
transform: none !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .alert-answer-toggle-danger[aria-expanded="true"],
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .alert-answer-toggle-danger.active {
background: #9f3732 !important;
border-color: #9f3732 !important;
color: #fff !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .alert-answer-toggle-info[aria-expanded="true"],
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .alert-answer-toggle-info.active {
background: #2f5878 !important;
border-color: #2f5878 !important;
color: #fff !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .alert-answer-toggle-documents[aria-expanded="true"],
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .alert-answer-toggle-documents.active {
background: #3f704f !important;
border-color: #3f704f !important;
color: #fff !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .cx-alert-resource-detail,
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) :is(.alert-answer-panel-danger,.alert-answer-panel-info) {
grid-column: 1 / -1 !important;
width: 100% !important;
margin: 0 !important;
padding: 15px 17px !important;
border-radius: 12px !important;
box-shadow: 0 5px 18px rgba(39, 67, 92, .055) !important;
line-height: 1.5 !important;
overflow: hidden !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .cx-alert-resource-body,
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) :is(.alert-answer-panel-danger,.alert-answer-panel-info) > div:last-child {
margin-top: 9px !important;
padding: 12px 13px !important;
border: 1px solid rgba(95, 122, 146, .16) !important;
border-radius: 9px !important;
background: rgba(255, 255, 255, .72) !important;
color: #263f58 !important;
overflow-wrap: anywhere !important;
}
/* Alert maps are proper modern panels. Geofence geometry below is rendered only
when the alert references a real DeviceAlertSetting. */
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) :is(.alert-answer-map-wrap,.alert-view-map-wrap) {
margin-top: 12px !important;
border: 1px solid #d5e1ea !important;
border-radius: 12px !important;
background: #fff !important;
box-shadow: 0 5px 18px rgba(39, 67, 92, .055) !important;
overflow: hidden !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) :is(.alert-answer-map-toolbar,.alert-view-map-toolbar) {
min-height: 55px !important;
padding: 9px 12px 9px 15px !important;
border-bottom: 1px solid #dbe5ed !important;
background: #f7fafc !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) :is(.alert-answer-map-canvas,.alert-view-map-canvas) {
width: 100% !important;
height: clamp(320px, 42vh, 460px) !important;
min-height: 320px !important;
background: #eef3f6 !important;
}
html body.cx-design-system .cx-alert-geofence-context {
display: grid !important;
grid-template-columns: 38px minmax(0, 1fr) !important;
align-items: center !important;
gap: 10px !important;
padding: 10px 14px !important;
border-bottom: 1px solid #d9e5ed !important;
background: #edf5fa !important;
color: #294c68 !important;
}
html body.cx-design-system .cx-alert-geofence-context-icon {
width: 36px !important;
height: 36px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid #bfd4e2 !important;
border-radius: 9px !important;
background: #fff !important;
color: #315a7b !important;
}
html body.cx-design-system .cx-alert-geofence-context-copy {
min-width: 0 !important;
display: grid !important;
gap: 2px !important;
}
html body.cx-design-system .cx-alert-geofence-context-copy strong {
font-size: 12.75px !important;
font-weight: 850 !important;
}
html body.cx-design-system .cx-alert-geofence-context-copy span {
color: #60778a !important;
font-size: 11.75px !important;
overflow-wrap: anywhere !important;
}
/* Emergency-contact review: read-only data uses the same field/card language as
the rest of the modern dialogs, with actual readable text and no legacy slab. */
html body.cx-design-system .cx-emergency-review-dialog .cx-emergency-review-current-grid {
gap: 14px !important;
align-items: stretch !important;
}
html body.cx-design-system .cx-emergency-review-dialog .cx-emergency-review-readonly {
min-width: 0 !important;
padding: 14px 15px !important;
border: 1px solid #d8e3eb !important;
border-radius: 11px !important;
background: #fbfdfe !important;
box-shadow: 0 4px 14px rgba(39, 67, 92, .045) !important;
}
html body.cx-design-system .cx-emergency-review-dialog .cx-emergency-review-readonly-value {
min-height: 112px !important;
margin-top: 10px !important;
padding: 12px 13px !important;
border: 1px solid #dbe5ed !important;
border-radius: 9px !important;
background: #fff !important;
color: #2d465d !important;
line-height: 1.52 !important;
white-space: pre-wrap !important;
overflow-wrap: anywhere !important;
overflow-x: auto !important;
}
html body.cx-design-system .cx-emergency-review-dialog .cx-emergency-review-status {
border-radius: 10px !important;
box-shadow: none !important;
}
@media (max-width: 720px) {
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .alert-answer-action-row,
html body.cx-design-system .cx-dialog--alert-view .alert-view-resource-actions {
grid-template-columns: minmax(0, 1fr) !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) :is(.alert-answer-toggle-danger,.alert-answer-toggle-info,.alert-answer-toggle-documents) {
width: 100% !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) :is(.alert-answer-map-canvas,.alert-view-map-canvas) {
height: clamp(300px, 45vh, 400px) !important;
min-height: 300px !important;
}
}
/* ========================================================================== */
/* ========================================================================== */
html body.cx-design-system .cx-visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Alert popup: pending response becomes a universal yellow bell. */
html body.cx-design-system .conexgo-header-alerts .cx-alert-bell-status,
html body.cx-design-system .conexgo-header-alerts .cx-alert-workflow-status.cx-alert-bell-status {
width: 36px !important;
min-width: 36px !important;
max-width: 36px !important;
height: 30px !important;
min-height: 30px !important;
padding: 0 !important;
justify-content: center !important;
align-items: center !important;
gap: 0 !important;
border-radius: 9px !important;
border: 1px solid #e1c15f !important;
background: linear-gradient(180deg, #fff9e8 0%, #fff1c9 100%) !important;
color: #a56a00 !important;
box-shadow: 0 1px 0 rgba(255,255,255,.65) inset !important;
overflow: hidden !important;
}
html body.cx-design-system .conexgo-header-alerts .cx-alert-bell-status .cx-alert-workflow-status__label {
display: none !important;
}
html body.cx-design-system .conexgo-header-alerts .cx-alert-bell-status__icon,
html body.cx-design-system .conexgo-header-alerts .cx-alert-bell-status > i,
html body.cx-design-system .conexgo-header-alerts .cx-alert-workflow-status.cx-alert-bell-status > i {
font-size: 13px !important;
line-height: 1 !important;
animation: cx-r1883981-bell-bounce 1.05s ease-in-out infinite !important;
transform-origin: top center !important;
}
@keyframes cx-r1883981-bell-bounce {
0%, 100% { transform: translateY(0) rotate(0deg); }
15% { transform: translateY(-2px) rotate(-10deg); }
30% { transform: translateY(0) rotate(10deg); }
45% { transform: translateY(-1px) rotate(-8deg); }
60% { transform: translateY(0) rotate(8deg); }
75% { transform: translateY(-1px) rotate(-4deg); }
}
/* Alert popup: language is abbreviated FR / ENG. */
html body.cx-design-system .conexgo-header-alerts .cx-alert-language-badge--short,
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-language {
min-width: 44px !important;
width: auto !important;
max-width: 56px !important;
justify-content: center !important;
text-align: center !important;
padding: 0 10px !important;
font-size: 10.9px !important;
font-weight: 800 !important;
letter-spacing: .02em !important;
}
/* Group page: once a unit is selected, its yellow highlight always wins,
even while hovering. */
html body.cx-design-system.cx-group-selection-active :is(tr, td, li, a, div, .list-group-item, .mud-list-item, .card)[data-cx-group-selected="true"],
html body.cx-design-system.cx-group-selection-active :is(tr, td, li, a, div, .list-group-item, .mud-list-item, .card)[data-cx-group-selected="true"]:hover,
html body.cx-design-system.cx-group-selection-active :is(tr, td, li, a, div, .list-group-item, .mud-list-item, .card)[data-cx-group-selected="true"]:focus,
html body.cx-design-system.cx-group-selection-active :is(tr, td, li, a, div, .list-group-item, .mud-list-item, .card)[data-cx-group-selected="true"]:focus-visible {
background: #ffe16a !important;
border-color: #ddb230 !important;
color: #233f57 !important;
box-shadow: inset 0 0 0 1px rgba(176, 133, 0, .18) !important;
}
html body.cx-design-system.cx-group-selection-active tr[data-cx-group-selected="true"] > td,
html body.cx-design-system.cx-group-selection-active tr[data-cx-group-selected="true"]:hover > td,
html body.cx-design-system.cx-group-selection-active tr[data-cx-group-selected="true"]:focus > td {
background: #ffe16a !important;
color: #233f57 !important;
}
/* Small visual cue when extra map markers are intentionally hidden after a
unit selection to keep a single last-position pin visible. */
html body.cx-design-system .gm-style [data-cx-group-marker-hidden="true"] {
pointer-events: none !important;
}
/* ========================================================================== */
/* ========================================================================== */
/* Header alert queue: the pending state is one compact universal bell, not a
nested status capsule. */
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side-top {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 7px !important;
width: 100% !important;
}
html body.cx-design-system .conexgo-header-alerts .cx-alert-bell-status {
position: relative !important;
display: inline-flex !important;
width: 34px !important; min-width: 34px !important; max-width: 34px !important;
height: 30px !important; min-height: 30px !important;
padding: 0 !important; margin: 0 !important;
align-items: center !important; justify-content: center !important;
border: 1px solid #e4bd50 !important;
border-radius: 9px !important;
background: #fff4ce !important; color: #a76d00 !important;
box-shadow: none !important; overflow: visible !important;
}
html body.cx-design-system .conexgo-header-alerts .cx-alert-bell-status__icon {
font-size: 13px !important;
animation: cx-r1883981-bell-bounce 1.05s ease-in-out infinite !important;
transform-origin: top center !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-language {
display: inline-flex !important; align-items: center !important; justify-content: center !important;
width: auto !important; min-width: 44px !important; max-width: 52px !important;
height: 27px !important; min-height: 27px !important; padding: 0 9px !important;
border-radius: 8px !important; font-size: 11px !important; font-weight: 800 !important;
}
/* Alert View / Answer resource controls: exactly three equal columns. The
selected/open state remains dark until the section is explicitly closed. */
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .alert-answer-action-row {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 12px !important;
align-items: stretch !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .alert-answer-action-row > :is(button,.cx-alert-documents) {
width: 100% !important; min-width: 0 !important; max-width: none !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .cx-alert-documents-toggle-row,
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .alert-answer-toggle-documents {
width: 100% !important; min-width: 0 !important; max-width: none !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .alert-answer-toggle-danger[aria-expanded="true"] {
background: #9d342f !important; border-color: #842b27 !important; color: #fff !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .alert-answer-toggle-info[aria-expanded="true"]:not(.alert-answer-toggle-documents) {
background: #315f82 !important; border-color: #28516f !important; color: #fff !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .alert-answer-toggle-documents[aria-expanded="true"] {
background: #4d7757 !important; border-color: #3f6749 !important; color: #fff !important;
}
html body.cx-design-system .alert-answer-toggle-documents { position: relative !important; }
html body.cx-design-system .cx-alert-documents-indicator {
position: absolute !important; top: 7px !important; right: 9px !important;
width: 8px !important; height: 8px !important; border-radius: 50% !important;
background: #2f76b4 !important; border: 2px solid rgba(255,255,255,.95) !important;
box-shadow: 0 0 0 1px rgba(47,118,180,.25) !important;
}
html body.cx-design-system .alert-answer-toggle-documents[aria-expanded="true"] .cx-alert-documents-indicator {
background: #fff !important; border-color: rgba(255,255,255,.55) !important;
}
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .cx-alert-documents-preview-list,
html body.cx-design-system :is(.cx-dialog--alert-answer,.cx-dialog--alert-view) .cx-alert-resource-detail {
grid-column: 1 / -1 !important;
}
/* Group selection: selected yellow always wins over row hover/focus. */
html body.cx-design-system .cx-group-view-page .cx-group-member-row.is-selected > td,
html body.cx-design-system .cx-group-view-page .cx-group-member-row.is-selected:hover > td,
html body.cx-design-system .cx-group-view-page .cx-group-member-row.is-selected:focus > td,
html body.cx-design-system .cx-group-view-page .cx-group-member-row[aria-selected="true"] > td,
html body.cx-design-system .cx-group-view-page .cx-group-member-row[aria-selected="true"]:hover > td {
background: #ffe16a !important; color: #233f57 !important;
}
/* Context banner for device-scoped lists. */
html body.cx-design-system .cx-context-list-banner {
display: flex; align-items: center; gap: 12px;
margin: 0 0 16px; padding: 12px 14px;
border: 1px solid #bfd3e4; border-left: 4px solid #356f9d;
border-radius: 12px; background: #f4f9fd; color: #234a69;
}
html body.cx-design-system .cx-context-list-banner__icon {
display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center;
border-radius: 10px; background: #e6f1f8; color: #356f9d; flex: 0 0 auto;
}
html body.cx-design-system .cx-context-list-banner__copy { display:flex; flex-wrap:wrap; gap:5px; min-width:0; }
html body.cx-design-system .cx-context-list-banner__copy span { min-width:0; overflow-wrap:anywhere; }
/* Keep the desktop Conexgo logo present and above dropdown/menu layers while
the sidebar is open. */
@media (min-width: 992px) {
html body.cx-design-system .app-sidebar-modern .side-header {
position: sticky !important; top: 0 !important; z-index: 120 !important;
opacity: 1 !important; visibility: visible !important; background: #fff !important;
}
html body.cx-design-system .app-sidebar-modern .header-brand1 {
opacity: 1 !important; visibility: visible !important; z-index: 121 !important;
}
}
/* Read-only ATLAS fall notice uses the same Conexgo information-card rhythm. */
html body.cx-design-system .device-config-atlas-readonly .cx-device-config-atlas-fall-card {
width: 100%; margin: 0;
}
/* ========================================================================== */
/* ========================================================================== */
/* Keep the minimized desktop sidebar as a visible 80px icon rail. The child
may expand over content on hover; the shell therefore must not clip it. */
@media (min-width: 992px) {
html body.cx-design-system.app.sidebar-mini.sidenav-toggled .app-sidebar-shell,
html body.cx-design-system.sidebar-mini.sidenav-toggled .app-sidebar-shell {
width: 80px !important;
min-width: 80px !important;
max-width: 80px !important;
overflow: visible !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
html body.cx-design-system.app.sidebar-mini.sidenav-toggled .app-sidebar-shell .app-sidebar-modern,
html body.cx-design-system.sidebar-mini.sidenav-toggled .app-sidebar-shell .app-sidebar-modern {
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
transform: none !important;
}
html body.cx-design-system.app.sidebar-mini.sidenav-toggled .app-sidebar-shell .app-sidebar-modern:hover,
html body.cx-design-system.sidebar-mini.sidenav-toggled .app-sidebar-shell .app-sidebar-modern:hover {
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
transform: none !important;
}
}
/* Pending-response bell: slightly larger and clearly animated while retaining
the existing translated hover tooltip from AlertQueue. */
html body.cx-design-system .conexgo-header-alerts .cx-alert-bell-status,
html body.cx-design-system .conexgo-header-alerts .cx-alert-workflow-status.cx-alert-bell-status {
width: 42px !important;
min-width: 42px !important;
max-width: 42px !important;
height: 34px !important;
min-height: 34px !important;
border-radius: 10px !important;
}
html body.cx-design-system .conexgo-header-alerts .cx-alert-bell-status__icon,
html body.cx-design-system .conexgo-header-alerts .cx-alert-bell-status > i,
html body.cx-design-system .conexgo-header-alerts .cx-alert-workflow-status.cx-alert-bell-status > i {
font-size: 17px !important;
animation: cx-r1883984-bell-ring 1.18s ease-in-out infinite !important;
transform-origin: 50% 12% !important;
}
@keyframes cx-r1883984-bell-ring {
0%, 48%, 100% { transform: rotate(0deg) translateY(0); }
8% { transform: rotate(-14deg) translateY(-1px); }
16% { transform: rotate(12deg) translateY(0); }
24% { transform: rotate(-10deg) translateY(-1px); }
32% { transform: rotate(8deg) translateY(0); }
40% { transform: rotate(-4deg) translateY(0); }
}
/* Page-level loading states use the exact same card/icon/progress vocabulary
as table loading without adding a second shaded panel around the card. */
html body.cx-design-system .conexgo-page-wait-indicator {
min-height: 220px !important;
padding: 22px !important;
background: transparent !important;
border: 0 !important;
}
html body.cx-design-system .conexgo-page-wait-indicator__card {
width: min(100%, 420px) !important;
}
@media (max-width: 479.98px) {
html body.cx-design-system .conexgo-page-wait-indicator {
min-height: 180px !important;
padding: 14px !important;
}
}
@media (prefers-reduced-motion: reduce) {
html body.cx-design-system .conexgo-header-alerts .cx-alert-bell-status__icon,
html body.cx-design-system .conexgo-header-alerts .cx-alert-bell-status > i,
html body.cx-design-system .conexgo-header-alerts .cx-alert-workflow-status.cx-alert-bell-status > i {
animation: none !important;
transform: none !important;
}
}
@media (min-width: 992px) {
html body .app-sidebar-modern {
height: 100dvh !important;
max-height: 100dvh !important;
}
html body .app-sidebar-modern {
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
transition: width .16s ease, min-width .16s ease, max-width .16s ease !important;
}
html body .app-sidebar-modern .side-header {
position: relative !important;
inset: auto !important;
flex: 0 0 auto !important;
min-height: 124px !important;
justify-content: flex-start !important;
overflow: hidden !important;
}
html body .app-sidebar-modern .side-header .header-brand1 {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 18px 16px 14px 18px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
}
html body .app-sidebar-modern .side-header .header-brand-img {
margin-left: 0 !important;
margin-right: auto !important;
transform: none !important;
object-position: left center !important;
}
html body .app-sidebar-modern .main-sidemenu {
position: relative !important;
flex: 1 1 auto !important;
min-height: 0 !important;
height: auto !important;
max-height: none !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
scrollbar-gutter: stable !important;
scroll-behavior: auto !important;
-webkit-overflow-scrolling: touch !important;
}
html body .app-sidebar-modern .main-sidemenu > .ps__rail-y,
html body .app-sidebar-modern .main-sidemenu > .ps__rail-x,
html body .app-sidebar-modern > .ps__rail-y,
html body .app-sidebar-modern > .ps__rail-x { display: none !important; }
html body .app-sidebar-modern .side-menu {
min-height: min-content !important;
padding-bottom: 32px !important;
}
html body .conexgo-sidebar-section-item {
transition:
max-height .52s cubic-bezier(.22, 1, .36, 1),
opacity .40s ease .05s,
margin .52s cubic-bezier(.22, 1, .36, 1),
padding .52s cubic-bezier(.22, 1, .36, 1),
transform .52s cubic-bezier(.22, 1, .36, 1),
clip-path .52s cubic-bezier(.22, 1, .36, 1),
visibility 0s linear 0s;
}
html body .conexgo-sidebar-section-item.is-visible {
max-height: 1200px !important;
}
html body .app-sidebar-modern .slide-menu,
html body .app-sidebar-modern .sub-slide-menu,
html body .app-sidebar-modern .sub-slide-menu2 {
transition: none !important;
}
html body.sidenav-toggled .app-sidebar-modern:not(:hover),
html body .app.sidenav-toggled .app-sidebar-modern:not(:hover) {
width: 80px !important;
min-width: 80px !important;
max-width: 80px !important;
}
}
/* Workflow badges: compact icon-only status with the tooltip carrying the text. */
.conexgo-alert-classic-side .cx-alert-workflow-status {
width: 44px !important;
min-width: 44px !important;
height: 40px !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border-width: 1px !important;
border-style: solid !important;
border-radius: 10px !important;
}
.conexgo-alert-classic-side .cx-alert-workflow-status i { margin: 0 !important; font-size: 15px !important; }
.conexgo-alert-filter.is-pending .cx-alert-filter-bell,
.cx-alert-bell-status.is-pending .cx-alert-bell-status__icon {
transform-origin: 50% 15%;
animation: cx-r18985-bell 1.45s ease-in-out infinite;
}
@keyframes cx-r18985-bell {
0%, 62%, 100% { transform: rotate(0deg) translateY(0); filter: none; }
68% { transform: rotate(-10deg) translateY(-1px); }
74% { transform: rotate(10deg) translateY(-2px); filter: drop-shadow(0 0 4px rgba(190,128,0,.34)); }
80% { transform: rotate(-7deg) translateY(-1px); }
86% { transform: rotate(5deg) translateY(0); }
}
/* Ticket #555: keep the main queue icon visibly active while active alerts
exist. The short incoming-alert cue remains separate and can still restart. */
html body.cx-design-system .conexgo-alert-trigger.has-alerts .conexgo-alert-icon {
transform-origin: 50% 20% !important;
animation: cx-r18986-active-alert 1.55s ease-in-out infinite !important;
}
@keyframes cx-r18986-active-alert {
0%, 58%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
66% { transform: translateY(-2px) rotate(-7deg) scale(1.04); }
74% { transform: translateY(-1px) rotate(7deg) scale(1.04); }
82% { transform: translateY(0) rotate(-4deg) scale(1.02); }
90% { transform: translateY(0) rotate(0deg) scale(1); }
}
.conexgo-alert-classic-language {
min-width: 48px !important;
min-height: 34px !important;
padding: 5px 11px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid #b9cfe0 !important;
border-radius: 9px !important;
background: #f8fbfd !important;
color: #315f82 !important;
font-weight: 800 !important;
box-shadow: inset 0 0 0 1px rgba(49,95,130,.025) !important;
}
/* Geofence: preserve a balanced two-column modal and never create the giant focus void. */
.device-geofence-configuration-layout-with-preview,
.device-geofence-configuration-layout.is-manual-focus {
grid-template-columns: minmax(300px, .92fr) minmax(420px, 1.08fr) !important;
align-items: start !important;
gap: 18px !important;
}
.device-geofence-configuration-layout.is-manual-focus > .device-geofence-map-card,
.device-geofence-configuration-layout.is-manual-focus > .device-geofence-fields-column {
grid-column: auto !important;
order: initial !important;
}
.device-geofence-map-card,
.device-geofence-configuration-layout.is-manual-focus > .device-geofence-map-card {
min-height: 410px !important;
height: clamp(410px, 50dvh, 540px) !important;
max-height: 58dvh !important;
}
@media (max-width: 1199.98px) {
.device-geofence-configuration-layout-with-preview,
.device-geofence-configuration-layout.is-manual-focus {
grid-template-columns: minmax(0,1fr) !important;
}
.device-geofence-map-card,
.device-geofence-configuration-layout.is-manual-focus > .device-geofence-map-card {
height: 430px !important;
max-height: none !important;
}
}
/* Device Map status/history surface: Conexgo blue instead of the legacy grey band. */
.device-map-settings,
.device-map-settings .conexgo-device-setting-toolbar,
.device-map-settings .setting-header {
background: #315f82 !important;
border-color: #284f6e !important;
}
.device-map-settings .conexgo-device-setting-toolbar .dashboard > li,
.device-map-settings .setting-header .dashboard > li,
.device-map-settings .conexgo-device-simple-icon,
.device-map-settings .conexgo-device-gps-icon,
.device-map-settings .conexgo-device-connectivity-icon {
color: #fff !important;
}
.device-map-settings .conexgo-device-history-item {
background: rgba(255,255,255,.10) !important;
border: 1px solid rgba(255,255,255,.22) !important;
}
.conexgo-history-panel {
border-top: 1px solid #c9dbe8 !important;
border-bottom: 1px solid #c9dbe8 !important;
background: #edf4f9 !important;
}
.conexgo-map-controller.is-visible {
display: block !important;
border-top: 1px solid #c4d8e7 !important;
border-bottom: 1px solid #c4d8e7 !important;
background: #e8f1f7 !important;
}
#map-canvas, .device-map-canvas { position: relative !important; }
.cx-map-history-loading::after {
content: "";
position: absolute;
z-index: 8;
left: 0; right: 0; top: 0;
height: 3px;
background: linear-gradient(90deg, transparent 0%, #315f82 45%, transparent 100%);
background-size: 45% 100%;
animation: cx-r18985-map-load 1s linear infinite;
pointer-events: none;
}
.cx-map-history-message {
position: absolute;
z-index: 9;
top: 12px;
left: 50%;
transform: translateX(-50%);
max-width: min(620px, calc(100% - 32px));
padding: 8px 12px;
border: 1px solid #c8dae7;
border-radius: 9px;
background: rgba(255,255,255,.96);
color: #315f82;
font-size: 12px;
font-weight: 700;
box-shadow: 0 4px 14px rgba(35,74,108,.12);
pointer-events: none;
}
.cx-map-history-message[data-state="error"] { color: #9e3444; border-color: #e7c2c9; }
@keyframes cx-r18985-map-load { from { background-position: -100% 0; } to { background-position: 220% 0; } }
@media (prefers-reduced-motion: reduce) {
.conexgo-alert-filter.is-pending .cx-alert-filter-bell,
.cx-alert-bell-status.is-pending .cx-alert-bell-status__icon,
html body.cx-design-system .conexgo-alert-trigger.has-alerts .conexgo-alert-icon,
.cx-map-history-loading::after { animation: none !important; }
}
/* Account action dropdowns stay overlay-based and viewport-safe; opening them
must never reflow the table or hide actions below the fold. */
html body.cx-design-system .account-list-cell-name {
position: relative !important;
overflow: visible !important;
}
html body.cx-design-system .account-list-cell-name .dropdown-menu.conexgo-row-action-menu {
z-index: 1090 !important;
min-width: 320px !important;
max-width: min(390px, calc(100vw - 24px)) !important;
max-height: min(480px, calc(100dvh - 140px)) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
scrollbar-gutter: stable !important;
will-change: auto !important;
}
/* ========================================================================== */
/* ========================================================================== */
/* The desktop brand row follows the same 75px rhythm as the application
topbar. It no longer reserves a 124px block above the first menu section. */
@media (min-width: 992px) {
html body.cx-design-system .app-sidebar-modern .side-header {
box-sizing: border-box !important;
flex: 0 0 75px !important;
width: 100% !important;
height: 75px !important;
min-height: 75px !important;
max-height: 75px !important;
padding: 0 !important;
align-items: center !important;
justify-content: flex-start !important;
}
html body.cx-design-system .app-sidebar-modern .side-header .header-brand1 {
box-sizing: border-box !important;
width: 100% !important;
height: 75px !important;
min-height: 75px !important;
padding: 0 18px !important;
align-items: center !important;
}
html body.cx-design-system .app-sidebar-modern .side-header .header-brand-img.light-logo1 {
width: auto !important;
max-width: calc(100% - 8px) !important;
height: auto !important;
max-height: 40px !important;
object-fit: contain !important;
}
}
/* Every workflow state uses the same square control as Pending. Language is
the matching neighbouring control, so Pending/In progress/Done never change
the card geometry. */
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side-top {
gap: 7px !important;
flex-wrap: nowrap !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side-top .cx-alert-workflow-status,
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side-top .cx-alert-workflow-status.cx-alert-bell-status {
box-sizing: border-box !important;
display: inline-flex !important;
flex: 0 0 44px !important;
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 30px !important;
min-height: 30px !important;
max-height: 30px !important;
margin: 0 !important;
padding: 0 !important;
align-items: center !important;
justify-content: center !important;
border-radius: 8px !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side-top .cx-alert-workflow-status > i,
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side-top .cx-alert-workflow-status.cx-alert-bell-status > i {
flex: 0 0 15px !important;
width: 15px !important;
min-width: 15px !important;
max-width: 15px !important;
font-size: 13px !important;
line-height: 1 !important;
text-align: center !important;
}
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side-top .conexgo-alert-classic-language {
box-sizing: border-box !important;
display: inline-flex !important;
flex: 0 0 44px !important;
width: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
height: 30px !important;
min-height: 30px !important;
max-height: 30px !important;
margin: 0 !important;
padding: 0 !important;
align-items: center !important;
justify-content: center !important;
border-radius: 8px !important;
font-size: 11px !important;
font-weight: 800 !important;
line-height: 1 !important;
}
/* The four queue-filter glyphs share one exact icon box and font size. */
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-filter > i {
display: inline-flex !important;
flex: 0 0 16px !important;
width: 16px !important;
min-width: 16px !important;
max-width: 16px !important;
height: 16px !important;
align-items: center !important;
justify-content: center !important;
font-size: 14px !important;
line-height: 16px !important;
text-align: center !important;
}
/* Open resource buttons keep their darker semantic colour for the complete
lifetime of aria-expanded=true, independently of hover or focus. */
html body.cx-design-system :is(.alert-answer-action-row, .alert-view-resource-actions)
button.alert-answer-toggle-danger:is(.active, [aria-expanded="true"]) {
background: #9d342f !important;
background-color: #9d342f !important;
border-color: #842b27 !important;
color: #fff !important;
}
html body.cx-design-system :is(.alert-answer-action-row, .alert-view-resource-actions)
button.alert-answer-toggle-info:not(.alert-answer-toggle-documents):is(.active, [aria-expanded="true"]) {
background: #315f82 !important;
background-color: #315f82 !important;
border-color: #28516f !important;
color: #fff !important;
}
html body.cx-design-system :is(.alert-answer-action-row, .alert-view-resource-actions)
button.alert-answer-toggle-documents:is(.active, [aria-expanded="true"]) {
background: #3f704f !important;
background-color: #3f704f !important;
border-color: #315b3f !important;
color: #fff !important;
}
html body.cx-design-system :is(.alert-answer-action-row, .alert-view-resource-actions)
button:is(.alert-answer-toggle-danger, .alert-answer-toggle-info, .alert-answer-toggle-documents):is(.active, [aria-expanded="true"])
:is(i, span) {
color: #fff !important;
}
/* ========================================================================== */
/* ========================================================================== */
/* Keep the desktop brand row exactly as tall as the topbar while letting the
logo use the available width. The brand is anchored close to the left edge. */
@media (min-width: 992px) {
html body.cx-design-system .app-sidebar-modern .side-header,
html body.cx-design-system .app-sidebar-modern .side-header .header-brand1 {
box-sizing: border-box !important;
flex: 0 0 75px !important;
width: 100% !important;
height: 75px !important;
min-height: 75px !important;
max-height: 75px !important;
margin: 0 !important;
align-items: center !important;
justify-content: flex-start !important;
}
html body.cx-design-system .app-sidebar-modern .side-header {
padding: 0 !important;
}
html body.cx-design-system .app-sidebar-modern .side-header .header-brand1 {
padding: 0 8px !important;
}
html body.cx-design-system .app-sidebar-modern .side-header .header-brand-img.light-logo1 {
display: block !important;
flex: 0 0 auto !important;
width: 180px !important;
max-width: calc(100% - 8px) !important;
height: auto !important;
max-height: 54px !important;
margin: 0 auto 0 0 !important;
object-fit: contain !important;
object-position: left center !important;
}
}
/* The language badge is an exact peer of every workflow-status control. */
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side-top .cx-alert-workflow-status,
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side-top .cx-alert-workflow-status.cx-alert-bell-status,
html body.cx-design-system .conexgo-header-alerts .conexgo-alert-classic-side-top .conexgo-alert-classic-language {
box-sizing: border-box !important;
display: inline-flex !important;
flex: 0 0 48px !important;
width: 48px !important;
min-width: 48px !important;
max-width: 48px !important;
height: 32px !important;
min-height: 32px !important;
max-height: 32px !important;
margin: 0 !important;
padding: 0 !important;
align-items: center !important;
justify-content: center !important;
border-radius: 8px !important;
line-height: 1 !important;
vertical-align: middle !important;
}
/* Real jump motion on every pending bell: filter, individual card and header
notification bell. Only the glyph moves, so card alignment never changes. */
@keyframes cx-r18988-bell-jump {
0%, 50%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
10% { transform: translateY(-6px) rotate(-9deg) scale(1.10); }
20% { transform: translateY(0) rotate(7deg) scale(1.02); }
30% { transform: translateY(-4px) rotate(-6deg) scale(1.08); }
40% { transform: translateY(0) rotate(4deg) scale(1); }
}
html body.cx-design-system .conexgo-alert-filter.is-pending > .cx-alert-filter-bell,
html body.cx-design-system .conexgo-header-alerts .cx-alert-workflow-status--pending > i,
html body.cx-design-system .conexgo-header-alerts .cx-alert-bell-status.is-pending > .cx-alert-bell-status__icon,
html body.cx-design-system .conexgo-notification-trigger.has-notifications .conexgo-notification-bell {
transform-origin: center bottom !important;
animation: cx-r18988-bell-jump 1.05s ease-in-out infinite !important;
will-change: transform !important;
}
/* Notification dropdown gains the same compact filter rhythm as Alert Queue,
but only for the three real priority levels. */
html body.cx-design-system .conexgo-notification-dropdown {
grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}
html body.cx-design-system .conexgo-notification-filterbar {
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 10px !important;
min-width: 0 !important;
padding: 9px 12px !important;
align-items: center !important;
background: #f7fafc !important;
border-bottom: 1px solid #d6e2eb !important;
}
html body.cx-design-system .conexgo-notification-filterbar-label,
html body.cx-design-system .conexgo-notification-filterbar-actions,
html body.cx-design-system .conexgo-notification-filter {
display: inline-flex !important;
align-items: center !important;
}
html body.cx-design-system .conexgo-notification-filterbar-label {
min-width: 0 !important;
gap: 8px !important;
color: #365c7c !important;
font-size: 12px !important;
font-weight: 800 !important;
}
html body.cx-design-system .conexgo-notification-filterbar-label > i {
flex: 0 0 16px !important;
width: 16px !important;
font-size: 14px !important;
text-align: center !important;
}
html body.cx-design-system .conexgo-notification-filterbar-actions {
gap: 7px !important;
flex-wrap: nowrap !important;
}
html body.cx-design-system .conexgo-notification-filter {
box-sizing: border-box !important;
min-width: 52px !important;
height: 38px !important;
gap: 6px !important;
padding: 0 10px !important;
justify-content: center !important;
border: 1px solid #c6d9e7 !important;
border-radius: 9px !important;
background: #fff !important;
color: #315f82 !important;
font-size: 12px !important;
font-weight: 850 !important;
line-height: 1 !important;
box-shadow: none !important;
transform: none !important;
transition:
background-color .24s cubic-bezier(.22, 1, .36, 1),
border-color .24s cubic-bezier(.22, 1, .36, 1),
color .24s cubic-bezier(.22, 1, .36, 1),
box-shadow .24s cubic-bezier(.22, 1, .36, 1) !important;
}
html body.cx-design-system .conexgo-notification-filter > i {
display: inline-flex !important;
flex: 0 0 16px !important;
width: 16px !important;
height: 16px !important;
align-items: center !important;
justify-content: center !important;
font-size: 14px !important;
line-height: 16px !important;
}
html body.cx-design-system .conexgo-notification-filter.is-high:not(.is-selected) {
background: #fff5f6 !important;
border-color: #e7b9c1 !important;
color: #a52e43 !important;
}
html body.cx-design-system .conexgo-notification-filter.is-medium:not(.is-selected) {
background: #fff8e9 !important;
border-color: #e8ca83 !important;
color: #966200 !important;
}
html body.cx-design-system .conexgo-notification-filter.is-information:not(.is-selected) {
background: #f1f7fb !important;
border-color: #bdd4e5 !important;
color: #315f82 !important;
}
html body.cx-design-system .conexgo-notification-filter:not(.is-selected):is(:hover, :focus-visible) {
background: #f4f8fb !important;
border-color: #a9c4d7 !important;
color: #294f6d !important;
box-shadow: none !important;
transform: none !important;
}
html body.cx-design-system .conexgo-notification-filter.is-high:not(.is-selected):is(:hover, :focus-visible) {
background: #fcecef !important;
border-color: #dfa4ae !important;
color: #972b3f !important;
}
html body.cx-design-system .conexgo-notification-filter.is-medium:not(.is-selected):is(:hover, :focus-visible) {
background: #fff3d8 !important;
border-color: #dfbe70 !important;
color: #825500 !important;
}
html body.cx-design-system .conexgo-notification-filter.is-information:not(.is-selected):is(:hover, :focus-visible) {
background: #e8f2f8 !important;
border-color: #a8c7dc !important;
color: #294f6d !important;
}
html body.cx-design-system .conexgo-notification-filter.is-selected,
html body.cx-design-system .conexgo-notification-filter.is-selected:hover,
html body.cx-design-system .conexgo-notification-filter.is-selected:focus-visible {
background: #274f6d !important;
background-color: #274f6d !important;
border-color: #1f425c !important;
color: #fff !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 3px 8px rgba(25,58,83,.18) !important;
}
html body.cx-design-system .conexgo-notification-filter.is-high.is-selected {
background: #962c3d !important;
background-color: #962c3d !important;
border-color: #772130 !important;
}
html body.cx-design-system .conexgo-notification-filter.is-medium.is-selected {
background: #865900 !important;
background-color: #865900 !important;
border-color: #684500 !important;
}
/* Active resource buttons are deliberately much darker than their closed
state. The .active class is emitted by each Blazor component while open. */
html body.cx-design-system .mud-dialog .alert-answer-toggle.alert-answer-toggle-danger.active,
html body.cx-design-system .mud-dialog .alert-answer-toggle.alert-answer-toggle-danger[aria-expanded="true"] {
background: #81241f !important;
background-color: #81241f !important;
background-image: none !important;
border-color: #641a17 !important;
color: #fff !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 4px 10px rgba(98,26,23,.24) !important;
}
html body.cx-design-system .mud-dialog .alert-answer-toggle.alert-answer-toggle-info:not(.alert-answer-toggle-documents).active,
html body.cx-design-system .mud-dialog .alert-answer-toggle.alert-answer-toggle-info:not(.alert-answer-toggle-documents)[aria-expanded="true"] {
background: #244d6b !important;
background-color: #244d6b !important;
background-image: none !important;
border-color: #193d58 !important;
color: #fff !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 4px 10px rgba(25,61,88,.22) !important;
}
html body.cx-design-system .mud-dialog .alert-answer-toggle.alert-answer-toggle-documents.active,
html body.cx-design-system .mud-dialog .alert-answer-toggle.alert-answer-toggle-documents[aria-expanded="true"] {
background: #275b39 !important;
background-color: #275b39 !important;
background-image: none !important;
border-color: #1d472b !important;
color: #fff !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 4px 10px rgba(29,71,43,.22) !important;
}
html body.cx-design-system .mud-dialog .alert-answer-toggle.active :is(i, span),
html body.cx-design-system .mud-dialog .alert-answer-toggle[aria-expanded="true"] :is(i, span) {
color: #fff !important;
}
@media (max-width: 575.98px) {
html body.cx-design-system .conexgo-notification-filterbar {
grid-template-columns: 1fr !important;
}
html body.cx-design-system .conexgo-notification-filterbar-actions {
width: 100% !important;
justify-content: space-between !important;
}
html body.cx-design-system .conexgo-notification-filter {
flex: 1 1 0 !important;
min-width: 0 !important;
padding-inline: 7px !important;
}
}
@media (prefers-reduced-motion: reduce) {
html body.cx-design-system .conexgo-alert-filter.is-pending > .cx-alert-filter-bell,
html body.cx-design-system .conexgo-header-alerts .cx-alert-workflow-status--pending > i,
html body.cx-design-system .conexgo-header-alerts .cx-alert-bell-status.is-pending > .cx-alert-bell-status__icon,
html body.cx-design-system .conexgo-notification-trigger.has-notifications .conexgo-notification-bell {
animation: none !important;
}
}
/* ========================================================================== */
/* ========================================================================== */
/* #508: the Blazor-owned selection class and the JavaScript map-selection
class share the same persistent yellow state, including during hover. */
html body.cx-design-system tr.cx-group-member-row.is-selected > td,
html body.cx-design-system tr.cx-group-member-row.is-selected:hover > td {
background: #fff200 !important;
color: #17233c !important;
}
html body.cx-design-system tr.cx-group-member-row.is-selected > td:first-child {
box-shadow: inset 4px 0 0 #d6ad00 !important;
}
/* Keep the position count and the playback navigator visible together. */
html body.cx-design-system .device-map-settings .conexgo-map-controller.is-visible {
display: block !important;
height: auto !important;
min-height: 0 !important;
padding: 10px 16px !important;
overflow: visible !important;
opacity: 1 !important;
border-top: 1px solid #c4d8e7 !important;
border-bottom: 1px solid #c4d8e7 !important;
background: #e8f1f7 !important;
}
html body.cx-design-system .device-map-settings .conexgo-history-results {
width: 100% !important;
min-width: 0 !important;
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 10px !important;
}
html body.cx-design-system .device-map-settings .conexgo-history-location-count {
min-height: 48px !important;
padding: 0 16px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 9px !important;
border: 1px solid #cbdde9 !important;
border-radius: 12px !important;
background: #ffffff !important;
color: #294f6d !important;
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1.25 !important;
box-shadow: 0 2px 8px rgba(39, 73, 98, .05) !important;
white-space: nowrap !important;
}
html body.cx-design-system .device-map-settings .conexgo-history-location-count > i {
color: #527b99 !important;
}
html body.cx-design-system .device-map-settings .conexgo-history-playback {
min-height: 48px !important;
margin: 0 !important;
}
html body.cx-design-system .device-map-settings .conexgo-history-step:disabled {
border-color: #dfe8ee !important;
background: #f5f8fa !important;
color: #9cabb6 !important;
cursor: not-allowed !important;
opacity: .72 !important;
}
html body.cx-design-system .device-map-settings .conexgo-history-form:not(.is-custom) {
grid-template-columns: minmax(220px, .9fr) minmax(270px, 1.1fr) 200px !important;
gap: 12px 16px !important;
}
/* Native