/********** Prayer Times Page **********/
.prayerTimes .prayerTimesTable { width: calc(100% - 320px); margin-left: 20px; padding: 0; background: none; box-shadow: none; margin-bottom: 0 }
.prayerTimes .main { padding: 20px; background: url(../Images/mosqueBg.jpg) no-repeat top -70px center; background-size: cover }
.prayerTimes.emsakya .main { position: relative; background: linear-gradient(0deg,#330D46,#75358b); background: -webkit-linear-gradient(0deg,#330D46,#75358b); background: -o-linear-gradient(0deg,#4c3a6e,#22215b); background: -moz-linear-gradient(0deg,#4c3a6e,#22215b); background: -ms-linear-gradient(0deg,#4c3a6e,#22215b); }
.prayerTimes.emsakya .main:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(../Images/ramadanPatternBG.png?ref=0.1) top -20px right repeat; background-size: 80px auto; opacity: 0.2; pointer-events: none }
.prayerTimes .main .ttl { border-bottom: none; margin-bottom: 24px; position: relative; }
.prayerTimes .main .ttl h1, 
.prayerTimes .main .ttl h2{ float: right; display: inline-block; padding: 0; font-family: DroidKufiBold, Arial; font-size: 20px; color: #fff; display: block; line-height: 1.6; background: none }
.prayerTimes .main .ttl h1:after,
.prayerTimes .main .ttl h2:after{ display: none }
.prayerTimes .main .location { display: inline-block; width: 100%; margin-bottom: 40px; position: relative; }
.prayerTimes .main .cityDate { float: right; display: inline-block; margin-left: 20px; width: calc(100% - 320px) }
.prayerTimes .main .cityDate .cityName { font-family: DroidKufiBold, Arial; font-size: 32px; color: #fff; direction: rtl; float: right }
.prayerTimes .main .cityDate .cityName:after { content: "-"; display: inline-block; float: left; margin: 0 15px; font-size: 36px; }
.prayerTimes .main .cityDate .countryName { font-family: DroidKufiBold, Arial; font-size: 32px; color: #fff; direction: rtl; float: right }
.prayerTimes .main .cityDate date { float: right; display: inline-block; width: 100%; color: #fff;  font-size: 16px; text-align: right; direction: rtl }
.prayerTimes.emsakya .allTimes.activeColor .time { color: #075C99 !important }
/*.prayerTimesTable .showcaseDiv{ float:none}*/
/** Dropdown List **/
.prayerTimes .main .dropDownDiv { display: inline-block; float: left; width: 300px; margin-bottom: 0; padding: 0; background: none }
.prayerTimes .main .wrapper-demo { display: inline-block; width: 100%; margin-bottom: 12px }
.prayerTimes .main .wrapper-demo:last-child { margin-bottom: 0 }
.prayerTimes .main .wrapperDropdown { position: relative; width: 100%; background: rgba(255, 255, 255, 0.3); cursor: pointer; padding: 6px 12px; border: none; z-index: 1; text-align: right; direction: rtl;  font-size: 16px; color: #fff; outline: none; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }
.prayerTimes .main .wrapper-demo:first-child .wrapperDropdown { z-index: 2 }
.prayerTimes .main .icon-downArrow:before { content: "q"; position: absolute; left: 12px; line-height: 2.2; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg) }
.prayerTimes .main .wrapperDropdown:after { display: none }
.prayerTimes .main .wrapperDropdown .dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-radius: 0; border: 1px solid rgba(0,0,0,0.2); border-top: none; border-bottom: none; list-style: none; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; max-height: 0; overflow: hidden; }
.prayerTimes .main .wrapperDropdown .dropdown li { padding: 0 10px; }
.prayerTimes .main .wrapperDropdown .dropdown li a { display: block; text-decoration: none; color: #666; padding: 10px 0; transition: all 0.3s ease-out; border-bottom: 1px solid #e6e8ea; }
.prayerTimes .main .wrapperDropdown .dropdown li:last-of-type a { border: none; }
.prayerTimes .main .wrapperDropdown .dropdown li i { margin-right: 5px; color: inherit; vertical-align: middle; }
.prayerTimes .main .wrapperDropdown .dropdown li:hover a { color: #1d1d1d; }
.prayerTimes .main .wrapperDropdown.active { border-radius: 0; background: #eee; box-shadow: none; border-bottom: none; color: #1d1d1d }
.prayerTimes .main .wrapperDropdown.active:after { border-color: #666 transparent; }
.prayerTimes .main .wrapperDropdown.active .dropdown { border-bottom: 1px solid rgba(0,0,0,0.2); max-height: 400px; overflow: auto; }
/** Countdown **/
.prayerTimes .mainTable { display: inline-block; width: 100%; position: relative }
.prayerTimes .cntdwn { display: inline-block; width: 100%; float: right; text-align: right; margin-bottom: 30px }
.prayerTimes .cntdwn p { display: inline-block; width: 100%; color: #fff;  font-size: 18px; margin: 0 0 12px; text-align: right; direction: rtl; float: right }
.prayerTimes .cntdwn p:first-child { font-size: 14px; margin-bottom: 10px }
.prayerTimes .cntdwn p:first-child span { margin: 0 5px }
.prayerTimes .cntdwn .timerDiv { display: inline-block; width: 228px; height: 50px; float: right; }
.prayerTimes .cntdwn .timerDiv ul { display: inline-block; width: 100%; margin: 0 auto; direction: ltr }
.prayerTimes .cntdwn .timerDiv ul li { float: left; width: 60px; height: 50px; text-align: center; color: #fff; font-family: Arial; font-size: 32px; position: relative; background: rgba(255, 255, 255, 0.2); margin-right: 24px; line-height: 1.5 }
.prayerTimes .cntdwn .timerDiv ul li:last-child { margin-right: 0 }
.prayerTimes .cntdwn .timerDiv ul li:nth-child(1):after,
.prayerTimes .cntdwn .timerDiv ul li:nth-child(2):after { content: ":"; background: none repeat scroll 0 0 rgba(0, 0, 0, 0); color: #fff; display: block; font-size: 28px; position: absolute; top: 3px; right: -16px }
.prayerTimes .mainTable .prayersTable { display: inline-block; float: right; width: 100%; }
.prayerTimes .mainTable .prayersTable .title { display: inline-block; width: 100%; float: right; }
.prayerTimes .mainTable .prayersTable .title .name { float: right; width: calc(100% / 6); font-family: DroidKufiBold, Arial; font-size: 13px; cursor: auto; color: #fff; padding: 8px 0; text-align: center }
.prayerTimes .mainTable .prayersTable .title .name.active { color: #075C99 }
.prayerTimes .mainTable .prayersTable .title .name:nth-child(odd) { background: #2e3351 }
.prayerTimes .mainTable .prayersTable .title .name:nth-child(even) { background: #393e5e }
.prayerTimes .mainTable .prayersTable .allTimes { display: inline-block; width: 100%; float: right; }
.prayerTimes .mainTable .prayersTable .allTimes .time { float: right; width: calc(100% / 6); font-family: Arial; font-size: 20px; color: #1d1d1d; padding: 16px 0; text-align: center; display: block }
.prayerTimes .mainTable .prayersTable .allTimes .time span { display: block; font-size: 14px; color: #1d1d1d; margin-top: 5px; font-family: DroidKufiLight, Arial; }
.prayerTimes .mainTable .prayersTable .allTimes .time.active { color: #075C99 }
.prayerTimes .mainTable .prayersTable .allTimes .time.active span { color: #075C99 }
.prayerTimes .mainTable .prayersTable .allTimes .time:nth-child(odd) { background: #f8f8f8 }
.prayerTimes .mainTable .prayersTable .allTimes .time:nth-child(even) { background: #fff }
/** prayer checkbox **/
.prayerCheckbox { display: inline-block; float: left; margin-top: 20px }
.prayerCheckbox p.pText { display: inline-block; float: right; color: #fff;  font-size: 14px; line-height: 1.4; width: auto; margin: 0; cursor: default }
.prayerCheckbox .switch { position: relative; display: inline-block; width: 40px; height: 20px; float: right; margin-left: 10px }
.prayerCheckbox .switch input { opacity: 0; width: 0; height: 0; }
.prayerCheckbox .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }
.prayerCheckbox .slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 0px; bottom: 0px; background-color: white; -webkit-transition: .4s; transition: .4s; }
.prayerCheckbox input:checked + .slider { background-color: #45b73d; }
.prayerCheckbox input:focus + .slider { box-shadow: 0 0 1px #45b73d; }
.prayerCheckbox input:checked + .slider:before { -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); }
.prayerCheckbox .slider.round { border-radius: 34px; }
.prayerCheckbox .slider.round:before { border-radius: 50%; }
/** All Month Table **/
.prayerTimesTable button { display: inline-block; width: 240px; padding: 5px 0;font-size: 14px; color: #fff; background: #1d1d1d; border: none; margin: 0 calc((100% - 240px) / 2) 40px; float: right }
.prayerTimesTable button:after { content: "عرض مواقيت الصلاة خلال شهر"; display: block }
.prayerTimesTable button.hide { background: #075C99 }
.prayerTimesTable button.hide:after { content: "إخفاء مواقيت الصلاة خلال شهر" }
.prayerTimesTable button:hover { background: #075C99 }
.prayerTimes .monthTable { max-height: 0; margin-bottom: 0; visibility: hidden; opacity: 0; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s }
.prayerTimes .monthTable.show { max-height: 100%; visibility: visible; opacity: 1; margin-bottom: 40px }
.prayerTimes .monthTable .prayersTable { float: right; width: 100% }
.prayerTimes .monthTable .prayersTable .title { display: inline-block; width: 100%; float: right; }
.prayerTimes .monthTable .prayersTable .title .name { float: right; width: calc((100% - 220.1px) / 6);  font-size: 14px; color: #fff; padding: 8px 0; text-align: center; background: #1d1d1d }
.prayerTimes .monthTable .prayersTable .title .name:first-child { width: 220px }
.prayerTimes .monthTable .prayersTable .allTimes { display: inline-block; width: 100%; float: right; border-right: 1px solid #e8e8e8; border-left: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; }
.prayerTimes .monthTable .prayersTable .allTimes .time { float: right; width: calc((100% - 220px) / 6);  font-size: 13px; color: #1d1d1d; padding: 8px 0; text-align: center; display: block; border-left: 1px solid #e8e8e8; }
.prayerTimes .monthTable .prayersTable .allTimes .time:first-child { width: 220px }
.prayerTimes .monthTable .prayersTable .allTimes .time:last-child { border-left: none }
.prayerTimes .monthTable .prayersTable .allTimes .time span { margin-left: 5px }
.prayerTimes .monthTable .prayersTable .allTimes:nth-child(even) { background: #f2f2f2 }
.prayerTimes .monthTable .prayersTable .allTimes:nth-child(odd) { background: #fff }
.prayerTimes .monthTable .prayersTable .allTimes:nth-child(2) .time { color: #075C99 }

/********** Islameyat **********/
.prayerTimes.islameyat { display: inline-block; float: right; width: 100% }
.pulsecontainer {
  position: relative;
  display: inline-block;margin-left: 10px;
}

.pulse {
    display:inline-block;
  width: 10px;
  height: 10px;
  background-color: #075C99;
  border-radius: 50%;
  position: relative;
  z-index: 2;
}

.pulse::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  background-color: rgba(52, 152, 219, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  animation: pulse-ring 1.5s infinite;
}

@keyframes pulse-ring {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}


/*taboola*/
.tabolaaContainer{margin-bottom:0;display:inline-block;height:920px;width:100%;overflow:hidden;margin-bottom:15px}
.tabolaaContainer .trc_elastic_thumbnails-a .videoCube{height:264px;background-color:#fff}
    .trc_rbox_container{direction:rtl}
.tabolaaContainer .videoCube,
.tabolaaContainer .trc_rbox_div{direction:rtl;    float: right;}
.tabolaaContainer .thumbnails-feed .trc_rbox_header,
.tabolaaContainer .thumbnails-a .trc_rbox_header
{display:inline-block ; float: left;   font-family:DroidKufiBold,Arial!important;font-size:20px;margin-bottom:0
}
.tabolaaContainer .trc_rbox_header_icon_div{float:left}

.tabolaaContainer .trc_elastic_thumbnails-feed .videoCube{width:31.333%}

.tabolaaContainer .tbl-feed-header{display:inline-block!important}

.tabolaaContainer .thumbnails-feed .videoCube .video-label-box .video-title,
.tabolaaContainer .thumbnails-a .videoCube .video-label-box .video-title{
    text-decoration:unset;
    font-family:DroidKufiLight, arial!important;
        font-size: 14px;
    margin-bottom: 10px;
    line-height: 1.5;font-weight:400
}
.tabolaaContainer .thumbnails-a .trc_rbox_header_span::after{display:none}

.tabolaaContainer .videoCube a.video-cta-style .video-label-flex-cta-item{
    font-family:DroidKufiLight, arial!important;
    font-size:16px;
    margin-bottom:20px
}

.tabolaaContainer  .tbl-feed-container .videoCube .video-cta-href:not(.app-install-child) button.video-cta-button{
    font-family: DroidKufiLight, arial !important;
    font-size: 11px;
    color: #000 !important;
}

.tabolaaContainer  .videoCube a.video-cta-style .video-branding-flex-cta-item{
 font-family: DroidKufiLight, arial !important;
}
.tabolaaContainer .thumbnails-feed .syndicatedItem .video-label-box{background-color:#fff}

@media screen and (min-width: 0px) and (max-width: 480px) {
    .tabolaaContainer .trc_elastic_thumbnails-feed .videoCube {
        width: 97.99%;
    }
}
@media screen and (min-width:1360px) and (max-width:1680px){
    .tabolaaContainer{height:820px}
        .tabolaaContainer .trc_elastic_thumbnails-a .videoCube{height:231px}

}

@media screen and (min-width:1280px) and (max-width:1359px){
    .tabolaaContainer{height:765px}
        .tabolaaContainer .trc_elastic_thumbnails-a .videoCube{height:230px}

}

@media screen and (min-width:1024px) and (max-width:1279px){
    .tabolaaContainer{height:645px}
    .tabolaaContainer .trc_elastic_thumbnails-a .videoCube {
    height: 176px;
}
}

@media screen and (min-width:900px) and (max-width:1023px){
    .tabolaaContainer{height:946px}
}
@media screen and (min-width:768px) and (max-width:900px){
    .tabolaaContainer{height:850px}
}

@media screen and (min-width:320px) and (max-width:767px){
    .taboolaDiv{padding:0 10px}
    .tabolaaContainer{  height: 2200px;
        width: 340px;
        margin: 0 calc((100% - 340px ) /2) 20px;
        float: right;padding: 10px 30px 0;overflow-y: auto;
        background: #fff;}
     .tabolaaContainer .trc_elastic_thumbnails-a .videoCube{height:auto}
}

@media screen and (min-width: 0px) and (max-width: 480px) {
    .tabolaaContainer .trc_elastic_thumbnails-feed .videoCube {
        width: 97.99%;
    }
}

@media screen and (min-width:1680px) and (max-width:1919px) {
        .prayerTimes .main { background: url(../Images/mosqueBg.jpg) no-repeat top center; background-size: cover; }

}

@media screen and (min-width:1600px) and (max-width:1679px) {
        .prayerTimes .main { background: url(../Images/mosqueBg.jpg) no-repeat top center; background-size: cover; }

}

@media screen and (min-width:1536px) and (max-width:1599px) {
        .prayerTimes .main { background: url(../Images/mosqueBg.jpg) no-repeat top center; background-size: cover; }

}

@media screen and (min-width:1440px) and (max-width:1535px) {
        .prayerTimes .main { background: url(../Images/mosqueBg.jpg) no-repeat top center; background-size: cover; }

}

@media screen and (min-width:1360px) and (max-width:1439px) {
        .prayerTimes .main { background: url(../Images/mosqueBg.jpg) no-repeat top center; background-size: cover; }

}

@media screen and (min-width:1280px) and (max-width:1359px) {
      .prayerTimes .main { background: url(../Images/mosqueBg.jpg) no-repeat top center; background-size: cover; }
    .prayerTimes .monthTable .prayersTable .allTimes .time { font-size: 12px }
}

@media screen and (min-width:1024px) and (max-width:1279px) {
     .prayerTimes .main .location { margin-bottom: 24px }
    .prayerTimes .main .dropDownDiv { width: 100%; margin-bottom: 24px }
    .prayerTimes .main .cityDate { width: 100%; margin-left: 0 }
    .prayerTimes .mainTable .prayersTable { width: 100% }
    .prayerTimes .monthTable .prayersTable .title .name:first-child { width: 180px }
    .prayerTimes .monthTable .prayersTable .title .name { width: calc((100% - 180px) / 6); font-size: 12px }
    .prayerTimes .monthTable .prayersTable .allTimes .time:first-child { width: 180px }
    .prayerTimes .monthTable .prayersTable .allTimes .time { width: calc((100% - 180px) / 6); font-size: 14px }
    .prayerTimes .monthTable .prayersTable .allTimes .time span { display: none }
}

@media screen and (min-width:1152px) and (max-width:1279px) {
     .prayerTimes .main { background: url(../Images/mosqueBg.jpg) no-repeat top center; background-size: cover; }
    .prayerCheckbox { margin-top: 30px; float: right }
    .prayerTimes .mainTable .prayersTable .title .name { font-size: 10px }
    .prayerTimes .mainTable .prayersTable .allTimes .time { font-size: 18px; padding: 10px 0 }
    .prayerTimes .mainTable .prayersTable .allTimes .time span { font-size: 13px }
    .prayerTimes .monthTable .prayersTable .allTimes .time { font-size: 12px }
}

@media screen and (min-width:1024px) and (max-width:1151px) {

      .prayerTimes .main { background: url(../Images/mosqueBg.jpg) no-repeat top center; background-size: cover; }
    .prayerCheckbox { margin-top: 30px; float: right }
    .prayerTimes .mainTable .prayersTable .title .name { font-size: 10px }
    .prayerTimes .mainTable .prayersTable .allTimes .time { font-size: 18px; padding: 10px 0 }
    .prayerTimes .mainTable .prayersTable .allTimes .time span { font-size: 13px }
    .prayerTimes .monthTable .prayersTable .allTimes .time { font-size: 12px }
}

@media only screen and (max-width: 1023px) {
        .prayerTimes .prayerTimesTable { width: 100%; margin-left: 0 }

}


@media screen and (min-width:320px) and (max-width:767px) {
        .prayerTimes .main { padding: 10px }
    .prayerTimes .main .ttl { margin-bottom: 12px }
    .prayerTimes .main .location { margin-bottom: 12px }
    .prayerTimes .main .cityDate .cityName { font-size: 20px }
    .prayerTimes .main .cityDate .cityName:after { font-size: 20px }
    .prayerTimes .main .cityDate .countryName { font-size: 20px }
    .prayerTimes .main .cityDate date { font-size: 14px }
    .prayerTimes .cntdwn .timerDiv { width: 182px; height: 40px }
    .prayerTimes .cntdwn .timerDiv ul li { float: left; width: 50px; height: 40px; font-size: 20px; margin-right: 16px; line-height: 2 }
    .prayerTimes .cntdwn .timerDiv ul li:last-child { margin-right: 0 }
    .prayerTimes .cntdwn .timerDiv ul li:nth-child(1):after,
    .prayerTimes .cntdwn .timerDiv ul li:nth-child(2):after { font-size: 20px; position: absolute; top: 0; right: -11px }
    .prayerTimes .main .dropDownDiv { width: 100%; margin-bottom: 24px }
    .prayerTimes .main .cityDate { width: 100%; margin-left: 0 }
    .prayerTimes .main .wrapperDropdown { font-size: 13px }
    .prayerTimes .cntdwn { width: 100%; margin: 0 0 24px 0 }
    .prayerTimes .mainTable .prayersTable { width: 100% }
    .prayerTimes .mainTable .prayersTable .title .name { font-size: 10px; height: 54px }
    .prayerTimes .mainTable .prayersTable .title .name:nth-child(2) { line-height: 38px }
    .prayerCheckbox p.pText { font-size: 13px }
    .prayerTimes .mainTable .prayersTable .allTimes .time { font-size: 15px }
    .prayerTimes .mainTable .prayersTable .allTimes .time span { font-size: 13px }
    .prayerTimesTable button { font-size: 13px; margin: 0 calc((100% - 240px) / 2) 20px; }
    .prayerTimes .monthTable .prayersTable .title .name:first-child { width: 110px }
    .prayerTimes .monthTable .prayersTable .title .name { width: calc((100% - 110px) / 6); font-size: 10px }
    .prayerTimes .monthTable .prayersTable .allTimes .time:first-child { width: 110px }
    .prayerTimes .monthTable .prayersTable .allTimes .time { width: calc((100% - 110px) / 6); font-size: 11px }
    .prayerTimes .monthTable .prayersTable .allTimes .time span { display: none }

    .tabolaaContainer .thumbnails-feed .trc_rbox_header{padding-right:10px}

}