.wp-admin .rtd-commission {
      padding: 1em;
  }
    
  .wp-admin .rtd-commission h4 {
      margin-top: 0;
      font-size: larger; 
  }    
      .commission-order-list  {
        width: 100%;
        max-width: 850px;
        margin: 0;
        padding: 0;
      }

      .commission-order {
          background: #eee;
          vertical-align: top;
      }

        .commission-order:nth-child(odd) {
            background: #f6f6f6;
        }

        .commission-order.commission-order--paid {
          background: #cec;
        }

        .commission-order td {
          padding: 0.5rem 1rem;
        }
      
      .commission-order__title {
        width: auto;  
      }
      
      .commission-order__date {
          text-align: center;
        width: 100px;
      }
      
      .commission-order__commission {
          text-align: right;
        width: 100px;
      }

      .commission-order__details {
        margin-top: 0.5em;
      }

      .rtd-commission__qty {
        display: inline-block;
        padding-left: 0.25em;
        padding-right: 0.25em;
        opacity: 0.75;
      }

      .rtd-commission__price {
        display: inline-block;
        padding-left: 0.25em;
        padding-right: 0.25em;
        opacity: 0.75;
      }

      .commission-order__details .woocommerce-Price-amount.amount.amount {
        font-weight: inherit;
      }
      
.rtd-commission__monthly-total {
display: flex;
justify-content: flex-end;
padding: 0.5rem 0;
margin-bottom: 1em;
}

.rtd-commission__monthly-total__label {
opacity: 0.5;
padding: 0 1rem;
}

.rtd-commission__monthly-total .amount {
display: inline-block;
width: 100px;
text-align: right;
padding: 0 1rem;
font-weight: bold;
}

.commission-order .commission-order__details__paid {
  font-weight: 700;
  color: #090;
}


.rtd-commission__button {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: #333;
  color: white;
  text-decoration: none !important;
}

  .rtd-commission__button:hover {
    background: #000;
    color: white !important;
    text-decoration: none !important;
  }



  .woocommerce-MyAccount-content ul.commission-order-list { padding-left: 0; }





/*
Commission totals area
*/

.rtd-commission .commission-status-list {
  border: 1px solid #e3e3e3;
  color: #000;
  display: flex;
  padding: 0;
  margin: 0 0 1.5em 0;
}

.rtd-commission .commission-status {
  flex: 1 1 33.333%;
  
  position: relative;
  list-style: none;
  padding: 1em 1.5rem 1em 1.5rem;
  margin: 0;
  
  display: flex;
  text-align: right;
  justify-content: flex-end
}

  .rtd-commission .commission-status + .commission-status {
    border-left: 1px solid #e3e3e3; 
  }

  .rtd-commission .commission-status--earned .commission-status__amount * {
    color: #090;
    color: #0160b4;
  }

  .rtd-commission .commission-status--paid .commission-status__amount * {
    color: #090;
  }

  .rtd-commission .commission-status--owed .commission-status__amount * {
    color: #b00;
  }

  .rtd-commission .commission-status__total {
    display: block;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .rtd-commission .commission-status__label {
    order: 2;
    
    display: block;
    margin: 0;
    padding: 0;
    
    font-size: 11px;
    line-height: 1.5em;
    font-weight: 600;
    text-transform: uppercase;
    
    opacity: 0.5;
  }

  .rtd-commission .commission-status__amount {
    order: 1;
    
    display: block;
    margin: 0;
    padding: 0;
    
    font-size: 16px;
    font-weight: 700;
    line-height: 1em;
  }



@media screen and (min-width: 992px){
  
  .rtd-commission .commission-status {
    padding: 1em 1.5rem 1em 4rem;
  }


  .rtd-commission .commission-status::before {
    content: '£';
    display: block;
    font-size: 56px;
    font-weight: 500;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 4rem;
    height: 100%;
    line-height: 4.75rem;
    text-align: center;
    
    opacity: 0.1;
  }

    .wp-admin .rtd-commission .commission-status::before {
      line-height: 3.5rem;
    }



  .rtd-commission .commission-status__label { 
    font-size: 12px;
    line-height: 1.5em;
  }
  
  .rtd-commission .commission-status__amount {
    font-size: 24px;
    line-height: 1em;
  }

}



.rtd-commission .commission-filter {
  display: block;
  margin: 0 0 1.5em 0;
  background: #eee;
}

  .wp-admin .rtd-commission .commission-filter {
    background-color: #ddd;
  }


.rtd-commission .commission-filter fieldset {
  padding: 0;
  margin: 0;
  border: none;
}

.rtd-commission .commission-filter__fieldgroup {
  padding: 0.5em;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.rtd-commission .commission-filter__fieldgroup label {
  padding: 0;
  margin: 0 auto 0 0;
}

.rtd-commission .commission-filter__dates {
  margin: 0;
  margin-right: 0.5em;
  border-radius: 0;
  padding: 0.5em 1em;
  display: block;
  height: auto;
}

  .rtd-commission .commission-filter__dates option {
    padding: 0.5em 1em;
    margin: 0;
    display: block;
  }

.rtd-commission .commission-filter button {
  background: #666;
  color: white;
  border: none;
  border-radius: 0;
  padding: 0.25em 0.5em;
  
}

.rtd-commission .commission-filter__form {
  
}



.wp-admin .rtd-commission .commission-status-list,
.wp-admin .rtd-commission .commission-filter {
  /* admin */
  width: 100%;
  max-width: 850px;
}