.gray-background {
    background-color: #f0f0f0;
}

/* Estilo general para la tabla */
.styled-table {
/*    width: 100%; */
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 14px;
    text-align: center;
    border: 1px solid #ddd; /* Borde para la tabla completa */    
}

/* Encabezado de la tabla */
.styled-table thead th {
    font-weight: bold;
    text-align: center;    
    background-color: #f0f0f0; /* Fondo gris claro */
    color: #333; /* Texto gris oscuro */
    padding: 2px;
    /*border-bottom: 1px solid #ddd;*/
    border: 1px solid #ddd; /* Borde para las celdas del encabezado */    
}

.styled-table thead td {
    font-weight: bold;
    text-align: center;    
    background-color: #ffffff; /* Fondo gris claro */
    background-color: #f0f0f0; /* Fondo gris claro */
    color: #333; /* Texto gris oscuro */
    padding: 2px;
    /*border-bottom: 1px solid #ddd;*/
    border: 1px solid #ddd; /* Borde para las celdas del encabezado */    
}

.styled-table tbody th {
    padding-left: 6px;   /* Espaciado a la izquierda */
    padding-right: 6px;  /* Espaciado a la derecha */    
    background-color: #f0f0f0; /* Fondo gris claro */
    text-align: right;    
    /*border-bottom: 1px solid #ddd;*/
    border: 1px solid #ddd; /* Borde para las celdas del encabezado */    
}

/* Celdas del cuerpo de la tabla */
.styled-table tbody td {
    padding-left: 6px;   /* Espaciado a la izquierda */
    padding-right: 6px;  /* Espaciado a la derecha */    
    text-align: right;    
    /*border-bottom: 1px solid #ddd;*/
    border: 1px solid #ddd; /* Borde para las celdas del encabezado */    
}

/* Alternar color de filas en el cuerpo de la tabla */
.styled-table tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* Fondo gris muy claro */
}

.no-zebra tbody td {
    background-color: #ffffff;
}

.listbox-select {
    width: 100%; /* Se adapta al ancho de la celda */
    box-sizing: border-box; /* Incluye el padding y el borde en el ancho total */
    padding: 4px 8px;  
}

/* Pie de tabla */
.styled-table tfoot td {
    padding: 0px;
    background-color: #ffffff; /* Fondo gris medio */
    border-top: 0px solid #ddd;
    text-align: left;
    font-size: 121px;
}

.btn-delete {
    padding: 3px 10px;  
    font-size: 11px;    
    border-radius: 10px; 
}

.btn-create {
    padding: 3px 10px;  
    font-size: 11px;    
    border-radius: 10px; 
/*    background-color: blue; /* Azul */
/*    color: white; /* Texto blanco para contraste */
}

.filaTotales {
    border : 0px !important;
    border-top: 2px solid #6b6b6b !important; 
    

}

.filaColumna {
    border-bottom: 2px solid #6b6b6b; 
    border-top: none;  /* Sin borde en la parte inferior */
    border : 0px;
    padding: 4px 8px;  
}



.celdaText {
    width: 200px;
    text-align: left !important; 
    vertical-align: middle; /* Centra el contenido verticalmente */
    padding: 4px 8px;  
}

.celdaCrane {
    width: 100px;
    text-align: left !important; 
    vertical-align: middle; /* Centra el contenido verticalmente */
    padding: 4px 8px;  
}

.celdaColumnTitulo {
    font-weight: bold;
/*    font-style: italic; */
    text-align: center !important; 
    vertical-align: middle; /* Centra el contenido verticalmente */
/*    color: #afafaf; 
    background: #ffffff !important; 
    */
    color: black !important; 
    background: #ebebeb !important; 
    padding: 4px 8px;  
}

.celdaTitulo {
    font-weight: bold;
    text-align: center !important; 
    vertical-align: middle; /* Centra el contenido verticalmente */
/*    color: #808080  !important; */
    color: #8882be  !important; 
    padding: 4px ;  
}

.celdaTitulo2 {
    font-weight: bold;
    text-align: center !important; 
    vertical-align: middle; /* Centra el contenido verticalmente */
    color: #ffffff !important; 
    background: #808080 !important; 
}

.celdaTotal {
    font-weight: 600;
    font-size: 16px;    
/*    font-style: italic;  */
    text-align: right !important; 
    vertical-align: middle; 
    background: #ffffff !important; 
    padding: 4px ;  
    color: #717171; 
}

.celdaFoot {
    font-weight: bold;
    font-size: 12px !important;    
/*    font-style: italic; */
/*    text-align: center !important; */
    vertical-align: middle; 
    background: #ffffff !important; 
    padding: 2px !important;  
}


.celdaTextArea {
    width: 100%;
    height: 150px;
    padding: 4px ;  
}

.celdaTextAreaInTable2 {
    width: 200px;
/*    height: 50px;*/
    padding: 4px ;  
    resize: none; /* Deshabilita el redimensionado manual del usuario */
    overflow: hidden; /* Oculta el scrollbar mientras ajustas dinámicamente la altura */
}

.celdaTextAreaInTable {
    width: 100%; /* Ocupa todo el ancho de la celda */
    height: 100%; /* Ocupa todo el alto de la celda */
    box-sizing: border-box; /* Asegura que el padding y border no desborden el tamaño */
}

.dropInTable {
    width: 100% !important; /* Ocupa todo el ancho de la celda */
    height: 100% !important;/* Ocupa todo el alto de la celda */
    box-sizing: border-box; /* Asegura que el padding y border no desborden el tamaño */
}

.celda-time-input {
    text-align: center !important;
/*    background-color: rgba(255, 255, 0, 0.2) !important; /* Fondo amarillo sutil con opacidad */
}


.celda-int {
    width: 50px; /* Puedes cambiar el valor a lo que necesites */
    text-align: right !important;
}

.celda-guid {
    width: 80px; /* Puedes cambiar el valor a lo que necesites */
    text-align: right !important;
}

.celda-guid-big {
    width: 150px; /* Puedes cambiar el valor a lo que necesites */
    text-align: right !important;
/*    font-weight: bold;*/
    font-size: 26px !important;    
    position: absolute; /* Siempre visible */
    top: 170px; /* Ajusta según necesidad */
    left: 430px;
}

.table-titulo {
    font-weight: bold;
    font-size: 16px;    
/*    font-style: italic; */
    text-align: left !important; 
    vertical-align: middle; 
/*    background: #e5e6e7 !important; */
    background:white !important; 
    padding: 6px !important;  
    color: #1826a7 !important; /* Gris medio */
}

.tituloRed {
    font-weight: bold;
    font-size: 15px;    
/*    font-style: italic; */
    text-align: left !important; 
    vertical-align: middle; 
    background: #ffffff !important; 
    padding: 6px ;  
    color: #800000 !important; /* Gris medio */
}

.table-tituloBig {
    font-weight: bold;
    font-size: 18px;    
    font-style: italic; 
    text-align: left !important; 
    vertical-align: middle; 
    background: #ffffff !important; 
    padding: 4px ;  
    color: #000d80 !important; /* Gris medio */
}

.head-address {
    font-size: 14px;    
    font-style: italic; 
    text-align: center; 
    vertical-align: middle; 
}

.head-tittle {
    font-size: 30px;    
    font-weight: bold;
    font-weight: 900;
    text-align: center; 
    vertical-align: middle; 
}

.head-subtittle {
    font-size: 26px;    
    font-weight: bold;
    text-align: center; 
    vertical-align: middle; 
    margin-left: 260px;
}

.head-id {
    font-size: 16px;    
    text-align: left; 
    vertical-align: middle; 
    color: red;
    margin-right: 50px;
}

.left-block {
    float: left;
    width: 70%; 
    padding: 2px; /* Ajusta el ancho según sea necesario */
/*    background: #f7f7f7 !important; */
/*    border-radius: 16px;     */
}

.left-block2{
    float: left;
    width: 40%; 
    padding: 2px; /* Ajusta el ancho según sea necesario */
}

.right-block {
    float: right;
    width: 30%; 
    padding: 2px; 
    
}

/* editables */
.celda-date-editable {
    text-align: center !important;
}

.date-editable {
    width: 100px; /* Puedes cambiar el valor a lo que necesites */
    padding: 0px; /* Espacio interno para que el contenido no esté pegado a los bordes */
    font-size: 14px; /* Ajusta el tamaño de la fuente si es necesario */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
    text-align: center !important;
    border: none;
}


/* Ajusta el ancho de los elementos con la clase 'time-input' */
.time-editable {
    width: 50px; /* Puedes cambiar el valor a lo que necesites */
    padding: 0px; /* Espacio interno para que el contenido no esté pegado a los bordes */
    font-size: 14px; /* Ajusta el tamaño de la fuente si es necesario */
/*    font-weight: bold;    */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
    text-align: center !important;
    border: none;
/*    background-color: rgba(255, 255, 0, 0.2); /* Fondo amarillo sutil con opacidad */
}

.time-editable24 {
    width: 50px; /* Puedes cambiar el valor a lo que necesites */
    padding: 0px; /* Espacio interno para que el contenido no esté pegado a los bordes */
    font-size: 14px !important; /* Ajusta el tamaño de la fuente si es necesario */
/*    font-weight: bold;    */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
    text-align: center !important;
    border: none;
/*    background-color: rgba(255, 255, 0, 0.2); /* Fondo amarillo sutil con opacidad */
}

.time-editable24_to {
    width: 50px; /* Puedes cambiar el valor a lo que necesites */
    padding: 0px; /* Espacio interno para que el contenido no esté pegado a los bordes */
    font-size: 14px !important; /* Ajusta el tamaño de la fuente si es necesario */
/*    font-weight: bold;    */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
    text-align: center !important;
    border: none;
/*    background-color: rgba(255, 255, 0, 0.2); /* Fondo amarillo sutil con opacidad */
}

.time-editableTOTAL {
  width: 50px; /* Puedes cambiar el valor a lo que necesites */
  padding: 0px; /* Espacio interno para que el contenido no esté pegado a los bordes */
  font-size: 14px; /* Ajusta el tamaño de la fuente si es necesario */
  /*font-weight: bold;    */
  box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
  text-align: center !important;
  border: none;
/*  background-color: rgba(255, 255, 0, 0.2); /* Fondo amarillo sutil con opacidad */
}

.menuLinks {
    position: absolute; /* O fixed, dependiendo de lo que quieras */
    top: 0px;
    margin: 0 auto;
}

.menuHead {
    position: absolute; /* O fixed, dependiendo de lo que quieras */
    top: 65px;
    left: 11px; /* También puedes ajustar horizontalmente */
}


.td_editable 
{
    text-align: right !important;
    min-width: 100px; 
}

.td_editableString 
{
    text-align: left !important;
    min-width: 100px; 
}

.dropdown_mont
{
    width: 100% !important; /* Asegura que el select ocupe todo el ancho disponible de la celda */
    max-width: 100% !important; /* Previene que se agranden demasiado */
    box-sizing: border-box !important; /* Para asegurar que el padding y borde no afecten al ancho */
    padding: 1px !important; /* Ajusta el padding para no ocupar mucho espacio */    
}


.td_editableTOTAL 
{
    /*background-color: rgba(255, 255, 0, 0.2); /* Fondo amarillo sutil con opacidad */
}

.center-vertical {
    display: flex;  /* Activar Flexbox */ 
    align-items: flex-end;  /* Centrar verticalmente */
/*    height: 100%;  */ /* Asegúrate de que el contenedor tenga altura suficiente */
}

.col-small {
    width: 50px;
}
.col-medium {
    width: 100px;
}
.col-large {
    width: 300px;
}


.select2_mont 
{
    position: relative !important;
}

.nocharges
{
    font-weight: bold !important;
    text-align: center !important;    
    color: red !important;
}



.superscript {
    font-size: 0.7em; /* Más pequeño */
    vertical-align: super; /* Lo sube como superíndice */
    opacity: 0.7; /* Un poco más tenue si quieres */
}



.custom-alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.custom-alert {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    text-align: center;
    min-width: 250px;
    animation: fadeIn 0.3s ease-in-out;
}

.custom-alert p {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.custom-alert button {
    margin-top: 15px;
    padding: 8px 15px;
    border: none;
    background: #007bff;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.custom-alert button:hover {
    background: #0056b3;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

#spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.6); /* fondo semitransparente */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* por encima de todo */
}