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

p {
	margin: 0.2rem 0.25rem 0;
}

.spacer {
  display: block;
  margin-top: 0.5rem;
}

.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);
}

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

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

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

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

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

.hoda-title-ayah{
	color: #CC0033;
}

.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: 500;
		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: 500;
    margin-left: auto;
    margin-right: auto;
}

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