.LoadingRoot
{
    width: 100%;
    height: 100%;
    background-color: black;
}

#SidebarAndBattleCupLayoutContainer
{
	width: 100%;
	height: 100%;

	flow-children: left;
}

.DotaLoadingSidebar
{
	width: 400px;
	height: 100%;
	horizontal-align: right;
	flow-children: down;
	padding: 15px;

	background-color: gradient( linear, 0% 0%, 0% 100%, from( #262a2f ), to( #131518 ) );

	transition-property: transform, opacity;
	transition-duration: 0.25s;
    transform: translatex( 400px );
}

.is_waiting_for_players .DotaLoadingSidebar
{
    transform: translatex( 0px );
}

.CustomGameLoadingSidebar
{
	width: 400px;
	height: 100%;
	horizontal-align: right;
	flow-children: down;
	padding: 15px;
	
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #262a2f ), to( #131518 ) );

	transition-property: transform, opacity;
	transition-duration: 0.25s;
    transform: translatex( 400px );
}

.is_waiting_for_players .CustomGameLoadingSidebar
{
    transform: translatex( 0px );
}

.GameHeader
{
	flow-children: right;
}

.TeamContainer
{
	padding: 10px;
	padding-left: 15px;
	width: 100%;
	flow-children: down;
	border-top: 1px solid #363d3b;
	min-height: 260px;
}

#RadiantContainer
{
	background-color: gradient( linear, 0% 0%, 40% 50%, from( #0e3b1a ), to( #151719 ) );
}

#DireContainer
{
	background-color: gradient( linear, 0% 0%, 40% 50%, from( #3c0f16 ), to( #151719 ) );
}

#CastersContainer
{
	background-color: gradient( linear, 0% 0%, 40% 50%, from( #0f163c ), to( #151719 ) );
	visibility: collapse;
}

.TeamName
{
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	color: white;
}

#PlayersListContainer
{
    vertical-align: top;
    horizontal-align: right;
    width: 100%;
	height: fill-parent-flow(1);

    flow-children: down;
}

.LoadingScreenPlayersList
{
	width: 100%;
	flow-children: down;
	overflow: squish scroll;
}

DOTALoadingScreenPlayersList
{
	width: 100%;
    flow-children: down; 
}

DOTALoadingScreenPlayer
{
	margin: 5px;
    flow-children: right; 
    width: 100%;
}

#CustomGameModeHeader
{
	flow-children: right;
}

#CustomGameModeIcon
{
	width: 32px;
	height: 32px;
	margin: 5px;
}

#GameModeName
{
    font-size: 27px;
	text-transform: uppercase;
	color: white;
	vertical-align: center;
	margin: 5px;
}


#WaitingImage
{
	vertical-align: center;
	width: 29px;
	height: 29px;
	margin: 5px;

	animation-name: WaitingImageRotate;
	animation-duration: 1.0s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;

	background-image: url("s2r://panorama/images/status_icons/loadingthrobber_round_png.vtex");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% 100%;
}

.StatusHeader
{
	flow-children: right;
	width: 100%;
	padding: 10px;
}

.StatusBox
{
	flow-children: down;
	margin-top: 20px;
	width: 100%;
	height: fill-parent-flow(1);
	background-color: #151719;
	box-shadow: inset black 5px 5px 10px 10px;
}

#PlayersHeader
{
	flow-children: down;
}

#GameHeader
{
	flow-children: right;
	width: 100%;
	padding: 10px;
}

.FillSpacerWidth
{
	width: fill-parent-flow(1);
}

#MatchID
{
	color: white;
	font-size: 16px;
	margin-top: 4px;
	margin-left: 5px;
	visibility: collapse;
}

#GameMode
{
	color: white;
	font-size: 16px;
	margin-top: 4px;
	margin-left: 5px;
}

#GameHeader.HasMatchID #MatchID
{
	visibility: visible;
}

#PlayersInfo
{
	text-transform: uppercase;
	color: white;
	font-size: 24px;
	margin-top: 4px;
	margin-left: 5px;
}

#CastersInfo
{
	vertical-align: bottom;
	text-transform: uppercase;
	font-size: 16px;
	margin-bottom: -5px;
	visibility: collapse;
}

#SpectatorsInfo
{
	vertical-align: bottom;
	text-transform: uppercase;
	font-size: 16px;
	margin-bottom: -5px;
	visibility: collapse;
}

#PlayersHeader.HasCasters #PlayersInfo
{
	font-size: 16px;
	margin-top: 0px;
	margin-left: 0px;
}

#PlayersHeader.HasCasters #CastersInfo
{
	visibility: visible;
}

#PlayersHeader.HasCasters #CastersContainer
{
	visibility: visible;
}

#PlayersHeader.HasSpectators #PlayersInfo
{
	font-size: 16px;
	margin-top: 0px;
	margin-left: 0px;
}

#PlayersHeader.HasSpectators #SpectatorsInfo
{
	visibility: visible;
}

#LoadingScreenTimer
{
	vertical-align: center;
    font-size: 27px;
	color: white;
	font-size: 24px;
}

DOTALoadingScreenPlayer #PlayerName
{
	margin: 5px;
    font-size: 18px;
    color: #b4b4b4;
    vertical-align: middle;
    width: fill-parent-flow(1);
}

DOTALoadingScreenPlayer #PlayerLoadingStatus
{
    font-size: 18px;
    color: #808080;
    vertical-align: middle;
	text-transform: uppercase;
}

DOTALoadingScreenPlayer.player_state_unknown #PlayerLoadingStatus
{
}

DOTALoadingScreenPlayer.player_state_loading #PlayerLoadingStatus
{
}

DOTALoadingScreenPlayer.player_state_fully_connected #PlayerLoadingStatus
{
    color: #328022;
}

DOTALoadingScreenPlayer.player_state_failed #PlayerLoadingStatus
{
    color: #801e27;
}

DOTALoadingScreenPlayer #PlayerAvatar
{
    width: 36px;
    height: 36px;
}

DOTALoadingScreenPlayer #PlayerEventCrestImage
{
	width: 20px;
	height: 20px;
    margin-left: 5px;
    vertical-align: middle;
    horizontal-align: middle;
	visibility: collapse;
}

.EventActive #PlayerEventCrestImage
{
	visibility: visible;
}

.LoadingPanel
{
    vertical-align: bottom;
    horizontal-align: right;
    padding-bottom: 40px;
    padding-right: 40px;

    flow-children: right;

	transition-property: transform, opacity;
	transition-duration: 0.25s;
}

.LoadingRoot.is_waiting_for_players .LoadingPanel
{
    transform: translatey( -20px );
    opacity: 0;
}

@keyframes 'WaitingImageRotate'
{
	0%
	{
		transform: rotateZ( 360deg );
	}

	50%
	{
		transform: rotateZ( 180deg );
	}
	
	100%
	{
		transform: rotateZ( 0deg );
	}
}

.Tip
{
    //max-width: 45%;
    min-height: 48px;
    margin-bottom: 20px;
    horizontal-align: center;
    vertical-align: bottom;
    padding-left: 64px;
    padding-right: 64px;

    color: white;
    text-align: left;
	font-size: 24px;
	font-weight: thin;
    text-shadow: 1px 1px 2px #000000; 
}

.LoadingRoot.HideTips .Tip
{
    visibility: collapse;
}

.ChatTipBox
{
    width: 100%;
    height: fit-children;
    flow-children: down;
    vertical-align: bottom;
}

#LoadingScreenChat
{
	width: 700px;
    margin-left: 20px;
    margin-bottom: 20px;
    horizontal-align: left;

	transform: translateX( -20px );
	opacity: 0.0;

	transition-property: transform, opacity;
	transition-duration: 0.5s;

	visibility: collapse;
}

.AspectRatio4x3 #LoadingScreenChat
{
	width: 600px;
	margin-left: 0px;
}

.AspectRatio5x4 #LoadingScreenChat
{
	width: 530px;
	margin-left: 0px;
}

/* Chat is hitchy if we show it while actually loading, so keep it hidden then */
DOTALoadingScreen.LoadingRoot.is_loading #LoadingScreenChat
{
	transform: translateX( -20px );
	opacity: 0.0;
}

.LoadingRoot.is_connecting_to_server #LoadingScreenChat,
.LoadingRoot.is_custom_game_setup #LoadingScreenChat,
.LoadingRoot.is_waiting_for_players #LoadingScreenChat
{
	transform: translateX( 0px );
	opacity: 1.0;
}

#CustomLoadingScreenContainer
{
    width: 100%;
    height: 100%;
    visibility: collapse;
}

.CustomGame #CustomLoadingScreenContainer
{
    visibility: visible;
}

DOTALoadingScreenBackgroundImage
{
    width: 100%;
    height: 100%;
}

.WaitingPanel
{
    vertical-align: bottom;
    horizontal-align: right;
    padding-bottom: 40px;
    padding-right: 40px;

    flow-children: right;

	transition-property: transform, opacity;
	transition-duration: 0.5s;
    transform: translatey( 20px );
    opacity: 0;
}

.LoadingRoot.is_waiting_for_players .WaitingPanel
{
    transform: translatey( 0px );
    opacity: 1;
}

#LoadingScreenContent
{
    width: 100%;
    height: 100%;
}

.DOTAReturnToDashboardOverlay
{
	transition-property: transform, opacity;
	transition-timing-function: ease-in-out;
	transition-duration: 2s;
    transform: translatey( -60px );
    opacity: 0;
}

.LoadingRoot.is_waiting_for_players .DOTAReturnToDashboardOverlay
{
    transform: translatey( 0px );
    opacity: 1;
}

#LoadingScreenPopupManager, #LoadingScreenTooltipManager, #LoadingScreenContextMenuManager
{
	width: 100%;
	height: 100%;
}

#LoadingScreenTournamentContainer
{
	width: 0%;
	height: 0%;
}

#LoadingScreenTournamentContainer.HasContents
{
	width: 100%;
	height: 100%;
}

#LoadingScreenBattleCupWinnerContainer
{
	width: fill-parent-flow( 1.0 );
	height: 100%;
}

#BattleCupVictoryIcon
{
	margin-top: 8px;
	margin-left: 2px;
}