@font-face { font-family: 'UTaha'; font-style: normal; font-weight: 400; font-display: swap; src: url(uth.woff2) format('woff2'); }
@font-face { font-family: 'uth-naskh'; font-style: normal; font-weight: 400; font-display: swap; src: local('KFGQPC Uthman Taha Naskh'),url(uth-naskh.woff2) format('woff2'); }
@-webkit-keyframes breathing { 0% { -webkit-transform: scale(0.9); transform: scale(0.9); } 25% { -webkit-transform: scale(1); transform: scale(1); } 60% { -webkit-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(0.9); transform: scale(0.9); } }
@keyframes breathing { 0% { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } 25% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } 60% { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } 100% { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } }
@font-face { font-family: 'qrnicons'; src: url('qrnicons.woff2') format('woff2'); font-weight: normal; font-style: normal; }
ico { color: #6c685f;vertical-align: middle; }
[class^="icon-"]:before, [class*=" icon-"]:before ,ico:before {
  font-family: "qrnicons";
  font-style: normal;
  font-weight: normal;
  speak: never;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  /* margin-right: .2em;
  margin-left: .2em; */
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
ico[pin2]:before,.icon-pin2:before { content: '\e800'; } /* '' */
ico[pin]:before,.icon-pin:before { content: '\e801'; } /* '' */
ico[menu]:before,.icon-menu:before { content: '\e802'; } /* '' */
ico[grid]:before,.icon-grid:before { content: '\e803'; } /* '' */
ico[light]:before,.icon-light:before { content: '\e804'; } /* '' */
ico[share]:before,.icon-share:before { content: '\e805'; } /* '' */
ico[share2]:before,.icon-share2:before { content: '\e806'; } /* '' */
ico[full]:before,.icon-full:before { content: '\e807'; } /* '' */
ico[close]:before,.icon-close:before { content: '\e808'; } /* '' */
ico[play]:before,.icon-play:before { content: '\e809'; } /* '' */
ico[stop]:before,.icon-stop:before { content: '\e80a'; } /* '' */
ico[pause]:before,.icon-pause:before { content: '\e80b'; } /* '' */
ico[forward]:before,.icon-forward:before { content: '\e80c'; } /* '' */
ico[rewind]:before,.icon-rewind:before { content: '\e80d'; } /* '' */
ico[bookmark]:before,.icon-bookmark:before { content: '\e80e'; } /* '' */
ico[book]:before,.icon-book:before { content: '\e80f'; } /* '' */
ico[book2]:before,.icon-book2:before { content: '\e810'; } /* '' */
ico[bookopen]:before,.icon-book-open:before { content: '\e811'; } /* '' */
ico[download]:before,.icon-download:before { content: '\e812'; } /* '' */
ico[search]:before,.icon-search:before { content: '\f50d'; } /* '' */

/* @font-face { font-family: 'BSML'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/QCF2BSML.woff2) format('woff2'); } */
bsmla{display: block;text-align: center;font-size: 5vh;line-height: 0.8; margin-top: -1%;}
bsmla::after{content: 'ó';}
html{display: table;width: 100%;height: 100%;scroll-behavior: smooth;}
html,body{ padding: 0;margin: 0;height: 100%;direction: rtl;font-family: 'UTaha';}
body{
  background: #e8dec9;
  /* background: url(../imgs/bg.svg) no-repeat center; */
  background-attachment: fixed;background-size: auto 80%;
  -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
  max-width: 100vw; margin: auto;
  /* display: table-cell; vertical-align: middle; */
  font-family: 'UTaha';
}
::selection { background-color: lightgreen; color: white; }
::-webkit-scrollbar { width: 3px;height: 3px;}
::-webkit-scrollbar-track { background:transparent; border: 0px solid white;}
::-webkit-scrollbar-thumb { -webkit-border-radius: 6px; border-radius: 6px; background: lightgreen; border: 0px solid white; }
::-webkit-scrollbar-thumb:window-inactive { background: rgba(0, 0, 0, 0.2); }
*{box-sizing: border-box;scroll-behavior: smooth;}
h1{margin: 10px; font-weight: normal;  }
header.main h1{margin: 0;display: inline-block;}
header.main{
  /* background: #38954e;
  box-shadow: 0 3px 8px -7px black; */
  margin: 0;
  padding: 5px;
  border-radius: 0 0 10px 10px;
  position: absolute;
  /* display: flex; */
  top: 0;left: 0; right: 0;
  width: 100%;
  z-index: 5;
  /* height: 99vh; */
  line-height: 1.2;
  font-size: 2vh;
}
header.main h1{width: 100%;margin: 0 5px; font-weight: normal; text-align: right;}
header.main *{font-size: 2vh !important;padding:2px;line-height:1;}
[hide],.hide{display: none;}
container { display: flex; align-items: center; width: 100vw; overflow-x:hidden;overflow-y:auto; margin: auto;height: 100%;}
main{
  display: block;
  margin: auto;
  max-width: 100vw;
  white-space: nowrap;
  padding: 0 7px 10vh !important;
  /* margin-bottom: 50px; */
  text-align: center;
}
page{
    text-align: center;
    /* display: inline-block; */
    display: flex;
    align-items: center;
    background: #fbf1dd;
    padding: 3.5vh 2vh 2vh;
    margin: 0 auto;
    box-shadow: 0 2px 4px -2px;
    position: relative;
    line-height: 5.5vh;
    font-size: 3.5vh;
    width: calc(90vh / 3 * 2);
    height: calc(90vh);
    z-index: 1;
    border-radius: 8px;
    vertical-align: top;
    font-family: 'UTaha';
    transition: transform 0.25s, background 0.25s;
    transition-timing-function: cubic-bezier(0.63, 0.28, 0.4, 0.71);
    /*,margin 0.25s;*/
}
page[right]{transform-origin: top left;position: absolute; left: 50%;z-index: 5;
  box-shadow: 0 2px 4px -2px , inset 10px 0 20px -10px rgba(0,0,0,.3);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  /* border-right: 1px solid rgb(72 148 24 / 46%); */
}
page[left]{transform-origin: top right;position: absolute; right: 50%;z-index: 6;
  box-shadow: 0 2px 4px -2px , inset -10px 0 20px -10px rgba(0,0,0,.3);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  /* border-left: 1px solid rgb(72 148 24 / 46%); */
}
.flipped[left]  {transform: rotateY(90deg) skew(0deg, 15deg) ; background-color: #b9b19f;}
.flipped[right] {transform: rotateY(90deg) skew(0deg, -15deg); background-color: #b9b19f;}
page.focused {z-index: 9 !important;}
page.hidden {z-index: 1 !important;margin-top: 2px;}
page.hidden[right]{
  background-color: #b9b19f;
  /* box-shadow: 0 2px 5px -7px, inset 300px 0 100px -100px rgba(0,0,0,.3); */
}
page.hidden[left]{
  background-color: #b9b19f;
  /* box-shadow: 0 2px 5px -7px, inset -300px 0 100px -100px rgba(0,0,0,.3); */
}
page inner{ display: block;text-align: center; font-kerning: none; white-space: normal;}
/* page inner:after { content: ""; display: inline-block; width: 100%; font-size: 1px; height: 0 !important; line-height: 0 !important; } */
page inner::before {
    content: '';
    display: block;
    position: absolute;
    width: auto;
    height: auto;
    top: 5.5vh;
    bottom: 3vh;
    right: 1vh;
    left: 1vh;
    border-radius: 3px;
    /* border: 1px solid darkseagreen; */
    box-sizing: border-box;
    z-index: -1;
}
.clear::after,[clear]::after,verse::after{content: '';display: block;clear: both;}
page::after{ display: block; text-align: center; content: attr(page); clear: both; font-size: 15px; position: absolute; bottom: 0;  line-height: 1.2;right: 15px; left: 15px;border-top: 1px solid #0002; }
swraname{display: block;/*overflow: hidden;*/padding: 0 5px 5px; border-radius: 3px; position: relative !IMPORTANT; line-height: 1.1; font-size: 80%;/*top: 9px;*/}
inner swraname:first-child{margin-top: 0;}
swraname::before {content: 'ò'; font-size: 7vh; position: absolute; right: 0; top: 1.5vh; color: #2d983a; display: block; width: 100%;}
swraname ayat { font-size: 60%; margin-right: 10px; }
page reward{ display: block;width:100%;font-size: 18px; text-align: center;white-space: pre-line; color: green; }
page note{ display: inline-block;float: left;font-size: 15px; text-align: left;white-space: pre-line; color: indianred; }
counter.done{opacity: .2;}
counter{
  display: block;
  float: right;
  background: lightgreen;
  padding: 10px;
  margin-left: 10px;
  transform: scale(1.1);
  height: 100%;
  font-size: 35px;
  line-height: 0.6;
  border-radius: 6px;
  color: white;
  cursor: pointer;
  text-align: center;
}
menu{
  margin: 0;
  padding: 15px;
  padding-top: 60px;
  padding-bottom: 70px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgb(232,221,196,0.79);
  z-index: 10;
  height: 100vh;
  overflow: auto;
  top: auto;
  transition: bottom 0.1s;
}
menu.hide {
    bottom: 100%;
    direction: ltr;
    margin-left: 0;
    text-align: right;
}
[close]{font-size:30px;line-height:1.3;font-weight:bold;padding:0 4px;}
menu close{display: inline-block; width: 30px; height: 30px; float: left;text-align: left;cursor: pointer;position: absolute; top: 0; left: 2vw; font-size: 33px;}
menu closebg{position: fixed; z-index: 0; top: 0; right: 0; left: 0px; bottom: 0;}
menu inner{z-index: 1; position: relative;}
goto,.goto {
  display: block;
  background: #fff6e4;
  padding: 5px;
  border-radius: 5px;
  margin-bottom: 5px;
  color: black;
  text-decoration: none;
}
goto:hover,.goto:hover{background: lightgreen;}
menu > a { font-size: 3vh; padding: 10px 12px !important; line-height: 1;font-weight: bold; }
menu > a ayat {float: left;font-size: 70%; line-height: 1.5; font-weight: normal;}
desc {
  margin: 0 20px;
  margin-top: -10px;
  display: block;
  text-align: justify;
  padding: 10px 5px;
  padding-top: 0;
  max-height: 24px;
  overflow: hidden;
  width: calc(100% - 40px);
  background: rgba(234, 234, 234, 0.4);
  position: relative;
  z-index: 0;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  white-space: pre-line;
  transition: max-height 0.1s ease-out;
}
desc.open{
  height: auto;
  max-height: 100vh;
  transition: max-height 0.2s ease-in;
}
desc::before{
  content: '...';
  display: block;
  text-align: center;
  line-height: 15px;
  height: 22px;
}
desc::after{
  content: '×';
  display: block;
  text-align: center;
  border-top: 1px dashed rgba(0,0,0,0.1);
  margin-bottom: -10px;
  margin-top: 10px;
}
loading{width: 30vh; height: 80vh; background: url(../../img/loading.svg) center no-repeat; background-size: contain; display: block; margin: auto;opacity: 0.5;}
tafseerloading{width: 100%; padding: 40px;text-align: center;display: block; margin: auto;opacity: 0.9;}
tafseerloading::before{ color:rgba(0,0,0,0.3);content:'\e810'; font-family: "qrnicons";font-size: 200%;display: block;-webkit-animation: breathing 0.5s ease-out infinite normal;animation: breathing 0.5s ease-out infinite normal;}
tafseerloading::after{content: 'جاري تحميل التفسير للمرة الأولى فقط .. لحظات من فضلك';}
button{background: lightgreen; border: 0; border-radius: 10px;font-size: 20px; padding: 0px 6px; line-height: 200%;}
.w100{width: 100%;} .fleft{float:left;} .fright{float:right;}
.logger{margin-top: 0;direction: ltr;}
share { float: left;font-size: 20px;white-space: nowrap;}
v{word-break: break-all;font-size: 3.505vh;}
/* v::after { content: attr(uthmanscript); display: inline;font-size: 3.5vh; } */
v:hover,v[active]{background: rgb(0 , 255 , 50 , 0.1); border-radius: 10px;}
v.labled{background: rgb(255 , 255 , 50 , 0.1); border-radius: 10px;}
v.labled::after { content: '\e801';font-family: "qrnicons"; display: inline-block; position: absolute; margin-right: -3.5vh; font-size: 1.5vh; margin-top: -1.5vh;filter: none;background: none;}
cover{width: 50vh;margin: 3vh auto !important; height: 40vh; background: url(../../img/logo.svg) center no-repeat; background-size: contain; display: block; margin: auto;}
goright, goleft {
  display: block; width: 40px;
  /* position: absolute; background: #f9f4ec; */
  font-size: 80px; line-height: 0.2; padding: 10px 0 19px; top: 50%;text-align: center;
  /* transform: translateY(-50%); */
  color: rgba(0,0,0,.5);z-index: 5;
  border-radius: 10px;
  /* box-shadow: 0px 1px 3px rgba(0,0,0,.3); */
  /* border-bottom: 3px solid #dcd5c9 !important; */
}
goright:hover, goleft:hover,goright:active, goleft:active {box-shadow: inset 0 0 10px 0 rgba(0,0,0,.1), 1px 1px 3px -2px rgba(0,0,0,.3);}
goright:active, goleft:active {box-shadow: inset 0 0 10px 0 rgba(0,0,0,.3), 1px 1px 3px -2px rgba(0,0,0,.3);border:0;margin-bottom:-3px; }
goright {right: 5px;} goleft  {left: 5px;}
goright::after {content: '‹';display: inline-block;margin: 6px 0;}
goleft::after  {content: '›';display: inline-block;margin: 6px 0;}
tpage { display: block; border-bottom: 1px solid #0002; position: absolute; top: 0; right: 15px;left:15px;padding: 10px 0 4px; }
flex{display: flex;flex:auto;}
juz{float: right;font-size:2vh;line-height:2vh;}
swratitle {float: left;font-size:2vh;line-height:2vh;}
page[right] juz{float: left;}
page[right] swratitle{float: right;}
formpage{display: flex;float:left;background:white;box-shadow: 0 0 3px rgba(0,0,0,0.5);padding:0 5px;border-radius:10px;z-index:5;height:100% !important;}
formpage input[type=number] {border: 0;outline: 0;width: 55px; font-size: 17px !important; font-family: inherit;background: transparent;}
header.main formpage botton { font-size: 70% !important; align-self: center;}
btn,.btn{border-radius: 100px; margin: 10px 0;padding: 7px 15px 15px; display: inline-block; border: 5px solid #f9f4ec; line-height: 1; box-shadow: 0 0 0 1px #000; font-size: 3vh;}
btn:hover,.btn:hover{background: #beddab;}
search,.popup {z-index: 999999; position: absolute; width: 100%; height: 100%; top: 0; right: 0; display: grid; align-items: center; padding: 0 25vw; background: rgb(232,221,196,0.9); place-content: center; gap: 10px;}
.popup c{font-size: 50px; position: fixed; right: 7px; top: 0px; line-height: 1;}
.popup > .btn{border: 0; box-shadow: 0 1px 3px rgb(0,0,0,0.30); border-radius: 10px; background: rgb(251 241 221 / 46%); text-align: center; font-size: 20px; padding: 8px; font-family: 'uth-naskh';color: inherit; text-decoration: none;}
.popup verse{
  width: 100%;
  background: #fbf1dd;
  box-shadow: 0 2px 4px -2px, inset 0 0 28px -10px rgba(0,0,0,.3);
  text-align:center;font-kerning:none;font-size:3.5vh;word-break:break-all;
  padding: 15px;
  border-radius: 10px;
  max-height: 80vh;
  overflow: auto;
}
.popup verse src,.popup verse copy,.popup verse share{font-size: 50%;float: left;margin-right: 15px;}
search.on {display: block;} search.off {display: none;}
searchbtn { display: inline-block; font-size: 3.5vh; text-align: center; padding: 1vh; line-height: 1;}
.searchinput { width: 100%;font-size: 3vh; display: block; border-radius: 8px; border: 0; background: rgba(255,255,255,.8); line-height: 4vh; font-family: inherit; padding: 5px 10px; }
result { display: block; background: #fff6e1; border-radius: 5px; padding: 10px; margin: 10px 0; box-shadow: 0 3px 4px rgba(0,0,0,.3), inset 0 -4px 15px rgba(0,0,0,.1); }
src{float: left;display: block;}
loading.start_up { position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 9999; background-color: rgba(232,222,201,0.9); width: 100%; height: 100%; background-size: 20vh; opacity: 1; }
searchdata{ max-height: 100vh; overflow: auto; display: block; padding: 0 10px;padding-bottom: 70px; }
opts > * { float: right; line-height: 1.2; padding: 0 10px 10px; }
page.cover{display: block !important;}
/* container{display: block;width: 100vw;overflow:auto;} */
/*Audio*/
audio{ padding: 0; width: 100%; border-radius: 0;height: 40px;}
audio:focus { outline: none; }
audio::-webkit-media-controls-panel{padding: 0;direction: rtl;height: 35px; border-radius: 0;}
audio::-webkit-media-controls-enclosure{background: transparent;border-radius:0;}
/* audio::-webkit-media-controls-play-button { height: 20px; } */
audio::-webkit-media-controls-mute-button{display: none;}
audio::-webkit-media-controls-timeline{padding: 0 5px;}
audio::-webkit-media-controls-volume-control-container{display: none;}
voptions { position: absolute; display: inline-block; background: #fbf1dd;transform: translate(50%,-100%); margin-right: -10px;min-width: 38px;border-radius: 10px;line-height: 2; font-size: 2vh; box-shadow: 0 2px 4px -2px, inset 0 0 10px 0 rgba(0,0,0,.3); }
voptions::after { content: ''; display: block; width: 0px; height: 0px; position: absolute; right: 50%; margin-right: -10px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 15px solid #dad1c0; filter: drop-shadow(0 2px 1px rgba(0,0,0,.4)); }
voptions a { display: block; padding: 4px 5px 10px; border-radius: 10px; line-height: 1; white-space: nowrap; }
voptions a:hover{background: rgb(45,152,58,0.2);}
footer{display:block;position: absolute; bottom: 0; width: 75%; left: 50%; transform: translateX(-50%);z-index: 10;padding: 0 20px;}
ranger{display: flex;position: relative;width: 100%;align-items: center;}
pager{display: flex; width: 100%;margin: 1.5vh 0; border-radius: 10px; position: relative;}
/*  background: rgb(211,196,172,0.59); box-shadow: inset 0 1px 3px 1px rgb(0,0,0,0.30); */
pageshownum{display: block; position: absolute; right: 50%; transform: translateX(50%); font-size: 30px; bottom: 75px; background: rgb(254, 228, 151); padding: 0 10px; border-radius: 5px; box-shadow: 0 2px 3px -2px;}
goleft,goright {z-index: 9999; top: auto; left: 5px; right: auto; bottom: 5px;font-size: 30px; padding: 6px 8px;transform: none;overflow: hidden;width: auto;line-height: 0 !important;}
player { position: fixed; bottom: 1px; display: flex; width: 96%; max-width: 600px; left: 50%; transform: translateX(-50%); background: #fbf1dd; border-radius: 10px 10px 0 0; box-shadow: 0 -1px 4px -3px #000; padding: 0 3px; height: 35px; zoom: 1.2; z-index: 99999999; }
tafseer{ display: block;clear: both; }
tafseer tab{ display: inline-block; font-size: 80%; padding: 0 5px 10px; background: rgba(0,0,0,.05); line-height: 1; border-radius: 10px;font-family: 'uth-naskh';}
tafseer tab.active{background:rgb(45,152,58,0.2); }
tafseer ttext { display: block; font-size: 70%; text-align: justify; line-height: 1.5;font-family: 'uth-naskh';word-break: break-word;padding-top: 10px;}
input[type=range]{-webkit-appearance: none; background: rgb(0 0 0 / 10%) !important; border-radius: 20px;}
input[type=range]::-webkit-slider-thumb {height: 20px; width: 20px; -webkit-appearance: none; background: #efa107; border-radius: 10px; color: #000; box-shadow: inset 0 0 4px -2px, 0 1px 2px -1px; margin-top: -8px;}
input[type=range]::-webkit-slider-runnable-track{/*background:#e0dbd2;*/height:3px;border-radius:10px;}
v::after{content:'';background:rgb(0 255 0 / 10%);display:inline-block;position:absolute;border-radius:100%;width:3vh;height:3vh;margin-right:-3vh;margin-top:2vh;filter:blur(2px);}
page[page='1'], page[page='2'] { padding: 9vh; }
page[page='1'] swraname::before, page[page='2'] swraname::before {margin: 1vh -4.5vh; font-size: 6.3vh;}
slider{display:block;white-space:nowrap;overflow:auto;}
alert{color: #fff; background: #aae486; padding: 5px 10px; display: inline-block; border-radius: 11px; box-shadow: 0 2px 4px 1px rgb(0 0 0 / 10%);}
togglehide{display: none;}
.menupop { width: 100%; display: flex; gap: 10px; flex-flow: column; }
.menupop a { display: block; width: 90vw; max-width: 300px; clear: both; background: #fafaee; border-radius: 10px; padding: 5px 10px; line-height: 1;text-decoration: none;color: inherit;}
.menupop a share {float: none;}
.introverses{font-family: 'QCF2537', 'UTaha';margin: 6vh; border: 1px solid #0002; padding: 1vh; border-radius: 10px; position: absolute; bottom: 0;}
copydone { position: fixed; bottom: 20px; right: 20px; z-index: 99999; background: #1ff360; border-radius: 7px; padding: 4px 15px; color: #fff; }
toggle { background: rgb(0 0 0 / 17%); display: inline; border-radius: 50px; display: inline-block; vertical-align: middle; margin-left: 3px; padding: 2px;transition: padding 0.2s ease; }
toggle::after { content: ''; display: block; width: 20px; height: 20px; background: rgb(95 87 68 / 76%); border-radius: 50px;}
toggle[status="on"]{ padding-left: 10px; }
toggle[status="off"]{ padding-right: 10px; }
@media (max-height:75vw) {
  menu{padding: 20px 20vw;padding-top: 60px;}
  #main{transform: none !important;height: 99vh; padding: 40px 0 !important;}
}
@media (min-height:75vw),(max-width:1000px) {
  .introverses{margin: 6vw;}
  togglehide{position: absolute; z-index: 10; border-radius: 0 0 5px 5px; padding: 2px 5px 2px 3px; top: 0; right: 50%; transform: translateX(50%); display: inline-block;
    /* background: #fbf1dd; box-shadow: 0 0 3px; font-size: 70%; */
  }
  v::after{width:5vw;height:5vw;margin-right:-5vw;margin-top:3vw;}
  footer{width: 98%;bottom:40px;}
  html,body{display: block;}
  cover{ width: 60vw; height: 80vw;}
  /* header.main,header.main *{font-size: 4vw !important;} */
  header.main{margin: 0 0.5%; padding: 5px; border-radius: 10px 10px 0 0; position: absolute;top:auto; bottom: 0; left: 0; right: 0; width: 99%; z-index: 9999999; line-height: 1.2; font-size: 2.5vh; background: #d7cebd; box-shadow: 0 -2px 2px rgb(0 0 0 / 20%);overflow: hidden;}
  main{position:relative;max-width:none;/*transition: padding 0.5s;*/}
  page{width: 100vw; height:153vw;line-height: 9vw;padding: 5.5vw 2.5vw 4.5vw;font-size: 5.5vw;}
  page::after{margin: 0;}
  v,.popup verse{font-size: 5.95vw;}
  /* goright {left:auto;right: 5px;} */
  /* loading { width: 50vw; height: 140vw; } */
  swraname::before{ font-size: 11.7vw;top: 3vw; }
  bsmla{ font-size: 7vw; }
  swratitle,juz{font-size: 4vw;line-height: 4vw;}
  search {padding: 0.5vh 2vw 0;}
  page.cover { position: fixed; right: 2vw; }
  search,.popup{padding: 10px;}
  voptions{font-size: 4vw;}
  /* pager{margin-bottom: 25px;background: transparent; box-shadow: none;} */
  /* #pager{opacity: 0.15;}
  #pager:active, #pager:hover, #pager:focus { opacity: 1; } */
  goleft, goright{display: none;}
   .flipped,.hidden{
    transform: none !important;
    background-color: #fbf1dd !important;
    margin-top: 0 !important;
  }
  page{
    position: relative !important;
    display: inline-flex !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    z-index: auto !important;
    background: #fbf1dd !important;
  }
  .hideall main#main{margin: 0px;padding: 0px 7px !important;}
  .hideall footer,.hideall header{display: none;}
  searchdata{ max-height: 90vh;}
  .hideall togglehide{opacity: 0.3;}
  page[page='1'], page[page='2'] { padding: 16vw; }
  page[page='1'] swraname::before, page[page='2'] swraname::before{margin:0 -8vw;font-size:10.5vw;}

}
@media (max-width:55vh) {
  /* main{margin: 0 !important; height: 99.6vh;} */
  page{
    top: calc( ( 100vh - 150vw ) / 2.1 );
    /* height: 170vw; line-height: 10vw; */
    height: 91vh;
    line-height: 5.5vh;
  }
}
fs{display: block;position: absolute; top: -7px; right: 50%; font-size: 20px;}
fsminus{display: block;position: absolute; top: -7px; right: 50%; font-size: 20px;margin-right: 50px;}
fsadd{display: block;position: absolute; top: -7px; right: 50%; font-size: 20px;margin-right: -50px;}
/* .dim{filter: invert(100%) sepia(0.2);} */
.dim{
  filter:invert(97%) hue-rotate(-70deg);
  body{background: #fffaee;color: #886;}
  input[type=range]{border-color: #fffaee}
  page{ box-shadow: 0 2px 4px -2px #fff; background: #f7eeda;}
  page[right] { box-shadow: 0 2px 4px -2px #fff, inset 10px 0 20px -10px #fff;}
  page[left] { box-shadow: 0 2px 4px -2px #fff, inset -10px 0 20px -10px #fff;}
  page.hidden[right]{ box-shadow: 0 2px 5px -7px #fff, inset 300px 0 100px -100px #fff;}
  page.hidden[left]{ box-shadow: 0 2px 5px -7px #fff, inset -300px 0 100px -100px #fff;}
  .flipped[left],.flipped[right]{background-color: #fff;}
  v.labled{background: #fbe6d4;}
}
/*Special Pages*/
/* [page="77"] v::after { font-size: 3.59633576vh; } */
/* page[page='1'] swraname, page[page='2'] swraname {font-size: 120%;} */
body.s_on::before { content: '☀'; display: block; width: auto; right: 0; left: 0; position: fixed; box-shadow: inset 0 6px 25px -19px #868686; height: 91px; text-align: left; color: rgba(0, 0, 0, 0.2); padding: 3px 7px; }