html , body {
	background: #F8F8F8;	
}	
	
/** Container **/
.loginContainer {
	background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #C3C3C3;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    min-height: 480px;
    min-width: 320px;
    width: 480px;
}

/** Logo **/
.loginLogoContainer {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 50%;
    //min-height: 230px;
    text-align: center;
	margin-top: 30px;
}

.loginLogo {
	//padding-bottom: 40px;
    //padding-top: 50px;
}

/** Header **/
.loginTitleContainer {
	margin-top: 5px;
	margin-bottom:30px;
}

.loginTitleHeader {
	color:#eb2136;
	font-family:'toyotaDisplay_Bd';
	text-align:center;
	text-transform: uppercase;
}

.loginContainer .loginResponseContainer {
	font-family: 'toyotaDisplay_Rg';
	text-align: center;
	margin-bottom: 10px;
}

.loginErrorMessage{
	font-family: 'toyotaDisplay_Rg';
	color: #eb2136;
	padding: 0 25px;
}

.success {
	color: #4C9900;
}

.loginSupportNumberContainer {
	color: #4d4f53;
    font-family: 'toyotaDisplay_Rg';
    text-align: center;
    margin-top: -10px;
}

/** Form **/
.loginContainer .form-group {
	padding-top: 10px;
	padding-left: 20px;
	padding-right: 20px;
	font-weight: normal;
	font-family: 'toyotaDisplay_Bd';
	color: #4d4f53;
	letter-spacing:1px;
}

.loginFormContainer {
	background:#FFFFFF;
	position: relative;
	width:100%;
	height:auto;
}

.controlLabel{
	float:left;
	width: 100px;
	margin-left: 7px;
	text-align: right;
	margin-top:7px;
	font-weight: normal;
}

.controlLabelDots{
	float:left;
	width: 5px;
	margin-left: 10px;
	margin-top:7px;
}

/** forgot password**/
.loginForgotPasswordContainer {
	padding-left: 118px;
}

.loginForgotPasswordContainer a {
	color: #000;
	text-decoration: underline;
}

.loginAgreeTermsCheckbox {
	font-family:'toyotaDisplay_Rg';
	font-size:12px;
	margin-left:40px;
	margin-top:25px;
	margin-bottom:40px;
}

.loginAgreeTermsCheckbox input[type='checkbox'] {
	float: left;
	margin: 2px 7px 0 0;
}

.loginAgreeTermsCheckbox p {
	margin: 0;
}

.loginAgreeTermsCheckbox a {
	color: #000;
	text-decoration: underline;
}

.p_loginCheckboxInput {
	//color:#333333 !important;
	color: #eb2136;
	font-family:'toyotaDisplay_Rg';
	padding-left: 0px;
	font-size:12px;
}

/** button **/
.loginSigninContainer {
	background-color: #CBCDC9;
	//margin-top:15px;
	//height: 51px;
	//width: auto;
	text-align: right;
}

.p_loginSigninButton {
	background-color: #eb2136;
	color: #FFFFFF;
	font-family:'toyotaDisplay_Bd';
	text-transform: uppercase;
	display: inline-block;
	//float:right;
	height: 100%;
	//width: 40%;
	text-align: center;
	padding: 15px 70px;
    border-radius: 0px;
}

.p_loginSigninButton:hover, .p_loginSigninButton:focus{
	color: white;
	background:#d9040b;
}

/** footer **/
.loginFooterContainer {
    height: 80px;
    width: 100%;
    text-align: center;
    text-decoration: none;
    font-family: 'toyotaDisplay_Rg';
    font-size: 12px;
    background-color: rgba(0, 0, 0, 0.8);
    bottom: 0;
    position: fixed;
    padding: 10px;
}

.loginFooterContainer a.copyright {
	color: #4d4f53;
	text-transform:uppercase;
}

.loginFooterContainer a:hover {
	text-decoration: underline;
}

/** separator **/
hr {
	display: block; 
	height: 1px;
    border: 0; 
    border-top: 1px solid #C3C3C3;
    margin: 1em 0; padding: 0; 
}

/** overrides **/
.form-control {
	border-radius: 0px;
	font-family: 'toyotaDisplay_Rg';
	float: left;
	margin-left: 10px;
	width: 300px;
}

.form-control label {
	font-family:'toyotaDisplay_Bd';
}

.form-control input {
	font-family:'toyotaDisplay_Rg';
}

.form-group {
	margin-top: 0px;
	margin-bottom: 0px;
	
}

.loginInputFixedWidth{
	width: 265px;
}


/** VIEW GREATER THAN 700 VIEW **/
@media only screen and (min-width: 1025px) {

	.loginFooterContainer 
	{
		/*margin-top:25px;*/
	}
	
	/** test override .form-control **/
	.form-control {
		height: 34px !important;	
	}	
}

/** TABLET VIEW **/
@media only screen and (max-width: 1024px) {

	.loginFooterContainer 
	{

		/*margin-top:60px;*/
	}
	.loginContainer{
		margin-top: 30px;
	}	
	
	/** test override .form-control **/
	.form-control {
		height: 50px !important;
	}
}

/****************/
/* ajax loader
/****************/
.loadContainer {
 background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);
    display: none;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1003;
}

/* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.load {
  height: 100px;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-align: center;
    top: 50%;
    width: 100px;
}

.load img {
 width: 75px;
 height: 75px;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .loadContainer {
    display: block;
}

.loginOrContainer {
	height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    min-width: 320px;
    width: 480px;
}

.orContainerLine {
	border-bottom:3px solid #ccc;
	width:217px;
	float:left;
	height:11px;
}

.orContainerText {
	font-weight:bold;
	float:left;	
	margin:0 10px;
}

.loginSsoContainer {
	height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    min-width: 320px;
    width: 480px;
}

.loginSsoAccount {
	background-color:#eb2136;
	height:50px;
	color:#FFFFFF;
	padding:16px 0 0 20px;
	display: block;
	font-family:'toyotaDisplay_Rg';
	text-align:center;
	margin-bottom: 40px;
}

.loginSsoContainer a:focus, .loginSsoContainer a:active, .loginSsoContainer a:hover {
	text-decoration: none;
	color: #FFFFFF;
}

.loginAssistContainer {
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    min-width: 320px;
    width: 480px;
    border : 1px solid #ccc;
    padding:10px;
}

.loginAssistContainer a:focus, .loginAssistContainer a:active, .loginAssistContainer a:hover {
	text-decoration: none;
	color: #FFFFFF;
}

.loginAssistTextContainer {
	margin-top:10px;
}

.loginAssistText {
	color:#555555;
	font-size:12px;
	font-family:'toyotaDisplay_Rg';
}

.loginAssistEmail {
	color:#0589FC;
}

.loginAssistEmail:focus, .loginAssistEmail:active, .loginAssistEmail:hover {
	color:#0589FC!important;
}

.loginFooterText {
	color:#555555;
	font-size:11px;
	font-family:'toyotaDisplay_Rg';
	margin-left:0;
}

.clearBoth {
	clear: both;
}

.loginPopupTitle{
	background: #000000;
	color: #FFFFFF;
	font-size: 14px;
	font-family: 'toyotaDisplay_Bd';
	text-transform: uppercase;
	padding: 15px;
}

#loginPopup .modal-header .close {
	opacity:1;
	filter: alpha(opacity=100);
	margin-top:-7px;
}

#loginPopup .modal-footer{
	background: #CBCDC9;
	color: #FFFFFF;
	font-size: 12px;
	padding: 0px;
}
.loginPopupCloseButton{
	
	width: 100px;
	background: #EB0A1E;
	border: none;
	padding: 10px;
	font-family: 'toyotaDisplay_Bd';
	text-transform: uppercase;
	color: #ffffff;
}
#loginPopup .modal-body {
	font-size:13px;
}
#loginPopup .modal-title {
	font-family: 'toyotaDisplay_Bd';
}

/* FCAI Portal Styles */
html {
    background: url(../../images/bg-large.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-color: #000000;
}
body {
	background: none;
}
.loginOrContainer {
    display: none;
}
.loginSsoContainer {
    display: none;
}
.loginFooterContainer a.copyright {
    color: #cccccc;
}
.loginContainer {
    margin-top: 0;
    background-color: rgba(0, 0, 0, 0.8);
    border: none;
    border-radius: 5px;
    min-height: auto;
}
.loginHeaderContainer {
    margin-top: 200px;
}
.loginTitleHeader.mainHeader {
    padding-top: 0;
}
.loginFormContainer {
    background: none;
}
.loginTitleHeader {
    padding-top: 20px;
    font-size: 15px;
    font-family: Arial;
    font-weight: bold;
    color: #ffffff;
}
.loginTitleHeaderMini {
    text-align: center;
    color: #dddddd;
}
.form-control {
    width: 430px;
    margin-left: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    border-color: #666666;
}
.loginTitleContainer {
    margin-bottom: 20px;
}
.loginSigninContainer {
    background: none;
    text-align: center;
}
.loginAgreeTermsCheckbox {
    display: none;
}
.loginSigninContainer {
    background: none;
    text-align: center;
}
button#loginButton {
    margin-bottom: 10px;
    background-color: #8b6440;
    padding: 10px;
    width: 90%;
    border-radius: 5px;
    text-transform: capitalize;
    font-family: Arial;
    font-weight: bold;
    font-size: 15px;
    margin-top: 30px;
}
.loginForgotPasswordContainer {
    padding: 0;
    text-align: center;
    padding-bottom: 10px;
}
a#p_loginCheckboxInput {
    color: #dddddd;
    text-decoration: none;
}
button.loginPopupCloseButton {
    background: #8b6440;
}
input#username {
    background: url(../../images/user.png) rgb(32,28,27) no-repeat scroll 1px;
    padding-left: 40px;
}
input#password {
    background: url(../../images/lock.png) rgb(32,28,27) no-repeat scroll 1px;
    padding-left: 40px;
}
.fcaiLogo,.potentiateLogo,.loginFooterText {
	float: left;
	width: 33.33%;
	height: 100%;
}
.fcaiLogo {
	background: url(../../images/fcai-logo.png) no-repeat;
	background-size: contain;
}
.potentiateLogo {
	background: url(../../images/potentiate-logo.png) no-repeat;
	background-size: 35%;
	background-position: right;
}
a.copyright {
    margin-top: 25px;
    display: block;
}
button#loginButton:hover {
	background-color: #5c432b;
}
.control {
    position: relative;
}
.login-input {
    padding-left: 35px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #999999;
}
.login-input ~ .input-icon {
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center center;
    width: 33px;
    height: 30px;
    position: absolute;
    left: 25px;
    bottom: 0;
    top: 33px;
    margin: auto;
}
.icon1 {
	background-image: url(../../images/user.png);
}
.icon2 {
	background-image: url(../../images/lock.png);
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #999999;
  -webkit-box-shadow: 0 0 0px 1000px rgb(32,28,27) inset;
  transition: background-color 5000s ease-in-out 0s;
}