.itensCarrinho{
    color: white;
    background-color: #272727;
    width: 17px;
    height: 17px;
    border-radius: 15px;
    position: relative;
    top: -18px;
    left: 45px;
    text-align: center;
    font-size: 10px;
}
.colorCliente {
    color: var(--cor-primaria);
}
.todos-os-produtos{
    border-radius: 0px !important;
    margin-top: -1px;
}
.todos-os-produtos-itens{
    border-bottom: solid 1px;
    border-color: #E8DEFF;
}
.mobi{
    display: none;
}
.inputPesquisarCabecalho {
    margin-top: 5%;
    margin-left: 2%;
    width: 97%;
}
.inputPesquisarCabecalho:focus {
    box-shadow: 0 0 0 0;
    border: 0 none;
    outline: 0;
}
.cabecalho{
    background-color: #2A4472;
    width: 100%;
}
.ul-cab {
    list-style-type: none;
    display: flex;
    width: 100%;
    color: #FFFFFF;
    font-size: 16px;
    font-family: "Tahoma";
    padding: 0;
    margin-right: 0;
    margin-top: 3%;
}
.ul-cab .li-cab .a-cab {        
    text-decoration:none;
    color: #FFFFFF;
    font-size: 16px;
    font-family: "Tahoma";
    margin-top: 10px;
    margin-left: 24px;
    padding-top: 0;
    display: block;
    cursor: pointer;
}
.ul-cab .li-cab .a-cab:hover {
    font-weight: bold;
}
.home {
    margin-left: 12%;
}
.topEsp {
    padding: 0px;
    margin: 0px;
}
.bemVindo {
    display: content;
    justify-content: center;
}
.linha{
    background-color: #909090;
    width: 100%;
    height: 5px;
}
/*----------Bem vindo - cadastre-se ---------*/
.controleDropdown {
    transform: none !important;
    top: 40px !important;
    left: 30px !important;
}
.loginCabecalho {
    overflow: hidden;
    float: left;
    font-size: 15px;
    color: #fff;
    margin-top: 13px;
    margin-left: 5px;
    padding-top: 15px;
    padding-left: 5px;
    text-shadow: 0 0 black;
    position: relative;
    bottom: -22px;
}  
.loginSecao {
    font-size: 13px;
    margin-top: 5px;
}
.bemVindoCabecalho {
    font-weight: 700;
} 
.loginCabecalho span {
    color: #fff;
}
.loginLink {
    font-size: 12px;
    text-decoration: none;
}
.loginCabecalho a, .loginCabecalho span {
    color: #fff;
}
a:hover, a:link, a:visited {
    cursor: pointer;
}
/*----------Alinhando icones favoritos e carrinho------*/
.alinharIconesHome {
    position: relative;
    top: 20px;
    right: 48px;
}
/*----------Botão novo pesquisar------------------------*/
.grupoFiltroHome{
    margin-top: 5%;
    margin-left: 2%;
    width: 97%;
    position: relative;
    bottom: -20px;
    z-index: 999;
}
#iconFiltroHome{
    width: 40px;
    background-color: #FFFFFF;
    padding: 0;
    z-index: 999;
}
.inputFiltroHome{
    height: 45px;
    position: relative; 
    z-index: 9;
}
.botaoFiltroHome{
    height: 45px;
    background-color: #FFFFFF;
    border-left: 0;
    z-index: 999;
}
#atividade {
    display: none;
}
.overlay {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease;
    z-index: 99;
}
/*----------icone dentro do input left e right ---------*/
#busca {
    max-width: 38px;
}
.inner-addon #busca {
    position: absolute;
    pointer-events: none;
    font-size: 25px;
}
.left-addon #busca  { 
    left:  0px;
    padding-left: 20px;
}
.right-addon #busca { 
    right: 0px;
    padding-right: 20px;
}

.left-addon input  { 
    padding-left:  30px; 
}
.right-addon input { 
    padding-right: 30px; 
}
/*----------icone favorito, carrinho, todos produtos  ---------*/
#carrinho {
    width: 60px;
    height: 45px;
    cursor: pointer;
    position: relative;
    right: 4px;
}
#favorito {
    width: 50px;
    height: 45px;
}
.alinharUser {

    margin-top: 15px;
    padding: 0px;
}
.alinhar {
    margin-top: 15px;
    padding: 0px;
}
#fa-bars {
    margin-right: 10px;
    cursor: pointer;
}
#chevron {
    margin-left: 10px;
    cursor: pointer;
}
#user { 
    width: 52px;
    height: 50px;
}
.alinharFav {
    margin-top: 18px;
}
/*----------icone Usuario  ---------*/
.left-user{
    padding: 0px;
    margin: 0px;
    margin-top: 20px;
}
.left-user {
    display: flex;
}
/*----------icone favorito e carrinho lado a lado  ---------*/
.lado-car{
    padding: 0px;
    margin: 0px;
    margin-top: 5px;
}
.lado-car {
    display: flex;
}
/*---------- Logo ---------*/
.logo {
    margin: 0;
    padding: 0;
    margin-bottom: 18px;
}
.alinharLogoHome {
    position: relative;
    bottom: -18px;
}
#buttonNavMobi {
    outline: 0;
    color: #FFFFFF;
}
#IconeX {
    margin-top: 15px;
    padding:0;
    padding-right: 10px;
    font-size: 40px;
    position: absolute;
    top: 0;
    color: #FFFFFF;
    width: 50px;        
    padding-top: 15px;
    padding-left: 5px;
    padding-bottom: 13px;
    background-color: #2A4472;
    right: -50px;
    top: -15px;
    text-align: center;
    cursor: pointer;
}
/* -------------------------------Celular---------------------------------------*/
.homeCabCel {
    margin: 0;
}
#buscaCel {
    width: 60px;
    z-index: 999;
}
.inner-addon #buscaCel {
    position: absolute;
    pointer-events: none;
    font-size: 25px;
}
.left-addon #buscaCel  { 
    left:  0px;
    padding-left: 20px;
}
.right-addon #buscaCel { 
    padding-right: 20px;
    padding-top: 5px;
}
.inner-addon #buscaCel {
    position: absolute;
    pointer-events: none;
    font-size: 25px;
}
.left-addon #buscaCel  { 
    left:  0px;
    padding-left: 20px;
}
.right-addon #buscaCel { 
    right: 0px;
    padding-right: 20px;
}
.itensFavoritosCel {
    color: white;
    background-color: #272727;
    width: 12px;
    height: 12px;
    border-radius: 15px;
    position: relative;
    bottom: 12px;
    left: 30px;
    text-align: center;
    font-size: 9px;
}
.alinharCarCel {
    padding: 0;
    padding-left: 9px;
}
.itensCarrinhoCel {
    color: white;
    background-color: #272727;
    width: 12px;
    height: 12px;
    border-radius: 15px;
    position: relative;
    bottom: 6px;
    left: 32px;
    text-align: center;
    font-size: 9px;
}

#fa-barsCelular {
    font-size: 30px;
    position: absolute;
    z-index: 1;
}
.burguerMenuCelular {  
    position: relative;
    bottom: -30px;
}
.iconesMobiCelular {
    position: relative;
    bottom: -12px;
}
.pesquisaMobiCelular {
    position: relative;
    bottom: 12px;
}
.divLogoCelular {
    position: relative;
    right: 26px;
}
#carrinhoCelular {
    width: 40px;
    height: 35px;
}
#favoritoCelular {
    width: 45px;
    height: 40px;
}
#userCelular { 
    width: 45px;
    height: 40px;
}
.barraCelular {
    height: 100px;
    width: 230px;
    position: absolute;
    transition: all .2s linear;
    top: 0;    
    z-index: 9999;     
    background-color: #1B395E;            
}
.ul-cabCelular .li-cabCelular {
    background-color: #FFFFFF;
    border-top: solid 1px #c0c0c0;
}
.ul-cabCelular .li-cabCelular .a-cabCelular {        
    height: 5px;
    color: #000000;
    font-size: 14px;
    margin-left: 0;
    margin-top: 0;
}
.li-cabCelular {            
    padding: 20px;
    transition: all .2s linear;
    color: #000000;
}
.li-cabCelular .a-cabCelular {
    margin-bottom: 10px;
}
.ulLateralCelular {
    width: 100%;
    position: absolute;
    top: 60px;
    min-height: 400px;
    overflow-y: auto;
}
.ulLateralCelular2 {
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0;
    min-height: 400px;
    overflow-y: auto;
}
.escurecerFundoCelular {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: table;
    transition: opacity 0.3s ease;
}
.todosProdutosCelular {
    border-top: solid 1px #c0c0c0;
}

.todosProdutosCelular .a-cabCelular {
    margin-bottom: 10px;
}
.pTodosProdutosCelular {
    font-size: 13px;
    color: #2A4472;
    font-weight: bold;
    margin-top: -1px;
    margin-bottom: 1px;
    cursor: pointer;
}
#fa-angle-rightCelular {
    margin-left: 40px;
    font-size: 18px;
    cursor: pointer;
}
#fa-angle-leftCelular {
    margin-left: 10px;
    font-size: 18px;
    cursor: pointer;
}
.tituloMenuCelular {
    font-size: 18px;
    font-weight: bold;
    margin-top: 22px;
    margin-left: 25px;
}
/* -------------------------------Tablet---------------------------------------*/
.homeCabTablet {
    margin: 0;
}
#buscaTab {
    width: 60px;
    z-index: 9999;
}
.inner-addon #buscaTab {
    position: absolute;
    pointer-events: none;
    font-size: 25px;
}
.left-addon #buscaTab  { 
    left:  0px;
    padding-left: 20px;
}
.right-addon #buscaTab { 
    padding-right: 20px;
    padding-top: 5px;
}
.inner-addon #buscaTab {
    position: absolute;
    pointer-events: none;
    font-size: 25px;
}
.left-addon #buscaTab  { 
    left:  0px;
    padding-left: 20px;
}
.right-addon #buscaTab { 
    right: 0px;
    padding-right: 20px;
}
.itensFavoritoTablet {
    color: white;
    background-color: #272727;
    width: 17px;
    height: 17px;
    border-radius: 15px;
    position: relative;
    bottom: 15px;
    left: 35px;
    text-align: center;
    font-size: 10px;
}
.itensCarrinhoTablet {
    color: white;
    background-color: #272727;
    width: 17px;
    height: 17px;
    border-radius: 15px;
    position: relative;
    bottom: 15px;
    left: 40px;
    text-align: center;
    font-size: 10px;
}

#fa-barsTablet {
    font-size: 30px;
    position: absolute;
    z-index: 1;
}
.burguerMenuTablet {  
    position: relative;
    bottom: -30px;
}
.iconesMobiTablet {
    position: relative;
    bottom: -12px;
}
.pesquisaMobiTablet {
    position: relative;
    bottom: 12px;
}
.divLogoTablet {
    position: relative;
    right: 26px;
}
#carrinhoTablet {
    width: 48px;
    height: 40px;
}
#favoritoTablet {
    width: 45px;
    height: 40px;
}
#userTablet { 
    width: 48px;
    height: 43px;
}
.barraTablet {
    height: 100px;
    width: 230px;
    position: absolute;
    transition: all .2s linear;
    top: 0;    
    z-index: 9999;     
    background-color: #1B395E;            
}
.ul-cabTablet .li-cabTablet {
    background-color: #FFFFFF;
    border-top: solid 1px #c0c0c0;
}
.ul-cabTablet .li-cabTablet .a-cabTablet {        
    height: 5px;
    color: #000000;
    font-size: 14px;
    margin-left: 0;
    margin-top: 0;
}
.li-cabTablet {            
    padding: 20px;
    transition: all .2s linear;
    color: #000000;
}
.li-cabTablet .a-cabTablet {
    margin-bottom: 10px;
}
.ulLateral {
    width: 100%;
    position: absolute;
    top: 60px;
}
.ulLateralTablet2 {
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0;
    max-height: 400px;
    overflow-y: auto;
}
.escurecerFundoTablet {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: table;
    transition: opacity 0.3s ease;
}
.todosProdutosTablet {
    border-top: solid 1px #c0c0c0;
}

.todosProdutosTablet .a-cabTablet {
    margin-bottom: 10px;
}
.pTodosProdutosTablet {
    font-size: 14px;
    color: #2A4472;
    font-weight: bold;
    margin-top: -1px;
    margin-bottom: 1px;
    cursor: pointer;
}
#fa-angle-rightTablet {
    margin-left: 40px;
    font-size: 18px;
    cursor: pointer;
}
#fa-angle-leftTablet {
    margin-left: 10px;
    font-size: 18px;
    cursor: pointer;
}
.tituloMenuTablet {
    font-size: 18px;
    font-weight: bold;
    margin-top: 22px;
    margin-left: 25px;
}