/* ======================================================
   XLX824 STAGE 8
   ====================================================== */


/* SYSTEM HEALTH */

.x8-health {

    display: grid;

    grid-template-columns:
        1.25fr
        repeat(5,minmax(0,1fr));

    gap: 1px;

    margin-bottom: 20px;

    overflow: hidden;

    border:
        1px solid #29485c;

    border-radius: 9px;

    background: #29485c;

    box-shadow:
        0 7px 18px
        rgba(0,0,0,.15);
}


.x8-health-title,
.x8-health-item {

    min-height: 63px;

    padding: 11px 13px;

    background: #0e1d28;
}


.x8-health-title {

    background:
        linear-gradient(
            120deg,
            #173548,
            #112734
        );
}


.x8-health-title span,
.x8-health-item span {

    display: block;

    margin-bottom: 5px;

    color: #68899d;

    font-size: 8px;

    font-weight: 850;

    letter-spacing: .55px;

    text-transform: uppercase;
}


.x8-health-title strong {

    color: #eaf5fa;

    font-size: 15px;
}


.x8-health-item strong {

    font-size: 10px;

    font-weight: 850;
}


.x8-ok strong {

    color: #4bdaa0;
}


.x8-bad strong {

    color: #ff7180;
}


/* MORE PROMINENT TX */

.x7-live-badge {

    min-width: 62px;

    padding: 5px 8px !important;

    border-color:
        #43e59f !important;

    background:
        linear-gradient(
            180deg,
            #18835a,
            #12553c
        ) !important;

    color: #effff7 !important;

    animation:
        x8txpulse 1.35s ease-in-out infinite;
}


@keyframes x8txpulse {

    0% {
        box-shadow:
            0 0 4px
            rgba(66,225,157,.22);
    }

    50% {
        box-shadow:
            0 0 14px
            rgba(66,225,157,.60);
    }

    100% {
        box-shadow:
            0 0 4px
            rgba(66,225,157,.22);
    }
}


/* Keep recent activity easier to scan */

.x7-table td {

    padding-top: 14px !important;

    padding-bottom: 14px !important;
}


.x7-call {

    font-size: 15px !important;
}


/* Active Modules independently scrollable */

.x7-modules {

    max-height: 680px;

    overflow-y: auto !important;

    scrollbar-width: thin;

    scrollbar-color:
        #2b5870
        #0c1922;
}


.x7-modules::-webkit-scrollbar {

    width: 8px;
}


.x7-modules::-webkit-scrollbar-track {

    background: #0c1922;
}


.x7-modules::-webkit-scrollbar-thumb {

    background: #2b5870;

    border-radius: 8px;
}


/* Sticky module pane title */

.x7-modules > .x7-panel-header {

    position: sticky;

    top: 0;

    z-index: 10;

    box-shadow:
        0 4px 10px
        rgba(0,0,0,.22);
}


/* Protocol bar refinement */

.x7-protocol-bar {

    min-height: 51px !important;
}


.x7-protocol-total {

    min-width: 60px !important;

    padding:
        6px 9px !important;

    font-size: 10px !important;
}


/* Health responsive */

@media (max-width: 1350px) {

    .x8-health {

        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

}


@media (max-width: 750px) {

    .x8-health {

        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


@media (max-width: 450px) {

    .x8-health {

        grid-template-columns: 1fr;
    }

}