@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@200;400;500;600&display=swap');
@font-face {font-family: Shuba;src: url(../quran-fonts/uthmanic_shuba_v20.ttf)}
img {max-width: 100%;}
audio, canvas, video	{ display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls])	{ display: none; }
.scrollable-warp * {box-sizing: inherit;}
::-webkit-scrollbar {width: 10px;background: rgba(0, 0, 0, 0)}
::-webkit-scrollbar-track-piece {border-radius: 5px;background: rgba(0, 0, 0, 0)}
::-webkit-scrollbar-thumb {height: 30px;border-radius: 5px;background: rgba(0, 0, 0, 0)}
html {background-color: #f2f4f8;overflow-x: hidden;}
ol, ul {margin: 0;padding: 0;list-style: none;}
h1, h2, h3, h4, h5, h6 {line-height: 1.5;}
a {color: #007bff;text-decoration: none;}
a:hover,a:focus {color: #303437;text-decoration: none;}
label {font-weight: normal;}
small,.small {font-size: 13px;}
body {font-family: "Vazirmatn", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 14px;color: #252525;background-color: transparent;-webkit-font-smoothing: antialiased;line-height: 1.40;/* text-align: center; */}
.wrapper-lg {padding: 30px;}
.hide {display: none !important;}
#menu-right.nav {width: 100%;margin: 0;padding: 15px 0;}
#menu-right.nav li {width: 100%;position: relative;display: block;}
.visible-xs, .visible-sm, .visible-md, .visible-lg {display: none !important;}
.header.navbar {border-radius: 0;border: none;margin-bottom: 0;padding: 0;position: relative;z-index: 1000;background: #fff;/* display: none; */}
.bg-info {background-color: #4cb6cb;color: #eaf6f9;}
.navbar-header {position: relative;}
.navbar-header>.btn {position: absolute;font-size: 28px;padding: 13px 10px;line-height: 30px;right: 0;text-decoration: none !important;color: #262626;}
.bg-info a {color: #ffffff;}
.bg-info .text-lt {color: #ffffff !important;}
.font-thin {font-weight: 300;}
.bread-crums {background: #fff;padding: 12px 20px 8px 20px;margin-bottom: 20px;font-size: 14px;font-weight: 400;text-align: initial;border-radius: 2px;display: flex;align-items: center;}
.bread-crums-span {margin: 0 5px;}
.navbar-brand {float: none;text-align: center;font-size: 16px;font-weight: 600;height: auto;line-height: 50px;display: inline-block;/* padding: 0 20px; */}
.header-md .navbar-brand img {width: 31px;margin-left: 5px;}
.navbar-header .navbar-brand+.btn {right: 0;top: 0;left: auto;}
.navbar-nav-user {display: flex;flex-wrap: nowrap;flex-direction: row;}
.navbar-nav-user  {margin-left: 20px;}
.bg-dark.dk, .bg-dark .dk {background-color: #4d5d6e;}
.bg-dark {background-color: #5a6a7a;color: #c9d0d7;}
.nav-primary li>a>i {margin: -10px -10px;line-height: 38px;width: 38px;height: 38px;float: right;margin-left: 0px;text-align: center;position: relative;overflow: hidden;}
.nav-primary li>a>i:before {position: relative;z-index: 2;}
.nav-primary ul.nav>li>a {padding: 6px 15px;position: relative;-webkit-transition: background-color .2s ease-in-out 0s;transition: background-color .2s ease-in-out 0s;display: block;}
.no-borders .nav-primary ul.nav>li>a {border-width: 0 !important;}
.nav-primary ul.nav>li>a>.badge {font-size: 11px;padding: 2px 5px 2px 4px;margin-top: 2px;}
.nav-primary ul.nav>li>a>.text-muted {margin: 0 3px;}
.bg-dark .nav>li>a:hover, .bg-dark .nav>li>a:focus,
.bg-dark .nav>li.current>a {background-color: #62778c;}
.nav-primary ul.nav>li>a.active .text {display: none;}
.nav-primary ul.nav>li>a.active .text-active {display: inline-block !important;}
.nav-primary ul.nav>li li a {font-weight: normal;text-transform: none;}
.nav-primary ul.nav>li.active>ul {display: block;}
.nav-primary ul.nav ul {display: none;}
.bg-dark .nav>li>a {color: #d8dde2;}
.page-body {font-size: 16px;line-height: 1.8;}
.text-red {color: red;}
.bg-secondary {background-color: #fcfcfc !important;}
.scrollable {overflow-x: hidden;overflow-y: auto;}
.no-touch .scrollable.hover {overflow-y: hidden;}
.no-touch .scrollable.hover:hover {overflow: visible;overflow-y: auto;}
.text-info-lt {color: #60bed1;}
.text-success-lt {color: #1dcc74;}
.nav>li>a:hover, .nav>li>a:focus {background-color: #edf2f3;}
.warp-khatmat {height: 100%;position: relative;}
.ayah {-webkit-touch-callout: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;line-height: 183%;font-family: 'Shuba';font-size: 33px;margin-top: 5px;text-align: center;}
.ayah.select{color: #d22d3d;}
.page-number{font-size: 16px;}
.card-khatmat-home-warp {border-radius: 8px !important;box-shadow: 0 4px 16px 0 rgba(0,0,0,.14);border: 0;}
.card-khatmat-home-warp:hover {border-color: #4d5d6e;}
.card-khatmat-home {display: flex;justify-content: space-between;align-items: center;/* align-content: center; */flex-wrap: nowrap;}
.card-khatmat-home .icon {position: relative;padding-left: 0;}
.card-khatmat-home .icon i {position: absolute;top: -8px;left: 42px;font-size: 25px;background: #262626;color: #fff;padding: 5px;border-radius: 2px;opacity: 0.9;}
/*
* footer
*/
.footer {padding: 15px;background: #fff;text-align: center;min-height: 50px;}
.footer .social {position: relative;padding-bottom: 20px;text-align: center;margin-top: 8px;}
.social a {font-size: 16px;width: 32px;height: 32px;background: #fff;display: inline-flex;border-radius: 100%;color: #727272;border: 1px solid;-webkit-transition: .3s ease-in-out;-moz-transition: .3s ease-in-out;-o-transition: .3s ease-in-out;-ms-transition: .3s ease-in-out;transition: .3s ease-in-out;justify-content: center;align-items: center}
.social a:hover {color: #ffffff;}
.social a.facebook:hover {background: #3b5998;border-color: #3b5998;}
.social a.twitter:hover {background: #55acee;border-color: #55acee;}
.social a.youtube:hover {background: #ed302f;border-color: #ed302f;}
.social a.instagram:hover {background: #2e5e86;border-color: #2e5e86;}
.footer .copyright {font-size: 12px;color: #000c;font-weight: 500;}
/*
* pagination
*/
.pagination {display: table;margin: 20px auto}
.pagination a,.pagination span {float: left;font-size: 15px;padding: 0 5px;min-width: 32px;font-weight: 100;height: 42px;line-height: 45px;text-transform: capitalize;transition: .3s;position: relative;border-radius: 0;background-color: #4d5d6e;color: #fff;}
.pagination i{font-size: 13px}
.pagination .active span {color: #fff;background: #0dcaf0;}
.pagination a:hover {background: #0dcaf0;}
.pagination li {display: inline-block;text-align: center}
.khatmat-status-count .count {padding: 4px 0 1px 0;width: 35px;display: inline-flex;align-items: center;justify-content: center;border-radius: 2px;}
.border-khatmat {border: 3px solid #f2f4f8;border-width: 2px 4px;}
.bg-raed-default {background: #F1F3F7;color: #262626;}
.bg-raed-dark {background: #262626;color: #ffffff;}
.bg-raed-blue {background: #E3F0FF;color: #262626;}
.bg-raed-red {background: #FFE8E8;color: #262626;}
.bg-raed-green {background: #F0FFEB;color: #262626;}
.bg-raed-orange {background: #FFECC9;color: #262626;}
.mw-300px {width: 94%;max-width: 300px;}
.mw-350px {width: 94%;max-width: 350px;}
.mw-400px {width: 94%;max-width: 400px;}
.mw-500px {width: 94%;max-width: 500px;}
.mw-600px {width: 94%;max-width: 600px;}
.mw-700px {width: 94%;max-width: 700px;}
.mw-900px {width: 94%;max-width: 900px;}
.max-w-100px {max-width: 100px;}
.max-w-120px {max-width: 120px;}
.max-w-140px {max-width: 140px;}
.max-w-160px {max-width: 160px;}
.max-w-180px {max-width: 180px;}
.max-w-200px {max-width: 200px;}
.max-w-300px {max-width: 300px;}
.fs-12 {font-size: 12px;}
.fs-13 {font-size: 13px;}
.fs-16 {font-size: 16px;}
.fs-18 {font-size: 18px;}
.fs-21 {font-size: 21px;}
.fs-42 {font-size: 42px !important;}
.bg-red {background-color: #ff6370;color: #fff;}
.bg-green {background-color: #8dcd81;color: #fff;}
.bg-yellow {background-color: #ffc107;color: #fff;}
.bg-lighten { background-color: rgba(248, 249, 250, 0.5)!important;}
.modal-body .admin-tools .btn-adtlsact {border: 3px solid #ccc;}
.modal-body .admin-tools .bg-red, 
.modal-body .admin-tools .bg-red:hover, 
.modal-body .admin-tools .bg-red:focus {background-color: #ff6370;border-color: #ff6370;color: #fff;}
.modal-body .admin-tools .bg-green, 
.modal-body .admin-tools .bg-green:hover, 
.modal-body .admin-tools .bg-green:focus  {background-color: #8dcd81;border-color: #8dcd81;color: #fff;}
.modal-body .admin-tools .bg-yellow, 
.modal-body .admin-tools .bg-yellow:hover, 
.modal-body .admin-tools .bg-yellow:focus  {background-color: #ffc107;border-color: #ffc107;color: #fff;}
.modal-body .admin-tools .btn-adtlsact.active {border-color: #262626;}
.bg-progress{background-color: #ffc107;-webkit-animation-name: progress;animation-name: progress;-webkit-animation-duration: 1.2s;animation-duration: 1.2s;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite}
.khatmat-read-tools, .khatmat-read-page {display: flex;justify-content: center;flex-wrap: nowrap;align-items: center;}
.khatmat-read-tools>li, .khatmat-read-page>li {position: relative;margin: 0 2px;padding: 0;display: flex;align-items: center;background: #475363;height: 30px;min-width: 30px;border-radius: 2px;justify-content: center;cursor: pointer;color: #fff;}
.khatmat-read-tools>li:hover, .khatmat-read-page>li:hover {background: #29303a;}
.khatmat-read-tools>li.disabled {pointer-events:none;opacity:0.5; }
.khatmat-read-tools>li img {width: 21px;}
.custom-tooltip {--bs-tooltip-bg: var(--bs-black);}
.scrollable-warp {bottom: 60px !important;}
.warp-mode-read {position: absolute;display: flex;border: 1px solid #ccc;right: 0;bottom: 40px;}
.warp-mode-read li {width: 40px;height: 40px;background: #fff;border-left: 1px solid #ccc;}
.warp-mode-read li:last-child {border:0}
.warp-mode-read li.mode-default {background: #F1F3F7;}
.warp-mode-read li.mode-dark {background: #262626;}
.warp-mode-read li.mode-blue {background: #E3F0FF;}
.warp-mode-read li.mode-red {background: #FFE8E8;}
.warp-mode-read li.mode-green {background: #F0FFEB;}
.warp-mode-read li.mode-orange {background: #FFECC9;}
.khatmat-head-search {display: flex;margin-bottom: 30px;justify-content: space-between;flex-direction: row;align-items: center;}
.khatmat-head-search>div{flex: 1}
.khatmat-head-search .form-control,
.khatmat-head-search button {border-radius: 0;}
.modal-content{border-radius: 2px;}
.modal-header{padding: 8px 15px;}
.modal-header .btn-close{margin: 0;font-size: 10px;}
.lf-modal .modal-body i {font-size: 27px;}
.lf-modal  .modal-title {font-size: 18px;color: #333;margin: 0;}
.lf-modal .modal-body p {font-size: 14px;font-weight: normal;}
.lf-modal .modal-footer {justify-content: space-between}
.lf-modal .btn {border-radius: 2px;}
.lf-modal .btn i {padding-right: 4px;}
.lf-modal .fa-exclamation-triangle,
.lf-modal.lf-warning h3 {color: #d64541;}
.lf-modal.lf-warning .modal-body span {opacity: 0.9;}
.form-control,.alert,
.btn, .card {border-radius: 2px;}
.card-mw-350 {max-width: 350px;}
.card-mw-400 {max-width: 400px;}
.card-mw-600 {max-width: 600px;}
.card-header:first-child{border-radius: 2px 2px 0 0;text-align: center;padding: 14px;font-size: 21px;}
.form-label {font-size: 16px;margin-bottom: 5px;}
.box-singup {text-align: center;margin-top: 20px;font-size: 16px;}
.social-login {margin-bottom: 20px;border-bottom: 1px solid #e4e4e4;padding-bottom: 20px;text-align: center;}
.social-login a {border: 0;height: 42px;width: 52px;align-content: center;justify-content: center;margin: 0;display: inline-flex;align-items: center;background: #f0f0f0;}
.alert {padding: 10px 15px;}
.favourite-modal, 
.button-modal,
.disable-modal,
.enable-modal,
.delete-modal {cursor: pointer;border-radius: 2px;background: #007bff;color: #fff;display: inline-flex;align-items: center;padding: 0 8px;height: 28px;line-height: 1;opacity: 0.8;}
.favourite-modal {background: #fff;color: #262626}
.enable-modal {background: #1dcc74;color: #fff;}
.disable-modal,
.delete-modal,
.favourite-modal.active {background: #ff6370;color: #fff;}
.enable-modal i,
.favourite-modal i,
.disable-modal i,
.delete-modal i,
.button-modal i {margin-left: 3px;}
.favourite-modal:hover,
.button-modal:hover {opacity: 1;}
.badge {border-radius: 2px;font-size: 12px;font-weight: 400;}
.text-orange {color: orange;}
.box-single-read-title {padding: 15px;text-align: center;background: #4D5D6E;color: #ffffff;}
.badge-reading {background: #007bff;color: #fff;border-radius: 2px;text-align: center;display: inline-block;padding: 4px 8px 0 8px;margin-right: 3px;}
.create-other-options {display: flex;align-items: center;justify-content: space-between;align-content: center;flex-wrap: nowrap;margin: 0 0 5px 0;padding: 5px 0;border-bottom: 1px solid #dee2e6;}
.create-other-options:last-child{border: 0;}
.khatmat-single a {color: #fff;height: 100%;display: inline-flex;align-content: center;flex-direction: column;justify-content: center;}
.form-control:focus,
.form-select:focus{box-shadow: none;}
.btn-select-title {display: block;width: 42px;font-size: 1rem;font-weight: 400;line-height: 1.5;background-color: #dee2e6;background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");background-repeat: no-repeat;background-position: right 0.75rem center;background-size: 16px 12px;height: 38px;border: 1px solid #dee2e6;position: relative;right: -1px;cursor: pointer;}
.form-select {border-radius: 2px;padding: 0.375rem 0.375rem 0.375rem 2.25rem;background-position: left 0.75rem center;/* font-size: 1rem; *//* font-weight: 400; *//* line-height: 1.5; */}
.error{border-color: #ec6989;}
.errors{color: #ec6989;font-size: 13px;font-weight: 400;}
.other-way-pay-main h1 {text-align: center;margin-bottom: 30px;}
.other-way-pay-main .other-way-pay-item {background: #fff;height: 120px;border-radius: 8px;box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.14);text-align: center;margin-bottom: 30px;}
.other-way-pay-main .other-way-pay-item h4 {font-size: 14px;color: #2e2c38;font-weight: bold;margin-top: 15px;}
.other-way-pay-main .other-way-pay-item.fawry-way h4 {margin-bottom: 19px;}
.other-way-pay-main .other-way-pay-item.fawry-way img {height: 50px;max-width: 100%;object-fit: contain;}
.other-way-pay-main .other-way-pay-item.mega-way img {height: 32px;margin-bottom: 10px;max-width: 100%;object-fit: contain;}
.other-way-pay-main .other-way-pay-item.bank-way h4 {margin-bottom: 10px;}
.other-way-pay-main .other-way-pay-item p a {color: #3b9ec0;text-decoration: none}
.other-way-pay-main .other-way-pay-item p a:hover {color: #ec6989;}
.other-way-pay-main .other-way-pay-item.phone-way h4 {margin-bottom: 12px;}
.other-way-pay-main .other-way-pay-item.phone-way p {line-height: 18px}
.other-way-pay-main .other-way-pay-item.mega-way h4 {margin-bottom: 12px;}
/* warp-file-image */
.warp-file-image {background: #f7f7f7;box-shadow: 2px 2px 3px 0 rgba(0,0,0,.05);position: relative;border-radius: 2px;padding: 20px 0;display: flex;align-items: center;justify-content: center;flex-direction: column;margin: -7px auto 15px auto;transition: all .3s ease-in;width: 100%;}
.warp-file-image .icon {font-size: 42px;margin-bottom: 15px;color: #ccc;}
.warp-file-image .errors {color: #ec6989;}
.warp-file-image .choose-file {padding: 6px 23px;background: #4d5d6e;border-radius: 30px;color: #fff;font-weight: 300;font-size: 14px;margin: 10px 0 0 0;transition: all .2s ease-in;cursor: pointer;outline: none;border: none;}
.warp-file-image .choose-file:hover {background: #62778c;}
.warp-file-image #input-file-image {opacity: 0;position: absolute;z-index: -1;}
.warp-file-image .upload-picture>div {position: relative;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;width: 100%;margin-top: 15px;}
.warp-upload-picture {max-width: 200px;max-height: 200px;padding: 5px;background: #ffffff;display: flex;align-items: center;justify-content: center;height: inherit;box-shadow: 0 0 8px 2px rgba(0,0,0,.1);border: 1px solid #d0dbe4;position: relative;}
.warp-upload-picture i {position: absolute;top: -9px;right: -9px;color: #ec6989;background: #ffffff;border-radius: 50%;text-align: center;cursor: pointer;font-size: 24px;line-height: 24px;width: 24px;height: 24px;}
.warp-upload-picture img {max-width: 200px;max-height: 200px;}
/* input switch */
input[switch]+label {font-size: 1em;line-height: 1;width: 56px;height: 24px;background-color: #ced4da;background-image: none;border-radius: 2rem;padding: .16667rem;cursor: pointer;position: relative;transition: .1s ease-in-out}
input[switch]+label:before {color: #ffffff;content: attr(data-off-label);font-family: inherit;font-size: 24px;line-height: 21px;position: absolute;text-align: right;right: 7px;margin: 3px;top: -1px;min-width: 1.66667rem;overflow: hidden;transition: .1s ease-in-out}
input[switch]+label:after {content: '';position: absolute;left: 3px;background-color: #eff2f7;-webkit-box-shadow: none;box-shadow: none;border-radius: 2rem;height: 20px;width: 20px;top: 2px;-webkit-transition: .1s ease-in-out;transition: .1s ease-in-out}
input[switch]:checked+label {background-color: #556ee6}
input[switch]:checked+label:before {color: #fff;content: attr(data-on-label);right: auto;left: 8px;top: 0;font-size: 13px;text-align: left;}
input[switch]:checked+label:after {left: 33px;background-color: #eff2f7}
input[switch=bool]+label {background-color: #f46a6a}
input[switch=bool]:checked+label {background-color: #34c38f}
input[switch] {display: none;}
input[disabled]+label {background-color: #d9d9d9;cursor: not-allowed;}
.form-check {padding-left: 0;padding-right: 1.5em;}
.form-check .form-check-input {float: right;margin-left: 0;margin-right: -1.5em;}
.form-switch {padding-left: 0;padding-right: 2.5em;}
.form-switch .form-check-input{margin-left: 0;margin-right: -2.5em;float: right;}
.tacf-box-container {display: table;width: 100%;table-layout: fixed;background: #fff;border: 1px solid #e8e8e8;margin-bottom: 25px;}
.tacf-box-tabs {display: flex;width: 100%;padding: 0;position: relative;vertical-align: top;}
.tacf-box-tabs a {font-weight: 400;font-size: 16px;display: block;padding: 10px 20px;border-left: 1px solid #e8e8e8;background: #f9f9f9;color: #777;-moz-transition: .3s;-o-transition: .3s;transition: .3s;}
.tacf-box-tabs a.active {margin-bottom: -1px;color: #444;background-color: #fff;border-bottom-color: transparent;z-index: 2;position: relative;}
.tacf-box-tabs a:first-child {border-top: 0;}
.tacf-tabs-content {display: block;border: 1px solid #e8e8e8;background: #fff;border-width: 1px 0 0;position: relative;}
.tacf-tab-content {display: none;padding: 20px 20px 10px;}
.tacf-tab-content.active {display: block;}
@-webkit-keyframes progress {0% {background-color: #ffc107} to {background-color: #ffd862}}
@keyframes progress {0% {background-color: #ffc107} to {background-color: #ffd862}}

.shadow14,
.list-group-item{box-shadow: 0 4px 16px 0 rgba(0,0,0,.14);border: 0;}

.radius5 {border-radius: 5px;}

.social-icon {display: inline-block; width: 50px; height: 50px; position: relative; overflow: hidden; vertical-align: middle;cursor: pointer;}
.social-container {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
.social-container svg {border-radius: 50%; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; fill-rule: evenodd;}

@media only screen and (min-width:992px) {
    ::-webkit-scrollbar,.header .header-content::-webkit-scrollbar {background: rgba(0, 0, 0, 0)}
    ::-webkit-scrollbar-thumb,.header .header-content::-webkit-scrollbar-thumb {background: #CCCCCC;}
}

@media (min-width: 768px){
    .header-md .navbar-nav>li>a {padding: 18px 8px;}
    .app, .app body {height: 100%;min-height: 100%;overflow: hidden;}
    .vbox>header.header-md~section {top: 58px;}
    .vbox {display: table;border-spacing: 0;position: relative;height: 100%;width: 100%;}
    .header-md {min-height: 55px;}
    .aside {width: 200px;}
    .header-md .navbar-brand {line-height: 50px;height: 58px;display: block;overflow: hidden;text-overflow: ellipsis;text-align: right;}
    .hbox {display: table;table-layout: fixed;border-spacing: 0;width: 100%;}
    .app .hbox.stretch {height: 100%;}
    .hbox>aside, .hbox>section {display: table-cell;vertical-align: top;height: 100%;float: none;}
    .vbox>section.w-f-md {bottom: 125px;background: #4d5d6e;}
    .app .vbox>section, .app .vbox>footer {position: absolute;}
    .vbox>section, .vbox>footer {top: 0;bottom: 0;width: 100%;}
    .vbox>footer {top: auto;z-index: 1000;}
    .scrollable {-webkit-overflow-scrolling: touch;}
}

@media (max-width: 767px){
    .visible-xs {display: block !important;}
    .hidden-xs {display: none !important;}
    .nav-bar-fixed-bottom {position: fixed;bottom: 0;left: 0;right: 0;padding: 6px !important;}
    .wrapper-lg {padding: 15px;padding-bottom: 90px;}
    .khatmat-read-tools>li, .khatmat-read-page>li{min-width: 40px;height: 40px;}
    .khatmat-read-tools>li i, .khatmat-read-page>li i{font-size: 24px;}
    .khatmat-read-tools>li img {width: 26px;}
    .warp-mode-read {bottom: 45px;}
    .navbar-nav-user {flex-direction: column;}
    .navbar-nav-user li {margin-right: 1px;margin-top: 3px;}
    .navbar-nav-user li i {font-size: 18px;}
    .navbar-brand {margin-right: 56px;font-size: 21px;}
    .phx-flex-mb-20 {margin-bottom: 20px;}
    .khatmat-head-search {display: block;}
    .list-group-item a .justify-content-between {display: block !important;}
}