.modal {
    visibility: hidden;
    opacity: 0;
    z-index: 999;
    background: var(--modal-background-color);
    box-shadow: var(--shadow-very-far);
    width: 50%;
    height: auto;
    position: fixed;
    left: calc((var(--nav-width) * .5) + 50%);
    top: 55%;
    transform: translate(-50%, -50%);
    transition: all .2s ease-out;
    border-radius: 25px;
}

/* TinyMCE popup/context UI must sit above fullscreen content editor modal layers. */
.tox-tinymce-aux,
.tox-menu,
.tox-collection,
.tox-dialog-wrap,
.moxman-window,
.tam-assetmanager-root {
    z-index: 10050 !important;
    pointer-events: auto;
}

/* Enlarge the TinyMCE AI Assistant dialog so the AI output is easier to read.
   The dialog is tagged with .cms-ai-dialog by content-edit.js (it has no stable
   built-in hook). */
.tox .tox-dialog.cms-ai-dialog {
    width: 90vw !important;
    max-width: 1100px !important;
    height: 85vh !important;
    max-height: 900px !important;
}

    .tox .tox-dialog.cms-ai-dialog .tox-dialog__body,
    .tox .tox-dialog.cms-ai-dialog .tox-dialog__content-js {
        max-height: none !important;
        flex: 1 1 auto;
    }

    .tox .tox-dialog.cms-ai-dialog .tox-dialog__body-content {
        max-height: none !important;
        overflow-y: auto;
    }

.modal.modal-scroll {
    overflow-y: auto;
    max-height: 75vh;
}

.modal.modal-transparent {
    background: none;
    box-shadow: none;
}

.modal.modal-big {
    width: 75%;
}

.modal.modal-small {
    width: 25%;
    min-width: 300px;
}

.modal.modal-smaller {
    width: 40%;
    min-width: 300px;
}

.modal.modal-tiny {
    width: 10%;
}

.modal.modal-full {
    width: calc(90% - var(--nav-width));
    height: 90%;
}

.modal.modal-fullscreen {
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    transform: none;
    border-radius: 0;
    box-shadow: none;
}

    .modal.modal-fullscreen.active {
        top: 0;
        z-index: 9999;
    }

.modal.modal-no-bg {
    background: none !important;
    box-shadow: none !important;
}

.modal iframe {
    width: 100%;
    height: 80%;
}

.modal.active {
    visibility: visible;
    opacity: 1;
    top: 50%;
}

.modal .close {
    width: 40px;
    height: 40px;
    top: -15px;
    right: -15px;
}

    .modal .close.top-left {
        right: auto;
        left: -15px;
    }

.modal.modal-scroll .close {
    top: 10px;
    right: 10px;
}

.modal .alert {
    width: 100%;
}

.modal iframe {
    border-radius: 15px;
}

.modal .form {
    margin: 10px auto 10px auto;
}

.modal .status {
    position: relative;
    display: inline-block;
    color: var(--color-success);
    font-size: 1.2rem;
    line-height: 1.2rem;
    padding: 15px;
    text-align: center;
}

    .modal .status i {
        margin-right: 8px;
    }

    .modal .status .progress-bar {
        opacity: 0;
        background: var(--color-gray);
        position: relative;
        transition: all .2s;
        margin-top: 10px;
    }

        .modal .status .progress-bar div {
            width: 1px;
            height: 28px;
            background: var(--color-success);
            transition: all .2s;
        }

        .modal .status .progress-bar span {
            display: block;
            position: absolute;
            top: 6px;
            left: 50%;
            color: var(--color-lightest);
            text-align: center;
        }

.modal .content-scroll {
    max-height: 50vh;
    overflow-y: scroll;
}

.modal.ai-modal {
    border: 1px solid var(--color-10);
}

    .modal.ai-modal .ai-modal-badge {
        position: absolute;
        top: 1rem;
        right: 1rem;
        font-size: 1.25rem;
        color: var(--color-10);
        pointer-events: none;
    }