.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;
}

    .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-tiny {
        width: 10%;
    }

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

    .modal.modal-fullscreen {
        width: 95vw;
        height: 95vh;
        left: 2.5vw;
        top: 5vh;
        transform: none;
    }

        .modal.modal-fullscreen.active {
            top: 2.5vh;
            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;
    }