$grid-gutter-width: 20px !default;

.page-account {

   .account-box {
      display: flex;
      align-items: stretch;
      margin-bottom: 2rem;

      > div {
         float: left;
      }
   }

   .open-orders {
      border: 2px solid $border-color;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 1;
      width: 20%;

      p {
         margin-bottom: 0;
         padding: 10px;
         text-align: center;
      }

      strong {
         color: $brand-primary;
         display: block;
         font-size: 40px;
         padding-bottom: 5px;
      }
   }

   .account-info {
      border: 2px solid $border-color;
      display: flex;
      flex-grow: 1;
      flex-shrink: 1;
      margin-left: $grid-gutter-width;
      width: 80%;
      align-items: center;
      padding: calc($grid-gutter-width / 2);

      > div {
         flex-grow: 2;
         padding: calc($grid-gutter-width / 2);
      }

      .account-image,
      .account-edit {
         flex-grow: 1;
      }
   }

   .account-image {
      text-align: center;

      span {
         border-radius: 50%;
         background: $border-color;
         display: inline-block;
         font-size: 18px;
         font-weight: bold;
         line-height: 63px;
         width: 63px;
         height: 63px;
         text-transform: uppercase;
      }
   }

   .account-edit {
      text-align: center;
   }

   @media screen and (max-width: 767px) {
      .account-box {
         display: block;

         > div {
            float: none;
            width: 100%;
         }
      }

      .account-info {
         flex-wrap: wrap;
         margin-left: 0;
         margin-top: 20px;
         padding-right: 0;
         padding-left: 0;
      }

      .account-image,
      .account-edit {
         width: 100%;
      }
   }
}
