.portfolio-panel-container {
  @include media($large-screen) {
    @include grid-row;
  }
}

.portfolio-navigation {
  @include panel-margin;
  margin-bottom: $gap * 4;

  ul {
    display: flex;
    flex-direction: column;
    li {
      flex-grow: 1;
    }
  }

  @include media($medium-screen) {
    margin-bottom: $gap * 5;
  }

  @include media($large-screen) {
    width: 20rem;
    margin-right: $gap * 2;

    ul {
      display: block;
    }
  }
}

.portfolio-funding {
  .portfolio-funding__header {
    padding: 0;
    margin: 0 $gap;

    align-items: center;

    .portfolio-funding__header--funded-through {
      padding: 2 * $gap;
      flex-grow: 1;
      text-align: left;
      font-weight: bold;
    }

    .funded {
      color: $color-green;
      .icon {
        @include icon-color($color-green);
      }
    }
  }

  .pending-task-order {
    background-color: $color-gold-lightest;

    align-items: center;
    margin: 0;
    padding: 2 * $gap;

    dt {
      font-weight: bold;
    }

    dd {
      margin-left: 0;
    }

    .label {
      margin-right: 2 * $gap;
    }

    .pending-task-order__started {
      flex-grow: 1;
    }

    .pending-task-order__value {
      text-align: right;
    }
  }

  .view-task-order-link {
    margin-left: $gap * 2;

    .icon--tiny {
      @include icon-size(10);
      margin-left: 1rem;
    }
  }

  .portfolio-total-balance {
    margin-top: -$gap;
    margin-bottom: 3rem;

    .row {
      flex-direction: row-reverse;
      margin: 2 * $gap 0;
      padding-right: 14rem;

      .label {
        margin: 0 2 * $gap;
      }
    }
  }

  table {
    th{
      .icon {
        margin-left: 1rem;
      }

      &.period-of-performance {
        color: $color-blue;

        .icon {
          @include icon-color($color-primary)
        }
      }
    }

    td.unused-balance {
      color: $color-red;
    }

    .label--expired {
      background-color: $color-gray-light;
    }
  }
}