@import url(font-awesome.min.css);
@import url('https://fonts.googleapis.com/css2?family=Amiri+Quran&family=Cairo:wght@300;400&display=swap');
@font-face {
   font-family: 'mobily';
   src: url(../../fonts/mobily.ttf) format('truetype');
}
@font-face {
   font-family: 'arabswell';
   src: url(../../fonts/arabswell.ttf) format('truetype');
}
@font-face {
   font-family: 'Cairo-SemiBold';
   src: url(../../fonts/Cairo-SemiBold.ttf) format('truetype');
}
@font-face {
   font-family: 'al-haraer';
   src: url(../../assets/fonts/al-haraer.ttf);
}

header.mp3 {
    margin: 1em 0;
    padding-top: 5%;
	text-align:center;
	color: #fff;
}

header p {
	text-align:center;
}


.separ {
	margin: 0 10px;
	color: f2b63d;
	padding: 0 5px;
	font-size: larger;
}

a {
  color: white;
  text-decoration: none;
}
#comment {
  width: 80%;
  height: 100px;
}

/* Top Info */
#quran {
  background-color: rgb(7,42,20);
	background-image: url(../../images/forplay/linediagonal.png);
  border-bottom: solid #98d361 2px;
  position: absolute;
  width: 100%;
  top: 3%;
  line-height: 34px;
  height: 40px;
  text-align: center;
  font-size: 24px;
  opacity: 0.9;
  font-weight: 300;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
}

label {
		font-family: "al-haraer", sans-serif;
		color: #F2B63D;
		margin: 0 0 1em 0;
}

.aya {
    font-family: 'Amiri Quran', serif;
    line-height: 2em;
    font-size: larger;
	color: #FFF;
	padding-top: 1em;
}

#khate p {
    text-align: justify;
}

.basmala {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: max-content;
    font-size: 2em;
}

.sura {
    display: block;
    background-image: url(../../images/patte.png);
    background-repeat: no-repeat;
    font-size: 1em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    padding-top: 2px;
    width: 300px;
    text-align: center;
	color: #1D242A;
	font-weight: bold;
  	transform: scale(1);
}

.juz {
    font-family: 'al-haraer', sans-serif;
    background-color: #FFF;
    color: #2e3842;
    display: block;
    text-align: center;
    font-size: 1.2em;
    margin: 20px 0;
	border-radius: 10px;
}

#title {
  position: fixed;
  width: 100%;
  bottom: 25%;
  line-height: 34px;
  height: 36px;
  text-align: center;
  font-size: 24px;
  opacity: 0.9;
  font-weight: 300;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
}

#shoyoukh {
  width: 100%;
height: 580px;
	text-align: right;
	margin-top: 10px;
position: absolute;
	overflow: hidden;
	overflow-y: scroll;
}

#shaikh {
  position: relative;
  display: block;
  margin: auto;
  text-align:center;
  margin-bottom: 100px;
}

#shaikh img {
  box-shadow: 0 6px 20px 10px rgba(7, 42, 20, 0.9);
  border: solid rgb(250, 250, 250) 4px;
  border-radius: 100px;
}

#shaikhplus {
  position: relative;
  display: block;
  margin: auto;
  font-size: 14px;
  width: 100%;
  top: 20px;
}

#shaikhplus img {
  box-shadow: 0 6px 20px 10px rgba(7, 42, 20, 0.9);
  border: solid rgb(250, 250, 250) 2px;
  border-radius: 100px;
}

#timer {
  position: fixed;
  bottom: 20%;
  left: 10%;
  text-align: left;
  font-size: 26px;
  opacity: 0.9;
  font-weight: 300;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
}

#duration {
  position: fixed;
  bottom: 20%;
  right: 10%;
  text-align: right;
  font-size: 26px;
  opacity: 0.5;
  font-weight: 300;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
}
#logo {
 width: 70px;
  height: 70px;
  left: 50%;
  top: -10%;
  margin: auto -34.5px;
}
/* Controls */
.controlsOuter { 
  background-color: rgb(28, 35, 40);
  border-top: solid #f2b63d 4px;
  box-shadow: 0px -10px 10px -4px rgba(0,0,0,0.75);
  position: fixed;
  width: 100%;
  height: 60px;
  bottom: 1%;
}
.controlsInner {
  background-color: rgb(28, 35, 40);
  width: 100%;
  left: 0;
  margin: -50px 0 0;
}
.btn {
  position: absolute;
  cursor: pointer;
  opacity: 0.9;
  -webkit-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.33));
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.33));
  -webkit-user-select: none;
  user-select: none;
}
.btn:hover {
  opacity: 1;
}
#contact {
  background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAaCAYAAAA9rOU8AAAAAXNSR0IArs4c6QAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAAsTAAALEwEAmpwYAAABWWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgpMwidZAAAD2ElEQVRIDb2WSWyNURSA+1pThAQJghAUsUHCxrAwxBBDTDVPYUtiZymxsbASFmIjZjHP08K0QYkIESqhYWNMTJFQQ/2+7/a/f17bR0pee5Ov99x7zz333HPOf19zJbQkSWbTLYHO8Aty0Nwt4YBS+AAHcrncyRyOLGCwBl7De1ChpZoX7wLdYYvOHEpP3kD/FNqASs3dvPR3GAAboKQV6FkVYapygvajrmuxv1UE5C2nDdYZc1fGRGsc+kHfEvUSb+pZkRAZB7X5jiDrYLO19MIck/tlEDhIEiNTCx2Z7M7iG2S/rlIVlYvd8mwjJoOwvxx6QY0FfBpBp97BcbiAIzXMh/AVyynsWbAJ9hCTDsgVMB86wkcodeUsQg3okJ/YHdjPpkr6ECU7jTj+14b9epdiPAYbK2AYPIfDMBn660BbeAZbYS5MgY1sukJ/ECeq6f/LKWzEdCMmPTDjwzpde7STsBv7r1gbj5zTGZubntBvYuEyvZumwkjG5+mPse7n16R6Yk9MSSzQmWxdCH3gLuzD3g167elDeGijM8wlrVD4CXeQ76NghHydzeso5gznRXXoCzqFTsOUDEHVAh0Bvu6b4Qw2vqS6DMMDG0ogOhMng6co+/CdZcNN+vWg0XUwkTlTVwne2sNLkBHrpcSH1OjOAIv1GxjZ2+h+obeZjdpow4l8Z7SoQrx5P9YXwWCw2k2jRRdTeRjdx4yzKLmfocW4FAbCbTgDo2AsbEfHr9e0+1toK4NwqehMvKG3bcfiHDA9Ft0t2MXme6wNRV4Mk8DUnaM/qmHkAcgrYTz4TGyBU6yZkkvI18C6WQbjmDtCb8q+Ioc3zWio+IjJtcjDkVeBOX4FB+A0a6YtNHR0fAJoWOeewj0YDV3BD2Ave6rpjVoZcm0qe9FpMA/6wgOwFh2X68xFhJfwEPyCDPUF8H+MF/T10sBcuAX72rOkvoZ6g2ncw/pV+rDHjnEoTvQtgbjXmqqAWeCj9wlC5ZlD89YJqmAnm67TNzKYzhkZVDLDvRgbIYvT9GTOK+c3HGq4t5x1IzwSgjO+wD/BQrMoPzfcxHyjVkjH26OYRaPRpnQi1fNG1qh7tkH2Aj9nYYe6LMYch/A6V6ih7zrqdbdV1ngh3YZzqROWiJGyWZPZC6zV+OiFYgsqTfgTnWqCaj2VdF9IKQtGp+4PvR7GQoveut5sLS8q2RnxnfGfqywihRSzHUUWPJfzwtk6429GNybKWaiO4SvymX8057meD+8tIj+t1eCb4kMX8kffEs2C75myLdQHDvn8+8PmY/TXr4j1YjbPNzM+sCd+A3VN/rB/yPzoAAAAAElFTkSuQmCC');
  width: 35px;
  height: 26px;
  top: 50%;
  right: 3%;
  margin: -17.5px auto;
}
#qoraa {
background-image:
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAbCAYAAAD28DaZAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAABBNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iCiAgICAgICAgICAgIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIj4KICAgICAgICAgPHhtcE1NOkRlcml2ZWRGcm9tIHJkZjpwYXJzZVR5cGU9IlJlc291cmNlIj4KICAgICAgICAgICAgPHN0UmVmOmluc3RhbmNlSUQ+eG1wLmlpZDoxRDM5RTI2RDEwMjQxMUU4QjM3N0REMzE5NDVBNTg1Qjwvc3RSZWY6aW5zdGFuY2VJRD4KICAgICAgICAgICAgPHN0UmVmOmRvY3VtZW50SUQ+eG1wLmRpZDoxRDM5RTI2RTEwMjQxMUU4QjM3N0REMzE5NDVBNTg1Qjwvc3RSZWY6ZG9jdW1lbnRJRD4KICAgICAgICAgPC94bXBNTTpEZXJpdmVkRnJvbT4KICAgICAgICAgPHhtcE1NOkRvY3VtZW50SUQ+eG1wLmRpZDoxRDM5RTI3MDEwMjQxMUU4QjM3N0REMzE5NDVBNTg1QjwveG1wTU06RG9jdW1lbnRJRD4KICAgICAgICAgPHhtcE1NOkluc3RhbmNlSUQ+eG1wLmlpZDoxRDM5RTI2RjEwMjQxMUU4QjM3N0REMzE5NDVBNTg1QjwveG1wTU06SW5zdGFuY2VJRD4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpPC94bXA6Q3JlYXRvclRvb2w+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgqhFs3+AAADSUlEQVRIDb2Xv49MURTHZ3Z2WFtYPxOh0ohyQ6FjNBodGpVgFLQajRDxD4iCSJDIFiREFArbaCWIRAShVmn8aGR3x/h8z9zv5L07P3Y2JnOS7zv3nfO955x773nvzVQqSdrtds3jSWryTjlfVQMMVQTVnuf2AtgH1ssFxi3KuQzeg9vkfeUEqqCGoYU+hvFJcvxEr4AoNtnGqRR3cwrYJP/dqEMGBjtQn8EcOAGeg2kgyXfHBeb2DrtzHcSRXVgCDfAUzIC9FPQFHcWcpSDJpTBM6EK+ZmRNeb36nSn/W2kI6hdV7xXKHMIK/noMbx3j4g6JvwwnbPi7zek5iV+Ho/jvkj3ym+yAreRsKaASG7JrTILj4CXYwv0SUHJDCer4XoAz4nuexgnK5QVZi9bti7hZ5eJdOgCvAc6TUA2vRlSza5fV+IfBEfAN3AMji4/JiUaZeB9SE1xP6DdHj+6d5Bg5tovpF7BkY4v1+KOqn9AHceqp2wZ8xOIr8Q/wDN7rxPfRyz9U8mL8Fp4mkJL0rCol+IBPGCjw6jhTmBJNcZVXR+t8QciL+S0rq/oT3v+4EENHNUi8W7+KBBfjrZ5nKdrmTWDYG9j8Yqx83LOrieCdUSH6/EginovpmCqVWx5MWMcjnhezQBFfwQZQegeMuTi939QKu8A5ELvoYrylNzjrNzgnIrTEbhKpmHj5uhgnjy8pJH281IAu0v5xaPWHPgfama3FgHkx7vIVyB4X+XpWtQohPhklZ7qBo0c2PicD/F5kKUdeTL+5XRtJqDG+N9FPTtolxFuhqiIjSeKP8uRFiDirQrCBQwJPkQTV3g+ughklVXEFxFsa32VwKPFHzjEykSq9tScZXwFHVTlJ58As2Kh7pAGugSZYk6zpmFLkRfRF8JgCvqMdQ9umpt8OJPq1KPEiOndDrg5kiicqsMf2YYqeWUSfwnga6MeV+kdc9YZ2+iN4xBE9REtiXmfYvTq2dTjyYvyi6/ekdBuRRA+YLawq6qecRHV+iqyDopUUxZXm9iJHS60Bc3Nf/OMoGXtvPNc6GN4Zr/omSfQB80+I3jAFSyrIc+VR8LjHV2D2DFWwPsSzyRO7lxezB2fpN0ZPmPEafExR+T/o9GBltfuKBwAAAABJRU5ErkJggg==');
  width: 35px;
  height: 26px;
  top: 50%;
  left: 3%;
  margin: -17.5px auto;
}
#qoraa2 {
background-image:
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAbCAYAAAD28DaZAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAABBNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iCiAgICAgICAgICAgIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIgogICAgICAgICAgICB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIj4KICAgICAgICAgPHhtcE1NOkRlcml2ZWRGcm9tIHJkZjpwYXJzZVR5cGU9IlJlc291cmNlIj4KICAgICAgICAgICAgPHN0UmVmOmluc3RhbmNlSUQ+eG1wLmlpZDoxRDM5RTI2RDEwMjQxMUU4QjM3N0REMzE5NDVBNTg1Qjwvc3RSZWY6aW5zdGFuY2VJRD4KICAgICAgICAgICAgPHN0UmVmOmRvY3VtZW50SUQ+eG1wLmRpZDoxRDM5RTI2RTEwMjQxMUU4QjM3N0REMzE5NDVBNTg1Qjwvc3RSZWY6ZG9jdW1lbnRJRD4KICAgICAgICAgPC94bXBNTTpEZXJpdmVkRnJvbT4KICAgICAgICAgPHhtcE1NOkRvY3VtZW50SUQ+eG1wLmRpZDoxRDM5RTI3MDEwMjQxMUU4QjM3N0REMzE5NDVBNTg1QjwveG1wTU06RG9jdW1lbnRJRD4KICAgICAgICAgPHhtcE1NOkluc3RhbmNlSUQ+eG1wLmlpZDoxRDM5RTI2RjEwMjQxMUU4QjM3N0REMzE5NDVBNTg1QjwveG1wTU06SW5zdGFuY2VJRD4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpPC94bXA6Q3JlYXRvclRvb2w+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgqhFs3+AAADSUlEQVRIDb2Xv49MURTHZ3Z2WFtYPxOh0ohyQ6FjNBodGpVgFLQajRDxD4iCSJDIFiREFArbaCWIRAShVmn8aGR3x/h8z9zv5L07P3Y2JnOS7zv3nfO955x773nvzVQqSdrtds3jSWryTjlfVQMMVQTVnuf2AtgH1ssFxi3KuQzeg9vkfeUEqqCGoYU+hvFJcvxEr4AoNtnGqRR3cwrYJP/dqEMGBjtQn8EcOAGeg2kgyXfHBeb2DrtzHcSRXVgCDfAUzIC9FPQFHcWcpSDJpTBM6EK+ZmRNeb36nSn/W2kI6hdV7xXKHMIK/noMbx3j4g6JvwwnbPi7zek5iV+Ho/jvkj3ym+yAreRsKaASG7JrTILj4CXYwv0SUHJDCer4XoAz4nuexgnK5QVZi9bti7hZ5eJdOgCvAc6TUA2vRlSza5fV+IfBEfAN3AMji4/JiUaZeB9SE1xP6DdHj+6d5Bg5tovpF7BkY4v1+KOqn9AHceqp2wZ8xOIr8Q/wDN7rxPfRyz9U8mL8Fp4mkJL0rCol+IBPGCjw6jhTmBJNcZVXR+t8QciL+S0rq/oT3v+4EENHNUi8W7+KBBfjrZ5nKdrmTWDYG9j8Yqx83LOrieCdUSH6/EginovpmCqVWx5MWMcjnhezQBFfwQZQegeMuTi939QKu8A5ELvoYrylNzjrNzgnIrTEbhKpmHj5uhgnjy8pJH281IAu0v5xaPWHPgfama3FgHkx7vIVyB4X+XpWtQohPhklZ7qBo0c2PicD/F5kKUdeTL+5XRtJqDG+N9FPTtolxFuhqiIjSeKP8uRFiDirQrCBQwJPkQTV3g+ughklVXEFxFsa32VwKPFHzjEykSq9tScZXwFHVTlJ58As2Kh7pAGugSZYk6zpmFLkRfRF8JgCvqMdQ9umpt8OJPq1KPEiOndDrg5kiicqsMf2YYqeWUSfwnga6MeV+kdc9YZ2+iN4xBE9REtiXmfYvTq2dTjyYvyi6/ekdBuRRA+YLawq6qecRHV+iqyDopUUxZXm9iJHS60Bc3Nf/OMoGXtvPNc6GN4Zr/omSfQB80+I3jAFSyrIc+VR8LjHV2D2DFWwPsSzyRO7lxezB2fpN0ZPmPEafExR+T/o9GBltfuKBwAAAABJRU5ErkJggg==');
  width: 35px;
  height: 26px;
  top: -35%;
  right: 3%;
  margin: -17.5px auto;
}
#home {
  background-image: url(../../images/forplay/home.png);
  width: 35px;
  height: 26px;
  top: 50%;
  left: 3%;
  margin: -17.5px auto;
}
.qoraa {
	padding-top: 14px;
	font-size: 10px;
	color: white;
}
#playBtn {
	background-image: url(../../images/forplay/play.png);
	width: 50px;
	height: 51px;
	left: 50%;
	margin: 52px -26px;
}
#pauseBtn {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEUAAABGCAYAAACaGVmHAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDE4MjkzRjNDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MjkzRjRDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBOERFOEQ1Q0M2QkQxMUU1OTZFMEMxNEEyRjI2NUYzNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowMTgyOTNGMkM3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pne5d1AAAAB8SURBVHja7NCxCQAwAALBuP/QZoEUlinua0G4tD1j83Asv/4GChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFChQoUKBAgQIFCpRXV4ABAOgpXYTDYwEwAAAAAElFTkSuQmCC');
  width: 69px;
  height: 50px;
  left: 50%;
  margin: 53px -35px;
  display: none;
}
#prevBtn {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDE4MjkzRkJDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MjkzRkNDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowMTgyOTNGOUM3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowMTgyOTNGQUM3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PndeAH8AAACtSURBVHja7NXJCcAgEAVQEevK0lk6M1aW6CGQQBBn+ephBv7F0wNn8Vd7OWCWnOjd2FpzYk7K2cJAxFEA78cwA6I3porohWlCoDEkBArDQmhjRAgtjApCilFFcDEQBAcTUYinKLcJCqFinGEMYxjDgDFpJkzZwDsSRf2mE4ni9gwEJW1gVZTWNKmgtEdbhELtGRYKvfRIqF4buAnV+xxUUaNu0y9q9KH8oG4BBgDjdpk0jMoz1gAAAABJRU5ErkJggg==');
  width: 35px;
  height: 35px;
  left: 10%;
  top: 50%;
  margin: -17.5px auto;
}
#nextBtn {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTExIDc5LjE1ODMyNSwgMjAxNS8wOS8xMC0wMToxMDoyMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDE4MjkzRjdDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDE4MjkzRjhDNzI0MTFFNTk2RTBDMTRBMkYyNjVGMzQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowMTgyOTNGNUM3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowMTgyOTNGNkM3MjQxMUU1OTZFMEMxNEEyRjI2NUYzNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiFbkXsAAACvSURBVHja7NZBDoAgDARA9GPiz/yZ8DKsxgMHY1rYBQ5sshdCwiQcWpdSOqWb1BGrSn6RiTJjmKhiDANVjUGiYBgECo6pQdEwJSg6xoJqhtGgVFkeETZBekhjdqZ6g4H5QnXH5Cg/CkadiZmYiZkYdtYGb8QRMDdi144C1jfFd0AG69RG7jNB6nsvV3+IZhgNgo6xIGiYEgQcU4OAYRCIagwSUYxhIMwYJsKEuQQYABTs+qTMuF1rAAAAAElFTkSuQmCC');
  width: 35px;
  height: 35px;
  right: 10%;
  top: 50%;
  margin: -17.5px auto;
}
#playlistBtn {
  background-image: url(../../images/forplay/list.png);
  width: 50px;
  height: 35px;
  left: 3%;
  bottom: auto;
}
#volumeBtn {
	background-image: url(../../images/forplay/volume3.png);
  width: 40px;
  height: 30px;
  right: 4%;
  bottom: auto;
}

/* Progress */
#waveform {
  width: 100%;
  height: 30%;
  position: fixed;
  left: 0;
  bottom: 50%;
  margin: -15% auto;
  display: none;
  cursor: pointer;
  opacity: 0.8;
  -webkit-user-select: none;
  user-select: none;
}
#waveform:hover {
  opacity: 1;
}
#bar {
  position: absolute;
  
}
#progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 10px;
  background-color: rgba(242, 182, 61, 1);
  z-index: -1;
}

/* Loading */
#loading {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -35px;
  width: 70px;
  height: 70px;
  background-color: #fff;
  border-radius: 100%;  
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
  display: none;
}
@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}
@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}

/* Plylist */
#playlist {
  width: 100%;
  height: 100%;
  position: fixed;
  Text-align: centre;
  top: 0;
  left: 0;
  background-color: rgba(28, 35, 40, 0.9);
  display: none;
  z-index:10001;
}
#list {
  width: 100%;
  position: absolute;
  top: 10%;
  right: 25%;
  Bottom: 10%;
  overflow:scroll;
}
.menu {
	padding-top: 14px;
	font-size: 10px;
	color: white;
}
.list-song {
  width: 90%;
  height: 40px;
  font-size: 25px;
  line-height: 40px;
  font-weight: bold;
  color: #fff;
  text-align: centre;
  text-shadow: 2px 2px 2px rgb(0, 0, 0);
}
.list-song:hover {
  text-shadow: 0px 0px 8px rgb(152, 211, 97);
  cursor: pointer;
}

/* Volume */
#volume {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  touch-action: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  display: none;
}
.bar {
  position: absolute;
  top: 65%;
  left: 5%;
  margin: -5px auto;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
}
#barEmpty {
  width: 90%;
  opacity: 0.5;
  box-shadow: none;
  cursor: pointer;
}
#barFull {
  width: 90%;
}
#sliderBtn {
  width: 10px;
  height: 50px;
  position: absolute;
  top: 65%;
  left: 93.25%;
  margin: -25px auto;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.33);
  border-radius: 25px;
  cursor: pointer;
}

/* Fade-In */
.fadeout {
  webkit-animation: fadeout 0.5s;
  -ms-animation: fadeout 0.5s;
  animation: fadeout 0.5s;
}
.fadein {
  webkit-animation: fadein 0.5s;
  -ms-animation: fadein 0.5s;
  animation: fadein 0.5s;
}
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@-webkit-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@-ms-keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@-webkit-keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@-ms-keyframes fadeout {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.archive {
	background: rgba(46, 56, 66);
	font-size: 14px;
	padding: 6px 4px 4px 0;
	margin: -4px auto;
    overflow-y: scroll;
}
p.archive {
	color : #fff;
}
.flex-container {
    display: flex;
    flex-wrap: wrap;
	justify-content: center;
    font-size: 0.9em;
    word-spacing: 1px;
}
.flex-container > div {
  width: auto;
  margin: 40px;
  text-align: center;
  font-size: 16px;
}
.flex-container > span {
  width: auto;
  margin: 40px;
  font-size: 16px;
}
.flex-container  .shaikh {
    border: 6px white solid;
	border-radius: 50%;
}
.flex-container  .hadit {
    border: 6px white solid;
	width: 200px;
	border-radius: non;
}
.flex-container  .maktaba {
	background-color:#1C2328;
    border: 6px white solid;
	width: 200px;
	padding: 10px 0;
	border-radius: non;
}
.floute {
  	animation: non;
  	transition: non;
  	transform: scale(1);
}
.arrow {
  	margin: -50px 0;
	padding-bottom: 100px;
  	transform: scale(1);
}
.note {
	color: #F10606;
    font-family: 'Cairo-SemiBold', sans-serif;
	font-size: 12px;
	padding-right: 10px;
}
.archive img {
	width: 40px;
	border-radius: 100px;
	float: right;
	margin-left: 30px;
	margin-top: -3px;
}
@media (max-width:767px){
   .basmala {
    width: 200px;}
}
@media (max-height: 1280px) {
  #shoyoukh {
    width: 100%;
    height: 1080px;
    text-align: right;
    margin-top: 10px;
    position: absolute;
    overflow: hidden;
        overflow-y: hidden;
	  overflow-y: scroll;}
}
@media (max-height: 1024px) {
  #shoyoukh {
    width: 100%;
    height: 840px;
    text-align: right;
    margin-top: 10px;
    position: absolute;
    overflow: hidden;
        overflow-y: hidden;
	  overflow-y: scroll;}
}
@media (max-height: 960px) {
  #shoyoukh {
    width: 100%;
    height: 780px;
    text-align: right;
    margin-top: 10px;
    position: absolute;
    overflow: hidden;
        overflow-y: hidden;
	  overflow-y: scroll;}
}
@media (max-height: 860px) {
  #shoyoukh {
    width: 100%;
    height: 640px;
    text-align: right;
    margin-top: 10px;
    position: absolute;
    overflow: hidden;
        overflow-y: hidden;
	  overflow-y: scroll;}
}
@media (max-height: 780px) {
  #shoyoukh {
    width: 100%;
    height: 560px;
    text-align: right;
    margin-top: 10px;
    position: absolute;
    overflow: hidden;
        overflow-y: hidden;
	  overflow-y: scroll;}
}
@media (max-height: 680px) {
  #shoyoukh {
    width: 100%;
    height: 460px;
    text-align: right;
    margin-top: 10px;
    position: absolute;
    overflow: hidden;
        overflow-y: hidden;
	  overflow-y: scroll;}
}
@media (max-height: 600px) {
  #shoyoukh {
    width: 100%;
    height: 420px;
    text-align: right;
    margin-top: 10px;
    position: absolute;
    overflow: hidden;
        overflow-y: hidden;
	  overflow-y: scroll;}
}
@media (max-height: 480px) {
  #shoyoukh {
    width: 100%;
    height: 480px;
    text-align: right;
    margin-top: 10px;
    position: absolute;
    overflow: hidden;
        overflow-y: hidden;
	  overflow-y: scroll;}
}
@media (max-height: 320px) {
  #shoyoukh {
    width: 100%;
    height: 320px;
    text-align: right;
    margin-top: 10px;
    position: absolute;
    overflow: hidden;
        overflow-y: hidden;
	  overflow-y: scroll;}
}