.navbar-inverse { background-color: #2BA8E1}
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: #207513}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #080808}
.dropdown-menu { background-color: #FFFFFF}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #207513}
.navbar-inverse { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none; }
.navbar-inverse { border-color: #FFFFFF}
.navbar-inverse .navbar-brand { color: #FFFFFF}
.navbar-inverse .navbar-brand:hover { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #FFFFFF}
.dropdown-menu>li>a { color: #333333}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #999999}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #999999}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #FFFFFF}
.table-striped{font-size: 10px}
.table-bordered{font-size: 10px}

.panel-body
{
    padding: 0px;
}

#loading-bar .bar {
  background: #5c6032;
  height: 5px;
  position: fixed;
  top: 75px;
}
#loading-bar-spinner .spinner-icon
{
    visibility: hidden;
}

body{
    padding-top: 80px;
}

.affix-top,.affix{
 position: static;
}

@media (min-width: 979px) {
  #sidebar.affix-top {
    position: static;
  	margin-top:40px;
  	width:200px;
  }
  
  #sidebar.affix {
    position: fixed;
    top:80px;
  	width:200px;
    z-index: 800;  
  }
  .content-wrapper
  {
      margin-left: 220px;
      padding-left: 10px;
      margin-right: 10px;
  }
}

#loading-bar-spinner .spinner-icon {

  border-top-color:  #2BA8E1;
  border-left-color: #2BA8E1;

}

.halfgrid
{
    height: 50%
    
}

.red {
  background-color: #f89b9b;
}
tr.red {
    background-color: #ffebee !important;
    border-left: 4px solid #f44336 !important;
}

.yellow {
  background-color: #FFFF00;
}

.green {
  background-color: #009975;
}

.box-shadow{
  border: 1px;
  padding: 10px;
  box-shadow: 5px 10px 8px #888888;
}

.table-container {
  height: 300px; /* Altura fija para el contenedor de la tabla */
  overflow-y: auto; /* Habilitar el desplazamiento vertical */
}

.input-small {
    width: 80px;
    height: 32px;
    font-size: 12px;
    padding: 4px 8px;
}

a {
    cursor: pointer;
}

   .btn-equal-width {
        width: 100%;
        min-width: 50px; 
        white-space: normal; 
        height: auto;
        min-height: 20px;
         padding: 4px 8px;
        margin-bottom: 8px;   
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

thead {
  position: sticky;
  top: 75px; /* Fija la cabecera en la parte superior */
  background-color: #f9f9f9; 
  z-index: 1; /* Asegura que la cabecera esté por encima del contenido */
}

.selected {
  background-color: rgb(106, 150, 128); /* Cambia el color de fondo al seleccionar */
}

.list-group-item a {
    text-decoration: none;
    color: inherit; 
    transition: color 0.3s ease; 
}

.list-group-item a.selected {
    color: white !important;
    font-weight: bold;
}
 /* Estilos para el botón redondo */
 .floating-button {
  position: fixed; /* Posición fija */
  bottom: 20px; /* Distancia desde la parte inferior */
  right: 20px; /* Distancia desde la derecha */
  width: 60px; /* Ancho del botón */
  height: 60px; /* Alto del botón */
  border-radius: 50%; /* Hace el botón redondo */
  background-color: #0fb38a; /* Color de fondo */
  color: white; /* Color del texto */
  border: none; /* Sin borde */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */
  cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px; /* Tamaño del ícono o texto */
}

/* Efecto al pasar el mouse sobre el botón */
.floating-button:hover {
  background-color: #0056b3; /* Cambia el color de fondo */
}

.scrollable-accordion {
  max-height: 80vh; /* 80% del viewport height */
  overflow-y: auto;
  width: 100%;
  border: 1px solid #ddd; /* opcional: para visualizar mejor el contenedor */
  border-radius: 4px; /* para coincidir con el estilo de panel-default */
}

.scrollable-accordion .accordion-group {
  margin-bottom: 0; /* Opcional: ajusta según necesidad */
}

    /* Estilos para el menú flotante */
    .floating-menu {
      position: fixed;
      bottom: 90px; /* Distancia desde la parte inferior (ajustar según el tamaño del botón) */
      right: 20px; /* Distancia desde la derecha */
      background-color: white;
      border: 1px solid #ddd;
      border-radius: 4px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      padding: 10px;
      z-index: 999; /* Asegura que el menú esté por encima de otros elementos */
      display: none; /* Oculto por defecto */
    }

    /* Mostrar el menú cuando está activo */
    .floating-menu.active {
      display: block;
    }

    /* Estilos para los elementos del menú */
    .floating-menu ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .floating-menu ul li {
      padding: 10px;
      cursor: pointer;
    }

    .floating-menu ul li:hover {
      background-color: #f1f1f1;
    }
/* aside 
/* Estilos responsive */
@media (max-width: 768px) {
  aside {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    transform: translateX(-100%);
    z-index: 1000;
  }

  aside.open {
    transform: translateX(0);
  }

  main {
    margin-left: 0;
  }
}
/*zxing*/
.scan-modal .modal-dialog {
    max-width: 500px;
}

.scanner-container {
    position: relative;
    width: 100%;
    height: 300px;
    margin-bottom: 15px;
    background: #000;
}

.scan-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.7);
    top: 0;
    transform: translateY(-100%);
    transition: transform 0.1s;
    z-index: 10;
}

.scan-line.active {
    animation: scan 2s infinite linear;
}

@keyframes scan {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(300px); }
}

.progress-container {
    margin-top: 10px;
    height: 5px;
    background: #eee;
    border-radius: 3px;
}

.progress-bar {
    height: 100%;
    background: #5cb85c;
    border-radius: 3px;
    transition: width 0.3s;
}

.result {
    padding: 10px;
    margin-top: 10px;
    border-radius: 4px;
    text-align: center;
}

.result.success {
    background: #dff0d8;
    color: #3c763d;
}

.result.error {
    background: #f2dede;
    color: #a94442;
}

.table-wrapper {
    max-height: 400px;
    overflow: auto;
    border: 1px solid #ddd;
}

.table-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
}

.table-header table {
    margin-bottom: 0;
}

.table-body {
    overflow: auto;
}

.table-body table {
    margin-top: 0;
    border-top: none;
}

/* Asegurar que las tablas tengan el mismo ancho de columnas */
.table-header table,
.table-body table {
    table-layout: fixed;
    width: 100%;
}

.sticky-col {
    position: sticky;
    background: inherit;
    z-index: 5;
}

.first-col {
    left: 0;
    width: 50px;
    min-width: 50px;
    background: white;
}

.second-col {
    left: 50px;
    width: 120px;
    min-width: 120px;
    background: white;
}

/* Asegurar que las columnas tengan el mismo ancho en ambas tablas */
.table-header th,
.table-body td {
    width: 150px; /* Ajusta según necesites */
    min-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Columnas específicas */
.table-header th:nth-child(1),
.table-body td:nth-child(1) { width: 50px; }

.table-header th:nth-child(2),
.table-body td:nth-child(2) { width: 120px; }

.table-header th:nth-child(3),
.table-body td:nth-child(3) { width: 120px; }

.table-header th:nth-child(4),
.table-body td:nth-child(4) { width: 150px; }

.table-header th:nth-child(5),
.table-body td:nth-child(5) { width: 120px; }

.table-header th:nth-child(6),
.table-body td:nth-child(6) { width: 120px; }

.table-header th:nth-child(7),
.table-body td:nth-child(7) { width: 120px; }

.table-header th:nth-child(8),
.table-body td:nth-child(8) { width: 100px; }