@media only screen and (max-width: 800px) {
    /* #topbar.menu .item:not(.logo){
        padding: 0 0.1em 0 0.1em !important;
    } */
    #topbar{
        height:10vh;
    }
    .ui.flyout{
       /* top:10vh;*/
    }
    .item.logo.rtl{
        position: absolute;
        left: 0;
        /*padding: 1.3em 0 1.3em 1em !important;*/
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .item.logo.ltr{
        position: absolute;
        right: 0;
        /*padding: 1.3em 1em 1.3em 0 !important;*/
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .fluid.card.dark-mode .interactions>.basic.button, .fluid.card.dark-mode .interactions>.basic.button:active, .fluid.card.dark-mode .interactions>.basic.button:focus,
    .modal.dark-mode .operations>.basic.button, .modal.dark-mode .operations>.basic.button:active, .modal.dark-mode .operations>.basic.button:focus, .progress .basic.button.dark-mode, .progress .basic.button.dark-mode:active, .progress .basic.button.dark-mode:focus
    {
        border: 0.1rem dotted #7c7c7c;
    }
    .interactions>.basic.button, .interactions>.basic.button:active, .interactions>.basic.button:focus,
    .operations>.basic.button, .operations>.basic.button:active, .operations>.basic.button:focus,
    .progress .basic.button, .progress .basic.button:active, .progress .basic.button:focus
    {
        border: 0.1rem dotted #afafaf;
    }
    .about.segment, .privacy.segment, .terms.segment, .cooks.segment {
        padding-top: 7em;
        /*font-size: 1.2rem;  */  
        /*
        font-family: "HadithsFont";    
        line-height:2rem;
        */
    }
    .basic.interactions.segment{
        z-index: 999;
        margin-top: 21vh;
        margin-bottom: 0;
    }
    .ui.pill.grid {
        margin-top: 25vh;
    }
    #scroll_up_cue {
        top: 33vh;
    }
    .navtree>.tree a.tree_label.active span.cat_text {       
       /* display: inline-block;
        margin: -2em .1em 0 0;  */
    }
    .sticky.segment {
        top:10vh;
    }
    
    .tour.flyout.popup {
        position: relative;
    }
    .landing.grid {
        padding:1em 1em;
     }
}
@media not screen and (max-width: 800px) {    
    #topbar{
        height:7vh;
    }
    .ui.flyout{
        top:7vh;
    }
    .item.logo.rtl{
        position: absolute;
        left: 0;
        /*padding: 1.3em 0 0 2em !important;*/
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .item.logo.ltr{
        position: absolute;
        right: 0;
        /*padding: 1.3em 2em 0 0 !important;*/
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    .fluid.card.dark-mode .interactions>.basic.button, .fluid.card.dark-mode .interactions>.basic.button:active, .fluid.card.dark-mode .interactions>.basic.button:focus,
    .modal.dark-mode .operations>.basic.button, .modal.dark-mode .operations>.basic.button:active, .modal.dark-mode .operations>.basic.button:focus, .progress .basic.button.dark-mode, .progress .basic.button.dark-mode:active, .progress .basic.button.dark-mode:focus
    {
        border: 0.1rem dashed #7c7c7c;
    }
    .interactions>.basic.button, .interactions>.basic.button:active, .interactions>.basic.button:focus,
    .operations>.basic.button, .operations>.basic.button:active, .operations>.basic.button:focus,
    .progress .basic.button, .progress .basic.button:active, .progress .basic.button:focus
    {
        border: 0.1rem dashed #afafaf;
    }
    .about.segment, .privacy.segment, .terms.segment, .cooks.segment {
        margin-top: 10vh !important;
        padding: 5em;
        font-size: 1.2rem;    
        /*
        font-family: "HadithsFont";    
        line-height:2rem;
        */
    }
    .basic.interactions.segment{
        z-index: 999;
        margin-top: 14vh;
        margin-bottom: 0;
    }
    .ui.pill.grid {
        margin-top: 15vh;
    }
    #scroll_up_cue {
        top: 20vh;
    }
    .navtree>.tree a.tree_label.active span.cat_text {       
        /*display: ruby;*/
    }
    .sticky.segment {
        top:7vh;
    }
    .landing_text {
        font-size: 1.5em;
    }
    .landing.grid {
        padding:3em;
     }
}

#topbar.menu>.item:not(.logo){
    padding: 0 !important;
}

.about.segment *, .privacy.segment *, .terms.segment *, .cooks.segment * {
    line-height:2rem !important;
    /* font-family: Tahoma !important; */
}
.error.message{
    display: none;
}
.ui.message[dir="rtl"] .list:not(.ui) {
    text-align: right;

}
.logo-img{
    width: 3rem !important;
    margin: -0.2em !important;
}
.logo_progress_share {
    width: 1rem !important;
}
.navtree:not(.dark-mode) .no_scripture_node {
    color: #000000ad !important;
    cursor: default !important;
}
.navtree.dark-mode .no_scripture_node {
    color: #c3c3c3 !important;
    cursor: default !important;
}

.empty.scriptures.segment {
    margin-top: 25vh;
    font-size: 2em;
    text-align: center;
    line-height: normal;
    display:none;
}
.ui.about.grid, .ui.pill.grid, .ui.privacy.grid, .ui.terms.grid, .ui.cooks.grid{
    display: none;
    margin: 7vh 3vh 3vh 3vh;
}
.ui.landing.grid {
    display: none;
    padding-top: 10em;
}
.ui.not_found.grid{
    display:none;
    background-image: url(../images/404.png) !important;
    background-size: cover !important;
    height: 100vh;
    margin-top: 10%;   
}
.ui.not_found.grid>.row {
    display:block;
}
.ui.not_found.grid .massive.column{
    font-size: 7rem !important;
   margin-top:20px !important;	 
   
}
.ui.not_found.grid .msg.column{
   margin:0.5em !important;
   font-size: 2rem !important;
   color: #8f8f8f !important;
   font-weight: bold;
   line-height: 1em;
    background: black;
    padding: 0.3em;
}
.ui.not_found.grid .red.column{
    color:#8d8d8d !important;
    display: inline-table;	 	 
 }
.ui.not_found.grid a{
   color:#21ba45 !important;	 	 
}

html.ios {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  html.ios,
  html.ios body {
    height: initial !important;
  }
  .sidebar {
    background-color: #eee;
    top: auto !important;
    padding: 10px;
    /*width:30% !important;*/
}
.accordion>.title>.dropdown.icon.right
{
    float:left !important;
}
.accordion>.title>.dropdown.icon
{
    float:right !important;
}
body {
    background: #eee !important;
    color:#333333;
    height: 100vh !important; /* important for Firefox*/
}
body.pushable {
   /* height: 100vh !important;*/
}
.footer{
    background-color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.footer.segment>.ui.container {
    margin-bottom: 10vh;
}
.vocab{
    color: #2ca4ab;
    cursor: pointer;
}
.pusher {
    background: #eee !important;
    min-height: 100vh;
    /*width:70%;*/
}
.pusher{
   /* margin-top:100px;*/
}

.quran.segment, .hadiths.segment{
    display: none;
}
.right.bottom.aligned.tags{
    float: right;
}
.left.bottom.aligned.tags{
    float: left;
}
.breadcrumb.right{
    padding-right: 1em;
}
.breadcrumb.left{
    padding-left: 1em;
}

.interactions>.basic.button, .interactions>.basic.button:active, .interactions>.basic.button:focus,
.operations>.basic.button, .operations>.basic.button:active, .operations>.basic.button:focus,
.progress .basic.button, .progress .basic.button:active, .progress .basic.button:focus
{
    color: #afafaf;    
    box-shadow: none;
    background: transparent;
}

.interactions>.basic.button:hover, .operations>.basic.button:hover, .progress .basic.button:hover{
    color: #afafaf;
    border: 0.1rem solid #afafaf !important;
    box-shadow: none;
    background: transparent !important;
}
.fluid.card.dark-mode .interactions>.basic.button, .fluid.card.dark-mode .interactions>.basic.button:active, .fluid.card.dark-mode .interactions>.basic.button:focus,
.modal.dark-mode .operations>.basic.button, .modal.dark-mode .operations>.basic.button:active, .modal.dark-mode .operations>.basic.button:focus,
.progress .basic.button.dark-mode, .progress .basic.button.dark-mode:active, .progress .basic.button.dark-mode:focus
{
    color: #7c7c7c;    
    box-shadow: none;
}
.fluid.card.dark-mode.interactions>.basic.button:hover, .modal.dark-mode .operations>.basic.button:hover, .progress .basic.button.dark-mode:hover {
    color: #7c7c7c;
    border: 0.1rem solid #7c7c7c !important;
    box-shadow: none;
    background: transparent !important;
}

button.lightseagreen:not(.link){
    background:#20b2aa !important;
    color:#fff !important;
}
.navtree>.tree .ui.link.icon.lightseagreen:not(button) {
    color:#20b2aa
}
.ui.ribbon, .interaction.button{
    cursor: pointer;
}
.ui.rtl.ribbon, .interactions.rtl:not(span), .operations.rtl {
    float:left;
}
.ui.ltr.ribbon, .interactions.ltr:not(span), .operations.ltr {
    float:right;
}
.ui.navlist.flyout>.rtl.close.icon{
    left: 0.3em;
    right: unset;
}
.ui.overlay.flyout {
    z-index: 10;
}
.ui.navlist.flyout>.ltr.close.icon {
    
}
.ui.flyout {
    /*opacity: 0.75;*/
}
.ui.double.large.loader.active {
    position: fixed;

}
.pusher[dir="rtl"] .ui.bulleted.list, ul.ui.list {
    margin-right: 1.25rem;
}
.pusher[dir="rtl"] .ui.bulleted.list .list>.item::before, .ui.bulleted.list>.item::before, ul.ui.list li::before {
    margin-right: -1.25rem;
}
.pusher:not(.dark-mode) .about.segment, .pusher:not(.dark-mode) .about.segment .header, .pusher:not(.dark-mode) .privacy.segment, .pusher:not(.dark-mode) .privacy.segment .header, .pusher:not(.dark-mode) .cooks.segment, .pusher:not(.dark-mode) .cooks.segment .header, .pusher:not(.dark-mode) .terms.segment, .pusher:not(.dark-mode) .terms.segment .header {
    color: #484848;
}

.pusher.dark-mode .about.segment, .pusher.dark-mode .privacy.segment, .pusher.dark-mode .terms.segment, .pusher.dark-mode .cooks.segment {
    background: #343a40;
}
.pusher.dark-mode .ui.bulleted.list .list>a.item::before, .ui.bulleted.list>a.item::before, ul.ui.list li::before {
    color: #9f9f9f;
}
.tinymeta {
    margin: .5em;
    color: #898a8a;
}
.footnote {
    font-size: .8em;
    color: #898a8a;
}


/*---------- font faces --------------------*/

@font-face {
    font-family: "QuranFont";
    src: url("../fonts/uthmani_hafs.ttf");
}

.language-toggle {
    font-family: "Times New Roman", Times, serif;
    font-size: 21px;
    color: rgba(0,0,0,.95);
    margin-right: 12px;
}

.language-toggle.arabic {
    font-family: "QuranFont";
    font-size: 23px;
    margin-right: 5px;
}

@font-face {
    font-family: "HadithsFont";
    src: url("../fonts/kitab-base.woff2");
}

@font-face {
    font-family: "HadithsFont";
    font-weight: 700;
    src: url("../fonts/kitab-base-bold.woff2");
}

@font-face {
    font-family: "HadithsFont";
    src: url("../fonts/kitab-phrases.woff2");
    unicode-range: u+e100-e103,u+fd3e-fd45,u+fd47-fd4f,u+fdf2,u+fdfa-fdfb,u+fdfd-fdff
}

@font-face {
    font-family: "HadithsFont";
    font-weight: 700;
    src: url("../fonts/kitab-phrases.woff2");
    unicode-range: u+e100-e103,u+fd3e-fd45,u+fd47-fd4f,u+fdf2,u+fdfa-fdfb,u+fdfd-fdff
}

/*---------- end font faces --------------------*/


.scriptures.segment .fluid.card{

}

.ui.card>.content>.description.quran.rtl, .searching.flyout .result>.quran.rtl{
    font-family: "QuranFont";
    font-size: 1.5rem;
    line-height:2rem;
    padding-top: 1.2em;
}
.ui.card>.content>.description.hadiths.rtl, .searching.flyout .result>.hadiths.rtl, .scriptures_no_results{
    font-family: "HadithsFont";
    font-size: 1.5rem;
    line-height:2rem;
    padding-top: 1.2em;
}
.ui.card>.content>.description.quran.ltr, .ui.card>.content>.description.hadiths.ltr, .searching.flyout .result>.quran.ltr, .searching.flyout .result>.hadiths.ltr, .scriptures_no_results{
    font-family: "Helvetica Neue";
    font-size: 1.5rem;
    line-height:2rem;
    padding-top: 1.2em;
}
.ui.card.dark-mode>.content>.description.quran, .ui.card.dark-mode>.content>.description.hadiths{
    color:#c3c3c3;
}


.moon.icon, .sun.icon, .guest{
    cursor:pointer;
}
.approve.button:hover, .deny.button:hover, .submit.login.button:hover, .submit.button.register:hover{
    background: #d9563a !important;
    color: #f3f3f3 !important;
}

.navtree.right .folder.icon{
    margin-left: 5px;
}
.navtree.left .folder.icon{
    margin: 0 0 0 0.25rem;
}

.login.popup {
width: 100vw !important;
}
/* Drak mode */




.ui.toggle.checkbox input:focus:checked ~ .box:before,
.ui.toggle.checkbox input:focus:checked ~ .dark-mode:before,
.ui.toggle.checkbox input:checked ~ .box:before,
.ui.toggle.checkbox input:checked ~ .dark-mode:before {
    background: #1f2125 !important;
    color: #1f2125 !important;
}
.ui.toggle.checkbox input:focus:checked ~ .dark-mode:before,
.ui.toggle.checkbox input:checked ~ .dark-mode:before {
    background: #d9563a !important;
    color: #1f2125 !important;
}

.dark-mode::placeholder, .dark-mode:-ms-input-placeholder, .dark-mode::-moz-placeholder, .dark-mode:-moz-placeholder,
 .dark-mode::-webkit-input-placeholder, .dark-mode::-ms-input-placeholder{
    color: #909090 !important;
}

body.dark-mode, .pusher.dark-mode, input.dark-mode, .form.dark-mode textarea, .selection.dropdown.dark-mode, .selection.dropdown.dark-mode .menu,
 .selection.dropdown.dark-mode .menu>.item{
    background: #1f2125 !important;
    color: #9f9f9f !important;
}
#topbar.dark-mode, .sidebar.dark-mode, .form.dark-mode, .flyout.dark-mode>.header,.flyout.dark-mode .scrolling.content, .popup.dark-mode, .popup.dark-mode::before, .ui.modal.dark-mode>.actions,
 .ui.modal.dark-mode>.header, .ui.modal.dark-mode>.content, .ui.menu .ui.pointing.dropdown.dark-mode, .ui.menu .ui.pointing.dropdown.dark-mode .menu,
  .ui.menu .ui.pointing.dropdown.dark-mode .menu::after, .ui.menu .ui.pointing.dropdown.dark-mode .menu>.item{
    background: #343a40 !important;
    color: #9f9f9f !important;
}

#topbar.dark-mode, .sidebar.dark-mode, .form.dark-mode, .flyout.dark-mode>.header,.flyout.dark-mode .scrolling.content, .popup.dark-mode, .popup.dark-mode::before, .ui.modal.dark-mode>.actions,
 .ui.modal.dark-mode>.header, .ui.modal.dark-mode>.content, .ui.menu .ui.pointing.dropdown.dark-mode .menu::after, .ui.menu .ui.pointing.dropdown.dark-mode .menu>.item, .footer.dark-mode{   
    
    border-bottom: 1px solid rgb(218 218 218 / 15%);
}
.pusher.dark-mode .fluid.card, .pushable.dark-mode .fluid.card{
    color: #c3c3c3;
    background: #343a40;    
}
.searching.flyout.dark-mode .fluid.card {
    background: #131416;   
}
.searching.flyout.dark-mode .fluid.card>.content>.description {
    color:#929292;
}
.ui.fluid.card.result.dark-mode .meta{
    color: #999999 !important;
}
.fluid.card.dark-mode .meta a{
    color: #1e70bf !important;
}
.ui.searching.flyout .results>.meta {
    display:none;
}
.ui.searching.left.flyout .results>.meta {
    float:left;
}
.ui.searching.right.flyout .results>.meta {
    float:right;
}


.ui.card.dark-mode>.extra{
    border-top: 1px solid #555555 !important;
}
.ui.card.dark-mode>.extra>.meta {
    color:#999999;
}
.ui.card.dark-mode, .ui.cards.dark-mode>.card {
    box-shadow:none;
}
.ui.menu .ui.pointing.dropdown.dark-mode .menu>.item:hover{
    background: #676767 !important;

}
.ui.menu .ui.pointing.dropdown.dark-mode .menu>.item.active{
    background: #535353 !important;

}
.ui.content.grid.container{
    /*margin-top:20vh;*/
    min-height: 100%;
    width: 100vw !important;
}
.popup.dark-mode{
    border: 1px solid #343a40;
}
.sidebar.dark-mode .item{
    color: #9f9f9f !important;
}
.sidebar.dark-mode .item:hover {
    color: #9f9f9f !important;
    background: #484e55 !important;
}
#topbar .icon {
    box-shadow:none;
}
.ui.menu .ui.dropdown .menu>.item>i.comment.dots.icon, .ui.menu .ui.dropdown .menu>.item>i.scroll.icon, .ui.menu .ui.dropdown .menu>.item>i.info.circle.icon {
    margin: auto .5em auto .5em !important;
}

.search.link.icon.dark-mode, .sun.icon.dark-mode, .tiny.circular.icon.dark-mode.inverted, .user.icon.dark-mode, .remove.icon.dark-mode, .close.icon.dark-mode, .bars.dark-mode, input.dark-mode, label.dark-mode {
    color: #9f9f9f !important;
}
.header.dark-mode:not(.modal){
    color:#2ca4ab;
    
}
.ui.searching.flyout.dark-mode .input>.remove.icon {
    color: #909090;
}
.searching.flyout.dark-mode .scrolling.content.results>.result {
    color: #c3c3c3;
}

.searching.flyout.dark-mode .scrolling.content.results>.result:hover {
    background: #131416;
}

.searching.flyout.dark-mode .scrolling.content.results>.result {
    border-bottom: 1px solid rgb(255 255 255 / 10%);
    /*display: block;    
    cursor: pointer;
    overflow: hidden;
    padding-bottom: 1em;    
    margin-top: 2em;
    color:#5f5f5f;*/
}
/*---------- end dark mode --------------------*/

.ui.card .meta .narrators-chain :last-child, .ui.cards>.card .meta .narrators-chain :last-child{
    margin-right: 0.3em !important;
    margin-left: 0.3em !important;
}

input.right, .modal>.header.right, .modal>.content.right{
    text-align: right !important;
}
.ui.top.left.pointing.dropdown>.menu {
    left:0;
    right:auto;
}
.pointing.user.dropdown.item, .guest.item, .pointing.user.dropdown.item:hover{
    padding-right: 0px !important;
    padding-left: 0 !important;
    background: rgba(0,0,0,0);
}
.pointing.user.right.dropdown>.menu>.item{
    text-align: right;
}
.ui.breadcrumb .divider{
    color:#8a8a8a;
}
.bookmarks.breadcrumb .checkbox{
    margin: 0.3rem;
    vertical-align: middle;
}
.bookmarks.breadcrumb input[type=checkbox]{
    opacity: unset !important;
}

.ui.modal>.header {
    border-bottom: 1px solid rgb(154 154 154 / 15%);
}
.navlist.flyout .header_text{
    line-height: 3em;
}
.ui.selection.right.dropdown>.delete.icon, .ui.selection.right.dropdown>.dropdown.icon, .right.input>.search.icon {
    right:unset;
    left: 1em;
}
.search_results_scripture_type.label{
    margin: 1em 0 1em 0;
    background: #656565;
    color: #c5c5c5;
}

.ui.searching.flyout.right .search_results_count{
    margin: 1em 0 1em 0;
    float: right;
    font-size: 0.8em;
}
.ui.searching.flyout.left .search_results_count{
    margin: 1em 0 1em 0;
    float: left;
    font-size: 0.8em;
}
.ui.searching.flyout>.header:not(.dark-mode)>.search_results_count{
    color: rgba(0, 0, 0, .4);
}
.search_mode.fields{
    display: flex !important;
    margin-top: 1em;
}
.radio.checkbox.search_mode>label{
    padding-left: 1em !important;
    padding-right: 1em !important;
}
.radio.checkbox.search_mode.rtl>label:before, .radio.checkbox.search_mode.rtl>label:after{
    right: 0 !important;
}
.input>.search.icon{
    right:unset;
    left: 0;
}
.pushable:not(.dark-mode) span.search_result_cats.label i.icon, .pushable:not(.dark-mode) span.search_result_cats.label i.icon:hover {
    color: #c84b4b;
}
.pushable.dark-mode span.search_result_cats.label i.icon, .pushable.dark-mode span.search_result_cats.label i.icon:hover {
    color: #9f9f9f;
    background: #1b1c1d;
}

.ui.icon.right.input:not(.corner)>input {
    padding-right: 2.3em !important;
}
.ui.icon.left.input:not(.corner)>input {
    padding-left: 2.3em !important;
}
.ui.nag>.close.icon.ltr {
    right:1em;
}
.ui.nag>.close.icon.rtl {
    left:1em;
}
.beta-alert.nag {
    margin-bottom: 1em;
}
.beta-alert.nag.left>span {
    text-align: left;
    margin-left: 2em;
    display: block;
}

.beta-alert.nag.right>span {
    text-align: right;
    margin-right: 2em;
    display: block;
}

.navlist.flyout>.header>.content {
    width:100%;
}
.ui.selection.right.dropdown>i.icon:not(.dropdown):not(.remove) {
    right:0.5em;
    position: absolute;
    opacity: .5;
}
.ui.icon.left.input>i.icon {
    left:0;
}
.searching.flyout .input{
    
    margin-top: 2em;
}
.ui.icon.input>.remove.icon {
    cursor: pointer;
}
.ui.searching.flyout>.header {
    padding-bottom: 3em;
}
.ui.searching.flyout>.close.ltr.icon {
    left: 0;
}
.navlist.flyout .input {
    margin-top: 2em;
}
.ui.searching.flyout .right.input>.remove.icon, .navlist.flyout .right.input>.remove.icon {
    left:0;
    right:unset;
}
.ui.searching.flyout .left.input>.remove.icon, .navlist.flyout .left.input>.remove.icon {
    right:0;
    left:unset;
}
.search_cats_results li>a:hover {
    text-decoration: underline;
}
.search_cats_results.popup {
    border: 1px solid rgb(155 155 155);
    max-height: 50vh;
    overflow-y: scroll;
    overscroll-behavior: none;
}

.ui.selection.right.dropdown>.remove.icon {
    right: unset;
    left: 2em;
    padding: 0;
    top: 1.2em;
}
.ui.selection.left.dropdown>.remove.icon {
    left: unset;
    right: 2em;
    padding: 0;
    top: 1.2em;
}
.ui.selection.right.dropdown .label.transition {
    float: right;
}
.ui.selection.right.dropdown {
    padding-right: 0.3;
}
.ui.search.right.dropdown>.text {
    right: 2.4em;
    float: right;
}
.right .ui.label:not(.icon)>.close.icon, .right .ui.label:not(.icon)>.delete.icon {
    margin: 0 0.5em 0 0;
}
.ui.right.dropdown .menu .item{
    text-align: right;
}
.ui.menu .ui.dropdown.right .menu>.item, .ui.form.right{
    text-align: right !important;
   
}
.vertical.menu>.item {
    display: flex !important;
}
.ui.pointing.user.dropdown.right .ui.vertical.menu i.sign.out.icon, .ui.pointing.extra_nabar_items.dropdown.right .ui.vertical.menu i.icon {
    margin-left: .7rem !important;
}
.ui.form .field>.selection.dropdown>.dropdown.icon.right{
    
}
.ui.selection.right.dropdown .text, .ui.selection.right.dropdown a:last-of-type {
    /*margin-left: 3em;
    margin-right: 0.28em;*/
    float: right;
    margin-right: 1em;
}
#feedback_form .selection.dropdown{
    display: none;
}

.ui.navlist.flyout.left>.header+.scrolling.content, .ui.navlist.flyout.right>.header+.scrolling.content {
    min-height: calc(100vh - 21rem) !important;
    max-height: calc(100vh - 21rem) !important;
}

.searching.flyout .scrolling.content.results {
    max-height: calc(100vh - 20rem) !important;
    min-height: calc(100vh - 20rem) !important;
    
}
.pushable.dark-mode .sticky.segment {   
    background: #1f2125 !important;
}
.sticky.segment {
    position: fixed;
    background: #eeeeee !important;
    z-index: 9;
    width: 100%;
    margin: 0;
    padding: 0;
}
.sticky.segment.dimmed, .pushable.dark-mode .sticky.segment.dimmed {
    background: transparent !important;
}
.ui.indicating.progress {   
     margin: 0 0 2em 0 !important;
     cursor: pointer;
 }
.ui.indicating.progress>.bar {
   /* background: #d9563b;*/
}
.ui.indicating.progress, .ui.indicating.progress>.bar>.progress, .ui.indicating.progress>.label {
    display:none;
 }
 .ui.indicating.progress>.label {
    color: #7d7d7d !important;
 }
 .landing.grid {
    background: #ffffff;
    height: 100vh;
 }
 .pusher.dark-mode .landing.grid {
    background: #1f2125;
 }
 .landing.grid>.header {
    text-align: center !important;
 }
 .landing.grid>.sixteen.wide.column {
    /* text-align: center; */
    color:#585858;
 }
 .pusher.dark-mode>.landing.grid>.sixteen.wide.column {
    color:#858585;
 }
 .landing_text {
    color:#585858;
 }
 .pusher.dark-mode .landing_text {
    color:#858585;
 }
 .landing_1.header {
    color:#585858;
 }
 .landing_1.header.dark-mode {
    color:#858585;
 }
 .landing_2.header, .landing_2.header.dark-mode {
    color:#d9563b;
 }
 .landing.actions>.button {
    padding: .7em;
 }
 
.left.searching.flyout .scrolling.content.results {
    text-align: right;
}
.searching.flyout .scrolling.content.results>.result {
    border-bottom: 1px solid rgba(34,36,38,.1);
    /*display: block;    
    cursor: pointer;
    overflow: hidden;
    padding-bottom: 1em;    
    margin-top: 2em;
    color:#5f5f5f;*/
}
.search_result_cats.label  {    
    background: #f2f2f2;
    margin-bottom: .3rem;
}
.searching.flyout.dark-mode .search_result_cats.label {
    background: #545556;   
}
.searching.flyout.dark-mode .search_result_cats.label span.cat_text:not(:hover) {
    color:#f0f0f0;
 }
.searching.flyout:not(.dark-mode) .search_result_cats.label span.cat_text:not(:hover)  {     
    color: #0a0b0a;
}
.searching.flyout.dark-mode .fluid.card.result .meta {
    color: #999999;
}
.searching.flyout.dark-mode .fluid.card.result .extra {
    border-top: 1px solid #555555 !important;
}

.searching.flyout .scrolling.content.results>.result:hover {
    background: #f9fafb;
}
.highlight {
    color:#2ca4ab;
}
.glossary_term {
    cursor:pointer;    
}

.ui.footer[dir="rtl"] .horizontal.inverted.small.divided.link.list {
    direction: ltr; /* weird but true! */
}

/*.pointing.user.dropdown, .guest{
    display: none !important;
}/*




/*   tree css     */

ul{
	padding: 0;
	list-style: none;
 }
  
  
  /* ————————————————————–
	Tree core styles
  */
.navtree>.tree { 
    margin: 1em; 
}
span.cat_text{
    font-family: "HadithsFont";
    padding: .3em;
}

.navtree>.tree a.tree_label.parent ~ ul { display: none; }
  
.navtree>.tree a.tree_label.open ~ ul { display: block; }

.navtree>.tree li.disabled, .navtree>.tree a.disabled{
    color: #919191;
    cursor: not-allowed;
}

.navtree>.tree .ui.link.icon {
    color:#989898;
    
}
.navtree>.tree a+span>.ui.link.icon:not(.lightseagreen) {
    display:none;
}
.navtree>.tree a+span {    
    margin: 0;
    display: inline;
    width: 3em;
    height: 1.2em;
}
.navtree>.tree a:hover + span >.ui.link.icon, .navtree>.tree a + span:hover >.ui.link.icon, .navtree>.tree a.active + span >.ui.link.icon {
    display: inline-block;
}

.navtree>.tree a.tree_label:not(.disabled):not(.active) span.cat_text:hover
{
    font-size: 1.1em;
    font-weight: bold;
    /* background-color: #8b8b8b;
    color: #fff;
    border-radius: 1.5em;
    padding: .5em;    
    display: inline-block;
    margin: -2em .1em 0 0; */
}
.zoomtext {
    font-size: 1.1em;
    font-weight: bold;
}
.navtree.dark-mode>.tree a.tree_label:not(.disabled):not(.active) span.cat_text:hover
{
    /*font-size: 1.1em;
    font-weight: bold;
     background-color: #000;
    color: #fff;
    border-radius: 1.5em;
    padding: .5em;    
    display: inline-block;
    margin: -2em .1em 0 0; */
}

.navtree>.tree a.tree_label.active span.cat_text {
   /* background: #ebebeb;
    border-radius: 1.5em;
    padding: .3em 1em .3em 1em;*/
    font-weight: bold;
    font-size: 1.2em;
}
.navtree.dark-mode>.tree a.tree_label.active span.cat_text {
    color: coral;
    /*background: #696969;    
    border-radius: 1.5em;
    padding: .3em 1em .3em 1em;  */ 
}
.navtree.dark-mode>.tree a {
    color:deepskyblue;
}
  
  /* ————————————————————–
	Tree rows
  */
.navtree>.tree li {
	line-height: 1.2;
	position: relative;
	padding: 0 0 1em 1em;
}
.navtree.right>.tree li {
    padding: 0 1em 1em 0;
}


  
.navtree>.tree ul li { padding: 1em 0 0 1em; }
.navtree.right>.tree ul li { padding: 1em 1em 0 0; }
  
.navtree>.tree > li:last-child { padding-bottom: 0; }
  
  /* ————————————————————–
	Tree labels
  */
.navtree>.tree a.tree_label {
	position: relative;
	display: inline-block;	
    padding: 0.3em;
    border-radius: 25px;
}
  
.navtree>.tree a.parent.tree_label { cursor: pointer; }
  

  
  /* ————————————————————–
	Tree expanded icon
  */

.navtree>.tree a.parent.tree_label[data-has_scriptures="0"]:before {
    background: #000;
}

.navtree.right>.tree a.tree_label>i.icon {
    margin-right: -1.5em;
    margin-left: -0.2em;
}

.navtree>.tree a.tree_label>i.icon {
    margin-left: -1.5em;
    margin-right: 0.2em;
    color: #c84b4b;
}
.navtree>.tree a.parent.tree_label:before {
	background: #c84b4b;
	color: #fff;
	position: relative;
	z-index: 1;
	float: left;
	margin: 0 1em 0 -2.3em;
	width: 1em;
	height: 1em;
	border-radius: 1em;
	content: '+';
	text-align: center;
	line-height: .9em;
    --pseudo: 1;
}
.navtree.right>.tree a.parent.tree_label:before {
    margin: 0 -2.3em 0 1em;
    float: right;
}
  
.navtree>.tree a.parent.open:before, .navtree>.tree a.parent.open ~ .parent.tree_label:before { 
    content: '–';
    --pseudo: 1;
}
  
  /* ————————————————————–
	Tree branches
  */

.navtree>.tree li:before {
	position: absolute;
	top: 0;
	bottom: -.5em;
	left: -.5em;
	display: block;
	width: 0;
	border-left: 1px solid #777;
	content: "";
}
.navtree.right>.tree li:before {
    right: -0.5em;
    left: 0;
    border-right: 1px solid #777;
    border-left: none;
}



/*.navtree>.tree a.tree_label:not(.parent)[data-has_scriptures="0"]:after {
    content: '';
}
.navtree>.tree a.tree_label:not(.parent):after {
    content: '\25C0';
}*/
  
.navtree>.tree a.tree_label:after {
	position: absolute;
	top: -.2em;
	left: -1.5em;
	display: block;
	height: 1em;
	width: 1em;
	border-bottom: 1px solid #777;
	border-left: 1px solid #777;
	border-radius: 0 0 0 .3em;
	content: '';
}
.navtree.right>.tree .tree_label:after {
	right: -1.5em;
    left: 0;
	border-right: 1px solid #777;
    border-left: none;
    border-radius: 0 0 .3em 0;
}
  
.navtree>.tree a.parent.tree_label:after { 
    border-bottom: 0; 
    height: 0;
}
  
.navtree>.tree a.parent.open:after, .navtree>.tree a.parent.open ~ .parent.tree_label:after {
	border-radius: 0 .3em 0 0;
	border-top: 1px solid #777;
	border-right: 1px solid #777;
	border-bottom: 0;
	border-left: 0;
	bottom: 0;
	top: 0.8em;
	height: auto;
}
.navtree.right>.tree a.parent.open:after, .navtree.right>.tree a.parent.open ~ .parent.tree_label:after {
    border-radius: .3em 0 0 0;
    border-left: 1px solid #777;
    border-right: 0;
}

.navtree>.tree>li:nth-of-type(1):before {
    /* height: 6em; */
    bottom: -1.2em;
    top: 1.2em;
}

.navtree>.tree li:last-child:before {
	height: 1.3em;
	bottom: auto;
}
  
.navtree>.tree > li:last-child:before { display: none; }

.navtree>.tree ::after, .navtree>.tree ::before {
    box-sizing: unset;
}

.navtree>.tree .tree_custom {
	display: block;
	background: #eee;
	padding: 1em;
	border-radius: 0.3em;
}

.flasher {
    -moz-animation: flash .3s ease-out;
    -moz-animation-iteration-count: 3;
  
    -webkit-animation: flash .3s ease-out;
    -webkit-animation-iteration-count: 3;
  
    -ms-animation: flash .3s ease-out;
    -ms-animation-iteration-count: 3;
  }
  
  @keyframes flash {
      0% { background-color: transparent; }
      50% { background-color: #db420f; }
      100% { background-color: transparent; }
  }
  
  @-webkit-keyframes flash {
      0% { background-color: transparent; }
      50% { background-color: #db420f; }
      100% { background-color: transparent; }
  }
  
  @-moz-keyframes flash {
      0% { background-color: transparent; }
      50% { background-color: #db420f; }
      100% { background-color: transparent; }
  }
  
  @-ms-keyframes flash {
      0% { background-color: transparent; }
      50% { background-color: #db420f; }
      100% { background-color: transparent; }
  }
  
  .poker {
    -moz-animation: poke .3s ease-out;
    -moz-animation-iteration-count: 3;
  
    -webkit-animation: poke .3s ease-out;
    -webkit-animation-iteration-count: 3;
  
    -ms-animation: poke .3s ease-out;
    -ms-animation-iteration-count: 3;
  }
  
  @keyframes poke {
      0% { background-color: transparent; }
      50% { background-color: #5d5d5d; }
      100% { background-color: transparent; }
  }
  
  @-webkit-keyframes poke {
      0% { background-color: transparent; }
      50% { background-color: #5d5d5d; }
      100% { background-color: transparent; }
  }
  
  @-moz-keyframes poke {
      0% { background-color: transparent; }
      50% { background-color: #5d5d5d; }
      100% { background-color: transparent; }
  }
  
  @-ms-keyframes poke {
      0% { background-color: transparent; }
      50% { background-color: #5d5d5d; }
      100% { background-color: transparent; }
  }

  /* Rubber-Band Effect Styles */
 /* .ui.content.grid {
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
  }
  .rubberband {
    position: relative;
    margin: 15vh 0 0 0;
  }
  .ui.interactions.segment {
    scroll-snap-align: start;
  }*/

  /* Initial styles for floating text */
/* Scroll-up cue (appears when user scrolls up and interactions.segment is visible) */
#scroll_up_cue {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7); 
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1.2em;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    transition: opacity 0.5s ease; /* Fade in/out */
}

/* Animation for page load */
#scroll_up_cue.page_load_visible {
    animation: fadeInOut 2s ease;
}

/* Keyframes for fading effect */
@keyframes fadeInOut {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}

/* Trigger visibility when the bottom edge of interactions.segment is visible */
.interactions-visible + #scroll_up_cue {
    opacity: 1;
}

/* Scroll-down cue (appears when user scrolls down and reaches top edge of .footer.segment) */
#scroll_down_cue {
    position: fixed;
    bottom: 2em;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7); 
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1.2em;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
    transition: opacity 0.5s ease; /* Fade in/out */
}

/* Trigger visibility when top edge of footer.segment is visible */
.footer-visible + #scroll_down_cue {
    opacity: 1;
}

.prev_next.buttons {
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 2em;
    gap: .5em;
    z-index: 5;    
}
.prev_next.buttons>button {
    display:none;
}
.prev_next.buttons.ltr {
    right:0;
}
.prev_next.buttons.rtl {
    left:0;
}
.prev_next.buttons>button:not(.dark-mode) {
    background: #000000;
    color: #ffffff;
}

/*--------- Tour ------- */
.tour.flyout.popup {
    /*transform: translate(-50%, 50%);*/
    max-height: max-content;
    min-height: max-content;
    height: max-content;
    position: absolute;
}
.tour.popup {
    width:max-content;
}
.tour.popup:before{
    display:none;
}
.tour.popup.dark-mode {
    border: .1em solid #d9563a;
}
.tour.navlist.visible.rtl.popup, .tour.flyout.rtl.popup {
    right:0 !important;
}
.tour.navlist.visible.ltr.popup, .tour.flyout.ltr.popup {
    left:0 !important;
}
.tour_next.button, .tour_next.button:hover, .tour_cancel.button, .tour_cancel.button:hover {
    background: #d9563a;
    color: white;
}
.tour .divider {
    margin: .5em;
}
.glow:not(a), .navtree li a.glow:before {
    animation: pulse-animation 2s infinite;
    box-shadow: 0px 0px 1px 1px #0000001a;
    z-index: 9999;
}

  
  @keyframes pulse-animation {
    0% {
      box-shadow: 0 0 0 0px #d9563a;
    }
    100% {
      box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
    }
  }

/* rubber band effect */