/* PLUS MINUS NUMERIC INPUT FIELD */
.plus-minus-numeric {
  height: 30px;
  line-height: 30px;
  white-space: nowrap; }

.plus-minus-numeric > * {
  vertical-align: middle;
  background-color: #282828;
  box-sizing: border-box; }

.plus-minus-numeric .icon {
  width: 16px;
  height: 16px;
  padding: 14px;
  border: 1px solid #4a4a4a; }

.plus-minus-numeric .quantity {
  width: 30px;
  height: 30px;
  text-align: center;
  padding-top: 0; }

.plus-minus-numeric .icon-plus {
  /*margin: 0 0 0 5px;*/
  border-radius: 0 5px 5px 0; }

.plus-minus-numeric .icon-minus {
  /*margin: 0 5px 0 0;*/
  border-radius: 5px 0 0 5px; }

.plus-minus-numeric .icon-clear {
  margin: 7px 0 0 10px;
  float: left;
  display: none; }

/*The code for responsiveness can be found below. If you're including the responsiveness code in your custom CSS files, you may need to tweak the responsiveness code or the other CSS code in your files to ensure that responsiveness works correctly.*/
/* Smartphones (portrait and landscape) ----------- */
@media screen and (max-width: 462px) {
  .plus-minus-numeric .icon {
    padding: 14px 10px; }
  .plus-minus-numeric .quantity {
    width: 30px;
    max-width: calc((100%) - 26px);
    /* 22px for icons, 4px for qty padding/border */
    /*height:30px;*/ } }

/* Smartphones (portrait) ----------- */
@media screen and (max-width: 320px) {
  .plus-minus-numeric .quantity {
    width: 20px;
    /*height: 16px;*/ } }