.mailbox-env {
	&:extend(.clearfix all);
	
	.mailbox-sidebar {
	
		.mailbox-list {
			margin-top: @default-padding;
			
			@media screen and (max-width: @screen-sm) {
				margin-top: @base-padding;
			}
			
			
			li {
				border-bottom: 1px solid @default-border-color;

				a {
					display: block;
					color: @main-text-color;
					padding: @base-padding @base-padding;
					
					&:hover {
						color: darken(@main-text-color, 15%);
					}
					
					.badge {
						margin-top: 0px;
					}
				}
				
				&.active > a {
					color: @brand-primary;
					font-weight: bold;
				}
				
				&:last-child {
					border-bottom: 0;
				}
				
				&.list-header {
					font-size: @font-size-small - 2;
					padding: @base-padding @base-padding;
					font-weight: bold;
					color: @main-text-color;
					.upper;
				}
			}
		}
	}
	
	.mail-env {
		background: #FFF;
		padding: @default-padding/2 0;
		margin-bottom: @default-padding;
		
		.mail-table {
			color: @main-text-color;
			margin-bottom: 0;
			
			> thead, > tfoot {
				
				> tr {
						
					> td, > th {
						color: darken(@main-text-color, 15%);
						font-weight: normal;
						padding-left: @base-padding;
						padding-right: @base-padding;
						padding-top: 0;
						padding-bottom: @default-padding/2;

						&:after {
							display: none;
						}
					}
				}
			}
			
			> tfoot {
				
				> tr {
					
					> td, > th {
						border-bottom: 0;
						padding-top: @default-padding/2;
						padding-bottom: 0;
					}
				}
			}
			
			> tbody {
				
				> tr {
					
					> td, > th {
						padding-left: @base-padding;
						padding-right: @base-padding;
						vertical-align: middle;
					}
					
					a {
														
						&:hover {
							color: darken(@main-text-color, 20%);
						}
					}
					
					&.unread {
						
						.col-name {
							font-weight: bold;
							
							a {
								color: darken(@main-text-color, 20%);
							}
						}
					}
					
					&.highlighted {
						background-color: fade(#ffffcc, 35%);
					}
				}
			}
			
			// Columns
			.col-cb, .col-options {
				width: 2%;
			}
			
			.col-cb {
				padding-left: @default-padding;
				
				@media screen and (max-width: 550px) {
					padding-left: @default-padding/2;
				}
			}
			
			.col-subject {
				
				a {
					display: block;
					max-width: 250px;
					.text-overflow();
					
					@media screen and (max-width: @screen-sm) {
						max-width: 150px;
					}
				}
				
				@media screen and (max-width: 550px) {
					padding-right: @default-padding/2;
				}
			}
			
			.col-options {
				text-align: right;
			}
			
			.col-time {
				width: 12%;
				text-align: right;
				padding-right: @default-padding;
				
				@media screen and (max-width: 550px) {
					display: none;
					padding-right: @default-padding/2;
				}
			}
			
			.col-header-options {
				padding-right: @default-padding;
				
				@media screen and (max-width: 550px) {
					padding-right: @default-padding/2;
				}
			}
			
			// Other
			a {
				color: @main-text-color;
			}
			
			.btn {
				margin-bottom: 0;
			}
			
			.checkbox {
				margin: 0;
			}
								
			.mail-select-options {
				float: left;
				position: relative;
				top: 2px;
				
				@media screen and (max-width: 450px) {
					display: none;
				}
			}
			
			.mail-pagination {
				float: right;
				margin-right: -@base-padding;
				
				.next-prev {
					position: relative;
					display: inline-block;
					margin-bottom: -@base-padding/2;
					margin-left: @base-padding;
					&:extend(.clearfix all);
					
					a {
						position: relative;
						display: block;
						float: left;
						color: darken(@main-text-color, 25%);
						font-size: @font-size-base + 1;
						
						i {
							margin: 0 8px;
						}
						
						&:hover {
							background: fade(@default-border-color, 25%);
						}
						
						&:first-child {
							margin-right: @base-padding/2 + 4;
							
							&:after {
								display: block;
								height: 10px;
								width: 1px;
								background: @default-border-color;
								position: absolute;
								top: 50%;
								margin-top: -5px;
								right: -5px;
								content: '';
							}
						}
					}
				}
			}
			
			.star {
				position: relative;
				display: inline-block;
				font-size: @font-size-base + 2;
				margin-top: -3px;
				
				&.starred {
					color: @brand-warning !important;
				}
			}
		}
	}
	
	.mail-compose {
		@input-height: 48px;
		
		background: #fff;
		padding: @default-padding;
		margin-bottom: @default-padding;
		
		.compose-message-editor {
			margin-bottom: @base-margin;
			
			textarea {
				min-height: 150px;
			}
		}
		
		.form-group {
			position: relative;
			
			label {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 5;
				line-height: @input-height;
				padding: 0 @default-padding/2;
				font-weight: bold;
				color: darken(@main-text-color, 15%);
				.user-select(none);
			}
			
			input, textarea {
				position: relative;
				z-index: 1;
			}
			
			input.form-control {
				height: @input-height;
				padding-left: 80px;
			}
			
			.field-options {
				position: absolute;
				right: 0;
				top: 0;
				z-index: 4;
				padding: 14px @default-padding/2;
				
				a {
					display: block;
					background: #cccccc;
					color: #fff;
					font-size: 10px;
					float: left;
					margin-left: @base-padding/2;
					padding: 3px 5px;
					
					&:hover {
						background-color: #999;
					}
				}
			}
		}
	}
	
	.mail-header {
		border-bottom: 1px solid @default-border-color;
		margin-bottom: @base-margin;
		padding-bottom: @base-margin;
		
		h3 {
			margin: 0;
			
			i {
				font-size: @font-size-h4;
			}
			
			@media screen and (max-width: @screen-sm-min) {
				margin-bottom: @base-margin;
			}
		}
	}
	
	.mail-single {
		background: #fff;
		padding: @default-padding;
		margin-bottom: @default-padding;
		
		.mail-single-header {
			border-bottom: 2px solid #f0f0f0;
			padding-bottom: @base-margin;
			margin-bottom: @base-margin;
			&:extend(.clearfix all);
			
			> h2 {
				float: left;
				margin: 0;
				font-size: @font-size-h3;
				
				@media screen and (max-width: @screen-sm) {
					float: none;
					margin-bottom: @base-margin;
					font-size: @font-size-h4 + 2;
					
					.go-back {
						font-size: @font-size-small - 1;
					}
				}
				
				.go-back {
					display: block;
					color: lighten(@main-text-color, 15%);
					font-size: @font-size-base;
					margin-top: @base-padding;
					margin-left: -5px;
					
					i {
						color: lighten(@main-text-color, 10%);
					}
				}
				
				.label, .badge {
					margin-left: @base-padding;
				}
			}
			
			.mail-single-header-options {
				float: right;
				
				
				@media screen and (max-width: @screen-sm) {
					float: none;
				}
			}
		}
		
		.mail-single-info {
			border-bottom: 1px solid #f0f0f0;
			padding-bottom: @base-margin;
			margin-bottom: @base-margin;
			&:extend(.clearfix all);
			
			.mail-single-info-user {
				float: left;
				
				> a {
					display: block;
					color: @main-text-color;
					text-decoration: none;
					
					strong, span {
						color: darken(@main-text-color, 15%);
						font-weight: bold;
					}
					
					img {
						float: left;
						margin-right: @base-padding;
					}
					
					em {
						font-style: normal;
						display: block;
						color: #CCC;
						padding-top: 2px;
					}
				}
				
				&.open > a {
					text-decoration: none;
				}
				
				.dropdown-menu {
					width: 100%;
					margin-top: @base-padding;
					
					&:before {
						content: '';
						position: absolute;
						display: block;
						background: inherit;
						.size(10px);
						top: -5px;
						left: 4%;
						.rotate(45deg);
						z-index: 1;
					}
					
					li {
						position: relative;
						z-index: 2;
						
						i {
							display: inline-block;
							margin-right: 2px;
						}
					}
				}
			}
			
			.mail-single-info-options {
				float: right;
				padding-top: @base-padding;
				
				a {
					color: @main-text-color;
					display: inline-block;
					margin-left: @base-padding/2;
					
					i {
						font-size: 16px;
					}
					
					&.starred {
						color: @brand-warning;
					}
				}
			}
		}
		
		.mail-single-body {
			border-bottom: 1px solid #f0f0f0;
			padding-bottom: @base-margin;
			margin-bottom: @base-margin;
			
			p {
				color: darken(@main-text-color, 10%);
			}
		}
		
		.mail-single-attachments {
			
			h3 {
				margin: 0;
				margin-bottom: @base-margin;
				font-size: @font-size-h4 + 5;
				
				i {
					font-size: @font-size-h4;
					position: relative;
					top: -2px;
					display: inline-block;
				}
			}
			
			ul {
				
				li {
					margin-bottom: @base-margin;
					
					.thumb {
						position: relative;
						display: block;
						
						&:before {
							@dist: 8px;
							
							content: '';
							display: block;
							position: absolute;
							background: linear-gradient(to bottom, #fff 0%, @xe-purple 100%);
							.opacity(0);
							left: @dist; right: @dist; top: @dist; bottom: @dist;
							z-index: 1;
							.transition(~"all 100ms ease-in-out");
						}
						
						&:after {
							display: block;
							position: absolute;
							color: #fff;
							content: '\f06e';
							font-family: 'fontawesome';
							left: 50%;
							top: 50%;
							font-size: 22px;
							z-index: 2;
							margin-left: -12px;
							margin-top: -13px;
							.scale(0);
							.transition(~"all 200ms ease-in-out");
						}
						
						&:hover {
							
							&:before {
								.opacity(.4);
							}
							
							&:after {
								.scale(1);	
							}
						}
					}
					
					.img-thumbnail {
						border-width: 2px;
					}
					
					.name {
						display: block;
						margin-top: @base-padding + 2;
						color: darken(@main-text-color, 15%);
						font-weight: bold;
						
						span {
							float: right;
							font-size: @font-size-small - 1;
							color: #ddd;
							font-weight: normal;
						}
					}
					
					.links {
						display: block;
						margin-top: @base-padding/2;
						color: lighten(@main-text-color, 5%);
						font-size: @font-size-small - 1;
						
						a {
							color: @main-text-color;
							
							&:hover {
								color: darken(@main-text-color, 20%);
							}
						}
					}
				}
				
				&.list-inline {
				
					li {
						margin-right: @base-margin;
					}
				}
			}
		}
		
		.mail-single-reply {
			border: 1px solid @input-border;
			padding: @default-padding/2 @base-margin;
			min-height: 70px;
			color: @main-text-color;
			
			a {
				font-weight: bold;
				color: darken(@main-text-color, 15%);
				text-decoration: none;
				
				&:hover {
					color: darken(@main-text-color, 25%);
				}
			}
		}
	}
	
	// Floating
	.mailbox-right {
		float: right !important;
		
		@media screen and (max-width: @screen-sm-min) {
			float: none !important;
		}
	}
	
	.mailbox-left {
		float: left !important;
		
		@media screen and (max-width: @screen-sm-min) {
			float: none !important;
		}
	}
}