#account {

	#content {
		padding: 0;

		#sidebar {
			left: 0;
			top: 0;
			bottom: 0;
			position: absolute;
			width: 22%;
			background: #fcfcfc;
			border-right: 1px solid #E8ECF1;

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

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

			.sidebar-toggler {
				position: absolute;
				top: 8px;
				left: 32px;
				font-size: 36px;
				cursor: pointer;
			}

			h3 {
				margin: 0;
				text-align: center;
				font-size: 19px;
				padding: 22px 0;

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

			.menu {
				list-style-type: none;
				padding: 0;
				margin: 0;

				@media (max-width: $maxSmall) {
					margin-top: 15px;
					padding-bottom: 10px;
				}

				li {
					a {
						display: block;
						padding: 13px 30px;
						font-size: 15px;
						color: #555;
						text-decoration: none;

						@include transition(all .2s linear);

						&.active,
						&:hover {
							color: #6787DA;
						}

						i {
							min-width: 30px;

							&.ion-ios7-person-outline {
								font-size: 30px;
								position: relative;
								top: 4px;
							}

							&.ion-ios7-email-outline {
								font-size: 24px;
								position: relative;
								top: 4px;
							}

							&.ion-ios7-help-outline {
								font-size: 24px;
								position: relative;
								top: 4px;	
							}

							&.ion-card {
								font-size: 21px;
								position: relative;
								top: 3px;
							}
						}
					}
				}
			}
		}

		#panel {
			top: 0;
			position: relative;
			width: 78%;
			margin-left: 22%;
			padding: 24px 50px;
			padding-bottom: 80px;

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

			@media (max-width: $maxSmall) {
				position: relative;
				width: 100%;
				margin-left: 0;
				padding: 24px;
			}


			/* account-profile.html specific styles */
			&.profile {
				h3 {
					margin: 0;
					font-size: 18px;
				}

				.intro {
					margin-top: 25px;
					color: #555;
				}

				form {
					width: 65%;
					margin-top: 35px;

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

					.form-group {
						margin-bottom: 25px;
					}

					.avatar-field {
						position: relative;
						left: -15px;
						margin-bottom: 35px;

						label {
							margin-top: 22px;
							color: #4F587A;
							font-weight: 500;
							margin-bottom: 10px;
						}
					}

					.action {
						margin-top: 40px;
					}

				}
			}

			/* account-billing specific styles */
			&.billing {
				h3 {
					margin: 0;
					font-size: 18px;
				}

				.plan {
					margin-top: 40px;

					.current-plan {
						font-size: 15px;

						label {
							margin-right: 20px;
							font-weight: 600;
						}

						.change-plan {
							display: inline-block;
							margin-left: 20px;
							font-size: 14px;

							.ion-edit {
								margin-left: 5px;
								font-size: 13px;
							}
						}

						.status {
							.value {
								color: #3FA244;
								font-weight: 600;
							}
						}
					}

					.current-cc {
						position: relative;
						margin-top: 35px;
						padding-top: 35px;
						padding-bottom: 40px;
						font-size: 15px;
						color: #444;

						&:before {
							content: '';
							position: absolute;
							top: 0;
							height: 2px;
							width: 100px;
							background: #eee;
						}

						&:after {
							content: '';
							position: absolute;
							bottom: 0;
							height: 2px;
							width: 100px;
							background: #eee;
						}

						label {
							margin-right: 20px;
							font-weight: 600;
						}

						img {
							max-width: 25px;
							margin-right: 8px;
							position: relative;
							top: -2px;
						}

						.manage-cc {
							display: inline-block;
							margin-left: 20px;
							font-size: 14px;

							.ion-edit {
								margin-left: 5px;
								font-size: 13px;
							}
						}

						.next {
							font-size: 13px;
							display: block;
							margin-top: 4px;
						}
					}

					.invoices {
						margin-top: 40px;

						h3 {
							font-size: 17px;
							font-weight: 600;
							color: #555;
						}

						table {
							margin-top: 25px;

							tr:first-child {
								td {
									border-top: 0;
								}
							}
						}
					}
				}
			}

			/* account-notifications specific styles */
			&.notifications {
				h3 {
					margin: 0;
					font-size: 18px;
				}

				.settings {
					margin-top: 40px;

					.digest {
						h4 {
							font-weight: 600;
							font-size: 16px;
							margin-bottom: 15px;
						}

						p {
							width: 80%;
							font-size: 13px;
						}
					}

					.types {
						margin-top: 40px;
						
						h4 {
							font-weight: 600;
							font-size: 16px;
							margin-bottom: 30px;	
						}

						section {
							margin-bottom: 30px;

							.title {
								text-transform: uppercase;
								color: #999;
								font-weight: normal;
								display: block;
								margin-bottom: 10px;
								font-size: 15px;
							}

							.row {
								margin-bottom: 5px;

								@media (max-width: $maxSmall) {
									margin-bottom: 15px;
								}
							}

							.bootstrap-switch {
								float: right;
								font-family: $helvetica;

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

								.bootstrap-switch-default {
									font-size: 13px;
								}
							}
						}
					}

					.actions {
						margin-top: 40px;
					}
				}
			}

			/* account-support specific styles */
			&.support {
				h3 {
					margin: 0;
					font-size: 18px;
				}

				.topics {
					margin-top: 40px;

					.topic {
						margin-top: 30px;

						i {
							font-size: 36px;
							/*color: #74A9E2;*/
							color: #9696D1;
							position: relative;
							top: 2px;

							&.ion-pie-graph {
								font-size: 34px;
								top: 4px;
							}

							&.ion-archive {
								font-size: 37px;
							}
						}

						a {
							font-size: 16px;
							color: #444;
							font-weight: 600;
							text-decoration: none;
						}

						p {
							font-size: 15px;
							margin-top: 3px;
							color: #444;
						}
					}
				}
			}
		}

	}

}