@media screen and (min-width: @screen-sm-min) {
	.account .card .card-header:not(.ch-alt) {
		padding-top: 15px;
		padding-left: 26px;
		padding-bottom: 5px;
	}
}

.account .card {
	.card-body {
		.checkbox>label {
			font-size: 14px;
		}

		.select>label {
			font-size: 14px;
			font-weight: normal;
		}

		&.card-padding {
			padding: 15px 25px;
			
			@media (max-width: @screen-xs-max)
			{
				padding: 15px;
			}
		}
	}

	.card-header {
		text-align: left;
	}
}

.account.settings {
	.card .card-header {
		font-size: 16px;
		font-weight: 500;
	}
	
	.form-control {
		color: inherit;
		border-bottom: @input-border-bottom;
	}
}

.account-username-box {
	margin-bottom: 10px;

	.nav.nav-pills>li>a {
		font-size: 16px;
		font-weight: 500;
	}
}

.status {
	display: inline-block;
	border-radius: 50%;
	width: 11px;
	height: 11px;
	vertical-align: middle;
}

.edit-account .input-group {
	margin-left: -10px;
	margin-bottom: 20px;

	label {
		font-size: 14px;
		font-weight: normal;
	}
}

.user-profile-picture {
	width: 128px;
	height: 128px;
	border-radius: 50%;
}

.cover {
	height: 200px;
}

.user-icon.profile-header-img {
	position: absolute;
    left: 46px;
    top: -90px;
    height: 120px;
    width: 120px;
    font-size: 5rem;
    border: 3px solid #fff;
    line-height: 120px;

    @media (max-width: @screen-xs-max) {
    	left: 50%;
    	margin-left: -60px;
    }
}

.user-profile-view {

	.card-footer {
		position: relative;
		padding: 20px 20px 20px 30px;

		hr {
			border: @account-hr-border;
			margin: 0;
		}

		@media (max-width: @screen-xs-max) {
			padding: inherit;

			hr {
				margin-top: 80px;
			}
		}

		.status {
			left: 140px;
		    position: absolute;
		    top: 0;
		    border: 1px solid #fff;
		    height: 18px;
		    width: 18px;
		    border-radius: 50%;

		    @media (max-width: @screen-xs-max) {
		    	left: 50%;
		    	margin-left: 35px;
		    }
		}

		.user-info {
			float: left;
			position: absolute;
    		top: -50px;
    		margin-left: 150px;

			h3 {
				color: #fff;
				font-size: 20px;

				@media (max-width: @screen-xs-max) {
					color: @body-color;
					margin-top: 10px;
					font-size: 16px;
					text-align: center;
					margin-bottom: 2px;
				}
			}

			h4 {
				font-size: 13px;

				@media (max-width: @screen-xs-max) {
					font-size: 11px;
					text-align: center;
					margin-top: 0;
					margin-bottom: 0;
				}
			}

			@media (max-width: @screen-xs-max) {
			    position: relative;
			    top: -190px;
				margin-left: 0;
				float: none;
			}
		}

		.account-stats {
			display: inline-block;

			.stat {
				text-align: center;
				display: inline-block;
				min-width: 100px;

				@media (max-width: @screen-xs-max) {
					padding: 10px 0;
				}
			}

			.stat-label {
				font-size: 14px;
			}

			.human-readable-number {
				font-weight: bold;
				font-size: 18px;
			}

			@media (max-width: @screen-xs-max) {
				margin-top: 80px;
				margin-bottom: 10px;
			}
		}
		
		[component="account/chat"], [component="account/follow"], [component="account/unfollow"] {
			float: left;
			margin: 15px 5px 0;
			
			@media (max-width: @screen-xs-max) {
				float: inherit;
				margin: 0 5px 15px 5px;
			}
		}
	}
}

.account .cover {

	&:hover {
		.controls {
			.opacity(0.8);
		}
	}

	.controls {
		text-align: center;
		height: 200px;
		line-height: 200px;
		.opacity(0);
		.transition(opacity .15s linear);
		cursor: pointer;
		pointer-events: none;

		> * {
			pointer-events: all;
		}

		.fa {
			color: white;
			background-color: #333;
			opacity: 1;
			margin: 15px;
			padding: 5px;
		}
	}

	&.active {
			&:hover {
				cursor: move;
			}

			.controls {
				> * {
					display: none;
				}
			}

			.save {
				display: inline-block;
			}
		}

		&.saving {
			.save {
				display: none;
			}

			.indicator {
				display: inline-block;
			}
		}

		.save, .indicator {
			display: inline-block;
			position: absolute;
			top: 1em;
			right: 2em;
			opacity: 1;
			background-color: @brand-primary;
			color: #eee;
			padding: 0.5em;
			font-weight: bold;

			&:hover {
				cursor: pointer;
			}
		}

		.save {
			display: none;
		}

		.indicator {
			display: none;
		}
}

.account-fab {
	border-radius: 50%;
}

.account .account-fab {
	vertical-align: inherit;
	float: right;
	position: absolute;
	top: -23px;
	right: 50px;

	@media (max-width: @screen-xs-max) {
		right: 30px;
	}	
}

.account-picture-block .user-profile-picture {
	width: 128px;
	height: 128px;
	border-radius: 50%;
	font-size: 5rem;
	line-height: 128px;
}

.account.change-username #change-username, 
.account.change-password #change-password, 
.account.change-email #change-email {
	padding: 10px;
}

.profile-view {
	text-align: center;

	.profile-label {
		font-size: 12px;
		margin-top: 10px;
		padding-right: 3px;
		padding-left: 5px;
	}
}

.account {
	&.account-info {
		.ban-history {
			padding-left: 0;
			
			.timestamp {
				font-weight: bold;
			}
			
			.expiry {
				font-size: 11px;
			}
		}
		
		.recent-flags {
			padding-left: 0;
			
			.title {
				font-weight: bold;
			}
			
			.timestamp {
				font-size: 11px;
			}
		}
	}
}