dialog {
    border-radius: var(--border-radius);
    border-style: solid;
    border-width: var(--border-thickness);
    border-color: var(--light-gray);
    outline: none;
}
    dialog > .modal-container {
        display: flex;
        flex-direction: column;
        height: 90vh;
        width: 90vw;
        background-color: var(--limseo-white);
    }
        dialog > .modal-container > .viewer-area {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--border-radius);
            position: relative;
            background: #eee;
            overflow: hidden;
        }
            dialog > .modal-container > .viewer-area > .document-display img,
            dialog > .modal-container > .viewer-area > .document-display iframe {
                max-width: 100%;
                max-height: 70vh;
                border: none;
            }

            dialog > .modal-container > .viewer-area > .nav-btn {
                font-size: 3rem;
                padding: 10px 20px;
                cursor: pointer;
                transition: 0.3s;
                /* position */
                top: 4rem;
                bottom: 4rem;
                z-index: 10;
                position: absolute;
            }
                dialog > .modal-container > .viewer-area > .nav-btn.left { left: 1rem; }
                dialog > .modal-container > .viewer-area > .nav-btn.right { right: 1rem; }

        dialog > .modal-container > footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 1rem
        }
            dialog > .modal-container > footer > .footer-actions {
                display: flex;
                gap: 1rem;
            }

        dialog > .modal-container > .viewer-area > button.absolute-close {
            position: absolute;
            top: .5rem;
            right: 1rem;
            height: 3rem;
            font-size: 2rem;
            padding-inline: 20px;
            z-index: 9999;
        }
            dialog > .modal-container > .viewer-area > button.lms-btn > .button-icon {
                width: 2rem;
            }