.mod-container {
    position: fixed;
    min-height: 100vh;
    padding-bottom: 1000px;
    z-index: 1000;
}

.side-carrinho {
    background-color: var(--bg-200);
    min-height: 100vh;
}

.topo {
    padding-top: 30px;
}

.topo span{
    color: var(--text-100);
    font-size: 24px;
    padding: 3px;
    border-radius: 0.375rem;
}

.fechar span:hover {
    cursor: pointer;
    background-color: var(--red);
    color: #fff;
}

.lista {
    margin: 15px;
    border: 2px solid var(--bg-300);
    border-radius: 0.375rem;
    max-height: 490px;
}

.produto {
    border-bottom: 1px solid var(--bg-300);
    padding: 5px;
    margin: 5px;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.zerar {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.produto img {
    width: 50px;
    height: 50px;
    border-radius: 0.375rem;
}

.delete span {
    font-size: 24px;
    padding: 3px;
    border-radius: 0.375rem;
    cursor: pointer;
    color: var(--text-100);
}

.delete span:hover {
    background: var(--red);
    color: #fff;
}

.valor {
    padding-left: 10px;
}

.finalizar button{
    width: 100%;
    font-size: 20px;
    min-width: 30%;
    height: 40px;
    border: none;
    cursor: auto;
    border-radius: 0.375rem;
    background-color: var(--primary-100);
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.finalizar button:hover {
    background-color: var(--primary-200);
}

.finalizar span {
    padding-left: 10px;

}

/* Estilo para a barra de rolagem inteira */
::-webkit-scrollbar {
    width: 10px; /* Largura da barra de rolagem */
  }
  
  /* Estilo para o trilho da barra de rolagem */
  ::-webkit-scrollbar-track {
    background-color: null; /* Cor do fundo do trilho */
  }
  
  /* Estilo para o polegar da barra de rolagem (a parte que se move) */
  ::-webkit-scrollbar-thumb {
    background-color: var(--bg-300); /* Cor do polegar */
    border-radius: 0.375rem; /* Bordas arredondadas */
  }
  
  /* Estilo quando o polegar está sendo "clicado" */
  ::-webkit-scrollbar-thumb:active {
    background-color: var(--text-100); /* Cor do polegar ativo */
  }

.esconderSide{
    display: none;
}
#areaLivre{
    background-color: #c2baa68c;
    cursor: pointer;
}
@media only screen and (max-width: 768px) {
    .lista {
        max-height: 700px;
    }
}