atst/styles/sections/_reports.scss

.funding-summary-row {

  @include media($medium-screen) {
    @include grid-row;
    flex-wrap: wrap;
  }

  .funding-summary-row__col {

    hr {
      margin: 2 * $gap 0;
      border-bottom: 1px solid $color-gray-lightest;
    }

    @include media($medium-screen) {
      @include grid-pad;
      flex-grow: 1;
      display: flex;
      flex-direction: row;
      flex-basis: 50%;

      @include ie-only {
        max-width: 50%;
      }

      &:first-child {
        padding-left: 0;
      }
      &:last-child {
        padding-right: 0;
      }
    }

    align-items: stretch;

    .panel {
      padding: $gap * 2;
      width: 100%;

      @include ie-only {
        max-width: 100%;
      }

      .subheading {
        @include h4;
        margin: 0 $gap 2 * $gap 0;
        -ms-flex-negative: 1;
      }

      // Spending Summary
      // ===============================
      &.spend-summary {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .row {
          justify-content: space-between;

          @include ie-only {
            max-width: 100%;
            flex-wrap: wrap;
          }
        }

        .spend-summary__budget {

          @include ie-only {
            margin: $gap 0 0 0;
          }
        }

        dl {
          text-align: left;
          margin: 0 0 ($gap / 2) 0;

          @include ie-only {
            text-align: left;
          }

          dt {
            text-transform: uppercase;
            color: $color-gray-light;
            margin-right: $gap;
            font-weight: bold;
            font-size: $small-font-size;
          }
        }

        meter {
          width: 100%;
          height: 3rem;
          margin: ($gap * 2) 0 0;
        }

        .spend-summary__spent {
          margin: 2 * $gap 0;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;

          dt {
            letter-spacing: 0.47px;
          }
        }
      }


      // Task Order Summary
      // ===============================
      &.to-summary {

        .icon-link {
          font-weight: $font-normal
        }

        .subheading {
          margin-bottom: 0;
        }

        .to-summary__heading {
          @include h4;
          margin: 0 $gap 0 0;
        }

        .to-summary__to-number {
          margin: 0;
          dd {
            &::before {
              content: '#';
              color: $color-gray;
              margin-right: $gap;
            }
          }

          @include media($xlarge-screen) {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;

            .to-summary__to {
              margin: 0 $gap 0 0;
            }

            .to-summary__expiration {
              text-align: right;
              flex-grow: 1;

              dl {
                margin: 0 0 0 $gap;

                dd, dt {
                  display: inline;
                }
              }
            }
          }
        }

        .to-summary__expiration {

          dl {
            text-align: right;
            margin-top: -2 * $gap;

            dd, dt {
              display: inline;
            }

            dt {
              font-size: $small-font-size;
              text-transform: uppercase;
              font-weight: $font-bold;
              color: $color-gray-light;
            }

            dd.ending-soon {
              font-size: $h2-font-size;
              white-space: nowrap;

              .icon {
                @include icon-size(28);
              }
            }
          }

          .icon-link {
            margin: 0 (-$gap);
          }
        }

        .to-summary__co {
          margin: ($gap * 2) 0 0 0;

          @include media($xlarge-screen) {
            margin: 0;
          }
        }
      }
    }
  }
}


.spend-table {
  box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);

  .spend-table__header {
    @include panel-base;
    @include panel-theme-default;
    border-top: none;
    border-bottom: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: $gap * 2;

    .spend-table__title {
      @include h4;
      font-size: $lead-font-size;
      flex: 2;
    }

    .spend-table__month-select {
      margin: 0;
      flex: 1;
    }
  }

  table {
    thead th {
      text-transform: uppercase;
      border-bottom: 1px solid $color-gray-lightest;
      border-top: none;
    }

    th, td {
      white-space: nowrap;

      button {
        margin: 0;
      }

      &.previous-month {
        color: $color-gray;
      }

      &.meter-cell {
        padding-left: 0;
        position: relative;
        min-width: 4rem;

        @include media($medium-screen) {
          min-width: 12rem;
        }

        meter {
          width: 100%;
          height: 3rem;
          background: $color-white;
          display: none;

          @include media($medium-screen) {
            display: block;
          }

          &::-webkit-meter-bar {
            background: $color-white;
          }
        }

        .spend-table__meter-value {
          @include h5;

          @include media($medium-screen) {
            display: block;
            color: $color-white;
            background-color: rgba($color-blue, 0.65);
            border-radius: $gap/2;
            position: absolute;
            top: 2.3rem;
            left: $gap / 2;
            padding: 0 ($gap / 2);
          }
        }
      }
    }

    .spend-table__portfolio {
      th, td {
        font-weight: bold;
        border-bottom: 1px solid $color-gray-lightest;
      }
    }

    .spend-table__application {
      .spend-table__application__toggler {
        @include icon-link-color($color-blue, $color-gray-lightest);
        margin-left: -$gap;
        color: $color-blue;

        .icon {
          @include icon-size(12);
          margin-right: $gap;
        }

        .open-indicator {
          position: absolute;
          bottom: 0;
          left: 5 * $gap;
          width: 0;
          height: 0;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;

          border-bottom: 10px solid $color-blue-light;
        }
      }

      th, td {
        border-bottom: none;
      }

      th[scope=rowgroup] {
        position: relative;
      }

      .spend-table__application__env {
        margin-left: 2 * $gap;

        th, td {
          .icon-link {
            font-weight: $font-normal;
            font-size: $base-font-size;
          }

          border-bottom: 1px dashed $color-white;
          background-color: $color-blue-light;
        }
      }
    }
  }
}