@define shortduration: 0.25s;
@define shortmedduration: 0.3s;
@define mediumduration: 0.4s;
@define longduration: 1.7s;

// fade in any prompt/message
@define login_message_transition_time: 0.3s;

// slide down for steam guard code entry
@define steamguard_message_transition_time: 0.3s;

LoginUser
{
	opacity: 0.0;
	animation-name: fade-in;
	animation-duration: 0.20s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: 1;
	animation-direction: normal;

	transition-property: opacity;
	transition-duration: 0.20s;
	transition-timing-function: bigpicture-ease-in-out;
	width: 100%;
	height: 100%;
}

@keyframes 'fade-in'
{
	0%
	{
		opacity: 0.0;
	}

	100%
	{
		opacity: 1.0;
	}
}

LoginUser:descendantfocus
{
	opacity: 1.0;
}

LoginUser:descendantfocus .LoginHidden
{
	opacity: 0.0;
}

.Card
{
	flow-children: down;
	horizontal-align: left;
	width: 530px;
	height: 860px;

	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	margin-top: 60px;

	transform: translatex(698px);
	box-shadow: #00000044 -4.5px -4.5px 18px 9px;

	background-color: message_box_bg;

	pre-transform-scale2d: 1.0;

	transition-property: pre-transform-scale2d, transform;
	transition-duration: 0.23s;
	transition-timing-function: bigpicture-ease-in-out;
	transition-delay: 0s;
}


.BehindTextInputHandler .Card
{

	transform: translatex(220px);
}

.UserContainer
{
	horizontal-align: center;
	flow-children: down;
	height: fit-children;
	margin-top: 40px;
	width: 100%;
}

.Bezel
{
	border-width: 0px;
	border-radius: 0px;
	background-color: gradient( linear, 0% 0%, 100% 100%, from( #f1f1f1 ), to( #6c6c6c ) );

	height: 371px;
	width: 371px;

	horizontal-align: center;
	vertical-align: center;
}

.LoginImage
{
	height: 350px;
	width: 350px;
	horizontal-align: center;
	vertical-align: center;
	opacity: 1.0;
	box-shadow: inset #00000044 0px 0px 18px 0px;
	background-color: #000000;
	border-width: 0px;
	border-radius: 0px;
}

#TestPanelTextEntry
{
	horizontal-align: center;
	vertical-align: top;
	width: 600px;
}

#TestCommandTextEntry
{
	width: 500px;
}

#TestCommandButton
{
	width: 100px;
}

#LoginNamesContainer
{
	width: 100%;
	height: fit-children;
	//min-height: 33px;
	margin-top: 10px;
	//margin-bottom: 12px;
	flow-children: down;
}

#PersonaNameLabel
{
	horizontal-align: left;
	vertical-align: center;
	margin-left: 12px;

	width: 460px;
	font-size: 54px;
	font-weight: bold;
	font-family: platformfont;
	text-align: left;
	//text-overflow: clip;
	text-overflow: clip;
	white-space: nowrap;

	opacity: 1.0;
	color: applabel;
}

#AccountNameLabel
{
	font-size: 34px;
	font-family: platformfont;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: detailsdatalabel;

	padding-left: 12px;
	margin-top: 4px;
}

.ShowMessageArea .UserContainer
{
	margin-top: 0px;
	margin-bottom: 25px;
	flow-children: right;
}

.ShowMessageArea .LoginImage
{
	height: 105px;
	width: 105px;
	border-radius: 0px;
	box-shadow: #00000044 0px 0px 04px 0px;
}

.ShowMessageArea .Bezel
{
	height: 115px;
	width: 115px;
	border-radius: 0px;
	horizontal-align: left;
	vertical-align: center;
}

.ShowMessageArea #LoginNamesContainer
{
	min-height: 0px;
	vertical-align: center;
	padding-left: 10px;
	margin-top: 0px;
}

.ShowMessageArea #AccountNameLabel
{
	padding-left: 0px;
	text-align: left;
	margin-top: 0px;
}

.ShowMessageArea #PersonaNameLabel
{
	font-size: 44px;
	horizontal-align: left;
	text-align: left;
	margin-left: 0px;
}

.ShowMessageArea .UserContainer
{
	margin-top: 50px;
	margin-bottom: 60px;
}

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

#MessageAreaLabel
{
	font-size: 34px;
	width: 100%;
	font-family: platformfont;
	color: #bcc0c3;
	visibility: collapse;
}

// default to invisible
#SteamGuardTextEntry,
#TwoFactorTextEntry
{
	visibility: collapse;
}

.ShowMessageArea #MessageAreaLabel
{
	visibility: visible;
}

.SteamGuard #SteamGuardTextEntry
{
	visibility: visible;
}

.TwoFactor #TwoFactorTextEntry
{
	visibility: visible;
}

.SteamGuard #AccountNameTextEntry,.SteamGuard #PasswordTextEntry,.SteamGuard #RememberPassword
{
	visibility: collapse;
}

.AccountSuspended #AccountNameTextEntry,.AccountSuspended #PasswordTextEntry,.AccountSuspended #LoginButton,.AccountSuspended #RememberPassword
{
	visibility: collapse;
}

.TwoFactor #AccountNameTextEntry, .TwoFactor #PasswordTextEntry, .TwoFactor #RememberPassword
{
	visibility: collapse;
}

.AnonLogin #AccountNameLabel,.AnonLogin #PersonaNameLabel
{
	visibility: collapse;
}

.AnonLogin.ShowMessageArea #AccountNameLabel
{
	visibility: visible;
}

.AccountLogin #AccountNameTextEntry
{
	visibility: collapse;
}

.IpRestricted #AccountNameTextEntry,.IpRestricted #PasswordTextEntry,.IpRestricted #LoginButton,.IpRestricted #RememberPassword
{
	visibility: collapse;
}

.ScreenSaverMode LoginUser
{
	opacity: 0.0;
}

.LoginPromptContainer
{
	width: 100%;
	height: 70px;

	margin: 4px 0px 15px 0px;
}


.LoginPromptContainer:hover, TextEntry:hover
{
	box-shadow: box_shadow_on_color -5px -5px 6px 10px;
}

.LoginPromptContainer:focus, .LoginPromptContainer:selected:focus, .LoginPromptContainer:hover:selected
{


}

.LoginPromptContainer:disabled:hover
{
	box-shadow: box_shadow_off_color -3px -3px 6px 6px;
}

.LoginPromptContainer Label
{

	margin-bottom: 4px;
	padding-top: 5px;
	color: detailsdatalabel;

	vertical-align: center;
	font-size: 28px;
	font-family: platformfont;
	font-weight: normal;
	padding-left: 10px;
	padding-top: 6px;
	transform: translatex(-7px);

	transition-property: transform;
	transition-duration: 0.23s;
	transition-timing-function: ease-in;
}

.LoginPromptContainer:descendantfocus Label
{
	color: black;
	transform: translateX(0px);	
}

.LoginPromptContainer:disabled Label
{
	color: applabelsolid;
}	

Label.TextEntryPrompt, .LoginPromptContainer:descendantfocus Label.TextEntryPrompt
{
	horizontal-align: right;
	vertical-align: center;
	color: #1b2838;
	font-size: 27px;
	font-family: platformfont;
	padding-right: 6px;
	transform: translateX(0px);

	// Linux/Mac bug: border-radius != 0 results in no border - will fix
	//border-radius: 2px;
	border-radius: 0px;

	transition-property: opacity;
	transition-duration: 0.23s;
	transition-timing-function: ease-in;

}

#SteamGuardTextEntry
{
	visibility: collapse;
	transition-property: height;
	transition-duration: steamguard_message_transition_time;
	text-transform: uppercase;
}

#TwoFactorTextEntry
{
	visibility: collapse;
	transition-property: height;
	transition-duration: steamguard_message_transition_time;
	text-transform: uppercase;
}


// This class gets added when the progress dialog is visible
.ShowingLoginProgress LoginUser
{
	opacity: 0.0;
	transition-duration: 0.4s;
}

ToggleButton {
	font-size: 28px;
}

// tickbox to turn togglebuttons into checkboxes
.CheckBox
{
	background-color: ui_common_control;
	border-color: none;
	border-width: 5px;
	border-style: solid;

	height: 70px;
	width: 100%;
	margin-bottom: 15px;
	margin-top: 4px;

	transition-property: border, background-color, color, box-shadow;
	transition-timing-function: ease-out;
	transition-duration: 0.23s;

}

.CheckBox:descendantfocus
{
	background-color: gradient(linear, 0% 0%, 100% 0%, from(#f2f2f2), to(#bdbdbd) );
	border-color: white;

	animation-name: main-button-glow-movement;
	animation-duration: 1.7s;
	animation-delay: 0.0s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}

.CheckBox .TickBox
{
	height: 60px;
	width: 60px;
	border-color: ui_common_control_border;
	background-color: #00000022;
	border-style: solid;
	border-radius: 0px;
	border-width: 0px;
	vertical-align: center;
	transition-property: border;
	transition-duration: 0.23s;
	transition-timing-function: ease-out;
}

.CheckBox Label
{
	padding-left: 15px;
	width: 100%;
	color: detailsdatalabel;
	font-family: platformfont;
	border-width: 0px;

	transform: translatex(-7px);
	transition-property: color, transform;
	transition-duration: 0.23s;
	transition-delay: 0.0s;
	transition-timing-function: ease-in;
}

.CheckBox:descendantfocus Label
{
	transform: translatex(0px);
}

.CheckBox:hover
{
	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;
}

.CheckBox:disabled:hover
{
	box-shadow: box_shadow_off_color -4.5px -4.5px 16px 9px;
}

.CheckBox:descendantfocus .TickBox
{
	border-color: #ffffffff;
	box-shadow: inset #00000044 0px 0px 6px 0px;
}

#SharedBorderContainer
{
	width: fit-children;
	height: 100%;
}

#SharedBorder
{
	border-color: none;
	border-width: 6px;
	border-style: solid;
	border-radius: 0px;
	width: 100%;
	height: 100%;
	transition-property: border;
	transition-duration: 0.23s;
	transition-timing-function: ease-out;
}

.CheckBox:descendantfocus #SharedBorder
{
	border-color: none;
}

.CheckBox:descendantfocus Label,.CheckBox:focus:hover Label
{
	color: black;
	transform: translatex(0px);
}

TextEntry {
	font-size: 38px;
}

#PasswordTextEntry:disabled, #LoginButton Label:disabled
{
	color: applabelsolid;
}

TextEntry:disabled,.Button:disabled,ToggleButton:disabled
{
	saturation: 1.0;
	blur: gaussian( 0.7 );
	opacity: 0.40;
	border-color: none;
	box-shadow: none;
	animation-name: none;
}

#TestPanelTextEntry
{
	horizontal-align: left;
	vertical-align: center;
}

HTML
{
	// opaque to minimize flash-through of content behind
	background-color: #2c2c2c;
	width: 75%;
	height: 60%;
	padding-right: 0px;
	margin: 5px;
	padding-left: 0px;
	border-width: 5px;
	border-color: ui_common_control_border;
	// room for scroll bar
}

HTML:focus,HTML:hover
{
	box-shadow: box_shadow_on_color -5px -5px 6px 10px;
}

// If the password control has focus and caplock is not on
TextEntry.CapsLock:focus .Password, .PasswordCapsLock
{
	opacity: 0.0;
}


// If the password control has focus and caplock is on
.Password, TextEntry.CapsLock:focus .PasswordCapsLock
{
	opacity: 1.0;
}

.HasInput .Password, TextEntry.HasInput:focus .PasswordCapsLock, .HasInput .AccountName, .HasInput .SteamGuard, .HasInput .TwoFactor
{
	opacity: 0.0;
}