body {
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    background:
        radial-gradient(circle at center, #2d2216 0%, hsl(30, 14%, 8%) 45%, #0b0b0b 100%);


}






.__app_v_container {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;

}


.__app_v_view {
    position: relative;
    top: -50px;
    height: 80%;
  
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;


}

.__icon_volto_app {

    width: 230px;
    height: 230px;
  
    position: relative;
    top: -30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.__content_description {

    width: 92%;
    height: 150px;

    border-radius: 10px;
    background-color: #131313;
    display: flex;
    align-items: center;
    justify-content: center;
}

.__content_description p {
    color: white;
    width: 90%;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-weight: 300;
    font-family: sans-serif;
    line-height: 36px;
    text-align: justify;


}

.__container_button {

    width: 90%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* From Uiverse.io by absoluteSTrange */
button {
    padding: 17px 40px;
    border-radius: 10px;
    border: 0;
    background-color: rgb(255, 255, 255);
    letter-spacing: 1.5px;
    font-size: 15px;
    transition: all 0.3s ease;
    box-shadow: rgb(24, 24, 24) 0px 10px 0px 0px;
    color: hsl(0, 0%, 0%);
    cursor: pointer;
}

button:hover {
    box-shadow: rgb(14, 14, 14) 0px 7px 0px 0px;
}

button:active {
    background-color: rgb(83, 83, 83);
    /*50, 168, 80*/
    box-shadow: rgb(100, 100, 100) 0px 0px 0px 0px;
    transform: translateY(5px);
    transition: 200ms;
}

.progress_margin {

    width: 100%;
    height: 80px;
    display: none;
    align-items: center;
    justify-content: center;
}

.progress-container {
    width: 300px;
    height: 10px;
    background-color: #ddd;
    margin-top: 10px;
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar {
    width: 0%;
    height: 100%;
    transition: width 0.9s ease-in-out;
    background-color: #4caf50;

}





.progress-container {
    width: 300px;
    height: 10px;
    background-color: #ddd;
    margin-top: 10px;
    border-radius: 5px;
    overflow: hidden;
}

.progress-bar {
    width: 0%;
    height: 100%;
    border-radius: 5px;
    transition: width 0.9s ease-in-out;

    /* base */
    background: linear-gradient(90deg,
            #fc2323 25%,
            #66bb6a 50%,
            #b63b1c 75%);

    background-size: 200% 100%;
    animation: waveMove 1s linear infinite;
}

/* animação de fluxo contínuo */
@keyframes waveMove {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: 0% 0;
    }
}


.__overlay_appcheck_update {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
    align-items: center;
    width: 350px;
    height: 210px;
    justify-content: center;
}

.__update_app_envolve {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: white;
    border-radius: 10px;
    align-items: center;
    justify-content: space-evenly;
    animation: __animation_update_view 0.5s ease-in-out;
}

.icon_update_view {
    width: 100px;
    height: 100px;
    background-color: white;
    background-image: url('/mgs/cons/b.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 80%;
}


.update_view_text {
    width: 80%;
    background-color: rgba(0, 0, 0, 0.849);
    color: white;
    border-radius: 5px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.update_view_text p {
    text-align: justify;
    line-height: 33px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 14px;
}


@keyframes __animation_update_view {
    0% {
        transform: scale(0.6);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}



.__alert_update_overlay {
    width: 200px;
    height: 100px;
    position: absolute;
    display: none;
    z-index: 99999;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
}

.__alert_update_envolve {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: __linear_upscale 2s ease-in-out;

}

.__alert_content_text {
    color: rgb(87, 153, 87);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 18px;
    text-align: center;
}

@keyframes __linear_upscale {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

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


    100% {
        opacity: 0;
        transform: translateY(-50px);
    }
}

.overlay_finish_recovery {
    width: 380px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;

}

.finish_recovery_envolve {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #202020;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    animation: overlayEnter 0.4s ease forwards;
}

.p_text_content {



    background-color: rgba(0, 0, 0, 0.08);
    display: flex;
    width: 100%;
    height: 80px;
    align-items: center;
    justify-content: center;
}

.envolve_text_content_finish {
    width: 70%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 33px;
    color: white;
    font-size: 15px;
    text-align: justify;
    font-family: sans-serif;

}

@keyframes overlayEnter {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }

    60% {
        opacity: 1;
        transform: scale(1.02) translateY(-5px);
        /* leve "bounce" */
    }

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


/* Overlay */
.__popup_install_overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: __popup_install_fade .35s ease;
}

/* Popup */
.__popup_install_box {
    width: 100%;
    max-width: 360px;
    background: #ffffff;
    border-radius: 28px;
    padding: 32px 24px;
    text-align: center;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.25);

    animation: __popup_install_show .45s cubic-bezier(.22, 1, .36, 1);
}

/* Icon */
.__popup_install_icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #fff;
    box-shadow:
        0 10px 30px rgba(34, 197, 94, .35);
}

/* Title */
.__popup_install_title {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 10px;
}

/* Description */
.__popup_install_text {
    font-size: 15px;
    line-height: 1.5;
    color: #64748b;
    margin-bottom: 24px;
}

/* Button */
.__popup_install_button {
    width: 100%;
    border: none;
    border-radius: 16px;
    padding: 15px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    transition: .25s;
}

.__popup_install_button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(37, 99, 235, .28);
}

/* Animations */
@keyframes __popup_install_show {
    from {
        opacity: 0;
        transform: translateY(40px) scale(.92);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes __popup_install_fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}





.radar {
    position: relative;
    width: var(--radar-size);
    height: var(--radar-size);
    border-radius: 50%;
    background: radial-gradient(circle, #000007 0%, #010107 70%, #f00b0b 100%);
    overflow: hidden;
    box-shadow: 0 0 2px #b67623;
}

.radar::before,
.radar::after {
    content: "";
    position: absolute;
    border: 1px solid #F2A766;
    border-radius: 50%;
}

.line-h,
.line-v {
    position: absolute;
    background: #F2A766;
}

.line-h {
    width: 100%;
    height: 1px;
    top: 50%;
}

.line-v {
    width: 1px;
    height: 100%;
    left: 50%;
}

.sweep {
    position: absolute;
    width: 50%;
    height: 50%;
    top: 0;
    left: 50%;
    transform-origin: bottom left;
    background: linear-gradient(90deg,
            rgba(238, 160, 16, 0.507) 0%,
            #be8c60 100%);
    clip-path: polygon(0 100%, 100% 100%, 100% 0);
}

.__plane_radar_img {

    width: 200px;
    height: 200px;
    top: -100px;
    z-index: 10;
    background-image: url('/app/share/imgs/Icons/b.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    left: 50%;

    transform: translate(-50%, 50%);
    position: absolute;
}


.blip {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #F2A766;
    box-shadow: 0 0 8px #044e01;
    opacity: 0;
    transform: translate(-50%, -50%);
}

.blip.show {
    animation: radarBlink .8s ease;
}

@keyframes radarBlink {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.2);
    }

    25% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.4);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.6);
    }
}