@define char_model_width: 640px;
.PopupPanel.op-store-inspect
{
	width: 100%;
	height: 100%;
	max-width: 100%;
	min-width: 100%;
	padding-bottom: 0px;
}

.op-store-inspect
{
	width: 100%;
	height: 100%;
}

.op-store-inspect.blur
{
	blur: fastgaussian( 8, 8, 5 );
}

.op-store-inspect-movie
{
	blur: gaussian( 8 );
	width: 1920px;
	height: 1080px;
	overflow: noclip;
	brightness: .4;
}

.op-store-inspect-movie.unblur
{
	blur: gaussian( .1 );
	brightness: .05;
}

#id-store-inspect-container
{
	transform-origin: 50% 50%;
	transition-property: transform, opacity, brightness;
	transition-duration: 1s;
	transition-timing-function: ease-in-out;
}

#id-store-inspect-container.hide
{
	visibility: visible;
	opacity: 0;
	transform: translateZ(500px);
}

.op-store-inspect-floor
{
	width: 100%;
	height: 40%;
	vertical-align: bottom;
	background-color: gradient( linear, 0% 0%, 0% 50%, from( #ffffff00 ), to( #4a6e852f ) );
}

#id-op-inspect-all-models-container
{
	blur: gaussian( 0 );
	transition-property: blur, brightness;
	transition-duration: .5s;
	transition-timing-function: ease-in-out;
}

#id-op-inspect-all-models-container.in-confirm-mode
{
	blur: gaussian( 6 );
	brightness: 0.12;
	transition-property: blur, brightness;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.op-inspect-model-container
{
	width: 95%;
	horizontal-align: center;
	height: 100%;
	vertical-align: bottom;
	transition-property: blur;
	transition-duration: 1s;
	transition-timing-function: ease-in-out;
}

.op-inspect-model-container.narrow
{
	margin-top: 128px;
	width: 80%;
	height: 80%;
}

.op-inspect-model-container.graffiti
{
	margin-top: 128px;
	opacity-mask: url( "file://{images}/masks/bottom-top-fade-2.png" );
}

.op-store-inspect-name
{
	flow-children: right;
	vertical-align: bottom;
	margin-bottom: 5%;
	horizontal-align: center;
}

.op-inspect-model-container.show
{
	animation-name: item-refesh-anim;
    animation-timing-function: ease-in-out;
    animation-duration:0.5s;
	animation-iteration-count: 1;
}

@keyframes item-refesh-anim
{
	0% {
		transform: scaleX(1) scaleY(1) translateX(0%);
		blur: gaussian( 5 );
		opacity: 1;
	}
	50%{
		transform: scaleX(.8) scaleY(.8) translateX(20%);
		blur: gaussian( 1 );
		opacity: 0;
	}
	51%{
		transform: scaleX(.8) scaleY(.8) translateX(-20%);
		opacity: 0;
	}
	100% {
		transform: scaleX(1) scaleY(1) translateX(0%);
		blur: gaussian( 5 );
		opacity: 1;
	}
}

#id-op-shop-inspect-item-model
{
	width: 75%;
	margin-bottom: 34%;
	margin-top: 10%;
	horizontal-align: center;
}

.op-store-inspect__char-model
{
	width: char_model_width;
	height: 100%;
	transform-origin: 50% 50%;
	opacity: .001;
	transition-property: opacity, position, brightness;
	transition-duration: 0.5s;
	transition-timing-function: ease-in-out;
}
.op-store-inspect__char-model.show
{
	opacity: 1;
	brightness: 1;
	transition-property: opacity, position, brightness;
	transition-duration: 0.5s;
	transition-timing-function: ease-in-out;
}

.op-store-inspect__char-btn
{
	                        
	height: 100%;
	width: 50%;
	horizontal-align: center;
}

.op-store-inspect__char-btn:hover
{
	background-color: gradient( linear, 0% 0%, 0% 60%, from( #93edfb2a ), to( #ffffff00 ) );
}

.op-store-inspect__char-info-container
{
	horizontal-align: center;
	flow-children: down;
	vertical-align: center;
	transform: translateY( 30%);
	width: 50%;
}

.op-store-inspect__char-info-name
{
	text-align: left;
	horizontal-align: left;
	                  
	margin: 0px 8px;
	padding-bottom: 2px;
	font-weight: lighter;
	max-width: 300px;
	                   
}

.op-store-inspect__char-rarity
{
	width: 8px;
	height: 8px;
	background-color: white;
	border-radius: 50%;
	horizontal-align: center;
	vertical-align: center;
	transition-property: transform;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

.op-store-inspect__char-small-btn-container
{
	flow-children: right;
	margin: 4px 4px;
	background-color: rgba(0, 0, 0, 0.295);
	transform: translateY(40px);
	border-radius: 5px;
	horizontal-align: center;
	opacity: 0;
	transition-property: opacity,transform;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
	visibility: collapse;
}

.op-store-inspect__char-small-btn-container.show
{
	opacity: 1;
	transform: translateY(0px);
	transition-property: opacity, transform;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

.op-store-inspect-rewards-tray-btn
{
	flow-children: down;
	margin: 0px 8px;
	padding-bottom: 24px;
	transition-property: brightness, transform, position;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
}

.single-line .op-store-inspect-rewards-tray-btn
{
	width: fill-parent-flow(1);
}

.op-store-inspect-rewards-tray-btn:hover
{
	transform: translateY( -1%);
	transition-property: brightness, transform, position;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
}

.op-store-inspect-rewards-tray-btn:hover .op-store-inspect__char-rarity
{
	transform: scale3d( 2, 2, 1);
	transform-origin: 50% 50%;
	box-shadow: fill #000000aa -2px -2px 8px 4px;
	transition-property: transform;
	transition-duration: 1s;
	transition-timing-function: ease-in-out;
}

.op-store-inspect-rewards-tray-btn .RadioBox
{
	visibility: collapse;
}

.op-store-inspect-rewards-tray-group
{
	                          
}

.op-store-inspect-rewards-tray-container
{
	width: 100%;
	height: 80%;
	horizontal-align:center;
	vertical-align: bottom;
	padding: 16px 64px 128px 64px;
	margin-top: 0px;
	flow-children: right-wrap;
	border-top: 1px solid rgba(199, 199, 198, 0.205);
	background-color: gradient( linear, 0% 0%, 0% 100%, from( rgba(0, 0, 0, 0.308) ), to( rgba(0, 0, 0, 0.0) ) );
	
	transition-property: brightness, blur;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

.blur.op-store-inspect-rewards-tray-container
{
	blur: gaussian( 2, 2, 7 );
	brightness: .1;

	transition-property: brightness, blur;
	transition-duration: .2s;
	transition-timing-function: ease-in-out;
}

.op-store-inspect-rewards-tray-container--groups-expanded
{
	flow-children: none;
	border-top: 0px solid rgba(199, 199, 198, 0.0);
	background-color: rgba(0, 0, 0, 0.178);
	z-index: 5;
	visibility: collapse;
}

.op-store-inspect-rewards-tray-container--groups-expanded .op-store-inspect-rewards-tray-group
{
	                           
	horizontal-align: center;
	vertical-align: center;
	transform-origin: 50% 50%;
	overflow: noclip;
}

.single-line .op-store-inspect-rewards-tray-container
{
	flow-children: right;
}

.op-store-inspect-rewards-tray-container.has-model-panel
{
	height: fit-children;
}

.op-store-inspect-rewards-tray-image
{
	width: 200px;
	padding: 0px 4px;
	transition-property: brightness;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

.op-store-inspect-rewards-tray-image:hover 
{
	sound: "UIPanorama.mainmenu_rollover";
}

.single-line .op-store-inspect-rewards-tray-image
{
	width: 100%;
}

.has-model-panel .op-store-inspect-rewards-tray-image
{
	width: 120px;
}

.op-store-inspect-title-container
{
	flow-children: right;
	horizontal-align: center;
	margin-top: 64px;
	z-index: 2;
}

.op-store-inspect-title__label
{
	color: white;
	font-weight: medium;
	letter-spacing: 5px;
	                        
}

.op-store-inspect-title__image
{
	height: 96px;
}

.op-store-inspect-actions-bar
{
	vertical-align: bottom;
	horizontal-align: center;
	margin-bottom: 32px;
	width: 100%;
	overflow: noclip;
}

.op-store-inspect-purchase-container,
.op-inspect-get-more-points
{
	flow-children: right;
	vertical-align: center;
}
.op-store-shop-balance-container--inspect
{
	width: 512px;
}

.op-store-inspect-purchase__text-icon
{
	background-color: opCompleteColor;
	vertical-align: center;
	flow-children: right;
	padding-right: 8px;
	transition-property: background-color;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.op-store-shop-balance__icon-inspect
{
	vertical-align: center;
}

.op-store-inspect-purchase__end
{
	transform: translateX(1px) scaleX(-1) scaleY(-1) ;
	height: 53px;
	vertical-align: center;
	wash-color: opCompleteColor;
	transition-property: wash-color;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.op-store-inspect-purchase-container:hover .op-store-inspect-purchase__end,
.op-inspect-get-more-points:hover .op-store-inspect-purchase__end,
.op-store-shop-balance__icon-inspect
{
	wash-color: opTenDark;
	transition-property: wash-color;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.op-store-inspect-purchase-container:hover .op-store-shop-balance__icon-inspect,
.op-store-inspect-purchase-container:disabled .op-store-shop-balance__icon-inspect
{
	wash-color: opCompleteColor;
	transition-property: wash-color;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.op-store-inspect-purchase-container:hover .op-store-inspect-purchase__text-icon,
.op-store-inspect-purchase-container:hover .op-store-progress__pass-upsell__text-btn,
.op-inspect-get-more-points:hover .op-store-progress__pass-upsell__text-btn,
.op-store-inspect-purchase-container:disabled .op-store-inspect-purchase__text-icon,
.op-store-inspect-purchase-container:disabled .op-store-progress__pass-upsell__text-btn,
.op-inspect-get-more-points:disabled .op-store-progress__pass-upsell__text-btn
{
	background-color: opTenDark;
	transition-property: background-color;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.op-store-inspect-purchase-container:hover .op-store-progress__pass-upsell__text-btn Label,
.op-inspect-get-more-points:hover .op-store-progress__pass-upsell__text-btn Label,
.op-store-inspect-purchase-container:disabled .op-store-progress__pass-upsell__text-btn Label,
.op-inspect-get-more-points:disabled .op-store-progress__pass-upsell__text-btn Label
{
	color: opCompleteColor;
	sound: "UIPanorama.mainmenu_rollover";
}

.op-store-inspect-purchase-container:disabled .op-store-progress__pass-upsell__text-btn Label,
.op-store-inspect-purchase-container:disabled .op-store-shop-balance__icon-inspect
{
	opacity: .2;
}

#id-op-inspect-shop-balance-panel .op-store-inspect-purchase__end
{
	height: 41px;
}

#id-op-inspect-shop-get-reward,
#id-op-inspect-shop-balance-panel
{
	opacity: 1;
	                                 
	transition-property: opacity, transform;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

#id-op-inspect-shop-get-reward.hide,
#id-op-inspect-shop-balance-panel.hide
{
	opacity: 0;
	visibility: visible;
	transform: translateY(-120%);
	transition-property: opacity, transform;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

#id-op-inspect-shop-get-confirm
{
	ui-scale: 100%;
	transform-origin: 50% 50%;
	transform: translateY( 45% );
	transition-property: opacity, transform, ui-scale;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
	overflow: noclip;
}

#id-op-inspect-shop-get-confirm.hide
{
	visibility: visible;
	ui-scale: 0.1%;
	opacity: 0;
	transform: translateY( 100% );
	transition-property: opacity, transform, ui-scale;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}
