atst/styles/sections/_reports.scss

.funding-summary-row {
  @include media($medium-screen) {
    @include grid-row;

    flex-wrap: wrap;
  }

  &__col {
    hr {
      margin: (2 * $gap) 0;
    }

    @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;
          }
        }

        &__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;
        }

        &__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__month-select {
  margin: 0;
  flex: 1;
}

table {
  .spend-table__portfolio {
    th,
    td {
      font-weight: bold;
    }
  }

  th,
  td {
    &.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);
        }
      }
    }
  }
}