/* td {
	border: 1px dotted #999;
} */

html {
	scroll-behavior: smooth;
}
/* ------------------------------------ LEFT NAVIGATION MENU ------------------------------------ */
#leftNavOpenButton{
	cursor: pointer;
	position: fixed;
	left:0;
	top:315px;
	text-align: center;
	background-color: #031014DD;
	padding: 4px;
	border: 2px solid;
	border-radius: 0px 12px 12px 0px;
	overflow: hidden;
	z-index: 100;
	transition: 0.2s;
	width: 40px;
}
#leftNavOpenButton:hover {
	background-color: #124054; /*#555;*/
}
.sidenav {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	background-color: #111111EE;
	overflow-x: hidden;
	padding-top: 20px; 
	transition: 0.2s; 
}
.sidenav a {
	padding: 0px 12px 0px 12px;
	margin: 3px auto 2px auto;
	text-decoration: none;
	font-size: 0.875rem;
	color: #44b3e3; /*#AAAACC;*/
	display: block;
	transition: 0.3s;
}
.sidenav a:hover {
	color: #FFFFFF;
}
.sidenav .sidenavseasons{
	margin-top: 5px;
	margin-bottom: 8px;
	padding-top: 3px;
	padding-bottom: 3px;
	line-height: 1.5;
	text-align:center;
	font-size: 0.875rem;
	margin-left: auto;
	margin-right: auto;
	border-top: 1px solid;
	border-bottom: 1px solid;
	width: max-content;
}
.sidenav .sidenavseasons a{
	padding: 0px 8px 0px 8px;
	display:inline;
}
.sidenav .closebtn {
	position: absolute;
	top: 0;
	right: 10px;
	font-size: 36px;
	margin-left: 50px;
}
@media screen and (max-height: 450px) {
	.sidenav {padding-top: 15px;}
	.sidenav a {font-size: 10px;}
}

/* ---------------------------------------- SPOILER TAGS ---------------------------------------- */
.spoiler{
	
}
.spoilerTag{
	font-weight: bold;
	color: orange;
	cursor: pointer;
	white-space: nowrap;
}
.spoilerTag:hover{
	background-color: #845600EE;
	border-radius: 3px;
}
.spoilerContent{
	filter: blur(6px);
	color: #FFE1CA;
	transition: 0.5s;
	user-select: none;
	pointer-events: none;
}

/* ----------------------------------------------------------------*/
.content * {
	box-sizing: border-box;
}
.characterInfoCard {
	position: absolute;
	top: 0;
	right: 0;
	border:2px solid white;
	padding: 3px;
	margin-right: 10px;
	margin-bottom: 10px;
	font-size: 1rem;
	z-index: 10;
	table {
		border-spacing: 3px 6px;
	}
}
.characterInfoCard td{
	padding-left: 3px;
	padding-right: 3px;
	background-color: #222;
	padding: 3px;
}
.characterInfoCard th{
	font-size: 1.125rem;
	background-color: #444;
}


/* ----------------------------------------------------------------*/
.characterTimeline {
	position: relative;
	width: 90%;
	margin: auto;
}

/* The vertical line */
.characterTimeline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 4px;
	background: #E47545;
	transform: translateX(-50%);
}

/* Timeline items */
.timeline-item {
	position: absolute;
	width: 50%;
	padding: 20px 20px;
	z-index: 2;
}

/* Dot on the line */
.timeline-item:not(.left.dual)::before {
	content: "";
	position: absolute;
	top: 16px;
	width: 16px;
	height: 16px;
	background: #E47545;
	background-clip: padding-box; 
	border: 8px solid #181818B0;
	border-radius: 50%;
	z-index: 3;
}

/* Or no dot on the line */

.timeline-item.range-event::before {
	display: none;
}

.timeline-item.range-event .timelineItemContent {
	border-color: var(--highlight-line, #E47545);
	background:
		linear-gradient(
			90deg,#18181888 75%,var(--highlight-color, rgba(228, 117, 69, 0.18)));
}

/*.timeline-item.range-event .timelineItemContent::before {
	background: var(--highlight-line, #E47545);
	opacity: 0.8;
	height: 2px;
	border-top: 1px dashed var(--highlight-line, #E47545);
}*/


.timeline-item.range-event .timelineItemDate {
	color: var(--highlight-line, #D0D0D0);
	border: 1px solid var(--highlight-line, #E47545);
}
.timeline-item.range-event.left .timelineItemDate {
	right: -110px;
}.timeline-item.range-event.right .timelineItemDate {
	left: -110px !important;
}

/* Left items */
.timeline-item.left {
	left: 0;
	text-align: right;
}

.timeline-item.left::before {
	right: -16px;
}
.timeline-item.range-event.left {
	padding-right: 32px;
}
.timeline-item.range-event.right {
	padding-left: 32px;
}
/* Right items */
.timeline-item.right {
	left: 50%;
}

.timeline-item.right::before {
	left: -16px;
}

/* Content box */
.timelineItemTitle {
	font-size: 1.25rem;
	font-weight: bold;
	margin-bottom: 4px;
}
.timelineItemContent {
	position: relative;
	line-height:1.1;
	background: #18181888;
	padding: 0px;
	border: 1px dotted #909090;
	border-radius: 6px;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	padding: 6px 8px;
	z-index: 4;
}
/* Dot connector */
.timeline-item.left .timelineItemContent::before {
	content: "";
	position: absolute;
	top: var(--connector-y);
	right: -20px;
	width: 20px;
	height: 2px;
	background: #E47545;
	z-index: 5;
}
.timeline-item.right .timelineItemContent::before {
	content: "";
	position: absolute;
	top: var(--connector-y);
	left: -20px;
	width: 20px;
	height: 2px;
	background: #E47545;
	z-index: 5;
}

.timeline-item.left.dual .timelineItemContent {
	transform: translateY(-24px);
}
.timeline-item.left.dual .timelineItemContent::before {
	transform: translateY(-14px) rotate(45deg);
	width: 24px;
}
.timeline-item.right.dual .timelineItemContent {
	transform: translateY(24px);
}
.timeline-item.right.dual .timelineItemContent::before {
	transform: translateY(14px) rotate(45deg);
	width: 24px;
}
.timeline-item.range-event.left .timelineItemContent::before,
.timeline-item.range-event.right .timelineItemContent::before {
	content: "{";
	position: absolute;
	top: var(--connector-y);
	width: 20px;
	height: auto;
	background: transparent;
	border: 0;
	color: var(--highlight-line, #E47545);
	font-size: 4rem;
	font-weight: 400;
	line-height: 0.75;
	opacity: 0.9;
	z-index: 5;
	text-align: center;
}

.timeline-item.range-event.right .timelineItemContent::before {
	left: -20px;
	right: auto;
	transform: translateY(-50%) scaleX(-1);
}

.timeline-item.range-event.left .timelineItemContent::before {
	right: -20px;
	left: auto;
	transform: translateY(-50%);
}

.timelineItemContent img {
	max-width: 100%;
	margin-top: 10px;
	border-radius: 4px;
}

.timelineItemDate {
	position: absolute;
	top: 22px;
	font-size: 1rem;
	font-weight: 600;
	color: #D0D0D0;
	background: #282828;
	padding: 0px 6px;
	border-radius: 4px;
	white-space: nowrap;
}
.timeline-item.align-bottom .timelineItemDate {
	bottom: 22px;
	top: auto; 
}

/* Left side dates*/
.timeline-item.left .timelineItemDate {
	right: -70px;
}
/* Right side dates */
.timeline-item.right:not(.dual) .timelineItemDate {
	left: -70px;
}
/* Right side .dual dates */
.timeline-item.right.dual .timelineItemDate{
	left: 20px;
}

/*--------------- Minor timeline items --------------*/

.timeline-item.minor::before {
	display: none;
}

.timeline-item.minor .timelineItemContent {
	border: 0;
	box-shadow: none;
	background: transparent;
	padding: 0 8px;
	font-size: 1rem;
	line-height: 1;
	color: #A0A0A0;
	transform: translateY(3px);
}

/* Make the connector read as the dash/crossbar */
.timeline-item.minor.left .timelineItemContent::before,
.timeline-item.minor.right .timelineItemContent::before {
	top: var(--connector-y);
	width: 28px;
	height: 2px;
	background: #A0A0A0;
	opacity: 0.85;
}

.timeline-item.minor.left .timelineItemContent::before {
	right: -34px;
}

.timeline-item.minor.right .timelineItemContent::before {
	left: -34px;
}

.timeline-item.minor .timelineItemDate {
	background: transparent;
	padding: 0;
	color: #A0A0A0;
}




.timeline-image {
	position: absolute;
	width: 35%;
	text-align: right;
	z-index: 1;
	transform: translateX(var(--offsetx, 0px)) translateY(var(--offsety, 0px));
	img {
		max-width: 450px;
		border-radius: 8px;
		border: 2px solid #444;
		box-shadow: 0 4px 12px rgba(0,0,0,.95);
	}
	@media (max-width: 1250px) {
		display: none;
	}
}

.timeline-image.left {
	left: 0;
	padding-right: 50px;
}

.timeline-image.right {
	left: 50%;
	padding-left: 80px;
}

.year-marker {
	position: absolute;
	text-align: center;
	z-index: 2;
	left: 50%;
	transform: translateX(-50%);
}

.year-marker span {
	display: inline-block;
	background: #181818;
	padding: 6px 14px;
	font-weight: 700;
	letter-spacing: 1px;
	border-radius: 20px;
	border: 2px solid #E47545;
	z-index: 2;
}
.timeline-break {
	position: absolute;
	left: 50%;
	transform-origin: top left;
	transform: rotate(-16deg) skewX(-16deg) translate(-50%,-18px);
	text-align: center;
	width: 102px;
	height: 70px;
	margin: 80px auto;
	color: #D0D0D0;
	z-index:2;
	div {
	margin-top: 3px;
		height: 65px;
		padding-top: 12px;
		background-color: #181818;
	}
}
.timeline-break::before,
.timeline-break::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 12px;

	background:
		linear-gradient(135deg, transparent 42%, #E47545 46%, #E47545 54%, transparent 58%) 0 0 / 20px 12px repeat-x,
		linear-gradient(225deg, transparent 42%, #E47545 46%, #E47545 54%, transparent 58%) 10px 0 / 20px 12px repeat-x;
	background-size: 19px 10px;
	background-repeat: repeat-x;
	background-position: 0 0, 10px 0;
}
.timeline-break::before {
	top: 0;
}
.timeline-break::after {
	bottom: 0;
	transform: rotate(180deg);
}


.timeline-range {
	position: absolute;
	padding: 20px 0;
	left: 0;
	right: 0;
	z-index: 0;
}

.timeline-range::before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 26px;
	height: 100%;
	background: var(--highlight-color);
	border-radius: 3px;
	z-index: 0;
}

.range-label {
	position: relative;
	display: inline-block;
	background: var(--highlight-color);
	color: #D0D0D0;
	padding: 6px 12px;
	border-radius: 12px;
	font-weight: 600;
	z-index: 1;
	left: 50%;
	transform: translate(var(--range-label-x, 20px), var(--range-label-y, 40px));
}


.apocryphal{
	color: orange;
}



/* Animation base state */
.timeline-item {
	opacity: 0;
	transition:
		opacity 0.8s ease-out,
		transform 0.8s ease-out;
}

/* Directional slide */

.timeline-item.left {
	transform: translateX(-60px);
}


.timeline-item.right {
	transform: translateX(60px);
}

/* Visible state */

.timeline-item.visible {
	opacity: 1;
	transform: translateX(0);
}



/* ------------ MOBILE ------------- */

@media (max-width: 1000px) {
	.characterInfoCard {
		position: relative;
		top: auto;
		right: auto;
		margin: 0 auto 50px auto;
		width: fit-content;
		max-width: 100%;
		box-sizing: border-box;
		z-index: auto;
	}
	
	.characterTimeline {
		width: 95%;
		clear: both;
	}

	.characterTimeline::before {
		left: 24px;
		transform: none;
	}
	.timeline-item {
		width: 100%;
		padding-left: 60px;
		padding-right: 20px;
		text-align: left;
	}
	.timeline-item.left,
	.timeline-item.right {
		left: 0;
		text-align: left;
		transform: translateX(60px);
	}
	.timeline-item.range-event.right,
	.timeline-item.range-event.left {
		padding-left: 60px;
		padding-right: 20px;
	}
	
	.timeline-item.visible {
		transform: translateX(0);
	}
	
	.timeline-item.left::before,
	.timeline-item.right::before{
		left: 10px;
		right: auto;
	}
	.timeline-item.left .timelineItemContent::before {
		right: auto;
		left: -25px;
	}
	.timeline-item.right .timelineItemContent::before {
		right: auto;
		left: -25px;
	}
	.timeline-item.left.dual .timelineItemContent::before {
		top: auto;
		bottom: -30px;
		transform: translateY(-14px) rotate(135deg);
	}
	
	.timeline-item.range-event.left .timelineItemContent::before,
	.timeline-item.range-event.right .timelineItemContent::before	{
		left: -22px;
		right: auto;
		transform: translateY(-50%) scaleX(-1);
		top: var(--connector-y);
	}
	
	.timeline-item.right.dual .timelineItemContent {
		transform: translateY(0px);
	}
	.timeline-item.left .timelineItemDate,
	.timeline-item.right .timelineItemDate,
	.timeline-item.right.dual .timelineItemDate,
	.timeline-item.right:not(.dual) .timelineItemDate	{
		position: relative;
		display: block;
		top: auto;
		left: auto !important;
		right: auto !important;
		width: fit-content;
		margin: 0 0 8px 0;
		z-index: 6;
	}

	.timelineItemContent {
		margin-top: 0;
	}
	
	.year-marker {
		text-align: left;
		margin-left: 8px;
		width: 100%;
	}

	.year-marker span {
		margin-left: 32px;
	}

	.year-marker::before {
		left: 24px;
	}
	
	.timeline-item.left,
	.timeline-item.right {
		
	}
	.timeline-break {
		left:80px;
		width: fit-content;
		height: fit-content;
		div {
			height: fit-content;
			padding-bottom: 12px;
		}
	}

	
	.timeline-range {
	
	}

	.timeline-range::before {
		left: 26px;
	}

	.range-label {
		display: none;
	}
	
}