td:nth-child(1) a {
 color: red;
 text-decoration: none;
}
td:nth-child(1) a:hover {
 cursor: zoom-in;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px
}
button {
font-size: 6px;
border-radius: 12px;
cursor: pointer;
}
button:disabled {
cursor: not-allowed;
}
.explicacion {
background: Black;
font-family: Arial, Helvetica, sans-serif;
height: 200px;
}
.parar {
top: 150px;
font-size: 2em;
margin-left: 5px;
background: grey;
}
.estilo_codigo {
font-size: 2em;
margin-left: 5px;
background: Black;
color: LightGrey;
}
.msg-3 {
  color: LightGreen;
  display: none;
}
.msg-2 {
  color: LightGrey;
  display: none;
}
.msg-icn {
  color: Yellow;
  display: none;
}
.msg-3:before {
  border: 1px solid LightGreen;
  clip-path: polygon(0% 105%, 0% 0%, 105% 0%, 105% 105%, 243px 105%, 243px 80%, 221px 80%, 221px 105%);
}
.msg-3:after {
  left: 220px;
  background: LightGreen;
  clip-path: polygon(0 0, 0% 100%, 100% 0%, calc(100% - 2px) 0, 1px calc(100% - 2px), 1px 0);
}
.msg-2:before {
  border: 1px solid LightGrey;
  clip-path: polygon(0% 105%, 0% 0%, 105% 0%, 105% 105%, 143px 105%, 143px 80%, 121px 80%, 121px 105%);
}
.msg-2:after {
  left: 120px;
  background: LightGrey;
  clip-path: polygon(0 0, 0% 100%, 100% 0%, calc(100% - 2px) 0, 1px calc(100% - 2px), 1px 0);
}
.msg-icn:before {
  border: 1px solid Yellow;
  clip-path: polygon(0% 105%, 0% 0%, 105% 0%, 105% 105%, 43px 105%, 43px 80%, 21px 80%, 21px 105%);
}
.msg-icn:after {
  left: 20px;
  background: Yellow;
  clip-path: polygon(0 0, 0% 100%, 100% 0%, calc(100% - 2px) 0, 1px calc(100% - 2px), 1px 0);
}
.msg-icn, .msg-2, .msg-3 {
  position: absolute;
  padding:  10px 20px;
  box-sizing: border-box;
  width: 600px;
  min-width: 80px;
  height: 38px;
  font-weight: bold;
  line-height: 35px;
 vertical-align: middle;
}
.msg-icn:before, .msg-2:before, .msg-3:before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 3px;
  box-sizing: border-box;
vertical-align: middle;
}
.msg-icn:after, .msg-2:after, .msg-3:after {
  content: "";
  position: absolute;
  width: 25px;
  height: 20px;
  top: calc(100% + 9px);
  box-sizing: border-box;
}

#zoomt {
color: Grey;
padding:6px 5px 8px 6px;
}
.minus, .plus{
			width:10px;
			height:10px;
			background:#f2f2f2;
			border-radius:4px;
			padding:4px 5px 8px 5px;
			border:1px solid #ddd;
      display: inline-block;
      vertical-align: top;
      text-align: center;
      cursor: pointer;
		}
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
 .select2-container--default {
  position: absolute;
  left: -120px;
  box-sizing: border-box;
  white-space: break-spaces!important;
	background-color: transparent;
	background-repeat : repeat center;
	height: 18px;
	width: 220px;
	color: black;
	font-weight: normal;
  font-size: 12px;
 }
.select2-center-option,
.select2-selection__choice {
  display: flex;
  align-items: center;
  gap: 5px;
}

.select2-center-option img {
  width: 50px;
  max-width: 100%;
  height: auto;
  margin-right: 5px;
}

	@media
	  only screen 
    and (max-width: 760px), (min-width: 768px) 
    and (max-width: 1024px)  {

               div[class*="inp"] {
                       display: block;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  background-color: yellow;
  border: 2px solid #4CAF50;
  z-index: 1;
		}
		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr {
			display: block;
			white-space: normal;
		}

		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr {
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
    tr {
      margin: 0 0 1rem 0;
    }
      			/*     table[id*="myTable"] tr:nth-child(2n+13) {
      background: lightpink;
    }
		*/
		td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 35%;
		}
		td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 1px;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}
		td:nth-of-type(2) {
letter-spacing: -1px;
font-stretch: condensed;
		}
		/*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
		td:nth-of-type(1):before { content: "CODIGO"; letter-spacing: -1px; font-stretch: condensed; width: 30%; }
		td:nth-of-type(2):before { content: "DESCRIPCION"; letter-spacing: -1px; font-stretch: condensed; width: 30%; }
		td:nth-of-type(3):before { content: "N°SPICER"; letter-spacing: -1px; font-stretch: condensed; width: 30%; }
		td:nth-of-type(4):before { content: "OBSERVAC."; letter-spacing: -1px; font-stretch: condensed; width: 30%; }
		td:nth-of-type(5):before { content: "Ø ESTRIAS"; letter-spacing: -1px; font-stretch: condensed; width: 30%; }
		td:nth-of-type(6):before { content: "CANT."; letter-spacing: -1px; font-stretch: condensed; width: 30%; }
	   table[id*="myTable"] td:nth-child(5) { display: none; }
	   table[id*="myTable"] td:nth-child(6) { display: none; }
       table[id*="myTable"] td { padding-top: 1px; }	   
       table[class*="tabla_crucetas"] td:nth-of-type(1):before { content: "Núm.Serie"; }
       table[class*="tabla_crucetas"] td:nth-of-type(2):before { content: "Cód.Nuevo"; }
       table[class*="tabla_crucetas"] td:nth-of-type(3):before { content: "Cód.ant. (Arg.)"; }
       table[class*="tabla_crucetas"] td:nth-of-type(4):before { content: "Ø Dados"; }
       table[class*="tabla_crucetas"] td:nth-of-type(5):before { content: "Largo Total"; }
    table[class*="tabla_crucetas"] { background: yellow; }
    td[class*="texto_titulo"]:before { content: attr(data-pieza); top: 20px; text-decoration: underline; text-decoration-style: double; }
	td[class*="texto_titulo"] { color: brown; letter-spacing: -1px; font-stretch: condensed; }
    tr[class*="fila_titulo"] td:nth-child(2) { display: none; }
    tr[class*="fila_titulo"] td:nth-child(3) { display: none; }
    tr[class*="fila_titulo"] td:nth-child(4) { display: none; }
    tr[class*="fila_titulo"] td:nth-child(2):before { display: none; }
    tr[class*="fila_titulo"] td:nth-child(3):before { display: none; }
    tr[class*="fila_titulo"] td:nth-child(4):before { display: none; }
    	 .select2-container--default {
  box-sizing: border-box;
  white-space: break-spaces!important;
	background-color: transparent;
	background-repeat : repeat center;
  position: absolute;
	top: -10px;
    left: 5px;
	height: 18px;
	width: 220px;
	color: black;
	font-weight: normal;
  font-size: 12px;
 }
.select2-center-option,
.select2-selection__choice {
  display: flex;
  align-items: center;
  gap: 5px;
}

.select2-center-option img {
  width: 50px;
  max-width: 100%;
  height: auto;
  margin-right: 5px;
}

		}
table[class*="tabla_crucetas"] {
	border-style: ridge;
	border: 1px solid black;
        }
table[class*="tabla_crucetas"] tr:nth-child(even) {
    background: #f2f2f2;
        }
table {
  white-space: nowrap;
  font-size: 16px;
  font-family: Arial;
  font-weight: Bold;
  table-layout: fixed;
  width:100%;
  border-collapse: collapse;
  margin-left:auto;
  margin-right:auto;
}
table[id*="myTable"] th:nth-child(1) {
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: 17px 21px;
  width: 15%;
  }
table[id*="myTable"] th:nth-child(2) {
  background-position: left bottom, right bottom;
  background-repeat: no-repeat, no-repeat;
  background-size: 17px 21px, 17px 21px;
 width: 45%;
 }
table[id*="myTable"] th:nth-child(3) {
  background-position: left bottom, right bottom;
  background-repeat: no-repeat, no-repeat;
  background-size: 17px 21px, 17px 21px;
  width: 16%;
  }
table[id*="myTable"] th:nth-child(4) {
  background-position: left bottom;
  background-repeat: no-repeat, no-repeat;
  background-size: 17px 21px, 17px 21px;
  width: 14%;
  }

tbody[id*="t_punta"] {
	background: LightCyan;
    }
tbody[id*="t_hd"] {
	background: Khaki;
    }
tbody[id*="t_hpu"] {
	background: MistyRose;
    }
tbody[id*="t_caja"] {
	background: LightCyan;
    }
tbody[id*="t_salida"] {
	background: Khaki;
    }
tbody[id*="t_bridaspc"] {
	background: MistyRose;
    }
tbody[id*="t_hf"] {
	background: LightCyan;
    }
tbody[id*="t_bridasestr"] {
	background: Khaki;
    }
tbody[id*="t_seguro"] {
	background: MistyRose;
    }
tbody[id*="t_accesorio"] {
	background: MistyRose;
    }
tbody[id*="t_movimiento"] {
	background: Khaki;
    }
tbody[id*="t_manguito"] {
	background: LightCyan;
    }
tbody[id*="t_agricola"] {
	background: LightGrey;
    }
tr {
	background: White;
    }
.separador {
	line-height: 2px;
	}
td {
  padding-top: 5px;
  text-align: center;
  border-top:solid 1px black;
  border-left:solid 1px black;
  border-right:solid 1px black;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  }
th {
  vertical-align: bottom;
  border-style: hidden;
  background: yellow;
  position: sticky;
  top: 0; /* Don't forget this, required for the stickiness */
}
h1, h2 {
 display: inline;
 font-family: Verdana;
 font-size: 20px;
 font-weight: bold;
 background-color: lightgray;
 margin-left:auto;
 margin-right:auto;
 text-align: center;
 }
h3 {
 display: table;
 font-family: Verdana;
 font-size: 16px;
 text-align: justify;
 }
hr {
height:2px;
background-color:
#123455;
}
.final {
 margin-left:auto;
 margin-right:auto;
 text-align: center;
 width: 60%;
 }
#piezas {
    position: relative;
    left: 0px;
    top: 0px;
	background-repeat : repeat center;
	height: 18px;
	width: 260px;
	color: black;
	font-weight: normal;
}
#myInput1 {
    position: relative;
    top: 5px;
    left: 20px;
    line-height:20px;
	border: 1px solid;
	border-radius: 2px;
	height: 15px;
	width: 180px;
}
#myInput {
    position: absolute;
    top: 20px;
    left: 60%;
    line-height:20px;
	border: 1px solid;
	border-radius: 2px;
	height: 15px;
	width: 180px;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  opacity:30%;
}
img.imagen_titulo {
    display: block;
    margin-left: auto;
    margin-right: 0;
}
td.texto_titulo {
 vertical-align: middle;
 text-align: left;
 border-left: hidden;
 border-right: hidden;
 font-style: italic;
}
td[colspan="2"] {
 border-right: hidden;
}
a:link {
 padding-top: 40px;
 margin: auto;
}
.fila_titulo {
 /* background: lightgreen; */
 background: transparent;
 height:54px;
}
.fila_titulo span {
 font-style: italic;
}
.fotos {
 color: red;
 font-size: 12px;
 display: inline-block;
 height: 10px;
 text-align: center;
 line-height: 100%;
 vertical-align: middle;
}
#progressbar {
        border:3px solid red;
		background: red;
        width:200px;
        height:0.5px;
        position:relative;
		top: 0;
}
.inp {
text-align: left;
display: none;
}
.tipo_ {
display: none;
}
.filtro {
background-color: yellow;
}
#resultado {
    position: absolute;
    top: 20px;
    left: 5px;
    width: 50%;
    word-wrap: break-word;
    color: blue;
    letter-spacing: -1px;
    font-size: x-small;
    font-stretch: extra-condensed;
    text-align: left;
}
#resultado1 {
    position: absolute;
    top: 32px;
    left: 5px;
    word-wrap: break-word;
    color: brown;
    font-size: small;
    font-weight: bold;
    font-stretch: extra-condensed;
    text-align: left;
}