#active_hangouts, #past_hangouts {
  .study-group-tag {
    z-index: 1;
    color: $cta-blue;
    background: $white;
    position: absolute;
    font-size: 11px;
  }
  padding: 0;
  .hangout-item {
    p.overflowtext {
      color: $warm-grey;
    }

    p.completed {
      color: $kudo;
      text-align: left;
      line-height: 10px;
      font-size: 85%;
    }

    border-top: 1px solid $divider;
    padding: 20px 0;

    ul.dropdown-menu {
      top: 35px;
      left: -200px;
    }

    span.dropdown-toggle:hover {
      cursor: pointer;
    }

    .hangout-topic {
      @include font-face(400, 17px, normal, $cta-blue);
    }

    .hangout-topic.completed {
      color: $warm-grey;
      font-weight: 600;
    }

    p.upcoming {
      text-transform: uppercase;
      color: $kudo;
      text-align: left;
      line-height: 20px;
      font-size: 85%;
    }

    .status {
      list-style: none;
      display: table;
      padding: 0;
      margin: 0;
      line-height: 1.2;
      font-weight: 200;
      color: $warm-grey;

      li {
        display: table-cell;
        vertical-align: top;
      }

      label {
        @include font-face(400, 12px, normal, $warm-grey);
        display: inline-block;
        line-height: 1.5;
      }

      i.faa-burst {
        margin-top: 20px;
      }
    }

    label {
      &.name {
        @include font-face(400, 14px, normal, $primary-grey);
      }

      span {
        @include font-face(400, 12px, normal, $warm-grey);
      }
    }
  }

  .col-lg-12.hangouts-title {
    color: #fff;
    margin-top: 10px;
  }
}

#hangout-options {
  .btn {
    text-align: left;

    &.active {
      box-shadow: none;
    }
  }

  span.title {
    @include font-face(400, 17px, normal, $primary-grey);
    padding-left: 10px;
  }

  label {
    input[type="radio"] {
      ~ i.fas {
        &.fa-circle {
          color: $primary-grey;
          display: inline;
          outline: none;
        }

        &.fa-dot-circle {
          display: none;
        }
      }

      &:checked ~ i.fas {
        &.fa-circle {
          display: none;
        }

        &.fa-dot-circle {
          color: $cta-blue;
          display: inline;
        }
      }
    }

    &.btn i.type {
      font-size: 20px;
      padding-left: 10px;
    }

    &:hover input[type="radio"] ~ i.fas {
      color: $cta-blue;
    }
  }
}
