:root {
    --launch-countdown-width     : 50px;
    --launch-countdown-height    : 50px;
    --launch-countdown-perimeter : 3px solid var(--theme-accent-0);

    --color-launch-deferred      : var(--theme-accent-5);
}
.info > .ajaxcomplex.__launchpad {
    position : relative;
}
.info > .ajaxcomplex.__launchpad:before {
    font-family : var(--FontAwesome);
    content     : var(--FA-icon-rocket);
}

.img-btn[data-action="shuttle-launch"][data-launch-ready] {
    background-color : var(--theme-accent-3);
    box-sizing       : border-box;
}
.img-btn[data-action="shuttle-launch"][data-__shuttle-in-flight] {
    color      : var(--theme-accent-0) !important;
    box-shadow : inset 0 0 0 1px var(--theme-accent-0);
}
.img-btn[data-action="shuttle-launch"][data-__shuttle-in-flight]:before {
    content : var(--FA-icon-rocket-launch);
}



.ajaxcomplex.__overview {
    position              : fixed;
    top                   : 50px;
    right                 : 5px;
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    height                : auto;
    width                 : auto;
    /*transition            : var(--standard-transition);*/
    padding               : var(--std-unit-x3);
    background-color: var(--theme-popup-bg);
    box-shadow            : var(--standard-box-shadow);
    border-radius         : var(--theme-border-radius);
    z-index               : var(--z-index-popup);
}

.ajaxcomplex.__monitor {
    display               : grid;
    grid-template-areas   :
        "primary gap secondary";
    grid-template-columns : min-content var(--std-unit-x1) min-content;
    padding               : var(--std-unit-x3);
    align-items           : center;
    justify-content       : center;
}

.ajaxcomplex.__monitor > .__primary {
    position        : relative;
    display         : flex;
    align-items     : center;
    justify-content : center;
    grid-area       : primary;
    width           : 50px;
    height          : 50px;
    border-radius   : 50px;
}

.ajaxcomplex.__monitor > .__primary:hover {
    background-color : var(--color-translucent-black-lvl-0);
}
.ajaxcomplex.__monitor > .__primary > .__icon {
    grid-area       : icon;
    display         : flex;
    align-items     : center;
    justify-content : center;
}
.ajaxcomplex.__monitor > .__primary > .__icon:before {
    content     : var(--FA-icon-rocket);
    transform   : translate(-1px, 2px);
    font-family : var(--FontAwesome);
    font-size   : 3rem;
}
.ajaxcomplex.__monitor > .__primary > .__icon.__in-flight:before {
    content : var(--FA-icon-rocket-launch);
}
.ajaxcomplex.__monitor > .__primary > .__icon.__deferred:after {
    position    : absolute;
    bottom      : 12px;
    right       : 8px;
    content     : var(--FA-icon-timer);
    font-size   : .8rem;
    font-family : var(--FontAwesome);
    color       : var(--theme-accent-0);
}


.ajaxcomplex.__monitor > .__secondary {
    grid-area           : secondary;
    display             : grid;
    grid-template-areas :
        "shuttleID shuttleID"
        "flightStatus reentry"
        "payloads_launchOnce payloads_launchRepeat"
        "launchType abort";
}
.ajaxcomplex.__monitor > .__secondary > .__shuttleID {
    display         : flex;
    align-items     : center;
    justify-content : center;
    grid-area       : shuttleID;
    font-size       : 1rem;
}

.ajaxcomplex.__monitor > .__secondary > .__indicator {
    display          : flex;
    align-items      : center;
    justify-content  : center;
    border-radius    : 50px;
    background-color : var(--color-translucent-black-lvl-0);
    height           : 18px;
    width            : 18px;
    color            : var(--color-translucent-black-lvl-1);
    margin           : var(--std-unit-x1);
}
.ajaxcomplex.__monitor > .__secondary > .__indicator:before,
.ajaxcomplex.__monitor > .__secondary > .__indicator:after {
    font-family : var(--FontAwesome);
    font-size   : 1rem;
    font-weight : bold;
}

/** flight status indicator **/
.ajaxcomplex.__monitor > .__secondary > .__indicator[data-flight-status] {
    grid-area : flightStatus;
}
.ajaxcomplex.__monitor > .__secondary > .__indicator[data-flight-status]:before {
    content   : var(--FA-icon-shuttle);
    transform : rotate(-45deg) translate(1px, 0px);
}

/** reentry status indicator **/
.ajaxcomplex.__monitor > .__secondary > .__indicator[data-reentry] {
    grid-area : reentry;
}
.ajaxcomplex.__monitor > .__secondary > .__indicator[data-reentry]:before {
    content : var(--FA-icon-parachute-box);
}


/** payload bay status indicator (launch once) **/
.ajaxcomplex.__monitor > .__secondary > .__indicator[data-payload-launch-once] {
    grid-area : payloads_launchOnce;
    position  : relative;
}
.ajaxcomplex.__monitor > .__secondary > .__indicator[data-payload-launch-once]:before {
    content : var(--FA-icon-boxes-stacked);
}
.ajaxcomplex.__monitor > .__secondary > .__indicator[data-payload-launch-once]:after {
    content     : attr(data-payload-count);
    position    : absolute;
    top         : -3px;
    right       : -3px;
    color       : var(--theme-accent-6);
    font-weight : bold;
    font        : revert;
}


/** payload bay status indicator (launch repeat) **/
.ajaxcomplex.__monitor > .__secondary > .__indicator[data-payload-launch-repeat] {
    grid-area : payloads_launchRepeat;
    position  : relative;
}
.ajaxcomplex.__monitor > .__secondary > .__indicator[data-payload-launch-repeat]:before {
    content : var(--FA-icon-box-circle-check);
}
.ajaxcomplex.__monitor > .__secondary > .__indicator[data-payload-launch-repeat]:after {
    content     : attr(data-payload-count);
    position    : absolute;
    top         : -1px;
    right       : -1px;
    color: var(--theme-accent-0);
    font-weight : bold;
}


/** launch type indicator **/
.ajaxcomplex.__monitor > .__secondary > .__indicator[data-launch-type] {
    grid-area : launchType;
    position  : relative;
}

.ajaxcomplex.__monitor > .__secondary > .__indicator[data-launch-type]:not(.__interval):not(.__trigger):before {
    content : var(--FA-icon-code);
}
.ajaxcomplex.__monitor > .__secondary > .__indicator[data-launch-type].__interval:before {
    content   : var(--FA-icon-timer);
    color: var(--theme-accent-3);
    font-size : 1.4rem;
}
.ajaxcomplex.__monitor > .__secondary > .__indicator[data-launch-type].__trigger:after {
    content   : var(--FA-icon-bolt);
    color     : var(--theme-accent-2);
    position  : absolute;
    top       : 50%;
    left      : 50%;
    transform : translate(-50%, -50%);
    font-size : .8rem;
}

/** abort status indicator **/
.ajaxcomplex.__monitor > .__secondary > .__indicator[data-abort] {
    grid-area : abort;
}
.ajaxcomplex.__monitor > .__secondary > .__indicator[data-abort]:before {
    content   : var(--FA-icon-ban);
    transform : translate(0px, 0px);
}

.ajaxcomplex.__monitor > .__secondary > .__indicator.__active {
    color : var(--theme-font-1);
}



.__countdown {
    position : absolute;
    /* top: 50%; */
    /* transform: translateY(-50%); */
    /* left: -5px; */
}

/* -- CIRCLE -- */
.__countdown {
    position      : absolute;
    width         : var(--launch-countdown-width);
    height        : var(--launch-countdown-height);
    border-radius : 999px;
}

.__countdown > .left-half,
.__countdown > .right-half {
    float    : left;
    width    : 50%;
    height   : 100%;
    overflow : hidden;
}
.__countdown > .left-half > .inside,
.__countdown > .right-half > .inside {
    content                           : "";
    display                           : block;
    width                             : 100%;
    height                            : 100%;
    box-sizing                        : border-box;
    border                            : var(--launch-countdown-perimeter);
    -webkit-animation-duration        : 3s;
    -webkit-animation-iteration-count : 1;
    -webkit-animation-timing-function : linear;
    -webkit-animation-fill-mode       : forwards;
}

.__countdown > .left-half > .inside {
    border-right              : none;
    border-top-left-radius    : 999px;
    border-bottom-left-radius : 999px;
    -webkit-transform-origin  : center right;
    -webkit-animation-name    : field-countdown-l-rotate;
}

.__countdown > .right-half > .inside {
    border-left                : none;
    border-top-right-radius    : 999px;
    border-bottom-right-radius : 999px;
    -webkit-transform-origin   : center left;
    -webkit-animation-name     : field-countdown-r-rotate;
}