#user_nav {
  width: 100%;
  z-index: 1000;
  height: 48px;
  overflow: visible;
  background: #333;
  box-shadow: var(--box-shadow-down);
  position: sticky;
  top: 0;
  flex: none;

  .user_nav {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      > a {
        border-right: 1px solid #666;
      }

      .game_title_icon {
        flex: none;
      }
    }

    .right .top_nav {
      > a, > div {
        border-left: 1px solid #666;
      }

      > a.selected {
        background: #fff;
        color: #333;
      }
    }

    .games_nav {
      .title {
        margin-right: 5px;
      }
    }

    .games_nav, #online_friends_hover {
      height: 100%;
    }

    .left, .right {
      display: flex;
      align-items: center;
      height: 100%;

      .top_nav > a, .games_nav > a, #online_friends_hover > a, .game_title {
        height: 100%;
        color: #ddd;
        font-family: 'Acme';
        font-size: 20px;
        padding: 0 15px;
        display: flex;
        align-items: center;

        &:hover {
          background: #fff;
          color: #333;
        }
      }
    }

    .notification {
      position: relative;
      white-space: nowrap;
      display: inline;
      padding: 1px 8px 0;
      margin: 0 2px;
      color: #fff;
      border-radius: 2px;
    }

    #nav_list, .online_friends_list {
      display: flex;
      flex-direction: column;
      width: 100%;
      position: absolute;
      right: 0;
      top: 48px;
      z-index: 1001;
      margin: 0;
      box-shadow: 0 3px 10px rgba(0,0,0,0.5);
      overflow-y: scroll;
      max-height: 325px;
      background: white;

      .line_item {
        background: white;

        &:hover {
          background: aliceblue;
        }

        &:active {
          background: white;
        }
      }
    }

    .top_nav {
      display: flex;
      align-items: center;
      height: 100%;
    }

    #more_links {
      height: 100%;
      display: flex;
      align-items: center;

      &:hover {
        background: #fff;

        .icon_hamburger {
          background: #333;
        }
      }

      #more_links_link {
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 15px;
      }

      .more_links_list {
        background: #333;
        display: none;
        box-shadow: 0 3px 10px rgba(0,0,0,0.3);
        position: absolute;
        right: 0;
        top: 48px;
        font-family: 'Acme';
        font-size: 20px;

        li > a {
          padding: 9px 15px 9px 10px;
          border-top: 1px solid #666;
          color: #ddd;
          display: block;

          .fa {
            margin-right: 5px;
          }

          &:hover {
            background: #fff;
            color: #333;
          }
        }
      }
    }
  }
}