/* operadores */

.list-operadores .list-filter-panel {
    display:none;
}

/* movimientos */

#imagen-unidad,#imagen-tracto,#imagen-cerradas,#imagen-abiertas,#imagen-tracto_frente,#imagen-tracto_remolque {
    width:320px;
    margin:0 auto;
    padding:0 0 20px 0;
}
#imagen-unidad img,#imagen-tracto img,#imagen-tracto_frente img,#imagen-tracto_remolque img {
    width:100%;
}
#imagen-cerradas img,#imagen-abiertas img, #imagen-tracto_frente img, #imagen-tracto_remolque img {
    width:320px;
}

/* movimientos_pilotos */

#imagen-unidad,#imagen-tracto,#imagen-cerradas,#imagen-abiertas {
    width:320px;
    margin:0 auto;
    padding:0 0 20px 0;
}
#imagen-unidad img,#imagen-tracto img {
    width:100%;
}
#imagen-cerradas img,#imagen-abiertas img {
    width:320px;
}

/* checklist_operadores */

#imagen-tracto_o {
    width:320px;
    margin:0 auto;
    padding:0 0 20px 0;
}
#imagen-tracto_o img {
    width:100%;
}

td.list-cell.checklist_operadores-inicial, 
td.list-cell.checklist_operadores-cargando_con_el_cliente,
td.list-cell.checklist_operadores-descargando_con_el_cliente,
td.list-cell.checklist_operadores-parada,
td.list-cell.checklist_operadores-intercambio,
td.list-cell.checklist_operadores-transfer,
td.list-cell.checklist_operadores-en_frontera_laredo_texas {
    text-align: center;
}



/* inspeccion_de_carga */

.css_aviso {
  color: #ff1100 !important;
  text-align: end !important;
}
.css_logo{
    max-width: 90px !important;
}
.css_div_logo{
    text-align: center !important;
}

/* guia_de_uso */

#iframe_ver_archivo {
    border: none;
}

/* APPLICATION STYLES */

/* Customize the label (the container) */
label.container {
  /*display: block;*/
  /*display: table-cell;*/
  display: inline-block;
  position: relative;
  padding-left: 30px;
  /* margin-bottom: 12px; */
  cursor: pointer;
  /*font-size: 22px;*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding-top: 8px;
  max-width: 0px;
}
/* Hide the browser's default checkbox */
label.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #c8e6c8;
  border: 2px solid #797979;
}
/* On mouse-over, add a grey background color */
label.container:hover input ~ .checkmark {
  background-color: #86c886;
}

/* When the checkbox is checked, add a blue background */
label.container input:checked ~ .checkmark {
  background-color: #26ac26;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  /*display: none;*/
}

/* Show the checkmark when checked */
label.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
label.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Create a custom checkbox */
.tacha {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #ffc0c0;
  border: 2px solid #797979;
  text-align: center;
}
/* On mouse-over, add a grey background color */
label.container:hover input ~ .tacha {
  background-color: #fe8383;
}

/* When the checkbox is checked, add a blue background */
label.container input:checked ~ .tacha {
  background-color: red;
}

/* Create the checkmark/indicator (hidden when not checked) */
.tacha:after {
 content: "X";
 /* position: absolute; */
 /*display: none;*/
 color: #fff;
 font-size: 16px;
 font-weight: bold;
 font-family: cursive,sans-serif;
}

/* Show the checkmark when checked */
label.container input:checked ~ .tacha:after {
  display: block;
}

/* Style the checkmark/indicator */
label.container .tacha:after {
    /*
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  */
}

/* Create a custom checkbox */
.na {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #ccc;
  border: 2px solid #797979;
  text-align: center;
}
/* On mouse-over, add a grey background color */
label.container:hover input ~ .na {
  background-color: #999;
}

/* When the checkbox is checked, add a blue background */
label.container input:checked ~ .na {
  background-color: #777;
}

/* Create the checkmark/indicator (hidden when not checked) */
.na:after {
 content: "NA";
 color: #fff;
 font-size: 14px;
 font-weight: bold;
 font-family: cursive,sans-serif;
}

/* Show the checkmark when checked */
label.container input:checked ~ .na:after {
  display: block;
}


#wizard-head {
 display:inline-block;
}
/*
.wizard-num {
    border-radius:50%;
    border:solid 1px #333;
    background-color:#CCC;
    display:inline-block;
    height:36px;
    width:36px;
    padding:6px 10px;
    margin: 0 2px;
    text-align:center;
}
*/
.wizard-num {
    border:solid 1px #333;
    background-color:#CCC;
    display:inline-block;
    height:36px;
    padding:6px 10px;
    margin: 0 2px;
    text-align:center;
}
.wizard-num.active {
    background-color:#5cb85c;
}
.wizard-num:hover {
background-color:#BBB;
}

.form-movimientos .form-title {
    display:none;
}
.record-movimientos .form-title {
    display: none;
}
.form-movimientos_pilotos .form-title {
    display:none;
}
.record-movimientos_pilotos .form-title {
    display: none;
}

.semaforo {
    width:12px;
    height:12px;
    border: solid 1px #676767;
    border-radius:12px;
    margin:0px 5px;
}
.semaforo.rojo { background-color: #a00000;      background: linear-gradient(#a00000, #730000); }
.semaforo.amarillo { background-color:#f39c12;  background: linear-gradient(#f39c12, #aa6912);  }
.semaforo.naranja { background-color: #f35317;  background: linear-gradient(#f35317, #ad3b0e);  }
.semaforo.verde { background-color: #27ae60;    background: linear-gradient(#27ae60, #1f773b);  }
.semaforo.azul { background-color: #2980b9;     background: linear-gradient(#2980b9, #20567d);  }
.semaforo.gris { background-color: #b8b8b8;     background: linear-gradient(#bdbcb6, #46453f);  }
.semaforo.gris { background-color: #ffffff;     background: linear-gradient(#bdbcb6, #46453f);  }