/*sky
hsl(208deg 27% 66%)
hsl(208deg 50% 62%)


gold:  hsl(41deg 68% 55%)  / brown: #b18659
blue:  hsl(208deg 50% 55%)
green: #5ba966
Ayah:  #ab4f66



iPhone reading mode:
    background: hsl(40deg 60% 93%);
    height: 100%;
    color: hsl(27deg 49% 21%);
}
*/

.dark-mode * {
  transition-property: all; /*color, background-color, border-color;*/
  /*transition-duration: 0.25s;*/
}

.dark-mode {
    background-color: #3c4145!important;
    color: #f6f6f6;
}

.dark-mode > .wrapper {
    background-color: hsl(207deg 7% 25% / 80%);
}

/*body.dark-mode{
  color: #f6f6f6;
}*/

.dark-mode .invert{
    filter: invert(1);
}

.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6 {
    color: hsl(41deg 68% 55%); /*inherit;*/
}


.dark-mode a {
    color: hsl(41deg 68% 55%);
}

.dark-mode a:hover {
    color: hsl(41deg 68% 43%);
}

.dark-mode .shadow {
    box-shadow: 0 0.5rem 1rem 2px rgb(32 36 44 / 46%) !important;
}

.dark-mode .card {
    background-color: hsl(220deg 16% 15%);
    border: none; /*1px solid rgba(0,0,0,.125);*/
}

.dark-mode .card-footer {
    color: hsl(220deg 12% 24%);
    background: hsl(219deg 16% 75%);
}

.dark-mode .card-footer a {
    color: hsl(189deg 70% 35%);
    /* color: hsl(220deg 12% 24%); */
    font-weight: 500;
}

.dark-mode .card-footer .oi {
    color: hsl(220deg 12% 24%);
}

.dark-mode .border {
    /*border: 1px solid hsl(207deg 7% 25%) !important;*/
}


/* Meta data and icons */
.dark-mode .oi {
    color: hsl(208deg 27% 66%);
}

.dark-mode .details-text {
    color: hsl(208deg 27% 66%);
}

.dark-mode ul.article_cat_list li a {
    color: hsl(208deg 27% 66%);
}

.dark-mode hr {
    border-top: 1px solid rgb(255 255 255 / 10%);
}
/* Meta data and icons */

/* Nav */
.dark-mode .navbar.navbar-custom .navbar-toggler-icon {
    /* background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); */
    filter: invert(1);
}

.dark-mode .navbar-light .navbar-toggler {
    color: rgb(236 236 236 / 50%);
    border-color: rgb(236 236 236 / 50%);
}

.dark-mode .navbar-custom {
    color: #ececec;
    background-color: #20242c;
    border-bottom: 0.14rem solid #91aac0;
}

.dark-mode .fixed-right-menu .navbar-custom {
    border-left: 0.14rem solid #91aac0;
}

/*.dark-mode nav a {
    color: inherit;
}*/

.dark-mode .navbar.navbar-custom .navbar-nav .nav-link {
    color: inherit;
    border-color: #91aac0;
}

.dark-mode .navbar.navbar-custom .navbar-nav  .nav-link.active {
    background-color: hsl(0deg 0% 0% / 20%);
    border-bottom: 2px solid hsl(208deg 50% 45%);
    margin-bottom: -2px;
}

.dark-mode .navbar.navbar-custom .navbar-nav  .nav-link:hover {
    background-color: hsl(0deg 0% 0% / 30%);
    border-bottom: 2px solid hsl(208deg 50% 55%);
    margin-bottom: -2px;
}

.dark-mode .dropdown-menu {
    border-color: rgb(0 0 0 / 3%);
    background-color: hsl(210deg 10% 23%);
    color: #ececec;
    margin-right: 5px;
    margin-left: 5px;
    box-shadow: 0 0.5rem 1rem 2px rgb(32 36 44 / 75%) !important;
}

.dark-mode a.dropdown-item {
    color: #ececec;
}

.dark-mode a.dropdown-item:active {
    background-color: hsl(222deg 18% 14% / 36%);
}

.dark-mode a.dropdown-item:hover {
    background-color: hsl(222deg 18% 14% / 45%);
}

.dark-mode .dropdown-item:focus,
.dark-mode .dropdown-item:hover {
    color: inherit;
    background-color: hsl(222deg 18% 14% / 45%);
}

/*.dropdown-item:focus, .dropdown-item:hover {*/
/*    color: #16181b;*/
/*    text-decoration: none;*/
/*    background-color: #f8f9fa;*/
/*}*/
/* Nav */


/* nav-pills */
.dark-mode .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: currentColor;
    background-color: hsl(210deg 10% 23%);
}
/* nav-pills */

/* Settings */
.dark-mode .navbar-light .navbar-toggler, .dark-mode .btn.settings-btn {
  background-color: hsl(201 31% 23% / 1);
  color: hsl(200 9% 67% / 1);
}

.dark-mode .navbar-light .navbar-toggler:hover, .dark-mode .navbar-light .navbar-toggler:active, .dark-mode .btn.settings-btn:hover, .dark-mode .btn.settings-btn:active {
    background-color: hsl(201 31% 27% / 1) !important;
}

.dark-mode #settings {
    background-color: hsl(210deg 8% 20%);
    border: 1px solid hsl(208deg 27% 66% / 29%);
}
/* Settings */

/* Prayer Times */
.dark-mode .prayer-times .page-link {
  background-color: hsl(220deg 16% 15%);
    /*border: 1px solid hsl(208deg 27% 66% / 29%);*/
}

.dark-mode .prayer-times .prayer-item:first-child .page-link {
    /* border-left: 1px solid hsl(208deg 27% 66% / 29%); */
    margin-left: 1px;
    background-color: hsl(210deg 10% 23%) !important; /*hsl(220deg 16% 15%) !important; hsl(207deg 7% 27%) !important;*/
}

.dark-mode .prayer-item.active .page-link {
    background-color: hsl(220deg 16% 15%) !important;
    stroke: hsl(207deg 7% 27%);
}

.dark-mode .prayer-item .page-link:hover {
    color: hsl(41deg 68% 43%);
    background-color: hsl(207deg 7% 17%);
}

.dark-mode .prayer-item ion-icon {
    stroke: #f6f6f6;
    fill: hsl(207deg 7% 20%);
}

.dark-mode .prayer-item .page-link:hover ion-icon {
    stroke: hsl(41deg 68% 43%);
}
/* Prayer Times */


/* News Ticker */
.dark-mode .acme-news-ticker {
    background: hsl(220deg 16% 15%);
    border: 1px solid hsl(208deg 27% 66% / 66%); /*1px solid hsl(208deg 27% 66%);*/
    border-radius: 5px;
    overflow: hidden;
}

.dark-mode .acme-news-ticker-controls .acme-news-ticker-pause,
.dark-mode .acme-news-ticker.questions .acme-news-ticker-pause {
    background: hsl(210deg 10% 23%);
    border-width: 0;
}

.dark-mode .acme-news-ticker-controls .acme-news-ticker-pause:hover,
.dark-mode .acme-news-ticker.questions .acme-news-ticker-controls .acme-news-ticker-pause:hover {
    background-color: hsl(222deg 18% 44% / 45%);
}


.dark-mode .acme-news-ticker-label,
.dark-mode .acme-news-ticker.questions .acme-news-ticker-label {
    background: hsl(210deg 10% 23%) !important;
}

.dark-mode .acme-news-ticker.questions {
    border: 1px solid hsl(345deg 37% 49% / 72%);
}
/* News Ticker */



/* Headings */
.dark-mode .h-col-dark{
    color: inherit;
}

.dark-mode .ask-search a:link, .dark-mode .ask-search a:visited {
    color: hsl(41deg 68% 55%);
}

/*h1 > a {
    color: hsl(41deg 68% 55%);
}*/
/* Headings */

/* carousel */
.dark-mode .carousel-control-prev-icon,
.dark-mode .carousel-control-next-icon {
    filter: brightness(0.5);
}
/* carousel */

/* Article */

  /* Meta data and icons */
  .dark-mode .article-meta .oi {
      color: hsl(210deg 10% 33%);
  }

  .dark-mode .article-meta .details-text {
      color: hsl(210deg 10% 33%);
      /* color: #d5d5d5; */
  }

  .dark-mode .article-meta ul.article_cat_list li a {
      color: hsl(210deg 10% 33%);
      /* color: #d5d5d5; */
  }

  .dark-mode .article-meta hr {
      border-top: 1px solid rgb(255 255 255 / 10%);
  }

  .dark-mode .article-meta .img-thumbi {
      background-color: hsl(207deg 7% 25%);
  }
  /* Meta data and icons */


.dark-mode .article.shadow {
    box-shadow: 0 0.5rem 1rem 2px rgb(32 36 44 / 46%) !important;
}

.dark-mode .article.card, .dark-mode .article-meta .card {
    background-color: hsl(31deg 37% 96%);
    /* border: 1px solid rgba(0,0,0,.125); */
    /* border: none !important; */
    color: hsl(222deg 18% 14%);
}


/*.dark-mode .article.card, .dark-mode .article-meta .card {
    //background-color: hsl(31deg 37% 96%);
    //background-color: hsl(40deg 60% 93%);
    background-color: transparent;
    border: 1px solid rgba(0,0,0,.125);
    border: none !important;
    //color: hsl(222deg 18% 14%);
}*/

.dark-mode .article.card.border.border-light {
    /*border-color: hsl(222deg 17% 15% / 28%)!important;*/
}

.dark-mode .card-title {
  color: hsl(220deg 12% 24%);
}

.dark-mode .youtube-overlay-title {
    color: hsl(220deg 12% 24%);
    background-color: hsl(220deg 16% 15%); /*hsl(219deg 16% 75%);*/
}

.dark-mode .hoda-title-main,
.dark-mode .hoda-title-p-1,
.dark-mode .hoda-title-question,
.dark-mode .hoda-center,
.dark-mode .hoda-signature,
.dark-mode .question h1

 {
    color: hsl(41deg 68% 55%);
}

.dark-mode .hoda-title-p-2 {
    color: hsl(208deg 50% 55%);
}

.dark-mode .hoda-title-p-3 {
    color: hsl(128deg 31% 51%);
}

.dark-mode .hoda-title-ayah {
    color: hsl(345deg 37% 49%);
}




/* Home Sections */
.dark-mode .section-header h1, .dark-mode .section-header .h1, .dark-mode .section-header span, .dark-mode .section-header .oi  {
    /* color: #ffffff; */
    /* font-weight: 500; */
    text-shadow: none !important;
    /* text-shadow: -1px 1px 3px hsl(41deg 100% 19% / 80%), 0px -4px 10px rgb(255 255 255 / 30%); */
}

/*.container-fluid.mt-5.latest-articles-bg-color {
    background: url(https://alhodacenter.com/assets/themes/default/img/ce2.png) right center scroll no-repeat, linear-gradient(to bottom right,#9a7324,#212c36, hsl(210deg 10% 19%));
}*/

/*
element.style {
    background: url('https://alhodacenter.com/assets/themes/default/img/ce2.png') right center scroll no-repeat !important;
    background-size: initial;
    padding: 0 0 4rem;
}*/

/*background-image:; background-position-x: right !important; background-position-y: center !important; background-size: initial; background-repeat-x: no-repeat !important; background-repeat-y: no-repeat !important; background-attachment: scroll !important;*/
/* Home Sections */



/* footer */
.dark-mode .footer {
    background: hsl(210deg 10% 14%);
}

.dark-mode .text-muted {
    color: hsl(206deg 10% 69%)!important;
}
/* footer */


/* Tables */


    .dark-mode table thead tr {
        background-color: #20242c;
    }

    .dark-mode table tbody tr {
        border-bottom: 1px solid hsl(207deg 7% 20% / 75%);
    }

    .dark-mode table tbody tr:nth-of-type(even) {
        background-color: hsl(207 7% 32% / 1);
    }

    .dark-mode table tbody tr:nth-of-type(odd) {
      background-color: unset;
    }

    .dark-mode table tbody tr:last-of-type {
        border-bottom: 2px solid #20242c;
    }

    .dark-mode table tbody tr:nth-of-type(odd):hover, .dark-mode table tbody tr.oddActive:nth-of-type(odd) {
        /* transition: background 0.25s; */
        background: -moz-linear-gradient(90deg, rgb(60 65 69) 0%, rgb(60 65 69) 99.7%, rgb(222 226 230) 99.7%, rgb(222 226 230) 99.7%);
        background: -webkit-linear-gradient(90deg, rgb(60 65 69) 0%, rgb(60 65 69) 99.7%, rgb(222 226 230) 99.7%, rgb(222 226 230) 99.7%);
        background: linear-gradient(90deg, rgb(60 65 69) 0%, #3c4145 99.7%, rgb(222 226 230) 99.7%, rgb(222 226 230) 99.7%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#575757",GradientType=1);
    }

    .dark-mode table tbody tr:nth-of-type(even):hover, .dark-mode table tbody tr.evenActive:nth-of-type(even) {
        background: rgb(247,247,247);
        background: -moz-linear-gradient(90deg, hsl(207 7% 32% / 1) 0%, hsl(207 7% 32% / 1) 99.7%, rgb(222 226 230) 99.7%, rgb(222 226 230) 99.7%);
        background: -webkit-linear-gradient(90deg, hsl(207 7% 32% / 1) 0%, hsl(207 7% 32% / 1) 99.7%, rgb(222 226 230) 99.7%, rgb(222 226 230) 99.7%);
        background: linear-gradient(90deg, hsl(207 7% 32% / 1) 0%, hsl(207 7% 32% / 1) 99.7%, rgb(222 226 230) 99.7%, rgb(222 226 230) 99.7%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f7f7f7",endColorstr="#575757",GradientType=1);
    }

    .dark-mode .table th {
        border-right: 1px solid hsl(207deg 7% 32%);
        border-bottom: 2px solid #4c5257;
    }

    .dark-mode .table td {
        border-right: 1px solid hsl(207deg 7% 20% / 75%);
    }
    /* Tables */

@media (min-width: 992px) {
  /* Prayer Times */
  .dark-mode .prayer-times .page-link {
    background-color: hsl(220deg 16% 15%) !important;
  }

  .dark-mode .prayer-item.active .page-link {
    background-color: hsl(210deg 10% 23%) !important;
  }
}


/* Baheth */

/* Search Page */
/* .dark-mode .section-baheth-search a {
  color: hsl(189deg 70% 35%);
} */

.dark-mode #main_search {
    /* border-color: #e9ecef !important; */
    border: none !important;
    padding: 0.98em 1rem 0.75rem;
    background-color: rgb(32 36 44);
}

.dark-mode .section-baheth-read .btn-search-submit {
    border-color: rgb(0 0 0 / 1.5%);
}

.dark-mode .section-baheth-search .surahSearchIcon {
    border: 1px solid hsl(220deg 16% 15%) !important;
    border-left: none !important;
}

.dark-mode .section-baheth-search input[name="surahSearch"] {
    border-color: hsl(220deg 15.79% 14.9%) !important;
    /* border: none !important; */
    padding: 0.7rem 0.7rem 0.5rem;
}

.dark-mode .section-baheth-search select[name="reciter"] {
    /* border-color: #e9ecef !important; */
    border: none !important;
}

.dark-mode .surah-scroll-wrapper {
    border-color: rgb(63 68 73 / 50%);
}

.dark-mode .search-icon-placeholder {
    color: rgb(134 144 155 / 75%);
}

.dark-mode .btn-warning {
    color: #FFF;
    background-color: hsl(187.95deg 77.57% 20.98%);
}

.dark-mode .btn-warning:hover, .dark-mode .btn-warning.active {
    color: #FFF !important;
    background-color: hsl(188.23deg 78.48% 30.98%) !important;
}



/* Read Page */
.dark-mode .section-baheth-read a {
  color: hsl(189deg 70% 35%);
}

.dark-mode .lines ayah:nth-child(odd) {
    background: hsl(194.32deg 29.91% 18.9% / 60%);
}

.dark-mode .paragraph ayah.selected, .dark-mode .lines ayah.selected {
    background: hsl(187.95deg 77.57% 20.98%) !important;
    /* background: hsl(0deg 0% 0%); */
    /* box-shadow: 0 0 20px -5px hsl(0deg 0% 50% / 50%), 0 0 15px -10px hsl(0deg 0% 50% / 80%); */
}

.dark-mode .section-baheth-read .article.card, .dark-mode .section-baheth-read .article-meta .card {
    /* background-color: hsl(31deg 37% 96%); */
    /* background-color: hsl(200 32% 13% / 1); */
    background-color: hsl(220deg 16% 15%);
    /* color: hsl(222deg 18% 14%); */
    /* color: #d5d5d5; */
    color: #f6f6f6;
    /*border: 1px solid rgba(0,0,0,.125);*/
    /*border: none !important;*/
    /* background-color: #f9f5f1; */
    /* color: hsl(210deg 10% 33%); */
}

.dark-mode .section-baheth-read .article-meta ul.article_cat_list li a {
    /* color: hsl(210deg 10% 33%); */
    color: #d5d5d5;
}

.dark-mode .section-baheth-read .article-meta .details-text {
    /* color: hsl(210deg 10% 33%); */
    /* color: #d5d5d5; */
    color: #f6f6f6;
}

.dark-mode .section-baheth-read .btn-light {
    color: #212529;
    background-color: #233843;
}

.dark-mode .section-baheth-read .btn-light:hover {
    color: #212529;
    background-color: hsl(201 31% 30% / 1);
}

.dark-mode .section-baheth-read .btn-light:hover .oi {
    color: hsl(208 27% 76% / 1);
}

.dark-mode .section-baheth-read .btn-outline-secondary:hover {
    color: hsl(208 27% 76% / 1);
    background-color: hsl(201 31% 30% / 1);
}

.dark-mode .section-baheth-read .btn-outline-secondary:hover .oi {
    color: hsl(208 27% 76% / 1);
}

/*
.dark-mode .section-baheth-read .btn-warning {
    color: hsl(36 47% 10% / 1) !important;
    background-color: hsl(40deg 80% 78% / 85%) !important;
    border-color: transparent;
}

.dark-mode .section-baheth-read .btn-warning:hover, .dark-mode .section-baheth-read .btn-warning.active {
    color: hsl(36 47% 10% / 1) !important;
    background-color: hsl(40deg 80% 78% / 85%) !important;
    border-color: transparent !important;
}*/


.dark-mode .section-baheth-read .btn-outline-info, .dark-mode .section-baheth-read .btn-outline-info, .dark-mode .section-baheth-read .btn-outline-info {
    color: hsl(189deg 70% 35%) !important;
}

.dark-mode .section-baheth-read .btn-outline-info.active, .dark-mode .section-baheth-read .btn-outline-info:active, .dark-mode .section-baheth-read .btn-outline-info:hover {
    color: #ffffff !important;
    background-color: hsl(188 78% 31% / 1) !important;
}

.dark-mode .section-baheth-read .btn-info {
    /* color: hsl(36 47% 10% / 1) !important; */
    background-color: hsl(188 78% 21% / 1) !important;
    /* border-color: transparent; */
}

.dark-mode .section-baheth-read .btn-info:hover, .dark-mode .section-baheth-read .btn-info.active {
    /* color: hsl(36 47% 10% / 1) !important; */
    background-color: hsl(188 78% 31% / 1) !important;
    /* border-color: transparent !important; */
}


.dark-mode .section-baheth-read .surah-scroll-wrapper::before {
    background-color: hsl(220deg 16% 15%);
    box-shadow: -1px 0px 0px hsl(220deg 13% 15%);
}

.dark-mode .section-baheth-read .border-right.quick-nav-divider {
    border-color: rgb(241 241 241 / 13%) !important
}

.dark-mode .section-baheth-read .btn-outline-light:hover {
    color: #212529;
    background-color: hsl(201 31% 30% / 1);
    /* border-color: #f8f9fa; */
}

.dark-mode .section-baheth-read .btn-outline-secondary:hover {
    /* color: #212529; */
    /* background-color: hsl(201 31% 30% / 1); */
    border-color: hsl(201 31% 30% / 1);
}

.dark-mode .btn-secondary {
    color: #fff;
    background-color: #69747d;
    border-color: #6a757d;
}

.dark-mode .btn-secondary .oi {
    color: #fff;
}

/* .plyr {
    opacity: 0.975;
    background-color: #ffffff;
    border-radius: 7px;
    box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 8%);
    / * box-shadow: -3px 6px 16px 0px hsl(0deg 0% 0% / 6%) !important; * /
} */

.dark-mode .plyr, .dark-mode .plyr--audio .plyr__controls {
    background: hsl(220deg 16% 15%);
    color: hsl(217 15% 54% / 1);
}

.dark-mode .floting-media > span {
    background: #3c4145;
}

.dark-mode .ion-close {
    background-color: hsl(207 7% 32% / 1);
    color: #fff;
}

.dark-mode .modal-content {
  box-shadow: 0 0 25px 10px hsl(187.74deg 11.27% 22.07% / 27%);
}

.dark-mode .modal-backdrop {
    /* background-color: #606368; */
}

.dark-mode .modal-content {
    background-color: hsl(220 16% 14% / 1);
    border: 1px solid rgba(0,0,0,.2);
    /* background-color: #212529; */
}

.dark-mode .modal-header, .dark-mode .modal-footer {
    border-color: hsl(207deg 7% 32% / 14%);
    background-color: hsl(220 16% 18% / 1);
    border: none;
}

.dark-mode .breadcrumb-item.active {
    color: hsl(0 0% 97% / 1);
}

.dark-mode .close {
    color: #FFFFFF;
    text-shadow: 0 1px 0 #000;
    opacity: .5;
}

.dark-mode .close:focus, .dark-mode .close:hover {
  /* text-shadow: 0 1px 0 #000; */
    opacity: .75;
}

.dark-mode .paragraph ayah:hover {
    background-color: hsl(200.63deg 31.37% 20%);
}


.dark-mode #html-spinner{
  border:4px solid hsl(201 31% 30% / 0.5);
  border-top:4px solid hsl(188 78% 31% / 1);
}

.dark-mode tajweed {
    filter: invert(1);
}

.dark-mode #tajweedRulesModal ul li .circle {
    filter: invert(1);
}

.dark-mode .modal .btn-group .dropdown-menu {
    background: #272b35 !important;
    border: 1px solid hsl(216deg 9.18% 26.1%);
}

.dark-mode .modal .btn-group .dropdown-menu .dropdown-divider {
    border-color: #343a40!important;
}


.dark-mode .btn-collapse{
  background-color: hsl(223 15% 18% / 1) !important;
    border-color: hsl(222.86deg 15.22% 18.04%) !important;
}

.dark-mode .goToTop{
    background-color: hsl(201 31% 30% / 1);
    color: hsl(200 31% 80% / 1);
}

.dark-mode .dialogSearch-close-btn {
  color: #000000 !important;
}

.dark-mode .search-dialog {
  background-color: #3c4145 !important; /*hsl(220deg 16% 15%);*/
}

.dark-mode .text-secondary {
    color: #ffffff!important;
}

.dark-mode .list-group-item-action {
    color: #ffffff;
    background-color: transparent;
}

.dark-mode .list-group-item-action:focus, .dark-mode .list-group-item-action:hover, .dark-mode .list-group-item-action.more {
    background-color: hsl(207 7% 32% / 1);
}

.dark-mode img, .dark-mode .img-thumbi, .dark-mode .youtube-iframe iframe {
    filter: grayscale(0.33);
}