.flashMessage {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    font-size: 3.5vw;
}

.flashMessage marquee {
    width: 100%;
}

.bg-black {
    background-color: #1b1e21;
}
body {
	overflow: hidden;
	height: 100vh;
	position: relative;
	background-size: cover;
	text-shadow: 0 10px 10px #000000b8;
}

#streamer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	border: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	z-index: 1;
}

#black-screen,
.main,
.sub-main,
.iqama {
	height: 100vh;
	margin: auto;
}

#black-screen {
	background-color: #080808;
}

.top-content {
	height: 54%;
	position: relative;
	overflow: hidden;
}

.top-content .adhan-flash, .top-content .alarm-flash {
	font-size: 11vw;
	margin: 3vw auto;
	display: flex;
	justify-content: space-around;
	width: 95%;
}

.top-content .alarm-flash {
	font-size: 11vh;
}

.bottom-block {
	padding: 0 2vw;
	border-radius: 2vw;
	margin: 0 3vw;
	background: rgba(78, 43, 129, 0.6);
}

.next-prayer-bloc-hadith {
	display: flex;
	font-size: 3vw;
	justify-content: space-between;
	padding: 0 10px;
	width: 100%;
	margin-top: 1vw;
}

.next-prayer .countdown {
	display: inline;
}

.prayers {
	margin: auto;
	padding: 10px;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	justify-content: space-around;
}

.prayers > div {
	background-color: rgba(0, 0, 0, 0.6);
	border-radius: 2vw;
	padding: 0.5vw;
	width: 15vw;
}

.prayer-highlighted {
	background: rgba(78, 43, 129, 0.6) !important;
}

.prayer-highlighted div {
	color: #FFFFFF !important;
}

.prayers .name {
	font-size: 3vw;
	font-weight: initial;
}

.prayers .wait {
	font-size: 3.5vw;
	display: flex;
	justify-content: center;
}

.flex-time {
	display: inline-flex;
	justify-content: center;
	direction: ltr;
}

.time {
	font-weight: bold;
	font-size: 4.5vw;
	padding: 0 10px;
	display: flex;
	justify-content: center;
	direction: ltr;
}

small {
	font-size: 2vw;
	margin-left: 5px;
}

.joumouaa, .custom-time {
	margin: 50px auto;
	font-size: 3vw;
	border-radius: 2vw;
	padding: 0 1vw;
	width: fit-content;
}

.joumouaa .name, .custom-time .name {
	font-weight: initial;
}

.header h1 {
	font-size: 4vw;
	padding: 1vw 0.5vw;
	width: 78%;
	overflow: hidden;
	white-space: nowrap;
	margin: auto;
	font-weight: bold;
}

.important {
	color: #B0413E;
}

.content .currentTime {
	font-size: 8vw;
	line-height: 7vw;
	margin-bottom: -1vw;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	direction: ltr;
}

.currentTimeShort {
	display: inline-flex;
	justify-content: center;
	direction: ltr;
}

.content {
	display: flex;
	justify-content: space-around;
	margin-top: 1vw;
}

.content .middle-bloc{
	width: 40vw;
}

.center-time {
	border-radius: 2vw;
	padding: 1.5vw;
	background: rgba(78, 43, 129, 0.7);
	position: relative;
	height: 14vw;
}

#hijriDate,
#gregorianDate {
	font-size: 2.8vw;
	font-weight: normal;
	position: absolute;
	top: 9vw;
	right: 0;
	left: 0;
}

.next-prayer-bloc {
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
	border-radius: 0 0 2vw 2vw;
	margin: -2.5vw auto 0;
	height: 8vw;
	line-height: 10vw;
	font-size: 2.8vw;
	font-weight: bold;
}

.next-prayer-bloc img {
	width: 3.5vw;
	margin: -1vw 0.5vw 0 0.5vw;
}

.iqama {
	color: #fff;
	position: relative;
}

.iqama .top {
	height: 20%;
	font-size: 12vh;
}

.iqama .bottom {
	padding-top: 50px;
	font-size: 8vh;
	position: fixed;
	bottom: 50px;
	left: 0;
	right: 0;
}

.iqama .image {
	background-image: url('/static/images/phone_silent.png');
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: contain;
	height: 60%;
}

.cupola {
	width: 14vw;
	margin-top: -3vw;
}

.adhan, .douaa-between-adhan-iqama, .jumua-dhikr-reminder {
	padding: 20px 10px;
}

.adhan .fr, .douaa-between-adhan-iqama .fr, .jumua-dhikr-reminder .fr {
	margin-top: 50px;
}

.adhan .title, .douaa-between-adhan-iqama .title, .jumua-dhikr-reminder .title {
	border-bottom: 2px solid rgba(255, 255, 255, 0.7);
	width: 50%;
	margin: 2vw auto;
}

.douaa-between-adhan-iqama .title {
	width: 65%;
}

.assosciation {
	font-size: 1.3vw;
}

.version {
	font-size: 0.8vw;
	color: #adadad;
	position: fixed;
	bottom: 0.3vw;
	right: 3vw;
	border-radius: 0 0 1vw 1vw;
	background: rgb(78, 43, 129);
	padding: 0.2vw 0.5vw;
}

.logo {
	height: 3.5vw;
	position: fixed;
	bottom: 1.5vw;
	right: 0.5vw;
}

#mosque-id {
	font-size: 0.8vw;
	color: #adadad;
	text-align: left;
	margin-bottom: 0.5vw;
}

.store {
	position: fixed;
	bottom: 5px;
	left: 5px;
	width: 4.8vw;
}

#qrcode img {
	width: 100%;
}

.tooltip-arrow,
.header + .tooltip > .tooltip-inner {
	background-color: #f0ad4e;
	color: #000;
	text-align: left;
	font-size: 14px;
}

footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	height: 10vh;
}

footer .info {
	width: 70%;
	margin: auto;
}

.flashMessage marquee {
	margin: 0 11vw 0 0.5vw;
}

.random-hadith {
	height: 82%;
}

.random-hadith .text {
	height: 92%;
	overflow: hidden;
	display: flex;
	align-items: center;
	padding: 1vw;
}

.random-hadith .text div {
	line-height: 170%;
	margin: auto;
}

#weather {
	top: 30px;
	right: 10px;
	font-size: 3vw;
	position: fixed;
}

.mosque-logo {
	width: 4vw;
	margin-top: -0.7vw;
}

.verry-hot {
	color: #AA3333;
}

.hot {
	color: #d58512;
}

.middle {
	color: #ffd05f;
}

.cold {
	color: #FFFFFF;
}

.verry-cold {
	color: #3498db;
}

.full-moon {
	width: 3vw;
	height: 3vw;
}

.main-iqama-countdown {
	padding: 1.5vw;
	width: fit-content;
	margin: 2vw auto;
	border-radius: 2vw;
}

.main-iqama-countdown .text {
	font-size: 12vh;
}

.main-iqama-countdown .countdown {
	font-size: 40vh;
	line-height: 26vw;
}

.top-buttons {
	z-index: 1000;
	font-size: 220%;
	color: #bdbbbb;
	position: fixed;
	top: 10px;
	left: 10px;
	cursor: pointer;
}

.top-buttons a {
	color: #bdbbbb;
}

.form-group {
	position: relative;
}

.keyboardInputInitiator {
	position: absolute;
	top: 24px;
	right: 5px;
}

body.rtl .keyboardInputInitiator {
	top: 26px;
	left: 5px;
	right: auto;
}

.form-control {
	padding: 3px 12px;
}

iframe {
	height: 100vh;
	width: 100%;
}

.show-password {
  right: 45px !important;
}

/* arabic */
@font-face {
  font-family: koufi;
  unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+FB50-FDFF, U+FE80-FEFC;
  src: url(/fonts/DroidKufi-Regular.eot);
  src: url(/fonts/DroidKufi-Regular-iefix.eot) format('embedded-opentype'),
  url(/fonts/DroidKufi-Regular.woff2) format('woff2'),
  url(/fonts/DroidKufi-Regular.woff) format('woff'),
  url(/fonts/DroidKufi-Regular.ttf) format('truetype');
}

@font-face {
  font-family: quran;
  src: url(/fonts/original-hafs.woff) format('woff'), url(/fonts/original-hafs.ttf) format('truetype');
}

body {
	background-color: #3b3b3b;
	color: #fff;
	font-weight: bold;
	font-size: 12px;
	font-family: 'koufi', Arial, Helvetica, sans-serif;
}

.rtl {
	direction: rtl;
}

.ltr {
	direction: ltr;
}

.mt-1 {
	margin-top: 1rem;
}

.mt-2 {
	margin-top: 2rem;
}

.mt-3 {
	margin-top: 3rem;
}

.mt-4 {
	margin-top: 4rem;
}

.mt-5 {
	margin-top: 2rem;
}

.mb-1 {
	margin-bottom: 1rem;
}

.mb-2 {
	margin-bottom: 2rem;
}

.mb-3 {
	margin-bottom: 3rem;
}

.mb-4 {
	margin-bottom: 4rem;
}

.mb-5 {
	margin-bottom: 2rem;
}

.joumouaa2-id, .aid-time2{
	border-top: 1px solid;
}

.joumouaa2-id, .aid-time2{
	display: flex;
	justify-content: center;
	direction: ltr;
}

.dropdown-menu.ltr {
	left: 0;
	right: auto;
}

.dropdown-submenu {
	position: relative;
}

.dropdown-submenu > .dropdown-menu {
	top: 0;
	left: 100%;
	-webkit-border-radius: 0 6px 6px 6px;
	-moz-border-radius: 0 6px 6px 6px;
	border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover > .dropdown-menu {
	display: block;
}

.dropdown-submenu > a:after {
	display: block;
	content: " ";
	float: right;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 5px 0 5px 5px;
	border-left-color: #cccccc;
	margin-top: 5px;
	margin-right: -10px;
}

.dropdown-submenu:hover > a:after {
	border-left-color: #ffffff;
}

.dropdown-submenu.pull-left {
	float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
	left: -100%;
	margin-left: 10px;
	-webkit-border-radius: 6px 0 6px 6px;
	-moz-border-radius: 6px 0 6px 6px;
	border-radius: 6px 0 6px 6px;
}

#spinner {
	background-image: url("/static/images/logo/mawaqit_logo_light_rounded.png");
	background-repeat: no-repeat;
	background-position: center;
	height: 100vh;
}

.fadeOut {
	opacity: 0;
	transition: opacity 1s linear;
}

.fadeIn {
	opacity: 1;
	transition: opacity 1s linear;
}

.ampm {
	font-size: 40%;
	margin-left: 0.5rem;
	font-weight: normal;
	display: flex;
	align-items: center;
	line-height: 90%;
	flex-direction: column;
	justify-content: center;
	opacity: 0.7;
}

.sec {
	color: #FFFFFF;
	opacity: 0.7;
	font-size: 50%;
	line-height: 90%;
}

.slider .title {
	margin: 20px 0;
}

.slider .ar {
	line-height: 160%;
}

.slider ul {
	position: relative;
	margin: auto;
	padding: 0;
	list-style: none;
}

.slider li {
	float: left;
	margin: auto;
	word-break: break-word;
	height: 90vh;
}

.adhkar-after-prayer {
  font-family: quran, sans-serif;
}

.adhkar-after-prayer .title {
	font-size: 700%;
	padding: 20px 0;
	height: 15vh;
	border-bottom: 2px solid rgba(255, 255, 255, 0.7);
	width: 60%;
	margin: auto;
}

.message-slider .currentTimeShort {
	position: fixed;
	font-size: 7vh;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 12vw;
	height: 10vh;
	z-index: 10;
	background-color: #1b1e21;
	display: flex;
	justify-content: center;
}

.adhkar-after-prayer .fr {
	margin-top: 50px;
}

.message-slider .title {
	color: #f0ad4e;
}

.slider img {
	width: 100%;
	height: 100%;
}

.slider li > div {
	width: 100%;
}

.slider li .text > div {
	margin: auto;
}

.slider .content {
	padding: 10px;
}

li .text {
	width: 100%;
	height: 90vh;
	display: flex;
	align-items: center;
}

.duaa li {
	height: 85vh;
	display: flex;
	align-items: center;
	padding-top: 2vw;
}

.duaa li > div {
	font-size: 90px;
}