:root {
  --navbar-height: 8rem;
  /* Ajusta según tu diseño */
}

@font-face {
  font-family: "Poppins";
  src: url("../fonts/Poppins-Regular.ttf") format("truetype");
}

html,
body {
  font-family: "Poppins";
  padding: 3.5rem 0 0 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  color: #282850;
  background-color: #eaeaea !important;
  height: 100% !important;
}

body {
  display: flex !important;
  flex-direction: column !important;
}

input,
select,
textarea,
label {
  color: #282850;
  font-size: 13px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #282850;
}

/* Estilos cuando el input está autofill en Chrome y Safari */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  background-color: white !important;
  color: #282850 !important;
  border: 1px solid black !important;
  box-shadow: 0 0 0px 1000px white inset !important;
  -webkit-text-fill-color: #282850 !important;
}

/* Estilos cuando el input está autofill en Firefox */
input:-moz-autofill,
textarea:-moz-autofill,
select:-moz-autofill {
  background-color: white !important;
  color: #282850 !important;
  border: 1px solid black !important;
}

/* Estilos cuando el input autofill está enfocado en Chrome y Safari */
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
  border-color: #282850 !important;
  box-shadow: 0 0 0px 1000px white inset !important;
  -webkit-text-fill-color: #282850 !important;
}

/* Estilos cuando el input autofill está enfocado en Firefox */
input:-moz-autofill:focus,
textarea:-moz-autofill:focus,
select:-moz-autofill:focus {
  border-color: #282850 !important;
}

/* Elimina el borde azul de todos los inputs */
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: inherit !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

/* NAVBAR */

.cont-nav {
  height: var(--navbar-height);
  margin: 0;
  padding: 0;
}

.nav_main {
  height: 5rem !important;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  margin: 0 !important;
  background-color: #fcfcfc;
}

.indicator_page {
  height: 3rem !important;
  display: flex;
  align-items: center;
}

.cont-main > .row,
.cont-main > .row > .col-auto {
  margin: 0 !important;
  padding: 0 !important;
}

.cont-main {
  display: flex;
  flex: 1;
}

.filling-vertical-space {
  height: 100% !important;
  width: 100% !important;
}

/*
*
* SIDEBAR
*
*/
.cont-sidebar {
  position: fixed;
  top: var(--navbar-height);
  left: 0;
  border-top-right-radius: 10px !important;
  height: calc(100vh - var(--navbar-height));
  width: 6rem;
  background-color: #fcfcfc;
  overflow: auto;
}

.col.content-page {
  padding: 1rem 0 0 6.5rem !important;
  overflow-y: auto;
  overflow-x: hidden;
}

.content {
  padding: 2.5rem !important;
  margin: 10px 0 !important;
  background-color: #fcfcfc !important;
  border-radius: 10px !important;
}

.content-form {
  padding: 1.5rem 2rem 0.5rem 2rem !important;
  margin: 10px 0 !important;
  background-color: #fcfcfc !important;
  border-radius: 10px !important;
}

.sidebar {
  background-color: #fcfcfc !important;
  width: auto !important;
  padding: 0 5px !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* LOADER DT */
.loaderDT {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  border-top: 4px solid #7ed321;
  border-right: 4px solid transparent;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

.loaderDT::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border-left: 4px solid #282850;
  border-bottom: 4px solid transparent;
  animation: rotation 0.5s linear infinite reverse;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 
 *
 */
.dropdown-menu li a {
  font-size: 13px !important;
}

.dropdown-menu li {
  cursor: pointer !important;
}

.custom_modal > .modal-dialog > .modal-content > .modal-header,
.custom_modal > .modal-dialog > .modal-content > .modal-footer {
  border: none !important;
}

.custom_modal > .modal-dialog > .modal-content > .modal-footer {
  display: flex !important;
  justify-content: center !important;
}

.custom_modal > .modal-dialog > .modal-content {
  padding: 1rem 2rem !important;
}

.coldir {
  display: flex !important;
  flex-direction: column !important;
}

.f13 {
  font-size: 13px !important;
}

.f15 {
  font-size: 15px !important;
}

.dt-length label {
  color: #282850 !important;
}

#alert-image {
  width: 400px !important;
  height: auto !important;
}

#login-container {
  display: flex;
  flex-direction: column;
  background-color: rgba(255, 255, 255, 0.95);
  padding: 3rem 3rem;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.btnMain {
  padding: 10px;
  border: none;
  border-radius: 20px;
  background-color: #7ed321;
  color: #282850;
  cursor: pointer;
  font-size: 13px;
}

.btnMain:hover {
  background-color: #7ed321;
}

.inputMain {
  background-color: white !important;
  border: 1px solid black !important;
  border-radius: 20px !important;
  color: #282850 !important;
  padding-inline: 20px !important;
  font-size: 13px !important;
}

.inputMain:focus {
  background-color: white !important;
  border: 1px solid black !important;
  border-radius: 20px !important;
  color: #282850 !important;
  padding-inline: 20px !important;
  font-size: 13px !important;
}

.centerAll {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.centerStart {
  display: flex !important;
  justify-content: start !important;
  align-items: center !important;
}

.centerEnd {
  display: flex !important;
  justify-content: end !important;
  align-items: center !important;
}

.border1 {
  border: 1px solid black;
}

.custom-icon {
  color: #79c824 !important;
}

.info-user,
.info-user p,
.info-user p span {
  font-size: 13px !important;
  line-height: 1rem !important;
}

.select-main {
  border-radius: 20px !important;
  color: #282850 !important;
  border: 1px solid #282850;
  padding-inline: 20px !important;
  font-size: 13px !important;
}

.input-main {
  border-radius: 20px !important;
  color: #282850 !important;
  border: 1px solid #282850;
  padding-inline: 20px;
  font-size: 13px !important;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.img-company-nav {
  width: 63px;
  height: 63px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.font-13 {
  font-size: 13px !important;
}

.optionIndicatorPage {
  font-size: 12px !important;
  text-transform: uppercase !important;
}

.custom-nav-item {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0.6rem 0;
}

.custom-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  color: #79c824;
}

.custom-nav-link span {
  color: #79c824;
  margin-top: 4px;
  font-size: 11px;
  margin: 0;
  padding: 0;
}

.custom-nav-link img {
  width: 1.2rem !important;
  height: auto !important;
}

li.nav-item.custom-nav-item.active a,
li.nav-item.custom-nav-item.active span {
  color: #282850 !important;
}

li.nav-item.custom-nav-item.disabled a,
li.nav-item.custom-nav-item.disabled span {
  color: #808080 !important;
}

li.nav-item.custom-nav-item {
  cursor: pointer;
}

li.nav-item.custom-nav-item.disabled {
  cursor: default !important;
}

.btn-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #79c824;
  border: none;
  background: transparent !important;
  margin: 0 !important;
  max-width: fit-content !important;
}

/* navbar salir */
.btn-icon .custom-icon {
  font-size: 18px;
}

/* navbar salir */
.btn-icon span {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px;
}

/* navbar salir */
.btn-icon:hover {
  color: #79c824;
}

.btn-menu {
  background-color: #fcfcfc !important;
  padding-inline: 3rem;
  border-radius: 20px;
  border-color: #282850;
  color: #282850;
  cursor: pointer;
  margin-right: 1rem;
}

.btn-menu.active {
  border-color: #7ed321 !important;
  background-color: #7ed321 !important;
}

.nav-item-menu a {
  color: #282850 !important;
  font-size: 14px;
  text-transform: uppercase !important;
}

.btn-menu {
  font-size: 13px;
}

.btn-menu:hover {
  border-color: #79c824 !important;
  background-color: #79c824 !important;
}

.nav-item-menu a:hover {
  color: #7ed321 !important;
}

.nav-item-menu a:focus {
  color: #282850 !important;
}

li.active.nav-item.nav-item-menu a {
  color: #7ed321 !important;
  font-weight: bold !important;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
  line-height: 1.5;
}

.cont-filter {
  border: 1px solid #79c824 !important;
  padding: 1rem 2rem;
  font-size: 13px !important;
  color: #282850;
  border-radius: 50px !important;
}

.select-filter {
  border-radius: 20px !important;
  color: #282850 !important;
  border: 2px solid #79c824;
  padding-inline: 20px !important;
  font-size: 13px !important;
}

.btn-filter {
  background-color: #79c824;
  border-radius: 20px;
  padding-inline: 2rem;
  height: 100%;
}

.btn-filter:hover {
  background-color: #282850;
  color: #fff;
}

.bg-yellow {
  background-color: #ffeb3b !important;
}

.bg-red {
  background-color: rgb(255, 59, 59) !important;
  color: white !important;
}

.bg-lightgray {
  background-color: #dfdfe5 !important;
}

.bg-green {
  background-color: #7ed321 !important;
}

.border-transparent {
  border-color: transparent !important;
}

label {
  font-size: 13px !important;
}

/* Ocultar el input de tipo file */
.custom-file-input {
  display: none;
}

/* Estilizar el botón personalizado */
.custom-file-button {
  font-size: 13px;
  border-radius: 20px;
  background-color: #282850;
  color: #fff;
  width: 100%;
}

.custom-file-button:hover {
  background-color: #282850;
  color: #fff;
}

.dt-info {
  font-size: 13px !important;
}

.bg-simil-piel {
  background-color: #fae489 !important;
}

select.form-control {
  -webkit-appearance: menulist !important;
  /* Chrome, Safari, Edge */
  -moz-appearance: menulist !important;
  /* Firefox */
  appearance: menulist !important;
  /* Otros navegadores */
}

.bg-primary {
  color: #fff !important;
  background-color: #282850 !important;
}

th,
td {
  width: auto !important;
  /* Ajusta según sea necesario */
  overflow: hidden !important;
  /* Oculta cualquier contenido que se desborde */
  text-overflow: ellipsis !important;
  /* Muestra puntos suspensivos para contenido largo */
  white-space: nowrap !important;
  /* Evita el salto de línea */
  box-sizing: border-box !important;
  /* Incluye el padding y el borde en el ancho total de las celdas */
}

.containerBtns {
  display: flex;
  justify-content: center;
  align-items: center;
}

input.select-checkbox {
  cursor: pointer !important;
  margin: auto 5px !important;
  padding: 0 !important;
}

.btn-table {
  color: #4c4c4c !important;
  background-color: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  margin: auto 3px !important;
}

/* 
 * CUSTOM SWEET ALERT 2
 */

.custom-title {
  margin: 20px 10px !important;
}

.custom-image {
  width: 150px !important;
  height: auto !important;
}

.custom-text {
  font-size: 13px !important;
  color: #282850 !important;
  font-weight: bold !important;
  font-size: 15px !important;
}

.custom-confirm-button {
  color: #282850 !important;
  /* Cambia el color del texto del botón */
  border-radius: 20px !important;
  padding-inline: 2rem !important;
  font-size: 15px !important;
}

.custom-cancel-button {
  color: #fff !important;
  /* Cambia el color del texto del botón */
  border-radius: 20px !important;
  padding-inline: 2rem !important;
  font-size: 15px !important;
}

/* LOADER */
/* Estilos para el contenido del loader */
.custom-loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Estilos para el spinner del loader */
.loader {
  border: 8px solid #ebebeb;
  /* Color del fondo del spinner */
  border-top: 8px solid #282850;
  /* Color del spinner */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
}

/* Animación para el spinner */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Estilos para el texto del loader */
.custom-loader-text {
  color: #282850 !important;
  margin-top: 10px !important;
  font-size: 20px !important;
}

.border2 {
  border: 1px solid red !important;
}

.border3 {
  border: 1px solid rgb(45, 94, 255) !important;
}

.btn-w-u {
  background-color: #fff;
  border: 1px solid #282850;
  font-size: 13px;
}

.btn-w-u:hover {
  background-color: #fff;
  border: 1px solid #282850;
  font-size: 13px;
}

.border4 {
  border: 1px solid chocolate;
}

.bold {
  font-weight: bold !important;
}

.fontGray {
  color: #a2a2a2 !important;
}

.borderGray {
  border: 1px solid #a2a2a2 !important;
}

.border0 {
  border: none !important;
}

.borderLightGray,
.borderLightGray:focus {
  border: 1px solid #eaeaea !important;
}

/*
*
*
* TABLAS
*
*
 */
.table-container {
  margin-top: 0.5rem !important;
  padding: 0;
  overflow-x: auto;
  width: 100%;
}

.table-container table,
.table-container table thead tr th,
.table-container table tbody tr td {
  font-size: 13px;
  color: #4c4c4c;
}

/* Definir bordes diferentes para cada lado */
.table-container table tbody tr td {
  border-width: 0 1px 1px 1px;
  /* arriba derecha abajo izquierda */
  border-style: solid;
  /* arriba derecha abajo izquierda */
  border-color: #4c4c4c;
  /* arriba derecha abajo izquierda */
  font-weight: normal;
}

.table-container table thead tr th {
  border-width: 1px;
  /* arriba derecha abajo izquierda */
  border-style: solid;
  /* arriba derecha abajo izquierda */
  border-color: #4c4c4c;
  /* arriba derecha abajo izquierda */
  background-color: #bcbcc9 !important;
  text-transform: uppercase;
}

.dt-paging {
  padding: 1rem 0 0 0 !important;
  display: flex !important;
  justify-content: end !important;
}

ul.pagination .page-link {
  background-color: white !important;
  color: #7ed321 !important;
  border: none;
}

ul.pagination > .active > .page-link {
  border: 1px solid #7ed321 !important;
  border-radius: 10px !important;
}

.dt-length select {
  font-size: 13px;
  border: 1px solid #4c4c4c;
  color: #4c4c4c !important;
}

.dt-length label {
  font-size: 13px !important;
  color: #4c4c4c !important;
}

.dt-length {
  padding: 0 0 1rem 0 !important;
}

.btn-action-table {
  font-size: 13px;
  white-space: nowrap;
  width: auto;
  padding: 0.25rem 0.5rem;
  text-align: center;
  border-radius: 20px;
  padding-inline: 2rem;
  height: 100%;
}

div.dt-processing > div {
  display: none !important;
}

div.dt-processing {
  background-color: transparent !important;
  border: none !important;
}

div.dt-processing {
  margin-top: 1rem !important;
}

.dt-info span {
  margin-left: 0.5rem !important;
}

/* Primera fila: columnas pares */
.table-container table tbody tr:nth-child(odd) td:nth-child(even) {
  background-color: #fcfcfc;
  /* Color para columnas pares de la primera fila */
}

/* Primera fila: columnas impares */
.table-container table tbody tr:nth-child(odd) td:nth-child(odd) {
  background-color: #fcfcfc;
  /* Color para columnas impares de la primera fila */
}

/* Segunda fila: columnas pares */
.table-container table tbody tr:nth-child(even) td:nth-child(even) {
  background-color: #dfdfe5;
  /* Color para columnas pares de la segunda fila */
}

/* Segunda fila: columnas impares */
.table-container table tbody tr:nth-child(even) td:nth-child(odd) {
  background-color: #dfdfe5;
  /* Color para columnas impares de la segunda fila */
}

/* Estilos dinamicos para las filas de la tabla */
table tbody tr.bgLightGreen td {
  background-color: #c6ecae !important;
}

table tbody tr.bgLightOrange td {
  background-color: #fad59e !important;
}

table tbody tr.bgRed td {
  background-color: #fe5f55 !important;
}

.btn-main {
  background-color: #79c824;
  border-radius: 20px;
  font-size: 13px;
}

.btn-main:hover {
  background-color: #282850;
  color: #fff;
}

.text-welcome {
  text-align: center;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.font-14 {
  font-size: 14px !important;
}

.tittle-color {
  color: #79c824;
}

.rounded-top-custom {
  border-top-left-radius: 15px !important;
  /* Ajusta el valor según el redondeo deseado */
  border-top-right-radius: 15px !important;
  /* Ajusta el valor según el redondeo deseado */
}

.nav-color-custom > .active {
  background-color: #fcfcfc !important;
}

.btnSendReport {
  padding: 10px;
  border: none;
  border-radius: 20px;
  background-color: #747573;
  color: #282850;
  cursor: pointer;
  font-size: 13px;
}

.custom-tabs {
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  /* Sin espacio entre los botones */
}

.custom-tabs .nav-item {
  flex: 1 !important;
  /* Hacer que los botones ocupen el mismo ancho */
}

.custom-tabs .nav-link {
  border: 1px solid #333 !important;
  /* Color del borde */
  border-radius: 0px !important;
  /* Redondeo de los bordes */
  color: #333 !important;
  /* Color del texto */
  /* padding: 10px 25px !important; */
  padding: 0px 30px !important;
  /* Reduce la altura y ajusta el padding horizontal */
  /* margin: 0px 5px !important; */
  /* background-color: #f0f0f0 !important; */
  /* Fondo gris claro */
  text-align: center !important;
  font-weight: bold !important;
}

/* Estilo para el botón de la izquierda */
.custom-tabs .nav-item:first-child .nav-link {
  border-top: 1px solid #333 !important;
  border-bottom: 1px solid #333 !important;
  border-left: 1px solid #333 !important;
  border-radius: 30px 0 0 30px !important;
  /* Redondeo solo en la esquina izquierda */
}

/* Estilo para el botón de la derecha */
.custom-tabs .nav-item:last-child .nav-link {
  border-top: 1px solid #333 !important;
  border-bottom: 1px solid #333 !important;
  border-right: 1px solid #333 !important;
  border-radius: 0 30px 30px 0 !important;
  /* Redondeo solo en la esquina derecha */
}

.custom-tabs .nav-link.active {
  background-color: #e0e0e0 !important;
  /* Fondo más claro para el botón activo */
}

.custom-tabs .nav-link:not(.active) {
  border-left: none !important;
  /* Quitar el borde izquierdo del segundo botón */
}

.border-green {
  border: 1px solid #7ed321 !important;
}

.main-font-color {
  color: #282850 !important;
}

.border-color-main {
  border: 1px solid #282850 !important;
  color: #282850 !important;
}

.tabs-catalog {
  font-size: 13px !important;
  border: none !important;
  margin: 0 !important;
}

.tabs-catalog .nav-item {
  margin: 0 0.8rem 0 0 !important;
  background-color: #d7f1ba !important;
  border-top-right-radius: 1rem !important;
  border-top-left-radius: 1rem !important;
  border: none !important;
}

.tabs-catalog > .nav-item > .nav-link:hover {
  border-bottom: none !important;
  border-top-right-radius: 1rem !important;
  border-top-left-radius: 1rem !important;
}

.tabs-catalog > .nav-item > .nav-link.active {
  background-color: #f2fbe9 !important;
  border-top-right-radius: 1rem !important;
  border-top-left-radius: 1rem !important;
  border: 1px solid #f2fbe9 !important;
}

.tabs-catalog > .nav-item > .nav-link {
  padding-inline: 3rem !important;
  color: #282850 !important;
  font-weight: bold !important;
}
.content-tabs-catalog {
  background-color: #f2fbe9 !important;
  font-size: 13px !important;
  border-top-right-radius: 1rem !important;
  border-bottom-right-radius: 1rem !important;
  border-bottom-left-radius: 1rem !important;
  color: #282850 !important;
}

.input-catalog {
  color: #8aad64 !important;
  background-color: transparent !important;
  border: 1px solid #8aad64 !important;
}

.input-catalog::placeholder {
  color: #8aad64 !important;
}

.card-filter .card-header {
  background-color: #7ed321 !important;
  color: #282850 !important;
  border: none !important;
  font-size: 16px !important;
  font-weight: bold !important;
}

.card-filter {
  font-size: 13px !important;
  background-color: #f7fbf3 !important;
  border: none !important;
}

.card-filter .card-body {
  font-size: 13px !important;
}

.ttl1 {
  color: #282850 !important;
  font-weight: bold !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px !important;
}

.input-filter {
  border: none !important;
  background-color: transparent !important;
  font-size: 13px !important;
  text-align: center !important;
}

.label-filter {
  color: #63c000 !important;
  font-weight: bold !important;
}

/* TABLAS DE FILTROS CATALOGO */
.catalogTables table th {
  background-color: #7ed321 !important;
  color: #282850 !important;
  border: none !important;
}

.catalogTables table tbody tr td {
  border: none !important;
  color: #282850 !important;
}

/* Primera fila: columnas pares */
.catalogTables table tbody tr:nth-child(odd) td:nth-child(even) {
  background-color: #fcfcfc !important;
  /* Color para columnas pares de la primera fila */
}

/* Primera fila: columnas impares */
.catalogTables table tbody tr:nth-child(odd) td:nth-child(odd) {
  background-color: #fcfcfc !important;
  /* Color para columnas impares de la primera fila */
}

/* Segunda fila: columnas pares */
.catalogTables table tbody tr:nth-child(even) td:nth-child(even) {
  background-color: #d7f1ba !important;
  /* Color para columnas pares de la segunda fila */
}

/* Segunda fila: columnas impares */
.catalogTables table tbody tr:nth-child(even) td:nth-child(odd) {
  background-color: #d7f1ba !important;
  /* Color para columnas impares de la segunda fila */
}