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; }

/* Custom margins */
.margin-top-0 { margin-top: 0px; }
.margin-bottom-0 { margin-bottom: 0px; }
.margin-top-5 { margin-top: 5px; }
.margin-top-10 { margin-top: 10px; }
.margin-top-15 { margin-top: 15px; }
.margin-top-25 { margin-top: 25px; }
.margin-top-30 { margin-top: 30px; }

/* 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; }
.portlet.light>.portlet-title>.caption>.caption-subject { margin-right: 25px; }

/* 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; }

/* 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: 0; left: auto; z-index: 9999; }
table.dataTable thead .sorting_asc { background-image: none !important; }
table.dataTable thead .sorting_desc { background-image: none !important; }
.oculto { display: none; }

/* Alerts */
.alert { margin-left: 15px; width: calc( 100% - 30px); }

/* 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; block; 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; block; 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; block; 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; block; 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: 5px; }
td.iconos a.conformar-express { color: #ccc; }
td.iconos i.duplicados:hover { cursor: pointer; }
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; }

.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; }

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

@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-actions { position: absolute; right: 45px; }
    .page-header.navbar .page-top { position: absolute; width: auto; }
    .workflow-states .wrapper { width: 100% !important; margin-bottom: 30px; }
}

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; }

/* 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; }

.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; }

#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; }