/* /Components/Layout/ReconnectModal.razor.rz.scp.css */ .components-reconnect-first-attempt-visible[b-ebk6j5auft], .components-reconnect-repeated-attempt-visible[b-ebk6j5auft], .components-reconnect-failed-visible[b-ebk6j5auft], .components-pause-visible[b-ebk6j5auft], .components-resume-failed-visible[b-ebk6j5auft], .components-rejoining-animation[b-ebk6j5auft] { display: none; } #components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-ebk6j5auft], #components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-ebk6j5auft], #components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-ebk6j5auft], #components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-ebk6j5auft], #components-reconnect-modal.components-reconnect-retrying[b-ebk6j5auft], #components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-ebk6j5auft], #components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-ebk6j5auft], #components-reconnect-modal.components-reconnect-failed[b-ebk6j5auft], #components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-ebk6j5auft] { display: block; } /* Tokens, not the template's literal white: the dialog sits in the top layer but still inherits custom properties down the DOM, so data-bs-theme on reaches it. secondary-bg, because body-bg is the page itself and a dialog has to lift off it. */ #components-reconnect-modal[b-ebk6j5auft] { background-color: var(--bs-secondary-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); width: 20rem; margin: 20vh auto; padding: 2rem; border-radius: 0.5rem; box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3); opacity: 0; transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete; animation: components-reconnect-modal-fadeOutOpacity-b-ebk6j5auft 0.5s both; &[open] { animation: components-reconnect-modal-slideUp-b-ebk6j5auft 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-ebk6j5auft 0.5s ease-in-out 0.3s; animation-fill-mode: both; } } #components-reconnect-modal[b-ebk6j5auft]::backdrop { background-color: rgba(0, 0, 0, 0.4); animation: components-reconnect-modal-fadeInOpacity-b-ebk6j5auft 0.5s ease-in-out; opacity: 1; } @keyframes components-reconnect-modal-slideUp-b-ebk6j5auft { 0% { transform: translateY(30px) scale(0.95); } 100% { transform: translateY(0); } } @keyframes components-reconnect-modal-fadeInOpacity-b-ebk6j5auft { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes components-reconnect-modal-fadeOutOpacity-b-ebk6j5auft { 0% { opacity: 1; } 100% { opacity: 0; } } .components-reconnect-container[b-ebk6j5auft] { display: flex; flex-direction: column; align-items: center; gap: 1rem; } #components-reconnect-modal p[b-ebk6j5auft] { margin: 0; text-align: center; } #components-reconnect-modal button[b-ebk6j5auft] { border: 0; background-color: var(--bs-primary); color: #fff; padding: 4px 24px; border-radius: 4px; } #components-reconnect-modal button:hover[b-ebk6j5auft], #components-reconnect-modal button:active[b-ebk6j5auft] { background-color: rgba(var(--bs-primary-rgb), .85); } .components-rejoining-animation[b-ebk6j5auft] { position: relative; width: 80px; height: 80px; } .components-rejoining-animation div[b-ebk6j5auft] { position: absolute; border: 3px solid var(--bs-primary); opacity: 1; border-radius: 50%; animation: components-rejoining-animation-b-ebk6j5auft 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite; } .components-rejoining-animation div:nth-child(2)[b-ebk6j5auft] { animation-delay: -0.5s; } @keyframes components-rejoining-animation-b-ebk6j5auft { 0% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; } 4.9% { top: 40px; left: 40px; width: 0; height: 0; opacity: 0; } 5% { top: 40px; left: 40px; width: 0; height: 0; opacity: 1; } 100% { top: 0px; left: 0px; width: 80px; height: 80px; opacity: 0; } } /* /Components/Pages/EFaSi/Form.razor.rz.scp.css */ [b-claytctwdr] .table .fr .form-check, [b-claytctwdr] .table-card .table-row .table-cell:first-child { display: none } [b-claytctwdr] .table-excel.table > :not(caption):not(thead) > * > * { padding: .75rem .75rem; vertical-align: middle; } [b-claytctwdr] .table-excel > tbody > tr:nth-of-type(odd) > * { --bs-table-color-type: var(--bs-table-striped-color); --bs-table-bg-type: var(--bs-table-striped-bg) } /* /Components/Pages/EFaSi/Index.razor.rz.scp.css */ [b-e5mwhwzjx8] .table .fr .form-check, [b-e5mwhwzjx8] .table-card .table-row .table-cell:first-child { display: none } [b-e5mwhwzjx8] .table-excel.table > :not(caption):not(thead) > * > * { padding: .75rem .75rem; vertical-align: middle; } [b-e5mwhwzjx8] .table-excel > tbody > tr:nth-of-type(odd) > * { --bs-table-color-type: var(--bs-table-striped-color); --bs-table-bg-type: var(--bs-table-striped-bg) } /* /Components/Pages/Rental/RentalCalendar.razor.rz.scp.css */ /* All rules need ::deep: the markup comes from the BootstrapBlazor Calendar. */ /* Header is a nowrap flex row; on narrow screens its nav buttons become unreachable. */ [b-vzsv2b40jn] .calendar-header { flex-wrap: wrap; gap: .5rem; justify-content: center; } [b-vzsv2b40jn] .calendar-button-group { display: flex; flex-wrap: wrap; justify-content: center; /* min-width:0 lets the group shrink below its content width so wrapping can happen. */ min-width: 0; max-width: 100%; } @media (max-width: 575.98px) { /* Keep only the month steps and today; the year jumps are reachable by stepping. */ [b-vzsv2b40jn] .calendar-button-group .btn:first-child, [b-vzsv2b40jn] .calendar-button-group .btn:last-child { display: none; } [b-vzsv2b40jn] .calendar-title { width: 100%; text-align: center; } [b-vzsv2b40jn] .calendar-header { padding: .75rem .5rem; } [b-vzsv2b40jn] .calendar-button-group .btn { padding: 6px 8px; font-size: .7rem; } [b-vzsv2b40jn] .calendar-table-row .rental-cell { padding: 4px; } } /* Under a CellTemplate BootstrapBlazor emits no table cells, hence the 7-column grid. */ [b-vzsv2b40jn] .calendar-table, [b-vzsv2b40jn] .calendar-table tbody { display: block; } [b-vzsv2b40jn] .calendar-table-row { display: grid !important; grid-template-columns: repeat(7, 1fr); border-top: var(--bs-border-width) solid var(--bs-border-color); border-left: var(--bs-border-width) solid var(--bs-border-color); } /* Only the row becomes a grid — making thead one too would shrink the row to content width. */ [b-vzsv2b40jn] .calendar-table thead { display: block; } [b-vzsv2b40jn] .calendar-table thead tr { display: grid; grid-template-columns: repeat(7, 1fr); } /* Fixed size regardless of entry count or name length, else a long title stretches the grid. Height is hard-coded, not the component's variable: three bookings must fit unclipped. */ [b-vzsv2b40jn] .calendar-table-row .rental-cell { position: relative; height: 96px; min-width: 0; overflow: hidden; padding: 6px 5px; border-bottom: var(--bs-border-width) solid var(--bs-border-color); border-right: var(--bs-border-width) solid var(--bs-border-color); transition: background-color .2s ease; } [b-vzsv2b40jn] .rental-cell-day { font-weight: 500; line-height: 1.2; } [b-vzsv2b40jn] .rental-cell-bookable { cursor: pointer; } [b-vzsv2b40jn] .rental-cell-bookable:hover { background-color: var(--bb-calendar-cell-hover-bg, rgba(0, 0, 0, .06)); } /* Vertically centred on the day number, just inside the corner. Height matches the day line-height (1.2 × .875rem base) so both share a centre line. */ [b-vzsv2b40jn] .rental-cell-bookable::after { content: "+"; position: absolute; top: 6px; right: .4rem; height: 1.05rem; display: flex; align-items: center; font-size: 1.35rem; line-height: 1; font-weight: 700; color: var(--bs-primary); opacity: 0; transition: opacity .12s ease-in-out; } [b-vzsv2b40jn] .rental-cell-bookable:hover::after { opacity: 1; } /* Solid equipment colour with white text throughout. */ [b-vzsv2b40jn] .rental-cell-entry { display: block; cursor: pointer; background-color: var(--rental-color, #B02A2A); color: #fff; padding: .15rem .45rem; margin-top: .15rem; /* Pill shape so the entry reads as a badge rather than a button. */ border-radius: 999px; min-width: 0; } [b-vzsv2b40jn] .rental-cell-entry:hover { filter: brightness(1.12); } /* Truncate on the span, not the entry: only it carries text, so the cell keeps its width. */ [b-vzsv2b40jn] .rental-cell-org { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; line-height: 1.15; font-weight: 500; color: inherit; } [b-vzsv2b40jn] .rental-popover { min-width: 11rem; } /* Inactive: outline only. Active: solid, same as the cell entries. */ [b-vzsv2b40jn] .rental-filter { border: var(--bs-border-width) solid var(--rental-color); background-color: transparent; color: var(--bs-secondary-color); /* Pill shape, matching the calendar entries. */ border-radius: 999px; padding-inline: .7rem; } [b-vzsv2b40jn] .rental-filter:hover { background-color: color-mix(in srgb, var(--rental-color) 12%, transparent); } [b-vzsv2b40jn] .rental-filter-active { background-color: var(--rental-color); border-color: var(--rental-color); color: #fff; font-weight: 600; } [b-vzsv2b40jn] .rental-filter-active:hover { background-color: var(--rental-color); color: #fff; filter: brightness(1.12); } /* /Components/Pages/Utility/MsContact/MsContactSyncRuns.razor.rz.scp.css */ /* styles for MsContactSyncRuns list */ .table-sm td[b-jp7ye1p1sc], .table-sm th[b-jp7ye1p1sc] { vertical-align: middle; } /* /Components/Pages/Utility/Signature/Signature.razor.rz.scp.css */ /* The signature carries fixed mail-client colours, so the preview supplies the ground and lifts the text the way a dark-mode client does. Inset panel, because white on white is as indistinguishable as dark on dark. ::deep, since the signature is a MarkupString and carries no scope attributes. */ .signature-preview[b-99h254gw16] { padding: 1.25rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); background: #ffffff; } [data-bs-theme="dark"] .signature-preview[b-99h254gw16] { background: #1b1f2b; } [data-bs-theme="dark"] .signature-preview[b-99h254gw16] td, [data-bs-theme="dark"] .signature-preview[b-99h254gw16] div, [data-bs-theme="dark"] .signature-preview[b-99h254gw16] a[href^="tel:"] { color: #eef1f8 !important; } [data-bs-theme="dark"] .signature-preview[b-99h254gw16] a[href^="mailto:"], [data-bs-theme="dark"] .signature-preview[b-99h254gw16] a[href^="https:"], [data-bs-theme="dark"] .signature-preview[b-99h254gw16] div[style*="d92529"] { color: #ff6257 !important; } /* /Components/Pages/Youth/Swim/Snippets/SwimTimePlanner.razor.rz.scp.css */ /* One row per time slot. The rhythm is set here rather than with utility classes because the slider brings its own bottom margin, which made the gap under a row smaller than the one above it and the whole column look lopsided. */ .slot-row[b-ibv2av8a26] { padding-block: 0.55rem; } .slot-row[b-ibv2av8a26] > * { margin-bottom: 0; } /* The slider's own wrapper, whatever BootstrapBlazor renders it as. */ .slot-slider[b-ibv2av8a26] * { margin-bottom: 0; } /* /Components/Pages/Zen/Snippets/ZenPersonSearch.razor.rz.scp.css */ /* AutoFill has no flip logic of its own. */ .zen-search-dropup[b-w9shiradmw] .auto-complete .dropdown-menu { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 0.125rem; } /* /Components/Pages/Zen/Snippets/ZenVehicleSearch.razor.rz.scp.css */ /* AutoFill has no flip logic of its own. */ .zen-search-dropup[b-mejtwzgcb5] .auto-complete .dropdown-menu { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 0.125rem; }