@import url('opensans.css');
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid blue
    ;
  -webkit-text-fill-color: #000;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  transition: background-color 5000s ease-in-out 0s;
}

* { margin:0; padding:0; box-sizing: border-box; font-family: 'Open Sans', sans-serif; text-decoration:none; border:0; outline:0;}
table span { font-size: 13px;}
button { display: initial; background:#1b66ca; color: #cfe3ff; text-transform: uppercase; font-size: 11px; cursor: pointer; margin-left: 15px; height: 40px;  font-weight: 600;padding: 5px 10px;border-radius: 3px;line-height: 18px;}
.box-tools button, button.box-tools { background:none; color: #999; text-transform: uppercase; margin-left: 15px; height: 30px;  }

button:hover { background: #1450a3; color: 000;}
button div[class^="ico-"] {width: 15px;height: 15px;display: inline-block;mask-size: cover;-webkit-mask-size: cover;margin: 2px 7px 0 0px;float: left;}
input[type="button"] {  border-radius: 5px;  padding: 0 20px;}

body { font-family: 'Open Sans', sans-serif; color: 333;  transition: background-color .5s;}
header { position: fixed; background: #0a4698; width: 100%; height: 60px; padding: 10px 0; z-index: 100;}
header .logo-header { float: right; height: 38px; }
header span { float: left; font-size:22px; line-height: 40px; font-weight: 600; color: #fff; padding-left: 20px;}

main { width: 100%; height: 100vh; padding: 60px 0 0 0;}

input::placeholder{ color: #ddd; }
input[type="text"],
input[type="date"],
input[type="password"],
select { width: 100%; font-size: 15px; padding: 0 5px; height: 40px; line-height: 40px; border: 1px solid #ccc; border-radius: 4px;}
input:focus, select:focus { border: 2px solid #0e35fd !important;   transition: 0.1s;}

/* Drag and Grop  ***************************************************************/
[data-drop-target] {border: 2px solid #999;height: 130px;width: 200px;background-color: #f1f1f1;border: 1px solid #ccc;padding: 2px;overflow: auto;}
.drag-enter {border:2px  double #4374e0; user-select: none; }

[data-drop-target] > div  {width: 100%;display: block;font-size: 14px;font-weight: 500;background: url(../img/ico-drag-and-drop.svg) no-repeat 4px 4px;background-size: 20px;line-height: 30px;margin-bottom: 3px;padding: 0 4px 0 30px;user-select: none;}
[data-drop-target] > div:hover { cursor: move; background-color: #4374e0; color: #fff; user-select: none; }

/* SETUP COLOR *****************************************************************/
body { background: #f1f1f1; } /*  Color de fondo pagina*/
.ico-tracking-color { background-color: #999;}
.ico-color-menu { background-color: #fff;}
.ico-buttom-color { background-color: #fff;}
.ico-tool-color { background-color: #555;} /* Color iconos tools*/
.ico-menu-movil-color { background-color: #fff;}
button:hover .ico-tool-color { background-color: #000;} /* Color iconos tools*/

.ico-rot-color { background-color: #4374e0;} /* Color iconos rotulos*/
.ico-on { background-color: #2ab673;}
button { background: #1353ac; color: #fff;}
button:disabled { background: grey; color: black;}
input[type="button"] {background: #2bafcf; color: #000; } /* Colores de botones generales */

input[type="text"],
input[type="date"],
select  {background: #fff; }
select:focus  {background: #fff;color: #000;}
.box-tools button { color: #000;  float: right; }
.box-tools button:hover { background: #f1f1f1; color: #000;  float: right; }

.table-dat { background: #fff;}
.table-dat th {background: #e9e9e9;color: #000; border-top: 2px solid #ccc; border-bottom: 2px solid #ccc; border-left: 2px solid #ccc;}
.table-dat td span.finalizado { background: #13E372;}
.table-dat td span.cancelado { background: red;}
.table-dat td span.pendiente { background:  #FF8300;}
.table-dat td span.other     { background:  #169ED2;}
.table-dat td span.picking   { background:  #0B1C9E;}
.table-dat td span.aprobacion { background: orange; }
/* SETUP COLOR *****************************************************************/

.progress-container  { display: none;}

/* Select Menu ***************************************/
.custom-select { position: relative;}
.custom-select select {  display: none;}
.select-selected { background-color: DodgerBlue; }
.select-selected:after {position: absolute; content: ""; top: 14px; right: 10px; width: 0; height: 0; border: 6px solid transparent;  border-color: #fff transparent transparent transparent; }
.select-selected.select-arrow-active:after { border-color: transparent transparent #fff transparent; top: 7px; }
.select-items div,.select-selected { color: #ffffff; padding: 8px 16px; border: 1px solid transparent; border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; cursor: pointer; }
.select-items { position: absolute; background-color: DodgerBlue; top: 100%; left: 0; right: 0; z-index: 99; }

.select-hide { display: none; }
.select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1); }

.rot-big { font-size: 22px; line-height: 50px; border-bottom: 3px solid #ddd; margin: 20px 0 10px 0; padding: 0 3vw; }
.rot-big > div[class^="ico-"] { width: 30px; height: 30px; display: inline-block; mask-size: cover; -webkit-mask-size: cover;  margin:6px 10px 0 3px; float: left;}
a div[class^="ico-"]
{ width: 30px; height: 30px; background-color: aqua; display: inline-block; mask-size: cover; -webkit-mask-size: cover;  margin:6px 10px 0 3px; float: left;}

.rot-big > .row-toggle { cursor: pointer; display: block; float: right; width: 30px; height: 30px; mask-size: cover; -webkit-mask-size: cover;  -webkit-mask: url(../img/ico-collapse.svg) no-repeat 50% 50%; mask: url(../img/ico-collapse.svg) no-repeat 50% 50%; margin: 7.5px;}
.rot-big > .row-toggle-on {-webkit-mask: url(../img/ico-expand.svg) no-repeat 50% 50%; mask: url(../img/ico-expand.svg) no-repeat 50% 50%;}

div[class^="rot"] .box-tools { width: auto; float: right; padding: 0; margin: 0;}
.rot {display: block;width: 100% !important;color: #222;font-weight: 700;font-size: 18px;line-height: 35px;margin-bottom: 5px;}
.rot > div[class^="ico-"] { width: 22px; height: 22px; display: inline-block; mask-size: cover; -webkit-mask-size: cover;  margin:6px 10px 0 3px; float: left;}
.rot-toggle-movil { border-bottom: 1px solid #ddd; background: #e8f0fe; margin: 0;}
.rot > .row-toggle { cursor: pointer; display: block; float: right; width: 30px; height: 30px; mask-size: cover; -webkit-mask-size: cover;  -webkit-mask: url(../img/ico-collapse.svg) no-repeat 50% 50%; mask: url(../img/ico-collapse.svg) no-repeat 50% 50%; margin: 7.5px;}
.rot > .row-toggle-on {-webkit-mask: url(../img/ico-expand.svg) no-repeat 50% 50%; mask: url(../img/ico-expand.svg) no-repeat 50% 50%;}

a[class*="toggle"] { border: 1px solid #ddd;}

.ico-eye {
  -webkit-mask: url(../img/ico-eye.svg) no-repeat 50% 50%;
  mask: url(../img/ico-eye.svg) no-repeat 50% 50%;
}

.ico-edit {
  -webkit-mask: url(../img/ico-edit-order.svg) no-repeat 50% 50%;
  mask: url(../img/ico-edit-order.svg) no-repeat 50% 50%;
}

.ico-track
{
  -webkit-mask: url(../img/ico-lupa.svg) no-repeat 50% 50%;
  mask: url(../img/ico-lupa.svg) no-repeat 50% 50%;
}

.ico-lupa {  
  -webkit-mask: url(../img/ico-lupa.svg) no-repeat 50% 50%;
  mask: url(../img/ico-lupa.svg) no-repeat 50% 50%;
}
.ico-delivery {
  -webkit-mask: url(../img/ico-delivery.svg) no-repeat 50% 50%;
  mask: url(../img/ico-delivery.svg) no-repeat 50% 50%;
}
.ico-user {
  -webkit-mask: url(../img/ico-user.svg) no-repeat 50% 50%;
  mask: url(../img/ico-user.svg) no-repeat 50% 50%;
}
.ico-messenger {
  -webkit-mask: url(../img/ico-messenger.svg) no-repeat 50% 50%;
  mask: url(../img/ico-messenger.svg) no-repeat 50% 50%;
}
.ico-carro  {
  -webkit-mask: url(../img/ico-carro.svg) no-repeat 50% 50%;
  mask: url(../img/ico-carro.svg) no-repeat 50% 50%;
}
.ico-date  {
  -webkit-mask: url(../img/ico-date.svg) no-repeat 50% 50%;
  mask: url(../img/ico-date.svg) no-repeat 50% 50%;
}
.ico-hora  {
  -webkit-mask: url(../img/ico-hora.svg) no-repeat 50% 50%;
  mask: url(../img/ico-hora.svg) no-repeat 50% 50%;
}
.ico-edit-order  {
  -webkit-mask: url(../img/ico-edit-order.svg) no-repeat 50% 50%;
  mask: url(../img/ico-edit-order.svg) no-repeat 50% 50%;
}
.ico-next  {
  -webkit-mask: url(../img/ico-next.svg) no-repeat 50% 50%;
  mask: url(../img/ico-next.svg) no-repeat 50% 50%;
}
.ico-back  {
  -webkit-mask: url(../img/ico-back.svg) no-repeat 50% 50%;
  mask: url(../img/ico-back.svg) no-repeat 50% 50%;
}
.ico-save  {
  -webkit-mask: url(../img/ico-save.svg) no-repeat 50% 50%;
  mask: url(../img/ico-save.svg) no-repeat 50% 50%;
}
.ico-delete  {
  -webkit-mask: url(../img/ico-delete.svg) no-repeat 50% 50%;
  mask: url(../img/ico-delete.svg) no-repeat 50% 50%;
}
.ico-email {
  -webkit-mask: url(../img/ico-email.svg) no-repeat 50% 50%;
  mask: url(../img/ico-email.svg) no-repeat 50% 50%;
}

.ico-csv {
  -webkit-mask: url(../img/ico-csv.svg) no-repeat 50% 50%;
  mask: url(../img/ico-csv.svg) no-repeat 50% 50%;
}

.ico-export {
  -webkit-mask: url(../img/ico-export.svg) no-repeat 50% 50%;
  mask: url(../img/ico-export.svg) no-repeat 50% 50%;
}
.ico-preview {
  -webkit-mask: url(../img/ico-preview.svg) no-repeat 50% 50%;
  mask: url(../img/ico-preview.svg) no-repeat 50% 50%;
}
.ico-datos {
  -webkit-mask: url(../img/ico-datos.svg) no-repeat 50% 50%;
  mask: url(../img/ico-datos.svg) no-repeat 50% 50%;
}
.ico-simplirout {
  -webkit-mask: url(../img/ico-simplirout.svg) no-repeat 50% 50%;
  mask: url(../img/ico-simplirout.svg) no-repeat 50% 50%;
}
.box-gris .rot { color:#fff;}

/* LOGIN INICIO */
.login { display: table; max-width: 35vw; margin-top: 25vh; margin: auto !important; border-right: 10px; box-shadow: 2px 2px 10px #ddd; padding: 5vw !important; }
.login > ::placeholder { color: #dddd;}
.login > .table { width: 280px;  margin: auto; }
.login > .table img { width: 90%; margin-bottom: 30px;}
.login > .table input { margin-bottom: 15px; width: 270px;}
.login > .table button { margin-bottom: 15px; width: 270px; display: block; margin: auto; font-size: 15px; line-height: 35px; font-weight: 600;}
#f_pass {
  width: 270px;
  background-image: url(../img/ico-visibility-off.svg);
  background-position: 97% center;
  background-repeat: no-repeat;
  background-size: 25px;
}
#f_pass.visible {
  background-image: url(../img/ico-visibility.svg);
  background-position: 97% center;
  background-repeat: no-repeat;
  background-size: 25px;
}
#toggle-password {
  display: none;
}
#toggle-password + label {
  text-indent: -9999px;
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 0px 0 0 -40px;
  cursor: pointer;
  position: absolute;
}
/* LOGIN FIN */

/* MENU SIDEBAR INICIO */
.sidebar { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #00265e; overflow-x: hidden; padding-top: 60px; transition: 0.5s; }
.sidebar .logo-side {width: 182px;position: absolute;top: 10px;left: 11px;}
.sidebar span { display: block; background-size: 20px !important; background-position: 15px center !important; background-repeat: no-repeat !important; width: 250px; padding: 8px 8px 8px 22px; text-decoration: none; font-size: 15px; line-height: 25px; color: #fff; font-weight: 500; transition: 0.3s; cursor: pointer; }
.sidebar span.menu-on { background: #f50c51; color: #fff; font-weight: 600; }
.sidebar span div[class^="ico-"] { width: 20px; height: 20px; display: inline-block; mask-size: cover; -webkit-mask-size: cover;  margin:2px 3px 0 3px; float: left;}
.ico-print  {
  -webkit-mask: url(../img/ico-print.svg) no-repeat 50% 50%;
  mask: url(../img/ico-print.svg) no-repeat 50% 50%;
}
.ico-tienda  {
  -webkit-mask: url(../img/ico-tienda.svg) no-repeat 50% 50%;
  mask: url(../img/ico-tienda.svg) no-repeat 50% 50%;
}
.ico-stat  {
  -webkit-mask: url(../img/ico-stat.svg) no-repeat 50% 50%;
  mask: url(../img/ico-stat.svg) no-repeat 50% 50%;
}
.ico-tracking  {
  -webkit-mask: url(../img/ico-tracking.svg) no-repeat 50% 50%;
  mask: url(../img/ico-tracking.svg) no-repeat 50% 50%;
}
.ico-admin  {
  -webkit-mask: url(../img/ico-admin.svg) no-repeat 50% 50%;
  mask: url(../img/ico-admin.svg) no-repeat 50% 50%;
}
.ico-devolucion {
  -webkit-mask: url(../img/ico-devolucion.svg) no-repeat 50% 50%;
  mask: url(../img/ico-devolucion.svg) no-repeat 50% 50%;
}
.ico-cancelado  {
  -webkit-mask: url(../img/ico-cancelado.svg) no-repeat 50% 50%;
  mask: url(../img/ico-cancelado.svg) no-repeat 50% 50%;
}
.ico-cancel  {
  -webkit-mask: url(../img/ico-cancelado.svg) no-repeat 50% 50%;
  mask: url(../img/ico-cancelado.svg) no-repeat 50% 50%;
}
.ico-alerta {
  -webkit-mask: url(../img/ico-alerta.svg) no-repeat 50% 50%;
  mask: url(../img/ico-alerta.svg) no-repeat 50% 50%;
}
.ico-order  {
  -webkit-mask: url(../img/ico-order.svg) no-repeat 50% 50%;
  mask: url(../img/ico-order.svg) no-repeat 50% 50%;
}
.ico-change  {
  -webkit-mask: url(../img/ico-change.svg) no-repeat 50% 50%;
  mask: url(../img/ico-change.svg) no-repeat 50% 50%;
}
.ico-check  {
  -webkit-mask: url(../img/ico-check.svg) no-repeat 50% 50%;
  mask: url(../img/ico-check.svg) no-repeat 50% 50%;
}
.ico-recepcion  {
  -webkit-mask: url(../img/ico-recepcion.svg) no-repeat 50% 50%;
  mask: url(../img/ico-recepcion.svg) no-repeat 50% 50%;
}
.ico-historial   {
  -webkit-mask: url(../img/ico-historial.svg) no-repeat 50% 50%;
  mask: url(../img/ico-historial.svg) no-repeat 50% 50%;
}
.ico-filter-delete   {
  cursor: pointer;
  -webkit-mask: url(../img/ico-filter-delete.svg) no-repeat 50% 50%;
  mask: url(../img/ico-filter-delete.svg) no-repeat 50% 50%;
}
.ico-details   {
  cursor: pointer;
  -webkit-mask: url(../img/ico-details.svg) no-repeat 50% 50%;
  mask: url(../img/ico-details.svg) no-repeat 50% 50%;
}

.sidebar a:hover { color: ; background-color: #1fabcb !important; }
.sidebar .closebtn { position: absolute; top: 0; left: 150px; font-size: 36px; margin-left: 50px; }
.openbtn { float: left; font-size: 20px; cursor: pointer; background: #fff; color: #00265e; padding: 10px 15px; border: 1px solid #adadad; margin-left: 0.5vw; opacity: 0.4;  }
.openbtn:hover { background-color: #ddd; }
 /* Acordion */
.accordion {color: #444; cursor: pointer; padding: 18px; width: 250px; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; }
.active, .accordion:hover { background-color: #28aece; }
.panel { display: none; overflow: hidden; }
.panel a {  padding: 8px 8px 8px 62px; }
/* MENU SIDEBAR FIN */

/* TOOLS Inicio */
.box-tools { display: table; width: 98%; margin: 10px 1% 10px 1%;}
.ico-refresh {
  -webkit-mask: url(../img/ico-refresh.svg) no-repeat 50% 50%;
  mask: url(../img/ico-refresh.svg) no-repeat 50% 50%;
}

.ico-min {
  -webkit-mask: url(../img/ico-min.svg) no-repeat 50% 50%;
  mask: url(../img/ico-min.svg) no-repeat 50% 50%;
}

.ico-close {
  -webkit-mask: url(../img/ico-close.svg) no-repeat 50% 50%;
  mask: url(../img/ico-close.svg) no-repeat 50% 50%;
}
/* TOOLS Fin*/

#main {
  transition: margin-left .5s;
}

/* Tracking Inicio */
.tracking-detalle { display: table;width: 100%; margin-bottom: 20px; }
.tracking-detalle > div { display: table;width: 50%; float: left; }

.table-tracking-dat { background: #dbebfa; width: 100%; border-radius: 7px; padding: 10px;}
.table-tracking-dat td { font-size: 14px; padding: 3px 0 ; color: #004d73; }
.table-tracking-dat td:nth-of-type(1) { font-weight: 700;} 
.table-white  { background: #fff;}

.lista-tracking  { width: 100%; border: 0; border-spacing: 0; padding-bottom: 30vw;}
.lista-tracking td { width: 100vw; height: 194px; vertical-align: top; border-bottom: 3vw solid #E5E5E5;}
.lista-tracking td > div:nth-of-type(1) .estado { float: right; margin: 1vw; font-size: 4.5vw; font-weight: 700; line-height: 7.5vw;}
.fecha { background: url(); font-size: 14px; line-height: 27px; margin: 15px 0;}
.fecha div[class^="ico-"] { width: 20px; height: 20px; display: inline-block; mask-size: cover; -webkit-mask-size: cover;  margin:2px 7px 0 3px; float: left;}

.lista-tracking td > div .box-datos { display: table; width: 94vw; margin: 0 3vw; padding:1vw 2vw; font-size: 4vw; font-weight: 900;}
.lista-tracking td > div .box-datos  div span { display: block; float: left; width: 20vw; text-transform: uppercase; font-size: 3.2vw; line-height: 4.8vw; font-weight: normal;}
.lista-tracking td > div .box-datos  div p { padding-left: 20vw; font-weight: 500;}

.lista-tracking td > div:nth-of-type(2) { margin: 3vw 0;}
.lista-tracking td > div:nth-of-type(2) .box-pedido { display: table; background: #f3f4f5; border: 1px solid #e5e5e5; border-radius: 3vw;  margin: 0 3vw; padding: 2vw; font-size: 4vw; }

.lista-tracking td > div:nth-of-type(2) .box-pedido div { float: left; font-weight: 900; font-size: 3vw;}
.lista-tracking td > div:nth-of-type(2) .box-pedido div:nth-of-type(1),
.lista-tracking td > div:nth-of-type(2) .box-pedido div:nth-of-type(3) {width: 44.5vw;  float: left;}
.lista-tracking td > div:nth-of-type(2) .box-pedido div:nth-of-type(2),
.lista-tracking td > div:nth-of-type(2) .box-pedido div:nth-of-type(4) {width: 44.5vw; }
.lista-tracking td > div:nth-of-type(2) .box-pedido div span { display: block; float: left; width: 19vw; text-transform: uppercase; font-size: 3.2vw; line-height: 4.8vw;}
.lista-tracking td > div:nth-of-type(5) .box-acciones { float: left; width: 45vw; height: 14vw;}
.lista-tracking td > div:nth-of-type(5) .box-acciones .descuentos { width: 45vw; height: 12.1vw; margin-top: 1.8vw; border: 1px solid #E5E5E5; border-radius: 0 2vw 2vw 0; }
.lista-tracking td > div:nth-of-type(5) .box-prec { float: left; width:  52.5vw; height: 14vw; padding:5.5vw 2vw 0 0;}
.lista-tracking td > div:nth-of-type(5) .box-prec .tit-precio-unidad { float: left; font-size: 2.3vw; line-height: 10.4vw; font-family: 'Lato'; font-weight: 600; padding: 0 0 0 4.6vw; width: 16vw;}
.lista-tracking td > div:nth-of-type(5) .box-prec .precio-unidad { text-align: right; font-family: 'Oswald'; font-size: 6vw; font-weight: 600; letter-spacing: -.2vw;  color: #e42931;}

.timeline { width: 100%; height: 70px; margin-top: 30px;}
.timeline .linea { background: #f3f4f5; border: 1px solid #e5e5e5; width: 96%; height: 20px;border-radius: 9px; margin: 0 2% 1vw 2%; }
div[class^="hito"] { position: absolute !important; right: 2px; width: 14px; height: 14px; border-radius: 1.5vw; background: #6cc396;  margin: 2px 0 2px 2px; z-index: 10;}
.h-on { background: #fff !important;}
.h-off { background: #e5e5e5 !important;}
div[class^="avance"] { position: absolute !important; top: 0; background: #2ab673 !important;  height: 18px;border-radius: 9px; margin: 0; }
.avance-1 { width: 18px;}
.avance-2 { width: 36%;}
.avance-3 { width: 66%;}
.avance-4 { width: 100%;}
div[class^="estado"] { position: absolute !important; font-size: 13px; font-weight: 600; float: left; color: #ccc; }
.estado-on { color:#000 !important; font-weight: 900;}
.estado-1 { left:2%; }
.estado-2 {left: 36%;margin-left: -46px;}
.estado-3 {left: 66%;margin-left: -42px;}
.estado-4 { right:2%; }

.historial { display: table; position: relative; width: 100%; margin-left: 30px; border-left: 1px solid #c6c8cc; padding-left: 25px; }
.historial h1 {position: relative !important;font-family: 'Lato', sans-serif;font-size: 11px;line-height: 14px;font-weight: 700;}
.subestados {width: 100%;margin-bottom: 15px;}
.subestados h2 {font-family: 'Lato', sans-serif;font-weight: 500;font-size: 12px;color: #666;}
.subestados p {font-size: 11px;margin-bottom: 10px;color: #666;font-weight: normal;}

.historial h1 div[class^="ico"] { position: absolute !important; width: 25px; height: 25px;  left: -39px;  }
.ico-entregado { background: url(../img/ico-entregado-off.svg); }
.ico-entregado-on { background: url(../img/ico-entregado.svg); }
.ico-enruta { background: url(../img/ico-enruta-off.svg);  }
.ico-enruta-on { background: url(../img/ico-enruta.svg);  }
.ico-preparacion { background: url(../img/ico-preparacion-off.svg);  }
.ico-preparacion-on { background: url(../img/ico-preparacion.svg);  }
.ico-ingresado { background: url(../img/ico-ingresado-off.svg);  }
.ico-ingresado-on { background: url(../img/ico-ingresado.svg);  }
/* Tracking Fin */

/* TABLAS GENERALES DE BUSQUEDA Y RESULTADOS */
.box-modulo { position: relative; border: 2px solid #ccc; margin: 15px; padding:0; background: #fff; border-radius: 10px; }
.close-search-desktop, .open-search-desktop { position: absolute; background: #ccc; display: block; width: 20px; height: 50px; z-index: 2; cursor: pointer;}
.close-search-desktop:hover, .open-search-desktop:hover { background: #ddd;}
.close-search-desktop {top: 20px; left: 20%; margin-left: 15px: border-left: 0;  border-radius: 0 3px 3px 0; }

.close-search-desktop .ico-back, .open-search-desktop .ico-next {width: 15px; height: 50px; background:#000; }

.open-search-desktop { display: none; top: 20px; left: 0; border-left: 0;  border-radius: 0 3px 3px 0; }

.box-gris { background: #ddd;}

.table, #dat-tracking { width: 100%; display: table;  background: #fff; border-radius: 4px; padding: 20px;  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 2px 1px -1px rgb(0 0 0 / 12%);}
.table div { position: relative; }
.busqueda-col2 { display: table; width: 100%;}
.busqueda-col2 > div:nth-of-type(1) { width: 20%; padding: 20px 20px 20px 0; float: left; }
.busqueda-col2 > div:nth-of-type(1) > div { margin-bottom: 20px;}
.busqueda-col2 > div:nth-of-type(2) { background: #f1f1f1; width: 80%; min-height: 800px; float: left; padding: 20px; border-left: 1px solid #ddd; }
.busqueda-col2 > div:nth-of-type(1) ul { list-style-image:  url('../img/ico-folder.svg'); padding-left: 20px;}
.busqueda-col2 > div:nth-of-type(1) ul ul { list-style-image:  url('../img/ico-html.svg'); padding-left: 20px;}
.busqueda-col2 > div:nth-of-type(1) ul li { font-size: 32px; line-height: 32px;}
.busqueda-col2 > div:nth-of-type(1) ul li h1 { font-size: 16px;}
.busqueda-col2 > div:nth-of-type(1) ul li h2 { font-size: 14px; font-weight: 500;}
.busqueda-col2 > div:nth-of-type(1) ul > ul { padding-left: 20px; margin-bottom: 15px;}
.busqueda-col2 > div > nav { background: #000;}
.busqueda-col2 > div > nav > button { color: #0a4698; background: #fff; border-bottom:1px solid #999; border-radius: 0; text-align: left; display: block; width: 100%; margin: 0; font-weight: 700;}
.busqueda-col2 > div > nav > button:hover { background: #ddd;}
.busqueda-col2 > div > nav > button:focus { background: #0a4698; color: #fff;}

.busqueda-col2-2 { display: table; width: 100%; }
.busqueda-col2-2 > div:nth-of-type(1) { width: 80%; padding-right: 20px; float: left; }
.busqueda-col2-2 > div:nth-of-type(2) > div { margin-bottom: 20px;}
.busqueda-col2-2 > div:nth-of-type(2) { width: 20%; float: left; }

.col1 { background: #f1f1f1;}
.col1, .col2, .col3, .col6, .col2-traking { padding: 1vw 3vw;}

.col6 > div { width: 16.6%; padding:5px 10px; float: left;} /* Tablas a 6 columnas */
.col2-traking > div:nth-of-type(1) { width: 65%; float: left;}
.col2-traking > div:nth-of-type(2) { width: 35%; float: left;}
.col2 > div { width: 50%; padding:5px 10px; float: left;} /* Tablas a 2 columnas */
.col3 {background: #f1f1f1;}
.col3 > div { width: 33.3%; min-width: 300px; padding:5px 20px 5px 0; float: left; font-size: 12px;} /* Tablas a 3 columnas */
.col3 > div input, .col3 > div select { width: 180px;}
.col3 > div:last-child { padding-right: 0;}
.table lebel {font-size: 12px;position: absolute;top: -7px; background: #fff;left: 6px;padding: 0 10px; font-weight: 600; color: #1967d2; margin-left: 2px; z-index: 2;}

/*  Tablas Despliegue */
.table-form {display: table; background: #fff; width: 100%; border-radius: 4px; margin-bottom: 20px; padding: 20px; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 2px 1px -1px rgb(0 0 0 / 12%);}
.table-form th, .table-form td {font-size: 14px; font-weight: 600; text-align: left; padding:1px 5px; }
.table-form th.picture { width: 60px;}
.table-form td input { margin-bottom: 15px;}
.table-form > div { float: left; background: #ddd; margin: 15px;}
.table-form textarea { width: 100%; height: 150px; border: 1px solid #ddd; padding: 10px;}

.table-dat { width:  100%; }
.table-dat th { cursor: pointer; position:relative; padding-left: 15px !important; min-width: 90px;}
.table-dat th span { position: absolute; top: 8px; left: 3px; display: table; width: 10px; height: 10px; background-size: 10px !important; }
.table-dat th span.col-top { background: url(../img/top.png);}
.table-dat th span.col-bottom { background: url(../img/down.png);}
.table-dat th, .table-dat td {font-size: 12px; text-align: left; padding: 5px 8px 15px 8px; width: auto; }
.table-dat th.picture { width: 60px;}
.table-dat td { border-left: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.table-dat td img { width: 50px;}
.table-dat td:first-child img { margin: auto; display:table;}
.table-dat td:last-child { text-align: center; border-right: 1px solid #ddd; }
.table-dat td span { display: table; width: 100%; text-align: center; padding: 3px 10px; border-radius: 6px ; color: #fff; }

.paginador { display: table; bottom: 0; right: 0;  width: 100%; padding: 20px 5px 5px 5px; font-size: 11px;  font-weight: 600;}
.paginador > div { float: left; margin-right: 10px;}
.paginador > div:nth-of-type(1) {  width: 35%;}
.paginador > div:nth-of-type(1) {  width: 30%;}
.paginador > div:nth-of-type(1) {  width: 35%;}
.paginador > div > span { display: block; font-weight: 700; margin-bottom: 2px;}
  
.paginador > div input, .paginador > div button, .paginador > div select {float: left;margin: 0;line-height: 26px;width: 67px !important;padding: 0;}
.paginador > div select {width: 50px;}
.paginador > div button { line-height: 30px; width: 30px !important;}

/* TABLAS GENERALES DE BUSQUEDA Y RESULTADOS */

/* DISPOSITIVOS INICIO */
.device {display: table; background: #fff; width: 100%; border-radius: 4px; margin-bottom: 20px; padding: 20px; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 2px 1px -1px rgb(0 0 0 / 12%);}
.device > div { position:relative; width: 150px;height: 150px;float: left;border: 1px solid #ccc;border-radius: 4px;margin-left: 20px;padding: 10px; text-align:center;}
.device > div img {height: 100px; margin-bottom:10px;}
.device > div span { position:absolute; bottom:0; left:0; width:100%; text-align:center;  background: #f1f1f1; font-weight:600; font-size:13px; border:1px solid #ddd; padding:3px 6px; }
/* DISPOSITIVOS FIN */

.oms-detalle { background:#fff;}

.datos-cliente { background: #fff; width: 100%; min-height: 255px; border-radius: 4px; padding: 20px;  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 2px 1px -1px rgb(0 0 0 / 12%);}
.datos-cliente td { text-align: left;  font-size: 14px; line-height:22px; padding: 2px 0 ; color: #111; }
.datos-cliente td:nth-of-type(1) { width: 90px; font-weight: 600;} 
.datos-cliente td:nth-of-type(2) { padding-right: 5px;}

.datos-pedido {width: 100% !important; display: table;background: #f1f1f1; padding: 20px; border: 2px solid #ccc;}
.datos-pedido td { font-size: 17px; line-height: 24px; padding: 2px 0 ; color: #444; }
.datos-pedido td:nth-of-type(1) { width: 80px; font-weight: 600;} 
.datos-pedido td span { font-size:  17px; font-weight: bolder;}
#order_numprods { text-align: right;}

#osr_details { float: right;}
.oms-detalle-tracking { width: 100%; border-radius: 10px; border: 2px solid #e9e9e9;}
.oms-detalle-tracking th {background: #e8f0fe;color: darkslateblue;font-size: 12px;font-weight: 700;}
.oms-detalle-tracking th, .oms-detalle-tracking td { line-height: 31px; }
.oms-detalle-tracking td {padding: 0 5px;font-size: 14px;border-bottom: 1px solid #e9e9e9;}
.oms-detalle-tracking div[class^="ico-"] { width: 15px; height: 15px; display: inline-block; mask-size: cover; -webkit-mask-size: cover;  margin:10px 3px 0 3px; float: left;}
.oms-detalle-tracking td div[class^="ico-"] { margin-top: 4px;}

@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}

@media screen and (orientation:landscape)
and (min-device-width: 319px) 
and (max-device-width: 968px) {
  .login { width: 50vw !important;  margin-top:-5vw !important;  }
}

@media (orientation: portrait) {
  
  ::-webkit-scrollbar { width: 10px; height: 5px; }
  ::-webkit-scrollbar-track { background: #f1f1f1; }
  ::-webkit-scrollbar-thumb { background: #1b66ca; }
  ::-webkit-scrollbar-thumb:hover { background: #1b66ca; }

  main {width: 100%;min-width: 100%;}
  .progress-container { display: block; z-index: 1000000; position: fixed; top: 0; width: 100%; height: 5px; background: #ccc; }
  .progress-bar { height: 5px; background: #1b66ca; width: 0%; }
  .rot > .row-toggle { display: block; margin: 2vw 0;}
  .login { width: 90vw !important;  margin-top: 25vh; }
  .rot { font-size: 15px; font-weight: 600; margin:0; padding: 01vw;}
  .rot-big { font-size: 18px; font-weight: 700;}
  .box-modulo {width: 98vw;overflow: auto;margin: 1vw;}
  .oms-detalle-tracking div[class^="ico-"] { width: 13px; height: 13px;}
  .oms-detalle-tracking th { font-size: 11px;}
  .oms-detalle-tracking td div[class^="ico-"] { width: 18px; height: 18px;}
  .oms-detalle-tracking th div[class^="ico-"] { width: 12px; height: 12px;}  
  
  .datos-cliente { padding: 10px;}
  .datos-cliente td { font-size: 13px; line-height: 12px;}
  .col1 > div,
  .col2-traking > div,
  .col2 > div,
  .col3 > div { width: 100% !important; float: left; padding: 0;}
  .col6 div { width: 45.5vw; float: left;}
  .col6 div input
  { width: 40vw;}
  
  .col1 > div { width: 91vw !important; overflow: auto; padding: 2vw 0 !important; }
  .col1 > div select, .col1 > div input { margin-bottom: 2vw;}
  .busqueda-col2 > div:nth-of-type(1) { width: 90vw; }
  .busqueda-col2 > div:nth-of-type(2) { width: 96vw; overflow: auto; }
  div[class^="estado"] { font-size: 10px; }
  .paginador { position: fixed !important; bottom: 0; left: 0; background: #e9e9e9; width: 100%; padding: 3px 5px 5px 5px; font-size: 11px;  font-weight: 600;}
  .paginador > div { float: left; margin-right: 10px;}
  .paginador > div:nth-of-type(1) {  width: 35%;}
  .paginador > div:nth-of-type(1) {  width: 30%;}
  .paginador > div:nth-of-type(1) {  width: 35%;}
  .paginador > div > span { display: block; font-weight: 700; margin-bottom: 2px;}
  .paginador > div > div > span { display: block;}
  .paginador > div > div > span strong { display: table; width: 50px; float: right; text-align: right; }
  .paginador > div input, .paginador > div button, .paginador > div select { float: left; margin: 0;}
  .paginador > div select {width: 50px;}
  .paginador > div button { width: 30px;}
  
    /* Menu Busqueda para movil*/
  .overlay .rot { margin-top: 18vw;}
  .open-search { position: fixed; right: 0; top: 7px; width: 11vw; height: 11vw; border-radius: 2vw; background-color: rgba(27,102,202,.7); background-color: rgba(27,102,202 0.7); z-index: 10;}
  .close-search { display: none; position: absolute !important; top: 7px; right: 0;  width: 11vw; height: 11vw; border-radius: 2vw; background-color: rgba(27,102,202,.7); background-color: rgba(27,102,202 0.7); z-index: 11;}
  div[class*="search"] > div[class^="ico-"]{width: 7vw;height: 7vw;display: inline-block;mask-size: cover;-webkit-mask-size: cover;margin: 2vw;float: left;
}

/* The Overlay (background) */
.overlay {
  height: 0%;
  width: 100% !important;
  position: fixed !important;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #fff;
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

}

.nodisplay {
  display: none !important;
}

.highlight {
  background: #f8f8f8 !important; cursor: pointer; transition: 0.3s;
}
.button-highlight {
  background: #6666f8 !important; color: white !important; cursor: pointer; transition: 0.3s;
}

[class^='bad-'], [class^='wms-'], [class^='error-'], .adm-st-deshabilitado {
  background: #770000;
}

.ingresada {
  background: magenta;
}

.nuevo, .nueva {
  background: cyan;
  color: red !important;
}

.aprobacion {
  background: magenta;
}

.rechazada {
  background: #EE0000;
}

.ingresado {
  background: blue;
}
.en-preparacion {
  background: skyblue;
}
.en-ruta, .tracking {
  background: magenta;
}
.aprobada {
  background: blue;
}

.a-cobranza {
  background: orange;
}

.despacho {
  background: cyan;
}

.entregado, .creado {
  background: green;
}
.cancelando {
  background: orange;
}
.cancelada {
  background: #990000;
}
.no-entregado {
  background: #550000;
}

.ticket-nueva {
  background: #00aaaa;
}
.ticket-cancelando {
  background: #440000;
}
.ticket-cancelada {
  background: #666;
}
.ticket-error {
  background: #FF0000;
}
.ticket-solicitada {
  background: #AAAA33;
}
.ticket-creada {
  background: #00BB00;
}

#b_refresh {
  font-size: 1.5em;
  color: green;
  padding-left: 5px;
  padding-top: 25px;
  cursor: pointer;
}

.enviada {
  background: yellow;
  color: red !important;
}

.adm-st-activo {
  background: green;
  color: white;
}

/* Switch Options  */
.switch { position: relative; display: inline-block; width: 40px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 2px; background-color: white; -webkit-transition: .4s; transition: .4s; }
input:checked + .slider { background-color: #2196F3; }
input:focus + .slider { box-shadow: 0 0 1px #2196F3; }
input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(16px); }
.slider.round { border-radius: 20px; }
.slider.round:before { border-radius: 50%; }

input[type=checkbox]:checked ~ #oms-options-1 {
    display: block;
}
#oms-options-1{
    display: none;
}
.tpl_file {
  cursor: pointer;
}
.tpl_file:not(.tpl_file_sel):hover {
  background: #dedede;	
}
.tpl_file_sel {
  background: cyan;
}

.orders-last-update {
  float: right;
}
.pdf_download
{
  height: 20px;
  line-height: 0;
}
.vtop
{
  vertical-align: top;
}
#ticket_bultos, #ti_width, #ti_height
{
  border: 1px solid #ccc;
  padding: 0 5px;
  height: 40px;
  line-height: 40px;
  margin: auto;
  border-radius: 4px;
}
.msg_res
{
  float: right;
  background: yellow;
  color: red;
  transition: 0.6s;
}
.deviceblock
{
  padding-top: 20px;
}
.card_title
{
  float: left;
}
.card_status
{
  float: right;
}
.fedexlist-del
{
  background-size: 30px !important;
  background: url(../img/ico-delete.svg) no-repeat;
  width: 30px;
  padding: 0;
  margin: 0;
}

.json
{
  display: inline;
  cursor: pointer;
  user-select: none;  
}
.json:hover
{
  color: blue;
}

#os_detail .shade table
{
  text-align: left;
  width: 200px;
  margin: 20px auto;
}

#os_tracking .shade table
{
  margin: 20px;
}

.shade
{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background: #333B;
  z-index: 900;
  display: grid;
}

.shade .popup
{
  position: relative;
  margin: 100px auto;
  display: inline-grid;
  align-content: center;
  text-align: center;
  width: 550px;
  height: fit-content;
  background: white;
  border: 2px solid gray;
  z-index: 901;
  border-radius: 15px;
  padding: 50px;
}

.shade .close
{
  width: 50px;
  float: right;
  position: absolute;
  top: 0;
  right: 0;
}
.profile_usr
{
  width: 200px !important;
  margin-left: 20px !important;
}
.profile_usr:disabled
{
  border: none;
}
.list .head
{
  font-size: 2em;
  margin-left: 10px;
}
.list .json
{
  margin-left: 25px;
  width: fit-content;
}

.deviceblock .datos-cliente { background: #fff; width: 100%; min-height: 0px !important; border-radius: 4px; padding: 20px;  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 20%), 0 1px 1px 0 rgb(0 0 0 / 14%), 0 2px 1px -1px rgb(0 0 0 / 12%);}
.deviceblock .datos-cliente td { text-align: left;  font-size: 14px; line-height:22px; padding: 2px 0 ; color: #111; }
.deviceblock .datos-cliente td:nth-of-type(1) { width: 90px; font-weight: 600;}
.deviceblock .datos-cliente td:nth-of-type(2) { padding-right: 5px;}

.cron-list
{
  width: 80%;
}
.cron-list thead 
{
  background: green;
  color: white;
  text-align: center;
}
.cron-list tbody tr:hover
{
  background: cyan;
  cursor: pointer;
}
.cron-config
{
}