/* HQ Calculator */
.woocommerce-MyAccount-content { width: 68% !important; float: left !important; margin: 0 auto; padding:5px 20px 20px 40px; font-family: "AvenirNext", sans-serif; 
  label{
    font-size: 16px;
    color:#222222;
  }

  input{
    color:#222222;
  }
}
.woocommerce-MyAccount-content h3 {
  text-align: center; font-size: 24px; font-weight: 600; color: #333; margin-bottom: 30px; letter-spacing: 0.33333rem; text-transform: uppercase;
}
.inputdiv { background: #fff; padding: 25px; margin-bottom: 30px; }
.inputdiv label { font-weight: 500; font-size: 14px; color: #666; margin-bottom: 8px; display: block; }
.inputdiv select,
.inputdiv input[type="number"] {
  width: 100%; height: 3.5rem; padding: 0 3rem 0 1.2rem; border: 1px solid #ddd; font-size: 14px; background-color: #fff; margin-bottom: 15px;
}
.inputdiv select:focus,
.inputdiv input[type="number"]:focus {
  outline: none; border-color: #7dd3d8; box-shadow: 0 0 0 2px rgba(125,211,216,0.2);
}

/* Right padding for native select arrow/icon */
.woocommerce select,
.woocommerce form .form-row select { padding-right: 2.25rem; background-position: right 0.75rem center; background-repeat: no-repeat; }

.btnfield {
  width: 25%; background-color: #7dd3d8; color: #fff; border: none; padding: 12px 30px;
  font-size: 12px; font-weight: 500; cursor: pointer; margin: auto; transition: background-color 0.3s ease;
}
.btnfield:hover { background-color: #6bc5ca; }

/* Notes */
.inputdiv p { color: #666; font-size: 17px; line-height: 1.78571; margin: 10px 0; }


/* Results */
#state { background: #fff; padding: 25px; margin-top: 20px; }
#state h6,
#state h6.text-center {
  font-size: 16px; font-weight: 600; color: #333; text-transform: uppercase; letter-spacing: 0.5px;
}
#state h6.text-center { text-align: center; margin: 25px 0 15px; }
#state h4 {
  font-size: 22px; font-weight: 600; color: #333; margin: 25px 0 15px; text-transform: uppercase; letter-spacing: 0.5px;
}

/* Tables */
.part1form,
.part2form {
  width: 100%; border-collapse: collapse; margin: 20px 0; background: #fff; overflow: hidden; border: 1px solid #e2e2e2;
}
.part1form th,
.part2form th {
  color: #333; font-weight: 600; padding: 12px 10px; text-align: center; border: 1px solid #e2e2e2; font-size: 13px;
}
.part1form td,
.part2form td {
  width: 20%; padding: 12px 10px; text-align: center; border: 1px solid #e2e2e2; font-size: 14px; color: #333;
}

/* Inputs in tables */
.addpack {
  width: 60px; padding: 5px 8px; border: 1px solid #ddd; border-radius: 3px; text-align: center; font-size: 13px;
}
.addpack:focus { outline: none; border-color: #7dd3d8; }

/* Subscription text */
#state p.text-center {
  font-size: 17px; padding: 12px; border-radius: 4px; font-weight: 500; color: #333; margin: 15px 0;
}

/* Calculator errors */
.qmiderror {
  color: #dc3545; background-color: #f8d7da; border: 1px solid #f5c6cb; padding: 10px 15px; border-radius: 4px; margin: 10px 0;
}

/* Calculator responsive */
@media (max-width: 768px) {
  .woocommerce-MyAccount-content { width: 100% !important; padding: 15px; }
  .btnfield { width: 45%; }
  #state { padding: 4px; }
  .inputdiv { padding: 0; }
  .part1form,
  .part2form { font-size: 12px; }
  .part1form th,
  .part2form th,
  .part1form td,
  .part2form td { padding: 8px 5px; }
  #state h6,
  #state h6.text-center { font-size: 12.5px; }
  .part1form th,
  .part2form th { font-size: 11px; }
  .part1form td,
  .part2form td { font-size: 11px; }
}