/* =====================================================
   TERY: COLLAPSE
   PRODUCTION
===================================================== */


/* =====================================================
   FLOATING PANEL
===================================================== */

.floating-panel-title {

    font-weight:
        700;

    font-size:
        12px;
}


.floating-panel-count {

    min-width:
        21px;

    height:
        21px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        #555d5f;

    border-radius:
        10px;

    color:
        #b7bcbc;

    font-size:
        9px;
}


.floating-panel-chevron {

    color:
        #b8bcbc;

    transition:
        transform
        .18s ease;
}


.floating-panel-body {

    flex:
        1;

    min-height:
        0;

    max-height:
        none;

    overflow:
        auto;

    overscroll-behavior:
        contain;

    touch-action:
        pan-y;
}


.floating-panel.collapsed {

    height:
        auto;
}


.floating-panel.collapsed
.floating-panel-body {

    display:
        none;
}


.floating-panel.collapsed
.floating-panel-chevron {

    transform:
        rotate(
            180deg
        );
}


/* =====================================================
   PRODUCTION LIST
===================================================== */

#production-list {

    padding:
        8px;
}


.production-empty {

    padding:
        10px;

    color:
        #777f80;

    font-size:
        10px;

    text-align:
        center;
}


/* =====================================================
   PRODUCTION ITEM
===================================================== */

.production-item {

    padding:
        9px;

    border:
        1px solid
        #30383a;

    border-radius:
        4px;

    background:
        #151a1b;

    margin-bottom:
        6px;
}


.production-item:last-child {

    margin-bottom:
        0;
}


.production-top {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        10px;
}


.production-name {

    font-weight:
        700;

    font-size:
        11px;
}


.production-status {

    color:
        #a1a7a7;

    font-size:
        9px;
}


.production-item
.game-button {

    margin-top:
        8px;
}