body { font-family: 'Asap', sans-serif; background: white; }
body.page-md { background: white; }
td p { margin: 0; }

/* Custom margins */
.margin-top-5 { margin-top: 5px; }
.margin-top-10 { margin-top: 10px; }
.margin-top-15 { margin-top: 15px; }
.margin-top-20 { margin-top: 20px; }
.margin-top-25 { margin-top: 25px; }
.margin-top-30 { margin-top: 30px; }
.green { color: #0097a9; }

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

h3.inner-title { font-size: 15px; font-weight: 600; text-transform: uppercase; color: #0097a9; margin: 15px 0; }
.oculto { display: none; }

/* Header */
.page-header.navbar { height: 85px; min-height: 85px; background: white; border-bottom: 2px solid #0097a9; }
.page-header.navbar .page-logo { padding-top: 5px; width: 275px; }
.page-header.navbar .page-logo img { max-height: 90px; max-width: 230px; }
.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: #0097a9; border-color: #0097a9; }
.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: #0097a9; border-color: #0097a9; }
.btn.red-haze:not(.btn-outline).focus, .btn.red-haze:not(.btn-outline):focus { background-color: #0097a9; border-color: #0097a9; }
.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: #0097a9; border-color: #0097a9; }
.page-header.navbar .menu-toggler.sidebar-toggler { position: absolute; top: 30px; left: 235px; margin-top: 0; }
.portlet.light>.portlet-title>.caption>i.fas { font-weight: 900; }
.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; }
.page-sidebar .page-sidebar-menu li > a > .arrow::before, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu li > a > .arrow::before { font-family: "Font Awesome 6 Free"; }
.page-sidebar .page-sidebar-menu>li>a>i, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li>a>i { font-weight: 600; }
.page-header.navbar .top-menu .navbar-nav>li.dropdown .dropdown-toggle:hover { background-color: white; }
.page-header.navbar .top-menu .navbar-nav>li.dropdown.open .dropdown-toggle { background-color: white; }
.page-header.navbar .top-menu .navbar-nav>li.dropdown-user .dropdown-toggle>.username { color: #b7bf10; font-size: 20px; }
.page-header.navbar .top-menu .navbar-nav>li.dropdown-user .dropdown-toggle>img { margin-top: -20px; height: 70px; }
.page-header.navbar .top-menu .navbar-nav>li.dropdown-user .dropdown-toggle { padding: 25px 10px 0 18px; }
.page-header.navbar .top-menu .navbar-nav>li.dropdown .dropdown-menu:before { display: none !important; }
.page-header.navbar .top-menu .navbar-nav>li.dropdown .dropdown-menu:after { display: none !important; }
.page-header.navbar .top-menu .navbar-nav>li.dropdown-user>.dropdown-menu { right: 100px; background: white; }
.page-header.navbar .top-menu .navbar-nav>li.dropdown-dark .dropdown-menu .dropdown-menu-list>li a:hover, .page-header.navbar .top-menu .navbar-nav>li.dropdown-dark .dropdown-menu.dropdown-menu-default>li a:hover { background: white; }
.page-header.navbar .top-menu .navbar-nav>li.dropdown-dark .dropdown-menu.dropdown-menu-default>li a { color: #0097a9; font-weight: bold; font-size: 16px; }

/* Sidebar */
.page-sidebar .page-sidebar-menu>li>a>i, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li>a>i { width: 35px; }
.page-sidebar .page-sidebar-menu>li>a>i, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li>a>i { color: #b7bf10; font-size: 16px; }
.page-sidebar .page-sidebar-menu>li>a>.title, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu>li>a>.title { color: #0097a9; font-weight: lighter; font-size: 16px; }
.page-md .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover.navbar-collapse, .page-md .page-sidebar.navbar-collapse { box-shadow: none; }
.page-sidebar .page-sidebar-menu .sub-menu>li>a>i, .page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu .sub-menu>li>a>i { color: #b7bf10; }

/* Breadcrumb */
.breadcrumb { clear: both; }

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

/* Datatables */
.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: #0097a9; background-color: #0097a9; }
.dataTables_paginate .pagination { float: right; }
.dataTables_filter { float: right; }
.dataTables_filter input { margin-left: 5px; }
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; }
tr.menosdestacado { background: #eede03; }
tr.menosdestacado > td { background: #eede03 !important; }
tr.semidestacado { background: #cccc88; }
tr.semidestacado > td { background: #cccc88 !important; }
tr.destacado { background: orange; }
tr.destacado > td { background: orange !important; }
tr.draft { background: #ededed; }
tr.draft > td { background: #ededed !important; }
tr.guppy-green { background: #b5d815; }
tr.guppy-green > td { background: #b5d815 !important; }
table.dataTable tr.destacado td.sorting_1, table.dataTable tr.destacado td.sorting_2, table.dataTable tr.destacado td.sorting_3, table.dataTable tr.destacado th.sorting_1, table.dataTable tr.destacado th.sorting_2, table.dataTable tr.destacado th.sorting_3 { background: orange !important; }
td.actions { text-align: right; white-space: nowrap; }
td.nowrap { white-space: nowrap; }
td.derecha, th.derecha { text-align: right; }
td.actions a, td .actions a { margin-right: 5px; }
div.incident-payment-actions { text-align: right; white-space: nowrap; }
div.incident-payment-actions a { margin-right: 5px; }
td span.incidencias { position: absolute; top: 0; left: -7px; background: red; color: white; width: 15px; text-align: center; border-radius: 10px; font-size: .8em; }
.additional_notifications_num { position: absolute; top: 0; right: 0px; background: #b5d815; color: white; width: 15px; text-align: center; border-radius: 10px; font-size: .8em; }
#grid-ajax tbody tr td:last-child { text-align: right; white-space: nowrap; }
#grid-ajax tbody tr td:last-child a { margin-right: 5px; }
a.cobrado { color: #ccc; }
    
/* Rates */
#rates .form-control[readonly] { background: transparent; border: 0; }

/* Points of Interest and other maps */
#points-of-interest #map { height: 600px; }
#vehicles-map #map { height: 600px; }
#vehicles-map .leyenda { padding: 15px 0; }
#vehicles-map .leyenda ul { list-style-type: none; padding: 0; }
#vehicles-map .leyenda ul li { display: inline; margin-right: 15px; }
#vehicles-map .info-point-of-interest-map h3 { float: left; margin: 0 20px 10px 0; }
#vehicles-map .info-point-of-interest-block h3 { font-size: 17px; margin: 0 0 15px 0; }
#vehicles-map .info-point-of-interest-map span.edit { float: right; font-size: 1.4em; margin-right: 10px; }
#vehicles-map .info-point-of-interest-map span.request { float: right; font-size: 1.4em; margin-right: 10px; }
#vehicles-map .info-point-of-interest-map p { clear: both; }
#vehicles-map .info-point-of-interest-block p { margin-bottom: 5px; margin-top: 0; }
#points-of-interest .info-point-of-interest-map h3 { float: left; margin: 0 20px 10px 0; }
#points-of-interest .info-point-of-interest-map span.edit { float: right; font-size: 1.4em; margin-right: 10px; }
#points-of-interest .info-point-of-interest-map p { clear: both; }
#point-of-interest #map { height: 450px; }
#vehicles-map .info-vehicle { min-width: 150px; }
#vehicles-map .info-vehicle h3 { float: left; margin: 0 20px 10px 0; font-size: 1.3em; font-weight: bold; }
#vehicles-map .info-vehicle p { clear: both; margin: 10px 0; }
#area #map { height: 450px; }
#rental_incentives #map { height: 600px; margin-bottom: 30px; }
#rental_incentive #map { height: 450px; }
#guppy-and-radar-requests-map #map { height: 600px; }
/* Vehicles */
#vehicle #map { height: 450px; }
#firm_vehicle #map { height: 450px; }
/* Available areas */
#available-areas #map { height: 600px; }
/* Rentals */
#rental #map { height: 450px; }
/* Firm home */
#map-firm { height: 600px; margin-bottom: 20px; }
#rental .invoice { float: right; font-size: 1.2em; margin-right: 5px; }
#rental .data { float: right; font-size: 1.2em; margin-right: 5px; }
#trip-without-rental #map { height: 450px; }
#trip-without-rental .data { float: right; font-size: 1.2em; margin-right: 5px; }
/* Search vehicle map */
#vehicles-search #map { height: 450px; }
#vehicles-search .info-vehicle { min-width: 150px; }
#vehicles-search .info-vehicle h3 { float: left; margin: 0 20px 10px 0; font-size: 1.3em; font-weight: bold; }
#vehicles-search .info-vehicle p { clear: both; margin: 10px 0; }

/* Invoices */
.export-selected-invoices { float: right; margin-top: 5px; font-size: 2em; }

/* User Documents */
#user-documents .document .ver-ficheros a span { text-transform: capitalize; font-size: .8em; margin-left: 5px; }

/* Vehicle status */
#vehicle-status .vehicle .pieza:hover { cursor: pointer; }
#vehicle-status svg { width: 100%; }
#vehicle-status .fotos { width: 50%; text-align: right; }
#vehicle-status .fotos input.fecha { max-width: 180px; display: inline-block; }
#vehicle-status .fotos .btn { margin-top: -5px; }
#vehicle-status .modal-body .penalty-image { float: left; width: 25%; height: 225px; text-align: center; padding: 10px; border: 2px solid white; }
#vehicle-status .modal-body .penalty-image .image { padding: 5px; margin-bottom: 3px; }
#vehicle-status .modal-body .penalty-image span { display: block; }
#vehicle-status .modal-body .penalty-image img { max-height: 150px; margin: 0 auto; }
#vehicle-status .selected-images { float: left; width: 100%; }
#vehicle-status .selected-images::after {   content: ""; clear: both; display: table; }
#vehicle-status .selected-images .image { max-width: 75px; float: left; margin-right: 10px; margin-top: 20px; }

/* Users */
#users span.role { background: #ddd; padding: 2px 15px; border-radius: 10px; margin-right: 5px; white-space: nowrap; }
#users span.role:last-child { margin-right: 0; }
#users td.balance span:after { content: ' / '; }
#users td.balance span:last-child:after { content: ''; }
#user-shifts #shift_name { list-style-type: none; padding-left: 0; }
#user-shifts #shift_name li { display: inline-block; margin-right: 10px; }

/* Alerts */
.alert { margin-left: 15px; width: calc( 100% - 30px); }
.top-menu .alertas { margin-top: 10px; margin-right: 15px; font-size: 1.75em; color: white; position: relative; }
.top-menu .alertas a { color: white; font-size: 2em; color: #b7bf10; }
.top-menu .alertas .numero { position: absolute; right: -10px; top: 5px; font-size: .3em; background: red; padding: 0 7px; border-radius: 20px; color: white; }

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

/* select2 */
.select2-container { width: 100% !important; padding: 0; }
.select2-selection { height: auto !important; }

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

/* Home Desktop Icons */
.home-icon { background: rgba(181, 216, 21, .3); border: 1px solid rgb(181, 216, 21); border-radius: 5px; text-align: center; padding: 30px 0 10px 0; margin-bottom: 10px; }
.home-icon i.fa { font-size: 3em; }
.home-icon span { display: block; font-size: 1.5em; font-weight: bold; text-transform: uppercase; margin-top: 8px; }

/* Graphics */
.home #facturacion { width: 100%; height: 400px; }
.home #devengos { width: 100%; height: 400px; }
.home #km { width: 100%; height: 400px; }
.home #km-firm { width: 100%; height: 400px; }
.home #co2-firm { width: 100%; height: 400px; }
.home #status { width: 100%; height: 400px; }
#status_current { width: 100%; height: 400px; }
#status_period { width: 100%; height: 400px; }
#vehicle-timeline{ width: 100%; height: 600px; }
#facturacion { width: 100%; height: 400px; }
#reemplazos { width: 100%; height: 400px; }
#alquileres { width: 100%; height: 400px; }
#bloqueos { width: 100%; height: 400px; }
#bloqueos-iniciados { width: 100%; height: 400px; }
#bloqueos-finalizados { width: 100%; height: 400px; }
#alquileres-iniciados { width: 100%; height: 400px; }
#alquileres-finalizados { width: 100%; height: 400px; }
#caducidad { width: 100%; height: 400px; }
#flujo-neto { width: 100%; height: 400px; }
#maximos-diarios { width: 100%; height: 400px; }
#alt-maximos-diarios { width: 100%; height: 400px; }
#energia { width: 100%; height: 400px; }
#distancia { width: 100%; height: 400px; }
#standby { width: 100%; height: 400px; }
#duracion { width: 100%; height: 400px; }
#standby-bloqueos { width: 100%; height: 400px; }
#duracion-bloqueos { width: 100%; height: 400px; }
#coste { width: 100%; height: 400px; }
#coste-previo { width: 100%; height: 400px; }
#coste-previo-precio{ width: 100%; height: 400px; }
#coste-previo-coste{ width: 100%; height: 400px; }
#coste-alquiler { width: 100%; height: 400px; }
#precio { width: 100%; height: 400px; }
#recargas { width: 100%; height: 400px; }
#recargas-finalizadas { width: 100%; height: 400px; }
#energia-proveedor { width: 100%; height: 400px; }
#coste-proveedor { width: 100%; height: 400px; }
#recargas-fallidas { width: 100%; height: 400px; }
#saldo-km { width: 100%; height: 400px; }
#saldo-min { width: 100%; height: 400px; }
#accesos { width: 100%; height: 400px; }
#accesos-usos { width: 100%; height: 400px; }
#accesos-fraccion { width: 100%; height: 400px; }
#accesos-conversion { width: 100%; height: 400px; }
#accesos-usuarios { width: 100%; height: 400px; }
#accesos-usos-usuarios { width: 100%; height: 400px; }
#accesos-sin-uso { width: 100%; height: 400px; }
#accesos-sin-uso-usuarios { width: 100%; height: 400px; }
#accesos-distancia { width: 100%; height: 400px; }
#accesos-distancia-clases { width: 100%; height: 400px; }
#accesos-usuarios-fraccion { width: 100%; height: 400px; }
#accesos-usuarios-conversion { width: 100%; height: 400px; }

/*  Parte de detalles de estado de los vehículos*/
#vehiculos-estados { width: 100%; height: 400px; }

#accesos-no-convertidos { width: 100%; height: 400px; }
#accesos-porcentaje-no-convertidos { width: 100%; height: 400px; }
#accesos-no-convertidos-por-alquiler { width: 100%; height: 400px; }
#accesos-usuarios-no-convertidos { width: 100%; height: 400px; }
#accesos-usuarios-fraccion-no-convertidos-accesos { width: 100%; height: 400px; }
#accesos-usuarios-no-convertidos-por-alquiler { width: 100%; height: 400px; }
#accesos-distancias-coche-mas-cercano { width: 100%; height: 400px; }
#accesos-segun-distancia { width: 100%; height: 400px; }


/* Parte de análisis de energía inicial de alquileres */
#energia-inicial-alquileres { width: 100%; height: 400px; }
#energia-inicial-alquileres-iniciados { width: 100%; height: 400px; }
#energia-inicial-alquileres-finalizados { width: 100%; height: 400px; }
#energia-inicial-coste { width: 100%; height: 400px; }
#energia-inicial-maximos-diarios { width: 100%; height: 400px; }
#energia-inicial-consumo { width: 100%; height: 400px; }
#energia-inicial-duracion { width: 100%; height: 400px; }
#energia-inicial-distancia { width: 100%; height: 400px; }
#energia-inicial-standby { width: 100%; height: 400px; }
#energia-inicial-saldo-km { width: 100%; height: 400px; }
#energia-inicial-energia { width: 100%; height: 400px; }
#energia-inicial-saldo-min { width: 100%; height: 400px; }

/* Nuevas gráficas de devengos y facturación de franquicias */
#devengos { width: 100%; height: 500px; }
#facturacion-franquicias { width: 100%; height: 500px; }
#particulares { width: 100%; height: 500px; }
#empresas-desglose { width: 100%; height: 500px; }
#matriz-devengos { width: 100%; height: 500px; }
#matriz-facturacion { width: 100%; height: 500px; }

/* Payment statistics */
ul#division_length { list-style: none; padding: 0; }
ul#division_length li { display: inline; padding-right: 10px; }

/* Class radio buttons inline mode */
ul.radio-button-inline { list-style: none; padding: 0; }
ul.radio-button-inline li { display: inline; padding-right: 10px; }

/* Penalties */
#penalty .modal-body { max-height: 600px; overflow-y: scroll; }
#penalty .modal-body .penalty-image { float: left; width: 25%; height: 225px; text-align: center; padding: 10px; border: 2px solid white; }
#penalty .modal-body .penalty-image .image { padding: 5px; margin-bottom: 3px; }
#penalty .modal-body .penalty-image span { display: block; }
#penalty .modal-body .penalty-image img { max-height: 150px; margin: 0 auto; }
#penalty .selected-images { float: left; width: 100%; }
#penalty .selected-images::after {   content: ""; clear: both; display: table; }
#penalty .selected-images .image { max-width: 75px; float: left; margin-right: 10px; margin-top: 20px; }

/* Pasos por taller */
#repair .modal-body { max-height: 600px; overflow-y: scroll; }
#repair .modal-body .penalty-image { float: left; width: 25%; height: 225px; text-align: center; padding: 10px; border: 2px solid white; }
#repair .modal-body .penalty-image .image { padding: 5px; margin-bottom: 3px; }
#repair .modal-body .penalty-image span { display: block; }
#repair .modal-body .penalty-image img { max-height: 150px; margin: 0 auto; }
#repair .selected-images { float: left; width: 100%; }
#repair .selected-images::after {   content: ""; clear: both; display: table; }
#repair .selected-images .image { max-width: 75px; float: left; margin-right: 10px; margin-top: 20px; }

/* Visual aids */
.has-visual-aid { position: relative; }
a.visual-aid { font-size: 1.2em; }
a.visual-aid.right { position: absolute; right: 15px; top: 10px; }
a.visual-aid.inline { margin-left: 10px; }
a.visual-aid.cell { position: absolute; right: -4px; top: -4px; }
a.visual-aid.cell-inline { margin-left: 5px; }
#vehicles-map a.visual-aid.cell-inline { margin-left: 20px; position: relative; }
#vehicles-map a.visual-aid.cell-inline i.fa { position: absolute; top: 0; right: 5px; font-size: .8em; }

/* Comprar bonos */
#buy-coupons .bono { font-size: 1.2em; border-bottom: 1px solid #ccc; padding: 8px 0; width: 100%; }
#buy-coupons .bono:hover { cursor: pointer; }
#buy-coupons .bono:last-child { border-bottom: 0; }
#buy-coupons .bono input#promotional_code { float: left; margin-right: 10px;  }
#buy-coupons .bono span.coupon { float: left; font-weight: bold; color: #999;  }
#buy-coupons .bono span.price { float: right; display: block; color: #0097a9; font-weight: bold; margin-top: 9px; margin-bottom: -9px; }
#buy-coupons .bono span.euros { display: block; width: 100%; clear: both; font-size: .85em; margin-left: 23px; }
#buy-coupons .saldo { background: #ededed; border: 1px dashed #999; padding: 10px; border-radius: 5px; margin-top: 0; text-align: center; }
#buy-coupons .saldo .protasis { text-transform: uppercase; font-size: .9em; }
#buy-coupons .saldo .euros-guppy { display: block; font-size: 3em; font-weight: bold; color: #b7bf10; line-height: 1em; }
#buy-coupons .saldo .apodosis { font-weight: bold; font-size: 1.3em; color: #0097a9; }
#buy-coupons label.apply { padding: 5px 0; width: 100%; }

/* Mi cuenta */
#my-account .logo { margin-top: 23px; min-height: 150px; border: 5px solid #ccc; text-align: center; position: relative; padding: 5px 10px 30px 10px; }
#my-account .logo i.fa { color: #ccc; font-size: 6em; line-height: 1.5em; }
#my-account .logo .add-image { position: absolute; bottom: -5px; background: #ccc; width: 100%; right: 0; padding: 5px 0; color: white; text-transform: uppercase; }
#my-account .payment-method { text-align: center; padding: 15px; border: 1px dashed #b7bf10; margin-top: 15px; }
#my-account .payment-method h3.inner-title { color: #b7bf10; margin-bottom: 0; margin-top: 0; }
#my-account .payment-method p { font-weight: bold; font-size: 1.2em; margin: 10px 0; }
.page-header.navbar .top-menu .navbar-nav>li.dropdown-user .dropdown-toggle>img.img-logo { height: 47px; }

/* Manual payment */
ul#process_type { list-style: none; padding: 0; }
ul#process_type li { display: inline-block; padding-right: 15px; }

/* Preautorizaciones */
/* Manual payment */
ul#confirm_or_cancel { list-style: none; padding: 0; }
ul#confirm_or_cancel li { display: inline-block; padding-right: 15px; }

/* Franquicias */
#franchise-payments .transferencia { background: #ededed; border: 1px dashed #999; padding: 10px; border-radius: 5px; margin-top: 0; text-align: center; }
#franchise-payments .transferencia .euros { font-size: 2.5em; font-weight: bold; color: #0097a9; }
#franchise-payments .botones { padding-top: 15px; padding-bottom: 15px; }
#franchise-payments .botones a { background: #337ab7; display: inline-block; width: 100%; text-align: center; color: white; padding: 10px 0; border-radius: 20px; font-weight: bold; font-size: 1.2em; }
#franchise-payments .botones a.active { background: #b5d815; color: black; }
#franchise-payments .detalles { margin-top: 30px; background: rgba(181, 216, 21, .3); padding: 10px; }
#franchise-payments .detalles h4 { font-weight: bold; font-size: 1.2em; color: #0097a9; }
#franchise-payments .total-mes { text-align: center; }
#franchise-payments .total-mes { border: 1px dashed #999; margin-top: 30px; padding: 10px; background: #eee; }
#franchise-payments .total-mes h4 { font-weight: bold; font-size: 1.1em; color: #0097a9; }
#franchise-payments .total-mes h4 span { font-weight: lighter; font-size: .8em; color: #666; margin-left: 10px; }
#franchise-payments #payment_type { list-style: none; padding: 0; }
#franchise-payments #payment_type li { display: inline-block; margin-right: 25px; }
#franchise-payments .custom-payments { background: rgba(51, 122, 183, .2); padding: 10px; display: block; margin-top: 15px; }
#franchise-payments .custom-payments p { margin: 5px 0; }
.franchise-payments-details tbody td { text-align: right; }
.franchise-payments-details thead th { text-align: right; }
.franchise-payments-details tbody td:first-child { text-align: left; }
.franchise-payments-details thead th:first-child { text-align: left; }

/* Internal server error */
.internal-server-error .logo { max-width: 280px; margin: 60px auto 0 auto; }
.internal-server-error h1 { color: #b5c000; font-weight: bold; text-align: center; }
.internal-server-error p { text-align: center; font-size: 1.25em; }
.internal-server-error .copyright { text-align: center; margin-top: 90px; }

/* Internal server error */
.thanks-page .logo { max-width: 280px; margin: 60px auto 0 auto; }
.thanks-page h1 { color: #b5c000; font-weight: bold; text-align: center; }
.thanks-page p { text-align: center; font-size: 1.25em; }
.thanks-page .copyright { text-align: center; margin-top: 90px; }

/* Forbidden */
.forbidden .logo { max-width: 280px; margin: 60px auto 0 auto; }
.forbidden h1 { color: #b5c000; font-weight: bold; text-align: center; }
.forbidden p { text-align: center; font-size: 1.25em; }
.forbidden .copyright { text-align: center; margin-top: 90px; }
/* Email templates */
#email-template .html { overflow: scroll; height: 340px; }
.page-header.navbar.navbar-fixed-top, .page-header.navbar.navbar-static-top { z-index: 999; }
.clockpicker-popover { z-index: 99999; }

/* Franchise header */
.franchise-selector { margin: 25px 0 0 20px; width: 175px; padding: 10px 20px; border-radius: 20px; background: white; border: 2px solid #b7bf10; color: #0097a9; font-weight: bold; font-size: 16px; text-align-last: center; }
/* Global search form (desktop) */
.global-search-form { display: inline-block; margin: 25px 0 0 20px; vertical-align: middle; width: 25%; }
.global-search-form .input-group { width: auto; }
/* .franchise-include-all-vehicles-selector { position: absolute; width: 350px; left: 275px; top: -15px; }
.franchise-include-all-vehicles-selector span { display: block; width: 275px; text-align: left; margin: 3px 0 0 30px; }
.franchise-include-all-vehicles-selector #include-all-vehicles { margin-left: 5px; }
.franchise-include-all-vehicles-selector #franchise-selector-id { margin: 25px 0 0 20px; width: 175px; padding: 10px 20px; border-radius: 20px; background: white; border: 2px solid #b7bf10; color: #0097a9; font-weight: bold; font-size: 16px; text-align-last: center; } */


/* Firm signup */
#firm-signup #payment_method { list-style: none; padding: 0; }
.form-group.error .form-control { border-color: red; border-width: 2px; }
.form-group.error .help-block { color: red; font-weight: bold; }
.firm-card-details p.message { font-size: 1.2em; text-align: center; }
.firm-card-details h1.claim { text-align: center; font-weight: bold; font-size: 1.6em; color: #05a6bc; }
.department-selector { position: absolute; width: 350px; left: 300px; top: -15px; }
.department-selector span { display: block; width: 275px; text-align: left; margin: 3px 0 0 30px; }
.department-selector input[type="checkbox"] { margin-left: 15px; }
.department-selector #department-selector { margin: 25px 0 0 20px; width: 275px; padding: 10px 20px; border-radius: 20px; background: white; border: 2px solid #b7bf10; color: #0097a9; font-weight: bold; font-size: 16px; text-align-last: center; }

/* Confirm address */
.confirm-address .bloque { border: 1px solid #b7bf10; border-radius: 5px; padding: 15px; position: relative; margin-top: 45px; margin-bottom: 50px; }
.confirm-address .bloque h2 { position: absolute; top: -35px; margin: 0; background: white; padding: 0 10px; font-weight: bold; color: #0097a9; font-size: 1.75em; }
.confirm-address .bloque h2 span { font-size: 2em; margin-right: 15px; color: #b7bf10; }
.confirm-address .container { padding: 15px 0 30px 0; }

/* fa icon next to inner-title */
.breadcrumb .fa.next-to-inner-title { color: #0097a9; font-size: large; }
.breadcrumb .fa.next-to-inner-title:hover { color: #01515a; }
.next-to-inner-title { margin-left: 10px;color: #0097a9; font-size: large; }
.next-to-inner-title:hover { color: #01515a; }

.slidecontainer {
  width: 100%; /* Width of the outside container */
}
  
/* The slider itself */
.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%; 
  background: #0097A9;
  cursor: pointer;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #0097A9;
  cursor: pointer;
}
  
/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

@media all and ( max-width: 767px ) {
    /* Allow header to grow to fit the second row (search) */
    .page-header.navbar { height: auto !important; min-height: 85px; padding-bottom: 8px; }
    .page-header.navbar .page-logo { width: 145px; }
    .page-header.navbar .page-logo img { max-width: 130px; margin-top: 20px; }
    .top-menu .dropdown-toggle img { display: none !important; }
    .franchise-selector { width: 135px; padding: 5px; margin-top: 35px; }
    /* .franchise-include-all-vehicles-selector { left: 145px; }
    .franchise-include-all-vehicles-selector span { font-size: 12px; }
    .franchise-include-all-vehicles-selector #include-all-vehicles { margin-left: -5px; }
    .franchise-include-all-vehicles-selector #franchise-selector-id { width: 135px; padding: 5px; margin-top: 35px; } */
    .department-selector { left: 145px; }
    .department-selector span { font-size: 12px; }
    .department-selector input[type="checkbox"] { margin-left: -5px; }
    .department-selector #department-selector { width: 135px; padding: 5px; margin-top: 35px; }
    .logo img { max-width: 130px; }
    .page-top { position: absolute; background: transparent; width: auto; right: 40px; }
    .page-actions { position: absolute; right: 45px; }
    .page-header.navbar .page-top { position: absolute; width: auto; top: 0; }
    .page-header.navbar .top-menu { position: absolute; right: 0; top: 10px; }
    .page-header.navbar .top-menu .navbar-nav>li.dropdown-user .dropdown-toggle>.username { font-size: 14px; width: 120px; text-align: right; }
    .top-menu .alertas { position: absolute; font-size: 1em; right: -30px; top: -10px; margin: 0; }
    .page-header.navbar .top-menu .navbar-nav>li.dropdown-user>.dropdown-menu { right: 0; }
    .page-header.navbar .menu-toggler.responsive-toggler { position: absolute; right: 0; margin: 0; top: 45px; right: 10px; }
    .page-header.navbar .top-menu .navbar-nav>li.dropdown-user .dropdown-toggle { padding: 0; }
    .page-header.navbar .top-menu .navbar-nav>li.dropdown { height: auto; }
    .page-header.navbar .page-logo { padding-top: 10px; }
    .workflow-states .wrapper { width: 100% !important; margin-bottom: 30px; }
    .page-content-wrapper .page-content { padding: 10px 0 !important; }
    /* Global search responsive: second row below logo */
    .global-search-form { display: block; margin: 10px auto 0; clear: both; width: 100%; text-align: center; }
    .global-search-form .input-group { width: 100%; }
    .global-search-form #global-search-input { width: 100% !important; }
    /* #vehicles .table-scrollable { overflow-x: scroll; }
    #rentals .table-scrollable { overflow-x: scroll; }
    #users .table-scrollable { overflow-x: scroll; }
    #clients .table-scrollable { overflow-x: scroll; }
    #firms .table-scrollable { overflow-x: scroll; }
    #employees .table-scrollable { overflow-x: scroll; }
    #payments .table-scrollable { overflow-x: scroll; }
    #grid-analytics-area_wrapper .table-scrollable { overflow-x: scroll; } */
    /* Para todas las tablas */
    .table-scrollable { overflow-x: scroll; }
}
/* guppy-tippy theme */
.tippy-box[data-theme~='guppy-tippy'] {
  background-color: #b7bf10;
  color: white;
}

/** monthly franchise data **/
#monthly-franchise-data .buttons-mfd { padding-top: 15px; padding-bottom: 15px; }
#monthly-franchise-data .buttons-mfd a { background: #337ab7; display: inline-block; width: 100%; text-align: center; color: white; padding: 10px 0; border-radius: 20px; font-weight: bold; font-size: 1.2em; border: none; }
/* Estilo de la clase activa y de los botones cuando se pasa por encima */
#monthly-franchise-data .buttons-mfd a.active { background: #b5d815; color: black; }
#monthly-franchise-data .btn-mfd:hover {  background-color: #666;  color: white; }
/* Estilo de las gráficas */
#monthly-franchise-data .graphs-mfd { padding-top: 30px; }
/* Estilo radio buttons, espaciado entre ellos y entre ellos y su texto */
#monthly-franchise-data .radio-buttons { margin:15px 0 15px 15px; display: flex; text-align: center; }
#monthly-franchise-data .radio-group { align-items: left;  margin-right: 15px; }
#monthly-franchise-data .radio-group:last-child { margin-right: 0; }
#monthly-franchise-data .radio-group input[type="radio"] {  margin-right: 5px; }
/* Estilo de los selectores de fechas */
#monthly-franchise-data .date-selects .select-group { display: inline-block; margin-right: 15px; }
#monthly-franchise-data .date-selects .select-group:last-child { margin-right: 0; }
#monthly-franchise-data .date-selects select { padding: 5px; font-size: 14px; }
/* Gŕaficas */
#graph-trcf-bars { width: 100%; height: 400px; }
#graph-trcf-lines-Total { width: 100%; height: 400px; }
#graph-trcf-lines-Alquileres { width: 100%; height: 400px; }
#graph-trcf-lines-Bonos { width: 100%; height: 400px; }
#graph-trcf-lines-Empresas { width: 100%; height: 400px; }
#graph-franchise-Asturias { width: 100%; height: 400px; }
#graph-franchise-Cantabria { width: 100%; height: 400px; }
#graph-all-franchises { width: 100%; height: 400px; }
#graph-trcf-variation { width: 100%; height: 400px; }
/* Tablas */
#graphs-mfd-table-difference-body td { vertical-align: middle}
/* Modal */
.modal-mfd {
  max-width: 90%;
  width: auto;
}
.modal-content {
  width: 100%;
}

/* Forms como links*/
.custom-file-upload{
  background: none!important;
  border: none;
  padding: 0!important;
  color: #069;
  cursor: pointer;
}

/** maintenance request tyres y battery **/
/* Despliegue en linea */
.operation-radio-buttons { margin: 10px; display: flex; text-align: center; }
/* Ocultar los botones */
.operation-radio-buttons input[type="radio"] { opacity: 0; position: absolute; width: 0; }
/* Etiquetas */
.operation-radio-buttons label {
  padding: 5px 10px;
  border: 2px solid #0097a9;
  border-radius: 2px;
  margin-right: 10px;
  cursor: pointer;
  white-space: nowrap;
}
/* Al pasar por encima */
.operation-radio-buttons label:hover { background-color: #05a6bc; }
/* Seleccionado */
.operation-radio-buttons input[type="radio"]:checked + label { background-color: #05a6bc; border-color: #b7bf10; }

/** popup para copiar un texto al pinchar cierto elemento **/
.popup-msg {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #333;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  z-index: 1000;
}

/** Role-Based Access Control **/
#sticky-perm-form {position: sticky; top: 10vh;}

/** map popup - usado en available_area y available_areas **/
.popup-map {
  background: white;
  border: 1px solid black;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  display: none;
  font-size: 12px;
  padding: 5px;
  pointer-events: none;
  position: absolute;
}

/** Rangos **/
/* battery display output - usado en vehicles map para ver el porcentaje de batería */
.battery-display {
  position: relative;
  bottom: 5px;
  width: 40px;
  height: 30px;
  background-color: transparent;
  /* color: #0097a9; */ /* Color de letra */
  border: 3px solid #0097a9;
  border-radius: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

/* upper and lower thresholds - usados en points of interest, mostrando los límites para los avisos */
.threshold-display {
  position: relative;
  bottom: 5px;
  width: 30px;
  height: 30px;
  background-color: transparent;
  /* color: #0097a9; */ /* Color de letra */
  border: 3px solid #0097a9;
  border-radius: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}


/** Documentos de usuario **/
.document a { margin-left: 5px; }

/******** Mapas Leaflet ********/
/* Mostrar elementos del mapa debajo de otros elementos al hacer scroll en la página */
.leaflet-container {z-index:0}
/* Control de capas de leaflet */
.leaflet-control-layers,
.leaflet-control-layers-expanded {
  background: #e6f0ff !important; /* Unificar el color de los controles */
}
/* Modificar el estilo de los controles de mostrar/ocultar zonas y puntos en mapas */
.leaflet-control.custom-control-button button {
  font-size: 14px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  height: 33px;
  width: 86px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background : #e6f0ff; /* Unificar el color de los controles */
}
/* Minimizar botones en caso de acortar pantalla o uso en móvil */
@media (max-width: 600px) {
  .leaflet-control.custom-control-button button span {
    display: none;
  }
  .leaflet-control.custom-control-button button {
    padding: 6px;
    width: 44px;
    height: 44px;
    justify-content: center;
  }
}

/** - vehicles_map - **/
/* Ajuste de tooltip*/
.vehicles-map-tooltip {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 24px;
  font-weight: bold;
}
/* Eliminar triangulo de tooltip que apunta al icono */
.vehicles-map-tooltip.leaflet-tooltip:before {
  display: none !important;
}

/* Editor de json */
div.jsoneditor {
  width: 100%;
  height: 400px;
}

/* Leyenda para mapa de bloqueos */
.legend-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 4px; /* espacio entre pin y texto */
}
.legend-wrapper a {
  font-size: .8em;
}

/* Modal de firm_vehicles_block centrado tipo infowindow */
#modal-block-vehicles .modal-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* centra exactamente */
  width: auto;
  max-width: 90%;
  margin: 0; /* no añadir márgenes */
}
#modal-block-vehicles .modal-content {
  display: inline-block;
  text-align: left;
  width: 300px; /* fijo estático, si se hacen cambios en el contenido de manera significativa se tendrá que modificar */
  border-radius: 12px; /* esquinas redondeadas */
  box-shadow: 0 5px 20px rgba(0,0,0,0.3);
  overflow: hidden; /* que no sobresalga nada de los bordes */
}