@charset "UTF-8";

/* Inter, self-hosted subset. See /LOGIN_FUNNEL.md before changing. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("include/inter/InterVariable.subset.woff2") format("woff2");
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("include/inter/InterVariable-Italic.subset.woff2") format("woff2");
}

/* tokens */
:root {
  --ink:#0d1b2a; --ink-soft:#41526b; --muted:#5a6a80;
  --line:#e7ecf3; --bg:#fff; --bg-soft:#f5f8fc;
  --accent:#248ec7; --accent-dk:#1b6f9e;
  --brand:#0f9d58; --brand-dk:#0b7a44;
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius:16px;
  --shadow:0 1px 2px rgba(13,27,42,.04), 0 8px 24px rgba(13,27,42,.08);
  --field-h:48px;
  --card-pad:28px;
  --card-pad-top:28px;
}

body {
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg-soft);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}	
#page {
  box-sizing:border-box;
  width:min(420px, 100% - 32px); margin:40px auto 0;
  background:var(--bg); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--card-pad);
  box-shadow:var(--shadow);
}
h3 { color:#666;text-align:center;font-size:1.1em; }	
form { color:#888; font-size:14px; }
#formlogin .label { 
	display: block;
    float: left;
    margin: 5px 0;
    padding: 4px 0;
    width: 70px;
}
#formloginverify .label { 
	display: block;
    color:#888;
	font-size:14px;
    margin: 5px 0;
    padding: 4px 0;
}
#signupform .label, #resetform .label { 
	display: block;
    float: left;
    margin: 5px 0;
    padding: 4px 0;
    width: 70px;
}
#response { color:#FF0000; }

.demosuccess { 
	color: #019CDD;
    font-size: 0.9em;
    font-weight:bold;
	margin: 15px auto 15px;
    padding: 6px 10px;
    text-align: center;
    width: 260px;
} 
.demoerror { 
	color: #FF0000;
    font-size: 0.9em;
    font-weight:bold;
	margin: 15px auto 15px;
    padding: 6px 10px;
    text-align: center;
} 
.sessexpired { 
	color: #019cdd;
    font-size: 0.9em;
    font-weight:bold;
	margin: 15px auto 15px;
    padding: 6px 10px;
    text-align: center;
} 

/* button 
---------------------------------------------- */
.button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .3em 1.5em .375em;
	/* padding: .5em 2em .55em; */
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .2em; 
	-moz-border-radius: .2em;
	border-radius: .2em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}
.button.disabled, .button.disabled:hover, .button.disabled:active { background: none repeat scroll 0 0 transparent;
    border: medium none;
    color: #999999;
    cursor: default;
	top:0px; }   
.bigrounded {
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
.medium {
	font-size: 12px;
	padding: .4em 1.5em .42em;
}
.small {
	font-size: 11px;
	padding: .2em 1em .275em;
}
 
/* color styles 
---------------------------------------------- */ 
/* white */
.white {
	color: #606060;
	border: solid 1px #b7b7b7;
	background: #fff;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
	background: -moz-linear-gradient(top,  #fff,  #ededed);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
}
.white:hover {
	background: #ededed;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
	background: -moz-linear-gradient(top,  #fff,  #dcdcdc);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc');
}
.white:active {
	color: #999;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#fff));
	background: -moz-linear-gradient(top,  #ededed,  #fff);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#ffffff');
}
 
/* blue */
.blue {
	color: #d9eef7;
	border: solid 1px #0076a3;
	background: #0095cd;
	background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
	background: -moz-linear-gradient(top,  #00adee,  #0078a5);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}
.blue:hover {
	background: #007ead;
	background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
	background: -moz-linear-gradient(top,  #0095cc,  #00678e);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}
.blue:active {
	color: #80bed6;
	background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
	background: -moz-linear-gradient(top,  #0078a5,  #00adee);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
} 

/* end of button colors 
---------------------------------------------- */

.submitdiv { margin:5px 0px 5px 66px; }

.forgotlink { float:right; color:#837e78; text-decoration:underline; font-size:11px; margin-right:66px;margin-top:6px; }
#footer { padding:16px 0 0; margin:26px 0 0; border-top:1px solid var(--line); }
#footer p { color:var(--muted); padding:0px; margin:0; font-size:11.5px; text-align:center; }
#footermark {padding:6px 12px;width:24px;height:24px;background:url("include/images/fv-icon.png") top left no-repeat;text-indent:-9999px;}

.success { color:#4F8A10; }
#pre-page a { color:#0095cd; }
input.readonly,input.readonly:focus{border:medium none;background:none;font-weight:bold;font-size:100%;}

/* logo: default mark */
#fvhps { background:url("include/images/fv_logo_login_2x.png") top center no-repeat;background-size:contain;width:100%;max-width:360px;height:100px;margin:0 auto 26px; }

@media (max-width: 768px) {
	#fvhps { max-width:100%; }
	.label { float:none; margin:5px 0px 0px 0px; }
	input.readonly,input.readonly:focus{border:medium none;}
	.submitdiv { margin:5px 0px 5px 0px; }
	.forgotlink { margin-right:20px; }
}
@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
#footermark {background:url("include/images/fv-icon2x2.png") top left no-repeat;background-size: 24px 24px; }
}

/* new login 09-2022 
---------------------------------------------- */

#formloginverify, #formlogin, #formemaillogin, #formforgot, #resetform, #activateform { color:#666; }
#formloginverify .label, #formlogin .label, #formemaillogin .label, #formforgot .label, #resetform .label, #activateform .label, #formloginrecover .label, #signupform .label {
    display: block;
    float: none;
    margin: 0px;
    padding: 0px;
    color: var(--ink-soft);
    width:auto;
}
.label label {
    display:block;
    font-size:13px; font-weight:600; letter-spacing:.01em;
    color:var(--ink-soft); margin:0 0 6px;
}
#response_success { line-height:23px;margin:0px;padding:0;color:#019cdd; }
#response { line-height:23px;margin:0px;padding:0;color:#ff6060; }
.inputText {
  width:100%; box-sizing:border-box; height:var(--field-h); padding:0 14px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--bg-soft); color:var(--ink);
  font-size:15px; font-family:inherit;
  margin:0 0 14px;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.inputText:focus {
  outline:none; background:var(--bg);
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(36,142,199,.16);
}
.inputText::placeholder { color:#9aa8bb; }
input:autofill::first-line, input:-webkit-autofill::first-line {
    font-size: 14px;
}

.submitdiv { margin:0px 0px 5px 0px; }
.forgotlink { float:none;margin-right:0px;font-size:13px;font-weight:500;color:var(--muted);text-decoration:none;border-bottom:1px solid transparent; }
.forgotlink:hover { color:var(--accent-dk);border-bottom-color:currentColor; }

#submit {
  -webkit-appearance:none;
  width:100%; box-sizing:border-box; margin:0px;
  min-height:var(--field-h); height:auto;
  border:none; border-radius:var(--radius-md); -webkit-border-radius:var(--radius-md);
  font:600 15.5px/1 inherit;
  cursor:pointer;
  text-shadow:none;
  box-shadow:var(--shadow);
  transition:background .18s ease, transform .18s ease;
}
#submit:hover { transform:translateY(-1px); }
#submit:active { transform:none; }

#submit.disabled { color:#888;text-shadow:none;background:#eee;box-shadow:none;cursor:not-allowed; }
#submit.disabled:hover, #submit.disabled:focus, #submit.disabled:active { box-shadow:none;text-decoration:none; }

.blueflat { color:#fff;border:none;background:var(--accent-dk);}
.blueflat:hover {background:#175f88;outline:none;}
.blueflat:focus {background:#175f88;outline:none;}
.blueflat:focus-visible {outline:none;box-shadow:0 0 0 3px rgba(36,142,199,.35);}
.blueflat:active {background:#175f88;}

.grayflat { color:#666;border:none;background:#eee;text-shadow:none;padding:5px 8px 4px;font-size:1.0em;}
.grayflat:hover {background:#ddd;outline:none;box-shadow: 0 0 0 3px rgba(102, 102, 102, 0.4);}
.grayflat:focus {background:#ddd;text-decoration:underline;outline:none;box-shadow: 0 0 0 3px rgba(102, 102, 102, 0.4);}
.grayflat:active {background:#ddd;text-decoration:underline;}
.authresponse {color:#019cdd;font-weight:bold;font-size:1.1em;margin:0 0 20px;text-align:center;}
.loading{display:inline-block;background:url("include/images/loader.gif") no-repeat scroll 0 0 transparent;width:16px;height:16px;margin:0 5px;}

.demosuccess { font-size:0.95em;width:auto; }
.sessexpired {color:#ff6060;font-size:0.95em;}

#alreadyin { font-size:15px;text-align:center;color:#666;padding-top:30px; }
#alreadyin hr { border-top:1px solid #ddd; }
#alreadyin .blueflat { color: #fff;border:none;background:#0095cd;text-shadow:none;padding:10px 24px;font-size:1.0em; }

#trustdevice { width:16px;height:16px;margin:0;padding:0;position:relative;top:-1px;vertical-align: bottom; }
#trustdevicelabel { outline:none;user-select:none;cursor:pointer;margin-left:5px; }

.lbe_box { 
    margin: 5px 0 15px;
    padding: 0px;
    background: #eee; 
	text-align:center; }
.lbe_box a { border: 1px solid #ddd;display:block;padding:15px;text-decoration:none;color:#08c; }
.lbe_box a:hover { background:#ddd;outline:none;box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4); }
.lbe_box a:focus { background:#ddd;outline:none;box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4);text-decoration:underline; }
.lbe_box a:active { background:#ddd;outline:none;box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4);text-decoration:underline; }

.showhidepass {
  position: relative;
  margin: 0 0 14px;
}
.showhidepass .inputText {
  padding-right: 66px;
  margin: 0;
}
.showhidepass .showPass {
  position: absolute;
  right: 6px;
  top: auto;
  bottom: 0;
  height: var(--field-h);
  display: flex;
  align-items: center;
  padding: 0 10px;
  margin: 0;
  border: 0;
  background: transparent;
  border-radius: var(--radius-xs);
  font: 600 13px/1 inherit;
  cursor: pointer;
  color: var(--muted);
}
.showhidepass .showPass:hover {
  color: var(--accent-dk);
}
.showhidepass .showPass:focus {
  outline: none;
}
.showhidepass .showPass:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

@media (max-width: 768px) {
	body { margin:0px; }
	body.loginpage { background:var(--bg); }
	#page {
	    width: 100%;
	    max-width: 440px;
	    margin: 0px auto 20px;
	    border: none;
	    box-shadow: none;
	    border-radius: 0;
	    --card-pad: 20px;
	    --card-pad-top: 22px;
	    padding-bottom: calc(28px + env(safe-area-inset-bottom));
	}
	#maincontent { max-width:400px;margin:0 auto; }
}
/* do not lower: see /LOGIN_FUNNEL.md */
@media (max-width: 768px) {
	form, .inputText, input[type="text"], input[type="password"], input[type="email"] { font-size:16px; }
}
/* keep last; see /LOGIN_FUNNEL.md */
body.loginpage #page, #page { padding-top:calc(var(--card-pad-top) + env(safe-area-inset-top)); }