                                          

@define AlertNoticeScrollInTime: 0.1s;
@define StatusPanelHeight: 300px;
@define MaxAlertHeight: 116px;
@define VoicePanelYOffset: 182px;                                                            
@define AlertNoticeLifetime: 15.5s;
@define SoundAnimTime: .4s;

#EndOfMatch > CSGOHudVoiceStatus
{
	horizontal-align: left;
	vertical-align: bottom;
	ui-scale: 90%;
}

.StatusPanel
{
	width: 560px;
	height: StatusPanelHeight;
	overflow: clip;
	margin-bottom: 2px;
}

.AlertPanel
{
	width: 560px;
	max-height: MaxAlertHeight;
	transition-property: position;
	transition-duration: AlertNoticeScrollInTime;			
	transition-timing-function: linear;
}

.AlertBg
{
	width: 100%;
	height: 100%;
	                                                                                                                         
}

.AlertText
{
	font-family: Stratum2;
	width: 100%;
	text-align: left;
	vertical-align: bottom;
	color: white;
	font-size: 19px;
	font-weight: medium;
	letter-spacing: .2px;
	padding-left: 28px;
	padding-bottom: 0px;
	text-shadow-fast: 1px 1px #00000055;
    background-color: gradient( linear, 100% 0%, 0% 0%, from( #00000000 ), color-stop( 0.5, #000000A0 ) , color-stop(0.7, #000000A0), color-stop( 0.93, #000000A0 ), to( #00000000 ) );
}

.AlertPanel.AlertHidden 
{
	opacity: 0.0;
}

.AlertPanel.ShowAndHide 
{
	opacity: 0.0;
	animation-name: ShowAndHide;
	animation-duration: AlertNoticeLifetime;
	animation-timing-function: linear;
	animation-iteration-count: 1;
}

@keyframes 'ShowAndHide'
{
	0%
	{
		opacity: 0.0;
	}
	5%
	{
		opacity: 1.0;
	}
	90%
	{
		opacity: 1.0;
	}
	95%
	{
		opacity:0.0;
	}
}

.AlertPanel.QuickHide 
{
	opacity: 0.0;
	animation-name: QuickHide;
	animation-duration: AlertNoticeScrollInTime;
	animation-timing-function: linear;
	animation-iteration-count: 1;
}

@keyframes 'QuickHide'
{
	0%
	{
		opacity: 1.0;
	}
	100%
	{
		opacity:0.0;
	}
}

.VoicePanel
{
    transform: scale3d( 0.95, 0.95, 0.95 );
	position: 0px VoicePanelYOffset 0px;
	flow-children: none;
}

.VoiceNotice
{
	height: 22px;
	flow-children: right;
	transition-property: opacity;
	transition-duration: 0.2s;			
	transition-timing-function: linear;
	margin-left: 2px;
}

.VoiceNotice.Hidden
{
	opacity: 0.0;
	transition-duration: 0.3s;			
}

.SoundAnim
{
	vertical-align: center;
	flow-children: right;
}

.SpeakerIcon
{
	width: 24px;
	height: 24px;
	vertical-align: center;
	background-image: url( "file://{images}/icons/ui/sound_off.svg" );
	img-shadow: 1px 1px 1px #00000040;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% 100%;
	margin-left: 6px;
}

.SoundIcon1
{
	width: 6px;
	height: 22px;
	vertical-align: middle;
	horizontal-align: left;
	background-image: url( "file://{images}/icons/ui/sound_1.svg" );
	img-shadow: 1px 1px 1px #00000040;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% 100%;
	margin-left: -10px;
}

.SoundAnim.Looping .SoundIcon1
{
	animation-name: SoundIcon1Anim;
	animation-duration: SoundAnimTime;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.SoundIcon1 .SoundOff
{
	opacity: 0.0;
}

@keyframes 'SoundIcon1Anim'
{
	0%
	{
		opacity: 0.0;
	}
	40%
	{
		opacity: 1.0;
	}
	100%
	{
		opacity: 1.0;
	}
}


.SoundIcon2
{
	width: 6px;
	height: 22px;
	vertical-align: middle;
	background-image: url( "file://{images}/icons/ui/sound_2.svg" );
	img-shadow: 1px 1px 1px #00000040;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% 100%;
	margin-left: -4px;
}

.SoundAnim.Looping .SoundIcon2
{
	animation-name: SoundIcon2Anim;
	animation-duration: SoundAnimTime;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.SoundAnim.SoundOff .SoundIcon2,
.SoundAnim.SoundLow .SoundIcon2
{
	opacity: 0.0;
}

@keyframes 'SoundIcon2Anim'
{
	0%
	{
		opacity: 0.0;
	}
	40%
	{
		opacity: 0.0;
	}
	70%
	{
		opacity: 1.0;
	}
	100%
	{
		opacity: 1.0;
	}
}

.SoundIcon3
{
	width: 6px;
	height: 22px;
	vertical-align: middle;
	background-image: url( "file://{images}/icons/ui/sound_3.svg" );
	img-shadow: 1px 1px 1px #00000040;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% 100%;
	margin-left: -4px;
}

.SoundAnim.Looping .SoundIcon3
{
	animation-name: SoundIcon3Anim;
	animation-duration: SoundAnimTime;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.SoundAnim.SoundOff .SoundIcon3,
.SoundAnim.SoundLow .SoundIcon3,
.SoundAnim.SoundHigh .SoundIcon3
{
	opacity: 0.0;
}

@keyframes 'SoundIcon3Anim'
{
	0%
	{
		opacity: 0.0;
	}
	70%
	{
		opacity: 0.0;
	}
	100%
	{
		opacity: 1.0;
	}
}

.AvatarPanel
{
	                    
	vertical-align: middle;
}

.AvatarBG 
{
	width: 22px;
	height: 22px;
}

.VoiceNotice.DefaultAvatarCT .AvatarPanel .AvatarBG 
{
	background-image: url( "file://{images}/hud/voicestatus/iconct42.png" );
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% 100%;
}

.VoiceNotice.DefaultAvatarT .AvatarPanel .AvatarBG 
{
	background-image: url( "file://{images}/hud/voicestatus/icont42.png" );
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% 100%;
}

.SteamAvatar
{
	width: 22px;
	height: 22px;
	opacity: 0.0;
}

CSGOAvatarImage.SteamAvatar .AvatarImage
{
    padding: 0px;
    background-color: none;
    border-radius: 0px; 
}

.VoiceNotice.DynamicAvatar .AvatarPanel .SteamAvatar 
{
	opacity: 1.0;
}

.Skull
{
	width: 26px;
	height: 26px;
	background-image: url( "file://{images}/icons/ui/elimination.svg" );
	text-shadow-fast:1px 1px #000000;
	                   
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 90% 90%;
	vertical-align: middle;
	horizontal-align: center;
	opacity: 0.0;
}

.VoiceNotice.ShowSkull .AvatarPanel .Skull 
{
	width: 16px;
	height: 15px;
	opacity: 1.0;
}

.VoiceNotice.ShowSkull .AvatarPanel .SteamAvatar 
{
	wash-color: #6666669c;
}


.VoiceText
{
	
	width: 795px;
	text-align: left;
	vertical-align: center;
	margin-left: 4px;
	overflow: noclip;
	
	font-family: Stratum2;
	font-size: 20px;
	font-weight: medium;
	color: #7099DA;
	letter-spacing: 0px;
	text-shadow-fast: 1px 1px black;
}


.voice-disabled-indicator
{
	flow-children: right;
	width: fit-children;
	height: 24px;
	visibility: collapse;
	background-color: gradient( linear, 100% 0%, 0% 0%, from( #00000000 ), color-stop( 0.3, #00000055 ) , color-stop(0.7, #00000077), color-stop( 0.9, #00000055 ), to( #00000000 ) );
	vertical-align: bottom;
}

.voice-disabled .voice-disabled-indicator,
.clutch-mode .voice-disabled-indicator,
{
	visibility: visible;
}

.voice-disabled-indicator-label
{
	font-size: 12px;
	font-weight: lighter;
	color: white;
	font-family: Stratum2 Bold Monodigit, 'Arial Unicode MS';
}

.voice-disabled-indicator-icon
{
	opacity: 0.7;
}