fleet/frontend/pages/DashboardPage/_styles.scss

.dashboard-page {
  background-color: $ui-off-white;

  .data-error {
    &__inner {
      margin: $pad-xxxlarge 0;
    }
  }

  &__wrapper {
    background-color: $ui-off-white;
  }

  h2 {
    font-size: $small;
    font-weight: $regular;
    margin: 0;
  }

  .form-field--dropdown {
    margin-bottom: 0;
  }

  &__header {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: $pad-large;

    .Select-control {
      background-color: $ui-off-white !important;
    }
  }

  &__title {
    .fleeticon {
      color: $core-fleet-blue;
      margin-right: 15px;
    }

    .fleeticon-success-check {
      color: $ui-success;
    }

    .fleeticon-offline {
      color: $ui-error;
    }
  }

  &__platforms {
    display: flex;
    align-items: center;

    span {
      font-size: $small;
    }
    .Select-control,
    .Select-value {
      background-color: $core-white !important;
    }
  }

  &__platform_dropdown {
    width: 138px;

    .Select-menu-outer {
      max-height: none;

      .Select-menu {
        max-height: none;
      }
    }
  }

  &__section {
    margin-top: $pad-medium;
    width: 100%;
    display: grid;
    row-gap: $pad-medium;

    @media screen and (min-width: $break-md) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: $pad-medium;

      // if we have an odd number of elements, take
      // the last one and stretch it across the grid
      .dashboard-info-card:nth-child(odd):last-child {
        grid-column-start: span 2;
      }
    }
  }

  .host-sections {
    position: relative;
  }

  .spinner {
    z-index: 11;
    opacity: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}