/*
==============================
FONT
==============================
*/
@font-face {
    font-family: 'Larsseit';
    src: url("/selfservice/javax.faces.resource/fonts/Larsseit.ttf.xhtml") format('truetype');
    font-weight: normal;
  	font-style: normal;
}

@font-face {
    font-family: 'Larsseit';
    src: url("/selfservice/javax.faces.resource/fonts/Larsseit-Medium.ttf.xhtml") format('truetype');
    font-weight: 500;
  	font-style: normal;
}

@font-face {
    font-family: 'Larsseit';
    src: url("/selfservice/javax.faces.resource/fonts/Larsseit-Bold.ttf.xhtml") format('truetype');
    font-weight: bold;
  	font-style: normal;
}

html {
  color: #0E3147;
  box-sizing: border-box;
  margin: 0;
}

body {
	margin: 0;
	background: #ACDBF5;
	display: flex;
  	min-height: 100vh;
  	flex-direction: column;
  	justify-content: flex-start;
}

body,
input.login,
input.login-input {
	font-family: 'Larsseit';
	font-weight: 500; /*500 = Medium*/
}

/*
==============================
HEADER Menu Structure & Styling
==============================
*/
header {
	background: #0E3147;
	margin: 0;
	font-size: 0.8em;
	padding: 0 8px;
	box-sizing: border-box;
	max-height: 50px;
}

.header-image {
	height: 26px;
	padding: 10px;
	margin-top: 2px;
}

nav {
	display: inline-flex;
	width: 100%;
}

ul {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	align-items: center;
}

ul li {
  	list-style: none;
  	padding: 0.65em;
}

ul li a {
  	text-decoration: none;
  	color: #fff;
}

a:hover {
  	text-decoration: underline;
  	cursor: pointer;
}

button:hover {
	cursor: pointer;
}

header a:visited {
  	color: #fff;
}

ul#login-menu {
	margin-left: auto;
}

@media (max-width: 600px) {
  nav {
    display: none;
  }
}

/*
==============================
LOGIN Page
==============================
*/

.dialog {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	margin-top: 100px;
}

li#login-menuIcon {
	position: absolute;
	font-size: 1.5em;
	top: 0.25em;
	right: 0.15em;
}

li#login-menuIcon > a {
	display: block;
	font-size: 1.5em;
	margin-right: 0.65em;
}

#intime-logo {
	width: 100%;
	margin-bottom: 10px;
}

footer {
	text-align: center;
	font-size: medium;
	margin-top: auto;
	padding-top: 16px;
	padding-bottom: 32px;
}

footer a, a {
	color: #0E3147;
}

.errors-pg a {
    color: #026eb1;
}

/*
==============================
LOGIN Page Buttons
==============================
*/
button {
	padding: 1em;
	border-radius: 5px;
	border: 2px #fff solid;
	margin: 5px auto 30px auto;
	font-size: 1em;
	font-weight: 700;
	background: transparent;
}

a > button {
	color: #fff;
	cursor: pointer;
	text-decoration: underline;
}

div.center {
	text-align: center;
}

/*
==============================
LOGIN Page Container
==============================
*/

/* LOGIN Page Container + Footer Link* */
div.login,
#footer-link {
	max-width: 400px;
	width: 75%;
}

#loginForm {
    text-align: center;
}

/* LOGIN Page Input Fields */
input.login-input {
	background: white;
	padding: 10px 12px;
	margin-bottom: 12px;
	height: 20px;
	width: calc(100% - 28px); /*28px is from the side paddings (12+12) + border padding 2+2)*/
    border: 2px solid white; /*Border needed to allow for focus outline without UI jumping*/
}

input.login-input:focus {
    outline: none !important;
    border: 2px solid #0E3147;
}


/* LOGIN Page Login Button + Input Fields */
input.login,
input.login-input {
	font-size: medium;
	border-radius: 5px;
	display: block;
}

input.login {
	margin-bottom: 24px;
}

input.login-input[id="loginForm:password"] {
	padding-right: 47px; /*Weird padding is needed to prevent password visibility button overlap with text*/
	width: calc(100% - 63px); /*63px is from the side paddings (47+12) + border padding(2+2)*/
}

/* LOGIN Page Login Button */
input.login {
	background: #0E3147;
	padding: 5px 12px;
	height: 40px;
	color: #ACDBF5;
	width: 100%;
	border: none;
	cursor: pointer;
}

input.login:disabled {
    color: var(--lumo-disabled-text-color) !important;
    background-color: var(--_lumo-button-background-color, var(--lumo-contrast-5pct)) !important;
}

/* LOGIN Page Black Box */
div.intime {
	background-color: #000;
	border-radius: 10px;
	padding: 1em;
	margin: 1em 0;
	max-width: 300px;
	color: #fff;
	text-align: center;
}

div.intime > p {
	margin: 0;
	padding: 1.3em;
	line-height: 1.6em;
}

/* LOGIN Page Body Boxes */
div.left, div.right {
	margin: 1em;
	max-width: 350px;
	color: #fff;
	text-align: center;
}

.body > p {
	margin: 0;
	padding: 1.3em;
	line-height: 1.6em;
}

h1 {
	margin: 0 0 0.5em 0;
	text-align: center;
	color: #0E3147;
}

h2 {
	margin: 0;
	padding: 1.3em;
	line-height: 1.6em;
}

h2, .heading {
	font-size: 1.1em;
}

label {
	font-size: 14px;
}

/* Old Styles */


/*
===========================================
/* PASSWORD Pages: RESET, EXPIRED, & CHANGE
===========================================
*/

h1.title {
   text-align: center;
   font-size: min(8.2vw, 33.4pt);
   font-weight: bold;
   margin-left: 0;
   margin-right: 0;
   margin-bottom: 12px;
   margin-top: 0;
}

/*
==============================
LOGIN Mobile Banner
==============================
*/
div.mobile-banner {
	background: #0E3147;
	color: white;
	position: relative;
	padding: 1em 1.5em;
	margin-bottom: -1.5em;
}

div.mobile-banner h4 {
	margin: 0em;
}

.mobile-banner-button a {
	padding: 5px 15px;
	border-radius: 5px;
	border: 2px #1d5f99 solid;
	font-weight: bold;
	border-color: #fff;
	color: #fff;
	text-decoration: none;
	-webkit-user-select: none;  
  	-moz-user-select: none;    
  	-ms-user-select: none;      
  	user-select: none;
}

.mobile-banner-text {
	margin-right: 5em;
}

.mobile-banner-button {
	position: absolute;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	top: 50%;
	right: 1.5em;
}