@define delete_async_delay: 4.5s;
@define fade_in_out_time: 0.6s;
@define frame_margin_bottom: 50px;
@define frame_margin_top: 20px;

@define frame_margin_overflow_bottom: 40px;
@define frame_margin_overflow_top: 10px;

.NotificationRoot
{
	width: 625px;
	height: 190px;
	
	z-index: notification1_zindex;

	opacity: 0.0;
	transform: translatey( 250px );

	vertical-align: bottom;
	horizontal-align: right;

	flow-children: none;

	font-family: platformfont;
	font-size: 20px;
	color: #DDDDDDFF;
	font-weight: normal;
	
	pre-transform-scale2d: 1.0;

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

.NotificationRoot:hover
{
		pre-transform-scale2d: 1.03;
}


.NotificationVisible
{
	// Dont use 1.0 here, as having a composition layer is a perf win
	opacity: 0.99999;
	transform: translatey( 0px );
}

.NotificationVisible.ScreenSaverMode
{
	opacity: 0.0;
	transition-property: opacity, transform, pre-transform-scale2d, saturation, wash-color, blur;
	transition-duration: 1.4s, 0.3s !immediate;
	transition-timing-function: linear;
}

.NotificationFading
{
	opacity: 0.0;
	transform: translatey( 250px );
}

.NotificationFrame
{
	width: 100%;
	height: 100%;
	margin-left: 13px;
	margin-right: 90px;
	margin-bottom: frame_margin_bottom;
	margin-top: frame_margin_top;
	z-index: notification1_zindex;
	
	background-color: notification_bg;
	box-shadow: #00000044 -4px -4px 6px 8px;
}

.NotificationFrameConnected
{
	width: 100%;
	height: 100%;
	margin-left: 13px;
	margin-right: 90px;
	margin-bottom: frame_margin_bottom;
	margin-top: frame_margin_top;
	z-index: notification1_zindex;
	

	background-color: notification_bg;
	box-shadow: #00000044 -4px -4px 6px 8px;
	background-image: url( "{images}/settings/stream_connected.png" );
	background-repeat: no-repeat no-repeat;
	background-size: 100% 100%;
}

.NotificationFrameDisconnected
{
	width: 100%;
	height: 100%;
	margin-left: 13px;
	margin-right: 90px;
	margin-bottom: frame_margin_bottom;
	margin-top: frame_margin_top;
	z-index: notification1_zindex;
	

	background-color: notification_bg;
	box-shadow: #00000044 -4px -4px 6px 8px;
	background-image: url( "{images}/settings/stream_disconnected.png" );
	background-repeat: no-repeat no-repeat;
	background-size: 100% 100%;
}

.NotificationTitle 
{
	width: 100%;
	height: 34px; 
	font-weight: bold;
	z-index: notification2_zindex;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin-left: 153px;
	margin-right: 200px;
	margin-top: 48px;
}

.ThreeLineNotificationTitle
{
	width: 100%;
	height: 34px; 
	font-weight: light;
	z-index: notification2_zindex;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-transform: uppercase;
	margin-left: 153px;
	margin-right: 200px;
	margin-top: 38px;
	color: #F2F2F266;
}

.NotificationMessage
{
	width: 100%;
	height: 34px;
	z-index: notification2_zindex;
	white-space: nowrap;
	text-overflow: ellipsis;

	margin-right: 200px;
	margin-left: 153px;
	margin-top: 85px;
}

.NotificationMessageLine1
{
	width: 100%;
	height: 34px;
	z-index: notification2_zindex;
	white-space: nowrap;
	text-overflow: ellipsis;

	margin-right: 200px;
	margin-left: 153px;
	margin-top: 78px;
}

.NotificationMessageLine2
{
	width: 100%;
	height: 34px;
	z-index: notification2_zindex;
	white-space: nowrap;
	text-overflow: ellipsis;

	margin-right: 200px;
	margin-left: 153px;
	margin-top: 103px;
}


.ThreeLineNotificationMessageLine1
{
	width: 100%;
	height: 34px;
	z-index: notification2_zindex;
	white-space: nowrap;
	text-overflow: ellipsis;

	font-weight: bold;
	margin-right: 200px;
	margin-left: 153px;
	margin-top: 68px;
}

.ThreeLineNotificationMessageLine2
{
	width: 100%;
	height: 34px;
	z-index: notification2_zindex;
	white-space: nowrap;
	text-overflow: ellipsis;

	margin-right: 200px;
	margin-left: 153px;
	margin-top: 92px;
}

.NotificationOneLabelBody
{
	width: 100%;
	height: 70px;
	z-index: notification2_zindex;
	margin-right: 200px;
	margin-left: 153px;
	margin-top: 62px;
}

.NotificationTwoLabelBodyLineOne
{
	width: 100%;
	height: 70px;
	z-index: notification2_zindex;
	margin-right: 200px;
	margin-left: 153px;
	margin-top: 52px;
	opacity: 0.5;
}

.NotificationTwoLabelBodyLineTwo
{
	width: 100%;
	height: 70px;
	z-index: notification2_zindex;
	margin-right: 200px;
	margin-left: 153px;
	margin-top: 82px;
}

.NotificationLargeLabelBody
{
	width: 100%;
	height: 100%;
	z-index: notification2_zindex;
	margin-right: 116px;
	margin-left: 152px;
	margin-top: 42px;
}

.NotificationOneLabelBodyStreaming
{
	width: 100%;
	height: 70px;
	z-index: notification2_zindex;
	margin-right: 180px;
	margin-left: 133px;
	margin-top: 62px;
}

.NotificationTwoLabelBodyLineOneStreaming
{
    font-size: 20px;
	width: 100%;
	height: 70px;
	z-index: notification2_zindex;
	margin-right: 100px;
	margin-left: 113px;
	margin-top: 52px;
	opacity: 0.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.NotificationTwoLabelBodyLineTwoStreaming
{
    font-size: 20px;
	width: 100%;
	height: 70px;
	z-index: notification2_zindex;
	margin-right: 100px;
	margin-left: 113px;
	margin-top: 82px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.NotificationTwoLabelBodyLineOne.NotificationTwoLabelBodyLineOneWrap
{
    margin-top: 42px;
    margin-left: 113px;
    font-size: 18px;
    margin-right: 100px;
}

.NotificationTwoLabelBodyLineTwo.NotificationStyleTwoLabelBodyLineTwoWrap
{
    font-size: 18px;
    margin-top: 77px;
    margin-left: 113px;
    white-space: normal;
    margin-right: 100px;
}

.NotificationAvatarText
{
	font-size: 30px;
	vertical-align: center;
	horizontal-align: center;
	margin: 0px;
	
	z-index: notification2_zindex;
}


.HintButton
{
	horizontal-align: right;
	vertical-align: center;
	margin-right: 120px;
	margin-bottom: frame_margin_bottom;
	margin-top: frame_margin_top;
	z-index: notification2_zindex;
}

.SteamCog
{
	horizontal-align: left;
	margin-left: 24px;
	vertical-align: center;
	margin-top: frame_margin_top;
	margin-bottom: frame_margin_bottom;
	z-index: notification2_zindex;
}

.AvatarImage
{
	horizontal-align: left;
	vertical-align: center;
	margin-bottom: frame_margin_overflow_bottom;
	margin-top: frame_margin_overflow_top;
	z-index: notification2_zindex;
	margin-left: 11px;

	height: 128px;
	width: 128px;

	border-style: solid;
	border-width: 4px;
	border-radius: 0px;
	
	box-shadow: #00000044 -4px -4px 6px 8px;
}

.Online .NotificationTitle, .Online .NotificationMessage
{
	color: friendsonline_solid;
}

.Offline .NotificationTitle, .Offline .NotificationMessage
{
	color: friendsoffline_solid;
}

.InGame .NotificationTitle, .InGame .NotificationMessage
{
	color: friendsingame_solid;
}

.AchievementImage
{
	horizontal-align: left;
	vertical-align: center;
	margin-bottom: frame_margin_overflow_bottom;
	margin-top: frame_margin_overflow_top;
	z-index: notification2_zindex;
	margin-left: 11px;

	height: 128px;
	width: 128px;

	border-style: solid;
	border-width: 4px;
	border-radius: 0px;
	border-color: #404040e0;
}

.DataContainer
{
	flow-children: right;
	width: 100%;
	height: 100%; 
	margin-top: frame_margin_overflow_top;
	margin-left: 17px;
	margin-right: 200px;
	margin-bottom: frame_margin_overflow_bottom;
	z-index: notification2_zindex;
}

.ScreenshotImage
{
	margin-right: 12px;
	vertical-align: center;
	z-index: notification2_zindex;
}

.ScreenshotText
{
	vertical-align: center;
	z-index: notification2_zindex;
}

.BroadcastAvailableToWatch .NotificationTitle
{
	margin-top: 36px;
}

.BroadcastAvailableToWatch .NotificationMessage
{
	margin-right: 100px;
	margin-top: 68px;
	white-space: normal;
	height: 66px;
}

.ControllerBindingNotificationMessageLine1
{
	width: 100%;
	height: 70px;
	z-index: notification2_zindex;
	margin-right: 200px;
	margin-left: 40px;
	margin-top: 39px;
}


.ControllerBindingNotificationMessageLine2
{
	width: 100%;
	height: 70px;
	z-index: notification2_zindex;
	margin-right: 200px;
	margin-left: 40px;
	margin-top: 67px;
}


.ControllerBindingNotificationMessageLine3
{
	width: 100%;
	height: 70px;
	z-index: notification2_zindex;
	margin-right: 200px;
	margin-left: 40px;
	margin-top: 96px;
}

#ControllerImage
{
	horizontal-align: left;
	margin-left: 25px;
	vertical-align: center;
	margin-top: frame_margin_top;
	margin-bottom: frame_margin_bottom;
	z-index: notification2_zindex;
	width: 100px;
	height: 100px;
	background-repeat: no-repeat;
	background-size: 100px 100px;
}

#ControllerImage.controller_steamcontroller_gordon,
#ControllerImage.controller_steamcontroller_headcrab,
{
	background-image: url( "file://{images}/settings/steam_controller_icon_64.png" );
}

#ControllerImage.controller_ps4
{
	background-image: url( "file://{images}/controller_icon_ps4.png" );
}

#ControllerImage.controller_switch_pro,
#ControllerImage.controller_switch_pro_generic,
{
    background-image: url( "file://{images}/controller_icon_switch_pro.png" );
}

#ControllerImage.controller_ps3 
{
    background-image: url( "file://{images}/controller_icon_ps3.png" );
}

#ControllerImage.controller_xbox360
{
	background-image: url( "file://{images}/controller_icon_xbox_360.png" );
}

#ControllerImage.controller_xboxone
{
	background-image: url( "file://{images}/controller_icon_xbox_one.png" );
}

#ControllerImage.controller_generic,
#ControllerImage.controller_apple
{
	background-image: url( "file://{images}/controller_generic_nobattery.png" );
}

.ControllerActivatedNotification .NotificationTwoLabelBodyLineOne,
.ControllerActivatedNotification .NotificationTwoLabelBodyLineTwo
{
	margin-left: 133px;
	opacity: 1.0;
}

.ControllerActivatedNotification .NotificationTwoLabelBodyLineTwo
{
	visibility: collapse;
}
.ControllerActivatedNotification .NotificationTwoLabelBodyLineTwo.NonGuest
{
	visibility: visible;
	opacity: 0.5;
}
.ControllerActivatedNotification.HasGuest .NotificationTwoLabelBodyLineTwo.NonGuest
{
	visibility: collapse;
}
.ControllerActivatedNotification.HasGuest .NotificationTwoLabelBodyLineTwo.Guest
{
	visibility: visible;
	opacity: 0.5;
}

#OverlayDashboard #Notifications #AvatarImage
{
	height: 128px;
	width: 128px;

	border-style: solid;
	border-width: 4px;
	border-radisu: 0px;
	margin-right: 10px;
}

.NotificationRoot #GroupName
{
	visibility: collapse;
}

.NotificationRoot.GroupChat #GroupName
{
	visibility: visible;
	margin-top: 35px;
	color: white;
}

.NotificationRoot.GroupChat #FriendName
{
	margin-top: 65px;
}

.NotificationRoot.GroupChat .NotificationMessage
{
	margin-top: 95px;
}