html {
  box-sizing: border-box; }

*, *::after, *::before {
  box-sizing: inherit; }

/* One-off breakpoints (consider consolidation)*/
/* Mayflower Color Tokens */
.ma__input-number {
  display: inline-flex;
  flex-direction: row;
  position: relative; }
  .ma__input-number-unit {
    border: 2px solid #DCDCDC;
    padding-right: 5px;
    padding-top: 4px;
    border-left: none;
    color: #535353; }
    .ma__input-number-unit--showButtons {
      border-right: none; }
  .ma__input-number__control {
    text-align: right;
    padding-right: 5px; }
    @media (max-width: 620px) {
      .ma__input-number__control {
        width: 100%; } }
    .ma__input-number__control--showButtons {
      border-right: none; }
    .ma__input-number__control-buttons {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative; }
    .ma__input-number__control input.has-error {
      border-color: #CD0D0D; }
    .ma__input-number__control-plus, .ma__input-number__control-minus {
      background-color: transparent;
      border: none;
      padding: 0;
      border: 2px solid #DCDCDC;
      border-bottom: none;
      height: 50%;
      width: 40px; }
      .ma__input-number__control-plus:after, .ma__input-number__control-minus:after {
        border: 5px solid #141414;
        border-top: none;
        border-bottom-width: 6px;
        content: "";
        padding: 2px 0;
        display: block;
        height: 0;
        margin: 0 auto;
        vertical-align: bottom;
        width: 0;
        border-left-color: transparent;
        border-right-color: transparent; }
      .ma__input-number__control-plus:focus:after, .ma__input-number__control-minus:focus:after {
        bottom: 1px; }
    .ma__input-number__control-plus {
      bottom: 50%; }
    .ma__input-number__control-minus {
      top: 50%;
      transform: rotate(180deg); }