.friendlobby
{
    height: fit-children;
    width: 365px;
    opacity: 1;
    transform: translatex( 0px );
    flow-children: down;
    transition-property: height, opacity, transform, position, background-color;
    transition-duration: .5s, .5s, .5s, .5s, .25s ;
    transition-timing-function: ease-in-out;
}

.friendlobby--is-in-popup
{
    background-color: rgba(61, 61, 61, 0.582);
    margin-bottom: 8px;
}

.friendlobby--is-in-popup #JsFriendLobbySeeAllInvites
{
    visibility: collapse;
}

.friendlobby__seperator
{
    height: 1px;
    margin-top: 4px;
    width: 93%;
    horizontal-align: center;
    background-color: rgba(255, 255, 255, 0.068);
}

.friendlobby.hidden
{
    opacity: 0;
    transform: translatex( 64px );
    transition-property: transform, opacity, position;
    transition-duration: .4s;
    transition-timing-function: ease-in-out;
}

.friendlobby__row
{
    width: 100%;
    height: fit-children;
    margin: 0px 0px 0px 12px;
}

.friendlobby__row.row-margin-top
{
    margin-top: 6px;
}

.friendlobby.playerforhire .friendlobby__row__settings,.friendlobby.playerforhire .friendlobby__row__group
{
    visibility: collapse;
}

.friendlobby__row--join
{
    flow-children: right;
    margin: 2px 6px 2px 14px;
}

.friendlobby.playerforhire
{
    flow-children: none;
}

.friendlobby.playerforhire .friendlobby__row-avatars
{
    margin-top: 4px;
    horizontal-align: left;
    vertical-align: top;
}

.friendlobby.playerforhire .friendlobby__row
{
    margin-left: 82px;
    margin-top: 18px;
}

.friendlobby__join-btn
{
    background-color: positiveColor;
    vertical-align: center;
    border-radius: 2px;
    padding: 6px;
    margin: 0px 6px;
    box-shadow:fill rgba(0, 0, 0, 0.25) 0px 0px 3px 1px;
}

.friendlobby__join-btn Image
{
    transform: rotateZ(45deg);
}

.friendlobby__row--bottom-margin
{
    margin-bottom: 6px;
}

.friendlobby__row--no-margin
{
    margin: 0px 0px 0px 0px;
}

.friendlobby__row-name
{
    vertical-align: center;
    padding: 0px 4px 0px 0px;
    flow-children: right;
    height: fit-children;
    width: 100%;
}

.friendlobby__row-left
{
    flow-children: left;
    height: fit-children;
    width: 100%;
}

.friendlobby__row__icon-prime
{
    horizontal-align: left;
    vertical-align: center;
    padding: 0px 8px;
    opacity: .5;
}

.friendlobby__row__icon-flag
{
    vertical-align: center;
    padding: 0px 8px 0px 0px;
    height: 20px;
}

.friendlobby__row__icon-skillgroup
{
    vertical-align: center;
    padding: 0px 8px 0px 0px;
    visibility: visible;
}

.friendlobby__row__icon-skillgroup.hidden,.friendlobby__row__icon-flag.hidden
{
    width: 0px;
    height: 0px;
    visibility: collapse;
}

#FriendLobbyCloseButton,#JsFriendLobbyJoinBtn
{
    margin: 0px 8px 0px 0px;
}

.IconButton.hidden
{
    width: 0px;
    height: 0px;
    visibility: collapse;
}

.friendlobby__row-avatars
{
    flow-children: right;
    width: fit-children;
    height: fit-children;
    margin: 8px 0px 8px 12px;
    vertical-align: center;
}

.friendlobby__slot
{
    horizontal-align: middle;
    vertical-align: center;
    width: fit-children;
    height: fit-children;
    margin: 0px 12px;
}

.friendlobby__slot--first
{
    margin-left: 24px;
}

.friendlobby__slot--empty
{
    width: 40px;
    height:40px;
    border-radius: 0px;
    opacity: .4;
    background-image: url("file://{images}/mapdraft/vote_box_png.png");
    background-size: 100% 100%;
}

.friendlobby__text
{
    width: 180px;
    max-height: 18px;
    font-size: 12px;
    text-overflow: ellipsis;
    font-weight: normal;
}

#JsFriendLobbyLeaderName
{
    width: fill-parent-flow(1);
    max-height: 26px;
    font-size: 14px;
    color: white;
}

.friendlobby-avatar__Image
{
    width: 40px;
    height: 40px;
    vertical-align: center;
    box-shadow: shadowOffset;
    transform:Scale3d(1, 1, 1);
    border: 0px solid white;
    transition-property: border, transform, box-shadow;
    transition-duration: .25s;
    transition-timing-function: ease-in-out;
}

.friendtile-advertise .friendlobby-avatar__Image
{
    width: 40px;
    height: 40px;
}

.friendlobby-avatar__Image--Slots
{
    width: 40px;
    height: 40px;
}

.friendlobby-avatar__Image:hover
{
    border: 4px solid white;
    box-shadow: fill #00000020 4px 0px 4px 2px;
    transition-property: border, transform, box-shadow;
    transition-duration: .25s;
    transition-timing-function: ease-in-out;
}

.IconButton
{
    margin: 0px;
}

.friendlobby__lobbies-count
{
    font-size: 12px;
    text-align: center;
    font-style: italic;
    color: rgb(245, 240, 240);
    max-width: 128px;
    height: 14px;
    text-overflow: ellipsis;
}