* { box-sizing: border-box; }
html {width: 100%; height: 100%; font-family: Segoe UI, Lucida Grande, Ubuntu, Helvetica, sans-serif;}
.loginContent {width: 100%; height: 100%; display: table; margin: 0; overflow: hidden; padding: 0; background-color: #333;}
.loginTopPane, .loginCenterPane, .loginBottomPane{display: table-row;}
.loginLeftTopPane, .loginLeftCenterPane, .loginLeftBottomPane, .loginRightTopPane, .loginRightCenterPane, .loginRightBottomPane , .loginLabelPane, .loginFieldPane, .loginEndPane {display: table-cell;}
.loginLeftTopPane, .loginLeftCenterPane, .loginLeftBottomPane{width: 150px;}
.loginRightTopPane, .loginRightCenterPane, .loginRightBottomPane {width: auto;}
.loginLeftCenterPane, .loginRightCenterPane {height: 50%; border-top: 1px solid #F0FFFF; border-bottom: 1px solid #F0FFFF;}
.loginLeftTopPane, .loginLeftBottomPane, .loginRightTopPane, .loginRightBottomPane {height: 25%;}
.loginLeftTopPane, .loginLeftBottomPane, .loginRightTopPane, .loginRightBottomPane {background-color: #B4CDCD;}
.loginRightCenterPane{vertical-align: middle; background-color: #009ACD;}
.loginRightTopPane, .loginRightBottomPane{vertical-align: bottom; padding-left: 10px; padding-bottom: 10px;}
.loginLeftCenterPane{vertical-align: middle; background: #009ACD url("../images/applogo.png") no-repeat center center; opacity: 0.9;}
.loginPane  {display: table; width: 100%; height: 100%;}  
.loginLabelPane, .loginFieldPane{vertical-align: middle;}
.loginLabelPane{width: 30%; text-align: right; padding-right: 0.3125em;}
.loginFieldPane{min-width: 300px; max-width: 300px;}
.loginEndPane{width: 50%;}
.loginFieldRow, .slidein, .slideout, .fadein {height: 2em;}
.companyPane  {display: table; width: 100%; height: auto;}
.companyTextPane, .companyLogoPane {display: table-cell; height: auto;}
.companyTextPane {width: 65%;}
.companyLogoPane{background: url("../images/logo_login.png") no-repeat center bottom;}
.companyTextLarge, .companyTextSmall, .loginRightBottomPane {color: #4D4D4D;}
.loginTextLarge, .loginLabelPane {color: #F0FFFF;}
div.loginFieldRow a {color: #D1D1D1; cursor: pointer;}
.companyTextLarge, .loginTextLarge {font-size: 1em;}
.companyTextLarge {font-weight: bold;}
.companyTextSmall, .loginRightBottomPane {font-size: 0.755em;}
div.loginFieldRow label, div.loginFieldRow a, div.slidein label, div.slideout label, div.fadein label {font-size: 0.7875em; text-decoration: none;}
div.loginFieldRow a:hover{text-decoration: underline; color: #F0FFFF;}
.textfield {background: #FFF url(../images/textarea_bg.gif) no-repeat; font-size: 0.7875em; color: #000000; height: 2em; border-width: 1px; border-style: solid; border-color: #EEE; padding-left:2px; border-radius:3px;}
.logoutContent {width: 100%; height: 100%; margin: 0; overflow: hidden; background: #EEEEEE;}
.pageLink {color: #333; font-size: 0.7875em; text-decoration: none;}
.pageLink a {text-decoration: underline; cursor: pointer;}
.pageLink a:visited {color: #333;}
.pageLink a:hover {color: #003366;}
.logoutPane {width: 100%; height: 100px;}
.logoutBar {padding: 0px 10px 0px 10px; width: 100%; height: 50%; color: #EEEEEE; font-weight: bold; text-decoration: none;background:transparent url(../images/desktop.jpg) repeat left top; vertical-align: middle;}
.logoutLeftPane, .logoutRightPane {display: inline-block; width: 50%; height: 100%; vertical-align: middle;}
.logoutLeftPane {background: url("../images/logo_login.png") no-repeat left center;}
.logoutRightPane {background: url("../images/applogo.png") no-repeat right center;}
.logoutBottomPane {padding: 20px 0px 0px 0px; width: 100%; height: 50%; text-align: center;}
button,
[type="button"],
[type="reset"],
[type="submit"] {
    display: inline-block;
    border: none;
    border-radius: 0.25rem;
    padding: 0.4rem 0.4rem;
    margin: 0;
    text-decoration: none;
    background: #B4CDCD;
    color: #333333;
    cursor: pointer;
    text-align: center;
    transition: background 250ms ease-in-out, transform 150ms ease;
    -webkit-appearance: none;
    -moz-appearance: none;
}
button:hover,
button:focus,
[type="button"]:hover,
[type="reset"]:hover,
[type="submit"]:hover,
[type="button"]:focus,
[type="reset"]:focus,
[type="submit"]:focus {
    background: #FFC125;
}
button:focus,
[type="button"]:focus,
[type="reset"]:focus,
[type="submit"]:focus {
    outline: 1px solid #fff;
    outline-offset: -4px;
}
button:active,
[type="button"]:active,
[type="reset"]:active,
[type="submit"]:active {
    transform: scale(0.99);
}
button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
    background: #8E8E8E;
    cursor: not-allowed;
}
.alignRight {
	text-align: right;
}
.alignLeft {
	text-align: left;
}
.slidein {
	animation-duration: 0.2s;
	animation-name: slidein;
}
@keyframes slidein {
	from {
		margin-left: 100%;
	}
	
	to {
		margin-left: 0%;
	}
}
.slideout {
	animation-duration: 0.2s;
	animation-name: slideout;
}
@keyframes slideout {
	from {
		margin-left: 0%;
	}
	
	to {
		margin-left: 100%;
	}
}
.fadein {
	animation-duration: 2s;
	animation-name: fadein;
}
@keyframes fadein {
	from {
		opacity: 0;
	}
	
	to {
		opacity: 1;
	}
}