h1 {
	text-align: center;
}

body {
	margin: 0;
}

body > *:not(#timeline_container) {
	margin: 0 5px;
}

#warning {
	width: 50%;
	text-align: center;
	margin: 1em auto !important;
	border-radius: .5em;
	padding: .5em;
	color: red;
	font-weight: bolder;
	font-size: 1.2em;
}

#warning:before {
	content: "⚠ "
}

#github:before {
	display: inline-block;
	width: 1.1em;
	height: 1em;
	content: ' ';
	background: no-repeat left center url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTgiIGhlaWdodD0iOTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00OC44NTQgMEMyMS44MzkgMCAwIDIyIDAgNDkuMjE3YzAgMjEuNzU2IDEzLjk5MyA0MC4xNzIgMzMuNDA1IDQ2LjY5IDIuNDI3LjQ5IDMuMzE2LTEuMDU5IDMuMzE2LTIuMzYyIDAtMS4xNDEtLjA4LTUuMDUyLS4wOC05LjEyNy0xMy41OSAyLjkzNC0xNi40Mi01Ljg2Ny0xNi40Mi01Ljg2Ny0yLjE4NC01LjcwNC01LjQyLTcuMTctNS40Mi03LjE3LTQuNDQ4LTMuMDE1LjMyNC0zLjAxNS4zMjQtMy4wMTUgNC45MzQuMzI2IDcuNTIzIDUuMDUyIDcuNTIzIDUuMDUyIDQuMzY3IDcuNDk2IDExLjQwNCA1LjM3OCAxNC4yMzUgNC4wNzQuNDA0LTMuMTc4IDEuNjk5LTUuMzc4IDMuMDc0LTYuNi0xMC44MzktMS4xNDEtMjIuMjQzLTUuMzc4LTIyLjI0My0yNC4yODMgMC01LjM3OCAxLjk0LTkuNzc4IDUuMDE0LTEzLjItLjQ4NS0xLjIyMi0yLjE4NC02LjI3NS40ODYtMTMuMDM4IDAgMCA0LjEyNS0xLjMwNCAxMy40MjYgNS4wNTJhNDYuOTcgNDYuOTcgMCAwIDEgMTIuMjE0LTEuNjNjNC4xMjUgMCA4LjMzLjU3MSAxMi4yMTMgMS42MyA5LjMwMi02LjM1NiAxMy40MjctNS4wNTIgMTMuNDI3LTUuMDUyIDIuNjcgNi43NjMuOTcgMTEuODE2LjQ4NSAxMy4wMzggMy4xNTUgMy40MjIgNS4wMTUgNy44MjIgNS4wMTUgMTMuMiAwIDE4LjkwNS0xMS40MDQgMjMuMDYtMjIuMzI0IDI0LjI4MyAxLjc4IDEuNTQ4IDMuMzE2IDQuNDgxIDMuMzE2IDkuMTI2IDAgNi42LS4wOCAxMS44OTctLjA4IDEzLjUyNiAwIDEuMzA0Ljg5IDIuODUzIDMuMzE2IDIuMzY0IDE5LjQxMi02LjUyIDMzLjQwNS0yNC45MzUgMzMuNDA1LTQ2LjY5MUM5Ny43MDcgMjIgNzUuNzg4IDAgNDguODU0IDB6IiBmaWxsPSIjMjQyOTJmIi8+PC9zdmc+Cg==');
	background-size: 1em 1em;
}

#legend {
	overflow: auto;
	padding: 10px 0;
}

#legend dt {
	margin: 0 .1em 0 .5em;
	float: left;
	clear: left;
}

#legend dt span {
	display: inline-block;
	height: 1.5em;
}

#legend dt span.duration {
	width: 1.5em;
}

#legend dd {
	text-align: left;
	margin: 0 .5em 0 .1em;
	float: left;
	word-wrap: break-word;
}

@media all and (min-width: 800px) {
	#legend {
		display: flex;
		flex-wrap: nowrap;
		align-content: stretch;
		width: calc(100% - 10px);
	}

	#legend dd {
		word-wrap: break-word;
		float: none;
		flex-grow: 1;
		flex-shrink: 1;
		flex-basis: auto;
	}

	#legend dt {
		float: none;
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: 0;
	}
}

#filters, #search {
	margin: 1em auto 0;
	padding: 0px 2px 10px;
	border: thin solid;
	border-radius: 10px;
}

#filters {
	display: flex;
	flex-flow:row nowrap;
	justify-content: space-around;
	align-items: baseline;
}

#filters p {
	vertical-align: top;
	text-align: center;
}

#search p,
#suggestions {
	margin: 0;
	padding: 0 0 0 .5em;
	width: calc(100% - 2em);
}

#search p input,
#suggestions li {
	margin: 0;
	width: 100%;
}

#search {
	position: relative;
}

#suggestions {
	position: absolute;
}

#suggestions li {
	padding: 10px;
	cursor: pointer;
	border: black thin solid;
	border-top: none;
	background: #EEE;
}

#suggestions li span {
	display: inline-block;
}

#suggestions li span.conf {
	background: lightblue;
	color: darkblue;
	font-weight: bold;
	padding: 5px;
	margin: 0 5px;
}

#suggestions li span.rank::before { content: "rating: " }
#suggestions li span.field:not(:empty)::before { content: " ; field: " }

#suggestions li span.rank,
#suggestions li span.field {
	color: grey;
}

#suggestions li span.title {
	display:block;
	padding: 5px;
}

#filters p > * {
	width: 100%;
}

#filters select {
	max-height: 45ex;
}

#search p.filter_conf select {
	display: none;
}

#filters p.filter_rank::before {
	content: "CORE/GGS Rankings";
}
#filters p.filter_field::before {
	content: "Field";
}

#search p.filter_conf span::after {
	content: " ×";
	color: grey;
}

#search p.filter_conf span {
	margin: 3px;
	padding: 5px;
	display: inline-block;
	white-space: nowrap;
	cursor: pointer;
	border: black thin solid;
	border-radius: 3px;
}

#search p.filter_conf span.filtered-out {
	opacity: 0.4;
}

#search p.filter_conf button {
	margin: 3px;
}

#confs_wrapper {
	padding-top: 2em;
	clear: both;
	width: 98%;
	margin: 0 auto;
}

#confs {
	overflow-y:auto;
}


img.cfpurl {
	height: 1em;
}

/* hard part: the timeline */
:root {
	--scrollbar-width: 17px;
}

#timeline_container {
	position: relative;
	overflow: hidden;
	height: 30em;
	resize: both;
	width: 100%;
	margin: 0 auto;
	white-space: nowrap;
	line-height: 1.5em;
}

@media only screen and (min-width: 1080px) {
	#timeline_container {
		width: 80%;
		min-width: calc(1080px - var(--scrollbar-width)); /* leave space for page scrollbar */
	}
}


@media only screen and (max-width: 1080px) {
	#months .timeblocks span {
		font-size: small;
	}
}

@media only screen and (max-width: 800px) {
	#months .timeblocks span {
		font-size: 0;
	}
	#months .timeblocks span:first-letter {
		font-size: small;
	}
}

#timeline_header {
	position: absolute;
	overflow: hidden;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	z-index: 1;
}

#timeline {
	position: relative;
	overflow-x: hidden;
	overflow-y: scroll;
	height: calc(100% - 3em);
	width: 100%;
	margin: 3em 0 0;
	padding: 0;
	z-index: 2;
}

#timeline_header p,
#timeline p {
	position: relative;
	width: calc(100% - var(--scrollbar-width));
	margin: 0;
	padding: 0;
}

#timeline_header p span,
#timeline p span {
	display: inline-block;
}

#years,
#years span,
#timeline p,
#timeline p span:not(.tooltip) {
	height: 1.5em;
}

#months {
	height: calc(100% - 1.5em);
	vertical-align: top;
	top: 0;
}

#now {
    top: calc(-100% + 3em);
    height: calc(100% - 3em);
}

#now .timeblocks,
#now .timeblocks span,
#months .timeblocks,
#months .timeblocks span {
	height: 100%;
}

.today {
	width: 0;
	border: #D0D thin solid;
}

span.acronyms {
	width: 11em;
	padding-right: 0.5em;
	text-align: right;
}

.timeblocks {
	width: calc(100% - 11.5em);
	position: relative;
	text-align: center;
}

.timeblocks > span {
	display: inline-block;
	position: absolute;
	top: 0;
	margin: .15em 0;
}

#timeline .timeblocks span > sup.est {
	position: absolute;
}

#years .timeblocks span,
#months .timeblocks span {
	background-color: #eee;
	border-left: black thin solid;
}

#years .timeblocks span:last-child,
#months .timeblocks span:last-child {
	border-right: black thin solid;
}

#years .timeblocks span,
#months .timeblocks span.first {
	border-left: black 2px solid;
}

/* tooltip and aura (aka shadow) */

#timeline .timeblocks span .tooltip {
	visibility: hidden;
	background-color: black;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: .1em .5em;
	font-weight: bold;

	/* Position the tooltip */
	position: absolute;
	z-index: 10;
	top: 100%;
	margin: 0 auto;
}

#timeline .timeblocks span:hover .tooltip {
	visibility: visible;
}

#timeline .timeblocks span:hover {
	box-shadow: 0px 0px 12px 10px #fff;
	border-radius: 5px;
	cursor: default;
}


/* colours and content for coloured parts in timeline */

#timeline span.abstract,
#legend span.abstract {
	background-color: #f55;
}

#timeline span.submit,
#legend span.submit {
	color: #d00;
}

#timeline span.review,
#legend span.review {
	background-color: #d00;
}

/* Handle overlap between a conference and a following review cycle */
#timeline span.conf {
	z-index: 1;
}
#timeline span.conf,
#legend span.conf {
	background-color: #00f;
}

#timeline span.submit,
#timeline span.camera,
#legend span.camera {
	text-align: center;
}

.extrapolated {
	background: #eee;
	color: #333;
}

.extrapolated:after {
	content: "†";
}


/* Loading bouncing ball from https://loading.io/spinner/ball/-bouncing-circle-loading-icon */

@keyframes gear {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-webkit-keyframes gear {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

#loading {
	margin: 0 auto;
	position: absolute;
	bottom: 50%;
	left: calc(50% - 100px);
	-webkit-transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
	transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
	z-index: 3;
}

#loading p {
	text-align: center;
	font-weight: bold;
	background-color: #eee;
}

#gear > div {
	-webkit-transform-origin: 100px 100px;
	transform-origin: 100px 100px;
	-webkit-animation: gear 5s infinite linear;
	animation: gear 5s infinite linear;
	position: relative;
}

#gear div.teeth {
	position: absolute;
	width: 24px;
	height: 192px;
	background: #000;
	left: 100px;
	top: 100px;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

#gear div.teeth:nth-child(1) {
	width: 152px;
	height: 152px;
	border-radius: 50%;
}

#gear div.teeth:nth-child(3) {
	-webkit-transform: translate(-50%, -50%) rotate(30deg);
	transform: translate(-50%, -50%) rotate(30deg);
}

#gear div.teeth:nth-child(4) {
	-webkit-transform: translate(-50%, -50%) rotate(60deg);
	transform: translate(-50%, -50%) rotate(60deg);
}

#gear div.teeth:nth-child(5) {
	-webkit-transform: translate(-50%, -50%) rotate(90deg);
	transform: translate(-50%, -50%) rotate(90deg);
}

#gear div.teeth:nth-child(6) {
	-webkit-transform: translate(-50%, -50%) rotate(120deg);
	transform: translate(-50%, -50%) rotate(120deg);
}

#gear div.teeth:nth-child(7) {
	-webkit-transform: translate(-50%, -50%) rotate(150deg);
	transform: translate(-50%, -50%) rotate(150deg);
}

#gear div#gear_center {
	position: absolute;
	left: 100px;
	top: 100px;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 88px;
	height: 88px;
	background: #eee;
	border-radius: 50%;
}

#gear {
	margin: 0 auto;
	width: 106px !important;
	height: 106px !important;
	-webkit-transform: translate(-53px, -53px) scale(0.53) translate(53px, 53px);
	transform: translate(-53px, -53px) scale(0.53) translate(53px, 53px);
}


/* Error log */

.error_log_container {
	position: fixed;
	top: 0;
	right: 0;
	text-align: right;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	padding: 6px 10px;
	z-index: 3;
	background-color: #eee;
}

#error_log {
	font-size: small;
	width: inherit;
	text-align: left;
}

#error_log .corrected {
	background-color: lightblue;
}

#error_log .ignored {
	background-color: #ff9994;
}

label[for=collapse_errors] {
	position: relative;
	margin-left: 15px;
	font-size: small;
}

label[for=collapse_errors]:before {
	content: "";
	position: absolute;
	top: 2px;
	left: -15px;
	display : inline-block;
	border-top : 5px solid transparent;
	border-left : 5px solid black;
	border-bottom : 5px solid transparent;
	transition: rotate 0.25s 0.75s;
}


.ratingsys {
  font-size: .7em;
  vertical-align: top;
  width: 2em;
  text-align: left;
  color: #777;
}

.ratingsys[title="CORE2021"] {
	color: black;
}


/* Error log’s toggle mechanism */

#collapse_errors {
	display: none;
}

#collapse_errors:not(:checked) ~ #error_log {
	display: none;
}

#collapse_errors:checked ~ #error_log {
	display: block;
	max-height: calc(100vh - 12px - 2em);
	overflow: auto;
}

#collapse_errors:not(:checked) ~ label[for=collapse_errors]:before {
	transform: rotate(0);
}

#collapse_errors:checked ~ label[for=collapse_errors]:before {
	transform: rotate(90deg);
}