/* ================================
   XLX820 STAGE 7
   ================================ */

.x7-shell {
    width: 100%;
}


/* STATUS */

.x7-status-grid {

    display: grid;

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

    gap: 12px;

    margin-bottom: 13px;
}


.x7-stat {

    min-height: 103px;

    padding: 16px;

    border:
        1px solid #29485c;

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #142938,
            #0d1b26
        );

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


.x7-primary-stat {

    border-color: #197da6;

    background:
        linear-gradient(
            145deg,
            #143b50,
            #0d2533
        );
}


.x7-stat-name {

    display: block;

    margin-bottom: 7px;

    color: #7899ad;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: .7px;

    text-transform: uppercase;
}


.x7-stat strong {

    display: block;

    margin-bottom: 5px;

    color: #f3f9fc;

    font-size: 20px;
}


.x7-stat em {

    color: #708da0;

    font-size: 9px;

    font-style: normal;
}


.x7-primary-stat em {

    color: #43dc9a;

    font-weight: 850;
}


/* PROTOCOL BAR */

.x7-protocol-bar {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;

    min-height: 47px;

    margin-bottom: 20px;

    padding: 9px 12px;

    border:
        1px solid #29485c;

    border-radius: 9px;

    background: #0e1d28;
}


.x7-protocol-bar > strong {

    margin-right: 7px;

    color: #7798ab;

    font-size: 9px;

    letter-spacing: .7px;

    text-transform: uppercase;
}


.x7-protocol-total {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 52px;

    padding: 5px 8px;

    border-radius: 5px;

    font-size: 9px;

    font-weight: 850;
}


.x7-protocol-total b {

    margin-left: 6px;

    font-size: 11px;
}


/* LAYOUT */

.x7-layout {

    display: grid;

    grid-template-columns:
        minmax(0,3.35fr)
        minmax(360px,1fr);

    gap: 21px;

    align-items: start;
}


.x7-panel,
.x7-modules {

    overflow: hidden;

    border:
        1px solid #29485c;

    border-radius: 11px;

    background:
        linear-gradient(
            180deg,
            #112431,
            #0b1923
        );

    box-shadow:
        0 9px 23px
        rgba(0,0,0,.22);
}


.x7-panel-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 67px;

    padding: 14px 18px;

    border-bottom:
        1px solid #29485c;

    background:
        linear-gradient(
            100deg,
            #162f40,
            #122735
        );
}


.x7-kicker {

    color: #41c3ff;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 1.2px;
}


.x7-panel-header h2 {

    margin: 2px 0 0;

    color: #f2f8fb;

    font-size: 20px;

    font-weight: 650;
}


.x7-event-total {

    padding: 5px 9px;

    border:
        1px solid #36596f;

    border-radius: 5px;

    background: #0c1b25;

    color: #a9c5d6;

    font-size: 9px;
}


/* ACTIVITY TABLE */

.x7-scroll {

    overflow-x: auto;
}


.x7-table {

    width: 100%;

    border-collapse: collapse;
}


.x7-table th {

    padding: 11px 12px;

    border-bottom:
        1px solid #29485c;

    background: #0e202c;

    color: #809fb3;

    text-align: left;

    font-size: 9px;

    font-weight: 850;

    letter-spacing: .45px;

    text-transform: uppercase;
}


.x7-table td {

    padding: 13px 12px;

    border-bottom:
        1px solid #1d3444;

    color: #dce8ef;

    font-size: 13px;

    vertical-align: middle;
}


.x7-table tbody tr:nth-child(even) {

    background:
        rgba(26,54,73,.25);
}


.x7-table tbody tr:hover {

    background:
        rgba(49,111,143,.25);
}


/* LIVE TX */

.x7-live-row {

    background:
        rgba(18,111,76,.22)
        !important;
}


.x7-live-row td {

    border-bottom-color:
        #285e4a;
}


.x7-state-cell {

    width: 48px;

    text-align: center;
}


.x7-live-badge {

    display: inline-block;

    padding: 4px 7px;

    border:
        1px solid #32ce8b;

    border-radius: 5px;

    background: #176044;

    color: #e2fff1;

    font-size: 9px;

    font-weight: 900;

    box-shadow:
        0 0 10px
        rgba(47,210,142,.28);
}


.x7-idle-dot {

    color: #3c5b6d;
}


/* CALLSIGN */

.x7-call {

    color: #f5fafc
    !important;

    font-size: 14px;

    font-weight: 800;

    text-decoration: none
    !important;
}


.x7-call:hover {

    color: #4ec9ff
    !important;
}


/* MODULE */

.x7-module-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 30px;

    height: 25px;

    border:
        1px solid #39647d;

    border-radius: 5px;

    background: #122e3f;

    color: #bfeaff;

    font-weight: 850;
}


/* RELATIVE TIME */

.x7-relative {

    display: block;

    color: #eaf5fa;

    font-size: 11px;
}


.x7-absolute {

    display: block;

    margin-top: 2px;

    color: #68879a;

    font-size: 8px;
}


/* PROTOCOL */

.x7-protocol {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 52px;

    padding: 5px 8px;

    border-radius: 5px;

    font-size: 9px;

    font-weight: 850;
}


.proto-ysf {

    background: #086789;

    border:
        1px solid #0c97c8;

    color: #e2f9ff;
}


.proto-dmr {

    background: #583e73;

    border:
        1px solid #7c5b9c;

    color: #f4eaff;
}


.proto-dcs,
.proto-dstar {

    background: #235640;

    border:
        1px solid #337b5e;

    color: #e0ffed;
}


.proto-other {

    background: #394955;

    border:
        1px solid #596c79;

    color: #eef4f7;
}


.x7-historical {

    display: inline-block;

    padding: 4px 7px;

    border:
        1px solid #374e5e;

    border-radius: 5px;

    background: #182630;

    color: #8299a8;

    font-size: 8px;
}


/* MODULE CARDS */

.x7-modules {

    padding-bottom: 10px;
}


.x7-module-card {

    margin: 12px 12px 0;

    overflow: hidden;

    border:
        1px solid #29485c;

    border-radius: 9px;

    background: #0e1c26;
}


.x7-primary-module {

    border-color: #0b91c1;

    box-shadow:
        0 5px 16px
        rgba(0,116,158,.17);
}


.x7-module-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 60px;

    padding: 10px 12px;

    border-bottom:
        1px solid #29485c;

    background:
        linear-gradient(
            100deg,
            #19394c,
            #142e3e
        );
}


.x7-primary-module
.x7-module-header {

    background:
        linear-gradient(
            100deg,
            #0879a5,
            #075879
        );
}


.x7-module-title {

    display: flex;

    align-items: center;
}


.x7-module-letter {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    margin-right: 10px;

    border-radius: 6px;

    background: #071722;

    color: #55cdff;

    font-weight: 900;
}


.x7-primary-module
.x7-module-letter {

    background:
        rgba(0,0,0,.24);

    color: white;
}


.x7-module-title strong {

    display: block;

    color: #edf7fb;

    font-size: 13px;
}


.x7-module-title div span {

    display: block;

    margin-top: 2px;

    color: #7293a6;

    font-size: 9px;
}


.x7-primary-module
.x7-module-title div span {

    color: #c1eaf8;
}


.x7-module-count {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 29px;

    height: 29px;

    border-radius: 30px;

    background: #071722;

    color: #50d0ff;

    font-size: 11px;

    font-weight: 900;
}


/* LOCAL PROTOCOL TOTALS */

.x7-module-protocols {

    display: flex;

    gap: 5px;

    padding: 7px 10px;

    border-bottom:
        1px solid #1f394a;

    background: #0c1922;
}


.x7-module-protocols span {

    padding: 3px 6px;

    border-radius: 4px;

    font-size: 8px;

    font-weight: 800;
}


/* NODES */

.x7-node-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 11px;

    padding: 11px 12px;

    border-bottom:
        1px solid #1e3747;
}


.x7-node-row:last-child {

    border-bottom: 0;
}


.x7-node-row:hover {

    background:
        rgba(38,89,117,.24);
}


.x7-node-details {

    min-width: 0;
}


.x7-node-details strong {

    display: block;

    color: #eff8fc;

    font-size: 12px;
}


.x7-node-details span {

    display: block;

    margin-top: 2px;

    color: #65869a;

    font-size: 9px;
}


.x7-empty-modules {

    margin: 12px;

    padding: 8px;

    border-top:
        1px solid #1f394a;

    color: #526f81;

    text-align: center;

    font-size: 8px;
}


.x7-empty {

    padding: 24px
    !important;

    text-align: center;

    color: #698799
    !important;
}


/* RESPONSIVE */

@media (max-width: 1500px) {

    .x7-status-grid {

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

}


@media (max-width: 1000px) {

    .x7-layout {

        grid-template-columns: 1fr;
    }

}


@media (max-width: 650px) {

    .x7-status-grid {

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

}


@media (max-width: 450px) {

    .x7-status-grid {

        grid-template-columns: 1fr;
    }

}