.homepage {
  background-color: $ui-off-white;
  flex: 1;

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

    .fleeticon-mia {
      color: $core-fleet-black;
    }
  }

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

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

  &__platform_dropdown {
    width: 138px;
  }

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

    // if we have an odd number of elements, take 
    // the last one and stretch it across the grid
    .homepage-info-card:nth-child(odd):last-child {
      grid-column-start: span 2;
    }
    @media screen and (min-width: 990px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: $pad-medium;
    }
  }

  .host-sections {
    position: relative;
  }

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