@define vanity-margin-left: 8px;
@define right-section: 172px;
.vanity-info-container
{
    padding: 0px 4px 8px 4px;
    background-color: blurBackgroundColor;
    horizontal-align: center_nopixelsnap;
    vertical-align: center_nopixelsnap;
    flow-children: down;
    horizontal-align: center;
    vertical-align: bottom;
    transition-property: background-color, x, y;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
}

.vanity-info-seperator
{
    height: 1px;
    width: 80%;
    background-color: rgba(255, 255, 255, 0.171);
    horizontal-align: center;
}

.vanity-xp-prestige
{
    background-color: gradient( linear, 0% 0%, 100% 0%, from( #3a863d ), to( #2d682f ) );
    box-shadow: shadowOffset;
    flow-children: right;
    horizontal-align: center;
    width:78px;
    box-shadow: shadowOffset;
    transition-property: background-color;
    transition-duration: .25s;
    transition-timing-function: ease-in-out;
}

.vanity-xp-prestige.hidden
{
    visibility: collapse;
}

.vanity-xp-prestige:hover
{
    background-color: positiveColor;
    transition-property: background-color;
    transition-duration: .25s;
    transition-timing-function: ease-in-out;
}

.vanity-xp-prestige .vanity-xp-prestige-icon
{
    transform: rotateZ(180deg);
    margin: 4px 0px 4px 4px;
    vertical-align: center;
}

.vanity-xp-prestige .vanity-xp-prestige-label
{
    font-size: 12px;
    margin: 2px;
    text-overflow: noclip;
    width: fit-children;
}

.vanity-info-loc-0,.vanity-info-loc-1,.vanity-info-loc-2,.vanity-info-loc-3,.vanity-info-loc-4,.vanity-info-loc-5,.vanity-info-loc-6,.vanity-info-loc-7,.vanity-info-loc-8,.vanity-info-loc-9
{
    width: 512px;
    transform-origin: 50% 100%;
    flow-children: down;
    x:-256px;
    y: 150px;
    transform: translate3d( -512px, -256px, 0px );
}

.vanity-info-loc-0.move-up,.vanity-info-loc-1.move-up,.vanity-info-loc-2.move-up,.vanity-info-loc-3.move-up,.vanity-info-loc-4.move-up,.vanity-info-loc-5.move-up,.vanity-info-loc-6.move-up,.vanity-info-loc-7.move-up,.vanity-info-loc-8.move-up,.vanity-info-loc-9.move-up
{
    y:-50px;
    x: -290px;
}

.vanity-info-loc-0
{
    z-index: 9;
}

.vanity-info-loc-1
{
    z-index: 8;
}

.vanity-info-loc-2
{
    z-index: 7;
}

.vanity-info-loc-3
{
    z-index: 6;
}

.vanity-info-loc-4
{
    z-index: 5;
}

.vanity-info-loc-5
{
    z-index: 4;
}

.vanity-info-loc-6
{
    z-index: 3;
}

.vanity-info-loc-7
{
    z-index: 2;
}

.vanity-info-loc-8
{
    z-index: 1;
}

.vanity-info-crown-icon
{
    width: 28px;
    height: 28px;
    horizontal-align: center;
    wash-color: gold;
}

.is-leader .vanity-info-crown-icon
{
    opacity: 0;
}

.vanity-info-name
{
    max-height: 24px;
    max-width: 212px;
    color: white;
    horizontal-align:center;
    opacity-mask: url("s2r://panorama/images/masks/fade-right_png.vtex");
    transition-property: color;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
}

.vanity-info-avatar-container
{
    height: fit-children;
    transform: translateX(-5px);
    ui-scale:80%;
    padding-top: 5px;
    width: fit-children;
}

.vanity-info-name-container,.vanity-info-name-xp-container
{
    flow-children: down;
    vertical-align: center;
    height: 64px padding: 0px 8px 0px 0px;
}

.no-valid-xp .vanity-info-name-xp-container
{
    flow-children: none;
}

.vanity-info-xp-container
{
    flow-children: right;
    width: 100%;
}

.vanity-info-xp-icon
{
    height:38px;
    width: 38px;
    horizontal-align: center;
    img-shadow: 1px 1px 4px #000000;
}

#jsHonorIcon
{
    img-shadow: none;
    horizontal-align: center;
    vertical-align: center;
    height:18px;
    width: height-percentage(100%);
    margin-right: 2px;
    transition-property: wash-color;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
}

.vanity-info-xp-bar-container,.vanity-info-name-bar-container
{
    flow-children: down;
    margin-top: 4px;
    margin-bottom: 10px;
    horizontal-align: center;
}

.no-valid-xp .vanity-info-xp-container,.no-valid-xp .vanity-info-xp-bar
{
    visibility: collapse;
}

.no-valid-xp .vanity-info-seperator
{
    visibility: collapse;
}

.vanity-info-xp-bar
{
    height: 3px;
    width: 64px;
    background-color: #000000d3;
}

.vanity-info-xp-bar--inner
{
    height: 8px;
    width: 64px;
    background-color: gradient( linear, 0% 0%, 100% 0%, from ( #2084b9 ), to( #5DC6FF ));
}

.vanity-info-skill-group-container
{
    margin-top: 10px;
    flow-children: right;
    horizontal-align:center;
    height: 26px;
}

.no-valid-rank .vanity-info-skill-group-container,.is-not-leader .vanity-info-crown-icon
{
    opacity: 0;
}

.vanity-info-skillgroup-icon
{
    horizontal-align: center_nopixelsnap;
    vertical-align: center_nopixelsnap;
    background-color: rgba(70, 70, 70, 0.9);
}

.vanity-info-skill-group-label-container
{
    width: right-section;
    height: 100%;
}

.vanity-rank-name
{
    max-width: right-section;
    width: fill-parent-flow(1);
    height: 18px;
    margin-right: 4px;
    horizontal-align: center_nopixelsnap;
    vertical-align: center_nopixelsnap;
    padding: 2px 0px 0px 4px;
    opacity-mask: url("s2r://panorama/images/masks/fade-right_png.vtex");
}

.vanity-info-container:hover
{
    background-color: rgba(255, 255, 255, 0.15);
    transition-property: background-color;
    transition-duration: .2s;
    transition-timing-function: ease-in-out;
}