@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;
        }
 

body, html {height: 100%;overflow: hidden;}

.card-header {height: 30px;background-color: black; margin-top: 0px;color: white;padding-top: 0px;}
.card-body {padding-right: 0px; overflow: hidden;}
.judul {font-size: 12pt; font-weight: 600;}
.accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
    font-size: 1rem;
    color: var(--bs-accordion-btn-color);
    text-align: left;
    background-color: var(--bs-accordion-btn-bg);
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: var(--bs-accordion-transition);
    height: 30px;overflow: hidden;}


.biru {color:blue;font-weight: 600;}
.list-item {display: flex;align-items: flex-start;margin-bottom: 1em;margin-left: 20px;}
.list-label-atas {flex: 0 0 auto; margin-top: 10px;}
.list-label {flex: 0 0 auto;} 
.list-content1 {margin-left: 10px;font-weight: 600;color: red;}
.list-content {margin-left: 20px;font-weight: 600;color: blue;}
.indented-paragraph {text-indent: 0px;padding-left: 40px;text-align: justify;}

.text-indent {text-indent: 0px;padding-left: 40px;text-align: justify;}
.list-label-tajwid {flex: 0 0 auto; font-weight: 600;}
.indented-paragraph-tajwid {text-indent: 0px;padding-left: 0px;text-align: justify;padding-inline-start: 15px;}

.list-item-0 {display: flex;align-items: flex-start;margin-bottom: 0em; margin-left: 0px;padding-top: 0px;}
.list-label-0 {flex: 0 0 auto; margin-top: 0px; margin-left: 0px;}
.list-content-0 {margin-left: 15px;font-weight: 600;color: blue;}
.indented-paragraph-0 {text-indent: 0px;padding-left: 32px;text-align: justify;}

.list-item-1 {display: flex;align-items: flex-start;margin-bottom: 0em; margin-left: 0px;padding-top: 0px;}
.list-label-1 {flex: 0 0 auto; margin-top: 0px; margin-left: 30px;}
.list-content-1 {margin-left: 10px;font-weight: 600;color: blue;}
.indented-paragraph-1 {text-indent: 0px;padding-left: 42px;text-align: justify;}
.p1 {margin-left: 83px;text-align: justify;}

.list-item-2 {display: flex;align-items: flex-start;margin-bottom: 0em; margin-left: 0px;padding-top: 0px;}
.list-label-2 {flex: 0 0 auto; margin-top: 0px; margin-left: 50px;}
.list-content-2 {margin-left: 10px;font-weight: 600;color: blue;}
.indented-paragraph-2 {text-indent: 0px;padding-left: 62px;text-align: justify;}
.p2 {margin-left: 52px;text-align: justify;}

.list-item-3 {display: flex;align-items: flex-start;margin-bottom: 0em; margin-left: 0px;padding-top: 0px;}
.list-label-3 {flex: 0 0 auto; margin-top: 0px; margin-left: 70px;}
.list-content-3 {margin-left: 10px;font-weight: 600;color: blue;}
.indented-paragraph-3 {text-indent: 0px;padding-left: 62px;text-align: justify;}
.p3 {margin-left: 75px;text-align: justify;}

.list-item-4 {display: flex;align-items: flex-start;margin-bottom: 0em; margin-left: 0px;padding-top: 0px;}
.list-label-4 {flex: 0 0 auto; margin-top: 0px; margin-left: 60px;}
.list-content-4 {margin-left: 10px;font-weight: 600;color: blue;}
.indented-paragraph-4 {text-indent: 0px;padding-left: 62px;text-align: justify;}
.p4 {margin-left: 83px;text-align: justify;}


.list-item-atas {display: flex;align-items: flex-start;margin-bottom: 1em;}
.list-label-atas {flex: 0 0 auto; margin-top: 10px; margin-left: 20px;}
.list-content-atas {margin-left: 10px;font-weight: 600;color: red;}
.indented-paragraph-atas {text-indent: 0px;padding-left: 30px;text-align: justify; margin-top: -20px;}


.list-item2 {display: flex;align-items: flex-start;margin-bottom: 0px;margin-left: 30px;}
.list-label2 {flex: 0px 0px auto;margin-top: 7px;}  
.list-content2 {margin-left: 10px;font-weight: 600;color: blue;}
.indented-paragraph2 {text-indent: 0px;padding-left: 50px;text-align: justify;}

.list-item3 {display: flex;align-items: flex-start;margin-bottom: 0px;margin-left: 50px;}
.list-label3 {flex: 0px 0px auto;margin-top: 7px; color: red;}  
.list-content3 {margin-left: 10px;font-weight: 600;color: red;}
.indented-paragraph3 {text-indent: 0px;padding-left: 70px;text-align: justify;}

.list-label-huruf {margin-top: 0px;}

.indented-paragraph-tajwid00  {text-indent: 0px;padding-left: 0px;text-align: justify;}
.hurufIndo {font-size: 12pt;}
.fa-file,.fa-list {color:black;}
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }
a,.menu,.caret1,.caret2 { color: black;font-weight:bold; } 
.dropdownSubMenu2 {font-family: Arial, Helvetica, sans-serif;font-size:10pt;font-weight:500;margin-left:10px;}
.list-item-tajwid {display: flex;align-items: flex-start;margin-bottom: 0px;margin-left: 0px;flex-wrap: wrap; /* Membuat elemen membungkus di layar kecil */}
.tajwid {display: inline-block;white-space: normal;overflow-wrap: break-word;max-width: 100%; box-sizing: border-box; text-align: justify;margin-top: -10px;}
.kotak1 {background-color: lightgoldenrodyellow;border: 2px solid red;padding-left: 20px;padding-right: 20px;margin-top: 10px;width: 100%;box-sizing: border-box;}
.kotak2 {background-color: azure;border: 2px solid blue;padding-left: 20px;padding-right: 20px;margin-top: 10px;width: 100%;}
.keterangan {margin-left:20px;padding-left: 0px;text-align: justify;}
.nested1, .nested2 {display: none;margin-left: 20px;}
.active1, .active2 {display: block;}
.caret1::before, .caret2::before {content: "\25B6"; /* panah ke kanan */color: black;display: inline-block;margin-right: 6px;transition: transform 0.2s;}
.caret-down::before {transform: rotate(90deg); /* panah mengarah ke bawah */}
.subscript {font-size: 100%;vertical-align: super;font-weight: 900;}


.arab-symbol {color: red;text-decoration: underline;font-size: 20pt;font-weight: 700;vertical-align: sub;}
.arab-symbol-super {
  color: red;text-decoration: underline !important;font-size: 20pt;font-weight: 700;vertical-align: super;display: inline;}

.arab-symbol-sub {color: red;text-decoration: underline !important; font-size: 20pt;font-weight: 700;vertical-align: sub;display: inline;}
.fathatain {color: red; font-size: 30pt;text-decoration: none;font-family: 'LPMQ', sans-serif;font-size: 18pt;margin-left: -20px;vertical-align: 0.25em;}
.dommatain {color: red; font-size: 30pt;text-decoration: none;font-family: 'LPMQ', sans-serif;font-size: 18pt;margin-left: -20px;vertical-align: 0.3em;}
.kasratain {color: red; /* Merah untuk dommatain */text-decoration: none;font-family: 'LPMQ', sans-serif;font-size: 24pt;margin-left: -20px;vertical-align: -0.3em;}

/*----------Text ---------------*/
p {text-align: justify;}
b {font-weight: 600;padding-left: 5px;}
.arab {font-size: 22pt !important; line-height: 2; font-family: "LPMQ"; font-weight: 400; text-align: right; direction: rtl; padding-right: 0px; padding-left: 0px; padding-bottom: 0px;color: black;text-align:justify !important;}

.arab16 {font-size: 16pt; line-height: 2; font-family: "LPMQ"; font-weight: 400; text-align: right; direction: rtl; padding-right: 0px; padding-left: 0px; padding-bottom: 0px;color: black;text-align:justify !important;}
.arab14 {font-size: 14pt; line-height: 2; font-family: "LPMQ"; font-weight: 400; text-align: right; direction: rtl; padding-right: 0px; padding-left: 0px; padding-bottom: 0px;color: black;text-align:justify !important;}
.arab12 {font-size: 12pt; line-height: 2; font-family: "LPMQ"; font-weight: 400; text-align: right; direction: rtl; padding-right: 0px; padding-left: 0px; padding-bottom: 0px;color: black;text-align:justify !important;}
.arab10 {font-size: 10pt; line-height: 2; font-family: "LPMQ"; font-weight: 400; text-align: right; direction: rtl; padding-right: 0px; padding-left: 0px; padding-bottom: 0px;color: black;text-align:justify !important;}


.arabNaik  {font-size: 14pt; line-height: 2; font-family: "LPMQ"; font-weight: 400; text-align: right; direction: rtl; padding-right: 15px; padding-left: 0px; padding-bottom: 0px;color: black;text-align:justify !important;margin-top: 40px !important;vertical-align: sub;}
.arab_tajwid_merah {font-size: 14pt; line-height: 2; font-family: "LPMQ"; font-weight: 400; text-align: right; direction: rtl; padding-right: 0px; padding-left: 0px; padding-bottom: 0px;color: black;text-align:justify !important;}
.angkaArab {font-size: 18px;font-family: 'Scheherazade';font-weight: 500;font-style: normal;color: red; background-image: url('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;}
.arab_harakat {font-size: 20pt; line-height: 2; font-family: "LPMQ"; font-weight: 400; text-align: right; direction: rtl; padding-right: 15px; padding-left: 0px; padding-bottom: 0px;color: black;text-align:justify !important;}
.arab-merah {font-size: 14pt; line-height: 2; font-family: "LPMQ"; font-weight: 400; text-align: right; direction: rtl; padding-right: 15px; padding-left: 0px; padding-bottom: 0px;color: red;text-align:justify !important;}
.arab_biru {font-size: 14pt; line-height: 2; font-family: "LPMQ"; font-weight: 400; text-align: right; direction: rtl; padding-right: 15px; padding-left: 0px; padding-bottom: 0px;color: blue;text-align:justify !important;}
.arab_tengah {font-size: 14pt; line-height: 2; font-family: "LPMQ"; font-weight: 400; text-align: right; direction: rtl; padding-right: 15px; padding-left: 0px; padding-bottom: 0px;color: blue;text-align:center; !important;}
.arab_kiri {font-size: 14pt; line-height: 2; font-family: "LPMQ"; font-weight: 400; text-align: right; direction: ltr; padding-right: 15px; padding-left: 0px; padding-bottom: 0px;color: blue;text-align:left !important;}
.arab span.saktah1 {color: red !important;}
.arab span.saktah {color: red !important;display: inline-block;}
.arab span {color: red !important;}
.arab_artikel16 {font-size: 16pt;}
.arab_artikel14 {font-size: 14pt};
.arab_artikel12 {font-size: 12pt;}
.arab_artikel19 {font-size: 10pt;}
.tipis {font-size: normal}


.terjemahan {font-size: 12pt; text-align: justify;}


.hija {font-size: 16pt; line-height: 2; font-family: "LPMQ"; font-weight: 400; text-align: right; direction: rtl; padding-right: 15px; padding-left: 0px; padding-bottom: 0px;color: blue;text-align:justify !important;}
.tebal {font-weight: 600;}
.normal {font-weight: normal;}
.hitam {color: black;}
.merah {color: red !important;}
.biru {color: blue;}

.kotak_harakat{background-color: lightblue;color: white;padding-top: 5px;padding-bottom: 5px;padding-left: 10px;padding-right: 10px;border-radius: 5px;font-family: 'LPMQ', serif;font-size: 22px;line-height: 1;margin-left: -10px;font-weight: normal;z-index: 99999;margin-left: 0px;}

.simbol_fathatain {=ً}
.simbol_kasrotain {=ٍ}
.simbol_dommatain {=ٌ}

/* - Catatan Kaki -------------------- */

        .footnote {font-size: 0.9em;color: #555;margin-top: 10px;}
        .footnote a {text-decoration: none;color: #007bff;}
        .footnote a:hover {text-decoration: underline;}
        .footnotes {margin-top: 30px;padding-top: 20px;border-top: 1px solid #ddd;}
        .footnotes p {margin: 5px 0;}
/* - Batas Catatan Kaki -------------------- */


@media only screen and (max-width:600px) {
    .judul {font-size: 12pt;}
    .tajwid {width: 100%; box-sizing: border-box; word-break: break-word;}
    .kotak1, .kotak2 {padding-left: 10px; padding-right: 10px;}
    .accordion-button {font-size: 11pt;}
    .bi {font-size: 12pt;}
    .arab {font-size: 16px !important;}
    .terjemahan {font-size: 10pt; text-align: justify;}
    .angkaArab {font-size: 14px !important;}

}