/* Keep DevExtreme overlay positioning in normal viewport coordinates. */
:root {
    /* Change this value to resize shared control text and its related icons. */
    --app-control-font-size: 0.875rem;
    --app-form-group-caption-font-size: 1rem;
    --app-grid-indicator-font-size: calc(var(--app-control-font-size) * 0.9);
    --app-icon-size: calc(var(--app-control-font-size) * 1.428571);
    --app-grid-selection-checkbox-size: 0.9rem;
    --app-grid-boolean-checkbox-size: var(--app-grid-selection-checkbox-size);
    --app-grid-row-height: 3rem;
    --app-calendar-font-size: var(--app-control-font-size);
    --app-calendar-heading-font-size: calc(var(--app-control-font-size) * 0.85);
    --app-action-icon-size: var(--app-icon-size);
    --app-action-button-padding: 0.3rem;
    --app-control-line-height: calc(var(--app-control-font-size) * 1.428571);
    /* Shared density controls: adjust these values to compact or loosen layouts. */
    --app-space-xs: 0.3rem;
    --app-space-sm: 0.6rem;
    --app-space-md: 0.85rem;
    --app-space-lg: 1.1rem;
    --app-toolbar-height: 2.65rem;
    --app-popup-padding-inline: 1.1rem;
    --app-popup-padding-block: 0.85rem;
    --app-dropdown-item-padding-block: 0.3rem;
    --app-dropdown-item-padding-inline: 0.6rem;
    --app-grid-cell-padding-block: 0.7rem;
    --app-grid-cell-padding-inline: 0.85rem;

    --h1: clamp(1.6rem, 0.96rem + 3.2vw, 3.6rem);
    --h2: clamp(1.4rem, 0.888rem + 2.56vw, 3rem);
    --h3: clamp(1.2rem, 0.816rem + 1.92vw, 2.4rem);
    --h4: clamp(1.1rem, 0.876rem + 1.12vw, 1.8rem);
    --h5: clamp(1rem, 0.84rem + 0.8vw, 1.5rem);
    --h6: clamp(0.9rem, 0.804rem + 0.48vw, 1.2rem);

    --dx-font-size-heading-1: 32px;
    --dx-font-size-heading-2: 28.8px;
    --dx-font-size-heading-3: 25.6px;
    --dx-font-size-heading-4: 20.8px;
    --dx-font-size-heading-5: 17.6px;
    --dx-font-size-heading-6: 17.6px;
    --dx-font-size-xl: 27.2px;
    --dx-font-size-lg: 22.4px;
    --dx-font-size-md: 16px;
    --dx-font-size-sm: 14.4px;
    --dx-font-size-xs: 9.6px;
}

.dx-widget,
.dx-theme-fluent-typography,
.dx-popup-title,
.dx-popup-title.dx-toolbar,
.dx-popup-content,
.dx-toolbar {
    font-family: inherit !important;
    font-size: var(--app-control-font-size) !important;
}

.dx-widget input,
.dx-widget textarea,
.dx-widget select,
.dx-widget button,
.dx-widget .dx-placeholder,
.dx-widget .dx-datagrid-text-content,
.dx-widget .dx-field-item,
.dx-widget .dx-field-item-label-text,
.dx-widget .dx-page-size,
.dx-widget .dx-page,
.dx-widget .dx-info {
    font-family: inherit !important;
    font-size: var(--app-control-font-size) !important;
}

/* Text-bearing components with their own theme sizes must use the shared token.
   Do not override icon font families: DevExtreme uses DXIcons for its glyphs. */
.dx-widget .dx-group-panel-item,
.dx-widget .dx-group-panel-message,
.dx-widget .dx-datagrid-nodata,
.dx-widget .dx-treelist-nodata,
.dx-widget .dx-datagrid-filter-panel,
.dx-widget .dx-datagrid-summary-item,
.dx-widget .dx-list-item-content,
.dx-widget .dx-treeview-item,
.dx-widget .dx-button-text,
.dx-widget .dx-menu-item-text,
.dx-widget .dx-tab-text,
.dx-widget .dx-placeholder::before,
.dx-widget .dx-texteditor-input::placeholder,
.dx-widget .dx-texteditor-label .dx-label span {
    font-size: var(--app-control-font-size) !important;
}

.dx-widget .dx-texteditor-label .dx-label span {
    height: var(--app-control-line-height);
    line-height: var(--app-control-line-height);
}

/* DevExtreme Form captions created by items.AddGroup().Caption(...). */
.dx-form .dx-form-group-caption,
.dx-layout-manager .dx-form-group-caption {
    font-family: inherit !important;
    font-size: var(--app-form-group-caption-font-size) !important;
    line-height: var(--app-control-line-height) !important;
}

/* Keep SelectBox, Lookup, and other dropdown list options proportional to the
   compact controls instead of retaining the theme's larger list-item spacing. */
.dx-dropdowneditor-overlay .dx-list-item,
.dx-dropdownlist-popup-wrapper .dx-list-item {
    min-height: 0 !important;
}

.dx-dropdowneditor-overlay .dx-list-item-content,
.dx-dropdownlist-popup-wrapper .dx-list-item-content {
    padding: var(--app-dropdown-item-padding-block)
             var(--app-dropdown-item-padding-inline) !important;
    font-size: var(--app-control-font-size) !important;
    line-height: var(--app-control-line-height) !important;
}

/* Calendar overlays use fixed pixel typography in the DevExtreme theme. */
.dx-calendar,
.dx-calendar .dx-widget,
.dx-calendar .dx-calendar-cell,
.dx-calendar .dx-calendar-navigator .dx-button-text,
.dx-calendar .dx-calendar-caption-button .dx-button-text {
    font-family: inherit !important;
    font-size: var(--app-calendar-font-size) !important;
}

.dx-calendar .dx-calendar-body thead th {
    font-size: var(--app-calendar-heading-font-size) !important;
}

.dx-texteditor .dx-texteditor-input {
    min-height: 24px;
}

.dx-texteditor.dx-editor-filled .dx-texteditor-input,
.dx-texteditor.dx-editor-outlined .dx-texteditor-input {
    font-size: var(--app-control-font-size);
}

.dx-texteditor.dx-editor-filled .dx-placeholder::before,
.dx-texteditor.dx-editor-filled .dx-texteditor-input,
.dx-texteditor.dx-editor-outlined .dx-placeholder::before,
.dx-texteditor.dx-editor-outlined .dx-texteditor-input {
    padding: 4px 9.6px;
}

.dx-placeholder {
    font-size: var(--app-control-font-size);
}

.dx-widget .dx-icon,
.dx-widget .dx-button-has-icon .dx-icon {
    width: var(--app-icon-size);
    height: var(--app-icon-size);
    font-size: var(--app-icon-size);
    line-height: var(--app-icon-size);
}

.dx-widget .dx-dropdowneditor-button {
    width: var(--app-icon-size);
    min-width: var(--app-icon-size);
}

.dx-widget .dx-dropdowneditor-icon {
    width: var(--app-icon-size);
    font-size: var(--app-icon-size);
    line-height: var(--app-icon-size);
}

.dx-widget .dx-dropdowneditor-icon::before {
    width: var(--app-icon-size);
    margin-top: calc(var(--app-icon-size) / -2);
    margin-left: calc(var(--app-icon-size) / -2);
}

.dx-widget .dx-clear-button-area {
    width: 27px;
}

.dx-searchbox.dx-editor-filled .dx-icon-search,
.dx-searchbox.dx-editor-outlined .dx-icon-search {
    width: 26px;
}

.dx-searchbox.dx-editor-filled .dx-icon-search::before,
.dx-searchbox.dx-editor-outlined .dx-icon-search::before,
.dx-searchbox.dx-editor-underlined .dx-icon-search::before {
    font-size: var(--app-icon-size);
}

.dx-searchbox.dx-editor-filled .dx-placeholder::before,
.dx-searchbox.dx-editor-filled .dx-texteditor-input,
.dx-searchbox.dx-editor-outlined .dx-placeholder::before,
.dx-searchbox.dx-editor-outlined .dx-texteditor-input {
    padding-inline-start: 26px;
}

.dx-button {
    font-size: var(--app-control-font-size);
}

.dx-toolbar .dx-button .dx-button-content {
    padding-inline: var(--app-space-sm);
}

.dx-datagrid .dx-row > td {
    padding: var(--app-grid-cell-padding-block) var(--app-grid-cell-padding-inline);
    font-size: var(--app-control-font-size);
    line-height: var(--app-control-line-height);
}

/* Use one row height for text, Boolean, and selection rows. Table rows may
   still expand naturally when a template contains taller or wrapped content. */
.dx-datagrid .dx-datagrid-rowsview .dx-data-row,
.dx-datagrid-container .dx-datagrid-rowsview .dx-data-row,
.dx-treelist .dx-treelist-rowsview .dx-data-row,
.dx-treelist-container .dx-treelist-rowsview .dx-data-row {
    height: var(--app-grid-row-height) !important;
}

.dx-datagrid .dx-datagrid-table .dx-header-row > td {
    padding-top: var(--app-grid-cell-padding-block);
    padding-bottom: var(--app-grid-cell-padding-block);
}

.dx-datagrid-headers .dx-datagrid-table .dx-row > td {
    font-size: var(--app-control-font-size);
    line-height: var(--app-control-line-height);
}

.dx-datagrid .dx-header-filter,
.dx-datagrid .dx-sort,
.dx-treelist .dx-header-filter,
.dx-treelist .dx-sort {
    width: var(--app-icon-size) !important;
    height: var(--app-control-line-height) !important;
    background-size: var(--app-icon-size) var(--app-icon-size) !important;
    font-size: var(--app-icon-size) !important;
    line-height: var(--app-control-line-height) !important;
    vertical-align: middle;
}

.dx-datagrid .dx-column-indicators,
.dx-treelist .dx-column-indicators {
    height: var(--app-control-line-height);
    line-height: var(--app-control-line-height);
    vertical-align: middle;
}

/* DevExtreme gives multi-sort indexes a fixed 13px font size. Keep the
   numbering proportional to the compact grid text instead. */
.dx-datagrid .dx-column-indicators .dx-sort-index-icon,
.dx-datagrid-container .dx-column-indicators .dx-sort-index-icon,
.dx-treelist .dx-column-indicators .dx-sort-index-icon,
.dx-treelist-container .dx-column-indicators .dx-sort-index-icon {
    width: var(--app-control-font-size) !important;
    padding-right: var(--app-space-xs);
    font-size: var(--app-grid-indicator-font-size) !important;
    line-height: var(--app-control-line-height) !important;
    bottom: 0;
}

.dx-datagrid .dx-group-panel-item {
    line-height: var(--app-control-line-height);
}

/* The filter-operation menu sits beside the editor, so centre it in the same
   field height instead of retaining the theme's fixed 8px top offset. */
.dx-datagrid .dx-datagrid-filter-row .dx-editor-with-menu > .dx-menu {
    top: 0;
    height: 100%;
    margin-top: 0;
}

.dx-datagrid .dx-datagrid-filter-row .dx-menu .dx-menu-item,
.dx-datagrid .dx-datagrid-filter-row .dx-menu .dx-menu-item .dx-menu-item-content {
    height: 100%;
    box-sizing: border-box;
}

.dx-datagrid .dx-datagrid-filter-row .dx-menu .dx-menu-item .dx-menu-item-content {
    padding-block: 0;
    display: flex;
    align-items: center;
}

.dx-datagrid .dx-datagrid-filter-row .dx-menu .dx-menu-item .dx-menu-item-content .dx-icon {
    width: var(--app-icon-size);
    height: var(--app-icon-size);
    font-size: var(--app-icon-size);
    line-height: var(--app-icon-size);
    background-size: var(--app-icon-size) var(--app-icon-size);
    margin-block: 0;
}

.dx-datagrid .dx-editor-cell .dx-texteditor-input,
.dx-datagrid .dx-editor-cell .dx-placeholder,
.dx-datagrid .dx-editor-cell .dx-placeholder::before {
    font-size: var(--app-control-font-size);
}

/* Filter values such as "(All)" have more specific theme selectors. */
.dx-datagrid .dx-datagrid-filter-row .dx-texteditor-input,
.dx-datagrid .dx-datagrid-filter-row .dx-placeholder,
.dx-datagrid .dx-datagrid-filter-row .dx-placeholder::before,
.dx-treelist .dx-treelist-filter-row .dx-texteditor-input,
.dx-treelist .dx-treelist-filter-row .dx-placeholder,
.dx-treelist .dx-treelist-filter-row .dx-placeholder::before,
.dx-header-filter-menu .dx-list-item-content,
.dx-header-filter-menu .dx-treeview-item,
.dx-datagrid-filter-panel .dx-datagrid-filter-panel-text,
.dx-datagrid-filter-panel .dx-datagrid-filter-panel-clear-filter,
.dx-treelist-filter-panel .dx-treelist-filter-panel-text,
.dx-treelist-filter-panel .dx-treelist-filter-panel-clear-filter {
    font-size: var(--app-control-font-size) !important;
}

/* DataGrid's filter row uses a more specific 48px editor rule in the theme. */
.dx-datagrid .dx-editor-cell .dx-texteditor:not(.dx-tagbox) .dx-texteditor-input {
    height: 38.4px;
    min-height: 38.4px;
    font-size: var(--app-control-font-size) !important;
    line-height: 38.4px;
    padding-inline: 9.6px;
}

.dx-datagrid .dx-editor-cell .dx-texteditor .dx-placeholder::before {
    padding-inline: 9.6px;
}

.dx-datagrid .dx-icon,
.dx-datagrid .dx-link .dx-icon,
.dx-datagrid .dx-toolbar .dx-button-has-icon .dx-icon {
    width: var(--app-icon-size);
    height: var(--app-icon-size);
    font-size: var(--app-icon-size);
    line-height: var(--app-icon-size);
}

.dx-datagrid .dx-icon-search,
.dx-datagrid .dx-icon-search::before,
.dx-pager .dx-pages .dx-navigate-button,
.dx-pager .dx-pages .dx-navigate-button::before {
    font-size: var(--app-icon-size) !important;
}

/* Selection checkboxes are rendered inside command cells. */
.dx-datagrid .dx-command-select .dx-select-checkbox,
.dx-datagrid-container .dx-command-select .dx-select-checkbox,
.dx-treelist .dx-command-select .dx-select-checkbox,
.dx-treelist-container .dx-command-select .dx-select-checkbox,
.dx-datagrid .dx-command-select .dx-checkbox-container,
.dx-datagrid-container .dx-command-select .dx-checkbox-container,
.dx-treelist .dx-command-select .dx-checkbox-container,
.dx-treelist-container .dx-command-select .dx-checkbox-container,
.dx-datagrid .dx-command-select .dx-checkbox-icon,
.dx-datagrid-container .dx-command-select .dx-checkbox-icon,
.dx-treelist .dx-command-select .dx-checkbox-icon,
.dx-treelist-container .dx-command-select .dx-checkbox-icon {
    box-sizing: border-box !important;
    width: var(--app-grid-selection-checkbox-size) !important;
    min-width: var(--app-grid-selection-checkbox-size) !important;
    height: var(--app-grid-selection-checkbox-size) !important;
    min-height: var(--app-grid-selection-checkbox-size) !important;
    padding: 0 !important;
    font-size: var(--app-grid-selection-checkbox-size) !important;
    line-height: var(--app-grid-selection-checkbox-size) !important;
}

/* Boolean data cells use a regular grid cell instead of a command cell.
   Normalize their wrapper and remove the extra vertical cell padding so the
   checkbox cannot make the complete row taller than a text-only row. */
.dx-datagrid .dx-data-row > td:not(.dx-command-select) > .dx-checkbox,
.dx-datagrid-container .dx-data-row > td:not(.dx-command-select) > .dx-checkbox,
.dx-treelist .dx-data-row > td:not(.dx-command-select) > .dx-checkbox,
.dx-treelist-container .dx-data-row > td:not(.dx-command-select) > .dx-checkbox,
.dx-datagrid .dx-data-row > td:not(.dx-command-select) > .dx-checkbox .dx-checkbox-container,
.dx-datagrid-container .dx-data-row > td:not(.dx-command-select) > .dx-checkbox .dx-checkbox-container,
.dx-treelist .dx-data-row > td:not(.dx-command-select) > .dx-checkbox .dx-checkbox-container,
.dx-treelist-container .dx-data-row > td:not(.dx-command-select) > .dx-checkbox .dx-checkbox-container,
.dx-datagrid .dx-data-row > td:not(.dx-command-select) > .dx-checkbox .dx-checkbox-icon,
.dx-datagrid-container .dx-data-row > td:not(.dx-command-select) > .dx-checkbox .dx-checkbox-icon,
.dx-treelist .dx-data-row > td:not(.dx-command-select) > .dx-checkbox .dx-checkbox-icon,
.dx-treelist-container .dx-data-row > td:not(.dx-command-select) > .dx-checkbox .dx-checkbox-icon {
    box-sizing: border-box !important;
    width: var(--app-grid-boolean-checkbox-size) !important;
    min-width: var(--app-grid-boolean-checkbox-size) !important;
    height: var(--app-grid-boolean-checkbox-size) !important;
    min-height: var(--app-grid-boolean-checkbox-size) !important;
    padding: 0 !important;
    font-size: var(--app-grid-boolean-checkbox-size) !important;
    line-height: var(--app-grid-boolean-checkbox-size) !important;
}

.dx-datagrid .dx-data-row > td:not(.dx-command-select) > .dx-checkbox,
.dx-datagrid-container .dx-data-row > td:not(.dx-command-select) > .dx-checkbox,
.dx-treelist .dx-data-row > td:not(.dx-command-select) > .dx-checkbox,
.dx-treelist-container .dx-data-row > td:not(.dx-command-select) > .dx-checkbox {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    vertical-align: middle;
}

/* DevExtreme vertically aligns Boolean editors with an invisible pseudo-element.
   Its theme padding adds extra height to every row containing a Boolean column. */
.dx-datagrid .dx-datagrid-rowsview .dx-data-row > .dx-editor-cell.dx-editor-inline-block:not(.dx-command-select)::before,
.dx-datagrid-container .dx-datagrid-rowsview .dx-data-row > .dx-editor-cell.dx-editor-inline-block:not(.dx-command-select)::before,
.dx-treelist .dx-treelist-rowsview .dx-data-row > .dx-editor-cell.dx-editor-inline-block:not(.dx-command-select)::before,
.dx-treelist-container .dx-treelist-rowsview .dx-data-row > .dx-editor-cell.dx-editor-inline-block:not(.dx-command-select)::before {
    height: var(--app-control-line-height) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: var(--app-control-line-height) !important;
}

/* Row command icons are rendered on the link itself, rather than inside an .dx-icon. */
.dx-datagrid .dx-command-edit .dx-link.dx-link-icon,
.dx-datagrid .dx-command-edit .dx-link.dx-icon,
.dx-datagrid .dx-command-edit .dx-link-icon::before {
    width: var(--app-action-icon-size) !important;
    height: var(--app-action-icon-size) !important;
    font-size: var(--app-action-icon-size) !important;
    line-height: var(--app-action-icon-size) !important;
}

.dx-popup-content {
    padding: var(--app-popup-padding-block) var(--app-popup-padding-inline);
}

.dx-popup-title.dx-toolbar {
    padding-inline: var(--app-popup-padding-inline);
}

.dx-popup-title.dx-toolbar .dx-toolbar-items-container,
.dx-toolbar .dx-toolbar-items-container {
    height: var(--app-toolbar-height);
}

.dx-popup-title.dx-toolbar .dx-toolbar-item,
.dx-toolbar .dx-toolbar-item,
.dx-toolbar-after .dx-toolbar-item {
    padding-inline: var(--app-space-xs);
}

/* Toolbar actions share the row-action size, including grids inside popups. */
.dx-toolbar .dx-button.dx-button-has-icon .dx-icon,
.dx-toolbar-menu-section .dx-list-item-content .dx-icon {
    width: var(--app-action-icon-size) !important;
    height: var(--app-action-icon-size) !important;
    font-size: var(--app-action-icon-size) !important;
    line-height: var(--app-action-icon-size) !important;
    background-size: var(--app-action-icon-size) var(--app-action-icon-size);
}

.dx-toolbar .dx-button.dx-button-has-icon:not(.dx-button-has-text) {
    min-width: calc(var(--app-action-icon-size) + 2 * var(--app-action-button-padding) + 2px);
}

.dx-toolbar .dx-button.dx-button-has-icon:not(.dx-button-has-text) .dx-button-content {
    padding: var(--app-action-button-padding);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dx-popup-content .dx-datagrid-header-panel .dx-toolbar-items-container {
    height: var(--app-toolbar-height);
}

/* Compact every DevExtreme form from the same density variables. */
.dx-layout-manager .dx-field-item {
    padding-bottom: var(--app-space-xs);
}

.dx-layout-manager .dx-field-item:not(.dx-last-col) {
    padding-inline-end: var(--app-space-sm);
}

.dx-layout-manager .dx-field-item:not(.dx-first-col) {
    padding-inline-start: var(--app-space-sm);
}

.dx-layout-manager .dx-field-item:not(.dx-first-row),
.dx-field-item:not(.dx-field-item-has-group):not(.dx-field-item-has-tabs):not(.dx-first-row):not(.dx-label-v-align) {
    padding-top: var(--app-space-xs);
}

.dx-field-item-label-location-left {
    padding-inline-end: var(--app-space-sm);
}

.dx-field-item-label-location-top {
    margin-bottom: var(--app-space-xs);
}

.dx-form-group-with-caption > .dx-form-group-content {
    padding-block: var(--app-space-sm);
    margin-top: var(--app-space-xs);
}

.dx-layout-manager .dx-tabpanel .dx-multiview-item-content {
    padding: var(--app-space-lg);
}

.dx-popup-content .dx-accordion-item-title {
    padding: var(--app-space-sm) var(--app-space-md);
}

.dx-popup-content .dx-accordion-item-body {
    padding: var(--app-space-sm) var(--app-space-md);
}

.dx-pager {
    font-family: inherit !important;
    font-size: var(--app-control-font-size) !important;
    padding: var(--app-space-sm) var(--app-space-md);
}

.dx-pager .dx-pages .dx-page {
    font-size: var(--app-control-font-size) !important;
    line-height: var(--app-control-line-height);
    padding: var(--app-space-xs) var(--app-space-sm);
}

.dx-pager .dx-pages .dx-navigate-button {
    width: var(--app-icon-size);
    height: var(--app-control-line-height);
    padding: var(--app-space-xs) var(--app-space-sm);
}

.dx-layout-manager .dx-field-item {
    font-size: var(--app-control-font-size);
}

.dx-layout-manager .dx-field-item-label,
.dx-layout-manager .dx-field-item-label-text {
    font-size: inherit;
}

/* Shared glyph sizing across DevExtreme, Iconify, Bootstrap and Remix icons.
   Keep each library's font family and each control's positioning intact. */
html body .dx-icon,
html body [class^="dx-icon-"],
html body [class*=" dx-icon-"],
html body iconify-icon,
html body iconify-icon[class],
html body .bi,
html body [class^="ri-"],
html body [class*=" ri-"] {
    font-size: var(--app-icon-size) !important;
}

html body .dx-icon::before,
html body [class^="dx-icon-"]::before,
html body [class*=" dx-icon-"]::before,
html body .bi::before,
html body [class^="ri-"]::before,
html body [class*=" ri-"]::before,
html body [data-theme-toggle]::after {
    font-size: var(--app-icon-size) !important;
}

html body iconify-icon {
    width: var(--app-icon-size) !important;
    height: var(--app-icon-size) !important;
    flex-shrink: 0;
    vertical-align: middle;
}

/* Use this opt out when an individual Iconify glyph intentionally needs
   dimensions different from the shared square icon size. */
html body iconify-icon[data-icon-size="custom"] {
    width: var(--icon-width, var(--app-icon-size)) !important;
    height: var(--icon-height, var(--app-icon-size)) !important;
}

/* Explicit text-size utilities represent intentional icon roles. Keep them
   proportional instead of forcing every Iconify glyph to the default size. */
html body iconify-icon.text-2xxl { font-size: var(--font-2xxl) !important; }
html body iconify-icon.text-2xl { font-size: var(--font-2xl) !important; }
html body iconify-icon.text-xxl { font-size: var(--font-xxl) !important; }
html body iconify-icon.text-xl { font-size: var(--font-xl) !important; }
html body iconify-icon.text-lg { font-size: var(--font-lg) !important; }
html body iconify-icon.text-md { font-size: var(--font-md) !important; }
html body iconify-icon.text-sm { font-size: var(--font-sm) !important; }
html body iconify-icon.text-xs { font-size: var(--font-xs) !important; }
html body iconify-icon.text-xxs { font-size: var(--font-xxs) !important; }

html body iconify-icon:is(.text-2xxl, .text-2xl, .text-xxl, .text-xl, .text-lg, .text-md, .text-sm, .text-xs, .text-xxs) {
    width: 1em !important;
    height: 1em !important;
}

.dx-svg-icon svg {
    width: var(--app-icon-size);
    height: var(--app-icon-size);
}

/* Navigation bullets are decorative markers, proportional to the icon size. */
html body .sidebar-menu .circle-icon,
html body .sidebar-menu .circle-icon::before {
    font-size: calc(var(--app-icon-size) / 2) !important;
}