.bg-dark-blue {
    background-color: #27293d;
}

/*Separador*/
.separadorPontilhado {
    width: 100%;
    border-top: 1px solid #c6c8ca;
    /*border-top: 3px dotted #CCC;*/
}

.separadorPontilhadoHalf {
    width: 60%;
    border-top: 1px solid #c6c8ca;
    /*border-top: 3px dotted #CCC;*/
    margin: 0 auto; /* Isso centraliza a div horizontalmente */
}

.imagem-selecionavel {
    cursor: pointer;
}

.imagem-selecionada {
    border: 5px solid green;
}

.modal-backdrop.show {
    opacity: 0.8 !important;
    background-color: black !important;
}


/*CHAT*/

.open-chat {
    display: block; /* Garante que o botão inicial de chat seja visível por padrão */
}

.chat-window {
    display: none; /* Esconde a janela de chat inicialmente */
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    z-index: 1000;
}

.chat-header {
    padding: 10px;
    background-color: #e59113;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.close-chat {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

.chat-body {
    padding: 10px;
    max-height: 300px;
    overflow-y: auto;
}

.chat-footer {
    display: flex;
    border-top: 1px solid #ccc;
}

.chat-message {
    flex: 1;
    padding: 10px;
    border: none;
    border-top: 1px solid #ccc;
    outline: none;
    resize: none;
}

.send-message {
    /*background-color: #007bff;*/
    color: #fff;
    border: none;
    padding: 20px;
    cursor: pointer;
}

.open-chat {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: transparent; /* Fundo transparente */
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1000;
}

.message {
    clear: both;
    margin-bottom: 10px;
    padding: 8px;
    border-radius: 8px;
    max-width: 80%;
}

.message-right {
    float: right;
    background-color: #007bff;
    color: white;
}

.message-left {
    float: left;
    background-color: #f1f0f0;
}

.minimize-sidebar {
    background-color: transparent;
    border: none;
    color: #ffffff; /* Cor do ícone */
    font-size: 1.5rem; /* Tamanho do ícone, ajuste conforme necessário */
    cursor: pointer;
}

/*CHAT AGENTE*/

.chat-header-agent {
    padding: 10px;
    background-color: #e59113;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-container {
    display: flex;
    height: calc(100vh - 250px); /* Ajuste a altura conforme necessário */
    background-color: #fff;
}

.chat-area {
    width: 70%;
    display: flex;
    flex-direction: column;
    height: 100%; /* Ocupar todo o tamanho verticalmente */
}

.chat-body-agent {
    flex: 1; /* Para ocupar todo o espaço disponível */
    padding: 10px;
    background-color: #fff;
    overflow-y: auto;
}

.chat-footer-agent {
    display: flex;
    border-top: 1px solid #ccc;
    background-color: #f1f1f1;
    padding: 10px;
}


.contacts-list {
    padding-top: 20px;
    max-height: calc(100vh - 250px); /* Ajuste a altura conforme necessário */
    overflow-y: auto;
    padding-right: 10px;
    border-right: 2px solid #b5c4c5;
    background-color: rgba(39, 41, 61, 0.09); /* Cor de fundo translúcido */
}


.contact-bubble {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    background-color: rgba(0, 123, 255, 0.72); /* Cor de fundo azul */
    color: #fff; /* Cor do texto branco */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.contact-avatar {
    margin-right: 1px;
}

.contact-avatar i {
    width: 40px;
    height: 40px;
    font-size: 24px; /* Ajuste o tamanho do ícone conforme necessário */
    line-height: 40px;
    text-align: center;
    color: #333; /* Cor do ícone */
}

.contact-info {
    flex: 1;
    max-width: 75%;
}

.contact-name {
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    color: #fff; /* Cor do nome do contato */
}

.last-message {
    margin: 5px 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8); /* Cor da última mensagem */
}

.contact-bubble:hover {
    background-color: #0056b3; /* Cor de fundo azul mais escura ao passar o mouse */
}

.selected-contact {
    border: 5px solid #e59113; /* Cor da borda selecionada */
    /*background-color: #e59113; !* Cor de fundo igual à cor da borda *!*/
    color: #fff; /* Cor do texto branco */
    border-radius: 8px; /* Arredondamento da borda */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); /* Sombra suave para destacar */
    transition: border 0.3s ease, background-color 0.3s ease; /* Transição suave */
}

.bg-white {
    background-color: #ffffff; /* Cor de fundo branca */
    /*padding: 5px 10px; !* Ajuste o preenchimento conforme necessário *!*/
    border-radius: 5px; /* Adicione bordas arredondadas para suavizar */
    width: 100%;
    height: 40px;
    padding: inherit;

}

.timer-style {
    background-color: #ff3838; /* Cor de fundo vibrante */
    color: #fff; /* Cor do texto contrastante */
    /*font-size: 24px; !* Tamanho da fonte maior para chamar atenção *!*/
    font-family: 'Arial', sans-serif; /* Fonte clara e moderna */
    padding: 10px 15px; /* Espaçamento interno */
    border-radius: 5px; /* Cantos arredondados */
    border: 2px solid #e60000; /* Borda de destaque */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Sombra para dar um efeito de destaque */
    text-align: center; /* Centraliza o texto dentro do elemento */
    display: inline-block; /* Ajusta o tamanho ao conteúdo */
    margin: 0 10px; /* Margem ao redor para separação visual */
}

.conversa-encerrada {
    background-color: rgba(39, 41, 61, 0.65); /* Cor de fundo para combinar com o layout */
    color: #ffffff; /* Cor do texto para destacar */
    border: 1px solid #b5c4c5; /* Borda para diferenciar do resto do conteúdo */
    border-radius: 5px; /* Bordas arredondadas para um visual mais suave */
    margin: 10px 0; /* Margem para espaçamento acima e abaixo */
    font-size: 14px; /* Tamanho da fonte um pouco menor */
    font-weight: bold; /* Negrito para dar destaque */
    max-width: 300px; /* Largura máxima para manter a div menor */
    margin-left: auto; /* Centraliza horizontalmente */
    margin-right: auto; /* Centraliza horizontalmente */
    text-align: center; /* Centraliza o texto */
    clear: both;
    margin-bottom: 10px;
    padding: 8px;
}


.titulo-chat-cliente {
    font-size: 17px; /* Ajuste o tamanho conforme necessário */
    font-weight: bold; /* Se desejar manter o texto em negrito */
}

.delete-contact {
    position: absolute;
    top: 10px;
    right: 0px;
    background: none;
    border: none;
    color: #ffffff;
    cursor: pointer;
}

.delete-contact:hover {
    color: rgba(255, 0, 0, 0.71);
}


.nova-msg-style {
    position: absolute;
    bottom: 15px;
    right: 4px;
    background: none;
    border: none;
}

.chat-wallpaper {
    padding-top: 80px;
    font-size: 22px;
    text-align: center; /* Centraliza o texto dentro do elemento */
    /*text-shadow: 0 0 2px #ee7217, 0 0 3px #ee7217, 0 0 3px #ee7217; !* Efeito neon *!*/
    opacity: 0.5;
    overflow-y: auto;
}

.titulo-wallpaper {
    font-size: 24px; /* Tamanho da fonte maior */
    font-weight: bold; /* Negrito para destaque */
    color: #ee7217; /* Cor vibrante */
    text-shadow: 1px 1px 3px rgba(166, 140, 140, 0.3); /* Sombra sutil para destacar o texto */
    text-align: center; /* Centralizar o texto */
    display: block; /* Para garantir que o texto ocupe toda a largura disponível */
}

.divisoria-chat-wallpaper {
    width: 25%;
    border: 0; /* Remove as bordas padrão */
    height: 1px; /* Define a grossura desejada */
    background-color: #ee7217; /* Define a cor da linha */
}

.custom-modal {
    max-width: 400px;
    min-width: 200px;
    width: 100%;
}


/* Estilo para o cartão do filtro de pesquisa */
.card-busca {
    background-color: #f8f9fa; /* Fundo claro */
    border-radius: 15px; /* Cantos arredondados */
    border: 1px solid #dee2e6; /* Bordas suaves */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    margin-bottom: 20px; /* Espaçamento inferior */
}


/* Estilo para o botão de expandir filtros */
/*#toggle-filters {*/
/*    margin-top: -8px; !* Ajustar a posição vertical *!*/
/*    margin-right: -8px; !* Ajustar a posição horizontal *!*/
/*    padding: 8px 16px; !* Espaçamento interno *!*/
/*}*/

/* Estilo para o corpo do cartão */
.card-busca-body {
    padding: 20px; /* Espaçamento interno */
}

/* Estilo para os campos de formulário */
.form-group {
    margin-bottom: 1rem; /* Espaçamento inferior */
}

/* Estilo para os rótulos dos campos de formulário */
.form-group label {
    font-weight: bold; /* Fonte em negrito */
}

/* Estilo para os campos de entrada de texto */
.form-control {
    border-radius: 10px; /* Cantos arredondados */
    border: 1px solid #ced4da; /* Bordas suaves */
    padding: 10px; /* Espaçamento interno */
}

/* Estilo para os campos de seleção */
.form-control:focus {
    border-color: #80bdff; /* Cor da borda ao focar */
    outline: 0; /* Remover contorno */
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Sombra ao focar */
}

/* Estilo para os filtros adicionais */
#additional-filters {
    margin-top: 20px; /* Espaçamento superior */
}

/* Estilo para o botão de expandir filtros */
.btn-exp-filtro {
    background-color: #e2eafd; /* Cor de fundo clara */
    border-color: #ced4da; /* Cor da borda */
    color: #343a40; /* Cor do texto */
    padding: 10px 20px; /* Espaçamento interno */
    border-radius: 10px; /* Cantos arredondados */
}

/* Estilo para o botão de expandir filtros ao passar o mouse */
.btn-exp-filtro:hover {
    background-color: #e2e6ea; /* Cor de fundo clara ao passar o mouse */
    border-color: #adb5bd; /* Cor da borda ao passar o mouse */
    color: #212529; /* Cor do texto ao passar o mouse */
}

.info-add {
    padding-top: 14px;
    margin-left: 95px;
    /*font-size: 17px;*/
    border: 1px solid #e5e5e5; /* Cor da borda */
    border-radius: 3px; /* Bordas arredondadas (opcional) */
}

.info-hr {
    width: 80%;
    margin: 20px auto;
}

.comentario-container {
    padding: 15px;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

.comentario-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.comentario-autor {
    font-size: 1.1em;
    color: #333;
}

.comentario-data {
    font-size: 0.9em;
    color: #999;
    margin-left: 10px;
}

.comentario-rating i {
    color: #FFD700; /* Cor dourada para as estrelas preenchidas */
}

.comentario-titulo {
    margin-top: 10px;
    font-size: 1.2em;
    color: #555;
}

.comentario-corpo {
    margin-top: 10px;
    font-size: 1em;
    color: #666;
    width: auto;
    background-color: #FFFFFF;
    min-height: 50px;
}


.comentario-divisor {
    margin-top: 15px;
    border: none;
    height: 1px;
    background-color: #e5e5e5;
}

.favorito-detail {
    margin-left: 10px; /* Ajuste conforme necessário */
    margin-top: 8px;
}


#map {
    height: 200px; /* Defina a altura do mapa */
    width: 100%; /* Defina a largura do mapa */
}
.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colunas iguais */
    gap: 10px; /* Espaçamento entre as células */
}

.info-item {
    border: 1px solid #ddd; /* Borda leve */
    padding: 10px; /* Espaçamento interno */
    border-radius: 4px; /* Bordas arredondadas, se desejar */
}

.stext-102 {
    margin: 0; /* Remove a margem padrão dos parágrafos */
}

.cl3 {
    color: #333; /* Cor do texto */
}

.owl-carousel .item {
    display: flex;
    align-items: center; /* Centraliza verticalmente a imagem */
    justify-content: center; /* Centraliza horizontalmente, opcional */
    height: 120px; /* Defina a altura desejada para todos os itens */
    overflow: hidden; /* Oculta partes da imagem que excedem o contêiner */
}

.owl-carousel .item img {
    height: 100%; /* Faz com que a imagem tenha a altura do contêiner */
    width: auto; /* Mantém a proporção da imagem */
    object-fit: cover; /* Faz com que a imagem cubra o contêiner sem deformar */
}

.block2 {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.block2-pic {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.block2-txt {
    padding-top: 14px;
}




/* Estilos responsivos */
@media (max-width: 768px) {
    .form-group {
        margin-bottom: 1.5rem; /* Espaçamento inferior aumentado */
    }

    .card-busca-body {
        padding: 15px; /* Espaçamento interno reduzido */
    }


    #toggle-filters {
        margin-top: 0; /* Ajustar a posição vertical */
        margin-right: 0; /* Ajustar a posição horizontal */
        padding: 6px 12px; /* Espaçamento interno reduzido */
    }

    .btn-primary {
        width: 100%; /* Largura total */
        margin-top: 10px; /* Espaçamento superior */
    }
}

.coluna-anuncio {
    flex: 1;
    min-width: 100px; /* Ajuste conforme necessário */
    box-sizing: border-box;
}

/* Define o comportamento de grid personalizado para exibir 4 itens por linha */
.custom-grid {
    display: grid; /* Define que a div vai usar grid, facilitando o layout */
    grid-template-columns: repeat(4, 1fr); /* Cria 4 colunas iguais, cada uma ocupando um quarto do espaço disponível */
    gap: 16px; /* Adiciona espaço de 16px entre os itens da grid, pra não ficar tudo grudado */
}

.custom-grid .custom-col {
    display: flex; /* Usa flexbox dentro de cada coluna pra organizar melhor o conteúdo */
    flex-direction: column; /* Organiza os itens em coluna, de cima pra baixo */
    justify-content: space-between; /* Espaça os itens de modo que o primeiro e o último fiquem nas extremidades */
    min-height: 350px; /* Define uma altura mínima pra que todos os cards tenham pelo menos essa altura */
    box-sizing: border-box; /* Faz com que o padding e bordas sejam incluídos na largura e altura total */
}

.custom-grid .block2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* Ajustes para o tamanho da imagem */
.custom-grid .block2-pic img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* Ajustes adicionais conforme necessário */

.quebra-linha {
    word-wrap: break-word; /* Quebra a linha em palavras longas */
    word-break: break-word; /* Quebra a palavra em si se for muito longa */
}

@media (max-width: 767px) {
    .custom-grid {
        flex-direction: column;
        justify-content: center;
        width: 100%;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Cria colunas que se ajustam automaticamente; cada coluna tem um tamanho mínimo de 300px, mas pode crescer até ocupar o espaço disponível */
    }
    .custom-grid .custom-col {
        flex: 1 1 100%; /* Calcula a largura de cada item para que 4 itens se ajustem por linha */
        max-width: 100%; /* Define a largura máxima de cada item */
    }
}

.custom-grid .block2-info {
    flex-grow: 0.3; /* Faz com que esta seção ocupe o espaço restante no card */   
}