#avaliacoes{
    padding: 15px;
    overflow: hidden;
    position: relative;
}

#avaliacoes .row{
    justify-content: center;
}

.containerAvaliacoes{
    margin: auto;
    width: fit-content;
    display: flex;
}

.circleAvaliacao{
    width: 500px;
    aspect-ratio: 1/1;
    position: absolute;
    z-index: 0;
    
    border-radius: 100%;
}

#circleA1{
    left: 0;
    background-color: #ea4335;
    margin-left: -250px;
    margin-top: -280px;
    z-index: 1;
}

#circleA2{
    right: 0;
    margin-right: -250px;
    margin-top: -200px;
    background-color: #34a853;
}

#circleA3{
    right: 0;
    margin-left: 950px;
    margin-top: -150px;
    background-color: #4285f4;
    width: 200px;
    

}

#circleA4{
    left: 0;
    margin-right: -250px;
    margin-top: -90px;
    background-color: #fbbc05;
    width: 200px;
}

.avaliacao{
    z-index: 100;
    display: inline-block;
    max-width: 320px;
    height: 180px;
    overflow: hidden;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 3px 3px 7px #0b35609a;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.avaliacaoMobile{
    margin: 0.5rem auto;
    display: block; 
    width: 320px;
}

.divAvaliacao{
    z-index: 99;
    height: fit-content;
    width: 100%;
    display: block;
    align-items: center;
    justify-content: center;
}


#avaliacoesMobile{
    display: none;
    height: fit-content;
}

.slider-avaliacao{
    overflow-x: scroll;
    overflow-y: hidden;
    height: 100%;
}

.slider-avaliacao::-webkit-scrollbar {
    display: none !important; 
  }
  
  .slider-avaliacao::-webkit-scrollbar-thumb {
    display: none !important; 
  }
  
  .slider-avaliacao::-webkit-scrollbar-track {
    display: none !important; 
  }
  

.slides-avaliacao{
    width: 400%;
    max-width: 400%;
    height: fit-content;
    display: flex;
}

.slides-avaliacao input{
    display: none;
}

.navigation-manual{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px
}



.navigation-manual label {
    
    border-radius: 100%;
    padding: 5px;
    cursor: pointer;
    transition: .5s;
}

.navigation-manual label:first-child{
    border: solid 2px #ea4335;

}

.navigation-manual label:first-child:hover{
    background-color: #ea4335;

}

.navigation-manual label:nth-child(2){
    border: solid 2px #fbbc05;

}

.navigation-manual label:nth-child(2):hover{
    background-color: #fbbc05;

}


.navigation-manual label:nth-child(3){
    border: solid 2px #34a853;

}

.navigation-manual label:nth-child(3):hover{
    background-color: #34a853;

}

.navigation-manual label:last-child{
    border: solid 2px #4285f4 ;

}


.navigation-manual label:last-child:hover{
    background-color: #4285f4;

}


.navigation-manual label:not(:last-child) {
    margin-right: 15px;
}

.avaliacao img{
    width: 25px;
    aspect-ratio: 1/1;
}

.avaliacao p{
    color: black;
    font-size: 12px;
    text-align: justify;
    overflow: auto;
    margin: 5px 0 0 0;
    max-height: 90px;
    padding-right: 5px;
}

.avaliacao i, .avaliacao span{
    font-size: 12px;
    margin-left: 5px;
}

.headerAvaliacao{
    border-bottom: 1px solid rgb(160, 160, 160);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 5px;
}
 
.estrela {
    float: right;
    cursor: pointer;
    font-size: 20px !important;
    color: #666;
}

.estrela:before {
    content: '★';  
}

.footerAvaliacao{
    float: inline-end;
}



.estrelaChecked {
    color: #ffa723;
}
  
@media screen and (max-width: 425px) {
    .avaliacao{
        max-width: 90%;

    }
  }


@media screen and (max-width: 446px) {

    #avaliacoes{
        padding: 15px 0;
    }
    #avaliacoesMobile{
        display: block;
    }
    #avaliacoesDesktop{
        display: none;
    }

    #circleA1{
        left: 0;
        background-color: #ea4335;
        margin-left: -160px;
        margin-top: -50px;
        z-index: 1;
        width: 200px;
    }
    
    #circleA2{
        right: 0;
        margin-right: -100px;
        margin-top: -200px;
        background-color: #34a853;
        width: 150px;
    }
    
    #circleA3{
        right: 0;
        margin-right: -100px;
        margin-top: 200px;
        background-color: #4285f4;
        width: 150px;
        
    
    }
    
    #circleA4{
        left: 0;
        margin-left: -100px;
        margin-top: -70px;
        background-color: #fbbc05;
        width: 150px;
    }
}