/* ACTUALIZADO FARCOS (16/09/2024) */
/* Estilos propios del proyecto */

/******************************************************************************************/
/***********************************HTML, BODY Y BÁSICOS***********************************/
/******************************************************************************************/
html, body {
    font-size: 13px;
    font-family:  "Red Hat Display", sans-serif;
    font-weight: 500;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;    
    width: 100%;
    height: auto;
    min-height: 100%;
}

::placeholder { font-style: italic; }
p { font-size: 12px; }

.btn-default, .btn-default:link, .btn-default:visited, .btn-default:focus {
    background-color: var(--colorPrincipal);
    color: #FFFFFF;
    padding: 7px 25px;
}



/******************************************************************************************/
/*********************************************H********************************************/
/******************************************************************************************/
.h1, h1 { font-size: 1.85rem; }
.h2, h2 { font-size: 1.50rem; }
.h3, h3 { font-size: 1.25rem; }
.h4, h4 { font-size: 1rem; }
.h5, h5 { font-size: 1rem; }





/******************************************************************************************/
/****************************************COLORES*******************************************/
/******************************************************************************************/
/*DEFINICIÓN DE COLORES*/
:root {
    --colorPrincipal: #FF8300; /*Naranja*/
    --colorSecundario: #23366A; /*Azul oscuro*/
}
.colorPrincipal { color: var(--colorPrincipal) !important; }

/*TEXTOS*/
.txtcolor-naranja-plenoil { color: var(--colorPrincipal); }
.txtcolor-rojo-plenoil { color: red; }

/*BACKGROUNDS*/
.background-color-blanco { background-color: #fff !important; }
.background-degraded { background: linear-gradient(to bottom, var(--colorPrincipal) ,#FED925) !important; border-radius: 15px !important; }
.background-naranja-plenoil { background-color: var(--colorPrincipal) !important; }
.background-azul-plenoil { background-color: var(--colorSecundario) !important; }
.background-gris-plenoil { background-color: #DDD !important; }

/*FONDO TRANSPARENTE QUE SE USA EN EL LOGIN*/
.background-color-login { background: rgba(0, 0, 0, 0.7); }

/*FONDO IGUAL QUE USA EL GRID PARA CUANDO NO MUESTRA RESULTADOS*/
.background-color-grid { background: rgba(253, 130, 4, .05); }





/******************************************************************************************/
/****************************************BORDES********************************************/
/******************************************************************************************/
.bordecard_naranja { border-right: 8px solid var(--colorPrincipal) !important; }
.bordecard_rojo { border-right: 8px solid #dc3545 !important; }
.bordecard_verde { border-right: 8px solid #28a745 !important; }
.bordecard_gris { border-right: 8px solid #AAA !important; }
.border-naranja-plenoil { border: solid 1px #ff6326; }





/******************************************************************************************/
/**************************************ETIQUETAS*******************************************/
/******************************************************************************************/
/*ETIQUETAS NORMALES*/
.control-label {
    line-height: 2.8rem;
    font-weight: bold;
}


/*CAMPO REQUERIDO ASTERISCO ARRIBA*/
.control-label-required:after {
    color: #bd2918;
    content: " *";
    font-size: 14px;
    position: relative;
    top: -3px;
}





/******************************************************************************************/
/************************MULTISELECT (Combo multiseleccionable)****************************/
/******************************************************************************************/
.choices__input:focus {
    color: #000;
    background-color: transparent;
    border-color: transparent;
    outline: none !important;
    box-shadow: none !important;
    border-bottom: solid 1px var(--colorPrincipal) !important;
}

.choices__inner {
    min-height: calc(1.5em + .75rem + 2px);
    background-color: #F5F5F5;
    border: none;
    border-radius: 0.50rem;
    margin-top: 2px;
    position: relative;
}

.choices[data-type*=select-one] .choices__inner {
    padding-bottom: 0px;
}

.choices__list--single {
    padding-bottom: 0px;
    padding-top: 0px;
}

.choices__item {
    margin-left: 20px;
}

/* Icono de lupa sobre el combo de choices */
.choices-search-icon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #aaa;
    font-size: 18px;
    z-index: 10;
}





/******************************************************************************************/
/****************************************ENLACES*******************************************/
/******************************************************************************************/
a { color: var(--colorPrincipal); text-decoration: none; background-color: transparent; transition: color 0.3s ease;}
a:hover { opacity: 0.6; text-decoration: none; color:var(--colorPrincipal); }
.no_a:hover { border: none !important; }
.no_a { border: none !important; padding: 8px 8px 8px 16px; text-decoration: none; border: solid 1px white; display: flex; }





/******************************************************************************************/
/****************************************BOTONES*******************************************/
/******************************************************************************************/
.btn:hover { color: #FFFFFF !important; opacity: 0.8; }
.btn:focus { outline: none !important; box-shadow: none !important; }

.btn:disabled {
    pointer-events: none; /* Desactiva la interacción del mouse */
    background-color: #ccc; /* Cambia el color de fondo cuando el botón está deshabilitado */
    color: #666; /* Cambia el color del texto */
    cursor: not-allowed; /* Cambia el cursor a 'no permitido' */
}

    .btn:disabled:hover {
        background-color: #ccc; /* Mantiene el fondo sin cambios en el hover cuando está deshabilitado */
    }

.btn-naranja-plenoil {
    color: #fff !important;
    background-color: var(--colorPrincipal) !important;
    padding-left: 2.5rem;
    padding-top: 0.3rem;
    padding-right: 2.5rem;
    padding-bottom: 0.3rem;
    border-radius: 1.5rem;
}

.btn-cancelar-plenoil {
    color: #fff !important;
    background-color: #9197B3;
    padding-left: 2.5rem;
    padding-top: 0.3rem;
    padding-right: 2.5rem;
    padding-bottom: 0.3rem;
    border-radius: 1.5rem;
}

.btn-accordion-plenoil {
    color: black !important;
    background-color: transparent;
    border:none;
    font-weight: bold;
} 

.btn-azul-plenoil {
    color: #fff !important;
    background-color: var(--colorSecundario);
    padding-left: 2.5rem;
    padding-top: 0.3rem;
    padding-right: 2.5rem;
    padding-bottom: 0.3rem;
    border-radius: 1.5rem;
}





/******************************************************************************************/
/***************************************IMAGENES*******************************************/
/******************************************************************************************/
.img-circle { width: 40px; height: 40px; object-fit: cover; border-radius: 50%; }
.img-cocheinbox { width: 100%; height: auto; object-fit: cover; /* Ajusta la imagen para llenar el espacio sin deformarse */ }
.img-login { background: url("../../images/fondococheincio.jpg") center center no-repeat; background-size: cover; }
.img-header-background { background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2)), url(../images/fondo-plenoil.jpg) center center no-repeat; background-size: cover; border-top: solid 10px var(--colorPrincipal); }
.img-header-backgroundPlainco {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2)), url(../images/fondococheincio.jpg) center center no-repeat;
    background-size: cover;
    border-top: solid 10px var(--colorPrincipal);
}

.img-circle-userprofile { width: 35px !important; height: 35px; background-color: var(--colorPrincipal) !important; border-radius: 50%; display: flex; justify-content: center; align-items: center; } 
.img-static { width: 150px; height: 75px; object-fit: cover; /* Ajusta la imagen para llenar el espacio sin deformarse */ }





/******************************************************************************************/
/***************************************CHECKBOX*******************************************/
/******************************************************************************************/
input[type="checkbox"] {
    /* Ocultar el checkbox nativo */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    width: 17px;
    height: 17px;
    cursor: pointer;
    background-color: white;
    border: 1px solid var(--colorPrincipal); /* Color personalizado del borde */
    border-radius: 2px;
    transition: background-color 0.2s, border-color 0.2s;
    position: relative;
}

input[type="checkbox"]:checked {
    background-color: var(--colorPrincipal); /* Cambiar el fondo al estar seleccionado */
    border-color: var(--colorPrincipal); /* Cambiar el borde al estar seleccionado */
}

input[type="checkbox"]:checked::after {
    content: '\2714'; /* Código del checkmark */
    color: white; /* Color del checkmark */
    font-size: 12px;
    position: absolute;
    left: 3px;
    top: -1px;
}

/* Para mejorar la apariencia en todos los navegadores */
input[type="checkbox"]:hover {
    opacity: 0.85; 
}





/******************************************************************************************/
/*********************************PADDINGS ESPECIALES**************************************/
/******************************************************************************************/
.pr-md-2-ipadpro{ padding-right: 0rem !important; }

@media (max-width: 991px) {
    .pr-md-2-ipadpro{ padding-right: .5rem !important; }
}

@media (max-width: 820px) {
    .pr-md-2-ipadpro{ padding-right: .5rem !important; }
}

@media (max-width: 767px) {
    .pr-md-2-ipadpro{ padding-right: .0rem !important; }
}





/******************************************************************************************/
/**************************************MODALES*********************************************/
/******************************************************************************************/
/*OSCURECER EL MODAL*/
.modal-backdrop-darken {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo negro semi-transparente */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050; /* Un nivel por debajo del modal de confirmación */
    display: none; /* Inicialmente oculto */
}

/*OCULTAR EL MODAL*/
.modal-hide {
    visibility: hidden;
    opacity: 0;        
    transition: opacity 0.3s ease-in-out;
}

/*SCROLL DE MODALES*/
.modal-body-scroll {
        max-height: 400px; 
        overflow-y: auto; 
        padding: 15px;
    }

@media (min-width: 576px) {
    .modal-dialog {
        max-width: 800px;
    }
}







/******************************************************************************************/
/*******************************TABLA DEL GRID RESPONSIVE**********************************/
/******************************************************************************************/
.mvc-grid-table > table > thead > tr > th { background-color: white !important; border-left: none !important; border-right: none !important; border-top: 2px solid #dee2e6 !important; border-bottom: 2px solid #dee2e6 !important; }
.mvc-grid-table > table > thead > tr > th, .mvc-grid-table > table > tbody > tr > td, .mvc-grid-table > table > tfoot > tr > td { border: none !important; padding-top: 1em !important; padding-bottom:1em !important; }
.mvc-grid-table > table > tbody > tr:nth-of-type(odd) { background-color: rgba(253, 130, 4, .05); }
.mvc-grid-pager .active, .mvc-grid-pager .active:focus, .mvc-grid-pager .active:hover { border-color: var(--colorPrincipal) !important; background: var(--colorPrincipal) !important; color: #ffffff; }

@media only screen and (max-width: 850px) 
{   
    /*Se pone que not(.table-striped) y significa que para aquellos grids que usen la clase table-striped no se aplicará esto en repsonsive*/
    
    /*TABLA DEL GRID*/
    .table-responsive-rows:not(.table-striped) table, 
    .table-responsive-rows:not(.table-striped) thead, 
    .table-responsive-rows:not(.table-striped) tbody, 
    .table-responsive-rows:not(.table-striped) th, 
    .table-responsive-rows:not(.table-striped) td, 
    .table-responsive-rows:not(.table-striped) tr {
        display: block; 
    }
   
    /* Ocultar encabezados de tabla (pero no mostrar: ninguno por accesibilidad) */
    .table-responsive-rows:not(.table-striped) thead tr { position: absolute; top: -9999px; left: -9999px; }
    
    .table-responsive-rows:not(.table-striped) th { font-size: 1em !important; }
    .table-responsive-rows:not(.table-striped) tr { padding-bottom: 0px; border-left: none; border-right: none; }
    .table-responsive-rows:not(.table-striped) td { border: none; border-bottom: 1px solid #eee; font-size: 14px; position: relative; padding-left: 42% !important; white-space: normal; text-align: right; }
        .table-responsive-rows:not(.table-striped) td:before { position: absolute; top: 6px; left: 6px; padding-right: 10px; white-space: nowrap; text-align: left; font-weight: bold; font-size: 14px; }

    .table-responsive-rows:not(.table-striped) .mvc-grid-table > table > thead > tr > th:nth-of-type(1), 
    .table-responsive-rows:not(.table-striped) .mvc-grid-table > table > tbody > tr > td:nth-of-type(1), 
    .table-responsive-rows:not(.table-striped) .mvc-grid-table > table > tfoot > tr > td:nth-of-type(1) { 
        border-top: 1px solid black !important; 
    }

    .table-responsive-rows:not(.table-striped) .mvc-grid-table > table > tbody > tr:last-child, 
    .table-responsive-rows:not(.table-striped) .mvc-grid-table > table > tfoot > tr:last-child { 
        border-bottom: 1px solid black !important; 
    }
    
    /*CENTRA EL TÍTULO "No hay resultados..." EN RESPONSIVE*/
    .table-responsive-rows:not(.table-striped) .mvc-grid-empty-row td { text-align: center !important; padding: 20px !important; font-size: 13px !important; color: inherit !important; }
    
    /*PAGINACIÓN EN RESPONSIVE*/
    .table-responsive-rows:not(.table-striped) .mvc-grid-pager button:focus { outline: none !important; box-shadow: none !important; }
    .table-responsive-rows:not(.table-striped) .tableless thead { display: none; }
    .table-responsive-rows:not(.table-striped) .tableless td { border: solid 0px transparent !important; }
    
    .table-responsive-rows:not(.table-striped) .mvc-grid-table > table > thead > tr > th, 
    .table-responsive-rows:not(.table-striped) .mvc-grid-table > table > tbody > tr > td, 
    .table-responsive-rows:not(.table-striped) .mvc-grid-table > table > tfoot > tr > td { 
        border: 0px solid #dee2e6 !important; padding: 0.5em; 
    }


    /*NOMBRES TÍTULOS EN RESPONSIVE*/
    /* Nombres de títulos tabla DELEGACIONES */
    .table-responsive-rows td.title_delegations-delegacion:before { content: "Delegación:"; }
    .table-responsive-rows td.title_delegations-direccion:before { content: "Dirección:"; }
    .table-responsive-rows td.title_delegations-acciones:before { content: "Acciones:"; }

    /* Nombres de títulos tabla DEPARTAMENTOS */
    .table-responsive-rows td.title_departments-departamento:before { content: "Departamento:"; }
    .table-responsive-rows td.title_departments-acciones:before { content: "Acciones:"; }

    /* Nombres de títulos tabla PUESTOS */
    .table-responsive-rows td.title_departmentPosition-puesto:before { content: "Puesto:"; }
    .table-responsive-rows td.title_departmentPosition-departamento:before { content: "Departamento:"; }
    .table-responsive-rows td.title_departmentPosition-acciones:before { content: "Acciones:"; }
    .table-responsive-rows td.title_departmentPosition-diaskms:before {
        content: "Días para reporte Km:";
    }

    /* Nombres de títulos tabla FABRICANTES */
    .table-responsive-rows td.title_vehicleManufacturers-fabricante:before { content: "Fabricante:"; }
    .table-responsive-rows td.title_vehicleManufacturers-acciones:before { content: "Acciones:"; }

    /* Nombres de títulos tabla MODELOS */
    .table-responsive-rows td.title_vehicleModels-imagen:before { content: "Imagen:"; }
    .table-responsive-rows td.title_vehicleModels-modelo:before { content: "Modelo:"; }
    .table-responsive-rows td.title_vehicleModels-combustible:before { content: "Combustible:"; }
    .table-responsive-rows td.title_vehicleModels-cambiodemarcha:before { content: "Cambio de marcha:"; }
    .table-responsive-rows td.title_vehicleModels-color:before { content: "Color:"; }
    .table-responsive-rows td.title_vehicleModels-cv:before { content: "CV:"; }
    .table-responsive-rows td.title_vehicleModels-acciones:before { content: "Acciones:"; }

    /* Nombres de títulos tabla MULTAS */
    .table-responsive-rows td.title_fines-matricula:before { content: "Matrícula:"; }
    .table-responsive-rows td.title_fines-conductor:before { content: "Conductor:"; }
    .table-responsive-rows td.title_fines-estado:before { content: "Estado:"; }
    .table-responsive-rows td.title_fines-fechaderecepcion:before { content: "F. de recepción:"; }
    .table-responsive-rows td.title_fines-fechadeinfraccion:before { content: "F. de infracción:"; }
    .table-responsive-rows td.title_fines-fechadevencimiento:before { content: "F. de vencimiento:"; }
    .table-responsive-rows td.title_fines-importe:before { content: "Importe:"; }
    .table-responsive-rows td.title_fines-numerodeexpediente:before { content: "N. de expediente:"; }
    .table-responsive-rows td.title_fines-puntoscarnetretirados:before { content: "Puntos carnet:"; }    
    .table-responsive-rows td.title_fines-acciones:before { content: "Acciones:"; }

    /* Nombres de títulos tabla USUARIOS */
    .table-responsive-rows td.title_users-nombreapellidos:before { content: "Nombre/Apellidos:"; }
    .table-responsive-rows td.title_users-email:before { content: "Email:"; }
    .table-responsive-rows td.title_users-rol:before { content: "Rol:"; }
    .table-responsive-rows td.title_users-telefono:before { content: "Teléfono:"; }
    .table-responsive-rows td.title_users-activo:before { content: "Activo:"; }
    .table-responsive-rows td.title_users-fechadecreacion:before { content: "F. de creación:"; }
    .table-responsive-rows td.title_users-fechademodificacion:before { content: "F. de modificación:"; }
    .table-responsive-rows td.title_users-fechadeeliminacion:before { content: "F. de eliminación:"; }
    .table-responsive-rows td.title_users-acciones:before { content: "Acciones:"; }

    /* Nombres de títulos tabla CONDUCTORES */
    .table-responsive-rows td.title_drivers-imagen:before { content: "Imagen:"; }
    .table-responsive-rows td.title_drivers-nombreapellidos:before { content: "Nombre/Apellidos:"; }
    .table-responsive-rows td.title_drivers-nif:before { content: "NIF/NIE:"; }
    .table-responsive-rows td.title_drivers-fechadenacimiento:before { content: "F. de nacimiento:"; }
    .table-responsive-rows td.title_drivers-fechaexpediciondecarnet:before { content: "F. Exp. de carnet:"; }
    .table-responsive-rows td.title_drivers-puntoscarnet:before { content: "Puntos carnet:"; }
    .table-responsive-rows td.title_drivers-sociedad:before { content: "Sociedad:"; }
    .table-responsive-rows td.title_drivers-departamento:before { content: "Departamento:"; }
    .table-responsive-rows td.title_drivers-puesto:before { content: "Puesto:"; }
    .table-responsive-rows td.title_drivers-telefono:before { content: "Teléfono:"; }
    .table-responsive-rows td.title_drivers-delegacion:before { content: "Delegación:"; }
    .table-responsive-rows td.title_drivers-activo:before { content: "Activo:"; }
    .table-responsive-rows td.title_drivers-bloqueado:before { content: "Bloqueado:"; }
    .table-responsive-rows td.title_drivers-diaskms:before {
        content: "Días reporte Kms:";
    }

    .table-responsive-rows td.title_drivers-acciones:before { content: "Acciones:"; }

    /* Nombres de títulos tabla EMPRESAS RENTING */
    .table-responsive-rows td.title_carrentalcompanies-renting:before { content: "Renting:"; }
    .table-responsive-rows td.title_carrentalcompanies-telefono:before { content: "Teléfono:"; }
    .table-responsive-rows td.title_carrentalcompanies-acciones:before { content: "Acciones:"; }

    /* Nombres de títulos tabla VEHÍCULOS */
    .table-responsive-rows td.title_vehicles-imagen:before { content: "Imagen:"; }
    .table-responsive-rows td.title_vehicles-matricula:before { content: "Matrícula:"; }
    .table-responsive-rows td.title_vehicles-renting:before { content: "Renting:"; }
    .table-responsive-rows td.title_vehicles-kmsinicialesmaximos:before { content: "Kms Iniciales/Máximos:"; }
    .table-responsive-rows td.title_vehicles-numerodecontrato:before { content: "Nº contrato:"; }
    .table-responsive-rows td.title_vehicles-costemensual:before { content: "Coste mensual:"; }
    .table-responsive-rows td.title_vehicles-fechainiciodecontrato:before { content: "F. Inicio contrato:"; }
    .table-responsive-rows td.title_vehicles-fechafindecontrato:before { content: "F. Fin contrato:"; }
    .table-responsive-rows td.title_vehicles-fechaprevistaderecogida:before { content: "F. Prevista de recogida:"; }
    .table-responsive-rows td.title_vehicles-numerodegps:before { content: "Nº de GPS:"; }
    .table-responsive-rows td.title_vehicles-sociedad:before { content: "Sociedad:"; }
    .table-responsive-rows td.title_vehicles-activo:before { content: "Activo:"; }
    .table-responsive-rows td.title_vehicles-fechacreacion:before { content: "F. Creación:"; }
    .table-responsive-rows td.title_vehicles-fechamodificacion:before { content: "F. Modificación:"; }
    .table-responsive-rows td.title_vehicles-fechabaja:before { content: "F. Baja:"; }
    .table-responsive-rows td.title_vehicles-acciones:before { content: "Acciones:"; }
    .table-responsive-rows td.title_vehicles-location:before {
        content: "Ubicación:";
    }


    /* Nombres de títulos tabla ASIGNAR CONDUCTOR */
    .table-responsive-rows td.title_assigndriver-nombreapellidos:before { content: "Nombre/Apellidos:"; }
    .table-responsive-rows td.title_assigndriver-nif:before { content: "NIF/NIE:"; }
    .table-responsive-rows td.title_assigndriver-kilometros:before { content: "Kilómetros:"; }
    .table-responsive-rows td.title_assigndriver-fechainicio:before { content: "Fecha inicio:"; }
    .table-responsive-rows td.title_assigndriver-fechafin:before { content: "Fecha fin:"; }

    /* Nombres de títulos tabla NOTIFICACIONES */
    .table-responsive-rows td.title_notices-tipo:before { content: "Tipo:"; }
    .table-responsive-rows td.title_notices-notificacion:before { content: "Notificación:"; }
    .table-responsive-rows td.title_notices-fechadecreacion:before { content: "F. de Creación:"; }
    .table-responsive-rows td.title_notices-fechadelectura:before { content: "F. de Lectura:"; }
    
    
    /* Nombres de títulos tabla MULTAS DE FICHA DE VEHÍCULO */
    .table-responsive-rows td.title_cardvehicledriverfines-fechadeinfraccion:before { content: "F. de infracción:"; }
    .table-responsive-rows td.title_cardvehicledriverfines-importe:before { content: "Importe:"; }
    .table-responsive-rows td.title_cardvehicledriverfines-conductor:before { content: "Conductor:"; }
    .table-responsive-rows td.title_cardvehicledriverfines-puntoscarnet:before { content: "Puntos carnet:"; }

    /* Nombres de títulos tabla VEHÍCULOS/CONDUCTORES DE FICHA DE VEHÍCULO */
    .table-responsive-rows td.title_cardvehicledrivervehiclesdrivers-nombreapellidos:before { content: "Nombre/Apellidos:"; }
    .table-responsive-rows td.title_cardvehicledrivervehiclesdrivers-nif:before { content: "NIF/NIE:"; }
    .table-responsive-rows td.title_cardvehicledrivervehiclesdrivers-kilometros:before { content: "Kilómetros:"; }
    .table-responsive-rows td.title_cardvehicledrivervehiclesdrivers-fechainicio:before { content: "Fecha inicio:"; }
    .table-responsive-rows td.title_cardvehicledrivervehiclesdrivers-fechafin:before { content: "Fecha fin:"; }
    .table-responsive-rows td.title_cardvehicledrivervehiclesdrivers-acciones:before { content: "Acciones:"; }

    /* Nombres de títulos tabla REPARACIONES DE FICHA DE VEHÍCULO */
    .table-responsive-rows td.title_cardvehicledriverrepairs-tipodeasistencia:before { content: "Tipo de asistencia:"; }
    .table-responsive-rows td.title_cardvehicledriverrepairs-reparacion:before { content: "Reparación:"; }
    .table-responsive-rows td.title_cardvehicledriverrepairs-fecha:before { content: "Fecha:"; }
    .table-responsive-rows td.title_cardvehicledriverrepairs-observaciones:before { content: "Observaciones:"; }

    /* Nombres de títulos tabla DASHBOARD */
    .table-responsive-rows td.title_gastos-sociedad:before { content: "Sociedad:"; }
    .table-responsive-rows td.title_gastos-renting:before { content: "Compañía de Renting:"; }
    .table-responsive-rows td.title_gastos-costomensual:before { content: "Costo Mensual:"; }
    .table-responsive-rows td.title_gastos-fecha:before { content: "Fecha:"; }
    .table-responsive-rows td.title_conductor-nombre:before { content: "Nombre y Apellidos:";}
    .table-responsive-rows td.title_conductor-multas:before { content: "Número de multas:"; }
    .table-responsive-rows td.title_conductor-matricula:before { content: "Matrícula:"; }
    .table-responsive-rows td.title_conductor-modelo:before { content: "Modelo:"; }
    .table-responsive-rows td.title_conductor-fabricante:before { content: "Fabricante:"; }
    .table-responsive-rows td.title_conductor-nombre:before { content: "Nombre y Apellidos:"; }

    .table-responsive-rows td.title_vehiculo-fabricante:before { content: "Fabricante:"; }
    .table-responsive-rows td.title_vehiculo-modelo:before { content: "Modelo:"; }
    .table-responsive-rows td.title_vehiculo-matricula:before { content: "Matrícula:"; }
    .table-responsive-rows td.title_vehiculo-date:before { content: "Fecha fin del contrato:"; }
        .table-responsive-rows td.title_vehiculo-kms:before { content: "Kms actuales:"; }

    /* Nombres de títulos tabla CLÁUSULAS CONDUCCIÓN */
    .table-responsive-rows td.title_drivingclauses-matricula:before {
        content: "Matrícula:";
    }
    .table-responsive-rows td.title_drivingclauses-conductor:before { content: "Conductor:"; }
    .table-responsive-rows td.title_drivingclauses-sociedad:before { content: "Sociedad:"; }
    .table-responsive-rows td.title_drivingclauses-fechaasignacion:before { content: "Fecha asignación:"; }
    .table-responsive-rows td.title_drivingclauses-fechadevolucion:before { content: "Fecha devolución:"; }
    .table-responsive-rows td.title_drivingclauses-fechafirmaresponsable:before { content: "Fecha firma responsable:"; }
    .table-responsive-rows td.title_drivingclauses-fechafirmaconductor:before { content: "Fecha firma conductor:"; }
    .table-responsive-rows td.title_drivingclauses-acciones:before { content: "Acciones:"; }
    
}





/******************************************************************************************/
/*****************************TABLA STRIPED PARA VERSIÓN APP*******************************/
/******************************************************************************************/
.table-striped-custom-table td, .table-striped-custom-table thead th { border-top: solid 0px transparent; border-bottom: solid 0px transparent; }



/******************************************************************************************/
/*****************************************INPUT********************************************/
/******************************************************************************************/
/*VALIDACIONES EN INPUTS, DROPDOWNS, ETC...*/
input.form-control.is-invalid, .was-validated input.form-control:invalid {
    padding-right: calc(1.3em + .75rem);
}

/*CAMBIO COLOR FOCUS*/
.control-input:focus {
    outline: none; /* Quitar el borde predeterminado de enfoque */
    border-color: var(--colorPrincipal); /* Cambiar el color del borde a tu elección */
    box-shadow: 0 0 5px rgba(240, 130, 29, 0.5); /* Añadir sombra para un efecto visual */
}

/*CUANDO EL NAVEGADOR SUGIERE AUTOCOMPLETAR Y CLICKAMOS, PODEMOS PERSONALIZAR EL FONDO*/
input:-webkit-autofill {
    background-color: white !important; /* Establece el fondo en blanco */
    color: inherit; /* Mantiene el color del texto */
    transition: background-color 5000s ease-in-out 0s; /* Evita que Chrome vuelva a aplicar el fondo */
}

/*PARA PONER UN ICONO A LA DERECHA DE UN CAMPO INPUT*/
.input-icoright-group { position: relative; }
.input-icoright-group i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: black; cursor: not-allowed; }
.input-icoright-group input { padding-right: 35px; cursor: pointer; background-position: right calc(.875em + 1.30rem) center !important; }
.input-icoright-group input.form-control.is-invalid[type="text"], 
.input-icoright-group .was-validated input.form-control[type="text"]:invalid {
    padding-right: calc(1.5em + 1rem); /* Ajuste del padding para los inputs con iconos a la derecha */
    background-position: right calc(.875em + 1.30rem) center; /* Ajustar la posición del icono */
    /*background-color: #f8d7da;*/ /* Color de fondo rojo claro cuando es inválido */
    border-color: #dc3545; /* Color del borde cuando es inválido */
}




/******************************************************************************************/
/***********************************SELECT (COMBOS)****************************************/
/******************************************************************************************/
select.form-control.is-invalid, .was-validated select.form-control:invalid {
    padding-right: calc(1.5em + 1rem); /* Diferente ajuste para los select */
    background-position: right calc(.875em + .5000rem) center
}

/*CAMBIO COLOR FOCUS*/
.control-select:focus {
    outline: none; /* Quitar el borde predeterminado de enfoque */
    border-color: var(--colorPrincipal); /* Cambiar el color del borde a tu elección */
    box-shadow: 0 0 5px rgba(240, 130, 29, 0.5); /* Añadir sombra para un efecto visual */
}





/******************************************************************************************/
/*************************************FILE UPLOAD******************************************/
/******************************************************************************************/
/*DIV PARA SUBIR/ARRASTRAR ARCHIVOS*/
.file-upload, 
.file-upload-create,
.file-upload-modify {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--colorPrincipal);
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
    background-color: #f8f9fa !important;
}

/*HOVER DEL DIV PARA SUBIR/ARRASTRAR ARCHIVOS*/
.file-upload:hover, 
.file-upload-create:hover,
.file-upload-modify:hover {
    opacity: 0.7    
}

/*OCULTA EL INPUT POR DEFECTO PARA SUBIR/ARRASTRAR ARCHIVOS*/
.file-upload input[type="file"] ,
.file-upload-create input[type="file"],
.file-upload-modify input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/*BORDE QUE MUESTRA CUANDO HACES EL DRAG AND DROP*/
.file-upload-highlight { border: 2px dashed var(--colorPrincipal); background-color: #f8f9fa !important; }


/*MINIATURAS CARDS DE LOS ARCHIVOS ADJUNTOS*/
.file-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Ajusta las columnas automáticamente */
    gap: 0px 40px; /* Espacio entre las tarjetas */
    width: 100%;
    justify-items: start; /* Asegura que los archivos se alineen correctamente */
}

.file-card {
    width: 150px;
    max-width: 150px; /* Limita el ancho máximo */
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px; /* Espacio entre filas */
}

    .file-card-body {
            padding: 10px;
            width: 100%;
            text-align: center;
    }

     .file-card img {
            width: 100%;
            height: 80px;
            object-fit: cover;
            object-position: center;
        }

    .file-card i {
        width: 100%;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 100px;
    }

    .file-card p {
        font-size: 11px;
        margin: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;        
    }

.file-card:hover .overlay { opacity: 1; }

.file-card-trash-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 999; /* Asegura que el icono está por encima del overlay */
}
.file-card:hover .file-card-trash-icon { opacity: 1; }

.file-card-download-icon {
    position: absolute;
    top: 10px;
    right: 30px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 999; /* Asegura que el icono está por encima del overlay */
}
.file-card:hover .file-card-download-icon { opacity: 1; }

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}




/******************************************************************************************/
/*******************************INPUT FILTRO BUSQUEDA LIBRE********************************/
/******************************************************************************************/
.search-container { position: relative; width: 250px; }
.search-container input { padding: 10px 10px 10px 35px; } /* Ajusta el padding para hacer espacio para el icono */
.search-container .mdi-magnify { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); color: #888; }

@media (max-width: 990px) {
    .search-container .mdi-magnify { top: 50%; line-height: normal; }
}


.search-container .mdi-calendar {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: #888;
}

@media (max-width: 990px) {
    .search-container .mdi-calendar {
        top: 50%;
        line-height: normal;
    }
}




/******************************************************************************************/
/************************************MENSAJE CARGANDO**************************************/
/******************************************************************************************/
#materialLoading {
    font-family: "Red Hat Display", sans-serif;
    color: black;
    font-weight: bold;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: table;
    z-index: 9999;
}

#materialLoadingCentered { display: table-cell; vertical-align: middle; padding: 20px; }
#materialLoadingContent { text-align: center; }
#materialLoadingContent .spinner-container { background-color: #FFFFFF; text-align: center; border-radius: 7px; padding: 40px 20px; }
#materialLoadingContent .spinner-container .texto { padding-top: 10px; font-size: 16px; font-weight: bold; }
#materialLoadingContent .spinner-container .spinner-border { text-align: center; color: var(--colorPrincipal); width: 3rem; height: 3rem; }
#materialLoading.hide { opacity: 0; transition: opacity 0.2s ease-out; pointer-events: none; }
#materialLoading.hide #materialLoadingCentered { transform: scale(0.8); transition: transform 0.2s ease-out; }
#materialLoading.show { opacity: 1; transition: opacity 0.2s ease-in; }
#materialLoading.show #materialLoadingCentered { transform: scale(1); transition: transform 0.2s ease-in; }





/******************************************************************************************/
/****************************************ICONOS********************************************/
/******************************************************************************************/
.mdi::before { font-size: 18px; }
.mdi2::before { font-size: 22px; }
 .icon-size-30::before {
    font-size: 30px;
}

.icon-notification-circle {
    background-color: red;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
}




/******************************************************************************************/
/********************************MENU LATERAL (BACKOFFICE)*********************************/
/******************************************************************************************/
.sidenav {
    height: 100%;
    width: 16px;
    position: fixed;
    z-index: 1;
    top:auto;
    left: 0;
    background-color: #fff;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 45px;
}

.sidenav a {
    padding: 8px 8px 8px 16px;
    text-decoration: none;
    font-size: 14px;
    color: #6c757d !important;
    display: flex;
    align-items: center;
    transition: 0.3s;
    border: solid 1px white;
}

.sidenav a span { white-space: nowrap; }
.sidenav a .mdi { margin-right: 10px; }

.sidenav.expanded a:hover { color: var(--colorPrincipal) !important; opacity: 1; }
.expanded a:active{ background-color: white; }

.submenu { display: none; flex-direction: column; padding-left: 30px; }

#menuToggleBtn {
    position: fixed;
    top: 16vh;
    left: 0px;
    background-color: #fff;
    color: #6c757d !important;
    border: none;
    border-radius: 50%;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: 0.5s;
    z-index: 1040;
}

#main { transition: margin-left 0.5s; padding: 16px; }

.collapse-button { display: flex; align-items: center; }
.toggle-icon:hover { color: var(--colorPrincipal); }
.collapse-button .mdi { transition: transform 0.3s ease; margin-right: 5px; }
.collapse-button.collapsed .mdi-chevron-down { display: none; }
.collapse-button.collapsed .mdi-chevron-right { display: inline-block; }
.collapse-button:not(.collapsed) .mdi-chevron-down { display: inline-block; }
.collapse-button:not(.collapsed) .mdi-chevron-right { display: none; }
button:focus { outline: 0px dotted !important; outline: 0px auto -webkit-focus-ring-color !important; } /* Le quita el color a la flechita */





/******************************************************************************************/
/**********************************MENU TABS (APPMOBILE)***********************************/
/******************************************************************************************/
.nav-link {
    background-color: var(--colorPrincipal);
    color: white;
    border-left: 1px solid white;
    border-right: 1px solid white;
}

.nav-link.active {
    background-color: transparent; 
    color: var(--colorPrincipal) !important;
    border: 1px dotted var(--colorPrincipal);
    padding-bottom: 5px;
}

.nav-link:hover {
    color: white !important;
}

.nav-link.active:hover {
    background-color: transparent;
    color: var(--colorPrincipal) !important;
    opacity: 1;
}





/******************************************************************************************/
/******************************OPCIONES MENÚ PERFIL USUARIO********************************/
/******************************************************************************************/
.dropdown-item:hover { color: var(--colorPrincipal); opacity: 1; background-color: transparent; }
.dropdown-item:hover i { color: var(--colorPrincipal); opacity: 1; }





/******************************************************************************************/
/************************************TOOLTIP CON ICONO*************************************/
/******************************************************************************************/
.tooltip {
    border-bottom: none !important;
}

.tooltip-inner {
    background-color: white;
    color: #333;
    border: 1px solid var(--colorPrincipal);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 300px;
}

/*FLECHITA QUE INDICA EL BOCADILLO TOOLTIP*/
.tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: var(--colorPrincipal);
}





/******************************************************************************************/
/**************************************MENSAJE TOAST***************************************/
/******************************************************************************************/
#toast-container > div {
    opacity:0.95 !important; /* Ajusta la opacidad del mensaje toast */
    transition: opacity 0.3s; /* Opcional: para una transición suave al cambiar la opacidad */
}

#toast-container > div:hover {
    opacity: 1 !important; /* Ajusta la opacidad del mensaje toast al pasar el mouse sobre �l */
}




/******************************************************************************************/
/*********************************CALENDARIO AIR DATEPICKER********************************/
/******************************************************************************************/
.air-datepicker {
    z-index: 1051 !important; /* Ajuste de z-index para que se muestre sobre el modal */
}

/*CAMBIA EL COLOR DEL DÍA SELECCIONADO*/
.air-datepicker-cell.-selected- {
    background-color: var(--colorPrincipal) !important;
    color: white !important;
}

/*CAMBIA EL COLOR DEL FONDO DEL HOVER*/
.air-datepicker-cell.-selected-.-focus- {
    background-color: var(--colorPrincipal) !important;
}




/******************************************************************************************/
/*************************TEMPLATES CLÁUSULAS CONDUCCIÓN***********************************/
/******************************************************************************************/
.title-TemplateClausulaConduccion { font-size: 1.8em; text-align: center; margin-bottom: 20px; font-weight: bold; }
.sectionTitle-TemplateClausulaConduccion { font-size: 1.2em; margin-top: 20px; margin-bottom: 10px; font-weight: bold; }




/******************************************************************************************/
/************************************POPOVER DE BOOSTRAP***********************************/
/******************************************************************************************/
.popover {
    background-color: white !important; /* Color de fondo del popover */
    color: #ffffff !important; /* Color del texto del popover */
    border-color: black !important; /* Color del borde del popover */
}

/* Cambiar el color de la flecha del popover */
.popover .arrow::before, .popover .arrow::after {
    border-bottom-color: black !important; /* Cambia este color según el lado donde esté la flecha */
    border-top-color: black !important; /* Aplica también para otras posiciones (arriba/abajo) */
}

/* Cambiar el color del header del popover */
.popover-header {
    background-color: var(--colorPrincipal) !important; /* Color de fondo del header */
    color: #ffffff !important; /* Color del texto del header */
    border-bottom: 1px solid black !important; /* Borde inferior del header */
}

.popover-body {
    padding: 1rem;
}




/******************************************************************************************/
/************CUADRADITOS DE DOCUMENTOS PARA DESCARGAR (FICHA DE VEHÍCULO)******************/
/******************************************************************************************/
.file-item {
    display: flex;
    align-items: center; /* Alinea todos los elementos verticalmente en el centro */
    text-decoration: none; /* Quita el subrayado */
    padding: 8px;
    width: 100%; /* Se adapta al contenedor */
}

.file-icon {
    font-size: 24px;
    margin-right: 10px; /* Espacio entre el ícono y el nombre del archivo */
}

.file-name {
    flex-grow: 1; /* Ocupa todo el espacio disponible */
    overflow: hidden; /* Evita que el texto se desborde */
    white-space: nowrap; /* Mantiene el texto en una sola línea */
    text-overflow: ellipsis; /* Corta el texto con puntos suspensivos si es demasiado largo */
    margin-right: 10px; /* Espacio entre el texto y el ícono de descarga */
}

.download-icon {
    font-size: 24px;
}





/******************************************************************************************/
/*****************************************VARIOS*******************************************/
/******************************************************************************************/
/*TIPOS DE CURSORES*/
.cursor-hand { cursor: pointer !important; }
.cursor-arrow { cursor: default !important; }
.cursor-notAllowed { cursor: not-allowed !important; }
.cursor-text { cursor: text !important; }


/*MENSAJE VALIDACIONES*/
.label-message-error {
    position: absolute;
    padding-top: 0px;
    padding-left: 5px;
    min-height: 0px;
    line-height: 15px;
    font-size: 11px;
    text-align: left;
}

/*CÍRCULO CON TEXTO DENTRO*/
.circle_textInside { 
    width: 40px !important;
    height: 40px;
    background-color: var(--colorPrincipal) !important;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: white;
}
/*CÍRCULO CON TEXTO DENTRO DISABLED*/
.circle_textInsideDisabled {
    width: 40px !important;
    height: 40px;
    background-color: #6c757d !important;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: white;
} 
.form-control_flotas {
    background-color: #F5F5F5;
    border: none;
    border-radius: 0.50rem;
}

/*PONE UN POCO DE PADDING ARRIBA DE LOS FORMS DE BÚSQUEDA PARA QUE CUANDO SE HAGA RESPONSIVE QUEDE BIEN*/
@media (max-width: 768px) {
    .form-inline {
        padding-top: 7px !important;
    }
}

.letter-spacing-1px { letter-spacing: 1px; }
.border-faqs { border-top: solid 1px var(--colorPrincipal) !important; }


/*Necesario para que el canvas tenga todo el espacio disponible*/
#signature-pad canvas {
    width: 100% !important;
    height: 100% !important;
}