/* ==========================================
   FMC HEADER V11
========================================== */

.header{

    position:fixed;

    top:0;
    left:0;
    right:0;

    height:78px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 18px;

    background:
    linear-gradient(
        135deg,
        #087438 0%,
        #0B8F43 45%,
        #18B85B 100%
    );

    color:#fff;

    box-shadow:
    0 10px 30px rgba(0,0,0,.18);

    z-index:1000;

}

/* ===========================
   BRAND
=========================== */

.headerBrand{

    display:flex;

    align-items:center;

    gap:14px;

    flex:1;

}

.headerLogo{

    width:52px;

    height:52px;

    object-fit:contain;

    border-radius:14px;

    background:rgba(255,255,255,.12);

    padding:6px;

    box-shadow:
    0 6px 16px rgba(0,0,0,.18);

}

/* ===========================
   TEXT
=========================== */

.headerTop{

    display:flex;

    flex-direction:column;

}

#farmNama{

    margin:0;

    font-size:20px;

    font-weight:800;

    color:#fff;

    letter-spacing:.3px;

}

#updateTime{

    margin-top:4px;

    font-size:12px;

    color:rgba(255,255,255,.88);

}

/* ===========================
   STATUS
=========================== */

.headerAction{

    display:flex;

    align-items:center;

    gap:10px;

}

#statusServer{

    display:flex;

    align-items:center;

    gap:6px;

    padding:8px 14px;

    border-radius:999px;

    background:rgba(255,255,255,.16);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    font-size:12px;

    font-weight:700;

    color:#fff;

    white-space:nowrap;

}

#statusServer .material-symbols-rounded{

    font-size:18px;

}

/* ===========================
   MOBILE
=========================== */

@media(max-width:480px){

    .header{

        height:74px;

        padding:0 14px;

    }

    .headerLogo{

        width:46px;

        height:46px;

    }

    #farmNama{

        font-size:18px;

    }

    #updateTime{

        font-size:11px;

    }

    #statusServer{

        padding:7px 10px;

        font-size:11px;

    }

}