.confirm_elements_data_user {

    height: 100%;

    width: 100%;
    display: flex;
    align-items: center;

    justify-content: space-around;



}

.container_overlay_elements_data_user {

    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    justify-content: space-around;
}

.name_element_data {
    width: 100%;
    height: 100px;

    opacity: 0;

}





.light-mode .data_style {
    font-size: 16px;
    height: 0%;
    color: white;
    font-family: sans-serif;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 10px;
    text-align: center;
}

.data_style {

    font-size: 16px;
    height: 0%;
    color: white;
    font-family: sans-serif;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 10px;
    text-align: center;
}

.light-mode .data_style {
    color: rgb(255, 255, 255);
}


.main_contaienr_element_data {

    height: 60%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;

}

.text_content_data_name {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    color: white;
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    border-radius: 10px;
}

.edit_name_user {
    width: 30px;
    height: 30px;
    background-image: url('../Imagens/Estrutural/edit.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}


.light-mode .text_content_data_name {
    background-color: rgb(0, 0, 0);
}


.element_container_buttons {

    height: 40px;
    width: 100px;
    display: flex;

    align-items: flex-end;
    justify-content: space-around;
}

.container_for_user_make_pix {

    width: 100%;
    height: 100%;
    transition: opacity 1s ease-in-out;
    padding: 20px;
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.pix-user {
    height: 120%;

}


.text_elements_product_container_data {
    height: 90%;
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

}

.contaienr_capa_mais_text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 230px;
    width: 100%;
}

.light-mode .text_main_product_element_content {
    color: rgb(0, 0, 0);
}

.text_main_product_element_content {
    color: white;
    width: 100%;
    line-height: 35px;
    font-size: 20px;
    text-align: left;

}

.text_content_data_description {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    font-size: 14px;
    text-align: justify;
    font-family: "Heebo", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    line-height: 28px;
    padding-right: 15px;
    width: 100%;
    user-select: none !important;

}

.light-mode .text_content_data_description {
    color: rgb(0, 0, 0);
}


.Capa-produto-principal {
    background-image: url('/Assets/Imagens/Capas/premiun.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-size: cover;
    height: 150px;
    position: relative;
    left: 20px;
    transform: scale(1.1);
    width: 27%;
}



.slideshow-container {
    width: 100%;
    height: 100%;
    display: none;
    overflow-x: hidden;
    overflow-y: hidden;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #1a1a1a;
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); */
}

.light-mode .slideshow-container {
    background-color: #ffffff;
}


.card--diagonal {
    background: linear-gradient(135deg, #7f5af0, #4cc9f0);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    will-change: clip-path;
    animation: diagWipe 1.2s ease-in-out infinite alternate;
}

@keyframes kaleido {
    0% {
        clip-path: polygon(0 0, 60% 0, 70% 40%, 100% 40%, 100% 100%, 0 100%);
    }

    33% {
        clip-path: polygon(0 0, 100% 0, 100% 40%, 70% 60%, 60% 100%, 0 100%);
    }

    66% {
        clip-path: polygon(10% 0, 100% 0, 90% 50%, 100% 100%, 0 100%, 0 60%);
    }

    100% {
        clip-path: polygon(0 0, 60% 0, 70% 40%, 100% 40%, 100% 100%, 0 100%);
    }
}

@keyframes waveFlow {
    0% {
        clip-path: polygon(0% 50%, 25% 0%, 75% 100%, 100% 50%);
    }

    50% {
        clip-path: polygon(0% 50%, 25% 100%, 75% 0%, 100% 50%);
    }

    100% {
        clip-path: polygon(0% 50%, 25% 0%, 75% 100%, 100% 50%);
    }
}






/* Animação 1: Revelação circular do centro */
@keyframes revealCircle {
    0% {
        clip-path: circle(0% at 50% 50%);
    }

    100% {
        clip-path: circle(100% at 50% 50%);
    }
}

/* Animação 2: Revelação de cima para baixo */
@keyframes revealTopDown {
    0% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
    }

    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

/* Animação 3: Revelação em diagonal */
@keyframes revealDiagonal {
    0% {
        clip-path: polygon(0% 100%, 0% 100%, 0% 100%, 0% 100%);
    }

    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

/* Animação 1: Revelação em forma de losango */
@keyframes revealDiamond {
    0% {
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    }

    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

/* Animação 2: Revelação lateral da esquerda para a direita */
@keyframes revealLeftRight {
    0% {
        clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    }

    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

/* Animação 3: Revelação em estrela */
@keyframes revealStar {
    0% {
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%,
                50% 50%, 50% 50%, 50% 50%, 50% 50%,
                50% 50%, 50% 50%);
    }

    100% {
        clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%,
                79% 91%, 50% 70%, 21% 91%, 32% 57%,
                2% 35%, 39% 35%);
    }
}


@keyframes zigzagReveal {
    0% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
    }

    33% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 33%, 0% 66%);
    }

    66% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 66%, 0% 33%);
    }

    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}


/* Animação 1: Explosão giratória com escala */
@keyframes spinBurst {
    0% {
        clip-path: circle(0% at 50% 50%);
        transform: scale(0.5) rotate(0deg);
    }

    50% {
        clip-path: circle(60% at 50% 50%);
        transform: scale(1.2) rotate(180deg);
    }

    75% {
        clip-path: circle(40% at 50% 50%);
        transform: scale(0.9) rotate(270deg);
    }

    100% {
        clip-path: circle(100% at 50% 50%);
        transform: scale(1) rotate(360deg);
    }
}

@keyframes bounceReveal {
    0% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
        transform: scale(0.3) translateY(50px);
    }

    40% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
        transform: scale(1) translateY(-20px);
    }

    70% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 0% 75%);
        transform: scale(0.8) translateY(10px);
    }

    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        transform: scale(1) translateY(0);
    }
}


/* Animação 3: Torção com revelação em losango */
@keyframes twistDiamond {
    0% {
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
        transform: scale(0.4) rotate(45deg);
    }

    50% {
        clip-path: polygon(20% 20%, 80% 20%, 80% 80%, 20% 80%);
        transform: scale(1.1) rotate(-45deg);
    }

    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        transform: scale(1) rotate(0deg);
    }
}


.slide_payment {
    position: absolute;
    background-color: #1a1a1a;
    width: 100%;
    height: 100%;
    animation: liquidUnfoldDown 2s ease-in-out;
    display: none;
    overflow: scroll !important;
    z-index: 0;
    will-change: clip-path;

}

@keyframes bolso {
    0% {
        transform: translateY(100vh);
    }

    100% {
        transform: translateY(0vh);
    }
}

.light-mode .slide_payment {
    background-color: #ffffff;
}

.slide_payment:nth-child(1) {
    background-color: #1a1a1a;
    /* box-shadow: 0 4px 10px rgba(199, 199, 199, 0.2); */
}

.light-mode .slide_payment:nth-child(1) {
    background-color: #ffffff;
}

.slide_payment:nth-child(2) {
    width: 100%;
    flex-direction: column;
    height: 97%;
    align-items: center;
    justify-content: flex-end;
    background-color: #1a1a1a;
    /* box-shadow: 0 4px 10px rgba(199, 199, 199, 0.2); */
}

.light-mode .slide_payment:nth-child(2) {
    background-color: #ffffff;
}

.light-mode .slide_payment:nth-child(6) {
    background-color: #1a1a1a;
}

.slide_payment:nth-child(3) {
    background-color: #1a1a1a;
    /* box-shadow: 0 4px 10px rgba(199, 199, 199, 0.2); */
}

.slide_payment:nth-child(5) {

    overflow-y: scroll;
    /* box-shadow: 0 4px 10px rgba(199, 199, 199, 0.2); */
}

.light-mode .slide_payment:nth-child(3) {
    background-color: #ffffff;
    /* box-shadow: 0 4px 10px rgba(199, 199, 199, 0.2); */
}

.slide_payment.active {

    display: flex;

}

.slide_payment.exit-left {
    transform: translateX(100%);
}

.slide_payment.exit-right {
    transform: translateX(100%);
}

.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 24px;
    padding: 10px;
    cursor: pointer;
    user-select: none;
    border-radius: 5px;
    transition: background-color 0.3s;
    right: 10px;
}

.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.dots {
    position: absolute;
    bottom: 20px;
    width: 100%;
    display: none;
    text-align: center;
}

.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #bbb;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active {
    background-color: #717171;
}

.dot.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.user_data_contact_element_contaienr {

    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    left: 0;
    top: 0;
    align-items: center;
    justify-content: space-around;

}

@keyframes identifier {
    0% {

        transform: scale(0);
    }

    100% {

        transform: scale(1);
    }
}

.greet_first_step {

    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.greet_gif {
    height: 150px;
    width: 150px;
    background-image: url('/Assets/Imagens/Estrutural/relationship-1--unscreen.gif');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.3);
}

.p_greet_content {
    border-radius: 8px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.p_greet_content p {
    color: white;
    font-family: 'Times New Roman', Times, serif;
    font-size: 16px;
    user-select: none;
    text-align: justify;
    line-height: 38px;
    user-select: none;
}

.light-mode .p_greet_content p {
    color: rgb(0, 0, 0);
    font-family: 'Times New Roman', Times, serif;
    font-size: 16px;
    text-align: justify;
    line-height: 38px;
}

.light-mode .p_greet_content {
    border-radius: 8px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 20px;
}


.step_for_button_main-pushable {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    transition: filter 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.step_for_button_main-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: hsl(0deg 0% 0% / 0.25);
    will-change: transform;
    transform: translateY(2px);
    transition:
        transform 600ms cubic-bezier(.3, .7, .4, 1);
}

.step_for_button_main-edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(to left,
            hsl(110, 93%, 11%) 0%,
            hsl(131, 94%, 14%) 8%,
            hsl(103, 95%, 15%) 92%,
            hsl(113, 100%, 16%) 100%);
}

.step_for_button_main-front {
    display: block;
    position: relative;
    padding: 12px 27px;
    border-radius: 12px;
    font-size: 1.1rem;
    color: white;
    background: hsl(113, 90%, 43%);
    will-change: transform;
    transform: translateY(-4px);
    transition:
        transform 600ms cubic-bezier(.3, .7, .4, 1);
}

@media (min-width: 768px) {
    .step_for_button_main-front {
        font-size: 1.25rem;
        padding: 12px 42px;
    }
}

.step_for_button_main-pushable:hover {
    filter: brightness(110%);
    -webkit-filter: brightness(110%);
}

.step_for_button_main-pushable:hover .step_for_button_main-front {
    transform: translateY(-6px);
    transition:
        transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.step_for_button_main-pushable:active .step_for_button_main-front {
    transform: translateY(-2px);
    transition: transform 34ms;
}

.step_for_button_main-pushable:hover .step_for_button_main-shadow {
    transform: translateY(4px);
    transition:
        transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.step_for_button_main-pushable:active .step_for_button_main-shadow {
    transform: translateY(1px);
    transition: transform 34ms;
}

.step_for_button_main-pushable:focus:not(:focus-visible) {
    outline: none;
}


.ofs_apycontainer_thankyou_letter {
    height: 95%;
    width: 100%;
    flex-direction: column;


    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.ofs_apyletter-image {
    user-select: none;
    text-decoration: none;
    overflow: visible !important;
    width: 200px;
    height: 200px;
    background: transparent !important;
    outline: none;
    user-select: none;
    display: flex;
    will-change: transform;
}


.container_for_letter_image_center {
    top: 70%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}



@keyframes element_minet {
    0% {
        transform: translateY(100vh);
    }

    100% {
        transform: translateY(0vh);
    }
}


.ofs_apyanimated-mail {
    position: absolute;
    height: 150px;
    will-change: transition, transform;
    width: 200px;
    transition: 0.4s;
}

.ofs_apyanimated-mail .ofs_apybody {
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 100px 200px;
    border-color: transparent transparent #e95f55 transparent;
    will-change: transition, transform;
    z-index: 2;
}

.ofs_apyanimated-mail .ofs_apytop-fold {
    position: absolute;
    top: 50px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 100px 0 100px;
    transform-origin: 50% 0%;
    transition: transform 0.4s 0.4s, z-index 0.2s 0.4s;
    border-color: #cf4a43 transparent transparent transparent;
    will-change: transition, transform;
    z-index: 2;
}

.ofs_apyanimated-mail .ofs_apyback-fold {
    position: absolute;
    bottom: 0;
    width: 200px;
    height: 100px;
    background: #cf4a43;
    z-index: 0;
}

.ofs_apyanimated-mail .ofs_apyleft-fold {
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 0 50px 100px;
    border-color: transparent transparent transparent #e15349;
    z-index: 2;
}

.ofs_apyanimated-mail .ofs_apyletter {
    left: 20px;
    bottom: 0px;
    position: absolute;
    width: 160px;
    height: 60px;
    background: white;
    z-index: 1;

    transition: 0.4s 0.2s, transform 0.4s 0.2s;
    transform-origin: bottom center;
    will-change: transition, transform;
}

.ofs_apyanimated-mail .ofs_apyletter .ofs_apyletter-border {
    height: 10px;
    width: 100%;
    background: repeating-linear-gradient(-45deg, #cb5a5e, #cb5a5e 8px, transparent 8px, transparent 18px);
}

.ofs_apyanimated-mail .ofs_apyletter .ofs_apyletter-title {
    margin-top: 10px;
    margin-left: 5px;
    height: 10px;
    width: 40%;
    background: #67cb5a;
}

.ofs_apyanimated-mail .ofs_apyletter .ofs_apyletter-context {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: auto;
    overflow: visible;
}

.ofs_apyanimated-mail .ofs_apyletter .ofs_apyletter-stamp {
    margin-top: 30px;
    margin-left: 120px;
    height: 30px;
    width: 30px;
    will-change: opacity;
    opacity: 0.3;
}

.ofs_apyletter-image.ofs_apyopen .ofs_apyanimated-mail {
    transform: translateY(10px);
    will-change: transform;
}

.ofs_apyletter-image.ofs_apyopen .ofs_apyanimated-mail .ofs_apytop-fold {
    transition: transform 0.4s, z-index 0.2s;
    will-change: transition, transform;
    transform: rotateX(180deg);
    z-index: 0;
}

.ofs_apyletter-image.ofs_apyopen .ofs_apyanimated-mail .ofs_apyletter {
    width: 97%;
    position: absolute;
    top: 190px;
    left: 0;
    /* começa com 80dvh */
    height: 80dvh;
    /* permite crescer */
    visibility: visible;
    will-change: transition, transform;
    transform: translateY(100px) scale(2);
    z-index: 3;
    overflow: scroll !important;
    /* scroll só se passar do viewport */
}

.ofs_apyagradecimento-fonte {
    will-change: transition, transform, opacity;

    pointer-events: auto;
    width: 80% !important;
    height: 100%;
    max-width: 80% !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    display: none;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    line-height: 33px;
    color: black !important;
    text-align: justify !important;
    font-family: "Vibur", cursive !important;
    font-style: normal !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    scroll-behavior: smooth;
    /* Garante que o elemento pode rolar */
    scroll-snap-type: y proximity;
    /* Ajuda a criar um efeito mais suave */
    user-select: none;
    text-decoration: none;
    overflow: visible;
    /* ❌ nada de scroll aqui */
}

.container_for_button_step {

    width: 100%;
    height: 50%;
}

.container_for_button_step {

    display: flex;
    align-items: flex-end;
    justify-content: center;
}


.agradecimento-text-tile {
    font-family: "Vibur", cursive !important;
    font-optical-sizing: auto;
    font-size: 3rem;
    text-align: center;
    font-weight: normal;
    font-style: normal;
    height: 40%;
    width: 100%;
    text-align: center;
    color: white;
}

.light-mode .agradecimento-text-tile {
    font-family: "Vibur", cursive !important;
    font-optical-sizing: auto;
    font-size: 3rem;
    text-align: center;
    font-weight: normal;
    font-style: normal;
    height: 40%;
    width: 100%;
    text-align: center;
    color: rgb(0, 0, 0);
}


.container_greet_buttons {

    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 20px;
    border-radius: 8px;
    text-align: justify;

}


.light-mode .container_greet_buttons {
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
}

.container_greet_buttons p {
    animation: rise_and_opacity 1s ease-in-out alternate infinite;
}



@keyframes rise_and_opacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}





/* Estilização geral */
.form-group {
    position: relative;
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

/* Estilo do input */
.form-group input {
    width: 90%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    background-color: transparent;
    border-radius: 4px;
    outline: none;
    color: white;
    font-weight: bold;
    user-select: none !important;
    font-family: sans-serif;
}

.light-mode .form-group input {
    color: rgb(0, 0, 0);
}

input:focus {
    border: 1px solid #afff9b;
}

/* Estilo do label */
.form-group label {
    position: absolute;
    top: -5px;
    /* Sempre posicionado acima */
    left: 10px;
    font-size: 12px;
    /* Tamanho reduzido */
    color: #ffffff;
    /* Cor do texto */
    background: transparent;
    /* Fundo para cobrir a borda */
    padding: 0 5px;
    pointer-events: none;
    /* Impede cliques no label */
}


.light-mode .form-group label {
    color: #000000;
}

.container_atribut_data {
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.container_button_sheets_user {
    height: 60px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-around;
}

/* CSS */
.button-82-pushable {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    transition: filter 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    animation: upButton 1s ease-in-out;


}

@keyframes upButton {
    0% {
        transform: translateY(100px);
    }

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

.button-82-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: hsl(0deg 0% 0% / 0.25);
    will-change: transform;
    transform: translateY(2px);
    transition:
        transform 600ms cubic-bezier(.3, .7, .4, 1);
}

.button-82-edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(to left,
            hsl(108, 100%, 16%) 100%,
            hsl(128, 100%, 22%) 8%,
            hsl(123, 100%, 20%) 92%,
            hsl(108, 100%, 16%) 100%);
}

.button-82-front {
    display: block;
    position: relative;
    padding: 12px 27px;
    border-radius: 12px;
    font-size: 1.1rem;
    color: rgb(255, 255, 255);
    background: hsl(123, 100%, 27%);
    will-change: transform;
    transform: translateY(-4px);
    transition:
        transform 600ms cubic-bezier(.3, .7, .4, 1);
}

@media (min-width: 768px) {
    .button-82-front {
        font-size: 1.25rem;
        padding: 12px 42px;
    }
}

.button-82-pushable:hover {
    filter: brightness(110%);
    -webkit-filter: brightness(110%);
}

.button-82-pushable:hover .button-82-front {
    transform: translateY(-6px);
    transition:
        transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.button-82-pushable:active .button-82-front {
    transform: translateY(-2px);
    transition: transform 34ms;
}

.button-82-pushable:hover .button-82-shadow {
    transform: translateY(4px);
    transition:
        transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.button-82-pushable:active .button-82-shadow {
    transform: translateY(1px);
    transition: transform 34ms;
}

.button-82-pushable:focus:not(:focus-visible) {
    outline: none;
}

.data-atributes-element {
    height: 50%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.context_container_data_elements {
    height: 90%;

    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}


.container_social_icon_elements_select_user {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}


.container_for_data_social_buy {
    height: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 70px;
    opacity: 0;

}

.Gmai_icon {
    background-image: url('../Imagens/Estrutural/Sociais/gmail.png');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.instagram_icon {
    background-image: url('../Imagens/Estrutural/Sociais/instagram.png');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;

}

.Whatsapp_Icon {
    background-image: url('../Imagens/Estrutural/Sociais/whatsapp.png');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;

}

.Telegram_Icon {
    background-image: url('../Imagens/Estrutural/Sociais/telegrama.png');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;

}



@keyframes buy_animation_element {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.4);
    }

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




.select_elements_user_step4 {
    animation: popanimation_select 1s ease-in-out;
    border-radius: 10px;
}


@keyframes popanimation_select {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }

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






.select_elements_user_step4 {
    animation: popanimation_select 1s ease-in-out;
    border-radius: 10px;
}


@keyframes popanimation_select {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.5);
    }

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

.social-text {
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
    color: white;
    text-align: center;
    font-size: 12px;
}

.light-mode .social-text {
    color: rgb(0, 0, 0);
}


.icon_data {
    height: 50px;
    width: 50px;

}


.pix_elements {
    height: 30%;
    width: 80%;

    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
}

.pix_icon_image {
    height: 100px;
    width: 100px;
    background-image: url('../Imagens/Estrutural/icons8-foto-480.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.pix_text_content {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    font-size: 23px;
    font-family: "Heebo", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;

}

.text_content_pix_warning_user {
    background-color: rgba(0, 0, 0, 0.1);
    width: 350px;
    height: 130px;
    overflow: hidden !important;

    border-radius: 8px;
    position: relative;

}

.light-mode .text_content_pix_warning_user {
    background-color: rgb(0, 0, 0);
    width: 90%;

    border-radius: 8px;

}

.text_content_pix_warning_user p {
    color: white;
    text-align: justify;
    line-height: 33px;
    user-select: none;
}

.email_admin {
    color: #116604;
    font-family: 'Times New Roman', Times, serif;
}

.key_pix-admin {

    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}


.copy_gear {
    width: 30px;
    height: 30px;
    box-shadow: 0px 12px 11px #202020;
    background-image: url('../Imagens/Estrutural/copy_gear.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

.light-mode .copy_gear {
    box-shadow: none;
}


.step_for_button_main-pushable {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    transition: filter 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.step_for_button_main-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: hsl(0deg 0% 0% / 0.25);
    will-change: transform;
    transform: translateY(2px);
    transition:
        transform 600ms cubic-bezier(.3, .7, .4, 1);
}

.step_for_button_main-edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(to left,
            hsl(110, 93%, 11%) 0%,
            hsl(131, 94%, 14%) 8%,
            hsl(103, 95%, 15%) 92%,
            hsl(113, 100%, 16%) 100%);
}

.step_for_button_main-front {
    display: block;
    position: relative;
    padding: 12px 27px;
    border-radius: 12px;
    font-size: 1.1rem;
    color: white;
    background: hsl(113, 90%, 43%);
    will-change: transform;
    transform: translateY(-4px);
    transition:
        transform 600ms cubic-bezier(.3, .7, .4, 1);
}

@media (min-width: 768px) {
    .step_for_button_main-front {
        font-size: 1.25rem;
        padding: 12px 42px;
    }
}

.step_for_button_main-pushable:hover {
    filter: brightness(110%);
    -webkit-filter: brightness(110%);
}

.step_for_button_main-pushable:hover .step_for_button_main-front {
    transform: translateY(-6px);
    transition:
        transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.step_for_button_main-pushable:active .step_for_button_main-front {
    transform: translateY(-2px);
    transition: transform 34ms;
}

.step_for_button_main-pushable:hover .step_for_button_main-shadow {
    transform: translateY(4px);
    transition:
        transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.step_for_button_main-pushable:active .step_for_button_main-shadow {
    transform: translateY(1px);
    transition: transform 34ms;
}

.step_for_button_main-pushable:focus:not(:focus-visible) {
    outline: none;
}

.highlight-empty {
    border: 2px solid red;
    animation: erroAnimacao 0.6s ease;
    box-shadow: 0 0 5px red;
}


.envelope_container_pix_second_step {

    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.container_elements_social_contact_user {

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

.h2_heebo {
    font-family: "Heebo", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    color: white;
    font-size: 24px;
    line-height: 42px;
    height: 100px;
    width: 90%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-style: normal;
    user-select: none;
}

.social-text {
    user-select: none;
}

.light-mode .h2_heebo {
    color: rgb(0, 0, 0);
}


.h2_heebo_social {
    font-family: "Heebo", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    color: white;
    font-size: 24px;
    width: 70%;
    text-align: center;
    flex-direction: column;
    flex-direction: column-reverse;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-style: normal;

}



.container_button_confirm_user_social_pix {

    width: 150px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}





.button_user_container_element_pix {
    transform: translateY(400px);
}

@keyframes animation_element_pix {
    0% {
        transform: translateY(400px);
    }

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

.confirm_user_menssagem-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    height: 200px;
    display: block;

}



.container_confirm_user_data {
    height: 100%;
    width: 100%;
    display: flex;
    border-radius: 10px;
    animation: translate_y 1s ease-in-out;
    background-color: rgba(0, 0, 0, 0.9);
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    box-shadow: 0px 0px 15px 0px rgba(161, 161, 161, 0.438);

}

@keyframes translate_y {
    0% {
        transform: translateY(100px);
    }

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

@keyframes translate_y_exit {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

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

#change_data_content {
    margin-left: 10px;
}

.v-menssage {
    font-family: sans-serif;
    font-weight: 200;
    font-size: 24px;
    line-height: 44px;
    text-align: center;
    width: 100%;

    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin: 0 !important;

}


.confirm_user_w_message {
    width: 100px;
    height: 25%;
    display: flex;
    background-color: #F2B749;
    border: none;
    color: #ffffff;
    border-radius: 8px;
    align-items: center;
    justify-content: space-around;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;

}

.user_social_element_confirm_mapping {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    display: none;
    align-items: center;
    justify-content: space-around;
    height: 100%;
    width: 100%;

}

.container_mapping_flex_animation {
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    animation: animation_scale 1s ease-in-out;
    justify-content: space-around;

}

@keyframes animation_scale {
    0% {
        transform: scale(0.2);
    }

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

.container_mapping_social_user {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    background-color: #202020;
    width: 350px;
    border-radius: 8px;
    height: 350px;
}

.social_icon_mapping {
    height: 50px;
    width: 50px;
    background-image: url('/Assets/Imagens/Estrutural/Sociais/telegrama.png');
    background-repeat: no-repeat;
    background-size: contain;
}


.container_element_mapping_text {
    height: 160px;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;

}

.container_element_mapping_text {
    background-color: rgba(0, 0, 0, 0.4);
}

.ele_data_value_social {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    height: 50%;
}

#inv_return {
    color: red;
    font-size: 14px;
    text-align: justify;
    line-height: 28px;
    font-family: 'Times New Roman', Times, serif;
}

#alert_mapping_error {
    color: red;
    font-size: 15px;

    width: 90%;
    font-style: italic;
    text-align: center;
    line-height: 25px;
    font-family: 'Times New Roman', Times, serif;
}

.v-menssage {
    user-select: none;
}

.data_style {
    user-select: none;
}

.content_data_edit {
    user-select: none;
}

.text_data_social_mapping {
    transform: translateX(0);
    color: white;
    font-size: 16px;
    font-family: 'Times New Roman', Times, serif;
    border-radius: 10px;
    user-select: none;
    text-align: justify;
}


.input_mapping_1 {
    width: 100%;
    max-width: 300px;
    padding: 12px 16px;
    border: 2px solid #ccc;
    border-radius: 8px;
    background-color: #fdfdfd;
    font-size: 16px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    outline: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.input_mapping_1:focus {
    border-color: #4a90e2;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

.input_mapping_1::placeholder {
    color: #aaa;
    font-style: italic;
}



/* CSS */
.button_confirm_social_mapping {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    transition: filter 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    animation: upButton 1s ease-in-out;
}

@keyframes upButton {
    0% {
        transform: translateY(100px);
    }

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

.button_confirm_social_mapping-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: hsl(0deg 0% 0% / 0.25);
    will-change: transform;
    transform: translateY(2px);
    transition:
        transform 600ms cubic-bezier(.3, .7, .4, 1);
}

.button_confirm_social_mapping-edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;

}



.button_confirm_social_mapping-front {
    display: block;
    position: relative;
    padding: 12px 27px;
    border-radius: 12px;
    font-size: 1.1rem;
    color: white;
    will-change: transform;
    transform: translateY(-4px);
    transition:
        transform 600ms cubic-bezier(.3, .7, .4, 1);
}

.button_confirm_social_mapping-edge.gmail {
    background: linear-gradient(to left,
            hsl(0, 86%, 56%) 0%,
            hsl(0, 67%, 41%)8%,
            hsl(0, 67%, 32%) 92%,
            hsl(0, 67%, 32%) 100%);

}



.button_confirm_social_mapping-front.gmail {
    background: #F23030;
}


.button_confirm_social_mapping-edge.instagram {
    background: linear-gradient(to left,
            hsl(320, 75%, 35%) 0%,
            hsl(320, 71%, 26%)8%,
            hsl(320, 90%, 23%) 92%,
            hsl(320, 55%, 41%) 100%);

}

.button_confirm_social_mapping-front.instagram {
    background: #D91E98;
}



.button_confirm_social_mapping-edge.telegram {
    background: linear-gradient(to left,
            hsl(208, 93%, 34%) 0%,
            hsl(208, 92%, 28%)8%,
            hsl(208, 99%, 27%) 92%,
            hsl(208, 80%, 23%) 100%);

}

.button_confirm_social_mapping-front.telegram {
    background: #0583F2;
}

.button_confirm_social_mapping-edge.whatsapp {
    background: linear-gradient(to left,
            hsl(112, 70%, 18%) 0%,
            hsl(112, 69%, 20%) 8%,
            hsl(112, 68%, 27%) 92%,
            hsl(112, 70%, 22%) 100%);

}

.button_confirm_social_mapping-front.whatsapp {
    background: #2FA61C;
}


































@media (min-width: 768px) {
    .button_confirm_social_mapping-front {
        font-size: 1.25rem;
        padding: 12px 42px;
    }
}

.button_confirm_social_mapping:hover {
    filter: brightness(110%);
    -webkit-filter: brightness(110%);
}

.button_confirm_social_mapping:hover .button_confirm_social_mapping-front {
    transform: translateY(-6px);
    transition:
        transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.button_confirm_social_mapping:active .button_confirm_social_mapping-front {
    transform: translateY(-2px);
    transition: transform 34ms;
}

.button_confirm_social_mapping:hover .button_confirm_social_mapping-shadow {
    transform: translateY(4px);
    transition:
        transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.button_confirm_social_mapping:active .button_confirm_social_mapping-shadow {
    transform: translateY(1px);
    transition: transform 34ms;

}

.button_confirm_social_mapping:focus:not(:focus-visible) {
    outline: none;
}

@keyframes left_direction {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

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

@keyframes right_direction {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

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

@keyframes top_direction {
    0% {
        transform: translateY(100px);
        opacity: 0;
    }

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

@keyframes bottom_direction {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }

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


.change_name_data_log_overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: space-around;
    transform: translate(-50%, -50%);

}


.change_container_element {
    height: 100%;
    width: 100%;
    background-color: #1a1a1a;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: jump_pup 0.8s ease-in-out;
    justify-content: space-evenly;
    width: 400px;
    border-radius: 8px;
    transform: scale(1.1);
    height: 300px;
}


@keyframes jump_pup {
    0% {
        transform: translateY(105px);
    }

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


.social_middle_icon {
    width: 28px !important;
    height: 28px !important;
    background-image: url('./');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}


.social_container_elements {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.contact_change_overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.05);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
    align-items: center;
    justify-content: space-around;
}


.rash_social_text {

    width: 80%;
}

.container_social_change_contact {
    height: 380px;
    width: 330px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    overflow: hidden;
    background-color: #1a1a1a;
    border-radius: 8px;
}


.container_elements_social_change_2 {
    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    transform: translateX(0%);
    transition: transform 1s ease-in-out;
    justify-content: space-around;
}

.element_atribute_social_style {
    height: 40px;
    width: 40px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;

}


.social_1_gmail {
    background-image: url('../Imagens/Estrutural/Sociais/gmail.png');
}

.social_2_instagram {
    background-image: url('../Imagens/Estrutural/Sociais/instagram.png');
}

.social_3_telegram {
    background-image: url('../Imagens/Estrutural/Sociais/telegrama.png');
}

.social_4_whatsapp {
    background-image: url('../Imagens/Estrutural/Sociais/whatsapp.png');
}

.element_new_Value {
    transform: translateX(100%);
    position: absolute;
    height: 100%;
    transition: transform 1s ease-in-out;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;


}

.element_transform_X_container {
    transition: transform 1s ease-in-out;
    height: 25%;
    width: 100%;
    overflow: hidden !important;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
}

#icon_alert {
    width: 40px;
    height: 40px;
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

.container_dialog {

    border-radius: 100%;
    height: 65px;
    width: 65px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.container_dialog.active {

    transition: transform 0.5s ease-in-out;
    animation: mini_pop 0.5s ease-in-out;
    background-color: rgba(0, 0, 0, 0.5);

}

@keyframes mini_pop {
    0% {

        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {

        transform: scale(1);
    }
}

.copy_gear {
    animation: heartbeat 1.2s infinite ease-in-out;
    transform-origin: center;
}

@keyframes heartbeat {

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

    14% {
        transform: scale(1.3);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.3);
    }

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



@keyframes erroAnimacao {
    0% {
        background-color: transparent;
        transform: translateX(0);
    }

    20% {

        transform: translateX(-4px);
    }

    40% {
        transform: translateX(4px);
    }

    60% {
        transform: translateX(-4px);
    }

    80% {
        transform: translateX(4px);
    }

    100% {

        transform: translateX(0);
    }
}

.erro {
    animation: erroAnimacao 0.6s ease;

}



.add_action_user_social_data {
    height: 80px;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-around;
}

.action-btn-social {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    visibility: hidden;
    outline-offset: 4px;
    transition: filter 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    animation: slideUp 1s ease-in-out;
}

@keyframes slideUp {
    0% {
        transform: translateY(100px);
    }

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

.action-btn-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: hsl(0deg 0% 0% / 0.25);
    will-change: transform;
    transform: translateY(2px);
    transition:
        transform 600ms cubic-bezier(.3, .7, .4, 1);
}

.action-btn-edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(to left,
            hsl(0, 0%, 63%) 0%,
            hsl(0, 0%, 90%) 8%,
            hsl(0, 0%, 75%) 92%,
            hsl(0, 0%, 100%) 100%);
}

.action-btn-front {
    display: block;
    position: relative;
    padding: 12px 27px;
    border-radius: 12px;
    font-size: 1.1rem;
    color: rgb(0, 0, 0);
    background: hsl(0, 0%, 100%);
    will-change: transform;
    transform: translateY(-4px);
    transition:
        transform 600ms cubic-bezier(.3, .7, .4, 1);
}

@media (min-width: 768px) {
    .action-btn-front {
        font-size: 1.25rem;
        padding: 12px 42px;
    }
}

.action-btn-social:hover {
    filter: brightness(110%);
    -webkit-filter: brightness(110%);
}

.action-btn-social:hover .action-btn-front {
    transform: translateY(-6px);
    transition:
        transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.action-btn-social:active .action-btn-front {
    transform: translateY(-2px);
    transition: transform 34ms;
}

.action-btn-social:hover .action-btn-shadow {
    transform: translateY(4px);
    transition:
        transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.action-btn-social:active .action-btn-shadow {
    transform: translateY(1px);
    transition: transform 34ms;
}

.action-btn-social:focus:not(:focus-visible) {
    outline: none;
}

.confirm_data_content_change {}


.el-container {

    width: 200px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}


.user_interaction_panel {
    height: 80px;
    display: flex;
    position: relative;
    overflow: hidden !important;
    width: 100%;
    align-items: flex-end;
    justify-content: space-around;
}


.user_interaction_panel.animation {}


.interactive-btn-profile {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    transition: filter 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transform: translateY(100px);

}

@keyframes riseEffect {
    0% {
        transform: translateY(100px);
    }

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

.interactive-btn-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: hsl(0deg 0% 0% / 0.25);
    will-change: transform;
    transform: translateY(2px);
    transition:
        transform 600ms cubic-bezier(.3, .7, .4, 1);
}

.interactive-btn-edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(to left,
            hsl(0, 0%, 100%) 0%,
            hsl(0, 0%, 100%) 8%,
            hsl(0, 0%, 100%) 92%,
            hsl(0, 0%, 100%) 100%);
}

.interactive-btn-front {
    display: block;
    position: relative;
    padding: 12px 27px;
    border-radius: 12px;
    font-size: .800rem;
    color: rgb(0, 0, 0);
    background: hsl(0, 0%, 100%);
    will-change: transform;
    transform: translateY(-4px);
    transition:
        transform 600ms cubic-bezier(.3, .7, .4, 1);
}

@media (min-width: 768px) {
    .interactive-btn-front {
        font-size: 1.25rem;
        padding: 12px 42px;
    }
}

.interactive-btn-profile:hover {
    filter: brightness(110%);
    -webkit-filter: brightness(110%);
}

.interactive-btn-profile:hover .interactive-btn-front {
    transform: translateY(-6px);
    transition:
        transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.interactive-btn-profile:active .interactive-btn-front {
    transform: translateY(-2px);
    transition: transform 34ms;
}

.interactive-btn-profile:hover .interactive-btn-shadow {
    transform: translateY(4px);
    transition:
        transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.interactive-btn-profile:active .interactive-btn-shadow {
    transform: translateY(1px);
    transition: transform 34ms;
}

.interactive-btn-profile:focus:not(:focus-visible) {
    outline: none;
}


.overlay_warning_user_whatsapp {

    width: 300px;
    height: 180px;
    position: absolute;
    left: 50%;
    top: 50%;
    display: none;
    transform: translate(-50%, -50%);
}

.container_warning_user_whatsapp {
    background-color: rgb(219, 65, 65);
    border-radius: 8px;
    height: 100%;
    width: 100%;
    display: flex;
    transform: scale(1.2);
    align-items: center;
    flex-direction: column;
    justify-content: space-around;

    /* Transição lenta para background-color */
    transition: background-color 2s ease;

    /* Animação apenas para o scale */
    animation: alert_number 0.7s ease-in-out;
}

.container_warning_user_whatsapp.red {
    background-color: rgb(253, 135, 135);
}

@keyframes alert_number {
    0% {
        transform: scale(2);
    }

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

.whatsapp-instruction {
    background-color: #f9f9f9;
    border-left: 4px solid #25d366;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-family: 'Segoe UI', sans-serif;
}

.whatsapp-instruction p {
    margin: 4px 0;
}

.whatsapp-instruction .label {
    font-weight: bold;
    font-size: 1rem;
    color: #202020;
}

.example {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    font-style: italic;
}

.details {
    font-size: 0.88rem;
    color: #ffffff;
    width: 90%;
    line-height: 28px;

    font-style: italic;
}

.input-whatsapp {
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
    width: 100%;
    max-width: 300px;
}


/* CSS */
.action-btn-container {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    transition: filter 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;

}


.action-btn-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: hsl(0deg 0% 0% / 0.25);
    will-change: transform;
    transform: translateY(2px);
    transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}

.action-btn-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(to left,
            hsl(0, 100%, 20%) 0%,
            hsl(0, 99%, 30%) 8%,
            hsl(0, 100%, 30%) 92%,
            hsl(0, 100%, 26%) 100%);
}

.action-btn-face {
    display: block;
    position: relative;
    padding: 12px 27px;
    border-radius: 12px;
    font-size: .800rem;
    color: white;
    background: hsl(7, 90%, 43%);
    will-change: transform;
    transform: translateY(-4px);
    transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}

@media (min-width: 768px) {
    .action-btn-face {
        font-size: 1.25rem;
        padding: 12px 42px;
    }
}

.action-btn-container:hover {
    filter: brightness(110%);
    -webkit-filter: brightness(110%);
}

.action-btn-container:hover .action-btn-face {
    transform: translateY(-6px);
    transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.action-btn-container:active .action-btn-face {
    transform: translateY(-2px);
    transition: transform 34ms;
}

.action-btn-container:hover .action-btn-shadow {
    transform: translateY(4px);
    transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.action-btn-container:active .action-btn-shadow {
    transform: translateY(1px);
    transition: transform 34ms;
}

.action-btn-container:focus:not(:focus-visible) {
    outline: none;
}

.something_wrong {
    font-family: 'Times New Roman', Times, serif;
    color: red;
    font-style: italic;
    user-select: none;
    font-size: 13px;
}







/* CSS */
.__confirm_social-pushable {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    transition: filter 250ms, background 1s ease-in-out;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    animation: upButton 1s ease-in-out;
}

@keyframes upButton {
    0% {
        transform: translateY(100px);
    }

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

.__confirm_social-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: hsl(0deg 0% 0% / 0.25);
    will-change: transform;
    transform: translateY(2px);
    transition:
        transform 600ms cubic-bezier(.3, .7, .4, 1);
}

.__confirm_social-edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(to left,
            hsl(0, 0%, 98%) 0%,
            hsl(0, 0%, 100%) 8%,
            hsl(0, 0%, 99%) 92%,
            hsl(0, 0%, 100%) 100%);
}


.__confirm_social-edge.gmail {
    background: linear-gradient(to left,
            hsl(0, 100%, 18%) 0%,
            hsl(0, 100%, 31%) 8%,
            hsl(0, 100%, 35%) 92%,
            hsla(0, 86%, 35%, 0.932) 100%);
}


.__confirm_social-front.gmail {
    transition: background 1s ease-in-out;
    background: #F23030;
}

.__confirm_social-edge.instagram {
    background: linear-gradient(to left,
            hsl(320, 75%, 35%) 0%,
            hsl(320, 71%, 26%)8%,
            hsl(320, 90%, 23%) 92%,
            hsl(320, 55%, 41%) 100%);
}

.__confirm_social-front.instagram {
    transition: background 1s ease-in-out;
    background: #D91E98;

}

.__confirm_social-edge.telegram {
    background: linear-gradient(to left,
            hsl(208, 93%, 34%) 0%,
            hsl(208, 92%, 28%)8%,
            hsl(208, 99%, 27%) 92%,
            hsl(208, 80%, 23%) 100%);
}


.__confirm_social-front.telegram {
    transition: background 1s ease-in-out;
    background: #0583F2;
}

.__confirm_social-edge.whatsapp {
    background: linear-gradient(to left,
            hsl(112, 70%, 18%) 0%,
            hsl(112, 69%, 20%) 8%,
            hsl(112, 68%, 27%) 92%,
            hsl(112, 70%, 22%) 100%);
}


.__confirm_social-front.whatsapp {
    transition: background 1s ease-in-out;
    background: #2FA61C;
}


.__confirm_social-front {
    display: block;
    position: relative;
    padding: 12px 27px;
    border-radius: 12px;
    font-size: .950rem;
    color: white;
    background: rgba(255, 184, 184, 0.616);

    will-change: transform;
    transform: translateY(-4px);
    transition:
        transform 600ms cubic-bezier(.3, .7, .4, 1);
}

@media (min-width: 768px) {
    .__confirm_social-front {
        font-size: 1.25rem;
        padding: 12px 42px;
    }
}

.__confirm_social-pushable:hover {
    filter: brightness(110%);
    -webkit-filter: brightness(110%);
}

.__confirm_social-pushable:hover .__confirm_social-front {
    transform: translateY(-6px);
    transition:
        transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.__confirm_social-pushable:active .__confirm_social-front {
    transform: translateY(-2px);
    transition: transform 34ms;
}

.__confirm_social-pushable:hover .__confirm_social-shadow {
    transform: translateY(4px);
    transition:
        transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.__confirm_social-pushable:active .__confirm_social-shadow {
    transform: translateY(1px);
    transition: transform 34ms;
}

.__confirm_social-pushable:focus:not(:focus-visible) {
    outline: none;
}

.container_button_confirm_social_change {
    width: 100%;
    position: relative;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.frame_icon_social {
    border: 1px solid white;
    height: 70px;
    width: 70px;
    display: flex;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: space-around;
}



@keyframes down_up {
    0% {
        transform: translateY(0px);
    }

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

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



/* CSS */
.confirm-all-data-pushable {
    position: absolute;
    display: none;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    transition: filter 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    animation: upButton 1s ease-in-out;
}

@keyframes upButton {
    0% {
        transform: translateY(100px);
    }

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

.confirm-all-data-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: hsl(0deg 0% 0% / 0.25);
    will-change: transform;
    transform: translateY(2px);
    transition:
        transform 600ms cubic-bezier(.3, .7, .4, 1);
}

.confirm-all-data-edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(to left,
            hsl(123, 100%, 15%) 0%,
            hsl(123, 100%, 18%) 8%,
            hsl(108, 100%, 28%) 92%,
            hsl(115, 100%, 21%) 100%);
}

.confirm-all-data-front {
    display: block;
    position: relative;
    padding: 12px 27px;
    border-radius: 12px;
    font-size: .900rem;
    font-weight: normal;
    color: rgb(255, 255, 255);
    background: hsl(113, 100%, 31%);
    will-change: transform;
    transform: translateY(-4px);
    transition:
        transform 600ms cubic-bezier(.3, .7, .4, 1);
}

@media (min-width: 768px) {
    .confirm-all-data-front {
        font-size: 1.25rem;
        padding: 12px 42px;
    }
}

.confirm-all-data-pushable:hover {
    filter: brightness(110%);
    -webkit-filter: brightness(110%);
}

.confirm-all-data-pushable:hover .confirm-all-data-front {
    transform: translateY(-6px);
    transition:
        transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.confirm-all-data-pushable:active .confirm-all-data-front {
    transform: translateY(-2px);
    transition: transform 34ms;
}

.confirm-all-data-pushable:hover .confirm-all-data-shadow {
    transform: translateY(4px);
    transition:
        transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.confirm-all-data-pushable:active .confirm-all-data-shadow {
    transform: translateY(1px);
    transition: transform 34ms;
}

.confirm-all-data-pushable:focus:not(:focus-visible) {
    outline: none;
}

.overlay_alert_friend_validate {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 999999999 !important;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.3);
    display: none;
    align-items: center;
    justify-content: center;
}

.window_alert_validate {

    height: 40px;
    font-family: sans-serif;
    font-size: 17px;
    font-weight: 400;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container_alert_validade {
    width: 350px;
    height: 150px;
    background-color: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    animation: mini_alert_frame 0.6s ease-in-out;
}

@keyframes mini_alert_frame {
    0% {
        transform: translateY(100px);
    }

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

.align_validade_button {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.validate_button {
    background-color: black;
    width: 100px;
    height: 40px;

    border-radius: 8px;
    border: none;
    color: white;
    font-family: monospace;
    box-shadow: 1px 1px 1px 1px rgb(87, 87, 87);
}


/* CSS */
.__window_alert-pushable {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    transition: filter 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;

}


.__window_alert-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: hsl(0deg 0% 0% / 0.25);
    will-change: transform;
    transform: translateY(2px);
    transition:
        transform 600ms cubic-bezier(.3, .7, .4, 1);
}

.__window_alert-edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(to left,
            hsl(0, 100%, 25%) 0%,
            hsl(0, 100%, 21%) 8%,
            hsl(0, 100%, 24%) 92%,
            hsl(0, 100%, 17%) 100%);
}

.__window_alert-front {
    display: block;
    position: relative;
    padding: 12px 27px;
    border-radius: 12px;
    font-size: .800rem;
    color: white;
    background: hsl(0, 90%, 43%);
    will-change: transform;
    transform: translateY(-4px);
    transition:
        transform 600ms cubic-bezier(.3, .7, .4, 1);
}

@media (min-width: 768px) {
    .__window_alert-front {
        font-size: 1.25rem;
        padding: 12px 42px;
    }
}

.__window_alert-pushable:hover {
    filter: brightness(110%);
    -webkit-filter: brightness(110%);
}

.__window_alert-pushable:hover .__window_alert-front {
    /* transform: translateY(-6px); */
    transition:
        transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.__window_alert-pushable:active .__window_alert-front {
    transform: translateY(-2px);
    transition: transform 34ms;
}

.__window_alert-pushable:hover .__window_alert-shadow {
    transform: translateY(4px);
    transition:
        transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.__window_alert-pushable:active .__window_alert-shadow {
    transform: translateY(1px);
    transition: transform 34ms;
}

.__window_alert-pushable:focus:not(:focus-visible) {
    outline: none;
}


.__no_action_user_select_about_popup-edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(to left,
            hsl(108, 100%, 21%) 0%,
            hsl(118, 100%, 14%) 8%,
            hsl(113, 100%, 18%) 92%,
            hsl(130, 100%, 14%) 100%);
}


.ess_ax_align {
    display: flex;
    width: 100%;
    height: 250px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
    gap: 20px;
    flex-direction: column;
    justify-content: space-evenly;

}

.fa-collum-1 {

    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.fa-colum-2 {

    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}


.__quote-wrapper {
    position: absolute;
    height: 100%;
    display: flex;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column;
}



.__quote-container {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    display: flex;


}

@keyframes stumbleIn {
    0% {

        transform: translateY(80px) rotate(-20deg) scale(1.3);
    }

    30% {
        transform: translateY(-20px) rotate(10deg) scale(1.3);
    }

    60% {
        transform: translateY(10px) rotate(-6deg) scale(1.3);
    }

    80% {
        transform: translateY(-5px) rotate(3deg) scale(1.3);
    }

    100% {

        transform: translateY(0) rotate(0deg) scale(1.3);
    }
}

@keyframes bounceIn {
    0% {
        transform: translateY(-100px) scale(0.8);

    }

    30% {
        transform: translateY(30px) scale(1.1);

    }

    50% {
        transform: translateY(-20px) scale(0.95);

    }

    70% {
        transform: translateY(10px) scale(1.05);

    }

    85% {
        transform: translateY(-5px) scale(0.98);
    }

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

@keyframes wiggleShake {
    0% {
        transform: rotate(0deg);
    }

    15% {
        transform: rotate(5deg);
    }

    30% {
        transform: rotate(-5deg);
    }

    45% {
        transform: rotate(4deg);
    }

    60% {
        transform: rotate(-4deg);
    }

    75% {
        transform: rotate(2deg);
    }

    90% {
        transform: rotate(-2deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.elemento-wiggle {
    animation: wiggleShake 0.8s ease-in-out forwards;
    /* Easing para balanço natural e curto */
}


.elemento-bounce {
    animation: bounceIn 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
    /* Easing elástico para quique natural */
}

.__quote-wrapper.animate_vel {
    animation: Y_t 2s ease-in-out;
    position: absolute;
}

@keyframes Y_t {
    0% {
        transform: translateY(0vh);
    }

    100% {
        transform: translateY(100vh);
    }
}

.__quote-card {
    width: 180px;
    height: 300px;
    border-radius: 20px;
    margin: 0 10px;
    display: flex;
    position: absolute;

    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* Inativos começam inclinados */
    visibility: hidden;
    transform: scale(1.3);
}

.__quote-card.__quote-active_0 {
    backface-visibility: hidden;
    animation: slideDown 0.6s ease-in-out;
    transform-style: preserve-3d;
    visibility: visible;
}

.__quote-card.__quote-active_1 {
    backface-visibility: hidden;
    animation: popupIn 0.6s ease-in-out;
    transform-style: preserve-3d;
    visibility: visible;
}

.__quote-card.__quote-active_2 {
    backface-visibility: hidden;
    animation: jellyDrop 1s ease-in-out;
    transform-style: preserve-3d;
    visibility: visible;
}


.pop-up-for-fonts-container {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #444;
    padding: 20px;

    color: #fff;
}

.pop-up-for-fonts-container.show {
    display: block;
}

.pop-up-for-fonts-container.addexit {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}


.container_button_action_open-right {

    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 50px;
    height: 50px;
}


.container_button_action_open-left {
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 50px;
    height: 50px;
}

.mark_container_open {

    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 50px;
    height: 50px;
}


.capa_search {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/search_capa.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.capa_search_1 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/search_capa.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.capa_search_2 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/search_capa.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}




.buy_house {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/buy_house.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.capa_tinta {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('/Assets/Imagens/Capas/capa_theme.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.neo_classic {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('/Assets/Imagens/Capas/neo_classic.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.listening_capa {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/listning_music.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.capa_cinema {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/capa_cinema.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.reading_tablet {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/reading_card_image.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.sticks_capas {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/sticks_notes.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.files_capa {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/files_archive.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}


.capa_form {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/form_capa.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.narracao_capa {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/narracao_capa_2.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.dicionary_capa {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/dicionario_capa.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.fox_capa {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/fox_wallpaper_capa.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cronograma {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/cronograma.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.gift_presente {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/gift_present.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.reading_fast {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/reading_fast-book.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.quick_notes {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/quick_notes.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.suport_capa {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/suporte.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tunel_fox {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/tunel_fox.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}




.bear_capa {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/black_white_bear.jpg');
    filter: grayscale(100%);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.btn-capa-bear {
    background-image: url('../Imagens/Estrutural/panda-bear.png');
    background-position: center center;
    background-size: cover;
    width: 40px;
    border-radius: 100%;
    height: 40px;
    background-position: center center;
}

.settings_capa {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/settings.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.mobile_aplication {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/mobile_aplication.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.doubts {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('/Assets/Imagens/Capas/doubs_capa.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

#__quote-prevBtn {
    background-image: url('/Assets/Imagens/Estrutural/para\ a\ esquerda.png');
  
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 50px;
    visibility: hidden;
    width: 50px;
    position: absolute;
    left: 10px;
    top: 50%;

}

#__quote-nextBtn {
    background-image: url('/Assets/Imagens/Estrutural/next_element_icon.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 50px;
    width: 50px;
    visibility: hidden;
    position: absolute;
    right: 10px;
    filter: invert(1);
    top: 50%;

}

#__quote-nextBtn.active {
    animation: shrinkAndShake 1s ease forwards;
}

#__quote-prevBtn.active {
    animation: shrinkAndShake 0.4s ease forwards;
}

@keyframes shrinkAndShake {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(0.7);
    }

    50% {
        transform: scale(0.7) translateX(-2px);
    }

    60% {
        transform: scale(0.7) translateX(2px);
    }

    70% {
        transform: scale(0.7) translateX(-1px);
    }

    80% {
        transform: scale(0.7) translateX(1px);
    }

    100% {
        transform: scale(0.7) translateX(0);
    }
}


.tela_cheia_capa {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/tela_cheia_capa.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.mark_capa {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/mark_card_capa.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.tower_capa {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/torre.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

@keyframes levent_element {
    0% {
        transform: translateY(10vh);

    }

    100% {
        transform: translateY(0vh);

    }
}

@keyframes log_on {
    0% {
        transform: translateY(100vh);
    }

    100% {
        transform: translateY(0vh);
    }
}

.sky {
    position: absolute;
    width: 100%;
    pointer-events: none !important;
    display: block;
    height: 100%;
}

.star {
    position: absolute;
    background: white;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
    animation: twinkle 5s infinite;
}


@keyframes twinkle {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}



canvas#canvas {
    height: 100%;
    width: 100%;
    display: block;
}


:root {
    --bg: #0f1724;
    /* dark blue-ish */
    --accent1: #7ee3bd;
    --accent2: #ffd166;
    --accent3: #ff6b6b;
}

.stage {
    position: relative;
    width: 90vw;
    max-width: 900px;
    height: 70vh;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.02);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 20px;
}



/* Notes (base style) */
.note {
    position: absolute;
    bottom: -60px;
    /* start off-screen */
    pointer-events: none;
    user-select: none;
    font-size: 28px;
    opacity: 0;
    transform-origin: center;
    will-change: transform, opacity;
    text-shadow: 0 4px 18px rgba(2, 6, 23, 0.6);
}

@keyframes rise_up {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    25% {
        transform: translateX(-10px) translateY(-25vh) rotate(-10deg);
    }

    50% {
        transform: translateX(10px) translateY(-60vh) rotate(10deg);
    }

    75% {
        transform: translateX(-8px) translateY(-90vh) rotate(-6deg);
    }

    100% {
        transform: translateX(0px) translateY(-120vh) rotate(0deg);
        opacity: 0;
    }
}


/* keyframes for rise+fade */


/* A small decorative band at the bottom */
.footer-note {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    opacity: 0.6
}


.pop_corn {
    position: absolute;
    width: 10px;
    height: 10px;

    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    animation: popcorn_animation 10s ease-in-out infinite;
}

/* Posições diferentes */
.pop_corn:nth-child(1) {
    left: 10%;
}

.pop_corn:nth-child(2) {
    left: 30%;
}

.pop_corn:nth-child(3) {
    left: 50%;
}

.pop_corn:nth-child(4) {
    left: 70%;
}

.pop_corn:nth-child(5) {
    left: 90%;
}

/* Animação: queda + giro suave */
@keyframes popcorn_animation {
    0% {
        transform: translateY(-100vh);
    }

    100% {
        transform: translateY(100vh);
    }
}



#__pop_corn_container {

    position: relative;
    overflow: hidden;
    background-color: #ddd;
    /* Fundo da panela */
}

.__pop_corn_popcorn {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
}

.__pop_corn_popped {
    width: 20px;
    height: 20px;
    background-image: url('../Imagens/Estrutural/icon_popcorn-removebg-preview.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10%;
}

.sticks_notes_container {
    background-image: url('');
}

.question {
    position: absolute;
    width: 30px;
    height: 30px;
    top: -80px;
}

.question_roxo {
    background-image: url('../Imagens/Estrutural/question-mark_roxo.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.question_amarelo {
    background-image: url('../Imagens/Estrutural/question-mark_amarelo.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.question_rosa {
    background-image: url('../Imagens/Estrutural/question-mark_rosa.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.question_page {
    position: absolute;
    width: 30px;
    height: 30px;
    top: -80px;
}

.question_roxo_page {
    background-image: url('../Imagens/Estrutural/question-mark_roxo.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.question_amarelo_page {
    background-image: url('../Imagens/Estrutural/question-mark_amarelo.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.question_rosa_page {
    background-image: url('../Imagens/Estrutural/question-mark_rosa.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Animação de queda + rotação */
@keyframes cairGirando {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    100% {
        transform: translateY(90vh) rotate(720deg);
    }
}

.animar {
    animation: cairGirando 3s linear forwards infinite;
}



.gear_element {
    width: 50px;
    background-image: url('../Imagens/Estrutural/settings0.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 50px;
    animation: __config_set_spin 2s linear infinite;
}

@keyframes __config_set_spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes rise {
    from {
        bottom: -40px;
        opacity: 1;
    }

    to {
        bottom: 100vh;
        opacity: 0;
        /* opcional: vai desaparecendo */
    }
}



.light {
    position: absolute;
    bottom: -40px;
    /* começa fora da tela */
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle, white 0%, rgba(255, 255, 255, 0.3) 60%, transparent 100%);
    filter: blur(4px);

}

.light.animate {
    animation: rise 7s linear infinite;
}





.inv_element {
    border: 1px solid red;
    width: 100%;
    height: 100%;
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

._audio_file_manager_wrapper {
    position: relative;
    width: 100%;
    z-index: 999 !important;
    overflow: hidden !important;
    height: 60vh;
    display: flex;
    flex-direction: column;
    border: 1px solid red;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
}

._audio_file_manager_viewport {
    width: 600px;
    position: relative;
}

._audio_file_manager_container {
    display: flex;
    transition: transform 0.6s ease-in-out;
    will-change: transform;
    padding: 0 10px;
    /* Ensure margins don't cause clipping */
}

._audio_file_manager_card {
    width: 180px;
    height: 200px;
    background: #333;
    border-radius: 20px;
    margin: 0 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    /* Silhouette effect for non-active cards */
    transform: scale(0.9) translateZ(0);
    transition: transform 0.6s ease-in-out;
    will-change: transform;
    /* Silhouette styling */
    color: #ccc;
    /* Lighter text for readability */
    pointer-events: none;
}

._audio_file_manager_card._audio_file_manager_active {
    transform: scale(1.4);
}




/* Controls */
.controls {
    border: 1px solid red;
    width: 100%;
    display: flex;
    align-items: center;
    align-items: center;
    gap: 12px
}

.btns {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center
}

button.icon {
    -webkit-tap-highlight-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: #1e1e27;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-soft);
    transition: transform .08s ease, background .2s ease, box-shadow .2s ease
}

button.icon:hover {
    transform: translateY(-1px)
}

button.icon:active {
    transform: translateY(0) scale(.98)
}

.play {
    width: 62px;
    height: 62px;
    border-radius: 20px;
    background: linear-gradient(180deg, var(--accent), #d94079)
}

.muted {
    opacity: .55
}

.progress {
    grid-column: 1 / -1;
    display: grid;
    gap: 8px;
    width: 80%;
    margin-top: 10px
}



.bar .buffered {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: #2b2b39
}




.times {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--muted);
    font-size: .9rem
}

.extra {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end
}

.extra .icon {
    width: 38px;
    height: 38px;
    border-radius: 12px
}

#iconPlay {
    color: white !important;
}


.vol {
    display: flex;
    align-items: center;
    gap: 10px
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 130px;
    height: 10px;
    background: #23232f;
    border-radius: 999px;
    outline: none;
    cursor: pointer
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 0 0 4px rgba(255, 77, 141, .25)
}

input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    border: none
}

/* Sidebar / Playlist */
.sidebar {
    background: var(--panel-2);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.row h2 {
    font-size: 1.05rem;
    margin: 0
}

.hint {
    color: var(--muted);
    font-size: .92rem
}

.actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.chip {
    border: 1px solid #2a2a36;
    background: #1e1e27;
    color: var(--text);
    padding: 10px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: transform .08s ease, background .2s ease
}

.chip:hover {
    transform: translateY(-1px)
}

.dropzone {
    border: 1.5px dashed #343444;
    border-radius: 16px;
    padding: 14px;
    text-align: center;
    color: var(--muted);
    background: #181821
}

.dropzone.drag {
    background: #1e1e28;
    border-color: #4a4a61
}

.list {
    display: grid;
    gap: 8px;
    max-height: 360px;
    overflow: auto;
    padding-right: 4px
}

.track {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 14px;
    background: #1a1a23;
    cursor: pointer;
    transition: background .15s ease, transform .08s ease
}

.track:hover {
    background: #1e1e29;
    transform: translateY(-1px)
}

.track.active {
    outline: 2px solid rgba(255, 77, 141, .45);
    background: #20202c
}


#text_content_audio_file {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    color: white;
    font-family: monospace;
    position: absolute;
    top: 100px;
    left: 50%;
    font-size: 16px;
    line-height: 33px;
    width: 60%;
    transform: translate(-50%, -50%);

}



.btns {
    display: flex;
    gap: 10px;
}

.icon {
    background: none;
    border: none;
    cursor: pointer;
    color: #fff;
    transition: color 0.3s;
}

.icon.active {
    color: #1db954;
    /* Highlight color for active state, e.g., repeat button */
}

.progress {
    width: 100%;
    max-width: 300px;
    position: relative;
}

.bar {
    height: 5px;
    background: #555;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
}



.fill {
    height: 100%;
    background: #1db954;
    /* Progress color */
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 0;
}

.scrubber {
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    z-index: 3;
    cursor: pointer;
}

.times {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #fff;
}


.__audio_file_card_automatic_carousel-container {

    width: 100%;
    height: 300px;
    border-top: 1px solid rgba(255, 255, 255, 0.411);
    border-bottom: 1px solid rgba(255, 255, 255, 0.411);
    border-left: 2px solid transparent;
    border-right: 2px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.__audio_file_card_automatic_carousel {
    position: relative;
    height: 100%;
    width: 100%;
}

.__audio_file_card_automatic_card {
    width: 80%;
    max-width: 300px;
    height: 200px;
    border-radius: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: white;
    font-size: 24px;
    font-weight: bold;
    position: absolute;
    left: 50%;
    top: 50%;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
    user-select: none;
}




.card_one {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/Assets/Imagens/Capas/Malta.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

}

.mel_e_limao_capa_mp3 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/Assets/Imagens/Capas/mel_e_limao_capa_mp3.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.orange_capa {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/Assets/Imagens/Capas/orange_capa.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

}


.profunda {

    width: 50%;
    height: 80%;
    background-image: url('/Assets/Imagens/Capas/unnamed.jpg');
    border-radius: 12px;
    box-shadow:
        0 5px 0 #202020,
        /* sombra de "espessura" imediata */
        0 10px 0 #181818,
        /* mais fundo */
        0 15px 0 #101010,
        /* ainda mais fundo */
        0 20px 20px rgba(0, 0, 0, 0.5);
    /* sombra suave final */
    transition: transform 0.2s ease;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    display: flex;
    align-items: flex-end;
    justify-content: flex-end;

    padding-right: 5px;
    padding-bottom: 5px;

}

.profunda-1 {
    width: 50%;
    height: 80%;
    background-image: url('/Assets/Imagens/Capas/banho_e_azeite_mp3.jpg');
    border-radius: 12px;
    box-shadow:
        0 5px 0 #202020,
        /* sombra de "espessura" imediata */
        0 10px 0 #181818,
        /* mais fundo */
        0 15px 0 #101010,
        /* ainda mais fundo */
        0 20px 20px rgba(0, 0, 0, 0.5);
    /* sombra suave final */
    transition: transform 0.2s ease;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;

    padding-right: 5px;
    padding-bottom: 5px
}

.profunda-2 {
    width: 50%;
    height: 80%;
    background-image: url('/Assets/Imagens/Capas/limao_e_mel_mp3.png');
    border-radius: 12px;
    box-shadow:
        0 5px 0 #202020,
        /* sombra de "espessura" imediata */
        0 10px 0 #181818,
        /* mais fundo */
        0 15px 0 #101010,
        /* ainda mais fundo */
        0 20px 20px rgba(0, 0, 0, 0.5);
    /* sombra suave final */
    transition: transform 0.2s ease;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-right: 5px;
    padding-bottom: 5px
}

.profunda-3 {
    width: 50%;
    height: 80%;
    background-image: url('/Assets/Imagens/Capas/laranja_e_leite_mp3.png');
    border-radius: 12px;
    box-shadow:
        0 5px 0 #202020,
        /* sombra de "espessura" imediata */
        0 10px 0 #181818,
        /* mais fundo */
        0 15px 0 #101010,
        /* ainda mais fundo */
        0 20px 20px rgba(0, 0, 0, 0.5);
    /* sombra suave final */
    transition: transform 0.2s ease;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-right: 5px;
    padding-bottom: 5px
}












.text_element_audio_mp3_file {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 10px;
    width: 50%;
}

.text_element_audio_mp3_file p {
    font-family: 'Times New Roman', Times, serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 30px;
    text-align: justify;
}

.audio_container_button_container {

    position: absolute;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 10%;
    transform: translate(-50%, -50%);
    width: 70%;
    overflow: hidden !important;
    height: 80px;
}

.container_audio_dinamic_view {

    height: 80%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    justify-content: space-around;
}








/* Botão personalizado */
.audio_change_button_element_folder {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    transition: filter 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.audio_change_button_element_folder_shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: hsl(0deg 0% 0% / 0.25);
    will-change: transform;
    transform: translateY(2px);
    transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}

.audio_change_button_element_folder_edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(to left,
            hsl(340deg 100% 16%) 0%,
            hsl(340deg 100% 32%) 8%,
            hsl(340deg 100% 32%) 92%,
            hsl(340deg 100% 16%) 100%);
}

.audio_change_button_element_folder_front {
    display: block;
    position: relative;
    padding: 12px 27px;
    border-radius: 12px;
    font-size: 1.1rem;
    color: white;
    background: hsl(345deg 100% 47%);
    will-change: transform;
    transform: translateY(-4px);
    transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}

.audio_change_button_element_folder_front.index1 {
    background: hsl(202deg 46% 52%);
}

.audio_change_button_element_folder_front.index2 {
    background: hsl(39, 87%, 45%);
}

.audio_change_button_element_folder_front.index3 {
    background: hsl(28, 90%, 45%);
}

.audio_change_button_element_folder_edge.index1 {
    background: linear-gradient(to left,
            hsl(202, 46%, 25%) 0%,
            hsl(202 46% 25%) 8%,
            hsl(202 46% 25%) 92%,
            hsl(202 100% 16%) 100%);
}

.audio_change_button_element_folder_edge.index2 {
    background: linear-gradient(to left,
            hsl(39, 87%, 45%) 0%,
            hsl(39, 85%, 29%) 8%,
            hsl(39, 90%, 30%) 92%,
            hsl(39, 96%, 20%) 100%);
}

.audio_change_button_element_folder_edge.index3 {
    background: linear-gradient(to left,
            hsl(28, 88%, 33%) 0%,
            hsl(28, 89%, 33%) 8%,
            hsl(28, 94%, 32%) 92%,
            hsl(28, 93%, 29%) 100%);
}

@media (min-width: 768px) {
    .audio_change_button_element_folder_front {
        font-size: 1.25rem;
        padding: 12px 42px;
    }
}

.audio_change_button_element_folder:hover {
    filter: brightness(110%);
    -webkit-filter: brightness(110%);
}

.audio_change_button_element_folder:hover .audio_change_button_element_folder_front {
    transform: translateY(-6px);
    transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.audio_change_button_element_folder:active .audio_change_button_element_folder_front {
    transform: translateY(-2px);
    transition: transform 34ms;
}

.audio_change_button_element_folder:hover .audio_change_button_element_folder_shadow {
    transform: translateY(4px);
    transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.audio_change_button_element_folder:active .audio_change_button_element_folder_shadow {
    transform: translateY(1px);
    transition: transform 34ms;
}

.audio_change_button_element_folder:focus:not(:focus-visible) {
    outline: none;
}










.text_element_audio_file {
    font-family: 'Times New Roman', Times, serif;
    color: white;
    font-weight: 300;



    font-size: 25px;
    width: 100%;
    text-align: center;
    line-height: 50px;



}

.content_h1_ {
    top: 15%;
    transform: translate(-50%, -50%);
    left: 50%;
    position: absolute;
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
    justify-content: space-around;
}




@keyframes element_void_bottom {
    0% {
        transform: translateY(10vh);
    }

    100% {
        transform: translateY(0vh);
    }
}





/* CSS */
.__audio_download_button_down {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    transition: filter 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    animation: upButton 1s ease-in-out;
}

@keyframes upButton {
    0% {
        transform: translateY(100px);
    }

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

.__audio_download_button_down-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: hsl(0deg 0% 0% / 0.25);
    will-change: transform;
    transform: translateY(2px);
    transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}

.__audio_download_button_down-edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(to left,
            hsl(0, 0%, 61%) 0%,
            hsl(0, 0%, 87%) 8%,
            hsl(0, 0%, 70%) 92%,
            hsl(0, 0%, 95%) 100%);
}

.__audio_download_button_down-front {
    display: block;
    position: relative;
    padding: 9px 12px;
    border-radius: 12px;
    font-size: 1.1rem;
    color: rgb(0, 0, 0);
    background: hsl(0, 0%, 100%);
    will-change: transform;
    transform: translateY(-4px);
    transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
    background-image: url('/Assets/Imagens/Estrutural/download.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50% auto;
    /* Ícone menor que o 'contain' padrão */
}

@media (min-width: 768px) {
    .__audio_download_button_down-front {
        font-size: 1.25rem;
        padding: 12px 42px;
    }
}

.__audio_download_button_down:hover {
    filter: brightness(110%);
    -webkit-filter: brightness(110%);
}

.__audio_download_button_down:hover .__audio_download_button_down-front {
    transform: translateY(-6px);
    transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.__audio_download_button_down:active .__audio_download_button_down-front {
    transform: translateY(-2px);
    transition: transform 34ms;
}

.__audio_download_button_down:hover .__audio_download_button_down-shadow {
    transform: translateY(4px);
    transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.__audio_download_button_down:active .__audio_download_button_down-shadow {
    transform: translateY(1px);
    transition: transform 34ms;
}

.__audio_download_button_down:focus:not(:focus-visible) {
    outline: none;
}

.arrow-container-sides {
    height: 150px;
    width: 150px;

    display: flex;
    align-items: center;
    justify-content: space-around;
}

.arrow-left-side {
    background-image: url('../Imagens/Estrutural/para a esquerda.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    filter: invert(1) brightness(2);
    height: 50px;
    width: 50px;
    left: 10px;
}

.arrow-right-side {

    background-image: url('../Imagens/Estrutural/next_element_icon.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 50px;
    width: 50px;
 

}



#text_transform_element {
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-align: center;

}


.element_config_overlay_container {

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

}

.element_core_icon_display {

    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.lock_element_fist_container {

    height: 190px;
    width: 140px;
    display: flex;
    align-items: center;
    box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
    justify-content: space-around;
    border-radius: 8px;
    flex-direction: column;
}

.vibration_element_container {

    height: 80%;
    height: 190px;
    width: 140px;
    box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    border-radius: 8px;
}

.lock_icon_config {
    height: 70px;
    width: 70px;
    background-image: url('../Imagens/Estrutural/application-cel.png');

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

}



.vibration_element_icon {
    height: 70px;
    width: 70px;
    background-image: url('../Imagens/Estrutural/vibration.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.switch_cadeado {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.slider_cadeado {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}

.slider_cadeado:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked+.slider_cadeado {
    background-color: #0583F2;
}

input:checked+.slider_cadeado:before {
    transform: translateX(26px);
}


input:checked+.switch_vibration_slide {
    background-color: #0583F2;
}

input:checked+.switch_vibration_slide:before {
    transform: translateX(26px);
}



.switch_vibration {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch_vibration_slide {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}

.switch_vibration_slide:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

@keyframes backtothepath {
    0% {
        transform: translateY(0vh);
    }

    100% {
        transform: translateY(100vh);
    }
}

@keyframes uptothepath {
    0% {
        transform: translateY(100vh);
    }

    100% {
        transform: translateY(0vh);
    }
}


.container_overlay_config_automatic {
    height: 310px;
    width: 350px;
    display: none;
    position: absolute;
    top: 50%;
    border-radius: 8px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.automatic_config {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    background-color: #202020;
    backface-visibility: hidden;
    will-change: transform;
    transform: translateZ(0);
    border-radius: 8px;
    animation: scale_pop_up_automati 0.7s ease-in-out;
}

.content_automatic {
    color: rgb(255, 255, 255);
    text-align: justify;
    padding: 10px 10px 10px 10px;
    line-height: 33px;

    width: 90%;
    font-family: 'Times New Roman', Times, serif;
    font-weight: normal;

}

@keyframes scale_pop_up_automati {
    0% {
        transform: translateY(-100vh);

    }

    100% {
        transform: translateY(0vh);

    }
}

.container_config_button {

    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.active_toggle_lock_automatic {
    border: none;
    margin: 0;
    width: 200px;
    height: 40%;
    color: white;
    border-radius: 4px;
    font-weight: normal;
    font-size: 17px;
    background-color: rgb(255, 70, 70);

}

.disable_toggle_lock_automatic {
    border: none;
    margin: 0;
    width: 200px;
    height: 40%;
    color: white;
    border-radius: 4px;
    font-weight: normal;
    font-size: 17px;
    background-color: rgb(74, 196, 74);
}

.vibration_element {
    display: none;
}



.content_user-text_app {}


/* CSS */
.button-62 {
    background: linear-gradient(to bottom right, #EF4765, #FF9A5A);
    border: 0;
    border-radius: 12px;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 2.5;
    outline: transparent;
    padding: 0 1rem;
    text-align: center;
    text-decoration: none;
    transition: box-shadow .2s ease-in-out;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
}

.button-62:not([disabled]):focus {
    box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(239, 71, 101, 0.5), .125rem .125rem 1rem rgba(255, 154, 90, 0.5);
}

.button-62:not([disabled]):hover {
    box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(239, 71, 101, 0.5), .125rem .125rem 1rem rgba(255, 154, 90, 0.5);
}

.button-63 {
    background: linear-gradient(to bottom right, #ECF230, #FF9A5A);
    border: 0;
    border-radius: 12px;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 2.5;
    outline: transparent;
    padding: 0 1rem;
    text-align: center;
    text-decoration: none;
    transition: box-shadow .2s ease-in-out;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
}

.button-63:not([disabled]):focus {
    box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(239, 71, 101, 0.5), .125rem .125rem 1rem rgba(255, 154, 90, 0.5);
}

.button-63:not([disabled]):hover {
    box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(239, 71, 101, 0.5), .125rem .125rem 1rem rgba(255, 154, 90, 0.5);
}


.content_user-text_app_text {
    padding: 20px;
    line-height: 33px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 17px;
    text-align: justify;
    width: 100%;

}


/* CSS */
.confirm_before_DB {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    transition: filter 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    animation: upButton_DB 1s ease-in-out;
}

@keyframes upButton_DB {
    0% {
        transform: translateY(100px);
    }

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

.confirm_before_DB-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: hsl(0deg 0% 0% / 0.25);
    will-change: transform;
    transform: translateY(2px);
    transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}

.confirm_before_DB-edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
}

.confirm_before_DB-front {
    display: block;
    position: relative;
    padding: 12px 27px;
    border-radius: 12px;
    font-size: 1.1rem;
    color: white;
    will-change: transform;
    transform: translateY(-4px);
    transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}

.confirm_before_DB-edge {
    background: linear-gradient(to left,
            hsl(0, 86%, 56%) 0%,
            hsl(0, 67%, 41%) 8%,
            hsl(0, 67%, 32%) 92%,
            hsl(0, 67%, 32%) 100%);
}

.confirm_before_DB-front {
    background: #F23030;
}



.text-reveal_buy_pix {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    transition: opacity 1s ease-in-out;
    width: 150px;
    height: 60px;
    z-index: 99 !important;

}


@keyframes devaecer_opacity_theme {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.container_text_reveal {
    height: 100%;
    color: white;
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
    width: 100%;
    background-color: #009436;
    border-radius: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

}

@keyframes text_reveal_buy_pix {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

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

.wait_finish_animation {
    position: absolute;
    width: 300px;
    height: 200px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
    pointer-events: none;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: bold;
    color: #ff0000;
    animation: __skip_show_user_text 3s ease-out forwards;
    z-index: 9999999999999999 !important;
}


.animation_text_content {

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

}


.show_slider_index_user_before_go_overlay {

    position: absolute;
    height: 150vh;
    width: 100%;
    left: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.2);
    top: 50%;

    transform: translate(-50%, -50%);
    z-index: 9999 !important;
}

.show_slider_index_user_before_go_overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(10px);
    /* aplica o blur */
    -webkit-backdrop-filter: blur(10px);
    z-index: 0;
    /* fica atrás do popup */

}


.wish_exit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 90vw;
    border-radius: 8px;
    height: 200px;
    position: relative;
}



.light-mode .wish_exit {
    background-color: #ffffff;
}

.dark-mode .wish_exit {
    background-color: #202020;
}


.light-mode .wish_text_out {


    font-family: 'Times New Roman', Times, serif;
    text-align: left;
    line-height: 33px;
    width: 90%;
    padding: 10px;
    user-select: none;

    font-size: 16px;
    color: rgb(0, 0, 0);
}


.dark-mode .wish_text_out {
    font-family: 'Times New Roman', Times, serif;
    text-align: left;
    line-height: 33px;
    width: 90%;
    padding: 10px;
    user-select: none;
    font-size: 16px;
    color: rgb(255, 255, 255);
}

.container_button_go_wish {
    height: 90px;
    width: 100%;
    display: flex;
    align-items: center;

    justify-content: space-around;
}

._exit_button_payment {
    width: 100px;
    height: 50px;
    background-color: red;
    border-radius: 5px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stay_button_payment {
    width: 100px;
    height: 50px;
    background-color: rgb(72, 177, 2);
    border-radius: 5px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container_fist_elements {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}


.container-show-menssage-fullScreen {
    position: absolute;
    width: 100%;
    height: 50vh;
    left: 50%;

    top: 50%;
    display: none;
    transform: translate(-50%, -50%);
    z-index: 9999 !important;
}


.container-book-alert-user-mensagem {
    position: absolute;
    width: 100%;
    height: 50vh;
    left: 50%;
    top: 50%;
    display: none;
    transform: translate(-50%, -50%);
    z-index: 9999 !important;
}


.book-toggle-Fulscren {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.book-toggle-Fulscren p {
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.9);
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    left: 50%;
    color: red;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: animation_text_show_FULLSCREEN 2s ease-in-out;
}


.receive-animation-show-menssage {

    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.receive-animation-show-menssage p {
    position: absolute;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    left: 50%;
    color: red;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: animation_text_show_FULLSCREEN 2s ease-in-out;
}

@keyframes animation_text_show_FULLSCREEN {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%);
    }

    20% {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    60% {
        transform: translate(-50%, -60%);
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -80%);
    }

}



.__show_user_result_feature_carousel-wrapper {
    width: 320px;
    height: 420px;
    perspective: 1400px;
}

.__show_user_result_feature_carousel {
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
    /* ESSENCIAL */

    height: 100%;
}

.__show_user_result_feature_card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #222;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    color: white;
    transform-style: preserve-3d;
    transform: scale(2);
    backface-visibility: hidden;
    transition: transform 0.45s ease, opacity 0.45s ease;
}


.result_show_user {

    width: 100%;
    overflow: hidden !important;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}


.__result_styled_button_show_user {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    outline-offset: 4px;
    transition: filter 250ms;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.__result_styled_button_show_user-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: hsl(0deg 0% 0% / 0.25);
    will-change: transform;
    transform: translateY(2px);
    transition:
        transform 600ms cubic-bezier(.3, .7, .4, 1);
}

.__result_styled_button_show_user-edge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(to left,
            hsl(123, 100%, 19%) 0%,
            hsl(123, 100%, 23%) 8%,
            hsl(125, 99%, 27%) 92%,
            hsl(106, 100%, 17%) 100%);
}

.__result_styled_button_show_user-front {
    display: block;
    position: relative;
    padding: 20px 37px;
    border-radius: 12px;
    font-size: .900rem;
    color: white;
    background: hsl(110, 98%, 32%);
    will-change: transform;
    transform: translateY(-4px);
    transition:
        transform 600ms cubic-bezier(.3, .7, .4, 1);
}

@media (min-width: 768px) {
    .__result_styled_button_show_user-front {
        font-size: 1.25rem;
        padding: 12px 42px;
    }
}

.__result_styled_button_show_user:hover {
    filter: brightness(110%);
    -webkit-filter: brightness(110%);
}

.__result_styled_button_show_user:hover .__result_styled_button_show_user-front {
    transform: translateY(-6px);
    transition:
        transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.__result_styled_button_show_user:active .__result_styled_button_show_user-front {
    transform: translateY(-2px);
    transition: transform 34ms;
}

.__result_styled_button_show_user:hover .__result_styled_button_show_user-shadow {
    transform: translateY(4px);
    transition:
        transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}

.__result_styled_button_show_user:active .__result_styled_button_show_user-shadow {
    transform: translateY(1px);
    transition: transform 34ms;
}

.__result_styled_button_show_user:focus:not(:focus-visible) {
    outline: none;
}


/* From Uiverse.io by RaspberryBee */
/* The switch - the box around the slider */
.__result_show_user_toggle_switch {
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 3.5em;
    height: 2em;
}

/* Hide default HTML checkbox */
.__result_show_user_toggle_switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.__result_show_user_toggle_slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(182, 182, 182);
    transition: .4s;
    border-radius: 10px;
}

.__result_show_user_toggle_slider:before {
    position: absolute;
    content: "";
    height: 1.4em;
    width: 1.4em;
    border-radius: 8px;
    left: 0.3em;
    bottom: 0.3em;
    transform: rotate(270deg);
    background-color: rgb(255, 255, 255);
    transition: .4s;
}

.__result_show_user_toggle_switch input:checked+.__result_show_user_toggle_slider {
    background-color: #21cc4c;
}

.__result_show_user_toggle_switch input:focus+.__result_show_user_toggle_slider {
    box-shadow: 0 0 1px #2196F3;
}

.__result_show_user_toggle_switch input:checked+.__result_show_user_toggle_slider:before {
    transform: translateX(1.5em);
}


.co_center_h1_result {

    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}


.des_text_font {
    font-family: 'Times New Roman', Times, serif;
    text-align: justify;
    font-size: 14px;
}


.result_text_show_user {
    font-size: 24px;
    font-family: 'Times New Roman', Times, serif;
    text-align: center;

}

.Sete_go_up {
    background-image: url('../Imagens/Estrutural/down-arrow.png');
    background-position: center center;
    background-repeat: no-repeat;
    transform: rotate(-180deg);
    height: 70px;
    width: 70px;
    filter: invert(1);
    background-size: contain;

}


.iframe_container_oneDrive_overlay{
    z-index: 99999;
    position: absolute;
    inset: 0;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.08);
    justify-content: center;
}

.one_drive_iframe{
    border: 2px solid red;
    width: 100%;
    height: 500px;
}