@import 'common.scss';


.recurly-element{
  background-color:#c5c5c5 !important;
  position: relative;
  //width: 100%;
  height: 25px;
  //border: 2px solid black;
  //background: transparent;
  margin: 0 0 10px;
  outline: none;
  //font-family: 'Open Sans', Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  box-shadow: none;
  border-radius: 0;
  color: black;
  -webkit-appearance: none;
  -webkit-transition: border-color 0.3s;
  -moz-transition: border-color 0.3s;
  -ms-transition: border-color 0.3s;
  -o-transition: border-color 0.3s;
  transition: border-color 0.3s;
  display:inline-block;
  width: calc(100% - 150px);
  @include border_box_sizing;
  max-width:400px;
  padding-left:6px;
  vertical-align: text-top;
}

.recurly-element-month {
  width:40px;
  text-align:center;
}
.recurly-element-year {
  width:60px;
  text-align:center;
}
.recurly-element-cvv {
  width:60px;
  text-align:center;
}


#account-payment-history {

  .content-body-scroller {
    height:100%;
    @include border_box_sizing;
    overflow:auto;
  }

  .payment-table.unpaid {
    margin-bottom:30px;
  }
  .table-header {
    margin:0 0 10px;
    color:white;
    font-weight:bold;
    &.second {
      margin:20px 0 10px;
    }
  }
  .content-body {
    padding-top:29px;
    height:100%;
    width:100%;
    @include border_box_sizing;
  }

  div[data-react-class="AccountPaymentHistoryScreen"] {
    height: 100%;
  }

  .profile-header {
    padding: 10px 40px !important;
  }

  table td.loading {
    text-align:center;
  }

  .end-of-list {
    margin-top:20px;
  }
  td {

    &.amount {
    }

    &.voided {
    }
  }

  .account-header {
    float: left;
    padding-top: 43px;
    font-size: 20px;
    font-weight: bold;
  }

  .input-aligner {
    margin: 10px 14px 20px 0;
    text-align:right;

    .back {
      margin-right:7px;
    }
  }

  .profile-nav {

    &.student {
      width:70%;
    }
    &.teacher {
      width:84%;
    }

  }
  .profile-nav a {
    position: absolute;
    text-align: center;
    bottom:0;
    left:0;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px 0;
    color:white;
    background-color:transparent;
    @include border-box_sizing;
  }


  .paypal-region {
    margin:30px 0 40px;
  }
  .paypal-button {
    border-radius:4px;
    background-color:#ffc439;
    width: 250px;
    height: 33px;
    text-align: center;
    line-height: 38px;
    img {
      position: relative;
      top: 3px;
    }
    &:hover {
      background-color:darken(#ffc439, 10%);
    }
  }
  .paypal-updating {
    background-color:darken(#ffc439, 40%);
    color:white;
  }
  .paypal-txt {
    color:white;
  }

  .or-use-paypal {
    display:inline-block;
    width:150px;
  }

  .profile-tile {

    float: right;
    @include border-box_sizing;
    height: 90px;
    position:  relative;
    background-color:#535353;

    &.student
    {
      width: 50%;
    }
    &.teacher
    {
      width: 33%;
    }
    &.activeTile
    {
      background-color: #ed3618;
    }
  }
  .profile-body {
    padding-top: 100px;
  }
  .profile-nav {
    margin: 0;
    width: 84%;
  }
  .profile-wrapper {
    padding: 10px 20px
  }

  .main-content {
    float: left;
    @include border-box_sizing;
    width: 100%;
  }
  label {
    display:inline-block;
  }
  select {
    display:inline-block;
  }

  form {
    &.stored {
      display:none;
    }
  }


  .recurly-element {
    height:25px;
  }

  #subscription-elements-month, #subscription-elements-cvv {
    margin-left: 20px;
  }

  //.recurly-element {
  //  background-color:white;
  //}

  input, select {
    display:inline-block;
    width: calc(100% - 150px);
    @include border_box_sizing;
    max-width:200px;
    font-family: Helvetica, serif;
    font-weight:normal;
    font-size:16px;
    border-radius:0;
  }
  .field {
    position:relative;
    display:block;
    margin-top:15px;
    margin-bottom:10px;

    label {
      width:150px;
    }
  }
  .error {
    background-color: transparent;
    padding: 0;
    border: solid 0px #900;

    label {
      color:red;
      font-weight:bold;
    }
    input, select {
      background-color: #c5c5c5 !important;
      margin-bottom: 0;

    }
  }

  .uncollectable-msg {
    background-color:black;
    color:white;
    padding:20px;
    margin:20px 0;
  }

  .paymethod-header {
    margin:20px 0;
  }
  .column-left {
    margin:20px 0 20px 21px;
  }
  .actions {
    margin-left:-5px;
  }


}