                                                        

.guardianpanel {
	width: 450px; 
	height: fit-children;
  vertical-align:top;
  horizontal-align:left;
	visibility: collapse;
	padding: 10px 0px 10px 0px;
}

.guardianpanel.mission-active
{
	visibility: visible;
}

                      

                                                                   
                               
                                                                         
                                                                    
                                      
  

.guardianpanel.mission-segment1-complete,
.guardianpanel.mission-segment2-complete,
.guardianpanel.mission-segment3-complete,
.guardianpanel.mission-complete
{
	sound: "UI.ArmsRace.BecomeMatchLeader";
}

.guardianpanel.mission-complete Label
{
	                 
}

.complete-image
{
	visibility: collapse;
}

.guardianpanel.mission-complete .complete-image
{
	visibility: visible;
	width: 20px;
	height: 20px;
	vertical-align: center;
	margin-right: 8px;
	img-shadow: 0px 0px 1px 1.0 #000000;
}

                      

.guardianpanel-bg
{
	background-color: gradient( linear, 100% 0%, 0% 0%, from( #1f123100 ), color-stop( 0.5, #1f1231a6 ), color-stop( 0.85, #1f1231d9 ), to( #1f1231e6 ) );
	width: 100%; 
	height: 100%;
	                    
}

.tournament-active .guardianpanel-bg
{
    background-color: gradient( linear, 100% 0%, 0% 0%, from( #00000000 ), color-stop( 0.5, #000000CC ) , color-stop(0.6, #000000CC), color-stop( 0.9, #000000BB ), to( #00000000 ) );
}

.guardianpanel-content
{
	flow-children: down;
	horizontal-align: left;
	vertical-align: center;
	                      
}

.guardianpanel-header
{
	flow-children: right;
	vertical-align: center;
	                           
	                     
	padding-top: 4px;
	                      
	
}

Label.guardianpanel-header__text 
{
	padding-right: 12px;
	font-family: Stratum2, 'Arial Unicode MS';
	font-size: 14px;
	font-weight: bold;
	text-shadow-fast: 1px 1px #000000;
	letter-spacing: 0px;
	text-transform: uppercase;
}

.guardianpanel-body
{
	flow-children: right;
	width: fit-children;
	horizontal-align: left;
	padding: 1px 0px 4px -5px;
	                       
}

.victim_distancepanel-body
{
	flow-children: right;
	width: fit-children;
	horizontal-align: left;
	padding: -4px 0px 4px 0px;
	                       	
	opacity: 0;
	visibility: collapse;

}

.guardianpanel-body__image
{
	height: 26px; 
	horizontal-align: left;
	vertical-align: center;
	margin-right: 6px;
}

.guardianpanel-body__current-progress
{
	font-family: Stratum2, 'Arial Unicode MS';
	font-size: 22px;
	font-weight: bold;
	               
	vertical-align: center;
	horizontal-align: left;
	text-shadow-fast: 1px 1px #000000; 
	
}

.guardianpanel-body__goal
{
	font-family: Stratum2, 'Arial Unicode MS';
	font-size: 15px;
	font-weight: bold;
	               
	vertical-align: center; 
	text-shadow-fast: 1px 1px #000000;
}

.guardianpanel-body__victim-distance-label
{
	font-family: Stratum2, 'Arial Unicode MS';
	font-size: 16px;
	font-weight: medium;
	text-shadow-fast: 1px 1px #000000;
	letter-spacing: 0px;
	text-transform: uppercase;
	
}

.guardianpanel-body__victim-distance-meters-success
{
	font-family: Stratum2, 'Arial Unicode MS';
	font-size: 17px;
	color: #16ae16;
	font-weight: bold;
	text-shadow-fast: 1px 1px #000000;
	letter-spacing: .18px;
	text-transform: uppercase;
}

.guardianpanel-body__victim-distance-meters-failure
{
	font-family: Stratum2, 'Arial Unicode MS';
	font-size: 17px;
	font-weight: bold;
	color: red;
	text-shadow-fast: 1px 1px #000000;
	letter-spacing: .18px;
	text-transform: uppercase;
}

.guardianpanel-body__progress-stars 
{
	margin: 2px 0px;
}

#star0,#star1,#star2,.op-mission-card__mission__icon--filled-star
{
	visibility: collapse;
}

.missionstars1 #star0, .missionstars2 #star0, .missionstars3 #star0,
.missionstars2 #star1, .missionstars3 #star1, .missionstars3 #star2
{
	visibility: visible;
	padding-right: 4px;
}

.missioncomplete1 #star0 .op-mission-card__mission__icon--filled-star, .missioncomplete2 #star0 .op-mission-card__mission__icon--filled-star, .missioncomplete3 #star0 .op-mission-card__mission__icon--filled-star,
.missioncomplete2 #star1 .op-mission-card__mission__icon--filled-star, .missioncomplete3 #star1 .op-mission-card__mission__icon--filled-star, .missioncomplete3 #star2 .op-mission-card__mission__icon--filled-star
{
	visibility: visible;
}


@keyframes progress-made 
{
	0%
	{
		transform: scale3d( 1, 1, 1 );
		brightness: 1;
    }
    40%
    {
		transform: scale3d( 1.3, 1.3, 1 );
		brightness: 1.6;
    }
	100%
	{
		transform: scale3d( 1, 1, 1 );
		brightness: 1;
	}
}

.progress-made .guardianpanel-body__current-progress
{
    animation-name: progress-made;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}

@keyframes victim-killed 
{
	0%
	{
		transform: translateX( -400px );

		opacity: 0;
    }
	
	5%
    {
		transform: translateX( 0px );

		opacity: 1;
	}

	6%
	{
		transform: scale3d( 1, 1, 1 );
		brightness: 1;
	}
	
	9%
	{
		transform: scale3d( 1.2, 1.2, 1 );
		brightness: 1.8;
	}

	16%
	{
		transform: scale3d( 1, 1, 1 );
		brightness: 1;
	}

	95%
	{
		transform: translateX( 0px );

		opacity: 1;
	}
	
	99%
	{
		transform: translateX( -400px );

		opacity: 0;
	}
}

.victim-killed .victim_distancepanel-body
{
    animation-name: victim-killed;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}



@keyframes hide-for-competitive 
{
	0%
	{
		opacity: 0.2;
    }
    5%
    {
		opacity: 1.0;
    }
    80%
    {
		opacity: 1.0;
    }
	100%
	{
		opacity: 0;
	}
}
  
                                          
                                          
 
                                         
                            
                                           
		                             

	           
 
  

                                                                    
.coopmission
{
	visibility: collapse;
}

.guardianpanel-header .InlineImage
{
	width: 24px;
	height: 24px;	
}

.Icon {
	width: 52px;
	height: 52px;
	vertical-align: center;
	margin: 0px 8px 0px 8px;
	padding: 4px 0px 4px 0px;
	img-shadow: 0px 0px 1px 1.0 #000000;
}