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

.popup-decodable-blur-target
{
    blur: fastgaussian( 4, 4, 2);
}

.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;
    background-color: rgba(0, 0, 0, 0.4);
    background-image: url("file://{images}/backgrounds/bluedots_large.png");
    background-size: backgroundDotsSize;
    background-img-opacity: .02;
    transition-property: transform;
    transition-delay: .0s;
    transition-duration: 1s;
    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: center;
    vertical-align: center;
    font-size: 20px;
	font-family: Stratum2;
	font-weight: medium;
    color: white;
    transform: translateY(4px);
    opacity: 1;
    transform: translateY( 0px );
    transition-property: opacity, transform;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
}

.popup-decodable-lootlist-single-icon
{
    height: 20px;
    width: 20px;
    transform: translateY(-1px);
}

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

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

.popup-browse-btn
{
    horizontal-align: right;
    padding: 10px;
    margin: 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;
}

#id-special-item
{
    opacity: 1;
    transform: translateY( 0px );
    transition-property: opacity, transform;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
}

#CanDecodableDescRental
{
    opacity: 0;
    transform: translateY( 100px );
    transition-property: opacity, transform;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
}

.rental-mode #id-special-item,.rental-mode #CanDecodableDesc
{
    opacity: 0;
    transform: translateY( 100px );
    transition-property: opacity, transform;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
}

.rental-mode #CanDecodableDescRental
{
    opacity: 1;
    transform: translateY( 0px );
    transition-property: opacity, transform;
    transition-duration: .3s;
    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: gaussian( 3, 3, 1 );
}

.popup-decodable-scroll-item.magnified
{
    width: 360px;
    height: width-percentage( 75% );
    margin: 0px 10px;
    brightness: 1;
    blur: gaussian( 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;
	font-family: Stratum2;
	font-weight: bold;
    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, 360deg);
    }
    
    100%
    {
        clip:radial(50% 50%, 0deg, 0deg);
    }
    
}

.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 6px 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 8px 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;
}