:root {
    --dot-color: #2db7b0;
    --loading-bg-color: #1e1e1e;
    --setup-border-width: 1px;
    --setup-modal-color: #dee2e6;
    --setup-modal-bg: #212529;
    --setup-modal-width: 70vw;
    --setup-modal-min-height: 620px;
    --setup-modal-height: 100%;
    --setup-modal-margin: 0.5rem;
    --setup-modal-border-radius: 0.7rem;
    --setup-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

    :root:has(div.setup-modal iframe#installer) {
        --setup-modal-width: 70vw;
        --setup-modal-height: 100%;
        --setup-modal-margin: 0.5rem;
    }

    :root:has(div.setup-modal iframe#updater) {
        --setup-modal-width: 354px;
        --setup-modal-height: 410px;
        --setup-modal-margin: 1.75rem;
    }

body:has(div.setup-modal) {
    overflow: hidden;
}

div.setup-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    z-index: 11;
    background: #333333c7;
    backdrop-filter: blur(2px);
    user-select: none;
}

    div.setup-modal .setup-dialog {
        position: relative;
        width: auto;
        margin: var(--setup-modal-margin);
        pointer-events: none;
        height: calc(100% - var(--setup-modal-margin) * 2);
        min-height: var(--setup-modal-min-height);
    }

        div.setup-modal .setup-dialog.setup-centered {
            display: flex;
            align-items: center;
            min-height: calc(100% - var(--setup-modal-margin)* 2);
        }

        div.setup-modal .setup-dialog iframe {
            position: relative;
            display: flex;
            flex-direction: column;
            width: 100%;
            color: var(--setup-modal-color);
            pointer-events: auto;
            background-clip: padding-box;
            border: none;
            border-radius: var(--setup-modal-border-radius);
            outline: 0;
            height: var(--setup-modal-height);
            box-shadow: var(--setup-modal-box-shadow);
            min-height: var(--setup-modal-min-height);
        }

@media (min-width: 1300px) {
    body:has(div.setup-modal iframe#installer) .setup-dialog {
        max-width: var(--setup-modal-width);
        margin-right: auto;
        margin-left: auto;
    }

    div.setup-modal {
        --setup-modal-margin: 3.406rem;
        --setup-modal-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    }
}

@media (min-width: 500px) {
    body:has(div.setup-modal iframe#updater) .setup-dialog {
        max-width: var(--setup-modal-width);
        margin-right: auto;
        margin-left: auto;
    }
}

/******************************************/
/*UPDATE IFRAME*/
div.setup-modal:has(iframe#updater) {
    transform: scale(0);
}

div.setup-modal.showSetup:has(iframe#updater) {
    background: rgba(0,0,0,.0);
    transform: scale(1);
    animation: fadeIn .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
div.setup-modal.showSetup iframe#updater {
    opacity: 0;
    animation: scaleUp .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
div.setup-modal.hideSetup:has(iframe#updater) {
    animation: fadeOut .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
div.setup-modal.hideSetup iframe#updater {
    animation: scaleDown .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}


@keyframes fadeIn {
    0% {
        background: rgba(0,0,0,0);
    }

    100% {
        background: #7d7d7d4f;
    }
}

@keyframes fadeOut {
    0% {
        transform: scale(1);
        background: #7d7d7d4f;
    }
    99.9% {
        transform: scale(1);
        background: rgba(0,0,0,0);
    }
    100% {
        transform: scale(0);
        background: rgba(0,0,0,0);
    }
}


@keyframes scaleUp {
    0% {
        transform: scale(.8) translateY(1000px);
        opacity: 0;
    }

    100% {
        transform: scale(1) translateY(0px);
        opacity: 1;
    }
}

@keyframes scaleDown {
    0% {
        transform: scale(1) translateY(0px);
        opacity: 1;
    }
    99.9% {
        transform: scale(.8) translateY(1000px);
        opacity: 0;
    }
    100% {
        transform: scale(.8) translateY(1000px);
        opacity: 0;
    }
}
/******************************************/