/* styles that most popup dialogs should use */

.PopupPanel
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #272d2eee ), to( #131617ee ) );
    border: 1px solid #5e6869;
    
	padding-top: 32px;
    padding-bottom: 32px;
	padding-right: 64px;
    padding-left: 64px;
	
	min-width: 450px;
	
    vertical-align: middle;
    horizontal-align: center;
    opacity: 1.0;
	box-shadow: black -4px -4px 8px 8px;
	//#FFFFFF66 -4px -4px 8px 8px
			
	animation-name: links-and-more-button-focus; 
	animation-duration: 0.6s;
	animation-delay: 0.0s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	animation-direction: normal;

    transition-property: transform, pre-transform-scale2d, opacity, background-color, height;
	transition-duration: 0.2s;
	transition-timing-function: ease-in;
	transition-delay: 0.0s;

    flow-children: down;
}

.PopupPanel.WideMode
{
	min-width: 800px;
}

.PopupPanel.Hidden
{
    opacity: 0.0;
    pre-transform-scale2d: 1.25;
	transform: translateY( -10px );
	sound: "ui_custom_lobby_dialog_slide";
}

.PopupTitle
{
    font-size: 30px;
	//font-variant: small-caps;
    font-weight: thin;
    color: #afb4b4;
    //margin-top: 15px;
	margin-bottom: 15px;
    horizontal-align: center;
}

.PopupDescription Label
{
	font-size: 20px;
	letter-spacing: 0px;
}

.PopupButtonRow
{
    flow-children: right;
    horizontal-align: center;
    margin-top: 25px;
}


//
// Animations
//
@keyframes 'links-and-more-button-focus'
{
	from
	{
		background-color: gradient( linear, 0% 0%, 0% 100%, from( #a9c8daee ), to( #000000ee ) ); 
	}

	50%
	{
		background-color: gradient( linear, 0% 0%, 0% 100%, from( #272d2eee ), to( #131617ee ) ); 
	}

	to
	{
		background-color: gradient( linear, 0% 0%, 0% 100%, from( #272d2eee ), to( #131617ee ) ); 
	}
}

#ReplayPendingPopup #CancelButton
{
	margin-top: 32px;
}