/*
p {
	font-size: 18px;
}
*/

p {
	margin: 0.2rem 0.25rem 0;
}

.article p:not([class*="hoda-"]) {
  margin: 0.3rem 0.25rem 1.5rem;
}

.article p.hoda-paragraph{
  margin: 0.3rem 0.25rem 1.5rem;
}

.hoda-paragraph-question {
    margin-top: 3rem;
}

span.hoda-title-question, span.hoda-title-answer, span.hoda-footnote {
  /* margin-bottom: -1.25rem; */
  display: block;
}

p.hoda-signature{
  margin: 0 0.25rem;
}

.article hr {
    width: 25%;
    min-width: 150px;
    border-color: hsl(0 0% 75% / 1);
    margin-right: 0;
}

[class*="hoda-"] {
  /* base hoda properties */
  /*font-size: 1.2rem;*/
}

[class*="hoda-title-"], [class*="hoda-paragraph-"] {
  /* base hoda properties */
    /* font-weight: bold;
    font-family: 'SahlNaskh-Bold';*/
    font-family: 'Noto Naskh Arabic', serif;
    font-weight: 500;
}

.hoda-title-main, .question h1{
	color: #800000;
	text-align: center;
	font-size: 1.5rem;
	margin-top: 1.5rem;
    margin-bottom: 2.5rem !important;
}

.hoda-paragraph{
	text-align: justify;
}

.hoda-span{
  margin: 0.3rem 0.25rem 0.5rem;
}

.hoda-center{
	color: #800000;
	text-align: center;
	font-weight: 100;
}

.hoda-signature{
	color: #800000;
	text-align: left;
	font-weight: 100;
}

@font-face {
  font-family: "hafssmart8";
  src:
  /* url("https://cdn.jsdelivr.net/gh/thetruetruth/quran-data-kfgqpc@main/hafs-smart/font/hafssmart.8.woff2") format("woff2"), */
  url("font/hafssmart.8.woff2") format("woff2"),
  /* url("https://cdn.jsdelivr.net/gh/thetruetruth/quran-data-kfgqpc@main/hafs-smart/font/hafssmart.8.ttf") format("truetype"), */
  url("font/hafssmart.8.ttf") format("truetype");
  /* src:url("font/quran.com/UthmanicHafs1Ver18.woff2") format("woff2"); */
}


.hoda-title-ayah{
	position: relative;
}

.hoda-title-ayah, .verse{
	color: #CC0033;
	/* font-family: "hafs20"; */
	/* font-family: "hafssmart8"; */
    font-family: "ayahNumber";
	font-size: 1.35rem;
	line-height: 1.75;
}

.mismatch-ref {
    color: #1900ff !important;
}

.no-result {
    color: #7f0095 !important;
}

.hoda-em-dashes {
    color: hsl(220deg 12% 32%);
    font-family: 'Noto Naskh Arabic', serif;
    font-size: 1.24rem;
    font-weight: 100;
}

.hoda-em-dashes.sup {
    font-size: 75%;
    line-height: 0;
    vertical-align: top;
    margin: auto -0.5rem;
}

.tajweed-small-letter-sup {
    position: absolute;
    top: -14px;
    font-size: 1rem;
    margin-right: -7px;
    font-family: inherit;
}

.tajweed-small-letter-sub {
    position: absolute;
    bottom: -5px;
    font-size: 1rem;
    margin-right: -14px;
    font-family: inherit;
}

.hoda-paragraph-p-1 .hoda-title-ayah, .hoda-paragraph-p-2 .hoda-title-ayah, .hoda-paragraph-p-3 .hoda-title-ayah, .hoda-title-p-1 .hoda-title-ayah, .hoda-title-p-2 .hoda-title-ayah, .hoda-title-p-3 .hoda-title-ayah {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.hoda-paragraph-p-1 .verse, .hoda-paragraph-p-2 .verse, .hoda-paragraph-p-3 .verse, .hoda-title-p-1 .verse, .hoda-title-p-2 .verse, .hoda-title-p-3 .verse {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.hoda-paragraph-footnote .hoda-title-ayah, .hoda-paragraph-footnote .verse{
    /* color: inherit; */
    /* font-family: inherit; */
    font-size: inherit;
    line-height: inherit;
}

.hoda-title-main .hoda-title-ayah, .hoda-title-main .verse{
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

/*.hoda-title-ayah{
	color: #CC0033;
	font-family: "hafs20";
	font-size: 1.35rem;
	line-height: 1.75;
}*/

/* Ayah Number */
@font-face {
 font-family: "ayahNumber";
 /* src: url("font/uthmanic_hafs_v20.ttf") format("truetype"); */
 src: url("font/KFGQPCHAFSUthmanicScript-Regular.woff2") format("woff2");
}

n {
    font-family: "ayahNumber";
    line-height: 0;
    font-size: 1.75rem;
    padding: 0 0.125rem;
}

.hoda-title-question, .hoda-paragraph-question, .hoda-title-answer, .hoda-paragraph-answer{
	color: #800000;
}

.hoda-title-p-1, .hoda-paragraph-p-1{
	color: #800000;
}

.hoda-title-p-2, .hoda-paragraph-p-2{
	color: #000099;
}

.hoda-title-p-3, .hoda-paragraph-p-3{
	color: #006500;
}

.hoda-footnote, .hoda-paragraph-footnote {
    font-size: 0.9rem;
    /* display: inline-block; */
    font-weight: 400;
    text-indent: -1.0rem;
    padding-right: 1.0rem;
		cursor: pointer;
}

sup {
    /* color: hsl(0 100% 22% / 1); */
		color: hsl(240deg 100% 30%);
    cursor: pointer;
}

:nth-child(n+10 of .hoda-paragraph-footnote) {
    text-indent: -1.6rem;
    padding-right: 1.6rem;
}

@keyframes highlight {
    0% {
        background: #ffed93;
        box-shadow: #ffed93 0 0 1px 2px;
    }
    100% {
        background: none;
        box-shadow: #ffed9300 0 0 1px 2px;
    }
}

.fn-highlight {
    animation: highlight 2.5s cubic-bezier(0.57, 0.01, 0.45, 1.01);
    border-radius: 0.3rem;
    background: #ffed93;
    box-shadow: #ffed93 0 0 1px 2px;
}

.hoda-shi3or {
	color: #d25700;
    text-align: center;
    font-weight: 100;
		margin-bottom: 1rem;
}

.hoda-shi3or ~ .hoda-shi3or {
    margin-top: -0.75rem !important;
}

.hoda-shi3or-table {
    border: 0 #fff;
    color: #d25700;
    /* text-align: justify; */
    font-weight: 100;
    margin-left: auto;
    margin-right: auto;
}

.hoda-english {
    font-size: 1.05rem;
}

.hoda-english:before {
    content: "("
}

.hoda-english:after {
    content: ")"
}

table.hoda-shi3or-table td{
    padding: 15px;
    text-align: justify;
    text-align-last: justify;
    border: none;
}

table.hoda-shi3or-table tr td p{
    text-align: justify;
    text-align-last: justify;
}

/*
table.hoda-shi3or-table tr td:first-child{

    text-align: right;
}

table.hoda-shi3or-table  tr td:last-child{
    text-align: left;
}


table.hoda-shi3or-table tr td:first-child p{
    text-align: right;
}

table.hoda-shi3or-table  tr td:last-child p{
    text-align: left;
}
*/

.article ol {
    list-style: none;
    counter-reset: my-list-counter;
    padding-right: 3rem;
}

.article ol li {
    counter-increment: my-list-counter;
    margin-bottom: 1rem;
}

.article ol li:first-of-type {
    margin-top: 0rem;
}

.article ol li::before {
    content: counter(my-list-counter) "- ";
    position: absolute;
    right: 3rem;
}

@media only screen and (max-width: 500px) {
    table.hoda-shi3or-table tr td{
      padding: 7px;
    }

    table.hoda-shi3or-table tr{
      display: grid;
      align-items: center;
      margin-bottom: 30px;
    }
}



/* Article Index */

.article-index {
    position: sticky;
    top: 15px;
    z-index: 1;
    width: 100%;
    transition: 1s all ease-in-out;
    /* cursor: pointer; */
    max-height: calc(100vh - 30px);
    overflow-y: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.article.article-mobile {
    min-height: 50px;
    margin-bottom: 1rem;
}

/* Targets touch devices (Mobiles, Tablets) */
@media (pointer: coarse) {
    .article-desktop > .hoda-title-main{
        display: none;
    }
    .article.article-mobile > .hoda-title-main {
        margin: auto !important;
    }
}

@media (pointer: fine) and (hover: hover) {
     .article-mobile {
        display: none !important;
    }

    .article-index:hover {
        width: 119%;
        padding-bottom: 0.025rem !important;
        margin-right: -3rem;
    }
}
















[id^="title_"]{
  scroll-margin-top: 80px; /* Adjust this to match your navbar's height */
}

.bookmarks-title {
    color: hsl(0 0% 20% / 1);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 1rem;
    display: block;
    cursor: default;
}

/* .btn-icon {
    width: 25px;
    height: 25px;
    position: absolute;
    left: 14px;
    top: 14px;
} */

.btn-icon {
    width: 25px;
    height: 25px;
    position: absolute;
    left: 16px;
    top: 16px;
    color: #a17c31;
    color: hsl(36 47% 30% / 0.65);
    /* background: #fbf3e3; */
    background: hsl(40deg 80% 88% / 50%);
    /* background: none; */
    border: 1px solid #d8bc929e;
    border: none;
    border-radius: 6px;
    /* filter: grayscale(1); */
    /* opacity: 0.9; */
    display: flex;
    padding: 1px;
    cursor: pointer;
}

.title-main-bookmark {
    color: hsl(36 47% 30% / 1);
    font-size: 0.8rem;
    /* font-family: sans-serif; */
    font-weight: 400;
    /* margin-top: 1rem; */
    background-color: hsl(40deg 80% 88% / 50%);
    border-radius: 0.3rem;
    padding: 5px 9px 4px 5px;
    line-height: 1.2;
    cursor: pointer;
}

.article-index h1 {
    color: #800000;
    font-size: 0.75rem;
    /* font-family: sans-serif; */
    font-weight: 500;
    cursor: pointer;
    padding: 5px 9px 4px 5px;
    line-height: 1.2;
}

.article-index h2 {
    color: #800000;
    font-size: 0.75rem;
    /* font-family: sans-serif; */
    font-weight: 400;
    /* margin-top: 1rem; */
    background-color: hsl(0deg 80% 96% / 70%);
    border-radius: 0.3rem;
    padding: 5px 9px 4px 5px;
    line-height: 1.2;
    cursor: pointer;
    margin-bottom: 5px;
}

.article-index h3 {
    color: #000099;
    font-size: 0.75rem;
    /* font-family: sans-serif; */
    font-weight: 400;
    margin-right: 0.75rem;
    /* margin-top: 1rem; */
    background-color: hsl(240deg 80% 96% / 70%);
    border-radius: 0.3rem;
    padding: 5px 9px 4px 5px;
    line-height: 1.2;
    cursor: pointer;
}

.article-index h4 {
    color: #006500;
    font-size: 0.75rem;
    /* font-family: sans-serif; */
    font-weight: 400;
    margin-right: 1.5rem;
    /* background-color: hsl(138.89deg 80% 96% / 70%); */
    background-color: hsl(144.43deg 40.18% 68.33% / 14%);
    border-radius: 0.3rem;
    padding: 5px 9px 4px 5px;
    cursor: pointer;
}

.article-index h1, .article-index h2, .article-index h3, .article-index h4 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* resize: horizontal; */
}