@font-face{
        font-family:'LPMQ';
        src:url('https://kangismet.github.io/fonts/lpmq.eot');
        src:url('https://kangismet.github.io/fonts/lpmq.eot?#iefix') format('embedded-opentype'),
        url('https://kangismet.github.io/fonts/lpmq.ttf') format('truetype');
        font-weight:400;
        font-weight:normal;
        font-display: swap;
        }

        @font-face {
            font-family: 'Me Quran';
            src: url('https://kangismet.github.io/fonts/me_quran.eot');
            src: url('https://kangismet.github.io/fonts/me_quran.eot?#iefix') format('embedded-opentype'),
                url('https://kangismet.github.io/fonts/me_quran.ttf') format('truetype');
            font-weight: 400;font-weight: normal;font-display: swap;}


        .quran {
            font-size: 22px;line-height: 2;
            font-family: "Me Quran", "Traditional Arabic", Tahoma, sans-serif;
            font-weight: 400;text-align: right;direction: rtl;padding-right: 10px;padding-left: 15px;padding-bottom: 0px;padding-top:-20px;color: blue;margin-top: -15px;}
          .angkaArab {
            font-size: 18px;
            font-family: 'LPMQ';
            font-weight: normal;
            font-style: normal;
            color: red;
            background-image: url('../../../../img/ic-frame-number.svg');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            display: inline-block;
            padding: 10px;
            margin-right: 10px;}
        .classic {height: 25px; font-size: 12pt;width: 50px;}
        .classic1 {height: 25px; font-size: 12pt;width: 150px;}

        .card {margin-top: 0px; margin-bottom: 0px; padding-top: 0;border: 0px solid blue;--bs-card-spacer-y: 0rem;--bs-card-spacer-x: 1rem; width: 100%;}
        .card-header {background-color: black; padding-top: 0px;padding-bottom: 0px;height: 80px;margin-left: -10px;margin-right: -10px; margin-bottom: 20px; }
        .card-body {margin-top: 40px;margin-left: 0px;margin-right: 0px;padding-top: 20px;width: 100%;overflow: auto;padding-right: 0px;padding-left: 0px;}
        
        footer {background-color: black;color: white;padding-bottom: 10px;text-align: center;height: 30px;font-size: 11pt;z-index: 99999;}

        .navbar-dark {margin-right: 0px;margin-left: 0px;}
        .navbar-brand {padding-top: 0;padding-bottom: 0;margin-right: 0;font-size: var(--bs-navbar-brand-font-size);color: var(--bs-navbar-brand-color);text-decoration: none;white-space: nowrap;}

        .judul {font-size: 14pt; font-weight: 600; margin-top: 40px;}
        .tema {font-size: 14pt;margin-left: 100px;margin-right: 20px}
        .img-fluid {max-width: 100%;height: auto;}

        .form-control:disabled, .form-control[readonly] {background-color: white;opacity: 1; max-height: 200px;}
        .input-group-prepend {height: 25px;}
        .input-group-text {font-size: 12pt;}


        .btn-group-sm>.btn, .btn-sm {
            --bs-btn-padding-y: 0rem;
            --bs-btn-padding-x: 0.3rem;
            --bs-btn-font-size: 0.875rem;
            --bs-btn-border-radius: var(--bs-border-radius-sm);
            margin-right: 10px;
            margin-top: -10px;
        }
    .konten-utama {flex: 1;background-color: #fff;overflow-y: auto;max-height: calc(90vh - 120px);margin-right: -25px;padding-top: 10px;padding-right: 10px;}



    @media (max-width: 600px) {
        .navbar-brand img {max-width: 40%;height: auto;margin-left: -10px;}
        .tema {font-size: 10pt;margin-left: 0px;margin-right: 0px}
        .angkaArab {font-size: 10px;padding: 5px;margin-right: 10px;}
        .quran {font-size: 16px !important;}
        .classic {height: 25px; font-size: 10pt;width: 50px;}
        .classic1 {height: 25px; font-size: 10pt;width: 120px;}
        .bingkai {display: flex;flex-direction: column;align-items: stretch;position: fixed;width: 95vw;margin-top: 40px;}
        .konten-utama {flex: 1;background-color: #fff;overflow-y: auto;max-height: 100vh;margin-right: -25px;padding-top: 10px;padding-right: 5px;padding-left: 0px;}
        .ayat-container {height: 100vh;}
        .bingkai {display: flex;flex-direction: column;align-items: stretch;position: fixed;width: 98vw;margin-top: 40px;height: 100vh;}
        .card-body {margin-top: 40px;margin-left: 0px;margin-right: 0px;padding-top: 20px;width: 100%;overflow: auto;padding-right: 0px;padding-left: 0px;}


    }