@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

.Scriptures {
    direction: rtl
}

.ytp-pause-overlay-container .ytp-pause-overlay .ytp-more-videos-view .ytp-scroll-min {
    display: none !important;
}

#components-reconnect-modal {
    display: none !important;
}

html, body {
    font-family: 'GE_SS_Two_Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.theme-black a, .btn-link {
    color: #afcbf3;
}

.icon-box p {
    font-family: GE_SS_Two_Light;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

span.collapse.show,
span.collapsing {
    display:block;
}

a.crossRef span {
    background-image: url('/icons8-open-book-64.png');
}

.theme-black a.crossRef span {
    background-image: url('/icons8-open-book-64-dark.png');
}

.form-check-input:checked {
    background-color: #2B5CA6;
    border-color: #2B5CA6;
}

.customShadow {
    box-shadow: 0 0.1rem 0.1rem rgba(0,0,0,.75) !important;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    --bs-nav-pills-link-active-bg: #2B5CA6;
}
.nav-link {
    --bs-nav-link-color: #2B5CA6;
}
.theme-black .nav-link {
    --bs-nav-link-color: #afcbf3;
}

.VerseNum {
    color: #1464da;
}

.theme-black .VerseNum {
    color: #CED4DA;
}

.SearchResult {
    color: #1464da;
}

.theme-black .SearchResult {
    color: #afcbf3;
}

.custom-nav {
    --bs-nav-link-color: #94969a;
    --bs-nav-tabs-link-active-color: #075afb;
    --bs-nav-tabs-link-active-bg: rgb(0 0 0 / 0%);
    --bs-nav-tabs-link-active-border-color: rgb(0 0 0 / 0%);
}
    .custom-nav.active {
        border-bottom-color: #075afb !important;
        border-bottom-width:medium;
    }
.theme-black .custom-nav {
    --bs-nav-link-color: #94969a;
    --bs-nav-tabs-link-active-color: #afcbf3;
    --bs-nav-tabs-link-active-bg: rgb(0 0 0 / 0%);
    --bs-nav-tabs-link-active-border-color: rgb(0 0 0 / 0%);
}
    .theme-black .custom-nav.active {
        border-bottom-color: #afcbf3 !important;
        border-bottom-width: medium;
    }

.theme-black {
    --main-bg-color: #1b1b1b;
    --main-text-color: #fcfcfc;
    --main-text-bg-color: #282828;
    --main-link-color: #72abbf;
    --main-border-color: #4e4e4e;
    --main-subheader-color: #232323;
    --main-button-color: #bfb391;
    --main-footer-color: #222222;
    --main-footer-text-color: #a4a4a4;
    --main-subheading-text-color: #f5b13A;
    --main-input-border-color: #4e4e4e;
}
    .theme-black .fixed-top,
    .theme-black .accordion-item,
    .theme-black #SearchVerses p,
    .theme-black nav button {
        background-color: rgba(33, 37, 41, 0.75) !important;
        --bs-pagination-disabled-color: #cacaca;
    }
    .theme-black .card,
    .theme-black .accordion-button,
    .theme-black .collapse,
    .theme-black .collapsing {
        background-color: rgba(33, 37, 41, 0.75) !important;
        color: white;
        --bs-card-border-color: white;
    }
    .theme-black .grayButton {
        color: #b0caf3;
    }
    .theme-black .navbar-toggler {
        color: #b0caf3;
        border-color: #b0caf3;
    }
    .theme-black #hero::before {
        background-color: #cacaca;
    }
    .theme-black .modal .modal-content {
        background-color: #2d2828;
        border-color: white;
    }
    .theme-black #collapse_menu {
        background-color: transparent !important;
    }
    .theme-black .resourceTypeStrong {
        color: #afcbf3;
        margin-bottom: 20px;
    }
    .theme-black audio {
        background-color: darkgrey;
    }
    .theme-black .box {
        background-color: rgba(33, 37, 41, 0.75);
    }

.theme-sepia {
    --main-bg-color: rgba(233,230,211,255);
    --main-text-color: #514d47;
    --main-text-bg-color: #f5f1e5;
    --main-link-color: #72abbf;
    --main-border-color: #ddd9c9;
    --main-subheader-color: #f2edde;
    --main-button-color: #bfb391;
    --main-footer-color: #f0ead8;
    --main-footer-text-color: #a4a4a4;
    --main-subheading-text-color: #8b0000;
    --main-input-border-color: #dcdcdc;
}
    .theme-sepia .card {
        background-color: rgba(245,241,229,255) !important;
    }
    .theme-sepia .collapse,
    .theme-sepia .collapsing,
    .theme-sepia .accordion-button {
        background-color: rgba(233,230,211,255) !important;
    }
    .theme-sepia #collapse_menu {
        background-color: transparent !important;
    }
    .theme-sepia .nav-tabs {
        --bs-nav-tabs-border-color: black;
        --bs-nav-tabs-link-hover-border-color: black black black;
        --bs-nav-tabs-link-active-border-color: black black white;
    }
    .theme-sepia .box {
        background-color: rgba(233,230,211,255);
    }

.theme-white {
    --main-bg-color: #f8f8f8;
    --main-text-color: #212529;
    --main-text-bg-color: #fff;
    --main-link-color: #72abbf;
    --main-border-color: #e5e5e5;
    --main-subheader-color: #fafafa;
    --main-button-color: #bfb391;
    --main-footer-color: #f2f2f2;
    --main-footer-text-color: #a4a4a4;
    --main-subheading-text-color: #8b0000;
    --main-input-border-color: #dcdcdc;
}

html, body {
    font-family: 'GE-SS-Two-Bold', 'HelveticaNeueMEforSKY-Reg', Helvetica, Arial, sans-serif;
    background: var(--main-bg-color);
    color: var(--main-text-color);
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.sk-chase {
    margin: 45vh auto;
    width: 40px;
    font-size: 30px;
    height: 40px;
    text-align: center;
    position: relative;
    animation: sk-chase 2.5s infinite linear both;
}

.sk-chase-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    animation: sk-chase-dot 2.0s infinite ease-in-out both;
}

    .sk-chase-dot:before {
        content: '';
        display: block;
        width: 25%;
        height: 25%;
        background-color: #005890;
        border-radius: 100%;
        animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
    }

    .sk-chase-dot:nth-child(1) {
        animation-delay: -1.1s;
    }

    .sk-chase-dot:nth-child(2) {
        animation-delay: -1.0s;
    }

    .sk-chase-dot:nth-child(3) {
        animation-delay: -0.9s;
    }

    .sk-chase-dot:nth-child(4) {
        animation-delay: -0.8s;
    }

    .sk-chase-dot:nth-child(5) {
        animation-delay: -0.7s;
    }

    .sk-chase-dot:nth-child(6) {
        animation-delay: -0.6s;
    }

    .sk-chase-dot:nth-child(1):before {
        animation-delay: -1.1s;
    }

    .sk-chase-dot:nth-child(2):before {
        animation-delay: -1.0s;
    }

    .sk-chase-dot:nth-child(3):before {
        animation-delay: -0.9s;
    }

    .sk-chase-dot:nth-child(4):before {
        animation-delay: -0.8s;
    }

    .sk-chase-dot:nth-child(5):before {
        animation-delay: -0.7s;
    }

    .sk-chase-dot:nth-child(6):before {
        animation-delay: -0.6s;
    }

@keyframes sk-chase {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes sk-chase-dot {
    80%, 100% {
        transform: rotate(360deg);
    }
}

@keyframes sk-chase-dot-before {
    50% {
        transform: scale(0.4);
    }

    100%, 0% {
        transform: scale(1.0);
    }
}

.hideObject {
    display: none !important;
    overflow: hidden;
}

@font-face {
    font-family: 'GE_SS_Two_Bold';
    src: url('GE SS Two Bold.otf') format('OpenType');
    font-display: swap;
}

@font-face {
    font-family: 'GE_SS_Two_Light';
    src: url('GE_SS_Two_Light.otf') format('OpenType');
    font-display: swap;
}

@font-face {
    font-family: Lotus_BSE;
    src: url(Lotus-Bold-BSE_4.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: Gilroy;
    src: url(Gilroy-Regular.ttf) format('truetype');
    font-display: swap;
}
@font-face {
    font-family: Poppins;
    src: url(/css/Poppins-Regular.ttf);
    font-display: swap;
}

/*@font-face {
    font-family: 'HelveticaNeueMEforSKY-Bold';
    src: url(HelveticaNeueMEforSKY-Bold.ttf) format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeueMEforSKY-Reg';
    src: url(HelveticaNeueMEforSKY-Reg.ttf) format('truetype');
    font-display: swap;
}
*/

/* arabic Amiri */
@font-face {
    font-family: 'Amiri';
    font-style: normal;
    font-weight: 200;
    src: url(https://fonts.gstatic.com/s/amiri/v16/J7acnpd8CGxBHp2VkaY6zp5yGw.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
    font-display: swap;
}

/*
 * Droid Arabic Kufi (Arabic) http://www.google.com/fonts/earlyaccess
 */
@font-face {
    font-family: 'Droid Arabic Kufi';
    font-style: normal;
    font-weight: 400;
    src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot);
    src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'), url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff2) format('woff2'), url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff) format('woff'), url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.ttf) format('truetype');
    font-display: swap;
}

/*
 * Droid Arabic Naskh (Arabic) http://www.google.com/fonts/earlyaccess
 */
@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.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Regular.woff2) format('woff2'), url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Regular.woff) format('woff'), url(//fonts.gstatic.com/ea/droidarabicnaskh/v7/DroidNaskh-Regular.ttf) format('truetype');
    font-display: swap;
}

/* arabic Scheherazade*/
@font-face {
    font-family: 'Scheherazade';
    font-style: normal;
    font-weight: 700;
    src: url(https://fonts.gstatic.com/s/scheherazade/v19/YA9Ur0yF4ETZN60keViq1kQQtZmptvY.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
    font-display: swap;
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }


.popover-body {
    font-size: 1rem;
}

[data-tippy-root] {
    display: inline-flex;
}

.tippy-content {
    font-size: 1.5rem !important;
}

.tippy-box[data-theme~='gray'] {
    background-color: #e5e5e5;
    color: black;
    box-shadow: 0 0 20px 4px rgb(154 161 177 / 15%), 0 4px 80px -8px rgb(36 40 47 / 15%), 0 4px 4px -2px rgb(91 94 105 / 15%);
    border-radius: 15px;
}

    .tippy-box[data-theme~='gray'][data-placement^='top'] > .tippy-arrow::before {
        border-top-color: #e5e5e5;
    }

    .tippy-box[data-theme~='gray'][data-placement^='bottom'] > .tippy-arrow::before {
        border-bottom-color: #e5e5e5;
    }

    .tippy-box[data-theme~='gray'][data-placement^='left'] > .tippy-arrow::before {
        border-left-color: #e5e5e5;
    }

    .tippy-box[data-theme~='gray'][data-placement^='right'] > .tippy-arrow::before {
        border-right-color: #e5e5e5;
    }

#main-header {
    transition: top 0.8s;
}
.required-field:after {
    content: " *";
    color: red;
}