@media only screen and (max-width: 481px){
    
    body { margin: auto; width: 100%; height: 100%; font-family: Poppins;
        background-color: antiquewhite;
        /* border: 1px solid orangered; */
    }
    #kontener { 
        margin: 0; left: 0;
        width: 98.9%; height: auto; 
        /* background-color: whitesmoke; */
        /* border: 2px solid green; */
    }
        #bingkai-kepala { position: fixed; z-index: 11;
            margin: auto; top: 0;
            width: 99.9%; height: 15%;
            background-color: orangered;
            border: 1px solid orangered;
            border-bottom: 2px solid red;
        }
            #bingkai-logo-appname { margin: auto; padding-top: 3px;
                width: 99%; height: auto; 
                /* border: 1px solid white; */
            }
                #bingkai-logo { margin: 1px 7px; padding: 2px; width: 15%; height: 45%; display: inline-block; }
                    #logo { margin: auto; width: 99%; height: 88%; 
                        border-radius: 50%;
                        background-color: black; 
                        border: 2px solid white;
                    }

                #bingkai-appname { margin: auto; margin-right: 7px; margin-top: 7px; width: 77.7%; float: right;
                    /* border: 1px solid white; */
                }
                    #appname { margin: auto; line-height: 27px;
                        font-size: 18px; font-family: Agbalumo, Poppins; color: white; 
                        /* border: 1px solid white; */
                    }
                    #saldo { font-size: 13px; font-family: Quicksand, Inconsolata, Poppins; font-weight: bold; color: white; float: right; }
                    #motto { margin: auto; margin-top: 7px; font-size: 15px; font-family: Flamenco, Poppins; color: white; }
                    
            #bingkai-marquee { margin: 0; width: 100%; height: auto; 
                /* border: 1px solid whitesmoke; */
            }
                #marquee { margin-top: 3px; transform: translate3d(); 
                    font-size: 12px; color: white;
                }


        #bingkai-konten { margin: auto; margin-top: 101px; padding: 2px; padding-bottom: 7px;
            width: 100%; height: auto; 
            background-color: antiquewhite;
            /* border: 1px solid blue; */
        }

            #bingkai-kembali { margin: auto; padding: 11px; width: 93%; border: 1px solid antiquewhite; }
                #kembali { margin: 0; font-size: 12px; text-align: right; padding-right: 11px; color: green; cursor: pointer; }
                
            #bingkai-topup { margin: auto; overflow: auto;
                width: 93%; height: 454px; 
                /* border: 1px solid orangered; */
            }
                #bingkai-topup-dalam { margin: auto; margin-bottom: 7px;
                    width: 98%; height: auto;
                    border: 1px solid whitesmoke;
                }
                    #bingkai-nominaltopup { 
                        margin: auto; margin-top: 11px;
                        width: 93%; height: auto;
                        opacity: 2;
                        border: 1px solid whitesmoke;
                    }
                        #fieldset-nominal { margin:  auto; width: 93%; 
                            background-color: white;
                            border: 1px solid orangered; border-radius: 7px; 
                        }
                        legend { color: orangered; font-size: 12px;}
                        
                            .btn-nominal-topup { margin: 4px 4px; width: 29%; height: 44px; 
                                font-size: 15px;
                                background-color: antiquewhite; 
                                border: 1px solid silver;
                                border-radius: 7px;
                            }
                            .btn-nominal-topup:hover { background-color: antiquewhite; color: white; }
                            #nominallain { margin-left: 7px; margin-top: 11px; width: 59%; text-align: right; }
                            #btn-nominallain { float: right; margin-right: 9px; }

                        #bingkai-konfirm-nominal { margin: auto; padding-top: 22px; 
                            width: 99%; text-align: center; border: 0 solid red; 
                        }
                            #konfirm-topup { margin: auto; font-size: 13px; }
                                #spannominal { font-family: monospace; font-size: 15px; }
                            #btn-konfirm-topup { margin: auto; margin-top: 33px; margin-bottom: 7px;
                                width: 99%; height: 45px; color: white;
                                background-color: orangered;
                                border: 1px solid silver;
                                border-radius: 7px;
                            }

                    #bingkai-detailtopup { margin:  auto; display: none; 
                        width: 99%; border: 1px solid antiquewhite; text-align: center; 
                    }
                        #perintahtransfer { margin: auto; margin-top: 22px; font-size: 13px; }

                        .bingkai-bersama-norek { margin: auto; width: 93%; padding-top: 7px; padding-bottom: 7px;
                            background-color: white;
                            border-radius: 11px; border: 1px solid silver;
                        }
                            .bingkai-bersama-norek p { margin: auto; font-size: 13px; }

                        #pengingat-angkaunik { margin: auto; font-size: 13px; }

                    
                    /* TOPUP PENDING */
                    #bingkai-pending { margin: auto; margin-top: 11px; 
                        width: 93%; height: auto;
                        border: 0 solid whitesmoke;
                    }
                        #fieldset-pending { margin: auto; 
                            width: 88%; height: auto;
                            border: 1px solid orangered; border-radius: 7px; 
                        }
                            /* #fieldset-pending legend{ color: darkgreen; } */
                            #tabel-pending { margin: auto; margin-top: 7px;
                                width: 99%; font-size: 12px;
                                border-collapse: collapse; border: 0; 
                                /* border: 1px solid orangered; */
                            }
                                #tabel-pending tr td { margin: auto; border: 1px solid whitesmoke; }
                                #tabel-pending .row1 td { border-top: 1px solid lightgray; }
                                #tabel-pending .row2 td { border-bottom: 1px solid lightgray; }
                                #tabel-pending .row1col1 { padding-left: 11px; }
                                #tabel-pending .row2col1 { padding-left: 11px; }
                                #tabel-pending .row2col2 { text-align: right; }
                                #tabel-pending .row2col2 a { text-decoration: none; color: blue; padding-right: 11px; }
                                #tabel-pending .jarak td { height: 11px; }

                                #pesan-topup { margin: auto; font-size: 13px; text-align: center; display: none; }
                                    #pesan-topup span { margin: auto; font-size: 14px; color: blue; }

                            #btn-konfirm-tutup { margin: auto; margin-bottom: 7px;
                                width: 99%; height: 45px; color: white;
                                background-color: orangered;
                                border: 1px solid silver;
                                border-radius: 7px;
                            }

            #bingkai-histori { margin: auto; overflow: auto;
                width: 98%; height: 454px; border: 0 solid whitesmoke;
            }
                #tabel-histori { margin: auto; width: 99%; border-collapse: collapse; border-top: 1px solid silver; }
                #tabel-histori tr td { font-size: 11px; padding-left: 7px; padding-right: 7px; background-color: whitesmoke; }
                #tabel-histori .row1col2, #tabel-histori .row2col2 { text-align: right; }
                #tabel-histori .row2col2 { font-weight: bolder; }
                /* #tabel-histori .sisaldo { text-align: right; padding-right: 22px; } */
                #tabel-histori .jarak td { height: 4px; background-color: antiquewhite; border-top: 1px solid silver; border-bottom: 1px solid silver; }


            #bingkai-transfersaldo { margin: auto; margin-top: 11px; margin-bottom: 44px; display: none;
                width: 88%; height: 414px; 
                border: 1px solid orangered; 
            }        
                #judul { margin: auto; margin-top: 11px; margin-bottom: 22px; width: 99%; line-height: 33px; 
                    font-size: 15px; text-align: center; color: orangered; 
                }
                #bingkai-transfersaldo-form { margin: auto; margin-bottom: 22px; width: 86%; height: auto; 
                    /* border: 1px solid orangered;  */
                }
                    .inputtransfer { margin: auto; margin-bottom: 33px; 
                        width: 97%; height: 33px; font-size: 17px; font-weight: normal; color: darkred; 
                        background-color: white;
                        border: 0; border-bottom: 1px solid lightcoral; 
                    }
                    #pesantransfer { margin: auto; width: 99%; text-align: center; font-size: 11px; color: orangered; }
                    #bingkai-tomboltransfersaldo { margin: auto; margin-top: 22px; width: 100%; height: 86px; }
                        .btn-transfersaldo { margin: 0; margin-bottom: 17px; width: 100%; height: 47px; color: white;
                            background-color: orangered; border: 1px solid whitesmoke; border-radius: 7px;
                        }
                        
            /* BINGKAU UTAMA PRODUK */
            #bingkai-seksi-produk { margin: 0; overflow: auto;
                width: 99%; height: 478px;                 
                /* border: 1px solid antiquewhite; */
            }
                /* KATEGORI PRODUK */
                #bingkai-kategori { margin: auto; margin-top: 11px;
                    width: 88%; height: auto;
                    /* border: 1px solid whitesmoke; */
                }
                    .semuakategori { margin: auto; margin-bottom: 22px; display: inline-block;
                        width: 141px; height: 131px;
                        background-color: white; border: 1px solid silver; border-radius: 5px;
                        ;
                    }
                    .kategorikanan { float: right; }
                    .image-kategori { width: 100%; height: 100%; }


                /* PRODUK PER KATEGORI */
                #bingkai-kategori-produk { margin: auto; margin-bottom: 22px; width: 99%;
                    /* border: 1px solid red; */
                }
                    .bingkai-kategori { margin: auto; margin-bottom: 22px; width: 99%; }
                    .sembunyi { display: none; }
                        .label-kategori { margin: 0; font-size: 15px; line-height: 47px; 
                            margin-bottom: 22px; padding-left: 22px; color: white;  
                            background-color: RGB(55, 178, 77); border-radius: 7px;
                        }
                        .label-kategori:hover { font-weight: bold; border-bottom: 2px solid silver; }
                        .toggle-arrows2 { float: right; margin-right: 11px; cursor: pointer; }
                        
                        .toggle-daftarproduk { margin: auto; 
                            border: 1px solid whitesmoke; 
                        }
                            .bingkai-produk { margin: 3px 6px; margin-bottom: 11px; display: inline-block;
                                width: 98px; height: 88px; 
                                background-color: white; border: 1px solid silver; border-radius: 5px;
                            }
                                .bingkai-img { margin: auto; 
                                    width: 96%; height: 78%; 
                                    /* border: 1px solid whitesmoke; border-radius: 5px; */
                                }
                                    .img-produk { margin: auto; width: 99.9%; height: 99.9%; }
                                    
                                .nama-produk { margin: auto; width: 99%; font-size: 10px; text-align: center; 
                                    /* border: 1px solid lightseagreen; */
                                }                        


                /* PRODUK DETAIL*/
                #bingkai-produk-detail { margin: auto; margin-bottom: 22px; display: none; width: 96%; 
                    /* border: 1px solid orangered; */
                }
                    .bingkai-produk2 { margin: 0; display: inline-block;
                        margin-left: 7px; margin-top: 7px;
                        width: 96%; height: 74px;
                        background-color: white;
                        border: 1px solid silver; border-radius: 7px;
                    }
                        .bingkai-img2 { margin: 2px 2px; float: left;
                            width: 23%; height: 91%;
                        }
                            .img-produk2 { margin: 0; width: 100%; height: 99%; }
                        
                        .bingkai-detail2 { margin: 2px 2px; float: right;
                            width: 73%; height: 93%; 
                        }
                            .bingkai-detail2 p { margin: 0; font-weight: normal; font-size: 12px; }
                            .bingkai-detail2 .desc-produk2 { font-size: 11px; }
                                .btn-cektagihan { color: blue; }
                                
                /* **************************************************************************KONFIRMASI TRANSAKSI */
                
                #konfirmasi-transaksi-pulsa { margin: auto; width: 96%; /*height: 525px;*/ display: none; 
                    border: 1px solid whitesmoke;
                }
                    #konfirmasi-transaksi-pulsa-dalam { margin: auto; width: 99%; height: 100%; 
                        background-color: white; border: 1px solid lightcoral;
                    }
                        #headerkonfirmasi { margin: auto; padding-left: 22px;
                            width: 95.5%; height: 9%; line-height: 303%; font-size: 17px;
                        }
                        #tabel-konfirmasi { margin: auto; margin-top: 11px; width: 93%; font-size: 12px;
                            /* border: 1px solid orangered; */
                        }
                            .items { color: rgb(77,77,111); }

                        #bingkai-tujuan-pin { margin: auto; margin-top: 55px; width: 93%; 
                            background-color: white; /* border: 1px solid orangered; */
                        }
                            .labels { margin: auto; color: gray; }
                            input { margin: auto; margin-bottom: 11px;
                                width: 98.6%; height: 36px;
                                font-size: 15px;
                                background: 0; border: 0;
                                border-bottom: 1px solid lightcoral;
                            }

                            #bingkai-hasil { margin: auto; margin-bottom: 11px;
                                width: 99%; height: auto; border: 1px solid white; 
                            }
                                #labelhasil { margin: auto; width: 99%; height: auto; font-size: 12px; text-align: center; }
                            
                            #submitpulsa, #prosesing { margin: auto; margin-top: 22px; margin-bottom: 22px;
                                width: 99.9%; height: 49px; color: white; 
                                background-color: orangered; border: 1px solid red;
                                border-radius: 36px;
                            }
                            #prosesing { font-size: 22px; display: none;}


                #konfirmasi-transaksi-ppob { margin: auto; display: none; 
                    width: 96%; /*height: 525px;*/ border: 1px solid white;
                }
                    #konfirmasi-transaksi-ppob-dalam { margin: auto; width: 99%; height: 100%; 
                        background-color: white; border: 1px solid lightgray;
                    }
                        #headercektagihan { margin: auto; margin-bottom: 22px; text-align: center; 
                            width: 99%; height: 9%; line-height: 33px; font-size: 12px; border: 0 solid orangered;
                        }

                        #bingkai-input-idpel { margin: auto; margin-top: 22px; width: 99%;  }
                            #idpel { margin: auto; width: 98.9%; text-align: center; }

                        #bingkai-hasil-cektagihan { margin: auto; margin-bottom: 11px;
                            width: 99%; height: auto;
                            background-color: white; border: 1px solid white;
                        }
                            .toggle-hasilcek { margin: auto; width: 99%; height: auto; }
                            #tabel-hasilcek-ppob tr td { font-size: 12px; }


                            #bingkai-inputpin { margin-top: 22px; }

                            #bingkai-hasilhit { font-size: 12px; text-align: center;}

                        /* input[id="cektagihan"] { margin-bottom: 22px; } */
                        #cektagihan, #prosesingppob { margin: auto; margin-top: 22px; margin-bottom: 22px;
                            width: 99.9%; height: 49px; color: white; 
                            background-color: orangered; border: 1px solid red;
                            border-radius: 36px;
                        }
                        #prosesingppob { font-size: 22px; display: none;}


        #bingkai-footer { position: fixed; bottom: 1px; left: 0;
            margin: 0; width: 99.9%; height: 63px;
            background-color: antiquewhite; border-top: 0 solid green;
        }
            #tabelfooter { margin: auto; margin-top: 7px; width: 99%; }
                #tabelfooter tr td { margin: auto; width: 23%; height: 43px; text-align: center; border: 0 solid orangered; }
                    #tabelfooter tr td .btn-footer { margin: auto; width: 99%; height: 100%; font-size: 12px;
                        background-color: whitesmoke; border-radius: 5px; border: 1px solid silver; color: darkred; }

}