/* Variables
-------------------------------------------------- */

@import "_bootstrap/variables.less";
@import "_play_variables.less";
@import "_bootstrap/bootstrap";


/* IE 10 viewport but fix */
@-ms-viewport{width:auto!important};


/* Sticky footer styles
-------------------------------------------------- */
html {
	position: relative;
	width: 100%;
	min-height: 100%;
	background-color: @bg_white;
}
body {
	/* Margin bottom by footer height */
	background-color: @bg_white;
	overflow-y: scroll;
	height: 100%;
	width: 100%;

	&.showing_page_nav{
		//padding-bottom: 50px;
	}

	@media (max-width: @screen-sm-max) {

		// mobile like scrollbar
		&::-webkit-scrollbar {
			width: 14px;
		}

		&::-webkit-scrollbar-track {
			background: transparent;
		}

		&::-webkit-scrollbar-thumb {
			border-radius: 10px;
			background: #aaa;
			border: 1px solid rgba(255,255,255,0.8);
		}

		&::-webkit-scrollbar-button,
		&::-webkit-scrollbar-corner,
		&::-webkit-resizer{
			display: none;
		}

	}

}


.se_body{
	background-color: @bg_white;

	padding-bottom: 7em; // rel to footer height

	> .container {
		padding: 15px;
	}


	&.hide-layout-frame{
		margin-bottom: 0;

		#se_title-bar,
		#se_progress-bar-sticky-wrapper,
		.se_footer{
			display:  none !important;
		}
		.outer_frame{
			border-top: 0;
		}
	}
}

.container .text-muted {
	margin: 20px 0;
}
.se_footer {
	border-top: 1px solid @border_color;
	position: absolute;
	bottom: 0;
	width: 100%;
	/* Set the fixed height of the footer here */
	height: 7em;

	background-color: @bg_light;

	body.showing_page_nav & {
		//bottom: 50px;
	}
}
.se_footer > .container {
	padding: 15px;
	text-align: right;
}
code {
	font-size: @font-size-rel-normal * 0.8;
}

div.navbar-preview-wrapper{

	position: fixed !important;
	top: 0.25em !important;
	left: 0.25em !important;
	right: 0.25em !important;
	z-index: @zindex-navbar-fixed !important;

	text-align: center !important;



	.navbar-preview{
		display: inline-block !important;
		width: 20em !important;
		max-width: 100% !important;
		background-color: #222 !important;
		color: white;

		height: 3em !important;

		font-size: .9em !important;
		border-radius: 0.5em !important;

		opacity: .5 !important;

		&:hover {
			opacity: 1 !important;
		}

		-webkit-transition: opacity .25s !important;
		-moz-transition: opacity .25s !important;
		-ms-transition: opacity .25s !important;
		-o-transition: opacity .25s !important;
		transition: opacity .25s !important;

		-webkit-box-shadow: 0 0 5px rgba(255, 255, 255, 0.8) !important;
		-moz-box-shadow: 0 0 5px rgba(255, 255, 255, 0.8) !important;
		box-shadow: 0 0 5px rgba(255, 255, 255, 0.8) !important;

		border-color: @border_color !important;

		.navbar-preview-item-wrapper{
			display: flex !important;
			flex-direction: row !important;
		}

		.navbar-preview-item{
			flex: 0 !important;
			color: white !important;
			position: relative !important;

			&.navbar-preview-item-wide{
				flex: 1 1 auto !important;
				padding-top: 0  !important;
				padding-bottom: 0  !important;
			}

			display: inline-block !important;
			padding: 12px 12px 4px !important;
		}

		select.navbar-preview-select{
			background: #222 !important;
			color: white !important;

			width: 100% !important;
			padding: 9px !important;
			border: 0 !important;
			position: relative !important;
			top: 1px !important;
			font-size: 13px !important;

			option{
				padding: 9px 0 !important;
				color: white !important;
			}
		}

		.navbar-preview-copy{
			display: none;

			&.in{
				display: block;
			}

			position: absolute !important;
			top: 100% !important;
			background: @bg_light !important;

			min-width: 50vw !important;
			max-width: none !important;
			right: 0 !important;


		}

	}
}

.navbar{
	min-height: 0;
	margin-bottom: 0;
}


/* Various styles
-------------------------------------------------- */

.se_body > .container img {
	text-align: center;
	display: block;
	margin: 0 auto;
	max-width: 100%;
}



.padding{
	padding: 15px;
}
.padding-vertical{ padding-top: 15px; padding-bottom: 15px; }
.no-padding{
	padding: 0;
}
.no-padding-sm{
	@media (min-width: @screen-sm){
		padding: 0;
	}
}



/* Titles
-------------------------------------------------- */


#se_title-bar {
	background-color: @se_blue1;
	background-image: none;
	color: @bg_white;
	/* text-transform: uppercase; */
	border-radius: 0;
	border: none;

	height: 60px;

	.se_title-wrapper{
		padding: 4px 0;
		line-height: 52px;
		vertical-align: middle;

		text-align: right;
	}


	.se_title-logo{
		display: inline-block;
		vertical-align:middle;
		float: left;
		max-width: 40%;
		height: 52px;
		overflow: hidden;
		background: transparent left center no-repeat;
		background-size: contain;

		img{
			max-height: 100%;
			visibility: hidden;
		}

		/*
			 800x20	-> 40% * y
			 800x800-> x * 100%
			 20*800 -> 5 * 100%
			 20*20  -> middle left 20x20
		*/
	}

	//
	//height: 60px;
	//.se_title-wrapper{	line-height: 52px; }
	//.se_title-logo{		height: 52px; }
    //
	//&.height-small{
	//	height: 40px;
	//	.se_title-wrapper{	line-height: 32px; }
	//	.se_title-logo{		height: 32px; }
	//}
	//&.height-large{
	//	height: 100px;
	//	.se_title-wrapper{	line-height: 92px; }
	//	.se_title-logo{		height: 92px; }
	//}


	h1 {
		vertical-align: middle;
		display: inline-block;
		font-size: 24px;
		margin: 0;
		max-width: 59%;

		background: transparent center left no-repeat;
		background-size: contain;

		word-break: break-word;

		@media (max-width: @screen-sm-max) {
			font-size: 18px;
		}
		@media (max-width: @screen-xs-max) {
			font-size: 12px;
		}
	}
}



.lead-title {
	margin: 30px 10% 30px;
	text-align: center;
}
.lead {
	text-align: center;
	font-weight: 400;
	margin: 0 10% 20px;
}

.btn{	font-size: @font-size-rel-normal;	}
.btn-lg, .btn-group-lg > .btn { font-size: @font-size-rel-normal; }

.btn-primary{
	color: white;
	border-color: @border_color_focus;
	background-color: @bg_input_selected;

	&:hover{
		border-color: @bg_input_selected;
		background-color: @bg_input_hover;
		color: @text-color;
	}
	&:focus,
	&.focus,
	&.active,
	&.active.focus,
	&.active:focus,
	&:active:focus{
		color: black;
		background-color: @border_color_focus;
		border-color: inherit;
	}
}

/* Custom Progress bar
-------------------------------------------------- */

.is-sticky #se_progress-bar {
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}


#se_progress-bar {
	border-color: @border_color;
	border: none;
	z-index: 5;

	.progress {
		height: inherit;
		box-shadow: none;

		background-color: @border_color_focus; // @se_blue1;

		//background-image: 	linear-gradient(top, rgba(0,0,0, 0.5) 0, transparent 85%),
		//	linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15) 95%),
		//	linear-gradient(top, rgba(0,0,0,0.3), rgba(0,0,0,0.3));
		//background-image: 	-webkit-linear-gradient(top, rgba(0,0,0, 0.5) 0, transparent 85%),
		//	-webkit-linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15) 95%),
		//	-webkit-linear-gradient(top, rgba(0,0,0,0.3), rgba(0,0,0,0.3));
		//background-image: 	-moz-linear-gradient(top, rgba(0,0,0, 0.5) 0, transparent 85%),
		//	-moz-linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15) 95%),
		//	-moz-linear-gradient(top, rgba(0,0,0,0.3), rgba(0,0,0,0.3));
		//background-image: 	-ms-linear-gradient(top, rgba(0,0,0, 0.5) 0, transparent 85%),
		//	-ms-linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15) 95%),
		//	-ms-linear-gradient(top, rgba(0,0,0,0.3), rgba(0,0,0,0.3));
		background-image: none;

		border-radius: 0;
		border-top: 1px solid #222;
		margin-bottom: 0;

		.progress-bar {
			font-size: 14px;
			line-height: 20px;
			color: rgba(255, 255, 255, 0.75);
			background-color: @bg_input_selected; //@se_blue1;
			//background-image: 	linear-gradient(top, rgba(0,0,0, 0.5) 0, transparent 40%),
			//	linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15) 95%),
			//	linear-gradient(top, rgba(0,0,0,0.15), rgba(0,0,0,0.15));
			//background-image: 	-webkit-linear-gradient(top, rgba(0,0,0, 0.5) 0, transparent 40%),
			//	linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15) 95%),
			//	-webkit-linear-gradient(top, rgba(0,0,0,0.15), rgba(0,0,0,0.15));
			//background-image: 	-moz-linear-gradient(top, rgba(0,0,0, 0.5) 0, transparent 40%),
			//	-moz-linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15) 95%),
			//	-moz-linear-gradient(top, rgba(0,0,0,0.15), rgba(0,0,0,0.15));
			//background-image: 	-ms-linear-gradient(top, rgba(0,0,0, 0.5) 0, transparent 40%),
			//	-ms-linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15) 95%),
			//	-ms-linear-gradient(top, rgba(0,0,0,0.15), rgba(0,0,0,0.15));

			background-image: none;

			background-position: right;
			background-repeat: 	repeat-x,
			no-repeat;

			@media (min-width: @screen-sm) {
				//font-size: 16px;
				//line-height: 34px;
			}
		}

		.sr-only {
			height: auto;
			width: auto;
			clip: initial;
			position: static;
			display: inline-block;
			white-space: nowrap;
			padding: 0 5px;
			overflow: visible;
		}
	}
}


/* Survey Forms / Selection: outer frame
-------------------------------------------------- */
.outer_frame {
	background-color: @bg_white;
	border-top: 1px solid @border_color;
	margin: 0;
	padding-bottom: 2em;

	.container {
		margin-top: 15px;
		margin-bottom: 15px;
		padding: 0;

	}
}


/* Survey Elements
-------------------------------------------------- */


.se_error,
.se_item_error{
	.alert;
	.alert-danger;
}


@import "_play_elements.less";



/* Spinners -- Spinkit
-------------------------------------------------- */
.se_spinner {
	//display: none;
	margin: 100px auto !important;
}

/* SPINNER BARS */

.se_spinner-bars {
	margin: 100px auto;
	width: 50px;
	height: 40px;
	text-align: center;
	font-size: 10px;

	> div {
		background-color: @bg_input_selected;
		height: 100%;
		width: 6px;
		display: inline-block;

		-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
		animation: sk-stretchdelay 1.2s infinite ease-in-out;
	}

	.rect2 {
		-webkit-animation-delay: -1.1s;
		animation-delay: -1.1s;
	}

	.rect3 {
		-webkit-animation-delay: -1.0s;
		animation-delay: -1.0s;
	}

	.rect4 {
		-webkit-animation-delay: -0.9s;
		animation-delay: -0.9s;
	}

	.rect5 {
		-webkit-animation-delay: -0.8s;
		animation-delay: -0.8s;
	}
}

@-webkit-keyframes sk-stretchdelay {
	0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
	20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
	0%, 40%, 100% {
		transform: scaleY(0.4);
		-webkit-transform: scaleY(0.4);
	}  20% {
		   transform: scaleY(1.0);
		   -webkit-transform: scaleY(1.0);
	   }
}


/* readtext functionality */

.readtext-invisible {
	opacity: 0.1;
	-webkit-transition: opacity 0.25s ease-in-out;
	-moz-transition: opacity 0.25s ease-in-out;
	-ms-transition: opacity 0.25s ease-in-out;
	-o-transition: opacity 0.25s ease-in-out;
	transition: opacity 0.25s ease-in-out;

	&.in{
		opacity: 1;
	}
}

.readtext-paused{

	&:not(.rp-abs){ // set in case the element is positioned absolute
		position: relative;
	}

	&::before{
		content: " ";
		position: absolute;
		left: .25em;
		right: .25em;
		top: .25em;
		bottom: .25em;
		border-radius: .5em;
		background: rgba(125,125,125,.5);
		box-shadow: 1px 0px 16px 8px rgba(125,125,125,.5);
		z-index: 1;
	}
	&::after{
		content: "Click To Play";
		color: white;
		position: absolute;
		z-index: 2;
		width: 8em;
		margin-left: -4em;
		left: 50%;
		top: 40%;
	}
}



/* Hacks for Responsiveness
-------------------------------------------------- */

// Making sure that iOS-Safari doesn't "zoom in" on text-fields
@media screen and (-webkit-min-device-pixel-ratio:0) {
	select,
	textarea,
	input {
		font-size: 16px;
	}
} 


/************************************************************************************/
/* Added by Ben for Ngene Launch */

.redacted_design {
	display:inline-block;
	padding:5px;
	border-radius: 0px 0px 5px 5px;
	background: #CEEAF8;
	color:#545454;
	font-weight:bold;
	border: 1px solid #BEDBE9;
	font-size:80%;

}

.trial-well {
	background: #CEEAF8!important;    /* pale blue */
	width: 50%;
	margin-top: 0px;
	margin-bottom: 0px;
	border-color: #BEDBE9;
}
/* upgrade styling */
.upgrade-button {
	background: #ffec56!important;    /* canary yellow **/
	color: #545454!important;         /* dark grey **/
}


/************************************************************************************/