@media screen and (max-width: 1140px) {

    /* DASHBOARD */
    .container-app .box-app main.main-dashboard .box-main .middle-dashboard .bottom {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(25.3%, 1fr));
        /* grid-template-rows: 1fr; */
        gap: 1em;
    }

    /* DASHBOARD */

    /* REQUISITION */
    .container-app .box-app main.main-requisition .box-main .middle-requisition .bottom {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(25.3%, 1fr));
        /* grid-template-rows: 1fr; */
        gap: 1em;
    }

    /* REQUISITION */

    /* DETAIL MASTER REQUISITION */
    .container-app .box-app main.main-detail-master-requisition .box-main .middle-detail-master-requisition .bottom {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(25.3%, 1fr));
        /* grid-template-rows: 1fr; */
        gap: 1em;
    }

    /* DETAIL MASTER REQUISITION */

    /* RECEIVABLE */
    .container-app .box-app main.main-receivable .box-main .middle-receivable .bottom {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(25.3%, 1fr));
        /* grid-template-rows: 1fr; */
        gap: 1em;
    }

    /* RECEIVABLE */

    /* DETAIL MASTER RECEIVABLE */
    .container-app .box-app main.main-detail-master-receivable .box-main .middle-detail-master-receivable .bottom {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(25.3%, 1fr));
        /* grid-template-rows: 1fr; */
        gap: 1em;
    }

    /* DETAIL MASTER RECEIVABLE */

    /* INVENTORY */
    .container-app .box-app main.main-inventory .box-main .middle-inventory .bottom {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(25.3%, 1fr));
        /* grid-template-rows: 1fr; */
        gap: 1em;
    }

    /* INVENTORY */

    /* DETAIL MASTER INVENTORY */
    .container-app .box-app main.main-detail-master-inventory .box-main .middle-detail-master-inventory .bottom {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(25.3%, 1fr));
        /* grid-template-rows: 1fr; */
        gap: 1em;
    }

    /* DETAIL MASTER INVENTORY */

    /* FINANCE */
    .container-app .box-app main.main-finance .box-main .middle-finance .bottom {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(25.3%, 1fr));
        /* grid-template-rows: 1fr; */
        gap: 1em;
    }

    /* FINANCE */

    /* DETAIL MASTER FINANCE */
    .container-app .box-app main.main-detail-master-finance .box-main .middle-detail-master-finance .bottom {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(25.3%, 1fr));
        /* grid-template-rows: 1fr; */
        gap: 1em;
    }

    /* DETAIL MASTER FINANCE */
}

@media screen and (max-width: 992px) {

    /* AUTH LOGIN */
    .container-auth .box-auth .main-auth .content-auth .logo-tw img {
        width: 15em;
    }

    /* AUTH LOGIN */

    /* DASHBOARD */
    .container-app .box-app main.main-dashboard .box-main .middle-dashboard .bottom {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(33.3%, 1fr));
        /* grid-template-rows: 1fr; */
        gap: 1em;
    }

    /* DASHBOARD */

    /* REQUISITION */
    .container-app .box-app main.main-requisition .box-main .middle-requisition .bottom {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(33.3%, 1fr));
        /* grid-template-rows: 1fr; */
        gap: 1em;
    }

    /* REQUISITION */

    /* DETAIL MASTER REQUISITION */
    .container-app .box-app main.main-detail-master-requisition .box-main .middle-detail-master-requisition .bottom {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(33.3%, 1fr));
        /* grid-template-rows: 1fr; */
        gap: 1em;
    }

    /* DETAIL MASTER REQUISITION */

    /* MASTER KOTA REQUISITION */
    .container-app .box-app main.main-master-kota-requisition .box-main .middle-master-kota-requisition .top-kota .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        /* background-color: blue; */
    }

    /* MASTER KOTA REQUISITION */

    /* MASTER SUPPLIER REQUISITION */
    .container-app .box-app main.main-master-supplier-requisition .box-main .middle-master-supplier-requisition .top-supplier .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        /* background-color: blue; */
    }

    /* MASTER SUPPLIER REQUISITION */

    /* RECEIVABLE */
    .container-app .box-app main.main-receivable .box-main .middle-receivable .bottom {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(33.3%, 1fr));
        /* grid-template-rows: 1fr; */
        gap: 1em;
    }

    /* RECEIVABLE */

    /* DETAIL MASTER RECEIVABLE */
    .container-app .box-app main.main-detail-master-receivable .box-main .middle-detail-master-receivable .bottom {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(33.3%, 1fr));
        /* grid-template-rows: 1fr; */
        gap: 1em;
    }

    /* DETAIL MASTER RECEIVABLE */

    /* MASTER CUSTOMER RECEIVABLE */
    .container-app .box-app main.main-master-customer-receivable .box-main .middle-master-customer-receivable .top-customer .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        /* background-color: blue; */
    }

    /* MASTER CUSTOMER RECEIVABLE */

    /* MASTER DAFTAR HARGA RECEIVABLE */
    .container-app .box-app main.main-master-daftar-harga-receivable .box-main .middle-master-daftar-harga-receivable .top-daftar-harga .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        /* background-color: blue; */
    }

    /* MASTER DAFTAR HARGA RECEIVABLE */

    /* MASTER LOKASI RECEIVABLE */
    .container-app .box-app main.main-master-lokasi-receivable .box-main .middle-master-lokasi-receivable .top-lokasi .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        /* background-color: blue; */
    }

    /* MASTER LOKASI RECEIVABLE */

    /* MASTER DETAIL LOKASI RECEIVABLE */
    .container-app .box-app main.main-master-detail-lokasi-receivable .box-main .middle-master-detail-lokasi-receivable .top-detail-lokasi .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        /* background-color: blue; */
    }

    /* MASTER DETAIL LOKASI RECEIVABLE */

    /* MASTER PPH RECEIVABLE */
    .container-app .box-app main.main-master-pph-receivable .box-main .middle-master-pph-receivable .top-pph .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        /* background-color: blue; */
    }

    /* MASTER PPH RECEIVABLE */

    /* MASTER BACK CHARGE RECEIVABLE */
    .container-app .box-app main.main-master-back-charge-receivable .box-main .middle-master-back-charge-receivable .top-back-charge .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        /* background-color: blue; */
    }

    /* MASTER BACK CHARGE RECEIVABLE */

    /* INVENTORY */
    .container-app .box-app main.main-inventory .box-main .middle-inventory .bottom {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(33.3%, 1fr));
        /* grid-template-rows: 1fr; */
        gap: 1em;
    }

    /* INVENTORY */

    /* DETAIL MASTER INVENTORY */
    .container-app .box-app main.main-detail-master-inventory .box-main .middle-detail-master-inventory .bottom {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(33.3%, 1fr));
        /* grid-template-rows: 1fr; */
        gap: 1em;
    }

    /* DETAIL MASTER INVENTORY */

    /* MASTER SATUAN INVENTORY */
    .container-app .box-app main.main-master-satuan-inventory .box-main .middle-master-satuan-inventory .top-satuan .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        /* background-color: blue; */
    }

    /* MASTER SATUAN INVENTORY */

    /* MASTER PRODUK INVENTORY */
    .container-app .box-app main.main-master-produk-inventory .box-main .middle-master-produk-inventory .top-produk .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        /* background-color: blue; */
    }

    /* MASTER PRODUK INVENTORY */

    /* MASTER GROUP GUDANG INVENTORY */
    .container-app .box-app main.main-master-group-gudang-inventory .box-main .middle-master-group-gudang-inventory .top-group-gudang .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        /* background-color: blue; */
    }

    /* MASTER GROUP GUDANG INVENTORY */

    /* MASTER GUDANG INVENTORY */
    .container-app .box-app main.main-master-gudang-inventory .box-main .middle-master-gudang-inventory .top-gudang .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        /* background-color: blue; */
    }

    /* MASTER GUDANG INVENTORY */

    /* MASTER BARANG INVENTORY */
    .container-app .box-app main.main-master-barang-inventory .box-main .middle-master-barang-inventory .top-barang .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        /* background-color: blue; */
    }

    /* MASTER BARANG INVENTORY */

    /* MASTER GROUP INVENTORY */
    .container-app .box-app main.main-master-group-inventory .box-main .middle-master-group-inventory .top-group .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        /* background-color: blue; */
    }

    /* MASTER GROUP INVENTORY */

    /* MASTER MENU CATERING INVENTORY */
    .container-app .box-app main.main-master-menu-catering-inventory .box-main .middle-master-menu-catering-inventory .top-menu-catering .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        /* background-color: blue; */
    }

    /* MASTER MENU CATERING INVENTORY */

    /* MASTER ESTIMATE SALES CALCULATE INVENTORY */
    .container-app .box-app main.main-master-estimate-inventory .box-main .middle-master-estimate-inventory .top-estimate .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        /* background-color: blue; */
    }

    /* MASTER ESTIMATE SALES CALCULATE INVENTORY */

    /* FINANCE */
    .container-app .box-app main.main-finance .box-main .middle-finance .bottom {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(33.3%, 1fr));
        /* grid-template-rows: 1fr; */
        gap: 1em;
    }

    /* FINANCE */

    /* DETAIL MASTER FINANCE */
    .container-app .box-app main.main-detail-master-finance .box-main .middle-detail-master-finance .bottom {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(33.3%, 1fr));
        /* grid-template-rows: 1fr; */
        gap: 1em;
    }

    /* DETAIL MASTER FINANCE */

    /* MASTER CATEGORY FINANCE */
    .container-app .box-app main.main-master-category-finance .box-main .middle-master-category-finance .top-category .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        /* background-color: blue; */
    }

    /* MASTER CATEGORY FINANCE */

    /* MASTER GROUP REKENING FINANCE */
    .container-app .box-app main.main-master-group-rekening-finance .box-main .middle-master-group-rekening-finance .top-group-rekening .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        /* background-color: blue; */
    }

    /* MASTER GROUP REKENING FINANCE */

    /* MASTER GROUP REKENING FINANCE */
    .container-app .box-app main.main-master-rekening-finance .box-main .middle-master-rekening-finance .top-rekening .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        /* background-color: blue; */
    }

    /* MASTER GROUP REKENING FINANCE */

    /* MASTER BANK FINANCE */
    .container-app .box-app main.main-master-bank-finance .box-main .middle-master-bank-finance .top-bank .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        /* background-color: blue; */
    }

    /* MASTER BANK FINANCE */

    /* MASTER KAS FINANCE */
    .container-app .box-app main.main-master-kas-finance .box-main .middle-master-kas-finance .top-kas .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5em;
        /* background-color: blue; */
    }

    /* MASTER KAS FINANCE */
}

@media screen and (max-width: 768px) {

    /* DASHBOARD */
    .container-app .box-app main.main-dashboard .box-main .middle-dashboard .bottom {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    /* DASHBOARD */

    /* REQUISITION */
    .container-app .box-app main.main-requisition .box-main .middle-requisition .bottom {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    /* REQUISITION */

    /* DETAIL MASTER REQUISITION */
    .container-app .box-app main.main-detail-master-requisition .box-main .middle-detail-master-requisition .bottom {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    /* DETAIL MASTER REQUISITION */

    /* MASTER KOTA REQUISITION */
    .container-app .box-app main.main-master-kota-requisition .box-main .middle-master-kota-requisition .top-kota {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .container-app .box-app main.main-master-kota-requisition .box-main .middle-master-kota-requisition .top-kota .right form {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    /* MASTER KOTA REQUISITION */

    /* MASTER SUPPLIER REQUISITION */
    .container-app .box-app main.main-master-supplier-requisition .box-main .middle-master-supplier-requisition .top-supplier {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .container-app .box-app main.main-master-supplier-requisition .box-main .middle-master-supplier-requisition .top-supplier .right form {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    /* MASTER SUPPLIER REQUISITION */

    /* RECEIVABLE */
    .container-app .box-app main.main-receivable .box-main .middle-receivable .bottom {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    /* RECEIVABLE */

    /* DETAIL MASTER RECEIVABLE */
    .container-app .box-app main.main-detail-master-receivable .box-main .middle-detail-master-receivable .bottom {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    /* DETAIL MASTER RECEIVABLE */

    /* MASTER CUSTOMER RECEIVABLE */
    .container-app .box-app main.main-master-customer-receivable .box-main .middle-master-customer-receivable .top-customer {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .container-app .box-app main.main-master-customer-receivable .box-main .middle-master-customer-receivable .top-customer .right form {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    /* MASTER CUSTOMER RECEIVABLE */

    /* MASTER DAFTAR HARGA RECEIVABLE */
    .container-app .box-app main.main-master-daftar-harga-receivable .box-main .middle-master-daftar-harga-receivable .top-daftar-harga {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .container-app .box-app main.main-master-daftar-harga-receivable .box-main .middle-master-daftar-harga-receivable .top-daftar-harga .right form {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    /* MASTER DAFTAR HARGA RECEIVABLE */

    /* MASTER LOKASI RECEIVABLE */
    .container-app .box-app main.main-master-lokasi-receivable .box-main .middle-master-lokasi-receivable .top-lokasi {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .container-app .box-app main.main-master-lokasi-receivable .box-main .middle-master-lokasi-receivable .top-lokasi .right form {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    /* MASTER LOKASI RECEIVABLE */

    /* MASTER DETAIL LOKASI RECEIVABLE */
    .container-app .box-app main.main-master-detail-lokasi-receivable .box-main .middle-master-detail-lokasi-receivable .top-detail-lokasi {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .container-app .box-app main.main-master-detail-lokasi-receivable .box-main .middle-master-detail-lokasi-receivable .top-detail-lokasi .right form {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    /* MASTER DETAIL LOKASI RECEIVABLE */

    /* MASTER PPH RECEIVABLE */
    .container-app .box-app main.main-master-pph-receivable .box-main .middle-master-pph-receivable .top-pph {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .container-app .box-app main.main-master-pph-receivable .box-main .middle-master-pph-receivable .top-pph .right form {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    /* MASTER PPH RECEIVABLE */

    /* MASTER BACK CHARGE RECEIVABLE */
    .container-app .box-app main.main-master-back-charge-receivable .box-main .middle-master-back-charge-receivable .top-back-charge {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .container-app .box-app main.main-master-back-charge-receivable .box-main .middle-master-back-charge-receivable .top-back-charge .right form {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    /* MASTER BACK CHARGE RECEIVABLE */

    /* INVENTORY */
    .container-app .box-app main.main-inventory .box-main .middle-inventory .bottom {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    /* INVENTORY */

    /* DETAIL MASTER INVENTORY */
    .container-app .box-app main.main-detail-master-inventory .box-main .middle-detail-master-inventory .bottom {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    /* DETAIL MASTER INVENTORY */

    /* MASTER SATUAN INVENTORY */
    .container-app .box-app main.main-master-satuan-inventory .box-main .middle-master-satuan-inventory .top-satuan {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .container-app .box-app main.main-master-satuan-inventory .box-main .middle-master-satuan-inventory .top-satuan .right form {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    /* MASTER SATUAN INVENTORY */

    /* MASTER PRODUK INVENTORY */
    .container-app .box-app main.main-master-produk-inventory .box-main .middle-master-produk-inventory .top-produk {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .container-app .box-app main.main-master-produk-inventory .box-main .middle-master-produk-inventory .top-produk .right form {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    /* MASTER PRODUK INVENTORY */

    /* MASTER GROUP GUDANG INVENTORY */
    .container-app .box-app main.main-master-group-gudang-inventory .box-main .middle-master-group-gudang-inventory .top-group-gudang {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .container-app .box-app main.main-master-group-gudang-inventory .box-main .middle-master-group-gudang-inventory .top-group-gudang .right form {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    /* MASTER GROUP GUDANG INVENTORY */

    /* MASTER GUDANG INVENTORY */
    .container-app .box-app main.main-master-gudang-inventory .box-main .middle-master-gudang-inventory .top-gudang {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .container-app .box-app main.main-master-gudang-inventory .box-main .middle-master-gudang-inventory .top-gudang .right form {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    /* MASTER GUDANG INVENTORY */

    /* MASTER BARANG INVENTORY */
    .container-app .box-app main.main-master-barang-inventory .box-main .middle-master-barang-inventory .top-barang {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .container-app .box-app main.main-master-barang-inventory .box-main .middle-master-barang-inventory .top-barang .right form {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    /* MASTER BARANG INVENTORY */

    /* MASTER GROUP INVENTORY */
    .container-app .box-app main.main-master-group-inventory .box-main .middle-master-group-inventory .top-group {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .container-app .box-app main.main-master-group-inventory .box-main .middle-master-group-inventory .top-group .right form {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    /* MASTER GROUP INVENTORY */

    /* MASTER MENU CATERING INVENTORY */
    .container-app .box-app main.main-master-menu-catering-inventory .box-main .middle-master-menu-catering-inventory .top-menu-catering {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .container-app .box-app main.main-master-menu-catering-inventory .box-main .middle-master-menu-catering-inventory .top-menu-catering .right form {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    /* MASTER MENU CATERING INVENTORY */

    /* MASTER ESTIMATE SALES CALCULATE INVENTORY */
    .container-app .box-app main.main-master-estimate-inventory .box-main .middle-master-estimate-inventory .top-estimate {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .container-app .box-app main.main-master-estimate-inventory .box-main .middle-master-estimate-inventory .top-estimate .right form {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    /* MASTER ESTIMATE SALES CALCULATE INVENTORY */

    /* FINANCE */
    .container-app .box-app main.main-finance .box-main .middle-finance .bottom {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    /* FINANCE */

    /* DETAIL MASTER FINANCE */
    .container-app .box-app main.main-detail-master-finance .box-main .middle-detail-master-finance .bottom {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    /* DETAIL MASTER FINANCE */

    /* MASTER CATEGORY FINANCE */
    .container-app .box-app main.main-master-category-finance .box-main .middle-master-category-finance .top-category {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .container-app .box-app main.main-master-category-finance .box-main .middle-master-category-finance .top-category .right form {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    /* MASTER CATEGORY FINANCE */

    /* MASTER GROUP REKENING FINANCE */
    .container-app .box-app main.main-master-group-rekening-finance .box-main .middle-master-group-rekening-finance .top-group-rekening {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .container-app .box-app main.main-master-group-rekening-finance .box-main .middle-master-group-rekening-finance .top-group-rekening .right form {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    /* MASTER GROUP REKENING FINANCE */

    /* MASTER GROUP REKENING FINANCE */
    .container-app .box-app main.main-master-rekening-finance .box-main .middle-master-rekening-finance .top-rekening {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .container-app .box-app main.main-master-rekening-finance .box-main .middle-master-rekening-finance .top-rekening .right form {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    /* MASTER GROUP REKENING FINANCE */

    /* MASTER BANK FINANCE */
    .container-app .box-app main.main-master-bank-finance .box-main .middle-master-bank-finance .top-bank {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .container-app .box-app main.main-master-bank-finance .box-main .middle-master-bank-finance .top-bank .right form {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    /* MASTER BANK FINANCE */

    /* MASTER KAS FINANCE */
    .container-app .box-app main.main-master-kas-finance .box-main .middle-master-kas-finance .top-kas {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .container-app .box-app main.main-master-kas-finance .box-main .middle-master-kas-finance .top-kas .right form {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr auto;
    }

    /* MASTER KAS FINANCE */

    /* HEADER */
    .container-app .box-app header.header-app .box-header {
        display: grid;
        grid-template-columns: 1fr;
        width: calc(100% - 3em);
        height: 100%;
        max-width: 1050px;
        margin: auto;
        /* background-color: yellowgreen; */
    }

    .container-app .box-app header.header-app .box-header .right {
        display: none;
    }

    /* HEADER */
}

@media screen and (min-width: 576px) {
    .container-app .box-app {
        width: 100%;
        height: 100vh;
        display: grid;
        grid-template-columns: 250px auto;
        grid-template-rows: 60px auto;
        grid-template-areas:
            'nav header'
            'nav main';
    }
}

@media screen and (max-width: 576px) {

    /* NAV */
    .container-app .box-app nav.nav-app {
        width: 100%;
        height: 100%;
        border-right: none;
        border-bottom: 0.5px solid rgba(51, 51, 51, 0.3);
        box-sizing: border-box;
        /* background-color: yellowgreen; */
        display: flex;
        justify-content: center;
    }

    .container-app .box-app nav.nav-app .box-nav {
        width: calc(100% - 3em);
        height: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 60px 0;
        grid-area: nav;
        /* background-color: lightcoral; */
    }

    .container-app .box-app nav.nav-app .top-sidebar {
        display: none;
    }

    .container-app .box-app nav.nav-app .bottom-sidebar {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: 1fr;
        gap: 1em;
        /* background-color: aquamarine; */
        padding: 1em 0;
        box-sizing: border-box;
        overflow-x: auto;
    }

    .container-app .box-app nav.nav-app .bottom-sidebar .menu {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        text-decoration: none;
        border-radius: 7px;
        padding: 0;
        /* background-color: yellowgreen; */
    }

    .container-app .box-app nav.nav-app .bottom-sidebar a.menu:hover {
        border: 0;
    }

    .container-app .box-app nav.nav-app .bottom-sidebar .menu .text h3 span.admin-profile {
        display: none;
    }

    .container-app .box-app nav.nav-app .bottom-sidebar .menu .icon {
        display: none;
    }

    .container-app .box-app nav.nav-app .bottom-sidebar .box-logout {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
    }

    .container-app .box-app nav.nav-app .bottom-sidebar .box-logout .logout {
        width: 100%;
        height: 100%;
        text-decoration: none;
        display: grid;
        grid-template-columns: 0.5fr;
        grid-template-rows: 1fr;
        gap: 0;
        padding: 0;
        border: 0;
    }

    .container-app .box-app nav.nav-app .bottom-sidebar .box-logout .logout .icon {
        display: none;
    }

    /* NAV */
}

@media screen and (max-width: 300px) {

    /* MASTER KOTA REQUISITION */
    .container-app .box-app main.main-master-kota-requisition .box-main .middle-master-kota-requisition .bottom-kota .box-table-pagination .pagination-kota-requisition {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        justify-items: center;
        /* background-color: #4d96ff; */
    }

    /* MASTER KOTA REQUISITION */

    /* MASTER SUPPLIER REQUISITION */
    .container-app .box-app main.main-master-supplier-requisition .box-main .middle-master-supplier-requisition .bottom-supplier .box-table-pagination .pagination-supplier-requisition {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        justify-items: center;
        /* background-color: #4d96ff; */
    }

    /* MASTER SUPPLIER REQUISITION */

    /* MASTER CUSTOMER RECEIVABLE */
    .container-app .box-app main.main-master-customer-receivable .box-main .middle-master-customer-receivable .bottom-customer .box-table-pagination .pagination-customer-receivable {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        justify-items: center;
        /* background-color: #4d96ff; */
    }

    /* MASTER CUSTOMER RECEIVABLE */

    /* MASTER DAFTAR HARGA RECEIVABLE */
    .container-app .box-app main.main-master-daftar-harga-receivable .box-main .middle-master-daftar-harga-receivable .bottom-daftar-harga .box-table-pagination .pagination-daftar-harga-receivable {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        justify-items: center;
        /* background-color: #4d96ff; */
    }

    /* MASTER DAFTAR HARGA RECEIVABLE */

    /* MASTER LOKASI RECEIVABLE */
    .container-app .box-app main.main-master-lokasi-receivable .box-main .middle-master-lokasi-receivable .bottom-lokasi .box-table-pagination .pagination-lokasi-receivable {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        justify-items: center;
        /* background-color: #4d96ff; */
    }

    /* MASTER LOKASI RECEIVABLE */

    /* MASTER DETAIL LOKASI RECEIVABLE */
    .container-app .box-app main.main-master-detail-lokasi-receivable .box-main .middle-master-detail-lokasi-receivable .bottom-detail-lokasi .box-table-pagination .pagination-detail-lokasi-receivable {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        justify-items: center;
        /* background-color: #4d96ff; */
    }

    /* MASTER DETAIL LOKASI RECEIVABLE */

    /* MASTER PPH RECEIVABLE */
    .container-app .box-app main.main-master-pph-receivable .box-main .middle-master-pph-receivable .bottom-pph .box-table-pagination .pagination-pph-receivable {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        justify-items: center;
        /* background-color: #4d96ff; */
    }

    /* MASTER PPH RECEIVABLE */

    /* MASTER BACK CHARGE RECEIVABLE */
    .container-app .box-app main.main-master-back-charge-receivable .box-main .middle-master-back-charge-receivable .bottom-back-charge .box-table-pagination .pagination-back-charge-receivable {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        justify-items: center;
        /* background-color: #4d96ff; */
    }

    /* MASTER BACK CHARGE RECEIVABLE */

    /* MASTER SATUAN INVENTORY */
    .container-app .box-app main.main-master-satuan-inventory .box-main .middle-master-satuan-inventory .bottom-satuan .box-table-pagination .pagination-satuan-inventory {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        justify-items: center;
        /* background-color: #4d96ff; */
    }

    /* MASTER SATUAN INVENTORY */

    /* MASTER PRODUK INVENTORY */
    .container-app .box-app main.main-master-produk-inventory .box-main .middle-master-produk-inventory .bottom-produk .box-table-pagination .pagination-produk-inventory {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        justify-items: center;
        /* background-color: #4d96ff; */
    }

    /* MASTER PRODUK INVENTORY */

    /* MASTER GROUP GUDANG INVENTORY */
    .container-app .box-app main.main-master-group-gudang-inventory .box-main .middle-master-group-gudang-inventory .bottom-group-gudang .box-table-pagination .pagination-group-gudang-inventory {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        justify-items: center;
        /* background-color: #4d96ff; */
    }

    /* MASTER GROUP GUDANG INVENTORY */

    /* MASTER GUDANG INVENTORY */
    .container-app .box-app main.main-master-gudang-inventory .box-main .middle-master-gudang-inventory .bottom-gudang .box-table-pagination .pagination-gudang-inventory {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        justify-items: center;
        /* background-color: #4d96ff; */
    }

    /* MASTER GUDANG INVENTORY */

    /* MASTER BARANG INVENTORY */
    .container-app .box-app main.main-master-barang-inventory .box-main .middle-master-barang-inventory .bottom-barang .box-table-pagination .pagination-barang-inventory {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        justify-items: center;
        /* background-color: #4d96ff; */
    }

    /* MASTER BARANG INVENTORY */

    /* MASTER GROUP INVENTORY */
    .container-app .box-app main.main-master-group-inventory .box-main .middle-master-group-inventory .bottom-group .box-table-pagination .pagination-group-inventory {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        justify-items: center;
        /* background-color: #4d96ff; */
    }

    /* MASTER GROUP INVENTORY */

    /* MASTER MENU CATERING INVENTORY */
    .container-app .box-app main.main-master-menu-catering-inventory .box-main .middle-master-menu-catering-inventory .bottom-menu-catering .box-table-pagination .pagination-menu-catering-inventory {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        justify-items: center;
        /* background-color: #4d96ff; */
    }

    /* MASTER MENU CATERING INVENTORY */

    /* MASTER ESTIMATE SALES CALCULATE INVENTORY */
    .container-app .box-app main.main-master-estimate-inventory .box-main .middle-master-estimate-inventory .bottom-estimate .box-table-pagination .pagination-estimate-inventory {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        justify-items: center;
        /* background-color: #4d96ff; */
    }

    /* MASTER ESTIMATE SALES CALCULATE INVENTORY */

    /* MASTER CATEGORY FINANCE */
    .container-app .box-app main.main-master-category-finance .box-main .middle-master-category-finance .bottom-category .box-table-pagination .pagination-category-finance {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        justify-items: center;
        /* background-color: #4d96ff; */
    }

    /* MASTER CATEGORY FINANCE */

    /* MASTER GROUP REKENING FINANCE */
    .container-app .box-app main.main-master-group-rekening-finance .box-main .middle-master-group-rekening-finance .bottom-group-rekening .box-table-pagination .pagination-group-rekening-finance {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        justify-items: center;
        /* background-color: #4d96ff; */
    }

    /* MASTER GROUP REKENING FINANCE */

    /* MASTER REKENING FINANCE */
    .container-app .box-app main.main-master-rekening-finance .box-main .middle-master-rekening-finance .bottom-rekening .box-table-pagination .pagination-rekening-finance {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        justify-items: center;
        /* background-color: #4d96ff; */
    }

    /* MASTER REKENING FINANCE */

    /* MASTER BANK FINANCE */
    .container-app .box-app main.main-master-bank-finance .box-main .middle-master-bank-finance .bottom-bank .box-table-pagination .pagination-bank-finance {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        justify-items: center;
        /* background-color: #4d96ff; */
    }

    /* MASTER BANK FINANCE */

    /* MASTER KAS FINANCE */
    .container-app .box-app main.main-master-kas-finance .box-main .middle-master-kas-finance .bottom-kas .box-table-pagination .pagination-kas-finance {
        display: grid;
        grid-template-rows: 1fr auto;
        grid-template-columns: 1fr;
        justify-items: center;
        /* background-color: #4d96ff; */
    }

    /* MASTER KAS FINANCE */
}

/* auth login */
@media screen and (min-width: 768px) {
    .container-auth .box-auth .main-auth .content-auth {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
        padding: 1.5em;
        padding-top: 0;
        box-sizing: border-box;
    }

    .container-auth .box-auth .main-auth .content-auth .logo-tw {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 0.5px solid rgba(51, 51, 51, 0.3);
        border-radius: 5px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .container-auth .box-auth .main-auth .content-auth .logo-tw img {
        width: 20em;
    }

    .container-auth .box-auth .main-auth .box-form {
        width: 100%;
        display: flex;
        align-items: center;
        border: 0.5px solid rgba(51, 51, 51, 0.3);
        border-left: none;
        border-radius: 5px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        padding: 3em 1.5em;
        box-sizing: border-box;
    }
}

/* auth login */