/*AREA DO SISTEMA DE BALCAO*/

.mobile{
    display: none;
}
.desktop{
    display: block;
}


.associado_info{
    margin-top: 5px;
    text-align: left;
    padding:10px 5px;
    border: 1px solid #d3d3d3;
    border-radius: 10px;
}

.carrinho-vazio{
    padding: 50px 10px;
}

.card-produto{
    width: 100%;
    min-height: 370px;
    background: var(--white);
    border-radius: 5px;
    box-shadow: 1px 7px 5px #d3d3d3;
    margin:15px 5px ;
}

.imagem-produto{
    width: 100%;
    height: 140px;
    object-fit: cover;
    margin-bottom: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.card-produto-descricao{
    padding:5px 15px;
}

.card-produto-estoque span{
    background-color: var(--primary-dark);
    color: var(--white);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 20px;
    padding:5px 10px;
}

.nome-produto{
    font-size: 20px;
    color: #000;
}
.preco-produto{
    font-size: 15px;
    color: var(--primary-dark);
    font-weight: bold;
}

.preco-produto-2{
    font-size: 15px;
    color: #000;
    font-weight: bold;
}

.header-top-loja{
    width: 100%;
    margin: 0 !important;
    height: 70px;
    color: #000;
    padding: 15px 30px;

}

.header-carrinho{
    width: 180px;
    background: var(--dark);
    border-radius: 5px;
    color: var(--white);
    padding: 10px 15px;
    text-align: left;
    cursor: pointer;
}

.header-carrinho:hover{
    background-color:var(--primary-light) ;
}

.header-carrinho a{
    text-decoration: none;
    color:var(--white) ;
}

.header-carrinho:hover a{
    color:var(--dark);
}


.categoria-loja{
    width: 100%;
    margin: 0 !important;
    text-align: center;
    padding:15px 5px ;
}

.categoria-loja ul {
    list-style:none;
}

.categoria-loja ul li{
    display: inline;
    margin: 5px 5px ;
}

.categoria-loja ul li a{
    display: inline-block;
    text-decoration: none;
}

.categoria-loja-item:hover{
    background: var(--primary-light);
}
.categoria-loja ul li a:hover{
    color:var(--dark);
}

.categoria-loja-item{
    background: var(--primary);
    border-radius: 5px;
    color: var(--white);
    min-width: 120px;
    padding: 10px 15px;
    text-align: center; 
    margin: 5px;
}

.categoria-loja-item a{
    text-decoration: none;
    color: var(--white);
}

.categoria-loja-item-mobile{
    background: var(--white);
    border-radius: 5px;
    color: #000;
    width: 120px;
    padding: 10px 15px;
    text-align: center; 
}


.table-carrinho {
    border: 1px solid #999;
    width: 100%;
    margin:50px 5px ;
    background-color:var(--white) ;
}
.table-carrinho th {
    padding:10px 5px;
    text-align: center;
    border: 1px solid #d3d3d3;
    background-color: #000;
    color:var(--white) ;
}

.table-carrinho td {
    border: 1px solid #d3d3d3;
    padding:10px 5px;
    text-align: center;
}

#foto_produto{
    max-width: 70px;
}

#nome_produto{
    margin-left: 10px;
}
.produto_quantidade_carrinho{
    padding:10px 15px;
    width: 75px;
    border: 1px solid #888;
}

.btn-del-item{
    text-decoration: none;
    color: #000;
}

.total-carrinho h4{
    font-size: 2em;
    font-weight: bold;
}

.total-carrinho p{
    font-size: 2em;
}

.btn-altera-quantidade{
    padding:10px 15px; 
    border-radius:2px;
    background-color: #000;
    color: var(--white);
    border: none;
    margin-left: 2px;
}

.btn-limpa-carrinho{
    margin-top: 10px;
}


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



.foto-galeria-admin{
    object-fit: cover;
    width: 300px;
    height: 300px;
    border-radius: 10px;
}

.brand-logo{
  color: var(--primary);
}

.auth{
  background-color: var(--primary-dark) !important;
}

.btn-login-color{
    background-color:var(--primary);
    color: var(--white);
}
.btn-login-color:hover{
    background-color:var(--primary-light);
    color: var(--dark);
}

.ajax-file-upload-statusbar{
    display: none !important;
}
.ajax-file-upload-container{
    min-height: 0px !important;
}


.navbar.default-layout-navbar .navbar-menu-wrapper {
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.navbar.default-layout-navbar .navbar-brand-wrapper {
    background: var(--white);
}

.pagination .page-item.active .page-link, .jsgrid .jsgrid-pager .page-item.active .page-link, .jsgrid .jsgrid-pager .active.jsgrid-pager-nav-button .page-link, .jsgrid .jsgrid-pager .active.jsgrid-pager-page .page-link, .pagination .page-item.active .jsgrid .jsgrid-pager .jsgrid-pager-nav-button a, .jsgrid .jsgrid-pager .page-item.active .jsgrid-pager-nav-button a, .jsgrid .jsgrid-pager .jsgrid-pager-nav-button .page-item.active a, .jsgrid .jsgrid-pager .active.jsgrid-pager-nav-button a, .pagination .page-item.active
.jsgrid .jsgrid-pager .jsgrid-pager-page a, .jsgrid .jsgrid-pager .page-item.active .jsgrid-pager-page a, .jsgrid .jsgrid-pager .jsgrid-pager-page .page-item.active a, .jsgrid .jsgrid-pager .active.jsgrid-pager-page a, .pagination .page-item:hover .page-link, .jsgrid .jsgrid-pager .page-item:hover .page-link, .jsgrid .jsgrid-pager .jsgrid-pager-nav-button:hover .page-link, .jsgrid .jsgrid-pager .jsgrid-pager-page:hover .page-link, .pagination .page-item:hover .jsgrid .jsgrid-pager .jsgrid-pager-nav-button a, .jsgrid .jsgrid-pager .page-item:hover .jsgrid-pager-nav-button a, .jsgrid .jsgrid-pager .jsgrid-pager-nav-button .page-item:hover a, .jsgrid .jsgrid-pager .jsgrid-pager-nav-button:hover a, .pagination .page-item:hover
.jsgrid .jsgrid-pager .jsgrid-pager-page a, .jsgrid .jsgrid-pager .page-item:hover .jsgrid-pager-page a, .jsgrid .jsgrid-pager .jsgrid-pager-page .page-item:hover a, .jsgrid .jsgrid-pager .jsgrid-pager-page:hover a, .pagination .page-item:focus .page-link, .jsgrid .jsgrid-pager .page-item:focus .page-link, .jsgrid .jsgrid-pager .jsgrid-pager-nav-button:focus .page-link, .jsgrid .jsgrid-pager .jsgrid-pager-page:focus .page-link, .pagination .page-item:focus .jsgrid .jsgrid-pager .jsgrid-pager-nav-button a, .jsgrid .jsgrid-pager .page-item:focus .jsgrid-pager-nav-button a, .jsgrid .jsgrid-pager .jsgrid-pager-nav-button .page-item:focus a, .jsgrid .jsgrid-pager .jsgrid-pager-nav-button:focus a, .pagination .page-item:focus
.jsgrid .jsgrid-pager .jsgrid-pager-page a, .jsgrid .jsgrid-pager .page-item:focus .jsgrid-pager-page a, .jsgrid .jsgrid-pager .jsgrid-pager-page .page-item:focus a, .jsgrid .jsgrid-pager .jsgrid-pager-page:focus a, .pagination .page-item:active .page-link, .jsgrid .jsgrid-pager .page-item:active .page-link, .jsgrid .jsgrid-pager .jsgrid-pager-nav-button:active .page-link, .jsgrid .jsgrid-pager .jsgrid-pager-page:active .page-link, .pagination .page-item:active .jsgrid .jsgrid-pager .jsgrid-pager-nav-button a, .jsgrid .jsgrid-pager .page-item:active .jsgrid-pager-nav-button a, .jsgrid .jsgrid-pager .jsgrid-pager-nav-button .page-item:active a, .jsgrid .jsgrid-pager .jsgrid-pager-nav-button:active a, .pagination .page-item:active
.jsgrid .jsgrid-pager .jsgrid-pager-page a, .jsgrid .jsgrid-pager .page-item:active .jsgrid-pager-page a, .jsgrid .jsgrid-pager .jsgrid-pager-page .page-item:active a, .jsgrid .jsgrid-pager .jsgrid-pager-page:active a {
  background: #000;
  border-color: #000;
  color: var(--white);
}

@media (max-width: 680px){
    .navbar-toggler{
        margin-left: 50%;
    }
    .mobile{
        display: block;
    }
    .desktop{
        display: none;
    }
}