@charset "UTF-8";
html {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

body {
  background: linear-gradient(135deg, #1e697a78, #e0640063);
  min-height: 100vh;
  font-family: "Roboto", sans-serif;
}

.box_businesses_near_me_now {
  min-height: 450px;
}

.navbar {
  background-color: #f3f3f3ed;
  padding-top: 45px;
  box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.75);
  z-index: 110;
  margin-bottom: 20px;
  /* Espaço entre a navbar e o conteúdo */
}

.navbar {
  background-color: #f3f3f3e3;
  padding-top: 45px;
  box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.75);
  z-index: 110;
  margin-bottom: 20px;
}

.card {
  border: none;
  border-radius: 1rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  background: #fff;
  /* Fundo branco para o card */
}

.btnContinuar {
  position: relative;
  z-index: 300;
}

.btnCadastroPainel {
  color: #fff !important;
  font-size: 1.1em;
}

.card-header {
  background-color: #1e697a;
  color: #fff;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  text-align: center;
  padding: 1.5rem;
  border-bottom: 1px solid #6c757d;
  /* Linha prata */
}

.card-body {
  padding: 2rem;
}

.form-control {
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-custom {
  background-color: #1e697a;
  color: #fff;
}

.btn-custom:hover {
  background-color: #e06400;
  /* Altera para laranja ao passar o mouse */
}

.btn-up-case {
  text-transform: uppercase;
}

.search-bar {
  width: 100%;
  max-width: 600px;
  margin: auto;
}

.search-bar > form {
  width: calc(100%);
  display: flex;
}

.search-bar > form > input {
  width: calc(100% - 130px);
}

.search-bar > form .btn-primary {
  width: 80px;
}

.search-bar > form .btn-secondary {
  width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.options-container {
  margin-top: 20px;
  text-align: center;
  display: none;
  /* Inicialmente, esconde os botões de opções */
}

.options-container.show {
  display: block;
  /* Mostra os botões de opções quando a classe 'show' é adicionada */
}

.options-container .btn-group {
  margin-bottom: 10px;
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
  color: #ffffff;
}

.namePlace {
  font-weight: 600;
  font-size: 1.4em;
}

.resultLine {
  margin: 2em 0;
  padding: 1em 2em 2em 2em;
  background-color: #f3f3f3;
  border: solid 1px #d7d7d7;
  position: relative;
  border-radius: 15px;
  box-shadow: 2px 4px 6px 0px rgba(0, 0, 0, 0.75);
}

.resultLine:hover {
  background-color: #fff;
  border: solid 1px #cccccc;
  position: relative;
}

.ratinsPlace {
  position: absolute;
  top: 1em;
  right: 1em;
}

.ratingPlace {
  color: #e3ca06;
}

.separador {
  display: flex;
  justify-content: space-between;
}

.resultLinefooter {
  margin: 1em 0 0 0;
}

.iconMenu {
  font-size: 2rem;
  color: #1d1c1c !important;
  /* Cor do ícone */
}

.boxDetalhes {
  width: 100vw;
  min-height: 100vh;
  background-color: #fff;
  z-index: 10;
  position: absolute;
  left: 0;
  top: 120px;
  overflow: scroll;
}

.headreBoxDetalhes {
  width: 100vw;
}

.bodyBoxDetalhes {
  width: 100vw;
  min-height: 30vh;
  padding: 6em 0 0em 0;
}

.footerBoxDetalhes {
  width: 100vw;
  min-height: 30vh;
}

.boxDetalhes > div > img {
  width: 100vw;
  height: auto;
}

.detalheName {
  font-size: 1.7em;
  font-weight: 900;
  text-align: center;
  font-weight: 600;
}

.detalheEndereco {
  margin: 1em 0;
}

.detalheEnderecoDistancia {
  margin: 1em 0;
}

.detalheEnderecoWazeLink > a {
  font-weight: bold;
}

#map {
  width: 600px;
  height: 400px;
  margin: 0 auto;
  margin: 4em 0;
}

.bgblack {
  background-color: #1d1c1c;
}

.off {
  display: none;
}

.resultLine {
  cursor: pointer;
}

.detalheBtnVoltar > button {
  color: #fff;
  background-color: #353535;
  border-color: #353535;
  margin-bottom: 4em;
}

.aliggcenterChildream {
  display: flex;
  /* Define o contêiner como flexbox */
  justify-content: center;
  /* Centraliza horizontalmente */
  align-items: center;
  /* Centraliza verticalmente */
}

.botao_compartilhar {
  height: 45px;
  background-color: #136169;
}

.botao_compartilhar:hover {
  background-color: #13454b;
}

.m-b-3 {
  margin-bottom: 3em;
}

/* styles.css */
/* Estilo do botão */
#menuToggle {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1001;
  /* Para ficar acima do menu */
  background-color: #007BFF;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 20px;
  cursor: pointer;
  border-radius: 5px;
}

/* Estilo do menu lateral */
.side-menu {
  height: 100%;
  width: 250px;
  /* Largura do menu */
  position: fixed;
  top: 0;
  left: -250px;
  /* Começa fora da tela */
  /* background-color: #333; */
  background-color: #45a4b4;
  background-image: linear-gradient(#1e697a3d, #e064003d);
  color: white;
  transition: 0.3s;
  /* Tempo de transição */
  z-index: 1000;
  /* Fica abaixo do botão */
  overflow-x: hidden;
  padding-top: 60px;
  border-right: solid 1px #7b7b7b;
  /* margin-top: 124px; */
}

.btn_open_menu:hover {
  color: #1d1c1c !important;
}

/* Estilo dos links do menu */
.side-menu ul {
  list-style-type: none;
  padding: 0;
}

.side-menu ul li {
  padding: 10px;
  text-align: center;
}

.side-menu ul li a {
  color: white;
  text-decoration: none;
  display: block;
  transition: 0.3s;
}

#sideMenu > ul > li.aLogin > a:hover {
  background-color: none;
}

#sideMenu > ul > li {
  font-size: 1.32em;
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-weight: 400;
  font-weight: 300;
  font-style: normal;
  cursor: pointer;
}

#sideMenu > ul > li:hover {
  box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.75);
}

.btn-cad-dark {
  background-color: #042023;
  color: #fff;
}

.btn-cad-busines {
  background-color: #0f6f79;
  color: #fff;
}

.btn-cad-busines:hover {
  background-color: #136169;
  color: #d6d5d5;
}

.w8vw {
  width: 80vw;
}

#dashboard-container {
  background-color: #efefef;
  padding: 4em 2em;
  border-radius: 1rem;
}

.novaPostagemBtCss {
  font-size: 2em;
  padding: 0.41em;
  cursor: pointer;
}

.novaPostagemBtCssHover:hover {
  background-color: #042023;
  color: #fff;
}

.btn-close_page {
  font-size: 4em;
}

/* Estilo para alinhar o botão ao lado do título */
.d-flex {
  display: flex;
  align-items: center;
}

#closeDashboard {
  margin-left: 10px;
  /* Espaçamento entre o título e o botão */
}

.imgBtnframe {
  position: relative;
}

.btnExcluirImagem {
  position: absolute;
  top: 10px;
  right: 20px;
  background-color: rgba(255, 0, 0, 0.422);
  /* Cor vermelha */
  color: white;
  border: none;
  border-radius: 50%;
  padding: 10px 20px;
  font-size: 25px;
  cursor: pointer;
}

.frameTextEdtPAnel {
  padding: 25px 45px;
}

.btnExcluirImagem:hover {
  background-color: #ff0000;
  /* Altera para vermelho mais claro ao passar o mouse */
}

.remove-image-btn-remove {
  position: absolute !important;
  right: 25px;
  top: 15px;
  box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.75);
}

.toast {
  min-width: 280px;
  /* Evita que fique muito pequeno */
  max-width: 400px;
  /* Evita que fique muito grande */
  padding: 0.5rem;
  /* Reduz espaçamento interno */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
  /* Suaviza a sombra */
  flex-basis: auto;
  /* Permite que o conteúdo cresça */
}

.toast-header {
  padding: 0.4rem 0.75rem;
  font-size: 0.875rem;
}

.toast-body {
  padding: 0.5rem;
  font-size: 0.85rem;
}

.manage_page {
  overflow: scroll;
  display: contents;
}

/* Classe para o menu estar visível */
.side-menu.open {
  left: 0;
  /* Traz o menu para dentro da tela */
}

.border-bottom-soft {
  border-bottom: solid 1px #dfdfdf;
}

.btn-link {
  font-size: 0.85rem;
  text-decoration: none;
  color: #007bff;
}

.btn-link:hover {
  text-decoration: underline;
  color: #0056b3;
}

.btn-one-greem {
  color: #fff;
  background-color: #1e697a;
  border-color: #1e697a;
}

.btn-one-greem:hover {
  color: #fff;
  background-color: #324549;
  border-color: #324549;
}

.btn-one-greem:focus {
  color: #fff;
  background-color: #54afc2;
  border-color: #FFF;
  box-shadow: 0 0 0 0.2rem #54afc2;
}

.btn-one-greem:not(:disabled):not(.disabled):active,
.show > .btn-one-greem.dropdown-toggle {
  color: #fff !important;
  background-color: #324549 !important;
  border-color: #718c91 !important;
}

.btn-out-x {
  width: 3em;
  height: 3em;
  position: fixed;
  top: 7em;
  right: 0.5em;
  background-size: cover;
  z-index: 10000;
  cursor: pointer;
}

.btn-out-x:hover {
  opacity: 0.9;
}

.btn {
  border-radius: 1px;
}

.form-control {
  border-radius: 1px;
}

.nomeServico {
  text-transform: capitalize;
}

.cadastrarNegocioCSS {
  margin-left: -5px;
}

.item-list-negocios {
  border: solid 1px #e4e4e4;
  padding: 1em 2em;
  margin-bottom: 10px;
}

.createPostJs, .etcJs, .painelPostJs {
  cursor: pointer;
}

.item-list-negocios:hover {
  color: #fff;
  background-color: #1f1f1f9c;
  border: solid 1px #1f1f1f;
}

.positionRelative {
  position: relative;
}

.positionAbsolute {
  position: absolute;
}

.botaoCloseBox {
  width: 45px;
  height: 45px;
  position: absolute;
  top: 2em;
  right: 2em;
  cursor: pointer;
  text-align: center;
  color: #1f1f1f;
  font-weight: 300;
  z-index: 10;
}

.fz-2m {
  font-size: 2.5em;
}

.loader-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 10px solid #555;
  border-top-color: #f8b26a;
  animation: loader-circle 1s linear infinite;
  position: absolute;
  top: 50vh;
  left: 50vw;
  margin: -25px 0 0 -25px;
  z-index: 300;
}

@keyframes loader-circle {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loaderLine {
  position: fixed;
  top: 7vh;
  left: 0;
  width: 100vw;
  background-color: #b3acacf5;
  padding: 5px 0 5px 0;
  z-index: 10000;
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 120px;
  height: 22px;
  border-radius: 40px;
  color: #a95905;
  border: 2px solid;
  position: relative;
  overflow: hidden;
  top: 0vh;
  left: 50vw;
  margin: 0px 0 0 -40px;
  z-index: 300;
}

.makePost {
  width: 100vw;
  min-height: 100vh;
  max-height: auto;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3000;
  display: flex;
  justify-content: center;
  /* Alinha ao centro horizontalmente */
  align-items: center;
  /* Alinha ao centro verticalmente */
}

.off {
  display: none;
}

.upImage, .frameCreateTextPost {
  width: 450px;
  height: 450px;
  border-radius: 25px;
  border: solid 1px #a0bede;
  cursor: pointer;
}

.texAreaCreatePostCSS {
  width: 400px;
  height: 280px;
  margin: 25px;
  background: #efefef;
  border: solid 1px #a0bede;
  border-radius: 10px;
  text-align: left;
  color: #000;
  padding: 20px 10px;
  overflow: hidden;
}

.frameBTCenter {
  display: flex;
  /* Ativa o Flexbox */
  justify-content: center;
  /* Alinha horizontalmente ao centro */
  align-items: center;
  /* Alinha verticalmente ao centro */
}

.frameBTCenterBox {
  padding: 0 15px;
}

.titleAreaEditionCreateTextPost {
  padding-left: 25px;
  font-size: 16px;
  font-weight: 600;
  color: #5a5959;
}

.upImage:hover {
  border: solid 2px #8293a6;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

#filesInput {
  display: none;
}

.frameUploadImages {
  height: 450px;
  text-align: center;
}

.frameUploadImagesTitle {
  margin-top: 50px;
  height: 60px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.btnImgSelectImagens {
  width: 450px;
  height: 200px;
  background-image: url("https://euseionde.com.br/img/img-midias.png");
  background-repeat: no-repeat;
  text-align: center;
  background-size: 30% 60%;
  background-position: 50% 60%;
}

.mioloDivTeste {
  width: 450px;
  height: 60px;
}

#uploadForm {
  position: relative;
}

.btnSendImages {
  width: 350px;
  padding: 10px;
  border-radius: 12px;
  position: absolute;
  left: 50%;
  bottom: 0px;
  margin-left: -175px;
}

.loader::before {
  content: "";
  position: absolute;
  margin: 2px;
  width: 14px;
  top: 0;
  bottom: 0;
  left: -20px;
  border-radius: inherit;
  background: currentColor;
  box-shadow: -10px 0 12px 3px currentColor;
  clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%, -30px 50%);
  animation: l14 1s infinite linear;
}

@keyframes l14 {
  100% {
    left: calc(100% + 20px);
  }
}
.problemaAqui {
  border: solid 1px #ac0303;
  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

/* #searchButton{
  width: 90px;

}
#dropdownMenuButton{
  width: 65px;
} */
/* #searchValue{
  width: calc(100% - 155px);
} */
.box-bg-granco {
  background-color: #ffffffab;
  padding: 3em;
  border-radius: 15px;
  border: solid 1px #efe8e0;
}

.error-section {
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.error-section h1 {
  font-size: 10rem;
  color: #343a40;
}

.error-section p {
  font-size: 1.5rem;
  color: #6c757d;
}

.legal-section {
  padding: 30px;
  background-color: #ffffff;
  border-top: 3px solid #343a40;
}

.c-w {
  color: #fff;
}

.image-preview-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.image-preview-container div {
  width: 60px;
  height: 60px;
  position: relative;
  border: 1px solid #ddd;
  overflow: hidden;
  border-radius: 5px;
}

.image-preview-container img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.image-preview-container span {
  position: absolute;
  top: 5px;
  right: 5px;
  background: red;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
  font-size: 14px;
}

.imagePreview {
  padding: 25px;
  border: solid 5px #f00;
}

.btExitBox {
  position: relative;
}

.btExitBt {
  width: 45px;
  height: 45px;
  font-size: 30px;
  position: absolute;
  top: 15px;
  right: 15px;
  text-align: center;
  border-radius: 8px;
  border: solid 1px #797777;
  z-index: 200;
  background-color: #fff;
}

.btExitBt:hover {
  border: solid 1px #000;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.nav-tabs .nav-link {
  font-weight: bold;
  color: #999797;
}

.nav-tabs .nav-link.active {
  background-color: #fff;
  color: #282727;
}

.box_tabs {
  background-color: #fff;
  padding: 20px;
}

.card-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
}

.card-text {
  font-size: 1rem;
  color: #555;
}

.distancePlace {
  font-size: 0.9rem;
  color: #007bff;
  font-weight: bold;
}

.distancePlace i {
  margin-right: 5px;
}

.btn-ver-mais > button {
  margin-top: 15px;
  text-align: center;
  width: 100%;
  background-color: #bdbdb2;
  border-color: #55554c;
  border-radius: 5px;
  box-shadow: 2px 4px 8px #9c9a9a;
  color: #2b2f1b;
}

.btn-ver-mais:hover > button,
.btn-ver-mais:hover > button.btn-primary:hover,
.btn-ver-mais:hover > button.btn-primary {
  border-color: #55554c !important;
  border-radius: 5px !important;
  box-shadow: 3px 8px 8px #9c9a9a !important;
  color: #2b2f1b !important;
}

/* Fundo do modal bem escuro */
.modal.fade .modal-dialog {
  transition: opacity 0.3s ease-in-out;
}

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

/* Centralizar carrossel */
.modal-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

/* Ajustar tamanho da imagem para sempre centralizar */
.carousel-item img {
  max-height: 80vh;
  max-width: 100%;
  margin: auto;
  display: block;
}

/* Botões de navegação personalizados */
.custom-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(204, 204, 204, 0.3);
  /* Transparência preta */
  border: none;
  padding: 10px;
  transition: background 0.3s ease-in-out;
}

.custom-carousel-btn:hover {
  background: #d7d7d7;
  /* Fica um pouco mais visível ao passar o mouse */
}

.custom-carousel-btn .carousel-control-prev-icon,
.custom-carousel-btn .carousel-control-next-icon {
  filter: invert(1);
  /* Deixa os ícones brancos */
}

.carousel-control-next, .carousel-control-prev {
  position: absolute;
  z-index: 1;
  width: 15%;
  color: #fff;
  text-align: center;
  opacity: 0.5;
  transition: opacity 0.15s ease;
  background: #FFF;
  border: #fff solid 1px;
}

.carousel-control-next {
  border-radius: 45px 0 0 45px;
}

.carousel-control-prev {
  border-radius: 0 45px 45px 0;
}

#imageModal {
  background-color: rgba(0, 0, 0, 0.85);
}