﻿.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: inline-block; float: right;  width: 100%;}
.zakahTabs .tabBtn { width: calc((100% - 3px) / 4);display: inline-block;height: 48px;line-height: 48px;float: right;margin-left:1px;text-align:center;font-size:14px;cursor: pointer;border: none;color: #6D6D6D;background: #DFDFDF;transition: background 0.3s;}
.zakahTabs .tabBtn:last-child{margin-left:0}
.zakahTabs .tabBtn.active { background: #fff;color: #1E1E1E;font-family:DroidKufiBold, arial}
.tabContent{ display:none; width: 100%;float: right;background: #FFF;padding:20px}
.tabContent.first{padding:0;background:unset}
.tabContent.active {display: block;}
.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}
.tabContent p.colored{color: #075C99;font-size:16px;font-family:DroidKufiBold, Arial;}
.tabContent span.bold{font-family:DroidKufiBold, Arial;font-size:16px;}
.tabContent ul.mainCss li{display:inline-block;font-size:16px;color: #1E1E1E;line-height:1.8;margin-bottom:6px;font-family:DroidKufiBold, Arial;   }
.tabContent ul.mainCss li span{font-weight:bold}

.prayerTimes.emsakya .main{background:#075C99;margin-bottom:30px}
.prayerTimes.emsakya .main:before{display:none}

.prayerTimes .main .ttl{margin-bottom:10px}
.prayerTimes .main .cityDate date:before{content:'\AE';color:#fff;font-size:16px;float:right;margin-left:10px;line-height: 1.5;}
.prayerTimes .main .location{margin-bottom:15px}
.prayerTimes .main .dropDownDiv{width: 265px;}

.prayerTimes .cntdwn .timerDiv{width: 216px;height: 56px;}
.prayerTimes .cntdwn .timerDiv ul li{width:56px;height:56px;background: rgba(0, 0, 0, 0.10); padding-right:0;line-height:56px;font-size:24px   }
.prayerTimes .cntdwn .timerDiv ul li:nth-child(1):after, .prayerTimes .cntdwn .timerDiv ul li:nth-child(2):after{top:0}

.prayerTimes .mainTable .prayersTable .title .name{background: #07487A!important;padding: 12px 0;width:calc((100% - 5px)/ 6);margin-left:1px;font-size:16px;font-family:DroidKufiLight, Arial}
.prayerTimes .mainTable .prayersTable .title .name:last-child{margin-left:0}
.prayerTimes .mainTable .prayersTable .allTimes .time{font-size:16px;background:#fff!important;font-weight:bold;width:calc((100% - 5px)/ 6);margin-left:1px;}
.prayerTimes .mainTable .prayersTable .allTimes .time:last-child{margin-left:0}
.prayerTimes .mainTable .prayersTable .allTimes .time span{display:inline-block;margin-right:8px;font-family:DroidKufiBold, Arial;}

.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.first{margin-top:30px}
.remembranceDiv{margin-bottom:30px}
.remembranceTxt{background: #F9F9F9;height: auto; line-height: 1.8;padding:8px 10px;font-family:DroidKufiBold, Arial;font-size:16px;margin-bottom:2px;text-align:right}
.remembranceTxt span{color: #1E1E1E;font-family:DroidKufiLight, Arial}
.remembranceTxt span.color{color:  #075C99;font-family:DroidKufiLight, Arial}

.remembrancebTns button{width:146px;float:right;padding:0 15px;background: #075C99;box-shadow: 0px -1px 4px 0px rgba(0, 0, 0, 0.25) inset;height:40px;line-height:40px;font-size:16px;color:#fff;margin-left:3px;text-align:right}
.remembrancebTns button:last-child{margin-left:0}
.remembrancebTns button:nth-of-type(2n):before{content:"\AC";color:#fff;font-size:16px;float:right;margin-left:8px}
.remembrancebTns button:last-child:before{content:'R';color:#fff;font-size:16px;float:right;margin-left:8px}
.remembrancebTns .remembranceN{width:40px;padding:0;text-align:center;font-size:20px;font-weight:bold;cursor:default}
.remembrancebTns button:active { transform: scale(0.95);}
.remembrancebTns .remembranceN:active{transform:none}

@media screen and (min-width:320px) and (max-width:1359px) {
    .tabContent p,
    .accordionHeader,
    .tabContent ul li,
    .inputContainer:before,
    .remembranceTxt,
    .tabContent span,
    .prayerTimes .mainTable .prayersTable .allTimes .time{font-size:15px!important}
    .city span{    font-size: 32px!important}
    .prayerTimes .mainTable .prayersTable .allTimes .time span{margin-right: 4px;}
}

@media screen and (min-width:1024px) and (max-width:1279px) {
    .prayerTimes .mainTable .prayersTable .allTimes .time{font-size:15px!important}
    .city span{    font-size: 32px!important}
    .prayerTimes .mainTable .prayersTable .allTimes .time span{margin-right: 4px;}
    .prayerTimes .mainTable .prayersTable .title .name{min-height:86px}
  .zakahTabs .tabBtn { height: auto; line-height: 1.6;  padding: 5px 0;  min-height: 55px;}
}

@media only screen and (max-width: 1023px) {

.prayerDiv{width:100%;margin-left:0}
}


@media screen and (min-width:320px) and (max-width:767px) {

    .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;
        display: inline-block;
        float: right;
        width: 100%;
        white-space: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        z-index: 0;
        -webkit-overflow-scrolling: touch;
        -webkit-transform: translateZ(0);
        transform: translateZ(0); background: #DFDFDF;}

        .zakahTabs .tabBtn{
        position: relative;
        display: inline-block;
        float: right;
        width: 100%;
        -moz-page-break-inside: avoid;
        -webkit-column-break-inside: avoid;
        break-inside: avoid;
        -o-column-break-inside: avoid;
        -ms-column-break-inside: avoid;
        column-break-inside: avoid;
        page-break-inside: avoid;
        float: none;
        width: auto;
        margin: 0;padding: 0 11px;
    }

        .prayerTimes .main .dropDownDiv {   width: 100%; float: right;}
        .prayerTimes .mainTable .prayersTable .title .name{width: calc((100% - 5px) / 6);font-size: 14px;padding: 6px 0;line-height: 1.5;}
        .prayerTimes .mainTable .prayersTable .allTimes .time span{display:block}
        .prayerTimes .cntdwn .timerDiv{    width: 200px;}
        .prayerTimes .cntdwn .timerDiv ul li{font-size:24px!important}
        .tabContent{padding:20px 10px}
        .remembrancebTns button{width:128px;margin-left:2px;font-size:14px;padding:0 10px}

    }