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

                                                                               
                                                                               
                                                                               
.friendslist-navbar
{
	height: fit-children;
	Width: 100%;
	flow-children: right;
	border-top: 1px solid rgba(255, 255, 255, 0.281);

	transition-property: position;
	transition-duration: .5s;
	transition-timing-function: ease-in-out;
}

.friendslist-navbar--tab-settings
{
	flow-children: down;
	height: 0px;
	padding-left: 8px;
	margin: 0px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.281);

	transition-property: height;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.friendslist-navbar--tab-settings.expand
{
	height: 64px;

	transition-property: height;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.friendslist-navbar--tab-settings .IconButton
{
	margin:4px 4px 4px 4px;
}

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

.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, 100% 0%, 0% 0%, from( #00000000), color-stop( 0, #00000040 ), to( #00000040 ) );
}

.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: .25s;
	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-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: .25s;
	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;
}

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

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

.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;
	vertical-align: center;
	horizontal-align: left;
	font-weight: bold;
	text-align: left;
	Margin-left: 30px;
}

.friendslist__seperator
{
	height: 1px;
	width: 90%;
	opacity: .25;
	background-color: #ffffff;
	horizontal-align: center;

	-s2-mix-blend-mode: SRGBadditive;
	
	transition-property: position;
	transition-duration: .5s;
	transition-timing-function: ease-in-out;
}

                                                                               
                                                                               
                                                                               
.friendslist-lists
{
	height: 100%;
	width: 100%;

	transition-property: position;
	transition-duration: .5s;
	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: .25s;
	transition-timing-function: ease-in-out;
}

.friendslist-list__contents
{
	height: 100%;
	width: 100%;

	overflow: clip scroll;
	flow-children: down;
}

.friendslist-list.hidden
{
	opacity: 0;
	transform: translatex( 200px );

	transition-property:  opacity, transform;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

                                                                               
                                                                               
                                                                               
.friendslist-nodata
{
	height: fit-children;
	width: 100%;
	vertical-align: top;
	horizontal-align: center;
	margin-top: 128px;
	opacity: 1;
	visibility: visible;

	transition-property: opacity;
	transition-duration: .25s ;
	transition-timing-function: ease-in-out;
}

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

.friendslist-nodata-text
{
	vertical-align: top;
	horizontal-align: left;
	margin-left: 82px;
	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: 16px;
	line-height: 24px;
	margin-left: 12px;
	margin-bottom: 16px;
}

.friendslist-nodata.hidden
{
	opacity: 0;
	visibility: collapse;

	transition-property: opacity;
	transition-duration: .25s ;
	transition-timing-function: ease-in-out;
}

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

                                                                               
                                                                               
                                                                               

.friendslist-loadingbar
{
	width:100%;
	height: 6px;
	background-color: #00000050;
	opacity: 1;

	transition-property: height;
	transition-duration: .25s ;
	transition-timing-function: ease-in-out;
}

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

.friendslist-loadingbar.hidden
{
	height: 0px;

	transition-property: height;
	transition-duration: .5s;
	transition-timing-function: ease-in-out;
}

.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: collapse;
	
	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%;

	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%;
	
	wash-color: rgb(40, 161, 218);
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #183342 ), to( #306988aa ) );

	background-image: url( "file://{resources}/videos/search.webm" );
	background-repeat: no-repeat;

  	                                                       
  	                                 
  	                              

	                                                         
	background-size: clip_then_cover;
	background-position: 0% 50%;
	background-img-opacity: 0.12;

  	                                                           
  	                       
  	                              

	transition-property: wash-color, background-img-opacity;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.party-list__bg--searching
{
	wash-color: rgb(9, 255, 152);
	background-img-opacity: 1.0;

	transition-property: wash-color, background-img-opacity;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.party-list__bg--warning
{
	wash-color: rgb(218, 201, 56);
	background-img-opacity: 1.0;

	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;
}

.Spinner.additive
{
	-s2-mix-blend-mode: SRGBadditive;
}

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

.party-player-count
{
	width: fill-parent-flow(1);
	vertical-align: center;
}

.party-status-members-count
{
	font-size: 18px;
	font-weight: bold;

	horizontal-align: left;
	background-color: rgba(163, 163, 163, 0.247);
	padding: 6px;
	margin-left: 24px;
	-s2-mix-blend-mode: SRGBadditive;
	color: rgb(175, 175, 175);
}

                                                                               
                                                                               
                                                                               
.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: rgba(10, 104, 33, 0.185);
	background-color: gradient( linear, 0% 0%, 100% 0%, from( blueColor ), to( #2d692f00  ) );

	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( blueColor ), to( #2d692f00  ) );
	}
	30%
	{
		background-color: gradient( linear, 0% 0%, 100% 0%, from( #2d692f00 ), to( #2d692f00  ) );
	}
	60%
	{
		background-color: gradient( linear, 0% 0%, 100% 0%, from( blueColor ), to( #2d692f00  ) );
	}
	100%
	{
		background-color: gradient( linear, 0% 0%, 100% 0%, from( blueColor ), to( #2d692f00  ) );
	}
}

.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;
}

