@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
         
}



/* Estilo padrão para telas grandes */
.elemento {
    margin-left: -30px;
}

/* Para telas pequenas (largura máxima de 768px, por exemplo) */
@media (max-width: 768px) {
    .elemento {
        margin-left: 20px;  
    }
}

/* Para telas muito pequenas (largura máxima de 480px, por exemplo) 
*/@media (max-width: 480px) {
    .elemento {
        margin-left: 20px;   
    }
}






.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
    font-size: 14px;
}

body {
  margin-bottom: 60px;
}

.formulario-borda {
    margin: 2px;  /*Alinha o formulário no centro e adiciona uma margem de 2px */
    padding: 10px; /* Adiciona um preenchimento interno */
    border: 1px solid #d4d1d1; /* Borda cinza */
    border-radius: 10px; /* Borda arredondada */
    /*width: 600px;*/ /* Controla a largura do formulário */
    background-color: #f9f9f9; /* Opcional: uma cor de fundo suave para destaque */
}

.regraSenha{
    color: #707070;
    font-size: 12px;

}



table {
    border-collapse: collapse; /* Elimina o espaço entre as células */
    border-radius: 10px; /* Ajuste o valor para controlar o arredondamento */
    overflow: hidden; /* Garante que o arredondamento funcione corretamente */
    border: 1px solid #707070; /* Define uma borda para a tabela */
    white-space: nowrap; /* Impede que o conteúdo seja quebrado em várias linhas */
    min-width: 1500px; /* Ajuste conforme necessário para a tabela não quebrar as colunas */
}

th, td {
    border: 1px solid #ddd; /* Define a borda interna das células */
    padding: 8px; /* Espaçamento dentro das células */
}

thead {
    background-color: #d9d9d9;
}

/* Alterna a cor das linhas */
tbody tr:nth-child(odd) {
    background-color: #f9f9f9; /* Cor para linhas ímpares */
}

tbody tr:nth-child(even) {
    background-color: #ededed; /* Cor para linhas pares */
}

tbody tr:hover {
    background-color: #d1d1d1; /* Cor ao passar o mouse sobre a linha */
}


.visualizar-button {
    text-decoration: none;
    padding: 3px 3px;
}
.cancel-button {
    text-decoration: none;
    color: #fff;
    padding: 3px 3px;
    border-radius: 5px;
    display: inline-block;
}

.cancel-button i {
    margin-right: 5px;
    color: #ff0000; 
}

.edit-button {
    text-decoration: none;
    color: #000000;
    display: inline-block;
    padding: 3px 3px;
}

/* Estilização da célula para centralizar a bolinha */
.circle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Preenche toda a célula */
}

/* Estilização da bolinha */
.circle {
    width: 20px; /* Largura da bolinha */
    height: 20px; /* Altura da bolinha (igual à largura para ser circular) */
    border-radius: 50%; /* Deixa a div circular */
}






/* Estilo do botão desativado */
.disabled-link {
    pointer-events: none; /* Desativa o clique no link */
    opacity: 0.6; /* Faz o botão parecer desativado */
    color: #666666; /* Cor de texto desativada */
}

.pagination-custom a {
    margin: 0 1px;
    padding: 4px 4px;
    border: 1px  #007bff;
    border-radius:3px 4px;
    color: #007bff;
    text-decoration: none;
}

.pagination-custom a:hover {
    background-color: #007bff;
    color: white;
}

.pagination-custom .current {
    font-weight: bold;
    background-color: #007bff;
    color: white;
}



/* Define o posicionamento do submenu */
.dropdown-submenu {
    position: relative;
}

    /* Estilo para abrir o submenu quando o item pai for hover */
    .dropdown-submenu:hover .dropdown-menu {
        display: block;
    }

    /* Esconde o submenu por padrão */
    .dropdown-submenu .dropdown-menu {
        display: none;
        position: absolute;
        left: 100%; /* Coloca o submenu ao lado do dropdown principal */
        top: 0;
        margin-top: 0;
        margin-left: 0;
    }

/* Ajuste estético para garantir que o submenu pareça correto */
.dropdown-menu > .dropdown-submenu > a:after {
    content: "\00BB"; /* Seta indicando submenu */
    float: right;
    margin-left: 5px;
}






/* Define a largura fixa para a coluna "Dia" */
#employeeTable th:first-child,
#employeeTable td:first-child {
    width: 100px;
}

/* Define a largura fixa para as outras colunas */
#employeeTable th:not(:first-child),
#employeeTable td:not(:first-child) {
    width: 120px;
}

/* Define o layout da tabela */
#employeeTable {
    table-layout: fixed; /* Faz com que as larguras fixas sejam respeitadas */
    width: 100%; /* Garante que a tabela preencha o container */
}

    /* Truncar texto para caber na largura */
    #employeeTable th,
    #employeeTable td {
        text-overflow: ellipsis; /* Adiciona reticências se o conteúdo for maior que a largura */
        overflow: hidden; /* Oculta o conteúdo excedente */
        white-space: nowrap; /* Impede quebra de linha */
    }





/* Ajusta a largura do combobox para ocupar toda a largura da célula */
.status-input {
    width: 100%; /* O combobox se ajusta à largura da célula */
    box-sizing: border-box; /* Inclui o padding e a borda no cálculo da largura */
    padding: 4px; /* Ajusta o espaço interno para melhor aparência */
    text-align: center; /* Centraliza o texto dentro do input */
    border: 1px solid #ccc; /* Define uma borda padrão */
    border-radius: 4px; /* Deixa as bordas levemente arredondadas */
}

/* Ajusta o datalist */
datalist option {
    text-align: center; /* Centraliza as opções no datalist */
}

/* Centraliza o texto dentro do span */
td span {
    display: inline-block; /* Permite usar centralização vertical */
    width: 100%; /* Garante que ocupe toda a largura da célula */
    text-align: center; /* Centraliza horizontalmente o texto */
}

/* Ajusta o estilo geral das células */
td {
    text-align: center; /* Centraliza o conteúdo horizontalmente na célula */
    vertical-align: middle; /* Centraliza o conteúdo verticalmente */
}