@charset "utf-8";

body {
    font-family:  "Helvetica Neue", Helvetica, Arial, sans-serif;
    overflow-x:hidden;
    overflow-y:scroll ;
    margin:0;
    padding:0;
}

#myContent {
    margin: 0 auto;
	width: min(740px, 100% - 32px);
    padding:04px 0px 0px 0px;
}

/* ----------------------------------- */

.mb1{
    margin-bottom: 10px;
}

/*--- Header  ------------------------*/
#chapter-selector-block{
    margin: 0;
    padding: 0;
    position: relative;
    width: 210px;
}

#chapter-selector-overlay {
    height: 45px;    
    width: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-right: 1px solid #bbb;
    margin: 0;
    padding: 0;
}

#chapter-selector-dropdown{
    height: 45px;      
    width: inherit;
    position: absolute;
    left: 0px;
    top: 0px;    
    cursor: pointer; 
	font-family: 'Roboto Mono', consolas,  monospace;
	font-size:13px;
	padding:3px;
	line-height:35px;   /* Safari Browser Needs This */
	-webkit-appearance: menulist-button;  /* Safari Browser Needs This */
}

#edition-selector-block{
    margin: 0;
    padding: 0;
    position: relative;
    width: 126px;      /* room for the longest name on the button, "Allah Edition" (the video series have short names there) */
    border-left: 1px solid #bbb;
}

#edition-selector-block .menu-button {
    height: 45px;
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
}

#edition-selector-block .menu-label {
    font-size: 15px;
    padding-left: 10px;
    color: #333;
    white-space: nowrap;       /* a long video name ends with "..." instead of stretching the toolbar */
    overflow: hidden;
    text-overflow: ellipsis;
}

.selector-block:hover{
    background-color: rgba(0, 0, 0, 0.05);
}

#chNumber{
    font-size:30pt;
    color: #9f0149;
    font-family: "times new roman",Times,serif;
    letter-spacing: -3px;
    padding-left: 5px;
}

#chNames{
    font-size: 15px;
    line-height: 5px;
    margin-left: 8px;
    margin-top: 2px;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

#chNameEn {
    color: #000;
}

#chNameAr {
    color: #666;                 /* gray, apart from the English name in black, yet easy to read */
}

.caret{
	color:#777;
    font-size:16px;
    margin-left: auto;
    padding-right: 5px;
}

/*-------------------------------*/

.icon-top{
    vertical-align: middle;
    width: 20px;
    height: 20px;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
    color: #555;
    pointer-events: none;
    padding: 3px;
}

.color-green{
    color: #00b200 ;
}

.icon-top-wrapper:hover{
    background-color: #d8d8d8;
}

.icon-top-wrapper{
    cursor: pointer;
}

/*-------------------------------*/

/*-------------------------------*/

#quran-text{
    margin-top: 30px;
}

#quran-text p {
	font-size:17px;
	line-height:140%;
	margin:0em 0em 0.60em 0em;
	text-align:left;
	color:#212121;
}

/* A verse briefly highlighted (after opening it from search): fades in, then out */
#quran-text p {
    transition: background-color 1.5s ease;
}
#quran-text p.verse-flash {
    background-color: #fff3b0;
    transition: background-color 0.4s ease;
}

#quran-text p span {
    margin-right: 0.2em;
    color: #2F5B92;
}

/*-------------------------------*/

#myFooterContainer{
    position: fixed;
    background-color: #fff;    
    width: 100%;
    bottom: 0;
    border-top: 1px solid #d6d6d6;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
    padding: 5px 0px;
}

#myFooter {
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;              /* when the window is narrow and the tagline wraps under the audio player */
    justify-content: space-between;
    align-items: center;
    width: min(740px, 100% - 32px);
    min-height: 56px;
    margin: 0 auto;
}

#myAudioPlayer {
    visibility: visible;
    width: 400px;
    max-width: 100%;
    display: block;
}

.bottom-title{
    padding-top: 1px;
    font-size: 15px;
    text-align: right;
    white-space: nowrap;        /* the tagline on one line, next to the audio player */
    line-height: 20px;
}

.bottom-title-line1{
    color: #000;

}

.bottom-title-line2{
    color: #767676;             /* the lightest gray that is still easy to read on white (4.5:1) */
    margin-top: 3px;            /* a little room between the two lines */
}

select optgroup{
    font-size: 1.3em;
    color: #222;
}

#added-height-for-search-scroll{
    height:900px;
    width: 1px;
}

    /* Material Button */

    .material-button-raised {
        position: relative;
        display: inline-block;
        box-sizing: border-box;
        border: none;
        border-radius: 2px;
        padding: 0 16px;
        min-width: 64px;
        height: 36px;
        vertical-align: middle;
        text-align: center;
        text-overflow: ellipsis;
        text-transform: uppercase;
        color: #000;
        background-color: #f1f3f4;
        box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
        font-size: 14px;
        font-weight: 500;
        line-height: 36px;
        overflow: hidden;
        outline: none;
        cursor: pointer;
        transition: box-shadow 0.2s;
      }
  
      .material-button-raised:hover,
      .material-button-raised:focus {
        box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
      }
  
      .material-button-raised:active {
        box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
      }
  
      .material-button-raised:disabled {
        color: rgba(0, 0, 0, 0.38);
        background-color: rgba(0, 0, 0, 0.12);
        box-shadow: none;
        cursor: initial;
      }
  
      .material-button-raised::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: currentColor;
        opacity: 0;
        transition: opacity 0.2s;
      }
  
      .material-button-raised:hover::before {
        opacity: 0.12;
      }
  
      .material-button-raised:focus::before {
        opacity: 0.2;
      }
  
      .material-button-raised:active::before {
        opacity: 0.32;
      }
  
      .material-button-raised:disabled::before {
        opacity: 0;
      }
  
      .material-button-raised::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 18px;
        border-radius: 50%;
        padding: 50%;
        width: 32px;
        height: 32px;
        background-color: currentColor;
        opacity: 0;
        transform: translate(-50%, -50%) scale(1);
        transition: opacity 1s, transform 0.5s;
      }
  
      .material-button-raised:active::after {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(0);
        transition: transform 0s;
      }
  
      .material-button-raised:disabled::after {
        opacity: 0;
      }
  
      /* End of Material Button */

    
      .arrow-lower{
        padding-left: 12px;
        padding-right: 12px;
        margin-left: 10px;
    }

    .header-1{
        position: fixed;
        height: 4px;
        width: 100%;
        background-color: #00aeef ;
        z-index: 1000;
    }

    .header-2{
        margin: 0 auto;
        width: min(740px, 100% - 32px);
        padding:20px 0px 0px 0px;

        display: flex ;
        flex-direction: row;        
        flex-wrap: wrap;
        row-gap: 6px;
        justify-content: flex-end;
    }

    .top-link{
        margin-left: 15px;
        margin-right: 15px;
        font-size: 11.5pt;
        color: #555; 
        text-decoration: none ;
    }

    .top-link:hover {
        text-decoration: underline ;
    }

    .header-3{
        margin: 0 auto;
        width: min(740px, 100% - 32px);
        padding-top: 20px;     
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;            /* toolbar drops below the title when the window is narrow */
        column-gap: 15px;           /* space between title and toolbar */
        align-items: center;
        background-color: #ffffff;
    }

    /* The title and toolbar stay at the top of the window when the page scrolls, so search, Aa, play and
       the arrows are always in reach. Its top space scrolls away: it stops just under the thin blue line. */
    .header-3{
        position: sticky;
        top: -10px;                 /* 10px of its top space stays, above the title and toolbar */
        z-index: 900;
        padding-bottom: 12px;
    }
    /* Once it is pinned (the script adds "bar-pinned" to the page): a light blue-gray bar across the whole
       window, a thin line under it, and the toolbar in white on it */
    .header-3::before{
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 100vw;
        transform: translateX(-50%);
        background-color: inherit;
        z-index: -1;
    }
    html.bar-pinned .header-3{
        background-color: #f4f8fb;
    }
    html.bar-pinned .header-3::before{
        border-bottom: 1px solid #c9d6e0;
    }
    html.bar-pinned .toolbar{
        background-color: #ffffff;
        box-shadow: 0 1px 3px rgba(0, 60, 100, 0.12);
    }

    #qTitle{
        font-family:Georgia, "Times New Roman", Times, serif;
        font-size:34pt;
        font-weight:normal;        
        margin-left:-5px;
        color:#333;
    }
    
    #qLetter{
        font-size:1.3em;
    }

    .toolbar{
        height:45px;
        margin-top: 12px;
        background-color: #f1f3f4;
        flex: 1 1 480px;            /* grow to fill; wrap below the title if less than ~480px is left */
        border-radius: 2px;

        display: flex;
        flex-direction: row;
        align-items: center;
        box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);        
    }

    .top-buttons{
        padding: 0 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-grow: 100;
    }

#youtube-player{
    margin-top: 55px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 100%;
    max-width: 700px;
    height: auto;
    aspect-ratio: 16 / 9;
}

/*---------------------------------------------------------------------------------------------------*/

/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress
 * @license MIT */

/* Make clicks pass-through */
#nprogress {
    pointer-events: none;
  }
  
  #nprogress .bar {
    background:#007BBC;
  
    position: fixed;
    z-index: 1031;
    top: 0;
    left: 0;
  
    width: 100%;
    height: 4px;
  }
  
  /* The tip at the right end of the bar */
  #nprogress .peg {
    display: block;
    position: absolute;
    right: 0px;
    width: 100px;
    height: 100%;
    opacity: 1.0;
  
    -webkit-transform: rotate(3deg) translate(0px, -4px);
        -ms-transform: rotate(3deg) translate(0px, -4px);
            transform: rotate(3deg) translate(0px, -4px);
  }
  


/*--------------------------------------------------------------------------------------------------*/

.arrows-lower-spacer {
    height: 150px;
}

#arrows-lower{
    padding-top: 12px;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome and Opera */
  }
/* ------------------------------------------------------------------ */

/*--------------------------------------------------------------------------------------------------*/
/* The menu in the toolbar: two tabs at the top (Read & Listen, or Watch), then that tab's choices
   as rows of buttons (Divine Name and voice, or the videos). Looks like the Aa panel next to it. */

.menu-wrap {
    position: relative;
}
.menu-list {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin: 6px 0 0 0;
    width: 290px;
    box-sizing: border-box;
    padding: 20px 20px 4px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    z-index: 2000;
    text-align: left;
    color: #333;
    cursor: default;
}
.menu-wrap.open .menu-list {
    display: block;
}
/* A row of buttons: the tabs, and each row of choices */
.mode-tabs,
.choice-seg {
    display: flex;
    border-radius: 6px;
    overflow: hidden;
}
.mode-tabs button,
.choice-seg button {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: none;
    font-family: inherit;
    white-space: nowrap;           /* "Read & Listen" stays on one line */
    cursor: pointer;
}
/* The tabs: a little taller, in the site's blue (the only buttons in that blue: they are the first choice) */
.mode-tabs {
    margin-bottom: 18px;
    border: 1px solid #00759A;
}
.mode-tabs button {
    height: 38px;
    background-color: #fff;
    color: #00759A;
    font-size: 15px;
}
.mode-tabs button:first-child {
    flex: 1.4;                     /* "Read & Listen" is longer than "Watch" */
}
.mode-tabs button + button {
    border-left: 1px solid #00759A;
}
.mode-tabs button.on {
    background-color: #00759A;
    color: #fff;
    font-weight: 500;
    cursor: default;
}
/* The choices under a tab: quieter than the tabs, so the tabs read as the first choice */
.choice-head {
    font-size: 13px;
    color: #6b7c88;
    margin: 0 0 8px;
}
.choice-seg {
    margin-bottom: 16px;
    border: 1px solid #9aa8b4;
}
.choice-seg button {
    height: 34px;
    background-color: #fff;
    color: #333;
    font-size: 14px;
}
.choice-seg button + button {
    border-left: 1px solid #9aa8b4;
}
.mode-tabs button:hover:not(.on),
.choice-seg button:hover:not(.on) {
    background-color: #eef3f6;
}
.choice-seg button.on {
    background-color: #dbeaf1;
    color: #00597a;
    font-weight: 500;
}


/*-------- The Aa button and panel: text size and night mode --------*/
#aa-menu {
    position: relative;
}
#aa-button .aa-text {
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    vertical-align: middle;
    font-family: Georgia, "Times New Roman", Times, serif;   /* a serif "Aa" reads as "text" */
    font-size: 19px;
    color: #555;
    pointer-events: none;
}
#aa-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 14px;
    z-index: 50;
    width: 290px;                  /* the same as the Read & Listen / Watch menu beside it */
    box-sizing: border-box;
    padding: 20px 20px 4px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    color: #333;
    cursor: default;
}
#aa-menu.open #aa-panel {
    display: block;
}
.aa-head {
    font-size: 13px;
    color: #6b7c88;
    margin: 0 0 8px;
}
.aa-head b {
    font-weight: 500;
    color: #333;
}
/* A- A+ and Night mode: rows of buttons that look like the choices in the Read & Listen / Watch menu */
.aa-stepper {
    display: flex;
    margin-bottom: 16px;
    border: 1px solid #9aa8b4;
    border-radius: 6px;
    overflow: hidden;
}
.aa-stepper button {
    flex: 1;
    height: 34px;
    padding: 0;
    border: none;
    background-color: #fff;
    color: #333;
    font-family: Georgia, "Times New Roman", Times, serif;
    cursor: pointer;
}
#text-smaller {
    font-size: 15px;
}
#text-larger {
    font-size: 21px;
}
.aa-stepper button + button {
    border-left: 1px solid #9aa8b4;
}
.aa-stepper button:hover:not(:disabled) {
    background-color: #eef3f6;
}
.aa-stepper button:disabled {
    color: #b5bec6;                /* the smallest or largest size is reached */
    cursor: default;
}
.aa-seg {
    display: flex;
    margin-bottom: 16px;
    border: 1px solid #9aa8b4;
    border-radius: 6px;
    overflow: hidden;
}
.aa-seg button {
    flex: 1;
    height: 34px;
    padding: 0;
    border: none;
    background-color: #fff;
    color: #333;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}
.aa-seg button + button {
    border-left: 1px solid #9aa8b4;
}
.aa-seg button:hover:not(.on) {
    background-color: #eef3f6;
}
.aa-seg button.on {
    background-color: #dbeaf1;
    color: #00597a;
    font-weight: 500;
}

/*-------- Night mode (the class "night" on the page, set from the Aa panel) --------*/
html.night {
    color-scheme: dark;            /* the browser's own parts (scrollbars, the chapter list, the audio player) turn dark too */
}
html.night body,
html.night .header-3 {
    background-color: #15191d;
}
html.night.bar-pinned .header-3 {
    background-color: #1c2229;      /* a little lighter than the page, with a hint of blue */
}
html.night.bar-pinned .header-3::before {
    border-bottom-color: #343d45;
}
html.night.bar-pinned .toolbar {
    background-color: #262c32;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
html.night .header-1 {
    background-color: #0b8fc4;
}
html.night .top-link {
    color: #aab4bd;
}
html.night #qTitle {
    color: #d6dbe0;
}
html.night .toolbar {
    background-color: #262c32;
    box-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
html.night #chapter-selector-overlay {
    border-right-color: #3a434b;
}
html.night #edition-selector-block {
    border-left-color: #3a434b;
}
html.night .selector-block:hover {
    background-color: rgba(255,255,255,0.06);
}
html.night .icon-top,
html.night #aa-button .aa-text {
    color: #c0c8cf;
}
html.night .color-green {
    color: #3fbf5f;
}
html.night .icon-top-wrapper:hover {
    background-color: #343b42;
}
html.night #chNumber {
    color: #c9849a;              /* the maroon surah number, as a muted rose that shows on dark */
}
html.night #chNameEn,
html.night #edition-selector-block .menu-label {
    color: #e6e9ec;
}
html.night #chNameAr {
    color: #aab4bd;
}
html.night .caret {
    color: #8f9aa3;
}
html.night .menu-list {
    background-color: #22282e;
    border-color: #3a434b;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
    color: #d6dbe0;
}
html.night .mode-tabs {
    border-color: #4a9bb8;
}
html.night .mode-tabs button {
    background-color: #22282e;
    color: #7fc3dc;
}
html.night .mode-tabs button + button {
    border-left-color: #4a9bb8;
}
html.night .mode-tabs button.on {
    background-color: #2f6f88;
    color: #fff;
}
html.night .choice-head {
    color: #8f9aa3;
}
html.night .choice-seg {
    border-color: #6b7884;
}
html.night .choice-seg button {
    background-color: #22282e;
    color: #d6dbe0;
}
html.night .choice-seg button + button {
    border-left-color: #6b7884;
}
html.night .mode-tabs button:hover:not(.on),
html.night .choice-seg button:hover:not(.on) {
    background-color: #2c343b;
}
html.night .choice-seg button.on {
    background-color: #3a444e;
    color: #fff;
}
html.night select optgroup,
html.night select option {
    color: #d6dbe0;              /* the surah list (its day color, #222, would be invisible on dark) */
    background-color: #22282e;
}
html.night #quran-text p {
    color: #c9cfd5;              /* a little softer than white: light text on dark looks bolder and brighter than it is */
}
html.night #quran-text p.verse-flash {
    background-color: #4a4220;      /* a dark golden tone, like the search highlight at night (the text keeps its color: it reads well on it) */
}
html.night #quran-text p span {
    color: #8aa6c4;              /* verse numbers: a dusky blue, quieter in the dark */
}
html.night .material-button-raised {
    background-color: #2a3138;
    color: #d6dbe0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
html.night #myFooterContainer {
    background-color: #1b2025;
    border-top-color: #2c343b;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
}
html.night .bottom-title-line1 {
    color: #d6dbe0;
}
html.night .bottom-title-line2 {
    color: #8f9aa3;
}
html.night #aa-panel {
    background-color: #22282e;
    border-color: #3a434b;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
    color: #d6dbe0;
}
html.night .aa-head {
    color: #8f9aa3;
}
html.night .aa-head b {
    color: #d6dbe0;
}
html.night .aa-stepper {
    border-color: #6b7884;
}
html.night .aa-stepper button {
    background-color: #22282e;
    color: #d6dbe0;
}
html.night .aa-stepper button + button {
    border-left-color: #6b7884;
}
html.night .aa-stepper button:hover:not(:disabled) {
    background-color: #2c343b;
}
html.night .aa-stepper button:disabled {
    color: #59636c;
}
html.night .aa-seg {
    border-color: #6b7884;
}
html.night .aa-seg button {
    background-color: #22282e;
    color: #d6dbe0;
}
html.night .aa-seg button + button {
    border-left-color: #6b7884;
}
html.night .aa-seg button:hover:not(.on) {
    background-color: #2c343b;
}
html.night .aa-seg button.on {
    background-color: #3a444e;
    color: #fff;
}

/* Keyboard focus: the toolbar icons, PREV/NEXT and search results (reader.js and search.js make them buttons),
   and every real button (search clear/close, the Aa panel, the edition menu) */
[role="button"]:focus-visible,
button:focus-visible {
    outline: 2px solid #3a8fd6;
    outline-offset: 2px;
}
button:focus-visible {
    outline-offset: -2px;               /* inside: the Aa panel and the menu clip anything outside their buttons */
}