@define chevron-left-top: 0% 100%, 100% 0%;
@define chevron-left-bottom: 0% 0%, 100% 100%;
@define chevron-right-top: 100% 0%, 0% 100%;
@define chevron-right-bottom: 100% 100%, 0% 0%;

@define not-filled-background-color: rgba(255, 255, 255, 0.10);

.op-mission-card
{
    width: 100%;
    height: 100%;
    opacity: 1;
    transform: translateX(0%);
                                                

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

                                     
 
                                
    

.op-mission-card.show
{
    animation-name: mission-card-show;
    animation-duration: .2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

@keyframes 'mission-card-show'
{
	0%
	{
        transform: translateY(10%);
        opacity: 0;
    }
    
    
    100%
	{
        transform: translateY(0%);
        opacity: 1;
	}
}


.op-mission-card.next
{
    animation-name: mission-card-next;
    animation-duration: .25s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

@keyframes 'mission-card-next'
{
	0%
	{
        transform: translateX(0%);
        opacity: 1;
    }
    
    50%
	{
        transform: translateX(40%);
        opacity: 0;
    }

    51%
	{
        transform: translateX(-40%);
        opacity: 0;
	}
    
    100%
	{
        transform: translateX(0%);
        opacity: 1;
	}
}

.op-mission-card.prev
{
    animation-name: mission-card-prev;
    animation-duration: .25s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-fill-mode: both;
}

@keyframes 'mission-card-prev'
{
	0%
	{
        transform: translateX(0%);
        opacity: 1;
    }
    
    50%
	{
        transform: translateX(-40%);
        opacity: 0;
    }

    51%
	{
        transform: translateX(40%);
        opacity: 0;
	}
    
    100%
	{
        transform: translateX(0%);
        opacity: 1;
	}
}

.op-mission-card__bg
{
    width: 100%;
    opacity: 0;
    brightness: 0.1;
    opacity-mask: url( "file://{images}/masks/top-bottom-fade.png" );
    vertical-align: top;

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

.prev .op-mission-card__bg,
.next .op-mission-card__bg
{
    opacity: 1;

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

.card-missions-locked .op-mission-card__bg
{
    brightness: 0.8;
    opacity-mask: url( "file://{images}/masks/top-bottom-fade.png" );
}

.op-mission-card-contents
{
    width: 100%;
    flow-children: down;
    min-height: 100%;
}

.op-mission-card-contents__info
{
    flow-children: right;
    vertical-align: top;
    width: 100%;
    padding-left: op-missions-left-padding;
    padding-top: 8px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.123);
}

.card-missions-locked .op-mission-card-contents__info
{
    visibility: collapse;
}

.card-missions-locked #id-mission-card-tag-missions-max,
.card-missions-locked #id-mission-card-tag,
.card-missions-locked #id-mission-card-tag-xp
{
    visibility: collapse;
}

.op-mission-card-contents__info__containter
{
    flow-children: right;
    
                                                    
}

.op-mission-card-contents__info__containter.hidden
{
    visibility: collapse;
}

.op-mission-card-contents__info__desc
{
    color: White;
	font-family: Stratum2, 'Arial Unicode MS';
	font-size: 14px;
    font-weight: medium;
    visibility: visible;
    vertical-align: center;
    letter-spacing: 2px;
}

.complete-tag .op-mission-card-contents__info__desc
{
                                    
    font-weight: medium;
}

.op-mission-card__title
{
    padding: 8px;
    margin: 8px 8px; 
    background-color: rgba(0, 0, 0, 0.603);
    border-radius: 50%;
    border: 1px solid grey;
    wash-color: opCompleteColor;
    visibility: visible;
}

.op-mission-card__missions-container
{
    flow-children: down;
    overflow: squish scroll;
    width: 100%;
    padding: 0px 0px;
                                                                                
}

.op-mission-card__mission
{
    width: 100%;
    flow-children: right;
                                 
                                                              
    padding-left: op-missions-left-padding;
	padding-right: op-missions-right-padding;
	padding-top: 25px;
    padding-bottom: 25px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.50);
    background-color: rgba(0, 0, 0, 0.60);

    transition-property: background-color, position;
	transition-duration: 0.20s;
	transition-timing-function: ease-in-out;
}

.hud-mission-panel .op-mission-card__mission
{
    border-bottom: 0px solid rgba(0, 0, 0, 0.0);
    background-color: rgba(0, 0, 0, 0.0);

    padding-left: 4px;
	padding-top: 4px;
    padding-bottom: 4px;
}

.op-mission-card__mission:hover
{
	sound: "UIPanorama.mainmenu_rollover";
}

.op-mission-card__mission:hover:not(:disabled)
{
    background-color: #030303d7;
    transition-property: background-color, position;
	transition-duration: 0.20s;
	transition-timing-function: ease-in-out;
}

.op-mission-card__mission__info
{
    width: fill-parent-flow( 1 );
    flow-children: down;
    vertical-align: center;
    margin-right: 16px;
}

.complete .op-mission-card__mission__icon-container,
.complete .op-mission-card__mission__info
{
    brightness: 0.5;
}

.op-mission-card__mission__icon
{
    visibility: visible;
    vertical-align: center;
    horizontal-align: center;
    padding: 4px;
                          
                                      
    border-radius: 0%;
                   
                    

    transition-property: transform, brightness;
	transition-duration: 0.20s;
	transition-timing-function: ease-in-out;
}

.op-mission-card__mission__icon.nocolor
{
    wash-color: none;
}

.op-mission-card__mission__icon.no-padding
{
    padding: 0px;
}

.op_mission-card__mission__star-container
{
    flow-children: down;
    horizontal-align: center;
    vertical-align: center;
    width: fit-children;
    min-width: 28px;
    opacity: .25;
    margin: 0px 2px;
}

.complete #id-mission-card-icon-complete,
.complete .op_mission-card__mission__star-container,
.complete.op_mission-card__mission__star-container
{
    opacity: 1;
    wash-color: opCompleteColor;
}

.uncommitted .op_mission-card__mission__star-container,
.uncommitted.op_mission-card__mission__star-container
{
    opacity: 1;
    wash-color: opIncompleteColor;
}

.op-mission-card__mission__star
{
    flow-children: left;
    horizontal-align: center;
    vertical-align: center;

    height: 24px;
    width: 24px;
}

.op-mission-card__mission__icon--empty-star
{
    border-radius: 50%;
    border: 3px solid white;
    padding: 2px;
}

.complete .op-mission-card__mission__icon--empty-star
{
    visibility: collapse;
}

.op-mission-card__mission__icon--filled-star
{
    visibility: collapse;
}

.complete .op-mission-card__mission__icon--filled-star
{
    visibility: visible;
}

.op-mission-card__misson-type-or-seperator
{
    flow-children: right;
                                     
    margin-top: 6px;
   
}

.op-mission-card__mission__seperator
{
    height: 60%;
    vertical-align: center;
    width: 1px;
    background-color: opAccentColorLightAlpha;
}

.complete-tag .op-mission-card__mission__icon
{
    wash-color: White;
}

.op_mission-card__mission_name
{
    color: white;
	font-family: notosans, 'Arial Unicode MS';
	font-size: 13px;
    font-weight: bold;
    visibility: visible;
}

.hud-mission-panel .op_mission-card__mission_name
{
    visibility: collapse;
}

.warning.op_mission-card__mission_name
{
    color: warningColor;
    margin-bottom: 8px;
    font-weight: normal;
    line-height: 16px;
    visibility: collapse;
    vertical-align: center;
    height: 19px;
    text-overflow: shrink;
}

.show-uncommitted-warning .warning.op_mission-card__mission_name
{
    visibility: visible;
}

.hud-mission-panel .warning.op_mission-card__mission_name
{
    color: baseText;
}


.PauseMenuModeOnly .hidebar .warning.op_mission-card__mission_name
{
    visibility: collapse;
}

.InlineImage
{
    width: 14px;
    vertical-align: center;
    transform: translateY(0px);
    margin-right: 4px;
    wash-color: warningColor;
}

.hud-mission-panel .InlineImage
{
    wash-color: baseText;
}

.op_mission-card__mission_body
{
                                 
    color: rgb(231, 231, 231);
    font-family: notosans, 'Arial Unicode MS';
    font-size: 12px;
    height: 18px;
    text-overflow: ellipsis;
    width: 100%;
}

.hide-desc .op_mission-card__mission_body
{
    visibility: collapse;
}

.op_mission-card__mission_body--or
{
    width: fit-children;
    font-size: 12px;
    height: fit-children;
    text-align: center;
    horizontal-align: center;
    margin: 0px 8px;
    color: white;
    font-family: Stratum2, 'Arial Unicode MS';
}

.hud-mission-panel .op_mission-card__mission_body
{
    color: baseText;
    font-size: 12px;
    font-weight: medium;
    text-shadow-fast: 1px 1px #000000;
    text-overflow: noclip;
    height: fit-children;
}

.hud-mission-panel .op_mission-card__mission_body--or
{
    font-weight: lighter;
    font-size: 10px;
}

.op_mission-card__mission-section-count,
.op_mission-card__mission-progress-count
{
	font-family: Stratum2, 'Arial Unicode MS';
	font-size: 12px;
    font-weight: medium;
    horizontal-align: center;
    text-overflow: shrink;
}

.op_mission-card__mission-progress-count
{
    margin: 0px 0px 0px 4px;
    font-size: 10px;
    text-align: left;
                      
}

.complete .op_mission-card__mission-section-count,
.complete .op_mission-card__mission-progress-count
{
                                                              
    font-weight: bold;
    color:opCompleteColor;
}

.uncommitted.op_mission-card__mission-section-count,
.uncommitted.op_mission-card__mission-progress-count
{
    color: baseText;
}


.hud-mission-panel .op_mission-card__mission-section-count,
.hud-mission-panel .op_mission-card__mission-progress-count
{
    text-shadow-fast: 1px 1px #000000;
    color: baseText;
}

.op-mission-card__hide-count .op_mission-card__mission-section-count
{
    visibility: collapse;
}

.op-mission-card__mission-progress
{
    flow-children: right;
    width: 100%;
    vertical-align: center;
    height: fit-children;
}

.hidebar .op-mission-card__mission-progress
{
    width: fit-children;
    flow-children: left;
    transform: translateX(-4px);
}

.op-mission-card__mission__bar-container
{
    width: fill-parent-flow( 1 );
    margin: 0px 1.5px;
    vertical-align: center;
    transform: translateY(-6px);
    height: 8px;
    opacity: 1;
}

.hud-mission-panel .op-mission-card__mission__bar-container
{
    height: 5px;
}

.hidebar .op-mission-card__mission__bar-container
{
    opacity: 0;
}

.op-mission-card__mission__bar-container--no-y-offset
{
    transform: translateY(0px);
}

.op_mission-card__bar
{
	width: 100%;
    horizontal-align: center;
	background-color: not-filled-background-color;
    height: 100%;
    flow-children: right;
                             
}

.op_mission-card__bar__inner
{
	width: 0%;
	background-color: opCompleteColor;
	height: 100%;
}

.uncommitted.op_mission-card__bar__inner
{
	width: 0%;
	background-color: opIncompleteColor;
	height: 100%;
}

.uncommitted .op_mission-card__bar
{
    background-color: rgb(249, 255, 160);
}

.op-mission-card__bar__line
{
    width: fill-parent-flow(1);
    height: .5px;
                                    
    background-color: rgba(255, 255, 255, 0.15);
    vertical-align: center;
}

.op-mission-card__mission__bar-container.op_mission-card__mission__bar-container-seq
{
    opacity-mask: url( "file://{images}/masks/side-cheveron.png" );
}

.op-mainmenu__missions__warning
{
    visibility: collapse;
    flow-children: right;
    horizontal-align: center;
    background-color: rgba(0, 0, 0, 0.80);
    padding: 0px 8px;
}

.op-mainmenu__missions__warning Label
{
    color: warningColor;
    text-align: center;
}

.op-mainmenu__missions__warning Image
{
    wash-color: warningColor;
}

.card-missions-locked-container
{
	visibility: collapse;
    horizontal-align: center;
    height: 100%;
}

.card-missions-locked .card-missions-locked-container
{
	visibility: visible;
}

.card-missions-locked-container Label
{
	font-size: 20px;
}

#id-mission-card-tag-timer
{
    visibility: collapse;
}

.hastimer #id-mission-card-tag-timer
{
    visibility: visible;
}

                                           
.op-active-mission-container
{
    width: 640px;
                        
    flow-children: down;
                                                 
    visibility: visible;
}

.op-active-mission-container.hidden
{
    visibility: collapse;
}

.op-active-mission
{
    height: fit-children;
    background-color: rgba(0, 0, 0, 0.267);
    width: 100%;
}

.op-active-mission-tooltip
{
    padding: op-missions-left-padding;
    margin-top:8px;
}

.op-active-mission-container .op-active-mission-tooltip
{
    max-width: 640px;
    width: 640px;
                                               
}

.op-hud-submissions-container
{
    width: 100%;
    height: fit-children;
    flow-children: down;
                           
    opacity-mask: url( "file://{images}/masks/top-bottom-fade-2.png" );
    overflow: clip;
}

.short .op-hud-submissions-container 
{
    max-height: 24px;
    opacity-mask: none;
}

.op-hud-submission-entry
{
    width: 100%;
    height: 16px;
    margin-bottom: 2px;
    flow-children: right;
    height: fit-children;
    vertical-align: center;

    transition-property: position, height, opacity;
	transition-duration: 1.0s;
	transition-timing-function: ease-in-out;
}

.hide-submission.op-hud-submission-entry
{
    height: 0;
    opacity: 0;
    visibility: collapse;
    margin-bottom: 0px;

    transition-property: position, height, opacity;
                               
	transition-duration: 1.0s;
	transition-timing-function: ease-in-out;
}

.op-hud-submission-entry__line
{
    width: 100%;
    transform: scale3D( 0, 1 ,1 );
    transform-origin: 0% 0%;
    height: 2px;
    vertical-align: center;
    background-color: white;
    opacity: 0;

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

.uncommitted .op-hud-submission-entry__line
{
    opacity: 1;
    transform: scale3D( 1, 1 ,1 );

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

.short .op-hud-submission-entry
{
    margin-bottom: 8px;
}

.op-hud-submissions__checkbox
{
    width: 10px;
    height: 10px;
    border-radius: 1px;
    border: 1px solid baseText;
    vertical-align: center;

    margin-right: 4px;
    opacity: .5;

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

.uncommitted .op-hud-submissions__checkbox
{
    background-image: url( "file://{images}/icons/ui/checkbox.svg" );
    background-size: 100% 100%;
    brightness: 2.0;
}

.op-hud-submissions__text
{
	font-family: Stratum2, 'Arial Unicode MS';
	font-size: 13px;
    font-weight: light;
    visibility: visible;
    vertical-align: center;
    letter-spacing: 0px;
}

.op-hud-submissions__progress
{
    font-family: Stratum2, 'Arial Unicode MS';
    font-size: 13px;
    font-weight: medium;
    vertical-align: center;
    letter-spacing: 0px;
    margin-left: 4px;
}
