/* ========================================
   PROPORTIONAL RESPONSIVE LAYOUT
   Scale based on screen size with mathematical ratios
   Baseline: 1920×1080 desktop
   ======================================== */

/* 
   BASELINE SIZING (1920×1080):
   Font: 0.75rem
   Button: 1.8rem
   Input: 1.8rem
   
   FORMULA:
   Size = min(max, base + (viewport - baseline) * ratio)
   This scales proportionally up/down from baseline
*/

body {
    --form-font-size: clamp(0.6525rem, calc(1.124rem - 0.014vw), 0.70rem);
    --menu-font-weight: 400;
    --form-control-minheight: 20px;
    --form-control-height: 1.35rem;
    --button-height: 28px;
    --control-text-padding-x: 0.35rem;
    --control-text-padding-y: 0.15rem;
    --control-text-line-height: 1.2;
    --control-margin-bottom: 0.08rem;
    --card-padding: clamp(0.35rem, 0.3vw + 0.45rem, 0.75rem);
    --form-gap: clamp(0.20rem, 0.10vw + 0.20rem, 0.40rem);
}

/* ========================================
   PROPORTIONAL FONT SIZING FOR ALL ELEMENTS
   Uses mathematical formula, not breakpoints
   ======================================== */

body .rz-form-field input,
body .rz-form-field textarea,
body .rz-form-field .rz-inputtext,
body .rz-form-field .rz-autocomplete,
body .rz-form-field .rz-dropdown,
body .rz-form-field .rz-datepicker,
body .rz-form-field .rz-numeric {
    height: var(--form-control-height);
    font-size: var(--form-font-size);
    padding: var(--control-text-padding-y) var(--control-text-padding-x) !important;
    line-height: var(--control-text-line-height) !important;
    margin: 0 !important;
    
}

/* Ensure selected values are vertically centered and fully visible */
body .rz-form-field .rz-dropdown,
body .rz-form-field .rz-autocomplete,
body .rz-form-field .rz-numeric {
    display:flex;
    align-items: center;
    border:none;
}

body .rz-form-field .rz-dropdown {
    display: block;
}

    body .rz-dropdown .rz-dropdown-label,
    body .rz-autocomplete .rz-inputtext,
    body .rz-numeric .rz-inputtext,
    body .rz-datepicker .rz-inputtext {
        display: flex;
        align-items: center;
        min-height: var(--form-control-minheight);
        line-height: var(--control-text-line-height) !important;
        padding: var(--control-text-padding-y) var(--control-text-padding-x) !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

body .rz-dropdown .rz-dropdown-label {
    display: block;
    min-height: calc(var(--form-control-height) - 2px);
    line-height: var(--control-text-line-height) !important;
    padding-top: clamp(0.2rem, 0.4vw + 0.15rem, 0.3rem) !important;
    padding-bottom: clamp(0.2rem, 0.4vw + 0.15rem, 0.3rem) !important;
    padding-left: clamp(0.4rem, 0.75vw + 0.3rem, 0.6rem) !important;
    padding-right: clamp(0.4rem, 0.75vw + 0.3rem, 0.6rem) !important;
}

body .rz-dropdown .rz-dropdown-label,
body .rz-dropdown .rz-placeholder,
body .rz-form-field .rz-placeholder {
    margin: 0 !important;
    font-size: var(--form-font-size) !important;
}

body .rz-button {
    height: var(--button-height);
    min-height: var(--button-height);
    font-size: var(--form-font-size);
    padding: clamp(0.2rem, 0.3vw, 0.3rem) clamp(0.5rem, 0.5vw + 0.3rem, 0.7rem);
    color:black !important;
}

body .rz-form-field-label {
    font-size: var(--form-font-size);
    margin-bottom: var(--control-margin-bottom) !important;
}

/* ========================================
   PROPORTIONAL GRID SIZING
   ======================================== */

body .rz-grid-table thead th {
    font-size: var(--form-font-size);
    padding: clamp(0.3rem, 0.3vw + 0.2rem, 0.5rem) clamp(0.3rem, 0.4vw + 0.2rem, 0.5rem);
    line-height: 1.25;
}

body .rz-data-row td {
    font-size: var(--form-font-size);
    padding: clamp(0.3rem, 0.3vw + 0.2rem, 0.5rem) clamp(0.3rem, 0.4vw + 0.2rem, 0.5rem);
    line-height: 1.25;
}

.modern-enterprise-grid .rz-grid-table thead th {
    font-size: var(--form-font-size);
    padding: clamp(0.3rem, 0.3vw + 0.2rem, 0.5rem) clamp(0.3rem, 0.4vw + 0.2rem, 0.5rem);
}

.modern-enterprise-grid .rz-data-row td {
    font-size: var(--form-font-size);
    padding: clamp(0.3rem, 0.3vw + 0.2rem, 0.5rem) clamp(0.3rem, 0.4vw + 0.2rem, 0.5rem);
}

/* ========================================
   PROPORTIONAL SPACING
   ======================================== */

body .rz-card.rz-variant-flat {
    padding: var(--card-padding);
    margin-bottom: clamp(0.15rem, 0.2vw + 0.1rem, 0.3rem);
}

body .rz-card.rz-variant-outlined {
    padding: var(--card-padding);
    margin-top: clamp(0.1rem, 0.15vw + 0.08rem, 0.2rem);
}

body .rz-templateform .rz-row,
body .form-row-gap {
    gap: var(--form-gap);
    column-gap: clamp(0.25rem, 0.5vw + 0.15rem, 0.6rem);
    margin-bottom: clamp(0.08rem, 0.1vw + 0.05rem, 0.15rem);
}

body .form-stack-gap {
    gap: var(--form-gap);
}

body .rz-stack.rz-horizontal {
    gap: clamp(0.2rem, 0.3vw + 0.1rem, 0.4rem);
}

/* ========================================
   PROPORTIONAL ACTION BUTTON SIZING
   ======================================== */

.action-btn-modern {
    height: var(--button-height);
    min-height: var(--button-height);
    padding: 0 clamp(0.5rem, 0.5vw + 0.3rem, 0.7rem);
}

.action-btn-icon {
    font-size: clamp(0.9rem, 0.5vw + 0.7rem, 1.1rem);
    width: clamp(1.4rem, 1.2vw + 0.9rem, 1.8rem);
    height: clamp(1.4rem, 1.2vw + 0.9rem, 1.8rem);
}

.action-btn-label {
    font-size: var(--form-font-size);
}

/* ========================================
   PROPORTIONAL FORM FIELD SIZING
   ======================================== */

body .rz-form-field {
    margin-bottom: clamp(0.1rem, 0.15vw + 0.08rem, 0.2rem);
}

body .rz-form-field-content {
    border-radius: clamp(0.5rem, 0.3vw + 0.4rem, 0.7rem);
    margin-block: 0.20rem;
}

/* ========================================
   PROPORTIONAL CHECKBOX/TOGGLE SIZING
   ======================================== */

body .rz-stack:has(> .rz-chkbox):has(> .rz-label) {
    padding: clamp(0.3rem, 0.3vw + 0.2rem, 0.5rem) clamp(0.5rem, 0.5vw + 0.3rem, 0.7rem);
    gap: clamp(0.35rem, 0.4vw + 0.25rem, 0.55rem);
    min-height: var(--form-control-height);
}

body .rz-stack:has(> .rz-chkbox):has(> .rz-label) .rz-chkbox-box {
    width: clamp(2rem, 1.8vw + 1.4rem, 2.6rem);
    height: clamp(1.1rem, 0.9vw + 0.8rem, 1.5rem);
}

/* ========================================
   PROPORTIONAL ICON SIZING
   ======================================== */

body .rz-form-field .rz-icon,
body .rz-form-field .rzi,
body .rz-form-field .rz-button-icon-left,
body .rz-form-field .rz-button-icon-right {
    font-size: clamp(0.9rem, 0.5vw + 0.7rem, 1.1rem);
    width: clamp(1.4rem, 1.2vw + 0.9rem, 1.8rem);
    height: clamp(1.4rem, 1.2vw + 0.9rem, 1.8rem);
}

/* ========================================
   PROPORTIONAL DIVIDER SIZING
   ======================================== */

hr {
    margin: clamp(0.2rem, 0.15vw + 0.15rem, 0.3rem) 0;
    height: 1px;
}

/* ========================================
   PROPORTIONAL GRID HEIGHT
   Adjusts based on available space
   ======================================== */

.modern-grid-container,
.modern-enterprise-grid {
    margin: clamp(0.1rem, 0.15vw + 0.08rem, 0.2rem) 0;
    max-height: clamp(250px, 40vh - 200px, 450px);
    overflow-y: auto;
}

/* ========================================
   PROPORTIONAL TAB SIZING
   ======================================== */

body .rz-tabview-panel {
    padding: clamp(0.15rem, 0.2vw + 0.1rem, 0.25rem);
}

body .rz-tabview-nav {
    font-size: var(--form-font-size);
}

/* ========================================
   PROPORTIONAL CONTENT PADDING
   ======================================== */

body .rz-content {
    padding: clamp(0.2rem, 0.2vw + 0.15rem, 0.3rem);
}

body .rz-main,
body .rz-body {
    padding-top: 0;
}

/* ========================================
   PROPORTIONAL LABEL SIZING
   ======================================== */

body .rz-card.rz-variant-outlined .rz-label,
body .rz-templateform .rz-label {
    margin: clamp(0.25rem, 0.2vw + 0.2rem, 0.4rem) 0 clamp(-0.25rem, -0.2vw - 0.2rem, -0.1rem) 0;
    padding-left: clamp(0.15rem, 0.15vw + 0.1rem, 0.25rem);
    font-size: var(--form-font-size);
}

/* ========================================
   PROPORTIONAL MESSAGE/ALERT SIZING
   ======================================== */

body .rz-alert {
    padding: clamp(0.3rem, 0.3vw + 0.2rem, 0.5rem) clamp(0.5rem, 0.5vw + 0.3rem, 0.7rem);
    margin-bottom: clamp(0.1rem, 0.15vw + 0.08rem, 0.2rem);
    font-size: var(--form-font-size);
}

/* ========================================
   PROPORTIONAL PAGER SIZING
   ======================================== */

body .rz-pager {
    padding: clamp(0.2rem, 0.2vw + 0.15rem, 0.35rem) clamp(0.5rem, 0.5vw + 0.3rem, 0.7rem);
    font-size: var(--form-font-size);
}

body .rz-paginator-element {
    font-size: var(--form-font-size);
}

/* ========================================
   PROPORTIONAL DROPDOWN/AUTOCOMPLETE SIZING
   ======================================== */

body .rz-dropdown-item,
body .rz-autocomplete-item {
    padding: clamp(0.2rem, 0.2vw + 0.15rem, 0.35rem) clamp(0.4rem, 0.4vw + 0.25rem, 0.6rem);
    font-size: var(--form-font-size);
}

body .rz-dropdown-panel,
body .rz-autocomplete-panel {
    font-size: var(--form-font-size);
}

/* ========================================
   PROPORTIONAL LIST ITEM SIZING
   ======================================== */

body .rz-listbox-item {
    padding: clamp(0.2rem, 0.2vw + 0.15rem, 0.35rem) clamp(0.4rem, 0.4vw + 0.25rem, 0.6rem);
    font-size: var(--form-font-size);
}

/* ========================================
   SMOOTH TRANSITIONS
   No jarring jumps when resizing
   ======================================== */

body .rz-button,
body .rz-form-field input,
body .rz-form-field textarea,
body .rz-form-field .rz-inputtext {
    transition: font-size 0.2s ease, height 0.2s ease, padding 0.2s ease;
}

/* ========================================
   RESPONSIVE DESCRIPTION
   
   How the formulas work:
   
   clamp(MIN, PREFERRED, MAX)
   
   Example: clamp(0.65rem, 0.5vw + 0.50rem, 0.85rem)
   
   1920px width:  0.5 * 1920/100 + 0.50 = 9.6 + 0.5 = 10.1rem (clamped to 0.85rem max) ✓
   1366px width:  0.5 * 1366/100 + 0.50 = 6.83 + 0.5 = 7.33rem (result: 0.733rem)
   768px width:   0.5 * 768/100 + 0.50 = 3.84 + 0.5 = 4.34rem (result: 0.434rem, clamped to 0.65rem min)
   
   This creates smooth proportional scaling!
   
   Benefits:
   - No fixed sizes (scales with screen)
   - No sharp breakpoints (smooth transitions)
   - Ratio-based (mathematically proportional)
   1920×1080 scales to compact enterprise sizing
   - Smaller screens are slightly larger for readability
   - Larger screens are slightly smaller for density
   - All using pure CSS math - no JavaScript
   
   ======================================== */

/* ========================================
   ENTERPRISE TYPOGRAPHY CONSISTENCY OVERRIDES
   Use Nav menu font and size as base across all controls
   ======================================== */

body .rz-button,
body .rz-button .rz-button-text,
body .rz-inputtext,
body .rz-textarea,
body .rz-dropdown,
body .rz-autocomplete,
body .rz-numeric,
body .rz-html-editor,
body .rz-dialog,
body .rz-navigation-menu,
body .rz-tabview,
body .rz-grid-table,
body .rz-grid-table thead th,
body .rz-data-row td,
body .rz-form-field-label,
body .rz-dropdown-item,
body .rz-autocomplete-item,
body .rz-listbox-item,
body .rz-menuitem,
body .rz-pager,
body .rz-navigation-item-link,
body .topbar .mainnav__button,
body .topbar .mainnav__link,
body .topbar .mega-menu__link,
body .topbar .dropdown-menu__link,
body .compact-grid .rz-grid-table thead th,
body .compact-grid .rz-grid-table tbody td,
body .compact-grid .rz-column-title {
    font-family: inherit !important;
    font-size: var(--form-font-size) !important;
    line-height: var(--line-height) !important;
}

body .rz-form-field input,
body .rz-form-field textarea,
body .rz-form-field .rz-inputtext,
body .rz-form-field .rz-autocomplete,
body .rz-form-field .rz-dropdown,
body .rz-form-field .rz-datepicker,
body .rz-form-field .rz-numeric,
body .rz-button {
    min-height: var(--form-control-height) !important;
}

body .rz-grid-table thead th,
body .rz-grid-table .rz-data-row td {
    height: var(--grid-row-height, 32px) !important;
}

/* Force exact same font size for button text + tab text + grid headers */
body .rz-button .rz-button-text,
body .action-btn-label,
body .action-btn-label-full,
body .action-btn-label-short,
body .rz-tabview-nav li button,
body .rz-tabview-nav .rz-tabview-nav-link,
body .rz-grid-table thead th,
body .rz-grid-table thead th .rz-column-title,
body .compact-grid .rz-grid-table thead th,
body .compact-grid .rz-grid-table thead th .rz-column-title {
    /*font-family: var(--font-family) !important;*/
    font-size: var(--form-font-size) !important;
    line-height: 1.2 !important;
}

/* Match button text and grid row text with autocomplete text style */
body .rz-button .rz-button-text,
body .action-btn-label,
body .action-btn-label-full,
body .action-btn-label-short,
body .compact-grid .rz-grid-table tbody td,
body .compact-grid .rz-grid-table tbody td *,
body .rz-data-row td,
body .rz-data-row td * {
    /*font-family: var(--font-family) !important;*/
    font-size: var(--form-font-size) !important;
    font-weight: 400 !important;
    line-height: var(--line-height) !important;
    letter-spacing: normal !important;
}

@media (max-width: 1024px) {
    body {
        --form-font-size: clamp(0.9rem, calc(1.08rem - 0.01vw), 1rem);
    }
}

@media (min-width: 1900px) {
    body {
        --form-font-size: clamp(0.8125rem, calc(0.95rem - 0.004vw), 0.875rem);
    }
}

/* Final menu-typography lock for buttons/tabs/grid */
body .rz-button,
body .rz-button .rz-button-text,
body .rz-button .rz-button-text *,
body .action-btn-modern,
body .action-btn-label,
body .action-btn-label-full,
body .action-btn-label-short,
body .rz-tabview-nav li button,
body .rz-tabview-nav .rz-tabview-nav-link,
body .rz-grid-table thead th,
body .rz-grid-table thead th .rz-column-title {
    /*font-family: var(--font-family) !important;*/
    font-size: var(--form-font-size) !important;
    font-weight: var(--menu-font-weight) !important;
    line-height: var(--line-height) !important;
}

body .rz-grid-table tbody td .rz-cell-data, body .rz-data-row td * {
    /*font-family: var(--font-family) !important;*/
    font-size: var(--form-font-size) !important;
    line-height: var(--line-height) !important;
}

/* ========================================
   EVEN FORM CONTROL HEIGHT
   RadzenDropDown is the height reference.
   Text, autocomplete, date, and numeric fields use that same
   outer height and the same inner value padding, so selected
   text stays fully visible.
   ======================================== */

body {
    --control-value-padding-y: clamp(0.2rem, 0.4vw + 0.15rem, 0.3rem);
    --control-value-padding-x: clamp(0.4rem, 0.75vw + 0.3rem, 0.6rem);
    /* Room under the floating outline label so the value does not run through it. */
    --control-value-padding-top: 0.4rem;
    --control-value-padding-bottom: 0.08rem;
}

body .rz-form-field .rz-form-field-content > .rz-dropdown,
body .rz-form-field .rz-form-field-content .bis-autocomplete-host,
body .rz-form-field .rz-form-field-content .rz-autocomplete,
body .rz-form-field .rz-form-field-content .bis-datepicker-wrapper,
body .rz-form-field .rz-form-field-content .rz-datepicker,
body .rz-form-field .rz-form-field-content .rz-numeric,
body .rz-form-field .rz-form-field-content > .rz-textbox,
body .rz-form-field .rz-form-field-content > .rz-multiselect {
    box-sizing: border-box !important;
    height: var(--form-control-height) !important;
    min-height: var(--form-control-height) !important;
    max-height: var(--form-control-height) !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body .rz-form-field .rz-form-field-content .rz-dropdown .rz-dropdown-label,
body .rz-form-field .rz-form-field-content .rz-dropdown .rz-placeholder,
body .rz-form-field .rz-form-field-content .rz-autocomplete .rz-inputtext,
body .rz-form-field .rz-form-field-content .rz-autocomplete input,
body .rz-form-field .rz-form-field-content .rz-datepicker .rz-inputtext,
body .rz-form-field .rz-form-field-content .rz-datepicker input,
body .rz-form-field .rz-form-field-content .rz-numeric .rz-inputtext,
body .rz-form-field .rz-form-field-content .rz-numeric input,
body .rz-form-field .rz-form-field-content > .rz-multiselect .rz-multiselect-label {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding-top: var(--control-value-padding-top) !important;
    padding-bottom: var(--control-value-padding-bottom) !important;
    padding-left: var(--control-value-padding-x) !important;
    padding-right: var(--control-value-padding-x) !important;
    line-height: var(--control-text-line-height) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body .rz-form-field .rz-form-field-content > .rz-textbox,
body .rz-form-field .rz-form-field-content > input.rz-inputtext {
    box-sizing: border-box !important;
    height: var(--form-control-height) !important;
    min-height: var(--form-control-height) !important;
    max-height: var(--form-control-height) !important;
    margin: 0 !important;
    padding-top: var(--control-value-padding-top) !important;
    padding-bottom: var(--control-value-padding-bottom) !important;
    padding-left: var(--control-value-padding-x) !important;
    padding-right: var(--control-value-padding-x) !important;
    line-height: var(--control-text-line-height) !important;
}

body .rz-form-field .rz-datepicker:has(.rz-datepicker-trigger) > .rz-inputtext,
body .rz-form-field .rz-datepicker:has(.rz-datepicker-trigger) > input {
    padding-right: 1.75rem !important;
}

body .rz-form-field .rz-numeric:has(.rz-numeric-button) .rz-inputtext,
body .rz-form-field .rz-numeric:has(.rz-numeric-button) input {
    padding-right: 1.25rem !important;
}

body .rz-form-field .rz-datepicker .rz-datepicker-trigger,
body .rz-form-field .rz-datepicker .rz-datepicker-trigger:hover {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0.15rem !important;
    width: 1.5rem !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body .rz-form-field .rz-numeric .rz-numeric-button {
    height: calc((var(--form-control-height) - 4px) / 2) !important;
    min-height: 0 !important;
    max-height: calc((var(--form-control-height) - 4px) / 2) !important;
    padding: 0 !important;
}

body .rz-form-field .rz-form-field-content > .rz-form-field-end .rzi,
body .rz-form-field .rz-form-field-content > .rz-form-field-start .rzi,
body .rz-form-field .rz-form-field-content > .rz-form-field-end .rz-icon,
body .rz-form-field .rz-form-field-content > .rz-form-field-start .rz-icon {
    width: 1rem !important;
    height: 1rem !important;
    font-size: 1rem !important;
    line-height: 1 !important;
}

/* Toggle: label left and switch right. Add bis-toggle-label-top for label above the switch.
   Off is red, on is blue, so both states stay visible. */
body .rz-chkbox .rz-chkbox-box,
body .rz-stack:has(> .rz-chkbox):has(> .rz-label) .rz-chkbox-box {
    width: 2rem !important;
    height: 1.05rem !important;
    border-radius: 9999px !important;
    border: 1px solid dimgray !important;
    background-color: dimgray !important;
    background-image: none !important;
}

body .rz-chkbox .rz-chkbox-box::before,
body .rz-stack:has(> .rz-chkbox):has(> .rz-label) .rz-chkbox-box::before {
    top: 50% !important;
    left: 2px !important;
    margin: 0 !important;
    width: 0.75rem !important;
    height: 0.75rem !important;
    background-color: #ffffff !important;
    transform: translateY(-50%) !important;
}

body .rz-chkbox .rz-chkbox-box.rz-state-active,
body .rz-stack:has(> .rz-chkbox):has(> .rz-label) .rz-chkbox-box.rz-state-active {
    background-color: #2563eb !important;
    border-color: #1d4ed8 !important;
}

body .rz-chkbox .rz-chkbox-box.rz-state-active::before,
body .rz-stack:has(> .rz-chkbox):has(> .rz-label) .rz-chkbox-box.rz-state-active::before {
    transform: translate(calc(2rem - 0.75rem - 4px), -50%) !important;
}

body .rz-chkbox {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 1.05rem !important;
    min-height: 1.05rem !important;
    margin: 0 !important;
    line-height: 0 !important;
    vertical-align: middle !important;
}

body .rz-chkbox .rz-helper-hidden-accessible {
    position: absolute !important;
}

/* Label and switch stay together. The checkbox must not inherit the
   column width, or the knob is centered in the empty space. */
body .rz-stack:has(> .rz-chkbox):has(> .rz-label) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.75rem !important;
    box-sizing: border-box !important;
    /*width: 100% !important;*/
    height: var(--form-control-height) !important;
    min-height: var(--form-control-height) !important;
    max-height: var(--form-control-height) !important;
    margin-top: 0.20rem !important;
    margin-bottom: 0.20rem !important;
    padding: 0 0.75rem !important;
    background: var(--rz-base-200, #f8fafc) !important;
    border: 1px solid var(--input-border, #cbd5e1) !important;
    border-radius: var(--rz-border-radius, 4px) !important;
}

body .rz-stack:has(> .rz-chkbox):has(> .rz-label) > .rz-label {
    order: 1;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: calc(100% - 3rem) !important;
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body .rz-stack:has(> .rz-chkbox):has(> .rz-label) > .rz-chkbox {
    order: 2;
    flex: 0 0 auto !important;
    width: 2rem !important;
    min-width: 2rem !important;
    max-width: 2rem !important;
    height: 1.05rem !important;
    min-height: 1.05rem !important;
    margin: 0 !important;
    align-self: center !important;
    justify-content: flex-start !important;
}

body .rz-stack.bis-toggle-label-top:has(> .rz-chkbox):has(> .rz-label) {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.1rem !important;
    height: auto !important;
    max-height: none !important;
    padding: 0.15rem 0.65rem !important;
}

body .rz-stack.bis-toggle-label-top:has(> .rz-chkbox):has(> .rz-label) > .rz-label {
    order: 1;
    text-align: center !important;
}

/* ========================================
   VALUE CLEAR OF THE FLOATING LABEL
   One rule for every outlined field: text, area, number, date,
   dropdown, multi-select, autocomplete, mask, and time.
   ======================================== */

body .rz-form-field textarea,
body .rz-form-field .rz-textarea,
body .rz-form-field .rz-html-editor {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 2.6rem !important;
    max-height: none !important;
    margin: 0 !important;
    padding-top: 0.55rem !important;
    padding-bottom: 0.25rem !important;
    padding-left: var(--control-value-padding-x) !important;
    padding-right: var(--control-value-padding-x) !important;
    line-height: 1.25 !important;
    overflow: auto !important;
    white-space: pre-wrap !important;
}

body .rz-form-field .rz-mask input,
body .rz-form-field .rz-timespanpicker input,
body .rz-form-field .rz-lookup input,
body .rz-form-field .rz-colorpicker input {
    box-sizing: border-box !important;
    height: var(--form-control-height) !important;
    min-height: var(--form-control-height) !important;
    padding-top: var(--control-value-padding-top) !important;
    padding-bottom: var(--control-value-padding-bottom) !important;
    padding-left: var(--control-value-padding-x) !important;
    padding-right: var(--control-value-padding-x) !important;
    line-height: var(--control-text-line-height) !important;
}

/* Same gutter on every column, so a span of 6 lines up with two spans of 3. */
body .rz-row > [class*="rz-col"] {
    box-sizing: border-box !important;
    padding-left: 0 !important;
    padding-right: 0.75rem !important;
}

body .rz-row > [class*="rz-col"] > .rz-form-field,
body .rz-row > [class*="rz-col"] > .rz-stack:has(> .rz-chkbox):has(> .rz-label) {
    /*width: 100% !important;*/
    max-width: 100% !important;
}

body .rz-form-field:has(.rz-form-field-end) :is(
    textarea,
    .rz-textarea,
    input.rz-inputtext,
    .rz-dropdown-label,
    .rz-multiselect-label,
    .rz-numeric input,
    .rz-mask input,
    .rz-timespanpicker input,
    .rz-lookup input
) {
    padding-right: 1.6rem !important;
}