@media screen and (max-width:900px) and (orientation:landscape) {
    .top-bar {
        padding-top: 25px !important;
        padding-bottom: 10px;
    }

    .top-5 {top: -5px !important;}
    .top-15 {top: -15px !important;}

    .mob-t-10 {top: -10 !important;}

    .mob-p10 {padding: 10px !important;}
    
    .mob-p5 {padding: 5px 0 !important;}
    .mob-p8 {padding: 8px 0 !important;}
    .mob-p5-5 {padding: 5px 5px !important;}
    .mob-p5-0 {padding: 5px 0px !important;}
    .mob-p8-5 {padding: 8px 5px !important;}
    .mob-p5-10 {padding: 5px 10px !important;}
    .mob-p10 {padding: 10px 10px !important;}
    .mob-p5-0 {padding: 5px 0px !important;}
    
    .mob-pt5 {padding-top: 5px !important;}
    .mob-pt0 {padding-top: 0;}
    .mob-pt10 {padding-top: 10px !important;}
    .mob-pt20 {padding-top: 20px !important;}
    .mob-pt30 {padding-top: 30px !important;}
    
    .mob-pb10 {padding-bottom: 10px !important;}
    .mob-pb20 {padding-bottom: 20px !important;}
    .mob-pb5 {padding-bottom: 5px !important;}
    
    .mob-pl0 {padding-left: 0px !important;}
    .mob-pl15 {padding-left: 15px !important;}
    .mob-pl20 {padding-left: 20px !important;}
    
    /* MARGIN */
    .mob-m10 {margin: 10px 0;}

    .mob-mt5 {margin-top: 5px !important;}
    .mob-mt10 {margin-top: 10px !important;}
    .mob-mt20 {margin-top: 20px !important;}

    .mob-mb0 {margin-bottom: 0px !important;}
    .mob-mb5 {margin-bottom: 5px !important;}
    .mob-mb20 {margin-bottom: 20px !important;}

    .mob-overH {overflow: hidden !important;}

    /* FONT SIZE */
    .mob-f10 {font-size: 10px !important;}
    .mob-f12 {font-size: 12px !important;}
    .mob-f18 {font-size: 18px !important;}
    .mob-f28 {font-size: 28px !important;}
    
    /* WIDTH */
    .mob-w15 {width: 15px !important;}
    .mob-w30 {width: 30px !important;}
    .mob-w50 {width: 50px !important;}
    .mob-w120 {width: 120px !important;}

    .mob-w15p {width: 15% !important;}
    .mob-w28p {width: 28% !important;}
    .mob-w30p {width: 30% !important;}
    .mob-w40p {width: 40% !important;}
    .mob-w45p {width: 45% !important;}
    .mob-w55p {width: 55% !important;}
    .mob-w80p {width: 80% !important;}
    .mob-w100p {width: 100% !important;}

    .mob-svg-icon {
        width: 20px !important; 
        height: 20px !important;  
    }

    .mob-w2020 {
        width: 20px !important;
        height: 20px !important;
    }

    /* HEIGHT */
    .mob-h33 {
        height: 33px !important;
    }

    /* POSITION */
    .mob-t66 {top: 66px !important;}
    /* CUSTOM */
    .txt-login {
        padding: 8px 10px !important;
    }

    .menu-left {width: 280px !important;}

    .sidebar-pengaturan li {
        padding: 10px 15px !important;
    }

    .mob-cust-pad1 {
        padding: 15px 0 10px !important;  
    }
    
    #item-pesanan > div > div, #item-trans > div > div {
        padding: 5px 10px !important;
    }

    .fc button {
        height: 30px !important;
        padding: 0 10px !important;
    }

    .fc .fc-toolbar>*>* {
        font-size: 12px !important; 
    }

    .mob-input-cust {
        height: auto; 
        padding: 5px 10px;
        font-size: 12px !important;
    }

    /* modal datepicker */
    .modal {
        width: 100%;
        padding: 5% 10% 5% 10%;
        top: 0 !important;
        max-height: 500px;
        overflow-y: scroll;
    }

    .datepicker-table th, .datepicker-table td {
        font-size: 12px;    
    }

    .datepicker-table td {
        padding: 1px 11px !important;
    }

    .datepicker-date-display .year-text {
        font-size: 16px !important; 
    }

    .datepicker-date-display .date-text {
        font-size: 20px !important;
    }

    .icon-cart {
        width: 14px !important;
        height: 15px !important;
    }

    #count {
        font-size: 7px !important;
    }

    .search-res {
        font-size: 12px !important;
        padding: 5px !important;
    }

    .mob-dnone {
        display: none !important;
    }

    .mob-dblock {
        display: block !important;
    }

}