.broadcasts {
  &.unseen {
    position: relative;

    &:after {
      position: absolute;
      display: block;
      content: "";
      top: 8px;
      right: 26px;
      .square(8px);
      border-radius: 50%;
      background: @red;
      box-shadow: 0 0 0 3px #515C6F;
    }
  }

  &.open.unseen:after {
    box-shadow: 0 0 0 3px #39414E;
  }

  .icon-globe {
    font-size: 18px;
    position: relative;
    top: 2px;
  }

  .dropdown-menu {
    // ideally we could use 90% but due to parent element
    // this doesnt work
    max-height: 500px;
    width: 240px;
    padding-top: 0;
    padding-bottom: 0;
    overflow: auto;

    > li {
      color: @gray-dark;
      padding: 10px;
      border-bottom: 1px solid #e5e5e5;
      margin-bottom: 0;
      line-height: 1.3;

      h4 {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 10px;
      }

      .read-more {
        display: block;
        margin-top: 10px;
      }

      a {
        color: @link-color;

        &:hover {
          color: @link-color-hover;
          background: none;
        }
      }

      &.empty {
        text-align: center;
        color: #7a8188;
      }

      &.unseen {
        font-weight: bold;
      }

      &:last-child {
        border-bottom: 0;
        margin-bottom: 0;
      }

      .loading {
        margin: 0 auto;

        .loading-message {
          display: none;
        }
      }

      > a {
        display: inline;
        padding: 0;
        color: @link-color;
      }
    }
  }
}
