/*CSS da página signin  
/* Estilo Geral */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: #f2f2f5;
    color: #333;
    box-shadow: inset 0 5px 15px rgba(0, 0, 0, 0.2); /* Sombra interna */
     
}
  
/* Seção principal */
.features-section {
    text-align: center;
    padding: 40px 20px;
}

.features-section h1 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 20px;
    font-family: fantasy;
}

/* Container principal */
.features-container {
    display: grid;
    grid-template-columns: 1fr; /* Uma coluna para dispositivos móveis */
    gap: 20px;
}

/* Bloco de recursos */
.feature {
    background-color: #1c1c1c;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

/* Ícones e texto */
.feature img {
    width: 40px; /* Tamanho menor para ícones em dispositivos móveis */
    margin-bottom: 10px;
}

.feature h2 {
    font-size: 18px; /* Ajuste do tamanho do título */
  	font-family: fantasy;
    color: #5271FF;
    margin-bottom: 10px;
}

.feature p {
    font-size: 15px;
    color: #fff;
    line-height: 1.5;
  font-weight: bold;
}

/* Media Queries para telas maiores */
@media (min-width: 768px) {
    .features-container {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas em tablets */
    }
}

@media (min-width: 1024px) {
    .features-container {
        grid-template-columns: repeat(3, 1fr); /* 3 colunas em telas maiores */
    }

    .features-section h1 {
        font-size: 32px; /* Título maior para desktops */
    }

    .feature h2 {
        font-size: 20px;
    }
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: #e3e3e3;
    color: #333;
    box-shadow: inset 0 5px 15px rgba(0, 0, 0, 0.2); /* Sombra interna */
     
}
h1 {
    text-align: center;
    color: #333;
    font-family: fantasy;
}
  
  p.p2{
    
    text-align: center;
    color: #333;
    font-weight: bold;
  }


/* inicio do footer 'cadastre-se gratuitamente */
.footer-espacial {
  background-color: #1e213b;
  background-size: cover;
  color: white;
  text-align: center;
  padding: 60px 20px;
  font-family: 'Segoe UI', sans-serif;
  position: relative;
}

.footer-espacial h2 {
  font-size: 2.2rem;
  margin-bottom: 20px;
}

.footer-espacial a.botao-cadastro {
  display: inline-block;
  padding: 15px 25px;
  border: 2px solid #ffffff;
  color: white;
  font-weight: bold;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  background-color: rgba(255, 255, 255, 0.1);
}

.footer-espacial a.botao-cadastro:hover {
  background-color: #ffffff;
  color: #111827;
  transform: scale(1.05);
}

.footer-espacial p {
  margin-top: 30px;
  font-size: 14px;
  color: #e5e7eb;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
/* fim do footer 'cadastre-se gratuitamente */

/* Estilo para as Perguntas */
.faq-item {

    margin: 10px 0;
    border-bottom: 1px solid #ddd;
}

.faq-question {
    width: 100%;
    position: ;
    background: white;
  	color:#00014c;
    border: none;
    text-align: left;
    font-size: 1.9rem;
    font-weight: bold;
    cursor: pointer;
    padding: 10px;
    display: flex;
   justify-content: space-between;  
  align-items: center;      /* Centraliza verticalmente */
}

.faq-question:hover {
    background-color: #f0f0f0;
}

.faq-answer {
    display: none;
    padding: 10px;
  	font-weight: bold;
    font-size: 1.6rem; /* Aumenta o tamanho da fonte das respostas */
  	 line-height: 1.8; /* Aumenta o espaçamento entre linhas */
    color: #00014c;
}

.faq-answer p {
    margin: 0;
}
  @media (max-width: 768px) {
    .faq-question {
        font-size: 1.4rem; /* Reduz o tamanho em telas menores */
    }

    .faq-answer {
        font-size: 1.2rem; /* Mantém o texto legível em dispositivos móveis */
    }
}

  
 .testimonials-section {
  text-align: center;
  background: #eeeeee; /* Fundo azul */
  color: #1e213b;
  padding: 50px 20px;
  position: relative;
}

.testimonials-section h2 {
  font-size: 2.5em;
  margin-bottom: 10px;
}

.testimonials-section p {
  font-size: 1.2em;
  margin-bottom: 30px;
}

.swiper {
  
  display: flex; /* Ativa o flexbox */
  justify-content: center; /* Alinha os cartões no centro horizontalmente */
  align-items: center; /* Alinha os cartões verticalmente (opcional) */
  gap: 20px; /* Espaçamento entre os cartões */
  flex-wrap: wrap; /* Permite quebra de linha em telas menores */
  margin: 5 auto; /* Centraliza horizontalmente */
  padding: 20px 0; /* Espaçamento vertical */
   width: 60%;  /* Garante que o container ocupe toda a largura disponível */
  height: auto; /* Ajusta a altura conforme necessário */
}

/* Para telas menores */
@media (max-width: 768px) {
  .swiper {
    width: 100%;
    padding: 10px; /* Ajusta o espaçamento no mobile */
    gap: 10px;     /* Espaço entre os slides */
  }
}

/* Estilos para telas muito pequenas (por exemplo, smartphones em modo retrato) */
@media (max-width: 480px) {
  .swiper {
    width: 100%; /* A largura continua ocupando toda a tela */
    padding: 5px; /* Ajuste do espaçamento para telas muito pequenas */
    gap: 8px; /* Menor espaçamento entre os cartões */
  }
}
  
.testimonial-card {
  display: flex; /* Ativa o flexbox */
  background: white;
  color: #333;
  border-radius: 15px;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
  padding: 20px;
  max-width: 400px;
  margin: 0;
  text-align: left;
   
}

.testimonial-card img {
  border-radius: 50%;
  width: 50px;
  margin-bottom: 15px;
}

.testimonial-card h3 {
  font-size: 1.3em;
  margin-bottom: 10px;
}

.testimonial-card p {
  font-size: 1em;
  line-height: 1.5;
}

/* Estilizando botões de navegação */
.swiper-button-next,
.swiper-button-prev {
  display: none;       /* Torna as setas invisíveis novamente */
  color: #333;
  width: 50px;
  height: 50px;
  position: absolute;   /* Garante que as setas fiquem fora da área do swiper */
  top: 50%;             /* Alinha as setas verticalmente no centro */
  transform: translateY(-50%); /* Ajusta as setas para que fiquem centralizadas */
  z-index: 10;          /* Garante que as setas fiquem acima dos slides */
 
}

/* Ajustando a posição da seta "next" */
.swiper-button-next {
  right: ,30px;  /* Ajusta a posição da seta "next" para a direita, um pouco afastada */
}

/* Ajustando a posição da seta "prev" */
.swiper-button-prev {
  left: -30px;   /* Ajusta a posição da seta "prev" para a esquerda, um pouco afastada */
}

  .steps-section {
  background-color:#1e213b; /* Fundo azul */
  background: linear-gradient(145deg, #1e213b, #2a2e51); /* Gradiente com tons claros */
  box-shadow: inset 0 5px 15px rgba(0, 0, 0, 0.2); /* Sombra interna */
  padding: 40px 20px;
  color: #333; /* Texto branco */
  text-align: center;
  clip-path: circle(10px 0px 10px 10px);  
}

.steps-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; /* Para ajustar em telas menores */
  gap: 20px;
}

.step {
  flex:  1 1 calc(20% - 20px); /* Quatro colunas responsivas */
  background: #f7f7ff; /* Fundo dos cartões */
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.step-icon {
  font-size: 2rem; /* Tamanho do ícone */
  color: #5271FF; /* Cor azul */
  margin-bottom: 10px;
}

.step-number {
  font-size: 1.8rem;
  font-weight: bold;
  color: #5271FF; /* Cor azul */
  margin-bottom: 10px;
}

.step h3 {
  font-size: 1.8rem;
  font-weight: bold;
  margin: 10px 0;
  color: #5271FF; /* Cor azul */
  font-family: sans-serif;
}

.step p {
  font-size: 1.5rem;
  line-height: 1.6;
  color: #00014c; /* Cor azul */
}

@media (max-width: 768px) {
  .steps-container {
    flex-direction: column;
    gap: 15px;
  }

  .step {
    flex: 1 1 100%; /* Ocupa toda a largura */
  }
}

/*estilo para ícone*/ /*new order */
  .icon {
  width: 38px;
  height: 38px;
  margin-right: 10px;
  
}

/* Estilo para o contêiner de informações do usuário */
.user-info-container { 
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
   position:relative;
  right: 30px; /* Move 50px para a direita */
  top: 15px; /* Move 20px para baixo */

}

.user-info {
  display: flex;
  align-items: center;
  background-color: #dadae28f;
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.user-info p {
  margin: 0;
  font-size: 16px;
   font-weight: bold;
  color: #0b1d76;
  margin-top: 0px; /* Adiciona espaçamento acima */
  margin-bottom: 10px; /* Adiciona espaçamento abaixo */
}

/* Estilo para o contêiner de saldo  */
.user-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 14px; /* Adiciona espaçamento abaixo */
  position:relative;
  left: 30px; /* Move 50px para a direita */
  top: 5px; /* Move 20px para baixo */
  
}

.user-saldo {
  display: flex;
  align-items: center;
  background-color: #dadae28f;
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.user-saldo p {
  margin: 0;
  font-size: 16px;
   font-weight: bold;
  color: #0b1d76;
   margin-top: 0px; /* Adiciona espaçamento acima */
  margin-bottom: 5px; /* Adiciona espaçamento abaixo */
}

    .bottom-saldo{
      display:inline-block;
      
    }
    
    .bottom-saldo-2{
      background: linear-gradient(to right, #007bff, #003366);
      background-size: 400px 250px; /* Largura e altura */
      color:#fff;
      border-radius: 40px; /* Bordas levemente arredondadas */
    text-align: center;
      font-weight: bold;
    margin-top: 5px;
    color: #fff;
    padding: 5px;
    text-decoration: none;
       cursor: pointer;
}
     .bottom-saldo-2 :hover{
       background: linear-gradient(to bottom, #003366, #000022); /* Muda o degradê ao passar o mouse */
     
}
    
     .bottom-order{
      display:inline-block;
      
    }
    
    .bottom-order-2{
      background: linear-gradient(to right, #007bff, #003366);
      background-size: 400px 250px; /* Largura e altura */
      color:#fff;
      border-radius: 40px; /* Bordas levemente arredondadas */
    text-align: center;
      font-weight: bold;
    margin-top: 5px;
    color: #fff;
    padding: 5px;
    text-decoration: none;
       cursor: pointer;
}
     .bottom-order-2 :hover{
       background: linear-gradient(to bottom, #003366, #000022); /* Muda o degradê ao passar o mouse */
     
}
    
    }
     /* Media Queries para ajustes em telas menores */
@media(max-width: 768px) {
  .user-info-container, .user-container {
	
   transform: none; /* Remove transformações para mobile */
    
  }

  .user-info, .user-saldo {
    width: 100%; /* Faz com que os contêineres ocupem a largura total */
    max-width: 300px; /* Define uma largura máxima para evitar que fiquem muito largos */
  }

  .icon {
    width: 20px; /* Reduz ainda mais o tamanho do ícone para mobile */
    height: 20px; /* Reduz ainda mais o tamanho do ícone para mobile */
  }

  .user-info p, .user-saldo p {
    font-size: 14px; /* Reduz o tamanho da fonte para mobile */
  }
}

.w-full{
	width:100%;

}

.navbar-brand img{
    display: inline-block;
    max-width: 100%;
    max-height: 51px;
    margin-top: -1px;
    vertical-align: middle;    
    
  }

/*gif do navbar após o login*/
.AuthNavBar{
	background-image:url(https://storage.perfectcdn.com/abuzxl/7lzlq18chjfgl93n.gif );
  	background-position: 132px -40px;

}

/*definir a cor do navbar*/
.navbar-default{
    background-color: #080e3a;
    border-color: #e7e7e7;
}

..navbar-nav :hover {
 
	background-color: #293061;
}

.SiteLogoIMG{
  display: inline block;
  width: 18rem;
  max-height: 51px
    position: relative;
    top: 3px;
}
.ResetPasswordStyle{
	color:white;
}
.noDisplay{
 	display:none 
}
.navbarNoMargin{
	margin:0 !important;
}
.LoginImg{
	width:50px;
 
}

.cadastrob{    
 
    text-align: center;
            margin-top: 20px;
            font-family: Arial, sans-serif;
 display: inline-block;
            padding: 12px 12px;
            color: #fff;
            background-color: #4CAF50;
            text-decoration: none;
            font-weight: bold;
            border-radius: 8px;
            transition: background-color 0.3s ease;
    background-color: #5271FF;
  
}

.InputStyle{
 background-color:#ffff !important;
 border-radius:62px !important; 
 max-height: 65px !important;
  padding-right:20px !important;
}

.InputStyle input{
 outline:none !important;
  border:none !important;
  width:90% !important;
}

.InputButton:hover{
 	opacity:0.8 !important;
  	transition: all 0.1s ease-in-out !important;
}

/* Container principal para centralizar no site */
.orders-info-container {
 margin-top: 40px;           /* Levanta todo o contêiner */
  display: flex;            /* Ativa o flexbox */
  justify-content: center;  /* Centraliza horizontalmente */
  align-items: center;      /* Centraliza verticalmente */
}

/* Estilo para o conteúdo */
.orders-info{
  background-color: #fff; /* Fundo do conteudo/cinza */
  border-radius: 5px;        /* Bordas arredondadas */
  padding: 5px 10px;         /* Reduz o espaçamento interno */
  width: 50%;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif; /* Fonte padrão */
  font-size: 27px;           /* Reduz o tamanho da fonte */
  margin: 0;                 /* Remove margens externas */
  text-align: center;        /* Centraliza o texto */
    
}

/* Estilo completo do rodapé */
 .rodape1 {
 text-align: start;
    font-size: 24px;
    font-weight: bold; /* Texto em negrito */
    color: rgb(0, 0, 255);
    font-family: inherit;
  display: flex;
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center;    /* Centraliza verticalmente */
  height: 10vh;          /* Altura da tela inteira */
  margin: 0;              /* Remove margens padrão do body */

}
/* Se você quiser uma animação, como no código original */
.rodape2{
display: inline-block;
  padding: 0px 235px;         /* Espaçamento interno para mais espaço */
  border: none;     /* Aumenta o tamanho da borda */
  border-radius: 5px;         /* Bordas levemente arredondadas (opcional) */
  width: 20hv;
    overflow: hidden;
    text-align: initial;
    white-space: nowrap;
  background-color: rgb(173, 216, 230);
  
}

/* Estilos responsivos para telas menores */
@media (max-width: 768px) {
    .rodape1 {
        font-size: 20px;      /* Reduz o tamanho da fonte */
        height: auto;         /* Ajusta a altura dinamicamente */
        padding: 10px;        /* Adiciona espaçamento interno */
        flex-wrap: wrap;      /* Permite que o conteúdo quebre linhas */
    }

    .rodape2 {
        padding: 8px 15px;    /* Reduz espaçamento interno */
        font-size: 18px;      /* Reduz tamanho da fonte */
        width: 100%;          /* Ocupa toda a largura disponível */
        text-align: center;   /* Texto centralizado */
    }
}

.alert-box {
  	font-weight: 700; /* Texto em negrito */
   
    color: #212529; /* Texto padrão */
    padding: 10px 20px; /* Espaçamento interno */
    margin: 10px auto; /* Espaçamento vertical e centralização horizontal */
    font-size: 14px; /* Tamanho do texto */
    line-height: 1.5; /* Altura das linhas */
    border-radius: 5px; /* Bordas arredondadas */
    max-width: 70%; /* Limita a largura */
    text-align: left; /* Texto alinhado à esquerda */
}

.alert-title {
    font-weight: 700; /* Texto em negrito */
    color: white; /* Cor do texto branco */
    background-color: #e74c3c; /* Fundo vermelho vivo */
    padding: 2px 6px; /* Espaçamento interno */
    border-radius: 3px; /* Bordas arredondadas */
    margin-right: 5px; /* Espaçamento entre o título e o texto */
    display: inline-block; /* Mantém o título ao lado do texto */
}

/* Ocultar por padrão */
.bottom-nav {
  display: none;
}

/* Exibir apenas em telas menores (mobile) */
@media (max-width: 768px) {
  .bottom-nav {
    position: fixed; /* Fixa no rodapé */
    bottom: 0; /* Mantém no final da tela */
    left: 0; /* Garante que a barra comece do lado esquerdo */
    right: 0; /* Garante que a barra termine no lado direito */
    width: 100%; /* Ocupa toda a largura */
    height: 60px; /* Altura da barra */
    background-color: #fff; /* Fundo branco */
    display: flex; /* Habilita o layout flexível */
    justify-content: space-around; /* Distribui os itens de forma equilibrada */
    align-items: center; /* Centraliza os itens verticalmente */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Sombra leve */
    z-index: 1000; /* Mantém a barra sobre outros elementos */
    box-sizing: border-box; /* Garante que padding/margin não alterem a largura */
  }
}

  .bottom-nav a {
    text-decoration: none; /* Remove sublinhado */
    color: #333; /* Cor padrão dos ícones/textos */
    text-align: center; /* Centraliza o texto */
    font-size: 12px; /* Tamanho da fonte */
    display: flex; /* Habilita layout flexível nos links */
    flex-direction: column; /* Alinha ícone e texto verticalmente */
    align-items: center; /* Centraliza ícones/textos */
      font-weight: bold;
  }
  
 
  .bottom-nav .icon {
    font-size: 20px; /* Tamanho dos ícones */
    font-style: normal; /* Remove o estilo itálico */
  transform: none; /* Remove qualquer rotação */
  display: inline-block; /* Garante que o emoji seja tratado como um bloco */
  text-align: center; /* Centraliza, se necessário */
  vertical-align: middle; /* Centraliza em relação ao texto adjacente */
    
  }
  

  /* Botão de ação (ícone central) */
  .action-button {
    background-color: #5271FF; /* Azul */
    color: white; /* Cor do texto (ícone branco) */
    width: 60px; /* Largura do botão circular */
    height: 60px; /* Altura do botão circular */
    border-radius: 50%; /* Torna o botão redondo */
    display: flex; /* Layout flexível */
    justify-content: center; /* Centraliza o ícone horizontalmente */
    align-items: center; /* Centraliza o ícone verticalmente */
    position: relative; /* Ajusta o posicionamento */
    top: 0px; /* Ajuste vertical (modifique se necessário) */
    box-shadow: 0 6px 8px rgba(82, 113, 255, 0.5); /* Sombra para o botão */
  }

  .action-button .icon {
    font-size: 24px; /* Tamanho do ícone central */
  }
}

.bottom-nav a.active {
  color: #007bff; /* Destaque para o botão ativo */
}

.bigContainer{
  height:100vh;
  background-image: url(https://storage.perfectcdn.com/abuzxl/71ezk98b7qhrcb6p.png);/*plano de fundo*/
  background-size: cover; /* Ajusta o tamanho para cobrir o elemento */
  background-position: center; /* Centraliza a imagem */
  background-repeat: no-repeat; /* Evita repetição da imagem */
}

.formContainer{
	background-color:transparent;
  	width:90%;
}
.formContainer form{
 	width:100%;
  	display:flex;
  flex-direction:column;
   justify-content: center;
  align-items:center
  	
}
.h-full{
 	height:100vh 
}

.flex{
 display:flex;
}
.col{
 	
  flex-direction:column;
  
}
/* Justificar conteúdo ao centro */
.justify-center {
    justify-content: center;
}

/* Justificar conteúdo ao início (esquerda) */
.justify-start {
    justify-content: flex-start;
}

/* Justificar conteúdo ao final (direita) */
.justify-end {
    justify-content: flex-end;
}

/* Espaçar itens igualmente, com o primeiro e o último item nas bordas */
.justify-between {
    justify-content: space-between;
}

/* Espaçar itens igualmente, com espaço adicional ao redor de cada item */
.justify-around {
    justify-content: space-around;
}

/* Espaçar itens igualmente, com espaço igual entre eles */
.justify-evenly {
    justify-content: space-evenly;
}

/* Alinhar itens ao centro verticalmente */
.align-center {
    align-items: center;
}

/* Alinhar itens ao início verticalmente (topo) */
.align-start {
    align-items: flex-start;
}

/* Alinhar itens ao final verticalmente (base) */
.align-end {
    align-items: flex-end;
}

/* Alinhar itens ao esticar para ocupar toda a altura do container */
.align-stretch {
    align-items: stretch;
}

/* Alinhar itens na linha base do conteúdo */
.align-baseline {
    align-items: baseline;
}

/* Gaps de 2 em 2 até 100 */
.gap-2 { gap: 2px; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-14 { gap: 14px; }
.gap-16 { gap: 16px; }
.gap-18 { gap: 18px; }
.gap-20 { gap: 20px; }
.gap-22 { gap: 22px; }
.gap-24 { gap: 24px; }
.gap-26 { gap: 26px; }
.gap-28 { gap: 28px; }
.gap-30 { gap: 30px; }
.gap-32 { gap: 32px; }
.gap-34 { gap: 34px; }
.gap-36 { gap: 36px; }
.gap-38 { gap: 38px; }
.gap-40 { gap: 40px; }
.gap-42 { gap: 42px; }
.gap-44 { gap: 44px; }
.gap-46 { gap: 46px; }
.gap-48 { gap: 48px; }
.gap-50 { gap: 50px; }
.gap-52 { gap: 52px; }
.gap-54 { gap: 54px; }
.gap-56 { gap: 56px; }
.gap-58 { gap: 58px; }
.gap-60 { gap: 60px; }
.gap-62 { gap: 62px; }
.gap-64 { gap: 64px; }
.gap-66 { gap: 66px; }
.gap-68 { gap: 68px; }
.gap-70 { gap: 70px; }
.gap-72 { gap: 72px; }
.gap-74 { gap: 74px; }
.gap-76 { gap: 76px; }
.gap-78 { gap: 78px; }
.gap-80 { gap: 80px; }
.gap-82 { gap: 82px; }
.gap-84 { gap: 84px; }
.gap-86 { gap: 86px; }
.gap-88 { gap: 88px; }
.gap-90 { gap: 90px; }
.gap-92 { gap: 92px; }
.gap-94 { gap: 94px; }
.gap-96 { gap: 96px; }
.gap-98 { gap: 98px; }
.gap-100 { gap: 100px; }


@media(max-width: 768px){
	.container-form-sigIn{
		display: flex;
    	flex-wrap: wrap;
	}
  	.container-form-sigIn div{
		width:100%;
      	min-width;300px;
       border: 1px solid #5271FF;
	}
  .InputButton{
  	width: 60%;
    padding: 15px 5px;
    border: none;
    border-radius: 25px;
    color: #fff;
    background-color: #5271FF;
  }
  
  .container-logo-sigIn img{
  	width:100%;
    max-width:500px
  }
  .nav-pills{
  display: flex;
    margin-bottom: 10px;
    flex-direction: column;
  }
  
}

@media(min-width: 768px){
  
  .container-form-sigIn div{
     min-width: 300px;
     border: 1px solid #5271FF;
	}
	
  .InputButton{
  	width: 30%;
    border-radius: 62px;
    border: none;
    color: #fff;
    background-color: #5271FF;
    min-width: 150px;
  }
  
  .container-logo-sigIn img{
  	width:100%;
    max-width:500px;
  }
}

/*------*/

.container-logo-sigIn{
	margin-bottom: 30px;
}

.container-sigIn{
	display:flex;
  	flex-direction:column;
}

.responsive-table{
	width:100%;
}

.navbar-nav li a{
	color:#fff !important;
}

.navbar-nav .active a{
	background-color:#5271FF !important;
}

.esconder{
	float: right;
 	min-height: 25px;
    background: #5271FF;
    border-radius: 5px;
    text-align: center;
  	margin-top: -5px;
  	color: #fff;
  	padding: 5px;
  	text-decoration: none;
}

.esconder:active{
	color:#fff !important;
}
.esconder:hover{
	color:#fff !important;
  	text-decoration: none;
}
.border-rounded{
	margin-top: 5px;
}

.select2-selection--single{
    padding: 10px 5px;
}

.form-control{
	min-height: 42px;
}

.navbar-right .active{
background-color:#5271FF;
}

.navbar-right .active a{
color:#fff !important;
}

.navbar-left-block .active a{
	color:#fff !important;
}
.navbar-right li a, .navbar-left-block li a{
	color:#ebebeb !important;
}


@media (max-width: 768px){
	.register-container-sigIn{
	display: flex;
    color: white;
    flex-direction: column;
}

  .cadastro{
  	margin-top:5px;
  }

}


  .cadastro{
  		background: #5271FF;
        color: #fff;
        border-radius: 5px;
        padding: 5px;
    	text-decoration: none;
  }

.cadastro:hover{
  		background:#525bff;
    	text-decoration: none;
        color: #fff;
}

.categoriablock {
    background-color: #007bff !important;
    color: white !important;
    font-weight: bold !important;
}

/* css de orders */
  
  /* loading styles */
.container-loading {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999; /* Ajustado para um valor mais razoável */
  background-color: rgba(0, 0, 0, 0.377);
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
  display: none;
}

.loading {
  color: #000;
  width: 300px;
  height: 150px;
  border-radius: 5px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
}

.btn-closed-message {
  position: absolute;
  top: 5px;
  right: 10px;
  color: red;
}

.btnFechar {
  background-color: red;
  border: none;
  color: #fff;
  border-radius: 3px;
}

.progress-bar {
  padding: 5px;
  width: 60px;
  position: absolute;
  bottom: 5px;
  background-color: greenyellow;
  align-self: flex-start;
  margin-left: 10px;
  font-size: 15px;
  height: 30px;
  color: #000;
}

.message {
  margin: 15px;
}

.loading i {
  margin-left: 5px;
}
/* end loading styles */

/* Styling for refill buttons */
.btn-refill {
  cursor: pointer !important;
}

.refill-all {
  border: none;
  background-color: rgb(81, 175, 199);
  width: 100%;
  border-radius: 5px;
}

.refill-all:active {
  background-color: #2b3d51;
  color: rgb(81, 175, 199);
}

.numero {
  text-align: center;
}

.fa-copy {
  color: black;
}

.fa-copy:hover {
  color: rgb(0, 255, 0);
}

.fa-copy:active {
  color: rgb(0, 200, 0);
}

.btn-copy {
  border: none;
  background-color: transparent;
  margin-left: 1vw;
}

/* Media Queries */
@media (max-width: 768px) { /* ------------mobile----------- */
  .dropdown {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 0;
  }
  

  .search-container {
    margin-left: auto;
    margin-right: auto;
    margin-top: 2vh;
    list-style: none;
    
  }

  .nav-pills {
    display: flex;
    flex-direction: column;
    margin-top: 1.5vh;
    width: 88vw;
  }

  .form-control {
    margin-left: 1.5vw; /* Corrigido: faltava o ":" */
    width: 85%;
  }

  .well {
    padding: 5px;
  }

  .versaoMobile {
    display: flex;
    justify-content: center;
    flex-direction: column;
  }

  .versaoDesktop {
    display: none;
  }

  .mobile {
    margin: 2vw;
  }
}

@media (min-width: 768px) {
  .versaoMobile {
    display: none;
  }

  .nav-pills {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 1vh;
    flex-wrap: nowrap;
  }

  .col-lg-12 {
    padding: 2px;
  }
}

  .filtrar{
   background-color: #5271FF; 
   color: white;
    
  }
  
  
  
 .card-order{
	padding: 10px;
    border-radius: 5px;
    background-color: #f3f3f3;
    margin-bottom: 10px;
}

.id-and-angle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.order-actions .btn {
border-radius:15px !important;
margin: 15px 0;
}

.more-info-card-order{
	display:none;
}
.card-more-info div{
 
    padding: 10px 5px;
    border-radius: 5px;
    background-color: #efefef;
}

.order-actions-container{
	width:100px;
}

.id-and-angle{
	padding:5px;
}

.label-more-info{
	margin-top:5px;
}

.btn-more-info-card{
    border: 1px solid #000;
    padding: 5px;
    border-radius: 3px;
}
.btn-more-info-card:active{
	background-color:#2b3d51;
	color:#fff;
}

.your-email-2fac span{
	font-weight:bold;
  	
}



/* Start Mode */


body.dark{

background-color: #27282d !important;
color: #fff;

}

body.dark .well{
	background-color: #27282d !important;
	color: #fff;
  
}

body.dark .panel-body{
	background: #484848;
  color: #fff;

}

body.dark .avisoLogin font{
	background-color: #5bc0de !important;
  	color: #fff
}

body.dark .open{
	background-color: #27282d !important;
	color: #fff;
}

body.dark .filter-option, body.dark .dropdown, body.dark .select2-selection, body.dark .inner, body.dark .select2-dropdown, body.dark .select2-results__option, body.dark .form-control, body.dark .center-big-content-block{
	background-color: #27282d !important;
	color: #fff;
}

body.dark .inner a, body.dark .select2-results__option a, body.dark .min-max{
	color:#fff !important;
}

body.dark .menu-fixed-bottom{
	background-color: #27282d !important;
	
}

body.dark .menu-fixed-bottom a{
	color: #fff;
}


body.dark .table {
	background-color: #484848 !important;
	color: #fff;
}


/*body.dark .table-historico{
  	background-color: #484848 !important;
	color: #000 !important;
}*/

body.dark .pagination a{
	background-color: #27282d !important;
	color: #fff;
}

body.dark .pagination a:active{
	background-color: #484848 !important;
}

body.dark .navbar{
	background-color: #27282d;
  	border: rgba(0, 43, 136, 1)
}

body.dark .active{
	background-color: #484848 !important;
  	color: #000;
}

body.dark .well span, body.dark p, body.dark font{
	color: #fff;
}

body.dark .well h2{
	color: #000
}

body.dark b{
color: #000;
}

body.dark .table-updates span{
	color: #000!important;
}

body.dark .table-historico .table-link a{
  	color: #337ab7 !important;
	
}

body.dark .dropdown-menu a:hover{
	background-color: #484848;
}

body.dark .dropdown-toggle, body.dark .dropdown-menu{
  background-color:#484848 ;
 
}
body.dark .dropdown-menu a{
 color: #fff;
}

.box-mode-desktop{
	background-color: transparent;
  	border:none;
  	color: #fff;
}

body.dark .mode-desktop{
	color:#fff;
}

.box-mode-desktop a{
	display: inline-block;
    padding: 14px;
  	

}

.box-mode-desktop:hover{
	background-color: #51afc7;
}

.box-mode-desktop a{
	color: #fff;
}


body.dark .box-mode-desktop a{
	color: #fff;
}

body.dark .td-id a{
	color: #003952;
    font-weight: 600;
  
}


/*body.dark .table-historico tr{
	background-color: #484848 !important;
  	color: #fff !important;
}
*/

body.dark .table-historico .table-link b{
	color: #003952 !important;
  	font-weight: 600;
}



}

  /* Tema claro padrão */
    body {
      background-color: #eee;
      color: #000;
      margin: 0;
      font-family: Arial, sans-serif;
    }
  
  .well{
   min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
   
  }
  
 

    /* Tema escuro */
    body.dark {
      background-color: #27282d;
      color: #fff;
    }

    /* Estilo fixo para páginas com "light-theme" */
    body.light-theme {
      background-color: #fff !important; /* Forçar fundo branco */
      color: #000 !important;
    }

    /* Botão de alternância do tema */
    .theme-button {
      position: fixed;
      top: 30px;
      right: 500px;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
      z-index: 1000;
      background-color: #51afc7; /* Tema claro */
      color: #fff;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }
  

    /* Botão no tema escuro */
    body.dark .theme-button {
      
      color: #fff;
    }
  
body.dark .bottom-nav {

background-color: #333;
  
  
}

body.dark .bottom-nav a {

  color: #fff;
  
}

body.dark .ticket-message-left .ticket-message{
  
  	color: #333; !important
  	background-color:#333;
   
}

   /* Botão no desktop */
/* Botão no desktop */
    .theme-button.desktop {
      position: fixed;
      top: 650px;
      right: 20px;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 25px;
      z-index: 1000;
      color: #fff;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      background-color: #5271FF;
      
  }

/* Estilo para o botão no mobile */
    .theme-button.mobile {
      position: fixed;
      bottom: 20px;
      top:620px;
      right: 20px;
      padding: 12px 18px;
      max-height:7%;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-size: 20px;
      z-index: 1000;
      color: #fff;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      background-color: #5271FF;
    }


#change-language-btn {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #236cff;
  color: white;
  border: none;
  border-radius: 5px;
}

#change-language-btn:hover {
  background-color: #1e5bbb;
}

/*tickets balões */
.ticket-message-right .ticket-message{
    background: #0520a6;
  color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 15px;
  	font-weight: bold;
}
.ticket-message-left{

}
.ticket-message-left .ticket-message{
    background: #6d7591;
  	color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 15px;
  font-weight: bold;
}

.titcket-title{
  font-weight: bold;
}

/* Estilo do pop-up */
.popup-container {
    display: none; /* Esconde o pop-up inicialmente */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fundo transparente */
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.popup-content {
    padding: 20px;
    border-radius: 10px;
    width: 80%;
    max-width: 500px;
    text-align: center;
    position: relative;
    color: #5271FF; !important /* Cor padrão do texto (aplicada globalmente) */
}

  
  /* Estilo para o tema claro */
@media (prefers-color-scheme:light) {
    .popup-content {
        background-color: white; /* Cor de fundo branca no tema claro */
        color: black;
      
    }

    .popup-close {
        color: black; /* Cor do X no tema claro */
    }

    button {
        background-color: #4CAF50;
        color: white;
    }
}
  
/* Estilo para o tema escuro */ 
@media (prefers-color-scheme: dark) {
    .popup-content {
        background-color: #333; /* Cor de fundo escura no tema escuro */
        color: white; /* Cor do texto branca */
    }
  
 .popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
    cursor: pointer;
}

.popup-close:hover {
    color: red;
}

button {
    padding: 10px 20px;
    background-color: #5271FF;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #26c5de;
}

  
 /* Animação de entrada (fade-in) */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animação de saída (fade-out) */
@keyframes fadeOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* Estilos para o conteúdo do pop-up */
.popup-content.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

.popup-content.fade-out {
    animation: fadeOut 0.5s ease-in-out;
}

 /* Estilo para o banner de ATENÇÃO */
 .aviso-container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px;
   	margin-bottom: 30px;
}

.aviso-atencao {
    background-color: #5271FF; /* Cor chamativa */
    color: #fff;
  	font-weight: bold;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    max-width: 80%; /* Evita que fique muito largo */
    font-size: 16px; /* Ajuste do tamanho do texto */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Sombra leve para destaque */
}
  
  .pedidoicon {
    width: 36px;
    height: 36px;
    margin-right: 10px;
}

.facapedido {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to left, rgba(26, 110, 250, 0.40), transparent);
    color: #162e76;
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 30px;
    padding-left: 16px; /* Em vez de usar left */
    border-radius: 5px;
    width: 100%;
    max-width: 100%; /* Evita esticamento */
}