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

dialog {
    border          : none;
    background-color: rgba(24, 87, 114, 0.95);
    left            : 0;
    top             : 0;
    right           : 0;
    bottom          : 0;
    width           : 100vw;
    height          : 100vh;
    max-width       : 100vw;
    max-height      : 100vh;
    margin          : 0;
    padding         : 0;
}

dialog h2,
dialog h3,
dialog h4,
dialog h5 {
    padding: 0;
}

dialog.success *.dialog-start,
dialog *.dialog-success {
    display: none;
}

dialog.success *.dialog-success {
    display: block;
}

dialog>div {
    border       : solid 1px #ddd;
    max-height   : 90vh;
    max-width    : 1200px;
    min-width    : 400px;
    overflow     : hidden;
    border-radius: var(--size-md);
    box-shadow   :
        0px 1.4px 2.2px rgba(0, 0, 0, 0.02),
        0px 3.3px 5.3px rgba(0, 0, 0, 0.028),
        0px 6.1px 10px rgba(0, 0, 0, 0.035),
        0px 10.9px 17.9px rgba(0, 0, 0, 0.042),
        0px 20.5px 33.4px rgba(0, 0, 0, 0.05),
        0px 49px 80px rgba(0, 0, 0, 0.07);
    padding         : var(--size-xl);
    min-height      : 0;
    display         : flex;
    gap             : 1rem;
    position        : absolute;
    top             : 50%;
    left            : 50%;
    transform       : translate(-50%, -50%);
    flex-direction  : column;
    justify-content : space-between;
    background-color: #fff;
}

dialog.compact {
    max-width : 600px;
    max-height: 600px;
}

dialog.fit-h,
dialog.fit-h>div,
dialog.fit-h .dialog-body {
    height: fit-content;
}

dialog.fit-w {
    width: fit-content;
}

dialog.w-900 {
    max-width: 900px;
}

dialog::backdrop {
    background        : rgba(24, 87, 114, 0.95);
    /* backdrop-filter: blur(10px); */
}

dialog button.close.top {
    position     : absolute;
    top          : var(--size-md);
    right        : var(--size-md);
    width        : var(--size-xxl);
    height       : var(--size-xxl);
    padding      : 0;
    background   : transparent;
    z-index      : 999999;
    box-shadow   : none;
    border       : none;
    outline      : none;
    border-radius: 0;
    transition   : all ease 0.3s;
    cursor       : pointer;
    margin       : 0;
}

dialog button.close.top:focus {
    outline: none;
}

dialog button.close.top::after,
dialog button.close.top::before {
    position  : absolute;
    content   : '';
    display   : inline-block;
    width     : 2rem;
    height    : .2rem;
    outline   : transparent solid 1px;
    top       : var(--size-lg);
    left      : 15px;
    background: #333;
}

dialog button.close.top::before {
    transform: rotateZ(-45deg);
}

dialog button.close.top::after {
    transform: rotateZ(45deg);
}

dialog .dialog-header {
    padding: 0;
    margin : 0;
}

dialog .dialog-body {
    padding    : var(--size-md) 0;
    flex-grow  : 0;
    flex-shrink: 1;
    overflow-y : auto;
    font-size  : 1.6rem;
}

dialog.fit .dialog-body {
    flex      : 0 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}

dialog .dialog-body iframe {
    width : 100%;
    height: 100%;
    border: none;
}

dialog .dialog-footer {
    border-top     : solid 1px #ddd;
    padding        : var(--size-xl) 0 0 0;
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 2rem;
}

@media screen and (max-width: 768px) {
    dialog>div {
        border       : none;
        max-height   : 90vh;
        max-width    : 1200px;
        min-width    : 100%;
        width        : 100%;
        overflow     : hidden;
        border-radius: 0;
        box-shadow   : none;
        padding      : 3rem;
    }

    dialog>div.w-400 {
        width: 100%;
    }

    dialog>div.dialog-body span {
        width: 100%;
    }

    dialog .dialog-footer {
        border-top: solid 1px #ddd;
        gap       : 1rem;
    }
}

@media screen and (max-width: 400px) {
    dialog .dialog-footer {
        flex-direction: column-reverse;
    }

    dialog>div {
        border       : solid 1px #ddd;
        max-height   : 90vh;
        max-width    : 1200px;
        min-width    : 300px;
        overflow     : hidden;
        border-radius: 0;
        box-shadow   : none;
        padding      : 2rem;
        min-height   : 0;
        display      : flex;
        gap          : 1rem;
    }
}