body, html {height: 100%;overflow: hidden;}
        .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-full-height {
            width: 100%;padding-right: 0px;padding-left: 0px;margin-right: 0px;margin-left: 0px;align-content: center;}
        .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: transparent; padding-top: 0px;padding-bottom: 0px;height: 115px;margin-left: -10px;margin-right: -10px; margin-bottom: 20px; }
        .card-body {margin-top: 50px; margin-left: 0px; margin-right: 0px; padding-top: 0; width: 100%; overflow: hidden;padding-right: 0px; padding-left: 20px; overflow: hidden;align-items: center;}
        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;}

      /* CSS untuk mewarnai hukum tajwid */
    /*    .ghunna {
            color: blue;
            font-weight: normal;
        } */

        .mad {color: green;font-weight: normal;}
        .idgham-bigunnah {color: orange;font-weight: normal;}
        .idgham-bilagunnah {color: darkgreen;font-weight: normal;}
        .iqlab {color: brown;font-weight: normal;}
        .ikhfa {color: teal;font-weight: normal;}
        .qalqalah {color: darkviolet;font-weight: normal;}
        .text-right {direction: rtl;text-align: right;}
        .terjemahan1 {font-size:14px;text-align: justify !important;margin-left: 20px;}
        .latin1 {font-size:14px;text-align: justify !important;color : blue;margin-left: 20px;} 
        .arab {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: 15px;padding-left: 15px;padding-bottom: 0px;padding-top:-20px; margin-bottom: 10px;}
        .angkaArab1 {
            font-size: 18px;font-family: 'Scheherazade';font-weight: 500;font-style: normal;color: red;
            background-image: url('fonts/ic-frame-number.svg');
            background-size: contain;background-repeat: no-repeat;background-position: center;display: inline-block;padding: 10px;margin-right: 10px;margin-top: -20px;margin-left: 10px;}


.angkaArab {
    font-size: 18px;
    font-family: 'Scheherazade';
    font-weight: 500;
    font-style: normal;
    color: red;
    background-image: url(fonts/ic-frame-number.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    padding: 4px;
    margin-right: 10px;
    margin-top: -20px;
    margin-left: 10px;
}
.btn-group-sm>.btn, .btn-sm {
    padding: 0rem .5rem;
    font-size: .875rem;
    border-radius: .2rem;
}
        .arabic-font {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: 15px;padding-left: 15px;padding-bottom: 0px;padding-top:-20px;color: blue;}
        .mb-4 {margin-bottom: 0rem !important;}


/* Frame -------------------------------*/
        .frame-container {overflow: hidden; padding-top: 10px; width: 99vw;}
        /* ------- Frame Arab */
        .frame-container_arab1 {
            position: fixed;margin-top:40px;padding: 0px;max-height: 100%;overflow: auto;margin-left: 0px;box-sizing: border-box;width: 100%;margin-left: 0px;}

        .frame-container_arab {position: fixed;margin-top: 40px;padding: 0px;max-height: 100%;overflow: auto;margin-left: 0px;box-sizing: border-box;width: 100vw;margin-left: -15px;}
        /* Bingkai atas */
        .frame-container_arab::before {
            content: "";position: absolute;top: 10;left: 0;width: 98vw;height: 30px;
            background: url('../../../../img/frame/bahan_frame_horizontal_1.png') repeat-x;}

        /* Bingkai bawah */
        .frame-container_arab::after {
            content: "";position: absolute;bottom: -8px;left: 0;width: 98vw;height: 30px;
            background: url('../../../../img/frame/bahan_frame_horizontal_1.png') repeat-x;
        }
        .frame-container_arab .frame-left,
        .frame-container_arab .frame-right {
            position: absolute;
            top: 0; /* Atur agar frame dimulai dari bagian atas */
            width: 30px; /* Menyesuaikan dengan lebar frame */
            height: 100%; /* Agar tinggi sama dengan elemen induk */
        }

        .frame-container_arab .frame-left {
            left: 0;
            background: url('../../../../img/frame/bahan_frame_vertikal_1.png') repeat-y;
        }

        .frame-container_arab .frame-right {
            right: 0px;
            background: url('../../../../img/frame/bahan_frame_vertikal_1.png') repeat-y;
        }

        /* Sudut kiri atas */
        .frame-container_arab .top-left-corner {
            position: absolute;top: 0;left: 0px;width: 25px;height: 25px;
            background: url('../../../../img/icon_middle.jpg'); 
            z-index: 10;
        }

        /* Sudut kanan atas */
        .frame-container_arab .top-right-corner {
            position: absolute;top: 0;right: 7px;width: 25px;height: 25px;
            background: url('../../../../img/icon_middle.jpg');
            z-index: 10;
        }

        /* Sudut kiri bawah */
        .frame-container_arab .bottom-left-corner {
            position: absolute;bottom: 0;left: 0;width: 25px;height: 25px;
            background: url('../../../../img/icon_middle.jpg');
            z-index: 10;
        }

        /* Sudut kanan bawah */
        .frame-container_arab .bottom-right-corner {position: absolute;bottom: 0;right: 7px;width: 25px;height: 25px;z-index: 10;
            background: url('../../../../img/icon_middle.jpg');}
        .frame-container_arab::before, 
        .frame-container_arab::after {z-index: 2;}
        .frame-container_arab .frame-left, 
        .frame-container_arab .frame-right {z-index: 1;}
        .ruang {overflow: auto;height: 80vh;padding-left: 20px;padding-top: 20px;padding-right: 20px;width: 99vw; align-items: center;}
        ::-webkit-scrollbar {width: 1px;}

    @media (max-width: 600px) {
        .card-header {background-color: transparent; padding-top: 0px;padding-bottom: 0px;height: 115px;margin-left: -16px;margin-right: -15px; margin-bottom: 20px; }
        .card-body {margin-left: -15px; margin-top:40px; padding-top: 40;width: 115%; padding-right: 0px; overflow: hidden;}
        .navbar-brand img {max-width: 50%;height: auto; margin-left: 0px;}
        #quran_ayat {overflow-x: hidden; overflow-y: auto; margin-top: 20px;padding-top: 20px; margin-right: 20px; margin-left: 30px; padding-bottom: 40px; transition: max-height 0.3s ease-out;height: 450px}
        .frame-container_arab {
            position: fixed;margin-top:40px;padding: 0px;max-height: 100%;overflow: auto;margin-left: 0px;box-sizing: border-box;width: 100%;margin-left: 0px;overflow:hidden;}
        .classic {font-size: 10pt; width: 120px;margin-right: -10px; margin-left: -20px;}
        .arab {font-size: 18px; padding-right: 0px;}
        .terjemahan1 {font-size:14px;text-align: justify !important;margin-left: 20px;}
        .latin1 {font-size:14px;text-align: justify !important;color : blue;margin-left: 20px;} 
        .ruang {overflow:auto; height: 75vh;padding-left: 20px;padding-top: 20px; padding-right: 20px; width: 96vw !important;}
        .frame-container {overflow: hidden;padding-top: 10px;width: 99vw;height: 85vh;}
        .frame-container_arab::before {
            content: "";position: absolute;top: 0;left: 0;width: 97vw;height: 30px;
            background: url('../../../../img/frame/bahan_frame_horizontal_1.png') repeat-x;}

        /* Bingkai bawah */
        .frame-container_arab::after {
            content: "";position: absolute;bottom: -8px;left: 0;width: 97vw;height: 30px;
            background: url('../../../../img/frame/bahan_frame_horizontal_1.png') repeat-x;
        }
        .fa {font-size: 10pt;}
        .tampil {font-size: 10pt;}
        .fa-home {margin-right: 10px; margin-left: -30px;}
        .tema {margin-left: -30px}
        .fa-volume-up {font-size: 10pt;}
        .play-audio {height: 25px; padding-top: 2px; padding-bottom: 3px; padding-right: 3px;padding-left: 3px;}

    }