#user-profile {

	#content {
		padding: 0;
		padding-top: 64px;
		min-height: 100%;
	}

	.content-wrapper {
		margin-top: 0;
		position: relative;
		overflow: hidden;

		.profile-content {
			float: left;
			width: 78%;
			height: 100%;
			min-height: 800px;

			@media (max-width: $maxMedium) {
				width: 72%;
			}

			@media (max-width: $maxSmall) {
				width: 100%;
				margin-top: 20px;
			}

			.tabs {
				background: #F5F6F8;
				border-bottom: 1px solid #CED9EB;
				padding: 0 30px;
				box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.06);

				ul {
					margin: 0;
					padding: 0;
					list-style-type: none;

					li {
						display: inline-block;

						a {
							padding: 17px 20px;
							margin-right: 5px;
							position: relative;
							display: inline-block;
							text-decoration: none;
							color: #688EA7;
							font-weight: 600;

							@include transition(all .2s linear);

							&.active {
								color: #333;
								font-weight: 600;

								&:after {
									content: '';
									position: absolute;
									height: 2px;
									width: 100%;
									background: #1DDBF1;
									left: 0;
									bottom: -1px;
								}
							}
						}
					}
				}
			}

			.tab-content {
				margin: 30px 30px 0;
				position: relative;

				@include transform(translate3d(0, 0, 0));

				-webkit-perspective: 0px;
			    -ms-perspective: 0px;
			    -moz-perspective: 0px;

			    @media (max-width: $maxSmall) {
			    	margin: 30px 10px 0;
			    }

				.tab {
					opacity: 0;
					visibility: hidden;
					position: fixed;
					left: 0;
					top: 0;
					z-index: 999;
					width: 100%;

					@include transform(scale3d(0.95, 0.95, 0.95));
					@include transition(all .3s ease-in-out);
					-webkit-transform-style: preserve-3d;
							transform-style: preserve-3d;
					
					-webkit-backface-visibility: hidden;
							backface-visibility: hidden;

					&.active {
						opacity: 1;
						visibility: visible;
						position: relative;

						@include transform(scale3d(1, 1, 1));
					}

					&.notes {
						padding-left: 20px;

						.editor {
							width: 94%;
							background: #F7F7F7;
							border-radius: 5px;
							margin-top: 40px;

							textarea {
								border-bottom: 0;
								border-radius: 4px 4px 0 0;
								border-color: #D7E0EC;
							}

							.options {
								padding: 11px 20px;
								border: 1px solid #E1E7F0;
								border-radius: 0 0 4px 4px;

								.attach {
									float: right;
									margin-top: 5px;
									margin-right: 10px;

									a {
										text-decoration: none;
										margin-right: 20px;

										i {
											font-size: 23px;
											color: #A8B6C2;
										}
									}
								}

								.button {
									float: right;

									span {
										font-size: 13px;
									}
								}
							}
						}

						.filter {
							margin-top: 50px;
							width: 94%;

							h4 {
								font-size: 21px;
							}

							form {
								width: 160px;
								position: relative;
								top: 5px;
							}
						}

						.comments {
							margin-top: 60px;
							width: 94%;

							@media (max-width: $maxSmall) {
								margin-top: 30px;
							}

							.comment {
								padding-bottom: 60px;
								position: relative;

								@media (max-width: $maxSmall) {
									padding-bottom: 20px;
								}

								&:before {
									content: '';
									display: block;
									position: absolute;
									width: 2px;
									background: #f7f7f7;
									height: 100%;
									left: 45px;
									top: 0;

									@media (max-width: $maxSmall) {
										display: none;
									}
								}

								&:last-child {
									&:before {
										background: #fff;
									}		
								}

								.avatar {
									max-width: 62px;
									border-radius: 5px;

									@media (max-width: $maxSmall) {
										display: none;
									}
								}

								.message {
									border: 1px solid #e4e4e4;
									border-radius: 4px;
									padding: 7px 20px;

									@media (max-width: $maxSmall) {
										border: 0;
										padding: 7px 0;
									}

									header {
										font-size: 13px;
										position: relative;
										color: #777;
										margin-top: 8px;

										&:before {
											content: '';
											position: absolute;
											display: block;
											width: 37px;
											height: 12px;
											top: 10px;
											left: -25px;
											margin-left: -18.5px;
											background-image: url("#{$imagesPath}/popover-arrow.png");
											background-size: 100% 100%;
											@include transform(rotate(270deg));

											@media (max-width: $maxSmall) {
												display: none;
											}
										}

										.name {
											font-weight: 600;
											display: inline-block;
											margin-right: 6px;
											color: #5481C4;
										}

										.date {
											color: #8F8F8F;
										}
									}

									.note {
										p {
											margin-top: 15px;
											margin-bottom: 15px;
											line-height: 23px;
										}

										.files {
											margin-top: 35px;
											width: 100%;
											margin-bottom: 20px;

											.file {
												float: left;
												padding-right: 25px;
												max-width: 25%;
												vertical-align: top;
												text-align: center;

												img {
													border-radius: 3px;
												}

												.name {
													display: inline-block;
													margin-top: 11px;
													line-height: 16px;
													font-size: 13px;
												}
											}
										}
									}
								}
							}
						}

						.load-more {
							margin-top: 30px;
							margin-bottom: 150px;
							text-align: center;
						}
					}
					
					&.orders {
						thead th {
							/*border-top: 1px solid #F3F5F6;*/
							border-top: 0;
							border-bottom: 1px solid #F3F5F6;
							padding: 10px 18px 15px 15px;
							font-weight: 400;
						}

						td {
							padding: 11px 15px;
						}

						.dataTables_length {
							display: none;
						}

						.dataTables_filter {
							display: none;
						}

						.dataTables_info {
							display: none;
						}

						.dataTables_paginate {
							display: none;
						}

						.label {
							font-weight: 400;
							font-size: 14px;

							&.label-default {
								background-color: #F3F3F3;
								color: #333;
								border: 1px solid #E4E4E4;
							}
						}

						.ion-alert-circled {
							font-size: 18px;
							margin-left: 6px;
							color: #B296DD;
							position: relative;
							top: 1px;
						}
					}

					&.work {
						margin-bottom: 50px;
						
						.pic {
							max-width: 90%;
							margin-bottom: 40px;
							position: relative;

							&:hover {
								.mask {
									opacity: 1;
								}
							}

							.mask {
								opacity: 0;
								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								border-radius: 6px;
								color: #fff;
								padding: 10px 15px;
								background: rgba(76, 103, 133, 0.91);
								font-family: $helvetica;

								@include transition(all .2s linear);

								.title {
									font-weight: 600;
									font-size: 14px;
									padding-bottom: 8px;
									position: relative;

									&:after {
										content: '';
										position: absolute;
										bottom: 0;
										left: 0;
										height: 1px;
										width: 50%;
										background: #6A819B;
									}
								}

								.description {
									font-size: 12px;
									line-height: 17px;
									margin-top: 8px;
								}

								.date {
									position: absolute;
									bottom: 10px;
									font-weight: 600;
									font-size: 12px;
								}
							}
							
							img {
								border-radius: 6px;
							}
						}
					}
				}
			}
		}

		.profile-info {
			position: absolute;
			top: 0;
			bottom: 0;
			right: -23%;
			width: 22%;
			background: #fff;
			border-left: 1px solid #E8EBF0;

			@include animation(showProfileInfo .4s ease-out forwards);

			@media (max-width: $maxMedium) {
				width: 28%;
			}

			@media (max-width: $maxSmall) {
				width: 100%;
				position: relative;
				float: left;
				border-left: 0;
			}

			.avatar {
				text-align: center;
				padding-top: 20px;
				padding-bottom: 20px;
				border-bottom: 1px solid #DFE2E9;
				background: url('#{$imagesPath}/bg.jpg');
				background-position: 50% 50%;
				background-size: cover;
				position: relative;

				&:before {
					position: absolute;
					content: '';
					left: 0;
					bottom: 0;
					width: 100%;
					height: 100%;
					background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 1%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0.37) 71%, rgba(0, 0, 0, 0.51) 100%);
				}

				img {
					/*border-radius: 50%;*/
					/*max-width: 62px;*/
					position: relative;
					border-radius: 3px;
					max-width: 65px;
					border: 3px solid #fff;
				}

				.name {
					margin-top: 10px;
					font-size: 15px;
					font-weight: 600;
					color: #fff;
					position: relative;
				}

				.position {
					font-size: 14px;
					font-weight: 600;
					color: #fff;
					position: relative;
				}

				.social {
					margin-top: 5px;
					position: relative;

					i {
						font-size: 15px;
						margin: 0 5px;
						color: #fff;
					}
				}
			}

			.main-details {
				border-bottom: 1px solid #DFE2E9;

				.col {
					float: left;
					width: 50%;
					padding: 10px 0;
					text-align: center;
					font-size: 13px;
					color: #666;

					&:first-child {
						border-right: 1px solid #DFE2E9;
					}

					.value {
						font-weight: 600;
						font-size: 14px;
						margin-bottom: 3px;
						color: #333;
					}
				}
			}

			.details {
				padding: 0 20px;
				margin-top: 20px;

				.field {
					margin-bottom: 15px;
					font-size: 13px;

					label {
						text-transform: uppercase;
						color: #999;
						letter-spacing: .2px;
					}

					.value {
						font-weight: 600;
						color: #454545;
					}

					.sub {
						color: #757575;
						margin-top: 3px;
					}
				}
			}
		}

	}

}