atst/styles/sections/_reports.scss

.funding-summary-row {

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

  .funding-summary-row__col {

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


      // 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__heading {
          @include h3;
          margin: 0 $gap 0 0;
          -ms-flex-negative: 1;
        }

        .spend-summary__budget {
          margin: 0 0 0 $gap;

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

          > div {
            text-align: right;
            margin: 0 0 ($gap / 2) 0;

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

            dd, dt {
              display: inline;
            }

            dt {
              color: $color-gray;
              margin-right: $gap;
              font-weight: normal;
            }

            dd {
              font-weight: bold;
            }
          }
        }

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

        .spend-summary__spent {
          margin: $gap 0 0 0;
          display: flex;
          flex-direction: row-reverse;
          justify-content: flex-end;

          dd, dt {
            @include h5;
          }

          dt {
            font-weight: normal;
            margin-left: $gap;
          }
        }
      }



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

        .to-summary__row {
          .to-summary__heading {
            @include h3;
            margin: 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 {
            margin: ($gap * 2) 0 0 0;

            > div {
              margin: 0 0 ($gap / 2) 0;

              dd, dt {
                display: block;
              }

              dt {
                color: $color-gray;
                margin-right: $gap;
                font-weight: normal;
              }

              dd {
                font-weight: bold;
              }
            }
          }

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

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

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


.spend-table {
  .spend-table__header {
    @include panel-base;
    @include panel-theme-default;
    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 h3;
      margin: 0;
      flex: 2;
    }

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

  table {
    th, td {
      white-space: nowrap;

      button {
        margin: 0;
      }

      &.current-month {
        background-color: $color-aqua-lightest;
      }

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

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

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

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

        &:last-child {
          td, th {
            padding-bottom: $gap * 5;
            box-shadow: inset 0 (-$gap * 2.5) 0 $color-gray-lightest;
          }
        }
      }
    }
  }
}