html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Ubuntu', sans-serif;
    font-size: 11px;
}

#wrapper {
    min-height: 100%;
    position: relative;
    background-color: #FFFFFF;
}

#header {
    background: #000000;
    padding: 2px;

}

#contenido {
    padding-bottom: 20px;
    /* Height of the footer element */
}

#footer {
    /*background:#ffab62;*/
    width: 100%;
    /*height:20px;*/
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #000000;
    color: white;
    font-weight: bolder;

}

/*BOTONES*/
.buttonMensaje {
    background-color: #4CAF50; /* Color de fondo */
    border: none; /* Sin bordes */
    width: 250px;
    color: white; /* Color del texto */
    padding: 12px 24px; /* Relleno */
    text-align: center; /* Alinear texto */
    text-decoration: none; /* Sin subrayado */
    display: inline-block; /* Mostrar en línea */
    font-size: 16px; /* Tamaño de fuente */
    margin: 4px 2px; /* Margen */
    cursor: pointer; /* Cambiar cursor al pasar por encima */
    border-radius: 5px; /* Bordes redondeados */
    transition-duration: 0.4s; /* Duración de la transición */
}

.buttonReproducir {
    background-color: #4CAF50; /* Color de fondo */
    border: none; /* Sin bordes */
    color: white; /* Color del texto */
    width: 35px;
    height: 30px;
    text-align: center; /* Alinear texto */
    text-decoration: none; /* Sin subrayado */
    display: inline-block; /* Mostrar en línea */
    font-size: 18px; /* Tamaño de fuente */
    margin: 2px 2px; /* Margen */
    cursor: pointer; /* Cambiar cursor al pasar por encima */
    border-radius: 3px; /* Bordes redondeados */
    transition-duration: 0.4s; /* Duración de la transición */
}

.buttonMensaje:hover,
.buttonReproducir:hover {
    background-color: white; /* Color de fondo al pasar por encima */
    color: black; /* Color del texto al pasar por encima */
    border: 2px solid #4CAF50; /* Borde al pasar por encima */
}

.button {
    background-color: red;
    /* Green */
    border: none;
    color: white;

    text-align: center;
    text-decoration: none;
    display: inline-block;

    -webkit-transition-duration: 0.4s;
    /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 8px;
}

.buttonsalir {
    background-color: red;
    color: black;
    border: 0px solid #f44336;
    padding: 0.5% 8%;
    font-weight: bold
}

.buttonsalir:hover {
    background-color: white;
    color: red;
}

.buttonentrar {
    background-color: white;
    color: black;
    border: 2px solid #555555;
    padding: 0.5% 8%;
    font-size: 16px;
    width: 100%
}

.buttonentrar:hover {
    background-color: #555555;
    color: white;
}

/*INICIO DATATABLES*/
.dataTable {
    /*background: none repeat scroll 0 0 #DCD8D8;*/
    width: 100%;
    padding: 2px;
    /*margin: auto;*/
}

.dataTables_length {
    float: left;
    padding-left: 10px;
    padding-right: 10px;
}

.dataTables_filter {
    float: right;
    padding-left: 10px;
    padding-right: 10px;
}

.dataTable thead th,
.dataTable tfoot th {
    color: #FFF;
    font-weight: bold;
    padding: 5px 10px;
    text-align: center;
    cursor: pointer;
}

.dataTable thead th.head0,
.dataTable tfoot th.head0 {
    background: none repeat scroll 0 0 #51A8B1;
    border-right: 1px dashed #fff;
    text-align: center;
}

.dataTable thead th.head1,
.dataTable tfoot th.head1 {
    background: none repeat scroll 0 0 #51A8B1;
    ;
    border-right: 1px dashed #fff;
    text-align: center;
}

.dataTable tbody tr td {
    border-top: 1px dashed #4DAEDC;
    padding: 5px 5px;
    font-weight: normal;
    color: #000;
    font-size: 11px;
    word-break: break-all;
    text-align: center;
}

.dataTable tbody tr:hover {
    background: none repeat scroll 0 0 #DDDDDD;
}

.dataTable tbody tr:first-child td {
    border-top: 0 none;
}

.dataTable .con1 {
    background: none repeat scroll 0 0 #EEEEEE;
}

.dataTable .con0 {
    background: none repeat scroll 0 0 #F7F7F7;
}

.dataTable thead th.sorting {
    background-image: url("imagenes/sort-neutral.png");
    background-position: right 5px;
    background-repeat: no-repeat;
}

.dataTable thead th.sorting_asc {
    background-image: url("imagenes/sort_up.png");
    background-position: right 6px;
    background-repeat: no-repeat;
}

.dataTable thead th.sorting_desc {
    background-image: url("imagenes/sort_down.png");
    background-position: right 6px;
    background-repeat: no-repeat;
}

.dataTables_wrapper {
    /*padding: 10px;
    border: #E5E4D7 thick solid;*/
    width: 100%;
    padding: 2px;
    /*border-radius: 3px 3px 3px 3px;*/
    position: relative;
}

.dataTables_info {
    padding: 10px;
    font-weight: bold;
    text-align: center;
}

.paging_full_numbers {
    position: relative;
    text-align: center;
    padding: 10px;
}

.paging_full_numbers .paginate_button_disabled {
    color: #999999;
    padding: 10px;
}

/*.dataTables_filter input{
    background: url("../img/form_inp_fino.gif") no-repeat scroll 0 0 transparent;
    border: medium none;
    color: #393939;
    height: 25px;
    padding: 6px 6px 0;
    width: 162px;	
}*/
.paging_full_numbers .paginate_button {
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    cursor: pointer;
    display: inline-block;
    margin-left: 5px;
    padding: 2px 8px;
}

.paging_full_numbers .paginate_active,
.paging_full_numbers .paginate_button:active {
    border: 1px solid #405A87;
    border-radius: 3px 3px 3px 3px;
    color: #FFFFFF;
    display: inline-block;
    margin-left: 5px;
    padding: 2px 8px;
}

.paging_full_numbers .paginate_button {
    border: 1px solid #CCCCCC;
    border-radius: 3px 3px 3px 3px;
    cursor: pointer;
    display: inline-block;
    margin-left: 5px;
    padding: 2px 8px;
}

.paging_full_numbers .paginate_button:hover {
    background: none repeat scroll 0 0 #EEEEEE;
    box-shadow: 1px 1px 2px #CCCCCC inset;
}

.last {
    clear: right;
    margin-right: 0 !important;
}

tbody tr.even:hover,
tbody tr.even td.highlighted {
    background-color: #BFD9EF;
}

tbody tr.odd:hover,
tbody tr.odd td.highlighted {
    background-color: #BFD9EF;
}

tr.even:hover {
    background-color: #BFD9EF;
}

tr.even:hover td.sorting_1 {
    background-color: #DDFF75;
}

tr.odd:hover {
    background-color: #BFD9EF;
}

tr.odd:hover td.sorting_1 {
    background-color: #fcfcfc;
}

tr.odd.gradeA td.sorting_1 {
    background-color: #fefefe;
}

tr.even.gradeA td.sorting_1 {
    background-color: #F5F5F5;
}

tr.odd.gradeA {
    background-color: #fff;
}

tr.even.gradeA {
    background-color: #f1f1f1;
}

div.DTTT_container {
    float: right;
    margin-bottom: 1em;
}

button.DTTT_button {
    position: relative;
    float: left;
    height: 30px;
    margin-right: 3px;
    padding: 3px 5px;
    border: 1px solid #d0d0d0;
    background-color: #fff;
    cursor: pointer;
    /*cursor: hand;*/
}

button.DTTT_button::-moz-focus-inner {
    border: none !important;
    padding: 0;
}


/*
 * BUTTON_STYLES
 * Action specific button styles
*/

button.DTTT_button_csv {
    padding-right: 30px;
    background: url(../media/images/csv.png) no-repeat center right;
}

button.DTTT_button_csv_hover {
    padding-right: 30px;
    border: 1px solid #999;
    background: #f0f0f0 url(../media/images/csv_hover.png) no-repeat center right;
}


button.DTTT_button_xls {
    padding-right: 30px;
    background: url(../media/images/xls.png) no-repeat center right;
}

button.DTTT_button_xls_hover {
    padding-right: 30px;
    border: 1px solid #999;
    background: #f0f0f0 url(../media/images/xls_hover.png) no-repeat center right;
}


button.DTTT_button_copy {
    padding-right: 30px;
    background: url(../media/images/copy.png) no-repeat center right;
}

button.DTTT_button_copy_hover {
    padding-right: 30px;
    border: 1px solid #999;
    background: #f0f0f0 url(../media/images/copy_hover.png) no-repeat center right;
}


button.DTTT_button_pdf {
    padding-right: 30px;
    background: url(../media/images/pdf.png) no-repeat center right;
}

button.DTTT_button_pdf_hover {
    padding-right: 30px;
    border: 1px solid #999;
    background: #f0f0f0 url(../media/images/pdf_hover.png) no-repeat center right;
}


button.DTTT_button_print {
    padding-right: 30px;
    background: url(../media/images/print.png) no-repeat center right;
}

button.DTTT_button_print_hover {
    padding-right: 30px;
    border: 1px solid #999;
    background: #f0f0f0 url(../media/images/print_hover.png) no-repeat center right;
}


button.DTTT_button_text {}

button.DTTT_button_text_hover {
    border: 1px solid #999;
    background-color: #f0f0f0;
}


button.DTTT_button_collection {
    padding-right: 17px;
    background: url(../media/images/collection.png) no-repeat center right;
}

button.DTTT_button_collection_hover {
    padding-right: 17px;
    border: 1px solid #999;
    background: #f0f0f0 url(../media/images/collection_hover.png) no-repeat center right;
}


/*
 * SELECTING
 * Row selection styles
*/
table.DTTT_selectable tbody tr {
    cursor: pointer;
    /*cursor: hand;*/
}

tr.DTTT_selected.odd {
    background-color: #9FAFD1;
}

tr.DTTT_selected.odd td.sorting_1 {
    background-color: #9FAFD1;
}

tr.DTTT_selected.odd td.sorting_2 {
    background-color: #9FAFD1;
}

tr.DTTT_selected.odd td.sorting_3 {
    background-color: #9FAFD1;
}


tr.DTTT_selected.even {
    background-color: #B0BED9;
}

tr.DTTT_selected.even td.sorting_1 {
    background-color: #B0BED9;
}

tr.DTTT_selected.even td.sorting_2 {
    background-color: #B0BED9;
}

tr.DTTT_selected.even td.sorting_3 {
    background-color: #B0BED9;
}


/*
 * COLLECTIONS
 * Drop down list (collection) styles
*/

div.DTTT_collection {
    width: 150px;
    padding: 3px;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
    overflow: hidden;
    z-index: 2002;
}

div.DTTT_collection_background {
    background: transparent url(../media/images/background.png) repeat top left;
    z-index: 2001;
}

div.DTTT_collection button.DTTT_button {
    float: none;
    width: 100%;
    margin-bottom: 2px;
    background-color: white;
}


/*
 * PRINTING
 * Print display styles
*/

.DTTT_print_info {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 150px;
    margin-left: -200px;
    margin-top: -75px;
    text-align: center;
    background-color: #3f3f3f;
    color: white;
    padding: 10px 30px;
    z-index: 222;

    opacity: 0.9;

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
}

.DTTT_print_info h6 {
    font-weight: normal;
    font-size: 28px;
    line-height: 28px;
    margin: 1em;
}

.DTTT_print_info p {
    font-size: 14px;
    line-height: 20px;
}

.DTTT_disabled {
    color: #999;
}

/*FIN DATATABLES*/
/*INICIO ETIQUETAS*/
h1 {
    text-align: center;
}

table td {
    padding: 3px;
}

/*FIN ETIQUETAS*/
.cursor {
    cursor: pointer;
}

table.consultaGlobal th {
    text-align: left;
    padding: 3px;
}

.flechaFlotante {
    position: fixed;
    top: 50%;
    right: 0;
    cursor: pointer;
}

input {
    font-family: 'Ubuntu', sans-serif;
}

input,
select,
textArea {
    -webkit-transition: box-shadow .3s;
    transition: box-shadow .3s;
}

input:focus,
select:focus,
textArea:focus {
    box-shadow: 0px 0px 10px #51A8B1;
}

input[type="button"],
input[type="submit"],
select,
input[type="select"],
input[type="checkbox"],
label {
    cursor: pointer;
}

input[type="button"]:hover,
input[type="submit"]:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
}

/*INICIO TOOLTIP*/
[data-tooltip] {
    position: relative;
    z-index: 2;
    cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
    visibility: hidden;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-bottom: 5px;
    margin-left: -80px;
    padding: 7px;
    width: 160px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background-color: #000;
    background-color: hsla(0, 0%, 20%, 0.9);
    color: #fff;
    content: attr(data-tooltip);
    text-align: center;
    font-size: 14px;
    line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
    position: absolute;
    bottom: 150%;
    left: 50%;
    margin-left: -5px;
    width: 0;
    border-top: 5px solid #000;
    border-top: 5px solid hsla(0, 0%, 20%, 0.9);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    content: " ";
    font-size: 0;
    line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
}

/*FIN TOOLTIP*/
.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
}

.bordeGrueso {
    border: #51A8B1 thick solid;
}

.opacidad {
    opacity: 0.7;
    filter: alpha(opacity=70);
}

/* -------------------------- label para FLOTA --------------------------  */
.labelPar,
.labelMov,
.labelSinTra,
.labelPar2,
.labelMov2,
.labelSinTra2,
.labelPar3,
.labelMov3,
.labelSinTra3,
.labelPar4,
.labelMov4,
.labelSinTra4 {
    color: white;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    border: 2px solid black;
    white-space: nowrap;
    padding-left: 3px;
    padding-right: 3px;
}

.labelPar,
.labelPar2,
.labelPar3,
.labelPar4 {
    background-color: red;
}

.labelMov,
.labelMov2,
.labelMov3,
.labelMov4 {
    background-color: green;
}

.labelSinTra,
.labelSinTra2,
.labelSinTra3,
.labelSinTra4 {
    background-color: orange;
}

.labelPar2,
.labelMov2,
.labelSinTra2 {
    font-size: 15px;
}

.labelPar3,
.labelMov3,
.labelSinTra3 {
    font-size: 20px;
}

.labelPar4,
.labelMov4,
.labelSinTr4 {
    font-size: 25px;
}

.labelClima {
    color: rgb(0, 0, 0);
    font-size: 13px;
    text-align: center;
    border: 1px solid #FFFFFF;
    white-space: nowrap;
    padding-left: 4px;
    padding-right: 4px;
    background-color: #FFFFFF;
}

/* -------------------------------------------------------------------  */

#tabUltAle td,
#tabUltAle th {
    border: #51A8B1 thin solid;
    font-size: 10px;
}

#tabUltAle th {
    padding: 5px;
    background-color: #51A8B1;
}

.classPunto {
    color: #000000;
    background-color: #51A8B1;
    font-size: 9px;
    font-weight: bold;
    text-align: center;
    border: 2px solid black;
    white-space: nowrap;
    padding-left: 3px;
    padding-right: 3px;
}

.hhmmss {
    width: 60px;
}

.thtdsm {
    font-size: 9px !important;
    width: 50px;
    word-break: break-all;
    padding: 5px;
}

.thtdmd {
    font-size: 9px !important;
    width: 150px;
    word-break: break-all;
    padding: 5px;
}

.thtdlg {
    font-size: 9px !important;
    width: 250px;
    word-break: break-all;
    padding: 5px;
}

.image-left {
    float: left;
    cursor: pointer;
}

.image-right {
    float: right;
    cursor: pointer;
}

.image-center {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.buttonManual {
    appearance: none;
    background-color: #51A8B1;
    /*#2ea44f; */
    border: 1px solid rgba(27, 31, 35, .15);
    border-radius: 6px;
    box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
    box-sizing: border-box;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    padding: 6px 16px;
    position: relative;
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: middle;
    white-space: nowrap;
}

.buttonManual:focus:not(:focus-visible):not(.focus-visible) {
    box-shadow: none;
    outline: none;
}

.buttonManual:hover {
    background-color: #2c974b;
}

.buttonManual:focus {
    box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
    outline: none;
}

.buttonManual:disabled {
    background-color: #94d3a2;
    border-color: rgba(27, 31, 35, .1);
    color: rgba(255, 255, 255, .8);
    cursor: default;
}

.buttonManual:active {
    background-color: #298e46;
    box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
}

.custom-alert {
    position: fixed;
    bottom: 70px;
    right: 100px;
    background-color:  #29b5fb;
    /* Color de fondo de la alerta */
    color: white;
    font-family: 'Ubuntu', sans-serif;
    font-size: 20px;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.custom-alert.hide {
    display: none;
}

.select2-container {
    min-width: 200px; /* Ajusta esto según tus necesidades para los selectores con busqueda*/
}


table.redondeada {
    border-collapse: separate; /* Necesario para que border-radius funcione */
    border-spacing: 0; /* Quita el espacio entre celdas */
    width: 100%;
    border: none; /*1px solid #ddd; */
}
table.redondeada th,
table.redondeada td {
    padding: 10px;
    border: none; /*1px solid #ddd; */
    text-align: center;
}
table.redondeada th:first-child {
   /* border-top-left-radius: 10px; /* Redondea la esquina superior izquierda */
}
table.redondeada th:last-child {
    border-top-right-radius: 18px; /* Redondea la esquina superior derecha */
}
table.redondeada tr:last-child td:first-child {
    border-bottom-left-radius: 18px; /* Redondea la esquina inferior izquierda */
    border-left: 1px solid #ddd; /* Borde izquierdo de la última fila */
    border-bottom: 1px solid #ddd; /* Borde inferior de la última fila */
}
table.redondeada tr:last-child td:last-child {
    border-bottom-right-radius: 18px; /* Redondea la esquina inferior derecha */
    border-right: 1px solid #ddd; /* Borde derecho de la última fila */
    border-bottom: 1px solid #ddd; /* Borde inferior de la última fila */
}
table.redondeada tr:last-child td:not(:first-child):not(:last-child) {
    border-bottom: 1px solid #ddd; /* Borde inferior de las celdas intermedias de la última fila */
}

/* esto es para ocultar las contraseñas  */
.password-cell {
    position: relative;
    cursor: pointer;
}

.password-cell::before {
    content: '••••••••';
    display: block;
    font-size: 16px; /* Ajusta según el tamaño de fuente deseado */
    color: black; /* Color de los asteriscos */
}

.password-cell .actual-password {
    display: none;
}

.password-cell:hover .actual-password {
    display: block;
}

.password-cell:hover::before {
    display: none;
}

/*---------------------------- */