/* Player display page */

#profile-header {
	position: static;
	width: 100%;
	height: 225px;
	margin-bottom: 50px;
	z-index: -1;
	margin-top: 0;
}

#profile-header::after {
	/*background-image: url('/assets/profiles/header-tmp.jpg');*/
	position: absolute;
	left: 0;
	top: 0;
	background-repeat: repeat-x;
	background-position: bottom,top;
	background-size: cover;
	width: 100%;
	height: 308px;
	z-index: -1;
	opacity: 1;
/*	transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;*/
	-webkit-filter: blur(2px);
	-moz-filter: blur(2px);
	-o-filter: blur(2px);
	-ms-filter: blur(2px);
	filter: blur(2px);
}

#profile-header-image {
	position: absolute;
	left: 0;
	top: 0;
	background-repeat: repeat-x;
	background-position: bottom,top;
	background-size: cover;
	width: 100%;
	height: 308px;
	z-index: -1;
	opacity: 1;
	-webkit-filter: blur(2px);
	-moz-filter: blur(2px);
	-o-filter: blur(2px);
	-ms-filter: blur(2px);
	filter: blur(2px);
}

#profile-player {
	position: relative;
	left: 0;
	top: 5px;
}

@media (min-width: 768px) {
	#player-name {
		font-size: 60px;
	}
}

#profile-stats > li {
	color: #fff;
	text-shadow: 0 0 8px #222;
	padding-left: 32px;
	background-repeat: no-repeat;
	list-style-type: none;
	font-size: large;
}

#profile-stats > li > a,
#profile-stats > li > a:hover,
#profile-stats > li > a:active,
#profile-stats > li > a:focus {
	color: #fff;
	text-shadow: 0 0 8px #222;
	font-size: large;
	text-decoration: none;
	cursor: default;
}

#profile-stats > #img {
	background-position: 1px 4px;
}

#profile-stats > #energy {
	background-position: 0 -29px;
}

#profile-stats > #brain {
	background-position: 0 -59px;
}

#profile-stats > #quoin {
	background-position: 0 -90px;
}

#profile-street-button {
	position: relative;
	top: 95px;
	display:inline-block;
	border: 8px solid #FAFAFA;
	border-radius: 10px;
	float: right;
	z-index: 2;
}

.stat-count {
	position: relative;
	bottom: -25px;
}

.stat-image {
	position: relative;
	bottom: -60px;
	margin-top: -80px;
}

.profile-assets-list > li {
	display: inline-block;
	width: 33%;
	vertical-align: top;
}

.mlist,
.mlist:hover,
.mlist:active,
.mlist:focus {
	color: inherit;
	cursor: pointer;
	text-decoration: none;
}

ul.profile-assets-list > li:nth-child(1) {
	margin-top: 15px;
}

a.link-light {
	color: #fff;
	text-shadow: 0 0 8px #222;
	text-decoration: none;
}
a.link-light:hover,
a.link-light:active,
a.link-light:focus {
	color: #4b2e4c;
	text-shadow: none;
	text-decoration: underline;
}

@media (max-width: 991px) {
	a.stat-image {
		vertical-align: bottom;
	}
}

ul.item-list {
	padding: 0;
}

ul.item-list > li {
	list-style-type: none;
	display: inline-table;
	margin-left: 3px;
	margin-right: 3px;
}

#profile-contents::before {
	background-image: url(/static/img/profiles/header-waves.png);
	position: absolute;
	left: 0;
	top: 297px;
	background-repeat: repeat-x;
	background-position: bottom,top;
	width: 100%;
	height: 15px;
	z-index: 0;
}

.item-list#friends-list > li {
	width: 150px;
	text-align: left;
}

#profile-stats .progress-bar {
	min-width: 2em;
}

#favor .progress-bar {
	min-width: 3em;
}

#bio {
	max-height: 130px;
	overflow-y: auto;
/*	border-radius: 5px;
	padding: 10px;
	background-color: rgba(255, 255, 255, 0.5);*/
}

#bio,
#bio * {
	color: #fff;
	text-shadow: 1px 1px 1px #000;
}

/* Player search page */

@media (min-width: 768px) {
	#profile-container-generic {
		margin-top: calc(20vh);
	}
}

#background-container {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100vw);
	height: calc(100vh);
	z-index: -100;
	overflow: hidden;
	background-color: rgb(165, 150, 165);
}

.typeahead.dropdown-menu {
	overflow-y: auto;
	max-height: 200px;
	min-width: 50%;
}

#playersearchtitle {
	margin-top: 0;
}

@-webkit-keyframes playertiles {
	0% {
		background-position: 0;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}

	100% {
		background-position: -1200px;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
}
@keyframes playertiles {
	0% {
		background-position: 0;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}

	100% {
		background-position: -1200px;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
}

#background-container .bg-row {
	background-repeat: repeat-x;
	height: 179px;
}

#background-container .bg-row.left {
	background-image: url(/static/img/profiles/players_l.png);
	background-position-y: 0;
	
	-webkit-animation: playertiles 120s infinite;
	animation: playertiles 120s infinite;
	
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	
	-webkit-animation-direction: normal;
	animation-direction: normal;
}

#background-container .bg-row.right {
	background-image: url(/static/img/profiles/players_r.png);
	background-position-y: 0;
	
	-webkit-animation: playertiles 120s infinite;
	animation: playertiles 120s infinite;
	
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	
	-webkit-animation-direction: reverse;
	animation-direction: reverse;
}

/* Giant Colors */

#progress-alph .progress-bar {
	background-image: -webkit-linear-gradient(to bottom, #bdd5a3 0, #91a37d 100%);
	background-image: -moz-linear-gradient(to bottom, #bdd5a3 0, #91a37d 100%);
	background-image: -o-linear-gradient(to bottom, #bdd5a3 0, #91a37d 100%);
	background-image: linear-gradient(to bottom, #bdd5a3 0, #91a37d 100%);
}

#progress-cosma .progress-bar {
	background-image: -webkit-linear-gradient(to bottom, #8fafbe 0, #688d9f 100%);
	background-image: -moz-linear-gradient(to bottom, #8fafbe 0, #688d9f 100%);
	background-image: -o-linear-gradient(to bottom, #8fafbe 0, #688d9f 100%);
	background-image: linear-gradient(to bottom, #8fafbe 0, #688d9f 100%);
}

#progress-friendly .progress-bar {
	background-image: -webkit-linear-gradient(to bottom, #4c6a72 0, #2b383e 100%);
	background-image: -moz-linear-gradient(to bottom, #4c6a72 0, #2b383e 100%);
	background-image: -o-linear-gradient(to bottom, #4c6a72 0, #2b383e 100%);
	background-image: linear-gradient(to bottom, #4c6a72 0, #2b383e 100%);
}

#progress-grendaline .progress-bar {
	background-image: -webkit-linear-gradient(to bottom, #4f9491 0, #20403f 100%);
	background-image: -moz-linear-gradient(to bottom, #4f9491 0, #20403f 100%);
	background-image: -o-linear-gradient(to bottom, #4f9491 0, #20403f 100%);
	background-image: linear-gradient(to bottom, #4f9491 0, #20403f 100%);
}

#progress-humbaba .progress-bar {
	background-image: -webkit-linear-gradient(to bottom, #e5cddd 0, #b683a2 100%);
	background-image: -moz-linear-gradient(to bottom, #e5cddd 0, #b683a2 100%);
	background-image: -o-linear-gradient(to bottom, #e5cddd 0, #b683a2 100%);
	background-image: linear-gradient(to bottom, #e5cddd 0, #b683a2 100%);
}

#progress-lem .progress-bar {
	background-image: -webkit-linear-gradient(to bottom, #acc6a1 0, #6aa496 100%);
	background-image: -moz-linear-gradient(to bottom, #acc6a1 0, #6aa496 100%);
	background-image: -o-linear-gradient(to bottom, #acc6a1 0, #6aa496 100%);
	background-image: linear-gradient(to bottom, #acc6a1 0, #6aa496 100%);
}

#progress-mab .progress-bar {
	background-image: -webkit-linear-gradient(to bottom, #a5c2d2 0, #909867 100%);
	background-image: -moz-linear-gradient(to bottom, #a5c2d2 0, #909867 100%);
	background-image: -o-linear-gradient(to bottom, #a5c2d2 0, #909867 100%);
	background-image: linear-gradient(to bottom, #a5c2d2 0, #909867 100%);
}

#progress-pot .progress-bar {
	background-image: -webkit-linear-gradient(to bottom, #83bfbd 0, #46918c 100%);
	background-image: -moz-linear-gradient(to bottom, #83bfbd 0, #46918c 100%);
	background-image: -o-linear-gradient(to bottom, #83bfbd 0, #46918c 100%);
	background-image: linear-gradient(to bottom, #83bfbd 0, #46918c 100%);
}

#progress-spriggan .progress-bar {
	background-image: -webkit-linear-gradient(to bottom, #a76b49 0, #562737 100%);
	background-image: -moz-linear-gradient(to bottom, #a76b49 0, #562737 100%);
	background-image: -o-linear-gradient(to bottom, #a76b49 0, #562737 100%);
	background-image: linear-gradient(to bottom, #a76b49 0, #562737 100%);
}

#progress-tii .progress-bar {
	background-image: -webkit-linear-gradient(to bottom, #5d7d8c 0, #2e404a 100%);
	background-image: -moz-linear-gradient(to bottom, #5d7d8c 0, #2e404a 100%);
	background-image: -o-linear-gradient(to bottom, #5d7d8c 0, #2e404a 100%);
	background-image: linear-gradient(to bottom, #5d7d8c 0, #2e404a 100%);
}

#progress-zille .progress-bar {
	background-image: -webkit-linear-gradient(to bottom, #95b8cc 0, #889260 100%);
	background-image: -moz-linear-gradient(to bottom, #95b8cc 0, #889260 100%);
	background-image: -o-linear-gradient(to bottom, #95b8cc 0, #889260 100%);
	background-image: linear-gradient(to bottom, #95b8cc 0, #889260 100%);
}

.progress-bar-img {
	background-image: -webkit-linear-gradient(to bottom, #9d5cbb 0, #44459d 100%);
	background-image: -moz-linear-gradient(to bottom, #9d5cbb 0, #44459d 100%);
	background-image: -o-linear-gradient(to bottom, #9d5cbb 0, #44459d 100%);
	background-image: linear-gradient(to bottom, #9d5cbb 0, #44459d 100%);
}

span.giant-img::before {
	content: '';
	width: 41px;
	background-image: url(/static/img/profiles/giants.png);
	position: absolute;
	margin-left: -35px;
	margin-top: -10px;
}

span.giant-img.alph::before {
	background-position: 0 0;
	height: 42px;
	margin-top: -8px;
}
span.giant-img.cosma::before {
	background-position: 0 287px;
	height: 31px;
	margin-top: 0;
}
span.giant-img.friendly::before {
	background-position: 0 256px;
	height: 23px;
	margin-top: 0;
}
span.giant-img.grendaline::before {
	background-position: 0 893px;
	height: 34px;
	margin-top: -4px;
}
span.giant-img.humbaba::before {
	background-position: 0 859px;
	height: 27px;
	margin-top: 0;
}
span.giant-img.lem::before {
	background-position: 0 832px;
	height: 37px;
	margin-top: -5px;
}
span.giant-img.mab::before {
	background-position: 0 465px;
	height: 30px;
	margin-top: 0;
}
span.giant-img.pot::before {
	background-position: 0 435px;
	height: 32px;
	margin-top: 0;
}
span.giant-img.spriggan::before {
	background-position: 0 403px;
	height: 37px;
	margin-top: -3px;
}
span.giant-img.tii::before {
	background-position: 0 36px;
	height: 18px;
	margin-top: 5px;
}
span.giant-img.zille::before {
	background-position: 0 18px;
	height: 18px;
	margin-top: 5px;
}

.dev::before,
.guide::before {
	border-radius: 4px;
	font-family: "Lato", sans-serif;
	color: #444;
	margin-right: 3px;
	padding: 2px 4px;
	font-size: 16px;
	position: relative;
	top: -14px;
	left: -10px;
	background-color: #fff;
	text-shadow: none;
}

.dev::before {
	content: "dev";
	border: 2px solid #4b2e4c;
}

.guide::before {
	content: "guide";
	border: 2px solid teal;
}

/* Color picker */

.colors-select {
	background-color: white;
	width: 230px;
	border-radius: 8px;
	box-shadow: 0 0 5px #444;
	padding: 5px;
	margin: 15px;
}

.colors-title {
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	padding: 8px 0 12px 0;
	border-bottom: 1px solid #BEBEBE;
}

.colors-row {
	width: 100%;
	border-top: 1px solid #BEBEBE;
	border-bottom: 1px solid #BEBEBE;
	height: 42px;
	font-size: 15px;
}

.colors-row:nth-child(8) {
	border-bottom-width: 2px;
}

.colors-row[disabled] {
	opacity: 0.5;
	pointer-events: none;
}

.colors-row span {
	width: 100px;
	display: inline-block;
	text-align: center;
	position: relative;
	top: -15px;
}

.color-swatch {
	width: 30px;
	height: 30px;
	display: inline-block;
	margin: 5px 2px;
	border-radius: 50%;
	cursor: pointer;
}

.color-swatch[current] {
	border: 2px solid #aaa;
	position: relative;
	top: -17px;
}

.color-swatch[current]::after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f00c"; /* checkmark */
	color: #eee;
	position: relative;
	top: 3px;
	left: 6px;
	text-shadow: 0 0 5px #444;
}

#color-submit {
	margin-top: 6px;
}

/* Achievements */

.achv-categories {
	width: 100%;
	text-align: center;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.achv-categories li {
	display: inline;
}

.achv-categories li a {
	float: left;
}

.achv {
	text-align: center;
	height: calc(100px + 5em);
	cursor: help;
}

.achv-icon {
	width: 100px;
	height: 100px;
	background-size: contain;
	background-repeat: no-repeat;
	display: inline-block;
}

.achv-icon[data-achv-awarded="false"] {
	opacity: 0.5;
}