/* Fixed sidenav, full height */
.sidenav {
  height: 100%;
  width: 0px;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 1;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
  transition: 0.2s; /* 0.5 second transition effect to slide in the sidenav */
}

/* Style the sidenav links and the dropdown button */
.sidenav a, .dropdown-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  top: 0;
  left: 0;
  display: block;
  border: none;
  background: none;
  width:100%;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: 0.2s; /* 0.5 second transition effect to slide in the sidenav */
}


/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 45px;
    margin-left: 192px;
}


/* On mouse-over */
.sidenav a:hover, .dropdown-btn:hover {
  color: #f1f1f1;
}

#textOptions{
    color: #f1f1f1;
    cursor: default;
}

#textOptions:hover{
    color: #f1f1f1;
}

/* Main content */
.main {
    
transition: margin-left .3s; /* Same as the width of the sidenav */
/* font-size: 20px; /* Increased text to enable scrolling */
    display: none:
padding: 20px; 
}

/* Add an active class to the active dropdown button */
.active {
  background-color: #800020;
  color: white;
}


/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdown-container {
  display: none;
    font-size: 20px;
  background-color: #262626;
  padding-left: 8px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}


.speaking{
    background: #fae1e1;
}

 
/* Site Wrapper - Everything that isn't navigation 
.site-wrap {
  /* Critical position and size styles */
  min-height: 100%;
  min-width: 100%;
  background-color: white; /* Needs a background or else the nav will show through */
  position: relative;
  top: 0;
  bottom: 100%;
  left: 0;
  z-index: 1;
  
  /* non-critical apperance styles */
  padding: 4em;
  /* background-image: linear-gradient(135deg, rgb(254,255,255) 0%,rgb(221,241,249) 35%,rgb(160,216,239) 100%); */
  background-size: 200%;
} 
*/

/* ===================================================================================================================== 


 @font-face { font-family: GeezaPro; src: url('Fonts/GeezaPro.ttc'); }
 @font-face { font-family: Quran; src: url('Fonts/Mishafi.ttc'); }
*/


 @font-face { font-family: Saleem; src: url('Fonts/PDMS_Saleem_QuranFontQEShip.ttf'); } 
 @font-face { font-family: Islamic; src: url('Fonts/PDMS_IslamicFont.ttf'); } 

/* ==
@import url(http://fonts.googleapis.com/earlyaccess/droidarabicnaskh.css);
.droid-arabic-naskh{font-family: 'Droid Arabic Naskh', serif;}
== */

html, body.arabicText{
    text-size-adjust: auto;
    font-family: 'Droid Arabic Naskh'; 
/*     font-family: 'Quran'; */
    scroll-behavior: smooth;
}


.mbr-section-subtitle align-left mbr-light pb-3 mbr-fonts-style display-5:hover{
    
    color: aqua;
}

.header{
	
	border-bottom: 5px;
	border-bottom-color: #800020;
	border-bottom-style:solid;
    padding-top: 10px;
    margin-bottom: 5px;
	
}

.header h1 {
    text-align: center;
    color:#262626;
    text-decoration: none;
	font-weight: 1000;
    font-size: 100px;
    font-family: 'Montserrat', sans-serif;
	line-height: 90%;
    margin-bottom: 0px;
}

.header h2{
    text-align: center;
    font-size:55px;
    font: 'Montserrat', sans-serif;
    color:#262626;
	line-height: 90%;
    margin: 12px 0px 10px 0px;
}

.header h3{
    text-align: center;
    font-family: Islamic;
    font-size:50px;
    color:#800020;
	line-height: 90%;
    margin: 24px 0px 0px 0px;
}

.part_english p{
    text-align: center;
    font-size:5px;
    color:white;
    margin: 0;
}


/* audio{
 display: block; 
 position: fixed;
    width: 95%;
 left: 50%;
    bottom: 0;
    border-bottom: 5px;
    border-bottom-color: white;

    transform: translateX(-50%);
}
*/

/* Paragaph font type --------------------------------------------------------------------- */

#MyP{
    
    font-family: Islamic;
    padding: 3vw;
}

/* Font properties of text ---------------------------------------------------------------- */


mondua{
	font-size: 35px;
	color: black;
	padding: 30px 0 0 0; 
}

p{
    font-size: 20px; /*40*/
    font-weight: 50; /*50 */
    line-height: 175%; /*175 */

}


p.FAQ {
    
    font-size: 18px;
}

p > span{ 
    color: #800020;
}


p.trans {
    margin-bottom: 10px;
    border-bottom-width: 1px;
    border-top-color: grey;
    border-bottom-style: ridge;

}

p.thirdsQuarters {
    direction: rtl;
    font-size: 35px; /* remove */
    margin: 0 !important;
    top: -20px;
    color:#800020;

}

p.arabicText {
   /* margin-bottom: 10px;	margin:-10px;
 */
    direction: rtl;
    font-size: 35px; /* remove */
    margin: 0 !important;
    top: -20px;

}

p.numbers_names {
	color:#800020;
	font-weight: 500;
	margin-top: -10px;
	position: relative;
	width: 25px;
    vertical-align: middle;
	text-align: center;
    /*


    
    border-radius: 0.25em;
    background: #800020;*/
    font-size: 1.25em;
    line-height: 50%;
    margin:0;
    top: 20px;
    opacity: 100%;
    
}


p.numbers {
	color:#800020;
	font-weight: 500;
	margin-top: -10px;
	position: static;
	width: 25px;
    vertical-align: middle;
	text-align: center;
    /*


    
    border-radius: 0.25em;
    background: #800020;*/
    font-size: 1.25em;
    line-height: 50%;
    margin:0;
    top: 20px;
    opacity: 100%;
        padding-top: 6px;
    padding-bottom: 5px;
    
}

p.numbers > span {
    
    color: #c9c9c9;
    cursor: pointer;
    content: '\25B6U+FE0E';
    z-index: -2;
      -webkit-text-stroke: 1px #c9c9c9;
   /* text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; */
}

p.numbers > span:hover{
    
    color: black;
    -webkit-text-stroke: 1px black;
}


/* Font properties of tasmiyah ------------------------------------------------------------ */
    
.tasmiyah{
    text-align: center;
    font-family: Islamic;
    font-size: 28px;
	padding:2px 0 2px 0;
    padding-top: 10px;
    margin:0px;
}


/* Font properties of parts --------------------------------------------------------------- */
.part h3{
text-align: center;
    font-family: Islamic;
    font-size: 40px;
    color: #800020;
	padding:63px 0px 0px 0px;
    line-height: 100%;
    margin: 0px;
}


/* Font properties of footer -------------------------------------------------------------- */


.footer{
    
    background-color: #800020;
    color:white;
	opacity: 1;
    text-align: center;
    width:100%;
}

/* Font properties of quarters/thirds ----------------------------------------------------- */



.en-day{
    text-align: center;
    font-size: 20px;
    font-weight: 1000;
    display:block;
    padding:0;
    margin:0;
    border-bottom: 0;
}

.ar-day{
     text-align: center;
    font-size: 20px;
    font-weight: 1000;
    display:block;
    padding:0;
    margin:0;
    border-bottom: 0;
}


/* Translation toggle properties --------------------------------------------------------------------- */
.sliderWrapper{display: inline-block;margin:12px 12px 12px 12px;postion:relative;}
.sliderWrapper div{display: inline-block;line-height:20px;}
 /* The switch - the box around the slider */
.switch {
  vertical-align: middle;
  position: relative;
  display: inline-block;
  padding:0px;
  width: 54px;
  height: 28px;
}
/* Hide default HTML checkbox */
.switch input {display:none;}
/* The slider */
.toggle {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d7d7d7;
  -webkit-transition: .4s;
  transition: .4s;
}
.toggle:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 1px;
  bottom: 1px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .toggle {background-color: #800020;}
input:focus + .toggle {box-shadow: 0 0 1px #800020s;}
input:checked + .toggle:before {-webkit-transform: translateX(26px);-ms-transform: translateX(26px);transform: translateX(26px);}


/*.sliderContainer{
    padding-top: 50px;
    width: 225px;
    align-content: center;
    color: white;
}

.slider {
    
    width: 180px;
    align-content: center;
    text-align: center;
    -webkit-transition: .2s; /* 0.2 seconds transition on hover 
    transition: opacity .2s;
}
*/