). This CSS rule uses that class to
* elevate the entire row's stacking context with a z-index, effectively
* shielding all other rows from mouse events and making the dropdown stable.
*/
#grid4-app-shell .table > tbody > tr.dropdown-active {
position: relative;
z-index: 20;
isolation: isolate;
}
#grid4-app-shell .table > tbody > tr.dropdown-active .action-buttons,
#grid4-app-shell .table > tbody > tr.dropdown-active .action-buttons .dropdown {
position: relative;
z-index: 50010 !important;
}
#grid4-app-shell .table > tbody > tr.dropdown-active .action-buttons .dropdown-menu {
position: absolute !important;
z-index: 50010 !important;
}
#grid4-app-shell .users-panel-main .table tbody tr.dropdown-active td,
#grid4-app-shell .domains-panel-main .table tbody tr.dropdown-active td {
color: var(--text-primary) !important;
transform: none !important;
}
body.theme-dark #grid4-app-shell .users-panel-main .table tbody tr.dropdown-active td,
body.theme-dark #grid4-app-shell .domains-panel-main .table tbody tr.dropdown-active td {
background-color: rgba(var(--g4-brand-sky-rgb), 0.14) !important;
}
body.theme-light #grid4-app-shell .users-panel-main .table tbody tr.dropdown-active td,
body.theme-light #grid4-app-shell .domains-panel-main .table tbody tr.dropdown-active td {
background-color: rgba(var(--g4-brand-sky-rgb), 0.1) !important;
}
#grid4-app-shell .users-panel-main.g4-table-dropdown-open .table tbody tr:not(.dropdown-active) .action-buttons,
#grid4-app-shell .domains-panel-main.g4-table-dropdown-open .table tbody tr:not(.dropdown-active) .action-buttons {
pointer-events: none !important;
}
#grid4-app-shell .users-panel-main.g4-table-dropdown-open .table tbody tr:not(.dropdown-active):hover .action-buttons a,
#grid4-app-shell .domains-panel-main.g4-table-dropdown-open .table tbody tr:not(.dropdown-active):hover .action-buttons a {
opacity: inherit !important;
filter: none !important;
transition: none !important;
}
#grid4-app-shell .table > tbody > tr.dropdown-active .action-buttons a,
#grid4-app-shell .table > tbody > tr.dropdown-active .action-buttons .dropdown-menu a,
#grid4-app-shell .table .action-buttons .dropdown.open > a,
#grid4-app-shell .table .action-buttons .dropdown.open .dropdown-menu a {
filter: none !important;
opacity: 1 !important;
}
body.theme-dark #grid4-app-shell .action-buttons a,
body.theme-dark #grid4-app-shell td a.add,
body.theme-dark #grid4-app-shell td a.edit,
body.theme-dark #grid4-app-shell td a.delete,
body.theme-dark #grid4-app-shell td a.manage,
body.theme-dark #grid4-app-shell td a.agents {
opacity: 0.58 !important;
transition: opacity var(--g4-transition-fast) !important;
}
body.theme-dark #grid4-app-shell .table-hover tbody tr:hover .action-buttons a,
body.theme-dark #grid4-app-shell .table tbody tr.dropdown-active .action-buttons a,
body.theme-dark #grid4-app-shell td a.add:hover,
body.theme-dark #grid4-app-shell td a.edit:hover,
body.theme-dark #grid4-app-shell td a.delete:hover,
body.theme-dark #grid4-app-shell td a.manage:hover,
body.theme-dark #grid4-app-shell td a.agents:hover {
opacity: 1 !important;
}
body.theme-dark #grid4-app-shell .users-panel-main.g4-table-dropdown-open .table tbody tr:not(.dropdown-active):hover .action-buttons a,
body.theme-dark #grid4-app-shell .domains-panel-main.g4-table-dropdown-open .table tbody tr:not(.dropdown-active):hover .action-buttons a {
opacity: inherit !important;
filter: none !important;
}
/* ===================================================================
PAGE-SPECIFIC FIX: CALL HISTORY QOS POPOVER (v6 - Final)
=================================================================== */
/*for the fax page in dark mode */
#grid4-app-shell.theme-dark .info-alert-custom {
background-color: black !important;
}
/*
* PROBLEM: The popover was unthemed and flickered on page load.
*
* SOLUTION:
* 1. A JS function now re-initializes the popover in the correct `body`
* container and dynamically adds theme classes on show.
* 2. This CSS proactively hides the default, incorrectly placed popover
* that is generated inside the table, preventing the flicker.
* 3. The main styling rules now target the dynamically themed popover
* that exists as a child of the body.
*/
/* 1. CRITICAL: Proactively hide the broken popover to prevent flicker. */
/* This targets any qos-popover that is inside a table cell. Our JS-created popover is not. */
#call-history-table .qos-popover {
display: none !important;
visibility: hidden !important;
}
/* 2. Main Popover Theming (now targeting the JS-themed element) */
/* Selects the popover when it has our dynamically added theme classes. */
.popover.qos-popover.g4-themed {
z-index: 10001 !important;
background: var(--surface-primary-bg) !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--g4-radius-md) !important;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
opacity: 1 !important;
}
/* 3. Popover Inner Structure */
.popover.qos-popover.g4-themed .popover-inner {
background: transparent !important;
border: none !important;
padding: 0 !important;
box-shadow: none !important;
}
/* 4. Popover Content & Text Color */
.popover.qos-popover.g4-themed .popover-content {
color: var(--text-primary) !important;
padding: 10px 12px !important;
}
/* 5. Arrow Theming */
.popover.qos-popover.g4-themed.right > .arrow {
border-right-color: var(--border-color) !important;
}
.popover.qos-popover.g4-themed.right > .arrow:after {
border-right-color: var(--surface-primary-bg) !important;
}
/* 6. Table Theming Inside the Popover */
.popover.qos-popover.g4-themed .table {
color: var(--text-primary) !important;
background: transparent !important;
}
.popover.qos-popover.g4-themed .table th {
color: var(--text-secondary) !important;
border-bottom: 2px solid var(--border-color) !important;
font-weight: 700;
}
.popover.qos-popover.g4-themed .table td {
border-top: 1px solid var(--border-color) !important;
}
/* ===================================================================
PAGE-SPECIFIC FIX: CALL HISTORY "CALL FLOW" MODAL
=================================================================== */
/*
* PROBLEM: The "Call Flow" modal (#cradle-modal) on the Call History page
* is not fully themed, with inconsistent backgrounds and icons that are
* not visible in light mode.
*
* SOLUTION:
* 1. Use a high-specificity, page-scoped selector to target the #cradle-modal.
* 2. Unify the modal's header, body, and footer backgrounds using theme variables.
* 3. Style the custom `.cradle-timeline` list, including the connecting lines,
* icon backgrounds, and text, using theme variables.
* 4. Apply a CSS `filter: invert(1)` to the timeline icons ONLY in light mode
* to change them from white to black for proper visibility.
*/
/* 1. Base Modal Theming */
/* Unify header and footer styling */
body.page-callhistory #grid4-app-shell #cradle-modal .modal-header,
body.page-callhistory #grid4-app-shell #cradle-modal .modal-footer {
background-color: var(--surface-secondary-bg) !important;
border-color: var(--border-color) !important;
color: var(--text-primary) !important;
}
.modal-body > .cradle-timeline {
background-color: var(--surface-primary-bg) !important;
/*color: var(--text-primary) !important; */
border-color: var(--border-color) !important;
}
/* Style the main body to be distinct but themed */
body.page-callhistory #grid4-app-shell #cradle-modal .modal-body {
background-color: var(--surface-primary-bg) !important;
}
/* Ensure modal title is the correct color */
body.page-callhistory #grid4-app-shell #cradle-modal .modal-header h4 {
color: var(--text-primary) !important;
}
/* 4. Timeline Icon Styling (Pseudo-element) */
/* This creates the circle behind the icon */
body.page-callhistory #grid4-app-shell #cradle-modal .cradle-timeline .event::before {
background-color: var(--surface-secondary-bg);
border: 0px solid var(--border-color);
color: var(--accent-primary) !important;
/* The actual phone icon is a background-image set by the portal's default CSS */
}
/* 5. CRITICAL: Icon Theming for Light vs. Dark Mode */
/* In light mode, the default white icons are invisible. This inverts them to black. */
body.page-callhistory #grid4-app-shell.theme-light #cradle-modal .cradle-timeline .event::before {
/*filter: invert(1); */
color: var(--text-primary) !important;
}
/* 6. Timeline Text Styling */
/* Main event text */
body.page-callhistory #grid4-app-shell #cradle-modal .cradle-timeline .event p {
color: var(--text-primary);
font-weight: 500;
}
/* Timestamp text (+3s, +7s, etc.) */
body.page-callhistory #grid4-app-shell #cradle-modal .cradle-timeline .event .event-ts {
color: var(--text-secondary);
font-size: var(--g4-font-size-sm);
}
body.page-callhistory #grid4-app-shell.modal.g4-themed.theme-dark #cradle-modal .cradle-timeline .event::after {
filter: invert(1);
color: var(--text-primary) !important;
}
/* ===================================================================
PAGE-SPECIFIC FIX: ANSWERING RULES "ALLOW / BLOCK" MODAL (v2)
=================================================================== */
/*
* PROBLEM: The "Allow / Block" modal on the Answering Rules page uses
* default Bootstrap `.well` components which are not theme-aware, resulting
* in bright white boxes and unreadable text in dark mode.
*
* SOLUTION (v2):
* 1. Use the `.page-answerrules` context class to scope all fixes.
* 2. Override the `.well` element's background to be theme-aware, removing
* default borders and shadows.
* 3. Explicitly set the text color for the section titles and checkbox label.
* 4. Add a max-height and scrollbar to the number list containers.
* 5. Resize the "+" buttons to the specified dimensions.
*/
/* 1. Theme the main container "wells" */
body.page-answerrules #grid4-app-shell .well,
body.page-answerrules #content .well {
background-color: var(--surface-primary-bg) !important;
border: 0 !important;
box-shadow: none !important;
}
/* 2. Style the section titles */
body.page-answerrules #grid4-app-shell .allowblock-input h6 {
color: var(--text-primary) !important;
font-weight: 600;
margin-bottom: 8px;
}
/* 3. Make the number list areas scrollable */
body.page-answerrules #grid4-app-shell .allowblock-table {
min-height: 180px;
max-height: 180px;
overflow-y: auto;
/* Add space for the scrollbar */
}
/* 4. Theme the anonymous block checkbox and label */
body.page-answerrules #grid4-app-shell .allowblock-anon {
background-color: var(--surface-secondary-bg);
border: 0px;
}
body.page-answerrules #grid4-app-shell .allowblock-anon label.checkbox {
color: var(--text-primary) !important;
}
/* 5. Resize the "+" buttons in the input fields */
body.page-answerrules #grid4-app-shell .allowblock-input .btn {
height: 1.7rem !important;
width: 1.7rem !important;
padding: 0 !important; /* Remove padding to allow for icon centering */
display: inline-flex !important; /* Use flexbox for perfect centering */
align-items: center;
justify-content: center;
}
/* 6. Keep the spam-handling row readable and stop the select from truncating
"Send to Voicemail" in the Allow / Block modal. */
body.page-answerrules #allowblock-lists.modal.g4-themed .spam-input > div {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
flex-wrap: wrap !important;
}
body.page-answerrules #allowblock-lists.modal.g4-themed .spam-input > div > span {
color: var(--modal-text) !important;
}
body.page-answerrules #allowblock-lists.modal.g4-themed #spam_handling {
width: 13rem !important;
min-width: 13rem !important;
max-width: 100% !important;
}
/* 7. Make allow/block remove controls legible in dark mode and cleaner in light mode. */
body.page-answerrules #grid4-app-shell .allowblock-table td:last-child,
body.page-answerrules #content .allowblock-table td:last-child {
width: 2.5rem !important;
text-align: center !important;
}
body.page-answerrules #grid4-app-shell .allowblock-table a.helpsy,
body.page-answerrules #content .allowblock-table a.helpsy {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
text-decoration: none !important;
opacity: 1 !important;
}
body.page-answerrules #grid4-app-shell .allowblock-table a.helpsy i.icon-remove,
body.page-answerrules #content .allowblock-table a.helpsy i.icon-remove {
color: #d14b5a !important;
filter: none !important;
opacity: 1 !important;
margin: 0 !important;
}
body.page-answerrules #grid4-app-shell .allowblock-table a.helpsy:hover,
body.page-answerrules #grid4-app-shell .allowblock-table a.helpsy:focus,
body.page-answerrules #content .allowblock-table a.helpsy:hover,
body.page-answerrules #content .allowblock-table a.helpsy:focus {
background: transparent !important;
border-color: transparent !important;
}
/* ===================================================================
PAGE-SPECIFIC FIX: ANSWERING RULES "BLOCKED NUMBERS" MODAL STYLING
=================================================================== */
/*
* PROBLEM: Specific components within the "Allow / Block" modal on the
* Call History page require theme-aware background colors.
*
* SOLUTION: Apply page-scoped, theme-aware background colors to the
* specified elements using the project's CSS variables.
*/
/* 1. Style the input container background */
body.page-callhistory #grid4-app-shell #allowblock-lists .allowblock-input {
background-color: var(--app-bg) !important;
}
/* 2. Style the rejected numbers list background */
body.page-callhistory #grid4-app-shell .blocknumbers-modal #rej-list {
background-color: var(--modal-bg) !important;
}
/* 3. Style the "well" container for the blocked numbers list */
body.page-callhistory #grid4-app-shell #allowblock-lists #block-div .well {
background-color: var(--modal-bg) !important;
}
body.page-callhistory #grid4-app-shell #allowblock-lists .rej-row-remove a.helpsy {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 1rem !important;
height: 1rem !important;
opacity: 1 !important;
text-decoration: none !important;
}
body.page-callhistory #grid4-app-shell #allowblock-lists .rej-row-remove a.helpsy i.icon-remove {
background-image: none !important;
display: inline-block !important;
width: auto !important;
height: auto !important;
text-indent: 0 !important;
overflow: visible !important;
}
body.page-callhistory #grid4-app-shell #allowblock-lists .rej-row-remove a.helpsy i.icon-remove::before {
content: '×';
display: inline-block;
font-style: normal;
font-weight: 700;
font-size: 1rem;
line-height: 1;
color: var(--g4-button-danger-bg) !important;
}
/* ===================================================================
PAGE-SPECIFIC FIX: MESSAGES PAGE CHAT INTERFACE
=================================================================== */
/*
* PROBLEM: The chat interface on the Messages page is not theme-aware.
* Message bubbles and text are unreadable in dark mode due to default
* light-mode styling from the `.well` class.
*
* SOLUTION:
* 1. Scope all rules within `.conversation-column-left` to ensure they only
* apply to this specific chat interface.
* 2. Theme the main chat box background for better visual structure.
* 3. Override the `.chat-well` styles to provide distinct, theme-aware
* backgrounds for inbound (received) and outbound (sent) messages.
* 4. Style all text elements using theme variables for readability.
*/
/* 1. Main Chat Container Styling */
#grid4-app-shell .conversation-column-left .chat-box {
background-color: var(--surface-primary-bg) !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--g4-radius-lg) !important;
padding: .5rem !important;
}
/* 2. General Message Bubble Styling (overrides .well) */
#grid4-app-shell .conversation-column-left .chat-well {
border-radius: var(--g4-radius-lg) !important;
border: none !important;
box-shadow: 0 1px 2px var(--shadow-color) !important;
padding: 0.5rem 0.75rem !important;
}
/* 3. Inbound (Received) Message Bubbles */
#grid4-app-shell .conversation-column-left .chat-inbound .chat-well {
background-color: var(--surface-secondary-bg) !important;
}
/* 4. Outbound (Sent) Message Bubbles */
#grid4-app-shell .conversation-column-left .chat-outbound .chat-well {
background-color: var(--accent-primary) !important;
}
/* 5. Message Text Color */
/* Inbound text should be the primary text color of the theme */
#grid4-app-shell .conversation-column-left .chat-inbound .chat-well p {
color: var(--text-primary) !important;
margin: 0;
}
/* Outbound text should be white to contrast with the accent color */
#grid4-app-shell .conversation-column-left .chat-outbound .chat-well p {
color: #ffffff !important;
margin: 0;
}
/* 6. Timestamp and User Info Text */
#grid4-app-shell .conversation-column-left .chat-timestamp {
color: var(--text-muted) !important;
font-size: var(--g4-font-size-sm) !important;
font-weight: 500;
}
/*For Timeframe Holiday Picker */
#grid4-app-shell .holiday-picker-container {
background-color: var(--modal-bg);
}
#grid4-app-shell .accordion-heading {
background-color: var(--modal-bg);
}
.alert {
text-shadow: none !important;
}
.alert-info {
background-color: var(--surface-secondary-bg) !important;
}
#grid4-app-shell a#bulkDeleteBtn.btn.btn-danger, #grid4-app-shell .btn.btn-danger#bulkDeleteBtn { color: #ffffff !important; text-shadow: none !important; }
#grid4-app-shell a#bulkDeleteBtn.btn.btn-danger:hover, #grid4-app-shell a#bulkDeleteBtn.btn.btn-danger:focus, #grid4-app-shell a#bulkDeleteBtn.btn.btn-danger:active { color: #ffffff !important; }
#grid4-app-shell a#bulkDeleteBtn.btn.btn-danger[style*="display"], #grid4-app-shell a#bulkDeleteBtn.btn.btn-danger.hide { color: #ffffff !important; }
.label-warning, .badge-warning {
color: white !important;
}
.label-success, .badge-success {
color: white !important;
}
.label.g4-themed.theme-light {
color: white !important;
}
.label-info, .badge-info {
background-color: #3a87ad;
color: white !important;
}
.nsicon.nsicon-phone-extension {
color: white !important;
}
.tooltip-inner {
color: white !important;
}
input#device {
width: 10rem !important;
}
.dropup .caret, .navbar-fixed-bottom .dropdown .caret {
border-bottom: unset !important;
}
span.badge.badge-information {
color: white !important;
}
span.badge.table-sentiment-positive {
color: white !important;
}
span.badge.table-sentiment-negative {
color: white !important;
}
span.badge.table-sentiment-neutral {
color: white !important;
}
.pill {
color: white !important;
}
span.label {
color: white !important;
}
#grid4-app-shell .nonecreated {
max-width: 32rem;
margin: 4rem auto 0 !important;
padding: 1.25rem 1.5rem !important;
text-align: center !important;
color: var(--text-muted) !important;
background: rgba(var(--surface-secondary-rgb), 0.45) !important;
border: 1px dashed var(--border-color) !important;
border-radius: var(--g4-radius-lg) !important;
box-shadow: 0 0.5rem 1.25rem var(--shadow-color) !important;
}
#grid4-app-shell .nonecreated h3,
#grid4-app-shell .nonecreated h4,
#grid4-app-shell .nonecreated h5 {
color: inherit !important;
font-weight: 600 !important;
letter-spacing: 0.01em;
margin-bottom: 0 !important;
}
#grid4-app-shell #home-vmail-body .nonecreated,
#grid4-app-shell #home-callhistory-body .nonecreated,
#grid4-app-shell #home-phones-body .nonecreated {
position: relative !important;
top: 0 !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
text-align: center !important;
color: var(--text-muted) !important;
}
#grid4-app-shell #home-vmail-body .nonecreated,
#grid4-app-shell #home-callhistory-body .nonecreated {
top: 5rem !important;
}
#grid4-app-shell #home-phones-body .nonecreated {
top: 1.25rem !important;
}
#grid4-app-shell #home-vmail-body .nonecreated h5,
#grid4-app-shell #home-callhistory-body .nonecreated h5,
#grid4-app-shell #home-phones-body .nonecreated p {
margin: 0 !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
}
.dock-contacts #recent-chat-table .contact-extension-td,
.dock-contacts #contacts-table .contact-extension-td {
position: relative !important;
width: 4.25rem !important;
min-width: 4.25rem !important;
max-width: 4.25rem !important;
white-space: nowrap !important;
padding-right: 0.375rem !important;
overflow: visible !important;
}
.dock-contacts #recent-chat-table .contact-extension,
.dock-contacts #contacts-table .contact-extension {
display: inline-block !important;
max-width: 100% !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
vertical-align: middle !important;
}
.dock-contacts #recent-chat-table .contact-buttons,
.dock-contacts #contacts-table .contact-buttons {
position: absolute !important;
top: 50% !important;
right: 0.375rem !important;
transform: translateY(-50%) !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 0.125rem !important;
white-space: nowrap !important;
z-index: 3 !important;
}
.dock-contacts #recent-chat-table .contact-row:hover .contact-buttons,
.dock-contacts #recent-chat-table .contact-buttons.open,
.dock-contacts #contacts-table .contact-row:hover .contact-buttons,
.dock-contacts #contacts-table .contact-buttons.open {
display: inline-flex !important;
}
.dock-contacts #recent-chat-table .contact-extension-td .btn,
.dock-contacts #recent-chat-table .contact-extension-td .btn-mini,
.dock-contacts #recent-chat-table .contact-extension-td [id^="videoicon"],
.dock-contacts #contacts-table .contact-extension-td .btn,
.dock-contacts #contacts-table .contact-extension-td .btn-mini,
.dock-contacts #contacts-table .contact-extension-td [id^="videoicon"] {
width: 1.125rem !important;
height: 1.125rem !important;
min-height: 1.125rem !important;
padding: 0 !important;
margin: 0 !important;
line-height: 1 !important;
border-radius: 0.25rem !important;
background-image: none !important;
box-shadow: none !important;
}
.dock-contacts #recent-chat-table .contact-extension-td .btn:not(.hide),
.dock-contacts #recent-chat-table .contact-extension-td .btn-mini:not(.hide),
.dock-contacts #recent-chat-table .contact-extension-td [id^="videoicon"],
.dock-contacts #contacts-table .contact-extension-td .btn:not(.hide),
.dock-contacts #contacts-table .contact-extension-td .btn-mini:not(.hide),
.dock-contacts #contacts-table .contact-extension-td [id^="videoicon"] {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.dock-contacts #recent-chat-table .contact-extension-td .btn-group,
.dock-contacts #contacts-table .contact-extension-td .btn-group {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
margin-left: 0 !important;
vertical-align: middle !important;
}
.dock-contacts #recent-chat-table .contact-extension-td .btn.hide,
.dock-contacts #recent-chat-table .contact-extension-td .btn-mini.hide,
.dock-contacts #contacts-table .contact-extension-td .btn.hide,
.dock-contacts #contacts-table .contact-extension-td .btn-mini.hide {
display: none !important;
}
.dock-contacts #recent-chat-table .contact-buttons > .dropdown-menu,
.dock-contacts #recent-chat-table .contact-buttons .btn-group > .dropdown-menu,
.dock-contacts #contacts-table .contact-buttons > .dropdown-menu,
.dock-contacts #contacts-table .contact-buttons .btn-group > .dropdown-menu {
display: none !important;
position: absolute !important;
top: calc(100% + 0.25rem) !important;
right: 0 !important;
left: auto !important;
margin-top: 0 !important;
}
.dock-contacts #recent-chat-table .contact-buttons.open > .dropdown-menu,
.dock-contacts #recent-chat-table .contact-buttons .btn-group.open > .dropdown-menu,
.dock-contacts #contacts-table .contact-buttons.open > .dropdown-menu,
.dock-contacts #contacts-table .contact-buttons .btn-group.open > .dropdown-menu {
display: block !important;
}
.dock-contacts #recent-chat-table .contact-extension-td .btn > i,
.dock-contacts #recent-chat-table .contact-extension-td .btn > span,
.dock-contacts #recent-chat-table .contact-extension-td .btn-mini > i,
.dock-contacts #recent-chat-table .contact-extension-td .btn-mini > span,
.dock-contacts #contacts-table .contact-extension-td .btn > i,
.dock-contacts #contacts-table .contact-extension-td .btn > span,
.dock-contacts #contacts-table .contact-extension-td .btn-mini > i,
.dock-contacts #contacts-table .contact-extension-td .btn-mini > span {
font-size: 0.625rem !important;
line-height: 1 !important;
}
body.theme-light .dock-contacts div.contact-dock-gravatar.gravatar-img-contact {
background: linear-gradient(145deg, #e0efff, #c6defe) !important;
border: 1px solid rgba(12, 74, 110, 0.14) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}
body.theme-light .dock-contacts div.contact-dock-gravatar.gravatar-img-contact p {
color: #12324a !important;
font-weight: 700 !important;
}
body.theme-dark .dock-contacts .dock-popup,
body.theme-dark .dock-contacts .dock-body,
body.theme-dark .dock-contacts .dock-row-table,
body.theme-dark .dock-contacts .contact-row-table,
body.theme-dark .dock-contacts .dock-row-table td,
body.theme-dark .dock-contacts .contact-row-table td,
body.theme-dark .dock-contacts .nonecreated-contacts {
background-color: var(--surface-primary-bg) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
body.theme-dark .dock-contacts .dock-popup {
box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.35) !important;
}
body.theme-dark .dock-contacts div.contact-dock-gravatar.gravatar-img-contact {
background: linear-gradient(145deg, #0d4f77, #194f8a) !important;
border: 1px solid rgba(255, 255, 255, 0.16) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
body.theme-dark .dock-contacts div.contact-dock-gravatar.gravatar-img-contact p {
color: #f8fbff !important;
font-weight: 700 !important;
text-shadow: none !important;
}
body.theme-dark .dock-column.dock-contacts .dock-head-button,
body.theme-dark .dock-column.dock-contacts .dock-head-button i,
body.theme-dark .dock-column.dock-contacts .dock-head-button span,
body.theme-dark .dock-column.dock-contacts .dock-head-button::before,
body.theme-dark .dock-column.dock-contacts .dock-head-button::after {
color: var(--text-primary) !important;
border-color: transparent !important;
text-shadow: none !important;
filter: none !important;
opacity: 1 !important;
-webkit-text-fill-color: currentColor !important;
}
body.theme-dark .dock-column.dock-contacts .dock-head-button:hover,
body.theme-dark .dock-column.dock-contacts .dock-head-button:focus {
background-color: rgba(255, 255, 255, 0.08) !important;
color: #ffffff !important;
}
body.theme-dark .dock-contacts .dock-head,
body.theme-dark .dock-contacts .dock-header,
body.theme-dark .dock-contacts #contact-groups,
body.theme-dark .dock-contacts #contact-groups.btn {
background-color: var(--surface-secondary-bg) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
body.theme-dark .dock-contacts .contact-row-table a,
body.theme-dark .dock-contacts .dock-row-table a,
body.theme-dark .dock-contacts .contact-name,
body.theme-dark .dock-contacts .contact-extension,
body.theme-dark .dock-contacts .nonecreated-contacts,
body.theme-dark .dock-contacts .nonecreated-conversations {
color: var(--text-primary) !important;
}
body.theme-dark .dock-contacts .dock-contacts-header,
body.theme-dark .dock-contacts .dock-contacts-header.top,
body.theme-dark .dock-contacts .contacts-message,
body.theme-dark .dock-contacts .contacts-message2,
body.theme-dark .dock-contacts #contacts-sort-search,
body.theme-dark .dock-contacts #recents-header,
body.theme-dark .dock-contacts .groups-container,
body.theme-dark .dock-contacts .contacts-connection {
background-color: var(--surface-secondary-bg) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
body.theme-dark .dock-contacts .dock-contacts-header.top h5,
body.theme-dark .dock-contacts #contacts-sort-search .dropdown-label,
body.theme-dark .dock-contacts #contacts-sort-search .dropdown-toggle > a,
body.theme-dark .dock-contacts #recents-header span {
color: var(--text-primary) !important;
}
body.theme-dark .dock-contacts #message,
body.theme-dark .dock-contacts #contacts-searchbox-input,
body.theme-dark .dock-contacts input[id^="device-text-dock-"] {
background-color: var(--surface-primary-bg) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-color) !important;
box-shadow: none !important;
}
body.theme-dark .dock-contacts #message::placeholder,
body.theme-dark .dock-contacts #contacts-searchbox-input::placeholder,
body.theme-dark .dock-contacts input[id^="device-text-dock-"]::placeholder {
color: var(--text-muted) !important;
}
body.theme-dark .dock-contacts #contacts-sort-search .contacts-sort-dropdown > .dropdown-toggle,
body.theme-dark .dock-contacts #contacts-sort-search .contacts-sort-dropdown > .dropdown-toggle > a.dropdown-toggle,
body.theme-dark .dock-contacts #contacts-sort-search #sortby,
body.theme-dark .dock-contacts .contacts-searchbox-icon,
body.theme-dark .dock-contacts .contacts-current-sortby-dock {
background-color: var(--surface-primary-bg) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
body.theme-dark .dock-contacts #contacts-sort-search .caret {
border-top-color: var(--text-primary) !important;
border-bottom-color: var(--text-primary) !important;
}
body.theme-dark .dock-contacts .contacts-current-sortby-dock .nsicon-sort,
body.theme-dark .dock-contacts .contacts-searchbox-icon .iconfont,
body.theme-dark .dock-contacts .contacts-message2-quotes,
body.theme-dark .dock-contacts .contacts-message2-pencil,
body.theme-dark .dock-contacts .contact-status-msg,
body.theme-dark .dock-contacts .contact-recent-msg {
color: var(--text-muted) !important;
}
body.theme-dark .dock-contacts .contacts-message2-text {
color: #a2a2a2 !important;
}
body.theme-dark .dock-contacts #group-dropdown,
body.theme-dark .dock-contacts #group-dropdown .dropdown-menu,
body.theme-dark .dock-contacts .contacts-sortby-toggle,
body.theme-dark .dock-contacts .dropdown-menu-phone-select,
body.theme-dark .dock-contacts .btn-group > .dropdown-menu {
background-color: var(--surface-primary-bg) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.25) !important;
}
body.theme-dark .dock-contacts #group-dropdown li > a,
body.theme-dark .dock-contacts #group-dropdown .dropdown-menu li > a,
body.theme-dark .dock-contacts .contacts-sortby-toggle li > a,
body.theme-dark .dock-contacts .dropdown-menu-phone-select li > a,
body.theme-dark .dock-contacts .btn-group > .dropdown-menu li > a,
body.theme-dark .dock-contacts .btn-group > .dropdown-menu .dropdown-icon-text,
body.theme-dark .dock-contacts .dropdown-menu-phone-option {
color: var(--text-primary) !important;
}
body.theme-dark .dock-contacts #group-dropdown li > a:hover,
body.theme-dark .dock-contacts #group-dropdown li > a:focus,
body.theme-dark .dock-contacts #group-dropdown .dropdown-menu li > a:hover,
body.theme-dark .dock-contacts #group-dropdown .dropdown-menu li > a:focus,
body.theme-dark .dock-contacts .contacts-sortby-toggle li > a:hover,
body.theme-dark .dock-contacts .contacts-sortby-toggle li > a:focus,
body.theme-dark .dock-contacts .dropdown-menu-phone-select li > a:hover,
body.theme-dark .dock-contacts .dropdown-menu-phone-select li > a:focus,
body.theme-dark .dock-contacts .btn-group > .dropdown-menu li > a:hover,
body.theme-dark .dock-contacts .btn-group > .dropdown-menu li > a:focus {
background-color: var(--surface-secondary-bg) !important;
color: var(--text-primary) !important;
}
body.theme-dark .dock-contacts #group-dropdown .divider,
body.theme-dark .dock-contacts .contacts-sortby-toggle .divider,
body.theme-dark .dock-contacts .dropdown-menu-phone-select .divider,
body.theme-dark .dock-contacts .btn-group > .dropdown-menu .divider {
background-color: transparent !important;
border-top-color: var(--border-color) !important;
}
body.theme-dark .dock-contacts #group-dropdown .dropdown-submenu > a:after {
border-left-color: var(--text-muted) !important;
}
body.theme-dark .dock-contacts #group-dropdown .dropdown-submenu:hover > a:after,
body.theme-dark .dock-contacts #group-dropdown .dropdown-submenu:focus > a:after {
border-left-color: var(--text-primary) !important;
}
body.theme-dark .dock-contacts .dock-contacts-header .btn,
body.theme-dark .dock-contacts .dock-contacts-header .btn-mini,
body.theme-dark .dock-contacts #new-msg,
body.theme-dark .dock-contacts #make-call,
body.theme-dark .dock-contacts .contacts-btn-toggle,
body.theme-dark .dock-contacts .recent-btn-toggle,
body.theme-dark .dock-contacts .transfermode,
body.theme-dark .dock-contacts .chat-btn,
body.theme-dark .dock-contacts .sms-btn,
body.theme-dark .dock-contacts .call-btn,
body.theme-dark .dock-contacts [id^="videoicon"] {
background-color: var(--surface-primary-bg) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-color) !important;
background-image: none !important;
filter: none !important;
box-shadow: none !important;
text-shadow: none !important;
}
body.theme-dark .dock-contacts .contacts-btn-toggle.active,
body.theme-dark .dock-contacts .recent-btn-toggle.active {
background-color: rgba(var(--accent-primary-rgb), 0.85) !important;
border-color: rgba(var(--accent-primary-rgb), 0.95) !important;
color: #ffffff !important;
}
body.theme-dark .dock-contacts .groups-container .btn-group-toggle {
display: flex !important;
gap: 0.25rem !important;
width: 100% !important;
}
body.theme-dark .dock-contacts .groups-container .btn-group-toggle > .btn {
flex: 1 1 0 !important;
background: var(--surface-primary-bg) !important;
background-image: none !important;
color: var(--text-secondary) !important;
border: 1px solid var(--border-color) !important;
filter: none !important;
opacity: 1 !important;
-webkit-text-fill-color: currentColor !important;
box-shadow: none !important;
text-shadow: none !important;
}
body.theme-dark .dock-contacts .groups-container .btn-group-toggle > .btn:hover,
body.theme-dark .dock-contacts .groups-container .btn-group-toggle > .btn:focus {
background: var(--surface-secondary-bg) !important;
background-image: none !important;
color: var(--text-primary) !important;
filter: none !important;
opacity: 1 !important;
-webkit-text-fill-color: currentColor !important;
}
body.theme-dark .dock-contacts .groups-container .btn-group-toggle > .btn.active,
body.theme-dark .dock-contacts .groups-container .btn-group-toggle > .btn.active:hover,
body.theme-dark .dock-contacts .groups-container .btn-group-toggle > .btn.active:focus {
background: rgba(var(--accent-primary-rgb), 0.85) !important;
background-image: none !important;
border-color: rgba(var(--accent-primary-rgb), 0.95) !important;
color: #ffffff !important;
filter: none !important;
opacity: 1 !important;
-webkit-text-fill-color: currentColor !important;
}
body.theme-dark .dock-contacts .dock-contacts-header.top #videoicon > span,
body.theme-dark .dock-contacts .dock-contacts-header.top #new-msg > i,
body.theme-dark .dock-contacts .dock-contacts-header.top #make-call > i {
filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
body.theme-dark .dock-contacts #recent-chat-table .contact-extension-td .btn,
body.theme-dark .dock-contacts #recent-chat-table .contact-extension-td .btn-mini,
body.theme-dark .dock-contacts #recent-chat-table .contact-extension-td [id^="videoicon"],
body.theme-dark .dock-contacts #contacts-table .contact-extension-td .btn,
body.theme-dark .dock-contacts #contacts-table .contact-extension-td .btn-mini,
body.theme-dark .dock-contacts #contacts-table .contact-extension-td [id^="videoicon"] {
background-color: var(--surface-primary-bg) !important;
color: var(--text-primary) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
}
/* Contacts dock follow-up:
- center the header action icons inside their mini buttons
- keep the sort/search row on a stable single line
- force placeholder gravatars into a true circle instead of an oval */
body .dock-contacts .dock-contacts-header.top #videoicon,
body .dock-contacts .dock-contacts-header.top #new-msg,
body .dock-contacts .dock-contacts-header.top #make-call {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 1.95rem !important;
min-width: 1.95rem !important;
height: 1.55rem !important;
min-height: 1.55rem !important;
padding: 0 !important;
line-height: 1 !important;
}
body .dock-contacts .dock-contacts-header.top #videoicon > span,
body .dock-contacts .dock-contacts-header.top #new-msg > i,
body .dock-contacts .dock-contacts-header.top #make-call > i {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 0.9rem !important;
height: 0.9rem !important;
margin: 0 !important;
line-height: 1 !important;
position: static !important;
}
body .dock-contacts #contacts-sort-search {
display: flex !important;
align-items: center !important;
gap: 0.35rem !important;
padding: 0.3rem 0.2rem 0.15rem !important;
}
body .dock-contacts #contacts-sort-search .contacts-sort-dropdown {
display: flex !important;
align-items: center !important;
gap: 0.35rem !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
body .dock-contacts #contacts-sort-search .contacts-sort-dropdown > div[style*="table-cell"] {
display: block !important;
width: auto !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
body .dock-contacts #contacts-sort-search .contacts-sort-dropdown > .dropdown-toggle,
body .dock-contacts #contacts-sort-search .contacts-sort-dropdown > .dropdown-toggle > a.dropdown-toggle {
display: inline-flex !important;
align-items: center !important;
min-height: 1.4rem !important;
}
body .dock-contacts #contacts-sort-search #sortby {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 1.85rem !important;
min-width: 1.85rem !important;
height: 1.85rem !important;
min-height: 1.85rem !important;
margin: 0 !important;
}
body .dock-contacts .contacts-current-sortby-dock .nsicon-sort {
position: static !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0.95rem !important;
line-height: 1 !important;
margin: 0 !important;
}
body .dock-contacts #searchbox {
position: relative !important;
display: block !important;
flex: 0 0 15.5625rem !important;
width: 15.5625rem !important;
min-width: 15.5625rem !important;
height: 1.9rem !important;
min-height: 1.9rem !important;
margin: 0 0 0 auto !important;
}
body .dock-contacts #searchbox > .searchbox-input {
top: 0 !important;
right: 0 !important;
width: 100% !important;
height: 100% !important;
min-height: 100% !important;
padding-right: 2.25rem !important;
}
body .dock-contacts .contacts-searchbox-icon {
top: 0 !important;
right: 0 !important;
width: 2.25rem !important;
height: 100% !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body .dock-contacts .contacts-searchbox-icon .iconfont-search {
position: static !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
margin: 0 !important;
}
body .dock-contacts div.contact-dock-gravatar.gravatar-img-contact {
width: 2.2rem !important;
height: 2.2rem !important;
border-radius: 50% !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body .dock-contacts div.contact-dock-gravatar.gravatar-img-contact img {
width: 100% !important;
height: 100% !important;
border-radius: 50% !important;
object-fit: cover !important;
display: block !important;
}
body .dock-contacts div.contact-dock-gravatar.gravatar-img-contact > p {
margin: 0 !important;
line-height: 1 !important;
}
body.theme-dark .dock-contacts #recent-chat-table .contact-extension-td .btn > i,
body.theme-dark .dock-contacts #recent-chat-table .contact-extension-td .btn > span,
body.theme-dark .dock-contacts #recent-chat-table .contact-extension-td .btn-mini > i,
body.theme-dark .dock-contacts #recent-chat-table .contact-extension-td .btn-mini > span,
body.theme-dark .dock-contacts #recent-chat-table .contact-extension-td .btn .nsicon,
body.theme-dark .dock-contacts #recent-chat-table .contact-extension-td .btn-mini .nsicon,
body.theme-dark .dock-contacts #contacts-table .contact-extension-td .btn > i,
body.theme-dark .dock-contacts #contacts-table .contact-extension-td .btn > span,
body.theme-dark .dock-contacts #contacts-table .contact-extension-td .btn-mini > i,
body.theme-dark .dock-contacts #contacts-table .contact-extension-td .btn-mini > span,
body.theme-dark .dock-contacts #contacts-table .contact-extension-td .btn .nsicon,
body.theme-dark .dock-contacts #contacts-table .contact-extension-td .btn-mini .nsicon {
color: inherit !important;
opacity: 1 !important;
text-shadow: none !important;
filter: brightness(0) invert(1) !important;
}
body.theme-dark .dock-contacts #recent-chat-table .contact-row:hover .contact-buttons .btn:hover,
body.theme-dark .dock-contacts #recent-chat-table .contact-row:hover .contact-buttons .btn:focus,
body.theme-dark .dock-contacts #contacts-table .contact-row:hover .contact-buttons .btn:hover,
body.theme-dark .dock-contacts #contacts-table .contact-row:hover .contact-buttons .btn:focus {
background-color: var(--surface-secondary-bg) !important;
background-image: none !important;
color: var(--text-primary) !important;
}
body.theme-dark .dock-contacts #recent-chat-table .contact-extension-td .btn:hover,
body.theme-dark .dock-contacts #recent-chat-table .contact-extension-td .btn:focus,
body.theme-dark .dock-contacts #recent-chat-table .contact-extension-td .btn-mini:hover,
body.theme-dark .dock-contacts #recent-chat-table .contact-extension-td .btn-mini:focus,
body.theme-dark .dock-contacts #contacts-table .contact-extension-td .btn:hover,
body.theme-dark .dock-contacts #contacts-table .contact-extension-td .btn:focus,
body.theme-dark .dock-contacts #contacts-table .contact-extension-td .btn-mini:hover,
body.theme-dark .dock-contacts #contacts-table .contact-extension-td .btn-mini:focus {
background-color: rgba(var(--accent-primary-rgb), 0.18) !important;
border-color: rgba(var(--accent-primary-rgb), 0.45) !important;
}
body.theme-light .dock-column.dock-contacts .scroll-container,
body.theme-dark .dock-column.dock-contacts .scroll-container {
overflow-x: hidden !important;
padding-right: 0 !important;
}
/* Dock/chat scrollbar colors now defer to the final tokenized scrollbar block
near the end of the file. Keep only behavior-oriented overflow adjustments
here so dock surfaces do not drift from the shared scrollbar language. */
body.theme-dark .dock-column.uc-message-box-column .dock-popup,
body.theme-dark #conversation-new .dock-popup {
background-color: var(--surface-primary-bg) !important;
border: 1px solid var(--border-color) !important;
box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.35) !important;
}
body.theme-dark .dock-column.uc-message-box-column .dock-head,
body.theme-dark #conversation-new .dock-head,
body.theme-dark .dock-column.uc-message-box-column .dock-submenu,
body.theme-dark #conversation-new .dock-submenu,
body.theme-dark .dock-column.uc-message-box-column .uc-chat-message-box,
body.theme-dark #conversation-new .uc-chat-message-box,
body.theme-dark .dock-column.uc-message-box-column .sms-chat-footer,
body.theme-dark #conversation-new .sms-chat-footer,
body.theme-dark .dock-column.uc-message-box-column .flex-container-participants,
body.theme-dark #conversation-new .flex-container-participants {
background-color: var(--surface-secondary-bg) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
body.theme-dark .dock-column.uc-message-box-column .dock-head,
body.theme-dark #conversation-new .dock-head,
body.theme-dark .dock-column.uc-message-box-column .dock-submenu,
body.theme-dark #conversation-new .dock-submenu {
border-bottom: 1px solid var(--border-color) !important;
}
body.theme-dark .dock-column.uc-message-box-column .dock-head-title,
body.theme-dark .dock-column.uc-message-box-column .dock-head-title span,
body.theme-dark .dock-column.uc-message-box-column .dock-head-title i,
body.theme-dark .dock-column.uc-message-box-column .dock-name,
body.theme-dark #conversation-new .dock-head-title,
body.theme-dark #conversation-new .dock-head-title span,
body.theme-dark #conversation-new .dock-head-title i,
body.theme-dark #conversation-new .dock-name {
color: var(--text-primary) !important;
}
body.theme-dark .dock-column.uc-message-box-column .dock-head-button,
body.theme-dark .dock-column.uc-message-box-column .dock-head-button i,
body.theme-dark .dock-column.uc-message-box-column .dock-head-button span,
body.theme-dark .dock-column.uc-message-box-column .dock-submenu-button,
body.theme-dark .dock-column.uc-message-box-column .dock-submenu-button i,
body.theme-dark .dock-column.uc-message-box-column .dock-submenu-button span,
body.theme-dark #conversation-new .dock-head-button,
body.theme-dark #conversation-new .dock-head-button i,
body.theme-dark #conversation-new .dock-head-button span,
body.theme-dark #conversation-new .dock-submenu-button,
body.theme-dark #conversation-new .dock-submenu-button i,
body.theme-dark #conversation-new .dock-submenu-button span {
-webkit-text-fill-color: currentColor !important;
filter: none !important;
}
body.theme-dark .dock-column.uc-message-box-column .dock-body,
body.theme-dark #conversation-new .dock-body,
body.theme-dark .dock-column.uc-message-box-column .ns-chat,
body.theme-dark #conversation-new .ns-chat,
body.theme-dark .dock-column.uc-message-box-column .chat-box,
body.theme-dark #conversation-new .chat-box,
body.theme-dark .dock-column.uc-message-box-column .chat-messages-container,
body.theme-dark #conversation-new .chat-messages-container,
body.theme-dark .dock-column.uc-message-box-column .chat-messages,
body.theme-dark #conversation-new .chat-messages {
background-color: var(--surface-primary-bg) !important;
color: var(--text-primary) !important;
}
body.theme-dark .dock-column.uc-message-box-column .chat-box,
body.theme-dark #conversation-new .chat-box {
border-bottom: 1px solid var(--border-color) !important;
}
body.theme-dark .dock-column.uc-message-box-column .chat-row,
body.theme-dark .dock-column.uc-message-box-column .chat-message-row,
body.theme-dark #conversation-new .chat-row,
body.theme-dark #conversation-new .chat-message-row {
background: transparent !important;
}
body.theme-dark .dock-column.uc-message-box-column .dock-head-button,
body.theme-dark .dock-column.uc-message-box-column .dock-submenu-button,
body.theme-dark #conversation-new .dock-head-button,
body.theme-dark #conversation-new .dock-submenu-button {
color: var(--text-secondary) !important;
border-radius: 0.25rem !important;
transition: background-color 0.2s ease, color 0.2s ease;
}
body.theme-dark .dock-column.uc-message-box-column .dock-head-button:hover,
body.theme-dark .dock-column.uc-message-box-column .dock-head-button:focus,
body.theme-dark .dock-column.uc-message-box-column .dock-submenu-button:hover,
body.theme-dark .dock-column.uc-message-box-column .dock-submenu-button:focus,
body.theme-dark #conversation-new .dock-head-button:hover,
body.theme-dark #conversation-new .dock-head-button:focus,
body.theme-dark #conversation-new .dock-submenu-button:hover,
body.theme-dark #conversation-new .dock-submenu-button:focus {
background-color: rgba(255, 255, 255, 0.08) !important;
color: var(--text-primary) !important;
}
body.theme-dark .dock-column.uc-message-box-column .dock-head-button i,
body.theme-dark .dock-column.uc-message-box-column .dock-head-button span,
body.theme-dark .dock-column.uc-message-box-column .dock-submenu-button i,
body.theme-dark .dock-column.uc-message-box-column .dock-submenu-button span,
body.theme-dark .dock-column.uc-message-box-column .dock-submenu-button a,
body.theme-dark .dock-column.uc-message-box-column .dock-submenu-button a i,
body.theme-dark .dock-column.uc-message-box-column .dock-submenu-button a span,
body.theme-dark #conversation-new .dock-head-button i,
body.theme-dark #conversation-new .dock-head-button span,
body.theme-dark #conversation-new .dock-submenu-button i,
body.theme-dark #conversation-new .dock-submenu-button span,
body.theme-dark #conversation-new .dock-submenu-button a,
body.theme-dark #conversation-new .dock-submenu-button a i,
body.theme-dark #conversation-new .dock-submenu-button a span {
color: inherit !important;
opacity: 1 !important;
text-shadow: none !important;
}
body.theme-dark .dock-column.uc-message-box-column .dropdown-menu,
body.theme-dark .dock-column.uc-message-box-column .name-change-bubble,
body.theme-dark #conversation-new .dropdown-menu,
body.theme-dark #conversation-new .name-change-bubble {
background-color: var(--surface-primary-bg) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-color) !important;
box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.25) !important;
}
body.theme-dark .dock-column.uc-message-box-column .dropdown-menu li > a,
body.theme-dark .dock-column.uc-message-box-column .dropdown-menu .dropdown-icon-text,
body.theme-dark #conversation-new .dropdown-menu li > a,
body.theme-dark #conversation-new .dropdown-menu .dropdown-icon-text {
color: var(--text-primary) !important;
}
body.theme-dark .dock-column.uc-message-box-column .dropdown-menu li > a:hover,
body.theme-dark .dock-column.uc-message-box-column .dropdown-menu li > a:focus,
body.theme-dark #conversation-new .dropdown-menu li > a:hover,
body.theme-dark #conversation-new .dropdown-menu li > a:focus {
background-color: var(--surface-secondary-bg) !important;
color: var(--text-primary) !important;
}
body.theme-dark .dock-column.uc-message-box-column .message-to-send,
body.theme-dark .dock-column.uc-message-box-column textarea.message-to-send,
body.theme-dark .dock-column.uc-message-box-column .namechange-input,
body.theme-dark .dock-column.uc-message-box-column .selectivity-multiple-input,
body.theme-dark .dock-column.uc-message-box-column .selectivity-multiple-input-container,
body.theme-dark #conversation-new .message-to-send,
body.theme-dark #conversation-new textarea.message-to-send,
body.theme-dark #conversation-new .namechange-input,
body.theme-dark #conversation-new .selectivity-multiple-input,
body.theme-dark #conversation-new .selectivity-multiple-input-container {
background-color: var(--surface-primary-bg) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
box-shadow: none !important;
}
body.theme-dark .dock-column.uc-message-box-column .message-to-send::placeholder,
body.theme-dark .dock-column.uc-message-box-column .namechange-input::placeholder,
body.theme-dark .dock-column.uc-message-box-column .selectivity-multiple-input::placeholder,
body.theme-dark #conversation-new .message-to-send::placeholder,
body.theme-dark #conversation-new .namechange-input::placeholder,
body.theme-dark #conversation-new .selectivity-multiple-input::placeholder {
color: var(--text-muted) !important;
}
body.theme-dark .dock-column.uc-message-box-column .chat-inbound .chat-well,
body.theme-dark #conversation-new .chat-inbound .chat-well {
background-color: var(--surface-secondary-bg) !important;
border: 1px solid var(--border-color) !important;
box-shadow: none !important;
}
body.theme-dark .dock-column.uc-message-box-column .chat-outbound .chat-well,
body.theme-dark .dock-column.uc-message-box-column .chat-outbound .chat-message-green,
body.theme-dark .dock-column.uc-message-box-column .chat-outbound .chat-type-sms,
body.theme-dark .dock-column.uc-message-box-column .chat-outbound .chat-type-mms,
body.theme-dark #conversation-new .chat-outbound .chat-well,
body.theme-dark #conversation-new .chat-outbound .chat-message-green,
body.theme-dark #conversation-new .chat-outbound .chat-type-sms,
body.theme-dark #conversation-new .chat-outbound .chat-type-mms {
background-color: rgba(var(--accent-primary-rgb), 0.88) !important;
border: 1px solid rgba(var(--accent-primary-rgb), 0.55) !important;
}
body.theme-dark .dock-column.uc-message-box-column .chat-inbound .chat-message,
body.theme-dark .dock-column.uc-message-box-column .chat-inbound .chat-well p,
body.theme-dark #conversation-new .chat-inbound .chat-message,
body.theme-dark #conversation-new .chat-inbound .chat-well p {
color: var(--text-primary) !important;
}
body.theme-dark .dock-column.uc-message-box-column .chat-outbound .chat-message,
body.theme-dark .dock-column.uc-message-box-column .chat-outbound .chat-well p,
body.theme-dark #conversation-new .chat-outbound .chat-message,
body.theme-dark #conversation-new .chat-outbound .chat-well p {
color: #ffffff !important;
}
body.theme-dark .dock-column.uc-message-box-column .uc-chat-user h3,
body.theme-dark .dock-column.uc-message-box-column .chat-timestamp,
body.theme-dark .dock-column.uc-message-box-column .pending-message-note,
body.theme-dark .dock-column.uc-message-box-column .name-change-message,
body.theme-dark .dock-column.uc-message-box-column .chat-participant-uid-td,
body.theme-dark #conversation-new .uc-chat-user h3,
body.theme-dark #conversation-new .chat-timestamp,
body.theme-dark #conversation-new .pending-message-note,
body.theme-dark #conversation-new .name-change-message,
body.theme-dark #conversation-new .chat-participant-uid-td {
color: var(--text-muted) !important;
}
body.theme-dark .dock-column.uc-message-box-column .chat-file-upload-stats,
body.theme-dark #conversation-new .chat-file-upload-stats {
border-top-color: var(--border-color) !important;
color: var(--text-muted) !important;
}
body.theme-dark .dock-column.uc-message-box-column .dock-chat-footer-alert,
body.theme-dark #conversation-new .dock-chat-footer-alert {
background-color: rgba(var(--accent-primary-rgb), 0.15) !important;
border: 1px solid rgba(var(--accent-primary-rgb), 0.35) !important;
color: var(--text-primary) !important;
}
body.theme-dark .dock-column.uc-message-box-column .smsnumberbar,
body.theme-dark .dock-column.uc-message-box-column .drop-target-message,
body.theme-dark #conversation-new .smsnumberbar,
body.theme-dark #conversation-new .drop-target-message {
color: var(--text-muted) !important;
}
body.theme-dark .dock-column.uc-message-box-column .smsnumberbar .smsnumber,
body.theme-dark .dock-column.uc-message-box-column .bluetext,
body.theme-dark #conversation-new .smsnumberbar .smsnumber,
body.theme-dark #conversation-new .bluetext {
color: var(--accent-primary) !important;
}
body.theme-dark .dock-column.uc-message-box-column .smsnumberbar .caret,
body.theme-dark #conversation-new .smsnumberbar .caret {
border-bottom-color: var(--accent-primary) !important;
}
body.theme-dark .dock-contacts .device-select,
body.theme-dark .dock-contacts .device-select-dock,
body.theme-dark .dock-contacts .dropdown-menu-phone-select {
background-color: var(--surface-primary-bg) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
-webkit-text-fill-color: var(--text-primary) !important;
}
body.theme-dark .dock-contacts .device-select option,
body.theme-dark .dock-contacts .device-select-dock option {
background-color: var(--surface-primary-bg) !important;
color: var(--text-primary) !important;
}
body.theme-dark .dock-contacts .dropdown-menu-phone-option small,
body.theme-dark .dock-contacts .muted.table-smaller {
color: var(--text-secondary) !important;
}
body.theme-dark .dock-contacts .click2callphonedefault {
accent-color: var(--accent-primary) !important;
}
body.theme-dark .dock-contacts #changePhones {
color: var(--accent-primary) !important;
}
body.theme-dark .dock-contacts .contacts-connection .close {
color: var(--text-primary) !important;
opacity: 0.8 !important;
text-shadow: none !important;
}
.bootstrap-switch-container {
/* border: 3px red; */
background-color: white !important;
}
span.bootstrap-switch-handle-off.bootstrap-switch-default {
color: red !important;
font-weight: 600;
}
span#nav-msg-count {
align-items: center;
gap: 0.75rem;
padding: 0.45rem .45rem !important;
top: unset !important;
right: 10px !important;
}
/* .theme-dark button.close.cancel {
filter: invert(1) brightness(1) !important;
} */
.form-horizontal .control-label {
width: unset;
}
.theme-dark .checkmark
{
filter: invert(1) brightness(1) !important;
}
.theme-dark i.icon-info-sign {
filter: invert(1) brightness(1) !important;
}
#grid4-app-shell.theme-dark .icon-calendar {
filter: invert(1) brightness(2.5) contrast(1.5) !important;
}
h3.popover-title {
color: var(--text-primary) !important;
}
.popover-title, .popover-content
{
background-color: var(--surface-primary-bg) !important;
}
a.btn.btn-medium.btn-danger
{
color: var(--text-primary) !important;
}
#user-edit > div.form-actions.affix-form-actions.scroll-to-fixed-fixed > div > div.popover-content.text-center > div > a:nth-child(2)
{
color: var(--text-primary) !important;
text-shadow: none !important;
}
#grid4-app-shell input.btn.color-primary.span2.saving.saveBtn,
#grid4-app-shell .btn.color-primary.saving.span2.saveBtn,
html:not([data-grid4-skin="off"]) body .modal input.btn.color-primary.span2.saving.saveBtn,
html:not([data-grid4-skin="off"]) body .modal .btn.color-primary.saving.span2.saveBtn {
width: auto !important;
min-width: 7rem !important;
min-height: 1.95rem !important;
height: auto !important;
line-height: 1.25 !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
text-align: center !important;
}
#grid4-app-shell a.label {
/*background-color: darkviolet !important; */
color: white !important;
padding: .2rem;
}
#grid4-app-shell .action-container-left.uiconfig-defs
{
float: left !important;
}
/* Fixing icons in the Contacts/Chat Dock */
i.icon-white.icon-minimize {
filter: unset !important;
}
.icon-share-alt {
filter: unset !important;
background-position: -336px -96px;
}
#new-msg > i {
filter: unset !important;
}
#make-call > i {
filter: unset !important;
}
/* Fixing the sub nav vm badge text on the Messages page*/
#sub-nav-vm-count {
color: white !important;
}
#grid4-app-shell.theme-light span#nav-msg-count {
color: white !important;
}
#grid4-app-shell.theme-dark span#nav-msg-count {
color: white !important;
}
/* Dropdown items: white text on hover/active */
#grid4-app-shell .dropdown-menu > li > a:hover,
#grid4-app-shell .dropdown-menu > li > a:focus,
#grid4-app-shell .dropdown-menu > li:hover > a,
#grid4-app-shell .dropdown-menu > .active > a {
color: #fff !important;
}
/* Icons inside dropdown items follow the text color */
#grid4-app-shell .dropdown-menu > li > a .fa,
#grid4-app-shell .dropdown-menu > li > a .iconfont,
#grid4-app-shell .dropdown-menu > li > a [class^="icon-"],
#grid4-app-shell .dropdown-menu > li > a [class*=" icon-"] {
color: inherit !important;
filter: none !important; /* beats inline filters from JS, only inside menus */
}
#grid4-app-shell form .control-group.group {
margin-bottom: .9rem !important;
margin-top: .5rem !important;
}
/* SIP Trunks › Edit › Header Manipulation — responsive row, no h‑scroll */
#grid4-app-shell .modal #siptrunk-edit-header .control-group .controls {
overflow-x: hidden; /* safety against tiny rounding overflows */
}
#grid4-app-shell .modal #siptrunk-edit-header .input-prepend.input-append {
display: flex !important;
align-items: stretch !important;
width: 100% !important;
max-width: 100% !important;
gap: 0 !important; /* we join the pieces; borders define seams */
}
/* Left box (user) */
#grid4-app-shell .modal #siptrunk-edit-header .split-input-left {
flex: 0 0 24%; /* percentage so it scales with modal */
min-width: 100px; /* never too tiny */
margin: 0 !important;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
/* Middle “@” chip */
#grid4-app-shell .modal #siptrunk-edit-header .input-prepend.input-append > .add-on {
flex: 0 0 42px; /* fixed, compact chip */
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 32px !important;
line-height: 32px !important;
border-left: 0 !important;
border-right: 0 !important;
}
/* Right box (host) — grows to fill remaining width */
#grid4-app-shell .modal #siptrunk-edit-header .split-input-right {
flex: 1 1 0 !important;
min-width: 0 !important; /* allow shrinking inside flex container */
width: auto !important;
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
/* Uneditable “Server's IP” variant */
#grid4-app-shell .modal #siptrunk-edit-header .uneditable-input.split-input-right {
display: flex !important;
align-items: center !important;
height: 32px !important;
line-height: 32px !important;
padding: 0 10px !important;
}
/* Optional: tiny screens/dev tools narrow widths */
@media (max-width: 640px) {
#grid4-app-shell .modal #siptrunk-edit-header .split-input-left { flex-basis: 35%; min-width: 90px; }
#grid4-app-shell .modal #siptrunk-edit-header .input-prepend.input-append > .add-on { flex-basis: 36px; }
}
/* AUTO ATTENDANTS (edit) — side-by-side Prompt | Dial Pad */
body.page-autoattendants #grid4-app-shell .attendant-creation {
overflow-x: hidden; /* safety */
}
/* Header labels: "Menu Prompt" (left) | "Dial Pad Menu" (right) */
body.page-autoattendants #grid4-app-shell
.attendant-creation .attendant-header.form-actions {
display: flex !important;
justify-content: space-between !important;
align-items: left !important;
background: transparent !important;
border: 0 !important;
padding: 4px 0 !important;
padding-bottom: 0.5rem !important;
}
body.page-autoattendants #grid4-app-shell .attendant-creation .attendant-header.form-actions .pull-left,
body.page-autoattendants #grid4-app-shell
.attendant-creation .attendant-header.form-actions .pull-right {
float: none !important; /* kill legacy float */
padding-bottom: 0.5rem !important;
}
/* Main row container: id starts with attendant_tier_ */
body.page-autoattendants #grid4-app-shell .attendant-creation [id^="attendant_tier_"].attendant-tier-options {
display: flex;
align-items: flex-start !important;
gap: 8px !important;
width: 100% !important;
max-width: 90% !important;
padding: 0.2rem !important;
}
body.page-autoattendants #grid4-app-shell .attendant-creation [id^="attendant_tier_"].attendant-tier-options.grid4-aa-visible {
display: flex !important;
}
body.page-autoattendants #grid4-app-shell .attendant-creation [id^="attendant_tier_"].attendant-tier-options.grid4-aa-hidden,
body.page-autoattendants #grid4-app-shell .attendant-creation [id^="attendant_tier_"].attendant-tier-options.hide,
body.page-autoattendants #grid4-app-shell .attendant-creation [id^="attendant_tier_"].attendant-tier-options[style*="display: none"],
body.page-autoattendants #grid4-app-shell .attendant-creation [id^="attendant_tier_"].attendant-tier-options[style*="display:none"] {
display: none !important;
}
body.page-autoattendants #grid4-app-shell [id^="aatierdata"].grid4-aa-visible,
body.page-autoattendants #grid4-app-shell [id^="aatierdata"]:not(.grid4-aa-hidden):not(.hide) {
display: block !important;
}
body.page-autoattendants #grid4-app-shell [id^="aatierdata"].grid4-aa-hidden,
body.page-autoattendants #grid4-app-shell [id^="aatierdata"].hide,
body.page-autoattendants #grid4-app-shell [id^="aatierdata"][style*="display: none"],
body.page-autoattendants #grid4-app-shell [id^="aatierdata"][style*="display:none"] {
display: none !important;
}
/* Left column = prompt/media area */
body.page-autoattendants #grid4-app-shell
.attendant-creation [id^="attendant_tier_"].attendant-tier-options > .pull-left {
float: none !important;
order: 1 !important;
flex: 1 1 420px !important; /* grows/shrinks with modal */
min-width: 260px !important; /* don’t crush controls */
}
/* Right column = dial pad */
body.page-autoattendants #grid4-app-shell
.attendant-creation [id^="attendant_tier_"].attendant-tier-options > .dialpad.pull-right {
float: none !important;
order: 2 !important;
flex: 0 0 auto !important;
margin-left: auto !important; /* pin to right edge */
display: inline-block !important;
max-width: 100% !important;
}
/* Small widths: allow wrapping so nothing overflows */
@media (max-width: 1024px) {
body.page-autoattendants #grid4-app-shell
.attendant-creation [id^="attendant_tier_"].attendant-tier-options {
flex-wrap: wrap !important;
row-gap: 2rem !important;
}
body.page-autoattendants #grid4-app-shell
.attendant-creation [id^="attendant_tier_"].attendant-tier-options > .dialpad.pull-right {
margin-left: 0 !important;
width: 100% !important; /* dial pad drops below on narrow */
}
}
#grid4-app-shell button#trace-share-btn, button#trace-export-btn {
margin-bottom: unset !important;
}
/* 1) SIP Flow header sticks to the top (fixes misaligned header on long calls) */
body.page-callhistory #grid4-app-shell .flow-header {
position: sticky !important;
top: 0 !important; /* beat inline top values */
z-index: 5 !important;
}
/* 2) Dark mode: white ladder lines and markers, without touching text */
body.page-callhistory #grid4-app-shell.theme-dark
.flow-fullscreen-container svg path,
body.page-callhistory #grid4-app-shell.theme-dark
.flow-fullscreen-container svg circle {
stroke: #fff !important;
}
/* Only flip dark fills used for shapes (not text) to white */
body.page-callhistory #grid4-app-shell.theme-dark
.flow-fullscreen-container svg path[fill="#1A1A1A"],
body.page-callhistory #grid4-app-shell.theme-dark
.flow-fullscreen-container svg rect[fill="#1A1A1A"] {
fill: #fff !important;
}
/* 3) Keep message-bubble text dark on the white pills */
body.page-callhistory #grid4-app-shell.theme-dark
.flow-fullscreen-container g[data-msg] text {
fill: #111 !important; /* or #000 if you prefer */
font-weight: 600;
}
/* 4) Left-side time scale numbers should be white in dark mode */
body.page-callhistory #grid4-app-shell.theme-dark
.flow-time text {
fill: #fff !important;
opacity: 0.9;
}
body.page-callhistory #grid4-app-shell .svelte-1v18tvj {
background-color: var(--accent-primary) !important;
}
span.flow-filter.svelte-6anihf {
color: white !important;
}
span.sl-sipmethod {
color: white !important;
}
#grid4-app-shell i.nsicon.nsicon-reply {
color: white !important;
}
div.flow-time.svelte-tppiux>svg.svelte-tppiux>text.selected.svelte-tppiux.svelte-tppiux {
fill: white !important;
}
/* ===================================================================
SECTION: CALENDAR/TIME PICKER ADD-ON FIX (Global)
- Restore inline icon cell for .input-prepend/.input-append add-ons.
- Fixes calendar/time icons showing as tall blocks under inputs.
- Theme-aware background/border; works in light and dark modes.
- Does not affect SIP Trunk “Header Manipulation” which has a
more specific rule that still uses flex for its "@" chip.
=================================================================== */
#grid4-app-shell .input-append > .add-on,
#grid4-app-shell .input-prepend > .add-on {
/* Revert to inline cell so it sits on the same line as the input */
display: inline-block !important; /* beat earlier display:flex */
vertical-align: middle !important;
/* Compact sizing to align visually with ~28px inputs */
padding: 2px 6px !important;
height: 1.6rem !important; /* ~25-26px */
min-height: 0 !important; /* undo the 1.75rem min-height */
line-height: 1.6rem !important;
/* Theme-aware surface and border */
background-color: var(--surface-secondary-bg) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
/* Keep the icon inside small and centered without stretching the cell */
#grid4-app-shell .input-append > .add-on > i[class^="icon-"],
#grid4-app-shell .input-append > .add-on > i[class*=" icon-"],
#grid4-app-shell .input-prepend > .add-on > i[class^="icon-"],
#grid4-app-shell .input-prepend > .add-on > i[class*=" icon-"] {
display: inline-block !important;
font-size: 14px !important;
line-height: 1 !important;
width: auto !important;
height: auto !important;
}
/* Optional: tighten seam between input and add-on in Bootstrap 2 groups */
#grid4-app-shell .input-append > .add-on { margin-left: -1px !important; }
#grid4-app-shell .input-prepend > .add-on { margin-right: -1px !important; }
/*presence icons need the default colors restored */
#grid4-app-shell .agent-presence-user-phone.loggedin {
color: #00A304 !important;
}
#grid4-app-shell .agent-presence-user-phone.loggedout {
color: #D4D4D4 !important;
}
#grid4-app-shell .agent-presence-user-phone.onphone {
color: #FF1200 !important;
}
/* Fix the Call Queues container on the call center page and its domain-home sibling */
#home-queues-body,
#omp-active-body {
min-height: 10rem !important;
max-height: 30rem !important;
overflow-y: auto;
/* max-width: 60rem; */
}
#home-queues-body.g4-empty-state-panel,
#omp-active-body.g4-empty-state-panel,
#omp-active-body-meetings.g4-empty-state-panel {
min-height: 13.5rem !important;
height: auto !important;
max-height: none !important;
overflow-y: visible !important;
padding-bottom: 1rem !important;
}
#omp-active-body.g4-empty-state-panel > .table-container,
#omp-active-body.g4-empty-state-panel > .table-container.scrollable-small,
#omp-active-body.g4-empty-state-panel > .table-container.with-meetings,
#omp-active-body-meetings.g4-empty-state-panel > .table-container,
#omp-active-body-meetings.g4-empty-state-panel > .table-container.scrollable-small {
min-height: 0 !important;
height: auto !important;
max-height: none !important;
overflow-y: visible !important;
margin-bottom: 0.85rem !important;
}
#omp-active-body.g4-empty-state-panel > .table-container .active-calls-table,
#omp-active-body-meetings.g4-empty-state-panel > .table-container .active-calls-table {
margin-bottom: 0 !important;
}
#home-queues-body.g4-empty-state-panel .nonecreated,
#omp-active-body.g4-empty-state-panel .nonecreated {
position: relative !important;
top: 0 !important;
margin: 1.5rem auto 0 !important;
}
#omp-active-body-meetings.g4-empty-state-panel .nonecreated-meeting {
position: relative !important;
top: 0 !important;
margin: 1.5rem auto 0 !important;
}
[class^="icon-"], [class*=" icon-"] {
/* margin-top: 4px !important; */
margin-left: 0.2rem !important;
}
#grid4-app-shell i.icon-search {
height: 1.3rem !important;
margin-top: unset;
margin-left: unset;
width: .9rem !important;
}
/* Links inside a hovered table row should be white for contrast */
#grid4-app-shell .table-hover tbody tr:hover
a:not(.btn, .label, .nav-link, [role='button'], [id^='LinkPager']) {
color: #ffffff !important;
font-weight: 600;
text-decoration: none;
}
/* Also ensure visibility when the row is selected/active */
#grid4-app-shell .table tbody tr.selected a:not(.btn, .label, .nav-link, [role='button'], [id^='LinkPager']),
#grid4-app-shell .table tbody tr.active a:not(.btn, .label, .nav-link, [role='button'], [id^='LinkPager']) {
color: #ffffff !important;
text-decoration: none;
}
/* Optional: a bit brighter on link hover/focus */
#grid4-app-shell .table-hover tbody tr:hover a:not(.btn, .label, .nav-link, [role='button'], [id^='LinkPager']):hover, #grid4-app-shell .table-hover tbody tr:hover a:not(.btn, .label, .nav-link, [role='button'], [id^='LinkPager']):focus {
color: var(--table-hover-text) !important;
text-decoration: none !important;
}
#grid4-app-shell span.dropdown-msg-count.badge.badge-important.hide {
color: white !important;
}
/*fix tooltip value color while in light mode */
#grid4-app-shell.theme-light span.slider-tooltip-value {
color: white !important;
}
/* ===================================================================
ATTENDANT SHIELD (Manager CSS neutralized on /portal/attendant only)
- Activates when is present.
- Restores Bootstrap 3 defaults Attendant relies on.
- Keep this block at the very end so it wins in the cascade.
=================================================================== */
/* Restore light page background (Manager dark BG must not bleed) */
html[data-grid4-skin="off"] body,
html[data-grid4-skin="off"] html {
background: #fff !important;
background-color: #fff !important;
}
/* Modals: viewport container; remove Manager top/left/margins/transform hacks */
html[data-grid4-skin="off"] .modal {
position: fixed !important;
top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
margin: 0 !important;
transform: none !important;
overflow: hidden !important; /* BS3 default */
z-index: 1050 !important;
}
/* Attendant/BS3 controls display via fade/in/show; keep it visible when active */
html[data-grid4-skin="off"] .modal.in,
html[data-grid4-skin="off"] .modal.show {
display: block !important;
}
/* Dialog spacing and centering */
html[data-grid4-skin="off"] .modal-dialog {
margin: 10px auto !important; /* BS3 default vertical spacing */
}
/* Modal content: solid white; remove Manager glass/opacity overrides */
html[data-grid4-skin="off"] .modal-content {
background-color: #fff !important;
color: #333 !important;
border: 1px solid rgba(0,0,0,.2) !important;
border-radius: 6px !important;
box-shadow: 0 3px 9px rgba(0,0,0,.5) !important;
opacity: 1 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Header/Footer surfaces */
html[data-grid4-skin="off"] .modal-header,
html[data-grid4-skin="off"] .modal-footer {
background-color: #f8f9fa !important;
border-color: #e5e5e5 !important;
color: #333 !important;
}
/* Backdrop: full viewport, 0.5 opacity */
html[data-grid4-skin="off"] .modal-backdrop {
position: fixed !important;
top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
width: 100vw !important; height: 100vh !important;
background-color: #000 !important;
opacity: 0.5 !important;
z-index: 1040 !important;
}
/* Dropdowns: undo Manager animation/visibility overrides; use BS3 defaults */
html[data-grid4-skin="off"] .dropdown-menu {
display: none !important; /* closed */
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
transition: none !important;
pointer-events: auto !important;
position: absolute !important; /* BS3 default */
}
html[data-grid4-skin="off"] .open > .dropdown-menu,
html[data-grid4-skin="off"] .dropdown.open .dropdown-menu,
html[data-grid4-skin="off"] .btn-group.open .dropdown-menu {
display: block !important; /* open */
}
/* Defensive: ensure interactions are not disabled by Manager CSS */
html[data-grid4-skin="off"] .modal,
html[data-grid4-skin="off"] .modal * {
pointer-events: auto !important;
}
/* Optional: revert caret to inherit if Manager forced white */
html[data-grid4-skin="off"] .caret {
border-top-color: inherit !important;
}
/* End Attendant Shield */
/* ===================================================================
ATTENDANT CONSOLE — SAFE MODAL/DROPDOWN OVERRIDES (no JS required)
Rationale: Attendant page does not load our JS, so html[data-grid4-skin="off"]
may be missing. These selectors key off the Attendant-only .flex-container
root to neutralize Manager modal/drawer overrides without touching Manager.
Keep this block at the very end so it wins the cascade.
=================================================================== */
/* Viewport modal container + stacking fix */
.flex-container ~ .modal {
position: fixed !important;
top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
margin: 0 !important;
transform: none !important;
overflow: hidden !important; /* Bootstrap 3 default */
z-index: 1050 !important; /* Above backdrop */
}
.flex-container ~ .modal.in,
.flex-container ~ .modal.show { /* BS2/BS3 variations used by Attendant */
display: block !important;
}
/* Center dialog with Bootstrap spacing */
.flex-container ~ .modal .modal-dialog {
margin: 10px auto !important;
}
/* Solid, fully interactive content surface */
.flex-container ~ .modal .modal-content {
background-color: #fff !important;
color: #333 !important;
border: 1px solid rgba(0,0,0,.2) !important;
border-radius: 6px !important;
box-shadow: 0 3px 9px rgba(0,0,0,.5) !important;
opacity: 1 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
pointer-events: auto !important;
}
/* Header/Footer surfaces */
.flex-container ~ .modal .modal-header,
.flex-container ~ .modal .modal-footer {
background-color: #f8f9fa !important;
border-color: #e5e5e5 !important;
color: #333 !important;
}
/* Ensure backdrop sits behind modal and covers viewport */
.flex-container ~ .modal-backdrop {
position: fixed !important;
top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
width: 100vw !important; height: 100vh !important;
background-color: #000 !important;
opacity: 0.5 !important; /* Bootstrap default */
z-index: 1040 !important; /* Below .modal */
}
/* Attendant dropdowns use BS3 defaults; undo Manager animations */
.flex-container ~ .dropdown-menu {
display: none !important; /* closed */
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
transition: none !important;
pointer-events: auto !important;
position: absolute !important; /* Bootstrap 3 default */
}
.flex-container ~ .open > .dropdown-menu,
.flex-container ~ .dropdown.open .dropdown-menu,
.flex-container ~ .btn-group.open .dropdown-menu {
display: block !important; /* open */
}
/* Extra safety: explicitly scope Attendant modal IDs (no impact on Manager) */
#transfer-options-modal,
#transfer-options-modalOff,
#call-options-modal,
#custom-group-modal {
z-index: 1050 !important;
}
#transfer-options-modal .modal-content,
#transfer-options-modalOff .modal-content,
#call-options-modal .modal-content,
#custom-group-modal .modal-content {
opacity: 1 !important;
pointer-events: auto !important;
}
/* ===================================================================
ATTENDANT CONSOLE — HARD OVERRIDES FOR ATTENDANT MODAL IDS
Neutralize Manager BS2 modal tweaks (top/opacity) and enforce BS3
behavior for Attendant-only modals. These IDs exist only on
/portal/attendant, so Manager pages are unaffected.
=================================================================== */
#transfer-options-modal,
#transfer-options-modalOff,
#call-options-modal,
#custom-group-modal {
position: fixed !important;
top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
margin: 0 !important;
transform: none !important;
z-index: 1050 !important; /* above backdrop */
}
/* Ensure visible when shown (BS2/BS3 class variants) */
#transfer-options-modal.in, #transfer-options-modal.show,
#transfer-options-modalOff.in, #transfer-options-modalOff.show,
#call-options-modal.in, #call-options-modal.show,
#custom-group-modal.in, #custom-group-modal.show {
display: block !important;
}
/* Kill BS2-style vertical animation that pushes modal off center */
#transfer-options-modal.modal.fade,
#transfer-options-modal.modal.fade.in,
#transfer-options-modalOff.modal.fade,
#transfer-options-modalOff.modal.fade.in,
#call-options-modal.modal.fade,
#call-options-modal.modal.fade.in,
#custom-group-modal.modal.fade,
#custom-group-modal.modal.fade.in {
top: 0 !important;
opacity: 1 !important; /* Attendant uses BS3; keep fully visible */
}
/* Dialog spacing (center horizontally; let content height decide vertical) */
#transfer-options-modal .modal-dialog,
#transfer-options-modalOff .modal-dialog,
#call-options-modal .modal-dialog,
#custom-group-modal .modal-dialog { margin: 10px auto !important; }
/* Backdrop stacking safety (applies globally; already used by Manager) */
body > .modal-backdrop { z-index: 1040 !important; }
/* ===================================================================
ATTENDANT CONSOLE — FINAL MODAL FIXES
Backdrop is inserted as a child of the modal on Attendant pages.
Ensure dialog/content paint above that backdrop and are fully opaque.
Do NOT touch Manager globals; scope by Attendant modal IDs only.
=================================================================== */
#transfer-options-modal .modal-backdrop,
#transfer-options-modalOff .modal-backdrop,
#call-options-modal .modal-backdrop,
#custom-group-modal .modal-backdrop,
#no-numbers-modal .modal-backdrop,
#user-settings .modal-backdrop {
/* Keep the dimming layer, but place it under the dialog within the
modal stacking context and let clicks pass through. */
z-index: 0 !important;
pointer-events: none !important;
}
#transfer-options-modal .modal-dialog,
#transfer-options-modalOff .modal-dialog,
#call-options-modal .modal-dialog,
#custom-group-modal .modal-dialog,
#no-numbers-modal .modal-dialog,
#user-settings .modal-dialog {
position: relative !important;
z-index: 1 !important; /* above the in-modal backdrop */
}
#transfer-options-modal .modal-content,
#transfer-options-modalOff .modal-content,
#call-options-modal .modal-content,
#custom-group-modal .modal-content,
#no-numbers-modal .modal-content,
#user-settings .modal-content,
#transfer-options-modal .modal-header,
#transfer-options-modalOff .modal-header,
#call-options-modal .modal-header,
#custom-group-modal .modal-header,
#no-numbers-modal .modal-header,
#user-settings .modal-header,
#transfer-options-modal .modal-body,
#transfer-options-modalOff .modal-body,
#call-options-modal .modal-body,
#custom-group-modal .modal-body,
#no-numbers-modal .modal-body,
#user-settings .modal-body,
#transfer-options-modal .modal-footer,
#transfer-options-modalOff .modal-footer,
#call-options-modal .modal-footer,
#custom-group-modal .modal-footer,
#no-numbers-modal .modal-footer,
#user-settings .modal-footer {
background-color: #fff !important;
opacity: 1 !important;
pointer-events: auto !important;
}
/* ===================================================================
ATTENDANT CONSOLE — FINAL MODAL STACKING AND SURFACE FIXES
- Attendant inserts .modal-backdrop INSIDE each modal container.
- This creates a child stacking conflict where backdrop (z-index:1040)
can sit above the dialog (auto), and our Manager glass/transparency
rules can make modal surfaces transparent.
- Solution: for Attendant modal IDs only, push backdrop below dialog
within the same stacking context, and force solid surfaces.
- Do not alter Manager/global rules. Keep scope to Attendant IDs.
=================================================================== */
/* Backdrop lives INSIDE the modal in Attendant: keep it behind dialog */
#transfer-options-modal .modal-backdrop,
#transfer-options-modalOff .modal-backdrop,
#call-options-modal .modal-backdrop,
#custom-group-modal .modal-backdrop,
#no-numbers-modal .modal-backdrop,
#user-settings .modal-backdrop,
#offnet-transfer-modal .modal-backdrop {
position: fixed !important;
top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
margin: 0 !important;
background-color: #000 !important;
opacity: 0.5 !important; /* Bootstrap default dim */
z-index: 0 !important; /* below the dialog inside the same modal */
}
/* Ensure dialog paints above the in-container backdrop */
#transfer-options-modal .modal-dialog,
#transfer-options-modalOff .modal-dialog,
#call-options-modal .modal-dialog,
#custom-group-modal .modal-dialog,
#no-numbers-modal .modal-dialog,
#user-settings .modal-dialog,
#offnet-transfer-modal .modal-dialog {
position: relative !important;
z-index: 1 !important;
}
/* Kill transparency leaks: force solid modal surfaces on Attendant */
#transfer-options-modal .modal-content,
#transfer-options-modalOff .modal-content,
#call-options-modal .modal-content,
#custom-group-modal .modal-content,
#no-numbers-modal .modal-content,
#user-settings .modal-content,
#offnet-transfer-modal .modal-content,
#transfer-options-modal .modal-header,
#transfer-options-modalOff .modal-header,
#call-options-modal .modal-header,
#custom-group-modal .modal-header,
#no-numbers-modal .modal-header,
#user-settings .modal-header,
#offnet-transfer-modal .modal-header,
#transfer-options-modal .modal-body,
#transfer-options-modalOff .modal-body,
#call-options-modal .modal-body,
#custom-group-modal .modal-body,
#no-numbers-modal .modal-body,
#user-settings .modal-body,
#offnet-transfer-modal .modal-body,
#transfer-options-modal .modal-footer,
#transfer-options-modalOff .modal-footer,
#call-options-modal .modal-footer,
#custom-group-modal .modal-footer,
#no-numbers-modal .modal-footer,
#user-settings .modal-footer,
#offnet-transfer-modal .modal-footer {
background-color: #fff !important;
opacity: 1 !important;
}
div#write-routeprofile {
height: auto !important;
}
#write-routeprofile .nonecreated {
margin-top: 1rem !important;
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
#grid4-app-shell .tablecolumn .dropdown-menu .dropdown-column > li > .checkbox,
#grid4-app-shell .tablecolumn .dropdown-menu .dropdown-column > li > label.checkbox {
color: var(--text-primary) !important;
}
#grid4-app-shell .tablecolumn .dropdown-menu .dropdown-column > li > .checkbox:hover,
#grid4-app-shell .tablecolumn .dropdown-menu .dropdown-column > li > label.checkbox:hover {
color: var(--heading-color) !important;
}
#grid4-app-shell.theme-light .tablecolumn .dropdown-menu .muted,
#grid4-app-shell.theme-light .tablecolumn .dropdown-menu p.muted {
color: var(--text-secondary) !important;
}
#grid4-app-shell.theme-dark .tablecolumn .dropdown-menu .muted,
#grid4-app-shell.theme-dark .tablecolumn .dropdown-menu p.muted {
color: var(--text-secondary) !important;
}
#grid4-app-shell.theme-light .alert.alert-info.text-center {
color:white !important;
background-color: #555 !important;
}
#grid4-app-shell span#current-folder, span#current-group {
color: white !important;
}
.alert-info.text-center > strong {
color: var(--accent-primary) !important;
}
/*
#grid4-app-shell button.close {
filter: invert(1) contrast(2) brightness(5.5);
}
*/
#grid4-app-shell.theme-light i.caret {
border-top: 4px solid var(--accent-primary) !important;
}
#grid4-app-shell p.caption {
color: var(--primary-text);
background-color: var(--modal-bg);
}
#grid4-app-shell.theme-light button.close.cancel {
filter: contrast(2) brightness(-2.5);
}
/* Use theme surface instead of transparency on modal body */
.modal-body { background-color: var(--modal-bg) !important; opacity: 1 !important; }
#grid4-app-shell #cc-settings-btn {
/* padding-left: 4px !important; */
gap: 2px !important;
margin-inline: 5px !important;
}
#grid4-app-shell .btn-group-full {
width: 98% !important;
margin: auto !important;
margin-left: 0px !important;
}
i.nsicon.nsicon-contacts {
color: white !important;
}
input#add-template
{
right: unset !important;
bottom: unset !important;
}
#builder-templates .right-panel .panel-content {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 0.5rem !important;
padding-right: 27px !important;
}
#builder-templates .right-panel .panel-content > input[type="text"],
#builder-templates .right-panel .panel-content > select {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
#builder-templates .right-panel #add-template.btn-long {
position: static !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin-top: 0.5rem !important;
}
#builder-templates .modal-body {
display: flex !important;
align-items: stretch !important;
}
#builder-templates .left-panel,
#builder-templates .right-panel {
display: flex !important;
flex-direction: column !important;
box-sizing: border-box !important;
}
#builder-templates .right-panel {
float: none !important;
}
#builder-templates .left-panel #edit-copy-del-template-form {
display: grid !important;
flex: 1 1 auto !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
grid-template-rows: minmax(0, 1fr) auto !important;
column-gap: 0.25rem !important;
row-gap: 0.5rem !important;
min-height: 0 !important;
}
#builder-templates .left-panel #edit-copy-del-template-form .accordion-group {
display: flex !important;
flex: 1 1 auto !important;
flex-direction: column !important;
grid-column: 1 / -1 !important;
grid-row: 1 !important;
min-height: 0 !important;
margin-bottom: 0 !important;
}
#builder-templates .left-panel #edit-copy-del-template-form .compound-select-container {
display: flex !important;
flex: 1 1 auto !important;
flex-direction: column !important;
min-height: 0 !important;
}
#builder-templates .left-panel #template-compound-select {
flex: 1 1 auto !important;
height: auto !important;
min-height: 17.75rem !important;
max-height: none !important;
}
#builder-templates .left-panel #edit-copy-del-template-form > div:not(.accordion-group) {
display: flex !important;
grid-column: 1 / span 2 !important;
grid-row: 2 !important;
gap: 0.25rem !important;
margin: 0 !important;
}
#builder-templates #copy-template.btn-half,
#builder-templates #delete-template.btn-half {
flex: 1 1 0 !important;
width: auto !important;
margin: 0 !important;
min-height: 29.3333px !important;
height: 29.3333px !important;
}
#builder-templates #edit-template.template-action {
grid-column: 3 !important;
grid-row: 2 !important;
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
justify-self: stretch !important;
margin-top: 0 !important;
}
#builder-templates #delete-template.btn-danger {
background-color: var(--g4-button-danger-bg) !important;
border-color: var(--g4-button-danger-border) !important;
color: #ffffff !important;
}
#builder-templates #delete-template.btn-danger:hover,
#builder-templates #delete-template.btn-danger:focus {
background-color: var(--g4-button-danger-hover-bg) !important;
border-color: var(--g4-button-danger-border) !important;
color: #ffffff !important;
}
.input-append input, .input-prepend input, .input-append select, .input-prepend select, .input-append .uneditable-input, .input-prepend .uneditable-input {
position: relative;
margin-bottom: 0;
vertical-align: middle !important;
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
.blocknumbers-modal {
width: fit-content !important;
}
#grid4-app-shell.theme-dark ~ .modal .modal-body,
#grid4-app-shell.theme-dark .modal .modal-body { background-color: var(--modal-bg) !important; }
select#templateApplier {
font-size: 10px !important;
max-block-size: min-content ! IMPORTANT;
MAX-WIDTH: min-content !important;
}
.dropdown-menu.pull-right.form-actions.template-selector
{
min-width:fit-content !important;
}
div#config-save-bar {
max-width: 50% !important;
}
div#left-panel {
margin-top: 50px !important;
}
input#copy-template, input#delete-template {
width: unset !important;
}
#grid4-app-shell.theme-dark input.compound-select-filter {
/* color: #fffefe12 !important; */
background-color: black !important;
-webkit-text-fill-color: var(--text-primary) !important;
font-weight:500 !important;
}
#grid4-app-shell.theme-dark .compound-select-option:hover
{
background: var(--accent-primary) !important;
color: var(--text-primary) !important;
}
div#chart_div_AnnotationChart_legendContainer {
color: black !important;
}
body.theme-dark ul#ui-id-1
{
background-color: black !important;
}
body.theme-dark option
{
-webkit-text-fill-color: var(--text-primary) !important;
background-color: black !important;
}
div#\37 66sy {
top: 50% !important;
}
span.uneditable-input {
background: var(--modal-bg) !important;
}
/* ============================================
SPECIFIC MODAL FIXES (PAGE-SCOPED)
============================================ */
/* Center the Fax > Number Permissions modal vertically a bit lower */
body.theme-dark .modal.grid4-number-permissions,
body.theme-light .modal.grid4-number-permissions,
.modal.grid4-number-permissions {
top: 50% !important;
}
/* Injected Fax Numbers modals already ship with translate(-50%, -50%) centering.
When our viewport-fit path pins them below the fixed domain banner, keep the
horizontal centering but drop the vertical translate so they no longer jump
upward under the banner. */
body.page-faxnumbers .modal.grid4-number-permissions.g4-modal-viewport-fit,
body.page-faxnumbers .modal.grid4-fax-device-modal.g4-modal-viewport-fit,
body.page-faxnumbers .modal.grid4-fax-port-modal.g4-modal-viewport-fit {
left: 50% !important;
margin-left: 0 !important;
transform: translateX(-50%) !important;
}
/* Fax device modal: keep Notes closer to the sibling field width and add height
instead of letting the shared modal textarea rule stretch it across the lane. */
body.page-faxnumbers .modal.grid4-fax-device-modal textarea[name="notes"] {
width: 240px !important;
max-width: 100% !important;
min-height: 8.25rem !important;
box-sizing: border-box !important;
}
body.theme-dark .selectivity-multiple-input-container {
background-color: var(--modal-bg) !important;
}
/* Time Frames modal: fix first/last rows (tr.gray-out) in dark mode */
body.theme-dark.page-timeframes .modal table tr.gray-out,
body.theme-dark.page-timeframes .modal table tr.gray-out td,
body.theme-dark.page-timeframes .modal .timeframe-details tr.gray-out,
body.theme-dark.page-timeframes .modal .timeframe-details tr.gray-out td {
background-color: var(--surface-secondary-bg) !important;
color: var(--text-secondary) !important;
}
/* Ensure disabled labels inside gray-out rows are readable */
body.theme-dark.page-timeframes .modal td.opaque-text {
color: var(--text-secondary) !important;
}
body.theme-dark .modal div .selectivity-result-item {
background: black !important;
}
body.theme-dark .modal div .selectivity-result-item.highlight
{
background-color: #785EF0 !important;
color: white;
}
input#status-filter-add {
width: calc(100% - 80px) !important;
}
/*Attendant Console limited customization
.container-fluid {
padding-right: unset !important;
padding-left: unset !important;
margin-right: auto;
margin-left: auto;
}
.navbar-collapse.collapse {
background-color: #52B4FA !important;
color: white !important;
}
*/
body.page-timeframes #write-timeframe .specific-date-rows {
width: 100% !important;
}
/* Fix: Dark mode source-code blocks in modals (config file viewer, etc.)
The nuclear wildcard (body.theme-dark .modal-content *) forces light text,
but the keeps its light background from portal CSS.
Fix all syntax types: .python, .xml, etc. */
body.theme-dark .modal pre.source-code {
background-color: #1a1a2e !important;
color: #d4d4d4 !important;
border-color: rgba(255, 255, 255, 0.15) !important;
}
body.theme-dark .modal pre.source-code * {
color: #d4d4d4 !important;
}
/* Fix: Builder config file modal centering.
The builder JS applies a translateX() transform that mispositions the 980px modal.
Override with translateX(-50%) for proper viewport centering. */
#builder-config-file.modal {
transform: translateX(-50%) !important;
left: 50% !important;
margin-left: 0 !important;
}
body.theme-dark.page-agents .google-visualization-tooltip,
body.theme-dark.page-stats .google-visualization-tooltip,
body.theme-dark.page-queues .google-visualization-tooltip {
background-color: var(--surface-secondary-bg) !important;
color: var(--text-primary) !important;
border: 1px solid var(--g4-popover-border) !important;
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.34) !important;
}
body.theme-dark.page-agents .google-visualization-tooltip *,
body.theme-dark.page-agents .google-visualization-tooltip span,
body.theme-dark.page-agents .google-visualization-tooltip div,
body.theme-dark.page-agents .google-visualization-tooltip td,
body.theme-dark.page-stats .google-visualization-tooltip *,
body.theme-dark.page-stats .google-visualization-tooltip span,
body.theme-dark.page-stats .google-visualization-tooltip div,
body.theme-dark.page-stats .google-visualization-tooltip td,
body.theme-dark.page-queues .google-visualization-tooltip *,
body.theme-dark.page-queues .google-visualization-tooltip span,
body.theme-dark.page-queues .google-visualization-tooltip div,
body.theme-dark.page-queues .google-visualization-tooltip td {
background: transparent !important;
color: var(--text-primary) !important;
text-shadow: none !important;
}
body.theme-dark.page-agents .google-visualization-tooltip path,
body.theme-dark.page-agents .google-visualization-tooltip rect,
body.theme-dark.page-stats .google-visualization-tooltip path,
body.theme-dark.page-stats .google-visualization-tooltip rect,
body.theme-dark.page-queues .google-visualization-tooltip path,
body.theme-dark.page-queues .google-visualization-tooltip rect {
fill: var(--surface-secondary-bg) !important;
stroke: var(--g4-popover-border) !important;
}
body.theme-dark.page-agents .google-visualization-tooltip text,
body.theme-dark.page-agents .google-visualization-tooltip tspan,
body.theme-dark.page-stats .google-visualization-tooltip text,
body.theme-dark.page-stats .google-visualization-tooltip tspan,
body.theme-dark.page-queues .google-visualization-tooltip text,
body.theme-dark.page-queues .google-visualization-tooltip tspan {
fill: var(--text-primary) !important;
color: var(--text-primary) !important;
stroke: none !important;
text-shadow: none !important;
}
.nav-pills>.active>a, .nav-pills>.active>a:hover, .nav-pills>.active>a:focus {
color: white !important;
background-color: var(--accent-primary) !important;
}
body.theme-dark a.transcription-controls.transcription-play-comment, body.theme-dark a.transcription-controls.transcription-copy-comment
{
filter: invert(1);
}
body.theme-dark .transcription-controls
{
filter: invert(1);
}
.queue-slider, .agent-slider, .cc-settings-slider {
width: 260px;
margin-top: 9px;
margin-left: 1rem !important;
}
dl.slider-maxlength-labels.slider-labels,
dl.slider-maxwait-labels.slider-labels {
margin-left: 1rem !important;
}
input#by_extension {
margin-left: .1px;
}
#bulkedit-phonenumbers {
width: 600px;
}
select#ip_control_dd {
width: fit-content !important;
}
body.theme-dark .table-striped tbody>tr:nth-child(odd)>td {
background-color: var(--accent-primary) !important;
}
body.theme-dark .refresh-icon.py-4 {
filter: none !important;
}
body.page-fax #grid4-app-shell .refresh-icon.py-4,
body.page-faxnumbers #grid4-app-shell .refresh-icon.py-4 {
position: relative !important;
min-width: 30px !important;
min-height: 30px !important;
text-shadow: none !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 15px 15px !important;
}
body.theme-dark.page-fax #grid4-app-shell .refresh-icon.py-4,
body.theme-dark.page-faxnumbers #grid4-app-shell .refresh-icon.py-4 {
background-color: var(--surface-secondary-bg) !important;
border-color: var(--border-color) !important;
color: var(--text-primary) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23e7ecf3' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3v4H9'/%3E%3Cpath d='M3 13V9h4'/%3E%3Cpath d='M13 7A5 5 0 0 0 4.5 3.5L3 5'/%3E%3Cpath d='M3 9a5 5 0 0 0 8.5 3.5L13 11'/%3E%3C/svg%3E") !important;
}
body.theme-light.page-fax #grid4-app-shell .refresh-icon.py-4,
body.theme-light.page-faxnumbers #grid4-app-shell .refresh-icon.py-4 {
background-color: #ffffff !important;
border-color: rgba(var(--g4-brand-sky-rgb), 0.6) !important;
color: #1c2143 !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231c2143' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3v4H9'/%3E%3Cpath d='M3 13V9h4'/%3E%3Cpath d='M13 7A5 5 0 0 0 4.5 3.5L3 5'/%3E%3Cpath d='M3 9a5 5 0 0 0 8.5 3.5L13 11'/%3E%3C/svg%3E") !important;
}
span#language_name_tier_1 {
width: fit-content !important;
color: white;
}
span#language_name_tier_2 {
width: fit-content !important;
color: white;
}
i.nsicon.nsicon-language {
color: white;
}
/* ===================================================================
FULLSCREEN MODE: SIP FLOW DARK THEME FIX
===================================================================
* PROBLEM: When .flow-fullscreen-container enters fullscreen mode via
* the browser Fullscreen API, the NetSapiens Svelte components have
* hardcoded white backgrounds that override our dark theme.
*
* SOLUTION: Target .flow-fullscreen-container:fullscreen and its
* children directly. Uses body.theme-dark which persists during
* fullscreen (synced by JS in grid4-portal-skin-v5.0.11.js).
*
* Elements targeted (from diagnostic):
* - .flow-fullscreen-container: main container (white → dark)
* - .svelte-y6c6zk: flow header boxes (7 instances, white → dark)
* - #search.svelte-1l4izdq: search input (white → dark)
* - SVG paths/circles: stroke color for ladder diagram
* - .flow-time text: time scale labels
*/
/* 1. Main fullscreen container background */
body.theme-dark .flow-fullscreen-container:fullscreen,
body.theme-dark .flow-fullscreen-container:-webkit-full-screen {
background-color: var(--surface-primary-bg, #333) !important;
}
/* 2. Flow header boxes (svelte-y6c6zk) - the device name boxes at top */
body.theme-dark .flow-fullscreen-container:fullscreen .svelte-y6c6zk,
body.theme-dark .flow-fullscreen-container:-webkit-full-screen .svelte-y6c6zk {
background-color: var(--surface-secondary-bg, #181818ed) !important;
color: var(--text-primary, #e9ecef) !important;
}
/* 3. Search input in fullscreen */
body.theme-dark .flow-fullscreen-container:fullscreen #search.svelte-1l4izdq,
body.theme-dark .flow-fullscreen-container:fullscreen input.svelte-1l4izdq,
body.theme-dark .flow-fullscreen-container:-webkit-full-screen #search.svelte-1l4izdq,
body.theme-dark .flow-fullscreen-container:-webkit-full-screen input.svelte-1l4izdq {
background-color: var(--surface-secondary-bg, #181818ed) !important;
color: var(--text-primary, #e9ecef) !important;
border-color: var(--border-color, rgba(255, 255, 255, 0.1)) !important;
}
/* 4. SVG paths and circles - white strokes for dark mode ladder diagram */
body.theme-dark .flow-fullscreen-container:fullscreen svg path,
body.theme-dark .flow-fullscreen-container:fullscreen svg circle,
body.theme-dark .flow-fullscreen-container:-webkit-full-screen svg path,
body.theme-dark .flow-fullscreen-container:-webkit-full-screen svg circle {
stroke: #fff !important;
}
/* 5. Dark fills in SVG → white (arrow heads, markers) */
body.theme-dark .flow-fullscreen-container:fullscreen svg path[fill="#1A1A1A"],
body.theme-dark .flow-fullscreen-container:fullscreen svg rect[fill="#1A1A1A"],
body.theme-dark .flow-fullscreen-container:-webkit-full-screen svg path[fill="#1A1A1A"],
body.theme-dark .flow-fullscreen-container:-webkit-full-screen svg rect[fill="#1A1A1A"] {
fill: #fff !important;
}
/* 6. Time scale text on left side */
body.theme-dark .flow-fullscreen-container:fullscreen .flow-time text,
body.theme-dark .flow-fullscreen-container:-webkit-full-screen .flow-time text {
fill: #fff !important;
}
/* 7. Selected time text highlight */
body.theme-dark .flow-fullscreen-container:fullscreen .flow-time text.selected,
body.theme-dark .flow-fullscreen-container:-webkit-full-screen .flow-time text.selected {
fill: #fff !important;
}
/* 8. SIP method labels and filter text */
body.theme-dark .flow-fullscreen-container:fullscreen span.flow-filter,
body.theme-dark .flow-fullscreen-container:fullscreen span.sl-sipmethod,
body.theme-dark .flow-fullscreen-container:-webkit-full-screen span.flow-filter,
body.theme-dark .flow-fullscreen-container:-webkit-full-screen span.sl-sipmethod {
color: #fff !important;
}
/* 9. Pre/code blocks (SIP message details on right panel)
body.theme-dark .flow-fullscreen-container:fullscreen pre.box,
body.theme-dark .flow-fullscreen-container:-webkit-full-screen pre.box {
color: var(--text-primary, #e9ecef) !important;
} */
/* 10. Light mode fullscreen - ensure it stays light (no changes needed) */
body:not(.theme-dark) .flow-fullscreen-container:fullscreen,
body:not(.theme-dark) .flow-fullscreen-container:-webkit-full-screen {
background-color: #fff !important;
}
/* End Fullscreen SIP Flow Fix */
body.theme-dark .assigned-label, body.theme-dark .assigned-feature {
color: white !important;
}
#grid4-app-shell.theme-light .dropdown-menu > li > a {
color: var(--text-primary) !important;
}
/* Fix: DataTables scrollBody duplicate thead black bar on first row hover.
DataTables keeps a hidden thead copy in scrollBody for column alignment,
but our skin's !important padding/border rules on th keep it ~11px tall,
creating a black bar that covers the top of the first data row on hover.
Collapse it fully by zeroing all box-model properties. */
.dataTables_scrollBody thead th {
padding-top: 0 !important;
padding-bottom: 0 !important;
border-top-width: 0 !important;
border-bottom-width: 0 !important;
line-height: 0 !important;
font-size: 0 !important;
height: 0 !important;
}
/* Fix: legacy greeting modals can render their form rows flush against the
modal edge. Apply the same body padding to both greeting modal variants,
then left-align the Add Greeting label column so "Message" / "Voice"
read like the other modal forms instead of hugging the edge. */
#greetings-modal .modal-body,
#introgreeting-modal .modal-body {
padding: 15px !important;
}
#introgreeting-modal .add-greeting .control-label,
#introgreeting-modal .new-greeting-group > .control-label {
text-align: left !important;
}
/* ===================================================================
BRAD-REPORTED FIXES — March 2026
Issues documented in brad-issues-march2026.md
=================================================================== */
/* --- Brad Fix #1: AA "Remove" text invisible in dark mode ---
Bootstrap's .close defaults to color: #000, invisible on dark backgrounds.
Existing .close rules (lines 1019-1031) only target .modal.g4-themed .close,
not the AA editor page where Remove lives
inside . */
body.theme-dark.page-autoattendants .attendant-creation .remove-app .close {
color: #ff6b6b !important;
opacity: 0.85 !important;
text-shadow: none !important;
font-size: 14px !important;
}
body.theme-dark.page-autoattendants .attendant-creation .remove-app .close:hover {
color: #ff4444 !important;
opacity: 1 !important;
}
body.theme-light.page-autoattendants .attendant-creation .remove-app .close {
color: #dc3545 !important;
opacity: 0.85 !important;
text-shadow: none !important;
font-size: 14px !important;
}
body.theme-light.page-autoattendants .attendant-creation .remove-app .close:hover {
color: #b02a37 !important;
opacity: 1 !important;
}
/* --- Brad Fix #8: Add Auto Attendant modal fields too faint in light mode ---
The modal is already themed, but the default light borders are still too soft.
Strengthen the field outline and inner contrast without touching dark mode. */
body.theme-light #add-attendant.modal.g4-themed input[type="text"],
body.theme-light #add-attendant.modal.g4-themed select {
background-color: #ffffff !important;
border-color: rgba(100, 116, 139, 0.55) !important;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9), inset 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}
body.theme-light #add-attendant.modal.g4-themed input[type="text"]:focus,
body.theme-light #add-attendant.modal.g4-themed select:focus {
border-color: #3b82f6 !important;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18) !important;
}
/* --- Brad Fix #2: Holiday search icon overlaps text ---
The holidays partial already renders its own search wrapper, so keep the
positioning override tightly scoped to the timeframe modal. */
body.page-timeframes #write-timeframe .holiday-search-container {
position: relative !important;
}
body.page-timeframes #write-timeframe .holiday-search-container .search-icon {
position: absolute !important;
left: 10px !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 2 !important;
pointer-events: none !important;
color: var(--text-secondary) !important;
font-size: 14px !important;
}
body.page-timeframes #write-timeframe.modal.g4-themed .holiday-search-container input.holiday-search {
padding-left: 35px !important;
}
/* jQuery timepicker appends its popup to , not inside the modal DOM tree.
Theme it at the body level so holiday/specific-date time pickers stop falling
back to a white vendor menu in dark mode. */
body.theme-dark .ui-timepicker-wrapper {
background: var(--surface-primary-bg) !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--g4-radius-md) !important;
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.42) !important;
}
body.theme-dark .ui-timepicker-list {
background: transparent !important;
color: var(--text-primary) !important;
}
body.theme-dark .ui-timepicker-list li {
background: transparent !important;
color: var(--text-primary) !important;
padding: 0.3rem 0.85rem 0.3rem 0.55rem !important;
}
body.theme-dark .ui-timepicker-list:hover .ui-timepicker-selected,
body.theme-dark li.ui-timepicker-selected,
body.theme-dark .ui-timepicker-list li:hover,
body.theme-dark .ui-timepicker-list .ui-timepicker-selected:hover {
background: rgba(var(--g4-brand-sky-rgb), 0.92) !important;
color: #ffffff !important;
}
body.theme-dark .ui-timepicker-duration,
body.theme-dark .ui-timepicker-list:hover .ui-timepicker-duration,
body.theme-dark li.ui-timepicker-selected .ui-timepicker-duration,
body.theme-dark .ui-timepicker-list li:hover .ui-timepicker-duration {
color: var(--text-muted) !important;
}
body.theme-dark .ui-timepicker-list li.ui-timepicker-disabled,
body.theme-dark .ui-timepicker-list li.ui-timepicker-disabled:hover,
body.theme-dark .ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled {
background: transparent !important;
color: var(--text-muted) !important;
}
body.theme-light .ui-timepicker-wrapper {
background: #f8fbff !important;
border: 1px solid rgba(var(--g4-brand-navy-rgb), 0.14) !important;
border-radius: var(--g4-radius-md) !important;
box-shadow: 0 0.9rem 1.8rem rgba(15, 23, 42, 0.14) !important;
}
body.theme-light .ui-timepicker-list {
background: transparent !important;
color: #1f2937 !important;
}
body.theme-light .ui-timepicker-list li {
background: transparent !important;
color: #1f2937 !important;
padding: 0.3rem 0.85rem 0.3rem 0.55rem !important;
}
body.theme-light .ui-timepicker-list:hover .ui-timepicker-selected,
body.theme-light li.ui-timepicker-selected,
body.theme-light .ui-timepicker-list li:hover,
body.theme-light .ui-timepicker-list .ui-timepicker-selected:hover {
background: rgba(var(--g4-brand-sky-rgb), 0.96) !important;
color: #ffffff !important;
}
/* --- Brad Fix #3: Email reports multi-select box spacing ---
The live Email Reports fragment is injected into #view-reports, not an
#email-report wrapper, so the original rules were never matching. Keep the
fallback selectors for #email-report in case another queue-report flow still
mounts that older root. */
#view-reports .control-group.report-email-selector,
#email-report .control-group.report-email-selector {
margin-bottom: 18px !important;
min-height: 140px !important;
overflow: hidden !important; /* ensure the floated label and select height expand the row */
padding-bottom: 10px !important;
}
#view-reports .report-email-selector .control-label,
#email-report .report-email-selector .control-label {
width: 170px !important;
text-align: left !important;
float: left !important;
padding-top: 4px !important;
margin-right: 10px !important;
}
#view-reports .report-email-selector .controls,
#email-report .report-email-selector .controls {
margin-left: 180px !important;
}
#view-reports .report-email-selector select[multiple],
#email-report .report-email-selector select[multiple] {
width: 100% !important;
min-height: 126px !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--g4-radius-sm) !important;
display: block !important;
}
#view-reports.theme-dark .report-email-selector select[multiple],
body.theme-dark #view-reports .report-email-selector select[multiple],
body.theme-dark #email-report .report-email-selector select[multiple] {
background-color: var(--surface-primary-bg) !important;
color: var(--text-primary) !important;
}
#view-reports.theme-dark .report-email-selector select[multiple] option,
body.theme-dark #view-reports .report-email-selector select[multiple] option,
body.theme-dark #email-report .report-email-selector select[multiple] option {
background-color: var(--surface-primary-bg) !important;
color: var(--text-primary) !important;
padding: 4px 8px !important;
}
/* Light mode styling for email report selects */
#view-reports.theme-light .report-email-selector select[multiple],
body.theme-light #view-reports .report-email-selector select[multiple],
body.theme-light #email-report .report-email-selector select[multiple] {
background-color: #fff !important;
color: #333 !important;
border-color: #ccc !important;
}
/* Hint text below the third select */
#view-reports #report-email-advanced .help-block,
#email-report #report-email-advanced .help-block {
clear: both !important;
margin-top: 8px !important;
}
body.theme-dark.page-queues #grid4-app-shell .reportdate,
body.theme-dark.page-queues #grid4-app-shell .date-field,
body.theme-dark.page-queues #grid4-app-shell .hasDatepicker,
body.theme-dark.page-queues #grid4-app-shell .ccmanagertablesModal {
background-color: var(--surface-primary-bg) !important;
background-image: none !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-color) !important;
box-shadow: none !important;
}
body.theme-dark.page-queues #grid4-app-shell .input-append .add-on,
body.theme-dark.page-queues #grid4-app-shell .input-prepend .add-on {
background-color: var(--surface-secondary-bg) !important;
color: var(--text-secondary) !important;
border-color: var(--border-color) !important;
text-shadow: none !important;
}
body.theme-dark .ui-datepicker {
background: var(--surface-primary-bg) !important;
border: 1px solid var(--border-color) !important;
color: var(--text-primary) !important;
box-shadow: 0 1rem 2.2rem rgba(0, 0, 0, 0.34) !important;
}
body.theme-dark .ui-datepicker .ui-datepicker-header {
background: var(--surface-secondary-bg) !important;
border: 1px solid var(--border-color) !important;
color: var(--text-primary) !important;
}
body.theme-dark .ui-datepicker .ui-datepicker-title,
body.theme-dark .ui-datepicker .ui-datepicker-prev,
body.theme-dark .ui-datepicker .ui-datepicker-next,
body.theme-dark .ui-datepicker .ui-datepicker-prev span,
body.theme-dark .ui-datepicker .ui-datepicker-next span {
color: var(--text-primary) !important;
text-shadow: none !important;
}
body.theme-dark .ui-datepicker th {
color: var(--text-secondary) !important;
}
body.theme-dark .ui-datepicker td a,
body.theme-dark .ui-datepicker td span {
background: transparent !important;
color: var(--text-primary) !important;
border: 1px solid transparent !important;
box-shadow: none !important;
}
body.theme-dark .ui-datepicker td a:hover,
body.theme-dark .ui-datepicker td .ui-state-hover {
background: rgba(var(--g4-brand-sky-rgb), 0.16) !important;
color: var(--text-primary) !important;
border-color: rgba(var(--g4-brand-sky-rgb), 0.28) !important;
}
body.theme-dark .ui-datepicker td .ui-state-active,
body.theme-dark .ui-datepicker td .ui-state-highlight {
background: rgba(var(--g4-brand-sky-rgb), 0.24) !important;
color: var(--text-primary) !important;
border-color: rgba(var(--g4-brand-sky-rgb), 0.36) !important;
}
/* --- Brad Fix #4: AA unassigned key background container ---
(Applied in-place at lines 3265-3275 — added background, border,
border-radius, and padding to existing flex visibility rule.) */
/* --- Brad Fix #5: AA Options "Set Custom" left alignment ---
The .enableDtmf link has class="control-label" which inherits Bootstrap 2's
text-align: right; float: left; width: 160px. This override removes those
inherited layout properties so the link reads naturally left-aligned. */
#options-basic-content .control-group.fail-setting .controls a.enableDtmf.control-label {
float: none !important;
width: auto !important;
text-align: left !important;
padding-top: 0 !important;
margin-top: 8px !important;
color: var(--accent-primary) !important;
cursor: pointer !important;
display: inline-block;
}
/* --- AA Options: Speech Keywords tab dark mode ---
The Speech Keywords tab (#options-keywords-content) uses Bootstrap 2 accordion
components with hardcoded white backgrounds and inline light-mode colors.
These overrides theme the accordion, keyword chips, inputs, and keypad buttons. */
body.theme-dark #options-keywords-content {
color: var(--text-primary) !important;
}
body.theme-dark #options-keywords-content .accordion-group {
background-color: var(--surface-secondary-bg) !important;
border-color: var(--border-color) !important;
}
body.theme-dark #options-keywords-content .keyword-row:hover {
background: var(--surface-primary-bg) !important;
}
body.theme-dark #options-keywords-content .keypadBtn {
background-color: var(--accent-primary) !important;
color: #fff !important;
}
body.theme-dark #options-keywords-content .btnType {
color: var(--text-secondary) !important;
}
body.theme-dark #options-keywords-content .accordion-body {
background-color: var(--surface-secondary-bg) !important;
}
body.theme-dark #options-keywords-content .accordion-body input[type="text"] {
background-color: var(--surface-primary-bg) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
body.theme-dark #options-keywords-content .keywordChip {
color: var(--text-primary) !important;
}
body.theme-dark #options-keywords-content .accordion-toggle {
color: var(--text-primary) !important;
}
/* --- Brad Fix #6: SNAPbuilder Device Profiles modal dark mode ---
No dedicated CSS rules existed for the SNAPbuilder profile-select modal.
It loads via AJAX into a generic .modal container, and its elements
(#phone-model-select, .compound-select, etc.) inherit default light styles. */
body.theme-dark .modal #phone-model-select,
body.theme-dark .modal #brand-select {
background-color: var(--surface-primary-bg) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-color) !important;
border-radius: var(--g4-radius-sm) !important;
}
body.theme-dark .modal #phone-model-select optgroup,
body.theme-dark .modal #brand-select optgroup {
background-color: var(--surface-secondary-bg) !important;
color: var(--text-primary) !important;
}
body.theme-dark .modal #phone-model-select option,
body.theme-dark .modal #brand-select option {
background-color: var(--surface-primary-bg) !important;
color: var(--text-primary) !important;
}
body.theme-dark .modal .compound-select-filter {
background-color: var(--surface-primary-bg) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
body.theme-dark .modal .compound-select {
background-color: var(--surface-primary-bg) !important;
border-color: var(--border-color) !important;
}
body.theme-dark .modal .compound-select-option {
color: var(--text-primary) !important;
border-bottom-color: var(--border-color) !important;
}
body.theme-dark .modal .compound-select-option:hover {
background-color: var(--surface-secondary-bg) !important;
}
body.theme-dark .modal .compound-select-option-secondary-right,
body.theme-dark .modal .compound-select-option-secondary-left {
color: var(--text-secondary) !important;
}
body.theme-dark .modal .left-panel {
border-right-color: var(--border-color) !important;
}
body.theme-dark .modal .radio {
color: var(--text-primary) !important;
}
body.theme-dark .modal #sidecar-model-input {
background-color: var(--surface-primary-bg) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
#builder-profiles #edit-device-profile-form {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
column-gap: 0.5rem !important;
row-gap: 0.5rem !important;
}
#builder-profiles #edit-device-profile-form > p,
#builder-profiles #edit-device-profile-form > .accordion-group,
#builder-profiles #edit-device-profile-form > input[type="hidden"] {
grid-column: 1 / -1 !important;
}
#builder-profiles #edit-device-profile,
#builder-profiles #delete-profile {
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
float: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
#builder-profiles #delete-profile,
#builder-profiles #delete-profile.btn-danger,
body.theme-light #builder-profiles #delete-profile,
body.theme-dark #builder-profiles #delete-profile {
background: var(--g4-button-danger-bg) !important;
border-color: var(--g4-button-danger-bg) !important;
color: #fff !important;
}
body.page-builder .action-container-right {
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
flex-wrap: nowrap !important;
}
body.page-builder .action-container-right > .dropdown,
body.page-builder .action-container-right > .btn,
body.page-builder .action-container-right > .btn-group {
flex: 0 0 auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
body.page-builder #templates-dropdown,
body.page-builder #directory-btn,
body.page-builder #config-dropdown,
body.page-builder #profile-dropdown {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 1.875rem !important;
min-height: 1.875rem !important;
box-sizing: border-box !important;
}
body.page-builder #templates-dropdown {
justify-content: flex-start !important;
}
body.page-builder #config-dropdown,
body.page-builder #profile-dropdown {
width: 1.875rem !important;
min-width: 1.875rem !important;
padding: 0 !important;
right: 0 !important;
text-align: center !important;
}
body.page-builder #config-dropdown .caret,
body.page-builder #profile-dropdown .caret {
margin: 0 !important;
position: static !important;
}
body.page-builder .config-kabob {
right: -8px !important;
top: 8px !important;
width: 1.875rem !important;
height: 1.875rem !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
body.page-builder .config-kabob .kabob {
width: 100% !important;
text-align: center !important;
line-height: 1 !important;
}
/* The builder page-number menu should use simple show/hide instead of the
global animated dropdown system; otherwise a hidden ghost Pages menu can sit
on top of unrelated builder menus. */
body.page-builder #profile-right-panel .page-changer.dropdown-menu.form-actions,
body.page-builder #profile-right-panel .page-selector.dropdown-menu {
display: none !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
transition: none !important;
pointer-events: auto !important;
}
body.page-builder #profile-right-panel .btn-group.open > .page-changer.dropdown-menu.form-actions {
display: none !important;
}
body.page-builder #profile-right-panel .btn-group:has(.kabob-dropdown li.dropdown.open) > .page-changer.dropdown-menu.form-actions,
body.page-builder #profile-right-panel .dropdown.open > .page-selector.dropdown-menu,
body.page-builder #profile-right-panel .btn-group.open > .page-selector.dropdown-menu {
display: flex !important;
}
body.page-builder #profile-right-panel .btn-group.dropdown.pull-right > .btn:not(.dropdown-toggle),
body.page-builder #deviceImageContainerProfileMode .btn-group.dropdown.pull-right > .btn:not(.dropdown-toggle) {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
body.page-builder #profile-right-panel .btn-group.dropdown.pull-right > .btn.dropdown-toggle,
body.page-builder #deviceImageContainerProfileMode .btn-group.dropdown.pull-right > .btn.dropdown-toggle {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 1.875rem !important;
min-width: 1.875rem !important;
height: 1.875rem !important;
min-height: 1.875rem !important;
padding: 0 !important;
margin-left: -1px !important;
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
box-sizing: border-box !important;
font-size: 0 !important;
line-height: 0 !important;
}
body.page-builder #profile-right-panel .btn-group.dropdown.pull-right > .btn.dropdown-toggle .caret,
body.page-builder #deviceImageContainerProfileMode .btn-group.dropdown.pull-right > .btn.dropdown-toggle .caret {
display: block !important;
margin: 0 !important;
position: static !important;
}
body.theme-dark.page-builder #profile-right-panel .btn-id {
background-color: #d7dee7 !important;
color: #122030 !important;
}
body.theme-dark.page-builder #profile-right-panel .btn-config.active .btn-id,
body.theme-dark.page-builder #profile-right-panel .btn-config.selected .btn-id,
body.theme-dark.page-builder #profile-right-panel .btn-config.warn .btn-id,
body.theme-dark.page-builder #profile-right-panel .btn-config.danger .btn-id {
color: #fff !important;
}
body.page-musiconhold .action-container-left form.form-search select {
height: 30px !important;
min-height: 30px !important;
box-sizing: border-box !important;
vertical-align: middle !important;
}
body.page-musiconhold #hide-system-checkbox .pagination,
body.page-musiconhold .action-container-left .action-container-right .pagination {
margin: 0 !important;
}
body.page-musiconhold #hide-system-checkbox .pagination ul,
body.page-musiconhold #hide-system-checkbox .pagination li,
body.page-musiconhold #hide-system-checkbox .pagination li > a,
body.page-musiconhold .action-container-left .action-container-right .pagination ul,
body.page-musiconhold .action-container-left .action-container-right .pagination li,
body.page-musiconhold .action-container-left .action-container-right .pagination li > a {
display: flex !important;
align-items: center !important;
height: 30px !important;
min-height: 30px !important;
box-sizing: border-box !important;
}
body.page-musiconhold #hide-system-checkbox .pagination li > a,
body.page-musiconhold .action-container-left .action-container-right .pagination li > a {
padding: 0 0.75rem !important;
}
body.page-musiconhold #hide-system-checkbox label.checkbox,
body.page-musiconhold .action-container-left .action-container-right label.checkbox {
display: inline-flex !important;
align-items: center !important;
gap: 0.45rem !important;
height: 100% !important;
margin: 0 !important;
white-space: nowrap !important;
}
body.page-musiconhold #hide-system-checkbox label.checkbox span,
body.page-musiconhold .action-container-left .action-container-right label.checkbox span {
margin: 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
background: transparent !important;
border-radius: 0 !important;
}
/* SNAPbuilder Add button — fix left offset and alignment with dropdowns */
#builder-profiles .right-panel #add-profile.btn-long {
left: 0 !important;
width: 100% !important;
max-width: 100% !important;
display: block !important;
box-sizing: border-box !important;
margin-top: 10px !important;
}
/* --- Brad Fix #7: Timeframes days of week field alignment ---
The template uses .controls-group (with 's') — a custom class distinct from
Bootstrap's .control-group. The vendor toggles several rows with inline
display: none, so only force flex layout on rows that are already visible. */
.page-timeframes .modal .controls-group[style*="display: none"] {
display: none !important;
}
.page-timeframes .modal .controls-group.pt20:not([style*="display: none"]) {
display: flex !important;
align-items: center !important;
margin-bottom: 10px !important;
gap: 8px !important;
}
.page-timeframes .modal .controls-group.pt20 > .control-label {
width: 120px !important;
min-width: 120px !important;
text-align: right !important;
padding-right: 10px !important;
flex-shrink: 0 !important;
}
.page-timeframes .modal .flex-container-day-of-the-week {
display: flex !important;
align-items: center !important;
gap: 8px !important;
flex: 1 !important;
}
.page-timeframes .modal .flex-container-day-of-the-week .pl20 {
padding-left: 0 !important;
}
/* --- Brad Fix #9: Observed Holidays workweek selection not visibly selected ---
Vendor logic already toggles .selected on the labels, but our broader modal
label reset washes out the chip treatment. Reapply an explicit pill style. */
body.page-timeframes .modal.g4-themed .workweek-selector {
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex-wrap: wrap !important;
}
body.page-timeframes .modal.g4-themed .workweek-selector .workweek-day-label {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 2rem !important;
height: 2rem !important;
margin-right: 0 !important;
border-radius: 999px !important;
border: 1px solid rgba(148, 163, 184, 0.55) !important;
background: #f8fafc !important;
color: #475569 !important;
font-weight: 600 !important;
transition: background-color var(--g4-transition-fast), color var(--g4-transition-fast), border-color var(--g4-transition-fast) !important;
}
body.theme-dark.page-timeframes .modal.g4-themed .workweek-selector .workweek-day-label {
background: rgba(255, 255, 255, 0.06) !important;
border-color: rgba(255, 255, 255, 0.18) !important;
color: var(--text-primary) !important;
}
body.page-timeframes .modal.g4-themed .workweek-selector .workweek-day-label.selected,
body.page-timeframes .modal.g4-themed .workweek-selector input[type="checkbox"]:checked + .workweek-day-label {
background: var(--accent-primary) !important;
border-color: var(--accent-primary) !important;
color: #ffffff !important;
box-shadow: 0 0 0 1px rgba(var(--accent-primary-rgb), 0.16) !important;
}
/* Keep observed-holiday weekday chips and selects on the same height contract. */
body.page-timeframes #write-timeframe .workweek-observe-day-options .input-prepend {
display: flex !important;
align-items: stretch !important;
}
body.page-timeframes #write-timeframe .workweek-observe-day-options .input-prepend .add-on,
body.page-timeframes #write-timeframe .workweek-observe-day-options .input-prepend .holiday-is-on-day-selector {
height: 32px !important;
min-height: 32px !important;
box-sizing: border-box !important;
}
body.page-timeframes #write-timeframe .workweek-observe-day-options .input-prepend .add-on {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 3rem !important;
min-width: 3rem !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 1.2 !important;
padding-left: 0.4rem !important;
padding-right: 0.4rem !important;
}
body.page-timeframes #write-timeframe .workweek-observe-day-options .input-prepend .input.select {
display: flex !important;
flex: 0 1 18.5rem !important;
width: 18.5rem !important;
min-width: 18.5rem !important;
max-width: 18.5rem !important;
}
body.page-timeframes #write-timeframe .workweek-observe-day-options .input-prepend .holiday-is-on-day-selector {
width: 18.5rem !important;
min-width: 18.5rem !important;
max-width: 18.5rem !important;
line-height: 1.35 !important;
padding-top: 0.2rem !important;
padding-bottom: 0.2rem !important;
}
body.page-timeframes #write-timeframe #recurrence-specific-dates {
width: 22rem !important;
min-width: 22rem !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Dark-mode custom timeframes: the view carries a full dark shell, but the
accordion headings still inherit the vendor light section bars. */
#grid4-app-shell.theme-dark .custom-timeframe-panel {
background: rgba(9, 16, 26, 0.72) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
}
#grid4-app-shell.theme-dark .custom-timeframe-panel-title {
background: rgba(15, 23, 36, 0.96) !important;
color: rgb(237, 242, 248) !important;
}
#grid4-app-shell.theme-dark .custom-timeframe-panel-title a,
#grid4-app-shell.theme-dark .custom-timeframe-panel-title span {
color: inherit !important;
}
#grid4-app-shell.theme-dark .divider-line {
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
/* Keep the custom timeframe accordion bodies on the active dark surface. */
#grid4-app-shell.theme-dark .custom-timeframes-panel-body {
background: var(--surface-primary-bg) !important;
color: var(--text-primary) !important;
}
/* Timeframe edit modal: prevent bottom cutoff on tall content (e.g. Days of Week
with all 7 days). Bootstrap 2 centres modals with top: 50%; margin-top: -250px
and JS also applies a dynamic negative margin-top. Our top: 5% requires
margin-top: 0 to prevent the modal from being pushed above the viewport. */
#write-timeframe.modal {
top: 5% !important;
margin-top: 0 !important;
max-height: 90vh !important;
}
#write-timeframe.modal .modal-body {
max-height: calc(90vh - 140px) !important;
overflow-y: auto !important;
}
/* --- Brad Fix #8: AA language dropdown not opening ---
Root cause: The global animated-dropdown CSS (line 2839) sets ALL .dropdown-menu
to display: block !important with visibility: hidden & pointer-events: none.
This creates a phantom element in the DOM that interferes with click targeting
on the language dropdown toggle — making it finicky (only parts clickable).
Fix: Opt the language dropdown OUT of the animation system entirely.
Use simple display: none/block toggling so no ghost element exists when closed. */
/* Part A: Disable animated dropdown — use simple show/hide.
The outer
has padding that creates dead zones where clicks
don't reach the inner . Negative margins on the
extend it into the parent's padding so the entire button area is clickable. */
body.page-autoattendants .attendant-creation .language-dropdown {
position: relative !important;
overflow: visible !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--g4-button-primary-bg) !important;
border: 1px solid var(--g4-button-primary-border) !important;
color: #ffffff !important;
box-shadow: none !important;
}
/* Disable .btn ripple effect on language dropdown — the ripple ::before/::after
pseudo-elements grow to 300x300px on :active but overflow: visible lets them
escape the button, creating a visible gray box that grows while holding click */
body.page-autoattendants .attendant-creation .language-dropdown::before,
body.page-autoattendants .attendant-creation .language-dropdown::after {
display: none !important;
}
body.page-autoattendants .attendant-creation .language-dropdown .dropdown-toggle {
display: block !important;
margin: -4px -12px !important;
padding: 4px 12px !important;
user-select: none !important;
-webkit-user-drag: none !important;
}
body.page-autoattendants #grid4-app-shell .attendant-creation .language-dropdown:hover,
body.page-autoattendants #grid4-app-shell .attendant-creation .language-dropdown:focus-within,
body.page-autoattendants #grid4-app-shell .attendant-creation .language-dropdown.open {
background: var(--accent-secondary) !important;
border-color: var(--accent-secondary) !important;
color: #ffffff !important;
}
body.page-autoattendants .attendant-creation .language-dropdown .dropdown-menu {
display: none !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
transition: none !important;
pointer-events: auto !important;
z-index: 1050 !important;
position: absolute !important;
top: 100% !important;
left: 0 !important;
min-width: max-content !important;
border-radius: var(--g4-radius-md) !important;
}
body.page-autoattendants .attendant-creation .language-dropdown.open .dropdown-menu {
display: block !important;
}
/* Part B: Theme-aware styling for the AA editor language dropdown only */
#grid4-app-shell.theme-light .attendant-creation .language-dropdown .dropdown-toggle,
#grid4-app-shell.theme-light .attendant-creation .language-dropdown .dropdown-toggle > span,
#grid4-app-shell.theme-light .attendant-creation .language-dropdown .dropdown-toggle > i.nsicon {
color: #ffffff !important;
-webkit-text-fill-color: currentColor !important;
}
#grid4-app-shell.theme-light .attendant-creation .language-dropdown .caret {
border-top-color: #ffffff !important;
border-bottom-color: #ffffff !important;
}
#grid4-app-shell.theme-light .attendant-creation .language-dropdown .dropdown-menu {
background: #ffffff !important;
border: 1px solid rgba(15, 23, 42, 0.12) !important;
box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.14) !important;
}
#grid4-app-shell.theme-light .attendant-creation .language-dropdown .dropdown-menu li > a {
color: #1f2937 !important;
}
#grid4-app-shell.theme-light .attendant-creation .language-dropdown .dropdown-menu li > a:hover,
#grid4-app-shell.theme-light .attendant-creation .language-dropdown .dropdown-menu li > a:focus {
background: rgba(82, 180, 250, 0.12) !important;
color: #0f172a !important;
}
#grid4-app-shell.theme-light .attendant-creation .language-dropdown .dropdown-menu li.selected > a {
background: rgba(82, 180, 250, 0.16) !important;
color: #0f172a !important;
font-weight: 600 !important;
}
#grid4-app-shell.theme-dark .attendant-creation .language-dropdown .dropdown-toggle,
#grid4-app-shell.theme-dark .attendant-creation .language-dropdown .dropdown-toggle > span,
#grid4-app-shell.theme-dark .attendant-creation .language-dropdown .dropdown-toggle > i.nsicon {
color: #ffffff !important;
-webkit-text-fill-color: currentColor !important;
}
#grid4-app-shell.theme-dark .attendant-creation .language-dropdown .caret {
border-top-color: #ffffff !important;
border-bottom-color: #ffffff !important;
}
#grid4-app-shell.theme-dark .attendant-creation .language-dropdown .dropdown-menu {
background: var(--surface-primary-bg) !important;
border: 1px solid var(--border-color) !important;
box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.35) !important;
}
#grid4-app-shell.theme-dark .attendant-creation .language-dropdown .dropdown-menu li > a {
color: var(--text-primary) !important;
}
#grid4-app-shell.theme-dark .attendant-creation .language-dropdown .dropdown-menu li > a:hover,
#grid4-app-shell.theme-dark .attendant-creation .language-dropdown .dropdown-menu li > a:focus {
background: var(--accent-primary) !important;
color: #fff !important;
}
#grid4-app-shell.theme-dark .attendant-creation .language-dropdown .dropdown-menu li.selected > a {
background: rgba(var(--accent-primary-rgb), 0.16) !important;
color: var(--text-primary) !important;
font-weight: 600 !important;
}
body.page-autoattendants #grid4-app-shell .attendant-creation .tier-options-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: var(--g4-button-primary-bg) !important;
border: 1px solid var(--g4-button-primary-border) !important;
color: #ffffff !important;
box-shadow: none !important;
}
body.page-autoattendants #grid4-app-shell .attendant-creation .tier-options-btn:hover,
body.page-autoattendants #grid4-app-shell .attendant-creation .tier-options-btn:focus {
background: var(--accent-secondary) !important;
border-color: var(--accent-secondary) !important;
color: #ffffff !important;
}
body.page-autoattendants #grid4-app-shell .attendant-creation .tier-options-btn .glyphicon-small-cogwheel {
filter: brightness(0) invert(1) !important;
opacity: 1 !important;
}
/* ===================================
FINAL POLISH: FLAT BUTTON SYSTEM + MODAL SURFACE GUARDS
=================================== */
:root {
--g4-scrollbar-track: rgba(148, 163, 184, 0.18);
--g4-scrollbar-thumb: rgba(100, 116, 139, 0.46);
--g4-scrollbar-thumb-hover: rgba(71, 85, 105, 0.6);
}
html,
body,
#grid4-app-shell *,
.modal .modal-body,
.modal .modal-body .modal-body-flex-container,
.dock-column.dock-contacts .scroll-container,
.dock-column.uc-message-box-column .chat-messages,
.dock-column.uc-message-box-column .chat-messages-container,
#conversation-new .chat-messages,
#conversation-new .chat-messages-container,
#grid4-app-shell .contacts-panel-main #group-dropdown > .dropdown-submenu > .dropdown-menu {
scrollbar-width: thin;
scrollbar-color: var(--g4-scrollbar-thumb) var(--g4-scrollbar-track);
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
#grid4-app-shell *::-webkit-scrollbar,
.modal .modal-body::-webkit-scrollbar,
.modal .modal-body .modal-body-flex-container::-webkit-scrollbar,
.dock-column.dock-contacts .scroll-container::-webkit-scrollbar,
.dock-column.uc-message-box-column .chat-messages::-webkit-scrollbar,
.dock-column.uc-message-box-column .chat-messages-container::-webkit-scrollbar,
#conversation-new .chat-messages::-webkit-scrollbar,
#conversation-new .chat-messages-container::-webkit-scrollbar,
#grid4-app-shell .contacts-panel-main #group-dropdown > .dropdown-submenu > .dropdown-menu::-webkit-scrollbar {
width: 0.5rem !important;
height: 0.5rem !important;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
#grid4-app-shell *::-webkit-scrollbar-track,
.modal .modal-body::-webkit-scrollbar-track,
.modal .modal-body .modal-body-flex-container::-webkit-scrollbar-track,
.dock-column.dock-contacts .scroll-container::-webkit-scrollbar-track,
.dock-column.uc-message-box-column .chat-messages::-webkit-scrollbar-track,
.dock-column.uc-message-box-column .chat-messages-container::-webkit-scrollbar-track,
#conversation-new .chat-messages::-webkit-scrollbar-track,
#conversation-new .chat-messages-container::-webkit-scrollbar-track,
#grid4-app-shell .contacts-panel-main #group-dropdown > .dropdown-submenu > .dropdown-menu::-webkit-scrollbar-track {
background: var(--g4-scrollbar-track) !important;
border-radius: 999px !important;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
#grid4-app-shell *::-webkit-scrollbar-thumb,
.modal .modal-body::-webkit-scrollbar-thumb,
.modal .modal-body .modal-body-flex-container::-webkit-scrollbar-thumb,
.dock-column.dock-contacts .scroll-container::-webkit-scrollbar-thumb,
.dock-column.uc-message-box-column .chat-messages::-webkit-scrollbar-thumb,
.dock-column.uc-message-box-column .chat-messages-container::-webkit-scrollbar-thumb,
#conversation-new .chat-messages::-webkit-scrollbar-thumb,
#conversation-new .chat-messages-container::-webkit-scrollbar-thumb,
#grid4-app-shell .contacts-panel-main #group-dropdown > .dropdown-submenu > .dropdown-menu::-webkit-scrollbar-thumb {
background: var(--g4-scrollbar-thumb) !important;
border-radius: 999px;
border: 1px solid transparent !important;
background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover,
#grid4-app-shell *::-webkit-scrollbar-thumb:hover,
.modal .modal-body::-webkit-scrollbar-thumb:hover,
.modal .modal-body .modal-body-flex-container::-webkit-scrollbar-thumb:hover,
.dock-column.dock-contacts .scroll-container::-webkit-scrollbar-thumb:hover,
.dock-column.uc-message-box-column .chat-messages::-webkit-scrollbar-thumb:hover,
.dock-column.uc-message-box-column .chat-messages-container::-webkit-scrollbar-thumb:hover,
#conversation-new .chat-messages::-webkit-scrollbar-thumb:hover,
#conversation-new .chat-messages-container::-webkit-scrollbar-thumb:hover,
#grid4-app-shell .contacts-panel-main #group-dropdown > .dropdown-submenu > .dropdown-menu::-webkit-scrollbar-thumb:hover {
background: var(--g4-scrollbar-thumb-hover) !important;
}
body.theme-light .dock-contacts div.contact-dock-gravatar.gravatar-img-contact {
background: rgba(var(--accent-primary-rgb), 0.12) !important;
border: 1px solid rgba(var(--g4-brand-navy-rgb), 0.12) !important;
box-shadow: none !important;
}
body.theme-dark .dock-contacts div.contact-dock-gravatar.gravatar-img-contact {
background: rgba(var(--accent-primary-rgb), 0.2) !important;
border: 1px solid rgba(var(--accent-primary-rgb), 0.28) !important;
box-shadow: none !important;
}
#grid4-app-shell .btn,
#grid4-app-shell button:not(.round-button):not(.add):not(.del),
#grid4-app-shell input[type="button"],
#grid4-app-shell input[type="submit"],
html:not([data-grid4-skin="off"]) body .modal .btn,
html:not([data-grid4-skin="off"]) body .modal button:not(.round-button):not(.add):not(.del),
html:not([data-grid4-skin="off"]) body .dock-column .btn,
html:not([data-grid4-skin="off"]) body .dock-column button:not(.round-button):not(.add):not(.del),
.fixed-container > #domain-message .btn,
.fixed-container > .mask-bar .btn {
background-image: none !important;
text-shadow: none !important;
box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.1) !important;
border-radius: 0.375rem !important;
font-family: var(--g4-font-family-heading) !important;
font-weight: 600 !important;
transition: background-color var(--g4-transition-fast), border-color var(--g4-transition-fast), color var(--g4-transition-fast), box-shadow var(--g4-transition-fast), transform var(--g4-transition-fast) !important;
}
/* Preserve vendor sprite buttons such as the user-portal Call Center
login/logout controls. They are empty elements whose
icon only exists via the original background sprite. */
#grid4-app-shell button.round-button,
#grid4-app-shell button.add,
#grid4-app-shell button.del,
html:not([data-grid4-skin="off"]) body .modal button.round-button,
html:not([data-grid4-skin="off"]) body .modal button.add,
html:not([data-grid4-skin="off"]) body .modal button.del,
html:not([data-grid4-skin="off"]) body .dock-column button.round-button,
html:not([data-grid4-skin="off"]) body .dock-column button.add,
html:not([data-grid4-skin="off"]) body .dock-column button.del {
background-repeat: no-repeat !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
margin-right: 0 !important;
width: 20px !important;
height: 20px !important;
padding: 0 !important;
font-family: inherit !important;
font-weight: 400 !important;
font-size: 0 !important;
line-height: 0 !important;
text-shadow: none !important;
vertical-align: middle !important;
}
#grid4-app-shell .btn-default,
#grid4-app-shell .btn-secondary,
#grid4-app-shell .btn.cancel,
#grid4-app-shell .back-btn,
html:not([data-grid4-skin="off"]) body .modal .btn-default,
html:not([data-grid4-skin="off"]) body .modal .btn-secondary,
html:not([data-grid4-skin="off"]) body .modal .btn.cancel,
html:not([data-grid4-skin="off"]) body .dock-column .btn-default,
html:not([data-grid4-skin="off"]) body .dock-column .btn-secondary,
html:not([data-grid4-skin="off"]) body .dock-column .btn.cancel {
background: var(--g4-button-surface) !important;
border: 1px solid var(--g4-button-surface-border) !important;
color: var(--text-primary) !important;
}
#grid4-app-shell .btn-default:hover,
#grid4-app-shell .btn-default:focus,
#grid4-app-shell .btn-secondary:hover,
#grid4-app-shell .btn-secondary:focus,
#grid4-app-shell .btn.cancel:hover,
#grid4-app-shell .btn.cancel:focus,
#grid4-app-shell .back-btn:hover,
#grid4-app-shell .back-btn:focus,
html:not([data-grid4-skin="off"]) body .modal .btn-default:hover,
html:not([data-grid4-skin="off"]) body .modal .btn-default:focus,
html:not([data-grid4-skin="off"]) body .modal .btn-secondary:hover,
html:not([data-grid4-skin="off"]) body .modal .btn-secondary:focus,
html:not([data-grid4-skin="off"]) body .modal .btn.cancel:hover,
html:not([data-grid4-skin="off"]) body .modal .btn.cancel:focus,
html:not([data-grid4-skin="off"]) body .dock-column .btn-default:hover,
html:not([data-grid4-skin="off"]) body .dock-column .btn-default:focus,
html:not([data-grid4-skin="off"]) body .dock-column .btn-secondary:hover,
html:not([data-grid4-skin="off"]) body .dock-column .btn-secondary:focus,
html:not([data-grid4-skin="off"]) body .dock-column .btn.cancel:hover,
html:not([data-grid4-skin="off"]) body .dock-column .btn.cancel:focus {
background: var(--g4-button-surface-hover) !important;
border-color: var(--g4-button-primary-border) !important;
color: var(--text-primary) !important;
background-image: none !important;
}
#grid4-app-shell .btn-primary,
#grid4-app-shell .btn-info,
#grid4-app-shell .btn-success,
#grid4-app-shell .color-primary,
html:not([data-grid4-skin="off"]) body .modal .btn-primary,
html:not([data-grid4-skin="off"]) body .modal .btn-info,
html:not([data-grid4-skin="off"]) body .modal .btn-success,
html:not([data-grid4-skin="off"]) body .modal .color-primary,
html:not([data-grid4-skin="off"]) body .dock-column .btn-primary,
html:not([data-grid4-skin="off"]) body .dock-column .btn-info,
html:not([data-grid4-skin="off"]) body .dock-column .btn-success {
background: var(--g4-button-primary-bg) !important;
border: 1px solid var(--g4-button-primary-border) !important;
color: #ffffff !important;
}
#grid4-app-shell .btn-primary:hover,
#grid4-app-shell .btn-primary:focus,
#grid4-app-shell .btn-info:hover,
#grid4-app-shell .btn-info:focus,
#grid4-app-shell .btn-success:hover,
#grid4-app-shell .btn-success:focus,
#grid4-app-shell .color-primary:hover,
#grid4-app-shell .color-primary:focus,
html:not([data-grid4-skin="off"]) body .modal .btn-primary:hover,
html:not([data-grid4-skin="off"]) body .modal .btn-primary:focus,
html:not([data-grid4-skin="off"]) body .modal .btn-info:hover,
html:not([data-grid4-skin="off"]) body .modal .btn-info:focus,
html:not([data-grid4-skin="off"]) body .modal .btn-success:hover,
html:not([data-grid4-skin="off"]) body .modal .btn-success:focus,
html:not([data-grid4-skin="off"]) body .modal .color-primary:hover,
html:not([data-grid4-skin="off"]) body .modal .color-primary:focus,
html:not([data-grid4-skin="off"]) body .dock-column .btn-primary:hover,
html:not([data-grid4-skin="off"]) body .dock-column .btn-primary:focus,
html:not([data-grid4-skin="off"]) body .dock-column .btn-info:hover,
html:not([data-grid4-skin="off"]) body .dock-column .btn-info:focus,
html:not([data-grid4-skin="off"]) body .dock-column .btn-success:hover,
html:not([data-grid4-skin="off"]) body .dock-column .btn-success:focus {
background: var(--g4-button-primary-hover-bg) !important;
border-color: var(--g4-button-primary-hover-bg) !important;
color: #ffffff !important;
background-image: none !important;
}
#grid4-app-shell .btn-danger,
#grid4-app-shell button#ButtonResetUser.btn.helpsy,
#grid4-app-shell a#bulkDeleteBtn.btn.btn-danger,
html:not([data-grid4-skin="off"]) body .modal .btn-danger,
html:not([data-grid4-skin="off"]) body .dock-column .btn-danger {
background: var(--g4-button-danger-bg) !important;
border: 1px solid var(--g4-button-danger-border) !important;
color: #ffffff !important;
}
#grid4-app-shell .btn-danger:hover,
#grid4-app-shell .btn-danger:focus,
#grid4-app-shell button#ButtonResetUser.btn.helpsy:hover,
#grid4-app-shell button#ButtonResetUser.btn.helpsy:focus,
#grid4-app-shell a#bulkDeleteBtn.btn.btn-danger:hover,
#grid4-app-shell a#bulkDeleteBtn.btn.btn-danger:focus,
html:not([data-grid4-skin="off"]) body .modal .btn-danger:hover,
html:not([data-grid4-skin="off"]) body .modal .btn-danger:focus,
html:not([data-grid4-skin="off"]) body .dock-column .btn-danger:hover,
html:not([data-grid4-skin="off"]) body .dock-column .btn-danger:focus {
background: var(--g4-button-danger-hover-bg) !important;
border-color: var(--g4-button-danger-hover-bg) !important;
color: #ffffff !important;
}
#grid4-app-shell .btn-warning,
html:not([data-grid4-skin="off"]) body .modal .btn-warning,
html:not([data-grid4-skin="off"]) body .dock-column .btn-warning {
background: #f4b449 !important;
border: 1px solid #df9e29 !important;
color: #1f2937 !important;
}
#grid4-app-shell .btn-warning:hover,
#grid4-app-shell .btn-warning:focus,
html:not([data-grid4-skin="off"]) body .modal .btn-warning:hover,
html:not([data-grid4-skin="off"]) body .modal .btn-warning:focus,
html:not([data-grid4-skin="off"]) body .dock-column .btn-warning:hover,
html:not([data-grid4-skin="off"]) body .dock-column .btn-warning:focus {
background: #f7c05c !important;
border-color: #e6ac38 !important;
color: #1f2937 !important;
}
#grid4-app-shell .btn-link,
html:not([data-grid4-skin="off"]) body .modal .btn-link,
html:not([data-grid4-skin="off"]) body .dock-column .btn-link {
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
color: var(--accent-primary) !important;
}
#grid4-app-shell .btn .fa,
#grid4-app-shell .btn .iconfont,
#grid4-app-shell .btn .nsicon,
#grid4-app-shell .btn svg,
html:not([data-grid4-skin="off"]) body .modal .btn .fa,
html:not([data-grid4-skin="off"]) body .modal .btn .iconfont,
html:not([data-grid4-skin="off"]) body .modal .btn .nsicon,
html:not([data-grid4-skin="off"]) body .modal .btn svg,
html:not([data-grid4-skin="off"]) body .dock-column .btn .fa,
html:not([data-grid4-skin="off"]) body .dock-column .btn .iconfont,
html:not([data-grid4-skin="off"]) body .dock-column .btn .nsicon,
html:not([data-grid4-skin="off"]) body .dock-column .btn svg {
color: inherit !important;
fill: currentColor !important;
text-shadow: none !important;
opacity: 1 !important;
-webkit-text-fill-color: currentColor !important;
}
html:not([data-grid4-skin="off"]) body.theme-dark .modal.g4-themed .modal-body,
html:not([data-grid4-skin="off"]) body.theme-dark .modal.g4-themed .modal-body > div:not(.control-group):not(.controls-group),
html:not([data-grid4-skin="off"]) body.theme-dark .modal.g4-themed .modal-body .tab-content,
html:not([data-grid4-skin="off"]) body.theme-dark .modal.g4-themed .modal-body .tab-pane,
html:not([data-grid4-skin="off"]) body.theme-dark .modal.g4-themed .modal-body .modal-body-flex-container,
html:not([data-grid4-skin="off"]) body.theme-dark .modal.g4-themed .modal-body .table-responsive,
html:not([data-grid4-skin="off"]) body.theme-dark .modal.g4-themed .modal-body [style*="background-color: rgb(255, 255, 255)"],
html:not([data-grid4-skin="off"]) body.theme-dark .modal.g4-themed .modal-body [style*="background-color:#fff"],
html:not([data-grid4-skin="off"]) body.theme-dark .modal.g4-themed .modal-body [style*="background: white"],
html:not([data-grid4-skin="off"]) body.theme-dark .modal.g4-themed .modal-body [style*="background:#fff"] {
background-color: var(--modal-bg) !important;
color: var(--modal-text) !important;
border-color: var(--modal-border) !important;
opacity: 1 !important;
}
html:not([data-grid4-skin="off"]) body.theme-dark .modal.g4-themed .modal-body .well,
html:not([data-grid4-skin="off"]) body.theme-dark .modal.g4-themed .modal-body .panel,
html:not([data-grid4-skin="off"]) body.theme-dark .modal.g4-themed .modal-body .panel-body,
html:not([data-grid4-skin="off"]) body.theme-dark .modal.g4-themed .modal-body .accordion-group,
html:not([data-grid4-skin="off"]) body.theme-dark .modal.g4-themed .modal-body .accordion-inner,
html:not([data-grid4-skin="off"]) body.theme-dark .modal.g4-themed .modal-body .form-actions {
background-color: rgba(255, 255, 255, 0.03) !important;
color: var(--modal-text) !important;
border-color: var(--modal-border) !important;
}
html:not([data-grid4-skin="off"]) body.theme-dark .modal.g4-themed .modal-body .table,
html:not([data-grid4-skin="off"]) body.theme-dark .modal.g4-themed .modal-body .table td,
html:not([data-grid4-skin="off"]) body.theme-dark .modal.g4-themed .modal-body .table th {
background-color: var(--modal-bg) !important;
color: var(--modal-text) !important;
border-color: var(--modal-border) !important;
}
html:not([data-grid4-skin="off"]) body.theme-light .modal.g4-themed .modal-body .well,
html:not([data-grid4-skin="off"]) body.theme-light .modal.g4-themed .modal-body .panel,
html:not([data-grid4-skin="off"]) body.theme-light .modal.g4-themed .modal-body .panel-body,
html:not([data-grid4-skin="off"]) body.theme-light .modal.g4-themed .modal-body .accordion-group,
html:not([data-grid4-skin="off"]) body.theme-light .modal.g4-themed .modal-body .accordion-inner,
html:not([data-grid4-skin="off"]) body.theme-light .modal.g4-themed .modal-body .form-actions {
background-color: var(--surface-secondary-bg) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
/* Shared legacy modal fix: keep Bootstrap 2 horizontal-form row wrappers
transparent so the row lane itself does not read like a faux input surface. */
html:not([data-grid4-skin="off"]) body .modal.g4-themed .form-horizontal .control-group,
html:not([data-grid4-skin="off"]) body .modal.g4-themed .form-horizontal .control-group > .controls {
background: none !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
}
body.theme-dark .bootstrap-switch-container {
background-color: var(--surface-primary-bg) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
body.theme-dark span.bootstrap-switch-handle-off.bootstrap-switch-default {
color: red !important;
font-weight: 700 !important;
}
body.theme-dark .bootstrap-switch {
background: var(--surface-secondary-bg) !important;
border-color: var(--border-color) !important;
box-shadow: none !important;
background-image: none !important;
filter: none !important;
}
body.theme-dark .bootstrap-switch .bootstrap-switch-container {
background-color: var(--surface-secondary-bg) !important;
background-image: none !important;
}
body.theme-dark .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
body.theme-dark .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
background: rgba(var(--accent-primary-rgb), 0.86) !important;
background-image: none !important;
color: #eef3fa !important;
border-color: rgba(var(--accent-primary-rgb), 0.62) !important;
box-shadow: none !important;
}
body.theme-dark .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
background: rgba(255, 255, 255, 0.06) !important;
background-image: none !important;
color: red !important;
font-weight: 700 !important;
border-color: var(--border-color) !important;
text-shadow: none !important;
box-shadow: none !important;
}
body.theme-dark .bootstrap-switch .bootstrap-switch-label {
background: rgba(255, 255, 255, 0.06) !important;
background-image: none !important;
color: var(--text-secondary) !important;
border-color: var(--border-color) !important;
text-shadow: none !important;
box-shadow: none !important;
}
body.theme-dark .modal .bootstrap-switch .bootstrap-switch-label,
body.theme-dark .ui-dialog .bootstrap-switch .bootstrap-switch-label {
background: rgba(11, 15, 20, 0.96) !important;
color: var(--text-secondary) !important;
border-left: 1px solid rgba(255, 255, 255, 0.08) !important;
border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}
body.theme-dark .modal .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default,
body.theme-dark .ui-dialog .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
background: rgba(255, 255, 255, 0.05) !important;
color: red !important;
font-weight: 700 !important;
}
body.page-inventory .modal[id^="import-"] .modal-footer > a.btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
height: 29.25px !important;
min-height: 29.25px !important;
line-height: 17.5px !important;
vertical-align: middle !important;
}
body.page-callhistory #allowblock-lists.modal .modal-footer > a.btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
height: 29.25px !important;
min-height: 29.25px !important;
line-height: 17.5px !important;
vertical-align: middle !important;
}
/* Late follow-up for the user-portal Allow / Block flow:
the standalone route renders the modal body/footer directly under #content
instead of inside #allowblock-lists.modal, so repeat the cleanup here after
the broader modal/button systems have finished. */
body.page-answerrules #content > .modal-body .allowblock-table,
body.page-answerrules #allowblock-lists.modal .allowblock-table {
min-height: 180px !important;
max-height: 180px !important;
overflow-y: auto !important;
}
body.page-answerrules #content > .modal-body .well,
body.page-answerrules #allowblock-lists.modal .well {
background-color: var(--surface-primary-bg) !important;
border: 0 !important;
box-shadow: none !important;
}
body.page-answerrules #content > .modal-body .allowblock-anon,
body.page-answerrules #allowblock-lists.modal .allowblock-anon {
background-color: var(--surface-secondary-bg) !important;
border: 0 !important;
box-shadow: none !important;
}
body.page-answerrules #content > .modal-body .allowblock-table td:last-child,
body.page-answerrules #allowblock-lists.modal .allowblock-table td:last-child {
width: 2.5rem !important;
text-align: center !important;
}
body.page-answerrules #content > .modal-body .allowblock-table a.helpsy,
body.page-answerrules #allowblock-lists.modal .allowblock-table a.helpsy {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
text-decoration: none !important;
opacity: 1 !important;
}
body.page-answerrules #content > .modal-body .allowblock-table a.helpsy:hover,
body.page-answerrules #content > .modal-body .allowblock-table a.helpsy:focus,
body.page-answerrules #allowblock-lists.modal .allowblock-table a.helpsy:hover,
body.page-answerrules #allowblock-lists.modal .allowblock-table a.helpsy:focus {
background: transparent !important;
border-color: transparent !important;
}
body.page-answerrules #content > .modal-body .allowblock-table a.helpsy i.icon-remove,
body.page-answerrules #allowblock-lists.modal .allowblock-table a.helpsy i.icon-remove {
color: #d14b5a !important;
filter: none !important;
opacity: 1 !important;
margin: 0 !important;
text-shadow: none !important;
}
/* Inventory add/edit legacy forms mix 211px, 220px, and 250px control widths
within the same field lane. Normalize the primary text/select/textarea
controls to one width without touching checkboxes, radios, or switches. */
body.page-inventory form[action*="/portal/inventory/add/phonenumber"] .control-group .controls input[type="text"],
body.page-inventory form[action*="/portal/inventory/edit/phonenumber"] .control-group .controls input[type="text"],
body.page-inventory form[action*="/portal/inventory/add/phonenumber"] .control-group .controls select,
body.page-inventory form[action*="/portal/inventory/edit/phonenumber"] .control-group .controls select,
body.page-inventory form[action*="/portal/inventory/add/smsnumber"] .control-group .controls input[type="text"],
body.page-inventory form[action*="/portal/inventory/edit/smsnumber"] .control-group .controls input[type="text"],
body.page-inventory form[action*="/portal/inventory/add/smsnumber"] .control-group .controls select,
body.page-inventory form[action*="/portal/inventory/edit/smsnumber"] .control-group .controls select,
body.page-inventory #add-phone-form .control-group .controls input[type="text"],
body.page-inventory form[action*="/portal/inventory/edit/phone"] .control-group .controls input[type="text"],
body.page-inventory #add-phone-form .control-group .controls select,
body.page-inventory form[action*="/portal/inventory/edit/phone"] .control-group .controls select {
box-sizing: border-box !important;
width: 250px !important;
min-width: 250px !important;
max-width: 250px !important;
}
/* Inventory edit forms do not consistently keep the legacy Bootstrap .controls
wrapper around the primary field lane, so mirror the same width contract one
level up for edit routes only. */
body.page-inventory form[action*="/portal/inventory/edit/phonenumber"] .control-group input[type="text"],
body.page-inventory form[action*="/portal/inventory/edit/phonenumber"] .control-group select,
body.page-inventory form[action*="/portal/inventory/edit/phonenumber"] .control-group textarea:not(#notes),
body.page-inventory form[action*="/portal/inventory/edit/smsnumber"] .control-group input[type="text"],
body.page-inventory form[action*="/portal/inventory/edit/smsnumber"] .control-group select,
body.page-inventory form[action*="/portal/inventory/edit/smsnumber"] .control-group textarea,
body.page-inventory form[action*="/portal/inventory/edit/phone"] .control-group input[type="text"],
body.page-inventory form[action*="/portal/inventory/edit/phone"] .control-group select,
body.page-inventory form[action*="/portal/inventory/edit/phone"] .control-group textarea:not([id$="Notes"]):not([id$="Overrides"]) {
box-sizing: border-box !important;
width: 250px !important;
min-width: 250px !important;
max-width: 250px !important;
}
body.page-inventory form[action*="/portal/inventory/add/phone"] .control-group .controls textarea[id$="Notes"],
body.page-inventory form[action*="/portal/inventory/add/phone"] .control-group .controls textarea[id$="Overrides"],
body.page-inventory #add-phone-form .control-group .controls textarea[id$="Notes"],
body.page-inventory #add-phone-form .control-group .controls textarea[id$="Overrides"],
body.page-inventory form[action*="/portal/inventory/edit/phone"] .control-group .controls textarea[id$="Notes"],
body.page-inventory form[action*="/portal/inventory/edit/phone"] .control-group .controls textarea[id$="Overrides"],
body.page-inventory form[action*="/portal/inventory/add/phonenumber"] .control-group .controls textarea#notes,
body.page-inventory form[action*="/portal/inventory/edit/phonenumber"] .control-group textarea#notes,
body.page-inventory #bulkedit-phones textarea#notes {
box-sizing: border-box !important;
min-width: 250px !important;
min-height: 5.25rem !important;
max-height: none !important;
max-width: 480px !important;
resize: both !important;
overflow: auto !important;
overflow-y: auto !important;
}
body.page-inventory form[action*="/portal/inventory/add/phonenumber"] .input-append > input[type="text"],
body.page-inventory form[action*="/portal/inventory/edit/phonenumber"] .input-append > input[type="text"] {
height: 1.95rem !important;
min-height: 1.95rem !important;
box-sizing: border-box !important;
}
body.page-inventory #add-phonenumber textarea#notes,
body.page-inventory #edit-number textarea#notes {
box-sizing: border-box !important;
min-width: 250px !important;
max-width: 480px !important;
}
body.page-inventory #add-phonenumber .input-append > input[type="text"],
body.page-inventory #edit-number .input-append > input[type="text"] {
height: 1.95rem !important;
min-height: 1.95rem !important;
box-sizing: border-box !important;
}
body.page-inventory form[action*="/portal/inventory/add/phonenumber"] .input-append > .add-on,
body.page-inventory form[action*="/portal/inventory/edit/phonenumber"] .input-append > .add-on {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 1.95rem !important;
min-height: 1.95rem !important;
line-height: 1 !important;
box-sizing: border-box !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body.page-inventory #add-phonenumber .input-append > .add-on,
body.page-inventory #edit-number .input-append > .add-on {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 30px !important;
min-width: 30px !important;
height: 1.95rem !important;
min-height: 1.95rem !important;
line-height: 1 !important;
box-sizing: border-box !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body.page-inventory #bulkedit-phones .modal-footer .btn-group.dropup > .btn,
body.page-inventory #edit-phone .modal-footer .btn-group.dropup > .btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 1.95rem !important;
min-height: 1.95rem !important;
line-height: 1.25rem !important;
box-sizing: border-box !important;
}
body.page-inventory #bulkedit-phones .modal-footer .btn-group.dropup > .btn + .btn,
body.page-inventory #edit-phone .modal-footer .btn-group.dropup > .btn + .btn {
margin-left: -1px !important;
}
body.page-inventory #bulkedit-phones .modal-footer .btn-group.dropup > .btn:first-child,
body.page-inventory #edit-phone .modal-footer .btn-group.dropup > .btn:first-child {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
body.page-inventory #bulkedit-phones .modal-footer .btn-group.dropup > .btn:last-of-type,
body.page-inventory #edit-phone .modal-footer .btn-group.dropup > .btn:last-of-type {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
body.page-inventory #bulkedit-phones .modal-footer #bulkEditPhonesFormSubmitCombo,
body.page-inventory #edit-phone .modal-footer #editPhonesFormSubmitCombo {
width: 2rem !important;
min-width: 2rem !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
body.page-inventory #add-phone .modal-footer,
body.page-inventory #edit-phone .modal-footer,
body.page-inventory #add-phonenumber .modal-footer,
body.page-inventory #edit-number .modal-footer,
body.page-inventory #bulkedit-phones .modal-footer,
body.page-queues #write-queue .modal-footer,
body.page-music #write-music .modal-footer,
body.page-music #music-settings .modal-footer {
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 0.45rem !important;
padding-right: 2.75rem !important;
}
body.page-inventory #add-phone .modal-footer > *,
body.page-inventory #edit-phone .modal-footer > *,
body.page-inventory #add-phonenumber .modal-footer > *,
body.page-inventory #edit-number .modal-footer > *,
body.page-inventory #bulkedit-phones .modal-footer > *,
body.page-queues #write-queue .modal-footer > *,
body.page-music #write-music .modal-footer > *,
body.page-music #music-settings .modal-footer > * {
margin-left: 0 !important;
margin-right: 0 !important;
}
body.theme-dark .modal .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
body.theme-dark .modal .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
body.theme-dark .ui-dialog .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
body.theme-dark .ui-dialog .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
background: rgba(var(--accent-primary-rgb), 0.88) !important;
color: #eef4fb !important;
}
body.theme-light .popover .popover-title,
body.theme-light .popover .popover-content {
background-color: rgba(243, 247, 252, 0.98) !important;
}
body.theme-light .popover .popover-content.text-center .btn-group .btn.btn-medium:not(.btn-danger) {
background: rgba(231, 238, 246, 0.96) !important;
background-image: none !important;
border: 1px solid rgba(var(--g4-brand-navy-rgb), 0.12) !important;
color: #31465e !important;
box-shadow: none !important;
text-shadow: none !important;
}
body.theme-light .popover .popover-content.text-center .btn-group .btn.btn-medium.btn-danger {
background: var(--g4-button-danger-bg) !important;
background-image: none !important;
border: 1px solid var(--g4-button-danger-border) !important;
color: #ffffff !important;
box-shadow: none !important;
text-shadow: none !important;
}
body.theme-light .popover .popover-content.text-center .btn-group .btn.btn-medium:not(.btn-danger):hover,
body.theme-light .popover .popover-content.text-center .btn-group .btn.btn-medium:not(.btn-danger):focus {
background: rgba(var(--g4-brand-sky-rgb), 0.18) !important;
border-color: rgba(var(--g4-brand-sky-rgb), 0.28) !important;
color: #17344c !important;
}
body.theme-dark #grid4-app-shell .btn[disabled],
body.theme-dark #grid4-app-shell .btn.disabled,
body.theme-dark #grid4-app-shell button[disabled],
body.theme-dark #grid4-app-shell input[type="button"][disabled],
body.theme-dark #grid4-app-shell input[type="submit"][disabled],
body.theme-dark .fixed-container > #domain-message .btn[disabled],
body.theme-dark .fixed-container > #domain-message .btn.disabled,
body.theme-dark .fixed-container > .mask-bar .btn[disabled],
body.theme-dark .fixed-container > .mask-bar .btn.disabled {
background: rgba(255, 255, 255, 0.06) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: rgba(223, 232, 245, 0.58) !important;
box-shadow: none !important;
opacity: 1 !important;
}
body.theme-dark .page-home .chart-container,
body.theme-dark .page-home #omp-callgraphs-body,
body.theme-dark .page-home #chart_div,
body.theme-dark .page-home #chart_div_AnnotationChart,
body.theme-dark .page-home #chart_div_AnnotationChart_borderDiv,
body.theme-dark .page-home #chart_div_AnnotationChart_borderDiv > div,
body.theme-dark .page-home #chart_div_AnnotationChart_chartContainer,
body.theme-dark .page-home #chart_div_AnnotationChart_containerTable,
body.theme-dark .page-home .graphs-panel-home .loading-container,
body.theme-dark .page-home .graphs-panel-home .loading-container.relative,
body.theme-dark .page-home #omp-callgraphs-body .loading-container,
body.theme-dark .page-home #omp-callgraphs-body .loading-container.relative,
body.theme-dark .page-home .stats-panel-home .loading-container,
body.theme-dark .page-home .stats-panel-home .loading-container.relative,
body.theme-dark .page-home #omp-usage-stats .loading-container,
body.theme-dark .page-home #omp-usage-stats .loading-container.relative {
background-color: var(--surface-primary-bg) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
body.theme-dark .page-home #chart_div .google-visualization-atl,
body.theme-dark .page-home #chart_div .google-visualization-atl .border {
background-color: transparent !important;
border-color: var(--border-color) !important;
}
body.page-home #chart_div,
body.page-home #chart_div > div,
body.page-home #chart_div_AnnotationChart,
body.page-home #chart_div_AnnotationChart_borderDiv,
body.page-home #chart_div_AnnotationChart_borderDiv > div,
body.page-home #chart_div_AnnotationChart_chartContainer,
body.page-home #chart_div_AnnotationChart_containerTable {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
overflow: hidden !important;
padding: 0 !important;
}
body.page-home #chart_div[data-g4-chart-state="pending"] svg,
body.page-home #chart_div[data-g4-chart-state="pending"] .google-visualization-atl,
body.page-home #chart_div[data-g4-chart-state="pending"] .chartControls,
body.page-home #chart_div[data-g4-chart-state="pending"] .rangeControl,
body.page-home #chart_div_AnnotationChart_borderDiv[data-g4-chart-state="pending"] svg,
body.page-home #chart_div_AnnotationChart_borderDiv[data-g4-chart-state="pending"] .google-visualization-atl,
body.page-home #chart_div_AnnotationChart_borderDiv[data-g4-chart-state="pending"] .chartControls,
body.page-home #chart_div_AnnotationChart_borderDiv[data-g4-chart-state="pending"] .rangeControl,
body.page-agents #cc-stats-div[data-g4-chart-state="pending"] svg,
body.page-agents #cc-stats-div[data-g4-chart-state="pending"] .google-visualization-atl,
body.page-agents #modal-graph-div[data-g4-chart-state="pending"] svg,
body.page-agents #modal-graph-div[data-g4-chart-state="pending"] .google-visualization-atl,
body.page-stats #chart_div2[data-g4-chart-state="pending"] svg,
body.page-stats #chart_div2[data-g4-chart-state="pending"] .google-visualization-atl,
body.page-stats #chart_div3[data-g4-chart-state="pending"] svg,
body.page-stats #chart_div3[data-g4-chart-state="pending"] .google-visualization-atl,
body.page-stats #chart_div4[data-g4-chart-state="pending"] svg,
body.page-stats #chart_div4[data-g4-chart-state="pending"] .google-visualization-atl {
opacity: 0 !important;
}
body.theme-dark .popover,
body.theme-dark .popover .popover-inner,
body.theme-dark .popover .popover-title,
body.theme-dark .popover .popover-content {
background-color: var(--g4-popover-bg) !important;
color: var(--g4-popover-text) !important;
border-color: var(--g4-popover-border) !important;
text-shadow: none !important;
}
body.theme-dark .popover {
border: 1px solid var(--g4-popover-border) !important;
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.42) !important;
}
body.theme-dark .popover .popover-title {
border-bottom: 1px solid var(--g4-popover-border) !important;
}
body.theme-dark .popover.left > .arrow {
border-left-color: var(--g4-popover-border) !important;
}
body.theme-dark .popover.left > .arrow:after {
border-left-color: var(--g4-popover-bg) !important;
}
body.theme-dark .popover.right > .arrow {
border-right-color: var(--g4-popover-border) !important;
}
body.theme-dark .popover.right > .arrow:after {
border-right-color: var(--g4-popover-bg) !important;
}
body.theme-dark .popover.top > .arrow {
border-top-color: var(--g4-popover-border) !important;
}
body.theme-dark .popover.top > .arrow:after {
border-top-color: var(--g4-popover-bg) !important;
}
body.theme-dark .popover.bottom > .arrow {
border-bottom-color: var(--g4-popover-border) !important;
}
body.theme-dark .popover.bottom > .arrow:after {
border-bottom-color: var(--g4-popover-bg) !important;
}
body.theme-light .popover,
body.theme-light .popover .popover-inner,
body.theme-light .popover .popover-title,
body.theme-light .popover .popover-content {
background-color: var(--g4-popover-bg) !important;
color: var(--g4-popover-text) !important;
border-color: var(--g4-popover-border) !important;
text-shadow: none !important;
}
body.theme-light .popover {
border: 1px solid var(--g4-popover-border) !important;
box-shadow: 0 1rem 2rem rgba(var(--g4-brand-navy-rgb), 0.14) !important;
}
body.theme-light .popover.left > .arrow {
border-left-color: var(--g4-popover-border) !important;
}
body.theme-light .popover.left > .arrow:after {
border-left-color: var(--g4-popover-bg) !important;
}
body.theme-light .popover.right > .arrow {
border-right-color: var(--g4-popover-border) !important;
}
body.theme-light .popover.right > .arrow:after {
border-right-color: var(--g4-popover-bg) !important;
}
body.theme-light .popover.top > .arrow {
border-top-color: var(--g4-popover-border) !important;
}
body.theme-light .popover.top > .arrow:after {
border-top-color: var(--g4-popover-bg) !important;
}
body.theme-light .popover.bottom > .arrow {
border-bottom-color: var(--g4-popover-border) !important;
}
body.theme-light .popover.bottom > .arrow:after {
border-bottom-color: var(--g4-popover-bg) !important;
}
body.theme-dark .stats-panel-home .label-popover,
body.theme-dark .stats-panel-home .label-popover .icon-info-sign,
body.theme-dark .stats-panel-home .home-refresh,
body.theme-dark .stats-panel-home .home-refresh .icon-refresh {
color: var(--text-primary) !important;
text-shadow: none !important;
}
body.theme-dark .stats-panel-home .label-popover .icon-info-sign,
body.theme-dark .stats-panel-home .home-refresh .icon-refresh {
opacity: 0.82 !important;
filter: invert(1) brightness(1.35) contrast(1.05) !important;
}
body.theme-dark .tooltip {
opacity: 1 !important;
}
body.theme-dark .tooltip-inner {
background-color: var(--g4-popover-bg) !important;
color: var(--text-secondary) !important;
border: 1px solid var(--g4-popover-border) !important;
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.34) !important;
text-shadow: none !important;
}
body.theme-dark .tooltip.top .tooltip-arrow {
border-top-color: var(--g4-popover-bg) !important;
}
body.theme-dark .tooltip.right .tooltip-arrow {
border-right-color: var(--g4-popover-bg) !important;
}
body.theme-dark .tooltip.left .tooltip-arrow {
border-left-color: var(--g4-popover-bg) !important;
}
body.theme-dark .tooltip.bottom .tooltip-arrow {
border-bottom-color: var(--g4-popover-bg) !important;
}
body.theme-dark.page-musiconhold #grid4-app-shell .table-hover tbody tr:hover,
body.theme-dark.page-musiconhold #grid4-app-shell .table-hover tbody tr:hover > td {
background-color: var(--table-hover-bg) !important;
color: var(--table-hover-text) !important;
}
body.theme-dark.page-musiconhold #grid4-app-shell .music-row,
body.theme-dark.page-musiconhold #grid4-app-shell .music-row > td {
background-color: var(--surface-primary-bg) !important;
color: var(--text-primary) !important;
}
body.theme-dark.page-musiconhold #grid4-app-shell .music-row[style*='background-color'],
body.theme-dark.page-musiconhold #grid4-app-shell .music-row[style*='background-color'] > td {
background: var(--surface-primary-bg) !important;
background-color: var(--surface-primary-bg) !important;
}
body.theme-dark.page-agents #grid4-app-shell #agents-searchbox-input,
body.theme-dark.page-agents #grid4-app-shell .agents-searchbox > .searchbox-input,
body.theme-dark.page-agents #grid4-app-shell .agents-searchbox.searchbox-open > .searchbox-input {
background: var(--surface-primary-bg) !important;
background-color: var(--surface-primary-bg) !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-color) !important;
box-shadow: none !important;
}
body.theme-dark.page-agents #grid4-app-shell #agents-searchbox-input::placeholder {
color: var(--text-muted) !important;
}
body.theme-dark.page-builder #grid4-app-shell .btn-config {
color: var(--text-primary) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
background-color: transparent !important;
}
body.theme-dark.page-builder #grid4-app-shell .btn-config.selected {
background-color: rgba(24, 30, 40, 0.94) !important;
border-color: rgba(var(--g4-brand-sky-rgb), 0.28) !important;
box-shadow: inset 0 0 0 1px rgba(var(--g4-brand-sky-rgb), 0.16) !important;
}
body.theme-dark.page-builder #grid4-app-shell .btn-config.selected .btn-id {
box-shadow: 0 0 0 1px rgba(var(--g4-brand-sky-rgb), 0.34) !important;
}
body.theme-dark.page-builder #grid4-app-shell .btn-config .assigned-label,
body.theme-dark.page-builder #grid4-app-shell .btn-config .assigned-feature,
body.theme-dark.page-builder #grid4-app-shell .btn-config .btn-detail,
body.theme-dark.page-builder #grid4-app-shell .btn-config .btn-label {
color: var(--text-secondary) !important;
}
body.theme-dark.page-builder #grid4-app-shell .btn-config select,
body.theme-dark.page-builder #grid4-app-shell .btn-config input,
body.theme-dark.page-builder #grid4-app-shell .btn-config input[disabled],
body.theme-dark.page-builder #grid4-app-shell .btn-config input[readonly] {
background-color: var(--surface-primary-bg) !important;
background-image: none !important;
color: var(--text-primary) !important;
border: 1px solid var(--border-color) !important;
box-shadow: none !important;
-webkit-text-fill-color: var(--text-primary) !important;
}
body.theme-dark.page-builder #grid4-app-shell .btn-config input[disabled],
body.theme-dark.page-builder #grid4-app-shell .btn-config input[readonly] {
background-color: rgba(23, 28, 34, 0.92) !important;
color: var(--text-secondary) !important;
-webkit-text-fill-color: var(--text-secondary) !important;
}
body.theme-dark #grid4-app-shell input[disabled],
body.theme-dark #grid4-app-shell input[readonly],
body.theme-dark #grid4-app-shell select[disabled],
body.theme-dark #grid4-app-shell select[readonly],
body.theme-dark #grid4-app-shell textarea[disabled],
body.theme-dark #grid4-app-shell textarea[readonly],
body.theme-dark #grid4-app-shell .uneditable-input,
body.theme-dark #grid4-app-shell span.uneditable-input {
background-color: var(--surface-secondary-bg) !important;
background-image: none !important;
color: var(--text-secondary) !important;
border: 1px solid var(--border-color) !important;
-webkit-text-fill-color: var(--text-secondary) !important;
box-shadow: none !important;
opacity: 1 !important;
}
body.theme-dark #grid4-app-shell input[disabled]::placeholder,
body.theme-dark #grid4-app-shell input[readonly]::placeholder,
body.theme-dark #grid4-app-shell textarea[disabled]::placeholder,
body.theme-dark #grid4-app-shell textarea[readonly]::placeholder {
color: var(--text-muted) !important;
}
/* Monday 2026-03-30 reopen follow-ups */
body .dock-contacts #contacts-sort-search {
flex-wrap: nowrap !important;
overflow: visible !important;
position: relative !important;
z-index: 7 !important;
}
body .dock-contacts .dock-contacts-header.top {
position: relative !important;
z-index: 6 !important;
}
body .dock-column.dock-contacts .scroll-container {
position: relative !important;
z-index: 1 !important;
}
body .dock-column.dock-contacts .scroll-container.hide-conversation-dropdown {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
z-index: auto !important;
}
body .dock-contacts #contacts-sort-search .contacts-sort-dropdown {
flex: 0 0 auto !important;
min-width: max-content !important;
gap: 0.15rem !important;
position: relative !important;
z-index: 8 !important;
}
body .dock-contacts #contacts-sort-search .contacts-sort-dropdown > div[style*="table-cell"] {
display: block !important;
width: auto !important;
flex: 0 0 auto !important;
min-width: max-content !important;
max-width: none !important;
}
body .dock-contacts #contacts-sort-search .contacts-sort-dropdown > div[style*="table-cell"] > .dropdown-toggle {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
min-width: max-content !important;
overflow: visible !important;
}
body .dock-contacts #contacts-sort-search .contacts-sort-dropdown > div[style*="table-cell"] > .dropdown-toggle > a.dropdown-toggle {
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
min-height: 1.75rem !important;
}
body .dock-contacts #contacts-sort-search .contacts-sort-dropdown > .dropdown-toggle,
body .dock-contacts #contacts-sort-search .contacts-sort-dropdown > .dropdown-toggle > a.dropdown-toggle,
body .dock-contacts #contacts-sort-search #sortby {
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 1.75rem !important;
}
body .dock-contacts #contacts-sort-search #sortby {
position: relative !important;
width: 1.85rem !important;
min-width: 1.85rem !important;
margin-left: 0 !important;
padding: 0 !important;
}
body .dock-contacts #contacts-sort-search .contacts-sort-dropdown > div[style*="table-cell"] > .dropdown-toggle > ul#group-dropdown {
top: calc(100% + 0.2rem) !important;
left: 0 !important;
min-width: 10.75rem !important;
max-height: none !important;
overflow: visible !important;
}
body .dock-contacts #contacts-sort-search,
body .dock-contacts #contacts-sort-search .contacts-sort-dropdown,
body .dock-contacts #contacts-sort-search .contacts-sort-dropdown > div[style*="table-cell"] {
overflow: visible !important;
}
body .dock-contacts #contacts-sort-search .contacts-sort-dropdown > div[style*="table-cell"] > .dropdown-toggle > ul#group-dropdown,
body .dock-contacts #contacts-sort-search .contacts-sort-dropdown > div[style*="table-cell"] > .dropdown-toggle > ul#group-dropdown > .dropdown-submenu > .dropdown-menu {
transition: none !important;
}
body .dock-contacts #contacts-sort-search .contacts-sort-dropdown > div[style*="table-cell"] > .dropdown-toggle > ul#group-dropdown > .dropdown-submenu {
position: relative !important;
}
body .dock-contacts #contacts-sort-search .contacts-sort-dropdown > div[style*="table-cell"] > .dropdown-toggle > ul#group-dropdown > .dropdown-submenu > .dropdown-menu {
display: none !important;
top: -0.35rem !important;
left: calc(100% - 0.2rem) !important;
min-width: 11rem !important;
max-height: min(22rem, 70vh) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
margin-top: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateX(0.35rem) !important;
pointer-events: none !important;
z-index: 1201 !important;
}
body .dock-contacts #contacts-sort-search .contacts-sort-dropdown > div[style*="table-cell"] > .dropdown-toggle > ul#group-dropdown > .dropdown-submenu:hover > .dropdown-menu,
body .dock-contacts #contacts-sort-search .contacts-sort-dropdown > div[style*="table-cell"] > .dropdown-toggle > ul#group-dropdown > .dropdown-submenu:focus-within > .dropdown-menu {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
transform: translateX(0) !important;
pointer-events: auto !important;
}
body .dock-contacts #contacts-sort-search .contacts-sort-dropdown > div[style*="table-cell"] > .dropdown-toggle.dropdown.open > ul#group-dropdown,
body .dock-contacts #contacts-sort-search .contacts-sort-dropdown > div[style*="table-cell"] > .dropdown-toggle.g4-dock-filter-open > ul#group-dropdown {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
pointer-events: auto !important;
}
body .dock-contacts #contacts-sort-search .contacts-current-sortby-dock {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
}
body .dock-contacts #contacts-sort-search .contacts-current-sortby-dock .nsicon-sort {
position: static !important;
top: auto !important;
left: auto !important;
line-height: 1 !important;
transform: none !important;
}
body .dock-contacts #group-dropdown,
body .dock-contacts #group-dropdown .dropdown-menu,
body .dock-contacts .contacts-sortby-toggle {
z-index: 1200 !important;
}
body.theme-dark .dock-contacts #contacts-sort-search .contacts-sort-dropdown > .dropdown-toggle > a,
body.theme-dark .dock-contacts #contacts-sort-search #sortby,
body.theme-dark .dock-contacts #contacts-sort-search .contacts-current-sortby-dock .nsicon-sort,
body.theme-dark .dock-contacts #contacts-sort-search .contacts-searchbox-icon,
body.theme-dark .dock-contacts #contacts-sort-search .contacts-searchbox-icon .iconfont-search {
color: #ffffff !important;
}
body.theme-dark .dock-contacts #contacts-sort-search #current-group,
body.theme-dark .dock-contacts #contacts-sort-search .contacts-sort-dropdown > .dropdown-toggle > a.dropdown-toggle,
body.theme-dark .dock-contacts #contacts-sort-search .contacts-sort-dropdown > .dropdown-toggle > a.dropdown-toggle .caret {
color: #ffffff !important;
-webkit-text-fill-color: currentColor !important;
}
body.theme-dark .dock-contacts #contacts-sort-search .contacts-sort-dropdown > div[style*="table-cell"] > .dropdown-toggle > a.dropdown-toggle,
body.theme-dark .dock-contacts #contacts-sort-search .contacts-sort-dropdown > div[style*="table-cell"] > .dropdown-toggle > a.dropdown-toggle .caret {
color: #ffffff !important;
-webkit-text-fill-color: currentColor !important;
}
body.theme-dark .dock-contacts #contacts-sort-search .caret {
border-top-color: #ffffff !important;
}
body.theme-light .dock-contacts #contacts-sort-search .contacts-sort-dropdown > .dropdown-toggle > a,
body.theme-light .dock-contacts #contacts-sort-search #sortby,
body.theme-light .dock-contacts #contacts-sort-search .contacts-current-sortby-dock .nsicon-sort,
body.theme-light .dock-contacts #contacts-sort-search .contacts-searchbox-icon,
body.theme-light .dock-contacts #contacts-sort-search .contacts-searchbox-icon .iconfont-search {
color: var(--g4-brand-navy) !important;
}
body.theme-light .dock-contacts #contacts-sort-search #current-group,
body.theme-light .dock-contacts #contacts-sort-search .contacts-sort-dropdown > .dropdown-toggle > a.dropdown-toggle,
body.theme-light .dock-contacts #contacts-sort-search .contacts-sort-dropdown > .dropdown-toggle > a.dropdown-toggle .caret {
color: var(--g4-brand-navy) !important;
-webkit-text-fill-color: currentColor !important;
}
body.theme-light .dock-contacts #contacts-sort-search .contacts-sort-dropdown > div[style*="table-cell"] > .dropdown-toggle > a.dropdown-toggle,
body.theme-light .dock-contacts #contacts-sort-search .contacts-sort-dropdown > div[style*="table-cell"] > .dropdown-toggle > a.dropdown-toggle .caret {
color: var(--g4-brand-navy) !important;
-webkit-text-fill-color: currentColor !important;
}
body.theme-light .dock-contacts #contacts-sort-search .caret {
border-top-color: var(--g4-brand-navy) !important;
}
body.theme-light .dock-column.dock-contacts .dock-popup {
border: 2px solid rgba(28, 33, 67, 0.22) !important;
box-shadow: 0 0.95rem 2.1rem rgba(18, 32, 48, 0.16) !important;
}
body.theme-dark .dock-column.dock-contacts .dock-popup {
border: 2px solid rgba(82, 180, 250, 0.3) !important;
box-shadow: 0 0.95rem 2.1rem rgba(0, 0, 0, 0.42) !important;
}
body .dock-contacts div.contact-dock-gravatar,
body .dock-contacts div.contact-dock-gravatar.gravatar-img-contact,
body .dock-contacts div.contact-dock-gravatar.gravatar-img-recent {
width: 2.2rem !important;
min-width: 2.2rem !important;
max-width: 2.2rem !important;
height: 2.2rem !important;
min-height: 2.2rem !important;
max-height: 2.2rem !important;
padding: 0 !important;
flex: 0 0 2.2rem !important;
box-sizing: border-box !important;
border-radius: 50% !important;
overflow: hidden !important;
display: inline-block !important;
position: relative !important;
vertical-align: middle !important;
}
body .dock-contacts div.contact-dock-gravatar p {
position: absolute !important;
inset: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
transform: none !important;
z-index: 1 !important;
}
body .dock-contacts div.contact-dock-gravatar i {
line-height: 1 !important;
}
body .dock-contacts img.contact-dock-gravatar,
body .dock-contacts div.contact-dock-gravatar img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
height: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
border-radius: 50% !important;
object-fit: cover !important;
display: block !important;
margin: 0 !important;
opacity: 1 !important;
z-index: 2 !important;
}
body .dock-contacts div.contact-dock-gravatar img:not([src]),
body .dock-contacts div.contact-dock-gravatar img[src=""] {
display: none !important;
}
body .dock-contacts #searchbox {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
body .dock-contacts #searchbox > .searchbox-input {
box-sizing: border-box !important;
}
body.page-users #grid4-app-shell #vm-fwd-list > li {
display: flex !important;
align-items: center !important;
gap: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
}
body.page-users #grid4-app-shell #vm-fwd-list > li > input.search-query {
margin-bottom: 0 !important;
font-size: 14px !important;
line-height: 20px !important;
}
body.page-users #grid4-app-shell #vm-fwd-list > li > a.add.helpsy,
body.page-users #grid4-app-shell #vm-fwd-list > li > a.del.helpsy {
align-self: center !important;
flex: 0 0 auto !important;
width: 20px !important;
min-width: 20px !important;
height: 20px !important;
min-height: 20px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
margin-left: 3px !important;
padding: 0 !important;
vertical-align: middle !important;
}
body.page-answerrules #content > .modal-body .allowblock-input .input-append > .btn,
body.page-answerrules #allowblock-lists.modal .allowblock-input .input-append > .btn {
width: 1.7rem !important;
min-width: 1.7rem !important;
height: 1.7rem !important;
min-height: 1.7rem !important;
padding: 0 !important;
margin-left: -1px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
body.page-answerrules #content > .modal-body .allowblock-input .input-append > .btn > i,
body.page-answerrules #allowblock-lists.modal .allowblock-input .input-append > .btn > i {
display: block !important;
margin: 0 !important;
line-height: 1 !important;
}
body.page-answerrules #content > .modal-body .allowblock-input .input-append > .btn > i::before,
body.page-answerrules #allowblock-lists.modal .allowblock-input .input-append > .btn > i::before {
display: block !important;
line-height: 1 !important;
}
body.page-answerrules #content > .modal-body .allowblock-table a.helpsy,
body.page-answerrules #allowblock-lists.modal .allowblock-table a.helpsy,
body.page-answerrules #content > .modal-body .allowblock-table a.helpsy:hover,
body.page-answerrules #allowblock-lists.modal .allowblock-table a.helpsy:hover,
body.page-answerrules #content > .modal-body .allowblock-table a.helpsy:focus,
body.page-answerrules #allowblock-lists.modal .allowblock-table a.helpsy:focus {
color: #d14b5a !important;
-webkit-text-fill-color: #d14b5a !important;
}
body.page-answerrules #content > .modal-body .allowblock-table a.helpsy i.icon-remove,
body.page-answerrules #allowblock-lists.modal .allowblock-table a.helpsy i.icon-remove,
body.page-answerrules #content > .modal-body .allowblock-table a.helpsy i.icon-remove::before,
body.page-answerrules #allowblock-lists.modal .allowblock-table a.helpsy i.icon-remove::before {
color: #d14b5a !important;
-webkit-text-fill-color: #d14b5a !important;
filter: none !important;
opacity: 1 !important;
}
body.theme-dark.page-answerrules #content > .modal-body .allowblock-table tbody tr:hover > td,
body.theme-dark.page-answerrules #allowblock-lists.modal .allowblock-table tbody tr:hover > td {
background-color: rgba(var(--accent-primary-rgb), 0.14) !important;
color: var(--text-primary) !important;
}
body.theme-dark.page-answerrules #content > .modal-body .allowblock-table tbody tr:hover > td a:not(.helpsy),
body.theme-dark.page-answerrules #content > .modal-body .allowblock-table tbody tr:hover > td span,
body.theme-dark.page-answerrules #allowblock-lists.modal .allowblock-table tbody tr:hover > td a:not(.helpsy),
body.theme-dark.page-answerrules #allowblock-lists.modal .allowblock-table tbody tr:hover > td span {
color: inherit !important;
}
#builder-launcher .modal-body {
display: flex !important;
align-items: stretch !important;
gap: 1.25rem !important;
}
#builder-launcher .left-panel,
#builder-launcher .right-panel {
display: flex !important;
flex: 1 1 0 !important;
flex-direction: column !important;
box-sizing: border-box !important;
}
#builder-launcher .left-panel {
width: auto !important;
margin-right: 0 !important;
padding-right: 1rem !important;
}
#builder-launcher .right-panel {
width: auto !important;
float: none !important;
padding-left: 0 !important;
}
#builder-launcher .panel-content {
display: flex !important;
flex: 1 1 auto !important;
flex-direction: column !important;
gap: 0.75rem !important;
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
padding-bottom: 0 !important;
box-sizing: border-box !important;
}
#builder-launcher .panel-content > div {
display: flex !important;
flex: 1 1 auto !important;
flex-direction: column !important;
gap: 0.5rem !important;
margin-bottom: 0 !important;
}
#builder-launcher .panel-content .control-group {
margin-bottom: 0 !important;
}
#builder-launcher .panel-content input[type="text"],
#builder-launcher .panel-content select {
width: 100% !important;
max-width: 100% !important;
margin-bottom: 0 !important;
box-sizing: border-box !important;
}
#builder-launcher .panel-content a.pull-right {
float: none !important;
align-self: flex-end !important;
margin-top: 0.25rem !important;
padding: 0 !important;
}
#builder-launcher #edit-config,
#builder-launcher #edit-profile,
#builder-launcher #edit-template {
display: block !important;
width: 13.75rem !important;
max-width: 100% !important;
margin-top: auto !important;
margin-right: 0 !important;
align-self: flex-start !important;
}