.card {
	border: var(--page-card-border);
	background: var(--page-foreground-color);
	border-radius: var(--page-corner-radius);
	box-shadow: var(--page-foreground-shadow);
}

.page {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow-y: scroll;
	top: 0;
}

.pageFadePart {
	opacity: 1.0;
}

.pageMovePart {
	transform: translateY(0);
}

.pageEnableTransitions.page {
	transition: top 500ms ease-in-out,
				visibility 500ms ease-in-out;
}

.pageEnableTransitions .pageFadePart {
	transition: opacity 500ms ease-in-out;
}

.pageEnableTransitions .pageMovePart {
	transition: opacity 500ms ease-in-out,
				transform 500ms ease-in-out;
}

.pageEnableTransitions .pageShadowPart {
	transition: box-shadow 500ms ease-in-out;
}

.hiddenPageTop {
	top: -75%;
	visibility: hidden;
}

.hiddenPageBottom {
	top: 75%;
	visibility: hidden;
}

.hiddenPageTop .pageFadePart, .hiddenPageBottom .pageFadePart {
	opacity: 0.0;
}

.hiddenPageTop .pageShadowPart, .hiddenPageBottom .pageShadowPart {
	box-shadow: none;
}

.hiddenPageTop .pageMovePart {
	transform: translateY(-15rem);
}

.hiddenPageBottom .pageMovePart {
	transform: translateY(15rem);
}

.pageHeader {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.pageSubheader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: row;
	flex-shrink: 100;
	width: 100%;
}

.pageTitle {
    font-family: var(--font-header);
	font-size: 2.5rem;
    font-weight: 400;
	color: var(--page-title-color);
	width: 100%;
}

.pageSubtitle {
	font-family: var(--font-header);
    font-size: 1.6rem;
    font-weight: 400;
	color: var(--color-text-medium-grey);
	margin-right: 1rem;
}

.pageIcon {
	position: relative;
	border-radius: var(--page-icon-corner-radius);
	border: var(--circle-stripe-width) solid var(--page-icon-color-outer);
	width: var(--large-circle-diameter);
	height: var(--large-circle-diameter);
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	text-align: center;
	background: var(--page-icon-color-outer);
	color: var(--page-icon-color-inner);
}

.graphIcon {
	font-size: 12pt;
	position: relative;
	border-radius: 100%;
	width: var(--large-circle-diameter);
	height: var(--large-circle-diameter);
	display: flex;
	align-items: center;
	align-content: center;
	justify-content: center;
	text-align: center;
	border: 2px solid #808080;
	color: #F0F0F0;
}

/*.pageNavigationButton {
	display: flex;
	align-items: center;
	flex-direction: row;
	transition: opacity 150ms ease-in-out;
}

.pageNavigationButton .pageIcon {
	transition: transform 500ms ease-in-out;
}

.pageNavigationButton:hover {
	opacity: 0.65;
}

.pageNavigationButton:hover .pageIcon {
	transform: rotateZ(360deg) scale(1.15);
}*/

.pageBottomButton {
	display: flex;
	align-items: center;
	flex-direction: row;
	transition: opacity 150ms ease-in-out;
}

.pageBottomButton .pageIcon {
	transition: transform 500ms ease-in-out;
}

.pageBottomButton:hover {
	opacity: 0.65;
}

.pageBottomButton:hover .pageIcon {
	transform: rotateZ(360deg) scale(1.15);
}