#achievement-page {
	max-width: 1600px;
}

#importing {
	flex-direction: column;
	align-items: center;

	display: none;
}

#importing-text {
	margin: 0;
	height: 96px;
	font-size: 64px;
	line-height: 96px;
	color: var(--foreground);
}

#importing-loading {
	height: 64px;
	width: 64px;
}

.achievement-list {
	width: 100%;
	height: max-content;

	border-radius: 8px;
	
	overflow: hidden;

	box-shadow: 0px 0px 8px 8px var(--shadow-color);
}

.achievement-entry {
	overflow: hidden;

	height: 64px;

	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;

	background-color: var(--distinction);
}

.achievement-entry-left {
	height: 100%;

	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.achievement-entry-right {
	height: 100%;

	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
}

.achievement-entry-icon {
	width: 64px;

	flex-grow: 0;
}

.achievement-entry-text {
	box-sizing: border-box;

	margin: 0;
	padding: 0px 16px;

	height: 100%;
	line-height: 64px;

	color: var(--foreground);

	font-size: 24px;

	border-top: 1px solid var(--background);

	flex-basis: max-content;
	flex-grow: 0;
}

.top > .achievement-entry-text {
	border: 0;
}

.achievement-entry-text.platform-name {
	flex-grow: 1;
}

#achievement-info {
	height: max-content;
}

#achievement-info-flex {
	justify-content: flex-start;
	align-items: flex-end;
}

#achievement-name-text {
	flex-grow: 0;
	width: max-content;
}

#achievement-icon-img {
	flex-grow: 0;
	margin-bottom: 0.25em;
	margin-left: 32px;

	font-size: 32px;
	width: 64px;
	height: 64px;
	object-fit: contain;

	background-color: var(--background-dark);

	position: relative;
}

#achievement-description-text {
	font-size: 24px;
	color: var(--foreground);
	background: var(--distinction);
	margin: 0;
	padding: 16px;
}

#achievement-section-1 {
	box-sizing: border-box;

	width: 100%;
	height: max-content;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
}

#achievement-stats {
	flex-basis: 0;
	flex-grow: 1;

	display: flex;
	flex-direction: row;
	justify-content: center;
}

#achievement-stats-numeric {
	flex-grow: 1;
	width: 100%;
	max-width: 800px;

	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

#achievement-completion-stack {
	flex-grow: 1;
	height: max-content;
	position: relative;
}

#achievement-completion-background {
	width: 100%;
	display: block;
}

#achievement-completion-canvas {
	width: 100%;
	height: 100%;

	position: absolute;
	left: 0;
	top: 0;
}

#achievement-completion-text {
	margin: 0;

	width: 100%;
	height: 100%;

	color: var(--foreground);
	font-size: 64px;

	position: absolute;
	left: 0;
	top: 0;

	display: flex;
	justify-content: center;
	align-items: center;
}

#achievement-difficulty,
#achievement-quality {
	flex-grow: 1;
}

#achievement-difficulty-text {
	margin: 0;

	height: 48px;

	color: var(--foreground);

	font-size: 48px;
	line-height: 48px;
	text-align: center;
}

#achievement-quality-text {
	margin: 0;

	height: 48px;

	color: var(--foreground);

	font-size: 48px;
	line-height: 48px;
	text-align: center;
}

#achievement-rating {
	flex-basis: 0;
	flex-grow: 1;
}

.achievement-save-stack {
	display: none;
}

.achievement-save-stack.active {
	display: block;
	width: max-content;
	height: max-content;
}

.achievement-save-stack:hover .achievement-save,
.achievement-save-hover {
	display: none;
}

.achievement-save,
.achievement-save-stack:hover .achievement-save-hover {
	display: block;
}

#achievement-rating-subsection {
	background-color: var(--distinction);
}

#achievement-rating-numeric {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.achievement-rating-text-flex {
	display: flex;
	flex-direction: row;
	align-items: center;
}

#achievement-difficulty-rating,
#achievement-quality-rating {
	flex-grow: 1;
}

.achievement-rating-text {
	flex-basis: max-content;
	flex-grow: 1;
}

.achievement-rating-max-text {
	flex-grow: 0;

	margin: 0;
	margin-left: 16px;
	font-size: 24px;

	color: var(--foreground);
}

#achievement-difficulty-rating-text,
#achievement-quality-rating-text,
#achievement-review-rating-text {
	box-sizing: border-box;
	padding: 8px;
	font-size: 20px;
	color: var(--background);
	border: 0;
	outline: none;

	border-radius: 8px;
}

#achievement-review-rating-text {
	width: 100%;
	height: 96px;

	resize: none;
}


#profile-section-2 {
	box-sizing: border-box;

	width: 100%;
	height: max-content;

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
}

#profile-hardest {
	flex-grow: 1;
	height: 100%;
}

#profile-platforms {
	flex-grow: 1;
}

#profile-platforms .profile-entry {
	display: none;
}

#profile-platforms .profile-entry-text {
	color: var(--foreground);
}

#profile-platforms .profile-entry.connected,
#profile-platforms .profile-entry.editing {
	display: flex;
}

#profile-page .profile-edit-stack,
#profile-page .profile-save-stack {
	display: none;
}

#profile-page.self .profile-edit-stack,
#profile-page.self .profile-save-stack.active {
	display: block;
	width: max-content;
	height: max-content;
}

#profile-page.self .profile-edit-stack.active,
#profile-page.self .profile-save-stack {
	display: none;
}

.profile-edit-stack:hover > .profile-edit-hover,
.profile-edit {
	display: block;
}

.profile-edit-stack:hover > .profile-edit,
.profile-edit-hover {
	display: none;
}

.profile-save-stack:hover > .profile-save-hover,
.profile-save {
	display: block;
}

.profile-save-stack:hover > .profile-save,
.profile-save-hover {
	display: none;
}

.profile-entry .platform-remove-stack,
.profile-entry .platform-add,
.profile-entry .platform-unsupported,
.profile-entry.connected.editing .platform-add {
	border-top: 1px solid var(--background);
	display: none;
}

.profile-entry.connected.editing .platform-remove-stack {
	box-sizing: border-box;
	display: block;
	height: 100%;
	width: max-content;
	flex-grow: 0;
}

.platform-remove, .platform-remove-hover {
	box-sizing: border-box;
	padding: 12px;
	height: 100%;
}

.profile-entry.connected.editing .platform-remove-stack .platform-remove,
.profile-entry.connected.editing .platform-remove-stack:hover .platform-remove-hover {
	display: block;
}

.profile-entry.connected.editing .platform-remove-stack:hover .platform-remove,
.profile-entry.connected.editing .platform-remove-stack .platform-remove-hover {
	display: none;
}

.profile-entry .platform-add {
	box-sizing: border-box;
	height: 100%;
	padding: 16px 8px;
}

.profile-entry.editing .platform-add {
	display: block;
}

.profile-entry.editing .platform-unsupported {
	box-sizing: border-box;
	display: block;
	margin: 0;
	padding: 0% 2%;
	line-height: 63px;
	font-size: 24px;
	color: var(--foreground-disabled);
}

#profile-ratings {
	flex-grow: 1;
}

.list-page-entry.rating:hover {
	background-color: var(--background-light);
}

.list-page-entry-text.rating-username   { flex-grow: 1.5; }
.list-page-entry-text.rating-difficulty { flex-grow: 1;   }
.list-page-entry-text.rating-quality    { flex-grow: 1;   }
.list-page-entry-text.rating-review     { flex-grow: 5;   }

.list-page-header > .list-page-entry-text.rating-username:hover,
.list-page-header > .list-page-entry-text.rating-difficulty:hover,
.list-page-header > .list-page-entry-text.rating-quality:hover,
.list-page-header > .list-page-entry-text.rating-review:hover {
	background-color: var(--accent-value2);
}