.planner-input {
	gap: var(--gap-small);
}

.planner-input .map-and-country-list {
	display: flex;
	flex-direction: var(--flex-direction-row-if-possible);
	gap: var(--gap-small);
}

.planner-input .map {
	flex: 2;
	width: auto;
	height: auto;
	max-height: 50vh;
}

.planner-input .country-list {
	flex: 1;
	border: var(--border-width) solid var(--background-dark);
	border-radius: 1rem;
	max-height: 40vh;
	overflow: auto;
}

.planner-input h4 {
	background: var(--background-dark);
	border-radius: 0.75rem 0.75rem 0 0;
	padding: var(--padding-all);
	margin-bottom: 0;
}

.planner-input .country-list .country {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	padding: var(--padding-small);
}

.planner-input .country-list .country:nth-child(odd) {
	background: var(--background-dark);
}

.planner-input .country-list .country .country-name {
	flex: 1;
}

.planner-input #parameters {
	display: flex;
	flex-direction: var(--flex-direction-row-if-possible);
	align-items: center;
	border: var(--border-width) solid var(--background-dark);
	border-radius: var(--border-radius);
	padding: var(--padding-all);
}


/* ----------------------- */

.planner-output .loading {
	text-align: center;
	font-family: title;
	font-size: var(--font-size-large);
	animation: blink 2s ease-in-out infinite;

	transition: var(--transition-slow);
}

.planner-output .results {
	opacity: 1;
	transition: var(--transition-slow);
}

.planner-output .please-login {
	text-align: center;
}

.planner-output .path-block {
	display: flex;
	flex-direction: var(--flex-direction-row-if-possible);
	gap: var(--gap-small);
}

.planner-output .path-block .path-map-itinary-and-gradient {
	display: flex;
	flex-direction: column;
	flex: 2;
}

.planner-output .path-block .path-map-itinary-and-gradient .map {
	width: 100%;
	height: 100%;
	border-radius: var(--border-radius-top);
}

.planner-output .path-block .path-map-itinary-and-gradient .itinary {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-small);
	background: var(--background-dark);
	padding: var(--padding-small);
}

.planner-output .path-block .path-map-itinary-and-gradient .gradient {
	width: 100%;
	height: var(--gradient-height);
	border-radius: var(--border-radius-bottom);
}

.planner-output .path-block .path-overview {
	display: flex;
	flex-direction: column;
	flex: 1;
	border: var(--border-width) solid var(--background-dark);
	border-radius: var(--border-radius);
}

.planner-output .path-block .path-overview h3 {
	background: var(--background-dark);
	padding: var(--padding-all);
	margin-bottom: 0;
	border-radius: 0.75rem 0.75rem 0 0;
	text-align: center;
}

.planner-output .path-block .path-overview .see-details {
	font-family: title;
	font-size: var(--font-size-medium);
	text-decoration: none;
	background: var(--background-dark);
	border-radius: 0 0 0.75rem 0.75rem;
	color: var(--color-light);
	border: var(--border-width) solid transparent;
	padding: var(--padding-all);
	transition: var(--transition-fast);
}

.planner-output .path-block .path-overview .see-details:hover {
	padding-left: calc(var(--padding-all) + var(--padding-left-hover));
	color: var(--color-accent);
	border: var(--border-width) solid var(--color-accent);
	background: var(--background-accent);
}

.planner-output .path-block .path-overview .see-details.fade-out {
	color: transparent;
}

.planner-output .path-details {
	display: flex;
	flex-direction: column;
	margin: var(--margin-all);
	gap: var(--gap-very-small);

	opacity: 1;
	transition: var(--transition-classic);
}

.planner-output .path-details .country-gradient-and-overview {
	display: flex;
	flex-direction: var(--flex-direction-row-if-possible);
	gap: var(--gap-very-small);
}

.planner-output .path-details .country-gradient-and-overview .gradient {
	flex: 1;
	display: flex;
	min-height: var(--gradient-height);
}

.planner-output .path-details .country-gradient-and-overview .country-overview {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: var(--padding-small);
	background: var(--background-dark);
}

.planner-output .path-details .country-gradient-and-overview:first-child .gradient {
	border-radius: var(--border-radius-top);
}

.planner-output .path-details .country-gradient-and-overview:last-child .country-overview {
	border-radius: var(--border-radius-bottom);
}

.planner-output .path-details .country-gradient-and-overview .country-overview .country-name-and-date {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: var(--margin-bottom-small);
}

.planner-output .path-details .country-gradient-and-overview .country-overview h4 {
	margin-bottom: 0;
}

/* computer */
@media (min-width: 1024px) {


	.planner-input .map {
		max-height: 70vh;
	}

	.planner-input .country-list {
		max-height: 70vh;
	}

	.planner-output .path-block .path-overview h3 {
		text-align: left;
		text-align-last: right;
	}

	.planner-output .path-details .country-gradient-and-overview:first-child .gradient {
		border-radius: var(--border-radius-top-left);
	}

	.planner-output .path-details .country-gradient-and-overview:last-child .gradient {
		border-radius: var(--border-radius-bottom-left);
	}

	.planner-output .path-details .country-gradient-and-overview:first-child .country-overview {
		border-radius: var(--border-radius-top-right);
	}

	.planner-output .path-details .country-gradient-and-overview:last-child .country-overview {
		border-radius: var(--border-radius-bottom-right);
	}
}