[x-cloak] {
    display: none !important;
}

:root {
    --app-surface-canvas: var(--bs-tertiary-bg);
    --app-surface-panel: var(--bs-body-bg);
    --app-surface-muted: var(--bs-secondary-bg);
    --app-surface-hover: var(--bs-tertiary-bg);
    --app-border-color: var(--bs-border-color);
    --app-border-color-subtle: var(--bs-border-color-translucent);
    --app-border: var(--bs-border-width) solid var(--app-border-color);
    --app-border-subtle:
        var(--bs-border-width) solid var(--app-border-color-subtle);
    --app-radius-control: var(--bs-border-radius);
    --app-radius-panel: var(--bs-border-radius-lg);
    --app-control-height: 2.5rem;
    --app-control-height-sm: 2.25rem;
    --app-icon-size: 1rem;
    --app-transition-fast: 160ms ease;
    --app-primary-hover-bg: rgba(var(--bs-primary-rgb), 0.08);
    --app-primary-active-bg: rgba(var(--bs-primary-rgb), 0.14);
    --app-primary-active-border: rgba(var(--bs-primary-rgb), 0.35);
    --app-focus-ring: rgba(var(--bs-primary-rgb), 0.3);
    --app-shadow-sm: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.06);
    --app-shadow-overlay: 0 0.75rem 2rem rgba(0, 0, 0, 0.14);
    --app-media-surface: #000;
    --app-media-foreground: #fff;
    --app-media-control-bg: rgba(0, 0, 0, 0.72);
    --app-media-overlay-bg: rgba(0, 0, 0, 0.6);
    --app-media-overlay-strong-bg: rgba(0, 0, 0, 0.88);

    --app-surface-elevated: var(--bs-body-bg);
    --app-surface-selected: var(--app-primary-active-bg);

    --app-foreground-strong: var(--bs-emphasis-color);
    --app-foreground: var(--bs-body-color);
    --app-foreground-secondary: var(--bs-secondary-color);
    --app-foreground-disabled: var(--bs-secondary-color);
    --app-foreground-inverse: var(--bs-body-bg);

    --app-outline: var(--app-border-color);
    --app-outline-subtle: var(--app-border-color-subtle);
    --app-outline-focus: var(--app-focus-ring);

    --app-action-primary: var(--bs-primary);
    --app-action-primary-hover: var(--app-primary-hover-bg);
    --app-action-danger: var(--bs-danger);

    --app-elevation-control: var(--app-shadow-sm);
    --app-elevation-panel: var(--app-shadow-sm);
    --app-elevation-modal: var(--app-shadow-overlay);

    --app-control-height-lg: 3rem;
    --app-control-size-map: 2rem;

    --app-radius-pill: 50rem;
    --app-radius-circle: 50%;

    --app-motion-fast: var(--app-transition-fast);
    --app-motion-panel: 240ms ease;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --app-transition-fast: 0ms;
        --app-motion-fast: 0ms;
        --app-motion-panel: 0ms;
    }
}

[data-bs-theme="dark"] {
    --app-shadow-sm: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.22);
    --app-shadow-overlay: 0 0.75rem 2rem rgba(0, 0, 0, 0.38);
}

html {
    scrollbar-gutter: stable;
}

body {
    background-color: var(--app-surface-canvas);
}

a {
    text-underline-offset: 0.18em;
}

:where(a, button, [role="button"], [tabindex]):focus-visible {
    outline: 0.1875rem solid var(--app-focus-ring);
    outline-offset: 0.125rem;
}

.shadow-sm {
    box-shadow: var(--app-shadow-sm) !important;
}

.app-surface-panel,
.app-filter-panel,
.app-summary-card {
    background-color: var(--app-surface-panel);
    border: var(--app-border);
    border-radius: var(--app-radius-panel);
}

.app-section-header {
    padding: 1rem 1.25rem;
    border-bottom: var(--app-border);
}

.app-section-body {
    padding: 1.25rem;
}

.app-section-title {
    margin-bottom: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.app-section-description {
    margin-top: 0.375rem;
    margin-bottom: 0;
    color: var(--app-foreground-secondary);
}

.app-divider {
    border-color: var(--app-outline) !important;
}

.app-list-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding-block: 0.5rem;
    border-bottom: var(--app-border-subtle);
}

.app-list-row:last-child {
    border-bottom: 0;
}

.app-list-row-label {
    flex: 0 0 40%;
    min-width: 0;
    color: var(--app-foreground-secondary);
}

.app-list-row-value {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

.app-action-group,
.app-action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.app-page-stack {
    display: grid;
    gap: 1.5rem;
}

.app-page-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.app-page-heading {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: var(--app-border-subtle);
}

.app-page-title {
    margin-bottom: 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.app-page-description {
    margin-top: 0.375rem;
    margin-bottom: 0;
    color: var(--app-foreground-secondary);
}

.app-metadata-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: 0.75rem;
    color: var(--app-foreground-secondary);
    font-size: 0.875rem;
}



.app-summary-card {
    height: 100%;
}

.app-summary-card .card-body {
    padding: 1.25rem;
}

.card {
    --bs-card-bg: var(--app-surface-panel);
    --bs-card-border-color: var(--app-outline);
    --bs-card-border-radius: var(--app-radius-panel);
}

.app-component {
    overflow: hidden;
}

.app-component-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-top: var(--app-border);
    background-color: var(--app-surface-panel);
}

.app-assignment-action {
    flex: 0 0 auto;
}

.app-data-table {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: var(--app-surface-hover);
    --bs-table-border-color: var(--app-outline-subtle);
}

.app-data-table thead th {
    padding-block: 0.75rem;
    color: var(--app-foreground-secondary);
    background-color: transparent;
    border-bottom-color: var(--app-outline);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.app-data-table tbody tr[aria-selected="true"] > * {
    background-color: var(--app-surface-selected);
}

.app-data-table tbody td {
    padding-block: 0.75rem;
}

.app-data-table tbody tr:last-child td {
    border-bottom: 0;
}

.app-color-swatch {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    flex: 0 0 0.875rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-sm);
    background-color: var(--app-color-swatch);
}

.app-empty-state {
    padding: 3rem 1rem !important;
    color: var(--app-foreground-secondary);
    text-align: center;
}

.app-pagination {
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-padding-y: 0.375rem;
    --bs-pagination-border-color: var(--app-border-color);
    --bs-pagination-hover-bg: var(--app-surface-hover);
}

.app-pagination .page-link {
    min-width: var(--app-control-height-sm);
    text-align: center;
}

.app-modal-content {
    overflow: hidden;
    border-color: var(--app-border-color);
    border-radius: var(--app-radius-panel);
    box-shadow: var(--app-shadow-overlay);
}

.app-modal-content .modal-header,
.app-modal-content .modal-footer {
    background-color: var(--app-surface-panel);
}

.app-modal-content .modal-header {
    padding: 0.75rem 1rem;
    border-bottom-color: var(--app-outline);
}

.app-modal-content .modal-footer {
    padding: 0.75rem 1rem;
    border-top-color: var(--app-outline);
}

.form-label {
    margin-bottom: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.form-control:not(.form-control-sm):not(textarea),
.form-select:not(.form-select-sm) {
    min-height: var(--app-control-height);
}

.input-group-sm > .form-control,
.input-group-sm > .form-select {
    min-height: auto;
}

.modal-dialog-scrollable .app-modal-content > form {
    display: flex;
    max-height: 100%;
    flex-direction: column;
    overflow: hidden;
}

.modal-dialog-scrollable .app-modal-content > form .modal-body {
    overflow-y: auto;
}

.app-metadata-list dt,
.app-metadata-list dd {
    padding-block: 0.75rem;
    border-bottom: var(--app-border-subtle);
}

.app-metadata-list dd {
    overflow-wrap: anywhere;
}

.app-metadata-list dt:last-of-type,
.app-metadata-list dd:last-child {
    border-bottom: 0;
}

.app-breadcrumb {
    --bs-breadcrumb-divider-color: var(--app-foreground-secondary);
    --bs-breadcrumb-item-active-color: var(--app-foreground-secondary);
    font-size: 0.875rem;
}

.app-error-alert {
    border-color: var(--bs-danger-border-subtle);
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
    border-radius: var(--app-radius-panel);
}

.app-auth-page,
.app-error-page {
    min-height: 100dvh;
    background-color: var(--app-surface-canvas);
}

.app-auth-tools,
.app-error-tools {
    position: fixed;
    z-index: 1030;
    top: 1rem;
    right: 1rem;
}

.app-auth-layout {
    min-height: 100dvh;
}

.app-auth-intro,
.app-auth-form-column {
    display: flex;
    align-items: center;
    padding: clamp(2rem, 6vw, 6rem);
}

.app-auth-intro {
    background-color: var(--app-surface-panel);
    border-right: var(--app-border);
}

.app-auth-intro-content {
    width: min(100%, 34rem);
    margin-inline: auto;
}

.app-auth-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    color: var(--app-foreground-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.app-auth-brand-mark {
    height: 2.25rem;
    width: auto;
    max-width: min(100%, 16rem);
    object-fit: contain;
}

.app-auth-hero-title {
    max-width: 13ch;
    margin-bottom: 0;
    font-size: clamp(2rem, 4vw, 3.75rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.app-auth-form-column {
    justify-content: center;
}

.app-auth-panel {
    width: min(100%, 30rem);
    overflow: hidden;
}

.app-auth-panel-body {
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

.app-profile-avatar {
    width: 10rem;
    height: 10rem;
}

.app-profile-avatar-action {
    width: var(--app-control-height);
    height: var(--app-control-height);
}

.app-profile-layout > [class*="col-"] {
    min-width: 0;
}

.app-profile-summary .app-section-body {
    align-content: center;
}

.app-profile-settings,
.app-profile-form,
.app-profile-avatar-page,
#profile-avatar-workspace {
    min-width: 0;
}

.app-error-layout {
    display: grid;
    min-height: 100dvh;
    padding: 4rem 1rem;
    place-items: center;
}

.app-error-panel {
    width: min(100%, 34rem);
    padding: clamp(2rem, 6vw, 4rem);
    text-align: center;
}

.app-error-code {
    max-width: 100%;
    margin-bottom: 1rem;
    font-size: clamp(3rem, 10vw, 5rem);
    font-weight: 600;
    letter-spacing: -0.04em;
    line-height: 1;
    overflow-wrap: anywhere;
}

.app-error-path {
    overflow-wrap: anywhere;
}

.app-htmx-error {
    width: min(26rem, calc(100vw - 2rem));
    box-shadow: var(--app-shadow-overlay);
}

.htmx-request {
    cursor: progress;
}

.app-request-busy {
    cursor: progress;
}

.htmx-request button[type="submit"],
.htmx-request [hx-disabled-elt="this"] {
    opacity: 0.65;
}

.min-w-0 {
    min-width: 0;
}

.app-header-action {
    border-radius: var(--app-radius-control);
    transition:
        color var(--app-motion-fast),
        background-color var(--app-motion-fast),
        border-color var(--app-motion-fast);
}

.app-header-brand-logo {
    height: 36px;
    width: auto;
    object-fit: contain;
}

.app-notification-dropdown {
    width: min(22rem, calc(100vw - 1rem));
}

.app-notification-list {
    max-height: min(32rem, 70vh);
    overflow-y: auto;
}

.app-notification-item {
    color: var(--bs-body-color);
}

.app-notification-item:hover,
.app-notification-item:focus-visible {
    background-color: var(--bs-tertiary-bg);
}

.app-notification-type-icon {
    width: var(--app-control-height-sm);
    height: var(--app-control-height-sm);
    flex: 0 0 var(--app-control-height-sm);
}

.app-notification-copy {
    min-width: 0;
}

.app-notification-unread-indicator {
    margin-top: 0.35rem;
    font-size: 0.45rem;
}

.app-loader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    background: rgba(var(--bs-body-bg-rgb), 0.72);
    backdrop-filter: blur(2px);
}

.app-loader[hidden] {
    display: none;
}

.app-media-preview-content {
    max-height: 70vh;
    object-fit: contain;
}

.app-media-preview-player .video-js {
    width: 100%;
    overflow: hidden;
    border-radius: var(--bs-border-radius);
    background-color: var(--app-media-surface);
    color: var(--app-media-foreground);
    font-family: var(--bs-body-font-family);
}

.app-media-preview-player .video-js .vjs-control-bar {
    background-color: var(--app-media-control-bg);
}

.app-media-preview-player .video-js .vjs-big-play-button {
    border: 0;
    border-radius: var(--bs-border-radius-pill);
    background-color: rgba(var(--bs-primary-rgb), 0.9);
}

.app-media-preview-player .video-js:hover .vjs-big-play-button,
.app-media-preview-player .video-js .vjs-big-play-button:focus {
    background-color: var(--bs-primary);
}

.app-media-preview-player .video-js .vjs-play-progress,
.app-media-preview-player .video-js .vjs-volume-level {
    background-color: var(--bs-primary);
}

.app-media-preview-player .video-js .vjs-menu-content {
    color: var(--bs-body-color);
    background-color: rgba(var(--bs-body-bg-rgb), 0.96);
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.app-media-preview-player .video-js .vjs-menu li.vjs-selected {
    color: var(--app-media-foreground);
    background-color: var(--bs-primary);
}

.app-media-preview-player .video-js .vjs-quality-selector {
    min-width: 7em;
}

.app-media-preview-audio.video-js {
    width: 100%;
    height: 3rem;
}

.app-media-preview-message {
    min-height: 20rem;
}

.app-media-preview-body {
    display: flex;
    flex-direction: column;
    background-color: #000;
}

.app-media-preview-body > div {
    flex: 1 1 auto;
}

.modal-fullscreen .app-media-preview-content {
    max-height: calc(100dvh - 9rem);
}

.modal-fullscreen .app-media-preview-player {
    width: min(100%, 64rem);
    margin-inline: auto;
}

.app-map-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--app-control-size-map);
    height: var(--app-control-size-map);
    padding: 0;
    font-size: 0.875rem;
}

.app-map-control:not(.btn-primary) {
    border: var(--bs-border-width) solid var(--app-outline);
    background-color: var(--app-surface-panel);
    color: var(--app-foreground);
}

.app-map-control:not(.btn-primary):hover,
.app-map-control:not(.btn-primary):focus-visible {
    background-color: var(--app-surface-hover);
    color: var(--app-foreground-strong);
}

.app-map-control:not(.btn-primary).active {
    border-color: var(--app-action-primary);
    background-color: var(--app-action-primary);
    color: #fff;
}

.app-map-control.active .app-icon {
    --app-icon-fill: 1;
    --app-icon-weight: 500;
}

.app-map-control:disabled,
.app-map-control.disabled {
    color: var(--app-foreground-disabled);
}

.app-floating-panel {
    display: flex;
    flex-direction: column;
    border: var(--bs-border-width) solid var(--app-outline);
    border-radius: var(--app-radius-panel);
    background-color: var(--app-surface-panel);
    box-shadow: var(--app-elevation-panel);
}

.app-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--app-control-height-lg);
    height: var(--app-control-height-lg);
    padding: 0;
    border-radius: var(--app-radius-circle);
    font-size: 1.25rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
}

.app-icon-button {
    display: inline-grid;
    width: var(--app-control-height);
    min-width: var(--app-control-height);
    height: var(--app-control-height);
    min-height: var(--app-control-height);
    padding: 0.375rem;
    place-items: center;
}

.app-icon-button .app-icon {
    font-size: 1.25rem;
    line-height: 1;
}

.app-icon-spin {
    animation: app-icon-spin 1s linear infinite;
}

@keyframes app-icon-spin {
    to {
        transform: rotate(360deg);
    }
}

.app-media-hover-preview {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    background: var(--app-media-surface);
    pointer-events: none;
}

.app-media-hover-preview .video-js,
.app-media-hover-preview .vjs-tech {
    width: 100%;
    height: 100%;
}

.app-media-hover-preview .vjs-tech {
    object-fit: cover;
}

[data-media-gallery-card].is-media-previewing > .ratio > img,
[data-media-gallery-card].is-media-previewing > .ratio > .video-card-play,
[data-media-gallery-card].is-media-previewing.ratio > img,
[data-media-gallery-card].is-media-previewing.ratio > .video-card-play {
    visibility: hidden;
}

.app-media-upload-dropzone {
    cursor: pointer;
    border: 2px dashed var(--app-outline);
    transition:
        border-color var(--app-motion-fast),
        background-color var(--app-motion-fast);
}

.app-media-upload-dropzone:hover,
.app-media-upload-dropzone:focus-visible,
.app-media-upload-dropzone.is-dragging {
    border-color: var(--bs-primary);
    background-color: var(--app-primary-hover-bg);
    outline: 0;
}

@media (max-width: 575.98px) {
    .app-section-header,
    .app-section-body {
        padding-inline: 1rem;
    }

    .app-component-footer {
        padding-inline: 0.75rem;
    }

    .app-pagination {
        --bs-pagination-padding-x: 0.625rem;
    }

    .app-assignment-action,
    .app-assignment-action .btn {
        width: 100%;
    }

    .app-auth-tools,
    .app-error-tools {
        top: 0.75rem;
        right: 0.75rem;
    }

    .app-auth-intro,
    .app-auth-form-column {
        padding-inline: 1rem;
    }

    .app-auth-panel {
        border-radius: var(--app-radius-panel);
    }

}

@media (max-width: 767.98px) {
    .profile-page .social-content-column,
    .profile-avatar-page-shell .app-content-panel {
        padding-inline: 0;
    }

    .app-profile-layout {
        --bs-gutter-x: 0;
        --bs-gutter-y: 0.75rem;
        margin-inline: 0;
    }

    .app-profile-layout > [class*="col-"] {
        padding-inline: 0;
    }

    .app-profile-summary,
    .app-profile-settings,
    .profile-avatar-page-shell .app-filter-panel,
    .profile-avatar-page-shell #profile-avatar-workspace > .app-surface-panel {
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .app-profile-summary .app-section-body {
        gap: 1rem !important;
        padding-block: 1rem;
    }

    .app-profile-avatar {
        width: 7rem;
        height: 7rem;
    }

    .app-profile-avatar-action {
        width: 2.25rem;
        height: 2.25rem;
    }

    .app-profile-form {
        gap: 1rem !important;
    }

    .app-profile-remove,
    .app-profile-remove form,
    .app-profile-remove .btn,
    .app-profile-submit,
    .app-profile-submit .btn,
    .app-profile-avatar-toolbar,
    .app-profile-avatar-toolbar .btn,
    .app-profile-filter-actions {
        width: 100%;
    }

    .app-profile-submit .btn,
    .app-profile-avatar-toolbar .btn {
        justify-content: center;
    }

    .app-profile-filter-actions > .btn {
        flex: 1 1 0;
    }

    .app-profile-avatar-breadcrumb,
    .app-profile-avatar-toolbar {
        padding-inline: 0.75rem;
    }
}

@media (max-width: 991.98px) {
    .app-auth-layout {
        align-content: center;
        padding-block: 4.5rem 2rem;
    }

    .app-auth-intro {
        padding-block: 1.5rem 1rem;
        background-color: transparent;
        border-right: 0;
    }

    .app-auth-brand {
        margin-bottom: 0.75rem;
    }

    .app-auth-hero-title {
        max-width: 20ch;
        font-size: clamp(1.75rem, 8vw, 2.5rem);
    }

    .app-auth-form-column {
        padding-block: 1rem;
    }
}

@media (min-width: 992px) {
    .app-page-heading {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

.app-media-lightbox {
    background-color: #000;
}

.app-media-lightbox-close {
    position: absolute;
    top: clamp(0.75rem, 2vw, 1.25rem);
    right: clamp(0.75rem, 2vw, 1.25rem);
    z-index: 6;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: rgb(0 0 0 / 45%);
}

.app-media-lightbox-close:hover,
.app-media-lightbox-close:focus-within {
    background-color: rgb(0 0 0 / 70%);
}

.app-media-lightbox-close .btn-close {
    opacity: 1;
}

.app-media-lightbox .modal-footer {
    border-top-color: rgb(255 255 255 / 15%);
}

.property-media-gallery-modal .modal-dialog,
.property-media-gallery-modal .modal-content {
    min-height: 100%;
}

.property-media-gallery-carousel {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
    padding: 1rem clamp(4.5rem, 8vw, 7rem) 1rem;
}

.property-media-gallery-carousel .carousel-inner,
.property-media-gallery-carousel .carousel-item {
    min-height: 0;
    height: 100%;
}

.property-media-gallery-carousel .carousel-item {
    grid-template-rows: minmax(0, 1fr) auto;
}

.property-media-gallery-carousel .carousel-item.active,
.property-media-gallery-carousel .carousel-item-next,
.property-media-gallery-carousel .carousel-item-prev {
    display: grid;
}

.property-media-gallery-stage {
    position: relative;
    min-height: 0;
    overflow: hidden;
}

.property-media-gallery-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    margin: auto;
}

.property-media-gallery-stage .property-media-gallery-frame .property-media-gallery-video.video-js,
.property-media-gallery-stage .property-media-gallery-frame .property-media-gallery-video.video-js.vjs-fluid {
    width: 100%;
    height: 100%;
    padding-top: 0;
}

.property-media-gallery-video .vjs-tech,
.property-media-gallery-video .vjs-poster img {
    object-fit: contain;
}

.property-media-gallery-image {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0.25rem 1rem rgb(0 0 0 / 35%));
}

.property-media-gallery-caption {
    min-width: 0;
    padding-top: 0.75rem;
}

.property-media-gallery-thumbnails {
    position: static;
    justify-content: safe center;
    gap: 0.5rem;
    overflow-x: auto;
    margin: 0;
    padding: 0.75rem 0 0;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

.property-media-gallery-thumbnails [data-bs-target] {
    position: relative;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: clamp(3.5rem, 12vw, 4.5rem);
    height: clamp(3rem, 10vw, 4rem);
    padding: 0;
    margin: 0;
    overflow: hidden;
    text-indent: 0;
    border: 2px solid transparent;
    border-radius: var(--bs-border-radius);
    background-color: transparent;
    background-clip: border-box;
    opacity: 0.6;
}

.property-media-gallery-thumbnails .active {
    border-color: var(--bs-primary);
    opacity: 1;
}

.property-media-gallery-control {
    top: 50%;
    bottom: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-inline: clamp(0.75rem, 2vw, 2rem);
    padding: 0;
    transform: translateY(-50%);
    background-color: rgb(0 0 0 / 35%);
    opacity: 1;
    z-index: 4;
}

.property-media-gallery-control:hover,
.property-media-gallery-control:focus-visible {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary) !important;
}

@media (max-width: 575.98px) {
    .property-media-gallery-carousel {
        padding: 1rem 0.75rem 0.75rem;
    }

    .property-media-gallery-control {
        width: 2.5rem;
        height: 2.5rem;
        margin-inline: 0.5rem;
    }

    .property-media-gallery-caption {
        padding-inline: 0.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@font-face {
    font-family: "Material Symbols Rounded";
    font-style: normal;
    font-weight: 100 700;
    font-display: block;
    src: url("/vendor/material-symbols/font/material-symbols-rounded-subset.woff2") format("woff2");
}

.app-icon {
    --app-icon-fill: 0;
    --app-icon-weight: 400;
    --app-icon-grade: 0;
    display: inline-block;
    font-family: "Material Symbols Rounded";
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    font-variation-settings:
        "FILL" var(--app-icon-fill),
        "wght" var(--app-icon-weight),
        "GRAD" var(--app-icon-grade),
        "opsz" 24;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
    vertical-align: -0.125em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.app-icon::before {
    content: var(--app-icon-glyph);
}

.app-icon[data-icon="account"] { --app-icon-glyph: "\f20b"; }
.app-icon[data-icon="add"] { --app-icon-glyph: "\e145"; }
.app-icon[data-icon="attach"] { --app-icon-glyph: "\e226"; }
.app-icon[data-icon="audio"] { --app-icon-glyph: "\eb82"; }
.app-icon[data-icon="camera"] { --app-icon-glyph: "\e412"; }
.app-icon[data-icon="close"] { --app-icon-glyph: "\e5cd"; }
.app-icon[data-icon="confirm"] { --app-icon-glyph: "\e668"; }
.app-icon[data-icon="contact-card"] { --app-icon-glyph: "\f22e"; }
.app-icon[data-icon="content"] { --app-icon-glyph: "\e431"; }
.app-icon[data-icon="coordinate"] { --app-icon-glyph: "\e55c"; }
.app-icon[data-icon="dashboard"] { --app-icon-glyph: "\e9e4"; }
.app-icon[data-icon="delete"] { --app-icon-glyph: "\e92e"; }
.app-icon[data-icon="detail"] { --app-icon-glyph: "\e88e"; }
.app-icon[data-icon="document"] { --app-icon-glyph: "\e873"; }
.app-icon[data-icon="download"] { --app-icon-glyph: "\f090"; }
.app-icon[data-icon="edit"] { --app-icon-glyph: "\f097"; }
.app-icon[data-icon="edit-inline"] { --app-icon-glyph: "\f88d"; }
.app-icon[data-icon="expand"] { --app-icon-glyph: "\e5cf"; }
.app-icon[data-icon="file"] { --app-icon-glyph: "\e66d"; }
.app-icon[data-icon="filter"] { --app-icon-glyph: "\ef4f"; }
.app-icon[data-icon="gallery"] { --app-icon-glyph: "\e413"; }
.app-icon[data-icon="hidden"] { --app-icon-glyph: "\e8f5"; }
.app-icon[data-icon="image"] { --app-icon-glyph: "\e3f4"; }
.app-icon[data-icon="import"] { --app-icon-glyph: "\e9fc"; }
.app-icon[data-icon="import-filled"] { --app-icon-glyph: "\e9fc"; }
.app-icon[data-icon="layer"] { --app-icon-glyph: "\e53b"; }
.app-icon[data-icon="lead"] { --app-icon-glyph: "\e0ba"; }
.app-icon[data-icon="map"] { --app-icon-glyph: "\e55b"; }
.app-icon[data-icon="map-filled"] { --app-icon-glyph: "\e55b"; }
.app-icon[data-icon="menu"] { --app-icon-glyph: "\e5d2"; }
.app-icon[data-icon="move-down"] { --app-icon-glyph: "\e5db"; }
.app-icon[data-icon="move-up"] { --app-icon-glyph: "\e5d8"; }
.app-icon[data-icon="nav-next"] { --app-icon-glyph: "\e5cc"; }
.app-icon[data-icon="nav-prev"] { --app-icon-glyph: "\e5cb"; }
.app-icon[data-icon="notification"] { --app-icon-glyph: "\e7f5"; }
.app-icon[data-icon="palette"] { --app-icon-glyph: "\e40a"; }
.app-icon[data-icon="permission"] { --app-icon-glyph: "\e73c"; }
.app-icon[data-icon="phone"] { --app-icon-glyph: "\f0d4"; }
.app-icon[data-icon="place"] { --app-icon-glyph: "\f1db"; }
.app-icon[data-icon="place-outline"] { --app-icon-glyph: "\f1db"; }
.app-icon[data-icon="polygon"] { --app-icon-glyph: "\eb50"; }
.app-icon[data-icon="polygon-filled"] { --app-icon-glyph: "\eb50"; }
.app-icon[data-icon="progress"] { --app-icon-glyph: "\e9d0"; }
.app-icon[data-icon="refresh"] { --app-icon-glyph: "\e5d5"; }
.app-icon[data-icon="reorder"] { --app-icon-glyph: "\e8d5"; }
.app-icon[data-icon="restore"] { --app-icon-glyph: "\e8b3"; }
.app-icon[data-icon="role"] { --app-icon-glyph: "\f650"; }
.app-icon[data-icon="schedule"] { --app-icon-glyph: "\efd6"; }
.app-icon[data-icon="select"] { --app-icon-glyph: "\e764"; }
.app-icon[data-icon="settings"] { --app-icon-glyph: "\e8b8"; }
.app-icon[data-icon="sidebar"] { --app-icon-glyph: "\f717"; }
.app-icon[data-icon="sidebar-expand"] { --app-icon-glyph: "\f716"; }
.app-icon[data-icon="sign-out"] { --app-icon-glyph: "\e9ba"; }
.app-icon[data-icon="spreadsheet"] { --app-icon-glyph: "\e265"; }
.app-icon[data-icon="status-dot"] { --app-icon-glyph: "\ef4a"; }
.app-icon[data-icon="status-error"] { --app-icon-glyph: "\f8b6"; }
.app-icon[data-icon="status-published"] { --app-icon-glyph: "\e2bf"; }
.app-icon[data-icon="status-success"] { --app-icon-glyph: "\f0be"; }
.app-icon[data-icon="status-warning"] { --app-icon-glyph: "\f083"; }
.app-icon[data-icon="style"] { --app-icon-glyph: "\e23a"; }
.app-icon[data-icon="theme-dark"] { --app-icon-glyph: "\e51c"; }
.app-icon[data-icon="theme-light"] { --app-icon-glyph: "\e518"; }
.app-icon[data-icon="upload"] { --app-icon-glyph: "\f09b"; }
.app-icon[data-icon="user"] { --app-icon-glyph: "\f0d3"; }
.app-icon[data-icon="users"] { --app-icon-glyph: "\ea21"; }
.app-icon[data-icon="video"] { --app-icon-glyph: "\e04b"; }
.app-icon[data-icon="video-file"] { --app-icon-glyph: "\e404"; }
.app-icon[data-icon="visible"] { --app-icon-glyph: "\e8f4"; }
.app-icon[data-icon="warning-outline"] { --app-icon-glyph: "\f083"; }
