/*=== Helpdesk screen CSS ===*/
.helpdesk .login_panel {
	width: 390px;
}

.tabs_panel.helpdesk .item.helpdesk {
	display: inline-block;
	color: #3D3D3D;
	font-size: 16pt;
	margin: 16px 0 0 14px;
	padding: 4px 10px;
	text-shadow: 0 1px 0 #FFFFFF;
	vertical-align: top;
}

.HelpdeskLayout {
	
	.panels {
		.box-sizing;
		padding-left: 14px;
		width: 100%;

		html.rtl & {
			padding-left: 0px;
			padding-right: 14px;
		}

		.panel_helper {
			width: 100%;
		}
	}
	
	.AgentArea .panel .panel_content {
		.resize_compensation_top(0px);
	}
	
	.AgentArea .panel.threads {
		
		.toolbar {
			background: none;
			filter: none;
			border: 0px;
			border-radius: 0px;
			margin-left: 16px;

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

			.content {
				padding: 0px;
			}

			.checkmail {
				float: none;
				padding: 0px;
				border-radius: 0px;
				border: 0px;
				box-shadow: none;
				background: none;
				margin: 4px 0px 0px 8px;
			}

			.new_request {
				.icon {
					display: none;
				}

				.text {
					display: inline-block;
				}
			}
		}
		
		.panel_top {
		   border-radius: 5px 0px 0px 0px;
		   padding: 10px 46px;
		   background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACtJREFUeNo0iIEJACAAwlT8/1GPMAsaKGNMYpskAOPRdq9tWbrifpaOAAMAMvEO3ANCJPYAAAAASUVORK5CYII=") repeat scroll 0 0 #F1F1F1;
	   }
	}
	
	.panel.threads .toolbar .checkmail:hover {
		background: none;
	}
	
	.UserArea {
		
		.panel.threads .toolbar {
			
			.new_request {
				display: inline-block;
				min-width: 200px;
			}
			
			.text {
				display: inline-block;
			}
			
			.icon {
				display: none;
			}
		}
	}
}

.panel.threads .middle_bar {
	.resize_compensation_top(47px);
	.resize_compensation_bottom(41px);
	
	.HelpdeskLayout .UserArea & {
		.resize_compensation_top(0px);
		.resize_compensation_bottom(0px);

		border-radius: 5px 0px 5px 5px;
		box-shadow: -1px 0 4px rgba(0, 0, 0, 0.23);
		background: #fff;
		overflow: hidden;
	}
}


.panel.thread_viewer {
	
	.panel_center {
		
		.thread_content > .buttons {
			padding: 0px 20px 18px 18px;
			margin: 0px;
		}

		.buttons .new_post {
			float: left;

			html.rtl & {
				float: right;
			}
		}
	}
	
	.new_request {
		
		.fields {
			padding: 16px;
			
			.input {
				font-size: 10pt;
				width: 100%;
				min-height: 200px;
			}
			
			.buttons {
				text-align: left;
				margin: 15px 0px 20px;
				padding: 0px;
				
				.button.create {
					margin-right: 6px;
					padding: 5px 12px;
				}
				
				.button.upload {
					.transition(~"background 500ms ease, border-color 500ms ease");
					
					float: right;
					background: #FFFDD6;
					border: 0px solid #fff;
					background: none;
					color: #555;
					text-shadow: none;
					font-weight: normal;
					margin: 3px;
					
					&.dragOver {
						margin: 0px;
						background: #FFFDD6;
						border: 3px dashed #EFE164;
					}
					
					.icon {
						display: inline-block;
						vertical-align: middle;
						width: 16px;
						height: 16px;
						background: url("images/sprites.png?%VERSION%") no-repeat -120px -120px;
					}
				}
			}
		}
		
		.placeholder {
			font-size: 10pt;
			padding-top: 6px;
			text-indent: 9px;
		}
		
		
	}
	
	.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%;
		min-height: 100%;
		visibility: hidden;

		&.active {
			visibility: visible;
			opacity: 0.5;
		}
		
		.inner {
			.box-sizing;

			height: 100%;
			border: 3px dashed #E2DA36;
			border-radius: 5px;
		}
	}
	
	.toolbar {
		
		.watcher, .watcher:hover
		{
			background: #EBE5E5;
			border-color: #EBE5E5;
			box-shadow: none;
			cursor: default;
		}
		
		.from .link {
			margin-left: 5px;
		}
	}
	
	.panel_content {
		margin: 0px !important;
		padding: 0px !important;
	}
	
	.middle_bar {
		.resize_compensation_top(76px);
		.resize_compensation_bottom(92px);
	
		&.new_request {
			.resize_compensation_top(0px);
			.resize_compensation_bottom(57px);
		}
		
		&.own_thread {
			.resize_compensation_top(57px);
		}
	}
	
	.panel_top {
		padding: 14px 18px !important;
		
		.subject {
			min-height: 1.3em;
		}
		
		.title {
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			margin: 4px 0px;
			padding: 0;
			font-size: 12pt;
			font-weight: normal;
			
			&.has_contactcard {
				position: relative;
				left: -11px;
			}
			
			&.expand {
				position: relative;
				overflow: visible;
			}
			
			.text {
				overflow: hidden;
				padding: 4px 4px 0;
				position: relative;
				top: -4px;
				display: block;
			}
			
			.founded {
				padding-left: 7px;
			}
			
			.link {
				font-size: 9pt;
				display: inline-block;
				margin: 0px 10px;
			}
		}
		
		.link.cancel {
			float: right;
			margin-top: 8px;
		}
	}
	
	.panel_bottom {
		height: auto;
		border: 0px;
		border-radius: 0px;
	}
	
	.panel_center {
		background: #F9F9F9;
		
		.link.more {
			margin: 17px 37px 0px;
		}
	}
	
	.toolbar {
		float: right;
		background: none;
		filter: none;
		border-bottom: 0px;
		
		html.rtl & {
			float: left;
		}
		
		.content {
			padding: 0px;
		}
	}
	
	.post {
		font-size: 11pt;
		margin: 18px 20px 18px 18px;
		background: #fff;
		border: 1px solid #ddd;
		border-radius: 4px;
		overflow: hidden;
		box-shadow: 0px 0px 0px #CCCCCC;

		.transition(all 600ms linear);
		
		&.unseen {
			box-shadow: -1px 3px 4px 0 #ddd;

			-webkit-transform: translate(0px, -3px);
			-moz-transform: translate(0px, -3px);
			-ms-transform: translate(0px, -3px);
			transform: translate(0px, -3px);
		}
		
		.attachments {
			margin: 0px 18px;
			padding: 10px 0px;
			border-top: 1px solid #EDE6D0;
			
			.attachment {
				margin: 14px 20px 0 0;
				font-size: 9pt;
				
				.download {
					cursor: pointer;
				}
			}
		}
	}
	
	.post {
		
		.header {
			padding: 12px 18px 0px;

			.name {
				font-size: 13pt;
			}

			.close {
				float: right;
				display: inline-block;
				height: 10px;
				margin: 2px -6px 0 10px;
				width: 10px;
				cursor: pointer;
				background: url("images/sprites.png?%VERSION%") no-repeat -240px -260px;
				visibility: hidden;

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

			.date {
				float: right;
				color: #8B8B8B;
				font-size: 9pt;

				html.rtl & {
					float: left;
				}
			}

			.link {
				font-size: 9pt;
			}
		}
		
		&:hover .close.canBeDeleted {
			visibility: visible;
		}
		
		.content {
			padding: 10px 19px 16px;
		}
		
		code, .code {
			white-space: pre;
			border: 1px dashed #B6AD9E;
			font-size: 12px;
			overflow: auto;
			padding: 8px;
		}
		
		&.request {
			.header .link {
				color: #B2B2B2;
			}
			
			.content {
				color: #656565;
			}
			
			&.unseen .content {
				color: #000000;
			}
		}
		
		&.response {
			background: #FEFFE7;
			position: relative;
			
			.header .link {
				color: #BAAE77;
			}
			
			.content {
				color: #716D51;
			}
			
			&.unseen .content {
				color: #000000;
			}
		}
		
		&.internal {
			background: #F8FFE6;
			margin-left: 100px;
			
			.header .link {
				font-size: 9pt;
				color: #9DBF7A
			}
			
			.content {
				padding-left: 100px;
				color: #647151;
			}
			
			&.unseen .content {
				color: #000;
			}
			
			.content::before {
				float: left;
				background: url("images/sprites.png?%VERSION%") repeat -280px -200px;
				content: "";
				width: 60px;
				height: 40px;
				margin-left: -80px;
				opacity: 0.3;
			}
		}
	}
	
	.quick_reply {
		max-height: 310px;
	
		&.internal {
			background: #F8FFE6;
		}
	
		&.hidden {
			max-height: 0px;
		}
	
		.buttons .button.upload {
			float: right;
			background: #FFFDD6;
			border: 0px solid #fff;
			background: none;
			color: #555;
			text-shadow: none;
			font-weight: normal;
			margin: 3px;
			.transition(~"background 500ms ease, border-color 500ms ease");

			html.rtl & {
				float: left;
			}

			&.dragOver {
				margin: 0px;
				background: #FFFDD6;
				border: 3px dashed #EFE164;
			}

			.icon {
				display: inline-block;
				vertical-align: middle;
				width: 16px;
				height: 16px;
				background: url("images/sprites.png?%VERSION%") no-repeat -120px -120px;
			}
		}
	
		&.active .attachments {
			max-height: 73px
		}
	}
	
	.quick_reply,
	.new_request {

		.attachments {
			padding: 0px;

			.attachment {
				margin: 0px;
				padding-right: 10px;
				.box-sizing();
			}

			.attachment_content {
				background: #ffffff;
			}

			.image {
				min-height: 0px;

				.text {
					margin: 0px;
				}
			}

			.buttons {
				margin: 6px 0px 0px;

				.button {
					margin: 0px;
				}
			}

			.count2 .attachment { max-width: 50%; }
			.count3 .attachment { max-width: 33%; }
			.count4 .attachment { max-width: 25%; }
			.count5 .attachment { max-width: 20%; }
		}
	}
}

.panel.threads {
	width: 40%;
	
	.panel_top .search_block {
		padding-right: 0;

		html.rtl & {
			padding-right: 30px;
		}
	}
	
	.items_list .item {
	
		.item_content {
			padding-left: 16px;
		}

		& .subject,
		& .from {
			display: block;
			overflow: hidden;
		}

		.from {
			font-weight: bold;
		}

		.subtitle {
			color: #606060;
			font-size: 11pt;

			.HelpdeskLayout .UserArea & {
				font-size: 13pt;
				font-weight: normal;
			}
		}

		&.selected .subtitle {
			color: #fff;
		}

		.separator {
			display: block;
		}

		.state {
			float: right;
			display: inline-block;
			padding: 2px 6px;
			border-radius: 4px;
			margin-left: 6px;
		}

		&.resolved .state {
			background: #B3EE90;
			color: #587848;
			border: 1px solid #BFE6A9;
		}

		&.pending .state,
		&.deferred .state  {
			background: #F5F593;
			color: #9F742B;
			border: 1px solid #EEEDA8;
		}

		&.answered .state,
		&.waiting .state {
			background: #DCDCDC;
			color: #707070;
			border: 1px solid #D7D7D7;
		}
	}
	
	.panel_bottom {
		padding: 8px 14px 6px;
		
		a {
			display: inline-block;
			margin-right: 10px;
			
			&.selected,
			&.selected:hover {
				background: #fff;
				border-radius: 4px;
				padding: 4px 9px;
				color: #3d3d3d;
				text-decoration: none;
				cursor: default;
				outline: none;

				border: 1px solid #e0e0e0;
				box-shadow: 0 2px 2px #E7E7E7 inset;
			}
		}
		
		.pagination {
			float: right;
		}
	}
}

.HelpdeskLayout {
	
	.settings .panel .fieldset .buttons {
		text-align: left;
	}
	
	.details {
		border-bottom: 1px solid #EDEDED;
		background: #FFFFEB;
	}
	
	.details_content {
		padding: 10px 18px;
	}
	
	.external_content {
		border: 0px;
		display: block;
		width: 100%;
		height: 200px;
	}
	
	.products {
		margin-top: 10px;
		
		.product {
			border-bottom: 1px solid #EDEDED;
			
			& > .title {
				margin-bottom: 10px;
			}
			
			.icon {
				display: inline-block;
				vertical-align: middle;
				width: 31px;
				height: 31px;
				margin-right: 4px;
				background: url("images/sprites.png?%VERSION%") no-repeat -400px -411px;
			}
			
			.name {
				font-size:12pt;
			}
			
			.buttons {
				text-align: left;
			}
			
			.licenses,
			.keys {
				margin: 0px 0px 16px 35px;
			}
			
			.licenses .license {
				display: inline-block;
				background: #4AA14A;
				border: 1px solid #2A912A;
				border-radius: 3px;
				color: #fff;
				padding: 2px 6px;
				line-height: 100%;
			}
			
			.keys {
				.title {
					margin-bottom: 6px;
				}
				
				.key {
					margin: 0px 0px 4px 10px;
				}
				
				.text {
					font-size: 11pt;
					color: #000;
					font-style: italic;
				}
				
				.buttons {
					margin-top: 4px;
				}
			}
		}
	}
}





.LoginLayout.helpdesk .login_panel .login_panel_content {
	-webkit-perspective: 800px;
	-moz-perspective: 800px;
	-o-perspective: 800px;
	perspective: 800px;

/*	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;*/

	/*min-height: 360px;*/
//	height: 700px;
	margin-top: 100px;
}
.LoginLayout.helpdesk .login_panel .content {
	-webkit-transform-style: flat;
	-moz-transform-style: flat;
	-o-transform-style: flat;
	transform-style: flat;

	overflow: hidden;
	position: relative;
}

.LoginLayout.helpdesk .login_panel .content.forgot .row {
	border-radius: 4px !important;
}



/*.LoginLayout.helpdesk .login_panel .content.flipIn {

	-webkit-animation: flipIn 200ms ease-in forwards;
	-moz-animation: flipIn 200ms ease-in forwards;
	animation: flipIn 200ms ease-in forwards;
}
.LoginLayout.helpdesk .login_panel .content.flipOut {
	-webkit-animation: flipOut 400ms ease-out forwards;
	-moz-animation: flipOut 400ms ease-out forwards;
	animation: flipOut 400ms ease-out forwards;
}*/

.LoginLayout.helpdesk .login_panel .content {
	position: absolute;
	visibility: visible;
	opacity: 1;

	-webkit-transition: -webkit-transform 400ms ease-in, opacity 100ms ease-in 250ms, visibility 10ms ease-in 260ms;
	-moz-transition: -moz-transform 400ms ease-in, opacity 100ms ease-in 250ms, visibility 10ms ease-in 260ms;
	transition: transform 400ms ease-in, opacity 100ms ease-in 250ms, visibility 10ms ease-in 260ms;

	/*-webkit-box-shadow: 0px 0px 0px #fff;*/
	/* hack for FF, fix antialiasing */
	-moz-box-shadow: 0px 0px 0px #fff;
	box-shadow: 0px 0px 0px #fff;

/*	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;*/
}



.LoginLayout.helpdesk .login_panel {
	vertical-align: top !important;
}
.LoginLayout.helpdesk .login_panel .content.register,
.LoginLayout.helpdesk .login_panel .content.social_register {
	margin: 0 57px;
}
.LoginLayout.helpdesk .login_panel .content.social_register .fieldset,
.LoginLayout.helpdesk .login_panel .content.send .fieldset {
	margin-top: 20px;
}
.LoginLayout.helpdesk .login_panel .content.send {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	transform: rotateY(0deg);
}

.LoginLayout.helpdesk .login_panel .content.send .question {
	box-shadow: 0 1px 1px #DDDDDD inset;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	border: 1px solid #d7d7d7;
	border-radius: 4px;
	height: 214px;
	width: 350px;
	color: #000;
	font-size: 11pt;
	padding: 6px 8px;
	resize: none;
}
.LoginLayout.helpdesk .login_panel .content.social_register .question_title,
.LoginLayout.helpdesk .login_panel .content.send .question_title {
	display: block;
	font-size: 11pt;
	color: #929292;
}
.LoginLayout.helpdesk .login_panel .content.login,
.LoginLayout.helpdesk .login_panel .content.forgot {
	margin-left: 410px;
	margin-top: 40px;
}

.LoginLayout.helpdesk .login_panel .content.forgot,
.LoginLayout.helpdesk .login_panel .content.changepass,
.LoginLayout.helpdesk .login_panel .content.register,
.LoginLayout.helpdesk .login_panel .content.signin,
.LoginLayout.helpdesk .login_panel .content.activation,
.LoginLayout.helpdesk .login_panel .content.social_register {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	transform: rotateY(180deg);
	visibility: hidden;
	opacity: 0;
}
.LoginLayout.helpdesk .login_panel .content.activation {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	transform: rotateY(180deg);
	width: 240px;
	white-space: normal;

	font-size: 12pt;
	text-shadow: 0px 1px 0px #f3f3f3;
}

.LoginLayout.helpdesk .login_panel.flipForgot .content.login,
//.LoginLayout.helpdesk .login_panel.flipForgot .content.send,
.LoginLayout.helpdesk .login_panel.flipRegister .content.login,
.LoginLayout.helpdesk .login_panel.flipRegister .content.send,
.LoginLayout.helpdesk .login_panel.flipSignin .content.login,
.LoginLayout.helpdesk .login_panel.flipSocialRegister .content.login,
.LoginLayout.helpdesk .login_panel.flipSocialRegister .content.send,
.LoginLayout.helpdesk .login_panel.flipActivation .content.login,
.LoginLayout.helpdesk .login_panel.flipChangepass .content.login {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	transform: rotateY(180deg);
	visibility: hidden;
	opacity: 0;
}
.LoginLayout.helpdesk .login_panel.flipForgot .content.forgot,
.LoginLayout.helpdesk .login_panel.flipChangepass .content.changepass,
.LoginLayout.helpdesk .login_panel.flipRegister .content.register,
.LoginLayout.helpdesk .login_panel.flipSignin .content.signin,
.LoginLayout.helpdesk .login_panel.flipSocialRegister .content.social_register {
	-webkit-transform: rotateY(360deg);
	-moz-transform: rotateY(360deg);
	transform: rotateY(360deg);
	visibility: visible;
	opacity: 1;
}
.LoginLayout.helpdesk .login_panel.flipActivation .content.activation {
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	transform: rotateY(0deg);
	visibility: visible;
	opacity: 1;
}
/*=== END Helpdesk screen CSS ===*/

