/* History Swiper */

#history-swiper {
	position: fixed;
	left: 0;
	bottom: 0;
	max-width: calc(100% - 6 * var(--outer-padding));
	width: 40%;
	pointer-events: none;
	background-color: white;
	box-shadow: 0 0 0.5vh -0.3vh rgba(0, 0, 0, 0.4);
}

#history-swiper .swiper-slide {
	padding: var(--outer-padding) calc(2 * var(--outer-padding));
}


#history-swiper .visibility-button {
	position: absolute;
	top: var(--outer-padding);
	right: calc(2 * var(--outer-padding));
	z-index: 2;
	font-size: 1.3em;
	line-height: 1.3em;
	vertical-align: middle;
	font-weight: 600;
	transform: scale(1.5) rotateX(180deg);
	transition-duration: var(--trans-duration);
}

.history-title {
	font-size: 1.3em;
	line-height: 1.3em;
	vertical-align: middle;
	font-weight: 600;
	border-bottom: 0.1vh solid black;
	padding-bottom: var(--outer-padding);
	margin-bottom: var(--outer-padding);
}

.history-text {
	columns: 2;
	column-gap: var(--outer-padding);
}

#caption-swiper {
	position: fixed;
	bottom: 0;
	left: calc(40% + 0.2vh);
	height: calc(5 * var(--outer-padding));
	background-color: white;
	box-shadow: 0 0 0.5vh -0.3vh rgba(0, 0, 0, 0.4);
	width: calc(100% - 6 * var(--outer-padding) - 40% - 0.2vh);
	padding: var(--outer-padding);
	padding-bottom: 0;
	line-height: 1.3;
}

#caption-swiper::after {
	content: "";
	position: fixed;
	right: -0.2vh;
	bottom: 0;
	width: calc(6 * var(--outer-padding));
	height: calc(5 * var(--outer-padding));
	background-color: white;
	box-shadow: 0 0 0.5vh -0.3vh rgba(0, 0, 0, 0.4);
}

#caption-swiper .swiper-slide ul {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: stretch;
	align-items: stretch;
}

#caption-swiper .swiper-slide li {
	flex: 0 0 50%;
	padding: 0;
	/* margin-right: calc(3*var(--outer-padding)); */
}

#caption-swiper .swiper-slide li .legende {
	height: var(--outer-padding);
	vertical-align: middle;
	width: calc(1.5 * var(--outer-padding));
	margin-right: 1.5em;
}

#caption-swiper .swiper-slide li span {
	display: inline-block;
	vertical-align: middle;
}

#caption-swiper .swiper-slide li span.multiline {
	margin: -1em 0;
}

#map-swiper {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

#the-scrollbar,
#the-scrolldrag {
	border-radius: var(--outer-padding);
}

#the-scrollbar {
	top: var(--outer-padding);
	right: var(--outer-padding);
	width: calc(4 * var(--outer-padding));
	height: calc(100% - 7 * var(--outer-padding));
	background-color: rgba(255, 255, 255, 1);
	box-shadow: 0 0 10vh 0 rgba(0, 0, 0, 0.2);
}

#the-scrollbar[style*="opacity: 0;"] {
	opacity: 1 !important;
	background-color: rgba(255, 255, 255, 0);
	box-shadow: 0 0 10vh 0 rgba(0, 0, 0, 0);
}

#the-scrollbar[style*="opacity: 0;"] #the-scrolldrag {
	background-color: rgba(255, 255, 255, 1);
}

#the-scrolldrag {
	background-color: rgba(255, 255, 255, 0.8);
	box-shadow: 0 0 1vh 0 rgba(0, 0, 0, 0.5);
}

#dates {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-around;
	align-items: center;
}

#dates li {
	border-radius: 100px;
	text-align: center;
	box-shadow: 0 0 0.5vh 0.5vh white;
	line-height: 1em;
	vertical-align: middle;
	background-color: white;
}

#graduations {
	position: absolute;
	top: 4%;
	left: 45%;
	width: 10%;
	height: 92%;
	background: repeating-linear-gradient(to bottom,
			black,
			black 8%,
			transparent 8%,
			transparent 100%);
	background-size: 100% 1.65%;
	background-position: center;
}

/* Map styling */

/* Default country & ocean */

.cls-country {
	text-anchor: middle;
}

/* anchor position */
.bottom-right .cls-town,
.bottom-right .cls-country {
	transform: translate(0.25em, 0.63em);
}

/* Default town*/
.middle-right .cls-town,
.middle-right .cls-country,
.cls-town {
	transform: translate(0.3em, 0.23em);
}


.top-right .cls-town,
.top-right .cls-country {
	transform: translate(0.25em, -0.2em);
	text-anchor: start;
}

.bottom-center .cls-town,
.bottom-center .cls-country {
	text-anchor: middle;
	transform: translate(0, 0.9em);
}

.top-center .cls-town,
.top-center .cls-country {
	text-anchor: middle;
	transform: translate(0, -0.4em);
}

.bottom-left .cls-town,
.bottom-left .cls-country {
	text-anchor: end;
	transform: translate(-0.25em, 0.63em);
}

.middle-left .cls-town,
.middle-left .cls-country {
	text-anchor: end;
	transform: translate(-0.3em, 0.23em);
}

.top-left .cls-town,
.top-left .cls-country {
	text-anchor: end;
	transform: translate(-0.25em, -0.2em);
}

/* circle */
.cls-dot {
	fill: #1d1d1b;
	stroke: #fff;
	stroke-miterlimit: 10;
	stroke-width: 0.132px;
}

/* text */
.cls-town,
.cls-country,
.cls-ocean {
	font-size: 3.5px;
	font-family: 'Zarid';
}

/* towns */
/* .cls-town {
	stroke: #fff;
	paint-order: stroke;
	stroke-width: 0.132px;
	stroke-linecap: round; 
}*/

/* country */
.cls-lign {
	stroke: #1d1d1b;
	stroke-width: 0.283px;
}

.cls-country {
	font-weight: 600;
}

/* seas & oceans */
.cls-ocean {
	opacity: 0.4;
	font-style: oblique;
}

#map-background,
#map-foreground,
#map-swiper img {
	position: fixed;
	top: 50%;
	left: 50%;
	height: 100%;
	width: 100%;
	overflow: visible;
	object-fit: contain;
}


#map-background,
#map-foreground,
#map-swiper img {
	transition-duration: var(--trans-duration);
	transform: translate(calc(-50% - 2.5 * var(--outer-padding)), calc(-50% - 2.5 * var(--outer-padding))) scale(2.8);
}

#map-foreground {
	z-index: 10;
	pointer-events: none;
}

#villes>g {
	transition-duration: var(--trans-duration);
	opacity: 0;
}

#countries {
	opacity: 0;
}

/* show selective map town */
body:has(#year_-900.swiper-slide-active) #villes>g:is(#rome, #byblos, #tyr, #dedan, #ninive, #carthage),
body:has(#year_150.swiper-slide-active) #villes>g:is(#rome, #kairouan, #byzance, #alexandrie, #ctesiphon, #merv, #kaboul),
body:has(#year_600.swiper-slide-active) #villes>g:is(#tolede, #ravenne, #rome, #constantinople, #alexandrie, #jerusalem, #damas, #ctesiphon, #yathrib, #la-mecque),
body:has(#year_720.swiper-slide-active) #villes>g:is(#tolede, #kairouan, #constantinople, #fustat, #jerusalem, #damas, #medine, #la-mecque, #ctesiphon),
body:has(#year_800.swiper-slide-active) #villes>g:is(#cordoue, #aix-la-chapelle, #constantinople, #damas, #bagdad),
body:has(#year_1000.swiper-slide-active) #villes>g:is(#cordoue, #kairouan, #le-caire, #constantinople, #alep, #mossoul, #bagdad, #rayy, #isfahan, #boukhara, #ghazni),
body:has(#year_1100.swiper-slide-active) #villes>g:is(#cordoue, #le-caire, #isfahan, #constantinople, #naples, #mahdia, #jerusalem, ),
body:has(#year_1400.swiper-slide-active) #villes>g:is(#grenade, #venise, #constantinople, #le-caire, #bagdad, #isfahan, #herat),
body:has(#year_1700.swiper-slide-active) #villes>g:is(#marrakech, #fes, #le-caire, #constantinople, #bagdad, #isfahan),
body:has(#year_1930.swiper-slide-active) #villes>g:is(#nouakchott, #alger, #tunis, #tripoli, #le-caire, #suez, #alep, #bagdad, #la-mecque, #mascate, #djibouti-city, #aden, #mogadiscio, #khartoum, #rabat),
body:has(#year_2020.swiper-slide-active) #villes>g:is(#nouakchott, #rabat, #alger, #tunis, #tripoli, #le-caire, #khartoum, #mogadiscio, #moroni, #sanaa, #mascate, #abu-dhabi, #doha, #koweit-city, #bagdad, #riyad, #damas, #beyrouth, #amman, #jerusalem, #djibouti-city, #manama),
body:has(#year_2020.swiper-slide-active) #countries {
	opacity: 1;
}