.content-navbar__tabs RadioButton
{
	margin: 0px 20px 0px 0px;
}

.MainMenuSecondary
{
	flow-children: right-wrap;
	                    
}

.MainMenuSecondary RadioButton
{
	               
	min-width: 70px;
	                      
	                           
}

.MainMenuSecondary RadioButton Label
{
	padding: 0px 12px;
}

Label.Orange
{
	color: #ffa64d;
}

.ControlsLib
{
	width: 100%;
	height: 100%;
	opacity: 0.0;
	padding-right: 96px;

	transition-property: opacity;
	transition-duration: .25s;
	transition-timing-function: linear;
}

.ControlsLib.Active,
{
	opacity: 1.0;
	blur: gaussian( 0 );

	transition-property: opacity;
	transition-duration: .25s;
	transition-timing-function: linear;
}

.ControlsLib-Background
{
    width: 100%;
	height: 100%;
	box-shadow: #000000CC -5px -5px 10px 10px;
	opacity: 0.8;
	background-color: #000000FF;
	border-radius: 1px;
}


.FillParentFlow
{
	width: fill-parent-flow( 1.0 );
}

.Tab
{
	opacity: 0.0;
	pre-transform-scale2d: 0.975;
	blur: gaussian( 5 );

	transition-property: pre-transform-scale2d, opacity, blur;
	transition-duration: 0.3s;
	transition-timing-function: linear;
}

.Tab.Active
{
	opacity: 1.0;
	pre-transform-scale2d: 1;
	blur: gaussian( 0 );

	transition-property: pre-transform-scale2d, opacity, blur;
	transition-duration: 0.3s;
	transition-timing-function: linear;
	                        
}

#VideoTrailerPlayer
{
	width: 360px;
	height: 640px;
	margin: 10px;
	overflow: noclip;
}

#VideoHeroPlayer
{
	width: 360px;
	height: 640px;
	margin: 10px;
	overflow: noclip;
}

#VideoBackground
{
	width: 360px;
	height: 640px;
	margin: 10px;
	overflow: noclip;
	
	background-color: black;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;
}

#ControlsLibVideo.Active #VideoBackground
{
	background-image: url( "file://{resources}/videos/npc_dota_hero_abaddon.webm" );
}

#CSGOBlogPanel
{
	width: 100%;
	height: 88%;
	margin: 16px;
	horizontal-align: center;
	vertical-align: bottom;
}

.BlogBackground
{
	                       
	width: 100%;
	height: 100%;
	
	border-radius: 6px;
	opacity: 0.5;
	background-color: black;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;
}

.BlogURL
{
	                     
	width: 90%;
	height: 32px;
	margin: 16px;
	padding: 6px;
	
	border: 1px solid #4d7cb0;
	opacity: 1.0;
	background-color: black;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;
}

.BrowserHeaderContainerPosRight
{
	horizontal-align: right;
	flow-children: left;
	height: 100%;
	margin: 16px;
}

.BrowserBtn
{

	padding-left: 20px;

	brightness: 2;
	background-color: gradient( radial, 50% 50%, 0% 0%, 0% 0%, from( #ffffff00 ), to( #ffffff00 ));
	transition-property: background-color, brightness, border;
	transition-duration: .1s;
	transition-timing-function: linear;
}

.BrowserBtn:hover
{
	brightness: 4;
	transition-property: background-color, brightness;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

#ControlsLibScenePanel
{
    width: 100%;
	height: 100%;
	flow-children: right;
}

#ControlsLibCharacterPanel
{
    width: 100%;
	height: 100%;
	                       
}

@keyframes 'ratio-loop'
{
	0%
	{
		transform: translateX(0px) translateY(0px) rotateY(-40deg);
	}


	50%
	{
		transform: translateX(0px) translateY(0px) rotateY(40deg);
	}

	100%
	{
		transform: translateX(0px) translateY(0px) rotateY(-40deg);
	}
}

@keyframes 'wash-pulse'
{
	0%
	{
		wash-color: #000000ff;
	}

	50%
	{
		wash-color: #ffffffff;
	}

	100%
	{
		wash-color: #000000ff;
	}
}

@keyframes 'blur-pulse'
{
	0%
	{
		blur: gaussian( 0 );
	}

	50%
	{
		blur: gaussian( 8 );
	}

	100%
	{
		blur: gaussian( 0 );
	}
}

@keyframes 'saturation-pulse'
{
	0%
	{
		saturation: 1.0;
	}

	50%
	{
		saturation: 0.0;
	}

	100%
	{
		saturation: 1.0;
	}
}

.ItemPreviewPanelLarge 
{ 
	width: 420px;
	height: 420px;
}

.ItemPreviewPanelLargeWide 
{ 
	width: 512px;
	height: 364px;
}

.ItemPreviewPanelLargeWidePulseWash 
{ 
	width: 512px;
	height: 364px;

	animation-name: wash-pulse; 
	animation-duration: 3.0s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.ItemPreviewPanelLargeWidePulseBlur 
{ 
	width: 512px;
	height: 364px;

	animation-name: blur-pulse; 
	animation-duration: 2.0s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.ItemPreviewPanelLargeWidePulseSaturation
{ 
	width: 512px;
	height: 364px;

	animation-name: saturation-pulse; 
	animation-duration: 1.5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.ItemPreviewPanelSmall
{ 
	width: 256px;
	height: 256px;
}

.ItemPreviewPanelLargeSpinningBorder
{ 
	width: 384px;
	height: 384px;

	transform: translateX(0px) translateY(0px) rotateY(0deg);
	border: 0.5px solid white;
	border-radius: 32px;
	box-shadow: inset #00000099 14px 14px 8px 9px;
	animation-name: ratio-loop; 
	animation-duration: 2.8s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;	

	blur: gaussian( 0 );
}

.ItemPreviewPanelPlayerLarge
{ 
	                          
	width: 640px;
	height: 1500px;
	blur: gaussian( 0 );
	saturation: 1.0;
}

.ItemPreviewPanelForBuildingInventoryImages
{ 
	horizontal-align: middle;
	width: 880px;
	height: 880px;
	border: 1.0px solid white;
	blur: gaussian( 0 );
	saturation: 1.0;
}

#ItemPreviewPanelForBuildingInventoryImages__SafeFrame
{
	width: 100%;
	height: width-percentage(75%);
	border: 4.0px solid red;
}

#Player1
{
    transform: translateX(0px);
    
	                                                        
	                          
	                    
	                  
}

#Player2
{
    transform: translateX(250px) translateY(0px);
    
	                                                                        
	                          
	                  
	                  
}

#Player3
{
    transform: translateX(500px) translateY(0px);
}


#Player4
{
    transform: translateX(750px) translateY(0px);
    
	                                                                        
	                          
	                  
	                  
}

#Player5
{
    transform: translateX(1000px) translateY(0px);
    
	                                                                           
	                          
	                    
	                  
}

.TestCanvas
{ 
	                          
	width: 800px;
	height: 800px;
}

.SoundBtn
{
	margin: 8px;
	height: 48px;
	padding: 0px 16px; 
	horizontal-align: left;
	vertical-align: middle;
	border-radius: 3px;
	brightness: 1;
	background-color: #2a6b8f;
}

.SoundBtn Label
{
	horizontal-align: center;
	vertical-align: middle;
}

.SoundBtn:hover
{
	brightness: 1.5;
}

.SoundOnEnterHover:hover
{
	sound: "UIPanorama.ui_button_rollover";
}

.SoundOnLeaveHover:hover
{
	sound-out: "UIPanorama.ui_button_rollover";
}

#DialogVarParentPanel
{
	margin: 10px;
	padding: 10px;
	border-radius: 3px;
	background-color: #2E4053;
}

#DialogVarChildPanel
{
	margin: 20px;
	padding: 10px;
	border-radius: 3px;
	background-color: #5D6D7E;
}

#ParentDialogVarTextEntry, #ChildDialogVarTextEntry
{
	margin-top: 10px;
	border: 1px solid #ABB2B9;
	border-radius: 3px;
}

.keytest-header
{
	font-size: 22px;
	font-weight: bold;
	color: yellow;
}

#KeyTests Label
{
	visibility: collapse;
	padding-right: 10px;
}

#KeyTests Label.KeyTextActive
{
	visibility: visible;
}

.TextSpan { color: red; }

.TestTextEntry
{
	width: 800px;
	border: 1px solid #444444FF;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #111111FF ), to( #222222FF ) );
	color: white;
	font-size: 20px;
	text-overflow: clip;
	white-space: nowrap;
}

.scaled-text-scale3d
{
	width: 800px;
	font-size: 20px;
	transform: scale3d( 1.5, 1.5, 1 );
	color: white;
	padding: 18px 10px;
	text-align: center;
}

.scaled-text-uiscale
{
	width: 800px;
	font-size: 20px;
	ui-scale: 150%;
	color: white;
	padding: 18px 10px;
	text-align: center;
}

.text-transform-none 
{
	font-size: 18px;
	color: white;
	text-transform: none;
	overflow: noclip;
}

.text-transform-upper 
{
	font-size: 18px;
	color: white;
	text-transform: uppercase;
	overflow: noclip;
}

.text-transform-lower 
{
	font-size: 18px;
	color: white;
	text-transform: lowercase;
	overflow: noclip;
}

.dialogvar-case-test 
{
	font-size: 20px;
	color: white;
}

.icon-test
{
	margin-top: 10px;
    flow-children: down;
	margin-right: 20px;
}

#icon-test1
{
	margin-left: 10px;
}

.icon-test-header
{
	font-size: 30px;
	text-align: center;
	width: 400px;
	padding: 20px;
}

.svgtest1
{	
	padding: 10px;
}

.svgtest2
{	
	margin: 10px;
}

.svgtest3
{	
	 img-shadow: 0px 0px 6px 4.0 #f500ff;
}


#icon-test2
{
	margin-left: 10px;
}

.TestCarouselItem.Focused
{
	opacity: 1.0;
	transform: translatex(0px);
}

.TestCarouselItem.LeftOfFocus1,
.TestCarouselItem.LeftOfFocus2,
.TestCarouselItem.LeftOfFocus3,
.TestCarouselItem.LeftOfFocus4
{		
	opacity: 0.0;
	transform: translatex( -400px );
}

.TestCarouselItem.RightOfFocus1,
.TestCarouselItem.RightOfFocus2,
.TestCarouselItem.RightOfFocus3,
.TestCarouselItem.RightOfFocus4
{		
	opacity: 0.0;
	transform: translatex( 400px );
}

#MyBlendBlurFitParent
{
	blur: fastgaussian( 0, 0, 0);
}

#BlurTest1
{
	width: 500px;
	height: 600px;
	position: 100px 50px 0px;
	background-color: #ffffff01;
    vertical-align: top;
	opacity: 1.0;
	font-size: 24px;
	color: white; 
	padding: 10px 24px;


}


@keyframes 'blur-fade-out'
{
    0%
    {
        blur: fastanimgaussian( 5, 5, 5 );
    }
    100%
    {
        blur: fastanimgaussian( 0, 0, 0);
    }

}

@keyframes 'blur-fade-in'
{
    0%
    {
        blur: fastanimgaussian( 0, 0, 0 );
    }
    100%
    {
        blur: fastanimgaussian( 5, 5, 5);
    }

}

.TheBlurAnimIn
{
	animation-name: blur-fade-in;
	animation-timing-function: ease-in-out;
	animation-duration: 2s;
    animation-fill-mode: both;

}

.TheBlurAnimOut
{
	animation-name: blur-fade-out;
	animation-timing-function: ease-in-out;
	animation-duration: 2s;
    animation-fill-mode: both;

}



#BlurTest1.NewPositionAndSize
{
	width: 30%;
	height: 30%;
	position: 150px 200px 0px;
}

#BlurTest2
{
	width: 400px;
	height: 300px;
	position: 400px 200px 0px;
	background-color: green;
	opacity: 0.15;
	font-size: 24px;
	color: white; 
	padding: 10px 24px;
	animation-name: ChangePositionAndSize;
	animation-timing-function: ease-in-out;
	animation-duration: 4s;
	animation-iteration-count: infinite;   	
}

@keyframes 'ChangePositionAndSize'
{
	0%
	{
		position: 400px 200px 0px;
		width: 400px;
		height: 300px;
	}
	50%
	{
		position: 200px 300px 0px;
		width: 300px;
		height: 500px;
	}	
	100%
	{
		position: 400px 200px 0px;
		width: 400px;
		height: 300px;
	}
}

#BlurTest3
{
	width: 20%;
	height: 20%;
	position: 700px 0px 0px;
	background-color: blue;
	opacity: 1.0;
	font-size: 24px;
	color: white; 
	padding: 10px 24px;
	transform: translateX( 150px ) translateY( 15px ) rotateZ( 45deg );
	border-radius: 50%;
}

#BlurTest4
{
	width: 20%;
	height: 20%;
	position: 1200px 100px 0px;
	background-color: yellow;
	opacity: 0.15;
	font-size: 24px;
	color: black; 
	padding: 10px 24px;
	transform: translateX( 100px ) translateY( 100px ) rotateZ( 0deg );
	animation-name: AnimateTransform;
	animation-timing-function: ease-in-out;
	animation-duration: 4s;
	animation-iteration-count: infinite;   	
}

@keyframes 'AnimateTransform'
{
	0%
	{
		transform: translateX( 100px ) translateY( 100px ) rotateZ( 0deg ) scaleX(1.0) scaleY(1.0);
	}
	50%
	{
		transform: translateX( 200px ) translateY( 200px ) rotateZ( 90deg ) scaleX(1.5) scaleY(0.5);
	}	
	100%
	{
		transform: translateX( 100px ) translateY( 100px ) rotateZ( 0deg ) scaleX(1.0) scaleY(1.0);
	}
}

#MixBlendScreen1
{
	width: 100px;
	height: 100px;
	position: 750px 500px 0px;
	background-color: #ff0000ff;
	opacity: 1.0;
	-s2-mix-blend-mode: screen;
}

#MixBlendScreen2
{
	width: 100px;
	height: 100px;
	position: 810px 500px 0px;
	background-color: #00ff00ff;
	opacity: 1.0;
	-s2-mix-blend-mode: screen;
}

#MixBlendScreen3
{
	width: 100px;
	height: 100px;
	position: 775px 550px 0px;
	background-color: #0000ffff;
	opacity: 1.0;
	-s2-mix-blend-mode: screen;
}

#MixBlendMultiply1
{
	width: 100px;
	height: 100px;
	position: 450px 550px 0px;
	background-color: #ff00ffff;
	opacity: 1.0;
	-s2-mix-blend-mode: multiply;
}

#MixBlendMultiply2
{
	width: 100px;
	height: 100px;
	position: 500px 550px 0px;
	background-color: #ffff00ff;
	opacity: 1.0;
	-s2-mix-blend-mode: multiply;
}

#MixBlendMultiply3
{
	width: 100px;
	height: 100px;
	position: 475px 600px 0px;
	background-color: #00ffffff;
	opacity: 1.0;
	-s2-mix-blend-mode: multiply;
}

.TestCssNotSelector
{
	background-color: lightgreen;
	border: 2px solid lightgreen;
	margin: 5px;
}

.TestCssNotSelector.CSSSelectorActive
{
	border: 2px solid red;
}

.TestCssNotSelector Label
{
	text-transform: none;
	background-color: #2a6b8f;
	color: red;
	font-weight: bold;
	padding: 2px;
	margin: 10px;
	font-family: Courier New,Courier;
}

.TestCssNotSelector.CSSSelectorActive Label
{
	color: orange;
}

.TestCssNotSelector:not(:hover) Label
{
	color: white;
}

.TestCssNotSelector2
{
	background-color: lightgreen;
	border: 2px solid lightgreen;
	margin: 5px;
}

.TestCssNotSelector2.CSSSelectorActive
{
	border: 2px solid red;
}

.TestCssNotSelector2 Label
{
	text-transform: none;
	background-color: #2a6b8f;
	color: red;
	font-weight: bold;
	padding: 2px;
	margin: 10px;
	font-family: Courier New,Courier;
}

.TestCssNotSelector2.CSSSelectorActive Label
{
	color: orange;
}

.TestCssNotSelector2:hover:not(.CSSSelectorActive) Label
{
	text-transform: none;
	background-color: #2a6b8f;
	color: white;
	font-weight: bold;
	padding: 2px;
	margin: 10px;
}

.bg-test-no-alpha {
	width:200px;
	height:200px;

	border: 1px solid black;

	margin: 20px;

	background-image: url( "file://{images}/control_icons/bg1.png" );
	background-img-opacity: 0.5;

	transition-property: background-img-opacity;
	transition-duration: 2s;
	transition-timing-function: linear;

}

.bg-test-no-alpha:hover {
	background-img-opacity: 0.01;
}


.bg-test-alpha {
	width:200px;
	height:200px;

	border: 1px solid black;

	margin: 20px;

}

.bg-test-alpha-ignored{
	width:200px;
	height:200px;

	border: 1px solid black;

	margin: 20px;

	background-image: url( "file://{images}/control_icons/bg1-alpha.png" );
	background-img-opacity: 0.5;

}

#alphaedge_bk
{
	background-image: url("file://{images}/donotship/AlphaEdge.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-img-opacity: 0.01;
	width : 150px;
	height : 150px;
	
	text-align: center;
	margin: 20px;
	border: 1px solid black;

	animation-name: ChangeOp;
	animation-timing-function: ease-in-out;
	animation-duration: 4s;
	animation-iteration-count: infinite;   	
}

@keyframes 'ChangeOp'
{
	0%
	{
		background-img-opacity: 0.01;
	}
	50%
	{
		background-img-opacity: 0.99;
	}	
	100%
	{
		background-img-opacity: 0.01;
	}
}

.ControlsLibBugsBlue
{
	padding: 10px;
	margin-left: 20px;
	margin-bottom: 20px;
	background-color:lightblue;
	flow-children: right;
}

.ControlsLibGradient2Stops
{
	width: 200px;
	height: 100px;
	                                                                                                                 
	background-color: gradient( linear, 0% 0%, 100% 0%, from( rgba(0, 255, 0, 1.0) ), to( rgba(255, 0, 0, 1.0) ) );
	border-top: 2px solid white;
	border-bottom: 2px solid white;
}

.ControlsLibGradient3Stops
{
	width: 200px;
	height: 100px;
	                                                                                                                                                           
	background-color: gradient( linear, 0% 0%, 100% 0%, from( rgba(0, 255, 0, 1.0) ), color-stop( 0.999, rgba(255, 0, 0, 1.0) ), to( rgba(255, 0, 0, 1.0) ) );
	border-top: 2px solid white;
	border-bottom: 2px solid white;
}

.ControlsLibSolidFill
{
	width: 200px;
	height: 100px;
	                                         
	background-color: rgba(255, 0, 0, 1.0);
	border-top: 2px solid green;
	border-bottom: 2px solid green;
}


.ControlLibBugs__Parent
{
	width: 400px;
	height: 300px;
	border: 2px solid blue;
	padding: 1px;
}

.ControlLibBugs__Container
{
	border: 2px solid red;
	flow-children: down;
	horizontal-align: right;
	padding: 1px;
}

.ControlLibBugs__Container--Bottom
{
	vertical-align: bottom;
}

.ControlLibBugs__Row
{
	width: 300px;
	height: 50px;
	border: 2px solid yellow;
	background-color: rgba(255, 255, 0, 0.22);
	margin-bottom: 1px;
	transform: translateX( 0px );
	opacity: 1.0;

	transition-property: height, transform, opacity;
	transition-duration: 1.0s, 1.0s, 0.5s;
	transition-timing-function: linear, linear, ease-in-out;
	transition-delay: 0.5s, 0.0s, 0.0s;
}

.ControlLibBugs__Row--Hidden
{
	height: 0px;
	opacity: 0.0;
	transform: translateX( 300px );

	transition-delay: 0.0s, 0.5s, 0.5s;
}

.ControlLibBugs__ReadyParent
{
	width: 300px;
	height: 300px;
	border: 2px solid red;
	background-color: rgb(190, 190, 190);
}

.ControlLibBugs__ReadyChild
{
	width: 100px;
	height: 100px;
	margin: 15px;
	border: 2px solid red;
	background-color: rgb(255, 153, 0);
}

.ControlLibBugs__ReadyChild--Ready
{
	border: 2px solid rgb(0, 255, 0);
	background-repeat: no-repeat;
	background-position: 0% 50%;
	background-size: 100%;
	background-image: url( "file://{images}/operations/op9/op9_sticker_pack_01_thumbnail.png" );
}


.RSSFeed
{
	flow-children: right-wrap;
	horizontal-align: center;
	padding: 10px;
}

.RSSFeed__Item
{
	width: 640px;
	margin: 5px;
	border-radius: 3px;
	background-color: gradient( linear, 0% 0%, 0% 120%, from( #CFDAE0 ), to( #88959A ));
	box-shadow: fill #000000aa 0px 0px 8px 4px;

	flow-children: down;

	transition-property: transform, box-shadow, brightness;
	transition-duration: 0.1s;
    transition-timing-function: ease-in-out;
}

.RSSFeed__Item:hover
{
	brightness:1.5;
	box-shadow:  fill #000000aa 4px 4px 8px 4px;
	transform: translate3d( -4px, -4px, 0px );
}

.RSSFeed__ItemTitle
{
	width: 100%;
	background-color:#00000020;
	color: #3E3E3E;
	padding: 5px;
	font-size: 22px;
	font-weight: bold;
}

.RSSFeed__ItemDesc
{
	font-size: 15px;
	padding: 5px;
	color: #3E3E3E;
}

.RSSFeed__ItemDate
{
	font-size: 11px;
	horizontal-align: right;
	color: #3E3E3E;
}

.RSSFeed__ItemImage
{
	height: 100px;
	padding: 5px;
}

.TestCssPerspectiveParent
{
	perspective: 100px;
	perspective-origin : 25% 50%;
	transform-origin: 50% 0%;
	width: 128px;
	height: 128px;
	border: 1px solid white;
}


.TestCssPerspectiveChild
{
	transform-origin: 50% 0%;
	width: 100px;
	height: 100px;
	transform: rotateX( 45deg );
	background-color: red;
	horizontal-align: center;
	vertical-align: center;
}