#numpad {
  display: none;
  position: absolute;
  background-color: #333;
  padding: 10px;
  border-radius: 10px;
  width: 217px;
  z-index: 11000 !important;
}

#numpad button {
  width: 50px;
  height: 50px;
  margin: 5px;
  font-size: 20px;
  color: white;
  background: #444;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#numpad button:hover {
  background-color: #666;
}

.numpad-row {
  display: flex;
  justify-content: center;
}


#contenedor_scan_moto video, canvas {
  width: 150px;
  height: 75px;
}

#contenedor_scan_moto video.drawingBuffer, canvas.drawingBuffer {
  display: none;
}

/* ******************************* */
/* *                             * */
/* *       ESTILOS GENERALES     * */
/* *                             * */
/* ******************************* */


.p5 {
  padding: 5px;
}

.p25 {
  padding: 25px;
}

/* *************************** */
/* *                         * */
/* *     ESTILOS SIDEBAR     * */
/* *                         * */
/* *************************** */

.sidebar .username {
  color: #000;
  text-transform: uppercase;
  font-weight: bolder;
  font-size: 1em;
}


.validate-input input:valid {
  color: green;
}
.validate-input input:invalid {
	font-weight: bolder;
  	color: red;
}


.fa-beat {
  -webkit-animation: fa-beat 1s infinite linear;
  animation: fa-beat 1s infinite linear;
}
@-webkit-keyframes fa-beat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fa-beat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}


.small-box .icon>i.fa, .small-box .icon>i.fab, .small-box .icon>i.far, .small-box .icon>i.fas, .small-box .icon>i.glyphicon, .small-box .icon>i.ion {
    font-size: 60px;
    top: 20px;
    
}


/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}



.fa-beat {
  -webkit-animation: fa-beat 1s infinite linear;
  animation: fa-beat 1s infinite linear;
}
@-webkit-keyframes fa-beat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes fa-beat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}


/* ESTILOS DATATABLE */
table.dataTable tbody th, table.dataTable tbody td {
    padding: 4px 10px; /* e.g. change 8x to 4px here */
}

table.dataTable td, table.dataTable th{
padding: 2px 10px;
width: 1px;
/*white-space: normal;*/
white-space: nowrap;
}

table td, table th{
padding: 2px 10px;
width: 1px;

white-space: nowrap;
}


/*SELECT 2*/
.select2-selection__rendered {
    line-height: 31px !important;
}
.select2-container .select2-selection--single {
    height: 35px !important;
}
.select2-selection__arrow {
    height: 34px !important;
}

body.kill-all-select2-dropdowns {
  .select2-dropdown {
    display: none !important;
  }
  .select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple
  {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}

.select2-container {
  height: 38px;
}

.fila-par {
  margin-left: 0;
  background-color: white;
}

.fila-par:hover {
  margin-left: 0;
  background-color: #e6ffea;
}

.fila-impar:hover {
  margin-left: 0;
  background-color: #e6ffea;
}

.fila-impar {
  margin-left: 0;
  background-color: #F5F5F5;
}


/* ******************************** */
/* *                              * */
/* *      NUEVAS CARDS VIAJES     * */
/* *                              * */
/* ******************************** */

.col-viaje {
  border-bottom: 1px solid #e4e3e3;
}

.card-viaje {
  box-shadow: none;
  margin-bottom: 0;
}

.card-body-viaje {
  padding: 0;
  padding-left: 50px;
}

.card-tools-viaje {
  color: lightslategrey;
}

.texto-estado-viaje {
  padding-left: 47px;
}

.card-header-viaje {
  background-color: transparent;
  border-bottom: 0;
  padding: .75rem 0.25rem;
  position: relative;
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
}

#divViajes .col-viaje:not(:last-child) {
  border-bottom: 1px solid #e4e3e3;
}

.icon-estado-viaje {
  font-size: 0.86em;
}

.circle-icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  text-align: center;
  line-height: 27px; /* Asegúrate de que esto coincida con el alto */
  color: white;
}

.texto-titulo {
  font-weight: 500;
  font-size: 1.12em;
  color: rgba(0, 0, 0, 1); /* Color un poco más suave que negro puro */
}

.border-bt {
  border-bottom: 1px solid #e4e3e3;
}

#contenedor_scan_moto video, canvas {
  width: 100%;
  height: 100%;
}