﻿@charset "utf-8";

/* This enabled viewport on a snapped IE10 to recognize the smaller width */
@-ms-viewport {
 width: device-width;
 height: device-height;
}
* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
HTML {
	background: #FFF no-repeat top left fixed;
	-webkit-background-size: cover;
	-mox-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
BODY {
	margin: 0px;
	padding: 0px;
	z-index: -999;
	text-align: left;
	display: block;
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
	-ms-overflow-style: -ms-autohiding-scrollbar;
}
TABLE {
	border-spacing: 0;
	border-collapse: collapse;
}
TD, TH {
	padding: 0;
}
HTML, BODY, .panel-login {
	height: 100%;
}
#panel-login {
	border-left: 1px solid #FFFFFF;
}
#low-bandwidth-notification {
	visibility: hidden;
	padding-left: 10px;
	padding-top: 5px;
	padding-right: 500px;
	color: #FFFFFF;
}
#background-company-name {
	color: #FFFFFF;
	margin-right: 500px;
	position: relative;
	top: 50%;  /* vertical centering */
	margin-top: -0.7em;  /* vertical centering */
	text-align: center;
}
#login-logo-image {
	max-width: 300px;
}
A {
	text-decoration: none;
	/*color: #2872DD;*/
	color: #33a3b3;
	background-color: transparent;
}
IMG {
	border: 0px;
}
FORM {
	width: auto;
	height: auto;
}
H1 {
	font-weight: normal;
}
.color.purple {
	color: #7a1070;
}
.color.yellow {
	color: #c5c129;
}
.color.cyan {
	color: #33a3b3;
}
.color.green {
	color: #90ba25;
}
.color.gray {
	color: #797876;
}
.color.red {
	color: #d3173b;
}
.color.black {
	color: #000;
}
.text-tiny {
	font-size: 0.7em;
	font-family: 'NotoSans', Tahoma, Helvetica, Arial, sans-serif;
}
.text-small {
	font-size: 0.8em;
	font-family: 'NotoSans', Tahoma, Helvetica, Arial, sans-serif;
}
.text-normal {
	font-size: 0.9em;
	font-family: 'NotoSans', Tahoma, Helvetica, Arial, sans-serif;
}
.text-medium {
	font-size: 1em;
	font-family: 'NotoSans', Tahoma, Helvetica, Arial, sans-serif;
}
.text-big {
	color: #626262;
	font-size: 1.2em;
	font-family: 'NotoSans', Tahoma, Helvetica, Arial, sans-serif;
	font-weight: lighter;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	margin-right: 0px;
}
.text-giant {
	color: #333333;
	font-size: 1.8em;
	font-family: 'NotoSans', Tahoma, Helvetica, Arial, sans-serif;
	font-weight: lighter;
}
.text-info {
	color: #333333;
}
.background-title {
	color: #333333;
	font-size: 5.0em;
	font-family: 'NotoSans', Tahoma, Helvetica, Arial, sans-serif;
}
.login-full-error-container {
	margin-top: 80px;
}
.login-full-error-container h1 {
	/*color: #333333;*/
	color: #212121;
	font-size: 1.2em;
	font-family: 'WhetisakDojo', Tahoma, Helvetica, Arial, sans-serif;
	font-weight: lighter;
}
.login-full-error-container p {
	color: #333333;
	font-size: 0.8em;
	font-family: 'NotoSans', Tahoma, Helvetica, Arial, sans-serif;
	margin: 14px 0px 14px 0px;
}
.login-cta-container h1 {
	font-size: 1.0em;
	font-family: 'WhetisakDojo', 'Segoe', 'SegoeUI-Regular-final', Tahoma, Helvetica, Arial, sans-serif;
}
.login-cta-container p {
	font-size: 0.8em;
	font-family: 'NotoSans', Tahoma, Helvetica, Arial, sans-serif;
	margin: 14px 0px 14px 0px;
}
.text-error {
	/*color: #E22910;*/
	color: #d3173b;
}
.textfield {
	width: 350px;
}
.panel-login li {
	display: block;
	list-style: none;
}
input:focus, select:focus, textarea:focus {
	outline: none;
}
div#background-container {
	position: fixed;
	left: 0px;
	top: 0;
	overflow: hidden;
	z-index: 0;
	opacity: 1;
	width: 100%;
	height: 100%;
	transition: opacity 1s;
	-moz-transition: opacity 1s;
	-webkit-transition: opacity 1s;
	-o-transition: opacity 1s;
	-ms-transition: opacity 1s;
	transition-property: opacity;
	transition-duration: 1s;
}
div#background-container IMG {
	position: fixed;
	width: auto;
	height: 100%;
	background-color: #FFFFFF;
}
img#cover_image {
	position: fixed;
	width: auto;
	height: auto;
}
div#background-page-overlay {
	position: fixed;
	left: 0px;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
	opacity: 1;
	background: #F7F7F7 no-repeat top left fixed;
}
.panel-login {
	background: #FFFFFF;
	position: fixed;
	right: 0px;
	float: right;
	height: 100%;
	width: 500px;
	margin: 0px;
	padding: 0px;
	z-index: 1;
	overflow-y: auto;
	overflow-x: hidden;
	text-align: center;
}
.panel-login-layout {
	margin: 0 auto;
	text-align: left;
}
.login-panel-inner-container {
	min-height: 100%;
	width: 100%;
	margin-bottom: -53px;
}
.login-footer-container, .push {
	height: 50px;
}
.sticky-footer {
	margin-top: -3.5em;
}
.inner-container {
	padding-left: 0px;
	width: 100%;
	display: inline-block;
	position: relative;
	height: 100%;
}
.credentials {
	padding-top: 90px;
	height: 100%;
}
.login-logo-container {
	width: auto;
	height: auto;
	-moz-transition: margin 0.6s;
	-webkit-transition: margin 0.6s;
	-o-transition: margin 0.6s;
	transition: margin 0.6s;
	transition-property: margin;
	transition-duration: 0.6s;
}
.spacer {
	padding-top: 100px;
	transition: padding 0.6s;
}
.login-cta-container {
	width: auto;
	height: auto;
	padding-bottom: 30px;
}
.login-error-container {
	height: auto;
	padding-bottom: 20px;
}
.login-credentials-container {
	width: 100%;
	height: auto;
	padding-bottom: 60px;
	transition: margin 0.6s;
	-moz-transition: margin 0.6s;
	-webkit-transition: margin 0.6s;
	-o-transition: margin 0.6s;
	transition-property: margin;
	transition-duration: 0.6s;
	margin-bottom: 0px;
}
.login-credentials-field-container {
	width: 380px;
	display: list-item;
}
.login_user_chooser {
	width: 100%;
}
.login-credentials-options-container {
	width: 380px;
	margin: 0px;
	padding: 0px;
	display: list-item;
}
div.login-textfield {
	z-index: -1;
}
.high-contrast-border {
	border: 1px solid #FFFFFF;
	width: auto;
	max-width: 350px;
}
input.login-textfield {
	height: 32px;
	padding-left: 3px;
	margin: 0px;
	border: 1px solid #B8B8B8;
	z-index: 3;
	background: transparent;
	color: #000000;
}

::-webkit-input-placeholder {
 color: #767676;
}

:-moz-placeholder {
 color: #767676;
}

::-moz-placeholder {
 color: #767676;
}

:-ms-input-placeholder {
 color: #767676;
}
span.placeholder {
	color: #767676;
	margin: 6px 0px 0px -6px;
	padding-left: 10px;
	width: 380px;
	z-index: -1;
}
.field {
	color: #6B6B6B;
}
.button {
	background: #212121;
	border: 1px solid #FFFFFF;
	padding: 6px 12px 6px 12px;
	color: #FFFFFF;
	width: auto;
	cursor: pointer;
	margin-right: 4px;
	transition: background 1s;
	-moz-transition: background 1s;
	-webkit-transition: background 1s;
	-o-transition: background 1s;
	transition-property: background;
	transition-duration: 1s;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	display: inline-block;
}
.button:active {
	/*background: #2672EC;*/
	background: #d3173b;
	color: #FFFFFF;
}
.button:focus {
/*outline: gold solid 1px;*/
}
.credentials-cancel-button {
	background: #CBCBCB;
	color: #000000;
}
.credentials-cancel-button:active {
	/*background: #0072C6;*/
	background: #797876;
	/*color: #000000;*/
	color: #FFFFFF;
}
.status {
	margin-top: 10px;
	margin-bottom: 20px;
}
.subtext-strong {
	margin-bottom: 10px;
}
.button-disabled {
	background: #2672EC;
	cursor: default;
}
input.login-textfield:focus {
	border: 1px solid #6B6B6B;
}
div#credentials-userid-container {
	margin-bottom: 2px;
}
.progress div {
	width: 3px;
	height: 3px;
	overflow: hidden;
	position: absolute;
	background: #696969;
	z-index: 100;
}
.progress {
	position: relative;
	top: -6px;
	height: 6px;
	visibility: hidden;
	margin-left: 0px;
}
div#credentials-password-container {
	width: 105%;
	opacity: 1;
	transition: visibility 1s;
	-moz-transition: visibility 1s;
	-webkit-transition: visibility 1s;
	-o-transition: visibility 1s; /* IE10+ */
	transition-property: opacity visibility;
	transition-duration: 1s;
}
span.input-field {
	background: transparent;
	z-index: 0;
}
.disabled {
	background: transparent;
}
div.subtext {
	margin-top: 10px;
	transition: opacity 1s;
	-moz-transition-property: opacity, background-color;
	-moz-transition-duration: 1s, 1s;
	-webkit-transition-property: opacity, background-color;
	-webkit-transition-duration: 1s, 1s;
	-o-transition: opacity, background-color; /* IE10+ */
	-o-transition-duration: 1s 1s;
	transition-property: opacity, background-color;
	transition-duration: 1s, 1s;
	opacity: 1;
}
input#credentials-keep-signed_in-checkbox {
	padding-right: 0px;
	border-color: #5B5B5B;
}
input#credentials-keep-signed_in-checkbox:focus {
	outline: gold solid 1px;
}
#credentials-container {
	margin-bottom: 30px;
}
.footer {
	width: 100%;
	height: 40px;
	color: #666666;
	margin-left: 0px;
	display: inline-block;
}
div.footer a {
	color: #000000;
}
.branding-footer {
	padding-right: 10px;
}
.corporate-link {
	padding-right: 5px;
	cursor: pointer;
	display: inline-block;
}
.corporate-link:first-child {
	padding-left: 0px;
	padding-right: 0px;
}
.hidden {
	visibility: hidden;
	display: none;
}
#back_button_container {
	float: left;
	margin-left: -34px;
	margin-top: 9px;
}
#back_button_image {
	width: 20px;
	height: 20px;
}
#panel-login-center {
	width: 400px;
	height: 100%;
	min-height: 100%;
	margin: 0;
	display: inline-block;
	padding: 0;
	border: 0;
}
#table-footer {
	width: 100%;
	max-width: 400px;
}
#table-footer td {
	padding: 0;
	vertical-align: top;
}
.footer-glyph_container {
	display: inline-block;
	padding: 0;
}
.footer-glyph {
	width: 37px;
	height: 30px;
	padding: 0;
	padding-right: 7px;
}
.ad_glyph {
	width: 50px;
	height: 50px;
	margin-bottom: -1px;
	margin-top: 4px;
}
.hide {
	opacity: 0;
}
.display-none {
	display: none;
}
table.user_tile:hover {
	background: #E6E6E6;
}
table.user_tile:active {
	background: #0072C6;
	color: #FFFFFF;
}
.border-none {
	border: none;
}
div#recover-container p {
	display: inline;
}

/* Vertical orientation*/
@media only screen and (max-height: 820px), (max-device-height: 820px) {
.inner-container {
	padding-top: 45px;
}
.spacer {
	padding-top: 30px;
}
.login-credentials-container {
	padding-bottom: 20px;
	margin-bottom: 0px;
}
}

@media only screen and (max-height: 600px), (max-device-height: 600px) {
.inner-container {
	padding-top: 30px;
}
.spacer {
	padding-top: 10px;
}
.login-credentials-container {
	padding-bottom: 20px;
	margin-bottom: 0px;
}
}

@media only screen and (max-height: 575px), (max-device-height: 575px) {
.inner-container {
	padding-top: 30px;
}
.spacer {
	padding-top: 0px;
}
.login-credentials-container {
	padding-bottom: 20px;
	margin-bottom: 0px;
}
.login_guest_container {
	padding-top: 10px;
	padding-bottom: 30px;
}
}

/* Horizontal phone orientation */
@media only screen and (max-width: 600px), (max-device-width: 600px) {
html {
	background: #FFFFFF;
	overflow: hidden;
}
body {
	background: #FFFFFF;
}
div#background-container {
	opacity: 0;
	display: none;
}
div#background-page-overlay {
	display: none;
	z-index: -999;
}
#back_button_container {
	margin-left: -30px;
}
.sticky-footer {
	margin-top: -4em;
}
.panel-login {
	position: relative;
	float: none;
	height: 100%;
	width: 100%;
	min-width: 100%;
	margin: 0px;
	padding: 0px;
	z-index: 1;
	padding-top: 0px;
	overflow: auto;
}
#panel-login-container {
	border-left: 0;
}
#panel-login-center {
	width: 400px;
}
}

@media only screen and (max-width: 420px), (max-device-width: 420px) {
.text-tiny {
	font-size: 0.6em;
}
.text-small {
	font-size: 0.7em;
}
.text-normal {
	font-size: 0.8em;
}
.text-big {
	font-size: 1.0em;
}
.text-giant {
	font-size: 1.2em;
}
div#background-container {
	opacity: 0;
	z-index: -999;
	display: none;
}
div#background-page-overlay {
	display: none;
	z-index: -999;
}
.panel-login {
	position: relative;
	float: none;
	height: 100%;
	width: 100%;
	min-width: 100%;
	margin: 0px;
	padding: 0px;
	z-index: 1;
	padding-top: 0px;
	overflow: auto;
}
#panel-login-center {
	padding-left: 10px;
	padding-right: 10px;
	width: 100%;
}
img.logo-image {
	max-width: 280px;
	height: 30px;
	width: auto;
}
.login-logo-container {
	margin-bottom: 0px;
	max-width: 280px;
	padding-left: 0px;
}
.login-cta-container {
	margin-bottom: 0px;
	max-width: 280px;
	padding-left: 0px;
	width: auto;
	height: auto;
	color: #333333;
}
.login-error-container {
	margin-top : 4px;
	margin-bottom : 4px;
	padding: 0;
	height : 20px;
}
.login-credentials-field-container {
	max-width: 280px;
}
.login-credentials-options-container {
	max-width: 280px;
	padding-left: 0px;
}
.cta-text {
	display: inline;
}
.login-credentials-container {
	padding-bottom: 20px;
}
.login_guest_container {
	max-width: 280px;
	padding-right: 5px;
}
span.placeholder {
	width: 280px;
	padding-left: 10px;
}
div.login-textfield {
	max-width: 100%;
}
input.login-textfield {
	max-width: 100%;
}
div#credentials-password-container {
	transition: none;
	-moz-transition: none;
	-webkit-transition: none;
	-o-transition: none; /* IE10+ */
	transition-property: none;
	transition-duration: none;
}
.subtext {
	transition: none;
	-moz-transition-property: none;
	-moz-transition-duration: none;
	-webkit-transition-property: none;
	-webkit-transition-duration: none;
	-o-transition: none;
	-o-transition-duration: none;
	transition-property: none;
	transition-duration: none;
}
.login_guest_container {
	width: 100%;
}
.footer {
	width: 100%;
	max-width: 380px;
	margin: auto;
	display: inline-block;
}
span.corporate_footer {
	float: none;
	width: 100%;
	padding: 0px;
}
.corporate-link:first-child {
	padding: 0px;
}
table.user_tile {
	max-width: 320px;
}
}

@media only screen and (max-width: 280px), (max-device-width: 280px) {
#panel-login-center {
	width: 210px;
	width: calc(100% - 30px);
}
table.user_tile {
	max-width: 100%;
}
#redirect-cta-text {
	width: 100%;
	max-width: 100%;
}
#redirect_message_container {
	width: 100%;
	max-width: 100%;
}
.panel-login {
	width: 100%;
	min-width: 100%;
}
img.logo-image {
	max-width: 100%;
	width: auto;
}
.login-logo-container {
	max-width: 100%;
}
.login-cta-container {
	max-width: 100%;
}
.login-credentials-field-container {
	width: 100%;
}
.login-credentials-options-container {
	width: 100%;
	max-width: 100%;
}
.login_guest_container {
	width: 100%;
}
span.placeholder {
	width: 100%;
}
div.login-textfield {
	width: 100%;
}
input.login-textfield {
	width: 100%;
}
}
/*************** Slide/Fade in from left to right. *****************/
/* Supported browsers IE10+, Chrome, Firefox, Safari, Android 4.0+ */
.slide {
	-webkit-animation-duration: 0.5s;
	-webkit-animation-name: commonFadeInFrames, slideLTransformFrames;
	-webkit-animation-fill-mode: both;
	-moz-animation-duration: 0.5s;
	-moz-animation-name: commonFadeInFrames, slideLTransformFrames;
	-moz-animation-fill-mode: both;
	-ms-animation-duration: 0.5s;
	-ms-animation-name: commonFadeInFrames, slideLTransformFrames;
	-ms-animation-fill-mode: both;
	animation-duration: 0.5s;
	animation-name: commonFadeInFrames, slideLTransformFrames;
	animation-fill-mode: both;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
.login-credentials-field-container {
	margin-left: 1px;
}
}
input.errorInput, input.errorInput:focus {
	border: 1px solid red;
}

@media only screen and (max-width: 620px), (max-device-width: 620px) {
.login-credentials-container {
	margin-bottom: 0px;
}
}
