html:has(dialog[open]) {
    overflow: hidden
}

dialog {
    width: 100%;
    position: fixed;
    max-width: 100vw;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5000;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
    display: none;
    height: auto
}

@media(min-width:992px) {
    dialog {
        max-width: min(80vw, var(--0e351c3d));
        max-height: 80vh;
        height: var(--b3ad0d3c);
        margin: auto
    }

    dialog.maximize {
        max-width: min(90vw, 1400px);
        max-height: 90vh !important
    }
}

dialog input {
    pointer-events: none
}

dialog>div {
    height: -moz-max-content;
    height: max-content
}

dialog>div>form,
dialog>div>.container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    height: inherit;
    width: 100%;
    max-width: inherit;
    margin: inherit;
    flex-grow: 1
}

dialog>div>form .dialog-main,
dialog>div>.container .dialog-main {
    overflow-y: auto;
    align-self: center;
    align-content: center;
    width: 100%
}


dialog[open] {
    opacity: 1;
    pointer-events: auto;
    animation: var(--7460586e) .3s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: stretch
}

dialog[open] input {
    pointer-events: auto
}

.backdrop {
    background: #00000080;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    height: 100% !important;
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 4999;
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(100vh)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slideLeft {
    0% {
        opacity: 0;
        transform: translate(100vh)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes slideDown {
    0% {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(100vh)
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    to {
        transform: translateY(0)
    }

    40% {
        transform: translateY(-30px)
    }

    60% {
        transform: translateY(-15px)
    }
}