$page-color: #77aa45;
$hovered-color: $page-color;
$selected-color: $page-color;

// Overwrite hover color
html {

	.main-header {
		background-image: url('../Images/backgrounds/header_calendar.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 {

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

		.button:hover {
			color: $hovered-color;
		}

	}

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

	// Calendar
	.sidebar .RadCalendar {

		.rcRow .rcSelected {
			background: $selected-color;
		}
	}

	// Scheduler
	.RadScheduler {

		.rsSelected >.rsButton,
		.rsPressed >.rsButton,
		.rsButton.rsPressed {
			border-color: $selected-color;
			background-color: $selected-color;
		}

		.rsSelectedSlot {
			background: $selected-color;
		}

		.rsIconClose:before,
		.rsIconDelete:before {
			content: "\e61d";
		}

		.rsAdvancedEdit.rsAdvancedModal {
			border: 0;
		}

		.rfbRow {
			padding-left: 100px;
		}

		.rfbLabel {
			margin-left: -100px;
			width: 100px;
		}

		.rsBody .rsCommandFooter {
			margin: 15px -15px -15px;
			padding: 15px;
		}

		.rsCommandFooter {
			text-align: right;
			
			.rsButton {
				min-width: 70px;
				text-align: center;
			}

		}

	}

	// controls
	& {
		.RadPicker {
			.rcCalPopup:hover,
			.rcCalPopup:focus,
			.rcTimePopup:hover,
			.rcTimePopup:focus {
				background-color: $hovered-color;
			}
		}

		.RadCalendarTimeView td.rcSelected a,
		.RadCalendar .rcMain .rcRow .rcSelected a,
		.RadCalendarMonthView #rcMView_Today,
		.RadCalendarMonthView .rcSelected a {
			background-color: $selected-color;
			border-color: $selected-color;
		}

		.RadCalendar {
			.rcFastPrev:hover,
			.rcPrev:hover,
			.rcNext:hover,
			.rcFastNext:hover {
				border-color: $selected-color;

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

		.RadDropDownList .rddlFocused {
			border-color: $hovered-color;
			background-color: $hovered-color;
		}
		.rddlPopup .rddlItemSelected {
			background-color: $hovered-color;
		}

		.RadButton_MetroTouch.rbButton.rbSelected {
			background: $selected-color;
			border-color: $selected-color;
		}

		.RadScheduler .rsPrimary {
			background: $page-color;
			border-color: $page-color;
		}
	}


	// Window
	.RadWindow .rwTitleBar {
		background: $page-color;
	}
	
	// mobile
	.mobile {

		.breadcrumb {
			color: $page-color;

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

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


// RadCalendar
html .RadCalendar {

	.rcTitlebar,
	.rcMain {
		border: 0;
	}

	.rcTitlebar {
		border-bottom: 1px solid #cdcdcd;
	}

	.rcWeek th {
		border-bottom: 1px solid #e5e5e5;
	}
}

// RadScheduler
html .RadScheduler {

	.rsTitle {
		color: #fff;
		background: $page-color;
	}

	.rsAdvancedEdit .rbButton.icon {
		margin: -2px 0 0 5px;
		padding: 0;
		color: $page-color;
		font-size: 1.8em;
		border: 0;
		background: transparent;
	}

	.rsCheckBoxList {

		input {
			visibility: hidden;

			&:checked {

				& + label:before {
					font-family: OutlookSampleApp;
					content: "\e61e";
				}
			}
		}

		label {
			position: relative;

			&:before {
				content: "";
				position: absolute;
				left: -20px;
				top: 3px;
				width: 16px;
				height: 16px;
				line-height: 16px;
			}
		}

		.Personal {
			label:before {
				background: #94cbfa;
			}
		}

		.Work {
			label:before {
				background: #acd975;
			}

		}

		.Development {
			label:before {
				background: #deacff;
			}

		}

		.Design {
			label:before {
				background: #fb9898;
			}

		}

		.Marketing {
			label:before {
				background: #ffb75e;
			}

		}
	}

    .rsInvalid {
        display: block !important;
    }
}

// Window
html .RadWindow {
	padding: 0;

	.rwTitleBar {
		margin: 0;
	}

	.rwTitleWrapper .rwTitle  {
		padding-left: 0;
		line-height: 34px;
	}

	.rwContent {
		position: relative;
		padding: 0;
	}


	.rwIcon {
		display: none;
	}

	// ListBox
	.RadListBox {
		display: block;

		.rlbGroup {
			border: 0;
		}

		.rlbList {
			padding: 10px 0;
		}
		
		.rlbItem {
			position: relative;
			line-height: 40px;
			cursor: pointer;

			&.rlbSelected {
				color: #000;
				background: transparent;
			}

			&.rlbHovered {}

			&.checked {
				background: #f9f9f9;

				&:before {
					content: "\E037";
					position: absolute;
					right: 20px;
					top: 10px;
					line-height: 20px;
					color: $page-color;
					font: 1.3em TelerikWebUI;
				}
			}

		}

		.rlbTemplate {
			padding-left: 45px;
		}

		.photo {
			width: 32px;
			height: 32px;
			border-radius: 16px;
			position: absolute;
			top: 50%;
			margin: -16px 0 0 -36px;
		}
	}

	.footer {
		position: absolute;
		left: 15px;
		right: 15px;
		bottom: 20px;
		padding-top: 20px;
		border-top: 1px solid #e5e5e5;
	}

	.selectedCount {
		float: left;
	}
	.buttons {
		float: right;
	}
}

// Mobile
.mobile {

	.RadScheduler {

		.rsApt {
			background-color: #66bde5;
		}
		
		div.rsAptContent {
			color: #fff;
			border-color: rgba(0,0,0,0.2);
			background: transparent;
		}

		.rsAdvancedEdit .RadPicker {
			width: 160px;
		}
	}
}