/*!
 * Estilo para o Sistema Blackbelt
 */

/* Estilizando a linha */
.linha-cinza {
    border: none;       /* Remove a borda padrão */
    border-top: 1px solid #b49362; /* Define a borda superior como uma linha cinza */
    margin: 0px 0;     /* Espaçamento em volta da linha */
    width: 100%;        /* Faz a linha ocupar toda a largura */
}
#relatorio {
    font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    white-space: nowrap;
    width: 100%;
    background-color: #656f79;
}

#relatorio td, #relatorio th {
    padding: 10px;
    text-align: center;
    white-space: nowrap;
    color: white;
}

#relatorio tr:nth-child(even){background-color: #5c646c;}

#relatorio tr:hover {background-color: #505861;}

#relatorio th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
    background-color: #111;
    color: #b49362;
}

#moeda {
  font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  white-space: nowrap;
  width: 100%;
}

#moeda td, #moeda th {
  padding: 10px;
  text-align: left;
}

#moeda tr:nth-child(even){background-color: #f2f2f2;}

#moeda tr:hover {background-color: #ddd;}

#moeda th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #ddd;
  color: black;
}


#montante {
  font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  white-space: nowrap;
  width: 100%;
}

#montante td, #montante th {
  padding: 5px;
  text-align: center;
}

#montante tr:nth-child(even){background-color: #f2f2f2;}

#montante tr:hover {background-color: #ddd;}

#montante th {
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  background-color: #ddd;
  color: black;
}


#diapagto {
  font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  white-space: nowrap;
  width: 100%;
}

#diapagto td, #diapagto th {
  padding: 5px;
  text-align: center;
}

#diapagto th {
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  background-color: #ddd;
  color: black;
}


#login {
  font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  white-space: nowrap;
  width: 100%;
}

#login td, #login th {
  padding: 12px;
  text-align: center;
}

#login th {
  padding-top: 7px;
  padding-bottom: 7px;
  text-align: center;
  background-color: #ddd;
  color: black;
}


#cadastro {
  font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  white-space: nowrap;
  width: 100%;
}

#cadastro td, #cadastro th {
  padding: 5px;
  text-align: left;
  border: 1px solid #ddd;
}

#cadastro th {
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: left;
  background-color: #ddd;
  color: black;
}

#titulo {
  font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  white-space: nowrap;
  width: 100%;
}

#titulo th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #ddd;
  color: black;
}

#msg-erro {
  text-align: center;
  font-size: 10px;
  background-color: #ece3e7;
  color: red;
}

#msg-ok {
  text-align: center;
  font-size: 10px;
  background-color: #ebf9f1;
  color: black;
}

/* nav-pills not active */
.nav-pills .pill .nav-link:not(.active) {
    background-color: #eeeeee;
    color: black;
    height: 30px;
    padding-top: 2px;
    margin-left: 10px;
}

/* nav-pills active (faded) */
.nav-pills .pill .nav-link {
    background-color: #868e96;
    color: white;
    height: 30px;
    padding-top: 2px;
    margin-left: 10px;
}

/* nav-pills hover */
.nav-pills .pill .nav-link:hover {
    background-color: #868e96;
    color: white;
    height: 30px;
    padding-top: 2px;
    margin-left: 10px;
}

/* nav-tabs tab-content remove border */
.nav-tabs, .tab-content {
    border-spacing: 0;
    border-collapse: collapse;
    border: none;
    margin: 0;
    padding: 0;
}

/* nav-tabs not active */
.nav-tabs .tab-1 .nav-link:not(.active) {
    background-color: #bbb;
    color: black;
    border: 1px solid #777;
    box-shadow: 0 0 0.2em hsl(219, 1%, 72%);
/*     border-top: 3px solid #090909; */
}

/* nav-tabs active (faded) */
.nav-tabs .tab-1 .nav-link {
    background-color: #111;
    color: #b49362;
    border: 1px solid #777;
    box-shadow: 0 0 0.2em hsl(219, 1%, 72%);
/*     border-top: 3px solid hsl(400, 96%, 48%); */
}

/* nav-tabs hover */
.nav-tabs .tab-1 .nav-link:hover {
    background-color: #111;
    color: #b49362;
    border: 1px solid #777;
    box-shadow: 0 0 0.2em hsl(219, 1%, 72%);
/*     border-top: 3px solid hsl(400, 96%, 48%); */
}

/* Ajusta a altura do Navbar */
.navbar-brand img {
    height: 50px;
}
/* Define a largura máxima do container principal */
.main-container {
    max-width: 90%;
    margin: 0 auto; /* Centraliza horizontalmente */
}
/* Define a largura máxima do container */
.custom-container {
    max-width: 100%;
    margin: 0 auto; /* Centraliza horizontalmente */
}
/* Define as caracteristicas do item no carousel */
.carousel-item img {
    height: 100%;
    width: 100%; /* Garante a proporcionalidade da largura */
    max-height: 100%; /* Limita a altura ao tamanho do contêiner */
    object-fit: cover; /* Evita cortes ou distorções */
}
/* Define a posicao do texto sobre a imagem no carousel */
.carousel-caption-custom {
    top: 54%; /* Ajusta a distância da parte superior */
    left: 5%;   /* Ajusta a distância da lateral esquerda */
    text-align: left; /* Alinha o texto à esquerda */
}
/* Ajustes para a altura do carrossel para mobile*/
.carousel-item {
    height: 25vh; /* Altura padrão para mobile */
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Customizar a cor do botão btn-outline-warning */
.btn.btn-outline-warning {
    color: #fff; /* Amarelo claro personalizado */
    border-color: #b49362; /* Cor da borda */
    background-color: transparent !important; /* Fundo transparente por padrão */
    transition: none !important; /* Remove transições para evitar mudanças indesejadas */
}
/* Cor de fundo ao passar o mouse */
.btn.btn-outline-warning:hover {
    background-color: #b49362 !important; /* Fundo amarelo ao passar o mouse */
    color: #333 !important; /* Cor do texto */
}
/* Cor quando o botão está ativo */
.btn.btn-outline-warning:active,
.btn.btn-outline-warning:focus {
    background-color: #b49362 !important; /* Fundo amarelo */
    border-color: #b49362 !important; /* Borda amarelo */
    color: #333 !important; /* Cor do texto */
    box-shadow: none !important; /* Remove sombras extras */
}
/* Cor quando o botão está desabilitado */
.btn.btn-warning {
    background-color: #b49362 !important; /* Fundo amarelo */
    border-color: #b49362 !important; /* Borda amarelo */
    color: #333 !important; /* Cor do texto */
    transition: none !important; /* Remove transições para evitar mudanças indesejadas */
}
/* Cor do botão crie uma conta */
.badge.badge-warning {
    background-color: #b49362 !important; /* Fundo amarelo */
    border-color: #b49362 !important; /* Borda amarelo */
    color: #333 !important; /* Cor do texto */
    box-shadow: none !important; /* Remove sombras extras */
    transition: none !important; /* Remove transições para evitar mudanças indesejadas */
}

/* Define as caracteristicas do boxrodape */
.boxrodape {
    padding: 0px;
    margin: 20px 0px 20px 0px;
    max-width:352px;
    border-radius: 0.8em;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
/* Define as caracteristicas dos links no boxtexto */
.boxrodape a {
    text-decoration: none; /* Remove sublinhado dos links */
    color: inherit; /* Mantém a cor padrão do texto */
}
/* Define as caracteristicas do boxtexto */
.boxtexto {
    padding: 0px 12px;
    margin: 30px 0px 30px 0px;
    line-height: 1.7;
    text-align: center;
}
/* Estilo do texto do menu */
.navbar-custom .nav-link {
    color: #fff; /* Cor do texto */
    font-weight: 500; /* Peso da fonte */
    position: relative; /* Necessário para o uso do ::after */
    text-decoration: none; /* Remove sublinhado padrão */
    text-align: center; /* Garante centralização no mobile */
    display: inline-block; /* Garante o tamanho do underline pelo texto */
}
/* Underline responsivo para os itens do menu*/
.navbar-custom .nav-link::after {
    content: ""; /* Cria o elemento do underline */
    position: absolute;
    top: calc(73% + 1px); /* Espaço entre o texto e a linha */
    left: 0;
    width: 100%; /* Largura igual ao texto */
    height: 2px; /* Espessura do underline */
    background-color: #b49362; /* Cor do underline */
    transform: scaleX(0); /* Inicialmente oculto */
    transform-origin: center; /* Origem da animação */
    transition: transform 0.3s ease; /* Animação suave */
}
/* Mostrar underline no hover */
.navbar-custom .nav-link:hover::after {
    transform: scaleX(0); /* Expande o underline */
}
/* Mostrar underline no item ativo */
.navbar-custom .nav-link.active::after {
    transform: scaleX(1); /* Expande o underline */
}
/* Fundo da navbar */
.navbar-custom {
    background-color: #090909;
}
/* Substituir ícone padrão do botão de menu */
.navbar-toggler-icon {
    background-image: url('/blackbelt/img/botao-menu-yellow-01.gif'); /* Caminho para sua imagem local */
    background-size: cover; /* Ajusta a imagem ao tamanho do botão */
    width: 25px; /* Largura do ícone */
    height: 30px; /* Altura do ícone */
    transition: background-image 0.3s ease; /* Transição fluida */
}
/* Imagem do botão de menu (aberto) */
.navbar-toggler.open .navbar-toggler-icon {
    background-image: url('/blackbelt/img/botao-menu-x-yellow.gif'); /* Caminho da imagem aberta */
}
/* Contorno do botão de menu (foco ou hover) */
.navbar-toggler {
    border: 1px solid #b49362; /* Contorno branco semi-transparente */
}
/* Remover o outline ao clicar no botão */
.navbar-toggler:focus {
    outline: none; /* Remove o contorno padrão */
    box-shadow: none; /* Remove qualquer sombra adicional */
}
/* Define as caracteristica para area do captcha */
.captcha {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: 15px;
}
/* Define as caracteristica da imagem do captcha */
.captcha img {
    border: 1px solid #ccc;
    border-radius: 4px;
}
/* DEFINICAO DO CSS PARA VERSAO DESKTOP */
@media (min-width: 768px) {

    /* Altura do carousel para descktop */
    .carousel-item {
        height: 50vh;
    }
    /* Define a posicao do texto sobre a imagem do carousel para descktop */
    .carousel-caption-custom {
        top: 75%; /* Ajusta a distância da parte inferior */
        left: 4%;   /* Ajusta a distância da lateral esquerda */
        text-align: left; /* Alinha o texto à esquerda */
    }
    /* Define as caracteristicas container principal para descktop */
    .main-container {
        max-width: 94%; /* Define a largura máxima em 80% */
        margin: 0 auto; /* Centraliza horizontalmente */
    }
    /* Define as caracteristicas container para descktop */
    .custom-container {
        max-width: 98%; /* Define a largura máxima em 80% */
        margin: 0 auto; /* Centraliza horizontalmente */
    }
    /* Define as caracteristicas do boxrodape para descktop */
    .boxrodape {
        padding: 0px;
        margin: 25px;
        max-width:352px;
        border-radius: 0.2em;
        width: 98%;
        box-sizing: border-box;
        text-align: left;
    }
    /* Estilo do texto do menu para descktop */
    .navbar-custom .nav-link {
        color: #fff; /* Cor do texto */
        font-weight: 500; /* Peso da fonte */
        position: relative; /* Necessário para o uso do ::after */
        text-decoration: none; /* Remove sublinhado padrão */
        padding: 0px 0; /* Controle de espaçamento vertical */
        margin: 0 0px; /* Espaçamento horizontal entre os itens */
        display: inline-flex; /* Garante que o underline siga o tamanho do texto */
        align-items: center; /* Alinha o texto verticalmente */
    }
    /* Underline alinhado ao texto para descktop */
    .navbar-custom .nav-link::after {
        content: ""; /* Cria o underline */
        position: absolute;
        top: 22px; /* Ajusta a posição vertical do underline */
        left: 9px; /* Inicia na borda esquerda do texto */
        width: calc(100% - 18px); /* Largura exata com pequeno ajuste para evitar excesso */
        height: 2px; /* Espessura do underline */
        background-color: #b49362; /* Cor do underline */
        transform: scaleX(0); /* Inicialmente oculto */
        transform-origin: left; /* Animação parte da esquerda */
        transition: transform 0.3s ease; /* Transição suave */
    }
    /* Mostrar underline ao passar o mouse para descktop */
    .navbar-custom .nav-link:hover::after {
        transform: scaleX(1); /* Expande o underline */
    }
    /* Mostrar underline no item ativo para descktop */
    .navbar-custom .nav-link.active::after {
        transform: scaleX(1); /* Expande o underline */
    }
    /* Fundo da navbar para descktop */
    .navbar-custom {
        background-color: #090909;
    }
    /* Define a largura máxima do navbar para descktop */
    .navbar-custom .container {
        max-width: 1300px;
    }
}

/* dropdown hover */
/*.dropdown:hover .dropdown-menu { display: block; }*/

/*.dropdown-item.active {
    background: goldenrod;
}*/