/*############### TAMPILAN DEKSTOP ###############*/
@media screen and (min-width: 1024px) {
    /*#region >>>>> FORCE MOBILE VIEW*/
    /*page*/
    #pageNotFound .isi, #navbarBawah .menuGrid, .infoPesananSingkat .wrap,
    .wrapperLogin, #register, #opsiResister, #inputOtp, .wrapperReset,
    #indexDashboard, #indexDiaryHamilku, #indexDiaryGinekologi, #indexPesanan, #indexProfil, #dataDiriPasien,
    #areaArtikel, #areaDetailArtikel, #areaDetailTema, #areaTagArtikelDokter,
    #indexKelasEdukasi, #areaKelasBumil,
    #pageAllLayanan, #cariLayananTatapMuka, #cariLayananTatapMuka::before, #cariLayananTatapMuka .navigasi, #pageDetailNakes,
    #indexFaskes, #indexFaskes::before, #indexFaskes .navigasi, #detailFaskes,
    #waitingBayar, #pageSuksesBayar, .orderPendingPembayaran,
    #indexChat, #detailChat, #indexKalk, .indexPengingat, #indexKSPRmandiri, #resultKSPRmandiri, #indexForum, #indexAllForum,
    #indexAllForum .shadowSearch, #indexAllForum .navigasiArea, #pertanyaanForum .inputJawaban .designInputan, #detailForum,
    #detailForum .wrapInfoGabung .infoGabung,
    #indexHamilkuMedia, #platformMedia, #kategoriMedia, #indexCetak3d, #offline-message .wrapper,

    /*popup*/
    #popupInfo.e-dialog, #loadingFullPage.e-dialog, #areaSyaratKetentuan.e-dialog, #areaNotifikasi.e-dialog, #detailNotifikasi.e-dialog,
    #versiAplikasi.e-dialog, #halamanBantuan.e-dialog,
    #detailKelasBumil.e-dialog, #regKelasBumil.e-dialog,
    #inputDataKehamilan.e-dialog, #detailPenulis.e-dialog,
    #DetailDataKehamilan.e-dialog, #detailDigitalANC.e-dialog, #tabelSkorPoedji.e-dialog, #tabelSkrining.e-dialog, #scannerDiaryHamilku.e-dialog,
    #detailTatapMuka.e-dialog, #bookingTatapMuka.e-dialog, #popupDetailNakes.e-dialog, #infoSingkatFaskes.e-dialog,
    #pilihPembayaran.e-dialog, #ringkasanCheckout.e-dialog, #detailPesanan.e-dialog, #popupPembatalan.e-dialog, #inputPromo.e-dialog, #galeriFotoFaskes.e-dialog,
    #addPengingat.e-dialog, #pertanyaanKSPRmandiri.e-dialog, #detailHistoKSPRmandiri.e-dialog, #dataKelahiran.e-dialog, #indexRiwayatKehamilan.e-dialog,
    #detailRiwayatKehamilan.e-dialog, #diaryHamilkuRiwayatKehamilan.e-dialog, #detailPromo.e-dialog,
    #detailGinekologi.e-dialog, #detailPromil.e-dialog, #detailKb.e-dialog, #detailKandunganLain.e-dialog, #detailUSG.e-dialog,
    #pertanyaanForum.e-dialog, #inputPertanyaanForum.e-dialog, #inputJawabanForum.e-dialog, #skForum.e-dialog, #detailFotoForum.e-dialog,
    #infoSingkatNakes.e-dialog, #detailMediaYoutube.e-dialog, #detailMediaTiktok.e-dialog,
    #addAlamatKirim.e-dialog, #editAlamatKirim.e-dialog,
    #panduanPemesanan.e-dialog, #pilihModel.e-dialog, #detailModel.e-dialog, #pilihFileUsg.e-dialog, #panduanPilihFile3d.e-dialog,
    #pilihDiaryHamilku.e-dialog, #ringkasanCheckout3d.e-dialog, #detailPesanan3d.e-dialog {
        width: 45% !important;
    }

    /*modal mini*/
    #warningOtp.e-dialog, #verifikasiKtp.e-dialog, #warningDiary.e-dialog, #unblockNotifikasi.e-dialog {
        width: 30% !important;
    }
    /*#endregion*/
}

/*############### TAMPILAN TABLET ###############*/
@media screen and (min-width: 768px) and (max-width: 1023px) {
    /*#region >>>>> FORCE MOBILE VIEW*/
    /*page*/
    #pageNotFound .isi, #navbarBawah .menuGrid, .infoPesananSingkat .wrap,
    .wrapperLogin, #register, #opsiResister, #inputOtp, .wrapperReset,
    #indexDashboard, #indexDiaryHamilku, #indexDiaryGinekologi, #indexPesanan, #indexProfil, #dataDiriPasien,
    #areaArtikel, #areaDetailArtikel, #areaDetailTema, #areaTagArtikelDokter,
    #indexKelasEdukasi, #areaKelasBumil,
    #pageAllLayanan, #cariLayananTatapMuka, #cariLayananTatapMuka::before, #cariLayananTatapMuka .navigasi, #pageDetailNakes,
    #indexFaskes, #indexFaskes::before, #indexFaskes .navigasi, #detailFaskes,
    #waitingBayar, #pageSuksesBayar, .orderPendingPembayaran,
    #indexChat, #detailChat, #indexKalk, .indexPengingat, #indexKSPRmandiri, #resultKSPRmandiri, #indexForum, #indexAllForum,
    #indexAllForum .shadowSearch, #indexAllForum .navigasiArea, #pertanyaanForum .inputJawaban .designInputan, #detailForum,
    #detailForum .wrapInfoGabung .infoGabung,
    #indexHamilkuMedia, #platformMedia, #kategoriMedia, #indexCetak3d, #offline-message .wrapper,

    /*popup*/
    #popupInfo.e-dialog, #loadingFullPage.e-dialog, #areaSyaratKetentuan.e-dialog, #areaNotifikasi.e-dialog, #detailNotifikasi.e-dialog,
    #versiAplikasi.e-dialog, #halamanBantuan.e-dialog,
    #detailKelasBumil.e-dialog, #regKelasBumil.e-dialog,
    #inputDataKehamilan.e-dialog, #detailPenulis.e-dialog,
    #DetailDataKehamilan.e-dialog, #detailDigitalANC.e-dialog, #tabelSkorPoedji.e-dialog, #tabelSkrining.e-dialog, #scannerDiaryHamilku.e-dialog,
    #detailTatapMuka.e-dialog, #bookingTatapMuka.e-dialog, #popupDetailNakes.e-dialog, #infoSingkatFaskes.e-dialog,
    #pilihPembayaran.e-dialog, #ringkasanCheckout.e-dialog, #detailPesanan.e-dialog, #popupPembatalan.e-dialog, #inputPromo.e-dialog, #galeriFotoFaskes.e-dialog,
    #addPengingat.e-dialog, #pertanyaanKSPRmandiri.e-dialog, #detailHistoKSPRmandiri.e-dialog, #dataKelahiran.e-dialog, #indexRiwayatKehamilan.e-dialog,
    #detailRiwayatKehamilan.e-dialog, #diaryHamilkuRiwayatKehamilan.e-dialog, #detailPromo.e-dialog,
    #detailGinekologi.e-dialog, #detailPromil.e-dialog, #detailKb.e-dialog, #detailKandunganLain.e-dialog, #detailUSG.e-dialog,
    #pertanyaanForum.e-dialog, #inputPertanyaanForum.e-dialog, #inputJawabanForum.e-dialog, #skForum.e-dialog, #detailFotoForum.e-dialog,
    #infoSingkatNakes.e-dialog, #detailMediaYoutube.e-dialog, #detailMediaTiktok.e-dialog,
    #addAlamatKirim.e-dialog, #editAlamatKirim.e-dialog,
    #panduanPemesanan.e-dialog, #pilihModel.e-dialog, #detailModel.e-dialog, #pilihFileUsg.e-dialog, #panduanPilihFile3d.e-dialog,
    #pilihDiaryHamilku.e-dialog, #ringkasanCheckout3d.e-dialog, #detailPesanan3d.e-dialog {
        width: 70% !important;
    }

    /*modal mini*/
    #warningOtp.e-dialog, #verifikasiKtp.e-dialog, #warningDiary.e-dialog, #unblockNotifikasi.e-dialog {
        width: 40% !important;
    }
    /*#endregion*/
}

/*############### TAMPILAN HP ###############*/
@media screen and (max-width: 767px) {
    /*#region >>>>> GENERAL*/
    #navbarBawah {
        width: 100%;
    }
    /*#endregion*/

    /*#region >>>>> ERROR UI*/
    #blazor-error-ui .errorPage {
        padding: .4rem .8rem .4rem .6rem;
    }
    #blazor-error-ui .errorPage::before {
        background-position: bottom;
    }
    #blazor-error-ui .errorPage .kiri {
        gap: .5rem;
    }
    #blazor-error-ui .errorPage .teks p:nth-of-type(1) {
        font-size: .95rem;
    }
    #blazor-error-ui .errorPage .teks p:nth-of-type(2) {
        font-size: .8rem;
    }
    #blazor-error-ui .errorPage .reload {
        font-size: .7rem;
        padding: .25rem .8rem;
    }
    /*#endregion*/

    /*#region >>>>> COMING SOON*/
    #comingSoon .wrapper:before {
        top: -90px;
        width: 150%;
        height: 600px;
    }
    #comingSoon .teks {
        min-height: 280px;
    }
    #comingSoon .teks p:nth-of-type(1) {
        font-size: 2.5rem;
    }
    #comingSoon .teks p:nth-of-type(2) {
        font-size: 1rem;
        padding: 0 1.5rem;
    }
    #comingSoon .gambar .animasi img:nth-of-type(1) {
        width: 300px;
    }
    #comingSoon .gambar .animasi span:nth-of-type(1) {
        top: 95px;
        width: 40px;
        height: 40px;
    }
    #comingSoon .gambar .animasi span:nth-of-type(1):before {
        font-size: .6rem;
    }
    #comingSoon .gambar .animasi span:nth-of-type(2) {
        bottom: 80px;
        height: 18px;
        width: 86px;
    }
    /*#endregion*/

    /*#region >>>>> INDEX DAN DETAIL KELAS BUMIL*/
    #kelasBumil {
        padding: 1rem
    }
    #kelasBumil::-webkit-scrollbar {
        display: none;
    }
    #kelasBumil .judul p:nth-of-type(1) {
        font-size: 1.4rem;
    }
    #kelasBumil .judul p:nth-of-type(2) {
        font-size: .9rem;
    }
    #kelasBumil .item .teks p:nth-of-type(1) {
        font-size: .95rem;
    }
    #kelasBumil .item .teks p:nth-of-type(2) {
        font-size: .8rem;
    }
    #kelasBumil .item .teks button {
        display: none;
    }

    #detailKelasBumil .konten .teks {
        padding: 1.5rem;
    }
    #detailKelasBumil .konten .teks p:nth-of-type(2) {
        font-size: 1.3rem;
        padding: 0;
    }
    #detailKelasBumil .konten .teks p:nth-of-type(3),
    #detailKelasBumil .konten .teks p:nth-of-type(4) {
        font-size: .9rem;
    }
    /*#endregion*/

    /*#region >>>>> INDEX PROFIL*/
    #indexProfil .areaInfo {
        margin: 0 1.5rem;
    }
    #indexProfil .areaInfo .atas .item {
        padding: 1rem .6rem;
    }
    #indexProfil .areaInfo .atas .item:before {
        font-size: 2.5rem;
    }
    #indexProfil .areaInfo .atas .item span:nth-of-type(1) {
        font-size: .8rem;
    }
    #indexProfil .areaInfo .atas .item span:nth-of-type(2) {
        font-size: .9rem;
    }
    /*#endregion*/
}