@font-face {
  font-family: MarsCentra;
  src: url(../css/fonts/MarsCentraMarsCentra-Book.woff2);
}
@font-face {
  font-family: MarsCentra;
  font-weight:bold;
  src: url(../css/fonts/MarsCentraMarsCentra-Bold.woff2);
}

html,body{
margin:0px;
padding:0px;
height:100%;
font-size:14px;
}
body{
text-align:center;
font-family:MarsCentra,Segoe,Helvetica,Arial,sans-serif;
background:#f9f9f9;
color:#222;
}
body.darkmode{
  background-color: #777;
  color:#ddd;
}

:root{
  --color-azul: #0000A0;
  --color-turquesa: #00d7b9;
  --color-amarillo:#FFDC00;
}

header{
display:grid;
grid-template-columns: 180px 1fr;
gap:20px;
padding:5px 40px;
margin:0px;
text-align:center;



text-align:center;
height:70px;
}
header img{
  height:60px;
}
.granTitulo{
font-size:2em;
font-weight:bold;
color:var(--color-azul);
text-shadow: #aaa 1px 1px 3px;
}
header small{
  font-size:.8rem;
  display:block;
  margin-top:-.2rem;
  color:#999;
}

@media screen and (max-width:720px){
  header{
    padding:1px 2px;
    gap:6px;
    grid-template-columns: 100px 1fr;
    align-items: center;
  }
  header img{
    height:44px;
  }
  .granTitulo{
  font-size:1.4rem;
  }
}


header.simple{

}



h2{
  font-size:1.2rem;
  font-weight: bold;
  color:#444;
}
.darkmode h2{
  color:#bbb;
}

main{
  height: calc(100vh - 70px);
}

footer{
display:block;
padding:4pt 0px 1em .1em;
position:fixed;
left:0px;
right:0px;
bottom:0px;
width:100%;
color:#eee;
background:#0000a0;
}
footer a{
	color:#fff;
}


a.login{
color:#bfa047;
margin-right:20px;
}
a.logout{
color:#bfa047;
margin-right:20px;
}



h1{
margin:0px;
padding:.2em 0em;
}

.minilogo{
margin:0px 0px 0px 20px;
height:55px;
}



.Central{
max-width:1400px;
min-width:800px;   
width:80%;
background:#fff;
margin:0px auto;
padding:0px 2em;
}
.Cuerpo{

text-align:left;
color:#3C3C3C;
background:#fff;
padding-top:1em;
padding-bottom:5em;

height: 100%;
overflow-y: auto;
}



#Retro{
font-size:16px;
color:#003322;
background:#e0e7e3;
text-align:center;
padding:1em 2em;
}
#Retro.error{
background:#efe0e0;
color:#660000;
}
#Retro span{
display:block;
width:1004px;
padding:14px;
text-align:left;
margin:0px auto;
}

input[type='text'].autocomplete{
  background-color: #ddeeff;
}


menu .Central{
background:#0000A0;
}
menu .Central a{
display:inline-block;
font-size:1.1rem;
padding:.5em .7em;
text-align:center;
cursor:pointer;
color:#ddd;
text-decoration:none;
}
menu .Central a:hover{
color:#fff;
}
menu .Central a.actual{
color:#ffffff;
text-shadow:#000 2px 2px 5px;
font-size:1.4em;
}

.Forma{
    font-size:.9em;
}

.Caja{
display: block;
border-left: var(--color-turquesa) 5px solid;
border-bottom:#e4e4e4 1px solid;
background-color: #ffffff;
border-radius: 5px;
box-shadow: #ddd 1px 1px 13px;
}
.Caja.aire{
padding:10px 40px 20px 40px;
}
.darkmode .Caja{
  box-shadow: none;
  background-color: #111;
}

input[type='text'], input[type='password'],input[type='email'],input[type='time'],input[type='number']{
    background:#f9f9f9;
    padding:.4em;
    font-size:1em;
    border:#aaa 1px solid;
    color:#444;
    
    border-top-right-radius:7px;
    border-bottom-right-radius:7px;
    border-bottom-left-radius:7px;
}
input[type='file']{
    background:#f9f9f9;
    padding:.2em .3em .2em .1em;
    font-size:1.1em;
    border:#aaa 1px solid;
    color:#444;
    border-radius:5px;    
}
textarea.textarea{
    background:#f9f9f9;
    padding:.5rem 1rem;
    font-size:1em;
    border:#aaa 1px solid;
    color:#333;
    width:100%;
    
    border-top-right-radius:7px;
    border-bottom-right-radius:7px;
    border-bottom-left-radius:7px;
}

select{
    background:#f9f9f9;
    padding:.3em;
    font-size:1.2em;
    border:#aaa 1px solid;
    color:#444;
}
input[type='checkbox'],input[type='radio']{
    background:#f9f9f9;
    color:#3c3c3c;
    height:1em;   
    width:1em; 
}


.button{
display:inline-block;
 background:#ffffff;
border:#00D7B9 1px solid;
border-radius:5px;
padding:.1rem 1rem;
font-size:1.2rem;
font-weight:bold;
color:var(--color-turquesa); 
cursor:pointer;  
box-shadow:#ccc 1px 1px 1px;
text-decoration:none;
transition: all 200ms ease-out;
}
.button:hover, .button:focus, .button:hover, .button:focus{
 background:var(--color-turquesa); 
 color:#fff;
 box-shadow:#ccc 1px 1px 3px;
}
.button.small{
  padding:.05rem .3rem;
 font-size:1rem;
}
.button:disabled{
  background-color: #bbb;
  color:#888;
}

.button.L{
background:green;
padding:.2em .6em;
font-size:1.2em;
border:green 1px solid;
color:#f4f4f4;
}
.button.L:hover{
color:#fff;
}
.button.R{
background:red;
padding:.2em .6em;
font-size:1.2em;
border:red 1px solid;
color:#f4f4f4;
}
.button.R:hover{
color:#fff;
}
.buttonexcel{
  background-color: #00AA66;
  color:#ddffdd;
  border:#006622 1px solid;
  border-radius: 5px;
  box-shadow: #999 1px 1px 5px;
  padding:.2rem 1rem;
  font-size:1.1rem;
  text-align: center;
  cursor: pointer;
}
.buttonexcel:hover{
  color:#fff;
}




::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #aaa;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #aaa;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #aaa;
}


.navlink{
color:#0000A0;
letter-spacing:.1em;
text-decoration:none;
font-weight:bold;
}
.navlink:hover{
text-decoration:underline;
}

p.center,div.center{
text-align:center;
}
.sobreforma{
padding:0px 0px 1em 0px;
text-align:center;
}

.bajoforma{
padding:1em 0px 1em 0px;
text-align:center;
}


#ConfirmaArevision{
display:none;
}

[x-cloak] { display: none !important; }


.Retro{
  font-size:1.3rem;
  padding:1rem 2rem;
  color:#004422;
  border-radius: 5px;
  box-shadow: #ddd 1px 1px 2px;
  opacity: 0;
  transform: translateY(10);
  transition: all 300ms ease-out;
}
.Retro.error{
  background-color: #eebbbb;
  color:#661111;
}
.Retro.visible{
  opacity: 1;
  transform: translateY(0);
}

.fade-inout {
  animation: fadeInOut 5s ease-in;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
}


.FormaPares{
  

}
.FormaPares li{
  display:grid;
  grid-template-columns: minmax(6rem, 14rem) 1fr;
  margin:1rem 0;
}



.totales{
    margin:0px 10em 0em 1em;
    display:inline-block;
}
.totales span{
margin-left:1em;
}
.totales .P{
color:#CDA500;
text-shadow:#ddd 1px 1px 2px;
}
.totales .R{
color:#880000;
text-shadow:#ccc 1px 1px 2px;
}
.totales .A{
color:#0000aa;
text-shadow:#ccc 1px 1px 2px;
}


.LoginCajas{

margin:0px auto;

}


.Columnas{
overflow:hidden;
}
.Columna{
display:block;
float:left;
}

.Centrar{
text-align:center;
}


.PreFormulario{
background:#888;
color:#eee;
padding:.2em 1em;
}


.Formulario{
position:relative;
background:#ECECFF;
padding:.7em .7em .2em 1em;
border:#888 1px solid;

border-bottom-left-radius:7px;
border-bottom-right-radius:7px;
text-align:left;
}
.Formulario label{
display:inline-block;

padding:0px 1.4em 1em 0em;




}
.Formulario label span{
display:table-cell;

vertical-align:top;
text-align:left;
padding:.4em .7em .2em .6em;
font-weight:bold;
font-size:.9em;
color:#0000A0;

background:#eee;
border:#bbb 1px solid;
border-bottom:none;
border-top-right-radius:7px;
border-top-left-radius:7px;


/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f4f4f4+0,dddddd+100 */
background: #f4f4f4; /* Old browsers */
background: -moz-linear-gradient(top, #f4f4f4 0%, #dddddd 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #f4f4f4 0%,#dddddd 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #f4f4f4 0%,#dddddd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
}
.Formulario label div{
background:#f4f4f4;
padding:.2em .2em;
border:#ccc 1px solid;
text-align:center;
color:#666;
}
.Formulario .submitRow{

padding:.5em 0em 0em 0em;
text-align:right;
}
.Formulario .ui-autocomplete-input{
background:#E6FFFC;
border:#aaaabb 1px solid;
}

.Formulario input.error, input.error{
border:red 2px dotted;
}
.Formulario em.error, em.error{
display:table-cell;
background:#ddbbbb;
color:#660000;
font-size:.8em;
padding:.3em 1em;
margin:0em .2em;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
}

.optform{
display:none;
}
.Formulario .html{
margin:20px 0px;

}





.mayus{
text-transform: uppercase;
}


.Mostrando{
margin:1em 0em .2em 0em;
}
#Resultado{
margin-top:1.5em;
min-height:100px;
overflow-x:auto;
padding:0px 1px 1px 0px;
}




.Tabla{
width:100%;
border-left:transparent 1px solid;
border-right:transparent 1px solid;
border-top:#ccc 1px solid;

font-size:.95em;
color:#222;
border-collapse: collapse;

border-top-left-radius: 7px;
border-top-right-radius: 7px;

}
.Tabla thead{
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
.Tabla thead th{
background:#0000A0;
background-image: linear-gradient(#0000A0 50%, #4444c4);
color:#eeeeff;
padding:.4em .3em .2em .5em;

text-transform:capitalize;
font-weight: normal;

}

.Tabla tr:nth-child(even){
  background-color: #f4f4f4;
}


.Tabla td{
border-left:#eee 1px solid;
border-bottom:#ddd 1px solid; 
padding:.4em .5em;  
border-collapse: collapse;
border-spacing: 1px;
font-size:.9em;
}
.Tabla td:nth-child(1){
  border-left:none;
}
.Tabla tr:hover{
background:#fff;
}
.Tabla tr.loading{
  opacity: .5;
}
.Tabla td.c{
text-align:center;
}
.Tabla td.s{
font-size:.7em;
font-weight:normal;
}
.Tabla a.file, a.file{
display:inline-block;
width:23px;
height:30px;
background:url(img/pdf.png) top left no-repeat;
}
.Tabla a.edit{
display:inline-block;
width:21px;
height:21px;
background:url(img/editar.png) top left no-repeat;
cursor:pointer;
}
.Tabla a.delete, a.delete{
display:inline-block;
width:21px;
height:21px;
background:url(img/eliminar.png) top left no-repeat;
cursor:pointer;
}
label a.file{
margin-top:.2em;
vertical-align:bottom;
}


.Tabla td.estatus_general[rel='P'], .Tabla .estatus_general[rel='P']{
font-weight:bold;
color:#CDA500;
text-shadow:#ccc 2px 2px 3px;
}
.Tabla td.estatus_general[rel='L'], .Tabla .estatus_general[rel='L']{
	font-weight:bold;
color:#008800;
text-shadow:#fff 2px 2px 3px;
}
.Tabla td.estatus_general[rel='R'], .Tabla .estatus_general[rel='R']{
	font-weight:bold;
color:#880000;
text-shadow:#fff 2px 2px 3px;
}
.Tabla td.estatus_general[rel='A'], .Tabla .estatus_general[rel='A']{
	font-weight:bold;
color:#000088;
text-shadow:#fff 2px 2px 3px;
}



.Tabla td.edittd{
width:60px;
}
.Tabla td.deletetd{
width:40px;
}
.Tabla td.mini{
width:40px;
}
.Tabla td.ident{
max-width:120px;
}

.Tabla td.locked{
text-align:center;
}
.Tabla td.locked[rel='1'] .icon{
display:inline-block;
background:url(img/lock2.png) top center no-repeat;
width:22px;
height:23px;
cursor:pointer;
}
.Tabla td.locked[rel='0'] .icon{
display:inline-block;
background:url(img/lock-off.png) top center no-repeat;
width:22px;
height:22px;
}

.Tabla td.ver .icon{
display:block;
width:29px;
height:21px;
background:url(img/ver.png) 0px 5px no-repeat;
cursor:pointer;
margin:0px 4px;
}
.Tabla td.ver[rel=''] .icon{
display:none;
}

.Tabla.preview em{
color:red;
letter-spacing:1px;
}

.Tabla td.especial{
 text-align:center;   
}
.Tabla td.especial .icon{
display:block;
width:30px;
height:36px;

cursor:pointer;
margin:0px auto;
   
}
.Tabla td.especial[rel='0'] .icon{
background:url(img/especialg.png) 0px 5px no-repeat;
cursor:not-allowed;
}
.Tabla td.especial[rel='1'] .icon{
background:url(img/especial.png) 0px 5px no-repeat;
}
.Tabla td.especial[rel='2'] .icon{
background:url(img/especiala.png) 0px 5px no-repeat;
}
.Tabla td.especial[rel='3'] .icon{
background:url(img/especialv.png) 0px 5px no-repeat;
}
.Tabla td.especial[rel='4'] .icon{
background:url(img/especialr.png) 0px 5px no-repeat;
}


.Tabla td.especialshipment{
 text-align:center;   
}
.Tabla td.especialshipment .icon{
display:block;
width:30px;
height:36px;

cursor:pointer;
margin:0px auto; 
}
.Tabla td.especialshipment[rel='1'] .icon{
background:url(img/especialr.png) 0px 5px no-repeat;
}

.Tabla td.small{
font-size:.8em;
}


.Columna.gral{
width:16%;
}
.Columna.gral.extendida{
width:14%;
}
.Columna.detalle{
width:82%;
margin-left:2%;
}
.Columna.detalle.extendida{
width:84%;
margin-left:2%;
}

a.deshacer{
display:inline-block;
 color:#888;
 font-size:.8em;
 text-decoration:underline;
 padding:.2em 1em;   
}
a.deshacer:hover{
 text-decoration:underline;
}

.right{
text-align:right;
}


.Scorecard .Columna{
display:inline-block;
float:none;
margin:1em;
vertical-align:top;
font-size:.9em;
}


textarea[name='comentario']{
width:92%;
margin:.5em auto;
}


.comentshipment{
background:#fff2f2;
border-right:#ccaaaa 2px solid;
border-left:#ccaaaa 2px solid;
border-bottom:#ccaaaa 2px solid;
padding:1em 1.2em 2em 1.2em;
margin:0em .5em;    
}
.comentshipment h4{
margin:0px;
padding:.5em .2em .9em .2em;
letter-spacing: .1em;
}

.ui-autocomplete-loading { background:url('img/miniloading.gif') no-repeat right center; }



.MisFiltros{
padding:.5em 2em;
border:#888 1px dotted;
margin:1em;
}

.Loading{
position:absolute;
width:100%;
top:0px;
left:0px;
display:block;
min-height:165px;
background:#fff url(img/loading.gif) 50% top no-repeat;
z-index:100;
opacity:.7;
}
.MiniLoading{
position:absolute;
width:100%;
top:0px;
left:0px;
display:block;
min-height:23px;
background:#fff url(img/miniloading.gif) 50% top no-repeat;
z-index:100;
}

.ui-widget-overlay{
background-color:#333;
opacity:.7;
}


.fileInfo{
text-align:right;    
}
.fileInfo a.file{
margin-right:100px;
}


.delBot{
background:#ffaaaa;
color:#994444;
border:#ff9999 1px solid;
font-size:1em;
padding:.2em .4em;
margin-top:.4em;
border-radius:7px;
}
#ConfirmaEliminarShip{
display:none;
background:#ffeeee;  
border:#ff9999 1px solid; 
padding:.2em 1em;
border-bottom-right-radius:13px;
border-bottom-left-radius:13px; 
}
#eliminar-shipment{
display:inline-block;
text-decoration:none;
color:white;
background:red;
padding:.3em .5em;
margin:.2em auto;
}


.comentario{
border:#ccc 2px solid;
border-radius:7px;
padding:.5em 1em;
font-size:.9em;
background:#f4f4f4;
}


.Columna.p50{
width:50%;
}
.Columna.d2{
width:40%;
margin:0px 40px 0px 40px;
}

.iconoCambiar{
height:60px;
position:absolute;
top:5px;
right:5px;
}
.iconoCambiar.shipment{
width:111px;
background:url(img/cambiar-shipment.png) top left no-repeat;
}
.iconoCambiar.factura{
width:61px;
background:url(img/cambiar-factura.png) top left no-repeat;
}



.MiniResultados{
font-size:.9em;
}
.MiniResultados td:nth-child(odd){
text-align:right;
font-weight:bold;    
}


#templateDesbloq{
display:none;
}

textarea.grande{
    width:100%;
}

.Tabla .estadoreq{
    
}
.Tabla .estadoreq[rel='R']{
color:red;   
}
.Tabla .estadoreq[rel='P']{
color:#D9C556;   
}
.Tabla .estadoreq[rel='S']{
color:#5BBB66;   
}
.Tabla .estadoreq[rel='E']{
color:orange;   
}

#slot{

}


.estatus.R{
color:red;   
}
.estatus.P{
color:#bea40f;   
}
.estatus.L{
color:#30b840;   
}
.estatus.E{
color:orange;   
}
.estatus.S{
color:#888;   
}
.estatus.A{
color:blue;   
}



div[name='requisitos']{
    background:#ccccff;
}
div[name='requisitos'] b{
padding:.2em 1em;
color:#666;
}
div[name='requisitos'] .thumb{
height:50px;
}

@media (max-width:800px) {

  /* your conditional / responsive CSS inside this condition */

.Central{
max-width:800px;
min-width:200px;
}
.GranTitulo{
font-size:2.2em;
padding:.3em 0px 0px 0px;
}

}