/* Parent container should use flex with no wrapping */
#tableContentBody .bodyContent {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

/* Each cell (span) should have fixed width and no extra flex growth */
#tableContentBody .bodyContent span {
  width: 60px;
  min-width: 60px;
  height: 50px;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* First column: Color name */
#tableContentBody .bodyContent span.colorName {
  font-size: 11px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1.2;
  padding: 4px;
}

/* Number input box */
#tableContentBody .bodyContent span input[type="number"] {
  width: 100%;
  height: 35px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  text-align: center;
  font-size: 14px;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
}

/* Remove spinner arrows */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#tshirt-customizer {

  margin-bottom: 20px;
  width: 100%;
  display: grid !important;
}
#tshirt-customizer h3 {
  margin-top: 20px;
  font-size: 1.2em;
}
.size-qty-row label {
  display: inline-block;
  margin: 5px 10px 10px 0;
}

.decoration-block input[type=\"file\"],
.decoration-block select {
  margin-right: 10px;
  margin-bottom: 10px;
}
.remove-decoration {
  background: red;
  color: #fff;
  border: none;
  padding: 3px 6px;
  cursor: pointer; float: right; font-size: 10px;
}
form.cart .quantity {
  display: none !important;
}
.size-matrix {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  font-family: Arial, sans-serif;
  max-width: fit-content;
}

.matrix-header, .matrix-row {
  display: grid;
  grid-template-columns: 100px repeat(11, 60px);
}

.cell {
  border: 1px solid #ccc;
  padding: 4px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cell input[type="number"] {
  width: 100%;
  height: 100%;
  padding: 4px;
  border: none;
  text-align: center;
  box-sizing: border-box;
}

.header {
  background-color: #f1f1f1;
  font-weight: bold;
}

.color-name {
  font-weight: normal;
  background-color: #fff;
}
.myHeading {
  display: flex;
   font-weight: 600;
}.myHeading span {
 width: 45px;
  text-align: center;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 0px;
  background: #f2f2f2;
  text-transform: uppercase;
}
.myHeading span:first-child {
  width: 100px;
}
div#tabeContentHeading {
  display: inline-block;
  width: 100%;
}
div#tableContentBody {
  width: 100%;
  display: flex;
  margin-top: -5px;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
div#tableContentBody .bodyContent:nth-child(2n+1) {
  /*background-color: #ffffff;*/
}

#tableContentBody .bodyContent {
  display: flex;
  width: 100%;
}
#tableContentBody .bodyContent {
display: grid;
  grid-template-columns: 70px repeat(11, 45px);
  gap:0px;
  align-items: center;
  padding:0px;
  border-bottom:0px ;
}

.colorName {
  font-weight: bold;
}

.qty_input input {
  width: 100%;
  padding: 4px;
  box-sizing: border-box;
  text-align: center;
}

.clearBtn {
  cursor: pointer;
  text-align: center;
}

.totalItemsQtyPro {
  font-weight: bold;
  text-align: center;
}
#tableContentBody .bodyContent span.colorName {
width: 78px;
  text-align: center;
  font-size: 10px;
  flex-direction: column;
  height: 51px !important;
  margin-top: -15px;
  background: #fff;
}
div#tableContentBody .bodyContent span {
  height:61.6px;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}
div#tableContentBody .bodyContent span.qty_input {
display: flex;
  flex-flow: column;
  border: 0px;
  width: 45px !important;
  padding: 0px;
  margin-top: -15px;
}
#tableContentBody {
  white-space: nowrap;
}
.myHeading span {

  text-align: center;
  border:
0.1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  padding:
6px 0px;
  background:
#f2f2f2;
  text-transform: uppercase;
}.qty_input {
  display: flex;
  flex-flow:
column;
}
div#tableContentBody .bodyContent span input[type="number"] {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance: none;
-moz-appearance: textfield;
  max-width: 45px;
  height: 50px;
  padding: 0;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 0px;
}
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }