@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: normal;
    src: url('../Fonts/IRANSans/woff/IRANSansWeb(FaNum).woff') format('woff')
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: bold;
    src: url('../Fonts/IRANSans/woff/IRANSansWeb(FaNum)_Bold.woff') format('woff')
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 900;
    src: url('../Fonts/IRANSans/woff/IRANSansWeb(FaNum)_Black.woff') format('woff')
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 300;
    src: url('../Fonts/IRANSans/woff/IRANSansWeb(FaNum)_Light.woff') format('woff')
}

@font-face {
    font-family: IRANSans;
    font-style: normal;
    font-weight: 500;
    src: url('../Fonts/IRANSans/woff/IRANSansFaNum_Med.woff') format('woff')
}

@font-face {
    font-family: IRANSansEn;
    font-style: normal;
    font-weight: normal;
    src: url('../Fonts/IRANSans/woff/IRANSansWeb.woff') format('woff')
}

@font-face {
    font-family: IRANSansEn;
    font-style: normal;
    font-weight: bold;
    src: url('../Fonts/IRANSans/woff/IRANSansWeb_Bold.woff') format('woff')
}

@font-face {
    font-family: IRANSansEn;
    font-style: normal;
    font-weight: 900;
    src: url('../Fonts/IRANSans/woff/IRANSansWeb_Black.woff') format('woff')
}

@font-face {
    font-family: IRANSansEn;
    font-style: normal;
    font-weight: 300;
    src: url('../Fonts/IRANSans/woff/IRANSansWeb_Light.woff') format('woff')
}

@font-face {
    font-family: FontAwesome;
    font-style: normal;
    font-weight: 900;
    font-display: auto;
    src: url("../Fonts/Awesome/fonts/fa-solid-900.woff") format("woff");
}

@font-face {
    font-family: UthmanTaha;
    font-style: normal;
    font-weight: normal;
    src: url("../Fonts/UthmanicHafs1-Ver18.ttf") format("truetype");
}

@font-face {
    font-family: DINRound;
    font-style: normal;
    font-weight: normal;
    src: url("../Fonts/DINRound.ttf") format("truetype");
}

@font-face {
    font-family: 'belquran-icon';
    src: url('../Fonts/Belquran-icon/font/belquran-icon.woff?ver2.2') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'danstevis';
    src: url('../Fonts/danstevis.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'nastaliq';
    src: url('../Fonts/nastaliq.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'nazanin';
    src: url('../Fonts/nazanin.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'titr';
    src: url('../Fonts/titr.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'yekan';
    src: url('../Fonts/yekan.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'vazir';
    src: url('../Fonts/vazir/vazir.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'maktab';
    src: url('../Fonts/maktab/maktabrita-regular.ttf') format('truetype');
}

* {
    outline: none !important;
}

#app {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: absolute;
    width: 100%;
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.fontEN {
    font-family: IRANSansEn;
    word-spacing: normal !important;
}

.form-control {
    border-color: #e5e5e5;
}
/**********************************************************/
/*--------------------متغیر های رنگ--------------------*/
/**********************************************************/
:root {
    --c0: #ff0000;
    --c1: #5500ec;
    --c2: #ff00e3;
    --c3: #e8bf00;
    --c4: #00c7ff;
    --c5: #ff8315;
    --c6: #d78dff;
    --c7: #acff00;
    --c8: #ff9d9d;
    --c9: #a0ff9d;
    --c10: #9deeff;
    --c11: #9d9dff;
    --c12: #00b307;
    --c13: #009bda;
    --c14: #814717;
    --c15: #1200ff;
}

button[disabled],
button:disabled {
    opacity: 0.6;
    cursor: default !important;
}

/**********************************************************/
/*--------------------کلمات رنگی-------------------*/
/**********************************************************/
.backDefault {
    background: #9f9f9f;
}

.back0 {
    background: var(--c0);
}

.back1 {
    background: var(--c1);
}

.back2 {
    background: var(--c2);
}

.back3 {
    background: var(--c3);
}

.back4 {
    background: var(--c4);
}

.back5 {
    background: var(--c5);
}

.back6 {
    background: var(--c6);
}

.back7 {
    background: var(--c7);
}

.back8 {
    background: var(--c8);
}

.back9 {
    background: var(--c9);
}

.back10 {
    background: var(--c10);
}

.back11 {
    background: var(--c11);
}

.back12 {
    background: var(--c12);
}

.back13 {
    background: var(--c13);
}

.back14 {
    background: var(--c14);
}

.back15 {
    background: var(--c15);
}

/**********************************************************/
/*--------لول های تری ویو دسته بندی---------*/
/**********************************************************/

.Level0 {
    border-right-color: var(--c0) !important;
    padding-left: 10px !important;
}

.Level1 {
    border-right-color: var(--c1) !important;
    padding-left: 10px !important;
}

.Level2 {
    border-right-color: var(--c2) !important;
    padding-left: 10px !important;
}

.Level3 {
    border-right-color: var(--c3) !important;
    padding-left: 10px !important;
}

.Level4 {
    border-right-color: var(--c4) !important;
    padding-left: 10px !important;
}

.Level5 {
    border-right-color: var(--c5) !important;
    padding-left: 10px !important;
}

.Level6 {
    border-right-color: var(--c6) !important;
    padding-left: 10px !important;
}

.Level7 {
    border-right-color: var(--c7) !important;
    padding-left: 10px !important;
}

.Level8 {
    border-right-color: var(--c8) !important;
    padding-left: 10px !important;
}

.Level9 {
    border-right-color: var(--c9) !important;
    padding-left: 10px !important;
}

.Level10 {
    border-right-color: var(--c10) !important;
    padding-left: 10px !important;
}

.Level11 {
    border-right-color: var(--c11) !important;
    padding-left: 10px !important;
}

.Level12 {
    border-right-color: var(--c12) !important;
    padding-left: 10px !important;
}

.Level13 {
    border-right-color: var(--c13) !important;
    padding-left: 10px !important;
}

.Level14 {
    border-right-color: var(--c14) !important;
    padding-left: 10px !important;
}

.Level15 {
    border-right-color: var(--c15) !important;
    padding-left: 10px !important;
}

/**********************************************************/
/*--------رنگ کادر منوی کنار دیاگرام شناسنامه---------*/
/**********************************************************/
.borderDefault {
    border-color: #9f9f9f !important;
}

.border0 {
    border-color: var(--c0) !important;
}

.border1 {
    border-color: var(--c1) !important;
}

.border2 {
    border-color: var(--c2) !important;
}

.border3 {
    border-color: var(--c3) !important;
}

.border4 {
    border-color: var(--c4) !important;
}

.border5 {
    border-color: var(--c5) !important;
}

.border6 {
    border-color: var(--c6) !important;
}

.border7 {
    border-color: var(--c7) !important;
}

.border8 {
    border-color: var(--c8) !important;
}

.border9 {
    border-color: var(--c9) !important;
}

.border10 {
    border-color: var(--c10) !important;
}

.border11 {
    border-color: var(--c11) !important;
}

.border12 {
    border-color: var(--c12) !important;
}

.border13 {
    border-color: var(--c13) !important;
}

.border14 {
    border-color: var(--c14) !important;
}

.border15 {
    border-color: var(--c15) !important;
}


/**********************************************************/
/*-------------------------ui colors----------------------*/
/**********************************************************/
:root {
    --darkblue: #2b345f;
    --red: #fa626b;
    --purple: #6967ce;
    --yellow: #fdbc0a;
    --greenblue: #30b2d2;
}

.darkblue {
    color: var(--darkblue);
}

.red {
    color: var(--red);
}

.purple {
    color: var(--purple);
}

.yellow {
    color: var(--yellow);
}

.greenblue {
    color: var(--greenblue);
}

.bgdarkblue {
    background: var(--darkblue);
}

.bgred {
    background: var(--red);
}

.bgpurple {
    background: var(--purple);
}

.bgyellow {
    background: var(--yellow);
}

.bggreenblue {
    background: var(--greenblue);
}

.bggreenblue2 {
    background: #6bbfd2;
}

.bghighlight {
    background: #FFF9C4;
}

.bggray {
    background: #eaeaea;
}
/*/**********************************/
.fa {
    font-family: FontAwesome;
    vertical-align: middle;
}

.fa-1-5x {
    font-size: 1.5em;
}

.fa-1-25x {
    font-size: 1.25em;
}

.rtldir {
    direction: rtl !important;
}

.ltrdir {
    direction: ltr !important;
}

html, body {
    font-family: IRANSans;
    word-spacing: -1px;
}

body {
    direction: rtl;
    text-align: right;
    color: #030a2c;
    background: url(../image/pat3.jpg);
    background-size: 115px;
}

.modal-body {
    min-height: 140px;
}

.modal-content {
    border-radius: 15px;
    border: none;
}

button, a, label {
    user-select: none;
}

.Hidden {
    display: none;
}

@media(max-width:768px) {
    .HideOnMobile {
        display: none !important;
    }
}

.table-bordered td, .table-bordered th {
    border: 1px solid;
    border-color: #f2f2f2 #e5e5e5 #f2f2f2 #e5e5e5;
}

.area {
    background: #f4f5fa;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    z-index: -1;
}

.container-me {
    width: 100% !important;
    margin: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

@media(max-width:768px) {
    .container-me {
        width: 99% !important;
    }
}

.fs14 {
    font-size: 14px !important;
}

.fs12 {
    font-size: 12px !important;
}

.curspointer {
    cursor: pointer;
}

.d-grid {
    display: grid;
}


.modal-full {
    max-width: 98%;
}

.maindiv {
    flex: 1;
    top: 0;
    position: relative;
    left: 0;
    height: 100%;
}

a, .btn-link {
    color: #0366d6;
}

.Hide {
    display: none !important;
}

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

    .btn-primary:hover {
        color: #fff;
        background-color: #004c9d;
        border-color: #004c9d;
    }

.img-quran {
    border-bottom: 2px solid #cecece !important;
}

.top-row {
    height: 2.5rem;
    display: flex;
    align-items: center;
    background: linear-gradient(45deg,#008abf,#62c9e1,#5a8dcd);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logotop {
    height: 2.5rem;
    text-align: center;
    width: 200px;
    background: linear-gradient(45deg, #f7f7f7e6 33%, #efefefe6 34%);
    border-bottom-left-radius: 55px;
    padding-left: 0.75rem;
    box-shadow: 1px -1px 5px 0px #000000bd;
}

@media(max-width:768px) {
    .top-row {
        position: relative;
        height: auto;
        display: block;
    }

    .logotop {
        margin-left: 0;
        width: 100%;
        border-radius: 0 !important;
    }
}

.logotop img {
    max-width: 100%;
    height: 100%;
}

/**********************************************************/
/*--------------------صفحه اول منوها--------------------*/
/**********************************************************/
.main-icons-item {
    padding: 5px !important;
}

    .main-icons-item .card:hover {
        box-shadow: 0 0 13px -2px #3d33989e;
        transition: all ease-in .3s;
    }

.ico-main {
    width: 101px;
    margin: auto;
}

.ico-text-main {
    font-size: 18px;
    padding: 0.5rem 0;
}

.slogan-main {
    color: #6967ce;
    font-size: 17px;
    padding-top: 0.75rem;
}

.menuitembtns {
    bottom: 0;
    position: absolute;
    inset-inline-end: 0;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
}

.btnvorood {
    padding: 7px 15px;
    display: inline-block;
    border-radius: 10px;
    border-bottom-right-radius: 1px;
    border-bottom-left-radius: 1px;
    box-shadow: 1px -1px 2px #c6c6c6;
    background: #fffdf2;
    color: #ff5722 !important;
    min-width: 70px;
}

    .btnvorood:hover {
        color: black !important;
    }


/********************************/
.section-feature .main-icons {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
}

.section-feature .main-ic-item {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /* position: relative;*/
    height: 240px;
    /* padding: 2%;
    float: left;*/
    margin-bottom: 20px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.section-feature .sf-wrap {
    background-repeat: no-repeat;
    /* position: absolute;
    width: 97%;*/
    height: 100%;
    left: auto;
    right: auto;
    top: 0;
    -moz-perspective: 600px;
    -webkit-perspective: 600px;
    -ms-perspective: 600px;
    -o-perspective: 600px;
    perspective: 600px;
    cursor: pointer;
    box-shadow: 0 0 13px -2px #3e396b2e;
    border-radius: 30px;
}

.sf-mdl-left,
.sf-mdl-right,
.sf-mdl-left-full,
.sf-mdl-right-full {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    overflow: hidden;
}

.sf-icon {
    position: absolute;
    top: 30px;
    text-align: center;
    width: 100%;
    left: 0;
    width: 200%;
    color: #e4610e;
}


.sf-mdl-left-full .sf-icon,
.sf-mdl-right-full .sf-icon {
    color: #fff;
}

.sf-mdl-right,
.sf-mdl-right-full {
    left: auto;
    right: 0;
}

.sf-mdl-left-full,
.sf-mdl-right-full {
    background-color: #244e4a;
    z-index: 9;
    color: #fff;
}


.sf-mdl-left,
.sf-mdl-right {
    background-color: #fff;
    z-index: 10;
}

.sf-wrap > .sf-mdl-right-full,
.sf-wrap > .sf-mdl-right {
    background-position: right -30px;
}

.sf-wrap > .sf-mdl-right,
.sf-wrap > .sf-mdl-left-full {
    -moz-backface-visibility: hidden;
    -moz-transform-style: preserve-3d;
    -moz-transform-origin: 0 0;
    -moz-transform: rotateY(0deg);
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 0 0;
    -webkit-transform: rotateY(0deg);
    -o-backface-visibility: hidden;
    -o-transform-style: preserve-3d;
    -o-transform-origin: 0 0;
    -o-transform: rotateY(0deg);
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform-origin: 0 0;
    transform: rotateY(0deg);
}

.sf-wrap.hover > .sf-mdl-right {
    -webkit-transform: rotateY(-45deg);
    -moz-transform: rotateY(-45deg);
    -ms-transform: rotateY(-45deg);
    -o-transform: rotateY(-45deg);
    transform: rotateY(-45deg);
    background-color: #ececec;
}

.sf-wrap > .sf-mdl-left-full {
    -moz-transform-origin: 100% 0;
    -webkit-transform-origin: 100% 0;
    -o-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.sf-wrap.active > .sf-mdl-right,
.sf-wrap.hover.active > .sf-mdl-right {
    -moz-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.sf-wrap.active > .sf-mdl-left-full {
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.active .sf-mdl-left-full,
.active .sf-mdl-right-full {
    z-index: 11;
}

.sf-wrap div h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 22px;
}

.sf-wrap div h3,
.sf-wrap div p {
    width: 200%;
    position: absolute;
    text-align: center;
    left: 0;
    top: 140px;
}

.sf-wrap div p {
    padding: 0 10%;
    line-height: 18px;
    font-size: 13px;
    top: 170px;
}

.sf-wrap div.sf-mdl-right h3,
.sf-wrap div.sf-mdl-right-full h3,
.sf-wrap div.sf-mdl-right p,
.sf-wrap div.sf-mdl-right-full p,
.sf-mdl-right .sf-icon,
.sf-mdl-right-full .sf-icon {
    left: auto;
    right: 0;
}

.sf-wrap div.sf-mdl-right-full a {
    padding: 0 5px;
    bottom: 5px;
    position: absolute;
    margin: 0 5px;
    inset-inline-end: 0;
    font-size: 15px;
}

.sf-wrap div.sf-mdl-left-full a {
    padding: 0 5px;
    bottom: 10px;
    position: absolute;
    inset-inline-end: 15px;
    font-size: 15px;
    color: #ffde93;
}

.sf-wrap .sf-mdl-left,
.sf-wrap .sf-mdl-left-full {
    /* border-bottom-left-radius: 10px;*/
    border-top-left-radius: 25px;
}

.sf-wrap .sf-mdl-right,
.sf-wrap .sf-mdl-right-full {
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
}


/**********************************************************/
/*--------------------صفحه اول منوها--------------------*/
/**********************************************************/

.form-check-label {
    margin-right: 1.5rem;
}

.card {
    border: none !important;
    box-shadow: 0 0 13px -2px #3e396b2e;
    border-radius: .35rem !important;
}

.card-header {
    padding: .4rem 1.25rem !important;
}

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: none !important;
}

.modal-header {
    padding: 0.5rem !important;
    display: block !important;
    background: url('../image/belqoran/pat3.jpg');
    background-size: 175px;
}

.modal-footer {
    padding: 0.25rem !important;
}

@media(max-width:768px) {
    .modal-footer {
        justify-content: center;
    }
}

hr {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

footer {
    text-align: center;
    background: white;
    width: 100%;
    margin-top: 0.25rem;
    border-top: 1px solid #efefef;
}

    footer p {
        margin: 0;
        padding: 0.5rem;
        font-size: 14px;
        color: #b5b5b5;
    }

.footer-title {
    color: #dab794;
}

.sitelink {
    color: #8db9e2;
}

.navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
}

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: #F44336;
    color: white;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 100000;
    text-align: center;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
        color: black;
    }

    #blazor-error-ui span {
        font-size: 1.2rem;
        padding: 1rem;
    }

    #blazor-error-ui .btn {
        animation: shake 1s ease-in-out infinite;
    }


#blazor-update-ui {
    background: #4caf50;
    color: white;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 100000;
    text-align: center;
}

    #blazor-update-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
        color: black;
    }

    #blazor-update-ui span {
        font-size: 1.2rem;
        padding: 1rem;
    }

.auth a, .auth button {
    color: white;
    transition: all ease-in 0.3s;
    vertical-align: middle;
    text-decoration: none;
}

    .auth a:hover {
        color: #673AB7;
    }

.profile a {
    color: black;
    text-align: right;
    font-size: 14px;
}

.profile .dropdown-menu {
    min-width: unset !important;
}

#dropprofile {
    color: white;
}

.profile {
    display: inline-block;
    cursor: pointer;
    margin-inline-start: 0.5rem;
}

.userimg {
    width: 34px;
}

@media (max-width: 450px) {
    .logindiv {
        display: block;
    }

    .loginline {
        display: none;
    }
}

.logindiv {
    display: inline-block;
}

#Shownotes {
    background: #0000001f;
    border-radius: 5px;
    padding: 0.2rem;
}

.ShowNotesHelp {
    display: none;
    opacity: 0;
    position: absolute;
    background: #fff;
    inset-inline-end: 5px;
    box-shadow: 0px 0px 14px -2px #54545440;
    width: 260px;
    padding: 0.25rem;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}


#Shownotes:hover + .ShowNotesHelp {
    opacity: 1;
    display: unset;
}

.ShowNotesHelp img {
    box-shadow: 0px 0px 3px -1px #6e6e6e;
}

.ShowNotesHelp h6 {
    font-size: 0.9rem;
    font-weight: bold;
    margin: 0.5rem 0.5rem 0.25rem;
}

.ShowNotesHelp p {
    font-size: 0.9rem;
    padding: 0 0.5rem;
    text-align: justify;
    color: gray;
    margin-bottom: 0.5rem;
}


#Showtags {
    background: #0000001f;
    border-radius: 5px;
    padding: 0.2rem;
}

.ShowtagsHelp {
    display: none;
    opacity: 0;
    position: absolute;
    background: #fff;
    inset-inline-end: 5px;
    box-shadow: 0px 0px 14px -2px #54545440;
    width: 260px;
    padding: 0.25rem;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}

#Showtags:hover + .ShowtagsHelp {
    opacity: 1;
    display: unset;
}

.ShowtagsHelp img {
    box-shadow: 0px 0px 3px -1px #6e6e6e;
}

.ShowtagsHelp h6 {
    font-size: 0.9rem;
    font-weight: bold;
    margin: 0.5rem 0.5rem 0.25rem;
}

.ShowtagsHelp p {
    font-size: 0.9rem;
    padding: 0 0.5rem;
    text-align: justify;
    color: gray;
    margin-bottom: 0.5rem;
}


#Showdescription {
    background: #0000001f;
    border-radius: 5px;
    padding: 0.2rem;
}

.ShowdescHelp {
    display: none;
    opacity: 0;
    position: absolute;
    background: #fff;
    inset-inline-end: 5px;
    box-shadow: 0px 0px 14px -2px #54545440;
    width: 260px;
    padding: 0.25rem;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}

#Showdescription:hover + .ShowdescHelp {
    opacity: 1;
    display: unset;
}

.ShowdescHelp img {
    box-shadow: 0px 0px 3px -1px #6e6e6e;
}

.ShowdescHelp h6 {
    font-size: 0.9rem;
    font-weight: bold;
    margin: 0.5rem 0.5rem 0.25rem;
}

.ShowdescHelp p {
    font-size: 0.9rem;
    padding: 0 0.5rem;
    text-align: justify;
    color: gray;
    margin-bottom: 0.5rem;
}

/* پیش فرض دکمه های یاداشت گذاری غیر فعال باشد */

/**********************************************************/
/*---------------------صفحه اول----------------*/
/**********************************************************/
.btnlang {
    box-shadow: -7px 6px 4px -3px #455a6480;
    border-radius: 1.5rem 5rem 5rem 1.5rem !important;
    background: linear-gradient(281deg,#7bcdc8b8,#fff,#fff,#fff);
}

.img-tile {
    position: absolute;
    top: 3px;
    right: -5px;
    filter: drop-shadow(-3px 1px 1px #060d44);
    width: 110px;
}

.langtitle {
    display: inline-block;
    padding: 0.5rem 3rem 0.5rem 0rem;
    margin-right: 4rem;
}

    .langtitle .text {
        color: #2b345f;
        transition: all ease-in-out .3s;
    }

    .langtitle .lang {
        color: #e5b112;
        transition: all ease-in-out .3s;
        font-size: 22px;
    }

.langlink:hover .btnlang {
    background: linear-gradient(299deg,#7bcdc8b8,#fff,#fff);
}

.langlink:hover .langtitle .text {
    color: #e5b112;
}

.langlink:hover .langtitle .lang {
    color: #2b345f;
}

.crossplatico img {
    width: 120px;
}

.indexLangs {
    background: #60888b4d;
    padding: 2rem .5rem;
    border-radius: 1.5rem;
    border: 2px dashed #ffffff;
    box-shadow: 0px 0px 0px 2px #60888b4d;
    justify-content: center;
    text-align: center;
    margin-top: 2.5rem;
}

.indexLinks h5 {
    color: #3182a9;
    text-align: center;
    font-weight: bold;
}

.indexLinks a {
    display: block;
    color: #000;
    padding: 1rem 0.75rem;
    margin: 0 0.1rem;
    transition: all ease-in-out .3s;
    font-size: 14px;
    background: linear-gradient(45deg, #f1f1f1, #ffffff, #f1f1f1);
    border-radius: 40px 10px 40px 10px;
    text-align: center;
    border-inline-start: 6px solid #f2d075;
    box-shadow: -3px 2px 2px #00000036;
    margin-bottom: 0.5rem;
}

    .indexLinks a:hover {
        background: linear-gradient(45deg,#f2d075,#ffe9ad,#f2d075);
        text-decoration: none;
    }

.indexCrossPlat {
    background: #60b3aa;
    border-radius: 8px;
    border: 1px dashed #ffffff;
    box-shadow: 0px 0px 0 2px #60b3aa;
    text-align: center;
    margin: .5rem;
    padding: .25rem .5rem;
}
/**********************************************************/
/*--------------------search page------------------*/
/**********************************************************/
.anavinmenu {
    background: #fff;
    box-shadow: inset 0 0 10px #00000040;
    border-radius: 10px;
    padding: 0.7rem;
    border-color: #4caf50;
    border-width: 2px;
    overflow: auto;
}

.closedialog {
    color: #f00;
    cursor: pointer;
    padding: 0.25rem;
}

    .closedialog:hover {
        color: gray;
    }

.anavindialogcontent {
    margin-left: inherit;
}

    .anavindialogcontent .tree {
        height: 100%;
    }

    .anavindialogcontent .treeviewsection {
        background: #ffffff73;
        box-shadow: 0 2px 10px #0000002e;
        border-radius: 10px;
        padding: 0;
    }

.insearchsection-title {
    padding: 0.5rem;
    color: #000;
    font-weight: 700;
    border-top-left-radius: 5px !important;
    border-top-right-radius: 5px !important;
    margin: 0;
    text-align: center;
}

.anavindialogcontent .listsection {
    background: #fff;
    box-shadow: 0 2px 10px #0000002e;
    border-radius: 10px;
    padding: 0.5rem 0.5rem 1.5rem;
}

.listsection .natayejcount {
    font-weight: normal;
    background: #4caf50;
    border-radius: 5px;
    color: #fff;
    padding: 0 0.25rem;
    margin: 0 0.2rem;
}

.anavindialogcontent .listsection .tbltreeview .TableMain {
    overflow-y: auto;
    max-height: calc(100vh - 15rem);
}


.tbltreeview .TableMain {
    overflow-y: auto;
    max-height: 60vh;
}

.anavindialogcontent .tbltreeview .TableMain .table .thead-light th {
    color: #000000;
    background-color: #fffbed;
    border-bottom: 2px solid #f29964 !important;
}

.anavindialogcontent .tbltreeview .table-bordered td,
.anavindialogcontent .tbltreeview .table-bordered th {
    border: none !important;
}

.anavindialogcontent .tbltreeview .table-striped tbody tr:nth-of-type(odd) {
    background-color: #9393930d;
}

.btnshowquran {
    background: linear-gradient(90deg, #4CAF50, #4CAF50);
    transform: scale(1.3);
    text-shadow: 1px 1px 2px #0a6537;
}

.showquranlight {
    position: absolute;
    top: 0;
    height: 30px;
    width: 30px;
    background: radial-gradient(white,#ffffff,#ffffff00, transparent);
    animation: light 3s ease-in-out infinite;
}

@keyframes light {
    0% {
        opacity: 0.9;
        transform: scale(1.7);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.6);
    }

    100% {
        opacity: 0.9;
        transform: scale(1.7);
    }
}

.btnbackertebat {
    float: left;
}

/*دکمه تعداد نتایج قرآن*/
.btnnatayej {
    display: inline-block;
    float: left;
}


/*-----------دکمه های تغییر سایز دایوهای اصلی وسط صفحه--------*/
.btnchangesizequran {
    position: absolute;
    top: 50%;
    right: 0;
    transition: all ease-in-out .3s;
    box-shadow: 0 1px 2px #1d214c59;
    background: #ffffff87;
    height: 55px;
    width: 13px;
    padding: 0;
    border: 1px solid #eff0f6;
    border-radius: 5px;
}


.btnchangesizetools {
    position: absolute;
    top: 50%;
    left: 50%;
    right: 49%;
    bottom: 50%;
    left: 0;
    transition: all ease-in-out .3s;
    box-shadow: 0 1px 2px #1d214c59;
    background: #ffffff87;
    height: 55px;
    width: 13px;
    padding: 0;
    border: 1px solid #eff0f6;
    border-radius: 5px;
}

    .btnchangesizequran:hover, .btnchangesizetools:hover {
        transform: translateY(10%);
        color: #009688;
    }

#divTools, #ResultQuran {
    transition: all ease-in-out 0.7s;
}

.col-0 {
    -ms-flex: 0 0 0%;
    flex: 0 0 0%;
    max-width: 0%;
}

.DivHidden {
    opacity: 0;
    visibility: hidden;
    height: 0;
    width: 0;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -ms-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
    transition-delay: 0.1s;
}

.DivVisible {
    opacity: 1;
    visibility: visible;
    height: auto;
    overflow: unset;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -ms-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
    transition-delay: 0.1s;
}

/**********************************************************/
/*----------------End search page-----------------*/
/**********************************************************/
/**********************************************************/
/*----------------پلاگین لیست-------------------*/
/**********************************************************/
.TableMain table {
    margin-bottom: 0;
}

.tblfixtopbottom .TableMain thead th {
    position: sticky;
    top: 0;
    border-top: none;
}

.PaginationMain {
    justify-content: center;
    margin-top: 5px;
}

    .PaginationMain ul {
        margin: 0;
        padding: 0;
    }

    .PaginationMain .page-link {
        border-radius: 0 !important;
    }
/*--------پلاگین لیست------------*/
/*--------Fast search------------*/
.btnfastsearch {
    background: var(--red);
    color: white;
    transition: all ease-in-out 0.3s;
}

    .btnfastsearch:hover {
        background: lightgray;
    }

.btn-infastsearch {
    margin: 0.25rem;
    border: 1px solid #f1f1f1;
}

.fastsearch-tabwrap {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: auto;
}

.tab-wrap {
    border-radius: 6px;
    max-width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
    list-style: none;
    background-color: #fff;
    margin-top: 10px;
    text-align: start;
}

.tab {
    display: none;
}

    .tab:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1) {
        opacity: 1;
        -webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
        transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
        transition: 0.5s opacity ease-in, 0.8s transform ease;
        transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease;
        position: relative;
        top: 0;
        z-index: 100;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        text-shadow: 0 0 0;
    }

    .tab:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2) {
        opacity: 1;
        -webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
        transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
        transition: 0.5s opacity ease-in, 0.8s transform ease;
        transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease;
        position: relative;
        top: 0;
        z-index: 100;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        text-shadow: 0 0 0;
    }

    .tab:checked:nth-of-type(3) ~ .tab__content:nth-of-type(3) {
        opacity: 1;
        -webkit-transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
        transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
        transition: 0.5s opacity ease-in, 0.8s transform ease;
        transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease;
        position: relative;
        top: 0;
        z-index: 100;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        text-shadow: 0 0 0;
    }

    .tab:first-of-type:not(:last-of-type) + label {
        /*border-top-right-radius: 0;
        border-bottom-right-radius: 0;*/
    }

    .tab:not(:first-of-type):not(:last-of-type) + label {
        /* border-radius: 0;*/
    }

    .tab:last-of-type:not(:first-of-type) + label {
        /* border-top-left-radius: 0;
        border-bottom-left-radius: 0;*/
    }

    .tab:checked + label {
        background-color: #fa626b;
        box-shadow: 0 -1px 0 #fff inset;
        cursor: default;
        color: white;
    }

        .tab:checked + label:hover {
            box-shadow: 0 -1px 0 #fff inset;
            background-color: #fa626b;
        }

    .tab + label {
        box-shadow: 0 -1px 0 #eee inset;
        border-radius: 6px 6px 0 0;
        cursor: pointer;
        display: block;
        text-decoration: none;
        color: #333;
        -webkit-box-flex: 3;
        -ms-flex-positive: 3;
        flex-grow: 3;
        text-align: center;
        background-color: #f2f2f2;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        text-align: center;
        -webkit-transition: 0.3s background-color ease, 0.3s box-shadow ease;
        transition: 0.3s background-color ease, 0.3s box-shadow ease;
        height: 32px;
        box-sizing: border-box;
        padding: 5px;
        border-bottom: 1px solid #fa626b;
        font-size: 15px;
        margin-inline-end: 1px;
    }

        .tab + label:hover {
            background-color: #f9f9f9;
            box-shadow: 0 1px 0 #f4f4f4 inset;
        }

.tab__content {
    padding: 10px 25px;
    background-color: transparent;
    position: absolute;
    width: 100%;
    height: inherit;
    z-index: -1;
    opacity: 0;
    left: 0;
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
    border-radius: 6px;
}


.fs-btn-count {
    background: white;
    border-radius: 4px;
    padding: 0px 5px;
    color: black;
}
/*--------شناسنامه------------*/
.shdiagrammain {
    direction: ltr;
}

.btnquranfirst {
    padding: .2rem .5rem;
    background: linear-gradient( 45deg,#8bc34a,#4caf50);
    margin-bottom: 0 !important;
    box-shadow: 1px 1px 2px grey !important;
    direction: rtl;
}

.btnquranfirst-title {
    color: white;
    text-shadow: 1px 0px 2px #6b5617;
}

.btnquranfirstcontent {
    min-width: 115px;
    max-width: 280px;
    font-size: 15px;
    max-height: 90px;
    min-height: 30px;
    overflow-y: auto;
}

.tools-item {
    cursor: pointer;
    transition: all ease-in-out 0.3s;
}

    .tools-item:hover {
        box-shadow: 0 0 13px -2px #5247b9b8;
    }

.card-shitem {
    /*position: relative;
     display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;*/
    min-width: 0;
    border: 1px solid;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: .25rem;
    box-shadow: 0 0 13px -2px #3e396b2e;
    direction: rtl;
}

.shenasnameitem {
    width: 270px;
    border: 1px solid #dfdfdf;
    border-radius: 5px;
    padding: 0.5rem;
}

.removeshItem {
    background: #f00;
    color: #fff;
    cursor: pointer;
    padding: 0px 5px 0;
    margin: 0 2px;
    border-radius: 3px;
    display: inline-block;
}

    .removeshItem:hover {
        background: gray;
    }

.ShowshItem {
    background: #27a544;
    color: #fff;
    cursor: pointer;
    padding: 3px 4px;
    border-radius: 3px;
    font-size: .77rem;
}

    .ShowshItem i {
        margin-inline-start: 0.25rem;
    }

    .ShowshItem:hover {
        background: gray;
    }

.numstep {
    border-radius: 100px;
    color: black;
    background: white;
    width: 25px;
    height: 25px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    float: right;
    box-shadow: -5px 1px 4px 0 #00000059;
}

.sh-header {
    padding: .25rem !important;
    min-height: 34px;
    text-align: center;
}

.sh-body {
    padding: .35rem .5rem;
}

.btn-shitembot {
    font-size: .6rem;
    font-weight: 500;
    line-height: 2;
    border-radius: .2rem;
    padding: 0.1rem 0.15rem;
    margin: 1px;
    box-shadow: -5px 1px 4px 0px #00000059;
}

.btnshmenu {
    position: relative;
    float: left;
    display: initial;
    cursor: pointer;
    color: white;
    padding: 0 0.5rem;
    background: inherit;
}

.sh-tk-titr {
    color: #9c27b0;
}

.sh-tk-titr2 {
    color: #00729b;
}

#div_Maintakhati {
    font-size: 0.85rem;
}

.chkertebat input[type="checkbox"] {
    margin-inline-start: 5px;
}
/*-----------------جایگاه------------------*/
.btnnum {
    cursor: pointer;
    transition: all ease-in-out 0.3s;
}

    .btnnum:hover {
        color: #5a5a5a;
    }


/*--------------------number input----------------------*/
.number-input input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
    text-align: center;
    width: 53px;
    height: 100%;
}

.number-input input[type=number]::-webkit-inner-spin-button,
.number-input input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.number-input {
    display: flex;
    align-items: center;
    height: 35px;
}

    .number-input .btn-info {
        color: #fff;
        background-color: #30b2d2;
        border-color: #30b2d2;
    }

/*--------------------End number input----------------------*/
/*---------------------radio as button----------------------*/
.radioasbutton input[type=radio] {
    display: none;
    margin: 10px;
}

    .radioasbutton input[type=radio] + label {
        display: inline-block;
        padding: 4px 12px;
        background-color: #f7f7f7;
        border-radius: 5px;
        border: 1px solid #e4e4e4;
        cursor: pointer;
    }

    .radioasbutton input[type=radio]:checked + label {
        background-image: none;
        background-color: #6967ce;
        color: white;
    }

/*------------------End radio as button--------------------*/
/*-------------------checkbox as button--------------------*/
.checkasbutton input[type=checkbox] {
    display: none;
    margin: 10px;
}

    .checkasbutton input[type=checkbox] + label {
        display: inline-block;
        padding: 4px;
        background-color: #f7f7f7;
        border-radius: 5px;
        border: 1px solid #e4e4e4;
        cursor: pointer;
        min-width: 127px;
        text-align: center;
        margin: 5px;
    }

    .checkasbutton input[type=checkbox]:checked + label {
        background-image: none;
        background-color: #89169c;
        color: white;
        transition: all ease-in 0.3s;
        padding: 4px 10px 4px 15px;
    }

        .checkasbutton input[type=checkbox]:checked + label::before {
            content: "\e80d";
            font-family: "belquran-icon";
        }
/*------------------End checkbox as button--------------------*/

/*------------------محدوده--------------------*/
.Mahdoodelist .tbltreeview .TableMain {
    max-height: 38vh;
}

.Mahdoodelist .blazored-typeahead__results {
    max-height: 18rem;
}
/*------------------محدوده--------------------*/
/*------------------ضمیر--------------------*/
.zamir-card .card-header {
}


.btnarrowzamir:not(.collapsed) .ic-chevron-circle-left {
    transition: all ease-in 0.2s;
    transform: rotate(-90deg);
}

.btnarrowzamir .ic-chevron-circle-left {
    transition: all ease-in 0.2s;
    transform: rotate(0deg);
}

.tblzamir label {
    display: inline;
}


.tblzamir tr:nth-child(even) {
    background: white;
}

.tblzamir tr:nth-child(odd) {
    background: #f5f5f5;
}


/*------------------ضمیر--------------------*/

/*------------------خطاب--------------------*/

.khetab-cardbody {
    padding: 0 !important;
    padding-left: 0.95rem !important;
}

.tblkhetabdiv {
    padding-left: 0 !important;
}

.khetab-card .card-header {
    background-color: #009688;
}

.khetab-cardtitle {
    float: left;
}

.tblkhetabdiv .TableMain {
    max-height: 48vh;
    overflow: auto;
}

.tblkhetabdiv .PaginationMain {
    margin-bottom: 10px;
}


.tblkhetab label {
    display: inline;
}

.tblkhetab tr:nth-child(even) {
    background: white;
}

.tblkhetab tr:nth-child(odd) {
    background: #f5f5f5;
}
/*------------------خطاب--------------------*/

/*-------------ذخیره و لود شناسنامه-------------*/
.sh-item-header {
    background: #63858c;
    color: white;
}

@media (min-width: 992px) {

    .card-columns {
        column-count: 3;
    }
}

@media (max-width: 768px) {

    .card-columns {
        column-count: 2;
    }
}

@media (max-width: 576px) {

    .card-columns {
        column-count: 1;
    }
}

.sh-saved .card {
    box-shadow: none;
    border: 1px solid #e2eced !important;
    font-size: 14px;
    background: #f8f9ff;
}

.sh-saved .card-header {
    text-align: center;
}

.sh-saved .card-footer {
    padding: 0.35rem;
    text-align: center;
    background: transparent;
    border-radius: 5px;
}

.sh-view {
    background: transparent;
    padding: 0.25rem;
    color: #009688;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border-left: 1px solid #e2eced;
    border-right: 1px solid #e2eced;
    cursor: pointer;
    transition: all ease-in-out 0.3s;
}

    .sh-view:hover {
        background: #009688;
        color: white;
    }

.sh-del {
    background: transparent;
    padding: 0.25rem;
    color: #fa626b;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    border-left: 1px solid #e2eced;
    border-right: 1px solid #e2eced;
    cursor: pointer;
    transition: all ease-in-out 0.3s;
}

    .sh-del:hover {
        background: #fa626b;
        color: white;
    }

/*******سوئیچ شناسنامه اشتراکی و شخصی*******/
.toggle_sh_radio {
    background: #bbced4;
    margin: auto;
    overflow: hidden;
    padding: 0 !important;
    border-radius: 100px;
    position: relative;
    height: 40px;
    width: 350px;
    box-shadow: inset 1px 2px 0px 0px #a7a7a7;
}

    .toggle_sh_radio > * {
        float: right;
    }

    .toggle_sh_radio input[type=radio] {
        display: none;
    }

    .toggle_sh_radio label {
        position: relative;
        color: rgba(255,255,255,.9);
        display: block;
        height: 30px;
        margin: 7px 3px;
        border-radius: 10px;
        cursor: pointer;
        z-index: 5;
        text-align: center;
    }

.shakhsi_label {
    width: 135px;
}

.eshteraki_label {
    width: 200px;
}

.toggle_sh_option_slider {
    height: 40px;
    position: absolute;
    top: 0px;
    border-radius: 100px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

#shakhsi_toggle:checked ~ .toggle_sh_option_slider {
    background: linear-gradient(45deg,#0ad5ef, #0b8f9c);
    box-shadow: -1px 1px 2px 0px #464646;
    right: 0px;
    width: 136px;
}

#eshteraki_toggle:checked ~ .toggle_sh_option_slider {
    background: linear-gradient(45deg,#0ad5ef, #0b8f9c);
    box-shadow: 0px 1px 2px 0px #464646;
    right: 135px;
    width: 215px;
}

/*---------------ذخیره و لود شناسنامه-----------*/

/*--------------فهرست نتایج---------------*/
.btnfehrest {
    min-width: 40px;
    max-width: 40px;
    margin: .09rem;
    padding: 0.15rem;
    background-color: #44a59c;
    color: white;
}

.btnfehrestnamayesh {
    min-width: 40px;
    max-width: 40px;
    margin: .09rem;
    padding: 0.15rem;
}

.fehrest-title {
    border-radius: 5px;
    padding-top: .15rem;
    padding-bottom: .15rem;
    color: #f44336;
}
/*--------------فهرست نتایج---------------*/

/*--------------تنظیمات نمایش---------------*/
.dialogNamayeshSetting .modal-dialog-scrollable .modal-content,
.dialogNamayeshSetting .modal-dialog-scrollable .modal-body {
    overflow: unset;
}

.contentsettingarea {
    width: 100%;
    text-align-last: justify;
}

.noenamayeshdiv {
    background: #fff;
    position: absolute;
    z-index: 2;
    box-shadow: 0 0 10px #d8d8d8;
    max-width: 400px !important;
    border-radius: 5px;
}

.btnclosenoenamayeshdiv {
    position: absolute;
    top: 6px;
    inset-inline-end: 5px;
    padding: .15rem .25rem;
    border-radius: 3px;
    font-size: 15px;
    cursor: pointer;
}

.noenamayeshdivTitle {
    background: #8bc34a;
    text-align: center;
    border-bottom: 1px solid #4caf50;
    padding: 0.25rem 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.noenamayeshlist {
    max-height: 350px;
    overflow-y: auto;
    list-style: none;
    margin-bottom: 0;
    padding-inline-start: 1rem;
    font-size: 14px;
}

    .noenamayeshlist li {
        cursor: pointer;
        padding: 0.5rem 0.1rem;
    }

        .noenamayeshlist li:hover {
            cursor: pointer;
            color: #009688;
            background: #f0f0f0;
        }

.btn-noenamayesh {
    border: 1px solid #dee2e6;
    height: 32px;
    margin-inline-start: 4px;
    padding: 0 0.25rem;
    width: 130px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 14px;
}
/*--------------تنظیمات نمایش---------------*/
/*--------------کتابخانه---------------*/
.ketabmain {
    line-height: 2;
    text-align: justify;
}

.btn-book {
    display: block;
    margin: 0.75rem 0.5rem;
    cursor: pointer;
}

    .btn-book .ic {
        transition: all .2s, transform .3s;
    }

    .btn-book:hover .ic {
        transform: translateX(4px);
    }

    .btn-book:hover .txt {
        color: #a7a7a7;
    }

.btnmorebook .ic-icomore:before {
    content: '\e804';
}

.btnmorebook.collapsed .ic-icomore:before {
    content: '\e801';
}


/*--------------کتابخانه---------------*/

/*-----------------loading-----------------*/
#loadingall {
    z-index: 99999;
    background: #0000003b;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
}

.loadingdialog {
    z-index: 99999;
    position: absolute !important;
}

.loadingdialog-bg {
    background: #ffffffc7;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.loadingdialogdiv {
    background: #ffffff9e;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 2;
}

    .loadingdialogdiv figure {
        position: absolute;
    }

figure {
    position: fixed;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 6.250em;
    height: 6.250em;
    animation: rotate 2.4s linear infinite;
}

.caption {
    text-align: center;
    position: absolute;
    margin: auto;
    margin-top: 28%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.white {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    animation: flash 2.4s linear infinite;
    opacity: 0;
}

.dot {
    position: absolute;
    margin: auto;
    width: 2.4em;
    height: 2.4em;
    border-radius: 100%;
    transition: all 1s ease;
}

    .dot:nth-child(2) {
        top: 0;
        bottom: 0;
        left: 0;
        background: #FF4444;
        animation: dotsY 2.4s linear infinite;
    }

    .dot:nth-child(3) {
        left: 0;
        right: 0;
        top: 0;
        background: #FFBB33;
        animation: dotsX 2.4s linear infinite;
    }

    .dot:nth-child(4) {
        top: 0;
        bottom: 0;
        right: 0;
        background: #99CC00;
        animation: dotsY 2.4s linear infinite;
    }

    .dot:nth-child(5) {
        left: 0;
        right: 0;
        bottom: 0;
        background: #33B5E5;
        animation: dotsX 2.4s linear infinite;
    }

@keyframes rotate {
    0% {
        transform: rotate( 0 );
    }

    10% {
        width: 6.250em;
        height: 6.250em;
    }

    66% {
        width: 2.4em;
        height: 2.4em;
    }

    100% {
        transform: rotate(360deg);
        width: 6.250em;
        height: 6.250em;
    }
}

@keyframes dotsY {
    66% {
        opacity: .1;
        width: 2.4em;
    }

    77% {
        opacity: 1;
        width: 0;
    }
}

@keyframes dotsX {
    66% {
        opacity: .1;
        height: 2.4em;
    }

    77% {
        opacity: 1;
        height: 0;
    }
}

@keyframes flash {
    33% {
        opacity: 0;
        border-radius: 0%;
    }

    55% {
        opacity: .6;
        border-radius: 100%;
    }

    66% {
        opacity: 0;
    }
}

.disabledbutton {
    pointer-events: none;
    opacity: 0.4;
}


/******scrollbar******/
/* width */
::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #ccc;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #bbb;
    }

/******scrollbar******/

.tooltip,
.popover {
    font-family: 'IRANSans' !important;
}

.tooltip-inner {
    max-width: 300px !important;
}



/*--------------------صفحه اول نمایش----------------------*/
.maintitr {
    text-align: center;
    font-size: 50px;
    color: white;
    margin-top: 7rem;
    text-shadow: 1px 1px 2px black;
    margin-bottom: 1rem;
}

.searchbox {
    border-radius: 100px;
    padding: 0.65rem 1rem;
    background: #ffffff;
    border: none;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
    font-size: 16px;
    margin: .25rem auto;
    box-shadow: 0 0 13px -2px #3e396b2e;
    transition: all ease-in-out 0.3s;
}

    .searchbox:focus {
        outline: none;
        border-right: 3px solid #30b2d2;
        border-left: 3px solid #30b2d2;
    }

/*فهرست سوره*/
.fehrestmain {
    margin-left: auto;
    margin-right: auto;
}

.fehrestitemsoore {
    background: #ffffff;
    border-radius: 20px 2px 20px 2px;
    margin: 8px 0;
    border: 1px solid #ffffff4d;
    padding: 1.40rem 0 1rem;
    width: 100%;
    box-shadow: 0 0 13px -2px #3e396b2e;
    transition: all ease-in-out 0.3s;
}

    .fehrestitemsoore:hover {
        background: linear-gradient( 45deg, #0ad5ef, #0b8f9c);
        border: 1px solid #ffffffe6;
        text-decoration: none;
    }

        .fehrestitemsoore:hover .btnnumber,
        .fehrestitemsoore:hover .btnsoore,
        .fehrestitemsoore:hover .btnnumayeh,
        .fehrestitemsoore:hover .btnlocation {
            color: #ffffff;
        }


.btnsoore {
    font-size: 20px;
    display: block;
    color: black;
    padding: 0 !important;
    text-align: right;
}

.btnnumayeh {
    font-size: 18px;
    display: block;
    text-align: center;
    color: #fa626b;
    padding: 0 !important;
}

.btnlocation {
    font-size: 18px;
    display: block;
    text-align: center;
    color: #30b2d2;
    padding: 0 !important;
}

.btnnumber {
    font-size: 20px;
    display: block;
    text-align: center;
    color: #fdbc0a;
    padding: 0 !important;
}

.tartibdrop .btndropdown {
    border-radius: 3px;
    border: none;
    background: white;
    min-width: 13.5rem;
}

    .tartibdrop .btndropdown .dropdown-toggle {
        background: linear-gradient(1deg, #ffe8a5, #fffadd);
        border-color: #ffe8a5;
        border-radius: 100px;
        box-shadow: 0px 2px 3px #00000021;
    }

.tartibdrop li {
    display: block;
    text-align: right;
    padding: 0.25rem 0.5rem;
    color: black;
    text-decoration: none !important;
    cursor: pointer;
}

    .tartibdrop li:hover {
        color: #28bfa3 !important;
        background: #f2f2f2;
    }

#Tartibnozool.dropdown-menu {
    min-width: 11.5rem;
}

/*فهرست جز*/
.fehrestitemjoz {
    background: #ffffff;
    border-radius: 10px;
    margin: 5px 0;
    border: 1px solid #ffffff4d;
    padding: 1.5rem 0;
    text-align: center;
    font-size: 17px;
    cursor: pointer;
    color: black !important;
    text-decoration: none;
    display: block;
    box-shadow: 0 0 13px -2px #3e396b2e;
    transition: all ease-in-out 0.3s;
}

    .fehrestitemjoz:hover {
        background: linear-gradient(45deg,#ffd45c, #ffa707);
        border: 1px solid #fffffff7;
        text-decoration: none;
        color: #ffffff !important;
    }

        .fehrestitemjoz:hover .joznum {
            color: #ffffff !important;
        }

.joznum {
    font-size: 35px;
    color: #fdbc0a;
}

/*فهرست حزب*/
.fehrestitemhezb {
    background: #ffffff;
    border-radius: 10px;
    margin: 5px 0;
    border: 1px solid #ffffff4d;
    padding: 1.5rem 0;
    text-align: center;
    font-size: 17px;
    cursor: pointer;
    color: black !important;
    text-decoration: none;
    display: block;
    box-shadow: 0 0 13px -2px #3e396b2e;
    transition: all ease-in-out 0.3s;
}

    .fehrestitemhezb:hover {
        background: linear-gradient(45deg,#fa626a, #ff8a91);
        border: 1px solid #fffffff7;
        text-decoration: none;
        color: #ffffff !important;
    }

        .fehrestitemhezb:hover .hezbnum {
            color: #ffffff !important;
        }

.hezbnum {
    font-size: 35px;
    color: #fa626b;
}

/*فهرست رکوع*/
.fehrestitemroko {
    background: #ffffff;
    border-radius: 10px;
    margin: 5px 0;
    border: 1px solid #ffffff4d;
    padding: 1.5rem 0;
    text-align: center;
    font-size: 17px;
    cursor: pointer;
    color: black !important;
    text-decoration: none;
    display: block;
    box-shadow: 0 0 13px -2px #3e396b2e;
    transition: all ease-in-out 0.3s;
}

    .fehrestitemroko:hover {
        background: linear-gradient(45deg,#7ada91, #168830);
        border: 1px solid #fffffff7;
        text-decoration: none;
        color: #ffffff !important;
    }

        .fehrestitemroko:hover .rokonum {
            color: #ffffff !important;
        }

.rokonum {
    font-size: 35px;
    color: #28a745;
}


/*فهرست صفحه*/
.fehrestitemsafhe {
    background: #ffffff;
    border-radius: 10px;
    margin: 5px 0;
    border: 1px solid #ffffff4d;
    padding: 1.5rem 0;
    text-align: center;
    font-size: 17px;
    cursor: pointer;
    color: black !important;
    text-decoration: none;
    display: block;
    box-shadow: 0 0 13px -2px #3e396b2e;
    transition: all ease-in-out 0.3s;
}

    .fehrestitemsafhe:hover {
        background: linear-gradient(45deg,#a9a7ff, #5e5cce);
        border: 1px solid #fffffff7;
        text-decoration: none;
        color: #ffffff !important;
    }

        .fehrestitemsafhe:hover .safhenum {
            color: #ffffff !important;
        }

.safhenum {
    font-size: 35px;
    color: #6967ce;
}



/*******سوئیچ انتخاب فهرست سوره یا جزء و بقیه*******/
.toggle_radio {
    background: #bbced4;
    margin: 0.75rem auto;
    overflow: hidden;
    padding: 0 !important;
    border-radius: 100px;
    position: relative;
    height: 40px;
    width: 390px;
    box-shadow: inset 1px 2px 0px 0px #a7a7a7;
}

    .toggle_radio > * {
        float: right;
    }

    .toggle_radio input[type=radio] {
        display: none;
    }

    .toggle_radio label {
        position: relative;
        color: rgba(255,255,255,.9);
        display: block;
        width: 72px;
        height: 30px;
        margin: 7px 3px;
        border-radius: 10px;
        cursor: pointer;
        z-index: 5;
        text-align: center;
    }

.toggle_option_slider {
    width: 78px;
    height: 40px;
    position: absolute;
    top: 0px;
    border-radius: 100px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -ms-transition: all .5s ease;
    transition: all .5s ease;
}

#soore_toggle:checked ~ .toggle_option_slider {
    background: linear-gradient(45deg,#0ad5ef, #0b8f9c);
    right: 0px;
    box-shadow: -1px 1px 2px 0px #464646;
}

#joz_toggle:checked ~ .toggle_option_slider {
    background: linear-gradient(45deg,#ffd45c, #ffa707);
    right: 78px;
    box-shadow: 0px 1px 2px 0px #464646;
}

#hezb_toggle:checked ~ .toggle_option_slider {
    background: linear-gradient(45deg,#fa626a, #ff8a91);
    right: 156px;
    box-shadow: 0px 1px 2px 0px #464646;
}

#roko_toggle:checked ~ .toggle_option_slider {
    background: linear-gradient(45deg,#7ada91, #168830);
    right: 234px;
    box-shadow: 0px 1px 2px 0px #464646;
}

#safhe_toggle:checked ~ .toggle_option_slider {
    background: linear-gradient(45deg,#a9a7ff, #5e5cce);
    right: 312px;
    box-shadow: 1px 1px 2px 0px #464646;
}

.fehrestdiv {
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -ms-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
    transition-delay: 0.1s;
}

.visible-fdiv {
    opacity: 1;
    visibility: visible;
    height: auto;
    overflow: unset;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -ms-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
    transition-delay: 0.1s;
}

@media(max-width:440px) {
    .toggle_radio {
        width: 320px;
    }

        .toggle_radio label {
            width: 58px;
        }

    .toggle_option_slider {
        width: 65px;
    }

    #joz_toggle:checked ~ .toggle_option_slider {
        right: 63px;
    }

    #hezb_toggle:checked ~ .toggle_option_slider {
        right: 128px;
    }

    #roko_toggle:checked ~ .toggle_option_slider {
        right: 193px;
    }

    #safhe_toggle:checked ~ .toggle_option_slider {
        right: 255px;
    }
}

/*---------------------------------------------*/
/*----------------فرم مقایسه------------------*/
/*---------------------------------------------*/
.shenasnameha, .formulha {
    height: calc(100vh - 16rem);
    min-height: 80px;
    overflow-y: auto;
    overflow-x: hidden;
}

.moghayese-sh-item {
    border-right: 3px solid #fdbc0a !important;
    border-left: unset;
}

.moghayese-f-item {
    border-right: 3px solid #28a745 !important;
    border-left: unset;
}

.moghayese-sh-item .card-body {
    max-height: 80px;
    min-height: 32px;
    overflow-y: auto;
}

.moghayese-sh-item .btndel,
.moghayese-f-item .btndel {
    color: red;
    cursor: pointer;
}

    .moghayese-sh-item .btndel:hover,
    .moghayese-f-item .btndel:hover {
        color: lightgray;
    }

.moghayese-sh-item .btnedit,
.moghayese-f-item .btnedit {
    color: green;
    cursor: pointer;
}

    .moghayese-sh-item .btnedit:hover,
    .moghayese-f-item .btnedit:hover {
        color: lightgray;
    }

.moghayese-sh-title, .moghayese-f-title {
    float: right;
}

.moghayese-sh-tools, .moghayese-f-tools {
    float: left;
}

.btn-add-shenasname, .btn-add-formul {
    float: left;
}

    .btn-add-shenasname:hover .ic,
    .btn-add-formul:hover .ic {
        color: white !important;
    }

.Moghayese-treeviewArea {
    padding: 0.5rem;
    background: linear-gradient(1deg, #005664, #004964);
    border-top-right-radius: 0.35rem;
    border-bottom-right-radius: 0.35rem;
    height: calc(100vh - 3rem);
    overflow: auto;
}

.MoghayeseHidden {
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -ms-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
    transition-delay: 0.1s;
}

.MoghayeseVisible {
    opacity: 1;
    visibility: visible;
    height: auto;
    overflow: unset;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -ms-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
    transition-delay: 0.1s;
}

.Moghayese-list-group > .row {
    overflow-x: auto;
    flex-wrap: nowrap;
}

    .Moghayese-list-group > .row > .col-sm-4 {
        display: inline-block;
    }

.Moghayese-list-group .shadow-sm {
    box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 15%) !important;
}

.tblMoghayeselist .TableMain {
    overflow-y: auto;
    max-height: calc(100vh - 9rem);
}

    .tblMoghayeselist .TableMain .table .thead-light th {
        color: #fff;
        background-color: #009696;
        border-color: #fff;
        font-weight: normal;
        white-space: nowrap;
        padding: 0.1rem 0.25rem;
    }

.moghayese-btnback {
    position: absolute;
    z-index: 1;
    left: 20px;
}

.Moghayese-treeviewArea .tree li span {
    border: none;
    background: white;
    border-right: 3px solid #8BC34A;
    padding: 3px 8px 3px 10px;
}

.Moghayese-treeviewArea hr {
    background-color: #003447 !important;
    box-shadow: 0px 3px #006185;
}

.btnarrowMoghayese {
    color: white;
}

    .btnarrowMoghayese:hover {
        color: #82e7ff;
    }

    .btnarrowMoghayese:not(.collapsed) .ic-chevron-circle-left {
        transition: all ease-in 0.2s;
        transform: rotate(-90deg);
        color: #fdbc0a;
    }

    .btnarrowMoghayese .ic-chevron-circle-left {
        transition: all ease-in 0.2s;
        transform: rotate(0deg);
        color: #fdbc0a;
    }

#SearchPlugin {
    position: absolute;
    width: 100%;
}


.bgsearchdark {
    background-color: #fff;
    background: url(../image/pat3.jpg);
    background-size: 115px;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
}

.btnsSearchPlugin {
    position: absolute;
    bottom: 0;
    text-align: center;
    display: block;
    width: fit-content;
    padding: 0.5rem 0;
    left: 0;
}


.IFErtebatNahvi {
    width: 100%;
    height: 100%;
    border: none;
}

.ZS {
    background-color: #9ce4f0;
    border-radius: 8px;
    padding: 1px 1px 1px 1px;
    font-size: 22px;
}

.dialogtopblock {
    width: 100%;
    background: #f6f6f6;
    padding: 0.5rem 0;
    position: absolute;
    top: 0;
    right: 0;
    border-bottom: 1px solid #eaeaea;
}

/*-------------مقایسه نتایج کل--------------*/
.MoghayeseNatayejkol {
    background: linear-gradient(0deg, #024864, #5dc7e0);
    box-shadow: 0 0 20px #00000026;
    padding: 0.6rem;
    border-radius: .5rem;
}

.NtjkolTableBorder {
    border: 1px dashed #fff;
    padding: 0.5rem;
}

.MoghNatayejkolTable {
    background: #fff;
    padding: 0.3rem;
    font-size: 0.85rem;
}

    .MoghNatayejkolTable .table .thead-light th {
        color: #ffffff;
        background-color: #4aacc5;
        border-color: #ffffff;
    }

    .MoghNatayejkolTable .table td {
        vertical-align: middle;
    }

    .MoghNatayejkolTable .TableMain {
        box-shadow: 0px 0px 5px #0000003b;
        height: 88vh;
        overflow: auto;
    }

        .MoghNatayejkolTable .TableMain .btn {
            background: linear-gradient(45deg,#a9a7ff,#5e5cce);
            border-radius: 7px;
            width: 35px;
            padding: 0.25rem;
            font-size: 0.75rem;
            box-shadow: 0 1px 1px #000000b3;
            color: #fff;
            transition: all ease-in-out .3s;
        }

            .MoghNatayejkolTable .TableMain .btn:hover {
                background: linear-gradient(45deg,#a9a7ff,#9c27b0);
            }
/*---------------toggle switch---------------*/
.switchtog {
    position: relative;
    display: inline-block;
    width: 26px;
    height: 15px;
    vertical-align: middle;
    margin: 0;
}

    /* Hide default HTML checkbox */
    .switchtog input {
        opacity: 0;
        width: 0;
        height: 0;
    }

/* The slider */
.slidertog {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slidertog:before {
        position: absolute;
        content: "";
        height: 19px;
        width: 19px;
        left: -4px;
        bottom: -2px;
        background-color: white;
        box-shadow: 0px 0px 3px -1px black;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slidertog {
    background-color: #8BC34A;
}

input:focus + .slidertog {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slidertog:before {
    -webkit-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
}

/* Rounded sliders */
.slidertog.roundtog {
    border-radius: 34px;
}

    .slidertog.roundtog:before {
        border-radius: 50%;
    }


/*-----------404-----------*/
.notfound {
    padding: .5rem 2rem;
    background: linear-gradient(45deg,#4fc9df,#6a84d6);
    box-shadow: -4px 4px 4px #c1c1c1;
    font-size: 55px;
    color: #ffffff;
    margin: 1rem;
    border-radius: 10px;
    border: 1px dashed;
    text-shadow: 1px 1px 2px black;
    animation: shake 3s ease-in-out infinite;
}

.txtnotfound {
    font-size: 16px;
    color: black;
    display: block;
}

@keyframes shake {
    0% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(5deg);
    }
}

.notauthorize {
    padding: 1.5rem 2rem;
    background: linear-gradient(45deg,#e91e63,#f00);
    box-shadow: -4px 4px 4px #c1c1c1;
    color: #fff;
    margin: 1rem 4rem;
    border-radius: 10px;
    text-shadow: 1px 1px 2px black;
    animation: shake 3s ease-in-out infinite;
}

/*------------------دسته بندی-----------------*/

.tartib .radioasbutton input[type=radio]:checked + label {
    color: #fff;
    border: 3px solid #6bbfd2;
    background: #6bbfd2;
}

.sorttree1 .tree li span {
    border-right: 3px solid #6bbfd2;
}

.sorttree1 .treenum {
    background: #6bbfd2;
}

.sortbtnrow {
    position: sticky;
    top: 0;
    background: white;
    text-align: end;
}

/*-----------------مشابه یابی----------------*/
.SoftHidden {
    opacity: 0;
    visibility: hidden;
    height: 0;
    width: 0;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    display: none;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -ms-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
    transition-delay: 0.1s;
}

.SoftVisible {
    opacity: 1;
    visibility: visible;
    height: auto;
    width: auto;
    overflow: unset;
    display: block;
    -webkit-transition: opacity 0.5s ease;
    -moz-transition: opacity 0.5s ease;
    -ms-transition: opacity 0.5s ease;
    -o-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease;
    transition-delay: 0.1s;
}

.moshabehlvl2 .tree {
    height: 67vh;
}

/*-------نوار مراحل-------*/
.rightsidemain {
    background: #fff;
    position: fixed;
    top: 0;
    right: 0;
    min-height: 100%;
    width: 230px;
    margin-top: 2.5rem;
    border-left: 1px solid #efefef;
}

.rightsidemain-widther {
    background: #fff;
    display: flex;
    flex-direction: column;
    /* position: fixed; */
    /* top: 0; */
    /* right: 0; */
    min-height: 100%;
    width: 400px;
    /* margin-top: 2.5rem; */
    /* margin-bottom: 2.5rem; */
    border-left: 1px solid #efefef;
}

.rightsideheader {
    background: #2b345f;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    color: white;
    font-size: 1.25rem;
    text-align: center;
    padding: 0.75rem 0;
    font-weight: bold;
}

.leftsidemain {
    margin-right: 250px;
    margin-left: 20px;
}

.levelcard {
    box-shadow: 0 0 13px -2px #3e396b2e;
    border-radius: .5rem !important;
    background: #fff;
    margin: .5rem;
    cursor: pointer;
    font-size: small;
}


    .levelcard a {
        pointer-events: none;
        cursor: default;
    }

    .levelcard.act {
        margin-inline-end: 0;
        box-shadow: 0 2px 6px -1px #1c1b2ac7;
        color: #ffffff;
        position: relative;
        background: #fdbc0a;
    }

        .levelcard.act:before {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
            border-right: 25px solid #fdbc0a;
            position: absolute;
            left: -20px;
            top: 3px;
        }

        .levelcard.act .leveltitle {
            font-weight: bold;
            color: #fff !important;
        }

    .levelcard .levelnum {
        display: inline-block;
        padding: .5rem 1rem;
        border-radius: 7px;
        color: white;
        font-size: 1.25rem;
        background: var(--yellow);
    }

    .levelcard .leveltitle {
        display: inline-block;
        color: var(--darkblue);
        padding-right: 0.25rem;
        font-weight: 100;
    }

    .levelcard a .levelnum {
        background: #d7d7d7 !important;
    }

    .levelcard a .leveltitle {
        color: #bababa !important;
    }

    .levelcard.act a .levelnum {
        background: #00a652 !important;
    }

    .levelcard.act a {
        cursor: pointer;
    }

/*-------levels content----------*/
.levelsbg {
    box-shadow: 0 0 13px -2px #3e396b2e;
    border-radius: .35rem !important;
    background: white;
    align-items: self-end;
}

.btnselect-quran {
    background: var(--purple);
    color: #fff !important;
    border: 1px solid #fff;
    /*padding: 2rem 0;*/
    border-radius: 9px;
    font-size: 1.25rem;
    float: left;
    width: 100%;
}

    .btnselect-quran:hover {
        background: white;
        color: var(--purple) !important;
        border: 1px solid var(--purple);
    }

.btnselect-steps {
    background: var(--red);
    color: white !important;
    border: 1px solid white;
    padding: 2.25rem 0;
    border-radius: 9px;
    font-size: 1.25rem;
    float: right;
    width: 100%;
}

    .btnselect-steps:hover {
        background: white;
        color: var(--red) !important;
        border: 1px solid var(--red);
    }

.shenasnameselectedtitle {
    display: inline-block;
    background: #fa7078;
    color: white;
    padding: 0.5rem;
    font-size: 15px;
}

.showshenasname-card {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 0.25rem;
}

    .showshenasname-card::-webkit-scrollbar {
        height: 5px !important;
    }

.entekhabformul {
    display: inline-block;
}

.tbltashabohlist .TableMain {
    overflow: auto;
}

    .tbltashabohlist .TableMain .table .thead-light th {
        color: #ffffff;
        background-color: #54b87c;
        border-color: #ffffff;
        font-weight: normal;
    }


.vajhetashaboh-tree .tree li span {
    background: #fff;
    border-right: 4px solid #8bc34a;
    padding: 3px 6px 3px 10px;
}


.rightsidemain {
    background: #fff;
    position: relative;
    top: 0;
    right: 0;
    min-height: 0;
    width: 100%;
    margin-top: 0;
    border-left: none;
}

.leftsidemain {
    margin-right: unset !important;
    margin-left: unset !important;
}

.levelcard {
    margin: .25rem !important;
    display: inline-block;
}

    .levelcard.act:before {
        border-left: 10px solid transparent;
        border-top: 10px solid #fdbc0a;
        border-right: 10px solid transparent;
        border-bottom: unset;
        position: absolute;
        left: 35px;
        bottom: -10px;
        top: unset;
    }

.levelnum {
    font-size: 0.80rem !important;
    padding: .25rem 0.5rem !important;
}

.leveltitle {
    padding-right: 0 !important;
    font-size: 0.75rem !important;
}

.rightsideheader {
    font-size: inherit !important;
    padding: .4rem !important;
    display: inline-block;
    border-radius: 5px;
}

@media(max-width:992px) {
}

@media(max-width:440px) {
    .rightsideheader {
        display: none;
    }

    .entekhabformul {
        display: block;
    }
}

/*-------شرط مشترک در ارتباط----------*/

.treeshartemoshtarak ul {
    margin-bottom: 0;
}

.treeshartemoshtarak .tree {
    min-height: 0;
}

    .treeshartemoshtarak .tree li span {
        padding: 3px 3px 3px 8px;
        border-right: 4px solid #17a2b8;
    }


/*--------------------------*/

/*--------------مشابه یابی عبارت------------*/
.bgEbarat {
    background-color: #007196;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='312' height='312' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23009aad' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%2300e3ff'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
}

.btninMoshakhasat {
    background: linear-gradient( 45deg, #28a1c4, #004271);
}

/*-----------------منوی کنار دیاگرام شناسنامه-------------------*/
.searchsubmenuul {
    list-style: none;
    width: 93px;
    border: 2px solid;
    border-inline-end: none !important;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    box-shadow: 0 0 13px -2px #3e396b2e;
    border-radius: 3px !important;
    margin: 0;
}

.anavinMenuGroup {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 3px #00000026;
    margin-bottom: 0.35rem;
}

.anavinmenuitem {
    display: block;
    color: #000;
    border-bottom: 1px solid #ebebeb;
    padding: .45rem .25rem;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    font-size: 14px;
}

.anavinmenuitem1 {
    display: block;
    color: #0a4d64;
    border-bottom: 1px solid #ebebeb;
    padding: .45rem .25rem;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    font-size: 14px;
}

.anavinmenu .active {
    background: #4caf50;
    color: #000000;
    border-radius: 7px;
    font-weight: 600;
    font-size: 16px;
}

    .anavinmenu .active i {
        font-weight: 600;
        font-size: 16px;
    }
/*
.anavinmenuitem:hover {
    background: linear-gradient(90deg,transparent, #fcebb37d, transparent);
}*/

.anavinmenuitem:last-child {
    border-bottom: none !important;
}

.anavinmenuitem i {
    color: black;
    box-shadow: 0 2px 3px #00000026;
    border-radius: 5px;
    padding: 0.25rem;
}


/*----------------------------------------------------------------*/
/*-----------------نمایش خاص در فرم نمایش-------------------*/

.namayeshkhastree {
    overflow-y: auto;
    overflow-x: hidden;
    height: 79vh;
}

@media(max-width:767px) {
    .namayeshkhastree {
        height: unset !important;
    }
}

.namayeshkhastree .tree {
    height: 69vh;
}

.namayeshkhastree .treeviewpluginsection {
    margin: 0 !important;
}

.namayeshkhastree .treeviewsection {
    padding-inline-end: 0.25rem !important;
    padding-inline-start: 0.25rem !important;
}

.namayeshkhastree .listsection {
    padding-inline-end: 0.25rem !important;
    padding-inline-start: 0.25rem !important;
}

    .namayeshkhastree .listsection .tbltreeview .TableMain {
        max-height: 65vh !important;
    }


/*---------------------------------------------*/
/*-----------------فرم آمار-------------------*/
.tblamarlist .TableMain {
    overflow-y: auto;
    max-height: 67vh;
    text-align: center;
}

    .tblamarlist .TableMain .table .thead-light th {
        color: #fff;
        background-color: #ff5722;
        border-color: #fff;
        font-weight: normal;
        white-space: nowrap;
        min-width: 80px;
    }

    .tblamarlist .TableMain .table {
        width: auto !important;
        margin: auto;
    }

.amarformulAreaMain {
    border-radius: 8px;
    padding: 0.25rem;
    margin: 0.75rem 0;
    box-shadow: 0px 0px 5px #9090907a;
}

.amarformulArea div {
    display: inline-block !important;
}

.radioasbutton.Amarchangeshowtypes input[type=radio]:checked + label {
    background-image: none;
    background-color: #004964;
    color: #fff;
}

.AmarListAmalgar, .AmarListAmalvand {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}

    .AmarListAmalvand li {
        width: 80px;
        background: #ffffff;
        border: 1px solid #ebebeb;
        border-radius: 5px;
        padding: 4px 2px;
        box-shadow: 1px 1px 1px #00000057;
        margin: 3px;
        cursor: pointer;
        transition: all ease-in-out 0.3s;
    }

        .AmarListAmalvand li:hover, .AmarListAmalgar li:hover {
            background: orange;
            color: white;
        }



    .AmarListAmalgar li {
        width: 80px;
        background: #157c89;
        border: 1px solid #ebebeb;
        border-radius: 5px;
        padding: 4px 2px;
        box-shadow: 1px 1px 1px #00000057;
        margin: 3px;
        color: white;
        font-size: 1.25rem;
        font-weight: bold;
        cursor: pointer;
        transition: all ease-in-out 0.3s;
    }

.amarformulinput {
    text-align: left;
    direction: ltr;
    height: 55px;
    background: #6797ae;
    color: #ffffff;
    font-size: 1.5rem;
    box-shadow: inset 2px 2px #23607d;
    margin-bottom: 0.75rem;
}

.chartWrapper {
    position: relative;
    justify-content: center;
    text-align: center;
}

.chartAreaWrapper {
    width: 100%;
    overflow-x: auto;
    direction: ltr;
    background: linear-gradient(0deg, #fffbd7, transparent,#dcf5ff);
}

    .chartAreaWrapper > canvas {
        display: unset !important;
    }


/*نمودار دایره ای*/
.piechartAreaWrapper {
    overflow: auto;
}


.chart-legend ul {
    list-style: none;
    text-align: center;
    margin: 0;
    padding: 0;
}

.chart-legend li {
    display: inline-block;
    padding-left: 14px;
}


.chart-legend {
    max-height: 75px;
    overflow: auto;
    min-height: 35px;
}


.no-view-item {
    text-decoration: line-through;
}

.chart-legend-color, .PieChartlegend ul li span {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    margin-left: 5px;
}

/*---------------------------------------------*/
/*-----------------عطفی-------------------*/
.btnshartemoshtarak {
    width: 100%;
    text-align: start;
}


/*-----------------------------------------------------*/
/*-----------------منوهای صفحه اول-------------------*/
.ih-item {
    position: relative;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
    margin: auto;
}

    .ih-item,
    .ih-item * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

        .ih-item a {
            color: #333;
            cursor: pointer;
        }

            .ih-item a:hover {
                text-decoration: none;
            }

        .ih-item img {
            width: 100%;
            height: 100%;
        }

        .ih-item.circle {
            position: relative;
            width: 180px;
            height: 180px;
            border-radius: 50%;
        }

            .ih-item.circle.bigcircle {
                position: relative;
                width: 220px;
                height: 220px;
                border-radius: 50%;
            }

            .ih-item.circle .img {
                position: relative;
                width: 220px;
                height: 220px;
                border-radius: 50%;
                background: #fff;
            }

                .ih-item.circle .img:before {
                    position: absolute;
                    display: block;
                    content: '';
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
                    -webkit-transition: all 0.35s ease-in-out;
                    -moz-transition: all 0.35s ease-in-out;
                    transition: all 0.35s ease-in-out;
                }

                .ih-item.circle .img img {
                    border-radius: 50%;
                }

            .ih-item.circle .info {
                position: absolute;
                top: 13px;
                bottom: 0;
                left: 0;
                right: 13px;
                text-align: center;
                border-radius: 50%;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
            }


.h3title {
    text-align: center;
    position: absolute;
    bottom: 35px;
    left: 0;
    right: 0;
    font-size: 18px;
    padding: 0px 12px;
}


.ih-item.circle.effect1.colored .info {
    background: linear-gradient(45deg,#312723,#312723a6);
}

.ih-item.circle.effect1 .info {
    background: #333333;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    -webkit-transition: all 0.35s ease-in-out;
    -moz-transition: all 0.35s ease-in-out;
    transition: all 0.35s ease-in-out;
}

    .ih-item.circle.effect1 .info h3 {
        visibility: hidden;
        color: #fff;
        position: relative;
        font-size: 20px;
        padding: 45px 0 0 0;
        text-shadow: 0 0 1px white, 0 1px 2px rgb(0 0 0 / 30%);
        -webkit-transition: all .35s ease-in-out;
        -moz-transition: all .35s ease-in-out;
        transition: all .35s ease-in-out;
    }

    .ih-item.circle.effect1 .info p {
        visibility: hidden;
        color: #ffd462;
        padding: 8px 5px;
        font-size: 14px;
        margin: 0 15px;
        border-top: 1px solid rgba(255,255,255,.5);
        -webkit-transition: all .35s ease-in-out;
        -moz-transition: all .35s ease-in-out;
        transition: all .35s ease-in-out;
    }

.ih-item.circle.effect1 a:hover .info {
    opacity: 1;
}

.ih-item.circle.effect1 a:hover h3 {
    visibility: visible;
}

.ih-item.circle.effect1 a:hover p {
    visibility: visible;
}


.ih-item.circle.effect1.bottom_to_top .info h3 {
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
}

.ih-item.circle.effect1.bottom_to_top .info p {
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
}

.ih-item.circle.effect1.bottom_to_top a:hover h3 {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.ih-item.circle.effect1.bottom_to_top a:hover p {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}


.ih-item.circle.effect1 .spinner {
    width: 193px;
    height: 193px;
    border: 8px solid #f2d075;
    border-right-color: #e9e3d3;
    border-bottom-color: #fff;
    border-radius: 50%;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
    box-shadow: 0 1px 2px #0000004d;
}

.ih-item.circle.effect1.bigcircle .spinner {
    width: 233px;
    height: 233px;
    border: 7px solid #f2d075;
    border-right-color: #e9e3d3;
    border-bottom-color: #fff;
    border-radius: 50%;
    -webkit-transition: all .8s ease-in-out;
    -moz-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
    box-shadow: 0 1px 2px #0000004d;
}

.ih-item.circle.effect1 .img {
    position: absolute;
    top: 13px;
    bottom: 0;
    left: 0;
    right: 13px;
    width: auto;
    height: auto;
    box-shadow: 0 1px 2px #0000004d;
}

    .ih-item.circle.effect1 .img:before {
        display: none;
    }



.ih-item.circle.effect1 a:hover .spinner {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}


.contentshow {
    background: #ffffffa6;
    border-radius: 10px;
    box-shadow: inset 0 0 0 14px #ffffff99, 0 1px 2px #0000004d;
    padding: 2rem;
    margin-top: 1.5rem;
    contain: layout;
}

.ih-itemtools img {
    width: 55px;
}

.ih-itemtools .cont {
    background: #ffffff;
    border-radius: 30px;
    display: inline-block;
    padding: .35rem 3rem;
    box-shadow: 0 1px 1px #0000004d, inset 0 -4px 4px #0000002b;
    border: 1px solid #d1e4ed;
    transition: all ease-in-out .4s;
}

    .ih-itemtools .cont h5 {
        margin-top: .75rem;
        color: #977223;
        transition: all ease-in-out 0.3s;
    }

    .ih-itemtools .cont:hover {
        background: #ffffffbf;
        border-color: #f2d075;
    }

        .ih-itemtools .cont:hover h5 {
            transform: translateY(5px);
        }


/*-----------------منوهای صفحه اول-------------------*/
/*----------------------------------------------------*/

/*-----------------------------------------------------*/
/*-----------------یاداشت گذاری-------------------*/

/******مدیریت یادداشت گذاری******/
.NoteList {
    display: flex;
}

    .NoteList .NoteFilter {
        width: 260px;
        height: calc(82vh + 1rem);
        background: #cdcdcd6e;
        position: fixed;
    }

        .NoteList .NoteFilter .btn-success {
            border: none;
        }

    .NoteList .NoteItemsList {
        margin-inline-start: 265px !important;
    }

    .NoteList .NoteFilter .FilterTitle {
        background: #6c757d;
        color: #fff;
        padding: 0.25rem;
        border-bottom: 1px dashed;
    }

    .NoteList .NoteFilter .NoteFilterItems {
        height: calc(100vh - 77px);
        overflow-y: auto;
        padding: 0 0.75rem;
        font-size: 0.5rem;
    }

        .NoteList .NoteFilter .NoteFilterItems .FilterTagItem {
            margin-top: 0.25rem;
        }

/******scrollbar******/
/* width */
.NoteFilterItems::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.NoteList .NoteFilter .FilterTagItem .blazored-typeahead {
    border: none !important;
    font-size: 14px;
}

.NoteList .NoteFilter .FilterTagItem .blazored-typeahead__result {
    padding: 0.25rem !important;
}

.NoteList .NoteFilter .FilterTagItem .blazored-typeahead__results {
    max-height: 7rem !important;
}



.NoteList .NoteFilter .FilterTagItem .blazored-typeahead .blazored-typeahead__controls {
    background: #fff;
}

.NoteList .NoteFilter .FilterTagItem .blazored-typeahead .blazored-typeahead__input {
    box-shadow: 0px 0px 3px #0000001c;
}

.NoteList .NoteFilter .FilterTagItem .blazored-typeahead .blazored-typeahead__selected-item {
    background-color: #d5e6ff;
}

.NoteList .NoteFilter .FilterTagItem .blazored-typeahead .blazored-typeahead__multi-value {
    margin: 0.1rem !important;
    background-color: #d5e6ff !important;
}

.NoteList .NoteFilter .FilterTagItem .blazored-typeahead .blazored-typeahead__input-icon {
    width: 25px !important;
    border-radius: 2px !important;
    padding: .5rem .15rem !important;
    background: #fdbc0a !important;
}

    .NoteList .NoteFilter .FilterTagItem .blazored-typeahead .blazored-typeahead__input-icon svg g path {
        fill: #000;
    }

.NoteList .NoteFilter .FilterTagItem .FilterTagTitle {
    color: #2674b3;
    font-size: 14px;
}

.NoteList .NoteFilter .form-control {
    height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.5rem;
    border: none !important;
    box-shadow: 0 0 3px #0000001c;
    cursor: pointer;
}

/********************************/

.columnlisttreeview {
    max-width: 130px; /* Adjust the value as needed */
    overflow: hidden;
    text-overflow: ellipsis; /* Optionally, add ellipsis for text overflow */
    white-space: nowrap; /* Prevent wrapping */
}

.onvaninlist:hover i {
    display: inline-block;
    -webkit-transform: scale(1) rotate(-15deg);
    -moz-transform: scale(1) rotate(-15deg);
    -ms-transform: scale(1) rotate(-15deg);
    -o-transform: scale(1) rotate(-15deg);
    transform: scale(1) rotate(-15deg);
    color: #2eaaba;
}

.onvaninlist span {
    cursor: pointer;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-transform: scale(0) rotate(15deg);
    -moz-transform: scale(0) rotate(15deg);
    -ms-transform: scale(0) rotate(15deg);
    -o-transform: scale(0) rotate(15deg);
    transform: scale(0) rotate(15deg);
}

.AddYaddashtDiv {
    border: 2px dashed #28a745;
    border-radius: 5px;
    padding: 0.5rem 0.25rem;
    margin-bottom: 1rem;
    margin-top: 0.35rem;
    text-align: center;
}

.btnnewnote {
    position: absolute;
    inset-inline-end: 15px;
    margin-top: -10px;
}

.TextSelectedYaddasht {
    max-height: 200px;
    overflow-y: auto;
    flex: none;
    background: #fff;
    border: 1px solid #c1dee4;
    padding: 10px;
    border-radius: 2px;
    font-size: 14px;
}

    .TextSelectedYaddasht p {
        display: block !important;
        text-align: justify;
    }

.ck-content {
    min-height: 150px;
}

.notecard {
    background: #fff;
    padding: .3rem;
    margin: 0.5rem 0;
    border: 1px solid #e1e1e1 !important;
}

    .notecard .notecardin {
        height: 155px;
        overflow: auto;
    }

    .notecard .btns .btn {
        font-size: 13px;
    }

    .notecard .notetitle {
        color: #673ab7;
        font-size: 14px;
    }

    /******scrollbar******/
    /* width */
    .notecard ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
    }

    .notecard .btntag {
        margin: 0.25rem;
        color: #6b708a;
        display: inline-block;
        background: white;
    }
/* پیش فرض دکمه های یاداشت گذاری غیر فعال باشد */
.btn_Yaddash {
    display: none;
}

.ShowYadasht .btn_Yaddash {
    display: unset !important;
}

.btnEditNote {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    padding: 0.15rem 0.25rem;
}

/******scrollbar******/
/*-----------------یادداشت گذاری-------------------*/
/*-------------------------------------------------*/
/*-----------------------------------------------------*/
/*---------------به روز نبودن مرورگر-----------------*/
#NotSupported {
    position: fixed;
    width: 100%;
    height: 100%;
    background: white;
    background: url(../image/1.svg);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999;
    text-align: center;
    overflow: auto;
}

    #NotSupported table tr th {
        padding: 0.5rem;
        background: #4caf50;
        color: white;
    }

    #NotSupported table tr td {
        padding: 0.35rem;
        background: white;
    }

    #NotSupported .notsuptext {
        background: #f60000;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
    }

    #NotSupported .crossplat img {
        width: 220px;
    }

.tblbrowsers img {
    width: 40px;
}

.tblbrowsers td, .tblbrowsers th {
    vertical-align: middle;
    text-align: right;
}
/*---------------به روز نبودن مرورگر-----------------*/
/*-----------------------------------------------------*/


/*-----------------------------------------------------*/
/*-------------------برچسب گذاری---------------------*/
.tagcard {
    background: linear-gradient(45deg,#fffdea,transparent);
    border-top-right-radius: 3px !important;
    border-radius: 25px;
    box-shadow: 0 0 5px #0000004d;
    padding: 15px;
    margin: 1rem;
    position: relative;
    width: 320px;
    min-width: 0;
    word-wrap: break-word;
}

.addtagDiv {
    border: 2px dashed #5eafd8;
    border-radius: 5px;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}

.taginItem {
    background: #ffd556;
    border: 1px solid #d3a825;
    border-radius: 5px;
    padding: 0 0.25rem;
    margin: 0.25rem;
}

.tagontext {
    max-height: 250px;
    overflow-y: auto;
    background: #fdffe8;
    padding: 7px;
    margin-bottom: .5rem;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #f1f3dc;
}

.addtagtolistdialog .tree {
    max-height: 66vh;
}

/******scrollbar******/
/* width */
.tagcard ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* Track */
.tagcard ::-webkit-scrollbar-track {
    background: #f7e7b9;
}

/* Handle */
.tagcard ::-webkit-scrollbar-thumb {
    background: #deba6e;
}

    /* Handle on hover */
    .tagcard ::-webkit-scrollbar-thumb:hover {
        background: #e6ca76;
    }

/******scrollbar******/


/******** TreeView ********/
ul.tree-item {
    margin: 0;
    padding-right: 25px;
    line-height: 2em;
    list-style: none;
    /*background-color: #fff;*/
    padding-left: 0px;
}

    ul.tree-item li {
        position: relative;
    }

        /*        ul.tree-item li:before {
            position: absolute;
            top: 0;
            right: -15px;
            display: block;
            width: 15px;
            height: 1em;
            content: "";
            border-bottom: 1px dotted #666;
            border-right: 1px dotted #666;
        }*/

        /*        ul.tree-item li:after {
            position: absolute;
            top: 1.1em;
            bottom: 1px;
            right: -15px;
            display: block;
            content: "";
            border-right: 1px dotted #666;
        }*/

        /* hide the lines on the last item */
        ul.tree-item li:last-child:after {
            display: none;
        }
/* hide the vertical line on the first item */
/*ul.tree > li:first-child:before {
    border-left: none;
}*/

.tree li span.active {
    background: #4caf50 !important;
    color: #fff;
}

/* inserted via JS  */
.js-toggle-icon {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 14px;
    margin-left: 2px;
    margin-right: -23px;
    line-height: 14px;
    text-align: center;
    font-style: normal;
    cursor: pointer;
    color: white;
    background-color: #ffc107;
    border: 1px solid #fdbc0a;
    border-radius: 2px;
}




.tree {
    min-height: 20px;
}

    .tree li {
        list-style-type: none;
        margin: 0;
        padding: 10px 5px 5px 5px;
        position: relative;
        white-space: nowrap;
    }

        .tree li::before, .tree li::after {
            content: '';
            right: -20px;
            position: absolute;
            left: auto
        }

        .tree li::before {
            border-left: 2px solid #ddd;
            bottom: 50px;
            height: 100%;
            top: 0;
        }

        .tree li::after {
            border-top: 2px solid #ddd;
            height: 20px;
            top: 32px;
            width: 25px
        }

        .tree li span.HSTreeItem2 {
            background: white;
            font-size: 15px;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            box-shadow: 0 2px 5px #00000030;
            border-radius: 7px;
            display: inline-block;
            padding: 3px 5px 3px 0;
            text-decoration: none;
            font-weight: bold;
            cursor: pointer;
            min-width:150px;
        }

.treenum {
    background: #f5f5f5;
    color: #000;
    box-shadow: 0 2px 3px #00000026;
    border-radius: 6px 0 12px 5px;
    padding: 3px 7px;
    margin-right: 0.5rem;
    font-weight: normal;
}

.treeiconshadow {
    text-shadow: 0px 0px 0px black;
    background: white;
}

.tree li.parent_li > span {
    cursor: pointer
}

.tree > ul > li::before, .tree > ul > li::after {
    /*border: 0*/
}

.tree li:last-child::before {
    height: 27px
}

.tree li.parent_li > span:hover, .tree li.parent_li > span:hover + ul li span, .tree li span:hover {
    background: #e8e5e5;
}

.TView .active {
    background: #ffebb2;
    box-shadow: inset 0px 0px 6px 0 #f3a562;
}

/*-----------------------------------------------------*/
/*-------------------ارتباط آیات---------------------*/
.ErtebatAyatMain .AyehContent {
    line-height: 1.75;
    text-align: justify;
    padding-top: 0.5rem;
    background: white;
    border-radius: 7px;
}

    .ErtebatAyatMain .AyehContent sif {
        color: #4caf50;
    }

.ertebatayat-tabs .nav-link {
    box-shadow: 0 0 13px -2px #3e396b2e;
    background: #ffffff;
    border-top-left-radius: 0.35rem;
    border-top-right-radius: 0.35rem;
    padding: 0.25rem 0.75rem;
    text-align: center;
    margin-inline-start: 2px;
    display: inline-block;
    color: #b6b6b6;
    cursor: pointer;
    font-size: 14px;
}

    .ertebatayat-tabs .nav-link:hover {
        color: black;
    }

    .ertebatayat-tabs .nav-link.active {
        box-shadow: 0 0 13px -2px #3e396b2e;
        border-top-left-radius: 0.35rem;
        border-top-right-radius: 0.35rem;
        padding: 0.25rem 0.75rem;
        text-align: center;
        margin-inline-start: 2px;
        display: inline-block;
        color: black;
        background: #fdbc0b;
        cursor: pointer;
    }

        .ertebatayat-tabs .nav-link.active:hover {
            color: white;
        }

.ertebatayat-tabcontent .tab-pane {
    padding: 1rem;
    min-height: 61vh;
}

/*--------------------checkasbuttonshow-----------------------*/
.checkasbuttonshow .inputGroup {
    background-color: #fff;
    display: inline-block;
    margin: 3px;
    position: relative;
}

    .checkasbuttonshow .inputGroup label {
        padding: 6px 32px 6px 10px;
        border-radius: 6px;
        width: 100%;
        display: block;
        color: #3c454c;
        cursor: pointer;
        position: relative;
        z-index: 2;
        transition: color 400ms ease-in;
        overflow: hidden;
        background: #f4f5fa;
        border: 1px solid #e1e1e1;
        margin-bottom: 0;
    }

        .checkasbuttonshow .inputGroup label:before {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            content: "";
            background-color: #607d8b;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale3d(1, 1, 1);
            transition: all 400ms cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
            z-index: -1;
        }

        .checkasbuttonshow .inputGroup label:after {
            width: 20px;
            height: 20px;
            margin-inline-start: 6px;
            content: "";
            border: 1px solid #d1d7dc;
            background-color: #fff;
            border-radius: 3px;
            z-index: 2;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            transition: all 400ms ease-in;
        }

    .checkasbuttonshow .inputGroup input:checked ~ label {
        color: #fff;
    }

        .checkasbuttonshow .inputGroup input:checked ~ label:before {
            transform: translate(-50%, -50%) scale3d(56, 56, 1);
            opacity: 1;
        }

        .checkasbuttonshow .inputGroup input:checked ~ label:after {
            border-color: #fff;
            background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23000' fill-rule='nonzero'/%3E%3C/svg%3E ");
            background-repeat: no-repeat;
            background-position: -3px -2px;
        }

    .checkasbuttonshow .inputGroup input {
        width: 32px;
        height: 32px;
        order: 1;
        z-index: 2;
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        visibility: hidden;
    }

/*-------------------------------------------*/
.ErtebatAyatChecks .checkasbuttonshow .inputGroup {
    width: 100%;
}

    .ErtebatAyatChecks .checkasbuttonshow .inputGroup.selectAll label:before {
        background-color: #28a745 !important;
    }

    .ErtebatAyatChecks .checkasbuttonshow .inputGroup.selectAll label {
        background-color: #28a745 !important;
        color: white;
        border: 2px dotted white;
    }

.ertebatayat-tabs.nav-tabs {
    border-bottom: none;
}

.ertebatayat-tabcontent .tab-pane .graphshow {
    height: 450px;
    position: relative;
    margin-top: 0.5rem;
    box-shadow: inset 0px 0px 12px #55555545;
}

.ertebatayat-tabcontent .tab-pane .SoftHidden .config {
    position: unset;
}

.ErtebatAyeColTable {
    max-width: 350px;
}

    .ErtebatAyeColTable p {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin: 0;
    }
/**********همه*********/
.Hame-top .checkasbuttonshow .inputGroup label:before {
    background-color: #30b2d2 !important;
}

.Hamebtns .BtnActive {
    background: linear-gradient(45deg, #0ad5ef, #0b8f9c);
    border-radius: 50px;
    box-shadow: 0px 1px 1px #000000b3;
    color: white;
    transition: all ease-in-out 0.3s;
}

.Hamebtns .BtnNoActive {
    background: linear-gradient( 45deg,#f4f5fa,#f4f5fa);
    border-radius: 50px;
    box-shadow: inset 0 -2px 0px #00000021;
    color: #000;
    transition: all ease-in-out .3s;
}

.tblertebatHame .TableMain {
    overflow-y: auto;
    max-height: 73vh;
}

    .tblertebatHame .TableMain .table .thead-light th {
        color: #000;
        background-color: #b2e2e3;
        border-color: #ffffff;
        font-weight: normal;
        font-size: 0.8rem;
    }

/**********تفاسیر*********/
.tafasir-top .checkasbuttonshow .inputGroup label:before {
    background-color: #28a745 !important;
}

.tafasirbtns .BtnActive {
    background: linear-gradient(45deg, #7ada91, #168830);
    border-radius: 50px;
    box-shadow: 0px 1px 1px #000000b3;
    color: white;
    transition: all ease-in-out 0.3s;
}

.tafasirbtns .BtnNoActive {
    background: linear-gradient( 45deg,#f4f5fa,#f4f5fa);
    border-radius: 50px;
    box-shadow: inset 0 -2px 0px #00000021;
    color: #000;
    transition: all ease-in-out .3s;
}

.tblertebatTafsir .TableMain {
    overflow-y: auto;
    max-height: 73vh;
}

    .tblertebatTafsir .TableMain .table .thead-light th {
        color: #000;
        background-color: #c2ebcb;
        border-color: #ffffff;
        font-weight: normal;
        font-size: 0.8rem;
    }

/**********روایات*********/
.revayatbtns .BtnActive {
    background: linear-gradient(45deg, #ff8a91, #fa626a);
    border-radius: 50px;
    box-shadow: 0px 1px 1px #000000b3;
    color: white;
    transition: all ease-in-out 0.3s;
}

.revayatbtns .BtnNoActive {
    background: linear-gradient( 45deg,#f4f5fa,#f4f5fa);
    border-radius: 50px;
    box-shadow: inset 0 -2px 0px #00000021;
    color: #000;
    transition: all ease-in-out .3s;
}

.tblertebatRevayat .TableMain {
    overflow-y: auto;
    max-height: 73vh;
}

    .tblertebatRevayat .TableMain .table .thead-light th {
        color: #000;
        background-color: #fbc7ab;
        border-color: #ffffff;
        font-weight: normal;
        font-size: 0.8rem;
    }

/**********موضوعات*********/
.Mozoat-top .checkasbuttonshow .inputGroup label:before {
    background-color: #6967ce !important;
}

.Mozoatbtns .BtnActive {
    background: linear-gradient(45deg, #a9a7ff, #5e5cce);
    border-radius: 50px;
    box-shadow: 0px 1px 1px #000000b3;
    color: white;
    transition: all ease-in-out 0.3s;
}

.Mozoatbtns .BtnNoActive {
    background: linear-gradient( 45deg,#f4f5fa,#f4f5fa);
    border-radius: 50px;
    box-shadow: inset 0 -2px 0px #00000021;
    color: #000;
    transition: all ease-in-out .3s;
}

.tblertebatMozoat .TableMain {
    overflow-y: auto;
    max-height: 73vh;
}

    .tblertebatMozoat .TableMain .table .thead-light th {
        color: #000;
        background-color: #c8c7f9;
        border-color: #ffffff;
        font-weight: normal;
        font-size: 0.8rem;
    }
/*-------------------ارتباط آیات---------------------*/
/*---------------------------------------------------*/

/*---------------------------------------------------*/
/*---------------------معناشناسی---------------------*/
.Manatreefilter {
}

    .Manatreefilter .filTitle {
        text-align: center;
        background: #ffc107;
        padding: 0.15rem;
        margin: 1px;
    }

    .Manatreefilter .treeviewpluginsection .insearchsection-title {
        background: #464646;
        color: #ffffff;
        border-radius: 0 !important;
        margin: 0 -4px;
    }

    .Manatreefilter .treeviewpluginsection .treeviewsection .tree {
        height: 76vh;
    }

    .Manatreefilter .listsection .tbltreeview .TableMain {
        max-height: 74vh;
    }

        .Manatreefilter .listsection .tbltreeview .TableMain .onvaninlist {
            cursor: pointer;
        }

    .Manatreefilter .treeviewpluginsection {
        margin: 0 !important;
        font-size: 14px;
    }

        .Manatreefilter .treeviewpluginsection .form-control {
            font-size: 14px;
        }

    .Manatreefilter .treeviewsection,
    .Manatreefilter .listsection {
        padding-right: 5px;
        padding-left: 5px;
        background: #ffffff70;
        box-shadow: 0 0 13px -2px #3e396b2e;
    }


.MizManaSearchArea {
    background: #6dcff61a;
    border: 1px dashed #009688 !important;
    box-shadow: 0 0 3px -2px #3e396b2e;
    margin: 0.5rem 0 0.25rem;
    padding: 1rem;
    border-radius: 7px;
    text-align: center;
}

    .MizManaSearchArea h2 {
        font-weight: 900;
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
    }

.MizManaSelectedfilter {
    background: #ff98000d;
    border: 1px dashed #ff9800a1 !important;
    box-shadow: 0 0 3px -2px #3e396b2e;
    margin-bottom: 0.25rem;
    padding: 0.25rem;
    border-radius: 5px;
    font-size: 14px;
}

.ListManaShenasi {
    max-height: 67vh;
    overflow-y: auto;
    justify-content: center;
}

    .ListManaShenasi .btnNewMana {
        width: 220px;
        height: 160px;
        margin: 0.35rem;
        padding: 3rem 1rem;
    }

    .ListManaShenasi .ListManashenasiItem {
        width: 220px;
        height: 160px;
        font-size: 14px;
        background: #fff;
        margin: 0.35rem;
        border-radius: 7px;
        padding: 0.75rem;
        box-shadow: 0px 0px 10px 0px #0000001f;
    }

        .ListManaShenasi .ListManashenasiItem .ManaItemTitle {
            min-height: 48px;
        }

    .ListManaShenasi .dateArea {
        display: flex;
        border-top: 1px dashed #e1e1e1;
        border-bottom: 1px dashed #e1e1e1;
        padding: .25rem 0 0.5rem;
        text-align: center;
        justify-content: space-between;
    }

        .ListManaShenasi .dateArea .dateTitle {
            font-size: 12px;
            color: #4b4b4b;
        }

        .ListManaShenasi .dateArea .dateContent {
            font-size: 12px;
            color: #787878;
            background: #f6f6f6;
            border-radius: 3px;
            box-shadow: 0 1px 2px #dcdbe4;
            padding: 0 0.5rem;
        }

/****صفحه آیتم معناشناسی****/
.ManashenasiEdit {
    display: flex;
}

    .ManashenasiEdit .MFehrest {
        width: 290px;
        height: calc(100vh - 40px);
        background: #ffffffbf;
        box-shadow: 0 0 10px #7a7a7a40;
        position: fixed;
        transition: all ease-in-out 0.3s;
    }

        .ManashenasiEdit .MFehrest ul {
            list-style: none;
            padding: 0;
        }

            .ManashenasiEdit .MFehrest ul li {
                padding: 0.25rem;
                border-bottom: 1px dotted #ebebeb;
            }

                .ManashenasiEdit .MFehrest ul li .btn-group .btn {
                    padding: 0.2rem !important;
                    border-radius: 0 !important;
                    margin: -1px !important;
                }


    .ManashenasiEdit .MEditor {
        margin-inline-start: 295px !important;
        padding: 0.5rem;
    }

        .ManashenasiEdit .MEditor .shareMana {
            border-radius: 5px;
            background: white;
            padding: 0.25rem;
            font-size: 14px;
            box-shadow: 0 0 4px -2px #00000094;
        }

        .ManashenasiEdit .MEditor .MEditorTitle {
            box-shadow: 0px 0px 4px #00000024;
            border-radius: 0.2rem;
            background: #05585112;
            border: 1px dashed #009688 !important;
        }

    .ManashenasiEdit .MFehrest .MFehrestTitle {
        text-align: center;
        padding: 0.35rem;
        box-shadow: 0 2px 1px -1px #00000026;
        background: #f5f5f5;
    }

    .ManashenasiEdit .MFehrest .MFehrestItems {
        height: calc(100vh - 80px);
        overflow-y: auto;
        padding: 0 0.75rem;
    }

.YaddashtListinEditor .NoteList .NoteFilter {
    position: absolute !important;
}

/*---------------------معناشناسی---------------------*/
/*---------------------------------------------------*/
/*---------------------------------------------------*/
/*-----------------------میزکار----------------------*/
.mizPageTitle {
    font-weight: 900;
    font-size: 1.5rem;
    text-align: center;
    padding: 0.75rem;
    margin: 1rem;
    border-bottom: 2px dashed #1d264e29;
}

.mizekarItem {
    position: relative;
    width: 270px;
    height: 180px;
    background: #ffffffa6;
    border-radius: 10px;
    box-shadow: inset 0 0 0 14px #ffffff99, 0 1px 2px #0000004d;
    padding: 0.5rem;
    margin: 0.75rem;
    text-align: center;
    transition: all ease-in-out 0.3s;
    cursor: pointer;
    text-decoration: none !important;
}

    .mizekarItem:hover {
        transform: rotate( 2.5deg );
    }

.imgflo-t {
    position: absolute;
    top: -11px;
    transform: rotate( 180deg );
    left: -13px;
    width: 110px;
}

.imgflo-b {
    position: absolute;
    bottom: -11px;
    right: -11px;
    width: 110px;
}

.mizbg {
    background: url(../image/mizbg.jpg);
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

.miztitle {
    padding-top: 2.5rem;
}

    .miztitle h6 {
        font-weight: normal;
        color: #915000;
    }

    .miztitle h2 {
        font-weight: 900;
        font-size: 1.4rem;
        color: #000e5c;
        text-shadow: 0 1px #ffffffa1;
    }

    .miztitle span {
        display: inline-block;
        border-radius: 50px;
        padding: 0.2rem 1rem;
        color: #fff;
        margin-top: 0.5rem;
        font-weight: 300;
        font-size: 0.9rem;
        box-shadow: inset 2px -3px 2px #ffffff3b, inset 0 3px 1px #00000026;
    }

/*-----------------------میزکار----------------------*/
/*---------------------------------------------------*/

/*------------------------------------------------*/
/*-----------------------لغت----------------------*/

.Loghat .LoghatChart {
    width: 100%;
    height: calc(100vh - 10rem);
    position: relative;
}

    .Loghat .LoghatChart .chart {
        position: absolute;
        overflow: visible !important;
    }


        .Loghat .LoghatChart .chart .node {
            font-size: 14px;
            font-weight: 100;
        }

            .Loghat .LoghatChart .chart .node.LoghatDitem {
                cursor: pointer;
                padding: 0;
                min-width: 75px;
                border-radius: 4px;
                box-shadow: 0px 2px 5px -1px #0000005e;
                background: #fff;
            }

                .Loghat .LoghatChart .chart .node.LoghatDitem:has(.MultiNodeHolder) {
                    box-shadow: none;
                    background: transparent;
                    border: 1px dashed #e85a50;
                    padding: 3px;
                }

    .Loghat .LoghatChart.loghatgabli .chart .node.LoghatDitem {
        display: flex;
        flex-flow: column-reverse;
    }

    .Loghat .LoghatChart .chart .NodeImportant {
        font-size: 14px;
        font-weight: bold;
    }

    .Loghat .LoghatChart.loghatgabli .Treant .collapse-switch {
        border-radius: 4px 4px 0 0;
    }

    .Loghat .LoghatChart .Treant .collapse-switch {
        border-radius: 0 0 4px 4px;
        border: none;
        width: 100%;
        height: 15px;
        position: relative;
        top: 0;
        margin: auto;
        margin-right: -1px;
    }

    .Loghat .LoghatChart .Treant .node.collapsed .collapse-switch {
        background: #72bdaa;
    }

    .Loghat .LoghatChart .Treant .node .collapse-switch {
        background: #e97d73;
    }

    .Loghat .LoghatChart .Treant .node.collapsed .collapse-switch:before {
        content: "\f067";
        font-family: FontAwesome;
        position: absolute;
        top: 0;
        right: 31px;
        font-size: 0.65rem;
        color: #fff;
    }

    .Loghat .LoghatChart .Treant .node .collapse-switch:before {
        content: "\f068";
        font-family: FontAwesome;
        position: absolute;
        top: 0;
        right: 31px;
        font-size: 0.65rem;
        color: #fff;
    }

    .Loghat .LoghatChart .chart .cent-item {
        font-weight: bold;
        width: 100%;
        height: 100%;
        background: #ffc107;
        border-radius: 4px;
        padding: 5px 0;
        display: flex;
    }

    .Loghat .LoghatChart .chart .oth-item {
        padding: 5px 0;
        display: flex;
        flex-flow: column;
    }

        .Loghat .LoghatChart .chart .oth-item input[type='checkbox'],
        .Loghat .LoghatChart .chart .cent-item input[type='checkbox'] {
            vertical-align: middle;
            margin-inline-start: 7px;
            z-index: 1;
            position: relative;
        }

    .Loghat .LoghatChart .chart .MultiNodeHolder .oth-item {
        box-shadow: 0px 2px 5px -1px #0000005e;
        background: #fff;
        margin: .35rem 0;
        border-radius: 5px;
    }

    .Loghat .LoghatChart .chart .RisheLink {
        color: #2b345f;
        margin-inline-start: 5px;
    }

        .Loghat .LoghatChart .chart .RisheLink:hover {
            text-decoration: none;
        }

    .Loghat .LoghatChart .chart .booknamedgrm {
        z-index: 1;
        font-size: 8px;
        margin-inline-start: 5px;
    }

.dgrcolap {
    height: 0;
    opacity: 0;
}

/*دیالوگ لغت در سرچ*/
.Loghat.LoghatDialog .LoghatChart {
    height: calc(100vh - 19rem) !important;
}

.Loghat.LoghatDialog .loghatselected {
    border-radius: 6px;
    padding: 0.25rem;
    margin: 0.25rem;
    background: #ffa12e;
    box-shadow: 0px 1px 2px #b1b1b1;
}
/*-----------------------لغت----------------------*/
/*------------------------------------------------*/

/*---------------------------------------------------*/
/*-----------------------باهم آیی----------------------*/
.bahamayepagetitle {
    display: flex;
    color: #2b345fcc;
    background: linear-gradient(90deg,#fff0,#fff,#fff,#fff,#fff0);
    border-radius: 0 0 10px 10px;
    margin-bottom: 0.25rem;
}

    .bahamayepagetitle:before,
    .bahamayepagetitle:after {
        content: '';
        margin: auto 0;
        border-bottom: solid 2px #fdbc0a;
        flex: 1;
    }

    .bahamayepagetitle h1 {
        position: relative;
        padding: 0.5em 10vw;
        overflow: hidden;
        background: linear-gradient(currentcolor,currentcolor) no-repeat top center,linear-gradient(currentcolor,currentcolor) no-repeat bottom center;
        background-size: calc(100% - 2.3em) 1px;
        font-size: 1.25rem;
        margin-top: 0.5rem;
        font-weight: bold;
    }

        .bahamayepagetitle h1:before,
        .bahamayepagetitle h1:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            border: solid 1px #2b345f;
            border-top: none;
            border-bottom: none;
            transform: skew(45deg);
        }

        .bahamayepagetitle h1:after {
            transform: skew(-45deg)
        }

.BaHamAye .btnselect-steps {
    background: var(--red);
    color: white !important;
    border: 1px solid white;
    padding: .75rem 1rem;
    border-radius: 7px;
    font-size: 1.1rem;
    float: unset;
    width: unset;
}

    .BaHamAye .btnselect-steps:hover {
        background: #e75e66;
    }

@keyframes arrowdown {

    0% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(13px);
        opacity: 0;
    }
}

.BaHamAye .hamayeeset {
    text-align: center;
    margin: 0.5rem 0 1.5rem;
}

    .BaHamAye .hamayeeset i {
        font-size: 2rem;
        color: #00a652;
        animation: arrowdown 2s cubic-bezier(0.59, -0.2, 0.5, 1.21) infinite;
    }

    .BaHamAye .hamayeeset span {
        font-size: 1.35rem;
        font-weight: 900;
        margin: 0.5rem;
    }

/*---------------دیالوگ توضیحات و منابع--------------*/
/*---------------------------------------------------*/
.resourcelinks a {
    display: block;
    color: #6174e1;
    margin-top: 0.25rem;
    transition: all ease-in-out 0.3s;
}

    .resourcelinks a:hover {
        text-decoration: none;
        color: #000;
        padding-inline-start: 0.25rem;
    }


/*#region WordAll*/
dots {
    color: #7708de;
}

    dots::after {
        content: ' ..... ';
    }

.search0 {
    color: black;
}

.search1 {
    color: red;
}

.search2 {
    color: #0d63d2;
}

.search3 {
    color: #13ee17;
}

.search4 {
    color: #d27b09;
}

.search5 {
    color: #3f1864;
}

.search6 {
    color: #102d08;
}

.search7 {
    color: #3e98f3;
}

.search8 {
    color: #d90b9f;
}

.search9 {
    color: #567bf1;
}

.search10 {
    color: #831cd7;
}

m[d] {
    visibility: hidden;
    font-size: 11px;
    vertical-align: super;
}

    m[d]::after {
        visibility: visible;
        content: '{محذوف}';
    }


short_address {
    color: #40c286;
}

    short_address::before {
        content: '(';
    }

    short_address::after {
        content: ') ';
    }



full_address::before {
    content: '(';
}

full_address::after {
    content: ') ';
}

stop_sign {
    color: #f5041d;
}

    stop_sign::before {
        content: ' ';
    }

    stop_sign::after {
        content: ' ';
    }


kalameh::after {
    content: ' '
}

.address {
    color: #128f56;
}

.full_address {
    color: #025202;
}


.qurantoolsrow {
    display: block;
    position: sticky;
    box-shadow: 0 1px 6px #e2e2e2;
    font-size: 16px;
    padding: .2rem 0;
    z-index: 1;
    width: 100%;
}

    .qurantoolsrow .more {
        display: flex;
        right: 100%;
        position: sticky;
    }

.btnnum {
    cursor: pointer;
    transition: all ease-in-out .3s;
}

.greenblue {
    color: var(--greenblue);
}

.d-grid {
    display: grid;
}

/*#endregion WordAll*/

.divquransize {
    height: 100%;
}

.main-menu {
    height: min-content;
    margin-inline-end: 0.25rem;
    border-radius: 5px;
    background: #fff;
    border-color: #20C99B;
    border-width: 2px;
    padding: 0;
    overflow: auto;
    box-shadow: 0 0 10px #0000001f;
    position: absolute;
    width: 50px;
    padding-top: 0.25rem;
    overflow: hidden;
    -webkit-transition: width .2s linear;
    transition: width .2s linear;
    -webkit-transform: translateZ(0) scale(1, 1);
    opacity: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    z-index: 1;
}

    .main-menu:hover {
        width: 170px;
        overflow-y: auto;
        overflow-x: hidden;
        opacity: 1;
    }

    .main-menu .nav-text {
        position: relative;
        display: table-cell;
        vertical-align: middle;
    }
    /* Scrollbar Style */

    .main-menu::-webkit-scrollbar-track {
        border-radius: 2px;
    }

    .main-menu::-webkit-scrollbar {
        width: 5px;
        /* background-color: #F7F7F7;*/
    }

    .main-menu::-webkit-scrollbar-thumb {
        border-radius: 10px;
        /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #BFBFBF;*/
    }

    /* Scrollbar End */

    .main-menu .ic {
        position: relative;
        display: table-cell;
        width: 50px;
        height: 35px;
        text-align: center;
        font-size: 1.25rem;
        color: #000;
    }

    .main-menu.expanded {
        width: 100%;
        overflow-y: auto;
        overflow-x: auto;
        opacity: 1;
    }

        .main-menu.expanded li > a {
            width: 100%;
        }

        .main-menu.expanded .ic {
            height: 40px;
        }

    .main-menu li > a {
        font-size: 14px;
        position: relative;
        width: 160px;
        display: table;
        border-spacing: 0;
        color: #2b345f;
        text-decoration: none;
        -webkit-transform: translateZ(0) scale(1,1);
        -webkit-transition: all .14s linear;
        transition: all .14s linear;
        border-top: 1px solid #f2f2f2;
        cursor: pointer;
    }

    .main-menu .nav-text {
        position: relative;
        display: table-cell;
        vertical-align: middle;
        font-size: 15px;
    }

    .main-menu ul, .main-menu li {
        outline: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .main-menu li {
        /*padding: 0px 5px 0px 5px;
        margin: 2px 0px 2px 0px;*/
    }

        .main-menu li > a.active {
            background: #20C99B;
            border-radius: 7px;
            font-weight: 600;
            font-size: 16px;
            margin: 2px 2px 2px 2px;
            padding: 2px;
        }

.btnCloseMenu {
    position: fixed;
    top: 5px;
    z-index: 10000;
    inset-inline-end: 8px;
    padding: 0.25rem .5rem;
}

.btntabsearch {
    border-radius: 10px 10px 0 0;
    background: #f7f7f7;
    color: #bdbdbd;
    box-shadow: none;
    border: 1px solid #e1e1e1;
    padding: 0 1.5rem;
    height: 32px;
    width: 140px;
}

    .btntabsearch:hover {
        cursor: pointer;
        background: #f8eec3;
        color: #000000;
        box-shadow: 0px -1px 3px 0px #939393;
        border: 1px solid #e1e1e1;
    }

    .btntabsearch.active {
        background: #4CAF50;
        box-shadow: 0px -2px 3px 0px #1a731e;
        color: #fff;
        border-radius: 10px 10px 0 0;
        border: none;
    }

        .btntabsearch.active:before {
            content: "";
            border-left: 60px solid transparent;
            border-right: 60px solid transparent;
            border-top: 15px solid #4caf50;
            position: absolute;
            top: 25px;
            right: 10px;
        }

.btntabnamayesh {
    border-radius: 10px 10px 0 0;
    background: #20C99B;
    color: #000;
    box-shadow: none;
    border: 1px solid #e1e1e1;
    padding: 0 1.5rem;
    height: 32px;
    width: 140px;
}

    /*    .btntabnamayesh:hover {
        cursor: pointer;
        background: #f8eec3;
        color: #000000;
        box-shadow: 0px -1px 3px 0px #939393;
        border: 1px solid #e1e1e1;
    }*/

    .btntabnamayesh.active {
        background: #20C99B;
        box-shadow: 0px -2px 3px 0px #1a731e;
        color: #000;
        border-radius: 10px 10px 0 0;
        border: none;
    }

        .btntabnamayesh.active:before {
            content: "";
            border-left: 60px solid transparent;
            border-right: 60px solid transparent;
            border-top: 15px solid #20C99B;
            position: absolute;
            top: 25px;
            right: 10px;
        }

@media(max-width:768px) {
    .btntabsearch.active:before {
        content: none;
        border: 0;
    }

    .btntabnamayesh.active:before {
        content: none;
        border: 0;
    }

    .main-menu {
        top: 0;
        bottom: 0;
        width: 0;
        height: calc(100% - 2rem);
        z-index: 9999;
    }

    .bottomnav {
        display: unset !important;
        position: fixed;
        bottom: 0px;
        left: 0;
        right: 0;
        background: linear-gradient(1deg, #00547c, #008196e3);
        z-index: 99999;
        width: 100%;
        text-align: center;
        box-shadow: 0px -3px 16px 0 #00000042;
        cursor: pointer;
    }

    .bottomnavitem {
        border-left: 1px solid white;
        color: white;
        padding: 0.25rem;
    }

        .bottomnavitem a {
            color: white;
            text-decoration: none;
        }

        .bottomnavitem:hover {
            background: #2b345f;
            color: white
        }
}

.bottomnav {
    display: none;
}

/*--------ابزارها--------*/
.divToolsSearch {
    background: transparent;
}

.divtoolsbase {
    height: 100%;
}

.toolstitle {
    box-shadow: 0 0 13px -2px #3e396b2e;
    background: #20c99b;
    border-top-left-radius: 0.35rem;
    border-top-right-radius: 0.35rem;
    padding: 0.25rem 1.25rem;
    text-align: center;
    margin-inline-end: 10px;
    display: inline-block;
    color: #663399;
}

.quranresaulttitle {
    box-shadow: 0 0 13px -2px #3e396b2e;
    background: #ffffff;
    border-top-left-radius: 0.35rem;
    border-top-right-radius: 0.35rem;
    padding: 0.25rem;
    text-align: center;
    margin-inline-start: 2px;
    display: inline-block;
    color: #b6b6b6;
    cursor: pointer;
    font-size: 14px;
}

    .quranresaulttitle:hover {
        color: black;
    }

.quranresaulttitleActive {
    box-shadow: 0 0 13px -2px #3e396b2e;
    border-top-left-radius: 0.35rem;
    border-top-right-radius: 0.35rem;
    padding: 0.25rem 0.5rem;
    text-align: center;
    margin-inline-start: 2px;
    display: inline-block;
    color: black;
    background: #fdbc0b;
    cursor: pointer;
}

    .quranresaulttitleActive:hover {
        color: white;
    }


/* /Shared/UpdateAvilableDetector.razor.rz.scp.css */
.floating-update-button {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    padding: 1rem 1.5rem;
    animation: fadein 2s ease-out;
}

/*@keyframes fadein {
    from {
        right: -100%;
    }

    to {
        right: 2rem;
    }
}
*/
.M-kalamatmain {
    text-align: justify;
    padding: 2px;
    color: #000;
    line-height: 2.18;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #fff
}

.hrme {
    margin-top: 0;
    margin-bottom: 0;
    border: 0;
    border-left: 2px solid #000;
    transform: rotate(180deg);
    height: unset
}

.M-kalamatmain .btn {
    padding: .1rem .2rem;
    direction: rtl;
    overflow: -webkit-paged-x;
    white-space: normal;
    width: 100%;
    border-radius: 0
}

.M-kalamatmain .btn-Split {
    min-width: 12px;
    max-width: 12px
}

.M-kalamatmain .btn-secondary {
    color: #000;
    background-color: transparent;
    border-color: transparent
}

    .M-kalamatmain .btn-secondary:hover {
        color: #fff;
        background-color: #d2b6ff;
        border-color: #d2b6ff
    }

.M-kalamatmain .btn-error {
    color: #ff0019;
    background-color: transparent;
    border-color: transparent
}

.M-kalamatmain .btn-warning {
    color: #4d00ff !important;
    background-color: transparent;
    border-color: transparent;
    margin: auto
}

    .M-kalamatmain .btn-warning:hover {
        background-color: #fff9b2;
        border-color: #d3d3d3
    }

.M-kalamatmain .btn-group {
    margin: 0;
    margin-left: .2em;
    margin-bottom: .19em;
    min-width: 220px;
    max-width: 220px;
    background: #fff;
    min-height: 60px;
    border: 2px solid #000
}

    .M-kalamatmain .btn-group a:nth-child(-n+1) {
        border-left-color: #b5b5b5 !important
    }

.M-kalamatmain .btn-group-FullWidth {
    max-width: unset
}

.M-kalamatmain .BackgroundAcording {
    background-color: transparent
}

.M-kalamatmain .MoshkhasatTitle-1 {
    background-color: #fd4c56;
    background: linear-gradient(90deg,#3838ad 0%,#00d4ff 100%)
}

.M-kalamatmain .MoshkhasatTitle-2 {
    background-color: #feb026;
    background: linear-gradient(90deg,#ff5722 0%,#ffc107 100%)
}

.M-kalamatmain .MoshkhasatTitle-3 {
    background-color: #7ec634;
    background: linear-gradient(90deg,#009688 0%,#8bc34a 100%)
}

.M-kalamatmain .MoshkhasatTitle-4 {
    background-color: #37a6de;
    border-color: #37a6de;
    background: linear-gradient(90deg,#e91e63 0%,#ff6e63 100%)
}

.M-kalamatmain .MoshkhasatTitle-183 {
    background-color: #bb532d;
    border-color: #bb532d;
    background: linear-gradient(90deg,#bb532d 0%,#eca186 100%)
}

.M-kalamatmain .MoshkhasatTitle-6 {
    background-color: #ba68c8;
    border-color: #ba68c8;
    background: linear-gradient(90deg,#660c75 0%,#ba68c8 100%)
}

.M-kalamatmain .MoshkhasatTitle-7 {
    background-color: #009b8c;
    border-color: #009b8c;
    background: linear-gradient(90deg,#009b8c 0%,#80cbc4 100%)
}

.M-kalamatmain .AccordingTitle1 {
    background-color: #dbebc2;
    border-color: #ababab
}

.M-kalamatmain .AccordingTitle2 {
    background-color: #e56e6e;
    border-color: #ababab
}

.M-kalamatmain .AccordingTitle3 {
    background-color: #6edbe5;
    border-color: #ababab
}

.M-kalamatmain .kalamehBackType1 {
    background-color: #ff7f00;
    color: #fff
}

.M-kalamatmain .kalamehBackType2 {
    background-color: #003aff;
    color: #fff
}

.M-kalamatmain .kalamehBackType3 {
    background-color: #9c6024;
    color: #fff
}

.M-kalamatmain h5 {
    font-size: 17px;
    color: #fff;
    margin: .2em .5em
}

.M-kalamatmain .nav {
    padding-right: 5px;
    margin-bottom: 15px;
    padding-bottom: 15px
}

.M-kalamatmain .nav-tabs .nav-item {
    cursor: pointer
}

.M-kalamatmain .nav-link {
    padding: 0 .3rem;
    color: #fff;
    background-color: #98b7da;
    border-radius: 8px !important;
    margin: 3px
}

    .M-kalamatmain .nav-link:hover {
        color: #fff;
        border-color: #37a6de !important;
        background: #37a6de
    }

.M-kalamatmain .nav-item {
    font-size: initial
}

.M-kalamatmain .nav-tabs .nav-item .show .nav-link, .M-kalamatmain .nav-tabs .nav-link.active {
    background-color: #1466c3 !important;
    color: #fff !important;
    box-shadow: none
}

.M-kalamatmain .card-block {
    border-radius: 7px;
    padding: 10px;
    margin-bottom: 20px;
    background: #dfe4ff
}

.M-kalamatmain .close {
    color: #fff;
    font-size: 14px !important;
    margin: .01em -.2em .02em .5em !important;
    opacity: 1;
    top: 0;
    text-shadow: none
}

.M-kalamatmain .closeAll {
    float: right;
    font-weight: 500;
    line-height: 1;
    font-size: 20px !important;
    margin: 0 !important;
    box-shadow: none;
    background: none;
    border: 0
}

.M-kalamatmain .card {
    background-color: transparent;
    border: 0
}

.M-kalamatmain .card-header {
    cursor: pointer;
    padding: .35rem;
    border-radius: 8px !important;
    margin-bottom: 1px;
    border: 0;
    text-align: right;
    width: 150px;
    margin-right: 10px
}

.mlist-ico {
    transition: all ease-in-out .3s;
    transform: rotate(0deg)
}

.M-kalamatmain .card-title:hover .mlist-ico {
    transform: rotate(180deg)
}

.M-kalamatmain .HRM {
    cursor: pointer
}

.M-kalamatmain .Finded {
    background-color: #e4ff00 !important
}

.M-kalamatmain .table {
    font-size: inherit
}

.M-kalamatmain .form-control {
    display: block;
    width: 50%;
    padding: 4px;
    font-size: .9rem;
    line-height: 1.5;
    color: #000;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 10px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

    .M-kalamatmain .form-control:focus {
        color: #f778a6;
        background-color: #fff;
        outline: 0;
        box-shadow: 0 0 0 1px rgba(0,123,255,.25)
    }

#txtSearch {
    margin: 10px 15px
}

.M-kalamatmain label {
    display: none
}


.mainnavquran {
    box-shadow: 0 0 13px -2px #3e396b2e
}

    .mainnavquran .nav-tabs .nav-link {
        border: 1px solid #0000000f;
        border-top-left-radius: .25rem;
        border-top-right-radius: .25rem;
        background: #fff;
        color: #c1c1c1;
        transition: all ease-in-out .2s;
        padding: .2rem .5rem
    }

        .mainnavquran .nav-tabs .nav-item.show .nav-link, .mainnavquran .nav-tabs .nav-link.active {
            color: #000;
            background-color: #ffc107
        }

        .mainnavquran .nav-tabs .nav-link:hover {
            background: #ffe492;
            color: #4a4a4a
        }

    .mainnavquran .nav-tabs {
        border-bottom: 0
    }

.closetab {
    transition: all ease-in-out .3s;
    transform: rotate(0deg)
}

    .closetab:hover {
        transform: rotate(180deg)
    }

.quranmain {
    text-align: justify;
    color: #000;
    line-height: 2.2
}

.RasmolMoshaf {
    font-family: UthmanTaha !important;
}

.FontDisplayMode0 {
    font-family: IRANSans !important;
}

.FontDisplayMode1 {
    font-family: UthmanTaha !important;
}

.FontDisplayMode2 {
    font-family: DINRound !important;
}

.IranSans {
    font-family: IRANSans
}

.quranmain p > pb {
    display: block;
    text-align: center
}

.quranmain p > sif ~ pb {
    display: unset !important
}

pnso {
    width: 100%;
    text-align: center;
    display: block;
    color: #1baf0b;
    margin-bottom: 1.5rem
}

snso {
    text-align: center;
    color: #008000
}

pnso > left {
    font-family: 'FEATHERfont';
    text-align: center;
    position: relative;
    font-size: 25px;
    vertical-align: -webkit-baseline-middle
}

pnso > right {
    font-family: 'FEATHERfont';
    text-align: center;
    position: relative;
    font-size: 25px;
    vertical-align: -webkit-baseline-middle
}

.quranmain sif {
    color: #008000;
    margin-right: 1px;
    font-weight: 400
}

.C0, .c0 {
    color: var(--c0)
}

.C1, .c1 {
    color: var(--c1)
}

.C2, .c2 {
    color: var(--c2)
}

.C3, .c3 {
    color: var(--c3)
}

.C4, .c4 {
    color: var(--c4)
}

.C5, .c5 {
    color: var(--c5)
}

.C6, .c6 {
    color: var(--c3)
}

.C7, .c7 {
    color: var(--c7)
}

.C8, .c8 {
    color: var(--c8)
}

.C9, .c9 {
    color: var(--c9)
}

.C10, .c10 {
    color: var(--c10)
}

.C11, .c11 {
    color: var(--c11)
}

.C12, .c12 {
    color: var(--c12)
}

.C13, .c13 {
    color: var(--c13)
}

.C14, .c14 {
    color: var(--c14)
}

.C15, .c15 {
    color: var(--c15)
}

dot {
    color: #28a745;
    max-height: 150px;
    overflow: auto
}

.CE {
    text-decoration: none;
    position: relative
}

    .CE:after {
        content: '';
        width: 100%;
        height: 0;
        position: absolute;
        left: 0;
        bottom: 8;
        border-width: 1px;
        border-style: solid
    }

.CH {
    text-decoration: none;
    position: relative
}

    .CH:before {
        content: '';
        color: #00f;
        width: 100%;
        height: 0;
        position: absolute;
        left: 0;
        bottom: 0;
        border-width: 1px;
        border-style: dashed
    }

.ActiveAyeh {
    background-color: #fffbdf
}

p > pa > sk:nth-last-child(-n+2), p > sif {
    white-space: nowrap
}

.tooltip-inner {
    white-space: pre-wrap
}

#LoaderAll {
    position: fixed;
    bottom: 10px;
    left: 10px;
    border: 12px solid transparent;
    border-radius: 50%;
    border-top: 12px solid #e400ff;
    width: 20px;
    height: 10px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    background-color: #00aff3
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#loader {
    display: block;
    position: relative;
    right: 35%;
    top: 150px;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #9370db;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    transition: .1s all ease
}

    #loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #ba55d3;
        -webkit-animation: spin 3s linear infinite;
        animation: spin 3s linear infinite
    }

    #loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #f0f;
        -webkit-animation: spin 1.5s linear infinite;
        animation: spin 1.5s linear infinite
    }

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

s {
    padding-bottom: 5px;
    text-decoration: none;
    display: block;
    cursor: pointer;
    font-weight: bold
}

    s:hover {
        text-shadow: 1px 2px #e2e2e2;
        padding-right: 1px
    }

    s:before {
        content: 'â–¼';
        font-size: 13px
    }

    s.SClose:before {
        content: 'â—„'
    }

PS {
    DISPLAY: block;
    padding-right: 20px
}

s.c0, s.c1, s.c2, s.c3, s.c4, s.c5, s.c6, s.c7, s.c8, s.c9, s.c10, s.c11, s.c12, s.c13, s.c14, s.c15 {
    font-family: 'IRANSans'
}

    s.c0 + ps {
        border-color: var(--c0);
        border-width: .01rem;
        border-right-style: solid
    }

    s.c1 + ps {
        border-color: var(--c1);
        border-width: .01rem;
        border-right-style: solid
    }

    s.c2 + ps {
        border-color: var(--c2);
        border-width: .01rem;
        border-right-style: solid
    }

    s.c3 + ps {
        border-color: var(--c3);
        border-width: .01rem;
        border-right-style: solid
    }

    s.c4 + ps {
        border-color: var(--c4);
        border-width: .01rem;
        border-right-style: solid
    }

    s.c5 + ps {
        border-color: var(--c5);
        border-width: .01rem;
        border-right-style: solid
    }

    s.c6 + ps {
        border-color: var(--c6);
        border-width: .01rem;
        border-right-style: solid
    }

    s.c7 + ps {
        border-color: var(--c7);
        border-width: .01rem;
        border-right-style: solid
    }

    s.c8 + ps {
        border-color: var(--c8);
        border-width: .01rem;
        border-right-style: solid
    }

    s.c9 + ps {
        border-color: var(--c9);
        border-width: .01rem;
        border-right-style: solid
    }

    s.c10 + ps {
        border-color: var(--c10);
        border-width: .01rem;
        border-right-style: solid
    }

    s.c11 + ps {
        border-color: var(--c11);
        border-width: .01rem;
        border-right-style: solid
    }

    s.c12 + ps {
        border-color: var(--c12);
        border-width: .01rem;
        border-right-style: solid
    }

    s.c13 + ps {
        border-color: var(--c13);
        border-width: .01rem;
        border-right-style: solid
    }

    s.c14 + ps {
        border-color: var(--c14);
        border-width: .01rem;
        border-right-style: solid
    }

    s.c15 + ps {
        border-color: var(--c15);
        border-width: .01rem;
        border-right-style: solid
    }

.khorojazkhetab {
    position: absolute;
    inset-inline-end: 8px;
    margin-top: 3px;
    z-index: 2
}

.Z1 {
    cursor: pointer;
    position: relative
}

    .Z1:before {
        content: '';
        width: 100%;
        height: 0;
        position: absolute;
        left: 0;
        bottom: -2px;
        border-width: 1px;
        border-style: outset;
        border-color: #ff0b5b
    }

.Z2 {
    cursor: pointer;
    position: relative
}

    .Z2:after {
        content: '';
        width: 100%;
        height: 0;
        position: absolute;
        left: 0;
        bottom: 1px;
        border-width: 1px;
        border-style: outset;
        border-color: #00b8ff
    }

.Z3 {
    cursor: pointer;
    position: relative
}

    .Z3:before {
        content: '';
        width: 100%;
        height: 0;
        position: absolute;
        left: 0;
        bottom: -2px;
        border-width: 1px;
        border-style: solid;
        border-color: #2ce400
    }

.Z21 {
    cursor: pointer;
    position: relative
}

.Z21-c {
    cursor: pointer;
    position: relative
}

    .Z21-c:before {
        content: '';
        width: 100%;
        height: 0;
        position: absolute;
        left: 0;
        bottom: -5px;
        border-width: 1px;
        border-style: solid;
        border-color: #ffa900
    }

.Z8 {
    cursor: pointer;
    background-color: #ffcbe7 !important
}

.Z9 {
    cursor: pointer;
    background-color: #ff822d !important
}

.ZamirClose {
    cursor: pointer;
    display: block;
    position: relative;
    color: #f00;
    top: -5px;
    right: -9px
}

.btnZamirDelete {
    padding: 1px 2px;
    cursor: pointer;
    color: #000
}

    .btnZamirDelete:hover {
        color: #f00
    }

.btnEditTozih {
    padding: 1px 2px;
    cursor: pointer;
    color: #000
}

    .btnEditTozih:hover {
        color: #f00
    }

.ZM + .ZM {
    text-decoration: underline;
    position: relative
}

    .ZM + .ZM ~ .ZM:after {
        content: '';
        width: 100%;
        height: 0;
        position: absolute;
        left: 0;
        bottom: 8px;
        border-width: 1px;
        border-style: solid;
        border-color: #0b33ff
    }

.ZMForJqueryRun {
    text-decoration: underline
}

    .ZMForJqueryRun:after {
        content: '';
        width: 100%;
        height: 0;
        position: absolute;
        left: 0;
        bottom: 8px;
        border-width: 1px;
        border-style: solid;
        border-color: #ffc107
    }

.ZS {
    background-color: #bdf6ff;
    border-radius: 8px;
    padding: 0 1px 0 0
}

.ZS2 {
    background-color: #00f738
}

.ZamirClicked {
    position: relative
}

    .ZamirClicked:before {
        content: "î „";
        font-family: belquran-icon;
        position: absolute;
        top: 30%;
        right: 30%;
        z-index: 10;
        color: #000;
        width: 100%;
        height: 0;
        left: 0;
        bottom: -2px;
        border-color: transparent
    }

.ZT1 {
    cursor: pointer;
    padding: 5px;
    margin-top: 5px;
    border-radius: 6px;
    background-color: #bdf6ff;
    box-shadow: 1px 1px 2px 0 #929292
}

.ZTE1 {
    cursor: pointer;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 5px;
    background-color: rgba(255,0,0,.6)
}

.ZT2 {
    cursor: pointer;
    padding: 5px;
    margin: 2px;
    display: inline-block;
    border-radius: 6px;
    background-color: #ffcaca;
    box-shadow: 1px 1px 2px 0 #929292
}

.ZTE2 {
    cursor: pointer;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 5px;
    background-color: rgba(255,0,0,.6)
}

.ZAYE {
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 5px;
    background-color: #fff;
    color: #2f4f4f
}

.ZP {
    cursor: pointer
}

.zamirpop {
    font-size: 14px;
    color: #000
}

.zptitle1 {
    color: #2e8b57
}

.zptitle2 {
    color: #00008b
}

.zptitle3 {
    color: #ff4500
}

.zamirplugin .Z1, .zamirplugin .Z2, .zamirplugin .Z3, .zamirplugin .Z21-c {
    cursor: unset
}

.kalameasli {
    font-size: 17px
}

.adreseaye {
    color: #2e8b57
}

.khetabplugin .popover-header {
    display: none
}

.khetabplugin .popover {
    background: #fffaeb
}

.khetabplugin .bs-popover-auto[x-placement^=bottom] .arrow::after, .bs-popover-bottom .arrow::after {
    border-bottom-color: #fffaeb
}

.tblkhetabplugin {
    text-align: center;
    border: #d3d3d3
}

    .tblkhetabplugin td {
        padding: .5rem;
        vertical-align: top;
        min-width: 85px
    }

.Text1 {
    background: #ffc800
}

.Text2 {
    background: #9ada50
}

.MesdagTitr {
    color: #fff;
    background: #2561bb
}

.VijegiTitr {
    color: #fff;
    background: #2561bb
}

mt1 {
    font-family: 'IRANSans';
    color: #ff005c;
    width: 170px;
    text-align: right
}

    mt1 ~ MB {
        display: block
    }

mt2 {
    font-family: 'IRANSans';
    color: #00b6ff;
    width: 170px;
    text-align: right;
    margin-bottom: -20px
}

    mt2 ~ MB {
        display: block
    }

mt3 {
    font-family: 'IRANSans';
    color: #ffbc00;
    text-align: right;
    width: 170px
}

    mt3 ~ MB {
        display: block
    }

mt4 {
    font-family: 'IRANSans';
    color: #14d23f;
    text-align: right;
    width: 170px
}

    mt4 ~ MB {
        display: block
    }

.khetab-level {
    border-color: #fff0;
    border-width: .01rem;
    padding-right: 10px;
}

    .khetab-level.level-1 {
        border-right-color: #ff005c;
        margin-right: 0px;
    }

    .khetab-level.level-2 {
        border-right-color: #00b6ff;
        margin-right: 30px;
    }

    .khetab-level.level-3 {
        border-right-color: #ffbc00;
        margin-right: 60px;
    }

    .khetab-level.level-4 {
        border-right-color: #14d23f;
        margin-right: 90px;
    }

.khetabnamayesh .Level0 {
    border-right-color: #ff005c !important
}

.khetabnamayesh .Level1 {
    border-right-color: #00b6ff !important
}

.khetabnamayesh .Level2 {
    border-right-color: #ffbc00 !important
}

.khetabnamayesh .Level3 {
    border-right-color: #14d23f !important
}

.RCMenu .dropdown-menu {
    z-index: 1005 !important;
    text-align: right
}

.RCMenu .dropdown-item {
    padding-right: 6px;
    line-height: 27px;
    display: block;
    color: #000
}

    .RCMenu .dropdown-item:hover {
        background-color: #ececec !important
    }

.RCMenu .menuicon {
    margin-left: 5px;
    margin-right: 8px;
    color: #ff4500;
    vertical-align: middle
}

.RCMenu .popover {
    z-index: 1000 !important;
    max-width: 450px;
    font-size: 13px;
    padding: .5em
}

    .RCMenu .popover sif {
        font-size: 13px
    }

.RCMenu .popover-body {
    padding: 0;
    overflow: auto
}

.RCMenu div::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1);
    background-color: #f2f2f2
}

.RCMenu div::-webkit-scrollbar {
    width: 6px;
    background-color: #f5f5f5
}

.RCMenu div::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 10px
}

.RCMenu .popover-body div {
    padding: .5rem .75rem;
    color: #212529;
    max-width: 450px;
    max-height: 250px;
    display: block
}

.RCMenu label {
    display: block
}

.RCMenu .card-header {
    padding: 0 .1rem
}

.RCMenu .nav {
    padding-right: 5px
}

.RCMenu .nav-tabs .nav-item {
    cursor: pointer
}

.RCMenu .nav-link {
    padding: .03rem .5rem;
    color: #000;
    background-color: #fff;
    border-color: #ddd #ddd #ececec !important
}

.RCMenu .nav-tabs .nav-item.show .nav-link, .RCMenu .nav-tabs .nav-link.active {
    color: #000 !important;
    background-color: #8bebff !important
}

.RCMenu .table-bordered td, .RCMenu .table-bordered th {
    border: 1px solid #5fc6ff
}

.RCMenu .table-bordered thead td, .RCMenu .table-bordered thead th {
    border-bottom: 2px solid #5fc6ff
}

.RCMenu .dropdown-item.active, .RCMenu .dropdown-item:active {
    color: #007bff
}

.RCMenu .table {
    font-size: inherit
}

.RCMenu .Scrollpopover {
    max-height: 300px
}

.RCMenu .Hidden {
    display: none
}

.RCMenu .close {
    color: #f00;
    opacity: 1
}

.RCMenu .bs-popover-auto[x-placement^=top] .arrow::after, .RCMenu .bs-popover-top .arrow::after {
    border-top-color: #f5f5f5
}

.RCMenu .btn {
    margin-left: 2px
}

.op3 {
    opacity: .3
}

.op4 {
    opacity: .4
}

.op5 {
    opacity: .5
}

.op6 {
    opacity: .6
}

.op7 {
    opacity: .7
}

.op8 {
    opacity: .8
}

.SooreAyeAddress {
    background: #cddc39;
    padding: 5px 20px 1px;
    font-weight: bold;
    border-radius: 3px
}

.qurantoolsrow {
    position: sticky;
    box-shadow: 0 1px 6px #e2e2e2;
    font-size: 16px;
    padding: .2rem 0;
    text-align-last: justify;
}

.btnSettingResultQuran {
    padding: 2px 4px;
    font-size: 16px;
    border-inline-start: 1px solid #e7e7e7;
    border-start-start-radius: 0;
    border-end-start-radius: 0
}

    .btnSettingResultQuran:hover {
        background-color: #f4f5fa
    }

.fehrestnatayejdiv {
    background: #607d8b;
    position: absolute;
    top: 32px;
    bottom: 0;
    inset-inline-end: 0;
    z-index: 2;
    box-shadow: 0 0 10px #d8d8d8;
    width: -webkit-fill-available !important
}

.fehrestnatayejtitr {
    text-align: center;
    background: #486776;
    color: #fff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: .25rem;
    margin: -.5rem;
    margin-bottom: .25rem
}

.btnclosefehrestntayejdiv {
    position: absolute;
    top: 0;
    inset-inline-start: -20px;
    background: #fa626a;
    padding: .15rem .25rem;
    color: #fff;
    border-radius: 3px;
    font-size: 16px;
    cursor: pointer
}

@media(max-width: 768px) {
    .btnclosefehrestntayejdiv {
        inset-inline-start: 5px;
        top: 3px;
        z-index: 2
    }
}

.tree2 {
    display: flex;
    justify-content: center;
    height: 100%;
    overflow-y: scroll;
    position: relative;
}

    .tree2 ul {
        padding-top: 20px;
        position: relative;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
    }

    .tree2 li {
        /*float: left;*/
        text-align: center;
        list-style-type: none;
        /* position: relative; */
        /* padding: 20px 5px 0 5px; */
        /* transition: all 0.5s; */
        -webkit-transition: all 0.5s;
    }

        /*We will use ::before and ::after to draw the connectors*/

        .tree2 li::before, .tree2 li::after {
            content: '';
            position: absolute;
            top: 0;
            right: 50%;
            border-top: 2px solid #000;
            width: 50%;
            height: 20px;
        }

        .tree2 li::after {
            right: auto;
            left: 50%;
            border-left: 2px solid #000;
        }

        /*We need to remove left-right connectors from elements without 
any siblings*/
        .tree2 li:only-child::after, .tree2 li:only-child::before {
            display: none;
        }

        /*Remove space from the top of single children*/
        .tree2 li:only-child {
            padding-top: 0;
        }

        /*Remove left connector from first child and 
right connector from last child*/
        .tree2 li:first-child::before, .tree2 li:last-child::after {
            border: 0 none;
        }
        /*Adding back the vertical connector to the last nodes*/
        .tree2 li:last-child::before {
            border-right: 2px solid #000;
            border-radius: 0 5px 0 0;
            -webkit-border-radius: 0 5px 0 0;
            -moz-border-radius: 0 5px 0 0;
        }

        .tree2 li:first-child::after {
            border-radius: 5px 0 0 0;
            -webkit-border-radius: 5px 0 0 0;
            -moz-border-radius: 5px 0 0 0;
        }

    /*Time to add downward connectors from parents*/
    .tree2 ul ul::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        border-left: 2px solid #000;
        width: 0;
        height: 20px;
    }

    .tree2 li a {
        /*border: 1px solid #ccc;*/
        padding: 5px 10px;
        text-decoration: none;
        color: #666;
        font-size: 11px;
        display: inline-block;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
    }

    .tree2 ul.tree-item {
        margin: 0;
        padding-right: 0px;
        line-height: 2em;
        list-style: none;
        background-color: #fff0;
        padding-left: 0px;
    }
    /*Time for some hover effects*/
    /*We will apply the hover effect the the lineage of the element also*/
    .tree2 li a:hover, .tree2 li a:hover + ul li a {
        /*background: #c8e4f8;*/
        color: #000;
        /*border: 1px solid #94a0b4;*/
    }
        /*Connector styles on hover*/
        .tree2 li a:hover + ul li::after,
        .tree2 li a:hover + ul li::before,
        .tree2 li a:hover + ul::before,
        .tree2 li a:hover + ul ul::before {
            /*border-color: #94a0b4;*/
        }

/*Thats all. I hope you enjoyed it.
Thanks :)*/
.Soorenamemain, .TarikhNozolmain {
    text-align: justify;
    color: #000;
    line-height: 3;
    background-color: #fff
}

.zamirmain {
    text-align: justify;
    color: #000;
    line-height: 3;
    background-color: #fff
}

    .zamirmain sif {
        color: #0009d8;
        font-size: initial
    }

    .zamirmain .ActiveAyeh {
        background-color: rgba(0,242,255,.07)
    }

    .zamirmain .ActiveP {
        border-right: solid 1px #528600;
        padding-right: 5px
    }

    .zamirmain .AccordingTitle1 {
        background-color: #dbebc2;
        border-color: #ababab
    }

.rc1 {
    color: #000
}

.rc2 {
    color: #f00
}

.rc3 {
    color: #000
}

.rc4 {
    color: #228b22
}

.rc5 {
    color: #90ee90
}

.rc6 {
    color: #00008b
}

.rc7 {
    color: #00f
}

.rc8 {
    color: #a450ff
}

.rc9 {
    color: #c55cd7
}

.rc10 {
    color: #9f4ec2
}

.rc11 {
    color: #db0000
}

.zamirmain .card-header {
    padding: .1em .5rem;
    cursor: pointer
}

.zamirmain h5 {
    line-height: 0;
    font-weight: bold
}

.Hidden {
    display: none
}
/* _content/Tarjomeh/Tarjomeh.razor.rz.scp.css */
.tarjomemain {
    text-align: justify;
    padding: 2px;
    color: black;
    direction: rtl;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 1.75;
    font-weight: 400;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: white;
    height: 100%;
    line-height: 50px;
    padding: 3px;
    overflow-y: scroll;
}

.blazored-typeahead {
    position: relative;
    width: 100%;
    border: 1px solid #bfbfbf;
    border-radius: 5px;
}

    .blazored-typeahead.valid.modified {
        outline: none !important;
        border: 1px solid #26b050;
    }

    .blazored-typeahead.invalid {
        outline: none !important;
        border: 1px solid red;
    }

.blazored-typeahead__controls {
    position: relative;
    cursor: text;
    display: flex;
}

.blazored-typeahead__input {
    flex: 1;
    max-width: 100%;
    border: none;
    padding: .5rem;
    border-radius: 5px;
}

.blazored-typeahead:focus-within {
    box-shadow: 0 0 0 0.2rem rgba(38,143,255,.5);
}

.blazored-typeahead__input:focus {
    outline: none;
}

.blazored-typeahead__input-multi:focus {
    outline: none;
    box-shadow: none;
}

.blazored-typeahead__input-hidden {
    display: none;
}

.invalid {
    border-color: red !important;
}


.blazored-typeahead__input-mask-wrapper {
    display: flex;
    width: 100%;
}

.blazored-typeahead__input-multiselect-wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
}

.blazored-typeahead__input-mask-wrapper--disabled {
    background-color: #e9ecef;
    cursor: not-allowed;
    border-radius: 5px 0 0 5px;
    color: grey;
    min-height: 40px;
}

    .blazored-typeahead__input-mask-wrapper--disabled:focus {
        border: none;
    }

.blazored-typeahead__input-mask {
    display: flex;
    align-items: center;
    flex: 1;
    border-radius: 5px 0 0 5px;
    padding: .5rem;
}

    .blazored-typeahead__input-mask:focus {
        outline: none;
    }

.blazored-typeahead__clear {
    width: 40px;
    display: flex;
    padding: .5rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #dbdbdb;
}

    .blazored-typeahead__clear:hover {
        color: #333333;
    }

.blazored-typeahead__down-arrow path {
    fill: #dbdbdb;
}

.blazored-typeahead__input-icon {
    width: 40px;
    display: flex;
    border-radius: 0 5px 5px 0;
    padding: .5rem;
    cursor: pointer;
    background: none;
}

    .blazored-typeahead__input-icon:focus {
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(38,143,255,.5);
    }

    .blazored-typeahead__input-icon:hover {
        background-color: #f5f5f5;
    }

        .blazored-typeahead__input-icon:hover .blazored-typeahead__down-arrow path {
            fill: #333333;
        }

.blazored-typeahead__input-icon--disabled,
.blazored-typeahead__input-icon--disabled:hover {
    background-color: #e9ecef;
    cursor: not-allowed;
}

    .blazored-typeahead__input-icon--disabled .blazored-typeahead__down-arrow path,
    .blazored-typeahead__input-icon--disabled:hover .blazored-typeahead__down-arrow path {
        fill: #9c9c9c;
    }

.blazored-typeahead__multi-value {
    background-color: #dbdbdb;
    display: flex;
    align-items: center;
    min-width: 0px;
    box-sizing: border-box;
    border-radius: 2px;
    margin: .4rem 0 .4rem .4rem;
}

.blazored-typeahead__multi-value-label {
    color: rgb(51, 51, 51);
    font-size: 85%;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
    border-radius: 2px;
    overflow: hidden;
    padding: 3px 3px 3px 6px;
}

.blazored-typeahead__multi-value-clear {
    -webkit-box-align: center;
    align-items: center;
    display: flex;
    padding-left: 4px;
    padding-right: 4px;
    box-sizing: border-box;
    border-radius: 2px;
    background-color: transparent;
    border: 0;
    outline: none;
}

    .blazored-typeahead__multi-value-clear:focus {
        outline: none;
    }

    .blazored-typeahead__multi-value-clear:hover {
        background-color: rgb(212, 212, 212);
        color: rgb(222, 53, 11);
    }

.blazored-typeahead__results {
    position: absolute;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    border: 1px solid #dbdbdb;
    min-height: 2rem;
    max-height: 30rem;
    overflow-y: auto;
    z-index: 10;
    width: 100%;
    background: #fff;
}

.blazored-typeahead__result,
.blazored-typeahead__notfound,
.blazored-typeahead__results-help-template,
.blazored-typeahead__results-header,
.blazored-typeahead__results-footer {
    padding: .5rem;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.blazored-typeahead__selected-item {
    background-color: #dbdbdb;
}

.blazored-typeahead__selected-item-highlighted {
    background-color: #d3e2f2;
}

.blazored-typeahead__active-item,
.blazored-typeahead__result:hover,
.blazored-typeahead__result:focus {
    background-color: #007bff;
    border-top: 1px solid #007bff;
    border-bottom: 1px solid #007bff;
    color: #fff;
    cursor: pointer;
}

.blazored-typeahead__loader {
    width: 24px;
    height: 24px;
    background-color: #333;
    border-radius: 100%;
    -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
    animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0)
    }

    100% {
        -webkit-transform: scale(1.0);
        opacity: 0;
    }
}

@keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    100% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
        opacity: 0;
    }
}




.tab2 {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

    .tab2 button {
        background-color: inherit;
        float: right;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 5px 35px 5px 35px;
        transition: 0.3s;
        font-size: 15px;
    }

        .tab2 button:hover {
            background-color: #c5f7e9;
        }

        .tab2 button.active {
            background-color: #20c99b;
        }

.tabcontent2 {
    padding: 6px 12px;
    border-top: none;
}


.tabQuran {
    align-items: center;
    display: inline-flex;
}



    .tabQuran .ic {
        position: fixed;
        cursor: pointer;
        padding: 2px;
        background-color: red;
        color: white;
        border-radius: 3px;
        margin-right: 5px;
    }

.tabContentQuran {
    display: none;
    height: 100%;
    padding: 10px;
}

    .tabContentQuran p {
        margin: 5px 0px;
        padding: 5px 0px;
    }

    .tabContentQuran.active {
        display: block;
    }

.selectedItem {
    background-color: antiquewhite;
}




/*
    loading
*/
.loader {
    --background: linear-gradient(90deg, rgba(4,103,59,1) 0%, rgba(0,180,126,1) 35%, rgba(4,235,174,1) 100%);
    --shadow: rgba(39, 94, 254, 0.28);
    --text: #198754;
    --page: rgba(255, 255, 255, 0.36);
    --page-fold: rgba(255, 255, 255, 0.52);
    --duration: 3s;
    width: 200px;
    height: 140px;
    position: absolute;
    top: 40%;
    left: 50%;
    right: 50%;
    bottom: 50%;
}

    .loader:before, .loader:after {
        --r: -6deg;
        content: "";
        position: absolute;
        bottom: 8px;
        width: 120px;
        top: 80%;
        box-shadow: 0 16px 12px var(--shadow);
        transform: rotate(var(--r));
    }

    .loader:before {
        left: 4px;
    }

    .loader:after {
        --r: 6deg;
        right: 4px;
    }

    .loader div {
        width: 100%;
        height: 100%;
        border-radius: 13px;
        position: relative;
        z-index: 1;
        perspective: 600px;
        box-shadow: 0 4px 6px var(--shadow);
        background-image: var(--background);
    }

        .loader div ul {
            margin: 0;
            padding: 0;
            list-style: none;
            position: relative;
        }

            .loader div ul li {
                --r: 180deg;
                --o: 0;
                --c: var(--page);
                position: absolute;
                top: 10px;
                left: 10px;
                transform-origin: 100% 50%;
                color: var(--c);
                opacity: var(--o);
                transform: rotateY(var(--r));
                -webkit-animation: var(--duration) ease infinite;
                animation: var(--duration) ease infinite;
            }

                .loader div ul li:nth-child(2) {
                    --c: var(--page-fold);
                    -webkit-animation-name: page-2;
                    animation-name: page-2;
                }

                .loader div ul li:nth-child(3) {
                    --c: var(--page-fold);
                    -webkit-animation-name: page-3;
                    animation-name: page-3;
                }

                .loader div ul li:nth-child(4) {
                    --c: var(--page-fold);
                    -webkit-animation-name: page-4;
                    animation-name: page-4;
                }

                .loader div ul li:nth-child(5) {
                    --c: var(--page-fold);
                    -webkit-animation-name: page-5;
                    animation-name: page-5;
                }

                .loader div ul li svg {
                    width: 90px;
                    height: 120px;
                    display: block;
                }

                .loader div ul li:first-child {
                    --r: 0deg;
                    --o: 1;
                }

                .loader div ul li:last-child {
                    --o: 1;
                }

    .loader span {
        display: block;
        left: 0;
        right: 0;
        top: 100%;
        margin-top: 20px;
        text-align: center;
        color: var(--text);
    }

.loader-parent {
    background-color: #ffffff00;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100000;
}

@-webkit-keyframes page-2 {
    0% {
        transform: rotateY(180deg);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    35%, 100% {
        opacity: 0;
    }

    50%, 100% {
        transform: rotateY(0deg);
    }
}

@keyframes page-2 {
    0% {
        transform: rotateY(180deg);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    35%, 100% {
        opacity: 0;
    }

    50%, 100% {
        transform: rotateY(0deg);
    }
}

@-webkit-keyframes page-3 {
    15% {
        transform: rotateY(180deg);
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0;
    }

    65%, 100% {
        transform: rotateY(0deg);
    }
}

@keyframes page-3 {
    15% {
        transform: rotateY(180deg);
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0;
    }

    65%, 100% {
        transform: rotateY(0deg);
    }
}

@-webkit-keyframes page-4 {
    30% {
        transform: rotateY(180deg);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    65%, 100% {
        opacity: 0;
    }

    80%, 100% {
        transform: rotateY(0deg);
    }
}

@keyframes page-4 {
    30% {
        transform: rotateY(180deg);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    65%, 100% {
        opacity: 0;
    }

    80%, 100% {
        transform: rotateY(0deg);
    }
}

@-webkit-keyframes page-5 {
    45% {
        transform: rotateY(180deg);
        opacity: 0;
    }

    65% {
        opacity: 1;
    }

    80%, 100% {
        opacity: 0;
    }

    95%, 100% {
        transform: rotateY(0deg);
    }
}

@keyframes page-5 {
    45% {
        transform: rotateY(180deg);
        opacity: 0;
    }

    65% {
        opacity: 1;
    }

    80%, 100% {
        opacity: 0;
    }

    95%, 100% {
        transform: rotateY(0deg);
    }
}

#divToolsMoshKalame {
    height: 100%;
    display: table;
    width: 100%;
}

    #divToolsMoshKalame #MoshKalameTabs {
        height: 100%;
        height: 100%;
        display: table;
        width: 100%;
    }

        #divToolsMoshKalame #MoshKalameTabs #tab_content {
            height: 100%;
            padding: 0px 10px;
            display: table-row;
            width: 100%;
        }


.cardAcordian {
    background: white;
    border-radius: 4px;
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1);
    overflow-y: scroll;
}

    .cardAcordian h1 {
        font-family: var(--font-ibm-plex-sans);
        font-style: normal;
        font-weight: bold;
        font-size: 20px;
        line-height: 1.2;
        color: var(--color-title);
        margin-bottom: 20px;
    }

    .cardAcordian details {
        display: flex;
        border-radius: 5px;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.05);
        border-right: 15px solid gray;
        padding: 15px;
    }

    .cardAcordian details {
        margin-top: 15px;
        display: block;
    }

        .cardAcordian details .m-list-item {
            margin: 2px;
        }

        .cardAcordian details.h-eshteghagh {
            --highlight: #fde49b;
            background: #fdf1cc;
            border-right-color: #fde49b;
        }

        .cardAcordian details.h-sarf {
            --highlight: #a3eaf9;
            background: #e4f9fd;
            border-right-color: #a3eaf9;
        }

        .cardAcordian details.h-nahv {
            --highlight: #f9a7ae;
            background: #ffdadd;
            border-right-color: #f9a7ae;
        }

        .cardAcordian details.h-belaghat {
            --highlight: #e6b9ff;
            background: #f4e0ff;
            border-right-color: #e6b9ff;
        }

        .cardAcordian details.h-o-qurani {
            --highlight: #8ae1b7;
            background: #d0ebde;
            border-right-color: #8ae1b7;
        }

        .cardAcordian details.h-m-ayat {
            --highlight: #f7cca6;
            background: #fbe5d2;
            border-right-color: #f7cca6;
        }

        .cardAcordian details.h-mahdoode {
            --highlight: #a2f79e;
            background: #d8ffd6;
            border-right-color: #a2f79e;
        }

        .cardAcordian details.h-khetab {
            --highlight: #d2d2d3;
            background: #ececed;
            border-right-color: #d2d2d3;
        }

        .cardAcordian details.h-jaygah {
            --highlight: #fdb5eb;
            background: #fbd4f1;
            border-right-color: #fdb5eb;
        }

        .cardAcordian details .btn-group {
            border-color: #adadad;
            border-width: 2px;
            padding: 2px;
            margin: 5px;
        }

        .cardAcordian details.warning p {
            list-style-type: corona-warning;
        }

        .cardAcordian details.info {
            --highlight: var(--color-summary-2-highlight);
            background: var(--color-summary-2);
            border-left-color: var(--color-summary-2-highlight);
        }

            .cardAcordian details.info p {
                list-style-type: corona-info;
            }

        .cardAcordian details.alert {
            --highlight: var(--color-summary-3-highlight);
            background: var(--color-summary-3);
            border-left-color: var(--highlight);
        }

            .cardAcordian details.alert p {
                list-style-type: corona-alert;
            }

        .cardAcordian details summary, .card details p {
            position: relative;
            display: flex;
            flex-direction: row;
            align-content: center;
            justify-content: flex-start;
            font-family: var(--font-ibm-plex-sans);
            font-style: normal;
            font-weight: normal;
            font-size: 18px;
            color: var(--color-title);
            cursor: pointer;
        }

            .cardAcordian details summary::-webkit-details-marker, .card details p::-webkit-details-marker {
                display: none;
            }

            .cardAcordian details summary:focus, .card details p:focus {
                outline: solid 3px var(--highlight);
            }

            .cardAcordian details summary::-moz-selection, .card details p::-moz-selection {
                background-color: var(--highlight);
            }

            .cardAcordian details summary::selection, .card details p::selection {
                background-color: var(--highlight);
            }

        .cardAcordian details p {
            display: list-item;
            cursor: default;
            margin-left: 3rem;
            list-style-type: corona;
        }

        .cardAcordian details summary::before {
            cursor: pointer;
            position: absolute;
            display: inline-flex;
            width: 1rem;
            height: 1rem;
            left: 0rem;
            margin-right: 0.5rem;
            content: url("data:image/svg+xml,%3Csvg width='100%' height='100%' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.6066 12H1.3934' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 1.39343V22.6066' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
        }

        .cardAcordian details[open] summary {
            font-weight: 700;
        }

            .cardAcordian details[open] summary::before {
                transform: rotate(45deg);
                content: url("data:image/svg+xml,%3Csvg width='100%' height='100%' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.6066 12H1.3934' stroke='%23202842' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 1.39343V22.6066' stroke='%23202842' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
            }

@counter-style corona-warning {
    system: cyclic;
    symbols: 🧼 🩺 👩🏻‍⚕️ 🚑;
    suffix: " ";
}

@counter-style corona-info {
    system: cyclic;
    symbols: 🧬;
    suffix: " ";
}

@counter-style corona-alert {
    system: fixed;
    symbols: 💉 🩸 😷 🦠 🧫;
    suffix: " ";
}

.M-ayatmain {
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .M-ayatmain .table-striped tbody tr:nth-of-type(odd) {
        background-color: white;
        font-size: 15px;
    }

    .M-ayatmain .table-striped tbody tr:nth-of-type(even) {
        background-color: #f7f7f7;
        font-size: 15px;
    }

    .M-ayatmain .table-hover tbody tr:hover {
        background-color: #fff9b2;
    }

    .M-ayatmain .btn-info {
        color: #fff;
        background-color: #E91E63;
        border-color: white;
        font-size: 15px;
        border-radius: 5px !important;
    }

#diveSoureNameh .Soorenamemain p {
    line-height: normal;
}

.Slib-section {
    text-align: center;
    padding: 2rem 0;
    height: 100%;
    overflow: auto;
}

@media(min-width: 1200px) {
    .Slib-section .container {
        max-width: 1200px !important;
    }
}

@media(max-width: 991px) {
    .Slib-section .slibpic img {
        height: 250px;
        margin-bottom: 1.5rem;
    }
}

.Slib-section .slibpic img {
    border-radius: 10px;
}

.Slib-section h1 {
    font-weight: 900;
    margin-bottom: 1.75rem;
    color: #11542c;
}

.Slib-section a {
    text-decoration: none;
}

.Slib-section .libitem {
    background: #fff;
    box-shadow: 0 4px 17px -4px #00000040;
    border-radius: 30px;
    padding-bottom: 1.25rem;
    transition: all ease-in-out .3s;
    min-width: 143px;
    max-width: 187px;
    margin: auto;
}

    .Slib-section .libitem:hover {
        background: #fff7e5;
        box-shadow: 0 4px 17px -4px #00000091;
        transform: translateY(5px);
    }

    .Slib-section .libitem img {
        display: block;
        margin: auto;
        max-height: 100px;
    }

    .Slib-section .libitem span {
        margin-top: .5rem;
        display: block;
        color: #929292;
    }

    .Slib-section .libitem h2 {
        margin-top: .25rem;
        font-weight: bold;
        font-size: 1.2rem;
        color: #000;
    }

.SelectedZamir {
    background-color: #ffc073;
    border-color: #fca508;
    border-width: 1px;
    border-radius: 5px;
}

.under_line_zamir1 {
    /*text-decoration: underline;
    text-decoration-color: red;
    text-underline-position:under;*/
    color: #009688;
}


.under_line_zamir2 {
    /*text-decoration: underline;
    text-decoration-color: red;
    text-underline-position: under;*/
    color: #223bfc;
}


.under_line_zamir3 {
    /*text-decoration: underline;
    text-decoration-color: red;
    text-underline-position: under;*/
    color: #f65402;
}


.under_reference_phrase {
    /*text-decoration: underline;
    text-decoration-color: red;
    text-underline-position: under;*/
}

.under_line_phrase {
    text-decoration: underline;
    text-decoration-color: red;
    text-underline-position: under;
}

.under_reference_word {
    border-bottom-color: #009688;
    border-bottom-width: 2px;
}

.zamirDescription {
    font-size: 13px;
    vertical-align: super;
}

.zamirHidden {
    /*display:contents !important;*/
    /*font-size: 13px;
    vertical-align: super;*/
}

.zamir_show {
    display: contents !important;
    /*font-size: 13px;
    vertical-align: super;*/
}

.zamir-side-menu {
    min-width: 150px;
    margin-inline-end: 0.25rem;
    border-radius: 12px;
    background: #fff;
    border-color: #20C99B;
    border-width: 2px;
    padding: 0;
    overflow: auto;
    box-shadow: 0 0 10px #0000001f;
    font-size: medium;
}

    .zamir-side-menu li {
        text-wrap: nowrap;
        cursor: pointer;
    }

    .zamir-side-menu full_address {
        font-size: small;
    }

    .zamir-side-menu .SelectedZamir {
        background-color: #fff;
        border-color: #fff;
        border-width: 0px;
        border-radius: 0px;
    }

.note-tab-active {
    background-color: #20c99b;
    border-radius: 5px 5px 0px 0px;
}

.color-explanation {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    justify-content: center;
}

.color-box {
    width: 20px;
    height: 20px;
    position: relative;
    cursor: pointer;
}

    .color-box::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: 110%;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.75);
        color: #fff;
        padding: 8px;
        border-radius: 4px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
    }

    .color-box:hover::after {
        opacity: 1;
    }

.lineSpace {
    line-height: 50px;
}

/*[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}

[data-title]:after {
    content: attr(data-title);
    position: absolute;
    bottom: -1.6em;
    left: 100%;
    padding: 4px 4px 4px 8px;
    color: #666;
    white-space: nowrap;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #666;
    -webkit-box-shadow: 0px 0px 4px #666;
    box-shadow: 0px 0px 4px #666;
    background-image: -moz-linear-gradient(top, #f0eded, #bfbdbd);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0eded), color-stop(1, #bfbdbd));
    background-image: -webkit-linear-gradient(top, #f0eded, #bfbdbd);
    background-image: -moz-linear-gradient(top, #f0eded, #bfbdbd);
    background-image: -ms-linear-gradient(top, #f0eded, #bfbdbd);
    background-image: -o-linear-gradient(top, #f0eded, #bfbdbd);
    opacity: 0;
    z-index: 99999;
    visibility: hidden;
}

[data-title] {
    position: relative;
}*/
.SelectedTatibNozol {
    background-color: aquamarine !important;
}

.TarikhNozolmain {
    text-align: center;
    align-content: center;
}

.fs-12 {
    font-size: 12px !important;
}

full_address {
    color: #20c99b;
}

.truncate-two-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.truncate-tree-lines {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: auto;
    white-space: normal;
}

    .truncate-tree-lines .quran_text {
        color: #009688;
    }

.SelectedNode {
    background-color: #d3e5ff !important;
}

.context-menu {
    display: none;
    position: fixed;
    background-color: white;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    z-index: 1000;
}

    .context-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .context-menu ul li {
            padding: 8px 12px;
            cursor: pointer;
        }

            .context-menu ul li:hover {
                background-color: #eee;
            }

.treeview-container {
    width: 300px; /* Set the width of the container */
    height: 400px; /* Set the height of the container */
    overflow: auto; /* Enable scroll if content exceeds container size */
    border: 1px solid #ccc; /* Add a border around the container */
    padding: 10px; /* Add some padding inside the container */
}

/* Optional: Style the tree nodes */
.jstree-default .jstree-node {
    line-height: 1.5; /* Adjust line height for better readability */
}

.highlight.area {
    z-index: 0;
}

@supports not (selector(::-webkit-scrollbar-thumb)) {
    * {
        scrollbar-color: var(--scroll-thumb-color, grey) var(--scroll-track, transparent);
        scrollbar-width: thin;
    }
}

*::-webkit-scrollbar {
    width: var(--scroll-size, 10px);
    height: var(--scroll-size, 10px);
}

*::-webkit-scrollbar-track {
    background-color: var(--scroll-track, transparent);
    border-radius: var(--scroll-track-radius, var(--scroll-radius));
}

*::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb-color, grey);
    background-image: var(--scroll-thumb, none);
    border-radius: var(--scroll-thumb-radius, var(--scroll-radius));
}

* {
    --scroll-size: 7px;
    --scroll-radius: 5px;
    --scroll-track: #e9ecef;
    --scroll-thumb: linear-gradient(45deg, #20c99b, #17a2b8);
}


.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 5px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

    /* Dropdown button on hover & focus */
    .dropbtn:hover, .dropbtn:focus {
        background-color: #2980B9;
    }

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

    /* Links inside the dropdown */
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

        /* Change color of dropdown links on hover */
        .dropdown-content a:hover {
            background-color: #ddd;
        }

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
    display: block;
}

.split_container {
    display: flex;
    width: 100%;
    height: 100%;
}

.split_container__left {
    width: 50%;
    align-items: flex-start;
    display: flex;
    height: 100%;
    padding-top: 5px;
    background-color: white;
}

.split_resizer {
    background-color: #cbd5e0;
    cursor: ew-resize;
    height: 100%;
    width: 5px;
}

.split_container__right {
    flex: 1;
    display: table;
    height: 100%;
    background-color: white;
    padding-top: 5px;
}

.green {
    color: #20c99b;
}

.MoshakhasatNatayej {
    width: 100%;
}

.swal-custom-bg {
    background-color: #fff !important; /* Light blue background */
    color: #333; /* Optional: Text color */
    border-radius: 10px; /* Optional: Rounded corners */
    width: 80% !important;
    height: 80% !important;
    max-width: 80% !important; /* Optional to limit the max width */
    max-height: 80% !important; /* Optional to limit the max height */
}

    .swal-custom-bg input {
        background-color: #ffffff; /* White background for the input field */
    }

.swal-custom-content {
    height: calc(100% - 100px); /* Adjust as needed to ensure content fits */
    overflow-y: auto;
}

.btn-show-more {
    text-align: center;
    background: #18a8b4;
    color: #fff !important;
    cursor: pointer;
    padding: 0px 4px;
    border-radius: 3px;
    font-size: .77rem;
    width: 100%;
    height: 100%;
}

    .btn-show-more.deactive {
        background: #c7c7c7;
    }

.btn-active {
    text-align: center;
    /* background: #18a8b4; */
    color: #ff1d1d !important;
    cursor: pointer;
    padding: 6px 4px;
    border-radius: 3px;
    font-size: 16px;
    margin: 2px;
    height: fit-content;
    width: fit-content;
}

.btn-deactive {
    text-align: center;
    /* background: #bbbbbb; */
    color: black !important;
    /* border: 1px solid #d9d9d9; */
    cursor: pointer;
    padding: 6px 4px;
    border-radius: 3px;
    font-size: 16px;
    margin: 2px;
    height: fit-content;
    width: fit-content;
}

.btn-deactive-1 {
    text-align: center;
    background: #bbbbbb;
    color: black !important;
    cursor: pointer;
    padding: 6px 4px;
    border-radius: 3px;
    font-size: 16px;
    margin: 2px;
    height: fit-content;
    width: fit-content;
}

#apexTreeWrapper {
    width: 100%;
    height: 100%;
}

    #apexTreeWrapper svg {
        width: 100%;
        height: 100%;
    }

.apex-tree-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 7px;
    width: 100%;
    background-color: beige;
    font-family: IRANSans;
}

.apex-book1 {
    border-bottom: 5px solid #f27474 !important;
    border-radius: 5px;
}

.apex-book2 {
    border-bottom: 5px solid #0c6f97 !important;
    border-radius: 5px;
}

.apex-book3 {
    border-bottom: 5px solid #ca4ff3 !important;
    border-radius: 5px;
}

.apex-book4 {
    border-bottom: 5px solid #FF9800 !important;
    border-radius: 5px;
}

.apex-book5 {
    border-bottom: 5px solid #009688 !important;
    border-radius: 5px;
}

.apex-book6 {
    border-bottom: 5px solid #607D8B !important;
    border-radius: 5px;
}

.horizontal-scroll {
    margin: 20px auto;
    padding: 15px;
    max-width: 100%;
    min-height: fit-content;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    border: 1px solid #ddd;
    flex-wrap: nowrap;
    align-items: center;
}

.percentage-top {
    position: absolute;
    background: #ebd2f7;
    border-radius: 15px;
    width: 30px;
    height: 20px;
    font-size: small;
    text-align: center;
}

.card-show-btn {
    max-width: 60px;
    align-self: center;
    bottom: 0;
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
}

.card-back {
    border-radius: 5px;
    background: #fbfbfb;
    max-height: 100px;
    align-items: anchor-center;
    border: 1px solid #f27474;
    border-bottom: 5px solid #f27474 !important;
    display: flex;
    flex-direction: column;
}

.table_div {
    justify-self: anchor-center;
}

.semantic-article-show {
}

.table_div {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #ccc;
}

    .table_div table {
        width: 100%;
        border-collapse: collapse;
    }

    .table_div thead th {
        position: sticky;
        top: 0;
        background: #f8f9fa;
        z-index: 1;
    }

    .table_div th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: center;
    }

.article-card {
    min-height: 100px;
}

    .article-card .setting {
        bottom: 0;
        position: absolute;
        left: 0;
        right: 0;
        background: #66BB6A;
        color: #fff;
        border-radius: 0px 0px 7px 7px;
        font-size: smaller;
    }

.node-div {
    border-color: #feae0d;
    border-width: 1px;
    border-radius: 5px;
    padding: 5px;
    background: #f1f1f1;
    font-size: smaller;
    color: #282727;
    margin: 3px;
}

    .node-div::after {
        content: " ";
    }

    .node-div:before {
        content: " ";
    }

.t-root {
}

    .t-root::after {
        content: " ";
    }

    .t-root:before {
        content: " ";
    }

.t-bab {
}

    .t-bab::after {
        content: " ";
    }

    .t-bab:before {
        content: " ";
    }

.t-jar {
}

    .t-jar::after {
        content: " ";
    }

    .t-jar:before {
        content: " ";
    }

.max-width-col {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.BaHamAye {
    padding: 15px;
}

.chart-div {
    width: 100%;
    height: 30%;
}

.table_div_description {
}

    .table_div_description .description {
        margin:10px;
    }

    .table_div_description summary {
        box-shadow: 4px 3px 9px 0px #c2c2c3;
        padding: 5px;
        border-radius: 5px;
    }

    .table_div_description .description-items {
        border: none !important;
        box-shadow: 0 0 13px -2px #3e396b2e;
        border-radius: .35rem !important;
        padding: .5rem !important;
        margin: .25rem !important;
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
    }

    .table_div_description .description-title {
        font-weight:500;
    }

    .table_div_description .description-item {
        padding-right:20px;
    }


m[h] {
    display: none;
}
m[d] {
    font-size: 10px;
    color: brown;
}


dots {
    color: #7708de;
}

    dots::after {
        content: ' ..... ';
    }

m[s1] {
    display: inline;
    color: red;
}

m[s2] {
    display: inline;
    color: #0048ff;
}

m[s3] {
    display: inline;
    color: #04c806;
}

m[s4] {
    display: inline;
    color: #dc640f;
}

m[s5] {
    display: inline;
    color: #c800ff;
}


m[g] {
    color: #58151c;
}

    m[g]::before {
        content: ' ';
    }

    m[g]::after {
        content: ' ';
    }

n[a4]::after {
    content: " (" attr(a4) ")";
    font-size: 0.8em;
    color: #025202;
}

/* فقط برای آخرین n در p — جایگزین می‌کنه */
n[a4][a2]:last-of-type::after {
    content: " (" attr(a2) ":" attr(a4) ")";
    color: #40c286;
}


.verse-wrapper {
    display: flex;
    align-items: center;
    margin: 12px 0;
    font-family: 'Scheherazade New', 'Traditional Arabic', serif;
    font-size: 20px;
    line-height: 2.2;
}

.circle-badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #0606b3;
    background-color: #bcd3f6; /* آبی */
    color: #1212f3;
    font-size: 14px;
    font-weight: bold;
    margin-left: 10px;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

p[per] {
    margin: 0;
    display: inline-block;
}