
@import "variables";

$base-font-size: $lt-base-font-size;
$base-font-size-small: $lt-base-font-size-small;

$color: $lt-neutral-primary;

$primary-color: $lt-theme-primary;
$primary-color-hover: $lt-theme-dark;

$primary-color-inactive: $lt-theme-light;

$default-color:$lt-white;
$default-color-hover: $lt-white;


$neutral-dark-color: $lt-neutral-secondary;
$neutral-light-color: $lt-neutral-tertiary;
$neutral-lighter-color: $lt-neutral-light;

$title-color: $color;
$title-link-color: $title-color;
$dropdown-item-color: $title-color;

$spinner-part-highlight: $primary-color;
$spinner-part: $lt-theme-lighter;

$left-panel-background-color: $lt-theme-lighter-alt;
$left-panel-text-color: $lt-theme-primary;

$right-panel-background-color: $lt-white;

$left-install-panel-background-color: $lt-theme-lighter-alt;
// lato regular font path
$lato-font-path: "../fonts/Lato/";

// streamline icons
$icon--streamline-font-path: "../fonts/Streamline/";
$icon--streamline-font-family: "streamline-icons";

//@import "reset";




@import "../../Modules/Branding/Content/Partials/StreamlineIcons";

/* Webfont: Lato-Regular */
@font-face {
	font-family: 'LatoWeb';
	src: url('#{$lato-font-path}Lato-Regular.eot'); /* IE9 Compat Modes */
	src: url('#{$lato-font-path}Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('#{$lato-font-path}Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
	url('#{$lato-font-path}Lato-Regular.woff') format('woff'), /* Modern Browsers */
	url('#{$lato-font-path}Lato-Regular.ttf') format('truetype');
	font-style: normal;
	font-weight: normal;
	text-rendering: optimizeLegibility;
}

@font-face {
	font-family: 'streamline-icons';
	src: url('#{$icon--streamline-font-path}#{$icon--streamline-font-family}.ttf?iyun5n') format('truetype'), url('#{$icon--streamline-font-path}#{$icon--streamline-font-family}.woff?iyun5n') format('woff'), url('#{$icon--streamline-font-path}#{$icon--streamline-font-family}.svg?iyun5n##{$icon--streamline-font-family}') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

// ui fabric variables
$icon-font-path: "../fonts/";
// support for ms ui fabric fonts
@font-face {
	font-family: 'FabricMDL2Icons';
	/*src: url('#{$icon-font-path}fabricmdl2icons-2.68.woff') format('woff'), url('#{$icon-font-path}fabricmdl2icons-2.68.woff2') format('woff2'), url('#{$icon-font-path}fabricmdl2icons-2.68.ttf') format('truetype');*/
	src: url('#{$icon-font-path}fabricmdl2icons-3.54.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

// accept icon for left hand wizdom progress indicator.
.ms-Icon {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-family: 'FabricMDL2Icons';
	font-style: normal;
	font-weight: normal;
	speak: none;
	position: relative; // added to be able to control top:
}

.ms-Icon--Accept::before {
	content: "";
}

.streamline::before {
	font-family: '#{$icon--streamline-font-family}' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	/*line-height: 1; default */ 
	line-height:1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

html, body, install, #Wizdom365 {
	height: 100%;
	width: 100%;
	margin: 0;
	box-sizing:border-box;
}

html {
	background: url(../Content/images/lt-bg.jpg) no-repeat center center fixed;
	background-size: cover;
	overflow: hidden;

	@media (max-width: 768px) {
		overflow:auto;
	}
}

body {
	background: none;
	font-family: "LatoWeb", Tahoma,Helvetica,Arial,sans-serif;
	font-size: $base-font-size;
}

a, a:active, a:focus {
	color: $primary-color;
}
//#D0E7F8
a:hover {
	color: $primary-color-hover !important;
}

.lt-ob-wizard-step {
	&__title {
		position: absolute;
		bottom: 100px;
		text-align: left;
		width: 200px;
		transform: translate(-88px,-20px) rotate(-90deg);
		color: $primary-color-inactive;
		text-transform:uppercase;
		font-weight:600;
		font-size:10px;

		.-completed & {
			color: $primary-color;
		}
	}
}

.lt-ob-wizard {
	padding-top: 40px;
	margin-left: -5px;

	&__spacer {
		height: 24px;
	}

	&__step {
		background: $primary-color-inactive;
		width: 24px;
		height: 24px;
		text-align: center;
		line-height: 25px;
		border-radius: 24px;
		margin: 0 0;
		color: #fff;
		position: relative;

		.ms-Icon {
			padding-left: 5px;
			padding-top: 1px;
		}

		&.-completed {
			background: $primary-color;
		}

		&-up {
			-ms-transform: rotate(90deg);
			-webkit-transform: rotate(90deg);
			transform: rotate(90deg);
		}

		&-rotate {
			-ms-transform: rotate(-90deg);
			-webkit-transform: rotate(-90deg);
			transform: rotate(-90deg);
		}

		&::before {
			content: '';
			position: absolute;
			top: 11px;
			left: -24px;
			width: 24px;
			height: 3px;
			background: $primary-color-inactive;
			z-index: -1;
		}

		&.-completed::before {
			background: $primary-color;
		}
	}



	&__step:first-child::before {
		display: none;
	}
}

.lt-ob-content-itemlist {
	//.lt-ob-content-accelerate {
	display: flex;
	flex-flow: row wrap;
	/* margin-right: -10px; */
	justify-content: space-between;
	padding: 0;
	list-style-type: none;

	&__item {
		border: 1px solid $neutral-lighter-color;
		overflow:hidden;
		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: 49%;
		margin-bottom: 10px;
		display: flex;
		flex-flow: row wrap;
		border-radius: $lt-base-border-radius;

		@media (max-width: 768px) {
			flex-basis: 100%;
		}

		&--full {
			flex-basis: 100%;
		}
	}
}

.hide-spin {
	display: none;
}

.lt-ob-itemlist-item {
	padding: 4px 0 2px 0;

	&__icon {
		flex-basis: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-grow: 0;
		flex-shrink: 0;
		color: $lt-neutral-primary;

		.streamline:before {
			line-height:inherit;
		}

		&--boxed {
			background-color:$lt-theme-primary;
			color:$lt-white;
			height:47px;
		}

		&--large {
			font-size: $lt-base-font-size-large;
		}

		a {
			display: flex;
			text-decoration: none;
			color: $lt-neutral-secondary;
			font-size: $lt-base-font-size-large;

			&:focus, &:active, &:visited {
				color: $lt-neutral-secondary;
			}
		}
	}

	&__content {
		flex-grow: 1;
		padding-left: 10px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		flex-shrink: 0;
		min-height: 41px;

		& > div > a {
			color: $title-link-color;
		}

		div {
			font-size: 15px;
			font-weight: 600;
			line-height: 20px;

			&.small {
				font-size: 13px;
			}
		}

		a {
			font-size: 13px;
			line-height: 20px;
			color: $primary-color;

			&:focus, &:active, &:visited {
				/*color: $primary-color;*/
			}

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

.lt-ob-content {
	margin-bottom: 50px;

	&__principal-picker {
		position: relative;
		display: block;

		.principal-picker-selected-list {
			margin-top: 20px;
			display: flex;
			flex-flow: row wrap;
			margin-right: -10px;
			color: $dropdown-item-color;

			.list-group-item {
				border-radius: 3px;
				border: 0px solid !important;
				display: block;
				flex-grow: 0;
				margin-right: 10px;
				margin-bottom: 10px;
				background-color: $neutral-lighter-color;
				font-size: 13px;
				line-height: 21px;
				padding: 2px 28px 1px 8px;
				position: relative;

				&:last-child {
				}

				.close {
					float: none;
					font-size: 27px;
					opacity: 1;
					font-weight: 400;
					position: absolute;
					right: 4px;
					top: -1px;
					color: $dropdown-item-color;
				}
			}
		}


		.glyphicon.glyphicon-refresh {
			top: 13px;
			right: 15px;
			position: absolute;
			animation: rotateCircleLoader 1.5s infinite linear;
			font-weight: 100;
		}


		.dropdown-menu {
			top: 52px !important;
			left: 0 !important;
			right: 0 !important;
			box-shadow: 0px 0.6px 1.8px rgba(0, 0, 0, 0.108), 0px 3.2px 7.2px rgba(0, 0, 0, 0.132) !important;
			border-radius: 3px !important;
			border: 0 !important;
			font-size: 13px;
			padding: 0 !important;

			.active {
				a {
					padding: 9px 12px 11px 12px;

					strong {
						background-color: #D0E7F8;
						padding: 5px 0;
						font-weight: 400;
					}
				}

				a, a:active, a:focus, a:hover {
					background: none !important;
					color: $dropdown-item-color !important;
				}
				//#D0E7F8
				a:hover {
					background-color: $neutral-lighter-color !important;
				}
			}
		}

		.principal-picker:before {
			content: "\e904";
			font-family: '#{$icon--streamline-font-family}' !important;
			speak: none;
			font-style: normal;
			font-weight: normal;
			font-variant: normal;
			text-transform: none;
			line-height: 1;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			position: absolute;
			top: 12px;
			bottom: 12px;
			left: 12px;
		}

		input {
			border-radius: 3px !important;
			font-size: 13px;
			padding: 13px 12px 11px 35px;
			height: auto;
			line-height: 16px;
			border-color: $lt-neutral-tertiary; // only on borders?
			color: $dropdown-item-color !important;

			&:active, &:focus {
				border-color: $neutral-dark-color;
			}
		}
	}

	&__navigation {
		position: absolute;
		right: 40px;
		bottom: 35px;

		&-bottom {
		}
	}

	&__step {
		color: $neutral-light-color;
		font-size: 13px;
		line-height: 20px;
		padding-left: 2px;
	}

	&__title {
		color: $title-color;
		font-size: 25px;
		line-height: 40px;
		margin: 0;
		/*.lt-ob__column-wizard & {
			margin: 0;
		}*/
	}

	&__link {
		padding-top: 15px;
		display: inline-block;
		font-size: $lt-base-font-size-small;

		&--nopadding {
			padding:0;
		}
	}

	&__list {
		line-height: 24px;
		padding-bottom: 35px;
		padding-left: 0;
		list-style-type: none;
		margin: 0;

		& > li {
			margin: 10px 0 10px 0;
			counter-increment: count-me;
		}

		& > li:first-of-type {
			margin: 0 0 10px 0;
		}

		& > li:last-of-type {
			margin: 10px 0 0 0;
		}

		& > li::before {
			content: counter(count-me) ". ";
			counter-increment: item;
			color: $lt-theme-primary;
		}
	}

	&__description {
		color: $neutral-dark-color;
		line-height: 24px;
		/*padding-top: 14px;*/
		.lt-ob__column-wizard & {
			padding-top: 5px;
		}

		padding-bottom: 30px;
		margin: 0;
	}
}

.lt-ob-loaderspinner {
	height: 100%;

	.circle-loader {
		width: 23rem;
		height: 23rem;
	}

	&__container {
		height: 100%;
		padding: 0;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		@media (max-width: 768px) {
			height: auto;
		}
	}

	&__row {
		width: 758px;
		min-height: 500px;
		display: flex;
		overflow: hidden;
		flex-flow: column;
		border-radius: 3px;
		box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.25);
		background-color: $lt-white;
	}

	&__column {
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 1;
	}

	&-column {
		&__message {
		}

		&__spinner {
			align-items: flex-start;
		}
	}
}


.lt-ob {
	height: 100%;

	&__container {
		height: 100%;
		padding: 0;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		@media (max-width: 768px) {
			height: auto;
		}
	}

	&__row {
		width: 758px;
		min-height: 500px;
		display: flex;
		overflow: hidden;

		@media (max-width: 768px) {
			flex-flow: column wrap;
		}

		border-radius: 3px;
		box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.25);
	}

	&__column {

		&-equal {
			//flex: 50%;
			@media (min-width: 768px) {
				flex: 50%;
			}
		}

		&-small {
			flex: 240px;
		}

		&-large {
			flex: 518px;
		}

		&-title {
			padding: 40px 30px 40px 30px;
			background-color: $left-install-panel-background-color;
			color: $left-panel-text-color;
			/*.title {
				font-size: 24px;
				font-weight: 900;
				margin: 0;
				line-height: 0.93em;
			}*/
		}

		&-title-large {
			padding: 150px 58px 150px 58px;
			background-color: $left-panel-background-color;
			color: $left-panel-text-color;
			display: flex;
			align-items: center;
			justify-content: center;

			.title {
				font-size: 60px;
				font-weight: 900;
				margin: 0;
				line-height: 0.93em;
			}
		}

		&-start {
			padding: 115px 35px 85px 48px;
			background-color: $right-panel-background-color;

			
		}

		&-wizard {
			padding: 50px 40px 35px 45px;
			background-color: $right-panel-background-color;
			position: relative;
		}
	}
}

@keyframes rotateCircleLoader {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.circle-loader {
	border-radius: 50%;
	width: 13rem;
	height: 13rem;
	margin: 40px auto;
	position: relative;
	border-top: 5px solid $spinner-part; // rgba(0, 0, 0, 0.2);
	border-right: 5px solid $spinner-part; //rgba(0, 0, 0, 0.2);
	border-bottom: 5px solid $spinner-part; //rgba(0, 0, 0, 0.2);
	border-left: 5px solid $spinner-part-highlight;
	animation: rotateCircleLoader 1.5s infinite linear;
}
// bootstrap overrides


a, button {
	&.btn {
		border-radius: 3px !important; // because adminstyles is being loaded later...
		padding: $lt-base-button-padding !important; // because adminstyles is being loaded later...
		font-weight: bold;

		&.icon-ms-logo::before {
			font-size: 22px;
		}

		&.streamline {
			display: flex;
			flex-direction: row;
			padding: 6px 16px 4px 0 !important; // because adminstyles is being loaded later...
			line-height: 34px;
		}

		&.streamline::before {
			padding-left: 12px;
			padding-right: 10px;
			padding-top: 6px;
		}

		&-default, &-default:visited, &-default:focus {
			color: $lt-default-btn-color !important;
			border: 1px solid $lt-default-btn-border-color !important;
			background-color: $lt-default-btn-bg-color !important;

			&:hover, &:active {
				color: $lt-default-btn-color-hover !important;
				border: 1px solid $lt-default-btn-border-color-hover !important;
				background-color: $lt-default-btn-bg-color-hover !important;
			}

			&:disabled, [disabled] {
				color: $lt-default-btn-color-disabled !important;
				border: 1px solid $lt-default-btn-border-color-disabled !important;
				background-color: $lt-default-btn-bg-color-disabled !important;
			}
		}

		&-primary, &-primary:visited, &-primary:focus {
			color: $lt-primary-btn-color !important;
			border: 1px solid $lt-primary-btn-border-color !important;
			background-color: $lt-primary-btn-bg-color !important;
			border-color: $lt-primary-btn-border-color !important;

			&:hover, &:active {
				color: $lt-primary-btn-color-hover !important;
				background-color: $lt-primary-btn-bg-color-hover !important;
				border-color: $lt-primary-btn-border-color-hover !important;
			}

			&:disabled, [disabled] {
				color: $lt-primary-btn-color-disabled !important;
				border: 1px solid $lt-primary-btn-border-color-disabled !important;
				background-color: $lt-primary-btn-bg-color-disabled !important;
			}
		}
	}
}
