:root
{
	--color1:#3D9BE2;
	--color1Alt1:#297FBC;
	--color1Alt2:#156BA8;
	--color2:#2a353c;
	--color2Alt1:#35424a;
	--colorWarning:#FFD700;
}
.nonselection
{
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-webkit-user-drag:none;
	-khtml-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
	user-drag:none;
}

html
{
	height:100%;
	width:100%;
    background-color:#777;
}

body
{
	overflow:hidden;
	position:relative;
	height:100%;
	width:100%;
    margin:0 auto;
	background-color:#e5e5e5;
	font-family:Arial, Helvetica, sans-serif;
	font-size:15px;
	line-height:1.5;
	
	background-image:url("/images/logInBackground.jpg");
	background-size:cover;
	background-position:center center;
	background-repeat:no-repeat;
}


/* HEADER */
header
{
	width:100%;
    min-width:400px;
    max-width:1800px;
	padding-top:4px;
	padding-bottom:4px;
	color:#ffffff;
	background-color:var(--color2);
	border-bottom-color:var(--color1);
	border-bottom-width:3px;
	border-bottom-style:solid;
	position:fixed;
	z-index:3;
}

header .highlight
{
	color:var(--color1);
	font-weight:bold;
}

header .branding
{
	margin-top:5px;
	margin-left:10px;
	font-family:Helvetica;
	font-size:20px;
	font-weight:bold;
/* 	color:var(--color1); */
	float:left;
/*	background-image:url(/images/timeHub_white.png);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;
*/
	height:30px;
	width:160px;
}

header .branding img
{
	max-height:30px;
	max-width:160px;
}


#overlay
{
	z-index:900;
	display:none;
	opacity:1;
	position:fixed;
	width:100%;
	height:100%;
	min-height:500px;
	background-color:#000000aa;
}
#overlay:not([class=""])
{
	display:block;
}


#loading
{
	z-index:999;
	display:none;
	position:fixed;
	top:calc(50% - 50px);
	left:calc(50% - 50px);
	height:100px;
	width:100px;
	background-color:#fff;
	border-radius:50%;
}
#overlay.loading ~ #loading,
#overlay.loadingComplete ~ #loading
{
	display:block;
}
#loading > .inProgress
{
	display:none;
	height:70px;
	width:70px;
	margin-top:15px;
	margin-left:15px;
	background-image:url('/images/loadingSprite.png');
	background-size:1540px 70px;
}
#overlay.loading ~ #loading > .inProgress
{
	display:block;
}
#overlay.loading ~ #loading > .inProgress
{
	animation: loadingAnimation 1.5s steps(22) infinite;
}
@keyframes loadingAnimation
{
	100%
	{
		background-position:-1540px;
	}
}


/* MAIN CONTENT */
body > .mainScrollView
{
    position:absolute;
    height:calc(100% - 48px); /* 48px is the height of the .header. */
	width:calc(100% - 99px);
    margin-top:48px;
	margin-left:99px;
}
body > .mainScrollView::-webkit-scrollbar /* Hide the main scroll view's scrollbar. */
{
	width:0px;
}
body > .mainScrollView > .mainContent
{
	z-index:1;
/*	overflow:hidden;*/
    box-sizing:border-box;
	position:relative;
	min-height:calc(100% - 77px); /* 77px is the height of the footer. */
    padding:25px;
}
/*.body > .mainScrollView > .mainContent > .container
{
	position:relative;
	height:100%;
/*	min-width:400px;*//*
	margin:25px;
	padding:25px;
	background-color:#dbdbdb;
	border-radius:10px;
	box-shadow:1px 1px 2px rgba(0,0,0,.3), 0 1px 4px rgba(0,0,0,.2), 0 10px 0px rgba(255,255,255,.11) inset;
	-webkit-background-clip:padding-box;
	border:1.5px #c3c3c3;
}*/


.overlay
{
	display:none;
	z-index:499;
	/*	opacity:0;*/
	position:absolute;
	top:48px;
    right:0;
    bottom:0;
	left:0;
    margin-left:99px;
	background-color:rgba(0, 0, 0, 0.75);
	transition:background-color 0.4s;
}


/** FOOTER **/
footer
{
	overflow:hidden;
	display:block;
	position:relative;
    margin-top:15px;
	padding:5px;
	background-color:var(--color1);
	color:#ffffff;
	text-align:center;
}


/** LOGIN **/
#errors
{
	position:absolute;
	bottom:100%;
	left:50%;
	transform:translateX(-50%);
	margin-bottom:10px;
	color:#FFD700;
}
#errors > p
{
	margin:0;
	white-space:nowrap;
}

#login
{
	position:fixed;
	top:calc(50% - 65px);
	left:50%;
	transform:translate(-50%, -50%);
	width:400px;
	padding-top:45px;
	padding-bottom:35px;
	border-radius:8px;
	background-color:#ffffffaa;
	text-align:center;
}

#login > h1 
{
	margin-top:20px;
	margin-bottom:20px;
	-webkit-transition-duration:1s;
	transition-duration:1s;
	-webkit-transition-timing-function:ease-in-put;
	transition-timing-function:ease-in-put;
	color:var(--color2);
	text-align:center;
	font-size:40px;
	font-weight:200;
	line-height:1;
}

#login > form 
{
	position:relative;
	margin:0;
	padding:0;
}
#login img.logo
{
	max-width:512px;
	margin-bottom:25px;
}

#login .field
{
	position:relative;
	width:282px;
	margin:0 auto 10px auto;
}
#login .field > input
{
	display:block;
	box-sizing:border-box;
	width:100%;
	padding:10px 15px;
	background-color:var(--color2);
	border:1px solid #dfdfdf;
	border-radius:3px;
	outline:0;
	color:#ffffff;
	text-align:center;
	font-size:18px;
	font-weight:300;
	-webkit-transition-duration:0.25s;
	transition-duration:0.25s;
}
#login .reset .field > input
{
	background-color:#f8f8ff;
	color:#000000;
}
#login .field > input.invalid
{
	background-color:#7a3232;
}
#login .field > input:disabled
{
	opacity:.4;
}
#login .field > .reveal
{
	opacity:.9;
	display:none;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	width:50px;
	background-color:#DDD4;
}
/* #login .reset .field > .reveal
{
	background-color:transparent;
} */
#login .field > .reveal > button
{
	height:100%;
	width:100%;
	border:0;
	background-color:transparent;
	background-image:url("/images/reveal.png");
	background-size:60%;
	background-position:50%;
	background-repeat:no-repeat;
	cursor:pointer;
}
#login .reset .field > .reveal > button
{
	/* filter:invert(45%) sepia(76%) saturate(1125%) hue-rotate(179deg) brightness(90%) contrast(96%); */
	filter: invert(54%) sepia(4%) saturate(0%) hue-rotate(13deg) brightness(94%) contrast(95%);
}
#login .field > input[type="text"] ~ .reveal > button
{
	background-image:url("/images/unreveal.png");
}
#login .field > input:not(:disabled):hover ~ .reveal,
#login .field > input:not(:disabled) ~ .reveal:hover
{
	display:block;
}
#login .field > .reveal > button:active
{
	filter:brightness(70%);
}
#login .reset .field > .reveal > button:active
{
	/* filter:invert(54%) sepia(42%) saturate(807%) hue-rotate(162deg) brightness(88%) contrast(95%); */
	filter: invert(85%) sepia(32%) saturate(439%) hue-rotate(160deg) brightness(94%) contrast(85%);
}

#login .submit
{
	display:block;
	width:282px;
	margin:auto;
	padding:10px 15px;
	background-color:var(--color1);
	/* border:2px solid var(--color1); */
	border:0;
	border-radius:3px;
	outline:0;
	color:#ffffff;
	font-size:18px;
	cursor:pointer;
	-webkit-transition-duration:0.25s;
	transition-duration:0.25s;
}
#login .submit:disabled
{
	opacity:.4;
	cursor:default;
}
#login .submit:not(:disabled):hover
{
	background-color:#FFF;
	/* border:2px solid #FFF; */
	border:0;
	color:var(--color2);
	box-shadow:0 0 3px #0008;
}
#login .submit:not(:disabled):hover:active
{
	background-color:#D9D9D9;
	/* border:2px solid #D9D9D9; */
	border:0;
}
#login > form > .resetPassword
{
	margin-top:15px;
	background-color: transparent;
	border:0;
	color:var(--color2);
	cursor:pointer;
	outline:0;
}
#login > form > .resetPassword:hover
{
	color:var(--color1);
}
#login > form > .resetPassword:active
{
	color:var(--color1Alt1);
}

#login .reset
{
	overflow:hidden;
	height:0;
	transition:height .4s;
}
#login .reset .spacer
{
	height:20px;
	width:100%;
}



#login .field > .requirements::before
{
	content:'';
	z-index:-1;
	position:absolute;
	top:-8px;
	right:calc(50% - 10px);
	border-style:solid;
	border-width:0 10px 10px 10px;
	border-color:transparent transparent #dbdbdb transparent;
	transition-duration:0.3s;
	transition-property:transform;
}
#login .field > .requirements 
{
	z-index:1;
	visibility:hidden;
	opacity:0;
	position:absolute;
	left:50%;
	transform:translate(-50%, 10px);
	padding:15px 40px 15px 30px;
	font-size:0.95em;
	background-color:#dbdbdb;
	border-radius:4px;
	text-align:left;
	filter:drop-shadow(0 0 3px rgba(0, 0, 0, 0.5));
	transition:visibility 0s .2s, opacity .2s;
}
#login .field > input:focus ~ .requirements
{
	visibility:visible !important;
	opacity:1 !important;
}
#login .field > .requirements p
{
	margin:0;
}
#login .field > .requirements ul
{
	margin:5px 0 0;
	padding-left:30px;
	white-space:nowrap;
}
#login .field > input:not(:placeholder-shown):not(.valid):not(.length) ~ .requirements .length,
#login .field > input:not(:placeholder-shown).wrong ~ .requirements .symbol,
#login .field > input:not(:placeholder-shown):not(.met) ~ .requirements .met
{
	color:red;
}
/* #login .field > input.upper ~ .requirements .upper,
#login .field > input.lower ~ .requirements .lower,
#login .field > input.number ~ .requirements .number,
#login .field > input.symbol ~ .requirements .symbol
{
	color:#fffb00;
} */
#login .field > input.length ~ .requirements .length,
#login .field > input.upper ~ .requirements .upper,
#login .field > input.lower ~ .requirements .lower,
#login .field > input.number ~ .requirements .number,
#login .field > input.symbol ~ .requirements .symbol,
#login .field > input.met ~ .requirements .met
{
	color:#008000;
}