html {font-size:16px;}
body{padding:0;margin:0;font-family:Arial, Helvetica, sans-serif;color:#515756;background:#eef;}
div{padding:0;margin:0;}
* {-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;}
div#cuerpo{margin-bottom:25px;}
div#divreport{width:30%;border:2px solid #00f;}
div#divreport2{width:70%;border:2px solid #0f0;}

img.responsive{width:100%;height:auto;}
span.etiquet{padding:5px;border-radius:5px;}
.verde{background:#0f0;}

table {border-collapse: collapse;}
table, td, th {border: 1px solid #515657;padding:0.2rem;font-size:0.8rem;color:#000;}
table.f1 td {font-size:1rem;}
table.pedidos, td, th {border: 1px solid #515657;padding:0.2rem;font-size:0.6rem;}
table.hg {border: 1px solid #515657;padding:0.2rem;font-size:0.6rem;width:100%;}
table.hg td {width:20%;}
.ib{display:inline-block;margin-right:-4px;vertical-align:top;}
td.datestamp{font-size:0.7rem;}
tr.verde{background:#6f6;}
div.out{width:100%;padding-left:5%;padding-right:5%;text-align:center;}
div.logo{width:100%;padding-left:5%;padding-right:5%;font-size:1rem;color:#008;padding-top:0.5rem;padding-bottom:0.5rem;background:#fff;border-bottom:1px solid #800;}
div.logoescr{width:10%;}
div.logoescr2{width:30%;}
div.logoclt{width:40%;}
input#barcode:focus {
  background-color: #ff9; /* Change the background color */
  color: #00f; /* Change the text color */
  border-color: blue; /* Change the border color */
}
div.menu{padding:5px;border:1px solid #555; border-radius:5px;cursor:pointer;background:#ff9;display:inline-block;}
div#redalert{width:10%;background:red;color:#fff;font-weight:bold;}
div#alert{position:fixed;width: 500px;top:100px;
height: 200px;
margin: 5% auto; 
left: 0;
right: 0;border:1px solid red;background:#ff8;padding:5rem;}
div#alert2{position:fixed;width: 500px;top:100px;
height: 200px;
margin: 5% auto; 
left: 0;
right: 0;border:1px solid red;background:#ff8;padding:5rem;}
div.login{width:50%;margin-left:25%;border:1px solid #003; border-radius:10rem;padding:1rem;margin-bottom:5rem;min-width:280px;background:#fff;margin-top:3rem;}
div#imglogin{width:10%;margin-left:45%;min-width:50px;}
div#smenu{border-top:1px solid #003;}
div.formlogin{width:80%;padding-top:2rem;margin-left:10%;}
form#formlogin input{width:45%;border:0;outline:0;color:#515756;font-size:0.9rem;border-bottom:1px solid #515756;padding-bottom:0.3rem;padding-left:0.3rem;margin-bottom:0.2rem;}
form#formlogin input:focus{border-bottom:1px solid #f00;}
button.menu, button.menu2, button.tri, button.menu3 {padding:0.2rem;border:0;outline:0;color:#515756;font-size:0.6rem;border:1px solid #515756;border-radius:5px;margin-bottom:0.2rem;margin-top:0.2rem;background:#fff;min-width:100px;cursor:pointer;}
div.btnlink{border:none;font-size:0.6rem;color:#008;cursor:pointer;padding-bottom:5px;padding-top:5px;}
div.btnlink:hover{text-decoration:underline;}
button.menubc{padding:0.2rem;border:0;outline:0;color:#515756;font-size:1rem;border:1px solid #515756;border-radius:5px;background:#ff9;min-width:100px;cursor:pointer;}
button.small{padding:0.2rem;border:0;outline:0;color:#515756;font-size:0.6rem;border:1px solid #515756;border-radius:5px;margin-bottom:0.2rem;margin-top:0.2rem;background:#fff;cursor:pointer;}
button.small2{padding:0.2rem;border:0;outline:0;color:#515756;font-size:1rem;border:1px solid #515756;border-radius:5px;margin-bottom:0.2rem;margin-top:0.2rem;background:#fff;cursor:pointer;}
input.readonly{border:none;background:#eef;}
input.write{border:1px solid blue;background:#fff;}

button#btconnect{width:30%;border:0;outline:0;color:#515756;font-size:0.9rem;border:1px solid #515756;border-radius:2rem;padding-bottom:0.3rem;padding-top:0.3rem;margin-bottom:0.2rem;margin-top:0.2rem;background:#fff;min-width:100px;}
button#btconnect:hover {background:#cef;}
button.menu:hover {background:#cef;}
button.small:hover {background:#cef;}
button.menu2:hover {background:#cef;}
button.menu3:hover {background:#f66;}
button.tri:hover {background:#cef;}
div#modifRuta,div#FaddLinea {color:#00f;border:1px solid #008; padding:0.3rem;border-radius:10px;width:250px;cursor:pointer;}
div#addnewline{padding:1rem;border:0;outline:0;color:#515756;font-size:0.9rem;border:1px solid #515756;border-radius:2rem;padding-bottom:0.3rem;padding-top:0.3rem;margin-bottom:0.2rem;margin-top:0.2rem;background:#fff;min-width:100px;}
div#addnewline:hover {background:#9f6;}
a.salir {display:inline-block;padding:0.2rem;border:0;outline:0;color:#515756;font-size:0.6rem;text-decoration:none;border:1px solid #515756;border-radius:5px;margin-bottom:0.2rem;margin-top:0.2rem;background:#fff;min-width:100px;}
a.salir:hover {background:#f99;}
a.btnmenu {display:inline-block;padding:1rem;border:0;outline:0;color:#515756;font-size:0.9rem;text-decoration:none;border:1px solid #515756;border-radius:2rem;padding-bottom:0.3rem;padding-top:0.3rem;margin-bottom:0.2rem;margin-top:0.2rem;background:#fff;min-width:100px;}
a.btnmenu2 {display:inline-block;padding:1rem;border:0;outline:0;color:#515756;font-size:0.9rem;text-decoration:none;border:1px solid #515756;border-radius:2rem;padding:0.3rem;margin-bottom:0.2rem;margin-top:0.2rem;background:#fff;}

a.btnsmall{display:inline-block;text-decoration:none;padding:0.2rem;color:#515756;font-size:0.6rem;border:1px solid #515756;border-radius:5px;margin-bottom:0.2rem;margin-top:0.2rem;background:#fff;}
a.btnsmall:hover{background:#cef;}
span.alert{color:red;}
div#div1{padding:1rem;background:#fff;border:1px solid #515657;border-radius:1rem;margin-top:1rem;}
div.imprenta{width:160;padding:20px;}
div.bobina{position:relative;width:160px;height:120px;border:1px solid blue;}
input.bb2{position:absolute;right:5px;top:50px;font-size:12px;padding:0;width:60px;}
input.bb4{position:absolute;left:5px;top:50px;font-size:12px;padding:0;width:60px;}
div.Fb1{position:absolute;top:5px;left:5px;}
div.Fb2{position:absolute;top:5px;right:5px;}
div.bolsa{position:relative;width:120px;height:100px;border:1px solid blue;}
input.b1{position:absolute;top:5px;left:40px;font-size:10px;padding:0;width:40px;}
input.b2{position:absolute;right:5px;top:40px;font-size:10px;padding:0;width:40px;}
input.b3{position:absolute;bottom:5px;left:40px;font-size:10px;padding:0;width:40px;}
input.b4{position:absolute;left:5px;top:40px;font-size:10px;padding:0;width:40px;}
div.F1{position:absolute;right:5px;top:20px;}
div.F2{position:absolute;right:5px;top:55px;}
div.F3{position:absolute;left:5px;top:20px;}
div.F4{position:absolute;left:5px;top:55px;}
div.class30{width:30%;margin-left:35%;}
div.class44{width:44%;margin-left:28%;}
div.class50{width:50%;}
div.class60{width:60%;margin-left:20%;}
div.class80{width:80%;margin-left:10%;}
div.class90{width:90%;margin-left:5%;}
div.small30{width:150px;}
div.small20{width:100px;}
div.small15{width:75px;font-size:10px;margin-right:0.3rem;}
div.small10{width:50px;}
div.small10a{width:50px;font-size:10px;margin-right:0.3rem}
div.divbutton{color:#00f;border:1px solid #008; padding:0.3rem;border-radius:10px;width:250px;cursor:pointer;}
div.divbuttonsmall{color:#00f;border:1px solid #008; border-radius:5px;font-size:10px;cursor:pointer;padding:5px 0 5px 0;}
input {margin-bottom:0.5rem;padding:0.5rem;width:90%;font-size:1rem;}
input.auto{width:150px; font-size:10px;margin:0;padding:0;}
input.margin5{margin-bottom:5px;}
select.margin5{margin-bottom:5px;}
input.auto2{width:auto; font-size:1rem;font-weight:bold;margin:0;padding:0;}
input.auto3{width:75px; font-size:15px;margin:2px;padding:0;}
input.auto50px{width:50px; font-size:10px;margin:0;padding:0;}
input.small{margin-bottom:0.5rem;padding:0.5rem;width:40%;font-size:1rem;}
input.small30{margin-bottom:0.5rem;padding:0.5rem;width:30%;font-size:1rem;}
input.small20{margin-bottom:0.5rem;padding:0.5rem;width:100px;font-size:1rem;}
input.small15b{margin-bottom:0.5rem;padding:0.5rem;width:75px;font-size:1rem;}
input.small15{margin-bottom:0.2rem;padding:0.25rem;width:75px;font-size:10px;}
input.small10a{margin-bottom:0.2rem;padding:0.25rem;width:50px;font-size:10px;}
input.small10{margin-bottom:0.5rem;margin-left:0.5rem;padding:0.5rem;width:50px;font-size:1rem;}
input.radio{margin-bottom:0.5rem;padding:0.5rem;width:20px;font-size:1rem;}
input.radio2{display:inline-block;margin-bottom:0.5rem;padding:0.5rem;width:20px;font-size:1rem;}
input.read{background:#ff6;}
input.bold{font-weight:bold;}
input.operador{font-size:2rem;padding:0.5rem;border:2px solid #fff;}
input.operador3{font-size:2rem;padding:0.5rem;border:2px solid #fff;width:70%;}
select.operador3{font-size:2rem;padding:0.2rem;border:2px solid #fff;width:150px;}
select.operador1{font-size:1rem;padding:0.5rem;border:2px solid #fff;width:150px;}
select.operador2{font-size:2rem;padding:0.2rem;border:2px solid #fff;width:400px;}
input.operador:focus{border:2px solid red;}
button.operador{font-size:2rem;padding:0.5rem 2rem 0.5rem 2rem;background:#00f;color:#fff;}
button.operador:hover{background:#0ff;color:#f00;}
div.btnEntrega{color:#00f;border:1px solid #008; padding:0.3rem;border-radius:10px;width:250px;}
div.versql{color:#00f;border:1px solid #008; border-radius:5px;font-size:0.7rem;width:25px;}
div.visi{visibility:visible;}
div.novisi{visibility:hidden;}
div.estruc{width:200px;}
div.familia{background:#cfc;}
div.acabados{background:#ecf;}
select {margin-bottom:0.5rem;padding:0.5rem;width:90%;font-size:1rem;}
select.auto{width:auto; font-size:10px;margin:0;padding:0;}
select.small {margin-bottom:0.5rem;padding:0.5rem;width:40%;font-size:1rem;}
select.small30 {margin-bottom:0.5rem;padding:0.5rem;width:30%;font-size:1rem;}
select.small20 {margin-bottom:0.5rem;padding:0.5rem;width:100px;font-size:1rem;}
select.small15 {margin-bottom:0.5rem;padding:0.5rem;width:100px;font-size:0.7rem;}
select.estadochange{font-size:0.8rem;}
select.estadochange2{font-size:0.8rem;padding:0.1rem;}
textarea {margin-bottom:0.5rem;padding:0.5rem;width:90%;font-size:1rem;}
textarea.small30{margin-bottom:0.5rem;padding:0.5rem;width:30%;font-size:1rem;}
button.btimg {border:0;cursor:pointer;margin:0;padding:0;font-size:1rem;background:#fff;padding:0.2rem;}
button.btimg:hover{background:#cef;}
div.tipoEmbobinado{width:6rem;border:2px solid #555;border-radius:10px;padding:0.2rem;background:#fff;margin-left:1rem;}
div.tipoEmbobinado2{width:6rem;border:2px solid #555;border-radius:10px;padding:0.2rem;background:#fff;margin-left:1rem;border:2px solid red;}
a.btimg {display:inline-block;border:0;cursor:pointer;margin:0;font-size:1rem;background:#fff;padding:0.2rem;}
a.btimg:hover{background:#cef;}
hr{border-color:#cef;background:#cef;}
span.title{color:#f80;}
span.cotnum{font-size:1.2rem;color:#000;}
div.noshow{display:none;}
div.show{display:inline-block;}
button.noshow{display:none;}
input.noshow{display:none;}
input.show{display:inline-block;}
button.show{display:inline-block;}
div#valla{border:1px solid #f80;}
div#upload{position:fixed;width:30%;background:#bf6;min-height:200px;border:1px solid #0f0;z-index:10;border-radius:1rem;}
div#divimg{position:fixed;top:0;z-index:10;border:2px solid #0f0;z-index:10;border-radius:1rem;background:#fff;}

table.inside{width:100%;}
td.cell1{width:6%;}
td.cell2{width:64%;}
td.cell3{width:15%;}
table.inside td.1{text-align:left;width:30%;}
table.inside td.2{text-align:left;width:70%;}
table.program tr td {font-size:10px;}
div.print{}
div.printimg{width:80%;margin-left:10%;}
div.printtitle{width:40%;}
div.printadres{width:60%;border:1px solid #000;border-radius:10px;padding:10px;text-align:left;font-size:0.8rem;margin-bottom:10px;}
table.printmoney{font-size:0.6rem;}
table.trabajos{width:100%;font-size:0.8rem;}
div.cotiz{text-align:left;font-size:0.6rem;}
td.1{width:20%;}
td.2{width:70%;}
td.3{width:10%;}
div.signature{margin:10px;width:30%;height:5rem;border:1px solid #d2d2d2;border-radius:1rem;padding-top:2.5rem;}

a.export{text-decoration:none;display:inline-block;padding:0.3rem;background:#690;border:1px solid #555;border-radius:5px;color:#fff;}
a.export:hover{color:#f00;}
div.foot{position:fixed;bottom:0;font-size:0.8rem;margin-top:25px;}
button#excel{background:#0f0;padding:10px;}
/* The container */

.container {
  display: inline-block;
  position: relative;
  margin-right: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  border:1px solid red;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input.checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container input.checkboxnc {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: #fff;
  border:1px solid blue;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #9f0;
}

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

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

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

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 4px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
@media (max-width:600px)
{
	form#formlogin input{width:65%;font-size:1.2rem;}
	button#btconnect{font-size:1.2rem;width:90%;}
	div.login{width:90%;margin-left:5%;}
div.out{width:98%;padding-left:1%;padding-right:1%;min-width:280px;}
div.logo{width:100%;padding-left:2%;}
div.logoescr{width:15%;}
div.logoescr2{width:50%;}
div.logoclt{width:80%;}
div.class30, div.class44, div.class60 {width:100%;margin-left:0;}
div.class44, div.class60 {min-width:300px;}
button.tri{padding:0.5rem;}
div#cat{position:absolute;width:100%;left:0;top:5%;}
div#upload{width:90%;margin-left:5%;}
div.class50{width:100%;}
}

@media print {
  div#menu{display:none;}
  div#smenu{display:none;}
  div.class30, div.class44, div.class60 {width:90%;margin-left:5%;text-align:center;}
  @page {size:auto; margin:0;}
 body { margin: 1.6cm; }
 a#print{display:none;}
 div#printmenu{display:none;}
div.out{padding-left:0;padding-right:0;}
}