@font-face {
    font-family: "Shabnam";
    src: url('../fonts/shabnam/Shabnam.eot');
    src: url('../fonts/shabnam/Shabnam.eot?#iefix') format('embedded-opentype'), url('../fonts/shabnam/Shabnam.woff2') format('woff2'), url('../fonts/shabnam/Shabnam.woff') format('woff'), url('../fonts/shabnam/Shabnam.ttf') format('truetype');
    font-weight: normal;
}

@font-face {
    font-family: "Shabnam";
    src: url('../fonts/shabnam/Shabnam-Bold.eot');
    src: url('../fonts/shabnam/Shabnam-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/shabnam/Shabnam-Bold.woff2') format('woff2'), url('../fonts/shabnam/Shabnam-Bold.woff') format('woff'), url('../fonts/shabnam/Shabnam-Bold.ttf') format('truetype');
    font-weight: bold;
}

@font-face {
    font-family: "Shabnam";
    src: url('../fonts/shabnam/Shabnam-Light.eot');
    src: url('../fonts/shabnam/Shabnam-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/shabnam/Shabnam-Light.woff2') format('woff2'), url('../fonts/shabnam/Shabnam-Light.woff') format('woff'), url('../fonts/shabnam/Shabnam-Light.ttf') format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: "Neyrizi";
    src: url("../fonts/neyrizi/Neirizi.eot"); /* IE9 Compat Modes */
    src: url("../fonts/neyrizi/Neirizi.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/neyrizi/Neirizi.otf") format("opentype"), /* Open Type Font */
    url("../fonts/neyrizi/Neirizi.svg") format("svg"), /* Legacy iOS */
    url("../fonts/neyrizi/Neirizi.ttf") format("truetype"), /* Safari, Android, iOS */
    url("../fonts/neyrizi/Neirizi.woff") format("woff"), /* Modern Browsers */
    url("../fonts/neyrizi/Neirizi.woff2") format("woff2"); /* Modern Browsers */
    font-weight: normal;
    font-style: normal;
}

body {
    direction: rtl;
    text-align: right;
    font-size: 13px;
    background-color: #f6f9ff;
}

    body:lang(fa) {
        font-family: "Shabnam", Tahoma, "DejaVu Sans", helvetica, arial, freesans, sans-serif;
    }

.header {
    background-color: #eff2f8;
}

.verse-text {
    font-family: "Neyrizi", Tahoma, "DejaVu Sans", helvetica, arial, freesans, sans-serif;
    font-size: 27px;
    color: #8a94b2 !important;
    line-height: 2.4;
    text-align: justify;
}

.verse {
    position: relative;
    padding: 10px 0;
    cursor: pointer;
}

    .verse::before {
        background-color: #ffffff;
        position: absolute;
        content: "";
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        transition: all 400ms;
        opacity: 0;
    }

    .verse:hover::before {
        opacity: 1;
    }

    .verse:active::before {
        opacity: 1;
        background-color: #eff2f8;
    }

    .verse.active::before {
        opacity: 1;
        background-color: #eff2f8;
    }

    .verse .container {
        margin-bottom: 0;
        padding: 15px;
    }

.list-inline-item:not(:last-child) {
    margin-left: .5rem;
    margin-right: auto;
}

.verse .list-inline a {
    color: #d6d6d5;
    text-decoration: none;
}

    .verse .list-inline a:hover {
        color: #4b5161;
    }

.verse-tools span {
    position: relative;
    margin-right: 25px;
}

    .verse-tools span a {
        color: #4b5161;
        text-decoration: none;
        padding: 0 5px;
    }

        .verse-tools span a::before {
            position: absolute;
            color: #d6d6d5;
            font-family: 'Font Awesome 5 Pro';
            font-weight: 300;
            content: "\f0d9";
            right: -10px;
            bottom: -5px;
            font-size: 18px;
        }

.translate-text {
    margin-bottom: 7px;
    color: #a6a6a6;
    line-height: 2;
    text-align: justify;
}

.verse:hover .verse-tools {
    opacity: 1;
}

.verse:hover .verse-text, .verse.active .verse-text {
    color: #4b5161;
}

.verse-tools {
    opacity: 0;
    transition: all 400ms;
}

.fa {
    font-size: 18px;
}

.header h2, .header h1 {
    color: #8a94b2;
    font-weight: 500;
}

.header i {
    color: #d6d6d5;
}

h2 {
    font-size: 14px;
}

h1 {
    font-size: 16px;
}

.header-logo {
    margin-left: 30px;
}

.header {
    background-color: #eff2f8;
}

#mainnavbars .nav-link {
    background-color: #ffffff;
    margin: 0 5px;
    border: 1px solid #d6d6d5;
    border-radius: 7px;
    color: #4b5161;
    height: 36px;
    text-align: center;
}

    #mainnavbars .nav-link.icon {
        width: 36px;
    }

.surah-name h3 {
    font-family: "Neyrizi", Tahoma, "DejaVu Sans", helvetica, arial, freesans, sans-serif;
    font-size: 27px;
    color: #8a94b2;
    display: inline;
}

.surah-name h4 {
    color: #4b5161;
    font-size: 18px;
}

.surah-name i {
    color: #d6d6d5;
    margin: 0 15px;
    font-size: 20px;
}

.surah-name a:hover i {
    color: #212529
}

.surah-info .card-header span {
    margin: 0 5px;
    color: #8a94b2;
}

.surah-info .card-header {
    background-color: #eff2f8;
}

.surah-info .share {
    color: #d6d6d5;
    position: absolute;
    left: 25px;
    bottom: 10px;
    z-index: 20;
}

.surah-info .card-text p {
    line-height: 2.2;
    display: flex;
    color: #8a94b2;
    overflow: hidden;
}

.surah-info .card-text span {
    margin: 0;
    font-weight: bold;
    color: #8a94b2;
}

.reader-tools i {
    color: #d6d6d5;
}

.reader-tools a {
    color: #8a94b2;
    text-decoration: none;
}

    .reader-tools a:hover i {
        color: #e4ca9e;
    }

.list-inline a, .list-inline label {
    color: #8a94b2;
    text-decoration: none;
}

.switch input {
    display: none;
}

.switch {
    display: inline-block;
    width: 30px;
    height: 13px;
    margin: 3px 8px;
    transform: translateY(50%);
    position: relative;
}

.radio-slider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 30px;
    box-shadow: 0 0 0 2px #d6d6d5, 0 0 4px #d6d6d5;
    cursor: pointer;
    border: 2px solid transparent;
    overflow: hidden;
    transition: .4s;
}

    .radio-slider:before {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background: #d6d6d5;
        border-radius: 30px;
        transform: translateX(-10px);
        transition: .4s;
    }

input:checked + .radio-slider:before {
    transform: translateX(10px);
    background: #e4ca9e;
}

input:checked + .radio-slider {
    box-shadow: 0 0 0 2px #e4ca9e,0 0 2px #e4ca9e;
}

.mitc {
    font-weight: 600;
}

    .mitc span:nth-child(1) {
        color: #fe860c;
    }

    .mitc span:nth-child(2) {
        color: #00b5d9;
    }

    .mitc span:nth-child(3) {
        color: #316e86;
    }

    .mitc span:nth-child(4) {
        color: #bf3500;
    }



.verse-number {
    font-family: "Shabnam", arial, freesans, sans-serif;
    color: #d6d6d5;
    margin: 0 5px;
    font-size: 20px;
}

    .verse-number:before {
        font-family: "Neyrizi", Tahoma, "DejaVu Sans", helvetica, arial, freesans, sans-serif;
        content: "\007B";
    }

    .verse-number:after {
        font-family: "Neyrizi", Tahoma, "DejaVu Sans", helvetica, arial, freesans, sans-serif;
        content: "\007D";
    }

.mediaplayer {
    direction: ltr;
}

.sections h4 {
    text-align: center;
    color: #8a94b2;
    font-size: 15px;
}

.wapper {
    min-height: 700px;
}

@media only screen and (max-width: 600px) {
    .verse-tools {
        opacity: 1;
    }
}

.mejs__time-rail {
    position: absolute !important;
    display: block;
    width: calc( 100% - 40px) !important;
    margin-top: 15px !important;
}

.mejs__container {
    background: unset !important;
}

.mejs__controls {
    display: table !important;
    background: unset !important;
}

.mejs__duration-container {
    float: right;
}

.mejs__currenttime-container {
    float: left;
}

.media-wrapper {
    background-color: #fff;
}

.mejs__time-total {
    background-color: #eff2f8 !important;
}

.mejs__time-current {
    background-color: #d6d6d5 !important;
}

.mejs__time-handle, .mejs__time-handle-content {
    border-color: #e4ca9e !important;
    border-radius: 50% !important;
    width: 18px !important;
    height: 18px !important;
    top: -8px;
    background: white;
}

.mejs__time-handle-content {
    left: -4px !important;
}

.mejs__time {
    color: #8a94b2 !important;
    font-family: "Shabnam", arial, freesans, sans-serif !important;
}

.btn-closePlayer {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #d6d6d5;
}
    .btn-closePlayer i:before, .btn-settins-groups i:before {
        color: #8a94b2;
    }

.btn-settins-groups {
    position: absolute;
    left: 10px;
    top: 10px;
    color: #d6d6d5;
}

    .btn-settins-groups a {
        color: #d6d6d5;
        padding: 5px;
    }

.btn:focus {
    box-shadow: unset !important;
}

.loading {
    position: fixed;
    right: 0;
    height: 100%;
    width: 100%;
    top: 0;
    bottom: 0;
    opacity: 0;
    content: "";
    background: #fff;
    z-index: 99999999;
    transition: opacity .2s cubic-bezier(.215,.61,.355,1) .1s;
    pointer-events: none;
}

.loader {
    color: #8a94b2;
    font-size: 60px;
    text-indent: -9999em;
    overflow: hidden;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    margin: 72px auto;
    position: relative;
    top: 40%;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
    animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}

@-webkit-keyframes load6 {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    5%, 95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    10%, 59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }

    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }

    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }

    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}

@keyframes load6 {
    0% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    5%, 95% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }

    10%, 59% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em;
    }

    20% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em;
    }

    38% {
        box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0.74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em;
    }

    100% {
        box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em;
    }
}

@-webkit-keyframes round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes round {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.modal-header .close {
    margin: -4rem -4rem -1rem auto;
}

.modal-header {
    border-bottom: unset;
}

.modal-footer {
    border-top: unset;
}

.sampleSettingFont p:nth-child(1) {
    font-family: "Neyrizi", Tahoma, "DejaVu Sans", helvetica, arial, freesans, sans-serif;
    font-size: 27px;
    color: #8a94b2;
    line-height: 2.4;
}

.sampleSettingFont p:nth-child(2), .sampleSettingFont p:nth-child(3) {
    font-family: "Shabnam", Tahoma, "DejaVu Sans", helvetica, arial, freesans, sans-serif;
    color: #a6a6a6;
    line-height: 2;
}

.slider-selection {
    background: #e4ca9e;
}

.slider-handle {
    background: #e4ca9e;
}

.translate-text:hover, .translate-text:active {
    /*color: #8a94b2;*/
    color: #4b5161;
}

.verse-text:hover {
    color: #4b5161 !important;
}

.custom-control {
    padding-left: 0;
    padding-right: 1.5rem;
}

.custom-control-label::before {
    left: auto;
    right: -2rem;
    background-color: #a6a6a6;
    top: 0.15rem;
}

.custom-control-label::after {
    right: -1.75rem;
    left: auto;
    top: calc(0.15rem + 2px) !important;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background: unset;
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: #e4ca9e;
    background-color: #e4ca9e;
}

.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    color: #fff;
    border-color: #e4ca9e;
    background-color: #e4ca9e;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: unset;
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #e4ca9e;
}

.player-container {
    bottom: 5px;
    width: 100%;
    position: absolute;
    bottom: 0;
}

body.nightMode, body.nightMode .header {
    background-color: #4b5161;
}

.sub-menu, footer {
    background-color: #fff;
}

body.nightMode .sub-menu {
    background-color: #404654;
}

body.nightMode #mainnavbars .nav-link {
    background-color: #404654;
    color: #d6d6d5;
}

body.nightMode .verse::before {
    background-color: #404654;
}

body.nightMode .verse:hover .verse-text, body.nightMode .verse.active .verse-text {
    color: #d6d6d5;
}

body.nightMode footer {
    background-color: #4b5161;
}

body.nightMode .surah-info .card-header {
    background-color: #8a94b2;
}

body.nightMode .surah-info .card-body {
    background-color: #404654;
}

body.nightMode .surah-info .card-text span, body.nightMode .surah-info .card-text p, body.nightMode .surah-name h4 {
    color: #a6a6a6;
}

body.nightMode .surah-info .card-header span {
    color: #4b5161;
}

body.nightMode .tafsir-text {
    color: #a6a6a6;
}

.tafsir-text {
    color: #8a94b2;
}

#section-estekhareh .nav-item:nth-child(2) {
    padding: 0 50px;
    text-align: center;
}

.nav-pills .nav-link {
    color: #d6d6d5;
    background-color: #fff;
    border: 1px solid #d6d6d5;
    padding: .5rem;
}

#section-estekhareh .nav-item a {
    width: 36px;
    height: 36px;
    margin-right: calc(50% - 18px);
    color: #d6d6d5;
}

#section-estekhareh .nav-item {
    position: relative;
    width: 175px;
}

    #section-estekhareh .nav-item span {
        margin-top: 7px;
        color: #d6d6d5;
        display: block;
        position: relative;
        text-align: center;
        width: 100%;
    }

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #4b5161 !important;
    background-color: #e4ca9e !important;
}

    .nav-pills .nav-link.active + span {
        color: #4b5161 !important;
    }

#section-estekhareh .nav-item:nth-child(2):after, #section-estekhareh .nav-item:nth-child(2):before {
    content: '|||||||||||||||||||||||||||||||';
    position: absolute;
    top: 10px;
    left: -50px;
    right: auto;
    color: #d6d6d5;
}

#section-estekhareh .nav-item:nth-child(2):before {
    right: -50px;
    left: auto;
}

#section-estekhareh h4 {
    color: #4b5161;
    font-size: 18px;
    text-align: center;
}

.notify {
    color: #e4ca9e;
    text-align: center;
    font-size: 18px;
}

#section-estekhareh p {
    line-height: 2;
}

#section-estekhareh .btn-secondary {
    color: #d6d6d5;
}

#es_Verse {
    font-family: "Neyrizi", Tahoma, "DejaVu Sans", helvetica, arial, freesans, sans-serif;
    font-size: 27px;
    color: #4b5161;
    line-height: 2.4;
    margin-bottom: 7px;
}

#step-2 p:nth-child(2) {
    font-size: 16px;
    color: #404654;
}

#step-2 p:nth-child(3) {
    color: #8a94b2;
    font-size: 18px;
    margin-bottom: 2px;
}

#step-2 p:nth-child(4) {
    color: #4b5161;
    font-size: 18px;
    margin-bottom: 2px;
}

#step-2 p:nth-child(5) {
    color: #e4ca9e;
    font-size: 15px;
    margin-bottom: 2px;
}

#fontGoToModal .modal-body {
    min-height: 300px;
}

.select2-results__options::-webkit-scrollbar {
    width: 16px;
    background-clip: padding-box;
}

.select2-results__options::-webkit-scrollbar-track {
    background-color: #F4F4F4;
    height: 8px;
    background-clip: padding-box;
    border-right: 10px solid rgba(0, 0, 0, 0);
    border-top: 10px solid rgba(0, 0, 0, 0);
    border-bottom: 10px solid rgba(0, 0, 0, 0);
}

.select2-results__options::-webkit-scrollbar-thumb {
    background-clip: padding-box;
    background-color: #0F2464;
    border-right: 10px solid rgba(0, 0, 0, 0);
    border-top: 10px solid rgba(0, 0, 0, 0);
    border-bottom: 10px solid rgba(0, 0, 0, 0);
}

.select2-results__options::-webkit-scrollbar-button {
    display: none;
}

.c-mask__handler::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    opacity: 1;
    /*bottom: 20px;
    height: 50px;*/
    z-index: 1;
}

.c-mask__handler.is-active {
    height: auto;
    transition: opacity .15s ease;
}

    .c-mask__handler.is-active::after {
        opacity: 0;
    }

.c-mask__handler {
    display: none;
    position: absolute;
    right: 0;
    left: 0;
    width: 100%;
    text-align: center;
    bottom: 0px;
    color: #d6d6d5 !important;
    cursor: pointer;
}

a:hover, a:active, a {
    text-decoration: none;
}

.js-mask__text {
    overflow: hidden;
}

#searchform .input-group > .input-group-prepend:not(:first-child) > .input-group-text {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

#bntSeach {
    color: #d6d6d5;
    background-color: #ffffff;
    border: 1px solid #d6d6d5;
    border-right: unset;
}

#searchform input::placeholder {
    color: #bec3ce;
    font-size: 14px;
}

#searchform .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #ffffff;
    border-left: unset;
    border-color: #d6d6d5;
    font-weight: 300;
}

.input-group-text {
    border: unset;
}

#searchform .form-control:focus {
    background-color: #fdfdfd;
    border-color: #e3e4eb;
    box-shadow: unset;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-image: unset;
}

.navbar .dropdown-toggle::after {
    display: none;
}

#mainnavbars .dropdown-menu {
    right: 0;
    left: auto;
}

#mainnavbars .dropdown-item {
    text-align: right;
}

.mejs__container {
    width: auto !important;
}

.reader-tools {
    background-color: #f6f9ff;
}

.nightMode .reader-tools {
    background-color: #4b5161;
}

.btn-miniPlay {
    background-color: #f6f9ff;
    border-color: #a6a6a6;
    box-shadow: 0px 0px 8px #8a94b2;
}

.ribbon-palyer {
    background-color: #eff2f8;
    height: 40px;
    position: relative;
    margin-top: 100px;
}

.nightMode .ribbon-palyer, .nightMode .media-wrapper {
    background-color: #404654;
}

#searchList a p, #favoritesList a p:first-child {
    color: #4b5161;
}

.nightMode #searchList a p, .nightMode #favoritesList a p:first-child {
    color: #a6a6a6;
}

.pagination .page-item {
    margin: 0 4px;
}

.page-link {
    background-color: #ffffff;
    color: #4b5161;
    border-radius: unset !important;
}

.page-item.disabled .page-link {
    color: #8a94b2;
    pointer-events: none;
    cursor: auto;
    background-color: #eff2f8;
    border-color: #eff2f8;
}

.page-item:last-child .page-link {
    background-color: #4b5161;
    color: #f6f9ff;
}

.reader-tools .active i {
    color: #e4ca9e;
}

.text-photo {
    position: absolute;
    top: 0;
    width: calc(100% - 30px);
}

    .text-photo .text-photo-ar {
        font-family: "Neyrizi", Tahoma, "DejaVu Sans", helvetica, arial, freesans, sans-serif;
        font-size: 22px;
    }

    .text-photo .text-photo-tr {
        font-family: "Shabnam", Tahoma, "DejaVu Sans", helvetica, arial, freesans, sans-serif;
        /*border-top: 1px solid #757575;*/
        font-size: 14px;
    }

.tab-pane .slider.slider-horizontal {
    width: 100%;
}

.img-mask {
    top: 0;
    position: absolute;
    z-index: 1;
}

.text-photo-text {
    z-index: 3;
    position: absolute;
    width: 100%;
}

.btn-color, .jscolor {
    min-width: 28px;
    min-height: 28px;
    border: 1px solid #d6d6d5;
}

.card-photo {
    overflow: hidden;
}

.js_ChangePhoto {
    z-index: 8;
}

.highlighted {
    background-color: #e4ca9e;
}

.fa-active {
    font-weight: 900;
}

.js_unfavorite {
    position: absolute;
    right: -20px;
    color: #a6a6a6;
}

.quran-text {
    margin-bottom: 70px;
    margin-top: 15px;
}

#mainnavbars .nav-item:hover .nav-link, .est:hover {
    background-color: #e4ca9e !important;
    color: #4b5161 !important;
    border-color: #e4ca9e !important;
}

    #mainnavbars .nav-item:hover .nav-link i {
        color: #4b5161;
    }

.js_GoToSura {
    cursor: pointer;
}

.btn-active {
    background-color: #e4ca9e;
    color: #4b5161;
    border-color: #e4ca9e;
}

    .btn-active i {
        color: #4b5161;
    }

    .btn-active:hover i {
        color: #d6d6d5;
    }

.dropdown-toggle::after {
    display: none;
}

.sub-btn-palyer {
    background-color: #4b5161;
    min-width: unset;
    padding: 5px;
}

    .sub-btn-palyer .dropdown-item {
        background-color: #fff;
        padding: 2px 15px;
        height: 1px;
        margin: 6px 0;
    }

        .sub-btn-palyer .dropdown-item.active {
            background-color: #e4ca9e !important;
        }

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(-0.35rem);
}

.est {
    background-color: #4b5161 !important;
    border-color: #4b5161 !important;
    color: #fff !important;
}

body.nightMode .est {
    border: 1px solid #d6d6d5 !important;
}

body.nightMode .verse .list-inline a:hover {
    color: #e4ca9e;
}

body.nightMode .verse-text:hover {
    color: #a6a6a6 !important;
}

body.nightMode .translate-text:hover, body.nightMode .translate-text:active {
    color: #a6a6a6;
}

.interpretation-text h1,
.interpretation-text h2,
.interpretation-text h3,
.interpretation-text h4,
.interpretation-text h5,
.interpretation-text h6,
.interpretation-text p {
    font-size: 15px;
    line-height: 2;
}

.verse-text, .translate-text {
    cursor: pointer;
}

.nightMode .modal-content {
    background-color: #404654;
}

    .nightMode .modal-content p, .nightMode .modal-content label {
        color: #e3e4eb;
    }

.nightMode .slider-track-high {
    background-color: #a6a6a6;
}

.nightMode .btn-outline-secondary {
    border-color: #4b5161;
}

.nightMode .custom-select, .nightMode .select2-container--default .select2-selection--single, .nightMode .select2-dropdown {
    background-color: #a6a6a6;
}

.nightMode .mejs__time-loaded {
    background-color: #939393;
}

.mejs__container {
    height: 22px !important;
}

.media-wrapper {
    border-radius: 12px;
}

    .media-wrapper .btn-download i,
    .media-wrapper .btn-nextSurah i,
    .media-wrapper .btn-nextVerse i,
    .media-wrapper .btn-play i,
    .media-wrapper .btn-perviousVerse i,
    .media-wrapper .btn-perviousSurah i,
    .media-wrapper .btn-volume i {
        font-size: 22px;
    }

.mejs__time-total, .mejs__time-buffering, .mejs__time-loaded, .mejs__time-current, .mejs__time-hovered, .mejs__time-float-current, .mejs__time-float-corner, .mejs__time-marker {
    height: 5px;
}

.mejs__controls {
    height: 20px !important;
}

.player-controls {
    z-index: 99;
}

.nightMode .btn-miniPlay {
    color: #e4ca9e;
    background-color: #4b5161;
}

.nightMode .est {
    background-color: #fff !important;
    border-color: #fff !important;
    color: #4b5161 !important;
}

.nightMode .nav-pills .nav-link.active + span {
    color: #e4ca9e !important;
}

.nightMode #section-estekhareh .btn-secondary {
    border-color: #d6d6d5;
    background-color: #404654;
    color: #e4ca9e
}

.btn-secondary:hover, .btn-outline-secondary:hover {
    background-color: #e4ca9e !important;
    color: #4b5161 !important;
    border-color: #e4ca9e !important;
}
    .btn-secondary i, .btn-outline-secondary i {
        color: #d6d6d5 !important;
        font-size:22px;
    }
.btn-secondary:hover > i, .btn-outline-secondary:hover > i {
    color: #4b5161 !important;
}
.btn-secondary {
    color: #e4ca9e;
    background-color: #4b5161;
    border-color: #4b5161;
    border-radius: 10px;
    margin-right:2px;
    margin-left:2px;
}

.btn-outline-secondary {
    color: #8a94b2;
    border-color: #d6d6d5;
    border-radius: 10px;
    margin-right: 2px;
    margin-left: 2px;
}
.nightMode .btn-secondary {
    border-color: #d6d6d5 !important;
    background-color: #404654;
}
.nightMode .btn-outline-secondary {
    border-color: #d6d6d5 !important;
}
.nightMode .player-container .btn-outline-secondary {
    background-color: #4b5161;
    border-color: #4b5161 !important;
}
.player-container .btn-outline-secondary {
    background-color: #f6f9ff;
    border-color: #f6f9ff !important;
}
.nightMode #section-estekhareh .text-black {
    color: #a6a6a6 !important;
}
.nightMode #section-estekhareh .text-black-50 {
    color: #8a94b2 !important;
}
.nightMode #es_Verse {
    color: #8a94b2 !important;
}
.nightMode #step-2 p:nth-child(2) {
    color: #8a94b2 !important;
}
.nightMode #step-2 p:nth-child(4) {
    color: #e4ca9e;
}
.nightMode #step-2 p:nth-child(5) {
    color: #a6a6a6;
}
.nightMode #section-estekhareh .nav-item a {
    background-color: #404654;
    color: #d6d6d5;
}
#section-estekhareh #step-1 p{
    font-size:16px;
}
.navbar-expand-lg .navbar-collapse{
    display:flex;
}
#mainnavbars.show .nav-item {
    display: inherit;
}
#mainnavbars.show {
    display: flex;
}