
                                                 
@define tierListWidth: 532px; 

.op-tiers
{
    height: 100%;
    width: 50%;
}

.op-tiers__list-container
{
                             
    horizontal-align:right;
    height: 100%;
    perspective: 1000;
    perspective-origin: 0% 50%;
    transform-origin: 0% 50%;
    transform: rotatey(90deg) translateY( 32px );

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

.show .op-tiers__list-container
{
    transform: rotatey(8deg) translateY( 32px );
    visibility: visible;
    transition-property: transform;
    transition-duration: .3s;
    transition-timing-function: ease-in-out;
}

.op-tiers__list-container VerticalScrollBar
{
    horizontal-align: left;
    width: 4px;
}

.op-tiers__list
{
    height: 100%;
    width: 590px;
    padding-left:16px;
    overflow: squish scroll;
    flow-children: down;
    opacity-mask: url( "file://{images}/masks/top-bottom-fade-2.png" );
    padding-bottom: 100px;
}

                  
.op-tiers__list__title
{
    flow-children: right; 
    horizontal-align: right;
}

.op-tiers__list__title__total-stars-image
{
    vertical-align: center;
    wash-color: grey;
}

.op-tiers__list__title__total-stars
{
    font-size: 42px;
    text-shadow: -2px 1px 2px 4 #000000;
    color: white;
    font-weight: medium;
    text-align: center;
    horizontal-align: center;
    vertical-align: center;
}

.op-tiers__list__title__total-stars.title
{
    font-size: 32px;
    color:rgb(255, 255, 255);
    text-shadow: none;
    font-weight: lighter;
    text-align: left;
    horizontal-align: left;
    vertical-align: center;
}

.op-tiers__list__title__total-stars.subtitle
{
    color:rgb(255, 255, 255);
    margin-top: 8px;
    padding: 8px;
    font-size: 16px;
    text-shadow: none;
    font-weight: lighter;
    text-align: left;
    horizontal-align: left;
    vertical-align: center;
}

.op-tiers-top-border
{
    border-top: 1px solid opAccentColor;
}

            
.op-tiers__list__header_container
{
    width: 100%;
    flow-children: right;
    transform: translateY( 0% );
    height: 32px;
    margin-bottom: 8px;

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

.op-tiers__list__header_container.hidden
{
    width: 100%;
    flow-children: right;
                                        
    

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

.op-tiers__list__header_container.sticky.hidden
{
                                         
    opacity: 0;

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

.op-tiers__list__header_container.sticky
{
    z-index: 2;
    opacity: 1;
                                        

    padding-left: 16px;
    visibility: visible;
}

.op-tiers__list__header__reward
{
    width: rewardWidth;
    height: 100%;
    vertical-align: center;
    background-color: opAccentColor;
                                                 
}

.op-tiers__list__header__reward.free
{
    width: rewardWidth;
    height: 100%;
    vertical-align: center;
    background-color: opAccentColorDark;
                                                              
}

.op-tiers__list__header__tier
{
    width: rewardTierWidth;
    height: 100%;
    vertical-align: center;
    background-color: none;
    margin: 0px 1px;
    opacity: .6;
}

.op-tiers__list__header__label
{
    font-size: 18px;
    color:rgb(20, 20, 20);
    font-weight: bold;
    text-align: center;
    horizontal-align: center;
    text-transform: uppercase;
}

.op-tiers__list__header__label.notexttransform
{
    text-transform: none;
    text-shadow: -2px 1px 2px 4 #000000;
    font-size: 24px;
}

              
.op-tiers__reward-row
{
    flow-children: none;
    margin-bottom: 4px;
    padding-right: 16px;
    width: 100%;
}

.op-tiers__reward-row.shrunk 
{
    max-height: 32px;
}

            
.op-tier__reward-container,
.op-tier__reward-carousel
{
    width: rewardWidth;
    height: 0;
    ui-scale: 100%;
    transform-origin: 50% 50%;
    vertical-align: center;
    flow-children: none;
    z-index: 0;
                                                 
                                  

    transition-property: transform, ui-scale, height, brightness;
    transition-duration: .2s, .2s, .8s, 2s;
    transition-timing-function: ease-in-out;
}

.op-tier__reward-container CarouselNav
{
	vertical-align: bottom;
	transform: rotateZ(90deg);
	horizontal-align: right;
	margin-bottom: 20px;
	ui-scale: 75%;
}

.show .op-tier__reward-container,
.show .op-tier__reward-carousel
{
    height: rewardHeight;

    transition-property: transform, ui-scale, height;
    transition-duration: .2s, .2s, .8s;
    transition-timing-function: ease-in-out;
}

.op-tier__reward-container.empty
{
    background-color: rgba( 15, 7, 26, 0.6 );
    -s2-mix-blend-mode: additive; 
}

.op-tier__reward-container.free
{
    x: 330px;
}

.op-tier__reward-container .RadioBox
{
    visibility:collapse;
}

.op-tier__reward-container:selected
{
    transform: translatex(2.0%) translatey(0%);
    ui-scale: 115%;

    z-index: 2;
    brightness: 1.4;
                                   
    box-shadow: #000000bd -3px -2px 8px 4px;
    transition-property: transform, ui-scale, brightness;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
}

.op-tier__reward-container VerticalScrollBar
{
    horizontal-align: right;
    width: 4px;
    opacity: .05;
    margin-right: 8px;
}

.op-tier__reward
{ 
    width: rewardWidth;
    height: rewardHeight;
    vertical-align: center;
    background-color: opAccentColorGrey;
    flow-children: none;
    opacity: .7;
}

.unlocked .op-tier__reward
{
    background-color: opAccentGradientRight;
}

.free.unlocked .op-tier__reward
{
    background-color: opAccentGradient;
}

.op-tier__reward-carousel .op-tier__reward
{
    height: 50%;
    width: 100%;
    margin-bottom: 2px;
    vertical-align: top;
}

.op-tier__reward__selected,
.op-tier__reward-container:selected .op-tier__reward-carousel .op-tier__reward__selected
{
    visibility: visible;
    wash-color: opAccentColorDark;
    width: 95%;
    height: 95%;

    vertical-align: center;
    horizontal-align:center;
    opacity: .5;

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

.op-tier__reward-container:selected .op-tier__reward__selected,
.op-tier__reward-container:selected .op-tier__reward-carousel .op-tier__reward:selected .op-tier__reward__selected
{
    visibility: visible;
    width: 100%;
    height: 100%;
    wash-color: opAccentColorLight;

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

.op-tier__reward-carousel__page
{
    width: 100%;
    height: 100%;
    flow-children: down;

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

.op-tier__reward-carousel__page.Focused
{
    opacity: 1;
}

.PreviouslyLeft.op-tier__reward-carousel__page:not(.Focused)
{
	transform: translatey( -100% );
	opacity: 1;
}

.Offscreen.PreviouslyLeft.op-tier__reward-carousel__page:not(.Focused)
{
    transform: translatey( -100% );
    opacity: 0;
}

.PreviouslyRight.op-tier__reward-carousel__page:not(.Focused)
{
	transform: translatey( 100%);
	opacity: 1;
}

.Offscreen.PreviouslyRight.op-tier__reward-carousel__page:not(.Focused)
{
    transform: translatey( -100% );
    opacity: 0;
}

.op-tier__reward__item-image
{
    vertical-align: center;
    horizontal-align: center;
    width: 80%;

    img-shadow: 2px 2px 3px #000000;

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

.op-tier__reward-carousel .op-tier__reward__item-image
{
    img-shadow: none;
    padding: 8px;
}

.op-tier__reward__status-icon,
.unlocked .op-tier__reward__status-icon.check,
.complete .op-tier__reward__status-icon.check
{
    padding: 8px;
    margin: 8px 8px; 
    background-color: rgba(0, 0, 0, 0.603);
    border-radius: 50%;
    border: 1px solid grey;
                                  
    wash-color: opAccentColorLight;
    visibility: visible;
}

.unlocked .op-tier__reward__status-icon,
.op-tier__reward__status-icon.check
{
    visibility: collapse;
}

.free .op-tier__reward__status-icon
{
    horizontal-align: left;
}

.op-tier__reward__status-icon.check
{
    img-shadow: 0px 0px 4px 1.0 opAccentColorLight;
                                  
}

.op-tier__reward-tier
{
    width: rewardTierWidth;
    height: rewardHeight;
    x:rewardWidth;
    vertical-align: center;

    background-image: url("file://{images}/icons/ui/mission_star.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 60% auto;
    background-img-opacity: .04;
}

.shrunk .op-tier__reward-tier
{
    background-image: none;
}

.op-tier__reward-tier__label
{
    text-align: center;
    horizontal-align: center;
    font-weight: bold;
    font-size: 48px;
    color: rgb(105, 105, 105);
    text-shadow: 0px 0px 5px 2.0 rgba(0, 0, 0, 0.534);
}

.shrunk .op-tier__reward-tier__label
{
    font-size: 28px;
    font-weight: medium;
}

.unlocked .op-tier__reward-tier__label
{
    opacity: 0.8;
    color: opAccentColorLight;
    vertical-align:center;
 
    text-shadow: 0px 0px 5px 4.0 opAccentColor;
}

.op-tier__reward__status-highlight
{
    height: 100%;
    width: 0px;
    wash-color: opAccentColorLight;
    visibility: collapse;
    horizontal-align: right;
    transform: scaleX( -1 );
    background-color: gradient( linear, 0% 0%, 100% 0%, from( white ), color-stop( 0.4, white ), color-stop( 0.4, rgba(255, 255, 255, 0.333) )  ,to( rgba(255, 255, 255, 0) ) );

    transition-property: width;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
}

.free .op-tier__reward .op-tier__reward__status-highlight
{
                                  
    transform: scaleX( 1 );
    horizontal-align: left;
}

.unlocked .op-tier__reward__status-highlight
{
    visibility: visible;
    background-color: gradient( linear, 0% 0%, 100% 0%, from( white ), color-stop( 0.4, white ), color-stop( 0.4, rgba(255, 255, 255, 0.333) )  ,to( rgba(255, 255, 255, 0) ) );
    width: 8px;

    transition-property: width;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
}

                     
.op-tier__nav-container
{
    margin: 16px 600px 16px 16px;
    height: 100%;
    horizontal-align: right;
    transform-origin: 0% 50%;

    transform: rotatey(90deg) translateY( 12px );
    transition-property: transform;
    transition-duration: 0.60s;
    transition-timing-function: ease-in-out;
}

.show .op-tier__nav-container
{
    transform: rotateY(8deg) translateY( 12px );
    transition-property: transform;
    transition-duration: 0.60s;
    transition-timing-function: ease-in-out;
}

.op-tier__nav-hightlight
{
    min-width: 90px;
    visibility: collapse;

    background-color: opAccentColorDark;
    border-bottom: 2px solid opAccentColorLight;

    transition-property: position;
    transition-duration: 0.00s;
    transition-timing-function: linear;
}

.op-tier__nav-hightlight Label
{
    font-size: 14px;
    font-weight: bold;
    padding: 8px;
    color: white;

    transition-property: position;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
}

.op-tier__nav__entry
{
   height: fill-parent-flow(.5);
   min-width: 100px;
   padding-left: 16px;
   tooltip-position: top;
   tooltip-body-position: 0% 50%;
}

.op-tier__nav__entry .RadioBox
{
    visibility: collapse;
}

.op-tier__nav__entry Label
{
    margin-left: 0px;
    min-width: 40px;
    color: baseText;
}

.op-tier__nav__entry:selected Label
{
    border-bottom: 2px solid opAccentColorLight;
}

.op-tier__nav__entry.landmark
{
    height: fill-parent-flow(.5);
}


.op-tier__nav__entry.more-rewards
{
    padding: 0px 8px;
    background-color: opAccentColorDark;
    border-radius: 3px;
}

.op-tier__nav__entry.more-rewards:hover
{
    brightness: 2;
}

.op-tier__nav__entry__label
{
    font-size: 12px;
    font-weight: bold;
}

                    

.op-tier__inspect
{
    horizontal-align: right;
    vertical-align: center;
    width: 50%;
    height: 100%;
                             
    flow-children: down;

    transition-property: transform;
    transition-duration: 0.2s;
    transition-timing-function: linear;
}

.show .op-tier__inspect
{
    transform: rotatey( 0deg);

    transition-property: transform;
    transition-duration: 0.2s;
    transition-timing-function: linear;
}

.op-tier__inspect__title_container
{
    flow-children: right;
    horizontal-align: center;
    padding-top:128px;
    margin-bottom: 16px;
    z-index: 3;
}

.op-tier__inspect__title_container .op-tiers__list__title__total-stars.title
{
    text-overflow: shrink;
    max-width: 512px;
}

.op-tier__inspect__image-model__container
{
    margin-left: inspectMargin;
                                                  
                                              
    height: 100%;
    width: 100%;
    border-left: 1px solid opAccentColorGrey;

                                                                                                                       

    transition-property: height;
    transition-duration: 0.2s;
    transition-timing-function: linear;
}

.transition.op-tier__inspect__image-model__container
{
    brightness: 20;
}

.op-tier__inspect__image-model__set
{
    wash-color: grey;
    opacity: 1;
 
    height: width-percentage(75%);
    width: 80%;
    vertical-align: center;
    horizontal-align:center;
    -s2-mix-blend-mode: screen;
    opacity-mask: url( "file://{images}/masks/top-bottom-fade.png" );

    transition-property: transform;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
}

.transition .op-tier__inspect__image-model__set
{
    transform: scale3d( 1.1, 1.1, 1.1 );
    vertical-align: center;
}

.tall .op-tier__inspect__image-model__set
{
    height: width-percentage(75%);
    width: 80%;
    opacity:1;
    transform-origin: 50% 50%;

    transform: translateY( -10% ) scale3d( 1.4, 1.4, 1.4 );
}

.op-tier__inspect__info__container
{
    width: 512px;
    max-height: 160px;

    padding: 16px;
    flow-children: down;
    margin-left: inspectMargin; 
}

.op-tier__inspect__model
{
    height: 100%;
    width: 100%;
    vertical-align: bottom;
}

.op-tier__inspect__image
{
    height: width-percentage(75%);
    width: 80%;
    vertical-align: center;
    horizontal-align:center;
}

.op-tier__inspect__image
{
    padding: 72px;
}

#id-tiers-inspect-smoke{
    -s2-mix-blend-mode: screen;
}

.op-tier__inspect___footer
{

    flow-children: down;
    margin-bottom: 64px;
    width: 100%;
    vertical-align: bottom;
    horizontal-align: center;
}

.op-tier__inspect__model-image___name
{
    vertical-align: bottom;
    horizontal-align: center;
    text-align: center;
    margin: 0px;
    padding: 8px 0px;

    font-size: 18px;
    font-weight: normal;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: gradient( linear, 0% 0%, 0% 100%, from( rgb(253, 253, 253) ), to( rgba(255, 255, 255, 0.1)) );
    text-shadow: 0px 0px 2px 2 #0c0c0c86;
                                                                                                               
}

.op-tier__inspect__model-image___name.large
{
    font-size: 32px;
}

RadioButton:hover .op-tier__inspect__model-image___name,
RadioButton:selected .op-tier__inspect__model-image___name,
RadioButton:enabled:hover .op-tier__inspect__model-image___name
{
    color: gradient( linear, 0% 0%, 0% 100%, from( rgb(253, 253, 253) ), to( rgba(255, 255, 255, 0.1)) );
}

.op-tier__inspect__pips-container
{
    padding: 0px 16px;
    horizontal-align: center;
    flow-children: right;
}

.op-tier__inspect__btn-next
{
    transform: rotateZ( -90deg );
}

.op-tier__inspect__btn-prev
{
    transform: rotateZ( 90deg );
}

.op-tier__inspect__pips
{
    vertical-align:center;
    flow-children: right;
}

.op-tier__inspect__pips__btn
{
    width: 24px;
    height: 18px;
}

.op-tier__inspect__pips__btn:hover
{
    brightness: 5;
}

.op-tier__inspect__pips__btn:selected
{
    transform: scale3d( 1.5, 1.5, 1.5 );
}

.op-tier__inspect__pips__btn__circle
{
    background-color: rgb(207, 207, 207);
    border-radius: 50%;
    width: 8px;
    height: 8px;
    horizontal-align: center;
    vertical-align:center;
}

.op-tier__inspect__pips__btn .RadioBox
{
    visibility: collapse;
}

.popup-decodable-wash-color-unusual-bg
{
    padding: 64px;
}

                                
 
                
                 
                
                                  
                         
 

                                         
 
                        
                 
    





