.compose-toolbar() {
	background: #f7f7f7;
	filter: none;
	border: none;
	
	.text {
		display: inline-block;
		font-weight: normal !important;
		font-size: 13pt !important;
	}
	
	.item:not(.send):hover {
		color: #4f4f4f;
	}

	.back .text {
		display: none;
	}

	.icon {
		display: none;
	}

	.back .icon,
	.new_window .icon,
	.save_and_close .icon,
	.minimize .icon,
	.maximize .icon,
	.confirmation .icon,
	.pgp .icon {
		display: inline-block;
	}

	.new_window,
	.minimize, .maximize, 
	.save_and_close, {
		border: 0px;
		background: transparent;
		box-shadow: none;
		float: right;

		html.rtl & {
			float: left;
		}
	}
}


/*=== Compose screen CSS ===*/
.MailComposeLayout .panels,
.compose_popup .panels {
	background: #fff;
}
.panel.compose {
	box-shadow: -1px 0 4px rgba(0, 0, 0, 0.23);
	display: inline-block;
	width: 100%;
	overflow: hidden;
	
	.panel.left_panel,
	.panel.right_panel {
		
		.panel_content {
			.resize_compensation_top(0px);
		}
	}
	
	.left_panel {
		z-index: 2;
		width: 80%;
		border: none;
		border-radius: 0;
		box-shadow: 3px 0 2px #f1f1f1;
		
		.box-sizing();
		
		.middle_bar {
			.resize_compensation_top(0px);
			.resize_compensation_bottom(40px);
		}
		
		.panel_top {
			border: 0px;
			background: none;
			padding: 6px 11px;
			position: relative;
		}
		
		.panel_center {
			padding-top: 1px;
			background: none;
		}
		
		.panel_bottom {
			white-space: nowrap;
			word-wrap: normal;
			background: none;
			border: 0px;
			border-radius: 0px;
			height: auto;
			padding: 8px 12px 0 12px;
			overflow: hidden;
			
			.hint {
				display: inline-block;
				padding: 0;
				white-space: nowrap;
				overflow: hidden;
			}
			
			.hotkey_value {
				color: #5a6373;
				text-shadow: 0 1px 0 #FFFFFF;
				margin: 0 4px 0 0;
			}
			
			.hotkey_action {
				color: #222222;
				text-shadow: 0 1px 0 #dddddd;
				margin: 0 12px 0 0;
			}

			.more_hints {
				cursor: pointer;
				vertical-align: top;
				display: inline-block;
				
				.icon {
					overflow: hidden;
					font-size: 16pt;
					cursor: pointer;

					.iconFontInit();

					&:before {
						content: "\e651";
					}
				}
				
				.dropdown .item {
					cursor: auto !important;
					
					&:hover {
						background: none;
					}
				}
			}
		}
		
	}
	
	.right_panel {
		width: 20%;
		border-radius: 0px;
		box-shadow: none;
		position: relative;
		overflow: hidden;
		
		.panel_center, .items_list .item {
			background-color: inherit;
			
			.item_content {
				background-color: #fff;
				box-shadow: 0 2px 6px #ccc;
			}
		}
		
		.middle_bar {
			.resize_compensation_top(37px);
			
			.panel_top {
				padding: 6px 10px;
				text-align: center;
				line-height: 180%;
				background-color: inherit;
				border: none;
				padding-top: 35px !important;
				
				.uploader_button {
					display: inline;
					vertical-align: middle;
					color: #aaa;
					cursor: pointer;
					margin-right: 21px;
					
					&:hover {
						color: #888;
					}
					
					.icon {
						display: inline-block;
						vertical-align: middle;
						width: 24px;
						height: 24px;
						font-size: 28px;
						.iconFontInit();
					}
					
					&.google .icon:before {
						content: "\e654";
					}
					&.dropbox .icon:before {
						content: "\e655";
					}
					&.files .icon:before {
						content: "\e656";
					}
					&.desktop .icon:before {
						content: "\e622";
					}
						
					.text {
						display: none;
					}
				}
				
			}
		}
	}
	
	.html_editor {
		margin-left: 11px;
		margin-right: 11px;
		border-top: solid 1px #e2e2e2 !important;

		.toolbar {
			border: none;
			background-color: #fdfdfd !important;

			.separator {
				border-left: 1px solid #eee;
			}
		}

		.workarea {
			border: none;
		}
	}

	.input.inputosaurus {
		position: relative;
	}
	
	.disable_mask {
		position: absolute;
		opacity: 0.2;
		background: #ccc;
		width: 100%;
		height: 100%;
		cursor: default;
		z-index: 100;
	}

	.panel_content > .toolbar {
		.compose-toolbar();
	}
	
	.notice {
		padding: 8px 11px;
		background: #FFFFC5;
		color: #B5AD94;
		border-bottom: 1px solid #F5EDD4;
	}

	.input {
		border: 1px solid #ccc;
		box-shadow: none;
	}

	table.fields {
		width: 100%;
		
		tr {
			border: none;
		}
			
		&.no-compressed tr.from, &.no-compressed tr.to, &.no-compressed tr.cc, &.no-compressed tr.bcc {
			border-bottom: 1px solid #e2e2e2;
		}

		td {
			padding: 4px 0px;
		}
		
		.label {
			color: #bababa;
			font-size: 13pt !important;
			text-align: right;
			width: 90px;
			padding-right: 10px;

			html.rtl & {
				text-align: left;
			}
		}
		
		.input {
			padding: 8px 10px;
			font-size: 11pt;
			border-radius: 2px;
			
			min-width: 100%;
		    width: 100px !important;
		}
		
		.value .input, .value input {
			color: #444;
			border: none;
			box-shadow: none;
			font-size: 13pt !important;
		}
		
		.inputosaurus-container li.ui-draggable,
		.inputosaurus-moving-container li {
			background-color: #e5eff7;
			color: #5b9bcd;
			border: none;
			box-shadow: none;
			border-radius: 11px;
			padding: 3px 28px 3px 12px !important;
			
			a.ficon {
				margin-top: 0px !important;
				margin-right: 12px !important;
			}

			&.inputosaurus-selected {
				background-color: #5b9bcd;
				color: #fff;
				
				a.ficon {
					color: #fff;
					margin-top: 0px !important;
					margin-right: 12px !important;
				}
			}
		}
		
		textarea.input {
			width: 100%;
			height: 300px;
		}
		
		.link {
			text-decoration: underline;
			cursor: pointer;
			
			&:hover {
				color: #2B5877;
				text-decoration: none;
			}
		}
		
		.from,
		.to,
		.cc,
		.bcc,
		.subject {
			font-size: 11pt;
		}
		
		.to {
			.link {
				display: inline-block;
				font-size: 11pt;
				color: #4477bb;

				&:hover {
					color: #24579b;
				}
			}
			
		}
		
		.show_bcc,
		.show_cc {
			margin-left: 10px;
		}
		.cc, .bcc, .to {
			.inputosaurus {
				padding: 0px;

				.scroll-inner {
					max-height: 100px;
				}
			}
		}
	}
	
	.buttons {
		
		.button.send {
			background: none repeat scroll 0 0 #88CF50;
			border: 1px solid #7BBE45;
			border-radius: 5px 5px 5px 5px;
			color: #FFFFFF;
			display: inline-block;
			font-size: 13pt;
			font-weight: bold;
			padding: 10px 30px;
			box-shadow: none;
			text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
			margin: 10px 11px;
			cursor: pointer;
			
			&.disabled {
				cursor: default;
				opacity: 0.5;
			}
		}
	}
	
	.attachments {
		z-index: 1;
		background-color: #fafafa;
		
		.uploader_mask {
			.box-sizing;
			.transition(opacity 250ms ease 0s);

			background: #FFFDD6;
			padding: 11px;
			color: #D3B910;
			font-size: 18pt;
			text-align: center;
			opacity: 0;
			position: absolute;
			top: 0px;
			left: 0px;
			height: 100%;
			width: 100%;
			visibility: hidden;

			&.active {
				visibility: visible;
				.opacity(0.5);
			}

			.inner {
				.box-sizing;

				height: 100%;
				border: 3px dashed #E2DA36;
				border-radius: 5px;
			}
		}
		
		.items_list {
			height: 100%;
			
			.list_notification {
				padding-top: 24px;
			}
		}
		
		.attachments_container {
			padding: 20px;
		}
	}
	.table-compressor{
		position: absolute;
		bottom: 0;
		left: 0%;
		margin-left: -20px;
		width: 100%;
		height: 16px;
		overflow: hidden;
		cursor: pointer;
		color: #999;
		z-index: 2;
		text-align: center;
		.transition(transform .4s);
		&:hover{
			color: #444;
		}
		&:after{
			position: relative;
			content: "\e66e";
			font-family: 'afterlogic';
			font-size: 18px;
			line-height: 15px;
			
		}
		&.compressed{
			.transform(rotate(180deg));
		}
	}
	
	.theme-compose-screen();
}


.compose_popup {
	z-index: 1000;
	
	&:not(.minimized) {
		position: absolute;
	}
	
	&.minimized {
		bottom: 0;
		height: auto;
		left: auto;
		right: 0;
		top: auto;
		width: auto;
		
		.toolbar {
			background: #f7f7f7;
			box-shadow: 1px 1px 4px #ccc;
			border: none;
			border-radius: none;
			
			.item.minimized_title {
				max-width: 350px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.item.minimized_title, .item.minimized_title:hover,
			.item.maximize,
			.item.save_and_close {
				background: transparent;
				border: none;
				box-shadow: none;
				float: none;

				.text {
					display: inline;
				}
			}

			.item.minimized_title:hover {
				background: transparent !important;
				border: none !important;
				box-shadow: none !important;
			}

			.theme-compose-minimized-toolbar();

			margin: 5px;
			cursor: pointer;
		}
	}
	
	.popup_panel {
		width: 90%;
		height: 90%;
		max-width: 90%;
		padding: 0;
	}
}







/*=== END Compose screen CSS ===*/
