/*#############################################################################
# MY ACCOUNT
#############################################################################*/


body#app, .app-layout {
  .my-account {
    section.app-body {
      grid-template-columns: 260px 1fr !important;
    }
  }
}

nav.account {
  a {
    display: block;
    color: $color-text;
    font-size: rem-calc(14px);
    margin: 0 0 20px;

    &.active {
      font-weight: 900;
    }
  }
}

header.transaction-history {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr 1fr;
    grid-column-gap: 30px;
    align-items: center;
    border-bottom: 1px solid $color-secondary-light;
    padding: 10px 0;

    .history-header {
      font-size: rem-calc(12px);
      font-weight: 900;

      &.last {
        text-align: right;
        padding-right: 12px;
      }
    }
}

ul.transaction-history {
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr 1fr;
    grid-column-gap: 30px;
    align-items: center;
    border-bottom: 1px solid $color-secondary-light;
    padding: 10px 0;

    &:last-child {
      border-bottom: none;
    }

    .history-box {
      span {
        display: block;

        &.installment {
          color: $color-secondary;
          font-size: rem-calc(12px);
        }

        &.credit-id {
          font-size: rem-calc(14px);
        }

        &.date {
          font-size: rem-calc(12px);
        }

        &.time {
          font-size: rem-calc(12px);
        }

        &.amount {
          font-size: rem-calc(12px);
          font-weight: 900;
        }

        &.paid-by {
          font-size: rem-calc(12px);
        }

        &.status {
          display: inline-block;
          color: #fff;
          font-size: rem-calc(12px);
          font-weight: 900;
          text-align: right;
          padding: 3px 12px;
          @include border-radius(20px);

          &.approved {
            background-color: $color-success;
          }

          &.rejected {
            background-color: $color-alert;
          }

          &.failed {
            background-color: $color-warning;
          }

          &.pending {
            background-color: $color-secondary;
          }
        }
      }

      &.last {
        text-align: right;
      }
    }
  }
}

header.team-members {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr;
    grid-column-gap: 30px;
    align-items: center;
    border-bottom: 1px solid $color-secondary-light;
    padding: 10px 0;

    .team-header {
      font-size: rem-calc(12px);
      font-weight: 900;

      &.last {
        text-align: right;
      }
    }
}

ul.team-members {
  list-style: none;
  margin: 0;
  padding: 0;

  li {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr 1fr;
    grid-column-gap: 30px;
    align-items: center;
    border-bottom: 1px solid $color-secondary-light;
    padding: 10px 0;

    &:last-child {
      border-bottom: none;
    }

    .team-box {
      span {
        display: block;

        &.name {
          font-size: rem-calc(14px);
          font-weight: 900;
        }

        &.permissions {
          font-size: rem-calc(12px);
        }

        &.alarms {
          font-size: rem-calc(12px);
        }

        &.actions {
          font-size: rem-calc(12px);
        }
      }

      &.last {
        text-align: right;
      }
    }
  }
}

.modal-box {
  .permission-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 30px;

    .permission-box {
      border: 1px solid $color-secondary-light;
      padding: 15px;
      @include border-radius(4px);
    }
  }
}