/*******************************************************************************************************
*
######  ##       #### ########  ########     ######   #######  ##     ## ##     ##  #######  ##    ## 
##    ## ##        ##  ##     ## ##          ##    ## ##     ## ###   ### ###   ### ##     ## ###   ## 
##       ##        ##  ##     ## ##          ##       ##     ## #### #### #### #### ##     ## ####  ## 
 ######  ##        ##  ##     ## ######      ##       ##     ## ## ### ## ## ### ## ##     ## ## ## ## 
      ## ##        ##  ##     ## ##          ##       ##     ## ##     ## ##     ## ##     ## ##  #### 
##    ## ##        ##  ##     ## ##          ##    ## ##     ## ##     ## ##     ## ##     ## ##   ### 
 ######  ######## #### ########  ########     ######   #######  ##     ## ##     ##  #######  ##    ##
*
*******************************************************************************************************/ 

.slideBox{
    border-top-width: 10px;
    border-left-width: 0;
    border-bottom-width: 0;
    border-right-width: 10px;
    border-style: solid;
    margin: 10px 10px 0 0;
    padding: 10px;
}

.simulation_box{
    padding: 10px;
}


/**************************************************************************
*
########   #######  ########     ######  #### ##     ## ##     ## ##       
##     ## ##     ##    ##       ##    ##  ##  ###   ### ##     ## ##       
##     ## ##     ##    ##       ##        ##  #### #### ##     ## ##       
########  ##     ##    ##        ######   ##  ## ### ## ##     ## ##       
##     ## ##     ##    ##             ##  ##  ##     ## ##     ## ##       
##     ## ##     ##    ##       ##    ##  ##  ##     ## ##     ## ##       
########   #######     ##        ######  #### ##     ##  #######  ########
*
***************************************************************************/
.button_simulate{
    display: flex;
    flex-direction: row;
    align-items: center;
    color: white;
    background-color: #DA8101;
    border: 2px solid white;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    border-radius: 50px;
    padding: 4px 10px;
    gap: 10px;
    font-weight: bolder;
    white-space: nowrap;
    cursor: pointer;
}

.button_simulate img{
    border: none !important;
}

.button_general{
    display: flex;
    flex-direction: row;
    align-items: center;
    color: white;
    background-color: #F2B705;
    border: 2px solid white;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    border-radius: 50px;
    padding: 4px 10px;
    gap: 10px;
    font-weight: bolder;
    white-space: nowrap;
    cursor: pointer;
}

.button_general img{
    border: none !important;
}


@media (max-width:611px){
    .button_simulate{
        font-size: 24px;
    }
    
    .button_simulate img{
        width: 30px;
    }

    .button_general{
        font-size: 20px;
    }
    
    .button_general img{
        width: 27px;
    }
}

@media (min-width:612px) and (max-width:923px){
    .button_simulate{
        font-size: 28px;
    }
    
    .button_simulate img{
        width: 35px;
    }


    .button_general{
        font-size: 24px;
    }
    
    .button_general img{
        width: 30px;
    }
}

@media (min-width:924px) and (max-width:1235px){
    .button_simulate{
        font-size: 32px;
    }
    
    .button_simulate img{
        width: 40px;
    }

    .button_general{
        font-size: 24px;
    }
    
    .button_general img{
        width: 35px;
    }
}

@media (min-width:1236px){
    .button_simulate{
        font-size: 36px;
    }
    
    .button_simulate img{
        width: 45px;
    }

    .button_general{
        font-size: 28px;
    }
    
    .button_general img{
        width: 38px;
    }
}


/************************************************************************************
*
##    ##    ###    ##     ## ########  ##     ## ######## ########  #######  ##    ## 
###   ##   ## ##   ##     ## ##     ## ##     ##    ##       ##    ##     ## ###   ## 
####  ##  ##   ##  ##     ## ##     ## ##     ##    ##       ##    ##     ## ####  ## 
## ## ## ##     ## ##     ## ########  ##     ##    ##       ##    ##     ## ## ## ## 
##  #### #########  ##   ##  ##     ## ##     ##    ##       ##    ##     ## ##  #### 
##   ### ##     ##   ## ##   ##     ## ##     ##    ##       ##    ##     ## ##   ### 
##    ## ##     ##    ###    ########   #######     ##       ##     #######  ##    ##
*
*************************************************************************************/

.NavButton1{
    padding: 3px 15px;
    border-radius: 30px;
    border: 2px solid white;
    background-color: white;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

/******************************
*
########  ##          ###    ##    ##  ######     ###    ########  ########  
##     ## ##         ## ##   ###   ## ##    ##   ## ##   ##     ## ##     ## 
##     ## ##        ##   ##  ####  ## ##        ##   ##  ##     ## ##     ## 
########  ##       ##     ## ## ## ## ##       ##     ## ########  ##     ## 
##        ##       ######### ##  #### ##       ######### ##   ##   ##     ## 
##        ##       ##     ## ##   ### ##    ## ##     ## ##    ##  ##     ## 
##        ######## ##     ## ##    ##  ######  ##     ## ##     ## ########
*
******************************/

.planCard{
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;   
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
    padding: 30px;
}

@media (max-width:611px){
    .planCard{
        width: 200px;
        height: 310px;
        border-radius: 20px;
        gap: 20px;
    }
}

@media (min-width:612px) and (max-width:923px){
    .planCard{
        width: 250px;
        height: 300px;
        border-radius: 20px;
        gap: 25px;
    }
}

@media (min-width:924px) and (max-width:1235px){
    .planCard{
        width: 200px;
        height: 370px; 
        border-radius: 20px;
        gap: 30px;
    }
}

@media (min-width:1236px){
    .planCard{
        width: 250px;
        height: 330px;
        border-radius: 20px;
        gap: 30px;
    }
}

/************************************
*
########  ##    ##  ######   ######  
##     ## ###   ## ##    ## ##    ## 
##     ## ####  ## ##       ##       
########  ## ## ##  ######   ######  
##   ##   ##  ####       ##       ## 
##    ##  ##   ### ##    ## ##    ## 
##     ## ##    ##  ######   ######
*
************************************/
.RNSS_logo{
    background-color: white;
    height: auto;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);

}

@media (max-width:611px){
    .RNSS_logo{
        padding: 3px 8px;
        margin: 3px 2px 3px 3px;
        border-radius: 10px;
        width: 70px;
    }
}

@media (min-width:612px) and (max-width:923px){
    .RNSS_logo{
        padding: 3px 8px;
        margin: 3px 2px 3px 3px;
        border-radius: 10px;
        width: 110px;
    }
}

@media (min-width:924px) and (max-width:1235px){
    .RNSS_logo{
        padding: 3px 8px;
        margin: 15px 30px 10px 15px;
        border-radius: 20px;
        width: 150px;
    }
}

@media (min-width:1236px){
    .RNSS_logo{
        padding: 3px 8px;
        margin: 15px 30px 10px 15px;
        border-radius: 20px;
        width: 150px;
    }
}

/**************************************
*
##     ## ######## ##    ## ##     ## 
###   ### ##       ###   ## ##     ## 
#### #### ##       ####  ## ##     ## 
## ### ## ######   ## ## ## ##     ## 
##     ## ##       ##  #### ##     ## 
##     ## ##       ##   ### ##     ## 
##     ## ######## ##    ##  #######
*
**************************************/


/* garante contexto */
header {
    position: relative;
}

/* CONFIGURAÇÃO BASE */
.header-menu {
    background: #fff;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    z-index: 9999;
    overflow: hidden;

    transform-origin: top right;
    transform: scaleY(0);
    opacity: 0;

    transition: transform var(--menu-speed) ease,
                opacity var(--menu-speed) ease;

    padding-bottom: 15px;
    border-radius: 0 0 15px 15px;
}

/* DESKTOP */
@media (min-width: 769px) {
    .header-menu {
        position: absolute;
        top: 100%;
        right: 0;
        min-width: 220px;
    }

    .header-menu.open {
        transform: scaleY(1);
        opacity: 1;
    }
}

/* MOBILE / TABLET */
@media (max-width: 768px) {
    .header-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 80vw;
        height: 100vh;

        transform-origin: right center;
        transform: scaleX(0);
    }

    .header-menu.open {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* ITENS */
.header-menu-item {
    padding: 16px;
    cursor: pointer;
    font-size: 15px;
    border-bottom: 1px solid #eee;
    color : var(--color_green2);
    font-weight: bolder;
}

.header-menu-item:hover {
    background: #f0f0f0;
}

/* FEEDBACK BOTÃO */
#header_client_control_menu.active img {
    opacity: 0.6;
}



/*****************************
*
#######  ##       ########  
##     ## ##       ##     ## 
##     ## ##       ##     ## 
##     ## ##       ##     ## 
##     ## ##       ##     ## 
##     ## ##       ##     ## 
 #######  ######## ########
*
******************************/

.backGreen{
    background-color: #76E41E;
}

.backOrange{
    background-color: #DA8101;
}

.backBlue{
    background-color: #00A7BA;
}


/*********************************************************************************************************
**************************              ELEMENTOS COMUNS                  ********************************
**********************************************************************************************************/
select{
    outline: 1px solid white;
}



.button_network{
    color: #DA8101;
    border: 2px solid white;
    border-radius: 20px;
}



@media(max-width:600px){ /*CELL MODE*/


    .button_network{
        padding: 3px 15px;
    }
    
    

}


@media(min-width:600px){ /*DESKTOP MODE*/
    

    .button_network{
        padding: 4px 20px;
    }

    
}


/*********************************************************************************************************
**************************                   Padrões                      ********************************
**********************************************************************************************************/



.pageTitleLong{
    color: white;
}
.pageTitleLong h1{
    color: white;
}



.privacyNotice{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.privacyNotice > img{
    height: 50px;
}

.privacyNotice > p{
    font-size: 20px;
    width: 250px;
}

#privacyNotice_box{
    border: 3px solid white;
    border-radius: 30px;
    background-color: rgba(0, 0, 0, 0.8);
    display: none;
    flex-direction: column;
    gap: 30px;
    padding: 35px;
    width: 700px;
    position: absolute;
    left: calc((100% - 700px - 76px)/2);
    top: 250px
}

#privacyNotice_box_title{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    color: white;
    
}

#privacyNotice_box_logo{
    height: 150px;
}

#privacyNotice_box_close{
    height: 50px;
    align-self: flex-start;
    justify-self: flex-end;
    cursor: pointer;
}

.preConditions_box_text{
    color: white;
    font-size: 1.3em;

}

@media(max-width:600px){ /*CELL MODE*/
    #privacyNotice_box{
        width: 300px;  
        left: 5px;
        top: 50px;
        
    }
}


/*********************************************************************************************************
**************************             Barra de Rolagem                   ********************************
**********************************************************************************************************/
/* Para navegadores WebKit (Chrome, Edge, Safari, Opera) */
#text{

    white-space: pre-wrap; /* Importante: preserva quebra de linha e permite quebra automática */
    overflow: auto;
}
#text::-webkit-scrollbar {
    width: 22px; /* Largura da barra vertical */
    /* height: 12px; /* Altura da barra horizontal */
  }
  
  #text::-webkit-scrollbar-track {
    background: #e0e0e0; /* Cor do fundo da barra */
    border-radius: 6px;
  }
  
  #text::-webkit-scrollbar-thumb {
    background-color: #9568b6; /* Cor da "pegada" da barra */
    border-radius: 6px;
    border: 3px solid #e0e0e0; /* Espaço ao redor, cria efeito de borda */
  }
  
  #text::-webkit-scrollbar-thumb:hover {
    background-color: #7a26b6; /* Cor ao passar o mouse */
  }