:root {
    --winn-white: #ffffff;
    --winn-blue: #0A1E36;    /* Azul Profundo */
    --winn-gold: #BFA15F;    /* Dourado Principal */
    --winn-gold-light: #fcde9a;
    --winn-gold-lighter: #DCC388;
    --winn-gold-lighting: #dcc3887b;
    --winn-gold-lig: #e6cd2c;
    --winn-text: #333;
    --whatsapp-green: #25D366; /* Cor oficial do WhatsApp */
    --brand-navy: #0e2338;
    --brand-gold: #c5a065;
    --brand-gold-lighting: #dcc3887b;
    --brand-gold-dark: #a3824b;
    --brand-bg: #f8f9fa;
}

.fundo-body {
  /* background-image: url('../images/fundo.jpg');
  background-repeat: no-repeat; */
  background-color: #10213E;
}

input, select, #image {
  border: 1px solid #000;
  border-radius: 5px;
  width: 100%;
}

#aplicativo, #pesid, #pesrg, #pestelefone, #pescep, #pescomplemento, 
#usrsenha, #senha, #pesindicado, #imagem, #cboperfil, #indindicado, #mtpid {
  width: 60%;
}

#pescpf {
  width: 100%;
}

#logoempresa {
  width: 20%;
  height: 20%;
}

.h50 {
  height: 50px;
}

.pad-sup-10 {
  padding-top: 10px;
}

.pad-bot-10 {
  padding-bottom: 10px;
}

.pad-sup-15 {
  padding-top: 15px;
}

.pad-bot-15 {
  padding-bottom: 15px;
}

.pad-sup-30 {
  padding-top: 30px;
}

.pad-esq-0 {
  padding-left: 0px;
}

.pad-dir-10 {
  padding-right: 10px;
}

#loading {
  display: none;
}

.loader {
  width: 100%;
}
  
.loader-wheel {
  animation: spin 1s infinite linear;
  border: 2px solid #960110;
  border-left: 4px solid #960110;
  border-radius: 50%;
  height: 50px;
  margin-bottom: 10px;
  width: 50px;
}

.loader-text {
  color: #960110;
  font-family: arial, sans-serif;
}

.loader-text:after {
  content: 'Aguarde, enviados os dados!';
  animation: load 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes load {
  0% {
    content: 'Aguarde, enviados os dados!';
  }
  33% {
    content: 'Aguarde, enviados os dados!.';
  }
  67% {
    content: 'Aguarde, enviados os dados!..';
  }
  100% {
    content: 'Aguarde, enviados os dados!...';
  }
}

.msgimg {
  font-size: 14px;
  color: #ff0000;
}

.msginvestimento {
  font-size: 16px;
  color: #ff0000;
}

.msgrede {
  font-size: 22px;
  color: #ff0000;
}

.margem-left-11p {
  margin-left: -7%;
}

.pad-dir-5 {
  padding-right: 0%;
}

.border-rounded {
  border-radius: 10px;
  /* background-color: #C5A059; */
}


#dvnivel1 {
  border-radius: 10px;
  border: 4px solid #C5A059;
  background-color: #c59f5946;
  width: 120px;
  height: 100px;
  font-size: 16px;
  float: left;
  overflow: hidden; /* Para garantir que a imagem não transborde */
}

#dvnivel1 img, #dvnivel2 img, #dvnivel3 img {
  width: 100%; /* A imagem ocupa 100% da largura da div */
  height: auto; /* Mantém a proporção */
  display: block; /* Remove espaço extra abaixo da imagem */
}

#dvnivel2 {
  border-radius: 10px;
  border: 4px solid #5962c5;
  background-color: #5962c546;
  width: 120px;
  height: 100px;
  font-size: 16px;
  float: left;
  overflow: hidden; /* Para garantir que a imagem não transborde */
}

#dvnivel3 {
  border-radius: 10px;
  border: 4px solid #6fc559;
  background-color: #6fc55946;
  width: 120px;
  height: 100px;
  font-size: 16px;
  float: left;
  overflow: hidden; /* Para garantir que a imagem não transborde */
}

/* Efeito de ToolTips nos campos */
/* Primeiro Nivel */
.tooltip-container {
  position: relative; /* Essencial para posicionar a dica */
  display: inline-block; /* Ocupa apenas o espaço do conteúdo */
  cursor: pointer;
}

.tooltip-text {
  visibility: hidden; /* Esconde a dica por padrão */
  opacity: 0; /* Garante que fique invisível */
  width: 120px;
  background-color: #c59f59;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute; /* Posiciona a dica em relação ao container */
  z-index: 1;
  bottom: 125%; /* Posição acima do texto */
  left: 50%;
  margin-left: -60px; /* Centraliza a dica */
  transition: opacity 0.3s; /* Adiciona uma transição suave */
}

/* Efeito hover: mostra a dica */
.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Segundo Nivel */
.tooltip2N-container {
  position: relative; /* Essencial para posicionar a dica */
  display: inline-block; /* Ocupa apenas o espaço do conteúdo */
  cursor: pointer;
}

.tooltip2N-text {
  visibility: hidden; /* Esconde a dica por padrão */
  opacity: 0; /* Garante que fique invisível */
  width: 120px;
  background-color: #5962c5;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute; /* Posiciona a dica em relação ao container */
  z-index: 1;
  bottom: 125%; /* Posição acima do texto */
  left: 50%;
  margin-left: -60px; /* Centraliza a dica */
  transition: opacity 0.3s; /* Adiciona uma transição suave */
}

/* Efeito hover: mostra a dica */
.tooltip2N-container:hover .tooltip2N-text {
  visibility: visible;
  opacity: 1;
}

/* Terceiro Nivel */
.tooltip3N-container {
  position: relative; /* Essencial para posicionar a dica */
  display: inline-block; /* Ocupa apenas o espaço do conteúdo */
  cursor: pointer;
}

.tooltip3N-text {
  visibility: hidden; /* Esconde a dica por padrão */
  opacity: 0; /* Garante que fique invisível */
  width: 120px;
  background-color: #6fc559;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute; /* Posiciona a dica em relação ao container */
  z-index: 1;
  bottom: 125%; /* Posição acima do texto */
  left: 50%;
  margin-left: -60px; /* Centraliza a dica */
  transition: opacity 0.3s; /* Adiciona uma transição suave */
}

/* Efeito hover: mostra a dica */
.tooltip3N-container:hover .tooltip3N-text {
  visibility: visible;
  opacity: 1;
}

@media screen and (min-width: 412px) and (max-width: 914px) {
  .margem-left-11p {
    margin-left: -20%;
  }

  #btncopiar {
    width: 50%;
  }
}

@media screen and (min-width: 915px) and (max-width: 992px) {
  .margem-left-11p {
    margin-left: -18%;
  }

  #btncopiar {
    width: 50%;
  }
}

#btncopiar {
  width: 40%;
}

.alinhar-direita {
  text-align: right;
}

#dvbloqueado {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background-color: #c90000;
}

#dvliberado {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background-color: #2cc900;
}

.text-green {
  color: #2cc900;
}

.text-red {
  color: #c90000;
}

.text-blue {
  color: #0000c9;
}

.fundo-branco {
  background-color: #ffffff;
}

.fundo-gold {
  background-color: #edc672;
}

.ajuste-img {
  padding-top: 25px;
}

.text-cdacesso {
  font-size: 16px;
}

/* Estilo básico para a imagem */
#imgview {
  transition: all 0.3s ease; /* Efeito de suavidade na mudança */
  display: block;
  /* margin-top: 20px; */
}

.texto-titulo-rede {
  font-size: 13px;
}

.pad-space {
  margin-right: 5%;
}

textarea {
  resize: none;
}

.areatexto {
  resize: none;
  width: 100%;
  height: 400px;
}

/* Ajuste de CSS para dar destaque ao número da estatística */
.stat-panel .huge {
  font-size: 38px;
  font-weight: bold;
  line-height: normal;
}

.stat-panel .panel-heading {
  padding: 15px 20px;
}

.stat-panel .text-success-custom {
  color: #5cb85c;
  font-weight: bold;
}

.panel-silver {
  color: #e2e2e2;
  background-color: #a2a2a2;
  border-color: #a2a2a2;
}

.panel-gold {
  color: #ffe6b0;
  background-color: var(--winn-gold);
  border-color: var(--winn-gold);
}

/* Estilo para a opção 2 (Overlay de tela cheia) */
#overlay-processamento {
  display: none; /* Escondido por padrão */
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  text-align: center;
}

#overlay-processamento .conteudo-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.saldo-disponivel {
  font-size: 18px;
}

.text-icone-copiar {
  font-size: 18px;
}

.text-div-center {
  margin-left: 30%;
}

.icone-copiar {
  font-size: 16px;
}