body {
	background-color: #121212;
	color: #e0e0e0;
	margin: 0;
	padding: 0;
	font-family: 'Ubuntu', sans-serif;
}

.modal .input-group span {
	width: 200px;
}

tbody td {
	border-bottom: 1px solid #2a2a2a;
	background-color: #00000054 !important;
}

.dashboard-table tbody tr {
	cursor: pointer;
}

.dashboard-table tbody tr:hover td {
	background-color: rgba(91, 115, 232, 0.2) !important;
}

/* ======= Header / Navbar ======= */
header.p-3.mb-3.border-bottom {
	border-bottom: 1px solid #2a2a2a !important;
	background-color: #1c1c1c;
}

.nav-link,
.dropdown-toggle {
	color: #b3b3b3 !important;
}

.nav-link:hover {
	color: #fff !important;
}

tbody td {
	border-bottom: 1px solid #2a2a2a;
}

/* Dropdown escuro */
.dropdown-menu {
	background-color: #1f1f1f;
	border: 1px solid #2a2a2a;
}

.dropdown-item {
	color: #e0e0e0;
}

.dropdown-item:hover {
	background-color: #2a2a2a;
	color: #fff;
}

/* ======= Form-control e Inputs ======= */
.form-control {
	background-color: #1f1f1f;
	border: 1px solid #3a3a3a;
	color: #e0e0e0;
}

.form-control:focus {
	border-color: #555;
	box-shadow: none;
	background-color: #2b2b2b;
}

::placeholder {
	color: #999;
}

/* Botões Outline / Secundários */
.btn-outline-secondary {
	border-color: #505050;
	color: #cfcfcf;
}

.btn-outline-secondary:hover {
	background-color: #2a2a2a;
	border-color: #707070;
	color: #ffffff;
}

/* Quando o botão estiver "ativo" (toggle ON) – classe via JS */
.btn-toggle-active {
	background-color: #5a5a5a;
	border-color: #707070;
	color: #fff;
}

/* ======= Container do Conteúdo ======= */
.container-fluid {
	padding-left: 1rem;
	padding-right: 1rem;
}

/* ======= Blocos e Headers Internos ======= */
.block-specific {
	border-radius: 6px;
	margin-bottom: 1rem;
	background-color: #1c1c1c;
}

.block-header-default {
	padding: 1rem;
	border-bottom: 1px solid #2a2a2a;
}

.block-title {
	margin: 0;
	color: #ffffff;
	font-size: 1.25rem;
}

.block-content-full {
	padding: 1rem;
}

/* ======= Primeira linha de filtros ======= */
.filters-wrapper {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.inputs-filters {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
}

.btns-filters-control {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
}

/* ======= Segunda linha de filtros ======= */
.second-filters-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 2rem;
	padding: 0.75rem 1rem;
	background-color: #1c1c1c;
	border-top: 1px solid #2a2a2a;
	border-bottom: 1px solid #2a2a2a;
}

.filter-group {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.filter-group h6 {
	margin: 0;
	font-size: 0.9rem;
	white-space: nowrap;
}

.filter-group-buttons {
	display: flex;
	gap: 0.4rem;
}

/* ======= Tabela ======= */
table.pricing-table {
	width: 100%;
	color: #ddd;
	border-collapse: separate;
	border-spacing: 0;
}

table.pricing-table thead th {
	background-color: #141414;
	border-bottom: 1px solid #2a2a2a;
	font-weight: 500;
	font-size: 0.875rem;
}

table.pricing-table tbody tr {
	background-color: #1a1a1a;
}

table.pricing-table tbody tr:hover {
	background-color: #2a2a2a;
}

table.pricing-table th,
table.pricing-table td {
	padding: 0.7rem 1.5rem 0.7rem 1.5rem;
	font-size: 0.875rem;
	vertical-align: middle;
}

/* Ajustes do “upr-mass-btn” e Comparisons */
.upr-mass-btn {
	padding: 0;
	width: 25px;
	height: 25px;
	line-height: 1.5;
	margin: 0 2px;
}

.upr-wrapper {
	display: flex;
	align-items: center;
}

/* Aumentamos a largura do input: */
.upr-wrapper input.uprInput {
	width: 80px !important;
	text-align: center;
	margin-right: 5px;
}

.comparison-container {
	display: flex;
	align-items: center;
	font-weight: 600;
}

.comparison {
	display: flex;
	flex-direction: column;
	margin-left: 7px;
	justify-content: center;
	align-items: center;
}

.comparison .comparison-value {
	font-size: 0.65rem;
	color: #bbb;
	margin-bottom: -4px;
}

/* Ícones de seta: up e down */
.fa-caret-up.text-success {
	color: #2cc16a !important;
}

.fa-caret-down.text-danger {
	color: #e24d4d !important;
}

/* Ações de agregação (ex. aggregator/ expand) - não há uso prático aqui */
.agg-btn {
	display: none;
	position: absolute;
	top: 50%;
	left: -20px;
	transform: translateY(-50%);
	cursor: pointer;
	font-size: 0.65rem;
	padding: 0.2rem 0.4rem;
	color: #e0e0e0;
	background-color: #333;
	border: 1px solid #444;
}

.table-row:hover .agg-btn,
.td-row.clicked .agg-btn {
	display: inline-block;
}

/* Ajuste do link “url-column” para destaque */
a.url-column {
	color: #4da3ff;
	text-decoration: none;
}

a.url-column:hover {
	text-decoration: underline;
}

/* Arredonda os cantos superiores do thead */
.pricing-table thead tr:first-child th:first-child {
	border-top-left-radius: 5px;
}

.pricing-table thead tr:first-child th:last-child {
	border-top-right-radius: 5px;
}

/* Arredonda os cantos inferiores do tbody */
.pricing-table tbody tr:last-child td:first-child {
	border-bottom-left-radius: 5px;
}

.pricing-table tbody tr:last-child td:last-child {
	border-bottom-right-radius: 5px;
}

/* Remove bordas internas que podem quebrar o efeito */
.pricing-table th,
.pricing-table td {
	border-left: none;
	border-right: none;
}

/* Adiciona espaçamento e melhora a aparência da tabela */
.pricing-table th,
.pricing-table td {
	padding: 5px;
	text-align: left;
}

/* Ajuste do tbody para o Clusterize.js */
.clusterize-scroll {
	overflow: auto;
}

.clusterize-no-data {
	padding: 1rem;
	text-align: center;
	color: #aaa;
}

.form-select,
.form-select-sm {
	background-color: #1f1f1f;
	border: 1px solid #3a3a3a;
	color: #e0e0e0;
	min-width: 230px;
}

/* Efeito ao focar */
.form-select:focus,
.form-select-sm:focus {
	border-color: #555;
	box-shadow: none;
	background-color: #2b2b2b;
}

/* Ajuste opcional do ícone da setinha no Select (remove estilos padrão) */
.form-select,
.form-select-sm {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 8px 10px;
}

/* Ajuste de altura/padding para form-select-sm */
.form-select-sm {
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;
	font-size: 0.875rem;
}

.logo {
	font-size: 1.5rem;
	margin-top: 10px;
	margin-right: 50px;
	color: white;
	font-weight: 300;
}

button i {
	padding: 4px;
}

.upr-wrapper .comparison-container .comparison-value {
	font-size: 0.95rem;
}

/*****/

/* --- Container da Tabela (header e body) --- */
.block-content-full {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	margin: 0;
	height: 83vh;
	overflow-y: scroll;
}

/* --- Tabela do Cabeçalho --- */
/* Essa é a primeira tabela, que contém o <thead> */
.block-content-full > table.pricing-table {
	margin-bottom: 0;
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}

/* --- Cabeçalho: aplica sticky caso seja necessário (não é estritamente obrigatório se o header está fora do scroll) --- */
table.pricing-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background-color: #141414;
	/* mesma cor do header */
}

/* --- Container rolável para o corpo da tabela --- */
#scrollArea {
	flex: 1;
	/* ajuste a altura conforme desejado */
	overflow-y: auto;
	margin-top: 0;
	/* Se houver borda superior indesejada, remova-a: */
	border-top: none;
}

/* --- Tabela dentro do scrollArea (corpo) --- */
#scrollArea table.pricing-table {
	margin: 0;
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}

/* --- Garante alinhamento consistente das colunas --- */
table.pricing-table th,
table.pricing-table td {
	box-sizing: border-box;
	/* Se você definir widths nos <th> via atributo, eles serão respeitados com table-layout: fixed */
}

/* --- Caso haja margem/padding extra indesejado --- */
.block-content-full,
#scrollArea,
table.pricing-table {
	padding: 0;
	margin: 0;
}

th.sortable {
	cursor: pointer;
	/* Cursor de mão */
	user-select: none;
	/* Impede a seleção de texto ao clicar */
	transition: background-color 0.3s ease;
	padding: 8px 10px;
	/* Ajuste o padding conforme necessário */
}

/* Efeito de hover para indicar interatividade */
th.sortable:hover {
	background-color: #f0f0f017;
}

/* Estilo para o ícone de ordenação (ex.: Font Awesome) */
th.sortable i {
	margin-left: 5px;
	font-size: 0.85em;
	color: #888;
	transition: color 0.3s ease;
}

/* Opcional: quando o cabeçalho estiver ativo (ordenado) */
th.sortable.active i {
	color: #333;
}

/* style.css */
/* estilo para a pagina de login */
/* Contêiner da página de login centralizado */
 /* Corpo da página */
    body.pagLogiin-body {
      background-color: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
      padding: 1em;
      box-sizing: border-box;
    }

    /* Caixa principal */
    .pagLogiin {
      background: #111;
     width: 90%;  
     max-width: 350px;
	 min-width: 230px;
     padding: 0.5em 1em;
     display: flex;
     flex-direction: column;
     align-items: center;
     box-sizing: border-box;
     border-radius: 8px;
    }

    /* Logo - tamanho fixo */
    .pagLogiin img {
      width: 87.5px;
      max-height: 100px;
      height: auto;
      margin-top: 30px;
      margin-bottom: 1em;
      display: block;
    }

    /* Texto fixo */
    .pagLogiin p {
      width: 286px;
      height: 24px;
      margin-bottom: 2px;
      color: #fff;
      text-align: center;
      font-size: 1rem;
      box-sizing: border-box;
    }

    /* Labels */
    .pagLogiin label {
      align-self: center;
      margin-bottom: 8px;
      font-weight: 600;
      color: white;
      font-size: 14px;
      max-width: 286px;
      width: 100%;
      box-sizing: border-box;
    }

    /* Inputs */
    .pagLogiin input[type="text"],
    .pagLogiin input[type="password"] {
      width: 286px;
      height: 42px;
      margin-bottom: 17px;
      border: 1px solid #333;
      border-radius: 4px;
      background-color: #222;
      color: white;
      padding: 0 8px;
      box-sizing: border-box;
      font-size: 15px;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
      display: block;
    }

    .pagLogiin input[type="text"]:focus,
    .pagLogiin input[type="password"]:focus {
      background-color: #333;
      border-color: #ff0000a8;
      outline: none;
      box-shadow: 0 0 8px #f5f5f5da;
    }

    .pagLogiin input::placeholder {
      color: #9b9b9b;
      font: 17px 'Ubuntu', sans-serif;
    }

    /* Botão */
    .pagLogiin button {
      width: 286px;
      height: 42px;
      background-color: #3b82f6;
      margin-bottom: 22px;
      border-radius: 6px;
      color: white;
      cursor: pointer;
      font-weight: 500;
      font-size: 17px;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
      display: block;
    }

    /* Mensagem de erro */
    .divError {
      width: 100%;
      max-width: 350px;
      background-color: rgba(248, 113, 113, 0.1);
      border: none;
      border-radius: 4px;
      padding: 0 8px;
      line-height: 48px;
      box-sizing: border-box;
      margin-bottom: 15px;
      color: rgb(254, 202, 202);
    }

    /* Responsividade: inputs e botão diminuem até 270px */
    @media (max-width: 400px) {
      .pagLogiin input[type="text"],
	  .pagLogiin input[type="password"],
	  .pagLogiin button {
      width: 100%;       
      max-width: 236px;  
      height: 42px;
      box-sizing: border-box;
      display: block;
      }
    }