.chat {
      border: 1px solid #ccc;
      padding: 10px;
      margin: 0 auto;
}
.message {
      margin-bottom: 10px;
}
.message .name {
      font-weight: bold;
}
.message .date {
      font-size: 0.8em;
      color: #888;
}

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

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

.swal2-container {
    z-index: 300000 !important;
  }

input.larger {
  width: 25px;
  height: 25px;
}

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

/* ******************************* */
/* *                             * */
/* *       ESTILOS LOGO     * */
/* *                             * */
/* ******************************* */

.cont-logo {
  margin-top: 40px;
}

.brand_logo_container {
      /*position: absolute;*/
      height: 160px;
      width: 160px;
      border-radius: 50%;
      /*background: #590202;*/
      padding: 10px;
      text-align: center;

      animation-name: spinning-circle;
      animation-duration: 10s;
      animation-iteration-count: infinite;
}

@-webkit-keyframes spinning-circle {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    25% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }

    50% {
        -webkit-transform: rotate(-30deg);
        transform: rotate(-30deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

.brand_logo {
      height: 150px;
      width: 150px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid white;
}

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

.tag-percent-meli {
    border: 1.2px solid rgba(0,0,0,.25);
    -webkit-border-radius: 56px;
    border-radius: 10px;
    color: rgba(0,0,0,.9);
    cursor: pointer;
    font-size: 12px;
    margin-right: 6px;
    padding: 10px 10px 10px 10px;
}

.tag-estado-meli {
    border: 1.2px solid rgba(0,0,0,.25);
    -webkit-border-radius: 56px;
    border-radius: 10px;
    color: rgba(0,0,0,.9);
    cursor: pointer;
    font-size: 12px;
    margin-right: 6px;
    padding: 10px 10px 10px 10px;
}

.tag-selected {
     background-color: blue;
     color: white;
}

.tag-estado-meli:hover {
    background-color: lightblue;
}

.estado-tablet {
  transition: transform .3s; /* Animation */
}

.estado-tablet:hover {
    transform: scale(1.02);
    background-color: rgba(0,0,0,.02);
}

.p5 {
  padding: 5px;
}

.p25 {
  padding: 25px;
}

.fila-venta {
  background-color: white;
}

.fila-venta:hover {
  background-color: #F5F5F5;
}

.fila-venta-adm {
  background-color: white;
}

.fila-venta-adm:hover {
  background-color: #e6ffea;
}

.fila-venta-adm-alt:hover {
  background-color: #e6ffea;
}

.fila-venta-adm-alt {
  background-color: #F5F5F5;
}

.fila-venta-adm:hover {
  background-color: #e6ffea;
}

.bdg-st-viaje {
  font-size: 1em;
  cursor: pointer;
  font-weight: normal;
}

.bdg-st-viaje:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4) 0 0);
}

.over-blue-pointer:hover {
  color: blue;
  cursor: pointer;
}

.solicitar-blinking {
 -webkit-animation: solicitar-blinker 1s infinite; /* Safari 4+ */
  -moz-animation:    solicitar-blinker 1s infinite; /* Fx 5+ */
  -o-animation:      solicitar-blinker 1s infinite; /* Opera 12+ */
  animation:         solicitar-blinker 1s infinite; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes solicitar-blinker {
  0%, 49% {
      background-color: #007bff;
  }
  50%, 100% {
      background-color: #003874;
  }
  }


.soli-pend-retiro-acept-blinking {
 -webkit-animation: soli-pend-retiro-acept-blinker 1s infinite; /* Safari 4+ */
  -moz-animation:    soli-pend-retiro-acept-blinker 1s infinite; /* Fx 5+ */
  -o-animation:      soli-pend-retiro-acept-blinker 1s infinite; /* Opera 12+ */
  animation:         soli-pend-retiro-acept-blinker 1s infinite; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes soli-pend-retiro-acept-blinker {
  0%, 49% {
      color: #fff;
      background-color: #c9b91a;
  }
  50%, 100% {
    color: #fff;
      background-color: #e53b0c;
  }
  }

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



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


.mapouter {
  display: table;
}

.gmap_canvas {
  overflow: hidden;
  position: relative;
  height: 180px;
  width: 100%;
  background: #fff;
}



.gmap_canvas iframe {
  position: relative !important;
  z-index: 2 !important;
}

.gmap_canvas a {
  color: #fff !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 0 !important;
}


.gmap_canvas_escaneo {
  overflow: hidden;
  position: relative;
  height: 240px;
  width: 100%;
  background: #fff;
}

.gmap_canvas_escaneo iframe {
  position: relative !important;
  z-index: 2 !important;
}

.gmap_canvas_escaneo a {
  color: #fff !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 0 !important;
}