:root {
    --danger-color: #e63946;
    --bg-color: #1e1e1e;
    --module-color: #292929;
    --primary-color: #2db7b0;
    --darken-nav-color: #101010;
    --muted-blue: #bbbfcf;
    --darken-muted-blue: #a4a8ba;
    --txt-color: #cdcecf;
    --primary-text-color: #dddddd;
    --logo-max-height: 100px;
    --logo-visibility: none;
    --flx-loader-zindex: 1;
}

body {
    background-image: url(./setupBackground.svg);
    background-color: var(--bg-color);
    overflow: hidden;
    color: var(--primary-text-color);
    margin: 0;
    height: 100vh;
    -ms-scrollbar-base-color: #cccccc;
    -ms-scrollbar-track-color: #cccccc;
    -ms-scrollbar-face-color: var(--primary-color);
    -ms-scrollbar-darkshadow-color: var(--primary-color);
    -ms-scrollbar-shadow-color: var(--primary-color);
    -ms-scrollbar-arrow-color: #cccccc;
}

/*CHROME*/
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: var(--bg-color);
}

    ::-webkit-scrollbar:horizontal {
        width: 6px;
    }

::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 6px;
}

    ::-webkit-scrollbar-thumb:hover {
        background-color: #1794cb;
    }

    ::-webkit-scrollbar-thumb:active {
        background-color: #12739d;
    }

input:-webkit-autofill {
    -webkit-background-clip: text !important;
    caret-color: var(--primary-text-color);
    -webkit-text-fill-color: var(--primary-text-color);
}


body, form {
    font-family: 'latolight','Helvetica, Arial','sans-serif';
}

form {
    height: fit-content;
    width: 80%;
}




@media (min-width: 700px) {
    .logo {
        --logo-max-height: 146px;
    }

    .flexy-logo {
        --logo-visibility: flex;
    }
}


.setup-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.lottie-svg-fullscreen {
    height: 337% !important;
    transform: translate3d(0px, -35%, 0px) !important;
}

body:has(flx-loader.loading) .setup-container {
    filter: blur(3px);
}

.setup-container .setup-header {
    height: 20px;
    padding: 10px 0;
}

.setup-container .setup-body {
    display: flex;
    height: calc(100% - 40px - 50px);
}

    .setup-container .setup-body .start-setup {
        display: flex;
        align-items: center;
        flex-direction: column;
        flex: 1;
        justify-content: center;
    }

    .setup-container .setup-body .flexy-logo {
        display: var(--logo-visibility);
        align-items: center;
    }

    .setup-container .setup-body .start-setup .introductionContent {
        width: 70%;
        text-align: center;
        max-width: 600px;
    }

    .setup-container .setup-body .start-setup .logo {
        width: 70vw;
    }



.setup-container .setup-footer {
    display: flex;
    background-color: #131313d1;
    height: 50px;
    justify-content: center;
    align-items: center;
}

    .setup-container .setup-footer.completed {
        cursor: pointer;
    }

        .setup-container .setup-footer.completed:hover {
            background-color: #8f8f8fd1;
        }

            .setup-container .setup-footer.completed:hover span {
                color: white;
            }

        .setup-container .setup-footer.completed span {
            color: var(--primary-color);
            text-transform: capitalize;
            font-weight: bold;
        }

        .setup-container .setup-footer.completed .completedIcon {
            margin-left: 5px;
        }

.logo {
    background-image: url(../../img/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
    height: 40vh;
    max-height: var(--logo-max-height);
    width: 100%;
    margin-bottom: 30px;
    margin: 0 auto;
}

/*SWITCH*/
.toggle {
    display: flex;
    width: 50px;
    height: 30px;
    border-radius: 25px;
    container-type: inline-size;
}

    .toggle input[type="checkbox"] {
        display: none;
    }

        .toggle input[type="checkbox"]:checked + .toggleCircle {
            transition-duration: 0.2s;
            transform: translateX(calc(100cqw - 100%));
        }

        .toggle input[type="checkbox"]:not(:checked) + .toggleCircle {
            transition-duration: 0.2s;
            transform: translateX(0);
        }

    .toggle > .toggleCircle {
        height: 85%;
        box-shadow: 0.5px 0.5px 6px 0px rgb(0 0 0 / 62%);
        position: relative;
        aspect-ratio: 1/1;
        background-color: white;
        border-radius: 50%;
        transition: all 0.2s linear;
        align-self: center;
    }

    .toggle:has(input[type="checkbox"]:checked) .toggleCircle {
        right: 2px;
    }

    .toggle:has(input[type="checkbox"]:not(:checked)) .toggleCircle {
        left: 2px;
    }

    .toggle > .toggle {
        transition: all 0.2s linear;
        background: linear-gradient(to left, #686868 50%, var(--primary-color) 50%) right;
        background-size: 200%;
        justify-self: center;
        align-self: center;
    }

    .toggle:has(>input[type="checkbox"]:not(:checked)) {
        background-position: right;
    }

    .toggle:has(>input[type="checkbox"]:checked) {
        background-position: left;
    }

    .toggle:has(>.toggle) {
        display: grid;
        width: 50px;
        height: 30px;
        background-color: transparent;
    }


/*LOBIBOX*/

.lobibox.lobibox-window {
    border-color: var(--danger-color);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    position: fixed;
}

.lobibox-notify-wrapper .lobibox-notify {
    margin-right: 7px;
    border-radius: 5px;
}

.lobibox.lobibox-window .lobibox-header {
    background-color: var(--danger-color);
    user-select: none;
}

.lobibox .lobibox-body, .lobibox.lobibox-window .lobibox-body {
    background-color: var(--module-color);
    color: var(--txt-color);
}

    .lobibox.lobibox-window .lobibox-body code {
        background-color: var(--bg-color);
        padding: 2px 4px;
        font-size: 90%;
        color: #c7254e;
        border-radius: 4px;
    }

div.lobibox.lobibox-confirm .btn-close,
div.lobibox.lobibox-info .btn-close,
div.lobibox.lobibox-prompt .btn-close {
    position: absolute;
    font-size: 1.2em;
    right: 0;
    top: 0;
    padding: 4px 10px;
    border-radius: 0px 5px;
    transition: all 0.2s ease-in;
}

    div.lobibox.lobibox-confirm .btn-close:hover,
    div.lobibox.lobibox-info .btn-close:hover,
    div.lobibox.lobibox-prompt .btn-close:hover {
        background-color: var(--module-color);
        color: white;
        text-shadow: none;
    }

button.lobibox-btn {
    margin: 0;
    border-radius: 5px;
    padding: 9px 22px;
    font-size: 15px;
    font-weight: bold;
    border: none;
    color: #fff;
}

    button.lobibox-btn.lobibox-btn-cancel {
        background-color: var(--muted-blue);
        border: none;
    }

        button.lobibox-btn.lobibox-btn-cancel:hover {
            background-color: var(--darken-muted-blue);
            color: #fff;
        }

div.lobibox.lobibox-confirm,
div.lobibox.lobibox-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--module-color);
    border-radius: calc(5px * 2);
    border: none;
}

    div.lobibox.lobibox-confirm .lobibox-header,
    div.lobibox.lobibox-info .lobibox-header {
        background-color: transparent;
        margin-top: 2em;
        color: var(--txt-color);
        padding-top: 15px;
    }

        div.lobibox.lobibox-confirm .lobibox-header .lobibox-title,
        div.lobibox.lobibox-info .lobibox-header .lobibox-title {
            font-weight: 600;
        }

        div.lobibox.lobibox-confirm .lobibox-header .btn-close,
        div.lobibox.lobibox-info .lobibox-header .btn-close {
            position: absolute;
            font-size: 1.2em;
            right: 0;
            top: 0;
            padding: 4px 10px;
            border-radius: 0px calc(5px * 2);
            transition: all 0.2s ease-in;
        }

            div.lobibox.lobibox-confirm .lobibox-header .btn-close:hover,
            div.lobibox.lobibox-info .lobibox-header .btn-close:hover {
                background-color: var(--module-color);
                color: white;
                text-shadow: none;
            }

    div.lobibox.lobibox-confirm .lobibox-body,
    div.lobibox.lobibox-info .lobibox-body {
        position: initial;
        display: flex;
        justify-content: center;
        background-color: var(--module-color);
        text-align: center;
        height: max-content !important;
        max-height: 8em !important;
        overflow-y: auto;
    }

        div.lobibox.lobibox-confirm .lobibox-body::-webkit-scrollbar,
        div.lobibox.lobibox-info .lobibox-body::-webkit-scrollbar {
            border-radius: 5px;
        }

        div.lobibox.lobibox-confirm .lobibox-body .lobibox-icon-wrapper,
        div.lobibox.lobibox-info .lobibox-body .lobibox-icon-wrapper {
            display: flex;
            position: absolute;
            width: 80px;
            height: 1.3em;
            top: -0.5em;
            background-color: white;
            z-index: -1;
            border-radius: 50%;
            justify-content: center;
        }

            div.lobibox.lobibox-confirm .lobibox-body .lobibox-icon-wrapper i,
            div.lobibox.lobibox-info .lobibox-body .lobibox-icon-wrapper i {
                color: var(--module-color);
                font-size: 75px;
            }

    div.lobibox.lobibox-confirm .lobibox-footer,
    div.lobibox.lobibox-info .lobibox-footer {
        background-color: var(--module-color);
        width: 35%;
        display: flex;
        justify-content: space-evenly;
        padding: 15px 6px;
    }

        div.lobibox.lobibox-confirm .lobibox-footer button,
        div.lobibox.lobibox-info .lobibox-footer button {
            background-color: var(--module-color);
            border: 1px solid #fff;
            margin: 0;
            border-radius: 5px;
            font-weight: bold;
            color: #fff;
            padding: 9px 22px;
            font-size: 15px;
        }

            div.lobibox.lobibox-confirm .lobibox-footer button:hover,
            div.lobibox.lobibox-info .lobibox-footer button:hover {
                background-color: var(--darken-nav-color);
                color: #fff;
            }

            div.lobibox.lobibox-confirm .lobibox-footer button.lobibox-btn-no,
            div.lobibox.lobibox-info .lobibox-footer button.lobibox-btn-no {
                background-color: var(--muted-blue);
            }

                div.lobibox.lobibox-confirm .lobibox-footer button.lobibox-btn-no:hover,
                div.lobibox.lobibox-info .lobibox-footer button.lobibox-btn-no:hover {
                    background-color: var(--darken-muted-blue);
                }