* {

    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent !important;

}


button {
    user-select: none
}


@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&display=swap');

html {
    overflow-x: hidden !important;
    overscroll-behavior: none;
    scrollbar-color: rgb(255, 187, 0) rgb(255, 187, 0);
}



#Indicador_navegacao {

    font-size: 16px;
    border: none;
    cursor: pointer;
    background-color: #20202000;
    color: white;
    transition: background 0.3s ease;
}

#Indicador_navegacao.ativo {
    background-color: #10f736;
}



.Calamaris {
    font-family: "Grey Qo", cursive;
    color: white !important;
    font-size: 3.5rem !important;
    text-align: center;
    font-weight: normal;
    font-style: 500;
}





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


.buttons {
    margin-top: 20px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 10px;
    flex-wrap: wrap
}

.buttons button {
    background-color: transparent;
    border: 1px solid currentColor;
    padding: 5px 10px;
    cursor: pointer;

}


.button-1 {
    width: 150px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.page-counter {

    position: relative;
    text-align: center;
    font-family: 'Times New Roman', Times, serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: normal;
    font-variation-settings: "wdth" 100;
    will-change: transform;
}



.cap_element_text {

    width: 100px;
    position: absolute;
    right: 10px;
    top: 10px;
}

#content-page-counter {
    position: relative;
    font-size: 20px;
    font-style: normal;
    z-index: 999 !important;

}


@keyframes fall_nose_first {
    0% {
        transform: translateY(-50px) rotate(25deg);
        /* direita primeiro */
        opacity: 0;
    }

    30% {
        transform: translateY(-50px) rotate(25deg);
        opacity: 1;
    }

    60% {
        transform: translateY(0px) rotate(-10deg);
        /* traseira vindo junto */
    }

    80% {
        transform: translateY(5px) rotate(5deg);
        /* pequeno "quique" */
    }

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





@keyframes log_up {
    0% {
        transform: translateY(-100%);
    }

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

.container_progress_bar_element {
    width: 100%;
    height: 100%;
    overflow: hidden;

    background-color: #505050;
    position: static;

}


.light-mode .container_progress_bar_element {
    background-color: #dddddd;
}

.light-mode .container_element_pai {
    background-color: #dddddd;
}

.container_progress_bar_element_read_mode {
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 999;
    display: none;
    background-color: #505050 !important;
    position: relative;
}

.element_container_progress_essential {
    width: 100%;
    height: 3px !important;
    overflow: hidden;
    z-index: 999;
    background-color: #505050 !important;
    position: absolute;
    top: 0;
}


.element_container_progress_essential.hidden {
    visibility: hidden;
}

.element_container_progress_essential.visible {
    visibility: visible;
}

.element_container_progress_essential.display {
    display: flex;
}

.element_container_progress_essential.none {
    display: none;
}

.container_element_pai {
    width: 100%;
    height: 4px;
    background: #505050;
    overflow: hidden;

    position: relative;

}

.container_element_pai_read_mode {
    width: 100%;
    height: 2px;
    background: #505050;
    overflow: hidden;
    z-index: 999;
    position: static;
    display: none;
}

.progress-bar {
    width: 100%;
    background-color: #e0e0e0;
    overflow: hidden;
    position: relative;
    transition: background-color .5s;
    height: 2px;
    border-radius: 10px;

}

.progress-bar-inner {
    position: relative;
    height: 100%;
    width: 0;
    background-color: #e321a9;
    transition: width 0.7s;

    overflow: hidden;
    /* Adicionado */
}


.using-iphone-tool {
    height: 250px;
    width: 100%;
    border-radius: 8px;
    background-image: url('../Imagens/Capas/iphone-man-tool.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

}

.highlight-blue {
    color: blue;
    font-weight: bold;
    /* se quiser dar ênfase */
}


.iphone-capa {
    background-image: url('../Imagens/Capas/using-iphone.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}


.progress-bar-track {
    position: relative;
    z-index: 99;
    width: 100%;
    background-color: #e0e0e0;
    border-radius: 5px;
    overflow: hidden !important;
    margin-top: 0px;
    height: 10px;
    transition: background-color .5s;

}

.progress-bar-inner-track {
    height: 100%;
    width: 0;
    background-color: #ff008c;
    transition: width .5s, background-color .5s;

}


.progress_bar_controler {
    position: relative;
    z-index: 9999 !important;
    width: 100%;
    height: 3px;
    opacity: 1;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    overflow: hidden;

}

.progress_bar_fill {
    position: absolute;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ff3300, #f00707);
    border-radius: 3px;
    transition: width 0.4s ease;
}


.color-controls {
    width: 100%;
    position: relative;
    align-items: center;
    justify-content: center;
    height: 100%;
    display: flex;
    overflow: hidden !important;

}

.color-controls.display {
    display: none;
}


.color-controls>button {
    transform: translateZ(-300px);
}


.align-itens-element-essentials-3 {
    width: 95%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}


.next-and-prev-container {

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

    position: relative;
}


.container_overflow_button {
    width: 100%;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    height: 100%;
    will-change: transform;


}



@keyframes low_elo {
    0% {
        transform: translateY(0);

    }

    100% {
        transform: translateY(-100px);

    }
}

.controls-container-font-father {

    width: 75%;

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

.light-mode .page {

    background-color: #ffffff;
}


.dark-mode .page {
    background-color: #000000;
}


.dark-mode .chapter-link {
    color: #D9A273;
}


.dark-mode .buttons button {
    border-color: #fff;
    color: #fff
}


.light-mode .progress-bar {
    background-color: #a0a0a0;
}

.dark-mode .progress-bar {
    background-color: #505050
}


.light-mode .next-and-prev-container button {
    background-color: transparent;
    box-sizing: border-box;
    color: #000000;
    cursor: pointer;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    max-width: none;
    width: 135px;
    font-weight: normal;
    outline: none;
    overflow: hidden !important;
    border: none;
    position: relative;
    text-align: center;
    text-transform: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    /* Remove o efeito azul */
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    /* Remove o efeito azul */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}






.inicio-buttons-custom {
    height: 59px;
    width: 65px;
    background-color: #FFFFFF;
    border: 1px solid rgb(209, 213, 219);
    border-radius: .5rem;
    box-sizing: border-box;
    color: #111827;
    font-family: "Inter var", ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: .875rem;
    font-weight: 600;
    padding: .75rem 1rem;
    text-align: center;
    text-decoration: none #D1D5DB solid;
    text-decoration-thickness: auto;
    /* box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); */
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.setMode_color.active {
    min-height: 0;
    min-width: 0;
    height: 40px;
    width: 40px;
}

.setMode_color {
    background-color: transparent;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    width: none;
    min-height: 40px;
    min-width: 40px;
    font-weight: bold;
    outline: none;
    overflow: hidden !important;
    border: none;
    position: relative;
    text-align: center;
    text-transform: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    transform: scale(0.95);
    /* Remove o efeito azul */
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    /* Remove o efeito azul */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}



.dark-mode .next-and-prev-container button {
    background-color: transparent;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    max-width: none;
    width: 135px;
    font-weight: normal;
    outline: none;
    overflow: hidden !important;
    border: none;
    position: relative;
    text-align: center;
    text-transform: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    /* Remove o efeito azul */
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    /* Remove o efeito azul */
    display: flex;
    flex-direction: row;
    /* <- MUDA PARA ROW */
    align-items: center;
    justify-content: space-around;

    padding-block: 0 !important;
    margin: 0 !important;
    padding-inline: 0 !important;

}

/* Fundo do modal */
.modal {
    display: none;
    z-index: 9999 !important;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Caixa do modal */
.modal-content {
    background: #f8f9fa;
    border-radius: 14px;
    padding: 24px;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    animation: fadeIn 0.3s ease-in-out;
}

.fade-out {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Texto */
.gray-matter {
    margin-bottom: 20px;
    font-size: 16px;
    color: #333;
    font-weight: 500;
    line-height: 1.5;
}

/* Container de botões */
.left_off_div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

/* Botões */
.modal button {
    flex: 1;
    padding: 12px;
    font-size: 15px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    outline: none;
}

/* Botão primário */
.modal button:first-child {
    background-color: #4CAF50;
    color: white;
}

.modal button:first-child:hover {
    background-color: #388E3C;
}

/* Botão secundário */
.modal button:last-child {
    background-color: #e0e0e0;
    color: #333;
}

.modal button:last-child:hover {
    background-color: #bdbdbd;
}

/* Botão de fechar */
.close {
    font-size: 20px;
    color: #888;
    position: absolute;
    top: 12px;
    right: 14px;
    cursor: pointer;
    transition: color 0.2s;
}

.close:hover {
    color: #444;
}

/* Animação mais complexa e bonita */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
        filter: blur(4px);
    }

    50% {
        opacity: 0.5;
        transform: translateY(5px) scale(1.02);
        filter: blur(2px);
    }

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




.light-mode .__colors_note-saved-note .paragraph_Style {
    font-size: 0.887rem;
    color: rgb(255, 255, 255);
    line-height: 33px;
    font-style: normal;
    text-align: justify;
    text-align-last: left;
    /* Alinha a última linha à esquerda */
    word-spacing: 1px;
    font-family: "Noto Serif", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.356);
    filter: contrast(1.2);
    padding-bottom: 15px;
    transition: font-size 1s ease;
    font-style: normal;
}


.light-mode .paragraph_Style {
    font-size: 1.017rem;
    color: rgb(0, 0, 0);
    line-height: 33px;
    font-style: normal;
    text-align: justify;
    text-align-last: left;
    /* Alinha a última linha à esquerda */
    word-spacing: 1px;
    font-family: "Noto Serif", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.356);
    filter: contrast(1.2);
    padding-bottom: 15px;
    transition: font-size 1s ease;
    font-style: normal;
}

.dark-mode .paragraph_Style {

    font-family: "Noto Serif", serif;
    font-optical-sizing: auto;
    line-height: 33px;
    font-style: normal;
    text-align: justify;
    text-align-last: left;
    /* Alinha a última linha à esquerda */
    word-spacing: 1px;
    font-optical-sizing: auto;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.829);
    filter: contrast(1.2);
    color: white;
    transition: font-size 1s ease;
    font-style: normal;
}

.custom-mode-palete-3 .paragraph_Style {

    font-family: "Noto Serif", serif;
    font-optical-sizing: auto;
    font-size: 0.887rem;
    line-height: 33px;
    font-style: normal;
    text-align: justify;
    text-align-last: left;
    /* Alinha a última linha à esquerda */
    word-spacing: 1px;
    font-optical-sizing: auto;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.829);
    filter: contrast(1.2);
    color: white;

    font-style: normal;
}





.paragraph_Style_presente {
    width: auto;
    height: auto;
    overflow-y: scroll !important;
    color: black !important;
    line-height: 33px;
    font-style: normal;
    text-align: justify;
    text-align-last: left;
    /* Alinha a última linha à esquerda */
    word-spacing: 1px;
    font-family: 'Times New Roman', Times, serif, serif !important;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
}

.dark-mode .paragraph_Style_presente {
    color: black !important;
    line-height: 33px;
    font-style: normal;
    text-align: justify;
    text-align-last: left;
    /* Alinha a última linha à esquerda */
    word-spacing: 1px;
    font-family: 'Times New Roman', Times, serif, serif !important;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
}

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

    50% {
        transform: scale(0.5);
    }

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


.buttons-Customize-Container.exit-animation {
    transition: height 1s ease-in-out, opacity 0.6s ease-in-out, transform 1s ease-in-out, background-image;

}

.buttons-Customize-Container.xa {
    animation: perdao 1s ease-in-out;
    transition: height 1s ease-in-out, opacity 0.6s ease-in-out, transform 1s ease-in-out, background-image;
}


.hidden_elements-controls-container-essencias {
    transform: translateZ(-200px) scale(0.8);
    opacity: 0;
    pointer-events: none;
}


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

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

.buttons-Customize-Container {
    position: absolute;
    bottom: 0;
    display: flex;
    visibility: hidden;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 100%;
    will-change: transform, clip-path;
    height: 72vh;
}


.desinstegrate_container {
    position: absolute;
    bottom: 0;
    display: flex;
    visibility: visible;
    flex-direction: column;
    background-color: transparent !important;
    pointer-events: none;
    align-items: center;
    width: 100%;

    max-width: 100%;
    will-change: transform;
    height: 72vh;
}





.container_controls {
    position: absolute;
    z-index: 999 !important;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ff0000;
}

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

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


.const_test {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    width: 100%;
}



.elements-controls-container-essencial {
    gap: 10px;
    max-width: 100%;
    visibility: hidden;
    height: 100%;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    align-items: center;
    justify-content: space-around;
    will-change: transform opacity;


}


@keyframes popup_enter {}



@keyframes scale_transform_animate {
    0% {
        opacity: 0;
        transform: perspective(800px) translateY(80px) scale(0.8) rotateX(15deg);
        filter: blur(8px);
    }

    40% {
        opacity: 1;
        transform: perspective(800px) translateY(-20px) scale(1.05) rotateX(-5deg);
        filter: blur(2px);
    }

    70% {
        transform: perspective(800px) translateY(10px) scale(0.97) rotateX(3deg);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: perspective(800px) translateY(0) scale(1) rotateX(0);
        filter: blur(0);
    }
}


@keyframes scale_transform_animateY {
    0% {

        transform: translateY(0vh);

    }

    100% {

        transform: translateY(100vh);

    }
}





.elements-controls-container-essencial.state {
    animation: scale_transform_animateY 1s ease-in-out;

}

.elements-controls-container-essencial-2 {
    gap: 10px;
    max-width: 100%;
    padding: 5px;
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.elements-controls-container-essencial-3 {


    gap: 10px;
    max-width: 100%;
    padding: 5px;
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}


.elements-controls-container-essencial-4 {

    gap: 10px;
    max-width: 100%;
    padding: 5px;
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: center;

    justify-content: space-around;
}





.light-mode .buttons-Customize-Container {


    display: flex;
    flex-direction: column;
    background-color: #ffffff !important;
    align-items: center;
    width: 100%;
    max-width: 100%;


}



.animation_simple_for_icon_theme {
    animation: simples 0.5s ease-in-out;
}

@keyframes simples {
    0% {
        transform: scale(1.5);
    }

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


@keyframes simple {
    0% {
        transform: scale(1.5);
    }


    100% {
        transform: scale(0.9);
    }

}


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

    25% {
        transform: scale(1.1, 0.9);
    }

    50% {
        transform: scale(0.9, 1.13);
    }

    75% {
        transform: scale(1.05, 0.95);
    }

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


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

    20% {
        transform: scale(1.2, 0.8);
    }

    40% {
        transform: scale(0.8, 1.2);
    }

    60% {
        transform: scale(1.1, 0.9);
    }

    80% {
        transform: scale(0.95, 1.05);
    }

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

.squish {
    animation: squishEffect 0.5s ease-out;
}

.jelly {
    animation: squishEffect 0.5s ease-out;
}



@media only screen and (min-width: 1024px) {
    .book {
        display: none !important;
    }

    .page {
        display: none !important;
    }

    .buttons-Customize-Container {
        display: none !important;
    }
}



.for-pc {
    z-index: 2 !important;
    position: absolute !important;
    background-color: white;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    height: 100vh !important;
    min-height: 100vh !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

/* Especificidades para determinadas resoluções */

/* Para max-width: 414px e max-height: 896px */
@media (max-width: 414px) and (max-height: 896px) {
    /* .buttons-Customize-Container {
        height: 50% !important;
      
    } */

    .for-pc {
        display: none !important;
    }
}

/* Combinando queries similares */
@media (max-width: 430px) and (max-height: 932px) {
    /* .buttons-Customize-Container {
        height: 40% !important;
        
    } */

    .for-pc {
        display: none !important;
    }
}

/* Específico para width e height exatos */
@media (width: 430px) and (height: 873px) {
    /* .buttons-Customize-Container {
        height: 35% !important;
       
    } */

    .for-pc {
        display: none !important;
    }
}



.Voltar-Para-O-Inicio {
    width: 100%;

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





.shimmer {
    position: relative;
    overflow: hidden;
}

.shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0) 100%);
    animation: shimmer 2s infinite;
}

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

    100% {
        transform: translateX(100%);
    }
}

.blue::after,
.purple::after,
.white::after,
.orange::after,
.green::after,
.pink::after {
    content: '';
    position: absolute;
    overflow: hidden !important;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 100%);
    animation: shimmer 2s infinite;
}



/* Mantenha suas classes de cor originais */
.white {
    background: linear-gradient(to right, #400101, #D9896C);
}


.orange {
    background: linear-gradient(to right, #898C30, #D9D5A0);
}

.purple {
    background: linear-gradient(to right, #BF846F, #D9A384);
}

.green {
    background: linear-gradient(to right, #8C7503, #BF9169);
}

.red {
    background: linear-gradient(to right, #F2A594, #F29849);
}

.pink {
    background: linear-gradient(to right, #F2A341, #D97C2B);
}

.silver {
    background: linear-gradient(to right, #F2F2F0, #F27B13);
}

.teal {
    background: linear-gradient(to right, #FF1493, #FFA500);
}

.amber {
    background: linear-gradient(to right, #3f3870, #8f1fff);
}

.Bluish {
    background: linear-gradient(to right, #F2DCC9, #F2C8A2);
}

.beige {
    background: linear-gradient(to right, #F2A172, #A66253);
}

/* Mantenha suas classes de cor originais
.custom-mode-palete-3 .white {
    background: linear-gradient(to right, #012611, #401E01);
}

.custom-mode-palete-3 .orange {
    background: linear-gradient(to right, #A6896F, #260101);
}

.custom-mode-palete-3 .purple {
    background: linear-gradient(to right, #ff0000, #ff4500);
}

.custom-mode-palete-3 .green {
    background: linear-gradient(to right, #012611, #012611);
} */

.custom-mode-palete-3 .pink {
    background: linear-gradient(to right, #ffffff, #260101, );
}








@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

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

.introjs-tooltiptext {
    padding: 10px !important;
}

.dark-mode .introjs-tooltiptext {
    color: black;
    line-height: 30px;
    text-align: justify;
    color: black;
}

.dark-mode .introjs-tooltip-title {
    color: black !important;
    text-align: center;
    width: 100%;
    /* border: 1px solid red; */
    color: black !important;
    text-align: center;
}


.introjs-skipbutton {
    position: absolute;
    right: 0;
    top: 0;
}

.reading {
    color: rgb(255, 255, 255) !important;
    transition: background-color 1s ease-in-out, transform 1s ease-in-out !important;
    transform: scale(1.1);
}

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    border: 1px solid black;
    z-index: 1000;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.hidden {
    display: none !important;
}

.hidden_tabs {
    width: 0;
    opacity: 0;
    pointer-events: none;
    transition: all 1s ease;
}

.container_envolve_progress_bar_unique {
    position: absolute;
    left: 50%;
    top: 50%;
    display: none;
    transform: translate(-50%, -50%);
    width: 75%;
    height: 50px;
    /* background-color: rgba(0, 0, 0, 0.1); */
}


.light-mode #__read_mode_particle_target {
    background-color: #ebebeb;
}



.unique-progress-bar-container {
    width: 100%;
    height: 100%;
    display: block;
    animation: levant_animation 1s ease-in-out;
}



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

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

.dark-mode .unique-progress-bar-container {
    background-color: #3b3b3b;

}



#unique-progress-bar {
    position: relative;
    height: 100%;
    background-color: red;
}

#unique-progress-bar-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgb(255, 0, 0);
    /* Ou qualquer cor que contraste bem com a barra de progresso */
    font-size: 14px;
    /* Ajuste conforme necessário */
    pointer-events: none;
    /* Para garantir que o texto não interfira no arrasto */
}



/* #customReadAloudBtn {

    background-size: contain;
    width: 27px !important;
} */

.img-capa {
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('/Assets/Imagens/Capas/so.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
   
    width: 100%;
    height: 100%;
}


.__img_al_container {
    position: absolute;
    width: 100%;
    inset: 0;
    background-image: linear-gradient(rgba(0, 0, 0, 0.400), rgba(0, 0, 0, 0.3)), url(/Assets/Imagens/Capas/so.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 118% 90%;
    height: 100%;
}





.h2-Tratamentos-Naturais_natu {
    overflow: hidden !important;
    pointer-events: none;
    left: 50%;
    width: 100%;
    top: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Grey Qo", cursive;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    font-size: 4rem !important;
    font-weight: 400;
    /* Definindo uma cor azul com 50% de opacidade */
    color: white;
    font-size: 3rem;
    text-align: center;
    font-weight: normal;
    font-style: normal;

    user-select: none;

}










.tour-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    height: 200px;
    width: 250px;
    transform: translate(-50%, -50%);
    padding: 20px 30px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: none;
    text-align: center;
    font-family: 'Arial', sans-serif;
}



.tour-popup p {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
    margin-bottom: 20px;
}


.tour-popup button {
    margin-top: 10px;
}




.h1-Tablet-Mode {

    font-family: 'Times New Roman', Times, serif;
    font-size: 3rem;
    font-weight: 300;
    color: black;
    text-align: center;
}




/* Inicialmente, esconda ambos os controles */
.font-size-label,
.font-size-range {
    display: none;
}




.resulpage-1 {

    background-image: url('https://voltowebcompany.com/wp-content/uploads/2025/03/5f327bb285e89849c492111a8303ce5a.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.resulpage-2 {

    background-image: url('https://voltowebcompany.com/wp-content/uploads/2025/03/36b244fdc9d4c51046bc5a797c150515.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}



.resulpage-3 {

    background-image: url('https://voltowebcompany.com/wp-content/uploads/2025/03/2b5080023ca9736d2d0f4c8067555e33.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
}


.style-for-amostra {
    font-family: "Playfair Display", serif;
    font-size: 25px;
    font-weight: normal;
    font-style: italic;
}





#page1 {
    overflow-y: hidden !important;
    overflow-x: hidden !important;
}

.page .img-capa {
    overflow-y: hidden !important;
    overflow-x: hidden !important;
}






canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Para permitir interações com a página */

    z-index: 10;
    /* Coloca o canvas acima do conteúdo */
}


canvas#sparkleCanvasSide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

canvas#balloonCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}


canvas#confettiCanvasSide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

}



.popup {
    display: none;
    position: absolute;
    width: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.popup span {
    display: block;
    text-align: justify;
    line-height: 35px;
    margin-bottom: 15px;
    font-family: "Grey Qo", cursive;
    font-size: 30px;
}

.popup button {
    padding: 5px 10px;
    background-color: #5a17f7;
    color: #fff;
    border: none;
    cursor: pointer;
}

.popup button:hover {
    background-color: #0056b3;
}

.label-for-check {
    width: 100%;
    display: flex;
    justify-content: space-around;
}



.close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    background-color: #f00;
    color: #fff;
    border: none;
    font-size: 24px;
    cursor: pointer;
}

.close-btn:hover {
    background-color: #c00;
}

.dark-mode .unhas_crono_close_popup {
    color: red !important;
}

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

.loading {
    position: relative;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border: 5px solid rgba(0, 0, 0, 0.2);
    border-top: 5px solid #000;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    transform: translate(-50%, -50%);
}



.volto-container {

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


.dark-mode #loading-screen {
    background-color: #000;
    /* Cor de fundo para o modo escuro */
}



.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #333;
}







.cadeado_pop_up {
    background-image: url('../Imagens/Estrutural/aberto.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: 20px;
    height: 20px;
    display: inline-block;
    /* Alinha a imagem na mesma linha do texto */
    vertical-align: middle;
    /* Alinha verticalmente com o texto */
}



/* Estilos para a tela de loading */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999;
    opacity: 1;
    visibility: visible;

    /* animation: hideScreen 0.1s ease .1s forwards; */
    /* Ocultar após 10 segundos */
}

.volto-logo-loading {
    height: 105px;

    width: 105px;
    background-image: url("../Imagens/Estrutural/sub/b.png");
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Estilos para a barra de progresso */
.volto-bars {
    width: 80%;
    height: 8px;
    /* Aumentei um pouco a altura */
    background-color: #e0e0e0;
    /* Cinza claro para contraste */
    border-radius: 15px;
    /* Cantos mais arredondados */
    overflow: hidden;
    margin-top: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Sombra para profundidade */
}

.progress-bar-volto {
    width: 0;
    height: 100%;
    background: radial-gradient(#F22F1D, #F26716);
    border: 1px solid white;
    border-radius: 15px;
    /* Mantém os cantos arredondados */
    transition: width 0.4s ease;
    /* Animação de preenchimento */
}



/* Animação para encher a barra de progresso */
@keyframes fillProgressBar {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

/* Animação para ocultar a tela de loading instantaneamente */
@keyframes hideScreen {
    0% {
        opacity: 1;
        visibility: visible;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* Ocultar o conteúdo do app inicialmente */
.app-content {
    opacity: 0;
    animation: showContent 1s ease 1s forwards;
    /* Exibir conteúdo após 10 segundos */
}

/* Animação para exibir o conteúdo do app instantaneamente */
@keyframes showContent {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}




.page-content_user {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
}


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

}

.electricity_container {
    width: 90%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

}

.post-1,
.post-2 {
    background-image: url('../Imagens/Estrutural/lampada-eletrica-unscreen.gif');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 30%;

    height: 100%;
}

.electricity-svg {
    position: absolute;
    pointer-events: none !important;
    height: 100px;
    z-index: 1;
}

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

#intensityRange {
    width: 200px;
}

.toggle-switch {
    width: 60px;
    height: 30px;
    margin: 5px 0;
    border-radius: 15px;
    background-color: #ccc;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
}

.toggle-switch .switch-handle {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: white;
    top: 2px;
    left: 2px;
    transition: left 0.3s;
}

.toggle-switch.active {
    background-color: #4CAF50;
}

.toggle-switch.active .switch-handle {
    left: 32px;
}


.Container-switch-height {

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

.toggle-container {

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

.toggle-container-mode {

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

.Container_toggle_switch_color {

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

.Container_toggle_switch_size_fonts {

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

.buttons-container {

    width: 100%;
    display: flex;
    justify-content: space-around;

}

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

    100% {
        opacity: 1;
    }
}

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

.switch input {
    display: none;
}

.toggle-container {
    display: flex;
    gap: 10px;
}



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

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



input:checked+.slider {
    background-color: #2196F3;
}

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

.close-btn_gift {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ff5c5c;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
    font-size: 16px;
    z-index: 9999 !important;
}


.folha-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 100%;
    height: 100%;
    perspective: 800px;
}


/* Estilizando o toggle */
.toggle-switch_color {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.toggle-switch_color input {
    opacity: 0;
    width: 0;
    height: 0;
}

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

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

input:checked+.slider_color {
    background-color: #2196F3;
}

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









/* Estilizando o toggle */
.toggle-switch_fonts {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.toggle-switch_fonts input {
    opacity: 0;
    width: 0;
    height: 0;
}

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

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

input:checked+.slider_fonts {
    background-color: #2196F3;
}

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

.page-content-for-explication {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
}

.book-mark-ideias {
    height: 30%;
    width: 100%;

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

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

.page-content-deslize {

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


.light-mode .content-desile {

    height: 50%;
    width: 100%;
    background-image: url("../Imagens/Estrutural/deslize-unscreen.gif");
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;

}


.dark-mode .content-desile {
    height: 50%;
    width: 100%;
    background-image: url("../Imagens/Estrutural/deslize-unscreen.gif");
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    filter: brightness(0) invert(1);
}

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

}

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

.one-to-one_mesagem {
    width: auto;
    height: auto;
    padding: 10px;
}

.container_album {
    width: 100%;
    height: 100%;
    display: block;

}


.go_ir_down {
    width: 100%;
    height: max-content;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Resgatar_down {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Centraliza o texto */
    background: linear-gradient(45deg, #00ccff, #00aaff);
    /* Gradiente para criar um efeito mais moderno */
    color: white;
    font-family: 'Arial', sans-serif;
    /* Fonte mais limpa e moderna */
    border: none;
    width: 180px;
    /* Aumenta o tamanho para melhorar a usabilidade */
    font-size: 18px;
    /* Fonte um pouco maior */
    font-weight: bold;
    /* Negrito para destacar mais o texto */
    height: 70px;
    border-radius: 30px;
    /* Bordas bem arredondadas para um toque moderno */
    text-align: center;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    /* Sombra para dar um efeito de "elevação" */
    transition: background 0.3s ease, transform 0.2s ease;
    /* Transições suaves ao interagir */
    cursor: pointer;
    /* Cursor de mão para indicar que é clicável */
}

.Resgatar_down:hover {
    background: linear-gradient(45deg, #00aaff, #0088cc);
    /* Cor levemente mais escura no hover */
    transform: scale(1.05);
    /* Pequeno aumento ao passar o mouse */
}

.Resgatar_down:active {
    transform: scale(0.98);
    /* Reduz o tamanho levemente ao ser clicado */
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
    /* Sombra menos pronunciada ao clicar */
}


.dark-mode .for-pc {
    position: absolute !important;
    background-color: rgb(0, 0, 0);
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    height: 100vh !important;
    min-height: 100vh !important;
    display: flex;
    z-index: 2;
    align-items: center;
    justify-content: space-around;

}

.for-pc_h1 {
    text-align: center;
}

.dark-mode .for-pc_h1 {
    text-align: center;
    color: white;

}

.pop-up_wrapper {
    z-index: 9999 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.pop-up_warning {
    padding: 20px;
    background-color: #fefefe;
    color: #333;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    z-index: 1000;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90%;
    width: 400px;
    text-align: center;
    font-family: 'Helvetica Neue', sans-serif;
    line-height: 1.5;
    opacity: 0;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.pop-up_disbled_container_progress {
    z-index: 9999 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.15);
    width: 100%;
    height: 100%;
}

.disable_progress_bar_pop_up {
    padding: 20px;
    background-color: rgb(255, 255, 255);
    box-shadow: 1px 1px 1px 1px #F25F29;
    color: #ffffff;
    background-image: url('./arquitetura-2.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 12px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    max-width: 90%;
    width: 400px;
    text-align: center;
    font-family: 'Helvetica Neue', sans-serif;
    line-height: 1.5;
    opacity: 0;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    height: 400px;

}


.pop-up_warning.animate {
    animation: jelly 0.6s ease;
    opacity: 1;
    visibility: visible;

}

.disable_progress_bar_pop_up.animate {
    animation: jelly 0.6s ease;
    opacity: 1;
    visibility: visible;

}




.pop-up_warning div {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #333;
    /* Cor contrastante, mas elegante */
    color: white;
    border-radius: 8px;
    /* Bordas arredondadas no botão */
    border: none;
    cursor: pointer;
    font-size: 14px;
    /* Tamanho da fonte reduzido para um visual minimalista */
    transition: background-color 0.3s ease;
    /* Efeito suave de transição */
}

.pop-up_warning div:hover {
    background-color: #555;
    /* Efeito hover discreto */
}









.dark-mode .warning-cadeado {
    color: rgb(0, 0, 0) !important;
}



.dark-mode .Deseja {
    color: black !important;
}








/* Estilos para a div "maximization" */
.maximization {
    width: 150px;
    height: 50px;
    background-color: #3498db;
    color: white;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 16px;
    margin: 50px;
}

/* Estilos gerais do pop-up */
.popup_maximization {
    display: none;
    /* Oculto por padrão */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Fundo semi-transparente */
    z-index: 1000;
}

/* Estilos do conteúdo do pop-up */
.popup-content_maximization {
    position: relative;
    background-color: white;
    width: 100%;
    height: 97%;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    transform: scale(0);
    /* Inicialmente reduzido para 0 */
    animation: popupAnimation_maximization 0.6s forwards ease-out;
    /* Animação suave */
}

/* Estilos do botão de fechar */
.close_maximization {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
}



.form-maximization {
    height: 100%;
    width: 100%;
}



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

.logo-volto_web_company {
    background-image: url('../Imagens/Estrutural/b.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 90px;
    height: 100px;
}

.filho_volto_container {
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
}

.page-content-maximization {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-content-table {
    color: black !important;
}



.popup_for_person {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;

    transform: scale(0.7);
    /* Começa menor */
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0.4s ease-in-out;
}

.popup_for_person.show {
    opacity: 1;
    display: flex;
    transform: scale(1);
    /* Expande suavemente */
}

.popup-content_for_person {
    background: #ffffff;
    padding: 25px;
    border-radius: 12px;
    /* Cantos mais arredondados */
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    /* Sombra mais suave e moderna */
    width: 90%;
    max-width: 400px;
    height: 300px;
    max-height: 300px;
    /* Limita a largura */
    animation: popup-bounce 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    top: -15%;
    /* Efeito extra */
}

.content-element-change-animation {

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


.element_content_animation {

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


.button_for_person {
    padding: 10px 20px;
    border: none;
    width: 100%;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

#popup-confirm-for-person {
    background: #4CAF50;
    color: white;
}

#popup-confirm-for-person:hover {

    transform: scale(1.05);
}

#popup-cancel-for-person {
    background: #f44336;
    color: white;
}

#popup-cancel-for-person:hover {

    transform: scale(1.05);
}

#popup-message-for-person {
    line-height: 28px;


    width: 100%;
    font-family: 'Times New Roman', Times, serif;
    font-size: 15px;
    text-align: justify;
    color: black !important;
}


.qr-code {
    background-image: url('https://img-hospedagem.unhasfortes.online/wp-content/uploads/2024/12/jogar-site.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 50%;
    width: 400px;
}

.scanner {
    text-align: center;
}

.hidden_page {
    visibility: hidden;
    will-change: transform, opacity;
}


.page-content-latest {

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


.collum-extra {

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



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

.icon_societ {
    width: 42px;
    height: 42px;
}




.samsung_and_MiBrowser {
    display: none;
    z-index: 1000;
    background-color: white;
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

.content-Internert {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    box-sizing: border-box;
    background-color: white;
    border-radius: 15px;
    z-index: 1;
    height: 600px;
    width: 100%;
}

.samsung_internet-p {
    width: 90% !important;
    color: white !important;
    font-size: 16px;
    padding: 20px;
    font-family: 'Times New Roman', Times, serif;
    text-align: justify;
    line-height: 33px;
    background-color: rgba(0, 0, 0, 0.6);
    box-shadow: 1px 1px 1px 1px #007BFF;
    border-radius: 4px;
}

.icon-for-samsung-browser {
    width: 100%;
    height: 15%;
    display: flex;
    flex-direction: row-reverse;
}

.icon-chrome {
    width: 50%;
    height: 100%;
}



/* Fundo do pop-up */
.__samsung-overlay {
    position: fixed;
    top: 0;
    z-index: 100;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s;
}

/* Caixa do pop-up */
.__samsung-popup {
    background: white;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    border-radius: 10px;
    width: 400px;
    height: 250px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transform: scale(0.8);
    transition: transform 0.3s ease-in-out;
}

/* Mostra o pop-up */
.__samsung-overlay.active {
    opacity: 1;
    visibility: visible;
}

.__samsung-overlay.active .__samsung-popup {
    transform: scale(1);
}

.copie-pop-up {
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    color: black;
}





.copy-button {
    background-color: #007aff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.copy-button:hover {
    background-color: #005bbf;
}

.message {
    margin-top: 10px;
    font-size: 14px;
    color: green;
    display: none;
}

/* Oculta a textarea */
#hidden-textarea {
    position: absolute;
    left: -9999px;
    opacity: 0;
}




.popup_alias {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    z-index: 1000;
}

.popup-content_alias {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    height: 300px;
    width: 350px;
    max-height: 600px;
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease;
}

.popup-content_alias h2 {
    margin: 0 0 10px;
    font-size: 26px;
    font-family: 'sans serif';
    text-align: center;
    color: #333;
}

.popup-content_alias p {
    font-size: 16px;
    color: #667;
    padding: 10px;
    text-align: justify;
    line-height: 33px;
}

.updateChrome_class {
    background: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.updateChrome_atualizar {
    background: #21b2f5;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.updateChrome_class {
    background: #45a049;
}

.popup-content_alias.show_alias_pop_up {
    opacity: 1;
    visibility: visible;
}

.popup-content_alias .popup-content {
    transform: scale(1);
}

.hidden_alias {
    display: none !important;
}


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

.color_page {
    background-color: #202020;
    height: 100%;
    width: 100%;
}

.banho-text {

    color: white;
    height: 30vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}




.visible_page {
    display: flex !important;
    /* Exibe a página com display: flex */
    /* Outros estilos flexbox, se necessário */
}

.google-translate-element {
    display: none !important;
}


/* Estilo da div que ativa o pop-up */
.Focus_Music-trigger-div {
    width: 150px;
    height: 150px;
    background-image: url('../Imagens/Estrutural/cadeado.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    user-select: none !important;
    animation: bouncingToBack 2s infinite ease-in-out;
    /* Chama a animação */
}




/* Estilo do fundo do pop-up */
.Focus_Music-popup-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

/* Estilo do conteúdo do pop-up */
.Focus_Music-popup-content {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
    max-width: 400px;
    width: 90%;
}

/* Botão de fechar */
.Focus_Music-close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

.Focus_Music-close-button:hover {
    color: red;
}






.icon_societ {
    width: 42px;
    height: 42px;
}



.container_audio_radio {
    background-color: rgba(0, 0, 0, 0.25);
    position: fixed;
    display: none;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    opacity: 0;
    transform: scale(0.25);
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
    z-index: 9999;
}

.container_audio_radio.show {
    opacity: 1;
    transform: scale(1);
}

.container_audio_radio.hide {
    opacity: 0;
    transform: scale(0.25);
}



#container {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background-color: #ffffff;
    margin-bottom: 20px;

}


.page-content-refer {
    width: 100%;
    height: 100%;
}

.slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* Alinhe todos os slides na mesma posição horizontal */
    transform: translateY(100%);
    /* Movimenta apenas no eixo Y */
    transition: transform 0.5s ease;
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
}

.slide.current {
    left: 0;
    transform: translateY(0%);
    z-index: 2;
    /* Garante que a página ativa esteja na frente */
}

.slide.previous {
    left: 0;
    transform: translateY(-100%);
    z-index: 1;
    /* Garante que a página anterior esteja atrás da página ativa */
}

.slide.next {
    left: 0;
    transform: translateY(100%);
    z-index: 1;
    /* Garante que a próxima página esteja atrás da página ativa */
}

#slide1 {
    left: 0;
}

.nav-dots {
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.dot.current {
    background-color: #be1c1c;
}

.Resultados {

    height: 70vh;
    width: 100vw;
    max-width: 100vw;
    min-height: 100vw;
    min-width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}









.page-content-crono {

    height: 160%;
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

}

.folha {
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 5%;
    box-sizing: border-box;
    position: relative;
}



.dark-mode .folha {
    width: 100%;
    height: 100%;
    padding: 5%;
    box-sizing: border-box;
    position: relative;
    background-color: rgb(0, 0, 0);
}












/* 

#player-container {
    z-index: 999 !important;
    display: none;
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    width: 430px;
    height: 100px;
    margin: -4px auto;
}

#player-bg-artwork {
    z-index: 999 !important;
    display: none;
    overflow-y: hidden !important;
    overflow-y: hidden !important;
    position: fixed;
    top: -30px;
    right: -30px;
    bottom: -30px;
    left: -30px;
    background-image: url("https://raw.githubusercontent.com/himalayasingh/music-player-1/master/img/_1.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    filter: blur(40px);
    -webkit-filter: blur(40px);
    z-index: 1;
}

#player-bg-layer {
    z-index: 999 !important;
    display: none;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #fff;
    opacity: 0.5;
    z-index: 2;
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;


}

#player-bg-layer {
    transform: translateY(100%);

    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

#player-bg-layer.active {
    transform: translateY(0%);

}


#player {
    position: relative;
    height: 100%;
    z-index: 3;
}

#player-track {
    position: absolute;
    top: 0;
    right: 15px;
    height: auto;
    left: 15px;
    padding: 13px 22px 10px 184px;
    background-color: #fff7f7;
    border-radius: 15px 15px 0 0;
    transition: 0.3s ease top;
    z-index: 1;
}

#player-track.active {
    top: -120px;
    height: 200px;
}

#album-name {
    color: #54576f;
    font-size: 17px;
    font-weight: bold;
}

#track-name {
    color: #acaebd;
    font-size: 13px;
    margin: 2px 0 13px 0;
}

#track-time {
    height: 12px;
    margin-bottom: 3px;
    overflow: hidden;
}

#current-time {
    float: left;
}

#track-length {
    float: right;
}

#current-time,
#track-length {
    color: transparent;
    font-size: 11px;
    background-color: #ffe8ee;
    border-radius: 10px;
    transition: 0.3s ease all;
}

#track-time.active #current-time,
#track-time.active #track-length {
    color: #f86d92;
    background-color: transparent;
}

#seek-bar-container,
#seek-bar {
    position: relative;
    height: 4px;
    border-radius: 4px;
}

#seek-bar-container {
    background-color: #ffe8ee;
    cursor: pointer;
}

#seek-time {
    position: absolute;
    top: -29px;
    color: #fff;
    font-size: 12px;
    white-space: pre;
    padding: 5px 6px;
    border-radius: 4px;
    display: none;
}

#s-hover {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    opacity: 0.2;
    z-index: 2;
}

#seek-time,
#s-hover {
    background-color: #3b3d50;
}

#seek-bar {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background-color: #fd6d94;
    transition: 0.2s ease width;
    z-index: 1;
}

#player-content {
    position: relative;
    height: 100%;
    background-color: #fff;
    box-shadow: 0 30px 80px #656565;
    border-radius: 15px;
    z-index: 2;
}

#album-art {
    position: absolute;
    top: -40px;
    width: 115px;
    height: 115px;
    margin-left: 40px;
    transform: rotateZ(0);
    transition: 0.3s ease all;
    box-shadow: 0 0 0 10px #fff;
    border-radius: 50%;
    overflow: hidden;
}

#album-art.active {
    top: -60px;
    box-shadow: 0 0 0 4px #fff7f7, 0 30px 50px -15px #afb7c1;
}

#album-art:before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    width: 20px;
    height: 20px;
    margin: -10px auto 0 auto;
    background-color: #d6dee7;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px #fff;
    z-index: 2;
}

#album-art img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: -1;
}

#album-art img.active {
    opacity: 1;
    z-index: 1;
}

#album-art.active img.active {
    z-index: 1;
    animation: rotateAlbumArt 3s linear 0s infinite forwards;
}

@keyframes rotateAlbumArt {
    0% {
        transform: rotateZ(0);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

#buffer-box {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 13px;
    color: #1f1f1f;
    font-size: 13px;
    font-family: Helvetica;
    text-align: center;
    font-weight: bold;
    line-height: 1;
    padding: 6px;
    margin: -12px auto 0 auto;
    background-color: rgba(255, 255, 255, 0.19);
    opacity: 0;
    z-index: 2;
}

#album-art img,
#buffer-box {
    transition: 0.1s linear all;
}

#album-art.buffering img {
    opacity: 0.25;
}

#album-art.buffering img.active {
    opacity: 0.8;
    filter: blur(2px);
    -webkit-filter: blur(2px);
}

#album-art.buffering #buffer-box {
    opacity: 1;
}

#player-controls {
    width: 250px;
    height: 100%;
    margin: 0 5px 0 141px;
    float: right;
    overflow: hidden;
}

.control {
    width: 33.333%;
    float: left;
    padding: 12px 0;
}

.button_fas_i {
    width: 26px;
    height: 26px;
    padding: 25px;
    background-color: #fff;
    border-radius: 6px;
    cursor: pointer;
}

.button_fas_i i {
    display: block;
    color: #d6dee7;
    font-size: 26px;
    text-align: center;
    line-height: 1;
}



.button_fas_i:hover i {
    color: #3b3b3b50;
}




.for_close {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 900;
    font-family: 'Times New Roman', Times, serif;
    position: absolute;
    top: 0;
    right: 0;
    background-color: red;
    border: 2px solid white;
    width: 55px;
    height: 55px;
    border-radius: 100%;
}


.for_close:hover {
    transform: scale(1.1);
    transition: 0.5s;

} */

.light-mode .button_PrevPage.active,
.light-mode .button_NextPage.active {

    color: rgb(0, 0, 0);
    /* Tom mais escuro de laranja ao clicar */
    /* Reduz um pouco o tamanho para o efeito de "pressionado" */
    outline: none;
    /* Remove o foco padrão */
    border-radius: .6rem;
    box-shadow: none;
    /* Remove bordas azuis indesejadas */
    appearance: none;
    box-shadow: inset rgba(0, 0, 0, 0.2) 1px 2px 4px;
    /* Remove estilo nativo do botão */
}




.dark-mode .button_PrevPage.active,
.dark-mode .button_NextPage.active {

    color: white;
    /* Tom mais escuro de laranja ao clicar */
    /* Reduz um pouco o tamanho para o efeito de "pressionado" */
    outline: none;
    /* Remove o foco padrão */
    border-radius: .6rem;
    box-shadow: none;
    /* Remove bordas azuis indesejadas */
    appearance: none;

    box-shadow: inset rgba(0, 0, 0, 0.4) 1px 2px 4px;
    /* Remove estilo nativo do botão */
}




.dark-mode .button_PrevPage.activeDisble,
.dark-mode .button_NextPage.activeDisble {

    color: white;
    border-radius: .6rem;
    /* Tom mais escuro de laranja ao clicar */

    /* Reduz um pouco o tamanho para o efeito de "pressionado" */
    outline: none;
    /* Remove o foco padrão */
    /* border-radius: .6rem; */
    box-shadow: none;
    /* Remove bordas azuis indesejadas */
    appearance: none;
    box-shadow: inset rgba(0, 0, 0, 0.4) 1px 2px 4px;

    /* Remove estilo nativo do botão */
}

.light-mode .button_PrevPage.activeDisble,
.light-mode .button_NextPage.activeDisble {
    transform: scale(0.90);

    color: rgb(0, 0, 0);
    /* Tom mais escuro de laranja ao clicar */
    transform: scale(0.90);
    /* Reduz um pouco o tamanho para o efeito de "pressionado" */
    outline: none;
    /* Remove o foco padrão */
    /* border-radius: .6rem; */
    box-shadow: none;
    /* Remove bordas azuis indesejadas */
    appearance: none;
    box-shadow: inset rgba(0, 0, 0, 0.2) 1px 2px 4px;
    border-radius: .6rem;
    /* Remove estilo nativo do botão */
}


.custom-mode-palete1 .button_PrevPage.active,
.custom-mode-palete-1 .button_NextPage.active {
    transform: scale(0.90);

    color: rgb(255, 255, 255);
    /* Tom mais escuro de laranja ao clicar */
    transform: scale(0.90);
    /* Reduz um pouco o tamanho para o efeito de "pressionado" */
    outline: none;
    /* Remove o foco padrão */
    border-radius: .6rem;
    box-shadow: none;
    /* Remove bordas azuis indesejadas */
    appearance: none;
    box-shadow: inset rgba(0, 0, 0, 0.4) 2px 2px 4px;
    /* Remove estilo nativo do botão */
}


.custom-mode-palete-3 .button_PrevPage.active,
.custom-mode-palete-3 .button_NextPage.active {
    transform: scale(0.90);
    box-shadow: inset rgba(0, 0, 0, 0.2) 1px 2px 4px;

    color: rgb(255, 255, 255);
    /* Tom mais escuro de laranja ao clicar */
    transform: scale(0.90);
    /* Reduz um pouco o tamanho para o efeito de "pressionado" */
    outline: none;
    /* Remove o foco padrão */
    border-radius: .5rem;
    box-shadow: none;
    /* Remove bordas azuis indesejadas */
    appearance: none;
    box-shadow: inset rgba(0, 0, 0, 0.4) 1px 2px 4px;
    /* Remove estilo nativo do botão */
}









#snowCanvas {
    pointer-events: none;
    z-index: 999 !important;
    position: absolute;
}




.folha::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 70px solid rgba(255, 255, 255, 0.329);
    /* Parte de cima branca */
    border-left: 70px solid transparent;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    /* Tornar a parte esquerda transparente */
    box-shadow: 0px 5px 8px rgba(216, 215, 215, 0.952);
    /* Sombra na parte inferior */
}

.dark-mode .folha::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-bottom: 70px solid #000;
    /* Parte de cima branca */
    border-left: 70px solid transparent;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    /* Tornar a parte esquerda transparente */
    box-shadow: 0px 5px 8px #5c5c5c;
    /* Sombra na parte inferior */
}




/* Estilizando o pop-up */
.pop_up_pacote_overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.pop_up_pacote_content {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 390px;
    height: 550px;
    animation: pop_up_pacote_fadeIn 0.3s ease-in-out;
}

.pop_up_pacote_close {
    background: red;
    color: white;
    border: none;
    width: 40%;
    padding: 10px;
    cursor: pointer;
    text-shadow: 1px 1px 1px white;
    border-radius: 5px;
}

.pop_up_pacote_download {
    text-shadow: 1px 1px 1px white;
    background: rgb(0, 204, 255);
    color: white;
    border: none;
    text-align: center;
    width: 40%;
    padding: 10px;
    cursor: pointer;

    border-radius: 5px;
}


.container_buttons_presente_gift {
    width: 100%;
    display: flex;
    height: auto;
    justify-content: space-around;
}


.pop_up_pacote_close:hover {
    background: darkred;
}




.span_style_comprar {
    display: inline-block;
    width: 25px;
    height: 25px;
}


.page-content-container-alternantes {
    position: absolute;
    top: 0;
    left: 0;
    font-family: 'Poppins', sans-serif;
    background-color: #1e1e2f;
    color: #e0e0e0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    min-height: 100vh;
    width: 100%;
    margin: 0;
}


.title {
    font-size: 26px;
    margin-bottom: 20px;
    color: #f8b400;
}

.accordion {
    width: 95%;
    background: #2a2a3a;
    border-radius: 10px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
    margin-bottom: 12px;
    padding: 12px;
    transition: all 0.3s ease;
}

.accordion-summary {
    font-weight: bold;
    cursor: pointer;
    padding: 8px;
    outline: none;
    color: #f8b400;
}

.accordion[open] {
    background: #34344a;
    animation: asdas 1s ease-in-out;
}

.accordion-list {
    padding-left: 20px;
    margin-top: 10px;
}

.accordion-item {
    text-align: justify;
    line-height: 30px;
    list-style-type: none;
    padding: 6px 6px;
    color: #e0e0e0;
}



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

    100% {

        transform: scale(1.1);
    }
}


.ascending_buy {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background-color: #202020;
    width: 100%;
    height: 100%;
    z-index: 5 !important;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

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


.drag-to-release {
    color: white;
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    font-size: 20px;
    border-radius: 5px;
}



.light-mode .drag-to-release {
    color: rgb(0, 0, 0);
    font-family: "Heebo", sans-serif;
    text-align: center;
    font-size: 20px;
    font-weight: 300;
    border-radius: 5px;
}


.drag-container {
    position: relative;
    width: 90%;
    max-width: 400px;
    height: 50px;
    background-color: #ddd;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.drag-bar {
    position: absolute;
    width: 0;
    height: 100%;
    background-color: #4caf50;
    border-radius: 25px 0 0 25px;
}

.drag-handle {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #fff;
    border: 2px solid #4caf50;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s;
    will-change: transform;
}

.drag-handle:active {
    transform: scale(1.1);
}

.drag-instruction {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: #555;
    pointer-events: none;
    will-change: transform;
}





.install-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4CAF50, #2E7D32);
    color: white;
    font-size: 18px;
    font-weight: bold;
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.install-btn:hover {
    background: linear-gradient(135deg, #66BB6A, #388E3C);
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}

.install-btn:active {
    transform: scale(0.98);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}



.install-text {
    font-size: 16px;
    border: 2px solid red;
    line-height: 33px;
    text-align: justify;
    padding: 10px;
    background-color: rgba(15, 1, 43, 0.486);
    border-radius: 8px;
    color: #ffffff;
}

.light-mode .install-text {
    font-size: 16px;
    border: 2px solid red;
    line-height: 33px;
    text-align: justify;
    padding: 10px;
    background-color: rgba(15, 1, 43, 0.486);
    border-radius: 8px;
    color: #ffffff;
}




.__ob-page-content-app {

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


.page-content-app-container {

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

.light-mode .page-content-app-container {
    background-color: black;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    justify-content: center;
}



.app_Container {
    height: 400px;
    width: 90%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
    border-radius: 7px;
    border: 1px solid #F280CA;
    box-shadow: 1px 1px 6px 1px #F280CA;

}





/* CSS */
.button-77 {
    align-items: center;
    appearance: none;
    background-clip: padding-box;
    background-color: initial;
    background-image: none;
    border-style: none;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    flex-direction: row;
    flex-shrink: 0;
    font-family: Eina01, sans-serif;
    font-size: 16px;
    font-weight: 800;
    justify-content: center;
    line-height: 24px;
    margin: 0;
    min-height: 64px;
    outline: none;
    overflow: visible;
    padding: 19px 26px;
    pointer-events: auto;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: middle;
    width: auto;
    word-break: keep-all;
    z-index: 0;
}

@media (min-width: 768px) {
    .button-77 {
        padding: 19px 32px;
    }
}

.button-77:before,
.button-77:after {
    border-radius: 80px;
}

.button-77:before {
    background-color: rgba(249, 58, 19, .32);
    content: "";
    display: block;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -2;
}

.button-77:after {
    background-color: initial;
    background-image: linear-gradient(92.83deg, #ff7426 0, #f93a13 100%);
    bottom: 4px;
    content: "";
    display: block;
    left: 4px;
    overflow: hidden;
    position: absolute;
    right: 4px;
    top: 4px;
    transition: all 100ms ease-out;
    z-index: -1;
}

.button-77:hover:not(:disabled):after {
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    transition-timing-function: ease-in;
}

.button-77:active:not(:disabled) {
    color: #ccc;
}

.button-77:active:not(:disabled):after {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), linear-gradient(92.83deg, #ff7426 0, #f93a13 100%);
    bottom: 4px;
    left: 4px;
    right: 4px;
    top: 4px;
}

.button-77:disabled {
    cursor: default;
    opacity: .24;
}











.maximization {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
}


.pop-up_convence {

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 500px;
    width: 400px;
    background-color: rgba(0, 0, 0, 0.842);
    border-radius: 15px;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}






.gif_convence_p {
    background-color: rgba(0, 0, 0, 0.5);

    padding: 20px;
    width: 100%;
    color: white !important;
    text-align: justify;
    line-height: 33px;

}


.i_understand {
    border: 1px solid white;
    height: 50px;
    background-color: transparent;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding: 15px;
    border-radius: 20px;
    font-weight: 800;
    color: white;
    width: 200px;
    text-align: center;
}


.visiblePage {
    visibility: visible;

    will-change: transform, opacity;
}


.trail_custom {
    position: absolute;
    width: 30px;
    height: 100px;
    z-index: 1;
    background-color: #F28627;

}

.app_not_for_apple {

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    height: 400px;
    display: none;
    width: 400px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    z-index: 1000;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 15, 15, 0.849);
    z-index: 999;
}

.close-btn {
    margin-top: 10px;
    padding: 5px 10px;
    background: red;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}




.app_apple_texto {
    color: black !important;
    height: auto;

    text-align: justify;
    line-height: 33px;
    font-size: 14px;
}









/* Fundo escuro semi-transparente */
.full_mode_popup_container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    /* Oculta por padrão */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

/* Caixa do pop-up */
.full_mode_popup_box {
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    justify-content: space-evenly;
    color: black;
    border-radius: 12px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.404);
    text-align: center;
    max-width: 90%;
    width: 400px;
    height: 250px;
    animation: full_mode_fadeIn 0.3s ease-in-out;
}

.full_mode_popup_message {

    text-align: center;
    height: auto;
    padding: 10px;
    line-height: 28px;
    text-align: justify;
    width: 95%;
    font-size: 15px;
    color: #333 !important;
    /* Evita que o texto ultrapasse a div */

}

/* Botão de fechar */
.full_mode_popup_close {
    background: #ff5e5e;
    color: white;

    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s;
}

/* Botão de fechar */
.full_mode_popup_Entrar {
    background: #215f26;
    color: white;

    border: none;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.3s;
}

.full_mode_popup_close:hover {
    background: #e04b4b;
}




.Container_full-screen_button {
    height: auto;
    width: 100%;

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







.Responder span:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
}

.Responder span:nth-child(2) {
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    animation-delay: 1s;
}

.Responder span:nth-child(3) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
}

.Responder span:nth-child(4) {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    animation-delay: 1s;
}

.light-mode .Responder span:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
}

.light-mode .Responder span:nth-child(2) {
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    animation-delay: 1s;
}

.light-mode .Responder span:nth-child(3) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
}

.light-mode .Responder span:nth-child(4) {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    animation-delay: 1s;
}


.popup-container-painel-video {
    display: none;
    position: fixed;
    background-color: #000000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;

    align-items: center;
    opacity: 1;
    transition: opacity 2s ease, background-color 2s ease;
    animation: warpIn 1s ease-in-out;
}

.popup-container-painel-video.fadeOut {
    background-color: rgba(0, 0, 0, 0.062);
    animation: warpOut 1s ease-in-out;

}

.popup-video-painel {
    width: 100%;
    height: 600px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    background-color: white;
    justify-content: center;
    align-items: center;
    animation: warpIn 1s ease;
    position: relative;
    transition: all 0.5s ease;
    transform-origin: center bottom;

}




.popup-video-painel.fullscreen {
    justify-content: center;
    align-items: center;
    padding: 1rem;
}

.popup-video-painel iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    height: 400px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    transition: all 1s ease;
}

.voltar-btn {
    margin-top: 1rem;
    padding: 10px 20px;
    background-color: #222;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    position: absolute;
    bottom: 0;
    right: 0;
    cursor: pointer;
    transition: background 0.3s;
}

.voltar-btn:hover {
    background-color: #444;
}

.voltar-btn.hidden {
    display: none;
}


.close-btn-painel-video {
    z-index: 9999 !important;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    position: absolute;
    top: 10px;
    border-radius: 100%;
    right: 10px;
    cursor: pointer;
    height: 25px;
    width: 25px;
    font-size: 18px;
    background: red;
    border: none;
}

.popup-container-mark-painel {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 570px;

    z-index: 2;
}

.fold-out {
    animation: scaleDown 1s ease-in-out;
}



/* Animação 6: Scale Down */
.hide-animation-6 {
    animation-name: scaleDown;
}

@keyframes scaleDown {
    from {
        transform: translate(-50%, -50%) scale(1);

    }

    to {
        transform: translate(-50%, -50%) scale(0);

    }
}




.popup-marks-painel {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 400px;
    height: 640px;
    background: white;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: scale_mark_painel 1s ease-in-out;
    will-change: transform;
    position: relative;
    box-shadow:
        0 4px 10px rgba(105, 105, 105, 0.6),
        0 10px 30px rgba(104, 104, 104, 0.4);
    transition: box-shadow 0.5s ease;
}

.dark-mode .popup-marks-painel {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 400px;
    height: 640px;
    background: rgb(0, 0, 0);
    color: white;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: scale_mark_painel 1s ease-in-out;
    will-change: transform;
    position: relative;
}




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

    }

    100% {
        transform: scale(1);

    }
}

.dark-mode .mark-pop-up-painel {
    color: white;
}



.close-btn-mark-painel {
    z-index: 9999 !important;
    color: rgb(255, 255, 255);
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-weight: bold;
    border-radius: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: none;
    background-color: rgb(255, 0, 0);
}




.mark-pop-up-painel {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-size: 1.5rem;
    text-align: center;
    font-weight: normal;
    font-style: normal;
    width: 100%;
    color: black;
}










.video-container {

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    background: black;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
}

.video-title {
    font-size: 22px;
    margin-bottom: 15px;
}

.video-frame {
    top: 110px;
    position: absolute;

    width: 100%;
    height: 64%;
    border: none;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}



.video-frame.hidden {
    display: none;
}







.video-buttons {

    width: 100%;
    height: 70px;
    z-index: 999 !important;
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.video-button {
    padding: 10px 20px;
    font-size: 16px;
    background: #ff4757;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s;
}

.video-button:hover {
    background: #e84118;
}






.popup-container-search-painel {
    display: none;
    position: fixed;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: auto;
    justify-content: center;
    align-items: center;
    visibility: visible;
}


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

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



/* 4. Torção espiral (swirl + fade) */

@keyframes exit-pop-explode {
    0% {
        transform: translateZ(0) scale(1);
        opacity: 1;
        filter: blur(0px);
        clip-path: inset(0% 0% 0% 0%);
    }

    40% {
        transform: scale(1);
        filter: blur(1px);
        clip-path: inset(0% 0% 0% 0%);
    }

    70% {
        transform: scale(0.9);
        opacity: 0.8;
        filter: blur(6px);
        clip-path: inset(10% 10% 45% 10% round 8px);
    }

    100% {
        transform: translateY(-30px) scale(0.2);
        opacity: 0;
        filter: blur(14px);
        clip-path: inset(60% 60% 0% 0% round 50%);
    }
}

@keyframes pulsing-echo-exit {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    }

    20% {
        transform: translate(-50%, -50%) scale(1.05);
        box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1);
        opacity: 0.9;
    }

    40% {
        transform: translate(-50%, -50%) scale(0.95);
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.05);
        opacity: 0.7;
    }

    60% {
        transform: translate(-50%, -50%) scale(1.1);
        box-shadow: 0 10px 50px rgba(0, 0, 0, 0.03);
        opacity: 0.5;
    }

    80% {
        transform: translate(-50%, -50%) scale(0.9);
        box-shadow: 0 12px 60px rgba(0, 0, 0, 0.01);
        opacity: 0.3;
    }

    100% {
        transform: translate(-50%, -50%) scale(0);
        box-shadow: none;
        opacity: 0;
    }
}


.search-container-painel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 10px;
    gap: 10px;
    /* Espaçamento entre os itens */
}

.close-btn-search-painel {
    z-index: 9999 !important;
    color: white;
    position: absolute;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 10px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 100%;
    background-color: red;
    border: none;
}

.search-pop-up-painel {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-size: 1.5rem;
    text-align: center;
    font-weight: normal;
    font-style: normal;
    width: 100%;
    color: rgb(255, 255, 255);
}

.search-panel {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    justify-content: space-evenly;
    padding: 20px;
    border-radius: 10px;

    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3),
        -4px -4px 10px rgba(255, 255, 255, 0.1),
        inset 2px 2px 5px rgba(255, 255, 255, 0.05),
        inset -2px -2px 5px rgba(0, 0, 0, 0.2);

}


/* Estilo do select */
#pageSelect.nav-select {
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.623);
    color: white;
    text-align: center;
    border: none !important;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    transition: border 0.3s ease;
}


/* Estilo do input */
#pageInput.nav-input {
    width: 100%;
    text-align: center;
    padding: 10px;
    color: white;
    background-color: rgba(0, 0, 0, 0.623);
    border: none !important;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    transition: border 0.3s ease;
}


.extras_input_search {
    width: 100%;
    text-align: center;
    padding: 10px;
    color: white;
    background-color: rgba(0, 0, 0, 0.623);
    border: none !important;
    border-radius: 8px;
    font-size: 16px;
    outline: none;
    transition: border 0.3s ease;
}


.extras_input_search::placeholder {
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}


#pageInput.nav-input::placeholder {
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

/* Botão estilizado */
#navButton.nav-button {
    background: rgba(0, 0, 0, 0.623);
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease;
}

#navButton.nav-button:hover {
    background: #0056b3;
}


.error-message {
    color: #ff5a5f;
    margin-top: 10px;
    display: none;
    font-weight: bold;
}






/* Estilização do botão principal */
.custom-dropdown {
    position: relative;
    width: 300px;
}

.dropdown-button {
    width: 100%;
    padding: 10px;
    background-color: #1a1a1a;
    color: white;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
}

/* Estilização do menu (dropdown) */
.dropdown-menu {
    display: none;
    position: absolute;
    width: 100%;
    background-color: #1a1a1a;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    animation: liquidUnfoldDown 1s ease-in-out;
    max-height: 300px;
    overflow-y: auto;
    z-index: 10;
}

/* Itens do menu */
.dropdown-menu li {
    padding: 10px;
    color: white;
    cursor: pointer;
    font-size: 16px;
}

.dropdown-menu li:hover {
    background-color: #1a1a1a;
}


.des-youtube {

    width: 100%;
    color: white;
    font-family: 'Times New Roman', Times, serif;
    text-transform: capitalize;
    font-size: 13px;
    text-align: center;
    animation: fade_in_out 2s ease-in-out infinite;

}







.popup-container-contato {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    background-color: rgba(0, 0, 0, 0.651);
    height: 100%;
    justify-content: center;
    align-items: center;
}

.popup-contato {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 400px;
    height: 500px;
    background-color: rgb(0, 0, 0);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: jellyEffect 0.5s ease;
    position: relative;
    outline: none;
    overflow: hidden;

}


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



}


.close-btn-pop-up-contato {
    z-index: 9999 !important;
    color: red;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 18px;
    background: none;
    border: none;
}

.pop-up-painel-contato {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-size: 1.5rem;
    text-align: center;
    font-weight: normal;
    font-style: normal;
    width: 100%;
    color: black;
}

.container-social-contact {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-around;

}


.contato-icon {
    height: 100px;
    width: 100px;
    background-image: url('https://voltowebcompany.com/wp-content/uploads/2025/03/customer-service.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.1);
}

.contact-p {
    font-size: 15px;
    border-radius: 10px;
    width: 100%;
    padding: 10px;
    height: 150px;
    display: flex;
    align-items: center;

    box-shadow: 1px 1px 10px rgb(255, 255, 255);
    font-family: Arial, Helvetica, sans-serif;
    text-align: justify;
    line-height: 33px;
}



.container_mark_list {
    height: 100%;
    width: 100%;
    display: flex;

}

@keyframes pop {
    from {
        transform: scale(0.95);
        opacity: 0;
    }

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


.popup-container-custom-mode {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 400px;
    height: auto;
    justify-content: center;
    align-items: center;



}

.dark-mode .popup-container-custom-mode {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: auto;
    justify-content: center;
    align-items: center;


}



.container-custom-mode {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 400px;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 10px;
    animation: fadeIn 0.5s ease-in-out;
    transition: background-color 0.5s ease-in-out;
    will-change: transform, opacity, background-color;
}


.dark-mode .container-custom-mode {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 400px;
    background-color: black;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 10px;

    will-change: transform, opacity, background-color;

}





/* Estado inicial quando o read-mode está ativo */
.read-mode {
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

/* Efeito de saída com scale e fade-out */
.exiting-read-mode {
    opacity: 0;
    transform: scale(0.1);
    /* Reduz para 50% do tamanho */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

/* Estado final após a saída do read-mode */
.exited-read-mode {
    opacity: 1;
    transform: scale(1);
    /* Volta ao tamanho normal */
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.container-buttons-disable-progress {

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

.yes-disable {

    background-color: red;
    height: 40px;
    width: 80px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border-radius: 5px;
    text-align: center;

}

.No-disable {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #59332F;
    height: 40px;
    width: 80px;
    padding: 5px;
    color: white;
    border-radius: 5px;
    text-align: center;

}

.h1_color_disable {
    color: white;
    font-family: serif;
    text-align: center;
    line-height: 33px;
    text-align: justify;
    font-size: 14px;
}

.book-element-exit-read-mode {
    height: 70px;
    width: 70px;
    background-color: transparent;
    position: absolute;
    left: 0;
    display: none;
    top: 0;
    z-index: 9999 !important;

}


.book-element-exit-read-mode.alert {
    animation: blinkRed 1s infinite alternate;
}


@keyframes blinkRed {
    0% {
        background-color: red;
    }

    50% {
        background-color: transparent;
    }

    100% {
        background-color: red;
    }
}




/* Estilo do pop-up */
.pop-up-for-fonts-container {
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.623);
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(0.7);

    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    z-index: 99999999999999999999999;

}

.pop-up-for-fonts-container.show {
    opacity: 1;
    transform: scale(1);
}

.pop-up-for-fonts-container.addexit {

    animation: bounceOut 1s ease;
    transition: transform 1s ease, opacity 1s ease, background-color 1s ease;
}

.light-mode .pop-up-for-fonts-container {
    background-color: rgba(0, 0, 0, 800);
}

.light-mode .mandela-text-charles {
    color: white;
}


@keyframes flipIn {
    0% {
        transform: rotateY(90deg);
        opacity: 0;
    }

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


.content-for-fonts-container-elements {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    z-index: 999;
    height: 500px;
    background-image: url('../Imagens/Capas/Typographer_2.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    position: relative;
    animation: bounceIn 1s ease;
}

/* Estilo do menu drop-down personalizado */
.pop-up-for-fonts-dropdown {
    list-style: none;
    padding: 0;
    margin: 0;

    display: none;
    position: absolute;
    background: #EBF2F2;
    border-radius: 5px;
    width: 150px;
}



.pop-up-for-fonts-dropdown li {
    padding: 10px;
    cursor: pointer;
    color: black;
}

.pop-up-for-fonts-dropdown li:hover {
    background: #f0f0f0;
}

.dropdown-container {
    position: relative;
    display: inline-block;
}


.fonts-container-exit {
    background-color: transparent;
    color: white;
    height: 40px;
    border-radius: 100%;
    box-shadow: 1px 1px 1px 1px red;
    text-align: center;
    display: flex;
    font-weight: bold;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 5px;
    right: 10px;
    width: 40px;
}


.pop-up-for-fonts-text {
    font-size: 19px;
    background-color: rgba(0, 0, 0, 0.651);
    border-radius: 8px;
    padding: 10px;
    line-height: 33px;
    color: white;
    text-align: justify;
    display: flex;
    align-items: center;
    justify-content: space-around;

}



#select-font {
    background-color: transparent;
    color: white;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    width: 250px;
    height: 60px;
    box-shadow: 1px 1px 1px 1px #591E23;
}





/* #fullscreenBtn {
    background-color: transparent !important;
} */

.light-mode .btn-text {
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: bold;
}

.dark-mode .btn-text {
    color: white;
    font-size: 0.70rem;
    font-weight: bold;


}


.btn-text-narrar {

    font-size: 0.70rem;
    font-weight: bold;
}






.container-input-cadastro {

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

.cadastro-h2 {
    width: 100%;
    text-align: center;
    font-family: "Boldonse", system-ui;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
    font-style: normal;
}



.input_commun {
    width: 100%;
    text-align: center;
    padding: 10px;
    border-radius: 8px;
    background-color: transparent;
    border: 2px solid gray;
}

.buttons-Customize-Container.disabled {
    pointer-events: none;

}

.container-color-themes-dark-and-white {
    height: 300px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}


.white-container {
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45%;
    border-radius: 9px;
    background-color: rgba(211, 211, 211, 0.534);
    box-shadow: 1px 1px 11px 1px rgba(211, 211, 211, 0.534);
}


.dark-container {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #202020;
    background-color: #202020;
    height: 50%;
    width: 45%;
    border-radius: 9px;
    box-shadow: 1px 1px 11px 1px #202020;


}


.radius-color {

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



.radius-elements {
    height: 32px;
    width: 32px;
    border-radius: 100%;
}



.text-and-inter {

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




.text-themes {

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

.light-mode .content-text-themes {

    color: black;
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: black;
    font-family: "Crimson Text", serif;
    font-weight: 500;
    animation: rfrf 0.6s ease;
}


.dark-mode .content-text-themes {

    color: white;
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-family: "Crimson Text", serif;
    font-weight: 500;
    animation: rfrf 0.6s ease;

}

.h2-for-one-mode-containers {
    font-size: 20px;
    color: #202002;
    font-family: "Crimson Text", serif;
    text-align: center;
    display: flex;
    font-weight: 300;
    align-items: center;
    justify-content: center;
    user-select: none;
  
}



.h2-for-one-mode {
    font-size: 20px;
    color: #202002;
    font-family: "Crimson Text", serif;
    text-align: center;
    display: flex;
    font-weight: 300;
    align-items: center;
    justify-content: center;
    animation: pulseZoom 1s ease;
}

/* Animação só quando a classe "animate" for aplicada */
.h2-for-one-mode.animate {
    animation: pulseZoom 1s ease;
}

.h2-for-one-mode-containers.animate {
    animation: pulseZoom 1s ease;
}


.temp {
    opacity: 1;
    visibility: visible;
    bottom: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    left: 0px;
    top: auto;
    position: absolute;
}



.logo-container {

    height: 100%;
    width: 45px;
}

.data-3d-content {
    font-size: 14px;
    display: flex;
    padding: 10px;
    height: 50px;
    align-items: center;
    justify-content: flex-end;
}

.logo-content-photo {
    height: 100%;
    width: 100%;
    background-image: url('../Imagens/Estrutural/b.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}


.container-3d-main-content-introduction {

    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    height: 350px;
    border-radius: 25px;

}

.main-container-logo-and-description {
    transition: transform 1.5s ease-in-out;
    height: 100%;
    width: 100%;
}


.main-container-element-for-call {


    height: 100%;
    width: 40%;
}

.apple-element-container-introduction {

    height: 100%;
    width: 100%;

}


.face-introduction {

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

/* 
.image-container-introduction {

    height: 150px;
    width: 150px;
    background-image: url('./art-1.jpg');
    background-position: center center;
    background-size: contain;
    border-radius: 100%;

} */


.container-elementos-introduction-for-translate.active {
    transform: translateY(0);
}


/* Esconde o checkbox nativo */
.checkbox-container input[type="checkbox"] {
    display: none;
}

/* Estiliza a "caixa" do checkbox */
.custom-checkbox {
    width: 30px;
    height: 30px;
    border: 2px solid #555;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    position: relative;
    transition: all 0.2s ease;
}

/* Ícone de check com pseudo-elemento */
.custom-checkbox::after {
    content: "";
    width: 5px;
    height: 14px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Quando estiver marcado */
.checkbox-container input:checked+.custom-checkbox {
    background-color: #4CAF50;
    border-color: #4CAF50;
}

.checkbox-container input:checked+.custom-checkbox::after {
    opacity: 1;
}


.paragrapth-container-element-painel {

    width: 100%;
    height: auto;
    padding: 5px;
}

.hide-painel-sete-text {
    font-family: sans-serif;
    line-height: 33px;
    text-align: justify;
    font-size: 15px;

}


.theme_icon_container-overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: space-around;
    z-index: 3;
    display: none;
    background-color: rgba(0, 0, 0, 0.651);
}

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

}


.text-temes-warning-user {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-around;


}

.container-for-themes-main {
    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}


.icon-theme-text-reveal {
    font-family: "Cal Sans", sans-serif;
    font-weight: 300;
    font-style: normal;
    color: white;
    text-align: center;
    height: 100px;
    width: 60%;
    display: flex;

    align-items: center;
    justify-content: space-evenly;
    font-size: 20px;
}

.container-themes-icon {

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

.theme-one {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
    border-radius: 8px;

    width: 100px;
    height: 100px;
}


.-orange {
    background-color: #ff8f6d;
}

.-gray {
    background-color: #BFBFBF;
}

.-red {
    background-color: #F27979;
}

.-purple {
    background-color: #F2C2EF;

}

.-normal {
    background-color: #F3F5F2;
}

.top-icon-orange {

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

.down-icon-orange {

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


.theme-user-icon-text-warning-style {
    font-family: "Cal Sans", sans-serif;
    font-weight: 300;
    font-size: 15px;
    color: white;
    text-align: center;
    width: 100%;
    font-style: normal;
}


.enveloper_for_icon_theme_background {
    background-color: transparent;
    height: 110px;
    width: 110px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-around;

}


/* Cores específicas */
.cor-laranja {
    color: orange;
}

.cor-cinza {
    color: gray;
}

.cor-vermelho {
    color: red;
}

.cor-roxo {
    color: purple;
}

.cor-normal {
    color: white;
}

/* ou qualquer outra cor padrão */
.cor-azul {
    color: dodgerblue;
}

/* exemplo para "Vou VER" */


.overlay_share_pop_up {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 1s ease-in-out;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    display: none;
    align-items: center;
    justify-content: center;
}



.share-container-pop-up {
    height: 500px;
    width: 400px;
    background-color: white;
    border-radius: 8px;
    background-image: linear-gradient(rgba(0, 0, 0, 0.400), rgba(0, 0, 0, 0.3)), url('../Imagens/Capas/compartilhar.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;

}

.paragraph_share {
    text-align: justify;
    line-height: 33px;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    padding: 10px;
    font-family: serif;

}

.button-share-container {

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


.share-button {
    border: none;
    background-color: #222640;
    color: white;
    border-radius: 10px;
    padding: 10px;
    width: 150px;
    height: 50px;
    font-weight: 500;
    font-family: 'Times New Roman', Times, serif;
    box-shadow: 1px 1px 2px 1px #F279DE;
}

.share-button:active {
    transform: translateY(-2px);

}

.share-text {

    text-align: center;
    font-family: "Cal Sans", sans-serif;
    font-weight: 400;
    text-shadow: 1px 1px 1px white;
    letter-spacing: 1.5px;
    font-style: normal;
}

.close_share_pop-up {
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #222640;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    font-size: 10px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 10px;
    box-shadow: 1px 1px 1px 1px #F279DE;

}

.close_share_pop-up:active {
    animation: jelly 1s ease-in-out;

}






.thankYou_share {
    display: none;
    background-color: white;
    width: 350px;
    height: 300px;
    border-radius: 8px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    /* posição final */
    animation: dropFromSky 0.7s ease-out;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
}


.share_content_container {

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

.moral {

    text-align: justify;
    line-height: 33px;
    font-size: 14px;
    color: black;
    padding: 15px;


}

.close_pop_up_and_overlay {
    background-color: #F26363;
    border: 0;
    padding: 10px;
    border-radius: 10px;
    width: 100px;
    height: 50px;
    font-size: 14px;
    display: flex;
    box-shadow: 1px 1px 1px 1px #F20505;
    align-items: center;
    justify-content: center;
}




.drag-over {
    outline: 2px dashed #aaa;
    background-color: rgba(200, 200, 200, 0.1);
}

.dragging {
    opacity: 0.5;
}


#trash-area {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(200, 0, 0, 0.8);
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: bold;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#trash-area.trash-visible {
    opacity: 1;
    pointer-events: auto;
}

.essentials-2-container-align {

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

.overlay_container_notes {
    background-color: rgba(0, 0, 0, 0.9);
    width: 100%;
    height: 100%;
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    opacity: 0;
    z-index: 9999 !important;
    transition: opacity 1.2s ease;
}


.overlay_container_notes.show {
    display: flex;
    opacity: 1;
}

.notes_container {
    position: relative;
    display: flex;
    border-radius: 10px;
    overflow: hidden;
    background-color: #202020;
    height: 485px;
    width: 400px;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.light-mode .notes_container {
    position: relative;
    display: flex;
    border-radius: 10px;
    background-color: #ffffff;
    height: 485px;
    width: 400px;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}




.tabs_header {
    display: flex;
    width: 100%;
    margin-bottom: 10px;
}

.tab_content {
    overflow: hidden;
    height: 100%;
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.tab_content.active {
    display: flex;
}

.content-notes-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
    height: 100%;
    display: flex;
    max-height: 400px;
    overflow-y: scroll;
    padding: 20px;
    align-items: center;
    justify-content: space-around;
    overflow: auto;
}



.tab_btn {
    z-index: 9999 !important;
    flex: 1;
    padding: 10px;
    background: #202020;
    border: none;
    cursor: pointer;
    color: white;
    font-weight: 400;
    font-size: 14px;
    font-family: 'Times New Roman', Times, serif;
    border-radius: 5px;
}

.light-mode .tab_btn {
    z-index: 9999 !important;
    flex: 1;
    padding: 10px;
    background: #ffffff;
    border: none;
    cursor: pointer;
    color: rgb(0, 0, 0);
    font-weight: 400;
    font-size: 14px;
    font-family: 'Times New Roman', Times, serif;
    border-radius: 5px;
}


.tab_btn.active {
    background: #f1d604;
}


.etapa {
    position: absolute;
    top: 0;
    display: flex;
    left: 0;
    width: 100%;
    opacity: 1;
    transition: opacity 1s ease;
    transform: translateX(100%);

}


.etapa.active {
    opacity: 1;
    z-index: 1;
    transform: translateX(0) !important;
    transition: transform 1s ease-in-out;
    display: flex;
}

.fade-out-note {
    opacity: 0;
}

.fade-in-note {
    opacity: 1;
}




.etapa_1 {
    width: 100%;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;

    height: 100%;
}

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

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

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

.Notas-apresentacao {
    /* border: 2px solid blue; */
    height: 75%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.carls-sans-font-notes {
    font-size: 30px;
    letter-spacing: 3px;
    text-align: center;
    color: white;
    font-family: "Cal Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.light-mode .carls-sans-font-notes {
    font-size: 30px;
    letter-spacing: 3px;
    text-align: center;
    color: rgb(0, 0, 0);
    font-family: "Cal Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.notas_apresentation_text {
    /* border: 2px solid; */
    text-align: justify;
    line-height: 33px;
    font-size: 15px;
    border-radius: 8px;
    padding: 15px;
}


.next_button_note {

    margin-bottom: 10px;
    border: none;
    background-color: #000;
    font-family: monospace;
    padding: 10px;
    width: 140px;
    height: 50px;
    color: white;
    border-radius: 8px;
    position: absolute;
    bottom: 0;
    z-index: 9999 !important;
}

.input_text_note {
    color: white;
    font-size: 18px;
    background-color: transparent;
    padding: 10px;
    text-align: center;
    border: none;
    border: 1px solid #ccc;
    font-family: "Cal Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    border-radius: 8px;
}

.light-mode .input_text_note {
    color: rgb(0, 0, 0);
    font-size: 18px;
    background-color: transparent;
    padding: 10px;
    text-align: center;
    border: none;
    border: 1px solid #ccc;
    font-family: "Cal Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    border-radius: 8px;
}

.etapa_3 {

    height: 100%;
    width: 100%;

    align-items: center;
    justify-content: center;
}

.etapa_4 {

    height: 100%;
    width: 100%;

    align-items: center;
    justify-content: center;
}

.place-user-text {
    border: none;
    background-color: #1f1f1f;
    color: white;
    font-size: 17px;
    font-family: monospace;
    text-align: center;
}

.light-mode .place-user-text {
    border: none;
    background-color: #ffffff;
    color: rgb(0, 0, 0);
    font-size: 17px;
    font-family: monospace;
    text-align: center;
}

.place-user-text:focus {
    outline: none;

    box-shadow: none;
}

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

.nota_salva {
    max-width: 180px;
    width: 180px;
    max-height: 200px;
    height: 200px;
    border-radius: 10px;
    box-shadow: 1px 1px 1px 1px black;
    text-align: justify;
    white-space: wrap;
    background-color: #0000001f;
}

.light-mode .nota_salva {
    max-width: 180px;
    width: 180px;
    max-height: 200px;
    height: 200px;
    border-radius: 10px;
    text-align: justify;
    white-space: wrap;
    background-color: #ffffff;
    box-shadow: 1px 1px 1px 1px #bdbaba;
}

.p_content_note {
    font-family: "Cal Sans", sans-serif;
    font-weight: 300;
    text-align: justify;
    font-style: normal;

}

.nota_detalhada {
    padding: 20px;

    flex-direction: column;
    overflow-y: auto;
    color: black;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
    background: #181818;
    color: white;
    border-radius: 12px;
    box-shadow: 1px 1px 11px 1px black;
}

.light-mode .conteudo_nota_expandida {
    color: black;
}

.light-mode .nota_detalhada {
    background: #ffffff;
}



.conteudo_nota_expandida {
    font-family: monospace;
    letter-spacing: 2px;
    line-height: 33px;
    font-size: 17px;
    text-align: justify;
    word-break: break-word;
    /* Garante quebra entre palavras longas */
    white-space: pre-wrap;
    /* Mantém quebras de linha do texto original */
    overflow-y: auto;
}

.container-sintext-ideia {

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

.ideia {
    font-size: 13px;
    color: #000000;
    text-align: center;
}

.light-mode .ideia {
    font-size: 13px;
    color: #000000 !important;
    text-align: center;
}

#error_mensagem_idea {
    color: red;

}

.input_text_note::placeholder {
    font-size: 13px;
}


.input_descricao_note {
    background-color: transparent;
    border: none;
    border-radius: 8px;
    height: 100px;
    width: 250px;
    text-align: center;
    color: white;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.light-mode .input_descricao_note {
    background-color: transparent;
    border: none;
    border-radius: 8px;
    height: 100px;
    width: 250px;
    text-align: center;
    color: rgb(0, 0, 0);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}



.input_descricao_note:active {
    border: none !important;
}

.input_descricao_note:focus {
    outline: none;
}

.input_descricao_note:focus {
    outline: none;
    box-shadow: none;
}

.note-title-save {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    position: relative;
    top: -20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 17px;
    width: 100%;
    text-align: center;
    height: 15%;
    color: #202020;
    background-color: #fff26e;

    font-weight: 600;
    font-style: normal;
    font-family: "Cal Sans", sans-serif;




}



.note_descricao_save {
    text-align: justify;
    position: relative;
    bottom: 10px;
    line-height: 33px;
    font-size: 14px;
    word-break: break-word;
    padding: 7px;
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    height: 70%;
    width: 100%;
    font-family: "Cal Sans", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.btn-deletar-nota {
    display: flex;
    width: 100%;
    margin-top: 8px;
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 7px 12px;
    border-radius: 6px;
    cursor: pointer;
    justify-content: center;
    font-size: 0.9rem;
    text-align: center;
    align-items: center;
}

.btn-deletar-nota:hover {
    background-color: #c0392b;
}

.salvar_container {
    align-items: center;
    flex-direction: column;
    display: flex;
    width: calc(50% - 8px);
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
    justify-content: space-around;
}

.container_input_title_sintex {

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

.container_count_title_letters {
    display: flex;
    padding: 4px;
    font-size: 11px;
    align-items: flex-start;
    justify-content: flex-end;

    width: 240px;
    height: 30px;
}


.container_input_descriptions_stick_element {

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

.input_counter_descripition_letter {

    width: 100%;
    height: 50%;
    display: flex;
    font-size: 11px;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 9px;
}



.__settings_overlay_container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.__settings_overlay_popup {
    background-color: #202020;
    width: 500px;
    height: 600px;
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    overflow: scroll;
    font-family: sans-serif;
}

.__settings_overlay_tabs {
    display: flex;
    background: #333;
}

.__settings_overlay_tab {
    flex: 1;
    padding: 12px;
    color: #fff;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}

.__settings_overlay_tab:hover,
.__settings_overlay_tab.__settings_overlay_active {
    background: #444;
}

.__settings_overlay_tab_content {

    width: 100%;
    height: 600px;

}

.__settings_overlay_content {
    display: none;
}

.__settings_overlay_content.__settings_overlay_active {
    display: flex;
}



.painel_containets_content {

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

#__settings_overlay_display {
    height: 100%;
    gap: 15px;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.container-painel-settins-top {

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

.container-painel-settins-bottom {

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

.container_icons_divs {
    border: 2px solid red;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 60px;
}




.container_simple {

    border: 2px solid red;
    width: 100%;
    overflow: scroll;
    flex-direction: column;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.simple-container-one {
    background-color: white;
    border-radius: 8px;
    height: 250px;
    width: 180px;
    overflow: scroll;
    box-shadow: 1px 1px 1px 1px white;
}

.simple-container-two {
    background-color: white;
    border-radius: 8px;
    height: 250px;
    width: 180px;
    overflow: scroll;
    box-shadow: 1px 1px 1px 1px white;
}


#__settings_overlay_audio {
    height: 100%;
    width: 100%;
}

.container-i-first {
    border: 2px solid blue;
    height: 25%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.container-i-second {
    border: 2px solid blue;
    height: 25%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.container-i-three {
    border: 2px solid blue;
    height: 25%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.container-i-four {
    border: 2px solid blue;
    height: 25%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.container-i-five {
    border: 2px solid blue;
    height: 25%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.container-i-six {
    border: 2px solid blue;
    height: 25%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.container-i-seven {
    border: 2px solid blue;
    height: 25%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.container-i-eight {
    border: 2px solid blue;
    height: 25%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.container-i-nine {
    border: 2px solid blue;
    height: 25%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}



.i {
    width: 40px;
    height: 40px;
    background-color: red;

}

.i2 {
    width: 40px;
    height: 40px;
    background-color: blue;

}


.container_simple_elements {
    border: 2px solid blue;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.elemento_arrastado_first {
    border: 1px solid blue;
    height: 100%;
    width: 80px;
}

.elemento_arrastado_second {
    border: 1px solid blue;
    height: 100%;
    width: 80px;
}



#overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    justify-content: center;
    align-items: center;
    z-index: 999;
    display: none;
}

.settings-popup {
    width: 600px;
    height: 400px;
    background: #261F22;
    border-radius: 16px;
    overflow: hidden;
    color: #fff;
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
    animation: popupIn 0.3s ease-out;
}

.settings-tabs {
    display: flex;
    background: #261F22;
}

.tab-button {
    flex: 1;
    padding: 12px;
    background: transparent;
    border: none;
    color: #bbb;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
}

.tab-button:hover,
.tab-button.active {
    background: #1f181b;
    color: #fff;
}

.settings-content {
    padding: 20px;
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-content.active {
    display: block;
}






.painel {
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px;
    background: #eee;
}

.popup {
    position: fixed;
    top: 10%;
    left: 10%;
    width: 80%;
    background: white;
    border: 1px solid black;
    padding: 20px;
    z-index: 1000;
}

#painel-container {
    display: flex;

    flex-direction: column;
    width: 100%;
    gap: 10px;
}










.overlay_quick_acess_tool {
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    position: fixed;
    height: 100%;
    display: none !important;
    align-items: center;

    justify-content: center;

}

.container_quick_access {
    height: 300px;
    width: 380px;
    min-width: 380px;
    background-color: white;
    border-radius: 10px;
    overflow-y: scroll;
}

.all_buttons-container {
    overflow-y: scroll;
    border: 2px solid blue;
    width: 100%;
    height: 100%;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.quick-painels {

    width: 100%;
    display: flex;
    height: 100%;

    overflow: hidden;
}

.painel-1 {

    border-right: 1px solid white;
    cursor: grab;
    height: 100%;
    display: grid;
    width: auto;
    grid-template-columns: repeat(4, 1fr);
    /* 4 colunas iguais */
    gap: 10px;
    /* Espaçamento entre os itens */
    padding: 10px;
    position: relative;
    top: 20px;
    box-sizing: border-box;
    width: 50%;
    height: auto;
    overflow-y: scroll !important;
}












.count_exemplO_ {
    position: absolute;
    font-size: 11px;
    right: 10px;
}

.painel-2 {
    width: 30%;
    background-color: white;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    /* 4 colunas iguais */
    height: 100%;
}


.painel_content_buttons {
    z-index: 10;
    position: absolute;
    width: 400px;
    height: 70px;
    display: none;

    /* transition: width 1s ease-in-out, background-color 1s ease-in-out !important;  */


}


@keyframes simpleanimationwidth {
    0% {
        width: 0px;
    }

    100% {
        width: 400px;
    }
}



.widthanimation {
    animation: simpleanimationwidth 1s ease-in-out;
}


.painel_content_buttons.add_on_button_clone_node {
    background-color: white;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    display: flex;
    width: 400px;
    height: 70px;
    align-items: center;
    justify-content: space-around;

}





.painel_content_buttons.vertical {
    position: absolute;
    width: 100px;
    height: 400px;
    transition: height 1s ease-in-out;
    display: none;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    background-color: white;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;

}

/* Classe temporária usada só para animar */
.painel_content_buttons.animar-altura {
    animation: heightAnimationPainel 1s ease-in-out;
}




.container-button {

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


.refe {
    width: 30px;
    height: 30px;

}



.overlay_quick_acess {
    position: fixed;
    height: 100%;
    width: 100%;
    display: none;
    align-items: center;
    z-index: 99999999999999999 !important;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.8);

}


.__quick-access-slider-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 380px;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    animation: materialize 2s ease-in-out forwards;

}

.__quick-access-slider-track {
    display: flex;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
    will-change: transform;
}

.__quick-access-slide {
    flex: 0 0 100%;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #202020;
    color: white;
    user-select: none;
}

#_capo-pop-up {
    transition: opacity 0.3s ease;
}


.__quick-access-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: black;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    padding: 10px;
    cursor: pointer;
    z-index: 1;
    color: white;
    transition: background 0.3s;

}

.__quick-access-button:hover {
    color: white;
    background: black;
}

.__quick-access-prev {
    left: 10px;
}

.__quick-access-next {
    right: 10px;
}

.__quick-access-dots {
    text-align: center;
    margin: 15px 0;
}

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

.__quick-access-dot.__quick-access-active {
    background-color: #f27405;
}

.quick_access_welcome_container {

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

/* animação */
@keyframes appearScale {
    0% {
        opacity: 0;

    }



    100% {
        opacity: 1;

    }
}


@keyframes fadeTilt {
    0% {
        opacity: 0;
        transform: scale(0.9) rotateX(-10deg);
    }

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

@keyframes clipReveal {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
    }

    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}


@keyframes popSpin {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }

    30% {
        transform: scale(1.2) rotate(20deg);
        opacity: 1;
    }

    60% {
        transform: scale(0.9) rotate(-15deg);
    }

    80% {
        transform: scale(1.05) rotate(10deg);
    }

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

.elemento-divertido {
    display: inline-block;
    animation: popSpin 0.9s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    transform-origin: center;
}


@keyframes zoom-rotate {
    0% {
        transform: scale(1) rotate(0deg);
        opacity: 0.1;
    }

    50% {
        transform: scale(2) rotate(-3deg);
        opacity: 0.8;
    }

    75% {
        transform: scale(2) rotate(3deg);
        opacity: 0.8;
    }

    100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.8;
    }
}

.text-quick-access {
    text-align: justify;
    line-height: 35px;
    padding: 20px;
    font-size: 15px;

    font-family: Arial, Helvetica, sans-serif;
}

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


.bar_quick_access_demonstrative {
    background-color: white;
    border-radius: 8px;
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    /* animation: popupWavy 0.6s ease-out; */
    transform-origin: center center;
    height: 80px;



}





.excract_quick {
    width: 60px;
    font-size: 25px;
    font-weight: bold;
    display: flex;
    align-items: center;
    height: 100%;
    border-radius: 8px;
    background-color: #F24B88;
    justify-content: center;
}


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



.painel_container_align_elements {
    flex-direction: column;
    position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.move_elements_text_explication {
    text-align: justify;
    font-size: 11px;
    padding: 15px;
    line-height: 28px;
}

.refe.reduzido {
    width: 25px !important;
    height: 25px !important;
}




.content_pop_for_confirm {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;

    width: 300px;
    height: 200px;
    transform: translate(-50%, -50%);
    border-radius: 8px;
}

.content_pop_for_confirm.add_on {
    display: flex;
}


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


.container_quick_button_warning_confirm_user {

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

.container_quick_text_warning_confirm_user {
    width: 100%;
    color: white;
    height: 50%;
    font-family: 'Times New Roman', Times, serif;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 17px;
}


.content_container_confirm_action_quick_user {

    width: 100%;

    height: 100%;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #202020;
    justify-content: space-around;
    animation: hudIn 0.6s ease-out forwards;

}


.__for_confirm_user_access_checkbox-wrapper {
    display: flex;
    align-items: center;
}

.__for_confirm_user_access_checkbox-label {
    cursor: pointer;
    width: 25px;
    height: 25px;
    border: 2px solid #ccc;
    border-radius: 6px;
    display: inline-block;
    position: relative;
    margin-bottom: 10px;
    transition: background-color 0.3s ease;
}

.__for_confirm_user_access_checkbox-input {
    display: none;
}

.__for_confirm_user_access_checkbox-input:checked+.__for_confirm_user_access_checkbox-label {
    background-color: #f9c9d5;
    border-color: #f9c9d5;
}

.__for_confirm_user_access_checkbox-label::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 9px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    opacity: 0;
    transform: rotate(45deg);
    transition: opacity 0.2s;
}

.__for_confirm_user_access_checkbox-input:checked+.__for_confirm_user_access_checkbox-label::after {
    opacity: 1;
}



.__capo-popup {
    position: absolute;
    width: 400px;
    height: 200px;
    background: white;
    color: white;
    transform: scaleY(0);
    transform-origin: top center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    /* border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px; */
    /* Menor que o painel */
    overflow: hidden;
    padding: 10px;
    z-index: 1;
    pointer-events: none;
    transition: transform 0.5s ease-in-out;

}

.verticalVersion .container-elements-capo {

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

}

.only_one_transition {
    transition: none;
}


.__capo-popup-Vertical {
    position: absolute;
    max-width: 250px;
    height: 400px !important;
    background: white;
    color: white;
    transform-origin: left center;
    transform: scale(0);
    z-index: 1;
    /* Menor que o painel */
    overflow: hidden;
    padding: 10px;
    pointer-events: none;
    transition: transform 400ms ease-in-out, opacity 1s ease-in-out;
    display: flex;
    align-items: center;
    z-index: 99999 !important;
    transform-origin: left center;
    pointer-events: auto;
    visibility: visible;
    opacity: 0;
}

.__capo-popup-Vertical.verticalVersion {
    transform: scaleX(1);
    opacity: 1;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}


.__capo-popup.open {
    transition: transform 0.4s ease-in-out, height 0.4s ease-in-out;
    transform: scale(1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    transform-origin: top center;
    pointer-events: auto;
    visibility: visible;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}



.verticalVersion .__colors_capo_popup {
    min-width: 80%;
    height: 250px;

}


.verticalVersion .container_colors_capo_change {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 40%;
}


.quick_text_with_br {
    color: black;
}


.dark-mode_capo {
    background-color: #202020;
}

.light-mode_capo {
    background-color: white;
}


.quick_text_with_br .dark-mode_capo {
    color: white;
}





.painel_content_buttons.esse {
    width: 50px !important;
    height: 50px !important;
    display: flex;
    align-items: center;
    /* border-radius: 100%; */
    justify-content: center;
    text-align: center;
    user-select: none;

}

.painel_content_buttons.verticalAnimation {
    width: 50px !important;
    height: 50px !important;
    transition: height 1s ease-in-out;
    will-change: height;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    user-select: none;

}

.text-container-capo-config {
    display: flex;
    height: 30px;
    /* border: 2px solid red; */
    width: 100%;
    text-align: center;
    align-items: center;
    justify-content: center;

}

.config_text_visual_capo {
    font-family: "Exile", system-ui;
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: black;

}

.__opacity_config_switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.__opacity_config_switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

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

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

/* .__opacity_config_switch input:checked+.__opacity_config_slider {
    background-color: #4CAF50;
} */

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

.__opacity_config_popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    display: none;
    z-index: 9999;
    min-width: 200px;
    text-align: center;
    transition: opacity 0.3s ease;
}

.__opacity_config_popup.open {
    display: block;
}






.__colors_capo_switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.__colors_capo_switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

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

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

/* .__colors_capo_switch input:checked+.__colors_capo_slider {
    background-color: #4CAF50;
} */

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

.__colors_capo_popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    display: none;
    z-index: 9999;
    min-width: 350px;
    height: 300px;
    text-align: center;
    transition: opacity 0.3s ease, background-color 1s ease-in-out;
}

.__colors_capo_popup.open {
    display: flex;
    align-items: center;
    flex-direction: column;
    transition: background-color 1s ease-in-out;
    justify-content: space-around;
}

.__vertical_capo_switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.__vertical_capo_switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

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

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

/* .__vertical_capo_switch input:checked+.__vertical_capo_slider {
    background-color: #4CAF50;
} */

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

.__vertical_capo_popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    display: none;
    z-index: 9999;
    min-width: 200px;
    text-align: center;
    transition: opacity 0.3s ease;
}

.__vertical_capo_popup.open {
    display: block;
}


.index_for_active:active {

    border-radius: 8px;
    padding: 10px;
    transform: scale(1.6);
}

.index_29_active {

    border-radius: 8px;
    padding: 10px;

}


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



.verticalVersion .label_text_elements_align {
    width: 50%;
    height: 100%;

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

.label_text_elements_align {
    width: 100%;
    height: 70px;

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

.container_label_capo_elements {

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







.__editor_capo_switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.__editor_capo_switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

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

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

/* .__editor_capo_switch input:checked+.__editor_capo_slider {
    background-color: #4CAF50;
} */

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

.__editor_capo_popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    display: none;
    z-index: 9999;
    min-width: 200px;
    text-align: center;
    transition: opacity 0.3s ease;
}

.__editor_capo_popup.open {
    display: block;
}


.light-mode-change-capo {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(211, 211, 211, 0.534);
    width: 40%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 1px 1px 11px 1px 1px 1px 11px 1px rgba(211, 211, 211, 0.534);
}

.dark-mode-change-capo {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #202020;
    width: 40%;
    height: 100%;
    border-radius: 8px;
    border: 1px solid white;
    box-shadow: 1px 1px 1px white;

}


.close_capo_popup_colors {
    background-color: red;
    border-radius: 100%;
    font-size: 9px;
    width: 20px;
    font-weight: bolder;
    text-shadow: 1px 1px 1px white;
    position: absolute;
    top: 5px;
    right: 5px;
    height: 20px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 1px 1px 1px 1px black;
}

/* .close_capo_popup_colors:active {
    transform: translateY(-2px);
} */






.container_colors_capo_change {

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


.change_colors_circle_active {

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

.active_1 {

    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: #F20505;
    box-shadow: 1px 1px 1px 1px #101128;
}

.active_2 {

    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: #711673;
    box-shadow: 1px 1px 1px 1px #101128;
}

.active_3 {

    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: #F25E95;
    box-shadow: 1px 1px 1px 1px #101128;
}

.active_4 {

    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: #F25F29;
    box-shadow: 1px 1px 1px 1px #101128;
}

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

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

.__capo-popup-Vertical .container-elements-capo {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;
}



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

.__capo-popup-Vertical .container-elements-capo {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;

}

.container-elements-capo {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;


}




.p_element_capo_style {
    font-family: "Ancizar Serif", serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}


.container_active_action_capo {

    height: 50px;
    width: 50px;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.4s;
    animation: simple 0.5s ease-in-out;

}

.container_active_action_capo.active {
    background-color: rgba(0, 0, 0, 0.651);
}


.change_slide_color_action {
    display: inline-block;
    width: 50px;
    height: 25px;
    background-color: #ccc;
    /* cor padrão */
    border-radius: 999px;
    transition: background-color 0.3s;
}

input:checked+.change_slide_color_action {
    background-color: var(--checked-color, green);
}


.transicao-left {
    transition: left 1s ease-in-out !important;
}

.left_transition_element {
    transition: left 1s ease !important;
}


.top_transition_element {
    transition: top 1s ease, height 0.4s ease-in-out !important;
}



@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }

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

.shake {
    animation: shake 0.3s ease;
}


.For_Vertical {
    font-family: 10px;
}


#customRangeContainer {
    width: 200px;
    height: 30px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

#customRangeTrack {
    width: 100%;
    height: 6px;
    background: #ccc;
    position: relative;
    border-radius: 3px;
}

#customRangeThumb {
    width: 14px;
    height: 14px;

    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 100%;
    /* Posição inicial */
    transition: background-color 0.3s ease;
}

.pink-radius {
    background-image: linear-gradient(to bottom, #F28A2E, #E195AB);
    box-shadow: 1px 1px 1px 1px #ff346d;

}

.blue-radius {
    background-image: linear-gradient(to bottom, #700e2d, #380010);
    box-shadow: 1px 1px 1px 1px #000000;

}

.red-radius {
    background-image: linear-gradient(to bottom, #b90e05, black);
    box-shadow: 1px 1px 1px 1px #b60000;

}

.orange-radius {
    background-image: linear-gradient(to bottom, #ff5100, #692100);
    box-shadow: 1px 1px 1px 1px #ff5100;
}

.white-radius {
    background-image: linear-gradient(to bottom, rgb(255, 255, 255), rgb(165, 164, 164));
    box-shadow: 1px 1px 1px 1px #fffbff;
}

.purple-radius {
    background-image: linear-gradient(to bottom, black, #000000);
    box-shadow: 1px 1px 1px 1px #858585;
}

.dark-mode .white-container {
    height: 50%;
    width: 45%;
    border-radius: 9px;
    background-color: white;
    color: rgb(3, 46, 5);
    box-shadow: 1px 1px 11px 1px rgba(233, 233, 233, 0.705);

}


.light-mode .red-radius {
    background-image: linear-gradient(to bottom, #ff5200, #ffa115);
    box-shadow: 1px 1px 1px 1px #000000;

}


.light-mode .orange-radius {
    background-image: linear-gradient(to bottom, #006b17, #00fb13);
    box-shadow: 1px 1px 1px 1px #000000;
}


.light-mode .white-radius {
    background-image: linear-gradient(to bottom, #000000, #656363);
    box-shadow: 1px 1px 1px 1px #000000;
}


.light-mode .purple-radius {
    background-image: linear-gradient(to bottom, #7465ff, #2816cc);
    box-shadow: 1px 1px 1px 1px #000000;
}







.custom-card-4 {
    border: 2px solid red;
    position: absolute;
    object-fit: cover;
    left: 0;
    top: -60px !important;
    right: 0;
    height: 600px !important;
    transform: scale(1.1) !important;
    bottom: 0;
    width: 100%;
    height: 100%;
}


.from-youtube {
    transform: scale(1.1) !important;
    transition: transform 1.5s ease-in-out;
}

.from-vimeo {
    transform: scale(1.1) !important;
    transition: transform 1.5s ease-in-out;

}

.from-dailymotion {
    transform: scale(1.1) !important;
    transition: transform 1.5s ease-in-out;
}


.content-downlaad-space {

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

}


.Content-downlaad-space-1 {

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



}


.p-style-back-class-audio {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    overflow: hidden;
    height: 80%;
    width: 100%;
    font-family: 'Times New Roman', Times, serif !important;
    font-size: 7px !important;
    text-align: justify;
    line-height: 28px;
    padding: 5px;
    color: white;
    background: #161C26;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;


}


.download-button-audios-container {
    z-index: 999 !important;
    color: black;
    width: 90px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    box-shadow: 1px 1px 1px 1px #F24B4B;
    font-family: sans-serif;
    font-weight: 600;
    text-align: center;
    font-size: 6px !important;

}

.head_seat {
    width: 20px;
    height: 20px;
    background-image: url('./headset.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}




.__for_file_manager-letter-image {
    user-select: none;
    text-decoration: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background: transparent !important;
    outline: none;
    transform: translate(-50%, -50%) translateZ(-1000px) rotateY(0deg);
    animation: __for_file_manager-flyAndSpin 3s forwards;
}

@keyframes __for_file_manager-flyAndSpin {
    0% {
        transform: translate(-50%, -50%) translateZ(-1000px) rotateY(0deg);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) translateZ(0) rotateY(1080deg);
        opacity: 1;
    }
}

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

.__for_file_manager-animated-mail .__for_file_manager-body {
    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;
}

.__for_file_manager-animated-mail .__for_file_manager-top-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;
}

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

.__for_file_manager-animated-mail .__for_file_manager-left-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;
}

.__for_file_manager-animated-mail .__for_file_manager-letter {
    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;
}

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

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

.__for_file_manager-letter-context {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: auto;
    overflow: visible;

}

#sup {

    width: 100%;
    height: 100px;
}

.__for_file_manager-letter-stamp {
    margin-top: 30px;
    margin-left: 120px;
    height: 30px;
    width: 30px;
    will-change: opacity;
    opacity: 0.3;
}

.__for_file_manager-letter-image.__for_file_manager-open .__for_file_manager-animated-mail {
    transform: translateY(10px);
    display: flex;
    will-change: transform;
}

.__for_file_manager-letter-image.__for_file_manager-open .__for_file_manager-top-fold {
    transition: transform 0.4s, z-index 0.2s;
    will-change: transition, transform;
    transform: rotateX(180deg);
    z-index: 0;
}

.__for_file_manager-letter-image.__for_file_manager-open .__for_file_manager-letter {
    width: 97%;
    position: absolute;
    top: 180px;
    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 */
}

.__for_file_manager-agradecimento-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 */
}

.__for_file_manager-overlay-feedback {
    display: none;
    background-color: rgba(0, 0, 0, 0.7);
    height: 100%;
    width: 100%;
    position: absolute;
}

/* <label class="checkbox-container">
<input type="checkbox" id="painel-checkbox-hide">
<span class="custom-checkbox"></span>
</label> */


.overlay_pop_up_indice_text {
    display: none;
    grid-template-columns: repeat(2, 1fr);
    /* 2 colunas lado a lado */
    gap: 20px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.9);
    border-radius: 12px;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: absolute;
    font-family: Arial, sans-serif;
    overflow-x: hidden !important;
}

.result-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.text_and_index {

    border: 1px solid #ddd;
    box-shadow: 1px 1px 11px 1px white;
    border-radius: 8px;
    height: 250px;
    color: rgb(255, 255, 255);
    width: 190px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    text-align: justify;
    background: transparent;
}


.value_index_text {
    background-color: #202020;
    border-radius: 8px;
    height: 50px;
    width: 190px;
    font-size: 0.9em;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}



.gyp {

    height: 100%;
    width: 100%;
    font-size: 16px;
    line-height: 33px;
    padding: 10px;
    font-family: 'Times New Roman', Times, serif;

}

.found {
    text-transform: capitalize;
    font-weight: 600;
    font-size: 17px;
    font-family: sans-serif;
    text-align: center;
    width: 100%;

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

}

.continuation {

    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 80%;
    padding: 10px;
    text-align: center;
    text-shadow: 1px 1px 1px rgb(241, 188, 89);
    line-height: 33px;
    text-transform: capitalize;
}


.input-wrapper {
    width: 85%;
    /* ou defina uma largura fixa como 250px */
    overflow: hidden;
    position: relative;
    border-radius: 8px;

}

.input-slider {
    display: flex;
    align-items: center;
    justify-content: space-around;
    transition: transform 0.4s ease-in-out;
    width: 100%;
    /* 2 inputs, 100% cada */
}

.input-slider input {
    flex: 0 0 100%;
    border: none;
    padding: 10px;
    background: #f1d604;
    font-size: 16px;
}

button#nextInputBtn {
    display: flex;
    background-image: url('./right-white.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    font-weight: bolder;
    color: white;
    border: none;
    width: 27px;
    height: 27px;
    padding: 15px;
    /* box-shadow: 1px 1px 1px white; */

}



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


.__folder_mp3_player {
    position: absolute;
    background: #202020;
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 0 20px white;
    text-align: center;
    max-width: 350px;
    height: 500px;
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    transform: scale(1);
}

.__folder_mp3_player.active {
    position: absolute;
    background: #202020;
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 0 20px white;
    text-align: center;
    max-width: 350px;
    height: 350px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    transform: scale(1);
}



.__folder_mp3_title {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.__folder_mp3_wave {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* <- faz as barras crescerem de baixo */
    margin: 1rem 0;
}

.__folder_mp3_bar {
    width: 4px;
    height: 100%;
    background: #38bdf8;
    margin: 0 2px;
    animation: __folder_mp3_pulse 1s infinite ease-in-out;
    animation-play-state: paused;
}

.__folder_mp3_bar:nth-child(2) {
    animation-delay: 0.1s
}

.__folder_mp3_bar:nth-child(3) {
    animation-delay: 0.2s
}

.__folder_mp3_bar:nth-child(4) {
    animation-delay: 0.3s
}

.__folder_mp3_bar:nth-child(5) {
    animation-delay: 0.4s
}

@keyframes __folder_mp3_pulse {

    0%,
    100% {
        height: 20%
    }

    50% {
        height: 100%
    }
}

.__folder_mp3_controls {
    display: flex;
    justify-content: space-around;
    margin-top: 1rem;

    width: 100%;
}

.__folder_mp3_btn {
    background: #0ea5e9;
    border: none;
    padding: 0.6rem;
    border-radius: 100%;
    cursor: pointer;
    color: white;
    font-size: 1rem;
    width: 40px;
    height: 40px;
    transition: background 0.3s;
}

.__folder_mp3_btn:hover {
    background: #0284c7;
}

.__folder_mp3_active {
    background: #22c55e !important;
}



.close_mp3_folder_element {
    background-color: red;
    height: 20px;
    width: 20px;
    border-radius: 100%;
    position: absolute;
    top: 10px;
    right: 10px;
    box-shadow: 1px 1px 1px 1px black;
}






.config_mp3_container_element {
    height: 20px;
    width: 20px;
    border-radius: 100%;
    position: absolute;
    left: 10px;
    top: 10px;
    box-shadow: 1px 1px 1px 1px black;
    background-color: purple;
}


.pop_up_folder_element_mp3 {
    position: absolute;
    background-color: white;
    width: 250px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    visibility: hidden;
    opacity: 0;
    transform: scale(0);
    transition: none;
    /* será animado via keyframes */
    top: 50px;
    left: 30px;
}

.pop_up_folder_element_mp3.show {
    visibility: visible;
    animation: popupAnimationIn 600ms ease forwards;
}

.pop_up_folder_element_mp3.hide {
    animation: popupAnimationOut 400ms ease forwards;
}



@keyframes popupAnimationOut {
    0% {
        transform: scale(1) rotate(0deg) translateY(0);
        opacity: 1;
    }

    100% {
        transform: scale(0) rotate(-10deg) translateY(20px);
        opacity: 0;
    }
}

@keyframes popupAnimationIn {
    0% {
        transform: scale(0) rotate(0deg) translateY(0);
        opacity: 0;
    }

    30% {
        transform: scale(1.1) rotate(5deg) translateY(-10px);
        opacity: 1;
    }

    60% {
        transform: scale(0.95) rotate(-4deg) translateY(5px);
    }

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

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



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


.element_color_ar {
    height: 25px;
    width: 25px;
    border-radius: 100%;
}


.ar_element {
    border-radius: 100%;

    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ar_element.active {
    background-color: rgba(0, 0, 0, 0.6);
}

.cor_1 {
    background-color: red;
    box-shadow: 1px 1px 1px 1px black;
}


.cor_2 {
    background-color: purple;
    box-shadow: 1px 1px 1px 1px black;
}

.cor_3 {
    background-color: #00aaff;
    box-shadow: 1px 1px 1px 1px black;
}

.cor_4 {
    background-color: #10f736;
    box-shadow: 1px 1px 1px 1px black;
}


.__folder_mp3_progress_container {
    width: 100%;
    height: 6px;
    background-color: #ccc;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 10px;
    position: relative;
}

.__folder_mp3_progress {
    height: 100%;
    width: 0%;
    background-color: #007bff;
    border-radius: 3px;
    transition: width 0.2s linear;
}



.container_audio_mp3 {
    border: 2px solid blue;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}


.__for_mp3_carousel_container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    display: flex;
    padding: 2rem 0;
    gap: 1rem;
    align-items: center;
    height: 400px;
    width: 100%;
    max-width: 90vw;

}


.__for_mp3_card {

    scroll-snap-align: center;
    flex: 0 0 auto;
    width: 200px;
    height: 280px;
    background: #222;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.6s ease, opacity 0.6s ease;
    opacity: 0.6;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    scroll-snap-align: center;
    flex: 0 0 auto;
    width: 200px;
    height: 280px;
}

.__for_mp3_card.__for_mp3_active {
    transform: scale(1.3);
    opacity: 1;
    background: #333;
}

.__for_mp3_card_content {
    padding: 1rem;
}

.__for_mp3_folder_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #222;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: scale(0);
    transition: transform 1s ease;
    pointer-events: none;
    opacity: 0;
}

.__for_mp3_folder_overlay.__for_mp3_visible {
    transform: scale(1);
    pointer-events: auto;
    opacity: 1;
}

.__for_mp3_folder_content_inner {
    padding: 2rem;
    text-align: center;
    width: 90%;
    max-width: 600px;
    background: #333;
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.7);
}

.__for_mp3_close_btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
}

.__for_mp3_text_container {
    margin-top: 1rem;
    min-height: 2rem;
    font-size: 1.1rem;
    text-align: center;
}









.__new_carousel {
    position: relative;
    width: 80%;
    max-width: 600px;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.__new_slides-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.__new_slide {
    min-width: 100%;
    height: 300px;

    color: white;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: background 0.3s;
}


.__new_nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 2rem;
    padding: 0.3em 0.6em;
    cursor: pointer;
    z-index: 2;
    transition: background 0.3s;
}

.__new_nav:hover {
    background: rgba(255, 255, 255, 0.4);
}

.__new_left {
    left: 10px;
}

.__new_right {
    right: 10px;
}


.capa_mp3_1 {
    background-image: url('../Imagens/Capas/it\'s\ all.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}



.change_background {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.5s ease;
}

.container_icon_book_mark_element {
    height: 22px !important;
    width: 22px !important;
    right: 10px;
    top: 90px;
    position: absolute;
    z-index: 999;
    display: flex;
}





.icon-book-mark {
    background-image: url('../Imagens/Estrutural/bookmark.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 9999;
    height: 100%;
    width: 100%;
    display: none !important;
}

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

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


.adjust_position {
    left: 50% !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    position: absolute !important;
    /* ou fixed, dependendo do seu caso */
    transition: all 1s ease-in-out !important;
}


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

    20% {
        background-color: #ff4d4d;
        transform: translateX(-4px);
    }

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

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

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

    100% {
        background-color: #ff4d4d;
        transform: translateX(0);
    }
}

.erro {
    animation: erroAnimacao 0.6s ease;

}

.__fox_warning_user {
    display: none;
    height: 350px;
    width: 350px;
    background-color: #202020;
    animation: none;
    box-shadow: 1px 1px 11px 1px white;
    border-radius: 20px;
    position: absolute;
}


.__fox_warning_user.active {
    display: flex;
    animation: colorShiftGlitch 1.5s ease-in-out;
}


.__fox_container_element {

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

.__fox-icon {
    height: 40px;
    width: 40px;
    background-image: url('../Imagens/Estrutural/angry.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.__fox-text-element {

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

.__fox-text {
    padding: 10px;
    font-size: 15px;
    font-family: sans-serif;
    text-align: justify;
    line-height: 28px;
}

.__fox-check-label {
    align-items: center;
    justify-content: space-around;
    display: flex;
    width: 70%;
}

.__fox-button {

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


.fox-icon-clean {
    background-image: url('');
}




.clean_fox_elements {
    display: none;
    background-color: #1f1f1f;
    height: 300px;
    width: 300px;
    border-radius: 15px;
    position: absolute;
    transition: none;
    /* Garante que o estado base seja imediato */


}

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

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


/* Quando visível */
.clean_fox_elements.active {
    display: flex;
    animation: aparecer 0.4s ease forwards;
}



.icon_trash_disable_fox {
    height: 20px;
    width: 20px;
    background-image: url('../Imagens/Estrutural/bin.png');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 10px;
    right: 10px;
    box-shadow: 1px 1px 1px 1px #5a1515;
    border-radius: 100%;



}

.wish_clean_elements {

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

.icon_trash_disable_fox.active {
    transform: translateY(-2px);

}

.fox-icon-clean {
    height: 40px;
    width: 40px;
    background-image: url('../Imagens/Estrutural/bin.png');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.text-element-clean-fox {

    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
}

.wish-text {

    width: 100%;
    height: 100%;
    text-align: justify;
    line-height: 33px;
    padding: 10px;
}

.light-mode .wish-text {
    color: white;
}


.fox-wish-yes-or-no {

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

.yes-fox-clean {
    border: none;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 10px;
    width: 60px;
}

.no-fox-clean {
    border: none;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 10px;
    width: 60px;
}


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

    20% {
        transform: scale(1.05);
        opacity: 1;
    }

    40% {
        transform: scale(0.95);
    }

    60% {
        transform: scale(1);
    }

    80% {
        transform: scale(1.02);
    }

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



.disappear {

    animation: pulsoDesaparecer 1s ease forwards;
}

.icon_trash_disable_fox.waiting {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}



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

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

.fadeOutQuickAccess {
    animation: fadeOutQuickAccess 0.4s ease forwards;
}


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

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

.merge {

    animation: merge_opacity_and_scale 0.9s ease-in-out;
    transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out;
}


.question_fox_element-action {
    height: 20px;
    width: 20px;
    background-image: url('../Imagens/Estrutural/question-mark-1.png');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 10px;
    left: 10px;
    box-shadow: 1px 1px 1px 1px #5a1515;
    border-radius: 100%;
}


.fox_mark_painel_colors {}




.painel-indicators {

    position: relative;
    bottom: 0;
    width: 100px;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    gap: 10px;
    left: 15%;

}

.indicator {
    width: 7px;
    height: 7px;
    background-color: #bbb;
    border-radius: 50%;
    transition: background-color 0.3s;
}

.indicator.active {
    background-color: transparent;
}



.__literaturecarousel-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.__literaturecarousel-viewport {
    width: 200px;
    /* largura visível */
}

.__literaturecarousel-container {
    display: flex;
    transition: transform 0.5s ease;
}

.__literaturecard {
    width: 200px;
    height: 300px;
    background: #333;
    border-radius: 20px;
    margin: 0 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 1;
    transform: scale(0.9);
    transition: transform 0.7s;
    will-change: transform;
}

.__literaturecard.__literatureactive {
    transform: scale(1.4);


}

.__literaturecontrols {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
}

.__literaturebtn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 2rem;
    padding: 10px 20px;
    cursor: pointer;
    pointer-events: auto;
}

.__literaturebtn:disabled {
    opacity: 0.2;
    cursor: default;
}

.__literatureapply-font-btn {
    margin-top: 20px;
    padding: 10px 20px;
    background: #555;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
    display: none;
}

.__literatureapply-font-btn.__literaturevisible {
    display: block;
    margin-top: 100px;
}

.__literaturetext-sample {
    background-color: #202020;
    border-radius: 15px;
    padding: 15px;
    position: absolute;
    top: 10px;
    margin-top: 20px;
    font-size: 0.900rem;
    text-align: center;
}

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

}

.Mahatma_Gandhi {

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

}

.Charles {

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

}


.text-with-font-arial {
    background-color: rgba(0, 0, 0, 0.400);
    font-family: "Noto Serif", serif;
    border-radius: 15px;
    padding: 10px;
    font-size: 13px;
    text-align: justify;
    line-height: 29px;


}


.text-with-font-georgia {
    background-color: rgba(0, 0, 0, 0.400);
    font-family: Georgia, 'Times New Roman', Times, serif;
    border-radius: 15px;
    padding: 10px;
    font-size: 13px;
    text-align: justify;
    line-height: 29px;
}

.text-with-font-courier {
    background-color: rgba(0, 0, 0, 0.400);
    font-family: "Libre Baskerville", serif;
    border-radius: 15px;
    padding: 10px;
    font-size: 13px;
    text-align: justify;
    line-height: 29px;
}

.text-with-font-times {
    background-color: rgba(0, 0, 0, 0.400);
    font-family: 'Times New Roman', Times, serif;
    border-radius: 15px;
    padding: 10px;
    font-size: 10px;
    text-align: justify;
    line-height: 29px;
}

.text-with-font-verdana {
    background-color: rgba(0, 0, 0, 0.400);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    border-radius: 15px;
    padding: 10px;
    font-size: 10px;
    text-align: justify;
    line-height: 29px;
}

.mandela-text-name {

    width: 95%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-style: italic;
    padding: 5px;
    font-size: 10px;

}


.light-mode .mandela-text-name {
    color: white;
    width: 95%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-style: italic;
    padding: 5px;
    font-size: 10px;
}

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

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


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


.light-mode .just-change-color {
    color: white;

}


.light-mode .change-color-text-file {
    color: white;
}




.home_button_modern {
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    background-color: #1a1a1a;
    color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    scroll-snap-align: start;
}


.scroll-view-modern {
    width: 100vw;

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

    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.scroll-view-container {
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: space-around;
    width: 100vw;
    gap: 5px;

    position: relative;
}

.home_button_modern.hidden {
    display: none;
}




.home_button_modern {
    flex: 0 0 16vw;
    height: 80px;
    width: 80px;
    background-color: #1a1a1a;
    color: white;
    border-radius: 8px;
    border: none;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    opacity: 1;
    transition: transform 0.3s;
}

.home_button_modern {
    transition: transform 0.3s, opacity 0.3s;
}

.home_button_modern.enter-left {
    transform: translateX(-100%);
}

.home_button_modern.enter-right {
    transform: translateX(100%);
}

.home_button_modern.enter-active {
    transform: translateX(0%);
}

.home_button_modern.exit-left {
    transform: translateX(-100%);
    opacity: 0;
}

.home_button_modern.exit-right {
    transform: translateX(100%);
    opacity: 0;
}

.home_button_modern.hidden {
    display: none;
}



.btn-icon-home {
    background-image: url('../Imagens/Estrutural/home_icon-radius.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 100%;
    width: 35px;
    height: 35px;
}





.mark-color-sepia-button {
    background-color: #00ff00;
}


.resume-painel-container {
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.resume-painel-element-align {
    background-color: #202020;
    width: 400px;
    height: 500px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

/* Slider horizontal */
.slider-wrapper {
    display: flex;
    width: 200%;
    /* duas telas lado a lado */
    height: 100%;
    transition: transform 0.4s ease-in-out;
}

/* Cada slide */
.slide-tab {
    width: 50%;
    flex-shrink: 0;
    padding: 10px;
    box-sizing: border-box;
}

.resume-container-top,
.resume-container-bottom {
    height: 50%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.Ingrediente-painel,
.Preparo-painel,
.Beneficios-painel {
    width: 35%;
    height: 90%;
    border-radius: 10px;
}

.beneficios-content {
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 18px;
    text-align: center;
}

.capa-ingrediente {
    background-image: url('../Imagens/Capas/ingredientes-capas.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.capa-beneficios-card {
    background-image: url('../Imagens/Capas/Beneficios.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}









.__colors_note-context-menu {
    position: fixed;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000000000000000000000000000000000000000000000000000000000000000000000 !important;
    display: none;
    visibility: visible;
    min-width: 160px;
    animation: __colors_noteFadeIn 0.2s ease-in;

}

@keyframes __colors_noteFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

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

.__colors_note-context-menu ul {
    list-style: none;
    margin: 0;
    padding: 8px 0;
}

.__colors_note-context-menu li {
    padding: 12px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    transition: background-color 0.2s ease;
}

.__colors_note-context-menu li:hover {
    background-color: #f0f0f5;
}

.__colors_note-color-option span {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid #ddd;
}

.__colors_note-context-menu li.__colors_note-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.__colors_note-saved-notes {
    margin-top: 30px;
    padding: 20px;
    border-radius: 8px;
    background-color: #ffffff;
    overflow: auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.__colors_note-saved-notes h2 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0 0 15px;
}

.__colors_note-saved-notes-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    overflow: auto;
    gap: 15px;
}

.__colors_note-saved-note {
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.__colors_note-saved-note p {
    margin: 0;
    background-color: transparent;
    box-shadow: none;
}

::selection {
    background-color: rgba(100, 100, 255, 0.3);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .__colors_note-context-menu {
        min-width: 140px;
        font-size: 13px;
    }

    .__colors_note-context-menu li {
        padding: 10px 16px;
    }

    .__colors_note-saved-notes-container {
        grid-template-columns: 1fr;
    }
}













/* theme_icon_container-overlay */


.Saved_Notas {
    font-size: 25px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: #333;
    height: 70px;


    text-align: center;
}


.container-notes-colors {
    border: 2px solid red;
    width: 100%;
    height: 100%;
}






.overlay-notes-modern {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 9999 !important;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.6);
    transition: transform 1s ease-in-out;

}

.overlay-notes-modern.removeShow {
    position: fixed;
    height: 100%;
    width: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.6);
    animation: Esmaecer_note_container 1s ease-in-out;

}


.overlay-notes-modern.show {
    display: flex;
}




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


.border_colors_note {

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


.border_colors_note h2 {
    color: black;

    width: 70%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font-family: sans-serif;
    font-size: 20px;
    font-weight: 700;
    padding: 5px;
}


.note-colors-element {

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

}

.Notas-coloridas-container {
    width: 370px;
    height: 220px;
    position: relative;
    background-color: white;
    flex-direction: column;
    display: none;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 1s ease-in-out;
}


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

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


}

@keyframes coloredNotesContainer {
    0% {
        transform: scale(0.1);

    }

    100% {
        transform: scale(1);

    }
}

.Notas-coloridas-container.show {
    display: flex;
    animation: coloredNotesContainer 1s ease-in-out;
    transition: transform 1s ease-in-out;

}

.Container_elements_colors_colorido {
    width: 80px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 10px;
    justify-content: space-around;
    transition: background-color 0.2s ease-in-out;
}


.active_color {
    transform: scale(1.1);
    transition: transform 0.2s ease;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    color: white;
}



.Icon_note_app {
    height: 35px;
    width: 35px;
    background-image: url('../Imagens/Estrutural/note-app.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.Icon_note_app-vermelho {
    height: 35px;
    width: 35px;
    background-image: url('../Imagens/Estrutural/note-app-vermelho.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.Icon_note_app-purple {
    height: 35px;
    width: 35px;
    background-image: url('../Imagens/Estrutural/note-app-purple.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.Icon_note_app-verde {
    height: 35px;
    width: 35px;
    background-image: url('../Imagens/Estrutural/note-app-verde.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.Icon_note_app-amarelo {
    height: 35px;
    width: 35px;
    background-image: url('../Imagens/Estrutural/note-app-azul.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.text-icon-app-colored-note {
    color: black;
    font-size: 13px;
}





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

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


.container_aparecer_color.show {
    display: flex;
    animation: apperance 1s ease-in-out;

}


.container_aparecer_color {
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    background-color: white;
    overflow: scroll;
    position: absolute;
    padding: 10px;
    bottom: 0;
    transition: height 1s ease-in-out;
    height: 140px;
    width: 100%;
}

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

    30% {
        transform: translateY(-5px);
    }

    60% {
        transform: translateY(3px);
    }

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

.bounce-animation {
    animation: bounceText 0.2s ease;
}


.minimizar_maximizar {
    background-image: url('../Imagens/Estrutural/upload.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 10px;
    right: 15px;
    width: 32px;
    height: 32px;
    transition: transform 1s ease-in-out;

}


.__colors_noteChangeCategoryMenu_style {
    justify-content: space-between;
    width: 100%;
    display: flex;


}


#__colors_noteChangeCategoryMenu {
    width: 280px;

    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    height: 100px;
}

.all-elements-color-category {

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


.category-option {
    width: 25px;
    height: 25px;
    border-radius: 100%;
    background-color: red;
    box-shadow: 1px 1px 1px 1px black;

}

.container-li-category {

    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;

}


.__colors_note-color-option {
    transition: background-color 0.3s ease;
    color: #fff;
    /* Ensure text is readable on black background */
}

.__colors_note-color-option span {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border: 1px solid #fff;
    /* Optional: add border to make color swatch visible on black */
}


.Colored_Notes {
    font-family: "PT Serif", serif;
    font-weight: 400;
    font-style: normal;
}


.close_icon_clored::before {
    content: '';
    position: absolute;
    top: -30px;
    left: -30px;
    right: -30px;
    bottom: -30px;
    z-index: 1;
}

.close_icon_clored {
    animation: pendulo 5s ease-in-out infinite;
    width: 35px;
    height: 35px;
    background-image: url('../Imagens/Estrutural/close.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    right: 10px;
    top: 5px;
}

@keyframes pendulo {
    0% {
        transform: rotate(-20deg);
    }

    50% {
        transform: rotate(20deg);
    }

    100% {
        transform: rotate(-20deg);
    }
}



.gift {
    position: relative;
    width: 150px;
    height: 150px;
    background: #d2232a;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.gift:before,
.gift:after {
    content: '';
    position: absolute;
    background: #fff;
}

/* Faixa horizontal */
.gift:before {
    width: 20px;
    height: 150px;
    left: 65px;
    top: 0;
}

/* Faixa vertical */
.gift:after {
    width: 150px;
    height: 20px;
    left: 0;
    top: 65px;
}

.ribbon {
    position: absolute;
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    top: -25px;
    left: 45px;
    z-index: 10;
}

/* Laços grandes com dobras */
.ribbon:before,
.ribbon:after {
    content: '';
    position: absolute;
    width: 70px;
    height: 40px;
    background: #fff;
    border-radius: 20px 20px 0 0;
    transform-origin: bottom;
    z-index: -1;
}

.ribbon:before {
    transform: rotate(-25deg);
    left: -45px;
    top: -10px;
    box-shadow: inset -8px 8px 0 rgba(0, 0, 0, 0.1);
    /* Dobra esquerda */
}

.ribbon:after {
    transform: rotate(25deg);
    right: -45px;
    top: -10px;
    box-shadow: inset 8px 8px 0 rgba(0, 0, 0, 0.1);
    /* Dobra direita */
}

/* Caudas do laço */
.tail {
    position: absolute;
    width: 20px;
    height: 40px;
    background: #fff;
    top: 70px;
    z-index: -1;
}

.tail.left {
    transform: rotate(-30deg);
    left: 20px;
    box-shadow: inset -5px 5px 0 rgba(0, 0, 0, 0.1);
    /* Dobra da cauda esquerda */
}

.tail.right {
    transform: rotate(30deg);
    right: 20px;
    box-shadow: inset 5px 5px 0 rgba(0, 0, 0, 0.1);
    /* Dobra da cauda direita */
}

.page-content-for-present {
    background: #222;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.light-mode .page-content-for-present {
    background: #ffffff;
}


/* Estilo inicial do pop-up (oculto) */
.pop-up-gift {
    display: none;
    position: absolute;
    /* Oculto por padrão */
    top: 50%;
    width: 95%;
    height: 99%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #fff;
    overflow: auto;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    opacity: 0;
    animation: slide-in 0.5s forwards;
    /* Animação de abertura */
}

/* Animação de slide-in */
@keyframes slide-in {
    from {
        opacity: 0;
        transform: translate(-50%, -60%);
    }

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

/* Estilo do botão de fechar */
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #333;
}

.next_access_container_ {
    background-color: #F27405;
    border: none;
    padding: 15px 15px;
    border-radius: 10px;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    box-shadow: 1px 1px 1px 1px #D93D04;
    width: 120px;
    font-size: 14px;
}

.next_access_container_mais {
    background-color: #D93D04;
    border: none;
    padding: 15px 15px;
    border-radius: 10px;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    box-shadow: 1px 1px 1px 1px #F27405;
    width: 120px;
    font-size: 14px;
}

.next_access_container_:active {
    transform: translateY(-2px);
}



.x-close-__config_set_popup {
    background-color: black;
    color: #F2AE30;
    box-shadow: 1px 1px 1px 1px #0D0D0D;
    position: absolute;
    top: 10px;
    padding: 10px;
    border-radius: 100%;
    right: 10px;
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 25px;
    font-size: 11px;
    font-weight: bold;
    font-family: sans-serif;
}




.__config_set_popup {
    display: flex;
    width: 400px;
    max-width: 400px;
    flex-direction: column-reverse;
    height: 500px;
    z-index: 9999 !important;
    position: relative;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.__config_set_tabs-sidebar {
    background-color: #1a1a1a;
    align-items: center;
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding: 1rem;
    overflow: hidden;
}

.__config_set_tabs-sidebar-2 {
    background-color: #1a1a1a;
    align-items: center;
    width: 100%;
    display: none;
    justify-content: space-around;
    padding: 1rem;

    overflow: hidden;
}

.__config_set_tab-button {
    background: none;
    border: none;
    color: white;
    padding: 0.75rem 1rem;
    width: 30%;
    text-align: center;
    font-size: 0.95rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.3s;
}

.__config_set_tab-button:hover,
.__config_set_tab-button.__config_set_active {
    background-color: #333;
    color: #F29B30;
}

.__config_set_tab-content-area {
    flex: 1;
    background-color: #fff;
    overflow: hidden;
}

.__config_set_tab-content {
    height: 100%;
    width: 100%;
    display: none;
    animation: __config_set_fadeIn 0.3s ease-in-out;
}

.__config_set_tab-content.__config_set_active {
    display: block;
    position: relative;
}

@keyframes __config_set_fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.__config_set_element_aba-1 {
    border: 2px solid red;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

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

.__config_set_p_aba_1 {
    font-family: 'Times New Roman', Times, serif;
    width: 80%;
    line-height: 33px;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    text-align: justify;
    border-radius: 10px;
}

.__config_set_element-rotate-engine {
    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);
    }
}

.__config_set_painel-indicators {
    display: flex;
    justify-content: center;
    position: relative;
    gap: 10px;
    overflow: hidden !important;
    margin-top: 10px;
    background-color: rgba(0, 0, 0, 0.9);
    padding: 20px;
    border-radius: 10px;
}

.__config_set_indicator {
    width: 10px;
    height: 10px;
    background-color: #bbb;
    border-radius: 50%;
    transition: background-color 0.3s;
}

.__config_set_toggle-switch_fonts {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.__config_set_toggle-switch_fonts input {
    opacity: 0;
    width: 0;
    height: 0;
}

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


.overlay_pop_up_config_settings_once_time {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    z-index: 2;
    align-items: center;
    justify-content: center;

}


.overlay_pop_up_config_settings_once_time.show {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999 !important;
}


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

input:checked+.__config_set_slider_fonts {
    background-color: #F2AE30;
}

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

.__config_set_indicator.__config_set_active {
    background-color: #F2AE30;
}

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


.Receptacle_sounds {
    width: 100%;
    height: 100%;

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


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

.Receptacle_marcação {
    width: 32px;
    height: 32px;
    background-image: url('../Imagens/Estrutural/bookmark.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}

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


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

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

.Receptacle_select_fox {
    width: 32px;
    height: 32px;
    background-image: url('../Imagens/Estrutural/fox-voz.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}



.Receptacle_element_style {

    width: 100px;
    height: 150px;
    background-color: #1a1a1a;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
}

.Container-receptacle-1 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;

    transition: transform 1s ease-in-out;
}

.Container-receptacle-2 {
    display: none;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    transform: translateX(100%);
    transition: transform 1s ease-in-out;
    height: 100%;

}


.Container-hidden-Eixo-x {
    display: none;
    justify-content: center;
    position: absolute;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.9);
    width: 100px;
    top: 0;
    height: 50px;
    transform: translateX(100%);
    border-radius: 10px;
}


.sounds_elements_toggle-switch_fonts {
    display: inline-block;
    width: 50px;
    height: 24px;
    position: relative;
}

.sounds_elements_change_fonts_for_toggle {
    opacity: 0;
    width: 0;
    height: 0;
}

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

.sounds_elements_slider_fonts:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: transform 0.3s;
    border-radius: 50%;
}

.sounds_elements_change_fonts_for_toggle:checked+.sounds_elements_slider_fonts {
    background-color: #2196F3;
}

.sounds_elements_change_fonts_for_toggle:checked+.sounds_elements_slider_fonts:before {
    transform: translateX(26px);
}

.side_arrow {
    height: 32px;
    width: 32px;
    background-image: url('../Imagens/Estrutural/right-arrow.png');
    background-position: center center;
    background-size: contain;
    position: absolute;
    bottom: 30px;
    left: 48%;
    background-repeat: no-repeat;
}

.particle_overlay_content {

    width: 100%;
    height: 50%;
    pointer-events: none;
    display: none;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999 !important;
}


.particle {
    position: absolute;
    width: 5px;
    height: 5px;
    background: #F2AE30;
    border-radius: 50%;
    pointer-events: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

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

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

    100% {
        opacity: 0;
        transform: translate(var(--x), var(--y));
    }
}

@keyframes subirDesaparecer {
    from {
        transform: translate(-50%, -50%) translateY(0);
        opacity: 1;
    }

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

.overlay-custom-range-container.close {
    animation: subirDesaparecer 1s ease-in-out;
}

.custom-range-container.show {
    animation: colorShiftGlitch 1s ease-in-out;
}


.custom-range-container {
    width: 300px;
    height: 80px;
    padding: 13px;
    background: #202020;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    z-index: 999 !important;
    pointer-events: auto !important;
    display: flex;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    text-align: center;

}



.custom-range {
    position: relative;
    width: 70%;
    height: 40px;
    touch-action: none;
    /* <- Adicione isso para movimentos touch suaves */
}

.range-track {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 6px;
    width: 0%;
    background: orange;
    border-radius: 3px;
}

.range-thumb {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 0;
    /* Added this for proper left-based positioning */
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    z-index: 10;
    /* <- ESSENCIAL */
}




.element_container_close_changeSize {
    position: absolute;
    bottom: 0;
    width: 95%;

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

.container_x_close_range {
    background-color: #202020;
    box-shadow: 0 0 1px 1px #ccc;
    border-radius: 100%;
    width: 15px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    color: white;
    position: absolute;
    right: 10px;
    top: 10px;
    font-weight: 900;
    height: 15px;
}


.container_text_element_change_font_size_hide {
    width: 100%;

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

.h1_text_container_range {
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 13px;
    font-family: 'Times New Roman', Times, serif;
    width: 50%;
}

#size_hide_text_font {
    text-align: center;
    font-size: 10px;
    margin: 0;
    padding: 0;
    font-family: 'Times New Roman', Times, serif;
}

.overlay-custom-range-container {
    background-color: transparent;
    position: absolute;
    width: 300px;
    height: 150px;

    display: none;
    left: 50%;
    top: 50%;
    align-items: center;
    transform: translate(-50%, -50%);
    justify-content: center;
}

.__skip_checkbox-container {
    display: flex;
    position: absolute;
    left: 10px;
    bottom: 10px;
    align-items: center;
    gap: 10px;
}

.__skip_checkbox-wrapper {
    position: relative;
    display: inline-block;
}

.__skip_checkbox-wrapper input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
}

.__skip_checkbox-custom {
    width: 24px;
    height: 24px;
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.__skip_checkbox-wrapper input:checked+.__skip_checkbox-custom {
    background-color: #007bff;
    border-color: #007bff;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

.__skip_checkbox-custom::after {
    content: "\2713";
    font-size: 16px;
    color: transparent;
    transition: color 0.2s ease;
}

.__skip_checkbox-wrapper input:checked+.__skip_checkbox-custom::after {
    color: #fff;
}

.__skip_checkbox-label {
    font-size: 16px;
    color: #333;
    user-select: none;
}

.__skip_checkbox-wrapper:hover .__skip_checkbox-custom {
    border-color: #007bff;
    transform: scale(1.1);
}

.__skip_checkbox-wrapper input:focus+.__skip_checkbox-custom {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

.__skip_no-animation-text {
    font-size: 20px;
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    color: red;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%, -50%);
    pointer-events: none;
}


.show_home_paragraph {
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    position: absolute;
    color: red;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}

.show_home_paragraph.__skip_show {
    animation: __skip_show_user_text 2s ease-out forwards;
}

@keyframes __skip_show_user_text {
    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%);
    }
}

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

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

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

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

.container_home_text {

    width: 300px;
    height: 70px;
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none !important;
}


.__skip_no-animation-text_home {
    font-size: 20px;
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    color: #39b840;
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);

    opacity: 0;
    pointer-events: none;

}


.calm_down {
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    position: absolute;
    color: #39b840;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-shadow: 1px 1px 1px #39b840;
    opacity: 0;
    pointer-events: none;
}

.p_sumary_alert {
    font-size: 20px;
    font-family: 'Times New Roman', Times, serif;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    text-align: center;
    padding: 40px;
    position: absolute;
    opacity: 0;
    z-index: 999 !important;
    white-space: nowrap;
    pointer-events: none;
    font-weight: 500;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


.show_alert_user {

    border-radius: 8px;
    width: 300px;
    height: 100px;
    display: flex;
    position: absolute;
    pointer-events: none !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 99 !important;
    align-items: center;
    justify-content: center;


}


.p_sumary_alert.__skip_show {
    animation: __skip_show_user_text 3s ease-out forwards;
}





.__skip_no-animation-text.__skip_show {
    animation: __skip_show_user_text 2s ease-out forwards;
}

.calm_down.__skip_show {
    animation: __skip_show_user_text 2s ease-out forwards;
}



.container_spin_loader_inactivity {
    width: 350px;
    height: 350px;
    background-color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
}

.container_inner_inactivity {
    height: 100%;
    width: 100%;
    padding: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
}










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

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




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

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

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

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

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

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

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

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

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








.container-overlay-re-load {
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
}


.container-overlay-re-load.active {
    display: flex;
}


.container-align-2-color-controls {
    width: 75%;

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


.styled-button {
    white-space: nowrap !important;
    min-height: 320px !important;
    min-width: 80px !important;
    border-radius: 10px !important;
}


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


.inactive_user_text_extras {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    line-height: 33px;
    color: white;
    text-align: justify;
    width: 90%;
    padding: 20px;
    font-size: 17px;
    font-family: 'Times New Roman', Times, serif;
}



.__inactivity_warn_user_popup_desactivate_toggle-switch {
    display: inline-block;
    width: 50px;
    height: 24px;
    position: relative;
}

.__inactivity_warn_user_popup_desactivate_input {
    opacity: 0;
    width: 0;
    height: 0;
}

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

.__inactivity_warn_user_popup_desactivate_slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: transform 0.3s;
    border-radius: 50%;
}

.__inactivity_warn_user_popup_desactivate_input:checked+.__inactivity_warn_user_popup_desactivate_slider {
    background-color: #F2A71B;
}

.__inactivity_warn_user_popup_desactivate_input:checked+.__inactivity_warn_user_popup_desactivate_slider:before {
    transform: translateX(26px);
}



.confirm_user_again {
    position: relative;
    animation: angularFold 1s ease-in-out;
    width: 300px;
    height: 250px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    padding: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    background-color: white;
    z-index: 999 !important;
}

.inner_user_container_inactive_desactive {
    height: 100%;
    width: 100%;

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

.container_button_desactive {
    height: 50px;

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

}


.just-confirm-user-action {

    color: black;
    line-height: 33px;
    text-align: justify;
    font-size: 14px;
    padding: 10px;

}


.button_yes-desactive {
    background-color: red;
    width: 70px;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 13px;
    user-select: none;
    transition: transform 0.4s ease;
    box-shadow: 1px 1px 1px 1px rgb(95, 0, 0);
}

.button_no-desactive {
    background-color: rgb(0, 185, 56);
    width: 70px;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 13px;
    user-select: none;
    transition: transform 0.4s ease;
    box-shadow: 1px 1px 1px 1px rgb(0, 49, 15);
}

.button_yes-desactive:active {
    transform: translateY(-2px);
}









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

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

.just_style_warning_user_about_desativation-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%);
}

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

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

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

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

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

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

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

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



.overlay-inner-config-warn {
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;

}



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

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

.__no_action_user_select_about_popup-front {
    display: block;
    position: relative;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: .790rem;
    color: white;
    background: hsl(88.62deg 100% 27.31%);
    will-change: transform;
    transform: translateY(-4px);
    transition: transform 600ms cubic-bezier(.3, .7, .4, 1);
}

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

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

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

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

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

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

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



.__mark_home_checkbox-container {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    position: absolute;
    top: 8px;
    left: 8px;
}

.__mark_home_checkbox-input {
    display: none;
}

.__mark_home_checkbox-custom {
    width: 22px;
    height: 22px;
    background-color: #ffffff;
    border: 2px solid #888;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.__mark_home_checkbox-custom svg {
    width: 14px;
    height: 14px;
    stroke: #4caf50;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transform: scale(0);
    transition: transform 0.2s ease;
}

.__mark_home_checkbox-input:checked+.__mark_home_checkbox-custom {
    border-color: #4caf50;
    transform: scale(1.1);
}

.__mark_home_checkbox-input:checked+.__mark_home_checkbox-custom svg {
    transform: scale(1);
}

.__mark_home_checkbox-label {
    font-size: 16px;
    color: #222;
}


.__skip_no-animation-text_home.__skip_show_home {
    animation: __skip_show_user_text 2s ease-out forwards;
}




/* Estilo minimalista e elegante para o checkbox */
.__for_summary_skip__container {
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    user-select: none;
}

.__for_summary_skip__checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    outline: none;
    transition: all 0.3s ease;
    position: relative;
}

.__for_summary_skip__checkbox:checked {
    border-color: #4a90e2;
    background-color: #4a90e2;
}

.__for_summary_skip__checkbox:checked::after {
    content: '✔';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
}

.__for_summary_skip__checkbox:hover {
    border-color: #4a90e2;
}

.__for_summary_skip__label {
    transition: color 0.3s ease;
}

.__for_summary_skip__container:hover .__for_summary_skip__label {
    color: #4a90e2;
}


.clock {
    position: relative;
    width: 200px;
    height: 200px;
    border: 10px solid #333;
    border-radius: 50%;
    background-color: #fff;
}

.hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: bottom center;
    background-color: #333;
    transition: transform 0.05s linear;
}

.hour-hand {
    width: 6px;
    height: 50px;
    transition: transform 0.2s ease-in-out;
    background-color: #000;
}

.minute-hand {
    width: 4px;
    height: 70px;
    transition: transform 0.2s ease-in-out;
    background-color: #666;
}

.second-hand {
    width: 2px;
    height: 80px;

    background-color: red;
}

.clock_read_fast_gif {
    width: 100px;
    height: 100px;
    transform: scale(1.3);
    background-image: url('../Imagens/Estrutural/read-1--unscreen.gif');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
}


.range-container {
    position: relative;

    width: 80%;
    max-width: 400px;
    padding: 20px;
    border-radius: 20px;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    font-family: "Segoe UI", sans-serif;
}

.range-container label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 1.1em;
    color: #333;
}

.range-container input[type="range"] {
    width: 100%;
    height: 8px;
    -webkit-appearance: none;
    background: #ddd;
    border-radius: 8px;
    outline: none;
}

.range-container input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 24px;
    width: 24px;
    background: #fff;
    border: 2px solid #999;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}

.range-container input[type="range"]::-moz-range-thumb {
    height: 24px;
    width: 24px;
    background: #fff;
    border: 2px solid #999;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}

.range-container .value-bubble {
    position: relative;


    font-weight: bold;
    background: rgba(0, 0, 0, 0.05);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.9em;
    color: #333;
}

/* Tema azul */
.blue-theme input[type="range"] {
    background: linear-gradient(to right, #FFFFFF, #FFFFFF);
}

.blue-theme input[type="range"]::-webkit-slider-thumb {
    border-color: #ffffff;
}

.blue-theme .value-bubble {
    color: #ffffff;
}

/* Tema rosa */
.pink-theme input[type="range"] {
    background: linear-gradient(to right, #FFFFFF, #FFFFFF);
}

.pink-theme input[type="range"]::-webkit-slider-thumb {
    border-color: #FFFFFF;
}

.pink-theme .value-bubble {
    color: #ffffff;
}


.container_clock_reload {

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



.timer-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    width: 200px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
}

.timer-popup.hidden {
    display: none;
}

.timer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close-btn {
    font-size: 24px;
    cursor: pointer;
    color: #888;
}

.timer-display {
    font-size: 22px;
    margin: 20px 0;
    font-weight: bold;
    color: white;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: #eee;
    /* border-radius: 10px; */
    overflow: hidden;
}

.progress-bar-read-mode {
    width: 100%;
    height: 7px;
    /* border-radius: 10px; */
    overflow: hidden;
}


@keyframes transform_translate_1 {
    0% {
        transform: translateX(-600px);
    }

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



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

    100% {
        opacity: 1;
    }
}


.progress-bar-timer {
    width: 100%;
    height: 15px;
    background: #eee;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
}


.progress-fill {
    height: 100%;
    background: linear-gradient(to right, #00c6ff, #0072ff);
    width: 100%;
    transition: width 1s linear;
}


.config_user_readfast {
    width: 380px;
    height: 500px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 35px;
    background-color: #1a1a1a;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.container_collum_read_fast {

    width: 100%;

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

}

.first-collum-read-fast {

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



.__relojoeiro-control-panel {
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.__relojoeiro-slider-group {

    height: 50px;
    display: flex;
    flex-direction: column;
    width: 60%;
    justify-content: space-around;

}


.overlay_time_read_fast {
    position: fixed;
    height: 100%;
    width: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 10);
}



label {

    font-weight: 600;
    color: #444;
}

.__relojoeiro-slider-bar {
    width: 100%;
    height: 3px;
    background: #ddd;
    border-radius: 6px;
    position: relative;
    cursor: pointer;
}

.__relojoeiro-slider-fill {
    background: #00c6ff;
    height: 100%;
    border-radius: 6px 0 0 6px;
    width: 50%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.__relojoeiro-slider-thumb {
    width: 18px;
    height: 18px;
    background: #00c6ff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.__relojoeiro-preview-box {
    margin-top: 40px;
    width: 200px;
    height: 100px;
    background: #007BFF;
    transition: all 0.3s ease;
    position: relative;
}

.__relojoeiro-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #66ccff;
    z-index: 0;
    transition: width 0.3s ease;
}

.__relojoeiro-preview-box::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.3);
    z-index: 1;
    pointer-events: none;
}

.container_colors_relojeiro {
    opacity: 1;
    position: absolute;
    background-color: #202020;
    visibility: visible;
    height: 400px;
    width: 100%;
    border-radius: 20px;
    display: none;
    flex-direction: column;
    align-items: center;
    transform: translateX(130%);
    justify-content: space-around;
    transition: opacity 0.4s ease-in-out, transform 0.5s ease-in-out;
}



.container_colors_relojeiro.show {
    visibility: visible;
    opacity: 1;
    transform: translateX(0%);
    transition: opacity 0.4s ease-in-out, transform 0.5s ease-in-out;
}

.container_colors_relojeiro.desapair {
    visibility: visible;
    opacity: 1;
    transform: translateX(100%);
    transition: opacity 0.4s ease-in-out, transform 0.5s ease-in-out;
}


.colors_active_container {

    height: 40px;
    width: 40px;
    border-radius: 100%;
    padding: 5px;
}


.colors_style_relojeiro {
    height: 100%;
    width: 100%;
    border-radius: 100%;


}


.clock_time_h2 {
    font-family: "Matangi", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.label_text_relogio {
    text-align: center;
    color: white !important;
    font-family: "Matangi", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.color-1-colors {
    background: linear-gradient(to right, #00c6ff, #0072ff);
    ;
}

.color-2-colors {
    background: linear-gradient(to right, #ff7e5f, #feb47b);
}

.color-3-colors {
    background: linear-gradient(to right, #00f260, #0575e6);
}

.color-4-colors {
    background: linear-gradient(to right, #f9d423, #9d50bb);
}

.colors_active_container.active {
    background-color: rgba(0, 0, 0, 0.7);
}


.close_button_action_read_fast {
    position: absolute;
    right: 20px;
    top: 20px;
    font-family: sans-serif;
    border-radius: 100%;
    background-color: red;
    width: 21px;
    height: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: white;
    font-weight: bold;
    box-shadow: 1px 1px 1px 1px rgb(129, 0, 0);
    transition: transform 0.7s ease-in-out linear;
}


.close_button_action_read_fast:active {
    transform: translateY(2px);
}

.trash-bin {
    position: fixed;

    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 32px;
    cursor: pointer;
    padding: 10px;
    border-radius: 10px;
    background: #ffdddd;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, background 0.2s;
    display: none;
}

.trash-bin.hovered {
    background: #ff6666;
    display: flex;
    transform: translateX(-50%) scale(1.2);
}

.overlay_read_time_animation_fast {

    z-index: 9999 !important;
    position: relative;
    width: 300px;
    height: 300px;
    display: none;
    align-items: center;
    justify-content: space-around;
    left: 50%;
    top: 50%;

    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);

}

.read-mode-alert-book {
    width: 300px;
    height: 300px;
    background-color: #202020;
    border-radius: 15px;
    display: flex;
    align-items: center;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    opacity: 0;
    padding: 14px;
    justify-content: space-around;
    position: absolute;
    transform: scale(0.4);
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;

}


@keyframes animation_read_fast {
    0% {
        opacity: 0;
        transform: scale(0.4);
    }

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

    }
}

.read-mode-alert-book.show {
    display: flex;
    animation: animation_read_fast 0.5s ease-in-out;
    opacity: 1;
    transform: scale(1);
}

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

.congratulations_finish {
    line-height: 33px;
    text-align: justify;
    font-size: 15px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.06);
    font-family: sans-serif;
    border-radius: 9px;

}

.light-mode .congratulations_finish {
    line-height: 33px;
    text-align: justify;
    font-size: 15px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.06);
    font-family: sans-serif;
    color: white;
    border-radius: 9px;
}

.container_read_fast_button {

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

}

#__read_fast_confettCanvas {
    position: absolute;
    top: 0;
    left: 0;
}


.styled-paragraph {
    z-index: 999 !important;
    max-width: 400px;
    width: 350px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 20px;
    background: linear-gradient(145deg, #1e1e1e, #2a2a2a);
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    color: #e0e0e0;
    font-family: "Segoe UI", "Roboto", sans-serif;
    font-size: 1.1rem;
    line-height: 33px;
    letter-spacing: 0.4px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform: translate(-50%, -50%);
    display: none;
}


.styled-paragraph strong {
    color: #ff7b54;
    font-weight: 600;
}

.styled-paragraph .highlight {
    color: #80ffea;
    font-weight: bold;
}

.animation_p_alert_summary_user {
    font-family: 'Times New Roman', Times, serif;
    font-size: 2rem;
    animation: summary_alert 1.5s ease-in-out;

}


@keyframes summary_alert {
    0% {
        transform: scale(2);
        opacity: 1;
    }

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


.container_p_alert_summary_user {
    position: absolute;
    display: none;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}


.user_alert_overlay_while_read_fast {
    width: 300px;
    height: 230px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    display: none;
    z-index: 100000 !important;
    border-radius: 15px;



}


.no_exit_mode_read_fast {
    height: 100%;
    width: 100%;
    border-radius: 15px;
    padding: 10px;
    background-color: #202020;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);



}

.no_exit_mode_read_fast.control {
    animation: no_exit_mode_read 1s ease-in-out;
}

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

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

.no_exit_mode_read_fastAnimation {}





.exit_mode_read_fast_p {

    text-align: justify;
    padding: 10px;
    line-height: 33px;
    font-family: 'Times New Roman', Times, serif;
}

.button_active_exit_yes {
    background-color: white;
    font-family: monospace;
    width: 70px;
    height: 35px;
    border-radius: 10px;
    font-weight: bold;
    text-align: center;
    color: black;
    font-size: 14px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.temp_style {
    color: white !important;
}

.light-mode .ide {
    color: black !important;
}

.dark-mode .ide {
    color: white !important;
}


.overlay_concluid_mode {
    background-color: #202020;
    width: 300px;
    height: 200px;
    border-radius: 14px;
    display: none;
    align-items: center;
    flex-direction: column;
    visibility: hidden;
    justify-content: space-around;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
}

.overlay_concluid_mode.show {
    visibility: visible;
    opacity: 1;
    transition: transform 0.8s, opacity 0.8s;
    transform: translate(-50%, -50%) scale(1.1);
}


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



.modern_concluid-text {
    width: 80%;
    border-radius: 10px;
    font-family: "Kaisei Decol", serif;
    font-weight: 400;
    line-height: 33px;
    font-style: 600;
    font-size: 16px;

    text-align: center;
    color: rgb(0, 173, 253);
}

.container_concluid_button {

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


.one_shote {
    background-color: rgb(0, 173, 253);
    border-radius: 10px;
    width: 70px;
    height: 40px;
    font-family: 'Times New Roman', Times, serif;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: 1px 1px 1px 1px rgb(0, 82, 121);
}

.two-shote {
    background-color: white;
    border-radius: 10px;
    width: 70px;
    height: 40px;
    font-family: 'Times New Roman', Times, serif;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: 1px 1px 1px 1px rgba(46, 46, 46, 0.397);
    color: black;
}


.choose_painel {
    font-family: "Kaisei Decol", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 15px;
    color: black;

}

@keyframes shakeError {
    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-5px);
    }

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

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

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

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

.read_fast_erro {
    animation: shakeError 0.3s ease-in-out;
    transform: translate(-50%, -50%) scale(1.1);
}








/* CSS */
.button-24 {
    position: absolute;

    background: #FF4742;
    border: 1px solid #FF4742;
    border-radius: 6px;
    box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px;
    box-sizing: border-box;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: nunito, roboto, proxima-nova, "proxima nova", sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 16px;
    min-height: 40px;
    outline: 0;
    padding: 12px 14px;
    text-align: center;
    text-rendering: geometricprecision;
    text-transform: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: middle;
    bottom: 10px;

}


.button-24:hover,
.button-24:active {
    background-color: initial;
    background-position: 0 0;
    color: #FF4742;
}

.button-24:active {
    opacity: .5;
}


.container_elements_apply_or_back {
    position: absolute;
    bottom: 15px;
    display: none;
    align-items: center;
    justify-content: space-around;

    width: 80%;
}





.style-text-p-read-fast {

    text-align: justify;
    padding: 20px;
    line-height: 35px;
    font-size: 15px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 9px;
}


.usability_read_fast_mode-overlay {
    width: 350px;
    background-color: #1a1a1a;
    border-radius: 10px;
    height: 350px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 999 !important;
    display: flex;
}

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


.person_icon_usability {
    background-image: url('../Imagens/Estrutural/person.png');
    height: 50px;
    width: 50px;
    transform: scale(1.3);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}


.overlay_for_text_usability {
    font-family: 'Times New Roman', Times, serif;
    width: 100%;
    height: 100px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 7px;
}

.person_icon_usability-text {
    color: white;
    font-size: 15px;
    text-align: justify;
    line-height: 40px;
    width: 95%;

}


.container_button_usability {

    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row-reverse;
    height: 50px;

}

.yes_config {
    font-size: 13px;
    background-color: #578065;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    width: 70px;
    height: 40px;
}

.no_config {
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #a77d02;
    border-radius: 5px;
    width: 70px;
    height: 40px;
}




/* Pause animations for .Responder.active */
.dark-mode .Responder.active.paused span:nth-child(1),
.dark-mode .Responder.active.paused span:nth-child(2),
.dark-mode .Responder.active.paused span:nth-child(3),
.dark-mode .Responder.active.paused span:nth-child(4) {
    animation-play-state: paused;
}



/* Pause animations for .Responder.activeDisble */
.dark-mode .Responder.activeDisble.paused span:nth-child(1),
.dark-mode .Responder.activeDisble.paused span:nth-child(2),
.dark-mode .Responder.activeDisble.paused span:nth-child(3),
.dark-mode .Responder.activeDisble.paused span:nth-child(4) {
    animation-play-state: paused;
}

/* Pause shimmer animation for pseudo-elements */
.blue.paused::after,
.purple.paused::after,
.white.paused::after,
.orange.paused::after,
.green.paused::after,
.pink.paused::after {
    animation-play-state: paused;
}





.overlay_style_temp {
    position: absolute;
    width: 400px;
    height: 70px;
}



.__range_swaprange-container {
    background: #1f2937;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    width: 350px;
    text-align: center;
    border: 1px solid #3b82f6;
}

.__range_swaprange-label {
    font-size: 18px;
    color: #f1f5f9;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.__range_swaprange-track {
    width: 85%;
    height: 12px;
    background: #374151;
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
}

.__range_swaprange-progress {
    height: 100%;
    background: linear-gradient(to right, #3b82f6, #60a5fa);
    border-radius: 6px;
    width: 50%;

}

.__range_swaprange-thumb {
    width: 28px;
    height: 28px;
    background: #ffffff;
    border: 3px solid #3b82f6;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: border-color 0.3s, transform 0.2s;
}

.__range_swaprange-thumb:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.__range_swaprange-thumb:active {
    cursor: grabbing;
    border-color: #1e40af;
    transform: translate(-50%, -50%) scale(1);
}

.__range_swaprange-value {
    margin-top: 20px;
    font-size: 20px;
    color: #f1f5f9;
    font-weight: 600;
    background: #374151;
    padding: 8px 16px;
    border-radius: 8px;
    display: inline-block;
}

.container_for_range_and_number {
    height: 50px;
    width: 50px;
    align-items: center;
    justify-content: space-evenly;
    display: flex;
    width: 100%;
    height: 50px;
}


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

}


.light-mode .Label_time {
    font-family: 'Times New Roman', Times, serif;
    color: black;
    font-weight: 300;
}





















/* Estilo minimalista e elegante para o checkbox */
.__for_mark_user__container {
    position: absolute;
    left: 0;
    top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Arial', sans-serif;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    user-select: none;
}

.__for_mark_user__checkbox {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    outline: none;
    transition: all 0.3s ease;
    position: relative;
}

.__for_mark_user__checkbox:checked {
    border-color: #4a90e2;
    background-color: #4a90e2;
}

.__for_mark_user__checkbox:checked::after {
    content: '✔';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
}

.__for_mark_user__checkbox:hover {
    border-color: #4a90e2;
}

.__for_mark_user__label {
    transition: color 0.3s ease;
}

.__for_mark_user__container:hover .__for_mark_user__label {
    color: #4a90e2;
}



.overlay_reading_modes {
    height: 305px;
    width: 350px;
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 999 !important;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

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

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

}

.reading_modes_container {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    background-color: white;
    height: 100%;
    border-radius: 15px;
    width: 100%;
    animation: popup-bounce 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.p-text-change-reading-modes {
    display: flex;
    height: 33.33%;
    margin: 0;
    align-items: center;
    padding: 0;
    width: 90%;
}

#change_text_reading_modes-content {
    color: black;
    text-align: justify;
    font-family: 'Times New Roman', Times, serif;
    list-style: none;
    line-height: 35px;
    /* padding: 10px; */
    padding: 0;
    margin: 0;
    font-size: 15px;
}


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

}

.yes_change {
    background-color: #4CAF50;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 260px;
    border-radius: 10px;
    font-family: 'Times New Roman', Times, serif;
    color: white;
    font-size: 15px;
    padding: 10px 20px;

    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.no_change {
    background-color: #f44336;
    border: none;
    width: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-family: 'Times New Roman', Times, serif;
    color: white;
    font-size: 15px;
    padding: 10px 20px;

    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}


.cloned {}


.actualy {}


.__sensi-range-container {
    background: #ffffff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    width: 80%;
    /* Ajustado para melhor responsividade em mobile */
    max-width: 300px;
    text-align: center;
}

.__sensi-range-container h2 {
    margin: 0 0 20px;
    color: #333;
    font-size: 1.5em;
}

.__sensi-range-bar {
    width: 70%;
    height: 10px;
    background: #e0e0e0;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
    touch-action: none;
    /* Garante que a barra responda apenas aos eventos personalizados */
}

.__sensi-range-progress {
    height: 100%;
    background: #1a1a1a;
    border-radius: 5px;
    width: 50%;
    /* Valor inicial */
}

.__sensi-range-thumb {
    width: 20px;
    height: 20px;
    background: #ffffff;
    border: 2px solid #F2E205;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: calc(50% - 10px);
    /* Valor inicial */
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.__sensi-range-thumb:hover {
    transform: translateY(-50%) scale(1.2);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.__sensi-range-value {
    margin-top: 10px;
    font-size: 1.2em;
    color: #4a90e2;
}



.__shortly_dox_popup {
    position: relative;
    width: 400px;
    height: 200px;
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid #00ffcc;
    box-shadow: 0 0 20px #00ffcc, 0 0 40px #ff00ff;
    color: #00ffcc;
    font-family: 'Courier New', monospace;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    font-size: 1.2rem;
    overflow: hidden;

}

/* Animação de materialização com scanlines */
@keyframes materialize {
    0% {
        clip-path: inset(0 100% 0 0);
        opacity: 0;

    }

    50% {
        clip-path: inset(0 50% 0 0);
        opacity: 0.5;

    }

    100% {
        clip-path: inset(0 0 0 0);
        opacity: 1;

    }
}

@keyframes dematerialize {
    0% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
        transform: scale(1) rotate(0deg) skew(0deg, 0deg);
        filter: blur(0);
    }

    25% {
        clip-path: inset(0 10% 0 0);
        transform: scale(1.03) rotate(2deg) skew(2deg, -1deg);
        filter: blur(1px);

    }

    50% {
        clip-path: inset(0 50% 0 0);
        transform: scale(0.97) rotate(-2deg) skew(-1deg, 2deg);
        filter: blur(2px);

    }

    75% {
        clip-path: inset(0 80% 0 0);
        transform: scale(1.05) rotate(3deg) skew(3deg, -2deg);
        filter: blur(4px);

    }

    100% {
        clip-path: inset(0 100% 0 0);
        transform: scale(0.8) rotate(-5deg) skew(-2deg, 3deg);
        filter: blur(8px);

    }
}


/* Efeito de scanlines */
.__shortly_dox_popup::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(0, 255, 204, 0.2) 50%,
            transparent 100%);
    animation: scanline 1.5s linear infinite;
}

@keyframes scanline {
    0% {
        transform: translateY(-100%);
    }

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

/* Efeito de glitch */
.__shortly_dox_popup::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(to bottom,
            transparent,
            transparent 2px,
            rgba(255, 0, 255, 0.1) 2px,
            rgba(255, 0, 255, 0.1) 4px);
    animation: glitch 0.2s steps(1) infinite;
}

@keyframes glitch {

    0%,
    20%,
    40%,
    60%,
    80% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(2px) skew(1deg);
    }
}

/* Brilho pulsante nas bordas */
.__shortly_dox_popup:hover {
    box-shadow: 0 0 30px #00ffcc, 0 0 60px #ff00ff;
    transition: box-shadow 0.3s ease;
}


@keyframes hudIn {
    0% {

        transform: translateY(200px);
    }

    100% {

        transform: translateY(0);
    }
}













.__shortly_dox_content_pop_for_confirm {
    position: relative;
    width: 400px;
    padding: 20px;
    background: rgba(0, 255, 204, 0.1);
    border: 1px solid #00ffcc;
    box-shadow: 0 0 25px rgba(0, 255, 204, 0.5), 0 0 50px rgba(0, 255, 204, 0.3);
    color: #00ffcc;
    text-transform: uppercase;
    animation: hologram-emerge 1.2s ease-in-out forwards, hologram-float 2s ease-in-out infinite alternate;
    perspective: 1000px;
    z-index: 1;
}

/* Animação de surgimento holográfico */
@keyframes hologram-emerge {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
        filter: blur(4px);
    }

    50% {
        opacity: 0.4;
        transform: scale(1.05) translateY(0);
        filter: blur(2px);
    }

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

/* Oscilação holográfica */
@keyframes hologram-float {
    0% {
        transform: translateY(-3px);
    }

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

/* Linhas de interferência */
.__shortly_dox_content_pop_for_confirm::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(to bottom,
            transparent,
            transparent 3px,
            rgba(0, 255, 204, 0.2) 3px,
            rgba(0, 255, 204, 0.2) 4px);
    opacity: 0.3;
    animation: interference 0.5s linear infinite;
    z-index: 2;
}

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

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

/* Partículas flutuantes */
.__shortly_dox_content_pop_for_confirm::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 50%,
            rgba(0, 255, 204, 0.05) 0%,
            transparent 70%);
    animation: particles 10s linear infinite;
    z-index: 0;
}

@keyframes particles {
    0% {
        transform: translate(5px, 5px);
    }

    100% {
        transform: translate(-5px, -5px);
    }
}

/* Estilização dos elementos internos */
.__shortly_dox_content_container_confirm_action_quick_user {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    z-index: 3;
}

.__shortly_dox_container_quick_text_warning_confirm_user {
    font-size: 1rem;
    text-align: center;
    color: #00ffcc;
    text-shadow: 0 0 5px rgba(0, 255, 204, 0.5);
}

.__shortly_dox_container_quick_button_warning_confirm_user {
    display: flex;
    justify-content: center;
    width: 100%;
}

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

.__shortly_dox_enveloper_button_quick_confirm button {
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid #ff00ff;
    color: #ff00ff;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.__shortly_dox_enveloper_button_quick_confirm button:hover {
    background: #ff00ff;
    color: #0a0a1a;
    box-shadow: 0 0 15px #ff00ff, 0 0 30px #00ffcc;
}

/* Brilho pulsante ao hover no popup */
.__shortly_dox_content_pop_for_confirm:hover {
    box-shadow: 0 0 40px rgba(0, 255, 204, 0.7), 0 0 80px rgba(0, 255, 204, 0.5);
    transition: box-shadow 0.3s ease;
}



















/* CSS */
.button-30 {
    align-items: center;
    appearance: none;
    background-color: #FCFCFD;
    border-radius: 4px;
    border-width: 0;
    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;
    box-sizing: border-box;
    color: #36395A;
    cursor: pointer;
    display: inline-flex;
    font-family: 'Times New Roman', Times, serif;
    height: 40px;
    justify-content: center;
    line-height: 1;
    list-style: none;
    overflow: hidden;
    padding-left: 16px;
    padding-right: 16px;
    position: relative;
    text-align: left;
    text-decoration: none;
    transition: box-shadow .15s, transform .15s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    will-change: box-shadow, transform;
    font-size: 15px;
}

.button-30:focus {
    box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}

.button-30:hover {
    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;
    transform: translateY(-2px);
}

.button-30:active {
    box-shadow: #D6D6E7 0 3px 7px inset;
    transform: translateY(2px);
}

.button_PrevPage,
.button_NextPage {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 56px !important;
    width: 132px !important;
    /* coloque largura igual */
    transform: scale(0.80) !important;
}



#next_button_config {
    position: absolute;
    bottom: 0;

}

.active_button_exit {
    transform: translateX(-200%);
    transition: transform 0.6s ease-in-out;
}

.active_button_enter {
    display: none;
    transform: translateX(25%);
}


.awr {

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

}


.container_overlay_inactive {
    height: 400px;
    width: 380px;
    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;
    border-radius: 8px;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}




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


.limao_e_mel {

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


.lorem_p_introduction:nth-of-type(3) {
    background-color: rgba(0, 0, 0, 0.08);
}


.capa-introduction {
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('../Imagens/Capas/Creme_hidratante_cover.jpg');

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


}


.suco_de_laranja {
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('../Imagens/Capas/Limao_leite_laranja_cover.jpg');

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


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



.card_next_customizer {

    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    height: 140px;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-evenly;
}

.facollum1 {

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

.facollum2 {

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

.facollum3 {

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

.facollum4 {

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

.facollum5 {

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


.__personalizercarousel-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.__personalizercarousel-viewport {
    width: 200px;
    /* largura visível */
}

.__personalizercarousel-container {
    display: flex;
    transition: transform 0.5s ease;
}

.__personalizercard {
    width: 200px;
    height: 300px;
    background: #333;
    border-radius: 20px;
    margin: 0 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0.6;
    transform: scale(0.9);
    transition: transform 0.3s, opacity 0.3s;
    will-change: transform, opacity;
}

.__personalizercard.__personalizeractive {
    transform: scale(1.4);
    opacity: 1;
}


.align_itens_quote {
    width: 100%;
    overflow: visible;
    height: 100%;
    display: flex;
    border-radius: 8px;
    flex-direction: column;
    transition: transform 0.6s ease-in-out;
    align-items: center;
    justify-content: space-around;
}


/* Classe para a animação 3D */
.animate-3d {
    animation: slideIn3D 1s ease-in-out forwards;
}

/* Keyframes para a animação 3D com translateZ */
@keyframes slideIn3D {
    0% {
        transform: translateZ(-100px) scale(0.5);
        /* Começa "afastado" e levemente reduzido */
        opacity: 0.8;
    }

    100% {
        transform: translateZ(0px) scale(1);
        /* Termina na posição normal */
        opacity: 1;
    }
}


@keyframes element_animation_scale_zero {
    0% {
        transform: scale(0);

    }

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

.element_animation {
    animation: element_animation_scale_zero 1s;
}




.card_text_user {
    font-size: 14px;
    line-height: 27px;
    text-align: justify;
    color: white !important;
    font-family: "Lora", serif;
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.4);
    font-optical-sizing: auto;
    font-weight: normal;
    user-select: none;
    pointer-events: none;
    font-style: normal;
}

/* Queda girando para a esquerda */
@keyframes fall_left_side {
    0% {
        transform: translateY(0) rotate(0deg);

    }



    100% {
        transform: translateY(500px) rotate(-180deg);

    }
}

/* Queda girando para a direita */
@keyframes fall_right_side {
    0% {
        transform: translateY(0) rotate(0deg);

    }



    100% {
        transform: translateY(500px) rotate(180deg);

    }
}

/* Exemplo de uso */
.fall-left {
    animation: fall_left_side 2s forwards ease-in;
}

.fall-right {
    animation: fall_right_side 2s forwards ease-in;
}


/* Subida girando para a esquerda */
@keyframes up_left_side {
    0% {
        transform: translateY(500px) rotate(-180deg);

    }

    /* 50% {
        transform: translateY(200px) rotate(-45deg);
 
    } */

    100% {
        transform: translateY(0px) rotate(0deg);

    }
}

/* Subida girando para a direita */
@keyframes up_right_side {
    0% {
        transform: translateY(500px) rotate(-180deg);

    }

    /* 50% {
        transform: translateY(200px) rotate(45deg);
    
    } */

    100% {
        transform: translateY(0px) rotate(0deg);

    }
}

/* Exemplo de uso */
.up-left {
    animation: up_left_side 2s forwards ease-in;
}

.up-right {
    animation: up_right_side 2s forwards ease-in;
}

.solar-system {
    position: relative;
    width: 400px;
    height: 400px;
}


.orbit-path {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    border-radius: 50%;
    background: transparent;
}

.orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform-origin: center;
    animation: rotate linear infinite;
}

.planet {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

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

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


.__ob-solar-system {
    position: relative;
    width: 300px;
    height: 300px;
}

.__ob-sun {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-image: url('../Imagens/Estrutural/application.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.__ob-orbit-path {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: transparent;
}

.__ob-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    transform-origin: center;
    animation: __ob-rotate linear infinite;
}

.__ob-planet {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

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

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

/* Specific orbits and planets */
.__ob-orbit-path:nth-child(2) {
    width: 140px;
    border: 3px solid #DF50F2;
    height: 140px;
}

.__ob-orbit:nth-child(3) {
    --__ob-radius: 70px;
    /* half of path width */
    animation-duration: 5s;
}

.__ob-planet.__ob-blue {
    top: calc(-1 * var(--__ob-radius));
    left: 0;
    background-color: #DF50F2;
}

.__ob-orbit-path:nth-child(4) {
    width: 180px;
    height: 180px;
    border: 3px solid #E9A0F2;
}

.__ob-orbit:nth-child(5) {
    --__ob-radius: 90px;
    animation-duration: 8s;
}

.__ob-planet.__ob-green {
    top: calc(-1 * var(--__ob-radius));
    left: 0;
    background-color: #E9A0F2;
}

.__ob-orbit-path:nth-child(6) {
    width: 240px;
    height: 240px;
    border: 3px solid #802EF2;
}

.__ob-orbit:nth-child(7) {
    --__ob-radius: 120px;
    animation-duration: 12s;
}

.__ob-planet.__ob-red {
    top: calc(-1 * var(--__ob-radius));
    left: 0;
    background-color: #802EF2;
}


.adjust {
    position: relative;
    width: 70px !important;
    height: 70px !important;
}


.comet {
    position: absolute;
    z-index: 999 !important;
    pointer-events: none;
    user-select: none;
    width: 30px;
    top: 50%;
    left: 50%;
    height: 30px;
    background-color: #fff;
    /* Cabeça do cometa branca */
    border-radius: 50%;
    box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.8);
    /* Brilho para efeito de cometa */
    animation: rise 2s infinite linear;
    /* Animação de subida infinita, duração de 5s, linear */
    display: none;
}

.comet::after {
    content: '';
    position: absolute;
    top: 50%;
    /* Cauda começa abaixo da cabeça */
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    /* Largura da cauda */
    height: 150px;
    /* Comprimento da cauda */
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), transparent);
    /* Gradiente para efeito de fade */
    filter: blur(2px);
    /* Suaviza a cauda para um efeito mais natural */
}

@keyframes rise {
    from {
        transform: translateY(0vh);
    }

    to {
        transform: translateY(-30vh);
    }
}



.comet-left {
    z-index: 999 !important;
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: #fff;
    /* Cabeça do cometa branca */
    border-radius: 50%;
    box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.8);
    /* Brilho para efeito de cometa */
    animation: moveRight 2s infinite linear;
    /* Animação de movimento para a direita infinita, duração de 5s, linear */
    display: none;
}

.comet-left::after {
    content: '';
    position: absolute;
    top: 50%;
    /* Cauda alinhada verticalmente ao centro */
    right: 100%;
    /* Cauda começa à esquerda da cabeça (trás, já que move para direita) */
    transform: translateY(-50%);
    width: 150px;
    /* Comprimento da cauda */
    height: 15px;
    /* Largura da cauda */
    background: linear-gradient(to left, rgba(255, 255, 255, 0.8), transparent);
    /* Gradiente para efeito de fade, fading para a esquerda */
    filter: blur(2px);
    /* Suaviza a cauda para um efeito mais natural */
    z-index: -1;
    /* Coloca a cauda atrás da cabeça do cometa */
}

@keyframes moveRight {
    from {
        transform: translateX(0vw);
    }

    to {
        transform: translateX(50vw);
    }
}




.comet-down {
    position: absolute;
    z-index: 999 !important;
    pointer-events: none;
    user-select: none;
    width: 30px;
    top: -30px;
    /* Posição inicial acima da tela para começar de cima */
    left: 50%;
    height: 30px;
    background-color: #fff;
    /* Cabeça do cometa branca */
    border-radius: 50%;
    box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.8);
    /* Brilho para efeito de cometa */
    animation: fall 2s infinite linear;
    /* Animação de descida infinita, duração de 2s, linear */
    display: none;
}

.comet-down::after {
    content: '';
    position: absolute;
    top: -150px;
    /* Cauda agora acima da cabeça */
    left: 50%;
    transform: translateX(-50%);
    width: 15px;
    /* Largura da cauda */
    height: 150px;
    /* Comprimento da cauda */
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.8));
    /* Gradiente invertido para fade correto na descida */
    filter: blur(2px);
    /* Suaviza a cauda para um efeito mais natural */
}

@keyframes fall {
    from {
        transform: translateY(0vh);
    }

    to {
        transform: translateY(130vh);
        /* Move para baixo o suficiente para atravessar a tela (ajuste se necessário) */
    }
}

.container-no-animation-text {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    z-index: 999 !important;
    display: none;

}


.first_gesture_tour_1 {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    align-items: center;
    justify-content: center;
    pointer-events: none !important;
    z-index: 99999 !important;
    display: none;
}

.first_gesture_tour_1_right {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    align-items: center;
    justify-content: center;
    pointer-events: none !important;
    z-index: 999 !important;
    display: none;
}

.no-animation-text-contrary {
    color: red;

    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;

}

.no-animation-contrary_gest_1 {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: red;
    font-family: 'Times New Roman', Times, serif;
    position: relative;
    animation: gesture_animation 2s ease-out forwards;
    font-size: 20px;
}


.no-animation-contraty_left {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: red;
    font-family: 'Times New Roman', Times, serif;
    position: relative;
    animation: gesture_animation 2s ease-out forwards;
    font-size: 20px;
    text-align: center;
}

.container-no-animation-text.animation {
    display: flex;
    animation: __skip_show_user_text 2s ease-out forwards;

}

.active_button_area {

    position: absolute;
    width: 70%;
    bottom: 0px;
    background-color: transparent;
    z-index: 999 !important;
    height: 70px;
}


@keyframes fall1 {
    0% {
        top: -10%;
        /* Começa acima da tela */
        transform: translateX(0);
    }

    100% {
        top: 110%;
        /* Vai para baixo da tela */
        transform: translateX(0);
    }
}

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

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

    50% {
        transform: translateX(0) rotate(0deg);
    }

    75% {
        transform: translateX(-10px) rotate(-10deg);
    }

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

@keyframes fall2 {
    0% {
        top: -10%;
        /* Começa acima da tela */
        transform: translateX(0);
    }

    100% {
        top: 110%;
        /* Vai para baixo da tela */
        transform: translateX(0);
    }
}

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

    25% {
        transform: translateX(115px) rotate(15deg);
    }

    50% {
        transform: translateX(200) rotate(0deg);
    }

    75% {
        transform: translateX(-15px) rotate(-15deg);
    }

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

/* Continue criando keyframes personalizados para cada folha */

.leaf1 {
    left: 10%;
    animation: fall1 12s linear infinite, sway1 5s ease-in-out infinite;
}

.leaf2 {
    left: 30%;
    animation: fall2 12s linear infinite, sway2 6s ease-in-out infinite;
}

/* Continue criando classes personalizadas para cada folha */

.leaf3 {
    left: 50%;
    animation: fall1 14s linear infinite, sway1 7s ease-in-out infinite;
}

.leaf4 {
    left: 25%;
    animation: fall2 16s linear infinite, sway2 8s ease-in-out infinite;
}

.leaf5 {
    left: 33%;
    animation: fall1 11s linear infinite, sway1 5s ease-in-out infinite;
}

.leaf6 {
    left: 52%;
    animation: fall2 13s linear infinite, sway2 6s ease-in-out infinite;
}

.leaf7 {
    left: 72%;
    animation: fall1 15s linear infinite, sway1 7s ease-in-out infinite;
}

.leaf8 {
    left: 10%;
    animation: fall2 17s linear infinite, sway2 8s ease-in-out infinite;
}


.paused_falling {
    animation-play-state: paused !important;
}

.running_falling {
    animation-play-state: running !important;
}

.introjs-helperNumberLayer {
    display: none !important;
}


.introjs-bullets ul {
    pointer-events: none !important;
}

.page-content-video-r2 {
    border: 2px solid red;

}

#video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 300%;
    transform: translate(-50%, -50%);
    /* centraliza no meio da tela */
    object-fit: cover;
    z-index: -1;
}

.overlay_element {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 300%;
    background: linear-gradient(rgba(0, 0, 0, 07),
            rgba(0, 0, 0, 0.8));
    z-index: -1;
    /* entre o vídeo e o conteúdo */
}

.page-content-video-re2 {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.content_video_re2 {
    width: 100%;
    height: 100%;

}




.page-content-watch {

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

/* .prev_area_active{

    width: 20%;
    position: absolute;
    top: 0;
    height: 100%;

    left: 0px;
    z-index: 999 !important;
}

.next_area_active{

    width: 20%;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
   
    z-index: 999 !important;
} */

.toggleLock_area {
    border-radius: 50px;
    height: 9%;
    bottom: 0;
    left: 50%;
    width: 80%;
    background-color: #202020;
    visibility: visible;
    position: absolute;
    /* z-index: 9999999 !important; */
    transition: transform 1s ease-in-out;
    transform: translate(-50%, 100vh);
    display: flex;
    align-items: center;
    justify-content: space-around;

}

.light-mode .essential_read_mode {
    background-color: #FFFFFF;
}

.light-mode .toggleLock_area {
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.9);
    background-color: #FFFFFF;
}


.transform_read_mode {
    height: 20vh;
    background-color: transparent;
    width: 100%;
    position: absolute;
    bottom: 0;
    display: none;
}


.container_toggle_Lock_open {
    width: 25px;
    background-image: url('../Imagens/Estrutural/cadeado_aberto_radius.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    right: 10px;
    bottom: 10px;
    border-radius: 100%;
    height: 25px;
    animation: bounceEffect 1s ease;


}

@keyframes orb-pulse {
    0% {
        transform: perspective(600px) translateZ(0px) scale3d(1, 1, 1) rotate(0deg);
        opacity: 0.9;
        filter: blur(18px) saturate(1);
    }

    30% {
        /* estica levemente no eixo X e reduz no Z (achatando em profundidade) */
        transform: perspective(600px) translateZ(8px) scale3d(1.12, 0.95, 0.86) rotate(18deg);
        opacity: 1;
        filter: blur(14px) saturate(1.1);
    }

    60% {
        /* aumenta profundidade (z maior), e diminui X/Y */
        transform: perspective(600px) translateZ(20px) scale3d(0.94, 0.94, 1.18) rotate(36deg);
        opacity: 0.95;
        filter: blur(16px) saturate(1);
    }

    100% {
        transform: perspective(600px) translateZ(0px) scale3d(1, 1, 1) rotate(72deg);
        opacity: 0.9;
        filter: blur(18px) saturate(1);
    }
}








.container_toggle_Lock_open.open {
    width: 30px;
    background-image: url('../Imagens/Estrutural/cadeado_radius.png');
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    right: 10px;
    bottom: 10px;
    border-radius: 100%;
    height: 30px;
}


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

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

.toggleLock_area.open {
    visibility: visible;
    transform: translate(-50%, -3vh);
    animation: levant_element_open 1s ease-in-out;
}

.essential_read_mode {
    position: relative;
    background-color: #1a1a1a;
    width: 100%;

    height: 100%;
    animation: warpIn 1s ease-in-out;
}




.space-content-area {

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

.container_overlay_position_progress {
    width: 400px;
    height: 265px;
    position: absolute;
    left: 50%;
    top: 50%;
    display: none;
    transform: translate(-50%, -50%);
    z-index: 999 !important;
}


.p_text_progress {
    color: black;
    text-align: center;
    font-size: 15px;
}


@keyframes ap_scale {
    0% {
        transform: scale(0.1);
        opacity: 0;
    }

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

.progress_content_slides {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    background-color: white;
    border-radius: 10px;
    animation: ap_scale 0.8s ease-in-out;
    visibility: visible;

}


.gear_settings_progress_position {
    margin: 0;
    border-radius: 100%;
    box-shadow: none;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: column;
    min-width: 40px;
    min-height: 40px;
    font-weight: bold;
    transform: scale(0.80);
    background-color: transparent;
    background-image: url('../Imagens/Estrutural/gears_settings.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

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

.__result_cards-container {
    height: 100vh;
    width: 350px;
    overflow: hidden;
    z-index: 999 !important;
    position: relative;
}

.__result_cards-wrapper {
    transition: transform 0.6s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
    flex-direction: column;
    overflow: hidden !important;
}

.__result_card {
    height: 300px;
    width: 300px;
    margin: 5vh 0;

    pointer-events: none;
    transform: scale(0.9);
    transition: transform 0.4s ease-in-out;

    will-change: transform;
    /* Enable 3D perspective */
}

.__result_card.__result_active {

    transform: scale(1);
    pointer-events: auto;
    z-index: 1;
}

.card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 1.5s ease-in-out;
    /* Enable 3D transforms */
    will-change: transform;
}

.__result_card.flipped .card-inner {

    transform: rotateY(180deg);

    /* Flip the card when flipped class is added */
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    /* Hide the backface when not facing the viewer */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    border-radius: 20px;

}


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

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

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

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

.card-back {

    /* Different background for back face */
    transform: rotateY(180deg);
    /* Rotate back face 180 degrees initially */
}


.page-result {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    animation: disfarce 1s ease-in-out;
}

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

    100% {
        opacity: 1;
    }
}

.show_user_content_result {

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


.show_user_content_result {
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;

}

.my-arrow {
    height: 200px;
    width: 150px;
    background-image: url('../Imagens/Estrutural/down-arrow.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    /* truque para inverter a cor */
    filter: brightness(0) invert(1);
}


.seta_down_result {
    width: 50px;
    height: 50px;
    background-image: url('../Imagens/Estrutural/down-arrow.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    /* truque para inverter a cor */
    filter: brightness(0) invert(1);
}

.click_result {

    width: 200px;
    height: 50%;
    background-image: url('../Imagens/Estrutural/click-unscreen.gif');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: brightness(0) invert(1);
}

.go_down_p {
    font-family: 'Times New Roman', Times, serif;
    font-size: 20px;
    line-height: 33px;
    text-align: center;
    color: white;
}

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

.result_card_1 {
    background-image: url('../Imagens/Capas/cards-1.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;

}

.result_card_2 {
    background-image: url('../Imagens/Capas/cards-2.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
}

.result_card_3 {
    background-image: url('../Imagens/Capas/cards-3.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
}


#page54 {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}


.pageOverContainer {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;
}








.__slider-wrapper {
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column;
}

.__slider-container {
    display: flex;
}

.__slider-item {
    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);
}

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

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

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

.__slider-container {

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

    justify-content: center;
}


.container_element_animation {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.726), rgba(0, 0, 0, 0.5)), url('../Imagens/Capas/bear-car-7.jpg');
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.animation_container {

    width: 400px;
    height: 400px;
    border-radius: 10px;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;

    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    justify-content: space-around;
    overflow: hidden !important;
}

.container_toggles_transitions {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 10px;
    width: 90%;
    border-radius: 10px;
    height: 250px;
}

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

.painel_toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

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

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

.painel_toggle input:checked+.slider {
    background-color: #D96F32;
}

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


.container-collum-animation-1 {

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

.animation_container_toggle_transition {
    height: 300px;
    width: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1.2);
    display: none;
}

.page-content-bear {
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('../Imagens/Capas/bear_card_8.png');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    flex-direction: column;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.card_animation_example {
    background-color: blue;
    height: 100%;
    width: 100%;
    border-radius: 15px;
}


.text_warning_user_transition {
    position: absolute;
    left: 50%;
    bottom: 50px;
    transform: translate(-50%, -50%);
}

.text_warning_user_color {}

.__slider-viewport {

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

}

.close_slide_container_transition {
    position: absolute;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    width: 20px;
    font-family: sans-serif;
    font-size: 10px;
    border-radius: 100%;
    height: 20px;
    top: 10px;
    right: 10px;
}

.text_warning_user_color {
    animation: pulseHighlight 1.0s ease-in-out infinite alternate;
    will-change: transform, opacity;
}

@keyframes pulseHighlight {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(1.12);
        /* aumenta levemente */
        opacity: 0.6;
        /* fica mais translúcido */
    }
}

.align_text_bear {

    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Times New Roman', Times, serif;
    color: white;
    font-size: 19px;
}



.__complete_content_slider-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.__complete_content_slider {
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.5s ease;
    will-change: transform;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.__complete_content_slide {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    position: absolute;
    box-sizing: border-box;
}


.slides_dots_container {

    width: 100%;
    height: 70px;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    overflow: hidden;
    bottom: 10px;

}

.dots_pointers-container-2 {

    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    position: absolute;
    transform: translateY(100px);
    visibility: hidden;
    transition: transform 1s ease-in-out;
}

.dots_pointers-container-3 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    position: absolute;
    transform: translateY(100px);
    visibility: hidden;
    transition: transform 1s ease-in-out;
}

.dots_pointers {

    width: 100%;
    height: 100%;

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

.relative_container_dots {
    position: relative;

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

}


.active_dot {
    background-color: red;
}

.h1-for-result {
    font-family: 'Times New Roman', Times, serif;
    font-weight: 300;
    font-size: 30px;
}


.result-deslize {
    display: none !important;
    width: 100%;
    background-color: transparent;
    height: 100%;
}

.des-container-result {
    background-color: #202020;
    width: 100%;
    height: 100%;
    transition: transform 1s ease-in-out;
    transform: translateY(0%);
    z-index: 9999 !important;
    position: absolute;
    left: 0;
    top: 0;
    display: none !important;
    align-items: center;
    justify-content: center;
}

.light-mode .warning-user-read-mode {
    color: black;
    position: absolute;
    top: 30%;
    font-family: "Heebo", sans-serif;
}

.dark-mode .warning-user-read-mode {
    color: white;
    position: absolute;
    top: 30%;
    font-family: 'Times New Roman', Times, serif;
}

.des-up-des-h2 {
    font-family: 'Times New Roman', Times, serif;
    font-size: 25px;
    color: white;
}

/* Estilo da barra do toggle */
.__icons_changes_slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}

.page-content-ions {

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

/* Contêiner do toggle */
.__icons_changes_switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

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

/* Estado ativo: checkbox marcado */
.__icons_changes_toggle_control:checked+.__icons_changes_slider {
    background-color: #4CAF50;
    /* cor do fundo quando ativo */
}

.__icons_changes_toggle_control:checked+.__icons_changes_slider:before {
    transform: translateX(26px);
    /* desliza a bolinha para a direita */
}



.container_buy_drag {

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


.collum_container_1_buy {
    height: 100%;

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


.container_buy_hidden {

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


.collum_container_2_buy {
    display: none;
    height: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}



.collum_container_3_buy {
    display: none;
    height: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* Animação de rotação */
@keyframes spin_frutas {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }

    100% {
        transform: translateX(-50%) rotate(360deg);
    }
}




.trail_custom {
    position: absolute;
    width: 30px;
    height: 100px;
    background-color: #F28627;

}




@keyframes drop_mel_amarelo {
    0% {
        top: -50px;
    }

    100% {
        top: 100vh;
    }
}

.drop_custom {
    position: absolute;
    top: -50px;
    width: 30px;
    height: 50px;
    background-image: url('../Imagens/Estrutural/fatia-de-laranja.png');
    background-size: contain;
    background-repeat: no-repeat;
    animation: drop_custom 3s linear infinite, spin_frutas 3s linear infinite;
    z-index: 2;

}



.trail_mel_amarelo {
    position: absolute;
    width: 30px;
    z-index: 1;
    height: 100px;
    background-color: #F29A2E;
    /* Cor do rastro */

}


.trail_honey_gold {
    position: absolute;
    width: 15px;
    z-index: -1;
    top: -10px;
    height: 100px;
    background-color: #BF2424;
    /* Cor do rastro */

}




@keyframes drop_custom {
    0% {
        top: -50px;
    }

    100% {
        top: 100vh;
    }
}




.drop {
    position: absolute;
    bottom: 100%;
    width: 10px;
    height: 120px;
    pointer-events: none;
    animation: drop 0.5s linear infinite;
}

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

    75% {
        transform: translateY(90vh);
    }

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

.stem {
    width: 2px;
    height: 60%;
    margin-left: 7px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
    animation: stem 0.5s linear infinite;
}

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

    65% {
        opacity: 1;
    }

    75% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.splat {
    width: 15px;
    height: 10px;
    border-top: 2px dotted rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    opacity: 1;
    transform: scale(0);
    animation: splat 0.5s linear infinite;
    display: none;
}

.splat {
    display: block;
}

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

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

    90% {
        opacity: 0.5;
        transform: scale(1);
    }

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







@keyframes rfrf {
    0% {
        transform: scale(1.3);
    }



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



@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}



/* Animação de slide-in */
@keyframes slide-in {
    from {
        opacity: 0;
        transform: translate(-50%, -60%);
    }

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




.bird {
    background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/174479/bird-cells-new.svg');
    filter: invert(54%) sepia(48%) saturate(386%) hue-rotate(328deg) brightness(92%) contrast(88%);
    background-size: auto 100%;
    width: 88px;
    height: 125px;
    will-change: background-position;
    animation-name: fly-cycle;
    animation-timing-function: steps(10);
    animation-iteration-count: infinite;
}

/* Pausa todas as animações */
.bird,
.bird-container {
    animation-play-state: paused;
}

/* Classe que ativa as animações */
.bird-animating,
.bird-animating .bird,
.bird-animating .bird-container {
    animation-play-state: running;
}


.bird-one {
    animation-duration: 1s;
    animation-delay: -0.5s;

}

.bird-two {
    animation-duration: 0.9;
    animation-delay: -0.75.s;

}

.bird-three {
    animation-duration: 1.25s;
    animation-delay: -0.25s
}

.bird-four {
    animation-duration: 1.1s;
    animation-delay: -0.5s;
}

.bird-container {
    position: absolute;
    top: -10%;
    left: -3%;
    transform: scale(0) translateX(-10vw);
    will-change: transform;

    animation-name: fly-right-one;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.bird-container-one {
    animation-duration: 15s;
    animation-delay: 0;
}

.bird-container-two {
    animation-duration: 16s;
    animation-delay: 1s;
}

.bird-container-three {
    animation-duration: 14.6s;
    animation-delay: 9.5s;
}

.bird-container-four {
    animation-duration: 16s;
    animation-delay: 10.25s;
}


@keyframes fly-cycle {

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

}

@keyframes fly-right-one {

    0% {
        transform: scale(0.3) translateX(-10vw);
    }

    10% {
        transform: translateY(2vh) translateX(10vw) scale(0.4);
    }

    20% {
        transform: translateY(0vh) translateX(30vw) scale(0.5);
    }

    30% {
        transform: translateY(4vh) translateX(50vw) scale(0.6);
    }

    40% {
        transform: translateY(2vh) translateX(70vw) scale(0.6);
    }

    50% {
        transform: translateY(0vh) translateX(90vw) scale(0.6);
    }

    60% {
        transform: translateY(0vh) translateX(110vw) scale(0.6);
    }

    100% {
        transform: translateY(0vh) translateX(110vw) scale(0.6);
    }

}

@keyframes fly-right-two {

    0% {
        transform: translateY(-2vh) translateX(-10vw) scale(0.5);
    }

    10% {
        transform: translateY(0vh) translateX(10vw) scale(0.4);
    }

    20% {
        transform: translateY(-4vh) translateX(30vw) scale(0.6);
    }

    30% {
        transform: translateY(1vh) translateX(50vw) scale(0.45);
    }

    40% {
        transform: translateY(-2.5vh) translateX(70vw) scale(0.5);
    }

    50% {
        transform: translateY(0vh) translateX(90vw) scale(0.45);
    }

    51% {
        transform: translateY(0vh) translateX(110vw) scale(0.45);
    }

    100% {
        transform: translateY(0vh) translateX(110vw) scale(0.45);
    }

}




/* Animação de gelatina */
@keyframes jelly {
    0% {
        transform: scale(0.7, 1.3);
    }

    25% {
        transform: scale(1.2, 0.8);
    }

    50% {
        transform: scale(0.8, 1.2);
    }

    75% {
        transform: scale(1.1, 0.9);
    }

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


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

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


.class_add_jelly {
    animation: jelly 0.8s ease-in-out;
}

.opacity_desapair {
    animation: opacity_desapair 1s ease-in-out;

}

/* Animação de abertura */
@keyframes popupAnimation_maximization {
    0% {
        transform: scale(0);
        opacity: 0;
    }

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

@keyframes popup-bounce {
    0% {
        transform: scale(0.7);
        opacity: 0;
    }

    60% {
        transform: scale(1.05);
    }

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


/* Definição da animação */
@keyframes bouncingToBack {

    0%,
    100% {
        transform: scale(1) translateY(0);
        /* Tamanho normal, posição inicial */
    }

    50% {
        transform: scale(1.2) translateY(-10px);
        /* Aumenta e salta para cima */
    }
}

@keyframes radio_animation {
    0% {
        transform: scale(0)
    }

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



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

    30% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(5px);
    }

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

.bounce {
    animation: bounceEffect 0.6s ease-out;
}


@keyframes pop_up_pacote_fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

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





@keyframes jello {
    0% {
        transform: scale(1) skewX(0deg);
    }

    25% {
        transform: scale(1.1) skewX(10deg);
    }

    50% {
        transform: scale(0.9) skewX(-10deg);
    }

    75% {
        transform: scale(1.05) skewX(5deg);
    }

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


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

    }

    50% {
        transform: scale(1.3);

    }

    70% {
        transform: scale(0.7);
    }

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


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

    30% {
        transform: scale(0.7);
    }

    50% {
        transform: scale(1.3);
    }

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




@keyframes rotatePop {
    0% {
        transform: scale(0.8) rotate(-10deg);


    }

    30% {
        filter: blur(15px);
    }

    60% {
        filter: blur(10px);
    }

    90% {
        filter: blur(0px);
    }

    100% {
        transform: scale(1) rotate(0);

    }
}

@keyframes lightSlash {
    0% {
        clip-path: inset(0 100% 0 0);

    }

    50% {
        clip-path: inset(0 50% 0 0);

    }

    100% {
        clip-path: inset(0 0 0 0);

    }
}

@keyframes fadeUpIn {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }

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

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

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




@keyframes rubberBand {
    0% {
        transform: scale(1.3);
    }

    30% {
        transform: scaleX(1.25) scaleY(0.75);
    }

    40% {
        transform: scaleX(0.75) scaleY(1.25);
    }

    50% {
        transform: scaleX(1.15) scaleY(0.85);
    }

    65% {
        transform: scaleX(0.95) scaleY(1.05);
    }

    75% {
        transform: scaleX(1.05) scaleY(0.95);
    }

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




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

    25% {
        transform: rotate(10deg);
    }

    50% {
        transform: rotate(-10deg);
    }

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

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



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

    50% {
        transform: translateY(-10px);
    }

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



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

    50% {
        transform: scale(1.2);
    }

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


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



    100% {
        transform: translateX(50%);
    }
}



@keyframes spiralIn {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }

    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 0.5;
    }

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




.h2_mode_dark_sete {
    animation: pulseZoom 0.5s ease-in-out;

}




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

    50% {
        transform: scale(1);

    }

    75% {
        transform: scale(0.9);
    }

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






@keyframes skewReveal {
    0% {
        clip-path: polygon(0 0, 0 0, 100% 100%, 0 100%);
        transform: skewX(-30deg);
        opacity: 0;
    }

    50% {
        opacity: 0.6;
    }

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



@keyframes zoomClip {
    0% {
        transform: scale(0.5);
        clip-path: ellipse(0% 0% at 50% 50%);
        opacity: 0;
    }

    50% {
        clip-path: ellipse(50% 50% at 50% 50%);

    }

    100% {
        transform: scale(1);
        clip-path: ellipse(100% 100% at 50% 50%);
        opacity: 1;
    }
}




@keyframes rotateScale {
    0% {
        transform: scale(0.3) rotate(-90deg);
        opacity: 0;
    }

    50% {
        transform: scale(1.1) rotate(15deg);
        opacity: 0.7;
    }

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

@keyframes glitchEntry {
    0% {

        opacity: 0;
    }



    100% {

        opacity: 1;
    }
}





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

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




@keyframes rotateScale {
    0% {
        transform: rotate(-2deg) scale(0.98);
        opacity: 0;
    }

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









@keyframes fragmentExplosion {
    0% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        filter: blur(0);
        transform: scale(1);
        opacity: 1;
    }

    50% {
        clip-path: polygon(20% 20%, 80% 15%, 85% 85%, 15% 80%);
        filter: blur(10px);
        transform: scale(1.1);
        opacity: 0.5;
    }

    100% {
        clip-path: polygon(50% 50%, 55% 45%, 50% 50%, 45% 55%);
        filter: blur(30px);
        transform: scale(1.2);
        opacity: 0;
    }
}








@keyframes scaleRotateOut {
    0% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }

    100% {
        transform: scale(0.9) rotate(-3deg);
        opacity: 0;
    }
}


@keyframes glitch {
    0% {
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(2px, -2px);
    }

    60% {
        transform: translate(-2px, -2px);
    }

    80% {
        transform: translate(2px, 2px);
    }

    100% {
        transform: translate(0, 0);
    }
}


@keyframes zoomFadeIn {
    0% {
        transform: scale(0.7);
        filter: blur(20px);
    }

    100% {
        transform: scale(1);

        filter: blur(0);
    }
}




@keyframes bounceRotate {
    0% {
        transform: scale(0.3) rotate(-45deg);
        opacity: 0;
    }

    50% {
        transform: scale(1.2) rotate(20deg);
        opacity: 0.8;
    }

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




@keyframes wiggle {

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

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

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

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




@keyframes pulseGlow {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
    }

    50% {
        transform: scale(1.2);
        box-shadow: 0 0 20px rgba(255, 0, 0, 1);
    }
}



@keyframes stretchReveal {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }

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




@keyframes expandCorner {
    0% {
        transform: scale(0);
        transform-origin: top left;
        opacity: 0;
    }

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


.preloadPage {
    will-change: transform, opacity, clip-path;
}




.rubberBand {
    animation: rubberBand 0.8s ease-out;
}

.fadeSlide {
    animation: fadeSlide 0.3s linear;
}

.rotatePop {
    animation: rotatePop 0.3s linear;
}

.pulseZoom {
    animation: pulseZoom 0.3s linear;
}

.rotateScale {
    animation: rotateScale 0.3s linear;
}

.stretchReveal {
    animation: stretchReveal 0.3s linear;
}

.softPop {
    animation: softPop 0.3s linear;
}


.glitch {
    animation: glitch 0.3s linear;
}

.doubleRotatePop {
    animation: doubleRotatePop 0.3s linear;
}








@keyframes circularReveal {
    0% {
        clip-path: circle(0% at 50% 50%);
        opacity: 0;
    }

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





@keyframes crossExpand {
    0% {
        clip-path: polygon(40% 0%, 60% 0%, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0% 60%, 0% 40%, 40% 40%);
        transform: scale(0.7);
        opacity: 0;
    }

    50% {
        opacity: 0.6;
    }

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

@keyframes circleBlurZoom {
    0% {
        clip-path: circle(0% at 50% 50%);
        filter: blur(20px);
        transform: scale(0.8);
        opacity: 0;
    }

    50% {
        filter: blur(10px);
    }

    100% {
        clip-path: circle(150% at 50% 50%);
        filter: blur(0);
        transform: scale(1);
        opacity: 1;
    }
}




/* 

@keyframes waveBlurReveal {
    0% {
        clip-path: polygon(0% 50%, 10% 45%, 20% 50%, 30% 55%, 40% 50%, 50% 45%, 60% 50%, 70% 55%, 80% 50%, 90% 45%, 100% 50%, 100% 100%, 0% 100%);
        filter: blur(20px);
        transform: scale(1.1);
        opacity: 0;
    }

    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        filter: blur(0);
        transform: scale(1);
        opacity: 1;
    }
}
*/

/* 
@keyframes jellyMorph {
    0% {
        filter: blur(5px);
        transform: scale(1, 1);
    }

    30% {
        filter: blur(10px);
        transform: scale(1.1, 0.9);
    }

    50% {
        filter: blur(15px);
        transform: scale(0.9, 1.1);
    }

    70% {
        filter: blur(20px);
        transform: scale(1.05, 0.95);
    }

    100% {
        filter: blur(0px);
        transform: scale(1, 1);
    }
} */
@keyframes colorShiftGlitch {
    0% {
        filter: hue-rotate(0deg) blur(0);
    }

    20% {
        filter: hue-rotate(90deg) blur(5px);
    }

    40% {
        filter: hue-rotate(180deg) blur(10px);
    }

    60% {
        filter: hue-rotate(270deg) blur(5px);
    }

    80% {
        filter: hue-rotate(360deg) blur(2px);
    }

    100% {
        filter: hue-rotate(0deg) blur(0);
    }
}


@keyframes colorShiftGlitch_opacity {
    0% {
        filter: hue-rotate(0deg) blur(0);
        opacity: 1;
    }

    20% {
        filter: hue-rotate(90deg) blur(5px);
        opacity: 0.8;
    }

    40% {
        filter: hue-rotate(180deg) blur(10px);
        opacity: 0.6;
    }

    60% {
        filter: hue-rotate(270deg) blur(5px);
        opacity: 0.4;
    }

    80% {
        filter: hue-rotate(360deg) blur(2px);
        opacity: 0.2;
    }

    100% {
        filter: hue-rotate(0deg) blur(0);
        opacity: 0;
    }
}

@keyframes diagonalReveal {
    0% {
        clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
        opacity: 0;

        filter: blur(20px);
        /* Começa borrado */
    }

    50% {
        filter: blur(10px);
        /* Diminui o blur progressivamente */
    }

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

        filter: blur(0);
        /* Removido no final */
    }
}

@keyframes wavyGlitchDisplacement {
    0% {
        /* Start with a flat line at the bottom (no wave) */
        clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
        transform: translateX(0);
    }

    25% {
        /* Subtle wave, rising to 75% of height */
        clip-path: polygon(0% 75%, 10% 80%, 20% 75%, 30% 80%, 40% 75%, 50% 80%, 60% 75%, 70% 80%, 80% 75%, 90% 80%, 100% 75%, 100% 100%, 0% 100%);
        transform: translateX(-5px);
    }

    50% {
        /* More pronounced wave, rising to 50% of height */
        clip-path: polygon(0% 50%, 10% 55%, 20% 50%, 30% 55%, 40% 50%, 50% 55%, 60% 50%, 70% 55%, 80% 50%, 90% 55%, 100% 50%, 100% 100%, 0% 100%);
        transform: translateX(3px);
    }

    75% {
        /* Wave nearing the top, at 25% of height */
        clip-path: polygon(0% 25%, 10% 30%, 20% 25%, 30% 30%, 40% 25%, 50% 30%, 60% 25%, 70% 30%, 80% 25%, 90% 30%, 100% 25%, 100% 100%, 0% 100%);
        transform: translateX(-1px);
    }

    100% {
        /* Full wave at the top (0% height) */
        clip-path: polygon(0% 0%, 10% 5%, 20% 0%, 30% 5%, 40% 0%, 50% 5%, 60% 0%, 70% 5%, 80% 0%, 90% 5%, 100% 0%, 100% 100%, 0% 100%);
        transform: translateX(0);
    }
}

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


    }

    5% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 10%, 80% 12%, 60% 15%, 40% 12%, 20% 10%, 0% 15%);


    }

    12% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 22%, 85% 25%, 70% 28%, 50% 25%, 30% 28%, 15% 25%, 0% 30%);


    }

    20% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 35%, 80% 38%, 60% 40%, 40% 38%, 20% 35%, 0% 45%);


    }

    30% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 85% 52%, 70% 55%, 50% 52%, 30% 55%, 15% 52%, 0% 60%);

    }

    40% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 62%, 80% 65%, 60% 68%, 40% 65%, 20% 62%, 0% 72%);

    }

    50% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 85% 77%, 70% 80%, 50% 77%, 30% 80%, 15% 77%, 0% 85%);

    }

    60% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 80% 88%, 60% 90%, 40% 88%, 20% 85%, 0% 92%);

    }

    75% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 92%, 85% 94%, 70% 96%, 50% 94%, 30% 96%, 15% 94%, 0% 98%);

    }

    90% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 97%, 90% 98%, 75% 99%, 50% 98%, 25% 99%, 10% 98%, 0% 100%);

    }

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


    }
}


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

    30% {
        clip-path: polygon(0 0, 20% 10%, 20% 90%, 0 100%);
    }

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

    80% {
        clip-path: polygon(0 0, 90% 5%, 90% 95%, 0 100%);
    }

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

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

    30% {
        clip-path: polygon(0 0, 100% 10%, 90% 40%, 0 30%);
    }

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

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


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

    30% {
        clip-path: polygon(0 0, 100% 0, 95% 30%, 5% 25%);
    }

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

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


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

    25% {
        clip-path: polygon(0 80%, 100% 85%, 100% 100%, 0 95%);
    }

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

    75% {
        clip-path: polygon(0 40%, 100% 45%, 100% 100%, 0 55%);
    }

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


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

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

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

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

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


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

    25% {
        clip-path: polygon(0% 0%, 100% 0%, 90% 30%, 10% 30%);
    }

    50% {
        clip-path: polygon(0% 0%, 100% 0%, 80% 60%, 20% 60%);
    }

    75% {
        clip-path: polygon(0% 0%, 100% 0%, 70% 80%, 30% 80%);
    }

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


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

    25% {
        clip-path: polygon(0 0, 100% 10%, 100% 30%, 0 20%);
    }

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

    75% {
        clip-path: polygon(0 0, 100% 70%, 100% 90%, 0 80%);
    }

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


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

    20% {
        clip-path: polygon(0 0, 100% 0, 90% 20%, 10% 15%);
    }

    40% {
        clip-path: polygon(0 0, 100% 0, 80% 40%, 20% 35%);
    }

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

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

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

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

    25% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 25%, 90% 30%, 80% 25%, 70% 30%, 60% 25%, 50% 30%, 40% 25%, 30% 30%, 20% 25%, 10% 30%, 0% 25%);
    }

    50% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 90% 55%, 80% 50%, 70% 55%, 60% 50%, 50% 55%, 40% 50%, 30% 55%, 20% 50%, 10% 55%, 0% 50%);
    }

    75% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 90% 80%, 80% 75%, 70% 80%, 60% 75%, 50% 80%, 40% 75%, 30% 80%, 20% 75%, 10% 80%, 0% 75%);
    }

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

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

    25% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 25%, 90% 30%, 80% 25%, 70% 30%, 60% 25%, 50% 30%, 40% 25%, 30% 30%, 20% 25%, 10% 30%, 0% 25%);
    }

    50% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 90% 55%, 80% 50%, 70% 55%, 60% 50%, 50% 55%, 40% 50%, 30% 55%, 20% 50%, 10% 55%, 0% 50%);
    }

    75% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 90% 80%, 80% 75%, 70% 80%, 60% 75%, 50% 80%, 40% 75%, 30% 80%, 20% 75%, 10% 80%, 0% 75%);
    }

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

/* Usage */
.element {
    animation: flowingCurtain 2s ease-in-out forwards;
}

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

    20% {
        clip-path: polygon(80% 0%, 100% 0%, 100% 100%, 85% 95%, 70% 90%, 85% 85%, 100% 80%, 100% 100%);
    }

    40% {
        clip-path: polygon(60% 0%, 80% 5%, 100% 0%, 100% 100%, 70% 95%, 50% 90%, 70% 85%, 90% 80%, 100% 100%);
    }

    60% {
        clip-path: polygon(40% 0%, 60% 5%, 80% 0%, 100% 0%, 100% 100%, 50% 95%, 30% 90%, 50% 85%, 70% 80%, 100% 100%);
    }

    80% {
        clip-path: polygon(20% 0%, 40% 5%, 60% 0%, 80% 5%, 100% 0%, 100% 100%, 30% 95%, 15% 90%, 30% 85%, 50% 80%, 100% 100%);
    }

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

/* Usage */
.element {
    animation: liquidSlideLeft 1.8s ease-in-out forwards;
}


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

    20% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 90% 85%, 70% 80%, 50% 85%, 30% 80%, 10% 85%, 0% 80%);
    }

    40% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 85% 65%, 65% 60%, 45% 65%, 25% 60%, 5% 65%, 0% 60%);
    }

    60% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 40%, 90% 45%, 70% 40%, 50% 45%, 30% 40%, 10% 45%, 0% 40%);
    }

    80% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 20%, 85% 25%, 65% 20%, 45% 25%, 25% 20%, 5% 25%, 0% 20%);
    }

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


@keyframes squareWipe {
    0% {
        clip-path: inset(50% 50% 50% 50%);
        opacity: 0;
        transform: scale(1.1);
    }

    100% {
        clip-path: inset(0% 0% 0% 0%);
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes circleWaveExpand {
    0% {
        clip-path: circle(0% at 50% 50%);
        opacity: 0.2;
        filter: blur(5px);
    }

    50% {
        clip-path: circle(50% at 50% 50%);
        opacity: 0.6;
        filter: blur(2px);
    }

    100% {
        clip-path: circle(100% at 50% 50%);
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes circleExpand {
    0% {
        clip-path: circle(0% at 50% 50%);
    }

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

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


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

    30% {
        clip-path: polygon(0 60%, 100% 65%, 100% 100%, 0 80%);
    }

    40% {
        clip-path: polygon(0 62%, 100% 58%, 100% 100%, 0 78%);
    }

    50% {
        clip-path: polygon(0 59%, 100% 63%, 100% 100%, 0 81%);
    }

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

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



@keyframes wavePatternSlide {
    0% {
        clip-path: polygon(0% 50%, 6.6% 45%, 13.3% 50%, 20% 55%,
                /* Onda 1 */
                26.6% 50%, 33.3% 45%, 40% 50%, 46.6% 55%,
                /* Onda 2 */
                53.3% 50%, 60% 45%, 66.6% 50%, 73.3% 55%,
                /* Onda 3 */
                80% 50%, 86.6% 45%, 93.3% 50%, 100% 55%,
                100% 100%, 0% 100%);
    }

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

@keyframes horizontalShake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(10px);
    }

    50% {
        transform: translateX(-10px);
    }

    75% {
        transform: translateX(5px);
    }

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



@keyframes pentadecagonExpand {
    0% {
        clip-path: polygon(50% 0%, 73% 6%, 87% 20%, 97% 38%, 100% 60%, 97% 82%, 87% 100%, 73% 94%, 50% 100%, 27% 94%, 13% 100%, 3% 82%, 0% 60%, 3% 38%, 13% 20%, 27% 6%);
        transform: scale(0.5);
        opacity: 0;
    }

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


@keyframes diagonalSlide {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(10px, 10px);
    }

    50% {
        transform: translate(-10px, -10px);
    }

    75% {
        transform: translate(10px, -10px);
    }

    100% {
        transform: translate(0, 0);
    }
}






@keyframes clipReveal {
    0% {
        clip-path: inset(50% 50% 50% 50%);
    }

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

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

    50% {
        transform: rotate(180deg);
    }

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

/* Animação de entrada */
@keyframes full_mode_fadeIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

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












.spring {
    transition: height 0.5s cubic-bezier(0.22, 1.61, 0.36, 1);
}


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

    40% {
        transform: scale(0.5, 1);
    }

    70% {
        transform: scale(0.8, 1.1);
    }

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


@keyframes waveIn {
    0% {
        transform: translateX(-100%) skewX(20deg);

    }

    60% {
        transform: translateX(10%) skewX(-10deg);

    }

    100% {
        transform: translateX(0) skewX(0);
    }
}

@keyframes waveOut {
    0% {
        transform: translateX(0) skewX(0);
        opacity: 1;
    }

    40% {
        transform: translateX(10%) skewX(-10deg);
        opacity: 1;
    }

    100% {
        transform: translateX(200%) skewX(20deg);
        opacity: 1;
    }
}



@keyframes warpOut {
    0% {

        transform: scale(1);

    }

    30% {
        transform: scale(0.8, 1.1);

    }

    60% {
        transform: scale(0.5, 1.5);


    }

    100% {
        transform: scale(0);


    }
}




.popup-video-painel.closing {
    animation: warpOut 1s forwards;
}

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

    25% {
        transform: scale(1.1, 0.9);
    }

    50% {
        transform: scale(0.9, 1.1);
    }

    75% {
        transform: scale(1.05, 0.95);
    }

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

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

    25% {
        transform: scale(0.9, 1.1);
    }

    50% {
        transform: scale(1.1, 0.9);
    }

    75% {
        transform: scale(0.95, 1.05);
    }

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



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

    10% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 97%, 90% 98%, 75% 99%, 50% 98%, 25% 99%, 10% 98%, 0% 100%);
    }

    25% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 92%, 85% 94%, 70% 96%, 50% 94%, 30% 96%, 15% 94%, 0% 98%);
    }

    40% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 80% 88%, 60% 90%, 40% 88%, 20% 85%, 0% 92%);
    }

    50% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 85% 77%, 70% 80%, 50% 77%, 30% 80%, 15% 77%, 0% 85%);
    }

    60% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 62%, 80% 65%, 60% 68%, 40% 65%, 20% 62%, 0% 72%);
    }

    70% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 85% 52%, 70% 55%, 50% 52%, 30% 55%, 15% 52%, 0% 60%);
    }

    80% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 35%, 80% 38%, 60% 40%, 40% 38%, 20% 35%, 0% 45%);
    }

    88% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 22%, 85% 25%, 70% 28%, 50% 25%, 30% 28%, 15% 25%, 0% 30%);
    }

    95% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 10%, 80% 12%, 60% 15%, 40% 12%, 20% 10%, 0% 15%);
    }

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


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

    25% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 92%, 85% 94%, 70% 96%, 50% 94%, 30% 96%, 15% 94%, 0% 98%);
        opacity: 1;
    }

    50% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 85% 77%, 70% 80%, 50% 77%, 30% 80%, 15% 77%, 0% 85%);
        opacity: 1;
    }

    70% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 85% 52%, 70% 55%, 50% 52%, 30% 55%, 15% 52%, 0% 60%);
        opacity: 1;
    }

    88% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 22%, 85% 25%, 70% 28%, 50% 25%, 30% 28%, 15% 25%, 0% 30%);
        opacity: 1;
    }

    /* 🔥 Agora sobe até o topo */
    95% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 5%, 85% 6%, 70% 7%, 50% 6%, 30% 7%, 15% 6%, 0% 8%);
        opacity: 0.8;
    }

    99% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 1%, 85% 1%, 70% 1%, 50% 1%, 30% 1%, 15% 1%, 0% 1%);
        opacity: 0.3;
    }

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




@keyframes jellyEffect {
    0% {
        transform: scale(1, 1.3);
    }

    25% {
        transform: scale(0.9, 1.3);
    }

    50% {
        transform: scale(0.9, 1.1);
    }

    75% {
        transform: scale(0.95, 1.03);
    }

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

@keyframes fadeInScale {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }

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



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

    100% {
        opacity: 1;
    }
}



@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

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

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

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




:root {
    --coilSize: 14px;
    --delayCount: 40ms;
    --scaleMe: 1;
    --scaleFlip: 1;
    --posFlip: 0;
}





.fish {
    display: none;
    opacity: 0;
    position: absolute;
    top: -35%;
    left: 0;
    width: 100%;
    height: 100%;
    filter: drop-shadow(calc(var(--coilSize) * 4) calc(var(--coilSize) / 3) 5px rgba(0, 0, 0, 0.3));
}

.koiCoil {
    position: absolute;
    width: var(--coilSize);
    height: var(--coilSize);
    background-color: orangered;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    margin-left: calc(var(--coilSize) / -2);
    margin-top: calc(var(--coilSize) / -2);
    transform: scale(1);
    filter: contrast(200%);
    animation: fishAnim 20000ms linear infinite;
    offset-path: path("M11.7692 229.5C14.552 200.052 7.51901 171.858 -42.8757 170.644C-105.869 169.128 -131.294 76.612 -101.695 51.5872C-72.0955 26.5625 -24.6607 -50.7867 70.5883 51.5872C165.837 153.961 27.7073 131.211 33.0199 183.157C38.3326 235.102 90.3211 195.669 139.274 223.727C188.226 251.785 207.959 299.56 139.274 316.243C70.5883 332.926 41.3685 398.9 81.9726 419.754C122.577 440.608 222 478.524 222 419.754C222 372.738 222 242.432 222 183.157C219.091 129.948 175.78 30.8091 25.8099 59.9288C-161.652 96.3284 -30.3529 119.837 25.8099 141.07C81.9726 162.303 171.529 204.769 126.751 260.506C81.9726 316.243 101.326 362.501 139.274 373.496C177.222 384.492 170.012 464.495 70.5883 462.979C-28.835 461.462 -42.8757 393.015 -42.8757 373.496C-42.8757 238.288 11.7692 293 11.7692 240.506C11.7692 208.05 11.7692 237.336 11.7692 229.5Z"
        );
    box-shadow: calc(var(--coilSize) / -2) calc(var(--coilSize) / -10) 0 white inset;
}

.koiCoil:nth-child(1)::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 50%;
    top: 25%;
    left: -100%;
    border-radius: var(--coilSize);
    background-color: white;
    transform-origin: center right;
    animation: backFlip 200ms ease-in-out alternate infinite;
}

.koiCoil:nth-child(12)::before,
.koiCoil:nth-child(12)::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 20%;
    top: -10%;
    left: -100%;
    border-radius: var(--coilSize);
    background-color: white;
    transform-origin: center right;
    animation: sideFlip 500ms ease-in-out alternate infinite;
    animation-play-state: paused !important;
}

.koiCoil:nth-child(12)::after {
    transform: scale(1, -1) translateY(calc(var(--coilSize) * -1)) rotate(80deg);
}

.koiCoil:nth-child(14),
.koiCoil:nth-child(15) {
    background-color: orangered;
}

.koiCoil:nth-child(15)::after {
    content: ":";
    position: absolute;
    color: black;
    font-weight: 800;
    text-align: center;
    line-height: 60%;
    font-size: calc(var(--coilSize) * 1.2);
}

/* Escalas e delays dinâmicos simplificados */
.koiCoil:nth-child(1) {
    --scaleMe: 1;
    animation-delay: calc(var(--delayCount) * 14);
}

.koiCoil:nth-child(2) {
    --scaleMe: 1.2;
    animation-delay: calc(var(--delayCount) * 13);
}

.koiCoil:nth-child(3) {
    --scaleMe: 1.35;
    animation-delay: calc(var(--delayCount) * 12);
}

.koiCoil:nth-child(4) {
    --scaleMe: 1.55;
    animation-delay: calc(var(--delayCount) * 11);
}

.koiCoil:nth-child(5) {
    --scaleMe: 1.75;
    animation-delay: calc(var(--delayCount) * 10);
}

.koiCoil:nth-child(6) {
    --scaleMe: 1.9;
    animation-delay: calc(var(--delayCount) * 9);
}

.koiCoil:nth-child(7),
.koiCoil:nth-child(8),
.koiCoil:nth-child(9) {
    --scaleMe: 2;
    animation-delay: calc(var(--delayCount) * 8);
}

.koiCoil:nth-child(10) {
    --scaleMe: 1.9;
    animation-delay: calc(var(--delayCount) * 5);
}

.koiCoil:nth-child(11) {
    --scaleMe: 1.75;
    animation-delay: calc(var(--delayCount) * 4);
}

.koiCoil:nth-child(13) {
    --scaleMe: 1.35;
    animation-delay: calc(var(--delayCount) * 2);
}

.koiCoil:nth-child(14) {
    --scaleMe: 1.2;
    animation-delay: calc(var(--delayCount) * 1);
}

.koiCoil {
    transform: scale(var(--scaleMe, 1));
}

/* Animações */
@keyframes fishAnim {
    0% {
        offset-distance: 0%;
    }

    100% {
        offset-distance: 100%;
    }
}

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

    100% {
        transform: rotate(-45deg);
    }
}

@keyframes sideFlip {
    0% {
        transform: scale(1, -1) translateY(calc(var(--coilSize) * -1)) rotate(80deg);
    }

    100% {
        transform: scale(1, -1) translateY(calc(var(--coilSize) * -1)) rotate(20deg);
    }
}

.seaLevel {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.4;
}




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

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

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

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

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

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


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

    100% {
        opacity: 0;
    }
}

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

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


@keyframes popupIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

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


@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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


@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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



@keyframes pulse-scale-destaque {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
        /* aumento mais forte */
    }

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

.painel-2.pulsando {
    animation: pulse-scale-destaque 0.8s ease-in-out infinite;
}




@keyframes heightAnimationPainel {
    0% {
        height: 0px;
    }


    100% {
        height: 400px;
    }
}



@keyframes popupWavy {
    0% {
        transform: scale(0) rotate(0deg) translateY(0);
        opacity: 0;
    }

    30% {
        transform: scale(1.1) rotate(5deg) translateY(-10px);
        opacity: 1;
    }

    60% {
        transform: scale(0.95) rotate(-4deg) translateY(5px);
    }

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

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


@keyframes widthAnimation {
    0% {
        width: 100%;
    }

    100% {
        width: 20%;
    }
}





.chapter-link {
    cursor: pointer;
    color: #D9A273;
    text-decoration: underline;
    user-select: none;
    margin-bottom: 5px;
    display: block
}

.summary {

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

.page-content-summary {
    width: 100%;
    height: 120%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.c-link {

    height: 120vh;
    width: 100%;

    display: flex;
    position: relative;
    gap: 20px;
    top: 30px;
    right: 10px;
    align-items: flex-start;
    justify-content: space-around;
    flex-direction: column;
}



.bookmark-link {
    text-decoration: none;
    user-select: none;
    margin: 10px 0;
    cursor: pointer;
    color: blue;
    text-decoration: underline;
}

.dark-mode .bookmark-link {
    text-decoration: none;
    user-select: none;
    margin: 10px 0;
    cursor: pointer;
    color: white;
    text-decoration: underline;
}

.bookmark-link:active {
    color: darkblue;
}

.page-content-mark {

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

.page-content-marcar {
    width: 100%;
    height: 90%;
    display: flex;
}


.marks-container-painel {
    width: 90%;
    top: 15px;
    position: relative;
    height: 70%;

    display: flex;
    align-items: flex-start;
    justify-content: space-around;

}



.painel_links {
    gap: 5px;
    display: flex;
    flex-direction: column;
}






.container_align_itens_painel_links {
    width: 100%;
    height: 100%;
    border: 2px solid red;
    display: flex;
    align-items: center;
    justify-content: space-around;
}


.container_button_bookmark {

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

.container_button_bookmark-painel {

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

#clearBookmarksButton {
    padding: 10px 20px;

    text-align: center;
    width: 80%;
    background-color: #f44336;
    /* Um tom de vermelho mais suave */
    color: white;
    border: none;
    border-radius: 8px;
    /* Bordas arredondadas para suavizar o visual */
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    /* Tipografia mais firme */
    transition: background-color 0.3s ease, transform 0.2s ease;
    /* Animações suaves */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Sombra leve para profundidade */
}

#clearBookmarksButton:hover {
    background-color: #d32f2f;
    /* Cor mais escura ao passar o mouse */
    transform: translateY(-2px);
    /* Leve elevação ao passar o mouse */
}

#clearBookmarksButton:active {
    background-color: #b71c1c;
    /* Cor ainda mais escura ao clicar */
    transform: translateY(0);
    /* Volta ao lugar ao clicar */
}

.bookmarks-list {

    height: 100%;
    z-index: 2;
    width: 100px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.bookmarks-list-2 {

    display: flex;
    width: 100px;
    height: 100%;
    align-items: flex-start;
    flex-direction: column;
}

.bookmarks-list-3 {

    display: flex;
    height: 100%;
    width: 100px;
    align-items: flex-start;
    flex-direction: column;
}

.bookmarks-list-4 {

    display: flex;
    height: 100%;
    width: 100px;
    align-items: flex-start;
    flex-direction: column;
}

.bookmarks-list-5 {

    display: flex;
    height: 100%;
    width: 100px;
    align-items: flex-start;
    flex-direction: column;
}

.bookmarks-list-6 {

    display: flex;
    height: 100%;
    width: 100px;
    align-items: flex-start;
    flex-direction: column;
}

.bookmarks-list-7 {

    display: flex;
    height: 100%;
    width: 100px;
    align-items: flex-start;
    flex-direction: column;
}



.h2-Tratamentos-Naturais-Marcar {

    height: 30px !important;
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-size: 2rem;
    text-align: center;
    font-weight: normal;
    user-select: none;
    font-style: normal;
    width: 100%;
}

.custom-mode-palete-3 .h2-Tratamentos-Naturais-Marcar {
    color: white;
    height: 30px !important;
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-size: 2rem;
    text-align: center;
    font-weight: normal;
    font-style: normal;
    width: 100%;
}

.custom-mode-palete-3 .summary-text {
    color: white;
}

.__fox_button_action {
    height: 100%;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;

    background-color: #F27B50;
    box-shadow: 1px 1px 1px 1px black;
}

.__fox_button_action:active {
    transform: translateY(-2px);
}


.cadeado_locks_open_automatic {
    display: none;
}









.__read_mode_particle_container {
    position: relative;
    width: 300px;
    height: 300px;
    overflow: hidden;
    margin: 50px auto;
}

#__read_mode_particle_target {
    width: 100%;
    height: 20vh;
    background-color: transparent;
    object-fit: cover;
    transition: opacity 3s ease-out;
}


.__read_mode_particle_particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #000;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
}

._particle_particle_tegrate_menu_settings {
    position: absolute;
    opacity: 1 !important;
    width: 4px;
    height: 4px;

    border-radius: 50%;
    z-index: 9999999999;
    pointer-events: none;

}



/* Essa classe é aplicada via JS */
.__read_mode_particle_animate {
    animation: __read_mode_particle_disintegrate var(--duration) ease-in-out forwards;
    animation-delay: var(--delay);
    opacity: 1;
}

@keyframes __read_mode_particle_disintegrate {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    50% {
        opacity: 0.5;
        transform: translate(calc(var(--dx) / 2), calc(var(--dy) / 2)) scale(0.8) rotate(calc(var(--rot) / 2));
    }

    100% {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) scale(0) rotate(var(--rot));
    }
}

.__read_mode_particle_disintegrating {
    opacity: 0;
}

@keyframes popupExplode {
    0% {


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

    50% {


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

    100% {


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



@keyframes popupSliceOut {
    0% {
        opacity: 1;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        transform: translateY(0);
    }

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

    100% {
        opacity: 0;
        clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
        transform: translateY(50px);
    }
}

.popup-exit {
    animation: popupSliceOut 0.7s ease-in-out forwards;
}


@keyframes popupDisintegrate {
    0% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }

    30% {
        clip-path: inset(0 20% 0 0);
        transform: skewX(3deg);
    }

    70% {
        clip-path: inset(0 60% 0 0);
        opacity: 0.6;
    }

    100% {
        opacity: 0;
        clip-path: inset(0 100% 0 0);
        transform: skewX(-10deg) scale(0.95);
    }
}

.popup-exit {
    animation: popupDisintegrate 0.8s cubic-bezier(0.6, 0, 0.4, 1) forwards;
}


@keyframes popupDistort {
    0% {
        opacity: 1;
        transform: scale(1) rotate(0);
        filter: blur(0);
    }

    40% {
        transform: scale(1.05) rotate(3deg);
        filter: blur(2px);
    }

    100% {
        opacity: 0;
        transform: scale(0.8) rotate(-6deg);
        filter: blur(6px);
    }
}

.popup-exit {
    animation: popupDistort 0.6s ease forwards;
}


@keyframes popupIrisClose {
    0% {
        opacity: 1;
        clip-path: circle(100% at 50% 50%);
    }

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

.popup-exit {
    animation: popupIrisClose 0.5s ease-in-out forwards;
}


.container_child_particle {
    position: absolute;
    width: 100%;
    pointer-events: none;
    height: 20vh;
    bottom: 0;
    z-index: 9999 !important;


}


@keyframes element_out_right {
    0% {
        transform: translateX(0%);

    }

    100% {
        transform: translateX(-100vw);
    }
}

@keyframes element_out_left {
    0% {
        transform: translateX(0%);

    }

    100% {
        transform: translateX(100vw);
    }
}









.container_ok_elements {
    display: none;
}


@keyframes element_enter_right {
    0% {
        transform: translateX(-100vw);



    }

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

@keyframes element_enter_left {
    0% {
        transform: translateX(100vw);



    }

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


.spinner-border {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    position: absolute;
    top: 39px;
    left: 50%;
    border: 4px solid rgba(0, 0, 0, 0.08);
    border-top-color: #0ea5a4;
    border-right-color: transparent;
    animation: spin_element_ras 0.9s linear infinite;
    box-sizing: border-box;
    display: none;
}

@keyframes spin_element_ras {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.container_spin_element {
    width: 100%;
    height: 100px;
    display: none;
    position: relative;
    align-items: center;
    justify-content: center;
}



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

.progress_position {
    display: none;
}

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

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

input:checked+.progress_slider {
    background-color: #00c6ff;
}

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

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


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

.elements_text_slides p {
    color: black;
    font-size: 13px;
}


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

.confirm_position {
    width: 80px;
    height: 100%;
    background-color: #202020;
    border-radius: 8px;
    color: white;
    font-family: 'Times New Roman', Times, serif;
    display: flex;
    font-size: 12px;
    align-items: center;
    justify-content: center;
}

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

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

.current_bico_0 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.400), rgba(0, 0, 0, 0.3)), url('/Assets/Imagens/Capas/alimenta.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}


.bico-dieta {
    background-image: linear-gradient(rgba(0, 0, 0, 0.400), rgba(0, 0, 0, 0.3)), url('../Imagens/Estrutural/cheiodefrutas.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}

.slider_nature {
    background-image: linear-gradient(rgba(0, 0, 0, 0.400), rgba(0, 0, 0, 0.3)), url('../Imagens/Estrutural/nature.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;
}


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

    5% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 10%, 80% 12%, 60% 15%, 40% 12%, 20% 10%, 0% 15%);
        opacity: 0.25;
    }

    12% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 22%, 85% 25%, 70% 28%, 50% 25%, 30% 28%, 15% 25%, 0% 30%);
        opacity: 0.5;
    }

    30% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 85% 52%, 70% 55%, 50% 52%, 30% 55%, 15% 52%, 0% 60%);
        opacity: 0.75;
    }

    60% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 80% 88%, 60% 90%, 40% 88%, 20% 85%, 0% 92%);
        opacity: 0.9;
    }

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




.light-mode .text_warm_user_white {
    color: black;
}

.dark-mode .text_warm_user_white {
    color: white;
}


.text_warm_user_white {
    font-size: 14px;

    text-align: center;
    position: absolute;
    bottom: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


@keyframes lightSlashUp {
    0% {
        clip-path: inset(100% 0 0 0);
        /* Começa totalmente cortada por baixo */
    }

    50% {
        clip-path: inset(50% 0 0 0);
        /* Metade do caminho */
    }

    100% {
        clip-path: inset(0 0 0 0);
        /* Totalmente revelada */
    }
}






@keyframes lightSlashDisappearUp {
    0% {
        clip-path: inset(0 0 0 0);
        /* Totalmente visível */
        transform: translateY(0);
        /* Posição inicial */

    }

    50% {
        clip-path: inset(50% 0 0 0);
        /* Metade inferior sumindo */
        transform: translateY(50%);
        /* Desce metade da altura do elemento */

    }

    100% {
        clip-path: inset(100% 0 0 0);
        /* Totalmente cortada (sumiu de baixo pra cima) */
        transform: translateY(100%);
        /* Desce completamente */

    }
}



.container_overlay_transition_settings {
    background-color: transparent;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: none;
    position: absolute;
    z-index: 999;
}

.container_cards_exemplo {

    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
}


.card_settings {
    height: 250px;
    width: 170px;
    background-color: black;
    transform: scale(1.3);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.buttons_container_cards {

    width: 100%;
    height: 50px;
    position: absolute;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buttons_container_element_action {
    width: 100px;
    height: 100%;
    border-radius: 10%;

}






.dark-mode .greet_gif {
    filter: brightness(0) invert(1);
}

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





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

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

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

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

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

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


.page-content-for-video {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
    justify-content: center;
}


.watch_media {
    width: 100%;
    height: 100%;
    background-image: url('../Imagens/Capas/video-receita.jpg');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

#bg-video {
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 99%;
    height: 100%;
    object-fit: cover;
    /* Faz o vídeo cobrir a tela inteira */
    z-index: -2;
    /* Coloca o vídeo atrás do conteúdo */
}

#bg-player {
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 99%;
    height: 100%;
    object-fit: cover;
    /* Faz o vídeo cobrir a tela inteira */
    z-index: -2;
    /* Coloca o vídeo atrás do conteúdo */
}

.vídeo_content_player {
    background-color: rgba(0, 0, 0, 0.8);
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
    height: 100%;
    left: 0;
}

.indicator_guide {
    background-color: rgba(0, 0, 0, 0.4);
    width: 10px;
    height: 10px;
    border-radius: 100%;
}

.indicator_guide.active {
    background-color: red;
}


.card_settings {
    color: white;
}


.custom-scrollbar {
    position: absolute;
    right: 0;
    top: 0;
    width: 12px;
    height: 100%;
    background: #f1f1f1;
    /* Track */
    border-radius: 10px;
    z-index: 99999;
}

.custom-scrollbar-thumb {
    position: absolute;
    top: 0;
    width: 100%;

    background: #888;
    /* Thumb */
    border-radius: 10px;
    cursor: pointer;
}

.custom-scrollbar-thumb:hover {
    background: #555;
}


.using-iphone-tool {
    height: 250px;
    width: 100%;
    border-radius: 8px;
    background-image: url('../Imagens/Capas/iphone-man-tool.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: all 0.4s ease;
}

/* Quando expandir */
.using-iphone-tool.expanded {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100dvh;
    width: 100%;
    transform: translate(-50%, -50%) scale(1);
    z-index: 9999;
    border-radius: 16px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    background-size: contain;
    /* mostra a imagem completa */
    background-color: #000;
    /* fundo ao redor da imagem */
}



/* CSS */
.button-30 {
    align-items: center;
    appearance: none;
    background-color: #FCFCFD;
    border-radius: 4px;
    border-width: 0;
    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;
    box-sizing: border-box;
    color: #36395A;
    cursor: pointer;
    display: inline-flex;
    font-family: "JetBrains Mono", monospace;
    height: 48px;
    justify-content: center;
    line-height: 1;
    list-style: none;
    overflow: hidden;

    position: relative;
    text-align: left;
    text-decoration: none;
    transition: box-shadow .15s, transform .15s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    will-change: box-shadow, transform;
    font-size: 18px;
}

.button-30:focus {
    box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}

.button-30:hover {
    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;
    transform: translateY(-2px);
}

.button-30:active {
    box-shadow: #D6D6E7 0 3px 7px inset;
    transform: translateY(2px);
}

@keyframes soft-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
    }

    50% {
        transform: scale(1.04);
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.10);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
    }
}

@keyframes slide-rotate-in {
    0% {
        opacity: 0;
        transform: translateY(20px) rotate(-6deg) scale(0.98);
    }

    60% {
        opacity: 1;
        transform: translateY(-6px) rotate(2deg) scale(1.02);
    }

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

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

    50% {
        transform: translateY(-10px);
    }

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





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

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

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

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

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

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





.painel_example {

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

.pci-express {
    position: relative;
    overflow: hidden;
}


.pci-express span {
    position: absolute;
    display: block;
}

.pci-express span:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;

}

@keyframes animate1 {
    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 100%;
    }
}

.pci-express span:nth-child(2) {
    top: -100%;
    right: 0;
    width: 2px;
    height: 100%;


}

@keyframes animate2 {
    0% {
        top: -100%;
    }

    50%,
    100% {
        top: 100%;
    }
}

.pci-express span:nth-child(3) {
    bottom: 0;
    right: 100px;
    width: 100%;
    height: 2px;


}

@keyframes animate3 {
    0% {
        right: -100%;
    }

    50%,
    100% {
        right: 100%;
    }
}


.pci-express span:nth-child(4) {
    bottom: -100%;
    left: 0;
    width: 2px;
    height: 100%;


}

@keyframes animate4 {
    0% {
        bottom: -100%;
    }

    50%,
    100% {
        bottom: 100%;
    }
}

.pci-express span:nth-child(1) {
    animation: animate1 3s linear infinite;
}

.pci-express span:nth-child(2) {
    animation: animate2 3s linear infinite;
    animation-delay: 0.75s;
}

.pci-express span:nth-child(3) {
    animation: animate3 3s linear infinite;
    animation-delay: 1.5s;
}

.pci-express span:nth-child(4) {
    animation: animate4 3s linear infinite;
    animation-delay: 2.25s;
}





.text-content-progress {
    height: 30px;
    width: 100%;

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


.__selection_font_ui_custom-select {
    width: 100%;
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif;
}

.__selection_font_ui_select-trigger {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    background: black;
    font-size: 13px;
    color: white;
    cursor: pointer;
    transition: 0.3s ease;

}

.__selection_font_ui_select-trigger:hover {
    background: #000000;
}

.__selection_font_ui_select-options {
    position: absolute;
    bottom: 110%;
    top: auto;

    left: 0;
    width: 100%;
    color: white !important;
    background: #202020;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 5px 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    text-align: center;
    z-index: 99999 !important;
    pointer-events: none;
    transform: translateY(-5px);
    transition: 0.25s ease;
    z-index: 10;
}

.__selection_font_ui_custom-select.__selection_font_ui_open .__selection_font_ui_select-options {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.__selection_font_ui_option {
    padding: 12px 15px;
    cursor: pointer;
    transition: 0.2s;
}

.__selection_font_ui_option:hover {
    background: #000000;
}

.container_progress_user_ux {

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


.page-counter-align-container {

    width: 95%;
    height: 30px;

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


.container_el_az {

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


.text-align-text-content-fontSize {

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

}


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

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

.container_range_value_user_ux {

    height: 20px;
    width: 100%;
    display: flex;
    overflow: hidden;
    align-items: center;
    font-size: 10px !important;
    justify-content: center;
}


.slider-group {
    border: 1px solid red;
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
}


.add_el_one {
    animation: el_translate_mini_y 0.1s ease-in-out;
}

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

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

@keyframes el_translate_ultra_x {
    0% {
        transform: translateY(-100%);
    }

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





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

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


#exit_icon_log_out {
    display: none;

}


.dark-mode .settings_log_out_pay {
    background-image: url('../Imagens/Estrutural/exit.png');
    filter: invert(1);
    width: 25px !important;
    height: 25px !important;
}


.dark-mode .lock-premiun-icon {
    background-image: url('../Imagens/Estrutural/unlock.png');
    filter: invert(1);
    width: 25px !important;
    height: 25px !important;
}


.light-mode .lock-premiun-icon {
    background-image: url('../Imagens/Estrutural/unlock.png');
    width: 25px !important;
    height: 25px !important;
}


.dark-mode .exit_icon_element_result {
    background-image: url('../Imagens/Estrutural/unlock.png');
    filter: invert(1);
    width: 25px !important;
    height: 25px !important;
}

.light-mode .exit_icon_element_result {
    background-image: url('../Imagens/Estrutural/unlock.png');
    width: 25px !important;
    height: 25px !important;
}

.light-mode .lock_exit_element_maximization_form {
    background-image: url('../Imagens/Estrutural/unlock.png');

    width: 25px !important;
    height: 25px !important;
}

.dark-mode .lock_exit_element_maximization_form {
    background-image: url('../Imagens/Estrutural/unlock.png');
    filter: invert(1);
    width: 25px !important;
    height: 25px !important;
}



.light-mode .settings_log_out_pay {
    background-image: url('../Imagens/Estrutural/exit.png');

    width: 25px !important;
    height: 25px !important;
}

.dark-mode .settings_log_out_pay {
    background-image: url('../Imagens/Estrutural/exit.png');
    filter: invert(1) !important;
    width: 25px !important;
    height: 25px !important;
}


#log_out_user_pay {
    display: none;
    animation: exit_animation_settings_menu 0.7s ease-in-out;
}

.container_overlay_select_one {
    position: absolute;
    background-color: red;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}



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

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

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

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




#premiun-locked {
    display: none;
}

#lock-premiun-show {
    display: none;
}

#ico_area_toggle_resul {
    display: none;
    background-color: red;
}

#area_result {
    display: none;
}



.three_capa {
    background-color: #1a1a1a !important;
    height: 100%;
    width: 100%;
}


.collun_left_position {
    position: absolute;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 60px;

    height: 100%;
}

.collun_right_position {
    position: absolute;
    z-index: 1001;
    right: 0;
    top: 0;
    width: 60px;

    height: 100%;
}

#Maximization_ico {
    display: none;

}


#maximization_div_block {
    display: none;
    pointer-events: none;
}



@keyframes element_y_z_form {
    0% {
        transform: translateY(200px);

    }

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

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

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

#alert_validade {
    user-select: none !important;
}


.container_element_loading_backend {
    position: fixed;
    /* melhor que absolute p/ overlay */
    inset: 0;

    background-color: rgba(0, 0, 0, 0.4);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    z-index: 99999999999999;
    display: none;
    align-items: center;
    justify-content: center;
}



.container_loading_spin_wait {
    width: 300px;
    height: 250px;
    background-color: white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
}

.container_text_loading {
    height: auto;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container_text_loading p {

    color: black;
    font-size: 18px;
}

.loading_spin {
    height: auto;

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

.loader {
    width: 38px;
    height: 38px;
    border: 4px solid rgba(0, 0, 0, 0.055);
    border-top: 4px solid #00e5ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}



.dots_p::after {
    content: "";
    animation: dots_p 1.5s steps(4, end) infinite;
}

@keyframes dots_p {
    0% {
        content: "";
    }

    25% {
        content: ".";
    }

    50% {
        content: "..";
    }

    75% {
        content: "...";
    }

    100% {
        content: "";
    }
}


#space-id {

    height: 200px;
    width: 200px;
    background-color: red !important;

}

.firefox_overlay_element {
    background-color: white;
    z-index: 99999999;
    height: 100vh;
    width: 100vw;
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
}

.container_firefox_content {

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

.logo_icon_firefox {
    width: 50px;
    height: 50px;
    background-image: url('../Imagens/Estrutural/firefox.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    transform: scale(1.3);
}

.firefox-title {


    color: black;
    font-size: 20px;
    text-align: center;

    font-family: "Quicksand", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

}

.p-el-content-fire {

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

.p-el-content-fire p {
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    line-height: 43px;
    text-align: justify;
    color: white;
    font-family: "Quicksand", sans-serif;
    width: 90%;
    font-weight: 400;
    padding: 10px;

}

.chrome-p-content {
    font-family: "Quicksand", sans-serif;
    color: black;
}

.choise_elements_container {

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

    justify-content: space-evenly;
    height: 100px;
}

.el-chrome-icon {

    height: 45px;
    width: 45px;
    background-image: url('../Imagens/Estrutural/chrome-firefox.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}


.line-set-content-open {
    width: 100px;

    height: 50px;
    background-image: url('../Imagens/Estrutural/right-arrow-als.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}


.desktop-aligment-alert-user {
    z-index: 999999999999;
    position: absolute;
    background-color: white;
    width: 100dvw;
    display: none;
    height: 100dvh;

}


.overlay-desktop-aligment-user {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

}

.container-elements-aligment-content {

    width: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    height: 500px;
    border-radius: 8px;
    box-shadow: 0 1px 24px rgba(0, 0, 0, 0.09);
}


.qr-code-view {
    box-shadow: 0 1px 24px rgba(0, 0, 0, 0.09);
    width: 200px;
    height: 200px;

    background-image: url('../Imagens/Estrutural/qr-code.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.container-al-p-warn-user {


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

.container-al-p-warn-user p {
    text-align: justify;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 35px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.9);
    border-radius: 6px;
}


@media (min-width: 1025px) {
    .desktop-aligment-alert-user {
        display: flex;
    }
}



.full-screen-element-view {
    box-shadow: 0 1px 24px rgba(0, 0, 0, 0.09);
    width: 700px;
    height: 550px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;

}


.p-For-Tablet-container {

    background-color: rgba(0, 0, 0, 0.8);
    width: 600px;
    display: flex;
    border-radius: 10px;
    align-items: center;
    justify-content: center;
}

.p-For-Tablet {
    color: white;
    text-align: justify;
    padding: 10px;

    line-height: 43px;
}



.page-content-grid-collum {


    width: 100%;
    height: 100%;
}

.grid_flex_container {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 100%;
    display: none;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
}

.img-collum-r {

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

}

.img {
    border: 1px solid black;
    width: 33%;
    display: none;
    height: 100%;
}

.container_result_img_center {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.div_image_view_current {
    height: 300px;
    width: 350px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}


.img1 {
    background-image: url('/Assets/Imagens/Result/img-1.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img2 {
    background-image: url('/Assets/Imagens/Result/img-2.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img3 {
    background-image: url('/Assets/Imagens/Result/img-3.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img4 {
    background-image: url('/Assets/Imagens/Result/img-4.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img5 {
    background-image: url('/Assets/Imagens/Result/img-5.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img6 {
    background-image: url('/Assets/Imagens/Result/img-6.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img7 {
    background-image: url('/Assets/Imagens/Result/img-7.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img8 {
    background-image: url('/Assets/Imagens/Result/img-8.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img9 {
    background-image: url('/Assets/Imagens/Result/img-9.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img10 {
    background-image: url('/Assets/Imagens/Result/img-10.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img11 {
    background-image: url('/Assets/Imagens/Result/img-11.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img12 {
    background-image: url('/Assets/Imagens/Result/img-12.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img13 {
    background-image: url('/Assets/Imagens/Result/img-13.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img14 {
    background-image: url('/Assets/Imagens/Result/img-14.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img15 {
    background-image: url('/Assets/Imagens/Result/img-15.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img16 {
    background-image: url('/Assets/Imagens/Result/img-16.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img17 {
    background-image: url('/Assets/Imagens/Result/img-17.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img18 {
    background-image: url('/Assets/Imagens/Result/img-18.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img19 {
    background-image: url('/Assets/Imagens/Result/img-19.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.img20 {
    background-image: url('/Assets/Imagens/Result/img-20.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}


.img_pcs {}


.container_loading_await_imagens {

    position: absolute;
    left: 50%;
    display: none;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999999;
}


.dark-mode .__loading_while_imgs {
    width: 50px;
    height: 50px;
    border: 4px solid #ccc;
    border-top: 6px solid white;
    border-radius: 50%;
    animation: spin_el_while_loading_containe 0.8s linear infinite;
}

.light-mode .__loading_while_imgs {
    width: 50px;
    height: 50px;
    border: 4px solid #ccc;
    border-top: 6px solid black;
    border-radius: 50%;
    animation: spin_el_while_loading_containe 0.8s linear infinite;
}

@keyframes spin_el_while_loading_containe {
    to {
        transform: rotate(360deg);
    }
}





@keyframes glitch {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(-2px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }

    100% {
        transform: translate(0);
    }
}

@keyframes containerEnterDiagonal {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(0.96);
        clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%);
    }

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

    }


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

@keyframes containerEnterSlit {
    0% {
        opacity: 0;
        transform: scale(0.97) translateY(10px);
        clip-path: inset(48% 0 48% 0 round 24px);
    }

    45% {
        opacity: 1;
        transform: scale(0.985) translateY(0);
        clip-path: inset(35% 0 35% 0 round 24px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        clip-path: inset(0 0 0 0 round 24px);
    }
}


@keyframes containerExitSlit {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
        clip-path: inset(0 0 0 0 round 24px);
    }

    100% {
        opacity: 0;
        transform: scale(0.985) translateY(-8px);
        clip-path: inset(49% 0 49% 0 round 24px);
    }
}



@keyframes containerEnterPortal {
    0% {
        opacity: 0;
        transform: translateX(-38px) scale(0.94);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    }

    35% {
        opacity: 1;
        transform: translateX(-16px) scale(0.97);
        clip-path: polygon(28% 0, 100% 0, 100% 100%, 10% 100%);
    }

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


@keyframes containerEnterIris {
    0% {
        opacity: 0;
        transform: scale(1.04);
        clip-path: inset(42% 42% 42% 42% round 18px);
    }

    55% {
        opacity: 1;
        transform: scale(1.015);
        clip-path: inset(14% 10% 14% 10% round 22px);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        clip-path: inset(0 0 0 0 round 24px);
    }
}

@keyframes containerEnterHinge {
    0% {
        opacity: 0;
        transform: perspective(900px) rotateY(18deg) scale(0.94);
        clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
    }

    55% {
        opacity: 1;
        transform: perspective(900px) rotateY(-4deg) scale(1.01);
        clip-path: polygon(0 0, 96% 0, 100% 100%, 0 100%);
    }

    100% {
        opacity: 1;
        transform: perspective(900px) rotateY(0deg) scale(1);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

@keyframes containerEnterShear {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.95) skewY(3deg);
        clip-path: polygon(0 18%, 100% 0, 100% 82%, 0 100%);
    }

    60% {
        opacity: 1;
        transform: translateY(0) scale(1.01) skewY(-1deg);
        clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
    }

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


@keyframes containerEnterSpatial {
    0% {
        opacity: 0;
        transform:
            translateZ(-180px) translateY(30px) rotateX(10deg) rotateY(-14deg) rotateZ(-2deg) scale3d(0.92, 0.96, 1);
        clip-path: polygon(12% 18%, 88% 8%, 94% 84%, 10% 92%);
    }

    55% {
        opacity: 1;
        transform:
            translateZ(24px) translateY(0) rotateX(-3deg) rotateY(4deg) rotateZ(0.6deg) scale3d(1.02, 1.01, 1);
        clip-path: polygon(2% 3%, 98% 1%, 99% 97%, 1% 99%);
    }

    100% {
        opacity: 1;
        transform:
            translateZ(0) translateY(0) rotateX(0) rotateY(0) rotateZ(0) scale3d(1, 1, 1);
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}



@keyframes enterOrbital {
    0% {
        opacity: 0;
        transform:
            translateZ(-220px) translateX(36px) translateY(18px) rotateY(-14deg) rotateX(8deg) rotateZ(-3deg) scale3d(.86, .9, 1);
    }

    55% {
        opacity: 1;
        transform:
            translateZ(28px) translateX(-4px) translateY(0) rotateY(4deg) rotateX(-2deg) rotateZ(.8deg) scale3d(1.02, 1.01, 1);
    }

    100% {
        opacity: 1;
        transform:
            translateZ(0) translateX(0) translateY(0) rotateY(0) rotateX(0) rotateZ(0) scale3d(1, 1, 1);
    }
}



@keyframes enterElasticPlane {
    0% {
        opacity: 0;
        transform:
            translateZ(-140px) rotateZ(-2.5deg) scaleX(.72) scaleY(1.08) scale3d(1, 1, 1);
        transform-origin: center center;
    }

    40% {
        opacity: 1;
        transform:
            translateZ(18px) rotateZ(.8deg) scaleX(1.04) scaleY(.98) scale3d(1, 1, 1);
    }

    70% {
        opacity: 1;
        transform:
            translateZ(0) rotateZ(-.4deg) scaleX(.985) scaleY(1.01) scale3d(1, 1, 1);
    }

    100% {
        opacity: 1;
        transform:
            translateZ(0) rotateZ(0) scaleX(1) scaleY(1) scale3d(1, 1, 1);
    }
}




@keyframes enterTiltedDoor {
    0% {
        opacity: 0;
        transform:
            translateZ(-160px) rotateY(22deg) rotateZ(-2deg) scale3d(.9, .94, 1);
    }

    50% {
        opacity: 1;
        transform:
            translateZ(20px) rotateY(-5deg) rotateZ(.7deg) scale3d(1.01, 1.01, 1);
    }

    100% {
        opacity: 1;
        transform:
            translateZ(0) rotateY(0) rotateZ(0) scale3d(1, 1, 1);
    }
}


@keyframes enterVerticalPress {
    0% {
        opacity: 0;
        transform:
            translateZ(-180px) translateY(26px) rotateX(14deg) rotateZ(-1deg) scaleY(.62) scaleX(1.04) scale3d(1, 1, 1);
    }

    45% {
        opacity: 1;
        transform:
            translateZ(18px) translateY(-2px) rotateX(-4deg) rotateZ(.3deg) scaleY(1.04) scaleX(.99) scale3d(1, 1, 1);
    }

    100% {
        opacity: 1;
        transform:
            translateZ(0) translateY(0) rotateX(0) rotateZ(0) scaleY(1) scaleX(1) scale3d(1, 1, 1);
    }
}



@keyframes enterSpiralCard {
    0% {
        opacity: 0;
        transform:
            translateZ(-200px) translateX(20px) translateY(24px) rotateZ(-8deg) rotateY(-10deg) scale3d(.84, .9, 1);
    }

    50% {
        opacity: 1;
        transform:
            translateZ(24px) translateX(-4px) translateY(-2px) rotateZ(1.4deg) rotateY(3deg) scale3d(1.02, 1.01, 1);
    }

    100% {
        opacity: 1;
        transform:
            translateZ(0) translateX(0) translateY(0) rotateZ(0) rotateY(0) scale3d(1, 1, 1);
    }
}



@keyframes enterAccordionX {
    0% {
        opacity: 0;
        transform:
            translateZ(-120px) rotateZ(-1.4deg) scaleX(.3) scaleY(.92);
    }

    35% {
        opacity: 1;
        transform:
            translateZ(8px) rotateZ(.5deg) scaleX(1.06) scaleY(.98);
    }

    65% {
        opacity: 1;
        transform:
            translateZ(0) rotateZ(-.2deg) scaleX(.985) scaleY(1.005);
    }

    100% {
        opacity: 1;
        transform:
            translateZ(0) rotateZ(0) scaleX(1) scaleY(1);
    }
}



@keyframes enterFrontDive {
    0% {
        opacity: 0;
        transform:
            translateZ(-260px) translateY(34px) rotateX(16deg) rotateZ(-2deg) scale3d(.88, .84, 1);
    }

    55% {
        opacity: 1;
        transform:
            translateZ(30px) translateY(-2px) rotateX(-5deg) rotateZ(.5deg) scale3d(1.015, 1.02, 1);
    }

    100% {
        opacity: 1;
        transform:
            translateZ(0) translateY(0) rotateX(0) rotateZ(0) scale3d(1, 1, 1);
    }
}


@keyframes enterEditorialFlip {
    0% {
        opacity: 0;
        transform:
            translateZ(-170px) rotateY(-24deg) rotateZ(-4deg) scale3d(.9, .93, 1);
    }

    48% {
        opacity: 1;
        transform:
            translateZ(18px) rotateY(6deg) rotateZ(.8deg) scale3d(1.015, 1.01, 1);
    }

    100% {
        opacity: 1;
        transform:
            translateZ(0) rotateY(0) rotateZ(0) scale3d(1, 1, 1);
    }
}



@keyframes meteorDropEnter {
    0% {
        opacity: 0;
        transform:
            translateY(-180px) translateZ(-260px) rotateX(-28deg) rotateZ(8deg) scale3d(.72, 1.18, 1);
    }

    45% {
        opacity: 1;
        transform:
            translateY(18px) translateZ(40px) rotateX(10deg) rotateZ(-3deg) scale3d(1.06, .9, 1);
    }

    70% {
        transform:
            translateY(-8px) translateZ(0) rotateX(-4deg) rotateZ(1deg) scale3d(.98, 1.03, 1);
    }

    100% {
        opacity: 1;
        transform:
            translateY(0) translateZ(0) rotateX(0) rotateZ(0) scale3d(1, 1, 1);
    }
}



@keyframes paperSwingEnter {
    0% {
        opacity: 0;
        transform:
            translateZ(-140px) rotateX(-42deg) rotateZ(-7deg) scaleY(.82) scaleX(1.04);
    }

    30% {
        opacity: 1;
        transform:
            translateZ(10px) rotateX(20deg) rotateZ(4deg) scaleY(1.04) scaleX(.99);
    }

    50% {
        transform:
            translateZ(0) rotateX(-12deg) rotateZ(-2deg) scaleY(.98) scaleX(1.01);
    }

    72% {
        transform:
            rotateX(6deg) rotateZ(1deg) scaleY(1.01);
    }

    100% {
        opacity: 1;
        transform:
            translateZ(0) rotateX(0) rotateZ(0) scaleX(1) scaleY(1);
    }
}



@keyframes accordionSnapEnter {
    0% {
        opacity: 0;
        transform:
            translateZ(-90px) scaleX(.18) scaleY(.94) rotateZ(-1.5deg);
    }

    38% {
        opacity: 1;
        transform:
            translateZ(24px) scaleX(1.08) scaleY(.97) rotateZ(.6deg);
    }

    62% {
        transform:
            translateZ(0) scaleX(.96) scaleY(1.01) rotateZ(-.3deg);
    }

    100% {
        opacity: 1;
        transform:
            translateZ(0) scaleX(1) scaleY(1) rotateZ(0);
    }
}



@keyframes helixDriftEnter {
    0% {
        opacity: 0;
        transform:
            translateX(90px) translateY(-40px) translateZ(-240px) rotateY(-26deg) rotateZ(-12deg) scale3d(.78, .88, 1);
    }

    35% {
        opacity: 1;
        transform:
            translateX(-24px) translateY(12px) translateZ(32px) rotateY(12deg) rotateZ(6deg) scale3d(1.04, .98, 1);
    }

    65% {
        transform:
            translateX(8px) translateY(-4px) translateZ(0) rotateY(-5deg) rotateZ(-2deg) scale3d(.99, 1.02, 1);
    }

    100% {
        opacity: 1;
        transform:
            translateX(0) translateY(0) translateZ(0) rotateY(0) rotateZ(0) scale3d(1, 1, 1);
    }
}




@keyframes stageFlipEnter {
    0% {
        opacity: 0;
        transform:
            translateZ(-210px) rotateY(58deg) rotateZ(-4deg) scale3d(.88, .92, 1);
    }

    50% {
        opacity: 1;
        transform:
            translateZ(18px) rotateY(-10deg) rotateZ(1deg) scale3d(1.01, 1.01, 1);
    }

    100% {
        opacity: 1;
        transform:
            translateZ(0) rotateY(0) rotateZ(0) scale3d(1, 1, 1);
    }
}



@keyframes rubberLensEnter {
    0% {
        opacity: 0;
        transform:
            translateZ(-130px) scaleX(.55) scaleY(1.28) rotateZ(-4deg);
    }

    28% {
        opacity: 1;
        transform:
            translateZ(24px) scaleX(1.1) scaleY(.86) rotateZ(2deg);
    }

    52% {
        transform:
            translateZ(0) scaleX(.94) scaleY(1.06) rotateZ(-1deg);
    }

    76% {
        transform:
            scaleX(1.02) scaleY(.98) rotateZ(.4deg);
    }

    100% {
        opacity: 1;
        transform:
            translateZ(0) scaleX(1) scaleY(1) rotateZ(0);
    }
}




@keyframes vaultDropEnter {
    0% {
        opacity: 0;
        transform:
            translateY(-90px) translateZ(-180px) rotateX(-18deg) scale3d(.92, 1.14, 1);
    }

    52% {
        opacity: 1;
        transform:
            translateY(10px) translateZ(20px) rotateX(8deg) scale3d(1.02, .95, 1);
    }

    78% {
        transform:
            translateY(-4px) translateZ(0) rotateX(-3deg) scale3d(.995, 1.02, 1);
    }

    100% {
        opacity: 1;
        transform:
            translateY(0) translateZ(0) rotateX(0) scale3d(1, 1, 1);
    }
}



@keyframes sidewinderEnter {
    0% {
        opacity: 0;
        transform:
            translateX(-120px) translateZ(-100px) rotateY(28deg) rotateZ(5deg) scaleX(.82) scaleY(.96);
    }

    42% {
        opacity: 1;
        transform:
            translateX(14px) translateZ(12px) rotateY(-8deg) rotateZ(-1.2deg) scaleX(1.03) scaleY(.99);
    }

    70% {
        transform:
            translateX(-4px) rotateY(2deg) rotateZ(.3deg) scaleX(.995) scaleY(1.01);
    }

    100% {
        opacity: 1;
        transform:
            translateX(0) translateZ(0) rotateY(0) rotateZ(0) scaleX(1) scaleY(1);
    }
}




@keyframes brokenCompassEnter {
    0% {
        opacity: 0;
        transform:
            translateX(60px) translateY(-70px) translateZ(-220px) rotateX(18deg) rotateY(-18deg) rotateZ(14deg) scale3d(.74, .82, 1);
    }

    26% {
        opacity: 1;
        transform:
            translateX(-18px) translateY(24px) translateZ(18px) rotateX(-10deg) rotateY(10deg) rotateZ(-6deg) scale3d(1.06, .94, 1);
    }

    54% {
        transform:
            translateX(8px) translateY(-10px) translateZ(0) rotateX(4deg) rotateY(-4deg) rotateZ(2deg) scale3d(.98, 1.03, 1);
    }

    100% {
        opacity: 1;
        transform:
            translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0) scale3d(1, 1, 1);
    }
}




@keyframes appearMonolithUp {
    0% {
        opacity: 0;
        transform:
            translateY(140px) translateZ(-120px) rotateX(28deg) scaleY(.18) scaleX(.92);
        clip-path: inset(100% 0 0 0);
    }

    45% {
        opacity: 1;
        transform:
            translateY(-10px) translateZ(24px) rotateX(-8deg) scaleY(1.06) scaleX(.98);
        clip-path: inset(18% 0 0 0);
    }

    72% {
        transform:
            translateY(6px) translateZ(0) rotateX(4deg) scaleY(.98) scaleX(1.01);
        clip-path: inset(0 0 0 0);
    }

    100% {
        opacity: 1;
        transform:
            translateY(0) translateZ(0) rotateX(0) scaleY(1) scaleX(1);
        clip-path: inset(0 0 0 0);
    }
}


@keyframes appearTriangleBloom {
    0% {
        opacity: 0;
        transform:
            translateY(40px) translateZ(-140px) rotateZ(-6deg) scale3d(.3, .3, 1);
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%);
    }

    40% {
        opacity: 1;
        transform:
            translateY(-8px) translateZ(18px) rotateZ(2deg) scale3d(1.04, .96, 1);
        clip-path: polygon(50% 0, 0 100%, 100% 100%);
    }

    72% {
        transform:
            translateY(4px) translateZ(0) rotateZ(-1deg) scale3d(.99, 1.02, 1);

    }

    100% {
        opacity: 1;
        transform:
            translateY(0) translateZ(0) rotateZ(0) scale3d(1, 1, 1);
        clip-path: inset(0 0 0 0);
    }
}



@keyframes appearRadarSweep {
    0% {
        opacity: 0;
        transform:
            translateZ(-150px) rotateZ(-18deg) scale3d(.76, .76, 1);
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%);
    }

    34% {
        opacity: 1;
        transform:
            translateZ(16px) rotateZ(6deg) scale3d(1.04, .96, 1);
        clip-path: polygon(50% 50%, 100% 0, 100% 100%);
    }

    58% {
        transform:
            translateZ(0) rotateZ(-2deg) scale3d(.99, 1.02, 1);
        clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%);
    }

    100% {
        opacity: 1;
        transform:
            translateZ(0) rotateZ(0) scale3d(1, 1, 1);
        clip-path: inset(0 0 0 0);
    }
}


@keyframes fadeUpIn {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }

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




.box-dialog {
    border: 2px solid red;
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.box-dialog p {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: black !important;
    text-align: justify !important;
    font-family: "Vibur", cursive !important;
    font-style: normal !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    padding: 5px;
    line-height: 33px;
}

#c-display-change.display_flex {
    display: flex;
}

#c-display-change.display_none {
    display: none;
}