:root {
    --modal-size-small: 25rem;
    --modal-size-medium: 30rem;
    --modal-size-default: 40rem;
    --modal-size-large: 50rem;
    --modal-size-extra-large: 65rem;
}

/* Modal Backdrop */
[ui-modal-backdrop] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb,#0b0e1f 85%,transparent);
    z-index: 8888;
    backdrop-filter: blur(0.2rem);
    user-select: none;
    transition: opacity 300ms;
}

[ui-modal-backdrop="hidden"] {
    opacity: 0;
    pointer-events: none;
}

[ui-modal-backdrop="shown"] {
    opacity: 1;
}

/* Modal dialog main */
[ui-modal-layout] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    pointer-events: none;
}

[ui-modal-dialog] {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 9999;
    width: 100%;
    max-height: calc(100vh - 0rem);
    /* overflow-y: hidden; */
    scrollbar-gutter: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    transform: translate(-50%, -150%) scale(85%);
    opacity: 0;
    pointer-events: none;
    transition: transform 300ms ease-out, opacity 300ms ease-out;
    box-sizing: border-box;
    padding: 1rem 0rem;
    filter:blur(2rem);
}

[ui-modal-dialog].open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(100%);
    filter:blur(0rem);
}

[ui-modal-dialog].closing {
    opacity: 0;
    transform: translate(-50%, 100%) scale(85%);
    filter:blur(2rem);
}

/* Modal dialog sizes */
[ui-modal-dialog][modal-size="small"] {
    max-width: var(--modal-size-small);
}

[ui-modal-dialog][modal-size="medium"] {
    max-width: var(--modal-size-medium);
}

[ui-modal-dialog][modal-size="default"] {
    max-width: var(--modal-size-default);
}

[ui-modal-dialog][modal-size="large"] {
    max-width: var(--modal-size-large);
}

[ui-modal-dialog][modal-size="extra-large"] {
    max-width: var(--modal-size-extra-large);
}

@media (width < 26.25rem) {

    /* 26.25rem = 420px */
    [ui-modal-dialog][modal-size="small"] {
        max-width: 100%;
        padding: 0.75rem;
    }
}

@media (width < 32.5rem) {

    /* 32.5rem = 520px */
    [ui-modal-dialog][modal-size="medium"] {
        max-width: 100%;
        padding: 0.75rem;
    }
}

@media (width < 41.875rem) {

    /* 41.875rem = 670px */
    [ui-modal-dialog][modal-size="default"] {
        max-width: 100%;
        padding: 0.75rem;
    }
}

@media (width < 52.5rem) {

    /* 52.5rem = 840px */
    [ui-modal-dialog][modal-size="large"] {
        max-width: 100%;
        padding: 0.75rem;
    }
}

@media (width < 68.75rem) {

    /* 68.75rem = 1100px */
    [ui-modal-dialog][modal-size="extra-large"] {
        max-width: 100%;
        padding: 0.75rem;
    }
}

[ui-modal-dialog].has-scroll {
    overflow-y: auto;
}
[ui-modal-dialog]::-webkit-scrollbar {
    display: none;
}
[ui-modal-dialog]::-webkit-scrollbar-track {
    background: transparent;
}
[ui-modal-dialog]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.158);
    border-radius: 50%;
}