/*=== Settings screen CSS ===*/
.panels.settings {
	.panel {
		background: #F9F9F9;
		/* width: 60%; */
		width: 800px;

		html.non-adjustable & {
			margin-bottom: 4px;
		}
		
		&.navigation {
			background: none;
			width: 15%;
			box-shadow: none;
			border-radius: 0px;
			
			.middle_bar {
				padding-top: 22px;
				margin-top: 0px;
			}
			
			.item {
				padding: 7px 9px 7px 14px;
				white-space: nowrap;
				
				&.selected {
					background: #6fa8de;

					.link {
						color: #fff;
						text-shadow: 0 1px 0 #678197;
					}
				}
				
				.link {
					color: #626262;
					font-weight: bold;
					font-size: 10pt;
					text-decoration: none;
					cursor: pointer;
					text-shadow: 0 1px 0 #FFFFFF;

					&:hover {
						color: #c74747;
					}
				}
				
				.icon {
					display: inline-block;
					vertical-align: middle;
					width: 18px;
					height: 18px;
					margin-right: 4px;
					background: url("images/sprites.png?%VERSION%") no-repeat 100px 0px;
				}
				
				&.common .icon {
					background-position: -120px -160px;
				}
				&.common.selected .icon {
					background-position: -120px -180px;
				}
				
				&.accounts .icon {
					background-position: -160px -160px;
				}
				&.accounts.selected .icon {
					background-position: -160px -180px;
				}
				
				&.calendar .icon {
					background-position: -200px -160px;
				}
				&.calendar.selected .icon {
					background-position: -200px -180px;
				}
				
				&.mobile_sync .icon {
					background-position: -280px -160px;
				}
				&.mobile_sync.selected .icon {
					background-position: -280px -180px;
				}
				
				&.outlook_sync .icon {
					background-position: -240px -160px;
				}
				&.outlook_sync.selected .icon {
					background-position: -240px -180px;
				}
				
				&.helpdesk .icon {
					background-position: -320px -160px;
				}
				&.helpdesk.selected .icon {
					background-position: -320px -180px;
				}
			}
		}
	}
	
	.panel_content {
		.resize_compensation_top(0px);

		margin-right: 0px;
	}
	
	.middle_bar {
		.resize_compensation_top(72px);
	}
	
	.panel_top {
		border: 0px;
		background: 0px;
		padding: 0px;
	}
	
	.panel_center {
		background: none;
	}
	
	.title {
		color: #4d4d4d;
		padding: 35px 20px 15px;
		margin: 0px;
	}
	
	.fieldset {
		background: #f1f1f1;
		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACtJREFUeNo0iIEJACAAwlT8/1GPMAsaKGNMYpskAOPRdq9tWbrifpaOAAMAMvEO3ANCJPYAAAAASUVORK5CYII=');
		background-position: 0 0;
		border: 1px solid #e0e0e0;
		border-radius: 4px;
		margin: 0px 20px 20px;
		padding: 20px;
	}
	
	.fieldblock {
		background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);
		border: 1px solid #D0D0DA;
		border-radius: 4px 4px 4px 4px;
		margin-bottom: 14px;
		padding: 14px;
	}
	
	.fields {
		.row {
			margin-bottom: 14px;
			/*padding-left: 150px;*/

			&:last-child {
				margin-bottom: 0px;
			}

			.label {
				width: 150px;
			/*	margin-left: -150px;*/
				color: #626262;
			}
			
			.input {
				font-size: 10pt;
				padding: 7px 9px 6px;
				/*width: 100%;*/
			}
			
			.value {
				
				&.text {
					padding: 7px 9px 6px;
					font-weight: bold;
					width: 300px;
					display: inline-block;
					
					&.port {
						width: auto;
					}
				}
			}
			
			.custom_radio {
				margin-left: 16px;
				
				&:first-child {
					margin-left: 0px;
				}
			}
		}
		
		.fieldblock .label {
			width: 135px;
		}
	}
}


.panels.settings .fields .hint {
/*	border-radius: 4px;*/
	padding: 4px 6px;
	margin: -4px -6px 6px;
}



.panels.settings .mobile_sync .fields .label {
	float: left;
}
.panels.settings .mobile_sync .fields .value {
	display: block;
	overflow: hidden;
	-ms-word-break: break-all;
	word-wrap: break-word;
}



.panels.settings .workday .input.start,
.panels.settings .workday .input.end {
	width: 125px;
}
.panels.settings .ios_profile a,
.panels.settings .ios_profile a:hover {
	text-decoration: none;
	transition: color 300ms ease 0s;
}
.panels.settings .ios_profile .icon {
	display: inline-block;
	vertical-align: middle;
	width: 24px;
	height: 24px;
	margin-top: -7px;
	background: url("images/sprites.png?%VERSION%") no-repeat -240px -200px;
	transition: opacity 300ms ease 0s;
}
.panels.settings .ios_profile:hover .icon {
	opacity: 0.8;
}

.panels.settings .buttons {
	margin: 0px 20px 15px;
}
.panels.settings .fieldset .buttons {
	margin: 0px;
}

.settings {
	
	.tabs  {
		margin-top: 20px;
		margin-bottom: 16px;
		
		.shortcuts  {
			font-size: 0pt;
			padding: 0px 0px 0px 20px;
			margin: 0px 20px;
			
			.item {
				font-size: 9pt;
				display: inline-block;
				vertical-align: bottom;
				
				a {
					border: 1px solid #e0e0e0;
					border-bottom: 0px;
					display: inline-block;
					padding: 6px 12px 6px;
					margin-right: 4px;
					color: #828282;
					font-weight: bold;
					outline: none;
					background: #F5F5F5;
					text-decoration: none;
					border-radius: 4px 4px 0px 0px;
				}
				
				&.selected a {
					background: #F1F1F1;
					color: #3d3d3d;
					margin-bottom: -1px;
					padding-bottom: 7px;
				}
			}
		}
	}
}

.settings .accounts .panel_top .buttons {
	float: right;
	margin-top: 30px;
}
.settings .accounts .panel_top .button {
	background: none repeat scroll 0 0 #88CF50;
    border-color: #7BBE45;
}
.settings .accounts_list {
	margin: 0px 20px;
	
	.items_list {
		border: 1px solid #d5d9dc;
		background: #fafafa;
		border-radius: 4px;
		
		.item {
			padding: 6px 10px;
			border-bottom: 1px solid #d5d9dc;
			color: #626262;
			cursor: pointer;
			
			&.fetcher {
				
				.icon {
					display: inline-block;
					vertical-align: middle;
					background: url("images/sprites.png?%VERSION%") repeat-x -120px -240px;
					width: 18px;
					height: 18px;
				}
				
				.label {
					color: #929292;
				}
				
				.title {
					font-weight: bold;
				}
			}
			
			&.accounts:last-child {
				border-bottom: 0px;
				background-color: red;
			}
			
			&.selected {
				background: #f1f1f1;
				color: #4d4d4d;
				font-weight: bold;
			}
		}
		
		.button {
			float: right;
		}
		
		.title {
			padding: 0px;
			display: inline-block;
			font-size: 9pt;
		}
	}
}

.settings .accounts_list .item .link.fetcher {
	float: right;
	font-weight: normal;
	margin-left: 12px;
}
.add_fetcher .row.hint {
	margin-top: 16px;
}

.settings .accounts_list .buttons {
	margin: 15px 0px;
	
	.button {
		font-size: 10pt;
	}
}

.settings .accounts_list .item .button {
	cursor: pointer;
	padding: 1px 5px;
	display: inline-block;
	font-size: 9pt !important;

	background: none repeat scroll 0 0 #6FA8DE;
    border: 1px solid #5D97CD;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    text-shadow: 0 1px 0 #4D759B;
}
.settings .folders {

	&.items_list {
		margin-bottom: 10px;
		
		
		.first_sortable_container {
			position: relative;
		}
		
		.item {
			border-top: 1px solid #ccc;
			background: none;
			max-height: inherit;
			overflow: visible;
			
			&.ui-sortable-helper {
				background-color: rgba(240, 240, 240, 0.8);
				box-shadow: inset 0px 0px 1px #ddd;
				
				.title {
					background-color: rgba(240, 240, 240, 0.8);
				}
			}
		}
		
		& > .item:first-child {
			border-top: 0px;
		}
		
		.title {
			padding-top: 4px;
			padding-bottom: 7px;
			padding-right: 0px;
		}
		
		.canDrag .title:hover {
			background: rgba(0,0,0, 0.03) url("images/sprites.png?%VERSION%") no-repeat -1080px -120px;
		}
		
		.title.cannotDrag:hover {
			background: rgba(0,0,0, 0.03);
		}
		
		.title .input {
			width: 200px;
		}
		
		.controls {
			float: right;
			
			htm.rtl & {
				float: left;
			}

			.button {
				display: inline-block;
				width: 20px;
				height: 20px;
				cursor: pointer;
				background: url("images/sprites.png?%VERSION%") no-repeat -200px 0px;
				
				&.disabled {
					background-position: 40px 40px !important;
					cursor: default !important;
				}
				
				&.delete {
					background-position: -640px -120px;
					
					&:hover {
						background-position: -640px -140px;
					}
					
					&.disabled {
						background-position: -640px -140px;
						cursor: default;
					}
				}
				
				&.subscribe {
					background-position: -600px -120px;
					
					&:hover {
						background-position: -600px -140px;
					}
					
					&.subscribed {
						background-position: -560px -120px;
						
						&:hover {
							background-position: -560px -140px;
						}
					}
				}
				
				

				&.up {
					background-position: -680px -120px;
					
					&:hover {
						background-position: -680px -140px;
					}
				}
				&.down {
					background-position: -700px -120px;
					
					&:hover {
						background-position: -700px -140px;
					}
				}
			}
		}
		
		.total .count {
			margin-right: 62px !important;

			html.rtl & {
				margin-right: 0px;
				margin-left: 62px !important;
			}
		}
	}
}




.settings .fields .filter .value {
	word-spacing: 0.7ex;
}
.settings .fields .filter .value .part {
	word-spacing: normal;
	display: inline-block;
}
.settings .fields .filter .input {
	padding: 2px;
	width: 75px;
	margin: 0px;
}
.settings .fields .filter .buttons {
	margin: 0px;
	float: right;
}

.settings .fields .filter .field {
	position: relative;
	display: inline-block;
}
.settings .fields .filter .link,
.settings .fields .filter .link:hover {
	color: #4477bb;
	text-decoration: none;
	border-bottom: 1px dashed #4477bb;
}

.settings .autoresponder .input {
	width: 520px;
}
.settings .autoresponder .message .input {
	height: 145px;
}
.settings .signature .editor_row .custom_radio {
	float: left;
	margin-right: 4px;
}
html.rtl .settings .signature .editor_row .custom_radio {
	float: right;
	margin-right: 0px;
	margin-left: 4px;
}
.settings .signature .editor_row .editor {
	height: 200px;
	padding-top: 1px;
	margin-left: 18px;
}
html.rtl .settings .signature .editor_row .editor {
	margin-right: 18px;
	margin-left: 0px;
}
.settings .signature .editor_row .editor .html_editor {
	.pass_through;
}
/*=== END Settings screen CSS ===*/

