body { font-family: 'Poppins', sans-serif; }
td p { margin: 0; }
.no-gutter > [class*='col-'] { padding-right:0; padding-left:0; }
.no-gutter > [class*='col-']:first-child { padding-left: 15px; }

.btn.active {
    background-color: #3598dc; /* Azul */
    color: white; /* Texto blanco */
    border-color: #5b87b9; /* Bordes azul oscuro */
    font-weight: bold; /* Texto en negrita */
}

.btn.active:hover {
    background-color: #3599dca8 ;/* Azul más oscuro al pasar el mouse */
    color: white;
}

.header-row {
  font-weight: 700;
  border-bottom: 1px solid #dee2e6;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #f8f9fa;
  padding-top: 0.5rem;
  padding-left: 2rem;
}

/* Custom display */
.flex-row{
  display: flex;
  flex-direction: row;
}
.flex-col-align-start{
  display: flex; flex-direction: column; align-items: flex-start;
}
.d-flex{display: flex}
.content-bwn {justify-content: space-between;}
/* Custom margins */
.margin-top-0 { margin-top: 0px!important; }
.margin-bottom-0 { margin-bottom: 0px!important; }
.margin-bottom-10 { margin-bottom: 10px!important; }
.margin-top-5 { margin-top: 5px!important; }
.margin-top-10 { margin-top: 10px!important; }
.margin-top-15 { margin-top: 15px!important; }
.margin-top-25 { margin-top: 25px!important; }
.margin-top-30 { margin-top: 30px!important; }
.m-0 { margin : 0!important;}
.m-5 { margin : 5px!important;}
.m-10 { margin : 10px!important;}
.m-15 { margin : 10px!important;}
.mr-5 { margin-right: 5px !important;}
.mr-10 { margin-right: 10px !important;}
.mr-30 { margin-right: 30px !important;}
.center-text { text-align: center;}
.lower { text-transform: lowercase; }
.p-0 { padding: 0 !important;}

.text-area-small { height: 34px!important;}
/* Custom style colors */
.page-header.navbar { background: #21304e; }
input.btn.black { background: #000; color: white; }
p.black, h1.black, h2.black, h3.black { color: #000; }
input.btn.turquoise { background: #00afbe; color: white; }
p.turquoise, h1.turquoise, h2.turquoise, h3.turquoise { color: #00afbe; }
input.btn.darkblue { background: #21304e; color: white; }
p.darkblue, h1.darkblue, h2.darkblue, h3.darkblue { color: #21304e; }
.red { color: red; }
.font-green { color: #21304e!important; }
.page-header.navbar .top-menu .navbar-nav>li.dropdown-user>.dropdown-menu { width: 220px; }

h3.inner-title { font-size: 15px; font-weight: 600; text-transform: uppercase; color: #21304e; margin: 15px 0; }
h4.inner-title { font-size: 15px; font-weight: 600; text-transform: initial; color: #21304e; margin: 15px 0; }
.portlet.light>.portlet-title>.caption>.caption-subject { margin-right: 25px; }
/* Custom fonts style */
.f-sm { font-size: small;}

/* Header */
.page-header.navbar { height: 85px; min-height: 85px; }
.page-header.navbar .page-logo { padding-top: 5px; width: 275px; }
.page-header.navbar .page-logo img { max-height: 60px; max-width: 195px; margin-top: 5px; }
.page-header.navbar .page-logo > a { color: white; font-family: 'Audiowide'; font-size: 30px; line-height: 22px; }
.page-header.navbar .page-logo > a > span { display: block; font-size: 15px; }
.btn.red-haze:not(.btn-outline) { background-color: #f2c21a; border-color: #f2c21a; color: #21304e; }
.btn.green:not(.btn-outline) { background-color: #f2c21a; border-color: #f2c21a; color: #21304e; }
.btn.red-haze:not(.btn-outline).active, .btn.red-haze:not(.btn-outline):active, .btn.red-haze:not(.btn-outline):hover, .open>.btn.red-haze:not(.btn-outline).dropdown-toggle { background-color: #f2c21a; border-color: #f2c21a; }
.btn.red-haze:not(.btn-outline).focus, .btn.red-haze:not(.btn-outline):focus { background-color: #f2c21a; border-color: #f2c21a; color: #21304e; }
.btn.green:not(.btn-outline).active, .btn.green:not(.btn-outline):active, .btn.green:not(.btn-outline):hover, .open>.btn.green:not(.btn-outline).dropdown-toggle { background-color: #f2c21a; border-color: #f2c21a; color: #21304e; color: #21304e; }
.btn.green:not(.btn-outline).focus, .btn.green:not(.btn-outline):focus { background-color: #f2c21a; border-color: #f2c21a; color: #21304e; }
.btn.green:not(.btn-outline).active.focus, .btn.green:not(.btn-outline).active:focus, .btn.green:not(.btn-outline).active:hover, .btn.green:not(.btn-outline):active.focus, .btn.green:not(.btn-outline):active:focus, .btn.green:not(.btn-outline):active:hover, .open>.btn.green:not(.btn-outline).dropdown-toggle.focus, .open>.btn.green:not(.btn-outline).dropdown-toggle:focus, .open>.btn.green:not(.btn-outline).dropdown-toggle:hover { background-color: #f2c21a; border-color: #f2c21a; color: #21304e; }
.btn.red-haze:not(.btn-outline).active.focus, .btn.red-haze:not(.btn-outline).active:focus, .btn.red-haze:not(.btn-outline).active:hover, .btn.red-haze:not(.btn-outline):active.focus, .btn.red-haze:not(.btn-outline):active:focus, .btn.red-haze:not(.btn-outline):active:hover, .open>.btn.red-haze:not(.btn-outline).dropdown-toggle.focus, .open>.btn.red-haze:not(.btn-outline).dropdown-toggle:focus, .open>.btn.red-haze:not(.btn-outline).dropdown-toggle:hover { background-color: #f2c21a; border-color: #f2c21a; color: #21304e; }
.page-header.navbar .menu-toggler.sidebar-toggler { position: absolute; top: 30px; left: 235px; margin-top: 0; }
.page-sidebar-closed.page-sidebar-closed-hide-logo .page-header.navbar .page-logo { width: 265px; height: 75px; padding-left: 20px; padding-right: 20px; padding-top: 15px; margin-left: 0; margin-right: 0; }
.edit-invoice .botones { position: absolute; right: 40px; }
.edit-invoice .botones a { padding: 0 5px; }
.edit-invoice table th { white-space: nowrap; }
.top-menu .fichar { margin-top: 30px; margin-right: 10px; }
.top-menu .fichar .salida { background: darkred; color: white; padding: 5px 10px; border-radius: 5px; }
.top-menu .fichar .entrada { background: darkgreen; color: white; padding: 5px 10px; border-radius: 5px; }
.top-menu .fichar a:hover { text-decoration: none; }
.top-menu .alerts { margin-left: 15px; margin-top: 25px; color: #ddd; font-size: 1.5em; position: relative; }
.top-menu .alerts span { position: absolute; font-size: .5em; background: red; width: 15px; text-align: center; border-radius: 15px; font-weight: bold; left: -5px; }
.portlet-title a.pull-right { margin-left: 5px; }
.btn-filter { margin:5px; }
/* Breadcrumb */
.breadcrumb { clear: both; }
.trabajando { margin-top: 25px; margin-right: 10px; background: #f2c21a; color: black; padding: 5px 10px; border-radius: 5px; }

/* Roles menu */
.dropdown-menu > li > a.active { background: #ddd; }

/* Datatables */
.filters { padding: 15px 0 30px 0; }
.active-filters { padding-bottom: 15px; }
.active-filters span { background: #ddd; padding: 5px 10px; border-radius: 40px; }
table tbody tr td:first-child { position: relative; }
table tbody tr td div.comments { position: absolute; top: -10px; left: 0; }
table tbody tr td .botones-comentarios { float: right; }
table tbody tr td input.edit-comment { width: calc(100% - 40px ); }
table.dataTable thead .sorting:after { display: none !important; }
table.dataTable thead .sorting_desc:after { display: none !important; }
table.dataTable thead .sorting_asc:after { display: none !important; }
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting_asc_disabled, table.dataTable thead .sorting_desc_disabled { background-position: center left !important; }
td li.dropdown { list-style: none; float: right; }
table.dataTable.no-footer { border-bottom: 0 !important; }
table.dataTable thead th, table.dataTable thead td { border: 0 !important; }
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover { border-color: #009781; background-color: #009781; }
table.dataTable thead tr .sorting:last-child { background-image: none; }
.table-scrollable { overflow-x: visible; overflow-y: visible ; }
.dropdown-menu { right: auto; left: 0; z-index: 9999; }
.dropdown-visible{ position:relative !important }
.row-to-edit { cursor: pointer }
.dropdown-visibleX {right: 0 !important;
    left: auto !important;}
table.dataTable thead .sorting_asc { background-image: none !important; }
table.dataTable thead .sorting_desc { background-image: none !important; }
.oculto { display: none; }
.table-edit tbody tr:hover {background-color: #eeeeee; transition: background-color .8s; }
/* Para responsive de las tablas */
.scrolledTable{ overflow-y: auto; clear:both; }

/* Estilo para fijar una columna*/
.grid.sticky-1 tbody td:nth-child(1),
.grid.sticky-1 thead th:nth-child(1),
#grid.sticky-2 tbody td:nth-child(2),
#grid.sticky-2 thead th:nth-child(2),
#grid.sticky-3 tbody td:nth-child(3),
#grid.sticky-3 thead th:nth-child(3){
  position: sticky !important;
  left: 0;
  z-index: 1;
  background-color: white;
}

table.dataTable.sticky-3 thead .sorting:nth-child(3),
table.dataTable.sticky-3 thead .sorting_asc:nth-child(3),
table.dataTable.sticky-3 thead .sorting_desc:nth-child(3),
table.dataTable.sticky-3 thead .sorting_asc_disabled:nth-child(3),
table.dataTable.sticky-3 thead .sorting_desc_disabled:nth-child(3) {
  position: sticky !important;
  left: 0;
  z-index: 1;
  background-color: white;
}
.table-row-standard { background-color: #ecf00b6e;}
/* tables */
div.table-container { overflow: auto; width: 100%; }
div.dtr-modal div.dtr-modal-content table tbody tr:last-child td:last-child { display: flex; justify-content: space-around; }
div.dtr-modal div.dtr-modal-content table tbody tr:last-child td:last-child .fa { font-size: 1.5em }
div.dtr-modal div.dtr-modal-content table tbody tr:last-child td:last-child .dropdown-menu { 
    right: 0;
    left: auto;
    z-index: 9999;
    bottom: 22px;
    top: auto;
} 
 
/* Alerts */
.alert { margin-left: 15px; width: calc( 100% - 30px); }
.validate.error, .validate.error ~ span.select2-container .select2-selection { border: 2px solid red; }

/* amcharts */
#chartdiv { height: 400px; }

/* select2 */
.select2-selection { height: auto !important; }
.select2-container--bootstrap.select2-container--disabled .select2-selection { background-color: transparent !important; }

a.edit-billing { margin-left: 10px; }

/* Import files */
.box.has-advanced-upload { outline: 2px dashed #92b0b3; outline-offset: -10px; -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear; transition: outline-offset .15s ease-in-out, background-color .15s linear; }
.box { font-size: 1.25rem; background-color: #c8dadf; position: relative; padding: 100px 20px; }
.box__dragndrop, .box__uploading, .box__success, .box__error { display: none; }
.box.has-advanced-upload { background-color: white; outline: 2px dashed black; outline-offset: -10px; }
.box.has-advanced-upload .box__dragndrop { display: inline; }
.box.is-dragover { background-color: grey; }
.box__button { font-weight: 700; color: #e5edf1; background-color: #39bfd3; display: none; padding: 8px 16px; margin: 40px auto 0; }
.box__file { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }

.box.has-advanced-upload .box__dragndrop { display: inline; }

/* Order */
.form-group ul { list-style: none; padding: 0; }
ul#tail li { display: inline-block; width: 120px; text-align: center; }
input.extra-name { width: 130px; border: 0; }
.tail-images .image { float: left; width: 120px; text-align: center; margin-bottom: 15px; }
.tail-images .image img { max-width: 85%; max-height: 65px; }
.tabla-top, .tabla-bottom { padding: 0 30px 0 30px; height: 400px; }
.colors { margin-bottom: 5px; }
.colors p { margin-bottom: 5px; margin-top: 0; padding: 0; }
.colors .color1 { height: 25px; width: 25px; display: inline-block; margin-left: 5px; border: 1px solid #999; }
.colors .color2 { height: 25px; width: 25px; display: inline-block; margin-left: 5px; border: 1px solid #999; }

/* Workflow */
.workflow h4 { margin: 10px 0; }
.pedidos-pendientes { min-height: 100px; }
.workflow .pedido { min-width: 135px; background: #ededed; border: 1px solid #ccc; padding: 10px; margin-bottom: 5px; display: inline-block; position: relative; }
.workflow .pedido a.editar { position: absolute; right: 5px; top: 5px; font-size: 1.4em; }
.workflow .pedido a.editar i.fa { color: #666; }
.workflow .pedido span { font-size: .9em; }
.workflow .reparacion { min-width: 135px; background: rgba(249,196,196,.6); border: 1px solid #ccc; padding: 10px; margin-bottom: 5px; display: inline-block; position: relative; }
.workflow .reparacion a.editar { position: absolute; right: 5px; top: 5px; font-size: 1.4em; }
.workflow .reparacion a.editar i.fa { color: #666; }
.workflow .reparacion span { font-size: .9em; }
.pedidos-pendientes .pedido.ui-draggable-dragging { background: green; color: white; z-index: 9999; }
.reparaciones-pendientes .reparacion.ui-draggable-dragging { background: green; color: white; z-index: 9999; }
.workflow-states { margin-left: -10px; width: calc(100% + 20px); }
.workflow-state.state { float: left; background: #efefef; padding: 10px; min-height: 250px; margin-right: 15px; width: 100%; }
.workflow-state h4 { text-align: center; }
.workflow-states .pedido { width: 100%; }
#repair .reparacion { width: 100%; }
.workflow-state.ui-droppable-hover { border: 2px dashed #999; }
.pedidos-finalizados { margin-top: 20px; min-height: 80px; border: 1px solid #ccc; padding: 10px; }
.workflow .pedidos-finalizados h4 { margin-top: 5px; text-align: center; }
.workflow .fecha { font-size: 18px; }
.workflow i.fa { color: #999; }

.pending-repair-boat { background: #f4bfbf; border: 1px solid #ccc; padding: 10px; margin-bottom: 5px; position: relative; width: 100%; }
.pending-repair-boat i.fa { margin-right: 5px; }
.pending-repair-boat .actions { position: absolute; right: 5px; font-size: 20px; top: 5px; }
.in-repair-boat { background: #ededed; border: 1px solid #ccc; padding: 10px; margin-bottom: 5px; position: relative; width: 100%; height: 200px; }
.in-repair-boat i.fa { margin-right: 5px; }
.in-repair-boat .actions { position: absolute; right: 10px; font-size: 20px; }
.in-repair-boat.ui-droppable-hover { border: 2px dashed #999; }
.waiting-report-boat { background: rgba(0, 175, 190, .3); border: 1px solid #ccc; padding: 10px; margin-bottom: 5px; position: relative; width: 100%; }
.waiting-report-boat i.fa { margin-right: 5px; }
.waiting-report-boat .actions { position: absolute; right: 10px; font-size: 20px; }
.boat-employee { border: 1px solid #ccc; padding: 5px; margin-bottom: 5px; position: relative; width: 100%; }
.boat-employee i.fa { margin-right: 5px; }
.boat-employee.ui-draggable-dragging { background: green !important; color: white; z-index: 9999; }

.informe-tecnico input.readonly { border: 0; background: transparent; padding-left: 0; }
.informe-tecnico input.corto { max-width: 125px; }
.informe-tecnico input.medio { max-width: 200px; }
.informe-tecnico textarea { min-width: 325px; min-height: 100px; }

.clockpicker-popover { z-index: 99999; }
tr.oculto { display: none; }
td.iconos { white-space: nowrap; text-align: right; position: relative; }
td.nowrap { white-space: nowrap; }
td.iconos a { margin: 0 5px; }
td.ports i.fa { margin-right: 10px;  }
td.iconos a.conformar-express { color: #ccc; }
td.iconos i.duplicados:hover { cursor: pointer; }
tr.severity-0 td.iconos i.duplicados { color: #ddd; }
tr.severity-1 td.iconos i.duplicados.severity-1 { color: black; }
tr.severity-2 td { background: orange; }
tr.severity-3 td { background: red; }

td.iconos .explicacion { position: absolute; width: 250px; right: 0; bottom: 65px; background: #ddd; padding: 10px; font-size: .8em; white-space: normal; text-align: left; }
a.mostrar-nuevas-asignaciones, a.mostrar-nuevos-insumos { background: #999;  color: white; padding: 0 10px; border-radius: 40px; }
a.mostrar-nuevas-asignaciones:hover, a.mostrar-nuevos-insumos:hover { text-decoration: none; }
span.centro-coste { white-space: nowrap; }
#edit-supplier {margin: 15px 0}

.consignaciones-conceptos input.corto { border: 0; }

/* Home admin */
.number span { font-size: 2em; margin-right: .5em; font-weight: bold; }
#chartab-ab { width: 100%; height: 300px; }
#chartab-an { width: 100%; height: 300px; }

/* Stats */
span.tipo { font-weight: bold; width: 135px; display: inline-block; }

/* Ship documentation */
.ship-documentation .tag { background: #ddd; padding: 2px 10px; border-radius: 15px; margin-right: 7px; display: inline-block; margin-bottom: 5px; }
.ship-documentation .borrar-campo { color: #ddd; }
table.documentation td, table.documentation th { white-space: nowrap; }

/* Ship orders */
.send-order-suppliers #message { height: 400px; }
#pedido table td { vertical-align: middle; }
.request-attachments span { font-size: .85em; background: #ccc; padding: 3px 10px; border-radius: 10px; white-space: nowrap; margin-top: 5px; display: inline-block; }
.direccion { padding-top: 25px; position: relative; }
.direccion .iconos { position: absolute; right: 15px; top: 10px; z-index: 9999; }
.ofertas-no-asignadas { overflow: visible !important; }
.ofertas-no-asignadas span { background: red; color: white; padding: 5px; border-radius: 20px; height: 25px; display: inline-block; width: 25px; text-align: center; position: absolute; top: -10px; left: -10px; z-index: 9999; }
.pedidos tr.abierto, .pedidos tr.abierto td { background: rgb(255 165 0 / 10%) !important; }
.order .edit-order-detail { background: transparent; border: 0; width: 50px; }
.order .validate-edit-detail.mostrar { display: inline-block; border: 1px; border-color: #999; border-style: outset; padding: 0 5px; background: white; margin-left: 5px; }

/* Ship Voyages */
.viajes tr.iniciado, .viajes tr.iniciado td { background: lightyellow !important; }
.viajes tr.iniciado.finalizado, .viajes tr.iniciado.finalizado td { background: rgba(144,238,144,.3) !important; }
ul#port_type li { display: inline; margin-right: 10px; }
.viajes-todos .leyenda { padding: 15px 0; display: flex; flex-direction: row; align-content: center; align-items: center; }
.viajes-todos .leyenda > span { margin-left: 15px; display: flex; align-content: center; align-items: center; }
.viajes-todos .leyenda > span:first-child { margin-left: 0; }
.viajes-todos .leyenda span.finalizados span { background: rgba(144,238,144,.3); width: 30px; display: inline-block; height: 15px; border: 1px solid #999; margin-right: 5px; }
.viajes-todos .leyenda span.pendientes span { background: lightyellow; width: 30px; display: inline-block; height: 15px; border: 1px solid #999; margin-right: 5px; }
.viajes-todos .leyenda span.iniciados span { background: white; width: 30px; display: inline-block; height: 15px; border: 1px solid #999; margin-right: 5px; }
#modal-intermediate-port .laycan { display: none; }

/* Arrival reports */
table.noon { width: 100%; }
table.arrival > tr > td, table.arrival > tbody > tr > td { border-top: 0; }
table.arrival > tr.borde > td, table.arrival > tbody > tr.borde > td { border-top: 1px solid #ddd; }
table.noon > tbody tr:first-child > td { border-top: 1px solid #ddd; padding-top: 7px; }
table.noon > tbody tr:last-child > td { padding-bottom: 7px; }
.table.arrival td, .table.arrival th { font-size: 13px; }
table.viaje > tr > td, table.viaje > tbody > tr > td { border-top: 0; }
table.viaje > tr.borde > td, table.viaje > tbody > tr.borde > td { border-top: 1px solid #ddd; }
table.results td:nth-child(2) { text-align: right; }

/* Home fletamentos */
.home .vessel { background: #eee; text-align: center; border: 1px dashed #aaa; padding-bottom: 15px; }
.home .vessel hr { border-top: 1px solid #999; }
.home .vessel p { margin: 5px 0; }
.home .equal { display: flex; display: -webkit-flex; flex-wrap: wrap; }
.home .equal .vessel { height: 100%; font-size: .95em; width: 95%; padding: 0 5px 15px 5px; }
.home p.pendiente { position: relative; margin-left: 15px; }
.home p.pendiente a { color: black; }
.home p.pendiente span { background: red; color: white; font-size: .7em; width: 20px; display: inline-block; text-align: center; border-radius: 20px; font-weight: bold; height: 20px; padding-top: 3px; top: -5px; position: absolute; left: -25px; }
.home #map { height: 500px; margin-top: 15px; }
.viajes .vessel h3.inner-title { font-size: 20px; }
.viajes .vessel .viaje-actual { color: brown; font-size: 1.15em; }
.viajes .vessel .proximos-viajes { color: #9d77d0; font-size: 1.15em; }
.viajes .vessel .ultimos-viajes { color: darkgreen; font-size: 1.15em; }
.viajes .vessel .icon { color: #666; }
.viajes .vessel { background: #eee; text-align: center; border: 1px dashed #aaa; padding-bottom: 15px; }
.viajes .equal { display: flex; display: -webkit-flex; flex-wrap: wrap; }
.viajes .equal .vessel { height: 100%; font-size: .95em; width: 95%; padding: 0 5px 15px 5px; }
.viajes .vessel p { margin: 5px 0; }
table.control { width: 100%; border: 1px solid #999; }
table.control table { width: 100%; }
table.control table td { text-align: left; padding-left: 5px; }
table.control col { width: 15% }
table.control col.ancha { width: 25%; }
table.control td { text-align: center; border-right: 1px solid #999; border-top: 1px solid #999; padding: 5px 0; font-weight: 600; }
table.control td a { margin-left: 5px; font-size: 1.5em; color: #bbb; margin-right: 5px; }
table.control td a.active { color: green; }
table.control table tr:first-child td { border-top: 0; }
table.control table td:last-child { border-right: 0; }
table.tank-levels th, table.tank-levels td { text-align: right; }
table.tank-levels th:first-child, table.tank-levels td:first-child { text-align: left; }
.table.tank-levels > tfoot > tr > td, .table.tank-levels > tfoot > tr > th { padding: 8px; }
.voyage-detail #map { height: 500px; }
.voyage-detail .leyenda { padding-top: 15px; font-size: .9em; }
.voyage-detail .leyenda span { margin-right: 15px; }
.voyage-detail .leyenda img { max-width: 23px; max-height: 25px; }
.voyage-detail .go-noon { margin-top: -10px; margin-bottom: 20px; text-align: right; background: lightyellow; padding: 10px; }
.ports #map { height: 500px; }

table.conceptos-verificar-factura td { vertical-align: middle !important; }

/* Home invoices */
.home.invoices .pda { background: #eee; padding: 10px 15px; border-radius: 5px; }

/* modificar turnos */
.input-time { min-width: 80px; width: 100px; }
.input-date { min-width: 110px; width: 120px; }

/* Forms */
.form-group.input-disabled .select2-container--default .select2-selection--single {
  background-color: red !important;
  cursor: not-allowed; /* Opcional: muestra que está deshabilitado */
}


@media (max-width: 992px) { .input-time { min-width: 65px; width: 80px; }
  .input-date { min-width: 110px; width: 120px; }
}
@media (max-width: 650px) { .input-time {min-width: 65px; width: 70x; }
  .input-date { min-width: 100px; width: 110px; }
}

@media (max-width: 400px) { .input-time { width: 65px;}
  .input-date {width: 110px;}
}
@media all and ( max-width: 767px ) {
    .logo img { max-width: 150px; }
    .page-top { position: absolute; background: transparent; width: auto; right: 40px; }
    /* .page-header.navbar .page-logo img { width: 130px; } */
    /* .page-header.navbar .page-actions { position: absolute; right: -55px; bottom: -10px; z-index: 99; } */
    /* .page-header.navbar .page-actions button { padding: 2px 5px !important; } */
    .trabajando { display: none; }
    .page-header.navbar .page-logo { display:none !important }
    /* .top-menu .fichar { display: none; } */
    .page-header.navbar .page-top { position: absolute; width: auto; }
    .workflow-states .wrapper { width: 100% !important; margin-bottom: 30px; }
    .portlet.light { padding: 12px 10px 15px; }
}
@media (min-width:767px) and (max-width:991px) {
    .page-header.navbar .page-logo {
        max-width: 150px; 
    }
    .page-header.navbar .page-logo img {
        max-height: 60px;
        max-width: 135px;
        margin-top: 19px;
    }
}
@media (max-width:720px) {
    .remolques .table-scrollable { overflow-x: scroll; }
    /* .form-control { */
    /*     width: auto !important; */
    /* } */
}
@media (max-width:600px) {
    .caption {
        text-align: center;
    }
}
@media (max-width:550px) {
    .worker-vacations .leyenda{
        display: flex !important;
        flex-direction: column !important;
        align-items: unset !important;
    }
}
@media (max-width:500px) {
    .edit-invoice .botones { position: initial !important; right: 40px; }
    .mt-element-step .step-line .mt-step-title { font-size: 1em;}
    .mt-element-step .step-line .mt-step-number { height: 1.5em; width: 1.5em; }
    .mt-element-step .step-line .mt-step-col { padding: 12px 0; }
}
@media (max-width:400px) {
    .position-responsive { position: relative !important; margin-top: 1em; }
}
.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
  padding: 7px;
  line-height: 1.42857143;
  vertical-align: center;
  border-top: 1px solid #eeeded;
}
#survey-awnser-form > .survey-cat > table > tfoot > tr > td {
  padding: 20px 15px 5px 15px;
}
#survey-awnser-form > .survey-cat > table > tbody > tr > td:first-child {
  padding: 10px 0px 10px 15px;
}
table.resultados span.loading:after { font-family: 'FontAwesome'; content: '\f105'; margin: 0 5px; }
table.resultados span.separador:after { content: ' · '; }
table.resultados span.separador:last-child:after { content: ''; }
table th.derecha, table td.derecha { text-align: right; }
table.resultados tfoot td { padding-left: 10px !important; }
table.bunker tfoot td { padding-left: 10px !important; }
.resultados-viajes .mostrar-detalles span { margin-right: 15px; white-space: nowrap; }
.resultados-viajes ul#report_type { list-style: none; padding: 0; }
.resultados-viajes ul#report_type li { display: inline; margin-right: 15px; }
.resultados-viajes .resultados { padding-top: 20px; }
.resultados-viajes .resultados .dataframe thead tr { color: white; background: #21304e; }
.resultados-viajes .resultados .dataframe thead tr:first-child th { text-align: right; }
.resultados-viajes .resultados .dataframe td { text-align: right; }
.resultados-viajes .resultados .dataframe th { font-weight: 600; }
.resultados-viajes .bar-grouped > div { min-height: 500px; }
.resultados-viajes .bar > div { min-height: 250px; }
.resultados-viajes .tarta > div { min-height: 250px; }
.resultados-viajes #evolucion { height: 500px; }

/* Statistics */
.estadisticas .item { margin-top: 10px; float: left; width: 100%; }
.estadisticas span.tipo { float: left; }
.estadisticas .valor { float: left; }
#graph-voyage-technical-details { height: 400px; }

/* Proveedor */
.proveedor .contactos { float: left; width: 100%; margin: 10px 0; }
/* .proveedor .relaciones { float: left; width: 100%; margin: 10px 0; } */
.proveedor #supplier_type { list-style: none; padding: 0; }
.proveedor #supplier_type li { display: inline-block; margin-right: 15px; }
.grey-container-view { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center;
  gap: 2.5em; /* Separación automática entre elementos */
  position: relative; 
  width: 80%; 
  margin: 1.5em auto; 
  background-color: #f7f5f5; 
  border-radius: 10px;
  font-size: 1.1em;
  padding: 2.7em 0.5em 0.8em 0.5em;
}

.grey-container-view > div {
  font-weight: 400;
}
.grey-container-view b {
  font-weight: 600;
}
@media (max-width: 768px) {
  .grey-container-view {
    flex-direction: column;
    align-items: flex-start;
    width: 95%;
    padding: 1.5em;
    gap: 0.5em;
  }
}
.edit-icon {
  position: absolute;
  top: 0;
  right: 0;
  margin: 15px; 
}
.action-link-supplier { margin:1em; }
#separation-line { color: #337ab7}
/* Remolques */
#bill_to li { display: inline-block; margin-right: 15px; }
#select2-shipowner-results li { white-space: pre-line; }
.crew-table-cell { 
  height: 33%;
  margin: 2px 2em;
}
.tug-crew-table-row { 
  display: flex; 
  flex-direction: row; 
  border: 1px solid #7d7d7d;
}
.tug-crew-table-column { 
  width: 20%; 
  /* height: 12%;  */
}
.tug-name-separation {
  padding: 6px 0;
}
.tug-crew-table-headers {
  width: 20%; 
  height: 12%;
  padding: 1em 0; 
  text-align: center;
  font-weight: bold;
}
.tug-align-middle { 
  text-align: center; 
  /* border-right: 1px solid #7d7d7d; */
  margin:auto 0; 
}
.crew-table-border-right {
  width: 35%; 
  border-right: 1px solid #7d7d7d;
}
.crew-table-border-left {
  border-left: 1px solid #7d7d7d;
}
.tug-crew-name {
  margin:0;
}
.midle{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #dd9b9b;
}
.crew-code{
  font-size: large;
}
.tachado {
  text-decoration: line-through;
}
#edit-incident-submit {
  display: none; /* Oculta visualmente el botón de submit */
}
.tug-code-color-1 { background-color: #649ee0;}
.tug-code-color-2 { background-color: #d6b64cdc ;}
.tug-code-color-3 { background-color: #d8ab6c;}
.tug-code-color-4 { background-color: #d1be8a;}
.tug-code-color-5 { background-color: #738faf;}
.tug-code-color-6 { background-color: #88dbfc;}
.tug-code-color-7 { background-color: #80b9d4;}
.tug-code-color-8 { background-color: #f5c683;}
.column-center { text-align: center;}
#tug-crews-modal-title { display: inline; }
#show-real-btn,
#show-theorical-btn {
  margin: 0 20px;
}
#block1 { background-color: #649ee0; margin: 0 20px; padding:10px 20px; border: none; }
#block2 { background-color: #d8ab6c; margin: 0 20px; padding:10px 20px; border: none; }
.modificated-field { border: 2px solid red; }

/* Incidencias Remolques */
.radio-field-incident {display:flex; align-items: center;}
.radio-field-incident input { margin:  0.7em 1.2em !important; }
.radio-field-incident label { margin: 0; align-self: center; padding-top: 2px;}
.radio-field-incident input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 13px; /* Ancho del checkbox */
  height: 13px; /* Alto del checkbox */
  border: 2px solid #ccc;
  border-radius: 50%; /* Borde redondeado para simular un círculo */
  outline: none;
  flex-shrink: 0;
  position: relative;
}

.radio-field-incident input[type="checkbox"]:checked {
  background-color: white; /* Color de fondo cuando está marcado */
  border-color: #007bff; /* Color del borde cuando está marcado */
  border-width: 1px;
}
.radio-field-incident input[type="checkbox"]:checked::after {
  content: '';
  width: 7.5px; /* Tamaño del círculo interior */
  height: 7.5px; /* Tamaño del círculo interior */
  background-color: #007bff; /* Color del círculo interior */
  border-radius: 50%; /* Borde redondeado para el círculo interior */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btn-extra-sm {
  padding: 5px 5px !important;
  font-size: 11px !important;
}
#days_counter {
  border: 1px dashed #21304e;
  padding: 10px;
  width: 30%;
  background: #eee;
  margin: 20px auto;
}
#days_generated {
  margin:auto;
  width: 70%;
  font-weight: bold;
  text-align: center;
}
#days_generated span{
  font-size: 2em;
  font-weight: bold;
}
caption.title {
  font-size: 1.2em;
  font-weight: bold;
}
.fw-600 { font-weight: 600; }
.pay-confirm { display:flex; justify-content: center; }
.subtitle-butom {display: flex; flex-direction: row; justify-content: space-between; }
.other-position {
  font-style: italic;
  color: #FFA500; 
}
#rank-diff-modal p{
  margin: 5px;
}
.red-text {color: red;}
.flex-container-title-btn {
  display: flex  !important;
  align-items: center;
  justify-content: space-between;
  padding: 0  !important;
  position: relative;
}
.caption-content-to-pay {
  display: flex;
  align-items: center;
}
.form-spacing {
  margin-right: 20px; /* Ajusta el valor según tus necesidades */
}
.ml-5 { margin-left: 5px !important; }
.ml-10 { margin-left: 10px !important; }
.ml-20 { margin-left: 20px !important; }
.ml-auto { margin-left: 1em  !important; }
.cobrar-difrutar .leyenda span.cobrados span { background: rgba(238, 236, 144, 0.226); width: 30px; display: inline-block; height: 15px; border: 1px solid #999; margin-right: 5px; }
.cobrar-difrutar .leyenda span.disfrutados span { background: rgb(255, 230, 224); width: 30px; display: inline-block; height: 15px; border: 1px solid #999; margin-right: 5px; }
.cobrar-difrutar tr.cobrado, .cobrar-difrutar tr.cobrado td { background: rgba(238, 236, 144, 0.226) !important; }
.cobrar-difrutar tr.disfrutado, .cobrar-difrutar tr.disfrutado td { background: rgb(255, 230, 224) !important; }

/* Personal */
.worker-vacations .leyenda { padding: 15px 0; display: flex; flex-direction: row; align-content: center; align-items: center; }
.worker-vacations .leyenda > span { margin-left: 15px; display: flex; align-content: center; align-items: center; }
.worker-vacations .leyenda > span:first-child { margin-left: 0; }
.worker-vacations .leyenda span.aprobadas span { background: rgba(144,238,144,.3); width: 30px; display: inline-block; height: 15px; border: 1px solid #999; margin-right: 5px; }
.worker-vacations .leyenda span.pendientes span { background: lightyellow; width: 30px; display: inline-block; height: 15px; border: 1px solid #999; margin-right: 5px; }
.worker-vacations .leyenda span.solicitadas span { background: white; width: 30px; display: inline-block; height: 15px; border: 1px solid #999; margin-right: 5px; }
.worker-vacations tr.aprobada, .worker-vacations tr.aprobada td { background: rgba(144,238,144,.3) !important; }
.worker-vacations tr.pendiente, .worker-vacations tr.pendiente td { background: lightyellow !important; }

.leyenda { padding: 15px 0; display: flex; flex-direction: row; align-content: center; align-items: center; }
.leyenda > span { margin-left: 15px; display: flex; align-content: center; align-items: center; }
.leyenda > span:first-child { margin-left: 0; }
.leyenda span.aprobadas span { background: rgba(144,238,144,.3); width: 30px; display: inline-block; height: 15px; border: 1px solid #999; margin-right: 5px; }
.leyenda span.pendientes span { background: lightyellow; width: 30px; display: inline-block; height: 15px; border: 1px solid #999; margin-right: 5px; }
.leyenda span.solicitadas span { background: white; width: 30px; display: inline-block; height: 15px; border: 1px solid #999; margin-right: 5px; }
.leyenda span.rechazadas span { background:rgb(253, 175, 175); width: 30px; display: inline-block; height: 15px; border: 1px solid #999; margin-right: 5px; }
tr.aprobada, tr.aprobada td { background: rgba(144,238,144,.3) !important; }
tr.pendiente, tr.pendiente td { background: lightyellow !important; }
tr.rechazada, tr.rechazada td { background: rgb(252, 181, 181) !important; }

/* Turnos remolques */
#tug-shifts td { text-align: center; padding-left: 20px; padding-right: 20px; }
#tug-shifts thead { border-bottom: 2px solid #555; }
#tug-shifts th.small { font-size: .9em; font-weight: lighter; border-left: 1px solid #999; border-top: 1px solid #999; padding-left: 2px; border-bottom: 1px solid #999; background: #eee; }
td.fixed { position: absolute !important; background: #fff; width: 120px; left: 30px; }
.tug-shifts-container { overflow: scroll; margin: 30px 0; margin-left: 120px; }
.remolques.calendario table.month { width: 500px; }
.remolques.calendario table.month th { text-align: center; }
.remolques.calendario table.month td { text-align: center; }
.remolques.calendario table.month td .turno { display: block; font-weight: bold; position: relative; padding: 10px; }
.remolques.calendario table.month td .turno .dia { position: absolute; top: 5px; right: 5px; display: block; font-weight: lighter; font-size: .8em;}
.remolques.calendario table.month th.month { font-size: 1.25em; color: #21304e; padding: 10px; }

.labour-information .number { border: 1px dashed #21304e; padding: 10px; width: 90%; background: #eee; }
.labour-information .vacaciones span { font-size: 1.5em; font-weight: 900; }
.labour-information tr.days td { font-weight: bold; font-size: 1.1em; }

/* Monitorizacion buques */
.monitorizacion table { table-layout: fixed; border-collapse: collapse; }
.monitorizacion table tfoot td { background: #eee; }
.monitorizacion .motores { border: 1px solid #ccc; border-radius: 5px; padding: 15px; margin-top: 25px; margin-bottom: 15px; position: relative; }
.monitorizacion .motores h4 { position: absolute; top: -20px; background: white; padding: 0 10px; font-size: 1.1em; font-weight: bold; }
.monitorizacion .navegacion { border: 1px solid #ccc; border-radius: 5px; padding: 15px; margin-top: 25px; margin-bottom: 15px; position: relative; }
.monitorizacion .navegacion h4 { position: absolute; top: -20px; background: white; padding: 0 10px; font-size: 1.1em; font-weight: bold; }
.monitorizacion .fields { display: flex; flex-wrap: wrap; }
.monitorizacion .fields .datum { padding-right: 20px; }
.monitorizacion table .navigation { background: lightyellow; }

#calendario .fc-toolbar h2 { font-size: 1.3em; font-weight: bold; color: #21304e; }
#calendario .fc-day-grid-event .fc-time { display: none; }
.fc-body .fc-sat, .fc-body .fc-sun { background: rgba(255, 0, 0, .3); }
p.solicitudes-pendientes { line-height: 1.8em; border-bottom: 1px solid #ddd; padding-bottom: 15px; padding-top: 5px; }
p.solicitudes-pendientes:first-child { border-top: 1px solid #ddd; }
.label-class { font-weight: 600; font-size: large; }
.separate-radio input[type=checkbox], input[type=radio] { margin: 4px 1em 0;}
.bold-option { font-weight: bold; }
.required { border: 1px solid red; }
.checkbox { margin: 1em 0; padding-left: 2em; display: flex; align-items: center;}
/* .delivery-item-select .row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    width: 100%;
} */
.delivery-item-select { margin: 1em 0; padding-left: 2em; display: flex; align-items: center;}
.delivery-item-select .row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    width: 100%;
}
.delivery-item-checkbox {
  display: flex; align-items: center; justify-content: flex-start; height: 100%;
}
.mostrar-alerta { padding: 2px 4px 0px;}
.icon-1-red { font-size:1em; color:red; }
/*  Survey */
.button-select-questions {
    padding: 0 10px;
    margin-left: 0.3em;
    border-radius: 7px;
    font-weight: 501;
    color: #3d3d3dc6;
    font-size: medium;
    cursor: pointer;
    position: relative;
    transition: box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
  }
  .button-select-questions.yellow {
    background-color: #f2c31aa3;
    border: #f2c21a;
  }
  .button-select-questions.blue {
    background-color: #3598dc66;
    border: #3598dc;
  }
  .button-select-questions.yellow:hover {
    background-color: #f2c31adf;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .18), 0 0 10px  #f2c31abd;
  }
  .button-select-questions.blue:hover {
    background-color: #3599dca8;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .18), 0 0 10px #3599dc82;
  }
  button.button-select-questions:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: -1;
  }
  /* .survey-table {
    width: 100%;
  } */
  .survey-table th:first-child,
  .survey-table td:first-child {
    width: 60%;
    padding: 5px 0 5px 15px;
  }
  .survey-table th:nth-child(2),
  .survey-table td:nth-child(2) {
    width: 10%;
  }
  .survey-table th:nth-child(3),
  .survey-table td:nth-child(3) {
    width: 10%;
  }
  .survey-table th:nth-child(4),
  .survey-table td:nth-child(4) {
    width: 10%;
  }
  .survey-table th:nth-child(5),
  .survey-table td:nth-child(5) {
    width: 10%;
  }
  table.survey-table th{
    vertical-align: middle;
    text-align: center;
}
table.survey-table td.input-radio {
      vertical-align: middle;
      text-align: center;
    }
table.survey-table {
    box-shadow: 9px 1px 3px rgba(0, 0, 0, 0.01), 1px 1px 2px rgba(0, 0, 0, 0.04), 0 0 8px rgba(0, 0, 0, 0.05);
    margin: 1em 0 2em 0;
    border-radius: 5px;
    }
.suggestions {
    border-color: #d1d1d1;
    width: 100%;
}
a.info-icon{
    color: #337ab7;
}
.page-header-survey.navbar-survey { background: #21304e; }
.page-header-survey.navbar-survey { height: 90px; min-height: 90px; }
.page-header-survey.navbar-survey .page-logo { padding-top: 5px; width: 275px; }
.page-header-survey.navbar-survey .page-logo img { max-height: 60px; max-width: 195px; margin-top: 5px; }
.page-header-survey.navbar-survey .page-logo > a { color: white; font-family: 'Audiowide'; font-size: 30px; line-height: 22px; }
.page-header-survey.navbar-survey .page-logo > a > span { display: block; font-size: 15px; }
.page-sidebar-closed.page-sidebar-closed-hide-logo .page-header-survey.navbar-survey .page-logo { width: 265px; height: 75px; padding-left: 20px; padding-right: 20px; padding-top: 15px; margin-left: 0; margin-right: 0; }
.mb { margin: 2px;}
.survey-attr{ margin:12px 0; }
.percentage-responses { background-color: #eeebebaa;}
.survey-top{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.05);
  margin: 1em 0 2em 0;
  border-radius: 5px;
  position: sticky;
  top: 80px;
  z-index: 999;
  background-color: white;
}
/* Media query para pantallas de 991px o menos */
@media (max-width: 991px) {
  .crew-report-top {
    top: 0px; /* Cambia el top a 0 cuando el ancho de la pantalla es menor o igual a 991px */
  }
}
/* Media query adicional para pantallas menores de 767px */
@media (max-width: 767px) {
  .crew-report-top {
    top: 0px;
    position: sticky !important; /* Vuelve a definir la propiedad para forzar el sticky */
  }
}
.questions-body {
  margin-top: 5em;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
  overflow-y: auto;
}
.survey-skill-title{
  display: flex;
  flex-direction: row;
}
.surveys_space_between{ width: 100%; display: flex; justify-content: space-between;}
#firmListContainer{padding: 1em;}
.question-list-element { display:flex; flex-direction: row; justify-content: space-between}
.question-text {display:inline; margin: 10px 0;}
.question-actions{width: 5%; display: flex; justify-content: space-between; align-items: center;}
.survey-type{ display:flex }
#survey-type-explanation {position: relative; top: 32px; left: 5px;}
/* Survey Report Information */
/* .chart-container{ margin: 2em 3em; width: 100%;} */
/* .question-chart-div {display: flex; flex-direction: column; align-items: center;} */
.chart-container {  max-width: 800px; margin-bottom: 30px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; align-items: center;}
.question-header{ font-size: 1.2em;}
.comments-container{ font-size: 1.2em;}
#edit-survey-button{ display: flex;justify-content: center; }
#modal-assignment-buttons{ display: flex; justify-content: space-between; margin-top: 2.3em; }
#assignment-state { margin-top: 1.5em; text-align: center; }
#assignment-state #estado-text {  font-weight: bold; }
.report-question {background-color: #eeebebaa; width:100%; display:flex; justify-content: center; border-radius: 2px; }

.separate-radio input[type=checkbox], input[type=radio] {
  margin: 0;
}
.page-survey-container {
  display: flex;
  justify-content: center;
}
.navbar-title{ color:white; font-size:2.5em; margin:0;  }
.survey-navbar-btn{margin-top: 25px; margin-right: 50px; }
.survey-page-header-inner{ display:flex; justify-content: space-between; align-content: center; padding:1em; }
.survey-guide{
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 9999;
  width: fit-content;
}
.employee { width: 100%; }
.input-name{ 
  margin-right: 5px !important;
}
.select-buttons { 
  display: flex;
  margin-bottom: 1.2em;
}
.error-message { margin-left: 3em; }
/* Survey nabvar responsive */
@media all and ( max-width: 767px ) {
  .logo img { max-width: 150px; }
  .page-header-survey.navbar-survey .page-logo { display:none !important }
  .page-header-survey.navbar-survey .page-top { position: absolute; width: auto; }
  .survey-page-header-inner { justify-content: space-around;}
  .survey-attr{ margin:5px 0} 
}
@media (max-width:1300px) {
  .navbar-title h4 { display: none }
  .navbar-title { margin: 0.5em }
}
@media (min-width:767px) and (max-width:991px) {
  .page-header-survey.navbar-survey .page-logo {
      max-width: 150px;
    }
  .page-header-survey.navbar-survey .page-logo img {
    max-height: 60px;
    max-width: 135px;
    margin-top: 19px;
  }
  .survey-attr{ margin:5px 0} 
}
@media (max-width:810px) {
  .survey-skill-title{
    display: flex;
    flex-direction: column;
  }
  .survey-skill-title h4 { margin: 0;}
}
@media (max-width:610px) {
  .navbar-title { font-size: 2em;}
  .survey-navbar-btn { margin-right: 0;}
  .survey-description { display: none;}
}
/* survey_list responsive */
@media (max-width:1111px){
  .survey-list > thead > tr > th:nth-child(4), .survey-list > tbody > tr > td:nth-child(4) {
    display: none;
  }
}
/* assign_list responsive */
@media (max-width:1500px){
  .assign-list > thead > tr > th:nth-child(2), .assign-list > tbody > tr > td:nth-child(2),
  .assign-list > thead > tr > th:nth-child(3), .assign-list > tbody > tr > td:nth-child(3) {
    display: none;
  }
}

.custom-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
}
.custom-subcell {
  width: 30%;
  text-align: center;
}
#buttons_space_between{ display:flex; justify-content:space-between}
 a.tooltips i.fa-info-circle{
    color:#337ab7;
}
.icon-down {
  padding-top: 5px;
}

@media (max-width: 768px) {
  /* Cambiar "Crear nueva" a "Nueva" */
  .text-new::before {
      content: "Nueva";
      display: block;
  }
  .text-new span {
      display: none;
  }

  /* Cambiar "Ver pendientes" a "Pendientes" */
  .text-pending::before {
      content: "Pendientes";
      display: block;
  }
  .text-pending span {
      display: none;
  }

  /* Cambiar "Ver histórico" a "Histórico" */
  .text-historic::before {
      content: "Histórico";
      display: block;
  }
  .text-historic span {
      display: none;
  }
  /* Cambiar "Ver todas" a "Todas" */
  .text-show-all::before{
      content: "Todas";
      display: block;
  }
  .text-show-all span {
      display: none;
  }

  /* Cambiar "Filtros avanzados" a "Filtros" */
  .text-filters::before {
      content: "Filtros";
      display: block;
  }
  .text-filters span {
      display: none;
  }

  /* Cambiar "Filtros avanzados" a "Filtros" */
  .text-delete-filters::before {
      content: "Borra Filt.";
      display: block;
  }
  .text-delete-filters span {
      display: none;
  }
  /* Cambiar "Los filtros se aplicarán sobre todas las maniobras" a "Filtros sobre todas las maniobras" */
  .informative-note::before {
      content: "* Filtros sobre todas las maniobras";
      font-size:small;
      display: block;
  }
  .informative-note span {
      display: none;
  }

  /* Cambiar "(10 últimos días)" a "(10 días)" */
  .text-days::before {
      content: "(10 días) *";
      display: inline;
      text-transform: lowercase;
  }
  .text-days span {
      display: none;
  }
}
@media (max-width: 450px) {
  /* Cambiar "Pendientes" a "Pend." para pantallas menores a 450px */
  .text-pending::before {
      content: "Pend.";
  }
}

/* Tug crew list */
.crew-table {
  width: 100%;
  max-width: fit-content;
  align-self: center;
  border-collapse: collapse;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}
.crew-table th,
.crew-table td {
  border: 1px solid #000;
  padding: 8px;
  text-align: left;
  vertical-align: top;
}
.crew-table th {
  background-color: #f2f2f2;
}
.crew-table td.header {
  font-weight: bold;
  font-size: 1.2em;
}
.signature-section {
  padding-top: 30px;
}
.flex-column {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.sp-around {justify-content: space-around;}
.sp-btw {justify-content: space-between;}

.flex-row-centered {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.flex-row-align-center {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.img-crew-list{
  display: flex;
  flex-direction: row;
}
.img-crew-list img{
  width: 100px; 
  height: auto; 
  margin-right: 10px;
}
.text-center{
  text-align: center;
}
.mt-40{
  margin:  40px 0 0 0;
}
.mt-20{
  margin:  20px 0 0 0;
}
.mt-5{
  margin-top:  5px;
}
.mb-5 {
  margin-bottom: 5px;
}
.mb-15 {
  margin-bottom: 15px;
}
.font-lig {
  font-weight: lighter;
}
.col-30{
  width: 30px;
}
.enrollment-list {
  display: flex; 
  flex-wrap: wrap;
  margin: 0;
  list-style: none;
}
.crew-report-top {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 0, 0, 0.05);
  margin: -10px 0 2em 0;
  padding: 1em;
  border-radius: 5px;
  top: 80px;
  background-color: white;
}
.content-center {
  display: flex;
  justify-content: center;
}
@media (max-width: 650px) {
    /* Selecciona el contenedor del número de elementos ("Records") y su label */
    div.dataTables_wrapper div.dataTables_filter label {
        display: flex !important;
        flex-direction: column !important; /* Coloca el label arriba del selector */
    }
    /* Ajusta el cuadro de búsqueda y su label */
    div.dataTables_wrapper div.dataTables_length label {
        display: flex;
        flex-direction: column-reverse ; /* Coloca el label arriba del cuadro de búsqueda */
    }
    /* Mantiene en la misma línea ambos cuadros de busqueda sin que pasen a disposición column */
    #grid_wrapper > div:nth-child(1) {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px; /* Espacio entre los cuadros */
    }
    /* Mantiene en la misma línea ambos cuadros de busqueda sin que pasen a disposición column */
    .dataTables_wrapper  > div:nth-child(1) {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px; /* Espacio entre los cuadros */
    }
} 

/* Equipments delivery */
.delivery-info p {
  margin: 0;
  font-weight: 500;
}
.delivery-info span {
  font-weight: bold;
}
.status-x { color: red; font-weight: bold; }