.party-panel
{
    width: 100%;
    visibility: visible;
    flow-children: right;
    margin-left: 96px;
    horizontal-align: left;
}

.party-panel .mainmenu-navbar__seperator
{
    margin-left: 0px;
    background-color: rgba(255, 255, 255, 0.438);
}

.party-btn
{
    height: 96px;
    padding-left: 2px;
    width: 640px;
    vertical-align: top;
    max-width: 640px;
    transition-property: brightness, height;
    transition-duration: .5s;
    transition-timing-function: ease-in-out;
}

.party-btn__icon
{
    vertical-align: center;
    horizontal-align: center;
    margin-right: 16px;
    wash-color: blueColorDark;
    transition-property: wash-color;
    transition-duration: .25s;
    transition-timing-function: ease-in-out;
}

.party-status__info-icon
{
    vertical-align: center;
    horizontal-align: center;
    margin: 16px;
}

.party-play-container
{
    height: 100%;
    width: fit-children;
    transform: translatey( 0 );
    transition-property: transform;
    transition-duration: .25s;
    transition-timing-function: ease-in-out;
}

.party-play-container.hidden
{
    transform: translateY( 100% );
    transition-property: transform;
    transition-duration: .25s;
    transition-timing-function: ease-in-out;
}

.party-btn:Hover .party-btn__icon
{
    brightness: 1.2;
    wash-color: white;
    transition-property: brightness;
    transition-duration: .25s;
    transition-timing-function: ease-in-out;
}

.party-btn:Hover .party-play__title:not(.party-status__text--time)
{
    color: white;
    transition-property: color;
    transition-duration: .25s;
    transition-timing-function: ease-in-out;
}

.party-status-container
{
    flow-children: right;
    transform: translatey( 0px );
    vertical-align: center;
    height: 100%;
    width: fit-children;
    brightness: 1;
    border-radius: btnBorderRadius;
    padding: 8px 8px 8px 0px;
    transition-property: transform, brightness, width;
    transition-duration: .25s;
    transition-timing-function: ease-in-out;
}

.party-status-container.hidden,.party-ongoingmatch-container.hidden
{
    transform: translatey( -100% );
    brightness: 2;
    transition-property: transform, brightness;
    transition-duration: .25s;
    transition-timing-function: ease-in-out;
}

.party-status
{
    flow-children: down;
    vertical-align: center;
}

.party-status__heading
{
    flow-children: right;
    transition-property: wash-color;
    transition-duration: .25s;
    transition-timing-function: ease-in-out;
}

.party-status__status
{
    flow-children: right;
    horizontal-align: left;
    width: fit-children;
    transition-property: wash-color;
    transition-duration: .25s;
    transition-timing-function: ease-in-out;
}

.party-status__notes
{
    flow-children: right;
    horizontal-align: left;
    width: fit-children;
    transition-property: wash-color;
    transition-duration: .25s;
    transition-timing-function: ease-in-out;
}

.party-status__notes.hidden
{
    opacity: 0;
    visibility: collapse;
    transition-property: opacity;
    transition-duration: .25s, .5s;
    transition-timing-function: ease-in-out;
}

.party-status__text
{
    font-size: 22px;
    font-weight: medium;
    text-transform: none;
    color: white;
    vertical-align: center;
    min-width: 50px;
    text-shadow:2px 2px 2px #000000;
    font-family: Stratum2, 'Arial Unicode MS';
    transition-property: transform;
    transition-duration: .5s;
    transition-timing-function: ease-in-out;
}

.party-status__text--subtitle
{
    font-size: 16px;
    text-transform: none;
    text-shadow: 1px 1px 1px #000000;
    vertical-align: center;
}

.party-status__text--subtitletiny
{
    font-size: 14px;
    line-height: 14px;
    text-shadow: 1px 1px 1px #000000;
}

.party-status__text--time
{
    margin-right: 8px;
    font-size: 24px;
    min-width: 70px;
    font-family: Stratum2 Bold Monodigit, 'Arial Unicode MS';
    vertical-align: center;
}

.party-status-warning-icon
{
    padding-right: 8px;
    vertical-align: center;
    wash-color: warningColor;
    img-shadow:1px 1px 2px 2.0 #0000003b;
}

.party-status-warning-icon.hidden
{
    opacity: 0;
    visibility: collapse;
    transition-property: opacity;
    transition-duration: .25s, .5s;
    transition-timing-function: ease-in-out;
}

.party-ongoingmatch-container
{
    transform: translatey( 0px );
    vertical-align: center;
    height: 96%;
    width: 720px;
    brightness: 1;
    background-color: blurBackgroundColor;
    padding: 8px 32px 8px 32px;
    transition-property: transform, brightness, width;
    transition-duration: .25s;
    transition-timing-function: ease-in-out;
}

.party-ongoingmatch-message
{
    width: 360px;
    flow-children: right;
    vertical-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.25);
}

.party-ongoingmatch--subtitle
{
    text-overflow: noclip;
    font-size: 18px;
    font-family: stratum2Font;
    color: white;
    font-weight: medium;
}

.party-ongoingmatch-icon
{
    vertical-align: top;
    margin-right: 16px;
    wash-color: warningColor;
    height: 100%;
    width: height-percentage( 100% );
}

.party-ongoingmatch-abandon
{
    background-color: #d4151fda;
}

.party-controls__avatars-row
{
    vertical-align: top;
    flow-children: right;
    horizontal-align: right;
    margin-right: 112px;
    min-height: 96px;
}

.party-controls__avatars
{
    flow-children: right-wrap;
    height: 96px;
    overflow: clip scroll;
    margin: 0px 0px;
    max-width: 340px;
    opacity: 1;
    padding-top: 12px;
    transition-property: opacity;
    transition-duration: .25s;
    transition-timing-function: ease-in-out;
}

.party-controls__avatars--multi-row
{
    padding-top: 12px;
}

.party-controls__avatars.hidden
{
    visibility: collapse;
    opacity: 0;
    transition-property: opacity;
    transition-duration: .25s;
    transition-timing-function: ease-in-out;
}

.party-controls__avatars-icon
{
    vertical-align: center;
    wash-color: rgb(0, 0, 0);
    opacity: .5;
    border-radius: 5px;
    border: 4px solid White;
}

@keyframes 'new-party-member'
{
    0%
    {
        brightness: .5;
    }
    
    50%
    {
        brightness: 1.5;
    }
    
    100%
    {
        brightness: 1;
    }
    
}

