*:focus {
  outline: 0;
}
* {
  background-repeat: no-repeat;
}
a:link img,
a:visited img,
button,
img {
  border-style: none;
  background: 0;
}
a:link img,
a:visited,
a:active {
  border-style: none;
  outline: 0;
}
select:focus,
select::-moz-focus-inner,
button::-moz-focus-inner {
  outline: 0;
  border: 0;
}
ul,
ol,
li {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}
a {
  text-decoration: none;
  color: #a61b1b;
}
body {
  background: #e5e4df;
  margin: 0;
  padding: 0;
  fill: #07141f;
  font-family: verdana, sans-serif;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -webkit-print-color-adjust: exact;
}
div {
  display: block;
  opacity: 0;
  background-size: 100% 100%;
}
@media screen and (max-width: 1920px) {
  body {
    overflow: hidden;
  }
}
svg {
  overflow: visible;
}
.zero {
  opacity: 0;
  height: 0;
  z-index: 25;
}
.ace,
.ace0,
.ace1 {
  opacity: 1;
  z-index: 25;
}
#spread {
  z-index: 4;
}
section .large {
  position: relative;
  width: 64vw;
  top: 50vh;
  height: 50vw !important;
  margin-top: -25vw;
  margin-left: 18vw;
  z-index: 6;
  opacity: 1;
}
section .small {
  position: relative;
  width: 100vw;
  top: 50vh;
  height: 78vw !important;
  margin-top: -37.5vw;
  z-index: 6;
  opacity: 1;
}
@media screen and (max-height: 1180px) {
  section .large {
    margin-top: -25.7vw;
  }
}
@media screen and (min-width: 1921px) {
  section .large {
    margin-top: -12.5vw;
  }
}
li[class*="page_"] {
  position: relative;
  display: inline-block;
  background-size: 100% auto !important;
  z-index: 8;
}
div[id*="double_"],
#left,
#right {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 0.9s ease-in-out;
  -moz-transition: opacity 0.9s ease-in-out;
  -o-transition: opacity 0.9s ease-in-out;
  transition: opacity 0.9s ease-in-out;
}
div[id*="double_"] li[class*="page_"] {
  position: absolute;
  width: 32%;
  height: 70.9% !important;
  margin-top: 10%;
}
div[id*="double_"] li[class*="page_one"],
div[id*="double_"] li[class*="page_odd"] {
  right: 13.8%;
}
div[id*="double_"] li[class*="page_two"],
div[id*="double_"] li[class*="page_evn"] {
  left: 13.8%;
}
.large div[id*="double_"] {
  -webkit-transition: all 0.4s ease-out;
  -moz-transition: all 0.4s ease-out;
  -o-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}
.small div[id*="double_"] {
  -webkit-transition: all 0.4s ease-in;
  -moz-transition: all 0.4s ease-in;
  -o-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
}
#right,
#left {
  margin-top: 12.5%;
  height: 75% !important;
  width: 5vw !important;
  right: -12vw !important;
  z-index: 32;
}
#left {
  width: 3.5vw !important;
  left: -12vw !important;
}
#index {
  height: 100%;
  width: 5vw !important;
}
#index svg {
  height: 100%;
  overflow: visible !important;
}
#single {
  position: relative;
  width: inherit;
  margin-right: -28px;
  padding-right: 14px;
  overflow: auto;
  height: 100vh !important;
  background: #0a1d2c;
}
#single li[class*="page_"] {
  width: 100%;
  height: 180vw !important;
}
#credits {
  position: absolute;
  display: inline-block;
  width: 100%;
  -webkit-transition: opacity 0.9s ease-in-out;
  -moz-transition: opacity 0.9s ease-in-out;
  -o-transition: opacity 0.9s ease-in-out;
  transition: opacity 0.9s ease-in-out;
  opacity: 0;
  z-index: 4;
}
.runnig_header {
  fill: #e3aa75;
  stroke: none;
}
.rh {
  fill: #e3aa75;
  stroke: none;
}
.th {
  fill: #e2ab75;
}
.title_header {
  fill: #e2ab75;
}
.rasm {
  fill: #e2ab75;
}
.rasmb {
  fill: #0a1d2c;
  stroke: #0a1d2c;
  stroke-width: 0.1%;
}
.outlbgr {
  fill: #cccbcb;
  stroke: #cccbcb;
  stroke-width: 0.1%;
}
.loader,
.spinner {
  display: none;
  position: fixed;
  opacity: 1;
  bottom: 40px;
  left: 50%;
  margin-left: -16px;
  height: 32px;
  width: 32px;
  text-align: center;
  background-image: url("../img/loader.gif");
  background-size: 32px 32px;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 132;
}
.spinner {
  top: 40px;
}
@keyframes squeeze {
  50% {
    transform: none;
    animation-timing-function: ease-in;
  }
  59% {
    transform: translateY(3px);
  }
  100% {
    animation-timing-function: ease-out;
  }
}
.search {
  fill: #019eae;
}
.wsearch {
  fill: #019eae;
  -webkit-animation: flash linear 0.5s infinite;
  animation: flash flash 0.5s infinite;
}
@keyframes flash {
  0% {
    fill: red;
    opacity: 1;
  }
  50% {
    fill: #019eae;
    opacity: 0.1;
  }
  100% {
    fill: red;
    opacity: 1;
  }
}
svg g .bbsearch {
  background: #0d1b2b;
}
.ring3a {
  fill: #f2c288;
  stroke: #c05c42;
  stroke-width: 11.2;
  stroke-linejoin: round;
}
.ring3b {
  fill: #333445;
}
.ring2 {
  fill: #c45a3d;
  stroke: none;
}
.one_two {
  background-image: url("../svg/one_two.svgz") !important;
}
.odd_evn {
  background-image: url("../svg/odd_evn.svgz") !important;
}
.page_one {
  background-image: url("../svg/page_one.svgz") !important;
}
.page_two {
  background-image: url("../svg/page_two.svgz") !important;
}
.page_odd {
  background-image: url("../svg/page_odd.svgz") !important;
}
.page_evn {
  background-image: url("../svg/page_evn.svgz") !important;
}
#spread g[id*="ayn"]:hover {
  fill: #518dff;
}
#single svg g > g[id*="wnr"]:hover {
  fill: #82a2d1;
}
#single g > g > g:hover {
  fill: #518dff;
}
input[type="number"]:out-of-range {
  border-color: red;
}
.upg {
  margin: 80px;
  text-align: center;
  color: #5a5a5a;
  font-size: 20px;
  font-variant: small-caps;
}
html {
  height: 100%;
}
#splash {
  position: absolute;
  display: block;
  opacity: 0;
  background: #e5e4df;
  width: 387px;
  height: 112px;
  margin-left: -193px;
  margin-top: -56px;
  top: 50vh;
  left: 50%;
  padding: 0;
  z-index: 20;
  font-size: 60px;
  text-align: center;
}
#splash img[src$="png"] {
  width: 387px;
  height: 112px;
  background: transparent;
  pointer-events: none;
}
#exil,
#exir,
#arwns,
#arwps,
#uparr {
  position: fixed;
  display: block;
  opacity: 0;
  margin: 15px;
  width: 5%;
  top: 10px;
  height: 99%;
  z-index: 22;
}
#uparr {
  margin-top: 0;
  margin-left: 47.5%;
  opacity: 0;
  height: 3%;
}
#arwns,
#arwps {
  top: 50%;
  width: 3%;
  height: 3vh;
  margin-top: -3vh;
  z-index: 23;
}
#exil,
#arwns {
  left: 0;
}
#exir,
#arwps {
  right: 0;
}
#exil:hover {
  background: url("../svg/exit.svgz") no-repeat left top;
  background-size: 50%;
}
#exir:hover {
  background: url("../svg/exit.svgz") no-repeat right top;
  background-size: 50%;
}
#uparr {
  background: url("../svg/uparr.svg") no-repeat right top;
  background-size: 100%;
}
#uparr:hover {
  background: url("../svg/uparrh.svg") no-repeat right top;
  background-size: 100%;
}
.arrpage {
  fill: #f26839;
}
#next,
#prev {
  position: absolute;
  background-size: 25%;
  background-position: center;
  width: 3vw;
  height: 10% !important;
  margin-top: 35% !important;
  display: none;
  opacity: 1;
  z-index: 32;
}
#next {
  left: -4vw;
  background-image: url("../svg/next.svg");
}
#prev {
  right: -4vw;
  background-image: url("../svg/prev.svg");
}
#next:hover {
  background-image: url("../svg/nexth.svg");
}
#prev:hover {
  background-image: url("../svg/prevh.svg");
}
.large #arwns:hover {
  opacity: 1;
}
.large #arwps:hover {
  opacity: 1;
}
.small #arwns {
  left: 4%;
}
.small #arwps {
  right: 4%;
}
.large #arwns {
  opacity: 0;
}
.large #arwps {
  opacity: 0;
}
.small #next {
  left: 5vw;
  width: 6vw;
}
.small #prev {
  right: 5vw;
  width: 6vw;
}
.small #next:hover {
  background-image: url("../svg/nextd.svg");
}
.small #prev:hover {
  background-image: url("../svg/prevd.svg");
}
#pagenr,
#search,
#suraya,
#tri,
#dwl,
#upl,
#hdots,
#mimic,
#ring,
#azos {
  display: inherit;
  opacity: inherit;
  position: absolute;
  z-index: 32;
  margin: auto;
}
#hdots,
#mimic,
#azos {
  top: 80%;
  width: 130%;
  left: -12%;
  height: 6%;
  background-size: 100% auto !important;
  overflow: visible;
}
#mimic {
  top: 88%;
}
#azos {
  top: 95%;
  left: 10%;
  width: 80%;
  height: 5%;
}
.ring_flower,
.ring_number {
  background-position: center;
  background-size: 80%;
}
.ring_flower {
  background-image: url("../svg/ring_flower_dim.svg");
}
.ring_number {
  background-image: url("../svg/ring_number_dim.svg");
}
.ring_flower:hover {
  background-image: url("../svg/ring_flower.svg");
}
.ring_number:hover {
  background-image: url("../svg/ring_number.svg");
}
.hdots_on {
  background-image: url("../svg/dots_on.svg");
}
.hdots_off {
  background-image: url("../svg/dots_off.svg");
}
.hdots_3 {
  background-image: url("../svg/dots_3.svg");
}
.hdots_on:hover {
  background-image: url("../svg/dots_onh.svg");
}
.hdots_off:hover {
  background-image: url("../svg/dots_offh.svg");
}
.hdots_3:hover {
  background-image: url("../svg/dots_3h.svg");
}
.mimic_on {
  background-image: url("../svg/Mimicry_ON.svg");
}
.mimic_off {
  background-image: url("../svg/Mimicry_OFF.svg");
}
.mimic_on:hover {
  background-image: url("../svg/Mimicry_ONh.svg");
}
.mimic_off:hover {
  background-image: url("../svg/Mimicry_OFFh.svg");
}
.naskh_osmani {
  background-image: url("../svg/naskh_osmani.svg");
}
.naskh_azhar {
  background-image: url("../svg/naskh_azhar.svg");
}
.naskh_osmani:hover {
  background-image: url("../svg/naskh_osmani_h.svg");
}
.naskh_azhar:hover {
  background-image: url("../svg/naskh_azhar_h.svg");
}
#pagenr {
  top: 0;
}
#search {
  top: 3vw;
}
#suraya {
  top: 6vw;
}
#left input[type="text"] {
  width: 90%;
}
#pagenr,
#search,
#suraya {
  border-bottom: 0.19vw solid #274c90;
}
#pagenr:hover,
#search:hover,
#suraya:hover {
  border-bottom: 2px solid #fff;
}
#pagenr input[type="text"],
#search input[type="text"],
#suraya input[type="text"] {
  background: transparent;
  direction: RTL;
  unicode-bidi: embed;
  color: #2f57a7;
  font-size: 0.8vw;
  text-align: center;
  z-index: 32;
  padding-top: 0.3vw;
  border: 0;
  margin: 0;
  width: 100%;
  -moz-appearance: textfield;
}
#search input[type="text"] {
  width: 200%;
  margin-left: -50%;
}
#suraya {
  background-image: url("../svg/colon.svg");
}
#suraya input[type="text"] {
  width: 40% !important;
}
#surnr {
  float: left;
}
#ayanr {
  float: right;
}
#pagenr input[type="text"]:hover,
#pagenr input[type="text"]:focus,
#search input[type="text"]:hover,
#search input[type="text"]:focus,
#suraya input[type="text"]:hover,
#suraya input[type="text"]:focus {
  color: #fff;
}
#arwn,
#arwp {
  display: inherit;
  opacity: 0.0001;
  margin-top: 0;
  width: 14% !important;
  height: 1.3vw !important;
}
#arwn {
  float: left;
}
#arwp {
  float: right;
}
#arwn {
  background-image: url("../svg/arrow_word_next.svg");
}
#arwn:hover {
  background-image: url("../svg/arrow_word_nexth.svg");
}
#arwp {
  background-image: url("../svg/arrow_word_prev.svg");
}
#arwp:hover {
  background-image: url("../svg/arrow_word_prevh.svg");
}
#arwns {
  background: url("../svg/arrow_word_next.svg") no-repeat left top;
  background-size: 50%;
}
#arwps {
  background: url("../svg/arrow_word_prev.svg") no-repeat right top;
  background-size: 50%;
}
#ring {
  top: 61%;
  left: 16%;
  width: 2.3vw;
  height: 2.3vw;
}
#tri {
  top: 72%;
  left: 16%;
  height: 2.3vw;
  width: 2.3vw;
}
.tri {
  stroke: #3951ab;
  stroke-width: 0.5;
  fill: #02192b;
}
#dwl {
  top: 107%;
  left: 20%;
  width: 1vw;
  height: 1vw;
  background-image: url("../svg/dwl.svg");
}
#upl {
  top: 107%;
  left: 55%;
  width: 1vw;
  height: 1vw;
  background-image: url("../svg/upl.svg");
}
#dwl:hover {
  background-image: url("../svg/dwlo.svg");
}
#upl:hover {
  background-image: url("../svg/uplo.svg");
}
#upl input[type="file"] {
  width: 1vw;
  opacity: 0;
}
#rlin0,
#rlin1,
#rlin2,
#rlin3,
#about0,
#about1,
#about2,
#about3 {
  opacity: 0;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#about0 {
  opacity: 1;
}
#rlin0:hover,
#rlin1:hover,
#rlin2:hover,
#rlin3:hover {
  opacity: 1;
}
g .tri_1 {
  fill: #9a1c1f;
}
g .tri_2 {
  fill: #a47a2c;
}
g .tri_3 {
  fill: #3951ab;
}
g #tri_1:hover {
  fill: #9a1c1f;
}
g #tri_2:hover {
  fill: #a47a2c;
}
g #tri_3:hover {
  fill: #3951ab;
}
#tri_c {
  fill: #02192b;
  stroke-width: 0.6;
}
#tri_c:hover {
  stroke: #fff;
}
g[id*="jn"] {
  fill: #3056a5;
  stroke: none;
}
g[id*="jn"]:hover {
  fill: #fff;
}
g[id*="jn"]:active {
  fill: #f63;
}
g .selected {
  fill: #f63;
}
.selected {
  fill: #f63;
}
.disabled {
  opacity: 0.1;
}
#logo {
  position: absolute;
  display: inline-block;
  background-image: url("../img/logoho.png");
  width: 60px;
  height: 60px;
  top: 20px !important;
  left: 20px !important;
  z-index: 20;
  display: none;
}
#logo:hover {
  background-image: url("../img/logo.png");
}
#about {
  position: relative;
  display: inline-block;
  background-image: url("../svg/about.svgz");
  background-repeat: no-repeat;
  width: 100px;
  height: 20px;
  margin-top: 60px;
  opacity: 0.001;
  z-index: 20;
}
#about:hover {
  opacity: 1;
}
.rex {
  fill: #061d2e;
  stroke: none;
  opacity: 0.001;
}
.wsmenu {
  fill: #e3ab75;
  stroke: none;
}
.wsmenu_sel {
  fill: white;
  stroke: none;
}
.popcol {
  margin: 0;
  padding: 0;
  height: auto;
  width: 0;
  background-color: #143149;
  z-index: 100;
}
div[id*="ms_"],
#bbsearch {
  position: absolute;
  margin: 0;
  padding: 0;
}
.asel {
  fill: #019eae;
}
.wsel {
  fill: #019eae;
}
.bsel {
  fill: #518dff;
}
#menu ul,
#menu li {
  list-style: none;
  display: block;
  width: auto;
}
#menu li {
  position: relative;
  display: block;
  border-bottom: 1px outset #3257a6;
  border-right: 1px outset #3257a6;
  float: left;
  height: auto;
  background-color: #0c1d2b;
}
#menu li:hover {
  background: #143149;
  -o-transform: scale(1.02);
  -moz-transform: scale(1.02);
  -webkit-transform: scale(1.02);
  transform: scale(1.02);
  -o-transition: all 0.2s;
  -moz-transition: all 0.2s ease-out;
  -webkit-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
#menu .sel {
  background: #143149;
}
#menu .selo {
  background: #143149;
}
#menu .selx {
  background: #0c1d2b;
}
#menu .dim {
  background-color: #0c1d2b;
}
#menu .dim g {
  fill: #296596;
  opacity: 0.6;
}
#menu .dim:hover {
  background-color: #0c1d2b;
  -o-transform: scale(1);
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  -o-transition: all 0s;
  -moz-transition: all 0s ease-out;
  -webkit-transition: all 0s ease-out;
  transition: all 0s ease-out;
}
@media screen and (max-width: 1920px), screen and (max-height: 1200px) {
  #exir,
  #exil {
    min-width: 40px;
  }
}
@media print {
  #next,
  #prev,
  #arwns,
  #arwps,
  #exil,
  #exir,
  #about,
  #logo,
  #wicon,
  #right,
  #left,
  #index,
  #navi,
  #aya,
  #ayas {
    display: none !important;
  }
}
@media screen and (max-width: 800px) {
  #next,
  #prev,
  #arwns,
  #arwps,
  #exil,
  #exir,
  #about,
  #logo,
  #wicon,
  #right,
  #left,
  #index,
  #navi,
  #aya,
  #ayas {
    display: none !important;
  }
}