@font-face {font-family: pdms-saleem;src: url(/72cf872cab67fbef38cb9ff74974ea091c0c3c75/78850/fonts-arabic/pdms-saleem/pdms-saleem.woff2);
    font-weight: 400;font-style: normal;font-display: swap}

@font-face {font-family: Uthmani;src: url(../fonts/uthmanichafs1-ver09.woff);font-weight: 400;font-style: normal;font-display: swap;}

@font-face {font-family: fontawesome;src: url(../fonts/fontawesome-webfont.woff);font-weight: 400;font-style: normal;font-display: swap;}

@font-face {font-family: me_quran;src: url(../fonts/mequran.woff);font-weight: 400;font-style: normal;font-display: swap}

@font-face {font-family: Scheherazade;font-style: normal;font-weight: 400;
    src: url(/5f3b0c4c41ed3bdb6f960f179493d62cafe5309c/e0e20/fonts-arabic/scheherazade/scheherazade.woff);
    font-display: swap}

@font-face {font-family: 'Droid Arabic Naskh';font-style: normal;font-weight: 400;
    src: url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Regular.eot);
    src: url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Regular.eot?#iefix) format('embedded-opentype'),url(../fonts/DroidNaskh-Regular.woff2) format('woff2'),url(../fonts/DroidNaskh-Regular.woff) format('woff'),url(../fonts/DroidNaskh-Regular.ttf) format('truetype');
    font-display: swap}

@font-face {font-family: Hafs;font-style: normal;font-weight: 400;
    src: url(/1789548d2c89554a7438f8c2975af1638de4fd1d/90d21/fonts-arabic/uthmani-hafs/fontquran-2019.woff);
    font-display: swap}

@font-face {font-family: Kufi;font-style: normal;font-weight: 400;
    src: url(/639f5f8a9474a557f1e116890873823bdfadd51f/370f9/fonts-arabic/droid-kufi/droidkufi-regular.woff);
    font-display: swap}
@font-face {font-family: fontawesomea;
    src: url(../fonts/icomoon.eot);
    src: url(../fonts/icomoon.eot#iefix) format('embedded-opentype'),url(../fonts/icomoon.ttf) format('truetype'),url(../fonts/icomoon.woff) format('woff'),url(../fonts/icomoon.svg#icomoon) format('svg');
    font-weight: 400;font-style: normal;font-display: swap}

[class*=" icon-"],[class^=icon-] {font-family: icomoon!important;font-style: normal;font-weight: 400;font-variant: normal;text-transform: none;line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale}

.container1{height: 100%;display: flex;justify-content: center;align-items: center;}
.larger {font-size: 110%}
.not-visited {color: #1967d2}
.visited {color: #551a8b}
.selected {background-color: #3775dd;color: #fafafa}
html {overflow-y: scroll;overflow-x: hidden;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale}
.html-night {background-color: #000}
.html-day {background-color: #fff}

body {font-family: Roboto,sans-serif;padding: 0;margin: 0;}
.container {height: 100%}
.link {text-decoration: none;color: #1967d2}
.unselectable {-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none}
#header {background-color:#BEE5F2;position: fixed;width: 100%;top: 0;left: 0;right: 0;text-align: center;vertical-align: middle;padding: 0;-webkit-transform: translateZ(0);transform: translateZ(0);z-index: 1000;box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}
#header1 {background-color:#BEE5F2;position: fixed;width: 100%;top: 0;left: 0;right: 0;text-align: center;vertical-align: middle;padding: 0;-webkit-transform: translateZ(0);transform: translateZ(0);z-index: 1000;box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23)}
.header-button {padding-left: 3px;padding-right: 3px;font-size: 24px;color: #e0e0e0;display: inline-block;vertical-align: middle;cursor: pointer}
.header-button:hover {color: #fafafa}
.header-button:active {color: #fff}
.chapter-selector {font-size: 14px;font-family: "Droid Arabic Naskh",sans-serif}
.selector-in-settings {font-size: 14px;height: 30px;max-width: 150px;}
#chapter-select-button {border-left: 1px solid #ccc;border-right: 1px solid #ccc;display: inline-block;vertical-align: middle;padding-top: 10px;padding-bottom: 10px;padding-left: 8px;padding-right: 8px;margin-left: 3px;margin-right: 3px;width: 149px;height: 30px;cursor: pointer;position: relative;visibility: visible;}
#chapter-name-a {font-family: "Droid Arabic Naskh",sans-serif!important;font-size: 17px;line-height: 100%;color: #f8f8f8}
#chapter-name-e {font-size: 14px;line-height: 120%;color: #f8f8f8}
#chapter-number {font-size: 14px;line-height: 100%;color: #fff;position: absolute;left: 7px;visibility: visible;background-color: #00CC00;}
.caret {font-size: 14px;color: #eee;color: #ffd500;position: absolute;right: 7px;width: 200px;height: 30px;visibility: visible;}
.footer {background-color: #BEE5F2;position: fixed;width: 100%;bottom: 0;left: 0;text-align: center;vertical-align: middle;z-index: 1000;-webkit-transform: translateZ(0);transform: translateZ(0);padding-top: 8px;padding-bottom: 8px}
.footer-container {position: relative;margin-left: 10px;margin-right: 10px;text-align: center;vertical-align: middle}
.footer-button {color: #f8f8f8;position: absolute;left: 50px;top: -2px;font-size: 22px;color: #fff;display: inline-block;vertical-align: middle;cursor: pointer;padding: 5px;visibility: visible;}
.arrow-block {position: relative;color: #f8f8f8;margin-left: auto;margin-right: auto;display: inline-block;cursor: pointer}
.arrow-block-busy {color: #acacac}
.arrow-icon {font-size: 16px;vertical-align: middle;display: inline-block}
.arrow-label {vertical-align: middle;display: inline-block;font-size: 14px}
#prev-sura-button {display: inline-block;padding: 5px 3px 5px 3px}
#next-sura-button {display: inline-block;padding: 5px 3px 5px 3px}
#verse-select-button {position: relative;top: 1px;color: #ffd500;vertical-align: middle;cursor: pointer;padding: 3px 3px 3px 3px;border: 1px solid #fff;border-radius: 4px;min-width: 30px;font-size: 17px;font-weight: 700}
#verse-selector {position: relative;font-size: 14px;height: 25px;width: 60px;line-height: 25px;margin: 0;padding: 0;top: 0px;left: 10px;-webkit-appearance: menulist-text;cursor: pointer;visibility: visible}
.beta-version {color: #f8f8f8;position: absolute;top: 6px;right: 0;cursor: pointer;text-decoration: underline;font-size: 14px}
.select {font-size: 0}
#chapter-selector {font-size: 14px;line-height: 25px;-webkit-appearance: menulist-text;cursor: pointer;position: relative;top: 0;bottom: 0;left: 0;right: 0;margin-left: auto;margin-right: auto;visibility: visible;height: 25px;width: 100px}
.content {padding-top: 60px}
#spinner {position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 60px;height: 60px;margin-left: auto;margin-right: auto}
#title-bar {text-align: center}
.title {line-height: 60%;font-weight: 400}
.title-day {color: #1f4788}
.title-night {color: #4485c6}
.title-1 {font-size: 30px}
.title-2 {font-size: 30px}
#title-bar-b {padding-top: 10px;padding-bottom: 8px;text-align: center;display: none;font-family: "MS Serif","New York",serif;font-size: 25px}
.text {padding-top: 40px;padding-bottom: 10px}
.row {cursor: pointer;margin-left: auto;margin-right: auto}
.row-highlighted-day {background-color: #e6ffe6;-webkit-tap-highlight-color: #fff}
.row-highlighted-night {background-color: #1e1e1e;-webkit-tap-highlight-color: #181818}
.sen {display: inline-block;vertical-align: top;width: 100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;padding-top: 5px;padding-bottom: 5px}
.sen-a {font-size: 22px;border-right: 1px solid #e5ecf5;position: relative;left: 1px;padding-left: 10px;padding-right: 10px;text-align: justify;}
.sen-e {font-size: 14px;border-left: 1px solid #e5ecf5;padding-left: 10px;padding-right: 10px;text-align: justify;}
.line-height {line-height: 140%}
.sen-padding-columns {padding: 4px 8px 4px 8px}
.sen-padding-rows {padding: 4px 14px 4px 14px}
.sen-day {color: #000}
.sen-night {color: #000}
.sen-more-padding-top {padding-top: 12px}
.sen-more-padding-bottom {padding-bottom: 11px}
.modern-font {font-family: "Droid Arabic Naskh",serif!important}
.uthmani-font {font-family: Uthmani,serif!important}
.medina-quran-font {font-family: me_quran,serif!important}
.indo-pak-font {font-family: pdms-saleem,serif!important}
.scheherazade-font {font-family: Scheherazade,serif!important}
.system-font {font-family: system}
.kufi-font {font-family: Kufi}
.hafs-font {font-family: Hafs}
.span-a-aslinya {font-size: 22px !important;color: red;word-spacing: normal;font-family: Uthmani}
.span-a {font-size: 16px !important;font-family: 'LPMQ';font-weight: normal;font-style: normal;color: red;background-image: url('../img/ic-frame-number.svg');background-size: contain;background-repeat: no-repeat;background-position: center;display: inline-block;padding: 10px;margin-right: 10px;padding-left: 5px;padding-right: 10px;padding-top: 5px;padding-bottom: 5px;}
.bismillah, #sen-0-a {font-size: 22px !important;font-weight: 600;font-family: 'Uthmani';font-weight: normal;font-style: normal;color: black;
        background-image: url('../../../../img/sura-frame.png');
        background-size: contain;background-repeat: no-repeat;background-position: center;display: inline-block;padding: 10px;margin-right: 10px;padding-left: 30px;padding-right: 30px;padding-top: 0px;padding-bottom: 15px;text-align: center;}
.span-an {font-size: 22px;word-spacing: normal;font-family: Uthmani;direction:ltr;color: #f00;}
.span-e {font-size: 14px !important;word-spacing: normal;font-family: Roboto    }
.span-en {font-size: 14px  !important;word-spacing: normal;font-family: Kufi; color: red;}
.span-day {color: #3b6aa0}
.span-night {color: #3b6aa0}
.general-popup {position: relative;margin: 0 auto;background: #fff;color: #000;padding-top: 5px;padding-bottom: 15px;padding-left: 20px;padding-right: 15px;width: auto;max-width: 375px;border: solid 1px #aaa;border-radius: 5px;box-shadow: 0 5px 10px rgba(0,0,0,.1);font-size: 15px;line-height: 19px}
.contact-popup {padding: 25px 15px 20px 15px;box-shadow: 0 0 0 transparent}
.bookmarks-popup {position: relative;background: #fff;padding: 20px;max-width: 150px;border: solid 1px #888;border-radius: 5px}
#bookmarks-popup-container {min-height: 300px;margin-top: 15px}
#bookmarks-popup-description {padding-top: 5px;margin-bottom: 15px;display: block;}
.bookmarks-row {font-weight: 700;color: #555;border: solid 1px #ddd;border-radius: 5px;margin: 12px 2px 12px 2px;padding: 3px 5px 3px 5px;width: 82px;cursor: pointer}
.bookmarks-text {font-size: 17px;display: inline-block;padding: 4px 4px 4px 4px;color: #005999}
.bookmarks-delete {float: right;padding: 4px 4px 4px 4px;font-size: 22px}
.general-popup p {margin-top: .85em;margin-bottom: .85em}
.general-popup-close {-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;color: #fff;background-color: #777;font-size: 14px;padding: 5px 18px 5px 18px;margin: 0 0 10px 0;text-decoration: none;float: right;cursor: pointer}
.contact-popup-close {padding: 8px 18px 8px 18px;font-size: 16px}
.general-popup-title {font-size: 18px;font-weight: 700;color: #404040}
.options-popup {position: relative;background: #fff;padding: 10px 10px 20px 20px;max-width: 270px;margin: 20px auto;border: solid 1px #888;border-radius: 5px}
.options-form {box-sizing: border-box;background-color: #fff;margin: auto}
.form-row {margin-top: 10px;display: inline-block}
.form-row span {display: block;box-sizing: border-box;color: #940302;padding: 0 0 0 4px;font-weight: 700;font-size: 12px}
.options-form select {padding: 3px 3px}
.options-form select.comboboxenabled {position: relative;color: #000;width:70px;font-size: 14px;height: 25px;color: #000}
.combobox-surat {position: relative;color: #000;width: 100px;height: 25px;font-size: 14px;visibility: visible;font-size: 10pt;}
.combobox-ayat {position: relative;color: #000;width:70px;font-size: 14px;height: 25px;}
.combobox-qorry {position: relative;color: #000;width: 80px;height: 25px;font-size: 14px;height: 30px;}
.combobox-terj {position: relative;color: #000;width: 80px;height: 25px;font-size: 14px;}
.options-form select.comboboxdisabled {color: #999;position: relative;color: #000;width:70px;font-size: 14px;height: 25px;}
.options-form select.group1 {width: 230px;background-color: #f0f0f0;height: 25px}
.options-form select.group2 {width: 200px;background-color: #f0f0f0;height: 30px;position: relative;color: #000;font-size: 14px;line-height: 25px}
.options-form select.group3 {width: 140px;background-color: #f0f0f0;height: 25px}
.options-form input[type=checkbox] {padding: 10px}
.options-form-checkbox-wrapper {margin-left: 7px;display: inline}
.options-form label span {color: #5f5f5f;font-weight: 400}
.form-button {-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;color: #fff;font-size: 14px;padding: 6px 3px 6px 3px;text-decoration: none;margin-top: 5px;margin-right: 12px;cursor: pointer;display: inline-block;font-weight: 400;text-align: center}
.form-button-ok {background-color: #235de0;width: 60px}
.form-button-cancel {background-color: #777;width: 65px}
.form-button-group {display: inline-block;padding-top: 3px}
.panel-close {position: absolute;top: -25px;right: 10px;color: #777;font-size: 18px;font-family: verdana,sans-serif;font-weight: 700;  cursor: pointer}
.dropdown {position: absolute;z-index: 9999999;display: none}
.dropdown .dropdown-menu,.dropdown .dropdown-panel {min-width: 160px;max-width: 300px;list-style: none;background: #fff;border: solid 1px #ddd;border: solid 1px rgba(0,0,0,.2);border-radius: 6px;box-shadow: 0 2px 5px rgba(0,0,0,.2);overflow: visible;padding: 8px 6px;margin: 0;margin-top: 30px;font-size: 18px;text-decoration: none;color: #00f}
.dropdown .dropdown-panel {margin-top: 60px;padding-top: 25px;padding-bottom: 10px;width: 290px;background-color: #fffff8;top: 100px}
.dropdown.dropdown-tip {margin-top: 8px}
.dropdown.dropdown-tip:before {position: absolute;top: -6px;left: 9px;content: "";border-left: 7px solid transparent;border-right: 7px solid transparent;border-bottom: 7px solid #ccc;border-bottom-color: rgba(0,0,0,.2);display: inline-block}
.dropdown.dropdown-tip.dropdown-anchor-right:before {left: auto;right: 9px}
.dropdown.dropdown-tip:after {position: absolute;top: -5px;left: 10px;content: "";border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 6px solid #fff;display: inline-block}
.dropdown.dropdown-tip.dropdown-anchor-right:after {left: auto;right: 10px}
.dropdown.dropdown-scroll .dropdown-menu,.dropdown.dropdown-scroll .dropdown-panel {max-height: 358px;overflow: auto}
.dropdown .dropdown-menu LI {list-style: none;margin: 0;line-height: 18px}
.dropdown .dropdown-menu LABEL,.dropdown .dropdown-menu LI>A {display: block;color: #000;text-decoration: none;line-height: 24px;padding: 7px 10px;white-space: nowrap}
.dropdown .dropdown-menu LABEL:hover,.dropdown .dropdown-menu LI>A:hover {background-color: #08c;color: #fff;cursor: pointer}
.dropdown .dropdown-menu .dropdown-divider {font-size: 1px;border-top: solid 1px #e5e5e5;padding: 3px 3px;margin: 5px 0}
.dropdown .dropdown-menu .dropdown-label {font-style: italic;color: #940302;font-size: 18px;padding-top: 3px;padding-bottom: 0;padding-left: 3px;padding-right: 3px;margin: 5px 0}
.dropdown.has-icons LI>A {padding-left: 30px;background-position: 8px center;background-repeat: no-repeat}
.dropdown .undo A {background-image: url(icons/arrow-curve-180-left.png)}
.dropdown .redo A {background-image: url(icons/arrow-curve.png)}
.dropdown .cut A {background-image: url(icons/scissors.png)}
.dropdown .copy A {background-image: url(icons/document-copy.png)}
.dropdown .paste A {background-image: url(icons/clipboard.png)}
.dropdown .delete A {background-image: url(icons/cross-script.png)}

.mfp-bg {top: 0;left: 0;width: 100%;height: 100%;z-index: 1042;overflow: hidden;position: fixed;background: #0b0b0b;opacity: .4}
.mfp-wrap {top: 0;left: 0;width: 100%;height: 100%;z-index: 1043;position: fixed;outline: 0!important;backface-visibility: hidden;-webkit-backface-visibility: hidden}
.mfp-container {text-align: center;position: absolute;width: 100%;height: 100%;left: 0;top: 0;padding: 0 8px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}
.mfp-container:before {content: "";display: inline-block;height: 100%;vertical-align: middle}
.mfp-align-top .mfp-container:before {display: none}
.mfp-content {position: relative;display: inline-block;vertical-align: middle;margin: 0 auto;text-align: left;z-index: 1045}
.mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content {width: 100%;cursor: auto}
.mfp-ajax-cur {cursor: progress}
.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder .mfp-close {cursor: -moz-zoom-out;cursor: -webkit-zoom-out;cursor: zoom-out}
.mfp-zoom {cursor: pointer;cursor: -webkit-zoom-in;cursor: -moz-zoom-in;cursor: zoom-in}
.mfp-auto-cursor .mfp-content {cursor: auto}
.mfp-arrow,.mfp-close,.mfp-counter,.mfp-preloader {-webkit-user-select: none;-moz-user-select: none;user-select: none}
.mfp-loading.mfp-figure {display: none}
.mfp-hide {display: none!important}
.mfp-preloader {color: #ccc;position: absolute;top: 50%;width: auto;text-align: center;margin-top: -.8em;left: 8px;right: 8px;z-index: 1044}
.mfp-preloader a {color: #ccc}
.mfp-preloader a:hover {color: #fff}
.mfp-s-ready .mfp-preloader {display: none}
.mfp-s-error .mfp-content {display: none}
button.mfp-arrow,button.mfp-close {overflow: visible;cursor: pointer;background: 0 0;border: 0;-webkit-appearance: none;display: block;outline: 0;padding: 0;z-index: 1046;-webkit-box-shadow: none;box-shadow: none}
button::-moz-focus-inner {padding: 0;border: 0}
.mfp-close {width: 44px;height: 44px;line-height: 44px;position: absolute;right: 0;top: 0;text-decoration: none;text-align: center;opacity: .65;padding: 0 0 18px 10px;color: #fff;font-style: normal;font-size: 28px;font-family: Arial,Baskerville,monospace}
.mfp-close:focus,.mfp-close:hover {opacity: 1}
.mfp-close:active {top: 1px}
.mfp-close-btn-in .mfp-close {color: #333}
.mfp-iframe-holder .mfp-close,.mfp-image-holder .mfp-close {color: #fff;right: -6px;text-align: right;padding-right: 6px;width: 100%}
.mfp-counter {position: absolute;top: 0;right: 0;color: #ccc;font-size: 12px;line-height: 18px}
.mfp-arrow {position: absolute;opacity: .65;margin: 0;top: 50%;margin-top: -55px;padding: 0;width: 90px;height: 110px;-webkit-tap-highlight-color: transparent}
.mfp-arrow:active {margin-top: -54px}
.mfp-arrow:focus,.mfp-arrow:hover {opacity: 1}
.mfp-arrow .mfp-a,.mfp-arrow .mfp-b,.mfp-arrow:after,.mfp-arrow:before {content: "";display: block;width: 0;height: 0;position: absolute;left: 0;top: 0;margin-top: 35px;margin-left: 35px;border: medium inset transparent}
.mfp-arrow .mfp-a,.mfp-arrow:after {border-top-width: 13px;border-bottom-width: 13px;top: 8px}
.mfp-arrow .mfp-b,.mfp-arrow:before {border-top-width: 21px;border-bottom-width: 21px}
.mfp-arrow-left {left: 0}
.mfp-arrow-left .mfp-a,.mfp-arrow-left:after {border-right: 17px solid #fff;margin-left: 31px}
.mfp-arrow-left .mfp-b,.mfp-arrow-left:before {margin-left: 25px;border-right: 27px solid #3f3f3f}
.mfp-arrow-right {right: 0}
.mfp-arrow-right .mfp-a,.mfp-arrow-right:after {border-left: 17px solid #fff;margin-left: 39px}
.mfp-arrow-right .mfp-b,.mfp-arrow-right:before {border-left: 27px solid #3f3f3f}
.mfp-iframe-holder {padding-top: 40px;padding-bottom: 40px}
.mfp-iframe-holder .mfp-content {line-height: 0;width: 100%;max-width: 900px}
.mfp-iframe-holder .mfp-close {top: -40px}
.mfp-iframe-scaler {width: 100%;height: 0;overflow: hidden;padding-top: 56.25%}
.mfp-iframe-scaler iframe {position: absolute;display: block;top: 0;left: 0;width: 100%;height: 100%;box-shadow: 0 0 8px rgba(0,0,0,.6);background: #000}
img.mfp-img {width: auto;max-width: 100%;height: auto;display: block;line-height: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;box-sizing: border-box;padding: 40px 0 40px;margin: 0 auto}
.mfp-figure {line-height: 0}
.mfp-figure:after {content: "";position: absolute;left: 0;top: 40px;bottom: 40px;display: block;right: 0;width: auto;height: auto;z-index: -1;box-shadow: 0 0 8px rgba(0,0,0,.6);background: #444}
.mfp-figure small {color: #bdbdbd;display: block;font-size: 12px;line-height: 14px}
.mfp-figure figure {margin: 0}
.mfp-bottom-bar {margin-top: -36px;position: absolute;top: 100%;left: 0;width: 100%;cursor: auto}
.mfp-title {text-align: left;line-height: 18px;color: #f3f3f3;word-wrap: break-word;padding-right: 36px}
.mfp-image-holder .mfp-content {max-width: 100%}
.mfp-gallery .mfp-image-holder .mfp-figure {cursor: pointer}
.mfp-ie7 .mfp-img {padding: 0}
.mfp-ie7 .mfp-bottom-bar {width: 600px;left: 50%;margin-left: -300px;margin-top: 5px;padding-bottom: 5px}
.mfp-ie7 .mfp-container {padding: 0}
.mfp-ie7 .mfp-content {padding-top: 44px}
.mfp-ie7 .mfp-close {top: 0;right: 0;padding-top: 0}
.toast-container {position: absolute;width: 225px;z-index: 9999}
.toast-item {height: auto;background: #333;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;color: #eee;padding-top: 15px;padding-bottom: 15px;padding-left: 5px;padding-right: 5px;border: 2px solid #999;display: block;position: relative;margin: 0;font-family: Arial,sans-serif;font-size: 14px;opacity: .99}
.toast-item p {text-align: center}
.toast-item-close {width: 22px;height: 22px;position: absolute;top: 7px;right: 7px}
.toast-item-image {width: 32px;height: 32px;position: absolute;top: 50%;margin-top: -16px;left: 10px}
.toast-type-notice {color: #fff}
.toast-type-success {color: #fff}
.toast-type-warning {color: #fff;border-color: #fcbd57}
.toast-type-error {color: #fff;border-color: #b32b2b}
.toast-position-top-left {position: fixed;left: 20px;top: 20px}
.toast-position-top-center {position: fixed;top: 72px;left: 50%;margin-left: -112px}
.toast-position-top-right {position: fixed;top: 20px;right: 20px}
.toast-position-middle-left {position: fixed;left: 20px;top: 50%;margin-top: -40px}
.toast-position-middle-center {position: fixed;left: 50%;margin-left: -140px;margin-top: -40px;top: 50%}
.toast-position-middle-right {position: fixed;right: 20px;margin-left: -140px;margin-top: -40px;top: 50%}
.icon-search:before {content: "\e902"}
.icon-sphere:before {content: "\e900"}
.icon-earth:before {content: "\e901"}
.icon-volume-medium:before {font-family: "fontawesome";font-weight: 900;content: "\f04b";color:black}
.icon-arrow-right:before {content: "\e607"}
.icon-pause:before {font-family: "fontawesome";font-weight: 900;color:red;content: "\f04c";}
.icon-arrow-left:before {content: "\e608"}
.icon-download:before {content: "\e602"}
.icon-zoom-in:before {content: "\e603"}
.icon-text-height:before {content: "\e609"}
.icon-cog:before {content: "\e604"}
.icon-menu:before {content: "\e605"}
.icon-arrow-down:before {content: "\e606"}
.icon-arrow-down2:before {content: "\e60a"}

table{width:450px;align:center;box-shadow:0px 0px 5px #aaa;} /*sedikit bayangan yang soft*/
table tr{font-weight:bold;background:#BEE5F2; color:black;padding-top:3px;line-height:0px;   }
td{text-align:left; text-indent:10px; line-height:0px; background:#f7f7f7;padding:0px;}


@media only screen and (min-width: 700px) {
    #search-page {width:650px}
}

@media only screen and (min-width: 1100px) {
    #search-page {width:750px}
}

@media all and (max-width: 900px) {
    .mfp-arrow {-webkit-transform:scale(.75);transform: scale(.75)}
    .mfp-arrow-left {-webkit-transform-origin: 0;transform-origin: 0}
    .mfp-arrow-right {-webkit-transform-origin: 100%;transform-origin: 100%}
    .mfp-container {padding-left: 6px;padding-right: 6px}
}

@media screen and (max-width: 600px) and (orientation:landscape),screen and (max-height:300px) {
    .mfp-img-mobile .mfp-image-holder {padding-left:0;padding-right: 0}
    .mfp-img-mobile img.mfp-img {padding: 0}
    .mfp-img-mobile .mfp-figure:after {top: 0;bottom: 0}
    .mfp-img-mobile .mfp-figure small {display: inline;margin-left: 5px}
    .mfp-img-mobile .mfp-bottom-bar {background: rgba(0,0,0,.6);bottom: 0;margin: 0;top: auto;padding: 3px 5px;position: fixed;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}
    .mfp-img-mobile .mfp-bottom-bar:empty {padding: 0}
    .mfp-img-mobile .mfp-counter {right: 5px;top: 3px}
    .mfp-img-mobile .mfp-close {top: 0;right: 0;width: 35px;height: 35px;line-height: 35px;background: rgba(0,0,0,.6);position: fixed;text-align: center;padding: 0}
}
@media only screen and (min-width: 360px) {
    #header {text-align: left;}
    .footer-button {left:65px}
}

@media only screen and (min-width: 1100px) {
    .content {margin-left:5%;margin-right: 5%}
    .row-double {width: 80%}
    .row-single {width: 60%}
    .footer-container {margin-left: 15%;margin-right: 15%}
}

@media only screen and (min-width: 360px) {
    .header-button {margin-left:6px;margin-right: 6px}
}

@media only screen and (min-width: 480px) {
    .header-button {margin-left:12px;margin-right: 12px}
    #chapter-select-button {margin-left: 9px;margin-right: 9px;width: 182px}
    #chapter-name-a {font-size: 19px}
    #chapter-name-e {font-size: 18px}
    #chapter-number {font-size: 17px}
    .caret {font-size: 16px}
    #title-bar {padding-top: 5px}
    #title-bar-b {font-size: 27px;padding-top: 18px;padding-bottom: 8px}
    .text {padding-top: 10px;padding-bottom: 10px}
    .row-double {width: 100%}
    .row-single {width: 80%}
    #verse-select-button {font-size: 18px}
    .footer-container {margin-left: 2.5%;margin-right: 2.5%}
    #chapter-selector {height: 30px;width: 100px;background-color: #f8f8f8;top: 0}
}

@media only screen and (min-width: 360px) {
    #header {text-align: left;}
    .beta-version {font-size:16px}
}

@media only screen and (min-width: 360px) {
    #header {text-align: left;}
    .arrow-icon {font-size:18px}
}