:root {
    --body-bg: #ffffff;
    --body-color: #555;
    --link-color: #222;
    --link-color-hover: #154183;
    --title-background: #e7ebee;
    --div-border:#d0e3e4;
  
  }
  
  
  .dark-mode:root {
    --body-bg: #212529;
    --body-color: #c5cbcf;
    --link-color: #dee2e6;
    --link-color-hover: #5189be;
    --title-background: #0f0f0f;
    --div-border: #263435;
  }



body{
    background-color: var(--body-bg);
    color: var(--body-color);
}

a, a:visited {
   color: var(--link-color);
}

a:hover {
color: var(--link-color-hover);
}


.app-top{

    width: 100%;
        border-bottom: 1px solid var(--div-border);
}

.app-main-container{
    display: flex;
    flex-wrap: nowrap;
    border-bottom: 1px solid var(--div-border);
        
}

.app-content{
    flex-basis: 0;
    flex-grow: 2;

min-height: 650px;
padding: 30px;
}






.app-paths{
    flex-basis: 0;
flex-grow: 1;
border-left: 1px solid var(--div-border);
}

.app-paths-mobile{
    flex-basis: 0;
flex-grow: 1;
color:#e7edee;
}

.app-path{
padding: 20px;
  
    border-bottom: 1px solid var(--div-border);
    
}

.app-path-mobile{
    padding: 20px;
        
        border-bottom: 1px solid var(--div-border);
   
   }

   .app-path-title{
    font-weight: bold;
   }



.app-path-on{

    background-color: var(--primary-color-400);
    color: white;
}

.app-path-done{
    background-color:var(--body-bg);
    
    font-weight: normal;
    
}


.app-mod{
    padding: 20px;
      
        border-bottom: 1px solid var(--div-border);
        
    }

.app-mod-on{
 
font-weight: bold;
}

.app-mod-done{
   

    
    color: var(--green-500);
    
    
}

.app-mod-title{
    font-weight: bold;
    
   }
  


.app-footer{
    width: 100%;
}




.top-center{
    margin: auto;
    display: flex;
    align-items: center;
    height: 100px;
   
    
}

.top-logo{
     flex-grow: 2;
 
}


.img-logo{
    width: 200px;
    padding: 10px;
    
    }


    .top-menu{
        flex-grow: 3;
         display: flex;
        justify-content: flex-end;
        align-items: center;
        
    }
    
    
    .menu-icon{
        display: none;
       text-align: right;
       padding-right: 20px;
    }




.profile{
    
    width: 50px;
    height: 50px;
}

.profile-image{
    width:50px;
    height: 50px;
    border-radius: 50%;
}


.score{
    
    
    height: 30px;
    border-radius: 10px;
    display: flex;
    padding: 15px;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    border: 1px solid #dbc783;

}

.score-mobile{
    color:#FFFFFF;
    height: 30px;
    width: 250px;
    border-radius: 10px;
    display: flex;
    padding: 15px;
    justify-content: center;
    align-items: center;
    font-size: 12px;


}



.star{
color: #dac257;
    
}


.menu {
    padding-right: 20px;
    margin-left: 20px;
}

.menu ul{
    list-style-type: none;
    margin:0;
    padding:0;
  }
  
  .menu li{
    display: inline;
    padding:3px;
    margin: 3px;
       

  }

.auto-width{
    width: 100%;
}



.chevron{
    background-color: aqua;
    width: 120px;
    height: 555px;
}

.hand{
    cursor: pointer;
}


.trophy_0{
       
    color:#e6c5a4;
}

.trophy_1{
       
    color:#ddc095;
}

.trophy_2{

      color: #758c9b;

}

.trophy_3{

    color: #bea11c;
   
}


.confetti {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
opacity: 1;
animation: fall 2s linear forwards;
}

@keyframes fall {
 to {
transform: translateY(100vh);
 opacity: 0;
     }
}



.main-img-profile-div{
    display: none;
    justify-content: center;

}

.main-img-profile{
    width:120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid #d4d7da;
    padding: 5px;
}






.menu-top{

    
    display: flex;
    justify-content: center;
    padding-top: 30px;
    padding-bottom: 20px;
    color: #fff;
}


#menu-mobile-itens-div{	display:none;}
#menu-mobile-div{
    display:none;
    position:absolute;
    width:1px;
    background-color:#252424;    
     z-index:100;
    top: 0;
    bottom: 0;
   
     overflow-y: auto;
     
     }

#menu-mobile-itens-div{
    display:none;
}
.btn-menu-mobile-div{
    
    color:#FFFFFF;
    padding-left:10px;
    padding-top:10px;
    padding-bottom:10px;
    margin:5px;
   }




  .app-footer
  {

width: 100%;
background-color: #212529;
color: #fff;
min-height: 450px;
  }

  .app-footer a{
    color: #FFFFFF;
      }

.app-footer a:hover{
        color: #FFFFFF;
          }
    
  .bottom-center{
   
    margin: auto;
    padding: 30px;
    display: flex;
  }

  .bottom-item{
    flex-grow: 1;
    flex-basis: 0;
  }





@media (max-width: 767px) {


    .menu-icon{display: block;}

    .main-img-profile-div{display: flex;}

.top-menu{
    display: none;
}
.btn-login{

    display: none;
    
}

.app-main-container{
    display: block;
}

.app-paths{
    display: none;
}


    .bottom-center{
        display: block;
    }


    .bottom-item-align{
        text-align: center;
        padding-top: 20px;
    }

   

}


@media (min-width: 768px) {
    
    
   


.top-center{
    width: 760px;
    
    
    
}



.bottom-center{
    width: 760px;
    
}   





    }



@media (max-width:992px) {

  
    
}



@media (min-width:992px) {

    .top-center{
        width: 980px;
        
    }

    

    

    .bottom-center{
        width: 980px;
    }
      

 
    
  
    
}


@media (min-width: 1200px) {

    .top-center{
        width: 1100px;
        
    }
    
   

    .bottom-center{
        width: 1100px;
    }

   
    

}


@media (min-width: 1400px) { 

    .top-center{
        width: 1300px;
        
        
    }
    

.bottom-center{
    width: 1300px;
}

}





@media (min-width: 1700px) { 

    .top-center{
        width: 1700px;
        
        
    }
    

.bottom-center{
    width: 1700px;
}

}