@charset "utf-8";

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

#myContent {
    padding:44px 0px 0px 0px;
    margin: 0 auto;
    width: 93%;
}

.select {
    font-size: 0pt; /* needed by js that hides/unhides delector */
}

.selector {
    display: none;
    -webkit-appearance: menulist-text;          /* necessary for some browsers */
}

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

#gotoapp-container {
    display: table;
    margin: 0 auto;
    padding-top:20px;
    text-align: center;
    vertical-align: middle;
    font-size:14px;
    cursor: pointer;
    padding-top:30px;
    -webkit-tap-highlight-color: transparent;
    display:none ;
}

#gotoapp-left {
    padding:8px 10px 8px 10px;
    float: left;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    background-color: #f1f2f4;

    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
#gotoapp-right {
    padding:8px 10px 8px 10px;
    float: left;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: #ccc;

    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.social-media-buttons {
    padding-top:20px;
    margin: 0 auto;
    display: table;
    margin-bottom: 100px;
}

.goto-button-lower{
    padding:8px 12px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    background: #f1f2f4;
    color:#222;
    margin-top:20px;
    float:left;
    cursor: pointer;
    font-size:14px;
}

.mt1{
    margin-top: 10px;
}

.mb1{
    margin-bottom: 10px;
}

.mb2{
    margin-bottom: 20px;
}


.ml1{
    padding-left: 10px;
}


/*--- Header  ------------------------*/
#myHeader {
    background-color: #3a569e;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;
    vertical-align: middle;

    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    z-index: 1000;
}

.header-button, .header-button:hover, .header-button:active, .header-button:visited, .header-button:link{
    font-size: 22px;
    color: #eeeeee;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

#chapter-select-overlay {
    font-size:17px;
    width: 176px;
    padding: 4px 7px 4px 7px;
    margin: 0px 0px 0px 0px;
    border-left: 1px solid #bbbbbb;
    border-right: 1px solid #bbbbbb;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    cursor: pointer;
}

#chapter-name-e {
    
    line-height: 130%;
    color: #ffffff;
}

#chapter-name-a {
    line-height: 130%;
    font-size:16px;
    color: #BDC7DF;
}

.dropdown-block{
    position: relative;
}

#chapter-selector {
    width: 176px;
    height: 59px;
    right: 2px;
    cursor: pointer;
    line-height: 55px; /* Safari Browser Needs This, to control height of selector */
    position:absolute;
    padding: 0;
}

.icon-spacer-1 {
    width: 1px;
    display: inline-block;    
}

.icon-spacer-2 {
    width: 1px;
    display: inline-block;    
}

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

.icon-title{
    width: 23px;
    height: 23px;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
    color:#940302 ;

    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;

    pointer-events: none;

}

.icon-title-wrapper {
    margin-top: 13px;
    margin-left: 5px;
    cursor: pointer;
}

.icon-a-e, .icon-a-e:hover .icon-a-e:active, .icon-a-e:visited, .icon-a-e:link  {
    color:#940302 ;
    font-size: 29px;
    letter-spacing: -2px;
    margin-left: 15px;
    bottom: 10px;
    position: relative;
    top: -6px;
    cursor: pointer;
    text-decoration: none;
}

.icon-top{
    vertical-align: middle;
    cursor: pointer;
    width: 20px;
    height: 20px;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
    color: #eeeeee;

    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;

    pointer-events: none;
    z-index: 1000;
}

.icon-top-wrapper{
    display: inline-block;
    cursor: pointer;
    padding:0px 1px;
}


.caret-gray{
    color:#666666;
    font-size:14px;
    vertical-align: middle;
}

.caret-orange{
    color: #ff9607;
    font-size:14px;
    position: absolute;
    right:10px;
    top:5px;
}

#chapter-number {
    color: #e8e8e8;    
    font-size:13px;
    position: absolute;
    left:10px;
    top:7px;
}

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

#title-line-1 {
    margin: 0px;
    padding: 0px;
    margin-top:25px;
    margin-bottom: 5px;
    
    color:#222;
    display: flex;
    align-items: center;
    gap:2rem;
}

@media (max-width: 400px) {
  #title-line-1 {
    gap: 0.9rem; 
  }
}

#title-line-1 > :last-child {
  margin-left: auto;
}

#title-quran {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 40px;
    font-variant: small-caps;
    margin: 0px;
    padding: 0px;
    color:#333;
}

@media (max-width: 375px) {
  #title-quran {
    font-size: 36px;
  }
}

#title-line-2 {
    font-family: "Times New Roman", Times, serif;
    font-size: 28px;
    font-variant: small-caps;
    margin: -5px 0px 10px 0px;
    padding: 0 ;
    color:#333;
}

.quranfor-com,
.quranfor-com:visited,
.quranfor-com:active {
  color: #333;
  text-decoration: none;
  font-size: 15px;
  margin-top: 5px;
}

.quranfor-com:hover {
    text-decoration: underline;
}



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

.edition-selector-wrapper{
    width:70px;
    margin-top: -8px;
    margin-left: -5px;
}


#edition-overlay{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 2px;
    padding-right: 3px;
    color:#222;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    background: #f1f2f4;
    margin-top:15px;
    float:right;
    cursor: pointer;
    min-width: 60px;
}

#edition-selector{
    margin-top:17px;
    float:right;
    margin-right:-70px;
    height:30px;
    width:70px;
    cursor: pointer;
    line-height: 35px; /* Safari Browser Needs This, to control height of selector */
}

#edition-text{
    padding-left:5px;
    font-size:15px;
    vertical-align: middle;
}



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

#quran-text p {
    font-size: 1.3em;
    margin: 0em 0em 0.50em 0em;
    color:#212121 ;
}

#quran-text p span {
    color: #3B6AA0;
    font-size: 85%;
}


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

#myFooter {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0px;
    padding-bottom: 10px;
    text-align: center;
    vertical-align: middle;
}

#myAudioPlayer {
    visibility: visible;
    width: 85%;
    margin-right: auto;
    margin-left: auto;
    display: block;
}

#bottom-strip {
    height: 0.5em
}

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

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



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

@media only screen and (min-width: 360px) {

    #chapter-select-overlay {
        width: 190px;
    }
    
    #chapter-selector {
        right: 2px;
        width: 190px;
    }     

    .icon-top-wrapper{
        padding:0px 4px;
    }    

    .icon-spacer-1 {
        width: 4px;  
    } 

    .icon-spacer-2 {
        width: 6px;  
    } 
}

@media only screen and (min-width: 480px) {

    #myContent {
        width: 90%;
    }    

    .icon-top-wrapper{
        padding:0px 8px;
    }   

    .icon-spacer-1 {
        width: 6px;  
    }     
    
    .icon-spacer-2 {
        width: 16px;
    }     
}

@media only screen and (min-width: 900px) {

    #myContent {
        width: 750px;
    }

    #myAudioPlayer {
        width:700px;
    }

    #quran-text p {
        font-size: 17px;    
        line-height: 140%; 
        text-align: justify;
        text-justify: inter-word;         
    }     
}


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

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

/* Make clicks pass-through */
/* Make clicks pass-through */
#nprogress {
    pointer-events: none;
  }
  
  #nprogress .bar {
    background:#D3EFFF;
  
    position: fixed;
    z-index: 1031;
    top: 0;
    left: 0;
  
    width: 100%;
    height: 2px;
  }
  
  /* Fancy blur effect */
  #nprogress .peg {
    display: block;
    position: absolute;
    right: 0px;
    width: 100px;
    height: 100%;
    /* box-shadow: 0 0 10px #D3EFFF, 0 0 5px #D3EFFF; */
    opacity: 1.0;
  
    -webkit-transform: rotate(3deg) translate(0px, -4px);
        -ms-transform: rotate(3deg) translate(0px, -4px);
            transform: rotate(3deg) translate(0px, -4px);
  }
  
  /* Remove these to get rid of the spinner */
  #nprogress .spinner {
    display: block;
    position: fixed;
    z-index: 1031;
    top: 15px;
    right: 15px;
  }
  
  #nprogress .spinner-icon {
    width: 18px;
    height: 18px;
    box-sizing: border-box;
  
    border: solid 2px transparent;
    border-top-color: #448aff;
    border-left-color: #448aff;
    border-radius: 50%;
  
    -webkit-animation: nprogress-spinner 400ms linear infinite;
            animation: nprogress-spinner 400ms linear infinite;
  }
  
  .nprogress-custom-parent {
    overflow: hidden;
    position: relative;
  }
  
  .nprogress-custom-parent #nprogress .spinner,
  .nprogress-custom-parent #nprogress .bar {
    position: absolute;
  }
  
  @-webkit-keyframes nprogress-spinner {
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  @keyframes nprogress-spinner {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

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

#option-group {
    font-size:17px;
    color: #212121;
    line-height: 30px;
    height: 40px;
}

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

.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 */
  }
/* ------------------------------------------------------------------ */
/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/*!
 * Generated using the Bootstrap Customizer (<none>)
 * Config saved to config.json and <none>
 *//*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
 
 html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}a:hover,a:focus{color:#23527c;text-decoration:underline}a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.img-responsive{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;max-width:100%;height:auto}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}[role="button"]{cursor:pointer}.caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px dashed;border-top:4px solid \9;border-right:4px solid transparent;border-left:4px solid transparent}.dropup,.dropdown{position:relative}.dropdown-toggle:focus{outline:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;list-style:none;font-size:14px;text-align:left;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,0.175);box-shadow:0 6px 12px rgba(0,0,0,0.175);-webkit-background-clip:padding-box;background-clip:padding-box}.dropdown-menu.pull-right{right:0;left:auto}.dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:normal;line-height:2.0;color:#333;white-space:nowrap}.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{text-decoration:none;color:#262626;background-color:#f5f5f5}.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{color:#fff;text-decoration:none;outline:0;background-color:#337ab7}.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus{color:#777}.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus{text-decoration:none;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);cursor:not-allowed}.open>.dropdown-menu{display:block}.open>a{outline:0}.dropdown-menu-right{left:auto;right:0}.dropdown-menu-left{left:0;right:auto}.dropdown-header{display:block;padding:3px 20px;font-size:12px;line-height:1.42857143;color:#777;white-space:nowrap}.dropdown-backdrop{position:fixed;left:0;right:0;bottom:0;top:0;z-index:990}.pull-right>.dropdown-menu{right:0;left:auto}.dropup .caret,.navbar-fixed-bottom .dropdown .caret{border-top:0;border-bottom:4px dashed;border-bottom:4px solid \9;content:""}.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu{top:auto;bottom:100%;margin-bottom:2px}@media (min-width:768px){.navbar-right .dropdown-menu{left:auto;right:0}.navbar-right .dropdown-menu-left{left:0;right:auto}}.embed-responsive{position:relative;display:block;height:0;padding:0;overflow:hidden}.embed-responsive .embed-responsive-item,.embed-responsive iframe,.embed-responsive embed,.embed-responsive object,.embed-responsive video{position:absolute;top:0;left:0;bottom:0;height:100%;width:100%;border:0}.embed-responsive-16by9{padding-bottom:56.25%}.embed-responsive-4by3{padding-bottom:75%}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.05);box-shadow:inset 0 1px 1px rgba(0,0,0,0.05)}.well blockquote{border-color:#ddd;border-color:rgba(0,0,0,0.15)}.well-lg{padding:24px;border-radius:6px}.well-sm{padding:9px;border-radius:3px}.close{float:right;font-size:21px;font-weight:bold;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20)}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer;opacity:.5;filter:alpha(opacity=50)}button.close{padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.center-block{display:block;margin-left:auto;margin-right:auto}.pull-right{float:right !important}.pull-left{float:left !important}.hide{display:none !important}.show{display:block !important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none !important}.affix{position:fixed}

.dropdown-menu .divider {
  border-bottom: 1px solid #ddd;
  margin: 6px 0;
  list-style: none;
  height: 0;
  padding: 0;
}

/**********************************************************************************************************************************************/

/* Talal's bootstraps overwerites */

.navbar-nav > li {
    font-size: 16px;
    }
  .dropdown-menu {
      font-size: 18px;
    }


input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: auto;
    padding-left: 10px;
}    

/**********************************************************************************************************************************************/