.cd-accordion {
    background: #4c5057;
    background: var(--cd-color-1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-shadow: 0 1px 8px rgba(0,0,0,.1),0 16px 48px rgba(0,0,0,.1),0 24px 60px rgba(0,0,0,.1);
    box-shadow: var(--shadow-lg)
}

.cd-accordion--animated .cal::before {
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s
}

.cass {
    display: none;
    overflow: hidden
}

.caii {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.cai {
    position: absolute;
    opacity: 0
}

.cal {
    background: #4c5057;
    background: var(--cd-color-1);
    font-size: var(--text-14)
}

.cal span {
    -ms-flex-order: 3;
    order: 3
}

.cal:hover {
    background: #535860;
    background: hsl(var(--cd-color-1-h),var(--cd-color-1-s),calc(var(--cd-color-1-l)*1.1))
}

.cal::after,.calif::before {
    content: "";
    display: block;
    width: 13px;
    height: 13px;
    background-image: url(../img/cd-icons.svg);
    background-repeat: no-repeat;
    margin-right: .25em;
    margin-right: var(--space-xxxs)
}

.calif::before {
    -ms-flex-order: 1;
    order: 1
}

.cal::after {
    -ms-flex-order: 2;
    order: 2
}

.calif::before {
    background-position: 0 0;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg)
}

.calif::after {
    background-position: -16px 0
}

.cdalii::after {
    background-position: -48px 0;
    display: none
}

.cai:checked+.cal::before {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0)
}

.cai:checked+.cal::after {
    background-position: -32px 0
}

.cai:checked~.cass,.control input:checked~.control__indicator:after {
    display: block
}

.cass--l1 .cal {
    background: #313439;
    background: hsl(var(--cd-color-1-h),var(--cd-color-1-s),calc(var(--cd-color-1-l)*.65));
    --color-shadow: lightness(hsl(218, 7%, 32%), 0.85);
    --color-shadow: lightness(var(--cd-color-1), 0.85);
    box-shadow: inset 0-1px lightness(#4c5057,.85);
    box-shadow: inset 0-1px var(--color-shadow);
    padding-left: calc(1.25em + 16px);
    padding-left: calc(var(--space-md) + 16px)
}

.cass--l1 .cal:hover {
    background: #393c41;
    background: hsl(var(--cd-color-1-h),var(--cd-color-1-s),calc(var(--cd-color-1-l)*.75))
}

.caii:last-child .cal {
    box-shadow: none
}

.casl2 .cal {
    padding-left: calc(1.5em + 32px);
    padding-left: calc(var(--space-md) + var(--space-xxxs) + 32px)
}

.hadithMenuee .cass--l1 .cal {
    font-size: var(--text-md);
    background: #c0e3ff;
    padding-left: 7px
}

#sidebar_main ul li,.hadithMenuee a,.subjectMenuee a {
    color: #000
}

.hadithMenuee .casl2 .cal {
    font-size: var(--text-sm);
    padding-left: 11px
}

.subjectMenuee .cal {
    background: linear-gradient(90deg,#d0c4ff,#44e5e0)
}

.subjectMenuee .cass--l1 .cal {
    font-size: var(--text-md);
    background: #cfcfcf57
}

.subjectMenuee .casl2 .cal {
    background-color: #a4d5ce;
    font-size: var(--text-14) !important;
    padding: 8px 9px !important;
}

.cass--l1 .cal {
    font-size: var(--text-root)
}




.cal {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    background: #add8e6;
    --color-shadow: lightness(hsl(218, 7%, 32%), 1.2);
    --color-shadow: lightness(var(--cd-color-1), 1.2);
    box-shadow: inset 0-1px lightness(#4c5057,1.2);
    box-shadow: inset 0-1px var(--color-shadow);
    color: #fff;
    color: var(--color-white);
    padding: 0 .2em 0 8px
}


.hadithMenuee .cal,.subjectMenuee .cal {
    border-bottom: 1px solid #020202;
    font-size: var(--text-18)
}

.subjectMenuee .cal {
    padding: 0 .2em
}



.subjectMenuee .cass--l1 .cal {
    background: #bae4f7;
    border-radius: 11px;
    border: 1px solid rgb(0 0 0/18%);
    margin-left: 4px;
    cursor: pointer;
    padding: 10px 5px
}

 


.subjectMenuee .firstLevelAccordingMenu {
    background: linear-gradient(90deg,#d0c4ff00,#44e5e000);
    border: 1px solid #98bdff;
    box-shadow: 0 1px 2px 0 rgb(0 0 0/9%);
    margin: 5px 0
}

 

  @media (max-width: 768px) {
 .hadithMenuee .firstLevelAccordingMenu,
.subjectMenuee .firstLevelAccordingMenu {
    background: linear-gradient(90deg, #d0c4ffcf, #44e5e0);
    position: sticky;
    top: 0;  
    z-index: 1001;
  }
}


@media (min-width: 769px) {
  .hadithMenuee .firstLevelAccordingMenu,
.subjectMenuee .firstLevelAccordingMenu {
    background: linear-gradient(90deg, #d0c4ffcf, #44e5e0);
    position: sticky;
    top: 0;  
    z-index: 1001;
  }
}


.subjectMenuee .firstLevelAccordingMenu {
    padding: .8em .2em;
    font-size: var(--text-base);
    border-radius: 40px;
}


.firstLevelAccordingMenu:hover {
    background-color: rgb(106 214 238/73%);
    border-radius: 40px;
    box-shadow: 0 5px 35px 0 rgba(0,0,0,.1);
    transition: all .2s ease 0s;
    -webkit-transition: all .2s ease 0s
}

 
.secondLevelAccordingMenu,.slevelamh {
    display: block;
    color: #000;
    cursor: pointer
}

.secondLevelAccordingMenu {
    padding: 9px 10px;
    font-weight: 400; font-size: var(--text-14);
    border-bottom: 0 solid #dcdcdc;
    background-color: rgb(255 255 255/0%)
}
 
.secondLevelAccordingMenu, .slevelamh {
    display: block;
    color: #000;
    cursor: pointer;
    margin-left: 5px;
}

.titleExtendCss {
font-size: 1.3rem;
font-weight: 500;
color: #495057;
padding: 4px 15px;
font-style: italic;
top: 0;
}

.topTextSubject {
    padding: 7px 0;
    text-align: left;
    font-size: var(--text-md);
    font-weight: 600;
   margin: 0;
}
 
.subjectMenuee cal cdalii ald uldeign cClick {

    padding: 7px 5px !important;
    font-size: var(--text-14) !important;

}

.ssSubTitle {
    font-size: var(--text-lg); border: 1px solid rgba(128, 128, 128, 0.46); padding: 3px; border-radius: 18px;
    margin: 10px auto; left: 10%; float: none; text-align: center; background-color: rgba(156, 214, 255, 0.39);
    font-weight: 500; width: 90%;
}

#loadrequlist .ssSubTitle {
    border: 1px solid rgba(128, 140, 114, 0.46); padding: 6px;
    background-image: linear-gradient(157deg, #9dd4ff 0%, #fdccff 100%
100%);
}

@media (max-width: 768px) {
    .topTextSubject {
        padding: 0px 0 !important;
        font-size: var(--text-14) !important;
    }
}