/*GERAL*/
textarea {
    height: 100px !important;
    resize: none;
}

.overflow-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
}

.pt-10 {
    padding-top: 6rem !important;
}

.navbar-brand {
    max-width: 300px;
}

#sideNav {
    transition: padding-top 0.5s;
}

.z-2 {
    z-index: 2;
}

.logo-topo {
    max-height: 70px;
    max-width: 300px;
    object-fit: contain;
}

.logo-rodape {
    max-height: 35px;
    max-width: 150px;
    object-fit: contain;
}

.badge-item-added {
    position: absolute;
    top: -0.5rem !important;
    right: -0.3rem !important;
    left: unset !important;
    font-size: 0.75rem;
    border: 1px solid white;
}

.product-title {
    font-weight: 400 !important;
}

/*CSS Produto Detalhe*/
#produto-grade th {
    background-color: #f3f5f9;
}

#produto-tabela-detalhes th {
    background-color: #f3f5f9;
}

/*CSS listagem de itens responsivos*/
.rect-img-container {
  position: relative;
}

.rect-img-container::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.rect-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.img-cart_header {
    width: 50px;
    height: 50px;
    object-fit: scale-down;
    object-position: 50% 50%;
}

.img-cart {
    width: 120px;
    height: 120px;
    object-fit: scale-down;
    object-position: 50% 50%;
}

/*CSS atalho carrinho*/
.widget-cart {
    width: 20rem;
}

.widget-cart #widget-cart-body {
    max-height: 300px;
    overflow-y: unset;
}

/*CSS listagem carrinhos abandonados*/
#sv_content_cart table td {
    vertical-align: middle;
}

/*CSS modais*/
.modal-config {
    display: block;
    padding-left: 0px;
    background: #5555558c;
}

@media (min-width: 768px) {
    .sv_modal .modal-dialog {
        max-width: 75vw !important;
    }
}

@media (min-width: 992px) {
    .sv_modal .modal-dialog {
        max-width: 50vw !important;
    }
}

/*CSS Modal Adicionar Itens*/
#sv_qtde_item {
    max-width: 200px !important;

}

input#sv_qtde_item::-webkit-outer-spin-button,
input#sv_qtde_item::-webkit-inner-spin-button 
{
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number]#sv_qtde_item,
input[type=number][id^=sv_qtde_item],
input[type=number][name^=sv_grade]
{
    -moz-appearance: textfield;
}

#modal-produto-grade:not(.modal-add-item) thead tr th {
    min-width: 150px !important;
    background-color: #f3f5f9;
}

#modal-produto-grade.modal-add-item th {
    background-color: #f3f5f9;
    position: sticky;
    top: 0px;
}

#modal-produto-grade.modal-add-item thead tr th:not(:first-child) {
    min-width: 150px !important;
}

#modal-produto-grade.modal-add-item thead tr th:first-child {
    z-index: 1;
}

#modal-produto-grade.modal-add-item th:first-child,
#modal-produto-grade.modal-add-item td:first-child {
    position: sticky;
    left: 0px;
    background-color: #f3f5f9;
}

.table-height-overflow {
    max-height: 225px;
    overflow-y: scroll;
}

/*CSS botão flutuante WhatsApp*/
.btn-whatsapp {
    position: fixed;
    bottom: 0.65rem;
    right: 0.75rem;
    z-index: 999;
}

@media (max-width: 992px) {
    .btn-scroll-top-com-footer {
        bottom: 4.5rem !important;
    }

    .btn-whatsapp-com-footer {
        bottom: 4rem !important;
    }

    typebot-bubble::part(button) {
        bottom: 65px;
        right: 13px;
    }

    typebot-bubble::part(bot) {
        bottom: 100px;
        height: calc(100% - 100px)
    }
}

body.modal-open {
    overflow: hidden;
}


/*CSS representadas*/
.img-representadas {
    height: 50px !important;
    width: auto;
}

@media (min-width: 768px) {
    .img-representadas {
        height: 75px !important;
    }
}

@media (min-width: 992px) {
    .img-representadas {
        height: 100px !important;
    }
}

.sv-table-desconto-volume{
    font-size:12px;
}

/*CSS como comprar*/

.instrucao-final,
.instrucoes-horizontal,
.instrucoes-vertical {
    align-items: center;
    justify-content: center;
}

.instrucoes-horizontal,
.instrucoes-vertical {
    position: absolute;
    width: 35px;
    height: 35px;
}

.instrucoes-horizontal {
    top: 50%;
    right: -18px;
    transform: translate(0,-50%);
}

.instrucoes-vertical {
    left: 50%;
    bottom: -24px;
    transform: translate(-50%,50%);
}

.instrucoes-horizontal i,
.instrucoes-vertical i {
    font-size:15px;
}

.instrucao-final {
    width: 50px;
    height: 50px;
}

.instrucao-final i {
    font-size: 25px;
}

/*CSS galeria de fotos do produto*/
.product-gallery-preview div.product-gallery-preview-item img {
    max-height: 100px;
}

.product-gallery-preview div.active img {
    max-height: max-content !important;
}

/*CSS mapa*/
#svg-map path {
    fill: #c8c8c8;
}

#svg-map text {
  fill: #fff;
  font: 12px Arial-BoldMT, sans-serif;
  cursor: pointer
}

#svg-map a {
  text-decoration: none
}

#svg-map a:hover {
  cursor: pointer;
  text-decoration: none
}

#svg-map a:hover path,
#svg-map a.selected path {
  fill: #fe696a !important
}

#svg-map .circle {
    fill: #b9b9b9;
}

#svg-map a:hover .circle {
    fill: #fe696a !important;
    cursor: pointer
}

.container-representantes {
    max-height: 600px;
    overflow-y: scroll;
}

.container-representantes .card:hover {
    border: 1px solid #fe696a;
}

/*CSS Animação Collapse como comprar*/
#BtnCollapseComoComprar ci {
    transform: rotate(-180deg);
    transition: all 0.3s ease-in-out;
}

#BtnCollapseComoComprar.collapsed ci {
    transform: rotate(0deg);
    transition: all 0.3s ease-in-out;
}

/*CSS fornecedor carousel*/
.container-img-carousel-form {
    height: 70px;
    overflow: hidden;
}

.img-carousel-form {
    height: 100%;
    width: auto;
    display: block;
}

.widget-list-subitem {
    list-style: none;
}


/*CSS seção categorias*/
img.img-thumb-categoria {
    width: 70px;
    height: 70px;
}