@import "_font-icons.scss";


@font-face {
    font-family: 'OutlookSampleApp';
    src: url('../fonts/OutlookSampleApp.eot?4e35sj');
    src: url('../fonts/OutlookSampleApp.eot?#iefix4e35sj') format('embedded-opentype'), url('../fonts/OutlookSampleApp.woff?4e35sj') format('woff'), url('../fonts/OutlookSampleApp.ttf?4e35sj') format('truetype'), url('../fonts/OutlookSampleApp.svg?4e35sj#OutlookSampleApp') format('svg');
    font-weight: normal;
    font-style: normal;
}

@mixin expandHeight($percentage) {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	height: $percentage;
}



// Common
html,
body,
form {
	height: 100%;
}

form {
	overflow: hidden;
}

body {
	margin: 0;
	padding: 0;
	font: 100 16px "Segoe UI",Arial,Helvetica,sans-serif;
}

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

a {
	color: inherit;
	text-decoration: none;
}

.hidden {
	display: none !important;
}

// Layout
html {

	form {
		white-space: nowrap;
	}

	.slider,
	.page {
		@include expandHeight(100%);
		display: inline-block;
		vertical-align: top;
	}

	.page {
		width: 100%;
		margin-left: -4px;
		padding-top: 56px;
		white-space: normal;
		overflow: auto;

		& > div {
			min-width: 960px;
			box-sizing: border-box;
		}
	}

	.main-header {
		margin-top: -56px;
	}

	.container {
		@include expandHeight(100%);
	}


	.sidebar {
		@include expandHeight(100%);
		float: left;
	}
	.section  {
		@include expandHeight(100%);
		overflow: hidden;
		padding-top: 54px;
	}

	.secondaryMenu {
		margin-top: -54px;

		.rnvItem {
			float: left;
		}
	}

	.scroller {
		@include expandHeight(100%);
		position: relative;
	}

		.gridWrapper,
		.mailDetails {
			@include expandHeight(49.9%); // FF
		}

		.rgMasterTable {
			@include expandHeight(100%);
		}

		.mailDetails {
			overflow: auto;
		}

	.RadWindow {
		white-space: normal;
	}

}



// Page
.page {}

// Slider
.slider {
	width: 0;
	height: 100%;
	position: relative;
	overflow: hidden;
	background: #000;
	transition: width 0.07s 0.07s ease;

	@at-root {
		.expandedSlider .slider {
			width: 200px;
		}
	}


	.logo {
		text-transform: uppercase; color: #8d8d8d ; margin: 0;
 font-size: 16px; font-weight: 400; padding: 16px 10px; text-align: center;
	}

	.RadMenu .rmRootGroup {
		padding: 0;
		background: transparent;
		border: 0;

		.rmRootLink {
			border: 0;

			&:hover {
				color: inherit;
				background: #393939;
			}
		}

		.rmSelected > .rmRootLink {
			background: #2d2d2d;
		}

		.rmFocused > .rmLink {
			box-shadow: none;
		}

	}

	.main-menu .rmRootGroup {

		.rmRootLink {
			height: auto;
			font-size: 18px;
			font-weight: 100;
			position: relative;
			line-height: 52px;


			span.rmLeftImage {
				font-size: 28px;
				margin: 0 10px 0 0 !important;
				width: auto;

				&:before {
					font-family: OutlookSampleApp;
				}
			}
		}

		.rmItem {

			&:hover,
			&.rmSelected {
				background: #393939;

				.rmRootLink {

					&:before {
						content: "";
						height: 100%;
						width: 3px;
						position: absolute;
						left: 0;
						top: 0;
					}
				}
			}

		}
	}


	.mail {

		.rmRootLink:before {
			background: #0082cc;
		}

		.rmLeftImage:before {
			content: "\e602";
		}
	}

	.contacts {

		.rmRootLink:before {
			background: #ff3f5e;
		}

		.rmLeftImage:before {
			content: "\e604";
		}
	}

	.calendar {

		.rmRootLink:before {
			background: #679a35;
		}

		.rmLeftImage:before {
			content: "\e626";
		}
	}

	.notes {

		.rmRootLink:before {
			background: #ec6807;
		}

		.rmLeftImage:before {
			content: "\e605";
		}
	}

	.help-menu {
		background: #000;
		position: absolute;
		top: 100vh;
		margin-top: -75px;
		left: 0;
		text-transform: uppercase;
	}
}


// Header
.main-header {
	padding: 2px 10px;
	color: #fff;

	// Icon
	.icon {
		font-size: 2em;
		line-height: 32px;
	}

	.home-btn {
		float: left;
		padding: 8px 0;
		cursor: pointer;

		.icon  {
			margin-right: 5px;
		}

		.text {
			vertical-align: top;
			font-weight: 400;
			font-size: 24px;
		}
	}

	.home-btn:before {
		font-size: 1.3/1.2*1em;
	}

	// Navigation
	.header-info {
		width: 531px;
		float: right;

		.rnvRootGroupWrapper,
		.rnvRootLink {
			border: 0;
		}
	}

	.header-info > span {
		margin-right: 30px;
	}
}

// Navigation
html .RadNavigation {
	font-size: 16px;

	// RootGroup
	.rnvRootGroup {
		display: block;

		.rnvItem {
			vertical-align: middle;
		}
		&:after {
			content: "";
			display: block;
			clear: both;
		}
	}

	.rnvFocused > .rnvLink {
		box-shadow: none;
	}

	// STatic template
	.rightScndNav {
		float: right;

		.rnvTemplate {
			padding: 0;
			border: 0;
		}

		&.rnvHovered,
		&.rnvSelected,
		&.rnvFocused {

			.rnvRootLink.rnvTemplate {
				background: transparent;
				border-color: transparent;
				box-shadow: none;
			}
		}

		.button {
			display: inline-block;
			padding: 15px;
			cursor: pointer;
		}

		.icon {
			font-size: 1em;
		}

		.text {
			display: inline-block;
			text-indent: -99999px;
		}
	}

	// Sprite
	.rwzSprite {
		display: inline-block;
		vertical-align: top;
	}

	// Icon
	.icon {
		font-size: 2em;
		line-height: 22px;
	}

	// Text
	.rnvLink,
	.rnvText {
		cursor: pointer;
	}
	.rwzSprite + .rnvText {
		margin-left: 10px;
	}

	.user {

		.rnvLink {
			padding-right: 90px;
			background: url("../Images/photo-profile-s.png") 150px 4px no-repeat;
		}

		.rnvText {
			margin: 0;
		}

		.rwzSprite {
			position: absolute;
			right: 0;
			font-size: 1.5em;
		}

		.icon {
			font-size: 1.2em;
		}
	}

	.RadSearchBox + .searchBtn {
		z-index: 1;
		position: relative;
		padding-right: 19px;
		background: #222;
		border-width: 1px 0;
		border-style: solid;
		border-color: #4e4e4e;
		margin-right: -1px;
	}
	.hidden + .searchBtn {

	}


	// SearchBox
	.RadSearchBox {
		position: absolute;
		right: -1px;
		min-width: 0;
		z-index: 2;
		transition: width 0.4s ease;

		&.hidden {
			display: inline-block !important;
			width: 46px !important;
			z-index: 0;
		}

		.rsbInner {
			height: 53px;
			position: relative;
			color: #fff;
			border: 0;
			background: #000;
			overflow: hidden;
		}

		.rsbInput {
			height: 48px;
		}

		.rsbButtonSearch  {
			width: 45px;
			height: 45px;
			box-shadow: none;
			outline: none;
			border-color: transparent;
			cursor: pointer;
			position: absolute;
			right: -1px;
			top: 0;
		}

		.rsbButton .rsbIcon:before {
			font-family: 'OutlookSampleApp';
			content: "\e608";
		}

		@at-root {

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

	&.secondaryMenu {

		// Items
		.rnvItem.rnvFirst {
			margin-right: 60px;
		}
	}

}

// Scroller
.scroller {
	overflow: auto;
	overflow-x: hidden;
}

// Tooltip
html .RadToolTip {
	color: #000;
	background: #fff;
	border-color: #cdcdcd;

	.rtCalloutTopCenter {
		border-bottom-color: #cdcdcd;
		left: auto;
		right: 38px;

		&:before {
			border-bottom-color: #fff;
		}
	}

	.rtContent {
		padding: 15px;
		white-space: nowrap;

		* {
			vertical-align: top;
		}

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

	img {
		display: inline-block;
		margin-right: 17px;
	}

	.content {
		display: inline-block;

		& > span {
			display: block;
		}
	}

	.addBtn {
		padding: 5px 0;
		margin: 10px 0;
		border-width: 1px 0;
		border-style: solid;
		border-color: #cdcdcd;
		cursor: pointer;

		* {
			vertical-align: middle;
		}

		.icon {
			font-size: 2em;
		}
	}
}





// Slide
.rnvSlide {
	min-width: 160px;

	.rnvLink .rnvText {
		cursor: pointer;
	}
}




// Sidebar
.sidebar {
	width: 260px;
	background-color: #f5f5f5;

	// TreeView
	.RadTreeView {
		margin-top: 10px;
		line-height: 1.7em;

		.rtUL {
			display: block;
		}

		.rtLI {}

		.rtPlus {
			top: 1em;
		}

		.rtIn {
			display: block;
			margin-left: -27px;
			padding-left: 27px;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.rtHover .rtIn,
		.rtSelected .rtIn,
		.rtEdit .rtIn {
			color: #000;
			background: #fff;
			border-color: #fff;
		}

		.rtLines {
			.rtLI:before,
			.rtTop:before,
			.rtMid:before,
			.rtBot:before {
				display: none;
			}
		}
	}

	#newFolderContainer {
		padding-left: 1.66667em;
	}

	.btn-new-node {
		margin-top: 7px;
		padding-left: 28px;
		cursor: pointer;
	}

	.rtLI.last {
		border-bottom: 1px solid #e1e1e1;
	}
}


/* Tree Folders */
.mainFolder {
	font-weight: bold;
}

/* INPUTS */
html body .RadInput_MetroTouch input.riFocused, 
html body .RadInput_Focused_MetroTouch {
	outline: none;
}


// Mobile
.mobile {


	// Layout
	& {
		
		.slider {
			.main-menu {
				display: block;
			}
		}

		.container {
			padding-top: 54px;
		}

		.sidebar {
			width: 100%;
			height: auto;
			float: none;
			margin-top: -54px;
		}
	}

	.RadMenu {
		font-size: 13px;
	}


	.main-header .rnvText {
		display: none;
	}
	
	.RadNavigation .user {

		.rnvLink {
			height: 22px;
			padding-right: 70px;
			background: url("../Images/photo-profile-s.png") 15px 4px no-repeat;
		}
	}


	.sidebar {
		font-weight: normal;
	}

	.RadMenuPopup .rmItem.rmSelected {
		background: transparent;
	}

	.RadMenuPopup .rmItem {
		border: 0;
	}

	.breadcrumb {
		overflow: hidden;


		.item {
			position: relative;
			display: inline-block;
			padding: 7px 10px;

			&.selected {
				color: #000;
			}

			&.expanded {
				color: #fff;
			}

			& + .item {
				margin-left: 20px;

				&:before {
					content: "\e60e";
					font-family: 'OutlookSampleApp';
					position: absolute;
					left: -20px;
					top: 10px;
					color: #bfbfbf;
				}
			}

			&.menu {
				display: inline-block;
			}
		}

		.RadMenu {
			vertical-align: middle;

			.rmRootToggle {
				//TODO - disable embedded skin
				border: 0;
				color: inherit;
				background: transparent !important;
				box-shadow: none;

				&:before {
					font-family: OutlookSampleApp;
					content: "\e62e";
				}
			}
		}
	}


	.RadNavigation.secondaryMenu {

		.rnvItem.rnvFirst {
			margin-right: 0;
		}
	}


	.header-info {
		width: 210px;
	}

	.page {}
	.page > div {
		min-width: 600px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.RadNavigation .rightScndNav {

		.horizontalBtn,
		.verticalBtn {
			display: none;
		}
	}
}

