	/* USER CP */

.tables-list li {
	margin-top: 10x;
	margin-right: 8px;
}
.tables-list li:last-child {
	margin-right: 0;
}

	/* PROFILE */

.profile-name {
	color: var(--color_light) !important;
}
.profile-quote {
	margin: var(--spacing_mini) 0;
	display: inline-block;
	position: relative;
}
.profile-quote::before {
	color: var(--color_h2);
	font-family: var(--font_quote);
	content: "“";
	font-size: 3em;
	position: absolute;
	top: 0.1em;
	left: -1.1em;
	}
.profile-quote::after {
	color: var(--color_h2);
	font-family: var(--font_quote);
	content: "”";
	font-size: 3em;
	position: absolute;
	bottom: -0.1em;
	right: -1.1em;
}
.profile-main .profile-section:nth-child(2n) {
	background-color: var(--bg_med);
}
.profile-header {
	margin-top: var(--spacing_sm);
}
.overview-section {
	display: flex;
}
.overview-section i {
	color: var(--color_fade-dark);
	font-size: 2em;
	float: left;
	display: block;
	width: 1em;
	line-height: 1.8em;
}
.overview-section section {
	float: left;
	flex: 2;
	margin-left: 1.7em;
	text-align: left;
	margin-bottom: var(--spacing_sm);
}
.overview-section:last-child section {
	margin-bottom: 0;
}
.overview-answer {
	font-weight: 700;
	text-transform: uppercase;
}
.overview-title {
	border-top: var(--border_separator-dark);
	margin-top: 0.4em;
	padding-top: 0.4em;
	display: block;
	text-transform: uppercase;
}	
.profile-av {
	display: none;
}
.appearance-quick {
	border-top: var(--border_separator-dark);
	padding: var(--spacing_sm) 0 0;
	margin: var(--spacing_sm) 0 0;
	position: relative;
	text-align: justify;
}
.appearance-right .tag {
	text-align: center;
}
.profile-bold {
	font-weight: 700;
	text-transform: uppercase;
	display: block;
	margin-top: var(--spacing_mini);
}
.profile-bold:first-child {
	margin-top: 0;
}

.profile-general {
	display: flex;
}
.general-info {
	flex: 2;
}
.info-section {
	display: flex;
}
.info-section section {
	text-align: left;
  	background-color: var(--bg_med);
  	padding: 0.79em 1.1em;
  	margin-bottom: 1em;
  	border-radius: var(--rounded_sm);
  	text-transform: uppercase;
	flex: 1;
	margin-left: 50px;
	position: relative;
}
.info-section section::before,
.info-section section::after {
	font-family: 'Font Awesome Kit Duotone';
  	font-weight: 400;
	font: var(--fa-font-duotone);
	font-size: 2.4em;
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	width: 80px;
	text-align: center;
	left: -65px;
	display: inline-block;
  	text-rendering: auto;
  	-webkit-font-smoothing: antialiased;
}
.info-section section::before {
    color: var(--bg_tag, inherit);
    opacity: 1;
    opacity: var(--fa-primary-opacity, 1.0);
}
.info-section section::after {
    color: var(--bg_tag, inherit);
    opacity: var(--fa-secondary-opacity, 0.4);
}
.small-info {
	color: var(--color_fade);
	font-size: var(--font_sm);
	font-family: var(--font_roboto);
  	letter-spacing: 0.05em;
}
.general-av {
	width: 200px;
	margin-left: var(--spacing_sm);
}

/* field icons */

#Field-1::before {
	content: "\f228";	
}
#Field-1::after {
	content: "\f228\f228";	
}
#Field-2::before {
	content: "\f4b0";	
}
#Field-2::after {
	content: "\f4b0\f4b0";	
}
#Field-3::before {
	content: "\f1fd";	
}
#Field-3::after {
	content: "\f1fd\f1fd";	
}
#Field-4::before {
	content: "\f783";	
}
#Field-4::after {
	content: "\f783\f783";	
}
#Field-5::before {
	content: "\f471";	
}
#Field-5::after {
	content: "\f471\f471";	
}
#Field-6::before {
	content: "\f44b";	
}
#Field-6::after {
	content: "\f44b\f44b";	
}
#Field-7::before {
	content: "\f6b7";	
}
#Field-7::after {
	content: "\f6b7\f6b7";	
}
#Field-8::before {
	content: "\e4fc";	
}
#Field-8::after {
	content: "\e4fc\e4fc";	
}
#Field-9::before {
	content: "\f3c5";	
}
#Field-9::after {
	content: "\f3c5\f3c5";	
}
#Field-10::before {
	content: "\f521";	
}
#Field-10::after {
	content: "\f521\f521";	
}
#Field-11::before {
	content: "\f2bb";	
}
#Field-11::after {
	content: "\f2bb\f2bb";	
}
#Field-12::before {
	content: "\f46c";	
}
#Field-12::after {
	content: "\f46c\f46c";	
}
#Field-13::before {
	content: "\f34e";	
}
#Field-13::after {
	content: "\f34e\f34e";	
}
#Field-14::before {
	content: "\f692";	
	font-size: 2.3em;
}
#Field-14::after {
	content: "\f692\f692";	
	font-size: 2.3em;
}
#Field-15::before {
	font-family: 'Font Awesome 6 Brands';
	font: var(--fa-font-brands);
	content: "\f392";	
	font-size: 2.3em;
	color: var(--bg_tag, inherit);
    opacity: var(--fa-secondary-opacity, 0.4);
}
#Field-16::before {
	content: "\e239";	
}
#Field-16::after {
	content: "\e239\e239";	
}
#Field-17::before {
	content: "\e472";	
}
#Field-17::after {
	content: "\e472\e472";	
}

/* appearance */

.appearance-long {
	text-align: justify;
}
.appearance-left {
	min-width: 675px;
}

/* skill tree */

.exp-bar-bg {
	background-color: var(--bg_main-wrapper);
	height: 10px;
	border-radius: var(--rounded_sm);
}
.exp-bar {
	background-color: var(--color_highlight);
	height: 10px;
	border-radius: var(--rounded_sm);
}
.profile-class .class-icon,
.profile-class .class-name,
.profile-class .class-perk {
	display: block;
	text-align: center;
}
.profile-class .class-icon {
	color: var(--bg_tag);
	font-size: 4em;
}
.profile-class .class-name {
	color: var(--color_highlight);
	margin: 1.5em 0;
	font-weight: bold;
	text-transform: uppercase;
}
.profile-class .class-description {
	display: none;
}

	/* DESKTOP ADJUST */

@media only screen and (min-width: 1050px) {

	.profile-header {
		display: flex;
	}
	.profile-overview {
		grid-gap: var(--spacing_mini) var(--spacing_sm);
		display: grid; 
		grid-template-columns: 1fr 1fr;
		float: left;
		flex: 1;
	}
	.overview-section section {
		margin-bottom: 0;
	}
	.profile-av {
		margin-left: var(--spacing_lrg);
		display: block;
		float: left;
		width: 250px;
		height: 350px;
	}
	.profile-appearance {
		display: flex;
	}
	.appearance-quick {
		border-left: var(--border_separator-dark);
		padding: 0 0 0 var(--spacing_sm);
		margin: 0 0 0 var(--spacing_sm);
		border-top: none;
		float: left;
		width: 225px;
		flex-shrink: 0;
	}
	.appearance-img {
		float: left;
		flex: 1;
	}
	
}