/* Section */

.section {
	margin-top: 70px;
}

.section h2 {
	margin-bottom: 30px;
}


/* Block */

.block {
	border-radius: var(--radius);
	border: 1px solid var(--gray-color-90);
}
	
	
/* Hero */

.hero {
	background-color: var(--gray-color-40);
	margin-top: 20px;
}

.hero .columns {
    overflow: hidden;
}

.hero p {
	opacity: .95;
}

.hero img {
	display: block;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}


/* SUBPAGE TABS */

.subpage {
	position: relative;
	margin-bottom: 32px;
}

.subpage:after {
	z-index: 1;
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: block;
	border-bottom: 1px solid;
}

.light .subpage:after {
	border-color: rgb(0 0 0 / 10%);
}

.dark .subpage:after {
	border-color: rgb(255 255 255 / 10%);
}

.subpage ul {
	display: block;
	overflow-x: scroll;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}

.subpage ul::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.subpage ul li {
	position: relative;
	background-color: transparent;
    display: inline-block;
	opacity: .8;
    cursor: pointer;
	font-family: inherit;
    color: var(--text-color);
	font-weight: 500;
	line-height: 1.3;
	user-select: none;
	border-bottom: 1px solid transparent;
	padding-top: 15px;
    padding-bottom: 15px;
}

.subpage ul li:last-child {
	margin-right: 0;
}

.subpage ul li a:hover {
	opacity: 1;
}

.subpage ul li.current {
	opacity: 1;
    cursor: default;
	color: var(--primary-color-accent);
	border-color: var(--primary-color-accent);
}

.subpage ul li.dimmed {
	color: var(--gray-color-60);
}

.subpage ul li.pre-ramadan,
.subpage ul li.in-ramadan {
	color: var(--text-color);
}

.subpage ul li.in-ramadan .pulsar {
	position: relative;
	background-color: var(--green-color-accent);
	width: 4px;
	height: 4px;
	display: inline-block;
	vertical-align: middle;
	border-radius: 50%;
	margin-top: -2px;
	margin-right: 8px;
}

.subpage ul li.in-ramadan .pulsar:before,
.subpage ul li.in-ramadan .pulsar:after {
	content: "";
	position: absolute;
	top: -8px;
	left: -8px;
	right: -8px;
	bottom: -8px;
	opacity: 0;
	border: 1px solid var(--green-color-accent);
	border-radius: 50%;
	animation: pulse 2.5s linear infinite;
}

.subpage ul li.in-ramadan .pulsar:after {
	animation-delay: 1.25s;
}

@keyframes pulse {
	0% {
		opacity: 0;
		transform: scale(0.5);
	} 
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: scale(1.2);
	}
}

.subpage ul li a {
	color: inherit;
}


/* Cities */

.cities .city {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--gray-color-85);
	border-radius: var(--radius);
	padding: 18px 24px 22px;
}

.cities .city .name {
	display: block;
	font-size: 20px;
	color: var(--text-color);
	font-weight: 600;
}

.cities .city .name:hover {
	color: var(--primary-color-accent);
}

.cities .city .location {
	display: block;
	opacity: .75;
	color: var(--text-color);
	font-weight: 400;
	font-size: 15px;
	margin-top: 7px;
}

.cities .city .distance-badge {
	position: absolute;
	top: 0;
	right: 0;
	background-color: var(--green-color-ghost);
    display: block;
    color: var(--green-color-accent);
    font-size: 12px;
	line-height: 1;
	border-radius: 0 0 0 6px;
	padding: 4px 6px;
}

.cities .city .favorite {
	background-color: var(--white-color);
	margin-top: 8px;
}

.cities .city .favorite:before {
	background-position: -168px -72px; 
}

.cities .city .favorite.favorited:before {
	background-position: 0 -48px; 
}


/* Place */

.place-meta {
	margin-bottom: 28px;
}

.place-meta .place-meta-text {
	position: relative;
	font-size: 17px;
	line-height: 1.5;
	padding-left: 29px;
}

.place-meta .place-meta-text:before {
	position: absolute;
	top: 1px;
	left: 0;
}


/* Settings Link */

.settings-link {
	cursor: pointer;
	border-bottom: 1px dashed var(--gray-color-65);
}

.settings-link:hover {
    color: var(--primary-color-hover);
	border-color: var(--primary-color-hover);
}


/* Namaz */

.namaz {
	overflow: hidden;
	text-align: center;
	padding-top: 16px;
	padding-bottom: 24px;
	margin-bottom: 60px;
}

.namaz .countdown {
	font-size: 130%;
	font-weight: 600;
}


/* Fast */

.fast {
	padding-top: 20px;
	padding-bottom: 24px;
	margin-bottom: 20px;
}


/* Current Date */

.current-date {
	width: 100%;
	display: flex;
	gap: 25px;
	font-size: 17px;
	border-bottom: 1px solid var(--gray-color-45);
	padding-bottom: 16px;
	margin-bottom: 35px;
}

.current-date dl {
	width: auto;
	margin: 0;
}

.current-date .gregorian {
	text-align: left;
	margin-right: auto;
}

.current-date .hijri {
	text-align: right;
	margin-left: auto;
}

.current-date dt {
	display: block;
	white-space: nowrap;
	color: var(--gray-color-110);
	margin-bottom: 5px;
}

.current-date dd {
	display: block;
	color: var(--black-color);
	margin: 0;
}


/* Clock */

.clock {
	position: relative;
	width: 250px;
	height: 250px;
	border: 1px solid var(--black-color);
	border-radius: 50%;
	margin: 45px auto;
}

.clock span {
    z-index: 2;
	position: relative;
	display: block;
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	margin-top: 65px;
}

.clock .hands,
.clock .markers,
.clock .hands div,
.clock .markers div {
    position: absolute;
    top: 50%;
    left: 50%;
	width: 250px;
	height: 250px;
	border-radius: 50%;
	pointer-events: none;
	margin-top: -125px;
    margin-left: -125px;
}

.clock .hands {
    z-index: 3;
}

.clock .hands .hours, 
.clock .hands .minutes, 
.clock .hands .seconds {
    transform: rotate(var(--angle));
}

.clock .hands .hours:before, 
.clock .hands .minutes:before, 
.clock .hands .seconds:before {
	content: "";
    position: absolute;
}

.clock .hands .hours:before {
	top: 65px;
	left: 50%;
	background-color: var(--text-color);
	width: 6px;
    height: 65px;
	margin-left: -3px;
}

.clock .hands .hours:after {
	content: "";
	top: 50%;
	left: 50%;
	position: absolute;
	background-color: var(--text-color);
	width: 16px;
    height: 16px;
	display: block;
	border-radius: 50%;
	margin-top: -8px;
	margin-left: -8px;
}

.clock .hands .minutes:before {
	top: 42px;
	left: 50%;
	background-color: var(--text-color);
	width: 6px;
    height: 88px;
	margin-left: -3px;
}

.clock .hands .seconds:before {
	top: 45px;
	left: 50%;
	background-color: var(--red-color-accent);
	width: 2px;
    height: 105px;
	margin-left: -1px;
}

.clock .hands .seconds:after {
	content: "";
	top: 50%;
	left: 50%;
	position: absolute;
	background-color: var(--red-color-accent);
	width: 6px;
    height: 6px;
	display: block;
	border-radius: 50%;
	margin-top: -3px;
	margin-left: -3px;
}

.clock .markers {
    z-index: 2;
}

.clock .markers div:nth-child(1) {
	transform: rotate(30deg);
}

.clock .markers div:nth-child(2) {
	transform: rotate(60deg);
}

.clock .markers div:nth-child(3) {
	transform: rotate(90deg);
}

.clock .markers div:nth-child(4) {
	transform: rotate(120deg);
}

.clock .markers div:nth-child(5) {
	transform: rotate(150deg);
}

.clock .markers div:nth-child(6) {
	transform: rotate(180deg);
}

.clock .markers div:before,
.clock .markers div:after {
	content: "";
    position: absolute;
    top: 50%;
	background-color: var(--gray-color-80);
    width: 10px;
    height: 4px;
	border-radius: 2px;
	margin-top: -2px;
}

.clock .markers div:before {
    left: 20px;
}

.clock .markers div:after {
    right: 20px;
}

.clock .chart,
.clock .chart:after {
    position: absolute;
	border-radius: 50%;
}

.clock .chart {
	z-index: 1;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
	background: conic-gradient(var(--gray-color-45) var(--end-angle), var(--white-color) 0);
	transform: rotate(var(--start-angle));
}

.clock.attention .chart {
	background: conic-gradient(var(--red-color-ghost) var(--end-angle), var(--white-color) 0);
}

.clock .night-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 270px;
    height: 270px;
    pointer-events: none;
    transform: rotate(var(--angle));
    margin-top: -135px;
    margin-left: -135px;
}

.clock .night-marker:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    background-color: var(--text-color);
    width: 2px;
    height: 2px;
    border-radius: 2px;
    transform: translateX(-50%);
}

.clock .night-marker:after {
    content: attr(data-label);
    position: absolute;
    top: -20px;
    left: 50%;
	color: var(--text-color);
    font-size: 11px;
	font-weight: 500;
    transform: translateX(-50%) rotate(calc(var(--angle) * -1));
}


/* Prayer Schedule */

.prayer-schedule {	
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	overflow: hidden;
	padding-bottom: 10px;
}

.prayer-schedule::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.prayer-schedule .prayer-item {
	min-width: 114px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; 
	font-weight: 500;
	text-align: center;
}

.prayer-schedule .prayer-item .prayer-name {
	display: block;
	color: var(--black-color);
    font-size: 17px;
	font-weight: 500;
	line-height: 1.2;
}

.prayer-schedule .prayer-item .prayer-time {
	position: relative;
	display: block;
	font-size: 21px;
	line-height: 1.2;
	font-weight: 500;
	border-top: 1px solid var(--gray-color-80);
	padding-top: 8px;
	margin-top: 20px;
}

.prayer-schedule .prayer-item.current-prayer .prayer-name,
.prayer-schedule .prayer-item.current-prayer .prayer-time {
	color: var(--primary-color-accent);
}

.prayer-schedule .prayer-item .prayer-time:after {
	content: "";
	position: absolute;
	top: -13px;
	left: 50%;
	background-color: var(--gray-color-80);
	width: 1px;
	height: 12px;
	display: block;
}

.prayer-schedule .prayer-item.current-prayer .prayer-time:after {
	background-color: var(--primary-color-accent);
}

.prayer-schedule .prayer-item.js-current .prayer-time:before {
	content: "";
	z-index: 2;
	position: absolute;
	top: -1px;
	left: 50%;
	background-image: repeating-linear-gradient(90deg, var(--gray-color-80) 0 10px, var(--white-color) 10px 18px);
	background-size: 28px 1px;
	background-repeat: repeat-x;
	width: 100%;
	height: 1px;
	opacity: 1;
	pointer-events: none;
	animation: dash 1s linear infinite;
}

.prayer-schedule .prayer-item.js-current:last-child .prayer-time:before {
	width: 50%;
}

.prayer-schedule .prayer-item.js-current.js-current-from-start .prayer-time:before {
	left: 0;
	width: 50%;
}

@keyframes dash {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 28px 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	
	.prayer-schedule .prayer-item.js-current .prayer-time:before {
		animation: none;
	}
	
}


/* Additional Prayers */

.additional-prayers {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
}

.additional-prayers .add-card {
	position: relative;
	background-color: var(--white-color);
	min-width: 260px;
}

.additional-prayers .add-card .add-card-title {
	font-size: 21px;
	font-weight: 600;
	margin-bottom: 15px;
}

.additional-prayers .add-card p {
	font-size: 18px;
	white-space: normal;
	margin-bottom: 35px;
}


/* Links */

.subpage-links li {
    display: block;
}

.subpage-links li a {
	position: relative;
    display: block;
	color: var(--text-color);
	font-size: inherit;
	font-weight: 500;
	line-height: 1.5;
	border-bottom: 1px solid var(--gray-color-55);
	padding-top: 22px;
	padding-right: 34px;
	padding-bottom: 22px;
}

.subpage-links li a:before {
	content: "";
	position: absolute;
	top: 25px;
	right: 0;
	background-position: -96px -48px; 
	width: 24px;
	height: 24px;
	display: block;
	opacity: .8;
}

.subpage-links li:last-child a {
	border-bottom: none;
}

.subpage-links li a:hover {
	color: var(--primary-color-hover);
}


/* Current Settings */

.current-settings {
	margin-top: 30px;
	margin-bottom: 60px;
}

.current-settings .item {
	display: flex;
    justify-content: space-between; 
    align-items: center;
	color: var(--text-color);
	font-size: inherit;
	font-weight: 500;
	border-bottom: 1px solid var(--gray-color-55);
	padding-top: 22px;
	padding-bottom: 22px;
}

.current-settings .item:last-child {
	border-bottom: none;
}

.current-settings .value {
	display: block;
	color: var(--text-color);
    font-size: inherit;
    font-weight: 500;
	line-height: 1.5;
	margin-right: auto;
}

.current-settings .value .badge {
    background-color: var(--green-color-accent);
	display: inline-block;
    vertical-align: middle;
    cursor: help;
	color: #fff;
    font-size: 12px;
	line-height: 1;
	font-weight: 700;
	text-transform: uppercase;
	border-radius: 5px;
	padding: 6px 5px 5px;
	margin-top: -3px;
}

.current-settings .value .badge.is-warning {
    background-color: var(--red-color-accent);
}

.current-settings .button-link {
    background: none;
    display: block;
    cursor: pointer;
	white-space: nowrap;
    font-family: inherit;
    color: var(--text-color);
    font-size: 14px;
	font-weight: 400;
    border: none;
	border-bottom: 1px dashed var(--gray-color-65);
    padding: 0;
    margin-left: 40px;
}

.current-settings .button-link:hover {
    color: var(--primary-color-hover);
	border-color: var(--primary-color-hover);
}


/* Prayer Time Ranges */

.prayer-time-ranges {
    margin-top: 30px;
}

.prayer-ranges-table {
    width: 100%;
}

.prayer-ranges-table tr {
	border-bottom: 1px solid var(--gray-color-55);
}

.prayer-ranges-table tr:last-child {
	border-bottom: none;
}

.prayer-ranges-table th,
.prayer-ranges-table td {
	position: relative;
    vertical-align: top;
    text-align: left;
	border: none;
}

.prayer-ranges-table .name-cell {
	font-size: 21px;
    font-weight: 600;
}

.prayer-ranges-table .note-cell {
    display: block;
	font-size: 18px;
}

.prayer-ranges-table .label-cell time {
	position: relative;
	font-size: 21px;
    line-height: 1.2;
    font-weight: 500;
	white-space: nowrap;
}

.prayer-ranges-table td.label-cell.--start {
	text-align: right;
}

.prayer-ranges-table .label-cell.--end {
	padding-left: 30px;
}

.prayer-ranges-table .label-cell.--end time::before {
	content: "";
	background-color: var(--gray-color-90);
	width: 20px;
	height: 2px;
	display: inline-block;
	vertical-align: middle;
	margin-left: -24px;
}


/* Прогресс-бар */

.prayer-progress {
	position: relative;
    width: 100%;
	max-width: 130px;
    height: 8px;
    background-color: var(--gray-color-50);
    overflow: hidden;
	border-radius: 3px;
	margin-top: 12px;
}

.prayer-progress::after {
    content: '';
	z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        var(--gray-color-60) 10px,
        var(--gray-color-60) 20px
    );
    background-size: 28px 28px;
    animation: barberpole 1s linear infinite;
    border-radius: 2px;
}

@keyframes barberpole {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 28px 0;
    }
}

.prayer-progress .--progress-bar {
    position: relative;
    z-index: 2;
    background-color: var(--green-color-accent);
    height: 100%;
    transition: width 1s linear;
	border-radius: 0 3px 3px 0;
}


/* Description */

.-description {
	padding-top: 30px;
	padding-bottom: 30px;
}


/* Prayer Timetable */

.prayer-timetable {
	position: relative;
	width: 100%;
	margin-top: 20px;
	margin-bottom: 35px;
}

.prayer-timetable table,
.prayer-timetable tr {
	display: block;
}

.prayer-timetable tbody {
	display: grid;
	grid-template-columns: repeat(3, 1fr); 
	gap: 30px; 
}

.prayer-timetable tr {
	padding-top: 10px;
	padding-bottom: 14px;
}

.prayer-timetable tr td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-color);
	font-size: 17px;
    font-weight: 500;
	border-bottom: 1px solid var(--gray-color-45);
    padding: 6px 0;
}

.prayer-timetable tr td:first-child {
	display: block;
	border: none;
	padding-bottom: 20px;
}

.prayer-timetable tr td:last-child {
	border: none;
}

.prayer-timetable .day-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
    font-size: 21px;
	font-weight: 600;
}

.prayer-timetable .day-head .today-label {
	background-color: var(--primary-color-accent);
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	border-radius: 5px;
	padding: 4px 7px;
}

.prayer-timetable .hijri-date {
	display: block;
	font-size: 15px;
	font-weight: 400;
	margin-top: 10px;
}
	
.prayer-timetable tr td:before {
	content: attr(data-name);
}

.prayer-timetable time {
	font-size: 19px;
}

.prayer-timetable .icon:before {
    display: inline-block;
	vertical-align: middle;
	margin-right: 14px;
}


/* ACTION BUTTONS */

.action-buttons {
    display: flex;
	flex-wrap: wrap;
}


/* NAMAZ SETTINGS */

.settings .radio .name {
    font-size: 18px;
}

.settings .radio .info {
	display: block;
	color: var(--gray-color-80);
	font-size: 14px;
	margin-top: 5px;
	padding-left: 32px;
}

.settings .radio .info span {
    display: inline-block;
    margin-right: 20px;
}

.settings .radio .info span:last-child {
    margin-right: 0;
}

.settings .radio .info span:before {
    content: attr(data-name);
}


/* QA */

.qa {
	background-color: var(--white-color);
	border: 1px solid var(--gray-color-80);
	border-radius: var(--radius);
}


/* Team */

.team { 
	background-color: var(--white-color);
	border: 1px solid var(--gray-color-80);
	border-radius: var(--radius);
}


/* Map */

.map {
	position: relative;
	height: 95vh;
	min-height: 450px;
	background-color: var(--gray-color-40);
	overflow: hidden;
	border-radius: var(--radius);
	margin-top: 35px;
	margin-bottom: 35px;
}

.map:not(.leaflet-fade-anim):after {
    content: "";
    position: absolute;
    top: 0;
	left: -150%;
	background: linear-gradient(90deg, transparent, var(--light-color-medium), transparent);
    width: 100%;
    height: 100%;
    display: block;
    transform: translateX(-100px);
    animation: loading 1.5s infinite;
}

@keyframes loading {
	to {
		left: 150%;
	}
}

.map .find-location {
	z-index: 800;
	position: absolute;
	top: 100px;
	left: 10px;
	background-color: var(--white-color);
	width: 36px;
	height: 36px;
	opacity: 0;
	box-shadow: 0 1px 2px rgb(60 60 60 / 30%), 0 1px 3px 1px rgb(60 60 60 / 15%);
}

.map.leaflet-fade-anim .find-location {
	opacity: 1;
}


/* Mosques */

.map.mosques .mosque-popup {
    min-width: 200px;
}

.map.mosques .mosque-popup .name {
	display: block;
    color: var(--text-color);
    font-size: 16px;
	font-weight: 500;
	margin-bottom: 6px;
}

.map.mosques .mosque-popup .address {
    display: block;
    font-size: 13px;
    color: var(--gray-color-90);
	margin-bottom: 6px;
}

.map.mosques .mosque-popup .distance {
	display: block;
    color: var(--blue-color-accent);
    font-size: 11px;
}

.map.mosques .mosque-marker,
.map.mosques .user-marker {
	background-color: transparent;
	border: none;
    transition: transform 0.2s ease;
}

.map.mosques .mosque-marker:hover {
    transform: scale(1.1);
}

.map.mosques .mosque-marker::before,
.map.mosques .user-marker::before {
    content: '';
    display: block;
    width: 26px;
    height: 26px;
	border: 6px solid #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 1px 3px 1px rgb(0 0 0 / 15%);
}

.map.mosques .mosque-marker::before {
	background-color: var(--orange-color-accent);
}

.map.mosques .user-marker::before {
	background-color: var(--red-color-accent);
}


/* Qibla */

.map.qibla .marker {
	position: relative;
	width: 70px;
	height: 70px;
}

.map.qibla .marker:after {
	content: "";
    position: absolute;
    left: 0;
    top: 0;
	width: 70px;
	height: 70px;
	display: block;
	border: 18px solid var(--red-color-accent);
	border-radius: 50%;
	border-bottom-right-radius: 0;
	transform: rotate(45deg);
}

.map.qibla .marker:before {
    content: "";
	z-index: 1;
    position: absolute;
    left: 0;
    top: 0;
	border: 18px solid var(--red-color-accent);
	width: 70px;
	height: 70px;
	border-radius: 50%;
}


/* COMPASS */

.compass {
	position: relative;
	background-color: var(--gray-color-35);
	width: 290px;
	height: 290px;
	overflow: hidden;
	border-radius: 50%;
	margin: 50px auto;
}

.compass .arrow {
	z-index: 3;
	position: absolute;
	top: 0;
	left: 50%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 20px 46px 20px;
	border-color: transparent transparent var(--red-color-accent) transparent; 
	transition: border-color 0.5s ease;
	transform: translate(-50%, 0);
}

.compass .arrow.current {
	border-color: transparent transparent var(--green-color-accent) transparent; 
}

.compass .arrow:after {
	content: attr(data-current-angle);
	position: absolute;
	top: 50px;
	left: 50%;
    font-size: 15px;
    color: var(--text-color);
    font-weight: 500;
    text-transform: uppercase;
	transform: translate(-50%, 0);
}

.compass .scale,
.compass .angle {
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.compass .scale {
	z-index: 1;
	background-color: var(--gray-color-35);
	width: 266px;
	height: 266px;
	transition: transform 0.1s ease-out;
}

.compass .scale div {
    position: absolute;
    top: 50%;
    left: 50%;
	background-color: var(--gray-color-60);
    width: 2px;
    height: 100%;
    margin-top: -50%;
	margin-left: -1px;
}

.compass .scale div:nth-child(1),
.compass .scale div:nth-child(7) {
	background-color: transparent;
}

.compass .scale div:nth-child(4),
.compass .scale div:nth-child(10) {
	background-color: var(--heading-color);
}

.compass .scale div:nth-child(1) {
	transform: rotate(0deg);
}

.compass .scale div:nth-child(2) {
	transform: rotate(15deg);
}

.compass .scale div:nth-child(3) {
	transform: rotate(30deg);
}

.compass .scale div:nth-child(4) {
	transform: rotate(45deg);
}

.compass .scale div:nth-child(5) {
	transform: rotate(60deg);
}

.compass .scale div:nth-child(6) {
	transform: rotate(75deg);
}

.compass .scale div:nth-child(7) {
	transform: rotate(90deg);
}

.compass .scale div:nth-child(8) {
	transform: rotate(105deg);
}

.compass .scale div:nth-child(9) {
	transform: rotate(120deg);
}

.compass .scale div:nth-child(10) {
	transform: rotate(135deg);
}

.compass .scale div:nth-child(11) {
	transform: rotate(150deg);
}

.compass .scale div:nth-child(12) {
	transform: rotate(165deg);
}


.compass .scale div:before,
.compass .scale div:after {
	content: "";
	position: absolute;
	top: 0;
    left: 0;
	bottom: 0;
	background-color: var(--gray-color-60);
	width: 2px;
	height: 100%;
    display: block;
}

.compass .scale div:before {
	transform: rotate(5deg);
}

.compass .scale div:after {
	transform: rotate(10deg);
}

.compass .scale div:nth-child(18):after {
	content: none;
}

.compass .scale div .n,
.compass .scale div .s,
.compass .scale div .e,
.compass .scale div .w {
	position: absolute;
	left: 50%;
	font-size: 17px;
	color: var(--heading-color);
	font-weight: 600;
	transform: translate(-50%, 0);
}

.compass .scale div .n,
.compass .scale div .e {
	top: -3px;
}

.compass .scale div .s,
.compass .scale div .w {
	bottom: -3px;
}

.compass .scale div .w {
	transform: translate(-50%, 0) rotate(180deg);
}

.compass .angle {
	z-index: 2;
	background-color: var(--white-color);
	width: 78%;
	height: 78%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
	text-align: center;
	border: 12px solid var(--gray-color-35);
}

.compass .angle .degrees {
	position: relative;
	font-size: 58px;
	color: var(--heading-color);
	font-weight: 400;
}

.compass .angle .degrees:after {
	content: "°";
	position: absolute;
	top: 0;
	right: -31px;
}

.compass .angle span {
    display: block;
    opacity: .75;
    font-size: 10px;
    color: var(--text-color);
    font-weight: 500;
    text-transform: uppercase;
}


/* CALENDAR */

.calendar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	text-align: left;
}

.calendar .month {
	max-width: 100%;
	margin-bottom: 35px;
}

.calendar .month h2,
.calendar .month h3 {
	font-weight: 600;
	margin-bottom: 25px;
}

.calendar .month table,
.calendar .month table caption,
.calendar .month table thead,
.calendar .month table tbody {
	width: 100%;
	display: block;
	user-select: none;
}

.calendar .month table {
	text-align: center;
	border: 1px solid var(--gray-color-60);
	border-radius: var(--radius);
	padding: 30px 15px 40px;
}

.calendar .month table caption {
	font-size: 17px;
	font-weight: 500;
	margin-bottom: 20px;
}

.calendar .month table th {
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
}

.calendar .month table tr {
	max-width: 360px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	align-content: stretch;
	white-space: nowrap;
	margin-left: auto;
	margin-right: auto;
}

.calendar .month table tr td,
.calendar .month table tr th {
	width: calc(14.2857% - 4px);
	display: inline-block;
	border: 1px solid transparent;
	padding-top: 3px;
	padding-bottom: 6px;
	margin: 2px;
}

.calendar .month .day {
	border-radius: var(--radius);
}	

.calendar .month .day:hover {
	border-color: var(--gray-color-60);
}

.calendar .month .day.event {
	border-color: var(--green-color-accent);
}		

.calendar .month .day.current {
	background-color: var(--red-color-accent);
	color: #fff;
	border-color: var(--red-color-accent);
}

.calendar .month .day .gregorian {
	font-size: 19px;
	font-weight: 500;
	line-height: 1.2;
}

.calendar .month .day .hijri {
	display: block;
	font-size: 13px;
	font-weight: 500;
}

.calendar .month .events {
	display: block;
	margin-top: 20px;
	padding-right: 20px;
}

.calendar .month .events li {
    display: block;
	font-size: 16px;
	margin-bottom: 15px;
}

.calendar .month .events li span {
	background-color: var(--red-color-accent);
    display: inline-block;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	border-radius: var(--radius);
	padding: 2px 6px 3px;
	margin-right: 5px;
}


/* Ramadan */

.ramadan-options {
	max-width: 1100px;
	padding-top: 18px;
	padding-bottom: 18px;
	margin-bottom: 60px;
}

.ramadan-options .value {
	flex-shrink: 0;
}


/* Sitemap */

.sitemap-cities { 
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
	margin-top: 30px; 	
}

.sitemap-cities .city-group { 
	background-color: var(--gray-color-25);
	height: fit-content;
    break-inside: avoid;
    page-break-inside: avoid;
	border-radius: var(--radius);
	padding: 15px;
}

.sitemap-cities .city-group h3 { 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	margin-bottom: 3px; 
}

.sitemap-cities .city-group p { 
	color: var(--gray-color-70);
	font-size: 17px;
	margin-bottom: 10px; 
}


/* Location Settings */

.location-settings .get-location-button { 
    background: none;
    display: block;
    cursor: pointer;
	white-space: nowrap;
    font-family: inherit;
    font-size: 14px;
    color: var(--primary-color-accent);
    border: none;
	border-bottom: 1px dashed var(--primary-color-accent);
	transition: all 0.2s ease;
    padding: 0;
	margin-top: 7px;
}

.location-settings .get-location-button:hover {
    color: var(--primary-color-hover);
	border-color: var(--primary-color-hover);
}


/* Katex */

.katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0;
}


/* MEDIA */

@media screen and (min-width: 980px)  {
	
	.block {
		padding-left: 26px;
		padding-right: 26px;
	}
	
	.hero {
		padding-top: 50px;
		padding-bottom: 50px;
	}
	
	.hero .columns .column {
		width: 50%;
	}

	.hero .columns .column.left {
		padding-right: 50px;
	}
	
	.hero .columns .column.right {
		padding-left: 50px;
	}
	
	.subpage ul li {
		font-size: 19px;
		margin-right: 32px;
	}
	
	.cities {
		margin-left: -12px;
		margin-right: -12px;
	}
	
	.cities .city {
		width: calc(33.3333% - 24px);
		display: inline-block;
		vertical-align: top;
		margin-left: 12px;
		margin-right: 12px;
		margin-bottom: 24px;
	}
	
	.additional-prayers .add-card {
		padding-top: 24px;
		padding-bottom: 15px;
	}
	
	.prayer-ranges-table th,
	.prayer-ranges-table td {
		padding: 19px 0;
	}

	.prayer-ranges-table th {
		background-color: var(--white-color);
		color: var(--black-color);
		font-size: 17px;
		font-weight: 500;
		white-space: nowrap;
	}
	
	.prayer-ranges-table .name-cell,
	.prayer-ranges-table .note-cell {
		padding-right: 60px;
	}
	
	.prayer-ranges-table .note-cell {
		padding-top: 21px;
	}
	
	.prayer-ranges-table th.label-cell.--start,
	.prayer-ranges-table th.label-cell.--end {
		text-align: center;
	}

	.prayer-ranges-table .label-cell.--end {
		padding-left: 30px;
	}
	
	.prayer-ranges-table .label-cell.--start {
		border-left: 1px solid var(--gray-color-55);
		padding-left: 20px;
	}
	
	.-description {
		font-size: 18px;
	}
	
	.action-buttons button {
		margin-right: 20px;
	}
	
	.calendar {
		margin-left: -10px;
		margin-right: -10px;
	}
	
	.calendar .month {
		width: calc(50% - 20px);
		display: inline-block;
		vertical-align: top;
		margin-left: 10px;
		margin-right: 10px;
	}
		
}


@media screen and (min-width: 1359px)  {
	
	.calendar {
		margin-left: -20px;
		margin-right: -20px;
	}
	
	.calendar .month {
		width: calc(50% - 40px);
		margin-left: 20px;
		margin-right: 20px;
	}
	
}


@media screen and (min-width: 1440px)  {
	
	.cities .city {
		width: calc(25% - 24px);
	}
	
	.calendar .month {
		width: calc(33.3333% - 40px);
	}
	
	.prayer-timetable.big-screen-4 tbody {
		grid-template-columns: repeat(4, 1fr); 
	}
	
}


@media screen and (max-width: 979px) {
	
	.block {
		padding-left: 22px;
		padding-right: 22px;
	}

	.hero {
		padding-top: 30px;
		padding-bottom: 30px;
	}
	
	.hero .columns .column {
		width: 100%;
	}

	.hero .columns .column.left {
		padding-bottom: 50px;
	}
	
	.hero .columns .column img {
		width: 100%;
		max-width: 578px;
	}
	
	.subpage ul li {
		font-size: 17px;
		margin-right: 22px;
	}
	
	.cities {
		margin-left: -10px;
		margin-right: -10px;
	}
	
	.cities .city {
		width: calc(50% - 20px);
		display: inline-block;
		vertical-align: top;
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 20px;
	}
	
	.current-settings .value {
		font-size: 21px;
	}
	
	.additional-prayers {
		grid-template-columns: 1fr;
		gap: 25px;
	}
	
	.additional-prayers .add-card {
		padding-top: 18px;
		padding-bottom: 14px;
	}
	
	.prayer-ranges-table {
		display: block;
	}

	.prayer-ranges-table thead {
		display: none;
	}

	.prayer-ranges-table tbody {
		display: block;
	}

	.prayer-ranges-table tbody tr {
		display: flex;
		flex-wrap: wrap;
		padding-top: 17px;
		padding-bottom: 20px;
	}

	.prayer-ranges-table td {
		padding-top: 5px;
		padding-bottom: 7px;
	}

	.prayer-ranges-table .name-cell,
	.prayer-ranges-table .note-cell {
		flex: 1 1 100%;
	}
	
	.prayer-ranges-table .name-cell {
		font-size: 22px;
	}
	
	.prayer-ranges-table .note-cell {
		margin-bottom: 10px;
	}
	
	.prayer-ranges-table .label-cell {
		position: relative;
		width: auto;
		flex: 0 0 auto;
	}
	
	.prayer-timetable tbody {
		grid-template-columns: repeat(2, 1fr); 
		gap: 20px; 
	}
	
	.action-buttons {
		justify-content: center;
	}
	
	.action-buttons .print,
	.action-buttons .share {
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 15px;
	}
	
	.calendar .month {
		width: 100%;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	
    .sitemap-cities {
        grid-template-columns: repeat(2, 1fr);
    }
	
}


@media screen and (max-width: 640px) {
	
	.current-settings .item {
        flex-direction: column; 
        align-items: flex-start; 
        gap: 12px;
    }

    .current-settings .item .button-link {
        margin-top: 10px; 
		margin-left: 0;
    }
	
	.cities {
		margin-left: 0;
		margin-right: 0;
	}
	
	.cities .city {
		width: 100%;
		display: block;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 15px;
	}
	
	.current-date {
		font-size: 16px;
	}
	
    .sitemap-cities {
        grid-template-columns: 1fr;
        gap: 20px;
    }
	
}


@media screen and (max-width: 540px) {
	
	.prayer-timetable tbody {
		grid-template-columns: 1fr; 
		gap: 25px;
	}
	
}


@media screen and (max-width: 480px) {
	

	
}


@media screen and (max-width: 420px) {
	
	.current-date {
		gap: 10px;
		font-size: 15px;
	}
	
	.prayer-schedule .prayer-item .prayer-name {
		font-size: 16px;
	}
	
	.place-meta .place-meta-text {
		font-size: 16px;
	}

	.place-meta .place-meta-text:before {
		top: 0;
	}
	
	.prayer-ranges-table .note-cell {
		font-size: 16px;
	}
	
}


@media screen and (max-width: 360px) {
	
	.clock {
		width: 210px;
		height: 210px;
	}

	.clock .hands,
	.clock .markers,
	.clock .hands div,
	.clock .markers div {
		width: 210px;
		height: 210px;
		margin-top: -105px;
		margin-left: -105px;
	}
	
	.clock .hands .hours:before {
		height: 35px;
	}

	.clock .hands .minutes:before {
		height: 58px;
	}

	.clock .hands .seconds:before {
		height: 75px;
	}

	.clock .night-marker {
		width: 230px;
		height: 230px;
		margin-top: -115px;
		margin-left: -115px;
	}
	
	.prayer-schedule .prayer-item {
		min-width: 104px;
	}
	
    .prayer-schedule .prayer-item {
        min-width: 96px;
    }
	
}