html { scroll-padding-top: 44px; }

#welcome:after {content:"...";}
.gh-article-excerpt {
    color: var(--color-primary-text) !important
}

.signup-prompt {
    margin-top:2ex;
    margin-bottom: 4ex;
}
.signup-prompt h3 {
    text-align:center;
    color: blue;
}

#artnav { text-align: center; }

hr { border: 4px; background-color: black;}

span[lang='ar'] {
    display: inline-block;
    font-family: "Scheherazade New";
    font-feature-settings: "liga" 1;
    direction: rtl !important;
}

main {
    display: block;
    /* margin-top:30px; */
    border-bottom: solid;
}

/* nav.sibcrumbs { */
/*     top: 0; */
/*     width: 100%; */
/*     margin: 0; */
/*     padding: 0; */
/*     overflow: hidden; */
/*     position: sticky !important; */
/*     display: block; */
/*     background-color: white; */
/*     border-bottom: 1px solid black; */
/* } */

.sibheader {
    position:sticky ! important;
    top:0;
    z-index: 2 !important;
    background-color:blue;
}

.sibcrumbs {
    /* display: flex; */
    grid-column-start:3;
    grid-column-end:span 8;
    /* float:left; */
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    flex-wrap:wrap;
    top: 0;
    width: 100%;
    margin: 0;
    padding-top:   12px;
    padding-left:  8px;
    padding-right: 8px;
    overflow: scroll;
    scroll-padding-bottom:auto;
    clear:both;
    position: sticky !important;
    background-color: white;
    border-bottom: 1px solid black;
    /* display:inline-block !important; */
/* } */

/* .sibcrumbs ol { */
    margin-block-start:0 !important;
    margin-block-end:0 !important;
    z-index: 1 !important;
    list-style-type: none;
}

.clear {clear:both;}

.sibcrumbs nav {
    position:relative;
    display:inline-block;
    white-space:nowrap;
}

li.sibcrumb {
    display: inline;
    margin-top:0;
}
li.sibcrumb a {
    text-decoration:none;
    color:blue;
}
li.sibcrumb::before {
  /* display: inline-block; */
  color: #000;
  content: '>';
  font-size: 80%;
  font-weight: bold;
  padding: 0 3px;
}

li.sibcrumb:first-child::before {
  content: '' !important;
  /* display: inline-block; */
  color: #000;
  /* font-size: 80%; */
  /* font-weight: bold; */
  padding: 0;
}

#artleader {
    direction:rtl;
    color: blue;
    /* display:inline-block; */
    /* align-items:flex-end; */
    /* justify-content:right; */
    /* float:right; */
    /* position:absolute; */
    /* right:0; */
    /* top:0; */
    position:relative;
    margin-left:auto;
    /* margin:0 !important; */
    padding-left:8px;
    whitespace: nowrap;
    inline-size: max-content;
    width: max-content;
    /* text-decoration: underline dotted blue; */
}
/* #artid{display:inline-block!important;} */
/* #artleader span{ */
/*     display:inline-block !important; */
/* } */
#artleader .leader {
    font-family: "Scheherazade New";
    font-feature-settings: "liga" 1;
    direction:rtl;
    font-size: 120%;
    /* display:inline-block !important; */
    /* display:flex; */
    /* align-self:center; */
    /* justify-content:center; */
    /* whitespace: nowrap; */
    /* inline-size: max-content; */
    /* text-align:left; */
    overflow: hidden;
    width: max-content;
}
#bababout a {color:blue;    text-decoration:none;}

#bababout-popup:target{visibility:visible;display:block;}
#bababout-popup {
    position: fixed;
    visibility: hidden;
    display:none;
    top:5;
    right:25%;
    width: 50%;
    height: 50%;
    z-index: 100;
    background-color: white;
    box-shadow: 5px 5px 2px #aaa;
    border: 1px solid grey;
    padding: 8px;
}
.close {
    position: absolute;
    top:-10px;
    right:-10px;
    width: 23px;
    height: 23px;
    border: 2px solid #eef5df;
    background-color: black;
    border-radius: 50%;
}
.close::before, .close::after {
    display: block;
    position: absolute;
    top: 8px;
    left: 3px;
    width: 13px;
    height: 3px;
    content: "";
    background-color: #eef5df;
}
.close::before {
	-ms-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	}
.close::after {
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	}
@media (hover: hover) {
    .close:hover { cursor: pointer; }
    .close:hover::before, .close:hover::after { display: block; }
}
@media (hover: none) {
}

/* If we want clicking on the popup to close, use this */

/* https://davesource.com/Solutions/20150324.CSS-Only-Click-to-Popup-Div/ */
#babmeta {
    /* float:right; */
    /* position:absolute; */
    /* right:0; */
    /* top:0; */
    position:relative;
    margin:0 !important;
    /* float: right; */
    display:inline-block;
    padding-left:8px;
    /* text-decoration: underline dotted blue; */
}
#babmeta a {color:blue;    text-decoration:none;}
/* When clicking outer div, make inner div visible */
@media (hover: hover) {
    #babmeta:hover .overlay { visibility: visible;    display:block; }
    /* And hold by staying visible on hover */
    .overlay:hover {
        visibility: visible;
        display:block;
    }
}
@media (hover: none) {
}

/* General settings for popup */
.overlay {
    position: fixed;
    visibility: hidden;
    display:none;
    /* top: -5 !important; */
    /* right:100%; */
    top:25;
    right:30%;
    width: 50%;
    height: 50%;
    z-index: 100;
    background-color: white;
    box-shadow: 5px 5px 2px #aaa;
    border: 1px solid grey;
    padding: 8px;
}
/* If we want clicking on the popup to close, use this */
.overlay:active {
    visibility: hidden;	/* Doesn't work because DCEvent is :active as well */
    height: 0px;
    width: 0px;
    left: -1000px;
    top: -1000px;
}

/* About Popup */
/* Status, Pagination */
span.plain {margin-left:2em;font-weight:100;font-size:70%;}

.statline, .startpg {
    margin-inline-start:1em;
    margin-inline-end:1em;
    display: grid;
    grid-template-columns: auto max-content;
    grid-template-areas: "edition pgnbr";
    align-items: end;
    gap: 0 .25rem; /* customize the gap to your needs */
}
.statline{direction:ltr;}
.startpg {direction:rtl;}

.statclass, .edition{
    /* float:right; */
    grid-area: edition;
    position: relative;
    overflow: hidden;
}
.statclass{text-align:left;}
.edition{text-align:right;}


.statclass::after, .edition::after {
    position:absolute;
    content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
             ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";
  padding-left: 1.25ch;
  padding-right: 1.25ch;
}
.statclass::after {direction:ltr;}
.edition::after {direction:rtl;}

.status, .pgnbr{
    /* float:right; */
    grid-area:pgnbr;
}

/* .overlay { */
/*   position: absolute; */
/*   /\* display:none; *\/ */
/*   visibility: hidden; */
/*   width:100%; */
/*   top: 0; */
/*   bottom: 0; */
/*   left: 0; */
/*   right: 0; */
/*   transition: opacity 500ms; */
/*   opacity: 0; */
/* } */

/* .overlay:target { */
/*     /\* display:block; *\/ */
/*     visibility: visible; */
/*     opacity: 1; */
/* } */
/* .overlay:focus{ */
/*     visibility:hidden; */
/* } */
/* .popup { */
/*     position: relative; */
/*     /\* top:0; *\/ */
/*   /\* margin: 70px auto; *\/ */
/*     /\* padding: 20px; *\/ */
/*     border:solid; */
/*     background: white; */
/*   /\* background: rgba(0, 0, 0, 0.1); *\/ */
/*   border-radius: 5px; */
/*   /\* width: 80%; *\/ */
/*   transition: all 5s ease-in-out; */
/* } */

/* .popup h2 { */
/*   margin-top: 0; */
/*   color: #333; */
/*   font-family: Tahoma, Arial, sans-serif; */
/* } */
/* .popup .close { */
/*   position: absolute; */
/*   top: 20px; */
/*   right: 30px; */
/*   transition: all 200ms; */
/*   font-size: 30px; */
/*   font-weight: bold; */
/*   text-decoration: none; */
/*   color: #333; */
/* } */
/* .popup .close:hover { */
/*   color: #06D85F; */
/* } */
/* .popup .babmeta-content { */
/*     /\* z-index:1; *\/ */
/*   /\* max-height: 30%; *\/ */
/*   overflow: auto; */
/* } */
/* @media screen and (max-width: 700px){ */
/*   /\* #babmeta{ *\/ */
/*   /\*   width: 70%; *\/ */
/*   /\* } *\/ */
/*   .popup{ */
/*     width: 70%; */
/*   } */
/* } */

a.prevpg, a.nextpg {
    text-decoration:none;
    display:inline!important;
    border-radius:50%;
    padding: 8px 16px;
    line-height:100%;
    background-color: #f1f1f1;
    color: black;
}
@media (hover: hover) {
    a.prevpg:hover, a.nextpg:hover {
        background-color: #ddd;
        color: black;
    }
}
@media (hover: none) {
}

a.prevpg {float:right;}
a.nextpg {float:left;}
/* div.thispg { */
/*     /\* float:left; *\/ */
/*     display:inline!important;} */
h1.article-title-ar {
    grid-column-start:3;
    grid-column-end:span 8;
    display:block;
    font-family: "Scheherazade New";
    font-feature-settings: "liga" 1;
    font-size: 170%;
    line-height: 190%;
    /* margin-top: 25px; */
    /* margin-bottom: 0; */
    text-align: center;
    direction: rtl;
    /* background-color: lightblue; */
}

/* archive page */
main h1 { text-align: center; }
footer.gh-card-meta {
    text-indent: 1rem;
    margin-top:  0;
}
.pagination { margin-top: 1rem; }
.pagination a.newer-posts { margin-right: 1em; text-align:right;}
.pagination a.older-posts { margin-left: 1em; text-align:left;}
section.archive-main {
    grid-column-start:3;
    grid-column-end:span 8;
}
article.post { padding: 1ex!important; }

.sib-article {
    grid-column-start:3;
    grid-column-end:span 8;
}

#segtable {margin-top:0;}

p {
    text-indent: 1em;
    font-family: "Spectral";
}

p[dir="ltr"] {
}


div.centered
{
    text-align: center;
}

.centered
{
    margin: 0 auto;
}

table.bab {
    display:table;
    scroll-padding-top:500px;
    overflow-x:visible!important;
    table-layout: fixed;
    width: 100%!important;
    white-space: normal !important;
    border-color: white !important;
}
col.ar { width: 40%; }
col.en { width: 40%; }
col.gutter { width: 3%; white-space: nowrap; }
/* col.segidcol { */
/*     padding: 0px !important; */
/*     margin: 0px !important; */
/*     width: 15%; */
/*     white-space: nowrap; */
/* } */

span.inclusion[lang='en']:before {
    content: "«";
}
span.inclusion[lang='en']:after {
    content: "»";
}

span.ital, span.xlit{font-style: italic;}
span.artnbr {margin-left: 14px;}

span.unused.مثال:before {
    content: "*";
}
span.mithal {
    font-family: "Markazi Text";
    font-size: 110%;
    font-weight:700;
    color: DarkMagenta ! important;
}
/* span.proto { */
/*     /\* font-size: 110%; *\/ */
/*     font-weight:700; */
/*     color: DarkMagenta ! important; */
/* } */

span.مصغر,
span.harf {
    display:inline-block;
    /* margin-top:4px; */
    /* margin-bottom:8px; */
    font-weight: 700;
    /* line-height: 220%; */
    /* font-style: bold; */
    color: red;
}

span.proto,
span.vproto {
    color: DarkMagenta ! important;
    /* font-style: italic; */
}
span.ism,
span.فعل,
span.noun,
span.vperf,
span.vimperf,
span.ap,
span.sifa, span.adj,
span.vn, span.masdar {
    color: DarkGreen ! important;
    /* font-style: italic; */
}
span.term,
.subharf {
    color: red;
}

span.arinlineqawl {
    color: blue;
}

span.qawl {
    font-family: "Markazi Text";
    font-size: 120%;
    /* font-family: "Noto Sans Arabic"; */
    color:blue;
    direction:rtl;
    text-align:right;
    word-break: break-word;
}
span.qawl > a {
    color: blue !important;
    text-decoration: none;
}

span.dictum {
    color: blue !important;
    font-style: italic;
    font-weight:400;
}

/* quote, e.g. from khalil */
span.قبس:before {
    content: "«";
}
span.قبس {
    font-family: "Markazi Text";
    font-size: 120%;
    font-weight: bold;
    /* font-family: "Noto Sans Arabic"; */
    /* color:magenta; */
}
span.قبس span.صفة{
    font-weight: bold;
    color: red;
}
span.قبس:after {
    content: "»";
}

span.vproto { /* فعل proto */
    font-style: italic;
}

span.حرفة,
span.اسم,
span.فعل,
span.فاعل,
span.مصدر,
span.صفة,
span.ندبة,
span.نداء {color: red;}
span.تحقير, span.dim {
    color: Magenta; font-weight:800;}
span.نسبة {color: Magenta; font-weight:800;}
span.حلف {color: Magenta; font-weight:800;}

/* phonology */
.seg > td > span.إمالة {
    color: OrangeRed;
}
span.إمالة {
    font-style: italic;
    font-weight: bold;
}

/* تقدير editorial interpolation, inline */
span.تقدير:before,
span.interp:before,
span.copula:before { content: "["; }
span.تقدير:after,
span.interp:after,
span.copula:after { content: "]"; }
span.تقدير,
span.interp,
span.copula {
    color: gray;
    /* margin-inline: 4px; */
}
/* span.dictum span.interp, */
span.ilggloss span.interp {
    color: gray;
    margin-inline: 0px !important;
}
span.gen-of {
    color: gray;
}

span.harf span.infl {
    color: blue !important;
}
span.infl {
    color: red !important;
}
span.influn {
    color: blue !important;
}
span.influn:after {
    content: "un";
    font-size: 50%;
    vertical-align: top;
    color: red;
}

td {
  border-color: white !important;
  vertical-align: top;
    /* border: 1px solid; */
}

tr.bridgehead td{
    text-align:center!important;
    font-weight: 500;
    font-size: 150% !important;
    margin-top:24pt;
}
td[lang='ar'] {
    font-size: 120% !important;
    line-height: 180%;
    font-family: "Scheherazade New";
    font-feature-settings: "liga" 1;
    /* font-family: "Noto Naskh Arabic"; */
    direction: rtl;
    text-align: start;
    padding-top: 0px !important;;
    padding-bottom: 0px !important;;
    padding-left: 0px !important;;
    padding-right: 0px !important;;
    /* background-color: lightblue; */
}
td.gutter {
    display:block;
    /* width: 18px; */
    /* margin-left: 12px !important;; */
    /* margin-right: 12px !important;; */
    border-width: 0px !important;
    position:relative;
    /* background-color: lightgreen; */
    font-size: 70%;
    font-weight:300;
    padding: 0px !important;
    /* padding-top: 0px !important; */
    /* padding-bottom: 0px !important; */
    text-align: center;
    vertical-align:top;
    /* z-index:-1; */
}

@media (hover: hover) {
    td.gutter:hover .segid{
        visibility: visible;
        display:block;
        /* overflow:visible; */
        /* opacity: 1; */
    }
}
@media (hover: none) {
}

td.gutter .segid {
    display:none;
    visibility: hidden;
    z-index: 1;
    position: absolute;
    top:-40px;
    right:-40%;
    width: 100px;
    font-size: 200%;
    /* color: white; */
    background-color: lightblue;
    border-radius: 10px;
    /* padding: 5px 10px 5px 10px; */
}
/*     display:none; */
/*     overflow:auto; */
/*   visibility: hidden; */
/*   width: 240px; */
/*   background-color:  lightblue; */
/*   color: black; */
/*   text-align: left; */
/*   padding: 8px; */
/*   border-radius: 15px; */
/*   border-color: black; */
/*   margin: 12px; */

/*   /\* Position the tooltip text *\/ */
/*   position: absolute; */
/*   z-index: 1; */
/*   bottom: 100%; */
/*   left: 120%; */
/*   margin-left: -120px; */

/*   /\* Fade in tooltip *\/ */
/*   opacity: 0; */
/*   transition: opacity 0.3s; */
/* } */

td[lang='en'] {
    display:hidden !important;
    padding-top: 0px !important;;
    padding-bottom: 0px !important;;
    padding-left: 0px !important;;
    padding-right: 0px !important;;
    font-size: 100% !important;
    direction: ltr;
    text-align: left;
    /* background-color: lightyellow; */
}

span.seg-nbr {
    font-size: 26px !important;
    padding-left: 10px;
    padding-right: 10px;
}

span.xinterp {                   /* editorial interpolation in xlit */
    padding-left: 6pt;
    padding-right: 6pt;
}
/* span.interp {                   /\* editorial interpolation in gloss *\/ */
/*     font-style: italic; */
/*     background-color: #e4dddd88; */
/*     padding-left: 1pt; */
/*     padding-right: 4pt; */
/* } */

span.implicit {
    font-style: italic;
    background-color: #e4dddd;
    padding-left: 1pt;
    padding-right: 4pt;
}

td.gutter.comment {
    background-color: lightblue;
}
td.gutter.comment span.fn {
    font-size: 150%;
}
span.fn {
    position: relative;
    /* display: inline-block; */
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
    white-space: normal;
    overflow:visible;
}
/* Tooltip arrow */
/* span.fn .fntext::after { */
/*   content: ""; */
/*   position: absolute; */
/*   top: 100%; */
/*   left: 50%; */
/*   margin-left: -5px; */
/*   border-width: 5px; */
/*   border-style: solid; */
/*   border-color: lightblue transparent transparent transparent; */
/* } */
/* Show the tooltip text when you mouse over the tooltip container */

@media (hover: hover) {
    span.fn:hover div.fntext {
        overflow:visible;
        visibility: visible;
        opacity: 1;
    }
}
span.fn div.fntext {
    display: block;
    overflow:auto;
    visibility: hidden;
    background-color:  lightblue;
    color: black;
    text-align: left;
    padding: 8px;
    border-radius: 15px;
    border-color: black;
    margin: 12px;

    /* white-space:nowrap; */

    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    /* width:100%; */
    /* top:0; */
    /* left:0; */
    /* right:100%; */
    /* bottom: 100%; */
    /* left: 120%; */
    /* margin-left: -120px; */

    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

li.ilgitem {
    font-size: 100%;
    font-weight: 300;
}
/* li.ilgitem:before { */
.ilgpreamble:before, .ilgpoet:before {
    display: inline-block;
    font-size: 80%;
    margin-inline-end: 10px;
    content: counter(item);
    background: lightblue;
    border-radius: 100%;
    color: black;
    width: 2em;
    text-align: center;
    /* vertical-align: 5px; */
}
@media (hover: hover) {
    .ilgpreamble:hover:before {
    }
}

div.ilgpreamble {
    direction:rtl;
    /* display: inline; */
    text-align:start;
    width:100%;
}
div.ilgpreamble > span.ilgdictum > a {
    /* font-family: "Noto Naskh Arabic"; */
    font-family: "Scheherazade New";
    font-feature-settings: "liga" 1;
    /* font-family: "Markazi Text"; */
    font-size: 150%;
    text-decoration: none;
    color: blue;
}
div.ilgpreamble > span.ilgquran > a {
    /* font-family: "Noto Naskh Arabic"; */
    font-family: "Scheherazade New";
    font-feature-settings: "liga" 1;
    /* font-family: "Markazi Text"; */
    font-size: 100%;
    text-decoration: none;
    color: blue;
}

div.ilgdetail {
    font-family: "Noto Naskh Arabic";
    /* font-family: "Markazi Text"; */
    /* font-family: sans-serif; */
    /* margin-left: 40px; */
    /* font-size: 150%; */
    /* display: flex; */
}
div.ilgterm {
    display: inline-block;
    padding-right: 12px;
}
div.ilgterm > span {
    display: block;
}
div.ilgterm > span.ilggloss {
    font-style: italic;
}
.ilgfree::before {
    content: "﴾";               /* ltr */
    font-family: "Scheherazade New";
    font-feature-settings: "liga" 1;
}
div.ilgfree {
    direction:ltr;
    margin-left: 40px;
    display: block;
    /* font-size: 150%; */
    padding-top: 10px;
}
.ilgfree::after {
    content: "﴿";               /* ltr */
    font-family: "Scheherazade New";
    font-feature-settings: "liga" 1;
}

div.ilgsidecomment {
    margin-left: 40px;
    display: block;
    padding-top: 10px;
}

.s1 {
    position:relative;
    width: 100%;
    /* margin:0 auto; */
    margin-top:1ex !important;
    padding: 0 ;
}

section#commentary > div {
    margin-top: 10px;
}
section#commentary > section {
    margin-top: 10px;
}
section#commentary > section > div {
    margin-top: 10px;
}

/* in ILG sections */
ilg.ol {
    list-style: none;
    /* list-style-type: decimal; */
    counter-reset: item;
    display: block;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 10px;
}

li.ilgitem:target {
    /* padding-top: 80px; */
}

li.ilgitem {
    counter-increment: item;
    margin-bottom: 5px;
    display: block;
    padding-bottom: 30px;
    margin: 10px;
}

.verses{background-color:  #e4dddd;}
.verse {padding-bottom:1ex;}

.hemistiche a,
.ilghemistiche a {
    text-decoration: none !important;
    color:  blue !important;
    font-family: "Scheherazade New";
    font-feature-settings: "liga" 1;
}
.ilghemistiche a {
    font-size: 150%!important;
}
.hemistiche[lang='ar'] {
    text-align:start;
}

.hemistiche .ثبات {
    color: red;
}

.hemistiche.en {
        background-color:  #e4dddd;
        font-style: italic;
}
.hemistiche[lang='ar']:nth-child(1) {
    margin-inline-start:1em;
}
.hemistiche[lang='ar']:nth-child(2) {
    margin-inline-start:2em;
}
.hemistiche.en:nth-child(1) {
    padding-left: 12px;
    padding-bottom: 8px;
    background-color:  #e4dddd;
}
.hemistiche.en:nth-child(2) {
    padding-left: 24px;
}

/* POETRY interlinear gloss section */
.ilgpoet {
    font-size:100%;
    /* display: inline; */
    text-align:start;
    width:100%;
}
/* .ilgpoem { */
/*     font-size:150%; */
/* } */

.ilghemistiche {
    text-align:start;
}
.ilghemistiche:nth-child(1) .text {
    margin-inline-start:1em;
}
.ilghemistiche:nth-child(2) .text {
    margin-inline-start:4em;
}

.ilgft{display:flex;}
.ilgftverse{display:inline-blocik;}
.ilgfthemi:nth-child(1) {margin-inline-start:1em;}
.ilgfthemi:nth-child(2) {margin-inline-start:3em;}

/* QURAN  */
.ayah::before { content: "﴿"; }
.ayah, .ayah a {
    direction:rtl;
    text-align:start;
    font-family: "Scheherazade New";
    font-feature-settings: "liga" 1;
    color: green;
}
.ayah::after { content: "﴾"; }

.ayahref {color:blue;}

.qverse::before {
    content: "﴾";
    font-family: "Scheherazade New";
    font-feature-settings: "liga" 1;
}
.qverse, .qverse a {
    direction:ltr;
    text-align:start;
    color: green;
}
.qverse::after {
    content: "﴿";
    font-family: "Scheherazade New";
    font-feature-settings: "liga" 1;
}

.eoayah:before{content: "۝";}    /* U+06DD END OF AYAH */

.ilgayah::before {
    content: "﴿";
    font-family: "Scheherazade New";
    font-feature-settings: "liga" 1;
}
.ilgayah {
    display:block;
    padding-top:8px;
    width:100%;
    text-align:start;
    color: green;
}
.ilgayah a {
    direction:rtl;
    /* font-family: "Noto Naskh Arabic"; */
    font-family: "Scheherazade New";
    font-feature-settings: "liga" 1;
    color: green;
}
/* .ilgpreamble .ilgayah, */
.ilgpreamble .ilgayah a {
    font-size:150%;
}
.ilgayah::after {
    content: "﴾";
    font-family: "Scheherazade New";
    font-feature-settings: "liga" 1;
}

/* ****  index.hbs ******* */
.toctitle {
    display: flex;
    justify-content:center; align-items: center;
}

.bab-nbr{
    display:inline-block;grid-column:unset;
    margin-top:0;
}

/* @media only screen and (max-width: 375px) { */

@media only screen  {
    .toc-short {
        /* background-color:lightblue; */
        grid-template-columns: repeat(15, 1fr);
        grid-column-start: 3;
        grid-column-end: 11;
    }
}

@media only screen and (min-width: 320px) and (max-width: 480px) {
    col.ar { width: 90%; }
    col.en { width: 40%; display:none; }
    td[lang='en'] { width: 40%; display:none; }

    .toc-short {
        background-color:lightgreen;
        grid-template-columns: repeat(6, 1fr);
        grid-column-start: 2;
        grid-column-end: 12;
        /* grid-row-gap: 100px; */
    }
}

/* iPad Mini 768 x 1024
   iPad Air  820 x 1180
   iPad Pro 1024 x 1366
   Pixel 7  412 x 915
   Surface Pro 7 912 x 1368
   Surface Duo   540 x 720
*/

@media only screen and (min-width: 768px) and (max-width: 800px) {
    col.ar { width: 90%; }
    col.en { width: 40%; display:none; }
    td[lang='en'] { width: 40%; display:none; }

    .toc-short {
        /* background-color:lightgreen; */
        grid-template-columns: repeat(6, 1fr);
        grid-column-start: 2;
        grid-column-end: 12;
        /* grid-row-gap: 100px; */
    }
}

.toc-short {
    display:grid;
    /* padding-top:10px; */
    /* padding-bottom:10px; */
    direction: rtl;
}

.toc-short a {
    /* width: 2.5em; */
    display:inline-block;
    /* background-color: lightgreen; */
    /* padding-left: 20px; */
    text-decoration: none !important;
    color:  blue;
}

#toc-morph { text-align:center; }

#toc-long {
    padding-top:10px;
    padding-bottom:10px;
    display:block;
    direction: rtl;
}

.toc-entry {
    display:block;
    font-family: "Scheherazade New";
    font-feature-settings: "liga" 1;
    font-size: 150%;
    padding-bottom: 12px;
}

span.حرف { /* toc */
    color: red;
}

/* .toc-entry a span.babid.segs { */
span.segs {
    text-decoration:underline;
    text-decoration-skip-ink:none;
}
.toc-entry a {text-decoration:none;color:black!important;}
.toc-entry.blue a, h1.blue {color:blue!important;}
/* .toc-entry:hover::after, */
/* .toc-entry:focus::after { */
/*     visibility:visible; */
/*     display:inline; */
/* } */
/* .toc-entry::after { */
/*     content: attr(derenbourg) " " attr(يعقوب); */
/*     visibility:hidden; */
/*     display:none; */
/*     /\* border: 1px solid #fc0; *\/ */
/*     /\* padding: 3px 6px; *\/ */
/*     /\* background: #fffea1; *\/ */
/*     /\* position: absolute; *\/ */
/*     /\* right: -40px; *\/ */
/*     /\* top: -26px; *\/ */
/*     /\* overflow:visible; *\/ */
/*     /\* visibility: visible; *\/ */
/*     /\* opacity: 1; *\/ */
/* } */

section h2 {
    text-align: center;
}