.x-board-modern {
color: rgb(20,74,67);
height: 100vh;
text-align: center;
font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
} .x-board-modern .clock {
margin: 0 auto;
color: #000;
}
.x-board-modern ul.clock {
margin: 0 auto;
padding: 0px;
list-style: none;
border: none;
word-spacing: -10px;
}
.x-board-modern ul.clock li {
display: inline;
font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
text-shadow: 0 0 5px #00c6ff;
}
.x-board-modern ul.clock li#sec {
font-size: 20px !important;
} .x-board-modern .align-middle-next-prayer {
position: relative;
top: 50%;
}
.x-board-modern .container-fluid{
padding-left: 0 !important;
padding-right: 0 !important;
}
.x-board-modern #top-section {
height: 20%;
width: 100%;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
}
.x-board-modern .mosque-name{
padding-top: 15px;
height: 20px;
}
.x-board-modern .mosque-name h2{
font-family: 'Merriweather', serif ;
color: rgb(20,74,67);
font-size: 40px;
font-weight: 800;
letter-spacing: 7px;
display: inline;
}
.x-board-modern .logo img{
padding: 10px;
max-width: 200px;
}
.x-board-modern .time{
font-size: 8vh;
font-weight: 800;
padding-right: 20px;
padding-top: 10px;
text-align: right;
}
.x-board-modern .time h3{
font-family: 'Merriweather', serif;
font-size: 55px;
font-weight: 800;
color: rgb(20,74,67);
display: inline;
}
.x-board-modern .date-english-arabic{
background-color: rgb(20,74,67);
}
.x-board-modern .date-english-arabic p{
font-family: 'Merriweather', serif;
font-size: 25px;
color: #fff;
margin-bottom: 0;
letter-spacing: 3px;
}
.x-board-modern .english-date p{
padding-left: 45px;
}
.x-board-modern #banner-section{
height: 40%;
background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%) !important;
text-align: center;
}
.x-board-modern #carouselExampleIndicators {
height: 100%;
width: 100%;
padding-right: 0px !important;
padding-left: 0px !important;
}
.x-board-modern .carousel-inner {
height:100%;
}
.x-board-modern .carousel-inner .carousel-item {
height: 100%;
}
.x-board-modern .carousel-inner .carousel-item img,
.x-board-modern #carouselExampleIndicators div div img {
width: 100%;
height: 100%;
object-fit: fill;
}
.x-board-modern #banner-section .prayer-time{
font-size: 30px;
font-family: 'Merriweather', serif;
}
.x-board-modern #banner-section .time-metrics{
font-size: 60px;
color: rgb(20,74,67);
font-weight: bolder;
font-family: 'Merriweather', serif;
}
.x-board-modern #time-table-section{
background: linear-gradient(180deg, rgb(20,74,67) 0%, #1a5c50 100%);
padding-top: 15px;
height: 40%;
}
.x-board-modern #time-table-section .row{
width: 100%;
padding-left: 10px;
margin: 0;
}
.x-board-modern .icon{
font-size: clamp(20px, 3vw, 32px);
color: yellow;
transition: all 0.3s ease;
}
.x-board-modern #time-table-section h4{
font-size: clamp(1rem, 4vw, 4rem);
color: #fffacd;
font-weight: 700;
font-family: 'Lato', sans-serif;
letter-spacing: 2px;
margin-top: 7px;
transition: all 0.3s ease;
}
.x-board-modern #time-table-section h4{
font-size: 6vh;
color: #fffacd;
font-weight: 700;
font-family: 'Lato', sans-serif;
letter-spacing: 3px;
margin-top: 7px;
transition: all 0.3s ease;
}
.x-board-modern .prayer-card {
backdrop-filter: blur(10px);
background: rgba(255,255,255,0.08);
border-radius: 16px;
padding: 15px 10px;
margin: 5px;
box-shadow: 0 8px 32px rgba(0,0,0,0.15);
border: 1px solid rgba(255,255,255,0.1);
transition: all 0.3s ease;
}
.x-board-modern .prayer-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 40px rgba(0,0,0,0.25);
background: rgba(255,255,255,0.12);
}
.x-board-modern p.nextPrayer, 
.x-board-modern h4.nextPrayer {
animation: glow 2s ease-in-out infinite;
}
.next-prayer-time {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.x-board-modern .prayer-start p{
margin-top: 14px;
margin-bottom: 0;
font-size: clamp(0.875rem, 3vw, 2rem);
color: #fff;
font-weight: 900;
font-family: 'Lato', sans-serif;
letter-spacing: 4px;
opacity: 0.4;
}
.x-board-modern .prayer-jamaat p{ 
font-size: clamp(1rem, 4vw, 3rem);
font-family: 'Lato',sans-serif;
color: #e2e2e2;
font-weight: 900;
letter-spacing: 4px;
padding-top: 20px;
}
.x-board-modern .sunrise p , .x-board-modern .jummah-prayer p{
margin-top: 15px;
color: #e2e2e2;
}
.x-board-modern .sunrise p , .x-board-modern .jummah-prayer p.jummah-1{
font-size: clamp(1.5rem, 3.5vw, 3rem);
}
.x-board-modern .sunrise p , .x-board-modern .jummah-prayer p.jummah-3{
font-size: clamp(1.5rem, 3.5vw, 2.5em);
}
.x-board-modern .fajr-prayer ,.x-board-modern .sunrise, .x-board-modern .zuhr-prayer, .x-board-modern .asr-prayer, .x-board-modern .maghrib-prayer, .x-board-modern .isha-prayer{
border-right: 1px solid rgba(62,96,92,0.3);
}
.x-board-modern #time-table-section .col-md-2{
flex: 1 0 0%;
max-width: 15.666667%;
}
.x-board-modern #quranVerse {
margin-top: 30px;
padding: 10px;
}
.x-board-modern #quranVerse p{
font-size: 2.5em;
}
.x-board-modern div.quranVerse span.sura {
font-size: 3rem;
display: block;
padding-top: 10px;
}
@media(max-width: 1349px){
.x-board-modern .mosque-name h2{
font-size: 46px;
letter-spacing: 6px;
}
.x-board-modern .time h3{
font-size: 52px;
}
}
@media (max-width: 1298px) {
.x-board-modern .mosque-name h2{
letter-spacing: 5px;
font-size: 44px;
}
.x-board-modern .time{
padding-right: 15px;
}
.x-board-modern .time h3{
font-size: 48px;
}
.x-board-modern .logo img{
height: 105px;
}
.x-board-modern .date-english-arabic p{
font-size: 28px;
}
.x-board-modern #banner-section{
height: 370px;
}
.x-board-modern #banner-section img{
height: 370px;
}
.x-board-modern .icon{
font-size: clamp(18px, 2.5vw, 25px);
}
.x-board-modern #time-table-section h4{
font-size: clamp(0.875rem, 3vw, 2rem);
letter-spacing: 1px;
}
.x-board-modern .prayer-start p{
font-size: clamp(0.75rem, 2vw, 1.25rem);
}
.x-board-modern .prayer-jamaat p{
font-size: clamp(0.875rem, 2.5vw, 1.5rem);
}
}
@media (max-width: 1170px){
.x-board-modern .mosque-name h2{
font-size: 41px;
}
.x-board-modern .time h3{
font-size: 44px;
}
.x-board-modern .logo img{
height: 102px;
padding-left: 60px;
}
.x-board-modern .date-english-arabic p{
font-size: 25px;
}
.x-board-modern #banner-section{
height: 345px;
}
.x-board-modern #banner-section img{
height: 345px;
}
.x-board-modern #banner-section .prayer-time{
font-size: 25px;
font-family: 'Merriweather', serif;
}
.x-board-modern #banner-section .time-metrics{
font-size: 50px;
color: rgb(20,74,67);
font-weight: bolder;
font-family: 'Merriweather', serif;
}
.x-board-modern .icon{
font-size: 23px;
}
.x-board-modern #time-table-section{
height: 270px;
}
.x-board-modern #time-table-section h4{
font-size: 30px;
letter-spacing: 2px;
}
.x-board-modern .prayer-start p{
font-size: 40px;
}
.x-board-modern .prayer-jamaat p{
font-size: 40px;
}
.x-board-modern .fajr-prayer ,.x-board-modern .sunrise, .x-board-modern .zuhr-prayer, .x-board-modern .asr-prayer, .x-board-modern .maghrib-prayer, .x-board-modern .isha-prayer{
height: 220px;
border-right: 1px solid #3e605c;
}
}
@media(max-width: 1079px){
.x-board-modern .mosque-name h2{
letter-spacing: 4px;
font-size: 38px;
}
.x-board-modern .time h3{
font-size: 41px;
}
.x-board-modern .logo img{
height: 99px;
}
.x-board-modern .date-english-arabic p{
font-size: 22px;
}
}
@media (max-width: 1048px){
.x-board-modern .mosque-name h2{
letter-spacing: 4px;
font-size: 35px;
}
.x-board-modern .time h3{
font-size: 38px;
}
.x-board-modern .logo img{
height: 97px;
}
.x-board-modern .date-english-arabic p{
font-size: 22px;
}
.x-board-modern #banner-section{
height: 325px;
}
.x-board-modern #banner-section img{
height: 325px;
}
.x-board-modern #banner-section .prayer-time{
font-size: 20px;
font-family: 'Merriweather', serif;
}
.x-board-modern #banner-section .time-metrics{
font-size: 45px;
color: rgb(20,74,67);
font-weight: bolder;
font-family: 'Merriweather', serif;
}
.x-board-modern .icon{
font-size: 22px;
}
.x-board-modern #time-table-section{
height: 260px;
}
.x-board-modern #time-table-section h4{
font-size: 27px;
letter-spacing: 2px;
}
.x-board-modern .prayer-start p{
font-size: 35px;
}
.x-board-modern .prayer-jamaat p{
font-size: 35px;
}
}
@media (max-width: 972px){
.x-board-modern .mosque-name h2{
letter-spacing: 3px;
font-size: 33px;
}
.x-board-modern .time h3{
font-size: 36px;
}
.x-board-modern .logo img{
height: 95px;
}
.x-board-modern .date-english-arabic p{
font-size: 20px;
letter-spacing: 2px;
}
.x-board-modern #banner-section{
height: 305px;
}
.x-board-modern #banner-section img{
height: 305px;
}
.x-board-modern #banner-section .prayer-time{
font-size: 17px;
font-family: 'Merriweather', serif;
}
.x-board-modern #banner-section .time-metrics{
font-size: 42px;
color: rgb(20,74,67);
font-weight: bolder;
font-family: 'Merriweather', serif;
}
.x-board-modern .icon{
font-size: 22px;
}
.x-board-modern #time-table-section{
height: 245px;
}
.x-board-modern #time-table-section h4{
font-size: 25px;
letter-spacing: 1px;
}
.x-board-modern .prayer-start p{
font-size: 32px;
}
.x-board-modern .prayer-jamaat p{
font-size: 32px;
}
.x-board-modern .fajr-prayer ,.x-board-modern .sunrise, .x-board-modern .zuhr-prayer, .x-board-modern .asr-prayer, .x-board-modern .maghrib-prayer, .x-board-modern .isha-prayer{
height: 200px;
border-right: 1px solid #3e605c;
}
}
@media (max-width: 906px){
.x-board-modern .time h3{
font-size: 34px;
}
.x-board-modern ul.clock li {
display: inline;
font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
text-shadow: 0 0 2px #00c6ff;
}
.x-board-modern .logo img{
height: 89px;
padding-left: 35px;
}
.x-board-modern #banner-section{
height: 295px;
}
.x-board-modern #banner-section img{
height: 295px;
}
.x-board-modern #banner-section .prayer-time{
font-size: 15px;
font-family: 'Merriweather', serif;
}
.x-board-modern #banner-section .time-metrics{
font-size: 40px;
color: rgb(20,74,67);
font-weight: bolder;
font-family: 'Merriweather', serif;
}
.x-board-modern .icon{
font-size: 20px;
}
.x-board-modern #time-table-section{
height: 240px;
}
.x-board-modern #time-table-section h4{
font-size: 22px;
letter-spacing: 0px;
}
.x-board-modern .prayer-start p{
font-size: 30px;
letter-spacing: 3px;
}
.x-board-modern .prayer-jamaat p{
font-size: 30px;
letter-spacing: 3px;
}
}
@media(max-width: 880px){
.x-board-modern .mosque-name h2{
letter-spacing: 3px;
font-size: 29px;
}
.x-board-modern .time{
padding-top: 15px;
}
.x-board-modern .time h3{
font-size: 32px;
}
.x-board-modern .logo img{
height: 89px;
padding-left: 35px;
}
.x-board-modern .date-english-arabic p{
font-size: 18px;
}
.x-board-modern #banner-section .prayer-time{
font-size: 13px;
font-family: 'Merriweather', serif;
}
.x-board-modern #banner-section .time-metrics{
font-size: 37px;
color: rgb(20,74,67);
font-weight: bolder;
font-family: 'Merriweather', serif;
}
}
@media (max-width: 787px){
.x-board-modern .mosque-name h2{
letter-spacing: 2px;
font-size: 29px;
}
.x-board-modern .time{
padding-top: 20px;
}
.x-board-modern .time h3{
font-size: 30px;
}
.x-board-modern .logo img{
height: 83px;
padding-left: 40px;
}
.x-board-modern .date-english-arabic p{
font-size: 16px;
}
.x-board-modern #banner-section{
height: 285px;
}
.x-board-modern #banner-section img{
height: 285px;
}
.x-board-modern #banner-section .prayer-time{
font-size: 10px;
font-family: 'Merriweather', serif;
}
.x-board-modern .align-middle-next-prayer h3{
font-size: 15px;
}    
.x-board-modern .green .nextPrayer, h2.dptScTime, .timeLeftCountDown, .minLeftText {
font-size: 15px;
}
.x-board-modern .minLeftText {
font-size: 10px;
}
.x-board-modern #quranVerse {
padding: 10px;
}
.x-board-modern #quranVerse p{
font-size: 1em;
}
.x-board-modern div.quranVerse span.sura {
font-size: 1em;
}    
.x-board-modern h2#dsNextPrayer div span h2.dptScTime {
font-size: 20px;
}
.x-board-modern #banner-section .time-metrics{
font-size: 35px;
color: rgb(20,74,67);
font-weight: bolder;
font-family: 'Merriweather', serif;
}
.x-board-modern .icon{
font-size: 17px;
}
.x-board-modern #time-table-section{
height: 210px;
}
.x-board-modern #time-table-section h4{
font-size: 19px;
letter-spacing: 0px;
}
.x-board-modern .prayer-start p{
font-size: 26px;
letter-spacing: 3px;
}
.x-board-modern .prayer-jamaat p{
font-size: 26px;
letter-spacing: 3px;
}
.x-board-modern .fajr-prayer ,.x-board-modern .sunrise, .x-board-modern .zuhr-prayer, .x-board-modern .asr-prayer, .x-board-modern .maghrib-prayer, .x-board-modern .isha-prayer{
height: 160px;
border-right: 1px solid #3e605c;
}
}
@media(max-width: 765px){
.x-board-modern #top-section{
height: auto;
}
.x-board-modern .time {
padding-right: 5px;
font-size: 2vh;
}
.x-board-modern .time h3{
font-size: 29px;
}
}
@media (max-width: 718px){
.x-board-modern .mosque-name{
height: 80px;
} 
.x-board-modern .mosque-name h2{
font-size: 27px;
letter-spacing: 4px;
}
.x-board-modern .logo img{
height: 90px;
padding-left: 35px;
}
.x-board-modern .time{
text-align: center;
padding-top: 25%;
}
.x-board-modern .time h3{
font-size: 50px;
}
.x-board-modern .date-english-arabic p{
font-size: 14px;
}
.x-board-modern #time-table-section .row{
padding-top: 0;
}
.x-board-modern #time-table-section .pt-4{
padding-top: 1rem !important;
}
.x-board-modern #time-table-section .col-md-2{
flex: 0 0 100%;
max-width: 100%;
}
.x-board-modern #time-table-section .col-sm-6{
flex: 0 0 48%;
max-width: 48%;
margin: 1%;
}
.x-board-modern #time-table-section{
height: auto;
min-height: 600px;
padding-bottom: 20px;
}
.x-board-modern #time-table-section .row{
padding-left: 0;
justify-content: center;
}
.x-board-modern .fajr-prayer , .x-board-modern .sunrise, .x-board-modern .zuhr-prayer, .x-board-modern .asr-prayer, .x-board-modern .maghrib-prayer, .x-board-modern .isha-prayer{
border-right: 0;
border-bottom: 1px solid rgba(62,96,92,0.3);
padding: 10px 5px;
}
.x-board-modern #banner-section{
height: 200px;
}
.x-board-modern #time-table-section .col-sm-6{
flex: 0 0 48%;
max-width: 48%;
margin: 1%;
} .x-board-modern #time-table-section .col-sm-6:nth-child(odd) {
border-right: 1px solid rgba(62,96,92,0.3);
}
}
@media (max-width: 550px){
.x-board-modern .mosque-name h2{
font-size: 23px;
letter-spacing: 2px;
}
.x-board-modern .logo img{
height: 75px;
padding-left: 25px;
}
.x-board-modern .time h3{
font-size: 40px;
}
.x-board-modern .date-english-arabic p{
font-size: 10px;
}
.x-board-modern #time-table-section .row{
padding-top: 0;
justify-content: center;
}
.x-board-modern #time-table-section .col-sm-6{
flex: 0 0 45%;
max-width: 45%;
margin: 1%;
}
.x-board-modern #time-table-section{
height: auto;
min-height: 500px;
padding-bottom: 15px;
}
.x-board-modern #banner-section{
height: 190px;
} 
.x-board-modern #banner-section img{
height: 190px;
}
.x-board-modern #banner-section .prayer-time{
font-size: 10px;
font-family: 'Merriweather', serif;
}
.x-board-modern #banner-section .time-metrics{
font-size: 30px;
color: rgb(20,74,67);
font-weight: bolder;
font-family: 'Merriweather', serif;
}
.x-board-modern .icon{
font-size: 15px;
}
.x-board-modern #time-table-section h4{
font-size: 20px;
letter-spacing: 2px;
}
.x-board-modern .prayer-start p{
font-size: 22px;
letter-spacing: 2px;
margin-top: 10px;
}
.x-board-modern .prayer-jamaat p{
font-size: 22px;
letter-spacing: 2px;
}
.x-board-modern .prayer-card {
padding: 8px 5px;
margin: 3px;
}
.x-board-modern .fajr-prayer , .x-board-modern .sunrise{
height: auto;
border-bottom: 1px solid rgba(62,96,92,0.3);
}
.x-board-modern .zuhr-prayer, .x-board-modern .asr-prayer{
height: auto;
border-bottom: 1px solid rgba(62,96,92,0.3);
}
.x-board-modern .maghrib-prayer, .x-board-modern .isha-prayer{
height: auto;
border-bottom: 1px solid rgba(62,96,92,0.3);
}
}
@keyframes glow {
0%, 100% {
box-shadow: 0 0 15px rgba(255,215,0,0.3);
}
50% {
box-shadow: 0 0 35px rgba(255,215,0,0.6);
}
}
@media (max-width: 488px){
.x-board-modern .mosque-name{
height: 70px;
}
.x-board-modern .mosque-name h2{
font-size: 19px;
letter-spacing: 1px;
}
.x-board-modern .logo img{
height: 50px;
padding-left: 15px;
}
.x-board-modern .time h3{
font-size: 30px;
}
.x-board-modern .date-english-arabic p{
font-size: 7px;
}
.x-board-modern #time-table-section .row{
padding-top: 0;
justify-content: center;
}
.x-board-modern #time-table-section .col-sm-6{
flex: 0 0 45%;
max-width: 45%;
margin: 1%;
}
.x-board-modern #time-table-section{
height: auto;
min-height: 400px;
padding-bottom: 10px;
} 
.x-board-modern #time-table-section h4{
margin-top: 0;
}
.x-board-modern #banner-section{
height: auto;
}
.x-board-modern #banner-section img{
height: auto;
}
.x-board-modern #banner-section .prayer-time{
font-size: 7px;
font-family: 'Merriweather', serif;
}
.x-board-modern #banner-section .time-metrics{
font-size: 20px;
color: rgb(20,74,67);
font-weight: bolder;
font-family: 'Merriweather', serif;
}
.x-board-modern .icon{
font-size: 16px;
}
.x-board-modern #time-table-section h4{
font-size: 19px;
letter-spacing: 1px;
}
.x-board-modern .prayer-start p{
font-size: 22px;
letter-spacing: 2px;
margin: 0px;
}
.x-board-modern .prayer-jamaat p{
font-size: 22px;
letter-spacing: 1px;
margin-top: 0;
margin-bottom: 5px;
}
.x-board-modern .prayer-card {
padding: 5px 3px;
margin: 2px;
}
.x-board-modern .zuhr-prayer , .x-board-modern .asr-prayer , .x-board-modern .maghrib-prayer , .x-board-modern .isha-prayer{
padding-top: 10px;
}
.x-board-modern .fajr-prayer , .x-board-modern .sunrise{
height: auto;
border-bottom: 1px solid rgba(62,96,92,0.3);
}
.x-board-modern .zuhr-prayer, .x-board-modern .asr-prayer{
height: auto;
border-bottom: 1px solid rgba(62,96,92,0.3);
}
.x-board-modern .maghrib-prayer, .x-board-modern .isha-prayer{
height: auto;
border-bottom: 1px solid rgba(62,96,92,0.3);
}
}
@font-face {
font-family: 'DSDIGI';
src: local('DSDIGI'), url(//culticarezorg.nl/wp-content/plugins/daily-prayer-time-for-mosques/Models/../Assets/css/usman/DS-DIGIB.ttf) format('truetype');
}
@font-face {
font-family: "BebasNeueRegular";
src: local('BebasNeueRegular'), url(//culticarezorg.nl/wp-content/plugins/daily-prayer-time-for-mosques/Models/../Assets/css/usman/BebasNeue-Regular.ttf) format('truetype');
}
.usman-body {
padding: 0;
margin: 0;
background-image: linear-gradient(to left top, black, rgb(1,48,42), rgb(6,99,88), rgb(6,99,88), rgb(1,48,42), black);
height: 100vh;
width: 100%;
}
.d-masjid-e-usman {
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
} .d-masjid-e-usman .top-header-row {
flex: 0 0 auto;
display: none;
align-items: center;
padding: 10px 20px;
background: rgba(0,0,0,0.3);
border-bottom: 2px solid rgb(86,247,79);
}
.d-masjid-e-usman .logo-section-top {
flex: 0 0 auto;
width: auto;
}
.d-masjid-e-usman .logo-section-top img {
max-height: 60px;
width: auto;
}
.d-masjid-e-usman .mosque-name-top {
flex: 1;
text-align: left;
padding-left: 20px;
}
.d-masjid-e-usman .mosque-name-top h1 {
color: #d7d7d7;
font-family: "BebasNeueRegular";
font-size: clamp(28px, 5vw, 48px);
margin: 0;
text-shadow: 3px 3px black;
} .d-masjid-e-usman .mosque-info-overlay.desktop-only {
display: flex;
} @media (min-width: 768px) {
.d-masjid-e-usman .top-header-row {
display: none !important;
}
} @media (max-width: 767px) {
.d-masjid-e-usman .top-header-row {
display: flex !important;
flex: 0 !important;
background: none !important;
}
.d-masjid-e-usman .mosque-info-overlay.desktop-only {
display: none !important;
}
}
.d-masjid-e-usman .row {
flex: 1;
display: flex;
margin: 0;
}
.d-masjid-e-usman .left-main-column {
padding-left: 50px;
padding-bottom: 20px;
display: flex;
flex-direction: column;
flex: 1;
}
.d-masjid-e-usman .left-main-col-dateandtime {
border-bottom: 5px solid rgb(194, 194, 194);
text-align: left;
flex: 0 0 auto;
min-height: 120px;
}
.d-masjid-e-usman .left-main-col-prayernames {
flex: 1;
padding-top: 17px;
overflow-y: auto;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.d-masjid-e-usman .prayernames-column {
display: flex;
flex-direction: column;
flex: 1;
justify-content: space-evenly;
}
.d-masjid-e-usman .prayernames-column .row {
flex: 1;
display: flex;
align-items: center;
min-height: 0;
} .d-masjid-e-usman .digital-clock {
font-family: "DSDIGI", sans-serif;
color: rgb(86,247,79);
display: flex;
align-items: center;
}
.d-masjid-e-usman .digital-clock h2 {
font-size: clamp(48px, 12vw, 100px);
font-weight: 900;
display: inline-block;
text-shadow: 7px 7px black;
margin-left: -10px;
-webkit-text-stroke: 2px rgb(86,247,79);
margin-bottom: 0;
}
.d-masjid-e-usman .digital-clock h2#hours {
min-width: 40%;
max-width: 40%;
margin-right: 30px;
text-align: right;
}
.d-masjid-e-usman .digital-clock h2#min {
min-width: 60%;
max-width: 60%;
margin-left: 5px;
}
.d-masjid-e-usman .digital-clock h2#colon {
min-width: 10%;
max-width: 10%;
} .d-masjid-e-usman .seconds-count {
color: rgb(86,247,79);
padding-top: 30px;
}
.d-masjid-e-usman .seconds-count h4 {
font-family: "DSDIGI" , sans-serif;
font-size: clamp(28px, 6vw, 40px);
font-weight: 600;
margin-bottom: 0;
display: block;
line-height: 1.1;
text-shadow: 5px 5px black;
}
.d-masjid-e-usman .seconds-count p {
margin-bottom: 0;
font-size: clamp(20px, 4vw, 30px);
font-family: Arial, Helvetica, sans-serif;
display: inline;
line-height: 1.2;
text-shadow: 5px 5px black;
}
.d-masjid-e-usman .seconds-count p {
margin-bottom: 0;
font-size: clamp(16px, 3vw, 35px);
font-family: Arial, Helvetica, sans-serif;
display: inline;
line-height: 1.2;
text-shadow: 5px 5px black;
} .d-masjid-e-usman .english-arabic-date {
text-align: right;
line-height: 1.2;
text-shadow: 3px 2px black;
padding: 20px 0 0 0;
}
.d-masjid-e-usman .english-arabic-date p {
color: #fff;
margin-bottom: 0;
}
.d-masjid-e-usman .english-date {
font-size: clamp(22px, 5vw, 33px);
}
.d-masjid-e-usman .hijriDate {
font-size: clamp(22px, 5vw, 32px);
padding-top: 20px;
font-style: normal;
text-align: right;
}
.d-masjid-e-usman .hijriDate {
font-size: clamp(14px, 3vw, 32px);
padding-top: 20px;
font-style: normal;
text-align: right;
} .d-masjid-e-usman .lmc-heading h3 {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: clamp(22px, 4vw, 30px);
text-align: right;
text-shadow: 3px 2px black;
}
.d-masjid-e-usman .jamah-column {
padding-right: 0;
}
.d-masjid-e-usman .time-value {
text-align: right;
} .d-masjid-e-usman .jummah {
font-family: "DSDIGI", sans-serif;
font-size: clamp(16px, 4vh, 7vh);
color: #fff;
font-weight: bolder;
margin: 0;
display: inline;
text-shadow: 5px 5px black;
text-align: right;
}
.d-masjid-e-usman .time-value h3 {
font-family: "DSDIGI", sans-serif;
font-size: clamp(28px, 6vh, 7vh);
color: #fff;
font-weight: bolder;
margin: 0;
display: inline;
text-shadow: 5px 5px black;
}
.d-masjid-e-usman .start-title,
.d-masjid-e-usman .prayer-start-time h3 {
padding-right: 28px;
text-align: right;
}
.d-masjid-e-usman .prayer-jamah-time,
.d-masjid-e-usman .jummah-jamah-time {
padding-right: 0;
}
.d-masjid-e-usman .title-value {
font-family: Arial, Helvetica, sans-serif;
font-size: clamp(22px, 5vh, 5vh);
color: #fff;
text-shadow: 3px 2px black;
padding-top: 10px;
}
.d-masjid-e-usman .left-main-col-prayernames {
border-bottom: 5px solid rgb(194, 194, 194);
height: 65%;
} .d-masjid-e-usman .left-main-col-sun-times p,
.d-masjid-e-usman .left-main-col-sun-times h4 {
color: #fff;
margin: 0;
text-shadow: 3px 3px black;
text-transform: uppercase;
}
.d-masjid-e-usman .left-main-col-sun-times p {
font-family: Arial, Helvetica, sans-serif;
font-size: clamp(12px, 2vw, 3vh);
padding-top: 10px;
letter-spacing: 1px;
}
.d-masjid-e-usman .left-main-col-sun-times h4 {
font-family: "DSDIGI", sans-serif;
font-size: clamp(18px, 3vw, 40px);
font-weight: bold;
line-height: 1.2;
color: rgb(86,247,79);
}
.d-masjid-e-usman .left-main-col-sun-times {
flex: 0 0 auto;
min-height: 80px;
display: flex;
align-items: center;
padding-bottom: 15px;
}
.d-masjid-e-usman .left-main-col-sun-times .row {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
} .d-masjid-e-usman .banner-section {
margin: 0;
height: 85%;
padding: 15px 20px 0 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.d-masjid-e-usman .right-main-column {
display: flex;
flex-direction: column;
}
.d-masjid-e-usman .mosque-info-overlay {
flex: 0 0 auto;
min-height: 80px;
}
.mobile-only .banner-section {
height: calc(100% - 80px);
}
.d-masjid-e-usman .banner-section .carousel-item {
display: flex !important;
flex-direction: column;
justify-content: center !important;
align-items: center !important;
height: 100%;
}
.d-masjid-e-usman .banner-section .nextPrayer {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
.d-masjid-e-usman .banner-section img {
height: 100%;
width: 100%;
border: 1px solid rgb(255, 255, 255);
} .d-masjid-e-usman #quranVerse {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
text-align: center;
color: rgb(86,247,79);
}
.d-masjid-e-usman #quranVerse .quranVerse {
padding: 30px;
border: 3px solid rgb(86,247,79);
border-radius: 15px;
background: rgba(0,0,0,0.5);
max-width: 90%;
}
.d-masjid-e-usman #quranVerse blockquote {
margin: 0;
padding: 0;
border: none;
}
.d-masjid-e-usman #quranVerse p {
font-size: clamp(28px, 4vw, 48px);
color: #fff;
margin-bottom: 20px;
line-height: 1.4;
text-shadow: 3px 3px black;
}
.d-masjid-e-usman #quranVerse .link {
margin-top: 15px;
}
.d-masjid-e-usman #quranVerse .sura {
font-size: clamp(18px, 2.5vw, 28px);
color: rgb(86,247,79);
display: block;
margin-top: 10px;
}
.d-masjid-e-usman #quranVerse a {
color: rgb(86,247,79);
text-decoration: none;
}
.d-masjid-e-usman .logo-section img {
height: 100%;
padding: 10px 0 0 20px;
max-width: 100px;
}
.d-masjid-e-usman .mosque-info-overlay {
display: flex;
align-items: center;
padding: 10px 0;
}
.d-masjid-e-usman .logo-section {
flex: 0 0 auto;
width: auto;
}
.d-masjid-e-usman .afterlogo-text {
flex: 1;
width: auto;
}
.d-masjid-e-usman .afterlogo-text h1 {
color: #d7d7d7;
font-family: "BebasNeueRegular";
font-size: clamp(28px, 6vw, 65px);
padding: 25px 0 0 0;
text-align: center;
}
.d-masjid-e-usman img.carousel-slide {
object-fit: fill;
width: 100%;
height: 100%;
} .d-masjid-e-usman .nextPrayer h3,
.d-masjid-e-usman .nextPrayer .title,
.d-masjid-e-usman .nextPrayer .dsJumuah {
color: rgb(86,247,79);
} .d-masjid-e-usman .mobile-logo-row {
display: none;
}
.d-masjid-e-usman .mosque-info-overlay.desktop-only {
display: flex;
}
.d-masjid-e-usman .prayer-start-time {
position: relative;
}
.d-masjid-e-usman .prayer-jamah-time {
padding-right: 0;
} @media (max-width: 991px) {
.d-masjid-e-usman {
height: auto;
min-height: 100vh;
}
.d-masjid-e-usman .left-main-column {
padding-left: 20px;
padding-right: 10px;
}
.d-masjid-e-usman .digital-clock h2 {
font-size: clamp(32px, 8vw, 80px);
}
.d-masjid-e-usman .seconds-count h4 {
font-size: clamp(20px, 4vw, 36px);
}
.d-masjid-e-usman .title-value {
font-size: clamp(11px, 2.2vh, 4vh);
}
.d-masjid-e-usman .time-value h3,
.d-masjid-e-usman .jummah {
font-size: clamp(13px, 3.5vh, 5.5vh);
}
.d-masjid-e-usman .banner-section {
height: 60%;
padding: 15px 10px 0 10px;
}
.d-masjid-e-usman .start-title,
.d-masjid-e-usman .prayer-start-time h3 {
padding-right: 12px;
}
} @media (max-width: 767px) { .d-masjid-e-usman {
height: auto;
}
.d-masjid-e-usman .banner-section {
height: calc(100% - 70px);
}
.d-masjid-e-usman .top-header-row {
flex: 0 0 60px;
min-height: 60px;
} .d-masjid-e-usman .mobile-logo-row {
display: flex;
justify-content: center;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid rgba(86,247,79,0.3);
background: rgba(0,0,0,0.25);
} .d-masjid-e-usman .mosque-info-overlay.desktop-only {
display: none;
}
.d-masjid-e-usman .mobile-logo-row img {
max-height: 44px;
width: auto;
}
.d-masjid-e-usman .left-main-column {
padding: 0 10px 4px;
} .d-masjid-e-usman .left-main-col-dateandtime {
height: auto;
padding: 6px 0 8px;
border-bottom: 2px solid rgba(194,194,194,0.5);
align-items: center;
display: flex;
flex-wrap: wrap;
} .d-masjid-e-usman .digital-clock {
align-items: center;
padding-left: 30px;
}
.d-masjid-e-usman .digital-clock h2 {
font-size: 52px;
text-shadow: 3px 3px black;
-webkit-text-stroke: 1px rgb(86,247,79);
margin: 0;
line-height: 1;
}
.d-masjid-e-usman .digital-clock h2#hours {
min-width: unset;
max-width: unset;
margin-right: 0;
text-align: left;
}
.d-masjid-e-usman .digital-clock h2#colon {
min-width: unset;
max-width: unset;
margin: 0 3px;
line-height: 0.9;
}
.d-masjid-e-usman .digital-clock h2#min {
min-width: unset;
max-width: unset;
margin-left: 0;
} .d-masjid-e-usman .seconds-count {
padding-top: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.d-masjid-e-usman .seconds-count h4 {
font-size: 26px;
padding-left: 0;
line-height: 1;
text-shadow: 3px 3px black;
}
.d-masjid-e-usman .seconds-count p {
font-size: 16px;
line-height: 1.1;
text-shadow: 3px 3px black;
} .d-masjid-e-usman .english-arabic-date {
padding: 4px 2px 0 0;
text-align: right;
}
.d-masjid-e-usman .english-date {
font-size: 13px;
line-height: 1.3;
}
.d-masjid-e-usman .hijriDate {
font-size: 13px;
padding-top: 2px;
line-height: 1.3;
} .d-masjid-e-usman .left-main-col-prayernames {
padding-top: 2px;
margin-bottom: 2px;
} .d-masjid-e-usman .title-value {
padding-top: 0;
padding-left: 2px;
line-height: 1.1;
} .d-masjid-e-usman .time-value h3,
.d-masjid-e-usman .jummah {
text-shadow: 2px 2px black;
line-height: 1.1;
font-size: 18px;
} .d-masjid-e-usman .lmc-heading {
margin-bottom: 2px;
}
.d-masjid-e-usman .lmc-heading h3 {
font-size: 12px;
padding-right: 50px;
margin-bottom: 0;
letter-spacing: 0.5px;
color: rgba(255,255,255,0.7);
} .d-masjid-e-usman .fajr-section,
.d-masjid-e-usman .zuhr-section,
.d-masjid-e-usman .asr-section,
.d-masjid-e-usman .maghrib-section,
.d-masjid-e-usman .isha-section,
.d-masjid-e-usman .jummah-section {
padding: 2px 0;
align-items: center;
margin: 1px 0;
}
.d-masjid-e-usman .fajr-section,
.d-masjid-e-usman .asr-section,
.d-masjid-e-usman .isha-section {
background: rgba(255,255,255,0.04);
} .d-masjid-e-usman .title-value {
padding-top: 0;
padding-left: 33px;
line-height: 1.2;
} .d-masjid-e-usman .time-value h3,
.d-masjid-e-usman .jummah {
text-shadow: 2px 2px black;
line-height: 1.2;
font-size: 20px;
} .d-masjid-e-usman .start-title,
.d-masjid-e-usman .prayer-start-time,
.d-masjid-e-usman .prayer-start-time h3 {
position: static;
padding-right: 33px;
}
.d-masjid-e-usman .prayer-jamah-time,
.d-masjid-e-usman .jummah-jamah-time {
padding-right: 50px;
} .d-masjid-e-usman .left-main-col-sun-times {
padding: 8px 4px 10px;
border-top: none;
}
.d-masjid-e-usman .left-main-col-sun-times .col-md-3 {
padding: 0 4px;
text-align: center;
}
.d-masjid-e-usman .left-main-col-sun-times p {
letter-spacing: 0;
padding-top: 4px;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.d-masjid-e-usman .left-main-col-sun-times h4 {
line-height: 1.2;
} .d-masjid-e-usman .right-main-column {
padding: 0 10px 16px;
}
.d-masjid-e-usman .banner-section {
height: 260px;
padding: 8px 0 0;
}
.d-masjid-e-usman .banner-section .carousel,
.d-masjid-e-usman .banner-section .carousel-inner {
height: 100%;
border-radius: 6px;
overflow: hidden;
justify-content: center;
align-items: center;
}
.d-masjid-e-usman .banner-section img {
object-fit: cover;
border-radius: 6px;
} .d-masjid-e-usman .mosque-info-overlay {
display: flex !important;
flex-direction: row !important;
align-items: center;
justify-content: flex-start;
padding: 6px 0 4px;
border-top: 1px solid rgba(86,247,79,0.2);
margin-top: 4px;
width: 100%;
}
.d-masjid-e-usman .mosque-info-overlay > div {
display: flex !important;
flex-direction: row !important;
}
.d-masjid-e-usman .logo-section {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: auto !important;
}
.d-masjid-e-usman .logo-section img {
max-width: 40px;
max-height: 40px;
padding: 0;
object-fit: contain;
}
.d-masjid-e-usman .afterlogo-text {
flex: 1 1 auto !important;
width: auto !important;
}
.d-masjid-e-usman .afterlogo-text h1 {
font-size: clamp(14px, 4vw, 20px);
padding: 6px 0 0;
text-align: left;
line-height: 1.1;
color: #e0e0e0;
margin: 0;
}
} @media (max-width: 380px) {
.d-masjid-e-usman .digital-clock h2 {
font-size: 40px;
}
.d-masjid-e-usman .seconds-count h4 {
font-size: 20px;
} .d-masjid-e-usman .left-main-col-prayernames {
padding: 0;
}
.d-masjid-e-usman .fajr-section,
.d-masjid-e-usman .zuhr-section,
.d-masjid-e-usman .asr-section,
.d-masjid-e-usman .maghrib-section,
.d-masjid-e-usman .isha-section,
.d-masjid-e-usman .jummah-section {
padding: 1px 0;
margin: 0;
}
.d-masjid-e-usman .title-value {
font-size: 12px;
}
.d-masjid-e-usman .time-value h3,
.d-masjid-e-usman .jummah {
font-size: 14px;
}
.d-masjid-e-usman .left-main-col-sun-times p {
font-size: 8px;
}
.d-masjid-e-usman .left-main-col-sun-times h4 {
font-size: 14px;
}
.d-masjid-e-usman .banner-section {
height: 200px;
}
.d-masjid-e-usman .english-date,
.d-masjid-e-usman .hijriDate {
font-size: 11px;
}
}

pt -body {
font-family: 'Ubuntu', sans-serif;
}
div.dropdown {
width: 300px !important;
}
span.scDate {
font-weight: 800;
}
span.scHijri {
font-style: italic;
}
.marquee {
width: 100%;
overflow: hidden;
}
div.upload-step {
padding-bottom: 20px;
}
div.upload-step label{
width: 350px;
font-style: normal;
font-weight: 200;
float: left;
}
div.upload-step select{
padding-left: 10px;
width: 350px;
}
select.quickMonth{
width: 120px;
}
td.Fri, td.Friday{
font-weight: bold;
color: red;
}
td input.Fri{
color: red;
}
tr.Fri {
color: red;
}
td.Sat, td.Sun, td input.Sat, td input.Sun{
color: green;
}
tr.today {
font-size: large;
font-weight: bold;
color: blue;
}
table.dptAdmin td{
text-align: left;
padding-right: 20px;
padding-left: 10px;
width: auto;
}
table.dptAdmin td input.other{
text-align: center;
width: 110px;
}
table.dptAdmin th{
text-align: center;
background-color: #ccddee;
}
table.quickUpdate th{
text-align: center;
width: 80px;
background-color: #514444;
color: #fff;
}
table.quickUpdate td {
text-align: center;
border-bottom: 1px solid grey;
}
table.quickUpdate td input[type="time"]{
color: grey;
font-weight: 500;
width: 100px;
text-align: center;
}
table.quickUfpdate td input:focus{
color: #000;
}
table.dptTimetable {
margin-top: 5px;
width: 100%;
border: 1px solid;
border-collapse: collapse;
}
table.dptTimetable thead.prayerName {
font-weight: bold;
background: #eee;
}
table.dptTimetable tr, table.dptTimetable td, table.dptTimetable th {
border: 1px solid black;
}
table.dptTimetable tr td{
text-align: center;
padding: 5px;
width: 100px;
white-space: nowrap;
vertical-align: middle;
border: none;
}
table.dptTimetable tr, table.dptTimetable th{
text-align: center;
padding: 5px;
vertical-align: middle;
width: 100px;
white-space: nowrap;
}
table.dptTimetable tr td.jamah, td.jamahMonth{
font-weight: bold;
}
td.jamahMonth{
font-weight: bold;
background-color: #FFE;
}
td.dptMonthlyIqamah{
font-weight: bold;
}
table.dptTimetable th.tableHeading{
background-color: #D2A9AC;
font-weight: bold;
}
table.dptTimetable th.fasting, td.fasting{
background: rgba(0, 128, 0, 0.34);
width: 100px;
font-weight: bold;
}
table.dptTimetable th.azanOnly {
width: 140px;
}
table.dptTimetable tr:hover {
background: #eee;
}
table.dptTimetable th.highlight, tr.highlight, td.highlight {
background-color: #F5FF92;
font-weight: bold;
} table.dptNoBorder {
border: 0;
background: inherit;
}
table.dptNoBorder tr, table.dptNoBorder td, table.dptNoBorder th{
border: 0;
background: inherit;
} table.customStyles {} .dptCenter {
margin: auto;
width: 50%;
border:3px solid #8AC007;
padding-left: 10px;
padding-top: 10px;
margin-top: 20px;
text-align: center;
}
.orange {
color: orange;
}
.red {
color: red;
}
.blue {
color: blue;
}
.green {
color: green;
}
.smallFont {
font-style: italic;
font-size: smaller;
}
div.donation {
width: auto;
color: #000000;
background-color: #f1f1f1;
padding: 15px;
line-height: 1.15em;
word-wrap: break-word;
margin-bottom: 12px;
margin-top: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
div.donation-text {
margin-top: 20px;
width: auto;
background-color: #ffffff;
padding: 1.1%;
border-left: 4px solid #8AC007;
word-wrap: break-word;
}
div.donation-link {
margin-top: 20px;
width: 25%;
background-color: #0088cc;
color: white;
padding: 1.1%;
border-left: 4px solid #8AC007;
word-wrap: break-word;
font-size: medium;
text-align: center;
}
div.donation-link a{
color: white;
}
div.donation-link a:hover{
color: black;
}
table.dptTimetable th.jummah, table.dptTimetable th.notificationBackground  {
background-color: maroon;
font-weight: bold;
color: #FFF;
text-align: center;
}
#langSettings{
cursor: pointer;
}
p.monthHeading{
float:left;
margin-right: 20px;
font-size: 20px;
}
span.printIcon {
float: right;
cursor: pointer;
}
select.otherMonth  {
border: 1px solid; -moz-appearance: none; width: 150px; text-indent: 0.01px; text-overflow: "";  padding: 5px;
float: left;
border-radius: 5px 5px 5px 5px;
background-size: 20px auto;
background-position: right 5px center;
}
span.dpt-donation {
width: auto;
color: #000000;
background-color: maroon;
padding: 10px;
line-height: 1.15em;
word-wrap: break-word;
margin-bottom: 12px;
margin-top: 12px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
font-size: 15px;
}
span.dpt-donation a{
color: #abc;
font-weight: bold;
}
span.dpt-donation a:hover{
color: #fff;
font-weight: bold;
}
.button {
font-weight: bold;
}
.saveButton {
float: left;
margin-right: 5px;
}
h3.printSiteName {
display: none;
visibility: hidden;
}
.hijriDate {
font-weight: initial;
font-style: italic;
display: block;
margin-bottom: 0px;
text-align: center;
}
div.dptScNextPrayer {
font-weight: bold;
text-transform: uppercase;
}
span.minLeftText {
text-transform: lowercase;
}
span.green h2.dptScTime {
margin: unset;
}
h2.vertical div span h2.dptScTime {
margin: 1px;
}
h2#dsNextPrayer div span h2.dptScTime {
font-size: 2em;
font-weight: 700;
}
.timeLeftCountDown {
display: inline;
text-transform: lowercase;
}
.jamahChanges span{
margin-left: 20px;
margin-right: 20px;
}
p.nextIqamah {
margin: 0px;
}
div.digital-screen div.left-screen {
float: left;
}
.monthlyTimetable{
width: 100%;
overflow-x:auto;
}
.active-slider{
width: 200px;
}
.fa-check {
display: block !important;
}
.fa-check:after {
padding-right: 5px;
}
div.monthSelector {
margin-bottom: 10px;
}
a.url {
text-decoration: underline;
}
div.todaySpan {
padding: 10px 0px 10px 0px;
font-weight: bold;
}
.grow { transition: all .2s ease-in-out; }
.grow:hover {
transform: scale(9);
cursor: pointer;
transform-origin: right 2px;
}
div.quranVerse p{
font-style: italic;
display: inline;
}
div.quranVerse p.vertical{
font-style: italic;
display: inline;
font-size: 3vw;
}
div.quranVerse span.sura{
font-size: 0.9rem;
}
.friday {
color: red;
} .x-board {
color: #000;
height: 100vh;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: black; opacity: 0; z-index: 99;}
.height-100 {
height: 100%;
}
.width-100 {
width: 100%;
}
.height-100vh {
height: 100vh;
}
.x-board .width-100 {
width: 100%;
}
.x-board .width-25 {
width: 25%;
}
.x-board .height-100 {
height: 100%;
}
.x-board .height-70 {
height: 70%;
}
.x-board .height-60 {
height: 60%;
}
.x-board .height-50 {
height: 50%;
}
.x-board .height-40 {
height: 40%;
}
.x-board .height-30 {
height: 30%;
}
.x-board .height-24 {
height: 24%;
top: 10% !important;
}
.x-board .top-row {
height: 15%;
}
.x-board .middle-row {
height: 70%;
}
.x-board .middle-row85 {
height: 85%;
}
.x-board td span.prayerFinished {
opacity: 50%;
}
.x-board .dpt-ticker {
overflow: hidden;
width: 100%;
}
.x-board .dpt-ticker-track {
display: inline-block;
white-space: nowrap;
animation: dpt-ticker-scroll linear infinite;
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
}
@keyframes dpt-ticker-scroll {
from { transform: translateX(0); }
to   { transform: translateX(-50%); }
}
.x-board span.jamahChanges {
color:red;
}
.x-board .bottom-row {
height: 15%;
flex-wrap: wrap;
}
.x-board .table-borderless td,
.x-board .table-borderless th,
.x-board .table-borderless tr{
border: 0 !important;
}
.x-board .align-middle {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.x-board .align-middle-next-prayer {
position: relative;
top:50%
}
.x-board .green {
color: #fff;
opacity: .8;
}
.x-board .bg-dark {
background-color: #000;
color: #eee;
}
.x-board .bg-white {
background-color: #fff;
}
.x-board .time{
color: #fff;
font-size: 9vh;
font-weight:bold;
}
.x-board .vertical-time{
font-size: 17vw;
height: 70%;
}
.x-board .vertical-date{
height: 30%;
}
.x-board .date-eng{
font-weight: bold;
padding-left: 5px;
font-size: 6vh;
text-shadow: 0 0 2px #00c6ff;
}
.x-board span.vertical {
font-size: 3vh !important;
padding-bottom: 20px;
}
.x-board p.hijriDate{
display: inline;
color: blue;
margin-left: 10px;
}
.x-board span.hijri p{
font-size: 4vh !important;
}
.x-board span.verticalhijri p{
font-size: 2vh !important;
}
.x-board span.dsJumuah-vertical{
font-size: 2.5vh !important;
}
.x-board h3 {
font-weight: bold;
margin-bottom: 0px;
margin-top: 0px;
}
.x-board .bg-red {
background-color: #0066bf;
}
.x-board .bg-green {
background-color: #008743;
}
.x-board .bg-green h2{}
.x-board table {
margin: 0;
border: none;
border-spacing: 0;
border-collapse: collapse;
}
.x-board .l-red {
background-color: #dd8500;
}
.x-board table th, .x-board table td {
padding: 15px;
font-size: 5vh;
text-transform: none;
letter-spacing: normal;
}
.x-board table.vertical th, .x-board table.vertical td{
padding: 0px;
font-size: 3vh;
text-transform: none;
letter-spacing: normal;
}
.x-board table td.prayerName {
background: #383838;
color: #eee;
font-weight: bold;
text-align: left;
padding-left: 35px;
}
.x-board table td.sunrise {
text-align: center;
}
.x-board table thead tr th {
text-align: center;
}
.x-board table thead tr th,
.x-board table thead tr td,
.x-board table tbody tr td {
padding: 0px;
border-bottom: 1px solid rgba(155,96,91,1);
border-left: none;
border-right: none;
vertical-align: middle;
border-collapse: collapse;
color: #eee;
}
.x-board table > thead > tr > td {
border-bottom: 1px solid #000;
border-top: 1px solid #000;
}
.x-board td span.dpt_start, td span.dpt_jamah {
font-size: 6vh;
}
.x-board .vertical td span.dpt_start, .vertical td span.dpt_jamah {
font-size: 3vh;
}
.x-board table > tbody > tr:last-child > td {
border: none;
}
.x-board table td span {
font-weight: bold;
}
.x-board .nextPrayer {
color: #fff;
}
.x-board span.nextPrayer {
display: inline-block;
}
.x-board .nextPrayer h2 {
color: #fff !important;
font-size: 10vh !important;
margin: 30px;
}
.x-board .nextPrayer h3 {
color: #fff !important;
font-size: 10vh !important;
opacity: .8
}
.x-board .nextPrayer h4 {
padding:60px;
font-size: 8vh;
opacity: .8
}
.x-board .nextPrayer h4.vertical {
padding: 30px;
font-size: 6vw;
opacity: .8
}
.x-board .nextPrayer h4.vertical span.sura{
font-size: 3vw;
opacity: .8;
padding-top: 10px;
}
.x-board .nextPrayer h2.vertical {
font-size: 4vh !important;
}
.x-board .nextPrayer h3.vertical {
font-size: 4vh !important;
opacity: .8
}
.x-board tr.nextPrayer td{
background-color: red;
}
.x-board .dptScTime{
color: inherit;
}
.x-board .timeLeft {
font-size: 0.8em;
}
.x-board .blink{
animation: blink 1s infinite;
font-weight: bold;
font-size: 4vh;
line-height: 1.2;
will-change: opacity;
}
.x-board .blink-vertical{
animation: blink 1s infinite;
font-weight: bold;
will-change: opacity;
}
.x-board .blink-vertical a{
font-size: 3vh;
}
.x-board span.tomorrow {
margin-left: 10px;
}
.x-board div.sehri  {
float: left;
padding: 0px 30px 0px 30px;
font-size: 4vh;
background: red;
font-weight: 800;
}
.x-board div.iftar  {
padding: 0px 30px 0px 30px;
font-size: 4vh;
background: red;
font-weight: 800;
text-align: right;
}
.x-board div.sehri-vertical, .x-board div.iftar-vertical  {
font-size: 2vh;
}
div.jamahChanges-horizontal span{
font-size: 5vh;
word-spacing: 10px;
padding-bottom: 10px;
}
div.jamahChanges-vertical span{
font-size: 3vh;
word-spacing: 10px;
padding-bottom: 10px;
}
div.scrolling-vertical > marquee > div > span {
font-size: 3vh;
word-spacing: 10px;
padding-bottom: 10px;
}
.x-time-change{
word-spacing: 10px;
padding-left: 10px;
padding-right: 10px;
}
.x-board .padding-null {
padding: 0;
}
.x-board .carousel .item{
height:100%;
}
.x-board .carousel-inner {
height:100%;
}
.x-board img.logo{
max-width: 50%;
max-height: 100%;
float: right;
padding: 10px;
}
#carouselExampleIndicators {
height: 100%;
width: 100%;
padding-right: 0px !important;
padding-left: 0px !important;
}
#carouselExampleIndicators div  div  img {
height: 100%;
width: 100%;
}
.x-board .scrolling{
font-size: 5vh;
}
.x-board .scrolling-vertical{
padding-top: 15%;
font-size: 3vh;
}
.x-board h2.dptScTime p.jumuah {
font-size: 12vh;
margin: 20px;
}
.x-board .blink a,  div.dsScroll a {
text-decoration: none !important;
}
.x-board div.quranVerse span.sura {
font-size: 3rem;
color: #98ce8c;
display: block;
padding-top: 10px;
}
p.jumuah {
margin: 40px;
}
h2.vertical > div > span > h2 > p {
font-size: 6vh !important;
}
@keyframes blink{
0%{opacity: 1;}
75%{opacity: 1;}
76%{ opacity: 0;}
100%{opacity: 0;}
} .carousel-fade .carousel-inner .item {
opacity: 0;
transition-property: opacity;
will-change: opacity;
}
.carousel-fade .carousel-inner .active {
opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-control {
z-index: 2;
}
@media only screen and (max-width: 1024px) {
h2#dsNextPrayer div span h2.dptScTime{
font-weight: 700;
}
.x-board .nextPrayer h2 {
margin: 0px;
}
}
@media only screen and (max-device-width: 520px) {
.x-board div.sehri {
font-size: 2vh;
}
.x-board div.iftar  {
font-size: 2vh;
}
} @media all and (transform-3d), (-webkit-transform-3d) {
.carousel-fade .carousel-inner > .item.next,
.carousel-fade .carousel-inner > .item.active.right {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.prev,
.carousel-fade .carousel-inner > .item.active.left {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.next.left,
.carousel-fade .carousel-inner > .item.prev.right,
.carousel-fade .carousel-inner > .item.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.clock {
margin: 0 auto;
color: #fff;
}
ul.clock {
margin: 0 auto;
padding: 0px;
list-style: none;
border: none;
word-spacing: -10px;
}
ul.clock li {
display: inline;
text-shadow: 0 0 5px #00c6ff; }
ul.clock li#sec {
font-size: 50%;
}
#point {
position: relative;
-moz-animation: mymove 1s ease infinite;
-webkit-animation: mymove 1s ease infinite;
will-change: opacity;
} @-webkit-keyframes mymove {
0% {opacity: 1.0;
text-shadow: 0 0 20px #00c6ff;
}
50% {
opacity: 0;
text-shadow: none;
}
100% {
opacity: 1.0;
text-shadow: 0 0 20px #00c6ff;
}
}
@-moz-keyframes mymove {
0% {
opacity: 1.0;
text-shadow: 0 0 20px #00c6ff;
}
50% {
opacity: 0;
text-shadow: none;
}
100% {
opacity: 1.0;
text-shadow: 0 0 20px #00c6ff;
}
}
div.carousel-item a{
text-decoration: none;
}
p.adhan-copy{
color: blue;
font-family: monospace;
}
.qtime {
width: 90px;
text-align: center;
}
h2.eict-donation a{
color: red;
font-weight: 700;
}