.ibm-plex-sans-arabic-thin {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.ibm-plex-sans-arabic-extralight {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.ibm-plex-sans-arabic-light {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.ibm-plex-sans-arabic-regular {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ibm-plex-sans-arabic-medium {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.ibm-plex-sans-arabic-semibold {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.ibm-plex-sans-arabic-bold {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.markazi-text-sibawayhi> {
  font-family: "Markazi Text", serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

.scheherazade-new-regular {
  font-family: "Scheherazade New", serif;
  font-weight: 400;
  font-style: normal;
}

.scheherazade-new-medium {
  font-family: "Scheherazade New", serif;
  font-weight: 500;
  font-style: normal;
}

.scheherazade-new-semibold {
  font-family: "Scheherazade New", serif;
  font-weight: 600;
  font-style: normal;
}

.scheherazade-new-bold {
  font-family: "Scheherazade New", serif;
  font-weight: 700;
  font-style: normal;
}

.lateef-extralight {
  font-family: "Lateef", serif;
  font-weight: 200;
  font-style: normal;
}

.lateef-light {
  font-family: "Lateef", serif;
  font-weight: 300;
  font-style: normal;
}

.lateef-regular {
  font-family: "Lateef", serif;
  font-weight: 400;
  font-style: normal;
}

.lateef-medium {
  font-family: "Lateef", serif;
  font-weight: 500;
  font-style: normal;
}

.lateef-semibold {
  font-family: "Lateef", serif;
  font-weight: 600;
  font-style: normal;
}

.lateef-bold {
  font-family: "Lateef", serif;
  font-weight: 700;
  font-style: normal;
}

.lateef-extrabold {
  font-family: "Lateef", serif;
  font-weight: 800;
  font-style: normal;
}

.rubik-sibawayhi {
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

.noto-naskh-arabic-sibawayhi {
  font-family: "Noto Naskh Arabic", serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

.noto-sans-arabic-sibawayhi {
  font-family: "Noto Sans Arabic", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

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

span[lang='ar'] {
    /* font-family: "Noto Naskh Arabic"; */
    direction: rtl !important;
}

.lexsrc { font-weight:bold; }

h4.lextitle {
    display: flex;
    justify-content:center; align-items: center;
}
h4.lextitle span[lang='ar'] {padding-left: 12px; font-size:150%;}

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

nav.sibcrumbs ol {
  list-style-type: none;
  padding-top: 0;
  margin-top: 0;
  padding-left: 0;
}

li.sibcrumb {
  display: inline-block;
}
li.sibcrumb a {
  color: blue;
}

li.sibcrumb a::after {
  display: inline-block;
  z-index: 1;
  color: #000;
  content: '>';
  font-size: 80%;
  font-weight: bold;
  padding: 0 3px;
}

li.sibcrumb:last-child a::after {
  content: '' !important;
  display: inline-block;
  color: #000;
  font-size: 80%;
  font-weight: bold;
  padding: 0 3px;
}

h1 {
    font-size: 200%;
    line-height: 200%;
    margin-top: 25px;
    margin-bottom: 25px;
    text-align: center;
    /* background-color: lightblue; */
}
h1 span[lang='ar'] {
    font-family: "Scheherazade New";
    font-size: 150%;
}

div.centered
{
    text-align: center;
}

.centered
{
    margin: 0 auto;
}

table.bab { width: 100%; white-space: normal !important; border-color: white !important; }       /* table-layout: fixed;*/
col.ar { width: 45%; }
col.en { width: 45%; }
col.gutter { width: 3%; white-space: nowrap; }
col.segidcol {
    padding: 0px !important;
    margin: 0px !important;
    width: 10%;
    white-space: nowrap;
}

span.ital{font-style: italic;}
span.artnbr {margin-left: 14px;}
span.حرف {
    color: red;
    font-weight: 500;
    margin-left: 4px;
    margin-right: 4px;
}
span.harf {
    color: red;
    /* font-style: italic; */
}

/* span.qawl { */
/*     font-family: "Noto Sans Arabic"; */
/* } */
/* span.qawl > a { */
/*     color: blue !important; */
/*     text-decoration: none; */
/* } */
/* span.dictum { */
/*     color: blue !important; */
/*     font-style: italic; */
/* } */
span.infl {
    color: red !important;
}
span.influn {
    color: blue !important;
}
span.influn:after {
    content: "un";
    font-size: 50%;
    vertical-align: top;
    color: red;
}

.lexremarks {
    text-align: left;
}

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

td[lang='ar'] {
    font-size: 120% !important;
    /* font-family: "Noto Naskh Arabic"; */
    line-height: 170%;
    direction: rtl;
    text-align: right;
    padding-top: 0px !important;;
    padding-bottom: 0px !important;;
    padding-left: 0px !important;;
    padding-right: 0px !important;;
    /* background-color: lightblue; */
}
td.gutter {
    /* background-color: lightgreen; */
    font-size: 70%;
    padding: 0px !important;
    /* padding-top: 0px !important; */
    /* padding-bottom: 0px !important; */
    margin-left: 12px !important;;
    margin-right: 12px !important;;
    border-width: 0px !important;
    text-align: center;
    vertical-align:top;
}

td[lang='en'] {
    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; */
}
td.segid {                      /* draft only*/
    padding: 0px !important;
    margin: 0px !important;
    /* font-size: 50% */
    text-align: center;
}

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 */
/* span.fn:hover span.fntext { */
/*     overflow:visible; */
/*     visibility: visible; */
/*     opacity: 1; */
/* } */

/* span.fn span.fntext { */
/*     display: flex; */
/*     overflow:auto; */
/*     visibility: hidden; */
/*     /\* width: 240px; *\/ */
/*     max-height: inherit; */
/*     background-color:  lightred; */
/*     color: black; */
/*     text-align: left; */
/*     padding: 8px; */
/*     border-radius: 15px; */
/*     border-color: black; */
/*     margin: 12px; */

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

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

li.ilgitem {
    font-size: 120%;
}
div.ilgpreamble {
    display: inline;
}
div.ilgpreamble > span.ilgxx > a {
    font-family: "Noto Sans Arabic";
    text-decoration: none;
    color: blue;
}
div.ilgdetail {
    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;
}
div.ilgglft {
    margin-left: 40px;
    display: block;
    /* font-size: 150%; */
    padding-top: 10px;
}
div.ilgsidecomment {
    margin-left: 40px;
    display: block;
    padding-top: 10px;
}

.s1 {
    width: 100%;
    margin:0 auto;
  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;
}
li.ilgitem:before {
    font-size: 80%;
   margin-right: 10px;
   content: counter(item);
   background: lightblue;
   border-radius: 100%;
   color: black;
   width: 1.4em;
   text-align: center;
   vertical-align: 5px;
   display: inline-block;
 }

div.verses {
    font-family: "Scheherazade New";
    font-feature-settings: "liga" 1;
}

span.head.hemistiche {
    margin-right: 2em;
    padding-left: 2em;
}

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

.hemistiche a {
    text-decoration: none !important;
    color:  blue;
}
.hemistiche.ar {
        background-color:  #e4dddd;
}
.hemistiche.en {
        background-color:  #e4dddd;
        font-style: italic;
}
.hemistiche.ar:nth-child(1) {
    padding-right: 12px;
}
.hemistiche.ar:nth-child(2) {
    padding-right: 24px;
}
.hemistiche.en:nth-child(1) {
    padding-left: 12px;
    padding-bottom: 8px;
    background-color:  #e4dddd;
}
.hemistiche.en:nth-child(2) {
    padding-left: 24px;
}

.ayah {
    font-family: "Noto Naskh Arabic";
}

/* usage section */
.segrun {
    border-top:dotted;
    margin-top: 2ex;
    margin-left: 40px; margin-right:40px;
}
.arsegs {
    font-family: "Noto Naskh Arabic";
    /* font-family: "Rubik"; */
    /* font-family: "Lateef";  */ /* bad لا  */
    /* font-family: "Scheherazade New"; */  /* bad لا */
    /* font-family: "IBM Plex Sans Arabic"; */
    font-size:120%;
    line-height: 200%;
}
.babsegs h5 > span {
    display: inline-block;
    border-top: solid;
    padding-top: 12px;
    font-family: "Noto Sans Arabic";
    font-weight: 500;
  /* font-style: bold; */
    font-size: 120%;
    line-height: 160%;
    margin-block-start: 1em;
    margin-block-end: 1em;
}
a.babid {
    color: red;
    text-decoration: none;
}
/* .spacer { */
/*     /\* padding: 4px; *\/ */
/*     /\* visibility:hidden; *\/ */
/*     font-size:50%; */
/* } */

.arinlinefrag a {
    color: black;
    text-decoration: none;
}

.arinlinefrag {
    font-family: "Scheherazade New";
    font-feature-settings: "liga" 1;
    /* font-family: "Noto Naskh Arabic"; */
    direction:rtl;
    text-align:right;
    margin-left: 10px;
    /* background-color: lightgreen; */
}
.arinlinefrag::after {
    content: attr(segid);
    font-size:70%;
    vertical-align: top;
    position: relative;
    top: -.5em;
}
.قول {
    /* display: inline-block; */
    /* font-family: "Noto Naskh Arabic"; */
    /* font-family: "Noto Sans Arabic"; */
    font-family: "Markazi Text";
    font-size: 120%;
    color:blue;
    direction:rtl;
    text-align:right;
    word-break: break-word;
}

.ensegs {
    font-style: italic;
}

.eninlinefrag {
    overflow-wrap: break-word;
    direction:ltr;
    text-align:left;
    padding-right: 18px;
    /* background-color: lightgreen; */
}
.eninlinefrag::after {
    content: attr(segid);
    font-size:70%;
    vertical-align: top;
    padding-left: 1px;
}
.eninlineqawl {
    color:blue;
    font-style:italic;
    direction:ltr;
    text-align:left;
    word-break: break-word;
}

.lexnotes {padding-left: 20px;}
.lexnotes div {text-indent: 1em;}