

@define frame-badge-color-left: rgba(235, 146, 38, 1);
@define frame-badge-color-right: rgba(180, 105, 14, 1);
@define frame-badge-color-center: rgba(235, 146, 38, .4);
@define frame-badge-done-color-left: rgb(0, 0, 0);
@define frame-badge-done-color-right: rgb(0, 0, 0);
@define frame-badge-claimed-color-left: rgb(32, 87, 22);
@define frame-badge-claimed-color-right: rgb(40, 109, 28);
.rrs-root
{
	width: fit-children;
	horizontal-align: center;
	vertical-align: center;
	flow-children: right;
	overflow: noclip;
	padding: 16px 0px;
}

.rrs-directions-panel
{
	flow-children: down;
	margin-left: 32px;
	vertical-align: center;
	min-height: 270px;
}

.rrs-directions-panel .rrs__title
{
	margin-bottom: 16px;
	horizontal-align: center;
	vertical-align: top;
	text-align: center;
	font-family: Stratum2 Condensed, 'Arial Unicode MS';
	font-size: 60px;
	height: 64px;
	text-transform: uppercase;
	color: white;
	max-width: 420px;
	text-overflow: shrink;
}

.rrs__ghost-items-container
{
	flow-children: right;
	horizontal-align: center;
	vertical-align: top;
	y:-15px;
}

.rrs-item-container
{
	width: 200px;
	height: 150px;
	margin: 10px;
	background-color: rgba(37, 37, 37, 0.546);
	overflow: noclip;
}

.rrs-item-container:not(.claimed) .ghost-item__inspect
{
	visibility: visible;
}

.rrs-item-container:not(.claimed):hover .ghost-item__multi-select Image
{
	opacity: 1;
}

.rrs-item-container:not(.claimed) .ghost-item__multi-select
{
	visibility: visible;
}

.rrs-item-container.claimed .ghost-item,.rrs-item-container .ghost-item:disabled
{
	background-color: rgba(0, 0, 0, 0.75);
}

.rrs-item-container.claimed .ghost-item .ghost-item__image,.rrs-item-container .ghost-item:disabled .ghost-item__image
{
	brightness: 0;
	saturation: 0;
	opacity: .5;
}

.rrs-item-container.claimed .ghost-item .ghost-item,.rrs-item-container .ghost-item:disabled .ghost-item
{
	brightness: 0.3;
}

.rrs-item-container.claimed .ghost-item .ghost-item__inspect,.rrs-item-container .ghost-item:disabled .ghost-item__inspect
{
	visibility: collapse;
}

.rrs-item-container.claimed .ghost-item .ghost-item__multi-select,.rrs-item-container .ghost-item:disabled .ghost-item__multi-select
{
	visibility: collapse;
}

Image,Panel
{
	transition-property: opacity;
	transition-duration: 0.1s;
	transition-timing-function: ease-in-out;
}

.ghost-item
{
	vertical-align: top;
	width: 100%;
	height: 100%;
	flow-children:down;
	transform-origin: 50% 50%;
	transition-property: transform, brightness, opacity;
	transition-duration: 0.1s;
	border: 2px solid rgba(182, 120, 26, 0.877);
	visibility: visible;
}

.ghost-item .TickBox
{
	visibility: collapse;
}

.ghost-item.selected
{
	border-color: positiveColor;
}

.ghost-item.selected .ghost-item__multi-select
{
	visibility: visible;
	border: 2px solid rgba(0, 0, 0, 0);
	opacity: 1;
	background-color: positiveColor;
}

.ghost-item.selected .ghost-item__multi-select Image
{
	opacity: 1;
}

.ghost-item .ghost-item__bg
{
	width: 100%;
	height: 100%;
}

.ghost-item .ghost-item__name
{
	max-height: 42px;
	font-family: Stratum2 Condensed, 'Arial Unicode MS';
	font-size: 16px;
	margin: 5px;
}

.ghost-item .ghost-item__image
{
	height: 120px;
	horizontal-align: center;
	vertical-align: center;
}

.ghost-item .ghost-item__inspect
{
	vertical-align: bottom;
	horizontal-align: right;
	margin: 5px;
	opacity: 0.5;
	visibility: collapse;
}

.ghost-item .ghost-item__inspect:hover
{
	opacity: 1;
}

.ghost-item .ghost-item__multi-select
{
	visibility: collapse;
}

.ghost-item .ghost-item__multi-select Image
{
	opacity: 0;
	wash-color: rgb(224, 224, 224);
}

.reveal-claimed .ghost-item
{
	animation-name: reveal-claimed-item;
	animation-duration: 0.2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
	contrast: 1;
}

@keyframes 'reveal-claimed-item'
{
	0%
	{
		brightness: 1;
		contrast: 1;
	}
	
	50%
	{
		brightness: 10;
		contrast: 0;
	}
	
	100%
	{
		brightness: 1;
		contrast: 1;
	}
	
}

.ghost-item__multi-select
{
	horizontal-align: left;
	vertical-align: top;
	border: 1px solid rgb(218, 218, 218);
	padding: 2px;
	margin: 5px;
	border-radius: 50%;
}

.selected .ghost-item__multi-select
{
	brightness: 1;
}

.rrs__button-row
{
	vertical-align: bottom;
	width: 100%;
}

.rrs__button-row .rrs__redeem
{
	horizontal-align: center;
}

.rrs__waiting
{
	height: 100%;
	width: 100%;
	background-color: gradient(radial, 50% 50%, 0% 0%, 100px 100px, from(#000000ff), to(#00000000));
	opacity: 0;
}

.waiting .rrs__waiting
{
	opacity: 1;
}

.rrs__desc
{
	max-width: 300px;
	margin-top: 8px;
	color: rgb(238, 184, 118);
	horizontal-align: center;
	font-size: 16px;
}

.frame-badge
{
	horizontal-align: center;
}

.frame-badge .frame-badge__bg
{
	flow-children: right;
}

.frame-badge .frame-badge__bg .frame-badge__center
{
	height: 100%;
	width: 300px;
}

.frame-badge .frame-badge__bg .frame-badge__center Label
{
	vertical-align: center;
	horizontal-align: center;
	text-transform: uppercase;
	font-family: Stratum2, 'Arial Unicode MS';
	font-weight: Medium;
	text-align: center;
	font-size: 20px;
	padding: 8px 32px;
	color: white;
	text-overflow: shrink;
}

.frame-badge .frame-badge__bg .frame-badge__right
{
	transform: scaleX(-1);
}

@keyframes 'frame-badge-reveal-store'
{
	0%
	{
		transform: scale3d(0, 1, 1);
		brightness: 10;
	}
	
	99%
	{
		brightness: 10;
	}
	
	100%
	{
		transform: scale3d(1, 1, 1);
		brightness: 1;
	}
	
}

.frame-badge.redeem-direction
{
	vertical-align: top;
}

.frame-badge.redeem-direction .frame-badge__bg .frame-badge__left
{
	wash-color: frame-badge-color-left;
}

.frame-badge.redeem-direction .frame-badge__bg .frame-badge__center
{
	background-color: gradient(linear, 0% 0%, 100% 0%, from(frame-badge-color-left), to(frame-badge-color-right));
}

.frame-badge.redeem-direction .frame-badge__bg .frame-badge__right
{
	wash-color: frame-badge-color-right;
}

.reveal-store .frame-badge.redeem-direction .frame-badge__bg
{
	animation-name: frame-badge-reveal-store;
	animation-duration: 0.2s;
	animation-delay: 0.1s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
}

.frame-badge.claimed
{
	vertical-align: bottom;
	transform: translateY(16px);
	ui-scale: 75%;
	visibility: collapse;
}

.frame-badge.claimed .frame-badge__bg .frame-badge__left
{
	wash-color: frame-badge-claimed-color-left;
}

.frame-badge.claimed .frame-badge__bg .frame-badge__center
{
	background-color: gradient(linear, 0% 0%, 100% 0%, from(frame-badge-claimed-color-left), to(frame-badge-claimed-color-right));
}

.frame-badge.claimed .frame-badge__bg .frame-badge__right
{
	wash-color: frame-badge-claimed-color-right;
}

.reveal-claimed .frame-badge.claimed .frame-badge__bg
{
	animation-name: frame-badge-reveal-claimed;
	animation-duration: 0.3s;
	animation-delay: 0s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 1;
}

.claimed .frame-badge.claimed
{
	visibility: visible;
}

@keyframes 'frame-badge-reveal-claimed'
{
	0%
	{
		transform: rotateX(-90deg);
		brightness: 10;
	}
	
	100%
	{
		transform: rotateX(0deg);
		brightness: 1;
	}
	
}

.rrs__xpbar__container
{
	width: 320px;
	flow-children: right;
	height: 48px;
	horizontal-align: center;
	visibility: collapse;
}

.care-package-eligible .rrs__xpbar__container
{
	visibility: visible;
}

.rrs__xpbar__container .rrs__xpbar
{
	width: 230px;
	vertical-align: center;
	height: fit-children;
	box-shadow: shadowOffset;
}

.rrs__xpbar__container .rrs__xpbar .rrs__xpbar__bar
{
	background-color: #000000d3;
	height: 8px;
	width: 100%;
}

.rrs__xpbar__container .rrs__xpbar .rrs__xpbar__bar--inner
{
	background-color: gradient(linear, 0% 0%, 100% 0%, from (#505050), to(#919191));
	width: 50%;
	height: 100%;
}

.care-package-eligible .rrs__xpbar__container .rrs__xpbar .rrs__xpbar__bar--inner
{
	background-color: gradient(linear, 0% 0%, 100% 0%, from (#0A5A84), to(#5DC6FF));
}

.rrs__xpbar__container .rrs__xpIcon
{
	width: 48px;
	height: 48px;
}

.rrs__xpbar__container .rrs__xpbar__care-package
{
	margin-left: 10px;
	vertical-align: center;
	visibility: collapse;
}

.care-package-eligible .rrs__xpbar__container .rrs__xpbar__care-package
{
	visibility: visible;
}

