/*=== Screens CSS ===*/
.screens {
	.box-sizing;
	.resize_compensation_top(@theme-tabs-height);

	height: 100%;
	
	.single_mode & {
		.resize_compensation_top(0px);
	}
	
	.screen {
		height: 100%;
	}
}
/*=== END Screens CSS ===*/
/*=== Panels CSS ===*/
.panels,
.panel_helper {
	height: 100%;
	font-size: 0;
	white-space: nowrap;
}
.panels .panel_helper {
	vertical-align: top;
	display: inline-block;
}
.panel {
	font-size: 9pt;
	height: 100%;
	white-space: normal;

	box-shadow: -1px 0 4px rgba(0,0,0,0.23);
	border-radius: 5px;
	
	.rtl & {
		box-shadow: 1px 0 4px rgba(0,0,0,0.23);
	}
	
	.panels & {
		vertical-align: top;
		display: inline-block;
	}
	
	.resize_handler {
		.user-select(none);

		float: right;
		width: 6px;
		margin-right: -6px;
		height: 100%;
		cursor: e-resize;

		position: relative;
		left: -6px;
		z-index: 100;

		html.rtl & {
			float: left;
		}

		&.active {
			width: 100px;
			left: -50px;
			margin-right: -100px;
		}
	}
	
	.panel_content {
		.box-sizing;
		.resize_compensation_top(@theme-toolbar-height); /* toolbar offset*/

		height: 100%;
	}
	
	.middle_bar {
		.box-sizing;
		height: 100%;
	}
	
	.panel_top {
		background: #f8f8f8;
		white-space: nowrap;
		border-bottom: 1px solid #e2e2e2;
		color: #555566;
		padding: 6px 10px 6px 34px;

		html.rtl & {
			padding-left: 10px;
			padding-right: 34px;
		}

		.custom_checkbox {
			margin-top: 3px;
			margin-left: -20px;
			margin-right: 8px;
			vertical-align: middle;

			html.rtl & {
				margin-left: 0px;
				margin-right: -20px;
			}
		}
	}
	
	.panel_center {
		height: 100%;
		background: #fff;
	}
	
	.panel_bottom {
		background-color: #F8F8F8;
		border-radius: 0 0 0 4px;
		border-top: 1px solid #E2E2E2;
		height: 26px;
		padding: 14px 20px 0
	}
	
	.theme-panel();
}

.panelClear () {
	box-shadow: none;
	border-radius: 0px;
	
	.toolbar {
		background: none;
		border: 0px;
		border-radius: 0px;
		filter: none;
		
		.content {
			display: block;
			text-align: center;
			padding-left:  16px;
			padding-right:  17px;
			
			.item {
				display: block;
				border-radius: 5px;
				border-color: #7bbe45;
				color: #fff;
				font-size: 10pt;
				font-weight: bold;
				text-shadow: 0px 1px 0px rgba(0,0,0,0.3);
				box-shadow: none;
				padding-top: 5px;
				padding-bottom: 2px;
				overflow: hidden;
			}

		}
		
		.theme-clear-panel-toolbar();
	}
	
	.panel_center {
		border: 0px;
		background: none;
	}
	
	.customscroll-scrollbar-vertical {
		right: 4px;
	}
}
/*=== END Panels CSS ===*/
/*=== Panel Item Viewer CSS ===*/
.panel.item_viewer {
	width: 60%;
	border-radius: 5px;
	margin: -2px 0 0 -2px;
    padding: 2px 0 0 2px;
	background: #fff;
	position: relative;
	z-index: 1;
	background: #fff;
	
	html.rtl & {
		margin-left: 0px;
		margin-right: -2px;
		padding-left: 0;
		padding-right: 2px;
	}
	
	.notification {
		font-size: 18px;
		color: #ccc;
		padding: 26px 20px;
		display: block;
		text-align: center;
	}
	
	.attachments {
		padding: 20px;
		color: #3d3d3d;
		
		.download_menu {
			margin-bottom: 10px;
			
			.content {
				max-height: 0px;
				overflow: hidden;
				margin-left: 24px;
				
				.transition(max-height 500ms ease 0s);
				
				.link {
					margin-top: 10px;
				}
			}
			
			&.expand .content {
				max-height: 200px;
			}
			
			.control {
				display: inline-block;
				float: right;
				margin: 10px 0px 0px -16px;
			    width: 16px;
				height: 10px;
				background: url("images/sprites.png?%VERSION%") no-repeat -880px -240px;
				cursor: pointer;
				
				&:hover {
					background-position: -880px -260px;
				}
			}
			
			.link {
				display: inline-block;
				
				&.all {
					margin-right: 20px;
					margin-bottom: 0px;
				}
				
				.icon {
					display: none;
				}
				
				&.all .icon {
					display: inline-block;
					vertical-align: middle;
					width: 16px;
					height: 16px;
					background: url("images/sprites.png?%VERSION%") no-repeat 40px 40px;
					margin-right: 8px;
					float: left;
					background-position: -920px -240px;
				}
				
				&.separately .icon {
					background-position: -960px -240px;
				}
				
				&.to_filestorage .icon {
					background-position: -1000px -240px;
				}
				
				.text {
					overflow: hidden;
				}
			}
			
		}
	}
}
/*=== END Panel Item Viewer CSS ===*/
/*=== Common List CSS ===*/
.items_list {
	height: 100%;
	
	.section_title {
		text-transform: uppercase;
		padding: 10px 17px 10px 17px;
		color: #777777;
		cursor: default;
		font-weight: bold;
		white-space: nowrap;
		display: block;
		text-shadow: 0px 1px 0px #fff;
		
		html.rtl & {
			padding-left: 0px;
			padding-right: 12px;
		}
		
		.control {
			float: right;
		}
	}
	
	.use_threads .threaded {
		background: #f9f8f6;
		border-left: 5px solid #E3E3E3;
		max-height: 0px;
		

		html.rtl & {
			border-left: 0px solid #E3E3E3;
			border-right: 5px solid #E3E3E3;
		}

		&.show {
			max-height: 80px;

			.transition(max-height 300ms ease-out);
		}

		.link {
			color: #4477bb;

			&:hover {
				color: #c74747;
			}
		}
	}
	
	.item {
		background: #fdfdfd;
		font-weight: normal;
		line-height: 140%;
		white-space: nowrap;
		cursor: default;
		color: #3d3d3d;
		position: relative;
		max-height: 80px;
		overflow: hidden;
		
		.from, .subject {
			.fadeout_text_init();
			.fadeout_text(#fdfdfd);
		}
		
		&.unseen {
			background: @theme-list-unseen-item-bg;
			font-weight: bold;
			
			.from, .subject {
				.fadeout_text(@theme-list-unseen-item-bg);
			}
		}
		
		&.deleted {
			.transition(max-height 250ms ease);

			overflow: hidden;
			max-height: 0px !important;
		}
		
		&.checked {
			background: @theme-list-checked-item-bg;
			
			.from, .subject {
				.fadeout_text(@theme-list-checked-item-bg);
			}
		}
		
		&.selected {
			background-color: @theme-list-selected-item-bg;
			color: #fff;
			
			.from, .subject {
				.fadeout_text(@theme-list-selected-item-bg);
			}
			
			.custom_checkbox .icon {
				border-color: #577da1;
				box-shadow: 0 1px 0 #AAD2F8;
			}
			
			.theme-list-selected-item();
		}
		
		.item_content {
			padding: 14px 16px 14px 14px;
			border-bottom: 1px solid #e8e8e8;

			html.rtl & {
				padding-left: 16px;
				padding-right: 14px;
			}
		}
		
		.controls {
			display: inline-block;
			float: left;
			margin: 1px 8px 0px 0px;

			html.rtl & {
				float: right;
				margin-left: 8px;
				margin-right: 0px;
			}
		}
		
		.data {
			display: block;
			overflow: hidden;
		}
		
		.size,
		.date,
		.attachments {
			color: #999999;
			display: inline-block;
			float: right;
			font-size: 8pt;
			margin-top: 2px;
			margin-left: 4px;

			html.rtl & {
				float: left;
				margin-left: 0px;
				margin-right: 4px;
			}
		}
		&.selected .size,
		&.selected .date {
			color: #fff;
		}
		
		.title,
		.subtitle {
			display: block;
			margin-bottom: 10px;
			font-size: 10.5pt;
		}
		.subtitle {
			font-size: 10pt;
			margin-bottom: 0px;
		}
		&.selected .subtitle {
			color: inherit;
		}
		
		.separator {
			clear: both;
		}
		
		.theme-list-item();
	}
	
	.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;
		}
	}
	
	&.collapsible {
		.item.accordion {
			.collapse_handler {
				display: inline-block;
				vertical-align: middle;
				width: 12px;
				height: 12px;
				margin-right: -2px;
				background-image: url("images/sprites.png?%VERSION%");
				background-repeat: no-repeat;
				background-position: 40px 40px;

				&.expanded { background-position: -760px -240px; }
				&.collapsed { background-position: -800px -240px; }
			}

			.children .title {
				max-height: 29px;
				.transition(~"max-height 300ms ease 0ms, opacity 200ms ease 0ms, padding 300ms ease 0ms");
			}

			&.collapsed .children .title {
				max-height: 0px;
				opacity: 0;
				padding-top: 0px;
				padding-bottom: 0px;
				overflow: hidden;
			}
		}

		.item.selected > .title {
			.collapse_handler {
				&.expanded { background-position: -760px -260px; }
				&.collapsed { background-position: -800px -260px; }
			}
		}
	}
}

.items_list_group_style() {
	@fontSize: 10pt;
	@fontWeight: bold;
	
	.items_list .item {
		font-size: 10pt;
		background: none;
		max-height: inherit;
		
		.title {
			color: #777777;
			text-decoration: none;
			font-size: @fontSize;
			font-weight: @fontWeight;
			line-height: normal;
			padding-top: 4px;
			padding-bottom: 7px;
			padding-left: 16px;
			cursor: default;
			display: block;
			white-space: nowrap;
			outline: none;
			margin-bottom: 0px;

			.name {
				display: block;
				overflow: hidden;
				margin-right: 10px;
				
				//.fadeout_text_init();
				//.fadeout_text(@theme-group-style-item-bg);
				
				html.rtl & {
					margin-right: 0px;
					margin-left: 10px;
				}
			}
			
			.text {
				display: inline-block;
				vertical-align: middle;
			}

			.icon {
				display: inline-block;
				vertical-align: middle;
				width: 20px;
				height: 17px;
				background-image: url("images/sprites.png?%VERSION%");
				background-repeat: no-repeat;
			}
			
			&.droppableHover .name {
				.fadeout_text(desaturate(darken(@theme-group-style-item-bg, 5%), 10%));
			}
		}
		
		&.selectable {
			& > .title {
				cursor: pointer;
				color: #626262;
				text-shadow: 0px 1px 0px #fff;

				&:hover {
					color: #40444C;
				}
				
				&.virtualEmpty .title,
				&.virtualEmpty .title:hover {
					color: #AAAAAA;
				}
			}
		}
		
		&.selected > .title {
			color: #fff !important;
			background: @theme-group-style-selected-item-bg; 
			
			.name {
				.fadeout_text(@theme-group-style-selected-item-bg-color);
			}

			&.droppableHover .name {
				.fadeout_text(desaturate(darken(@theme-group-style-selected-item-bg-color, 5%), 10%));
			}
			
			.theme-group-style-selected-item();
		}
		
		.count {
			display: inline-block;
			float: right;
			margin-right: 10px;
			padding: 2px 10px;

			html.rtl & {
				margin-right: 0px;
				margin-left: 10px;
				float: left;
			}

		}
		
		&.selected > .title .count {
			border-radius: ~"11px/10px";

			.theme-clear-panel-list-item-count();
		}
		
		.theme-group-style-item();
	}
	
	.cssanimations & .item .title.recivedAnim {
		.animation(highlight 0.5s linear);
	}
	
	.item .title.droppableHover {
		background: desaturate(darken(@theme-group-style-item-bg, 5%), 10%) !important;
		color: #626262 !important;
		text-shadow: 0px 1px 0px #fff !important;
	}
	
	.item.selected .title.droppableHover {
		background: desaturate(darken(@theme-group-style-selected-item-bg-color, 5%), 10%) !important;
		color: #fff !important;
		text-shadow: 0px 1px 0px #678197 !important;
	}
	

}

.list_notification {
	font-size: 18px;
	color: #ccc;
	padding: 6px 14px 26px;
	display: block;
	text-align: center;
	
	&.search_results {
		border-bottom: 1px solid #E5E5E5;
		background: #FCFCFC;
	}
	
	.link {
		float: right;
		font-size: 9pt;
		margin-left: 10px;
		
		html.rtl & {
			float: left;
			margin-left: 0px;
			margin-right: 10px;
		}
	}
	
	.description {
		display: block;
		padding-top: 20px;
	}
}
/*=== END Common List CSS ===*/

/*=== Toolbar CSS ===*/
.toolbar {
	@bottomBorder: 1px solid #cacfd5;
	@background: #e0e7ef;
	
	.itemHover() {
		box-shadow: inset 0px -1px 4px #eee, inset 0px 1px 0px #d5d5d5;
	};
	
	background: @background;
	border-bottom: @bottomBorder;
	border-radius: 4px 4px 0 0;
	white-space: nowrap;
	
	.content {
		display: block;
		font-size: 0.1px;
		padding: 11px;
		
		& > .item,
		.group > .item {
			display: inline-block;
			vertical-align: middle;
			background-color: #fafafa;
			box-shadow: inset 0px -1px 4px #eee, inset 0px 1px 0px #fff;
			border: 1px solid #c5c5c5;
			border-radius: 4px;
			font-size: 9pt;
			text-decoration: none;
			line-height: 140%;
			cursor: pointer;
			height: 22px;
			padding: 4px 6px 0;
			position: relative;
			margin-right: 8px;
			color: #626262;

			&:hover:not(.disabled),
			&.expand {
				.itemHover();
			}

			html.rtl & {
				margin-left: 8px;
				margin-right: 0px;
			}

			.theme-common-toolbar-item();

			&:last-child {
				margin-right: 0px;

				html.rtl & {
					margin-left: 0px;
				}
			}

			&.checkmail  {
				float: right;
				margin-right: 0px;

				html.rtl & {
					float: left;
					margin-left: 0px;
				}
			}

			&.passive,
			&.passive:hover {
				color: #888888;
				cursor: default;
				box-shadow: none;
				background: #FAFAFA;
			}

			.arrow {
				display: inline-block;
				vertical-align: middle;
				height: 8px;
				width: 13px;
				background: url("images/sprites.png?%VERSION%") no-repeat -320px -45px;
				
				.spritesX2();

				.expand & {
					background-position: -340px -45px;
				}
			}

			.text {
				display: inline-block;
				display: none;
				vertical-align: middle;
				font-weight: bold;
			}

			.icon {
				display: inline-block;
				vertical-align: middle;
				width: 18px;
				height: 18px;
				background-image: url("images/sprites.png?%VERSION%");
				background-repeat: repeat-x;
				
				.spritesX2();
			}
			
			.hint {
				background-color: #c0c0c0;
				border: 1px solid #c0c0c0;
				border-radius: 3px;
				color: #FFFFFF;
				padding: 1px 3px;
				vertical-align: middle;
			}
		}
	   
		.group {
			display: inline-block;
			position: relative;
			margin-right: 8px;

			html.rtl & {
				margin-left: 8px;
				margin-right: 0px;
			}

			& > .item {
				margin-right: 0px;
				margin-left: 0px;
				border-radius: 0px;
				border-left-width: 0px;
				border-right-width: 1px;

				html.rtl & {
					margin-right: 0px;
					margin-left: 0px;
					border-radius: 0px;
					border-left-width: 1px;
					border-right-width: 0px;
				}

				&:first-child {
					border-left-width: 1px;
					border-radius: 4px 0px 0px 4px;

					html.rtl & {
						border-right-width: 1px;
						border-radius: 0px 4px 4px 0px;
					}
				}

				&.control,
				&:last-child {
					border-radius: 0px 4px 4px 0px;

					html.rtl & {
						border-radius: 4px 0px 0px 4px;
					}
				}
			}

			&.expand > .item {
				.itemHover();
			}
		}
	}
	
	.disabled .item,
	.item.disabled {
		.opacity(0.3);
		color: #888888;
		cursor: default;
		
		&:hover {
			//background: #fafafa;
			//box-shadow: 0 -1px 4px #EEEEEE inset, 0 1px 0 #FFFFFF inset;
		}
	}
	
	.checkmail .icon {
		background-position: -160px -40px;

		.no-cssanimations & {
			background: url("images/check.png?%VERSION%") no-repeat 0px 0px;
		}
	}

	.mark .icon {
		background-position: 0px -40px;
	}
	.move .icon {
		background-position: -40px -40px;
	}
	.delete .icon {
		background-position: -120px -40px;
	}
	.watcher .icon {
		background-position: -840px -240px;
	}
	.spam .icon {
		background-position: -80px -40px;
	}
	.notspam .icon {
		background-position: -400px -40px;
	}
	.empty_spam .icon {
		background-position: -440px -40px;
	}
	.empty_trash .icon {
		background-position: -520px -40px;
	}
	.upload .icon {
		background-position: -600px -40px;
	}
	.download .icon {
		background-position: -640px -40px;
	}
	.share .icon {
		background-position: 0px -318px;
	}
	.edit .icon {
		background-position: -720px -40px;
	}
	.resolve .icon {
		background-position: -800px -40px;
	}
	.wait_client .icon {
		background-position: -760px -40px;
	}
	.new_request .icon {
		background-position: -840px -40px;
	}
	.new_folder .icon {
		background-position: -880px -40px;
	}

	.forward .icon {
		background-position: -80px -80px;
	}
	.forward:hover .icon {
		background-position: -80px -100px;
	}

	.reply .icon {
		background-position: 0px -80px;
	}
	.reply:hover .icon {
		background-position: 0px -100px;
	}

	.replyall .icon {
		background-position: -40px -80px;
	}
	.replyall:hover .icon {
		background-position: -40px -100px;
	}

	.save .icon {
		background-position: -160px -80px;
	}
	.save:hover .icon {
		background-position: -160px -100px;
	}

	.print .icon {
		background-position: -120px -80px;
	}
	.print:hover .icon {
		background-position: -120px -100px;
	}

	.new_window .icon {
		background-position: -200px -80px;
	}
	.new_window:hover .icon {
		background-position: -200px -100px;
	}

	.back .icon {
		background-position: -360px -40px;
	}
	.new_contact .icon {
		background-position: -200px -40px;
	}
	.new_group .icon {
		background-position: -240px -40px;
		width: 20px;
	}
	.add_to .icon {
		background-position: -280px -40px;
	}
	.remove_from .icon {
		background-position: -560px -40px;
	}
	.import .icon {
		background-position: -400px -40px;
	}
	.export .icon {
		background-position: -400px -40px;
	}
	.new_message .icon {
		background-position: -480px -40px;
	}
	.send_files .icon {
		background-position: -960px -40px;
	}
	
	.theme-common-panel-toolbar();
}

.cssanimations .toolbar .item.process .icon {
	.animation(cycle 0.8s linear infinite);
}
/*=== END Toolbar CSS ===*/




/*=== Field list CSS ===*/
.fields {
	
	.fieldset {
		
		.subtitle {
			margin-top: 0px;
			font-size: 13.5pt;
		}
	}
	
	.fieldgroup {
		padding-bottom: 20px;
		
		&:last-child {
			padding-bottom: 0px;
		}
	}
	
	.hint {
		color: #929292;
		padding: 0 0 10px;
		padding: 0px;
		margin: 0 0 10px;
		text-shadow: 0 1px 0 #FFFFFF;
		
		p {
			margin: 0px;
		}
		
		.cssanimations &.highlight {
			.animation(highlight 500ms linear);
		}
	}
	
	.row {
		margin: 0px 0px 6px;
		font-size: 0px;
		.clearfix_helper();
		
		&.dates {
			display: inline-block;
			
			&.editable {
				display: inline-block;
				cursor: pointer;
				color:#47b;
				
				&:hover {
					text-decoration: underline;
					color:#c74747;
				}
			}
		}
		
		&.fluid {
		}
		
		&:last-child {
		}
		
		&.description value {
			-ms-word-break: break-all;
			word-break: break-word;
		}
		
		& > * {
			font-size: 9pt;
		}
		
		.placeholder {
			display: inline-block;
			vertical-align: middle;
			width: 0px;
			height: 0;
			position: relative;
			color: #bbb;
			font-size: 12pt;
			white-space: nowrap;
			text-indent: 5px;
			cursor: text;
			float: left;
			
			html.rtl & {
				float: right;
			}
			
			.title {
				color: #bbb;
			}
		}
		
		&.filled .placeholder,
		&.focused .placeholder {
			overflow: hidden;
		}

	}
	
	.label {
		.box-sizing;
		display: inline-block;
		padding-right: 10px;
		.break-word();
		
		html.rtl & {
			padding-right: 0px;
			padding-left: 10px;
		}
		
		&.required:before {
			content:  "*";
			width: 0.6em;
			display: inline-block;
			color: red;
			margin-left: -0.6em;
		}
	}
	
	td.label {
		display: table-cell;
	}
	.value {
		.box-sizing;
	}
	
	.input {
		.box-sizing;

		width: 140px;
		width: 300px;
		padding: 4px 6px;
		border-radius: 4px;
		margin-right: 16px;
		
		html.rtl & {
			margin-right: 0px;
			margin-left: 16px;
		}
		
		&:last-child {
			margin-right: 0px;
			
			html.rtl & {
				margin-left: 0px;
			}
		}
		
		&[maxlength="2"] {
			width: 3em;
		}
		&[maxlength="3"] {
			width: 3.5em;
		}
		&[maxlength="4"] {
			width: 4em;
		}
		&[maxlength="5"] {
			width: 4.5em;
		}
	}
}
/*=== END Field list CSS ===*/

/*=== END Field list CSS ===*/
.draggable {
	width: 0px; /* don't change */
	height: 0px; /* don't change */
	
	.content {
		cursor: move;
		width: 200px;
		height: 200px;
		margin: -100px 0px 0px -100px;
		
		.count-text {
			.transparent_color_helper(#000, 0.5);
			
			padding: 8px 16px;
			border-radius: 2px;
			line-height: 100%;
			display: inline-block;
			margin: 100px 0px 0px 100px;

			z-index: 10002;
			color: #fff;
			padding: 6px 10px;
			min-width: 30px;
		}
	}
}
/*=== END Field list CSS ===*/
