/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}




.red-row{ /*background-*/color: rgb(255, 118, 118) !important; } 
/* ==========================================================================
   Busqueda de Movimientos Historicos
   ========================================================================== */



#frm-historic-list {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dotted #ccc;
  padding-top: 0px;
}


#frm-historic-list a {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 7px;
  padding-right: 7px;
  background: #647CA0;
  margin-left: 10px;
  color: #fff;
  border-radius: 3px;
}



/* ==========================================================================
   Layout del Sitio
   ========================================================================== */

html {
  height: 100%;
}

body {
  height: 100%;
  width: 100%;
  display: block;
  background: #efeefe !important;
  overflow-x: hidden;
}


#error-response {
  width: 80%;
  height: auto;
  margin: 0 auto;
  display: none;
  position: absolute;
  z-index: 99999999;
  height: 80%;
  padding: 50px;
  background: #fff;
  top: 10%;
  left: 10%;
  font-size: 12px;
  box-shadow: 1px 1px 1px #9C9C9C;
  border-radius: 5px;
}

#close-response {
  position: absolute;
  right: 10px;
  top: 10px;
  display: table;
}

#browse-error {
   margin-left: 10px;
   font-size: 12px;
   background: #344D73;
   display: table;
   color: #fff;
   float: right;
   padding: 3px;
   border-radius: 2px;
   padding-left: 5px;
   padding-right: 5px;
}



#main-wrapper {
    margin: 0 auto;
    height: 100%;
    width: 100%;
    display: block;
}

#loading-img {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: none;
    width : 100px ;
    height: 100px;
}

#connection {
  position: absolute;
  top: 5px;
  left: 2px;
  border: 1px solid #ccc;
  background: #fff;
  padding: 2px;
  padding-left: 10px;
  opacity: .6;
  border-radius: 2px;
  padding-right: 10px;
  z-index: 999;
}

#connection strong, #connection div, #connection span, #connection img {
  float: left;
}

#connection img.refresh-img {
    width: 20px;
    display: none;
}

.circle-status {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  float: left;
  margin-left: 10px;
  margin-top: 2px;
  margin-right: 10px;
}

.circle-status.error {
  background: #ff0000;
}

.circle-status.ok {
  background: #00ff00;
}





#top-bar-elements {
  position: absolute;
  right: 0px;
  top: 0px;
  padding-right: 5px;
  z-index: 999;
}


#search-box, #app-buttons {
  display: table;
  float: right;
}

#search-box {
  margin-top: 2px;
}

#app-buttons {
  position: relative;
  margin-right: 50px;
  margin-top: 4px;
  padding-top: 0px;
}

#app-buttons a, .app-menu {
  height: 27px;
  padding-top: 6px;
  padding-left: 7px;
  padding-right: 7px;
  background: #CED6DE;
  display: table;
  font-weight: bold;
  color: #666;
  font-size: 12px;
  margin-left: 24px;
  float: left;
  border-radius: 3px;
}

.app-menu .app-content-row {
  padding-left: 16px;/*
  padding-right: 10px;
  text-align: center;*/
  font-weight: normal;
}


.app-menu .app-content-row input[type=checkbox] {
  margin-right: 4px;
}


.app-buttons a:hover {
  background: #A2B6CA;
  color: #fff;
}


/* Menu de la Aplicacion **/
.app-menu  {
  position: relative;
}


.app-menu ul {
  z-index: 999999;
  position: absolute;
  display: none !important;
  top: 27px;
  right: 0px;
  padding: 0px;
  margin: 0px;
  border-radius: 3px;
  background: #fff;
  width: 170px;
  box-shadow: 1px 1px 1px #ccc;
  padding-top: 10px;
  padding-bottom: 10px;
}

.app-menu:hover ul {
  display: table !important;
}

.app-menu ul li{
  float: none;
  clear: both;
  width: 100% !important;
  display: table !important;
  padding: 0px;
  margin: 0px;
  font-weight: normal;
  padding-left: 10px;
  padding-right: 10px;
}
.app-menu ul li a{
  width: 100%;
  display: block;
  background: none !important;
  margin: 0px;
  padding: 0px;
  font-weight: normal !important;  
  border-radius: 0px !important;
  padding-top: 5px !important;
  margin-left: 0px !important;
}
.app-menu ul li a:hover{
  background: #ccc;
  color: #666;
}




ul#history-list {
  background: #fff;
  border-radius: 5px 0px 5px 5px;
  position: absolute;
  top: 26px;
  right: -1px;
  width: 150px;
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 0px;
  z-index: 999;
}

ul#history-list li {
  display: block;
  padding: 0px;
  width: 100%;
  height: 30px;
  padding-bottom:10px;
  border-bottom: 1px solid #ccc;
}


ul#history-list li a {
  display: block;
  background: transparent;
  padding-left: 10px;
  margin: 0px;
}

ul#history-list li a span.des-number {
  width: 50px;
  float : left;
  font-weight: bold;
  border-right: 1px dotted #ccc;
}
ul#history-list li a span.date {
  float: right;
  font-weight: normal;
  padding-left: 10px;
}
ul#history-list li a span.date i {
  margin-right: 5px;
}

#search-box .wrapper {
  position: relative;
}


#search-box input {
  width: 200px;
  height: 30px;
  border: none;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 12px;
  text-align: left;
  background: url("../img/search.png") no-repeat right #fff;
  background-size: contain;
  padding-left: 10px;
  z-index: 999;
}

span#count-results {
  position: absolute;
  top: 35px;
  right: 25px;
  color: #666;
  z-index: 999;
  padding: 4px;
  background: #ececec;
  border-radius: 2px;
}

ul#search-results {
  max-height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
  display: none;
  background: #fff;
  border-radius: 5px;
  position: absolute;
  top: 30px;
  right: 0px;
  width: 600px;
  border: 1px solid #ccc;
  padding: 20px;
  margin-top: 0px;
  z-index: 999;
}

ul#search-results span.mov-id {
  color: #666;
  font-weight: bold;
  display: block; 
  float: left;
  min-width: 50px;
  margin-right: 10px;
  border-right: 1px dotted #777;
  padding-right: 10px;
}

ul#search-results span.fieldname {
  color: #666;
  font-weight: normal;
  text-decoration: underline;
}

#search-results li {
  height: 25px;
  border-bottom: 1px solid #ccc;
  width: 100%;
  padding-bottom : 5px;
  margin-bottom: 5px;
  display: table;
}

#search-results li a {
  color: #666;
  text-decoration: none;
}
#search-results li a:hover {
  color: #666;
  text-decoration: underline;
}






/* ==========================================
   ------------------------------------------
   ========================================== */



#minimized {
    width : 100%;
    height: 20px;
    position: absolute;
    bottom: 0px;
    left: 0px;    
}

#minimized a {    
    height: 15px;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 10px;
    background: blue;   
    padding-top: 5px;
    padding-bottom: 3px;
    color: #fff;
    border-radius: 5px 5px 0px 0px;
}
#minimized a:hover {
    background: red;   
}

#group-by {
    width: 100%;
    height: 120px;
    display: table;
    overflow-y: scroll;
    margin: 0px;
    padding: 0px;
}

#group-by li {
  width :100%;
  float: none;
  display: block;
}

#group-by li a  {
  height: 30px;
  background: transparent;
  color: #666;
  text-decoration: none;
  width: 100%;
  display: block;
  padding: 5px;
}

#group-by li a:hover  {
  height: 30px;
  background: transparent;
  color: #fff;
  text-decoration: none;
  background: #B4C1D7;
  color: #516D90;
}



.group h1 .buttons {
  position: absolute;
  right: 6px;
  top: 5px;
  display: none;
}

.square-group-sq h1 .buttons {  
  right: 10px;
  top: 11px;
}
.row-group-row h1  .buttons {
  right: 10px;
  top: -7px;
}
.square-group-sq a {  
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
    overflow-x: hidden;
}
.square-group-sq a:not(.split) {  
  width: 90%;
}

.group h1 .buttons a {
  padding: 3px;
  background: #fff;
  border-radius: 3px;
  color: #666;
  width: 26px;
  float: left;
  margin-right: 3px;
}
.group h1 .buttons a:hover {
  text-decoration: none;
  background: #ccc;
  color:#666;
}


.group h1 .buttons a i {
  padding: 3px;
  background: #fff;
  box-shadow: 1px 1px 1px #ccc;
  border-radius: 3px;
  color: #666;
}




#group-options {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 10px;
    width: 350px;
    display: table;
    background: #fff;
    border: 1px solid #ccc;
    z-index: 9999;
    background: #F9F8F8;
    box-shadow: 1px 1px 1px 1px #ccc;
    border-radius: 0px 0px 4px 4px;
}

#group-options a {
    width: 100%;
    height: 20px;
    color: #666;
    font-size: 12px;
} #group-options a:hover {
    color: #000;
    background-color: #efeefe;
    text-decoration: none;
}

#group-options .groups-visibility {
    margin-top: 6px;
    width: 100%;
    display: table;
    margin-bottom: 6px;
}

#group-options .buttons {
    display: table;
    margin: 0 auto;
    margin-top: 10px;
}
 


/*
#group-options a.group-option-btn {
    width: 60px;
    float: none;
    width: auto;
    display: table;
    height: 20px;
    padding: 6px;
    background: blue;
    margin-right: 5px;
    color: #fff;
    font-size: 12px;
    margin: 0 auto;
} #group-options a.group-option-btn:hover {
    color: #ccc;
    background-color: #efeefe;
    text-decoration: none;
}*/




#group-options a.group-option-btn {
  margin: 0 auto;
  margin-top: 5px;
  display: table;
  /* width: 90%; */
  height: 28px;
  color: #fff;
  background: url('../img/bg-btn-tooltip.jpg') repeat-x;
  padding-top: 5px;
  text-align: center;
  margin-top: 10px;
}
#group-options a.group-option-btn:hover {
  background: url('../img/bg-btn-tooltip-hover.jpg') repeat-x;
  padding-top: 5px;
  text-align: center;
  color: #fff;
  text-decoration: none;
}





#group-options a.last-btn {
    margin-right: 0px;
}



.group-toggle-visible {
    display: table;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    color: #666;
    width: 100%;
    font-size: 12px;
}


.group-toggle-visible span, .group-toggle-visible input[type=checkbox] {
    float: left;
}
.group-toggle-visible span {
    width: 300px;
    padding-top: 3px;
    margin-left: 10px;
    text-align:left;
}



/* ==========================================
   ------------------------------------------
   ========================================== */


#options {
  width: 100%;
  height : 0px;
  background: #ccc;
  position: absolute;
  top: 0px;
  left: 0px;
}

#buttons {
  position: absolute;
  top: 0px;
  right: 0px;  
  z-index: 999;
}



#alarmas {
    height: 100%;
    width: 100%;
}



/* ==========================================================================
   Box
   ========================================================================== */

.msg-box {
  display: table;
  padding: 20px;
  border: 1px;
  border-color: #ccc;
  background: #fff;
  color: #666;
  margin: 0 auto;
}


.msg-box.full-width {
  width: 100%
}

.msg-box.error {
  color: #fff;
  background: #red;
}


/* ==========================================================================
   Layout del Group
   ========================================================================== */

/*
.marquee {
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 10s linear infinite;
}

.marquee:hover {
    animation-play-state: paused
}


@keyframes marquee {
    0%   { text-indent: 100% }
    100% { text-indent: -50% } // depending on text length...
}
*/

.full-group  h1 {
    font-size: 13px;
    width: 100%;
    display: block;
    margin: 0px;
    margin-bottom: 10px;
    background: #75A7BC;
    color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    background-image: none;
}


.group {/*
    padding-top: 10px;*/
    position: relative;
}

.group a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    width: 100%;
    height: 100%;
    display: block;
}
.group a:hover {
    color: #D6D6D6;
    text-decoration: none;
    font-weight: bold;
}


div.items-wrapper {
    display: table;
    margin: 0 auto;
    overflow: hidden;
    /*background: green;*/
}


.column-group-wrapper {
    height:100%;
    display: table;
    margin: 0 auto;
}



.column-group-col {/*
    overflow-x: hidden;*/
    float:left;
    height:100%;
    display: table;
    border-right: 1px solid #ccc;
    overflow: hidden;
}

.alarma.alarmed.taller, .column-group-col .alarma.justified.taller, .alarma.checked.taller  {
  width: 89px;
  height: 75px;
}


.column-group-col h1 {
    /*font-size: 13px;*/
    font-size: 12px;
    width: 100%;
    max-width: 100%;
    display: block;
    margin: 0px;
    margin-bottom: 10px;
    /*background: url('../img/bg-red.jpg') repeat-x;*/
    background-color: #547385;
    color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    background-image: none;

/*  Prueba */
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;

}


/*
.column-group-col h1 a {
  white-space: nowrap;
}*/


.square-group-sq {
    width: 95%;
    margin: 0 auto;
    display: table;
    border: 1px solid #ccc;
    margin-bottom: 6px;
    /*padding: 6px;*/
}





.square-group-sq h1 {
    font-size: 13px;
    width: 100%;
    display: block;
    margin: 0px;
    margin-bottom: 10px;
    background: #2F738F;
    color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
}




.row-group-row {
    padding-bottom: 5px;
    display: table;
    border-bottom: 1px solid #666;
    margin-bottom: 6px;
    width: 100%;

}


.row-group-row h1 {
    background: none;
    color: #666;
    width: 100%;
    font-size: 11px;
    border-bottom: 1px solid #ccc;
    height: auto;
    margin: 0px;
    padding-top: 3px;
    padding-bottom: 4px;
}


.row-group-row h1 a {
    color: #666;
    font-size: 11px;
}

/* ==========================================================================
   Botonera
   ========================================================================== */


.group .botonera {
    font-size: 20px;
    position: absolute; 
    top: 5px;
    right: 5px;
    color: #fff;
    padding: 0px;
    margin: 0px;
}


.group .botonera a {
    display: table;
    float: left;
    margin-right: 5px;
    color: #fff;
    font-weight: normal;
}

.group .botonera-alt {    
    right: 0px;
    padding-right: 0px;
    padding-left: 5px;
    border-radius: 0px 0px 3px 3px;
}


.botonera  i.fa:hover {
    color: #ccc;
}


/* ==========================================
   ------------------------------------------
   ========================================== */


.row-group-row .botonera {
    top: -4px;
    right: 0px;
    color: #666;
}

.row-group-row i.fa:hover {   
    color: #ccc;
}

/* ==========================================
   ------------------------------------------
   ========================================== */

.full-group .botonera {
    color: #666;
    font-size: 25px;
    top: 0px;
}
.full-group {
    height: 100%;
}

.full-group i.fa:hover {   
    color: #ccc;
}


/* ==========================================
   ------------------------------------------
   ========================================== */


.square-group-sq .botonera {
    top: 7px;
    right: 8px;
}

.square-group-sq i.fa:hover {   
    color: #ccc;
}





#justify {
    position: absolute;
    left: 130px;
    bottom: 40px;
}




/* ==========================================
   --------    MAPA        ------------------
   ========================================== */
.camioneta-sae-icon {
  background: url('../img/markers/camioneta-sae.png') transparent;
  position: relative;
}

.camioneta-sae-ncom {
  background: url('../img/markers/camioneta-sae-ncom.png') transparent;
  position: relative;
}


.moto-icon {
  background: url('../img/markers/moto-patente.png') transparent;
  position: relative;
}


.moto-ncom {
  background: url('../img/markers/moto-ncom.png') transparent;
}


.moto-icon span,  .camioneta-sae-icon span {
  position: absolute;
    color: #000000;
  top: 1px;
  left: 1px;
  width: 55px;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
}

.camioneta-sae-icon span {
  font-size: 11px;
}




.alarmed-icon {
  background: url('../img/markers/marker-alarmed.png') transparent;
  position: relative;
}


.justified-icon {
  background: url('../img/markers/marker-justified.png') transparent;
  position: relative;
}


.checked-icon {
  background: url('../img/markers/marker-checked.png') transparent;
  position: relative;
}




/* Iconos de Camion */


.truck-sign-alarmed-icon  {
  background: url('../img/markers/truck-alarmed-sign.png') transparent;
  position: relative;  
}



.truck-sign-checked-icon  {
  background: url('../img/markers/truck-checked-sign.png') transparent;
  position: relative;  
}



.truck-sign-justified-icon  {
  background: url('../img/markers/truck-justified-sign.png') transparent;
  position: relative;  
}


.truck-sign-justified-icon span, .truck-sign-alarmed-icon span, .truck-sign-checked-icon span {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 51px;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12px;
}





.truck-sign-justified-icon span {
  color: #3E8E45;
}

.truck-sign-alarmed-icon span {
    color: #D05C5C;
}

.truck-sign-checked-icon span  {
  color: #5A6F9E;
}

.truck-sign-justified-icon span.lines-1, .truck-sign-alarmed-icon span.lines-1, .truck-sign-checked-icon span.lines-1 {
  font-size: 15px;
  padding-top: 7px;
}


.truck-sign-justified-icon span.lines-2, .truck-sign-alarmed-icon span.lines-2, .truck-sign-checked-icon span.lines-2 {
  font-size: 12px;
  padding-top: 2px;
}

.truck-sign-justified-icon span.lines-3, .truck-sign-alarmed-icon span.lines-3, .truck-sign-checked-icon span.lines-3 {
  font-size: 10px;
  padding-top: 2px;
  line-height: 11px
}


.truck-sign-justified-icon span.lines-4, .truck-sign-alarmed-icon span.lines-4, .truck-sign-checked-icon span.lines-4 {
  font-size: 9px;
  padding-top: 0px;
  line-height: 9px;
}






.alarmed-icon span, .justified-icon span, .checked-icon span {
  position: absolute;
  color: #CEC8C8;
  top: 18px;
  left: 1px;
  width: 55px;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 14px;
}

.alarmed-icon span.lines-1, .justified-icon span.lines-1, .checked-icon span.lines-1{
  top: 18px;  
}

.alarmed-icon span.lines-2, .justified-icon span.lines-2, .checked-icon span.lines-2 {
  top: 15px;  
  line-height: 12px;
  font-size: 12px;
}

.alarmed-icon span.lines-3, .justified-icon span.lines-3 , .checked-icon span.lines-3 {
  top: 9px;  
  line-height: 12px;
  font-size: 11px;
}

.alarmed-icon span.lines-4, .justified-icon span.lines-4, .checked-icon span.lines-4 {
  top: 9px;  
  line-height: 10px;
  font-size: 10px;
}






/* ==========================================================================
  Justify win
  ========================================================================== */

.remodal textarea {
  width: 100%;
  height: 100px !important;
  margin-bottom: 10px !important;
  display: block;
}

.remodal {
  text-align: left;
}




a:active {
  text-decoration: none !important;
}
a:link {
  text-decoration: none !important;
}






/* ==========================================================================
   Ventana Modal
   ========================================================================== */

#msg-win {
  text-align: left;
}

#msg-win h1 {
  font-weight: bold;
  font-size: 14px;
}

#msg-win p {
  font-size: 13px;
}

#msg-win p.error {
  padding: 20px;
  background: #AF4545;
  color: #fff;
}

#msg-win p.ok {
  padding: 20px;
  background: #659765;
  color: #fff;
}

#msg-win p.warning {
  padding: 20px;
  background: #AF4545;
  color: #fff;
}


/* ==========================================================================
   Formulario de Modificacoin de Datos
   ========================================================================== */

.side-by-side select, .side-by-side  input {
  height: 30px;
  font-size: 12px;
}

.side-by-side select {
  width: 43%;
  margin-right: 10px;
  float: left;
}


.side-by-side div.values-col {
  float: left;
  width: 43%;
}

.side-by-side div.values-col input, .side-by-side div.values-col select {
  width: 100%;
  margin-bottom: 4px;
}


.side-by-side a {
  float: right;
}

.side-by-side .row {
 display: table;
 width: 100%;
 padding: 10px;
 margin: 0px;
 margin-bottom: 4px;
}


a.icon-btn {
  margin-right: 5px;
  background: #efeefe;
  font-size: 15px;
  display: table;
  padding: 3px 10px 3px 10px;
  border-radius: 2px;
  color: #666;
  box-shadow: 1px 1px 1px #666;  
} 
a.icon-btn:hover {
  color: #000;
}




/* ==========================================================================
   Botones de Mapa
   ========================================================================== */

.map .map-btns {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.map #map-object-detail {
  position: absolute;
  top: 10px;
  left: 47px;
  display: none;
  padding: 5px;
  background: rgba(255,255,255, .99);
  color: #000;
  border-radius: 4px;
  box-shadow: 1px 1px 1px #666;
}
.map .map-btn {
  padding: 5px;
  background: #fff;
  margin-right: 10px;
  font-size: 12px;
  border-radius: 3px;
  height: 27px !important;
  display: table;
  float: left;
  color: #666;
  box-shadow: 1px 1px 1px #666;
}
.map .map-btn:hover {
  color: #000;
  box-shadow: 1px 1px 1px #000;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */
/*
@media only screen and (max-width: 1200px) {
    #main-wrapper {
        width: 80%;
    }
}
*/
@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}




/* ==========================================================================
   Media Queries Mobile
   ========================================================================== */

@media only screen and (max-width: 1200px) {
    
    /* Ajuste de elementos principales del layout del sitio */

    html, body {
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
      display: block;
      min-width: 100%;
      max-width: 100%;
    }

    #main-wrapper {
        width: 100%;
        padding-top: 20px;
        margin: 0 auto;
    }

    #connection {
      width: 100%;
      position: relative;
      display: table;
      padding: 10px;
      z-index: 999;
    }

    #last-call, #cuma-state, #dia-state {
      float: none;
      clear: both;
    }

    #cuma-state strong a, #dia-state strong a {
      color : #000 !important;
    }

    #cuma-state strong a:hover, #dia-state strong a:hover {
      color : #666 !important;
      text-decoration: underline;
    }

    #top-bar-elements {
      position: relative;
      display: table;
      margin: 0 auto;
      margin-top: 13px;
    }

    #search-box, #app-buttons {
      float: left;
      display: table;
      margin: 0px;
    }


    #search-box .wrapper {
     /* position: initial; */
    }


    ul#search-results {
      /* max-width: 100%; */
      left: 0px;
      width: 353px;
      width: 353px;
      z-index: 9991;
    }


    /* Ajustes para las Tarjetas */

    .header-card {
      height: 253px;
      overflow: scroll;
    }

    a.des-number, .mov-more-data, .alarms-wrapper, .movement-info {
      display: table !important;
      float: none;
      clear: both;
      width: 100% !important;
      margin-top: 0px !important;
      padding-bottom: 5px;
      border: 0px;
      border-bottom: 1px dotted #ccc;
      margin-bottom: 5px;
    }

    .card a.des-number {
      padding-bottom: 25px;
    }

    #device-status  {
      bottom: 2px;
    }

    .alarms-wrapper {      
      min-height: 110px;
      padding-bottom: 8px;
      margin-top: 26px !important;
    }

   .col-2-card, .col-3-card, .col-4-card {
      width: 100% !important;
    }


    .card-container .chofer-img {
      width: 100px;
      position: relative !important;
      right: initial;
      margin: 0 auto;
      border: 1px solid #ccc;
      display: table;
      float: right;
    }

    .card .event-info {
      display: table;
      margin-left: 0px;
      width: 100%;
      font-size: 12px !important;
      clear: left;
    }

    .card .event-info div {
        float: left;
        margin-right: 70px;
        border-bottom: 1px dotted #666;
        padding-bottom: 7px;
        margin-bottom: 4px;
        width: 100%;
    }

    #login-form {       
      width: 300px !important;     
    }

    .card .map {
      width: 80% !important;
      height: 300px !important;
      margin: 0px !important;
    }

    #des-card h1 span {
      clear: both;
      float: none;
      display: block;
      margin-top: 3px;
      font-size: 17px;
    }


    .mov-finished {
        background: red;
        color: #fff;
        padding: 6px;
        margin-top: 6px;
        display: table;
        opacity: 0.5;
        width: 73%;
    }

}


#bottom-bar {
  width: 100%;
  display: table;
  position: fixed;
  bottom: 0px;
  left: 0px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 2px solid #b9b9b9;
  padding-bottom: 10px;
  background: whitesmoke;
  z-index: 99;
}


#camera-bar {
  width: 100%;
  display: table;
  position: fixed;
  bottom: 50px;
  left: 0px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 2px solid #b9b9b9;
  padding-bottom: 10px;
  background: whitesmoke;
  z-index: 99;
}

#alarm-tooltip {
  background: #fff;
  display: table;
  padding: 3px;
  text-align: center;
  opacity: 0.9;
  border-radius: 0px 0px 3px 4px;
  box-shadow:  1px 1px 1px #000;
  color: #000;
}



#alarm-tooltip div.tooltip-wrapper {
  position: relative;
}

#alarm-tooltip div.tooltip-wrapper div.pick {
  position: absolute;
  top: -10px;
  background: url('../img/pick.png') no-repeat top center;
  width: 100%;
  height: 10px;
  left: 0px;
  opacity: .6;
  z-index: 999999;
}


/* Camaras */

ul#cameras-list  {
  display: table; 
  margin: 0 px;
  padding: 0px;
}

ul#cameras-list li {
  display: table;
  position: relative;
  border: 1px solid #666;
  border-radius: 2px 2px 2px 2px;
  padding: 2px;
  float: left;
  margin-right: 10px;
}

ul#cameras-list li img {
  width: 200px;
}

ul#cameras-list li div {
  float: left;
  padding-left: 30px;
  position: absolute;
  left: 2px;
  bottom: 2px;
  background: rgba(0,0,0, .6);
  width: 200px;
  padding: 5px;
  color: #fff;
}


img.event-snapshot {
  width: 100px; 
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px solid #666;
}

img.event-snapshot {
  width: 100px;
}


#events-card a.cpl-img {
  background: red;
  padding: 0px;
  margin: 0px;
  display: table;
  border: 0px;
  background: none;
}


#events-card tr.event-pending {
  background: #ffeaea; 
  border-bottom: 1px solid #666;
}

/* Iconos de clasificacion de Eventos */

.event-classification i {
  font-size: 15px;
  margin-left: 3px;
  position: absolute;
  right: 5px;
}

.event-classification {
  color: white;
  font-weight: bold;
  border-radius: 3px;
  padding: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: block;
  text-align: ceter;
  padding-right: 30px;
  position: relative;
  width: 130px;
}

.event-classification.event-safe {
  background: #569c63;
}
.event-classification.event-warning {
  background: #ce911a;
}
.event-classification.event-danger {
  background: #ca0606;
}
.event-classification.event-toclassify {
  background: blue;
}

#events-card i.fa-male {
  font-size: 20px;
}





div.snapshot-overlay {
  position: absolute;
  display: table;
  z-index: 9999999;
  top: 1px;
  left: 10px;
}
div.snapshot-overlay img {
  width: 500px;
  height: auto;
}
div.snapshot-overlay i {
  position: absolute;
  left: 40%;
  top: 34%;
  font-size: 158px;
  color: white;
  opacity: 0.5;
  cursor: pointer;
}
div.snapshot-overlay div.snapshot-wrapper {
  position: relative;
}