$page-color: #ff4d6b;
$hovered-color: #ff5d78;
$selected-color: #ff3f5e;

// Overwrite hover color
html {

	.main-header {
		background-image: url('../Images/backgrounds/header_contacts.gif');
	}

	.sidebar .btn-new-node,
	.help-menu .rmRootGroup {
		color: $page-color;
	}

	body .RadInput_MetroTouch input.riFocused, 
	body .RadInput_Focused_MetroTouch {
		border-color: $hovered-color;
	}

	// Tooltip
	.RadToolTip {

		.addBtn {
			color: $page-color;
		}

	}

	// Navigation
	.container .RadNavigation {

		.rnvHovered {

			.rnvRootLink{
				border-color: $hovered-color;
				background: $hovered-color;
			}
		}

		.rnvSelected,
		.rnvExpanded {

			.rnvRootLink{
				border-color: $selected-color;
				background: $selected-color;
			}
		}
	}
	.radSkin_BlackMetroTouch .rnvPopup {

		.rnvHovered >.rnvLink {
			background-color: $hovered-color;
		}

		.rnvSelected >.rnvLink {
			background-color: $selected-color;
		}
	}

	// SeachBox
	.rightScndNav {

		.button {
			
			&:hover,
			&.selected {
				color: $hovered-color;
			}


		}

		.RadSearchBox .rsbButtonSearch.rsbHovered {
			background: $hovered-color;
			border-color: $hovered-color;
		}
	}

	.rsbPopup .rsbListItemHovered {
		background: $hovered-color;
	}
	
	// mobile
	.mobile {

		.breadcrumb {
			color: $page-color;

			.item.expanded {
				background-color: $page-color;
			}
		}

		.RadMenuPopup_MetroTouch .rmItem.rmSelected {
			color: $selected-color;
		}
	}


}



.listWrapper {
	overflow: auto;
}

.contacts-list {
	list-style-type: none;
	margin: 0;
	padding: 0 18px 18px 0;
	white-space: nowrap;

	&:after {
		content: "";
		display: block;
		clear: both;
	}

	& > li {
		width: 33.3%;
		float: left;
	}

	.itemTemplate {
		margin: 18px 0 0 18px;
		position: relative;

		&:hover,
		&.selected,
		&.focused {
			border-color: $hovered-color;
		}
	}

	.photo {
		width: 70px;
		height: 70px;
		position: absolute;
		left: 15px;
		top: 20px;
		border-radius: 100px;
		overflow: hidden;
	}

	.header {
		color: $page-color;
		font-size: 22px;
		padding: 10px 10px 10px 70px;
		border-bottom: 1px solid #f2f2f2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.content {
		margin-right: 40px;
		padding-top: 58px;
		overflow: hidden;

		p {
			height: 26px;
			margin: 0 0 20px;
		}

		.label {
			width: 75px;
			margin-top: 4px;
			float: left;
			font-size: 11px;
			text-transform: uppercase;
		}

		.info {
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
}

.itemTemplate,
.editForm {
	border: 1px solid #cdcdcd;
	padding: 5px 30px;
	overflow: hidden;
}


// Edit form
.editForm {
	display: none;
	padding-left: 100px;
	position: absolute;
	left: -1px;
	top: -1px;
	bottom: -1px;
	right: -1px;
	padding-right: 70px;

	.inputs {
		list-style-type: none;
		margin: 10px 0 0;
		padding: 0;

		li {
			margin-bottom: 15px;
		}

		input {
			text-overflow: ellipsis;
			height: 31px;
		}
	}

	.toolbar {
		position: absolute;
		right: 5px;
		top: 7px;

		.icon {
			width: 28px;
			height: 28px;
			position: relative;
			display: inline-block;
			text-indent: -99999px;
			font-size: 2em;
			overflow: hidden;
			text-align: center;
			cursor: pointer;

			&:hover {
				color: $hovered-color;
			}

			&:before {
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				text-indent: 0;
				line-height: 28px;
			}
		}
	}

	.RadInput {
		width: 100%;
	}

	#editFormImg {
		position: absolute;
		top: 27px;
		left: 30px;
		border-radius: 35px;
		overflow: hidden;
	}
}

// Async upload
html .section .RadAsyncUpload {
	position: absolute;
	top: 19px;
	left: 14px;

	.ruButton,
	.ruFileLI {
		display: none
	}

	.ruFakeInput {
		width: 68px;
		height: 68px;
		border-radius: 35px;
		border-width: 2px;
		border-color: transparent;
		font-size: 2em;
		text-align: center;
		background: transparent;
		border-radius: 40px;
	}

	.ruFileInput {
		cursor: pointer;
	}

	.ruSelectWrap {
		margin-top: 0;
		cursor: pointer;
	}

	.ruSelectWrap:hover {

		.ruFakeInput {
			border-color: $page-color;
			background: rgba(255,255,255,0.5);

			&:before {
				color: $page-color;
				font-family: OutlookSampleApp;
				content: "\e620";
				display: block;
				position: absolute;
				top: 20px;
				left: 20px;
			}
		}

	}

}


#contactActionMenu {
	display: none;
	position: absolute;
	top: 60px;
	left: 70px;
	z-index: 2;

	ul {
		list-style-type: none;
	}

	.button {
		display: inline-block;
		margin-right: 10px;
		font-size: 2em;
		cursor: pointer;

		&:hover {
			color: $page-color;
		}
	}
}
.hovered #contactActionMenu {
	display: block;
}
.selected #contactActionMenu {
	display: none !important;
}

// PDF export
.k-pdf-export .contacts-list .photo {
	border-radius: 0 !important;
}


@media only screen and (max-width: 1200px) {
	.contacts-list > li {
		width: 50%;
	}
}

// Mobile
.mobile {
	.contacts-list > li {
		width: 50%;
	}
}