.profile {
	nav {

		h3 {
			&:hover {
				opacity: .8;
			}
		}

		h4 {
			opacity: .7;
			margin: .5rem 0 .5rem;
		}
	}

	li {
		h3 {
			opacity: .5;
		}

		&.open, &.active {
			h3, a {
				opacity: 1;
				color: #000 !important;
			}
		}

		&.active > ul {
			max-height: 100%;
		}
	}

	.profile-settings {
		position: relative;
		top: 30px;

		strong {
			display: block;
			margin: 3rem 0 1rem;
		}

		h1 {
			font-size: 1.5rem;
		}


		.button {
			padding: 20px;
			font-size: 1rem;
			font-family: $font-family;

			@media (min-width: $md) {
				padding: 12px 20px;
			}
		}
	}

	.profile-settings-forms {
		margin-top: 30px;

		label {
			font-weight: 600;
		}

		.button {
			margin-top: 60px;
			
			@media (max-width: $md) {
				width: 100%;
			}
		}

		@include placeholder {
		    color: $color-text;
		    font-size: 1rem;
		    font-family: $font-family;
		}

		div.profile-input {
			font-size: 1rem;
			font-family: $font-family;
			color: #000;
			position: relative;
		}

		div.profile-input {
			min-height: 30px;

			& + div.profile-input {
				margin-top: 20px;
			}

			&#bio {
				min-height: 200px;
			}

			input, textarea {
				height: 30px;
				line-height: 30px;
				border: 1px solid transparent;
				border-bottom-color: darken(whitesmoke, 6%);
				width: auto;
				min-width: 200px;
				width: 140px;
				display: inline-block;
				padding: 4px 8px 4px 0;

				color: $color-text;
				font-size: 1rem;
				font-family: $font-family;

				position: absolute;
				top: -8px;
				left: 100px;

				@media (min-width: $md) {
					width: 300px;
				}

				@include transition(all, .2s);

				&:focus {
					outline: none;
					border-bottom-color: $color-our;
					color: rgba(#000, 1);
				}
			}

			textarea {
				border: 1px solid darken(whitesmoke, 6%);
				min-height: 200px;
				left: 102px;
				line-height: normal;
				display: inline-block;
				text-align: left;
				overflow: hidden;
				padding: 8px;
				resize: none;
				max-width: 100%;
				font-size: .9rem;
				width: 138px;

				@media (min-width: $md) {
					width: 298px;
				}

				&:focus {
					border-color: $color-our;
				}
			}

			input {
				&:hover {
					border-bottom-color: rgba($color-our, .78);
					color: darken(#a6a6a6, 15%);

					&:focus {
						color: #000;
						border-bottom-color: rgba($color-our, 1);
					} 
				}

				&[type='password']{
					letter-spacing: 1px;
					font-size: 1.1rem;
				}
			}

			textarea {
				&:hover {
					border-color: rgba($color-our, .78);
					color: darken(#a6a6a6, 15%); 

					&:focus {
						color: #000;
						border-color: rgba($color-our, 1);
					} 
				}
			}

			&.warning {
				input, textarea {
					border-bottom-color: $color-red;
					color: $color-red;
				}

				textarea {
					border-color: $color-red;
				}

				label {
					color: $color-red;
				}
			}

			&.confirm-password {
				display: none;

				&.visible {
					display: block;
				}
			}
		}

	
		label {
			&:after {
				content:":";
				display: inline-block;
			}
		}

		.avatar {
			margin: 0 0 50px;
			position: relative;
			overflow: hidden;
			height: 98px;
			line-height: 98px;

			.ink {
				background: rgba(#fff, .5);
				overflow: hidden;
			}

			label {
				float: left;
			}

			.avatar-image {
				position: absolute;
				height: 98px;
				width: 98px;
				left: 100px;
				user-select: none;

				img {
					border-radius:50%;
					height: auto;
					width:98px;
				}

				span {
					opacity: 0;
					border-radius:50%;
					position: absolute;
					height: 100%;
					width: 100%;
					top: 0;
					left: 0;
					background: rgba(#000, .58);
					text-align: center;
					line-height: 98px;
					font-size: .85rem;
					color: #fff;
					@include transition(opacity, .2s);
					user-select: none;
				}

				&:hover {
					span {
						opacity: 1;
						cursor: pointer;
					}
				}
			}
		}
	}
}






.profile-settings-packages {
	.button {
		margin-top: 30px;
		margin-bottom: 30px;

		@media (max-width: $md) {
			width: 100%;
		}
	}

	strong {
		margin-top: 3rem;
		display: block;
		margin-bottom: 1rem;
	}


	&.packages-content {
		top: 0;
	}
}

.box {
	background: #fff;
	padding: 15px;
	margin-bottom: 15px;
	width: 100%;
	transition: box-shadow .2s;
	position: relative;
	height: 100%;
	width: 100%;

	.row {
		display: block;
		margin: 0;

		[class*="col-"] {
			margin: 0;

			@media (min-width: $md) {
				float: none;
				display: table-cell;
				vertical-align: top;
			}
		}

		@media (min-width: $md) {
			margin: 0;
			display: table;
		}
	}

	.forum-thread-text {
		margin-top: 4px;

	}

	i {
		font-size: 3rem;
		color: #acacac;
	}

	h3 {
		margin-bottom: 3px;
		font-size: 1.3rem;
		font-weight: normal;

		a {
			text-decoration: none;
			color: rgba(#000, .5);

			&:hover {
				color: #000;
			}
		}
	}

	p {
		font-size: .8rem;
		color: darken(whitesmoke, 40%);
	}

	&:last-child {
		margin-bottom: 0;
	}

	.stats {
		font-size: .8rem;
		position: absolute;
		left: 15px;
		bottom: 0;

		@media (min-width: $md) {
			text-align: right;
			right: 0;
			bottom: 0;
		}

		span {
			color: #7f7f7f;

			&:first-child {
				margin-right: 8px;
			}

			span {
				color: #000;

				&:first-child {
					margin-right: 0;
				}
			}
		}
	}

	.other {
		padding-top: 10px;
		display: block;
		margin-top: 20px;
		overflow: hidden;
		width: 100%;

		.edit {
			font-size: .8rem;
			position: absolute;
			right: 15px;
			bottom: 0;
			opacity: .6;
			text-decoration: underline;
			display: inline-block;

			@media (min-width: $md) {
				top: 0;
				right: 0;
			}

			&:hover {
				opacity: 1;
				text-decoration: none;
			}
		}

		@media (min-width: $md) {
			margin-top: 0 !important;
		}
	}
}



// Following
.profile-settings-following {
	margin-top: 20px;

	li {
		font-size: 1.05rem;
		margin-bottom: 1rem;
		padding-bottom: 1rem;
		padding-left: 0;
		list-style: none;
		border-bottom: 1px solid $color-light-grey;

		@media (min-width: $md) {
			margin-bottom: 1rem;
			padding-bottom: 0;
			font-size: .9rem;
			border-bottom: none;
		}

		&:last-child {
			margin-bottom: 0;
		}

		a {
			margin-bottom: 0;
			display: inline-block;
			font-size: .95rem;
			margin-bottom: 1rem;

			@media (min-width: $md) {
				font-size: 1rem;
				margin-bottom: 0;
			}

			&:hover {
				text-decoration: none;
				background: none;
			}
		}

		span {
			@media (min-width: $md) {
				display: inline-block !important;
			}
		}

		.unfollow {
			opacity: .7;
			margin-left: 5px;
			margin-right: 0;

			&.button {
				display: block;
				font-size: .9rem;
				padding: 12px 0;
				border: none;

				@media (min-width: $md) {
					display: inline-block;
					font-size: .75rem;
					padding: 0;
				}

				.ink {
					background: rgba(255,255,255, .23);
				}

				&:hover {
					background: none;
					border: none;
					color: $color-text-hover;
					opacity: 1;
				}
			}
		}
	}
}

small.notification {
	display: inline-block;
	position: absolute;
	line-height: 43px;
	padding: 0 10px;
	margin: 0;
	margin-top: 60px;

	&.success {
		color: $color-text;
	}

	&.alert {
		color: $color-red;
	}
}

// Manage team - ProfileProjectTeam.cshtml
.profile-settings {
	#open-for-colab {
		width: auto;
		left: 200px;
		top: -10px;
	}
	#contris {
		ul {
			li {
				list-style: none;
			}
			a.contri-name {
				text-decoration: none;
				line-height: 1.7rem;
				color: $color-text;
				font-size: .8rem;
				&:hover {
					text-decoration: underline;
				}
			}
			a.remove-contri {
				display: inline-block;
				text-decoration: none;
				font-size: .75rem;
				margin-left: .7rem;
				margin-right: .5rem;
				color: rgba(#000, .5);
				max-height: 14px;
				cursor: pointer;

				@media (min-width: $md) {
					max-width: 14px;
					overflow: hidden;
					
				}

				&:hover {
					color: $color-text-hover;
				}

				i {
					display: inline-block;
					font-size: 14px;
					margin-right: 5px;
					transform: translateY(2px);
				}

			}
		}
		#forums {
			li {
				list-style: none;
			}
			a.remove-forum {
				display: inline-block;
				text-decoration: none;
				font-size: .75rem;
				margin-left: .7rem;
				margin-right: .5rem;
				color: rgba(#000, .5);
				max-height: 14px;
				cursor: pointer;

				@media (min-width: $md) {
					max-width: 14px;
					overflow: hidden;
					
				}

				&:hover {
					color: $color-text-hover;
				}

				i {
					display: inline-block;
					font-size: 14px;
					margin-right: 5px;
					transform: translateY(2px);
				}

			}
		}
	}
}