ControllerRegistration
{	
	horizontal-align: center;
	vertical-align: center;
	width: 100%;
	height: 100%;
    font-size: 20px;
}

.Step_RegisteringCurrentAccount,
.Step_Personalizing,
.Step_Migrating,
.Step_SelectingAccount,
.Step_FirmwareUpdate,
{
	visibility: collapse;
}

.RegisteringCurrentAccount .Step_RegisteringCurrentAccount,
.Personalizing .Step_Personalizing,
.Migrating .Step_Migrating,
.SelectingAccount .Step_SelectingAccount,
.FirmwareUpdate .Step_FirmwareUpdate
{
	visibility: visible;
}

#MsgBoxHeader
{
	flow-children: down;
	height: fit-children;
}

.StepHeader,
.StepArea
{
	flow-children: down;
}

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

#SetNameContainer
{
	margin-top: 20px;
	flow-children: right;
}

#SetNameContainer Label
{
	vertical-align: center;
}

.RegistrationDescription
{
	margin-top: 8px;
	margin-bottom: 16px;
	font-size: 20px;
}

.FirmwareUpdateDescription
{
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 32px;
}

.SoundDropdown
{
	width: 100%;
	vertical-align: middle;
    margin-top: 16px;
    margin-left: 16px;
    z-index: msgbox_contextmenu_zindex;
}


.SoundDropdownContainer
{
	flow-children: right;
	width: 100%;
    height: 64px;
	vertical-align: middle;
    margin-top: 16px;
    font-size: 28px;
	font-family: platformfont;
    color: #ffffff99;
}

.SoundDropdownContainer Label
{
	border-width: 0px;
	vertical-align: center;
}

DropDownMenu.DropDownMenuVisible
{
    max-height: 450px;
    width: 522px;
    z-index: msgbox_contextmenu_zindex;
}

.SoundDropdown DropDown
{
	width: 100%;
    height: 24px;
	padding-left: 8px;
	border-width: 1px;
	border-style: solid;
	border-radius: 1px;
    z-index: msgbox_contextmenu_zindex;
}

#TurnOnSoundContainer, #TurnOffSoundContainer, #HapticsSettingContainer, #RumbleSettingContainer
{
    visibility: collapse;
}

.SupportsSound #TurnOnSoundContainer,.SupportsSound #TurnOffSoundContainer
{
    visibility: visible;
}

.SupportsHaptics #HapticsSettingContainer
{
    visibility: visible;
}

.SupportsRumble #RumbleSettingContainer
{
    visibility: visible;
}

#GuideBrightnessSlider, #LEDColorSlider, #LEDSaturationSlider
{
	horizontal-align: right;
	width: 100%;
	height: 16px;
	margin-right: 10px;
	margin-left: 30px;
	vertical-align: middle;
}

#GuideBrightnessSlider:focus, #LEDSaturationSlider:focus
{
	background-color: gradient( linear, -0% 0%, 0% 100%, from( #f0f0f0 ), to( #c2c2c2 ) );
	box-shadow: box_shadow_on_color -2.5px -2.5px 8px 5px;
	border: 2px solid #fdfefef0;
	border-radius: 2px;
}

.DefaultLight.SupportsLEDColor #GuideBrightnessContainer, .DefaultLight.SupportsLEDColor #LEDSaturationContainer,
.DefaultLight.SupportsLEDColor #LEDColorContainer, .DefaultLight.SupportsLEDColor #LightColorIconContainer
{
    visibility: collapse;
}

.XinputSlotLight.SupportsLEDColor #GuideBrightnessContainer, .XinputSlotLight.SupportsLEDColor #LEDSaturationContainer,
.XinputSlotLight.SupportsLEDColor #LEDColorContainer, .XinputSlotLight.SupportsLEDColor #LightColorIconContainer
{
    visibility: collapse;
}

#GuideBrightnessContainer, #LEDSaturationContainer
{
	flow-children: right;
	width: 100%;
	margin-top: 12px;
	margin-bottom: 12px;
	font-size: 28px;
	font-family: platformfont;
	color: #ffffff99;
}

#LightColorIconContainer
{
	horizontal-align: right;
    margin-left: 650px;
    margin-bottom: -64px;
    background-color: black;
    border-radius: 20%;
    border: 8px solid #000000;
    width: 128px;
    height: 128px;
}

#LEDSaturationContainer,
#GuideBrightnessContainer
{
    visibility: collapse;
}

#LEDColorContainer
{
	flow-children: down;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
    visibility: collapse;
	font-size: 28px;
	font-family: platformfont;
	color: #ffffff99;
}

.SupportsLEDColor #LEDColorContainer,
.SupportsLEDColor #LEDSaturationContainer,
.SupportsLEDBrightness #GuideBrightnessContainer
{
    visibility: visible;
}

#LEDColorSlider
{
	margin-top: 20px;
	margin-right: 0px;
	margin-left: 0px;
}

#LEDColorSlider:focus
{
	//temporary until we decide how to visually handle focus
    background-color: #ffffff55;
	//box-shadow: box_shadow_on_color -5px -5px 8px 5px;
	border: 4px solid #fdfefef0;
	border-radius: 2px;
    border-style: none;
}

#LEDColorSlider #SliderTrack
{
    background-color: gradient( linear, 0% 0%, 100% 100%, color-stop( 0, #FF0000 ), 
    color-stop( .1666, #FF00FF ), color-stop( .333, #0000FF ), color-stop( .5, #00FFFF ), color-stop( .666, #00FF00 ),
    color-stop( .8333, #FFFF00 ), color-stop( 1, #FF0000 ) );
}

 #LEDColorSlider #SliderTrackProgress
 {
    background-color: #FFFFFF00;
 }

 #LEDColorSlider #SliderThumb
 {
	border: 1px solid #ffffffff;
	border-radius: 1px;
    background-color: #FFFFFFff;
    width: 16px;
	height: 14px;
    vertical-align: center;
    horizontal-align: center;
    z-index: 100;
    box-shadow: none;
 }

 #LEDColorSlider:focus #SliderThumb
 {
	border: 2.5px solid #ffffffff;
    background-color: #FFFFFF00;
    width: 16px;
    vertical-align: center;
    horizontal-align: center;
    box-shadow: none;
 }


#RegistrationSubDescription
{
	font-size: 20px;
	margin-bottom: 16px;
}

#ControllerNameEntry
{
	margin-left: 10px;	
	width: 510px;
	white-space: nowrap;
	height: 60px;
}

#MsgBoxButtons
{
	margin-top: 0px;
	width: 100%;
}

#ButtonCancel,
#ButtonCancelSelecting
{
	visibility: visible;
	horizontal-align: right;
	margin-left: 10px;
}

#ProgressBarContainer
{
	margin-top: 10px;
	margin-bottom: 20px;
}

#ProgressBar
{
	width: 750px;
	height: 12px;
	horizontal-align: center;
	background-color: bgwithgradientlogin;
}

.ProgressBarLeft
{
	background-color: gradient( linear, 0% 100%, 100% 0%, from( #00FFFF ), to( #CCFFFF ) );
}

#OtherAccountsContainer
{
	width: fit-children;
	height: fit-children;
	margin-bottom: 20px;
	margin-left: 80px;
}

.GameActionSelectButton
{
	margin-bottom: 10px;
	padding-left: 50px;
	padding-right: 50px;
}

#LoadingBlockout
{
	width: 100%;
	height: 100%;
	visibility: collapse;
	background-color: #00000047;
}

.PersonalizationActive #LoadingBlockout
{
	visibility: visible;
}