body, html {height: 100%;overflow: hidden;}
        @font-face{
            font-family:'UthmanThaha';
            src:url('https://kangismet.github.io/fonts/Uthman-Thaha.eot');
            src:url('https://kangismet.github.io/fonts/Uthman-Thaha.eot?#iefix') format('embedded-opentype'),
            url('https://kangismet.github.io/fonts/Uthman-Thaha.ttf') format('truetype');
            font-weight:400;font-weight:normal;font-display: swap;
        }   
        .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;}
        .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: 70px; margin-left: 0px; margin-right: 0px; padding-top: 0; width: 100%; overflow: hidden;padding-right: 0px; padding-left: 20px;height: 100vh}
        .card-footer1 {height: 30px}
        .card-footer {background-color: black;color: white;padding-bottom: 0px;margin-top:5px;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;}
        .classic {height: 25px; font-size: 12pt;}
        #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}
        #quran_indo {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;text-align: justify !important;}
        #ruangPilihan {height: 70px;margin-top:0px; padding-top:0px; height: 30px;}
        .arab {font-size: 22px; line-height: 2; font-family: "UthmanThaha"; font-weight: 400; text-align: right; direction: rtl; padding-right: 15px; padding-left: 0px; padding-bottom: 0px;color: black;text-align:justify !important;}
        #indo {font-size:12px;font-family:Verdana, Geneva, sans-serif;font-weight:normal;font-style:normal;direction:ltr;text-align:justify !important;margin-left: 0px;}
        .angkaArab {
            font-size: 18px;font-family: 'UthmanThaha';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;}
        #play_button {z-index: 10; }/* Pastikan tombol berada di atas elemen lain */
        .highlight {background-color: lightcyan;font-weight: bold;margin-left: 20px;width: auto;}
        .btn-primary {color: #fff;background-color: #007bff;border-color: #007bff;height: 25px;padding-top: 0px;}
        ::-webkit-scrollbar {width:20px; white-space: pre;}

        .bismillah {
        font-size: 22px !important;font-weight: 600;font-family: 'Uthmani';font-weight: normal;font-style: normal;color: black;
        background-image: url('../../../../img/sura-frame.png'); /* Path ke gambar frame */
        background-size: contain;background-repeat: no-repeat;background-position: center;display: inline-block; 
        padding: 10px;margin-right: 10px;padding-left: 30px;padding-right: 30px;padding-top: 0px;padding-bottom: 15px;text-align: center;}

        /* Frame -------------------------------*/
        .
        .tempatIsi{width: 100%; padding-left: 0px; padding-right: 0px;margin-left: 0px; margin-right: 0px;}
        #ruangIndo {display: none !important;}
        #ruangArab {display: block;}
        .audio-controls {margin-top: 20px;text-align: center;}
        .audio-controls button {margin: 0 10px;padding: 10px 20px;font-size: 16px;}
        audio {position: absolute;bottom: 10px; /* Atur posisi audio agar tidak mengganggu elemen lain */left: 50%;transform: translateX(-50%);transition: none; }


/* ------------- Methode ------------------*/

    .bingkai {display: flex;flex-direction: column;align-items: stretch;position: fixed;width: 98vw;margin-top: 40px;}
    .bingkai-atas,
    .bingkai-bawah {
      height: 30px;background: url('../../../../img/frame/bahan_frame_horizontal_1.png') repeat-x;}
    .bingkai-tengah {display: flex;flex-direction: row;}
    .bingkai-kiri1,
    .bingkai-kanan1 {
        width: 30px;background: url('../../../../img/frame/bahan_frame_vertikal_1.png') repeat-y;margin-right: -8px;margin-top: -15px;}

    .bingkai-kiri, .bingkai-kanan {
    width: 30px;background: url(../../../../img/frame/bahan_frame_vertikal_1.png) repeat-y;margin-right: -8px;margin-top: -24px;}
    .konten-utama {flex: 1;padding-right: 10px;background-color: #fff;}
    .isi {margin-top: 40px; position: fixed;margin-left: 0px;margin-right: 0px;}


        /* Media -------------------------------*/
         @media (max-width: 600px) {
            .frame-container {overflow: hidden; padding-top: 20px;height: 50vh;}
            .card-body {margin-left: 0px;padding-top: 0;width: 100%; padding-right: 0px;}
            .tema {font-size: 10pt;margin-left: -60px;margin-right: 0px}
            .navbar-brand {margin-right: -40px;}
            .img-fluid {height: auto;margin-left: -10px;}
            .table {height: 50%;}
            .img-fluid {max-width: 30%;height: auto;margin-left: -40px;}
            .navbar-brand img {max-width: 40%;height: auto;margin-left: -10px;margin-right: 0px;}
            .input-group-prepend {height: 25px;}
            .classic {height: 25px; font-size: 9pt;}
            .input-group-text {font-size: 10pt;}
            .arab {font-size: 18px;padding-right: 0px}
            .angkaArab {font-size: 14px;padding: 5px;margin-right: 10px;}
            .btn-primary {color: #fff;background-color: #007bff;border-color: #007bff;height: 25px;padding-top: 0px;padding-left: 2px;padding-right: 5px;}

            /* CSS untuk quran_ayat */
            #quran_ayat {overflow-x: hidden; overflow-y: auto; margin-top: 0px;padding-top: 0px;  padding-bottom: 40px; transition: max-height 0.3s ease-out; height:400px; margin-left: -10px; margin-right: 0px;}
            #quran_indo {overflow-x: hidden; overflow-y: auto; margin-top: 0px;padding-top: 0px;  padding-bottom: 40px; transition: max-height 0.3s ease-out; height:400px; margin-left: -10px; margin-right: 0px;}

            /* ---- Frame ------------ */
                       
            .frame-container_arab {position: fixed;margin-top:10px;padding: 0px;max-height: 100%; width:110%;overflow: auto;margin-left: 0px;border: 30px solid transparent;box-sizing: border-box;margin-left: 0px;padding-left: 20px;padding-right: 10px;overflow: hidden;}
            .frame-container_arab .frame-right {right: -6px;background: url(../../../../img/frame/bahan_frame_vertikal_1.png) repeat-y;}
            .frame-container_arab .top-right-corner {position: absolute;top: 0;right: 0;width: 25px;height: 25px;background: url('../../../../img/icon_middle.jpg');z-index: 10;}
            #metode {padding-left: 0px;margin-top: 0px;overflow-y: auto;height: 60vh;margin-left: 10px;margin-right: -30px;}
            .bingkai {display: flex;flex-direction: column;align-items: stretch;position: fixed;width: 90vw;margin-top: 40px;}
            .isi {margin-top: 40px; position: fixed;margin-left: 0px;margin-right: 0px;}
            .togel {padding-top: 0px;}

     }