

.friendslist
{
	height:100%;
	Width: 100%;
	flow-children: down;
}

.friendslist-navbar
{
	height: fit-children;
	Width: 100%;
	flow-children: right;
	transition-property: position;
	transition-duration: .5s;
	transition-timing-function: ease-in-out;
}

.friendslist-navbar--tab-settings
{
	flow-children: down;
	padding-left: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	transition-property: height;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

.friendslist-navbar--tab-settings.expand
{
	transition-property: height;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

.IconButton.Activated
{
	sound: "UIPanorama.sidemenu_select";
}

.friendslist-navbar--tab-settings .IconButton
{
	margin:0px 12px 0px 0px;
	background-color: gradient( linear, 0% 100%, 0% 0%, from( #e7e7e700),color-stop( 0.07, #e7e7e700), color-stop( 0.07, #dddddd00), to( #dddddd00 ) );
	flow-children: none;
	overflow: noclip;
	transition-property: background-color;
	transition-duration: .1s;
	transition-timing-function: ease-in-out;
}

.friendslist-navbar--tab-settings .IconButton:hover
{
	background-color: gradient( linear, 0% 100%, 0% 0%, from( #e7e7e75b),color-stop( 0.07, #e7e7e75b), color-stop( 0.07, #dddddd00), to( #dddddd00 ) );
	transition-property: background-color;
	transition-duration: .1s;
	transition-timing-function: ease-in-out;
}

.friendslist-navbar-btn
{
	height: 64px;
	margin:0px 16px 0px 18px;
	width: 64px;
	visibility: visible;
	transition-property: position;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.friendslist-navbar-spacer-fit-width
{
	width: fill-parent-flow( 1 );
}

.IconButton.friendslist-navbar-lobby-button:selected
{
	background-color: gradient( linear, 0% 100%, 0% 0%, from( #e7e7e7),color-stop( 0.07, #e7e7e7), color-stop( 0.07, #dddddd00), to( #dddddd00 ) );
	transition-property: background-color;
	transition-duration: .0s;
	transition-timing-function: ease-in-out;
}

.IconButton.friendslist-navbar-lobby-button .RadioBox
{
	visibility: collapse;
}

.mainmenu-sidebar--minimized .friendslist-navbar-btn.hidden
{
	margin:0px 16px 0px 18px;
	visibility: collapse;
	transition-property: position;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

.friendslist-navbar-btn RadioButton
{
	width: 100%;
	height: 100%;
	horizontal-align: center;
	vertical-align: middle;
	wash-color: white;
	background-color: gradient( linear, 0% 100%, 0% 99%, from( white ), color-stop( 0, #ffffff00), to( #ffffff00 ) );
}

.friendslist-navbar-btn RadioButton Label
{
	font-size: 18px;
	font-family: Stratum2;
	font-weight: medium;
}

.friendslist-navbar-btn RadioButton:enabled:hover
{
	background-color: gradient( linear, 0% 100%, 0% 98%, from( white ), color-stop( .9, white ), to( #ffffff00 ) );
	transition-property: background-color;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
	sound: "UIPanorama.sidemenu_rollover";
}

.friendslist-navbar-btn RadioButton:selected
{
	background-color: gradient( linear, 0% 100%, 0% 92%, from( white ), color-stop( .9, white ), to( #ffffff00 ) );
	transition-property: background-color;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
	sound: "UIPanorama.sidemenu_select";
}

.friendslist-navbar-btn RadioButton Image
{
	vertical-align: middle;
	horizontal-align: center;
	width: height-percentage( 100% );
	height: 32px;
}

RadioButton.toggle-active Image
{
	brightness: .3;
}

.friendslist-navbar-btn .RadioBox
{
	visibility: collapse;
}

.friendslist-navbar-title
{
	vertical-align: center;
	flow-children: right;
	horizontal-align: left;
	width: 128px;
}

.friendslist-navbar-title__number
{
	font-size: 14px;
	vertical-align: center;
	horizontal-align: center;
	color: #ffffff75;
	font-weight: bold;
	width: 48px;
	text-align: center;
	Margin-left: 24px;
}

.friendslist-navbar-title__text
{
	font-size: 14px;
	font-family: stratum2;
	vertical-align: center;
	horizontal-align: left;
	font-weight: bold;
	text-align: left;
	Margin-left: 30px;
}

.friendslist__seperator
{
	height: 1px;
	width: 100%;
	opacity: .1;
	background-color: #ffffff;
	horizontal-align: center;
	transition-property: position;
	transition-duration: .5s;
	transition-timing-function: ease-in-out;
}

.friendslist-lists
{
	height: 100%;
	width: 100%;
	transition-property: position;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.friendslist-list
{
	height: 100%;
	width: 100%;
	opacity: 1;
	transform: translatex( 0px );
	flow-children: down;
	transition-property: opacity, transform;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

.friendslist-list__contents
{
	height: 100%;
	width: 100%;
	overflow: clip scroll;
	flow-children: down;
}

.friendslist-nodata
{
	height: 256px;
	width: 100%;
	vertical-align: center;
	horizontal-align: center;
	opacity: 1;
	visibility: visible;
	transition-property: opacity;
	transition-duration: .2s ;
	transition-timing-function: ease-in-out;
}

.friendslist-nodata__image
{
	height: 22px;
	width: 22px;
	vertical-align: top;
	horizontal-align: left;
	margin-left: 21px;
	vertical-align: center;
	wash-color: baseText;
}

.friendslist-nodata-text
{
	vertical-align: center;
	horizontal-align: left;
	margin-left: 64px;
	margin-right: 16px;
	flow-children: down;
}

.friendslist-nodata-text__title
{
	font-size: 24px;
	margin-bottom: 16px;
	margin-left: 12px;
	height: fit-children;
}

.friendslist-nodata-text__body
{
	font-size: 14px;
	line-height: 20px;
	margin-left: 12px;
	margin-bottom: 8px;
}

.friendslist-nodata.hidden
{
	opacity: 0;
	visibility: collapse;
	transition-property: opacity;
	transition-duration: .2s ;
	transition-timing-function: ease-in-out;
}

.friendslist-nodata .PopupButton
{
	margin: 0px;
	horizontal-align: left;
}

.friendslist-loadingbar
{
	width:100%;
	height: 6px;
	margin-bottom: 4px;
	background-color: #00000050;
	opacity: 1;
	transition-property: height;
	transition-duration: .2s ;
	transition-timing-function: ease-in-out;
}

.friendslist-loadingbar__inner
{
	width: 64px;
	height: 100%;
	background-color: #E3E3E3;
}

.friendslist-loadingbar.hidden
{
	background-color: #00000000;
	transition-property: height;
	transition-duration: .5s;
	transition-timing-function: ease-in-out;
}

.friendslist-loadingbar.hidden .friendslist-loadingbar__inner
{
	opacity: 0;
}

.loadingbar-indeterminate
{
	animation-name: loadingbar-indeterminate;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.loadingbar-indeterminate-2
{
	animation-name: decrease;
	animation-duration: 4s;
	animation-delay: 0.5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

@keyframes 'loadingbar-indeterminate'
{
	0%
	{
		opacity: 0;
		position: -50% 0% 0%;
		pre-transform-scale2d: 1, 1;
	}
	
	50%
	{
		opacity: 1;
		position: 150% 0% 0%;
		pre-transform-scale2d: 6, 1;
	}
	
	100%
	{
		opacity: 0;
		position: -50% 0% 0%;
		pre-transform-scale2d: 1, 1;
	}
	
}

.anti-addiction
{
	tooltip-position: bottom;
	tooltip-body-position: 75% 507%;
	padding-bottom: 8px;
}

.anti-addiction.hidden
{
	opacity: 0;
	visibility: collapse;
}

.anti-addiction__text
{
	font-size: 14px;
	max-width: 350px;
	color: white;
	vertical-align: middle;
	text-shadow: 1px 1px 2px #000000;
}

.mainmenu-sidebar--minimized .anti-addiction__text
{
	visibility: visible;
	transition-property: position;
	transition-duration: .5s;
	transition-timing-function: ease-in-out;
}

.anti-addiction__icon
{
	opacity: 1;
	visibility: visible;
	width: height-percentage( 100% );
	height: 16px;
	margin: 8px 16px 8px 41px;
	border-radius: 8px;
	box-shadow: shadowOffset;
	background-color: gradient( radial, 15% 25%, 0% 0%, 100% 100%, from( #00000000 ), to( #00000000 ) );
}

.anti-addiction__icon.anti-addiction-Green
{
	background-color: gradient( radial, 15% 25%, 0% 0%, 100% 100%, from( #00FF00FF ), to( #009900FF ) );
}

.anti-addiction__icon.anti-addiction-Yellow
{
	background-color: gradient( radial, 15% 25%, 0% 0%, 100% 100%, from( #FFFF00FF ), to( #EE9900FF ) );
}

.anti-addiction__icon.anti-addiction-Red
{
	background-color: gradient( radial, 10% 15%, 0% 0%, 100% 100%, from( #EE6600FF ), to( #FF0000FF ) );
}

.party-list
{
	width: 100%;
	background-color: rgba(0, 0, 0, 0.397);
	tooltip-position: bottom;
	tooltip-body-position: 75% 50%;
	transform-origin: 50% 0%;
	transition-property: transform, opacity;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.party-list__bg
{
            width: 100%;
            height: 100%;
            background-image: url("file://{resources}/videos/linemap.webm");
            background-repeat: no-repeat;
            wash-color: rgb(10, 110, 157);
            background-size: 310% auto;
            background-position: 0% 50%;
            transition-property: brightness;
            transition-duration: 0.25s;
            transition-timing-function: ease-in-out;

}

.party-list__bg--searching
{
	wash-color: rgb(20, 160, 20);
	background-img-opacity: 1;
	transition-property: wash-color, background-img-opacity;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.party-list__bg--warning
{
	wash-color: rgb(17, 158, 17);
	background-img-opacity: 1;
	transition-property: wash-color, background-img-opacity;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.party-members-list
{
	padding-bottom: 16px;
	tooltip-position: bottom;
	tooltip-body-position: 75% 507%;
}

.party-list.hidden,.party-members-list.hidden
{
	opacity: 0;
	transform: scaleY(0);
	visibility: collapse;
	transition-property: opacity, transform;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.MainMenuRootPanel--PauseMenuMode .friendslist:not(.friendslist-party-searching) .party-list
{
	opacity: 0;
	visibility: collapse;
}

.party-status-time
{
	font-family: Stratum2 Bold Monodigit, 'Arial Unicode MS';
	color: rgb(175, 175, 175);
	font-size: 24px;
	font-weight: medium;
	text-align: center;
	horizontal-align: center;
}

.party-player-count
{
	vertical-align: center;
	height: 64px;
	margin-left: 12px;
}

.party-status-members-count
{
	font-size: 12px;
	font-weight: normal;
	horizontal-align: center;
	text-align: center;
	vertical-align: bottom;
	padding: 6px;
	color: white;
}

.party-contents
{
	flow-children: down;
	width: 100%;
}

.friendslist-incominginvites
{
    height: fit-children;
    width: 100%;
    flow-children: down;
    border-top: 1px solid rgba(255, 255, 255, 0.281);
    transition-property: position;
    transition-duration: .5s;
    transition-timing-function: ease-in-out;
}

.friendslist-incominginvites.hidden
{
    opacity: 0;
    visibility: collapse;
}

.friendslist-incominginvites-container
{
    height: fit-children;
    width: 100%;
    flow-children: down;
    background-color: gradient( linear, 0% 0%, 100% 0%, from( #09703e ), to( rgb(19, 59, 20)) );
    animation-name: InvitePulse;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes 'InvitePulse'
{
    0%
    {
        background-color: gradient( linear, 0% 0%, 100% 0%, from( #09703e ), to( rgb(19, 59, 20) ) );
    }
    
    30%
    {
        background-color: gradient( linear, 0% 0%, 100% 0%, from( rgb(19, 59, 20) ), to( rgb(19, 59, 20) ) );
    }
    
    60%
    {
        background-color: gradient( linear, 0% 0%, 100% 0%, from( #09703e ), to( rgb(19, 59, 20) ) );
    }
    
    100%
    {
        background-color: gradient( linear, 0% 0%, 100% 0%, from( #09703e ), to( rgb(19, 59, 20) ) );
    }
    
}

.friendslist-incominginvites-container .friendlobby
{
    border: 0px;
}


.MainMenuRootPanel--PauseMenuMode .friendslist:not(.friendslist-party-searching) #JsLocalPlayercard.hidden
{
	opacity: 1;
	visibility: visible;
	height: fit-children;
	transform: scaleY( 1 );
}

.steam-license-restricted .friendslist-incominginvites,.GameClientConnectingToGC #JsFriendsTab-lobbies,.steam-license-restricted #JsFriendsTab-lobbies,.GameClientConnectingToGC #JsFriendsTab-recents,.steam-license-restricted #JsFriendsTab-recents
{
	visibility: collapse;
}

.friendslist-accordian
{
	flow-children: down;
	height: 100%;
	width: 100%;
	transition-property: position;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.friendslist-accordian__section
{
	flow-children: down;
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	transition-property: height;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.friendslist-accordian__section.hidden
{
	height: 0px;
	visibility: visible;
}

.friendslist-accordian__section--noborder
{
	border-bottom: 0px solid rgba(255, 255, 255, 0.05);
}

RadioButton.friendslist-accordian__section .RadioBox
{
	visibility: collapse;
}

.friendslist-accordian__section__header
{
	flow-children: right;
	width: 100%;
}

.friendslist-accordian__section__header--bg
{
	background-image: url("file://{images}/backgrounds/linemap.png");
	background-size: auto auto;
	background-position: 100% 50%;
	background-img-opacity: .03;
}

.friendslist-accordian__section__header--bg2
{
	background-image: url("file://{images}/backgrounds/linemap.png");
	background-size: auto auto;
	background-position: 50% 50%;
	background-img-opacity: .03;
}

.friendslist-accordian__section__header--bg3
{
	background-image: url("file://{images}/backgrounds/linemap.png");
	background-size: auto auto;
	background-position: 20% 20%;
	background-img-opacity: .03;
}

.friendslist-accordian__section__header__icon__container
{
	width: 64px;
	height: 64px;
}

.friendslist-accordian__section__header__icon
{
	width: 22px;
	height: 22px;
	vertical-align: center;
	horizontal-align: center;
}

.friendslist-accordian__section__list
{
	width:100%;
	flow-children: down;
	background-color: rgba(0, 0, 0, 0.6);
	transition-property: height;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

.friendslist-accordian__section__list__contents
{
	width:100%;
	overflow: squish scroll;
	flow-children: down;
	transition-property: height;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

