@define popup-row-entry-width: 140px;

.popup-operation-store
{
	width: 920px;
	                        
	height: fit-children;
	vertical-align: center;
	horizontal-align: center;
	pre-transform-scale2d: 1;
	transform: translateY( 0px );
	min-width: 0px;
	opacity: 1.0;
	border-radius: 0px;
	flow-children: none;
	padding: 0px;
	background-color: gradient( linear, 0% 100%,0% 0%, from( rgba(5, 30, 31, 0.5)), to( rgba(26, 66, 85, 0.5)));
	horizontal-align: center;
    vertical-align: center;
	box-shadow: shadowOffset;

}

.popup-operation-store.Hidden
{
	opacity: 0.0;
	pre-transform-scale2d: 1.25;
	transform: translateY( -10px );
	sound: "ui_custom_lobby_dialog_slide";
}

.popup-operation-store__top
{
	width: 100%;
	padding-top: 16px;
	padding-bottom: 0px;
	flow-children: down;

	background-image: url( "file://{resources}/videos/op11_underwater.webm" );
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-color: rgba(0, 0, 0, 0.2);


	background-img-opacity: .1;
	box-shadow: rgba(0, 0, 0, 0.589) -4px -4px 4px 8px;

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

.popup-operation-store-title
{
	vertical-align: center;
	horizontal-align: center;
	text-align: center;
	margin: 0px;
	text-transform: uppercase;
	font-size: 36px;
	font-family: Stratum2, 'Arial Unicode MS';
	font-weight: medium;
	color: opCompleteColor;
	letter-spacing: 5px;
	width: 100%;
	text-overflow: shrink;

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

.popup-operation-store-subtitle-container
{
	horizontal-align: center;
	flow-children: none;
	margin: 8px 0px 28px 0px;
	width: 850px;
}


.popup-operation-store-subtitle,
.popup-operation-store-subtitle--light
{
	vertical-align: center;
	text-align: center;
	margin: 0px;
	font-size: 16px;
	font-family: Stratum2, 'Arial Unicode MS';
	font-weight: lighter;
	color: opCompleteColor;
	width: 250px;
	opacity: 1;

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

.popup-operation-store-subtitle--light
{
	opacity: .7;
	color: opCompleteColor;
}

.popup-operation-store-subtitle--price
{
	opacity: 1;
	color: opCompleteColor;
}

.popup-operation-store-progress
{
	horizontal-align: center;
	flow-children: right;
	margin: 25px 0px;

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

.popup-operation-store-subtitle.hidden 
{
	opacity: 0;
	visibility: collapse;

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

.popup-operation-store-progress__title
{
	color: opCompleteColor;
	text-align: center;
	horizontal-align: center;
	margin-bottom: 16px;
	font-size: 16px;
	max-width: 800px;
	letter-spacing: 2px;
	text-overflow: shrink;

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

.popup-operation-store-progress__title--desc
{
	margin: 25px 0px;
	font-size: 24px;
}

.popup-operation-store-progress__arrow
{
	margin: 0px 16px;
	vertical-align: center;
	transform: rotateZ( -90deg ) translateX( 0px);
	wash-color: opCompleteColor;
	margin-top: 38px;
	width: 32px;

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

.popup-operation-store-cart-empty .popup-operation-store-progress__arrow 
{
	transform: rotateZ( -90deg ) translateX( -50px);
	opacity: 0;
	
	transition-property: transform, opacity;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.popup-operation-store-progress-panel--current
{
	transform: translateX( 0px );
	
	transition-property: transform;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.popup-operation-store-cart-empty .popup-operation-store-progress-panel--current
{
	transform: translateX( 140px);
	
	transition-property: transform;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.popup-operation-store-progress-panel
{
	transform: translateX( 0px);
	transition-property: transform, opacity;
	transition-duration: .25s;
	transition-timing-function: ease-in-out;
}

.popup-operation-store-cart-empty .popup-operation-store-progress-panel
{
	opacity: 0;
	transform: translateX( -100px);

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

.op-main__progress__label-count
{
    horizontal-align: center;
    font-weight: bold;
    color:opCompleteColor;
    font-size: 32px;
	text-shadow: 0px 0px 2px 4 #000000e1;
	
	transition-property: opacity;
	transition-duration: 1s;
	transition-timing-function: ease-in-out;
}

.op-main__progress__label-count.op-main__progress__label-count--light
{
	font-weight: lighter;
	margin-bottom: 20px;
	text-align: center;
}

#id-operation-store-apply-new-stars
{
	transform: translateX( -200px );
	horizontal-align: center;
	opacity: 1;

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

.op-main__progress
{
    vertical-align: center;
    horizontal-align: center;
}

.op-main__progress.after-purchase .op-main__progress__label-count
{
	color: white;
	text-shadow: 0px 0px 4px 2 rgb(155, 187, 229);
}

.op-main__progress.after-purchase .op-main__progress__image
{
	opacity: .2;
    background-color: gradient( radial, 50% 50%, 0% 0%, 50% 50%, from( opAccentColorLight ), color-stop( 0.9, #b6b6b600  ),to( #b6b6b600 ) );
}

.op-main__progress__glow
{
	wash-color: opCompleteColor;
	height: 0px;
	width: 0px;
	-s2-mix-blend-mode: SRGBadditive;
	opacity: 0.0;
	vertical-align: center;
	horizontal-align: center;
	visibility: collapse;

	transition-property: opacity, height, width;
	transition-duration: 0.8s;
	transition-timing-function: ease-in-out;

	animation-name: GlowRotate;
	animation-duration: 30s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes 'GlowRotate'
{
	0%
	{

		transform: rotateZ( 1deg );
	}

	50%
	{

		transform: rotateZ( 180deg );
	}
	
	100%
	{

		transform: rotateZ( 359deg );
	}
}

.op-main__progress__glow--dir
{
	height: 768px;
	width: 768px;
	vertical-align: center;
	horizontal-align: center;
	animation-name: GlowRotate2;
	animation-duration: 30s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes 'GlowRotate2'
{
	0%
	{

		transform: rotateZ( 359deg );
	}

	50%
	{

		transform: rotateZ( 180deg );
	}
	
	100%
	{

		transform: rotateZ( 1deg );
	}
}

.popup-operation-progress-anim
{
	animation-name: stars-after-purchase-anim; 
	animation-duration: .5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
}

.popup-operation-progress-remove-anim
{
	animation-name: stars-after-purchase-remove-anim; 
	animation-duration: .5s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
}

@keyframes 'stars-after-purchase-anim'
{
	0%
	{
		transform: translateY( 0% );
		opacity: 1;
	}

	30%
	{
		transform: translateY( 20% );
		opacity: 0;
	}
	
	31%
	{
		transform: translateY( -20% );
	}

	100%
	{
		transform: translateY( 0% );
		opacity: 1;
	}
}

@keyframes 'stars-after-purchase-remove-anim'
{
	0%
	{
		transform: translateY( 0% );
		opacity: 1;
	}

	30%
	{
		transform: translateY( -50% );
		opacity: 0;
	}
	
	31%
	{
		transform: translateY( 50% );
		opacity: 0;
	}

	100%
	{
		transform: translateY( 0% );
		opacity: 1;
	}
}

.popup-operation-apply-stars
{
	animation-name: stars-after-apply-anim; 
	animation-duration: .8s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
}

@keyframes 'stars-after-apply-anim'
{
	0%
	{
		transform: translateY( 0% );
		opacity: 1;
	}

	25%
	{
		transform: translateY( 20% );
		opacity: 0;
	}
	
	26%
	{
		brightness: 1;
		transform: translateY( -20% ) scale3d( 1.0, 1.0, 1.0 );
	}

	60%
	{
		transform: translateY( 0% ) scale3d( 1.4, 1.4, 1.4 );
		opacity: 1;
		brightness: 10;
	}

	
	100%
	{
		transform: translateY( 0% ) scale3d( 1.0, 1.0, 1.0 );
		brightness: 1;
	}
}

.popup-operation-store-content
{
	flow-children: down;
	horizontal-align: center;
	height: fit-children;

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

.popup-operation-store-content__nav
{
	flow-children: right;
	horizontal-align: center;
}

.popup-operation-store-content__nav__btn
{
	flow-children: none;
	margin: 0px 65px;
}

.popup-operation-store-content__nav__btn Image
{
	width: height-percentage( 135% );
	height: 128px;
	horizontal-align: center;
	vertical-align: center;
}

.popup-operation-store-content__nav__btn Label 
{
	vertical-align: center;
	horizontal-align: center;
	text-align: center;
	margin: 0px;
	text-transform: uppercase;
	font-size: 12px;
	font-family: Stratum2, 'Arial Unicode MS';
	font-weight: medium;
}

.popup-operation-store-content__nav__btn--gold,
.popup-operation-store-content__nav__btn--silver,
.popup-operation-store-content__nav__btn--bronze
{

	border-radius: 50%;
	width: height-percentage( 100% );
	height:88px;
	background-color: gradient( radial, 50% 50%, 0% 0%, 50% 50%, from( #7e7e7e  ), to(#2c2c2c ) );
	box-shadow: rgba(112, 112, 112, 0) -2px -2px 8px 4px;

	border: 1px solid grey;
	horizontal-align: center;
	vertical-align: center;

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

.popup-operation-store-content__nav__btn--gold
{
	wash-color: gold;
}

.popup-operation-store-content__nav__btn--silver
{
	wash-color: silver;
}

.popup-operation-store-content__nav__btn--bronze
{
	wash-color: #cd7f32;
}

.popup-operation-store-content__nav__btn:selected .popup-operation-store-content__nav__btn--gold
{
	box-shadow: gold -2px -2px 8px 4px;
}


.popup-operation-store-content__nav__btn:selected .popup-operation-store-content__nav__btn--silver
{
	box-shadow: silver -2px -2px 8px 4px;
}


.popup-operation-store-content__nav__btn:selected .popup-operation-store-content__nav__btn--bronze
{
	box-shadow:  #cd7f32 -2px -2px 8px 4px;
}


.popup-operation-store-content__nav__btn .RadioBox
{
	visibility: collapse;
}

.popup-operation-coin-progress
{
	flow-children: right;
	horizontal-align: center;
}

.popup-operation-coin-progress__circle
{
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background-color: opAccentColorDark;
}

.popup-operation-coin-progress__line
{
	height: 4px;
	width: 285px;
	vertical-align: center;

	background-color: opAccentColorDark;
}

.popup-operation-coin-progress__circle--bg
{
	height: 24px;
	width: 24px;
	background-color: rgba(0, 0, 0, 0.3);
}

.popup-operation-coin-progress__line--bg
{
	height: 10px;
	width: 278px;

	background-color: rgba(0, 0, 0, 0.3);
}

.popup-operation-coin-progress-fill
{
	background-color: opAccentColorLight;
}

.popup-operation-store-rows-container
{
	flow-children: down;
	horizontal-align: center;
	                       
}

.popup-operation-store-row
{
	flow-children: right;
	min-height: 40px;
	margin: 8px 0px;
}

.popup-operation-store-row__text
{
	text-align: center;
	vertical-align: center;
	width: popup-row-entry-width;
	font-size: 18px;
	margin: 1px 1px;
	font-family: Stratum2, 'Arial Unicode MS';
	font-weight: lighter;
}

.popup-operation-store-row__text.bold 
{
	font-weight: black;
}

.popup-operation-store-row__text.name
{
	text-align: left;
	padding-left: 10px;
}

.popup-operation-store-row__text.quantity-count
{
	width: 30px;
	font-family: Stratum2 Regular Monodigit, 'Arial Unicode MS';
}

.popup-operation-store-row__text_stars1,
.quantity-count1 .popup-operation-store-row__text_stars_many
{
	visibility: collapse;
}
.quantity-count1 .popup-operation-store-row__text_stars1
{
	visibility: visible;
}

.popup-operation-store-row__price
{
	width: popup-row-entry-width;
	flow-children: right;
	vertical-align: center;
}

.popup-operation-store-row--no-discount  .popup-operation-store-row__price
{
	flow-children: none;
}

.popup-operation-store-row__price-container
{
	flow-children: down;
	horizontal-align: center;
}

.popup-operation-store-row__price__discount
{
	text-align: center;
	vertical-align: center;
	font-size: 16px;
	margin: 1px 1px;
	font-family: Stratum2, 'Arial Unicode MS';
	padding: 4px;
	margin-right: 4px;
	color: rgba(54, 141, 46, 0.733);
	font-weight: medium;
	background-color: rgba(24, 68, 20, 0.459);
}

.popup-operation-store-row__price__originalprice
{
	text-align: center;
	vertical-align: center;
	width: popup-row-entry-width;
	font-size: 18px;
	text-decoration: line-through;
	margin: 1px 1px;
	font-family: Stratum2, 'Arial Unicode MS';
	color: baseText;
	opacity: .5;
}

.popup-operation-store-row__text.fixed-width,
.popup-operation-store-row__price__originalprice.fixed-width
{
	width: 78px;
	text-overflow: shrink;
}

.popup-operation-store-row--no-discount .popup-operation-store-row__price__originalprice,
.popup-operation-store-row--no-discount .popup-operation-store-row__price__discount
{
	visibility: collapse;
}

.popup-operation-store-row__quantity
{
	width: popup-row-entry-width;
}

.popup-operation-store-row__quantity__btn
{
	vertical-align: center;
	border: 1px solid opCompleteColor;
	padding: 0px;
	background-color: opIncompleteColor;
	margin: 2px 0px 2px 8px;

	brightness: 1.0;

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

.popup-operation-store-row__quantity__btn:hover
{
	brightness: 2;

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

.popup-operation-store-row__quantity__btn:hover:disabled
{
	brightness: 1.0;
}

.popup-operation-store-row__quantity__btn:disabled
{
	opacity: .2;
}

.popup-operation-store-row__quantity__btn:active
{
	sound: "UIPanorama.sidemenu_select";
}


.popup-operation-store-row__quantity__btn Label 
{
	margin: 0px;
	text-align: center;
	horizontal-align: center;
	font-size: 18px;
	font-family: Stratum2, 'Arial Unicode MS';
	font-weight: medium;
	width: 28px;
}

.width-fit-children
{
	width: fit-children;
}

.popup-operation-store-row-bottom-border
{
	border-bottom: 1px solid opIncompleteColor;
	padding-bottom: 16px;
	margin-bottom: 0px;
}

.popup-operation-store-row__text--title
{
	color: opIncompleteColor;
	font-weight: black;
}

.popup-operation-store-row--title
{
	background-color: opTenDark;
}

.popup-operation-store-actions-Row
{
	flow-children: right;
	padding: 16px 32px;
	horizontal-align: right;
	background-color: rgba(0, 0, 0, 0.3);
	vertical-align: bottom;
	height: 96px;

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

.Spinner.hidden,
.AsyncItemWorkAcceptConfirm.hidden,
.AsyncItemWorkUseItem.hidden,
.op-use-item.hidden
{
	visibility: collapse;
}

                                     
.popup-operation-store-apply-stars .popup-operation-store__top
{
	height: 640px;
	background-position: 50% 100%;
}

.popup-operation-store-apply-stars .popup-operation-store-progress-apply-panel
{
	visibility: visible;
	opacity: 1;
}

.popup-operation-store-apply-stars .popup-operation-store-subtitle
{
	horizontal-align: center;
	font-size: 24px;
	font-weight: medium;
	width: fit-children;
	max-width: 800px;
}

.popup-operation-store-apply-stars .popup-operation-store-content,
.popup-operation-store-apply-stars .popup-operation-store-title,
.popup-operation-store-apply-stars .popup-operation-store-progress,
.popup-operation-store-apply-stars .popup-operation-store-progress__title--desc
{
	height: 0px;
	margin: 0px;
}

                                                
.popup-operation-store-progress-apply-panel
{
	visibility: collapse;
	width: 100%;
	height: 100%;
	opacity: 0;

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

.popup-operation-store-progress-apply-panel .popup-operation-store-progress__title
{
	font-size: 48px;
	color: gradient( linear, 0% 0%,0% 100%, from( opCompleteColor), to( #8f7c12));
} 

.popup-operation-store-progress-apply-panel .popup-operation-store-progress-panel--current
{
	horizontal-align: center;
	transform: translateX( 200px );
}

.popup-operation-store-progress-apply-panel .op-main__progress__image
{
	opacity: 1;
	wash-color: opIncompleteColor;
	vertical-align: center;
	horizontal-align: center;
	img-shadow: 0px 0px 6px 5 rgb(0, 0, 0);
}

.popup-operation-store-progress-apply-panel .op-main__progress__label-count
{
	font-size: 128px;
	color: gradient( linear, 0% 0%, 0% 80%, from( white), to( #bda51c));
	text-shadow: 0px 0px 8px 8 opTenDark;
}

                                           
.popup-operation-store-reveal-new-stars .popup-operation-store-progress-panel--current
{
	transform: translateX( 0px);
}

.popup-operation-store-reveal-new-stars #id-operation-store-apply-new-stars
{
	transform: translateX( 140px );
	opacity: 0;

	transition-property: transform, opacity;
	transition-delay: 0.6s;
	transition-duration: 0.25s;
	transition-timing-function: ease-in-out;
}

.popup-operation-store-reveal-new-stars .op-main__progress__glow
{
	visibility: visible;
	transform: scale3d( 1.0, 1.0, 1.0 );
	opacity: .2;
	height: 700px;
	width: 700px;
}

.popup-operation-store-reveal-new-stars #id-operation-store-apply_plus_sign
{
	opacity: 0;
}

