/* The outer container. This suits a center aligned layout. */
div.detailquantity {
box-sizing: border-box;
line-height: 1;
text-align: center;
width: 100%;
font-size: 0.95rem;
padding: 0 0 0.8rem 0;
/* background-color: #F6F6F6; */
}

/* Optional: Hide the word Quantity, don't need to display that. */
div.detailquantitytext {display: none}

/* The button styles. Margin: 0 auto centers the input boxes */
div.quantity2div {
width: 105px;
overflow: auto;
font-size: 1.5rem;
height: 32px;
text-align: center;
margin: 0 auto
}

/* The Quantity Number Box */
input.quantity2input {
text-align: center;
height: 100%;
width: 35px;
font-size: 1rem;
border: none;
margin: 0;
padding: 0
}

/* Class name on this div would be better */
div.quantity2div div {
height: 100%;
text-align: center
}

/* The - Minus button. (Could have given this a class name guys) */
div.detailquantity2div div:nth-child(1),
div.detailquantity2div div:nth-child(1):active,
div.detailquantity2div div:nth-child(1):focus {
background-color: #b00000;
color: #fff;
padding: 2px 0 0 0;
border-radius: 3px 0 0 3px
}
div.detailquantity2div div:nth-child(1):hover {
background-color: #960000
}

/* The + Plus button. (A class name would be better) */
div.detailquantity2div div:nth-child(3),
div.detailquantity2div div:nth-child(3):active,
div.detailquantity2div div:nth-child(3):focus {
background-color: #096;
color: #fff;
padding: 3px 0 0 0;
border-radius: 0 3px 3px 0
}
div.detailquantity2div div:nth-child(3):hover {
background-color: #008257
}