.popup-decodable-blur-anim
{
	transition-property: blur, opacity;
	transition-duration: 1s;
	transition-timing-function: ease-in-out;
}

#PopUpInspectFullScreenHostContainer.solidbkgnd
{
	background-color: #000000EE;
}

.popup-decodable-lootlist-container
{
	width: 100%;
	flow-children: down;
	max-height: 620px;
	vertical-align: bottom;
	padding: 0px 64px 80px 64px;
	transform: translateY( 0% );
	visibility: visible;

	transition-property: transform;
	transition-duration: .5s;
	transition-timing-function: ease-in-out;
}

.popup-decodable-lootlist-container.hidden
{
	transform: translateY( 100% );
	visibility: visible;

	transition-property: transform;
	transition-duration: .5s;
	transition-timing-function: ease-in-out;
}

.popup-decodable-lootlist
{
	width: 100%;
	flow-children: right-wrap;
	overflow: squish scroll;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.popup-decodable-lootlist-single-reward
{
	horizontal-align: left;
	padding-bottom: 8px;
	font-size: 18px;
}

.popup-decodable-lootlist-multi-reward-icon
{
	wash-color: #4ab0e7;
	margin-right: 8px;
}

.popup-decodable-lootlist-multi-reward
{
	horizontal-align: center;
	font-size: 20px;
	color: #4ab0e7;
	vertical-align: center;
	transform: translateY(-1px);
}

.popup-browse-btn
{
	horizontal-align: right;
	padding: 10px;
	margin-bottom: 4px;
	border-radius: 3px;
	background-color: gradient( linear, 100% 0%, 0% 0%, from( #00000000), color-stop( 1, #00000000 ), to( #00000010 ) );

	transition-property: background-color;
	transition-duration: .3s;
	transition-timing-function: ease-in-out;
}

.popup-browse-btn:hover
{
	background-color: gradient( linear, 100% 0%, 0% 0%, from( #00000000), color-stop( 0, #00000070 ), to( #00000070 ) );
	transition-property: background-color;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

                                                                                                        
                     
                                                                                                        
.popup-decodable-opening
{
	transform: translateY( 0% );
	height: 100%;
	width: height-percentage( 133% );
	horizontal-align: center;
	brightness: 1;
	background-color: gradient(radial, 50% 50%, 0px 0px, 50% 50%, from( rgba(255, 255, 255, 0.0)), to( rgba(255, 255, 255, 0.0)) );
}

.popup-decodable-opening.hidden
{
	opacity: 0;
	transform: scaleY( 0 );
	visibility: visible;
	background-color: gradient(radial, 50% 50%, 0px 0px, 50% 50%, from( white ), to( rgba(255, 255, 255, 0.0)) );

	transition-property: background-color, transform, opacity;
	transition-duration: .25s, .25s, 0.1s;
	transition-timing-function: ease-in;
}

.popup-decodable-opening__list
{
	height: 100%;
	width: 100%;
	horizontal-align: center;
	vertical-align: center;
	opacity-mask: url( "file://{images}/masks/case-opening-outer.png" );
}

.popup-decodable-opening__list--magnified
{
	opacity-mask: url( "file://{images}/masks/case-opening.png" );
}

.popup-decodable-opening-items-container
{
	flow-children: left;
	overflow: scroll clip;
	horizontal-align: center;
	vertical-align: center;
}

.popup-decodable-opening-items-container HorizontalScrollBar
{
	opacity: 0;

	transition-property: transform;
	transition-duration: 6s;
	transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.popup-decodable-scroll-item
{
	width: 320px;
	height: width-percentage( 70% );
	background-color: gradient(radial, 50% 50%, 0px 0px, 50% 50%, from( rgba(145, 145, 145, 0.75)), to( rgba(100, 100, 110, 0.75)) );

	vertical-align: center;
	margin: 0px 10px;
	brightness: .5;
	blur: fastgaussian( 3, 3, 1 );
}

.popup-decodable-scroll-item.magnified
{
	width: 360px;
	height: width-percentage( 75% );
	margin: 0px 10px;
	brightness: 1;
	blur: fastgaussian( 0, 0, 0 );
	border: 1px solid rgb(68, 68, 68);
	border-radius: 2px;
}

.popup-decodable-scroll-item-rarity
{
	height: 12px;
	width: 100%;
	background-color: gradient(radial, 50% 50%, 0px 0px, 50% 120%, from( white ), to( rgb(200, 200, 200 )) );
	
	vertical-align: bottom;
	box-shadow: rgba(65, 65, 65, .25) -2px -2px 4px 4px;
}

.popup-decodable-scroll-item-tint
{
	height: 40%;
	width: 100%;
	background-color: gradient( linear, 0% 100%, 0% 0%, from( rgb(145, 145, 145), to(rgba(255, 255, 255, 0) ) );
	vertical-align: bottom;
}

.popup-decodable-center-bar
{
	width: 4px;
	height: 268px;
	horizontal-align: center;
	vertical-align: center;
	background-color: warningColor;
	box-shadow: rgba(65, 65, 65, .25) -2px -2px 4px 4px;
}

.popup-decodable-wash-color-unusual
{
	wash-color: color-rarity-unusual;
}

.popup-decodable-wash-color-unusual-bg
{
	wash-color: color-rarity-unusual;
	background-image: url( "file://{resources}/videos/acknowledge540p.webm" );
	background-repeat: no-repeat;
	background-size: 200% 200%;
	background-position: 50% 50%;
}

                                                                                                        
               
                                                                                                        
.popup-decodable-countdown-text
{
	transform: scaley( 1 ) translateY( 0% );

	text-align: center;
	horizontal-align: center;
	vertical-align: center;
	font-size: 200px;

	color: gradient( linear, 0% 100%, 0% 0%, from( rgb(145, 145, 145), to(rgba(255, 255, 255, 1) ) );
	text-shadow:2px 2px 2px #000000;
}

.popup-countdown-anim
{
	animation-name: unlock-countdown-anim;
	animation-duration: 0.75s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
}

@keyframes 'unlock-countdown-anim'
{
	0%
	{
		transform: scale3d( 3, 3, 3 );
		opacity: 0;
		blur: gaussian( 4, 4, 5 );
	}

	100%
	{
		
		transform: scale3d( 1, 1, 1 );
		blur: gaussian( 4, 4, 0 );
		opacity: 1;
	}
}

.popup-countdown-timer-circle 
{
    width: 700px;
    height: 700px;
    border: 7px solid rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	horizontal-align: center;
	vertical-align: center;
	background-color: rgba(255, 255, 255, 0.08);
}

.popup-countdown-timer-circle-anim
{
	animation-name: countdown-timerbar-animation;
    animation-duration: 1s;
    animation-timing-function:linear;
    animation-iteration-count:1;
}

@keyframes 'countdown-timerbar-animation'
{
    0% {
        clip:radial(50% 50%, 0deg, 0deg);
    }
    100% {
        clip:radial(50% 50%, 0deg, 360deg);
    }
}

          
          
          
.popup-xray-container
{
	vertical-align: center;
	horizontal-align:  center;
	flow-children: down;
}

.popup-xray
{
	height: width-percentage( 68% );
	width: 960px;
	                                                   
	margin-top: 115px;
	border-radius: 10px;
	                                             
}

.popup-xray__status
{
	flow-children: right;
	padding: 18px;
}

.popup-xray__status__dot
{
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background-color: warningColor;
	vertical-align: center;
	margin-right: 8px;

	transition-property: background-color;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.popup-xray__status__dot.in-use
{
	background-color: positiveColor;

	transition-property: background-color;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.popup-xray-actions
{
	                   
	height: 150px;
	flow-children: right;
	vertical-align: center;
	horizontal-align: center;
	opacity: 1;

	transition-property: transform, opacity;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.popup-xray-actions.hidden
{
	transform: translateY( -200px );
	opacity: 0;

	transition-property: transform, opacity;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.popup-xray-actions__label
{
	width: 480px;
	padding-left: 16px;
}

.popup-xray-container__line-container
{
	width: 100%;
	height: 100%;
	visibility: collapse;

	transition-property: opacity;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.popup-xray-container__line-container.hide,
.popup-xray-inverse-effect.hide
{
	opacity: 0;

	transition-property: opacity;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.popup-xray-container__line
{
	background-color: white;
	width: 5px;
	height: 100%;
	box-shadow: fill white 0px 0px 12px 0px;
	horizontal-align: right;
}

.popup-xray-container__gradient
{
	horizontal-align: right;
	background-color: gradient( linear, 100% 0%, 0% 0%, from( white), color-stop( 0.15, rgba(255, 255, 255, 0.2 ) ), to( rgba(255, 255, 255, 0)) );
	height: 100%;
	width: 50%;
}

#PopUpXrayModelOrImage
{
	clip: rect( 0%, 100%, 100%, 0% );
	                                               
	transition-property: brightness, contrast, saturation, background-color, blur;
	transition-duration: 1s, .5s, .5s, .25s, 2s;
	transition-delay: 0s, 0s, 0s, 0s, 1s;
	transition-timing-function: ease-in;
}

#PopUpXrayModelOrImageReveal
{
	contrast: -1;
	saturation: -1;
	background-color: rgb(0, 0, 0);
	opacity: 0;

	transition-property: brightness, contrast, saturation, background-color;
	transition-duration: 1s, 1s, 1s, 1s;
	transition-delay: 2s, 2s, 2s, 2s;
	transition-timing-function: ease-in;
}

#PopUpXrayModelOrImageReveal.no-anim
{
	transition-property: none;
	transition-duration: 0s;
	transition-delay: 0s;
	transition-timing-function: ease-in;
}

#PopUpXrayModelOrImageReveal.popup-xray-reverse-effect
{
	contrast: 1;
	saturation: 1;
	background-color: rgba(0, 0, 0, 0);
	opacity: 1;
}

.popup-xray-inverse-effect
{
	brightness: 1;
	contrast: -1;
	saturation: -1;
	background-color: rgb(255, 255, 255);
	blur: gaussian( 4, 1, 40 );

	transition-property: brightness, contrast, saturation, background-color, blur;
	transition-duration: 1s, .5s, .5s, .25s, 2s;
	transition-delay: 0s, 0s, 0s, 0s, 1s;
	transition-timing-function: ease-in;
}

.popup-xray-container__square-container
{
	width: 100%;
	box-shadow: #00000083 0px 0px 16px 0px;
	background-color: rgba(0, 0, 0, 0.55);
	border-radius: 10px;
	flow-children: right-wrap;
	vertical-align: center;
	margin-left: 2px;
}

.popup-xray-container__square
{
	height:  width-percentage( 100% );
	width:  106px;
	background-color: rgba(0, 0, 0, 0.25);
	background-image: url( "file://{images}/icons/ui/exit.svg" );
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size:12px;

	background-img-opacity: 0.08;

	transition-property: background-color;
	transition-duration: 2s;
	transition-timing-function: ease-in-out;
}

.popup-xray-container__bars
{
	horizontal-align: center;
	vertical-align: bottom;
	margin-bottom: 32px;
	opacity: .25;
}

.popup-xray-container__bars--vertical
{
	horizontal-align: right;
	vertical-align: center;
	margin-right: 32px;
	opacity: .25;
	transform: rotateZ(-90deg);
	x: 260px;
}