.width-mini { width: 4rem !important; max-width: 4rem !important; } .width-small { width: 6rem !important; max-width: 6rem !important; } .width-medium { width: 9rem !important; max-width: 9rem !important; } .width-large { width: 13rem !important; max-width: 13rem !important; } .width-xlarge { width: 17rem !important; max-width: 17rem !important; } .width-xxlarge { width: 33rem !important; max-width: 33rem !important; } /* `min-w-0` is used as a Bootstrap-style utility (so flex children can shrink below their content and let `text-truncate` work), but Bootstrap 5 doesn't ship it. Define it globally so every existing/future use actually applies. */ .min-w-0 { min-width: 0; } :root { --icon-spacing: var(--space-1, 0.25rem); --row-spacing: var(--space-3, 1rem); } .mb-row { &:not(.card-body:last-child) { margin-bottom: var(--row-spacing); } } .gap-row { row-gap: var(--row-spacing); } .ms-icon { margin-inline-start: var(--icon-spacing); } .me-icon { margin-inline-end: var(--icon-spacing); } .ps-icon { padding-inline-start: var(--icon-spacing); } .pe-icon { padding-inline-end: var(--icon-spacing); } .badge { --badge-spacing: var(--space-2, 0.5rem); &.ms-badge { margin-inline-start: var(--badge-spacing); } &.me-badge { margin-inline-end: var(--badge-spacing); } &.ps-badge { padding-inline-start: var(--badge-spacing); } &.pe-badge { padding-inline-end: var(--badge-spacing); } } .progress-bar { overflow: visible !important; } .card-body > table.table:last-child { margin-bottom: 0; } .metric { .imperial { display: none; } } .imperial { .metric { display: none; } } .metric.imperial { .metric, .imperial { display: inline-block; } .metric + .imperial, .imperial + .metric { margin-inline-start: var(--space-2, 0.5rem); } } .mwu-container-684968e { display: inline; a { color: inherit; text-decoration: none; &:hover { text-decoration: underline; } } .mwu-icon-684968e { font-size: 0.7em; opacity: 0.5; } } /* Create-row styling Bootstrap utilities can't express. Kept separate from the shared auto_complete_single_select.css. */ .mwu-createRow-54c15f0 { cursor: pointer; /* Solid background so scrolled results don't show through the sticky row. */ background-color: var(--bs-body-bg); &:hover { background-color: var(--bs-tertiary-bg); } & .mwu-createRowIcon-54c15f0 { width: 1.25rem; height: 1.25rem; } } .mwu-searchSelect-ec74073 { & input { min-width: 15ex; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & input:focus { border-color: var(--bs-primary-bg-subtle) !important; box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important; outline: 0; } /* SV: Add bolt icon */ & .mwu-tt-input-ec74073 { background-position: right calc(0.375em + 0.1875rem) center; background-repeat: no-repeat; background-image: url("data:image/svg+xml;utf8,"); } & .mwu-tt-input-ec74073:focus { background-image: url("data:image/svg+xml;utf8,"); } & .mwu-tt-input-ec74073.mwu-loading-ec74073, & .mwu-tt-input-ec74073.mwu-loading-ec74073:focus { background-image: url("data:image/svg+xml;utf8,"); } /* Bootstrap's .input-group rules target its direct children; here that is this wrapper, not the .form-control it holds — so the sizing, seam-flattening and focus-ring stacking have to be forwarded to the inner input by hand. */ .input-group > & { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; & input { min-width: 0; width: 100%; } &:focus-within { z-index: 5; } &:not(:first-child) input { border-start-start-radius: 0; border-end-start-radius: 0; } &:not(:last-child) input { border-start-end-radius: 0; border-end-end-radius: 0; } } } .mwu-menu-ec74073 { width: max-content; max-width: 90vw; max-height: 66vh; overflow-y: auto; overflow-x: hidden; & tr { cursor: pointer; } } .mwu-choiceDisplay-ec74073 { padding: 0.5rem 1rem; padding-inline-end: 1.5rem; display: flex; align-items: center; gap: 0.75rem; & img { flex-shrink: 0; max-height: 2rem; max-width: 2rem; } } .mwu-callout-de1a8a2 { border-width: var(--bs-border-width, 1px); border-inline-start-width: 0.5rem; &.mwu-calloutPrimary-de1a8a2 { color: var(--bs-primary-text-emphasis) !important; border-color: var(--bs-primary-border-subtle) !important; border-inline-start-color: var(--bs-primary) !important; background-color: var(--bs-primary-bg-subtle) !important; --bs-card-color: var(--bs-primary-text-emphasis); --bs-card-border-color: var(--bs-primary-border-subtle); --bs-card-bg: var(--bs-primary-bg-subtle); } &.mwu-calloutSecondary-de1a8a2 { color: var(--bs-secondary-text-emphasis) !important; border-color: var(--bs-secondary-border-subtle) !important; border-inline-start-color: var(--bs-secondary) !important; background-color: var(--bs-secondary-bg-subtle) !important; --bs-card-color: var(--bs-secondary-text-emphasis); --bs-card-border-color: var(--bs-secondary-border-subtle); --bs-card-bg: var(--bs-secondary-bg-subtle); } &.mwu-calloutDisabled-de1a8a2 { color: var(--bs-secondary-text-emphasis) !important; border-color: var(--bs-secondary-border-subtle) !important; border-inline-start-color: var(--bs-secondary) !important; background-color: var(--bs-secondary-bg-subtle) !important; --bs-card-color: var(--bs-secondary-text-emphasis); --bs-card-border-color: var(--bs-secondary-border-subtle); --bs-card-bg: var(--bs-secondary-bg-subtle); opacity: 0.5; } &.mwu-calloutSuccess-de1a8a2 { color: var(--bs-success-text-emphasis) !important; border-color: var(--bs-success-border-subtle) !important; border-inline-start-color: var(--bs-success) !important; background-color: var(--bs-success-bg-subtle) !important; --bs-card-color: var(--bs-success-text-emphasis); --bs-card-border-color: var(--bs-success-border-subtle); --bs-card-bg: var(--bs-success-bg-subtle); } &.mwu-calloutDanger-de1a8a2 { color: var(--bs-danger-text-emphasis) !important; border-color: var(--bs-danger-border-subtle) !important; border-inline-start-color: var(--bs-danger) !important; background-color: var(--bs-danger-bg-subtle) !important; --bs-card-color: var(--bs-danger-text-emphasis); --bs-card-border-color: var(--bs-danger-border-subtle); --bs-card-bg: var(--bs-danger-bg-subtle); } &.mwu-calloutWarning-de1a8a2 { color: var(--bs-warning-text-emphasis) !important; border-color: var(--bs-warning-border-subtle) !important; border-inline-start-color: var(--bs-warning) !important; background-color: var(--bs-warning-bg-subtle) !important; --bs-card-color: var(--bs-warning-text-emphasis); --bs-card-border-color: var(--bs-warning-border-subtle); --bs-card-bg: var(--bs-warning-bg-subtle); } &.mwu-calloutInfo-de1a8a2 { color: var(--bs-info-text-emphasis) !important; border-color: var(--bs-info-border-subtle) !important; border-inline-start-color: var(--bs-info) !important; background-color: var(--bs-info-bg-subtle) !important; --bs-card-color: var(--bs-info-text-emphasis); --bs-card-border-color: var(--bs-info-border-subtle); --bs-card-bg: var(--bs-info-bg-subtle); } &.mwu-calloutLight-de1a8a2 { color: var(--bs-light-text-emphasis) !important; border-color: var(--bs-light-border-subtle) !important; border-inline-start-color: var(--bs-light) !important; background-color: var(--bs-light-bg-subtle) !important; --bs-card-color: var(--bs-light-text-emphasis); --bs-card-border-color: var(--bs-light-border-subtle); --bs-card-bg: var(--bs-light-bg-subtle); } &.mwu-calloutDark-de1a8a2 { color: var(--bs-dark-text-emphasis) !important; border-color: var(--bs-dark-border-subtle) !important; border-inline-start-color: var(--bs-dark) !important; background-color: var(--bs-dark-bg-subtle) !important; --bs-card-color: var(--bs-dark-text-emphasis); --bs-card-border-color: var(--bs-dark-border-subtle); --bs-card-bg: var(--bs-dark-bg-subtle); } &.mwu-calloutCancelled-de1a8a2 { color: var(--bs-secondary-text-emphasis) !important; border-color: var(--bs-secondary-border-subtle) !important; border-inline-start-color: var(--bs-secondary) !important; background-color: var(--bs-secondary-bg-subtle) !important; --bs-card-color: var(--bs-secondary-text-emphasis); --bs-card-border-color: var(--bs-secondary-border-subtle); --bs-card-bg: var(--bs-secondary-bg-subtle); text-decoration: line-through; opacity: 0.5; } } .mwu-dates-e81eafc { flex: 1; display: flex; flex-direction: column; gap: 0; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(10rem, auto); border-top: var(--bs-border-width, 1px) solid; border-inline-start: var(--bs-border-width, 1px) solid; border-color: var(--bs-border-color); border-radius: var(--bs-border-radius); &.mwu-compact-e81eafc { flex: none; .mwu-dayItem-e81eafc { min-height: unset; } .mwu-weekRow-e81eafc { min-height: unset; } } .mwu-dayItem-e81eafc { position: relative; border-inline-end: var(--bs-border-width, 1px) solid; border-bottom: var(--bs-border-width, 1px) solid; border-color: var(--bs-border-color); cursor: pointer; min-height: 10rem; &.mwu-selected-e81eafc { color: var(--bs-primary-text-emphasis); background-color: var(--bs-primary-bg-subtle) !important; border: none; outline: solid 2px var(--bs-primary-border-subtle); z-index: 2; } &.mwu-today-e81eafc { background-color: var(--bs-dark-bg-subtle); border: var(--bs-border-width, 1px) solid var(--bs-dark-border-subtle); z-index: 1; .mwu-dayHeader-e81eafc { font-weight: bold; } } &.mwu-otherMonth-e81eafc { color: var(--bs-secondary); background-color: var(--bs-secondary-bg-subtle) !important; } .mwu-dayHeader-e81eafc { padding: 0.25rem; } } .mwu-weekRow-e81eafc { --header-height: 1.75rem; --event-height: 2.25rem; --footer-height: 0.5rem; position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); height: calc( var(--lanes-count, 1) * var(--event-height) + var(--header-height) + var(--footer-height) ); min-height: 10rem; .mwu-eventBar-e81eafc { position: absolute; grid-row: 1; margin-top: calc( var(--event-lane, 0) * var(--event-height) + var(--header-height) ); border-radius: 0.25rem; padding: 0.25rem; font-size: 80%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: var(--event-height); width: 100%; z-index: 3; &.mwu-highlighted-e81eafc { box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color); z-index: 4; &::after { position: absolute; inset: 0; background-color: rgba( var(--bs-emphasis-color-rgb), 0.075 ); content: ""; pointer-events: none; } } &.mwu-continuesBefore-e81eafc { border-start-start-radius: 0; border-end-start-radius: 0; > * { border-inline-start-width: 0 !important; border-start-start-radius: 0 !important; border-end-start-radius: 0 !important; } } &.mwu-continuesAfter-e81eafc { border-start-end-radius: 0; border-end-end-radius: 0; > * { border-inline-end-width: 0 !important; border-start-end-radius: 0 !important; border-end-end-radius: 0 !important; } } &.mwu-continuesBefore-e81eafc, &.mwu-continuesAfter-e81eafc { --continuation-fade-width: var(--space-5, 1.25rem); -webkit-mask-image: var(--continuation-mask-image); mask-image: var(--continuation-mask-image); } &.mwu-continuesBefore-e81eafc:not(.mwu-continuesAfter-e81eafc):dir(ltr), &.mwu-continuesAfter-e81eafc:not(.mwu-continuesBefore-e81eafc):dir(rtl) { --continuation-mask-image: linear-gradient( to right, transparent, black var(--continuation-fade-width) ); } &.mwu-continuesAfter-e81eafc:not(.mwu-continuesBefore-e81eafc):dir(ltr), &.mwu-continuesBefore-e81eafc:not(.mwu-continuesAfter-e81eafc):dir(rtl) { --continuation-mask-image: linear-gradient( to left, transparent, black var(--continuation-fade-width) ); } &.mwu-continuesBefore-e81eafc.mwu-continuesAfter-e81eafc { --continuation-mask-image: linear-gradient( to right, transparent, black var(--continuation-fade-width), black calc(100% - var(--continuation-fade-width)), transparent ); } } } } .mantiqCalendarMonthlyLanes1 { --lanes-count: 1; } .mantiqCalendarMonthlyLanes2 { --lanes-count: 2; } .mantiqCalendarMonthlyLanes3 { --lanes-count: 3; } .mantiqCalendarMonthlyLanes4 { --lanes-count: 4; } .mantiqCalendarMonthlyLanes5 { --lanes-count: 5; } .mantiqCalendarMonthlyLanes6 { --lanes-count: 6; } .mantiqCalendarMonthlyLanes7 { --lanes-count: 7; } .mantiqCalendarMonthlyLanes8 { --lanes-count: 8; } .mantiqCalendarMonthlyLanes9 { --lanes-count: 9; } .mantiqCalendarMonthlyLanes10 { --lanes-count: 10; } .mantiqCalendarMonthlyLanes11 { --lanes-count: 11; } .mantiqCalendarMonthlyLanes12 { --lanes-count: 12; } .mantiqCalendarMonthlyLanes13 { --lanes-count: 13; } .mantiqCalendarMonthlyLanes14 { --lanes-count: 14; } .mantiqCalendarMonthlyLanes15 { --lanes-count: 15; } .mantiqCalendarMonthlyLanes16 { --lanes-count: 16; } .mantiqCalendarMonthlyLanes17 { --lanes-count: 17; } .mantiqCalendarMonthlyLanes18 { --lanes-count: 18; } .mantiqCalendarMonthlyLanes19 { --lanes-count: 19; } .mantiqCalendarMonthlyLanes20 { --lanes-count: 20; } .mantiqCalendarMonthlyLanes21 { --lanes-count: 21; } .mantiqCalendarMonthlyLanes22 { --lanes-count: 22; } .mantiqCalendarMonthlyLanes23 { --lanes-count: 23; } .mantiqCalendarMonthlyLanes24 { --lanes-count: 24; } .mantiqCalendarMonthlyColStart1 { grid-column-start: 1; } .mantiqCalendarMonthlyColStart2 { grid-column-start: 2; } .mantiqCalendarMonthlyColStart3 { grid-column-start: 3; } .mantiqCalendarMonthlyColStart4 { grid-column-start: 4; } .mantiqCalendarMonthlyColStart5 { grid-column-start: 5; } .mantiqCalendarMonthlyColStart6 { grid-column-start: 6; } .mantiqCalendarMonthlyColStart7 { grid-column-start: 7; } .mantiqCalendarMonthlyColEnd2 { grid-column-end: 2; } .mantiqCalendarMonthlyColEnd3 { grid-column-end: 3; } .mantiqCalendarMonthlyColEnd4 { grid-column-end: 4; } .mantiqCalendarMonthlyColEnd5 { grid-column-end: 5; } .mantiqCalendarMonthlyColEnd6 { grid-column-end: 6; } .mantiqCalendarMonthlyColEnd7 { grid-column-end: 7; } .mantiqCalendarMonthlyColEnd8 { grid-column-end: 8; } .mantiqCalendarMonthlyLane0 { --event-lane: 0; } .mantiqCalendarMonthlyLane1 { --event-lane: 1; } .mantiqCalendarMonthlyLane2 { --event-lane: 2; } .mantiqCalendarMonthlyLane3 { --event-lane: 3; } .mantiqCalendarMonthlyLane4 { --event-lane: 4; } .mantiqCalendarMonthlyLane5 { --event-lane: 5; } .mantiqCalendarMonthlyLane6 { --event-lane: 6; } .mantiqCalendarMonthlyLane7 { --event-lane: 7; } .mantiqCalendarMonthlyLane8 { --event-lane: 8; } .mantiqCalendarMonthlyLane9 { --event-lane: 9; } .mantiqCalendarMonthlyLane10 { --event-lane: 10; } .mantiqCalendarMonthlyLane11 { --event-lane: 11; } .mantiqCalendarMonthlyLane12 { --event-lane: 12; } .mantiqCalendarMonthlyLane13 { --event-lane: 13; } .mantiqCalendarMonthlyLane14 { --event-lane: 14; } .mantiqCalendarMonthlyLane15 { --event-lane: 15; } .mantiqCalendarMonthlyLane16 { --event-lane: 16; } .mantiqCalendarMonthlyLane17 { --event-lane: 17; } .mantiqCalendarMonthlyLane18 { --event-lane: 18; } .mantiqCalendarMonthlyLane19 { --event-lane: 19; } .mantiqCalendarMonthlyLane20 { --event-lane: 20; } .mantiqCalendarMonthlyLane21 { --event-lane: 21; } .mantiqCalendarMonthlyLane22 { --event-lane: 22; } .mantiqCalendarMonthlyLane23 { --event-lane: 23; } .mwu-weeklyView-d5d6a8c { flex: 1; display: flex; flex-direction: column; border-top: var(--bs-border-width, 1px) solid; border-inline-start: var(--bs-border-width, 1px) solid; border-color: var(--bs-border-color); border-radius: var(--bs-border-radius); overflow-y: auto; .mwu-weeklyAllDay-d5d6a8c { display: grid; grid-template-columns: 4rem repeat(7, minmax(0, 1fr)); border-bottom: 2px solid var(--bs-border-color); .mwu-weeklyAllDayCell-d5d6a8c { &.mwu-slotClickable-d5d6a8c { cursor: pointer; } display: flex; flex-direction: column; gap: 0.125rem; padding: 0.25rem; min-height: 2.5rem; border-inline-end: var(--bs-border-width, 1px) solid; border-color: var(--bs-border-color); .mwu-weeklyAllDayEvent-d5d6a8c { border-radius: 0.25rem; padding: 0.125rem 0.25rem; font-size: 80%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } } .mwu-weeklyTimeGutter-d5d6a8c { display: flex; align-items: flex-start; justify-content: center; padding: 0.125rem 0.25rem; font-size: 0.75rem; color: var(--bs-secondary); border-inline-end: var(--bs-border-width, 1px) solid; border-color: var(--bs-border-color); } .mwu-weeklyGridWrapper-d5d6a8c { --hour-height: 3rem; --gutter-width: 4rem; position: relative; flex: 1; .mwu-weeklyGrid-d5d6a8c { display: grid; grid-template-columns: var(--gutter-width) repeat(7, minmax(0, 1fr)); .mwu-weeklyHourCell-d5d6a8c { border-inline-end: var(--bs-border-width, 1px) solid; border-bottom: var(--bs-border-width, 1px) solid; border-color: var(--bs-border-color); height: var(--hour-height); position: relative; &.mwu-today-d5d6a8c { background-color: var(--bs-dark-bg-subtle); } &.mwu-selected-d5d6a8c { background-color: var(--bs-primary-bg-subtle); } &.mwu-slotClickable-d5d6a8c { cursor: pointer; } } } .mwu-weeklyTimedEvent-d5d6a8c { --col-width: calc((100% - var(--gutter-width)) / 7); position: absolute; inset-inline-start: calc( var(--gutter-width) + var(--day-index, 0) * var(--col-width) + var(--event-sub-col, 0) * var(--event-width, var(--col-width)) ); width: var(--event-width, var(--col-width)); top: var(--event-top, 0); height: var(--event-height, calc(0.5 * var(--hour-height))); min-height: calc(0.5 * var(--hour-height)); border-radius: 0.25rem; font-size: 80%; overflow: hidden; z-index: 3; box-sizing: border-box; /* Make the rendered event content fill the time slot */ > * { height: 100%; margin: 0 !important; overflow: hidden; text-overflow: ellipsis; } } } } .mantiqCalendarWeeklyCol1 { --day-index: 0; } .mantiqCalendarWeeklyCol2 { --day-index: 1; } .mantiqCalendarWeeklyCol3 { --day-index: 2; } .mantiqCalendarWeeklyCol4 { --day-index: 3; } .mantiqCalendarWeeklyCol5 { --day-index: 4; } .mantiqCalendarWeeklyCol6 { --day-index: 5; } .mantiqCalendarWeeklyCol7 { --day-index: 6; } .mantiqCalendarWeeklyStart0 { --event-top: calc(0 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart1 { --event-top: calc(1 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart2 { --event-top: calc(2 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart3 { --event-top: calc(3 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart4 { --event-top: calc(4 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart5 { --event-top: calc(5 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart6 { --event-top: calc(6 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart7 { --event-top: calc(7 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart8 { --event-top: calc(8 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart9 { --event-top: calc(9 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart10 { --event-top: calc(10 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart11 { --event-top: calc(11 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart12 { --event-top: calc(12 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart13 { --event-top: calc(13 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart14 { --event-top: calc(14 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart15 { --event-top: calc(15 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart16 { --event-top: calc(16 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart17 { --event-top: calc(17 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart18 { --event-top: calc(18 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart19 { --event-top: calc(19 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart20 { --event-top: calc(20 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart21 { --event-top: calc(21 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart22 { --event-top: calc(22 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart23 { --event-top: calc(23 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart24 { --event-top: calc(24 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart25 { --event-top: calc(25 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart26 { --event-top: calc(26 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart27 { --event-top: calc(27 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart28 { --event-top: calc(28 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart29 { --event-top: calc(29 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart30 { --event-top: calc(30 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart31 { --event-top: calc(31 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart32 { --event-top: calc(32 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart33 { --event-top: calc(33 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart34 { --event-top: calc(34 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart35 { --event-top: calc(35 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart36 { --event-top: calc(36 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart37 { --event-top: calc(37 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart38 { --event-top: calc(38 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart39 { --event-top: calc(39 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart40 { --event-top: calc(40 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart41 { --event-top: calc(41 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart42 { --event-top: calc(42 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart43 { --event-top: calc(43 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart44 { --event-top: calc(44 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart45 { --event-top: calc(45 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart46 { --event-top: calc(46 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart47 { --event-top: calc(47 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart48 { --event-top: calc(48 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart49 { --event-top: calc(49 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart50 { --event-top: calc(50 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart51 { --event-top: calc(51 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart52 { --event-top: calc(52 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart53 { --event-top: calc(53 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart54 { --event-top: calc(54 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart55 { --event-top: calc(55 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart56 { --event-top: calc(56 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart57 { --event-top: calc(57 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart58 { --event-top: calc(58 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart59 { --event-top: calc(59 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart60 { --event-top: calc(60 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart61 { --event-top: calc(61 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart62 { --event-top: calc(62 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart63 { --event-top: calc(63 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart64 { --event-top: calc(64 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart65 { --event-top: calc(65 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart66 { --event-top: calc(66 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart67 { --event-top: calc(67 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart68 { --event-top: calc(68 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart69 { --event-top: calc(69 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart70 { --event-top: calc(70 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart71 { --event-top: calc(71 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart72 { --event-top: calc(72 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart73 { --event-top: calc(73 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart74 { --event-top: calc(74 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart75 { --event-top: calc(75 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart76 { --event-top: calc(76 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart77 { --event-top: calc(77 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart78 { --event-top: calc(78 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart79 { --event-top: calc(79 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart80 { --event-top: calc(80 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart81 { --event-top: calc(81 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart82 { --event-top: calc(82 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart83 { --event-top: calc(83 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart84 { --event-top: calc(84 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart85 { --event-top: calc(85 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart86 { --event-top: calc(86 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart87 { --event-top: calc(87 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart88 { --event-top: calc(88 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart89 { --event-top: calc(89 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart90 { --event-top: calc(90 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart91 { --event-top: calc(91 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart92 { --event-top: calc(92 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart93 { --event-top: calc(93 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart94 { --event-top: calc(94 * var(--hour-height) / 4); } .mantiqCalendarWeeklyStart95 { --event-top: calc(95 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration2 { --event-height: calc(2 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration3 { --event-height: calc(3 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration4 { --event-height: calc(4 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration5 { --event-height: calc(5 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration6 { --event-height: calc(6 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration7 { --event-height: calc(7 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration8 { --event-height: calc(8 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration9 { --event-height: calc(9 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration10 { --event-height: calc(10 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration11 { --event-height: calc(11 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration12 { --event-height: calc(12 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration13 { --event-height: calc(13 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration14 { --event-height: calc(14 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration15 { --event-height: calc(15 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration16 { --event-height: calc(16 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration17 { --event-height: calc(17 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration18 { --event-height: calc(18 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration19 { --event-height: calc(19 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration20 { --event-height: calc(20 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration21 { --event-height: calc(21 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration22 { --event-height: calc(22 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration23 { --event-height: calc(23 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration24 { --event-height: calc(24 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration25 { --event-height: calc(25 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration26 { --event-height: calc(26 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration27 { --event-height: calc(27 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration28 { --event-height: calc(28 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration29 { --event-height: calc(29 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration30 { --event-height: calc(30 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration31 { --event-height: calc(31 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration32 { --event-height: calc(32 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration33 { --event-height: calc(33 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration34 { --event-height: calc(34 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration35 { --event-height: calc(35 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration36 { --event-height: calc(36 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration37 { --event-height: calc(37 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration38 { --event-height: calc(38 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration39 { --event-height: calc(39 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration40 { --event-height: calc(40 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration41 { --event-height: calc(41 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration42 { --event-height: calc(42 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration43 { --event-height: calc(43 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration44 { --event-height: calc(44 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration45 { --event-height: calc(45 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration46 { --event-height: calc(46 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration47 { --event-height: calc(47 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration48 { --event-height: calc(48 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration49 { --event-height: calc(49 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration50 { --event-height: calc(50 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration51 { --event-height: calc(51 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration52 { --event-height: calc(52 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration53 { --event-height: calc(53 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration54 { --event-height: calc(54 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration55 { --event-height: calc(55 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration56 { --event-height: calc(56 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration57 { --event-height: calc(57 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration58 { --event-height: calc(58 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration59 { --event-height: calc(59 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration60 { --event-height: calc(60 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration61 { --event-height: calc(61 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration62 { --event-height: calc(62 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration63 { --event-height: calc(63 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration64 { --event-height: calc(64 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration65 { --event-height: calc(65 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration66 { --event-height: calc(66 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration67 { --event-height: calc(67 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration68 { --event-height: calc(68 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration69 { --event-height: calc(69 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration70 { --event-height: calc(70 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration71 { --event-height: calc(71 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration72 { --event-height: calc(72 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration73 { --event-height: calc(73 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration74 { --event-height: calc(74 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration75 { --event-height: calc(75 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration76 { --event-height: calc(76 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration77 { --event-height: calc(77 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration78 { --event-height: calc(78 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration79 { --event-height: calc(79 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration80 { --event-height: calc(80 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration81 { --event-height: calc(81 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration82 { --event-height: calc(82 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration83 { --event-height: calc(83 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration84 { --event-height: calc(84 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration85 { --event-height: calc(85 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration86 { --event-height: calc(86 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration87 { --event-height: calc(87 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration88 { --event-height: calc(88 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration89 { --event-height: calc(89 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration90 { --event-height: calc(90 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration91 { --event-height: calc(91 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration92 { --event-height: calc(92 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration93 { --event-height: calc(93 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration94 { --event-height: calc(94 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration95 { --event-height: calc(95 * var(--hour-height) / 4); } .mantiqCalendarWeeklyDuration96 { --event-height: calc(96 * var(--hour-height) / 4); } .mantiqCalendarWeeklySub0 { --event-sub-col: 0; } .mantiqCalendarWeeklySub1 { --event-sub-col: 1; } .mantiqCalendarWeeklySub2 { --event-sub-col: 2; } .mantiqCalendarWeeklySub3 { --event-sub-col: 3; } .mantiqCalendarWeeklySub4 { --event-sub-col: 4; } .mantiqCalendarWeeklySub5 { --event-sub-col: 5; } .mantiqCalendarWeeklySub6 { --event-sub-col: 6; } .mantiqCalendarWeeklySub7 { --event-sub-col: 7; } .mantiqCalendarWeeklySub8 { --event-sub-col: 8; } .mantiqCalendarWeeklySub9 { --event-sub-col: 9; } .mantiqCalendarWeeklySub10 { --event-sub-col: 10; } .mantiqCalendarWeeklySub11 { --event-sub-col: 11; } .mantiqCalendarWeeklySub12 { --event-sub-col: 12; } .mantiqCalendarWeeklySub13 { --event-sub-col: 13; } .mantiqCalendarWeeklySub14 { --event-sub-col: 14; } .mantiqCalendarWeeklySub15 { --event-sub-col: 15; } .mantiqCalendarWeeklyTotal1 { --event-width: calc(var(--col-width) / 1); } .mantiqCalendarWeeklyTotal2 { --event-width: calc(var(--col-width) / 2); } .mantiqCalendarWeeklyTotal3 { --event-width: calc(var(--col-width) / 3); } .mantiqCalendarWeeklyTotal4 { --event-width: calc(var(--col-width) / 4); } .mantiqCalendarWeeklyTotal5 { --event-width: calc(var(--col-width) / 5); } .mantiqCalendarWeeklyTotal6 { --event-width: calc(var(--col-width) / 6); } .mantiqCalendarWeeklyTotal7 { --event-width: calc(var(--col-width) / 7); } .mantiqCalendarWeeklyTotal8 { --event-width: calc(var(--col-width) / 8); } .mantiqCalendarWeeklyTotal9 { --event-width: calc(var(--col-width) / 9); } .mantiqCalendarWeeklyTotal10 { --event-width: calc(var(--col-width) / 10); } .mantiqCalendarWeeklyTotal11 { --event-width: calc(var(--col-width) / 11); } .mantiqCalendarWeeklyTotal12 { --event-width: calc(var(--col-width) / 12); } .mantiqCalendarWeeklyTotal13 { --event-width: calc(var(--col-width) / 13); } .mantiqCalendarWeeklyTotal14 { --event-width: calc(var(--col-width) / 14); } .mantiqCalendarWeeklyTotal15 { --event-width: calc(var(--col-width) / 15); } .mantiqCalendarWeeklyTotal16 { --event-width: calc(var(--col-width) / 16); } .mwu-calendar-1d10bcf { /* * Contain the internal z-indexes (today/selected cells, event bars) in * their own stacking context so they don't compete with z-indexes of * other components elsewhere in the application. */ isolation: isolate; display: flex; flex-direction: column; min-height: 35em; &.mwu-compact-1d10bcf { min-height: unset; } } /* The map search bar (CesiumSearchBar), top-left beside the zoom buttons. The input sits over the map on a white control surface like the other on-map buttons; its results dropdown anchors directly beneath it. The whole thing is `position: relative` so the absolutely-positioned dropdown is placed against it. */ .mwu-searchBar-cd2a65e { position: relative; width: 14rem; /* Cap to the map's own width (container-query unit), not the viewport, so on a tiny map the field can't overflow the map edge. On a normal map this is far wider than 14rem, so the field keeps its natural width. */ max-width: calc(100cqi - 1.25rem); } /* A search-glass icon overlaid at the input's inline-start, with the input's inline-start padding opened up to clear it. `relative` so the absolutely positioned icon is placed against this wrapper. */ .mwu-inputWrap-cd2a65e { position: relative; display: block; } .mwu-searchIcon-cd2a65e { position: absolute; inset-inline-start: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); pointer-events: none; } /* The text field itself — a Bootstrap `.form-control` with room for the icon and a soft shadow so it reads as a floating control over the map. */ .mwu-input-cd2a65e { padding-inline-start: 2rem; box-shadow: 0 1px 4px rgb(0 0 0 / 30%); } /* The results dropdown, anchored under the input. Scrolls if the (capped) list is taller than the cap. z-index sits above the map's other top-left controls so an open list is never clipped behind them. */ .mwu-results-cd2a65e { position: absolute; z-index: 4; top: calc(100% + 2px); inset-inline-start: 0; inset-inline-end: 0; max-height: 16rem; overflow-y: auto; /* Chain boundary for the map's wheel containment — map.css explains why containment is declared per scrollable overlay, never universally. */ overscroll-behavior: contain; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--radius-sm, 0.25rem); box-shadow: 0 2px 8px rgb(0 0 0 / 25%); } /* The in-flight row: a centred Bootstrap spinner shown while a geocode is running and no results have landed yet. Same vertical rhythm as a result row so the dropdown doesn't jump when results replace it. */ .mwu-searching-cd2a65e { display: flex; justify-content: center; padding: 0.4rem 0.75rem; } /* One result row: a full-width, start-aligned button. Hover/focus get the subtle theme tint the rest of the workspace uses for list selection. */ .mwu-result-cd2a65e { display: block; width: 100%; padding: 0.4rem 0.75rem; border: 0; background: transparent; color: var(--bs-body-color); text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .mwu-result-cd2a65e:hover, .mwu-result-cd2a65e:focus-visible { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); } .mwu-canvasViewport-6893a91 { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; cursor: grab; user-select: none; &:active { cursor: grabbing; } } .mwu-scaleFrame-6893a91 { flex: 0 0 auto; position: relative; width: max-content; height: max-content; } .mwu-canvas-6893a91 { transform-origin: 0 0; width: max-content; height: max-content; overflow: hidden; } .mwu-countryPrefix-130dba7 { position: relative; cursor: pointer; user-select: none; white-space: nowrap; } .mwu-menu-130dba7 { min-width: 18rem; & .mwu-tableWrapper-130dba7 { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; outline: none; & tr { cursor: pointer; & .mwu-choiceDisplay-130dba7 { padding-inline: 0.75rem 1.5rem; display: flex; align-items: center; gap: 0.75rem; } } } } td { .mwu-dateDisplay-80fb75f { white-space: nowrap; } } .mwu-dateInput-797295c { width: 11rem !important; } .mwu-container-9a95008 { width: 17.5rem !important; } .mwu-datesRange-455a39b { display: flex; align-items: center; html[dir="ltr"] & .mwu-hideLtr-455a39b, html[dir="rtl"] & .mwu-hideRtl-455a39b { display: none; } } .mwu-icon-9265fd3 { font-size: 8em; margin: 2rem; } .mwu-durationInput-924c088 { max-width: 6rem; } .mwu-durationPickerPanel-924c088 { min-width: 10rem; padding: 0 !important; .mwu-durationcPickerPanel-924c088 { width: 10rem; display: flex; flex-direction: column; background: var(--bs-body-bg); .mwu-time-924c088 { display: flex; height: 20rem; .mwu-hour-924c088, .mwu-minute-924c088, .mwu-second-924c088 { flex: 1; overflow-y: auto; .mwu-item-924c088 { min-height: 4.5ex; display: flex; align-items: center; justify-content: center; cursor: pointer; &.mwu-selected-924c088, &:hover { color: #fff; background-color: var(--bs-primary); font-weight: bold; } } } } } .mwu-footer-924c088 { display: flex; justify-content: center; align-items: center; } } .mwu-modalOverlay-66a8c9d { z-index: 1055; } td .mwu-errorPanel-c566b03 { margin: 0 !important; } /* Bootstrap's bundled .btn carries no cursor:pointer here, so the 3-dot actions toggle reads as non-interactive. Restore the click affordance. */ .mwu-actionsToggle-14f6599 { cursor: pointer; } /* The tree/list tables use `table-layout: fixed; width: 100%`, whose intrinsic (max-content) contribution saturates to a huge value in Chromium and propagates up to flex ancestors, crushing flex siblings (e.g. the AI panel) to their min-width. Containing inline-size stops the browser from sizing ancestors off this subtree. */ .mwu-fileBrowser-8344ee0 { contain: inline-size; & .mwu-toolbar-8344ee0 { position: sticky; top: var(--toolbar-sticky-offset, 0px); z-index: 10; } } .mwu-lightbox-926aa6c { /* Default to hidden */ display: none; /* Overlay entire screen */ position: fixed; inset: 0; z-index: 2000; /* A bit of padding around content */ padding: 1em; /* Translucent background */ background: rgba(0, 0, 0, 0.9); /* Unhide the lightbox when it's the target */ &:target { display: flex; align-items: center; justify-content: center; } } /* Applied alongside `.lightbox` only when `close_on_outside_click` is set; a gallery that leaves it off drops this class and stays pixel-identical to before. */ .mwu-lightboxDismissible-926aa6c { cursor: pointer; & .mwu-lightboxContent-926aa6c { cursor: default; } /* `.lightboxImage` below is `width/height: 100%` + `object-fit: contain`, so the 's hit box spans the whole body — including the dark strips beside a letterboxed picture. Clicking right next to the photo would hit the , not the backdrop, and so wouldn't dismiss. Sizing the to the bitmap it actually paints hands those strips back to `.lightboxBody`, which does dismiss. Trade-off: an image *smaller* than the body is no longer blown up to fill it. Identical for anything larger, so a no-op for camera photos. Specificity (0,3,0) beats `.lightboxBody .lightboxImage` (0,2,0) regardless of source order. */ & .mwu-lightboxBody-926aa6c .mwu-lightboxImage-926aa6c { width: auto; height: auto; max-width: 100%; max-height: 100%; } } .mwu-lightboxContent-926aa6c { position: relative; width: 90%; max-width: 1400px; height: 90vh; display: flex; flex-direction: column; background-color: transparent; } .mwu-lightboxHeader-926aa6c { display: flex; justify-content: space-between; align-items: center; padding: 1rem; background-color: rgba(0, 0, 0, 0.5); border-radius: 8px 8px 0 0; backdrop-filter: blur(10px); & .mwu-lightboxTitle-926aa6c { font-size: 1.25rem; font-weight: 500; color: white; display: flex; align-items: center; gap: 1rem; & .mwu-lightboxCounter-926aa6c { font-size: 0.875rem; color: rgba(255, 255, 255, 0.7); font-weight: 400; } } & .mwu-lightboxActions-926aa6c { display: flex; gap: 0.5rem; } } .mwu-lightboxBody-926aa6c { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; min-height: 0; & .mwu-lightboxImage-926aa6c { width: 100%; height: 100%; object-fit: contain; } & .mwu-lightboxPdf-926aa6c { width: 100%; height: 100%; border: none; border-radius: var(--bs-border-radius); background-color: white; } & .mwu-lightboxPdfPages-926aa6c { width: 100%; height: 100%; overflow-y: auto; border-radius: var(--bs-border-radius); background-color: white; } & .mwu-lightboxText-926aa6c { width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--bs-border-radius); background-color: white; } & .mwu-lightboxModel-926aa6c { width: 100%; height: 100%; position: relative; border-radius: var(--bs-border-radius); background-color: rgb(59, 68, 76); & canvas { width: 100% !important; height: 100% !important; display: block; } } & .mwu-lightboxOffice-926aa6c { width: 100%; height: 100%; overflow: auto; border-radius: var(--bs-border-radius); background-color: white; padding: 1rem; text-align: start; } & .mwu-lightboxOdt-926aa6c, & .mwu-lightboxDocx-926aa6c { width: 100%; height: 100%; border: 0; border-radius: var(--bs-border-radius); background-color: white; } & .mwu-lightboxVideo-926aa6c { width: 100%; height: 100%; max-width: 100%; max-height: 100%; border-radius: var(--bs-border-radius); background-color: black; object-fit: contain; } & .mwu-lightboxUnknown-926aa6c { text-align: center; padding: 3rem; color: white; & .mwu-lightboxUnknownIcon-926aa6c { font-size: 5rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 1.5rem; } } } .mwu-lightboxFooter-926aa6c { padding: 0.75rem 1rem; background-color: rgba(0, 0, 0, 0.5); border-radius: 0 0 8px 8px; backdrop-filter: blur(10px); & .mwu-lightboxInfo-926aa6c { color: rgba(255, 255, 255, 0.7); font-size: 0.875rem; } } .mwu-lightboxNav-926aa6c { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; display: flex; justify-content: space-between; padding: 0 1rem; pointer-events: none; } .mwu-lightboxNavPrev-926aa6c, .mwu-lightboxNavNext-926aa6c { width: 50px; height: 50px; background-color: rgba(0, 0, 0, 0.5); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s ease; pointer-events: all; text-decoration: none; } .mwu-lightboxNavPrev-926aa6c:hover, .mwu-lightboxNavNext-926aa6c:hover { background-color: rgba(0, 0, 0, 0.7); color: white; } /* Responsive adjustments */ @media (max-width: 768px) { .mwu-lightboxContent-926aa6c { width: 100%; height: 100vh; max-width: none; } .mwu-lightbox-926aa6c { padding: 0; } .mwu-lightboxHeader-926aa6c, .mwu-lightboxFooter-926aa6c { border-radius: 0; } .mwu-lightboxNavPrev-926aa6c, .mwu-lightboxNavNext-926aa6c { width: 40px; height: 40px; } } .mwu-filePreviewImageContainer-f88abb9 { min-height: 350px; .mwu-filePreviewImage-f88abb9 { max-height: 350px; object-fit: contain; } } .mwu-filePreviewPdfContainer-f88abb9 { min-height: 350px; height: 500px; width: 100%; } .mwu-filePreviewFallback-f88abb9 { min-height: 200px; } /* Fill mode: the caller's flex column sizes the preview, and the viewer scrolls inside it instead of stopping at its own fixed height. */ .mwu-fill-f88abb9 { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; & .mwu-filePreviewImageContainer-f88abb9 { flex: 1 1 0; min-height: 0; & .mwu-filePreviewImage-f88abb9 { height: 100%; max-height: 100%; } } & .mwu-filePreviewPdfContainer-f88abb9 { flex: 1 1 0; min-height: 0; height: auto; } } /* The spreadsheet viewer's container in fill mode; replaces its own sizing class. The table inside its frame carries its own rules. */ .mwu-fillOffice-f88abb9 { flex: 1 1 0; min-height: 0; width: 100%; overflow: auto; background: #f5f5f5; padding: 1rem; text-align: start; } /* The iframe viewers (ODT, Word, 3D, DWG) in fill mode. */ .mwu-fillFrame-f88abb9 { flex: 1 1 0; min-height: 0; width: 100%; border: 0; background: white; } .mwu-previewModal-bee2e8c.modal { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .mwu-previewLayout-bee2e8c { display: flex; flex-direction: column; height: 100%; pointer-events: none; } .mwu-previewDialog-bee2e8c.modal-dialog { flex: 1; min-height: 0; width: 90%; max-width: 1400px; } .mwu-previewContent-bee2e8c.modal-content { height: 90vh; max-height: 100%; pointer-events: none; } .mwu-previewBody-bee2e8c { min-height: 0; } .mwu-previewImage-bee2e8c { max-width: 100%; max-height: 100%; width: auto; height: auto; pointer-events: auto; } .mwu-previewScaledImage-bee2e8c { width: 100%; height: 100%; object-fit: contain; } .mwu-previewVideo-bee2e8c { max-height: 100%; pointer-events: auto; } .mwu-previewFrame-bee2e8c { background-color: var(--bs-body-bg); pointer-events: auto; } .mwu-previewOdtFrame-bee2e8c { width: 100%; height: 100%; border: 0; border-radius: var(--bs-border-radius-lg); background-color: var(--bs-body-bg); pointer-events: auto; } .mwu-previewLoading-bee2e8c { position: absolute; inset: 0; z-index: 1; pointer-events: auto; } .mwu-previewUnknown-bee2e8c { pointer-events: auto; } .mwu-previewUnknownIcon-bee2e8c { font-size: 3rem; opacity: 0.6; } .mwu-previewDownload-bee2e8c { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-circle, 50%); background-color: var(--bs-body-bg); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); color: var(--bs-body-color); pointer-events: auto; &:hover { color: var(--bs-primary); } } .mwu-previewClose-bee2e8c.btn-close { box-sizing: border-box; width: 2.5rem; height: 2.5rem; padding: 0; background-color: var(--bs-body-bg) !important; border-radius: var(--radius-circle, 50%) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); opacity: 1; background-size: 1rem; background-position: center; pointer-events: auto; &:hover { background-color: var(--bs-body-bg) !important; opacity: 0.85; } } .mwu-filePreviewDocx-b669283 { width: 100%; min-height: 400px; border: 0; background: #f5f5f5; } .mwu-filePreviewDwgFrame-cef9068 { display: block; width: 100%; border: 0; &.mwu-filePreviewDwgContainer-cef9068 { min-height: 350px; height: 500px; width: 100%; } } .mwu-galleryItem-38bae55 { max-width: 16rem; &:hover .mwu-deleteButton-38bae55, &:focus-within .mwu-deleteButton-38bae55 { opacity: 1; pointer-events: auto; } } .mwu-thumbnail-38bae55, .mwu-videoThumbnail-38bae55, .mwu-fileThumbnail-38bae55 { width: 16rem; max-width: 100%; height: 10.5rem; border: 1px solid var(--bs-border-color); border-radius: var(--radius-md, 0.5rem); background-color: var(--bs-body-bg); } .mwu-thumbnail-38bae55 { display: block; object-fit: cover; } .mwu-pdfThumbnail-38bae55 { background-color: #fff; } .mwu-videoThumbnail-38bae55 { display: inline-flex; position: relative; overflow: hidden; background-color: #000; video { width: 100%; height: 100%; object-fit: cover; } } .mwu-playBadge-38bae55 { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-circle, 50%); background-color: rgba(0, 0, 0, 0.55); color: #fff; font-size: 1.25rem; pointer-events: none; } .mwu-fileThumbnail-38bae55 { color: var(--bs-secondary-color); } .mwu-fileIcon-38bae55 { font-size: 3rem; } .mwu-fileName-38bae55 { max-width: 16rem; padding-block: var(--space-2, 0.5rem); overflow: hidden; font-weight: 500; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .mwu-deleteButton-38bae55 { z-index: 2; padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem); line-height: 1; opacity: 0; pointer-events: none; transition: opacity var(--transition-fast, 0.15s ease-in-out); } .mwu-previewButton-38bae55 { cursor: zoom-in; } .mwu-galleryTrigger-38bae55 { .mwu-downloadButton-38bae55 { opacity: 0; } &:hover .mwu-downloadButton-38bae55, &:focus-within .mwu-downloadButton-38bae55 { opacity: 1; } } .mwu-downloadButton-38bae55 { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-circle, 50%); background-color: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); transition: opacity var(--transition-fast, 0.15s ease-in-out); &:hover { color: var(--bs-primary); } } .mwu-previewNav-38bae55 { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border: 1px solid var(--bs-border-color); border-radius: var(--radius-circle, 50%); background-color: var(--bs-body-bg); color: var(--bs-body-color); box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1)); pointer-events: auto; &:hover { color: var(--bs-primary); border-color: var(--bs-primary); } &:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; } &.mwu-previewPrevious-38bae55 { inset-inline-start: 0; } &.mwu-previewNext-38bae55 { inset-inline-end: 0; } } .mwu-ribbon-38bae55 { max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; padding: var(--space-2, 0.5rem); background-color: var(--bs-body-bg); pointer-events: auto; cursor: grab; user-select: none; touch-action: pan-x; &.mwu-ribbonDragging-38bae55 { cursor: grabbing; } } .mwu-ribbonItem-38bae55 { width: 6rem; height: 4rem; padding: 0; overflow: hidden; border: 2px solid transparent; border-radius: var(--radius-sm, 0.25rem); background-color: var(--bs-tertiary-bg); color: var(--bs-body-color); cursor: inherit; img { width: 100%; height: 100%; object-fit: cover; } &[aria-current="true"] { border-color: var(--bs-primary); box-shadow: 0 0 0 2px var(--bs-primary); } &:hover, &:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 1px; } } @media (hover: none) { .mwu-galleryTrigger-38bae55 .mwu-downloadButton-38bae55 { opacity: 1; } } @media (max-width: 576px) { .mwu-ribbonItem-38bae55 { width: 4.5rem; height: 3rem; } } .mwu-filePreviewHeaderList-9431bef { display: flex; flex-direction: column; .mwu-fileItem-9431bef { background-color: #e9ecef; border: 1px solid #ced4da; border-radius: 0.5rem; transition: all 0.2s ease; padding: 1rem 1.25rem; } .mwu-fileItem-9431bef:hover { background-color: #dee2e6; border-color: #adb5bd; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .mwu-fileIcon-9431bef { color: #dc3545; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; background-color: #f8f9fa; border-radius: 50%; flex-shrink: 0; } .mwu-fileName-9431bef { color: #495057; font-size: 0.9375rem; font-weight: 400; } .mwu-fileSize-9431bef { min-width: 4rem; text-align: end; color: #6c757d; font-size: 0.875rem; } .mwu-deleteButton-9431bef { opacity: 0.8; transition: opacity 0.2s ease; white-space: nowrap; } .mwu-deleteButton-9431bef:hover { opacity: 1; } } .mwu-filePreviewInline-369fa6e { min-width: 0; max-width: 100%; overflow: hidden; & .mwu-filePreviewBody-369fa6e { min-height: 400px; & > div { flex-grow: 1; display: flex; } } /* Lets text-truncate compress past content width inside the flex header row, so a long filename can't push the card past the viewport on narrow screens. */ & .mwu-headerTitle-369fa6e { min-width: 0; } /* Fill mode: the card stretches to the caller's flex column and the body hands the remaining height to the preview. */ &.mwu-fill-369fa6e { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; & .mwu-previewCard-369fa6e { flex: 1 1 0; min-height: 0; } & .mwu-filePreviewBody-369fa6e, & .mwu-imageLink-369fa6e { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; } } } .mwu-previewGrid-7b0ac4a { display: grid !important; /* minmax(0, 1fr) instead of 1fr — without the explicit min, grid cells implicitly fall back to min-content and grow to fit intrinsic content width (e.g. a wide image), pushing the page past the viewport on narrow screens. */ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; --previewWidth: 100%; --previewHeight: auto; & > div { margin: 0 !important; & > span { display: block; width: 100%; & > a { display: block; width: 100%; } } } } @media (max-width: 768px) { .mwu-previewGrid-7b0ac4a { grid-template-columns: minmax(0, 1fr); } } .mwu-previewButton-6f63675 { cursor: zoom-in; text-align: inherit; color: inherit; } .mwu-downloadOverlay-6f63675 { width: 1.75rem; height: 1.75rem; border-radius: var(--radius-circle, 50%); background-color: var(--bs-body-bg); border: 1px solid var(--bs-border-color); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); color: var(--bs-body-color); opacity: 0; transition: opacity var(--transition-fast, 0.15s ease-in-out); z-index: 1; &:hover { color: var(--bs-primary); border-color: var(--bs-primary); } } .mwu-withDownload-6f63675 { &:hover, &:focus-within { .mwu-downloadOverlay-6f63675 { opacity: 1; } .mwu-previewButton-6f63675 > :not(img, canvas, :has(video)) { padding-inline-end: 2.25rem; } } .mwu-previewButton-6f63675 > :not(img, canvas, :has(video)) { transition: padding-inline-end var(--transition-fast, 0.15s ease-in-out); } } @media (hover: none) { .mwu-withDownload-6f63675 { .mwu-downloadOverlay-6f63675 { opacity: 1; } .mwu-previewButton-6f63675 > :not(img, canvas, :has(video)) { padding-inline-end: 2.25rem; } } } .mwu-filePreviewModelFrame-17f58a4 { display: block; width: 100%; border: 0; &.mwu-filePreviewModelContainer-17f58a4 { min-height: 350px; height: 500px; width: 100%; } } .mwu-filePreviewOdt-a93b4f3 { width: 100%; min-height: 400px; border: 0; background: white; } /* The table renders in a frame inside this container, with its own rules; see `sheetjs::mount`. */ .mwu-filePreviewSheetContainer-5e53bed { min-height: 400px; max-height: 70vh; overflow: auto; text-align: start; } .mwu-wrapper-caafde1 { container-type: inline-size; } .mwu-table-caafde1 { border-collapse: separate; border-spacing: 0; width: 100%; /* Below this width the wrapper scrolls instead of crushing the Name cell. */ min-width: 28rem; thead th { text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-secondary); border-bottom: 1px solid var(--bs-border-color); padding: 0.75rem 1rem; white-space: nowrap; background: var(--bs-body-bg); &:nth-child(5) { padding: 0; } a { color: var(--bs-secondary); text-decoration: none; &:hover { color: var(--bs-body-color); } } } tbody td { padding: 0.625rem 1rem; vertical-align: middle; border-bottom: 1px solid var(--bs-border-color-translucent); white-space: nowrap; } /* The Name column takes the width the other columns leave, and they shrink to their content. `max-width: 0` keeps a long name from widening the table, so the name truncates instead of the size or the date. */ :is(th, td):first-child { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; } /* The actions column spaces the last visible column before it, which therefore drops its own trailing padding. The container queries below move this rule as they hide columns. */ :is(th, td):nth-child(4) { padding-inline-end: 0.25rem; } .mwu-selectAllHeader-caafde1 { display: flex; align-items: center; gap: 0.625rem; } .mwu-checkbox-caafde1 { width: 1rem; height: 1rem; margin: 0; cursor: pointer; border-radius: 0.25rem; flex-shrink: 0; /* Above the tree's `.stretched-link` overlay, which covers the cell. */ position: relative; z-index: 2; } tbody tr { transition: background-color 0.1s ease; &:hover > td { background-color: var(--bs-tertiary-bg); } .mwu-actionsCell-caafde1 { padding-block: 0.25rem; padding-inline: 0; text-align: center; } .mwu-actionsCell-caafde1 button { opacity: 0; transition: opacity 0.1s ease; color: var(--bs-secondary); background: transparent !important; border: none !important; padding: 0.25rem 0.5rem !important; border-radius: 0.375rem; &:hover { color: var(--bs-body-color); background: var(--bs-secondary-bg) !important; } } /* Keep the trigger visible while its portaled menu is open — the menu is not a row descendant, so row :hover ends inside it. `:focus-within` covers keyboard users, who otherwise tab onto a control they cannot see. */ &:hover .mwu-actionsCell-caafde1 button, &:focus-within .mwu-actionsCell-caafde1 button, &.mwu-selected-caafde1 .mwu-actionsCell-caafde1 button, &.mwu-highlighted-caafde1 .mwu-actionsCell-caafde1 button, .mwu-actionsCell-caafde1 button[aria-expanded="true"] { opacity: 1; } } .mwu-highlighted-caafde1 > td, .mwu-highlighted-caafde1:nth-of-type(odd) > td, .mwu-highlighted-caafde1:nth-of-type(even) > td { background-color: rgba(255, 193, 7, 0.12) !important; } .mwu-selected-caafde1 > td, .mwu-selected-caafde1:nth-of-type(odd) > td, .mwu-selected-caafde1:nth-of-type(even) > td { background-color: rgba(13, 110, 253, 0.06) !important; } .mwu-renamed-caafde1 > td { animation: renameFlash 500ms ease-out; } .mwu-deleting-caafde1 { animation: deleteSlideOut 300ms ease-out forwards; pointer-events: none; } } [data-bs-theme="dark"] .mwu-table-caafde1 { .mwu-highlighted-caafde1 > td, .mwu-highlighted-caafde1:nth-of-type(odd) > td, .mwu-highlighted-caafde1:nth-of-type(even) > td { background-color: rgba(255, 193, 7, 0.2) !important; } .mwu-selected-caafde1 > td, .mwu-selected-caafde1:nth-of-type(odd) > td, .mwu-selected-caafde1:nth-of-type(even) > td { background-color: rgba(13, 110, 253, 0.15) !important; } } .mwu-name-caafde1 { display: flex; align-items: center; gap: 0.625rem; /* Flex items default to `min-width: auto`, which would let a long name overflow the cell instead of truncating. */ min-width: 0; & > :not(.mwu-fileName-caafde1, a) { flex-shrink: 0; } & > a { display: flex; align-items: center; gap: 0.625rem; min-width: 0; & > :not(.mwu-fileName-caafde1) { flex-shrink: 0; } } } .mwu-fileName-caafde1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mwu-secondaryInfo-caafde1 { color: var(--bs-secondary-color); font-size: 0.875em; } /* Give the Name column the space of the least useful columns first, so a narrow browser drops "Uploaded by" and "Created" before it truncates the file name. */ @container (width < 52rem) { .mwu-table-caafde1 :is(th, td):nth-child(4) { display: none; } .mwu-table-caafde1 :is(th, td):nth-child(3) { padding-inline-end: 0.25rem; } } @container (width < 40rem) { .mwu-table-caafde1 :is(th, td):nth-child(3) { display: none; } .mwu-table-caafde1 :is(th, td):nth-child(2) { padding-inline-end: 0.25rem; } } @keyframes deleteSlideOut { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-50px); } } @keyframes renameFlash { 0% { background-color: rgba(var(--bs-info-rgb), 0.3); } 100% { background-color: transparent; } } /* A touch device never hovers, so the hover-reveal above would hide the row menu outright; and the table can be wider than a phone viewport (see `min-width`) and scroll inside the wrapper, so the actions column has to stay pinned to the trailing edge to be reachable at all. Sticky is a no-op when nothing overflows, so a wide touch screen is unaffected. */ @media (hover: none) { .mwu-table-caafde1 { thead th:nth-child(5), tbody .mwu-actionsCell-caafde1 { position: sticky; inset-inline-end: 0; /* Above `.checkbox` (2) and the tree's `.stretched-link` overlay (1), which the pinned cell overlaps once the row has been scrolled under it. */ z-index: 3; /* A consumer's theme may set `--bs-table-bg: transparent`, leaving the cell see-through with only the striping overlay painted. */ background-color: var(--bs-body-bg); } tbody .mwu-actionsCell-caafde1 button { opacity: 1; } } } @keyframes raiseUploadCompleteIcon { 0% { top: 100%; } 100% { top: 50%; } } @keyframes uploadProcessingScannerEffect { 0% { top: -2.5ex; } 50% { top: calc(100% + 1.5ex); } 100% { top: -2.5ex; } } .mwu-filesDropZone-c028848 { width: 100%; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; .mwu-dropZone-c028848 { flex-grow: 1; width: 100%; display: flex; flex-direction: column; position: relative; border-radius: var(--bs-border-radius); transition: box-shadow 0.2s ease; isolation: isolate; &::before, &[data-paste-shortcut]::after { pointer-events: none; opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; } &::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( circle at top right, rgba(var(--bs-primary-rgb), 0.18), transparent 42% ), linear-gradient( 135deg, rgba(var(--bs-primary-rgb), 0.1), rgba(var(--bs-info-rgb), 0.06) ); transform: scale(0.985); z-index: -1; } &[data-paste-shortcut]::after { content: attr(data-paste-shortcut); position: absolute; top: 0.9rem; inset-inline-end: 1rem; max-width: calc(100% - 2rem); padding: 0.35rem 0.75rem; border-radius: 999px; background: rgba(var(--bs-body-color-rgb), 0.9); color: var(--bs-body-bg); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; white-space: nowrap; box-shadow: 0 0.5rem 1rem rgba(var(--bs-dark-rgb), 0.18); transform: translateY(-0.35rem); overflow: hidden; text-overflow: ellipsis; } > * { transition: transform 0.2s ease, filter 0.2s ease; } &[data-selected="true"] { &::before, &[data-paste-shortcut]::after { opacity: 1; transform: translateY(0); } } } .mwu-uploads-c028848 { --preview-container-width: 7em; display: grid; grid-template-columns: repeat( auto-fill, minmax(var(--preview-container-width), 1fr) ); gap: 2em; width: 100%; overflow: clip; &:has(.mwu-uploader-c028848) { margin-top: 1em; } .mwu-uploader-c028848 { display: flex; align-items: center; justify-content: center; position: relative; --transition-duration: 0.3s; .mwu-preview-c028848 { width: 100%; margin-top: 1.5em; img { max-width: 100%; max-height: 100%; object-fit: contain; } svg[role="graphics-symbol"] { width: 100%; height: 100%; } } .mwu-fileInfo-c028848 { position: absolute; top: 0; font-weight: bold; font-size: 66%; text-align: center; text-wrap: auto; } .progress { --bs-progress-height: 1.75em; --bs-progress-border-radius: calc( var(--bs-progress-height) / 2 ); position: absolute; top: 55%; width: 75%; transition: opacity var(--transition-duration) ease-in-out; } .mwu-uploadProgressFill-c028848 { width: 0%; } .mwu-statusMessage-c028848 { position: absolute; display: none; opacity: 0; transition: opacity var(--transition-duration) ease-in-out; } &.Queued, &.Pending, &.Processing, &.Completed, &.Cancelled, &.Error { .mwu-statusMessage-c028848 { display: block; opacity: 0.8; position: absolute; top: 50%; /* Centering idiom: pairs with the physical `translate(-50%, -50%)` below. */ /* ast-grep-ignore: prefer-logical-inset */ left: 50%; transform: translate(-50%, -50%); } .progress { opacity: 0; } } &.Processing, &.Completed, &.Cancelled { .mwu-statusMessage-c028848 { font-size: 300%; } .progress { opacity: 0; } .mwu-actionButtons-c028848 { display: none; } } &.Processing { overflow: visible; .mwu-preview-c028848 { position: relative; cursor: progress; svg[role="graphics-symbol"] { opacity: 0.5; } &::after { content: ""; position: absolute; inset-inline-start: 0; width: 100%; height: 1.5ex; background: var(--bs-primary); border-radius: 0.5ex; box-shadow: 0 0 1ex var(--bs-primary-text-emphasis), 0 0 4ex var(--bs-primary-text-emphasis), 0 0 8ex var(--bs-primary-text-emphasis); animation: uploadProcessingScannerEffect 6s linear infinite; pointer-events: none; } } .mwu-statusMessage-c028848 { display: none !important; } } &.Completed { .mwu-statusMessage-c028848 { color: var(--bs-success); z-index: 3; animation: raiseUploadCompleteIcon 0.3s ease-out forwards; } } &.Cancelled { .mwu-statusMessage-c028848 { color: var(--bs-warning); } } &.Error { .mwu-preview-c028848 { opacity: 0.5; } .mwu-statusMessage-c028848 { color: var(--bs-danger); font-size: 90%; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .mwu-actionButtons-c028848 { opacity: 1; } } .mwu-actionButtons-c028848 { position: absolute; top: 0; inset-inline-end: 0; z-index: 1; opacity: 0; transition: opacity var(--transition-duration) ease-in-out; display: flex; gap: 0.25em; } /* `:focus-within` covers keyboard users, who otherwise tab onto a control they cannot see. */ &:hover .mwu-actionButtons-c028848, &:focus-within .mwu-actionButtons-c028848 { opacity: 1; } /* Retry and Cancel are the only way to clear a stuck upload, and a touch device never hovers — leave them shown there. */ @media (hover: none) { .mwu-actionButtons-c028848 { opacity: 1; } } } } } .mwu-container-aaad542 { width: 100%; padding: 1.5rem; border: 2px dashed var(--bs-border-color); border-radius: var(--bs-border-radius); background: var(--bs-tertiary-bg); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; container-type: inline-size; container-name: files-drop-zone; transition: border-width 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; [data-selected="true"] & { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); } .mwu-backgroundIconContainer-aaad542 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; .mwu-backgroundIcon-aaad542 { width: clamp(5rem, 22cqi, 9rem); height: clamp(5rem, 22cqi, 9rem); opacity: 0.075; color: var(--bs-body-color); } } .mwu-textContainer-aaad542 { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; max-width: 34rem; .mwu-headline-aaad542 { color: var(--bs-secondary-color); font-size: 1rem; font-weight: 600; line-height: 1.45; text-wrap: balance; } .mwu-actions-aaad542 { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.75rem 1rem; color: var(--bs-secondary-color); .mwu-selected-aaad542 { display: none; [data-selected="true"] & { display: block; } } } } @container files-drop-zone (width <= 28rem) { .mwu-container-aaad542 { min-height: 10.5rem; padding-block: 2rem 1.25rem; } .mwu-headline-aaad542 { font-size: 0.95rem; } .mwu-actions-aaad542 { flex-direction: column; gap: 0.65rem; } } } @keyframes mantiqFocusHighlight { 0% { box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.95), 0 0 0.85rem 0.5rem rgba(var(--bs-primary-rgb), 0.6); background-color: rgba(var(--bs-primary-rgb), 0.18); } 100% { box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0), 0 0 0.85rem 0.8rem rgba(var(--bs-primary-rgb), 0); background-color: transparent; } } /* The focus target itself, plus any descendant opting in with `.mantiq-focus-emphasis`, pulse together so a deep link can call out both a region and the precise control inside it. */ .mantiq-focus-highlight, .mantiq-focus-highlight .mantiq-focus-emphasis { animation: mantiqFocusHighlight 0.85s ease-out 3; border-radius: var(--bs-border-radius, 0.375rem); position: relative; z-index: 1; } /* A 12-column grid whose breakpoints measure the row's own inline size instead of the viewport, for components that render at a width the viewport cannot predict — a modal body, a card, a split pane, a listing's main column. Three constraints a call site cannot see: - A `cq-col-*` with no `cq-row` ancestor renders full-width, always. A size query with no ancestor query container evaluates false; it does not fall back to the viewport the way a media query would. - `container-type` collapses a shrink-to-fit box to zero width, so a `cq-row` that is a flex-row item, an inline-block or a float needs `width: 100%` (or `flex: 1 1 auto`) to survive. As a block, flex-column item, grid item or table cell it is unaffected. - Gutters have no responsive tier. A container query never matches the container itself, only its descendants, and the gutter lives on the row — which is the container. Column and row-cols tiers work because their subject is a child. The tier blocks at the end must stay in ascending order: they share one specificity, so `cq-col-md-6 cq-col-xl-4` resolves to `xl` on source order alone. */ .cq-row { --cq-gutter-x: var(--space-6, 1.5rem); --cq-gutter-y: var(--space-6, 1.5rem); container-type: inline-size; display: flex; flex-wrap: wrap; column-gap: var(--cq-gutter-x); row-gap: var(--cq-gutter-y); } /* Columns are sized off `--cq-gutter-x` rather than laid out with padding and negative row margins. Bootstrap's model would make the row wider than its host by one gutter, so a threshold would fire early by an amount that changes with the gutter class. `min-width: 0` stops wide content (an SVG chart, a long table) flooring a column at min-content and pushing the row past 100%. */ .cq-row > * { flex: 0 0 auto; width: 100%; max-width: 100%; min-width: 0; } /* The step index follows Bootstrap's `g-*` scale, which diverges from the `--space-*` ladder from step 3 up (`cq-g-3` is 1rem, `--space-3` is 0.75rem). Markup ported class-for-class off Bootstrap keeps its gutter; the token names below look mismatched precisely because of that. */ /* `0px`, not `--space-0`: consumers declare that token unitless, and the column widths add the gutter to a percentage, which `calc()` rejects for a bare `0`. An invalid width there computes to `auto`, collapsing every column in the row to its content. */ .cq-g-0, .cq-gx-0 { --cq-gutter-x: 0px; } .cq-g-0, .cq-gy-0 { --cq-gutter-y: 0px; } .cq-g-1, .cq-gx-1 { --cq-gutter-x: var(--space-1, 0.25rem); } .cq-g-1, .cq-gy-1 { --cq-gutter-y: var(--space-1, 0.25rem); } .cq-g-2, .cq-gx-2 { --cq-gutter-x: var(--space-2, 0.5rem); } .cq-g-2, .cq-gy-2 { --cq-gutter-y: var(--space-2, 0.5rem); } .cq-g-3, .cq-gx-3 { --cq-gutter-x: var(--space-4, 1rem); } .cq-g-3, .cq-gy-3 { --cq-gutter-y: var(--space-4, 1rem); } .cq-g-4, .cq-gx-4 { --cq-gutter-x: var(--space-6, 1.5rem); } .cq-g-4, .cq-gy-4 { --cq-gutter-y: var(--space-6, 1.5rem); } .cq-g-5, .cq-gx-5 { --cq-gutter-x: var(--space-12, 3rem); } .cq-g-5, .cq-gy-5 { --cq-gutter-y: var(--space-12, 3rem); } .cq-row-cols-auto > * { flex: 0 0 auto; width: auto; } .cq-row-cols-1 > * { flex: 0 0 auto; width: calc(1 / 1 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-2 > * { flex: 0 0 auto; width: calc(1 / 2 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-3 > * { flex: 0 0 auto; width: calc(1 / 3 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-4 > * { flex: 0 0 auto; width: calc(1 / 4 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-5 > * { flex: 0 0 auto; width: calc(1 / 5 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-6 > * { flex: 0 0 auto; width: calc(1 / 6 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col { flex: 1 0 0%; width: auto; } .cq-col-auto { flex: 0 0 auto; width: auto; } .cq-col-1 { flex: 0 0 auto; width: calc(1 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-2 { flex: 0 0 auto; width: calc(2 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-3 { flex: 0 0 auto; width: calc(3 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-4 { flex: 0 0 auto; width: calc(4 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-5 { flex: 0 0 auto; width: calc(5 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-6 { flex: 0 0 auto; width: calc(6 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-7 { flex: 0 0 auto; width: calc(7 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-8 { flex: 0 0 auto; width: calc(8 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-9 { flex: 0 0 auto; width: calc(9 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-10 { flex: 0 0 auto; width: calc(10 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-11 { flex: 0 0 auto; width: calc(11 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-12 { flex: 0 0 auto; width: calc(12 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } @container (min-width: 576px) { .cq-row-cols-sm-auto > * { flex: 0 0 auto; width: auto; } .cq-row-cols-sm-1 > * { flex: 0 0 auto; width: calc(1 / 1 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-sm-2 > * { flex: 0 0 auto; width: calc(1 / 2 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-sm-3 > * { flex: 0 0 auto; width: calc(1 / 3 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-sm-4 > * { flex: 0 0 auto; width: calc(1 / 4 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-sm-5 > * { flex: 0 0 auto; width: calc(1 / 5 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-sm-6 > * { flex: 0 0 auto; width: calc(1 / 6 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-sm { flex: 1 0 0%; width: auto; } .cq-col-sm-auto { flex: 0 0 auto; width: auto; } .cq-col-sm-1 { flex: 0 0 auto; width: calc(1 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-sm-2 { flex: 0 0 auto; width: calc(2 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-sm-3 { flex: 0 0 auto; width: calc(3 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-sm-4 { flex: 0 0 auto; width: calc(4 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-sm-5 { flex: 0 0 auto; width: calc(5 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-sm-6 { flex: 0 0 auto; width: calc(6 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-sm-7 { flex: 0 0 auto; width: calc(7 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-sm-8 { flex: 0 0 auto; width: calc(8 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-sm-9 { flex: 0 0 auto; width: calc(9 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-sm-10 { flex: 0 0 auto; width: calc(10 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-sm-11 { flex: 0 0 auto; width: calc(11 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-sm-12 { flex: 0 0 auto; width: calc(12 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } } @container (min-width: 768px) { .cq-row-cols-md-auto > * { flex: 0 0 auto; width: auto; } .cq-row-cols-md-1 > * { flex: 0 0 auto; width: calc(1 / 1 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-md-2 > * { flex: 0 0 auto; width: calc(1 / 2 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-md-3 > * { flex: 0 0 auto; width: calc(1 / 3 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-md-4 > * { flex: 0 0 auto; width: calc(1 / 4 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-md-5 > * { flex: 0 0 auto; width: calc(1 / 5 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-md-6 > * { flex: 0 0 auto; width: calc(1 / 6 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-md { flex: 1 0 0%; width: auto; } .cq-col-md-auto { flex: 0 0 auto; width: auto; } .cq-col-md-1 { flex: 0 0 auto; width: calc(1 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-md-2 { flex: 0 0 auto; width: calc(2 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-md-3 { flex: 0 0 auto; width: calc(3 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-md-4 { flex: 0 0 auto; width: calc(4 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-md-5 { flex: 0 0 auto; width: calc(5 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-md-6 { flex: 0 0 auto; width: calc(6 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-md-7 { flex: 0 0 auto; width: calc(7 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-md-8 { flex: 0 0 auto; width: calc(8 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-md-9 { flex: 0 0 auto; width: calc(9 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-md-10 { flex: 0 0 auto; width: calc(10 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-md-11 { flex: 0 0 auto; width: calc(11 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-md-12 { flex: 0 0 auto; width: calc(12 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } } @container (min-width: 992px) { .cq-row-cols-lg-auto > * { flex: 0 0 auto; width: auto; } .cq-row-cols-lg-1 > * { flex: 0 0 auto; width: calc(1 / 1 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-lg-2 > * { flex: 0 0 auto; width: calc(1 / 2 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-lg-3 > * { flex: 0 0 auto; width: calc(1 / 3 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-lg-4 > * { flex: 0 0 auto; width: calc(1 / 4 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-lg-5 > * { flex: 0 0 auto; width: calc(1 / 5 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-lg-6 > * { flex: 0 0 auto; width: calc(1 / 6 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-lg { flex: 1 0 0%; width: auto; } .cq-col-lg-auto { flex: 0 0 auto; width: auto; } .cq-col-lg-1 { flex: 0 0 auto; width: calc(1 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-lg-2 { flex: 0 0 auto; width: calc(2 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-lg-3 { flex: 0 0 auto; width: calc(3 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-lg-4 { flex: 0 0 auto; width: calc(4 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-lg-5 { flex: 0 0 auto; width: calc(5 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-lg-6 { flex: 0 0 auto; width: calc(6 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-lg-7 { flex: 0 0 auto; width: calc(7 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-lg-8 { flex: 0 0 auto; width: calc(8 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-lg-9 { flex: 0 0 auto; width: calc(9 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-lg-10 { flex: 0 0 auto; width: calc(10 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-lg-11 { flex: 0 0 auto; width: calc(11 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-lg-12 { flex: 0 0 auto; width: calc(12 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } } @container (min-width: 1200px) { .cq-row-cols-xl-auto > * { flex: 0 0 auto; width: auto; } .cq-row-cols-xl-1 > * { flex: 0 0 auto; width: calc(1 / 1 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-xl-2 > * { flex: 0 0 auto; width: calc(1 / 2 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-xl-3 > * { flex: 0 0 auto; width: calc(1 / 3 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-xl-4 > * { flex: 0 0 auto; width: calc(1 / 4 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-xl-5 > * { flex: 0 0 auto; width: calc(1 / 5 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-xl-6 > * { flex: 0 0 auto; width: calc(1 / 6 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-xl { flex: 1 0 0%; width: auto; } .cq-col-xl-auto { flex: 0 0 auto; width: auto; } .cq-col-xl-1 { flex: 0 0 auto; width: calc(1 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-xl-2 { flex: 0 0 auto; width: calc(2 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-xl-3 { flex: 0 0 auto; width: calc(3 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-xl-4 { flex: 0 0 auto; width: calc(4 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-xl-5 { flex: 0 0 auto; width: calc(5 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-xl-6 { flex: 0 0 auto; width: calc(6 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-xl-7 { flex: 0 0 auto; width: calc(7 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-xl-8 { flex: 0 0 auto; width: calc(8 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-xl-9 { flex: 0 0 auto; width: calc(9 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-xl-10 { flex: 0 0 auto; width: calc(10 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-xl-11 { flex: 0 0 auto; width: calc(11 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-xl-12 { flex: 0 0 auto; width: calc(12 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } } @container (min-width: 1400px) { .cq-row-cols-xxl-auto > * { flex: 0 0 auto; width: auto; } .cq-row-cols-xxl-1 > * { flex: 0 0 auto; width: calc(1 / 1 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-xxl-2 > * { flex: 0 0 auto; width: calc(1 / 2 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-xxl-3 > * { flex: 0 0 auto; width: calc(1 / 3 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-xxl-4 > * { flex: 0 0 auto; width: calc(1 / 4 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-xxl-5 > * { flex: 0 0 auto; width: calc(1 / 5 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-row-cols-xxl-6 > * { flex: 0 0 auto; width: calc(1 / 6 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-xxl { flex: 1 0 0%; width: auto; } .cq-col-xxl-auto { flex: 0 0 auto; width: auto; } .cq-col-xxl-1 { flex: 0 0 auto; width: calc(1 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-xxl-2 { flex: 0 0 auto; width: calc(2 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-xxl-3 { flex: 0 0 auto; width: calc(3 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-xxl-4 { flex: 0 0 auto; width: calc(4 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-xxl-5 { flex: 0 0 auto; width: calc(5 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-xxl-6 { flex: 0 0 auto; width: calc(6 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-xxl-7 { flex: 0 0 auto; width: calc(7 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-xxl-8 { flex: 0 0 auto; width: calc(8 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-xxl-9 { flex: 0 0 auto; width: calc(9 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-xxl-10 { flex: 0 0 auto; width: calc(10 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-xxl-11 { flex: 0 0 auto; width: calc(11 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } .cq-col-xxl-12 { flex: 0 0 auto; width: calc(12 / 12 * (100% + var(--cq-gutter-x)) - var(--cq-gutter-x)); } } .mwu-container-211bdca { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background-color: var(--bs-body-bg); display: flex; flex-direction: column; overflow: hidden; } .mwu-headerBar-211bdca { display: flex; align-items: center; justify-content: space-between; padding: 0.375rem 0.75rem; background-color: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); } .mwu-editorArea-211bdca { display: flex; flex-grow: 1; position: relative; overflow: hidden; min-height: 18em; max-height: 70vh; } .mwu-gutter-211bdca { user-select: none; background-color: var(--bs-tertiary-bg); border-inline-end: 1px solid var(--bs-border-color); padding: 0.375rem 0.25rem 0.375rem 0.5rem; overflow-y: hidden; overflow-x: hidden; min-width: 3.5rem; font-size: 0.8125rem; line-height: 1.55; text-align: end; font-family: var(--bs-font-monospace); } .mwu-gutterLine-211bdca { height: 1.55em; line-height: 1.55em; display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem; } .mwu-lineNum-211bdca { color: var(--bs-secondary-color); font-size: 0.75rem; } .mwu-foldToggle-211bdca { background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: var(--bs-secondary-color); display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; font-size: 0.65rem; line-height: 1; } .mwu-foldToggle-211bdca:hover { color: var(--bs-primary); } /* Holds the fold toggle's width on lines that open no region, so the line numbers stay on one column whether or not a line is foldable. */ .mwu-foldPlaceholder-211bdca { display: inline-block; width: 1rem; } .mwu-editor-211bdca { /* Standard code editor surface: pre-formatted with horizontal scroll */ white-space: pre; overflow-x: auto; overflow-y: auto; flex-grow: 1; min-height: 18em; max-height: 70vh; font-size: 0.8125rem; line-height: 1.55; tab-size: 4; padding: 0.375rem 0.75rem; border: none; outline: none; background-color: transparent; font-family: var(--bs-font-monospace); .he-line { height: 1.55em; min-height: 1.55em; line-height: 1.55em; } .he-line.he-line-folded { display: none !important; } /* Syntax colours. The Bootstrap palette vars are stable hexes that read acceptably on both light and dark themes. */ .he-text { color: var(--bs-body-color); } .he-punct { color: var(--bs-secondary-color); } .he-tag { color: var(--bs-blue, #0d6efd); font-weight: 600; } .he-attr { color: var(--bs-purple, #6f42c1); } .he-string { color: var(--bs-green, #198754); } .he-comment { color: var(--bs-secondary-color); font-style: italic; } .he-placeholder { color: var(--bs-orange, #fd7e14); font-weight: 700; background: var(--bs-warning-bg-subtle); border-radius: var(--bs-border-radius-sm); padding-inline: 0.1em; } .he-cid { color: var(--bs-teal, #20c997); font-weight: 700; } .he-error { color: var(--bs-danger, #dc3545); text-decoration: underline wavy var(--bs-danger, #dc3545); background-color: var(--bs-danger-bg-subtle, rgba(220, 53, 69, 0.12)); border-radius: var(--bs-border-radius-sm); } } /* Character Spinner */ @keyframes characterSpinnerRotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } .mwu-characterSpinner-a4874d2 { display: inline-block; animation: characterSpinnerRotation 2s infinite linear; } /* Text Skeleton */ .mwu-textPlaceholder-a4874d2 { display: inline-block; width: 8rem; max-width: 100%; height: 1em; vertical-align: middle; } /* Card Skeleton */ .mwu-cardSkeleton-a4874d2 { display: flex; flex-direction: column; gap: var(--space-2, 0.5rem); /* Widths are index-parallel with the spans emitted for CardSkeleton. */ & > span:nth-child(1) { width: 40%; height: 1.25em; margin-bottom: var(--space-1, 0.25rem); } & > span:nth-child(2) { width: 100%; height: 1em; } & > span:nth-child(3) { width: 85%; height: 1em; } & > span:nth-child(4) { width: 60%; height: 1em; } } /* The.Exchange Logo */ @keyframes theExchangeLogoCometOrbit { to { stroke-dashoffset: -100; } } /* The peak sits at 77%: the comet head — the dash end, at offset + 25 on the pathLength="100" outline — crosses the square's corner vertex, which lies at 1.97% of the silhouette's perimeter. Keep both animations on the same duration or the strike drifts out of phase. */ @keyframes theExchangeLogoDotBeat { 0%, 60% { opacity: 0.35; transform: scale(0.92); } 77% { opacity: 1; transform: scale(1.04); } 92%, 100% { opacity: 0.35; transform: scale(0.92); } } .mwu-theExchangeLogo-a4874d2 { /* The exchange pages re-scope --bs-body-color per venue (.exc-loader), so the silhouette follows the page accent; other hosts fall back to their body color. The trace gradient stays brand-fixed inside the SVG defs. */ --the-exchange-loader-ink: var(--bs-body-color, currentColor); --the-exchange-loader-accent: var(--exc-purple, #763be9); container-type: inline-size; display: grid; place-items: center; inline-size: 6rem; min-inline-size: 24px; margin-inline: auto; pointer-events: none; } .mwu-theExchangeLogoSvg-a4874d2 { display: block; inline-size: 100%; block-size: auto; overflow: visible; & > polygon { fill: var(--the-exchange-loader-ink); fill-opacity: 0.14; stroke-width: 13; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 25 75; animation: theExchangeLogoCometOrbit 2200ms linear infinite; } & > rect { fill: var(--the-exchange-loader-accent); transform-box: fill-box; transform-origin: center; animation: theExchangeLogoDotBeat 2200ms linear infinite; } } /* Below ~64px the 13-unit trace renders sub-pixel: drop it and let the square carry the beat over a stronger fill. */ @container (max-inline-size: 64px) { .mwu-theExchangeLogoSvg-a4874d2 > polygon { stroke: none; animation: none; fill-opacity: 0.28; } } @media (prefers-reduced-motion: reduce) { .mwu-theExchangeLogoSvg-a4874d2 > polygon { animation: none; stroke: none; fill-opacity: 1; } .mwu-theExchangeLogoSvg-a4874d2 > rect { animation: none; opacity: 1; transform: none; } } /* Horizontal Line */ @keyframes horizontalLineSlider { 0% { inset-inline-end: 80%; inset-inline-start: 1%; } 5% { inset-inline-start: 1%; } 50% { inset-inline-end: 1%; inset-inline-start: 80%; } 55% { inset-inline-end: 1%; } 100% { inset-inline-end: 80%; inset-inline-start: 1%; } } .mwu-horizontalLine-a4874d2 { width: 25%; height: 6px; background-color: var(--bs-secondary); position: relative; border-radius: 3px; box-sizing: border-box; overflow: hidden; margin-inline: auto; margin-top: var(--space-2, 0.5rem); margin-bottom: var(--space-2, 0.5rem); &::after { border-radius: 3px; content: ""; position: absolute; background-color: var(--bs-light); top: 1px; bottom: 1px; animation: horizontalLineSlider 2s linear infinite; } } /* Pulsing Grid */ @keyframes pulsingGridAnimation { 0% { opacity: 0.8; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.45); } 100% { opacity: 0.8; transform: scale(1); } } .mwu-pulsingGrid-a4874d2 { display: block; font-size: 0; max-width: 108px; width: 100%; margin: auto; aspect-ratio: 1; &, & > div { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } & > div { display: inline-block; float: none; background-color: var(--bs-body-color); border: none; width: 15%; /* 16px / 108px */ height: 15%; margin: 9%; /* 10px / 108px */ border-radius: 100%; animation-name: pulsingGridAnimation; animation-iteration-count: infinite; } & > div:nth-child(1) { animation-duration: 0.65s; animation-delay: 0.03s; } & > div:nth-child(2) { animation-duration: 1.02s; animation-delay: 0.09s; } & > div:nth-child(3) { animation-duration: 1.06s; animation-delay: -0.69s; } & > div:nth-child(4) { animation-duration: 1.5s; animation-delay: -0.41s; } & > div:nth-child(5) { animation-duration: 1.6s; animation-delay: 0.04s; } & > div:nth-child(6) { animation-duration: 0.84s; animation-delay: 0.07s; } & > div:nth-child(7) { animation-duration: 0.68s; animation-delay: -0.66s; } & > div:nth-child(8) { animation-duration: 0.93s; animation-delay: -0.76s; } & > div:nth-child(9) { animation-duration: 1.24s; animation-delay: -0.76s; } } /* Orbit Spinner */ @keyframes orbitSpinner-orbit-one-animation { 0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); } 100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); } } @keyframes orbitSpinner-orbit-two-animation { 0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); } 100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); } } @keyframes orbitSpinner-orbit-three-animation { 0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); } 100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); } } .mwu-orbitSpinner-a4874d2 { display: flex; justify-content: center; align-content: center; pointer-events: none; transition-property: opacity; transition-duration: 0.2s; transition-timing-function: ease-out; & .mwu-orbitSpinnerLoader-a4874d2, & .mwu-orbitSpinnerLoader-a4874d2 * { box-sizing: border-box; } & .mwu-orbitSpinnerLoader-a4874d2 { display: block; margin: auto; position: relative; width: 100px; height: 100px; border-radius: 50%; /* No `perspective` on this box: Gecko rasterizes content below a perspective at unity scale and the compositor magnifies the bitmap (Bugzilla 1806281), so the animated 6px borders render thicker and blurred. The tilts alone carry the depth cue. */ & div { position: absolute; box-sizing: border-box; width: 100%; height: 100%; border-radius: 50%; } /* The three orbits are one ring seen at three tilts, spun by physical rotateX/Y/Z. Their edges and offsets are rotational geometry, not reading direction: mirroring a single arc under RTL would break the ring while its siblings (border-top/-bottom) stayed put. */ & div:nth-child(1) { /* ast-grep-ignore: prefer-logical-inset */ left: 0; top: 0; animation: orbitSpinner-orbit-one-animation 1200ms linear infinite; border-bottom: 6px solid var(--bs-body-color); } & div:nth-child(2) { /* ast-grep-ignore: prefer-logical-inset */ right: 0; top: 0; animation: orbitSpinner-orbit-two-animation 1200ms linear infinite; /* ast-grep-ignore: prefer-logical-inline-properties */ border-right: 6px solid var(--bs-body-color); } & div:nth-child(3) { /* ast-grep-ignore: prefer-logical-inset */ right: 0; bottom: 0; animation: orbitSpinner-orbit-three-animation 1200ms linear infinite; border-top: 6px solid var(--bs-body-color); } } } @media (prefers-reduced-motion: reduce) { /* Matches the specificity of the `:nth-child` rules the animations are declared at, so each override wins on order. Each pose is the first frame of the orbit it stops. */ .mwu-orbitSpinner-a4874d2 .mwu-orbitSpinnerLoader-a4874d2 div:nth-child(1) { animation: none; transform: rotateX(35deg) rotateY(-45deg); } .mwu-orbitSpinner-a4874d2 .mwu-orbitSpinnerLoader-a4874d2 div:nth-child(2) { animation: none; transform: rotateX(50deg) rotateY(10deg); } .mwu-orbitSpinner-a4874d2 .mwu-orbitSpinnerLoader-a4874d2 div:nth-child(3) { animation: none; transform: rotateX(35deg) rotateY(55deg); } } /* Downloading */ /* One animation for all three drops, staggered by animation-delay. The delays are 13% and 26% of the duration: change the duration and they must be rescaled with it, or the drops stop being evenly spaced. */ @keyframes downloadingLoaderRain { 0% { opacity: 0; transform: translateY(-2px); } 22%, 62% { opacity: 1; } 88%, 100% { opacity: 0; transform: translateY(11px); } } .mwu-downloadingLoader-a4874d2 { --downloading-loader-ink: var(--bs-body-color, currentColor); container-type: inline-size; display: grid; place-items: center; inline-size: 6rem; min-inline-size: 24px; margin-inline: auto; pointer-events: none; } .mwu-downloadingLoaderSvg-a4874d2 { display: block; inline-size: 100%; block-size: auto; fill: none; stroke: var(--downloading-loader-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; & > path { opacity: 0.5; } & > circle { fill: var(--downloading-loader-ink); stroke: none; animation: downloadingLoaderRain 1400ms ease-in infinite; } & > circle:nth-of-type(2) { animation-delay: 182ms; } & > circle:nth-of-type(3) { animation-delay: 364ms; } } /* Below ~64px the 2.2-unit outline renders sub-pixel and the cloud stops reading as a cloud: thicken every stroke rather than dropping detail. */ @container (max-inline-size: 64px) { .mwu-downloadingLoaderSvg-a4874d2 { stroke-width: 3.4; } } @media (prefers-reduced-motion: reduce) { .mwu-downloadingLoaderSvg-a4874d2 > circle { animation: none; opacity: 1; transform: translateY(4px); } } /* Computation Figures */ /* The seven computation loaders share this container and base figure; each adds its own class for geometry and motion. Their SVG bodies address parts by element and :nth-of-type, never by class: stylance hashes class names, so a class written here would not match the raw markup they emit. */ .mwu-computeLoader-a4874d2 { --compute-loader-ink: var(--bs-body-color, currentColor); container-type: inline-size; display: grid; place-items: center; inline-size: 6rem; min-inline-size: 24px; margin-inline: auto; pointer-events: none; } .mwu-computeLoaderSvg-a4874d2 { display: block; inline-size: 100%; block-size: auto; overflow: visible; fill: none; stroke: var(--compute-loader-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* Matrix Sweep */ /* The two bands travel one cell per step across a 3x3 grid. Their durations are deliberately unrelated: matched periods walk the intersection down the diagonal and leave six cells never visited. */ @keyframes matrixSweepRow { 0%, 28% { transform: translateY(0); } 33%, 61% { transform: translateY(9.5px); } 66%, 94% { transform: translateY(19px); } 100% { transform: translateY(0); } } @keyframes matrixSweepColumn { 0%, 28% { transform: translateX(0); } 33%, 61% { transform: translateX(9.5px); } 66%, 94% { transform: translateX(19px); } 100% { transform: translateX(0); } } .mwu-matrixSweepSvg-a4874d2 { & > rect:nth-of-type(1), & > rect:nth-of-type(2) { fill: var(--compute-loader-ink); stroke: none; opacity: 0.18; } & > rect:nth-of-type(1) { animation: matrixSweepRow 2400ms cubic-bezier(0.4, 0, 0.2, 1) infinite; } & > rect:nth-of-type(2) { animation: matrixSweepColumn 900ms cubic-bezier(0.4, 0, 0.2, 1) infinite; } & > path { opacity: 0.5; } } @container (max-inline-size: 64px) { .mwu-matrixSweepSvg-a4874d2 { stroke-width: 3; & > path { display: none; } } } @media (prefers-reduced-motion: reduce) { .mwu-matrixSweepSvg-a4874d2 > rect:nth-of-type(1), .mwu-matrixSweepSvg-a4874d2 > rect:nth-of-type(2) { animation: none; } } /* Sigma Trace */ @keyframes sigmaTraceOrbit { to { stroke-dashoffset: -100; } } @keyframes sigmaTraceTally { 0%, 10% { opacity: 0.15; } 30%, 80% { opacity: 1; } 92%, 100% { opacity: 0.15; } } .mwu-sigmaTraceSvg-a4874d2 { stroke-width: 3; & > path:nth-of-type(1) { opacity: 0.22; } & > path:nth-of-type(2) { stroke-dasharray: 22 78; animation: sigmaTraceOrbit 2000ms linear infinite; } & > circle { fill: var(--compute-loader-ink); stroke: none; animation: sigmaTraceTally 2000ms ease-in-out infinite; } & > circle:nth-of-type(2) { animation-delay: 220ms; } & > circle:nth-of-type(3) { animation-delay: 440ms; } } /* Below ~64px the dash renders sub-pixel: drop the trace and let the solid outline carry the mark. */ @container (max-inline-size: 64px) { .mwu-sigmaTraceSvg-a4874d2 { stroke-width: 4; & > path:nth-of-type(1) { opacity: 1; } & > path:nth-of-type(2) { display: none; } } } @media (prefers-reduced-motion: reduce) { .mwu-sigmaTraceSvg-a4874d2 > path:nth-of-type(1) { opacity: 1; } .mwu-sigmaTraceSvg-a4874d2 > path:nth-of-type(2) { display: none; } .mwu-sigmaTraceSvg-a4874d2 > circle { animation: none; opacity: 1; } } /* Seven Segment Countdown */ /* Ten phases of 10%, counting 9 down to 0. Each segment is one keyframe set over that same grid, so all seven share one duration: change it in one place only, or the digit falls apart mid-count. The paths are emitted in the order a, f, b, g, e, c, d. */ @keyframes sevenSegmentA { 0%, 49.9% { opacity: 1; } 50%, 59.9% { opacity: 0.12; } 60%, 79.9% { opacity: 1; } 80%, 89.9% { opacity: 0.12; } 90%, 100% { opacity: 1; } } @keyframes sevenSegmentF { 0%, 19.9% { opacity: 1; } 20%, 29.9% { opacity: 0.12; } 30%, 59.9% { opacity: 1; } 60%, 89.9% { opacity: 0.12; } 90%, 100% { opacity: 1; } } @keyframes sevenSegmentB { 0%, 29.9% { opacity: 1; } 30%, 49.9% { opacity: 0.12; } 50%, 100% { opacity: 1; } } @keyframes sevenSegmentG { 0%, 19.9% { opacity: 1; } 20%, 29.9% { opacity: 0.12; } 30%, 79.9% { opacity: 1; } 80%, 100% { opacity: 0.12; } } @keyframes sevenSegmentE { 0%, 9.9% { opacity: 0.12; } 10%, 19.9% { opacity: 1; } 20%, 29.9% { opacity: 0.12; } 30%, 39.9% { opacity: 1; } 40%, 69.9% { opacity: 0.12; } 70%, 79.9% { opacity: 1; } 80%, 89.9% { opacity: 0.12; } 90%, 100% { opacity: 1; } } @keyframes sevenSegmentC { 0%, 69.9% { opacity: 1; } 70%, 79.9% { opacity: 0.12; } 80%, 100% { opacity: 1; } } @keyframes sevenSegmentD { 0%, 19.9% { opacity: 1; } 20%, 29.9% { opacity: 0.12; } 30%, 49.9% { opacity: 1; } 50%, 59.9% { opacity: 0.12; } 60%, 79.9% { opacity: 1; } 80%, 89.9% { opacity: 0.12; } 90%, 100% { opacity: 1; } } .mwu-sevenSegmentSvg-a4874d2 { stroke-width: 3.4; & > path { animation-duration: 4000ms; animation-timing-function: steps(1, end); animation-iteration-count: infinite; } & > path:nth-of-type(1) { animation-name: sevenSegmentA; } & > path:nth-of-type(2) { animation-name: sevenSegmentF; } & > path:nth-of-type(3) { animation-name: sevenSegmentB; } & > path:nth-of-type(4) { animation-name: sevenSegmentG; } & > path:nth-of-type(5) { animation-name: sevenSegmentE; } & > path:nth-of-type(6) { animation-name: sevenSegmentC; } & > path:nth-of-type(7) { animation-name: sevenSegmentD; } } /* A single digit stays legible at 24px, so this figure needs no container query: the stroke alone carries it. */ @media (prefers-reduced-motion: reduce) { .mwu-sevenSegmentSvg-a4874d2 > path { animation: none; opacity: 1; } } /* Curve Plot */ @keyframes curvePlotDraw { 0% { stroke-dashoffset: 100; } 68%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } } .mwu-curvePlotSvg-a4874d2 { & > path:nth-of-type(1) { opacity: 0.5; } & > path:nth-of-type(2) { stroke-width: 2.6; opacity: 0.18; } & > path:nth-of-type(3) { stroke-width: 2.6; stroke-dasharray: 100; animation: curvePlotDraw 2600ms ease-in-out infinite; } } @container (max-inline-size: 64px) { .mwu-curvePlotSvg-a4874d2 { & > path:nth-of-type(1) { display: none; } & > path:nth-of-type(2), & > path:nth-of-type(3) { stroke-width: 4; } } } @media (prefers-reduced-motion: reduce) { .mwu-curvePlotSvg-a4874d2 > path:nth-of-type(3) { animation: none; stroke-dashoffset: 0; } } /* Odometer Drums */ /* The bar column is periodic at 6 units and overruns its window at both ends, so a 6-unit travel loops with no visible seam. Change one and the other must change with it. */ @keyframes odometerDrumRoll { to { transform: translateY(-6px); } } .mwu-odometerDrumsSvg-a4874d2 { & > g > g { animation: odometerDrumRoll linear infinite; } & > g > g rect { fill: var(--compute-loader-ink); stroke: none; } & > g:nth-of-type(1) > g { animation-duration: 2800ms; } & > g:nth-of-type(2) > g { animation-duration: 1400ms; } & > g:nth-of-type(3) > g { animation-duration: 700ms; } } /* Three windows of nine units each go muddy below ~64px: keep the fastest drum, which is the one that reads as movement. */ @container (max-inline-size: 64px) { .mwu-odometerDrumsSvg-a4874d2 { stroke-width: 3; & > g:nth-of-type(1), & > g:nth-of-type(2), & > rect:nth-of-type(1), & > rect:nth-of-type(2) { display: none; } } } @media (prefers-reduced-motion: reduce) { .mwu-odometerDrumsSvg-a4874d2 > g > g { animation: none; } } /* Punch Tape */ /* Three identical hole blocks, travelling exactly one block width, so the clipped window is never starved and the loop has no seam. */ @keyframes punchTapeRun { to { transform: translateX(-24px); } } .mwu-punchTapeSvg-a4874d2 { & > path:nth-of-type(1) { opacity: 0.55; } & > g > g { animation: punchTapeRun 2200ms linear infinite; } & > g > g circle { fill: var(--compute-loader-ink); stroke: none; } & > g > g:nth-of-type(2) circle { opacity: 0.55; } & > path:nth-of-type(2) { stroke-width: 2.6; } } /* The sprocket holes are under a unit across and the reader head is a hairline: below ~64px both are noise, and the data holes alone read as tape. */ @container (max-inline-size: 64px) { .mwu-punchTapeSvg-a4874d2 { stroke-width: 3; & > g > g:nth-of-type(2), & > path:nth-of-type(2) { display: none; } } } @media (prefers-reduced-motion: reduce) { .mwu-punchTapeSvg-a4874d2 > g > g { animation: none; } } /* CPU Chip Pulse */ @keyframes cpuChipTrace { to { stroke-dashoffset: -100; } } @keyframes cpuChipThink { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } } .mwu-cpuChipSvg-a4874d2 { & > path:nth-of-type(1) { opacity: 0.45; } & > path:nth-of-type(2) { opacity: 0.25; } & > path:nth-of-type(3) { stroke-dasharray: 20 80; animation: cpuChipTrace 2000ms linear infinite; } & > rect { fill: var(--compute-loader-ink); stroke: none; animation: cpuChipThink 2000ms ease-in-out infinite; } } @container (max-inline-size: 64px) { .mwu-cpuChipSvg-a4874d2 { stroke-width: 3; & > path:nth-of-type(1), & > path:nth-of-type(3) { display: none; } & > path:nth-of-type(2) { opacity: 1; } } } @media (prefers-reduced-motion: reduce) { .mwu-cpuChipSvg-a4874d2 > path:nth-of-type(3) { display: none; } .mwu-cpuChipSvg-a4874d2 > path:nth-of-type(2) { opacity: 1; } .mwu-cpuChipSvg-a4874d2 > rect { animation: none; opacity: 1; } } /* Typing Dots */ @keyframes typingDotBeat { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-0.15rem); } } .mwu-typingDots-a4874d2 { display: inline-flex; gap: 0.3rem; & > span { width: 0.45rem; height: 0.45rem; border-radius: 100%; background-color: var(--bs-secondary-color); animation: typingDotBeat 1.2s infinite ease-in-out; } & > span:nth-child(2) { animation-delay: 0.2s; } & > span:nth-child(3) { animation-delay: 0.4s; } } /* Rendering Canvas */ /* Registered so the keyframes interpolate them; an unregistered custom property snaps between its keyframes. Registration is page-global, hence the loader-specific names. */ @property --rendering-loader-a-x1 { syntax: ""; inherits: false; initial-value: 0%; } @property --rendering-loader-a-x2 { syntax: ""; inherits: false; initial-value: 0%; } @property --rendering-loader-a-y1 { syntax: ""; inherits: false; initial-value: 0%; } @property --rendering-loader-a-y2 { syntax: ""; inherits: false; initial-value: 0%; } @property --rendering-loader-a-w { syntax: ""; inherits: false; initial-value: 72%; } @property --rendering-loader-a-h { syntax: ""; inherits: false; initial-value: 72%; } @property --rendering-loader-b-x1 { syntax: ""; inherits: false; initial-value: 0%; } @property --rendering-loader-b-x2 { syntax: ""; inherits: false; initial-value: 0%; } @property --rendering-loader-b-y1 { syntax: ""; inherits: false; initial-value: 0%; } @property --rendering-loader-b-y2 { syntax: ""; inherits: false; initial-value: 0%; } @property --rendering-loader-b-w { syntax: ""; inherits: false; initial-value: 72%; } @property --rendering-loader-b-h { syntax: ""; inherits: false; initial-value: 72%; } /* Inherited: the wrapper animates it once and all three clouds read it. The initial value is the grown size, so a stopped animation shows the full cloud rather than a small one. */ @property --rendering-loader-grow { syntax: ""; inherits: true; initial-value: 1; } @keyframes renderingCloudAX1 { from { --rendering-loader-a-x1: -70%; } to { --rendering-loader-a-x1: 70%; } } @keyframes renderingCloudAX2 { from { --rendering-loader-a-x2: -66%; } to { --rendering-loader-a-x2: 66%; } } @keyframes renderingCloudAY1 { from { --rendering-loader-a-y1: -70%; } to { --rendering-loader-a-y1: 70%; } } @keyframes renderingCloudAY2 { from { --rendering-loader-a-y2: -66%; } to { --rendering-loader-a-y2: 66%; } } @keyframes renderingCloudASize { from { --rendering-loader-a-w: 78%; --rendering-loader-a-h: 66%; } to { --rendering-loader-a-w: 66%; --rendering-loader-a-h: 78%; } } @keyframes renderingCloudBX1 { from { --rendering-loader-b-x1: 70%; } to { --rendering-loader-b-x1: -70%; } } @keyframes renderingCloudBX2 { from { --rendering-loader-b-x2: 66%; } to { --rendering-loader-b-x2: -66%; } } @keyframes renderingCloudBY1 { from { --rendering-loader-b-y1: 70%; } to { --rendering-loader-b-y1: -70%; } } @keyframes renderingCloudBY2 { from { --rendering-loader-b-y2: 66%; } to { --rendering-loader-b-y2: -66%; } } @keyframes renderingCloudBSize { from { --rendering-loader-b-w: 67%; --rendering-loader-b-h: 77%; } to { --rendering-loader-b-w: 77%; --rendering-loader-b-h: 67%; } } @keyframes renderingCloudBreathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } @keyframes renderingCloudGrow { from { --rendering-loader-grow: 0.72; } to { --rendering-loader-grow: 1; } } .mwu-renderingLoader-a4874d2 { --rendering-loader-ink: var(--bs-body-color, currentColor); position: relative; inline-size: 100%; max-inline-size: 20rem; aspect-ratio: 4 / 3; margin-inline: auto; overflow: hidden; border-radius: var(--bs-border-radius-xl, 1rem); background-color: var(--bs-tertiary-bg); pointer-events: none; animation: renderingCloudGrow 30s ease-out forwards; /* Layers are index-parallel with the spans emitted for HalftoneCloud: the base grid, then three clouds of finer to coarser dots. */ & > span:nth-child(-n + 4) { position: absolute; inset: 2px; background-size: 11px 11px; background-repeat: space; } & > span:nth-child(1) { background-image: radial-gradient( circle, var(--bs-secondary-color) 0.7px, transparent 1.3px ); opacity: 0.22; } & > span:nth-child(2), & > span:nth-child(3), & > span:nth-child(4) { mask-repeat: no-repeat; mask-position: calc(50% + var(--rendering-loader-a-x1) + var(--rendering-loader-a-x2)) calc(50% + var(--rendering-loader-a-y1) + var(--rendering-loader-a-y2)), calc(50% + var(--rendering-loader-b-x1) + var(--rendering-loader-b-x2)) calc(50% + var(--rendering-loader-b-y1) + var(--rendering-loader-b-y2)); mask-size: calc(var(--rendering-loader-a-w) * var(--rendering-loader-grow)) calc(var(--rendering-loader-a-h) * var(--rendering-loader-grow)), calc(var(--rendering-loader-b-w) * var(--rendering-loader-grow)) calc(var(--rendering-loader-b-h) * var(--rendering-loader-grow)); animation: renderingCloudAX1 8.1s ease-in-out infinite alternate, renderingCloudAX2 13.1s ease-in-out infinite alternate, renderingCloudAY1 11.7s ease-in-out infinite alternate, renderingCloudAY2 6.7s ease-in-out infinite alternate, renderingCloudASize 6.1s ease-in-out infinite alternate, renderingCloudBX1 15.1s ease-in-out infinite alternate, renderingCloudBX2 9.7s ease-in-out infinite alternate, renderingCloudBY1 10.9s ease-in-out infinite alternate, renderingCloudBY2 14.3s ease-in-out infinite alternate, renderingCloudBSize 8.9s ease-in-out infinite alternate, renderingCloudBreathe 1.9s cubic-bezier(0.66, 0, 0.34, 1) infinite; } & > span:nth-child(2) { background-image: radial-gradient( circle, var(--rendering-loader-ink) 1.1px, transparent 1.6px ); mask-image: radial-gradient(ellipse at center, #000 0%, transparent 70%), radial-gradient(ellipse at center, #000 0%, transparent 70%); } & > span:nth-child(3) { background-image: radial-gradient( circle, var(--rendering-loader-ink) 1.7px, transparent 2.2px ); mask-image: radial-gradient(ellipse at center, #000 0%, transparent 50%), radial-gradient(ellipse at center, #000 0%, transparent 50%); } & > span:nth-child(4) { background-image: radial-gradient( circle, var(--rendering-loader-ink) 2.4px, transparent 2.9px ); mask-image: radial-gradient(ellipse at center, #000 0%, transparent 30%), radial-gradient(ellipse at center, #000 0%, transparent 30%); } } @media (prefers-reduced-motion: reduce) { .mwu-renderingLoader-a4874d2 { animation: none; & > span:nth-child(2), & > span:nth-child(3), & > span:nth-child(4) { animation: none; opacity: 0.7; } } } .mwu-mapContainer-9e9b456 { position: relative; overflow: hidden; /* A query container so the on-map controls can respond to the MAP's own width (not the viewport): a narrow map panel drops the top-right controls to a row below the search bar. `inline-size` only — block-size containment would feed the canvas height loop the note below guards against. */ container-type: inline-size; /* Contain the settings panel (and its backdrop — Bootstrap appends it to the offcanvas' parent) within the map instead of the viewport: Bootstrap's `position: fixed` would slide it over the whole page. */ .offcanvas { position: absolute !important; top: 0 !important; bottom: 0 !important; height: auto !important; max-height: 100% !important; } .offcanvas-end { inset-inline-end: 0 !important; } .offcanvas-backdrop { position: absolute !important; inset: 0 !important; } /* Wheel containment (`contain_map_wheel`) exempts scrollable overlay regions from `preventDefault`; containing their overscroll keeps an exempted scroll from chaining to the page at its end. Scoped to the overlays that actually scroll — never `*`: `overscroll-behavior` makes ANY scroll container a chain boundary, and `overflow: hidden` creates one that can't scroll, so a universal rule lets any clip wrapper (a themed `.list-group` between the settings tiles and the panel body, say) swallow the wheel for everything under it. `.results` in cesium_search_bar.css carries its own copy (stylance scopes class names per file); consumer overlays that scroll must set `overscroll-behavior: contain` themselves. */ .offcanvas-body, .cesium-widget-errorPanel-scroll, .mwu-credits-9e9b456 { overscroll-behavior: contain; } } /* The Cesium canvas mounts here. It MUST be sized by its parent, not by its own content: Cesium resizes its to the container's client size, so a content-driven (e.g. flex-stretch) height feeds back — canvas → container grows → canvas grows → unbounded. Absolutely filling the `position: relative`, `overflow: hidden` wrapper (which the flex chain gives a definite height, floored by `min-height`) breaks that loop. */ .mwu-map-9e9b456 { position: absolute; inset: 0; overflow: hidden; } /* A CesiumOverlay box: placed each rendered frame via `transform`, hidden until the first projection lands (and while its anchor is off-screen). Its content — popup card, hover preview — defines its size. By default it lets pointer events through to the canvas (`pointer-events` is inherited, so the content does too), otherwise an overlay parked over a marker would starve the map's MOUSE_MOVE picking and freeze hover state. */ .mwu-overlay-9e9b456 { position: absolute; top: 0; /* Physical origin: the box is placed by a physical `transform` computed from the projected screen point, so the anchor must not flip with direction. */ /* ast-grep-ignore: prefer-logical-inset */ left: 0; z-index: 2; display: none; pointer-events: none; } /* Opt-in for clickable content (the `interactive` prop): the click card needs its links and close button back. */ .mwu-overlayInteractive-9e9b456 { pointer-events: auto; } /* Top-left cluster: the place search bar stacked above the zoom steps — where map users expect both. Above the popup overlays (z-index 2) so the search field and buttons stay reachable under an open card. The column is laid out start-aligned so the (wider) search bar doesn't stretch the zoom button group, and the gap keeps the two visually distinct. */ .mwu-zoomControls-9e9b456 { position: absolute; /* Above the top-right controls (z-index 3): when a narrow map drops those controls into the search-results band, the open dropdown must sit over them (and receive the clicks), not the other way round. */ z-index: 4; top: 10px; inset-inline-start: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; /* The column is as wide as the (14rem) search bar, so its blank area to the right of the zoom buttons would otherwise swallow map clicks/drags. Let that fall through to the canvas; the real controls re-enable below. */ pointer-events: none; } /* Re-enable interaction on the actual controls (search bar + zoom group). */ .mwu-zoomControls-9e9b456 > * { pointer-events: auto; } /* Camera/view controls (2D/3D pill, my-location, fullscreen, settings), top-right. */ .mwu-controls-9e9b456 { position: absolute; z-index: 3; top: 10px; inset-inline-end: 10px; display: flex; align-items: stretch; gap: 8px; } /* On a narrow map there isn't room for the search bar and these three controls on one row, so drop the controls to a second row just beneath the search bar. The query measures the MAP's width (via `container-type` on `.mapContainer`), not the viewport, so it tracks the actual panel size. An open results dropdown (higher z-index) covers them while typing — an accepted trade for keeping the search field at full width. Only when the search bar is shown (`.zoomControlsSearch`, set by CesiumMapControls' `search` prop) — without a bar there's nothing to avoid. Breakpoint: the 14rem bar (right edge ~234px from the map's start) and the three controls (~134px block on the right) only collide around 23rem of map width; 23.5rem drops them just before they touch, so they stay on one row as long as they comfortably fit. */ @container (max-width: 23.5rem) { .mwu-zoomControlsSearch-9e9b456 ~ .mwu-controls-9e9b456 { top: 3.5rem; } } /* 2D/3D tilt pill (CesiumTiltToggle), rendered inside the top-right `.controls` row. Both segments stay visible; the active one is filled. */ .mwu-tiltToggle-9e9b456 { display: inline-flex; border-radius: 999px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.15); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); } .mwu-tiltSegment-9e9b456 { /* The segments are icon-only: flex keeps the SVG off the text baseline, whose descender space would otherwise stretch the pill. */ display: inline-flex; align-items: center; border: none; background: var(--bs-light, #f8f9fa); color: var(--bs-body-color, #212529); font-size: 0.875rem; font-weight: 600; line-height: 1.5; padding: 0.375rem 0.75rem; } .mwu-tiltSegment-9e9b456[aria-pressed='true'] { background: var(--bs-primary, #0d6efd); color: #fff; } /* Street View overlay (CesiumStreetView): fills the map above every other on-map control while a panorama is open, hidden otherwise. The close button rides the top-inline-end corner; the panorama host fills the rest, sized so Google can mount its viewer into it. The black backing shows while the panorama imagery loads. */ .mwu-streetViewContainer-9e9b456 { position: absolute; inset: 0; z-index: 10; display: none; background: #000; } .mwu-streetViewVisible-9e9b456 { display: block; } /* Enter-on-zoom entries cross-fade the overlay in; classic click entries carry neither class and keep the instant reveal. */ .mwu-streetViewFadeEnter-9e9b456 { opacity: 0; transform: scale(1.06); transition: opacity 0.35s ease, transform 0.35s ease; } .mwu-streetViewFadeEnter-9e9b456.mwu-streetViewShown-9e9b456 { opacity: 1; transform: scale(1); } /* The enter-on-zoom coverage circle, anchored by the per-frame driver via left/top (the negative margin centres it); sized by zoom depth. A pure indicator: `pointer-events: none` lets clicks fall through to the canvas (the click-card flow) and wheels reach the engine and the floor-gated entry gesture, and — kept below the control clusters (z-index 3 and 4) — it can never sit over a button it would otherwise obscure. */ .mwu-streetViewZoomCircle-9e9b456 { position: absolute; z-index: 2; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); border: 2px solid rgba(255, 255, 255, 0.95); box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); pointer-events: none; transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease; } /* Hidden state — faded rather than display:none, so reveals and drops ease in and out instead of popping. Position stays rigid on purpose: easing left/top would make the circle swim against the terrain during pans. */ .mwu-streetViewZoomCircleHidden-9e9b456 { opacity: 0; } .mwu-streetViewZoomCircleBig-9e9b456 { transform: scale(1.6); } .mwu-streetViewZoomCircleGlow-9e9b456 { transform: scale(2); background: rgba(255, 255, 255, 0.75); animation: street-view-auto-circle-glow 1.5s ease-in-out infinite; } @keyframes street-view-auto-circle-glow { 0%, 100% { box-shadow: 0 0 16px 4px rgba(255, 255, 255, 0.55); } 50% { box-shadow: 0 0 30px 10px rgba(255, 255, 255, 0.95); } } .mwu-streetViewCloseBtn-9e9b456 { position: absolute; z-index: 11; top: 10px; inset-inline-end: 10px; } .mwu-streetViewPanorama-9e9b456 { width: 100%; height: 100%; } /* Street View status pill (CesiumStreetView): a bottom-centre hint / loading / no-coverage notice, shown only while the Street View layer is active and no panorama is open. Above popups (z 2) and on-map controls (z 3); inert (pointer-events: none) so it never steals map clicks. */ .mwu-streetViewStatus-9e9b456 { position: absolute; z-index: 4; bottom: 12px; /* Centering idiom: pairs with the physical `translateX(-50%)` below, which does not flip under RTL. */ /* ast-grep-ignore: prefer-logical-inset */ left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.4rem; max-width: calc(100% - 1.5rem); padding: 0.35rem 0.75rem; border-radius: 999px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 0.85rem; line-height: 1.2; white-space: nowrap; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35); pointer-events: none; } /* Loading scrim over the panorama while new imagery resolves. On first open the backing is black; on a reposition the previous panorama shows through, dimmed, so it reads as "loading a new view". Below the close button (z 11). */ .mwu-streetViewLoadingOverlay-9e9b456 { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); pointer-events: none; } /* A settings-panel layer thumbnail: one fixed tile of the layer, enough to convey its style at a glance. */ .mwu-imageryPreview-9e9b456 { width: 80px; height: 80px; object-fit: cover; border: 1px solid var(--bs-border-color); /* Host-app token; the fallback keeps the radius for consumers without it. */ border-radius: var(--radius-sm, 0.25rem); background-color: var(--bs-secondary-bg); } /* Google layers have no synchronous preview tile (their tiles need an async Map Tiles session token), so the panel shows a neutral same-sized box in place of a thumbnail. The label beside it still names the layer. */ .mwu-imageryPreviewPlaceholder-9e9b456 { flex-shrink: 0; width: 80px; height: 80px; border: 1px solid var(--bs-border-color); border-radius: var(--radius-sm, 0.25rem); background-color: var(--bs-secondary-bg); } /* Wraps a settings-panel layer thumbnail so a cue badge can overlay its corner (used to mark the Street View layer as opening 360° panoramas). */ .mwu-imageryPreviewWrap-9e9b456 { position: relative; flex-shrink: 0; line-height: 0; } /* Pegman + 360° cue overlaid on the Street View layer's thumbnail, signalling that selecting it makes roads clickable into panoramas. Decorative — the row's label still names the layer. */ .mwu-streetViewBadge-9e9b456 { position: absolute; inset-block-end: 2px; inset-inline-end: 2px; display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.05rem 0.3rem; border-radius: 999px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 0.625rem; font-weight: 600; line-height: 1.4; pointer-events: none; } /* The Street View click card: an anchored preview at the clicked point. The thumbnail itself is the enter button; the pegman chip echoes the panel badge so the affordance reads instantly. */ .mwu-streetViewCard-9e9b456 { position: relative; overflow: hidden; border-radius: 8px; background: var(--bs-body-bg); box-shadow: 0 2px 10px rgb(0 0 0 / 35%); } .mwu-streetViewCardOpen-9e9b456 { display: block; padding: 0; border: 0; background: none; cursor: pointer; } .mwu-streetViewCardThumb-9e9b456 { display: block; width: 160px; height: 106px; object-fit: cover; } .mwu-streetViewCardOpen-9e9b456:hover .mwu-streetViewCardThumb-9e9b456, .mwu-streetViewCardOpen-9e9b456:focus-visible .mwu-streetViewCardThumb-9e9b456 { filter: brightness(1.08); } .mwu-streetViewCardPegman-9e9b456 { position: absolute; inset-block-end: 6px; inset-inline-start: 6px; display: inline-flex; align-items: center; padding: 0.15rem; border-radius: 999px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 0.75rem; pointer-events: none; } .mwu-streetViewCardClose-9e9b456 { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 0.7rem; cursor: pointer; } .mwu-streetViewCardClose-9e9b456:hover, .mwu-streetViewCardClose-9e9b456:focus-visible { background: rgba(0, 0, 0, 0.8); } /* The selected base-imagery row in the settings panel's list-group. Bootstrap's default `.active` paints a solid, saturated `--bs-primary` fill that overpowers the layer thumbnail beside it; instead use the workspace's subtle-primary selection palette (the same tokens the calendar and single-select controls use) — a soft tint, emphasis-coloured label, and subtle border, with a primary accent bar on the inline-start edge drawn as an inset shadow (so it adds no layout shift, and the shared item borders stay intact). Every value is a Bootstrap theme variable, so the selection tracks the brand colour and dark mode automatically. Scoped under `.mapContainer` (which contains the panel), so it never leaks to other list-groups. */ .mwu-mapContainer-9e9b456 .offcanvas .list-group-item.active { color: var(--bs-primary-text-emphasis); background-color: var(--bs-primary-bg-subtle); border-color: var(--bs-primary-border-subtle); box-shadow: inset 3px 0 0 0 var(--bs-primary); } [dir="rtl"] .mwu-mapContainer-9e9b456 .offcanvas .list-group-item.active { box-shadow: inset -3px 0 0 0 var(--bs-primary); } /* Fullscreen is a pure CSS swap: pin the map container over the whole viewport, above the app chrome. z-index 1060 matches the workspace's other map views — deliberately above Bootstrap's modal layer (1055) so page chrome cannot cover the fullscreen map. */ .mwu-mapFullScreen-9e9b456 { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; z-index: 1060 !important; background-color: var(--bs-body-bg); } /* While fullscreen, neutralise every ancestor property that would otherwise trap the fixed container in a local stacking context or containing block, so its `position: fixed` resolves against the viewport and its z-index outranks the app chrome. `clip-path`, `transform`, `filter`, `perspective` and `contain` each establish a stacking context (and the latter three a containing block too): an ancestor carrying one — e.g. the edit page's tab outlet, which gets `clip-path: inset(0 -100vw)` to let a sticky bottom action bar overflow — would otherwise paint the whole map subtree below the sidebar/header regardless of the map's own z-index. They are visually inert here because the fullscreen map covers the chain anyway. The view-transition opt-out stops a transition snapshotting the fixed container back into page flow mid-animation. A document-wide :has() is costly to invalidate, but it only exists while a map is mounted and matches the other map views' sheet. */ *:has(.mwu-mapFullScreen-9e9b456) { view-transition-name: none !important; clip-path: none !important; transform: none !important; filter: none !important; perspective: none !important; contain: none !important; } /* OL-style collapsed attribution control. Cesium still writes credits into `.credits`; this wrapper just hides that line behind a small bottom-corner toggle until the user opens it. */ .mwu-attributionControl-9e9b456 { position: absolute; z-index: 3; bottom: 0.5rem; inset-inline-end: 0.5rem; display: flex; align-items: flex-end; max-width: calc(100% - 1rem); font-size: 10px; line-height: 1.15; pointer-events: auto; } .mwu-attributionToggle-9e9b456 { flex: 0 0 auto; width: 1.375rem; height: 1.375rem; padding: 0; border: 1px solid rgb(0 0 0 / 20%); border-radius: 2px; background: rgb(255 255 255 / 85%); color: #111; font: italic 700 0.95rem/1 Arial, sans-serif; cursor: pointer; } .mwu-attributionToggle-9e9b456:hover, .mwu-attributionToggle-9e9b456:focus-visible { background: #fff; } /* The custom creditContainer we hand to the Cesium Viewer. When expanded, keep every provider credit on one horizontal line. */ .mwu-credits-9e9b456 { display: none; align-items: center; min-width: 0; min-height: 1.375rem; padding: 0 0.45rem; overflow-x: auto; overflow-y: hidden; border: 1px solid rgb(0 0 0 / 20%); border-inline-end: 0; border-radius: 2px 0 0 2px; background: rgb(255 255 255 / 85%); color: #111; white-space: nowrap; scrollbar-width: thin; } .mwu-attributionControlExpanded-9e9b456 .mwu-credits-9e9b456 { display: flex; } /* Force-hide whichever credit strip isn't active — Cesium's static credits vs Google's dynamic per-viewport copyright — overriding the expanded flex. */ .mwu-creditsHidden-9e9b456 { display: none !important; } .mwu-credits-9e9b456 .cesium-widget-credits { position: static !important; display: inline-flex !important; align-items: center; flex-wrap: nowrap; max-width: 100%; /* Resets Cesium's own physical `padding-right: 5px` on this element, so it must stay physical too. */ /* ast-grep-ignore: prefer-logical-inline-properties */ padding-right: 0; color: #111; text-shadow: none; white-space: nowrap; } .mwu-credits-9e9b456 .cesium-credit-text, .mwu-credits-9e9b456 .cesium-credit-wrapper a, .mwu-credits-9e9b456 .cesium-credit-wrapper a:visited { color: #111 !important; } .mwu-credits-9e9b456 .cesium-credit-textContainer, .mwu-credits-9e9b456 .cesium-credit-logoContainer { display: inline-flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; } .mwu-credits-9e9b456 .cesium-credit-textContainer * { white-space: nowrap; } .mwu-credits-9e9b456 .cesium-credit-expand-link { display: none !important; } [dir="rtl"] .mwu-credits-9e9b456 { border-inline-end: 1px solid rgb(0 0 0 / 20%); border-inline-start: 0; border-radius: 0 2px 2px 0; } /* Drop Cesium's default ion logo — but only when the map uses no Cesium ion assets. The engine's CreditDisplay always seeds the credit container with the Cesium ion logo; per Cesium's licence that logo is *required* only while the map renders ion-served assets (ion imagery/terrain/3D tiles, which need an ion access token). Our 2D OSM/Google maps load none, so `CesiumMap` adds this class (it omits it when `uses_cesium_ion` is set) and the logo is hidden. The tile attribution text (`.cesium-credit-textContainer`, e.g. "© OpenStreetMap contributors") is a separate container and always stays visible. */ .mwu-hideIonLogo-9e9b456 .cesium-credit-logoContainer { display: none !important; } .mwu-markdownEditor-fef564f { /* Toolbar */ .navbar { padding-block: var(--space-1, 0.25rem); border-bottom: 1px solid var(--bs-border-color); .container-fluid { row-gap: var(--space-1, 0.25rem); } /* Rounded corners belong to the individual mdToolbarBtn first/last-child; the btn-group is a logical wrapper only and contributes no radius. */ .btn-group { border-radius: 0 !important; } /* Subtle vertical separators between btn-groups */ .btn-group + .btn-group:not(.ms-auto) { margin-inline-start: var(--space-2, 0.5rem); padding-inline-start: var(--space-2, 0.5rem); border-inline-start: 1px solid var(--bs-border-color); } } /* Icon-button "ghost" style for toolbar buttons: transparent by default, subtle hover, primary-tinted when the cursor sits inside the matching markdown formatting. Self-contained class with no Bootstrap inheritance. */ .mwu-mdToolbarBtn-fef564f { gap: var(--icon-spacing, 0.25em); background: transparent; border: 1px solid transparent; color: var(--bs-secondary-color); padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem); border-radius: var(--bs-border-radius-sm); font-size: 0.875rem; line-height: 1; transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease; cursor: pointer; &:hover:not(:disabled) { background: var(--bs-tertiary-bg); color: var(--bs-body-color); } &:focus-visible { outline: 0; box-shadow: 0 0 0 0.2rem var(--bs-primary-bg-subtle); z-index: 2; } &.mwu-is-active-fef564f { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); border-color: var(--bs-primary-border-subtle); } &:disabled { opacity: 0.5; cursor: not-allowed; } } .btn-group > .mwu-mdToolbarBtn-fef564f { &:first-child { border-start-start-radius: var(--bs-border-radius-sm); border-end-start-radius: var(--bs-border-radius-sm); } &:last-child { border-start-end-radius: var(--bs-border-radius-sm); border-end-end-radius: var(--bs-border-radius-sm); } } @media (max-width: 479.98px) { .mwu-mdToolbarBtn-fef564f[data-mobile-hide="true"] { display: none; } } /* Optional right-side preview pane: shows pulldown-cmark rendered HTML (no markers). Hidden by default, revealed via the toolbar Preview toggle. */ .md-with-preview .md-body { width: 50%; border-start-end-radius: 0; border-end-end-radius: 0; } .md-preview-pane { flex: 0 0 50%; max-width: 50%; min-height: 300px; max-height: 70vh; overflow-y: auto; padding: var(--space-3, 1rem); background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); border-end-end-radius: var(--bs-border-radius); border-inline-start: 0; font-family: var(--bs-body-font-family); > :first-child { margin-top: 0; } > :last-child { margin-bottom: 0; } /* Match the editor's heading typography so toggling Preview doesn't visually jump. `!important` overrides tenant-themed rules like `.themeBox#theme-financial h1 { font-family: "Trajan Pro" }` whose (1,1,1) specificity wins over a normal scoped rule. */ h1, h2, h3, h4, h5, h6 { font-family: var(--bs-body-font-family) !important; text-transform: none !important; font-variant: normal !important; font-style: normal !important; } h1 { font-size: 1.75rem; font-weight: 700; line-height: 1.3; } h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; } h3 { font-size: 1.25rem; font-weight: 700; } h4 { font-size: 1.1rem; font-weight: 700; } h5 { font-size: 1rem; font-weight: 700; } h6 { font-size: 0.9rem; font-weight: 700; } } /* Editor body: a single contenteditable surface that doubles as the in-place preview. Source markdown stays editable; markers stay visible but dimmed; the surrounding content picks up the rendered styling. */ .md-body { min-height: 300px; max-height: 70vh; overflow-y: auto; padding: var(--space-3, 1rem); border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius); border-color: var(--bs-border-color); outline: none; white-space: pre-wrap; word-break: break-word; &:focus { box-shadow: none; border-color: var(--bs-primary-border-subtle); } } /* Top-level line wrapper. Every source line becomes one block element. */ .md-line { min-height: 1.5em; } .md-line.md-empty { min-height: 1.5em; } /* Markers: `**`, `#`, `>`, `-`, `` ` ``, `[`, `]`, `(`, `)`, `!`. Always visible (the source character must be there for editing to work) but dimmed so the rendered intent reads first. */ .md-marker { opacity: 0.45; color: var(--bs-secondary-color); font-weight: normal; } /* Block kinds */ .md-line.md-heading-1 { font-size: 1.75rem; font-weight: 700; line-height: 1.3; margin: 0.5rem 0 0.25rem; } .md-line.md-heading-2 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; margin: 0.5rem 0 0.25rem; } .md-line.md-heading-3 { font-size: 1.25rem; font-weight: 700; line-height: 1.35; } .md-line.md-heading-4 { font-size: 1.1rem; font-weight: 700; } .md-line.md-heading-5 { font-size: 1rem; font-weight: 700; } .md-line.md-heading-6 { font-size: 0.9rem; font-weight: 700; } .md-line.md-blockquote { border-inline-start: 4px solid var(--bs-border-color); padding-inline-start: 0.75rem; color: var(--bs-secondary-color); } /* Horizontal rule: keep the source `---` in the DOM (source-mirroring contract) and keep the line clickable so the user can navigate the caret into it. The visual separator is drawn via a centred `::before` rule; the source characters are dimmed to near-invisible but still occupy real height so the row has a click target. */ .md-line.md-hr { position: relative; margin: 0.75rem 0; min-height: 1.25em; display: flex; align-items: center; } .md-line.md-hr::before { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 1px; background: var(--bs-border-color); opacity: 0.7; pointer-events: none; } .md-line.md-hr .md-marker { color: var(--bs-secondary-color); opacity: 0.25; font-size: 0.7em; position: relative; background: var(--bs-body-bg); padding-inline: 0.4em; } .md-line.md-bullet, .md-line.md-numbered { /* Indent for the rendered marker; the source marker itself stays in place. */ padding-inline-start: 0.25rem; } /* Fenced code blocks: gray background + monospace */ .md-line.md-code-fence, .md-line.md-code-body { font-family: var(--bs-font-monospace); background: var(--bs-tertiary-bg); padding-inline: 0.5em; } /* Inline tokens */ .md-bold-text { font-weight: 700; } .md-italic-text { font-style: italic; } .md-strike-text { text-decoration: line-through; text-decoration-color: var(--bs-secondary-color); } .md-code-inline { font-family: var(--bs-font-monospace); background: var(--bs-tertiary-bg); padding: 0 0.25em; border-radius: 0.2em; } .md-link-text { color: var(--bs-primary); text-decoration: underline; } .md-link-url, .md-image-url { color: var(--bs-secondary-color); opacity: 0.7; } .md-image-alt { font-style: italic; color: var(--bs-secondary-color); } } .moneyInputAligned { width: 12.75em; text-align: end; } .mwu-moneyInput-3178733 { display: flex; flex-wrap: nowrap; input { flex-grow: 4; max-width: 10em; text-align: end; } .mwu-currencySelect-3178733 { max-width: 5.25em; flex-shrink: 0; &:disabled { -webkit-appearance: none; -moz-appearance: none; appearance: none; } } } /* Responsive adjustments */ @media (max-width: 576px) { .mwu-moneyInput-3178733 { flex-wrap: wrap; input { flex: 1 1 100%; max-width: none; border-radius: 0.375rem 0.375rem 0 0 !important; } .mwu-currencySelect-3178733 { flex: 1 1 100%; max-width: none; border-radius: 0 0 0.375rem 0.375rem !important; border-top: 0; } } } .mwu-multiselect-1aa00e4 { h1.d-inline-block + & { vertical-align: text-bottom; margin-bottom: -0.25rem; } .form-control.form-select { padding: 0; } .form-control.form-select:focus, .dropdown-toggle.show { border-color: var(--bs-primary-bg-subtle) !important; box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important; outline: 0; } .input-group & { border: none; } .input-group &:not(:first-child) { /* Square off the start edge when .form-control is not first in the input-group */ .form-control { border-start-start-radius: 0; border-end-start-radius: 0; } } .input-group &:not(:last-child) { /* Square off the end edge when .form-control is not last in the input-group */ .form-control { border-start-end-radius: 0; border-end-end-radius: 0; } } button.mwu-dropdownToggle-1aa00e4 { position: relative; padding-inline-end: 2rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; color: var(--bs-body-color); border: none; &::after { position: absolute; inset-inline-end: 0.75rem; top: 50%; transform: translateY(-50%); } &:focus { border-color: #86b7fe; outline: 0; box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } } } .mwu-menu-1aa00e4 { max-height: 66vh; display: flex; flex-direction: column; overflow: hidden; .mwu-header-1aa00e4 { background: var(--bs-border-color); .input-group { flex-wrap: nowrap; input { min-width: 15ex; } } } tr { cursor: pointer; .mwu-selectedIcon-1aa00e4 { opacity: 0; } &.table-active .mwu-selectedIcon-1aa00e4 { opacity: 1; } .mwu-choiceDisplay-1aa00e4 { padding-inline-start: 0; padding-inline-end: 1.5rem; & > a:focus { outline: none; } } &:has(.mwu-choiceDisplay-1aa00e4 a:focus) { outline: 2px solid var(--bs-primary); outline-offset: -2px; border-radius: 0.25rem; } } table { margin: 0 !important; } .mwu-tableWrapper-1aa00e4 { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; } /* Create-row styling Bootstrap utilities can't express. */ .mwu-createRow-1aa00e4 { cursor: pointer; /* Solid background so scrolled results don't show through the pinned row. */ background-color: var(--bs-body-bg); &:hover { background-color: var(--bs-tertiary-bg); } .mwu-createRowIcon-1aa00e4 { width: 1.25rem; height: 1.25rem; } } } .mwu-navRouteItem-ba61311 { a.disabled { color: rgba(var(--bs-secondary-rgb), 0.75) !important; } } .mwu-chartContainer-dd1bf52 { flex: 1 1 0; min-height: 0; width: 100%; flex-direction: column; overflow: hidden; position: relative; & > * { animation: orgChartFadeIn 0.3s ease-out; } .mwu-orgTree-dd1bf52 { --popoverWidth: 320px; --popoverMaxHeight: 420px; --popoverGap: 0.6rem; display: flex; justify-content: center; align-items: flex-start; gap: var(--space-12, 3rem); padding: var(--space-6, 1.5rem); padding-inline-end: calc( var(--space-6, 1.5rem) + var(--popoverWidth) + var(--popoverGap) ); padding-bottom: calc( var(--space-6, 1.5rem) + var(--popoverMaxHeight) + var(--popoverGap) ); min-width: max-content; min-height: max-content; &.mwu-layoutVertical-dd1bf52 { flex-direction: column; align-items: flex-start; justify-content: flex-start; } } } .mwu-employeeSearch-dd1bf52 { width: min(20rem, 100%) !important; } @keyframes orgChartFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes nodeAppear { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .mwu-userAvatarSlot-9dd0a01 { width: 40px; flex-shrink: 0; } .mwu-roleBadge-9dd0a01 { background: var(--bs-primary); color: white; padding: 0.15rem 0.4rem; border-radius: var(--radius-sm, 0.25rem); font-size: 0.7rem; } .mwu-container-9dd0a01 { --connectorsColor: var(--bs-gray); --cardWidth: 240px; display: flex; flex-direction: column; align-items: center; animation: nodeAppear 0.4s ease-out; .mwu-nodeCard-9dd0a01 { width: var(--cardWidth); cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; text-decoration: none; border-color: var(--bs-border-color); cursor: pointer; &:hover { box-shadow: var(--bs-box-shadow); border-color: var(--bs-primary); } .mwu-rolesPopover-9dd0a01 { position: absolute; top: 0; inset-inline-start: calc(100% + 0.6rem); width: 320px; max-height: 420px; overflow-y: auto; padding: 0.6rem 0.75rem; border-radius: var(--bs-border-radius, 0.375rem); background-color: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); box-shadow: var(--bs-box-shadow); font-size: 0.8125rem; text-align: start; cursor: default; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-0.25rem); transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease; z-index: var(--bs-tooltip-zindex, 1080); /* arrow pointing left to the card */ &::before { content: ""; position: absolute; top: 1rem; inset-inline-end: 100%; border-style: solid; border-width: 0.4rem 0.4rem 0.4rem 0; border-color: transparent var(--bs-border-color) transparent transparent; } &::after { content: ""; position: absolute; top: 1rem; inset-inline-end: calc(100% - 1px); border-style: solid; border-width: 0.4rem 0.4rem 0.4rem 0; border-color: transparent var(--bs-body-bg) transparent transparent; } } &:hover .mwu-rolesPopover-9dd0a01, &:focus-within .mwu-rolesPopover-9dd0a01 { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(0); transition-delay: 120ms; } .mwu-popoverHeader-9dd0a01 { margin-bottom: 0.4rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--bs-border-color); color: var(--bs-emphasis-color); } .mwu-popoverSection-9dd0a01 { margin-bottom: var(--space-2, 0.5rem); &:last-child { margin-bottom: 0; } } .mwu-popoverSectionTitle-9dd0a01 { font-weight: bold; color: var(--bs-secondary-color); margin-bottom: var(--space-1, 0.25rem); } .mwu-popoverPermissionType-9dd0a01 { color: var(--bs-secondary-color); } /* Permission filter highlighting */ &.mwu-highlighted-9dd0a01 { /* Override Bootstrap text-secondary to be visible on success background */ .text-secondary { color: rgba(255, 255, 255, 0.75) !important; } &:hover { box-shadow: var(--bs-box-shadow); } } /* Permission filter dimming */ &.mwu-dimmed-9dd0a01 { opacity: 0.4; &:hover { opacity: 0.7; } } .mwu-nodeTitle-9dd0a01 { &:hover { font-weight: bold; } button.mwu-expand-9dd0a01 { &:active { transform: scale(0.95); } } } .mwu-groupDescription-9dd0a01:has(small:empty) { display: none; } } .mwu-childrenContainer-9dd0a01 { display: flex; flex-direction: column; align-items: center; position: relative; margin-top: 0; animation: childrenAppear 0.3s ease-out; } @keyframes childrenAppear { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .mwu-connectorLine-9dd0a01 { width: var(--connector-line-width, 2px); /* Must equal .childWrapper's padding-top: the drop lines only bridge the gap exactly when both come from the same token. */ height: var(--space-10, 2.5rem); background: var(--connectorsColor); position: relative; margin-bottom: 0; } .mwu-childrenNodes-9dd0a01 { --childGap: 3rem; display: flex; justify-content: center; position: relative; gap: var(--childGap); /* Horizontal connector line between siblings */ &::before { content: ""; position: absolute; top: 0; height: var(--connector-line-width, 2px); background: var(--connectorsColor); z-index: 1; } /* Position horizontal line to span from first to last child */ &:not(:has(:only-child))::before { inset-inline-start: calc(50% / var(--child-count, 2)); inset-inline-end: calc(50% / var(--child-count, 2)); } &:has(:only-child)::before { display: none; } .mwu-childWrapper-9dd0a01 { display: flex; flex-direction: column; align-items: center; position: relative; padding-top: var(--space-10, 2.5rem); flex: 0 0 auto; &::before { content: ""; position: absolute; top: 0; /* ast-grep-ignore: prefer-logical-inset */ left: 50%; transform: translateX(-50%); width: var(--connector-line-width, 2px); /* Spans exactly the wrapper's padding-top (same token). */ height: var(--space-10, 2.5rem); background: var(--connectorsColor); z-index: 2; } .mwu-childConnector-9dd0a01::before { content: ""; position: absolute; top: 0; inset-inline-end: 50%; width: calc(50% + (var(--childGap) / 2)); height: var(--connector-line-width, 2px); background: var(--connectorsColor); z-index: 1; } .mwu-childConnector-9dd0a01::after { content: ""; position: absolute; top: 0; inset-inline-start: 50%; width: calc(50% + (var(--childGap) / 2)); height: var(--connector-line-width, 2px); background: var(--connectorsColor); z-index: 1; } &:first-child > .mwu-childConnector-9dd0a01::before, &:only-child > .mwu-childConnector-9dd0a01::before { content: none; } &:last-child > .mwu-childConnector-9dd0a01::after, &:only-child > .mwu-childConnector-9dd0a01::after { content: none; } } } &.mwu-layoutVertical-9dd0a01 { flex-direction: row; align-items: center; .mwu-childrenContainer-9dd0a01 { flex-direction: row; align-items: center; } .mwu-nodeCard-9dd0a01 { .mwu-rolesPopover-9dd0a01 { top: calc(100% + 0.6rem); inset-inline-start: 0; transform: translateY(-0.25rem); &::before { top: auto; inset-inline-end: auto; bottom: 100%; inset-inline-start: 1rem; border-width: 0 0.4rem 0.4rem 0.4rem; border-color: transparent transparent var(--bs-border-color) transparent; } &::after { top: auto; inset-inline-end: auto; bottom: calc(100% - 1px); inset-inline-start: 1rem; border-width: 0 0.4rem 0.4rem 0.4rem; border-color: transparent transparent var(--bs-body-bg) transparent; } } &:hover .mwu-rolesPopover-9dd0a01, &:focus-within .mwu-rolesPopover-9dd0a01 { transform: translateY(0); } } .mwu-connectorLine-9dd0a01 { width: var(--space-10, 2.5rem); height: var(--connector-line-width, 2px); } .mwu-childrenNodes-9dd0a01 { flex-direction: column; justify-content: flex-start; &::before { top: auto; inset-inline-start: 0; width: var(--connector-line-width, 2px); height: auto; } &:not(:has(:only-child))::before { top: calc(50% / var(--child-count, 2)); bottom: calc(50% / var(--child-count, 2)); inset-inline-start: 0; inset-inline-end: auto; } .mwu-childWrapper-9dd0a01 { flex-direction: row; align-items: center; padding-top: 0; padding-inline-start: var(--space-10, 2.5rem); &::before { top: 50%; inset-inline-start: 0; transform: translateY(-50%); /* Spans exactly the wrapper's padding-inline-start (same token). */ width: var(--space-10, 2.5rem); height: var(--connector-line-width, 2px); } .mwu-childConnector-9dd0a01::before { top: auto; bottom: 50%; inset-inline-end: auto; inset-inline-start: 0; width: var(--connector-line-width, 2px); height: calc(50% + (var(--childGap) / 2)); } .mwu-childConnector-9dd0a01::after { top: 50%; inset-inline-start: 0; width: var(--connector-line-width, 2px); height: calc(50% + (var(--childGap) / 2)); } } } } } ul.mwu-pagination-589967c { html[dir="ltr"] & .mwu-hideLtr-589967c, html[dir="rtl"] & .mwu-hideRtl-589967c { display: none; } & .dropdown-menu { inset-inline-end: 0; inset-inline-start: -58ex; } } .mwu-strengthIndicator-fb4f3b8 { width: 1.5rem; height: 1.5rem; inset-inline-end: 2.5rem; &.mwu-strengthIndicatorNoToggle-fb4f3b8 { inset-inline-end: 0.75rem; } } .mwu-strengthBar-fb4f3b8 { height: 0.375rem; & .mwu-strengthSegment-fb4f3b8 { transition: background-color 0.3s ease; } } .mwu-filterContainer-98d104f { min-width: 280px; .mwu-inputWrapper-98d104f { position: relative; input[type="search"] { padding-inline-end: var(--space-10, 2.5rem); } } .mwu-inputIcon-98d104f { position: absolute; inset-inline-end: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); pointer-events: none; } .mwu-clearBtn-98d104f { position: absolute; inset-inline-end: 0.25rem; top: 50%; transform: translateY(-50%); padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem); border: none; background: none; color: var(--bs-secondary-color); cursor: pointer; &:hover { color: var(--bs-body-color); } } .mwu-matchBadge-98d104f { display: block; margin-top: var(--space-1, 0.25rem); font-size: 0.75rem; } .dropdown-menu { max-height: 50vh; overflow-y: auto; min-width: 100%; width: max-content; max-width: 500px; } } .mwu-permissionPicker-b0464ad { .mwu-permissionRow-b0464ad { padding: var(--space-2, 0.5rem) 0; border-bottom: 1px solid var(--bs-border-color-translucent); &:first-child { padding-top: 0; } &:last-child { border-bottom: none; padding-bottom: 0; } } } .mwu-scopePicker-2e5381f { min-height: 0; /* The kind columns are what must line up row to row, so the label column is the one that flexes. Left uncapped on a full-width page it grows until the cells sit at the far edge, stranding them from the labels they belong to. */ max-width: 52rem; } .mwu-search-2e5381f .input-group-text { background: var(--bs-tertiary-bg); } .mwu-headerRow-2e5381f { padding: var(--space-1) 0; border-bottom: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.02em; } .mwu-entityCol-2e5381f { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mwu-kindCol-2e5381f { flex: 0 0 3.25rem; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--bs-secondary-color); } .mwu-list-2e5381f { min-height: 0; max-height: 60vh; } .mwu-featureRow-2e5381f { border-bottom: 1px solid var(--bs-border-color); } .mwu-featureHead-2e5381f { padding: 0.2rem 0; } .mwu-entityRow-2e5381f { border-top: 1px solid var(--bs-border-color-translucent); } .mwu-entityHead-2e5381f { padding: 0.15rem 0 0.15rem 1rem; } .mwu-kindCell-2e5381f { width: 1.4rem; height: 1.4rem; padding: 0; border: 1px solid var(--bs-border-color); border-radius: var(--radius-sm); background: transparent; color: #fff; cursor: pointer; line-height: 1; } .mwu-kindCell-2e5381f[data-state="all"] { background: var(--bs-primary); border-color: var(--bs-primary); } .mwu-kindCell-2e5381f[data-state="partial"] { background: var(--bs-primary-bg-subtle); border-color: var(--bs-primary); } /* Grey states carry grants the group holds through a role. They are not revocable here, so they must never read as a direct (primary) grant. */ .mwu-kindCell-2e5381f[data-state="inherited-all"] { background: var(--bs-secondary-bg); border-color: var(--bs-secondary-color); color: var(--bs-secondary-color); } .mwu-kindCell-2e5381f[data-state="inherited-partial"] { border-color: var(--bs-secondary-color); } .mwu-kindCell-2e5381f[data-state="inherited-partial"]::after { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 1px; background: var(--bs-secondary-color); } /* A direct grant that also comes from a role: primary fill, grey ring. */ .mwu-kindCell-2e5381f[data-state="all"][data-inherited="true"], .mwu-kindCell-2e5381f[data-state="partial"][data-inherited="true"] { box-shadow: 0 0 0 2px var(--bs-secondary-bg); } .mwu-kindCell-2e5381f[data-state="partial"]::after { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 1px; background: var(--bs-primary); } .mwu-leaves-2e5381f { padding: 0.1rem 0 0.4rem 2.4rem; gap: 0.1rem; } .mwu-leaf-2e5381f { font-size: 0.85rem; cursor: pointer; } /* Grey tick on a box that is deliberately left unchecked, marking access the group holds through a role. Bootstrap paints the tick from --bs-form-check-bg-image and its stylesheet loads after this one, so a plain background-image/border declaration would lose the cascade; only the --bs-* custom properties on the element itself win. Applied solely while unchecked, so it never fights Bootstrap's :checked rules. */ .mwu-leafInherited-2e5381f { --bs-form-check-bg: var(--bs-secondary-bg); --bs-border-color: var(--bs-secondary-color); --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } [data-bs-theme="dark"] .mwu-leafInherited-2e5381f { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23adb5bd' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); } .mwu-footer-2e5381f { gap: var(--space-2); } .mwu-menu-9d17e4b { position: fixed; z-index: 1080; margin: 0; } /* Chips and hover rows tint the surface with the emphasis colour instead of using --bs-tertiary-bg: a theme may paint `.card` with that very colour on dark surfaces, which would make them vanish. */ .mwu-questionCard-81d092c { --row-highlight-bg: rgba(var(--bs-emphasis-color-rgb), 0.06); --chip-bg: rgba(var(--bs-emphasis-color-rgb), 0.1); margin-bottom: var(--space-2, 0.5rem); padding: var(--space-5, 1.25rem); border-radius: var(--radius-2xl, 1rem); background-color: var(--bs-body-bg); outline: none; } .mwu-header-81d092c { display: flex; align-items: center; gap: var(--space-3, 0.75rem); } .mwu-headerIcon-81d092c { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-md, 0.5rem); background-color: rgba(var(--bs-primary-rgb), 0.15); color: var(--bs-primary); } .mwu-title-81d092c { font-size: var(--font-size-xl, 1.15rem); font-weight: 700; letter-spacing: -0.01em; } .mwu-question-81d092c { margin: var(--space-4, 1rem) 0 0; font-size: 0.9375rem; } /* The rows bleed into the card padding so their hover surface lines up with the question text above. */ .mwu-options-81d092c { display: flex; flex-direction: column; gap: var(--space-1, 0.25rem); margin: var(--space-3, 0.75rem) calc(-1 * var(--space-2, 0.5rem)) 0; } .mwu-option-81d092c { display: flex; align-items: center; gap: var(--space-3, 0.75rem); margin: 0; padding: var(--space-2, 0.5rem); border: 1px solid transparent; border-radius: var(--radius-lg, 0.625rem); font-size: 0.9375rem; color: var(--bs-body-color); cursor: pointer; transition: background-color var(--transition-fast, 0.15s ease-in-out), border-color var(--transition-fast, 0.15s ease-in-out); &:hover { background-color: var(--row-highlight-bg); } } .mwu-highlighted-81d092c { background-color: var(--row-highlight-bg); } .mwu-selected-81d092c { border-color: var(--bs-primary); background-color: var(--bs-primary-bg-subtle); .mwu-letter-81d092c { background-color: var(--bs-primary); color: var(--bs-white); } } .mwu-letter-81d092c { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-md, 0.5rem); background-color: var(--chip-bg); color: var(--bs-secondary-color); font-size: var(--font-size-xs, 0.75rem); font-weight: 500; font-variant-numeric: tabular-nums; } /* A plain text field that sits in the row like an option label: the row carries the border and the background, not the field. */ .mwu-otherInput-81d092c { flex: 1; min-width: 0; padding: 0; border: none; background: transparent; color: inherit; font: inherit; outline: none; &::placeholder { color: var(--bs-secondary-color); } } .mwu-footer-81d092c { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3, 0.75rem); margin-top: var(--space-4, 1rem); } .mwu-progress-81d092c { display: flex; align-items: center; gap: var(--space-1, 0.25rem); color: var(--bs-secondary-color); font-size: var(--font-size-sm, 0.875rem); font-variant-numeric: tabular-nums; } .mwu-stepButton-81d092c { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; text-decoration: none; /* Bootstrap's `.btn` and `.btn-link` paint from their own variables and set them at single-class specificity, so the chip-sized chevron redefines them from a more specific selector. */ .mwu-questionCard-81d092c .mwu-progress-81d092c & { --bs-btn-padding-x: 0; --bs-btn-padding-y: 0; --bs-btn-line-height: 1; --bs-btn-border-radius: var(--radius-md, 0.5rem); --bs-btn-color: var(--bs-secondary-color); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-bg: var(--row-highlight-bg); --bs-btn-active-color: var(--bs-body-color); --bs-btn-active-bg: var(--row-highlight-bg); --bs-btn-disabled-color: var(--bs-secondary-color); --bs-btn-disabled-opacity: 0.35; } } .mwu-actions-81d092c { display: flex; align-items: center; gap: var(--space-2, 0.5rem); margin-inline-start: auto; } .mwu-kbdGroup-81d092c { display: inline-flex; gap: var(--space-1, 0.25rem); margin-inline-start: var(--space-2, 0.5rem); } .mwu-kbd-81d092c { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 var(--space-1, 0.25rem); border-radius: var(--radius-sm, 0.25rem); background-color: rgba(var(--bs-white-rgb), 0.2); color: inherit; font-family: inherit; font-size: 0.625rem; } /* Drag strip between two panes. It is meant to replace the gap between them rather than sit on top of one, so the whole width is a grab target and the visible filet is drawn inside it. */ .mwu-resizeBar-5b2100b { --_width: var(--resize-bar-width, 1rem); --_line: var(--resize-bar-line, var(--bs-border-color, #dee2e6)); --_line-active: var(--resize-bar-line-active, var(--bs-primary, #0d6efd)); --_thickness: var(--resize-bar-line-thickness, 2px); --_thickness-active: var(--resize-bar-line-thickness-active, 6px); flex: 0 0 var(--_width); align-self: stretch; /* Hosts often paint a decorative layer at z-index 0 across the whole frame; without this the strip and its pointer target end up underneath it. A flex item takes z-index without needing to be positioned. */ z-index: 1; cursor: col-resize; touch-action: none; user-select: none; background-color: transparent; /* The filet is laid out rather than positioned, so where it sits inside the hit area is one token. Centred suits a strip that stands in for the gap between two panes; `flex-end` puts it against the trailing edge, for a bar that rides the edge of a panel it is drawn on top of. Both spellings are direction-aware, so right-to-left needs no override. */ display: flex; justify-content: var(--resize-bar-line-align, center); &::after { content: ""; align-self: stretch; inline-size: var(--_thickness); background-color: var(--_line); transition: background-color 120ms ease, inline-size 120ms ease; } &:hover::after, &:focus-visible::after, &.mwu-resizeBarDragging-5b2100b::after { inline-size: var(--_thickness-active); background-color: var(--_line-active); } } @media (prefers-reduced-motion: reduce) { .mwu-resizeBar-5b2100b::after { transition: none; } } .mwu-resourcePreloaderReport-8a9ff5d { position: fixed; top: 0; inset-inline: 0; z-index: 2000; .progress { height: 1px; } .mwu-progressFill-8a9ff5d { width: 0%; } } .mwu-filterContainer-4f73056 { min-width: 280px; .mwu-inputWrapper-4f73056 { position: relative; input[type="search"] { padding-inline-end: var(--space-10, 2.5rem); } } .mwu-inputIcon-4f73056 { position: absolute; inset-inline-end: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); pointer-events: none; } .mwu-clearBtn-4f73056 { position: absolute; inset-inline-end: 0.25rem; top: 50%; transform: translateY(-50%); padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem); border: none; background: none; color: var(--bs-secondary-color); cursor: pointer; &:hover { color: var(--bs-body-color); } } .mwu-matchBadge-4f73056 { display: block; margin-top: var(--space-1, 0.25rem); font-size: 0.75rem; } .dropdown-menu { max-height: 50vh; overflow-y: auto; min-width: 100%; width: max-content; max-width: 500px; } } .mwu-rolePicker-10b5e5a { /* Section styles */ .mwu-roleSection-10b5e5a { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); padding: var(--space-4, 1rem); margin-bottom: var(--space-4, 1rem); background: var(--bs-body-bg); } .mwu-roleSectionHeader-10b5e5a { margin-bottom: var(--space-3, 0.75rem); } .mwu-roleSectionTitle-10b5e5a { font-weight: 600; color: var(--bs-primary); } /* Card styles */ .mwu-roleCard-10b5e5a { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); padding: var(--space-3, 0.75rem); margin-bottom: var(--space-2, 0.5rem); background: var(--bs-body-bg); transition: border-color var(--transition-base, 0.2s ease); &:hover { border-color: var(--bs-primary); } &:last-child { margin-bottom: 0; } } .mwu-roleName-10b5e5a { font-weight: 500; } .mwu-roleDescription-10b5e5a { font-size: 0.85rem; color: var(--bs-secondary); } /* Permissions preview */ .mwu-permissionsPreview-10b5e5a { margin-top: var(--space-3, 0.75rem); padding-top: var(--space-3, 0.75rem); border-top: 1px solid var(--bs-border-color-translucent); } .mwu-permissionsAccordion-10b5e5a { font-size: 0.875rem; .accordion-button { padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem); font-size: 0.875rem; } .accordion-body { padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem); } } .mwu-permissionBadge-10b5e5a { background: rgba(var(--bs-primary-rgb), 0.1); color: var(--bs-primary); padding: 0.2rem 0.5rem; border-radius: var(--radius-sm, 0.25rem); font-size: 0.75rem; margin: 0.125rem; } /* Dropdown styles */ .mwu-dropdownMenu-10b5e5a { padding-top: 0; } .mwu-dropdownSearch-10b5e5a { padding: var(--space-2, 0.5rem); border-bottom: 1px solid var(--bs-border-color-translucent); } .mwu-dropdownList-10b5e5a { max-height: 300px; overflow-y: auto; } /* Badge styles */ .mwu-roleBadge-10b5e5a { background: var(--bs-primary); color: white; padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem); border-radius: var(--radius-sm, 0.25rem); font-size: 0.75rem; } /* Empty state */ .mwu-noRoles-10b5e5a { color: var(--bs-secondary); font-style: italic; padding: var(--space-4, 1rem); text-align: center; } /* Expand button */ .mwu-expandButton-10b5e5a { padding: 0; border: none; background: transparent; color: var(--bs-secondary); cursor: pointer; transition: transform var(--transition-base, 0.2s ease); &:hover { color: var(--bs-primary); } &.mwu-expanded-10b5e5a { transform: rotate(180deg); } } } .mwu-segmentedToggle-c8397b8 { --_radius: var(--segmented-toggle-radius, var(--bs-border-radius-sm, var(--bs-border-radius, 0.375rem))); --_track-bg: var(--segmented-toggle-track-bg, var(--bs-tertiary-bg)); --_color: var(--segmented-toggle-color, var(--bs-secondary-color)); --_active-bg: var(--segmented-toggle-active-bg, rgba(var(--bs-primary-rgb), 0.14)); --_active-color: var(--segmented-toggle-active-color, var(--bs-primary)); display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--_radius); background-color: var(--_track-bg); } .mwu-segmentedToggle-c8397b8 .mwu-segment-c8397b8.btn { color: var(--_color); border: 0; border-radius: max(0px, calc(var(--_radius) - 2px)); box-shadow: none; white-space: nowrap; transition: color 0.15s ease, background-color 0.15s ease; } .mwu-segmentedToggle-c8397b8 .mwu-segment-c8397b8.btn:hover:not(:disabled) { color: var(--bs-body-color); } .mwu-segmentedToggle-c8397b8 .mwu-segmentActive-c8397b8.btn { background-color: var(--_active-bg); color: var(--_active-color); } .mwu-segmentedToggle-c8397b8 .mwu-segment-c8397b8.btn:disabled { opacity: 0.4; cursor: not-allowed; } .mwu-signaturePadContainer-c1299a9 { display: flex; flex-direction: column; gap: 0.5rem; .mwu-signaturePadCanvasWrapper-c1299a9 { position: relative; .mwu-signaturePadCanvas-c1299a9 { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); /* Fixed "paper" white, NOT the themed body background: a signature is ink on paper. On a dark theme a themed (dark) canvas hides the ink while drawing, pushing users to pick a light pen whose stroke then vanishes on light backgrounds everywhere the signature is shown. */ background-color: #ffffff; touch-action: none; cursor: crosshair; width: 100%; height: 10rem; &:focus { outline: none; border-color: var(--bs-primary); box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25); } } .mwu-signaturePadPlaceholder-c1299a9 { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; /* Fixed muted grey, legible on the white paper canvas on any theme (the themed secondary colour goes light on dark themes and would disappear against the paper). */ color: #6c757d; pointer-events: none; opacity: 0.5; font-size: 0.875rem; & svg { width: 1.5rem; height: 1.5rem; } } } .mwu-signaturePadColors-c1299a9 { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; .mwu-signaturePadColorSwatch-c1299a9 { width: 1.5rem; height: 1.5rem; border-radius: 999px; border: none; padding: 0; cursor: pointer; transition: transform 80ms ease-out, box-shadow 80ms ease-out; &:hover:not(:disabled) { transform: scale(1.08); } &:disabled { cursor: not-allowed; opacity: 0.5; } &.mwu-signaturePadColorSwatchActive-c1299a9 { box-shadow: 0 0 0 2px var(--bs-body-bg), 0 0 0 4px var(--bs-primary); } } .mwu-signaturePadColorPicker-c1299a9 { position: relative; display: inline-flex; width: 1.75rem; height: 1.75rem; border-radius: 999px; /* The native control paints itself with its own value, so bound to the pen it reads as one more ink swatch. The full hue circle is what says "any colour"; the hues are fixed, never themed. */ background: conic-gradient( #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000 ); cursor: pointer; & input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: none; background: transparent; opacity: 0; cursor: inherit; } /* Focus lands on the transparent input, where its ring cannot be seen. Keyboard focus only: a ring left behind after a click reads as "this is the selected ink", which the chosen colour's own swatch already says. */ &:has(input:focus-visible) { outline: 2px solid var(--bs-primary); outline-offset: 2px; } &.mwu-signaturePadColorPickerDisabled-c1299a9 { cursor: not-allowed; opacity: 0.5; } } } .mwu-signaturePadToolbar-c1299a9 { display: flex; gap: 0.375rem; align-items: center; /* Centre the icon against its label here rather than relying on the host app's global `svg[role="graphics-symbol"]` nudge: `bins/erp` defines one, `bins/connect` does not, so a baseline-aligned icon sits low in some of the apps embedding this pad. */ .btn { display: inline-flex; align-items: center; } } } .mwu-itemSelector-35f8174 { h1.d-inline-block + & { vertical-align: text-bottom; margin-bottom: -0.25rem; } .form-control.form-select { padding: 0; } .form-control.form-select:focus, .form-control.form-select:focus-within, .dropdown-toggle.show { border-color: var(--bs-primary-bg-subtle) !important; box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25) !important; outline: 0; } button.mwu-dropdownToggle-35f8174 { position: relative; padding-inline-end: 2rem; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; border: none; &::after { position: absolute; inset-inline-end: 0.75rem; top: 50%; transform: translateY(-50%); } } .input-group > & { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; &:hover { z-index: 2; } &:focus-within, &:has(.dropdown-toggle.show) { z-index: 5; } &:not(:first-child) .form-control.form-select { border-start-start-radius: 0; border-end-start-radius: 0; } &:not(:last-child) .form-control.form-select { border-start-end-radius: 0; border-end-end-radius: 0; } } } .mwu-menu-35f8174 { max-height: 66vh; display: flex; flex-direction: column; overflow: hidden; .mwu-header-35f8174 { background: var(--bs-border-color); flex-shrink: 0; .input-group { flex-wrap: nowrap; input { min-width: 15ex; } } } .mwu-tableWrapper-35f8174 { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; } tr { cursor: pointer; .mwu-choiceDisplay-35f8174 { padding-inline-end: 1.5rem; display: flex; align-items: center; gap: 0.75rem; img { flex-shrink: 0; max-height: 2rem; max-width: 2rem; } } } } /* Immediate CSS hover tip for icons / icon+label triggers. `Icon` does not forward a native `title` onto the SVG; browser `title` on a wrapper is delayed and unreliable for dense table glyphs. Selectors are flat (no CSS nesting) so hide-by-default still works when the stylesheet is served as the raw stylance bundle. */ .mwu-statusTooltip-65bdbd0 { position: relative; display: inline-flex; cursor: help; z-index: 2; } .mwu-statusTooltip-65bdbd0 svg { pointer-events: none; } .mwu-statusTooltipText-65bdbd0 { position: absolute; inset-inline-start: 50%; bottom: calc(100% + 0.35rem); transform: translate(-50%, 0.2rem); width: max-content; max-width: 14rem; padding: 0.25rem 0.5rem; border-radius: var(--bs-border-radius, 0.375rem); background-color: var(--bs-emphasis-color); color: var(--bs-body-bg); font-size: 0.8125rem; line-height: 1.25; text-align: center; white-space: normal; box-shadow: var(--bs-box-shadow-sm); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 120ms ease, transform 120ms ease, visibility 120ms ease; z-index: var(--bs-tooltip-zindex, 1080); } /* Open below (e.g. sticky table headers). */ .mwu-statusTooltipBelow-65bdbd0 .mwu-statusTooltipText-65bdbd0 { bottom: auto; top: calc(100% + 0.35rem); transform: translate(-50%, -0.2rem); } .mwu-statusTooltip-65bdbd0:hover, .mwu-statusTooltip-65bdbd0:focus-within { z-index: var(--bs-tooltip-zindex, 1080); } .mwu-statusTooltip-65bdbd0:hover .mwu-statusTooltipText-65bdbd0, .mwu-statusTooltip-65bdbd0:focus-within .mwu-statusTooltipText-65bdbd0 { opacity: 0.95; visibility: visible; transform: translate(-50%, 0); } .mwu-textareaWithChangeLog-c79b8fb { textarea { field-sizing: content; } .mwu-changeLog-c79b8fb { padding-inline-start: 1rem; padding-inline-end: 1rem; padding-top: 1rem; &:hover { background-color: var(--bs-secondary-bg-subtle) !important; } &:not(:last-child) { border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color); } .mwu-text-c79b8fb { white-space: pre-wrap; margin-inline-start: calc(32px + 0.5rem); padding-bottom: 1rem; &.mwu-markdown-c79b8fb { white-space: normal; /* The previewer's one wrapper div: its last block's margin * would otherwise stack on the entry's padding. */ > div > :last-child { margin-bottom: 0; } } } } } .mwu-widthMedium-3caedb5 { width: 6.5rem !important; } .mwu-clickable-2fce5fe { cursor: pointer; } .mwu-fileTree-b2d1e75 { .mwu-treeRow-b2d1e75 { --levelPadding: 1.5rem; .mwu-content-b2d1e75 { &.mwu-folder-b2d1e75 { font-weight: 500; } a:not(:hover), .mwu-folderOpen-b2d1e75 { color: var(--bs-body-color); text-decoration: none; } } /* Drag over state */ &:has(.mwu-content-b2d1e75.mwu-dragOver-b2d1e75) td { background-color: rgba(13, 110, 253, 0.08) !important; box-shadow: inset 0 0 0 2px rgba(13, 110, 253, 0.3); } [data-bs-theme="dark"] &:has(.mwu-content-b2d1e75.mwu-dragOver-b2d1e75) td { background-color: rgba(13, 110, 253, 0.15) !important; box-shadow: inset 0 0 0 2px rgba(13, 110, 253, 0.4); } } .mwu-folderHighlighted-b2d1e75 > td.mwu-content-b2d1e75 a > span { color: var(--bs-warning) !important; } .mwu-eyeIcon-b2d1e75 { color: var(--bs-warning); } } .mwu-treeView-15487f8 { --tree-line-color: var(--bs-border-color); --tree-hover-bg: var(--bs-tertiary-bg); --tree-button-bg: var(--bs-body-bg); --tree-button-fg: var(--bs-tertiary-color); --tree-node-height: 1.75rem; overflow: clip; & .mwu-treeList-15487f8 { list-style: none; margin: 0; padding: 0; } } .mwu-treeNode-15487f8 { position: relative; line-height: 1; & .mwu-treeNodeContent-15487f8 { display: flex; align-items: center; height: var(--tree-node-height); padding: 0 0.5rem; cursor: default; border-radius: 0.25rem; transition: background-color 0.15s ease; &:hover { background-color: var(--tree-hover-bg); } & .mwu-treeIndent-15487f8 { display: inline-flex; align-items: stretch; height: 100%; & .mwu-treeLine-15487f8 { width: 1.25rem; position: relative; flex-shrink: 0; /* Vertical line - full height to connect nodes */ &::before { content: ""; position: absolute; inset-inline-start: 0.525rem; top: calc(-0.26 * var(--tree-node-height)); bottom: calc(-0.5 * var(--tree-node-height)); width: 1px; background-color: var(--tree-line-color); } /* Horizontal connector */ &::after { content: ""; position: absolute; inset-inline-start: 0.525rem; top: 50%; width: 0.625rem; height: 1px; background-color: var(--tree-line-color); } /* Last child - vertical line only goes to middle */ &.mwu-lastChild-15487f8::before { bottom: 50%; } /* Empty - no lines (for ancestors where parent was last child) */ &.mwu-empty-15487f8::before, &.mwu-empty-15487f8::after { display: none; } /* Continuation - only vertical line, no horizontal */ &.mwu-continuation-15487f8::after { display: none; } } } & .mwu-toggleBtn-15487f8 { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; margin-inline-end: 0.375rem; z-index: 2; padding: 0; border: none; cursor: pointer; border-radius: 0.1875rem; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); transition: all 0.15s ease; background: var(--tree-button-bg); color: var(--tree-button-fg); &:hover { background-color: var(--bs-gray-300); color: var(--bs-gray-700); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } &:focus { outline: none; } svg { width: 1rem; height: 1rem; } } & .mwu-nodeLabel-15487f8 { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; padding: 0.5rem 0; } } & .mwu-childrenList-15487f8 { list-style: none; margin: 0; padding: 0; } } .mwu-fieldColumn-bb911bf { text-wrap: nowrap; } .mwu-messageColumn-bb911bf { width: 100%; } /* Upload progress panel - floating panel in the bottom trailing corner */ .mwu-uploadProgressPanel-1620f5d { position: fixed; bottom: 20px; inset-inline-end: 20px; width: 350px; max-height: 300px; overflow-y: auto; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1050; padding: 12px; & .mwu-uploadProgressHeader-1620f5d { display: flex; align-items: center; font-weight: 600; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--bs-border-color); color: var(--bs-primary); } & .mwu-uploadProgressList-1620f5d { display: flex; flex-direction: column; gap: 8px; & .mwu-uploadProgressItem-1620f5d { display: flex; flex-direction: column; gap: 4px; & .mwu-uploadProgressFilename-1620f5d { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--bs-body-color); } & .mwu-uploadProgressBar-1620f5d { height: 6px; & .mwu-uploadProgressFill-1620f5d { width: 0%; } } & .mwu-uploadProgressProcessing-1620f5d { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--bs-secondary-color); & .mwu-uploadProgressSpinner-1620f5d { width: 0.75rem; height: 0.75rem; } } } } } .mwu-validationDecorator-977a271 { &.is-invalid { label, .invalid-feedback, .form-check-label { display: inherit; color: var(--bs-danger); } } /* Only style as valid when no invalid sits lower in the chain. */ &.is-valid:not(:has(.is-invalid)) { label, .invalid-feedback, .form-check-label { color: var(--bs-success); } } /* An invalid higher in the chain wins over a nested valid. */ .is-invalid &.is-valid { label, .invalid-feedback, .form-check-label { color: var(--bs-danger); } } &.is-warning { label, .invalid-feedback { color: var(--bs-warning); } .form-select, .form-control, .form-check-label { color: var(--bs-warning); border-color: var(--bs-warning-border-subtle) !important; padding-inline-end: calc(1.5em + 0.75rem); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23a48433'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right calc(0.375em + 0.1875rem) center; background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } } }