body.login-page {
  /*  background: url('Assets/imagenes/fondo_navidad.jpg') no-repeat center center fixed; */
  background-size: cover;
  background-color: #f8f9fa; /* Color de respaldo */
}

/* Para que la tarjeta del login se vea más elegante */
.login-box .card {
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  border-radius: 15px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.addIngreso {
  background-color: #01a237 !important;
  color: white !important;
}

.addEgreso {
  background-color: #f80269 !important;
  color: white !important;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -5px;
  display: none;
}

.dropdown-submenu.show > .dropdown-menu {
  display: block;
}

.form-control-xs {
  padding: 0.1rem 0.3rem !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  height: calc(1.1em + 0.2rem + 2px) !important;
}

select.form-control-xs {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

textarea.form-control-xs {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

/* Para pantallas grandes (PC) */
.fila-inactiva {
  background-color: rgba(255, 51, 51, 0.25) !important;
  border-left: 4px solid #ff3333 !important;
  transition: all 0.3s ease;
}

.fila-inactiva:hover {
  background-color: rgba(255, 0, 0, 0.35) !important;
  border-left-color: #cc0000 !important;
}

.ui-autocomplete {
  z-index: 99999 !important;
  max-height: 400px !important; /* Ajusta aquí */
  overflow-y: auto !important;
}

@media (min-width: 1601px) {
  body {
    font-family: "Nunito", sans-serif;
    font-size: 12px;
  }

  .dropdown-item span {
    font-size: 11px !important;
  }

  .input_size_cantidad {
    font-size: 11px; /* Tamaño del texto */
    width: 60px !important; /* Ancho del campo */
  }

  .input_size_pu {
    font-size: 11px; /* Tamaño del texto */
    width: 90px !important; /* Ancho del campo */
  }
  .input_size_puu {
    font-size: 10px; /* Tamaño del texto */
    width: 70px !important; /* Ancho del campo */
  }
  .input_size_dcto {
    font-size: 11px; /* Tamaño del texto */
    width: 60px !important; /* Ancho del campo */
  }

  .input_size_desc {
    font-size: 11px; /* Tamaño del texto */
  }

  ul.ui-menu {
    max-height: 200px; /* Altura máxima del menú */
    overflow-y: auto; /* Habilitar desplazamiento vertical */
    overflow-x: hidden; /* Ocultar desplazamiento horizontal */
  }

  .image-container {
    width: 100%; /* Ajusta al tamaño que necesites */
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .brand-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Puedes cambiar a cover, fill, etc., según prefieras */
  }

  .login-box {
    width: 450px !important;
  }

  .navbar-light .navbar-nav .active > .nav-link,
  .navbar-light .navbar-nav .nav-link.active,
  .navbar-light .navbar-nav .nav-link.show,
  .navbar-light .navbar-nav .show > .nav-link {
    color: white !important;
    background: #007bff !important;
    font-weight: bold !important;
  }

  .addNewRecord {
    background-color: #078d65 !important;
    color: white !important;
  }

  .importar {
    background-color: #5729a5 !important;
    color: white !important;
  }

  .buttons-excel {
    background-color: #0d6efd !important;
    color: white !important;
  }

  .buttons-print {
    background-color: #ffc107 !important;
    color: white !important;
  }

  .dt-button {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  .transparentbar {
    background-repeat: no-repeat;
    cursor: pointer;
    outline: none;
    border: none;
    box-shadow: none;
    background-image: none;
    background-color: transparent;
  }

  .btn-check:focus + .btn-primary,
  .btn-primary:focus {
    color: #fff;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .transparentbar:hover {
    color: #fff;
    background-color: transparent !important;
    border-color: transparent !important;
  }

  .card-gray {
    border: 1px solid gray;
  }

  .card-header {
    border-bottom: 1px solid gray;
  }

  .small-box {
    border: 1px solid gray !important;
  }

  .content-header h2 {
    font-family: "Kalam", cursive;
    font-weight: bold;
  }

  .card-header {
    padding: 0.4rem 1.25rem !important;
  }

  .form-control,
  select {
    border: 1px solid gray !important;
  }

  .input-group > .input-group-append > .btn,
  .input-group > .input-group-append > .input-group-text,
  .input-group > .input-group-prepend:first-child > .btn:not(:first-child),
  .input-group
    > .input-group-prepend:first-child
    > .input-group-text:not(:first-child),
  .input-group > .input-group-prepend:not(:first-child) > .btn,
  .input-group > .input-group-prepend:not(:first-child) > .input-group-text {
    border: 1px solid gray !important;
  }

  .btn-personalizado {
    margin-top: 30px;
    padding: 5px 40px; /* Ajusta el padding para cambiar el tamaño */
    font-size: 12px; /* Tamaño de la fuente */
  }

  .new-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    z-index: 9999; /* Valor alto para estar por encima de todo */
    /*  display: none; /* Ocultar la nueva página por defecto */
  }

  #b-enlace {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    outline: none;
    /* Añadir estilos adicionales según sea necesario */
  }

  .s-c {
    font-size: 8px; /* Cambia el tamaño del ícono */
  }

  /* Estilo general para todas las tablas DataTables */
  /* para tamaño de los botones y el texto al pie de pagina del datatable*/
  .dataTables_wrapper {
    font-size: 13px; /* Cambia este valor al tamaño que desees */
  }

  /* para el ancho del datatable en pantalla*/
  div.dataTables_wrapper {
    width: 100%;
    margin: 0 auto;
  }

  .dataTables_filter input {
    width: 380px !important;
  }

  /* Tamaño del texto en el datatable */
  table.dataTable tbody td {
    /*    white-space: nowrap !important; Esto hace que no quiebre la columan en caso tenga mucho texto */
    font-size: 12px !important;
  }

  /* Tamaño del titulo de los datatables */
  table.dataTable thead th {
    background-color: darkseagreen !important;
    font-weight: normal !important;
    font-size: 10px !important;
  }

  /* El espacio entre las filas del datatable */
  table.dataTable tbody tr td {
    padding: 1px !important;
    border-style: solid;
  }

  /* Color cuando el mouse pasa por encima del body del datatable */
  table.dataTable tbody tr:hover {
    background-color: #71d1eb !important;
  }

  .empresa-nombre {
    font-size: 22px; /* Tamaño de la letra para el nombre de la empresa */
    color: blue; /* Color para el nombre de la empresa */
    font-weight: bold; /* Hace el texto más grueso */
  }

  .datatable-cell-wrap {
    white-space: normal !important; /* Permite que el texto envuelva líneas */
    word-break: break-word !important; /* Divide las palabras largas si es necesario */
  }

  #spinner {
    display: none; /* Inicialmente oculto */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
  }

  .loader {
    border: 8px solid #f3f3f3; /* Color del fondo */
    border-top: 8px solid #3498db; /* Color del borde animado */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .center-container {
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .form-box {
    width: 100%;
    max-width: 500px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .floating-image {
    width: 300px !important;
    height: 300px !important;
    object-fit: contain;
    display: block;
    background-color: #f0f0f0; /* Color de fondo opcional si hay espacios */
  }
}

@media (min-width: 1025px) and (max-width: 1600px) {
  body {
    font-family: "Nunito", sans-serif;
    font-size: 12px;
  }

  .dropdown-item span {
    font-size: 11px !important;
  }

  .input_size_cantidad {
    font-size: 11px; /* Tamaño del texto */
    width: 60px !important; /* Ancho del campo */
  }

  .input_size_pu {
    font-size: 11px; /* Tamaño del texto */
    width: 90px !important; /* Ancho del campo */
  }
  .input_size_puu {
    font-size: 10px; /* Tamaño del texto */
    width: 70px !important; /* Ancho del campo */
  }

  .input_size_dcto {
    font-size: 11px; /* Tamaño del texto */
    width: 60px !important; /* Ancho del campo */
  }

  .input_size_desc {
    font-size: 11px; /* Tamaño del texto */
  }

  ul.ui-menu {
    max-height: 200px; /* Altura máxima del menú */
    overflow-y: auto; /* Habilitar desplazamiento vertical */
    overflow-x: hidden; /* Ocultar desplazamiento horizontal */
  }

  .image-container {
    width: 100%; /* Ajusta al tamaño que necesites */
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .brand-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Puedes cambiar a cover, fill, etc., según prefieras */
  }

  .login-box {
    width: 450px !important;
  }

  .navbar-light .navbar-nav .active > .nav-link,
  .navbar-light .navbar-nav .nav-link.active,
  .navbar-light .navbar-nav .nav-link.show,
  .navbar-light .navbar-nav .show > .nav-link {
    color: white !important;
    background: #007bff !important;
    font-weight: bold !important;
  }

  .addNewRecord {
    background-color: #078d65 !important;
    color: white !important;
  }

  .importar {
    background-color: #5729a5 !important;
    color: white !important;
  }

  .buttons-excel {
    background-color: #0d6efd !important;
    color: white !important;
  }

  .buttons-print {
    background-color: #ffc107 !important;
    color: white !important;
  }

  .dt-button {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  .transparentbar {
    background-repeat: no-repeat;
    cursor: pointer;
    outline: none;
    border: none;
    box-shadow: none;
    background-image: none;
    background-color: transparent;
  }

  .btn-check:focus + .btn-primary,
  .btn-primary:focus {
    color: #fff;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .transparentbar:hover {
    color: #fff;
    background-color: transparent !important;
    border-color: transparent !important;
  }

  .card-gray {
    border: 1px solid gray;
  }

  .card-header {
    border-bottom: 1px solid gray;
  }

  .small-box {
    border: 1px solid gray !important;
  }

  .content-header h2 {
    font-family: "Kalam", cursive;
    font-weight: bold;
  }

  .card-header {
    padding: 0.4rem 1.25rem !important;
  }

  .form-control,
  select {
    border: 1px solid gray !important;
  }

  .input-group > .input-group-append > .btn,
  .input-group > .input-group-append > .input-group-text,
  .input-group > .input-group-prepend:first-child > .btn:not(:first-child),
  .input-group
    > .input-group-prepend:first-child
    > .input-group-text:not(:first-child),
  .input-group > .input-group-prepend:not(:first-child) > .btn,
  .input-group > .input-group-prepend:not(:first-child) > .input-group-text {
    border: 1px solid gray !important;
  }

  .btn-personalizado {
    margin-top: 30px;
    padding: 5px 40px; /* Ajusta el padding para cambiar el tamaño */
    font-size: 12px; /* Tamaño de la fuente */
  }

  .new-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    z-index: 9999; /* Valor alto para estar por encima de todo */
    /*  display: none; /* Ocultar la nueva página por defecto */
  }

  #b-enlace {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    outline: none;
    /* Añadir estilos adicionales según sea necesario */
  }

  .s-c {
    font-size: 8px; /* Cambia el tamaño del ícono */
  }

  /* Estilo general para todas las tablas DataTables */
  /* para tamaño de los botones y el texto al pie de pagina del datatable*/
  .dataTables_wrapper {
    font-size: 10px; /* Cambia este valor al tamaño que desees */
  }
  .dataTables_filter input {
  width: 380px !important;
}


  /* para el ancho del datatable en pantalla*/
  div.dataTables_wrapper {
    width: 100%;
    margin: 0 auto;
  }

  /* Tamaño del texto en el datatable */
  table.dataTable tbody td {
    /*    white-space: nowrap !important; Esto hace que no quiebre la columan en caso tenga mucho texto */
    font-size: 10px !important;
  }

  /* Tamaño del titulo de los datatables */
  table.dataTable thead th {
    background-color: darkseagreen !important;
    font-weight: normal !important;
    font-size: 12px !important;
  }

  /* El espacio entre las filas del datatable */
  table.dataTable tbody tr td {
    padding: 1px !important;
    border-style: solid;
  }

  /* Color cuando el mouse pasa por encima del body del datatable */
  table.dataTable tbody tr:hover {
    background-color: #71d1eb !important;
  }

  .empresa-nombre {
    font-size: 22px; /* Tamaño de la letra para el nombre de la empresa */
    color: blue; /* Color para el nombre de la empresa */
    font-weight: bold; /* Hace el texto más grueso */
  }

  .datatable-cell-wrap {
    white-space: normal !important; /* Permite que el texto envuelva líneas */
    word-break: break-word !important; /* Divide las palabras largas si es necesario */
  }

  #spinner {
    display: none; /* Inicialmente oculto */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
  }

  .loader {
    border: 8px solid #f3f3f3; /* Color del fondo */
    border-top: 8px solid #3498db; /* Color del borde animado */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .center-container {
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .form-box {
    width: 100%;
    max-width: 500px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .floating-image {
    width: 300px !important;
    height: 300px !important;
    object-fit: contain;
    display: block;
    background-color: #f0f0f0; /* Color de fondo opcional si hay espacios */
  }
}

/* Para tabletas */
@media (min-width: 481px) and (max-width: 1024px) {
  body {
    font-family: "Nunito", sans-serif;
    font-size: 12px;
  }

  .dropdown-item span {
    font-size: 11px !important;
  }

  .input_size_cantidad {
    font-size: 11px; /* Tamaño del texto */
    width: 60px !important; /* Ancho del campo */
  }

  .input_size_pu {
    font-size: 11px; /* Tamaño del texto */
    width: 90px !important; /* Ancho del campo */
  }
  .input_size_puu {
    font-size: 10px; /* Tamaño del texto */
    width: 70px !important; /* Ancho del campo */
  }

  .input_size_dcto {
    font-size: 11px; /* Tamaño del texto */
    width: 60px !important; /* Ancho del campo */
  }
  .input_size_desc {
    font-size: 11px; /* Tamaño del texto */
  }

  ul.ui-menu {
    max-height: 200px; /* Altura máxima del menú */
    overflow-y: auto; /* Habilitar desplazamiento vertical */
    overflow-x: hidden; /* Ocultar desplazamiento horizontal */
  }

  .image-container {
    width: 100%; /* Ajusta al tamaño que necesites */
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .brand-image {
    width: 50%;
    height: 50%;
    object-fit: contain; /* Puedes cambiar a cover, fill, etc., según prefieras */
  }

  .login-box {
    width: 450px !important;
  }

  .navbar-light .navbar-nav .active > .nav-link,
  .navbar-light .navbar-nav .nav-link.active,
  .navbar-light .navbar-nav .nav-link.show,
  .navbar-light .navbar-nav .show > .nav-link {
    color: white !important;
    background: #007bff !important;
    font-weight: bold !important;
  }

  .addNewRecord {
    background-color: #078d65 !important;
    color: white !important;
  }

  .importar {
    background-color: #5729a5 !important;
    color: white !important;
  }

  .buttons-excel {
    background-color: #0d6efd !important;
    color: white !important;
  }

  .buttons-print {
    background-color: #ffc107 !important;
    color: white !important;
  }

  .dt-button {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  .transparentbar {
    background-repeat: no-repeat;
    cursor: pointer;
    outline: none;
    border: none;
    box-shadow: none;
    background-image: none;
    background-color: transparent;
  }

  .btn-check:focus + .btn-primary,
  .btn-primary:focus {
    color: #fff;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .transparentbar:hover {
    color: #fff;
    background-color: transparent !important;
    border-color: transparent !important;
  }

  .card-gray {
    border: 1px solid gray;
  }

  .card-header {
    border-bottom: 1px solid gray;
  }

  .small-box {
    border: 1px solid gray !important;
  }

  .content-header h2 {
    font-family: "Kalam", cursive;
    font-weight: bold;
  }

  .card-header {
    padding: 0.4rem 1.25rem !important;
  }

  .form-control,
  select {
    border: 1px solid gray !important;
  }

  .input-group > .input-group-append > .btn,
  .input-group > .input-group-append > .input-group-text,
  .input-group > .input-group-prepend:first-child > .btn:not(:first-child),
  .input-group
    > .input-group-prepend:first-child
    > .input-group-text:not(:first-child),
  .input-group > .input-group-prepend:not(:first-child) > .btn,
  .input-group > .input-group-prepend:not(:first-child) > .input-group-text {
    border: 1px solid gray !important;
  }

  .btn-personalizado {
    margin-top: 30px;
    padding: 5px 40px; /* Ajusta el padding para cambiar el tamaño */
    font-size: 12px; /* Tamaño de la fuente */
  }

  .new-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    z-index: 9999; /* Valor alto para estar por encima de todo */
    /*  display: none; /* Ocultar la nueva página por defecto */
  }

  #b-enlace {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    outline: none;
    /* Añadir estilos adicionales según sea necesario */
  }

  .s-c {
    font-size: 8px; /* Cambia el tamaño del ícono */
  }

  /* Estilo general para todas las tablas DataTables */
  /* para tamaño de los botones y el texto al pie de pagina del datatable*/
  .dataTables_wrapper {
    font-size: 14px; /* Cambia este valor al tamaño que desees */
  }
  .dataTables_filter input {
  width: 380px !important;
}


  /* para el ancho del datatable en pantalla*/
  div.dataTables_wrapper {
    width: 100%;
    margin: 0 auto;
  }

  /* Tamaño del texto en el datatable */
  table.dataTable tbody td {
    /*    white-space: nowrap !important; Esto hace que no quiebre la columan en caso tenga mucho texto */
    font-size: 11px !important;
  }

  /* Tamaño del titulo de los datatables */
  table.dataTable thead th {
    background-color: darkseagreen !important;
    font-weight: normal !important;
    font-size: 14px !important;
  }

  /* El espacio entre las filas del datatable */
  table.dataTable tbody tr td {
    padding: 1px !important;
    border-style: solid;
  }

  /* Color cuando el mouse pasa por encima del body del datatable */
  table.dataTable tbody tr:hover {
    background-color: #71d1eb !important;
  }

  .empresa-nombre {
    font-size: 22px; /* Tamaño de la letra para el nombre de la empresa */
    color: blue; /* Color para el nombre de la empresa */
    font-weight: bold; /* Hace el texto más grueso */
  }

  .datatable-cell-wrap {
    white-space: normal !important; /* Permite que el texto envuelva líneas */
    word-break: break-word !important; /* Divide las palabras largas si es necesario */
  }

  #spinner {
    display: none; /* Inicialmente oculto */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
  }

  .loader {
    border: 8px solid #f3f3f3; /* Color del fondo */
    border-top: 8px solid #3498db; /* Color del borde animado */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .center-container {
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .form-box {
    width: 100%;
    max-width: 500px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .floating-image {
    width: 200px !important;
    height: 200px !important;
    object-fit: contain;
    display: block;
    background-color: #f0f0f0; /* Color de fondo opcional si hay espacios */
  }
}

/* Para teléfonos pequeños */
@media (max-width: 480px) {
  body {
    font-family: "Nunito", sans-serif;
    font-size: 9px;
  }

  .dropdown-item span {
    font-size: 9px !important;
  }

  .input_size_cantidad {
    font-size: 9px; /* Tamaño del texto */
    width: 60px !important; /* Ancho del campo */
  }

  .input_size_pu {
    font-size: 9px; /* Tamaño del texto */
    width: 90px !important; /* Ancho del campo */
  }
  .input_size_puu {
    font-size: 8px; /* Tamaño del texto */
    width: 60px !important; /* Ancho del campo */
  }

  .input_size_dcto {
    font-size: 9px; /* Tamaño del texto */
    width: 60px !important; /* Ancho del campo */
  }

  .input_size_desc {
    font-size: 9px; /* Tamaño del texto */
  }

  ul.ui-menu {
    max-height: 200px; /* Altura máxima del menú */
    overflow-y: auto; /* Habilitar desplazamiento vertical */
    overflow-x: hidden; /* Ocultar desplazamiento horizontal */
  }

  .image-container {
    width: 100%; /* Ajusta al tamaño que necesites */
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .brand-image {
    width: 50%;
    height: 50%;
    object-fit: contain; /* Puedes cambiar a cover, fill, etc., según prefieras */
  }

  .login-box {
    width: 350px !important;
  }

  .navbar-light .navbar-nav .active > .nav-link,
  .navbar-light .navbar-nav .nav-link.active,
  .navbar-light .navbar-nav .nav-link.show,
  .navbar-light .navbar-nav .show > .nav-link {
    color: white !important;
    background: #007bff !important;
    font-weight: bold !important;
  }

  .addNewRecord {
    background-color: #078d65 !important;
    color: white !important;
  }

  .importar {
    background-color: #5729a5 !important;
    color: white !important;
  }

  .buttons-excel {
    background-color: #0d6efd !important;
    color: white !important;
  }

  .buttons-print {
    background-color: #ffc107 !important;
    color: white !important;
  }

  .dt-button {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  .transparentbar {
    background-repeat: no-repeat;
    cursor: pointer;
    outline: none;
    border: none;
    box-shadow: none;
    background-image: none;
    background-color: transparent;
  }

  .btn-check:focus + .btn-primary,
  .btn-primary:focus {
    color: #fff;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .transparentbar:hover {
    color: #fff;
    background-color: transparent !important;
    border-color: transparent !important;
  }

  .card-gray {
    border: 1px solid gray;
  }

  .card-header {
    border-bottom: 1px solid gray;
  }

  .small-box {
    border: 1px solid gray !important;
  }

  .content-header h2 {
    font-family: "Kalam", cursive;
    font-weight: bold;
  }

  .card-header {
    padding: 0.4rem 1.25rem !important;
  }

  .form-control,
  select {
    border: 1px solid gray !important;
  }

  .input-group > .input-group-append > .btn,
  .input-group > .input-group-append > .input-group-text,
  .input-group > .input-group-prepend:first-child > .btn:not(:first-child),
  .input-group
    > .input-group-prepend:first-child
    > .input-group-text:not(:first-child),
  .input-group > .input-group-prepend:not(:first-child) > .btn,
  .input-group > .input-group-prepend:not(:first-child) > .input-group-text {
    border: 1px solid gray !important;
  }

  .btn-personalizado {
    margin-top: 30px;
    padding: 5px 40px; /* Ajusta el padding para cambiar el tamaño */
    font-size: 12px; /* Tamaño de la fuente */
  }

  .new-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    z-index: 9999; /* Valor alto para estar por encima de todo */
    /*  display: none; /* Ocultar la nueva página por defecto */
  }

  #b-enlace {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    outline: none;
    /* Añadir estilos adicionales según sea necesario */
  }

  .s-c {
    font-size: 8px; /* Cambia el tamaño del ícono */
  }

  /* Estilo general para todas las tablas DataTables */
  /* para tamaño de los botones y el texto al pie de pagina del datatable*/
  .dataTables_wrapper {
    font-size: 9px; /* Cambia este valor al tamaño que desees */
  }

  .dataTables_filter input {
  width: 380px !important;
}


  /* para el ancho del datatable en pantalla*/
  div.dataTables_wrapper {
    width: 100%;
    margin: 0 auto;
  }

  /* Tamaño del texto en el datatable */
  table.dataTable tbody td {
    /*    white-space: nowrap !important; Esto hace que no quiebre la columan en caso tenga mucho texto */
    font-size: 6px !important;
  }

  /* Tamaño del titulo de los datatables */
  table.dataTable thead th {
    background-color: darkseagreen !important;
    font-weight: normal !important;
    font-size: 9px !important;
  }

  /* El espacio entre las filas del datatable */
  table.dataTable tbody tr td {
    padding: 1px !important;
    border-style: solid;
  }

  /* Color cuando el mouse pasa por encima del body del datatable */
  table.dataTable tbody tr:hover {
    background-color: #71d1eb !important;
  }

  .empresa-nombre {
    font-size: 12px; /* Tamaño de la letra para el nombre de la empresa */
    color: blue; /* Color para el nombre de la empresa */
    font-weight: bold; /* Hace el texto más grueso */
  }

  .datatable-cell-wrap {
    white-space: normal !important; /* Permite que el texto envuelva líneas */
    word-break: break-word !important; /* Divide las palabras largas si es necesario */
  }

  #spinner {
    display: none; /* Inicialmente oculto */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
  }

  .loader {
    border: 8px solid #f3f3f3; /* Color del fondo */
    border-top: 8px solid #3498db; /* Color del borde animado */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .center-container {
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .form-box {
    width: 100%;
    max-width: 500px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  .floating-image {
    width: 200px !important;
    height: 200px !important;
    object-fit: contain;
    display: block;
    background-color: #f0f0f0; /* Color de fondo opcional si hay espacios */
  }
}

#contactsMenu {
  left: auto !important;
  right: 0 !important;
  z-index: 1050; /* más alto que el sidebar */
}

#contactsMenu.dropdown-menu {
  position: absolute !important;
  top: 100% !important; /* debajo del botón */
  left: auto !important;
  right: 0 !important;
  z-index: 10000 !important; /* más alto que el sidebar */
}