.mainCss{display:inline-block;float:right;width:100%}
.prayerDiv{display:inline-block; width: calc(100% - 320px);margin-left: 20px;}
.prayerTimes .prayerDiv  .prayerTimesTable{width:100%;margin-left:0}

.zakahTabs { display:flex;justify-content:center;align-items:center;    gap: 30px; width: 100%;border-radius: 5px;background: #F7DDC9;height:58px;}
.zakahTabs .tabBtn { width: auto;padding:0 30px;display: flex;justify-content:center;align-items:center;gap:10px;height: 38px;text-align:center;font-size:16px;cursor: pointer;border: none;color: #49221A;background: transparent;transition: background 0.3s;}
.zakahTabs .tabBtn:last-child{margin-left:0}
.zakahTabs .tabBtn.active { background: #9F6332;color: #fff;font-family:DroidKufiBold, arial;border-radius:5px}


.tabContent{ display:none; width: 100%;float: right;background: #FFF5ED;padding:40Px 0 0}
.tabContent.active {    display: flex;
    flex-direction: column;}
.tabContent p{font-size:16px}
.tabContent p.title{color: #074167;font-family:DroidKufiBold, arial;margin-bottom:8px;}
.tabContent p.text{color: #1E1E1E;line-height:1.8;    width:auto;font-size:14px}
.tabContent p.colored{color: #49221A;font-size:16px;font-family:DroidKufiBold, Arial;    width:auto ;}
.tabContent span.bold{font-family:DroidKufiBold, Arial;font-size:16px;}
.tabContent p.bold-text{font-size:36px;margin-bottom:32px}
.tabContent ul.mainCss li{
    display:flex;
   align-items: flex-start;
    font-size:16px;
    color: #49221A;
    line-height:1.8;
    margin-bottom:16px;
    font-family:DroidKufiBold, Arial; 
     border-radius: 16px;
border-right: 4px solid #49221A;
background: #F7DDC9;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
padding: 24px
}
#prayerPillars.tabContent p.colored{margin-bottom:16px}

.tabContent .textDiv{ 
        display: flex;
    gap: 10px;
    width: 100%;margin-bottom:30px;
    flex-wrap:wrap
}
.tabContent .textDiv div{width: calc(100% - 70px);
    display: flex;
    flex-direction: column;
    justify-content:center
}
.tabContent .textDiv span{display:flex;justify-content:center;align-items:center;border-radius: 16px;background: #49221A;width: 60px;height: 60px;}
.tabContent .textDiv span:before{content:'';display:block;width:20px;height:20px;background:#fff;-webkit-mask:url(../Images/Ramadan26/azkar.svg) no-repeat center center;mask:url(../Images/Ramadan26/azkar.svg) no-repeat center center;mask-size:contain;}
.prayerTimes.emsakya .main{border-radius: 24px;
background: linear-gradient(180deg, #49221A 0%, #5C2E24 50%, #49221A 100%);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);}
.prayerTimes.emsakya .main:before{display:none}

.prayerTimes .main .ttl{margin-bottom:10px}
.prayerTimes .main .cityDate date:before{content:'\AE';color:#fff;    font-size: 23px;}
.prayerTimes .main .location{margin:30px 0}
.prayerTimes .main .dropDownDiv{width: 265px;}
#prayerPillars  ul.mainCss li:before{display:none}
#prayerPillars  ul.mainCss li{flex-direction:column;    font-family: DroidKufiLight, Arial;padding-right:53px}
#prayerPillars  ul.mainCss li span.bold{margin-bottom:30px;color:#49221A}
#prayerPillars p.text{margin-bottom:26px}
#prayerPillars p.text:last-child{margin-bottom:0}
.tabContent .subLi{display:flex;flex-wrap:wrap;}
#prayerPillars ul.mainCss .subLi li{width:50%;flex-direction: row;
    border: 0;
    box-shadow: unset;
    height: auto;
    padding: 0 0 0 50px;  font-family:DroidKufiBold, Arial;}
#prayerPillars ul.mainCss .subLi li:nth-of-type(2n){padding-left:0}
.prayerTimes .mainTable .prayersTable .title .name{
    padding: 18px 0 0;
    width:calc((100% - 5px)/ 6);
    margin-left:0;
    font-size:14px;
    font-family:DroidKufiBold, Arial;

    border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.20);
background: rgba(255, 255, 255, 0.10);
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
gap:6px;
    padding-bottom: 4px;
}
.prayerTimes .mainTable .prayersTable .title .name:before{display:block;content:'';width:24px;height:24px;background:#fff}
.prayerTimes .mainTable .prayersTable .title .name.fagr:before{-webkit-mask: url(../Images/Ramadan26/fajr.svg) no-repeat center;mask:url(../Images/Ramadan26/fajr.svg) no-repeat center;mask-size: contain;}
.prayerTimes .mainTable .prayersTable .title .name.shoruk:before{-webkit-mask: url(../Images/Ramadan26/shoruk.svg) no-repeat center;mask:url(../Images/Ramadan26/shoruk.svg) no-repeat center;mask-size: contain;}
.prayerTimes .mainTable .prayersTable .title .name.dohr:before{-webkit-mask: url(../Images/Ramadan26/sunnah.svg) no-repeat center;mask:url(../Images/Ramadan26/sunnah.svg) no-repeat center;mask-size: contain;}
.prayerTimes .mainTable .prayersTable .title .name.asr:before{-webkit-mask: url(../Images/Ramadan26/asr.svg) no-repeat center;mask:url(../Images/Ramadan26/asr.svg) no-repeat center;mask-size: contain;}
.prayerTimes .mainTable .prayersTable .title .name.maghreb:before{-webkit-mask: url(../Images/Ramadan26/mghreb.svg) no-repeat center;mask:url(../Images/Ramadan26/mghreb.svg) no-repeat center;mask-size: contain;}
.prayerTimes .mainTable .prayersTable .title .name.asha:before{-webkit-mask: url(../Images/Ramadan26/azkar.svg) no-repeat center;mask:url(../Images/Ramadan26/azkar.svg) no-repeat center;mask-size: contain;}

.prayerTimes .mainTable .prayersTable  .time{
    font-size:18px;font-weight:bold;margin-left:0;

color:#fff;
padding:0 0 18px
}
.prayerTimes .mainTable .prayersTable  .time:last-child{margin-left:0}
.prayerTimes .mainTable .prayersTable  .time span{
    display: block;
    margin-right: 0;
    font-family:DroidKufiLight, Arial;
    font-size:12px;
    color:#fff;  
    font-weight: 400;
    margin-top: 0;
}

.prayerTimes .monthTable{visibility:visible;opacity:1;max-height: 100%;margin-bottom:40px}
.prayerTimesTable button{display:none}


#LiveTime{display:inline-block;float:right;width:100%;color:#fff;font-size:16px;margin-top:8px}
#LiveTime:before{content:'e';color:#fff;font-size:16px;float:right;margin-left:10px;line-height: 1.8;}
.remembranceDiv{
border-radius: 16px;
border-right: 4px solid #49221A;
background: #F7DDC9;
padding:16px 20px;
margin-bottom:24px
}
.remembranceTxt{color: #49221A;height: auto; line-height: 1.8;font-size:16px;margin-bottom:2px;text-align:right;    margin-bottom: 10px;}
.remembranceTxt span{color: #49221A;font-family:DroidKufiLight, Arial}
.remembranceTxt span.color{display:block;color:  #49221AB2;font-family:DroidKufiLight, Arial;font-size:14px;margin-top:10px}
.remembrancebTns{    display: flex;
    gap: 12px;
    flex-wrap:wrap
}
.remembrancebTns button{
        width: auto;
    padding: 0 20px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    border-radius:5px
}
.remembrancebTns button.tasbeeh{
background: #9F6332;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);

}
.remembrancebTns button.reset{
   background:#49221A

}
.remembrancebTns .remembranceN{
    font-weight: 700;
    cursor: default;
    color:#49221A;
    background:#fff
}
.remembrancebTns button:active { transform: scale(0.95);}
.remembrancebTns .remembranceN:active{transform:none}
 

.accordion { display: inline-block;width: 100%;overflow: hidden;float: right;border-radius: 24px;
border: 1px solid rgba(73, 34, 26, 0.20);
background: #FFF;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10); 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    margin-bottom:30px
}
.accordionItem {display:inline-block;float:right;width:100%;;height:auto  ;min-height:48px ;border-radius: 5px; padding:0 32px }
.accordionHeader {
    position:relative;
    display: flex;
    justify-content: space-between;
    align-items: center
        ;width:100%;
         float:right;
         line-height:48px;
         padding:0 20px ;
         color: #49221A;
         font-size:16px;
         font-family:DroidKufiBold, arial;
         cursor: pointer; 
         text-align:right;
         border-radius: 16px ;
    background: #F7DDC9;
    height:80px
}
.accordion .ramadanDay  {
    min-width: 100px;
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.60);
    color: rgba(73, 34, 26, 0.70);
    font-size: 14px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: DroidKufiLight, arial;
    gap: 2px;
    position:relative;
        margin-left: 32px;
}
.accordionHeader:after{content:'q';display:inline-block;float:left;color:#9F6332;font-size:14px;transform: rotate(270deg);position:absolute;left:20px}
.accordionHeader .dayCount{width: 40px;height: 40px;display:flex;justify-content: center;align-items: center;border-radius: 14px;background: #9F6332;color:#fff;font-family:Arial;font-weight:700}
.accordionContent { display: none; padding: 10px; background: #F7DDC9; float:right;width:100%;padding:20px;border-radius:0 0 16px 16px}
.accordionContent ul{
        display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.accordionContent ul li{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    width:calc((100% - 60px) /6);
    height:84px;
    border-radius: 14px;
background: #FFF;
}
.accordionContent ul li .salah{
    color:#49221AB2;
    font-size: 12px;
    font-family: DroidKufiLight, arial;


}
.accordionContent ul li .salahTime{
color:#49221A;
    font-size: 16px;
    font-family: DroidKufiBold, arial;
        font-weight:bold
}
.accordionContent ul li .salahTheme{
       color:#49221AB2;
    font-size: 12px;
    font-family: DroidKufiLight, arial;
    line-height:1
}
.accordionItem:last-child{margin-bottom:18px}
.activetoggle .accordionContent {  display: block; }
.activetoggle .accordionHeader:after{transform:rotate(90deg)}
.activetoggle .accordionHeader{border-radius:16px 16px 0 0}
.tabContent p.emsakyehTitle{background: #9F6332;height:116px;width:100%;display:flex;align-items:center;color:#fff;font-size:30px;font-family:DroidKufiBold, arial;font-weight:bold;padding:0 32px;gap:10px}
.tabContent p.emsakyehTitle:before{
   content: '\AE';
    width:52px;
    height:52px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.15);
    font-size:20px;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;

}
.accordion  .dayDiv{  
    display: flex;
    align-items: center;
    color: #49221A;
    font-size: 18px;
        gap: 12px;
font-family:DroidKufiBold, arial

}

@media screen and (min-width:1360px) and (max-width:1919px) {
       .prayerTimes .mainTable .prayersTable .title .name{font-size:13px;padding: 12px 0 0;}
        .prayerTimes .mainTable .prayersTable  .time{font-size:15px;padding: 0 0 12px;}
        .zakahTabs{gap:16px}
        .tabContent p.emsakyehTitle{
            font-size: 24px;
        height: 82px;}
        .tabContent p.emsakyehTitle:before {  
            width: 46px;
    height: 46px;font-size: 19px;}
        #prayerPillars ul.mainCss .subLi li,
        .tabContent ul.mainCss li{font-size: 14px;}
}

@media screen and (min-width:1280px) and (max-width:1359px){
      .tabContent p.emsakyehTitle{
            font-size: 20px!important;
        height: 82px;}
        .tabContent p.emsakyehTitle:before {  
            width: 46px;
    height: 46px;font-size: 19px;}
        #prayerPillars ul.mainCss .subLi li,
        .tabContent ul.mainCss li{font-size: 14px;}

        .prayerTimes .mainTable .prayersTable .title .name{font-size:13px}

        .zakahTabs .tabBtn{    padding: 0 12px;}
}
@media screen and (min-width:320px) and (max-width:1359px) {
    .tabContent p,
    .accordionHeader,
    .tabContent ul li,
    .inputContainer:before,
    .remembranceTxt,
    .tabContent span,
    .prayerTimes .mainTable .prayersTable  .time{font-size:15px}
    .city span{    font-size: 32px!important}
    .prayerTimes .mainTable .prayersTable  .time span{margin-right: 4px;}
    .tabContent p.bold-text{font-size:28px!important}
}

@media screen and (min-width:1024px) and (max-width:1279px) {
    .prayerTimes .mainTable .prayersTable  .time{font-size:15px!important}
    .city span{    font-size: 32px!important}
    .prayerTimes .mainTable .prayersTable  .time span{margin-right: 4px;}
    .prayerTimes .mainTable .prayersTable .title .name{min-height:107px;width: calc((100% - 32px) / 3);}
  .zakahTabs .tabBtn {        height: auto;
        line-height: 1.6;
        padding: 5px 10px;
        min-height: 55px;
        font-size: 14px;}
  .accordionItem{
      padding: 0 10px;
  }
  .accordionContent ul{gap:10px}
   .tabContent p.emsakyehTitle{
            font-size: 22px;
        height: 82px;
        padding:0 10px
   }
        .tabContent p.emsakyehTitle:before {  
            width: 46px;
    height: 46px;font-size: 19px;}
        .accordionContent{padding:10px}
        .accordionHeader{padding:0 10px}
        .accordionContent ul li{width: calc((100% - 50px) / 6);}
        .accordionHeader:after{left:10px}
}


@media screen and (min-width:768px) and (max-width:1023px) 
{
    .prayerDiv{width:100%;margin-left:0}

        .prayerTimes .mainTable .prayersTable  .time{font-size:15px!important}
    .city span{    font-size: 32px!important}
    .prayerTimes .mainTable .prayersTable  .time span{margin-right: 4px;}
    .prayerTimes .mainTable .prayersTable .title .name{min-height:107px}
  .zakahTabs .tabBtn {        height: auto;
        line-height: 1.6;
        padding: 5px 10px;
        min-height: 55px;
        font-size: 14px;}
  .accordionItem{
      padding: 0 10px;
  }
  .accordionContent ul{gap:10px}
   .tabContent p.emsakyehTitle{
            font-size: 22px;
        height: 82px;  padding:0 10px}
        .tabContent p.emsakyehTitle:before {  
            width: 46px;
    height: 46px;font-size: 19px;}
        .accordionContent{padding:10px}
        .accordionHeader{padding:0 10px}
        .accordionContent ul li{width: calc((100% - 50px) / 6);}
        .accordionHeader:after{left:10px}
        .prayerCheckbox p.pText{font-size:14px}
}

@media screen and (min-width:320px) and (max-width:767px) {
        .prayerDiv{width:100%;margin-left:0}

    .zakahTabs {
             column-count: unset;
        column-gap: unset;
        -moz-column-count: unset;
        -moz-column-gap: unset;
        -webkit-column-count: unset;
        -webkit-column-gap: unset;
        -o-column-count: unset;
        -o-column-gap: unset;
        -ms-column-count: unset;
        -ms-column-gap: unset;
        overflow-x: auto;
        overflow-y: hidden;
        z-index: 0;
        -webkit-overflow-scrolling: touch;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        height: 58px;
     
        border-radius: 0;
       white-space: nowrap;
        padding-right: 35px;
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin-bottom:18px
    }

        .zakahTabs .tabBtn{
      padding: 0 18px;
      height: 38px;
      font-size:14px
    }

        .prayerTimes .main .dropDownDiv {   width: 100%; float: right;}
        .prayerTimes .mainTable .prayersTable .title .name{width: calc((100% - 24px) / 3);font-size: 10px;padding: 6px 0;line-height: 1.5;height: auto;}
        .prayerTimes .mainTable .prayersTable  .time span{display:block;font-size:10px}
        .prayerTimes .cntdwn .timerDiv{    width: 260px;height: auto;}
        .prayerTimes .cntdwn .timerDiv ul li{font-size:24px!important}
        .tabContent{padding:0 20px;align-items:center}
        .remembrancebTns button{width:128px;margin-left:2px;font-size:14px;padding:0 10px}

        .tabContent .textDiv{
                flex-direction: column;
    justify-content: center;
    align-items: center;
        }

        .tabContent .textDiv div{
            width:100%;
            justify-content: center;
    align-items: center;
    max-width:260px
        }
        .remembranceDiv{padding:20px 50px}
        .remembrancebTns .remembranceN{font-size:20px}
        .tabContent p.text{text-align:center;margin-bottom:40px!important;font-size:14px!important}
        .tabContent p.text:last-child{margin-bottom:0!important;        font-size: 15px !important;}
        .remembranceTxt{text-align:center}
        .remembrancebTns button{width:calc((100% - 12px) /2);height:56px;line-height:56px;border-radius: 14px;margin-left:0}
                .remembrancebTns button.tasbeeh{width:100%;}
         .tabContent span{font-size:13px}       
         .tabContent p.colored{width:100%;max-width:256px;text-align:center;margin-bottom:10px!important}

         #prayerPillars ul.mainCss li{padding:24px 36px 24px 24px;margin-bottom:32px}
         #prayerPillars p.text{text-align:right;margin-bottom:20px!important}
         #prayerPillars ul.mainCss li span.bold{margin-bottom:13px;display:block;text-align: right;}
         #prayerPillars p.text:last-child,
         #prayerPillars p.colored{margin-bottom: 0!important;}
         #prayerPillars ul.mainCss .subLi li{width:100%;padding:0;margin-bottom:10px}
         #sunnah.tabContent ul.mainCss li{font-size:14px}
         .tabContent .subLi{flex-direction:column}
             .prayerTimes .main .location { margin: 18px 0 }
                 .prayerTimes .main .cityDate date:before{font-size:18px}
                 .prayerTimes .mainTable .prayersTable .time{padding:0}
                 .prayerTimes .mainTable .prayersTable .title .name:before{width:16px;height:16px}
                  .tabContent p.emsakyehTitle{font-size: 17px;    height: 100px;line-height: 23px;}
    .tabContent p.emsakyehTitle:before{width:47px;height:47px}
    .accordionItem{padding:0 17px}
    .accordionHeader{padding:0 15px;    height: 68px;}
    .accordionHeader .dayCount{width:35px;height:35px}
    .accordionHeader:after{left:15px}
    .accordion .ramadanDay{min-width:87px;margin-left:26px;    height: 23px;}
    .accordionContent ul{gap:8px}
    .accordionContent ul li{    width: calc((100% - 24px) / 3);}
    .accordionContent{padding:15px}
    .accordion{gap:15px}
    }