/*Google Fonts Import*/
    @import url(//fonts.googleapis.com/css?family=Open+Sans:400,500,600,700,800,900);
    @import url( 'https://fonts.googleapis.com/css?family=Scheherazade:400,700');
    
    /*Loading Screen*/
    #loadingText {
        color: var(--loadscrText) !important;
    }
    #progbar {
        color: var(--loadscrProgbar);
    }
    .circle-progress-value {
	    stroke: var(--background);
    }
    
    body {
        background-image: url("https://premium.masjidboardlive.com/v2/images/pillars.png") ;
        background-color: var(--background) !important;
    }
    
    .arabic {
        font-family: 'Scheherazade', serif;
        font-weight: 400;
        font-size: 80px;
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
        line-height: 60px;
        overflow: visible;
        color: var(--arabicSalaahNames);
    }
    .arabica {
        font-family: 'Scheherazade', serif;
        font-weight: 400;
        font-size: 40px;
        text-align: center;
        margin-top: 0;
        margin-bottom: 0;
        line-height: 30px;
        overflow: visible;
    }
    .taleembr {
        line-height: 20px !important;
        font-size: 20px !important;
    }
    
    /*Clock Colors*/
    #currentTime {
        color: var(--bigClock);
        text-shadow: 4px 0 0 var(--clockShadow);
    }
    
    /*Masjid Name*/
    #masjidNameTable {
        background-color: var(--masjidNameHighlights);
    }
    #masjidName1 {
        color: var(--masjidName);
    }
    #masjidNameTable2 {
        background-color: var(--masjidNameHighlights);
    }
    #masjidName2 {
        color: var(--townName, var(--masjidName));
    }
    
    /*Masjidboardlive.com url*/
    #masjidUrl {
        color: var(--siteurl);
    }
    
    /*Zawaal*/
    #zawaalPopUp {
        color: var(--zawaalFlash);
    }
    
    /*Table borders*/
    .mst tr td {
        border: thin solid var(--borderColors);
    }
    
    .pumst tr td {
        border: thin solid var(--borderColors);
    }
    
    .msttop {
        border: thin solid var(--borderColors);
        color: var(--jamaahHeading0);
    }
    
    /* Bootstrap Carousel*/
    .sliderMainHeadings {
        color: var(--sliderHeading);
    }
    .nikahMainHeadings {
        color: var(--sliderHeading);
    }
    .sliderSubHeading {
        color: var(--sliderSubHeading);
    }
    .sliderInfoHeadings{
        color: var(--sliderInfoHeadings);
        text-decoration-color: var(--sliderInfoHeadingsUnderline) !important;
    }
    .fSliderInfoHeadings{
        color: var(--sliderInfoHeadings);
        text-decoration-color: var(--sliderInfoHeadingsUnderline) !important;
    }
    .nikahInfoHeadings {
        color: var(--sliderInfoHeadings);
        text-decoration-color: var(--sliderInfoHeadingsUnderline) !important;
    }
    .nikahText {
        color: var(--sliderText);
    }
    .sliderText {
        color: var(--sliderText);
    }
    .announceHeading {
        color: var(--announceHeading);
    }
    .announceText {
        color: var(--announceText);
    }
    .tabline {
        background-color: var(--sliderDividerLine);
    }
    
    /* All HTML Position CSS*/
    /* Jumu'ah Table */
    #jumuahAdhaanHeading {
        border: thin solid var(--nsctBorderColors);
        background-color: var(--boxHighlights);
        color: var(--boxHeadingsCellText);
    }
    #jumuahSunnanHeading {
        border: thin solid var(--nsctBorderColors);
        background-color: var(--boxHighlights);
        color: var(--boxHeadingsCellText);
    }
    #jumuahKhutbahHeading {
        border: thin solid var(--nsctBorderColors);
        background-color: var(--boxHighlights);
        color: var(--boxHeadingsCellText);
    }
    #jumuahAdaanTime {
        border: thin solid var(--nsctBorderColors);
    }
    #jumuahSunanTime {
        border: thin solid var(--nsctBorderColors);
    }
    #jumuahKhutbahTime {
        border: thin solid var(--nsctBorderColors);
    }
    #jumuahKhateebHeading {
        border: thin solid var(--nsctBorderColors);
    }
    
    /*Times Box Table*/
    .zstart {
        border: thin solid var(--timesboxBorderColors);
    }
    .zend {
        border: thin solid var(--timesboxBorderColors);
    }
    .zto {
        border: thin solid var(--timesboxBorderColors);
    }
    #timesBoxRow {
        background-color: var(--boxHighlights);
        color: var(--boxHeadingsCellText);
    }
    
    /*Next Salaah Change Table*/
    #fcc {
        border: thin solid var(--nsctBorderColors);
        background-color: var(--boxHighlights);
        color: var(--boxHeadingsCellText);
    }
    #acc {
        border: thin solid var(--nsctBorderColors);
        background-color: var(--boxHighlights);
        color: var(--boxHeadingsCellText);
    }
    #ecc {
        border: thin solid var(--nsctBorderColors);
        background-color: var(--boxHighlights);
        color: var(--boxHeadingsCellText);
    }
    #fccs {
        border: thin solid var(--nsctBorderColors);
    }
    #accs {
        border: thin solid var(--nsctBorderColors);
    }
    #eccs {
        border: thin solid var(--nsctBorderColors);
    }
    #fccss {
        border: thin solid var(--nsctBorderColors);
    }
    #accss {
        border: thin solid var(--nsctBorderColors);
    }
    #eccss {
        border: thin solid var(--nsctBorderColors);
    }
    
    /*Countdown Timer*/
    #countdownTimerName {
        color: var(--countdownTimerName);
    }
    #countdownTimer {
        color: var(--countdownTimer);
    }
    .shadow {
        text-shadow: 3px 0 0 var(--countdownTimerShadow);
    }
    .countdownInfo {
        color: var(--countdownTimerInfo);
        font-size: 16px !important;
        margin-top: 5px;
        margin-bottom: -5px;
    }
    .countdownInfoNoColor {
        color: var(--countdownTimerInfo);
        font-size: 16px !important;
        margin-top: 5px;
        margin-bottom: -5px;
    }
    
    /* Dates English  Islamic */
    #islamicDate {
        color: var(--dates);
    }
    #todaysDate {
        color: var(--dates);
    }
    
    /*Main Slider*/
    .transition-timer-carousel-progress-bar {
        background-color: var(--sliderProgressBar);
    }
    
    /*Moon Table*/
    #moonHeading {
        color: white;
    }
    .scroll {
        border: thin solid var(--moontableBorderColors);
    }
    #mbh {
        border: thin solid var(--moontableBorderColors);
        color: #fff;
    }
    #moonBirth {
        color: #000;
    }
    #mvh {
        border: thin solid var(--moontableBorderColors);
        background-color: var(--boxHighlights);
    }
    #mvhh {
        border: thin solid var(--moontableBorderColors);
        background-color: var(--boxHighlights);
    }
    #moonVisibil {
        color: #000;
    }
    #mbhHeading {
        color: #fff;
    }
    
    /* Flashing Animations*/
    .flashnextfajr {
        animation: flashnf ease-in-out 2s infinite;
    }
    .flashnextfajr #nsch_fajr,
    .flashnextfajr #fajrNextDate,
    .flashnextfajr #fajrNextTime {
        animation: flashfajrtext ease-in-out 2s infinite;
    }
    @keyframes flashnf {
        0% {
            background-color: #fff;
        }
        30% {
            background-color: var(--nextFajrFlash);
        }
        70% {
            background-color: var(--nextFajrFlash);
        }
        100% {
            background-color: #fff;
        }
    }
    @keyframes flashfajrtext {
        0% {
            color: #000;
        }
        30% {
            color: var(--nextAsrFlashText, #000);
        }
        70% {
            color: var(--nextAsrFlashText, #000);
        }
        100% {
            color: #000
        }
    }




    .flashnextasr {
        animation: flashna ease-in-out 2s infinite;
    }
    .flashnextasr #nsch_asr,
    .flashnextasr #asrNextDate,
    .flashnextasr #asrNextTime {
        animation: flashatext ease-in-out 2s infinite;
    }
    @keyframes flashna {
        0% {
            background-color: #fff
        }
        30% {
            background-color: var(--nextAsrFlash);
        }
        70% {
            background-color: var(--nextAsrFlash);
        }
        100% {
            background-color: #fff;
        }
    }
    @keyframes flashatext {
        0% {
            color: #000;
        }
        30% {
            color: var(--nextAsrFlashText, #000);
        }
        70% {
            color: var(--nextAsrFlashText, #000);
        }
        100% {
            color: #000;
        }
    }




    
    .flashnextesha {
        animation: flashne ease-in-out 2s infinite;
    }
    .flashnextesha #nsch_esha,
    .flashnextesha #eshaNextDate,
    .flashnextesha #eshaNextTime {
        animation: flashetext ease-in-out 2s infinite;
    }
    @keyframes flashne {
        0% {
            background-color: #fff;
        }
        30% {
            background-color: var(--nextEshaFlash);
        }
        70% {
            background-color: var(--nextEshaFlash);
        }
        100% {
            background-color: #fff;
        }
    }
    @keyframes flashetext {
        0% {
            color: #000;
        }
        30% {
            color: var(--nextEshaFlashText, #000);
        }
        70% {
            color: var(--nextEshaFlashText, #000);
        }
        100% {
            color: #000;
        }
    }



    
    .flashcountdown {
        animation: flashcd ease-in-out 2s infinite;
    }
    @keyframes flashcd {
        0% {
            color: var(--countdownFlash);
        }
        10% {
            color: var(--countdownFlash);
        }
        50% {
            color: var(--background);
        }
        90% {
            color: var(--countdownFlash);
        }
        100% {
            color: var(--countdownFlash);
        }
    }
    
    .flashmoonvis {
        animation: flashmv ease-in-out 4s infinite;
    }
    @keyframes flashmv {
        20% {
            background-color: var(--moonVisFlash);
        }
        50% {
            background-color: #fff;
        }
        80% {
            background-color: var(--moonVisFlash);
        }
    }
    
    .flashfuneral {
        animation: flashf ease-in-out 2s infinite;
    }
    @keyframes flashf {
        0% {
            color: var(--funeralFlash);
        }
        10% {
            color: var(--funeralFlash);
        }
        50% {
            color: #fff;
        }
        100% {
            color: var(--funeralFlash);
        }
    }
    
    .flashcellphone {
        animation: flashcp ease-in-out 2s infinite;
    }
    @keyframes flashcp {
        0% {
            color: #fff;
        }
        30% {
            color: var(--cellphoneFlash);
        }
        70% {
            color: var(--cellphoneFlash);
        }
        100% {
            color: #fff;
        }
    }
    
    /*Moon*/
    #moonBox {
        background: linear-gradient( to bottom, rgb(0,0,0) 15%, var(--moonBoxBackground) 50%, rgb(0,0,0) 85% );
        border-top: 0 solid var(--moonboxBorderColors);
        border-bottom: thin solid var(--moonboxBorderColors);
        border-left: thin solid var(--moonboxBorderColors);
        border-right: thin solid var(--moonboxBorderColors);
    }
    headline {
        -webkit-animation-name: headline;
        -webkit-animation-duration: 10s;
        animation-name: headline;
        animation-duration: 10s;
    }
    @-webkit-keyframes headline {
        0% {
            color: transparent;
            text-shadow: 2px 2px 10px rgba(255,255,255,0);
        }
    }
    @keyframes headline {
        0% {
            color: transparent;
            text-shadow: 2px 2px 10px rgba(255,255,255,0);
        }
    }
    
    #currentMoon {
        color: var(--moonPhaseDesc);
    }
    
    /* Islamic Graphics */
    .saw {
        background-image: url("https://drive.google.com/uc?export=view&id=1kkss4kcYMi-SLM__TTnC7DdEdh0uQO6s");
        padding: 0;
        margin: 0;
    }
    .swt {
        background-image: url("https://drive.google.com/uc?export=view&id=1gHabmApC-HewKmUgWbt3rcnK1NHUmXjm");
    }
    .ranhum {
        background-image: url("https://drive.google.com/uc?export=view&id=1B4-4ofVmOGiGZMr8lA_uFOKvN4P74l5o");
    }
    .ranhu {
        background-image: url("https://drive.google.com/uc?export=view&id=1O0Ge-R4-F6dgjb7xGBeX1PICZ9A_YwA5");
    }
    .ranha {
        background-image: url("https://drive.google.com/uc?export=view&id=1K2OeAt8SUNXpHYSuZUyTxJRVOnQ2p9fd");
    }
    .rahimahum {
        background-image: url("https://drive.google.com/uc?export=view&id=1-ao7-tyMh46DVI9N_BD-fRsM8hipnZh1");
    }
    .rahimahu {
        background-image: url("https://drive.google.com/uc?export=view&id=1A0bZuo7P3tcxu140ifYbWqP_Q7pevxay");
    }
    .rahimaha {
        background-image: url("https://drive.google.com/uc?export=view&id=1VguaRUkbm2kpLJvMA0sCbHPA-kfQR1TO");
    }
    .alayhis {
        background-image: url("https://drive.google.com/uc?export=view&id=1rOB09XBSXDL0eDaZkBNMcgON4S82WFuP");
    }
    
    /*Moon Pop Up*/
    #masjidImageMask {
        background-color: transparent;
    }
    #circle {
        background-color: transparent;
    }
    
    /*Address*/
    #masjidWeb {
        color: #014dc6;
    }
    #masjidAddy2 {
        color: #014dc6;
    }
    
    .adhanColumn {
        color: var(--adhanHeading0);
    }
    .jamaahColumn {
        color: var(--jamaahHeading0);
    }
    
    .gashtVenues {
        color: var(--sliderInfoHeadings);
    }
    
    .tickerOdd {
        color: var(--tickerOdd);
    }
    .tickerEven {
        color: var(--tickerEven);
    }
    
    .ayaamText {
        color: var(--ayaamText);
    }
    
    .moonPopTable {
        border: 3px solid var(--moontableBorderColors);
    }
    #circle2 {
        fill: var(--moonArrow);
    }

    /* Full Screen Pop Up*/
    #pu_sundayzuhr {
    color: white;
  }

  .pu_tahajjud {
    color: white;
  }
  #posterContainer {
    background-color: var(--background);
  }
  #popUpPerpetual tr td {
    border: thin solid var(--borderColors);
  }

  .pu_tableTime #currentTime {
    color: var(--popupClockText, black) !important;
    text-shadow: 1px 0 0 var(--popUpClockShadow, var(--bigClock))
  }

  #popUpDate{
    color: var(--popupDateText, black) !important;
  }

  .pu_box_bg {
    background-color: var(--popupClockBackground);
  }

  .pu_progress {
    background-color: var(--sliderProgressBar);
  }

  .pu_mst {
    border: thin solid var(--borderColors);
  }

  .pu_mst tr td {
    border: thin solid var(--borderColors);
  }
  .carousel-indicators{
    bottom: 625.5px !important;
  }
  .carousel-indicators li{
    background-color: var(--background);
  }
  .carousel-indicators .active{
    background-color: var(--clockShadow);
  }