@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');


        body {
            background-color: #ffffff;
            color: #777777;
        }

        #data-table-container, #data-table-container-dadosobjeto {
            max-height: 500px;
            /* height: 100%;   */

            overflow: auto;
            font-size: 12px;

        }


        #chart-container {
            position: relative;
            width: 100%;
            padding-bottom: 50%; /* Ajuste para a proporção desejada */
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        #chart, #crit-alignment, #bar-chart, #pie-chart {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        body.modal-open .modal {
            overflow-y: hidden;
        }

        body.modal-open {
            padding-right: 0 !important;
            overflow-y: scroll !important;
        }

        .modal-backdrop {
            opacity: 0.01 !important;  /* Ajuste para o valor de opacidade desejado */
        }

        .modal-body {
            position: sticky;
            font-size: 12px;
            background-color: rgb(152, 224, 224);
            color: #ffffff;
            top: 0;
            z-index: 10;
        }

        .modal-header, .modal-footer {
            position: sticky;
            font-size: 12px;
            background-color: rgb(45, 204, 204);
            color: #ffffff;
            top: 0;
            z-index: 1;
        }

        .cabecalho {
            /* color: #333;
            margin-bottom: 15px; */

            color: #042e41;
            margin-bottom: 15px;
            /* height: 200px; */

            font-family: 'Roboto', sans-serif;
            /* font-family: 'Courier New', Courier, monospace; */
            padding: 10px;
            border: 2px solid rgb(43, 46, 43);
            border-radius: 5px;
            background-color: rgba(199, 197, 197, 0.1);
        }

        .custom-select2 {

            width: 100%

        }

        /* Estilos para o select múltiplo de tecnologias */
        .select2-container--default .select2-selection--multiple {
            min-height: 38px; /* Reduzido de 50px para 38px */
            background-color: #fff !important; /* fundo branco */
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background-color: #28a745;
            color: white;
            border: 1px solid #1e7e34;
            border-radius: 3px;
            padding: 2px 8px;
            margin: 2px;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            color: white;
            margin-right: 5px;
            font-weight: bold;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
            color: #ff6b6b;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__rendered {
            padding: 3px; /* Reduzido de 5px para 3px */
        }

        .select2-container--default .select2-search--inline .select2-search__field {
            margin-top: 3px;
        }

        /* Otimizações específicas para o modal de filtros */
        .modal .form-inline {
            margin-bottom: 6px; /* Reduzido de 10px para 6px */
        }

        .modal .form-inline label {
            margin-right: 8px; /* Reduzido espaçamento entre label e input */
            font-size: 11px; /* Ligeiramente menor para economizar espaço */
        }

        .modal .form-control {
            padding: 4px 8px; /* Reduzido padding dos inputs */
            font-size: 11px; /* Ligeiramente menor */
        }

        .modal h5 {
            margin-bottom: 8px; /* Reduzido espaçamento do título */
            font-size: 13px; /* Título um pouco menor */
        }

        /* Estilos para o sistema de filtros com checkbox */
        .filter-item {
            margin-bottom: 8px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            padding-bottom: 8px;
        }

        .filter-checkbox {
            display: flex;
            align-items: center;
            cursor: pointer;
            font-weight: 500;
            color: #042e41;
            margin-bottom: 0;
            padding: 4px 0;
        }

        .filter-checkbox input[type="checkbox"] {
            margin-right: 8px;
            transform: scale(1.1);
        }

        .reset-range-filter {
            font-size: 12px;
            color: #888;
            margin-left: 1px;
            cursor: pointer;
            transition: color 0.2s;
        }

        .reset-range-filter:hover {
            color: #f00; /* Vermelho ao passar o mouse */
        }

        .filter-content {
            margin-top: 6px;
            padding-left: 20px;
            border-left: 2px solid rgba(4, 46, 65, 0.3);
            transition: all 0.3s ease;
        }

        .filter-content.show {
            display: block !important;
        }

        .filter-content.hide {
            display: none !important;
        }

        /* Estilização da barra de rolagem do modal */
        .modal-body::-webkit-scrollbar {
            width: 8px;
        }

        .modal-body::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 4px;
        }

        .modal-body::-webkit-scrollbar-thumb {
            background: rgba(4, 46, 65, 0.6);
            border-radius: 4px;
        }

        .modal-body::-webkit-scrollbar-thumb:hover {
            background: rgba(4, 46, 65, 0.8);
        }

        /* Para Firefox */
        .modal-body {
            scrollbar-width: thin;
            scrollbar-color: rgba(4, 46, 65, 0.6) rgba(255, 255, 255, 0.2);
        }

        .dropdown-menu {

            z-index: 10000;

        }


        .tooltip-inner {
            background-color: #111010; /* Cor de fundo do tooltip */
            color: #fff;            /* Cor do texto */
            padding: 10px;          /* Espaçamento interno */
            border-radius: 4px;     /* Bordas arredondadas */
        }

        .tooltip.bs-tooltip-top .arrow::before {
            border-top-color: #333; /* Cor da seta do tooltip */
        }

        /* .custom-tooltip .tooltip-inner {
            width: 400px;
        } */



        .control-panel label {
            display: block;
            margin-bottom: 10px;  /* Espaçamento entre cada checkbox */
        }

        thead th {
            position: sticky;
            font-size: 12px;
            background-color: #e6f4ea;
            color: #34568B;
            top: 0;
            z-index: 10;
        }

        .table-controls {
            margin-bottom: 20px;
        }

        .table-controls label {
            display: inline;
            margin-bottom: 10px;
            margin-right: 20px;  /* Ajuste este valor conforme necessário */

        }

        /* DARK */


        .highlighted {
            background-color: #17eb0f;
        }


 /* ////////////////////////////// NAVBAR PARA o BOOTSTRAP no DASHBOARD ////////////////////////////////////////// */
        /* Definindo variáveis de cores */
:root {
    --navbar-bg-color: #000000; /* Cor de fundo da navbar */
    --navbar-text-color: #ffffff; /* Cor do texto da navbar */
    --navbar-hover-bg-color: #131413; /* Cor de fundo ao passar o mouse */
    --navbar-hover-text-color: #ffffff; /* Cor do texto ao passar o mouse */
    --dropdown-bg-color: #161615; /* Cor de fundo do dropdown */
    --dropdown-text-color: #fdfdfd; /* Cor do texto do dropdown */
    --dropdown-hover-bg-color: #121312; /* Cor de fundo do dropdown ao passar o mouse */
    --dropdown-hover-text-color: #ffffff; /* Cor do texto do dropdown ao passar o mouse */
}

/* Estilização da Navbar */
.navbar {
    background-color: var(--navbar-bg-color);
    color: var(--navbar-text-color);
}

.navbar-light .navbar-nav .nav-link {
    color: var(--navbar-text-color);
}

.navbar-analise {
    background-color: #111110;

}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    background-color: var(--navbar-hover-bg-color);

    color: var(--navbar-hover-text-color);
}

/* Estilização do Dropdown */
.dropdown-menu {
    background-color: var(--dropdown-bg-color);
    border: none;
}

.dropdown-menu .dropdown-item {
    color: var(--dropdown-text-color);
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: var(--dropdown-hover-bg-color);
    color: var(--dropdown-hover-text-color);
}

/* Mudança no botão de colapso para dispositivos móveis */
.navbar-toggler {
    border-color: var(--navbar-text-color);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Estilo para centralizar o conteúdo na navbar */
.navbar-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Certifique-se de que a marca e os botões da barra de navegação não se sobreponham ao conteúdo centralizado em telas pequenas */
@media (max-width: 991px) {
    .navbar-center {
        display: none;
    }
}

.versao_software_dash {
    /* float: right;
    padding-right: 0px;  */
    color: rgb(175, 174, 174);
    font-weight: bold;
  }

  .logado {
    color: #999999;
    /* font-size: 20px; */
    align-items: center;

}

.custom_slider {
    width: 250px;
    height: 13px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-color: rgb(160, 70, 70);
    border: 2px solid #6a6aa3;
    border-radius: 4px;
    background-image: linear-gradient(90deg, rgb(77, 107, 136), #51c0ae);
}

.custom_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background-color: #030303;
    border-radius: 80%;
}

.custom_slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background-color: #030303;
    border-radius: 80%;
}

#data-table tbody tr.highlighted td {
    background-color: #007bff !important; /* Um azul brilhante */
    color: white !important;
}