/* --------------------------------- */
/* 1. Basic Resets and General Styles */
/* --------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Amiri&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lateef&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Scheherazade&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa&display=swap');

.arabic {
    font-family: 'Lateef', serif;
    /*font-family: 'Aref Ruqaa', serif;*/
    /* font-family: 'Scheherazade', serif; */
    /* font-family: 'Amiri', serif; */
    /* font-family: serif;*/
	font-size: 2em;
	color: #fff;
	direction: rtl;
	text-align: right;
	line-height: 1.6;
	margin-bottom: 10px;
	line-height: 61.2px;
}
.cairo {
    font-family: 'Cairo', sans-serif;
    font-size: 2em;
    color: #fff;
    direction: rtl;
    text-align: right;
    line-height: 1.6;
    margin-bottom: 10px;
}

 html, body {
     height: 100%;
     margin: 0;
     overflow: hidden;
     font-family: 'Open Sans', sans-serif !important;
}

.col-md-10.hadith {
  background-image: url('/assets/images/l03b0s.d57ca31e.gif');
  background-repeat: repeat; 
  background-position: center top; 
  background-size: contain;
  
}
.hadith {
    position: absolute;
    top: 40px;
    font-size: 30px;
    direction: rtl;
    text-align: right;
    background-color: #fff;
    border-radius: 11px;
    height: 90%;
    padding: 33px;
    border: solid 1px #0093a4;
}
.col-md-10.hadith p {
    padding-right: 11px;
}


.hadith small {
    font-style: italic;
    font-size: 16px;
	display: block;
	font-family: 'Amiri', serif;
}

 .container-fluid {
     background-color: rgb(0 0 0 / 8%);
     position: relative;
     background-image: url(/assets/images/bg-clock.png) !important;
     background-repeat: repeat;
     height: 100%;
}
 .row.align-items-center.prayertimesrow {
     Position: absolute;
     bottom: 75px;
     background: linear-gradient(to top right, #0093a4, #0093a2);
     height: 140px;
     left: 0;
     max-width: 100%;
     margin-left: 0;
}
 .row.justify-content-end {
     display: flex;
}
 .row.justify-content-end.event {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
}
/* --------------------- */
/* 2. Header Styles */
/* --------------------- */
 .header {
     height: 80px;
}
 .row.header.align-items-left {
     padding-right: 0;
     padding-left: 0;
     width: 103%;
}
 .header .col-8.right {
     background: linear-gradient(to top right, #0093a4, #0093a2);
     margin-top: -5px;
     height: 85px;
     padding-top: 10px;
     text-align: right;
     z-index: 10;
     margin-left: -5px;
     z-index: 0;
}
 .header .col-8.right .datesection {
    display: inline-block;
    float: left;
    line-height: 30px;
    padding-top: 10px;
    border-right: solid 1px #fff;
    padding-right: 8px;
}
 .header .col-8.right span {
     display: inline;
     color: #ffffff;
     font-size: 28px;
     padding-left: 15px;
     font-weight: bold;
     float: left;
}
 span.datehijri {
     clear: both;
     font-size: 14px;
     width: 100%;
    direction: rtl;
}
 .row.justify-content-start.dars:first-child {
     margin-top: 24px;
}
 .row .toast-info p {
     margin-bottom: 0;
     line-height: 17px;
}
 .row.justify-content-start.dars p.day {
     font-weight: bold;
}
 .row.justify-content-start.dars p.sheik {
    /*font-size: 8px;
    */
}
 .row.justify-content-start.dars p.dars {
     font-size: 15px;
}
 .row.justify-content-start.dars .toast-info {
     zoom: 100%;
     margin-bottom: 2px;
    height: 55px;
}
 .header .col-4.left {
     text-align: left;
     z-index: 10;
     height: 100px;
}
 .header .logo {
     background: #3e3f40e0;
     border-bottom-right-radius: 40px;
}
 .header .logo img {
     display: block;
     -webkit-user-select: none;
     margin: auto;
     cursor: zoom-in;
     transition: background-color 300ms;
     float: left;
     width: 470px;
     margin-top: 11px;
     padding: 11px;
}
/* ------------------------------------ */
/* 3. Toast Styles for Prayer Time */
/* ------------------------------------ */
 .toast-info {
     margin-bottom: 15px;
     background: linear-gradient(to top, #f3f3f3, #ffffff);
     border-radius: 5px;
     color: white;
     display: flex;
     align-items: center;
     border: solid 1px #0093a4;
     zoom: 210%;
}
 .toast-info .row {
     margin: 0;
     width: 100%;
     height: 100%;
}
 .row .toast-info {
     width: 290px;
}
 .toast-info .fa-history {
     padding: 10px;
     background-color: blue;
} 
 .toast-info.prayer p.countdown {
     font-weight: bold;
}
 .row.info .toast-info .fa-clock, .row .toast-info .fa-calendar-alt {
     font-size: 21px;
     line-height: 35px;
}
 .toast-info .row .col-2 {
     background-color: #0093a4;
     width: 100%;
}
 .toast-info .row .col-10 {
     background-color: #ffffff;
     color: black;
     line-height: 35px;
     width: 100%;
     height: 100%;
     padding-top: 2px;
     padding-bottom: 3px;
}
/* ------------------------------------- */
/* 4. Toast Styles for Upcoming Events */
/* ------------------------------------- */
 .toast-info.event {
     position: absolute;
     right: 0;
}
 .toast-info.event p {
     display: inline;
     font-size: 16px;
}
 .toast-info.event p.name {
     font-weight: bold;
     font-size: 13px;
}
 .toast-info.today p.name, .toast-info.today p.date {
     line-height: 23px;
     margin-bottom: 0;
}
 .toast-info.event p.name, .toast-info.event p.date {
     line-height: 23px;
}
/* ------------------------------------------------ */
/* 5. Row with 12-hour Clock and Prayer Times */
/* ------------------------------------------------ */
 ul {
     list-style-type: none;
     padding: 0;
}
 ul li {
     margin-bottom: 5px;
}
 .prayername, .iqamatime {
    /*text-align: center !important;
    */
}
 ul.prayertimes li.highlight .prayer-wrapper {
     color: yellow;
}
/* --------------------- */
/* 6. Media Queries */
/* --------------------- */
 @media (orientation: landscape) {
    /* landscape styles here if any specific adjustments are needed */
}
 @media (orientation: portrait) {
    /* portrait styles here if any specific adjustments are needed */
}
/* ---------------------------------------- */
/* 7. Jumbotron and Carousel Styles */
/* ---------------------------------------- */
 .jumbotron, .jumbotronCarousel {
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     z-index: -1;
     padding: 0 !important;
}
 .carousel-item img, .carousel-item video {
     height: 100%;
     object-fit: cover;
}
 .container, .container-fluid {
     padding: 0;
     margin: 0;
}
/* ---- Event Notification Styles ---- */
 .event-notification {
     position: absolute;
     bottom: 10%;
     left: 50%;
     transform: translateX(-50%);
     padding: 20px;
     background-color: rgba(0, 0, 0, 0.7);
     border-radius: 10px;
     display: none;
     color: #fff;
     font-size: 20px;
}
/* ---- Prayer Styles ---- */
 ul.row.prayertimes {
     height: 121px;
     padding: 0;
     margin: 0;
}
 ul.prayertimes li {
     zoom: 143%;
}
 ul.prayertimes li.Sunrise {
     vertical-align: top;
}
 ul.prayertimes li.highlight {
     display: inline-block;
     padding-right: 27px;
     color: yellow;
}
 .prayer-wrapper {
     line-height: 28px;
     color: white;
     font-weight: bold;
}
 .prayer-wrapper .iqamatime {
     font-weight: normal;
     font-size: 17px;
}
 .prayer-wrapper .prayertime {
     font-size: 37px;
    font-family: 'Cairo', sans-serif;
}
 
 .toast-info.event p.date {
     font-size: 16px;
}
 .toast-info.event p {
     display: block;
    /* this is default for p elements but is written to ensure block level display */
     margin: 0;
    /* Removes the default margin from p tags if desired */
}
 .toast-info.event .name, .toast-info.event .date {
     display: block;
    /* This ensures each paragraph is on a new line */
}
/* ---- Vector Container Styles ---- */
 .vector-container {
     height: 100px;
     position: absolute;
     top: 135px;
     left: 62%;
     z-index: 9;
}
 .arabesque-vector {
     width: 620px;
     position: absolute;
     bottom: -110%;
     left: 50%;
     transform-origin: 50% 50%;
     animation: rotateVector 20s infinite linear;
     opacity: 0.05;
}
 @keyframes rotateVector {
     0% {
         transform: translateX(-50%) rotate(0deg);
    }
     100% {
         transform: translateX(-50%) rotate(360deg);
    }
}
/* ---- Toast Info Styles ---- */
 .toast-info.prayer p {
     display: inline;
     padding-right: 5px;
	 font-size: 24px !important;
}
.toast-info.prayer p.prayername {
    font-size: 14px !important;
}
.toast-info.prayer .col-10 {
    padding: 4px 5px 0 13px;
    text-align: left;
}
 .toast-info.event p {
     display: inline;
     font-size: 16px;
}
 .toast-info.event p.name {
     font-weight: bold;
}
/* ---- Hidden Styles ---- */
 .hidden {
     display: none !important;
}
/* ---- Athan Popup Styles ---- */
 .athan-popup {
     display: flex;
     align-items: center;
     justify-content: center;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgb(0 0 0 / 88%);
     z-index: 1000;
}
 .athan-content {
     text-align: center;
     color: #fff;
}

.row.justify-content-start.dars {
    display: none;
}
.container.tasbih .col {
    font-size: 45px;
}
.container.tasbih {
    padding-bottom: 25px;
}
 .notice-popup {
     display: flex;
     align-items: center;
     justify-content: center;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1000;
	 padding-top: 5px;
     align-items: flex-start;
     justify-content: flex-start;
	 background-color: #f5f5f5e0;
	 background-image: linear-gradient(to bottom left, rgba(0, 0, 0, 0) 0%, #f5f5f5 30%) !important;
     text-align: center;
     color: #fff;
}


.notice-popup .mobile-container img {
    width: 325px;
}
/* ---- Progress Bar Styles ---- */
 .progress-bar {
     height: 20px;
     background-color: #ffffff !important;
     width: 310px;
     margin: 20px auto;
     border-radius: 8px;
}
 .progress {
     height: 100%;
     background: linear-gradient(to right, #0093a4, #27ae60);
     width: 0;
}
/* ---- Animation Styles ---- */
 @keyframes blink {
     0% {
         opacity: 1;
    }
     50% {
         opacity: 0;
    }
     100% {
         opacity: 1;
    }
}
 .blinking {
     animation: blink 2s infinite;
}
/* ---- Iqama Countdown Styles ---- */
 p#iqamaCountdown {
     font-size: 38px;
     font-weight: bold;
}
/* ---- Row Styles ---- */
 .row.justify-content-end {
     display: flex;
}
 .row.justify-content-end.event {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
}
 .toast-info.event:nth-child(1) {
     top: 0px;
}
 .toast-info.event:nth-child(2) {
     top: 63px;
}
 .toast-info.event:nth-child(3) {
     top: 106px;
}
 .toast-info.event:nth-child(4) {
     top: 149px;
}
 .toast-info.event:nth-child(5) {
     top: 172px;
}
 .toast-info.event:nth-child(6) {
     top: 235px;
}
 p#iqamaCountdown, p#iqamaCountdowntxt {
     display: inline-block;
     font-size: 56px;
     margin-bottom: 35px;
     padding-left: 25px;
}
 p#iqamaCountdowntxt {
     font-size: 45px;
}
 .athan-content p {
     font-size: 45px;
    font-family: 'Cairo', sans-serif;
}
 .athan-content h1#prayerName {
    font-size: 108px;
    font-family: 'Cairo', sans-serif;
    font-weight: bold;
}
 .col-md-6.eventssection {
     padding-top: 25px;
}
@media screen and (max-width: 768px) {
	/* Hide tables on screens smaller than 768px and show the message */
	.container-fluid {
		display: none;
	}

	#notSupportedMessage {
		display: block;
	}
}

.rq-info.left.medlem {
    margin-right: 15px;
}
.rq-info.left.medlem img {
     width: 255px;
}
.rq-info.left.mobilepay {

}
.rq-info.left.mobilepay img {
     width: 200px;
}

.col-md-6.eventssection .row .toast-info {
    width: 250px;
}

.row.info .toast-info .fa-clock {
    margin: 2px 0 0 -5px;
}

.mobile-container {
}

.mobile-container img {
    width: 155px;
}

.mobile-container p {
   font-size: 19px;
}


.section .set {
    width: 80%;
    /*border: solid 1px #cfcfcf5c;
    border-radius: 10px;*/
    margin: 0 auto;
}
.section:first-child .set {
    width: 270px;
} 

.section:nth-child(5) .set,
.section:nth-child(4) .set {
    width: 1270px;
}

.section:nth-child(2) .set {
    width: 1273px;
}

.section:nth-child(3) .set {
    width: 1273px;
}
/*
.section:nth-child(2) .set .translation p.wider {
    border-top: unset;
}*/


.section:nth-child(2) {
    padding-bottom: 0;
    margin-bottom: 0;
}/*
.section:nth-child(2) .set .translation p.wider,
.section:nth-child(2) .set {
	border-bottom: unset;
	border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}*/

.section:nth-child(3) .set .translation p.wider,
.section:nth-child(3) .set .translation p.wider,
.section:nth-child(3) .set {
    /*border-top: unset;
	border-top-left-radius: 0;
    border-top-right-radius: 0;*/
}


.notice-content {
    width: 100%;
    height: 100%;
    padding: 2px;
}

.section {
    margin-bottom: 10px;
    padding-bottom: 15px;
	position: relative;
}
.section:nth-child(5) .badge,
.section:nth-child(2) .badge {
    /*margin-left: 594px;*/
}

.section:nth-child(3) .badge {
    margin-left: 594px;
}
.section:nth-child(4) .badge {
    /*margin-left: 78px;*/
}


.section h2 { 
    font-size: 1.2em;
    color: #bbb;
    padding-bottom: 10px;
	margin-bottom: 0px;
}

.section h2 p {
    background: #f4e4a4;
    position: relative;
    width: 90px;
    margin: 0 auto;
    border-radius: 6px;
    color: #535353;
    padding: 3px;
}

.section .arabic {
	font-size: 45px;
    direction: rtl;
    text-align: center !important;
    margin-bottom: 0 !important;
    padding-top: 10px;
    /*border-left: solid 1px;
    border-right: solid 1px;
    border-color: #cfcfcf5c;*/
	color: #0f0f0f;
}

.translation {
    font-size: 0.9em;
    color: #ccc;
    margin-bottom: 0px;
    text-align: center;
}

.translation p {
    position: relative;
    margin: 0 auto;
    color: #82807c;
    padding: 2px;
    font-weight: bold;
    font-size: 25px;
    border-radius: 6px;
    border: solid 1px #cfcfcf5c;
    /*border-top-left-radius: unset;
    border-top-right-radius: unset;*/
	font-family: 'Cairo';
	background: #e9e8e2;
}

.translation p.wide {
    width: 1040px;
}

.translation p.wider {
    width: 100%;
    font-size: 29px;
}

.section .groupp {
    display: inline-block;
    width: 20%;
    /*border: solid 1px #cfcfcf5c;
    border-radius: 10px;*/
}

.references {
    font-size: 0.8em;
    color: #888;
    text-align: center;
    margin-top: 30px;
}



.section .badge {
	display: inline-block;
    background-color: #82807c;
    color: #9a9476;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 14px;
    position: absolute;
    z-index: 10;
    margin-left: -27px;
    border-top-left-radius: 0;
    border-bottom-right-radius: 0;
    background: #fae7a2;
}


.header .col-8.right .weather-info{
	display: inline-block;
    float: left;
    line-height: 30px;
    padding-top: 10px;
	vertical-align: middle;
}
.header .col-8.right .weather-info span {
    text-align: right;
    font-size: 42px;
    vertical-align: middle;
    padding: 15px 0px 0px 16px;
}