:root {
  --boxbg: rgba(126,126,126,0.2);
  --fontSize: 15px;
}




@keyFrames blink{
    from {transform: scale(1); box-shadow:0 0 10px rgba(0,0,0,0.35);}
    to {transform: scale(0.95); box-shadow:0 0 0 rgba(0,0,0,0);}
}.blink{animation-name:blink; animation-duration:1s; animation-iteration-count: infinite;}
.swell {animation-name:blink; animation-duration:1s; animation-iteration-count: infinite; animation-direction: alternate;}

    @keyFrames loadSpin{
        from {border-radius:100%; border:7px solid rgba(240,240,240,0.5); border-top:7px solid #220066; transform:rotate(0deg);}
        to {border-radius:100%; border:7px solid rgba(240,240,240,0.6); border-top:7px solid #110033; transform:rotate(360deg);}
    }.loadSpin {display:inline-block;  height:3em; width:3em; margin:1.5em; animation-name:loadSpin; animation-duration:1.5s; animation-iteration-count: infinite; background:none; overflow:hidden; gbackground-image:url("//pabpub.com/images/logos/roundicon.png"); background-size:cover; animation-timing-function: linear;}
    
@keyframes press_in{
  from {transform: scale(0.75); box-shadow: 0 0 0.3em rgba(125,125,125,.5) inset;}
  to {transform: scale(1); }
}.press_in:focus {animation-name:press_in; animation-duration:1s; }


@keyframes spin{
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}.spin, .h_spin:hover {animation-name:spin; animation-duration:1s;  animation-iteration-count: infinite;}

    @keyframes shake{
        from {transform: translateX(-10px);}
        to {transform: translateX(10px);}
        }.shake, .h_shake:hover {animation-name:shake; animation-duration:1s;  animation-iteration-count: infinite; animation-direction: alternate;}
    
    @keyframes swipe-right{
      from {transform: translateX(-10px);}
      to {transform: translateX(10px);}
    }.swipe-right, .swipe-right:hover {animation-name:swipe-right; animation-duration:1s;  animation-iteration-count: infinite; }
   
   
   
html {scroll-behavior: smooth}   

form table tr {padding:10px 5px}  
   
/* body, .body, .tempScreen {background:none; box-shadow:0 0 30px #999; width:46%;  pa100dding: 0 27%; margin:0 ; height:100vh; max-height:100%; overflow-y:auto; overflow-x:hidden;  font-family: "Open Sans", sans-serif; line-height:2em}*/

body {font-family: "Zain", sans-serif; font-size:var(--fontSize); font-weight:300; line-height:1em; word-wrap: break-word; width:100%; box-sizing:border-box;}

.body, .tempScreen {background:var(--background);  width:calc(50% - 85px);  margin: 0 25% 0 calc(25% + 85px); box-sizing:border-box; height:100vh; max-height:100%; overflow-y:auto; overflow-x:hidden;   }

h1,h2,h3,h4,h5 {margin:7px 0; line-height:110%;}

table {width:100%;}
    td {font-size:1em; text-align:inherit;  border-collapse: collapse;}
    .table td {border-bottom:1px dotted grey; padding:10px; border-radius:10px}

hr {opacity:0.3; border:1px dotted grey; margin:35px auto;}

iframe {width:100%; }

a {text-decoration:none; color:inherit;}

.tempScreen {position:fixed; top:0; left:0; overflow-y:auto;}
.tempScreen header {border-bottom:1px dotted rgba(125,125,125,0.5); background:var(--background); position:sticky; top:0}
.tempScreen header td {white-space:nowrap; overflow:hidden; padding:7.5px}
 .tempScreen header td h3 {font-weight:normal; opacity:0.8;  white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}
 
 
main, .main {}

aside, .aside, .profile {position:fixed; top:0;  width:25%; box-sizing:border-box; overflow-y:auto; overflow-x:hidden;}
.aside {right:0;}
.profile {left:85px;} 

body, .body, .tempScreen, .aside, .profile {background: var(--background); height:100vh; overflow-y:auto; font-size:20px; padding:5px 20px;}

 .popup {top:initial; bottom:10vh; border-radius:20px; height:auto; max-height:70vh; width:calc(40% - 85px); padding:10px;  margin: 0 30% 0 calc(30% + 85px);}


img {max-width:100%; max-height:100%;} 

input, select, button, textarea{
    width:100%; font-size:1em; padding:7px; border-radius:10px; border:1px solid grey; border:none; outline:none; background:var(--boxbg); color:inherit;   font-family: inherit;
}
input[type='checkbox'] {width:1em; height:1em;}
select option {background-color:#000; color:#fff;}

button, .btn, label, a {box-sizing:border-box; cursor:pointer; font-weight:bold; font-size:1em; background:none; width:auto; display:inline-block;}
    button:hover, .btn:hover{border:none; background-color:var(--boxbg); color:inherit}
    button.invert:hover, .btn.invert:hover {background:var(--background)} 
    button:focus {box-shadow:inset 1px 1px #999 10px; cursor:initial; animation-name:press_in; animation-duration:1s; }
.btn, .box2 {padding:6.5px 12px; margin:2px; border:2px solid var(--boxbg,grey); border-radius:20px; box-sizing:border-box;}
.btn2 {padding:7.5px 12px; margin:2px; border-bottom:5px solid var(--boxbg,grey);  box-sizing:border-box;}
.btn3, .smallBtn {display:inline-block; padding:2px 10px; margin:2px; border-radius:50px; box-sizing:border-box; background-color:var(--boxbg);}

.cursor, .pointer {cursor:pointer;}

.nowrap {white-space:nowrap;}

.parentFrameCarousel{overflow:hidden; position:relative; max-width:100%;}

/*.toggle {height:1.2em; width:3em; margin:5px; border:1px solid var(--boxbg,grey); background:var(--background); border-radius:20px;text-align:left; display:inline-block}
    .toggle.OFF {text-align:left;}
    .toggle.ON {text-align:right;}
    .toggleKnob {height:1.2em; width:1.2em; box-shadow:1px -1px 0 #999; border-radius:50%; background:var(--background); filter:invert(100%);  display:inline-block;}*/
    
    
.toc li {width:100%}
.toc a, .toc button {padding:10px; border-bottom:1px solid grey; display:block; width:100%; border-radius:0; text-align:left;}
.toc a:hover, .toc button:hover {animation-name:blink; animation-duration:1s;}

.background {background: var(--background);}
.invert {background:var(--background); color:inherit; filter:invert(100%)}

.boxbg {background-color:rgba(126,126,126,0.2);}
.box {background-color:rgba(126,126,126,0.2); padding:10px; border-radius:10px; box-sizing:border-box;}
.box2 {margin:15px 5px 15px; text-align:inherit;}

.date {display:none}

        /*COLORs*/
.red {background-color:red;  color:white;}
.green{background-color:green; color:white;}
.blue{background-color:blue; color:white;}
.yellow{background-color:yellow; color:black;}
.orange {background-color:orange; color:black;}
.cream {background-color:#ffdd00; color:black;}
.brown {background-color:brown; color:white; }

.outline {outline:1px solid grey;}


.banner{position:relative; overflow:visible; background:url("/images/banner.jpg"); background-size:cover; background-position: center center; Xheight:50vh;}
    .bannerInner{min-height:50vh; width:100%; padding:30vh 4% 0; box-sizing:border-box; }

.cover {background-size:cover; background-position: center;}


.margin, .margin10 {margin:10px;}
    .margin5 {margin:5px;} 
    .margin15 {margin:15px;} 
    .margin25 {margin:25px;} 

.p {margin:1em auto;}


.object {}
.object:hover {background:var(--boxbg)}
    .object img, .imageObject, .dp {border-radius:0.3em; overflow:hidden; background-size:cover; background-position:top center; box-shadow:5px 5px 10px rgba(0,0,0,.5);}
    .object.youtube  {margin:0; display:block; width:100%; max-width:100%; height:250px;}
        .object.youtube iframe {display:block; width:100%; height:100%}
    .dp, .userImage {border-radius:25%; height:5em; width:5em; background-color:rgba(125,125,125,0.3); background-size:cover; background-position:center 25%;   object-fit: cover;}
    .bookCover, .bookImage {border-radius:3px; height:7em; width:5em; background-size:100%;}


.div {padding-top: 3rem; padding-bottom: 2rem;}
    .d {padding-top: 3em; }
    
    .remove {width:1px; height:1px; opacity:0; position:fixed; top:0; left:-50vw;}
    
.l {text-align:left;}
.r {text-align:right;}
.c {text-align:center;}
.i {font-style:italic;}
.b {font-weight:bold;}
.u {text-decoration:underline;}
.small {font-size:0.8em;}
.big {font-size:1.25em;}
.largeText, .large {font-size:2.25em; line-height:2em; margin:1.5em 0.5em;}
.thin {font-weight:100;}
.normal {font-weight:normal;}
.faint {opacity:0.7;} .faint:hover {opacity:0.9;}
.shadow {box-shadow:0 5px 10px #999;}
    .h_shadow:hover, .f_shadow:focus{box-shadow:0 5px 10px #999;}
.thin-shadow {box-shadow:1px 1px 3px #999;}
    .h_thin-shadow:hover,.f_thin-shadow:focus  {box-shadow:1px 1px 3px #999;}
.rad10, .rad20{border-radius:10px; padding:0px 7px;}
    .h_rad10:hover, .f_rad10:focus{border-radius:10px;}
    .rad20{border-radius:20px;}

.w100, .w90, .w80, .w70, .w60, .w50, .w40, .w30, .w20, .w10 {display: inline-block; text-align:center;margin:auto; gvertical-align:top; box-sizing:border-box}
.w100 { width:100%; } .w90 {width:90%;} .w80 {width:80%;} .w70 {width:69%;} .w60 {width:58%;} .w50 {width:48%;} .w40 {width:38%;} .w30 {width:28%;} .w20 {width:20%;} .w10 {width:10%;}





 .navKeys {background:var(--background); z-index:50000; position:fixed; bottom:0; left:0; padding:5px; box-sizing:border-box; width:100%; border-top:1px dotted rgba(127,127,127,0.2); border-radius:10px 10px 0 0; text-align:center;}
     .navKeys button {display:inline-block; font-size:1em; text-align:center;margin:0 0; Xoutline:1px solid green}
        .navKeys button small {display:block; font-size:0.6em}


/*ICONS LIST*/

.icons, .icon { height:1.5em; width:1.5em;vertical-align:middle; cursor:pointer; background-size:contain; background-position:center center; background-repeat:no-repeat; outline-color:transparent; border-color:transparent; display:inline-block;}

    .account_circle {background-image:url("/images/icons/account_circle.png");}
    .add {background-image:url("/images/icons/add.png");}
    .add_user {background-image:url("/images/icons/add_user.png");}
    .add_a_photo, .add_image {background-image:url("/images/icons/add_a_photo.png");}
    .add_box {background-image:url("/images/icons/add_box.png");}
    .arrow_back, .arrow_left {background-image:url("/images/icons/arrow_back.png");}
    .arrow_forward, .arrow_right {background-image:url("/images/icons/arrow_forward.png");}
    .arrow_up {background-image:url("/images/icons/arrow_up.png");}
    .arrow_down {background-image:url("/images/icons/arrow_down.png");}
    .author {background-image:url("/images/icons/author.png");}
    .bar_chat {background-image:url("/images/icons/bar_chat.png");}
    .binge_read {background-image:url("/images/icons/binge_read.png");}
    .book {background-image:url("/images/icons/book.png");}
    .call {background-image:url("/images/icons/call.png");}
    .camera {background-image:url("/images/icons/camera.png");}
    .cart {background-image:url("/images/icons/cart.png");}
    .chat {background-image:url("/images/icons/chat.png");}
    .chart {background-image:url("/images/icons/bar_chat.png");}
    .chat_outline {background-image:url("/images/icons/chat_outline.png");}
    .check, .good {background-image:url("/images/icons/check.png");}
    .close {background-image:url("/images/icons/close.png");}
    .coin {background-image:url("/images/icons/coin.png");}
    .copy {background-image:url("/images/icons/copy.png");}
    .credit_card {background-image:url("/images/icons/credit_card.png");}
    .dashboard {background-image:url("/images/icons/dashboard.png");}
   .delete {background-image:url("/images/icons/delete.png");}
    .download {background-image:url("/images/icons/download.png");}
    .drop_down {background-image:url("/images/icons/drop_down.png");}
    .edit {background-image:url("/images/icons/edit.png");}
    .exit {background-image:url("/images/icons/exit.png");}
    .facebook {background-image:url("/images/icons/facebook.png");}
    .favorite, .heart {background-image:url("/images/icons/favorite.png");}
    .forum {background-image:url("/images/icons/forum.png");}
    .forward {background-image:url("/images/icons/forward.png");}
    .gif {background-image:url("/images/icons/gif.png");}
    .group, .community {background-image:url("/images/icons/group.png");}
    .home_outline {background-image:url("/images/icons/home_outline.png");}
    .image {background-image:url("/images/icons/image.png");}
    .info {background-image:url("/images/icons/info.png");}
    .like {background-image:url("/images/icons/like.png");}
    .liked {background-image:url("/images/icons/liked.png");}
    .mail {background-image:url("/images/icons/mail.png");}
    .menu {background-image:url("/images/icons/menu.png");}
    .message {background-image:url("/images/icons/message.png");}
    .minus, .hyphen {background-image:url("/images/icons/minus.png");}
    .more {background-image:url("/images/icons/more.png");}
    .more_horiz {background-image:url("/images/icons/more_horiz.png");}
    .notification {background-image:url("/images/icons/notification.png");}
    .payment {background-image:url("/images/icons/payment.png");}
    .person {background-image:url("/images/icons/person.png");}
    .piggy {background-image:url("/images/icons/piggy.png");}
    .refresh {background-image:url("/images/icons/refresh.png");}
    .searchIcon, .search {background-image:url("/images/icons/searchIcon.png");}
    .send {background-image:url("/images/icons/send.png");}
    .setting {background-image:url("/images/icons/setting.png");}
    .share {background-image:url("/images/icons/share.png");}
    .star {background-image:url("/images/icons/star.png");}
    .star_filled {background-image:url("/images/icons/star_filled.png");}
    .telegram {background-image:url("/images/icons/telegram.png");}
    .toggle_off {background-image:url("/images/icons/toggle_off.png");}
    .toggle_on {background-image:url("/images/icons/toggle_on.png");}
    .upload {background-image:url("/images/icons/upload.png");}
    .verified {background-image:url("/images/icons/verified.png");} 
    .view {background-image:url("/images/icons/view.png");} 
    .wallet {background-image:url("/images/icons/wallet.png");} 
     .whatsapp {background-image:url("/images/icons/whatsapp.png");} 
     .x {background-image:url("/images/icons/x.png");} 
     .youtube {background-image:url("/images/icons/youtube.png");} 
     


@media only screen and (min-width: 1200px){
    .aside, .profile {height:100vh; min-height:100vh;}
}

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

    ::-webkit-scrollbar {width: 7px; height:7px;}
    ::-webkit-scrollbar-track { background: #efefef; background:rgba(200,200,200,0); border-radius:7px;}
    ::-webkit-scrollbar-thumb {background: rgba(200,200,255,0.6); border-radius:7px; border:1px dotted grey;}
    ::-webkit-scrollbar-thumb:hover {background: #ccccee; } 
    ::-webkit-scrollbar:hover ::-webkit-scrollbar-thumb {background: #ccccee; }
    
       .navkeys {width:75px; height:100vh; padding:5px 5px; left:0; top:0; box-shadow:0 0 5px 5px rgba(25,25,25,0.5)}
        .navKeys button {margin-top:20px; width:100%}
        
    .hide_4Land {display:none}
    
    .aside {background-image:none}
    
    #reader_chapters {width:100%; box-sizing:border-box;  padding:20px 350px 20px 350px;}
    #readerParts {margin-left:350px; width:calc(100% - 700px); padding:10px 40px 50px; box-sizing:border-box;}
    #readerParts h1 {text-align:center; margin:20px auto;}
} 

@media only screen and (max-width: 1200px) {
    
      aside,.aside {position: static; width:100%; max-height:initial; min-height:initial; padding:0; height:initial; overflow-y:visible; Xbackground-color:red;}
      .profile {width:calc(35% - 85px); padding: 0 2%}
               
       .body, .tempScreen { width:65%;  margin: 0 0 0 30%; padding:0 2%; box-sizing:border-box;}
       
       .popup {padding:10px 10px 10px 10px;}
   
}


@media only screen and (max-width: 750px) {       
    #reader_chapters {width:100%; box-sizing:border-box;  padding:20px;}

    aside,.aside , .profile {position: static; width:100%; max-height:initial; padding:0 0; height:initial;}

     body, .body, .tempScreen { width:100%;  padding: 0 3% 100px; margin:0 ;}
     .wide, .tempScreen header {width:108%; margin-left:-4%;}
     .popup {max-width:90%; margin:5%; padding:10px 10px 10px 10px;}
     
     .navKeys {white-space:nowrap;}
    .navKeys button { width:19%; display:inline-block; font-size:0.8em}
        
    .hide_4Port {display:none;}
    
    .parentFrameCarousel{overflow:auto;}
}