@import "variables";

#content {
  margin-top: 10px;
  &:first-child {
    margin-top: 0px;
  }
  overflow: hidden;
  width: 100%;
  @media @mobile-portrait, @mobile-portrait-with-keyboard {
    background: #E6F0FA;
  }
}

#usericons {
  float: right;
  span {
    margin-left: 3px;
    padding: 2px;
    border: 1px solid white;
    @media @desktop-portrait {
      font-size: 25px;
    }
    @media @mobile-portrait, @mobile-portrait-with-keyboard{
      font-size: 3vh;
    }
  }
  .raisedHandIcon, .muteIcon {
    &:hover {
      cursor: pointer;
      border: 1px solid #f2f2f2;
      background-color: #f2f2f2;
      border-radius: 4px;
    }
  }
}

.usernameEntry {
  float:left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 60%;
  @media @landscape {
    height: 20px;
  }
  @media @desktop-portrait {
    height: 25px;
    font-size: 2vh;
  }
  @media @mobile-portrait, @mobile-portrait-with-keyboard {
    font-size: 4vw;
  }
}

#users {
  -webkit-flex: 1 1 20%;
  -moz-flex: 1 1 20%;
  -ms-flex: 1 1 20%;
  flex: 1 1 20%;
  height: 100%;
}

#user-contents {
  height: 100%; /* for the inside scrolling list to utilize as much room as possible, this surrounding window must also take up as much room as possible */

  .userlist {
    height: calc(~'100% - 29px'); /* height of user contents - user list */

    @media @landscape {
      padding:10px;
      max-height:83vh;
    }
    @media @desktop-portrait {
      padding-top: 10px;
      padding-left: 10px;
      padding-right: 10px;
    }

    @media @desktop-portrait, @mobile-portrait {
      max-height: 58vw; //for longer userlist a scrollbar appears
    }
  }
}

.userCurrent {
  font-weight: bold;
}

#username {
  @media @landscape {
    display:block;
  }
  @media @desktop-portrait {
    display:block;
    width:70%;
  }
}

.closeUserlistIcon {
  float: right;
  margin-right: 5px;
}