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

.card-header {height: 30px;background-color: black; margin-top: 0px;color: white;padding-top: 0px;}
.card-body {padding-right: 10px; }
.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;}


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

.list-item-1 {display: flex;align-items: flex-start;margin-bottom: 1em;margin-left: 20px;}
.list-labe-l {flex: 0 0 auto;} 

.list-content-1 {margin-left: 20px;font-weight: normal;color: black;text-align: justify;}
.indented-paragraph-1 {text-indent: 0px;padding-left: 40px;text-align: justify;}

.text-indent {text-indent: 0px;padding-left: 40px;text-align: justify;}


.p1 {margin-left: 83px;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: 16pt !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: "Traditional Arabic"; 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;; font-family: "LPMQ";}
.arab_artikel14 {font-size: 14pt; font-family: "LPMQ";};
.arab_artikel12 {font-size: 12pt;; font-family: "LPMQ";}
.arab_artikel10 {font-size: 10pt;; font-family: "LPMQ";}
.latin {font-size: 12pt; font-style: italic;color: blue;}
.terjemahan {font-size: 12pt; text-align: justify;}
.kanan {direction: rtl;}
.kiri {direction: ltr;}
.rata {text-align: justify;}
.tipis {font-size: normal !important}
.tebal {font-weight:900;}
.normal {font-weight: normal !important;}
.hitam {color: black !important;}
.merah {color: red !important;}
.biru {color: blue !important;}
.putih {color: white !important;}

.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 -------------------- */


.imgTajqwid25 {width: 25%; line-height: auto;}
.imgTajqwid {}
.imgTajqwid15 {width: 15%; line-height: auto;}
.judulTema {color: white !important;}
.btn-primary {margin-left: -10px;padding-top: 5px; padding-bottom: 5px;}
.singiti {display: none;}
.subJdulHitam {background-color: hitam; color: white; padding-left: 5px;}
.embos1 {color: #333;
      text-shadow:
        1px 1px 1px #fff,   /* highlight atas kiri (efek timbul) */
        -1px -1px 1px #999; /* bayangan bawah kanan */}

.embos2 {color: #333;
      text-shadow:
        1px 1px 1px #fff,   /* highlight atas kiri (efek timbul) */
        -2px -2px 2px #999; /* bayangan bawah kanan */
        font-weight: 500;
    }

.timbul {color: #333;
      text-shadow: 
        2px 2px 2px #ccc,   /* bayangan terang */
        -1px -1px 1px #999; /* bayangan gelap */}

.arabTimbul20 {
      font-size: 20pt;
      font-family: "Traditional Arabic", "Amiri", serif;
      
      direction: rtl;
      font-weight: bold;
      color: #333;
      text-shadow: 
        1px 1px 1px #ccc,   /* bayangan terang */
        -1px -1px 1px #999; /* bayangan gelap */
    } 
.arabTimbul22 {
      font-size: 22pt;
      font-family: "Traditional Arabic", "Amiri", serif;
      
      direction: rtl;
      font-weight: bold;
      color: #333;
      text-shadow: 
        1px 1px 1px #ccc,   /* bayangan terang */
        -1px -1px 1px #999; /* bayangan gelap */
    }     
.arabTimbul24 {
      font-size: 24pt;
      font-family: "Traditional Arabic";
      
      direction: rtl;
      font-weight: bold;
      color: #333;
      text-shadow: 
        1px 1px 1px #ccc,   /* bayangan terang */
        -1px -1px 1px #999; /* bayangan gelap */
    }              

@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;}
    .arab_artikel16 {font-size: 12pt;}
    .arab_artikel14 {font-size: 12pt};
    .arab_artikel12 {font-size: 12pt;}
    .imgTajqwid25 {width: 75%; line-height: auto;}
    .imgTajqwid {width: 50%; line-height: auto;}
    .imgTajqwid15 {width: 50%; line-height: auto;}
    .btn-primary {font-size: 10pt;}

}