body, html{
    margin: 0;
    padding: 0;
}

*{
    font-family: IRANSansWeb;
    font-size: 12px;
    color: #456;
    unicode-bidi: embed;
    direction: rtl;
    box-sizing: border-box;
}

.tester01{
    outline: 1px dotted red;
}


#quran,
#latest{
    position: absolute;
    top: 3em;
    overflow-y: scroll;
    right: 0;
    width: 50vw;
    bottom: 35rem;
    padding: 0.25em;
}

#latest{
    right: auto;
    left: 0;
    background-color: #ffd;
}

#quran [class*="a"]{
    padding: 0 0.5em;
}

#quran *::selection{
    background-color: #8e8;
}

#quran [class^="p"]{
    padding: 1.5em 1em 0.5em;
    border-color: #0a06;
    border-width: 1px;
    border-style: none none dotted;
    position: relative;
}

#quran .numberpage{
    position: absolute;
    bottom: -0.9rem;
    left: 1rem;
    border: 1px dotted #0a06;
    border-radius: 1rem;
    background-color: #fff;
    font-family: IRANSansWeb;
    color: #080;
    min-width: 3rem;
    text-align: center;
    z-index: 9999;
    border-width: 0px 1px 2px;
    /*box-shadow: 0px 2px 2px 0px #0408;*/
}

#quran .number{
    font-family: IRANSansWeb;
    margin-right: 0.5rem;
    font-size: 1.1rem;
    color: #800;
}


#quran *,
.latest-item-text{
    font-family: me_quran;
    font-size: 1.25rem;
}

#latest-titles,
.latest-item{
    display: flex;
}

#latest-titles{
    background-color: #ff8;
    outline: 1px dotted #fd8;
    position: sticky;
    top: 0;
}

.latest-item{
    outline: 1px dotted #fd8;
    margin-top: 1px;
}

#latest-titles #latest-title-text{
    flex-grow: 1;
    border: none;
}

#latest .latest-item-remove,
#latest .latest-item-page,
#latest .latest-item-aie,
#latest .latest-item-soore,
#latest-titles div{
    font-family: IRANSansWeb;
    font-size: 1rem;
    width: 4rem;
    flex-basis: 4rem;
    flex-shrink: 0;
    border-left: 1px dotted #fd8;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

#latest .latest-item-remove,
#latest-titles #latest-title-remove{
    width: 2rem;
    flex-basis: 2rem;
}

#latest .latest-item-page,
#latest .latest-item-aie{
    font-size: 1.25rem;
}

#latest-titles div{
    font-weight: bold;
    line-height: 2.5rem;
}

.latest-item-text{
    padding: 0.5rem 1rem 0.5rem 0;
}


.remove-item{
    background-color: red;
    width: 1.5rem;
    height: 1.5rem;
    aspect-ratio: 1/1;
    border-radius: 100%;
    color: #fff;
    font-weight: bold;
    font-size: 1.6rem;
    line-height: 1.9rem;
    cursor: pointer;
}


#output{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    text-align: center;
    min-height: 35rem;
    word-spacing: 1rem;
}

#output1,
#output2{
    position: absolute;
    /*left: 30px;*/
    /*right: 30px;*/
    /*bottom: 0;*/
    /*padding: 0 0 16px;*/
    display: flex;
    align-items: flex-end;
    justify-content: center;

    left: -830px;
    right: -830px;
    bottom: -95px;
    scale: 0.5;

}

#output1 *,
#output2 *{

}

.output_col{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*margin: 0 46px;*/
    /*min-height: 5rem;*/

    /*border-image-source: url("../images/background-02.png");*/
    /*border-image-slice: 14 48 fill;*/
    /*border-image-width: 14px 48px;*/
    /*border-image-outset: 14px 48px;*/
    /*border-image-repeat: repeat stretch;*/

}

.output_col2{
    /*flex-grow: 1;*/
    /*padding: 0 0.5em;*/
}

.output_col1,
.output_col3{
    height: 5rem;
    min-width: 5rem;
    padding: 0 1rem;
    display: none;
}

.output_item.output_text{
    font-family: me_quran;
    font-size: 8rem;
    /*padding: 0 0.5rem 0.5rem;*/
    padding: 0;
    color: #040;
}

.output_item.output_page,
.output_item.output_aie{
    white-space: nowrap;
}

.output_item.output_soore span{
    display: block;
}

.output_page .output_title,
.output_aie .output_title{
    margin-left: 0.35em;
}

.output_title,
.output_value{
    font-family: IRANSansWeb;
    font-size: 1.5rem;
}

.output_title{
    font-size: 1em;
    vertical-align: middle;
    font-weight: lighter;
}

.output_value{
    font-weight: bold;
    vertical-align: sub;
}


#controller{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3em;
    background-color: #eef;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0.5em;
}

.search_items_container{

}

.c_title{
    margin-left: 0.5em;
    margin-right: 2em;
}

.c_title:after{
    content: ":";
}

.c_input{
    width: 5em;
    border: 1px solid #abc;
    border-radius: 0.25em;
}

.c_input:focus{
    outline: none;
    border-width: 2px;
    border-color: #9ab;
}

.c_input[type=button] {
    width: 7em;
}

.shortcut{
    font-size: 0.7em;
    position: relative;
    top: -0.1em;
    /*margin: 0 0.2em;*/
    letter-spacing: 0.2em;
}

.shortcut:before{
    content: "(";
    /*padding: 0 0.2em;*/
}

.shortcut:after{
    content: ")";
    /*padding: 0 0.2em;*/
}

#c_search_soore .c_input{
    width: 10em;
}

#c_search_text .c_input{
    width: 15em;
}


.selection-page,
#quran .selection-page .numberpage{
    background-color: #dfd;
    box-shadow: 0px 5px 10px -5px #0402;
    color: #808;
}

.selection-aie{
    background-color: #afa;
}

#output1, #output2{
    height: 100%;
}

.output_col{
    position: absolute;
    /*bottom: 30px;*/
    width: 100%;
}



.output_border{
    /*background-image: url("images/background-02.png");*/
}


.output_border{
    display: block;
}

.border_top,
.border_btm{
    height: 78px;
    direction: ltr;
    display: flex;
    width: 100%;
}

.border_mdl{
    display: flex;
    width: 100%;
    position: relative;
}

.border_top div,
.border_btm div{
    height: 100%;
}

.border_mdl div{
    /*height: 100%;*/
    width: 168px;
    background-position: center;
}
.border_mdl div.output_text{
    flex-grow: 1;
    background-image: url("../images/brdr-back.png");
    min-height: 144px;
    margin: 0 -1px;
}


.border_tl,
.border_tr,
.border_bl,
.border_br{
    width: 168px;
    background-repeat: no-repeat;
}

.border_tl{
    background-image: url("../images/brdr-tl.png");
}

.border_tr{
    background-image: url("../images/brdr-tr.png");
}

.border_tm{
    background-image: url("../images/brdr-tm.png");
    width: 262px;
}

.border_ts{
    background-image: url("../images/brdr-ts.png");
    flex-grow: 1;
    margin: 0 -1px;
}

.border_bl{
    background-image: url("../images/brdr-bl.png");
}

.border_br{
    background-image: url("../images/brdr-br.png");
}

.border_bm{
    background-image: url("../images/brdr-bm.png");
    width: 262px;
}

.border_bs{
    background-image: url("../images/brdr-bs.png");
    flex-grow: 1;
}

.border_cr{
    background-image: url("../images/brdr-rm.png");
}

.border_cl{
    background-image: url("../images/brdr-lm.png");
}

.border_cc{
    background-image: url(../images/brdr-back.png);
    position: absolute;
    /*background-color: red;*/
    z-index: -1;
    left: 150px;
    right: 150px;
    top: -5px;
    bottom: -5px;
    width: unset !important;
}
}



form{
    text-align: center;
    width: 25em;
    margin: 2em auto;
    border: 1px solid #0402;
    padding: 1em;
    border-radius: 1em;
}

form,
form *{
    direction: ltr;
}


form label{
    width: 6rem;
    display: inline-block;
}

form input{
    margin: 0 0 1em;
}